/* === Weekend ComeBack — Master Stylesheet === */
/* Includes: Core, Contact, Blog, Schedule, Neon Glow, Fixed Footer, Events Page */

:root{
  --headline-glow:
    0 1px 0 rgba(255,255,255,.18),
    0 0 22px rgba(122,51,255,.26),
    0 0 80px rgba(122,51,255,.14);

  --bg:#0b0b10;
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --accent:#7a33ff;
  --border:rgba(255,255,255,.1);


  /* iOS safe-area helpers */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,#0b0b10,#11111a);
  color:var(--text);
}

a{text-decoration:none;color:var(--accent)}
img,video{display:block;max-width:100%}

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:99999;
  background: rgba(10,10,14,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.nav-inner{
  width:92%;
  max-width:1100px;
  margin:0 auto;
  padding-left: calc(var(--safe-l) + 0px);
  padding-right: calc(var(--safe-r) + 0px);
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:inline-flex;
  align-items:center;
  height:64px;
  gap:3px;
  Font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
}
/* Logo Hover Effect */
.brand span { transition: color 0.3s ease; }
.brand:hover span { color: #7a33ff; }

.navlinks{
  display:flex;
  align-items:center;
  gap:12px;
}

.navlinks a{
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 10px;
  border-radius:12px;
  color:rgba(255,255,255,.78);
  letter-spacing:.01em;
}

.navlinks a:hover{
  color:#fff;
  background: rgba(255,255,255,.04);
}

.navcta{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:14px;
  background: var(--accent);
  color:#fff !important;
}

.navtoggle{
  display:none;
  height:44px;
  width:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-size:22px;
  line-height:1;
}

/* ---------- Hero ---------- */
.heroA {
  min-height: 40vh;
  display: flex;             /* FLEXBOX: Handles the layout */
  flex-direction: column;    /* Stacks content vertically */
  justify-content: center;   /* Centers vertically */
  align-items: center;       /* Centers horizontally */
  padding: 72px 20px;       /* Contact-style header height */
  position: relative;
  overflow: hidden;
  text-align: center;
}

.heroA--home {
  min-height: 85vh;
  padding: 100px 20px;
}
.heroA-media{position:absolute;inset:0;z-index:-1}
.heroA-media video{width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.heroA-overlay{position:absolute;inset:0;background:rgba(0,0,0,.34)}
.heroA-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(122,51,255,.15),rgba(0,0,0,.55))}

.heroA h1,
.heroA-title{
  font-size: clamp(2.8rem, 5.6vw, 4.8rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
}

.heroA-kicker{
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.6;
  margin-bottom:18px;
}

.btn{
  background:var(--accent);
  color:#fff;
  padding:14px 20px;
  border-radius:16px;
  font-weight:600;
  display:inline-block;
  border: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;            /* <- this is the main fix */
  text-decoration: none;     /* anchors */
  -webkit-appearance: none;  /* normalize button styling (Safari) */
  appearance: none;
}

.heroA--sub {
  min-height: 50vh;
}
@media (max-width: 768px) {
  .heroA--sub {
    min-height: 56vh;
  }
}

/* Scroll Button */
.heroA-scroll{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.38);
  display:grid;
  place-items:center;
  backdrop-filter: blur(8px);
  color:#fff;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.heroA-scroll:hover{
  transform:translateX(-50%) translateY(-1px);
  background: rgba(0,0,0,.46);
  border-color: rgba(255,255,255,.30);
}
.heroA-scroll:active{
  transform:translateX(-50%) translateY(0);
}
.heroA-scroll-icon{
  width:10px;
  height:10px;
  border-right:2px solid rgba(255,255,255,.86);
  border-bottom:2px solid rgba(255,255,255,.86);
  transform: rotate(45deg);
  margin-top:-3px;
  opacity:.92;
}

.container{width:92%;max-width:1100px;margin:auto;padding:56px 0 80px;}

.posthero-inner{max-width:720px}
.posthero h2{margin-bottom:16px}
.posthero-lead{font-size:1.1rem;opacity:.9;margin-bottom:16px}

.truststrip{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 30px 0 10px;
}

@media (min-width: 901px){
  .truststrip{ grid-template-columns: repeat(3, 1fr); }
}


/* Trustitem */
.trustitem{
  width:100%;
  max-width:none;         /* important: don't constrain the 3rd card */
  min-width:0;            /* prevents weird overflow in grid/flex children */
  padding:22px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
}

.trustitem strong{ display:block; font-size:16px; letter-spacing:-.01em; margin-bottom: 8px; }
.trustitem span{ display:block; margin-top:4px; color: rgba(255,255,255,.70); font-size:14px; line-height: 1.5; }

/* --- GRIDS (Standard Vertical Stacking on Mobile) --- */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:40px
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  margin-top:40px;
}
.grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
  margin-top:40px;
}

/* Responsive Grids: Force 1 Column on Mobile */
@media(max-width:900px){
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* Prevent overflow */
  .grid-2 > div, .grid-3 > div, .grid-4 > div {
    min-width: 0;
  }
}

.card{padding:24px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.secondary{background:rgba(255,255,255,.06);color:#fff}

/* ---------- Common links ---------- */
.textlink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.86);
  padding:10px 0;
}
.textlink:hover{ color:#fff; }

/* ---------- Post-hero ---------- */
.posthero{padding: 28px 0 8px;}
.posthero-inner{ max-width: 760px; }
.posthero h2{ margin: 0 0 14px; }
.posthero-lead{ font-size: 1.08rem; line-height: 1.65; opacity:.92; margin: 0 0 14px; }
.posthero-body{ margin: 0 0 10px; color: rgba(255,255,255,.78); }
.posthero-links{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 10px; }

/* === Sub-hero proof section (below hero video) === */
.subhero-proof{
  padding: 56px 20px 18px;
}

.subhero-proof-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  align-items: start;
}

.subhero-proof-media{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 18px 60px rgba(0,0,0,.45);
  align-self: start;
  aspect-ratio: 16 / 10;
  max-height: 420px;
}

.subhero-proof-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

.subhero-proof-content{
  text-align: left;
}

.subhero-proof-kicker{
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.subhero-proof-title{
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 2.2vw, 2.15rem);
  line-height: 1.15;
  text-shadow: var(--headline-glow);
}

.subhero-proof-one-liner{
  margin: 0 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 42ch;
}

.subhero-proof-quote{
  margin: 0 0 22px;
  padding: 16px 18px;
  border-left: 3px solid rgba(122,51,255,.75);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  font-style: italic;
  line-height: 1.55;
}

