/* Sitewide CSS — sourced from v8 homepage (authoritative)
   Goal: every page inherits the same visual system as the homepage.
*/
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.75rem 1rem;z-index:9999;background:#fff;color:#000;border-radius:.75rem;}


:root { --brite-yellow: #ffd700; --brite-black: #0d0d0d;
}
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; background: var(--brite-black); color: #fff; overflow-x: hidden; }
    .heading-font { font-family: 'Oswald', sans-serif; text-transform: uppercase; }

    /* STREETWEAR TEXTURES */
    .honeycomb-bg {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="100" viewBox="0 0 56 100"><path d="M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100" fill="none" stroke="%23ffd700" stroke-width="1" opacity="0.12"/></svg>');
      background-size: 28px 50px;
    }
    .grit-overlay::before {
      content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay; z-index: 100;
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="240" height="240"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="240" height="240" filter="url(%23n)" opacity=".9"/%3E%3C/svg%3E');
    }

    .hero-bg-position { object-fit: cover; object-position: center right; }

    .skew-bar {
      background: var(--brite-yellow); transform: skewY(-2.5deg);
      box-shadow: 0 20px 50px rgba(0,0,0,0.6); border-y: 4px solid #000;
    }
    .skew-content { transform: skewY(2.5deg); }

    .btn-skew {
      background: var(--brite-yellow); color: #000; font-weight: 900; text-transform: uppercase;
      clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
      display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .btn-skew:hover { transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 10px 20px rgba(255,215,0,0.4)); background: #fff; }

    .btn-ghost-skew {
      background: rgba(0,0,0,0.4); backdrop-blur: 10px; color: #fff; font-weight: 900; text-transform: uppercase;
      clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-ghost-skew:hover { background: var(--brite-yellow); color: #000; border-color: var(--brite-yellow); }

    .reveal { opacity: 0; transform: translateY(25px); transition: all 0.8s ease; }
    .reveal.show { opacity: 1; transform: translateY(0); }

    /* THE BEE ANIMATION */
    @keyframes floatBee {
      0% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-12px) rotate(4deg); }
      100% { transform: translateY(0px) rotate(0deg); }
    }
    .float-bee { animation: floatBee 4s ease-in-out infinite; }

    @media (max-width: 1024px) { body { padding-bottom: 80px; } }



/* === Domination UX/SEO fixes (non-destructive) === */

/* Prevent horizontal scroll caused by skew/clip-path elements on mobile */
html, body { overflow-x: hidden; }

/* Make form field labels pop */
form label > span { color: var(--brite-yellow) !important; }

/* Fix select dropdown list readability (mobile browsers often show white dropdown background) */
select option { color: #000 !important; background: #fff !important; }
select optgroup { color: #000 !important; background: #fff !important; }

/* Mobile bottom CTA bar: avoid overflow (100vw can cause horizontal scroll on some devices) */
.mobile-cta-bar {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.mobile-cta-bar, .mobile-cta-bar * { box-sizing: border-box; }
.mobile-cta-bar a { min-width: 0; }
.mobile-cta-bar .btn-skew { clip-path: none !important; transform: none !important; } /* square on mobile bar */

/* Extra guard: some browsers still calculate overflow from transformed children */
@media (max-width: 768px) {
  /* Hard stop on any horizontal overflow caused by transforms/clip-path on mobile */
  html, body { overflow-x: hidden; }

  .mobile-cta-bar {
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Make buttons slightly smaller so they never push past the viewport */
  .mobile-cta-bar a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.28em !important;
  }

  /* Remove ALL skew/clip/transform effects in the bottom bar on mobile */
  .mobile-cta-bar *,
  .mobile-cta-bar a,
  .mobile-cta-bar .btn-skew {
    transform: none !important;
    clip-path: none !important;
  }

  /* Keep the floating bee above the sticky bar (avoid tap overlap) */
  .contact-bee { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* Mobile menu: tighter spacing + allow scrolling to reach last links */
#mobile-menu { padding: 5.5rem 0 2.5rem; justify-content: flex-start !important; }
#mobile-menu .mobile-menu-links { gap: 0.9rem !important; max-height: 78vh; overflow-y: auto; padding: 0 1.25rem 2rem; }


/* Header offset: prevent nav covering hero */
@media (min-width: 768px) { :root {  } }

/* Non-skew CTA buttons (no clipping) */
.btn-solid{
  background: var(--yellow);
  color:#000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1px solid rgba(0,0,0,.9);
  box-shadow:0 10px 28px rgba(0,0,0,.38);
  border-radius:0;
  line-height:1.1;
}
.btn-solid:hover{filter:brightness(1.05);}

.btn-outline{
  background: transparent;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  border-radius:0;
  line-height:1.1;
}
.btn-outline:hover{border-color: rgba(255,255,255,.65);}

.form-cta-block{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Notices (form success/error) */
.notice{border:1px solid rgba(255,255,255,.12);border-left-width:6px;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.55);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);}
.notice.success{border-left-color:#22c55e;}
.notice.error{border-left-color:#ef4444;}


/* === FAQ layout (centered, not full-width) === */
.faq-section{padding-left:1.25rem;padding-right:1.25rem;}
.faq-section .faq-inner{max-width:780px;margin:0 auto;width:100%;}
.faq-section .faq-title{text-align:center;}
.faq-section .faq-divider{height:2px;max-width:220px;margin:14px auto 0 auto;background:linear-gradient(90deg, rgba(255,215,0,0), rgba(255,215,0,.9), rgba(255,215,0,0));opacity:.9;}

/* Slight glow on hover to match homepage vibe */
.faq-section details{border-radius:1rem;}
.faq-section details:hover{box-shadow:0 0 0 1px rgba(255,215,0,.18), 0 18px 45px rgba(0,0,0,.55);}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  .faq-section details, .faq-section details *{transition:none !important;}
}