/*
Theme Name: Bravin Entertainment
Theme URI: https://bebravin.com
Author: Bravin Entertainment
Description: Custom audience-first theme for Bravin Entertainment. Three booking modes (Corporate, Parties, Ceremonies) sharing one spine: nav, footer, type, palette.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bravin
*/

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   PALETTE + TYPE (design system tokens)
   ========================================================================== */
:root {
  --be-black: #000000;
  --be-white: #ffffff;
  --be-blue: #373EF0;
  --be-magenta: #EC00FF;
  --be-lime: #ABFF00;

  --be-blue-soft: #7d84ff;

  --be-bg-dark: #070707;
  --be-bg-corporate: #050506;
  --be-bg-ceremonies: #f2f1ee;
}

.display {
  font-family: 'Big Shoulders Display', sans-serif;
  text-transform: uppercase;
}
.body-font {
  font-family: 'Manrope', system-ui, sans-serif;
}

/* ==========================================================================
   SPINE: NAV
   ========================================================================== */
.be-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 56px;
  z-index: 20;
  /* The nav is rendered as a sibling before each page's own dark-background
     wrapper (not inside it), so without its own background it sits on the
     plain white body background instead of the dark backdrop the mockups
     assume — which made the white hamburger icon invisible on mobile on
     every page except Ceremonies (light variant, dark icon by design). */
  background: var(--be-bg-dark);
  /* Round 5, Part B item 1: same root cause, the text-color half of it. The
     mockups give inactive nav links color:inherit, assuming the nav sits
     inside the page's own white/black text-color wrapper -- since it
     actually renders as a sibling before that wrapper, it was falling back
     to the browser default (black), invisible against this dark background.
     Setting it explicitly here, the same way the background above was
     patched, is the targeted fix; the real structural fix (rendering the nav
     inside each page's wrapper so it inherits color the way the mockups
     assume) is a bigger change than this round's scope. */
  color: #ffffff;
}
.be-nav__wordmark {
  font-family: 'Big Shoulders Display', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
}
.be-nav__wordmark span { opacity: 0.55; font-weight: 400; }
.be-nav__links {
  display: flex;
  gap: 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.be-nav__links a { transition: color 0.15s ease; }
.be-nav__toggle {
  display: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  align-items: center; justify-content: center;
  border: none;
}
.be-nav__toggle svg { pointer-events: none; }

/* light-mode nav (Ceremonies) */
.be-nav--light { background: transparent; color: #000000; }
.be-nav--light .be-nav__toggle { background: rgba(0,0,0,0.05); }

@media (max-width: 780px) {
  .be-nav { padding: 22px 24px; }
  .be-nav__wordmark { font-size: 17px; }
  .be-nav__wordmark span { display: none; }
  .be-nav__links { display: none; }
  .be-nav__toggle { display: flex; }
}

/* mobile full-screen nav drawer */
.be-nav-drawer {
  position: fixed; inset: 0; z-index: 100;
  background: #070707; color: #fff;
  display: none;
  flex-direction: column;
  padding: 22px 24px;
}
.be-nav-drawer.is-open { display: flex; }
.be-nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.be-nav-drawer__links { display: flex; flex-direction: column; gap: 26px; }
.be-nav-drawer__links a {
  font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase;
  font-size: 32px; font-weight: 700;
}

/* ==========================================================================
   SPINE: FOOTER (round 3: full four-group footer, replaces the old thin row)
   ========================================================================== */
/* Round 15: same root cause as the nav fix above -- the footer renders as a
   sibling AFTER each page's own colored wrapper div closes (see
   bravin_render_footer() in functions.php), not inside it, so without its
   own background it was sitting directly on the unstyled body (default
   white) instead of the dark backdrop every page but Ceremonies uses. The
   footer's own text colors (light grays) were always designed assuming a
   dark background, so only the background itself was missing. */
.be-footer { position: relative; background: var(--be-bg-dark); border-top: 1px solid rgba(255,255,255,0.12); padding: 48px 56px 28px; }
.be-footer__groups { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 32px; }
.be-footer__group { display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: #a8a8a8; }
.be-footer__group--based { max-width: 220px; }
/* Round 4: desktop Menu group shows 3 sub-columns side by side under the one
   MENU label, instead of one 7-link vertical stack. .be-footer__group--menu
   stays a column (label on top); .be-footer__menu-cols is the row of 3
   sub-columns, each keeping the original column/gap look. The mobile media
   query below turns both wrapper levels into display:contents so the
   existing single flowing row of links (untouched, per the handoff doc)
   still works exactly as before, directly inside .be-footer__group--menu. */
/* Round 5: gap between the 3 sub-columns was too wide; tightened (14px, 12px
   on the light Ceremonies footer, matching that template's slightly tighter
   spacing elsewhere). */
.be-footer__menu-cols { display: flex; flex-direction: row; gap: 14px; }
.be-footer__menu-col { display: flex; flex-direction: column; gap: 9px; }
/* Rounds 8-13: mobile's Menu group needs a different grouping (4 links / 3
   links) than desktop's 3/3/1 columns, so it isn't just desktop's markup
   reflowed -- it's its own explicit two-row markup, hidden on desktop and
   shown (in place of .be-footer__menu-cols) below 780px. */
.be-footer__menu-rows { display: none; }
.be-footer__label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #6a6a6a; margin-bottom: 4px; }
.be-footer__group a { opacity: 0.85; font-family: 'Manrope', sans-serif; }
.be-footer__group--menu a { opacity: 1; font-family: inherit; }
.be-footer__group--touch a, .be-footer__group--follow a { font-family: monospace; }
/* Round 5: every footer link (Menu/Get In Touch/Follow/Privacy Policy, not
   the plain-text Based In address) now hovers to Bravin Blue via this one
   shared rule, replacing the old per-page lime/magenta hover colors below. */
.footer-link:hover { color: var(--be-blue); opacity: 1; }
.be-footer__address { font-family: monospace; opacity: 0.85; line-height: 1.55; }
.be-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: #8a8a8a; }

.be-footer--light { background: var(--be-bg-ceremonies); border-top: 2px solid #111111; }
.be-footer--light .be-footer__group { color: #4a4a4a; }
.be-footer--light .be-footer__label { color: #9a9a9a; }
.be-footer--light .be-footer__menu-cols { gap: 12px; }
.be-footer--light .be-footer__bottom { border-top-color: rgba(0,0,0,0.12); color: #9a9a9a; }

@media (max-width: 780px) {
  .be-footer { padding: 30px 24px 24px; }
  .be-footer__groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    padding-bottom: 0;
  }
  .be-footer__group--menu {
    grid-column: 1 / -1;
    padding-bottom: 22px;
  }
  .be-footer__group--menu .be-footer__label { display: none; }
  .be-footer__group--menu a { padding: 6px 0; display: inline-block; }
  /* Rounds 8-13: mobile shows the explicit two-row markup instead of
     reflowing the desktop 3-column markup (the groupings differ: 4/3 on
     mobile vs 3/3/1 on desktop). */
  .be-footer__menu-cols { display: none; }
  .be-footer__menu-rows { display: flex; flex-direction: column; gap: 6px; }
  /* "Forced into exactly two lines regardless of viewport width" -- each row
     stays a single line (flex-wrap: nowrap) even on the narrowest phones;
     an individual link's own label can still wrap within its own slot
     (flex:1 1 0 + text-align:center) rather than pushing the row onto a
     third line. */
  .be-footer__menu-row { display: flex; flex-wrap: nowrap; gap: 8px; }
  .be-footer__menu-row a { flex: 1 1 0; min-width: 0; text-align: center; white-space: normal; padding: 6px 0; }
  /* Round 5: min-width:0 lets these grid columns shrink below their
     unbreakable child's natural width (Grid columns default to min-width:auto,
     so @clovisbackyard101's one unbreakable 18-character string was forcing
     the whole grid wider than the viewport on narrower mobile layouts --
     Ceremonies' nested invitation-card frame made it visible there first, but
     the same structure exists on every mobile footer). overflow-wrap is a
     backstop on the handles themselves. */
  .be-footer__group--touch, .be-footer__group--follow { min-width: 0; }
  .be-footer__group--follow a { overflow-wrap: break-word; }
  .be-footer__group--touch { grid-column: 1; grid-row: 2; }
  .be-footer__group--follow { grid-column: 2; grid-row: 2; }
  .be-footer__group--based { grid-column: 2; grid-row: 3; max-width: none; }
  /* Explicit rather than relying on inheritance, since a generic centered
     paragraph/widget default elsewhere could otherwise pull this off-left. */
  .be-footer__address { text-align: left; }
  .be-footer__bottom { padding-top: 14px; margin-top: 18px; }
  /* Round 6: Ceremonies' mobile footer specifically -- its nested
     invitation-card frame leaves less width than the other 5 mobile
     templates (same root cause as the social-handle overflow fix above), so
     Get In Touch / Follow / Based In go from the shared 2-column grid to a
     single stacked column here, in that order. Other templates keep the
     2-column layout above. */
  .be-footer--light .be-footer__group--touch { grid-column: 1 / -1; grid-row: 2; }
  .be-footer--light .be-footer__group--follow { grid-column: 1 / -1; grid-row: 3; }
  .be-footer--light .be-footer__group--based { grid-column: 1 / -1; grid-row: 4; max-width: none; }
}

/* ==========================================================================
   BUTTONS (CTA-boldness progression: filled pill -> outlined pill -> bare link)
   ========================================================================== */
.be-btn {
  display: inline-flex;
  align-items: center;
  /* Round 17: justify-content/text-align only matter once something forces
     the button wider than its content (e.g. Weekly Schedule's mobile query
     stretches it to the full container width) -- without them the label
     sits flush left in that extra space instead of centered in the pill. */
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 36px;
  border-radius: 100px;
  border: none;
  text-align: center;
}
.be-btn--parties {
  background: var(--be-magenta);
  border: 3px solid var(--be-lime);
  color: #000000;
}
.be-btn--corporate {
  background: transparent;
  border: 2px solid var(--be-blue);
  color: #ffffff;
  font-weight: 600;
}
.be-btn--ceremonies {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--be-magenta);
  border-radius: 0;
  padding: 0 0 4px;
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* ==========================================================================
   PLACEHOLDER MEDIA BOX (until real photo/video is dropped in)
   ========================================================================== */
.be-media-placeholder {
  border: 1px dashed rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.be-media-placeholder__label {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 10px;
}
.be-media-placeholder__note {
  font-size: 12px;
  color: #a8a8a8;
  font-family: monospace;
}

/* ==========================================================================
   HOME
   ========================================================================== */
.be-home {
  background: var(--be-bg-dark);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.be-home__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.be-home__glow--lime { top: -200px; left: -180px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(171,255,0,0.14) 0%, rgba(171,255,0,0) 70%); }
.be-home__glow--blue { top: -160px; right: -200px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(55,62,240,0.20) 0%, rgba(55,62,240,0) 70%); }
.be-home__glow--magenta { bottom: -260px; left: 35%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(236,0,255,0.14) 0%, rgba(236,0,255,0) 70%); }

.be-home__hero { position: relative; text-align: center; padding: 76px 56px 72px; }
.be-home__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #9a9a9a; margin-bottom: 22px; }
.be-home__headline {
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  font-weight: 900;
  margin: 0 auto 26px;
  max-width: 1000px;
}
.be-home__sub { font-size: 19px; line-height: 1.6; color: #cfcfcf; max-width: 600px; margin: 0 auto 30px; font-weight: 400; }
.be-home__schedule-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #ffffff; border-bottom: 2px solid var(--be-magenta); padding-bottom: 4px;
}

.be-doorways { position: relative; display: flex; gap: 28px; padding: 0 56px 64px; flex-wrap: wrap; }
.be-doorway {
  flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; position: relative;
}
.be-doorway__media { height: 190px; position: relative; overflow: hidden; }
/* Round 7/8-13: real photos replace the dashed placeholders. object-fit:cover
   fills the fixed-height media box edge to edge (the card's own border-radius
   already frames it, no edge fade needed); each mode's old placeholder-box
   gradient moves to an ::after overlay on top of the photo instead, so the
   brand color tint is preserved as a treatment over the real image rather
   than being hidden underneath it. object-position is set per mode below to
   match the Round 8-13 framing guidance (Corporate: shifted down so the room
   and stage stay in frame past the ceiling; Parties: biased toward the full
   mixer/turntable setup rather than the hand; Ceremonies: biased toward the
   top so the string-lights strand across the top of the frame stays fully
   visible). */
.be-doorway__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.be-doorway__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.be-doorway__body { padding: 30px 32px 34px; flex: 1 1 auto; display: flex; flex-direction: column; }
.be-doorway__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 14px; }
.be-doorway__title { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; line-height: 1.12; }
.be-doorway__text { font-size: 15px; line-height: 1.55; margin: 0; }
.be-doorway__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; padding: 12px 24px; border-radius: 100px;
}
/* Round 5: Round 4's margin-top:auto pin got the button roughly to the
   bottom, but Q wanted precision -- an imaginary line through the middle of
   the headline, one through the subtext, one through the buttons, level
   across all three cards. Each row gets a fixed height and centers its own
   content, so the row's vertical center lands at the same Y regardless of
   how many lines any one card's copy wraps to. Desktop only -- the mobile
   override below lets these go back to content-driven height. */
/* Rounds 8-13: switched from a hard height to min-height. A hard height kept
   the cross-card alignment but clipped/overflowed if copy wrapped to more
   lines than expected at an in-between screen width (surfaced while
   unifying these rows with Weekly Schedule's cards below); min-height keeps
   the same baseline row height -- and the same aligned centerline across
   cards when content fits -- while letting a row grow instead of colliding
   with its neighbor when it doesn't. */
.be-doorway__row { display: flex; align-items: center; }
.be-doorway__row--title { min-height: 100px; }
.be-doorway__row--subtext { min-height: 64px; }
.be-doorway__row--cta { min-height: 52px; }

.be-doorway--corporate {
  background: #0a0a0c;
  /* Round 5: was barely-visible rgba(55,62,240,0.3); brightened to a clear
     neon blue with a soft matching glow so it doesn't read weaker than the
     Ceremonies card's solid white next to it. */
  border: 1px solid #4D5FFF; box-shadow: 0 0 24px rgba(77,95,255,0.30);
}
.be-doorway--corporate .be-doorway__media::after { background: linear-gradient(120deg, rgba(55,62,240,0.30), rgba(0,0,0,0.28) 65%); }
.be-doorway--corporate .be-doorway__photo { object-position: center 65%; }
.be-doorway--corporate .be-doorway__eyebrow { color: var(--be-blue-soft); }
.be-doorway--corporate .be-doorway__title { font-size: 26px; font-weight: 600; }
.be-doorway--corporate .be-doorway__title span { color: var(--be-blue-soft); }
.be-doorway--corporate .be-doorway__text { color: #bdbdbd; }
.be-doorway--corporate .be-doorway__cta { background: transparent; border: 2px solid var(--be-blue-soft); color: #ffffff; }

.be-doorway--parties {
  background: #0c0c0c;
  /* Round 5: was barely-visible rgba(255,255,255,0.1); switched to the site's
     existing lime accent at full opacity with a matching glow, same reasoning
     as Corporate above. */
  border: 1px solid var(--be-lime); box-shadow: 0 0 24px rgba(171,255,0,0.30);
}
.be-doorway--parties .be-doorway__media::after { background: linear-gradient(150deg, rgba(236,0,255,0.24), rgba(0,0,0,0.22) 60%, rgba(171,255,0,0.16)); }
.be-doorway--parties .be-doorway__photo { object-position: center 60%; }
.be-doorway--parties .be-doorway__eyebrow { color: var(--be-lime); }
.be-doorway--parties .be-doorway__title { font-size: 30px; font-weight: 900; line-height: 1.02; }
.be-doorway--parties .be-doorway__title .lime { color: var(--be-lime); }
.be-doorway--parties .be-doorway__title .magenta { color: var(--be-magenta); }
.be-doorway--parties .be-doorway__text { color: #bdbdbd; }
.be-doorway--parties .be-doorway__cta { background: var(--be-magenta); border: 3px solid var(--be-lime); color: #000000; font-weight: 700; padding: 13px 26px; }

.be-doorway--ceremonies { background: #ffffff; color: #000000; }
.be-doorway--ceremonies .be-doorway__media { border-bottom: 1px solid #ececec; }
.be-doorway--ceremonies .be-doorway__photo { object-position: center 15%; }
.be-doorway--ceremonies .be-doorway__eyebrow { color: #9a9a9a; }
.be-doorway--ceremonies .be-doorway__title { font-size: 26px; font-weight: 300; line-height: 1.2; }
.be-doorway--ceremonies .be-doorway__title span { border-bottom: 2px solid var(--be-magenta); }
.be-doorway--ceremonies .be-doorway__text { color: #5a5a5a; }
.be-doorway--ceremonies .be-doorway__cta { font-weight: 700; letter-spacing: 0.5px; border-bottom: 2px solid var(--be-magenta); padding-bottom: 4px; }

.be-home__trust { position: relative; text-align: center; padding: 8px 56px 80px; font-size: 14px; color: #8a8a8a; letter-spacing: 0.3px; }

@media (max-width: 780px) {
  .be-home__hero { padding: 20px 24px 36px; }
  .be-home__headline { font-size: 34px; }
  .be-home__sub { font-size: 15px; }
  .be-doorways { flex-direction: column; padding: 0 24px 40px; gap: 20px; }
  /* .be-doorway's `flex: 1 1 320px` sets a 320px flex-basis for the desktop
     ROW layout's width. Once .be-doorways switches to a COLUMN direction on
     mobile, that same basis applies to height instead, capping every card
     at 320px tall and clipping the title/text/button underneath via the
     card's own overflow:hidden (needed for border-radius). Reset it here
     so card height goes back to being content-driven. */
  /* Round 6 Part B item 1: .be-doorway's base rule (desktop row layout) sets
     min-width:280px and was never reset here -- on a ~320-360px phone that
     min-width alone forces the card (and this section's overflow:hidden
     clips the excess instead of showing a scrollbar) wider than the
     viewport, clipping its right edge. Weekly Schedule's own cards render
     fine at the same widths because its min-width is 250px, not 280px. */
  .be-doorway { flex: none; min-width: 0; }
  /* The precise fixed-height row alignment above is a desktop-only ask (Q's
     "line through the middle" spec assumed a 3-across row); on mobile's
     stacked single column there's no cross-card alignment to preserve, so
     let each row go back to content-driven height instead of risking clipped
     text at narrow widths. */
  .be-doorway__row--title,
  .be-doorway__row--subtext,
  .be-doorway__row--cta { height: auto; }
  .be-doorway__row--title .be-doorway__title { margin-bottom: 6px; }
  .be-doorway__row--subtext .be-doorway__text { margin-bottom: 6px; }
}

/* ==========================================================================
   CONTACT FALLBACK PAGE (/contact/ — thin, crawlable, no-JS safe)
   ========================================================================== */
.be-contact-page {
  background: var(--be-bg-dark);
  color: #ffffff;
  min-height: 60vh;
  padding: 80px 56px 100px;
}
.be-contact-page__inner { max-width: 640px; margin: 0 auto; }
/* The form card on this fallback page reuses the pop-up's --corporate skin
   class directly (not the base .be-modal-card, and not inside
   .be-modal-overlay's flex centering that centers the real pop-ups) -- so on
   its own it's just a block-level box with a max-width and no horizontal
   centering of its own, sitting flush left inside .be-contact-page__inner.
   Bug D: give it the centering .be-modal-card normally gets from its parent. */
.be-contact-page .be-modal-card--corporate { margin: 0 auto; }
.be-contact-page__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #9a9a9a; margin-bottom: 18px; }
.be-contact-page__title {
  font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase;
  font-size: clamp(32px,4vw,52px); font-weight: 800; margin: 0 0 20px;
}
.be-contact-page__sub { font-size: 17px; line-height: 1.6; color: #cfcfcf; margin: 0 0 40px; }
/* Round 5, Part B item 3: round 4 centered the form itself; the eyebrow,
   headline, and subtext above it were still left-aligned, which now looks
   inconsistent against a centered form below. Center the heading block to
   match. */
.be-contact-page__eyebrow, .be-contact-page__title, .be-contact-page__sub { text-align: center; }

@media (max-width: 780px) {
  /* The 56px page padding + the form card's own 32px inline padding + the
     Kadence form wrapper's own 16px padding all stack up (each doubled for
     both sides), which leaves almost no width for the actual fields at
     mobile widths (measured ~97px on a 320px-wide device). Shrinking the
     two paddings we control here is enough on its own to fix it. */
  .be-contact-page { padding: 48px 24px 64px; }
  .be-contact-page .be-modal-card--corporate { padding: 22px 18px 20px !important; }
  .be-contact-page__title { margin: 0 0 14px; }
  .be-contact-page__sub { margin: 0 0 28px; }
}

/* ==========================================================================
   CONTACT MODAL (shared shell, per-mode skins below)
   ========================================================================== */
.be-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(5,5,5,0.82);
  backdrop-filter: blur(6px);
}
.be-modal-overlay.is-open { display: flex; }
.be-modal-card {
  position: relative; width: 100%; max-width: 460px;
  padding: 40px 40px 34px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.be-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: none; display: flex; align-items: center; justify-content: center;
}
.be-modal-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-bottom: 14px; }
.be-modal-title { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; margin-bottom: 10px; }
.be-modal-text { font-size: 14px; line-height: 1.5; margin: 0; }

/* Round 3: Corporate/Parties pop-ups get a labeled becorp.png/beparty.png logo
   next to the copy; Ceremonies' pop-up gets the same B*E monogram used on the
   Ceremonies page, fixed to a real circle (not stretched into an oval by the
   row's flex layout) and using the same letter-spacing text-centering fix. */
.be-modal-head { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.be-modal-head__text { flex: 1 1 auto; min-width: 0; }
.be-modal-head__text .be-modal-text { margin: 0; }
.be-modal-logo { height: 100%; width: auto; max-width: 100px; object-fit: contain; flex-shrink: 0; }
.be-modal-monogram { width: 104px; height: 104px; border: 2px solid #000000; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; }
.be-modal-monogram span { font-family: 'Big Shoulders Display', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 2.5px; margin-right: -2.5px; white-space: nowrap; }

/* Round 5, Part B item 2: a dark-navy block behind the fields that no mockup
   shows -- almost certainly the Kadence Advanced Form block's own saved
   container background (the block wrapper div sits OUTSIDE the <form>
   .kb-advanced-form we already neutralize below, so it needed its own
   override). Rather than fight it into invisibility, recolor it to disappear
   into each modal's own card background instead: black on the dark
   Contact/Corporate/Parties cards, white on the light Ceremonies card. */
/* Round 6: "disappear entirely" means matching each context's own actual
   background exactly, not a generic black -- Corporate's modal card is
   #0a0a0d, Parties' is #0c0c0c, Ceremonies' is #ffffff, and the standalone
   /contact/ fallback page is var(--be-bg-dark); a flat #000000 for all three
   dark contexts was visibly a shade off from each one's real card color. */
.be-modal-form--corporate .wp-block-kadence-advanced-form { background: #0a0a0d !important; }
.be-modal-form--parties .wp-block-kadence-advanced-form { background: #0c0c0c !important; }
.be-modal-form--ceremonies .wp-block-kadence-advanced-form { background: #ffffff !important; }
.be-contact-page .wp-block-kadence-advanced-form { background: var(--be-bg-dark) !important; }
.be-modal-form .kb-advanced-form,
.be-modal-form form.kb-advanced-form { position: static !important; height: auto !important; background: transparent !important; padding: 0 !important; }
.be-modal-form .kt-row-column-wrap { position: static !important; display: contents !important; }
.be-modal-form .kb-adv-form-field { margin-bottom: 16px; }
.be-modal-form label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 7px; font-family: 'Manrope', sans-serif;
}
.be-modal-form input[type="text"],
.be-modal-form input[type="email"],
.be-modal-form select,
.be-modal-form textarea {
  width: 100%; border-radius: 8px; padding: 12px 14px;
  font-family: 'Manrope', sans-serif; font-size: 14px;
}
.be-modal-form .kb-adv-form-required { display: none !important; }
/* trimmed fields: Venue / Head Count / Event Date hidden in the pop-up, still real Kadence fields */
.be-modal-form .kb-field165fld-venue1,
.be-modal-form .kb-field165fld-headcount1,
.be-modal-form .kb-field165fld-edate1 { display: none !important; }

/* Parties skin */
.be-modal-card--parties { background: #0c0c0c; border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; box-shadow: 0 50px 100px rgba(0,0,0,0.55); color: #ffffff; }
.be-modal-card--parties .be-modal-eyebrow { color: var(--be-lime); }
.be-modal-card--parties .be-modal-title { font-size: 30px; font-weight: 900; }
.be-modal-card--parties .be-modal-title .magenta { color: var(--be-magenta); }
.be-modal-card--parties .be-modal-text { color: #bdbdbd; }
/* !important + the extra .kb-adv-form-field specificity are both needed here:
   the Kadence form block is saved with its own "dark" style (kb-form-is-dark,
   white label text meant to read against ITS OWN dark container background)
   -- discovered while fixing Part B item 2 below, where recoloring that
   container to match each modal's own background made Kadence's own white
   label text disappear against Ceremonies' now-white container. Same
   specificity fight applies to all three skins, so all three get it. */
.be-modal-form--parties label { color: #9a9a9a !important; }
.be-modal-form--parties .kb-adv-form-field label { color: #9a9a9a !important; }
.be-modal-form--parties input,
.be-modal-form--parties select,
.be-modal-form--parties textarea { background: #151515 !important; border: 1px solid rgba(255,255,255,0.16) !important; color: #ffffff !important; }
.be-modal-form--parties .wp-block-kadence-advanced-form-submit .btn-inner-wrap,
.be-modal-form--parties .wp-block-kadence-advanced-form-submit .kt-button,
.be-modal-form--parties .wp-block-kadence-advanced-form-submit button {
	width: 100%; background: var(--be-magenta) !important; border: 3px solid var(--be-lime) !important; color: #000000 !important;
	font-weight: 700; font-size: 14px; padding: 15px 30px !important; border-radius: 100px !important;
	display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Corporate skin */
.be-modal-card--corporate { background: #0a0a0d; border: 1px solid rgba(55,62,240,0.35); border-radius: 14px; box-shadow: 0 50px 100px rgba(0,0,0,0.55); color: #ffffff; }
.be-modal-card--corporate .be-modal-eyebrow { color: var(--be-blue-soft); }
.be-modal-card--corporate .be-modal-title { font-size: 27px; font-weight: 600; }
.be-modal-card--corporate .be-modal-text { color: #bdbdc4; }
.be-modal-form--corporate label { color: #8a8a92 !important; }
.be-modal-form--corporate .kb-adv-form-field label { color: #8a8a92 !important; }
.be-modal-form--corporate input,
.be-modal-form--corporate select,
.be-modal-form--corporate textarea { background: #101014 !important; border: 1px solid rgba(125,132,255,0.28) !important; color: #ffffff !important; }
.be-modal-form--corporate .wp-block-kadence-advanced-form-submit .btn-inner-wrap,
.be-modal-form--corporate .wp-block-kadence-advanced-form-submit .kt-button,
.be-modal-form--corporate .wp-block-kadence-advanced-form-submit button {
	width: 100%; background: transparent !important; border: 2px solid var(--be-blue) !important; color: #ffffff !important;
	font-weight: 600; font-size: 14px; padding: 14px 30px !important; border-radius: 100px !important;
	display: flex; align-items: center; justify-content: center; gap: 9px;
}

/* Ceremonies skin */
.be-modal-card--ceremonies { background: #ffffff; border: 2px solid #111111; box-shadow: 0 50px 100px rgba(0,0,0,0.28); color: #000000; }
.be-modal-card--ceremonies::before { content: ""; position: absolute; inset: 7px; border: 1px solid #111111; pointer-events: none; }
.be-modal-card--ceremonies .be-modal-close { background: transparent; top: 20px; right: 22px; width: auto; height: auto; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #6a6a6a; }
.be-modal-card--ceremonies .be-modal-eyebrow { color: #9a9a9a; letter-spacing: 2.5px; }
.be-modal-card--ceremonies .be-modal-title { font-size: 26px; font-weight: 300; letter-spacing: 0.3px; text-transform: none; font-family: 'Big Shoulders Display', sans-serif; }
.be-modal-card--ceremonies .be-modal-text { color: #4a4a4a; }
.be-modal-form--ceremonies label { color: #9a9a9a !important; letter-spacing: 1.6px; font-size: 10px; }
.be-modal-form--ceremonies .kb-adv-form-field label { color: #9a9a9a !important; }
.be-modal-form--ceremonies input,
.be-modal-form--ceremonies select,
.be-modal-form--ceremonies textarea { background: transparent !important; border: none !important; border-bottom: 1px solid #cfcfcf !important; border-radius: 0 !important; padding: 9px 0 !important; color: #000000 !important; box-shadow: none !important; }
.be-modal-form--ceremonies input:focus,
.be-modal-form--ceremonies select:focus,
.be-modal-form--ceremonies textarea:focus { outline: none !important; border-bottom-color: #111111 !important; }
.be-modal-form--ceremonies .wp-block-kadence-advanced-form-submit .btn-inner-wrap,
.be-modal-form--ceremonies .wp-block-kadence-advanced-form-submit .kt-button,
.be-modal-form--ceremonies .wp-block-kadence-advanced-form-submit button {
	background: transparent !important; border: none !important; border-bottom: 2px solid var(--be-magenta) !important; border-radius: 0 !important;
	padding: 0 0 4px !important; color: #000000 !important; font-size: 13px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 8px; width: auto;
}

/* mobile: full-screen takeover instead of floating card */
@media (max-width: 780px) {
  .be-modal-overlay { padding: 0; background: none; backdrop-filter: none; }
  .be-modal-card { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0 !important; padding: 0; }
  .be-modal-card--parties, .be-modal-card--corporate { border: none; box-shadow: none; }
  .be-modal-card--ceremonies { border: none; box-shadow: none; }
  .be-modal-card--ceremonies::before { display: none; }
  .be-modal-card__scroll { padding: 28px 22px 40px; }
  .be-modal-close { position: static; margin-left: auto; }
  .be-modal-head { gap: 14px; margin-bottom: 26px; }
  .be-modal-logo { max-width: 64px; }
  .be-modal-monogram { width: 78px; height: 78px; }
  .be-modal-monogram span { font-size: 18px; letter-spacing: 2px; margin-right: -2px; }
}

/* ==========================================================================
   CORPORATE
   ========================================================================== */
.be-corporate { background: var(--be-bg-corporate); color: #ffffff; position: relative; overflow: hidden; }
/* Round 14: shortened to fade out by ~380px (explicit ellipse radii instead
   of the old 60%-of-farthest-corner falloff) so it fully clears before the
   band's new, higher overlap point below -- otherwise the glow's residual
   blue tint would cut off abruptly against the band's flat-color top-fade,
   showing as a seam. */
.be-corporate__glow { position: absolute; top: 0; left: 0; right: 0; height: 420px; background: radial-gradient(ellipse 1000px 380px at 50% 0%, rgba(55,62,240,0.16) 0%, rgba(55,62,240,0) 100%); pointer-events: none; }
.be-corporate__hero { position: relative; z-index: 2; padding: 120px 56px 96px; max-width: 920px; }
.be-corporate__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--be-blue); margin-bottom: 22px; }
.be-corporate__title { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: clamp(36px,4.8vw,68px); line-height: 1.08; font-weight: 600; margin: 0 0 30px; letter-spacing: 0.5px; }
.be-corporate__title span { color: var(--be-blue); }
.be-corporate__sub { font-size: 19px; line-height: 1.7; color: #c4c4c8; max-width: 560px; margin: 0 0 40px; font-weight: 400; }
.be-corporate__cta { display: inline-flex; align-items: center; gap: 10px; }
/* Rounds 8-13: full-bleed, edge to edge -- no side margin, no colored
   edge-fade (that was Round 7's treatment, superseded before it reached
   build). A black top-fade (this page's own background color, opaque at top
   to transparent) blends the hero text above into the photo instead of a
   hard horizontal seam. */
/* Round 14: pulled up via negative top margin so the photo's top edge lands
   about halfway through the subtext above (the CTA and the lower half of the
   subtext sit in front of it, on top of the hero's higher z-index) instead of
   after a big dead gap below the button. Content after the band (the "why"
   section) follows it up automatically since this is still normal flow. */
.be-corporate__band { position: relative; z-index: 1; width: 100%; margin: -246px 0 96px; aspect-ratio: 21/8; overflow: hidden; }
.be-corporate__band-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.be-corporate__band-fade { position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to bottom, var(--be-bg-corporate) 0%, rgba(5,5,6,0) 100%); pointer-events: none; }
/* Round 18: widened from a single 880px text column into a two-column row
   so the client-logo wall can sit to the right of the "why" list (was a
   single max-width:880px block before this). */
.be-corporate__why { position: relative; padding: 0 56px 96px; max-width: 1400px; display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; flex-wrap: wrap; }
.be-corporate__why-col { flex: 1 1 480px; max-width: 640px; }
.be-corporate__why-label { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: #7a7a86; margin-bottom: 36px; }
.be-corporate__item { border-top: 1px solid rgba(55,62,240,0.4); padding: 28px 0; display: flex; gap: 28px; }
.be-corporate__item:last-child { border-bottom: 1px solid rgba(55,62,240,0.4); }
.be-corporate__num { font-family: 'Big Shoulders Display', sans-serif; font-size: 15px; font-weight: 700; color: var(--be-blue); min-width: 36px; }
.be-corporate__item-title { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.be-corporate__item-text { font-size: 16px; line-height: 1.6; color: #bdbdc4; }

/* Round 18: client logos on their own light cards -- the source logos mix
   black wordmarks, white-on-transparent designs, and a couple with their own
   baked-in backgrounds, so a neutral light card behind every one guarantees
   contrast on this page's dark background without a per-logo treatment. */
.be-corporate__clients { flex: 1 1 380px; max-width: 640px; }
.be-corporate__clients-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.be-corporate__client-logo { background: #ffffff; border-radius: 14px; padding: 20px 24px; height: 100px; display: flex; align-items: center; justify-content: center; }
.be-corporate__client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

@media (max-width: 780px) {
  .be-corporate__hero { padding: 44px 24px 56px; }
  .be-corporate__title { font-size: 34px; }
  .be-corporate__band { margin: 0 0 56px; aspect-ratio: 4/3; }
  .be-corporate__why { padding: 0 24px 56px; flex-direction: column; gap: 40px; }
  .be-corporate__item { gap: 18px; }
  .be-corporate__clients { max-width: none; }
  .be-corporate__client-logo { height: 80px; padding: 14px 18px; }
}

/* ==========================================================================
   PARTIES
   ========================================================================== */
.be-parties { background: #070707; color: #ffffff; position: relative; overflow: hidden; }
.be-parties__glow--magenta { position: absolute; top: -180px; right: -160px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(236,0,255,0.35) 0%, rgba(236,0,255,0) 70%); filter: blur(10px); pointer-events: none; }
/* Rounds 8-13: moved from a fixed position relative to the whole page (which
   put it right where the old two-column hero used to be) into .be-badges
   itself, so it glows behind the "30+ Years" badge cluster regardless of how
   tall the hero/band content above ends up being. z-index:-1 keeps it behind
   the badge boxes rather than washing a green tint over them. */
.be-parties__glow--lime { position: absolute; top: -60px; left: -240px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(171,255,0,0.22) 0%, rgba(171,255,0,0) 70%); filter: blur(10px); pointer-events: none; z-index: -1; }
.be-parties__hero { position: relative; z-index: 2; max-width: 760px; padding: 64px 56px 40px; }
.be-parties__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--be-lime); margin-bottom: 18px; }
.be-parties__title { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: clamp(48px,7vw,104px); line-height: 0.92; font-weight: 900; margin: 0 0 28px; letter-spacing: 0.5px; }
.be-parties__title .lime { color: var(--be-lime); }
.be-parties__title .magenta { color: var(--be-magenta); }
.be-parties__sub { font-size: 19px; line-height: 1.6; color: #cfcfcf; max-width: 480px; margin: 0 0 36px; font-weight: 400; }
.be-parties__sub-em { color: var(--be-lime); font-weight: 700; }
/* Rounds 8-13: the hero photo/video is no longer a second column next to the
   headline (clip-path angled edge gone with it) -- it's its own full-bleed
   band below the headline, same pattern as Corporate's band. */
/* Round 14: pulled up to match Corporate's treatment -- top edge lands about
   halfway through the subtext, CTA and lower subtext sitting in front of it
   via the hero's higher z-index. The magenta glow's own falloff already
   clears by roughly this point, so it didn't need a matching adjustment. */
.be-parties__band { position: relative; z-index: 1; width: 100%; aspect-ratio: 21/9; overflow: hidden; margin: -170px 0 40px; }
.be-parties__band-media { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.be-parties__band-fade { position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to bottom, #070707 0%, rgba(7,7,7,0) 100%); pointer-events: none; }

@keyframes be-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Round 19: pulled up over the band's bottom margin (and slightly into the
   video itself) so the marquee's own solid background sits on top of the
   video's hard-cropped bottom edge instead of leaving it exposed in the gap
   below. z-index:2 is needed for that overlap to actually paint on top --
   the band sits at z-index:1, and without an explicit z-index here the
   marquee (z-index:auto) would otherwise render underneath it. */
.be-marquee { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); overflow: hidden; padding: 20px 0; background: #0c0c0c; margin-top: -56px; }
.be-marquee__track { display: flex; white-space: nowrap; width: max-content; animation: be-marquee 22s linear infinite; }
.be-marquee__seg { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: 26px; font-weight: 700; letter-spacing: 1px; padding-right: 40px; }

/* z-index:0 (not just position:relative) matters here: it makes .be-badges
   its own stacking context so the glow's z-index:-1 below is scoped to
   stack behind the badge boxes specifically -- without it, z-index:-1
   escapes to the page's root stacking context and paints behind the whole
   .be-parties background instead, making the glow invisible. */
.be-badges { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 56px; padding: 120px 56px 150px; flex-wrap: wrap; overflow: hidden; }
.be-badge { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; text-align: center; padding: 32px 40px; border-radius: 16px; box-shadow: 0 14px 28px rgba(0,0,0,0.4); }
.be-badge--years { background: var(--be-lime); color: #000000; transform: rotate(-4deg); }
.be-badge--area { display: block; background: var(--be-magenta); color: #000000; transform: rotate(3deg); margin-top: 44px; }
.be-badge--team { display: block; background: #ffffff; color: #000000; transform: rotate(-2deg); margin-top: -16px; }
.be-badge .be-badge__big { font-weight: 900; font-size: clamp(42px,4.6vw,54px); line-height: 1; }
.be-badge--years .be-badge__big { font-size: clamp(50px,5.4vw,64px); }
.be-badge .be-badge__sm { font-weight: 600; font-size: 28px; letter-spacing: 0.5px; margin-top: 2px; }
.be-badge .be-badge__link { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-transform: none; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid #000000; padding-bottom: 2px; }

@media (max-width: 780px) {
  /* Round 6 Part B item 1 no longer applies here: the two-column hero-copy/
     hero-media layout (and its desktop min-width floors) is gone as of
     Rounds 8-13 -- the hero is just the copy block now, and the photo/video
     is its own full-bleed band, so there's nothing left to force this
     section wider than the viewport. */
  .be-parties__hero { padding: 28px 24px 24px; }
  .be-parties__title { font-size: 44px; }
  /* Round 16: the base rule's -170px top margin (Round 14's desktop overlap,
     tuned to desktop's wider hero) was carrying over unchanged here since
     this query only ever touched margin-bottom -- on mobile's much shorter
     hero, that same pull-up dragged the video too high into the text and
     pulled it up into the magenta glow's territory, exposing a seam where
     the glow's falloff met the band's flat-color top-fade. Resetting the top
     margin to 0 here (matching Corporate's mobile override, which already
     did this) drops the overlap treatment on mobile entirely -- band starts
     right after the hero, same as before Round 14. */
  .be-parties__band { aspect-ratio: 4/3; margin: 0 0 24px; }
  /* Round 19: same overlap idea as the desktop rule above, scaled down to
     match mobile's smaller 24px band gap. */
  .be-marquee { margin-top: -36px; }
  .be-marquee__seg { font-size: 18px; }
  .be-marquee__track { animation-duration: 24s; }
  .be-badges { flex-direction: column; padding: 44px 24px 56px; gap: 26px; }
  .be-badge--area, .be-badge--team { margin-top: 0; }
  /* Round 5: badges stretched to the flex container's full width by default
     (align-items:stretch), and a transform:rotate() on a full-width block
     projects its corners slightly past the original box -- with zero side
     margin, enough to run off the viewport. Capping the width lets the
     column's align-items:center center a slightly narrower box, leaving room
     for the rotation. */
  .be-badge { width: calc(100% - 20px); }
}

/* ==========================================================================
   CEREMONIES
   ========================================================================== */
.be-ceremonies-wrap { background: #f2f1ee; color: #000000; min-height: 100vh; position: relative; padding: 72px 40px; display: flex; justify-content: center; }
.be-ceremonies-card { max-width: 800px; width: 100%; background: #ffffff; border: 2.5px solid #111111; box-shadow: 0 46px 90px rgba(0,0,0,0.10); position: relative; height: fit-content; }
.be-ceremonies-card::before { content: ""; position: absolute; inset: 9px; border: 1px solid #111111; pointer-events: none; }
.be-ceremonies-card a:hover { color: var(--be-magenta); }
.be-ceremonies__crest { text-align: center; padding: 56px 48px 0; }
.be-ceremonies__crest-circle { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 2px solid #000000; border-radius: 50%; box-sizing: border-box; }
/* Off-center-text fix: CSS letter-spacing adds trailing space after the last
   character, which an eyeballed margin-left used to paper over. The correct
   fix is a negative margin-right equal to the letter-spacing value, which
   removes that trailing gap outright. */
.be-ceremonies__crest-circle span { font-family: 'Big Shoulders Display', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 2px; margin-right: -2px; white-space: nowrap; }
.be-ceremonies__eyebrow { position: relative; text-align: center; padding: 22px 48px 0; font-size: 11px; font-weight: 700; letter-spacing: 4px; color: #9a9a9a; }
.be-ceremonies__title { text-align: center; padding: 26px 64px 0; max-width: 640px; margin: 0 auto; font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: clamp(28px,3.6vw,46px); line-height: 1.32; font-weight: 300; letter-spacing: 0.3px; }
.be-ceremonies__title span { border-bottom: 2px solid var(--be-magenta); padding-bottom: 2px; }
.be-ceremonies__sub { text-align: center; padding: 0 64px; max-width: 440px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: #4a4a4a; font-weight: 400; }
.be-ceremonies__divider { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 48px 48px 0; }
.be-ceremonies__divider span { width: 70px; height: 2px; background: #111111; }
.be-ceremonies__divider .dot { width: 9px; height: 9px; background: var(--be-magenta); transform: rotate(45deg); }
.be-ceremonies__cta { text-align: center; padding: 36px 48px 64px; }
.be-ceremonies__quote { text-align: center; padding: 56px 56px 64px; max-width: 640px; margin: 0 auto; border-top: 2px solid #111111; }
.be-ceremonies__quote-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: #b0b0b0; margin-bottom: 26px; margin-top: 8px; }
.be-ceremonies__quote-text { font-family: 'Big Shoulders Display', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.55; letter-spacing: 0.2px; text-transform: none; }
.be-ceremonies__quote-rule { width: 44px; height: 2px; background: var(--be-magenta); margin: 36px auto 0; }

@media (max-width: 780px) {
  .be-ceremonies-wrap { padding: 28px 16px; }
  .be-ceremonies-card::before { inset: 7px; }
  .be-ceremonies__crest-circle { width: 50px; height: 50px; }
  .be-ceremonies__crest-circle span { font-size: 14px; letter-spacing: 1.5px; margin-right: -1.5px; }
  .be-ceremonies__title { padding: 20px 30px 0; font-size: 27px; }
  .be-ceremonies__sub { padding: 0 30px; }
  .be-ceremonies__quote { padding: 40px 28px 44px; }
  .be-ceremonies__quote-text { font-size: 19px; }
}

/* ==========================================================================
   WEEKLY SCHEDULE (hero banner ported exactly from the pre-redesign homepage)
   ========================================================================== */
.be-schedule { background: #070707; color: #ffffff; position: relative; overflow: hidden; }
.be-schedule__hero-band {
  position: relative;
  background-color: #000;
  background-image:
    radial-gradient(rgba(255,255,255,.10) 2px, transparent 2.2px),
    linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.78)),
    url('/wp-content/uploads/2026/09/karaoke_splash_bg_v2.jpg');
  background-size: 14px 14px, cover, cover;
  background-position: 0 0, center center, center center;
  background-repeat: repeat, no-repeat, no-repeat;
  padding: 90px 40px;
}
.be-schedule__hero-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.be-schedule__hero-inner h1 { font-family: 'Manrope', sans-serif; font-size: clamp(26px,3.4vw,40px); font-weight: 700; margin: 0 0 20px; text-transform: none; }
.be-schedule__hero-inner p { font-size: 20px; line-height: 1.6; margin: 0 0 8px; color: #e4e4e4; }
/* Round 17: the button sits between the day-grid images above and the
   headline/subtext below (see page-weekly-schedule.php) -- it only had
   margin-top, so nothing separated it from the text that follows, making it
   look cramped. Added margin-bottom here to give that text room to breathe.
   .be-schedule__hero-cta bumps its font-size slightly per this page's
   request, without resizing the shared .be-btn base class site-wide. */
.be-schedule__hero-buttons { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 28px 0 40px; }
.be-schedule__hero-cta { font-size: 18px; }

@keyframes beFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.be-anim { opacity: 0; animation: beFadeIn .6s ease forwards; }
.be-d1 { animation-delay: .1s; } .be-d2 { animation-delay: .5s; } .be-d3 { animation-delay: .65s; }
.be-d4 { animation-delay: .8s; } .be-d5 { animation-delay: .95s; } .be-d6 { animation-delay: 1.1s; }
.be-d7 { animation-delay: 1.25s; } .be-d8 { animation-delay: 1.6s; }

.be-hero-wrap { position: relative; max-width: 1400px; margin: 0 auto; padding: 6px 0 20px; }
.be-hero-title { margin-bottom: 6px; }
.be-hero-title img { width: clamp(230px,30vw,437px) !important; display: block; margin: 0 auto; transform: rotate(4deg); transform-origin: 50% 50%; }
.be-hero-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.be-hero-row img { width: 100%; height: auto; display: block; }

.be-schedule__intro { position: relative; text-align: center; padding: 80px 56px 8px; }
.be-schedule__intro-label { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #9a9a9a; margin-bottom: 16px; }
.be-schedule__intro h2 { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: clamp(26px,3vw,38px); font-weight: 700; margin: 0; }

/* Rounds 8-13: these cards now share Home's .be-doorway* implementation
   directly (see page-weekly-schedule.php) instead of a separate, smaller
   .be-schedule__card variant -- same image height, padding, font sizes, and
   gap, so there's exactly one place to look for this component's styles.
   The only thing that stays page-specific is this extra top spacing, since
   the row follows the day-grid section rather than a hero. */
.be-doorways--schedule { padding-top: 48px; }

@media (max-width: 780px) {
  .be-schedule__hero-band { padding: 56px 20px; }
  .be-schedule__hero-buttons { flex-direction: column; align-items: stretch; margin: 20px 0 32px; }
  .be-hero-row { grid-template-columns: repeat(2, 1fr); }
  .be-schedule__intro { padding: 48px 24px 8px; }
  .be-schedule__cards { padding: 32px 24px 48px; }
}

/* ==========================================================================
   ABOUT (ported from the locked About.dc.html mockup — neutral treatment
   like Home, since About isn't one of the three modes)
   ========================================================================== */
.be-about { background: #070707; color: #ffffff; position: relative; overflow: hidden; }
.be-about__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.be-about__glow--lime { top: -200px; left: -180px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(171,255,0,0.14) 0%, rgba(171,255,0,0) 70%); }
.be-about__glow--blue { top: -160px; right: -200px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(55,62,240,0.20) 0%, rgba(55,62,240,0) 70%); }
.be-about__glow--magenta { bottom: -260px; left: 35%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(236,0,255,0.14) 0%, rgba(236,0,255,0) 70%); }

.be-about__hero { position: relative; text-align: center; padding: 64px 56px 72px; }
.be-about__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #9a9a9a; margin-bottom: 22px; }
.be-about__title { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: clamp(34px,4.8vw,64px); line-height: 1.05; font-weight: 900; margin: 0 auto 24px; max-width: 820px; }
.be-about__sub { font-size: 18px; line-height: 1.65; color: #cfcfcf; max-width: 560px; margin: 0 auto; font-weight: 400; }

.be-about__founders { position: relative; display: flex; gap: 48px; padding: 0 56px 60px; flex-wrap: wrap; max-width: 920px; margin: 0 auto; }
.be-about__founder { flex: 1 1 320px; min-width: 280px; }
/* Round 7: the founder cutouts are transparent PNGs (background removed from
   the source files), so they sit directly on this box's own gradient instead
   of inside a placeholder's dashed border/box -- object-fit:contain keeps
   each headshot at its native proportions rather than stretching or
   cropping it. */
.be-about__founder-media { aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; overflow: hidden; }
.be-about__founder-photo { width: 72%; height: 72%; object-fit: contain; display: block; }
.be-about__founder--q .be-about__founder-media { background: linear-gradient(160deg, rgba(171,255,0,0.16), rgba(0,0,0,0.92) 62%); }
.be-about__founder--josh .be-about__founder-media { background: linear-gradient(160deg, rgba(236,0,255,0.16), rgba(0,0,0,0.92) 62%); }
.be-about__founder-name { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.be-about__founder-role { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
.be-about__founder--q .be-about__founder-role { color: var(--be-lime); }
.be-about__founder--josh .be-about__founder-role { color: var(--be-magenta); }
.be-about__founder-bio { font-size: 15px; line-height: 1.65; color: #bdbdbd; font-family: monospace; opacity: 0.8; }

.be-about__badge-row { position: relative; display: flex; justify-content: center; padding: 20px 56px 84px; }

.be-about__cta-wrap { position: relative; text-align: center; padding: 0 56px 90px; }
.be-about__cta-label { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: #9a9a9a; margin-bottom: 18px; }
.be-about__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #ffffff; border-bottom: 2px solid var(--be-magenta); padding-bottom: 4px; }

@media (max-width: 780px) {
  .be-about__hero { padding: 20px 24px 36px; }
  .be-about__title { font-size: 30px; }
  .be-about__sub { font-size: 15px; }
  .be-about__founders { flex-direction: column; padding: 12px 24px 8px; gap: 36px; }
  .be-about__founder-media { aspect-ratio: 4/3; }
  .be-about__badge-row { padding: 28px 24px 56px; }
  .be-about__cta-wrap { padding: 0 24px 48px; }
}