/* =========================================================
   864 BLOCKBOYS
   GLOBAL DESIGN SYSTEM
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");
@font-face {
  font-family: "Allerta Stencil";
  src: url("../fonts/Allerta_Stencil/AllertaStencil-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Faster One";
  src: url("../fonts/Faster_One/FasterOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lacquer";
  src: url("../fonts/Lacquer/Lacquer-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Splash";
  src: url("../fonts/Splash/Splash-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rock Salt";
  src: url("../fonts/Rock_Salt/RockSalt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metal Mania";
  src: url("../fonts/Metal_Mania/MetalMania-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Julee";
  src: url("../fonts/Julee/Julee-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ---------------------------------------------------------
   1. CSS VARIABLES
--------------------------------------------------------- */

:root {

/* Brand colors */

--color-black: #080808;
--color-charcoal: #121212;
--color-dark-gray: #202020;

--color-white: #ffffff;
--color-off-white: #f1f0ed;

--color-gray: #9b9b9b;
--color-light-gray: #d8d8d8;

--color-red: #ff1f2d;
--color-slime: #39ff14;

/* Semantic color roles */

--color-background: var(--color-black);
--color-surface: var(--color-charcoal);
--color-surface-raised: var(--color-dark-gray);

--color-text-primary: var(--color-white);
--color-text-secondary: var(--color-light-gray);
--color-text-muted: var(--color-gray);

--color-accent: var(--color-red);
--color-action: var(--color-red);

--color-label: var(--color-slime);
--color-interactive: var(--color-slime);

/* Legacy alias retained for existing page rules */
--color-slime-green: var(--color-slime);

  /* Typography */

  --font-brand:
  "Anton",
  "Arial Narrow",
  sans-serif;

--font-display:
  "Barlow Condensed",
  "Arial Narrow",
  sans-serif;

--font-body:
  "Inter",
  "Helvetica Neue",
  Arial,
  sans-serif;

  /* Layout */

  --site-width: 1440px;

  --content-width: 1180px;

  --side-padding: 6vw;


  /* Spacing */

  --space-xs: 0.5rem;

  --space-sm: 1rem;

  --space-md: 2rem;

  --space-lg: 4rem;

  --space-xl: 7rem;

  --space-xxl: 10rem;


  /* Borders */

  --border-color: rgba(255, 255, 255, 0.18);


  /* Animation */

  --transition-fast: 180ms ease;

  --transition-medium: 350ms ease;

}



/* ---------------------------------------------------------
   2. RESET
--------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: var(--color-black);

  color: var(--color-white);

  font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
}


img,
video {
  display: block;

  max-width: 100%;
}


a {
  color: inherit;

  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}



/* ---------------------------------------------------------
   3. ACCESSIBILITY
--------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);

  outline-offset: 5px;
}



/* =========================================================
   4. GLOBAL TYPOGRAPHY
========================================================= */

/* ---------------------------------------------------------
   PRIMARY PAGE HEADLINES
--------------------------------------------------------- */

h1 {
  margin-bottom: 2rem;

  font-size: clamp(4rem, 8.5vw, 9rem);

  line-height: 0.86;

  letter-spacing: -0.035em;
}


/* ---------------------------------------------------------
   MAJOR SECTION HEADLINES
--------------------------------------------------------- */

h2 {
  margin-bottom: 1.75rem;

  font-size: clamp(3rem, 5.5vw, 6rem);

  line-height: 0.9;

  letter-spacing: -0.03em;
}


/* ---------------------------------------------------------
   PANEL / FEATURE HEADLINES
--------------------------------------------------------- */

h3 {
  margin-bottom: 1rem;

  font-size: clamp(1.9rem, 3vw, 3.4rem);

  line-height: 0.95;

  letter-spacing: -0.02em;
}


/* ---------------------------------------------------------
   CARD HEADLINES
--------------------------------------------------------- */

h4 {
  margin-bottom: 0.75rem;

  font-size: clamp(1.15rem, 1.5vw, 1.35rem);

  line-height: 1.05;

  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   BODY COPY
--------------------------------------------------------- */

p {
  max-width:
    680px;

  margin-bottom:
    1.5rem;

  color:
    var(--color-light-gray);

  font-size:
    1rem;

  line-height:
    1.7;
}


/* ---------------------------------------------------------
   SMALL BRAND / CATEGORY LABELS
--------------------------------------------------------- */



.hero-description {
  max-width: 540px;

  margin-bottom: 2.25rem;

  font-size: clamp(
    1rem,
    1.5vw,
    1.3rem
  );
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;
}

.hero-category-link {
  display: inline-block;

  color: var(--color-gray);

  text-decoration: none;

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}


.hero-category-link:hover {
  color: var(--color-slime);

  transform: translateY(-2px);
}


.hero-category-link:focus-visible {
  color: var(--color-slime);
}

/* ---------------------------------------------------------
   10. BUTTON SYSTEM
--------------------------------------------------------- */

.button {
  min-height: 54px;

  padding:
    0
    1.65rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid transparent;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}


.button:hover {
  transform: translateY(-3px);
}


.button-primary {
  background: var(--color-accent);

  color: var(--color-slime);
}


.button-primary:hover {
  background: var(--color-white);
}


.button-secondary {
  border-color:
    rgba(255, 255, 255, 0.45);

  color: var(--color-white);

  background:
    rgba(255, 255, 255, 0.02);
}


.button-secondary:hover {
  border-color: var(--color-white);

  background: var(--color-white);

  color: var(--color-slime);
}

button:disabled,
.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

button:disabled:hover,
.button:disabled:hover {
  transform: none;
}



/* ---------------------------------------------------------
   11. HERO SCROLL INDICATOR
--------------------------------------------------------- */

.scroll-indicator {
  position: absolute;

  right: var(--side-padding);

  bottom: 70px;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.4rem;

  color: var(--color-gray);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.scroll-indicator span {
  color: var(--color-slime);

  font-size: 1.4rem;
}



/* ---------------------------------------------------------
   12. CONTENT SECTIONS
--------------------------------------------------------- */

.studio-preview,
.music-preview,
.fashion-preview,
.culture-preview,
.final-cta {
  position: relative;

  padding:
    var(--space-xxl)
    0;

  border-top:
    1px solid var(--border-color);
}


.section-label {
  margin-bottom: 2rem;
}


.section-container > p:not(.section-label) {
  font-size: clamp(
    1rem,
    1.5vw,
    1.25rem
  );

  margin-bottom: 2.5rem;
}



/* ---------------------------------------------------------
   13. STUDIO SECTION
--------------------------------------------------------- */

.studio-preview {
  background: var(--color-off-white);

  color: var(--color-accent);
}


.studio-preview .section-label {
  color: var(--color-slime);
}


.studio-preview p {
  color: #444444;
}


.studio-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 2rem;
}


.studio-preview .button-primary {
  background: var(--color-black);

  color: var(--color-white);
}


.studio-preview .button-primary:hover {
  background: var(--color-accent);

  color: var(--color-slime);
}



/* ---------------------------------------------------------
   14. TEXT LINKS
--------------------------------------------------------- */

.text-link {
  position: relative;

  display: inline-flex;

  align-items: center;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.text-link::after {
  content: "→";

  margin-left: 0.7rem;

  transition:
    transform var(--transition-fast);
}


.text-link:hover::after {
  transform: translateX(6px);
}



/* ---------------------------------------------------------
   15. MUSIC SECTION
--------------------------------------------------------- */

.music-preview {
  background: var(--color-black);
}



/* ---------------------------------------------------------
   16. FASHION SECTION
--------------------------------------------------------- */

.fashion-preview {
  background: var(--color-charcoal);
}



/* ---------------------------------------------------------
   17. 864 SECTION
--------------------------------------------------------- */

.culture-preview {
  background: #101010;
}



/* ---------------------------------------------------------
   18. FINAL CTA
--------------------------------------------------------- */

.final-cta {
  min-height: 70vh;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      #171717,
      #050505
    );
}


.final-cta h2 {
  max-width: 850px;
}



/* ---------------------------------------------------------
   19. FOOTER
--------------------------------------------------------- */


.footer-container {
  text-align: center;
}

.site-footer {
  padding:
    5rem
    0
    3rem;

  border-top:
    1px solid var(--border-color);

  background: #050505;
}


.footer-logo {
  display: inline-block;
  margin: 0 auto 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}


.footer-container > p {
  margin: 0 auto 2rem;
}


.footer-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 2rem;
  margin-bottom: 4rem;
  text-align: center;
}


.footer-navigation a {
  color: var(--color-gray);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition:
    color var(--transition-fast);
}


.footer-navigation a:hover {
  color: var(--color-white);
}


.copyright {
  margin-left: auto;
  margin-right: auto;
  color: #777777;
  font-size: 0.72rem;
  text-align: center;
}



/* ---------------------------------------------------------
   20. TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

  :root {
    --side-padding: 5vw;
  }


  .primary-navigation {
    gap: 1.25rem;
  }


  .header-cta {
    display: none;
  }

}



/* ---------------------------------------------------------
   21. MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  :root {

    --side-padding: 1.35rem;

    --space-xxl: 7rem;

  }

.hero-topline {
  align-items: flex-start;

  margin-bottom: 1.5rem;
}


.hero-category {
  display: none;
}


.hero-lower {
  display: block;
}


.hero-index {
  display: none;
}


.hero-microcopy {
  font-size: 0.74rem;

  max-width: 90%;
}


  .header-container {
    min-height: 72px;
  }


  .mobile-menu-button {
    display: block;
  }


  .primary-navigation {
    display: none;
  }

  .primary-navigation.is-open {
    display: flex;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    padding: 2rem var(--side-padding);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--color-black);
    border-bottom: 1px solid var(--border-color);
  }


  .hero {
    min-height: 100svh;

    padding-top: 125px;

    padding-bottom: 40px;
  }


  .hero h1 {
    font-size:
      clamp(
        4.2rem,
        21vw,
        7rem
      );
  }


  .hero-description {
    max-width: 90%;
  }


  .hero-actions {
    flex-direction: column;

    align-items: stretch;

    max-width: 420px;
  }


  .button {
    width: 100%;
  }


  .scroll-indicator {
    display: none;
  }


  .studio-actions {
    flex-direction: column;

    align-items: flex-start;
  }


  .studio-actions .button {
    width: auto;
  }


  .footer-navigation {
    flex-direction: column;
  }

}



/* ---------------------------------------------------------
   22. SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 420px) {

  h1 {
    letter-spacing: -0.05em;
  }


  h2 {
    font-size: 3.15rem;
  }

}



/* ---------------------------------------------------------
   23. REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }

}


/* =========================================================
   FASHION PAGE — 864 EDIT
========================================================= */


/* ---------------------------------------------------------
   FASHION HERO
--------------------------------------------------------- */

.fashion-hero {
  min-height: 88svh;

  display: flex;

  align-items: flex-end;

  padding:
    150px
    0
    90px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(255, 31, 45, 0.09),
      transparent 23%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(255, 255, 255, 0.05),
      transparent 28%
    ),
    linear-gradient(
      125deg,
      #080808,
      #181818 58%,
      #060606
    );

  border-bottom:
    1px solid var(--border-color);
}


.fashion-hero-description {
  max-width: 660px;

  margin-bottom: 2rem;

  color: var(--color-light-gray);

  font-size: clamp(
    1.05rem,
    1.6vw,
    1.35rem
  );
}



/* ---------------------------------------------------------
   FASHION EXPLORER
--------------------------------------------------------- */

.fashion-explorer {
  padding:
    8rem
    0
    10rem;

  background:
    var(--color-off-white);

  color: var(--color-accent);
}


.fashion-explorer .section-label {
  color: var(--color-slime);
}


.fashion-explorer-heading {
  max-width: 820px;

  margin-bottom: 4rem;
}


.fashion-explorer-heading > p:not(.section-label) {
  max-width: 580px;

  color: #555555;

  font-size: 1.05rem;
}



/* ---------------------------------------------------------
   FASHION TAB NAVIGATION
--------------------------------------------------------- */

.fashion-tabs {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border:
    1px solid #cccccc;

  background:
    #e9e6de;
}


.fashion-tab {
  position: relative;

  min-height: 70px;

  padding:
    1rem
    1.25rem;

  border: 0;

  border-right:
    1px solid #cccccc;

  background:
    transparent;

  color:
    #686868;

  cursor: pointer;

  font-size: 0.74rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}


.fashion-tab:last-child {
  border-right: 0;
}


.fashion-tab:hover {
  background:
    rgba(255, 255, 255, 0.6);

  color: var(--color-accent);
}


.fashion-tab.is-active {
  background:
    var(--color-black);

  color:
    var(--color-white);
}


.fashion-tab.is-active::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: -9px;

  z-index: 3;

  width: 18px;

  height: 18px;

  background:
    var(--color-black);

  transform:
    translateX(-50%)
    rotate(45deg);
}



/* ---------------------------------------------------------
   FASHION PANELS
--------------------------------------------------------- */

.fashion-panel {
  min-height: 600px;

  padding:
    clamp(2.5rem, 5vw, 5rem);

  border:
    1px solid #cccccc;

  border-top: 0;

  background:
    var(--color-white);

  color: var(--color-accent);

  animation:
    fashionPanelIn
    320ms
    ease;
}


.fashion-panel[hidden] {
  display: none;
}


@keyframes fashionPanelIn {

  from {
    opacity: 0;

    transform:
      translateY(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


.fashion-panel .panel-heading {
  max-width: 760px;

  margin-bottom: 3rem;
}


.fashion-panel .panel-heading h3 {
  color: var(--color-accent);

  font-size:
    clamp(
      2.6rem,
      5vw,
      5rem
    );
}


.fashion-panel .panel-heading > p:not(.section-label) {
  color:
    #555555;
}



/* ---------------------------------------------------------
   THIS WEEK — FEATURE CARDS
--------------------------------------------------------- */

.fashion-card-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1rem;
}


.fashion-card {
  overflow: hidden;

  border:
    1px solid #d0d0d0;

  background:
    #f8f6f1;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}


.fashion-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.09);
}


.fashion-media-placeholder {
  position: relative;

  min-height: 320px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #111111,
      #2a2a2a
    );

  color:
    #777777;
}


.fashion-media-placeholder::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.04) 50%,
      transparent 70%
    );
}


