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


/* ---------------------------------------------------------
   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;

  /*
  Temporary accent.

  We can change this later once we establish
  the complete 864 Blockboys brand identity.
  */

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

  /* Red remains the CTA/action accent. */
  --color-accent: var(--color-red);

  /* Slime is used for section labels and interactive tab text. */
  --color-label: var(--color-slime);--color-slime-green: #39FF14;


  /* Typography */

  --font-display:
    "Arial Narrow",
    "Helvetica Neue",
    Arial,
    sans-serif;

  --font-body:
    "Helvetica Neue",
    Helvetica,
    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
========================================================= */

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}


h1,
h2,
h3,
h4 {
  font-family:
    var(--font-display);

  font-weight:
    800;

  text-wrap:
    balance;
}


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

h1 {
  margin-bottom:
    2rem;

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

  line-height:
    0.88;

  letter-spacing:
    -0.045em;
}


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

h2 {
  margin-bottom:
    2rem;

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

  line-height:
    0.92;

  letter-spacing:
    -0.04em;
}


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

h3 {
  margin-bottom:
    1rem;

  font-size:
    clamp(
      1.8rem,
      3.5vw,
      3.6rem
    );

  line-height:
    0.98;

  letter-spacing:
    -0.025em;
}


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

h4 {
  margin-bottom:
    0.75rem;

  font-size:
    1.25rem;

  line-height:
    1.08;

  letter-spacing:
    -0.015em;
}


/* ---------------------------------------------------------
   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;
  }

}

/* =========================================================
   STUDIO PAGE — INTERACTIVE EXPERIENCE
========================================================= */


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

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

  display: flex;

  align-items: flex-end;

  padding:
    150px
    0
    90px;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(255, 31, 45, 0.1),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      #080808,
      #141414 55%,
      #060606
    );

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


.studio-hero .section-container {
  width: min(
    calc(100% - 2 * var(--side-padding)),
    var(--content-width)
  );
}


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

  margin-bottom: 2rem;

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

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



/* ---------------------------------------------------------
   STUDIO EXPLORER
--------------------------------------------------------- */

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

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

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


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


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

  margin-bottom: 4rem;
}


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

  color:
    #555555;

  font-size: 1.05rem;
}



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

.studio-tabs {
  display: grid;

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

  margin-bottom: 0;

  border:
    1px solid #cccccc;

  background:
    #e9e6de;
}


