:root{color-scheme:light;--ink:#101010;--muted:#555;--line:#dedede}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink)}
a{color:inherit}.site-header{background:#fff;text-align:center;padding:31px 20px 0}
.brand{display:block;font:700 42px/1.2 'Inter Display','Inter',Arial,sans-serif;letter-spacing:3.5px;white-space:nowrap;margin:0}.brand img{display:block;width:204.846px;height:50.4px;max-width:100%;margin:0 auto}
.menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 39px;padding:25px 10px 26px}
.menu a{color:#151515;text-decoration:none;font:700 17px/1.5 'Arimo',Arial,sans-serif;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current='page']{border-color:currentColor;outline-offset:5px}
.hero{position:relative;width:100%;margin:0;line-height:0}.hero img{display:block;width:100%;height:auto;object-fit:contain}
.hero-label{position:absolute;left:9.2%;top:48%;transform:translateY(-50%);font:400 25px 'Prompt',Arial,sans-serif;letter-spacing:-.25px;line-height:normal;white-space:nowrap}
.text-page{max-width:850px;padding:70px 35px 100px;margin:auto;text-align:center}
.text-page.wide{max-width:1130px}.text-page h2{font:700 30px/1.3 'Arimo',Arial,sans-serif;letter-spacing:2px;text-align:center;margin:0 0 42px}
.text-page p,.intro p{font:400 18px/1.7 'Prompt',Arial,sans-serif;letter-spacing:-.25px;text-align:center;margin:0 0 27px}
.intro{max-width:880px;margin:0 auto 40px}.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;text-align:left}
.player{min-width:0;background:#f6f6f5;border:1px solid #e4e4e1;padding:24px 25px 20px;text-align:left}
.player .genre{font:700 14px/1.4 'Arimo',Arial,sans-serif;text-transform:uppercase;letter-spacing:1.4px}
.player .song{font:400 18px/1.45 'Prompt',Arial,sans-serif;letter-spacing:-.25px;margin:8px 0 13px;min-height:28px}
.player .wave-wrap{position:relative;width:100%;height:53px;cursor:pointer;touch-action:pan-y;outline-offset:3px}.player canvas{width:100%;height:53px;display:block}
.player .controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.player .play{width:43px;height:43px;flex:0 0 43px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#191919;color:#fff;cursor:pointer;font-size:0;line-height:1}
.player .play:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.player .time{font:400 13px/1.3 'Prompt',Arial,sans-serif;color:#555;letter-spacing:0;font-variant-numeric:tabular-nums}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:65px}
.three .item{border-top:1px solid var(--ink);padding:20px 5px 25px;min-height:160px;text-align:center}
.three h3{font:700 18px/1.45 'Arimo',Arial,sans-serif;letter-spacing:1px;margin:0 0 17px}
.three p{font:400 16px/1.5 'Prompt',Arial,sans-serif;letter-spacing:-.25px;margin:0}
.subsection{padding-top:15px;margin-top:30px;margin-bottom:25px;border-top:1px solid var(--line)}
.subsection h3{font:700 20px/1.5 'Arimo',Arial,sans-serif;letter-spacing:1.5px;margin:30px 0 18px}
.form{max-width:700px;text-align:left;margin:35px auto 0}.form label{display:block;font:700 15px 'Arimo',Arial,sans-serif;letter-spacing:1.1px;margin:20px 0 8px}
.form input,.form select,.form textarea{width:100%;border:1px solid #aaa;background:#fff;color:var(--ink);padding:13px 15px;border-radius:0;font:400 18px 'Prompt',Arial,sans-serif;letter-spacing:-.25px;outline-offset:3px}
.form textarea{resize:vertical;min-height:150px}.form button{border:1px solid #111;background:#111;color:#fff;font:700 16px 'Arimo',Arial,sans-serif;letter-spacing:1.3px;padding:14px 30px;margin-top:22px;cursor:pointer}
.form .status{font:400 15px 'Prompt',Arial,sans-serif;color:#555;margin:18px 0 0;text-align:left}
@media(max-width:820px){.players{grid-template-columns:1fr}.three{grid-template-columns:1fr;gap:15px}.three .item{min-height:0}}
@media(max-width:720px){.site-header{padding:23px 12px 0}.brand{font-size:42px;letter-spacing:3.5px}.menu{gap:8px 18px;padding:18px 4px 21px}.menu a{font-size:14px;letter-spacing:.65px}.hero-label{left:4.5%;top:47%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:23px;white-space:normal}.hero-label .separator{display:none}.text-page{padding:48px 24px 70px}.text-page h2{margin-bottom:34px}}
@media(max-width:380px){.menu{column-gap:13px}.menu a{font-size:12px}.hero-label{font-size:21px}.player{padding:20px 17px}}

/* Layout correction 2026-10-25: three meaningful demo groups for Modern Chamber; Metal separate. */
.modern-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:left;align-items:start}
.demo-group{min-width:0}
.demo-group h3{font:700 16px/1.5 'Arimo',Arial,sans-serif;letter-spacing:.65px;min-height:48px;margin:0 0 15px;text-align:center}
.group-players{display:flex;flex-direction:column;gap:22px}
.group-players .player{padding:20px 17px 17px}
.players.metal-players{grid-template-columns:repeat(3,minmax(0,1fr))}
.band-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:65px}
.band-areas .item{border-top:1px solid var(--ink);padding:20px 5px 25px;text-align:center}
.band-areas h3{font:700 18px/1.45 'Arimo',Arial,sans-serif;letter-spacing:1px;margin:0 0 17px}
.band-areas p{font:400 16px/1.5 'Prompt',Arial,sans-serif;letter-spacing:-.25px;margin:0}
@media(max-width:820px){.modern-groups,.players.metal-players,.band-areas{grid-template-columns:1fr}.demo-group h3{min-height:0}.modern-groups{gap:35px}}

/* Confirmed site structure, 25 October 2026 */
.modern-groups{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.demo-group .group-description{font:400 16px/1.55 'Prompt',Arial,sans-serif;letter-spacing:-.25px;text-align:center;margin:0 0 22px;min-height:120px;color:#343434}
.works-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px;margin:30px auto 0}
.works-entry{border-top:1px solid var(--ink);padding:26px 12px;text-align:center}
.works-entry a{text-decoration:none}
.works-entry h3{font:700 30px/1.3 'Arimo',Arial,sans-serif;letter-spacing:2px;margin:0 0 18px}
.works-entry a:hover h3,.works-entry a:focus-visible h3{text-decoration:underline;text-underline-offset:5px}
.works-band-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px;align-items:start}
.band-column{min-width:0;border-top:1px solid var(--ink);padding:22px 2px 25px;text-align:center}
.band-column h3{font:700 19px/1.5 'Arimo',Arial,sans-serif;letter-spacing:1px;margin:0 0 18px}
.band-column p.band-summary{font:400 16px/1.6 'Prompt',Arial,sans-serif;letter-spacing:-.25px;margin:0 0 16px}
.band-players{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.band-players .player{padding:20px 17px 17px}
@media(max-width:900px){.demo-group .group-description{min-height:0}}
@media(max-width:820px){.works-overview,.works-band-columns{grid-template-columns:1fr}.modern-groups{grid-template-columns:1fr}.band-column{margin-bottom:12px}}

/* Modern Chamber: one additional line of breathing room before the demo groups. */
.modern-chamber-page .intro{margin-bottom:76px}
/* Align the first audio players on both orchestration columns, irrespective of paragraph length. */
@media (min-width:821px){
 .works-band-columns{grid-template-rows:auto auto auto;align-items:stretch}
 .works-band-columns>.band-column{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
 .works-band-columns .band-description{min-width:0}
}
@media (max-width:820px){.works-band-columns .band-description{min-height:0}}


/* 2026-10-26: typographic hierarchy agreed with client. */
/* All section titles exactly match the 30px primary page headings. */
.modern-groups .demo-group h3,
.works-band-columns .band-column h3 {
  font-family: 'Arimo', Arial, sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 2px;
}
/* Matching height for the three long chapter titles keeps their introductions and players aligned. */
@media (min-width: 821px) {
  .modern-groups .demo-group h3 {min-height: 165px;}
}
@media (max-width: 820px) {
  .modern-groups .demo-group h3 {min-height: 0;}
}
/* A line of space between the horizontal separator and section heading on Works. */
.works-overview .works-entry {padding-top: 47px; padding-bottom: 30px;}
.works-overview .works-entry-link {
  display:flex; flex-direction:column; align-items:center;
  min-height:202px; color:inherit; text-decoration:none;
}
.works-overview .works-entry-link h3 {color:inherit;}
.works-overview .works-entry-link p {color:#222;}
.works-overview .works-cta {
  display:inline-block;
  margin-top:auto;
  padding-top:28px;
  border-bottom:1px solid #1a1a1a;
  font:700 13px/1.5 'Arimo',Arial,sans-serif;
  letter-spacing:1.35px;
  color:#171717;
}
.works-overview .works-entry-link:is(:hover,:focus-visible) .works-cta {border-bottom-width:2px;}
.works-overview .works-entry-link:focus-visible {outline:2px solid #161616;outline-offset:8px;}
@media (max-width: 820px) {
  .works-overview .works-entry-link {min-height:unset;}
  .works-overview .works-cta {margin-top:5px;}
}


/* 26 Oct 2026 — spacing adjustments only */

/* Modern Chamber: less space below the menu and more compact text lines. */
.modern-chamber-page { padding-top: 42px; }
.modern-chamber-page > h2 { margin-bottom: 28px; }
.modern-chamber-page .intro { margin-bottom: 26px; }
.modern-chamber-page .intro p {
  line-height: 1.30;
  margin: 0; /* no blank lines between intro paragraphs */
}
.modern-chamber-page .intro p:last-child { margin-bottom: 0; }

/* Orchestration: one extra line between column dividers and headings. */
.works-band-columns .band-column { padding-top: 46px; }

@media (max-width: 720px) {
  .modern-chamber-page { padding-top: 31px; }
}

/* Shorten unused vertical space above the demo players while preserving column alignment. */
@media (min-width:821px) {
  .modern-chamber-page .modern-groups .demo-group h3 {min-height:120px;}
  .modern-chamber-page .modern-groups .group-description {min-height:96px;}
}


/* Fine aesthetic adjustments after comparing Modern Chamber and Orchestration,
   26 October 2026. Do not alter other pages. */

/* Modern Chamber: subtly separate paragraphs without inserting blank lines;
   reserve less vertical space before the first row of demo players. */
.modern-chamber-page .intro p:not(:last-child) { margin-bottom: 6px; }
.modern-chamber-page .intro { margin-bottom: 14px; }
.modern-chamber-page > h2 { margin-bottom: 24px; }
@media (min-width: 821px) {
  .modern-chamber-page .modern-groups .demo-group h3 {
    min-height: 117px;
    margin-bottom: 12px;
  }
  .modern-chamber-page .modern-groups .group-description {
    min-height: 75px;
    margin-bottom: 16px;
  }
}

/* Orchestration: bring the main heading closer to the shared page rhythm
   and avoid inherited 46px row gaps in the subgrid. Keep the dividers and
   their requested breathing room intact, and both player rows aligned. */
.orchestration-page { padding-top: 56px; }
@media (min-width: 821px) {
  .orchestration-page .works-band-columns > .band-column {
    row-gap: 10px;
  }
}
@media (max-width: 720px) {
  .orchestration-page { padding-top: 48px; }
}


/* SEO launch structure: preserve the approved visual language. */
.text-page > h1.page-title, .text-page .text-page > h1.page-title {font:700 30px/1.3 'Arimo',Arial,sans-serif;letter-spacing:2px;text-align:center;margin:0 0 42px}
@media(max-width:720px){.text-page > h1.page-title{margin-bottom:34px}}
.modern-groups .demo-group h2,
.works-band-columns .band-column h2 {
  font:700 30px/1.3 'Arimo',Arial,sans-serif;letter-spacing:2px;
  text-align:center;margin:0 0 12px;
}
@media(min-width:821px){.modern-chamber-page .modern-groups .demo-group h2{min-height:117px;}}
@media(max-width:820px){.modern-chamber-page .modern-groups .demo-group h2{min-height:0;}}
.works-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.works-entry h2{font:700 30px/1.3 'Arimo',Arial,sans-serif;letter-spacing:2px;margin:0 0 18px}
.works-entry a:hover h2,.works-entry a:focus-visible h2{text-decoration:underline;text-underline-offset:5px}
.works-overview .works-entry-link p{font-size:16px;line-height:1.55}
.home-services{display:flex;align-items:center;justify-content:center;gap:45px;flex-wrap:wrap;padding:24px 20px 30px}
.home-services a{font:700 14px/1.45 'Arimo',Arial,sans-serif;letter-spacing:1.5px;text-decoration:none;border-bottom:1px solid #222;padding-bottom:5px}
.home-services a:hover,.home-services a:focus-visible{border-bottom-width:2px}
.hero-label{margin:0}
.inline-links{margin-top:18px!important;font-size:16px!important}
.service-action{padding-top:38px;text-align:center}
.service-action a{font:700 13px/1.5 'Arimo',Arial,sans-serif;letter-spacing:1.4px;text-decoration:none;border-bottom:1px solid var(--ink);padding:0 0 5px}
.orchestration-page .page-title{margin-bottom:25px}
.orchestration-intro,.horror-intro{max-width:950px;margin:0 auto 30px}
.orchestration-intro p,.horror-intro p{font:400 17px/1.55 'Prompt',Arial,sans-serif;letter-spacing:-.25px;margin:0;text-align:center}
.orchestration-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin:18px auto 34px}
.orchestration-categories section{border-top:1px solid var(--ink);padding:25px 6px 0}
.orchestration-categories h2{font:700 21px/1.3 'Arimo',Arial,sans-serif;letter-spacing:1.2px;margin:0 0 12px}
.orchestration-categories p,.metal-showcase>p{font:400 16px/1.5 'Prompt',Arial,sans-serif;color:#343434;letter-spacing:-.25px;margin:0}
.metal-showcase{border-top:1px solid var(--ink);padding-top:28px;margin:0 auto}
.metal-showcase h2{font:700 30px/1.3 'Arimo',Arial,sans-serif;letter-spacing:2px;margin:0 0 16px}
.metal-showcase>p{max-width:930px;margin:0 auto 24px}
.metal-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.metal-player-grid .player{padding:20px 17px 17px}
.horror-page{padding-top:56px}
.horror-page .page-title{margin-bottom:23px}
.horror-columns{align-items:start}
.horror-columns .band-column{grid-template-rows:none!important;grid-row:auto!important;display:flex!important;flex-direction:column;gap:0!important;padding-top:34px}
.horror-columns .band-description{min-height:122px;margin-top:8px}
.horror-columns .band-players{margin-top:12px}
.horror-note{font:400 13px/1.6 'Prompt',Arial,sans-serif;color:#555;margin:24px auto 0!important;max-width:800px}
.contact-address{font-size:16px!important;margin:28px auto 0!important}
@media(max-width:820px){.works-overview{grid-template-columns:1fr}.metal-player-grid,.orchestration-categories{grid-template-columns:1fr}.horror-columns .band-description{min-height:0}}
@media(max-width:720px){.home-services{gap:20px;padding:22px 12px 25px}.home-services a{font-size:12px;letter-spacing:1px}.horror-page{padding-top:48px}}

/* Keep Works card headings/descriptions aligned when one title wraps. */
@media(min-width:821px){.works-overview .works-entry-link h2{min-height:80px}}


/* User-approved 27 Oct refinements — headings, order, spaces, card CTAs. */
/* Works: equal-height cards; all three EXPLORE WORKS calls sit on one baseline. */
@media (min-width:821px) {
  .works-overview { align-items:stretch; }
  .works-overview .works-entry { display:flex; min-width:0; }
  .works-overview .works-entry-link {
    width:100%; min-height:262px; height:100%;
    display:grid; grid-template-rows:80px minmax(0,1fr) auto;
    align-items:start; justify-items:center;
  }
  .works-overview .works-entry-link h2 {min-height:80px; margin-bottom:0;}
  .works-overview .works-entry-link p {margin:0; padding:0 4px;}
  .works-overview .works-entry-link .works-cta {margin-top:0; padding-top:28px; align-self:end;}
}
/* Modern Chamber: one extra line of breathing room only AFTER 'expressive possibilities.' */
.modern-chamber-page .intro {margin-bottom:42px;}
/* Orchestration: put Metal and its six demos first; Pop and Rock are later services. */
.orchestration-page .metal-showcase {margin-top:22px;}
.orchestration-page .orchestration-categories {margin:48px auto 8px;}
@media (max-width:820px){
  .works-overview .works-entry-link {height:auto;}
  .modern-chamber-page .intro {margin-bottom:42px;}
}

/* Works: fit MODERN CHAMBER on one line without changing other headings. */
.works-overview .works-entry:first-child h2 {letter-spacing:0.8px;}

/* On narrower laptop widths, stack Works cards instead of wrapping or clipping titles. */
@media (min-width:821px) and (max-width:1120px) {
  .works-overview {grid-template-columns:1fr;max-width:680px;}
  .works-overview .works-entry-link {display:flex;flex-direction:column;min-height:0;height:auto;}
  .works-overview .works-entry-link h2 {min-height:0;margin-bottom:18px;}
  .works-overview .works-entry-link .works-cta {padding-top:28px;}
}

/* SEO editorial copy: minimal additions without modifying approved layouts. */
.service-brief{max-width:800px;margin:34px auto 0!important;font:400 15px/1.6 'Prompt',Arial,sans-serif!important;color:#343434;letter-spacing:-.25px;text-align:center}
.service-brief+.service-action{padding-top:18px}
.home-seo-intro{max-width:880px;padding:0 24px 28px;margin:0 auto;font:400 14px/1.65 'Prompt',Arial,sans-serif;color:#444;letter-spacing:-.25px;text-align:center}

/* Font-independent play triangle; optical center aligned with round button. */
.player .play:not(.is-playing)::before{content:"";display:block;width:14px;height:16px;flex:0 0 14px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transform:translateX(2px)}
/* Compact, rounded pause bars: avoid font-dependent Roman-numeral glyph. */
.player .play.is-playing{display:flex;align-items:center;justify-content:center;gap:5px}
.player .play.is-playing::before,.player .play.is-playing::after{content:"";display:block;width:5px;height:15px;background:currentColor;border-radius:2px;flex:0 0 5px}