.subhero-proof-badges-label{
  color: rgba(255,255,255,.70);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.subhero-proof-footnote{
  margin: 16px 0 0;
  color: rgba(255,255,255,.60);
  font-size: .95rem;
  line-height: 1.45;
}

@media (max-width: 900px){
  .subhero-proof-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .subhero-proof-media img{
    }

  .subhero-proof-content{
    text-align: center;
  }

  .subhero-proof-one-liner{
    margin-left: auto;
    margin-right: auto;
  }

  .subhero-proof-quote{
    text-align: left;
  }
}

@media (max-width: 600px){
  .subhero-proof{
    padding: 42px 16px 10px;
  }

  .subhero-proof-media{
    border-radius: 16px;
  }

  .subhero-proof-media img{
    }
}

/* ---------- Reviews (Desktop grid + Mobile swipe) ---------- */

/* Mobile-first: swipeable “peek” cards */
.reviews-grid{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding: 10px 4px 26px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.review-card, .review, .reviewcard{
  flex: 0 0 86%;
  min-width: 260px;
  scroll-snap-align: start;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 24px 18px;

  display:flex;
  flex-direction:column;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.review-card:hover, .review:hover, .reviewcard:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
}

.review-stars{
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.review-text, .review p, .reviewtext{
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  font-style: italic;
  margin-bottom: 18px;
  flex-grow: 1;
}

.review-author, .review footer, .reviewmeta{
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.50);
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Clean scrollbar */
.reviews-grid::-webkit-scrollbar{ height: 6px; }
.reviews-grid::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); border-radius: 10px; margin: 0 18px; }
.reviews-grid::-webkit-scrollbar-thumb{ background: var(--accent); border-radius: 10px; }
.reviews-grid::-webkit-scrollbar-thumb:hover{ background: rgba(122,51,255,.85); }

/* Desktop: real 3-column grid (no horizontal scrolling) */
@media (min-width: 901px){
  .reviews-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  .review-card, .review, .reviewcard{
    min-width: 0;
    flex: initial;
    padding: 28px 22px;
  }
}

/* Extra-small phones */
@media (max-width: 420px){
  .review-card, .review, .reviewcard{ flex-basis: 92%; }
  .reviews-grid::-webkit-scrollbar{ display:none; }
}

@media (min-width: 901px){
  .reviewsblock--autofit .review,
  .reviewsblock--autofit .review-card,
  .reviewsblock--autofit .reviewcard{
    padding: 32px 28px;
  }
}

/* ---------- Section spacing ---------- */
.heroA-title{ margin: 0 0 18px; }
.section-top{margin-top:28px}

/* Mobile Nav */
@media(max-width:900px){
  .navtoggle{display:inline-grid;place-items:center;}
  .navlinks{
    display:none;
    position:absolute;
    top:64px;
    left:4%;
    right:4%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px;
    background: rgba(10,10,14,.96);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
  }
  .navlinks.open{display:flex;}
  .navlinks a{height:44px;}
  .navcta{height:44px;}
}

/* === Forms (dark + premium) === */
form{margin:0}
label{display:block;margin:10px 0 6px;font-weight:600;color:rgba(255,255,255,.88)}
input, select, textarea{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color: #fff;
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
textarea{min-height:110px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.7) 50%),linear-gradient(135deg,rgba(255,255,255,.7) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 12px) calc(50% - 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.45)}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(0,0,0,.5);
  box-shadow:0 0 0 4px rgba(122,51,255,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
input[type="checkbox"], input[type="radio"]{accent-color:var(--accent)}
.form-help, small{color:rgba(255,255,255,.62)}
form .btn, form button, input[type="submit"]{
  cursor:pointer;
}
form button:not(.btn){
  padding:10px 14px;border-radius:14px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--text)
}
form button:not(.btn):hover{background:rgba(255,255,255,.09)}

/* === Footer principles v2 (Slimmer & Fixed Icons) === */
.site-footer {
  background: #000;
  color: rgba(255, 255, 255, .9);
  border-top: 1px solid rgba(255, 255, 255, .10);
  margin-top: 40px; /* Reduced from 70px */
  padding: 30px 0;  /* Reduced from 60px */
}

.footergrid {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px; /* Reduced from 40px to tighten layout */
}

