:root{
    --bg:#16140F;
    --panel:#1E1B14;
    --panel-line:#33301F;
    --brass:#C99A3D;
    --brass-dim:#8a6c2c;
    --signal:#C1502E;
    --magenta:#DD5A9E;
    --teal:#3FBFB0;
    --violet:#584878;
    --ink:#EDE6D6;
    --ink-muted:#9C9484;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-0.01em;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}

  /* NAV */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(22,20,15,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--panel-line);
  }
  header .wrap{padding-left:36px; padding-right:36px;}
  .navbar{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
  .logo{font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.7rem; letter-spacing:-0.02em; display:flex; align-items:center; gap:7px;}
  .logo span.accent{color:var(--brass);}
  .nav-cta{
    background:var(--brass); color:#16140F; padding:9px 18px; border-radius:2px;
    font-weight:600; font-size:0.88rem; text-decoration:none;
  }

  /* HERO */
  .hero{
    padding:76px 0 64px; position:relative; overflow:hidden;
    background:
      linear-gradient(180deg, rgba(22,20,15,0.88) 0%, rgba(22,20,15,0.94) 55%, var(--bg) 100%),
      url('images/hero-studio.jpg');
    background-size:cover; background-position:center 30%;
  }
  .hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(2.1rem, 5vw, 3.4rem); max-width:11ch;}
  .hero p.lead{margin-top:20px; font-size:1.1rem; color:var(--ink-muted); max-width:46ch;}
  .hero-ctas{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--brass); color:#16140F; padding:14px 26px; border-radius:2px;
    font-weight:600; text-decoration:none; display:inline-block; font-size:0.98rem;
    transition:transform .15s ease;
  }
  .btn-primary:hover{transform:translateY(-1px);}
  .btn-ghost{
    border:1px solid var(--panel-line); color:var(--ink); padding:14px 26px; border-radius:2px;
    text-decoration:none; font-size:0.98rem;
  }

  .waveform-box{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:3px;
    padding:20px; position:relative;
  }
  .waveform-box .label-row{display:flex; justify-content:space-between; font-size:0.75rem; color:var(--ink-muted); margin-bottom:14px;}
  svg#wave path{stroke:var(--brass);}
  svg#wave .peak{stroke:var(--signal);}
  .badge-row{display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap;}

  .sample-box audio{
    width:100%; margin-top:16px; accent-color:var(--brass);
  }
  .sample-list{display:flex; flex-direction:column; gap:16px;}

  .client-card{
    display:flex; gap:18px; align-items:center; text-decoration:none; color:var(--ink);
    background:var(--panel); border:1px solid var(--panel-line); border-radius:3px;
    padding:14px; transition:border-color .15s; margin-bottom:28px;
  }
  .client-card:hover{border-color:var(--brass-dim);}
  .client-card-img{
    width:140px; height:100px; border-radius:2px; flex-shrink:0;
    border:1px solid var(--panel-line); position:relative; overflow:hidden;
  }
  .client-card-img img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .client-card-title{font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.05rem;}
  .client-card-desc{color:var(--ink-muted); font-size:0.88rem; margin-top:4px;}
  .client-card-url{font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--brass); margin-top:6px;}
  @media (max-width:480px){
    .client-card{flex-direction:column; align-items:flex-start;}
    .client-card-img{width:100%; height:160px;}
  }
  .vinyl-icon{width:30px; height:30px; flex-shrink:0;}
  .badge{
    font-family:'IBM Plex Mono'; font-size:0.68rem; letter-spacing:0.04em; color:var(--ink-muted);
    border:1px solid var(--panel-line); padding:4px 8px; border-radius:2px;
  }

  /* SECTION SHELL */
  section{padding:70px 0; border-top:1px solid var(--panel-line);}
  .section-head{max-width:56ch; margin-bottom:44px;}
  .section-head h2{font-size:clamp(1.6rem,3vw,2.1rem);}
  .section-head p{color:var(--ink-muted); margin-top:12px;}

  /* HOW IT WORKS */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  @media (max-width:800px){ .steps{grid-template-columns:1fr;} }
  .step{border-left:2px solid var(--brass-dim); padding-left:20px;}
  .step .num{font-family:'IBM Plex Mono'; color:var(--brass); font-size:0.85rem;}
  .step h3{font-size:1.15rem; margin-top:10px;}
  .step p{color:var(--ink-muted); margin-top:8px; font-size:0.95rem;}

  /* HOW IT WORKS LAYOUT */
  .how-grid{display:grid; grid-template-columns:1.3fr 0.7fr; gap:44px; align-items:start;}
  @media (max-width:860px){ .how-grid{grid-template-columns:1fr;} }
  .how-photo{border-radius:3px; overflow:hidden; border:1px solid var(--panel-line); align-self:stretch;}
  .how-photo img{width:100%; height:100%; object-fit:cover; display:block; min-height:280px;}

  /* PACKAGES SECTION TINT */
  .packages-section{
    background:linear-gradient(180deg, var(--bg) 0%, rgba(88,72,120,0.14) 45%, var(--bg) 100%);
  }
  .packages-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; max-width:none;}
  .packages-head > div:first-child{max-width:56ch;}
  .head-photo{width:96px; height:96px; border-radius:3px; overflow:hidden; border:1px solid var(--panel-line); flex-shrink:0;}
  .head-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  @media (max-width:720px){ .packages-head{flex-direction:column; align-items:flex-start;} .head-photo{display:none;} }


  /* PACKAGES */
  .channels{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media (max-width:860px){ .channels{grid-template-columns:1fr;} }
  .channel{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:3px;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .channel .bar{height:6px; background:var(--panel-line);}
  .channel.featured .bar{background:var(--brass);}
  .channel-inner{padding:28px 24px; display:flex; flex-direction:column; flex:1;}
  .channel .tag{font-family:'IBM Plex Mono'; font-size:0.75rem; color:var(--ink-muted);}
  .channel h3{font-size:1.4rem; margin-top:8px;}
  .channel .price{font-family:'Bricolage Grotesque'; font-weight:800; font-size:2.2rem; margin-top:14px;}
  .channel .price sup{font-size:0.9rem; font-weight:500; color:var(--ink-muted);}
  .channel ul{margin-top:20px; list-style:none; flex:1;}
  .channel li{
    font-size:0.92rem; color:var(--ink-muted); padding:9px 0; border-top:1px solid var(--panel-line);
    display:flex; gap:10px;
  }
  .channel li:first-child{border-top:none;}
  .channel li::before{content:"—"; color:var(--brass); flex-shrink:0;}
  .channel .pick{
    margin-top:22px; text-align:center; padding:12px; border-radius:2px; text-decoration:none;
    font-weight:600; font-size:0.92rem; border:1px solid var(--brass); color:var(--ink);
  }
  .channel.featured .pick{background:var(--brass); color:#16140F;}
  .featured-flag{
    position:absolute; top:14px; right:14px; font-family:'IBM Plex Mono'; font-size:0.7rem;
    color:var(--magenta); border:1px solid var(--magenta); padding:3px 8px; border-radius:2px;
  }
  .channel{position:relative;}

  /* RELEASE SECTION */
  .release-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  @media (max-width:860px){ .release-grid{grid-template-columns:1fr;} }
  .playlist-card{
    background:
      linear-gradient(160deg, rgba(30,27,20,0.93) 0%, rgba(30,27,20,0.97) 60%, rgba(30,27,20,0.99) 100%),
      url('images/console-lights.jpg');
    background-size:cover; background-position:center;
    border:1px solid var(--panel-line); border-radius:3px; padding:22px;
  }
  .playlist-card .ph-title{font-family:'IBM Plex Mono'; font-size:0.75rem; color:var(--ink-muted); margin-bottom:16px;}
  .track-row{display:flex; align-items:center; gap:14px; padding:11px 0; border-top:1px solid var(--panel-line);}
  .track-row:first-of-type{border-top:none;}
  .track-row .idx{font-family:'IBM Plex Mono'; color:var(--brass); font-size:0.85rem; width:18px;}
  .track-row .meta{flex:1;}
  .track-row .meta .t{font-size:0.95rem;}
  .track-row .meta .a{font-size:0.8rem; color:var(--ink-muted);}
  .track-row .len{font-family:'IBM Plex Mono'; font-size:0.8rem; color:var(--ink-muted);}
  .release-copy ul{margin-top:20px; list-style:none;}
  .release-copy li{padding:10px 0; border-top:1px solid var(--panel-line); color:var(--ink-muted); font-size:0.95rem;}
  .release-copy li:first-child{border-top:none;}
  .platform-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
  .platform-chip{
    display:flex; align-items:center; gap:9px; border:1px solid var(--teal);
    padding:9px 14px; border-radius:2px; font-size:0.88rem; color:var(--ink);
  }
  .platform-chip svg{width:20px; height:20px; flex-shrink:0;}

  /* CONSISTENT PHOTO TREATMENT */
  .how-photo, .head-photo{ position:relative; }
  .how-photo img, .head-photo img{
    filter:saturate(0.82) contrast(1.05);
  }
  .how-photo::after, .head-photo::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    mix-blend-mode:multiply;
    background:linear-gradient(160deg, rgba(201,154,61,0.12) 0%, rgba(22,20,15,0.5) 100%);
  }

  /* ABOUT */
  .about-grid{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start;}
  @media (max-width:720px){ .about-grid{grid-template-columns:1fr; } }
  .about-photo{border-radius:3px; overflow:hidden; border:1px solid var(--panel-line);}
  .about-photo img{
    width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  }
  .about-grid .section-head p{margin-top:14px;}

  /* FORM */
  .form-shell{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:3px; padding:36px;
  }
  @media (max-width:600px){ .form-shell{padding:24px 18px;} }
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  @media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
  .field{display:flex; flex-direction:column; gap:7px;}
  .field.full{grid-column:1/-1;}
  label{font-size:0.85rem; color:var(--ink-muted);}
  .radio-fieldset{border:none; padding:0; margin:0;}
  .radio-fieldset legend{font-size:0.85rem; color:var(--ink-muted); padding:0; margin-bottom:7px;}
  input, select, textarea{
    background:#16140F; border:1px solid var(--panel-line); color:var(--ink);
    padding:11px 12px; border-radius:2px; font-family:'IBM Plex Sans'; font-size:0.95rem;
  }
  input:focus, select:focus, textarea:focus{outline:2px solid var(--brass); outline-offset:1px;}
  textarea{resize:vertical; min-height:90px;}
  .pkg-choice{display:flex; gap:12px; flex-wrap:wrap;}
  .pkg-choice label{
    border:1px solid var(--panel-line); padding:12px 16px; border-radius:2px; cursor:pointer;
    display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--ink);
  }
  .pkg-choice input{width:auto; padding:0;}
  .submit-row{margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .submit-btn{
    background:var(--brass); color:#16140F; border:none; padding:14px 30px; border-radius:2px;
    font-weight:700; font-size:0.98rem; cursor:pointer; font-family:'IBM Plex Sans';
  }
  .submit-note{font-size:0.82rem; color:var(--ink-muted);}

  footer{
    padding:36px 0; border-top:1px solid var(--panel-line); font-size:0.85rem; color:var(--ink-muted);
    background:linear-gradient(180deg, var(--bg) 0%, rgba(22,20,15,0.85) 100%), url('images/eq-graphic.jpg');
    background-size:cover; background-position:center 70%;
  }
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .footer-grid{align-items:flex-start;}
  .footer-grid > div:first-child{max-width:52ch;}
  footer nav[aria-label="Legal"]{display:flex; gap:16px; flex-wrap:wrap; flex-shrink:0;}
  footer nav[aria-label="Legal"] a{color:var(--ink-muted); text-decoration:underline; font-size:0.85rem;}
  footer nav[aria-label="Legal"] a:hover{color:var(--ink);}

  /* SMALL SCREEN TIGHTENING */
  @media (max-width:480px){
    .wrap{padding:0 18px;}
    .hero{padding:52px 0 40px;}
    .hero h1{font-size:1.85rem; max-width:14ch;}
    .hero p.lead{font-size:1rem;}
    .hero-ctas{flex-direction:column; align-items:stretch;}
    .btn-primary, .btn-ghost{text-align:center;}
    section{padding:48px 0;}
    .section-head{margin-bottom:32px;}
    .waveform-box{padding:16px;}
    .badge-row{gap:6px;}
    .channel-inner{padding:22px 18px;}
    .channel .price{font-size:1.9rem;}
    .playlist-card{padding:18px;}
    .platform-row{gap:8px;}
    .platform-chip{padding:8px 12px; font-size:0.82rem;}
    .form-shell{padding:20px 14px;}
    .pkg-choice{flex-direction:column;}
    .pkg-choice label{width:100%;}
    .submit-btn{width:100%;}
    .submit-row{flex-direction:column; align-items:stretch;}
    .navbar{padding:14px 0;}
    header .wrap{padding-left:22px; padding-right:22px;}
    .logo{font-size:1.35rem;}
    .nav-cta{padding:8px 14px; font-size:0.82rem;}
  }

/* ACCESSIBILITY */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brass); color:#16140F; padding:12px 20px;
  font-weight:600; text-decoration:none; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .pick:focus-visible,
.pkg-choice label:focus-within{
  outline:3px solid var(--teal);
  outline-offset:2px;
}

.nav-right{display:flex; align-items:center; gap:14px;}
.lang-toggle{display:flex; border:1px solid var(--panel-line); border-radius:2px; overflow:hidden; flex-shrink:0;}
.lang-btn{
  background:transparent; border:none; color:var(--ink-muted); font-family:'IBM Plex Mono';
  font-size:0.78rem; padding:7px 11px; cursor:pointer;
}
.lang-btn.is-active{background:var(--brass); color:#16140F; font-weight:600;}
@media (max-width:480px){ .lang-btn{padding:6px 9px; font-size:0.72rem;} }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

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

/* LEGAL PAGES */
.legal-content{ max-width:70ch; }
.legal-content h2{ font-size:1.4rem; margin-top:36px; margin-bottom:12px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ color:var(--ink-muted); font-size:0.98rem; margin-bottom:14px; }
.legal-content ul{ padding-left:20px; margin-bottom:14px; }
.legal-content .updated{ color:var(--ink-muted); font-family:'IBM Plex Mono'; font-size:0.8rem; margin-bottom:32px; }
.legal-content a{ color:var(--brass); text-decoration:underline; }
