@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{
  display:inline-flex; align-items:center; min-height:44px;
  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)}
/* "Sign out (email)" for a signed-in account with no wedding; email hides on small phones */
.pbk-switch{min-height:44px; font-family:inherit}
.pbk-switch-who{text-transform:none; letter-spacing:.02em}
@media (max-width:520px){.pbk-switch-who{display:none}}
.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 30%; 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 30%; 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}
/* "Cookie settings" reopens the cookie banner; it is a button styled as a footer link */
.rmg-foot-legal-links .rmg-foot-cookie-btn{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  transition:color .3s cubic-bezier(.22,1,.36,1);
}
.rmg-foot-legal-links .rmg-foot-cookie-btn:hover{color:#D0A54A}
.rmg-foot-legal-links .rmg-foot-cookie-btn:focus-visible{outline:2px solid #E9C87E;outline-offset:3px}
.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}
  /* 44px tap targets on phones. The rows keep the same spacing as before:
     the links grow taller and the gap between them shrinks to match. */
  .rmg-foot-nav{row-gap:7px}
  .rmg-foot-nav a.rmg-nav-link{display:inline-flex; align-items:center; min-height:44px; padding:0}
  .rmg-foot-nav a.rmg-nav-link::after{bottom:10px}
  .rmg-foot-block a{display:flex; align-items:center; justify-content:center; min-height:44px; padding:0}
  .rmg-foot-legal-links{row-gap:0}
  .rmg-foot-legal-links a,
  .rmg-foot-legal-links .rmg-foot-cookie-btn{display:inline-flex; align-items:center; min-height:44px}
  .rmg-foot-cta{min-height:46px}
}
@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}
.enqf-tel a{color:inherit; text-decoration:none}
.enqf-tel a:hover{color:#E9C87E}
@media (max-width:767px){.enqf-tel{display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 .35em; min-height:44px}.enqf-tel a{display:inline-flex; align-items:center; min-height:44px}}
/* ============================================
   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;
  }

img.object-cover { -o-object-position: 50% 30%; object-position: 50% 30%; }

.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;
}

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

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

.bottom-0{
  bottom: 0px;
}

.bottom-2{
  bottom: 0.5rem;
}

.bottom-4{
  bottom: 1rem;
}

.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-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-\[120\]{
  z-index: 120;
}

.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-4{
  grid-column: span 4 / span 4;
}

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

.-m-3{
  margin: -0.75rem;
}

.-m-3\.5{
  margin: -0.875rem;
}

.-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-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.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-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-0{
  margin-right: 0px;
}

.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;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.aspect-\[1\/1\.414\]{
  aspect-ratio: 1/1.414;
}

.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-60{
  height: 15rem;
}

.h-64{
  height: 16rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-96{
  height: 24rem;
}

.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-\[60vh\]{
  height: 60vh;
}

.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-\[52vh\]{
  max-height: 52vh;
}

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

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

.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-full{
  max-height: 100%;
}

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

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

.min-h-11{
  min-height: 2.75rem;
}

.min-h-9{
  min-height: 2.25rem;
}

.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-\[72px\]{
  min-height: 72px;
}

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

.min-h-full{
  min-height: 100%;
}

.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-52{
  width: 13rem;
}

.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-\[150px\]{
  width: 150px;
}

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

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

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

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

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

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

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

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

.w-\[calc\(100vw-2rem\)\]{
  width: calc(100vw - 2rem);
}

.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-\[10rem\]{
  min-width: 10rem;
}

.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-\[900px\]{
  max-width: 900px;
}

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

.max-w-full{
  max-width: 100%;
}

.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-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\/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));
}

.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;
}

.cursor-zoom-in{
  cursor: zoom-in;
}

.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;
}

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

.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;
}

.auto-cols-max{
  grid-auto-columns: max-content;
}

.grid-flow-col{
  grid-auto-flow: column;
}

.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));
}

.grid-cols-\[44px_minmax\(0\2c 1fr\)_44px\]{
  grid-template-columns: 44px minmax(0,1fr) 44px;
}

.grid-cols-\[auto_1fr\]{
  grid-template-columns: auto 1fr;
}

.grid-cols-\[minmax\(0\2c 1fr\)_auto\]{
  grid-template-columns: minmax(0,1fr) auto;
}

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

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

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

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

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

.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-2{
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.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-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.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-primary\/20 > :not([hidden]) ~ :not([hidden]){
  border-color: hsl(var(--primary) / 0.2);
}

.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-\[\#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\(208\2c 165\2c 74\2c 0\.35\)\]{
  border-color: rgba(208,165,74,0.35);
}

.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-\[rgba\(255\2c 250\2c 241\2c 0\.16\)\]{
  border-color: rgba(255,250,241,0.16);
}

.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-400\/50{
  border-color: rgb(52 211 153 / 0.5);
}

.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-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\/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\/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-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-\[\#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-\[rgba\(120\2c 190\2c 130\2c 0\.16\)\]{
  background-color: rgba(120,190,130,0.16);
}

.bg-\[rgba\(255\2c 250\2c 241\2c 0\.06\)\]{
  background-color: rgba(255,250,241,0.06);
}

.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\/40{
  background-color: hsl(var(--background) / 0.4);
}

.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\/45{
  background-color: rgb(0 0 0 / 0.45);
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}

.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-card{
  background-color: hsl(var(--card));
}

.bg-card\/95{
  background-color: hsl(var(--card) / 0.95);
}

.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-400\/10{
  background-color: rgb(52 211 153 / 0.1);
}

.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-foreground\/25{
  background-color: hsl(var(--foreground) / 0.25);
}

.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-primary\/70{
  background-color: hsl(var(--primary) / 0.7);
}

.bg-primary\/\[0\.06\]{
  background-color: hsl(var(--primary) / 0.06);
}

.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-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_30\%\]{
  background-position: center 30%;
}

.fill-\[\#1a3c2a\]{
  fill: #1a3c2a;
}

.fill-current{
  fill: currentColor;
}

.fill-primary{
  fill: hsl(var(--primary));
}

.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-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;
}

.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}

.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-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\.85em\]{
  font-size: 0.85em;
}

.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;
}

.not-italic{
  font-style: normal;
}

.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\.25em\]{
  letter-spacing: 0.25em;
}

.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-\[\#9fd6a6\]{
  --tw-text-opacity: 1;
  color: rgb(159 214 166 / var(--tw-text-opacity, 1));
}

.text-\[\#D0A54A\]{
  --tw-text-opacity: 1;
  color: rgb(208 165 74 / var(--tw-text-opacity, 1));
}

.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-\[\#FFFAF1\]{
  --tw-text-opacity: 1;
  color: rgb(255 250 241 / var(--tw-text-opacity, 1));
}

.text-\[rgba\(255\2c 250\2c 241\2c 0\.7\)\]{
  color: rgba(255,250,241,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-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-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.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-foreground\/90{
  color: hsl(var(--foreground) / 0.9);
}

.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-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));
}

.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_0_4px_rgba\(208\2c 165\2c 74\2c 0\.18\)\]{
  --tw-shadow: 0 0 0 4px rgba(208,165,74,0.18);
  --tw-shadow-colored: 0 0 0 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-\[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-black\/30{
  --tw-ring-color: rgb(0 0 0 / 0.3);
}

.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{
  --tw-backdrop-blur: blur(8px);
  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);
}

.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  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);
}

.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{
  --tw-enter-scale: 0;
}

.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;
}

/* Cropped photos keep the upper third (where faces usually are) in frame.
   Utilities such as object-top / object-center still override this. */

.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\: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-\[rgba\(208\2c 165\2c 74\2c 0\.55\)\]:hover{
  border-color: rgba(208,165,74,0.55);
}

.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\:border-white\/60:hover{
  border-color: rgb(255 255 255 / 0.6);
}

.hover\:bg-\[\#1a3c2a\]\/90:hover{
  background-color: rgb(26 60 42 / 0.9);
}

.hover\:bg-\[\#D0A54A\]\/90:hover{
  background-color: rgb(208 165 74 / 0.9);
}

.hover\:bg-\[rgba\(255\2c 250\2c 241\2c 0\.12\)\]:hover{
  background-color: rgba(255,250,241,0.12);
}

.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\/20:hover{
  background-color: rgb(245 158 11 / 0.2);
}

.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-black\/65:hover{
  background-color: rgb(0 0 0 / 0.65);
}

.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-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\/20:hover{
  background-color: hsl(var(--primary) / 0.2);
}

.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-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-white\/70:focus-visible{
  --tw-ring-color: rgb(255 255 255 / 0.7);
}

.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-30:disabled{
  opacity: 0.3;
}

.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:focus-visible ~ .peer-focus-visible\: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);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-\[rgba\(208\2c 165\2c 74\2c 0\.6\)\]{
  --tw-ring-color: rgba(208,165,74,0.6);
}