/* Brand Section */
.footerbrand { flex: 2; min-width: 250px; padding-right: 40px; }
.footerbrand strong { display: block; font-size: 1.2rem; color: #fff; margin-bottom: 8px; }
.footerfine { font-size: 0.9rem; color: #888; line-height: 1.6; max-width: 300px; }

/* Links Section */
.footlinks { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; }
.foothead {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 12px;
}
.footlinks a { display: block; color: rgba(255, 255, 255, .7); padding: 2px 0; }
.footlinks a:hover { color: #fff; text-decoration: underline; }

/* Social Section */
.social-row { 
  display: flex; 
  gap: 15px; 
  margin-top: 15px; 
}

/* Center them on mobile */
@media(max-width: 900px) {
  .social-row { justify-content: center; }
}

.socialbtn:hover { 
  transform: translateY(-1px); 
  background: rgba(255, 255, 255, .06); 
  border-color: rgba(157, 92, 255, .55); 
}

/* FIXED: Force Icons White (Nuclear Option) */
.socialbtn svg { 
  width: 26px; 
  height: 26px; 
  fill: #ffffff !important; 
  opacity: .95; 
}

/* This line guarantees the 'path' inside the icon turns white */
.socialbtn svg path {
  fill: #ffffff !important;
}

@media(max-width: 900px) {
  .footergrid { flex-direction: column; gap: 40px; text-align: center; }
  .footerbrand { padding-right: 0; }
  .footerfine { margin: 0 auto; }
  .social-row { justify-content: center; }
}

/* === REFINED FOOTER STYLES === */

/* 1. Logo Size & Color */
.footer-logo {
  color: #fff !important;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1rem; 
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px; /* Added spacing below logo */
}

/* 2. The "ComeBack" span transition */
.footer-logo span { transition: color 0.3s ease; }
.footer-logo:hover span { color: var(--accent); }

/* 3. Make Contact Links White */
.contact-info a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Optional: faint purple hover to show they are clickable */
.contact-info a:hover { color: var(--accent); }

/* === Contact Page & TidyCal === */
.tidycal-embed {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 1.5rem;
}
.tidycal-embed iframe {
  filter: invert(1) hue-rotate(180deg);
  border-radius: 8px;
  display: block;
}
.empty-state.success-box {
  background: rgba(122, 51, 255, 0.08);
  border: 1px solid rgba(122, 51, 255, 0.4);
  padding: 50px 40px;
  border-radius: 18px;
  box-shadow: 
    0 0 0 1px rgba(122, 51, 255, 0.15) inset,
    0 10px 40px rgba(122, 51, 255, 0.15);
}

.empty-state.success-box h2 {
  color: var(--accent);
  text-shadow: var(--headline-glow);
}

.empty-state.success-box p {
  color: rgba(255,255,255,0.85);
}
.heroA-overlay.heavy {
  background: rgba(0,0,0,0.1);
}

/* === SCHEDULE / TOUR STYLES === */
.tour-list {
  display: flex; 
  flex-direction: column; 
  gap: 2px; /* Changed from 1px to 2px for better separation */
  background: #333; 
  border: 1px solid #333;
  border-radius: 8px; 
  overflow: hidden; 
  margin-top: 1rem; /* Reduced from 3rem to tighten the top */
}
.tour-row {
  display: flex; align-items: center; padding: 25px 30px;
  background: #111; transition: background 0.2s ease;
}
.tour-row:hover { background: #1a1a1a; }

.t-date { flex: 0 0 70px; text-align: center; margin-right: 30px; line-height: 1; }
.t-month { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #888; font-weight: 700; margin-bottom: 4px; }
.t-day { display: block; font-size: 1.8rem; font-weight: 700; color: #fff; }

.t-info { flex: 1; padding-right: 20px; }
.t-venue { display: block; font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: 5px; }
.t-venue a { color: #fff; text-decoration: none; border-bottom: 1px dotted #666; transition: color 0.2s; }
.t-venue a:hover { color: #7a33ff; border-color: #7a33ff; }
.t-loc { display: block; font-size: 0.95rem; color: #999; }
.t-action { flex: 0 0 auto; }

/* Mobile Tour */
@media (max-width: 600px) {
  .tour-row { flex-wrap: wrap; padding: 20px; }
  .t-date { flex: 0 0 100%; display: flex; gap: 10px; align-items: baseline; text-align: left; margin-bottom: 10px; }
  .t-day { font-size: 1.4rem; }
  .t-info { flex: 0 0 100%; margin-bottom: 15px; }
  .t-action { flex: 0 0 100%; }
  .t-action .btn { width: 100%; text-align: center; }
}
.empty-state {
  background: #111; border: 1px dashed #444; padding: 4rem 2rem;
  text-align: center; border-radius: 8px; margin-top: 2rem;
}

/* === THE "NEON" UPGRADE (Glow + Two-Tone Logo) === */

.navcta, .btn {
  transition: all 0.25s ease;
}

/* 1. PRIMARY PURPLE BUTTONS & NAV (Unchanged) */
.navcta:hover, .btn:hover {
  background: #8e4dff; 
  box-shadow: 0 0 20px rgba(122, 51, 255, 0.6), 
              0 0 10px rgba(122, 51, 255, 0.4); 
  transform: translateY(-2px); 
  color: #fff;
}

/* 2. SECONDARY BUTTONS (Black/Transparent Style) */
.btn.secondary, .js-open-video {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  box-shadow: none;
}

.btn.secondary:hover, .js-open-video:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 20px rgba(122, 51, 255, 0.7) !important;
  transform: translateY(-2px);
}

/* 3. RESTORING THE MISSING MODAL CLOSE HOVER */
/* This was in your HTML but missing from main.css */
.video-modal-close:hover {
  background: var(--accent, #7a33ff); 
  transform: scale(1.1); 
}

/* === SONG LIST PAGE STYLES (Updated) === */

/* Sticky Search & Sort Container */
.search-wrap {
  position: sticky;
  top: 64px; 
  z-index: 90;
  background: rgba(11, 11, 16, 0.95);
  backdrop-filter: blur(10px);
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2rem;
}

.search-inner {
  display: grid;
  grid-template-columns: 1fr 200px; /* Search gets space, Sort gets 200px */
  gap: 15px;
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Inputs */
#songSearch, #sortSelect {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  color: #fff;
  transition: all 0.2s ease;
}

#songSearch:focus, #sortSelect:focus {
  outline: none;
  border-color: var(--accent);
  background: #000;
}

/* Song Grid Layout */
.song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Wider cards */
  gap: 12px;
}

/* Individual Song Card */
.song-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: row; /* <--- FIXED: Puts them side-by-side */
  justify-content: space-between; /* <--- FIXED: Pushes them apart */
  align-items: center;
}

.song-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}

/* Text Styles */
.s-song {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
}

.s-artist {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: right;
  margin-left: 15px;
}

/* Mobile Tweak: Stack them on very small screens */
@media(max-width: 500px){
  .search-inner { grid-template-columns: 1fr; }
  .song-item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .s-artist { text-align: left; margin-left: 0; font-size: 0.8rem; order: -1; margin-bottom: 2px; }
}

/* Utilities */
.hidden { display: none !important; }
#noResults { display: none; text-align: center; color: #888; grid-column: 1 / -1; padding: 40px; }


/* ========================================= */
/* === NEW EVENTS PAGE STYLES (Added V2) === */
/* ========================================= */

/* --- 1. MUNICIPAL BADGES & PANELS --- */
.badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.badge {
  background: rgba(255, 255, 255, 0.1); /* Glassmorphism effect */
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #e0e0e0;
  cursor: default;
  transition: background 0.2s ease;
  
  /* Reset previous specific styles if any */
  width: auto !important; 
  height: auto !important; 
  max-width: none !important;
  filter: none !important;
}

.badge:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* --- 2. VIDEO CARD (For Municipal Clip) --- */
.video-card {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  /* Force aspect ratio so it doesn't jump */
  aspect-ratio: 16 / 9; 
  background: #000;
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Live Footage" Badge Overlay */
.live-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(220, 38, 38, 0.9); /* Red */
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* --- 3. UPGRADES CHECKLIST --- */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  margin-bottom: 1.2rem;
  padding-left: 1.8rem;
  position: relative;
  line-height: 1.4;
}

.check-list li::before {
  content: "✓";
  color: #9d4edd; /* Matches your purple/hero accent */
  position: absolute;
  left: 0;
  font-weight: 800;
  font-size: 1.1em;
}

.muted-text {
  display: block;
  font-size: 0.85rem;
  color: #aaa;
  margin-top: 4px;
}

/* --- 4. TIGHTER LOGO GRID (Override) --- */
.logo-grid {
  display: grid;
  /* 110px allows ~3 logos/row on mobile instead of 2 */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 30px; /* Reduced gap to save vertical space */
  align-items: center;
  justify-items: center;
  margin-top: 2rem;
  padding: 0 20px;
}

.client-logo {
  width: 100%;
  height: 80px; /* Forces all logos to live in a "row" this tall */
  object-fit: contain; /* Scales logo to fit without stretching */
  opacity: 0.85; /* Increased visibility */
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: grayscale(100%) brightness(120%); /* Brightness boost for dark logos */
}

.client-logo:hover {
  opacity: 1;
  filter: none;
  transform: scale(1.05);
}

/* --- 4. TIGHTER LOGO GRID (Override) --- */

/* Award Badges */
.custom-badge {
  height: 175px;         /* Forces a consistent height */
  width: auto;           /* Maintains aspect ratio */
  object-fit: contain;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.subhero-proof-titleline{
  display: block;
}

.custom-badge:hover {
  transform: scale(1.05);
  opacity: 1;
}
/* Mobile tweak for badges */
@media (max-width: 600px) {
  .custom-badge {
    height: 150px;
    margin-bottom: 20px;
    max-width: 80%;
  }
}

/* Interactive Cards (Hover Physics) */
.interactive-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  background: rgba(20,20,20,0.6);
}
.interactive-card:hover {
  transform: translateY(-7px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.card-link-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
}

/* Visual Break (Parallax Section) */
.visual-break {
  width: 100%;
  height: 325px;
  background-image: url('/assets/img/night-builds.webp');
  background-size: cover;
  background-attachment: scroll;
  background-position: center 55%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
}
.visual-break-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(10, 0, 25, 0.10) 0%,
      rgba(10, 0, 25, 0.35) 50%,
      rgba(5, 5, 15, 0.55) 100%
    );
  z-index:1;
}
.visual-break-content {
  position: relative; z-index: 2; text-align: center; padding: 20px;
}

/* --- X. EVENTS PHOTO GALLERY (3-up with hover zoom) --- */
.event-gallery{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
}

.event-gallery__item{
  border-radius:12px; /* change to 0px if you want sharp corners */
  overflow:hidden;
  aspect-ratio:16 / 10;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.event-gallery__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  transform:scale(1.02);
  transition:transform .45s ease, filter .45s ease;
  will-change:transform;
}

.event-gallery__item:hover .event-gallery__img{
  transform:scale(1.08);
  filter:saturate(1.05) contrast(1.03);
}

@media (max-width: 900px){
  .event-gallery{ grid-template-columns:1fr; }
  .event-gallery__item{ aspect-ratio:16 / 9; }
}

/* Instagram Grid */
.insta-container {
  margin-top: 4rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.insta-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 0;
}
.insta-item {
  aspect-ratio: 1/1; overflow: hidden; position: relative;
}
.insta-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.5s ease;
}
.insta-item:hover .insta-img {
  filter: grayscale(0%); transform: scale(1.05);
}
/* === SURGICAL ADDITION: Director/Video Section === */
.section-director {
  background: linear-gradient(to bottom, #111, #0b0b10);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 3rem 0;
  margin: 3rem 0; /* Adds space above/below this section */
  border-radius: 12px; /* Optional: curves the edges since it sits inside container */
  position: relative;
  overflow: hidden; /* Keeps the glow contained */
}

.grid-director {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 0 2rem; /* Internal padding for text/video */
}

/* The purple border effect around the video */
.video-frame-decor {
  position: absolute;
  top: 15px; left: 15px;
  width: 100%; height: 100%;
  border: 1px solid rgba(122, 51, 255, 0.3); /* Purple accent */
  border-radius: 8px;
  z-index: 0;
}

.video-box-main {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  aspect-ratio: 16/9;
  background: #000;
}

@media(max-width: 900px) {
  .grid-director { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.5rem; }
  .grid-director > div:first-child { order: 2; } /* Puts text below video on mobile */
  .grid-director > div:last-child { order: 1; }
}
 
/* Make the video link turn purple on hover */
.section-director .textlink {
  transition: color 0.2s ease;
  font-weight: 600; /* Makes it slightly bolder */
}

.section-director .textlink:hover {
  color: #7a33ff !important; /* Forces the purple accent */
  text-shadow: 0 0 15px rgba(122, 51, 255, 0.4); /* Adds a subtle neon glow */
}

/* Accessibility: Skip to Content */
.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  background: var(--accent);
  color: #fff;
  padding: 15px;
  z-index: 100000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus {
  top: 0;
}

/* Booking Steps (Utilizing existing grid/card styles) */
.step-card {
  text-align: left;
  position: relative;
  padding: 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.step-num {
  font-size: 3rem;
  font-weight: 800;
  color: rgba(255,255,255,0.05);
  position: absolute;
  top: 10px;
  right: 20px;
  line-height: 1;
}

/* ========================================= */
/* === BLOG POST STYLES (New Additions) === */
/* ========================================= */

.article-container { 
  max-width: 740px; 
  margin: 0 auto; 
  padding: 0 20px; 
  font-size: 1.125rem; 
  line-height: 1.8; 
}

/* Typography & Lists inside articles */
.article-body h2 { margin-top: 3rem; margin-bottom: 1rem; color: #fff; }
.article-body h3 { margin-top: 2rem; color: #fff; }
.article-body p { margin-bottom: 1.5rem; color: rgba(255,255,255,0.85); }
.article-body ul { margin-bottom: 2rem; color: rgba(255,255,255,0.85); }
.article-body li { margin-bottom: 0.5rem; }
.article-body ol { margin-bottom: 2rem; color: rgba(255,255,255,0.85); margin-left: 1rem; }
.article-body ol li { margin-bottom: 1rem; padding-left: 0.5rem; }

/* Blog Callout (Purple Bar) */
.callout { 
  border-left: 4px solid #7a33ff; 
  padding: 20px; 
  background: rgba(255,255,255,0.05); 
  margin: 2rem 0; 
  font-style: italic; 
}

/* Feature Box (Styled List Container) */
.feature-box { 
  background: rgba(0,0,0,0.3); 
  padding: 25px; 
  border-radius: 12px; 
  border: 1px solid rgba(255,255,255,0.1); 
  margin-bottom: 2rem; 
}
.feature-box ul { margin-bottom: 0; padding-left: 1.2rem; }
.feature-box-title { margin-bottom:10px; font-weight:bold; color:#fff; }

/* Blog Author Footer (Fixes the "Squished Circle") */
.author-block { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  margin-top: 4rem; 
  padding-top: 2rem; 
  border-top: 1px solid rgba(255,255,255,0.1); 
}
.author-img { 
  width: 60px; 
  height: 60px; 
  border-radius: 50%; 
  background: #333; 
  object-fit: cover; 
  flex-shrink: 0; /* CRITICAL FIX: Stops the image from getting squished */
}

/* Mobile Fixes for Blog Author Block & Layout */
@media (max-width: 600px) {
  .author-block {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .author-block > div {
    width: 100%;
  }
  .author-block .btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 5px;
  }
  .article-container {
    padding: 0 16px;
    font-size: 1.05rem; /* Slightly smaller font for better mobile reading */
  }
}

/* === BLOG INDEX / CARD STYLES === */
.img-placeholder {
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}
.blog-card h3 { margin-top: 0; line-height: 1.3; transition: color 0.3s ease; }
.blog-card:hover h3 { color: var(--accent); }
.blog-card:hover .img-placeholder { background: #2a2a2a; 
}

/* Featured blog image upgrade */
.featured-image {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center 45%;
}

/* =========================================
   VIDEO VAULT (Netflix Layout & Scrollbars)
   ========================================= */

/* 1. The Scroll Container (The "Track") */
.scroll-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 0 14px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(122,51,255,.75) transparent;
}

/* 2. The Scroll Items (The "Cards") */
.scroll-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
}

/* Landscape Videos (16:9) */
.scroll-item.standard {
  width: 85vw;
  max-width: 400px;
}

/* Vertical Videos (9:16) */
.scroll-item.vertical {
  width: 260px;
}

.video-wrapper-vertical {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  background: #000;
  border: 1px solid rgba(255,255,255,0.1);
  aspect-ratio: 9/16;
}

/* 3. WebKit Scrollbar (Chrome/Safari/Edge) */
.scroll-track::-webkit-scrollbar {
  height: 6px;
}

.scroll-track::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 16px;
  border-radius: 999px;
}

.scroll-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(122,51,255,.45), rgba(122,51,255,.85));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}

.scroll-track::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(122,51,255,.6), rgba(122,51,255,.95));
  box-shadow: 0 0 10px rgba(122,51,255,.25);
}

/* Mobile: swipe feel (hide the bar, keep scrolling) */
@media (hover: none) and (pointer: coarse) {
  .scroll-track {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scroll-track::-webkit-scrollbar {
    display: none;
  }
}
.video-section .kicker{
  color: var(--accent);
}

/* Landscape videos (16:9) — missing in your CSS right now */
.video-wrapper-clean{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  aspect-ratio: 16 / 9;
}
.video-wrapper-clean video{
  width: 100%;
  height: 100%;
  display: block;
}

.vault-hero-sub{
  margin: 14px auto 0;
  max-width: 760px;
  color: rgba(255,255,255,0.86);
  font-size: 1.05rem;
  line-height: 1.5;
}
.vault-hero-micro{
  margin-top: 10px;
  color: rgba(255,255,255,0.55);
  font-size: .92rem;
}

/* Sticky search bar */
.vault-search{
  position: sticky;
  top: 64px;
  z-index: 90;
  background: rgba(11, 11, 16, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 14px 0;
}
.vault-search-inner{
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
#vaultSearch{
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 12px;
  color: #fff;
}
#vaultSearch:focus{
  outline: none;
  border-color: var(--accent);
  background: #000;
  box-shadow: 0 0 0 4px rgba(122,51,255,.18);
}
.vault-search-meta{
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  white-space: nowrap;
}

@media (max-width: 700px){
  .vault-search{ top: 56px; }
  .vault-search-inner{ grid-template-columns: 1fr; }
  .vault-search-meta{ white-space: normal; }
}

/* Modal tiles (non-shorts) */
.vault-tile{
  text-align: left;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.vault-thumb{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
  aspect-ratio: 16 / 9;
}
.vault-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}
.vault-play{
  position: absolute;
  inset: auto auto 12px 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  font-weight: 800;
  line-height: 1;
}
.vault-title{
  margin-top: 10px;
  color: rgba(255,255,255,.86);
  font-weight: 650;
  font-size: .95rem;
}
.vault-no-results{
  margin: 18px 0 0;
  color: rgba(255,255,255,.65);
  text-align: center;
}

/* Your modal wrapper currently targets iframe; add video support */
.modal-video-wrapper video{
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* Optional: small title bar inside modal */
.vault-modal-wrap{
  border-radius: 10px;
  overflow: hidden;
}
.vault-modal-top{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
}
.vault-modal-title{
  color: rgba(255,255,255,.90);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .2px;
}

/* === WEDDING PAGE ADDITIONS (UPDATED) === */

/* 1. The "Fit Check" Box (Branded) */
.fit-check-box {
  background: rgba(122, 51, 255, 0.05); /* Faint Purple BG */
  border-left: 3px solid #7a33ff;       /* Solid Purple Line */
  padding: 20px;
  border-radius: 0 8px 8px 0;
  margin-top: 2rem;
  transition: background 0.3s ease;
}
.fit-check-box:hover {
  background: rgba(122, 51, 255, 0.1);
}
.fit-check-title {
  display: block; 
  font-size: 0.85rem; 
  text-transform: uppercase; 
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
}

/* 2. Package Hover Glow */
.card-popular {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-popular:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px rgba(122, 51, 255, 0.25);
  border-color: #7a33ff !important;
}

/* 3. The Timeline List */
.timeline-item {
  position: relative;
  padding-left: 35px;
  margin-bottom: 2rem;
}
.timeline-marker {
  position: absolute;
  left: 0;
  top: 6px;
  height: 12px;
  width: 12px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(122, 51, 255, 0.4);
}
.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 24px;
  bottom: -24px;
  width: 2px;
  background: rgba(255,255,255,0.05);
}

/* 4. Video Modal */
.video-modal {
  position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease; pointer-events: none;
}
.video-modal.active { opacity: 1; visibility: visible; pointer-events: all; }
.video-modal-content { 
  position: relative; width: 90%; max-width: 1000px; aspect-ratio: 16/9; 
  background: #000; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border-radius: 8px; overflow: hidden;
}
.video-wrapper { position: relative; width: 100%; height: 100%; display: flex; }
.video-wrapper video { width: 100%; height: 100%; object-fit: contain; }
.video-modal-close {
  position: absolute; top: -50px; right: 0; color: #fff; font-size: 40px; font-weight: bold;
  background: none; border: none; cursor: pointer; line-height: 1; z-index: 10;
}
/* Hero Quote Block */
.hero-quote {
  font-size: 1.3rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  max-width: 1000px;
  margin: 0 auto 12px;
  line-height: 1.5;
}

.hero-quote-author {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.hero-quote-author a {
  color: var(--accent);
}

@media (max-width: 600px) {
  .hero-quote {
    font-size: 1.1rem;
  }
}

/* ==============================
   Ultra Premium Lane Wrapper + Hover Arrows
   Scoped to Video Vault lanes
   ============================== */

.lane{
  position: relative;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden; /* keeps fades + arrows clean */
}

/* Edge fades: signals “more content” without needing scrollbar */
.lane::before,
.lane::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 46px;
  pointer-events:none;
  z-index: 2;
}
.lane::before{
  left:0;
  background: linear-gradient(90deg, rgba(11,11,16,0.95), rgba(11,11,16,0));
}
.lane::after{
  right:0;
  background: linear-gradient(270deg, rgba(11,11,16,0.95), rgba(11,11,16,0));
}

/* Let the track breathe inside the lane */
.lane .scroll-track{
  padding: 10px 6px 12px 6px;
  scroll-snap-type: x proximity; /* smoother than mandatory */
  scroll-padding-left: 6px;
  scroll-padding-right: 6px;
}

/* Arrows */
.lane-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.40);
  color: rgba(255,255,255,0.92);

  display: grid;
  place-items: center;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.lane-arrow--left{ left: 10px; }
.lane-arrow--right{ right: 10px; }

/* Only show arrows on hover devices (desktop) */
@media (hover: hover) and (pointer: fine){
  .lane:hover .lane-arrow{
    opacity: 1;
    pointer-events: auto;
  }

  .lane:hover{
    border-color: rgba(122,51,255,0.16);
    box-shadow: 0 14px 44px rgba(0,0,0,0.45);
  }

  .lane-arrow:hover{
    border-color: rgba(122,51,255,0.35);
    box-shadow: 0 0 14px rgba(122,51,255,0.18);
    transform: translateY(-50%) scale(1.03);
  }

  .lane-arrow:active{
    transform: translateY(-50%) scale(0.98);
  }

  /* If JS marks them disabled, hide them */
  .lane-arrow.is-disabled{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Mobile: keep it swipe-native */
@media (hover: none) and (pointer: coarse){
  .lane{
    background: transparent;
    border: none;
  }
  .lane::before,
  .lane::after{
    width: 34px;
  }
  .lane-arrow{
    display: none;
  }
}

.page-videos .scroll-track{
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Legacy Edge */
}

.page-videos .scroll-track::-webkit-scrollbar{
  display: none;                /* Chrome, Safari */
}

/* === Headline Glow System (universal for primary headings) === */
.headline{ color:#fff; text-shadow: var(--headline-glow); }
.headline--hero{ text-shadow: var(--headline-glow); }
h1.heroA-title, .posthero h2, .visual-break-content h2, .reviews-head h2{ text-shadow: var(--headline-glow); }

/* === Utilities generated from removed inline styles (do not hand-edit) === */
.u-crgb255_255-fs1p05rem-lh1p45-m14pxauto0-maxw720px{
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.05rem !important;
  line-height: 1.45 !important;
  margin: 14px auto 0 !important;
  max-width: 720px !important;
}
.u-dflex-wrapwrap-gap12px-jccenter-mt24px{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 24px !important;
}
.u-pb0{
  padding-bottom: 0 !important;
}
.u-mt4rem-p020px-tacenter{
  margin-top: 4rem !important;
  padding: 0 20px !important;
  text-align: center !important;
}
.u-crgb255_255-fs1p3rem-fstitalic-lh1p5-n1{
  color: rgba(255,255,255,0.85) !important;
  font-size: 1.3rem !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1000px !important;
}
.u-bt1pxsolidrg-pt40px{
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 40px !important;
}
.u-cvaraccent-fs0p8rem-fw700-ls2px-mb30px-op0p8-ttuppercase{
  color: var(--accent) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-bottom: 30px !important;
  opacity: 0.8 !important;
  text-transform: uppercase !important;
}
.u-aicenter-dflex-wrapwrap-gap50px-jccenter{
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 50px !important;
  justify-content: center !important;
}
.u-dflex-fdcolumn-jcspacebetwe{
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.u-mb1p5rem{
  margin-bottom: 1.5rem !important;
}
.u-lh1p6-pl1p2rem{
  line-height: 1.6 !important;
  padding-left: 1.2rem !important;
}
.u-mt2rem{
  margin-top: 2rem !important;
}
.u-pointenone{
  pointer-events: none !important;
}
.u-chexfff-fs2p5rem-mb0-tshadow0015pxrgb1{
  color: #fff !important;
  font-size: 2.5rem !important;
  margin-bottom: 0 !important;
  text-shadow: 0 0 15px rgba(138, 43, 226, 0.8) !important;
}
.u-fs0p9rem-ls2px-op0p8-ttuppercase{
  font-size: 0.9rem !important;
  letter-spacing: 2px !important;
  opacity: 0.8 !important;
  text-transform: uppercase !important;
}
.u-pt4rem{
  padding-top: 4rem !important;
}
.u-gap30px{
  gap: 30px !important;
}
.u-cvaraccent-dblock-mb5px{
  color: var(--accent) !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.u-lh1p5{
  line-height: 1.5 !important;
}
.u-m10pxauto0-maxw740px{
  margin: 10px auto 0 !important;
  max-width: 740px !important;
}
.u-mt28px-tacenter{
  margin-top: 28px !important;
  text-align: center !important;
}
.u-ml10px{
  margin-left: 10px !important;
}
.u-mt4rem{
  margin-top: 4rem !important;
}
.u-p2p2rem-tacenter{
  padding: 2.2rem !important;
  text-align: center !important;
}
.u-cvaraccent-fs0p8rem-fw700-ls2px-mb10px-ttuppercase{
  color: var(--accent) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}
.u-mb1rem{
  margin-bottom: 1rem !important;
}
.u-dflex-wrapwrap-gap15px-jccenter{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  justify-content: center !important;
}
.u-mt0-pt2rem{
  margin-top: 0 !important;
  padding-top: 2rem !important;
}
.u-aicenter-chexfff-dflex-gap10px-n1{
  align-items: center !important;
  color: #fff !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
  opacity: 0.8 !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
.u-fs1rem-fw600-ls0p5px{
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}
.u-fs0p8em{
  font-size: 0.8em !important;
}
.u-minhei40vh-tacenter{
  min-height: 40vh !important;
  text-align: center !important;
}
.u-tacenter{
  text-align: center !important;
}
.u-mlauto-mrauto{
  margin-left: auto !important;
  margin-right: auto !important;
}
.u-mt3rem-posrelative-z5{
  margin-top: -3rem !important;
  position: relative !important;
  z-index: 5 !important;
}
.u-fs0p9rem{
  font-size: 0.9rem !important;
}
.u-m40pxauto-maxw600px-tacenter{
  margin: 40px auto !important;
  max-width: 600px !important;
  text-align: center !important;
}
.u-mt1rem{
  margin-top: 1rem !important;
}
.u-aistart{
  align-items: start !important;
}
.u-dnoneimport{
  display: none !important;
}
.u-dflex-wrapwrap-gap15px-mb1rem{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  margin-bottom: 1rem !important;
}
.u-flex10200px{
  flex: 1 0 200px !important;
}
.u-colorsdark{
  color-scheme: dark !important;
}
.u-w100pct{
  width: 100% !important;
}
.u-bordervaraccent{
  border-color: var(--accent) !important;
}
.u-cvaraccent{
  color: var(--accent) !important;
}
.u-b0-h600px-w100pct{
  border: 0 !important;
  height: 600px !important;
  width: 100% !important;
}
.u-minhei50vh{
  min-height: 50vh !important;
}
.u-h100pct-ofcover-op0p6-w100pct{
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.6 !important;
  width: 100% !important;
}
.u-crgb255_255-m0auto-maxw600px{
  color: rgba(255,255,255,0.9) !important;
  margin: 0 auto !important;
  max-width: 600px !important;
}
.u-lh1p6-mt1rem-pl1p2rem{
  line-height: 1.6 !important;
  margin-top: 1rem !important;
  padding-left: 1.2rem !important;
}
.u-bgrgb255_255{
  background: rgba(255,255,255,0.06) !important;
}
.u-dblock-fs1p1rem-mb0p5rem{
  display: block !important;
  font-size: 1.1rem !important;
  margin-bottom: 0.5rem !important;
}
.u-op0p8{
  opacity: 0.8 !important;
}
.u-aicenter-gap40px-mt0{
  align-items: center !important;
  gap: 40px !important;
  margin-top: 0 !important;
}
.u-chex7a33ff{
  color: #7a33ff !important;
}
.u-mt1p5rem{
  margin-top: 1.5rem !important;
}
.u-bgrgb255_255-b1pxsolidrg-br12px-p30px{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  padding: 30px !important;
}
.u-dblock-fs1p1rem-mb15px{
  display: block !important;
  font-size: 1.1rem !important;
  margin-bottom: 15px !important;
}
.u-crgb255_255-lh2p2-liststnone-m0-p0{
  color: rgba(255,255,255,0.85) !important;
  line-height: 2.2 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.u-mb2rem-tacenter{
  margin-bottom: 2rem !important;
  text-align: center !important;
}
.u-mb3rem-tacenter{
  margin-bottom: 3rem !important;
  text-align: center !important;
}
.u-aspect11-bgchex222-br4px-mb1rem-ovhidden-w100pct{
  aspect-ratio: 1/1 !important;
  background-color: #222 !important;
  border-radius: 4px !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
  width: 100% !important;
}
.u-h100pct-ofcover-op0p8-w100pct{
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.8 !important;
  width: 100% !important;
}
.u-lh1p2-mb1p5rem{
  line-height: 1.2 !important;
  margin-bottom: 1.5rem !important;
}
.u-fs1p05rem-lh1p6-mb1rem{
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}
.u-lh1p6-mb1rem{
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}
.u-lh1p6-mb1p5rem{
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
}
.u-bgnone-bnone-curpointer-fs1rem-p0{
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  padding: 0 !important;
}
.u-posrelative{
  position: relative !important;
}
.u-ofcover{
  object-fit: cover !important;
}
.u-aicenter-gap50px{
  align-items: center !important;
  gap: 50px !important;
}
.u-bgrgb255_255-b1pxsolidrg-br8px-p2p5rem{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  padding: 2.5rem !important;
}
.u-mb2rem{
  margin-bottom: 2rem !important;
}
.u-bghex7a33ff-br50pct-dinlinebloc-floatleft-n1{
  background: #7a33ff !important;
  border-radius: 50% !important;
  display: inline-block !important;
  float: left !important;
  height: 12px !important;
  margin-right: 15px !important;
  margin-top: 6px !important;
  width: 12px !important;
}
.u-ml30px{
  margin-left: 30px !important;
}
.u-fs1p1rem{
  font-size: 1.1rem !important;
}
.u-fs0p95rem-mt4px{
  font-size: 0.95rem !important;
  margin-top: 4px !important;
}
.u-minhei45vh{
  min-height: 45vh !important;
}
.u-bgrgb0_0_0_0{
  background: rgba(0,0,0,0.6) !important;
}
.u-m0auto-maxw600px{
  margin: 0 auto !important;
  max-width: 600px !important;
}
.u-b1pxsolidrg-dgrid-gap0-gridterepeatauto-ovhidden-p0{
  border: 1px solid rgba(255,255,255,0.1) !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.u-h100pct-minhei300px{
  height: 100% !important;
  min-height: 300px !important;
}
.u-p40px{
  padding: 40px !important;
}
.u-textdenone{
  text-decoration: none !important;
}
.u-aspect169-br4px-mb1p5rem-ofcover-w100pct{
  aspect-ratio: 16/9 !important;
  border-radius: 4px !important;
  margin-bottom: 1.5rem !important;
  object-fit: cover !important;
  width: 100% !important;
}
.u-cinherit-textdenone{
  color: inherit !important;
  text-decoration: none !important;
}
.u-fs0p95rem-mt0p5rem{
  font-size: 0.95rem !important;
  margin-top: 0.5rem !important;
}
.u-chexfff{
  color: #fff !important;
}
.u-h100pct-ofcover-op0p4-w100pct{
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.4 !important;
  width: 100% !important;
}
.u-m0auto-tacenter-w100pct{
  margin: 0 auto !important;
  text-align: center !important;
  width: 100% !important;
}
.u-chex7a33ff-dinlinebloc-fs0p85rem-fw700-n1{
  color: #7a33ff !important;
  display: inline-block !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-bottom: 15px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}
.u-fsclamp2p5re-lh1p1-mb20px{
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
}
.u-crgb255_255-dflex-fs0p9rem-gap15px-jccenter{
  color: rgba(255,255,255,0.6) !important;
  display: flex !important;
  font-size: 0.9rem !important;
  gap: 15px !important;
  justify-content: center !important;
}
.u-pt60px{
  padding-top: 60px !important;
}
.u-b0-bt1pxsolidrg-m3rem0{
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin: 3rem 0 !important;
}
.u-chexfff-fwbold-mb10px{
  color: #fff !important;
  font-weight: bold !important;
  margin-bottom: 10px !important;
}
.u-bghex7a33ff-chexfff-dgrid-fwbold-placeicenter{
  background: #7a33ff !important;
  color: #fff !important;
  display: grid !important;
  font-weight: bold !important;
  place-items: center !important;
}
.u-chexfff-dblock{
  color: #fff !important;
  display: block !important;
}
.u-crgb255_255-fs0p9rem{
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.9rem !important;
}
.u-mt4px{
  margin-top: 4px !important;
}
.u-fs0p85rem{
  font-size: 0.85rem !important;
}
.u-mlauto{
  margin-left: auto !important;
}
.u-gap20px-mt20px{
  gap: 20px !important;
  margin-top: 20px !important;
}
.u-border2pxsolidhe{
  border-left: 2px solid #fff !important;
}
.u-dblock-fs1p1rem-mb10px{
  display: block !important;
  font-size: 1.1rem !important;
  margin-bottom: 10px !important;
}
.u-mb0{
  margin-bottom: 0 !important;
}
.u-border2pxsolidva{
  border-left: 2px solid var(--accent) !important;
}
.u-cvaraccent-dblock-fs1p1rem-mb10px{
  color: var(--accent) !important;
  display: block !important;
  font-size: 1.1rem !important;
  margin-bottom: 10px !important;
}
.u-h100pct-ofcover-w100pct{
  height: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}
.u-mb5rem{
  margin-bottom: 5rem !important;
}
.u-bt1pxsolidrg-mb5rem-pt2rem{
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin-bottom: 5rem !important;
  padding-top: 2rem !important;
}
.u-fs0p9rem-fw600-mt10px{
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
}
.u-fwbold-mt10px{
  font-weight: bold !important;
  margin-top: 10px !important;
}
.u-minhei60vh{
  min-height: 60vh !important;
}
.u-dflex-wrapwrap-gap16px-jccenter{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
}
.u-bgtransparen-b1pxsolidrg-curpointer{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  cursor: pointer !important;
}
.u-mb5rem-mt5rem-p0{
  margin-bottom: 5rem !important;
  margin-top: 5rem !important;
  padding: 0 !important;
}
.u-aicenter-gap4rem{
  align-items: center !important;
  gap: 4rem !important;
}
.u-lh1p6-op0p9{
  line-height: 1.6 !important;
  opacity: 0.9 !important;
}
.u-m4rem0{
  margin: 4rem 0 !important;
}
.u-dgrid-gap15px-gridterepeat31fr-m0auto-maxw1200px{
  display: grid !important;
  gap: 15px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
}
.u-br8px-h280px-ovhidden-posrelative{
  border-radius: 8px !important;
  height: 280px !important;
  overflow: hidden !important;
  position: relative !important;
}
.u-h100pct-ofcover-transitransform0-w100pct{
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  width: 100% !important;
}
.u-crgb255_255-lh1p6-mt1p5rem-pl1em{
  color: rgba(255,255,255,0.8) !important;
  line-height: 1.6 !important;
  margin-top: 1.5rem !important;
  padding-left: 1em !important;
}
.u-mt4rem-tacenter{
  margin-top: 4rem !important;
  text-align: center !important;
}
.u-fs0p9rem-mt3rem{
  font-size: 0.9rem !important;
  margin-top: 3rem !important;
}
.u-mt3rem{
  margin-top: 3rem !important;
}
.u-minhei35vh{
  min-height: 35vh !important;
}
.u-bgrgb0_0_0_0{
  background: rgba(0,0,0,0.8) !important;
}
.u-cinherit-op0p7{
  color: inherit !important;
  opacity: 0.7 !important;
}
.u-pb30px-pt0{
  padding-bottom: 30px !important;
  padding-top: 0 !important;
}
.u-chex888-p40px-tacenter{
  color: #888 !important;
  padding: 40px !important;
  text-align: center !important;
}
.u-chex888-dnone-gridco11-p40px-tacenter{
  color: #888 !important;
  display: none !important;
  grid-column: 1/-1 !important;
  padding: 40px !important;
  text-align: center !important;
}
.u-mb0-mt30px-p20px-tacenter{
  margin-bottom: 0 !important;
  margin-top: 30px !important;
  padding: 20px !important;
  text-align: center !important;
}
.u-mb0p5rem{
  margin-bottom: 0.5rem !important;
}
.u-aicenter-dflex-minhei85vh-tacenter{
  align-items: center !important;
  display: flex !important;
  min-height: 85vh !important;
  text-align: center !important;
}
.u-fsclamp3rem6-lh1p1-mlauto-mrauto{
  font-size: clamp(3rem, 6vw, 5rem) !important;
  line-height: 1.1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.u-crgb255_255-fs1p2rem-m1p5remauto-maxw650px{
  color: rgba(255,255,255,0.95) !important;
  font-size: 1.2rem !important;
  margin: 1.5rem auto !important;
  max-width: 650px !important;
}
.u-dflex-wrapwrap-gap20px-jccenter-mt2p5rem{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  justify-content: center !important;
  margin-top: 2.5rem !important;
}
.u-bgtransparen-b1pxsolidrg{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
}
.u-mb5rem-mt40px-posrelative-tacenter-z2{
  margin-bottom: 5rem !important;
  margin-top: -40px !important;
  position: relative !important;
  text-align: center !important;
  z-index: 2 !important;
}
.u-backdrblur10px-bgrgb0_0_0_0-b1pxsolidrg-br8px-n1{
  backdrop-filter: blur(10px) !important;
  background: rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  display: inline-block !important;
  max-width: 800px !important;
  padding: 2rem !important;
}
.u-chexfff-fs1p2rem-fstitalic-mb0p5rem{
  color: #fff !important;
  font-size: 1.2rem !important;
  font-style: italic !important;
  margin-bottom: 0.5rem !important;
}
.u-fs0p85rem-ls1px-ttuppercase{
  font-size: 0.85rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.u-aicenter-gap60px{
  align-items: center !important;
  gap: 60px !important;
}
.u-crgb255_255-lh1p8-m2rem0-pl1p2rem{
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.8 !important;
  margin: 2rem 0 !important;
  padding-left: 1.2rem !important;
}
.u-fs0p95rem{
  font-size: 0.95rem !important;
}
.u-br8px-shadow010px30pxr-w100pct{
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  width: 100% !important;
}
.u-b4pxsolidhe-br8px-b30px-shadow010px40pxr-n1{
  border: 4px solid #111 !important;
  border-radius: 8px !important;
  bottom: -30px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
  left: -30px !important;
  position: absolute !important;
  width: 50% !important;
}
.u-aicenter-bgrgb255_255-b1pxsolidrg-br12px-gap50px-p40px{
  align-items: center !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 12px !important;
  gap: 50px !important;
  padding: 40px !important;
}
.u-dblock-fs1p1rem-mb5px{
  display: block !important;
  font-size: 1.1rem !important;
  margin-bottom: 5px !important;
}
.u-dgrid-gap15px-gridterepeatauto{
  display: grid !important;
  gap: 15px !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
.u-aspect916-bghex222-br8px-curpointer-ovhidden-posrelative{
  aspect-ratio: 9/16 !important;
  background: #222 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
}
.u-b10px-fs0p9rem-fwbold-l10px-posabsolute-tshadow02px4pxrgb{
  bottom: 10px !important;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  left: 10px !important;
  position: absolute !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}
.u-bnone-ovhidden-p0{
  border: none !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.u-bghex333-h150px{
  background: #333 !important;
  height: 150px !important;
}
.u-p1p5rem{
  padding: 1.5rem !important;
}
.u-h60px{
  height: 60px !important;
}
.u-m20px0-op0p2{
  margin: 20px 0 !important;
  opacity: 0.2 !important;
}
.u-fs0p95rem-lh1p8-mb2rem-pl1p2rem{
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  margin-bottom: 2rem !important;
  padding-left: 1.2rem !important;
}
.u-tacenter-w100pct{
  text-align: center !important;
  width: 100% !important;
}
.u-bglineargrad-b2pxsolidva{
  background: linear-gradient(180deg, rgba(122,51,255,0.08), transparent) !important;
  border: 2px solid var(--accent) !important;
}
.u-cvaraccent-fs0p8rem-fwbold-ls1px-mb10px-ttuppercase{
  color: var(--accent) !important;
  font-size: 0.8rem !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}
.u-dgrid-gap10px-gridterepeatauto{
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}
.u-br4px-h300px-ofcover-w100pct{
  border-radius: 4px !important;
  height: 300px !important;
  object-fit: cover !important;
  width: 100% !important;
}
.u-aiflexstart-gap50px{
  align-items: flex-start !important;
  gap: 50px !important;
}
.u-bgrgb255_255-border1pxsolidrg-mb15px{
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  margin-bottom: 15px !important;
}
.u-curpointer-fw600-p15px{
  cursor: pointer !important;
  font-weight: 600 !important;
  padding: 15px !important;
}
.u-crgb255_255-lh1p6-p015px15px{
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.6 !important;
  padding: 0 15px 15px !important;
}
/* =====================================================================
   Optional media strips inside cards (OFF by default)
   - Prevents broken placeholder icons if an image isn't set yet.
   - Enable per-card by adding data-enabled="true" on .card-media.
   Example:
     <div class="card-media" data-enabled="true"><img src="/assets/img/whatever.jpg" alt=""></div>
   ===================================================================== */
.card-media{
  display:none;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  aspect-ratio: 16 / 9;
}
.card-media[data-enabled="true"]{ display:block; }

.card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  opacity: .92;
  transform: scale(1.01);
}
@media(max-width: 600px){
  .card-media{ aspect-ratio: 3 / 2; }
}

/* === Sub-hero awards (single source of truth) === */
.subhero-proof .subhero-proof-badges{
  text-align: center;
}

.subhero-proof .subhero-proof-badges-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px 20px; /* Slightly tighter gap to help them fit */
}

/* ADJUSTED SIZE: 145px fits 3-in-a-row perfectly on desktop */
.subhero-proof-badges-row .subhero-badge{ 
  height: 145px; 
  width: auto; 
  object-fit: contain; 
}

/* Tablet Adjustment */
@media (max-width: 980px){ 
  .subhero-proof-badges-row .subhero-badge{ height: 90px; } 
}

/* Mobile Adjustment */
@media (max-width: 600px){ 
  .subhero-proof-badges-row .subhero-badge{ 
    height: 110px; /* Increased from 80px */
    margin: 5px;   /* Adds a tiny bit of breathing room if they wrap */
  } 
}

/* === HOME PAGE LAYOUT OVERRIDES === */
.section-top.container {
  padding-top: 0 !important;    /* Kills top space */
  margin-top: 0 !important;     /* Kills top margin */
  padding-bottom: 0 !important; /* Kills the 80px bottom space */
}

/* ---------- Video Modal Fix ---------- */
/* The dark background overlay */
.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9); /* 90% Dark opacity */
  z-index: 2147483647; /* On top of everything */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* When active, show it */
.modal-overlay.active {
  display: flex;
  opacity: 1;
}

/* The Close Button (The "Emergency Exit") */
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 2rem;
  width: 50px;
  height: 50px;
  line-height: 46px;
  text-align: center;
  border-radius: 50%; /* Circle shape */
  cursor: pointer;
  z-index: 10001;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #7a33ff; /* Brand Purple */
  border-color: #7a33ff;
  transform: rotate(90deg); /* Cool spin effect */
}

/* Responsive Video Container */
.modal-video-wrapper {
  position: relative;
  width: 90%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

.modal-video-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Homepage main spacing (home only) */
.home-main{padding-top:2.25rem;}
@media(max-width:700px){.home-main{padding-top:1.75rem;}}

/* ===========================
   Homepage close section
   Scoped to .home-close
   =========================== */
.home-close{
  margin-top: 2.5rem;
  padding: 2.6rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(1000px 500px at 50% -20%, rgba(122,51,255,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}

.home-close-inner{
  text-align: center;
  max-width: 980px;
}

.home-close-kicker{
  display:inline-block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .95;
  margin-bottom: .75rem;
}

.home-close-title{
  margin: 0 auto .6rem auto;
  max-width: 820px;
}

.home-close-lead{
  margin: 0 auto 1.6rem auto;
  max-width: 720px;
  opacity: .9;
  line-height: 1.55;
}

.home-close-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap: wrap;
  margin-bottom: 1.35rem;
}

.home-close-micro{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
  display:flex;
  gap: 10px 18px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: .82;
  font-size: .92rem;
}

.home-close-micro li{
  padding-left: 0;
}

.home-close-micro li::before{
  content:"•";
  color: var(--accent);
  margin-right: .55rem;
}

/* Make the homepage IG section feel like a whisper, not a finale */
.insta-container.home-insta{
  margin-top: 1.25rem;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.insta-container.home-insta a.u-aicenter-chexfff-dflex-gap10px-n1{
  justify-content:center;
  opacity: .9;
}

@media (max-width: 720px){
  .home-close{ padding: 2.6rem 0; }
  .home-close-micro{ font-size: .9rem; }
}


/* ===========================
   HOMEPAGE SPACING TUNES
   Keeps other pages untouched.
   Scope: body.home
   =========================== */

body.home .container{
  padding-top: 40px;
  padding-bottom: 52px;
}

/* Keep your intended "tight" section tight */
body.home .section-top.container{
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Reviews + close should feel connected (less vertical hesitation) */
body.home .reviewsblock.container{
  padding-top: 44px;
  padding-bottom: 40px;
}

body.home .home-close{
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Sub-hero: slightly tighter so the page gets moving faster */
body.home .subhero-proof{
  padding-top: 48px;
  padding-bottom: 14px;
}

/* Mobile: tighten a bit more to reduce scroll fatigue */
@media (max-width: 820px){
  body.home .container{ padding-top: 32px; padding-bottom: 44px; }
  body.home .reviewsblock.container{ padding-top: 36px; padding-bottom: 34px; }
  body.home .home-close{ padding-top: 46px; padding-bottom: 46px; }
  body.home .subhero-proof{ padding-top: 40px; padding-bottom: 12px; }
}

/* ===========================
   HOMEPAGE TUNING: Night → Reviews + Brand Hover Glow
   Safe: homepage-scoped + interactive-only
   =========================== */

/* Tighten the gap between "The Night Builds" visual break and Reviews */
.home-reviews{
  padding-top: 2.2rem !important; /* overrides container utility padding on homepage only */
  margin-top: -0.5rem;
}
@media (max-width: 900px){
  .home-reviews{
    padding-top: 1.8rem !important;
    margin-top: -0.25rem;
  }
}

/* Brand-consistent hover: purple accent (interactive cards only) */
.interactive-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.interactive-card:hover{
  border-color: rgba(122, 51, 255, .55);
  box-shadow:
    0 0 0 1px rgba(122, 51, 255, .22),
    0 18px 60px rgba(0,0,0,.55),
    0 0 26px rgba(122, 51, 255, .16);
}

.u-bb-1 {
  border-bottom: 1px solid var(--border);
}

/* =========================================
   EVENTS PAGE: Reviews section (match site-wide layout)
   ========================================= */

/* Header row: title left, link right */
.reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

@media (max-width: 700px){
  .reviews-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Keep CTA aligned left like the “correct” screenshot */
.reviewsblock .reviews-cta{
  text-align:left;
  margin-top:10px;
}

/* Desktop: 2-column grid (not the “wide strip” + tight gap look) */
@media (min-width: 901px){
  .reviews-grid.reviews-wide{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:5px;
    width:100%;
  }

  /* Let your global .review styles control padding/feel */
  .reviews-grid.reviews-wide .review{
    padding: 32px 28px; /* optional: remove if you want global default */
  }
}
/* =========================================================
   Planner Approved — isolated reviews block (Safari/Chrome parity)
   ========================================================= */
.planner-reviews{
  padding: 0px 0 0;
}

.planner-reviews__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}

.planner-reviews__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:18px;

  /* the "stretched" look you want */
  width: 100%;
  justify-content: stretch;
  align-items: stretch;
}

.planner-review{
  margin:0;
  padding:18px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);

  /* prevent any implicit caps from old styles */
  max-width: none;
  width: auto;
}

.planner-review footer{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.62);
}

.planner-reviews__cta{
  margin-top:18px;
}

@media (max-width: 900px){
  .planner-reviews__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Accessibility helpers
   ========================================================= */

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus,
.skip-link:focus-visible{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  padding:10px 12px;
  border-radius:10px;
  background:#000;
  color:#fff;
  z-index:9999;
  outline:2px solid rgba(122,51,255,.9);
  outline-offset:2px;
}

/* Prevent focus outlines on main content targets used for skip-link / smooth-scroll */
main:focus,
main:focus-visible,
#below-hero:focus,
#below-hero:focus-visible{
  outline:none;
}

/* Focus ring: keep it for real interactive controls; avoid giant outlines on programmatic focus targets */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid rgba(122,51,255,.9);
  outline-offset:3px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* === HERO HOMOGENIZE OVERRIDE (height + headline) ===
   Forces consistent hero height AND consistent hero H1 sizing across pages.
   This also neutralizes the old clamp utility class that was making /weddings huge. */
.heroA{ min-height: 70vh; }
.heroA--tall{ min-height: 70vh; }
.heroA--mid{  min-height: 70vh; }
.heroA--short{min-height: 70vh; }
.heroA--sub{  min-height: 70vh; }

/* Utility height overrides (these were using !important) */
.u-minhei45vh{ min-height: 70vh !important; }
.u-minhei50vh{ min-height: 70vh !important; }
.u-minhei60vh{ min-height: 70vh !important; }

/* Unified hero title sizing (wins everywhere) */
.heroA-title{
  font-size: clamp(2.8rem, 5.6vw, 4.8rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
}

/* Neutralize the old "force big weddings H1" utility */
.u-fsclamp3rem6-lh1p1-mlauto-mrauto{
  font-size: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 900px){
  .insta-grid{
    display: flex !important;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }

  .insta-item{
    flex: 0 0 75%;
    scroll-snap-align: center;
  }

  /* Default = cinematic B&W */
  .insta-img{
    filter: grayscale(100%);
    transition: filter .35s ease, transform .35s ease;
  }

  /* Center card (JS applied class) = color */
  .insta-item.is-active .insta-img{
    filter: grayscale(0%);
    transform: scale(1.02);
  }
}
/* === Header Height Standardization (Contact-style) === */
.heroA--tall,
.heroA--short,
.heroA--sub {
  min-height: 40vh;
}

.muted {
  font-weight: 400;
  opacity: 0.65;
  font-size: 0.9em;
}

/* =========================================================
   Videos Page Appendix — section grounding + rhythm
   Drop-in safe: only targets <body class="page-videos">
   ========================================================= */
.page-videos .video-section{
  margin-bottom: 2.75rem;
}

.page-videos .video-section:last-child{
  margin-bottom: 0;
}

/* Slightly roomier slabs on desktop, tighter on mobile */
@media (min-width: 768px){
  .page-videos .video-section{
    padding: 28px;
  }
}
@media (max-width: 480px){
  .page-videos .video-section{
    padding: 18px;
  }
}