/* ============================================================
   LUMI — Private Client Concierge
   Editorial, hairline-and-serif styling to match the rest of the
   portal's dashboard chrome (--ink/--brass/--border-soft tokens,
   Cormorant Garamond display type, uppercase letter-spaced labels,
   flat hairline rows rather than filled chat bubbles) instead of
   inventing a separate "chat app" visual language.
   ============================================================ */

/* z-index 120/121 is deliberate, not arbitrary: it sits above every
   normal dashboard element (ptr-indicator, carousel dots, etc. all
   stay under 100) but BELOW every full-screen overlay the portal
   already has — nav drawer (150/151), PDF viewer (170), Drive/photo
   picker (163), invitation editor (9990), cinematic loader (9999).
   That means Lumi is automatically covered, and its bubble stops
   intercepting taps, the instant any of those open — with no extra
   JS needed to coordinate between them. Going higher (e.g. 2000)
   made Lumi float on top of the nav drawer and PDF viewer instead,
   an unreachable/confusing stack once both were open at once. */
.cb-bubble{
  position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  width:58px; height:58px; border-radius:50%; border:1px solid var(--brass);
  cursor:pointer; background:var(--cream); padding:0; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(200,162,76,0.08);
  display:flex; align-items:center; justify-content:center;
  z-index:120; transition:transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.cb-bubble:hover{ transform:scale(1.06); box-shadow:0 12px 34px rgba(0,0,0,0.4), 0 0 0 1px rgba(200,162,76,0.18); }
.cb-bubble--hidden,
.cb-bubble--typing{ opacity:0; pointer-events:none; transform:scale(.7); }
.cb-bubble-icon{ width:84%; height:84%; margin:8%; object-fit:contain; display:block; }

.cb-panel{
  position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  width:380px; max-width:calc(100vw - 32px);
  height:min(600px, calc(100vh - 100px));
  height:min(600px, calc(100dvh - 100px));
  background:var(--ink); color:var(--cream);
  border:1px solid var(--border); border-radius:3px;
  box-shadow:0 24px 70px rgba(0,0,0,0.45);
  display:flex; flex-direction:row; overflow:hidden;
  z-index:121; isolation:isolate;
  /* Closed = visibility:hidden (plus `inert` in JS): opacity alone left
     the closed panel's buttons reachable by Tab and screen readers. */
  visibility:hidden;
  opacity:0; transform:translateY(18px) scale(.98); pointer-events:none;
  transition:opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s;
}
.cb-panel--open{
  visibility:visible; opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  transition:opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.cb-panel:focus{ outline:none; }
@media (prefers-reduced-motion: reduce){
  .cb-panel, .cb-panel--open, .cb-bubble{ transition:none; }
  /* No dots, no caret, no rise — the reply is simply there. */
  .cb-msg, .cb-after-reply{ animation:none; }
  .cb-typing-dot, .cb-type-caret{ animation:none; opacity:1; }
}
.cb-main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }

/* Same filmic grain used on the login/intro/OTP screens, at a very
   low opacity — ties this panel to the rest of the portal's texture
   instead of reading as a flat, generic widget. */
.cb-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

.cb-head{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.cb-head-avatar{
  width:42px; height:42px; object-fit:contain; flex-shrink:0;
  border:0; background:none; border-radius:0;
}
.cb-head-text{ flex:1; }
.cb-head-kicker{
  font-family:var(--font-body); font-weight:400; font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-bright); margin-bottom:6px;
}
.cb-head-name{
  font-family:var(--font-display); font-size:28px; line-height:1; color:var(--cream); letter-spacing:.3px;
}
.cb-close{
  background:none; border:none; color:var(--ivory-faint); font-size:20px; line-height:1;
  cursor:pointer; padding:4px 6px; flex-shrink:0; transition:color .2s ease;
}
.cb-close:hover{ color:var(--brass-bright); }

/* A persistent vertical rail on the panel's left edge — the first
   thing visible the instant Lumi opens, always reachable regardless
   of how deep into the menu the client has navigated (unlike a row
   under the greeting, which scrolls out of view). */
.cb-lang-rail{
  flex-shrink:0; width:40px;
  background:rgba(0,0,0,0.18); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; align-items:center;
  padding:16px 0; gap:8px;
}
.cb-lang-btn{
  background:none; border:1px solid var(--border-soft); border-radius:999px;
  color:var(--ivory-faint); font-family:var(--font-body); font-weight:500;
  font-size:10px; letter-spacing:.02em; line-height:1;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.cb-lang-btn:hover{ color:var(--cream); border-color:var(--border); }
.cb-lang-btn--active{ color:var(--brass-bright); border-color:var(--brass); background:rgba(200,162,76,0.1); }

.cb-body{
  position:relative; z-index:1; flex:1; overflow-y:auto; padding:18px 22px 24px;
  /* Scrolling to the end of an answer must not chain into the page. */
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

.cb-greeting-rule{ width:34px; height:1px; background:var(--brass); margin-bottom:16px; }
.cb-greeting{
  font-family:var(--font-body); font-weight:300; font-style:italic; font-size:13px; line-height:1.75;
  color:var(--ivory-dim); margin-bottom:22px;
}

.cb-nav-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cb-back{
  background:none; border:none; color:var(--brass-bright); font-family:var(--font-body);
  font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; padding:0; display:block;
}
.cb-back:hover{ opacity:.8; }
.cb-menu-link--inline{ padding:0; }

.cb-menu-title{
  font-family:var(--font-body); font-weight:400; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ivory-faint); margin-bottom:14px;
}

.cb-options{ display:flex; flex-direction:column; }
.cb-option{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--border-soft);
  padding:15px 2px; text-align:left; cursor:pointer;
  color:var(--cream); font-family:var(--font-body); font-weight:300; font-size:13.5px; line-height:1.4;
  transition:color .25s ease, padding-left .25s ease;
}
.cb-options .cb-option:last-child{ border-bottom:none; }
.cb-option-label{ flex:1; position:relative; z-index:1; }
.cb-option-arrow{
  color:var(--brass-bright); font-size:14px; flex-shrink:0; position:relative; z-index:1;
  opacity:0; transform:translateX(-4px); transition:opacity .25s ease, transform .25s ease;
}
.cb-option-fill{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; z-index:1;
  background:var(--brass-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cb-option:hover{ color:var(--brass-bright); padding-left:6px; }
.cb-option:hover .cb-option-arrow{ opacity:1; transform:translateX(0); }
.cb-option:hover .cb-option-fill{ transform:scaleX(1); }

.cb-answer-title{
  font-family:var(--font-display); font-size:21px; line-height:1.25; color:var(--cream);
  margin-bottom:14px; overflow-wrap:anywhere;
}
.cb-answer-text{
  font-family:var(--font-body); font-weight:300; font-size:13px; line-height:1.85; color:var(--ivory-dim);
  margin-bottom:20px;
  /* Live Registry values land in here (venue, status, event type). One
     without spaces would otherwise scroll Lumi's answer sideways. */
  overflow-wrap:anywhere;
}
.cb-answer-text strong{ color:var(--cream); font-weight:500; }
.cb-answer-actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.cb-action-btn{ width:100%; text-decoration:none; }

.cb-ask-textarea{
  width:100%; resize:vertical; min-height:88px;
  background:rgba(246,241,231,0.03); border:1px solid var(--border-soft); border-radius:3px;
  color:var(--cream); font-family:var(--font-body); font-weight:300; font-size:13px; line-height:1.6;
  padding:12px 14px; margin-bottom:14px; transition:border-color .25s ease;
}
.cb-ask-textarea::placeholder{ color:var(--ivory-faint); }
.cb-ask-textarea:focus{ outline:none; border-color:var(--brass); }
.cb-ask-textarea:disabled{ opacity:.5; }
.cb-ask-error{
  font-family:var(--font-body); font-size:12px; color:#dba48f; line-height:1.6; margin-bottom:12px;
}
.cb-ask-notice{
  font-family:var(--font-body); font-style:italic; font-size:12px; color:var(--ivory-dim);
  line-height:1.6; margin-bottom:12px; padding:10px 12px; border-left:2px solid var(--brass);
  background:rgba(200,162,76,0.05);
}
/* ── The exchange, as a conversation ──────────────────────────────
   The client's question and Lumi's reply are chat bubbles rather than
   a labelled form field and a paragraph: with her avatar beside the
   reply, it reads as someone answering, not a page re-rendering. */
.cb-msg{ display:flex; align-items:flex-end; gap:9px; margin:0 0 12px; animation:cb-rise .32s ease both; }
.cb-msg--client{ justify-content:flex-end; }
.cb-msg-avatar{
  width:28px; height:28px; flex-shrink:0; display:block;
  object-fit:contain; border:0; border-radius:0; margin-bottom:1px;
}
.cb-bubble-msg{
  max-width:84%; padding:11px 14px; font-family:var(--font-body); font-size:13px;
  line-height:1.72; overflow-wrap:anywhere;
}
.cb-msg--client .cb-bubble-msg{
  background:rgba(200,162,76,0.13); border:1px solid rgba(200,162,76,0.26);
  border-radius:14px 14px 4px 14px; color:var(--cream);
}
.cb-msg--lumi .cb-bubble-msg{
  background:rgba(246,241,231,0.045); border:1px solid var(--border-soft);
  border-radius:14px 14px 14px 4px; color:var(--cream); font-weight:300;
}
.cb-msg--lumi .cb-bubble-msg strong{ color:var(--cream); font-weight:500; }

/* Lumi composing: three dots that breathe, in the same bubble shape her
   answer will arrive in, so the reply settles in place instead of
   appearing from nowhere. */
.cb-typing-bubble{ display:inline-flex; align-items:center; gap:5px; padding:13px 16px; }
.cb-typing-dot{
  width:5px; height:5px; border-radius:50%; background:var(--brass-bright); opacity:.35;
  animation:cb-typing-dot 1.25s ease-in-out infinite;
}
.cb-typing-dot:nth-child(2){ animation-delay:.16s; }
.cb-typing-dot:nth-child(3){ animation-delay:.32s; }
@keyframes cb-typing-dot{
  0%, 60%, 100%{ opacity:.3; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}
@keyframes cb-rise{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
/* The caret that trails the words as they land. */
.cb-type-caret{
  display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-2px;
  background:var(--brass-bright); animation:cb-caret 1s steps(1) infinite;
}
@keyframes cb-caret{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
/* Whatever follows the reply (buttons, feedback) eases in after it. */
.cb-after-reply{ animation:cb-rise .34s ease both; }

.cb-answer-text--lumi{ color:var(--cream); }

.cb-ask-feedback{ margin:2px 0 16px; padding-top:13px; border-top:1px solid var(--border-soft); }
.cb-ask-did-that-help{
  font-family:var(--font-body); font-size:11.5px; color:var(--ivory-faint); margin:0 0 9px;
}
.cb-ask-feedback-row{ display:flex; flex-wrap:wrap; gap:8px; }
.cb-pill{
  background:none; border:1px solid var(--border); border-radius:999px;
  color:var(--cream); font-family:var(--font-body); font-size:12px; line-height:1.3;
  padding:8px 14px; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.cb-pill:hover{ border-color:var(--brass-bright); color:var(--brass-bright); background:rgba(200,162,76,0.06); }
.cb-pill--quiet{ align-self:flex-start; border-color:var(--border-soft); color:var(--ivory-dim); }

/* Indic scripts: letter-spacing and faux-uppercase styling break
   Bengali/Devanagari conjuncts and matras, and the 9–10px sizes used
   for Latin small-caps labels are unreadable in these scripts. */
.cb-panel:not([data-lang="en"]) .cb-head-kicker,
.cb-panel:not([data-lang="en"]) .cb-menu-title,
.cb-panel:not([data-lang="en"]) .cb-back,
.cb-panel:not([data-lang="en"]) .cb-menu-link,
.cb-panel:not([data-lang="en"]) .btn{ letter-spacing:0; text-transform:none; }
.cb-panel:not([data-lang="en"]) .cb-head-kicker{ font-size:11.5px; }
.cb-panel:not([data-lang="en"]) .cb-menu-title{ font-size:12px; }
.cb-panel:not([data-lang="en"]) .cb-back,
.cb-panel:not([data-lang="en"]) .cb-menu-link{ font-size:12.5px; }
.cb-panel:not([data-lang="en"]) .btn{ font-size:13.5px; font-weight:500; }
.cb-panel:not([data-lang="en"]) .cb-option{ font-size:14.5px; font-weight:400; }
.cb-panel:not([data-lang="en"]) .cb-answer-text{ font-size:14px; font-weight:400; }
.cb-panel:not([data-lang="en"]) .cb-bubble-msg{ font-size:14px; font-weight:400; line-height:1.8; }
.cb-panel:not([data-lang="en"]) .cb-greeting,
.cb-panel:not([data-lang="en"]) .cb-ask-notice{ font-style:normal; font-size:13.5px; }
.cb-lang-btn[data-lang="bn"], .cb-lang-btn[data-lang="hi"]{ font-size:12.5px; }

.cb-menu-link{
  background:none; border:none; color:var(--ivory-faint); font-family:var(--font-body);
  font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; padding:0; transition:color .2s ease;
}
.cb-menu-link:hover{ color:var(--brass-bright); }

.cb-menu-link--foot{ margin-top:2px; }

/* iOS Safari zooms the whole page when a field under 16px is focused,
   and stays zoomed after — keep the question box at 16px on touch. */
@media (pointer:coarse){
  .cb-ask-textarea{ font-size:16px; }
}

/* Leave room under the last piece of dashboard content so the bubble
   never sits on top of a button at the bottom of a page. */
@media (max-width:768px){
  body.cb-active #app .main{ padding-bottom:88px; }
}

@media (max-width:480px){
  .cb-bubble{ right:14px; width:52px; height:52px; }
  .cb-panel{
    right:10px; left:10px; width:auto; max-width:none;
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
    height:min(620px, calc(100vh - 72px));
    height:min(620px, calc(100dvh - 72px));
  }
  .cb-head{ padding:14px 16px; }
  .cb-body{ padding:16px 16px 22px; }
  .cb-head-name{ font-size:25px; }
}

/* ── Suggested replies ────────────────────────────────────────────
   Rounded chips under Lumi's answer, offering what clients usually
   ask next. They sit left-aligned beneath her bubble, so they read as
   her suggestions rather than the client's own words. */
.cb-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px 35px; }
.cb-chip{
  font-family:var(--font-body); font-size:12px; line-height:1.45;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  background:rgba(200,162,76,0.08); border:1px solid rgba(200,162,76,0.32);
  color:var(--cream); text-align:left; max-width:100%; overflow-wrap:anywhere;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.cb-chip:hover{ background:rgba(200,162,76,0.17); border-color:rgba(200,162,76,0.5); }
.cb-chip:active{ transform:scale(.97); }
.cb-chip:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .cb-chip{ transition:none; }
  .cb-chip:active{ transform:none; }
}
@media (max-width:420px){
  .cb-chips{ margin-left:0; }
  .cb-chip{ font-size:12.5px; padding:8px 13px; }
}

/* ── The composer ─────────────────────────────────────────────────
   Always at the foot of the thread, so Lumi is somewhere you can type
   at any moment rather than a screen you navigate to. */
.cb-composer{
  display:flex; align-items:flex-end; gap:8px; margin:14px 0 4px;
  padding-top:12px; border-top:1px solid var(--border-soft);
}
/* min-width:0 or the textarea refuses to shrink below its intrinsic
   width and the button takes the row. */
.cb-composer .cb-ask-textarea{ flex:1 1 auto; min-width:0; margin:0; min-height:46px; }
.cb-composer .cb-send{
  flex:0 0 auto; white-space:nowrap; min-width:0; width:auto;
  padding:12px 18px; font-size:12px;
}
@media (max-width:420px){
  .cb-composer{ gap:6px; }
  .cb-composer .cb-send{ padding-left:14px; padding-right:14px; }
}

/* Quiet, always present under the composer: Lumi answers from the
   studio's own material, but she can still be wrong. */
.cb-disclaimer{
  font-family:var(--font-body); font-size:10.5px; line-height:1.5;
  color:var(--cream); opacity:.45; text-align:center;
  margin:8px 0 2px; overflow-wrap:anywhere;
}

/* ── Lumi's hello ─────────────────────────────────────────────────
   She arrives in the middle of the portal, says her piece, and flies
   back into her bubble in the corner. A full-screen stage does the
   centring; the card inside carries the motion, so the scale and the
   journey home never fight the centring transform. */
.cb-intro-stage{
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  padding:24px; pointer-events:none;
}
.cb-intro-veil{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(8,12,22,.72) 0%, rgba(8,12,22,.52) 55%, rgba(8,12,22,.28) 100%);
  opacity:0; transition:opacity .5s ease;
}
.cb-intro--in .cb-intro-veil{ opacity:1; }
.cb-intro--out .cb-intro-veil{ opacity:0; }

.cb-intro-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:18px; text-align:center; max-width:min(440px, 100%);
  /* Starts small, down in the bubble's corner, and returns there. */
  transform:translate(34vw, 36vh) scale(.14); opacity:0;
  transition:transform .62s cubic-bezier(.22,1.05,.34,1), opacity .42s ease;
}
.cb-intro--in .cb-intro-card{ transform:translate(0,0) scale(1); opacity:1; }
.cb-intro--out .cb-intro-card{ transform:translate(34vw, 36vh) scale(.14); opacity:0; }

.cb-intro-avatar{
  width:150px; height:150px; display:block; object-fit:contain;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.55));
}
.cb-intro-bubble{
  background:var(--ink-deep, #101a2e); color:var(--cream);
  border:1px solid rgba(200,162,76,.42); border-radius:18px;
  padding:17px 22px; font-family:var(--font-body); font-size:16px;
  line-height:1.62; box-shadow:0 22px 54px rgba(0,0,0,.5);
  overflow-wrap:anywhere;
}
.cb-intro-caret{
  display:inline-block; width:2px; height:1em; margin-left:3px;
  background:var(--brass-bright); vertical-align:-2px;
  animation:cb-intro-caret .9s step-end infinite;
}
.cb-intro--still .cb-intro-caret{ display:none; }
@keyframes cb-intro-caret{ 0%,100%{opacity:1;} 50%{opacity:0;} }

@media (prefers-reduced-motion: reduce){
  .cb-intro-card{ transition:opacity .25s ease; transform:none; }
  .cb-intro--in .cb-intro-card{ transform:none; }
  .cb-intro--out .cb-intro-card{ transform:none; }
  .cb-intro-caret{ animation:none; }
}
@media (max-width:420px){
  .cb-intro-stage{ padding:18px; }
  .cb-intro-avatar{ width:118px; height:118px; }
  .cb-intro-bubble{ font-size:15px; padding:15px 18px; }
  .cb-intro-card{ transform:translate(30vw, 34vh) scale(.14); gap:14px; }
  .cb-intro--out .cb-intro-card{ transform:translate(30vw, 34vh) scale(.14); }
}

/* ── The composer ─────────────────────────────────────────────────
   Always at the foot of the thread, so Lumi is somewhere you can type
   at any moment rather than a screen you navigate to. */
.cb-composer{
  display:flex; align-items:flex-end; gap:8px; margin:14px 0 4px;
  padding-top:12px; border-top:1px solid var(--border-soft);
}
/* min-width:0 or the textarea refuses to shrink below its intrinsic
   width and the button takes the row. */
.cb-composer .cb-ask-textarea{ flex:1 1 auto; min-width:0; margin:0; min-height:46px; }
.cb-composer .cb-send{
  flex:0 0 auto; white-space:nowrap; min-width:0; width:auto;
  padding:12px 18px; font-size:12px;
}
@media (max-width:420px){
  .cb-composer{ gap:6px; }
  .cb-composer .cb-send{ padding-left:14px; padding-right:14px; }
}

/* Quiet, always present under the composer: Lumi answers from the
   studio's own material, but she can still be wrong. */
.cb-disclaimer{
  font-family:var(--font-body); font-size:10.5px; line-height:1.5;
  color:var(--cream); opacity:.45; text-align:center;
  margin:8px 0 2px; overflow-wrap:anywhere;
}


/* Offered on the greeting card when the browser refused to start the
   voice by itself — one tap and Lumi speaks. */
.cb-intro-hear{
  margin-top:2px; padding:10px 18px; border-radius:999px; cursor:pointer;
  font-family:var(--font-body); font-size:13px; letter-spacing:.02em;
  background:rgba(200,162,76,.16); border:1px solid rgba(200,162,76,.5);
  color:var(--cream); pointer-events:auto;
  transition:background .2s ease, transform .2s ease;
}
.cb-intro-hear:hover{ background:rgba(200,162,76,.28); }
.cb-intro-hear:active{ transform:scale(.97); }
.cb-intro-hear:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .cb-intro-hear{ transition:none; } .cb-intro-hear:active{ transform:none; } }

/* ── Festival greeting ──
   The festive film in a portrait card with a fine brass edge. Unlike the
   usual hello, this card takes taps (close, sound, tap-outside). */
.cb-fest{ pointer-events:auto; touch-action:none; overscroll-behavior:contain; }
.cb-fest .cb-intro-veil{ cursor:pointer; background:rgba(6,9,18,.78); }
.cb-fest-card{ max-width:none; }
.cb-fest-frame{
  position:relative; aspect-ratio:9/16;
  height:min(78vh, 680px, calc((100vw - 40px) * 16 / 9));
  border-radius:22px; overflow:hidden; background:#1a0d0a;
  border:1px solid rgba(200,162,76,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 6px rgba(200,162,76,.08);
}
.cb-fest-video{ display:block; width:100%; height:100%; object-fit:cover; background:#1a0d0a; }
.cb-fest-close{
  position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  font:300 26px/1 var(--font-body); color:#fff;
  background:rgba(10,10,16,.45); border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cb-fest-close:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; }
.cb-fest-sound{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  white-space:nowrap; margin:0; padding:12px 22px; font-size:14px;
  background:rgba(14,10,8,.72); border-color:rgba(232,200,120,.75);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.cb-fest-sound:hover{ background:rgba(14,10,8,.85); }
.cb-fest-sound:active{ transform:translateX(-50%) scale(.97); }
@media (prefers-reduced-motion: reduce){ .cb-fest-sound:active{ transform:translateX(-50%); } }