.fashion-media-placeholder span {
  position: relative;

  z-index: 2;

  font-size: 0.66rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.fashion-card-content {
  padding: 1.6rem;
}


.fashion-card-label {
  display: block;

  margin-bottom: 1rem;

  color: var(--color-slime);

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.fashion-card h4 {
  margin:
    0 0 0.8rem;

  font-size: 1.4rem;

  line-height: 1.05;
}


.fashion-card p {
  color: #555555;
}



/* ---------------------------------------------------------
   LOCAL SHOP LIST
--------------------------------------------------------- */

.local-shop-list {
  border-top:
    1px solid #d0d0d0;
}


.local-shop-card {
  display: grid;

  grid-template-columns:
    minmax(200px, 0.8fr)
    minmax(300px, 1.2fr);

  gap: 4rem;

  padding:
    2.5rem
    0;

  border-bottom:
    1px solid #d0d0d0;

  transition:
    padding-left var(--transition-medium),
    background-color var(--transition-medium);
}


.local-shop-card:hover {
  padding-left: 1.25rem;

  background:
    #f6f3ed;
}


.shop-category {
  display: block;

  margin-bottom: 0.8rem;

  color: var(--color-slime);

  font-size: 0.66rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.local-shop-card h4 {
  margin:
    0 0 0.4rem;

  font-size: 1.6rem;
}


.local-shop-card p {
  margin-bottom: 0;

  color: #555555;
}


.shop-details p {
  margin-bottom: 1rem;
}



/* ---------------------------------------------------------
   TREND LIST
--------------------------------------------------------- */

.trend-list {
  border-top:
    1px solid #d0d0d0;
}


.trend-card {
  display: grid;

  grid-template-columns:
    80px
    1fr;

  gap: 2rem;

  padding:
    2.5rem
    0;

  border-bottom:
    1px solid #d0d0d0;
}


.trend-number {
  color: var(--color-slime);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.13em;
}


.trend-card h4 {
  margin:
    0 0 0.8rem;

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.5rem
    );
}


.trend-card p {
  max-width: 680px;

  margin-bottom: 0;

  color: #555555;
}



/* ---------------------------------------------------------
   VALUE FINDS
--------------------------------------------------------- */

.value-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1rem;
}


.value-card {
  min-height: 260px;

  padding: 2rem;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border:
    1px solid #d0d0d0;

  background:
    #f6f3ed;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium);
}


.value-card:hover {
  transform:
    translateY(-5px);

  background:
    var(--color-white);
}


.value-tier {
  margin-bottom: auto;

  color: var(--color-slime);

  font-size: 0.66rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.value-card h4 {
  margin:
    3rem
    0
    0.7rem;

  font-size: 1.5rem;
}


.value-card p {
  margin-bottom: 0;

  color: #555555;
}



/* ---------------------------------------------------------
   LOCAL SPOTLIGHT
--------------------------------------------------------- */

.featured-local-fashion {
  padding:
    9rem
    0;

  background:
    #101010;

  border-top:
    1px solid var(--border-color);
}


.featured-local-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.8fr);

  gap: 4rem;

  align-items: center;

  margin-top: 3rem;
}


.featured-local-placeholder {
  min-height: 520px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      140deg,
      #191919,
      #282828
    );

  border:
    1px solid #303030;

  color:
    #717171;
}


.featured-local-placeholder span {
  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.featured-local-category {
  display: block;

  margin-bottom: 1.2rem;

  color: var(--color-slime);

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.featured-local-copy h3 {
  margin:
    0 0 1.5rem;

  color:
    var(--color-white);

  font-size:
    clamp(
      2.3rem,
      4vw,
      4.5rem
    );
}


.featured-local-copy p {
  margin-bottom: 2rem;
}



/* ---------------------------------------------------------
   FASHION DISCOVERY
--------------------------------------------------------- */

.fashion-discovery {
  padding:
    9rem
    0;

  background:
    var(--color-black);
}


.discovery-links {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1rem;

  margin-top: 3rem;
}


.discovery-link {
  min-height: 260px;

  padding: 2rem;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border:
    1px solid var(--border-color);

  background:
    #0e0e0e;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium),
    border-color var(--transition-medium);
}


.discovery-link:hover {
  transform:
    translateY(-5px);

  border-color:
    #555555;

  background:
    #171717;
}


.discovery-link > span:first-child {
  color: var(--color-slime);

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.discovery-link strong {
  max-width: 280px;

  color:
    var(--color-white);

  font-size:
    1.25rem;

  line-height: 1.2;
}


.discovery-link > span:last-child {
  color:
    var(--color-gray);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}



/* ---------------------------------------------------------
   CURRENT FASHION NAV ITEM
--------------------------------------------------------- */








/* ---------------------------------------------------------
   FASHION — TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .fashion-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .fashion-card:last-child {
    grid-column:
      1 / -1;
  }


  .value-grid {
    grid-template-columns:
      1fr;
  }


  .featured-local-layout {
    grid-template-columns:
      1fr;
  }


  .featured-local-placeholder {
    min-height: 400px;
  }


  .discovery-links {
    grid-template-columns:
      1fr;
  }

}



/* ---------------------------------------------------------
   FASHION — MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .fashion-hero {
    min-height: auto;

    padding:
      125px
      0
      75px;
  }


  .fashion-explorer {
    padding:
      6rem
      0;
  }


  .fashion-tabs {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .fashion-tab {
    border-bottom:
      1px solid #cccccc;
  }


  .fashion-tab:nth-child(2) {
    border-right: 0;
  }


  .fashion-tab:nth-child(3),
  .fashion-tab:nth-child(4) {
    border-bottom: 0;
  }


  .fashion-panel {
    min-height: auto;

    padding:
      2rem
      1.25rem;
  }


  .fashion-card-grid {
    grid-template-columns:
      1fr;
  }


  .fashion-card:last-child {
    grid-column: auto;
  }


  .fashion-media-placeholder {
    min-height: 260px;
  }


  .local-shop-card {
    grid-template-columns:
      1fr;

    gap: 1.5rem;
  }


  .local-shop-card:hover {
    padding-left: 0;
  }


  .trend-card {
    grid-template-columns:
      45px
      1fr;

    gap: 1rem;
  }


  .featured-local-fashion,
  .fashion-discovery {
    padding:
      6rem
      0;
  }


  .featured-local-placeholder {
    min-height: 320px;
  }

}

/* =========================================================
   864 PAGE — LOCAL DISCOVERY EXPERIENCE
========================================================= */


/* ---------------------------------------------------------
   864 HERO
--------------------------------------------------------- */

.local-hero {
  min-height: 88svh;

  display: flex;

  align-items: flex-end;

  padding:
    150px
    0
    90px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 25%,
      rgba(255, 31, 45, 0.09),
      transparent 24%
    ),
    radial-gradient(
      circle at 16% 82%,
      rgba(255, 255, 255, 0.05),
      transparent 28%
    ),
    linear-gradient(
      125deg,
      #080808,
      #161616 58%,
      #050505
    );

  border-bottom:
    1px solid var(--border-color);
}


.local-hero-description {
  max-width: 650px;

  margin-bottom: 2rem;

  color:
    var(--color-light-gray);

  font-size:
    clamp(
      1.05rem,
      1.6vw,
      1.35rem
    );
}



/* ---------------------------------------------------------
   LOCAL EXPLORER
--------------------------------------------------------- */

.local-explorer {
  padding:
    8rem
    0
    10rem;

  background:
    var(--color-off-white);

  color: var(--color-accent);
}


.local-explorer .section-label {
  color: var(--color-slime);
}


.local-explorer-heading {
  max-width:
    820px;

  margin-bottom:
    4rem;
}


.local-explorer-heading > p:not(.section-label) {
  max-width:
    600px;

  color:
    #555555;

  font-size:
    1.05rem;
}



/* ---------------------------------------------------------
   LOCAL TAB NAVIGATION
--------------------------------------------------------- */

.local-tabs {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  border:
    1px solid #cccccc;

  background:
    #e9e6de;
}


.local-tab {
  position:
    relative;

  min-height:
    70px;

  padding:
    1rem
    1.25rem;

  border:
    0;

  border-right:
    1px solid #cccccc;

  background:
    transparent;

  color:
    #686868;

  cursor:
    pointer;

  font-size:
    0.74rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}


.local-tab:last-child {
  border-right:
    0;
}


.local-tab:hover {
  background:
    rgba(255, 255, 255, 0.6);

  color: var(--color-accent);
}


.local-tab.is-active {
  background:
    var(--color-black);

  color:
    var(--color-white);
}


.local-tab.is-active::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    -9px;

  z-index:
    3;

  width:
    18px;

  height:
    18px;

  background:
    var(--color-black);

  transform:
    translateX(-50%)
    rotate(45deg);
}



/* ---------------------------------------------------------
   LOCAL PANELS
--------------------------------------------------------- */

.local-panel {
  min-height:
    600px;

  padding:
    clamp(
      2.5rem,
      5vw,
      5rem
    );

  border:
    1px solid #cccccc;

  border-top:
    0;

  background:
    var(--color-white);

  color: var(--color-accent);

  animation:
    localPanelIn
    320ms
    ease;
}


.local-panel[hidden] {
  display:
    none;
}


@keyframes localPanelIn {

  from {
    opacity:
      0;

    transform:
      translateY(10px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


.local-panel .panel-heading {
  max-width:
    760px;

  margin-bottom:
    3rem;
}


.local-panel .panel-heading h3 {
  color: var(--color-accent);

  font-size:
    clamp(
      2.6rem,
      5vw,
      5rem
    );
}


.local-panel .panel-heading > p:not(.section-label) {
  color:
    #555555;
}



/* ---------------------------------------------------------
   EVENTS
--------------------------------------------------------- */

.event-list {
  border-top:
    1px solid #d0d0d0;
}


.event-card {
  display:
    grid;

  grid-template-columns:
    110px
    minmax(0, 1fr)
    auto;

  gap:
    2rem;

  align-items:
    center;

  padding:
    2rem
    0;

  border-bottom:
    1px solid #d0d0d0;

  transition:
    padding-left var(--transition-medium),
    background-color var(--transition-medium);
}


.event-card:hover {
  padding-left:
    1rem;

  background:
    #f6f3ed;
}


.event-date {
  min-height:
    88px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid #c9c9c9;

  background:
    #f4f1ea;
}


.event-month {
  margin-bottom:
    0.2rem;

  color: var(--color-slime);

  font-size:
    0.64rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.event-date strong {
  color: var(--color-accent);

  font-size:
    1.8rem;

  line-height:
    1;
}


.event-category {
  display:
    block;

  margin-bottom:
    0.6rem;

  color: var(--color-slime);

  font-size:
    0.65rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.event-main h4 {
  margin:
    0
    0
    0.35rem;

  font-size:
    clamp(
      1.4rem,
      2vw,
      2rem
    );

  line-height:
    1.05;
}


.event-main p {
  margin-bottom:
    0;

  color:
    #555555;
}


.event-action {
  display:
    flex;

  align-items:
    center;
}



/* ---------------------------------------------------------
   FOOD / LOCAL FEATURE CARDS
--------------------------------------------------------- */

.local-card-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;
}


.local-feature-card {
  overflow:
    hidden;

  border:
    1px solid #d0d0d0;

  background:
    #f8f6f1;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}


.local-feature-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0
    18px
    45px
    rgba(0, 0, 0, 0.09);
}


.local-media-placeholder {
  position:
    relative;

  min-height:
    300px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    linear-gradient(
      140deg,
      #121212,
      #2a2a2a
    );

  color:
    #757575;
}


.local-media-placeholder::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.04) 50%,
      transparent 70%
    );
}


.local-media-placeholder span {
  position:
    relative;

  z-index:
    2;

  font-size:
    0.66rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.local-card-content {
  padding:
    1.6rem;
}


.local-card-label {
  display:
    block;

  margin-bottom:
    1rem;

  color: var(--color-slime);

  font-size:
    0.65rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.local-feature-card h4 {
  margin:
    0
    0
    0.8rem;

  font-size:
    1.45rem;

  line-height:
    1.05;
}


.local-feature-card p {
  color:
    #555555;
}



/* ---------------------------------------------------------
   PLACES
--------------------------------------------------------- */

.place-list {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;
}


.place-card {
  min-height:
    320px;

  padding:
    2rem;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid #d0d0d0;

  background:
    #f6f3ed;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium);
}


.place-card:hover {
  transform:
    translateY(-5px);

  background:
    var(--color-white);
}


.place-type {
  display:
    block;

  margin-bottom:
    auto;

  color: var(--color-slime);

  font-size:
    0.66rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.place-card h4 {
  margin:
    3rem
    0
    0.5rem;

  font-size:
    1.7rem;

  line-height:
    1.05;
}


.place-card > p {
  margin-bottom:
    1.5rem;

  color:
    #666666;
}


.place-description p {
  margin-bottom:
    0;

  color:
    #555555;
}



/* ---------------------------------------------------------
   CULTURE
--------------------------------------------------------- */

.culture-feature-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;
}


.culture-card {
  min-height:
    300px;

  padding:
    2rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  border:
    1px solid #d0d0d0;

  background:
    #f6f3ed;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium);
}


.culture-card:hover {
  transform:
    translateY(-5px);

  background:
    var(--color-white);
}


.culture-label {
  margin-bottom:
    auto;

  color: var(--color-slime);

  font-size:
    0.66rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.culture-card h4 {
  margin:
    3rem
    0
    0.8rem;

  font-size:
    1.6rem;
}


.culture-card p {
  color:
    #555555;
}



/* ---------------------------------------------------------
   CURRENT 864 PICK
--------------------------------------------------------- */

.local-spotlight {
  padding:
    9rem
    0;

  background:
    #101010;

  border-top:
    1px solid var(--border-color);
}


.local-spotlight-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.8fr);

  gap:
    4rem;

  align-items:
    center;

  margin-top:
    3rem;
}


.local-spotlight-placeholder {
  min-height:
    520px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    linear-gradient(
      140deg,
      #191919,
      #282828
    );

  border:
    1px solid #303030;

  color:
    #707070;
}


.local-spotlight-placeholder span {
  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.spotlight-category {
  display:
    block;

  margin-bottom:
    1.2rem;

  color: var(--color-slime);

  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.local-spotlight-copy h3 {
  margin:
    0
    0
    1.5rem;

  color:
    var(--color-white);

  font-size:
    clamp(
      2.3rem,
      4vw,
      4.5rem
    );
}


.local-spotlight-copy p {
  margin-bottom:
    2rem;

  color:
    var(--color-light-gray);
}



/* ---------------------------------------------------------
   LOCAL DISCOVERY / INTERNAL RETENTION
--------------------------------------------------------- */

.local-discovery {
  padding:
    9rem
    0;

  background:
    var(--color-black);
}


.local-discovery .discovery-links {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;

  margin-top:
    3rem;
}


.local-discovery .discovery-link {
  min-height:
    260px;

  padding:
    2rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid var(--border-color);

  background:
    #0e0e0e;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium),
    border-color var(--transition-medium);
}


.local-discovery .discovery-link:hover {
  transform:
    translateY(-5px);

  border-color:
    #555555;

  background:
    #171717;
}


.local-discovery .discovery-link > span:first-child {
  color: var(--color-slime);

  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.local-discovery .discovery-link strong {
  max-width:
    280px;

  color:
    var(--color-white);

  font-size:
    1.25rem;

  line-height:
    1.2;
}


.local-discovery .discovery-link > span:last-child {
  color:
    var(--color-gray);

  font-size:
    0.7rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}



/* ---------------------------------------------------------
   CURRENT NAV ITEM
--------------------------------------------------------- */








/* ---------------------------------------------------------
   864 — TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .local-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .local-feature-card:last-child {
    grid-column:
      1 / -1;
  }


  .place-list {
    grid-template-columns:
      1fr;
  }


  .culture-feature-grid {
    grid-template-columns:
      1fr;
  }


  .local-spotlight-layout {
    grid-template-columns:
      1fr;
  }


  .local-spotlight-placeholder {
    min-height:
      400px;
  }


  .local-discovery .discovery-links {
    grid-template-columns:
      1fr;
  }

}



/* ---------------------------------------------------------
   864 — MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .local-hero {
    min-height:
      auto;

    padding:
      125px
      0
      75px;
  }


  .local-explorer {
    padding:
      6rem
      0;
  }


  .local-tabs {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .local-tab {
    border-bottom:
      1px solid #cccccc;
  }


  .local-tab:nth-child(2) {
    border-right:
      0;
  }


  .local-tab:nth-child(3),
  .local-tab:nth-child(4) {
    border-bottom:
      0;
  }


  .local-panel {
    min-height:
      auto;

    padding:
      2rem
      1.25rem;
  }


  .event-card {
    grid-template-columns:
      72px
      1fr;

    gap:
      1rem;
  }


  .event-action {
    grid-column:
      2;

    margin-top:
      0.5rem;
  }


  .event-date {
    min-height:
      72px;
  }


  .local-card-grid {
    grid-template-columns:
      1fr;
  }


  .local-feature-card:last-child {
    grid-column:
      auto;
  }


  .local-media-placeholder {
    min-height:
      260px;
  }


  .place-list {
    grid-template-columns:
      1fr;
  }


  .culture-feature-grid {
    grid-template-columns:
      1fr;
  }


  .local-spotlight,
  .local-discovery {
    padding:
      6rem
      0;
  }


  .local-spotlight-placeholder {
    min-height:
      320px;
  }

}

/* =========================================================
   MUSIC PAGE — GVB ENTERTAINMENT
========================================================= */


/* ---------------------------------------------------------
   MUSIC HERO
--------------------------------------------------------- */

.music-hero {
  min-height: 88svh;

  display: flex;

  align-items: flex-end;

  padding:
    150px
    0
    90px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 76% 28%,
      rgba(255, 31, 45, 0.09),
      transparent 24%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(255, 255, 255, 0.05),
      transparent 28%
    ),
    linear-gradient(
      125deg,
      #070707,
      #171717 58%,
      #050505
    );

  border-bottom:
    1px solid var(--border-color);
}


.music-hero-description {
  max-width: 650px;

  margin-bottom: 2rem;

  color:
    var(--color-light-gray);

  font-size:
    clamp(
      1.05rem,
      1.6vw,
      1.35rem
    );
}



/* ---------------------------------------------------------
   FEATURED RELEASE
--------------------------------------------------------- */

.featured-release {
  padding:
    9rem
    0;

  background:
    var(--color-off-white);

  color: var(--color-accent);
}


.featured-release .section-label {
  color: var(--color-slime);
}


.featured-release-heading {
  max-width:
    850px;

  margin-bottom:
    4rem;
}


.featured-release-card {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.85fr);

  gap:
    4rem;

  align-items:
    center;
}



/* ---------------------------------------------------------
   FEATURED ARTWORK PLACEHOLDER
--------------------------------------------------------- */

.release-art-placeholder {
  aspect-ratio:
    1 / 1;

  min-height:
    460px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      #111111,
      #292929
    );

  border:
    1px solid #d0d0d0;

  color:
    #777777;

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}


.release-art-placeholder:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0
    25px
    60px
    rgba(0, 0, 0, 0.12);
}


.release-art-placeholder span {
  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}



/* ---------------------------------------------------------
   FEATURED RELEASE INFO
--------------------------------------------------------- */

.release-info {
  max-width:
    520px;
}


.release-type {
  margin-bottom:
    1rem;

  color: var(--color-slime);

  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.release-info h3 {
  margin:
    0
    0
    1.5rem;

  color: var(--color-accent);

  font-size:
    clamp(
      2.6rem,
      4vw,
      4.8rem
    );

  line-height:
    0.95;
}


.release-info > p {
  color:
    #555555;
}


.release-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    0.8rem;

  margin-top:
    2rem;
}


.featured-release .button-secondary {
  border-color:
    #999999;

  color:
    var(--color-slime);
}


.featured-release .button-secondary:hover {
  background:
    var(--color-black);

  border-color:
    var(--color-slime);

  color:
    var(--color-white);
}


.release-placeholder-note {
  margin-top:
    1.5rem;

  color:
    #777777 !important;

  font-size:
    0.72rem;
}



/* ---------------------------------------------------------
   RELEASE CATALOG
--------------------------------------------------------- */

.release-catalog {
  padding:
    9rem
    0;

  background:
    #090909;

  border-top:
    1px solid var(--border-color);
}


.catalog-heading {
  max-width:
    780px;

  margin-bottom:
    4rem;
}


.catalog-heading > p:not(.section-label) {
  max-width:
    560px;
}



/* ---------------------------------------------------------
   RELEASE GRID
--------------------------------------------------------- */

.release-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;
}


.release-card {
  overflow:
    hidden;

  border:
    1px solid var(--border-color);

  background:
    #101010;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium),
    border-color var(--transition-medium);
}


.release-card:hover {
  transform:
    translateY(-6px);

  border-color:
    #444444;

  background:
    #151515;
}



/* ---------------------------------------------------------
   RELEASE CARD ART
--------------------------------------------------------- */

.release-card-art {
  aspect-ratio:
    1 / 1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    linear-gradient(
      145deg,
      #161616,
      #2b2b2b
    );

  border-bottom:
    1px solid var(--border-color);

  color:
    #777777;
}


.release-card-art span {
  font-size:
    0.66rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}



/* ---------------------------------------------------------
   RELEASE CARD CONTENT
--------------------------------------------------------- */

.release-card-content {
  padding:
    1.6rem;
}


.release-card-label {
  display:
    block;

  margin-bottom:
    1rem;

  color: var(--color-slime);

  font-size:
    0.64rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.release-card h3 {
  margin:
    0
    0
    0.6rem;

  color:
    var(--color-white);

  font-size:
    1.5rem;

  line-height:
    1.05;
}


.release-card p {
  color:
    var(--color-gray);
}



/* ---------------------------------------------------------
   MUSIC VISUALS
--------------------------------------------------------- */

.music-visuals {
  padding:
    9rem
    0;

  background:
    var(--color-charcoal);

  border-top:
    1px solid var(--border-color);
}


.visuals-heading {
  max-width:
    800px;

  margin-bottom:
    4rem;
}


.visuals-heading > p:not(.section-label) {
  max-width:
    600px;
}



/* ---------------------------------------------------------
   VISUAL GRID
--------------------------------------------------------- */

.visual-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    1rem;
}


.visual-card {
  overflow:
    hidden;

  border:
    1px solid var(--border-color);

  background:
    #101010;

  transition:
    transform var(--transition-medium),
    border-color var(--transition-medium);
}


.visual-card:hover {
  transform:
    translateY(-6px);

  border-color:
    #4a4a4a;
}



/* ---------------------------------------------------------
   VIDEO PLACEHOLDER
--------------------------------------------------------- */

.video-placeholder {
  position:
    relative;

  aspect-ratio:
    16 / 9;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    linear-gradient(
      140deg,
      #101010,
      #282828
    );
}


.video-placeholder::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 31, 45, 0.08),
      transparent 35%
    );
}