.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-\[\#D0A54A\]{
  --tw-border-opacity: 1;
  border-color: rgb(208 165 74 / var(--tw-border-opacity, 1));
}

.peer[data-state="checked"] ~ .peer-data-\[state\=checked\]\:bg-\[rgba\(208\2c 165\2c 74\2c 0\.18\)\]{
  background-color: rgba(208,165,74,0.18);
}

.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-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-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-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-white\/5:hover:is(.dark *){
  background-color: rgb(255 255 255 / 0.05);
}

@media (min-width: 640px){

  .sm\:bottom-0{
    bottom: 0px;
  }

  .sm\:bottom-6{
    bottom: 1.5rem;
  }

  .sm\:left-5{
    left: 1.25rem;
  }

  .sm\:left-\[23px\]{
    left: 23px;
  }

  .sm\:right-0{
    right: 0px;
  }

  .sm\:right-5{
    right: 1.25rem;
  }

  .sm\:right-6{
    right: 1.5rem;
  }

  .sm\:top-5{
    top: 1.25rem;
  }

  .sm\:top-auto{
    top: auto;
  }

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

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

  .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-56{
    width: 14rem;
  }

  .sm\:w-6{
    width: 1.5rem;
  }

  .sm\:w-64{
    width: 16rem;
  }

  .sm\:w-72{
    width: 18rem;
  }

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

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

  .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-start{
    justify-content: flex-start;
  }

  .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-10{
    padding: 2.5rem;
  }

  .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\: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-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .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-\[1\.75rem\]{
    font-size: 1.75rem;
  }

  .sm\:text-\[10px\]{
    font-size: 10px;
  }

  .sm\:text-\[28px\]{
    font-size: 28px;
  }

  .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-80{
    width: 20rem;
  }

  .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\:flex-shrink-0{
    flex-shrink: 0;
  }

  .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-left{
    text-align: left;
  }

  .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;
  }

  .group:hover .md\:group-hover\:opacity-100{
    opacity: 1;
  }

  .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\:inline{
    display: inline;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:hidden{
    display: none;
  }

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

  .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\:justify-end{
    justify-content: flex-end;
  }

  .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: rgba(208, 165, 74, .22);
  color: var(--hub-cream); border: 1px solid rgba(208, 165, 74, .65);
  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);
}
.crm-hub .hub-cta-gold:hover { background: rgba(208, 165, 74, .34); border-color: var(--hub-gold); 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;
  /* The band is short and wide (about 4:1) over 16:9 photos, so 30% still
     clipped the tops of heads (Katie, 22 Oct). 15% keeps faces in frame. */
  width: 100%; height: 100%; -o-object-fit:cover; object-fit:cover;-o-object-position:center 15%;object-position:center 15%; 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;-o-object-position:center 30%;object-position:center 30%; 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;
  border: 1px solid var(--hub-rule-light);
  border-radius: 100px;
  padding: 4px;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.crm-hub [role="tab"] { color: rgba(255, 250, 241, .62) !important; border-radius: 100px; border: 1px solid transparent; }
.crm-hub [role="tab"]:hover { color: var(--hub-cream) !important; }
/* active tab = gold glass pill, same family as the buttons (no solid fill) */
.crm-hub [role="tab"][data-state="active"] {
  color: var(--hub-cream) !important;
  background: rgba(208, 165, 74, .2) !important;
  border-color: rgba(208, 165, 74, .6);
  box-shadow: inset 0 1px 0 rgba(255, 250, 241, .12);
}
/* underline-style tablists (transparent bg) keep gold text + rule */
.crm-hub [role="tablist"].bg-transparent { background-color: transparent !important; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.crm-hub [role="tablist"].bg-transparent [role="tab"] { border-radius: 0; border-width: 0 0 3px 0; }
.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 a.border-input,
.crm-hub button[class*="bg-secondary"],
.crm-hub a[class*="bg-secondary"] {
  border-radius: 100px;
  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, .1);
  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 a.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;
}
/* native "Choose files" button: was dark text on the dark field */
body[data-hub-theme="dark"] input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 2px 14px; border-radius: 100px; cursor: pointer;
  border: 1px solid rgba(255,250,241,.3); background: rgba(255,250,241,.1); color: #FFFAF1;
}
body[data-hub-theme="dark"] input[type="file"] { color: rgba(255,250,241,.75); }
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: #FFFAF1 !important; background: rgba(208,165,74,.2) !important; border: 1px solid rgba(208,165,74,.6); border-radius: 100px; }
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);
}

