@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600&display=swap');/* ============================================================
   Pre-booking Wedding Hub preview — shown to an authenticated user
   with no wedding membership. Deep green / warm gold / cream,
   editorial serif, premium glass. Self-contained (.pbk scope) so it
   never inherits portal or marketing-page layout.
   NOTE: everything rendered inside is STATIC DEMO CONTENT.
   ============================================================ */

.pbk{
  --g:#00603A; --g-deep:#00301D; --gold:#D0A54A; --gold-soft:#E9C87E;
  --cream:#FFFAF1; --dim:rgba(255,250,241,.62); --faint:rgba(255,250,241,.38);
  --hair:rgba(255,250,241,.14);
  min-height:100vh;
  color:var(--cream);
  font-family:var(--font-body,'Lato',sans-serif);
  background:
    radial-gradient(60% 45% at 18% 6%, rgba(0,96,58,.55) 0%, transparent 70%),
    radial-gradient(48% 40% at 88% 22%, rgba(208,165,74,.14) 0%, transparent 72%),
    linear-gradient(180deg, #04150E 0%, #062316 42%, #04150E 100%);
}
.pbk *{box-sizing:border-box}
.pbk-shell{max-width:1180px; margin:0 auto; padding:0 24px}

.pbk-eyebrow{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.28em;
  font-size:.64rem; color:var(--gold); display:block; margin-bottom:18px;
}
.pbk h1,.pbk h2,.pbk h3{font-family:var(--font-heading,'ZCOOL XiaoWei',serif); font-weight:400}

/* ---------- hero ---------- */
.pbk-hero{padding:clamp(56px,8vw,110px) 0 clamp(34px,4vw,56px)}
.pbk-hero-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(38px,6vw,72px)}
.pbk-hero-actions{display:flex; align-items:center; gap:clamp(14px,3vw,28px)}
.pbk-quiet{
  background:none; border:0; cursor:pointer; padding:6px 2px;
  font-size:.78rem; letter-spacing:.08em; color:var(--faint);
  transition:color .25s ease;
}
.pbk-quiet:hover{color:var(--dim)}
.pbk-hero h1{font-size:clamp(2.3rem,6vw,4.2rem); line-height:1.02; margin:0 0 20px; max-width:16ch}
.pbk-hero h1 em{font-style:normal; color:var(--gold-soft); display:block}
.pbk-lede{font-size:var(--fs-body); line-height:1.75; color:var(--dim); max-width:52ch; margin:0 0 34px}
.pbk-cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px}

/* Buttons follow the site-wide language: gold-outlined pill, transparent fill,
   translucent glass on hover — never a solid gold slab. */
.pbk-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-body); font-size:.75rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  padding:15px 34px; border-radius:100px; text-decoration:none;
  background:transparent; border:1px solid rgba(233,200,126,.9); color:#F0D9A0;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.pbk-btn:hover,.pbk-btn:focus-visible{
  background:linear-gradient(180deg, rgba(233,200,126,.22), rgba(208,165,74,.1));
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 0 0 1px rgba(233,200,126,.18) inset,
    0 18px 40px -18px rgba(0,0,0,.35);
  color:var(--gold-soft);
}
.pbk-btn:disabled{opacity:.6; cursor:default}
.pbk-btn-ghost{border-color:var(--hair); color:var(--cream)}

.pbk-note{font-size:.84rem; color:var(--faint)}

/* ---------- sequence ---------- */
.pbk-seq{padding:clamp(30px,4vw,56px) 0 clamp(46px,6vw,86px)}
.pbk-seq-head{max-width:58ch; margin:0 0 clamp(26px,3vw,42px)}
.pbk-seq-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.1; margin:0 0 12px}
.pbk-seq-head p{color:var(--dim); font-size:var(--fs-body); line-height:1.7; margin:0}

.pbk-rail{display:flex; gap:14px; align-items:stretch; min-height:clamp(380px,44vw,470px)}
.pbk-mod{
  position:relative; overflow:hidden; text-align:left; cursor:pointer;
  flex:0 0 96px; min-width:0; padding:22px 18px; border-radius:20px;
  border:1px solid var(--hair); color:var(--cream);
  background:linear-gradient(160deg, rgba(255,250,241,.07), rgba(255,250,241,.015));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 1px 1px 0 rgba(255,250,241,.08), 0 30px 60px -34px rgba(0,0,0,.8);
  transition:flex-basis .9s cubic-bezier(.22,.9,.2,1), flex-grow .9s cubic-bezier(.22,.9,.2,1),
             background .6s ease, border-color .6s ease;
}
.pbk-mod:hover{border-color:rgba(208,165,74,.35)}
.pbk-mod.on{
  flex:1 1 auto; padding:26px 28px;
  border-color:rgba(208,165,74,.42);
  background:linear-gradient(160deg, rgba(255,250,241,.12), rgba(0,96,58,.16));
}
/* the emotional turn — memories modules warm up */
.pbk-mod.warm.on{background:linear-gradient(160deg, rgba(233,200,126,.16), rgba(0,48,29,.5))}

.pbk-mod-idx{font-size:.66rem; letter-spacing:.2em; color:var(--gold); display:block; margin-bottom:14px}
.pbk-mod-vert{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}
.pbk-mod-kicker{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 8px}
.pbk-mod-title{font-family:var(--font-heading,serif); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.1; margin:0 0 6px}
.pbk-mod-sub{font-size:.86rem; color:var(--dim); margin:0 0 20px}
.pbk-mod-body{animation:pbkIn .7s ease both}
@keyframes pbkIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.pbk-seq-foot{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:26px; flex-wrap:wrap}
.pbk-dots{display:flex; gap:8px}
.pbk-dot{width:26px; height:3px; border-radius:2px; border:0; padding:0; cursor:pointer; background:rgba(255,250,241,.2); transition:background .4s ease}
.pbk-dot.on{background:var(--gold)}
.pbk-turn{font-family:var(--font-heading,serif); font-size:var(--fs-body); color:var(--gold-soft); margin:0}

/* ---------- mini portal previews (static demo) ---------- */
.pbk-pane{
  border-radius:14px; border:1px solid var(--hair); padding:16px 18px;
  background:linear-gradient(170deg, rgba(4,21,14,.62), rgba(4,21,14,.28));
}
.pbk-pane-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.pbk-pane-head b{font-family:var(--font-heading,serif); font-weight:400; font-size:var(--fs-body)}
.pbk-pill{
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:100px;
  color:var(--gold-soft); border:1px solid rgba(208,165,74,.4); background:rgba(208,165,74,.1);
}
.pbk-pill.ok{color:#9fd9b6; border-color:rgba(159,217,182,.35); background:rgba(159,217,182,.09)}
.pbk-demo-tag{
  display:inline-block; margin-top:14px; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
}

.pbk-tl{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pbk-tl li{display:grid; grid-template-columns:56px 12px 1fr; align-items:center; gap:10px; font-size:.9rem}
.pbk-tl b{font-weight:400; color:var(--gold-soft); font-size:.82rem; letter-spacing:.06em}
.pbk-tl i{width:7px; height:7px; border-radius:50%; background:rgba(255,250,241,.28); justify-self:center}
.pbk-tl li.now i{background:var(--gold); box-shadow:0 0 0 4px rgba(208,165,74,.18)}

.pbk-check{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.pbk-check li{display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--cream)}
.pbk-check li span{
  flex:0 0 16px; height:16px; margin-top:2px; border-radius:4px;
  border:1px solid rgba(255,250,241,.3); display:grid; place-items:center; font-size:.6rem; color:var(--g-deep);
}
.pbk-check li.done span{background:var(--gold); border-color:var(--gold)}
.pbk-check li.done{color:var(--dim)}

.pbk-chat{display:grid; gap:10px}
.pbk-bub{max-width:82%; padding:11px 14px; border-radius:14px; font-size:.88rem; line-height:1.5}
.pbk-bub small{display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:4px}
.pbk-bub.them{background:rgba(255,250,241,.09); border:1px solid var(--hair); border-bottom-left-radius:4px}
.pbk-bub.you{margin-left:auto; background:rgba(208,165,74,.16); border:1px solid rgba(208,165,74,.3); border-bottom-right-radius:4px}

.pbk-shots{display:grid; gap:10px}
.pbk-shot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; border:1px solid var(--hair); font-size:.88rem}
.pbk-tagp{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap}

.pbk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pbk-grid span{aspect-ratio:1; border-radius:8px; background-size:cover; background-position:center; background-color:rgba(255,250,241,.06)}
.pbk-grid span:first-child{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}

.pbk-film{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background-size:cover; background-position:center; display:grid; place-items:center}
.pbk-film::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,21,14,.1), rgba(4,21,14,.72))}
.pbk-play{
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,250,241,.6); display:grid; place-items:center;
  background:rgba(4,21,14,.35); backdrop-filter:blur(6px);
}
.pbk-play::before{content:""; width:0; height:0; margin-left:3px; border-left:13px solid var(--cream); border-top:8px solid transparent; border-bottom:8px solid transparent}
.pbk-filmrow{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; font-size:.86rem}

/* ---------- enquiry ---------- */
.pbk-enq{padding:clamp(40px,5vw,80px) 0 clamp(30px,4vw,56px)}

/* ---------- bottom already-booked CTA ---------- */
.pbk-bottom-cta{
  position:relative; overflow:hidden;
  padding:clamp(80px,9vw,140px) 0 clamp(100px,11vw,160px);
  text-align:center;
}
.pbk-bottom-cta-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 42%;
  filter:saturate(.92);
}
.pbk-bottom-cta-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,21,14,.82) 0%, rgba(4,21,14,.68) 40%, rgba(4,21,14,.88) 100%),
    radial-gradient(80% 70% at 50% 30%, rgba(0,48,29,.45) 0%, transparent 70%);
}
.pbk-bottom-cta .pbk-shell{position:relative; z-index:1; max-width:62ch}
.pbk-bottom-cta h2{font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.1; margin:0 0 14px}
.pbk-bottom-cta p{color:var(--dim); font-size:var(--fs-body); line-height:1.7; margin:0 0 28px}
.pbk-bottom-cta .pbk-cta-row{justify-content:center}
.pbk-card{
  border-radius:24px; border:1px solid var(--hair); padding:clamp(26px,3.6vw,46px);
  background:linear-gradient(160deg, rgba(255,250,241,.09), rgba(0,96,58,.12));
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 1px 1px 0 rgba(255,250,241,.09), 0 40px 80px -44px rgba(0,0,0,.8);
}
.pbk-enq h2{font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.08; margin:0 0 12px}
.pbk-enq h2 em{font-style:normal; color:var(--gold-soft)}
.pbk-enq-lede{color:var(--dim); font-size:var(--fs-body); line-height:1.7; max-width:56ch; margin:0 0 28px}
.pbk-form{display:grid; gap:16px}
.pbk-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pbk-field label{display:block; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
.pbk-field input,.pbk-field select,.pbk-field textarea{
  width:100%; padding:13px 14px; border-radius:4px; color:var(--cream);
  font-family:var(--font-body); font-size:var(--fs-body);
  background:rgba(4,21,14,.45); border:1px solid var(--hair);
  transition:border-color .25s ease, background .25s ease;
}
.pbk-field textarea{min-height:120px; resize:vertical}
.pbk-field input:focus,.pbk-field select:focus,.pbk-field textarea:focus{
  outline:none; border-color:rgba(208,165,74,.6); background:rgba(4,21,14,.62);
}
.pbk-field input::-moz-placeholder, .pbk-field textarea::-moz-placeholder{color:var(--faint)}
.pbk-field input::placeholder,.pbk-field textarea::placeholder{color:var(--faint)}
.pbk-field select option{color:#111}
.pbk-checkline{display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--dim); margin-top:10px}
.pbk-checkline input{width:16px; height:16px; accent-color:var(--gold)}
.pbk-status{font-size:.9rem; line-height:1.6; margin:0}
.pbk-status.ok{color:#9fd9b6}
.pbk-status.bad{color:#e8a5a5}

/* ---------- help sheet ---------- */
.pbk-sheet{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(2,10,7,.72); backdrop-filter:blur(8px);
}
.pbk-sheet-inner{max-width:520px; width:100%}
.pbk-sheet-inner h3{font-size:1.6rem; margin:0 0 10px}
.pbk-sheet-inner p{color:var(--dim); font-size:var(--fs-body); line-height:1.7; margin:0 0 20px}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .pbk-rail{
    display:flex; gap:14px; min-height:0;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:8px;
    margin:0 -24px; padding-left:24px; padding-right:24px;
  }
  .pbk-rail::-webkit-scrollbar{display:none}
  .pbk-mod,.pbk-mod.on{flex:0 0 84vw; max-width:420px; padding:22px 20px; scroll-snap-align:center}
  .pbk-row{grid-template-columns:1fr}
  .pbk-hero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .pbk-mod{transition:none}
  .pbk-mod-body{animation:none}
}

/* ---------- hero photograph ---------- */
.pbk-hero{position:relative; overflow:hidden}
.pbk-hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 32%;
  filter:saturate(.92);
}
.pbk-hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,21,14,.72) 0%, rgba(4,21,14,.55) 38%, rgba(4,21,14,.92) 100%),
    radial-gradient(70% 60% at 12% 10%, rgba(0,48,29,.55) 0%, transparent 70%);
}
.pbk-hero > .pbk-shell{position:relative; z-index:1}
/* ─────────────────────────────────────────────────────────────
   RMG Public Footer — "Editorial Landscape"
   Scoped under .rmg-footer. Not tied to the .v8 scope so it
   works consistently across every public page. The old
   .v8-footer rules in v8.css are unused once PublicFooter.tsx
   emits <footer class="rmg-footer">.
   Design system:
    · Continuous vertical fade from the section above
    · Centered wordmark focal point + gold hairline flourish
    · Editorial two-block grid (nav / contact)
    · Liquid glass ONLY on interactive chips (CTA, Your Wedding, Back to top)
    · Typography-led, no boxed cards, no heavy dividers
   ───────────────────────────────────────────────────────────── */

.rmg-footer{
  position:relative;
  background:#002d1b;                    /* darkest deep-green */
  color:rgba(255,250,241,.92);
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  overflow:hidden;
  isolation:isolate;
}

/* Continuous fade-in from the section above — no hard rule */
.rmg-footer::before{
  content:"";
  position:absolute;top:0;left:0;right:0;
  height:180px;
  background:linear-gradient(180deg,
    rgba(10,17,14,1) 0%,
    rgba(0,45,27,0) 100%);
  pointer-events:none;
  z-index:1;
}
/* Subtle warm bottom-right vignette to add depth without a divider */
.rmg-footer::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 100% 100%, rgba(208,165,74,.05), transparent 60%),
    radial-gradient(50% 50% at 0% 20%, rgba(0,120,80,.06), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.rmg-footer > *{position:relative;z-index:2}

/* ── Brand block (lives inside the grid, left column) ─────────── */
.rmg-foot-brand-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:28px;
}
.rmg-foot-logo{
  display:block;
  width:auto;
  height:clamp(56px, 6vw, 78px);
  max-width:100%;
  -o-object-fit:contain;
     object-fit:contain;
}
.rmg-foot-hairline{
  position:relative;
  width:120px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(208,165,74,.7) 0%,
    rgba(208,165,74,.15) 100%);
}
.rmg-foot-hairline::after{
  content:"";
  position:absolute;
  top:50%;left:0;
  transform:translateY(-50%);
  width:4px;height:4px;
  border-radius:50%;
  background:#D0A54A;
  box-shadow:0 0 10px rgba(208,165,74,.5);
}

.rmg-foot-cta-wrap{margin-top:4px}

/* ── Footer CTA pill — same language as the homepage hero CTAs:
   thin underline at rest; on hover the border draws outward and a
   liquid-glass fill fades in behind the text. ───────────────────── */
.rmg-foot-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 30px;
  border-radius:100px;
  font-family:var(--font-label, 'Roboto', system-ui, sans-serif);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,250,241,.85);
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  box-sizing:border-box;
  isolation:isolate;
  transition:
    color .35s ease,
    transform .4s cubic-bezier(.22,.61,.36,1);
}
.rmg-foot-cta::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(255,250,241,.55);
  background:transparent;
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  -webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:
    clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;
  z-index:0;
}
.rmg-foot-cta::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:calc(100% - 44px);
  height:1px;
  background:rgba(255,250,241,.55);
  pointer-events:none;
  z-index:1;
  opacity:1;
  transition:opacity .12s linear 0s;
}
.rmg-foot-cta-glass{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,250,241,.14), rgba(255,250,241,.06));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 40px -18px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1) 0s, visibility 0s linear .18s;
  z-index:0;
}
.rmg-foot-cta-label{position:relative; z-index:2}

.rmg-foot-cta:hover,
.rmg-foot-cta:focus-visible{
  color:#FFFAF1;
  transform:scale(1.015);
  outline:none;
}
.rmg-foot-cta:hover::before,
.rmg-foot-cta:focus-visible::before{
  clip-path:inset(0 0 0 0 round 100px);
  -webkit-clip-path:inset(0 0 0 0 round 100px);
  transition-delay:0s;
}
.rmg-foot-cta:hover::after,
.rmg-foot-cta:focus-visible::after{
  opacity:0;
  transition-delay:.26s;
}
.rmg-foot-cta:hover .rmg-foot-cta-glass,
.rmg-foot-cta:focus-visible .rmg-foot-cta-glass{
  opacity:1;
  visibility:visible;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1) .32s, visibility 0s linear .32s;
}

@media (prefers-reduced-motion: reduce){
  .rmg-foot-cta::before{
    clip-path:inset(0 0 0 0 round 100px);
    -webkit-clip-path:inset(0 0 0 0 round 100px);
    opacity:0;
    transition:opacity .18s ease;
  }
  .rmg-foot-cta-glass{transition:opacity .18s ease}
  .rmg-foot-cta:hover::before,
  .rmg-foot-cta:focus-visible::before{opacity:1; transition-delay:0s}
  .rmg-foot-cta:hover .rmg-foot-cta-glass,
  .rmg-foot-cta:focus-visible .rmg-foot-cta-glass{transition-delay:0s}
  .rmg-foot-cta:hover,
  .rmg-foot-cta:focus-visible{transform:none}
}

@media (max-width:900px){
  .rmg-foot-cta{padding:12px 22px; font-size:var(--fs-label); letter-spacing:.22em}
  .rmg-foot-cta::after{width:calc(100% - 32px)}
  .rmg-foot-cta::before{
    clip-path:inset(calc(100% - 1px) 16px 0 16px round 100px);
    -webkit-clip-path:inset(calc(100% - 1px) 16px 0 16px round 100px);
  }
  .rmg-foot-cta:hover::before,
  .rmg-foot-cta:focus-visible::before{
    clip-path:inset(0 0 0 0 round 100px);
    -webkit-clip-path:inset(0 0 0 0 round 100px);
  }
}

/* ── Editorial grid: brand · nav · contact ───────────────────── */
.rmg-foot-grid{
  max-width:1240px;
  margin:0 auto;
  padding:140px 32px 96px;
  display:grid;
  grid-template-columns:minmax(260px, 1fr) 1fr 1fr;
  gap:80px;
  align-items:start;
}
.rmg-foot-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 32px;
  align-content:start;
}

.rmg-foot-nav a.rmg-nav-link{
  position:relative;
  display:inline-block;
  width:-moz-fit-content;
  width:fit-content;
  padding:2px 0 4px;
  font-family:var(--font-label, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,250,241,.82);
  transition:color .3s cubic-bezier(.22,1,.36,1);
}
.rmg-foot-nav a.rmg-nav-link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:1px;width:0;
  background:rgba(208,165,74,.55);
  transition:width .28s cubic-bezier(.22,1,.36,1);
}
.rmg-foot-nav a.rmg-nav-link:hover{color:#FFFAF1}
.rmg-foot-nav a.rmg-nav-link:hover::after{width:100%}

.rmg-foot-nav-glass{
  grid-column:1 / -1;
  margin-top:12px;
}

/* Contact cluster */
.rmg-foot-contact{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.rmg-foot-block .rmg-block-label{
  font-family:var(--font-label, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#D0A54A;
  margin:0 0 14px;
}
.rmg-foot-block a,
.rmg-foot-block p{
  display:block;
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.55;
  letter-spacing:.01em;
  color:rgba(255,250,241,.9);
  margin:0;
  transition:color .3s cubic-bezier(.22,1,.36,1);
}
.rmg-foot-block a{padding:2px 0}
.rmg-foot-block a:hover{color:#D0A54A}
.rmg-foot-block .rmg-address{
  font-family:var(--font-display, 'Cormorant Garamond', serif);
  font-style:italic;
  font-size:var(--fs-body);
  color:rgba(255,250,241,.6);
  line-height:1.6;
  margin-top:4px;
}

/* ── Legal row ───────────────────────────────────────────────── */
.rmg-foot-legal{
  border-top:1px solid rgba(255,250,241,.06);
}
.rmg-foot-legal-in{
  max-width:1080px;
  margin:0 auto;
  padding:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}
.rmg-foot-legal-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  font-family:var(--font-label, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,250,241,.45);
}
.rmg-foot-legal-links a{
  color:inherit;
  transition:color .3s cubic-bezier(.22,1,.36,1);
}
.rmg-foot-legal-links a:hover{color:#D0A54A}
.rmg-foot-legal-links .rmg-legal-dot{
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(208,165,74,.4);
}
.rmg-foot-legal-links .rmg-legal-copy{margin-left:12px}

/* ── Liquid-glass interactive chips ──────────────────────────── */
/* Shared material for the three interactive controls. Same design
   language as the homepage glass system: smoked, dark-tinted, subtle
   inner highlight and edge, restrained hover lift. */
.rmg-glass{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none;
  cursor:pointer;
  background:transparent;
  isolation:isolate;
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1);
  color:#FFFAF1;
  text-decoration:none;
  overflow:hidden;
}
.rmg-glass::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:
    radial-gradient(120% 100% at 50% 40%,
      rgba(255,250,241,.02) 0%,
      rgba(255,250,241,.055) 60%,
      rgba(255,250,241,.09) 100%);
  border:1px solid rgba(255,250,241,.12);
  backdrop-filter:blur(28px) saturate(180%) contrast(105%);
  -webkit-backdrop-filter:blur(28px) saturate(180%) contrast(105%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.14),
    inset -1px -1px 0 rgba(0,0,0,.26),
    0 1px 0 rgba(255,255,255,.05),
    0 18px 40px -18px rgba(0,0,0,.5);
  transition:
    box-shadow .4s cubic-bezier(.22,1,.36,1),
    border-color .4s cubic-bezier(.22,1,.36,1),
    background .4s cubic-bezier(.22,1,.36,1);
  z-index:-1;
}
.rmg-glass::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:
    radial-gradient(60% 40% at 50% -10%,
      rgba(255,255,255,.20) 0%,
      transparent 65%),
    radial-gradient(50% 40% at 100% 100%,
      hsla(42,60%,60%,.10) 0%,
      transparent 70%);
  mix-blend-mode:screen;
  opacity:.9;
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,1,.36,1);
  z-index:-1;
}
@media (hover:hover){
  .rmg-glass:hover{transform:scale(1.01)}
  .rmg-glass:hover::before{
    background:
      radial-gradient(120% 100% at 50% 40%,
        rgba(255,250,241,.03) 0%,
        rgba(255,250,241,.075) 60%,
        rgba(255,250,241,.11) 100%);
    border-color:rgba(255,250,241,.22);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.22),
      inset -1px -1px 0 rgba(0,0,0,.28),
      0 1px 0 rgba(255,255,255,.08),
      0 24px 50px -16px rgba(0,0,0,.55);
  }
  .rmg-glass:hover::after{opacity:1}
}

/* Variants */
.rmg-glass-primary{
  padding:16px 40px;
  border-radius:100px;
  font-family:var(--font-label, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.rmg-glass-chip{
  padding:9px 20px;
  border-radius:10px;
  font-family:var(--font-label, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,250,241,.92);
}
.rmg-glass-pill{
  padding:9px 18px;
  border-radius:100px;
  font-family:var(--font-label, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,250,241,.72);
}
.rmg-glass-pill svg{
  width:11px;height:11px;
  color:#D0A54A;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.rmg-glass-pill:hover svg{transform:translateY(-2px)}

/* ── Reveal on scroll: logo + hairline draw ─────────────────── */
.rmg-foot-logo,
.rmg-foot-hairline,
.rmg-foot-cta-wrap{
  opacity:0;
  transform:translateY(8px);
  animation:rmgFootRise .8s cubic-bezier(.22,1,.36,1) forwards;
}
.rmg-foot-hairline{animation-delay:.15s}
.rmg-foot-cta-wrap{animation-delay:.30s}
@keyframes rmgFootRise{
  to{opacity:1; transform:translateY(0)}
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .rmg-foot-logo,
  .rmg-foot-hairline,
  .rmg-foot-cta-wrap{animation:none; opacity:1; transform:none}
  .rmg-glass,
  .rmg-glass::before,
  .rmg-glass::after,
  .rmg-nav-link,
  .rmg-nav-link::after,
  .rmg-foot-block a,
  .rmg-foot-legal-links a,
  .rmg-glass-pill svg{transition:none}
  .rmg-glass:hover{transform:none}
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:820px){
  .rmg-foot-grid{
    grid-template-columns:1fr;
    gap:56px;
    padding:100px 24px 72px;
  }
  .rmg-foot-brand-block{align-items:center; text-align:center}
  .rmg-foot-hairline{width:120px}
  /* Centre the whole footer on mobile. */
  .rmg-foot-nav{justify-items:center; text-align:center}
  .rmg-foot-nav .rmg-foot-wedding{width:auto; margin:0 auto}
  .rmg-foot-contact{align-items:center; text-align:center}
  .rmg-foot-block{align-items:center; text-align:center}
  .rmg-foot-legal-in{
    padding:24px;
    flex-direction:column;
    text-align:center;
  }
  .rmg-foot-legal-links{justify-content:center}
  .rmg-foot-legal-links .rmg-legal-copy{margin-left:0; width:100%; margin-top:6px}
}
@media (max-width:480px){
  .rmg-foot-nav{grid-template-columns:1fr}
}

/* ── "Your Wedding" dropdown ─────────────────────────────────── */
.rmg-foot-wedding{
  position:relative;
  display:inline-block;
  width:-moz-fit-content;
  width:fit-content;
}
.rmg-foot-nav .rmg-nav-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:2px 0 4px;
  font:inherit;
  /* inherit .rmg-nav-link typography via className stacking */
}
.rmg-foot-nav .rmg-nav-chev{
  width:12px;height:12px;
  color:rgba(208,165,74,.75);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.rmg-foot-wedding.is-open .rmg-nav-chev{transform:rotate(180deg)}

.rmg-wedding-panel{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  min-width:320px;
  padding:18px;
  border-radius:14px;
  z-index:40;
  background:
    linear-gradient(180deg,
      rgba(10,32,22,.86) 0%,
      rgba(6,22,15,.9) 100%);
  border:1px solid rgba(255,250,241,.1);
  backdrop-filter:blur(28px) saturate(180%) contrast(105%);
  -webkit-backdrop-filter:blur(28px) saturate(180%) contrast(105%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.08),
    inset -1px -1px 0 rgba(0,0,0,.35),
    0 24px 60px -20px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  gap:4px;
  animation:rmgWeddingIn .28s cubic-bezier(.22,1,.36,1);
}
@keyframes rmgWeddingIn{
  from{opacity:0; transform:translateY(-6px)}
  to  {opacity:1; transform:translateY(0)}
}
.rmg-wedding-option{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:10px;
  text-decoration:none;
  color:#FFFAF1;
  transition:background .25s cubic-bezier(.22,1,.36,1);
}
.rmg-wedding-option:hover,
.rmg-wedding-option:focus-visible{
  background:rgba(255,250,241,.06);
  outline:none;
}
.rmg-wedding-title{
  font-family:var(--font-label, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#F0D9A0;
}
.rmg-wedding-desc{
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  font-size:.85rem;
  font-weight:300;
  line-height:1.5;
  letter-spacing:.01em;
  color:rgba(255,250,241,.7);
}
@media (max-width:480px){
  .rmg-wedding-panel{min-width:min(88vw,320px)}
}

/* ============================================================
   EnquiryForm — one consistent enquiry form for the whole site.
   Self-contained dark glass card so it looks identical on any page.
   ============================================================ */
.enqf{
  max-width:640px; margin:0 auto; text-align:left;
  background:rgba(12,18,13,.55);
  border:1px solid rgba(246,241,230,.14);
  border-radius:16px;
  padding:clamp(24px,4vw,44px); backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.7);
  font-family:'Lato',-apple-system,BlinkMacSystemFont,sans-serif;
}
.enqf-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:600px){.enqf-row{grid-template-columns:1fr}}
.enqf label{display:block !important; font-size:var(--fs-label) !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:rgba(246,241,230,.6) !important; margin:16px 0 8px !important; font-family:inherit}
.enqf-opt{text-transform:none; letter-spacing:0; color:rgba(246,241,230,.34); font-size:var(--fs-label); font-weight:400}
/* !important so the form looks identical on every page, immune to page-scoped
   input styles (geo pages, .v8, .cine, .pho, shadcn, etc.) */
.enqf input, .enqf textarea, .enqf select{
  width:100% !important; box-sizing:border-box; background:rgba(11,15,12,.5) !important;
  border:1px solid rgba(246,241,230,.14) !important; border-radius:8px !important;
  padding:13px 15px !important; color:#F6F1E6 !important; font-family:inherit !important; font-size:var(--fs-body) !important;
  transition:border-color .3s ease; height:auto !important; margin:0 !important; letter-spacing:normal;
}
.enqf input:focus, .enqf textarea:focus, .enqf select:focus{outline:none; border-color:rgba(208,165,74,.55) !important; box-shadow:none !important}
.enqf input::-moz-placeholder, .enqf textarea::-moz-placeholder{color:rgba(246,241,230,.32) !important}
.enqf input::placeholder, .enqf textarea::placeholder{color:rgba(246,241,230,.32) !important}
.enqf textarea{resize:vertical; min-height:96px}
.enqf select{
  -moz-appearance:none;
       appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23C9A24B' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
}
.enqf select option{background:#0b0f0c; color:#F6F1E6}
.enqf select:invalid{color:rgba(246,241,230,.32)}
.enqf-submit{margin-top:24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.enqf-btn{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; cursor:pointer; padding:15px 40px !important; border-radius:100px !important;
  border:1px solid #E9C87E !important; background:transparent !important; color:#F0D9A0 !important; width:auto !important;
  font-family:inherit !important; font-size:var(--fs-meta) !important; letter-spacing:.22em !important; text-transform:uppercase !important; font-weight:700 !important;
  transition:background .3s ease, color .3s ease;
}
.enqf-btn:hover:not(:disabled){background:#E9C87E !important; color:#141414 !important}
.enqf-btn:disabled{opacity:.6; cursor:default}
.enqf-note{font-size:var(--fs-meta)}
.enqf-note.ok{color:#8FBFa3}
.enqf-note.err{color:#E7A17A}
.enqf-tel{font-size:var(--fs-meta); letter-spacing:.1em; color:rgba(246,241,230,.5); text-decoration:none}
.enqf-tel:hover{color:#E9C87E}
/* ============================================================
   CINEMATIC HEADER — transparent by default, liquid glass on scroll.
   The hero film reaches the top edge of the viewport; navigation
   should feel almost invisible until it earns presence. Centred
   logo, balanced nav on either side, glass CTA + login on the right.
   ============================================================ */

.cine-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
  padding:22px 44px;
  /* Glass background is always on so the nav text is legible over any
     backdrop (light imagery, cream sections). Scroll only tightens it. */
  background:linear-gradient(180deg,rgba(18,26,22,.42),rgba(14,20,17,.34));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,250,241,.07);
  transition:
    background .45s cubic-bezier(.22,1,.36,1),
    backdrop-filter .45s cubic-bezier(.22,1,.36,1),
    border-color .45s ease,
    padding .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease;
  will-change:background,backdrop-filter,padding;
}
.cine-header > .cine-nav-left{justify-self:end}
.cine-header > .cine-logo{justify-self:center}
.cine-header > .cine-right-cluster{
  justify-self:start;display:flex;align-items:center;gap:32px;
}


/* Liquid-glass state — Apple-style: subtle blur, thin highlight, very soft shadow. */
.cine-header.is-glass{
  padding:14px 44px;
  background:linear-gradient(180deg,rgba(18,26,22,.42),rgba(14,20,17,.34));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,250,241,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 20px 40px -28px rgba(0,0,0,.5);
}

/* Nav ---------------------------------------------------------------- */
.cine-nav ul{
  display:flex;list-style:none;margin:0;padding:0;align-items:center;
  gap:32px;
}
.cine-nav-left ul{justify-content:flex-end}
.cine-nav-right ul{justify-content:flex-start}

.cine-nav a{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-meta);letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:rgba(255,250,241,.82);
  text-decoration:none;position:relative;padding:8px 2px;white-space:nowrap;
  transition:color .3s ease;
}
.cine-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:rgba(212,175,55,.9);transition:right .35s cubic-bezier(.22,1,.36,1);
}
.cine-nav a:hover,
.cine-nav a.active{color:#F0D9A0}
.cine-nav a:hover::after,
.cine-nav a.active::after{right:0}

/* Centred logo ------------------------------------------------------- */
.cine-logo{display:inline-flex;align-items:center;justify-self:center}
.cine-logo img{
  height:62px;width:auto;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.45));
  transition:height .45s cubic-bezier(.22,1,.36,1);
}
.cine-header.is-glass .cine-logo img{height:48px}

/* Right cluster ------------------------------------------------------ */
.cine-right{
  display:flex;align-items:center;gap:24px;justify-self:end;
}
.cine-actions{display:flex;align-items:center;gap:10px}

/* Glass buttons — no solid gold. Subtle, luminous, restrained. */
.cine-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;border-radius:100px;
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  background:rgba(255,250,241,.08);
  border:1px solid rgba(255,250,241,.22);
  color:#FFFAF1;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 10px 24px -14px rgba(0,0,0,.55);
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s ease;
}
.cine-btn:hover{
  background:rgba(255,250,241,.14);
  border-color:rgba(212,175,55,.55);
  color:#F0D9A0;
  transform:translateY(-1px);
}
.cine-btn-primary{
  background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.14));
  border-color:rgba(233,200,126,.5);
  color:#FBE9BE;
}
.cine-btn-primary:hover{
  background:linear-gradient(180deg,rgba(233,200,126,.32),rgba(208,165,74,.22));
  border-color:rgba(233,200,126,.75);
  color:#FFF5D6;
}
.cine-btn-secondary{
  background:rgba(255,250,241,.05);
  color:rgba(255,250,241,.8);
}

/* Burger ------------------------------------------------------------- */
.cine-burger{
  display:none;background:none;border:0;padding:6px;cursor:pointer;color:#FFFAF1;
}
.cine-burger svg{width:26px;height:26px}

/* Mobile drawer ------------------------------------------------------ */
.cine-mobile{
  position:fixed;inset:0;z-index:99;
  background:linear-gradient(180deg,rgba(12,18,15,.94),rgba(8,12,10,.98));
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:100px 24px 40px;
  animation:cineFade .35s ease both;
}
.cine-mobile a{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-body);letter-spacing:.18em;text-transform:uppercase;
  color:#FFFAF1;text-decoration:none;
}
.cine-mobile .cine-btn{margin-top:10px}

@keyframes cineFade{from{opacity:0}to{opacity:1}}

/* Responsive --------------------------------------------------------- */
@media(max-width:1180px){
  .cine-header{gap:20px;padding:20px 28px}
  .cine-nav ul{gap:22px}
  .cine-nav a{font-size:var(--fs-label);letter-spacing:.18em}
  .cine-btn{padding:9px 16px;font-size:var(--fs-label);letter-spacing:.16em}
}
@media(max-width:1024px){
  .cine-header,
  .cine-header.is-glass{
    grid-template-columns:1fr auto 1fr;padding:14px 20px;
  }
  .cine-nav-left,
  .cine-nav-right,
  .cine-actions{display:none}
  .cine-header > .cine-right-cluster{justify-self:end;gap:0}
  .cine-logo{grid-column:2;justify-self:center}
  .cine-right{gap:0}
  .cine-burger{display:inline-flex}
  .cine-logo img,
  .cine-header.is-glass .cine-logo img{height:42px}
}


/* ============================================================
   "Your Wedding" dropdown — outlined → liquid glass on hover,
   Apple-inspired floating panel with layered highlights.
   ============================================================ */
.cine-wedding{position:relative;display:inline-block}

.cine-btn-wedding{
  gap:8px;
  background:transparent;
  border:1px solid rgba(255,250,241,.32);
  color:rgba(255,250,241,.9);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.cine-btn-wedding .cine-btn-chev{
  width:14px;height:14px;opacity:.75;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.cine-btn-wedding:hover,
.cine-wedding.is-open .cine-btn-wedding{
  background:rgba(255,250,241,.12);
  border-color:rgba(233,200,126,.55);
  color:#F0D9A0;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 10px 28px -14px rgba(0,0,0,.6);
  transform:translateY(-1px);
}
.cine-wedding.is-open .cine-btn-wedding .cine-btn-chev{transform:rotate(180deg)}

.cine-wedding-panel{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 24px 80px;
  background:linear-gradient(180deg,rgba(14,22,18,.86),rgba(8,14,11,.9));
  border:0;
  border-radius:0;
  backdrop-filter:blur(34px) saturate(170%);
  -webkit-backdrop-filter:blur(34px) saturate(170%);
  box-shadow:none;
  overflow:auto;
  transform-origin:center center;
  animation:cineWeddingIn .42s cubic-bezier(.22,1,.36,1) both;
}
.cine-wedding-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.1), transparent 60%),
    radial-gradient(80% 50% at 100% 0%, rgba(233,200,126,.1), transparent 55%);
  mix-blend-mode:screen;
}
.cine-wedding-shine{display:none}
.cine-wedding-inner{
  position:relative;z-index:2;
  width:min(720px,100%);
  text-align:center;
}
.cine-wedding-eyebrow{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(233,200,126,.9);margin-bottom:14px;
}
.cine-wedding-lede{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.5;font-style:italic;
  color:rgba(255,250,241,.85);
  margin:0 auto 46px;max-width:48ch;
}
.cine-wedding-options{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  width:100%;
}
.cine-wedding-option{
  display:flex;align-items:flex-start;text-align:left;
  padding:28px 30px;border-radius:18px;
  text-decoration:none;color:#FFFAF1;
  background:rgba(255,250,241,.06);
  border:1px solid rgba(255,250,241,.12);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.cine-wedding-option:hover{
  background:rgba(255,250,241,.12);
  border-color:rgba(233,200,126,.45);
  transform:translateY(-2px);
}
.cine-wedding-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.cine-wedding-title{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-meta);letter-spacing:.18em;text-transform:uppercase;
  color:#FFFAF1;
}
.cine-wedding-desc{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:var(--fs-body);line-height:1.45;color:rgba(255,250,241,.72);
}

@keyframes cineWeddingIn{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
}

@media(max-width:680px){
  .cine-wedding-panel{padding:110px 22px 60px}
  .cine-wedding-options{grid-template-columns:1fr}
  .cine-wedding-option{padding:24px 22px}
}

@media(max-width:1024px){
  .cine-wedding{display:none}
}

/* Close (X) for the full-screen Your Wedding panel */
.cine-wedding-close{
  position:absolute;top:clamp(20px,4vh,40px);right:clamp(20px,4vw,44px);
  z-index:4;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,250,241,.82);
  background:rgba(255,250,241,.06);
  border:1px solid rgba(255,250,241,.22);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.cine-wedding-close:hover{
  background:rgba(255,250,241,.14);
  border-color:rgba(233,200,126,.6);
  color:#F0D9A0;
  transform:rotate(90deg);
}
/* ============================================================
   Wedding Hub Showcase — drifting, drag-to-scrub glass carousel
   A single-viewport LIGHT band (matches the cream site); frosted
   glass module cards fan toward the centre (coverflow), drift, loop
   and can be dragged like the photography details reel.
   Scoped to .v8 (public marketing site).
   ============================================================ */

.v8 .hubx{
  position:relative;
  overflow:hidden;
  padding:clamp(48px,4.6vw,74px) 0 clamp(44px,4.4vw,68px);
  /* seamless: inherit the page/section background above (no band) */
  background:transparent;
  isolation:isolate;
}
/* whisper-soft green + gold washes so the frosted glass has colour to catch,
   while the section still reads light. No hard edges. */
.v8 .hubx-atmos{
  position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 46% at 14% 26%, rgba(0,96,58,.06) 0%, transparent 70%),
    radial-gradient(40% 48% at 88% 74%, rgba(208,165,74,.07) 0%, transparent 72%);
}

.v8 .hubx > *:not(.hubx-atmos){position:relative; z-index:1}

/* ---- header ---- */
.v8 .hubx-head{max-width:700px; margin:0 auto clamp(22px,2.4vw,34px); padding:0 24px; text-align:center}
.v8 .hubx-head .eyebrow{color:var(--gold-deep); margin-bottom:13px}
.v8 .hubx-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,3.5vw,2.95rem); line-height:1.05; color:var(--green);
  margin-bottom:12px;
}
.v8 .hubx-head h2 .script{color:var(--gold-deep); font-size:1.12em; display:inline}
.v8 .hubx-sub{
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.7;
  color:var(--grey); max-width:56ch; margin:0 auto;
}

/* ---- reel viewport ---- */
.v8 .hubx-reel{
  position:relative;
  perspective:1450px;
  padding:22px 0 26px;
  cursor:grab;
  touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.v8 .hubx-reel.dragging{cursor:grabbing}
.v8 .hubx-track{
  display:flex; gap:22px; width:-moz-max-content; width:max-content;
  transform-style:preserve-3d;
  will-change:transform;
}

/* ---- glass card (light) ---- */
.v8 .hubx-card{
  flex:0 0 auto;
  width:clamp(272px,22vw,312px);
  height:clamp(336px,29vw,368px);
  padding:20px 21px 18px;
  border-radius:22px;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  /* frosted glass tuned for the light band */
  background:linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:
    0 32px 60px -30px rgba(0,96,58,.30),
    0 10px 26px rgba(20,20,20,.06),
    inset 1px 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(0,96,58,.05);
}
.v8 .hubx-card img{pointer-events:none}
.v8 .hubx-card-label{
  font-family:var(--font-label); text-transform:uppercase;
  letter-spacing:.16em; font-size:.62rem; color:var(--gold-deep);
  margin-bottom:14px;
}
.v8 .hc-body{display:flex; flex-direction:column; flex:1; min-height:0}
.v8 .hc-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.v8 .hc-title{font-family:var(--font-display); font-size:var(--fs-lead); color:var(--green); line-height:1.1}

/* pill — the glass design standard (used for every state) */
.v8 .hc-pill{
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.04em;
  padding:5px 11px; border-radius:100px; white-space:nowrap;
  color:var(--gold-deep);
  background:linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,250,241,.4));
  border:1px solid rgba(208,165,74,.45);
  backdrop-filter:blur(8px) saturate(1.4);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px -4px rgba(168,132,47,.4);
}
.v8 .hc-pill.ok{color:var(--green); border-color:rgba(0,96,58,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px -4px rgba(0,96,58,.3)}
.v8 .hc-pill.live{position:relative; padding-left:20px}
.v8 .hc-pill.live::before{
  content:""; position:absolute; left:9px; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--gold-deep); box-shadow:0 0 0 0 rgba(168,132,47,.6);
  animation:hcPulse 2.2s ease-out infinite;
}
@keyframes hcPulse{0%{box-shadow:0 0 0 0 rgba(168,132,47,.5)}70%{box-shadow:0 0 0 7px rgba(168,132,47,0)}100%{box-shadow:0 0 0 0 rgba(168,132,47,0)}}

.v8 .hc-foot{
  margin-top:auto; padding-top:14px;
  font-family:var(--font-body); font-size:.82rem; line-height:1.45;
  color:var(--grey);
}

/* shot list */
.v8 .hc-checks{list-style:none; display:grid; gap:11px}
.v8 .hc-checks li{
  display:flex; align-items:flex-start; gap:10px;
  font-family:var(--font-body); font-size:.9rem; color:var(--dark); line-height:1.3;
}
.v8 .hc-tick{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--green); position:relative;
}
.v8 .hc-tick::after{
  content:""; position:absolute; left:5px; top:4px; width:5px; height:8px;
  border:2px solid var(--cream); border-top:0; border-left:0; transform:rotate(42deg);
}

/* chat */
.v8 .hc-chat{display:flex; flex-direction:column; gap:9px}
.v8 .hc-msg{
  max-width:86%; padding:9px 12px; border-radius:14px;
  font-family:var(--font-body); font-size:.82rem; line-height:1.38;
}
.v8 .hc-msg.them{align-self:flex-start; background:rgba(0,96,58,.07); color:var(--dark); border-bottom-left-radius:5px}
.v8 .hc-msg.you{align-self:flex-end; background:rgba(208,165,74,.18); color:var(--green-deep); border-bottom-right-radius:5px}
.v8 .hc-who{display:block; font-family:var(--font-label); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:2px}

/* timeline */
.v8 .hc-time{list-style:none; display:grid; gap:13px}
.v8 .hc-time li{
  display:grid; grid-template-columns:52px 16px 1fr; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:var(--fs-body); color:var(--dark);
}
.v8 .hc-time b{font-family:var(--font-display); color:var(--gold-deep); font-weight:400; font-size:var(--fs-body)}
.v8 .hc-tdot{width:9px; height:9px; border-radius:50%; background:transparent; border:2px solid var(--green); justify-self:center}

/* mood board */
.v8 .hc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.v8 .hc-thumb{aspect-ratio:1; border-radius:9px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(20,20,20,.06), 0 2px 6px rgba(20,20,20,.08)}

/* booking */
.v8 .hc-rows{display:grid; gap:11px}
.v8 .hc-line{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-body); font-size:.9rem; color:var(--grey)}
.v8 .hc-line b{font-family:var(--font-display); font-weight:400; color:var(--green)}
.v8 .hc-line b.hc-ok{color:var(--gold-deep)}
.v8 .hc-progress{margin-top:14px; height:5px; border-radius:100px; background:rgba(0,96,58,.12); overflow:hidden}
.v8 .hc-progress span{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}

/* gallery */
.v8 .hc-gal{display:grid; grid-template-columns:1.6fr 1fr; gap:8px}
.v8 .hc-play{position:relative; border-radius:11px; aspect-ratio:1; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(20,20,20,.06)}
.v8 .hc-play i{
  position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%;
  background:rgba(20,20,20,.4); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.7);
}
.v8 .hc-play i::after{
  content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%);
  border-left:11px solid var(--cream); border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.v8 .hc-galside{display:grid; grid-template-rows:1fr 1fr; gap:8px}
.v8 .hc-galside .hc-thumb{aspect-ratio:auto; height:100%}

/* ---- footer ---- */
.v8 .hubx-foot{text-align:center; margin-top:clamp(18px,2vw,28px); padding:0 24px}
.v8 .hubx-hint{
  display:block; width:-moz-fit-content; width:fit-content; margin:0 auto 16px;
  font-family:var(--font-label); text-transform:uppercase;
  letter-spacing:.24em; font-size:.6rem; color:var(--grey);
  position:relative; padding-left:22px;
}
.v8 .hubx-hint::before{
  content:""; position:absolute; left:0; top:50%; width:16px; height:1px; margin-top:-.5px;
  background:rgba(84,89,95,.5);
  animation:hcHint 2.6s ease-in-out infinite;
}
@keyframes hcHint{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.v8 .hubx-foot .btn-outline{display:inline-flex}
/* Wedding Hub sits on the light cream band, so its CTA uses the
   deeper gold that reads against light backgrounds. */
.v8 .hubx-foot .btn-outline-primary{
  color:var(--gold-deep);
}
.v8 .hubx-foot .btn-outline-primary::after{
  background:var(--gold-deep);
}
.v8 .hubx-foot .btn-outline-primary::before{
  border-color:var(--gold-deep);
}
.v8 .hubx-foot .btn-outline-primary .btn-glass{
  background:linear-gradient(180deg,rgba(168,132,47,.22),rgba(168,132,47,.10));
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(168,132,47,.18) inset,
    0 18px 40px -18px rgba(0,0,0,.55);
}
.v8 .hubx-foot .btn-outline-primary:hover,
.v8 .hubx-foot .btn-outline-primary:focus-visible{
  color:var(--green-deep);
}

/* ---- reveal ---- */
.v8 .hubx .reveal{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
.v8 .hubx .reveal.in{opacity:1; transform:none}

/* ---- responsive ---- */
@media(max-width:640px){
  .v8 .hubx-track{padding:0 24px; gap:16px}
  .v8 .hubx-card{width:clamp(250px,80vw,290px); height:clamp(340px,86vw,380px)}
  .v8 .hubx-reel{-webkit-mask-image:none; mask-image:none}
}

/* ---- reduced motion: plain scroller, no drift/tilt ---- */
@media(prefers-reduced-motion:reduce){
  .v8 .hubx-reel{overflow-x:auto; perspective:none; -webkit-mask-image:none; mask-image:none}
  .v8 .hubx-track{transform:none !important; padding:0 24px}
  .v8 .hubx-card{transform:none !important; opacity:1 !important}
  .v8 .hubx-hint::before{animation:none}
}

/* ============================================================
   DARK VARIANT — same carousel, cinematic dark band.
   Used on the Films page (<WeddingHubShowcase dark />).
   ============================================================ */
.v8 .hubx--dark{
  background:radial-gradient(130% 110% at 50% -6%, #123024 0%, #0c211a 54%, #09150f 100%);
}
.v8 .hubx--dark .hubx-atmos{
  background:
    radial-gradient(42% 50% at 14% 18%, rgba(0,96,58,.5) 0%, transparent 66%),
    radial-gradient(40% 52% at 88% 82%, rgba(208,165,74,.18) 0%, transparent 64%);
}
/* header */
.v8 .hubx--dark .hubx-head .eyebrow{color:var(--gold-light)}
.v8 .hubx--dark .hubx-head h2{color:var(--cream)}
.v8 .hubx--dark .hubx-head h2 .script{color:var(--gold-light)}
.v8 .hubx--dark .hubx-sub{color:rgba(255,250,241,.7)}
/* glass card on dark */
.v8 .hubx--dark .hubx-card{
  background:linear-gradient(158deg, rgba(255,250,241,.14), rgba(255,250,241,.05));
  border:1px solid rgba(255,250,241,.22);
  box-shadow:
    0 34px 70px -26px rgba(0,0,0,.6),
    inset 1px 1px 0 rgba(255,255,255,.28),
    inset -1px -1px 0 rgba(255,255,255,.05);
}
.v8 .hubx--dark .hubx-card-label{color:var(--gold-light)}
.v8 .hubx--dark .hc-title{color:var(--cream)}
/* pill */
.v8 .hubx--dark .hc-pill{
  color:var(--gold-light);
  background:linear-gradient(160deg, rgba(255,250,241,.16), rgba(255,250,241,.06));
  border:1px solid rgba(233,200,126,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px -4px rgba(0,0,0,.4);
}
.v8 .hubx--dark .hc-pill.ok{color:var(--gold-light); border-color:rgba(233,200,126,.4)}
.v8 .hubx--dark .hc-pill.live::before{background:var(--gold-light); box-shadow:0 0 0 0 rgba(233,200,126,.6)}
.v8 .hubx--dark .hc-foot{color:rgba(255,250,241,.62)}
/* shot list */
.v8 .hubx--dark .hc-checks li{color:rgba(255,250,241,.9)}
.v8 .hubx--dark .hc-tick{background:var(--gold-light)}
.v8 .hubx--dark .hc-tick::after{border-color:#0c211a}
/* chat */
.v8 .hubx--dark .hc-msg.them{background:rgba(255,250,241,.12); color:rgba(255,250,241,.92)}
.v8 .hubx--dark .hc-msg.you{background:rgba(233,200,126,.2); color:var(--cream)}
.v8 .hubx--dark .hc-who{color:var(--gold-light)}
/* timeline */
.v8 .hubx--dark .hc-time li{color:rgba(255,250,241,.9)}
.v8 .hubx--dark .hc-time b{color:var(--gold-light)}
.v8 .hubx--dark .hc-tdot{border-color:var(--gold-light)}
/* mood board / gallery thumbs */
.v8 .hubx--dark .hc-thumb{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.v8 .hubx--dark .hc-play{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* booking */
.v8 .hubx--dark .hc-line{color:rgba(255,250,241,.82)}
.v8 .hubx--dark .hc-line b{color:var(--cream)}
.v8 .hubx--dark .hc-line b.hc-ok{color:var(--gold-light)}
.v8 .hubx--dark .hc-progress{background:rgba(255,250,241,.14)}
/* footer */
.v8 .hubx--dark .hubx-hint{color:rgba(255,250,241,.5)}
.v8 .hubx--dark .hubx-hint::before{background:rgba(255,250,241,.4)}
/* Inside your Wedding Hub — single-card carousel that slides through the features.
   Lives under the left copy. Fixed height so it never shifts the copy above it. */
.hs-wrap{
  --gold:#D0A54A;--goldl:#E9C87E;--goldd:#A8842F;--cream:#F6F1E6;
  --ivory:rgba(246,241,230,.9);--muted:rgba(246,241,230,.56);--faint:rgba(246,241,230,.32);
  --hair:rgba(246,241,230,.12);--serif:'ZCOOL XiaoWei',Georgia,serif;--sans:'Lato',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.32,1);
  display:block;max-width:clamp(360px,32vw,452px);text-align:left;font-family:var(--sans);
}

/* the single visible card (static glass frame); the track slides inside it */
.hs-solo{position:relative;overflow:hidden;height:clamp(214px,30vh,276px);border-radius:18px;
  border:1px solid rgba(246,241,230,.14);
  background:linear-gradient(180deg,rgba(20,15,9,.5),rgba(11,15,12,.6));
  backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12);
  box-shadow:0 34px 66px -40px rgba(0,0,0,.72),inset 0 1px 0 rgba(246,241,230,.07)}
.hs-solo::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(246,241,230,.05),transparent)}

.hs-track{display:flex;height:100%;transition:transform .8s var(--ease)}
.hs-slide{flex:0 0 100%;min-width:0;height:100%;padding:18px 20px;display:flex;flex-direction:column}

.hs-head{display:flex;flex-direction:row;align-items:center;gap:11px;margin-bottom:14px;flex:none}
.hs-ic{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--goldl);background:rgba(208,165,74,.13);border:1px solid rgba(208,165,74,.36)}
.hs-ic svg{width:15px;height:15px}
.hs-title{font-family:var(--serif);font-weight:400;font-size:var(--fs-body);color:var(--goldl);letter-spacing:.01em}
.hs-preview{flex:1 1 auto;min-height:0;overflow:hidden}

/* dots — position + manual jump */
.hs-dots{display:flex;gap:8px;align-items:center;margin-top:14px}
.hs-dot{width:8px;height:8px;padding:0;border:none;border-radius:100px;cursor:pointer;
  background:rgba(246,241,230,.22);transition:width .5s var(--ease),background .5s var(--ease)}
.hs-dot:hover{background:rgba(246,241,230,.4)}
.hs-dot.on{width:26px;background:linear-gradient(90deg,var(--goldd),var(--goldl))}
.hs-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ================= preview material — vertical, roomy ================= */
.pv{height:100%;display:flex;flex-direction:column;justify-content:center;font-size:var(--fs-meta);color:var(--ivory);overflow:hidden}

/* timeline — vertical list */
.pv-timeline{justify-content:flex-start}
.pv-timeline .pv-date{font-family:var(--serif);font-size:var(--fs-meta);color:var(--goldl);margin-bottom:14px}
.pv-timeline .tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.pv-timeline .tl li{display:flex;flex-direction:row;align-items:center;gap:12px}
.pv-timeline .dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--goldd);flex:none}
.pv-timeline li.done .dot{background:var(--gold);border-color:var(--gold)}
.pv-timeline .t{font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--fs-meta);width:44px;flex:none}
.pv-timeline .l{color:var(--cream);font-size:var(--fs-meta)}
.pv-timeline li:not(.done) .l{color:var(--muted)}

/* messages — bubbles stacked */
.pv-msg{gap:10px;justify-content:center}
.pv-msg .bub{max-width:84%;padding:10px 13px;border-radius:15px}
.pv-msg .bub p{margin:0;line-height:1.35;font-size:var(--fs-meta)}
.pv-msg .bub .ts{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--faint);margin-top:5px}
.pv-msg .bub.rmg{align-self:flex-start;background:rgba(246,241,230,.07);border:1px solid var(--hair);border-bottom-left-radius:4px}
.pv-msg .bub.you{align-self:flex-end;background:rgba(208,165,74,.16);border:1px solid rgba(208,165,74,.3);border-bottom-right-radius:4px}
.pv-msg .unread{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}

/* gallery — featured on top, thumbs row beneath (images pinned so they can't push height) */
.pv-gal{gap:9px;justify-content:flex-start}
.pv-gal .feat{position:relative;flex:none;height:114px;border-radius:12px;overflow:hidden}
.pv-gal .feat img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.pv-gal .feat .cnt{position:absolute;left:9px;bottom:9px;z-index:1;font-size:var(--fs-label);color:var(--cream);
  background:rgba(11,15,12,.55);border:1px solid var(--hair);padding:3px 9px;border-radius:100px;backdrop-filter:blur(6px)}
.pv-gal .thumbs{flex:none;height:52px;display:flex;flex-direction:row;gap:9px}
.pv-gal .thumbs img{flex:1;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:9px;display:block;min-width:0}

/* film — thumbnail on top, meta beneath */
.pv-film{gap:11px}
.pv-film .frame{position:relative;flex:1 1 auto;border-radius:12px;overflow:hidden;min-height:0}
.pv-film .frame img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;filter:brightness(.78)}
.pv-film .play{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(11,15,12,.4);border:1px solid rgba(246,241,230,.55);backdrop-filter:blur(6px)}
.pv-film .play svg{width:16px;height:16px;color:var(--cream);margin-left:2px;fill:currentColor}
.pv-film .meta{flex:none;display:flex;flex-direction:column;gap:3px}
.pv-film .meta b{font-family:var(--serif);font-weight:400;font-size:var(--fs-body);color:var(--cream)}
.pv-film .meta span{font-size:var(--fs-label);color:var(--muted)}

/* notes — checklist rows stacked */
.pv-notes{justify-content:center}
.pv-notes .chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pv-notes .chk li{display:flex;flex-direction:row;align-items:center;gap:11px;color:var(--muted);font-size:var(--fs-meta)}
.pv-notes .chk li.done{color:var(--cream)}
.pv-notes .bx{width:17px;height:17px;flex:none;border-radius:5px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;background:rgba(246,241,230,.04)}
.pv-notes .chk li.done .bx{background:var(--gold);border-color:var(--gold)}
.pv-notes .bx svg{width:11px;height:11px;color:#20160a}

/* suppliers — cards stacked */
.pv-sup{gap:10px;justify-content:center}
.pv-sup .sup{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--hair);border-radius:12px;background:rgba(246,241,230,.04)}
.pv-sup .si{width:34px;height:34px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--goldl);background:rgba(208,165,74,.12);border:1px solid rgba(208,165,74,.3)}
.pv-sup .si svg{width:16px;height:16px}
.pv-sup .sm{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-sup .sm b{font-weight:400;font-family:var(--serif);font-size:var(--fs-body);color:var(--cream)}
.pv-sup .sm span{font-size:var(--fs-label);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* downloads — file rows stacked */
.pv-dl{gap:8px;justify-content:center}
.pv-dl .dl{display:flex;flex-direction:row;align-items:center;gap:11px;padding:9px 12px;
  border:1px solid var(--hair);border-radius:11px;background:rgba(246,241,230,.04);min-width:0}
.pv-dl .di{width:30px;height:30px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--goldl);background:rgba(208,165,74,.1);border:1px solid rgba(208,165,74,.28)}
.pv-dl .di svg{width:14px;height:14px}
.pv-dl .dm{display:flex;flex-direction:column;gap:1px;min-width:0}
.pv-dl .dm b{font-weight:400;font-size:var(--fs-meta);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-dl .dm span{font-size:var(--fs-label);color:var(--muted)}
.pv-dl .st{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:100px;white-space:nowrap}
.pv-dl .st svg{width:11px;height:11px}
.pv-dl .st.ok{color:#9fd6a6;background:rgba(120,190,130,.12);border:1px solid rgba(120,190,130,.3)}
.pv-dl .st.wait{color:var(--goldl);background:rgba(208,165,74,.12);border:1px solid rgba(208,165,74,.32)}

@media(prefers-reduced-motion:reduce){
  .hs-track{transition:none}
  .hs-dot{transition:none}
}
/* RMG client-portal auth — cinematic dark/gold, matches the public site */
.rmg-auth{
  --ink:#0B0F0C;--ink2:#0E1310;--cream:#F6F1E6;--gold:#D0A54A;--goldl:#E9C87E;--goldd:#A8842F;
  --muted:rgba(246,241,230,.58);--faint:rgba(246,241,230,.34);--hair:rgba(246,241,230,.14);
  --serif:'ZCOOL XiaoWei',Georgia,serif;--script:'Oooh Baby',cursive;--sans:'Lato',-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;position:relative;overflow:hidden;
  background:var(--ink);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;
}

/* full-bleed real photo behind everything (so the card reads as glass) */
.rmg-auth .bg{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:34% center;object-position:34% center;filter:brightness(.74) saturate(1.02);z-index:0}
.rmg-auth .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(11,15,12,.5) 0%,rgba(11,15,12,.24) 40%,rgba(11,15,12,.6) 100%),
  linear-gradient(0deg,rgba(11,15,12,.68) 0%,transparent 48%)}

/* LEFT — brand over the photo */
.rmg-auth .side{position:relative;z-index:2;display:flex}
.rmg-auth .side-inner{position:relative;z-index:2;width:100%;padding:clamp(36px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between}
.rmg-auth .side-inner .brand-mark{filter:drop-shadow(0 2px 14px rgba(0,0,0,.4))}
.rmg-auth .side-cap{max-width:460px}
.rmg-auth .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--goldl);font-weight:700}
.rmg-auth .eyebrow::before{content:"";width:34px;height:1px;background:var(--goldd)}
.rmg-auth .side-cap h1{font-family:var(--serif);font-weight:400;line-height:1.02;margin:18px 0 0;font-size:clamp(38px,4.8vw,62px);color:var(--cream)}
.rmg-auth .side-cap h1 .script{font-family:var(--script);color:var(--goldl);font-size:1.04em;display:inline-block;line-height:.9}
.rmg-auth .side-cap p{margin:16px 0 0;color:rgba(246,241,230,.78);font-size:16.5px;line-height:1.5;max-width:390px}

/* RIGHT — form panel (transparent so the glass card floats over the photo) */
.rmg-auth .panel{display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,56px);position:relative;z-index:2;background:transparent}
.rmg-auth .panel-inner{width:100%;max-width:430px}
.rmg-auth .mobile-brand{display:none;justify-content:center;margin-bottom:30px}

.rmg-auth .card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(20,15,9,.5),rgba(11,15,12,.62));
  border:1px solid rgba(246,241,230,.18);border-radius:20px;padding:clamp(22px,2.3vw,32px);
  box-shadow:0 60px 110px -40px rgba(0,0,0,.78),0 20px 50px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(246,241,230,.08);
  backdrop-filter:blur(26px) saturate(1.18);-webkit-backdrop-filter:blur(26px) saturate(1.18);
  animation:card-float 9s ease-in-out infinite}
@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rmg-auth .card-in{position:relative;z-index:2}
/* keep real content above the glass decoration layers on every auth page */
.rmg-auth .card > *:not(.glass-sheen):not(.glass-spot){position:relative;z-index:2}
/* VisionOS-style glass — slow always-on drift + pointer-reactive specular */
.rmg-auth .glass-sheen{position:absolute;inset:-40%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(38% 32% at 32% 18%,rgba(246,241,230,.5),transparent 70%);
  animation:sheen-drift 16s ease-in-out infinite}
@keyframes sheen-drift{0%{transform:translate(0,0)}33%{transform:translate(14%,10%)}66%{transform:translate(-8%,16%)}100%{transform:translate(0,0)}}
.rmg-auth .glass-spot{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(246,241,230,.22),transparent 42%)}
.rmg-auth .card.lit .glass-spot{opacity:1}
/* top reflective edge */
.rmg-auth .card::before{content:"";position:absolute;left:0;right:0;top:0;height:44%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,241,230,.10),transparent);border-radius:20px 20px 0 0}
.rmg-auth .card .rule{height:1px;background:linear-gradient(90deg,transparent,rgba(208,165,74,.55),transparent);margin-bottom:16px}
.rmg-auth .card h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:0;color:var(--cream);letter-spacing:.01em}
.rmg-auth .card .sub{color:var(--muted);margin:6px 0 22px;font-size:var(--fs-body)}

.rmg-auth .field{margin-bottom:22px}
.rmg-auth .field label{display:block;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--goldl);font-weight:700;margin-bottom:10px}
.rmg-auth .field input[type=email],
.rmg-auth .field input[type=password],
.rmg-auth .field input[type=text],
.rmg-auth .field input[type=tel],
.rmg-auth .field input[type=date]{
  width:100%;background:rgba(11,15,12,.42);border:1px solid rgba(246,241,230,.18);border-radius:10px;
  padding:14px 16px;color:var(--cream);font-family:var(--sans);font-size:var(--fs-body);transition:border-color .25s var(--ease),box-shadow .25s var(--ease);outline:none}
.rmg-auth .field input::-moz-placeholder{color:var(--faint)}
.rmg-auth .field input::placeholder{color:var(--faint)}
.rmg-auth .field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(208,165,74,.16)}
.rmg-auth .field input.err{border-color:#c9553d}
.rmg-auth .err-msg{display:flex;align-items:center;gap:6px;color:#e08a76;font-size:var(--fs-meta);margin-top:8px}
.rmg-auth .err-msg svg{width:15px;height:15px}

.rmg-auth .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.rmg-auth .check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:var(--fs-meta);color:var(--muted)}
.rmg-auth .check input{position:absolute;opacity:0;width:0;height:0}
.rmg-auth .check .box{width:18px;height:18px;border:1px solid var(--hair);border-radius:5px;background:rgba(246,241,230,.04);display:inline-flex;align-items:center;justify-content:center;transition:all .2s var(--ease)}
.rmg-auth .check input:checked + .box{background:var(--gold);border-color:var(--gold)}
.rmg-auth .check .box svg{width:12px;height:12px;color:#20160a;opacity:0;transition:opacity .2s}
.rmg-auth .check input:checked + .box svg{opacity:1}
.rmg-auth .link{color:var(--goldl);font-size:var(--fs-meta);font-weight:600;text-decoration:none;transition:color .2s}
.rmg-auth .link:hover{color:var(--gold)}

/* round glass pill — mirrors the public site's .btn-glass */
.rmg-auth .btn{width:100%;cursor:pointer;border-radius:100px;padding:14px 30px;
  background:rgba(255,250,241,.12);border:1px solid rgba(255,250,241,.5);color:var(--cream);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--sans);font-weight:700;font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease),box-shadow .3s var(--ease)}
.rmg-auth .btn:hover{background:rgba(255,250,241,.2);border-color:var(--goldl);transform:translateY(-1px);box-shadow:0 16px 34px -14px rgba(208,165,74,.45)}
.rmg-auth .btn:active{transform:scale(.985)}
.rmg-auth .btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}

.rmg-auth .alt{text-align:center;margin-top:18px;color:var(--muted);font-size:var(--fs-meta)}
.rmg-auth .trouble{text-align:center;margin-top:14px;color:var(--faint);font-size:var(--fs-meta)}
.rmg-auth .trouble a{color:var(--goldl);text-decoration:none}
.rmg-auth .trouble a:hover{text-decoration:underline}

/* Apple-calm floating-label field (login) */
.rmg-auth .ffield{position:relative;margin-bottom:20px}
.rmg-auth .ffield input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(246,241,230,.24);border-radius:0;
  padding:22px 0 11px;color:var(--cream);font-family:var(--sans);font-size:var(--fs-lead);outline:none;transition:border-color .35s var(--ease)}
.rmg-auth .ffield input:focus{border-bottom-color:var(--gold)}
.rmg-auth .ffield input.err{border-bottom-color:#c9553d}
.rmg-auth .ffield label{position:absolute;left:0;top:21px;color:var(--muted);font-size:var(--fs-lead);font-weight:400;pointer-events:none;
  transition:top .28s var(--ease),font-size .28s var(--ease),color .28s var(--ease),letter-spacing .28s var(--ease)}
.rmg-auth .ffield input:not(:-moz-placeholder) + label{top:0;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--goldl);font-weight:700}
.rmg-auth .ffield input:focus + label,
.rmg-auth .ffield input:not(:placeholder-shown) + label{top:0;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--goldl);font-weight:700}
.rmg-auth .ffield .reveal{position:absolute;right:0;top:20px;background:none;border:none;cursor:pointer;color:var(--faint);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase}
.rmg-auth .ffield .reveal:hover{color:var(--goldl)}

/* button with arrow */
.rmg-auth .btn .arw{display:inline-block;margin-left:8px;transition:transform .25s var(--ease)}
.rmg-auth .btn:hover .arw{transform:translateX(4px)}

/* greeting countdown (returning couples) */
.rmg-auth .greet-sub b{color:var(--goldl);font-weight:400;font-family:var(--serif)}

/* ===== login: centred header (logo + heading) over a two-column body ===== */
.rmg-auth.login-hero{height:100svh;overflow:hidden;display:flex;flex-direction:column}
/* Centred header */
.rmg-auth .login-head{position:relative;z-index:2;text-align:center;flex:0 0 auto;
  padding:clamp(30px,5vh,60px) 20px clamp(6px,1.6vh,16px)}
.rmg-auth .login-head .brand-mark{display:flex;justify-content:center;
  filter:brightness(0) invert(1) drop-shadow(0 2px 16px rgba(0,0,0,.5))}
.rmg-auth .login-head .eyebrow{justify-content:center;margin-top:clamp(14px,2.6vh,24px)}
.rmg-auth .login-head h1{font-family:var(--serif);font-weight:400;line-height:1.02;
  margin:14px auto 0;max-width:18ch;font-size:clamp(34px,4.4vw,58px);color:var(--cream)}
.rmg-auth .login-head h1 .script{font-family:var(--script);color:var(--goldl);font-size:1.04em;display:inline-block;line-height:.9}
/* Two-column body — equal-height columns, pulled into a centred container */
.rmg-auth .login-body{flex:1 1 auto;min-height:0;position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);
  width:100%;max-width:1040px;margin-inline:auto;padding-inline:clamp(20px,3vw,32px);
  padding-block-start:clamp(10px,2.4vh,32px);align-items:stretch}
/* top-align both cards so their tops sit on the same line */
.rmg-auth .login-body .side{align-items:flex-start;justify-content:center}
.rmg-auth .login-body .panel{align-items:flex-start;justify-content:center;padding:0}
.rmg-auth .login-body .panel-inner{max-width:420px}
/* Left glass card, matches the login card, centred content, same width */
.rmg-auth .side-card{position:relative;overflow:hidden;width:100%;max-width:420px;
  display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:clamp(18px,3.2vh,28px);
  background:linear-gradient(180deg,rgba(20,15,9,.5),rgba(11,15,12,.62));
  border:1px solid rgba(246,241,230,.18);border-radius:20px;padding:clamp(22px,2.3vw,32px);
  box-shadow:0 60px 110px -40px rgba(0,0,0,.78),0 20px 50px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(246,241,230,.08);
  backdrop-filter:blur(26px) saturate(1.18);-webkit-backdrop-filter:blur(26px) saturate(1.18);
  animation:card-float 9s ease-in-out infinite}
.rmg-auth .side-card::before{content:"";position:absolute;left:0;right:0;top:0;height:44%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,241,230,.10),transparent);border-radius:20px 20px 0 0}
.rmg-auth .side-card > *{position:relative;z-index:2}
.rmg-auth .side-lead{color:rgba(246,241,230,.82);font-size:16.5px;line-height:1.5;max-width:none;margin:0}
.rmg-auth .side-card .hub-mini{margin-top:0;width:100%}
.rmg-auth .hub-mini{margin-top:clamp(16px,2.6vh,26px)}
.rmg-auth .hub-mini-lab{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--goldl);font-weight:700;margin-bottom:12px}
.rmg-auth .hub-mini-lab::before{content:"";width:28px;height:1px;background:var(--goldd)}
@media(prefers-reduced-motion:reduce){
  .rmg-auth .card{animation:none}
  .rmg-auth .glass-sheen{animation:none}
}

/* register — taller form */
.rmg-auth.reg .panel{align-items:flex-start;overflow-y:auto;padding-top:clamp(40px,6vh,80px);padding-bottom:clamp(40px,6vh,80px)}
.rmg-auth.reg .panel-inner{max-width:480px}
.rmg-auth .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rmg-auth .section{margin:28px 0 22px;padding-top:24px;border-top:1px solid var(--hair)}
.rmg-auth .section h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-lead);color:var(--goldl);margin:0 0 4px}
.rmg-auth .section .hint{color:var(--faint);font-size:var(--fs-meta);margin:0}
.rmg-auth .field .with-icon{position:relative}
.rmg-auth .field .with-icon svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint);pointer-events:none}
.rmg-auth .field input[type=date]{color-scheme:dark}

.rmg-auth .back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-meta);font-weight:600;text-decoration:none;margin-bottom:22px;transition:color .2s}
.rmg-auth .back:hover{color:var(--cream)}
.rmg-auth .back svg{width:15px;height:15px}
.rmg-auth .success{text-align:center;padding:8px 0}
.rmg-auth .success .ring{width:64px;height:64px;border-radius:50%;background:rgba(208,165,74,.12);border:1px solid rgba(208,165,74,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.rmg-auth .success .ring svg{width:28px;height:28px;color:var(--goldl)}
.rmg-auth .success h2{margin-bottom:10px}
.rmg-auth .success p{color:var(--muted);font-size:var(--fs-body);margin:0 0 24px}
.rmg-auth .btn-out{display:inline-block;width:100%;text-align:center;border:1px solid rgba(255,250,241,.5);background:rgba(255,250,241,.08);color:var(--cream);border-radius:100px;padding:16px 30px;text-decoration:none;font-weight:700;font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.rmg-auth .btn-out:hover{border-color:var(--gold);background:rgba(208,165,74,.06)}
.rmg-auth .linkbtn{background:none;border:none;cursor:pointer;color:var(--goldl);font-weight:600;font-size:inherit;padding:0}
.rmg-auth .linkbtn:hover{color:var(--gold)}
.rmg-auth .success .ring.warn{background:rgba(201,85,61,.12);border-color:rgba(201,85,61,.45)}
.rmg-auth .success .ring.warn svg{color:#e08a76}
.rmg-auth .rules{color:var(--faint);font-size:var(--fs-meta);margin:0 0 22px;line-height:1.7}
.rmg-auth .rules ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.rmg-auth-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0B0F0C;color:rgba(246,241,230,.6);font-family:'Lato',system-ui,sans-serif}
.rmg-auth-loading .spin{width:52px;height:52px;border:3px solid rgba(208,165,74,.25);border-top-color:#D0A54A;border-radius:50%;margin:0 auto 18px;animation:rmg-spin 1s linear infinite}
@keyframes rmg-spin{to{transform:rotate(360deg)}}

@media(max-width:960px){
  .rmg-auth{grid-template-columns:1fr}
  .rmg-auth.login-hero{height:auto;min-height:100svh;overflow:visible}
  .rmg-auth .side{display:none}
  .rmg-auth .mobile-brand{display:flex}
  /* login: the centred header already carries the logo + heading */
  .rmg-auth.login-hero .login-body{grid-template-columns:1fr}
  .rmg-auth.login-hero .mobile-brand{display:none}
  .rmg-auth.login-hero .login-head h1{font-size:clamp(30px,8vw,44px)}
}
@media(max-width:440px){.rmg-auth .grid2{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rmg-auth *{transition:none!important}}
/* ------------------------------------------------------------------ *
 * RMG STUDIO CONSOLE LOGIN
 * On-brand RMG language (deep green, gold, ZCOOL XiaoWei display,
 * Lato body, Roboto labels) but deliberately a plainer, utilitarian
 * layout than the couples' Wedding Hub login — no photography,
 * no script type, no carousel.
 * ------------------------------------------------------------------ */

.rmg-admin-auth {
  --green: #00603A;
  --green-deep: #003D24;
  --gold: #D0A54A;
  --gold-light: #E9C87E;
  --cream: #FFFAF1;
  --rule: rgba(255, 250, 241, 0.16);
  --muted: rgba(255, 250, 241, 0.62);
  --ease: cubic-bezier(.25, 1, .5, 1);

  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background:
    radial-gradient(1000px 620px at 50% -12%, rgba(208, 165, 74, 0.13), transparent 68%),
    linear-gradient(180deg, var(--green-deep) 0%, #002317 100%);
  color: var(--cream);
  font-family: 'Lato', -apple-system, system-ui, sans-serif;
  line-height: 1.65;
}

.rmg-admin-auth * { box-sizing: border-box; }

/* Soft brand texture instead of the previous tech grid */
.rmg-admin-auth .aa-grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(760px 540px at 50% 26%, #000 15%, transparent 78%);
          mask-image: radial-gradient(760px 540px at 50% 26%, #000 15%, transparent 78%);
}

.rmg-admin-auth .aa-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  text-align: center;
}

.rmg-admin-auth .aa-logo {
  display: block;
  width: 168px;
  margin: 0 auto 26px;
  opacity: 0.96;
}

.rmg-admin-auth .aa-badge {
  display: inline-block;
  margin-bottom: 18px;
  font-family: 'Roboto', sans-serif;
  font-size:var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.rmg-admin-auth .aa-card {
  position: relative;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: rgba(255, 250, 241, 0.045);
  backdrop-filter: blur(18px) saturate(140%);
  padding: 38px 34px 30px;
  box-shadow: 0 30px 80px -26px rgba(0, 20, 12, 0.6);
}

.rmg-admin-auth h1 {
  margin: 0 0 10px;
  font-family: 'ZCOOL XiaoWei', Georgia, serif;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--cream);
  text-align: center;
}

.rmg-admin-auth .aa-sub {
  margin: 0 0 30px;
  font-size:var(--fs-meta);
  color: var(--muted);
  text-align: center;
}

.rmg-admin-auth .aa-sub a {
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 200, 126, 0.4);
}

.rmg-admin-auth .aa-sub a:hover { border-bottom-color: var(--gold-light); }

.rmg-admin-auth .aa-field { margin-bottom: 20px; }

.rmg-admin-auth .aa-field label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Roboto', sans-serif;
  font-size:var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 250, 241, 0.7);
}

.rmg-admin-auth .aa-field input {
  width: 100%;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-size:var(--fs-body);
  font-family: inherit;
  transition: border-color 0.3s var(--ease);
}

.rmg-admin-auth .aa-field input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.rmg-admin-auth .aa-field input.err { border-bottom-color: #E8836F; }

.rmg-admin-auth .aa-err {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size:var(--fs-meta);
  color: #E8836F;
}

.rmg-admin-auth .aa-err svg { width: 13px; height: 13px; }

.rmg-admin-auth .aa-pwrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.rmg-admin-auth .aa-reveal {
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size:var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 250, 241, 0.55);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.rmg-admin-auth .aa-reveal:hover { color: var(--gold); }

/* Gold pill CTA, matching the public-site button language */
.rmg-admin-auth .aa-btn {
  position: relative;
  width: 100%;
  margin-top: 14px;
  padding: 15px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font-family: 'Roboto', sans-serif;
  font-size:var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}

.rmg-admin-auth .aa-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 250, 241, 0.16), rgba(255, 250, 241, 0.04));
  backdrop-filter: blur(14px) saturate(150%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.rmg-admin-auth .aa-btn span { position: relative; z-index: 1; }

.rmg-admin-auth .aa-btn:hover:not(:disabled) {
  color: var(--cream);
  box-shadow: 0 12px 34px -14px rgba(208, 165, 74, 0.55);
}

.rmg-admin-auth .aa-btn:hover:not(:disabled)::before { opacity: 1; }
.rmg-admin-auth .aa-btn:active:not(:disabled) { transform: translateY(1px); }
.rmg-admin-auth .aa-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.rmg-admin-auth .aa-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  font-family: 'Roboto', sans-serif;
  font-size:var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rmg-admin-auth .aa-foot a {
  color: rgba(255, 250, 241, 0.6);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.rmg-admin-auth .aa-foot a:hover {
  color: var(--gold);
  border-bottom-color: rgba(208, 165, 74, 0.5);
}

.rmg-admin-auth .aa-note {
  margin-top: 20px;
  text-align: center;
  font-size:var(--fs-label);
  letter-spacing: 0.08em;
  color: rgba(255, 250, 241, 0.42);
}

@media (max-width: 480px) {
  .rmg-admin-auth .aa-card { padding: 30px 22px 26px; }
}
/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  -o-tab-size: 4;
     tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}
/* Public guest video-message page — mobile-first, self-contained dark glass.
   Scoped under .vmsg so nothing leaks into the rest of the site. */
.vmsg{
  --gold:#D0A54A;--gold-light:#E9C87E;--cream:#FFFAF1;--ink:#0F1512;
  min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 20px;gap:18px;box-sizing:border-box;
  background:
    radial-gradient(60vw 60vw at 20% 8%,rgba(0,96,58,.5),transparent 60%),
    radial-gradient(55vw 55vw at 90% 20%,rgba(208,165,74,.2),transparent 60%),
    linear-gradient(180deg,#0F1512,#0b1a13 55%,#0F1512);
  color:var(--cream);font-family:'Lato',-apple-system,system-ui,sans-serif;
}
.vmsg *{box-sizing:border-box}
.vmsg-card{
  width:100%;max-width:460px;background:rgba(255,250,241,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:22px;padding:clamp(24px,6vw,40px);text-align:center;backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}
.vmsg-eyebrow{font-family:'Roboto',sans-serif;font-size:var(--fs-meta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.vmsg h1{font-family:'ZCOOL XiaoWei',Georgia,serif;font-weight:400;font-size:clamp(2rem,7vw,2.8rem);line-height:1.05;color:var(--cream);margin:0 0 14px}
.vmsg-script{font-family:'Oooh Baby',cursive;color:var(--gold-light)}
.vmsg-lead{font-size:var(--fs-body);line-height:1.6;color:rgba(255,250,241,.78);font-weight:300;margin:0 0 22px}
.vmsg-muted{font-size:var(--fs-meta);color:rgba(255,250,241,.6);margin-top:14px}
.vmsg-prompt{
  background:rgba(208,165,74,.1);border:1px solid rgba(208,165,74,.32);border-radius:14px;
  padding:14px 16px;margin-bottom:24px;font-family:'ZCOOL XiaoWei',serif;font-size:var(--fs-body);color:var(--cream);line-height:1.4;
}
.vmsg-prompt span{display:block;font-family:'Roboto',sans-serif;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;font-weight:600}
.vmsg-label{display:block;text-align:left;font-family:'Roboto',sans-serif;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,250,241,.6);margin-bottom:8px}
.vmsg-label span{text-transform:none;letter-spacing:0;color:rgba(255,250,241,.38)}
.vmsg-input{
  width:100%;background:rgba(11,15,12,.5);border:1px solid rgba(255,250,241,.16);border-radius:10px;
  padding:13px 15px;color:var(--cream);font-size:var(--fs-body);font-family:inherit;margin-bottom:22px;
}
.vmsg-input:focus{outline:none;border-color:rgba(208,165,74,.55)}
.vmsg-input::-moz-placeholder{color:rgba(255,250,241,.32)}
.vmsg-input::placeholder{color:rgba(255,250,241,.32)}
.vmsg-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:16px 22px;border-radius:100px;font-family:'Roboto',sans-serif;font-size:var(--fs-meta);font-weight:700;
  letter-spacing:.02em;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.vmsg-btn+.vmsg-btn{margin-top:12px}
.vmsg-btn:disabled{opacity:.6;cursor:default}
.vmsg-btn-primary{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#231a06;box-shadow:0 14px 30px -14px rgba(208,165,74,.7)}
.vmsg-btn-primary:not(:disabled):active{transform:scale(.98)}
.vmsg-btn-ghost{background:transparent;border-color:rgba(255,250,241,.32);color:rgba(255,250,241,.85)}
.vmsg-btn-ghost:not(:disabled):hover{border-color:var(--cream)}
.vmsg-file{display:flex;align-items:center;gap:10px;background:rgba(255,250,241,.06);border:1px solid rgba(208,165,74,.32);border-radius:12px;padding:13px 15px;margin-bottom:16px;text-align:left}
.vmsg-file-ok{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-meta);font-weight:700}
.vmsg-file-name{flex:1;font-size:var(--fs-meta);color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vmsg-file-x{background:none;border:none;color:rgba(255,250,241,.5);cursor:pointer;font-size:var(--fs-body);padding:4px}
.vmsg-error{margin-top:14px;color:#E7A17A;font-size:var(--fs-meta)}
.vmsg-tick{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;background:rgba(208,165,74,.14);border:1px solid rgba(208,165,74,.45);display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--gold-light)}
.vmsg-foot{font-family:'Roboto',sans-serif;font-size:var(--fs-label);letter-spacing:.1em;color:rgba(255,250,241,.4)}
/* Real Weddings — cinematic case-study experience. All scoped under .rw */
.rw{
  --ink:#0B0F0C;--ink2:#0E1310;--cream:#F6F1E6;--gold:#D0A54A;--goldl:#E9C87E;--goldd:#A8842F;
  --muted:rgba(246,241,230,.58);--faint:rgba(246,241,230,.34);--hair:rgba(246,241,230,.12);
  --serif:'ZCOOL XiaoWei',Georgia,serif;--script:'Oooh Baby',cursive;--sans:'Lato',-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.65;font-size:var(--fs-lead);-webkit-font-smoothing:antialiased;position:relative;overflow:hidden;
}
.rw *{box-sizing:border-box}
.rw img{display:block;max-width:100%}
.rw a{color:inherit}
.rw .wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.rw .script{font-family:var(--script);color:var(--goldl);font-weight:400;font-size:1.14em;line-height:.9;display:inline-block}
.rw .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:700}
.rw .eyebrow::before{content:"";width:34px;height:1px;background:rgba(208,165,74,.4)}
.rw h1,.rw h2,.rw h3{font-family:var(--serif);font-weight:400;letter-spacing:.004em;line-height:1.06;margin:0}

/* intro */
.rw .intro{padding:128px 0 84px;text-align:center}
.rw .intro h1{font-size:clamp(40px,6vw,74px)}
.rw .intro .lede{max-width:640px;margin:26px auto 0;font-size:var(--fs-lead);color:var(--muted)}
.rw .intro .proof{margin-top:30px;font-family:var(--serif);font-size:26px;color:var(--goldl)}
.rw .intro .proof b{color:var(--cream)}

/* choose a story */
.rw .choose{padding:16px 0 40px}
.rw .choose .chead{text-align:center;margin-bottom:40px}
.rw .choose .chead h2{font-size:clamp(30px,4.4vw,52px);margin-top:14px}
.rw .pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:800px){.rw .pick-grid{grid-template-columns:1fr}}
.rw .pick{position:relative;display:block;aspect-ratio:4/5;min-height:0;border-radius:12px;overflow:hidden;text-decoration:none;box-shadow:0 46px 100px -50px rgba(0,0,0,.8)}
.rw .pick img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 42%;object-position:center 42%;transition:transform 1.2s var(--ease),filter .6s ease;filter:brightness(.82) saturate(.98)}
.rw .pick:hover img{transform:scale(1.04);filter:brightness(.9)}
.rw .pick::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,9,.82),rgba(8,10,9,.4) 42%,transparent 72%),linear-gradient(0deg,rgba(11,15,12,.7),transparent 40%)}
.rw .pick .pbody{position:absolute;z-index:2;bottom:0;left:0;padding:clamp(24px,2.4vw,38px);max-width:100%}
.rw .badge{display:inline-block;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:var(--goldl);padding:5px 12px;border-radius:5px;font-weight:700}
.rw .badge.film{background:transparent;color:var(--goldl);border:1px solid var(--goldd)}
.rw .pick h3{font-size:clamp(28px,3.1vw,44px);margin:12px 0 12px;color:var(--cream)}
.rw .pick .meta{display:flex;flex-wrap:wrap;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.rw .pick .meta span{padding:0 16px;border-left:1px solid rgba(246,241,230,.3)}
.rw .pick .meta span:first-child{padding-left:0;border-left:0}
.rw .pick .oneline{font-family:var(--serif);font-size:var(--fs-body);color:rgba(246,241,230,.9);max-width:100%}
.rw .pick .enter{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-size:var(--fs-meta);letter-spacing:.24em;text-transform:uppercase;color:var(--goldl);font-weight:700}
.rw .pick:hover .enter .ar{transform:translateX(6px)}
.rw .pick .enter .ar{transition:transform .4s var(--ease)}


/* universal moments */
.rw .univ{padding:104px 0}
.rw .univ .chead{text-align:center}
.rw .univ .chead h2{font-size:clamp(30px,4.4vw,54px);margin-top:14px}
.rw .univ .sub{text-align:center;color:var(--muted);max-width:600px;margin:14px auto 46px}
.rw .strip{display:flex;gap:16px;overflow-x:auto;padding:6px 40px 20px;scrollbar-width:none;scroll-snap-type:x proximity;cursor:grab}
.rw .strip.drag{cursor:grabbing}
.rw .strip::-webkit-scrollbar{display:none}
.rw .umom{position:relative;flex:0 0 auto;width:230px;height:300px;border-radius:9px;overflow:hidden;border:1px solid var(--hair);scroll-snap-align:center}
.rw .umom img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 30%;object-position:center 30%}
.rw .umom span{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:linear-gradient(transparent,rgba(8,12,9,.85))}

/* contact cta */
.rw .cta{padding:118px 0;text-align:center;border-top:1px solid var(--hair)}
.rw .cta h2{font-size:clamp(32px,5vw,58px)}
.rw .cta p{color:var(--muted);margin-top:16px;font-size:var(--fs-lead)}
/* glass CTA (homepage effect): underline draws to a full pill border, then a
   liquid-glass fill fades in. Single element, matches .pho .btn / .cine .btn. */
.rw .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:34px;padding:16px 40px;border-radius:100px;
  border:1px solid transparent;color:#F0D9A0;font-size:var(--fs-meta);letter-spacing:.26em;text-transform:uppercase;font-weight:700;text-decoration:none;
  background:transparent;cursor:pointer;isolation:isolate;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.rw .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;border:1px solid rgba(233,200,126,.6);
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s}
.rw .btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:-1;width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.85);transition:opacity .12s linear}
.rw .btn:hover,.rw .btn:focus-visible{color:#FFF5D6;transform:scale(1.015);outline:none;
  background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1));backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 40px -18px rgba(0,0,0,.6)}
.rw .btn:hover::before,.rw .btn:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.rw .btn:hover::after,.rw .btn:focus-visible::after{opacity:0;transition-delay:.26s}

/* ===== case study ===== */
.rw .back{position:fixed;top:120px;left:30px;z-index:40;color:var(--cream);text-decoration:none;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;background:rgba(8,12,9,.5);backdrop-filter:blur(6px);padding:9px 16px;border:1px solid rgba(246,241,230,.2);border-radius:100px}
.rw .hero{position:relative;height:92vh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rw .hero>img,.rw .hero>video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 42%;object-position:center 42%;filter:saturate(.98) brightness(.9)}
.rw .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,9,.35),transparent 30%,rgba(8,10,9,.5) 68%,rgba(11,15,12,.96))}
.rw .hero .hin{position:relative;z-index:2;width:100%;text-align:center}
.rw .hero .num{font-size:var(--fs-meta);letter-spacing:.4em;text-transform:uppercase;color:var(--goldl);font-weight:700}
.rw .hero h2,.rw .hero h1{font-size:clamp(50px,8vw,100px);margin:14px 0 20px;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.rw .meta{display:flex;flex-wrap:wrap;font-size:var(--fs-meta);letter-spacing:.22em;text-transform:uppercase}
/* the hero meta sits under a centred title, so centre it too (the card metas stay left) */
.rw .hero .meta{justify-content:center}
.rw .meta span{padding:0 20px;border-left:1px solid rgba(246,241,230,.28)}
.rw .meta span:first-child{padding-left:0;border-left:0}
.rw .hero .lede{max-width:560px;margin:26px auto 0;font-size:var(--fs-lead);color:rgba(246,241,230,.86);font-family:var(--serif)}

.rw .story{padding:104px 0 40px}
.rw .story .shead{text-align:center;margin-bottom:20px}
.rw .story .shead h3{font-size:clamp(34px,5vw,58px)}
.rw .chapters{display:flex;flex-direction:column}
.rw .chapters>*{width:100%}
.rw .chap{width:100%;max-width:1020px;margin:44px auto}
.rw .chap .frame{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 40px 90px -46px rgba(0,0,0,.8)}
.rw .chap .frame img,.rw .chap .frame video{display:block;width:100%;height:clamp(360px,52vh,560px);-o-object-fit:cover;object-fit:cover;-o-object-position:center 32%;object-position:center 32%}
.rw .chap .clip{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;background:rgba(8,12,9,.55);backdrop-filter:blur(6px);border:1px solid rgba(246,241,230,.2);font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase}
.rw .chap .clip svg{width:11px;height:11px;fill:var(--goldl)}
.rw .chap .cap{position:absolute;left:0;right:0;bottom:0;padding:60px 30px 26px;background:linear-gradient(transparent,rgba(8,12,9,.85))}
.rw .chap .label{font-size:var(--fs-meta);letter-spacing:.34em;text-transform:uppercase;color:var(--goldl);font-weight:700}
.rw .chap .line{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);margin-top:8px;max-width:640px}
.rw .down{color:var(--faint);font-size:22px;margin:8px 0}

.rw .favs{padding:96px 0;background:var(--ink2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rw .favs h3{font-size:clamp(30px,4.4vw,52px);text-align:center}
.rw .fav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.rw .fav{padding:36px 30px;border:1px solid var(--hair);border-radius:10px;background:rgba(246,241,230,.02)}
.rw .fav .q{font-family:var(--serif);font-size:22px;line-height:1.5}
.rw .fav .mark{font-family:var(--serif);font-size:52px;color:var(--goldd);line-height:.4;display:block;height:26px}

/* reaction (portrait reel) */
.rw .rxn{padding:70px 0 20px}
.rw .rxn .rhead{text-align:center;margin-bottom:40px}
.rw .rxn .rhead h3{font-size:clamp(30px,4.4vw,52px);margin-top:16px}
.rw .rxn-wrap{display:flex;gap:56px;align-items:center;justify-content:center;flex-wrap:wrap}
.rw .rxn-card{position:relative;width:clamp(258px,27vw,336px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.85);border:1px solid var(--hair);flex:0 0 auto}
.rw .rxn-card img,.rw .rxn-card video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.rw .rxn-card.rxn-wide{aspect-ratio:4/3;width:clamp(300px,42vw,480px)}
.rw .cinema video{width:100%;display:block;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover}
.rw .rxn-copy{max-width:360px}
.rw .rxn-q{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.3;color:var(--goldl)}
.rw .rxn-sub{margin-top:20px;color:var(--muted)}

/* more from our couples — two portrait video testimonials */
.rw .vtestis{padding:12px 0 96px}
.rw .vtestis .sh{text-align:center;max-width:640px;margin:0 auto 46px}
.rw .vtestis .sh h2{font-size:clamp(30px,4.4vw,52px);margin-top:16px}
.rw .vtestis .sh p{margin-top:18px;color:var(--muted)}
.rw .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);max-width:820px;margin:0 auto;align-items:start}
@media(max-width:680px){.rw .vgrid{grid-template-columns:1fr;max-width:380px}}
.rw .vcard{margin:0}
.rw .vwrap{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.85);border:1px solid var(--hair);background:#000}
.rw .vwrap video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.rw .vcard figcaption{text-align:center;margin-top:20px}
.rw .vcard figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,26px);color:var(--cream)}
.rw .vcard figcaption span{display:block;margin-top:6px;font-size:var(--fs-meta);color:var(--muted)}

/* film cinema */
.rw .film{padding:104px 0}
.rw .film .fhead{text-align:center;margin-bottom:40px}
.rw .film .fhead h3{font-size:clamp(30px,4.4vw,52px);margin-top:16px}
.rw .cinema{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.85);border:1px solid var(--hair)}
.rw .cinema>img{width:100%;aspect-ratio:16/9;height:auto;-o-object-fit:cover;object-fit:cover;-o-object-position:center 38%;object-position:center 38%;filter:brightness(.94) saturate(1.02)}
.rw .cinema::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 46%,rgba(8,12,9,.15),rgba(8,12,9,.5))}
.rw .play{position:absolute;inset:0;margin:auto;width:92px;height:92px;z-index:2;border-radius:50%;border:1.5px solid var(--goldl);display:flex;align-items:center;justify-content:center;background:rgba(8,12,9,.34);backdrop-filter:blur(5px);cursor:pointer;transition:transform .4s var(--ease),background .3s}
.rw .cinema:hover .play{transform:scale(1.08);background:rgba(208,165,74,.28)}
.rw .play svg{width:30px;height:30px;fill:var(--cream);margin-left:5px}
.rw .rxn-card .play{width:72px;height:72px}.rw .rxn-card .play svg{width:26px;height:26px;margin-left:3px}
.rw .cinema .fmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;padding:28px 34px;background:linear-gradient(transparent,rgba(8,12,9,.8));font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase}
.rw .cinema .fmeta span{padding:0 22px;border-left:1px solid rgba(246,241,230,.28)}
.rw .cinema .fmeta span:first-child{padding-left:0;border-left:0;color:var(--goldl)}

/* gallery — even editorial + hover full */
.rw .gallery{padding:40px 0 104px}
.rw .gal-note{text-align:center;color:var(--faint);font-size:var(--fs-meta);letter-spacing:.24em;text-transform:uppercase;margin-bottom:26px}
.rw .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.rw .gi{position:relative;overflow:hidden;border-radius:6px}
.rw .gi>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 28%;object-position:center 28%}
.rw .gi-hero{grid-column:span 2;grid-row:span 2}
.rw .gi-wide{grid-column:span 2}

.rw .testi{padding:118px 0;text-align:center;background:var(--ink2);border-top:1px solid var(--hair)}
.rw .testi .stars{color:var(--gold);letter-spacing:6px;font-size:var(--fs-body)}
.rw .testi blockquote{font-family:var(--serif);font-size:clamp(26px,3.6vw,42px);line-height:1.35;max-width:900px;margin:26px auto 0}
.rw .testi cite{display:block;margin-top:30px;font-style:normal;font-size:var(--fs-meta);letter-spacing:.3em;text-transform:uppercase;color:var(--goldl)}

.rw .bts{padding:104px 0;border-top:1px solid var(--hair)}
.rw .bts h3{text-align:center;font-size:clamp(30px,4.4vw,52px)}
.rw .bts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;text-align:center}
.rw .stat .n{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);color:var(--goldl);line-height:1.08}
/* experience paragraph, across two columns */
.rw .bts-copy{max-width:940px;margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.rw .bts-copy p{margin:0;color:rgba(246,241,230,.82);font-size:var(--fs-lead);line-height:1.75}
@media(max-width:800px){.rw .bts-copy{grid-template-columns:1fr;gap:24px}}
.rw .stat .k{font-size:var(--fs-meta);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.rw .nextrow{padding:76px 0 116px;text-align:center;border-top:1px solid var(--hair)}
.rw .nextrow a{color:var(--goldl);text-decoration:none;font-family:var(--serif);font-size:24px}

@media(max-width:820px){
  .rw .fav-grid,.rw .bts-grid{grid-template-columns:1fr}
  .rw .gal-grid{grid-template-columns:repeat(2,1fr)}.rw .gi-hero{grid-column:span 2}
  .rw .pick .pbody{padding:32px}
}

/* ===== team / about ===== */
.rw .hero .herobtn{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:28px;padding:15px 36px;border-radius:100px;
  border:1px solid transparent;color:#F0D9A0;font-size:var(--fs-meta);letter-spacing:.24em;text-transform:uppercase;font-weight:700;text-decoration:none;
  background:transparent;cursor:pointer;isolation:isolate;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.rw .hero .herobtn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;border:1px solid rgba(233,200,126,.7);
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s}
.rw .hero .herobtn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:-1;width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.85);transition:opacity .12s linear}
.rw .hero .herobtn:hover,.rw .hero .herobtn:focus-visible{color:#FFF5D6;transform:scale(1.015);outline:none;
  background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1));backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 40px -18px rgba(0,0,0,.6)}
.rw .hero .herobtn:hover::before,.rw .hero .herobtn:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.rw .hero .herobtn:hover::after,.rw .hero .herobtn:focus-visible::after{opacity:0;transition-delay:.26s}
.rw .talk{padding:26px 0;border-bottom:1px solid var(--hair);background:var(--ink2)}
.rw .talk .row{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:center;text-align:center}
.rw .talk p{font-family:var(--serif);font-size:var(--fs-lead)}
.rw .talk .btn{margin-top:0}
.rw .duo{padding:100px 0}
.rw .duo .dhead{text-align:center;margin-bottom:56px}
.rw .duo .dhead h2{font-size:clamp(30px,4.4vw,54px);margin-top:14px}
.rw .duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.rw .tcard .tphoto{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.rw .tcard .tphoto img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 22%;object-position:center 22%}
.rw .tcard .placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;height:100%;background:linear-gradient(160deg,#0f1512,#1a221c);color:var(--faint);text-align:center;padding:20px}
.rw .tcard .placeholder svg{width:46px;height:46px;fill:var(--goldd)}
.rw .tcard .placeholder small{font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase}
.rw .tcard .role{margin-top:22px;font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700}
.rw .tcard h3{font-size:clamp(30px,3.6vw,44px);margin:8px 0 14px}
.rw .tcard .bio{color:var(--muted);font-size:var(--fs-lead)}
.rw .tcard .bio b{color:var(--cream);font-weight:400;font-family:var(--serif)}
.rw .how{padding:100px 0;background:var(--ink2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rw .how .hh{text-align:center;margin-bottom:52px}
.rw .how .hh h2{font-size:clamp(30px,4.4vw,54px);margin-top:14px}
.rw .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.rw .how-item{padding:34px 28px;border:1px solid var(--hair);border-radius:12px;background:rgba(246,241,230,.02)}
.rw .how-item .hn{font-family:var(--serif);color:var(--goldl);font-size:34px}
.rw .how-item h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:12px 0 8px;color:var(--cream)}
.rw .how-item p{color:var(--muted);font-size:var(--fs-body)}
.rw .seew{padding:104px 0;text-align:center;border-bottom:1px solid var(--hair)}
.rw .seew h2{font-size:clamp(30px,4.4vw,52px)}
.rw .seew p{color:var(--muted);margin-top:14px;font-size:var(--fs-lead)}
@media(max-width:820px){.rw .duo-grid,.rw .how-grid{grid-template-columns:1fr}}

/* ===== packages page ===== */
.rw .pk-hero{position:relative;height:74vh;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rw .pk-hero>img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 40%;object-position:center 40%;filter:brightness(.82)}
.rw .pk-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,9,.55),rgba(8,10,9,.34) 34%,rgba(8,10,9,.55) 64%,rgba(11,15,12,.97))}
.rw .pk-hero .hin{position:relative;z-index:2;width:100%;text-align:center}
.rw .pk-hero h1{font-size:clamp(42px,6.5vw,84px);margin:14px 0 18px}
.rw .pk-hero .lede{max-width:620px;margin:0 auto;font-size:var(--fs-lead);color:rgba(246,241,230,.9);font-family:var(--serif)}
.rw .sec{padding:104px 0}.rw .sec.alt{background:var(--ink2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rw .sh{text-align:center;max-width:720px;margin:0 auto 52px}.rw .sh h2{font-size:clamp(30px,4.4vw,52px);margin-top:14px}.rw .sh p{color:var(--muted);margin-top:14px;font-size:var(--fs-lead)}
.rw .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rw .card{border:1px solid var(--hair);border-radius:16px;padding:38px 30px;background:linear-gradient(160deg,rgba(246,241,230,.05),rgba(246,241,230,.015));backdrop-filter:blur(6px);display:flex;flex-direction:column}
.rw .card .tier{font-size:var(--fs-meta);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700}
.rw .card .price{font-family:var(--serif);font-size:44px;color:var(--cream);margin:10px 0 2px}
.rw .card .half{font-size:var(--fs-meta);color:var(--faint);letter-spacing:.05em}
.rw .card .guide{font-family:var(--serif);font-size:var(--fs-lead);color:var(--goldl);margin:20px 0 18px;line-height:1.45}
.rw .card ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.rw .card li{padding:11px 0;border-top:1px solid var(--hair);font-size:var(--fs-body);color:rgba(246,241,230,.86);display:flex;gap:10px}
.rw .card li::before{content:"—";color:var(--goldd)}
.rw .card .cbtn{display:block;text-align:center;padding:14px;border-radius:100px;border:1px solid rgba(233,200,126,.55);color:#F0D9A0;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;font-weight:700;text-decoration:none}
.rw .card .proof{text-align:center;margin-top:14px;font-size:var(--fs-meta);color:var(--goldl);text-decoration:none;letter-spacing:.04em}
.rw .cmp{width:100%;border-collapse:collapse}
.rw .cmp th,.rw .cmp td{padding:18px 14px;text-align:center;border-bottom:1px solid var(--hair)}
.rw .cmp thead th{font-family:var(--serif);font-size:24px;color:var(--cream)}
.rw .cmp thead th.feat,.rw .cmp td.feat{text-align:left;color:var(--muted);font-size:var(--fs-meta);letter-spacing:.06em;width:34%}
.rw .cmp .yes{color:var(--goldl);font-size:var(--fs-lead)}.rw .cmp .opt{color:var(--muted);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}.rw .cmp .no{color:var(--faint)}
.rw .cmp tbody tr:hover{background:rgba(246,241,230,.02)}
.rw .incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.rw .incl{padding:30px 26px;border:1px solid var(--hair);border-radius:12px;background:rgba(246,241,230,.02)}
.rw .incl h4{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--cream);margin-bottom:8px}
.rw .incl p{color:var(--muted);font-size:var(--fs-body)}
.rw .feat-row{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.rw .feat-media{border-radius:12px;overflow:hidden;border:1px solid var(--hair);position:relative;box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.rw .feat-media img{width:100%;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover}
.rw .feat-copy h2{font-size:clamp(28px,3.6vw,44px)}.rw .feat-copy p{color:var(--muted);margin-top:16px;font-size:var(--fs-lead)}
.rw .deliv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rw .dv{border-radius:10px;overflow:hidden;border:1px solid var(--hair);position:relative;aspect-ratio:4/5;background:#0f1512}
.rw .dv img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.rw .dv.usb{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--faint);text-align:center;padding:16px}
.rw .dv .lab{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(transparent,rgba(8,12,9,.85));color:var(--cream)}
.rw .ladder{max-width:560px;margin:0 auto;text-align:center}
.rw .ladder .step{padding:14px 0;font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);color:rgba(246,241,230,.9)}
.rw .ladder .arrow{color:var(--goldd);font-size:var(--fs-lead)}.rw .ladder .last{color:var(--goldl)}
/* staggered scroll reveal — the reasons build one after another */
.rw .ladder>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rw .ladder.in>*{opacity:1;transform:none}
.rw .ladder.in>*:nth-child(1){transition-delay:.05s}
.rw .ladder.in>*:nth-child(2){transition-delay:.19s}
.rw .ladder.in>*:nth-child(3){transition-delay:.33s}
.rw .ladder.in>*:nth-child(4){transition-delay:.47s}
.rw .ladder.in>*:nth-child(5){transition-delay:.61s}
.rw .ladder.in>*:nth-child(6){transition-delay:.75s}
.rw .ladder.in>*:nth-child(7){transition-delay:.89s}
.rw .ladder.in>*:nth-child(8){transition-delay:1.03s}
.rw .ladder .arrow{animation:none}
.rw .ladder.in .arrow{animation:rw-arrow 1.6s var(--ease) infinite}
@keyframes rw-arrow{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.rw .ladder>*{opacity:1;transform:none;transition:none}.rw .ladder.in .arrow{animation:none}}
.rw .rw3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rw .rw3 a{position:relative;display:block;height:340px;border-radius:12px;overflow:hidden;text-decoration:none;color:var(--cream)}
.rw .rw3 img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 40%;object-position:center 40%;filter:brightness(.75);transition:transform 1s var(--ease)}
.rw .rw3 a:hover img{transform:scale(1.05)}
.rw .rw3 .c{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.rw .rw3 .c b{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--cream)}
.rw .rw3 .c span{color:var(--goldl);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;margin-top:8px}
.rw .faqs{max-width:820px;margin:0 auto}
.rw .faq{border-top:1px solid var(--hair);padding:24px 0}
.rw .faq h4{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--cream);margin-bottom:10px}
.rw .faq p{color:var(--muted);font-size:var(--fs-body)}
.rw .vblock{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.rw .vblock img{width:100%;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;filter:brightness(.9)}
.rw .vplay{position:absolute;inset:0;margin:auto;width:82px;height:82px;border-radius:50%;border:1.5px solid var(--goldl);display:flex;align-items:center;justify-content:center;background:rgba(8,12,9,.35);backdrop-filter:blur(4px)}
.rw .vplay svg{width:28px;fill:var(--cream);margin-left:4px}
.rw .vcap{position:absolute;left:0;right:0;bottom:0;padding:24px 26px;background:linear-gradient(transparent,rgba(8,12,9,.82));font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.rw .flare{position:relative;isolation:isolate;overflow:hidden}
.rw .flare::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 80% 24%,rgba(255,247,228,.95),transparent 4%),radial-gradient(circle at 80% 24%,rgba(233,200,126,.5),rgba(208,165,74,.1) 15%,transparent 44%),radial-gradient(circle at 64% 38%,rgba(208,165,74,.16),transparent 8%),radial-gradient(circle at 50% 50%,rgba(233,200,126,.1),transparent 6%),radial-gradient(circle at 36% 62%,rgba(208,165,74,.12),transparent 6%),radial-gradient(circle at 24% 72%,rgba(233,200,126,.08),transparent 5%),linear-gradient(107deg,transparent 45%,rgba(233,200,126,.1) 50%,transparent 56%),var(--ink)}
.rw .addons{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rw .addon{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--hair)}
.rw .addon img{width:100%;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;filter:brightness(.72)}
.rw .addon .ac{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.rw .addon .ac b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--cream)}
.rw .addon .ac span{color:var(--muted);font-size:var(--fs-meta);margin-top:6px}
.rw .addon .vplay{width:60px;height:60px}.rw .addon .vplay svg{width:20px}
@media(max-width:860px){.rw .cards,.rw .incl-grid,.rw .deliv,.rw .rw3,.rw .addons{grid-template-columns:1fr}.rw .feat-row{grid-template-columns:1fr}.rw .cmp thead th{font-size:var(--fs-body)}.rw .cmp th,.rw .cmp td{padding:12px 6px}}
/* About page enrichment layer — "Behind the cameras", Aaron/Hayden depth,
   and the "same moment, one team" film+photo moment. Scoped under .rw so it
   inherits the existing Real Weddings design tokens. Additive only. */

/* BEHIND THE CAMERAS */
.rw .behind{padding:104px 0 84px;border-top:1px solid var(--hair)}
.rw .behind .bhead{max-width:760px;margin:0 auto 12px;text-align:center}
.rw .behind .bhead h2{font-size:clamp(30px,4.4vw,54px);margin-top:16px}
.rw .behind .bcopy{display:grid;grid-template-columns:1fr 1fr;gap:34px 56px;max-width:980px;margin:40px auto 10px}
.rw .behind .bcopy p{color:var(--muted);font-size:var(--fs-lead);margin:0}
.rw .behind .bcopy p b{color:var(--cream);font-weight:400}
@media(max-width:820px){.rw .behind .bcopy{grid-template-columns:1fr;gap:20px}}
.rw .behind .brail{margin-top:44px}
.rw .behind .bnote{margin-top:22px;text-align:center;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}

/* YEARS / DEPTH BLOCKS */
.rw .depth{padding:8px 0 100px}
.rw .depth + .depth{padding-top:0}
.rw .dwrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,72px);align-items:center}
.rw .depth.flip .dwrap{grid-template-columns:1.08fr .92fr}
.rw .depth.flip .dtext{order:2}
.rw .depth.flip .dmedia{order:1}
@media(max-width:900px){.rw .dwrap,.rw .depth.flip .dwrap{grid-template-columns:1fr}.rw .depth.flip .dtext{order:1}.rw .depth.flip .dmedia{order:2}}
.rw .years{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.rw .years b{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,74px);line-height:.9;color:var(--goldl)}
.rw .years span{font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.rw .dtext h3{font-size:clamp(26px,3.2vw,40px);margin-bottom:18px}
.rw .dtext p{color:var(--muted);margin:0 0 16px}
.rw .dtext p:last-child{margin-bottom:0}
.rw .dlines{margin-top:26px;padding-left:20px;border-left:1px solid rgba(208,165,74,.34)}
.rw .dlines span{display:block;font-family:var(--serif);font-size:clamp(18px,2.1vw,23px);color:rgba(246,241,230,.92);line-height:1.5}
.rw .dlines span + span{margin-top:6px}

/* photo trio for Aaron */
.rw .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rw .dgrid figure{position:relative;margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/5;box-shadow:0 40px 80px -46px rgba(0,0,0,.8)}
.rw .dgrid figure.tall{grid-row:span 2;aspect-ratio:auto;height:100%;min-height:280px}
.rw .dgrid img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.rw .dgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);background:linear-gradient(transparent,rgba(8,12,9,.82))}

/* Hayden film panel */
.rw .dfilm{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 50px 100px -50px rgba(0,0,0,.85);aspect-ratio:16/10;background:var(--ink2)}
.rw .dfilm video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.rw .dfilm .tag{position:absolute;top:16px;left:16px;z-index:2;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--goldl);background:rgba(8,12,9,.5);backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;border:1px solid var(--hair)}

/* SAME MOMENT — ONE TEAM */
.rw .onemoment{padding:104px 0;background:var(--ink2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rw .onemoment .ohead{text-align:center;max-width:720px;margin:0 auto 48px}
.rw .onemoment .ohead h2{font-size:clamp(30px,4.4vw,54px);margin-top:16px}
.rw .omgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.rw .omgrid{grid-template-columns:1fr}}
.rw .om{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/3;box-shadow:0 50px 100px -50px rgba(0,0,0,.85);background:var(--ink)}
.rw .om img,.rw .om video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.rw .om .lbl{position:absolute;left:16px;bottom:16px;z-index:2;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--cream);background:rgba(8,12,9,.46);backdrop-filter:blur(10px);border:1px solid var(--hair);padding:7px 13px;border-radius:999px}
.rw .omcopy{max-width:760px;margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:26px 46px}
@media(max-width:820px){.rw .omcopy{grid-template-columns:1fr;gap:18px}}
.rw .omcopy p{color:var(--muted);margin:0}
.rw .payoff{margin-top:44px;text-align:center}
.rw .payoff span{display:block;font-family:var(--serif);font-size:clamp(22px,3vw,34px);color:var(--goldl);line-height:1.35}
.rw .payoff span + span{color:rgba(246,241,230,.9)}
.rw .samenote{margin-top:26px;text-align:center;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
/* Self-contained styles for the DetailReel component so it works on any page
   (photography details section AND the Real Weddings universal-moments strip). */
.detailreel{position:relative;margin-top:6px;overflow:hidden;cursor:grab;perspective:1400px;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.detailreel.dragging{cursor:grabbing}
.detailreel-track{display:flex;gap:22px;width:-moz-max-content;width:max-content;padding:36px 0;transform-style:preserve-3d;will-change:transform}
.detailreel .dr-card{position:relative;flex:0 0 auto;width:clamp(210px,23vw,272px);aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:1px solid var(--hair,rgba(246,241,230,.12));background:#0c1c15;box-shadow:0 34px 66px -32px rgba(0,0,0,.72);transform-style:preserve-3d;will-change:transform,opacity;-moz-user-select:none;user-select:none;-webkit-user-select:none}
.detailreel .dr-card .ph{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#0c1c15;pointer-events:none}
.detailreel .dr-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 50%,rgba(8,12,9,.86))}
.detailreel .dr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--cream,#F6F1E6);font-family:'Lato',-apple-system,sans-serif}
.detailreel .dr-hint{position:absolute;right:4px;bottom:2px;z-index:3;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--faint,rgba(246,241,230,.34));pointer-events:none;font-family:'Lato',-apple-system,sans-serif}
@media(max-width:640px){.detailreel .dr-card{width:clamp(168px,58vw,220px)}}
@media(prefers-reduced-motion:reduce){.detailreel{perspective:none;cursor:default;overflow-x:auto}.detailreel-track{padding:14px 0}.detailreel .dr-card{transform:none!important;opacity:1!important}}
/* ============================================================
   RMG Wedding Hub page — dark-glass design system
   Lifted faithfully from design/mockup-wedding-hub-page-v2.html.
   EVERY selector is scoped under `.v8hub` so this dark theme can
   never leak into the homepage (.v8), the portal, the CRM/dashboard,
   or any other public page. The shared PublicHeader/PublicFooter
   keep their own .v8-header / .v8-footer scopes; the only header
   touch here is a small dark-frost override keyed on body.v8hub-page.
   Google Fonts are already loaded in index.html (not duplicated).
   ============================================================ */

/* Design tokens — applied to the .v8hub wrapper only.
   Variables inherit to descendants, so all hub markup can use them. */
.v8hub {
  --green:#00603A;--green-deep:#003D24;--green-mist:#E8F1EC;
  --gold:#D0A54A;--gold-deep:#A8842F;--gold-light:#E0C079;--gold-soft:rgba(208,165,74,.45);
  --cream:#FFFAF1;--cream-warm:#F5EFE2;--dark:#232323;--ink:#0F1512;--grey:#54595F;--white:#fff;
  --rule:rgba(35,35,35,.10);--rule-light:rgba(255,250,241,.16);
  --font-display:'ZCOOL XiaoWei',Georgia,serif;--font-script:'Oooh Baby',cursive;
  --font-body:'Lato',-apple-system,system-ui,sans-serif;--font-label:'Roboto',sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);--ease-expo:cubic-bezier(.16,1,.3,1);--maxw:1320px;
  --glass:rgba(255,250,241,.09);--glass-brd:rgba(255,255,255,.22);
  --blur:blur(28px) saturate(160%);
  --gshadow:0 30px 80px -22px rgba(0,30,18,.55),0 8px 28px rgba(0,0,0,.18),inset 1px 1px 0 0 rgba(255,255,255,.32),inset -1px -1px 0 0 rgba(255,255,255,.05);
}

/* Base — scoped to the hub wrapper */
.v8hub{font-family:var(--font-body);color:var(--cream);background:var(--ink);line-height:1.65;font-size:var(--fs-body);position:relative;overflow-x:hidden}
.v8hub *{margin:0;padding:0;box-sizing:border-box}
.v8hub img{display:block;max-width:100%}
.v8hub a{color:inherit;text-decoration:none}
.v8hub section{position:relative}

/* dark continuous backdrop with green+gold blooms so glass always reads.
   Absolute inside the wrapper (not fixed-to-viewport) so it stays behind
   the hub body only and never paints under the shared header/footer. */
.v8hub .bg-field{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(55vw 55vw at 15% 6%,rgba(0,96,58,.5),transparent 60%),
  radial-gradient(50vw 50vw at 90% 18%,rgba(208,165,74,.22),transparent 60%),
  radial-gradient(60vw 60vw at 80% 70%,rgba(0,96,58,.4),transparent 62%),
  radial-gradient(45vw 45vw at 10% 92%,rgba(208,165,74,.16),transparent 60%),
  linear-gradient(180deg,#0F1512,#0b1a13 50%,#0F1512)}
.v8hub > *:not(.bg-field){position:relative;z-index:1}

.v8hub h1,.v8hub h2,.v8hub h3,.v8hub h4{font-family:var(--font-display);font-weight:400}
.v8hub h2{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.06;color:var(--cream)}
.v8hub .script{font-family:var(--font-script);color:var(--gold-light);line-height:.9}
.v8hub .eyebrow{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.12em;color:var(--gold);display:inline-block}
.v8hub .lead{font-size:var(--fs-lead);line-height:1.75;color:rgba(255,250,241,.8);max-width:62ch;font-weight:300}
/* Liquid-glass CTA — matches the homepage (.v8 .btn-outline): at rest a clean
   centred underline; on hover the border draws out from the underline to a full
   pill, the underline fades, and a frosted glass fill blooms in. No markup change
   needed — pseudo layers sit at z-index:-1 so plain-text buttons stay on top. */
.v8hub .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-label);font-size:var(--fs-label);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  padding:15px 30px;border-radius:100px;color:rgba(255,250,241,.85);background:transparent;border:1px solid transparent;
  cursor:pointer;isolation:isolate;box-shadow:none;
  transition:color .35s ease,background .2s ease,box-shadow .3s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.v8hub .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  border:1px solid rgba(255,250,241,.5);
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s}
.v8hub .btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:-1;
  width:calc(100% - 44px);height:1px;background:rgba(255,250,241,.5);pointer-events:none;opacity:1;transition:opacity .12s linear}
.v8hub .btn:active{transform:scale(.97)}
.v8hub .btn:hover,.v8hub .btn:focus-visible{color:#FFFAF1;transform:scale(1.015);outline:none;
  background:linear-gradient(180deg,rgba(255,250,241,.13),rgba(255,250,241,.05));backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 40px -18px rgba(0,0,0,.55)}
.v8hub .btn:hover::before,.v8hub .btn:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.v8hub .btn:hover::after,.v8hub .btn:focus-visible::after{opacity:0;transition-delay:.26s}
.v8hub .btn-primary{color:#F0D9A0}
.v8hub .btn-primary::before{border-color:rgba(233,200,126,.6)}
.v8hub .btn-primary::after{background:rgba(233,200,126,.85)}
.v8hub .btn-primary:hover,.v8hub .btn-primary:focus-visible{color:#FFF5D6;
  background:linear-gradient(180deg,rgba(233,200,126,.24),rgba(208,165,74,.12));
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 18px 40px -18px rgba(0,0,0,.55)}
.v8hub .btn-ghost{color:rgba(255,250,241,.82)}
.v8hub .btn-ghost::before{border-color:rgba(255,250,241,.4)}
.v8hub .btn-ghost::after{background:rgba(255,250,241,.55)}
/* on the cream light band, shift the glass CTA to green so it still reads */
.v8hub .lightband .btn{color:var(--green,#00603A)}
.v8hub .lightband .btn::before{border-color:rgba(0,96,58,.5)}
.v8hub .lightband .btn::after{background:rgba(0,96,58,.55)}
.v8hub .lightband .btn:hover,.v8hub .lightband .btn:focus-visible{color:var(--green-deep,#003D24);
  background:linear-gradient(180deg,rgba(0,96,58,.12),rgba(0,96,58,.04))}
@media (prefers-reduced-motion:reduce){
  .v8hub .btn::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);opacity:0;transition:opacity .18s ease}
  .v8hub .btn:hover::before,.v8hub .btn:focus-visible::before{opacity:1}
  .v8hub .btn:hover,.v8hub .btn:focus-visible{transform:none}
}
.v8hub .container{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.v8hub .section{padding:110px 0;position:relative}

/* scroll reveal — bulletproof: visible unless JS hides it, plus failsafe in the component.
   Keyed on a .v8hub-js root flag that is separate from the homepage's .v8-js,
   so the two reveal systems never interfere. */
html:not(.v8hub-js) .v8hub .reveal{opacity:1;transform:none}
.v8hub-js .v8hub .reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)}
.v8hub-js .v8hub .reveal.in{opacity:1;transform:none}

/* HERO planning card — premium glass with gold hairlines.
   Replaces the old browser-chrome "device" mockup, which read as SaaS
   software rather than a wedding. Mirrors the site-wide HubStrip card. */
.v8hub .plan-card{position:relative;border-radius:24px;padding:24px 26px 26px;text-align:left;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);overflow:hidden}
.v8hub .plan-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.14),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 55%)}
.v8hub .plan-card>*{position:relative;z-index:1}
.v8hub .pc-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.v8hub .pc-couple{font-family:var(--font-display);color:var(--cream);font-size:var(--fs-lead)}
.v8hub .pc-live{margin-left:auto;font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;color:var(--gold-light);border:1px solid var(--gold-soft);border-radius:100px;padding:3px 10px}
.v8hub .pc-meta{font-family:var(--font-label);font-size:var(--fs-label);color:rgba(255,250,241,.58);letter-spacing:.04em;margin-bottom:18px}
.v8hub .pc-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-bottom:9px;
  background:rgba(255,250,241,.06);border:1px solid var(--rule-light);font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.9)}
.v8hub .pc-row .pc-label{flex:1}
.v8hub .pc-row b{color:var(--gold-light);font-family:var(--font-label);font-weight:600}
.v8hub .pc-tick{width:20px;height:20px;border-radius:50%;flex:0 0 20px;background:linear-gradient(135deg,#E9C87E,#D0A54A);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-label);font-weight:700}
.v8hub .pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.v8hub .pc-chip{font-family:var(--font-label);font-size:var(--fs-label);font-weight:600;color:var(--gold-light);background:rgba(208,165,74,.12);border:1px solid var(--gold-soft);padding:6px 12px;border-radius:100px}

/* HERO — Hub as a product */
.v8hub .hero{padding:150px 0 90px;text-align:center;overflow:hidden}
.v8hub .hero .eyebrow{margin-bottom:18px}
.v8hub .hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:1;color:var(--cream)}
.v8hub .hero h1 .script{display:block;color:var(--gold-light);font-size:clamp(2.4rem,4.6vw,3.6rem);margin-top:.06em}
.v8hub .hero p{max-width:50ch;margin:24px auto 30px;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-lead)}
.v8hub .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}
.v8hub .hero-stage{position:relative;max-width:520px;margin:0 auto;padding:0 20px}
.v8hub .hero-stage::before{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:88%;height:78%;background:radial-gradient(closest-side,rgba(208,165,74,.42),transparent 74%);filter:blur(48px);z-index:0}
.v8hub .hero-stage .plan-card{z-index:1}

/* THE SHIFT */
.v8hub .shift{padding:60px 0 30px;text-align:center}
.v8hub .shift .container{max-width:840px}
.v8hub .shift .before{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,1.95rem);color:rgba(255,250,241,.55);line-height:1.4}
.v8hub .shift .after{font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--cream);line-height:1.3;margin-top:14px}
.v8hub .shift .after .script{color:var(--gold-light)}

/* BENTO over full image */
.v8hub .bento-sec{padding:90px 0 110px}
.v8hub .bento-stage{position:relative;border-radius:30px;overflow:hidden;padding:30px;margin:40px 0 0}
.v8hub .bento-stage>.bimg{position:absolute;inset:0;background:url('/v8/ap-colour.jpg') center/cover;}
.v8hub .bento-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,40,24,.78),rgba(15,21,18,.86))}
.v8hub .bento{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:16px}
.v8hub .tile{background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);border-radius:20px;padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.v8hub .tile::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.16),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.14),transparent 55%)}
.v8hub .tile>*{position:relative;z-index:1}
.v8hub .tile .tnum{font-family:var(--font-label);font-size:var(--fs-label);color:var(--gold-light);letter-spacing:.04em;margin-bottom:8px}
.v8hub .tile h3{color:var(--cream);font-size:1.4rem;margin-bottom:6px;line-height:1.1}
.v8hub .tile p{font-size:var(--fs-meta);color:rgba(255,250,241,.82);font-weight:300}
.v8hub .tile .so{margin-top:auto;font-family:var(--font-display);color:var(--gold-light);font-size:var(--fs-body);padding-top:12px}
/* tile spans */
.v8hub .t-timeline{grid-column:span 4;grid-row:span 2}
.v8hub .t-shot{grid-column:span 2;grid-row:span 2}
.v8hub .t-mood{grid-column:span 2}
.v8hub .t-msg{grid-column:span 2}
.v8hub .t-gallery{grid-column:span 2}
.v8hub .t-wide{grid-column:span 6}
/* tile visuals */
.v8hub .tv-time{display:grid;gap:0;margin-top:12px}
.v8hub .tv-time div{display:flex;justify-content:space-between;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.9);padding:8px 0;border-bottom:1px solid rgba(255,250,241,.14)}
.v8hub .tv-time b{color:var(--gold-light)}
.v8hub .tv-shot{display:grid;gap:7px;margin-top:10px}
.v8hub .tv-shot div{display:flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.92)}
.v8hub .tv-shot .ck{width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label);flex:0 0 auto}
.v8hub .tv-shot .ck.o{background:transparent;border:1px solid rgba(255,250,241,.4);color:transparent}
.v8hub .tv-mood{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.v8hub .tv-mood div{aspect-ratio:1;border-radius:7px;background-size:cover;background-position:center}
.v8hub .tv-msg{margin-top:8px}
.v8hub .tv-msg .b{font-family:var(--font-label);font-size:var(--fs-label);background:rgba(255,250,241,.16);padding:8px 11px;border-radius:10px;margin-bottom:6px;max-width:88%}
.v8hub .tv-msg .b.them{background:var(--gold);color:var(--ink);margin-left:auto}

/* JOURNEY — connected line */
.v8hub .journey{padding:30px 0 100px;text-align:center}
.v8hub .jline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1100px;margin:50px auto 0}
.v8hub .jline::before{content:"";position:absolute;top:24px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.v8hub .jnode{position:relative;padding:0 14px}
.v8hub .jnode .jn{width:48px;height:48px;border-radius:50%;background:var(--green-deep);border:1px solid var(--gold);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--fs-lead);margin:0 auto 16px;position:relative;z-index:1}
.v8hub .jnode h4{color:var(--cream);font-size:var(--fs-lead);margin-bottom:5px}
.v8hub .jnode p{font-size:var(--fs-meta);color:rgba(255,250,241,.7)}

/* TESTIMONIAL + FINAL */
.v8hub .htesti{padding:100px 0;text-align:center}
.v8hub .htesti .container{max-width:820px}
.v8hub .htq{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.2rem);color:var(--cream);line-height:1.4}
.v8hub .htq em{font-family:var(--font-script);font-style:normal;color:var(--gold-light)}
.v8hub .htw{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.6);margin-top:18px}
.v8hub .hfinal{padding:40px 0 130px;text-align:center}
.v8hub .hfinal .panel{max-width:880px;margin:0 auto;padding:60px 48px;border-radius:28px;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);box-shadow:var(--gshadow);position:relative;overflow:hidden}
.v8hub .hfinal .panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(208,165,74,.2),transparent 60%);pointer-events:none}
.v8hub .hfinal h2 .script{display:block;color:var(--gold-light);font-size:clamp(2rem,4vw,3rem)}
.v8hub .hfinal p{margin:16px auto 28px;color:rgba(255,250,241,.82);font-weight:300;max-width:46ch;position:relative}
.v8hub .hfinal .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ============================================================
   NEW SECTIONS — ported from mockup-wedding-hub-page-v3-shareable.html.
   Sign / pay / secure feature rows, the honest comparison, and the
   reassurance FAQ. Every selector stays scoped under .v8hub so the
   dark-glass theme never leaks past this page.
   ============================================================ */

/* shared section heading */
.v8hub .sec-head{text-align:center;max-width:760px;margin:0 auto 56px}
.v8hub .sec-head h2{margin-top:10px}
.v8hub .sec-head p{margin:16px auto 0;color:rgba(255,250,241,.78);font-weight:300;font-size:var(--fs-body);max-width:58ch}

/* EVERYTHING HANDLED — clean glass benefit cards (no fake software UI) */
.v8hub .handled{padding:46px 0}
.v8hub .handled .container{max-width:1180px}
.v8hub .hcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.v8hub .hcard{background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);border-radius:22px;padding:34px 30px;position:relative;overflow:hidden}
.v8hub .hcard::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.14),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 55%)}
.v8hub .hcard>*{position:relative;z-index:1}
.v8hub .hcard .hic{width:46px;height:46px;border-radius:13px;background:rgba(208,165,74,.14);border:1px solid var(--gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.v8hub .hcard .hic svg{width:22px;height:22px;stroke:var(--gold-light);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v8hub .hcard h3{color:var(--cream);font-size:1.4rem;line-height:1.14;margin-bottom:12px}
.v8hub .hcard h3 .script{color:var(--gold-light)}
.v8hub .hcard p{font-size:var(--fs-meta);color:rgba(255,250,241,.8);font-weight:300;line-height:1.6}
.v8hub .hcard .hpoints{list-style:none;margin-top:18px;display:grid;gap:11px}
.v8hub .hcard .hpoints li{position:relative;padding-left:22px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.86);line-height:1.5}
.v8hub .hcard .hpoints li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(208,165,74,.16)}

/* COMPARISON — two columns, glass+gold on the Hub side only */
.v8hub .compare{padding:100px 0}
.v8hub .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:0 auto;align-items:stretch}
.v8hub .cmp-col{border-radius:24px;padding:34px 32px;position:relative;overflow:hidden}
.v8hub .cmp-col.old{background:rgba(255,250,241,.04);border:1px solid var(--rule-light)}
.v8hub .cmp-col.new{background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .cmp-col.new::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 100% 0,rgba(208,165,74,.16),transparent 55%)}
.v8hub .cmp-col>*{position:relative;z-index:1}
.v8hub .cmp-col .cmp-tag{font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-block;margin-bottom:6px}
.v8hub .cmp-col.old .cmp-tag{color:rgba(255,250,241,.5)}
.v8hub .cmp-col.new .cmp-tag{color:var(--gold)}
.v8hub .cmp-col h3{font-family:var(--font-display);font-size:1.55rem;line-height:1.15;margin-bottom:20px}
.v8hub .cmp-col.old h3{color:rgba(255,250,241,.72)}
.v8hub .cmp-col.new h3{color:var(--cream)}
.v8hub .cmp-col.new h3 .script{color:var(--gold-light)}
.v8hub .cmp-list{list-style:none;display:grid;gap:13px}
.v8hub .cmp-list li{display:flex;gap:13px;align-items:flex-start;font-family:var(--font-label);font-size:var(--fs-meta);line-height:1.45}
.v8hub .cmp-col.old .cmp-list li{color:rgba(255,250,241,.62)}
.v8hub .cmp-col.new .cmp-list li{color:rgba(255,250,241,.92)}
.v8hub .cmp-ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-meta);margin-top:1px}
.v8hub .cmp-col.old .cmp-ic{background:rgba(255,250,241,.08);color:rgba(255,250,241,.5)}
.v8hub .cmp-col.new .cmp-ic{background:rgba(208,165,74,.18);border:1px solid var(--gold-soft);color:var(--gold-light)}
.v8hub .cmp-foot{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,250,241,.12);font-family:var(--font-display);font-size:var(--fs-body)}
.v8hub .cmp-col.old .cmp-foot{color:rgba(255,250,241,.5)}
.v8hub .cmp-col.new .cmp-foot{color:var(--gold-light)}

/* FAQ — glass accordions (native details/summary, keyboard-accessible, no JS) */
.v8hub .faq{padding:100px 0 110px}
/* Clean, simple questions (the Packages style): hairline dividers, a serif
   question and the answer always shown. No glass card, no toggle icon. Shared
   by every page with questions, so they all look the same. */
.v8hub .faq-wrap{max-width:840px;margin:0 auto;display:grid;gap:0}
.v8hub .faq-item{background:none;border:none;border-top:1px solid var(--glass-brd);border-radius:0;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none}
.v8hub .faq-item summary{list-style:none;cursor:default;padding:26px 0 0;display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);color:var(--cream)}
.v8hub .faq-item summary::-webkit-details-marker{display:none}
.v8hub .faq-item .q-ic{display:none}
.v8hub .faq-item .faq-a{display:block;padding:12px 0 26px;font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);line-height:1.7;color:rgba(255,250,241,.8);max-width:none}

/* Geo/location pages carry their own inline FAQ accordion styles; override them
   with higher specificity (.faq-list .faq-item) so those pages match the clean
   style too. Answer is a <p>, and the toggle is a summary::after "+". */
.v8hub .faq-list{gap:0}
.v8hub .faq-list .faq-item{background:none;border:none;border-top:1px solid var(--glass-brd);border-radius:0;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none}
.v8hub .faq-list .faq-item summary{cursor:default;padding:26px 0 0;display:block;font-weight:400}
.v8hub .faq-list .faq-item summary::after{display:none}
.v8hub .faq-list .faq-item p{display:block;padding:12px 0 26px;max-width:none}
.v8hub .faq-note{text-align:center;margin-top:30px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.6)}
.v8hub .faq-note a{color:var(--gold-light);border-bottom:1px solid var(--gold-soft)}

/* ============================================================
   HEADER dark-frost override — minimal, scoped to this page only.
   The shared PublicHeader's scrolled state uses a light cream frost
   with green links (correct over the cream homepage). On this dark
   page that reads wrong, so when body.v8hub-page is set we swap the
   scrolled header to a dark frost with cream links. Unscrolled state
   already sits fine over the dark hero (cream links), so it's left be.
   ============================================================ */
body.v8hub-page .v8-header.scrolled{background:rgba(15,21,18,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--rule-light, rgba(255,250,241,.16))}
body.v8hub-page .v8-header.scrolled nav a{color:var(--cream, #FFFAF1)}
body.v8hub-page .v8-header.scrolled nav a:hover{color:var(--gold, #D0A54A)}
body.v8hub-page .v8-header.scrolled .nav-login{border-color:var(--gold, #D0A54A);color:var(--gold, #D0A54A)}
body.v8hub-page .v8-header.scrolled .nav-login:hover{background:var(--gold, #D0A54A);border-color:var(--gold, #D0A54A);color:var(--ink, #0F1512)}
body.v8hub-page .v8-header.scrolled .v8-burger{color:var(--cream, #FFFAF1)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .v8hub .section,.v8hub .bento-sec,.v8hub .journey,.v8hub .handled,.v8hub .htesti,.v8hub .hfinal,.v8hub .compare,.v8hub .faq{padding:64px 0}.v8hub .hero{padding:120px 0 70px}
  .v8hub .container{padding:0 20px}
  .v8hub .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .v8hub .t-timeline,.v8hub .t-shot,.v8hub .t-mood,.v8hub .t-msg,.v8hub .t-gallery,.v8hub .t-wide{grid-column:span 2;grid-row:auto}
  .v8hub .jline{grid-template-columns:1fr 1fr;gap:28px 0}.v8hub .jline::before{display:none}
  .v8hub .hcards{grid-template-columns:1fr;gap:16px}
  .v8hub .cmp-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .v8hub .reveal{opacity:1;transform:none}
  .v8hub *{animation:none}
}

/* lock the page background dark so there is no white on overscroll */
body.v8hub-page{background:#0F1512}
/* ============================================================
   RMG dark-glass CONTENT system — REUSABLE
   ------------------------------------------------------------
   This is the shared dark-glass content layer for the public
   site. It is the "proof" file that the Real Weddings page
   establishes and that About, Areas, Values, Events, Packages,
   FAQ and the galleries will adopt next.

   It is deliberately GENERIC. Class names describe what a thing
   IS (a content hero, a feature testimonial, a story row, a film
   card, a pull quote, an enquiry card), never "real-weddings".
   Reuse these on any dark page.

   It does NOT redefine tokens, .btn, .glass, .reveal, .container,
   .eyebrow, .script, .lead, .sec-head, .panel-glass or any base
   helper. Those all live in hub.css and are reused verbatim.
   Everything here is scoped under .v8hub so the dark theme can
   never leak into the homepage (.v8), the portal, the CRM /
   dashboard, or any other page. Google Fonts are already loaded
   in index.html, so nothing font-related is imported here.
   ============================================================ */

/* ============================================================
   CONTENT HERO  (.dhero)
   A tall, image-backed hero that sits inside the .v8hub dark
   field. The hub already paints a dark bg-field behind the page;
   the hero lays a real photo over it with a deep green→ink scrim
   so cream type and the gold script always read. Reusable on any
   content page that opens with a single full-width image.
   ============================================================ */
.v8hub .dhero{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;padding:150px 0 60px}
.v8hub .dhero.tall{min-height:74vh}
.v8hub .dhero .dhero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.v8hub .dhero::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(15,21,18,.34),rgba(0,40,24,.5) 46%,rgba(15,21,18,.92)),
  radial-gradient(70% 60% at 18% 100%,rgba(0,96,58,.45),transparent 70%)}
.v8hub .dhero-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 40px;color:var(--cream)}
.v8hub .dhero .eyebrow{margin-bottom:16px}
.v8hub .dhero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.98;color:var(--cream);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.v8hub .dhero h1 .script{color:var(--gold-light);font-size:.64em}
.v8hub .dhero p{font-size:var(--fs-lead);color:rgba(255,250,241,.9);font-weight:300;margin:18px 0 0;max-width:52ch}

/* ============================================================
   CONTENT SECTION HEADER  (.sec-top)
   A left-aligned section intro for dark content sections. The
   centred .sec-head already exists in hub.css for the Hub page;
   .sec-top is the left-aligned sibling for editorial content.
   ============================================================ */
.v8hub .content-sec{padding:clamp(80px,7vw,128px) 0;position:relative}
.v8hub .sec-top{max-width:680px;margin-bottom:48px}
.v8hub .sec-top .eyebrow{margin-bottom:12px}
.v8hub .sec-top h2 .script{display:block;font-size:clamp(2rem,3.6vw,2.6rem);margin-bottom:-2px}
.v8hub .sec-top p{color:rgba(255,250,241,.78);font-size:var(--fs-body);font-weight:300;margin-top:14px;max-width:60ch}

/* Two-column editorial layout for text-led sections (the E-E-A-T opener and
   the primary-service prose on the geo pages). The heading sits in a left
   rail and the body prose fills the right column, so the section width is
   used with intent instead of leaving a dead dark half. Targets ONLY the
   sections that contain a .prose-dark block (the 8 geo pages); the
   case-study, FAQ and link sections are untouched. Any .spec-card that
   follows the prose spans the full width beneath it. */
.v8hub .content-sec .container:has(> .prose-dark){
  display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);
  -moz-column-gap:64px;
       column-gap:64px;row-gap:28px;align-items:start}
.v8hub .content-sec .container:has(> .prose-dark) > .sec-top{margin-bottom:0;position:sticky;top:110px}
.v8hub .content-sec .container:has(> .prose-dark) > .prose-dark{max-width:70ch}
.v8hub .content-sec .container:has(> .prose-dark) > .spec-card{grid-column:1 / -1;margin-top:8px}

/* ============================================================
   FEATURE TESTIMONIAL  (.dtesti / .tfeature / .tcard)
   One hero review given the most weight (photo beside quote in
   a frosted glass panel with a gold bloom), plus a row of
   clearly-marked placeholder cards for "in their words" blocks.
   ============================================================ */
.v8hub .dtesti{padding:96px 0 60px}

/* the one real, hero review — compact frosted glass feature panel,
   photo in a rounded media well on the left, quote beside it */
.v8hub .tfeature{position:relative;border-radius:24px;overflow:hidden;max-width:1060px;margin:0 auto 26px;padding:42px;
  display:grid;grid-template-columns:minmax(0,336px) minmax(0,1fr);gap:44px;align-items:center;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .tfeature::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.14),transparent 45%),
  radial-gradient(circle at 100% 0,rgba(208,165,74,.2),transparent 58%)}
.v8hub .tfeature::after{content:"";position:absolute;top:-150px;right:-110px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(208,165,74,.22),transparent 65%);pointer-events:none}
.v8hub .tfeature>*{position:relative;z-index:1}
.v8hub .tfeature .tf-media{border-radius:16px;overflow:hidden;aspect-ratio:4/5;max-height:420px}
.v8hub .tfeature .tf-media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.v8hub .tfeature .quote-mark{font-family:var(--font-display);font-size:2.5rem;line-height:.6;color:var(--gold-light);opacity:.7;height:22px;display:block}
.v8hub .tfeature .stars{display:flex;gap:5px;margin:10px 0 14px;color:var(--gold-light)}
.v8hub .tfeature .stars svg{width:16px;height:16px;fill:var(--gold-light)}
.v8hub .tfeature blockquote{font-family:var(--font-body);font-size:var(--fs-lead);line-height:1.7;color:var(--cream);max-width:58ch}
.v8hub .tfeature .attrib{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.04em;color:rgba(255,250,241,.78);margin-top:18px}
.v8hub .tfeature .attrib b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);letter-spacing:0;color:var(--gold-light);display:block;margin-bottom:2px}
.v8hub .tfeature .tf-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.v8hub .tfeature .tf-links a{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em;color:var(--gold-light);
  text-decoration:none;border-bottom:1px solid var(--gold-soft);padding-bottom:2px;transition:border-color .25s ease,color .25s ease}
.v8hub .tfeature .tf-links a:hover{border-bottom-color:var(--gold-light);color:var(--cream)}

/* secondary review row */
.v8hub .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.v8hub .tcard{background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:34px 32px;display:flex;flex-direction:column;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);position:relative;overflow:hidden}
.v8hub .tcard .stars{display:flex;gap:5px;margin-bottom:16px}
.v8hub .tcard .stars svg{width:17px;height:17px;fill:var(--gold-light)}
.v8hub .tcard p{font-family:var(--font-display);font-size:var(--fs-lead);color:var(--cream);line-height:1.5}
.v8hub .tcard .attrib{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.04em;color:rgba(255,250,241,.7);margin-top:18px}

/* placeholder treatment — clearly marked, never reads like a real review.
   Gold hairline dashed frame over a faint glass tint. */
.v8hub .tcard.placeholder{align-items:center;justify-content:center;text-align:center;min-height:180px;
  background:rgba(255,250,241,.04);border:1.5px dashed var(--gold-soft);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.v8hub .tcard.placeholder .ph-label{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;letter-spacing:.04em;color:var(--gold-light)}
.v8hub .tcard.placeholder .ph-sub{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.6);margin-top:8px;letter-spacing:.02em}

/* ============================================================
   STORY / CASE-STUDY ROW  (.story + .story.flip)
   Alternating image + glass copy panel. The image sits in a
   rounded media well, the copy in a frosted glass panel beside
   it. `.flip` mirrors the order. `.story-media.duo` stacks two
   photos. Reusable for any image-led editorial block.
   ============================================================ */
.v8hub .stories{padding:60px 0}
.v8hub .story{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;margin-bottom:30px;align-items:stretch}
.v8hub .story.flip{grid-template-columns:1fr 1.1fr}
.v8hub .story.flip .story-media{order:2}

/* media well */
.v8hub .story-media{position:relative;min-height:440px;border-radius:24px;overflow:hidden;
  border:1px solid var(--rule-light);box-shadow:0 30px 80px -34px rgba(0,0,0,.7)}
.v8hub .story-media .smimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s var(--ease)}
.v8hub .story:hover .story-media .smimg{transform:scale(1.05)}
.v8hub .story-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,40,24,.55))}
/* dual-image stack */
.v8hub .story-media.duo{display:grid;grid-template-rows:1fr 1fr;gap:4px}
.v8hub .story-media.duo .smimg{position:relative;inset:auto;min-height:0}
/* play button over the media */
.v8hub .story-media .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  border:1.5px solid var(--cream);background:rgba(255,250,241,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);z-index:3}
.v8hub .story-media .play:hover{background:var(--gold);border-color:var(--gold);transform:translate(-50%,-50%) scale(1.08)}
.v8hub .story-media .play svg{width:26px;height:26px;fill:var(--cream);margin-left:3px}
.v8hub .story-media .play:hover svg{fill:var(--ink)}

/* glass copy panel */
.v8hub .story-copy{position:relative;overflow:hidden;border-radius:24px;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .story-copy::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 100% 0,rgba(208,165,74,.14),transparent 55%),radial-gradient(circle at 0 100%,rgba(255,255,255,.08),transparent 50%)}
.v8hub .story-copy>*{position:relative;z-index:1}
.v8hub .story-copy .pkgtag{font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;color:var(--gold-light);
  background:rgba(208,165,74,.16);border:1px solid var(--gold-soft);align-self:flex-start;padding:5px 13px;border-radius:100px;margin-bottom:14px}
.v8hub .story-copy h3{font-family:var(--font-display);font-size:2rem;color:var(--cream);line-height:1.1}
.v8hub .story-copy h3 .script{color:var(--gold-light);font-size:1.3em}
.v8hub .story-copy .venue{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.04em;color:rgba(255,250,241,.66);margin:4px 0 14px}
.v8hub .story-copy p{color:rgba(255,250,241,.82);font-weight:300}
.v8hub .story-copy .links{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* outline buttons used inside story/film copy (dark-glass variant of .btn-out) */
.v8hub .btn-out{border-color:rgba(255,250,241,.45);color:var(--cream);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.v8hub .btn-out:hover{background:rgba(255,250,241,.12);border-color:var(--cream)}
.v8hub .btn-film{border-color:var(--gold-soft);color:var(--gold-light)}
.v8hub .btn-film:hover{background:rgba(208,165,74,.16);border-color:var(--gold-light);color:var(--gold-light)}

/* ============================================================
   PULL QUOTE  (.pull)
   In-flow gold-hairline pull quote for use inside story copy or
   any prose block. Reusable anywhere a short emphasised quote is
   needed on a dark panel.
   ============================================================ */
.v8hub .pull{position:relative;border-left:2px solid var(--gold);padding:4px 0 4px 18px;margin:18px 0 4px;
  font-family:var(--font-display);font-size:var(--fs-body);line-height:1.5;color:var(--cream)}
.v8hub .pull cite{display:block;font-family:var(--font-label);font-style:normal;font-size:var(--fs-meta);letter-spacing:.04em;color:var(--gold-light);margin-top:8px}

/* ============================================================
   FILM CARDS  (.films / .filmcard)
   Image-backed cards with a play chip and a green→ink scrim, soft
   glow on hover. Reusable for any "watch it back" / video grid.
   ============================================================ */
.v8hub .films{padding:80px 0}

/* ============================================================
   LIGHT-BAND — one warm cream section inside the dark theme, for
   contrast and air. Add class "lightband" to any section. Child
   type colours flip to green/dark so they read on cream.
   ============================================================ */
.v8hub .lightband{background:var(--cream,#FFFAF1);color:#20241F;position:relative}
.v8hub .lightband::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(208,165,74,.34),transparent)}
.v8hub .lightband .eyebrow{color:var(--green,#00603A)}
.v8hub .lightband h1,.v8hub .lightband h2,.v8hub .lightband h3{color:var(--green-deep,#003D24)}
.v8hub .lightband p,.v8hub .lightband .lead,.v8hub .lightband .sec-top p{color:#5A5E52}
.v8hub .lightband .script{color:var(--gold-deep,#A8842F)}
.v8hub .films .container{position:relative}
.v8hub .films-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.v8hub .filmcard{position:relative;border-radius:18px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;padding:28px;color:var(--cream);
  border:1px solid var(--rule-light);box-shadow:0 24px 60px -34px rgba(0,0,0,.7);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.v8hub .filmcard .fcbg{position:absolute;inset:0;background-size:cover;background-position:center;transition:.8s var(--ease)}
.v8hub .filmcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 28%,rgba(0,40,24,.9))}
.v8hub .filmcard:hover{transform:translateY(-4px);box-shadow:0 36px 80px -30px rgba(208,165,74,.4)}
.v8hub .filmcard:hover .fcbg{transform:scale(1.06)}
.v8hub .filmcard>*{position:relative;z-index:2}
.v8hub .filmcard .fcplay{position:absolute;top:24px;right:24px;width:50px;height:50px;border-radius:50%;
  border:1.5px solid var(--cream);background:rgba(255,250,241,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.v8hub .filmcard:hover .fcplay{background:var(--gold);border-color:var(--gold)}
.v8hub .filmcard .fcplay svg{width:18px;height:18px;fill:var(--cream);margin-left:2px}
.v8hub .filmcard:hover .fcplay svg{fill:var(--ink)}
.v8hub .filmcard h4{font-family:var(--font-display);font-size:1.5rem;color:var(--cream)}
.v8hub .filmcard .fcmeta{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.8);margin-top:4px}

/* ============================================================
   FINAL CTA + ENQUIRY FORM  (.dfinal / .enquiry)
   A centred CTA card over a real photo with a deep scrim, then a
   dark-glass enquiry form card beneath it. The form card itself is
   a frosted glass panel with dark inputs and a gold focus ring, so
   it stays in the dark family rather than dropping a white box in.
   Reusable for any page that ends on a contact form.
   ============================================================ */
.v8hub .dfinal{padding:110px 0;position:relative;overflow:hidden}
.v8hub .dfinal.center{text-align:center}
.v8hub .dfinal .stage{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.v8hub .dfinal::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,21,18,.78),rgba(0,40,24,.9)),radial-gradient(60% 50% at 50% 0,rgba(208,165,74,.16),transparent 65%)}
.v8hub .dfinal .container{position:relative;z-index:2}
.v8hub .dfinal .card{max-width:720px;margin:0 auto;color:var(--cream)}
.v8hub .dfinal h2{color:var(--cream)}
.v8hub .dfinal h2 .script{color:var(--gold-light);display:block}
.v8hub .dfinal p{color:rgba(255,250,241,.86);font-weight:300;margin:16px auto 0;max-width:44ch}

/* enquiry form — frosted glass card with dark fields */
.v8hub .enquiry{max-width:720px;margin:30px auto 0;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
/* Restore the shared enquiry-form card's own width + padding (the .v8hub *
   reset zeroes its base padding). */
.v8hub .enquiry .enqf{width:100%;max-width:640px;padding:clamp(24px,4vw,44px)}
.v8hub .enquiry .formcard{position:relative;overflow:hidden;border-radius:22px;padding:32px;
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .enquiry .formcard::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.1),transparent 55%)}
.v8hub .enquiry .formcard>*{position:relative;z-index:1}
.v8hub .enquiry .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.v8hub .enquiry label{display:block;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em;color:rgba(255,250,241,.78);margin-bottom:6px}
.v8hub .enquiry input,.v8hub .enquiry textarea{width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--cream);
  background:rgba(255,250,241,.06);border:1px solid var(--rule-light);border-radius:12px;padding:13px 15px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.v8hub .enquiry input::-moz-placeholder, .v8hub .enquiry textarea::-moz-placeholder{color:rgba(255,250,241,.4)}
.v8hub .enquiry input::placeholder,.v8hub .enquiry textarea::placeholder{color:rgba(255,250,241,.4)}
.v8hub .enquiry input:focus,.v8hub .enquiry textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,250,241,.1)}
/* native date picker indicator stays visible on the dark field */
.v8hub .enquiry input[type="date"]{color-scheme:dark}
.v8hub .enquiry textarea{resize:none;margin-bottom:16px}
.v8hub .enquiry .submit-row{text-align:center}
.v8hub .enquiry .formnote{margin-top:14px;font-family:var(--font-label);font-size:var(--fs-meta);text-align:center}
.v8hub .enquiry .formnote.ok{color:var(--gold-light)}
.v8hub .enquiry .formnote.err{color:#ff9a8f}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .v8hub .dhero,.v8hub .dhero.tall{padding:120px 0 44px;min-height:auto}
  .v8hub .dhero-in{padding:0 20px}
  .v8hub .content-sec{padding:64px 0}
  .v8hub .content-sec .container:has(> .prose-dark){grid-template-columns:1fr;row-gap:20px}
  .v8hub .content-sec .container:has(> .prose-dark) > .prose-dark{max-width:64ch}
  .v8hub .dtesti{padding:60px 0 40px}
  .v8hub .tfeature{grid-template-columns:1fr;gap:24px;padding:28px}
  .v8hub .tfeature .tf-media{width:100%;aspect-ratio:16/10;max-height:260px}
  .v8hub .tgrid{grid-template-columns:1fr;gap:18px}
  .v8hub .stories{padding:40px 0}
  .v8hub .story,.v8hub .story.flip{grid-template-columns:1fr;gap:16px}
  .v8hub .story.flip .story-media,.v8hub .story-media{order:0;min-height:300px}
  .v8hub .story-media.duo{grid-template-rows:1fr 1fr;min-height:360px}
  .v8hub .story-copy{padding:34px 26px}
  .v8hub .films{padding:60px 0}
  .v8hub .films-grid{grid-template-columns:1fr}
  .v8hub .dfinal{padding:70px 0}
  .v8hub .enquiry .frow{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .v8hub .reveal{opacity:1;transform:none}
  .v8hub *{animation:none!important;transition:none!important}
}

/* Enquiry form submit button: use the site glass border-draw pill, not the
   old solid gold fill. Scoped to the v8hub enquiry forms (Events, FAQ, geo). */
.v8hub .enquiry .enqf-btn{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:15px 40px !important;border-radius:100px !important;border:1px solid transparent !important;
  background:transparent !important;color:#F0D9A0 !important;width:auto !important;
  font-family:var(--font-label) !important;font-size:var(--fs-meta) !important;letter-spacing:.22em !important;text-transform:uppercase !important;font-weight:700 !important;
  isolation:isolate;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1),background .25s ease;
}
.v8hub .enquiry .enqf-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(233,200,126,.6);background:transparent;clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;z-index:0}
.v8hub .enquiry .enqf-btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.6);pointer-events:none;z-index:1;opacity:1;transition:opacity .12s linear 0s}
.v8hub .enquiry .enqf-btn span{position:relative;z-index:2}
.v8hub .enquiry .enqf-btn:hover:not(:disabled),.v8hub .enquiry .enqf-btn:focus-visible:not(:disabled){color:#FFF5D6 !important;transform:scale(1.015);outline:none;background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1)) !important}
.v8hub .enquiry .enqf-btn:hover:not(:disabled)::before,.v8hub .enquiry .enqf-btn:focus-visible:not(:disabled)::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.v8hub .enquiry .enqf-btn:hover:not(:disabled)::after,.v8hub .enquiry .enqf-btn:focus-visible:not(:disabled)::after{opacity:0;transition-delay:.26s}

/* Centred hero variant: content centred both axes, at the core-page height and
   content width. Shared by the v8hub pages that opt in with .dhero-center
   (Events, FAQ). The plain .dhero (Values) is untouched. */
.v8hub .dhero.dhero-center{align-items:center;justify-content:center;text-align:center;min-height:92vh;padding:130px 0 90px}
.v8hub .dhero.dhero-center .dhero-in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1180px}
.v8hub .dhero.dhero-center .dhero-in p{margin-left:auto;margin-right:auto}
/* ============================================================
   RMG dark-glass, page-specific bits for About, Values, Events
   ------------------------------------------------------------
   This file ONLY holds the markup pieces that the shared
   dark-glass layers (hub.css + dark-content.css) do not already
   cover: the About story two-up, the "two as one" people panel,
   the kit grid, the values stack, the occasion chips, the
   services grid and the area-link lists.

   It deliberately does NOT redefine any token, .btn, .glass,
   .reveal, .container, .eyebrow, .script, .lead, .dhero,
   .content-sec, .sec-top, .dfinal, .enquiry, .formcard or any
   other helper. Those all live in hub.css / dark-content.css and
   are reused verbatim, so everything stays one family.

   EVERY selector is scoped under .v8hub so this dark theme can
   never leak into the homepage (.v8), the portal, the CRM /
   dashboard, or any other public page. Google Fonts are already
   loaded in index.html, so nothing font-related is imported here.
   It is built entirely from the hub.css tokens: frosted glass,
   gold hairline borders and gold script accents.
   ============================================================ */

/* ============================================================
   ABOUT, STORY TWO-UP  (.tstory)
   A rounded media well beside a frosted glass copy panel, the
   same DNA as dark-content.css .story but a calmer single image
   for the editorial "who we are" block.
   ============================================================ */
.v8hub .tstory{padding:96px 0}
.v8hub .tstory .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;align-items:stretch}
.v8hub .tstory .smedia{position:relative;min-height:460px;border-radius:24px;overflow:hidden;
  background-size:cover;background-position:center;
  border:1px solid var(--rule-light);box-shadow:0 30px 80px -34px rgba(0,0,0,.7)}
.v8hub .tstory .smedia::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,40,24,.5))}
.v8hub .tstory .scopy{position:relative;overflow:hidden;border-radius:24px;padding:48px 44px;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .tstory .scopy::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 100% 0,rgba(208,165,74,.14),transparent 55%),radial-gradient(circle at 0 100%,rgba(255,255,255,.08),transparent 50%)}
.v8hub .tstory .scopy>*{position:relative;z-index:1}
.v8hub .tstory .scopy .eyebrow{margin-bottom:12px}
.v8hub .tstory .scopy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08}
.v8hub .tstory .scopy h2 .script{display:block;font-size:clamp(1.9rem,3.2vw,2.5rem);margin-top:-2px}
.v8hub .tstory .scopy p{color:rgba(255,250,241,.82);font-weight:300;margin-top:16px}
.v8hub .tstory .scopy p+p{margin-top:14px}
.v8hub .tstory .scopy .sig{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-light);
  font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.04em;color:rgba(255,250,241,.7)}
.v8hub .tstory .scopy .sig b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-body);letter-spacing:0;color:var(--gold-light)}

/* ============================================================
   ABOUT, TWO AS ONE  (.twoone)
   A wide frosted glass panel holding the two team members side
   by side, each with a gold hairline divider.
   ============================================================ */
.v8hub .twoone{padding:30px 0 60px}
.v8hub .twoone .panel{position:relative;overflow:hidden;border-radius:28px;padding:56px 52px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .twoone .panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 55%)}
.v8hub .twoone .panel>*{position:relative;z-index:1}
.v8hub .twoone .eyebrow{margin-bottom:10px}
.v8hub .twoone h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08;margin-bottom:40px}
.v8hub .twoone h2 .script{color:var(--gold-light)}
.v8hub .twoone .who{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.v8hub .twoone .person{position:relative;padding-left:22px}
.v8hub .twoone .person::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--gold)}
.v8hub .twoone .person h3{font-family:var(--font-display);font-size:1.7rem;color:var(--cream);line-height:1.1}
.v8hub .twoone .person .role{font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:4px 0 12px}
.v8hub .twoone .person p{color:rgba(255,250,241,.8);font-weight:300}

/* ============================================================
   ABOUT, KIT GRID  (.kit)
   Four small frosted cards. The reassurance gear, not a brag.
   ============================================================ */
.v8hub .kit{padding:60px 0}
.v8hub .kit .top{max-width:640px;margin-bottom:40px}
.v8hub .kit .top .eyebrow{margin-bottom:12px}
.v8hub .kit .top h2 .script{color:var(--gold-light)}
.v8hub .kit .top p{color:rgba(255,250,241,.78);font-weight:300}
.v8hub .kit .kit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.v8hub .kit .kititem{position:relative;overflow:hidden;border-radius:18px;padding:28px 26px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.v8hub .kit .kititem::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.12),transparent 50%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.1),transparent 55%)}
.v8hub .kit .kititem>*{position:relative;z-index:1}
.v8hub .kit .kititem:hover{transform:translateY(-4px);box-shadow:0 36px 80px -30px rgba(208,165,74,.32)}
.v8hub .kit .kititem h4{font-family:var(--font-display);font-size:1.3rem;color:var(--cream);line-height:1.15;margin-bottom:8px}
.v8hub .kit .kititem p{font-size:var(--fs-meta);color:rgba(255,250,241,.8);font-weight:300}

/* ============================================================
   ABOUT, VALUES ROW  (.abvalues)
   The three-up "how we work" values that close the About story.
   Numbered, on a single frosted panel with gold numerals.
   ============================================================ */
.v8hub .abvalues{padding:60px 0 90px}
.v8hub .abvalues .panel{position:relative;overflow:hidden;border-radius:28px;padding:52px 48px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .abvalues .panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 100% 0,rgba(208,165,74,.14),transparent 55%)}
.v8hub .abvalues .panel>*{position:relative;z-index:1}
.v8hub .abvalues .top{margin-bottom:36px}
.v8hub .abvalues .top .eyebrow{margin-bottom:10px}
.v8hub .abvalues .top h2 .script{color:var(--gold-light)}
.v8hub .abvalues .vrow{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.v8hub .abvalues .value h4{font-family:var(--font-display);font-size:1.35rem;color:var(--cream);line-height:1.15;margin-bottom:10px;display:flex;align-items:baseline;gap:10px}
.v8hub .abvalues .value h4 span{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;letter-spacing:.06em;color:var(--gold)}
.v8hub .abvalues .value p{color:rgba(255,250,241,.8);font-weight:300}

/* ============================================================
   VALUES PAGE, LEAD-IN  (.vintro)
   A single large editorial line that opens the values list.
   ============================================================ */
.v8hub .vintro{padding:80px 0 30px}
.v8hub .vintro .container{max-width:860px}
.v8hub .vintro p{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.4;color:rgba(255,250,241,.9)}
.v8hub .vintro .script{color:var(--gold-light)}

/* ============================================================
   VALUES PAGE, VALUE STACK  (.vlist / .vcard)
   A stack of frosted rows, each with a big gold script numeral
   on the left and the value beside it.
   ============================================================ */
.v8hub .vlist{padding:30px 0 96px}
.v8hub .vlist .vstack{display:grid;gap:18px;max-width:980px;margin:0 auto}
.v8hub .vlist .vcard{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  border-radius:22px;padding:36px 38px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.v8hub .vlist .vcard::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.1),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.1),transparent 55%)}
.v8hub .vlist .vcard>*{position:relative;z-index:1}
.v8hub .vlist .vcard:hover{transform:translateY(-3px);box-shadow:0 36px 80px -30px rgba(208,165,74,.3)}
.v8hub .vlist .vcard .vnum{font-family:var(--font-script);font-size:3.4rem;line-height:.8;color:var(--gold-light)}
.v8hub .vlist .vcard h3{font-family:var(--font-display);font-size:1.55rem;color:var(--cream);line-height:1.1;margin-bottom:8px}
.v8hub .vlist .vcard p{color:rgba(255,250,241,.82);font-weight:300}

/* ============================================================
   EVENTS PAGE, LEAD-IN  (.eintro)
   Mirrors the values lead-in for one consistent family.
   ============================================================ */
.v8hub .eintro{padding:80px 0 30px}
.v8hub .eintro .container{max-width:860px}
.v8hub .eintro p{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.4;color:rgba(255,250,241,.9)}
.v8hub .eintro .script{color:var(--gold-light)}

/* ============================================================
   EVENTS PAGE, OCCASION CHIPS  (.occasions / .occ)
   Gold-hairline frosted pills for the occasion types.
   ============================================================ */
.v8hub .occasions{padding:70px 0 44px}
.v8hub .occasions .occ-head{max-width:760px;margin:0 auto 8px;text-align:center}
.v8hub .occasions .occ-head .eyebrow{margin-bottom:10px}
.v8hub .occasions .occ-head h2 .script{color:var(--gold-light)}
.v8hub .occasions .occ-lead{color:rgba(255,250,241,.8);font-weight:300;font-size:var(--fs-lead);line-height:1.6;margin:14px auto 22px;max-width:52ch}
.v8hub .occasions .occ-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.v8hub .occasions .occ{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.02em;color:var(--cream);
  background:rgba(255,250,241,.06);border:1px solid var(--gold-soft);border-radius:100px;padding:12px 22px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .25s var(--ease)}
.v8hub .occasions .occ:hover{background:rgba(208,165,74,.16);border-color:var(--gold-light);color:var(--gold-light)}

/* ============================================================
   EVENTS PAGE, SERVICES GRID  (.eservices / .svc)
   Three frosted service cards on one wide glass panel.
   ============================================================ */
.v8hub .eservices{padding:60px 0}
.v8hub .eservices .panel{position:relative;overflow:hidden;border-radius:28px;padding:52px 48px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .eservices .panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 100% 0,rgba(208,165,74,.14),transparent 55%)}
.v8hub .eservices .panel>*{position:relative;z-index:1}
.v8hub .eservices .top{margin-bottom:36px}
.v8hub .eservices .top .eyebrow{margin-bottom:10px}
.v8hub .eservices .top h2 .script{color:var(--gold-light)}
.v8hub .eservices .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.v8hub .eservices .svc{position:relative;padding-left:20px}
.v8hub .eservices .svc::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--gold)}
.v8hub .eservices .svc h4{font-family:var(--font-display);font-size:1.3rem;color:var(--cream);line-height:1.15;margin-bottom:8px}
.v8hub .eservices .svc p{color:rgba(255,250,241,.8);font-weight:300;font-size:var(--fs-body)}

/* ============================================================
   EVENTS PAGE, AREAS WE COVER  (.eareas / .area-card / .area-list)
   Two frosted columns of area links, gold hairline rows, gold
   hover. Each link points to its own geo route.
   ============================================================ */
.v8hub .eareas{padding:60px 0 96px}
.v8hub .eareas .top{max-width:640px;margin-bottom:34px}
.v8hub .eareas .top .eyebrow{margin-bottom:10px}
.v8hub .eareas .top h2 .script{color:var(--gold-light)}
.v8hub .eareas .area-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v8hub .eareas .area-card{position:relative;overflow:hidden;border-radius:22px;padding:34px 36px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.v8hub .eareas .area-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 100% 0,rgba(208,165,74,.12),transparent 55%)}
.v8hub .eareas .area-card>*{position:relative;z-index:1}
.v8hub .eareas .area-card h3{font-family:var(--font-display);font-size:1.4rem;color:var(--gold-light);line-height:1.1;margin-bottom:18px}
.v8hub .eareas .area-list{list-style:none;display:grid;gap:2px}
.v8hub .eareas .area-list li{border-bottom:1px solid var(--rule-light)}
.v8hub .eareas .area-list li:last-child{border-bottom:none}
.v8hub .eareas .area-list a{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.86);padding:14px 4px;transition:all .2s var(--ease)}
.v8hub .eareas .area-list a::after{content:"→";color:var(--gold);opacity:0;transform:translateX(-6px);transition:all .2s var(--ease)}
.v8hub .eareas .area-list a:hover{color:var(--gold-light);padding-left:10px}
.v8hub .eareas .area-list a:hover::after{opacity:1;transform:translateX(0)}

/* ============================================================
   RESPONSIVE, mirrors the breakpoints in hub.css and dark-content.css
   ============================================================ */
@media(max-width:980px){
  .v8hub .tstory{padding:60px 0}
  .v8hub .tstory .grid{grid-template-columns:1fr;gap:16px}
  .v8hub .tstory .smedia{min-height:320px}
  .v8hub .tstory .scopy{padding:34px 26px}
  .v8hub .twoone{padding:20px 0 40px}
  .v8hub .twoone .panel{padding:36px 28px}
  .v8hub .twoone .who{grid-template-columns:1fr;gap:32px}
  .v8hub .kit{padding:40px 0}
  .v8hub .kit .kit-grid{grid-template-columns:1fr 1fr;gap:14px}
  .v8hub .abvalues{padding:40px 0 64px}
  .v8hub .abvalues .panel{padding:36px 28px}
  .v8hub .abvalues .vrow{grid-template-columns:1fr;gap:28px}
  .v8hub .vintro,.v8hub .eintro{padding:60px 0 20px}
  .v8hub .vlist{padding:20px 0 64px}
  .v8hub .vlist .vcard{grid-template-columns:auto 1fr;gap:20px;padding:28px 26px}
  .v8hub .vlist .vcard .vnum{font-size:2.6rem}
  .v8hub .occasions{padding:20px 0 40px}
  .v8hub .eservices{padding:40px 0}
  .v8hub .eservices .panel{padding:36px 28px}
  .v8hub .eservices .svc-grid{grid-template-columns:1fr;gap:28px}
  .v8hub .eareas{padding:40px 0 64px}
  .v8hub .eareas .area-cols{grid-template-columns:1fr}
}
@media(max-width:560px){
  .v8hub .kit .kit-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .v8hub .reveal{opacity:1;transform:none}
  .v8hub *{animation:none!important;transition:none!important}
}

/* Events hero video (Vimeo background embed). Scoped to .dhero-video, which is
   used only on the Events page, so the shared .dhero hero is untouched. The
   image is a fallback if the embed is blocked; the ::after overlay on .dhero
   keeps the heading legible over the video. */
.v8hub .dhero .dhero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0b0f0c url('/v8/jack-ems-388.jpg') center/cover}
.v8hub .dhero .dhero-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none}

/* Events intro as an Aaron & Hayden card (mirrors the homepage team card). */
.v8hub .eintro-team{padding:clamp(60px,6vw,100px) 0}
.v8hub .eintro-team .eteam-panel{position:relative;border-radius:30px;overflow:hidden}
.v8hub .eintro-team .eteam-bg{position:absolute;inset:-12% 0;z-index:0;background-size:cover;background-position:center}
.v8hub .eintro-team .eteam-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(0,45,28,.4),rgba(0,38,24,.6) 60%,rgba(0,32,20,.72))}
.v8hub .eintro-team .eteam-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:64px}
.v8hub .eintro-team .eteam-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background-size:cover;background-position:center;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.v8hub .eintro-team .eteam-copy{color:var(--cream)}
.v8hub .eintro-team .eteam-copy .eyebrow{color:var(--gold-light);margin-bottom:14px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.v8hub .eintro-team .eteam-copy h2{color:var(--cream);text-shadow:0 2px 18px rgba(0,0,0,.65)}
.v8hub .eintro-team .eteam-copy h2 .script{color:var(--gold-light)}
.v8hub .eintro-team .eteam-copy p{color:rgba(255,250,241,.92);margin:18px 0;font-weight:300;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.v8hub .eintro-team .eteam-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.v8hub .eintro-team .etstat{padding:18px;border-radius:14px;background:rgba(255,250,241,.08);border:1px solid rgba(255,250,241,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.v8hub .eintro-team .etstat .sv{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);color:var(--cream);line-height:1.15}
.v8hub .eintro-team .etstat .sl{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold-light);margin-top:6px}
@media(max-width:860px){.v8hub .eintro-team .eteam-inner{grid-template-columns:1fr;padding:28px;gap:28px}}

/* Events Occasions carousel: landscape cards (the stills are 16:9 video frames). */
.v8hub .occasions .detailreel .dr-card{width:clamp(320px,38vw,460px);aspect-ratio:16/10}
@media(max-width:640px){.v8hub .occasions .detailreel .dr-card{width:clamp(240px,82vw,360px)}}

/* Areas we cover: simple centred block with a link to the areas page. */
.v8hub .eareas .ea-copy{max-width:680px;margin:0 auto;text-align:center}
.v8hub .eareas .ea-copy .eyebrow{margin-bottom:10px}
.v8hub .eareas .ea-copy h2 .script{color:var(--gold-light)}
.v8hub .eareas .ea-copy p{color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-lead);line-height:1.7;margin:16px auto 26px}
.v8hub .eareas .ea-copy .btn{display:inline-flex}
/* ============================================================
   RMG Packages + FAQ, dark-glass extensions
   ------------------------------------------------------------
   The Packages and FAQ public pages re-skinned to the approved
   dark-glass `.v8hub` system. This file only adds the few pieces
   the shared dark layers (hub.css + dark-content.css) do not
   already provide:

     - the three package tier cards (dark glass, gold-glow hover,
       "Most chosen" flag on Silver)
     - the add-ons grid
     - the Wedding Hub strip

   Everything else on these two pages reuses classes already
   defined in hub.css and dark-content.css verbatim:
     dhero / sec-top / sec-head / content-sec / dfinal / enquiry,
     the .faq accordion (details/summary), eyebrow / script / lead,
     btn / btn-primary / btn-ghost / btn-out, .panel-glass.

   It does NOT redefine any token, .btn, .reveal, .container,
   .eyebrow, .script, .lead or any base helper. Those live in
   hub.css and are reused as-is. Every selector below is scoped
   under `.v8hub` so the dark theme can never leak into the
   homepage (.v8), the portal, the CRM/dashboard, or any other
   page. Built entirely from hub.css tokens so it stays one family.
   Google Fonts are already loaded in index.html.
   ============================================================ */

/* ============================================================
   PACKAGE TIER CARDS  (.pkgs-dark / .pkg-grid-dark / .pkg-card)
   Three dark-glass tiers in one row. Each is a frosted glass slab
   built from the shared --glass / --glass-brd / --blur / --gshadow
   tokens, lifting on hover with a gold glow. The featured tier
   (Silver) sits raised, ringed in gold, and carries a "Most chosen"
   flag.
   ============================================================ */
.v8hub .pkgs-dark{padding:96px 0;position:relative}
.v8hub .pkgs-dark .sec-head{margin-bottom:48px}

.v8hub .pkg-grid-dark{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;max-width:1180px;margin:0 auto}

.v8hub .pkg-card{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:38px 32px 34px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.v8hub .pkg-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.14),transparent 45%),
  radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 55%)}
.v8hub .pkg-card>*{position:relative;z-index:1}
.v8hub .pkg-card:hover{transform:translateY(-6px);border-color:var(--gold-soft);box-shadow:0 40px 90px -30px rgba(208,165,74,.42),var(--gshadow)}

/* featured tier: raised, gold ring, gold bloom from the top */
.v8hub .pkg-card.feat{border-color:var(--gold-soft);box-shadow:0 44px 100px -34px rgba(208,165,74,.5),var(--gshadow);transform:translateY(-10px)}
.v8hub .pkg-card.feat::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 50% 0,rgba(208,165,74,.22),transparent 60%)}
.v8hub .pkg-card.feat:hover{transform:translateY(-14px);box-shadow:0 52px 110px -30px rgba(208,165,74,.58),var(--gshadow)}

/* "Most chosen" flag */
.v8hub .pkg-flag{position:absolute;top:18px;right:18px;z-index:2;font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--gold);
  padding:6px 13px;border-radius:100px;box-shadow:0 6px 18px var(--gold-soft)}

.v8hub .pkg-card .pkg-name{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.v8hub .pkg-card .pkg-price{font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.4rem);color:var(--cream);line-height:1.05;margin-top:14px}
.v8hub .pkg-card .pkg-sub{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.03em;color:rgba(255,250,241,.66);margin-top:6px}
.v8hub .pkg-card .pkg-for{color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-body);line-height:1.6;margin-top:18px;
  padding-bottom:22px;border-bottom:1px solid var(--rule-light)}

.v8hub .pkg-card ul{list-style:none;display:grid;gap:12px;margin:22px 0 28px}
.v8hub .pkg-card ul li{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-label);font-size:var(--fs-meta);line-height:1.5;color:rgba(255,250,241,.88)}
.v8hub .pkg-card ul li::before{content:"✓";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:rgba(208,165,74,.16);border:1px solid var(--gold-soft);color:var(--gold-light);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label);margin-top:1px}

/* push the CTA to the foot so all three cards align */
.v8hub .pkg-card .pkg-cta{margin-top:auto}
.v8hub .pkg-card .pkg-cta .btn{width:100%;justify-content:center}

.v8hub .pkg-note{text-align:center;margin-top:34px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.62);letter-spacing:.02em}

/* preserved intro prose + internal link row beneath the tiers */
.v8hub .pkg-intro{max-width:760px;margin:46px auto 0;text-align:center}
.v8hub .pkg-intro p{color:rgba(255,250,241,.8);font-weight:300;font-size:var(--fs-body);line-height:1.75;margin:0 auto}
.v8hub .pkg-intro p+p{margin-top:16px}
.v8hub .pkg-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* ============================================================
   ADD-ONS GRID  (.addons-dark)
   A single frosted glass panel holding a tidy grid of à la carte
   extras. Each cell is a faint inner glass tile that warms to gold
   on hover.
   ============================================================ */
.v8hub .addons-dark{padding:40px 0 60px}
.v8hub .addons-dark .panel-glass{max-width:1180px;margin:0 auto;padding:48px 44px}
.v8hub .addons-dark .ad-top{text-align:center;max-width:620px;margin:0 auto 36px}
.v8hub .addons-dark .ad-top h2{margin-top:8px}
.v8hub .addons-dark .ad-top h2 .script{color:var(--gold-light)}
.v8hub .addons-dark .ad-top p{margin-top:10px;color:rgba(255,250,241,.78);font-weight:300;font-size:var(--fs-body)}

.v8hub .addons-grid-dark{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v8hub .addon-card{background:rgba(255,250,241,.05);border:1px solid var(--rule-light);border-radius:16px;padding:24px 22px;
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.v8hub .addon-card:hover{transform:translateY(-3px);border-color:var(--gold-soft);background:rgba(208,165,74,.07)}
.v8hub .addon-card h4{font-family:var(--font-display);font-size:var(--fs-lead);color:var(--cream);line-height:1.2}
.v8hub .addon-card p{font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);line-height:1.55;color:rgba(255,250,241,.78);margin-top:8px}

.v8hub .addons-dark .ad-foot{text-align:center;margin-top:30px;font-family:var(--font-display);font-size:var(--fs-lead);color:var(--gold-light)}

/* ============================================================
   WEDDING HUB STRIP  (.hubstrip)
   A wide frosted glass band that sells the included Wedding Hub
   and links across to it. Copy on the left, CTA on the right.
   ============================================================ */
.v8hub .hubstrip{padding:40px 0 100px}
.v8hub .hubstrip .panel-glass{max-width:1180px;margin:0 auto;padding:48px 48px;
  display:grid;grid-template-columns:1.6fr auto;gap:36px;align-items:center}
.v8hub .hubstrip .hs-copy .eyebrow{margin-bottom:8px}
.v8hub .hubstrip .hs-copy h3{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--cream);line-height:1.15}
.v8hub .hubstrip .hs-copy h3 .script{color:var(--gold-light)}
.v8hub .hubstrip .hs-copy p{margin-top:14px;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-body);line-height:1.65;max-width:60ch}
.v8hub .hubstrip .hs-side{justify-self:end}

/* ============================================================
   FAQ PAGE GROUPED ACCORDION  (.faqpage-dark)
   The FAQ page keeps the shared .faq accordion (the dark glass
   details/summary blocks from hub.css) but groups them under
   numbered editorial headings. This adds only the grouping
   chrome; the accordion items themselves are pure hub.css .faq.
   ============================================================ */
.v8hub .faqpage-dark{padding:90px 0 80px}
.v8hub .faqpage-dark .fgroup-dark+.fgroup-dark{margin-top:64px}
.v8hub .faqpage-dark .ghead{display:flex;align-items:baseline;justify-content:center;gap:16px;max-width:860px;margin:0 auto;text-align:center}
.v8hub .faqpage-dark .gnum{font-family:var(--font-display);font-size:2.4rem;color:var(--gold-light);line-height:1;opacity:.9}
.v8hub .faqpage-dark .ghead h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.v8hub .faqpage-dark .gsub{max-width:860px;margin:8px auto 22px;text-align:center;font-family:var(--font-body);font-weight:300;
  font-size:var(--fs-body);color:rgba(255,250,241,.72)}
/* the grouped accordion reuses hub.css .faq-wrap / .faq-item spacing */
.v8hub .faqpage-dark .faq-wrap{margin:0 auto;max-width:860px}
/* answers span the full card width (hub.css caps them at 64ch, which leaves a
   large gap on the right of these wider FAQ cards). FAQ page only. */
.v8hub .faqpage-dark .faq-item .faq-a{max-width:none}

/* ============================================================
   "STILL ASKING" STRIP  (.stillask-dark)
   Reuses the same wide glass band pattern as the Hub strip for the
   FAQ page's "still got a question?" call to action.
   ============================================================ */
.v8hub .stillask-dark{padding:20px 0 80px}
.v8hub .stillask-dark .panel-glass{max-width:860px;margin:0 auto;padding:44px 48px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.v8hub .stillask-dark .sa-copy h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--cream);line-height:1.15}
.v8hub .stillask-dark .sa-copy p{margin-top:12px;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-body);line-height:1.65;max-width:54ch}
.v8hub .stillask-dark .sa-side{justify-self:end}

/* ============================================================
   FAQ PAGE PHOTO GALLERY  (.faq-gallery)
   The existing lightbox gallery, re-skinned for the dark field:
   rounded tiles, a hairline frame, a soft gold glow and zoom on
   hover. Markup and the lightbox behaviour are unchanged.
   ============================================================ */
.v8hub .faq-gallery{padding:40px 0 80px}
.v8hub .faq-gallery .container{max-width:1200px}
.v8hub .faq-gallery .ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.v8hub .faq-gallery .gcell{position:relative;overflow:hidden;border-radius:14px;cursor:pointer;aspect-ratio:1;
  border:1px solid var(--rule-light);box-shadow:0 20px 50px -34px rgba(0,0,0,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.v8hub .faq-gallery .gcell img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s var(--ease)}
.v8hub .faq-gallery .gcell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,40,24,.5));
  opacity:0;transition:opacity .35s var(--ease)}
.v8hub .faq-gallery .gcell:hover{transform:translateY(-3px);box-shadow:0 30px 70px -30px rgba(208,165,74,.4)}
.v8hub .faq-gallery .gcell:hover img{transform:scale(1.08)}
.v8hub .faq-gallery .gcell:hover::after{opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .v8hub .pkgs-dark{padding:64px 0}
  .v8hub .pkg-grid-dark{grid-template-columns:1fr;gap:20px;max-width:520px}
  .v8hub .pkg-card.feat,.v8hub .pkg-card{transform:none}
  .v8hub .pkg-card.feat:hover,.v8hub .pkg-card:hover{transform:translateY(-4px)}

  .v8hub .addons-dark .panel-glass{padding:34px 26px}
  .v8hub .addons-grid-dark{grid-template-columns:1fr}

  .v8hub .hubstrip{padding:30px 0 64px}
  .v8hub .hubstrip .panel-glass{grid-template-columns:1fr;gap:24px;padding:36px 28px;text-align:center}
  .v8hub .hubstrip .hs-side{justify-self:center}

  .v8hub .faqpage-dark{padding:60px 0}
  .v8hub .faqpage-dark .fgroup-dark+.fgroup-dark{margin-top:44px}

  .v8hub .stillask-dark .panel-glass{grid-template-columns:1fr;gap:20px;padding:34px 28px;text-align:center}
  .v8hub .stillask-dark .sa-side{justify-self:center}
  .v8hub .stillask-dark .sa-copy p{margin-left:auto;margin-right:auto}

  .v8hub .faq-gallery{padding:30px 0 60px}
}
@media(min-width:760px){
  .v8hub .faq-gallery .ggrid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1024px){
  .v8hub .faq-gallery .ggrid{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .v8hub .pkg-card,.v8hub .addon-card,.v8hub .faq-gallery .gcell,.v8hub .faq-gallery .gcell img{transition:none}
}

/* FAQ Wedding Hub panel: match the 860 reading column the rest of the page
   uses (questions, reel), instead of the wider 1180 tier, so the section lines
   up as you scroll. Scoped to FAQ via .hub-faq so no other page is affected. */
.v8hub .hubstrip.hub-faq .hs-in{max-width:860px}

/* FAQ work reel heading (centred, above the drag carousel) */
.v8hub .faqreel{padding:24px 0 72px}
.v8hub .faqreel .fr-head{max-width:860px;margin:0 auto 28px;text-align:center}
.v8hub .faqreel .fr-head .eyebrow{margin-bottom:10px}
.v8hub .faqreel .fr-head h2 .script{color:var(--gold-light)}
.v8hub .faqreel .fr-head p{max-width:620px;margin:14px auto 0;color:var(--ink-soft,rgba(255,255,255,.72));font-size:var(--fs-body,1.05rem);line-height:1.6}
/* ============================================================
   HUBSTRIP — the contextual Wedding Hub moment.
   Self-contained (own hex tokens) so it renders identically
   inside .v8hub dark pages, .v8in cream pages and the homepage.
   Premium wedding feel: soft glass, gold hairline, quiet
   planning-card visual. Never a SaaS advert.
   ============================================================ */

.hubstrip{padding:84px 0;position:relative}
.hubstrip .hs-in{max-width:1180px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:56px;align-items:center}

.hubstrip .hs-eyebrow{font-family:Roboto,sans-serif;font-size:var(--fs-meta);font-weight:600;letter-spacing:.14em;text-transform:none;color:#D0A54A;display:block;margin-bottom:12px}
.hubstrip .hs-heading{font-family:'ZCOOL XiaoWei',serif;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;margin:0}
.hubstrip .hs-script{font-family:'Oooh Baby',cursive;font-size:.92em;color:#D0A54A;display:block}
.hubstrip .hs-intro{font-family:Lato,sans-serif;font-weight:300;font-size:1.04rem;line-height:1.7;margin:14px 0 22px;max-width:56ch}

.hubstrip .hs-features{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px}
.hubstrip .hs-features li{position:relative;padding-left:26px}
.hubstrip .hs-features li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:#D0A54A;box-shadow:0 0 0 4px rgba(208,165,74,.16)}
.hubstrip .hs-features b{font-family:'ZCOOL XiaoWei',serif;font-weight:400;font-size:var(--fs-lead);display:block;margin-bottom:2px}
.hubstrip .hs-features span{font-family:Lato,sans-serif;font-weight:300;font-size:var(--fs-body);line-height:1.6}

.hubstrip .hs-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hubstrip .hs-btn{font-family:Roboto,sans-serif;font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em;
  padding:12px 24px;border-radius:100px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
.hubstrip .hs-btn-gold{color:#0F1512;background:linear-gradient(135deg,#E9C87E,#D0A54A);
  box-shadow:0 10px 26px -12px rgba(208,165,74,.55)}
.hubstrip .hs-btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(208,165,74,.7)}

/* ============================================================
   ANIMATED HUB DEMO — the card doesn't describe the Hub, it
   RUNS it. A calm 12s loop: the day ticks itself off (ready →
   ceremony → speeches) along a filling progress line, the
   contract chip lands, the shot list completes. Premium and
   quiet, never SaaS. Reduced-motion shows the finished state.
   ============================================================ */
.hubstrip .hs-visual{display:flex;justify-content:center;align-items:center}
.hubstrip .hs-stage{position:relative;width:100%;max-width:470px}
.hubstrip .hs-glow{position:absolute;inset:-12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(208,165,74,.16),transparent 62%)}
.hubstrip .hs-card{position:relative;width:100%;border-radius:22px;padding:20px 22px 22px;overflow:hidden}
.hubstrip .hs-card-top{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.hubstrip .hs-dot{width:8px;height:8px;border-radius:50%;background:rgba(128,128,128,.35)}
.hubstrip .hs-card-url{font-family:Roboto,sans-serif;font-size:var(--fs-label);letter-spacing:.06em;margin-left:8px;opacity:.65}
.hubstrip .hs-live{margin-left:auto;font-family:Roboto,sans-serif;font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;
  color:#E9C87E;border:1px solid rgba(208,165,74,.5);border-radius:100px;padding:3px 10px;
  animation:hsLivePulse 2.4s ease-in-out infinite}
@keyframes hsLivePulse{0%,100%{opacity:.55}50%{opacity:1}}

/* the day's progress line */
.hubstrip .hs-progress{height:2px;border-radius:2px;background:rgba(208,165,74,.18);margin:0 2px 14px;position:relative;overflow:hidden}
.hubstrip .hs-progress::after{content:"";position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,#E9C87E,#D0A54A);transform:scaleX(0);
  animation:hsDay 12s linear infinite}
@keyframes hsDay{0%{transform:scaleX(0)}8%{transform:scaleX(0)}66%{transform:scaleX(1)}92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}

/* timeline rows tick themselves off */
.hubstrip .hs-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-bottom:9px;
  font-family:Lato,sans-serif;font-size:.96rem}
.hubstrip .hs-row .hs-label{flex:1}
.hubstrip .hs-row b{font-family:Roboto,sans-serif;font-weight:600;font-size:.86rem;color:#D0A54A}
.hubstrip .hs-tick{width:20px;height:20px;border-radius:50%;flex:0 0 20px;position:relative;
  border:1.5px solid rgba(208,165,74,.55);display:flex;align-items:center;justify-content:center}
.hubstrip .hs-tick::after{content:"✓";font-family:Roboto,sans-serif;font-size:var(--fs-label);font-weight:700;color:#0F1512;
  opacity:0;transform:scale(.4)}
.hubstrip .hs-row[data-step="1"] .hs-tick{animation:hsTickFill1 12s ease infinite}
.hubstrip .hs-row[data-step="1"] .hs-tick::after{animation:hsTickMark1 12s ease infinite}
.hubstrip .hs-row[data-step="1"]{animation:hsRowDone1 12s ease infinite}
.hubstrip .hs-row[data-step="2"] .hs-tick{animation:hsTickFill2 12s ease infinite}
.hubstrip .hs-row[data-step="2"] .hs-tick::after{animation:hsTickMark2 12s ease infinite}
.hubstrip .hs-row[data-step="2"]{animation:hsRowDone2 12s ease infinite}
.hubstrip .hs-row[data-step="3"] .hs-tick{animation:hsTickFill3 12s ease infinite}
.hubstrip .hs-row[data-step="3"] .hs-tick::after{animation:hsTickMark3 12s ease infinite}
.hubstrip .hs-row[data-step="3"]{animation:hsRowDone3 12s ease infinite}
/* fill keyframes: step 1 at ~18%, step 2 at ~38%, step 3 at ~58%; reset at 96% */
@keyframes hsTickFill1{0%,14%{background:transparent}18%,92%{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}97%,100%{background:transparent}}
@keyframes hsTickMark1{0%,14%{opacity:0;transform:scale(.4)}18%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes hsRowDone1{0%,14%{background:rgba(255,250,241,.06)}18%,92%{background:rgba(208,165,74,.13)}97%,100%{background:rgba(255,250,241,.06)}}
@keyframes hsTickFill2{0%,34%{background:transparent}38%,92%{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}97%,100%{background:transparent}}
@keyframes hsTickMark2{0%,34%{opacity:0;transform:scale(.4)}38%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes hsRowDone2{0%,34%{background:rgba(255,250,241,.06)}38%,92%{background:rgba(208,165,74,.13)}97%,100%{background:rgba(255,250,241,.06)}}
@keyframes hsTickFill3{0%,54%{background:transparent}58%,92%{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}97%,100%{background:transparent}}
@keyframes hsTickMark3{0%,54%{opacity:0;transform:scale(.4)}58%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes hsRowDone3{0%,54%{background:rgba(255,250,241,.06)}58%,92%{background:rgba(208,165,74,.13)}97%,100%{background:rgba(255,250,241,.06)}}

/* chips land once the day is covered */
.hubstrip .hs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hubstrip .hs-chip{display:inline-block;font-family:Roboto,sans-serif;font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;
  padding:8px 15px;border-radius:100px;color:#0F1512;background:linear-gradient(135deg,#E9C87E,#D0A54A)}
.hubstrip .hs-chip.alt{color:inherit;background:transparent;border:1px solid rgba(208,165,74,.55)}
.hubstrip .hs-pop{animation:hsPop 12s ease infinite}
@keyframes hsPop{0%,68%{opacity:0;transform:scale(.7)}72%,93%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.7)}}
.hubstrip .hs-swap{position:relative}
.hubstrip .hs-swap .s1,.hubstrip .hs-swap .s2{transition:none}
.hubstrip .hs-swap .s2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#E9C87E;opacity:0;animation:hsSwapIn 12s ease infinite}
.hubstrip .hs-swap .s1{display:inline-block;animation:hsSwapOut 12s ease infinite}
@keyframes hsSwapOut{0%,76%{opacity:1}80%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes hsSwapIn{0%,76%{opacity:0}80%,93%{opacity:1}97%,100%{opacity:0}}

/* ---------- DARK variant (dark-glass pages + homepage dark bands) ---------- */
.hubstrip[data-variant="dark"]{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-heading{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-intro,
.hubstrip[data-variant="dark"] .hs-features span{color:rgba(255,250,241,.8)}
.hubstrip[data-variant="dark"] .hs-features b{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-in{border-radius:26px;padding:56px 52px;
  background:linear-gradient(135deg,rgba(255,250,241,.07),rgba(255,250,241,.03));
  border:1px solid rgba(208,165,74,.28);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
/* Dark variant buttons: the site-standard border-draw glass pill (same
   mechanism as the cream variant and the site .btn), not the old solid gold.
   Applies to the two dark HubStrip pages, FAQ and Contact, so they match. */
.hubstrip[data-variant="dark"] .hs-btn{position:relative;isolation:isolate;border:1px solid transparent;background:transparent;box-shadow:none;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1),background .25s ease}
.hubstrip[data-variant="dark"] .hs-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(233,200,126,.6);background:transparent;clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;z-index:0}
.hubstrip[data-variant="dark"] .hs-btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.55);pointer-events:none;z-index:1;opacity:1;transition:opacity .12s linear 0s}
.hubstrip[data-variant="dark"] .hs-btn:hover:not(:disabled),
.hubstrip[data-variant="dark"] .hs-btn:focus-visible:not(:disabled){transform:scale(1.015);outline:none}
.hubstrip[data-variant="dark"] .hs-btn:hover:not(:disabled)::before,
.hubstrip[data-variant="dark"] .hs-btn:focus-visible:not(:disabled)::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.hubstrip[data-variant="dark"] .hs-btn:hover:not(:disabled)::after,
.hubstrip[data-variant="dark"] .hs-btn:focus-visible:not(:disabled)::after{opacity:0;transition-delay:.26s}
.hubstrip[data-variant="dark"] .hs-btn-gold{color:#E9C87E;background:transparent;box-shadow:none}
.hubstrip[data-variant="dark"] .hs-btn-gold:hover:not(:disabled),
.hubstrip[data-variant="dark"] .hs-btn-gold:focus-visible:not(:disabled){color:#F3D89A;background:linear-gradient(180deg,rgba(233,200,126,.2),rgba(208,165,74,.08));box-shadow:none}
.hubstrip[data-variant="dark"] .hs-btn-ghost{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-btn-ghost::before{border-color:rgba(255,250,241,.5)}
.hubstrip[data-variant="dark"] .hs-btn-ghost::after{background:rgba(255,250,241,.5)}
.hubstrip[data-variant="dark"] .hs-btn-ghost:hover:not(:disabled),
.hubstrip[data-variant="dark"] .hs-btn-ghost:focus-visible:not(:disabled){color:#FFFAF1;background:rgba(255,250,241,.08)}
.hubstrip[data-variant="dark"] .hs-card{background:rgba(15,21,18,.55);border:1px solid rgba(255,250,241,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hubstrip[data-variant="dark"] .hs-row{background:rgba(255,250,241,.06);color:rgba(255,250,241,.85)}
.hubstrip[data-variant="dark"] .hs-card-url{color:rgba(255,250,241,.65)}
.hubstrip[data-variant="dark"] .hs-chip.alt{color:rgba(255,250,241,.85)}

/* ---------- CREAM variant (contact + cream pages) ---------- */
.hubstrip[data-variant="cream"]{color:#232323}
.hubstrip[data-variant="cream"] .hs-heading{color:#00603A}
.hubstrip[data-variant="cream"] .hs-intro,
.hubstrip[data-variant="cream"] .hs-features span{color:#54595F}
.hubstrip[data-variant="cream"] .hs-features b{color:#232323}
.hubstrip[data-variant="cream"] .hs-in{border-radius:26px;padding:56px 52px;
  background:linear-gradient(135deg,rgba(0,96,58,.05),rgba(208,165,74,.07));
  border:1px solid rgba(208,165,74,.35);
  box-shadow:0 34px 80px -48px rgba(0,61,36,.35)}
.hubstrip[data-variant="cream"] .hs-btn{position:relative;isolation:isolate;border:1px solid transparent;background:transparent;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1),background .25s ease}
.hubstrip[data-variant="cream"] .hs-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(168,132,47,.6);background:transparent;clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;z-index:0}
.hubstrip[data-variant="cream"] .hs-btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 44px);height:1px;background:rgba(168,132,47,.55);pointer-events:none;z-index:1;opacity:1;transition:opacity .12s linear 0s}
.hubstrip[data-variant="cream"] .hs-btn:hover:not(:disabled),
.hubstrip[data-variant="cream"] .hs-btn:focus-visible:not(:disabled){transform:scale(1.015);outline:none}
.hubstrip[data-variant="cream"] .hs-btn:hover:not(:disabled)::before,
.hubstrip[data-variant="cream"] .hs-btn:focus-visible:not(:disabled)::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.hubstrip[data-variant="cream"] .hs-btn:hover:not(:disabled)::after,
.hubstrip[data-variant="cream"] .hs-btn:focus-visible:not(:disabled)::after{opacity:0;transition-delay:.26s}
.hubstrip[data-variant="cream"] .hs-btn-gold{color:#8a6a2b;box-shadow:none}
.hubstrip[data-variant="cream"] .hs-btn-gold:hover:not(:disabled),
.hubstrip[data-variant="cream"] .hs-btn-gold:focus-visible:not(:disabled){color:#5c4518;background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1));box-shadow:none}
.hubstrip[data-variant="cream"] .hs-btn-ghost{color:#00603A}
.hubstrip[data-variant="cream"] .hs-btn-ghost::before{border-color:rgba(0,96,58,.55)}
.hubstrip[data-variant="cream"] .hs-btn-ghost::after{background:rgba(0,96,58,.5)}
.hubstrip[data-variant="cream"] .hs-btn-ghost:hover:not(:disabled),
.hubstrip[data-variant="cream"] .hs-btn-ghost:focus-visible:not(:disabled){color:#003d24;background:rgba(0,96,58,.08)}
.hubstrip[data-variant="cream"] .hs-card{background:#FFFFFF;border:1px solid rgba(0,61,36,.12);
  box-shadow:0 24px 60px -34px rgba(0,61,36,.28)}
.hubstrip[data-variant="cream"] .hs-row{background:rgba(0,96,58,.05);color:#232323}
.hubstrip[data-variant="cream"] .hs-card-url{color:#54595F}
.hubstrip[data-variant="cream"] .hs-chip.alt{color:#00603A}

@media(max-width:980px){
  .hubstrip{padding:56px 0}
  .hubstrip .hs-in{grid-template-columns:1fr;gap:32px;padding:36px 24px}
  .hubstrip .hs-visual{order:-1}
  .hubstrip .hs-card{max-width:420px}
}
@media(prefers-reduced-motion:reduce){
  .hubstrip *,.hubstrip *::after,.hubstrip *::before{animation:none!important;transition:none!important}
  /* show the finished day, statically */
  .hubstrip .hs-progress::after{transform:scaleX(1)}
  .hubstrip .hs-tick{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}
  .hubstrip .hs-tick::after{opacity:1;transform:scale(1)}
  .hubstrip .hs-row{background:rgba(208,165,74,.13)}
  .hubstrip .hs-pop{opacity:1;transform:none}
  .hubstrip .hs-swap .s1{opacity:0}
  .hubstrip .hs-swap .s2{opacity:1}
  .hubstrip .hs-live{opacity:.8}
}
/* ============================================================
   AREAS WE COVER: dark (.v8hub) redesign, scoped to .awc so it
   touches no other page. Reuses the site DNA: dhero-center hero,
   glass tokens (--glass / --glass-brd / --blur), gold + cream,
   ZCOOL XiaoWei / Oooh Baby / Lato. Locations are a real
   navigational directory of glass cards linking to the geo pages,
   text-led (no decorative icons), one true geographic descriptor
   per card so no two read as identical filler.
   ============================================================ */

/* section rhythm: one shared vertical scale */
.v8hub.awc .awc-sec{padding:clamp(64px,9vw,110px) 0}
.v8hub.awc .awc-sec.tight{padding-top:0}
.v8hub.awc .awc-wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* centred section header, 860 reading column like the rest of the site */
.v8hub.awc .awc-head{max-width:860px;margin:0 auto 48px;text-align:center}
.v8hub.awc .awc-head .eyebrow{margin-bottom:14px}
.v8hub.awc .awc-head p{margin:16px auto 0;max-width:64ch;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-lead);line-height:1.65}

/* ---------- location directory cards (centred, photo-backed) ---------- */
/* Flex, not grid, so an incomplete last row (e.g. 3 then 2) stays centred. */
.v8hub.awc .loc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}

.v8hub.awc .loc-card{flex:0 1 300px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;
  min-height:200px;padding:36px 30px;border-radius:20px;
  background:rgba(15,21,18,.62);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--gshadow);transition:transform .4s var(--ease),border-color .3s ease}
.v8hub.awc .loc-card:hover{transform:translateY(-4px);border-color:var(--gold-soft)}

/* the location photo sits behind at low opacity, with a dark scrim over it so
   the cream name and links stay legible. Photo lifts a little on hover. */
.v8hub.awc .loc-card .loc-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.3;transition:opacity .4s ease,transform .6s var(--ease)}
.v8hub.awc .loc-card:hover .loc-bg{opacity:.42;transform:scale(1.05)}
.v8hub.awc .loc-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,21,18,.35),rgba(15,21,18,.72))}
.v8hub.awc .loc-card > *{position:relative;z-index:2}

.v8hub.awc .loc-card .loc-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.08;color:var(--cream);margin:0;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.v8hub.awc .loc-card .loc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}

/* text-led geo links: a gold underline that fills in on hover. min tap target 44px. */
.v8hub.awc .loc-link{position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-label);font-size:var(--fs-meta);font-weight:600;letter-spacing:.04em;
  color:var(--cream);transition:color .3s ease}
.v8hub.awc .loc-link::after{content:"";position:absolute;left:0;bottom:8px;width:100%;height:1px;background:var(--gold-soft);
  transform:scaleX(.36);transform-origin:left;transition:transform .35s var(--ease),background .3s ease}
.v8hub.awc .loc-link:hover{color:var(--gold-light)}
.v8hub.awc .loc-link:hover::after{transform:scaleX(1);background:var(--gold-light)}
.v8hub.awc .loc-link.film{color:rgba(255,250,241,.72)}
.v8hub.awc .loc-link.film:hover{color:var(--gold-light)}

/* single-link (venue) card keeps the name as the link target */
.v8hub.awc .loc-card.single .loc-name a{color:var(--cream);transition:color .3s ease}
.v8hub.awc .loc-card.single:hover .loc-name a{color:var(--gold-light)}

/* One page width: the Wedding Hub panel matches the same 1100 content column
   (awc-wrap max 1180 minus its 40px gutter) that the grids and CTA use, with
   the same 40/22 gutter, so no section is a different width. */
.v8hub .hubstrip.hub-areas{padding-left:40px;padding-right:40px}
.v8hub .hubstrip.hub-areas .hs-in{max-width:1100px}

/* ---------- Instagram feed: the homepage six-tile grid, dark scope ---------- */
.v8hub.awc .awc-follow{padding:clamp(64px,9vw,110px) 0 clamp(72px,10vw,120px);text-align:center}
.v8hub.awc .awc-follow h2{margin-top:8px}
.v8hub.awc .awc-follow .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:36px 0 0}
.v8hub.awc .awc-follow .ig{display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;position:relative;background:var(--glass);border:1px solid var(--glass-brd)}
.v8hub.awc .awc-follow .ig img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s var(--ease)}
.v8hub.awc .awc-follow .ig:hover img{transform:scale(1.05)}
.v8hub.awc .awc-follow .ig-link{display:inline-flex;align-items:center;gap:9px;margin-top:34px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .v8hub.awc .awc-follow .ig-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .v8hub.awc .awc-wrap{padding:0 22px}
  .v8hub .hubstrip.hub-areas{padding-left:22px;padding-right:22px}
  .v8hub.awc .awc-head{margin-bottom:36px}
  .v8hub.awc .loc-grid{gap:16px}
}
@media(max-width:560px){
  .v8hub.awc .awc-follow .ig-grid{grid-template-columns:repeat(2,1fr)}
}
/* ============================================================================
   inner-b.css — v8 cream reskin for the three "inner" public pages:
     · FAQ            (grouped accordion)        — mockup-faq-page.html
     · AreasWeCover   (county hub + town chips)   — mockup-areas-page.html
     · Contact        (styled enquiry form + NAP) — mockup-contact-page.html

   EVERY selector is scoped under `.v8in` so this stylesheet never touches the
   homepage, the location/hub pages, the client portal, the CRM/dashboard, or
   any shared component. Images are served from /v8/<file> (public/v8).

   Base helpers (tokens, .btn, .glass, .reveal, .container, .section, .eyebrow,
   .script, .lead) are copied VERBATIM from mockup-location-page.html so these
   pages match the rest of the site exactly, then scoped under .v8in. Below the
   helpers sit the page-specific section classes lifted from each mockup.
   ============================================================================ */

/* ---- TOKENS (verbatim from location mockup :root) ------------------------- */
.v8in{
  --green:#00603A;--green-deep:#003D24;--green-mist:#E8F1EC;
  --gold:#D0A54A;--gold-deep:#A8842F;--gold-soft:rgba(208,165,74,.45);
  --cream:#FFFAF1;--cream-warm:#F5EFE2;--dark:#232323;--ink:#141414;--grey:#54595F;--white:#fff;
  --rule:rgba(35,35,35,.10);--rule-light:rgba(255,250,241,.18);
  --font-display:'ZCOOL XiaoWei',Georgia,serif;--font-script:'Oooh Baby',cursive;
  --font-body:'Lato',-apple-system,system-ui,sans-serif;--font-label:'Roboto',sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);--ease-expo:cubic-bezier(.16,1,.3,1);--maxw:1200px;
  --glass:rgba(255,250,241,.1);--glass-brd:rgba(255,255,255,.22);--blur:blur(24px) saturate(155%);
  --gshadow:0 30px 80px -22px rgba(0,30,18,.5),0 8px 28px rgba(0,0,0,.16),inset 1px 1px 0 0 rgba(255,255,255,.32),inset -1px -1px 0 0 rgba(255,255,255,.05);
}

/* ---- BASE (verbatim, scoped) --------------------------------------------- */
.v8in{font-family:var(--font-body);color:var(--dark);line-height:1.7;font-size:var(--fs-body)}
.v8in *{box-sizing:border-box}
.v8in img{display:block;max-width:100%}
.v8in a{color:inherit;text-decoration:none}
.v8in section{position:relative}
.v8in .bg-field{position:fixed;inset:0;z-index:-2;background:radial-gradient(60vw 60vw at 10% 8%,rgba(0,96,58,.08),transparent 60%),radial-gradient(50vw 50vw at 92% 40%,rgba(208,165,74,.10),transparent 60%),radial-gradient(55vw 55vw at 40% 92%,rgba(0,96,58,.06),transparent 60%),linear-gradient(180deg,var(--cream),var(--cream-warm) 55%,var(--cream))}
.v8in h1,.v8in h2,.v8in h3,.v8in h4{font-family:var(--font-display);font-weight:400}
.v8in h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;color:var(--green)}
.v8in h3{font-size:1.4rem;color:var(--green)}
.v8in .script{font-family:var(--font-script);color:var(--gold-deep);line-height:.9}
.v8in .eyebrow{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.1em;color:var(--gold-deep);display:inline-block}
.v8in .eyebrow.light{color:var(--gold)}
.v8in .chapter{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:12px;margin-bottom:24px}
.v8in .chapter::before,.v8in .chapter::after{content:"";width:28px;height:1px;background:var(--gold-soft)}
.v8in .lead{font-size:var(--fs-lead);line-height:1.8;color:var(--grey);max-width:64ch}
.v8in .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;padding:15px 30px;border-radius:100px;transition:all .25s var(--ease);cursor:pointer;border:1px solid transparent}
.v8in .btn:active{transform:scale(.97)}
.v8in .btn-primary{background:var(--gold);color:var(--cream);box-shadow:0 8px 28px var(--gold-soft)}.v8in .btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px)}
.v8in .btn-glass{background:rgba(255,250,241,.12);border-color:rgba(255,250,241,.5);color:var(--cream);backdrop-filter:blur(8px)}.v8in .btn-glass:hover{background:rgba(255,250,241,.2)}
.v8in .btn-glass.on-light{border-color:var(--green);color:var(--green);background:transparent}.v8in .btn-glass.on-light:hover{background:var(--green);color:var(--cream)}
.v8in .btn-out{border-color:var(--green);color:var(--green)}.v8in .btn-out:hover{background:rgba(0,96,58,.14);border-color:var(--green);color:var(--green)}

/* ── Pill buttons with homepage-style draw-border + liquid glass fill ── */
.v8in .btn-outline{
  position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:10px;
  padding:14px 30px;border-radius:100px;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:rgba(35,35,35,.85);text-decoration:none;background:transparent;border:1px solid transparent;box-sizing:border-box;
  isolation:isolate;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.v8in .btn-outline::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(168,132,47,.55);background:transparent;
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;z-index:0;
}
.v8in .btn-outline::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 44px);height:1px;background:rgba(168,132,47,.55);pointer-events:none;z-index:1;opacity:1;transition:opacity .12s linear 0s;
}
.v8in .btn-outline .btn-glass{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,241,.55),rgba(255,250,241,.25));
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 0 0 1px rgba(255,255,255,.2) inset,0 18px 40px -18px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transition:opacity .18s cubic-bezier(.22,.61,.36,1) 0s,visibility 0s linear .18s;z-index:0;
}
.v8in .btn-outline .btn-label{position:relative;z-index:2}
.v8in .btn-outline:hover,.v8in .btn-outline:focus-visible{color:var(--dark);transform:scale(1.015);outline:none}
.v8in .btn-outline:hover::before,.v8in .btn-outline:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.v8in .btn-outline:hover::after,.v8in .btn-outline:focus-visible::after{opacity:0;transition-delay:.26s}
.v8in .btn-outline:hover .btn-glass,.v8in .btn-outline:focus-visible .btn-glass{opacity:1;visibility:visible;transition:opacity .18s cubic-bezier(.22,.61,.36,1) .32s,visibility 0s linear .32s}

/* Primary — gold accent for light glass cards */
.v8in .btn-outline-primary{color:var(--gold-deep)}
.v8in .btn-outline-primary::after{background:rgba(208,165,74,.85)}
.v8in .btn-outline-primary::before{border-color:rgba(168,132,47,.6)}
.v8in .btn-outline-primary .btn-glass{
  background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1));
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 0 0 1px rgba(233,200,126,.15) inset,0 18px 40px -18px rgba(0,0,0,.25);
}
.v8in .btn-outline-primary:hover,.v8in .btn-outline-primary:focus-visible{color:#5c4518}

/* Ghost — cream text for dark sections (gfinal) */
.v8in .btn-outline-ghost{color:rgba(255,250,241,.85)}
.v8in .btn-outline-ghost::after{background:rgba(255,250,241,.55)}
.v8in .btn-outline-ghost::before{border-color:rgba(255,250,241,.4)}
.v8in .btn-outline-ghost .btn-glass{
  background:linear-gradient(180deg,rgba(255,250,241,.14),rgba(255,250,241,.06));
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(255,255,255,.08) inset,0 18px 40px -18px rgba(0,0,0,.55);
}
.v8in .btn-outline-ghost:hover,.v8in .btn-outline-ghost:focus-visible{color:#FFFAF1}

@media (prefers-reduced-motion: reduce){
  .v8in .btn-outline::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);opacity:0;transition:opacity .18s ease}
  .v8in .btn-outline .btn-glass{transition:opacity .18s ease}
  .v8in .btn-outline:hover::before,.v8in .btn-outline:focus-visible::before{opacity:1;transition-delay:0s}
  .v8in .btn-outline:hover .btn-glass,.v8in .btn-outline:focus-visible .btn-glass{transition-delay:0s}
  .v8in .btn-outline:hover,.v8in .btn-outline:focus-visible{transform:none}
}
@media(max-width:900px){
  .v8in .btn-outline{padding:12px 22px;font-size:var(--fs-label);letter-spacing:.22em}
  .v8in .btn-outline::after{width:calc(100% - 32px)}
  .v8in .btn-outline::before{clip-path:inset(calc(100% - 1px) 16px 0 16px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 16px 0 16px round 100px)}
  .v8in .btn-outline:hover::before,.v8in .btn-outline:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px)}
}
.v8in .glass{background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);border-radius:22px;position:relative;overflow:hidden}
.v8in .glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.18),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 50%)}
html:not(.v8in-js) .v8in .reveal{opacity:1!important;transform:none!important}
.v8in .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.v8in .reveal.in{opacity:1;transform:none}
.v8in .container{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.v8in .section{padding:96px 0;position:relative}

/* ---- SHARED HERO (phero) ------------------------------------------------- */
.v8in .phero{min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink);padding:140px 40px 100px;text-align:center}
.v8in .phero .pbg{position:absolute;inset:0;background-size:cover;background-position:top center;z-index:0}
.v8in .phero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(15,15,15,.72) 60%,rgba(15,15,15,.88) 100%)}
.v8in .phero-in{position:relative;z-index:2;max-width:900px;margin:0 auto;width:100%;color:var(--cream);text-align:center}
.v8in .crumb{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.7);letter-spacing:.04em;margin-bottom:18px}
.v8in .crumb a:hover{color:var(--gold)}.v8in .crumb span{opacity:.5;margin:0 7px}
.v8in .phero h1{font-size:clamp(2.8rem,7vw,6rem);line-height:.98;color:var(--cream);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.v8in .phero h1 .script{color:var(--gold);font-size:.62em}
.v8in .phero p{font-size:var(--fs-lead);color:rgba(255,250,241,.9);font-weight:300;margin:22px auto 0;max-width:54ch}

/* ===========================================================================
   FAQ PAGE  (mockup-faq-page.html)
   =========================================================================== */
.v8in .faqpage{padding:90px 0 40px}
.v8in .faqpage .container{max-width:920px}
.v8in .fgroup{margin-bottom:46px}
.v8in .fgroup .ghead{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.v8in .fgroup .gnum{font-family:var(--font-script);color:var(--gold-deep);font-size:2rem;line-height:1}
.v8in .fgroup h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--green)}
.v8in .fgroup .gsub{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--grey);margin:0 0 12px 50px}
.v8in .fitem{border-bottom:1px solid var(--rule)}
.v8in .fitem .fq{width:100%;text-align:left;background:none;border:0;list-style:none;cursor:pointer;padding:22px 0;font-family:var(--font-display);font-size:var(--fs-lead);color:var(--green);display:flex;justify-content:space-between;align-items:center;gap:20px}
.v8in .fitem .fq .fmark{font-family:var(--font-body);color:var(--gold-deep);font-size:1.6rem;line-height:1;transition:.3s;flex:0 0 auto}
.v8in .fitem.open .fq .fmark{transform:rotate(45deg)}
.v8in .fitem .fa{overflow:hidden;max-height:0;transition:max-height .35s var(--ease)}
.v8in .fitem.open .fa{max-height:600px}
.v8in .fitem .fa p{padding:0 0 22px;color:var(--grey);max-width:74ch}

/* STILL ASKING strip */
.v8in .stillask{padding:30px 0 60px}
.v8in .stillask .panel{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;border-radius:24px;padding:44px;background:var(--cream-warm);border:1px solid var(--rule)}
.v8in .stillask h3{margin-bottom:8px}
.v8in .stillask p{color:var(--grey);font-size:var(--fs-body)}
.v8in .stillask .side{text-align:right}

/* ===========================================================================
   AREAS PAGE  (mockup-areas-page.html)
   =========================================================================== */
.v8in .aintro{padding:80px 0 20px;text-align:center}
.v8in .aintro .container{max-width:760px}
.v8in .aintro p{font-size:var(--fs-lead);color:var(--dark);line-height:1.75}.v8in .aintro .script{color:var(--gold-deep)}

.v8in .counties{padding:50px 0}
.v8in .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.v8in .county{background:var(--white);border:1px solid var(--rule);border-radius:20px;padding:32px 30px;transition:.3s var(--ease);position:relative;overflow:hidden}
.v8in .county:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 26px 60px -34px rgba(0,69,41,.45)}
.v8in .county .chead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}
.v8in .county h3{font-size:1.7rem;color:var(--green)}
.v8in .county .ctag{font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;color:var(--gold-deep);background:var(--green-mist);padding:5px 12px;border-radius:100px;white-space:nowrap}
.v8in .county .cnote{font-size:var(--fs-meta);color:var(--grey);margin-bottom:18px}
.v8in .chips{display:flex;flex-wrap:wrap;gap:10px}
.v8in .chips a{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--green);background:var(--cream-warm);border:1px solid var(--rule);border-radius:100px;padding:9px 18px;transition:.2s}
.v8in .chips a:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
/* town chip pair: keep both the photo + the film link without losing either */
.v8in .chips .chip-pair{display:inline-flex;align-items:stretch;border:1px solid var(--rule);border-radius:100px;overflow:hidden;background:var(--cream-warm)}
.v8in .chips .chip-pair a{border:0;border-radius:0;background:transparent}
.v8in .chips .chip-pair a.chip-town{font-weight:700;padding-right:12px}
.v8in .chips .chip-pair a.chip-film{padding-left:12px;padding-right:16px;color:var(--gold-deep);border-left:1px solid var(--rule)}
.v8in .chips .chip-pair a:hover{background:var(--green);color:var(--cream)}

.v8in .travel{padding:50px 0}
.v8in .travel .panel{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;border-radius:24px;padding:48px;background:linear-gradient(120deg,var(--green),var(--green-deep));color:var(--cream);position:relative;overflow:hidden}
.v8in .travel .panel::after{content:"";position:absolute;top:-120px;right:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(208,165,74,.25),transparent 65%)}
.v8in .travel h3{color:var(--cream);font-size:1.9rem;position:relative}.v8in .travel h3 .script{color:#E0C079}
.v8in .travel p{color:rgba(255,250,241,.85);font-weight:300;margin:12px 0 0;position:relative}
.v8in .travel .side{position:relative;text-align:right}

/* ===========================================================================
   CONTACT PAGE  (mockup-contact-page.html)
   =========================================================================== */
.v8in .contact{padding:90px 0 50px}
.v8in .contact .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:50px;align-items:start}

/* FORM — clear frosted glass card on cream field */
.v8in .formcard{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.55);border-radius:24px;padding:44px;box-shadow:0 30px 70px -38px rgba(0,40,24,.18),inset 1px 1px 0 0 rgba(255,255,255,.55);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);position:relative;overflow:hidden;color:var(--dark)}
.v8in .formcard::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.55),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 50%)}
.v8in .formcard .fhead{margin-bottom:26px;position:relative;z-index:2}
.v8in .formcard .fhead h2{font-size:clamp(1.8rem,3vw,2.4rem);color:var(--green)}.v8in .formcard .fhead .script{display:block;font-size:2rem;color:var(--gold-deep)}
.v8in .formcard .fhead p{color:var(--grey);font-size:var(--fs-meta);margin-top:8px}
.v8in .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v8in .field{margin-bottom:16px}
.v8in .field label{display:block;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.02em;color:var(--gold-deep);margin-bottom:7px}
.v8in .field input,.v8in .field select,.v8in .field textarea{width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--dark);background:rgba(255,250,241,.92);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:13px 16px;transition:.2s var(--ease)}
.v8in .field textarea{min-height:130px;resize:vertical;line-height:1.6}
.v8in .field input:focus,.v8in .field select:focus,.v8in .field textarea:focus{outline:none;border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px rgba(208,165,74,.2)}
.v8in .field input::-moz-placeholder, .v8in .field textarea::-moz-placeholder{color:rgba(84,89,95,.45)}
.v8in .field input::placeholder,.v8in .field textarea::placeholder{color:rgba(84,89,95,.45)}
.v8in .formcard .submit{width:100%;justify-content:center;margin-top:6px}
.v8in .formcard .fnote{text-align:center;font-family:var(--font-label);font-size:var(--fs-meta);color:var(--grey);margin-top:14px}
.v8in .formcard .fstatus{text-align:center;font-family:var(--font-label);font-size:var(--fs-meta);margin-top:14px}
.v8in .formcard .fstatus.ok{color:var(--green-deep)}
.v8in .formcard .fstatus.err{color:#c45b4a}

/* FORM — shared EnquiryForm overrides so it sits inside the clear glass card. */
.v8in .formcard .enqf{
  max-width:none !important;background:transparent !important;border:0 !important;
  border-radius:0 !important;padding:0 !important;box-shadow:none !important;backdrop-filter:none !important;
  font-family:var(--font-body) !important;
}
.v8in .formcard .enqf label{
  font-family:var(--font-label) !important;font-size:var(--fs-meta) !important;letter-spacing:.06em !important;
  text-transform:uppercase !important;color:var(--gold-deep) !important;margin:14px 0 7px !important;
}
.v8in .formcard .enqf .enqf-opt{color:var(--grey) !important;text-transform:none !important;letter-spacing:0 !important}
.v8in .formcard .enqf input,.v8in .formcard .enqf textarea,.v8in .formcard .enqf select{
  background:rgba(255,250,241,.92) !important;border:1px solid rgba(0,0,0,.08) !important;border-radius:12px !important;
  color:var(--dark) !important;font-size:var(--fs-body) !important;padding:13px 16px !important;
}
.v8in .formcard .enqf input:focus,.v8in .formcard .enqf textarea:focus,.v8in .formcard .enqf select:focus{
  border-color:var(--gold) !important;background:var(--white) !important;box-shadow:0 0 0 3px rgba(208,165,74,.2) !important;
}
.v8in .formcard .enqf input::-moz-placeholder, .v8in .formcard .enqf textarea::-moz-placeholder{color:rgba(84,89,95,.45) !important}
.v8in .formcard .enqf input::placeholder,.v8in .formcard .enqf textarea::placeholder{color:rgba(84,89,95,.45) !important}
.v8in .formcard .enqf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23A8842F' stroke-width='1.3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:12px !important}
.v8in .formcard .enqf select option{background:var(--white);color:var(--dark)}
.v8in .formcard .enqf select:invalid{color:rgba(84,89,95,.45) !important}
.v8in .formcard .enqf-btn{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none; cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:15px 40px !important; border-radius:100px !important; border:1px solid transparent !important;
  background:transparent !important; color:var(--gold-deep) !important; width:auto !important;
  font-family:var(--font-label) !important; font-size:var(--fs-meta) !important; letter-spacing:.22em !important; text-transform:uppercase !important; font-weight:700 !important;
  isolation:isolate; transition:color .35s ease, transform .4s cubic-bezier(.22,.61,.36,1), background .25s ease;
}
.v8in .formcard .enqf-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(168,132,47,.6); background:transparent;
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  -webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s; z-index:0;
}
.v8in .formcard .enqf-btn::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(100% - 44px); height:1px; background:rgba(168,132,47,.55);
  pointer-events:none; z-index:1; opacity:1; transition:opacity .12s linear 0s;
}
.v8in .formcard .enqf-btn span{position:relative;z-index:2}
.v8in .formcard .enqf-btn:hover:not(:disabled),
.v8in .formcard .enqf-btn:focus-visible:not(:disabled){
  color:#5c4518 !important; transform:scale(1.015); outline:none;
  background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1)) !important;
}
.v8in .formcard .enqf-btn:hover:not(:disabled)::before,
.v8in .formcard .enqf-btn:focus-visible:not(:disabled)::before{
  clip-path:inset(0 0 0 0 round 100px); -webkit-clip-path:inset(0 0 0 0 round 100px); transition-delay:0s;
}
.v8in .formcard .enqf-btn:hover:not(:disabled)::after,
.v8in .formcard .enqf-btn:focus-visible:not(:disabled)::after{opacity:0; transition-delay:.26s}
.v8in .formcard .enqf-btn:disabled{opacity:.6; cursor:default}
.v8in .formcard .enqf-tel{color:var(--grey) !important}
.v8in .formcard .enqf-tel:hover{color:var(--gold-deep) !important}
.v8in .formcard .enqf-note.ok{color:var(--green-deep) !important}
.v8in .formcard .enqf-note.err{color:#c45b4a !important}

/* ASIDE */
.v8in .aside .reassure{border-radius:22px;padding:0;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);box-shadow:var(--gshadow);color:var(--dark);position:relative;overflow:hidden;margin-bottom:22px}
.v8in .aside .reassure .rbody{padding:32px 34px 34px;position:relative;z-index:2}
.v8in .aside .reassure::after{content:"";position:absolute;top:-110px;right:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(208,165,74,.24),transparent 65%);z-index:1}
.v8in .aside .reassure .eyebrow{color:var(--gold-deep)}
.v8in .aside .reassure h3{color:var(--green);font-size:1.7rem;position:relative}.v8in .aside .reassure h3 .script{color:var(--gold-deep)}
.v8in .aside .reassure p{color:var(--grey);font-weight:400;font-size:var(--fs-meta);margin-top:12px;position:relative}
.v8in .aside .reassure .sc{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold);margin-top:16px;position:relative;display:block}

/* the two of us — real photos of Aaron and Hayden */
.v8in .duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,250,241,.16);position:relative;z-index:2}
.v8in .duo figure{margin:0;position:relative;background:var(--green-deep)}
.v8in .duo img{width:100%;height:210px;-o-object-fit:cover;object-fit:cover;filter:saturate(.95)}
.v8in .duo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;background:linear-gradient(180deg,transparent,rgba(0,40,24,.88));color:var(--cream)}
.v8in .duo .dn{font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.1}
.v8in .duo .dr{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
@media(max-width:520px){.v8in .duo img{height:170px}}


.v8in .nap{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.55);border-radius:22px;padding:34px;box-shadow:0 20px 50px -34px rgba(0,40,24,.18),inset 1px 1px 0 0 rgba(255,255,255,.55);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);position:relative;overflow:hidden;color:var(--dark)}
.v8in .nap::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.55),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 50%)}
.v8in .nap h3{font-size:1.5rem;margin-bottom:18px;position:relative;z-index:2;color:var(--green)}
.v8in .napitem{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;position:relative;z-index:2}
.v8in .napitem .ic{flex:0 0 38px;height:38px;border-radius:50%;background:rgba(0,96,58,.1);display:flex;align-items:center;justify-content:center}
.v8in .napitem .ic svg{width:18px;height:18px;stroke:var(--gold-deep);fill:none;stroke-width:1.8}
.v8in .napitem .nl{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.04em;color:var(--gold-deep);margin-bottom:2px}
.v8in .napitem .nv{font-size:var(--fs-meta);color:var(--dark)}.v8in .napitem .nv a:hover{color:var(--gold-deep)}
.v8in .nap .ctas{display:flex;flex-direction:column;gap:10px;margin-top:22px;position:relative;z-index:2}
.v8in .nap .ctas .btn{width:100%;justify-content:center}
.v8in .nap .btn-glass.on-light{border-color:rgba(0,96,58,.35);color:var(--green);background:rgba(0,96,58,.06)}
.v8in .nap .btn-glass.on-light:hover{background:rgba(0,96,58,.12);color:var(--green)}

/* ===========================================================================
   SHARED FINAL CTA (gfinal)  — used by all three pages
   =========================================================================== */
.v8in .gfinal{padding:110px 0;text-align:center}
.v8in .gfinal .stage{position:absolute;inset:0;background:url('/v8/becky-6.jpg') center/cover;z-index:0}
.v8in .gfinal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.66),rgba(0,40,24,.82));z-index:1}
.v8in .gfinal .card{position:relative;z-index:2;max-width:720px;margin:0 auto;color:var(--cream)}
.v8in .gfinal h2{color:var(--cream)}.v8in .gfinal h2 .script{color:var(--gold);display:block}
.v8in .gfinal p{color:rgba(255,250,241,.86);font-weight:300;margin:16px auto 14px;max-width:44ch}
.v8in .gfinal .sc{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold);margin-bottom:26px}
.v8in .gfinal .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media(max-width:980px){
  .v8in .container{padding:0 20px}.v8in .section{padding:60px 0}
  .v8in .phero{padding:110px 20px 44px;min-height:auto}
  .v8in .cgrid,.v8in .travel .panel{grid-template-columns:1fr;gap:22px}
  .v8in .travel .panel{padding:32px}.v8in .travel .side{text-align:left}
  .v8in .stillask .panel{grid-template-columns:1fr;gap:22px;padding:30px}.v8in .stillask .side{text-align:left}
  .v8in .fgroup .gsub{margin-left:0}
  .v8in .contact .grid{grid-template-columns:1fr;gap:28px}
  .v8in .formcard{padding:30px}
}
@media(max-width:520px){.v8in .frow{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html .v8in .reveal{opacity:1;transform:none}.v8in *{animation:none!important}}
/* ============================================================================
   Contact page dark reskin.
   Scoped to `.v8in.contact-dark` so the other .v8in pages (FAQ, Areas We Cover)
   stay light. Flips the page background and the two light glass cards to dark,
   restores the reassurance card to its green look, and returns the enquiry form
   to its default dark styling. The hero (.phero) and closing CTA (.gfinal) are
   already dark, so they are left alone.
   ============================================================================ */

.v8in.contact-dark{background:#0d1310;color:var(--cream)}

/* Page backdrop */
.v8in.contact-dark .bg-field{
  background:
    radial-gradient(60vw 60vw at 10% 8%,rgba(0,96,58,.20),transparent 60%),
    radial-gradient(50vw 50vw at 92% 40%,rgba(208,165,74,.10),transparent 60%),
    radial-gradient(55vw 55vw at 40% 92%,rgba(0,96,58,.14),transparent 60%),
    linear-gradient(180deg,#0d1310,#0b0f0c 55%,#0d1310);
}

/* Enquiry form card -> dark glass */
.v8in.contact-dark .formcard{
  background:rgba(12,18,13,.55);border:1px solid rgba(246,241,230,.14);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.7);color:var(--cream);
}
.v8in.contact-dark .formcard::before{background:radial-gradient(circle at 0 0,rgba(255,255,255,.06),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.10),transparent 50%)}
.v8in.contact-dark .formcard .fhead h2{color:var(--cream)}
.v8in.contact-dark .formcard .fhead .script{color:#E9C87E}
.v8in.contact-dark .formcard .fhead p{color:rgba(246,241,230,.72)}

/* Enquiry form fields -> back to the dark default */
.v8in.contact-dark .formcard .enqf label{color:rgba(246,241,230,.6) !important}
.v8in.contact-dark .formcard .enqf .enqf-opt{color:rgba(246,241,230,.34) !important}
.v8in.contact-dark .formcard .enqf input,.v8in.contact-dark .formcard .enqf textarea,.v8in.contact-dark .formcard .enqf select{
  background:rgba(11,15,12,.5) !important;border:1px solid rgba(246,241,230,.14) !important;color:#F6F1E6 !important;
}
.v8in.contact-dark .formcard .enqf input::-moz-placeholder, .v8in.contact-dark .formcard .enqf textarea::-moz-placeholder{color:rgba(246,241,230,.32) !important}
.v8in.contact-dark .formcard .enqf input::placeholder,.v8in.contact-dark .formcard .enqf textarea::placeholder{color:rgba(246,241,230,.32) !important}
.v8in.contact-dark .formcard .enqf input:focus,.v8in.contact-dark .formcard .enqf textarea:focus,.v8in.contact-dark .formcard .enqf select:focus{border-color:rgba(208,165,74,.55) !important;background:rgba(11,15,12,.5) !important;box-shadow:none !important}
.v8in.contact-dark .formcard .enqf select option{background:#0b0f0c;color:#F6F1E6}
.v8in.contact-dark .formcard .enqf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23C9A24B' stroke-width='1.3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:12px !important}
.v8in.contact-dark .formcard .enqf-btn{color:#F0D9A0 !important}
.v8in.contact-dark .formcard .enqf-btn::before{border-color:rgba(233,200,126,.7) !important}
.v8in.contact-dark .formcard .enqf-tel{color:rgba(246,241,230,.5) !important}
.v8in.contact-dark .formcard .fnote,.v8in.contact-dark .formcard .fstatus{color:rgba(246,241,230,.6)}

/* Reassurance card -> restore the green look Aaron preferred */
.v8in.contact-dark .aside .reassure{
  background:linear-gradient(120deg,var(--green),var(--green-deep));border:0;
  box-shadow:0 30px 80px -30px rgba(0,20,12,.6);color:var(--cream);backdrop-filter:none;
}
.v8in.contact-dark .aside .reassure .eyebrow{color:#E9C87E}
.v8in.contact-dark .aside .reassure h3{color:var(--cream)}
.v8in.contact-dark .aside .reassure h3 .script{color:#E0C079}
.v8in.contact-dark .aside .reassure p{color:rgba(255,250,241,.88)}

/* Find us card -> dark glass */
.v8in.contact-dark .nap{
  background:rgba(12,18,13,.55);border:1px solid rgba(246,241,230,.14);
  box-shadow:0 20px 50px -34px rgba(0,0,0,.6);color:var(--cream);
}
.v8in.contact-dark .nap::before{background:radial-gradient(circle at 0 0,rgba(255,255,255,.06),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.10),transparent 50%)}
.v8in.contact-dark .nap h3{color:var(--cream)}
.v8in.contact-dark .napitem .ic{background:rgba(233,200,126,.14)}
.v8in.contact-dark .napitem .ic svg{stroke:#E9C87E}
.v8in.contact-dark .napitem .nl{color:#E9C87E}
.v8in.contact-dark .napitem .nv{color:rgba(246,241,230,.9)}
.v8in.contact-dark .nap .btn-glass.on-light{border-color:rgba(246,241,230,.4);color:var(--cream);background:rgba(246,241,230,.06)}
.v8in.contact-dark .nap .btn-glass.on-light:hover{background:rgba(246,241,230,.14);color:var(--cream)}

/* Primary buttons hover to #5c4518 (dark brown) from the light inner pages,
   which is too murky on the dark contact page. Use cream for contrast. */
.v8in.contact-dark .btn-outline-primary:hover,
.v8in.contact-dark .btn-outline-primary:focus-visible{color:var(--cream)}

/* Wedding Hub journey uses the HubStrip dark variant (dark glass card, cream
   text) so it sits naturally on the dark Contact page. The panel had a fixed
   max-width but no page gutter, so at mid-width windows it ran to both edges
   while the rest of the page kept its 40px margin. Give it the SAME gutter and
   content cap as the page .container (40px gutter, 1120 content), so its edges
   track the form block and every other section at every width. /contact only. */
.hubstrip.hub-contact{padding-left:40px;padding-right:40px}
.hubstrip.hub-contact .hs-in{max-width:1120px;padding-left:52px;padding-right:52px}
@media(max-width:768px){
  .hubstrip.hub-contact{padding-left:20px;padding-right:20px}
}
/* ============================================================
   HOW WE WORK (/values) restructure, scoped to .vwork so nothing
   else is touched. Reuses the site dark DNA: glass tokens, gold +
   cream, ZCOOL XiaoWei / Oooh Baby / Lato, dhero-center hero.
   The journey is a vertical timeline with gold nodes and short
   phase kickers, NOT an 01/02/03 numbered list. One reading column
   (860) shared by the lead, the timeline and the Wedding Hub, so
   every section is the same width.
   ============================================================ */

/* centred lead under the hero */
.v8hub.vwork .vwork-lead{padding:clamp(56px,8vw,90px) 0 0;text-align:center}
.v8hub.vwork .vwork-lead .in{max-width:860px;margin:0 auto;padding:0 40px}
.v8hub.vwork .vwork-lead p{font-family:var(--font-body);font-weight:300;font-size:var(--fs-lead);line-height:1.75;color:rgba(255,250,241,.85)}
.v8hub.vwork .vwork-lead .script{color:var(--gold-light)}

/* journey */
.v8hub.vwork .vwork-journey{padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,110px)}
.v8hub.vwork .vwork-head{max-width:860px;margin:0 auto 46px;padding:0 40px;text-align:center}
.v8hub.vwork .vwork-head .eyebrow{margin-bottom:12px}
.v8hub.vwork .vwork-head p{max-width:60ch;margin:16px auto 0;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-lead);line-height:1.65}

/* the journey: a horizontal ribbon (same pattern as the homepage), a gold line
   with a node per stage and a short label + descriptor beneath. Icon-free. */
.v8hub.vwork .vwork-ribbon{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;
  max-width:1000px;margin:52px auto 0;padding:0 40px}
.v8hub.vwork .vwork-ribbon::before{content:"";position:absolute;left:calc(40px + 7%);right:calc(40px + 7%);top:32px;height:2px;background:rgba(255,250,241,.14)}
.v8hub.vwork .vwork-ribbon::after{content:"";position:absolute;left:calc(40px + 7%);top:32px;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));transition:width 1.8s cubic-bezier(.16,1,.3,1) .35s}
.v8hub.vwork .vwork-ribbon.in::after{width:86%}
.v8hub.vwork .vwork-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:62px}
.v8hub.vwork .vwork-node{position:absolute;top:25px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 6px var(--ink),0 0 0 7px rgba(208,165,74,.35);transition:transform .4s var(--ease)}
.v8hub.vwork .vwork-stage:hover .vwork-node{transform:translateX(-50%) scale(1.18)}
.v8hub.vwork .vwork-rl{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);color:var(--cream);line-height:1.15}
.v8hub.vwork .vwork-rs{font-family:var(--font-body);font-weight:300;font-size:var(--fs-label);color:rgba(255,250,241,.55);line-height:1.3}

/* our approach: a centred prose block in the reading column */
.v8hub.vwork .vwork-approach{padding:clamp(48px,7vw,90px) 0}
.v8hub.vwork .vwork-approach .in{max-width:860px;margin:0 auto;padding:0 40px;text-align:center}
.v8hub.vwork .vwork-approach .eyebrow{margin-bottom:12px}
.v8hub.vwork .vwork-approach p{margin:16px auto 0;color:rgba(255,250,241,.85);font-weight:300;font-size:var(--fs-lead);line-height:1.75}

/* Wedding Hub: same reading column + gutter as the rest, so one width */
.v8hub .hubstrip.hub-vwork{padding-left:40px;padding-right:40px}
.v8hub .hubstrip.hub-vwork .hs-in{max-width:1000px}

@media(max-width:768px){
  .v8hub.vwork .vwork-lead .in,
  .v8hub.vwork .vwork-approach .in,
  .v8hub.vwork .vwork-head{padding-left:22px;padding-right:22px}
  .v8hub .hubstrip.hub-vwork{padding-left:22px;padding-right:22px}
  /* stack the ribbon into rows, drop the line (same as the homepage) */
  .v8hub.vwork .vwork-ribbon{grid-auto-flow:row;grid-auto-columns:none;gap:24px;max-width:360px;padding:0 22px}
  .v8hub.vwork .vwork-ribbon::before,.v8hub.vwork .vwork-ribbon::after{display:none}
  .v8hub.vwork .vwork-stage{flex-direction:row;align-items:center;text-align:left;gap:16px;padding-top:0}
  .v8hub.vwork .vwork-node{position:relative;top:0;left:0;transform:none;flex:0 0 16px}
  .v8hub.vwork .vwork-stage:hover .vwork-node{transform:scale(1.18)}
}
/* ============================================================
   RMG wedding gallery — dark-glass styles (net-new only)

   Re-skinned to the approved DARK-GLASS .v8hub system, matching
   the just-approved Real Weddings page. All design tokens
   (--green, --gold, --gold-light, --cream, --glass, --glass-brd,
   --blur, --gshadow, --rule-light, --ink, --ease, --maxw,
   --font-*) come from the .v8hub scope defined in hub.css, which
   the WeddingGallery component imports BEFORE this file. The
   shared dark helpers (.dhero, .filmcard, .dfinal, .container,
   .btn, .reveal, .eyebrow, .script) live in hub.css and
   dark-content.css and are reused as-is.

   This file only adds the gallery-specific extras: the hero
   breadcrumb and venue line on top of the reused .dhero, the dark
   photo grid, the constrained film-card wrapper, the final CTA
   button row, and the LIGHTBOX overlay (dark, with gold controls).

   Page styles are scoped under .v8hub so they never leak. The
   lightbox renders as a sibling of .v8hub, so its rules are scoped
   under .glightbox with glb-/glightbox-prefixed children to keep
   them self-contained. Built from hub.css tokens so the lightbox
   stays in the same dark-glass family.
   ============================================================ */

/* ---- Hero extras layered over the reused .dhero ----
   The base .dhero (dark-content.css) supplies the image, the
   green-to-ink scrim, the layout and the cream/gold type. A
   gallery hero is a touch shorter than a content hero, and adds a
   breadcrumb plus a venue line. */
.v8hub .dhero.ghero { min-height: 58vh; }
.v8hub .ghero .crumb {
  font-family: var(--font-label);
  font-size:var(--fs-meta);
  letter-spacing: .04em;
  color: rgba(255, 250, 241, .72);
  margin-bottom: 18px;
}
.v8hub .ghero .crumb a { color: rgba(255, 250, 241, .72); transition: color .2s var(--ease); }
.v8hub .ghero .crumb a:hover { color: var(--gold-light); }
.v8hub .ghero .crumb span { opacity: .5; margin: 0 8px; }
.v8hub .ghero .ghero-venue {
  font-family: var(--font-label);
  font-size:var(--fs-meta);
  letter-spacing: .03em;
  color: rgba(255, 250, 241, .78);
  margin-top: 16px;
}

/* ---- Photo grid (masonry via CSS columns, handles mixed orientation) ----
   Dark wells with a green-tinted drop shadow and a gold focus
   ring, so the photographs pop off the dark field. */
.v8hub .gallery-sec { padding: 64px 0 40px; }
.v8hub .gallery-grid {
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.v8hub .gtile {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--rule-light);
  background: rgba(255, 250, 241, .04);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .8);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.v8hub .gtile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s var(--ease);
}
.v8hub .gtile:hover {
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  box-shadow: 0 36px 80px -30px rgba(208, 165, 74, .4);
}
.v8hub .gtile:hover img { transform: scale(1.05); }
.v8hub .gtile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- Film card wrapper (constrained so the single card sits left) ---- */
.v8hub .gfilm { margin-top: 36px; max-width: 560px; }

/* ---- Final CTA button row ---- */
.v8hub .dfinal .gfinal-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* ============================================================
   LIGHTBOX (sibling of .v8hub, self-contained, dark glass)
   A deep ink backdrop with a blur, the photo on a soft gold-edged
   stage, and frosted controls that warm to gold on hover. Tokens
   are pulled from the .v8hub scope where available, with literal
   fallbacks baked in since the overlay renders outside .v8hub.
   ============================================================ */
.glightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(11, 16, 13, .94);
  backdrop-filter: blur(10px);
  animation: glightbox-fade .25s ease;
}
@keyframes glightbox-fade { from { opacity: 0; } to { opacity: 1; } }

.glightbox .glb-stage {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.glightbox .glb-stage img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 250, 241, .16);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .7);
}
.glightbox .glb-count {
  font-family: 'Roboto', sans-serif;
  font-size:var(--fs-meta);
  letter-spacing: .06em;
  color: rgba(255, 250, 241, .82);
  margin-top: 16px;
}

.glightbox .glb-close,
.glightbox .glb-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 250, 241, .4);
  background: rgba(255, 250, 241, .1);
  color: #FFFAF1;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.glightbox .glb-close:hover,
.glightbox .glb-nav:hover { background: #D0A54A; border-color: #D0A54A; color: #0F1512; }
.glightbox .glb-close:focus-visible,
.glightbox .glb-nav:focus-visible { outline: 2px solid #E0C079; outline-offset: 3px; }

.glightbox .glb-close {
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
}
.glightbox .glb-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.glightbox .glb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
}
.glightbox .glb-nav:hover { transform: translateY(-50%) scale(1.06); }
.glightbox .glb-prev { left: 22px; }
.glightbox .glb-next { right: 22px; }
.glightbox .glb-nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .v8hub .gallery-grid { -moz-column-count: 2; column-count: 2; }
}
@media (max-width: 560px) {
  .v8hub .dhero.ghero { min-height: auto; }
  .v8hub .gallery-grid { -moz-column-count: 1; column-count: 1; }
  .v8hub .gfilm { max-width: 100%; }
  .glightbox { padding: 16px; }
  .glightbox .glb-nav { width: 44px; height: 44px; }
  .glightbox .glb-prev { left: 10px; }
  .glightbox .glb-next { right: 10px; }
  .glightbox .glb-close { top: 14px; right: 14px; }
}
/* ============================================================
   FILMS : CINEMATIC JOURNEY
   A bespoke, one-continuous-film treatment for /films. Scoped
   entirely under .cine so it never leaks into other pages.
   Brand fonts (ZCOOL XiaoWei / Oooh Baby / Lato) via the global
   tokens, with literal fallbacks. Real photography via inline
   background-image; the hero runs a real muted Vimeo loop.
   ============================================================ */
.cine{
  --ink:#0B0F0C; --ink-2:#0E1310;
  --green:#00603A; --green-deep:#003D24;
  --gold:#D0A54A; --gold-light:#E9C87E; --gold-deep:#A8842F; --gold-soft:rgba(208,165,74,.32);
  --cream:#F6F1E6; --muted:rgba(246,241,230,.56); --faint:rgba(246,241,230,.32); --hair:rgba(246,241,230,.12);
  --serif:var(--font-display,'ZCOOL XiaoWei',Georgia,serif);
  --script:var(--font-script,'Oooh Baby',cursive);
  --sans:var(--font-body,'Lato',-apple-system,system-ui,sans-serif);
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.6;font-size:var(--fs-lead);
  position:relative;overflow:hidden;-webkit-font-smoothing:antialiased;
}
.cine *{box-sizing:border-box}
.cine::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cine::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50vw 50vw at 12% 6%,rgba(0,96,58,.18),transparent 60%),
    radial-gradient(46vw 40vw at 90% 30%,rgba(208,165,74,.07),transparent 62%),
    radial-gradient(60vw 55vw at 50% 100%,rgba(0,61,36,.26),transparent 60%)}
.cine > *{position:relative;z-index:1}
.cine .wrap{max-width:1220px;margin:0 auto;padding:0 clamp(22px,5vw,68px)}
.cine .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.cine h1,.cine h2,.cine h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.004em}
.cine .script{font-family:var(--script);color:var(--gold-light);font-size:1.28em;line-height:.9;display:inline-block}
.cine .chapter{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:700}
.cine .chapter::before{content:"";width:30px;height:1px;background:var(--gold-soft)}
.cine p{margin:0}

/* reel progress rail */
.cine .reel{position:fixed;left:26px;top:0;bottom:0;width:2px;z-index:40;pointer-events:none}
.cine .reel .track{position:absolute;top:12vh;bottom:12vh;left:0;width:2px;background:var(--hair)}
.cine .reel .fill{position:absolute;top:12vh;left:0;width:2px;height:0;background:linear-gradient(var(--gold),var(--gold-deep));box-shadow:0 0 12px rgba(208,165,74,.5)}
@media(max-width:820px){.cine .reel{display:none}}

/* glass CTA (homepage effect) */
.cine .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:15px 32px;border-radius:100px;
  font-family:var(--sans);font-size:var(--fs-label);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:#F0D9A0;background:transparent;border:1px solid transparent;text-decoration:none;cursor:pointer;isolation:isolate;
  transition:color .35s ease,transform .4s var(--ease)}
.cine .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;border:1px solid rgba(233,200,126,.6);
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s var(--ease) .18s}
.cine .btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:-1;width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.85);transition:opacity .12s linear}
.cine .btn:hover,.cine .btn:focus-visible{color:#FFF5D6;transform:scale(1.015);outline:none;
  background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1));backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 40px -18px rgba(0,0,0,.6)}
.cine .btn:hover::before,.cine .btn:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.cine .btn:hover::after,.cine .btn:focus-visible::after{opacity:0;transition-delay:.26s}

/* stills / motion */
.cine .still{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#0c1c15}
.cine video.still{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.cine .alive{animation:cine-kb 16s var(--ease) infinite alternate}
@keyframes cine-kb{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.cine .sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(246,241,230,.12) 48%,transparent 62%);
  transform:translateX(-40%);animation:cine-sheen 7s var(--ease) infinite}
@keyframes cine-sheen{0%,74%{transform:translateX(-60%);opacity:0}84%{opacity:1}100%{transform:translateX(60%);opacity:0}}
.cine .grain-f::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E")}
.cine .play{width:70px;height:70px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;
  background:rgba(11,15,12,.3);backdrop-filter:blur(6px)}
.cine .play svg{width:22px;height:22px;fill:var(--cream);margin-left:3px}

/* CHAPTER ONE hero */
.cine .c1{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;padding:14vh 0}
.cine .c1 .frame,.cine .c1 .hero-loop{position:absolute;inset:0;z-index:0;overflow:hidden}
.cine .c1 .hero-loop iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.cine .c1 .poster{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.cine .c1 .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,15,12,.6),rgba(11,15,12,.32) 40%,rgba(11,15,12,.86))}
.cine .c1 .bars{position:absolute;left:0;right:0;height:7vh;z-index:2;background:#060806}
.cine .c1 .bars.t{top:0}.cine .c1 .bars.b{bottom:0}
.cine .c1-inner{position:relative;z-index:3;text-align:center}
.cine .c1 h1{font-size:var(--fs-display);line-height:1.0;letter-spacing:-.01em}
.cine .c1 h1 .script{display:block;font-size:.5em;margin-top:.16em;color:var(--gold-light)}
.cine .c1 .cue{position:absolute;bottom:9vh;left:50%;transform:translateX(-50%);z-index:3;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:12px}
.cine .c1 .cue span{width:1px;height:40px;background:linear-gradient(var(--gold-soft),transparent);animation:cine-drop 2.4s var(--ease) infinite}
@keyframes cine-drop{0%{opacity:0;transform:translateY(-10px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

.cine section{padding:clamp(90px,15vh,180px) 0}
.cine .ch-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,7vh,80px)}
.cine .ch-head h2{font-size:var(--fs-h2);line-height:1.05;margin-top:20px;color:var(--cream)}
.cine .ch-head p{margin-top:20px;color:var(--muted);max-width:52ch;margin-inline:auto}

/* CHAPTER TWO split */
.cine .split{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-width:1120px;margin:0 auto;border-radius:6px;overflow:hidden;box-shadow:0 50px 120px -40px rgba(0,0,0,.8)}
@media(max-width:760px){.cine .split{grid-template-columns:1fr}}
.cine .pane{position:relative;aspect-ratio:4/5;overflow:hidden}
.cine .pane .tag{position:absolute;top:16px;left:16px;z-index:4;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--cream);background:rgba(11,15,12,.45);border:1px solid var(--hair);padding:6px 12px;border-radius:100px;backdrop-filter:blur(6px)}
.cine .pane.moving .cap{position:absolute;left:18px;right:18px;bottom:64px;z-index:4;font-family:var(--serif);font-size:var(--fs-lead);color:var(--cream);opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease) .3s,transform 1s var(--ease) .3s}
.cine .split.in .pane.moving .cap{opacity:1;transform:none}
.cine .pane.moving .still{animation-play-state:paused}
.cine .split.in .pane.moving .still{animation-play-state:running}
.cine .wave-mini{position:absolute;left:18px;right:18px;bottom:22px;height:26px;z-index:4;display:flex;align-items:flex-end;gap:3px;opacity:0;transition:opacity 1.1s var(--ease) .8s}
.cine .split.in .pane.moving .wave-mini{opacity:.9}
.cine .wave-mini i{flex:1;background:var(--gold-light);border-radius:2px;height:20%;animation:cine-wv 1.2s ease-in-out infinite}
@keyframes cine-wv{0%,100%{height:18%}50%{height:90%}}

/* CHAPTER THREE waveform cards */
.cine .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);max-width:1000px;margin:0 auto}
@media(max-width:720px){.cine .cards{grid-template-columns:1fr}}
.cine .wcard{position:relative;border-radius:16px;border:1px solid var(--hair);padding:26px 26px 22px;cursor:pointer;overflow:hidden;text-align:left;
  background:rgba(246,241,230,.045);backdrop-filter:blur(16px);color:var(--cream);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.7);transition:transform .4s var(--ease),border-color .4s}
.cine .wcard:hover{transform:translateY(-4px);border-color:var(--gold-soft)}
.cine .wcard .lab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:18px}
.cine .wcard .lab b{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--cream)}
.cine .wcard .lab .dur{font-size:var(--fs-label);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;font-variant-numeric:tabular-nums}
.cine .wave{position:relative;display:flex;align-items:center;gap:2px;height:56px}
.cine .wave i{flex:1;background:var(--faint);border-radius:2px;transition:height .3s var(--ease),background .3s}
.cine .wcard:hover .wave i{background:rgba(233,200,126,.55)}
.cine .wcard .fillbar{position:absolute;top:0;bottom:0;left:0;width:0;pointer-events:none;overflow:hidden}
.cine .wcard .fillbar .wave i{background:var(--gold-light)}
.cine .wcard .hint{margin-top:14px;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.cine .wcard.playing .hint{color:var(--gold-light)}

/* CHAPTER FOUR freeze vs breathe */
.cine .cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;max-width:1120px;margin:0 auto}
@media(max-width:820px){.cine .cmp{grid-template-columns:1fr}}
.cine .cmp figure{position:relative;aspect-ratio:5/6;border-radius:6px;overflow:hidden;border:1px solid var(--hair);margin:0}
.cine .cmp .word{position:absolute;left:22px;bottom:20px;z-index:3;font-family:var(--serif);font-size:var(--fs-h3);color:var(--cream)}
.cine .cmp .word small{display:block;font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}

/* CHAPTER FIVE case studies */
.cine .case{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;max-width:1160px;margin:0 auto clamp(40px,7vh,80px)}
.cine .case:last-child{margin-bottom:0}
.cine .case.flip{grid-template-columns:.85fr 1.15fr}
.cine .case.flip .case-media{order:2}
@media(max-width:820px){.cine .case,.cine .case.flip{grid-template-columns:1fr}.cine .case.flip .case-media{order:0}}
.cine .case-media{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 40px 90px -46px rgba(0,0,0,.8)}
.cine .case-media .still{animation-play-state:paused}
.cine .case-media:hover .still{animation-play-state:running}
.cine .case-media .glow{position:absolute;inset:0;z-index:2;background:radial-gradient(60% 50% at 50% 60%,transparent,rgba(11,15,12,.55));opacity:0;transition:opacity .5s}
.cine .case-media:hover .glow{opacity:1}
.cine .case-media .play{position:absolute;inset:0;margin:auto;z-index:3;opacity:.85;transition:transform .4s var(--ease)}
.cine .case-media:hover .play{transform:scale(1.08)}
.cine .case h3{font-size:var(--fs-h3);color:var(--cream)}
.cine .case .meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:26px 0 28px;border-top:1px solid var(--hair);padding-top:22px}
.cine .case .meta div span{display:block;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.cine .case .meta div b{font-family:var(--serif);font-weight:400;font-size:var(--fs-lead);color:var(--cream)}
.cine .case .links{display:flex;gap:22px;flex-wrap:wrap}
.cine .case .links a{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);text-decoration:none;border-bottom:1px solid var(--gold-soft);padding-bottom:3px;transition:color .3s,border-color .3s}
.cine .case .links a:hover{color:var(--cream);border-color:var(--cream)}

/* CHAPTER SIX floating hub */
.cine .hub{position:relative;min-height:96vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,8vh,110px) 0}
.cine .stage{position:relative;height:clamp(380px,50vh,520px);max-width:920px;margin:clamp(40px,6vh,80px) auto 0;perspective:1700px}
.cine .screen{position:absolute;border-radius:16px;border:1px solid var(--hair);overflow:hidden;
  background:rgba(20,26,22,.6);backdrop-filter:blur(20px);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.08) inset}
.cine .screen .bar{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--hair);font-family:var(--serif);font-size:var(--fs-body);color:var(--cream);letter-spacing:.05em}
.cine .screen .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-light)}
.cine .row{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--hair);font-size:var(--fs-meta);color:var(--cream)}
.cine .row:last-child{border-bottom:0}
.cine .row .ic{width:24px;height:24px;border-radius:7px;background:rgba(208,165,74,.14);display:grid;place-items:center;color:var(--gold-light);font-size:var(--fs-meta)}
.cine .row .chip{margin-left:auto;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--hair);color:var(--muted)}
.cine .row .chip.done{color:#BFE8C8;border-color:rgba(120,200,140,.4);background:rgba(0,96,58,.22)}
.cine .screen.s1{width:min(60%,540px);left:1%;top:20%;z-index:2;transform:rotateY(9deg) rotateX(3deg);animation:cine-f1 9s var(--ease) infinite alternate}
.cine .screen.s2{width:min(56%,470px);right:1%;top:0;z-index:3;transform:rotateY(-8deg) rotateX(2deg);animation:cine-f2 11s var(--ease) infinite alternate}
.cine .screen.s3{width:min(44%,410px);right:16%;bottom:0;z-index:4;transform:rotateY(-6deg);animation:cine-f3 10s var(--ease) infinite alternate}
@keyframes cine-f1{to{transform:rotateY(9deg) rotateX(3deg) translateY(-16px)}}
@keyframes cine-f2{to{transform:rotateY(-8deg) rotateX(2deg) translateY(14px)}}
@keyframes cine-f3{to{transform:rotateY(-6deg) translateY(-10px)}}
.cine .screen.s3 .thumb{height:170px;background-size:cover;background-position:center;position:relative}
.cine .screen.s3 .thumb .play{position:absolute;inset:0;margin:auto;width:44px;height:44px}
@media(max-width:820px){.cine .stage{height:auto;display:flex;flex-direction:column;gap:16px;perspective:none}
  .cine .screen{position:relative;width:100%!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;animation:none!important}}

/* CHAPTER SEVEN enquiry */
.cine .end{position:relative}
.cine .end-head{text-align:center;max-width:640px;margin:0 auto clamp(34px,5vh,54px)}
.cine .end-head h2{font-size:var(--fs-h2);color:var(--cream);line-height:1.05;margin-top:18px}
.cine .end-head p{color:var(--muted);margin-top:18px}
.cine .formcard{max-width:640px;margin:0 auto;background:rgba(246,241,230,.045);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(26px,4vw,44px);backdrop-filter:blur(16px);box-shadow:0 40px 90px -44px rgba(0,0,0,.7)}
.cine .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.cine .frow{grid-template-columns:1fr}}
.cine .formcard label{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.cine .formcard label .opt{text-transform:none;letter-spacing:0;color:var(--faint);font-size:var(--fs-label);font-weight:400}
.cine .formcard input,.cine .formcard textarea,.cine .formcard select{width:100%;background:rgba(11,15,12,.4);border:1px solid var(--hair);border-radius:8px;
  padding:13px 15px;color:var(--cream);font-family:var(--sans);font-size:var(--fs-body);transition:border-color .3s}
.cine .formcard input:focus,.cine .formcard textarea:focus,.cine .formcard select:focus{outline:none;border-color:var(--gold-soft)}
.cine .formcard input::-moz-placeholder, .cine .formcard textarea::-moz-placeholder{color:var(--faint)}
.cine .formcard input::placeholder,.cine .formcard textarea::placeholder{color:var(--faint)}
.cine .formcard select{-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23C9A24B' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.cine .formcard select option{background:#0b0f0c;color:var(--cream)}
.cine .formcard select:invalid{color:var(--faint)}
.cine .submit-row{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cine .form-note{font-size:var(--fs-meta);color:var(--muted)}
.cine .form-note.ok{color:#BFE8C8}.cine .form-note.err{color:#E7A79A}
.cine .tel{color:var(--gold-light);text-decoration:none;letter-spacing:.05em;font-size:var(--fs-body)}

/* CLOSING HAND-OFF into photography */
.cine .next{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden;padding:0}
.cine .next .frame{position:absolute;inset:0;z-index:0}
.cine .next .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,15,12,.9),rgba(11,15,12,.5) 58%,rgba(11,15,12,.74))}
.cine .next-inner{position:relative;z-index:2;max-width:600px}
.cine .next h2{font-size:var(--fs-h2);color:var(--cream);line-height:1.05;margin-top:20px}
.cine .next p{color:var(--muted);margin:20px 0 34px;max-width:44ch}
.cine .next .go{display:inline-flex;align-items:center;gap:16px;margin-top:26px;font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.cine .next .arrow{width:46px;height:1px;background:linear-gradient(90deg,var(--gold-soft),transparent);position:relative}
.cine .next .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg)}

.cine .rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.cine .rv.in{opacity:1;transform:none}
.cine a:focus-visible,.cine .wcard:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  .cine .rv{opacity:1;transform:none;transition:none}
  .cine .alive,.cine .sheen::after,.cine .wave-mini i,.cine .c1 .cue span,.cine .screen{animation:none!important}
}

/* Chapter Two — scroll-flip card: the still becomes film */
.cine .flipfx{perspective:1700px;max-width:1000px;margin:0 auto}
.cine .flipcard{position:relative;aspect-ratio:16/10;transform-style:preserve-3d;transition:transform .12s linear;will-change:transform}
.cine .flipface{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden;box-shadow:0 50px 120px -40px rgba(0,0,0,.8);border:1px solid var(--hair)}
.cine .flipface .still-img{position:absolute;inset:0;background-size:cover;background-position:center}
.cine .flipface video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.cine .flipface.back{transform:rotateX(180deg)}
.cine .flipface .tag{position:absolute;top:16px;left:16px;z-index:4;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--cream);background:rgba(11,15,12,.45);border:1px solid var(--hair);padding:6px 12px;border-radius:100px;backdrop-filter:blur(6px)}
.cine .flipface .cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:4;font-family:var(--serif);font-size:var(--fs-lead);color:var(--cream);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.cine .fliphint{text-align:center;margin-top:22px;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
@media(prefers-reduced-motion:reduce){.cine .flipcard{transition:none;transform:rotateX(180deg)}}

/* The journey — the day told in moving clips */
.cine .journey{position:relative}
.cine .jpanel{position:relative;height:88vh;min-height:540px;overflow:hidden;display:flex;align-items:flex-end}
.cine .jpanel video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:0}
.cine .jpanel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,10,9,.34),transparent 28%,transparent 52%,rgba(8,10,9,.86))}
.cine .jpanel .jcap{position:relative;z-index:2;width:100%;padding-bottom:clamp(42px,7vh,92px)}
.cine .jpanel .jnum{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-light);font-weight:700}
.cine .jpanel .jnum::before{content:"";width:30px;height:1px;background:var(--gold-soft)}
.cine .jpanel .jtitle{font-family:var(--serif);font-size:clamp(40px,7vw,88px);color:var(--cream);margin-top:12px;line-height:1;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.cine .jpanel .jline{font-family:var(--serif);font-size:clamp(17px,2vw,22px);color:rgba(246,241,230,.86);margin-top:14px;max-width:520px}
@media(prefers-reduced-motion:reduce){.cine .jpanel{height:auto;min-height:0}.cine .jpanel video{position:relative;height:auto}}

/* Chapter Five — Real Weddings CTA banner */
.cine .films-cta{position:relative;min-height:66vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.cine .films-cta-bg{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:0;filter:brightness(.5)}
.cine .films-cta::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 45%,rgba(8,10,9,.35),rgba(8,10,9,.84))}
.cine .films-cta-inner{position:relative;z-index:2;max-width:760px}
.cine .films-cta-inner h2{font-family:var(--serif);font-size:var(--fs-h1);color:var(--cream);margin:16px 0}
.cine .films-cta-inner p{color:rgba(246,241,230,.85);font-size:var(--fs-lead);max-width:560px;margin:0 auto 32px}
.cine .films-cta-btn{display:inline-block;padding:16px 42px;border-radius:100px;border:1px solid var(--gold-light);color:#F0D9A0;font-size:var(--fs-meta);letter-spacing:.26em;text-transform:uppercase;font-weight:700;text-decoration:none;transition:background .3s,color .3s}
.cine .films-cta-btn:hover{background:var(--gold-light);color:var(--ink)}

/* Chapter Three — soundtrack, film-led visual */
.cine .sound{position:relative;overflow:hidden;min-height:82vh;display:flex;align-items:center;padding:clamp(60px,10vh,120px) 0}
.cine .sound-bg{position:absolute;inset:0;z-index:0}
.cine .sound-bg video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;filter:saturate(.98) brightness(.72)}
.cine .sound-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,9,.88),rgba(8,10,9,.5) 55%,rgba(8,10,9,.72)),linear-gradient(0deg,rgba(11,15,12,.6),transparent 42%)}
.cine .sound .wrap{position:relative;z-index:2}
.cine .sound .ch-head{text-align:left;margin-inline:0;max-width:620px}
.cine .sound .ch-head p{margin-inline:0}
.cine .sound-note{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:7px 15px;border:1px solid var(--gold-soft);border-radius:100px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);background:rgba(8,12,9,.4);backdrop-filter:blur(6px)}
.cine .sound-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-light)}
/* review-only placeholder styling: dashed amber so unconfirmed copy is obvious */
.cine .sound-note.is-placeholder{color:#F0B54A;border-color:#F0B54A;border-style:dashed;background:rgba(240,181,74,.08)}
.cine .sound-note.is-placeholder::before{background:#F0B54A}
/* speech clip cards — visible video, tap to play with sound */
.cine .speech-clips{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px;max-width:760px}
.cine .speechcard{position:relative;flex:1 1 210px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;cursor:pointer;padding:0;border:1px solid var(--hair);background:#0c1c15;transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.cine .speechcard:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:0 28px 54px -30px rgba(0,0,0,.7)}
.cine .speechcard video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;pointer-events:none}
.cine .speechcard .sc-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,9,.15) 0%,transparent 34%,rgba(8,12,9,.82) 100%)}
.cine .speechcard .sc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,12,9,.42);border:1px solid rgba(246,241,230,.6);backdrop-filter:blur(6px);transition:.35s var(--ease)}
.cine .speechcard .sc-play svg{width:20px;height:20px;fill:var(--cream);margin-left:2px}
.cine .speechcard:hover .sc-play{background:rgba(233,200,126,.28);border-color:var(--gold-light)}
.cine .speechcard.playing .sc-play{opacity:0;pointer-events:none}
.cine .speechcard .sc-lab{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;text-align:left;font-family:var(--serif);font-weight:400;font-size:var(--fs-lead);color:var(--cream);line-height:1.15}
.cine .speechcard .sc-ph{position:absolute;top:12px;left:12px;z-index:2;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:#0c1c15;background:#F0B54A;padding:4px 9px;border-radius:100px;font-weight:700}
/* ============================================================
   PHOTOGRAPHY : CINEMATIC JOURNEY
   Built around the memories couples treasure most. Scoped under
   .pho so it never leaks into other pages. Brand fonts via the
   global tokens with fallbacks; real photography via inline
   background-image (g1-g5 gradients are only a fallback for the
   Details grid until real detail shots are dropped in).
   ============================================================ */
.pho{
  --ink:#0B0F0C; --ink-2:#0E1310;
  --green:#00603A; --green-deep:#003D24;
  --gold:#D0A54A; --gold-light:#E9C87E; --gold-deep:#A8842F; --gold-soft:rgba(208,165,74,.32);
  --cream:#F6F1E6; --muted:rgba(246,241,230,.56); --faint:rgba(246,241,230,.32); --hair:rgba(246,241,230,.12);
  --serif:var(--font-display,'ZCOOL XiaoWei',Georgia,serif);
  --script:var(--font-script,'Oooh Baby',cursive);
  --sans:var(--font-body,'Lato',-apple-system,system-ui,sans-serif);
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.6;font-size:var(--fs-lead);-webkit-font-smoothing:antialiased;position:relative;overflow:hidden;
}
.pho *{box-sizing:border-box}
.pho::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pho::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50vw 50vw at 12% 6%,rgba(0,96,58,.16),transparent 60%),radial-gradient(46vw 40vw at 90% 30%,rgba(208,165,74,.08),transparent 62%),radial-gradient(60vw 55vw at 50% 100%,rgba(0,61,36,.24),transparent 60%)}
.pho > *{position:relative;z-index:1}
.pho .wrap{max-width:1220px;margin:0 auto;padding:0 clamp(22px,5vw,68px)}
.pho .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.pho h1,.pho h2,.pho h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.004em}
.pho .script{font-family:var(--script);color:var(--gold-light);font-size:1.28em;line-height:.9;display:inline-block}
.pho .chapter{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-label);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:700}
.pho .chapter::before{content:"";width:30px;height:1px;background:var(--gold-soft)}
.pho p{margin:0}

.pho .reel{position:fixed;left:26px;top:0;bottom:0;width:2px;z-index:40;pointer-events:none}
.pho .reel .track{position:absolute;top:12vh;bottom:12vh;left:0;width:2px;background:var(--hair)}
.pho .reel .fill{position:absolute;top:12vh;left:0;width:2px;height:0;background:linear-gradient(var(--gold),var(--gold-deep));box-shadow:0 0 12px rgba(208,165,74,.5)}
@media(max-width:820px){.pho .reel{display:none}}

.pho .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:15px 32px;border-radius:100px;font-family:var(--sans);font-size:var(--fs-label);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#F0D9A0;background:transparent;border:1px solid transparent;text-decoration:none;cursor:pointer;isolation:isolate;transition:color .35s ease,transform .4s var(--ease)}
.pho .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;border:1px solid rgba(233,200,126,.6);clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);transition:clip-path .3s var(--ease) .18s}
.pho .btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:-1;width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.85);transition:opacity .12s linear}
.pho .btn:hover,.pho .btn:focus-visible{color:#FFF5D6;transform:scale(1.015);outline:none;background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1));backdrop-filter:blur(16px) saturate(160%);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 40px -18px rgba(0,0,0,.6)}
.pho .btn:hover::before,.pho .btn:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.pho .btn:hover::after,.pho .btn:focus-visible::after{opacity:0;transition-delay:.26s}

.pho .ph{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#0c1c15}
.pho .g1{background:linear-gradient(150deg,rgba(0,61,36,.5),rgba(11,15,12,.15) 45%,rgba(0,0,0,.55)),radial-gradient(80% 70% at 32% 22%,rgba(208,165,74,.3),transparent 60%),linear-gradient(30deg,#0b271c,#123c2a 42%,#091510)}
.pho .g2{background:linear-gradient(160deg,rgba(0,0,0,.4),transparent 50%,rgba(0,61,36,.5)),radial-gradient(70% 60% at 70% 28%,rgba(233,200,126,.42),transparent 60%),linear-gradient(210deg,#181209,#33270f 46%,#0f0d09)}
.pho .g3{background:linear-gradient(160deg,rgba(0,61,36,.36),transparent 55%,rgba(0,0,0,.5)),radial-gradient(70% 60% at 45% 78%,rgba(208,165,74,.26),transparent 60%),linear-gradient(120deg,#0c1c15,#20301f 52%,#0a140f)}
.pho .g4{background:radial-gradient(90% 80% at 60% 30%,rgba(233,200,126,.34),transparent 62%),linear-gradient(200deg,#2a1f10,#120d07 60%)}
.pho .g5{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.55)),radial-gradient(80% 70% at 30% 40%,rgba(0,96,58,.4),transparent 60%),linear-gradient(20deg,#0a1712,#16281c 55%,#091410)}
.pho .grain-f::before{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E")}
.pho .kb{animation:pho-kb 18s var(--ease) infinite alternate}
@keyframes pho-kb{from{transform:scale(1.05)}to{transform:scale(1.14) translate(-2%,-1%)}}

.pho section{padding:clamp(90px,15vh,180px) 0}
.pho .ch-head{max-width:720px;margin:0 0 clamp(34px,5vh,58px)}
.pho .ch-head.center{margin-inline:auto;text-align:center}
.pho .ch-head h2{font-size:var(--fs-h2);line-height:1.06;margin-top:18px;color:var(--cream)}
.pho .ch-head p{margin-top:18px;color:var(--muted);max-width:52ch}
.pho .ch-head.center p{margin-inline:auto}

/* HERO */
.pho .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;padding:14vh 0;text-align:center}
.pho .hero .frame{position:absolute;inset:0;z-index:0}
.pho .hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,15,12,.62),rgba(11,15,12,.34) 42%,rgba(11,15,12,.85))}
.pho .hero-inner{position:relative;z-index:2}
.pho .hero h1{font-size:var(--fs-display);line-height:1.0;letter-spacing:-.01em}
.pho .hero h1 .script{display:block;font-size:.5em;margin-top:.14em;color:var(--gold-light)}
.pho .hero p{margin:28px auto 0;max-width:40ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.14rem)}
.pho .cue{position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);z-index:2;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:12px}
.pho .cue span{width:1px;height:38px;background:linear-gradient(var(--gold-soft),transparent)}

/* THE TWO OF YOU */
.pho .two{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,72px);align-items:stretch}
@media(max-width:860px){.pho .two{grid-template-columns:1fr;gap:30px}}
/* photo fills the full height of the content column (no fixed aspect box) and
   reveals with a clean vertical wipe once the section scrolls in */
.pho .two-media{position:relative;height:100%;min-height:clamp(440px,60vh,660px);border-radius:8px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 50px 110px -46px rgba(0,0,0,.8);clip-path:inset(0 0 100% 0)}
.pho .two.in .two-media{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease)}
@media(max-width:860px){.pho .two-media{height:auto;min-height:0;aspect-ratio:4/5}}
.pho .two-copy{display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.pho .two.in .two-copy{opacity:1;transform:none}
.pho .lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.pho .lines li{position:relative;padding:15px 0;border-bottom:1px solid var(--hair);font-family:var(--serif);font-size:clamp(1.08rem,1.65vw,1.42rem);color:var(--cream);transition:color .4s var(--ease),padding-left .4s var(--ease)}
.pho .lines li::before{content:"";position:absolute;left:0;top:50%;width:0;height:1.5px;background:var(--gold-light);transform:translateY(-50%);transition:width .45s var(--ease)}
.pho .lines li:hover{color:var(--gold-light);padding-left:22px}
.pho .lines li:hover::before{width:15px}
/* staggered reveal of the lines once the section scrolls in */
.pho .two.in .lines li{animation:pho-line-in .62s var(--ease) both}
.pho .two.in .lines li:nth-child(1){animation-delay:.20s}
.pho .two.in .lines li:nth-child(2){animation-delay:.28s}
.pho .two.in .lines li:nth-child(3){animation-delay:.36s}
.pho .two.in .lines li:nth-child(4){animation-delay:.44s}
.pho .two.in .lines li:nth-child(5){animation-delay:.52s}
.pho .two.in .lines li:nth-child(6){animation-delay:.60s}
.pho .two.in .lines li:nth-child(7){animation-delay:.68s}
@keyframes pho-line-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .pho .two-media{clip-path:none}
  .pho .two-copy{opacity:1;transform:none}
  .pho .two.in .lines li{animation:none}
}

/* THE PEOPLE YOU LOVE */
.pho .montage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:12px}
@media(max-width:860px){.pho .montage{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}}
.pho .mtile{position:relative;overflow:hidden;border-radius:5px;border:1px solid var(--hair)}
.pho .mtile .ph{transition:transform .8s var(--ease)}
.pho .mtile:hover .ph{transform:scale(1.06)}
.pho .mtile .cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-size:var(--fs-meta);letter-spacing:.02em;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pho .mtile .scr{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(8,12,9,.8))}
.pho .tall{grid-row:span 2}.pho .wide{grid-column:span 2}

/* THE DETAILS YOU CHOSE */
.pho .details{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:860px){.pho .details{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.pho .details{grid-template-columns:repeat(2,1fr)}}
.pho .dtile{position:relative;aspect-ratio:1;border-radius:5px;overflow:hidden;border:1px solid var(--hair)}
.pho .dtile .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 12px;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream);background:linear-gradient(transparent,rgba(8,12,9,.82))}

/* ── Detail reel: gentle auto-drift 3D filmstrip, drag to move faster ── */
.pho .detailreel{position:relative;margin-top:6px;overflow:hidden;cursor:grab;perspective:1400px;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pho .detailreel.dragging{cursor:grabbing}
.pho .detailreel-track{display:flex;gap:22px;width:-moz-max-content;width:max-content;padding:36px 0;transform-style:preserve-3d;will-change:transform}
.pho .dr-card{position:relative;flex:0 0 auto;width:clamp(210px,23vw,272px);aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:1px solid var(--hair);background:#0c1c15;box-shadow:0 34px 66px -32px rgba(0,0,0,.72);transform-style:preserve-3d;will-change:transform,opacity;-moz-user-select:none;user-select:none;-webkit-user-select:none}
.pho .dr-card .ph{pointer-events:none}
.pho .dr-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 50%,rgba(8,12,9,.86))}
.pho .dr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.pho .dr-hint{position:absolute;right:4px;bottom:2px;z-index:3;font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--faint);pointer-events:none}
@media(max-width:640px){.pho .dr-card{width:clamp(168px,58vw,220px)}}
@media(prefers-reduced-motion:reduce){.pho .detailreel{perspective:none;cursor:default;overflow-x:auto}.pho .detailreel-track{padding:14px 0}.pho .dr-card{transform:none!important;opacity:1!important}}

/* THE ATMOSPHERE */
.pho .atmos{display:grid;gap:14px}
.pho .band{position:relative;height:clamp(240px,42vh,420px);border-radius:6px;overflow:hidden;border:1px solid var(--hair)}
.pho .band .cap{position:absolute;left:26px;bottom:22px;z-index:2;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);color:var(--cream)}
.pho .band.split2{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:auto;border:0;border-radius:0}
.pho .band.split2 > div{position:relative;height:clamp(220px,36vh,360px);border-radius:6px;overflow:hidden;border:1px solid var(--hair)}

/* THE MOMENTS YOU NEVER SAW */
.pho .never{position:relative;min-height:104vh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding:clamp(110px,18vh,200px) 24px 80px}
/* dense masonry wall of candid guest & venue moments (no bride or groom) */
.pho .never-wall{position:absolute;inset:-2%;z-index:0;-moz-columns:7 168px;columns:7 168px;-moz-column-gap:8px;column-gap:8px;opacity:.72}
.pho .never-wall .nw-img{width:100%;margin:0 0 8px;display:block;border-radius:4px;-moz-column-break-inside:avoid;break-inside:avoid;border:1px solid var(--hair);filter:saturate(.96) brightness(.9)}
/* radial scrim: dark behind the quote (upper-centre), clearing toward the edges */
.pho .never-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 34%, rgba(8,12,9,.96) 0%, rgba(8,12,9,.92) 26%, rgba(8,12,9,.62) 56%, rgba(8,12,9,.4) 80%, rgba(8,12,9,.5) 100%)}
.pho .never-quote{position:relative;z-index:3;max-width:760px;text-align:center;padding:0 24px}
.pho .never-quote .chapter{display:inline-flex;justify-content:center;margin-bottom:22px}
.pho .never-quote q{display:block;font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.3;color:var(--cream);quotes:none}

/* THE STORY */
.pho .strip-wrap{position:relative}
.pho .strip{display:flex;gap:16px;overflow-x:auto;padding:6px 4px 22px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pho .strip::-webkit-scrollbar{height:6px}.pho .strip::-webkit-scrollbar-thumb{background:var(--hair);border-radius:6px}
.pho .frame-s{position:relative;flex:0 0 auto;width:min(64vw,340px);aspect-ratio:3/2;border-radius:6px;overflow:hidden;border:1px solid var(--hair);scroll-snap-align:start;padding:0;cursor:pointer;display:block;text-align:left;transition:transform .4s var(--ease),border-color .4s var(--ease)}
.pho .frame-s:hover{transform:translateY(-4px);border-color:var(--gold-soft)}
.pho .frame-s .ph{transition:transform .8s var(--ease)}
.pho .frame-s:hover .ph{transform:scale(1.05)}
/* moment lightbox — the same moment across every wedding */
.pho .moment-lb{position:fixed;inset:0;z-index:200;background:rgba(6,9,7,.86);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,54px);animation:mlb-in .3s var(--ease)}
@keyframes mlb-in{from{opacity:0}to{opacity:1}}
.pho .moment-lb-inner{width:min(1100px,100%);max-height:90vh;overflow-y:auto;background:rgba(12,18,13,.7);border:1px solid var(--hair);border-radius:14px;padding:clamp(20px,3vw,38px);box-shadow:0 60px 140px -50px rgba(0,0,0,.9)}
.pho .moment-lb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.pho .moment-lb-head .chapter{margin-bottom:10px}
.pho .moment-lb-head h3{font-family:var(--serif);font-weight:400;font-size:var(--fs-h3);color:var(--cream);line-height:1.1}
.pho .moment-lb-head h3 .script{color:var(--gold-light)}
.pho .moment-lb-close{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--hair);background:rgba(246,241,230,.06);color:var(--cream);font-size:26px;line-height:1;cursor:pointer;transition:.3s var(--ease)}
.pho .moment-lb-close:hover{background:var(--gold-light);color:var(--ink);border-color:var(--gold-light)}
.pho .moment-lb-grid{-moz-columns:3 240px;columns:3 240px;-moz-column-gap:12px;column-gap:12px}
.pho .moment-lb-tile{margin:0 0 12px;-moz-column-break-inside:avoid;break-inside:avoid;border-radius:8px;overflow:hidden;border:1px solid var(--hair)}
.pho .moment-lb-tile img{width:100%;display:block}
@media(max-width:640px){.pho .moment-lb-grid{-moz-columns:2 140px;columns:2 140px}}
.pho .frame-s .cap{position:absolute;left:16px;bottom:14px;z-index:2}
.pho .frame-s .cap small{display:block;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:4px;font-variant-numeric:tabular-nums}
.pho .frame-s .cap b{font-family:var(--serif);font-weight:400;font-size:var(--fs-lead);color:var(--cream)}
.pho .frame-s .scr{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(8,12,9,.8))}
.pho .strip-hint{font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:8px}

/* CLOSE + enquiry */
.pho .end-head{text-align:center;max-width:640px;margin:0 auto clamp(34px,5vh,54px)}
.pho .end-head h2{font-size:var(--fs-h2);color:var(--cream);line-height:1.05;margin-top:18px}
.pho .end-head p{color:var(--muted);margin-top:18px}
.pho .formcard{max-width:640px;margin:0 auto;background:rgba(246,241,230,.045);border:1px solid var(--hair);border-radius:16px;padding:clamp(26px,4vw,44px);backdrop-filter:blur(16px);box-shadow:0 40px 90px -44px rgba(0,0,0,.7)}
.pho .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.pho .frow{grid-template-columns:1fr}}
.pho .formcard label{display:block;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.pho .formcard input,.pho .formcard textarea{width:100%;background:rgba(11,15,12,.4);border:1px solid var(--hair);border-radius:8px;padding:13px 15px;color:var(--cream);font-family:var(--sans);font-size:var(--fs-body);transition:border-color .3s}
.pho .formcard input:focus,.pho .formcard textarea:focus{outline:none;border-color:var(--gold-soft)}
.pho .formcard input::-moz-placeholder, .pho .formcard textarea::-moz-placeholder{color:var(--faint)}
.pho .formcard input::placeholder,.pho .formcard textarea::placeholder{color:var(--faint)}
.pho .submit-row{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pho .form-note{font-size:var(--fs-meta);color:var(--muted)}.pho .form-note.ok{color:#BFE8C8}.pho .form-note.err{color:#E7A79A}
.pho .tel{color:var(--gold-light);text-decoration:none;letter-spacing:.05em;font-size:var(--fs-body)}

/* HAND-OFF INTO FILM */
.pho .next{position:relative;min-height:64vh;display:flex;align-items:center;overflow:hidden;padding:0}
.pho .next .frame{position:absolute;inset:0;z-index:0}
.pho .next .frame video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;filter:saturate(1.02) brightness(.9)}
.pho .next .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,15,12,.9),rgba(11,15,12,.5) 58%,rgba(11,15,12,.74))}
.pho .next-inner{position:relative;z-index:2;max-width:560px}
.pho .next h2{font-size:var(--fs-h2);color:var(--cream);margin-top:18px}
.pho .next p{color:var(--muted);margin:18px 0 30px;max-width:42ch}
.pho .next .go{display:inline-flex;align-items:center;gap:16px;margin-top:22px;font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.pho .next .arrow{width:46px;height:1px;background:linear-gradient(90deg,var(--gold-soft),transparent);position:relative}
.pho .next .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg)}

.pho .rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.pho .rv.in{opacity:1;transform:none}
.pho a:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.pho .rv{opacity:1;transform:none;transition:none}.pho .kb,.pho .never .float,.pho .cue span{animation:none!important}}
/* ============================================================
   RMG location / venue templates: DARK-GLASS skin (.v8hub)
   ------------------------------------------------------------
   This file re-skins the geo + venue landing templates from the
   old cream `.v8loc` system to the approved dark-glass `.v8hub`
   system. It is the geo sibling of dark-content.css: the same
   dark field, the same glass, the same gold script.

   It carries ONLY the geo-specific pieces that hub.css and
   dark-content.css do not already provide: the breadcrumb hero,
   the local intro band, the two-craft tiles, the venue cards
   grid, the Wedding Hub callout, the local testimonial panel and
   the town/county/venue interlink chips.

   Everything generic is reused verbatim and NOT redefined here:
     - tokens, base type, .container, .section, .btn, .btn-primary,
       .eyebrow, .script, .lead, .reveal, .panel-glass, the .faq*
       accordion and the .bg-field come from hub.css.
     - the content hero (.dhero), the final CTA (.dfinal) and the
       frosted enquiry form (.enquiry/.formcard) come from
       dark-content.css.

   Every selector is scoped under .v8hub so the dark theme can
   never leak into the homepage (.v8), the cream .v8loc pages, the
   portal, the CRM/dashboard or anywhere else. Google Fonts are
   already loaded in index.html, so nothing font-related is
   imported here. No tokens, no .btn, no .glass, no .faq are
   redefined: they all inherit from hub.css.
   ============================================================ */

/* ============================================================
   GEO HERO  (.ghero)
   Image-backed hero with a breadcrumb, sitting inside the .v8hub
   dark field. Mirrors the dark-content .dhero scrim so cream type
   and the gold script always read, and adds the breadcrumb +
   hero CTA row that the geo template needs.
   ============================================================ */
.v8hub .ghero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;padding:140px 0 60px}
.v8hub .ghero .gbg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.v8hub .ghero::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(15,21,18,.34),rgba(0,40,24,.5) 44%,rgba(15,21,18,.92)),
  radial-gradient(70% 60% at 18% 100%,rgba(0,96,58,.45),transparent 70%)}
.v8hub .ghero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 40px;color:var(--cream)}
.v8hub .ghero .crumb{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.72);letter-spacing:.04em;margin-bottom:18px}
.v8hub .ghero .crumb a:hover{color:var(--gold-light)}
.v8hub .ghero .crumb span{opacity:.5;margin:0 7px}
.v8hub .ghero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.98;color:var(--cream);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.v8hub .ghero h1 .script{color:var(--gold-light);font-size:.62em}
.v8hub .ghero p{font-size:var(--fs-lead);color:rgba(255,250,241,.9);font-weight:300;margin:18px 0 28px;max-width:46ch}
.v8hub .ghero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* glass CTA used on the geo hero + final block (dark-glass variant) */
.v8hub .btn-glass{background:rgba(255,250,241,.12);border-color:rgba(255,250,241,.5);color:var(--cream);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.v8hub .btn-glass:hover{background:rgba(255,250,241,.2);border-color:var(--cream)}

/* ============================================================
   LOCAL INTRO BAND  (.intro)
   The unique-per-town opening. A narrow editorial column of cream
   prose over the dark field, signed off by Aaron & Hayden.
   ============================================================ */
.v8hub .intro .container{max-width:920px}
.v8hub .intro .eyebrow{margin-bottom:14px}
.v8hub .intro h2 .script{color:var(--gold-light)}
.v8hub .intro p{font-size:var(--fs-lead);color:rgba(255,250,241,.84);font-weight:300;margin-top:18px;line-height:1.85}
.v8hub .intro .sig{margin-top:24px;display:flex;align-items:center;gap:14px;font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.66)}
.v8hub .intro .sig b{color:var(--gold-light);font-family:var(--font-display);font-weight:400;font-size:var(--fs-body)}

/* ============================================================
   TWO CRAFTS  (.crafts)
   Photography + Film, as two image-backed tiles with a green→ink
   scrim. Reuses the dark scrim idiom from the film cards.
   ============================================================ */
.v8hub .crafts{padding:60px 0}
.v8hub .crafts-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.v8hub .craft{position:relative;border-radius:18px;overflow:hidden;min-height:320px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--cream);
  border:1px solid var(--rule-light);box-shadow:0 24px 60px -34px rgba(0,0,0,.7)}
.v8hub .craft .cbg{position:absolute;inset:0;background-size:cover;background-position:center;transition:.8s var(--ease)}
.v8hub .craft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 32%,rgba(0,40,24,.9))}
.v8hub .craft:hover .cbg{transform:scale(1.06)}
.v8hub .craft>*{position:relative;z-index:2}
.v8hub .craft h3{font-family:var(--font-display);font-weight:400;color:var(--cream);font-size:1.7rem;margin-bottom:8px}
.v8hub .craft p{font-size:var(--fs-meta);color:rgba(255,250,241,.9);font-weight:300}

/* ============================================================
   VENUE CARDS  (.venues / .vgrid / .venue)
   "Where we shoot": a header row plus a grid of frosted glass
   venue cards. Glass cards replace the old white cards so they
   sit in the dark family.
   ============================================================ */
.v8hub .venues .vhead{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;align-items:end;margin-bottom:46px}
.v8hub .venues .vhead .eyebrow{margin-bottom:10px}
.v8hub .venues .vhead h2 .script{color:var(--gold-light)}
.v8hub .venues .vhead .lead{color:rgba(255,250,241,.78)}
.v8hub .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v8hub .venue{border-radius:18px;overflow:hidden;background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);position:relative}
.v8hub .venue .vimg{height:170px;background-size:cover;background-position:center}
.v8hub .venue .vbody{padding:22px;position:relative;z-index:1}
.v8hub .venue h4{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);color:var(--cream);margin-bottom:6px}
.v8hub .venue p{font-size:var(--fs-meta);color:rgba(255,250,241,.78);font-weight:300}

/* ============================================================
   WEDDING HUB CALLOUT  (.hubcta)
   A single wide green→deep panel with a gold bloom, holding the
   "your private Wedding Hub" pitch and the link into the Hub.
   ============================================================ */
.v8hub .hubcta{padding:30px 0}
.v8hub .hubcta .panel{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;border-radius:24px;padding:44px;
  background:linear-gradient(120deg,var(--green),var(--green-deep));border:1px solid var(--glass-brd);color:var(--cream);position:relative;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,30,18,.7)}
.v8hub .hubcta .panel::after{content:"";position:absolute;top:-120px;right:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(208,165,74,.28),transparent 65%);pointer-events:none}
.v8hub .hubcta .panel>*{position:relative;z-index:1}
.v8hub .hubcta .eyebrow,.v8hub .hubcta .eyebrow.light{color:var(--gold-light)}
.v8hub .hubcta h3{font-family:var(--font-display);font-weight:400;color:var(--cream);font-size:1.9rem}
.v8hub .hubcta h3 .script{color:var(--gold-light)}
.v8hub .hubcta p{color:rgba(255,250,241,.88);font-weight:300;margin:12px 0 0}
.v8hub .hubcta .side{text-align:right}

/* ============================================================
   LOCAL TESTIMONIAL  (.gtesti)
   A centred frosted glass panel holding the sample local review.
   Reuses .panel-glass from hub.css for the frosted slab; this only
   styles the quote type and the attribution line.
   ============================================================ */
.v8hub .gtesti{padding:70px 0}
.v8hub .gtesti .panel{max-width:900px;margin:0 auto;padding:48px;text-align:center}
.v8hub .gtq{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--cream);line-height:1.4}
.v8hub .gtq em{font-family:var(--font-script);font-style:normal;color:var(--gold-light)}
.v8hub .gtw{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.6);margin-top:16px}

/* ============================================================
   INTERLINK  (.interlink)
   Town / county / venue / nearby-areas chips. Critical for SEO,
   so every link is preserved. This only restyles the chips to
   dark glass with a gold-on-hover fill.
   ============================================================ */
.v8hub .interlink{padding:60px 0}
.v8hub .interlink .panel{border-radius:22px;padding:40px;background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);position:relative;overflow:hidden}
.v8hub .interlink .panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 100% 0,rgba(208,165,74,.12),transparent 55%)}
.v8hub .interlink .panel>*{position:relative;z-index:1}
.v8hub .interlink h3{font-family:var(--font-display);font-weight:400;color:var(--cream);font-size:1.5rem;margin-bottom:8px}
.v8hub .interlink .lead{color:rgba(255,250,241,.78)}
.v8hub .ilrow{margin-top:18px}
.v8hub .ilrow .ill{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold-light);letter-spacing:.04em;margin-bottom:10px}
.v8hub .ilchips{display:flex;flex-wrap:wrap;gap:10px}
.v8hub .ilchips a{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--cream);background:rgba(255,250,241,.06);border:1px solid var(--rule-light);border-radius:100px;padding:9px 18px;transition:.2s var(--ease)}
.v8hub .ilchips a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ============================================================
   FINAL CTA: geo deltas only
   The frosted enquiry form (.enquiry/.formcard) and the centred
   CTA card (.dfinal) both come from dark-content.css. The geo
   template renders the form as a bare .gform (not wrapped in
   .enquiry), carries an extra small-print line (.sc) and a phone
   CTA row (.ctas), so those few pieces are styled here, reusing
   the dark-content field treatment.
   ============================================================ */
.v8hub .gfinal{padding:110px 0;text-align:center;position:relative;overflow:hidden}
.v8hub .gfinal .stage{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.v8hub .gfinal::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,21,18,.78),rgba(0,40,24,.9)),radial-gradient(60% 50% at 50% 0,rgba(208,165,74,.16),transparent 65%)}
.v8hub .gfinal .container{position:relative;z-index:2}
.v8hub .gfinal .card{max-width:720px;margin:0 auto;color:var(--cream)}
.v8hub .gfinal .eyebrow,.v8hub .gfinal .eyebrow.light{color:var(--gold-light)}
.v8hub .gfinal h2{color:var(--cream)}
.v8hub .gfinal h2 .script{color:var(--gold-light);display:block}
.v8hub .gfinal p{color:rgba(255,250,241,.86);font-weight:300;margin:16px auto 14px;max-width:44ch}
.v8hub .gfinal .sc{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold-light);margin-bottom:26px}
.v8hub .gfinal .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* enquiry form: frosted glass card with dark fields (geo .gform variant,
   matching the .enquiry/.formcard treatment in dark-content.css) */
.v8hub .gform{position:relative;z-index:2;max-width:560px;margin:30px auto 0;padding:34px;text-align:left;border-radius:22px;
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow);overflow:hidden}
.v8hub .gform::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.1),transparent 55%)}
.v8hub .gform>*{position:relative;z-index:1}
.v8hub .gform .field{margin-bottom:14px}
.v8hub .gform label{display:block;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em;color:rgba(255,250,241,.78);margin-bottom:7px}
.v8hub .gform input,
.v8hub .gform textarea{width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--cream);background:rgba(255,250,241,.06);border:1px solid var(--rule-light);border-radius:12px;padding:13px 15px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.v8hub .gform input::-moz-placeholder, .v8hub .gform textarea::-moz-placeholder{color:rgba(255,250,241,.4)}
.v8hub .gform input::placeholder,
.v8hub .gform textarea::placeholder{color:rgba(255,250,241,.4)}
.v8hub .gform input:focus,
.v8hub .gform textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,250,241,.1)}
.v8hub .gform textarea{resize:none}
.v8hub .gform input[type="date"]{color-scheme:dark}
.v8hub .gform .gbtn{width:100%;margin-top:6px}
.v8hub .gform .gbtn:disabled{opacity:.65;cursor:not-allowed}
.v8hub .gform .fmsg{font-family:var(--font-label);font-size:var(--fs-meta);text-align:center;margin-top:14px}
.v8hub .gform .fmsg.ok{color:var(--gold-light)}
.v8hub .gform .fmsg.err{color:#ff9a8f}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .v8hub .ghero{padding:120px 0 44px;min-height:auto}
  .v8hub .ghero-inner{padding:0 20px}
  .v8hub .crafts{padding:40px 0}
  .v8hub .crafts-grid,.v8hub .hubcta .panel,.v8hub .venues .vhead{grid-template-columns:1fr;gap:22px}
  .v8hub .vgrid{grid-template-columns:1fr 1fr}
  .v8hub .hubcta .side{text-align:left}
  .v8hub .gfinal{padding:70px 0}
}
@media(max-width:560px){.v8hub .vgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .v8hub .reveal{opacity:1;transform:none}
  .v8hub *{animation:none!important;transition:none!important}
}

/* Wedding Hub band alignment (geo pages).
   The shared HubStrip defaults to a 1180 centred card, which sits ~30px more
   inset than every other section on a geo page (whose .container caps at
   --maxw 1320 with a 40px gutter). Give the band the same 40px page gutter and
   cap its card to the container's content width (1320 - 2*40 = 1240) so the
   card edge lines up with all the other content. Mirrors the Contact and Areas
   HubStrip overrides. */
.v8hub .hubstrip{padding-left:40px;padding-right:40px}
.v8hub .hubstrip .hs-in{max-width:1120px}
@media(max-width:768px){.v8hub .hubstrip{padding-left:20px;padding-right:20px}}

/* ============================================================================
   GEO MEDIA BREAKS
   The geo pages were very copy-heavy (only a hero and a closing image). These
   classes break the prose up with real RMG work photography, the Wedding Hub
   explainer video, and two image CTA cards (Packages + Real Weddings). All sit
   inside .container so they share the page margin. Reused across every geo page.
   ============================================================================ */

/* Full-width image band */
.v8hub .geo-fig{margin:0;border-radius:18px;overflow:hidden;position:relative}
.v8hub .geo-fig img{width:100%;height:auto;-o-object-fit:cover;object-fit:cover;aspect-ratio:16/7}
.v8hub .geo-fig figcaption{position:absolute;left:24px;bottom:18px;z-index:2;color:var(--cream);
  font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.7)}
.v8hub .geo-fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(11,15,12,.55))}

/* Wedding Hub explainer video */
.v8hub .geo-video{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;
  background:#0b0f0c;border:1px solid var(--glass-brd)}
.v8hub .geo-video video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}

/* CTA cards (Packages / Real Weddings) */
.v8hub .geo-cta{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.v8hub .geo-cta-card{position:relative;isolation:isolate;border-radius:18px;overflow:hidden;
  min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;
  text-decoration:none;color:var(--cream)}
.v8hub .geo-cta-card .gc-bg{position:absolute;inset:0;z-index:-2;background-size:cover;
  background-position:center;transition:transform .7s var(--ease)}
.v8hub .geo-cta-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,15,12,.18),rgba(11,15,12,.84))}
.v8hub .geo-cta-card:hover .gc-bg{transform:scale(1.06)}
.v8hub .geo-cta-card .gc-eyebrow{font-family:var(--font-label);font-size:var(--fs-meta);
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.v8hub .geo-cta-card h3{font-family:var(--font-display);font-weight:400;color:var(--cream);
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin-bottom:8px}
.v8hub .geo-cta-card p{font-family:var(--font-body);color:rgba(246,241,230,.82);
  font-size:var(--fs-body);line-height:1.55;margin-bottom:16px;max-width:40ch}
.v8hub .geo-cta-card .gc-go{font-family:var(--font-label);font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.v8hub .geo-cta-card .gc-go::after{content:" \2192"}

@media(max-width:768px){
  .v8hub .geo-cta{grid-template-columns:1fr}
  .v8hub .geo-fig img{aspect-ratio:4/3}
  .v8hub .geo-cta-card{min-height:230px;padding:24px}
}

/* Geo FAQ, Packages style: a centred, simple, always-open Q and A column with a
   hairline divider and a serif question, matching /packages. Replaces the
   left-aligned accordion so the section reads clean and elegant. */
.v8hub .faq-centered .sec-top{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.v8hub .faq-simple{max-width:820px;margin:0 auto}
.v8hub .faq-simple .faq-q{border-top:1px solid var(--rule-light);padding:24px 0;text-align:center}
.v8hub .faq-simple .faq-q:last-child{border-bottom:1px solid var(--rule-light)}
.v8hub .faq-simple .faq-q h4{font-family:var(--font-display);font-weight:400;font-size:1.3rem;line-height:1.35;color:var(--cream);margin-bottom:10px;text-align:center}
.v8hub .faq-simple .faq-q p{font-family:var(--font-body);color:rgba(246,241,230,.72);font-size:var(--fs-body);line-height:1.65}

/* Two-up image pair (reuses .geo-fig for caption + gradient). */
.v8hub .geo-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.v8hub .geo-duo .geo-fig img{aspect-ratio:4/3;height:100%}
@media(max-width:768px){.v8hub .geo-duo{grid-template-columns:1fr}}

/* ---- Geo pages: match the normal-page hero rule and content column ----
   The geo hero was only 74vh while the site's shared hero (.phero) is full
   height, and the geo content column was 1320 while the inner pages use 1200.
   Bring both into line so the geo pages sit consistently with the rest of the
   site. Scoped to .content-sec (geo only) and the geo .dhero.tall. */
.v8hub .dhero.tall{min-height:100vh}
.v8hub .dhero.tall .dhero-in{max-width:1200px}
.v8hub .content-sec .container{max-width:1200px}
@media(max-width:768px){
  .v8hub .dhero.tall{min-height:auto}
}

/* Centre the geo hero content, matching the site's other heroes (.phero /
   .dhero-center). The geo .dhero was bottom-left aligned; this stacks the
   eyebrow, headline and lead centred like every other page. */
.v8hub .dhero.tall{align-items:center;justify-content:center;text-align:center}
.v8hub .dhero.tall .dhero-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.v8hub .dhero.tall .dhero-in p{margin-left:auto;margin-right:auto}

/* Opener section set to two text columns with no heading rail (.pcol). The
   editorial heading+prose grid is cancelled and the prose flows across two
   balanced columns so the long opener reads more easily. */
.v8hub .content-sec.pcol .container:has(> .prose-dark){display:block}
.v8hub .content-sec.pcol .container:has(> .prose-dark) > .prose-dark{max-width:none;-moz-column-count:2;column-count:2;-moz-column-gap:56px;column-gap:56px}
.v8hub .content-sec.pcol .prose-dark p{-moz-column-break-inside:auto;break-inside:auto;margin-bottom:18px}
@media(max-width:768px){
  .v8hub .content-sec.pcol .container:has(> .prose-dark) > .prose-dark{-moz-column-count:1;column-count:1}
}

/* Centred prose section (.ctr): heading and body centred in a narrow column,
   cancelling the editorial heading-rail grid. Used for the primary-service and
   local-context sections on the geo pages. */
.v8hub .content-sec.ctr .container:has(> .prose-dark){display:block;text-align:center}
.v8hub .content-sec.ctr .container:has(> .prose-dark) > .sec-top{max-width:760px;margin:0 auto 34px;position:static;text-align:center}
.v8hub .content-sec.ctr .container:has(> .prose-dark) > .prose-dark{max-width:720px;margin:0 auto;text-align:center}
.v8hub .content-sec.ctr .container:has(> .prose-dark) > .spec-card{max-width:760px;margin:28px auto 0}

/* When a .pcol section keeps its heading (e.g. Why couples choose us), the
   heading sits on top rather than in a sticky rail. */
.v8hub .content-sec.pcol .container:has(> .prose-dark) > .sec-top{position:static;margin:0 auto 32px;max-width:720px;text-align:center}

/* Standalone glass-card break, sits between the two centred geo sections. */
.v8hub .content-sec.spec-sec{padding:20px 0}
.v8hub .spec-break{max-width:860px;margin-left:auto;margin-right:auto}

/* "Keep looking" cards: photo-backed glass cards matching the Areas We Cover
   location cards, centred grid. Each card carries a background (nearby town
   photos from the areas page; Real Weddings, Areas and Packages use their own
   page hero). */
.v8hub .keep-sec .sec-top{max-width:720px;margin:0 auto 44px;text-align:center;position:static}
/* Centre the intro blurb block itself, not just its text. Its max-width would
   otherwise sit flush-left inside the centred header. */
.v8hub .keep-sec .sec-top p{margin-left:auto;margin-right:auto}
.v8hub .keep-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.v8hub .keep-card{flex:0 1 300px;position:relative;min-width:0;overflow:hidden;text-decoration:none;color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
  min-height:200px;padding:36px 30px;border-radius:20px;
  background:rgba(15,21,18,.62);border:1px solid var(--glass-brd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--gshadow);transition:transform .4s var(--ease),border-color .3s ease}
.v8hub .keep-card:hover{transform:translateY(-4px);border-color:var(--gold-soft)}
.v8hub .keep-card .keep-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.3;transition:opacity .4s ease,transform .6s var(--ease)}
.v8hub .keep-card:hover .keep-bg{opacity:.42;transform:scale(1.05)}
.v8hub .keep-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,21,18,.35),rgba(15,21,18,.72))}
.v8hub .keep-card > *{position:relative;z-index:2}
.v8hub .keep-card .keep-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.1;color:var(--cream);margin:0;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.v8hub .keep-card .keep-sub{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.82);max-width:26ch}

/* Glass button pair placed after content sections (matches the site header
   .cine-btn: liquid glass, gold border and lift on hover). Two per row,
   centred: check your date / call now, or packages / contact where fitting. */
.v8hub .geo-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:38px}
/* Homepage-style pill button: underline at rest that unfolds into a liquid
   glass fill on hover. Ported from the .v8in inner-page button into the .v8hub
   dark geo scope. Primary = gold, ghost = cream. */
.v8hub .btn-outline{
  position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:10px;
  padding:14px 30px;border-radius:100px;font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  text-decoration:none;background:transparent;border:1px solid transparent;box-sizing:border-box;
  isolation:isolate;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.v8hub .btn-outline::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(233,200,126,.5);background:transparent;
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;z-index:0}
.v8hub .btn-outline::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.5);pointer-events:none;z-index:1;opacity:1;transition:opacity .12s linear 0s}
.v8hub .btn-outline .btn-glass{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,241,.14),rgba(255,250,241,.06));
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(255,255,255,.08) inset,0 18px 40px -18px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .18s cubic-bezier(.22,.61,.36,1) 0s,visibility 0s linear .18s;z-index:0}
.v8hub .btn-outline .btn-label{position:relative;z-index:2;display:inline-flex;align-items:center}
.v8hub .btn-outline:hover,.v8hub .btn-outline:focus-visible{transform:scale(1.015);outline:none}
.v8hub .btn-outline:hover::before,.v8hub .btn-outline:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.v8hub .btn-outline:hover::after,.v8hub .btn-outline:focus-visible::after{opacity:0;transition-delay:.26s}
.v8hub .btn-outline:hover .btn-glass,.v8hub .btn-outline:focus-visible .btn-glass{opacity:1;visibility:visible;transition:opacity .18s cubic-bezier(.22,.61,.36,1) .32s,visibility 0s linear .32s}
.v8hub .btn-outline-primary{color:var(--gold-light)}
.v8hub .btn-outline-primary::after{background:rgba(208,165,74,.85)}
.v8hub .btn-outline-primary::before{border-color:rgba(208,165,74,.7)}
.v8hub .btn-outline-primary .btn-glass{background:linear-gradient(180deg,rgba(233,200,126,.24),rgba(208,165,74,.12));box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 0 0 1px rgba(233,200,126,.18) inset,0 18px 40px -18px rgba(0,0,0,.5)}
.v8hub .btn-outline-primary:hover,.v8hub .btn-outline-primary:focus-visible{color:#F3D89A}
.v8hub .btn-outline-ghost{color:rgba(255,250,241,.85)}
.v8hub .btn-outline-ghost::after{background:rgba(255,250,241,.55)}
.v8hub .btn-outline-ghost::before{border-color:rgba(255,250,241,.4)}
.v8hub .btn-outline-ghost:hover,.v8hub .btn-outline-ghost:focus-visible{color:#FFFAF1}
@media(prefers-reduced-motion:reduce){
  .v8hub .btn-outline::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);opacity:0;transition:opacity .18s ease}
  .v8hub .btn-outline .btn-glass{transition:opacity .18s ease}
  .v8hub .btn-outline:hover::before,.v8hub .btn-outline:focus-visible::before{opacity:1;transition-delay:0s}
  .v8hub .btn-outline:hover .btn-glass,.v8hub .btn-outline:focus-visible .btn-glass{transition-delay:0s}
  .v8hub .btn-outline:hover,.v8hub .btn-outline:focus-visible{transform:none}
}

/* Centre a page-local review/testimonial card inside a centred (.ctr) section
   (its own page style only sets margin-top, leaving it left-aligned). */
.v8hub .content-sec.ctr .review-card{margin-left:auto;margin-right:auto}

/* Filmed testimonial: a single centred vertical (9:16) video in place of a
   text review card. Stars removed. */
.v8hub .geo-vtesti{max-width:380px;margin:34px auto 0;text-align:center}
.v8hub .geo-vtesti-wrap{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;background:#0b0f0c;border:1px solid var(--glass-brd);box-shadow:var(--gshadow)}
.v8hub .geo-vtesti-wrap video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.v8hub .geo-vtesti-cite{margin-top:14px;font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.04em;color:rgba(255,250,241,.7)}
/* ============================================================
   YOUR PORTAL (/your-portal) polish, scoped to .yp.
   1) One page width: every section container aligns to the 1180
      content column (the width the "handled" section already used),
      so margins are consistent all the way down. Narrow text blocks
      keep a capped reading measure, centred, within that column.
   2) Hero: the featured couple testimonial, over the S & S image.
   ============================================================ */

/* one consistent content width for every section */
.v8hub.yp .container{max-width:1180px}
.v8hub.yp .shift .container{max-width:1180px}
.v8hub.yp .shift .before,
.v8hub.yp .shift .after{max-width:820px;margin-left:auto;margin-right:auto}

.v8hub.yp .dhero .hero-ctas{margin-top:28px;margin-bottom:0}

/* bento section header: centred, heading on one line, with a blurb */
.v8hub.yp .bento-sec .yp-bento-head{max-width:900px;margin:0 auto 44px;text-align:center}
.v8hub.yp .bento-sec .yp-bento-head .eyebrow{justify-content:center;margin-bottom:12px}
.v8hub.yp .bento-sec .yp-bento-head h2{margin:0;max-width:none}
.v8hub.yp .bento-sec .yp-bento-head h2 .script{display:inline}
.v8hub.yp .bento-sec .yp-bento-head p{max-width:56ch;margin:16px auto 0;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-lead);line-height:1.65}

/* Hayden explains the hub: a landscape video right under the hero */
.v8hub.yp .yp-explainer{padding:clamp(56px,8vw,90px) 0 clamp(24px,4vw,40px)}
.v8hub.yp .yp-explainer-head{max-width:860px;margin:0 auto 30px;text-align:center}
.v8hub.yp .yp-explainer-head .eyebrow{justify-content:center;margin-bottom:12px}
.v8hub.yp .yp-explainer-wrap{max-width:1000px;margin:0 auto;position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--gshadow)}
.v8hub.yp .yp-explainer-wrap video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}

/* FAQ: align its heading and accordion to the page content column, so the
   section shares the same margins as every other section (not a narrow centred
   block). Scoped to .yp so the standalone FAQ page keeps its own measure. */
.v8hub.yp .faq .sec-head{max-width:none}
.v8hub.yp .faq .faq-wrap{max-width:none}

/* video testimonials: two portrait couple videos, dark glass cards */
.v8hub.yp .yp-vtestis{padding:clamp(64px,9vw,110px) 0}
.v8hub.yp .yp-vtestis .sec-head{max-width:860px;margin:0 auto 44px;text-align:center}
.v8hub.yp .yp-vtestis .sec-head .eyebrow{justify-content:center;margin-bottom:12px}
.v8hub.yp .yp-vtestis .sec-head p{max-width:52ch;margin:14px auto 0;color:rgba(255,250,241,.82);font-weight:300;font-size:var(--fs-lead);line-height:1.65}
.v8hub.yp .yp-vgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.v8hub.yp .yp-vcard{flex:0 1 360px;margin:0}
.v8hub.yp .yp-vwrap{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--gshadow)}
.v8hub.yp .yp-vwrap video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.v8hub.yp .yp-vcard figcaption{text-align:center;margin-top:16px}
.v8hub.yp .yp-vcard figcaption b{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);color:var(--cream)}
.v8hub.yp .yp-vcard figcaption span{font-family:var(--font-body);font-weight:300;font-size:var(--fs-meta);color:rgba(255,250,241,.6)}
/* ============================================
   RMG Brand Design Tokens
   DO NOT override these values in components.
   ============================================ */

:root {
  /* Brand Colours */
  --rmg-green: #00603A;
  --rmg-gold: #D0A54A;
  --rmg-cream: #FFFAF1;
  --rmg-dark: #232323;
  --rmg-white: #FFFFFF;

  /* Typography */
  --font-heading: 'ZCOOL XiaoWei', serif;
  --font-body: 'Lato', sans-serif;
}

/* Glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
}

/* Buttons */
.btn-primary {
  background: var(--rmg-gold);
  color: var(--rmg-dark);
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 4px;
  padding: 12px 28px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--rmg-gold);
  color: var(--rmg-gold);
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 4px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

/* Glass hover — never a solid fill (the site-wide liquid-glass language) */
.btn-outline:hover {
  background: linear-gradient(180deg, rgba(233, 200, 126, 0.22), rgba(208, 165, 74, 0.1));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(233, 200, 126, 0.18) inset,
    0 18px 40px -18px rgba(0, 0, 0, 0.35);
  color: var(--rmg-gold);

}

/* Pages using the animated liquid-glass pill (a .btn-glass layer inside the
   button) own their own hover fill — keep the generic hover out of the way. */
.btn-outline:has(> .btn-glass):hover {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}


*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
/* Shared type scale (label band). One value per micro-text role so eyebrows,
   pills, labels, meta and captions stay consistent instead of drifting across
   a dozen near-identical sizes. Headings and body ramps are a later pass. */
    --fs-label: 11px; /* eyebrows, pills, kickers, tracked-caps labels */
    --fs-meta: 13px;  /* small body, meta rows, captions, footnotes */
    --fs-body: 1rem;     /* default paragraph copy */
    --fs-lead: 1.15rem;  /* lead / intro paragraphs */
    /* Fluid heading ramp (tuned to the existing sizes so nothing jumps). */
    --fs-h3: clamp(1.6rem, 3vw, 2.4rem);      /* sub-headings */
    --fs-h2: clamp(2rem, 4.6vw, 3.5rem);      /* section headings */
    --fs-h1: clamp(2.6rem, 5.5vw, 4.25rem);   /* large feature headings */
    --fs-display: clamp(2.9rem, 7.6vw, 6.8rem); /* hero display type */

/* RMG Brand Colors - Light Mode */
    --background: 60 33% 98%;
    --foreground: 150 40% 10%;

    --card: 0 0% 100%;
    --card-foreground: 150 40% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 150 40% 10%;

    /* Soft Gold - Primary accent */
    --primary: 43 67% 53%;
    --primary-foreground: 0 0% 100%;

    /* Dark Forest Green - Secondary */
    --secondary: 150 40% 17%;
    --secondary-foreground: 0 0% 100%;

    /* Cream - Muted backgrounds */
    --muted: 60 33% 97%;
    --muted-foreground: 150 20% 35%;

    /* Soft Gold - Accent */
    --accent: 43 67% 53%;
    --accent-foreground: 150 40% 17%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Success Green */
    --success: 145 63% 42%;
    --success-foreground: 0 0% 100%;

    /* Alert Amber */
    --alert: 37 90% 51%;
    --alert-foreground: 0 0% 10%;

    --border: 60 10% 88%;
    --input: 60 10% 88%;
    --ring: 43 67% 53%;

    --radius: 0.75rem;
    
    /* RMG Brand Tokens */
    --brand-gold: 43 67% 53%;
    --brand-slate: 150 40% 17%;
    --brand-cream: 60 33% 97%;
    --brand-charcoal: 150 40% 10%;
    --brand-white: 0 0% 100%;
    --brand-light-grey: 60 33% 97%;
    
    /* Shadows */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.08);
    
    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Sidebar - Dark Forest Green background */
    --sidebar-background: 150 40% 17%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 43 67% 53%;
    --sidebar-primary-foreground: 150 40% 17%;
    --sidebar-accent: 150 40% 22%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 150 40% 13%;
    --sidebar-ring: 43 67% 53%;
  }

.dark {
    /* Dark mode tuned to the v8 dark-glass marketing palette
       ink-green #0F1512, gold #D0A54A, cream #FFFAF1, green #00603A */
    --background: 150 21% 6%;        /* #0F1512 ink */
    --foreground: 39 100% 97%;       /* #FFFAF1 cream */

    --card: 150 24% 9%;              /* deep ink-green panel base (glass tint layered on top) */
    --card-foreground: 39 100% 97%;  /* cream */

    --popover: 150 24% 9%;
    --popover-foreground: 39 100% 97%;

    --primary: 41 58% 55%;           /* #D0A54A gold */
    --primary-foreground: 150 21% 6%;/* ink text on gold */

    --secondary: 154 100% 19%;       /* #00603A green */
    --secondary-foreground: 39 100% 97%;

    --muted: 150 20% 13%;
    --muted-foreground: 39 30% 78%;  /* soft cream */

    --accent: 41 58% 55%;            /* gold */
    --accent-foreground: 150 21% 6%;

    --destructive: 8 72% 58%;
    --destructive-foreground: 39 100% 97%;

    --success: 145 55% 42%;
    --success-foreground: 39 100% 97%;

    --alert: 41 58% 55%;
    --alert-foreground: 150 21% 6%;

    --border: 41 40% 55% / 0.22;     /* gold-soft hairline */
    --input: 39 30% 90% / 0.14;      /* faint cream field border */
    --ring: 41 58% 55%;              /* gold focus ring */

    --sidebar-background: 152 34% 8%;      /* dark frosted green-ink sidebar */
    --sidebar-foreground: 39 100% 97%;     /* cream */
    --sidebar-primary: 41 58% 55%;         /* gold active */
    --sidebar-primary-foreground: 150 21% 6%;
    --sidebar-accent: 154 60% 14%;         /* green hover wash */
    --sidebar-accent-foreground: 39 100% 97%;
    --sidebar-border: 41 40% 55% / 0.20;   /* gold hairline divider */
    --sidebar-ring: 41 58% 55%;
  }

*{
  border-color: hsl(var(--border));
}

body{
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
  }

h1 {
    font-size: 32px;
  }

h2 {
    font-size: 24px;
  }

h3 {
    font-size: 20px;
    font-weight: 500;
  }

.container{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

@media (min-width: 1400px){

  .container{
    max-width: 1400px;
  }
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none{
  pointer-events: none;
}

.pointer-events-auto{
  pointer-events: auto;
}

.\!visible{
  visibility: visible !important;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.-bottom-12{
  bottom: -3rem;
}

.-left-12{
  left: -3rem;
}

.-left-6{
  left: -1.5rem;
}

.-left-\[1\.6rem\]{
  left: -1.6rem;
}

.-right-1{
  right: -0.25rem;
}

.-right-12{
  right: -3rem;
}

.-right-2{
  right: -0.5rem;
}

.-top-1{
  top: -0.25rem;
}

.-top-12{
  top: -3rem;
}

.-top-2{
  top: -0.5rem;
}

.-top-3{
  top: -0.75rem;
}

.bottom-0{
  bottom: 0px;
}

.bottom-2{
  bottom: 0.5rem;
}

.bottom-6{
  bottom: 1.5rem;
}

.bottom-8{
  bottom: 2rem;
}

.left-0{
  left: 0px;
}

.left-1{
  left: 0.25rem;
}

.left-1\/2{
  left: 50%;
}

.left-2{
  left: 0.5rem;
}

.left-3{
  left: 0.75rem;
}

.left-6{
  left: 1.5rem;
}

.left-8{
  left: 2rem;
}

.left-\[11px\]{
  left: 11px;
}

.left-\[15px\]{
  left: 15px;
}

.left-\[21px\]{
  left: 21px;
}

.left-\[50\%\]{
  left: 50%;
}

.left-\[72px\]{
  left: 72px;
}

.left-\[calc\(100\%\/12\)\]{
  left: calc(100% / 12);
}

.right-0{
  right: 0px;
}

.right-0\.5{
  right: 0.125rem;
}

.right-1{
  right: 0.25rem;
}

.right-2{
  right: 0.5rem;
}

.right-3{
  right: 0.75rem;
}

.right-4{
  right: 1rem;
}

.right-6{
  right: 1.5rem;
}

.right-\[calc\(100\%\/12\)\]{
  right: calc(100% / 12);
}

.top-0{
  top: 0px;
}

.top-0\.5{
  top: 0.125rem;
}

.top-1{
  top: 0.25rem;
}

.top-1\.5{
  top: 0.375rem;
}

.top-1\/2{
  top: 50%;
}

.top-2{
  top: 0.5rem;
}

.top-24{
  top: 6rem;
}

.top-3{
  top: 0.75rem;
}

.top-3\.5{
  top: 0.875rem;
}

.top-4{
  top: 1rem;
}

.top-6{
  top: 1.5rem;
}

.top-8{
  top: 2rem;
}

.top-\[18px\]{
  top: 18px;
}

.top-\[1px\]{
  top: 1px;
}

.top-\[50\%\]{
  top: 50%;
}

.top-\[60\%\]{
  top: 60%;
}

.top-full{
  top: 100%;
}

.isolate{
  isolation: isolate;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-40{
  z-index: 40;
}

.z-50{
  z-index: 50;
}

.z-\[100\]{
  z-index: 100;
}

.z-\[1\]{
  z-index: 1;
}

.z-\[9999\]{
  z-index: 9999;
}

.order-1{
  order: 1;
}

.order-2{
  order: 2;
}

.order-3{
  order: 3;
}

.col-span-1{
  grid-column: span 1 / span 1;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-3{
  grid-column: span 3 / span 3;
}

.col-span-6{
  grid-column: span 6 / span 6;
}

.-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}

.-mx-6{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3\.5{
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-0\.5{
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.-mb-6{
  margin-bottom: -1.5rem;
}

.-ml-2{
  margin-left: -0.5rem;
}

.-ml-4{
  margin-left: -1rem;
}

.-mt-1{
  margin-top: -0.25rem;
}

.-mt-4{
  margin-top: -1rem;
}

.mb-0\.5{
  margin-bottom: 0.125rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-1\.5{
  margin-bottom: 0.375rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-14{
  margin-bottom: 3.5rem;
}

.mb-16{
  margin-bottom: 4rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-1\.5{
  margin-left: 0.375rem;
}

.ml-10{
  margin-left: 2.5rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-6{
  margin-left: 1.5rem;
}

.ml-8{
  margin-left: 2rem;
}

.ml-\[152px\]{
  margin-left: 152px;
}

.ml-auto{
  margin-left: auto;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-1\.5{
  margin-right: 0.375rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-3{
  margin-right: 0.75rem;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-1\.5{
  margin-top: 0.375rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-2\.5{
  margin-top: 0.625rem;
}

.mt-24{
  margin-top: 6rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-auto{
  margin-top: auto;
}

.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.aspect-\[16\/9\]{
  aspect-ratio: 16/9;
}

.aspect-\[3\/4\]{
  aspect-ratio: 3/4;
}

.aspect-\[4\/3\]{
  aspect-ratio: 4/3;
}

.aspect-\[9\/16\]{
  aspect-ratio: 9/16;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-video{
  aspect-ratio: 16 / 9;
}

.size-4{
  width: 1rem;
  height: 1rem;
}

.h-0{
  height: 0px;
}

.h-0\.5{
  height: 0.125rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-2\.5{
  height: 0.625rem;
}

.h-20{
  height: 5rem;
}

.h-24{
  height: 6rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-32{
  height: 8rem;
}

.h-36{
  height: 9rem;
}

.h-4{
  height: 1rem;
}

.h-40{
  height: 10rem;
}

.h-48{
  height: 12rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-64{
  height: 16rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-96{
  height: 24rem;
}

.h-\[15px\]{
  height: 15px;
}

.h-\[180px\]{
  height: 180px;
}

.h-\[18px\]{
  height: 18px;
}

.h-\[1px\]{
  height: 1px;
}

.h-\[300px\]{
  height: 300px;
}

.h-\[30px\]{
  height: 30px;
}

.h-\[3px\]{
  height: 3px;
}

.h-\[42px\]{
  height: 42px;
}

.h-\[520px\]{
  height: 520px;
}

.h-\[600px\]{
  height: 600px;
}

.h-\[640px\]{
  height: 640px;
}

.h-\[70vh\]{
  height: 70vh;
}

.h-\[9px\]{
  height: 9px;
}

.h-\[calc\(100vh-8rem\)\]{
  height: calc(100vh - 8rem);
}

.h-\[var\(--radix-navigation-menu-viewport-height\)\]{
  height: var(--radix-navigation-menu-viewport-height);
}

.h-\[var\(--radix-select-trigger-height\)\]{
  height: var(--radix-select-trigger-height);
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.h-svh{
  height: 100svh;
}

.max-h-28{
  max-height: 7rem;
}

.max-h-32{
  max-height: 8rem;
}

.max-h-64{
  max-height: 16rem;
}

.max-h-72{
  max-height: 18rem;
}

.max-h-80{
  max-height: 20rem;
}

.max-h-96{
  max-height: 24rem;
}

.max-h-\[300px\]{
  max-height: 300px;
}

.max-h-\[400px\]{
  max-height: 400px;
}

.max-h-\[42vh\]{
  max-height: 42vh;
}

.max-h-\[480px\]{
  max-height: 480px;
}

.max-h-\[500px\]{
  max-height: 500px;
}

.max-h-\[55vh\]{
  max-height: 55vh;
}

.max-h-\[560px\]{
  max-height: 560px;
}

.max-h-\[60vh\]{
  max-height: 60vh;
}

.max-h-\[80vh\]{
  max-height: 80vh;
}

.max-h-\[85vh\]{
  max-height: 85vh;
}

.max-h-\[88vh\]{
  max-height: 88vh;
}

.max-h-\[90vh\]{
  max-height: 90vh;
}

.max-h-\[92vh\]{
  max-height: 92vh;
}

.max-h-screen{
  max-height: 100vh;
}

.min-h-0{
  min-height: 0px;
}

.min-h-\[100px\]{
  min-height: 100px;
}

.min-h-\[110px\]{
  min-height: 110px;
}

.min-h-\[120px\]{
  min-height: 120px;
}

.min-h-\[12rem\]{
  min-height: 12rem;
}

.min-h-\[13rem\]{
  min-height: 13rem;
}

.min-h-\[300px\]{
  min-height: 300px;
}

.min-h-\[36px\]{
  min-height: 36px;
}

.min-h-\[38px\]{
  min-height: 38px;
}

.min-h-\[40px\]{
  min-height: 40px;
}

.min-h-\[44px\]{
  min-height: 44px;
}

.min-h-\[480px\]{
  min-height: 480px;
}

.min-h-\[48px\]{
  min-height: 48px;
}

.min-h-\[50px\]{
  min-height: 50px;
}

.min-h-\[56px\]{
  min-height: 56px;
}

.min-h-\[58px\]{
  min-height: 58px;
}

.min-h-\[60px\]{
  min-height: 60px;
}

.min-h-\[64px\]{
  min-height: 64px;
}

.min-h-\[70vh\]{
  min-height: 70vh;
}

.min-h-\[80px\]{
  min-height: 80px;
}

.min-h-screen{
  min-height: 100vh;
}

.min-h-svh{
  min-height: 100svh;
}

.w-0{
  width: 0px;
}

.w-0\.5{
  width: 0.125rem;
}

.w-1{
  width: 0.25rem;
}

.w-1\.5{
  width: 0.375rem;
}

.w-10{
  width: 2.5rem;
}

.w-11{
  width: 2.75rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-2\.5{
  width: 0.625rem;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\.5{
  width: 0.875rem;
}

.w-3\/4{
  width: 75%;
}

.w-32{
  width: 8rem;
}

.w-36{
  width: 9rem;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-48{
  width: 12rem;
}

.w-5{
  width: 1.25rem;
}

.w-5\/6{
  width: 83.333333%;
}

.w-56{
  width: 14rem;
}

.w-6{
  width: 1.5rem;
}

.w-60{
  width: 15rem;
}

.w-64{
  width: 16rem;
}

.w-7{
  width: 1.75rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-80{
  width: 20rem;
}

.w-9{
  width: 2.25rem;
}

.w-96{
  width: 24rem;
}

.w-\[--sidebar-width\]{
  width: var(--sidebar-width);
}

.w-\[100px\]{
  width: 100px;
}

.w-\[130px\]{
  width: 130px;
}

.w-\[140px\]{
  width: 140px;
}

.w-\[15px\]{
  width: 15px;
}

.w-\[18px\]{
  width: 18px;
}

.w-\[19rem\]{
  width: 19rem;
}

.w-\[1px\]{
  width: 1px;
}

.w-\[200px\]{
  width: 200px;
}

.w-\[30px\]{
  width: 30px;
}

.w-\[340px\]{
  width: 340px;
}

.w-\[42px\]{
  width: 42px;
}

.w-\[60px\]{
  width: 60px;
}

.w-\[9px\]{
  width: 9px;
}

.w-auto{
  width: auto;
}

.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.w-full{
  width: 100%;
}

.w-max{
  width: -moz-max-content;
  width: max-content;
}

.w-px{
  width: 1px;
}

.min-w-0{
  min-width: 0px;
}

.min-w-5{
  min-width: 1.25rem;
}

.min-w-\[100px\]{
  min-width: 100px;
}

.min-w-\[11rem\]{
  min-width: 11rem;
}

.min-w-\[120px\]{
  min-width: 120px;
}

.min-w-\[12rem\]{
  min-width: 12rem;
}

.min-w-\[140px\]{
  min-width: 140px;
}

.min-w-\[150px\]{
  min-width: 150px;
}

.min-w-\[200px\]{
  min-width: 200px;
}

.min-w-\[36px\]{
  min-width: 36px;
}

.min-w-\[40px\]{
  min-width: 40px;
}

.min-w-\[44px\]{
  min-width: 44px;
}

.min-w-\[80px\]{
  min-width: 80px;
}

.min-w-\[8px\]{
  min-width: 8px;
}

.min-w-\[8rem\]{
  min-width: 8rem;
}

.min-w-\[var\(--radix-select-trigger-width\)\]{
  min-width: var(--radix-select-trigger-width);
}

.min-w-max{
  min-width: -moz-max-content;
  min-width: max-content;
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-5xl{
  max-width: 64rem;
}

.max-w-6xl{
  max-width: 72rem;
}

.max-w-\[--skeleton-width\]{
  max-width: var(--skeleton-width);
}

.max-w-\[13rem\]{
  max-width: 13rem;
}

.max-w-\[150px\]{
  max-width: 150px;
}

.max-w-\[50\%\]{
  max-width: 50%;
}

.max-w-\[60px\]{
  max-width: 60px;
}

.max-w-\[72px\]{
  max-width: 72px;
}

.max-w-\[75\%\]{
  max-width: 75%;
}

.max-w-\[85\%\]{
  max-width: 85%;
}

.max-w-\[90vw\]{
  max-width: 90vw;
}

.max-w-lg{
  max-width: 32rem;
}

.max-w-max{
  max-width: -moz-max-content;
  max-width: max-content;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-none{
  max-width: none;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xl{
  max-width: 36rem;
}

.max-w-xs{
  max-width: 20rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-none{
  flex: none;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.grow{
  flex-grow: 1;
}

.grow-0{
  flex-grow: 0;
}

.basis-full{
  flex-basis: 100%;
}

.caption-bottom{
  caption-side: bottom;
}

.border-collapse{
  border-collapse: collapse;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-px{
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2{
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[-50\%\]{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-px{
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/2{
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-4{
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-6{
  --tw-translate-y: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90{
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-0{
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-125{
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[1\.02\]{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse{

  50%{
    opacity: .5;
  }
}

.animate-\[pulse_2s_cubic-bezier\(0\.4\2c 0\2c 0\.6\2c 1\)_infinite\]{
  animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

@keyframes ping{

  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping{
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse{

  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{

  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-grab{
  cursor: grab;
}

.cursor-move{
  cursor: move;
}

.cursor-pointer{
  cursor: pointer;
}

.touch-none{
  touch-action: none;
}

.touch-manipulation{
  touch-action: manipulation;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none{
  resize: none;
}

.resize{
  resize: both;
}

.list-inside{
  list-style-position: inside;
}

.list-disc{
  list-style-type: disc;
}

.list-none{
  list-style-type: none;
}

.columns-1{
  -moz-columns: 1;
       columns: 1;
}

.columns-2{
  -moz-columns: 2;
       columns: 2;
}

.break-inside-avoid{
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.flex-row{
  flex-direction: row;
}

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.items-stretch{
  align-items: stretch;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-0{
  gap: 0px;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-1\.5{
  gap: 0.375rem;
}

.gap-10{
  gap: 2.5rem;
}

.gap-12{
  gap: 3rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5{
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-y-1\.5{
  row-gap: 0.375rem;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.gap-y-3{
  row-gap: 0.75rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-20 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-border > :not([hidden]) ~ :not([hidden]){
  border-color: hsl(var(--border));
}

.divide-border\/60 > :not([hidden]) ~ :not([hidden]){
  border-color: hsl(var(--border) / 0.6);
}

.divide-white\/10 > :not([hidden]) ~ :not([hidden]){
  border-color: rgb(255 255 255 / 0.1);
}

.self-start{
  align-self: flex-start;
}

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.overscroll-contain{
  overscroll-behavior: contain;
}

.scroll-smooth{
  scroll-behavior: smooth;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-normal{
  white-space: normal;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre-line{
  white-space: pre-line;
}

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.break-words{
  overflow-wrap: break-word;
}

.break-all{
  word-break: break-all;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-\[2px\]{
  border-radius: 2px;
}

.rounded-\[inherit\]{
  border-radius: inherit;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: var(--radius);
}

.rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.rounded-none{
  border-radius: 0px;
}

.rounded-sm{
  border-radius: calc(var(--radius) - 4px);
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b-lg{
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.rounded-t-\[10px\]{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.rounded-t-lg{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.rounded-bl-sm{
  border-bottom-left-radius: calc(var(--radius) - 4px);
}

.rounded-br-sm{
  border-bottom-right-radius: calc(var(--radius) - 4px);
}

.rounded-tl-sm{
  border-top-left-radius: calc(var(--radius) - 4px);
}

.rounded-tr-sm{
  border-top-right-radius: calc(var(--radius) - 4px);
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-4{
  border-width: 4px;
}

.border-\[1\.5px\]{
  border-width: 1.5px;
}

.border-\[2\.5px\]{
  border-width: 2.5px;
}

.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-b-\[3px\]{
  border-bottom-width: 3px;
}

.border-b-\[6px\]{
  border-bottom-width: 6px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-l-4{
  border-left-width: 4px;
}

.border-l-\[6px\]{
  border-left-width: 6px;
}

.border-r{
  border-right-width: 1px;
}

.border-r-0{
  border-right-width: 0px;
}

.border-r-\[6px\]{
  border-right-width: 6px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-\[6px\]{
  border-top-width: 6px;
}

.border-dashed{
  border-style: dashed;
}

.border-none{
  border-style: none;
}

.border-\[\#1a3c2a\]\/10{
  border-color: rgb(26 60 42 / 0.1);
}

.border-\[\#1a3c2a\]\/15{
  border-color: rgb(26 60 42 / 0.15);
}

.border-\[\#1a3c2a\]\/5{
  border-color: rgb(26 60 42 / 0.05);
}

.border-\[\#D0A54A\]\/30{
  border-color: rgb(208 165 74 / 0.3);
}

.border-\[\#D4AF37\]{
  --tw-border-opacity: 1;
  border-color: rgb(212 175 55 / var(--tw-border-opacity, 1));
}

.border-\[\#D4AF37\]\/15{
  border-color: rgb(212 175 55 / 0.15);
}

.border-\[\#D4AF37\]\/20{
  border-color: rgb(212 175 55 / 0.2);
}

.border-\[\#D4AF37\]\/30{
  border-color: rgb(212 175 55 / 0.3);
}

.border-\[\#D4AF37\]\/50{
  border-color: rgb(212 175 55 / 0.5);
}

.border-\[--color-border\]{
  border-color: var(--color-border);
}

.border-\[rgba\(246\2c 241\2c 230\2c 0\.08\)\]{
  border-color: rgba(246,241,230,0.08);
}

.border-\[rgba\(246\2c 241\2c 230\2c 0\.12\)\]{
  border-color: rgba(246,241,230,0.12);
}

.border-\[rgba\(246\2c 241\2c 230\2c 0\.25\)\]{
  border-color: rgba(246,241,230,0.25);
}

.border-accent{
  border-color: hsl(var(--accent));
}

.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-amber-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-amber-400\/70{
  border-color: rgb(251 191 36 / 0.7);
}

.border-amber-500\/20{
  border-color: rgb(245 158 11 / 0.2);
}

.border-amber-500\/30{
  border-color: rgb(245 158 11 / 0.3);
}

.border-amber-500\/40{
  border-color: rgb(245 158 11 / 0.4);
}

.border-background{
  border-color: hsl(var(--background));
}

.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-500\/30{
  border-color: rgb(59 130 246 / 0.3);
}

.border-border{
  border-color: hsl(var(--border));
}

.border-border\/50{
  border-color: hsl(var(--border) / 0.5);
}

.border-border\/60{
  border-color: hsl(var(--border) / 0.6);
}

.border-destructive{
  border-color: hsl(var(--destructive));
}

.border-destructive\/20{
  border-color: hsl(var(--destructive) / 0.2);
}

.border-destructive\/30{
  border-color: hsl(var(--destructive) / 0.3);
}

.border-destructive\/50{
  border-color: hsl(var(--destructive) / 0.5);
}

.border-emerald-200{
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}

.border-emerald-300{
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}

.border-emerald-400{
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}

.border-emerald-500\/20{
  border-color: rgb(16 185 129 / 0.2);
}

.border-emerald-500\/30{
  border-color: rgb(16 185 129 / 0.3);
}

.border-emerald-500\/40{
  border-color: rgb(16 185 129 / 0.4);
}

.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300{
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-500{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-600{
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-indigo-200{
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}

.border-inherit{
  border-color: inherit;
}

.border-input{
  border-color: hsl(var(--input));
}

.border-muted{
  border-color: hsl(var(--muted));
}

.border-muted-foreground\/30{
  border-color: hsl(var(--muted-foreground) / 0.3);
}

.border-orange-100{
  --tw-border-opacity: 1;
  border-color: rgb(255 237 213 / var(--tw-border-opacity, 1));
}

.border-orange-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-orange-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}

.border-primary{
  border-color: hsl(var(--primary));
}

.border-primary\/10{
  border-color: hsl(var(--primary) / 0.1);
}

.border-primary\/15{
  border-color: hsl(var(--primary) / 0.15);
}

.border-primary\/20{
  border-color: hsl(var(--primary) / 0.2);
}

.border-primary\/25{
  border-color: hsl(var(--primary) / 0.25);
}

.border-primary\/30{
  border-color: hsl(var(--primary) / 0.3);
}

.border-primary\/40{
  border-color: hsl(var(--primary) / 0.4);
}

.border-primary\/45{
  border-color: hsl(var(--primary) / 0.45);
}

.border-primary\/50{
  border-color: hsl(var(--primary) / 0.5);
}

.border-primary\/60{
  border-color: hsl(var(--primary) / 0.6);
}

.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-rose-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}

.border-rose-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}

.border-secondary\/20{
  border-color: hsl(var(--secondary) / 0.2);
}

.border-sidebar-border{
  border-color: hsl(var(--sidebar-border));
}

.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-transparent{
  border-color: transparent;
}

.border-violet-200{
  --tw-border-opacity: 1;
  border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15{
  border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20{
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/30{
  border-color: rgb(255 255 255 / 0.3);
}

.border-white\/5{
  border-color: rgb(255 255 255 / 0.05);
}

.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.border-b-card{
  border-bottom-color: hsl(var(--card));
}

.border-b-transparent{
  border-bottom-color: transparent;
}

.border-l-amber-500{
  --tw-border-opacity: 1;
  border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.border-l-card{
  border-left-color: hsl(var(--card));
}

.border-l-destructive{
  border-left-color: hsl(var(--destructive));
}

.border-l-transparent{
  border-left-color: transparent;
}

.border-r-card{
  border-right-color: hsl(var(--card));
}

.border-r-transparent{
  border-right-color: transparent;
}

.border-t-card{
  border-top-color: hsl(var(--card));
}

.border-t-transparent{
  border-top-color: transparent;
}

.bg-\[\#0a0a0a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0b1a13\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 26 19 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0d1f15\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 31 21 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0d1f15\]\/95{
  background-color: rgb(13 31 21 / 0.95);
}

.bg-\[\#111\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}

.bg-\[\#12160f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 22 15 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1a3c2a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 60 42 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1a3c2a\]\/10{
  background-color: rgb(26 60 42 / 0.1);
}

.bg-\[\#1a3c2a\]\/60{
  background-color: rgb(26 60 42 / 0.6);
}

.bg-\[\#D0A54A\]{
  --tw-bg-opacity: 1;
  background-color: rgb(208 165 74 / var(--tw-bg-opacity, 1));
}

.bg-\[\#D0A54A\]\/20{
  background-color: rgb(208 165 74 / 0.2);
}

.bg-\[\#D4AF37\]{
  --tw-bg-opacity: 1;
  background-color: rgb(212 175 55 / var(--tw-bg-opacity, 1));
}

.bg-\[\#D4AF37\]\/10{
  background-color: rgb(212 175 55 / 0.1);
}

.bg-\[\#D4AF37\]\/40{
  background-color: rgb(212 175 55 / 0.4);
}

.bg-\[\#D4AF37\]\/5{
  background-color: rgb(212 175 55 / 0.05);
}

.bg-\[\#faf8f5\]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 245 / var(--tw-bg-opacity, 1));
}

.bg-\[--color-bg\]{
  background-color: var(--color-bg);
}

.bg-\[hsl\(var\(--primary\)\)\]{
  background-color: hsl(var(--primary));
}

.bg-\[hsl\(var\(--sidebar-background\)\)\]{
  background-color: hsl(var(--sidebar-background));
}

.bg-accent{
  background-color: hsl(var(--accent));
}

.bg-accent\/10{
  background-color: hsl(var(--accent) / 0.1);
}

.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-100\/50{
  background-color: rgb(254 243 199 / 0.5);
}

.bg-amber-400{
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-400\/15{
  background-color: rgb(251 191 36 / 0.15);
}

.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-50\/50{
  background-color: rgb(255 251 235 / 0.5);
}

.bg-amber-500{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/10{
  background-color: rgb(245 158 11 / 0.1);
}

.bg-amber-500\/15{
  background-color: rgb(245 158 11 / 0.15);
}

.bg-amber-500\/20{
  background-color: rgb(245 158 11 / 0.2);
}

.bg-amber-600\/90{
  background-color: rgb(217 119 6 / 0.9);
}

.bg-background{
  background-color: hsl(var(--background));
}

.bg-background\/60{
  background-color: hsl(var(--background) / 0.6);
}

.bg-background\/80{
  background-color: hsl(var(--background) / 0.8);
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/80{
  background-color: rgb(0 0 0 / 0.8);
}

.bg-black\/90{
  background-color: rgb(0 0 0 / 0.9);
}

.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-50\/50{
  background-color: rgb(239 246 255 / 0.5);
}

.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-500\/10{
  background-color: rgb(59 130 246 / 0.1);
}

.bg-blue-500\/20{
  background-color: rgb(59 130 246 / 0.2);
}

.bg-border{
  background-color: hsl(var(--border));
}

.bg-border\/50{
  background-color: hsl(var(--border) / 0.5);
}

.bg-brand-gold{
  background-color: hsl(var(--brand-gold));
}

.bg-card{
  background-color: hsl(var(--card));
}

.bg-destructive{
  background-color: hsl(var(--destructive));
}

.bg-destructive\/10{
  background-color: hsl(var(--destructive) / 0.1);
}

.bg-destructive\/15{
  background-color: hsl(var(--destructive) / 0.15);
}

.bg-destructive\/5{
  background-color: hsl(var(--destructive) / 0.05);
}

.bg-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100\/50{
  background-color: rgb(209 250 229 / 0.5);
}

.bg-emerald-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50\/50{
  background-color: rgb(236 253 245 / 0.5);
}

.bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500\/10{
  background-color: rgb(16 185 129 / 0.1);
}

.bg-emerald-500\/15{
  background-color: rgb(16 185 129 / 0.15);
}

.bg-foreground{
  background-color: hsl(var(--foreground));
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-50\/50{
  background-color: rgb(240 253 244 / 0.5);
}

.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/5{
  background-color: rgb(34 197 94 / 0.05);
}

.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-muted{
  background-color: hsl(var(--muted));
}

.bg-muted-foreground\/20{
  background-color: hsl(var(--muted-foreground) / 0.2);
}

.bg-muted\/20{
  background-color: hsl(var(--muted) / 0.2);
}

.bg-muted\/30{
  background-color: hsl(var(--muted) / 0.3);
}

.bg-muted\/40{
  background-color: hsl(var(--muted) / 0.4);
}

.bg-muted\/50{
  background-color: hsl(var(--muted) / 0.5);
}

.bg-muted\/60{
  background-color: hsl(var(--muted) / 0.6);
}

.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-pink-500\/10{
  background-color: rgb(236 72 153 / 0.1);
}

.bg-popover{
  background-color: hsl(var(--popover));
}

.bg-primary{
  background-color: hsl(var(--primary));
}

.bg-primary-foreground\/10{
  background-color: hsl(var(--primary-foreground) / 0.1);
}

.bg-primary-foreground\/20{
  background-color: hsl(var(--primary-foreground) / 0.2);
}

.bg-primary\/10{
  background-color: hsl(var(--primary) / 0.1);
}

.bg-primary\/15{
  background-color: hsl(var(--primary) / 0.15);
}

.bg-primary\/20{
  background-color: hsl(var(--primary) / 0.2);
}

.bg-primary\/30{
  background-color: hsl(var(--primary) / 0.3);
}

.bg-primary\/40{
  background-color: hsl(var(--primary) / 0.4);
}

.bg-primary\/5{
  background-color: hsl(var(--primary) / 0.05);
}

.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-purple-500\/20{
  background-color: rgb(168 85 247 / 0.2);
}

.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-50\/50{
  background-color: rgb(254 242 242 / 0.5);
}

.bg-rose-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}

.bg-rose-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.bg-rose-50\/50{
  background-color: rgb(255 241 242 / 0.5);
}

.bg-secondary{
  background-color: hsl(var(--secondary));
}

.bg-secondary\/10{
  background-color: hsl(var(--secondary) / 0.1);
}

.bg-sidebar{
  background-color: hsl(var(--sidebar-background));
}

.bg-sidebar-border{
  background-color: hsl(var(--sidebar-border));
}

.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-50\/50{
  background-color: rgb(248 250 252 / 0.5);
}

.bg-slate-500{
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-violet-50{
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}

.bg-violet-50\/50{
  background-color: rgb(245 243 255 / 0.5);
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10{
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/50{
  background-color: rgb(255 255 255 / 0.5);
}

.bg-white\/\[0\.04\]{
  background-color: rgb(255 255 255 / 0.04);
}

.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-\[\#1A3C2A\]{
  --tw-gradient-from: #1A3C2A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 60 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#1a3c2a\]{
  --tw-gradient-from: #1a3c2a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 60 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#D4AF37\]\/60{
  --tw-gradient-from: rgb(212 175 55 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 175 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-background{
  --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/70{
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/80{
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-card{
  --tw-gradient-from: hsl(var(--card)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--card) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-muted{
  --tw-gradient-from: hsl(var(--muted)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary{
  --tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/10{
  --tw-gradient-from: hsl(var(--primary) / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/5{
  --tw-gradient-from: hsl(var(--primary) / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary{
  --tw-gradient-from: hsl(var(--secondary)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/30{
  --tw-gradient-from: hsl(var(--secondary) / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent{
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-\[\#2d5a3f\]{
  --tw-gradient-to: rgb(45 90 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2d5a3f var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-\[\#D4AF37\]\/30{
  --tw-gradient-to: rgb(212 175 55 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(212 175 55 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-\[hsl\(150\2c 35\%\2c 22\%\)\]{
  --tw-gradient-to: hsl(150 35% 22% / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(150,35%,22%) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/40{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/50{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-card{
  --tw-gradient-to: hsl(var(--card) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--card)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-primary{
  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-primary\/5{
  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-primary\/50{
  --tw-gradient-to: hsl(var(--primary) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary) / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#2D5A3F\]{
  --tw-gradient-to: #2D5A3F var(--tw-gradient-to-position);
}

.to-\[\#D4AF37\]\/10{
  --tw-gradient-to: rgb(212 175 55 / 0.1) var(--tw-gradient-to-position);
}

.to-\[\#D4AF37\]\/60{
  --tw-gradient-to: rgb(212 175 55 / 0.6) var(--tw-gradient-to-position);
}

.to-accent\/10{
  --tw-gradient-to: hsl(var(--accent) / 0.1) var(--tw-gradient-to-position);
}

.to-accent\/5{
  --tw-gradient-to: hsl(var(--accent) / 0.05) var(--tw-gradient-to-position);
}

.to-black\/20{
  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}

.to-black\/30{
  --tw-gradient-to: rgb(0 0 0 / 0.3) var(--tw-gradient-to-position);
}

.to-card{
  --tw-gradient-to: hsl(var(--card)) var(--tw-gradient-to-position);
}

.to-muted{
  --tw-gradient-to: hsl(var(--muted)) var(--tw-gradient-to-position);
}

.to-primary\/10{
  --tw-gradient-to: hsl(var(--primary) / 0.1) var(--tw-gradient-to-position);
}

.to-primary\/20{
  --tw-gradient-to: hsl(var(--primary) / 0.2) var(--tw-gradient-to-position);
}

.to-primary\/40{
  --tw-gradient-to: hsl(var(--primary) / 0.4) var(--tw-gradient-to-position);
}

.to-primary\/5{
  --tw-gradient-to: hsl(var(--primary) / 0.05) var(--tw-gradient-to-position);
}

.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-cover{
  background-size: cover;
}

.bg-center{
  background-position: center;
}

.fill-\[\#1a3c2a\]{
  fill: #1a3c2a;
}

.fill-current{
  fill: currentColor;
}

.fill-primary{
  fill: hsl(var(--primary));
}

.fill-primary\/20{
  fill: hsl(var(--primary) / 0.2);
}

.fill-primary\/30{
  fill: hsl(var(--primary) / 0.3);
}

.fill-transparent{
  fill: transparent;
}

.fill-white{
  fill: #fff;
}

.fill-yellow-500{
  fill: #eab308;
}

.stroke-\[3\]{
  stroke-width: 3;
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0{
  padding: 0px;
}

.p-0\.5{
  padding: 0.125rem;
}

.p-1{
  padding: 0.25rem;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-10{
  padding: 2.5rem;
}

.p-12{
  padding: 3rem;
}

.p-2{
  padding: 0.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-3{
  padding: 0.75rem;
}

.p-3\.5{
  padding: 0.875rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.p-\[1px\]{
  padding: 1px;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-1{
  padding-bottom: 0.25rem;
}

.pb-1\.5{
  padding-bottom: 0.375rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-16{
  padding-bottom: 4rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-24{
  padding-bottom: 6rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-5{
  padding-bottom: 1.25rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pl-0{
  padding-left: 0px;
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pl-12{
  padding-left: 3rem;
}

.pl-2\.5{
  padding-left: 0.625rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pl-6{
  padding-left: 1.5rem;
}

.pl-7{
  padding-left: 1.75rem;
}

.pl-8{
  padding-left: 2rem;
}

.pl-9{
  padding-left: 2.25rem;
}

.pr-1{
  padding-right: 0.25rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-2\.5{
  padding-right: 0.625rem;
}

.pr-3{
  padding-right: 0.75rem;
}

.pr-4{
  padding-right: 1rem;
}

.pr-8{
  padding-right: 2rem;
}

.pt-0{
  padding-top: 0px;
}

.pt-0\.5{
  padding-top: 0.125rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-1\.5{
  padding-top: 0.375rem;
}

.pt-10{
  padding-top: 2.5rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.align-middle{
  vertical-align: middle;
}

.font-body-wedding{
  font-family: Lato, sans-serif;
}

.font-button-wedding{
  font-family: Roboto, sans-serif;
}

.font-display{
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

.font-display-wedding{
  font-family: "ZCOOL XiaoWei", serif;
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans{
  font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

.font-serif{
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-serif-wedding{
  font-family: "Cormorant Garamond", serif;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl{
  font-size: 3rem;
  line-height: 1;
}

.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[0\.8rem\]{
  font-size: 0.8rem;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[13\.5px\]{
  font-size: 13.5px;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[15px\]{
  font-size: 15px;
}

.text-\[9px\]{
  font-size: 9px;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold{
  font-weight: 700;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none{
  line-height: 1;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-snug{
  line-height: 1.375;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\]{
  letter-spacing: 0.14em;
}

.tracking-\[0\.16em\]{
  letter-spacing: 0.16em;
}

.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}

.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}

.tracking-\[0\.3em\]{
  letter-spacing: 0.3em;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-\[\#1a3c2a\]{
  --tw-text-opacity: 1;
  color: rgb(26 60 42 / var(--tw-text-opacity, 1));
}

.text-\[\#1a3c2a\]\/15{
  color: rgb(26 60 42 / 0.15);
}

.text-\[\#1a3c2a\]\/20{
  color: rgb(26 60 42 / 0.2);
}

.text-\[\#1a3c2a\]\/30{
  color: rgb(26 60 42 / 0.3);
}

.text-\[\#1a3c2a\]\/40{
  color: rgb(26 60 42 / 0.4);
}

.text-\[\#1a3c2a\]\/50{
  color: rgb(26 60 42 / 0.5);
}

.text-\[\#1a3c2a\]\/60{
  color: rgb(26 60 42 / 0.6);
}

.text-\[\#1a3c2a\]\/70{
  color: rgb(26 60 42 / 0.7);
}

.text-\[\#20160a\]{
  --tw-text-opacity: 1;
  color: rgb(32 22 10 / var(--tw-text-opacity, 1));
}

.text-\[\#232323\]{
  --tw-text-opacity: 1;
  color: rgb(35 35 35 / var(--tw-text-opacity, 1));
}

.text-\[\#232323\]\/60{
  color: rgb(35 35 35 / 0.6);
}

.text-\[\#232323\]\/65{
  color: rgb(35 35 35 / 0.65);
}

.text-\[\#232323\]\/70{
  color: rgb(35 35 35 / 0.7);
}

.text-\[\#232323\]\/75{
  color: rgb(35 35 35 / 0.75);
}

.text-\[\#232323\]\/80{
  color: rgb(35 35 35 / 0.8);
}

.text-\[\#D4AF37\]{
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity, 1));
}

.text-\[\#D4AF37\]\/40{
  color: rgb(212 175 55 / 0.4);
}

.text-\[\#D4AF37\]\/60{
  color: rgb(212 175 55 / 0.6);
}

.text-\[\#D4AF37\]\/70{
  color: rgb(212 175 55 / 0.7);
}

.text-accent{
  color: hsl(var(--accent));
}

.text-accent-foreground{
  color: hsl(var(--accent-foreground));
}

.text-amber-300{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-400\/90{
  color: rgb(251 191 36 / 0.9);
}

.text-amber-500{
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-blue-300{
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-brand-slate{
  color: hsl(var(--brand-slate));
}

.text-card-foreground{
  color: hsl(var(--card-foreground));
}

.text-current{
  color: currentColor;
}

.text-destructive{
  color: hsl(var(--destructive));
}

.text-destructive-foreground{
  color: hsl(var(--destructive-foreground));
}

.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.text-emerald-500{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-emerald-600{
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-foreground{
  color: hsl(var(--foreground));
}

.text-foreground\/50{
  color: hsl(var(--foreground) / 0.5);
}

.text-foreground\/80{
  color: hsl(var(--foreground) / 0.8);
}

.text-foreground\/85{
  color: hsl(var(--foreground) / 0.85);
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-inherit{
  color: inherit;
}

.text-muted-foreground{
  color: hsl(var(--muted-foreground));
}

.text-muted-foreground\/30{
  color: hsl(var(--muted-foreground) / 0.3);
}

.text-muted-foreground\/40{
  color: hsl(var(--muted-foreground) / 0.4);
}

.text-muted-foreground\/50{
  color: hsl(var(--muted-foreground) / 0.5);
}

.text-muted-foreground\/70{
  color: hsl(var(--muted-foreground) / 0.7);
}

.text-muted-foreground\/80{
  color: hsl(var(--muted-foreground) / 0.8);
}

.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700{
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800{
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-pink-600{
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.text-popover-foreground{
  color: hsl(var(--popover-foreground));
}

.text-primary{
  color: hsl(var(--primary));
}

.text-primary-foreground{
  color: hsl(var(--primary-foreground));
}

.text-primary\/40{
  color: hsl(var(--primary) / 0.4);
}

.text-primary\/50{
  color: hsl(var(--primary) / 0.5);
}

.text-primary\/60{
  color: hsl(var(--primary) / 0.6);
}

.text-primary\/70{
  color: hsl(var(--primary) / 0.7);
}

.text-primary\/80{
  color: hsl(var(--primary) / 0.8);
}

.text-primary\/90{
  color: hsl(var(--primary) / 0.9);
}

.text-purple-300{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-800{
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-rose-600{
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}

.text-rose-700{
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.text-secondary{
  color: hsl(var(--secondary));
}

.text-secondary-foreground{
  color: hsl(var(--secondary-foreground));
}

.text-sidebar-foreground{
  color: hsl(var(--sidebar-foreground));
}

.text-sidebar-foreground\/70{
  color: hsl(var(--sidebar-foreground) / 0.7);
}

.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-success{
  color: hsl(var(--success));
}

.text-transparent{
  color: transparent;
}

.text-violet-600{
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/20{
  color: rgb(255 255 255 / 0.2);
}

.text-white\/30{
  color: rgb(255 255 255 / 0.3);
}

.text-white\/40{
  color: rgb(255 255 255 / 0.4);
}

.text-white\/45{
  color: rgb(255 255 255 / 0.45);
}

.text-white\/50{
  color: rgb(255 255 255 / 0.5);
}

.text-white\/55{
  color: rgb(255 255 255 / 0.55);
}

.text-white\/60{
  color: rgb(255 255 255 / 0.6);
}

.text-white\/65{
  color: rgb(255 255 255 / 0.65);
}

.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75{
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}

.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}

.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.line-through{
  text-decoration-line: line-through;
}

.underline-offset-2{
  text-underline-offset: 2px;
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.opacity-0{
  opacity: 0;
}

.opacity-10{
  opacity: 0.1;
}

.opacity-100{
  opacity: 1;
}

.opacity-30{
  opacity: 0.3;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-75{
  opacity: 0.75;
}

.opacity-80{
  opacity: 0.8;
}

.opacity-90{
  opacity: 0.9;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_hsl\(var\(--primary\)\/0\.35\)\]{
  --tw-shadow: 0 0 12px hsl(var(--primary)/0.35);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_rgba\(212\2c 175\2c 55\2c 0\.3\)\]{
  --tw-shadow: 0 0 12px rgba(212,175,55,0.3);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_16px_rgba\(212\2c 175\2c 55\2c 0\.5\)\]{
  --tw-shadow: 0 0 16px rgba(212,175,55,0.5);
  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_20px_rgba\(212\2c 175\2c 55\2c 0\.15\)\]{
  --tw-shadow: 0 0 20px rgba(212,175,55,0.15);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_hsl\(var\(--primary\)\/0\.25\)\]{
  --tw-shadow: 0 0 8px hsl(var(--primary)/0.25);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-large{
  --tw-shadow: var(--shadow-large);
  --tw-shadow-colored: var(--shadow-large);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-medium{
  --tw-shadow: var(--shadow-medium);
  --tw-shadow-colored: var(--shadow-medium);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft{
  --tw-shadow: var(--shadow-soft);
  --tw-shadow-colored: var(--shadow-soft);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-primary\/20{
  --tw-shadow-color: hsl(var(--primary) / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-\[\#D4AF37\]\/60{
  --tw-ring-color: rgb(212 175 55 / 0.6);
}

.ring-primary{
  --tw-ring-color: hsl(var(--primary));
}

.ring-primary\/20{
  --tw-ring-color: hsl(var(--primary) / 0.2);
}

.ring-primary\/25{
  --tw-ring-color: hsl(var(--primary) / 0.25);
}

.ring-ring{
  --tw-ring-color: hsl(var(--ring));
}

.ring-sidebar-ring{
  --tw-ring-color: hsl(var(--sidebar-ring));
}

.ring-white\/30{
  --tw-ring-color: rgb(255 255 255 / 0.3);
}

.ring-offset-2{
  --tw-ring-offset-width: 2px;
}

.ring-offset-background{
  --tw-ring-offset-color: hsl(var(--background));
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-0{
  --tw-blur: blur(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-sm{
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-0{
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-lg{
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\2c right\2c width\]{
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[margin\2c opa\]{
  transition-property: margin,opa;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\2c height\2c padding\]{
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\]{
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.delay-100{
  transition-delay: 100ms;
}

.delay-500{
  transition-delay: 500ms;
}

.duration-1000{
  transition-duration: 1000ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-500{
  transition-duration: 500ms;
}

.duration-700{
  transition-duration: 700ms;
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@keyframes enter{

  from{
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit{

  to{
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

.animate-in{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.fade-in-0{
  --tw-enter-opacity: 0;
}

.fade-in-80{
  --tw-enter-opacity: 0.8;
}

.zoom-in-95{
  --tw-enter-scale: .95;
}

.duration-1000{
  animation-duration: 1000ms;
}

.duration-150{
  animation-duration: 150ms;
}

.duration-200{
  animation-duration: 200ms;
}

.duration-300{
  animation-duration: 300ms;
}

.duration-500{
  animation-duration: 500ms;
}

.duration-700{
  animation-duration: 700ms;
}

.delay-100{
  animation-delay: 100ms;
}

.delay-500{
  animation-delay: 500ms;
}

.ease-in-out{
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  animation-timing-function: linear;
}

.ease-out{
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.running{
  animation-play-state: running;
}

.paused{
  animation-play-state: paused;
}

.font-display {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

.font-sans {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

.animate-fade-in {
    animation: fadeIn 0.6s ease-in;
  }

.animate-shimmer {
    animation: shimmer 2s ease-in-out infinite;
  }

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

@keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes shimmer {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }

/* Safe Areas for PWA */

.safe-top {
    padding-top: env(safe-area-inset-top);
  }

.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

.pb-safe {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

/* Touch-friendly sizing */

.touch-target {
    min-height: 44px;
    min-width: 44px;
  }

/* Mobile optimizations */

/* RMG Our Day Platform - Design System
   Primary: Dark Forest Green #1A3C2A
   Accent: Soft Gold #D4AF37
   Background: Cream White #FDFDF5
   Subtle BG: Cream #FAF9F2
   Text: Dark Green #1A3C1A
   Success: #27AE60
   Alert: #F39C12
*/

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out forwards;
}

.file\:border-0::file-selector-button{
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button{
  background-color: transparent;
}

.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button{
  font-weight: 500;
}

.file\:text-foreground::file-selector-button{
  color: hsl(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder{
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-muted-foreground::placeholder{
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-white\/30::-moz-placeholder{
  color: rgb(255 255 255 / 0.3);
}

.placeholder\:text-white\/30::placeholder{
  color: rgb(255 255 255 / 0.3);
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after{
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after{
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after{
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after{
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after{
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:rounded-l-md:first-child{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.first\:border-l:first-child{
  border-left-width: 1px;
}

.last\:rounded-r-md:last-child{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:border-0:last-child{
  border-width: 0px;
}

.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}

.focus-within\:relative:focus-within{
  position: relative;
}

.focus-within\:z-20:focus-within{
  z-index: 20;
}

.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[\#D0A54A\]\/50:hover{
  border-color: rgb(208 165 74 / 0.5);
}

.hover\:border-accent:hover{
  border-color: hsl(var(--accent));
}

.hover\:border-emerald-200:hover{
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}

.hover\:border-primary:hover{
  border-color: hsl(var(--primary));
}

.hover\:border-primary\/20:hover{
  border-color: hsl(var(--primary) / 0.2);
}

.hover\:border-primary\/30:hover{
  border-color: hsl(var(--primary) / 0.3);
}

.hover\:border-primary\/40:hover{
  border-color: hsl(var(--primary) / 0.4);
}

.hover\:border-primary\/50:hover{
  border-color: hsl(var(--primary) / 0.5);
}

.hover\:border-primary\/60:hover{
  border-color: hsl(var(--primary) / 0.6);
}

.hover\:border-white\/30:hover{
  border-color: rgb(255 255 255 / 0.3);
}

.hover\:bg-\[\#1a3c2a\]\/90:hover{
  background-color: rgb(26 60 42 / 0.9);
}

.hover\:bg-\[\#C49B2F\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(196 155 47 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#D0A54A\]\/90:hover{
  background-color: rgb(208 165 74 / 0.9);
}

.hover\:bg-\[\#D4AF37\]\/20:hover{
  background-color: rgb(212 175 55 / 0.2);
}

.hover\:bg-\[\#D4AF37\]\/90:hover{
  background-color: rgb(212 175 55 / 0.9);
}

.hover\:bg-\[\#c5a030\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(197 160 48 / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent:hover{
  background-color: hsl(var(--accent));
}

.hover\:bg-accent\/10:hover{
  background-color: hsl(var(--accent) / 0.1);
}

.hover\:bg-accent\/50:hover{
  background-color: hsl(var(--accent) / 0.5);
}

.hover\:bg-amber-500\/30:hover{
  background-color: rgb(245 158 11 / 0.3);
}

.hover\:bg-black\/5:hover{
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-blue-500\/30:hover{
  background-color: rgb(59 130 246 / 0.3);
}

.hover\:bg-destructive\/10:hover{
  background-color: hsl(var(--destructive) / 0.1);
}

.hover\:bg-destructive\/80:hover{
  background-color: hsl(var(--destructive) / 0.8);
}

.hover\:bg-destructive\/90:hover{
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-emerald-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted:hover{
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/50:hover{
  background-color: hsl(var(--muted) / 0.5);
}

.hover\:bg-muted\/60:hover{
  background-color: hsl(var(--muted) / 0.6);
}

.hover\:bg-orange-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary:hover{
  background-color: hsl(var(--primary));
}

.hover\:bg-primary\/10:hover{
  background-color: hsl(var(--primary) / 0.1);
}

.hover\:bg-primary\/15:hover{
  background-color: hsl(var(--primary) / 0.15);
}

.hover\:bg-primary\/80:hover{
  background-color: hsl(var(--primary) / 0.8);
}

.hover\:bg-primary\/90:hover{
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-secondary:hover{
  background-color: hsl(var(--secondary));
}

.hover\:bg-secondary\/80:hover{
  background-color: hsl(var(--secondary) / 0.8);
}

.hover\:bg-secondary\/90:hover{
  background-color: hsl(var(--secondary) / 0.9);
}

.hover\:bg-sidebar-accent:hover{
  background-color: hsl(var(--sidebar-accent));
}

.hover\:bg-transparent:hover{
  background-color: transparent;
}

.hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/20:hover{
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/\[0\.04\]:hover{
  background-color: rgb(255 255 255 / 0.04);
}

.hover\:bg-white\/\[0\.06\]:hover{
  background-color: rgb(255 255 255 / 0.06);
}

.hover\:text-\[\#D4AF37\]:hover{
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#D4AF37\]\/80:hover{
  color: rgb(212 175 55 / 0.8);
}

.hover\:text-accent-foreground:hover{
  color: hsl(var(--accent-foreground));
}

.hover\:text-amber-300:hover{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.hover\:text-amber-700:hover{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-gold:hover{
  color: hsl(var(--brand-gold));
}

.hover\:text-destructive:hover{
  color: hsl(var(--destructive));
}

.hover\:text-foreground:hover{
  color: hsl(var(--foreground));
}

.hover\:text-muted-foreground:hover{
  color: hsl(var(--muted-foreground));
}

.hover\:text-primary:hover{
  color: hsl(var(--primary));
}

.hover\:text-primary-foreground:hover{
  color: hsl(var(--primary-foreground));
}

.hover\:text-primary\/80:hover{
  color: hsl(var(--primary) / 0.8);
}

.hover\:text-primary\/90:hover{
  color: hsl(var(--primary) / 0.9);
}

.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-sidebar-accent-foreground:hover{
  color: hsl(var(--sidebar-accent-foreground));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:opacity-100:hover{
  opacity: 1;
}

.hover\:opacity-80:hover{
  opacity: 0.8;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover{
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-medium:hover{
  --tw-shadow: var(--shadow-medium);
  --tw-shadow-colored: var(--shadow-medium);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:after\:bg-sidebar-border:hover::after{
  content: var(--tw-content);
  background-color: hsl(var(--sidebar-border));
}

.focus\:bg-accent:focus{
  background-color: hsl(var(--accent));
}

.focus\:bg-primary:focus{
  background-color: hsl(var(--primary));
}

.focus\:text-accent-foreground:focus{
  color: hsl(var(--accent-foreground));
}

.focus\:text-destructive:focus{
  color: hsl(var(--destructive));
}

.focus\:text-primary-foreground:focus{
  color: hsl(var(--primary-foreground));
}

.focus\:opacity-100:focus{
  opacity: 1;
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-ring:focus{
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-1:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible{
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-sidebar-ring:focus-visible{
  --tw-ring-color: hsl(var(--sidebar-ring));
}

.focus-visible\:ring-offset-1:focus-visible{
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible{
  --tw-ring-offset-color: hsl(var(--background));
}

.active\:scale-95:active{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active{
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-grabbing:active{
  cursor: grabbing;
}

.active\:bg-\[\#D4AF37\]\/10:active{
  background-color: rgb(212 175 55 / 0.1);
}

.active\:bg-sidebar-accent:active{
  background-color: hsl(var(--sidebar-accent));
}

.active\:bg-white\/10:active{
  background-color: rgb(255 255 255 / 0.1);
}

.active\:bg-white\/5:active{
  background-color: rgb(255 255 255 / 0.05);
}

.active\:text-sidebar-accent-foreground:active{
  color: hsl(var(--sidebar-accent-foreground));
}

.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:scale-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-\[1\.03\]{
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:border-primary\/60{
  border-color: hsl(var(--primary) / 0.6);
}

.group:hover .group-hover\:bg-primary{
  background-color: hsl(var(--primary));
}

.group:hover .group-hover\:text-foreground{
  color: hsl(var(--foreground));
}

.group:hover .group-hover\:text-primary{
  color: hsl(var(--primary));
}

.group:hover .group-hover\:text-primary-foreground{
  color: hsl(var(--primary-foreground));
}

.group:hover .group-hover\:text-primary\/60{
  color: hsl(var(--primary) / 0.6);
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:opacity-70{
  opacity: 0.7;
}

.group.destructive .group-\[\.destructive\]\:border-muted\/40{
  border-color: hsl(var(--muted) / 0.4);
}

.group.toaster .group-\[\.toaster\]\:border-border{
  border-color: hsl(var(--border));
}

.group.toast .group-\[\.toast\]\:bg-muted{
  background-color: hsl(var(--muted));
}

.group.toast .group-\[\.toast\]\:bg-primary{
  background-color: hsl(var(--primary));
}

.group.toaster .group-\[\.toaster\]\:bg-background{
  background-color: hsl(var(--background));
}

.group.destructive .group-\[\.destructive\]\:text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group.toast .group-\[\.toast\]\:text-muted-foreground{
  color: hsl(var(--muted-foreground));
}

.group.toast .group-\[\.toast\]\:text-primary-foreground{
  color: hsl(var(--primary-foreground));
}

.group.toaster .group-\[\.toaster\]\:text-foreground{
  color: hsl(var(--foreground));
}

.group.toaster .group-\[\.toaster\]\:shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover{
  border-color: hsl(var(--destructive) / 0.3);
}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover{
  background-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover{
  color: hsl(var(--destructive-foreground));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover{
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus{
  --tw-ring-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus{
  --tw-ring-offset-color: #dc2626;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground{
  color: hsl(var(--sidebar-accent-foreground));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed{
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70{
  opacity: 0.7;
}

.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]){
  background-color: hsl(var(--sidebar-background));
}

.has-\[\:disabled\]\:opacity-50:has(:disabled){
  opacity: 0.5;
}

.group\/menu-item:has([data-sidebar=menu-action]) .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8{
  padding-right: 2rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"]{
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"]{
  opacity: 0.5;
}

.aria-selected\:bg-accent[aria-selected="true"]{
  background-color: hsl(var(--accent));
}

.aria-selected\:bg-accent\/50[aria-selected="true"]{
  background-color: hsl(var(--accent) / 0.5);
}

.aria-selected\:text-accent-foreground[aria-selected="true"]{
  color: hsl(var(--accent-foreground));
}

.aria-selected\:text-muted-foreground[aria-selected="true"]{
  color: hsl(var(--muted-foreground));
}

.aria-selected\:opacity-100[aria-selected="true"]{
  opacity: 1;
}

.aria-selected\:opacity-30[aria-selected="true"]{
  opacity: 0.3;
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"]{
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled]{
  pointer-events: none;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"]{
  height: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"]{
  width: 100%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"]{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"]{
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"]{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"]{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-5[data-state="checked"]{
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"]{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"]{
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"]{
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up{

  from{
    height: var(--radix-accordion-content-height);
  }

  to{
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"]{
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down{

  from{
    height: 0;
  }

  to{
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"]{
  animation: accordion-down 0.2s ease-out;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"]{
  flex-direction: column;
}

.data-\[state\=active\]\:border-\[\#D4AF37\][data-state="active"]{
  --tw-border-opacity: 1;
  border-color: rgb(212 175 55 / var(--tw-border-opacity, 1));
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"]{
  background-color: hsl(var(--sidebar-accent));
}

.data-\[active\]\:bg-accent\/50[data-active]{
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true']{
  background-color: hsl(var(--accent));
}

.data-\[state\=active\]\:bg-transparent[data-state="active"]{
  background-color: transparent;
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"]{
  background-color: hsl(var(--primary));
}

.data-\[state\=on\]\:bg-accent[data-state="on"]{
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent[data-state="open"]{
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"]{
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"]{
  background-color: hsl(var(--secondary));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"]{
  background-color: hsl(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"]{
  background-color: hsl(var(--input));
}

.data-\[active\=true\]\:font-medium[data-active="true"]{
  font-weight: 500;
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"]{
  color: hsl(var(--sidebar-accent-foreground));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"]{
  color: hsl(var(--accent-foreground));
}

.data-\[state\=active\]\:text-\[\#D4AF37\][data-state="active"]{
  --tw-text-opacity: 1;
  color: rgb(212 175 55 / var(--tw-text-opacity, 1));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"]{
  color: hsl(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"]{
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"]{
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"]{
  color: hsl(var(--muted-foreground));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"]{
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled]{
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"]{
  opacity: 1;
}

.data-\[state\=active\]\:shadow-none[data-state="active"]{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[swipe\=move\]\:transition-none[data-swipe="move"]{
  transition-property: none;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"]{
  transition-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"]{
  transition-duration: 500ms;
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[swipe\=end\]\:animate-out[data-swipe="end"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"]{
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state="closed"]{
  --tw-exit-opacity: 0.8;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"]{
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"]{
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"]{
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"]{
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"]{
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"]{
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"]{
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"]{
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"]{
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"]{
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"]{
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"]{
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"]{
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"]{
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"]{
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"]{
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"]{
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"]{
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"]{
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"]{
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"]{
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"]{
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"]{
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"]{
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"]{
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"]{
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"]{
  animation-duration: 500ms;
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  left: 0px;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"]{
  background-color: hsl(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"]{
  color: hsl(var(--sidebar-accent-foreground));
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]{
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4{
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0{
  left: 0px;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8{
  margin-top: -2rem;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden{
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!size-8{
  width: 2rem !important;
  height: 2rem !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{
  width: var(--sidebar-width-icon);
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{
  width: calc(var(--sidebar-width-icon) + 1rem);
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{
  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0{
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden{
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg{
  border-radius: var(--radius);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border{
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r{
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l{
  border-left-width: 1px;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border{
  border-color: hsl(var(--sidebar-border));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-0{
  padding: 0px !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-2{
  padding: 0.5rem !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0{
  opacity: 0;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after{
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover{
  background-color: hsl(var(--sidebar-background));
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5{
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5{
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1{
  top: 0.25rem;
}

.peer[data-variant="inset"] ~ .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\]{
  min-height: calc(100svh - 1rem);
}

.peer[data-state="checked"] ~ .peer-data-\[state\=checked\]\:border-primary{
  border-color: hsl(var(--primary));
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground{
  color: hsl(var(--sidebar-accent-foreground));
}

.dark\:border-amber-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}

.dark\:border-destructive:is(.dark *){
  border-color: hsl(var(--destructive));
}

.dark\:border-emerald-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}

.dark\:border-green-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
}

.dark\:border-green-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.dark\:border-green-900:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(20 83 45 / var(--tw-border-opacity, 1));
}

.dark\:border-orange-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(234 88 12 / var(--tw-border-opacity, 1));
}

.dark\:border-rose-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(190 18 60 / var(--tw-border-opacity, 1));
}

.dark\:border-rose-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(159 18 57 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}

.dark\:border-violet-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(91 33 182 / var(--tw-border-opacity, 1));
}

.dark\:bg-amber-500\/20:is(.dark *){
  background-color: rgb(245 158 11 / 0.2);
}

.dark\:bg-amber-900\/20:is(.dark *){
  background-color: rgb(120 53 15 / 0.2);
}

.dark\:bg-amber-900\/30:is(.dark *){
  background-color: rgb(120 53 15 / 0.3);
}

.dark\:bg-amber-950:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-950\/20:is(.dark *){
  background-color: rgb(69 26 3 / 0.2);
}

.dark\:bg-amber-950\/50:is(.dark *){
  background-color: rgb(69 26 3 / 0.5);
}

.dark\:bg-blue-500\/20:is(.dark *){
  background-color: rgb(59 130 246 / 0.2);
}

.dark\:bg-blue-900\/20:is(.dark *){
  background-color: rgb(30 58 138 / 0.2);
}

.dark\:bg-blue-950:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-950\/20:is(.dark *){
  background-color: rgb(23 37 84 / 0.2);
}

.dark\:bg-emerald-500\/20:is(.dark *){
  background-color: rgb(16 185 129 / 0.2);
}

.dark\:bg-emerald-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(6 78 59 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-950:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-950\/20:is(.dark *){
  background-color: rgb(2 44 34 / 0.2);
}

.dark\:bg-emerald-950\/50:is(.dark *){
  background-color: rgb(2 44 34 / 0.5);
}

.dark\:bg-green-900\/30:is(.dark *){
  background-color: rgb(20 83 45 / 0.3);
}

.dark\:bg-green-950\/20:is(.dark *){
  background-color: rgb(5 46 22 / 0.2);
}

.dark\:bg-green-950\/30:is(.dark *){
  background-color: rgb(5 46 22 / 0.3);
}

.dark\:bg-orange-950\/20:is(.dark *){
  background-color: rgb(67 20 7 / 0.2);
}

.dark\:bg-pink-500\/20:is(.dark *){
  background-color: rgb(236 72 153 / 0.2);
}

.dark\:bg-red-900\/20:is(.dark *){
  background-color: rgb(127 29 29 / 0.2);
}

.dark\:bg-rose-950:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(76 5 25 / var(--tw-bg-opacity, 1));
}

.dark\:bg-rose-950\/20:is(.dark *){
  background-color: rgb(76 5 25 / 0.2);
}

.dark\:bg-slate-950:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.dark\:bg-slate-950\/20:is(.dark *){
  background-color: rgb(2 6 23 / 0.2);
}

.dark\:bg-violet-950\/20:is(.dark *){
  background-color: rgb(46 16 101 / 0.2);
}

.dark\:bg-zinc-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}

.dark\:text-amber-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-green-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.dark\:text-green-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.dark\:text-slate-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}

.dark\:hover\:border-emerald-800:hover:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-green-950\/30:hover:is(.dark *){
  background-color: rgb(5 46 22 / 0.3);
}

.dark\:hover\:bg-white\/5:hover:is(.dark *){
  background-color: rgb(255 255 255 / 0.05);
}

@media (min-width: 640px){

  .sm\:bottom-0{
    bottom: 0px;
  }

  .sm\:left-\[23px\]{
    left: 23px;
  }

  .sm\:right-0{
    right: 0px;
  }

  .sm\:top-auto{
    top: auto;
  }

  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:mb-1{
    margin-bottom: 0.25rem;
  }

  .sm\:mb-2{
    margin-bottom: 0.5rem;
  }

  .sm\:mb-3{
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4{
    margin-bottom: 1rem;
  }

  .sm\:mb-8{
    margin-bottom: 2rem;
  }

  .sm\:ml-auto{
    margin-left: auto;
  }

  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:block{
    display: block;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:grid{
    display: grid;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:h-12{
    height: 3rem;
  }

  .sm\:h-16{
    height: 4rem;
  }

  .sm\:h-20{
    height: 5rem;
  }

  .sm\:h-5{
    height: 1.25rem;
  }

  .sm\:h-6{
    height: 1.5rem;
  }

  .sm\:h-80{
    height: 20rem;
  }

  .sm\:h-\[46px\]{
    height: 46px;
  }

  .sm\:h-\[80vh\]{
    height: 80vh;
  }

  .sm\:min-h-\[100px\]{
    min-height: 100px;
  }

  .sm\:min-h-\[80vh\]{
    min-height: 80vh;
  }

  .sm\:w-12{
    width: 3rem;
  }

  .sm\:w-16{
    width: 4rem;
  }

  .sm\:w-20{
    width: 5rem;
  }

  .sm\:w-24{
    width: 6rem;
  }

  .sm\:w-48{
    width: 12rem;
  }

  .sm\:w-5{
    width: 1.25rem;
  }

  .sm\:w-52{
    width: 13rem;
  }

  .sm\:w-6{
    width: 1.5rem;
  }

  .sm\:w-64{
    width: 16rem;
  }

  .sm\:w-8{
    width: 2rem;
  }

  .sm\:w-\[180px\]{
    width: 180px;
  }

  .sm\:w-\[46px\]{
    width: 46px;
  }

  .sm\:w-auto{
    width: auto;
  }

  .sm\:max-w-2xl{
    max-width: 42rem;
  }

  .sm\:max-w-\[90px\]{
    max-width: 90px;
  }

  .sm\:max-w-lg{
    max-width: 32rem;
  }

  .sm\:max-w-md{
    max-width: 28rem;
  }

  .sm\:max-w-sm{
    max-width: 24rem;
  }

  .sm\:columns-2{
    -moz-columns: 2;
         columns: 2;
  }

  .sm\:columns-3{
    -moz-columns: 3;
         columns: 3;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:flex-col{
    flex-direction: column;
  }

  .sm\:items-start{
    align-items: flex-start;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:justify-end{
    justify-content: flex-end;
  }

  .sm\:justify-between{
    justify-content: space-between;
  }

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-2\.5{
    gap: 0.625rem;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-6{
    gap: 1.5rem;
  }

  .sm\:gap-8{
    gap: 2rem;
  }

  .sm\:gap-x-4{
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .sm\:gap-y-2{
    row-gap: 0.5rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:space-y-5 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:rounded-lg{
    border-radius: var(--radius);
  }

  .sm\:border-l{
    border-left-width: 1px;
  }

  .sm\:border-t-0{
    border-top-width: 0px;
  }

  .sm\:p-2{
    padding: 0.5rem;
  }

  .sm\:p-4{
    padding: 1rem;
  }

  .sm\:p-5{
    padding: 1.25rem;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }

  .sm\:p-7{
    padding: 1.75rem;
  }

  .sm\:p-8{
    padding: 2rem;
  }

  .sm\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:pl-4{
    padding-left: 1rem;
  }

  .sm\:pt-0{
    padding-top: 0px;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-7xl{
    font-size: 4.5rem;
    line-height: 1;
  }

  .sm\:text-\[10px\]{
    font-size: 10px;
  }

  .sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"]{
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 768px){

  .md\:absolute{
    position: absolute;
  }

  .md\:block{
    display: block;
  }

  .md\:inline{
    display: inline;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto{
    width: auto;
  }

  .md\:max-w-\[420px\]{
    max-width: 420px;
  }

  .md\:columns-3{
    -moz-columns: 3;
         columns: 3;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:items-center{
    align-items: center;
  }

  .md\:justify-between{
    justify-content: space-between;
  }

  .md\:gap-12{
    gap: 3rem;
  }

  .md\:gap-16{
    gap: 4rem;
  }

  .md\:gap-4{
    gap: 1rem;
  }

  .md\:p-8{
    padding: 2rem;
  }

  .md\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-28{
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-8xl{
    font-size: 6rem;
    line-height: 1;
  }

  .md\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:opacity-0{
    opacity: 0;
  }

  .md\:\[direction\:ltr\]{
    direction: ltr;
  }

  .md\:\[direction\:rtl\]{
    direction: rtl;
  }

  .after\:md\:hidden::after{
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2{
    margin: 0.5rem;
  }

  .peer[data-state="collapsed"][data-variant="inset"] ~ .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2{
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0{
    margin-left: 0px;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl{
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow{
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 1024px){

  .lg\:order-none{
    order: 0;
  }

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:col-start-1{
    grid-column-start: 1;
  }

  .lg\:col-start-3{
    grid-column-start: 3;
  }

  .lg\:row-span-2{
    grid-row: span 2 / span 2;
  }

  .lg\:row-start-1{
    grid-row-start: 1;
  }

  .lg\:row-start-2{
    grid-row-start: 2;
  }

  .lg\:block{
    display: block;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:w-auto{
    width: auto;
  }

  .lg\:max-w-\[80rem\]{
    max-width: 80rem;
  }

  .lg\:columns-3{
    -moz-columns: 3;
         columns: 3;
  }

  .lg\:columns-4{
    -moz-columns: 4;
         columns: 4;
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 26rem\)\]{
    grid-template-columns: minmax(0,1fr) minmax(0,26rem);
  }

  .lg\:grid-cols-\[minmax\(0\2c 340px\)_minmax\(0\2c 1fr\)\]{
    grid-template-columns: minmax(0,340px) minmax(0,1fr);
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:items-start{
    align-items: flex-start;
  }

  .lg\:justify-start{
    justify-content: flex-start;
  }

  .lg\:gap-6{
    gap: 1.5rem;
  }

  .lg\:text-left{
    text-align: left;
  }

  .lg\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px){

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (orientation: landscape){

  .landscape\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media print{

  .print\:hidden{
    display: none;
  }

  .print\:border-none{
    border-style: none;
  }

  .print\:shadow-none{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]){
  background-color: hsl(var(--accent));
}

.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child{
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child{
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside){
  background-color: hsl(var(--accent) / 0.5);
}

.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end){
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){
  padding-right: 0px;
}

.\[\&\>button\]\:hidden>button{
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:line-clamp-1>span{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg{
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg{
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg{
  top: 1rem;
}

.\[\&\>svg\]\:size-3\.5>svg{
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg{
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg{
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg{
  height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg{
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg{
  width: 0.75rem;
}

.\[\&\>svg\]\:shrink-0>svg{
  flex-shrink: 0;
}

.\[\&\>svg\]\:text-destructive>svg{
  color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground>svg{
  color: hsl(var(--foreground));
}

.\[\&\>svg\]\:text-muted-foreground>svg{
  color: hsl(var(--muted-foreground));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg{
  color: hsl(var(--sidebar-accent-foreground));
}

.\[\&\>svg\~\*\]\:pl-7>svg~*{
  padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr{
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{
  fill: hsl(var(--muted-foreground));
}

.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc']{
  stroke: hsl(var(--border) / 0.5);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\.recharts-layer\]\:outline-none .recharts-layer{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc']{
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector{
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc']{
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff']{
  stroke: transparent;
}

.\[\&_\.recharts-sector\]\:outline-none .recharts-sector{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-surface\]\:outline-none .recharts-surface{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{
  color: hsl(var(--muted-foreground));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p{
  line-height: 1.625;
}

.\[\&_svg\]\:pointer-events-none svg{
  pointer-events: none;
}

.\[\&_svg\]\:size-4 svg{
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:shrink-0 svg{
  flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child{
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr{
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{
  cursor: e-resize;
}

[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize{
  cursor: w-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{
  cursor: w-resize;
}

[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize{
  cursor: e-resize;
}
/* ============================================================
   RMG Client Hub (CRM) — v8 dark-glass reskin  [DESIGN ONLY]
   ------------------------------------------------------------
   Makes the logged-in client Hub wear the same dark-glass
   aesthetic as the v8 marketing site (/your-portal): ink-green
   background with green + gold blooms, frosted glass cards with a
   soft gold hairline, gold #D0A54A accents, cream #FFFAF1 text,
   ZCOOL XiaoWei display + Lato body.

   SCOPING — every selector is prefixed `.crm-hub`. That class is
   set ONLY on the ClientLayout / PhotographerLayout shells (which
   also carry the `dark` class so the shadcn tokens flip to the
   v8-tuned dark palette in index.css). Nothing here can reach:
     - the public marketing site (its dark theme is scoped under
       `.v8hub`, a different namespace)
     - the 4 public pages that use ui/ components (Contact,
       BookingPage, ThankYou, DayOfAccess) — those render in light
       mode with no `.crm-hub` / `.dark` wrapper
   The wedding fonts (ZCOOL XiaoWei / Lato) are already loaded in
   index.html, so nothing font-related is imported here.

   This file adds ZERO structure and ZERO behaviour. It only sets
   colours, fonts, backdrop-blur, borders and shadows on the shell
   and on the shared Card. Padding/layout/props are all untouched.
   ============================================================ */

/* dark-glass token references, local to the Hub */
.crm-hub {
  --hub-ink: #0F1512;
  --hub-green: #00603A;
  --hub-green-deep: #003D24;
  --hub-gold: #D0A54A;
  --hub-gold-light: #E0C079;
  --hub-gold-soft: rgba(208, 165, 74, 0.45);
  --hub-cream: #FFFAF1;
  --hub-glass: rgba(255, 250, 241, 0.06);
  --hub-glass-brd: rgba(208, 165, 74, 0.28);
  --hub-rule-light: rgba(255, 250, 241, 0.14);
  --hub-blur: blur(22px) saturate(150%);
  --hub-gshadow: 0 24px 64px -26px rgba(0, 30, 18, 0.55), 0 6px 22px rgba(0, 0, 0, 0.28);
  --font-display-wedding: 'ZCOOL XiaoWei', Georgia, serif;
  --font-body-wedding: 'Lato', -apple-system, system-ui, sans-serif;
}

/* ------------------------------------------------------------
   SHELL — dark ink-green field with green + gold blooms.
   The layout div already paints bg-background (now v8 ink via the
   dark token); this lays the soft radial blooms over it exactly
   like the .v8hub .bg-field, so the glass cards always read.
   ------------------------------------------------------------ */
.crm-hub {
  position: relative;
  /* Solid dark base first, so the Hub is NEVER a white gap on a phone — even
     where iOS Safari drops the gradient layers below the fold. */
  background-color: #0F1512;
  background-image:
    radial-gradient(48vw 48vw at 12% 4%, rgba(0, 96, 58, 0.42), transparent 60%),
    radial-gradient(42vw 42vw at 92% 14%, rgba(208, 165, 74, 0.16), transparent 60%),
    radial-gradient(52vw 52vw at 82% 88%, rgba(0, 96, 58, 0.3), transparent 62%),
    radial-gradient(40vw 40vw at 6% 96%, rgba(208, 165, 74, 0.1), transparent 60%),
    linear-gradient(180deg, #0F1512, #0b1a13 50%, #0F1512);
  background-repeat: no-repeat;
  /* Deliberately NOT background-attachment: fixed — on iOS Safari that janks and
     can leave gaps below the fold; letting the field scroll with content
     guarantees it covers the whole page height on mobile. */
}

/* When a hub (admin or portal) is on screen, paint the page backdrop with the
   hub ink too. Otherwise a section wider than the viewport (e.g. the pipeline
   board) reveals the light cream body background in the overflow area. Scoped
   to :has(.crm-hub) so public pages stay on their light background. */
html:has(.crm-hub),
body:has(.crm-hub) {
  background-color: #0F1512;
}

/* The shared mobile nav drawer (Sheet) carries `crm-hub` for theming but also
   Tailwind's `fixed` for its overlay positioning. Because crm-hub.css loads
   after the utilities, the shell's `position: relative` above would otherwise
   win on equal specificity and collapse the drawer. These two-class guards keep
   any positioned crm-hub element (drawer, sticky bars) in its intended mode. */
.crm-hub.fixed { position: fixed; }
.crm-hub.absolute { position: absolute; }
.crm-hub.sticky { position: sticky; }

/* ------------------------------------------------------------
   FONTS — Hub headings in ZCOOL XiaoWei, body in Lato.
   Applied at the shell level so every page inherits it without
   editing any page. font-weight kept normal for the display face
   (ZCOOL is a single weight) and the display face is given a touch
   more letter-spacing so it reads as the wedding display, not the
   old Montserrat. Utility font classes (.font-display / .font-sans)
   used inside the Hub are remapped to the wedding faces too.
   ------------------------------------------------------------ */
.crm-hub {
  font-family: var(--font-body-wedding);
}
.crm-hub h1,
.crm-hub h2,
.crm-hub h3,
.crm-hub h4,
.crm-hub h5,
.crm-hub h6,
.crm-hub .font-display {
  font-family: var(--font-display-wedding);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.crm-hub .font-sans {
  font-family: var(--font-body-wedding);
}

/* ------------------------------------------------------------
   GLASS CARD — the shared ui/Card renders `bg-card`. Inside the
   Hub we lift it to a frosted glass panel with a gold hairline,
   backdrop-blur, a soft shadow and a faint gold bloom in the
   corner. Structure / padding / radius are inherited from the
   component; we only restyle surface, border, blur and shadow.
   Also covers the two inline `bg-card` blocks the Portal uses
   (package card + the rounded-xl border blocks) so the whole
   dashboard is one glass family.
   ------------------------------------------------------------ */
.crm-hub .bg-card,
.crm-hub [class*="bg-card"] {
  background-color: var(--hub-glass) !important;
  border-color: var(--hub-glass-brd);
  backdrop-filter: var(--hub-blur);
  -webkit-backdrop-filter: var(--hub-blur);
  box-shadow: var(--hub-gshadow);
  position: relative;
}

/* gold corner bloom — purely decorative, sits under the content.
   Only applied to direct glass surfaces, never to nested chips. */
.crm-hub .bg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 100% 0, rgba(208, 165, 74, 0.12), transparent 55%),
    radial-gradient(circle at 0 100%, rgba(255, 255, 255, 0.05), transparent 50%);
  z-index: 0;
}
/* keep card content above the bloom without changing layout */
.crm-hub .bg-card > * {
  position: relative;
  z-index: 1;
}

/* borders inside the Hub default to the gold hairline so dividers
   and outlines read as the dark-glass system, not grey lines */
.crm-hub .border,
.crm-hub .border-t,
.crm-hub .border-b,
.crm-hub .border-l,
.crm-hub .border-r,
.crm-hub .border-border {
  border-color: var(--hub-glass-brd);
}

/* muted / secondary text warms to a soft cream so it stays legible
   on the dark field (the token already does this; this catches any
   hard-coded neutral greys used inline in the dashboard cards) */
.crm-hub .text-muted-foreground {
  color: rgba(255, 250, 241, 0.68);
}

/* primary accent chips (e.g. the "days to go" pill uses bg-primary/20
   text-primary) already resolve to gold via the dark token; nothing
   extra needed. Gold links / accents inherit --primary. */

/* ------------------------------------------------------------
   DASHBOARD HEADER — the sticky top bar uses bg-card; give it the
   same dark frosted treatment but flat (no bloom / heavy shadow)
   so it reads as chrome, matching the v8 scrolled header frost.
   ------------------------------------------------------------ */
.crm-hub header.bg-card {
  background-color: rgba(15, 21, 18, 0.72) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--hub-rule-light);
  box-shadow: none;
}
.crm-hub header.bg-card::before {
  display: none;
}

/* ============================================================
   v9 CRAFT ELEVATION — bring the Hub up to the new login's finish.
   Adds script accents, an eyebrow, richer glass (deeper blur,
   layered shadow, reflective top edge), pill buttons and a gold
   scrollbar. Pure surface polish — no structural changes.
   ============================================================ */
.crm-hub {
  --font-script-wedding: 'Oooh Baby', cursive;
  --hub-gold-l: #E9C87E;
  --hub-gold-d: #A8842F;
  --ease-hub: cubic-bezier(.16, 1, .3, 1);
}

/* script accent + eyebrow utilities (use in headings across the Hub) */
.crm-hub .script {
  font-family: var(--font-script-wedding);
  color: var(--hub-gold-l);
  font-weight: 400;
  font-size: 1.14em;
  line-height: .9;
  display: inline-block;
}
.crm-hub .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body-wedding);
  font-size:var(--fs-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hub-gold-l);
  font-weight: 700;
}

/* headings: a touch more presence + generous line-height */
.crm-hub h1 { letter-spacing: .012em; line-height: 1.06; }
.crm-hub h2 { letter-spacing: .012em; line-height: 1.1; }

/* elevated glass — deeper blur, layered shadow, reflective top edge */
.crm-hub .bg-card,
.crm-hub [class*="bg-card"] {
  border-radius: 18px;
  backdrop-filter: blur(26px) saturate(1.28);
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  box-shadow: 0 40px 82px -42px rgba(0, 22, 13, .72), 0 10px 30px -22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 250, 241, .08);
}
.crm-hub .bg-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 36%;
  pointer-events: none;
  z-index: 0;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(255, 250, 241, .06), transparent);
}
/* header stays flat chrome — no reflective edge or lifted shadow */
.crm-hub header.bg-card::after { display: none; }
.crm-hub header.bg-card { box-shadow: none; }

/* primary buttons → gold glass (translucent, blurred, gold border) */
.crm-hub button.bg-primary,
.crm-hub a.bg-primary {
  border-radius: 100px;
  background-color: rgba(208, 165, 74, .16) !important;
  border: 1px solid rgba(208, 165, 74, .55);
  color: var(--hub-cream) !important;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 250, 241, .12);
  transition: transform .2s var(--ease-hub), box-shadow .3s var(--ease-hub), background-color .2s var(--ease-hub), border-color .2s var(--ease-hub);
}
.crm-hub button.bg-primary:hover,
.crm-hub a.bg-primary:hover {
  background-color: rgba(208, 165, 74, .28) !important;
  border-color: var(--hub-gold);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px var(--hub-gold-soft), inset 0 1px 0 rgba(255, 250, 241, .16);
}

/* gold focus ring for inputs/controls inside the Hub */
.crm-hub input:focus-visible,
.crm-hub textarea:focus-visible,
.crm-hub select:focus-visible {
  border-color: var(--hub-gold) !important;
  box-shadow: 0 0 0 3px rgba(208, 165, 74, .16) !important;
  outline: none;
}

/* refined gold scrollbar within the Hub */
.crm-hub *::-webkit-scrollbar { width: 10px; height: 10px; }
.crm-hub *::-webkit-scrollbar-thumb {
  background: rgba(208, 165, 74, .35);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.crm-hub *::-webkit-scrollbar-thumb:hover { background: rgba(208, 165, 74, .55); background-clip: padding-box; }
.crm-hub *::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .crm-hub button.bg-primary,
  .crm-hub a.bg-primary { transition: none; }
}

/* ============================================================
   PAYMENTS PAGE (/portal/payments)
   ============================================================ */
.crm-hub .pay-page h1 { color: var(--hub-cream); }
.crm-hub .pay-stat-lab { font-size:var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,250,241,.6); font-weight: 700; }
.crm-hub .pay-stat-val { font-family: var(--font-display-wedding); font-size: 30px; color: var(--hub-cream); margin-top: 8px; line-height: 1; }
.crm-hub .pay-stat-val.pay-good { color: #9fd6a6; }
.crm-hub .pay-stat-val.pay-warn { color: var(--hub-gold-l); }

.crm-hub .pay-bar { height: 6px; border-radius: 100px; background: rgba(255,250,241,.1); overflow: hidden; }
.crm-hub .pay-bar span { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--hub-gold-d), var(--hub-gold-l)); }

.crm-hub .pay-schedule { display: flex; flex-direction: column; gap: 12px; }
.crm-hub .pay-row-title { font-family: var(--font-display-wedding); font-size:var(--fs-lead); color: var(--hub-cream); }
.crm-hub .pay-row-amount { font-family: var(--font-display-wedding); font-size:var(--fs-lead); color: var(--hub-cream); }
.crm-hub .pay-node { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hub-glass-brd); color: var(--hub-gold-l); background: rgba(208,165,74,.12); }
.crm-hub .pay-node-paid { color: #9fd6a6; background: rgba(120,190,130,.14); border-color: rgba(120,190,130,.35); }
.crm-hub .pay-node-overdue { color: #e08a76; background: rgba(201,85,61,.14); border-color: rgba(201,85,61,.4); }

.crm-hub .pay-pill { display: inline-flex; align-items: center; gap: 5px; font-size:var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 5px 11px; border-radius: 100px; }
.crm-hub .pay-paid { color: #9fd6a6; background: rgba(120,190,130,.12); border: 1px solid rgba(120,190,130,.32); }
.crm-hub .pay-due { color: var(--hub-gold-l); background: rgba(208,165,74,.12); border: 1px solid rgba(208,165,74,.34); }
.crm-hub .pay-overdue { color: #e08a76; background: rgba(201,85,61,.14); border: 1px solid rgba(201,85,61,.4); }

/* ============================================================
   CTA BUTTONS — match the public site / login (round pill,
   uppercase, letter-spaced; gold primary + glass secondary)
   ============================================================ */
.crm-hub .hub-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px; border-radius: 100px;
  font-family: var(--font-body-wedding); font-weight: 700; font-size:var(--fs-meta);
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease-hub), box-shadow .3s var(--ease-hub), background .25s var(--ease-hub), border-color .25s var(--ease-hub);
}
.crm-hub .hub-cta-gold {
  background: linear-gradient(180deg, var(--hub-gold-l), var(--hub-gold));
  color: #20160a; border: 1px solid var(--hub-gold);
}
.crm-hub .hub-cta-gold:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -14px var(--hub-gold-soft); }
.crm-hub .hub-cta-glass {
  background: rgba(255,250,241,.1); border: 1px solid rgba(255,250,241,.5); color: var(--hub-cream);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.crm-hub .hub-cta-glass:hover { background: rgba(255,250,241,.2); border-color: var(--hub-gold-l); transform: translateY(-1px); }
.crm-hub .hub-cta:active { transform: scale(.985); }

/* ============================================================
   SECTION HERO — cinematic image band per section
   ============================================================ */
.crm-hub .client-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  height: clamp(184px, 26vh, 256px);
  border: 1px solid var(--hub-glass-brd);
  box-shadow: 0 34px 66px -40px rgba(0,0,0,.72);
  isolation: isolate;
}
.crm-hub .client-hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block;
  filter: brightness(.62) saturate(.98);
  transition: transform 4s var(--ease-hub);
}
.crm-hub .client-hero:hover .client-hero-img { transform: scale(1.04); }
.crm-hub .client-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* dark ink-green wash over the whole image */
    linear-gradient(rgba(0,45,28,.5), rgba(0,45,28,.5)),
    /* deepen bottom + left for the title legibility */
    linear-gradient(0deg, rgba(9,24,17,.86), rgba(9,24,17,.2) 58%, transparent),
    linear-gradient(90deg, rgba(11,24,18,.7), transparent 60%),
    /* faint gold bloom top-right to keep the brand warmth */
    radial-gradient(70% 90% at 100% 0, rgba(208,165,74,.14), transparent 60%);
}
.crm-hub .client-hero-inner {
  position: absolute; z-index: 2; left: 0; bottom: 0;
  padding: clamp(20px, 3.4vw, 36px);
  max-width: 640px;
}
.crm-hub .client-hero-title {
  font-family: var(--font-display-wedding);
  font-weight: 400; color: var(--hub-cream);
  font-size: clamp(30px, 4vw, 46px); line-height: 1.04; margin: 12px 0 0;
}
.crm-hub .client-hero-sub {
  color: rgba(255,250,241,.78); margin: 12px 0 0;
  font-size:var(--fs-body); line-height: 1.5; max-width: 30rem;
}
.crm-hub .client-hero-right { position: absolute; z-index: 3; top: clamp(16px,2.4vw,26px); right: clamp(16px,2.4vw,26px); }

/* ============================================================
   INSPIRATION — "Draw from our work" curated gallery
   ============================================================ */
.crm-hub .insp-work { margin-top: 8px; }
.crm-hub .insp-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.crm-hub .insp-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hub-glass-brd);
  background: #0b1a13;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.7);
}
.crm-hub .insp-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover; display: block;
  transition: transform 1.1s var(--ease-hub), filter .5s ease;
  filter: brightness(.82);
}
.crm-hub .insp-card:hover .insp-media { transform: scale(1.05); filter: brightness(.95); }
.crm-hub .insp-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(11,15,12,.82) 100%);
}
.crm-hub .insp-play {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,15,12,.5); border: 1px solid rgba(255,250,241,.5);
  backdrop-filter: blur(6px);
}
.crm-hub .insp-play svg { width: 13px; height: 13px; color: var(--hub-cream); margin-left: 1px; fill: currentColor; }
.crm-hub .insp-foot {
  position: absolute; left: 0; right: 44px; bottom: 0; z-index: 2;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.crm-hub .insp-cat {
  font-size:var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--hub-gold-l); font-weight: 700;
}
.crm-hub .insp-label { font-family: var(--font-display-wedding); font-size:var(--fs-body); color: var(--hub-cream); line-height: 1.1; }
.crm-hub .insp-add {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,15,12,.5); border: 1px solid rgba(255,250,241,.4);
  backdrop-filter: blur(8px); color: var(--hub-cream);
  transition: background .25s var(--ease-hub), border-color .25s var(--ease-hub), transform .2s var(--ease-hub);
}
.crm-hub .insp-add svg { width: 17px; height: 17px; transition: fill .2s; }
.crm-hub .insp-add:hover { background: var(--hub-gold); border-color: var(--hub-gold); color: #20160a; transform: scale(1.08); }
.crm-hub .insp-add:hover svg { fill: currentColor; }
@media (max-width: 640px) {
  .crm-hub .insp-work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ============================================================
   BRANDED EMPTY STATE (client Hub)
   ============================================================ */
.crm-hub .client-empty {
  position: relative;
  text-align: center;
  padding: clamp(40px, 7vh, 72px) 28px;
  border: 1px solid var(--hub-glass-brd);
  border-radius: 20px;
  background: var(--hub-glass);
  backdrop-filter: var(--hub-blur);
  -webkit-backdrop-filter: var(--hub-blur);
  overflow: hidden;
}
.crm-hub .client-empty::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0, rgba(208,165,74,.12), transparent 70%);
}
.crm-hub .client-empty-ic {
  position: relative;
  width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--hub-gold-l);
  background: rgba(208,165,74,.12);
  border: 1px solid rgba(208,165,74,.4);
}
.crm-hub .client-empty-ic svg { width: 26px; height: 26px; }
.crm-hub .client-empty-title {
  position: relative;
  font-family: var(--font-display-wedding);
  font-size: 26px; color: var(--hub-cream); margin: 0 0 10px; font-weight: 400;
}
.crm-hub .client-empty-copy {
  position: relative;
  color: rgba(255,250,241,.6);
  font-size:var(--fs-body); line-height: 1.6; max-width: 30rem; margin: 0 auto;
}
.crm-hub .client-empty-action { position: relative; margin-top: 22px; }

.crm-hub .pay-history { display: flex; flex-direction: column; }
.crm-hub .pay-hist-row { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid rgba(255,250,241,.08); }
.crm-hub .pay-history .pay-hist-row:last-child { border-bottom: none; }
.crm-hub .pay-hist-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #9fd6a6; background: rgba(120,190,130,.12); border: 1px solid rgba(120,190,130,.3); }

/* ============================================================
   v9 LEGIBILITY LAYER — staff portal (admin) + Hub
   ------------------------------------------------------------
   Many admin pages were written for a LIGHT surface and use dark
   ink utilities (text-secondary, text-*-600/700/800/900) plus
   pastel *-100 chips. On the dark glass field those read as near
   invisible. This block remaps colour ONLY — no layout, spacing
   or structural change — so every admin screen inherits the RMG
   dark-glass palette and stays readable.
   ============================================================ */

/* page titles / dark-green headings → cream */
.crm-hub .text-secondary,
.crm-hub .text-foreground,
.crm-hub .text-card-foreground { color: var(--hub-cream) !important; }
.crm-hub h1, .crm-hub h2, .crm-hub h3 { color: var(--hub-cream); }

/* dark neutral ink → cream / soft cream */
.crm-hub .text-black,
.crm-hub [class*="text-gray-9"], .crm-hub [class*="text-gray-8"], .crm-hub [class*="text-gray-7"],
.crm-hub [class*="text-slate-9"], .crm-hub [class*="text-slate-8"], .crm-hub [class*="text-slate-7"],
.crm-hub [class*="text-zinc-9"], .crm-hub [class*="text-zinc-8"], .crm-hub [class*="text-zinc-7"],
.crm-hub [class*="text-neutral-9"], .crm-hub [class*="text-neutral-8"], .crm-hub [class*="text-neutral-7"] {
  color: var(--hub-cream) !important;
}
.crm-hub [class*="text-gray-6"], .crm-hub [class*="text-gray-5"], .crm-hub [class*="text-gray-4"],
.crm-hub [class*="text-slate-6"], .crm-hub [class*="text-slate-5"], .crm-hub [class*="text-slate-4"],
.crm-hub [class*="text-zinc-6"], .crm-hub [class*="text-zinc-5"], .crm-hub [class*="text-zinc-4"],
.crm-hub [class*="text-neutral-6"], .crm-hub [class*="text-neutral-5"], .crm-hub [class*="text-neutral-4"],
.crm-hub [class*="text-stone-6"], .crm-hub [class*="text-stone-5"], .crm-hub [class*="text-stone-4"] {
  color: rgba(255, 250, 241, .68) !important;
}

/* lift the dimmest translucent text to a legible floor on the dark field */
.crm-hub [class*="text-white/30"], .crm-hub [class*="text-white/40"],
.crm-hub [class*="text-foreground/30"], .crm-hub [class*="text-foreground/40"], .crm-hub [class*="text-foreground/50"],
.crm-hub [class*="text-muted-foreground/30"], .crm-hub [class*="text-muted-foreground/40"], .crm-hub [class*="text-muted-foreground/50"] {
  color: rgba(255, 250, 241, .62) !important;
}

/* gold text reads too dim on the dark field at small sizes; use the lighter
   brand gold (accents keep their gold identity, just legible). */
.crm-hub .text-primary { color: var(--hub-gold-light) !important; }

/* status colours → light, dark-field-safe tints (semantic meaning kept) */
.crm-hub .text-green-600, .crm-hub .text-green-700, .crm-hub .text-green-800,
.crm-hub .text-emerald-600, .crm-hub .text-emerald-700, .crm-hub .text-emerald-800 { color: #9fd6a6 !important; }
.crm-hub .text-red-600, .crm-hub .text-red-700, .crm-hub .text-red-800,
.crm-hub .text-rose-600, .crm-hub .text-rose-700 { color: #e79484 !important; }
.crm-hub .text-amber-600, .crm-hub .text-amber-700, .crm-hub .text-amber-800,
.crm-hub .text-yellow-600, .crm-hub .text-yellow-700, .crm-hub .text-yellow-800 { color: var(--hub-gold-l) !important; }
.crm-hub .text-orange-600, .crm-hub .text-orange-700, .crm-hub .text-orange-800 { color: #f0a878 !important; }
.crm-hub .text-blue-600, .crm-hub .text-blue-700, .crm-hub .text-blue-800,
.crm-hub .text-sky-600, .crm-hub .text-sky-700 { color: #8fc6e8 !important; }
.crm-hub .text-purple-600, .crm-hub .text-purple-700, .crm-hub .text-purple-800,
.crm-hub .text-indigo-600, .crm-hub .text-indigo-700 { color: #bdaae8 !important; }
.crm-hub .text-pink-600, .crm-hub .text-pink-700 { color: #eaa2bd !important; }

/* pastel chip backgrounds (bg-*-50/100) → translucent tints so the
   icon inside reads light instead of white-on-white */
.crm-hub [class*="bg-green-100"], .crm-hub [class*="bg-green-50"],
.crm-hub [class*="bg-emerald-100"] { background-color: rgba(120, 190, 130, .16) !important; }
.crm-hub [class*="bg-red-100"], .crm-hub [class*="bg-red-50"],
.crm-hub [class*="bg-rose-100"] { background-color: rgba(201, 85, 61, .18) !important; }
.crm-hub [class*="bg-yellow-100"], .crm-hub [class*="bg-yellow-50"],
.crm-hub [class*="bg-amber-100"], .crm-hub [class*="bg-amber-50"] { background-color: rgba(208, 165, 74, .18) !important; }
.crm-hub [class*="bg-orange-100"], .crm-hub [class*="bg-orange-50"] { background-color: rgba(224, 138, 92, .18) !important; }
.crm-hub [class*="bg-blue-100"], .crm-hub [class*="bg-blue-50"],
.crm-hub [class*="bg-sky-100"] { background-color: rgba(120, 175, 210, .18) !important; }
.crm-hub [class*="bg-purple-100"], .crm-hub [class*="bg-purple-50"],
.crm-hub [class*="bg-indigo-100"] { background-color: rgba(160, 140, 220, .18) !important; }
.crm-hub [class*="bg-pink-100"], .crm-hub [class*="bg-pink-50"] { background-color: rgba(220, 140, 170, .18) !important; }
.crm-hub [class*="bg-gray-100"], .crm-hub [class*="bg-gray-50"],
.crm-hub [class*="bg-slate-100"], .crm-hub [class*="bg-slate-50"] { background-color: rgba(255, 250, 241, .1) !important; }

/* light chips also need a hairline so they don't float shapelessly */
.crm-hub [class*="bg-yellow-100"], .crm-hub [class*="bg-green-100"],
.crm-hub [class*="bg-red-100"], .crm-hub [class*="bg-orange-100"],
.crm-hub [class*="bg-blue-100"], .crm-hub [class*="bg-purple-100"],
.crm-hub [class*="bg-pink-100"] { box-shadow: inset 0 0 0 1px rgba(255, 250, 241, .12); }

/* muted surfaces (empty-state circles, skeletons, wells) */
.crm-hub .bg-muted { background-color: rgba(255, 250, 241, .08) !important; }
.crm-hub .bg-muted\/50, .crm-hub [class*="bg-muted/"] { background-color: rgba(255, 250, 241, .06) !important; }
.crm-hub .bg-accent, .crm-hub [class*="bg-accent/"] { color: inherit; }

/* TABS — inactive triggers were dark green on dark; make them soft
   cream with a gold active state matching the site language */
.crm-hub [role="tablist"] { background-color: rgba(255, 250, 241, .06) !important; }
.crm-hub [role="tab"] { color: rgba(255, 250, 241, .62) !important; }
.crm-hub [role="tab"]:hover { color: var(--hub-cream) !important; }
.crm-hub [role="tab"][data-state="active"] {
  color: #20160a !important;
  background: linear-gradient(180deg, var(--hub-gold-l), var(--hub-gold)) !important;
  box-shadow: 0 8px 22px -14px var(--hub-gold-soft);
}
/* underline-style tablists (transparent bg) keep gold text + rule */
.crm-hub [role="tablist"].bg-transparent { background-color: transparent !important; }
.crm-hub [role="tablist"].bg-transparent [role="tab"][data-state="active"] {
  color: var(--hub-gold-l) !important;
  background: transparent !important;
  border-bottom-color: var(--hub-gold-l) !important;
  box-shadow: none;
}

/* form controls + selects on the dark field */
.crm-hub input, .crm-hub textarea, .crm-hub select,
.crm-hub [role="combobox"] {
  background-color: rgba(255, 250, 241, .06);
  border-color: var(--hub-rule-light);
  color: var(--hub-cream);
}
.crm-hub input::-moz-placeholder, .crm-hub textarea::-moz-placeholder { color: rgba(255, 250, 241, .42); }
.crm-hub input::placeholder, .crm-hub textarea::placeholder { color: rgba(255, 250, 241, .42); }

/* outline / ghost / secondary buttons → glass, never dark-on-dark */
.crm-hub button.border-input,
.crm-hub button[class*="bg-secondary"],
.crm-hub a[class*="bg-secondary"] {
  background-color: rgba(255, 250, 241, .08) !important;
  border-color: var(--hub-rule-light);
  color: var(--hub-cream) !important;
}
.crm-hub button.border-input:hover,
.crm-hub button[class*="bg-secondary"]:hover {
  background-color: rgba(255, 250, 241, .16) !important;
  border-color: var(--hub-gold-soft);
}

/* badges: outline + secondary variants */
.crm-hub [class*="badge"], .crm-hub .rounded-full.border { color: inherit; }

/* tables */
.crm-hub thead th { color: rgba(255, 250, 241, .6) !important; }
.crm-hub tbody td { color: var(--hub-cream); }
.crm-hub tbody tr { border-color: rgba(255, 250, 241, .08); }
.crm-hub tbody tr:hover { background-color: rgba(255, 250, 241, .04); }

/* skeletons need to be visible against glass */
.crm-hub [class*="animate-pulse"] { background-color: rgba(255, 250, 241, .09) !important; }

/* dialogs / sheets / popovers / dropdowns → dark glass, not white */
.crm-hub [role="dialog"], .crm-hub [role="menu"], .crm-hub [role="listbox"],
[data-radix-popper-content-wrapper] [role="menu"],
[data-radix-popper-content-wrapper] [role="listbox"] {
  color: var(--hub-cream);
}

/* header chrome: trigger, bell + account name were reading near-black */
.crm-hub header.bg-card button,
.crm-hub header.bg-card svg,
.crm-hub header.bg-card span { color: var(--hub-cream); }
.crm-hub header.bg-card button:hover { background-color: rgba(255,250,241,.1) !important; }
.crm-hub header.bg-card .bg-primary\/10 { background-color: rgba(208,165,74,.16) !important; }

/* breadcrumb rail */
.crm-hub nav a, .crm-hub nav[aria-label="breadcrumb"] { color: rgba(255,250,241,.7); }
.crm-hub nav[aria-label="breadcrumb"] a:hover { color: var(--hub-gold-l); }

/* Radix portal surfaces (dialogs, dropdowns, selects, popovers, sheets)
   render outside .crm-hub, so they were plain white panels breaking the
   staff portal's dark language. Theme them to the same dark glass. */
body[data-hub-theme="dark"] [role="dialog"],
body[data-hub-theme="dark"] [role="menu"],
body[data-hub-theme="dark"] [role="listbox"],
body[data-hub-theme="dark"] [data-radix-popper-content-wrapper] > * {
  background-color: rgba(15, 21, 18, .94) !important;
  border-color: rgba(208, 165, 74, .28) !important;
  color: #FFFAF1 !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
body[data-hub-theme="dark"] [role="dialog"] h1,
body[data-hub-theme="dark"] [role="dialog"] h2,
body[data-hub-theme="dark"] [role="dialog"] h3 { color: #FFFAF1 !important; font-family: 'ZCOOL XiaoWei', Georgia, serif; }
body[data-hub-theme="dark"] [role="dialog"] .text-muted-foreground,
body[data-hub-theme="dark"] [role="menu"] .text-muted-foreground { color: rgba(255,250,241,.66) !important; }
body[data-hub-theme="dark"] [role="dialog"] input,
body[data-hub-theme="dark"] [role="dialog"] textarea,
body[data-hub-theme="dark"] [role="dialog"] select,
body[data-hub-theme="dark"] [role="dialog"] [role="combobox"] {
  background-color: rgba(255,250,241,.06) !important;
  border-color: rgba(255,250,241,.16) !important;
  color: #FFFAF1 !important;
}
body[data-hub-theme="dark"] [role="menuitem"]:hover,
body[data-hub-theme="dark"] [role="option"]:hover,
body[data-hub-theme="dark"] [role="menuitem"][data-highlighted],
body[data-hub-theme="dark"] [role="option"][data-highlighted] {
  background-color: rgba(208,165,74,.16) !important;
  color: #FFFAF1 !important;
}

/* portal surfaces: same legibility remap as the shell (light-surface
   utilities inside dialogs were rendering white-on-white) */
body[data-hub-theme="dark"] [role="dialog"] .bg-background,
body[data-hub-theme="dark"] [role="dialog"] button.bg-background,
body[data-hub-theme="dark"] [role="dialog"] .bg-card,
body[data-hub-theme="dark"] [role="menu"] .bg-background {
  background-color: rgba(255, 250, 241, .07) !important;
  border-color: rgba(255, 250, 241, .16) !important;
  color: #FFFAF1 !important;
}
body[data-hub-theme="dark"] [role="dialog"] .text-secondary,
body[data-hub-theme="dark"] [role="dialog"] .text-foreground,
body[data-hub-theme="dark"] [role="dialog"] .text-black,
body[data-hub-theme="dark"] [role="dialog"] [class*="text-gray-7"],
body[data-hub-theme="dark"] [role="dialog"] [class*="text-gray-8"],
body[data-hub-theme="dark"] [role="dialog"] [class*="text-gray-9"] { color: #FFFAF1 !important; }
body[data-hub-theme="dark"] [role="dialog"] .bg-muted,
body[data-hub-theme="dark"] [role="dialog"] [class*="bg-muted/"] { background-color: rgba(255,250,241,.08) !important; }
body[data-hub-theme="dark"] [role="dialog"] [class*="bg-gray-1"],
body[data-hub-theme="dark"] [role="dialog"] [class*="bg-slate-1"] { background-color: rgba(255,250,241,.08) !important; }
body[data-hub-theme="dark"] [role="dialog"] [class*="bg-green-100"] { background-color: rgba(120,190,130,.16) !important; }
body[data-hub-theme="dark"] [role="dialog"] [class*="bg-amber-100"],
body[data-hub-theme="dark"] [role="dialog"] [class*="bg-yellow-100"] { background-color: rgba(208,165,74,.18) !important; }
body[data-hub-theme="dark"] [role="dialog"] .text-green-600,
body[data-hub-theme="dark"] [role="dialog"] .text-green-700 { color: #9fd6a6 !important; }
body[data-hub-theme="dark"] [role="dialog"] .text-red-600,
body[data-hub-theme="dark"] [role="dialog"] .text-red-700 { color: #e79484 !important; }
body[data-hub-theme="dark"] [role="dialog"] [role="tab"] { color: rgba(255,250,241,.62) !important; }
body[data-hub-theme="dark"] [role="dialog"] [role="tab"][data-state="active"] { color: #20160a !important; background: linear-gradient(180deg,#E9C87E,#D0A54A) !important; }
body[data-hub-theme="dark"] [role="dialog"] [role="tablist"] { background-color: rgba(255,250,241,.06) !important; }

/* ── Dashboard "Today": attention states ─────────────────────────────
   Colour is never the only signal — every row also carries timer text. */
.rmg-attention {
  position: relative;
  border: 1px solid hsl(var(--border) / .6);
  transition: border-color .2s ease, background-color .2s ease;
}
.rmg-attention::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: hsl(var(--border));
}
.rmg-attention:hover { border-color: hsl(var(--primary) / .5); }
.rmg-attention__icon { color: hsl(var(--muted-foreground)); }

.rmg-attention--yellow::before { background: #D0A54A; }
.rmg-attention--yellow {
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(208,165,74,.10), transparent 62%);
  border-color: rgba(208,165,74,.28);
}
.rmg-attention--yellow .rmg-attention__icon { color: #D0A54A; }

.rmg-attention--red::before { background: #C4614C; }
.rmg-attention--red {
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(196,97,76,.12), transparent 62%);
  border-color: rgba(196,97,76,.32);
  box-shadow: 0 0 0 1px rgba(196,97,76,.06), 0 8px 24px -18px rgba(196,97,76,.55);
}
.rmg-attention--red .rmg-attention__icon { color: #D9846F; }

/* Card prominence reacts to the data */
.rmg-card-dominant { box-shadow: 0 18px 48px -34px rgba(0,0,0,.6); }
.rmg-card-quiet { opacity: .82; border-color: hsl(var(--border) / .5); box-shadow: none; }
.rmg-card-quiet:hover { opacity: 1; }
.rmg-card-active { border-color: hsl(var(--border)); }
.rmg-card-urgent { border-color: rgba(196,97,76,.3); }

/* Mine · Everyone toggle */
.rmg-scope {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: hsl(var(--muted) / .6);
  border: 1px solid hsl(var(--border) / .6);
}
.rmg-scope__btn {
  padding: 3px 10px;
  border-radius: 999px;
  font-size:var(--fs-label);
  letter-spacing: .04em;
  color: hsl(var(--muted-foreground));
  transition: color .2s ease, background-color .2s ease;
}
.rmg-scope__btn[data-active="true"] {
  color: hsl(var(--foreground));
  background: hsl(var(--background) / .8);
}
/* ============================================================
   RMG v8 homepage design system
   Lifted faithfully from mockup-v8.html.
   SCOPED under .v8 / .v8-header / .v8-footer so it never leaks
   into the CRM, portal, dashboard, or other public pages.
   ============================================================ */

/* Design tokens — applied to the three v8 scopes only.
   Variables inherit to descendants, so all v8 markup can use them. */
.v8,
.v8-header,
.v8-footer {
  --green:#00603A;--green-deep:#003D24;--green-mist:#E8F1EC;
  --gold:#D0A54A;--gold-deep:#A8842F;--gold-light:#E9C87E;--gold-soft:rgba(208,165,74,.45);
  --cream:#FFFAF1;--cream-warm:#F5EFE2;--dark:#232323;--ink:#141414;--grey:#54595F;--white:#fff;
  --rule:rgba(35,35,35,.10);--rule-light:rgba(255,250,241,.18);
  --font-display:'ZCOOL XiaoWei',Georgia,serif;--font-script:'Oooh Baby',cursive;
  --font-body:'Lato',-apple-system,system-ui,sans-serif;--font-label:'Roboto',sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);--ease-expo:cubic-bezier(.16,1,.3,1);--maxw:1400px;
  --glass-bg:rgba(255,250,241,.10);--glass-brd:rgba(255,255,255,.22);
  --glass-blur:blur(26px) saturate(155%);
  --glass-shadow:0 30px 80px -22px rgba(0,30,18,.5),0 8px 28px rgba(0,0,0,.16),inset 1px 1px 0 0 rgba(255,255,255,.32),inset -1px -1px 0 0 rgba(255,255,255,.05);
}

/* Base — scoped to the homepage wrapper */
.v8{font-family:var(--font-body);color:var(--dark);background:var(--cream);line-height:1.65;font-size:var(--fs-body);position:relative}
.v8 *{margin:0;padding:0;box-sizing:border-box}
.v8 img{display:block;max-width:100%;height:auto}
.v8 a{color:inherit;text-decoration:none}
.v8 section{position:relative}

/* CONTINUOUS BACKDROP */
.v8 .bg-field{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60vw 60vw at 12% 8%,rgba(0,96,58,.10),transparent 60%),
  radial-gradient(50vw 50vw at 92% 30%,rgba(208,165,74,.12),transparent 60%),
  radial-gradient(60vw 60vw at 30% 78%,rgba(0,96,58,.08),transparent 60%),
  radial-gradient(50vw 50vw at 80% 96%,rgba(208,165,74,.10),transparent 62%),
  linear-gradient(180deg,var(--cream),var(--cream-warm) 60%,var(--cream));}
.v8 > *:not(.bg-field){position:relative;z-index:1}

/* TYPE — no all-caps anywhere; labels are normal case, lightly tracked */
.v8 h1,.v8 h2,.v8 h3{font-family:var(--font-display);font-weight:400}
.v8 h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:.01em;color:var(--green)}
.v8 h3{font-size:1.5rem;color:var(--green)}
.v8 .script{font-family:var(--font-script);font-weight:400;color:var(--gold-deep);line-height:.9}
.v8 .eyebrow{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.1em;color:var(--gold-deep);display:inline-block}
.v8 .eyebrow.light{color:var(--gold)}
.v8 .lead{font-size:var(--fs-lead);line-height:1.75;color:var(--grey);max-width:60ch}

/* BUTTONS — sentence case, two consistent actions */
.v8 .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;letter-spacing:.02em;padding:15px 30px;border-radius:100px;transition:all .25s var(--ease);cursor:pointer;border:1px solid transparent}
.v8 .btn:active{transform:scale(.97)}
.v8 .btn-primary{background:var(--gold);color:var(--cream);box-shadow:0 8px 28px var(--gold-soft)}
.v8 .btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px);box-shadow:0 14px 38px var(--gold-soft)}
.v8 .btn-glass{background:rgba(255,250,241,.12);border-color:rgba(255,250,241,.5);color:var(--cream);backdrop-filter:blur(8px)}
.v8 .btn-glass:hover{background:rgba(255,250,241,.2);border-color:var(--cream)}
.v8 .btn-glass.on-light{border-color:var(--green);color:var(--green)}
.v8 .btn-glass.on-light:hover{background:var(--green);color:var(--cream)}

/* frosted panel */
.v8 .glass{background:var(--glass-bg);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);border-radius:26px;position:relative;overflow:hidden}
.v8 .glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.18),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 50%)}

/* scroll reveal — bulletproof: visible unless JS hides it, plus failsafe in script */
html:not(.v8-js) .v8 .reveal{opacity:1;transform:none}
.v8-js .v8 .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)}
.v8-js .v8 .reveal.in{opacity:1;transform:none}

/* TRUST BAR */
.v8 .trustbar{background:var(--green-deep);color:rgba(255,250,241,.92);font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.02em;text-align:center;padding:11px 20px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;align-items:center}
.v8 .trustbar span{display:inline-flex;align-items:center;gap:8px}
.v8 .trustbar .dot{color:var(--gold)}
.v8 .trustbar b{color:var(--gold);font-weight:700}

/* HERO */
.v8 .hero{min-height:100vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:var(--ink)}
/* Contain the Vimeo iframe's GPU compositing inside this z-index:0 layer.
   The iframe has a transform, which promotes it to its own composited layer;
   without isolation that layer can escape and paint ABOVE the overlay scrim
   on some page loads (the intermittent "overlay missing on refresh" bug).
   isolation:isolate + translateZ(0) pins the whole media stack at z-index 0,
   so the scrim (z-index 2) reliably composites on top every time. */
.v8 .hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;transform:translateZ(0)}
.v8 .hero-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.77vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.v8 .hero-poster{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.v8 .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(10,16,12,.86)0%,rgba(10,16,12,.62)26%,rgba(10,16,12,.18)50%,rgba(10,16,12,0)66%),linear-gradient(180deg,rgba(0,61,36,.34)0%,rgba(0,40,24,.06)30%,rgba(10,14,12,.86)100%)}
.v8 .hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 48px 76px;display:grid;grid-template-columns:1.5fr .9fr;gap:56px;align-items:end}
.v8 .hero .eyebrow{color:var(--gold);margin-bottom:24px}
.v8 .hero h1{font-size:var(--fs-display);line-height:.94;color:var(--cream);letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.v8 .hero h1 .script{display:block;font-size:clamp(2.6rem,6vw,5.4rem);color:var(--gold);margin-top:.1em;line-height:.8}
.v8 .hero-sub{font-size:var(--fs-lead);line-height:1.7;color:rgba(255,250,241,.92);max-width:48ch;margin:28px 0 36px;font-weight:300;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.v8 .hero-sub em{font-style:italic;color:var(--gold)}
.v8 .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
/* Availability card: dark ink-tinted glass so every row reads over the
   brightest video frame. Gold hairline kept. */
.v8 .glass-card{padding:32px;color:var(--cream);
  background:rgba(10,20,14,.55);border:1px solid rgba(208,165,74,.4);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.v8 .glass-card .eyebrow{color:var(--gold-light);margin-bottom:14px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.v8 .gtitle{font-family:var(--font-display);font-size:1.5rem;color:var(--cream);margin-bottom:18px;line-height:1.2;position:relative;z-index:1;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.v8 .gtitle .script{font-size:1.7rem;color:var(--gold)}
.v8 .grow{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,250,241,.22);font-size:var(--fs-meta);position:relative;z-index:1}
.v8 .grow:last-of-type{border-bottom:0}
.v8 .grow .gl{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em;color:rgba(255,250,241,.92)}
.v8 .grow .gv{font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.v8 .grow .gv.open{color:var(--gold-light);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.v8 .glass-card .btn{width:100%;justify-content:center;margin-top:20px;position:relative;z-index:1}
@keyframes v8-fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.v8 .hero .glass-card,.v8 .hero .eyebrow,.v8 .hero h1,.v8 .hero-sub,.v8 .hero-ctas{animation:v8-fadeUp 1s var(--ease-expo) both}
.v8 .hero h1{animation-delay:.15s}.v8 .hero-sub{animation-delay:.3s}.v8 .hero-ctas{animation-delay:.42s}.v8 .hero .glass-card{animation-delay:.5s}

/* SECTION SHELL: cream sections share one 70px rhythm, so two adjoining
   sections meet at 140px, never a dead band */
.v8 .section{padding:70px 48px;position:relative}
.v8 .container{max-width:var(--maxw);margin:0 auto}
.v8 .sec-head{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:end;margin-bottom:64px}
.v8 .sec-head .script{font-size:2.2rem;display:block;margin-bottom:-4px}

/* FILM — full image with a frosted glass bubble over it */
.v8 .film{min-height:94vh;display:flex;align-items:center;overflow:hidden;padding:clamp(90px,7vw,128px) 48px}
.v8 .film .stage-bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center 30%;will-change:transform;z-index:0}
.v8 .film::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(0,40,24,.7)0%,rgba(0,40,24,.25)55%,transparent 100%)}
.v8 .film .container{position:relative;z-index:2;width:100%}
.v8 .film-bubble{max-width:560px;padding:46px 44px;color:var(--cream)}
.v8 .film-bubble .eyebrow{color:var(--gold);margin-bottom:18px}
.v8 .film-bubble h2{color:var(--cream);margin-bottom:18px}
.v8 .film-bubble h2 .script{color:var(--gold);font-size:2.8rem}
.v8 .film-pull{font-family:var(--font-display);font-size:1.3rem;color:var(--cream);border-left:2px solid var(--gold);padding-left:16px;margin:6px 0 18px;line-height:1.4;position:relative;z-index:1}
.v8 .film-bubble p{color:rgba(255,250,241,.88);font-weight:300;margin-bottom:14px;position:relative;z-index:1}
.v8 .film-watch{display:inline-flex;align-items:center;gap:14px;margin-top:10px;position:relative;z-index:1;color:var(--cream)}
.v8 .film-play{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--cream);background:rgba(255,250,241,.12);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);flex:0 0 auto}
.v8 .film-watch:hover .film-play{background:var(--gold);border-color:var(--gold);transform:scale(1.06)}
.v8 .film-play svg{width:20px;height:20px;fill:var(--cream);margin-left:3px}
.v8 .film-watch .fw-label{font-family:var(--font-label);font-weight:700;font-size:var(--fs-meta)}
.v8 .film-watch .fw-meta{display:block;font-weight:400;font-size:var(--fs-meta);color:rgba(255,250,241,.7)}

/* SERVICES */
.v8 .svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.v8 .svc{position:relative;overflow:hidden;border-radius:18px;min-height:400px;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--cream);cursor:pointer;background:var(--ink)}
.v8 .svc .svc-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease)}
.v8 .svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12)0%,transparent 32%,rgba(0,40,24,.9)100%)}
.v8 .svc:hover .svc-bg{transform:scale(1.07)}
.v8 .svc>*{position:relative;z-index:2}
.v8 .svc .snum{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.04em;color:var(--gold);margin-bottom:12px}
.v8 .svc h3{color:var(--cream);font-size:2rem;margin-bottom:10px}
.v8 .svc p{font-size:var(--fs-meta);color:rgba(255,250,241,.9);max-width:34ch;font-weight:300}
.v8 .svc-a{grid-column:span 7}.v8 .svc-b{grid-column:span 5}.v8 .svc-c{grid-column:span 5}.v8 .svc-d{grid-column:span 7}

/* ONE TEAM — glass showpiece with gold cursor spotlight */
.v8 .team{padding:clamp(80px,7vw,128px) 48px}
.v8 .team-panel{position:relative;border-radius:30px;overflow:hidden}
.v8 .team-panel .stage-bg{position:absolute;inset:-12% 0;z-index:0;background-size:cover;background-position:center}
.v8 .team-panel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(0,45,28,.35) 0%,rgba(0,45,28,.48) 38%,rgba(0,38,24,.63) 62%,rgba(0,32,20,.67) 100%);pointer-events:none}
.v8 .team-panel .spot{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(300px 300px at var(--mx,50%) var(--my,30%),rgba(208,165,74,.3),transparent 70%);opacity:0;transition:opacity .4s}
.v8 .team-panel:hover .spot{opacity:1}
.v8 .team-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:64px}
.v8 .team-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background-size:cover;background-position:center;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.v8 .team-copy{color:var(--cream)}
.v8 .team-copy .eyebrow{color:var(--gold);margin-bottom:14px;text-shadow:0 1px 12px rgba(0,0,0,.65)}
.v8 .team-copy h2{color:var(--cream);text-shadow:0 2px 18px rgba(0,0,0,.7)}.v8 .team-copy h2 .script{color:var(--gold);font-size:2.8rem}
.v8 .team-copy p{color:var(--cream);margin:20px 0;font-weight:400;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.v8 .team-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.v8 .tstat{padding:18px;border-radius:14px;background:rgba(255,250,241,.08);border:1px solid var(--glass-brd);backdrop-filter:blur(8px)}
.v8 .tstat .sv{font-family:var(--font-display);font-size:var(--fs-lead);color:var(--cream);line-height:1.15}
.v8 .tstat .sl{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.01em;color:var(--gold);margin-top:6px}

/* WEDDING HUB */
.v8 .hub{padding:clamp(80px,7vw,128px) 48px}
.v8 .hub-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:60px;align-items:center}
.v8 .hub h2 .script{color:var(--gold);font-size:2.6rem;display:inline}
.v8 .hub-feats{margin:28px 0;display:grid;gap:2px}
.v8 .hub-feat{display:grid;grid-template-columns:36px 1fr;gap:15px;padding:16px 0;border-bottom:1px solid var(--rule)}
.v8 .hub-feat:last-child{border-bottom:0}
.v8 .hub-ic{position:relative;width:36px;height:36px;border-radius:50%;color:var(--green);display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.22));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,96,58,.08),0 6px 18px -8px rgba(0,96,58,.35)}
.v8 .hub-feat .ht{font-family:var(--font-display);font-size:var(--fs-lead);color:var(--green)}
.v8 .hub-feat .hd{font-size:var(--fs-meta);color:var(--grey)}
.v8 .hub-note{font-size:var(--fs-meta);color:var(--gold-deep);font-family:var(--font-label);margin:4px 0 18px}
.v8 .window{border-radius:20px;overflow:hidden;background:rgba(255,255,255,.55);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.v8 .win-bar{display:flex;align-items:center;gap:7px;padding:15px 18px;border-bottom:1px solid var(--rule)}
.v8 .win-bar i{width:11px;height:11px;border-radius:50%}
.v8 .win-bar i:nth-child(1){background:#FF5F57}.v8 .win-bar i:nth-child(2){background:#FEBC2E}.v8 .win-bar i:nth-child(3){background:#28C840}
.v8 .win-url{margin-left:14px;flex:1;background:rgba(255,250,241,.7);border-radius:100px;padding:6px 16px;font-family:var(--font-label);font-size:var(--fs-meta);color:var(--grey);text-align:center}
.v8 .win-body{padding:24px}
.v8 .win-greet{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.v8 .win-greet .wg{font-family:var(--font-display);font-size:1.35rem;color:var(--green)}
.v8 .win-greet .wg .script{color:var(--gold-deep);font-size:1.6rem}
.v8 .win-greet .wprog{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.01em;color:var(--gold-deep);text-align:right}
.v8 .win-greet .wprog b{display:block;font-size:var(--fs-body);color:var(--green)}
.v8 .win-mods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v8 .mod{padding:15px;background:rgba(255,250,241,.75);border:1px solid var(--rule);border-radius:12px}
.v8 .mod .ml{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.02em;color:var(--grey);margin-bottom:7px}
.v8 .mod .mv{font-family:var(--font-display);font-size:var(--fs-body);color:var(--green);line-height:1.25}
.v8 .mod.full{grid-column:span 2}
.v8 .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:9px}
.v8 .cal .cd{aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.7);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:var(--fs-label);color:var(--grey)}
.v8 .cal .cd.x{opacity:.4}.v8 .cal .cd.ok{background:var(--green-mist);color:var(--green);font-weight:700}.v8 .cal .cd.sel{background:var(--gold);color:var(--cream);font-weight:700}

/* ------------------------------------------------------------
   HUB WINDOW, ALIVE: the same calm 12s loop as the HubStrip
   card. The mock doesn't describe the Hub, it runs it: planning
   ticks up 78 → 89 → 96%, the day highlights itself in sequence,
   the shot list completes, Aaron replies, the date pulses once.
   CSS-only, percentage-offset keyframes. Reduced motion shows
   the finished state (see the media block at the end).
   ------------------------------------------------------------ */
.v8 .wnum{position:relative}
.v8 .wnum .n2,.v8 .wnum .n3{position:absolute;inset:0;opacity:0}
.v8 .wnum .n1{animation:v8hwN1 12s ease infinite}
.v8 .wnum .n2{animation:v8hwN2 12s ease infinite}
.v8 .wnum .n3{animation:v8hwN3 12s ease infinite}
@keyframes v8hwN1{0%,30%{opacity:1}34%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes v8hwN2{0%,30%{opacity:0}34%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes v8hwN3{0%,62%{opacity:0}66%,92%{opacity:1}97%,100%{opacity:0}}
.v8 .wbar{display:block;width:76px;height:3px;border-radius:3px;background:rgba(208,165,74,.22);margin:7px 0 0 auto;position:relative;overflow:hidden}
.v8 .wbar::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));transform:scaleX(.78);
  animation:v8hwBar 12s ease infinite}
@keyframes v8hwBar{0%,30%{transform:scaleX(.78)}34%,62%{transform:scaleX(.89)}66%,92%{transform:scaleX(.96)}97%,100%{transform:scaleX(.78)}}
/* the day ticks itself off: prep → ceremony → speeches → first dance */
.v8 .tl-seq{font-size:var(--fs-body);display:flex;flex-wrap:wrap;align-items:center;gap:3px 4px}
.v8 .tl{display:inline-block;padding:2px 9px;border-radius:100px;background:transparent}
.v8 .tl-dot{color:var(--grey);opacity:.55}
.v8 .tl[data-tl="1"]{animation:v8hwTl1 12s ease infinite}
.v8 .tl[data-tl="2"]{animation:v8hwTl2 12s ease infinite}
.v8 .tl[data-tl="3"]{animation:v8hwTl3 12s ease infinite}
.v8 .tl[data-tl="4"]{animation:v8hwTl4 12s ease infinite}
@keyframes v8hwTl1{0%,10%{background:transparent;color:#00603A}14%,92%{background:rgba(208,165,74,.16);color:#A8842F}97%,100%{background:transparent;color:#00603A}}
@keyframes v8hwTl2{0%,28%{background:transparent;color:#00603A}32%,92%{background:rgba(208,165,74,.16);color:#A8842F}97%,100%{background:transparent;color:#00603A}}
@keyframes v8hwTl3{0%,46%{background:transparent;color:#00603A}50%,92%{background:rgba(208,165,74,.16);color:#A8842F}97%,100%{background:transparent;color:#00603A}}
@keyframes v8hwTl4{0%,62%{background:transparent;color:#00603A}66%,92%{background:rgba(208,165,74,.16);color:#A8842F}97%,100%{background:transparent;color:#00603A}}
/* shot list completes late in the loop */
.v8 .mv-swap{position:relative}
.v8 .mv-swap .s1{animation:v8hwS1 12s ease infinite}
.v8 .mv-swap .s2{position:absolute;inset:0;opacity:0;color:var(--gold-deep);animation:v8hwS2 12s ease infinite}
@keyframes v8hwS1{0%,76%{opacity:1}80%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes v8hwS2{0%,76%{opacity:0}80%,93%{opacity:1}97%,100%{opacity:0}}
/* Aaron replies, with one soft pulse */
.v8 .mv-msg{position:relative}
.v8 .mv-msg .m1{display:block;animation:v8hwM1 12s ease infinite}
.v8 .mv-msg .m2{position:absolute;inset:0;opacity:0;color:var(--gold-deep);animation:v8hwM2 12s ease infinite}
@keyframes v8hwM1{0%,80%{opacity:1}84%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes v8hwM2{0%,80%{opacity:0;transform:scale(.97)}84%{opacity:1;transform:scale(1.03)}88%,93%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
/* the gold day gives one soft pulse per loop */
.v8 .cal .cd.sel{animation:v8hwCal 12s ease infinite}
@keyframes v8hwCal{0%,66%{box-shadow:0 0 0 0 rgba(208,165,74,0)}70%{box-shadow:0 0 0 4px rgba(208,165,74,.35)}78%,100%{box-shadow:0 0 0 10px rgba(208,165,74,0)}}

/* DAY IN THE LIFE */
.v8 .day{padding:clamp(80px,7vw,128px) 96px}
.v8 .moments{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.v8 .moment .mt{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.04em;color:var(--gold-deep);font-weight:500;display:flex;align-items:center;gap:9px;margin-bottom:11px}
.v8 .moment .mt::before{content:"";width:18px;height:1px;background:var(--gold)}
.v8 .moment .mimg{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 6px 20px rgba(0,30,18,.1);transition:.6s var(--ease)}
.v8 .moment:hover .mimg{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,30,18,.18)}
.v8 .moment .mcap{font-family:var(--font-display);font-size:var(--fs-lead);color:var(--green);margin-top:13px}
.v8 .deliver{max-width:var(--maxw);margin:60px auto 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.v8 .chip{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--green);background:rgba(255,250,241,.7);border:1px solid var(--glass-brd);backdrop-filter:blur(8px);border-radius:100px;padding:11px 20px}
.v8 .chip b{color:var(--gold-deep)}

/* REAL COUPLES — worry-to-outcome cards */
.v8 .couples{padding:clamp(32px,4.5vh,54px) 48px;min-height:100vh;display:flex;align-items:center;box-sizing:border-box}
.v8 .couples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.v8 .cpl{border-radius:20px;padding:32px 28px;background:rgba(255,255,255,.5);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);box-shadow:0 20px 50px -24px rgba(0,69,41,.3)}
.v8 .cpl .worry{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.02em;color:var(--gold-deep);margin-bottom:14px}
.v8 .cpl .q{font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.4;color:var(--green);margin-bottom:18px}
.v8 .cpl .q em{font-family:var(--font-script);font-style:normal;color:var(--gold-deep)}
.v8 .cpl .who{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--grey)}
.v8 .cpl .who b{color:var(--dark)}

/* PACKAGES: deep-green cards with gold hairlines, an inner glass bloom
   and a raised, gradient-bordered Silver. Premium, never flat. */
.v8 .pkgs{padding:70px 48px;overflow:hidden;overflow:clip}
.v8 .pkg-lead{font-family:var(--font-script);font-size:clamp(1.35rem,2.3vw,1.75rem);color:var(--gold-deep);text-align:center;margin:-14px auto 48px;line-height:1.35;max-width:34ch}
.v8 .pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.v8 .pkg{position:relative;background:linear-gradient(175deg,#004A2C,var(--green-deep) 55%);border:1px solid rgba(208,165,74,.38);border-radius:20px;padding:46px 36px 40px;color:var(--cream);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;display:flex;flex-direction:column;box-shadow:0 24px 60px -34px rgba(0,30,18,.55)}
.v8 .pkg::before{content:"";position:absolute;inset:-26% -14%;z-index:-1;border-radius:40px;background:radial-gradient(55% 55% at 50% 22%,rgba(208,165,74,.6),transparent 72%);opacity:0;filter:blur(22px);transition:opacity .5s var(--ease);pointer-events:none}
.v8 .pkg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(130% 90% at 100% 0%,rgba(208,165,74,.16),transparent 52%),radial-gradient(90% 70% at 0% 100%,rgba(233,200,126,.07),transparent 55%)}
.v8 .pkg>*{position:relative;z-index:1}
.v8 .pkg:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 30px 70px -22px rgba(208,165,74,.5),0 22px 50px -28px rgba(0,30,18,.6)}
.v8 .pkg:hover::before{opacity:1}
.v8 .pkg.feat{transform:translateY(-14px);border:1px solid transparent;
  background:linear-gradient(175deg,#004A2C,var(--green-deep) 55%) padding-box,
  linear-gradient(165deg,var(--gold-light),rgba(208,165,74,.6) 45%,var(--gold-deep)) border-box;
  box-shadow:0 36px 84px -30px rgba(208,165,74,.45),0 20px 46px -24px rgba(0,30,18,.6)}
.v8 .pkg.feat::before{opacity:.45}
.v8 .pkg.feat:hover{transform:translateY(-22px);box-shadow:0 44px 96px -30px rgba(208,165,74,.55),0 26px 54px -26px rgba(0,30,18,.65)}
.v8 .pkg-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#0F1512;font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;padding:7px 18px;border-radius:100px;box-shadow:0 8px 20px -8px rgba(208,165,74,.7);z-index:2}
.v8 .pkg .pname{font-family:var(--font-display);font-size:2rem;color:var(--gold);letter-spacing:.04em}
.v8 .pkg .pname .pscript{font-family:var(--font-script);font-size:var(--fs-lead);color:var(--gold-light);letter-spacing:0;margin-left:6px}
.v8 .pkg .pprice{margin:14px 0 2px;display:flex;align-items:baseline;gap:10px}
.v8 .pkg .pprice .plabel{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.08em;color:rgba(255,250,241,.7)}
.v8 .pkg .pprice b{font-family:var(--font-display);font-weight:400;font-size:2.2rem;line-height:1;color:var(--cream)}
.v8 .pkg .psub{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.55);letter-spacing:.02em}
.v8 .pkg .pfor{font-style:italic;color:rgba(255,250,241,.82);font-size:var(--fs-meta);margin:16px 0 4px;min-height:42px}
.v8 .pkg ul{list-style:none;margin:16px 0 26px;display:grid;gap:11px;flex:1}
.v8 .pkg li{font-size:var(--fs-meta);color:rgba(255,250,241,.9);padding-left:26px;position:relative}
.v8 .pkg li::before{content:"✓";position:absolute;left:1px;top:0;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;line-height:inherit;color:var(--gold-light)}
.v8 .pkg .btn{width:100%;justify-content:center}
.v8 .btn-pkg{background:transparent;border-color:rgba(208,165,74,.55);color:var(--gold-light)}
.v8 .btn-pkg:hover{background:linear-gradient(135deg,var(--gold-light),var(--gold));border-color:var(--gold);color:#0F1512;transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(208,165,74,.6)}
.v8 .pkg-note{text-align:center;margin-top:38px;font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold-deep)}

/* INSTAGRAM */
.v8 .insta{padding:clamp(80px,7vw,128px) 48px;text-align:center}
.v8 .insta .ig-handle{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.01em;color:var(--grey);margin-bottom:44px}
.v8 .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:var(--maxw);margin:0 auto}
.v8 .ig{overflow:hidden;border-radius:8px;background:var(--ink);aspect-ratio:1}
.v8 .ig img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:.6s var(--ease)}
.v8 .ig:hover img{transform:scale(1.08)}
.v8 .ig.tall{grid-row:span 2;aspect-ratio:1/2}

/* FINAL CTA — the close + scarcity */
.v8 .final{position:relative;overflow:hidden;padding:160px 48px;text-align:center}
.v8 .final .stage-bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;z-index:0}
.v8 .final::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,15,15,.72),rgba(0,40,24,.82))}
.v8 .final-card{position:relative;z-index:2;max-width:800px;margin:0 auto;padding:64px 48px;color:var(--cream)}
.v8 .final h2{color:var(--cream);font-size:var(--fs-h1)}
.v8 .final h2 .script{color:var(--gold);display:block;font-size:clamp(2rem,4.5vw,3.4rem)}
.v8 .final p{color:rgba(255,250,241,.88);max-width:48ch;margin:20px auto 14px;font-weight:300}
.v8 .final .scarcity{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold);margin-bottom:30px}
.v8 .final .hero-ctas{justify-content:center}

/* ============================================================
   v8 HEADER — self-contained scope (.v8-header)
   ============================================================ */
.v8-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 48px;display:flex;justify-content:space-between;align-items:center;transition:all .3s var(--ease)}
.v8-header.scrolled{background:rgba(255,250,241,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--rule);padding:12px 48px}
.v8-header .v8-logo img{height:46px;width:auto;transition:.3s var(--ease)}
.v8-header.scrolled .v8-logo img{height:38px}
.v8-header nav ul{display:flex;gap:30px;list-style:none;align-items:center;margin:0;padding:0}
.v8-header nav a{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.01em;color:var(--cream);transition:.2s}
.v8-header.scrolled nav a{color:var(--green)}
.v8-header nav a:hover{color:var(--gold)}
.v8-header .nav-login{padding:10px 22px;border:1px solid rgba(255,250,241,.5);border-radius:100px;color:var(--cream);backdrop-filter:blur(8px)}
.v8-header.scrolled .nav-login{border-color:var(--gold);color:var(--gold-deep)}
.v8-header .nav-login:hover{background:var(--gold);border-color:var(--gold);color:var(--cream)}
.v8-header .v8-burger{display:none;background:none;border:0;cursor:pointer;color:var(--cream);padding:6px}
.v8-header.scrolled .v8-burger{color:var(--green)}
.v8-header .v8-burger svg{width:26px;height:26px}

/* mobile drawer */
.v8-mobile{position:fixed;inset:0;z-index:99;background:rgba(0,61,36,.97);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:80px 24px 40px}
.v8-mobile a{font-family:var(--font-label);font-size:var(--fs-lead);color:var(--cream);padding:12px 0;letter-spacing:.02em}
.v8-mobile a:hover{color:var(--gold)}
.v8-mobile a.nav-login{margin-top:14px;border:1px solid var(--gold);color:var(--gold);border-radius:100px;padding:12px 30px}

/* ============================================================
   v8 FOOTER — self-contained scope (.v8-footer)
   ============================================================ */
.v8-footer{background:var(--green-deep);color:var(--cream);padding:76px 48px 28px;position:relative;z-index:1;font-family:var(--font-body)}
.v8-footer .foot-grid{max-width:var(--maxw);margin:0 auto 44px;display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.1fr;gap:40px}
.v8-footer .foot-brand img{height:56px;margin-bottom:16px}
.v8-footer .foot-tag{font-size:var(--fs-body);color:rgba(255,250,241,.78);max-width:32ch;font-weight:300;margin-bottom:18px;line-height:1.6}
.v8-footer .foot-cta{display:flex;gap:10px;flex-wrap:wrap}
.v8-footer .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;letter-spacing:.02em;padding:12px 20px;border-radius:100px;transition:all .25s var(--ease);cursor:pointer;border:1px solid transparent}
.v8-footer .btn-primary{background:var(--gold);color:var(--cream);box-shadow:0 8px 28px var(--gold-soft)}
.v8-footer .btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px)}
.v8-footer .btn-glass{background:transparent;border-color:var(--green);color:var(--cream)}
.v8-footer .btn-glass.on-light{border-color:rgba(255,250,241,.5);color:var(--cream)}
.v8-footer .btn-glass.on-light:hover{background:rgba(255,250,241,.12);border-color:var(--cream)}
.v8-footer .foot-col h4{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;letter-spacing:.02em;color:var(--gold);margin-bottom:18px}
.v8-footer .foot-col ul{list-style:none;margin:0;padding:0}.v8-footer .foot-col li{margin-bottom:10px}
.v8-footer .foot-col a{font-size:var(--fs-meta);color:rgba(255,250,241,.75);transition:.2s}.v8-footer .foot-col a:hover{color:var(--gold)}
.v8-footer .foot-col a.hub-link{color:var(--gold);font-weight:700}
.v8-footer .foot-bottom{max-width:var(--maxw);margin:0 auto;padding-top:26px;border-top:1px solid var(--rule-light);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.01em;color:rgba(255,250,241,.6)}
.v8-footer .foot-bottom a{color:rgba(255,250,241,.6);transition:.2s}
.v8-footer .foot-bottom a:hover{color:var(--gold)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .v8-header,.v8-header.scrolled{padding:14px 20px}
  .v8-header nav ul{display:none}
  .v8-header .v8-burger{display:inline-flex}
  .v8 .hero-inner{grid-template-columns:1fr;padding:120px 20px 56px;gap:30px}
  .v8 .section,.v8 .film,.v8 .team,.v8 .hub,.v8 .day,.v8 .pkgs,.v8 .couples,.v8 .insta{padding:64px 20px}
  .v8 .final{padding:96px 20px}
  .v8 .pkg{padding:38px 26px 34px}
  .v8 .pkg.feat{transform:none}
  .v8 .pkg.feat:hover{transform:translateY(-8px)}
  .v8 .pkg-lead{margin:-6px auto 36px}
  .v8 .sec-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  .v8 .film{min-height:auto}.v8 .film-bubble{padding:34px 26px;max-width:100%}
  .v8 .team-inner,.v8 .hub-grid{grid-template-columns:1fr;padding:30px;gap:30px}
  .v8 .svc-grid{grid-template-columns:1fr}.v8 .svc-a,.v8 .svc-b,.v8 .svc-c,.v8 .svc-d{grid-column:1;min-height:300px}
  .v8 .moments{grid-template-columns:1fr 1fr;gap:20px}
  .v8 .couples-grid,.v8 .pkg-grid{grid-template-columns:1fr;gap:24px}
  .v8 .ig-grid{grid-template-columns:repeat(3,1fr)}
  .v8-footer .foot-grid{grid-template-columns:1fr 1fr}
  .v8-footer{padding:52px 20px 26px}
}
@media(prefers-reduced-motion:reduce){
  .v8 .reveal{opacity:1;transform:none}
  .v8 *,.v8 *::before,.v8 *::after{animation:none!important}
  /* hub window: show the finished day, statically */
  .v8 .wnum .n1,.v8 .wnum .n2{opacity:0}
  .v8 .wnum .n3{opacity:1}
  .v8 .wbar::after{transform:scaleX(.96)}
  .v8 .tl{background:rgba(208,165,74,.16);color:var(--gold-deep)}
  .v8 .mv-swap .s1{opacity:0}
  .v8 .mv-swap .s2{opacity:1}
  .v8 .mv-msg .m1{opacity:0}
  .v8 .mv-msg .m2{opacity:1;transform:none}
}

/* ============================================================
   HOMEPAGE REFINEMENT (v8.1) — calmer hero, editorial intro,
   two-dominant services with two supporting minis, signature
   Wedding Hub band. Additive only; scoped under .v8.
   ============================================================ */

/* Hero: more breathing room between nav, headline, sub and CTAs */
.v8 .hero-calm .hero-inner{padding-bottom:112px;gap:88px;align-items:end}
.v8 .hero-calm h1{max-width:14ch}
.v8 .hero-calm .hero-sub{margin:40px 0 48px;max-width:44ch}
.v8 .hero-calm .hero-ctas{gap:18px}
.v8 .hero-calm .hero-aside{padding:34px;max-width:380px;margin-left:auto}
@media(max-width:980px){
  .v8 .hero-calm .hero-inner{padding:128px 20px 72px;gap:44px}
  .v8 .hero-calm .hero-sub{margin:28px 0 34px}
  .v8 .hero-calm .hero-aside{max-width:100%;margin-left:0}
}

/* EDITORIAL INTRO — spacious single-statement transition */
.v8 .intro{padding:140px 48px 120px;text-align:center;position:relative}
.v8 .intro .container{max-width:820px}
.v8 .intro .eyebrow{margin-bottom:32px}
.v8 .intro-lead{font-family:var(--font-display);font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.15;color:var(--green);letter-spacing:.005em}
.v8 .intro-lead em{font-style:italic;color:var(--green-deep)}
.v8 .intro-lead .script{color:var(--gold-deep);display:block;margin-top:12px;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1}
.v8 .intro-sub{margin:40px auto 0;max-width:56ch;color:var(--grey);font-size:var(--fs-body);line-height:1.8;font-weight:300}
@media(max-width:980px){.v8 .intro{padding:88px 20px 72px}.v8 .intro-sub{margin-top:28px}}

/* SERVICES v2: two dominant cards, then a quieter supporting row */
.v8 .services{padding:120px 48px}
.v8 .svc-grid-lead{grid-template-columns:1fr 1fr;gap:22px}
.v8 .svc-grid-lead .svc-lead{min-height:520px;padding:40px;grid-column:auto}
.v8 .svc-sub{margin-top:56px;padding-top:44px;border-top:1px solid var(--rule)}
.v8 .svc-sub-label{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.1em;color:var(--gold-deep);text-transform:none;display:block;margin-bottom:22px}
.v8 .svc-sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.v8 .svc-mini{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;padding:20px;background:rgba(255,255,255,.4);border:1px solid var(--rule);border-radius:16px}
.v8 .svc-mini-img{width:120px;height:120px;border-radius:12px;background-size:cover;background-position:center;flex-shrink:0}
.v8 .svc-mini h4{font-family:var(--font-display);font-size:1.35rem;color:var(--green);margin-bottom:6px;font-weight:400}
.v8 .svc-mini p{font-size:var(--fs-meta);color:var(--grey);line-height:1.55;font-weight:300}
.v8 .services .lead strong{color:var(--green);font-weight:600}
@media(max-width:980px){
  .v8 .services{padding:80px 20px}
  .v8 .svc-grid-lead{grid-template-columns:1fr}
  .v8 .svc-grid-lead .svc-lead{min-height:360px}
  .v8 .svc-sub-grid{grid-template-columns:1fr}
  .v8 .svc-mini{grid-template-columns:88px 1fr;gap:16px;padding:16px}
  .v8 .svc-mini-img{width:88px;height:88px}
}

/* WEDDING HUB — signature spacing, centred intro band */
.v8 .hub-signature{padding:130px 48px}
.v8 .hub-intro{text-align:center;max-width:760px;margin:0 auto 72px}
.v8 .hub-intro .eyebrow{margin-bottom:20px}
.v8 .hub-intro h2{margin-bottom:20px}
.v8 .hub-included{font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.06em;color:var(--gold-deep);margin-top:8px}
@media(max-width:980px){.v8 .hub-signature{padding:80px 20px}.v8 .hub-intro{margin-bottom:44px}}

/* ─────────────────────────────────────────────────────────────
   HERO — CINEMA (v8.2)
   Full-viewport title card. Video dominates, typography recedes,
   availability information sits as a quiet bottom rail rather
   than a floating glass panel.
   ───────────────────────────────────────────────────────────── */
.v8 .hero-cinema{min-height:100vh;display:block;align-items:unset}
.v8 .hero-cinema::after{
  background:
    linear-gradient(180deg,rgba(10,16,12,.55)0%,rgba(10,16,12,.05)18%,rgba(10,16,12,0)45%,rgba(10,16,12,.35)78%,rgba(10,16,12,.92)100%),
    radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 100%);
}
.v8 .hero-cinema .hero-frame{
  position:absolute;inset:28px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,250,241,.06);
}
.v8 .hero-cinema-inner{
  position:relative;z-index:3;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:140px 32px 200px;
}
.v8 .hero-cinema-content{
  max-width:960px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.v8 .hero-cinema .eyebrow{
  color:rgba(255,250,241,.55);letter-spacing:.5em;font-size:var(--fs-label);
  margin-bottom:56px;text-transform:uppercase;
}
.v8 .hero-cinema h1{
  font-size:clamp(2.4rem,5.4vw,5.2rem);
  line-height:1.08;letter-spacing:.005em;
  color:var(--cream);font-weight:300;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
  max-width:22ch;margin:0 auto;
}
.v8 .hero-cinema h1 .script{
  display:block;font-size:clamp(2.2rem,4.6vw,4.4rem);
  color:var(--gold);margin-top:.25em;line-height:1;font-weight:400;
}
.v8 .hero-cinema .hero-sub{
  font-size:var(--fs-body);line-height:1.8;color:rgba(255,250,241,.6);
  max-width:52ch;margin:44px auto 56px;font-weight:300;
  text-shadow:0 1px 20px rgba(0,0,0,.5);
}
.v8 .hero-cinema .hero-sub em{font-style:italic;color:rgba(212,175,55,.85);font-weight:300}
.v8 .hero-cinema .hero-ctas{
  display:flex;gap:40px;flex-wrap:wrap;justify-content:center;align-items:center;
}
.v8 .btn-cinema{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:20px 44px;border:1px solid rgba(255,250,241,.25);
  color:var(--cream);text-decoration:none;overflow:hidden;
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.3em;
  text-transform:uppercase;font-weight:400;
  transition:border-color .5s ease, color .5s ease, background .5s ease;
  background:transparent;cursor:pointer;
}
.v8 .btn-cinema:hover{border-color:rgba(212,175,55,.6);color:var(--gold-light)}
.v8 .btn-cinema-primary{border-color:rgba(212,175,55,.45)}
.v8 .btn-cinema-ghost{
  display:inline-flex;align-items:center;gap:18px;
  color:rgba(255,250,241,.65);text-decoration:none;
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.3em;
  text-transform:uppercase;font-weight:400;
  transition:color .4s ease;
}
.v8 .btn-cinema-ghost:hover{color:var(--gold-light)}
.v8 .btn-cinema-ghost .btn-line{
  width:36px;height:1px;background:rgba(255,250,241,.3);
  transition:width .5s var(--ease-expo), background .5s ease;
}
.v8 .btn-cinema-ghost:hover .btn-line{width:56px;background:var(--gold)}

/* Bottom availability rail */
.v8 .hero-rail{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:0 48px 40px;
}
.v8 .hero-rail-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:32px;
  padding-top:28px;border-top:1px solid rgba(255,250,241,.08);
}
.v8 .hero-rail-block{display:flex;flex-direction:column;gap:8px}
.v8 .hero-rail-right{align-items:flex-end;text-align:right}
.v8 .hero-rail-label{
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.4em;
  text-transform:uppercase;color:rgba(255,250,241,.35);
}
.v8 .hero-rail-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-style:italic;color:rgba(255,250,241,.65);font-size:var(--fs-body);
}
.v8 .hero-rail-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,250,241,.2)}
.v8 .hero-rail-italic{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-style:italic;color:rgba(255,250,241,.65);font-size:var(--fs-body);
}

/* Slow fade-in choreography */
.v8 .hero-cinema .eyebrow{animation:v8-fadeUp 1.4s var(--ease-expo) .3s both}
.v8 .hero-cinema h1{animation:v8-fadeUp 1.6s var(--ease-expo) .6s both}
.v8 .hero-cinema .hero-sub{animation:v8-fadeUp 1.4s var(--ease-expo) 1.1s both}
.v8 .hero-cinema .hero-ctas{animation:v8-fadeUp 1.4s var(--ease-expo) 1.4s both}
.v8 .hero-cinema .hero-rail{animation:v8-fadeUp 1.6s var(--ease-expo) 1.7s both}
.v8 .hero-cinema .hero-frame{animation:v8-fadeUp 2s var(--ease-expo) 2s both}

@media(max-width:900px){
  .v8 .hero-cinema-inner{padding:120px 20px 220px}
  .v8 .hero-cinema .eyebrow{margin-bottom:32px;letter-spacing:.35em}
  .v8 .hero-cinema .hero-sub{margin:28px auto 40px}
  .v8 .hero-cinema .hero-ctas{gap:20px}
  .v8 .hero-cinema .hero-frame{inset:14px}
  .v8 .hero-rail{padding:0 20px 24px}
  .v8 .hero-rail-inner{flex-direction:column;align-items:flex-start;gap:16px;text-align:left}
  .v8 .hero-rail-right{align-items:flex-start;text-align:left}
  .v8 .btn-cinema{padding:16px 32px}
}

/* ─────────────────────────────────────────────────────────────
   HERO — TITLE CARD (v8.3)
   Refined cinematic hero: video dominates, typography recedes
   by ~20%, availability rail removed (now a section of its own).
   Sequenced title-sequence fade-in on load.
   ───────────────────────────────────────────────────────────── */
.v8 .hero-title-card{min-height:100vh}
.v8 .hero-title-card .hero-cinema-inner{padding:180px 32px 28px}
.v8 .hero-title-card .ttl-eyebrow{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-meta);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,250,241,.82);
  margin-bottom:56px;
  opacity:0;animation:v8-titleUp 1.4s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.v8 .hero-title-card .ttl-h1{
  font-size:var(--fs-h1);
  line-height:1.1;letter-spacing:.005em;
  color:var(--cream);font-weight:300;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
  max-width:22ch;margin:0 auto;
  opacity:0;animation:v8-titleUp 1.8s cubic-bezier(.22,1,.36,1) .6s forwards;
}
.v8 .hero-title-card .ttl-h1 em{font-style:italic}
.v8 .hero-title-card .ttl-script{
  display:block;font-size:clamp(1.7rem,3.6vw,3.5rem);
  font-family:var(--font-script);font-style:normal;
  color:var(--gold);margin:.15em 0 0;line-height:1;font-weight:400;
  opacity:0;animation:v8-titleUp 1.6s cubic-bezier(.22,1,.36,1) .9s forwards;
}
.v8 .hero-title-card .ttl-script em{font-style:normal}
.v8 .hero-title-card .ttl-sub{
  font-size:var(--fs-body);line-height:1.85;color:rgba(255,250,241,.62);
  max-width:48ch;margin:56px auto 64px;font-weight:300;letter-spacing:.01em;
  text-shadow:0 1px 20px rgba(0,0,0,.5);
  opacity:0;animation:v8-titleUp 1.4s cubic-bezier(.22,1,.36,1) 1.2s forwards;
}
.v8 .hero-title-card .ttl-ctas{display:flex;gap:44px;flex-wrap:wrap;justify-content:center;align-items:center}
.v8 .hero-title-card .ttl-cta-primary{
  opacity:0;animation:v8-titleUp 1.2s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
.v8 .hero-title-card .ttl-cta-secondary{
  opacity:0;animation:v8-titleUp 1.2s cubic-bezier(.22,1,.36,1) 1.7s forwards;
}
/* Readable centre vignette + bottom bleed into the next section */
.v8 .hero-title-card::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(10,16,12,.62)0%,rgba(10,16,12,.32)45%,rgba(10,16,12,0)72%),
    linear-gradient(180deg,rgba(10,16,12,.78)0%,rgba(10,16,12,.12)28%,rgba(10,16,12,.12)68%,rgba(10,16,12,.9)100%);
}
.v8 .hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Stable compositing promotion so the scrim always has its own layer above
     the (now contained) media. translateZ(0) only — no will-change, which
     Chrome can silently drop under memory pressure and un-composite. */
  transform:translateZ(0);
  background:
    radial-gradient(ellipse at 50% 42%,rgba(10,16,12,.62)0%,rgba(10,16,12,.32)45%,rgba(10,16,12,0)72%),
    linear-gradient(180deg,rgba(10,16,12,.78)0%,rgba(10,16,12,.12)28%,rgba(10,16,12,.12)68%,rgba(10,16,12,.9)100%),
    linear-gradient(180deg,rgba(10,16,12,.5)0%,rgba(10,16,12,.05)15%,rgba(10,16,12,0)45%,rgba(10,16,12,.55)82%,rgba(10,16,12,1)100%);
}
.v8 .hero-title-card::after{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(10,16,12,.5)0%,rgba(10,16,12,.05)15%,rgba(10,16,12,0)45%,rgba(10,16,12,.55)82%,rgba(10,16,12,1)100%);
}

@keyframes v8-titleUp{
  0%{opacity:0;transform:translate3d(0,14px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

@media(max-width:900px){
  .v8 .hero-title-card .hero-cinema-inner{padding:140px 20px 24px}
  .v8 .hero-title-card .ttl-eyebrow{margin-bottom:44px;letter-spacing:.4em}
  .v8 .hero-title-card .ttl-sub{margin:36px auto 44px}
  .v8 .hero-title-card .ttl-ctas{gap:22px}
}

/* ─────────────────────────────────────────────────────────────
   AVAILABILITY — Liquid glass reveal (v8.3)
   Introduced immediately after the hero as its own premium moment.
   ───────────────────────────────────────────────────────────── */
.v8 .availability{
  position:relative;
  padding:160px 32px 180px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.05),transparent 55%),
    linear-gradient(180deg,#0a100c 0%,#0c1410 60%,#0f1815 100%);
  overflow:hidden;
}
.v8 .availability::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.02),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(212,175,55,.04),transparent 45%);
  pointer-events:none;
}
.v8 .availability-inner{
  position:relative;max-width:900px;margin:0 auto;text-align:center;
}
.v8 .availability-head{margin-bottom:72px}
.v8 .availability-head .eyebrow{
  color:rgba(255,250,241,.5);letter-spacing:.45em;font-size:var(--fs-label);
  text-transform:uppercase;display:block;margin-bottom:28px;
}
.v8 .availability-head h2{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:var(--fs-h2);line-height:1.08;
  color:var(--cream);font-weight:300;letter-spacing:.005em;
  margin:0 auto;max-width:18ch;
}
.v8 .availability-head h2 .script{
  color:var(--gold);font-style:italic;font-weight:400;
}
.v8 .availability-lead{
  margin:28px auto 0;max-width:52ch;
  color:rgba(255,250,241,.6);font-size:var(--fs-body);line-height:1.85;font-weight:300;
}

/* Liquid glass card — floats above the page, minimal borders, layered highlights */
.v8 .availability-card.glass-liquid{
  position:relative;
  max-width:720px;margin:0 auto;
  padding:56px 56px 44px;
  border-radius:32px;
  background:
    linear-gradient(180deg,rgba(255,250,241,.09),rgba(255,250,241,.04));
  border:1px solid rgba(255,250,241,.1);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 60px rgba(212,175,55,.04) inset,
    0 40px 80px -30px rgba(0,0,0,.55),
    0 20px 40px -20px rgba(0,0,0,.4);
  overflow:hidden;
  transform:scale(.98);opacity:0;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1.1s ease;
}
.v8 .availability-card.glass-liquid.in,
.v8 .availability-card.glass-liquid{transform:scale(1);opacity:1}
.v8 .reveal.availability-card.glass-liquid:not(.in){transform:scale(.98);opacity:0}

.v8 .glass-shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(212,175,55,.06) 100%);
}

.v8 .ac-status{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,250,241,.72);
  margin-bottom:36px;
}

.v8 .ac-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;
  margin:0 auto 40px;text-align:left;max-width:520px;
  padding:32px 0;
  border-top:1px solid rgba(255,250,241,.08);
  border-bottom:1px solid rgba(255,250,241,.08);
}
.v8 .ac-cell{display:flex;flex-direction:column;gap:8px}
.v8 .ac-label{
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-label);letter-spacing:.38em;text-transform:uppercase;
  color:rgba(255,250,241,.42);
}
.v8 .ac-value{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:var(--fs-lead);color:rgba(255,250,241,.92);line-height:1.35;
  font-weight:400;
}

.v8 .ac-included{
  margin:0 auto 32px;color:rgba(255,250,241,.6);font-size:var(--fs-body);
  font-weight:300;
}
.v8 .ac-included em{
  font-style:italic;color:var(--gold-light,#E9C87E);font-weight:400;
}

.v8 .ac-cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 34px;border-radius:100px;
  background:linear-gradient(180deg,rgba(233,200,126,.25),rgba(208,165,74,.14));
  border:1px solid rgba(233,200,126,.5);
  color:#FBE9BE;text-decoration:none;
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-meta);letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 14px 30px -14px rgba(212,175,55,.35);
  transition:transform .35s ease,background .35s ease,border-color .35s ease,color .35s ease;
}
.v8 .ac-cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(233,200,126,.35),rgba(208,165,74,.22));
  border-color:rgba(233,200,126,.75);
  color:#FFF5D6;
}
.v8 .ac-arrow{transition:transform .35s ease}
.v8 .ac-cta:hover .ac-arrow{transform:translateX(4px)}

@media(max-width:720px){
  .v8 .availability{padding:100px 20px 120px}
  .v8 .availability-head{margin-bottom:52px}
  .v8 .availability-card.glass-liquid{padding:40px 26px 32px;border-radius:24px}
  .v8 .ac-grid{grid-template-columns:1fr;gap:20px;padding:24px 0;margin-bottom:28px}
  .v8 .ac-cta{padding:14px 26px;font-size:var(--fs-label);letter-spacing:.22em}
}

/* ─────────────────────────────────────────────────────────────
   HERO REFINEMENT (v8.4)
   Brand name reads first, single supporting statement, outlined
   CTAs that morph into liquid glass only on hover.
   ───────────────────────────────────────────────────────────── */
.v8 .hero-title-card .ttl-brand{
  display:block;
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.62em;text-transform:uppercase;font-weight:400;
  color:rgba(255,250,241,.72);
  margin-bottom:56px;padding-left:.62em;
  opacity:0;animation:v8-titleUp 1.4s cubic-bezier(.22,1,.36,1) .3s forwards;
  text-shadow:0 1px 20px rgba(0,0,0,.55);
}
.v8 .hero-title-card .ttl-support{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-style:italic;font-weight:300;line-height:1.6;
  color:rgba(255,250,241,.7);letter-spacing:.01em;
  max-width:44ch;margin:44px auto 56px;
  text-shadow:0 1px 20px rgba(0,0,0,.5);
  opacity:0;animation:v8-titleUp 1.4s cubic-bezier(.22,1,.36,1) 1.2s forwards;
}

/* ─────────────────────────────────────────────────────────────
   Hero CTAs (v8.6) — pill shape matching header CTAs. Default:
   clean centered underline only. Hover: underline expands to the
   full pill width, then a full pill border + liquid glass reveal.
   ───────────────────────────────────────────────────────────── */
.v8 .btn-outline{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;gap:10px;
  padding:14px 30px;border-radius:100px;
  font-family:var(--font-label,Roboto,sans-serif);
  font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:rgba(255,250,241,.85);text-decoration:none;
  background:transparent;
  border:1px solid transparent;   /* reserves layout, invisible */
  box-sizing:border-box;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
  isolation:isolate;
  transition:
    color .35s ease,
    transform .4s cubic-bezier(.22,.61,.36,1);
}

/* ::before = the BORDER STROKE only. Transparent fill, no blur.
   Clipped to the underline strip by default, expands to full pill
   on hover so the border draws outward from the underline. */
.v8 .btn-outline::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(255,250,241,.55);
  background:transparent;
  clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  -webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);
  transition:
    clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;
  z-index:0;
}

/* ::after = the single bottom underline. Static at rest; fades out
   as the drawn border completes so the bottom edge stays 1px. */
.v8 .btn-outline::after{
  content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:calc(100% - 44px);height:1px;
  background:rgba(255,250,241,.55);
  pointer-events:none;
  z-index:1;
  opacity:1;
  transition:opacity .12s linear 0s;
}

/* .btn-glass = the liquid-glass fill. Fades in AFTER the border
   has finished drawing, fades out FIRST on mouse-out.
   `visibility:hidden` at rest ensures backdrop-filter never paints
   before hover (fixes a Chromium quirk where blur renders through
   an opacity:0 layer). */
.v8 .btn-outline .btn-glass{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,241,.14),rgba(255,250,241,.06));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 40px -18px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1) 0s, visibility 0s linear .18s;
  z-index:0;
}
.v8 .btn-outline .btn-label{position:relative;z-index:2}

/* Hover / focus-visible — border draws first, glass fills second. */
.v8 .btn-outline:hover,
.v8 .btn-outline:focus-visible{
  color:#FFFAF1;
  transform:scale(1.015);
  outline:none;
}
.v8 .btn-outline:hover::before,
.v8 .btn-outline:focus-visible::before{
  clip-path:inset(0 0 0 0 round 100px);
  -webkit-clip-path:inset(0 0 0 0 round 100px);
  transition-delay:0s;                 /* draw immediately on hover-in */
}
.v8 .btn-outline:hover::after,
.v8 .btn-outline:focus-visible::after{
  opacity:0;
  transition-delay:.26s;               /* fade out as border finishes drawing */
}
.v8 .btn-outline:hover .btn-glass,
.v8 .btn-outline:focus-visible .btn-glass{
  opacity:1;
  visibility:visible;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1) .32s, visibility 0s linear .32s;
}

/* Primary — gold accent */
.v8 .btn-outline-primary{color:#F0D9A0}
.v8 .btn-outline-primary::after{background:rgba(233,200,126,.85)}
.v8 .btn-outline-primary::before{border-color:rgba(233,200,126,.6)}
.v8 .btn-outline-primary .btn-glass{
  background:linear-gradient(180deg,rgba(233,200,126,.24),rgba(208,165,74,.12));
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(233,200,126,.18) inset,
    0 18px 40px -18px rgba(0,0,0,.55);
}
.v8 .btn-outline-primary:hover,
.v8 .btn-outline-primary:focus-visible{color:#FFF5D6}

/* Ghost — pale neutral */
.v8 .btn-outline-ghost{color:rgba(255,250,241,.82)}
.v8 .btn-outline-ghost::after{background:rgba(255,250,241,.55)}
.v8 .btn-outline-ghost::before{border-color:rgba(255,250,241,.4)}

/* Reduced motion — skip draw + scale, cross-fade underline → glass. */
@media (prefers-reduced-motion: reduce){
  .v8 .btn-outline::before{
    clip-path:inset(0 0 0 0 round 100px);
    -webkit-clip-path:inset(0 0 0 0 round 100px);
    opacity:0;
    transition:opacity .18s ease;
  }
  .v8 .btn-outline .btn-glass{transition:opacity .18s ease}
  .v8 .btn-outline:hover::before,
  .v8 .btn-outline:focus-visible::before{opacity:1;transition-delay:0s}
  .v8 .btn-outline:hover .btn-glass,
  .v8 .btn-outline:focus-visible .btn-glass{transition-delay:0s}
  .v8 .btn-outline:hover,
  .v8 .btn-outline:focus-visible{transform:none}
}

@media(max-width:900px){
  .v8 .hero-title-card .ttl-brand{margin-bottom:36px;letter-spacing:.44em}
  .v8 .hero-title-card .ttl-support{margin:30px auto 40px}
  .v8 .btn-outline{padding:12px 22px;font-size:var(--fs-label);letter-spacing:.22em}
  .v8 .btn-outline::after{width:calc(100% - 32px)}
  .v8 .btn-outline::before{clip-path:inset(calc(100% - 1px) 16px 0 16px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 16px 0 16px round 100px)}
  .v8 .btn-outline:hover::before,
  .v8 .btn-outline:focus-visible::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px)}
}



/* ─────────────────────────────────────────────────────────────
   INTRO ↦ AVAILABILITY (v8.4) — one continuous chapter.
   Editorial typography flows straight into the glass card so
   the visitor never perceives a section break.
   ───────────────────────────────────────────────────────────── */
.v8 .intro-availability{
  position:relative;
  padding:120px 32px 180px;
  margin-top:0;
  z-index:2;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.05),transparent 55%),
    linear-gradient(180deg,#0a100c 0%,#0c1410 55%,#0f1815 100%);
  overflow:hidden;
}
.v8 .intro-availability::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%,rgba(255,255,255,.02),transparent 40%),
    radial-gradient(circle at 80% 75%,rgba(212,175,55,.04),transparent 45%);
}
.v8 .ia-inner{position:relative;max-width:900px;margin:0 auto;text-align:center}

.v8 .ia-editorial{max-width:760px;margin:0 auto}
.v8 .ia-editorial .eyebrow{
  color:rgba(255,250,241,.5);letter-spacing:.45em;font-size:var(--fs-label);
  text-transform:uppercase;display:block;margin-bottom:32px;
}
.v8 .ia-editorial .intro-lead{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:clamp(1.9rem,3.8vw,3.1rem);line-height:1.15;
  color:var(--cream);font-weight:300;letter-spacing:.005em;
}
.v8 .ia-editorial .intro-lead em{font-style:italic;color:rgba(255,250,241,.86)}
.v8 .ia-editorial .intro-lead .script{
  color:var(--gold);display:block;margin-top:14px;font-style:italic;
  font-size:clamp(1.75rem,3.6vw,2.8rem);line-height:1;font-weight:400;
}
.v8 .ia-editorial .intro-sub{
  margin:36px auto 0;max-width:52ch;
  color:rgba(255,250,241,.6);font-size:var(--fs-body);line-height:1.85;font-weight:300;
}

/* Bridge line — a hairline of typography that dissolves the section
   break and cues the card immediately beneath. */
.v8 .ia-bridge{
  margin:72px auto 40px;max-width:44ch;
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:rgba(255,250,241,.62);font-weight:300;letter-spacing:.005em;
}
.v8 .ia-bridge em{font-style:italic;color:var(--gold);font-weight:400}

/* Card sits directly under the bridge — no chapter gap. */
.v8 .intro-availability .availability-card.glass-liquid{margin-top:0}

@media(max-width:720px){
  .v8 .intro-availability{padding:80px 20px 120px}
  .v8 .ia-bridge{margin:52px auto 28px}
}

/* Retire the old standalone availability section spacing so any
   stale references don't reintroduce a double chapter break. */
.v8 .availability{padding-top:0;padding-bottom:0}

/* ─────────────────────────────────────────────────────────────
   LIQUID GLASS v8.5 — shared "smoked glass panel" finish for
   every v8 glass card. Stacked layers, pointer-reactive bloom,
   dimensional edge, environmental floating shadow.
   Layout / padding / radius / typography untouched.
   ───────────────────────────────────────────────────────────── */
.v8 .glass,
.v8 .glass-card,
.v8 .availability-card.glass-liquid{
  --mx:50%;
  --my:50%;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(120% 100% at 50% 40%,
      rgba(255,250,241,.02) 0%,
      rgba(255,250,241,.055) 60%,
      rgba(255,250,241,.09) 100%);
  border:1px solid rgba(255,250,241,.08);
  backdrop-filter:blur(36px) saturate(180%) contrast(105%) brightness(102%);
  -webkit-backdrop-filter:blur(36px) saturate(180%) contrast(105%) brightness(102%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset -1px -1px 0 rgba(0,0,0,.28),
    inset 0 -30px 60px -30px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.06),
    0 20px 40px -10px rgba(0,120,80,.10),
    0 30px 60px -25px rgba(0,0,0,.45),
    0 60px 120px -40px rgba(0,0,0,.60);
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1),
    background .4s cubic-bezier(.22,1,.36,1),
    border-color .4s cubic-bezier(.22,1,.36,1);
}

/* Frosted edge ring + specular upper arc + fine grain.
   All decorative — pointer-events:none so text stays selectable. */
.v8 .glass::after,
.v8 .glass-card::after,
.v8 .availability-card.glass-liquid::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    /* specular arc across upper corners */
    radial-gradient(80% 40% at 50% -8%,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 40%,
      transparent 70%),
    /* frosted edge ring — clear centre */
    radial-gradient(120% 100% at 50% 50%,
      transparent 55%,
      rgba(255,250,241,.045) 85%,
      rgba(255,250,241,.08) 100%),
    /* fine grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  background-size:auto, auto, 160px 160px;
  mix-blend-mode:screen;
  opacity:.9;
}

/* Refracted colour bloom — pointer-reactive, capped ~2–3px translate. */
.v8 .glass::before,
.v8 .glass-card::before,
.v8 .availability-card.glass-liquid::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(38% 34% at calc(22% + (var(--mx) - 50%) * 0.06%) calc(18% + (var(--my) - 50%) * 0.06%),
      rgba(255,250,241,.20) 0%,
      rgba(255,250,241,.06) 45%,
      transparent 70%),
    radial-gradient(46% 40% at calc(78% + (var(--mx) - 50%) * 0.08%) calc(82% + (var(--my) - 50%) * 0.08%),
      hsla(42,60%,62%,.14) 0%,
      hsla(96,30%,40%,.08) 45%,
      transparent 72%);
  filter:blur(14px);
  mix-blend-mode:screen;
  transform:translate3d(
    calc((var(--mx) - 50%) * 0.06),
    calc((var(--my) - 50%) * 0.06),
    0);
  transition:opacity .4s cubic-bezier(.22,1,.36,1);
  opacity:.85;
}

/* Keep real content above decorative layers */
.v8 .glass > *,
.v8 .glass-card > *,
.v8 .availability-card.glass-liquid > *{position:relative;z-index:1}

/* Hover — restrained lift & brightening */
@media (hover:hover){
  .v8 .glass:hover,
  .v8 .glass-card:hover,
  .v8 .availability-card.glass-liquid:hover{
    transform:scale(1.01);
    background:
      radial-gradient(120% 100% at 50% 40%,
        rgba(255,250,241,.015) 0%,
        rgba(255,250,241,.06) 60%,
        rgba(255,250,241,.10) 100%);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.20),
      inset 0 1px 0 rgba(255,255,255,.14),
      inset -1px -1px 0 rgba(0,0,0,.30),
      inset 0 -30px 60px -30px rgba(0,0,0,.32),
      0 1px 0 rgba(255,255,255,.08),
      0 24px 48px -12px rgba(0,140,90,.14),
      0 34px 70px -28px rgba(0,0,0,.48),
      0 70px 140px -44px rgba(0,0,0,.62);
  }
  .v8 .glass:hover::before,
  .v8 .glass-card:hover::before,
  .v8 .availability-card.glass-liquid:hover::before{opacity:1}
}

/* Reduced motion — no lift, no reactive drift */
@media (prefers-reduced-motion:reduce){
  .v8 .glass,
  .v8 .glass-card,
  .v8 .availability-card.glass-liquid{transition:none}
  .v8 .glass:hover,
  .v8 .glass-card:hover,
  .v8 .availability-card.glass-liquid:hover{transform:none}
  .v8 .glass::before,
  .v8 .glass-card::before,
  .v8 .availability-card.glass-liquid::before{transform:none}
}


/* ─────────────────────────────────────────────────────────────
   GLASS SYSTEM — SELECTIVE EXTENSION
   Applies the same smoked-glass material used on .glass /
   .glass-card / .glass-liquid to three additional surfaces
   that meet the "interactive · layered · elevated · Wedding
   Hub" criteria:
     · .pkg    — package tier cards  (DARK tinted, interactive)
     · .cpl    — real-couples cards  (LIGHT tinted, interactive)
     · .window — Hub preview panel   (LIGHT tinted, static)
   Layout, padding, radius, imagery and copy are untouched —
   only the base surface (background / border / shadow) and
   decorative ::before / ::after layers are replaced so every
   glass surface shares one material.
   ───────────────────────────────────────────────────────────── */

/* Shared base — dark-tinted variant (deep green smoked glass) */
.v8 .pkg{
  --mx:50%; --my:50%;
  isolation:isolate;
  background:
    linear-gradient(175deg, rgba(0,74,44,.55), rgba(0,50,30,.72) 60%, rgba(0,40,24,.78)),
    radial-gradient(120% 100% at 50% 40%,
      rgba(255,250,241,.02) 0%,
      rgba(255,250,241,.045) 60%,
      rgba(255,250,241,.08) 100%);
  border:1px solid rgba(208,165,74,.28);
  backdrop-filter:blur(30px) saturate(170%) contrast(104%);
  -webkit-backdrop-filter:blur(30px) saturate(170%) contrast(104%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset -1px -1px 0 rgba(0,0,0,.30),
    inset 0 -30px 60px -30px rgba(0,0,0,.35),
    0 20px 40px -12px rgba(0,120,80,.10),
    0 30px 60px -25px rgba(0,0,0,.40),
    0 60px 120px -40px rgba(0,0,0,.55);
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1),
    border-color .4s cubic-bezier(.22,1,.36,1);
}
/* Replace the existing ::after (radial gold wash) with the shared
   frosted edge ring + specular arc + fine grain. */
.v8 .pkg::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(80% 40% at 50% -8%,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.04) 40%,
      transparent 70%),
    radial-gradient(120% 100% at 50% 50%,
      transparent 55%,
      rgba(255,250,241,.04) 85%,
      rgba(255,250,241,.075) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.30'/></svg>");
  background-size:auto, auto, 160px 160px;
  mix-blend-mode:screen;
  opacity:.85;
}
/* Override the existing gold bloom ::before to be pointer-reactive */
.v8 .pkg::before{
  content:"";
  position:absolute;inset:0;               /* was inset:-26% -14% — bring inside for glass */
  z-index:0;
  border-radius:inherit;
  filter:blur(14px);
  background:
    radial-gradient(38% 34% at calc(22% + (var(--mx) - 50%) * 0.06%) calc(18% + (var(--my) - 50%) * 0.06%),
      rgba(255,250,241,.16) 0%,
      rgba(255,250,241,.05) 45%,
      transparent 70%),
    radial-gradient(46% 40% at calc(78% + (var(--mx) - 50%) * 0.08%) calc(82% + (var(--my) - 50%) * 0.08%),
      hsla(42,60%,58%,.16) 0%,
      hsla(96,30%,38%,.08) 45%,
      transparent 72%);
  opacity:.75;
  mix-blend-mode:screen;
  transform:translate3d(
    calc((var(--mx) - 50%) * 0.06),
    calc((var(--my) - 50%) * 0.06),
    0);
  transition:opacity .4s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .v8 .pkg:hover{
    transform:scale(1.01);
    border-color:rgba(208,165,74,.45);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.16),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset -1px -1px 0 rgba(0,0,0,.32),
      inset 0 -30px 60px -30px rgba(0,0,0,.36),
      0 24px 48px -12px rgba(0,140,90,.14),
      0 34px 70px -28px rgba(0,0,0,.45),
      0 70px 140px -44px rgba(0,0,0,.58);
  }
  .v8 .pkg:hover::before{opacity:.95}
  /* Silver "feat" tier keeps its raised offset but drops the translateY jump */
  .v8 .pkg.feat:hover{transform:translateY(-14px) scale(1.01)}
}

/* Light-tinted variant — cream smoked glass on light backgrounds.
   Shared by real-couples cards (interactive) and Hub window (static). */
.v8 .cpl,
.v8 .window{
  --mx:50%; --my:50%;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(120% 100% at 50% 40%,
      rgba(255,250,241,.55) 0%,
      rgba(255,250,241,.42) 60%,
      rgba(255,250,241,.35) 100%);
  border:1px solid rgba(0,74,44,.10);
  backdrop-filter:blur(28px) saturate(160%) contrast(102%);
  -webkit-backdrop-filter:blur(28px) saturate(160%) contrast(102%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.55),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset -1px -1px 0 rgba(0,50,30,.10),
    inset 0 -24px 48px -30px rgba(0,50,30,.10),
    0 1px 0 rgba(255,255,255,.4),
    0 18px 36px -14px rgba(0,120,80,.10),
    0 28px 56px -26px rgba(0,30,18,.18),
    0 50px 100px -44px rgba(0,30,18,.22);
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1),
    border-color .4s cubic-bezier(.22,1,.36,1);
}
.v8 .cpl::after,
.v8 .window::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(80% 40% at 50% -8%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.15) 40%,
      transparent 70%),
    radial-gradient(120% 100% at 50% 50%,
      transparent 55%,
      rgba(0,74,44,.05) 85%,
      rgba(0,74,44,.09) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/></svg>");
  background-size:auto, auto, 160px 160px;
  mix-blend-mode:overlay;
  opacity:.85;
}
.v8 .cpl::before,
.v8 .window::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  filter:blur(16px);
  background:
    radial-gradient(38% 34% at calc(22% + (var(--mx) - 50%) * 0.06%) calc(18% + (var(--my) - 50%) * 0.06%),
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.10) 45%,
      transparent 70%),
    radial-gradient(46% 40% at calc(78% + (var(--mx) - 50%) * 0.08%) calc(82% + (var(--my) - 50%) * 0.08%),
      hsla(42,65%,58%,.16) 0%,
      hsla(150,40%,30%,.08) 45%,
      transparent 72%);
  mix-blend-mode:screen;
  transform:translate3d(
    calc((var(--mx) - 50%) * 0.06),
    calc((var(--my) - 50%) * 0.06),
    0);
  transition:opacity .4s cubic-bezier(.22,1,.36,1);
  opacity:.7;
}
.v8 .cpl > *,
.v8 .window > *{position:relative;z-index:1}

/* Interactive: couples cards only. Window (Hub preview) stays static. */
@media (hover:hover){
  .v8 .cpl:hover{
    transform:scale(1.01);
    border-color:rgba(0,74,44,.18);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.65),
      inset 0 1px 0 rgba(255,255,255,.55),
      inset -1px -1px 0 rgba(0,50,30,.12),
      inset 0 -24px 48px -30px rgba(0,50,30,.12),
      0 1px 0 rgba(255,255,255,.5),
      0 22px 42px -14px rgba(0,120,80,.14),
      0 34px 66px -28px rgba(0,30,18,.22),
      0 60px 116px -46px rgba(0,30,18,.28);
  }
  .v8 .cpl:hover::before{opacity:.9}
}

/* Reduced-motion guard for the extended surfaces */
@media (prefers-reduced-motion:reduce){
  .v8 .pkg,
  .v8 .cpl,
  .v8 .window{transition:none}
  .v8 .pkg:hover,
  .v8 .cpl:hover{transform:none}
  .v8 .pkg.feat:hover{transform:translateY(-14px)}
  .v8 .pkg::before,
  .v8 .cpl::before,
  .v8 .window::before{transform:none}
}

/* ============ SERVICES — vertical cinematic sequence (sq-) ============ */
.v8 .sq{width:100%}
.v8 .sq-intro{max-width:var(--maxw);margin:0 auto;padding:120px 48px 100px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:center}
.v8 .sq-intro-copy{max-width:52ch}
.v8 .sq-intro .eyebrow{margin-bottom:20px}
.v8 .sq-h{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.04;color:var(--green);margin-bottom:20px;max-width:15ch}
.v8 .sq-h .script{color:var(--gold-deep);font-size:1.1em}
.v8 .sq-support{font-family:var(--font-body);font-size:var(--fs-lead);line-height:1.75;color:var(--grey)}
.v8 .sq-support strong{color:var(--green);font-weight:600}
.v8 .sq-lead-in{margin-top:26px;padding-top:20px;border-top:1px solid rgba(168,132,47,.28);font-family:var(--font-label);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold-deep)}
.v8 .sq-intro-photo{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 70px -30px rgba(20,20,20,.45)}
.v8 .sq-intro-photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.v8 .sq-intro-photo:hover img{transform:scale(1.04)}
.v8 .sq-intro-glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,250,241,.16),inset 0 -80px 90px -40px rgba(20,20,20,.5)}
.v8 .sq-intro.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.v8 .sq-intro.reveal.in{opacity:1;transform:none}
.v8 .sq-chapter{position:relative;width:100%;height:86vh;min-height:560px;max-height:960px;overflow:hidden;background:var(--ink)}
.v8 .sq-media{position:absolute;inset:0;z-index:0}
.v8 .sq-media img,.v8 .sq-media video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:scale(1.06);animation:sq-kb 24s ease-in-out infinite alternate;will-change:transform}
@keyframes sq-kb{to{transform:scale(1.14) translate3d(-1.4%,-1.2%,0)}}
.v8 .sq-grad{position:absolute;inset:0;z-index:1;pointer-events:none}
.v8 .sq-left .sq-grad{background:linear-gradient(75deg,rgba(4,12,8,.74)0%,rgba(4,12,8,.26)38%,transparent 62%),linear-gradient(to top,rgba(4,12,8,.5),transparent 40%)}
.v8 .sq-right .sq-grad{background:linear-gradient(285deg,rgba(4,12,8,.74)0%,rgba(4,12,8,.26)38%,transparent 62%),linear-gradient(to top,rgba(4,12,8,.5),transparent 40%)}
.v8 .sq-center .sq-grad{background:linear-gradient(to top,rgba(4,12,8,.8)0%,rgba(4,12,8,.3)40%,transparent 66%)}
.v8 .sq-text{position:absolute;bottom:clamp(44px,8vh,96px);z-index:3;max-width:min(560px,86%)}
.v8 .sq-left .sq-text{left:clamp(20px,6vw,92px);text-align:left}
.v8 .sq-right .sq-text{right:clamp(20px,6vw,92px);text-align:right}
.v8 .sq-center .sq-text{left:50%;transform:translateX(-50%);text-align:center;max-width:min(620px,90%)}
.v8 .sq-inner{padding:clamp(24px,3vw,40px) clamp(26px,3vw,44px);border-radius:24px;color:var(--cream);background:rgba(10,16,12,.32);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-expo),transform 1s var(--ease-expo)}
.v8 .sq-chapter.in .sq-inner{opacity:1;transform:none}
.v8 .sq-eyebrow{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.v8 .sq-right .sq-eyebrow{justify-content:flex-end}
.v8 .sq-center .sq-eyebrow{justify-content:center}
.v8 .sq-num{font-family:var(--font-display);font-size:clamp(32px,4vw,50px);line-height:.85;color:var(--gold-light)}
.v8 .sq-kicker{font-family:var(--font-label);letter-spacing:.1em;font-size:var(--fs-meta);color:rgba(255,250,241,.9)}
.v8 .sq-head{font-family:var(--font-display);font-size:clamp(28px,4.4vw,52px);line-height:1.05;margin-bottom:14px;color:var(--cream)}
.v8 .sq-copy{font-family:var(--font-body);font-weight:300;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:rgba(255,250,241,.86);margin:0}
.v8 .sq-left .sq-copy,.v8 .sq-right .sq-copy{max-width:42ch}
.v8 .sq-right .sq-copy{margin-left:auto}
.v8 .sq-center .sq-copy{margin:0 auto;max-width:50ch}
.v8 .sq-sound{position:absolute;top:clamp(20px,3vh,32px);right:clamp(20px,4vw,40px);z-index:4;display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:16px;cursor:pointer;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em;color:var(--cream);background:rgba(10,16,12,.32);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);transition:background .35s var(--ease)}
.v8 .sq-sound:hover{background:rgba(10,16,12,.52)}
.v8 .sq-sound svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v8 .sq-sound .wave{transition:opacity .3s var(--ease)}
.v8 .sq-sound[aria-pressed="false"] .wave{opacity:0}
.v8 .sq-sound[aria-pressed="true"] .slash{opacity:0}
.v8 .sq-sound .slash{transition:opacity .3s var(--ease)}
.v8 .sq-reels{position:relative;width:100%;min-height:clamp(760px,100vh,1060px);overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#0c3f28 0%,#06301d 45%,#041a12 100%)}
.v8 .sq-reels-scrim{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(to bottom,rgba(4,12,8,.66)0%,transparent 26%,transparent 62%,rgba(4,12,8,.72)100%)}
.v8 .sq-stage{position:absolute;inset:0;z-index:2}
.v8 .sq-rf{position:absolute;top:50%;left:50%;border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -34px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,250,241,.08)}
.v8 .sq-rf .rf-in{position:absolute;inset:0;opacity:0;transition:opacity 1.05s var(--ease-expo),transform 1.05s var(--ease-expo)}
.v8 .sq-rf .rf-in img,.v8 .sq-rf .rf-in video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.v8 .sq-reels.in .sq-rf .rf-in{opacity:1;transform:none}
.v8 .rf-center{width:clamp(230px,25vw,300px);aspect-ratio:9/16;transform:translate(-50%,-50%);z-index:4}
.v8 .rf-center .rf-in{transform:translateY(46px) scale(.95);transition-delay:0s}
.v8 .rf-left{width:clamp(196px,21vw,262px);aspect-ratio:9/16;transform:translate(calc(-50% - clamp(150px,17vw,232px)),-47%) rotate(-5deg);z-index:3}
.v8 .rf-left .rf-in{transform:translateX(-150px);transition-delay:.16s}
.v8 .rf-right{width:clamp(196px,21vw,262px);aspect-ratio:9/16;transform:translate(calc(-50% + clamp(150px,17vw,232px)),-53%) rotate(5deg);z-index:3}
.v8 .rf-right .rf-in{transform:translateX(150px);transition-delay:.32s}
.v8 .rf-depth{z-index:2;opacity:.5;filter:blur(1.5px) brightness(.78)}
.v8 .rf-d1{width:clamp(170px,18vw,224px);aspect-ratio:9/16;transform:translate(calc(-50% - clamp(250px,30vw,392px)),-44%) rotate(-9deg)}
.v8 .rf-d1 .rf-in{transform:translateX(-120px);transition-delay:.08s}
.v8 .rf-d2{width:clamp(170px,18vw,224px);aspect-ratio:9/16;transform:translate(calc(-50% + clamp(250px,30vw,392px)),-56%) rotate(9deg)}
.v8 .rf-d2 .rf-in{transform:translateX(120px);transition-delay:.24s}
.v8 .sq-r-top{position:absolute;top:clamp(52px,11vh,132px);left:50%;transform:translateX(-50%);z-index:6;text-align:center;width:min(820px,90%);opacity:0;transition:opacity 1s var(--ease-expo) .1s}
.v8 .sq-reels.in .sq-r-top{opacity:1}
.v8 .sq-r-kicker{font-family:var(--font-label);letter-spacing:.12em;font-size:var(--fs-meta);color:var(--gold-light);margin-bottom:18px;display:block}
.v8 .sq-r-head{font-family:var(--font-display);font-size:clamp(30px,4.8vw,58px);line-height:1.08;color:var(--cream);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.v8 .sq-r-head .soft{display:block;font-family:var(--font-script);color:var(--gold-light);font-size:.92em;margin-top:10px;line-height:.9}
.v8 .sq-r-bottom{position:absolute;bottom:clamp(44px,9vh,104px);left:50%;transform:translateX(-50%);z-index:6;text-align:center;width:min(620px,88%);opacity:0;transition:opacity 1s var(--ease-expo) .5s}
.v8 .sq-reels.in .sq-r-bottom{opacity:1}
.v8 .sq-r-copy{font-family:var(--font-body);font-weight:300;font-size:clamp(15px,1.7vw,18px);line-height:1.6;color:rgba(255,250,241,.85);text-shadow:0 2px 20px rgba(0,0,0,.6)}
@media(max-width:900px){
  .v8 .sq-intro{padding:90px 20px 64px;grid-template-columns:1fr;gap:36px}
  .v8 .sq-intro-photo{aspect-ratio:16/11}
  .v8 .sq-chapter{height:80vh;min-height:520px}
  .v8 .sq-reels{min-height:auto;padding:clamp(40px,12vh,90px) 0}
  .v8 .sq-stage{position:relative;height:clamp(430px,64vh,560px)}
  .v8 .rf-depth{display:none}
  .v8 .sq-r-top{position:relative;top:auto;left:auto;transform:none;margin:0 auto clamp(20px,5vh,40px)}
  .v8 .sq-r-bottom{position:relative;bottom:auto;left:auto;transform:none;margin:clamp(20px,5vh,40px) auto 0}
  .v8 .sq-reels-scrim{display:none}
}
@media(prefers-reduced-motion:reduce){
  .v8 .sq-media img,.v8 .sq-media video{animation:none;transform:scale(1.02)}
  .v8 .sq-inner,.v8 .sq-rf .rf-in,.v8 .sq-r-top,.v8 .sq-r-bottom{transition:none;opacity:1;transform:none}
}

/* ============ A DAY WITH RMG — cinematic conveyor (dc-) ============ */
.v8 .dc{--pw:150px;--ph:220px;--gap:26px;--amp:60px;--axis:96px;--line:66px;
  position:relative;width:100vw;left:50%;transform:translateX(-50%);
  height:clamp(560px,76vh,730px);margin-top:clamp(24px,3vw,44px);overflow:hidden}
.v8 .dc-band{position:absolute;z-index:1;font-family:var(--font-display);font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:400;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;transition:color .8s ease}
.v8 .dc-stage{top:calc(var(--line) + 18px);left:7%;color:rgba(0,96,58,.55)}
.v8 .dc-stage-morning,.v8 .dc-stage-day,.v8 .dc-stage-evening{color:var(--gold-deep)}
.v8 .dc-axisline{position:absolute;top:var(--line);left:0;right:0;height:1px;z-index:2;background:linear-gradient(to right,transparent,rgba(0,96,58,.22) 12%,rgba(0,96,58,.22) 88%,transparent)}
.v8 .dc-axis{position:absolute;top:0;left:0;height:var(--axis);display:flex;align-items:flex-start;gap:var(--gap);padding:0 50vw;z-index:3;transition:transform 1.5s var(--ease-expo);will-change:transform}
.v8 .dc-ax{position:relative;flex:0 0 auto;width:var(--pw);height:var(--axis);display:flex;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;font-family:inherit;transition:width 1.5s var(--ease-expo)}
.v8 .dc-ax.active{width:min(70vw,760px)}
.v8 .dc-ax-time{margin-top:34px;font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.06em;color:var(--grey);transition:color .8s var(--ease-expo),font-size .8s var(--ease-expo),transform .8s var(--ease-expo)}
.v8 .dc-ax-tick{position:absolute;top:calc(var(--line) - 3.5px);left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:rgba(0,96,58,.28);transition:width .8s var(--ease-expo),height .8s var(--ease-expo),background .8s var(--ease-expo),box-shadow .8s var(--ease-expo),top .8s var(--ease-expo)}
.v8 .dc-ax.done .dc-ax-tick{background:var(--gold-deep)}
.v8 .dc-ax.active .dc-ax-time{color:var(--gold-deep);font-size:15.5px;font-weight:500;transform:translateY(-2px)}
.v8 .dc-ax.active .dc-ax-tick{width:12px;height:12px;top:calc(var(--line) - 6px);background:var(--gold);box-shadow:0 0 0 5px rgba(208,165,74,.16)}
.v8 .dc-ax:focus-visible{outline:none}
.v8 .dc-ax:focus-visible .dc-ax-time{text-decoration:underline;text-underline-offset:4px}
.v8 .dc-cards{position:absolute;top:var(--axis);left:0;height:calc(100% - var(--axis));display:flex;align-items:center;gap:var(--gap);padding:0 50vw;z-index:2;transition:transform 1.5s var(--ease-expo);will-change:transform}
.v8 .dc-card{position:relative;flex:0 0 auto;width:var(--pw);height:var(--ph);border-radius:16px;overflow:hidden;background:#0b1310;cursor:pointer;transform:none;border:0;box-shadow:0 18px 40px -22px rgba(0,30,18,.5);transition:width 1.5s var(--ease-expo),height 1.5s var(--ease-expo),filter 1.1s var(--ease-expo),box-shadow 1.1s var(--ease-expo),border-radius 1.5s var(--ease-expo)}
.v8 .dc-card video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;filter:blur(1.5px) saturate(.96) brightness(1.02);transform:scale(1.02);transition:filter .95s var(--ease-expo),transform 1.2s var(--ease-expo)}
.v8 .dc-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,250,241,.07),rgba(255,250,241,.02));backdrop-filter:blur(0.4px) saturate(1.01);opacity:1;transition:opacity .9s var(--ease-expo)}
.v8 .dc-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1s var(--ease-expo);background:linear-gradient(to top,rgba(6,12,8,.8)0%,rgba(6,12,8,.12)42%,transparent 66%)}
.v8 .dc-plabel{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 14px;text-align:center;font-family:var(--font-display);font-size:var(--fs-body);line-height:1.1;color:var(--ink,#1a2a20);background:linear-gradient(to top,rgba(255,250,241,.72),transparent);transition:opacity .6s var(--ease-expo),color .6s var(--ease-expo),background .6s var(--ease-expo);opacity:0}
.v8 .dc-cap{position:absolute;left:24px;bottom:24px;z-index:4;max-width:min(58%,420px);display:flex;flex-direction:column;padding:16px 20px;border-radius:16px;color:var(--cream);opacity:0;transform:translateY(8px);background:rgba(10,16,12,.32);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);box-shadow:0 22px 55px -26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2);transition:opacity .8s var(--ease-expo) .4s,transform .8s var(--ease-expo) .4s}
.v8 .dc-c-title{font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.85rem);color:#fff;line-height:1.05}
.v8 .dc-c-copy{font-family:var(--font-body);font-weight:300;font-size:var(--fs-meta);line-height:1.5;color:rgba(255,250,241,.85);margin-top:5px}
.v8 .dc-prog{position:absolute;left:0;right:0;bottom:0;z-index:4;height:3px;background:rgba(255,250,241,.16);opacity:0;transition:opacity .6s var(--ease-expo)}
.v8 .dc-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-light),var(--gold));box-shadow:0 0 10px rgba(208,165,74,.5)}
.v8 .dc-card.active{width:min(70vw,760px);height:clamp(340px,44vh,430px);filter:none;border-radius:22px;border:0;box-shadow:0 50px 110px -46px rgba(0,30,18,.7);cursor:default}
.v8 .dc-card.active::before{opacity:0}
.v8 .dc-card.active video{filter:none;transform:none}
.v8 .dc-card.active .dc-scrim{opacity:1}
.v8 .dc-card.active .dc-plabel{opacity:0}
.v8 .dc-card.active .dc-cap{opacity:1;transform:none}
.v8 .dc-card.active .dc-prog{opacity:1}
.v8 .dc-card.done video{filter:blur(1.2px) saturate(.92) brightness(1)}
.v8 .dc-card:hover:not(.active)::before{opacity:.35}
.v8 .dc-card:hover:not(.active) video{filter:blur(1px) saturate(1) brightness(1.04)}
.v8 .dc-card:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
@media(max-width:760px){
  .v8 .dc{--pw:120px;--ph:176px;--gap:18px;--amp:42px;--axis:84px;--line:58px;height:clamp(500px,68vh,620px)}
  .v8 .dc-card.active{width:82vw;height:clamp(300px,40vh,380px)}
  .v8 .dc-ax-time{font-size:var(--fs-label)}
}
@media(prefers-reduced-motion:reduce){
  .v8 .dc-axis,.v8 .dc-cards,.v8 .dc-card,.v8 .dc-cap,.v8 .dc-scrim,.v8 .dc-plabel,.v8 .dc-ax-time,.v8 .dc-ax-tick{transition:none}
}

/* ============ DELIVERY SEQUENCE — deliverables as four stages (dvs-) ============ */
.v8 .dvs{margin-top:clamp(48px,6vw,84px)}
.v8 .dvs-head{max-width:640px;margin-bottom:clamp(30px,4vw,52px)}
.v8 .dvs-head .eyebrow{margin-bottom:14px}
.v8 .dvs-lead{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.1;color:var(--green)}
.v8 .dvs-lead .script{color:var(--gold-deep);font-size:1.05em}
.v8 .dvs-track{position:relative}
.v8 .dvs-seq{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,34px);align-items:start;position:relative}
.v8 .dvs-seq::before{content:"";position:absolute;left:6%;right:6%;top:12px;height:1px;background:linear-gradient(to right,transparent,var(--gold) 8%,var(--gold) 92%,transparent);opacity:.55}
.v8 .dvs-stage{position:relative;padding-top:40px;opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)}
.v8 .dvs-track.in .dvs-stage{opacity:1;transform:none}
.v8 .dvs-track.in .dvs-stage:nth-child(1){transition-delay:.05s}
.v8 .dvs-track.in .dvs-stage:nth-child(2){transition-delay:.18s}
.v8 .dvs-track.in .dvs-stage:nth-child(3){transition-delay:.31s}
.v8 .dvs-track.in .dvs-stage:nth-child(4){transition-delay:.44s}
.v8 .dvs-node{position:absolute;top:6px;left:0;width:13px;height:13px;border-radius:50%;background:var(--cream);border:1.5px solid var(--gold);transition:.5s var(--ease-expo)}
.v8 .dvs-node::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold);transform:scale(0);transition:.5s var(--ease-expo)}
.v8 .dvs-stage:hover .dvs-node{border-color:var(--green)}
.v8 .dvs-stage:hover .dvs-node::after{transform:scale(1);background:var(--green)}
.v8 .dvs-num{font-family:var(--font-display);font-size:1.5rem;color:var(--gold-deep);line-height:1}
.v8 .dvs-sname{font-family:var(--font-display);font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--green);margin:6px 0 18px;min-height:2.6em}
.v8 .dvs-items{display:flex;flex-direction:column}
.v8 .dvs-item{padding:14px 0;border-top:1px solid var(--rule);transition:.4s var(--ease-expo)}
.v8 .dvs-item:first-child{border-top:1px solid rgba(208,165,74,.35)}
.v8 .dvs-iname{font-family:var(--font-display);font-size:var(--fs-body);color:var(--green-deep);display:flex;align-items:baseline;gap:9px}
.v8 .dvs-ino{font-family:var(--font-label);font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;color:var(--gold-deep)}
.v8 .dvs-iphrase{font-family:var(--font-body);font-weight:300;font-size:var(--fs-meta);color:var(--grey);margin-top:4px;padding-left:24px}
.v8 .dvs-stage:hover .dvs-item{border-top-color:rgba(0,96,58,.22)}
.v8 .dvs-stage:hover .dvs-iname{color:var(--green)}
@media(max-width:820px){
  .v8 .dvs-seq{grid-template-columns:1fr;gap:0}
  .v8 .dvs-seq::before{top:0;bottom:0;left:6px;right:auto;width:1px;height:auto;background:linear-gradient(to bottom,transparent,var(--gold) 6%,var(--gold) 94%,transparent)}
  .v8 .dvs-stage{padding-top:0;padding-left:30px;padding-bottom:30px}
  .v8 .dvs-sname{min-height:0}
  .v8 .dvs-node{top:4px;left:0}
}
@media(prefers-reduced-motion:reduce){
  .v8 .dvs-stage{transition:none}
}

/* ---- Delivery Sequence: dark contrast band ----------------------------------
   The finale of the cream "day" section is rendered as a deep, cinematic panel
   so "everything you keep" reads as its own moment. Text flips to cream/gold. */
.v8 .dvs{
  position:relative; overflow:hidden;
  border-radius:26px;
  padding:clamp(38px,4.4vw,64px) clamp(28px,3.4vw,56px);
  background:radial-gradient(130% 110% at 50% -6%, #123024 0%, #0c211a 54%, #09150f 100%);
  box-shadow:0 40px 90px -46px rgba(0,30,18,.6);
}
.v8 .dvs::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 60% at 12% 0%, rgba(0,96,58,.5) 0%, transparent 66%),
    radial-gradient(40% 70% at 92% 100%, rgba(208,165,74,.18) 0%, transparent 64%);
}
.v8 .dvs > *{position:relative; z-index:1}
.v8 .dvs-head .eyebrow{color:var(--gold-light)}
.v8 .dvs-lead{color:var(--cream)}
.v8 .dvs-lead .script{color:var(--gold-light)}
.v8 .dvs-seq::before{background:linear-gradient(to right,transparent,var(--gold-light) 8%,var(--gold-light) 92%,transparent);opacity:.5}
.v8 .dvs-node{background:var(--cream);border-color:var(--gold-light)}
.v8 .dvs-node::after{background:var(--gold-light)}
.v8 .dvs-stage:hover .dvs-node{border-color:var(--cream)}
.v8 .dvs-stage:hover .dvs-node::after{transform:scale(1);background:var(--cream)}
.v8 .dvs-num{color:var(--gold-light)}
.v8 .dvs-sname{color:var(--cream)}
.v8 .dvs-item{border-top-color:rgba(255,250,241,.14)}
.v8 .dvs-item:first-child{border-top-color:rgba(233,200,126,.4)}
.v8 .dvs-iname{color:var(--cream)}
.v8 .dvs-ino{color:var(--gold-light)}
.v8 .dvs-iphrase{color:rgba(255,250,241,.62)}
.v8 .dvs-stage:hover .dvs-item{border-top-color:rgba(233,200,126,.5)}
.v8 .dvs-stage:hover .dvs-iname{color:var(--gold-light)}
@media(max-width:820px){
  .v8 .dvs-seq::before{background:linear-gradient(to bottom,transparent,var(--gold-light) 6%,var(--gold-light) 94%,transparent)}
}

/* ============ TESTIMONIALS — editorial, photo-backed glass cards (ts-) ============ */
.v8 .couples .ts-head{max-width:640px;margin-bottom:clamp(20px,3vh,34px)}
.v8 .ts-h{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;color:var(--green);margin:10px 0 0}
.v8 .ts-sub{font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);color:var(--grey);margin-top:10px;max-width:46ch}
.v8 .ts-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(18px,2vw,28px);align-items:stretch;max-height:calc(100vh - clamp(150px,18vh,200px))}
.v8 .ts-side{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
.v8 .ts-card{position:relative;border-radius:22px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.55);box-shadow:0 30px 70px -44px rgba(0,40,24,.3),0 8px 20px -14px rgba(0,40,24,.14);min-height:0;display:flex;transition:transform .55s var(--ease-expo),box-shadow .55s var(--ease-expo),border-color .55s var(--ease-expo)}
.v8 .ts-photo{position:absolute;inset:0;z-index:0;background-image:var(--ts-img);background-size:cover;background-position:center;filter:blur(3px) brightness(1.06) saturate(.96);transform:scale(1.1);transition:filter .6s var(--ease-expo),transform .8s var(--ease-expo)}
.v8 .ts-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(158deg,rgba(255,250,241,.58) 0%,rgba(255,250,241,.72) 52%,rgba(255,250,241,.88) 100%)}
.v8 .ts-card::before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;z-index:2;background:linear-gradient(to right,transparent,rgba(255,255,255,.9),transparent);opacity:.7;transition:opacity .5s var(--ease-expo)}
.v8 .ts-inner{position:relative;z-index:3;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;justify-content:space-between;width:100%}
.v8 .ts-qmark{font-family:var(--font-display);font-size:clamp(2.8rem,4.4vw,4.2rem);line-height:.7;color:var(--gold);opacity:.32;margin-bottom:4px}
.v8 .ts-quote{font-family:var(--font-display);font-weight:400;color:var(--green);line-height:1.42;letter-spacing:.005em}
.v8 .ts-by{margin-top:clamp(14px,1.8vh,22px);padding-top:12px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:3px}
.v8 .ts-name{font-family:var(--font-body);font-weight:700;font-size:var(--fs-meta);letter-spacing:.02em;color:var(--green-deep)}
.v8 .ts-venue{font-family:var(--font-body);font-weight:300;font-size:var(--fs-meta);letter-spacing:.04em;color:var(--grey)}
.v8 .ts-card:hover{transform:translateY(-5px);box-shadow:0 46px 100px -50px rgba(0,40,24,.4),0 12px 26px -16px rgba(0,40,24,.2);border-color:rgba(255,255,255,.85)}
.v8 .ts-card:hover::before{opacity:1}
.v8 .ts-card:hover .ts-photo{filter:blur(2px) brightness(1.09) saturate(1);transform:scale(1.14)}
.v8 .ts-card.featured .ts-inner{padding:clamp(24px,2.6vw,40px)}
.v8 .ts-card.featured .ts-qmark{font-size:clamp(3.2rem,5vw,5rem);opacity:.34}
.v8 .ts-card.featured .ts-quote{font-size:clamp(1.15rem,1.6vw,1.5rem)}
.v8 .ts-card.small .ts-quote{font-size:clamp(.95rem,1.1vw,1.12rem)}
@media(max-width:860px){
  .v8 .couples{padding:64px 20px;min-height:auto;display:block}
  .v8 .ts-grid{grid-template-columns:1fr;max-height:none}
  .v8 .ts-card{min-height:200px}
  .v8 .ts-card.featured .ts-quote{font-size:clamp(1.3rem,4.4vw,1.6rem)}
}
@media(prefers-reduced-motion:reduce){.v8 .ts-card,.v8 .ts-photo{transition:none}}

/* ============ COLLECTIONS — cinematic full-bleed, smoked-glass cards (coll-/gc-) ============ */
.v8 .coll{position:relative;width:100%;overflow:hidden;background:#0c1712;padding:clamp(80px,12vh,150px) clamp(20px,5vw,72px)}
.v8 .coll-bg{position:absolute;inset:-10% 0;z-index:0;background-image:var(--bg);background-size:cover;background-position:center 60%;filter:saturate(.78) brightness(.92) contrast(1.02);will-change:transform}
.v8 .coll-grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60vw 46vw at 78% 16%,rgba(208,165,74,.16),transparent 58%),linear-gradient(180deg,rgba(0,42,25,.66) 0%,rgba(0,34,20,.6) 45%,rgba(0,26,16,.78) 100%),radial-gradient(130% 110% at 50% 38%,transparent 42%,rgba(0,18,11,.62) 100%)}
.v8 .coll-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.v8 .coll-inner{position:relative;z-index:3;max-width:1240px;margin:0 auto}
.v8 .coll-head{max-width:720px;margin:0 auto clamp(44px,6vw,72px);text-align:center}
.v8 .coll-head .eyebrow{color:var(--gold-light);text-shadow:0 1px 8px rgba(0,20,12,.6)}
.v8 .coll-head h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.06;color:#fff;margin:18px 0 0;text-shadow:0 4px 34px rgba(0,15,9,.55)}
.v8 .coll-head h2 .script{color:var(--gold-light);font-size:1.08em}
.v8 .coll-sub{font-family:var(--font-body);font-weight:300;font-size:var(--fs-body);line-height:1.7;color:rgba(255,250,241,.84);margin:20px auto 0;max-width:56ch;text-shadow:0 2px 16px rgba(0,15,9,.5)}
.v8 .coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);align-items:stretch}
.v8 .gcard{position:relative;border-radius:24px;overflow:hidden;isolation:isolate;background:linear-gradient(158deg,rgba(255,250,241,.15) 0%,rgba(214,230,220,.1) 55%,rgba(255,250,241,.13) 100%);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(26px) saturate(130%);box-shadow:0 60px 120px -54px rgba(0,18,11,.8),0 18px 44px -30px rgba(0,18,11,.5),inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 44px rgba(255,250,241,.05);display:flex;transition:transform .5s var(--ease-expo),box-shadow .5s var(--ease-expo),border-color .5s var(--ease-expo)}
.v8 .gcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(125deg,transparent 38%,rgba(233,200,126,.09) 50%,transparent 62%)}
.v8 .gc-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(38% 44% at var(--mx,50%) var(--my,28%),rgba(255,250,241,.16),transparent 72%);opacity:.9;transition:opacity .6s var(--ease-expo)}
.v8 .gc-body{position:relative;z-index:2;padding:clamp(28px,2.6vw,42px);display:flex;flex-direction:column;width:100%;height:100%}
.v8 .gc-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2vw,1.9rem);color:#fff;line-height:1;letter-spacing:.01em}
.v8 .gc-price{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.v8 .gc-amt{font-family:var(--font-display);font-size:clamp(2rem,2.8vw,2.6rem);color:var(--gold-light);line-height:1}
.v8 .gc-plabel{font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,250,241,.72)}
.v8 .gc-halfday{font-family:var(--font-body);font-size:var(--fs-meta);letter-spacing:.02em;color:rgba(255,250,241,.6);margin-top:6px}
.v8 .gc-pos{font-family:var(--font-body);font-size:var(--fs-meta);line-height:1.6;color:rgba(255,250,241,.86);margin:20px 0 4px;min-height:3.4em}
.v8 .gc-incl{list-style:none;margin-top:14px;border-top:1px solid rgba(255,255,255,.16);flex:1 1 auto}
.v8 .gc-incl li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--font-body);font-size:var(--fs-meta);letter-spacing:.01em;color:rgba(255,250,241,.88)}
.v8 .gc-incl li:last-child{border-bottom:0}
.v8 .gc-cta{margin-top:auto;padding-top:26px;align-self:flex-start}

.v8 .gcard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.4);box-shadow:0 80px 150px -56px rgba(0,18,11,.85),0 22px 50px -30px rgba(0,18,11,.55),inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 44px rgba(255,250,241,.07)}
.v8 .gcard:hover .gc-glow{opacity:1}
@media(max-width:860px){
  .v8 .coll-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .v8 .gc-pos{min-height:0}
  /* Centre the package card content on mobile (desktop keeps it left). */
  .v8 .gc-body{align-items:center;text-align:center}
  .v8 .gc-price{justify-content:center}
  .v8 .gc-incl{width:100%}
  .v8 .gc-cta{align-self:center}
}
@media(prefers-reduced-motion:reduce){
  .v8 .coll-bg,.v8 .gcard,.v8 .gc-cta,.v8 .gc-glow{transition:none}
}


/* ============================================================
   JOURNEY RIBBON — "after hero" section (replaces availability-card)
   ============================================================ */
.v8 .jrib{max-width:1040px;margin:0 auto;text-align:center}
.v8 .jrib .ac-status{display:inline-flex;margin:0 auto}
.v8 .jrib-h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.08;color:var(--cream);margin:20px 0 0}
.v8 .jrib-script{font-family:var(--font-script);color:var(--gold-light);font-size:1.1em}
.v8 .jrib-lede{color:rgba(255,250,241,.72);font-size:clamp(16px,2vw,18px);line-height:1.6;margin:18px auto 0;max-width:560px}
.v8 .jrib-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin:54px auto 44px;max-width:960px}
.v8 .jrib-track::before{content:"";position:absolute;left:6%;right:6%;top:33px;height:2px;background:rgba(255,250,241,.12)}
.v8 .jrib-track::after{content:"";position:absolute;left:6%;top:33px;height:2px;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));transition:width 1.8s cubic-bezier(.16,1,.3,1) .35s}
.v8 .jrib.in .jrib-track::after{width:88%}
.v8 .jrib-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.v8 .jrib-dot{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-light);background:#0b1a13;border:1.5px solid rgba(208,165,74,.45);box-shadow:0 0 0 7px #0c1410;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s}
.v8 .jrib-stage:hover .jrib-dot{transform:scale(1.12);border-color:var(--gold)}
.v8 .jrib-dot svg{width:20px;height:20px}
.v8 .jrib-rl{font-family:var(--font-display);font-size:var(--fs-body);color:var(--cream);line-height:1.15}
.v8 .jrib-rs{font-size:var(--fs-label);color:rgba(255,250,241,.5)}
.v8 .jrib-avail{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:6px;color:rgba(255,250,241,.7);font-size:var(--fs-meta)}
.v8 .jrib-avail b{font-family:var(--font-display);color:var(--gold-light);font-weight:400;margin-right:6px}
.v8 .jrib-included{color:rgba(255,250,241,.6);font-size:var(--fs-meta);margin-top:24px}
.v8 .jrib-included em{font-style:italic;color:var(--gold);font-weight:400}
.v8 .jrib-cta{margin-top:22px}
.v8 .reveal.jrib{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.v8 .reveal.jrib.in{opacity:1;transform:none}
@media(max-width:820px){
  .v8 .jrib-track{grid-auto-flow:row;grid-auto-columns:none;gap:26px;max-width:300px}
  .v8 .jrib-track::before,.v8 .jrib-track::after{display:none}
  /* Mobile: each step is a centred stack (icon, label, caption), not a
     left-aligned row. Desktop is untouched (>820px). */
  .v8 .jrib-stage{flex-direction:column;align-items:center;text-align:center;gap:8px}
}

/* Mobile: centre the sections that are editorial / left-aligned on desktop, so
   every item reads centred on a phone. Desktop (>820px) is untouched. */
@media(max-width:820px){
  .v8 .film-bubble{text-align:center}
  .v8 .team-copy{text-align:center}
  .v8 .day .sec-head{text-align:center}
  .v8 .couples .ts-head{text-align:center}
  /* Film-chapter cards are position:absolute — centre them properly (left:auto
     alone does not), keep them clear of the edges, and make them smaller. */
  .v8 .sq-left .sq-text,.v8 .sq-right .sq-text,.v8 .sq-center .sq-text{
    left:50%;right:auto;transform:translateX(-50%);
    text-align:center;width:calc(100% - 40px);max-width:400px;
    bottom:clamp(32px,6vh,64px);
  }
  .v8 .sq-left .sq-eyebrow,.v8 .sq-right .sq-eyebrow{justify-content:center}
  .v8 .sq-left .sq-copy,.v8 .sq-right .sq-copy,.v8 .sq-center .sq-copy{
    margin-left:auto;margin-right:auto;max-width:34ch;
  }
  .v8 .sq-h{font-size:clamp(26px,7vw,34px);margin-bottom:14px;max-width:20ch}
  .v8 .sq-num{font-size:clamp(26px,6vw,36px)}
  .v8 .sq-copy{font-size:15px}
  /* Smaller film bubble on mobile too. */
  .v8 .film-bubble h2 .script{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){
  .v8 .jrib-track::after{transition:none;width:88%}
  .v8 .reveal.jrib{opacity:1;transform:none;transition:none}
}

/* Journey ribbon — availability now lives in the status pill */
.v8 .jrib .ac-status{gap:12px}
.v8 .jrib .ac-status b{font-family:var(--font-display);color:var(--gold-light);font-weight:400;margin-right:5px}
.v8 .jrib-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,250,241,.3);flex:none}

/* Instagram follow — same pill language as the hero CTAs, on a light bg */
.v8 .insta .btn-outline.ig-follow{margin-top:26px;color:var(--gold-deep)}
.v8 .insta .btn-outline.ig-follow::before{border-color:rgba(168,132,47,.6)}
.v8 .insta .btn-outline.ig-follow::after{background:rgba(168,132,47,.75)}
.v8 .insta .btn-outline.ig-follow .btn-glass{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -20px rgba(0,20,12,.28);
}
.v8 .insta .btn-outline.ig-follow:hover{color:#7d611f}

.v8 .btn-outline > svg{position:relative;z-index:2}

/* ── Homepage enquiry: light glass panel + light-skinned form ──
   The shared .enqf is a dark-on-dark card. The homepage enquiry section sits on
   the light cream .v8 background, so re-skin it light (same treatment as the
   Contact page .formcard). Scoped to .v8 .enquire so dark-section forms elsewhere
   are untouched. */
.v8 .enquire .formcard{
  width:100%; max-width:640px;
  background:rgba(255,250,241,.55);
  border:1px solid rgba(255,255,255,.6);
  border-radius:22px;
  padding:clamp(24px,4vw,44px); backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 30px 80px -30px rgba(0,40,24,.28);
}
.v8 .enquire .formcard .enqf{
  max-width:none !important; background:transparent !important; border:0 !important;
  border-radius:0 !important; padding:0 !important; box-shadow:none !important; backdrop-filter:none !important;
}
.v8 .enquire .enqf label{ color:var(--gold-deep) !important; }
.v8 .enquire .enqf .enqf-opt{ color:var(--grey) !important; }
.v8 .enquire .enqf input, .v8 .enquire .enqf textarea, .v8 .enquire .enqf select{
  background:rgba(255,255,255,.9) !important; border:1px solid rgba(0,0,0,.10) !important;
  color:var(--dark) !important; border-radius:12px !important;
}
.v8 .enquire .enqf input::-moz-placeholder, .v8 .enquire .enqf textarea::-moz-placeholder{ color:rgba(84,89,95,.5) !important; }
.v8 .enquire .enqf input::placeholder, .v8 .enquire .enqf textarea::placeholder{ color:rgba(84,89,95,.5) !important; }
.v8 .enquire .enqf input:focus, .v8 .enquire .enqf textarea:focus, .v8 .enquire .enqf select:focus{
  border-color:var(--gold) !important; background:var(--white) !important; box-shadow:0 0 0 3px rgba(208,165,74,.2) !important;
}
.v8 .enquire .enqf select option{ background:var(--white); color:var(--dark); }
.v8 .enquire .enqf select:invalid{ color:rgba(84,89,95,.5) !important; }
.v8 .enquire .enqf select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23A8842F' stroke-width='1.3'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:12px !important; }
.v8 .enquire .enqf-btn{ color:var(--gold-deep) !important; border-color:rgba(168,132,47,.7) !important; }
.v8 .enquire .enqf-btn:hover:not(:disabled){ background:var(--gold-light) !important; color:#141414 !important; }
.v8 .enquire .enqf-tel{ color:var(--grey) !important; }
.v8 .enquire .enqf-tel:hover{ color:var(--gold-deep) !important; }
/* ============================================================
   RMG location-page design system (geo + venue templates)
   Ported faithfully from design/mockup-location-page.html
   (the approved "Wedding Photographer in Chichester" v8 cream
   template).

   EVERY selector is scoped under .v8loc so it never leaks into
   the CRM, portal, dashboard, homepage (.v8) or any other page.
   The shared PublicHeader/PublicFooter keep their own .v8-header
   / .v8-footer scopes from v8.css — this file only styles the
   page body between them.
   ============================================================ */

/* Design tokens — applied to the .v8loc scope only.
   Variables inherit to descendants, so all .v8loc markup can use them. */
.v8loc {
  --green:#00603A;--green-deep:#003D24;--green-mist:#E8F1EC;
  --gold:#D0A54A;--gold-deep:#A8842F;--gold-soft:rgba(208,165,74,.45);--gold-light:#E0C079;
  --cream:#FFFAF1;--cream-warm:#F5EFE2;--dark:#232323;--ink:#141414;--grey:#54595F;--white:#fff;
  --rule:rgba(35,35,35,.10);--rule-light:rgba(255,250,241,.18);
  --font-display:'ZCOOL XiaoWei',Georgia,serif;--font-script:'Oooh Baby',cursive;
  --font-body:'Lato',-apple-system,system-ui,sans-serif;--font-label:'Roboto',sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);--ease-expo:cubic-bezier(.16,1,.3,1);--maxw:1200px;
  --glass-bg:rgba(255,250,241,.1);--glass-brd:rgba(255,255,255,.22);--glass-blur:blur(24px) saturate(155%);
  --glass-shadow:0 30px 80px -22px rgba(0,30,18,.5),0 8px 28px rgba(0,0,0,.16),inset 1px 1px 0 0 rgba(255,255,255,.32),inset -1px -1px 0 0 rgba(255,255,255,.05);
}

/* Base — scoped to the page wrapper */
.v8loc{font-family:var(--font-body);color:var(--dark);background:var(--cream);line-height:1.7;font-size:var(--fs-body);position:relative;overflow-x:hidden}
.v8loc *{margin:0;padding:0;box-sizing:border-box}
.v8loc img{display:block;max-width:100%;height:auto}
.v8loc a{color:inherit;text-decoration:none}
.v8loc section{position:relative}

/* CONTINUOUS BACKDROP */
.v8loc .bg-field{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60vw 60vw at 10% 8%,rgba(0,96,58,.08),transparent 60%),
  radial-gradient(50vw 50vw at 92% 40%,rgba(208,165,74,.10),transparent 60%),
  radial-gradient(55vw 55vw at 40% 92%,rgba(0,96,58,.06),transparent 60%),
  linear-gradient(180deg,var(--cream),var(--cream-warm) 55%,var(--cream))}
.v8loc > *:not(.bg-field){position:relative;z-index:1}

/* TYPE */
.v8loc h1,.v8loc h2,.v8loc h3,.v8loc h4{font-family:var(--font-display);font-weight:400}
.v8loc h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;color:var(--green)}
.v8loc h3{font-size:1.4rem;color:var(--green)}
.v8loc .script{font-family:var(--font-script);font-weight:400;color:var(--gold-deep);line-height:.9}
.v8loc .eyebrow{font-family:var(--font-label);font-size:var(--fs-meta);font-weight:500;letter-spacing:.1em;color:var(--gold-deep);display:inline-block}
.v8loc .eyebrow.light{color:var(--gold)}
.v8loc .lead{font-size:var(--fs-lead);line-height:1.8;color:var(--grey);max-width:64ch}

/* BUTTONS */
.v8loc .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-size:var(--fs-meta);font-weight:700;padding:15px 30px;border-radius:100px;transition:all .25s var(--ease);cursor:pointer;border:1px solid transparent;text-align:center;justify-content:center;line-height:1.2}
.v8loc .btn:active{transform:scale(.97)}
.v8loc .btn-primary{background:var(--gold);color:var(--cream);box-shadow:0 8px 28px var(--gold-soft)}
.v8loc .btn-primary:hover{background:var(--gold-deep);transform:translateY(-2px)}
.v8loc .btn-glass{background:rgba(255,250,241,.12);border-color:rgba(255,250,241,.5);color:var(--cream);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.v8loc .btn-glass:hover{background:rgba(255,250,241,.2)}
.v8loc .btn-out{border-color:var(--green);color:var(--green)}
.v8loc .btn-out:hover{background:rgba(0,96,58,.14);border-color:var(--green);color:var(--green)}

/* frosted panel */
.v8loc .glass{background:var(--glass-bg);border:1px solid var(--glass-brd);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);border-radius:22px;position:relative;overflow:hidden}
.v8loc .glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 0 0,rgba(255,255,255,.18),transparent 45%),radial-gradient(circle at 100% 100%,rgba(208,165,74,.12),transparent 50%)}

/* scroll reveal — bulletproof: visible unless JS hides it, plus failsafe in script */
html:not(.v8loc-js) .v8loc .reveal{opacity:1;transform:none}
.v8loc-js .v8loc .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.v8loc-js .v8loc .reveal.in{opacity:1;transform:none}

/* SHELL */
.v8loc .container{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.v8loc .section{padding:96px 0;position:relative}

/* GEO HERO (varies per page: H1, image) */
.v8loc .ghero{min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);padding:120px 40px 56px}
.v8loc .ghero .gbg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.v8loc .ghero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,61,36,.45)0%,rgba(0,40,24,.2)40%,rgba(15,15,15,.85)100%)}
.v8loc .ghero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;color:var(--cream)}
.v8loc .crumb{font-family:var(--font-label);font-size:var(--fs-meta);color:rgba(255,250,241,.7);letter-spacing:.04em;margin-bottom:18px}
.v8loc .crumb a:hover{color:var(--gold)}
.v8loc .crumb span{opacity:.5;margin:0 7px}
.v8loc .ghero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.98;color:var(--cream);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.v8loc .ghero h1 .script{color:var(--gold);font-size:.62em}
.v8loc .ghero p{font-family:var(--font-body);font-size:var(--fs-lead);color:rgba(255,250,241,.9);font-weight:300;margin:18px 0 28px;max-width:44ch}
.v8loc .ghero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* LOCAL INTRO */
.v8loc .intro .container{max-width:920px}
.v8loc .intro .eyebrow{margin-bottom:14px}
.v8loc .intro h2 .script{color:var(--gold-deep)}
.v8loc .intro p{font-size:var(--fs-lead);color:var(--dark);margin-top:18px;line-height:1.85}
.v8loc .intro .sig{margin-top:24px;display:flex;align-items:center;gap:14px;font-family:var(--font-label);font-size:var(--fs-meta);color:var(--grey)}
.v8loc .intro .sig b{color:var(--green);font-family:var(--font-display);font-size:var(--fs-body)}

/* TWO CRAFTS */
.v8loc .crafts{padding:60px 0}
.v8loc .crafts-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.v8loc .craft{position:relative;border-radius:18px;overflow:hidden;min-height:320px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--cream);background:var(--ink)}
.v8loc .craft .cbg{position:absolute;inset:0;background-size:cover;background-position:center;transition:.8s var(--ease)}
.v8loc .craft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 35%,rgba(0,40,24,.9))}
.v8loc .craft:hover .cbg{transform:scale(1.06)}
.v8loc .craft>*{position:relative;z-index:2}
.v8loc .craft h3{color:var(--cream);font-size:1.7rem;margin-bottom:8px}
.v8loc .craft p{font-size:var(--fs-meta);color:rgba(255,250,241,.9);font-weight:300}

/* VENUES */
.v8loc .venues .vhead{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;align-items:end;margin-bottom:46px}
.v8loc .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v8loc .venue{border-radius:16px;overflow:hidden;background:var(--white);border:1px solid var(--rule);box-shadow:0 16px 40px -26px rgba(0,69,41,.4)}
.v8loc .venue .vimg{height:170px;background-size:cover;background-position:center}
.v8loc .venue .vbody{padding:20px}
.v8loc .venue h4{font-size:var(--fs-lead);color:var(--green);margin-bottom:6px}
.v8loc .venue p{font-size:var(--fs-meta);color:var(--grey)}

/* HUB CTA strip */
.v8loc .hubcta{padding:30px 0}
.v8loc .hubcta .panel{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;border-radius:24px;padding:44px;background:linear-gradient(120deg,var(--green),var(--green-deep));color:var(--cream);position:relative;overflow:hidden}
.v8loc .hubcta .panel::after{content:"";position:absolute;top:-120px;right:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(208,165,74,.25),transparent 65%)}
.v8loc .hubcta h3{color:var(--cream);font-size:1.9rem;position:relative}
.v8loc .hubcta h3 .script{color:var(--gold-light)}
.v8loc .hubcta p{color:rgba(255,250,241,.85);font-weight:300;margin:12px 0 0;position:relative}
.v8loc .hubcta .side{position:relative;text-align:right}

/* TESTIMONIAL */
.v8loc .gtesti{padding:70px 0}
.v8loc .gtesti .panel{max-width:900px;margin:0 auto;padding:44px 48px;text-align:center}
.v8loc .gtq{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--green);line-height:1.4}
.v8loc .gtq em{font-family:var(--font-script);font-style:normal;color:var(--gold-deep)}
.v8loc .gtw{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--grey);margin-top:16px}

/* FAQ — Radix accordion, styled to match the mockup's <details> look.
   The shared ui/accordion renders a built-in chevron SVG and a few Tailwind
   utilities on the trigger/content; we hide/override those here so the mockup's
   rotating "+" is the only indicator and the type matches. */
.v8loc .faq .container{max-width:880px}
.v8loc .faq h2{text-align:center;margin-bottom:36px}
.v8loc .faq-list{width:100%}
.v8loc .fitem{border-bottom:1px solid var(--rule)}
.v8loc .fitem.fitem{border-radius:0}
.v8loc .fitem .ftrigger{width:100%;cursor:pointer;padding:22px 0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-lead);color:var(--green);display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;text-align:left;line-height:1.3}
.v8loc .fitem .ftrigger:hover{text-decoration:none}
/* hide the component's default chevron icon */
.v8loc .fitem .ftrigger > svg{display:none}
.v8loc .fitem .ftrigger::after{content:"+";font-family:var(--font-body);color:var(--gold-deep);font-size:1.6rem;line-height:1;transition:transform .3s var(--ease);flex:0 0 auto}
.v8loc .fitem .ftrigger[data-state="open"]::after{transform:rotate(45deg)}
/* .fcontent is applied to the inner padding div of AccordionContent */
.v8loc .fitem .fcontent{color:var(--grey);max-width:70ch;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.7;padding:0 0 22px}

/* INTERLINK */
.v8loc .interlink{padding:60px 0}
.v8loc .interlink .panel{border-radius:22px;padding:40px;background:var(--cream-warm);border:1px solid var(--rule)}
.v8loc .interlink h3{margin-bottom:8px}
.v8loc .ilrow{margin-top:18px}
.v8loc .ilrow .ill{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold-deep);letter-spacing:.04em;margin-bottom:10px}
.v8loc .ilchips{display:flex;flex-wrap:wrap;gap:10px}
.v8loc .ilchips a{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--green);background:var(--white);border:1px solid var(--rule);border-radius:100px;padding:9px 18px;transition:.2s}
.v8loc .ilchips a:hover{background:var(--green);color:var(--cream);border-color:var(--green)}

/* FINAL — with enquiry form */
.v8loc .gfinal{padding:110px 0;text-align:center}
.v8loc .gfinal .stage{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.v8loc .gfinal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.66),rgba(0,40,24,.82));z-index:1}
.v8loc .gfinal .card{position:relative;z-index:2;max-width:720px;margin:0 auto;color:var(--cream)}
.v8loc .gfinal h2{color:var(--cream)}
.v8loc .gfinal h2 .script{color:var(--gold);display:block}
.v8loc .gfinal p{color:rgba(255,250,241,.86);font-weight:300;margin:16px auto 14px;max-width:44ch}
.v8loc .gfinal .sc{font-family:var(--font-label);font-size:var(--fs-meta);color:var(--gold);margin-bottom:26px}
.v8loc .gfinal .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ENQUIRY FORM — frosted card on the final CTA, mockup-styled */
.v8loc .gform{position:relative;z-index:2;max-width:560px;margin:30px auto 0;padding:34px;text-align:left}
.v8loc .gform .field{margin-bottom:14px}
.v8loc .gform label{display:block;font-family:var(--font-label);font-size:var(--fs-meta);letter-spacing:.02em;color:var(--gold);margin-bottom:7px}
.v8loc .gform input,
.v8loc .gform textarea{width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--cream);background:rgba(255,250,241,.1);border:1px solid rgba(255,250,241,.28);border-radius:12px;padding:13px 15px;transition:.2s var(--ease)}
.v8loc .gform input::-moz-placeholder, .v8loc .gform textarea::-moz-placeholder{color:rgba(255,250,241,.5)}
.v8loc .gform input::placeholder,
.v8loc .gform textarea::placeholder{color:rgba(255,250,241,.5)}
.v8loc .gform input:focus,
.v8loc .gform textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,250,241,.16)}
.v8loc .gform textarea{resize:none}
.v8loc .gform input[type="date"]{color-scheme:dark}
.v8loc .gform .gbtn{width:100%;margin-top:6px}
.v8loc .gform .gbtn:disabled{opacity:.65;cursor:not-allowed}
.v8loc .gform .fmsg{font-family:var(--font-label);font-size:var(--fs-meta);text-align:center;margin-top:14px}
.v8loc .gform .fmsg.ok{color:var(--gold-light)}
.v8loc .gform .fmsg.err{color:#ffb4a8}

/* RESPONSIVE */
@media(max-width:980px){
  .v8loc .container{padding:0 20px}
  .v8loc .section{padding:60px 0}
  .v8loc .ghero{padding:110px 20px 44px;min-height:auto}
  .v8loc .crafts-grid,.v8loc .hubcta .panel,.v8loc .venues .vhead{grid-template-columns:1fr;gap:22px}
  .v8loc .vgrid{grid-template-columns:1fr 1fr}
  .v8loc .hubcta .side{text-align:left}
}
@media(max-width:560px){.v8loc .vgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .v8loc .reveal{opacity:1;transform:none}
  .v8loc *{animation:none}
}
/* ─────────────────────────────────────────────────────────────
   MOBILE CENTERING — core public pages
   Films, Photography, Team, Packages, Contact. Matches the homepage:
   on phones every content block reads fully centred, not just the text.
   Phones only (max-width:820px) so desktop editorial layouts are untouched.
   Loaded LAST in main.tsx so it wins on source order; !important covers the
   more specific per-page rules it overrides.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* Left-aligned content wrappers found across the five pages. */
  .ch-head,
  .next-inner,
  .bhead,
  .dhead,
  .dtext,
  .how .hh,
  .rhead,
  .ohead,
  .feat-copy,
  .sec .sh,
  .fhead,
  .hs-copy,
  .cine-content,
  .cine-inner {
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
  }

  /* Centre ALL heading/body/eyebrow text directly within the affected
     sections, so paragraphs that live in a different wrapper to the heading
     are caught too (Team sections especially). */
  :is(section.cine, section.journey, section.sound, section.next,
      section.behind, section.duo, section.depth, section.how,
      section.rxn, section.onemoment, section.hubstrip, section.sec)
    :is(h1, h2, h3, h4, p, .eyebrow, .hero-sub) {
    text-align: center !important;
  }

  /* Centre block-level buttons / links inside those wrappers. */
  :is(.ch-head, .next-inner, .bhead, .dhead, .dtext, .how .hh, .rhead,
      .ohead, .feat-copy, .fhead, .hs-copy) :is(a, button, .btn-outline, .btn) {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE CENTERING — v8 dark-glass geo pages (.v8hub)
   The hero already centres; the body sections (intro prose, the couple
   story card, section headings, venue list, interlink, final CTA) were
   left-aligned on phones. Centre them to match the hero and the rest of
   the site. Phones only (max-width:820px); desktop editorial layout is
   untouched.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .v8hub .prose-dark,
  .v8hub .sec-top,
  .v8hub .story-copy,
  .v8hub .spec-card,
  .v8hub .interlink .panel,
  .v8hub .gfinal .card {
    text-align: center !important;
    align-items: center !important;
  }

  .v8hub :is(.content-sec, .stories, .spec-sec, .faq, .interlink, .gfinal)
    :is(h1, h2, h3, h4, p, .eyebrow, .venue, .pkgtag, .lead, blockquote, cite, figcaption) {
    text-align: center !important;
  }

  /* Centre the button / chip / link rows. */
  .v8hub .geo-btns,
  .v8hub .story-copy .links,
  .v8hub .interlink .ilchips,
  .v8hub .gfinal .ctas {
    justify-content: center !important;
  }

  /* The venue-list bullets read better centred without hanging markers. */
  .v8hub .spec-card ul {
    list-style-position: inside !important;
    padding-left: 0 !important;
  }
}