.play-symbol {
  position:
    relative;

  z-index:
    2;

  width:
    68px;

  height:
    68px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid rgba(255, 255, 255, 0.35);

  border-radius:
    50%;

  color:
    var(--color-white);

  font-size:
    1.2rem;

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}


.visual-card:hover .play-symbol {
  transform:
    scale(1.08);

  background:
    var(--color-accent);

  color: var(--color-accent);
}



/* ---------------------------------------------------------
   VISUAL CARD INFO
--------------------------------------------------------- */

.visual-card-info {
  padding:
    1.5rem;
}


.visual-card-info > span {
  display:
    block;

  margin-bottom:
    0.8rem;

  color: var(--color-slime);

  font-size:
    0.64rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.visual-card-info h3 {
  margin:
    0
    0
    0.5rem;

  color:
    var(--color-white);

  font-size:
    1.5rem;
}


.visual-card-info p {
  margin-bottom:
    0;

  color:
    var(--color-gray);
}



/* ---------------------------------------------------------
   GVB ENTERTAINMENT ABOUT
--------------------------------------------------------- */

.gvb-about {
  padding:
    9rem
    0;

  background:
    var(--color-off-white);

  color: var(--color-accent);
}


.gvb-about .section-label {
  color: var(--color-slime);
}


.gvb-about h2 {
  color: var(--color-accent);
}


.gvb-about-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap:
    5rem;

  margin-top:
    4rem;

  padding-top:
    3rem;

  border-top:
    1px solid #cccccc;
}


.gvb-about-lead {
  color: var(--color-accent);

  font-size:
    clamp(
      1.4rem,
      2.3vw,
      2.2rem
    );

  line-height:
    1.25;
}


.gvb-about-copy p {
  color:
    #555555;
}



/* ---------------------------------------------------------
   MUSIC DISCOVERY / RETENTION
--------------------------------------------------------- */

.music-discovery {
  padding:
    9rem
    0;

  background:
    var(--color-black);

  border-top:
    1px solid var(--border-color);
}


.music-discovery .discovery-links {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;

  margin-top:
    3rem;
}


.music-discovery .discovery-link {
  min-height:
    260px;

  padding:
    2rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid var(--border-color);

  background:
    #0e0e0e;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium),
    border-color var(--transition-medium);
}


.music-discovery .discovery-link:hover {
  transform:
    translateY(-5px);

  border-color:
    #555555;

  background:
    #171717;
}


.music-discovery .discovery-link > span:first-child {
  color: var(--color-slime);

  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.music-discovery .discovery-link strong {
  max-width:
    280px;

  color:
    var(--color-white);

  font-size:
    1.25rem;

  line-height:
    1.2;
}


.music-discovery .discovery-link > span:last-child {
  color:
    var(--color-gray);

  font-size:
    0.7rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}



/* ---------------------------------------------------------
   CURRENT MUSIC NAV ITEM
--------------------------------------------------------- */








/* ---------------------------------------------------------
   MUSIC — TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .featured-release-card {
    grid-template-columns:
      1fr;
  }


  .release-art-placeholder {
    min-height:
      auto;
  }


  .release-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .release-card:last-child {
    grid-column:
      1 / -1;
  }


  .gvb-about-layout {
    grid-template-columns:
      1fr;

    gap:
      2rem;
  }


  .music-discovery .discovery-links {
    grid-template-columns:
      1fr;
  }

}



/* ---------------------------------------------------------
   MUSIC — MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .music-hero {
    min-height:
      auto;

    padding:
      125px
      0
      75px;
  }


  .featured-release,
  .release-catalog,
  .music-visuals,
  .gvb-about,
  .music-discovery {
    padding:
      6rem
      0;
  }


  .featured-release-card {
    gap:
      2rem;
  }


  .release-actions {
    flex-direction:
      column;
  }


  .release-actions .button {
    width:
      100%;
  }


  .release-grid {
    grid-template-columns:
      1fr;
  }


  .release-card:last-child {
    grid-column:
      auto;
  }


  .visual-grid {
    grid-template-columns:
      1fr;
  }


  .gvb-about-layout {
    margin-top:
      2.5rem;

    padding-top:
      2rem;
  }

}

/* =========================================================
   HOMEPAGE REFINEMENT
========================================================= */


/* ---------------------------------------------------------
   HERO INDEX — CLICKABLE NAVIGATION
--------------------------------------------------------- */

.hero-index a {
  color:
    var(--color-gray);

  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}


.hero-index a:hover {
  color:
    var(--color-white);

  transform:
    translateX(4px);
}



/* ---------------------------------------------------------
   PLATFORM INTRO
--------------------------------------------------------- */

.home-intro {
  padding:
    8rem
    0;

  background:
    #0c0c0c;

  border-top:
    1px solid var(--border-color);

  border-bottom:
    1px solid var(--border-color);
}


.home-intro .section-container {
  max-width:
    var(--content-width);
}


.home-intro h2 {
  max-width:
    900px;
}


.home-intro-copy {
  max-width:
    650px;

  margin-bottom:
    0;

  color:
    var(--color-gray);

  font-size:
    clamp(
      1.05rem,
      1.6vw,
      1.3rem
    );
}



/* ---------------------------------------------------------
   HOMEPAGE FEATURE SECTIONS
--------------------------------------------------------- */

.home-feature {
  position:
    relative;

  padding:
    9rem
    0;

  border-top:
    1px solid var(--border-color);
}


.home-feature-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(300px, 0.75fr);

  gap:
    clamp(
      3rem,
      7vw,
      7rem
    );

  align-items:
    center;
}


.home-feature-main {
  max-width:
    760px;
}


.home-feature-main h2 {
  max-width:
    760px;
}


.home-feature-main > p:not(.section-label) {
  max-width:
    590px;

  margin-bottom:
    2rem;
}


.home-feature-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    1.5rem;
}



/* ---------------------------------------------------------
   LIGHT STUDIO FEATURE
--------------------------------------------------------- */

.home-feature-light {
  background:
    var(--color-off-white);

  color: var(--color-accent);

  border-top-color:
    rgba(0, 0, 0, 0.12);
}


.home-feature-light h2 {
  color: var(--color-accent);
}


.home-feature-light .section-label {
  color: var(--color-slime);
}


.home-feature-light p {
  color:
    #4d4d4d;
}


.home-feature-light .text-link {
  color: var(--color-accent);
}


.home-feature-light .button-primary {
  background:
    var(--color-black);

  color:
    var(--color-white);
}


.home-feature-light .button-primary:hover {
  background:
    var(--color-accent);

  color:
    var(--color-slime);
}



/* ---------------------------------------------------------
   DARK HOMEPAGE FEATURES
--------------------------------------------------------- */

.home-feature-dark {
  background:
    var(--color-black);
}


.home-feature-charcoal {
  background:
    var(--color-charcoal);
}


.home-feature-local {
  background:
    #101010;
}



/* ---------------------------------------------------------
   INTERACTIVE FEATURE CARDS
--------------------------------------------------------- */

.home-feature-card {
  position:
    relative;

  min-height:
    340px;

  padding:
    2rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  overflow:
    hidden;

  border:
    1px solid rgba(0, 0, 0, 0.15);

  background:
    var(--color-white);

  color: var(--color-accent);

  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium),
    border-color var(--transition-medium),
    background-color var(--transition-medium);
}


.home-feature-card::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 31, 45, 0.18),
      transparent 25%
    );

  opacity:
    0;

  transition:
    opacity var(--transition-medium);
}


.home-feature-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(0, 0, 0, 0.32);

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.12);
}


.home-feature-card:hover::before {
  opacity:
    1;
}


.home-feature-card > * {
  position:
    relative;

  z-index:
    1;
}