/* ============================================================
   POP-UPS = GLASS CARDS (both portals)
   ------------------------------------------------------------
   Dialogs, confirmations, menus, selects and toasts render in a
   body-level portal, outside .crm-hub. The layouts set
   body[data-hub-theme="dark"], and this gives every one of those
   surfaces the same dark-green glass card language as the Hub
   cards: ink-green field, gold hairline, gold corner bloom,
   reflective top edge, 20px radius. On phones a dialog keeps a
   16px gutter each side and scrolls inside itself.
   ============================================================ */
body[data-hub-theme="dark"] {
  --pop-surface:
    radial-gradient(120% 80% at 100% 0, rgba(208, 165, 74, .16), transparent 55%),
    radial-gradient(90% 70% at 0 100%, rgba(0, 96, 58, .34), transparent 60%),
    linear-gradient(180deg, #15241c, #0f1813);
  --pop-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 12px 32px -18px rgba(0, 22, 13, .7), inset 0 1px 0 rgba(255, 250, 241, .1);
}

/* dim + soften whatever sits behind a dialog */
body[data-hub-theme="dark"] .fixed.inset-0[class*="bg-black/"] {
  background-color: rgba(6, 14, 10, .72) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* centred dialogs + confirmations */
body[data-hub-theme="dark"] [role="dialog"][class*="left-[50%]"],
body[data-hub-theme="dark"] [role="alertdialog"] {
  background: var(--pop-surface) !important;
  border: 1px solid rgba(208, 165, 74, .34) !important;
  border-radius: 20px !important;
  box-shadow: var(--pop-shadow) !important;
  color: #FFFAF1 !important;
  font-family: 'Lato', -apple-system, system-ui, sans-serif;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
@media (max-width: 639px) {
  body[data-hub-theme="dark"] [role="dialog"][class*="left-[50%]"],
  body[data-hub-theme="dark"] [role="alertdialog"] {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 22px 18px !important;
  }
}

/* menus, selects, popovers: same surface, tighter radius */
body[data-hub-theme="dark"] [data-radix-popper-content-wrapper] > * {
  background: var(--pop-surface) !important;
  border: 1px solid rgba(208, 165, 74, .3) !important;
  border-radius: 14px !important;
  box-shadow: var(--pop-shadow) !important;
}

/* text inside confirmations (dialogs already handled above) */
body[data-hub-theme="dark"] [role="alertdialog"] h2,
body[data-hub-theme="dark"] [role="dialog"] h2 {
  color: #FFFAF1 !important;
  font-family: 'ZCOOL XiaoWei', Georgia, serif;
  font-weight: 400;
  letter-spacing: .01em;
}
body[data-hub-theme="dark"] [role="alertdialog"] .text-muted-foreground,
body[data-hub-theme="dark"] [role="dialog"] p.text-muted-foreground { color: rgba(255, 250, 241, .7) !important; }
body[data-hub-theme="dark"] [role="alertdialog"] label,
body[data-hub-theme="dark"] [role="dialog"] label { color: #FFFAF1; }
body[data-hub-theme="dark"] [role="alertdialog"] input,
body[data-hub-theme="dark"] [role="alertdialog"] textarea {
  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="dialog"] input:focus-visible,
body[data-hub-theme="dark"] [role="dialog"] textarea:focus-visible,
body[data-hub-theme="dark"] [role="alertdialog"] input:focus-visible,
body[data-hub-theme="dark"] [role="alertdialog"] textarea:focus-visible {
  border-color: #D0A54A !important;
  box-shadow: 0 0 0 3px rgba(208, 165, 74, .16) !important;
  outline: none;
}
body[data-hub-theme="dark"] [role="dialog"] ::-moz-placeholder, body[data-hub-theme="dark"] [role="alertdialog"] ::-moz-placeholder { color: rgba(255, 250, 241, .42); }
body[data-hub-theme="dark"] [role="dialog"] ::placeholder,
body[data-hub-theme="dark"] [role="alertdialog"] ::placeholder { color: rgba(255, 250, 241, .42); }

/* buttons inside pop-ups: the Hub's gold glass pill + glass secondary */
body[data-hub-theme="dark"] [role="dialog"] button.bg-primary,
body[data-hub-theme="dark"] [role="dialog"] a.bg-primary,
body[data-hub-theme="dark"] [role="alertdialog"] button.bg-primary {
  border-radius: 100px;
  background-color: rgba(208, 165, 74, .18) !important;
  border: 1px solid rgba(208, 165, 74, .6);
  color: #FFFAF1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 241, .12);
}
body[data-hub-theme="dark"] [role="dialog"] button.bg-primary:hover,
body[data-hub-theme="dark"] [role="alertdialog"] button.bg-primary:hover {
  background-color: rgba(208, 165, 74, .3) !important;
  border-color: #D0A54A;
}
body[data-hub-theme="dark"] [role="dialog"] button.border-input,
body[data-hub-theme="dark"] [role="alertdialog"] button.border-input {
  border-radius: 100px;
  background-color: rgba(255, 250, 241, .08) !important;
  border-color: rgba(255, 250, 241, .2) !important;
  color: #FFFAF1 !important;
}
body[data-hub-theme="dark"] [role="dialog"] button.border-input:hover,
body[data-hub-theme="dark"] [role="alertdialog"] button.border-input:hover {
  background-color: rgba(255, 250, 241, .16) !important;
  border-color: rgba(208, 165, 74, .45) !important;
}
/* the corner close cross */
body[data-hub-theme="dark"] [role="dialog"] > button.absolute { color: #FFFAF1; }

/* toasts */
body[data-hub-theme="dark"] [data-sonner-toast] {
  background: var(--pop-surface) !important;
  border: 1px solid rgba(208, 165, 74, .34) !important;
  border-radius: 16px !important;
  box-shadow: var(--pop-shadow) !important;
  color: #FFFAF1 !important;
  font-family: 'Lato', -apple-system, system-ui, sans-serif;
}
body[data-hub-theme="dark"] [data-sonner-toast] [data-description] { color: rgba(255, 250, 241, .7) !important; }

/* ============================================================
   NEXT STEP HERO (wedding record page) — the one thing to do,
   lifted above the rest with a stronger gold edge and bloom.
   ============================================================ */
.crm-hub .next-step-hero {
  border-color: rgba(208, 165, 74, .55) !important;
  box-shadow: 0 40px 82px -42px rgba(0, 22, 13, .72), 0 18px 44px -30px rgba(208, 165, 74, .35), inset 0 1px 0 rgba(255, 250, 241, .1);
}
.crm-hub .next-step-hero::before {
  background:
    radial-gradient(circle at 100% 0, rgba(208, 165, 74, .2), transparent 55%),
    radial-gradient(circle at 0 100%, rgba(0, 96, 58, .28), transparent 55%);
}
/* the next step's main button: the same gold GLASS pill as the rest of the
   Hub, just a touch stronger so it reads as the one action on the page */
.crm-hub .next-step-hero button.bg-primary {
  background-color: rgba(208, 165, 74, .24) !important;
  border-color: var(--hub-gold);
  padding-left: 18px; padding-right: 18px;
}
.crm-hub .next-step-hero button.bg-primary:hover { background-color: rgba(208, 165, 74, .34) !important; }

/* ============================================================
   COUPLE PORTAL ON PHONES — centred, like the public site
   ------------------------------------------------------------
   Page-level headings, intros, header actions, tabs and the photo
   banner titles centre below 768px. Card contents (lists, forms,
   tables) stay left-aligned so they read easily.
   ============================================================ */
@media (max-width: 767px) {
  .crm-hub .hub-portal .hub-page-head,
  .crm-hub .hub-portal div:has(> h1) {
    text-align: center;
  }
  .crm-hub .hub-portal .hub-page-head .eyebrow,
  .crm-hub .hub-portal div:has(> h1) > .eyebrow { justify-content: center; }
  .crm-hub .hub-portal .hub-page-head p,
  .crm-hub .hub-portal div:has(> h1) > p { margin-left: auto; margin-right: auto; }

  /* a heading row with a button beside it stacks, centred */
  .crm-hub .hub-portal .flex:has(> .hub-page-head),
  .crm-hub .hub-portal .flex:has(> div > h1) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* tabs sit centred under the heading */
  .crm-hub .hub-portal [role="tablist"] {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* photo banner titles */
  .crm-hub .hub-portal .client-hero-inner {
    right: 0;
    max-width: none;
    text-align: center;
  }
  .crm-hub .hub-portal .client-hero-inner .eyebrow { justify-content: center; }
  .crm-hub .hub-portal .client-hero-sub { margin-left: auto; margin-right: auto; }
}

/* Empty message thread: a light welcome, not a card inside the card. */
.crm-hub .msg-empty .client-empty { padding: 20px 16px; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.crm-hub .msg-empty .client-empty::before { display: none; }
.crm-hub .msg-empty .client-empty-ic { width: 48px; height: 48px; margin-bottom: 12px; }
.crm-hub .msg-empty .client-empty-ic svg { width: 21px; height: 21px; }
.crm-hub .msg-empty .client-empty-title { font-size: 22px; margin-bottom: 6px; }

/* Cards on phones centre too (Anastasia, 30 Sep 2026): headings, text,
   badges and buttons. Rows that sit side by side stack and centre.
   Lists, forms, tables and the message thread (.keep-left) stay
   left-aligned, where centred lines are hard to read or fill in. */
@media (max-width: 767px) {
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) { text-align: center; }
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .justify-between {
    flex-direction: column;
    align-items: center;
  }
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .flex-wrap,
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .justify-start,
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .justify-end { justify-content: center; }
  /* icon beside text: icon above, both centred */
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .flex:has(> svg:first-child):not(li):not(label):not(button):not(a),
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .flex:has(> .rounded-full:first-child):not(li):not(label):not(button):not(a),
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .flex:has(> .pay-node:first-child) {
    flex-direction: column;
    align-items: center;
  }
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .text-right,
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) .text-left { text-align: center; }
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) :is(ul, ol, table, form, input, textarea, select) { text-align: left; }
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) :is(ul, ol) { display: inline-block; max-width: 100%; }
  .crm-hub :is(.hub-portal, .hub-admin) :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) :is(ul, ol).grid { display: inline-grid; }
  /* section labels and small notes between cards centre as well */
  .crm-hub :is(.hub-portal, .hub-admin) .eyebrow { display: flex; justify-content: center; text-align: center; }
  .crm-hub :is(.hub-portal, .hub-admin) .keep-left .eyebrow { justify-content: flex-start; }
  .crm-hub .hub-portal > div > .flex:has(> svg:first-child),
  .crm-hub .hub-portal > div > div > .flex:has(> svg:first-child) { justify-content: center; text-align: center; }
}

/* Inspiration: a heart that's already on the board stays filled gold */
.crm-hub .insp-add.is-on { background: rgba(208, 165, 74, .3); border-color: var(--hub-gold); color: var(--hub-gold-l); }
.crm-hub .insp-add.is-on svg { fill: currentColor; }

/* Default text colour for everything in the Hub. Without it, any text with no
   colour class of its own (form labels, questions) inherited the public
   site's dark green and was invisible on the dark field. */
.crm-hub { color: var(--hub-cream); }
body[data-hub-theme="dark"] [role="dialog"],
body[data-hub-theme="dark"] [role="alertdialog"] { color: #FFFAF1; }

/* Progress bars: a faint cream track, so 0% no longer looks full */
.crm-hub [role="progressbar"] { background-color: rgba(255, 250, 241, .1) !important; }
.crm-hub [role="progressbar"] > div { background: linear-gradient(90deg, var(--hub-gold-d), var(--hub-gold-l)) !important; }

/* Inspiration moment filters: glass pills, one scrolling row on phones */
.crm-hub .insp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-hub .insp-chip {
  min-height: 40px; padding: 0 16px; border-radius: 100px; font-size: var(--fs-meta);
  color: rgba(255, 250, 241, .78); background: rgba(255, 250, 241, .06);
  border: 1px solid var(--hub-rule-light); white-space: nowrap;
  transition: background .2s var(--ease-hub), border-color .2s var(--ease-hub), color .2s var(--ease-hub);
}
.crm-hub .insp-chip:hover { color: var(--hub-cream); border-color: rgba(208, 165, 74, .45); }
.crm-hub .insp-chip.is-on { color: var(--hub-cream); background: rgba(208, 165, 74, .2); border-color: rgba(208, 165, 74, .6); }
@media (max-width: 767px) {
  .crm-hub .insp-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .crm-hub .insp-filters::-webkit-scrollbar { display: none; }
}

/* Inspiration step 1: moment cards */
.crm-hub .moment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.crm-hub .moment-card {
  position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; text-align: left;
  border: 1px solid var(--hub-glass-brd); background: #0b1a13; cursor: pointer;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.7);
  transition: transform .3s var(--ease-hub), border-color .3s var(--ease-hub);
}
.crm-hub .moment-card:hover { transform: translateY(-2px); border-color: rgba(208,165,74,.6); }
.crm-hub .moment-img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit:cover; object-fit:cover;-o-object-position:center 30%;object-position:center 30%; filter: brightness(.78); transition: transform 1.1s var(--ease-hub); }
.crm-hub .moment-card:hover .moment-img { transform: scale(1.05); }
.crm-hub .moment-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,15,12,.88) 100%); pointer-events: none; }
.crm-hub .moment-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.crm-hub .moment-name { font-family: var(--font-display-wedding); font-size: 20px; line-height: 1.15; color: var(--hub-cream); }
.crm-hub .moment-meta { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--hub-gold-l); font-weight: 700; }
.crm-hub .moment-badge { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(208,165,74,.3); border: 1px solid var(--hub-gold); color: var(--hub-gold-l); }
.crm-hub .moment-badge svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 640px) {
  .crm-hub .moment-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .crm-hub .moment-name { font-size: 17px; }
  .crm-hub .moment-foot { padding: 12px; text-align: left; }
}

