:root {
       --gold: #F4C430;
       --gold-dark: #d4a820;
       --gold-light: #fcd96a;
       --ink: #1a1208;
       --ink2: #2a1f08;
       --ink3: #0f0c04;
       --beige: #f5f0e8;
       --warm: #e8d9b0;
       --chalk: rgba(245, 245, 220, 0.88);
       --chalkboard: #1a1e1a;
       --wood: #5a3a1a;
       --silver: linear-gradient(to right, #888, #ccc, #888);
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       background: var(--ink);
       color: var(--beige);
       font-family: 'Cormorant Garamond', serif;
       overflow-x: hidden;
   }

   /* ─── NAVBAR ─────────────────────────────────────────── */
   .navbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       padding: 0;
   }

   .nav-logo-corner {
       position: absolute;
       top: 16px;
       left: 28px;
       display: flex;
       align-items: center;
       gap: 10px;
       z-index: 10;
       text-decoration: none;
   }

   .nav-logo-icon {
       width: 44px;
       height: 44px;
       background: var(--gold);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       box-shadow: 0 2px 16px rgba(244, 196, 48, 0.4);
       transition: transform 0.3s;
   }

   .nav-logo-icon:hover {
       transform: rotate(15deg) scale(1.08);
   }

   .nav-logo-text {
       display: flex;
       flex-direction: column;
       line-height: 1;
   }

   .nav-logo-name {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 18px;
       color: var(--gold);
       letter-spacing: 0.05em;
   }

   .nav-logo-sub {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 9px;
       color: rgba(244, 196, 48, 0.6);
       letter-spacing: 0.2em;
       text-transform: uppercase;
   }

   .nav-menu-wrap {
       display: flex;
       justify-content: center;
       padding: 18px 0 0 0;
       backdrop-filter: blur(0px);
   }

   .nav-menu {
       display: flex;
       align-items: center;
       gap: 6px;
       background: rgba(26, 18, 8, 0.82);
       border: 1px solid rgba(244, 196, 48, 0.18);
       border-radius: 50px;
       padding: 8px 20px;
       backdrop-filter: blur(12px);
       box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
       list-style: none;
   }

   .nav-menu li a {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: var(--warm);
       text-decoration: none;
       padding: 6px 14px;
       border-radius: 30px;
       transition: all 0.25s;
   }

   .nav-menu li a:hover {
       background: var(--gold);
       color: var(--ink);
   }

   .nav-menu .nav-cta a {
       background: var(--gold);
       color: var(--ink);
       font-weight: 700;
   }

   .nav-menu .nav-cta a:hover {
       background: var(--gold-light);
   }

   /* ─── HERO / WRISTBAND ───────────────────────────────── */
   #hero {
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 120px 20px 80px;
       background: radial-gradient(ellipse at 50% 30%, #2a1f08 0%, var(--ink3) 70%);
       position: relative;
       overflow: hidden;
   }

   #hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23F4C430' opacity='0.06'/%3E%3C/svg%3E");
       background-size: 60px 60px;
   }

   .hero-event-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.4em;
       color: rgba(244, 196, 48, 0.5);
       text-transform: uppercase;
       margin-bottom: 32px;
   }

   /* WRISTBAND */
   .wristband {
       width: 90%;
       max-width: 1000px;
       height: 120px;
       border-radius: 60px;
       background: var(--gold);
       position: relative;
       overflow: hidden;
       display: flex;
       align-items: center;
       box-shadow: 0 8px 60px rgba(244, 196, 48, 0.3), 0 2px 0 rgba(255, 255, 255, 0.1) inset;
   }

   .wristband::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image: repeating-linear-gradient(90deg,
               rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px,
               transparent 1px, transparent 8px);
   }

   .wristband::after {
       content: '';
       position: absolute;
       inset: 0;
       background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46'%3E%3Cpolygon points='20,0 40,10 40,36 20,46 0,36 0,10' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E") repeat;
       background-size: 40px 46px;
   }

   .wb-left {
       padding-left: 50px;
       display: flex;
       flex-direction: column;
       gap: 4px;
       flex: 1;
       position: relative;
       z-index: 1;
   }

   .wb-brand {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 44px;
       color: var(--ink);
       line-height: 1;
       letter-spacing: -0.01em;
   }

   .wb-center {
       display: flex;
       align-items: center;
       gap: 20px;
       padding: 0 40px;
       position: relative;
       z-index: 1;
   }

   .wb-divider {
       font-size: 60px;
       color: rgba(26, 18, 8, 0.25);
       font-weight: 100;
       line-height: 1;
   }

   .wb-cert {
       font-family: 'IBM Plex Mono', monospace;
       font-weight: 700;
       font-size: 10px;
       color: var(--ink);
       letter-spacing: 0.2em;
       text-transform: uppercase;
       line-height: 1.6;
   }

   .wb-barcode {
       width: 80px;
       height: 70px;
       position: relative;
       z-index: 1;
       display: flex;
       align-items: center;
       gap: 2px;
       padding-right: 20px;
   }

   .wb-barcode span {
       display: block;
       height: 100%;
       background: var(--ink);
       opacity: 0.35;
       border-radius: 1px;
   }

   .wb-clasp {
       width: 32px;
       height: 48px;
       background: linear-gradient(to right, #888, #ccc, #888);
       border-radius: 8px;
       margin-right: 8px;
       position: relative;
       z-index: 1;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
       flex-shrink: 0;
   }

   /* Below Wristband */
   .hero-content {
       max-width: 800px;
       margin: 60px auto 0;
       text-align: center;
   }

   .hero-event-tag {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       color: var(--gold);
       letter-spacing: 0.2em;
       opacity: 0.7;
       margin-bottom: 8px;
   }

   .hero-name {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 72px;
       color: var(--beige);
       line-height: 1;
       margin-bottom: 12px;
       letter-spacing: -0.01em;
   }

   .hero-tagline {
       font-family: 'Cormorant Garamond', serif;
       font-style: italic;
       font-size: 22px;
       color: var(--gold);
       margin-bottom: 24px;
   }

   .hero-venue {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 11px;
       color: rgba(245, 240, 232, 0.5);
       letter-spacing: 0.12em;
       margin-bottom: 36px;
   }

   .hero-actions {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 16px;
       flex-wrap: wrap;
   }

   .btn-primary {
       background: var(--gold);
       color: var(--ink);
       font-family: 'IBM Plex Mono', monospace;
       font-weight: 700;
       font-size: 11px;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       padding: 14px 32px;
       border: none;
       border-radius: 3px;
       cursor: pointer;
       text-decoration: none;
       transition: all 0.25s;
       display: inline-block;
   }

   .btn-primary:hover {
       background: var(--gold-light);
       transform: translateY(-2px);
       box-shadow: 0 8px 24px rgba(244, 196, 48, 0.4);
   }

   .btn-outline {
       background: transparent;
       color: var(--gold);
       font-family: 'IBM Plex Mono', monospace;
       font-weight: 700;
       font-size: 11px;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       padding: 13px 32px;
       border: 1.5px solid rgba(244, 196, 48, 0.5);
       border-radius: 3px;
       cursor: pointer;
       text-decoration: none;
       transition: all 0.25s;
       display: inline-block;
   }

   .btn-outline:hover {
       border-color: var(--gold);
       background: rgba(244, 196, 48, 0.08);
   }

   /* Program Photo */
   .hero-program {
       margin: 48px auto 0;
       max-width: 200px;
       position: relative;
   }

   .hero-program img,
   .hero-program .photo-mock {
       width: 200px;
       height: 120px;
       object-fit: cover;
       border-radius: 3px;
       border: 4px solid var(--beige);
       display: block;
   }

   .hero-program .photo-mock {
       background: linear-gradient(135deg, #2a1f08 0%, #4a3818 50%, #1a1208 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 32px;
   }

   .hero-program-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 8px;
       letter-spacing: 0.18em;
       color: rgba(245, 240, 232, 0.5);
       text-align: center;
       margin-top: 8px;
       text-transform: uppercase;
   }

   /* ─── ABOUT ──────────────────────────────────────────── */
   #about {
       background: var(--ink2);
       padding: 100px 40px;
       position: relative;
       overflow: hidden;
   }

   #about::before {
       content: '';
       position: absolute;
       top: -2px;
       left: 0;
       right: 0;
       height: 4px;
       background: var(--gold);
   }

   .section-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.4em;
       color: var(--gold);
       text-transform: uppercase;
       margin-bottom: 16px;
       opacity: 0.8;
   }

   .about-grid {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 80px;
       align-items: center;
   }

   .about-left {}

   .about-heading {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 58px;
       line-height: 1;
       color: var(--beige);
       margin-bottom: 28px;
   }

   .about-heading span {
       color: var(--gold);
   }

   .about-body {
       font-family: 'Cormorant Garamond', serif;
       font-size: 19px;
       line-height: 1.8;
       color: rgba(245, 240, 232, 0.75);
       margin-bottom: 24px;
   }

   .about-badge-row {
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
       margin-top: 32px;
   }

   .about-badge {
       background: rgba(244, 196, 48, 0.1);
       border: 1px solid rgba(244, 196, 48, 0.3);
       border-radius: 3px;
       padding: 8px 16px;
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.15em;
       color: var(--gold);
       text-transform: uppercase;
   }

   .about-right {
       position: relative;
   }

   .about-card {
       background: rgba(244, 196, 48, 0.06);
       border: 1px solid rgba(244, 196, 48, 0.15);
       border-radius: 4px;
       padding: 36px;
   }

   .about-stat-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 24px;
       margin-bottom: 28px;
   }

   .about-stat {
       text-align: center;
   }

   .about-stat-num {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 52px;
       color: var(--gold);
       line-height: 1;
   }

   .about-stat-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 9px;
       letter-spacing: 0.2em;
       color: rgba(245, 240, 232, 0.5);
       text-transform: uppercase;
       margin-top: 4px;
   }

   .about-divider {
       height: 1px;
       background: rgba(244, 196, 48, 0.15);
       margin: 24px 0;
   }

   .about-quote {
       font-family: 'Cormorant Garamond', serif;
       font-style: italic;
       font-size: 18px;
       line-height: 1.6;
       color: rgba(245, 240, 232, 0.7);
   }

   .about-quote strong {
       color: var(--gold);
       font-style: normal;
   }

   /* ─── CHALKBOARD SERVICES ────────────────────────────── */
   #services {
       padding: 80px 40px;
       background: var(--ink3);
       position: relative;
   }

   .services-intro {
       text-align: center;
       margin-bottom: 60px;
   }

   .services-intro h2 {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 54px;
       color: var(--beige);
       line-height: 1;
   }

   .services-intro h2 span {
       color: var(--gold);
   }

   .chalkboard {
       max-width: 1100px;
       margin: 0 auto;
       background: #1a1e1a;
       border: 16px solid var(--wood);
       border-radius: 4px;
       box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 20px 60px rgba(0, 0, 0, 0.5);
       padding: 60px 50px;
       position: relative;
       overflow: hidden;
   }

   .chalkboard::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='chalk'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.9' numOctaves='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23chalk)' opacity='0.03'/%3E%3C/svg%3E");
       pointer-events: none;
   }

   .chalk {
       font-family: 'Caveat', cursive;
       color: var(--chalk);
       text-shadow: 0 0 8px rgba(245, 245, 220, 0.15);
   }

   .chalk-title {
       font-family: 'Permanent Marker', cursive;
       font-size: 42px;
       color: rgba(245, 245, 220, 0.9);
       text-shadow: 0 0 12px rgba(245, 245, 220, 0.2);
       text-align: center;
       margin-bottom: 8px;
   }

   .chalk-underline {
       height: 3px;
       background: rgba(245, 245, 220, 0.4);
       width: 300px;
       margin: 0 auto 40px;
       border-radius: 2px;
       position: relative;
   }

   .chalk-underline::before,
   .chalk-underline::after {
       content: '★';
       position: absolute;
       top: -12px;
       color: rgba(245, 245, 220, 0.6);
       font-size: 14px;
   }

   .chalk-underline::before {
       left: -20px;
   }

   .chalk-underline::after {
       right: -20px;
   }

   .chalk-menu-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 40px;
       position: relative;
   }

   .chalk-photos {
       position: absolute;
       right: -20px;
       top: 20px;
       display: flex;
       flex-direction: column;
       gap: 16px;
   }

   .chalk-photo {
       position: relative;
       background: #2a2a20;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 40px;
   }

   .chalk-photo-1 {
       width: 200px;
       height: 150px;
       transform: rotate(1.5deg);
       filter: brightness(0.85) contrast(1.05) saturate(0.9);
   }

   .chalk-photo-2 {
       width: 180px;
       height: 130px;
       transform: rotate(-2deg);
       filter: brightness(0.85) contrast(1.05) saturate(0.9);
   }

   .chalk-tape {
       position: absolute;
       top: -6px;
       width: 30px;
       height: 12px;
       background: rgba(255, 255, 240, 0.65);
       border-radius: 1px;
   }

   .chalk-tape-1 {
       left: 20px;
   }

   .chalk-tape-2 {
       right: 20px;
   }

   .chalk-category {
       font-family: 'Permanent Marker', cursive;
       font-size: 20px;
       color: rgba(245, 245, 220, 0.85);
       text-shadow: 0 0 8px rgba(245, 245, 220, 0.1);
       margin-bottom: 20px;
       padding-bottom: 8px;
       border-bottom: 2px solid rgba(245, 245, 220, 0.2);
   }

   .chalk-item {
       margin-bottom: 22px;
   }

   .chalk-item-row {
       display: flex;
       align-items: baseline;
       gap: 4px;
       margin-bottom: 4px;
   }

   .chalk-item-name {
       font-family: 'Caveat', cursive;
       font-size: 20px;
       color: rgba(245, 245, 220, 0.9);
       text-shadow: 0 0 6px rgba(245, 245, 220, 0.1);
       white-space: nowrap;
   }

   .chalk-dots {
       flex: 1;
       border-bottom: 2px dotted rgba(245, 245, 220, 0.25);
       margin: 0 6px 4px;
   }

   .chalk-price {
       font-family: 'Caveat', cursive;
       font-size: 16px;
       color: var(--gold);
       text-shadow: 0 0 8px rgba(244, 196, 48, 0.3);
       white-space: nowrap;
   }

   .chalk-desc {
       font-family: 'Caveat', cursive;
       font-size: 14px;
       color: rgba(245, 245, 220, 0.55);
       line-height: 1.4;
       padding-left: 6px;
   }

   .chalk-cta-box {
       margin-top: 40px;
       text-align: center;
       border: 2px solid rgba(245, 245, 220, 0.3);
       border-radius: 4px;
       padding: 20px 30px;
       display: inline-block;
       position: relative;
   }

   .chalk-cta-label {
       font-family: 'Permanent Marker', cursive;
       font-size: 13px;
       color: rgba(245, 245, 220, 0.6);
       letter-spacing: 0.1em;
       margin-bottom: 4px;
       text-transform: uppercase;
   }

   .chalk-cta-phone {
       font-family: 'Permanent Marker', cursive;
       font-size: 28px;
       color: var(--gold);
       text-shadow: 0 0 12px rgba(244, 196, 48, 0.3);
   }

   /* ─── CTA SECTION ────────────────────────────────────── */
   #cta {
       background: var(--gold);
       padding: 80px 40px;
       text-align: center;
       position: relative;
       overflow: hidden;
   }

   #cta::before {
       content: '🔑';
       font-size: 300px;
       position: absolute;
       right: -60px;
       top: -60px;
       opacity: 0.06;
       transform: rotate(-20deg);
   }

   .cta-inner {
       position: relative;
       z-index: 1;
   }

   .cta-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.4em;
       color: rgba(26, 18, 8, 0.5);
       text-transform: uppercase;
       margin-bottom: 16px;
   }

   .cta-heading {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 900;
       font-size: 68px;
       color: var(--ink);
       line-height: 1;
       margin-bottom: 20px;
   }

   .cta-sub {
       font-family: 'Cormorant Garamond', serif;
       font-style: italic;
       font-size: 20px;
       color: rgba(26, 18, 8, 0.7);
       margin-bottom: 36px;
   }

   .btn-dark {
       background: var(--ink);
       color: var(--gold);
       font-family: 'IBM Plex Mono', monospace;
       font-weight: 700;
       font-size: 11px;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       padding: 16px 36px;
       border: none;
       border-radius: 3px;
       cursor: pointer;
       text-decoration: none;
       display: inline-block;
       transition: all 0.25s;
       margin: 0 8px;
   }

   .btn-dark:hover {
       background: var(--ink3);
       transform: translateY(-2px);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   }

   /* ─── SERVICE AREAS ──────────────────────────────────── */
   #areas {
       background: var(--ink2);
       padding: 100px 40px;
   }

   .areas-header {
       text-align: center;
       margin-bottom: 60px;
   }

   .section-title {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 54px;
       color: var(--beige);
       line-height: 1;
       margin-bottom: 12px;
   }

   .section-title span {
       color: var(--gold);
   }

   .section-subtitle {
       font-family: 'Cormorant Garamond', serif;
       font-style: italic;
       font-size: 18px;
       color: rgba(245, 240, 232, 0.6);
   }

   .areas-main-city {
       text-align: center;
       margin-bottom: 48px;
   }

   .main-city-badge {
       display: inline-block;
       background: var(--gold);
       color: var(--ink);
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 36px;
       padding: 12px 40px;
       border-radius: 4px;
       letter-spacing: 0.05em;
       box-shadow: 0 4px 24px rgba(244, 196, 48, 0.3);
   }

   .main-city-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 9px;
       letter-spacing: 0.3em;
       color: rgba(245, 240, 232, 0.4);
       text-transform: uppercase;
       margin-top: 10px;
   }

   .areas-grid {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       gap: 12px;
   }

   .area-item {
       background: rgba(244, 196, 48, 0.06);
       border: 1px solid rgba(244, 196, 48, 0.14);
       border-radius: 3px;
       padding: 16px 20px;
       display: flex;
       align-items: center;
       gap: 10px;
       transition: all 0.25s;
       cursor: default;
   }

   .area-item:hover {
       background: rgba(244, 196, 48, 0.12);
       border-color: rgba(244, 196, 48, 0.3);
       transform: translateY(-2px);
   }

   .area-dot {
       width: 6px;
       height: 6px;
       background: var(--gold);
       border-radius: 50%;
       flex-shrink: 0;
   }

   .area-name {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.1em;
       color: var(--beige);
   }

   /* ─── STATS ──────────────────────────────────────────── */
   #stats {
       background: var(--gold);
       padding: 80px 40px;
   }

   .stats-grid {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 2px;
   }

   .stat-block {
       background: var(--ink);
       padding: 48px 32px;
       text-align: center;
       position: relative;
       transition: transform 0.25s;
   }

   .stat-block:hover {
       transform: translateY(-4px);
   }

   .stat-block:first-child {
       border-radius: 3px 0 0 3px;
   }

   .stat-block:last-child {
       border-radius: 0 3px 3px 0;
   }

   .stat-number {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 900;
       font-size: 72px;
       color: var(--gold);
       line-height: 1;
       margin-bottom: 8px;
   }

   .stat-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.2em;
       color: rgba(245, 240, 232, 0.5);
       text-transform: uppercase;
   }

   .stat-desc {
       font-family: 'Cormorant Garamond', serif;
       font-style: italic;
       font-size: 15px;
       color: rgba(245, 240, 232, 0.4);
       margin-top: 8px;
   }

   /* ─── VINYL / ADDITIONAL SERVICES ───────────────────── */
   #additional {
       background: var(--ink3);
       padding: 100px 40px;
       position: relative;
   }

   .record-store-sign {
       display: inline-block;
       background: var(--gold);
       color: var(--ink);
       font-family: 'IBM Plex Mono', monospace;
       font-weight: 700;
       font-size: 12px;
       letter-spacing: 0.4em;
       padding: 12px 24px;
       margin-bottom: 60px;
   }

   .additional-header {
       text-align: center;
       margin-bottom: 16px;
   }

   .vinyl-grid {
       display: grid;
       grid-template-columns: repeat(3, 280px);
       gap: 40px;
       justify-content: center;
       margin: 0 auto;
   }

   .vinyl-row-2 {
       display: flex;
       justify-content: center;
       gap: 40px;
       margin-top: 40px;
   }

   .album-sleeve {
       width: 280px;
       height: 280px;
       position: relative;
       box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.5);
       border-radius: 3px;
       cursor: pointer;
       perspective: 1000px;
   }

   .album-inner {
       width: 100%;
       height: 100%;
       position: relative;
       transition: transform 0.6s;
       transform-style: preserve-3d;
   }

   .album-sleeve.flipped .album-inner {
       transform: rotateY(180deg);
   }

   .album-front,
   .album-back {
       position: absolute;
       width: 100%;
       height: 100%;
       backface-visibility: hidden;
       border-radius: 3px;
       overflow: hidden;
   }

   .album-front {
       background: var(--ink2);
       display: flex;
       align-items: flex-end;
   }

   .album-cover-art {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 80px;
   }

   .album-gradient {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 100px;
       background: linear-gradient(to top, rgba(26, 18, 8, 0.95) 0%, transparent 100%);
   }

   .album-title {
       position: absolute;
       bottom: 16px;
       left: 16px;
       right: 60px;
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 22px;
       color: var(--beige);
       line-height: 1.1;
       z-index: 2;
   }

   .vinyl-peek {
       position: absolute;
       right: -24px;
       top: 50%;
       transform: translateY(-50%);
       width: 80px;
       height: 80px;
       border-radius: 50%;
       background: radial-gradient(circle, #1a1a0a 30%, rgba(128, 128, 0, 0.3) 31%, rgba(128, 128, 0, 0.3) 32%, #1a1a0a 33%, #1a1a0a 60%, rgba(128, 128, 0, 0.2) 61%, #1a1a0a 62%);
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
       z-index: 3;
       transition: transform 0.5s;
   }

   .album-sleeve.flipped .vinyl-peek {
       transform: translateY(-50%) translateX(100%);
   }

   .album-back {
       background: var(--ink2);
       transform: rotateY(180deg);
       padding: 24px;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .album-track {
       display: flex;
       gap: 10px;
       align-items: baseline;
   }

   .track-num {
       font-family: 'IBM Plex Mono', monospace;
       font-weight: 700;
       font-size: 11px;
       color: var(--gold);
       flex-shrink: 0;
   }

   .track-name {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 700;
       font-size: 14px;
       color: var(--beige);
   }

   .album-desc {
       font-family: 'Cormorant Garamond', serif;
       font-size: 13px;
       line-height: 1.5;
       color: rgba(245, 240, 232, 0.6);
       margin-top: 4px;
       flex: 1;
   }

   .album-runtime {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 9px;
       color: rgba(244, 196, 48, 0.5);
       letter-spacing: 0.15em;
       margin-top: auto;
   }

   .album-play {
       background: var(--gold);
       color: var(--ink);
       font-family: 'IBM Plex Mono', monospace;
       font-weight: 700;
       font-size: 10px;
       letter-spacing: 0.2em;
       padding: 8px 16px;
       border: none;
       border-radius: 2px;
       cursor: pointer;
       margin-top: 8px;
       width: 100%;
       text-align: center;
       text-decoration: none;
       display: block;
   }

   /* ─── FAQ ────────────────────────────────────────────── */
   #faq {
       background: var(--ink2);
       padding: 100px 40px;
   }

   .faq-header {
       text-align: center;
       margin-bottom: 60px;
   }

   .faq-grid {
       max-width: 900px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 2px;
   }

   .faq-item {
       background: rgba(244, 196, 48, 0.04);
       border: 1px solid rgba(244, 196, 48, 0.1);
       border-radius: 3px;
       overflow: hidden;
   }

   .faq-question {
       padding: 24px 28px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       cursor: pointer;
       gap: 16px;
       transition: background 0.25s;
   }

   .faq-question:hover {
       background: rgba(244, 196, 48, 0.07);
   }

   .faq-q-text {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 700;
       font-size: 20px;
       color: var(--beige);
       line-height: 1.2;
   }

   .faq-icon {
       width: 28px;
       height: 28px;
       background: rgba(244, 196, 48, 0.15);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       color: var(--gold);
       flex-shrink: 0;
       transition: transform 0.3s, background 0.3s;
   }

   .faq-item.open .faq-icon {
       transform: rotate(45deg);
       background: var(--gold);
       color: var(--ink);
   }

   .faq-answer {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.4s ease;
   }

   .faq-item.open .faq-answer {
       max-height: 300px;
   }

   .faq-a-text {
       padding: 0 28px 24px;
       font-family: 'Cormorant Garamond', serif;
       font-size: 18px;
       line-height: 1.7;
       color: rgba(245, 240, 232, 0.65);
       border-top: 1px solid rgba(244, 196, 48, 0.1);
       padding-top: 20px;
       margin-top: -1px;
   }

   /* ─── COMPREHENSIVE SERVICES ─────────────────────────── */
   #comprehensive {
       background: var(--ink3);
       padding: 100px 40px;
   }

   .comp-header {
       text-align: center;
       margin-bottom: 60px;
   }

   .comp-grid {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
   }

   .comp-card {
       background: rgba(244, 196, 48, 0.04);
       border: 1px solid rgba(244, 196, 48, 0.12);
       border-radius: 4px;
       padding: 32px 28px;
       transition: all 0.3s;
   }

   .comp-card:hover {
       background: rgba(244, 196, 48, 0.08);
       border-color: rgba(244, 196, 48, 0.25);
       transform: translateY(-4px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
   }

   .comp-icon {
       font-size: 36px;
       margin-bottom: 16px;
   }

   .comp-name {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 800;
       font-size: 24px;
       color: var(--gold);
       margin-bottom: 12px;
   }

   .comp-desc {
       font-family: 'Cormorant Garamond', serif;
       font-size: 16px;
       line-height: 1.7;
       color: rgba(245, 240, 232, 0.65);
       margin-bottom: 16px;
   }

   .comp-tag {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 9px;
       font-weight: 700;
       letter-spacing: 0.18em;
       color: var(--gold);
       opacity: 0.6;
       text-transform: uppercase;
   }

   /* ─── CONTACT ────────────────────────────────────────── */
   #contact {
       background: var(--ink2);
       padding: 100px 40px;
   }

   .contact-grid {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: start;
   }

   .contact-left {}

   .contact-info-block {
       margin-bottom: 40px;
   }

   .contact-info-item {
       display: flex;
       align-items: flex-start;
       gap: 16px;
       margin-bottom: 24px;
   }

   .contact-info-icon {
       width: 44px;
       height: 44px;
       background: rgba(244, 196, 48, 0.12);
       border: 1px solid rgba(244, 196, 48, 0.25);
       border-radius: 3px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       flex-shrink: 0;
   }

   .contact-info-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 9px;
       font-weight: 700;
       letter-spacing: 0.2em;
       color: rgba(244, 196, 48, 0.5);
       text-transform: uppercase;
       margin-bottom: 4px;
   }

   .contact-info-value {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 700;
       font-size: 20px;
       color: var(--beige);
   }

   .contact-info-value a {
       color: var(--gold);
       text-decoration: none;
   }

   .contact-info-value a:hover {
       text-decoration: underline;
   }

   .contact-right {}

   .contact-map-box {
       background: rgba(244, 196, 48, 0.04);
       border: 1px solid rgba(244, 196, 48, 0.15);
       border-radius: 4px;
       height: 300px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       gap: 16px;
       margin-bottom: 24px;
       position: relative;
       overflow: hidden;
   }

   .map-bg {
       position: absolute;
       inset: 0;
       background:
           repeating-linear-gradient(0deg, rgba(244, 196, 48, 0.04) 0px, rgba(244, 196, 48, 0.04) 1px, transparent 1px, transparent 40px),
           repeating-linear-gradient(90deg, rgba(244, 196, 48, 0.04) 0px, rgba(244, 196, 48, 0.04) 1px, transparent 1px, transparent 40px);
   }

   .map-pin {
       font-size: 48px;
       position: relative;
       z-index: 1;
       animation: bounce 2s ease-in-out infinite;
   }

   @keyframes bounce {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-10px);
       }
   }

   .map-address {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 11px;
       color: var(--gold);
       letter-spacing: 0.1em;
       text-align: center;
       position: relative;
       z-index: 1;
   }

   .contact-form {
       display: flex;
       flex-direction: column;
       gap: 14px;
   }

   .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 14px;
   }

   .form-input {
       background: rgba(244, 196, 48, 0.05);
       border: 1px solid rgba(244, 196, 48, 0.2);
       border-radius: 3px;
       padding: 14px 16px;
       font-family: 'Cormorant Garamond', serif;
       font-size: 16px;
       color: var(--beige);
       outline: none;
       transition: border-color 0.25s;
       width: 100%;
   }

   .form-input::placeholder {
       color: rgba(245, 240, 232, 0.3);
   }

   .form-input:focus {
       border-color: var(--gold);
       background: rgba(244, 196, 48, 0.08);
   }

   textarea.form-input {
       resize: vertical;
       min-height: 120px;
   }

   /* ─── FOOTER ─────────────────────────────────────────── */
   footer {
       display: grid;
       grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
       grid-template-rows: auto auto;
       gap: 3px;
       background: #0a0806;
   }

   .footer-block {
       padding: 48px 40px;
   }

   .fb-1 {
       background: var(--gold);
       grid-column: 1;
       grid-row: 1;
   }

   .fb-2 {
       background: var(--ink2);
       grid-column: 2;
       grid-row: 1;
   }

   .fb-3 {
       background: #2a1a06;
       grid-column: 3;
       grid-row: 1;
   }

   .fb-4 {
       background: var(--ink3);
       grid-column: 4;
       grid-row: 1;
   }

   .fb-copy {
       background: #0a0806;
       grid-column: 1 / -1;
       grid-row: 2;
       padding: 20px 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-top: 2px solid rgba(244, 196, 48, 0.15);
   }

   .fb-1 .footer-brand {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 900;
       font-size: 48px;
       color: var(--ink);
       line-height: 1;
       margin-bottom: 16px;
   }

   .fb-1 .footer-tagline {
       font-family: 'Cormorant Garamond', serif;
       font-style: italic;
       font-size: 16px;
       color: rgba(26, 18, 8, 0.6);
       margin-bottom: 28px;
   }

   .footer-nav-title {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 9px;
       font-weight: 700;
       letter-spacing: 0.3em;
       color: var(--gold);
       text-transform: uppercase;
       margin-bottom: 20px;
       opacity: 0.7;
   }

   .footer-nav-list {
       list-style: none;
   }

   .footer-nav-list li {
       margin-bottom: 10px;
   }

   .footer-nav-list li a {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 600;
       font-size: 18px;
       color: var(--beige);
       text-decoration: none;
       transition: color 0.2s;
   }

   .footer-nav-list li a:hover {
       color: var(--gold);
   }

   .footer-contact-item {
       margin-bottom: 16px;
   }

   .footer-contact-label {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 8px;
       font-weight: 700;
       letter-spacing: 0.2em;
       color: rgba(244, 196, 48, 0.5);
       text-transform: uppercase;
       margin-bottom: 3px;
   }

   .footer-contact-val {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 600;
       font-size: 16px;
       color: var(--beige);
   }

   .footer-contact-val a {
       color: var(--gold);
       text-decoration: none;
   }

   .footer-social-list {
       list-style: none;
   }

   .footer-social-list li {
       margin-bottom: 12px;
   }

   .footer-social-list li a {
       display: flex;
       align-items: center;
       gap: 10px;
       font-family: 'IBM Plex Mono', monospace;
       font-size: 11px;
       font-weight: 700;
       color: rgba(245, 240, 232, 0.5);
       text-decoration: none;
       transition: color 0.2s;
   }

   .footer-social-list li a:hover {
       color: var(--gold);
   }

   .social-icon {
       width: 30px;
       height: 30px;
       background: rgba(244, 196, 48, 0.1);
       border-radius: 3px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
   }

   .copy-text {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       color: rgba(245, 240, 232, 0.3);
       letter-spacing: 0.1em;
   }

   .copy-right {
       font-family: 'IBM Plex Mono', monospace;
       font-size: 10px;
       color: rgba(244, 196, 48, 0.4);
       letter-spacing: 0.15em;
   }

   /* ─── ANIMATIONS ─────────────────────────────────────── */
   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .fade-up {
       opacity: 0;
       animation: fadeUp 0.8s ease forwards;
   }

   .delay-1 {
       animation-delay: 0.15s;
   }

   .delay-2 {
       animation-delay: 0.3s;
   }

   .delay-3 {
       animation-delay: 0.45s;
   }

   .delay-4 {
       animation-delay: 0.6s;
   }

   /* ─── SCROLL REVEAL ──────────────────────────────────── */
   .reveal {
       opacity: 0;
       transform: translateY(24px);
       transition: opacity 0.7s ease, transform 0.7s ease;
   }

   .reveal.visible {
       opacity: 1;
       transform: translateY(0);
   }

   @media (max-width: 900px) {

       .about-grid,
       .contact-grid {
           grid-template-columns: 1fr;
           gap: 40px;
       }

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

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

       .vinyl-grid {
           grid-template-columns: repeat(2, 280px);
       }

       .wb-brand {
           font-size: 28px;
       }

       footer {
           grid-template-columns: 1fr 1fr;
       }

       .fb-1 {
           grid-column: 1 / -1;
       }

       .hero-name {
           font-size: 52px;
       }
   }

   @media (max-width: 620px) {

       .vinyl-grid,
       .vinyl-row-2 {
           grid-template-columns: 280px;
       }

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

       footer {
           grid-template-columns: 1fr;
       }

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