.home-card-label {
  margin-bottom:
    auto;

  color: var(--color-slime);

  font-size:
    0.66rem;

  font-weight:
    800;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.home-feature-card strong {
  display:
    block;

  max-width:
    360px;

  margin-top:
    5rem;

  margin-bottom:
    1rem;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.8rem
    );

  letter-spacing:
    -0.03em;

  line-height:
    1;
}


.home-feature-card p {
  max-width:
    360px;

  margin-bottom:
    2rem;

  color:
    #555555;

  font-size:
    0.92rem;
}


.home-card-action {
  display:
    inline-flex;

  align-items:
    center;

  color: var(--color-accent);

  font-size:
    0.69rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

  transition:
    transform var(--transition-fast);
}


.home-feature-card:hover .home-card-action {
  transform:
    translateX(5px);
}



/* ---------------------------------------------------------
   DARK FEATURE CARD VARIANT
--------------------------------------------------------- */

.home-feature-card-dark {
  border-color:
    var(--border-color);

  background:
    #111111;

  color:
    var(--color-white);
}


.home-feature-card-dark:hover {
  border-color:
    #4c4c4c;

  background:
    #171717;

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.28);
}


.home-feature-card-dark .home-card-label {
  color: var(--color-slime);
}


.home-feature-card-dark p {
  color:
    var(--color-gray);
}


.home-feature-card-dark .home-card-action {
  color:
    var(--color-light-gray);
}



/* ---------------------------------------------------------
   HOMEPAGE TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .home-feature-layout {
    grid-template-columns:
      1fr;

    gap:
      3rem;
  }


  .home-feature-card {
    min-height:
      300px;
  }

}



/* ---------------------------------------------------------
   HOMEPAGE MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .home-intro,
  .home-feature {
    padding:
      6rem
      0;
  }


  .home-feature-layout {
    gap:
      2.5rem;
  }


  .home-feature-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .home-feature-actions .text-link {
    min-height:
      44px;

    align-items:
      center;
  }


  .home-feature-card {
    min-height:
      280px;

    padding:
      1.5rem;
  }


  .home-feature-card strong {
    margin-top:
      4rem;
  }

}

/* =========================================================
   864BLOCKBOYS — GVB VISUAL ASSET INTEGRATION
   Copy the four supplied files into:
   assets/images/
========================================================= */

/* ---------------------------------------------------------
   1. FAVICON
   Add this inside <head> on every HTML page:
   <link rel="icon" type="image/png" href="assets/images/favicon.png">
--------------------------------------------------------- */


/* ---------------------------------------------------------
   2. HOMEPAGE — STUDIO WATERMARK
   Uses the hand-drawn GVB emblem as a subtle editorial mark.
--------------------------------------------------------- */

.home-feature-light {
  position: relative;
  overflow: hidden;
}

.home-feature-light::after {
  content: "";
  position: absolute;
  right: clamp(-4rem, -2vw, -1rem);
  top: 50%;
  width: clamp(280px, 38vw, 560px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%) rotate(-4deg);
  background:
    url("../assets/images/gvb-mark.webp")
    center / contain
    no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

.home-feature-light .section-container {
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   3. HOMEPAGE — MUSIC FEATURE BACKGROUND
   Uses Free From Hate artwork as the visual anchor.
--------------------------------------------------------- */

.home-feature-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #080808;
}

.home-feature-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.98) 0%,
      rgba(8, 8, 8, 0.86) 42%,
      rgba(8, 8, 8, 0.48) 72%,
      rgba(8, 8, 8, 0.66) 100%
    ),
    url("../assets/images/free-from-hate.webp")
    78% center / cover
    no-repeat;
  z-index: -2;
}

.home-feature-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent 30%,
      rgba(0, 0, 0, 0.28)
    );
  pointer-events: none;
  z-index: -1;
}

.home-feature-dark .home-feature-card-dark {
  background:
    rgba(12, 12, 12, 0.82);
  backdrop-filter:
    blur(10px);
  -webkit-backdrop-filter:
    blur(10px);
}


/* ---------------------------------------------------------
   4. MUSIC PAGE — HERO BACKGROUND
--------------------------------------------------------- */

.music-hero {
  position: relative;
  isolation: isolate;
  background: #070707;
}

.music-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(6, 6, 6, 0.97) 0%,
      rgba(6, 6, 6, 0.84) 44%,
      rgba(6, 6, 6, 0.48) 72%,
      rgba(6, 6, 6, 0.66) 100%
    ),
    url("../assets/images/free-from-hate.webp")
    74% center / cover
    no-repeat;
  z-index: -2;
}

.music-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 72% 30%,
      rgba(255, 31, 45, 0.08),
      transparent 30%
    );
  pointer-events: none;
  z-index: -1;
}


/* ---------------------------------------------------------
   5. MUSIC PAGE — TURN FEATURED PLACEHOLDER INTO ARTWORK
--------------------------------------------------------- */

.release-art-placeholder {
  background:
    url("../assets/images/free-from-hate.webp")
    center / cover
    no-repeat;
  color: transparent;
}

.release-art-placeholder span {
  opacity: 0;
}


/* ---------------------------------------------------------
   6. MUSIC PAGE — GVB LOGO LOCKUP
   Adds the GVB logo above the hero text without changing HTML.
--------------------------------------------------------- */

.music-hero .section-container::before {
  content: "";
  display: block;
  width: clamp(150px, 18vw, 260px);
  aspect-ratio: 1.55 / 1;
  margin-bottom: 2rem;
  background:
    url("../assets/images/gvb-logo.webp")
    center / contain
    no-repeat;
  filter: invert(1);
  opacity: 0.92;
}


/* ---------------------------------------------------------
   7. MUSIC ABOUT SECTION — SECONDARY GVB BRAND MARK
--------------------------------------------------------- */

.gvb-about {
  position: relative;
  overflow: hidden;
}

.gvb-about::after {
  content: "";
  position: absolute;
  right: clamp(-2rem, 1vw, 2rem);
  bottom: clamp(-2rem, -1vw, 0rem);
  width: clamp(220px, 30vw, 430px);
  aspect-ratio: 1.55 / 1;
  background:
    url("../assets/images/gvb-logo.webp")
    center / contain
    no-repeat;
  filter: invert(1);
  opacity: 0.055;
  pointer-events: none;
}


/* ---------------------------------------------------------
   8. MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .home-feature-light::after {
    right: -7rem;
    width: 360px;
    opacity: 0.09;
  }

  .home-feature-dark::before,
  .music-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(7, 7, 7, 0.96) 0%,
        rgba(7, 7, 7, 0.80) 55%,
        rgba(7, 7, 7, 0.62) 100%
      ),
      url("../assets/images/free-from-hate.webp")
      center / cover
      no-repeat;
  }

  .music-hero .section-container::before {
    width: 160px;
    margin-bottom: 1.5rem;
  }

}

/* =========================================================
   864BLOCKBOYS — BLACK / WHITE / RED BRAND THEME
   Visual direction: gritty editorial, cinematic, high contrast.
========================================================= */

:root {
  --color-accent: #ff1f2d;
  --color-slime-green: #39FF14;
  --color-accent-dark: #a9141e;
  --color-accent-deep: #6f0b12;
  --color-accent-soft: rgba(255, 31, 45, 0.13);
  --color-accent-glow: rgba(255, 31, 45, 0.24);
}


/* ---------------------------------------------------------
   GLOBAL RED ACCENT DETAILS
--------------------------------------------------------- */

::selection {
  background: var(--color-accent);
  color: var(--color-white);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--color-accent);
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.button-primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.button-primary:hover {
  background: var(--color-white);
  color: var(--color-slime);
}

.button-secondary {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.025);
}

.button-secondary:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}


/* ---------------------------------------------------------
   HOMEPAGE HERO — RED GLOW / GRIT FEEL
--------------------------------------------------------- */

.hero-background {
  background:
    radial-gradient(
      circle at 72% 35%,
      rgba(255, 31, 45, 0.16),
      transparent 29%
    ),
    radial-gradient(
      circle at 15% 90%,
      rgba(255, 255, 255, 0.06),
      transparent 28%
    ),
    linear-gradient(
      115deg,
      #060606,
      #111111 58%,
      #030303
    );
}

.scroll-indicator span,
.hero-category-link:hover,
.hero-category-link:focus-visible {
  color: var(--color-slime);
}


/* ---------------------------------------------------------
   LIGHT / PAPER SECTIONS
   Keep the editorial contrast, replace olive with red.
--------------------------------------------------------- */

.studio-preview .section-label,
.home-feature-light .section-label,
.studio-explorer .section-label,
.fashion-explorer .section-label,
.local-explorer .section-label,
.featured-release .section-label {
  color: var(--color-accent-dark);
}

.home-feature-light .button-primary,
.studio-preview .button-primary {
  background: var(--color-black);
  color: var(--color-white);
}

.home-feature-light .button-primary:hover,
.studio-preview .button-primary:hover {
  background: var(--color-accent);
  color: var(--color-white);
}


/* ---------------------------------------------------------
   TABS — BLACK / WHITE / RED
--------------------------------------------------------- */

.studio-tab.is-active,
.fashion-tab.is-active,
.local-tab.is-active {
  background: var(--color-black);
  color: var(--color-white);
}

.studio-tab.is-active::after,
.fashion-tab.is-active::after,
.local-tab.is-active::after {
  background: var(--color-black);
}

.studio-tab:hover,
.fashion-tab:hover,
.local-tab:hover {
  color: var(--color-accent);
}

.diagnosis-button.is-active {
  background: var(--color-black);
  border-color: var(--color-slime);
  color: var(--color-accent);
}

.diagnosis-result {
  border-left-color: var(--color-accent);
}

.diagnosis-result-label,
.mix-demo-placeholder > span,
.featured-local-category,
.spotlight-category,
.discovery-link > span:first-child,
.local-discovery .discovery-link > span:first-child {
  color: var(--color-slime);
}


/* ---------------------------------------------------------
   FORMS
--------------------------------------------------------- */

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}


/* ---------------------------------------------------------
   DARK CARDS / FEATURE PANELS
--------------------------------------------------------- */

.home-feature-card-dark:hover,
.discovery-link:hover,
.local-discovery .discovery-link:hover {
  border-color: rgba(255, 31, 45, 0.55);
}

.home-card-label,
.release-type,
.shop-category,
.fashion-card-label,
.value-tier,
.trend-number,
.event-category,
.local-card-label,
.place-type,
.culture-label,
.process-number {
  color: var(--color-accent-dark);
}


/* ---------------------------------------------------------
   HEROES — RED ATMOSPHERE
--------------------------------------------------------- */

.studio-hero,
.fashion-hero,
.local-hero,
.music-hero {
  background:
    radial-gradient(
      circle at 78% 27%,
      rgba(255, 31, 45, 0.13),
      transparent 25%
    ),
    radial-gradient(
      circle at 16% 82%,
      rgba(255, 255, 255, 0.045),
      transparent 28%
    ),
    linear-gradient(
      125deg,
      #060606,
      #131313 58%,
      #030303
    );
}


/* ---------------------------------------------------------
   RED GRIT DETAIL — SUBTLE
--------------------------------------------------------- */

.home-intro,
.music-preview,
.home-feature-dark,
.home-feature-charcoal,
.home-feature-local,
.fashion-discovery,
.local-discovery,
.gvb-about,
.music-visuals {
  position: relative;
}

.home-intro::before,
.fashion-discovery::before,
.local-discovery::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--side-padding);
  width: 72px;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.9;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.site-footer {
  background: #030303;
  border-top-color: rgba(255, 255, 255, 0.14);
}

.footer-navigation a:hover,
.footer-logo:hover {
  color: var(--color-slime);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .primary-navigation.is-open {
    background: rgba(5, 5, 5, 0.98);
    border-bottom-color: rgba(255, 31, 45, 0.28);
  }


}/* =========================================================
   864BLOCKBOYS — INTERIOR PAGE BODY
   Matches the homepage design.
   Does not target the header or footer.
   ========================================================= */

/* Shared content width and balanced side margins */
main .section-container {
  width: min(
    1280px,
    calc(100% - 2 * clamp(20px, 4vw, 64px))
  );

  margin-inline: auto;
  padding-inline: 0;
}

/* Heroes: same scale and clear entry point as the homepage */
main :is(
  .studio-hero,
  .fashion-hero,
  .local-hero,
  .music-hero
) {
  min-height: clamp(520px, 72vh, 760px);

  display: flex;
  align-items: flex-end;

  padding-block:
    clamp(110px, 12vw, 170px)
    clamp(52px, 6vw, 84px);

  background: #101010;
  color: #f1eee7;

  border-bottom: 1px solid #343434;
}