/* Phones: section headings (h2/h3 with their eyebrow and intro) centre too,
   not just page titles. e.g. "Step 1 · Choose a moment" on Inspiration. */
@media (max-width: 767px) {
  .crm-hub :is(.hub-portal, .hub-admin) section > :is(h2, h3):not(.keep-left *),
  .crm-hub :is(.hub-portal, .hub-admin) div:has(> h2):not(.keep-left *),
  .crm-hub :is(.hub-portal, .hub-admin) div:has(> h3):not(.keep-left *) { text-align: center; }
  .crm-hub .hub-portal div:has(> h2) > p,
  .crm-hub .hub-portal div:has(> h3) > p { margin-left: auto; margin-right: auto; }
  .crm-hub :is(.hub-portal, .hub-admin) .flex:has(> h2):not(.keep-left *),
  .crm-hub :is(.hub-portal, .hub-admin) .flex:has(> h3):not(.keep-left *) { flex-direction: column; align-items: center; }
  /* back links ("All moments", "Contracts & payments") sit centred */
  .crm-hub .hub-portal > div > button.inline-flex:has(> svg:first-child) { display: flex; margin-left: auto; margin-right: auto; }
  /* moment card captions stay left over their photo */
  .crm-hub .hub-portal .moment-card, .crm-hub .hub-portal .insp-card { text-align: left; }
}
/* Inspiration moodboard: everything picked + uploaded, natural crops, by moment */
.crm-hub .mood-masonry { -moz-columns: 3 240px; columns: 3 240px; -moz-column-gap: 14px; column-gap: 14px; }
.crm-hub .mood-tile {
  position: relative; -moz-column-break-inside: avoid; break-inside: avoid; margin: 0 0 14px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hub-glass-brd); background: rgba(11,26,19,.6);
}
.crm-hub .mood-media { display: block; width: 100%; height: auto; }
.crm-hub .mood-link { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 13px; color: var(--hub-gold-l); word-break: break-all; }
.crm-hub .mood-note { padding: 10px 14px 12px; font-family: var(--font-display-wedding); font-size: var(--fs-body); line-height: 1.35; color: var(--hub-cream); text-align: left; }
.crm-hub .mood-remove {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(11,15,12,.55); border: 1px solid rgba(255,250,241,.35); color: var(--hub-cream);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s var(--ease-hub);
}
.crm-hub .mood-tile:hover .mood-remove, .crm-hub .mood-remove:focus-visible { opacity: 1; }
@media (hover: none) { .crm-hub .mood-remove { opacity: 1; } }
.crm-hub .mood-banner {
  display: flex; align-items: center; gap: 18px; width: 100%; padding: 14px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid rgba(208,165,74,.55); background: rgba(11,26,19,.55); backdrop-filter: blur(14px);
  transition: border-color .25s var(--ease-hub), transform .25s var(--ease-hub);
}
.crm-hub .mood-banner:hover { border-color: var(--hub-gold); transform: translateY(-1px); }
.crm-hub .mood-strip { display: flex; flex-shrink: 0; }
.crm-hub .mood-strip img { width: 54px; height: 54px; -o-object-fit: cover; object-fit: cover; border-radius: 10px; border: 2px solid #0b1a13; margin-left: -14px; }
.crm-hub .mood-strip img:first-child { margin-left: 0; }
.crm-hub .mood-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.crm-hub .mood-banner-text .eyebrow { margin: 0; }
.crm-hub .mood-banner-title { font-family: var(--font-display-wedding); font-size: 20px; color: var(--hub-cream); line-height: 1.2; }
.crm-hub .mood-banner-cta {
  flex-shrink: 0; padding: 10px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hub-cream); border: 1px solid rgba(208,165,74,.55); background: rgba(208,165,74,.16);
}
@media (max-width: 640px) {
  .crm-hub .mood-masonry { -moz-columns: 2; columns: 2; -moz-column-gap: 10px; column-gap: 10px; }
  .crm-hub .mood-tile { margin-bottom: 10px; }
  .crm-hub .mood-banner { flex-direction: column; text-align: center; gap: 12px; }
  .crm-hub .mood-banner-text { align-items: center; }
}