.studio-tab {
  position: relative;

  min-height: 70px;

  padding:
    1rem
    1.25rem;

  border: 0;

  border-right:
    1px solid #cccccc;

  background:
    transparent;

  color:
    #666666;

  cursor: pointer;

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

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


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


.studio-tab:hover {
  background:
    rgba(255, 255, 255, 0.55);

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


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

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


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

  position: absolute;

  left: 50%;

  bottom: -9px;

  width: 18px;

  height: 18px;

  background:
    var(--color-black);

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

  z-index: 2;
}



/* ---------------------------------------------------------
   TAB CONTENT PANEL
--------------------------------------------------------- */

.studio-panel {
  min-height: 520px;

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

  background:
    var(--color-white);

  border:
    1px solid #cccccc;

  border-top: 0;

  color: var(--color-accent);

  animation:
    studioPanelIn 320ms ease;
}


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


@keyframes studioPanelIn {

  from {
    opacity: 0;

    transform:
      translateY(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


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

  margin-bottom: 3rem;
}


.panel-heading h3 {
  max-width: 700px;

  margin-bottom: 1rem;

  color: var(--color-accent);

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


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



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

.diagnosis-options {
  display: grid;

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

  gap:
    0.8rem;

  max-width:
    920px;

  margin-bottom:
    2rem;
}


.diagnosis-button {
  min-height: 70px;

  padding:
    1rem
    1.3rem;

  border:
    1px solid #c7c7c7;

  background:
    #f4f2ec;

  color:
    var(--color-slime);

  cursor:
    pointer;

  text-align:
    left;

  font-size:
    0.85rem;

  font-weight:
    800;

  letter-spacing:
    0.04em;

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


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

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

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


.diagnosis-button.is-active {
  background:
    var(--color-black);

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

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



/* ---------------------------------------------------------
   DIAGNOSIS RESULT
--------------------------------------------------------- */

.diagnosis-result {
  position:
    relative;

  max-width:
    920px;

  margin-top:
    2rem;

  padding:
    2.5rem;

  background:
    var(--color-black);

  color:
    var(--color-white);

  border-left:
    5px solid var(--color-accent);

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


.diagnosis-result.is-changing {
  opacity:
    0.4;

  transform:
    translateY(4px);
}


.diagnosis-result-label {
  margin-bottom:
    1rem;

  color: var(--color-slime);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.diagnosis-result h3 {
  margin-bottom:
    1rem;

  color:
    var(--color-white);

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

  line-height:
    1;
}


.diagnosis-result p:last-child {
  max-width:
    700px;

  margin-bottom:
    0;

  color:
    #c9c9c9;
}



/* ---------------------------------------------------------
   PANEL CTA
--------------------------------------------------------- */

.panel-cta {
  margin-top:
    3rem;
}



/* ---------------------------------------------------------
   SERVICES
--------------------------------------------------------- */

.service-grid {
  display: grid;

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

  border-top:
    1px solid #d0d0d0;

  border-left:
    1px solid #d0d0d0;
}


.service-card {
  min-height:
    270px;

  padding:
    2rem;

  border-right:
    1px solid #d0d0d0;

  border-bottom:
    1px solid #d0d0d0;

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


.service-card:hover {
  background:
    #f2efe8;
}


.service-card > span {
  display:
    block;

  margin-bottom:
    3rem;

  color: var(--color-slime);

  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.15em;
}


.service-card h4 {
  margin:
    0 0 1rem;

  font-size:
    1.4rem;

  line-height:
    1.1;
}


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

  color:
    #555555;
}



/* ---------------------------------------------------------
   MIX DEMO
--------------------------------------------------------- */

.mix-demo {
  margin-top:
    5rem;

  padding-top:
    4rem;

  border-top:
    1px solid #d0d0d0;
}


.mix-demo-heading {
  margin-bottom:
    2rem;
}


.mix-demo-heading h3 {
  color: var(--color-accent);

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


.mix-demo-placeholder {
  padding:
    3rem;

  background:
    #111111;

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


.mix-demo-placeholder > span {
  color: var(--color-slime);

  font-size:
    0.7rem;

  font-weight:
    800;

  letter-spacing:
    0.15em;
}


.mix-demo-placeholder p {
  margin:
    1.2rem 0 2rem;

  color:
    #aaaaaa;
}


.mix-demo-buttons {
  display:
    flex;

  gap:
    1rem;
}


.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;
}



/* ---------------------------------------------------------
   PROCESS
--------------------------------------------------------- */

.process-timeline {
  max-width:
    900px;

  border-top:
    1px solid #d0d0d0;
}


.process-step {
  display:
    grid;

  grid-template-columns:
    90px
    1fr;

  gap:
    2rem;

  padding:
    2.2rem
    0;

  border-bottom:
    1px solid #d0d0d0;
}


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

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;
}


.process-step h4 {
  margin:
    0 0 0.5rem;

  font-size:
    1.35rem;
}


.process-step p {
  margin-bottom:
    0;

  color:
    #555555;
}



/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

.faq-list {
  max-width:
    900px;

  border-top:
    1px solid #d0d0d0;
}


.faq-item {
  border-bottom:
    1px solid #d0d0d0;
}


.faq-item summary {
  position:
    relative;

  padding:
    1.5rem
    3rem
    1.5rem
    0;

  cursor:
    pointer;

  list-style:
    none;

  color: var(--color-accent);

  font-size:
    1rem;

  font-weight:
    800;
}


.faq-item summary::-webkit-details-marker {
  display:
    none;
}


.faq-item summary::after {
  content:
    "+";

  position:
    absolute;

  right:
    0;

  top:
    50%;

  transform:
    translateY(-50%);

  font-size:
    1.5rem;

  font-weight:
    400;
}


.faq-item[open] summary::after {
  content:
    "−";
}


.faq-item p {
  max-width:
    720px;

  padding-bottom:
    1.5rem;

  color:
    #555555;
}



/* ---------------------------------------------------------
   MIX REVIEW
--------------------------------------------------------- */

.mix-review {
  padding:
    9rem
    0;

  background:
    #090909;

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


.mix-review-heading {
  max-width:
    800px;

  margin-bottom:
    4rem;
}


.mix-review-heading > p:not(.section-label) {
  max-width:
    570px;

  font-size:
    1.05rem;
}



/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.mix-review-form {
  max-width:
    900px;

  padding:
    clamp(
      1.5rem,
      4vw,
      3rem
    );

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

  background:
    #111111;
}


.form-row {
  display:
    grid;

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

  gap:
    1.25rem;
}


.form-field {
  margin-bottom:
    1.5rem;
}


.form-field label {
  display:
    block;

  margin-bottom:
    0.55rem;

  color:
    #bbbbbb;

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.form-field input,
.form-field select,
.form-field textarea {
  width:
    100%;

  border:
    1px solid #333333;

  border-radius:
    0;

  background:
    #0b0b0b;

  color:
    var(--color-white);

  outline:
    none;

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


.form-field input,
.form-field select {
  min-height:
    55px;

  padding:
    0
    1rem;
}


.form-field textarea {
  padding:
    1rem;

  resize:
    vertical;
}


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

  background:
    #0e0e0e;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
  color:
    #666666;
}


.form-submit {
  margin-top:
    0.5rem;
}


.form-note {
  margin:
    1.5rem 0 0;

  color:
    #777777;

  font-size:
    0.72rem;
}






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

@media (max-width: 760px) {

  .studio-hero {
    min-height:
      auto;

    padding:
      125px
      0
      75px;
  }


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


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


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


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


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


  .studio-panel {
    min-height:
      auto;

    padding:
      2rem
      1.25rem;
  }


  .diagnosis-options {
    grid-template-columns:
      1fr;
  }


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


  .process-step {
    grid-template-columns:
      50px
      1fr;

    gap:
      1rem;
  }


  .form-row {
    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .mix-demo-buttons {
    flex-direction:
      column;
  }


  .mix-demo-buttons button {
    width:
      100%;
  }

}

/* =========================================================
   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);
}


/* ---------------------------------------------------------
   PREMIUM HEADER
--------------------------------------------------------- */

.site-header {
  background: rgba(6, 6, 6, 0.90);
  border-bottom-color: rgba(255, 255, 255, 0.13);
}

.site-logo:hover,
.primary-navigation a[aria-current="page"],
.primary-navigation a:hover {
  color: var(--color-white);
}

.primary-navigation a::after,
.primary-navigation a[aria-current="page"]::after {
  background: var(--color-accent);
}

.header-cta {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.header-cta:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  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
   MUSIC / FASHION / STUDIO / 864
   Shared interior-page design
   ========================================================= */

/* ---------- FOUNDATION ---------- */

body.bb-interior {
  --color-black: #101010;
  --color-charcoal: #191919;
  --color-dark-gray: #242424;
  --color-white: #f1eee7;
  --color-off-white: #f1eee7;
  --color-gray: #aaa8a2;
  --color-light-gray: #c7c4bd;
  --color-accent: #d92c29;
  --border-color: #343434;
  --content-width: 1280px;
  --side-padding: clamp(20px, 4vw, 64px);
  --font-body: Arial, Helvetica, sans-serif;
  --font-display: Arial, Helvetica, sans-serif;

  margin: 0;
  background: #101010;
  color: #f1eee7;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.bb-interior [hidden] {
  display: none !important;
}

.bb-interior ::selection {
  background: #d92c29;
  color: #fff;
}

.bb-interior :focus-visible {
  outline: 3px solid #ff6864;
  outline-offset: 5px;
}

.bb-interior :is(section, [id]) {
  scroll-margin-top: 100px;
}

.bb-interior :is(
  .section-container,
  .footer-container
) {
  width: min(
    1280px,
    calc(100% - var(--side-padding) * 2)
  );
  margin-inline: auto;
}

.bb-interior :is(img, video, iframe) {
  max-width: 100%;
}

.bb-interior :is(
  .section-label,
  .eyebrow
) {
  margin: 0 0 18px;
  color: #ff6864;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- TYPE HIERARCHY ---------- */

.bb-interior main :is(h1, h2, h3, h4) {
  color: #f1eee7;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-wrap: balance;
}

.bb-interior main h1 {
  max-width: 1000px;
  margin: 0 0 26px;
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.bb-interior main h2 {
  margin: 0 0 20px;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -.05em;
}

.bb-interior main h3 {
  margin: 0 0 16px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.bb-interior main h4 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.bb-interior main p {
  color: #bdbab4;
}

.bb-interior main :is(
  .section-label,
  .eyebrow
) {
  color: #ff6864;
}

/* ---------- PAGE HEROES ---------- */

.bb-interior :is(
  .studio-hero,
  .fashion-hero,
  .local-hero,
  .music-hero
) {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  padding: 148px 0 56px;
  background: #101010;
  color: #f1eee7;
  border-bottom: 1px solid #343434;
}

/* Keep existing music artwork behind readable copy. */

.bb-interior .music-hero::before,
.bb-interior .music-hero::after {
  pointer-events: none;
}

.bb-interior .music-hero::before {
  opacity: .12;
}

.bb-interior .music-hero > .section-container {
  position: relative;
  z-index: 1;
}

.bb-interior :is(
  .studio-hero-description,
  .fashion-hero-description,
  .local-hero-description,
  .music-hero-description
) {
  max-width: 620px;
  margin: 0 0 26px;
  color: #bdbab4;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.75;
}

/* ---------- SECTION RHYTHM ---------- */

.bb-interior :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: 64px 0;
  background: #101010;
  color: #f1eee7;
  border-bottom: 1px solid #343434;
}

.bb-interior :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: 30px;
}

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

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

.bb-interior :is(
  .studio-tabs,
  .fashion-tabs,
  .local-tabs
) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  background: #101010;
  border: 1px solid #343434;
  border-bottom: 0;
  border-radius: 0;
  scrollbar-width: thin;
  scrollbar-color: #62605c #101010;
}

.bb-interior :is(
  .studio-tab,
  .fashion-tab,
  .local-tab
) {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  margin: 0;
  padding: 18px 24px;
  background: #101010;
  color: #aaa8a2;
  border: 0;
  border-right: 1px solid #343434;
  border-bottom: 1px solid #343434;
  border-radius: 0;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
}

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

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

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

.bb-interior :is(
  .studio-tab,
  .fashion-tab,
  .local-tab
)::after {
  content: none;
}

.bb-interior :is(
  .studio-tab,
  .fashion-tab,
  .local-tab
):focus-visible {
  z-index: 1;
  outline-offset: -5px;
}

.bb-interior :is(
  .studio-panel,
  .fashion-panel,
  .local-panel
) {
  min-height: 0;
  margin: 0;
  padding: clamp(24px, 4vw, 48px);
  background: #151515;
  color: #f1eee7;
  border: 1px solid #343434;
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-interior :is(
  .studio-panel,
  .fashion-panel,
  .local-panel
) .panel-heading {
  max-width: 760px;
  margin-bottom: 30px;
}

.bb-interior .panel-heading > p:not(.section-label) {
  max-width: 620px;
  color: #bdbab4;
  font-size: 15px;
  line-height: 1.75;
}

/* ---------- STRUCTURED GRIDS ---------- */

.bb-interior :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));
  align-items: stretch;
  gap: 20px;
}

.bb-interior :is(
  .visual-grid,
  .featured-release-card,
  .featured-local-layout,
  .local-spotlight-layout,
  .gvb-about-layout
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 4vw, 48px);
}

.bb-interior :is(
  .service-grid,
  .fashion-card-grid,
  .value-grid,
  .local-card-grid,
  .culture-feature-grid,
  .release-grid,
  .visual-grid,
  .featured-release-card,
  .featured-local-layout,
  .local-spotlight-layout,
  .gvb-about-layout
) > * {
  min-width: 0;
}

/* ---------- CARDS ---------- */

.bb-interior :is(
  .service-card,
  .fashion-card,
  .value-card,
  .local-feature-card,
  .culture-card,
  .release-card,
  .visual-card,
  .local-shop-card,
  .place-card,
  .trend-card
) {
  margin: 0;
  background: #191919;
  color: #f1eee7;
  border: 1px solid #343434;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.bb-interior :is(
  .service-card,
  .value-card,
  .culture-card,
  .local-shop-card,
  .place-card,
  .trend-card
) {
  padding: 26px;
}

.bb-interior :is(
  .fashion-card-content,
  .local-card-content,
  .release-card-content,
  .visual-card-info
) {
  padding: 24px;
}

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

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

.bb-interior :is(
  .fashion-card-label,
  .local-card-label,
  .release-card-label,
  .shop-category,
  .value-tier,
  .place-type,
  .culture-label,
  .release-type,
  .featured-local-category,
  .spotlight-category,
  .event-category
) {
  color: #ff6864;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- ARTWORK / VIDEO ---------- */

.bb-interior :is(
  .release-card-art,
  .release-art-placeholder,
  .fashion-media-placeholder,
  .local-media-placeholder,
  .featured-local-placeholder,
  .local-spotlight-placeholder
) {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
}

.bb-interior :is(
  .release-card-art,
  .release-art-placeholder
) {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #211e23;
}

.bb-interior :is(
  .release-card-art,
  .release-art-placeholder
) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-interior :is(
  .fashion-media-placeholder,
  .local-media-placeholder,
  .featured-local-placeholder,
  .local-spotlight-placeholder
) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-interior .video-placeholder {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.bb-interior .visual-card iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.bb-interior audio {
  display: block;
  width: 100%;
  margin-top: 16px;
}

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

.bb-interior :is(
  .hero-actions,
  .studio-actions,
  .release-actions,
  .mix-demo-buttons
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.bb-interior .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  max-width: 100%;
  padding: 14px 22px;
  border-radius: 0;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  transform: none;
}

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

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

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

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

.bb-interior .button:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.bb-interior .text-link {
  color: #f1eee7;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.bb-interior .text-link:hover {
  color: #ff6864;
}

.bb-interior .panel-cta {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #343434;
}

/* ---------- STUDIO INTERACTIONS ---------- */

.bb-interior .diagnosis-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bb-interior .diagnosis-button {
  min-height: 48px;
  padding: 12px 18px;
  background: #191919;
  color: #f1eee7;
  border: 1px solid #62605c;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
}

.bb-interior .diagnosis-button:hover {
  background: #292929;
}

.bb-interior .diagnosis-button.is-active {
  background: #f1eee7;
  color: #101010;
  border-color: #f1eee7;
}

.bb-interior .diagnosis-result {
  margin-top: 24px;
  padding: clamp(24px, 3vw, 36px);
  background: #191919;
  border: 1px solid #343434;
  border-left: 3px solid #d92c29;
  border-radius: 0;
}

.bb-interior .diagnosis-result-label {
  color: #ff6864;
}

.bb-interior .process-step {
  padding-block: 24px;
  border-color: #343434;
}

.bb-interior :is(.process-number, .trend-number) {
  color: #ff6864;
}

.bb-interior .faq-item {
  background: transparent;
  border-color: #343434;
  border-radius: 0;
}

.bb-interior .faq-item summary {
  padding-block: 22px;
  color: #f1eee7;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.bb-interior .faq-item p {
  max-width: 720px;
  color: #bdbab4;
}

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

.bb-interior .mix-review-form {
  max-width: 900px;
  padding: clamp(24px, 4vw, 40px);
  background: #191919;
  border: 1px solid #343434;
  border-radius: 0;
}

.bb-interior .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bb-interior .form-field {
  min-width: 0;
}

.bb-interior .form-field label {
  display: block;
  margin-bottom: 9px;
  color: #f1eee7;
  font-size: 12px;
  font-weight: 700;
}

.bb-interior .form-field :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  width: 100%;
  min-height: 50px;
  padding: 14px;
  background: #101010;
  color: #f1eee7;
  border: 1px solid #62605c;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}

.bb-interior .form-field textarea {
  min-height: 150px;
  resize: vertical;
}

.bb-interior .form-field :is(input, textarea)::placeholder {
  color: #aaa8a2;
  opacity: 1;
}

.bb-interior .form-field :is(input, select, textarea):focus {
  border-color: #ff6864;
  outline: 2px solid #ff6864;
  outline-offset: 2px;
}

.bb-interior .form-note {
  color: #aaa8a2;
  font-size: 12px;
}

/* ---------- DISCOVERY LINKS ---------- */

.bb-interior .discovery-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bb-interior .discovery-link {
  min-width: 0;
  padding: 26px;
  background: #191919;
  color: #f1eee7;
  border: 1px solid #343434;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.bb-interior .discovery-link:hover {
  background: #242424;
  color: #f1eee7;
  border-color: #62605c;
  transform: none;
}

.bb-interior .discovery-link strong {
  color: #f1eee7;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.035em;
}

.bb-interior .discovery-link > span:first-child {
  color: #ff6864;
}

.bb-interior .discovery-link > span:last-child {
  color: #bdbab4;
}

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

.bb-interior .site-footer {
  padding: 52px 0 30px;
  background: #101010;
  color: #f1eee7;
  border-top: 1px solid #343434;
}

.bb-interior .footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.bb-interior .footer-logo {
  margin: 0;
  color: #f1eee7;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.065em;
  text-transform: none;
}

.bb-interior .footer-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 0;
}

.bb-interior .footer-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #f1eee7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bb-interior .footer-navigation a:hover {
  color: #ff6864;
}

.bb-interior .footer-container > p {
  margin: 0;
  color: #aaa8a2;
  font-size: 12px;
}

.bb-interior .copyright {
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid #343434;
  color: #aaa8a2;
  font-size: 10px;
  letter-spacing: .07em;
}

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

@media (max-width: 1000px) {
  .bb-interior :is(
    .service-grid,
    .fashion-card-grid,
    .value-grid,
    .local-card-grid,
    .culture-feature-grid,
    .release-grid,
    .discovery-links
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bb-interior :is(
    .studio-hero,
    .fashion-hero,
    .local-hero,
    .music-hero
  ) {
    padding-top: 124px;
  }
}

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

@media (max-width: 640px) {
  .bb-interior :is(
    .studio-hero,
    .fashion-hero,
    .local-hero,
    .music-hero
  ) {
    padding: 110px 0 36px;
  }

  .bb-interior :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: 40px;
  }

  .bb-interior :is(
    .service-grid,
    .fashion-card-grid,
    .value-grid,
    .local-card-grid,
    .culture-feature-grid,
    .release-grid,
    .visual-grid,
    .featured-release-card,
    .featured-local-layout,
    .local-spotlight-layout,
    .gvb-about-layout,
    .discovery-links,
    .form-row
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-interior :is(
    .studio-tab,
    .fashion-tab,
    .local-tab
  ) {
    min-height: 58px;
    padding: 16px 18px;
    font-size: 11px;
  }

  .bb-interior :is(
    .studio-panel,
    .fashion-panel,
    .local-panel
  ) {
    padding: 24px 18px;
  }

  .bb-interior .button {
    min-height: 48px;
    padding-inline: 18px;
  }

  .bb-interior .site-footer {
    padding-top: 38px;
  }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  .bb-interior *,
  .bb-interior *::before,
  .bb-interior *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* 864BLOCKBOYS — HEADER ONLY */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: #101010;
  border-bottom: 1px solid #343434;
}

.site-header .header-container {
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1180px, calc(100% - 12vw));
  min-height: 84px;
  margin-inline: auto;
}

.site-header .site-logo {
  flex-shrink: 0;
  margin-right: auto;
  color: #f1eee7;
  font: 900 clamp(20px, 2vw, 27px)/1 Arial, sans-serif;
  letter-spacing: -.06em;
  white-space: nowrap;
}

.site-header .primary-navigation {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header .primary-navigation a {
  color: #f1eee7;
  font: 700 11px/1.4 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header .primary-navigation a:hover,
.site-header .primary-navigation a[aria-current="page"] {
  color: #ff6864;
}

.site-header .mobile-menu-button {
  display: none;
}

.site-header .header-cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  background: #d92c29;
  color: #fff;
  font: 700 11px/1.4 Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Preserve the existing menu behavior at narrow window widths. */
@media (max-width: 1000px) {
  .site-header .header-cta {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-header .header-container {
    position: relative;
    width: calc(100% - 2.7rem);
    min-height: 72px;
    gap: 12px;
  }

  .site-header .mobile-menu-button {
    display: block;
    margin-left: auto;
    padding: 10px;
    background: transparent;
    color: #f1eee7;
    border: 0;
    font: 700 11px Arial, sans-serif;
    cursor: pointer;
  }

  .site-header .primary-navigation {
    display: none;
  }

  .site-header .primary-navigation.is-open {
    position: absolute;
    top: 72px;
    left: -1.35rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: calc(100% + 2.7rem);
    padding: 10px 1.35rem;
    background: #101010;
    border-bottom: 1px solid #343434;
  }

  .site-header .primary-navigation.is-open a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #343434;
  }
}/* =========================================================
   864BLOCKBOYS — INTERIOR PAGE BODY
   Matches the homepage design.
   Does not target the header or footer.
   ========================================================= */

/* Shared content width and balanced side margins */
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: min(1180px, calc(100% - 2 * clamp(24px, 5vw, 76px)));
  margin-inline: auto;
}

/* Heroes: same scale and clear entry point as the homepage */
main :is(
  .studio-hero,
  .fashion-hero,
  .local-hero,
  .music-hero
) {
  min-height: 0;
  padding: 148px 0 56px;
  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: #f1eee7;
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(64px, 8.5vw, 116px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

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: nowrap;
  gap: 0;
  margin: 0;
  overflow-x: auto;
  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);
}