main :is(
  .studio-hero,
  .fashion-hero,
  .local-hero,
  .music-hero
) h1 {
  max-width: 900px;
  margin: 0 0 24px;

  color: var(--color-text-primary);

  font-family: "Allerta Stencil", sans-serif;

  font-size: clamp(2.75rem, 5.25vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;

  text-transform: uppercase;
}
.studio-hero-title span {
  display: block;
}

.studio-hero-title .hero-finish {
  margin-top: 0.04em;

  font-family: "Faster One", sans-serif;

  font-size: 1.32em;
  font-weight: 400;

  line-height: 0.82;
  letter-spacing: -0.04em;
}
main :is(
  .studio-hero-description,
  .fashion-hero-description,
  .local-hero-description,
  .music-hero-description
) {
  max-width: 600px;
  margin: 0 0 26px;
  color: #bdbab4;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
}

main :is(
  .studio-hero,
  .fashion-hero,
  .local-hero,
  .music-hero
) .eyebrow {
  margin-bottom: 20px;
  color: #ff6864;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

main .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

main .hero-microcopy {
  margin-top: 22px;
  color: #aaa8a2;
  font-size: 12px;
}

/* Section spacing and backgrounds */
main :is(
  .studio-explorer,
  .fashion-explorer,
  .local-explorer,
  .featured-release,
  .release-catalog,
  .music-visuals,
  .gvb-about,
  .featured-local-fashion,
  .local-spotlight,
  .fashion-discovery,
  .local-discovery,
  .music-discovery,
  .mix-review
) {
  min-height: 0;
  padding: 62px 0;
  background: #101010;
  color: #f1eee7;
  border-bottom: 1px solid #343434;
}

main :is(
  .studio-explorer,
  .fashion-explorer,
  .local-explorer,
  .featured-release,
  .release-catalog,
  .music-visuals,
  .gvb-about,
  .featured-local-fashion,
  .local-spotlight,
  .fashion-discovery,
  .local-discovery,
  .music-discovery,
  .mix-review
) .section-label {
  margin-bottom: 16px;
  color: #ff6864;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

main :is(
  .studio-explorer,
  .fashion-explorer,
  .local-explorer,
  .featured-release,
  .release-catalog,
  .music-visuals,
  .gvb-about,
  .featured-local-fashion,
  .local-spotlight,
  .fashion-discovery,
  .local-discovery,
  .music-discovery,
  .mix-review
) h2 {
  max-width: 900px;
  margin: 0 0 18px;
  color: #f1eee7;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

main :is(
  .studio-explorer-heading,
  .fashion-explorer-heading,
  .local-explorer-heading,
  .featured-release-heading,
  .catalog-heading,
  .visuals-heading,
  .mix-review-heading
) {
  max-width: 800px;
  margin-bottom: 28px;
}

main :is(
  .studio-explorer-heading,
  .fashion-explorer-heading,
  .local-explorer-heading,
  .catalog-heading,
  .visuals-heading,
  .mix-review-heading
) > p:not(.section-label) {
  max-width: 620px;
  color: #bdbab4;
  font-size: 15px;
  line-height: 1.7;
}

/* Interactive explorer tabs */
main :is(.studio-tabs, .fashion-tabs, .local-tabs) {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  overflow-x: visible;
  background: #101010;
  border: 1px solid #343434;
  border-bottom: 0;
}

main :is(.studio-tab, .fashion-tab, .local-tab) {
  flex: 1 0 auto;
  min-height: 68px;
  margin: 0;
  padding: 16px 20px;
  background: #101010;
  color: #aaa8a2;
  border: 0;
  border-right: 1px solid #343434;
  border-bottom: 1px solid #343434;
  border-radius: 0;
  font: 700 12px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

main :is(.studio-tab, .fashion-tab, .local-tab):last-child {
  border-right: 0;
}

main :is(.studio-tab, .fashion-tab, .local-tab):not(.is-active):hover {
  background: #242424;
  color: #f1eee7;
}

main :is(
  .studio-explorer,
  .fashion-explorer,
  .local-explorer
) :is(
  .studio-tab,
  .fashion-tab,
  .local-tab
).is-active {
  background: #f1eee7;
  color: #101010;
  border-bottom-color: #f1eee7;
}

main :is(.studio-panel, .fashion-panel, .local-panel) {
  min-height: 0;
  margin: 0;
  padding: clamp(28px, 3.5vw, 44px);
  background: #151515;
  color: #f1eee7;
  border: 1px solid #343434;
  border-top: 0;
  border-radius: 0;
}

main :is(.studio-panel, .fashion-panel, .local-panel)[hidden] {
  display: none !important;
}

main :is(.studio-panel, .fashion-panel, .local-panel) h3 {
  color: #f1eee7;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

main :is(.studio-panel, .fashion-panel, .local-panel) p {
  color: #bdbab4;
  line-height: 1.7;
}

main :is(.studio-panel, .fashion-panel, .local-panel) .section-label {
  color: #ff6864;
}

/* Cards and grids retain each page's content and interactions */
main :is(
  .service-grid,
  .fashion-card-grid,
  .value-grid,
  .local-card-grid,
  .culture-feature-grid,
  .release-grid
) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

main :is(
  .visual-grid,
  .discovery-links
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

main :is(
  .service-card,
  .fashion-card,
  .value-card,
  .local-feature-card,
  .culture-card,
  .release-card,
  .visual-card,
  .event-card,
  .local-shop-card,
  .place-card,
  .trend-card,
  .discovery-link
) {
  min-width: 0;
  background: #191919;
  color: #f1eee7;
  border: 1px solid #343434;
  border-radius: 0;
  box-shadow: none;
}

main :is(
  .service-card,
  .fashion-card,
  .value-card,
  .local-feature-card,
  .culture-card,
  .release-card,
  .visual-card,
  .event-card,
  .local-shop-card,
  .place-card,
  .trend-card,
  .discovery-link
):hover {
  border-color: #62605c;
  box-shadow: none;
  transform: none;
}

main :is(
  .service-card,
  .fashion-card,
  .value-card,
  .local-feature-card,
  .culture-card,
  .release-card,
  .visual-card,
  .event-card,
  .local-shop-card,
  .place-card,
  .trend-card,
  .discovery-link
) h4,
main :is(
  .release-card,
  .visual-card,
  .event-card,
  .discovery-link
) h3 {
  color: #f1eee7;
}

main :is(
  .service-card,
  .fashion-card,
  .value-card,
  .local-feature-card,
  .culture-card,
  .release-card,
  .visual-card,
  .event-card,
  .local-shop-card,
  .place-card,
  .trend-card,
  .discovery-link
) p {
  color: #bdbab4;
  font-size: 14px;
  line-height: 1.7;
}

/* Calls to action */
main .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 21px;
  border-radius: 0;
  font: 700 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  transform: none;
}

main .button-primary {
  background: #d92c29;
  color: #fff;
  border: 1px solid #d92c29;
}

main .button-primary:hover {
  background: #b5211e;
  color: #fff;
  border-color: #b5211e;
  transform: none;
}

main .button-secondary {
  background: transparent;
  color: #f1eee7;
  border: 1px solid #62605c;
}

main .button-secondary:hover {
  background: #f1eee7;
  color: #101010;
  border-color: #f1eee7;
  transform: none;
}

/* Tablet and narrow windows */
@media (max-width: 900px) {
  main :is(
    .service-grid,
    .fashion-card-grid,
    .value-grid,
    .local-card-grid,
    .culture-feature-grid,
    .release-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  main :is(
    .studio-hero,
    .fashion-hero,
    .local-hero,
    .music-hero
  ) {
    padding: 112px 0 38px;
  }

  main :is(
    .studio-hero,
    .fashion-hero,
    .local-hero,
    .music-hero,
    .studio-explorer,
    .fashion-explorer,
    .local-explorer,
    .featured-release,
    .release-catalog,
    .music-visuals,
    .gvb-about,
    .featured-local-fashion,
    .local-spotlight,
    .fashion-discovery,
    .local-discovery,
    .music-discovery,
    .mix-review
  ) .section-container {
    width: calc(100% - 2 * clamp(20px, 6vw, 28px));
  }

  main :is(
    .studio-explorer,
    .fashion-explorer,
    .local-explorer,
    .featured-release,
    .release-catalog,
    .music-visuals,
    .gvb-about,
    .featured-local-fashion,
    .local-spotlight,
    .fashion-discovery,
    .local-discovery,
    .music-discovery,
    .mix-review
  ) {
    padding-block: 42px;
  }

  main :is(
    .service-grid,
    .fashion-card-grid,
    .value-grid,
    .local-card-grid,
    .culture-feature-grid,
    .release-grid,
    .visual-grid,
    .discovery-links
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  main :is(.studio-tab, .fashion-tab, .local-tab) {
    min-height: 58px;
    padding: 14px 17px;
    font-size: 11px;
  }

  main :is(.studio-panel, .fashion-panel, .local-panel) {
    padding: 26px 22px;
  }
}

/* =========================================================
   864BLOCKBOYS — MASTER COLOR + INTERACTION SYSTEM
   ---------------------------------------------------------
   • Slime green = section/category labels + tab text
   • Red = CTA/action accent
   • CTA/button styling remains unchanged
   • Interactive panels are static and expand naturally
   • No internal panel scrollbars
========================================================= */


/* ---------------------------------------------------------
   SECTION / CATEGORY LABELS
--------------------------------------------------------- */

.section-label,
.studio-explorer .section-label,
.fashion-explorer .section-label,
.local-explorer .section-label,
.music-explorer .section-label,
.service-card > span,
.fashion-card-label,
.shop-category,
.trend-number,
.value-tier,
.process-number,
.featured-local-category,
.discovery-link > span:first-child,
.diagnosis-result-label {
  color: var(--color-label);
}


/* ---------------------------------------------------------
   INTERACTIVE TAB TEXT
--------------------------------------------------------- */

.studio-tab,
.fashion-tab,
.local-tab,
.music-tab,
.studio-tab:hover,
.fashion-tab:hover,
.local-tab:hover,
.music-tab:hover,
.studio-tab.is-active,
.fashion-tab.is-active,
.local-tab.is-active,
.music-tab.is-active {
  color: var(--color-label);
}


/* ---------------------------------------------------------
   STATIC INTERACTIVE PANELS
   Content expands with the page instead of scrolling
   inside the interactive block.
--------------------------------------------------------- */

.studio-panel,
.fashion-panel,
.local-panel,
.music-panel {
  height: auto;
  max-height: none;
  overflow: visible;
}


/* ---------------------------------------------------------
   CTA / BUTTON COLOR PROTECTION
   Existing CTA backgrounds and interaction styling remain
   controlled by the original button system above.
--------------------------------------------------------- */

.button-primary {
  color: var(--color-black);
}

.button-primary:hover {
  color: var(--color-black);
}

/* HOMEPAGE — SCOPED COMPATIBILITY LAYER */

/* FOUNDATION */
    body.home-page {
      color-scheme: dark;
      --background: #101010;
      --surface: #191919;
      --paper: #f1eee7;
      --muted: #aaa8a2;
      --line: #343434;
      --red: #d92c29;
      --width: 1280px;
      --gutter: clamp(20px, 4vw, 64px);
    }

    body.home-page *,
body.home-page *::before,
body.home-page *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
    }


body.home-page {
  background-color: #222222;
background-blend-mode: multiply;
  background-image: url("../assets/images/GVB_Kaleidoscopic.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

body.home-page,
body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page p,
body.home-page figure {
      margin: 0;
    }
body.home-page::before,
body.home-page::after {
  background: none !important;
}
    body.home-page button,
body.home-page a {
      -webkit-tap-highlight-color: transparent;
    }

    body.home-page button {
      font: inherit;
    }

    body.home-page a {
      color: inherit;
      text-decoration: none;
    }

    body.home-page img {
      display: block;
      max-width: 100%;
    }

    body.home-page button,
body.home-page a {
      touch-action: manipulation;
    }

    body.home-page :focus-visible {
      outline: 3px solid var(--paper);
      outline-offset: 5px;
    }

    body.home-page ::selection {
      background: var(--red);
      color: white;
    }

    body.home-page [hidden] {
      display: none !important;
    }

    body.home-page .container {
      width: min(var(--width), calc(100% - var(--gutter) * 2));
      margin-inline: auto;
    }

    body.home-page .eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    body.home-page .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 100;
      padding: 12px 18px;
      background: var(--paper);
      color: var(--background);
      transform: translateY(-180%);
    }

    body.home-page .skip-link:focus {
      transform: translateY(0);
    }

    /* HEADER */
    body.home-page .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--background);
      border-bottom: 1px solid var(--line);
    }

    body.home-page .header-inner {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    body.home-page .brand {
      display: inline-block;
      font-size: clamp(20px, 2.2vw, 29px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.065em;
      white-space: nowrap;
    }

    body.home-page .primary-nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    body.home-page .primary-nav a,
body.home-page .menu-toggle {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    body.home-page .primary-nav a {
      padding-block: 14px;
    }

    body.home-page .primary-nav a:hover {
      color: #ff6864;
    }

    body.home-page .primary-nav .nav-book {
      padding: 12px 16px;
      border: 1px solid #62605c;
    }

    body.home-page .primary-nav .nav-book:hover {
      background: var(--paper);
      border-color: var(--paper);
      color: var(--background);
    }

    body.home-page .menu-toggle {
      display: none;
      min-height: 44px;
      padding: 10px 0 10px 16px;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
    }

    /* BUTTONS */
    body.home-page .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    body.home-page .button {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 14px 22px;
      background: var(--red);
      color: white;
      border: 1px solid var(--red);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .07em;
      text-align: center;
      text-transform: uppercase;
      transition: background .18s ease, color .18s ease;
    }

    body.home-page .button:hover {
      background: #b5211e;
      border-color: #b5211e;
    }

    body.home-page .button-outline {
      background: transparent;
      border-color: #62605c;
      color: var(--paper);
    }

    body.home-page .button-outline:hover {
      background: var(--paper);
      border-color: var(--paper);
      color: var(--background);
    }

    /* MAIN FEATURE */
    body.home-page .hero {
      padding-block: 46px 54px;
    }

    body.home-page .hero-meta {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-bottom: 26px;
      color: var(--muted);
    }

    body.home-page .hero-meta a {
      color: var(--paper);
      text-decoration: underline;
      text-underline-offset: 5px;
    }

    body.home-page .hero-grid {
      display: grid;
      grid-template-columns: 1.12fr 1fr;
      align-items: stretch;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    body.home-page .hero-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 48px 40px 48px 0;
    }

    body.home-page .hero h1 {
      font-family: Impact, "Arial Narrow", Arial, sans-serif;
      font-size: clamp(76px, 9vw, 132px);
      font-weight: 900;
      line-height: .88;
      letter-spacing: -.035em;
      text-transform: uppercase;
    }

    body.home-page .hero h1 span {
      display: block;
    }

    body.home-page .hero h1 .red {
      color: var(--red);
    }

    body.home-page .hero-description {
      max-width: 350px;
      margin-top: 28px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
    }

    body.home-page .hero-art {
      display: grid;
      grid-template-rows: 1fr auto;
      min-width: 0;
      background: var(--surface);
      border-left: 1px solid var(--line);
    }

body.home-page .art-stage {
  position: relative;
  min-height: 390px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  isolation: isolate;

  background: transparent !important;
}

body.home-page .art-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("../assets/images/favicon.png");
  background-position: center;
  background-size: 150%;
  background-repeat: no-repeat;

  filter: invert(1);
}

/* Legacy slot-stack rules removed: homepage now uses .block-carousel. */

    body.home-page .art-stage img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #211e23;
    }

    body.home-page .hero-art figcaption {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 17px 20px;
      border-top: 1px solid var(--line);
    }

    body.home-page .hero-art figcaption a {
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    /* CATEGORY EXPLORER */
    body.home-page .explore {
      padding-block: 28px 80px;
    }

    body.home-page .section-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 24px;
    }

    body.home-page .section-heading h2 {
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.055em;
      text-transform: uppercase;
    }

    body.home-page .section-heading p {
      color: var(--muted);
    }

    body.home-page .category-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    body.home-page .category-tab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 76px;
      padding: 20px;
      border: 0;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      text-align: left;
      text-transform: uppercase;
    }

    body.home-page .category-tab strong {
      font-size: clamp(14px, 2vw, 22px);
      letter-spacing: -.03em;
    }

    body.home-page .category-tab span {
      font-size: 10px;
    }

    body.home-page .category-tab:hover {
      background: #222;
      color: var(--paper);
    }

    body.home-page .category-tab[aria-selected="true"] {
      background: var(--paper);
      color: var(--background);
    }

    body.home-page .category-tab:focus-visible {
      position: relative;
      z-index: 1;
      outline-offset: -5px;
      outline-color: var(--red);
    }

    body.home-page .category-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 330px;
      border: 1px solid var(--line);
      border-top: 0;
    }

    body.home-page .panel-copy {
      padding: clamp(26px, 4vw, 50px);
    }

    body.home-page .panel-copy > .eyebrow {
      color: #ff6864;
    }

    body.home-page .panel-copy h3 {
      max-width: 440px;
      margin-top: 17px;
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 900;
      line-height: 1.02;
      letter-spacing: -.055em;
      text-transform: uppercase;
    }

    body.home-page .panel-description {
      max-width: 420px;
      margin-top: 18px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
    }

    body.home-page .panel-index {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(26px, 4vw, 50px);
      border-left: 1px solid var(--line);
      background: var(--surface);
    }

    body.home-page .index-title {
      margin-bottom: 20px;
      color: var(--muted);
    }

    body.home-page .index-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-block: 17px;
      border-top: 1px solid var(--line);
      font-size: 14px;
      font-weight: 700;
    }

    body.home-page .index-row:last-child {
      border-bottom: 1px solid var(--line);
    }

    body.home-page .index-row span:last-child {
      color: var(--muted);
      font-size: 11px;
      font-weight: 400;
    }

    /* STUDIO CALLOUT */
    body.home-page .studio-callout {
      background: var(--paper);
      color: var(--background);
    }

    body.home-page .studio-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding-block: 50px;
    }

    body.home-page .studio-inner h2 {
      margin-top: 12px;
      font-size: clamp(30px, 4.5vw, 60px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.055em;
      text-transform: uppercase;
    }

    body.home-page .studio-inner .button {
      flex-shrink: 0;
    }

    body.home-page .studio-inner :focus-visible {
      outline-color: var(--background);
    }

    /* CENTERED FOOTER */
    body.home-page .site-footer {
      padding-block: 52px 30px;
      text-align: center;
    }

    body.home-page .footer-brand {
      font-size: clamp(26px, 5vw, 48px);
    }

    body.home-page .footer-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 28px;
      margin-top: 25px;
    }

    body.home-page .footer-nav a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    body.home-page .footer-nav a:hover {
      color: #ff6864;
    }

    body.home-page .footer-note {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    /* TABLET / MOBILE */
    @media (max-width: 900px) {

      body.home-page .header-inner {
        min-height: 72px;
        flex-wrap: wrap;
        gap: 0;
      }

      body.home-page .menu-toggle:not([hidden]) {
        display: block;
      }

      body.home-page .primary-nav {
        width: 100%;
        flex-wrap: wrap;
        gap: 4px 24px;
        padding-block: 10px 20px;
      }

      body.home-page .primary-nav .nav-book {
        margin-left: auto;
      }

      body.home-page .hero-copy {
        padding-right: 24px;
      }

      body.home-page .hero h1 {
        font-size: clamp(70px, 11vw, 105px);
      }

      body.home-page .art-stage {
        min-height: 330px;
        aspect-ratio: auto;
      }
    
}

    @media (max-width: 640px) {

      html {
        scroll-padding-top: 82px;
      }

      body.home-page .hero {
        padding-block: 26px 34px;
      }

      body.home-page .hero-meta {
        padding-bottom: 18px;
        font-size: 9px;
        letter-spacing: .08em;
      }

      body.home-page .hero-grid,
body.home-page .category-panel {
        grid-template-columns: 1fr;
      }

      body.home-page .hero-copy {
        padding: 30px 0;
      }

      body.home-page .hero h1 {
        font-size: clamp(78px, 20vw, 124px);
      }

      body.home-page .hero-description {
        max-width: 340px;
        margin-top: 22px;
      }

      body.home-page .hero-art {
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      body.home-page .art-stage {
        min-height: 0;
        aspect-ratio: 1 / 1;
      }

      body.home-page .hero-art figcaption {
        padding-inline: 14px;
        font-size: 9px;
      }

      body.home-page .explore {
        padding-block: 20px 46px;
      }

      body.home-page .section-heading {
        display: block;
      }

      body.home-page .section-heading p {
        margin-top: 10px;
      }

      body.home-page .category-tab {
        min-height: 64px;
        padding: 14px 9px;
        justify-content: center;
      }

      body.home-page .category-tab strong {
        font-size: 12px;
        letter-spacing: 0;
      }

      body.home-page .category-tab span {
        display: none;
      }

      body.home-page .panel-index {
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      body.home-page .studio-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
        padding-block: 36px;
      }

      body.home-page .primary-nav .nav-book {
        margin-left: 0;
      }

      body.home-page .site-footer {
        padding-top: 38px;
      }
    
}

    @media (prefers-reduced-motion: reduce) {

      html {
        scroll-behavior: auto;
      }

      body.home-page *,
body.home-page *::before,
body.home-page *::after {
        transition: none !important;
        animation: none !important;
      }
    
}

/* HOMEPAGE — CURRENT EDITS */

body.home-page { --font-handstyle: "Rock Salt", "Segoe Print", "Bradley Hand", cursive; }

body.home-page .hero-description,
body.home-page .panel-description {
  font-family: var(--font-handstyle);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.55;
}

body.home-page .category-panel .panel-copy { min-width: 0; }

body.home-page .category-panel .panel-cta {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
  padding: clamp(32px, 4vw, 54px);
  border-left: 1px solid var(--line);
}

body.home-page .category-panel .panel-cta .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin: 0;
}

body.home-page .category-panel .panel-cta .button { white-space: nowrap; }

body.home-page .category-tab strong,
body.home-page .panel-copy > .eyebrow,
body.home-page .section-heading > .eyebrow { color: #39ff14; }

@media (max-width: 900px) {
  body.home-page .category-panel .panel-cta {
    justify-content: flex-start;
    padding: 30px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  body.home-page .category-panel .panel-cta .actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  body.home-page .hero-description,
  body.home-page .panel-description { line-height: 1.48; }

  body.home-page .category-panel .panel-cta .actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.home-page .category-panel .panel-cta .button {
    width: 100%;
    text-align: center;
  }
}

/* Keep interactive tab-title bars stable with no inner scrollbar. */
:is(.studio-tabs, .fashion-tabs, .local-tabs, .music-tabs) {
  display: flex;
  flex-wrap: wrap !important;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none;
  scrollbar-width: none;
}

:is(.studio-tab, .fashion-tab, .local-tab, .music-tab) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 68px;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (max-width: 640px) {
  :is(.studio-tab, .fashion-tab, .local-tab, .music-tab) {
    flex-basis: calc(50% - 1px) !important;
    min-height: 58px;
  }
}

/* Shared document flow and accessibility. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.return-home { display: inline-block; margin: 0 0 24px; color: var(--color-slime, #b8ff2c); font: 700 11px/1.5 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

/* Homepage-only desktop preview state. Small-screen presentation is unchanged. */
@media (min-width: 1025px) {
  body.home-page #explore[data-preview-mode="tabs"] > .category-panel:not(.is-active) {
    display: none !important;
  }
}

/* Canonical site header. Dedicated classes isolate it from legacy page rules. */
html { scrollbar-gutter: stable; }
.bb-site-header {
  position: sticky; top: 0; z-index: 1000; width: 100%; margin: 0; padding: 0;
 background:
  linear-gradient(
    rgba(8, 8, 8, 0.72),
    rgba(8, 8, 8, 0.72)
  ),
  url("../assets/images/GVB_Kaleidoscopic.png")
  center / cover no-repeat;
  font-family: Arial, Helvetica, sans-serif; line-height: 1;
}
.bb-site-header .bb-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  width: min(1280px, calc(100% - 2 * clamp(20px, 4vw, 64px)));
  min-height: 82px; margin: 0 auto; padding: 0;
}
.bb-site-header .bb-brand {
  display: inline-block; flex-shrink: 0; margin: 0; padding: 0; border: 0;
  font: 900 clamp(20px, 2.2vw, 29px)/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.065em; white-space: nowrap; color: #f1eee7; text-decoration: none;
}
.bb-site-header .bb-primary-nav {
  display: flex; align-items: center; gap: 28px; margin: 0; padding: 0;
}
.bb-site-header .bb-primary-nav a, .bb-site-header .bb-menu-toggle {
  font: 700 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none;
  color: #f1eee7;
}
.bb-site-header .bb-primary-nav a { margin: 0; padding: 14px 0; border: 0; }
.bb-site-header .bb-primary-nav a:hover,
.bb-site-header .bb-primary-nav a[aria-current="page"] { color: #39ff14; }
.bb-site-header .bb-primary-nav .bb-nav-book {
  padding: 12px 16px; border: 1px solid #62605c; background: transparent;
}
.bb-site-header .bb-primary-nav .bb-nav-book:hover {
  color: #101010; background: #f1eee7; border-color: #f1eee7;
}
.bb-site-header .bb-menu-toggle {
  display: none; min-height: 44px; padding: 10px 0 10px 16px; border: 0;
  background: transparent; cursor: pointer;
}
.bb-site-header a:focus-visible, .bb-site-header button:focus-visible {
  outline: 2px solid #39ff14; outline-offset: 4px;
}
.bb-site-header [hidden] { display: none !important; }
@media (max-width: 900px) {
  .bb-site-header .bb-header-inner { min-height: 72px; flex-wrap: wrap; gap: 0; }
  .bb-site-header .bb-menu-toggle:not([hidden]) { display: block; }
  .bb-site-header .bb-primary-nav {
    width: 100%; flex-wrap: wrap; gap: 4px 24px; padding: 10px 0 20px;
  }
  .bb-site-header .bb-primary-nav .bb-nav-book { margin-left: auto; }
}
@media (max-width: 420px) {
  .bb-site-header .bb-primary-nav { gap: 4px 18px; }
  .bb-site-header .bb-primary-nav .bb-nav-book { margin: 6px 0 0; }
}

/* Text-only controls: no decorative arrow or diamond icons. */
.text-link::after,
.studio-tab.is-active::after,
.fashion-tab.is-active::after,
.local-tab.is-active::after { content: none !important; display: none !important; }

/* Native disclosure marker stays hidden; the Studio FAQ uses its own + / −. */
.faq-item summary { list-style: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::-webkit-details-marker { display: none; }

/* Larger, centered action buttons in homepage previews — DESKTOP ONLY. */
@media (min-width: 1025px) {
  body.home-page #explore .panel-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 132px;
    box-sizing: border-box;
  }

  body.home-page #explore .panel-cta .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
    margin: 0;
    padding: 0;
  }

  body.home-page #explore .panel-cta .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 340px;
    width: min(100%, 340px);
    min-width: 260px;
    min-height: 76px;
    margin-inline: auto;
    padding: 20px 32px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   STUDIO — CANONICAL FINAL SYSTEM
   Consolidated from the working Studio design.
   This section intentionally owns Studio-specific styling.
========================================================= */

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

main .studio-hero {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(52px, 5vw, 76px) 0;
  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(57, 255, 20, 0.075),
      transparent 32%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(217, 44, 41, 0.10),
      transparent 36%
    ),
    linear-gradient(
      rgba(7, 7, 7, 0.84),
      rgba(7, 7, 7, 0.84)
    ),
    url("../assets/images/Studio_Hero.jpg") center / cover no-repeat;
  border-bottom: 1px solid #343434;
}

main .studio-hero .eyebrow,
main .studio-door-navigator .section-label,
main .studio-door-form .section-label {
  color: var(--color-slime);
}

main .studio-hero .hero-actions {
  margin-top: 30px;
}

main .studio-hero .hero-actions .button {
  min-height: 56px;
  padding-inline: 28px;
  font-size: 12px;
}

main .studio-hero a.button,
main .studio-hero button.button {
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

@media (min-width: 641px) {
  main .studio-hero .section-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: center;
  }

  main .studio-hero .return-home,
  main .studio-hero .eyebrow,
  main .studio-hero .studio-hero-title,
  main .studio-hero .hero-microcopy {
    min-width: 0;
  }

  main .studio-hero .return-home {
    grid-column: 1;
    grid-row: 1;
  }

  main .studio-hero .eyebrow {
    grid-column: 1;
    grid-row: 2;
  }

  main .studio-hero .studio-hero-title {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }

  main .studio-hero .hero-microcopy {
    grid-column: 1;
    grid-row: 4;
    max-width: 620px;
    margin-top: 24px;
    line-height: 1.5;
  }

  main .studio-hero .hero-actions {
    grid-column: 2;
    grid-row: 1 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    justify-self: start;
    align-self: center;
    width: min(100%, 280px);
    margin: 0;
    gap: 12px;
  }

  main .studio-hero .hero-actions .button {
    width: 100%;
    min-height: 56px;
    padding-inline: 24px;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  main .studio-hero .studio-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
  }

  main .studio-hero .section-container {
    grid-template-columns: minmax(0, 1fr) 210px;
    column-gap: 24px;
  }
}

/* ---------------------------------------------------------
   CLICK DOORS — SHARED BEHAVIOR
--------------------------------------------------------- */

main .studio-door {
  background: #101010;
}

main .studio-door > .studio-door-trigger {
  cursor: pointer;
  list-style: none;
  transition:
    background-color 260ms ease,
    padding-left 260ms ease;
}

main .studio-door > .studio-door-trigger::marker {
  content: "";
}

main .studio-door > .studio-door-trigger::-webkit-details-marker {
  display: none;
}

main .studio-door > .studio-door-trigger:hover {
  background: #151515;
  padding-left: 10px;
}

main .studio-door[open] .studio-door-content {
  animation: studioDoorOpen 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes studioDoorOpen {
  from {
    opacity: 0;
    transform: translateY(-22px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

main .studio-door .studio-door-toggle {
  display: inline-block;
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms ease;
}

main .studio-door[open] .studio-door-toggle {
  transform: rotate(45deg);
  color: var(--color-slime);
}

main :is(
  .studio-door-mix,
  .studio-door-form,
  .studio-door-navigator
) > .studio-door-trigger {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #101010;
}

main :is(
  .studio-door-mix,
  .studio-door-form,
  .studio-door-navigator
) > .studio-door-trigger > * {
  position: relative;
  z-index: 1;
}

main :is(
  .studio-door-mix,
  .studio-door-form,
  .studio-door-navigator
) > .studio-door-trigger > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

main :is(
  .studio-door-mix,
  .studio-door-form,
  .studio-door-navigator
) > .studio-door-trigger h2 {
  order: 1;
  width: fit-content;
  max-width: min(100%, 760px);
  margin: 0 auto;
  padding: 14px 22px;
  background: rgba(8, 8, 8, 0.51);
  color: #f1eee7;
  font-family: "Rock Salt", cursive !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
}

main :is(
  .studio-door-mix,
  .studio-door-form,
  .studio-door-navigator
) > .studio-door-trigger .section-label {
  order: 2;
  margin: 10px auto 0;
  color: var(--color-slime) !important;
  font-family: "Metal Mania", cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

main :is(
  .studio-door-mix,
  .studio-door-form,
  .studio-door-navigator
) > .studio-door-trigger > span:first-child {
  color: #d92c29 !important;
  font-family: "Splash", cursive !important;
  font-weight: 400 !important;
}

main :is(
  .studio-door-mix,
  .studio-door-form,
  .studio-door-navigator
) :is(a.button, button.button, .form-submit) {
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* Door 01 — A/B mixer */
main .studio-door-mix > .studio-door-trigger::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background:
    linear-gradient(
      rgba(8, 8, 8, 0.42),
      rgba(8, 8, 8, 0.42)
    ),
    url("../assets/images/GVB_Seamless.png") center / cover no-repeat;
  filter: blur(6px);
  transform: scale(1.04);
}

/* Door 02 — submission */
main .studio-door-form > .studio-door-trigger::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background:
    linear-gradient(
      rgba(8, 8, 8, 0.42),
      rgba(8, 8, 8, 0.42)
    ),
    url("../assets/images/GVB_Seamless.png") center / cover no-repeat;
  filter: blur(6px) invert(1);
  transform: scale(1.04);
}

main .studio-door-form > .studio-door-trigger h2 {
  color: #080808 !important;
}

main .studio-door-form > .studio-door-trigger .studio-door-toggle {
  color: #d92c29 !important;
}

/* Door 03 — navigator */
main .studio-door-navigator > .studio-door-trigger::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background:
    linear-gradient(
      rgba(8, 8, 8, 0.22),
      rgba(8, 8, 8, 0.22)
    ),
    url("../assets/images/GVB_Seamless.png") center / cover no-repeat;
  filter: blur(6px) grayscale(1) contrast(1.15) brightness(0.72);
  transform: scale(1.04);
}

/* ---------------------------------------------------------
   DOOR 01 — A/B MIXER
--------------------------------------------------------- */

main .studio-door-mix .studio-door-content {
  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(57, 255, 20, 0.075),
      transparent 22%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(217, 44, 41, 0.10),
      transparent 26%
    ),
    linear-gradient(
      rgba(7, 7, 7, 0.78),
      rgba(7, 7, 7, 0.78)
    ),
    url("../assets/images/x-loveit.gif") center / cover no-repeat;
  background-attachment: scroll;
}

main .studio-door-mix .mix-demo {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid #d0d0d0;
}

main .studio-door-mix .mix-demo-heading {
  margin-bottom: 2rem;
}

main .studio-door-mix .mix-demo-placeholder {
  padding: 3rem;
  background: rgba(16, 16, 16, 0.29) !important;
  color: var(--color-white);
}

main .studio-door-mix .mix-demo-placeholder > span {
  color: var(--color-slime);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

main .studio-door-mix .mix-demo-placeholder p {
  margin: 1.2rem 0 2rem;
  color: #aaaaaa;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
}

main .studio-door-mix .mix-demo-buttons {
  display: flex;
  gap: 1rem;
}

main .studio-door-mix .mix-demo-buttons button {
  min-width: 130px;
  min-height: 52px;
  border: 1px solid #444444;
  background: #181818;
  color: #777777;
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------
   DOOR 02 — MIX REVIEW / SUBMISSION
--------------------------------------------------------- */

main .studio-door-form .mix-review {
  padding-block: clamp(46px, 6vw, 72px);
  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(57, 255, 20, 0.075),
      transparent 22%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(217, 44, 41, 0.10),
      transparent 26%
    ),
    linear-gradient(
      rgba(7, 7, 7, 0.78),
      rgba(7, 7, 7, 0.78)
    ),
    url("../assets/images/Studiohero.jpg") center / cover no-repeat;
  background-attachment: scroll;
  border-top: 1px solid #343434;
}

main .studio-door-form .mix-review-heading {
  max-width: 820px;
  margin-bottom: 26px;
}

main .studio-door-form .mix-review-heading > p:not(.section-label) {
  max-width: 620px;
  color: #aaa8a2;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
  line-height: 1.75;
}

main .studio-door-form .mix-review-form {
  max-width: 900px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border-color);
  background: rgba(16, 16, 16, 0.29) !important;
}

main .studio-door-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

main .studio-door-form .form-field {
  margin-bottom: 16px;
}

main .studio-door-form .form-field label {
  display: block;
  margin-bottom: 0.55rem;
  color: #bbbbbb;
  font-family: "Julee", cursive !important;
  font-size: 0.68rem;
  font-weight: 400 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

main .studio-door-form .form-field input,
main .studio-door-form .form-field select,
main .studio-door-form .form-field textarea {
  width: 100%;
  border: 1px solid #333333;
  border-radius: 0;
  background: #0b0b0b;
  color: var(--color-white);
  outline: none;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

main .studio-door-form .form-field input,
main .studio-door-form .form-field select {
  min-height: 55px;
  padding: 0 1rem;
}

main .studio-door-form .form-field textarea {
  padding: 1rem;
  resize: vertical;
}

main .studio-door-form .form-field input:focus,
main .studio-door-form .form-field select:focus,
main .studio-door-form .form-field textarea:focus {
  border-color: var(--color-accent);
  background: #0e0e0e;
}

main .studio-door-form .form-field input::placeholder,
main .studio-door-form .form-field textarea::placeholder {
  color: #666666;
}

main .studio-door-form .form-submit {
  display: flex;
  margin: 6px 0 0 auto;
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
}

main .studio-door-form .form-note {
  width: fit-content;
  max-width: 320px;
  margin: 8px 0 0 auto;
  color: #777777;
  font-family: "Julee", cursive !important;
  font-size: 0.72rem;
  font-weight: 400 !important;
  text-align: right;
}

/* ---------------------------------------------------------
   DOOR 03 — STUDIO NAVIGATOR SHELL
--------------------------------------------------------- */

main .studio-door-navigator .studio-explorer {
  padding-block: clamp(38px, 5vw, 62px);
  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(57, 255, 20, 0.075),
      transparent 22%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(217, 44, 41, 0.10),
      transparent 26%
    ),
    linear-gradient(
      rgba(7, 7, 7, 0.78),
      rgba(7, 7, 7, 0.78)
    ),
    url("../assets/images/IMG_3997.gif") center / cover no-repeat;
  background-attachment: scroll;
  color: #f1eee7;
}

main .studio-door-navigator .studio-door-content,
main .studio-door-navigator .studio-explorer .section-container {
  background-color: transparent !important;
}

main .studio-door-navigator .studio-explorer-heading {
  max-width: 820px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

main .studio-door-navigator .studio-explorer-heading .section-label {
  color: var(--color-slime) !important;
  font-family: "Metal Mania", cursive !important;
  font-weight: 400 !important;
}

main .studio-door-navigator .studio-explorer-heading p:not(.section-label) {
  max-width: 650px;
  color: #aaa8a2;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   NAVIGATOR TABS
--------------------------------------------------------- */

main .studio-door-navigator .studio-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  overflow: visible !important;
  background: #101010;
  border: 1px solid #343434;
  border-bottom: 0;
}

main .studio-door-navigator .studio-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  min-height: 68px;
  padding: 16px 20px;
  background: #101010;
  color: var(--color-slime);
  border: 0;
  border-right: 1px solid #343434;
  border-bottom: 1px solid #343434;
  font-family: "Rock Salt", cursive !important;
  font-size: 0.75rem;
  font-weight: 400 !important;
  line-height: 1.35;
  letter-spacing: 0.10em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal !important;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

main .studio-door-navigator .studio-tab:last-child {
  border-right: 0;
}

main .studio-door-navigator .studio-tab:not(.is-active):hover {
  background: #1d1d1d;
  color: #f1eee7;
  transform: translateY(-2px);
}

main .studio-door-navigator .studio-tab.is-active {
  background: var(--color-slime);
  color: #080808;
  border-bottom-color: var(--color-slime);
}

main .studio-door-navigator .studio-tab.is-active::after {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   NAVIGATOR PANELS + TYPOGRAPHY
--------------------------------------------------------- */

main .studio-door-navigator .studio-panel {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: clamp(22px, 3vw, 38px) !important;
  background: transparent !important;
  color: #f1eee7;
  border: 0 !important;
  box-shadow: none !important;
  animation: studioPanelIn 320ms ease;
}

main .studio-door-navigator .studio-panel[hidden] {
  display: none !important;
}

@keyframes studioPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main .studio-door-navigator .studio-panel .panel-heading {
  width: 100%;
  max-width: none;
  margin: 0 auto clamp(20px, 2.5vw, 30px);
  text-align: center;
}

main .studio-door-navigator .studio-panel .panel-heading .section-label,
main .studio-door-navigator .studio-panel .panel-heading h3,
main .studio-door-navigator .studio-panel .panel-heading > p {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

main .studio-door-navigator .studio-panel .panel-heading .section-label,
main .studio-door-navigator .studio-panel .panel-heading h3 {
  font-family: "Metal Mania", cursive !important;
  font-weight: 400 !important;
}

main .studio-door-navigator .studio-panel .panel-heading h3 {
  color: #d6d0c4;
}

main .studio-door-navigator .studio-panel .panel-heading > p {
  color: #aaa8a2;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
  line-height: 1.7;
}

main .studio-door-navigator .panel-cta {
  display: flex;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #c9c3b8;
}

main .studio-door-navigator .panel-cta .button {
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------
   DIAGNOSE
--------------------------------------------------------- */

main .studio-door-navigator
.studio-panel[data-studio-panel="diagnose"] {
  text-align: center;
}

main .studio-door-navigator .diagnosis-carousel {
  display: grid;
  grid-template-columns: 56px minmax(0, 520px) 56px;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  margin: 0 auto 18px;
}

main .studio-door-navigator .diagnosis-options {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

main .studio-door-navigator
.studio-panel[data-studio-panel="diagnose"]
.diagnosis-button {
  display: none;
  width: 100%;
  min-height: 140px;
  padding: 28px 30px;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-image: none !important;
  color: #d92c29 !important;
  border: 0 !important;
  font-family: "Rock Salt", cursive !important;
  font-size: clamp(42px, 4.2vw, 54px) !important;
  font-weight: 400 !important;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease;
}

main .studio-door-navigator
.studio-panel[data-studio-panel="diagnose"]
.diagnosis-button:hover {
  transform: translateY(-3px);
}

main .studio-door-navigator
.studio-panel[data-studio-panel="diagnose"]
.diagnosis-button.is-carousel-current {
  display: flex;
  animation: diagnosisCardIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes diagnosisCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

main .studio-door-navigator .diagnosis-carousel-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: transparent;
  color: var(--color-slime);
  border: 1px solid rgba(241, 238, 231, 0.35);
  font-family: "Lacquer", sans-serif !important;
  font-size: 30px;
  font-weight: 400 !important;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

main .studio-door-navigator .diagnosis-carousel-control:hover {
  background: var(--color-slime);
  color: #080808;
  border-color: var(--color-slime);
  transform: scale(1.05);
}

main .studio-door-navigator .diagnosis-result {
  position: relative;
  max-width: 920px;
  margin: 16px auto 0;
  padding: clamp(20px, 3vw, 28px);
  background: rgba(16, 16, 16, 0.59) !important;
  color: #f1eee7;
  border: 0 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-align: center;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
  transition: opacity 180ms ease, transform 180ms ease;
}

main .studio-door-navigator .diagnosis-result.is-changing {
  opacity: 0.4;
  transform: translateY(4px);
}

main .studio-door-navigator .diagnosis-result-label {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  color: #f1eee7 !important;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

main .studio-door-navigator .diagnosis-result h3 {
  margin-bottom: 1rem;
  color: var(--color-slime) !important;
  font-family: "Lacquer", sans-serif !important;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 400 !important;
  line-height: 1;
}

main .studio-door-navigator .diagnosis-result p:last-child {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  color: #bdbab4;
}

main .studio-door-navigator
.studio-panel[data-studio-panel="diagnose"]
.panel-cta {
  justify-content: center;
}

/* ---------------------------------------------------------
   SERVICES
--------------------------------------------------------- */

main .studio-door-navigator
.studio-panel[data-studio-panel="services"]
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 940px);
  margin-left: auto;
  margin-right: auto;
  border: 0;
}

main .studio-door-navigator .service-card {
  min-height: 200px;
  padding: clamp(20px, 2.5vw, 28px);
  background: rgba(16, 16, 16, 0.59) !important;
  color: #f1eee7;
  border: 0 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform 220ms ease;
}

main .studio-door-navigator .service-card:hover {
  transform: translateY(-5px);
}

main .studio-door-navigator .service-card > span {
  display: block;
  margin-bottom: clamp(20px, 3vw, 32px);
  color: var(--color-slime);
  font-family: "Metal Mania", cursive !important;
  font-weight: 400 !important;
}

main .studio-door-navigator .service-card h4 {
  color: #f1eee7 !important;
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
}

main .studio-door-navigator .service-card p {
  margin-bottom: 0;
  color: #bdbab4;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------
   PROCESS
--------------------------------------------------------- */

main .studio-door-navigator
.studio-panel[data-studio-panel="process"]
.process-timeline {
  width: min(100%, 940px);
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
}

main .studio-door-navigator .process-step {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  padding-block: 18px;
  background: rgba(16, 16, 16, 0.59) !important;
  border: 0 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: padding-left 180ms ease;
}

main .studio-door-navigator .process-step:hover {
  padding-left: 12px;
}

main .studio-door-navigator .process-number {
  color: var(--color-slime);
}

main .studio-door-navigator .process-step h4 {
  color: #f1eee7 !important;
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
}

main .studio-door-navigator .process-step p {
  margin-bottom: 0;
  color: #bdbab4;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
}

main .studio-door-navigator
.studio-panel[data-studio-panel="process"]
.panel-cta {
  justify-content: center;
  text-align: center;
}

/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

main .studio-door-navigator
.studio-panel[data-studio-panel="faq"]
.faq-list {
  width: min(100%, 940px);
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #bdb7ac;
}

main .studio-door-navigator .faq-item {
  margin: 0;
  overflow: clip;
  background: rgba(16, 16, 16, 0.59) !important;
  border: 0 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

main .studio-door-navigator .faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  width: 100%;
  padding: 15px 58px 15px 0;
  color: #d6d0c4;
  font-family: "Metal Mania", cursive !important;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 400 !important;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease, padding-left 180ms ease;
}

main .studio-door-navigator .faq-item summary::-webkit-details-marker {
  display: none;
}

main .studio-door-navigator .faq-item summary::marker {
  content: "";
}

main .studio-door-navigator .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  color: var(--color-slime);
  background: #101010;
  border: 1px solid #101010;
  font-family: "Lacquer", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

main .studio-door-navigator .faq-item summary:hover {
  color: #d92c29;
  padding-left: 10px;
}

main .studio-door-navigator .faq-item summary:hover::after {
  color: #101010;
  background: var(--color-slime);
  border-color: var(--color-slime);
}

main .studio-door-navigator .faq-item[open] summary {
  color: #d92c29;
}

main .studio-door-navigator .faq-item[open] summary::after {
  content: "−";
  color: #fff;
  background: #d92c29;
  border-color: #d92c29;
}

main .studio-door-navigator .faq-item p {
  max-width: 760px;
  margin: 0;
  padding: 0 58px 18px 0;
  color: #bdbab4;
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 900px) {
  main .studio-door-navigator .studio-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main .studio-door-navigator .studio-tab:nth-child(2) {
    border-right: 0;
  }

  main .studio-door-navigator .studio-tab:nth-child(-n + 2) {
    border-bottom: 1px solid #343434;
  }

  main .studio-door-navigator
  .studio-panel[data-studio-panel="services"]
  .service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  main .studio-door-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  main .studio-door-mix .mix-demo-buttons {
    flex-direction: column;
  }

  main .studio-door-mix .mix-demo-buttons button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  main .studio-hero {
    min-height: 560px;
    padding: 112px 0 52px;

    background-position: center center;
    background-size: cover;
  }

  main .studio-door-navigator .studio-explorer {
    padding-block: 34px 46px;
  }

  main .studio-door-navigator .studio-explorer {
    padding-block: 34px 46px;
  }

  main .studio-door-navigator .studio-panel {
    padding: 22px 18px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  main .studio-door-navigator .studio-panel .panel-heading {
    margin: 0 auto 22px;
  }

  main .studio-door-navigator
  .studio-panel[data-studio-panel="services"]
  .service-grid,
  main .studio-door-navigator
  .studio-panel[data-studio-panel="process"]
  .process-timeline,
  main .studio-door-navigator
  .studio-panel[data-studio-panel="faq"]
  .faq-list {
    width: 100%;
  }

  main .studio-door-navigator .diagnosis-carousel {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    width: 100%;
    margin: 0 auto 16px;
  }

  main .studio-door-navigator .diagnosis-options {
    width: 100%;
    max-width: none;
  }

  main .studio-door-navigator
  .studio-panel[data-studio-panel="diagnose"]
  .diagnosis-button {
    min-height: 120px;
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  main .studio-door-navigator .diagnosis-carousel-control {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  main .studio-door-navigator .diagnosis-result {
    margin-top: 14px;
    padding: 20px 18px;
  }

  main .studio-door-navigator .service-card {
    min-height: 0;
    padding: 20px 18px;
  }

  main .studio-door-navigator .service-card > span {
    margin-bottom: 18px;
  }

  main .studio-door-navigator .process-step {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding-block: 16px;
  }

  main .studio-door-navigator .faq-item summary {
    min-height: 56px;
    padding: 14px 50px 14px 0;
  }

  main .studio-door-navigator .faq-item summary::after {
    width: 34px;
    height: 34px;
    font-size: 24px;
  }

  main .studio-door-navigator .faq-item p {
    padding: 0 42px 16px 0;
  }

  main .studio-door-navigator .panel-cta {
    margin-top: 20px;
    padding-top: 16px;
  }
}

/* =========================================================
   864BLOCKBOYS — SITEWIDE FONT ROUTING
   ---------------------------------------------------------
   Allerta Stencil = hero / page identity
   Rock Salt       = major editorial headings + interactive tabs
   Metal Mania     = labels / eyebrows / category markers
   Lacquer         = card titles / buttons / utility actions
   Julee           = body copy / descriptions
   Splash          = numeric markers only
   Header remains intentionally neutral for navigation clarity.
========================================================= */

/* ---------- HERO / PAGE IDENTITY ---------- */
main :is(
  .fashion-hero,
  .local-hero,
  .music-hero
) h1,
body.home-page .hero h1 {
  font-family: "Allerta Stencil", sans-serif !important;
  font-weight: 400 !important;
}

/* ---------- MAJOR EDITORIAL HEADINGS ---------- */
body.home-page :is(
  .section-heading h2,
  .panel-copy h3,
  .studio-inner h2
),
main :is(
  .fashion-explorer-heading,
  .local-explorer-heading,
  .featured-release-heading,
  .catalog-heading,
  .visuals-heading,
  .gvb-about
) h2 {
  font-family: "Rock Salt", cursive !important;
  font-weight: 400 !important;
}

/* ---------- INTERACTIVE TABS ---------- */
main :is(
  .fashion-tab,
  .local-tab,
  .music-tab
),
body.home-page .category-tab strong {
  font-family: "Rock Salt", cursive !important;
  font-weight: 400 !important;
}

/* ---------- LABELS / EYEBROWS / CATEGORY MARKERS ---------- */
body.home-page :is(
  .eyebrow,
  .home-card-label,
  .index-title
),
main :is(
  .fashion-explorer,
  .local-explorer,
  .featured-release,
  .release-catalog,
  .music-visuals,
  .gvb-about,
  .featured-local-fashion,
  .local-spotlight,
  .fashion-discovery,
  .local-discovery,
  .music-discovery
) .section-label,
main :is(
  .fashion-card-label,
  .shop-category,
  .value-tier,
  .featured-local-category,
  .event-category,
  .local-card-label,
  .place-type,
  .culture-label,
  .spotlight-category,
  .release-type,
  .release-card-label,
  .visual-card-info > span,
  .discovery-link > span:first-child
) {
  font-family: "Metal Mania", cursive !important;
  font-weight: 400 !important;
}

/* ---------- PANEL / CARD / FEATURE TITLES ---------- */
main :is(
  .fashion-panel,
  .local-panel
) .panel-heading h3,
main :is(
  .fashion-card,
  .local-shop-card,
  .trend-card,
  .value-card,
  .local-feature-card,
  .place-card,
  .culture-card,
  .event-main
) h4,
main :is(
  .release-info,
  .release-card,
  .visual-card-info,
  .featured-local-copy,
  .local-spotlight-copy
) h3,
main .discovery-link strong {
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
}

/* ---------- BUTTONS / ACTIONS ---------- */
main :is(
  a.button,
  button.button,
  .form-submit,
  .text-link
),
body.home-page :is(
  .button,
  .button-outline
),
.site-footer :is(
  .footer-navigation a,
  .footer-nav a
) {
  font-family: "Lacquer", sans-serif !important;
  font-weight: 400 !important;
}

/* ---------- BODY / DESCRIPTIVE COPY ---------- */
body.home-page :is(
  .hero-description,
  .panel-description,
  .section-heading p,
  .index-row span:last-child,
  .footer-note
),
main :is(
  .fashion-hero-description,
  .local-hero-description,
  .music-hero-description,
  .fashion-explorer-heading,
  .local-explorer-heading,
  .featured-release-heading,
  .catalog-heading,
  .visuals-heading,
  .gvb-about,
  .fashion-panel,
  .local-panel,
  .featured-release,
  .release-catalog,
  .music-visuals,
  .featured-local-fashion,
  .local-spotlight,
  .fashion-discovery,
  .local-discovery,
  .music-discovery
) p {
  font-family: "Julee", cursive !important;
  font-weight: 400 !important;
}

/* ---------- NUMERIC MARKERS ONLY ---------- */
main :is(
  .trend-number,
  .process-number,
  .event-date strong
) {
  font-family: "Splash", cursive !important;
  font-weight: 400 !important;
}

/* ---------- FOOTER BRAND ---------- */
.site-footer :is(
  .footer-logo,
  .footer-brand
) {
  font-family: "Allerta Stencil", sans-serif !important;
  font-weight: 400 !important;
}
/* =========================================================
   SITE FOOTER — GVB IMAGE BACKGROUND
========================================================= */

.site-footer {
  background:
    linear-gradient(
      rgba(8, 8, 8, 0.72),
      rgba(8, 8, 8, 0.72)
    ),
    url("../assets/images/GVB_Kaleidoscopic.png")
    center / cover no-repeat;

  border-top: 1px solid #343434;
}
/* =========================================================
   HEADER + FOOTER NAV COLORS
   Red default / Slime green hover
========================================================= */

/* HEADER TABS */
.bb-site-header .bb-primary-nav a,
.bb-site-header .bb-primary-nav .bb-nav-book {
  color: #d92c29 !important;
}

.bb-site-header .bb-primary-nav a:hover,
.bb-site-header .bb-primary-nav a:focus-visible,
.bb-site-header .bb-primary-nav a[aria-current="page"],
.bb-site-header .bb-primary-nav .bb-nav-book:hover {
  color: var(--color-slime) !important;
}


/* FOOTER TABS */
.site-footer .footer-navigation a,
.site-footer .footer-nav a {
  color: #d92c29 !important;
}

.site-footer .footer-navigation a:hover,
.site-footer .footer-navigation a:focus-visible,
.site-footer .footer-nav a:hover,
.site-footer .footer-nav a:focus-visible {
  color: var(--color-slime) !important;
}
/* CENTER FOOTER COPYRIGHT */
.site-footer .copyright,
.site-footer .footer-note {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* =========================================================
   HOMEPAGE HERO — GVB BRAND WATERMARK
========================================================= */

body.home-page .hero-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.home-page .hero-copy::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;

  background:
    linear-gradient(
      rgba(8, 8, 8, 0.72),
      rgba(8, 8, 8, 0.72)
    ),
    url("../assets/images/IMG_2414.JPG")
    center / cover no-repeat;

  opacity: 0.42;
  filter: grayscale(1) contrast(1.1);
  transform: scale(1.04);
}

body.home-page .hero-copy > * {
  position: relative;
  z-index: 1;
}
/* =========================================================
   HOMEPAGE — 864 HERO ART + DUAL HORIZONTAL CAROUSEL
   ---------------------------------------------------------
   Top carousel:    right -> center -> left
   Bottom carousel: left  -> center -> right
   Bottom carousel remains upside down.
========================================================= */

body.home-page .art-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Optional image element support inside the art stage. */
body.home-page .art-stage img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Readability layer above the art-stage background/image. */
body.home-page .art-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    rgba(8, 8, 8, 0.28),
    rgba(8, 8, 8, 0.58)
  );
  pointer-events: none;
}

/* Shared carousel frame. */
body.home-page .art-fallback.block-carousel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block !important;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

body.home-page .block-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Shared slide presentation. Direction is assigned below. */
body.home-page .block-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(12px);
  transition:
    transform 300ms cubic-bezier(.77, 0, .18, 1),
    opacity 180ms ease,
    filter 300ms ease;
  will-change: transform, opacity, filter;
}

body.home-page .block-slide.is-active {
  opacity: 1;
  filter: blur(0);
}

body.home-page .block-slide.is-exiting {
  opacity: 0;
  filter: blur(14px);
}

/* Top carousel position. */
body.home-page .block-carousel:not(.block-carousel-reverse) {
  transform: translateY(-16%);
}

/* Bottom carousel position + upside-down treatment. */
body.home-page .block-carousel-reverse {
  transform: translateY(18%) scaleY(-1);
}

/* Top carousel: enter from right, exit left. */
body.home-page .block-carousel:not(.block-carousel-reverse) .block-slide {
  transform: translateX(115%) scale(0.86);
}

body.home-page .block-carousel:not(.block-carousel-reverse) .block-slide.is-active {
  transform: translateX(0) scale(1);
}

body.home-page .block-carousel:not(.block-carousel-reverse) .block-slide.is-exiting {
  transform: translateX(-115%) scale(1.08);
}

/* Bottom carousel: enter from left, exit right. */
body.home-page .block-carousel-reverse .block-slide {
  transform: translateX(-115%) scale(0.86);
}

body.home-page .block-carousel-reverse .block-slide.is-active {
  transform: translateX(0) scale(1);
}

body.home-page .block-carousel-reverse .block-slide.is-exiting {
  transform: translateX(115%) scale(1.08);
}

/* 864 */
body.home-page .block-slide span {
  display: block;
  color: #f1eee7;
  font-family: "Allerta Stencil", sans-serif;
  font-size: clamp(82px, 11vw, 150px);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.07em;
  text-shadow: 0 5px 24px rgba(0, 0, 0, 0.85);
}

/* SOUND. STYLE. CITY. */
body.home-page .block-slide small {
  display: block !important;
  margin-top: 16px !important;
  color: var(--color-slime);
  font-family: "Metal Mania", cursive;
  font-size: clamp(12px, 1.5vw, 19px);
  line-height: 1;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* Tighter desktop hero-art window. */
@media (min-width: 901px) {
  body.home-page .art-stage {
    min-height: 320px;
    aspect-ratio: 4 / 3;
  }
}

main .studio-hero {
  background:
    linear-gradient(
      rgba(7, 7, 7, 0.52),
      rgba(7, 7, 7, 0.62)
    ),
    url("../assets/images/Studio_Hero.jpg")
    center center / cover no-repeat !important;
}
@media (max-width: 640px) {
  main .studio-hero {
    background-position: center center !important;
    background-size: cover !important;
  }
}

/* =========================================================
   STUDIO — MOBILE CONSOLIDATION
   Keeps Studio tools connected and inside viewport
========================================================= */

@media (max-width: 640px) {

  /* Keep Studio content inside the screen */
  main .studio-door-content,
  main .studio-explorer,
  main .mix-demo,
  main .mix-review,
  main .studio-panel,
  main .diagnosis-carousel,
  main .diagnosis-options,
  main .diagnosis-result,
  main .mix-demo-placeholder {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Prevent panels from visually detaching */
  main .studio-door-navigator .studio-panel {
    width: 100%;
    margin: 0;
    padding: 24px 16px !important;
    overflow: hidden;
  }

  /* -----------------------------
     DIAGNOSE TOOL
  ----------------------------- */

  main .studio-door-navigator .diagnosis-carousel {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 6px;

    width: 100%;
    max-width: 100%;
    margin: 0 auto 16px;
  }

  main .studio-door-navigator .diagnosis-options {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  main .studio-door-navigator
  .studio-panel[data-studio-panel="diagnose"]
  .diagnosis-button {
    width: 100%;
    min-width: 0;
    min-height: 110px;

    padding: 18px 12px;

    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.08;

    white-space: normal;
    overflow-wrap: anywhere;
  }

  main .studio-door-navigator .diagnosis-carousel-control {
    width: 38px;
    height: 38px;
    min-width: 0;
    padding: 0;

    font-size: 22px;
  }

  main .studio-door-navigator .diagnosis-result {
    width: 100%;
    max-width: 100%;

    margin: 14px 0 0;
    padding: 18px 14px;

    overflow-wrap: anywhere;
  }

  /* -----------------------------
     HEAR THE DIFFERENCE
  ----------------------------- */

  main .studio-door-mix .mix-demo {
    width: 100%;
    max-width: 100%;

    margin-top: 3rem;
    padding-top: 2.5rem;

    overflow: hidden;
  }

  main .studio-door-mix .mix-demo-heading {
    width: 100%;
    max-width: 100%;
  }

  main .studio-door-mix .mix-demo-heading h3 {
    width: 100%;
    max-width: 100%;

    margin-right: 0;

    font-size: clamp(1.7rem, 8vw, 2.45rem) !important;
    line-height: 1;
    letter-spacing: -0.03em;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  main .studio-door-mix .mix-demo-placeholder {
    width: 100%;
    max-width: 100%;

    padding: 22px 16px;

    overflow: hidden;
  }

  main .studio-door-mix .mix-demo-placeholder p,
  main .studio-door-mix .mix-demo-placeholder span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  main .studio-door-mix .mix-demo-buttons {
    display: flex;
    flex-direction: column;

    width: 100%;
    gap: 10px;
  }

  main .studio-door-mix .mix-demo-buttons button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  main .studio-hero {
    background-image: url("../assets/images/Studio_Hero.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}
@media (max-width: 640px) {
  main .studio-hero {
    position: relative;
    overflow: hidden;
    background: #080808 !important;
  }

  main .studio-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../assets/images/Studio_Hero.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  main .studio-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
      linear-gradient(
        rgba(7, 7, 7, 0.45),
        rgba(7, 7, 7, 0.62)
      );
  }

  main .studio-hero .section-container {
    position: relative;
    z-index: 2;
  }
}