/* Inspiration examples without captions: no dark caption fade needed */
.crm-hub .insp-work-grid .insp-card::after { background: linear-gradient(180deg, transparent 70%, rgba(11,15,12,.45) 100%); }
.crm-hub .insp-work-grid .insp-media { filter: none; }
/* "Your Wedding Hub is open" signpost: the stronger gold edge of the next-step card */
.crm-hub .hub-signpost { border-color: rgba(208, 165, 74, .55) !important; }
/* "Signed" and other solid badges: gold glass, never a solid gold fill */
.crm-hub .hub-portal .inline-flex.rounded-full.bg-primary {
  background: rgba(208, 165, 74, .2);
  border: 1px solid rgba(208, 165, 74, .45);
  color: var(--hub-gold-l, #E0C079);
}
/* Phones: every control is a comfortable 44px tap target */
@media (max-width: 767px) {
  .crm-hub .hub-portal button:not([role="checkbox"]):not([role="switch"]):not([role="radio"]),
  .crm-hub .hub-portal a.inline-flex,
  .crm-hub .hub-portal [role="tab"],
  .crm-hub .hub-portal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .crm-hub .hub-portal select,
  .crm-hub .hub-portal [role="combobox"] { min-height: 44px; }
  .crm-hub .hub-portal [role="tablist"] { height: auto; }
}
/* Phones: form fields read left to right even without a <form> wrapper
   (Settings, Details): the label sits left over its box, as asked. */
@media (max-width: 767px) {
  .crm-hub :is(.hub-portal, .hub-admin) div:has(> label):has(> :is(input, textarea, select, button[role="combobox"], div > input, div > textarea)) { text-align: left; }
}

/* ============================================================
   ADMIN ON PHONES (Anastasia, 1 Oct 2026): the same rules as the
   couple Hub. Page titles centre, header buttons drop underneath
   instead of running off the screen, rows of buttons wrap, every
   control is a 44px tap, and solid badges are gold glass. Boards,
   lists, tables and forms stay left-aligned. Cards centre like the
   couple Hub (Anastasia, 1 Oct 2026: "should be centralised").
   ============================================================ */
.crm-hub .hub-admin .inline-flex.rounded-full.bg-primary {
  background: rgba(208, 165, 74, .2);
  border: 1px solid rgba(208, 165, 74, .45);
  color: var(--hub-gold-l);
}
@media (max-width: 767px) {
  .crm-hub .hub-admin div:has(> h1) { text-align: center; }
  .crm-hub .hub-admin div:has(> h1) > p { margin-left: auto; margin-right: auto; }
  .crm-hub .hub-admin .flex:has(> div > h1),
  .crm-hub .hub-admin .flex:has(> h1) {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  /* rows that would push buttons off the side wrap instead */
  .crm-hub .hub-admin .flex.justify-between:not(.overflow-x-auto):not([role="tablist"]):not(.flex-nowrap),
  .crm-hub .hub-admin .flex:has(> button + button):not(.overflow-x-auto):not([role="tablist"]):not(.flex-nowrap),
  .crm-hub .hub-admin .flex:has(> a.inline-flex + button, > button + a.inline-flex):not(.overflow-x-auto):not([role="tablist"]):not(.flex-nowrap) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .crm-hub .hub-admin :is(.flex:has(> div > h1), .flex:has(> h1)) > .flex { justify-content: center; }
  /* every control is a comfortable tap */
  .crm-hub .hub-admin button:not([role="checkbox"]):not([role="switch"]):not([role="radio"]),
  .crm-hub .hub-admin a.inline-flex,
  .crm-hub .hub-admin a.flex,
  .crm-hub .hub-admin [role="tab"],
  .crm-hub .hub-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .crm-hub .hub-admin select,
  .crm-hub .hub-admin [role="combobox"] { min-height: 44px; }
  .crm-hub .hub-admin [role="tablist"] { height: auto; }
}
/* Solid gold counters and "today" circles become gold glass too */
.crm-hub :is(.hub-admin, .hub-portal) .rounded-full.bg-primary.text-primary-foreground {
  background: rgba(208, 165, 74, .2);
  box-shadow: inset 0 0 0 1px rgba(208, 165, 74, .45);
  color: var(--hub-gold-l);
}
@media (max-width: 767px) {
  /* button groups that refuse to shrink (call request actions) wrap instead */
  .crm-hub .hub-admin .shrink-0.flex-wrap { flex-shrink: 1; min-width: 0; }
  /* tab rows wider than the phone scroll sideways rather than spill */
  .crm-hub .hub-admin [role="tablist"] {
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .crm-hub .hub-admin [role="tablist"]::-webkit-scrollbar { display: none; }
  /* small text links on cards (couple name, "Next: ...") get a 44px tap
     area without making the cards taller */
  .crm-hub .hub-admin a:is(.block, .font-medium):not(.inline-flex):not(.flex):not(.absolute) { position: relative; }
  .crm-hub .hub-admin a:is(.block, .font-medium):not(.inline-flex):not(.flex):not(.absolute)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
}
/* Narrow phones: two-up form fields (invoice dates) go one per row so the
   value fits inside its box */
@media (max-width: 479px) {
  .crm-hub .hub-admin .grid.grid-cols-2:has(label) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* long button labels wrap onto two lines instead of running out of the
     button (icon-only square buttons are left alone) */
  .crm-hub .hub-admin button.whitespace-nowrap:not(.w-6):not(.w-7):not(.w-8):not(.w-9):not(.w-10):not([role="tab"]):not(.shrink-0):not(:is(.overflow-x-auto, [role="tablist"]) *) { white-space: normal; height: auto; text-align: center; }
  /* admin cards: small icon + text details (date, venue, timer) stay side
     by side, centred, rather than stacking the icon on top */
  .crm-hub .hub-admin :is(.bg-card, .rounded-lg.border.shadow-sm, .rounded-xl.border):not(.keep-left) :is(span.flex, .flex.gap-1, .flex.gap-1\.5):has(> svg:first-child) {
    flex-direction: row;
    justify-content: center;
  }
  /* titles with an icon in them centre as a unit */
  .crm-hub .hub-admin :is(h1, h2, h3).flex { justify-content: center; }
  /* admin tab rows stay on one line and scroll, never wrap into a blob */
  .crm-hub .hub-admin [role="tablist"] { flex-wrap: nowrap; }
  .crm-hub .hub-admin [role="tablist"] > [role="tab"] { flex-shrink: 0; }
  /* every form field group reads left, label first (Logo + upload too) */
  .crm-hub .hub-admin div:has(> label + *) { text-align: left; }
}
/* ============================================================
   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-video video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 30%;object-position:center 30%;pointer-events:none}
.v8 .hero-poster{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 30%}
.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}
/* Up to tablet width the card fills the section, so the photo becomes a band ABOVE
   the card instead of sitting behind it: no couple's face is ever under the card. */
@media(max-width:1100px){
  .v8 section.film{display:block;min-height:0;background:#0F1512;padding-top:calc(66.7vw + 24px)}
  .v8 section.film .stage-bg{inset:0 0 auto 0;height:66.7vw;transform:none!important;background-position:center 30%}
  .v8 section.film::after{background:linear-gradient(180deg,transparent 0,transparent 52vw,#0F1512 66.7vw)}
  .v8 section.film .film-bubble{max-width:640px;margin:0 auto}
}
.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 30%;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 30%}
.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 30%;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 30%;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;-o-object-position:center 30%;object-position:center 30%;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 30%;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 30%;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;
}
/* A visitor arriving on the saved homepage sees the heading at once (it is the
   first thing a phone paints); the fade still plays when the homepage is opened
   from another page. main.tsx drops .rmg-first-load on the first page change. */
.rmg-first-load .v8 .hero-title-card .ttl-h1{opacity:1;animation:none}
.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;-o-object-position:center 30%;object-position:center 30%;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;-o-object-position:center 30%;object-position:center 30%;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)}
/* Heading above the reels, never over the photos (the gold script got lost on them). */
.v8 .sq-reels{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#0c3f28 0%,#06301d 45%,#041a12 100%)}
.v8 .sq-reels-scrim{display:none;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:relative;width:100%;height:clamp(560px,70vh,700px);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;-o-object-position:center 30%;object-position:center 30%;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:relative;order:-1;z-index:6;text-align:center;width:min(820px,90%);margin:0 auto clamp(24px,4vh,44px);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:relative;z-index:6;text-align:center;width:min(620px,88%);margin:clamp(24px,4vh,44px) auto 0;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-stage{position:relative;height:clamp(430px,64vh,560px)}
  .v8 .rf-depth{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-) ============ */
/* The day timeline bleeds full width with 100vw, which includes the scrollbar on
   desktops that show one; clip sideways overflow so the page never scrolls sideways. */
.v8{overflow-x:clip}
.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;-o-object-position:center 30%;object-position:center 30%;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:720px;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 30%;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){
  /* Mobile: a 2-column grid, not a single stacked line. Desktop (>820px) keeps
     the 8-across timeline. */
  .v8 .jrib-track{grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-auto-columns:auto;gap:30px 14px;max-width:380px}
  .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; }

/* Delivery sequence: "what you could get" note + package tag per item (15 Oct 2026) */
.v8 .dvs-note{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;color:rgba(255,250,241,.72);margin-top:16px;max-width:56ch}
.v8 .dvs-note a{display:inline-block;padding:12px 2px;margin:-12px 0;color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.v8 .dvs-note a:hover{color:var(--cream)}
.v8 .dvs-iphrase{padding-left:0}
.v8 .dvs-pkg{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:100px;
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:.06em;
  color:var(--gold-light);border:1px solid rgba(233,200,126,.4);background:rgba(233,200,126,.1)}

/* ------------------------------------------------------------------
   Fit each homepage section on one screen as you scroll (16 Oct 2026).
   Spacing, photos and cards scale with the screen height (svh).
   ------------------------------------------------------------------ */
.v8 .hero-title-card{min-height:100svh}
.v8 .hero-title-card .hero-cinema-inner{padding:clamp(96px,17svh,180px) 32px 28px}
.v8 .hero-title-card .ttl-eyebrow{margin-bottom:clamp(20px,5svh,56px)}
.v8 .hero-title-card .ttl-sub{margin:clamp(20px,5svh,56px) auto clamp(24px,6svh,64px)}
.v8 .intro-availability{padding:clamp(56px,10svh,120px) 32px clamp(64px,12svh,180px)}
.v8 .team,.v8 .day{padding-top:clamp(40px,7svh,128px);padding-bottom:clamp(40px,7svh,128px)}
.v8 .team-inner{padding:clamp(28px,5svh,64px)}
.v8 .coll{padding-top:clamp(48px,8svh,150px);padding-bottom:clamp(48px,8svh,150px)}
@media(min-width:861px){
  .v8 .team-photo{aspect-ratio:auto;height:clamp(300px,calc(100svh - 230px),640px)}
}
.v8 .final{padding-top:clamp(56px,13svh,160px);padding-bottom:clamp(56px,13svh,160px)}
/* laptop-height screens: tighten the text-heavy sections so each one fits */
@media(max-height:920px) and (min-width:861px){
  .v8 .coll-head{margin-bottom:24px}
  .v8 .coll-sub{margin-top:12px}
  .v8 .gc-body{padding:24px 28px}
  .v8 .gc-price{margin-top:10px}
  .v8 .gc-pos{margin:12px 0 2px;min-height:0}
  .v8 .gc-incl{margin-top:8px}
  .v8 .gc-incl li{padding:7px 0}
  .v8 .gc-cta{padding-top:16px}
  .v8 .dvs{padding-top:40px;padding-bottom:40px}
  .v8 .dvs-head{margin-bottom:22px}
  .v8 .dvs-sname{margin:4px 0 10px;min-height:0}
  .v8 .dvs-item{padding:8px 0}
  .v8 .dvs-pkg{margin-top:5px}
  .v8 .hubx-head{max-width:860px;margin-bottom:16px}
  .v8 .hubx-sub{max-width:74ch}
  .v8 .hubx-reel{padding-top:10px;padding-bottom:12px}
  .v8 .hubx-foot{margin-top:12px}
}

/* ------------------------------------------------------------------
   Homepage section rhythm (22 Oct 2026).
   One shared vertical spacing value for every content section so the
   gaps between sections read the same on desktop and on mobile.
   Still scales with screen height so each section keeps fitting on
   one laptop screen. Full-bleed image moments (hero, service chapters,
   final call-to-action) keep their own cinematic framing.
   ------------------------------------------------------------------ */
.v8-home{--sec-y:clamp(64px,8svh,112px);--sec-x:48px}
@media(max-width:860px){.v8-home{--sec-y:64px;--sec-x:20px}}

.v8.v8-home section.intro-availability,
.v8.v8-home section.team,
.v8.v8-home section.day,
.v8.v8-home section.couples,
.v8.v8-home section.coll,
.v8.v8-home section.insta,
.v8.v8-home section.enquire{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.v8.v8-home section.hubx{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.v8.v8-home .sq-intro.sq-intro{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.v8.v8-home .sq-reels{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.v8.v8-home section.film{padding-bottom:var(--sec-y)}
@media(min-width:1101px){.v8.v8-home section.film{padding-top:var(--sec-y)}}

/* same side gutter on every section */
.v8.v8-home section.intro-availability,
.v8.v8-home section.team,
.v8.v8-home section.couples,
.v8.v8-home section.insta,
.v8.v8-home section.enquire,
.v8.v8-home section.final{padding-left:var(--sec-x);padding-right:var(--sec-x)}
@media(max-width:860px){
  .v8.v8-home section.day,
  .v8.v8-home section.coll,
  .v8.v8-home section.film{padding-left:var(--sec-x);padding-right:var(--sec-x)}
  .v8.v8-home .sq-intro.sq-intro{padding-left:var(--sec-x);padding-right:var(--sec-x)}
  .v8.v8-home section.final{padding-top:96px;padding-bottom:96px}
}
/* keep the reviews and Wedding Hub sections fitting on one screen with the shared spacing */
@media(min-width:861px){
  .v8.v8-home .tvids .tvid-grid{--tvid-h:clamp(340px,calc(100svh - 280px - var(--sec-y)),600px)}
}
@media(min-width:641px){.v8.v8-home .hubx-card{height:clamp(340px,calc(100svh - 460px),468px)}}
/* Two cream sections meeting (day -> reviews, Instagram -> enquiry) read as one
   background, so the second one drops its top spacing: the gap stays one --sec-y
   instead of doubling. */
.v8.v8-home section.couples,
.v8.v8-home section.enquire{padding-top:0}
.v8.v8-home section.couples{align-items:flex-start;min-height:0}
/* ============================================================
   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:100vh;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 30%;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 30%;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 30%}
.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 30%;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;
  }

  /* Services sequence intro (.sq-intro): centre its copy on phones. Desktop
     keeps the two-column, left-aligned editorial layout. */
  .v8 .sq-intro-copy {
    max-width: none !important;
    text-align: center !important;
  }
  .v8 .sq-intro-copy .eyebrow {
    justify-content: center !important;
  }
  .v8 .sq-h,
  .v8 .sq-support {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* "A day with RMG" delivery section (.day): centre its heading. The vertical
     timeline below stays as-is (a structured rail, like the hub app card). */
  .v8 .day .dvs-head {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .v8 .day .dvs-head .eyebrow {
    justify-content: center !important;
  }

  /* Shared "counties we work across" band (Films + Photography) and the
     Photography two-copy intro: centre the eyebrow, heading and intro. The
     county cards and the moments list below stay structured. */
  .counties .wrap > .chapter,
  .counties .wrap > h2,
  .counties .wrap > .counties-lede,
  .two-copy > .chapter,
  .two-copy > h2,
  .two-copy > p {
    text-align: center !important;
  }
  .counties .wrap > .chapter,
  .two-copy > .chapter {
    justify-content: center !important;
  }
  /* Centre the county cards and the two-copy moments list too, so the whole
     section reads centred on a phone. */
  .cine .counties-grid a,
  .pho .counties-grid a,
  .two-copy .lines,
  .two-copy .lines li {
    text-align: center !important;
  }
  .two-copy .lines { list-style: none !important; padding-left: 0 !important; }

  /* Centre the whole counties band, so the inline eyebrow and the
     "See everywhere we cover" button sit centred, not left. */
  .counties .wrap { text-align: center !important; }

  /* Contact / enquiry form: the card already centres, but its labels and the
     submit button read left. Centre them so the form matches the section.
     Inputs keep their normal left text so typing is not centred. */
  .enqf label { text-align: center !important; }
  .enqf-submit { justify-content: center !important; }

  /* About page photo captions (under the images in the depth/behind/duo
     sections) read centred on a phone, matching those sections' headings. */
  .rw .depth figcaption,
  .rw .behind figcaption,
  .rw .duo figcaption {
    text-align: center !important;
  }

  /* Package card inclusion lists: each item is a flex row (dash + text).
     Centre the row so the list matches the centred card header and button. */
  .rw .card li {
    justify-content: center !important;
    text-align: center !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;
  }
}

/* ─────────────────────────────────────────────────────────────
   CONSISTENT MOBILE SIDE GUTTER (20px)
   Content sections use different wrappers across the site (.container on
   geo/inner/location, .wrap on Photography, Films and Real Weddings). Their
   mobile side padding had drifted (20px, 22px, 40px), so the content width
   differed page to page. Pin the .wrap systems to the 20px the .container
   systems already use, so every page's sections line up on a phone. Desktop
   (>820px) keeps each system's own wider gutter.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .rw .wrap,
  .pho .wrap,
  .cine .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}