/* SUPASOUND / TYPE SYSTEM
   The Services spread sets the rules: restrained grotesk, open body copy,
   and one monospaced scale for indexes, measurements and production data. */
:root{
  --type-display:clamp(2.75rem,7vw,7rem);
  --type-intro:clamp(2.125rem,3.2vw,3.25rem);
  --type-title:clamp(1.375rem,1.8vw,1.75rem);
  --type-body:1rem;
  --type-ui:.875rem;
  --type-meta:.75rem;
  --type-micro:.6875rem;
  --weight-display:400;
  --weight-emphasis:500;
  --tracking-display:-.055em;
  --tracking-text:-.015em;
  --tracking-meta:.025em;
}
body{font-family:var(--sans);font-size:var(--type-body);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
h1,h2,h3,p{font-weight:400}

/* Display: the same weight, spacing and line rhythm in every section. */
.services-side-intro p,.cases-heading h2,.about-copy h2,.contact-heading h2,.modal h2,.service-display-title{
  font-family:var(--sans);font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display);line-height:.98;
}
.services-side-intro p{font-size:var(--type-intro)}
.cases-heading h2,.about-copy h2,.contact-heading h2{font-size:var(--type-display)}
.service-display-title{font-size:clamp(2.6875rem,5.7vw,7rem);line-height:.94}
.service-display-title.is-long{font-size:clamp(2.125rem,4.45vw,5.375rem)}
.modal h2{font-size:clamp(2.125rem,4vw,3.25rem)}
.case-caption h3{font:var(--weight-display) var(--type-title)/1.1 var(--sans);letter-spacing:var(--tracking-display)}

/* Reading copy: no breakpoint quietly reduces paragraphs to label size. */
.hero-intro p,.cases-heading>p,.about-description p,.service-story p,.modal>p{
  font:400 var(--type-body)/1.5 var(--sans);letter-spacing:var(--tracking-text);
}
.hero-intro p{max-width:40ch;justify-self:start}
.cases-heading>p{max-width:30ch}
.about-description>div{max-width:36ch}
.instrument-lead p{font:400 var(--type-ui)/1.4 var(--sans);letter-spacing:var(--tracking-text)}
.case-caption p{font:400 var(--type-ui)/1.45 var(--sans);letter-spacing:var(--tracking-text);max-width:28ch}

/* UI: the Services index is the reference for all navigation and actions. */
.desktop-nav a,.service-tabs button,.listen-button,.case-play,.cases-footnote a,.text-link,
.project-button,.service-story a,.instagram-link,.site-footer>a:last-child,.hero-bottom a,
.contact-modal label,.instrument-footer button,.knob-label,.patch-port-name,.mix-heading label{
  font-family:var(--sans);font-size:var(--type-ui);font-weight:400;line-height:1.3;letter-spacing:var(--tracking-text);
}
.service-tabs button[aria-selected=true]{font-weight:var(--weight-emphasis)}
.mobile-nav a{font:400 var(--type-title)/1.2 var(--sans);letter-spacing:var(--tracking-display)}
.project-button{font-weight:var(--weight-emphasis)}
.contact-email{font:400 clamp(1rem,1.6vw,1.375rem)/1.4 var(--sans);letter-spacing:var(--tracking-text)}
.contact-modal input,.contact-modal textarea,.contact-modal select{font:400 var(--type-body)/1.5 var(--sans);letter-spacing:var(--tracking-text)}
.modal dl>div{font:400 var(--type-ui)/1.5 var(--sans);letter-spacing:var(--tracking-text)}
.modal dt{font-weight:var(--weight-emphasis)}

/* One technical voice, with a consistent size and numerical alignment. */
.micro,.brand span,.hero-stamp,.section-kicker,.section-kicker>span:nth-child(2),
.services-side-header h2,.services-side-footer,.service-photo-top,.service-disciplines,
.service-story-top,.case-topline,.cases-footnote,.brand-poster figcaption,.about-bottom,.site-footer,
.led-bezel-header,.led-bezel-footer,.control-hint,.instrument-title,.scope-top,.scope-bottom,
.instrument-footer,.patch-heading,.patch-heading h2,.patch-instruction,.patch-reset span,
.patch-bank-label,.patch-port-code,.patch-rack-mark,.patch-bottom,.patch-bottom>span:last-child,
.form-note,.toast,.modal>p.micro,.hero-bottom>span{
  font-family:var(--mono);font-size:var(--type-micro);font-weight:400;line-height:1.45;
  letter-spacing:var(--tracking-meta);font-variant-numeric:tabular-nums;
}
.section-kicker,.section-kicker>span:nth-child(2),.services-side-header h2{font-size:var(--type-meta)}
.knob-label>span:first-child,.service-tabs button>span:first-child,.desktop-nav sup{
  font:400 var(--type-micro)/1.2 var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums;
}
.knob-value,.mix-heading output,.preset-row>button:not(.reset-button),#preset-label,
.power-copy [data-sound-label]{font:400 var(--type-meta)/1.3 var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums}
.knob-value{font-size:var(--type-ui)}
.knob-mapping,.mix-endpoints small,.power-copy>span:first-child{font:400 var(--type-micro)/1.3 var(--sans);letter-spacing:var(--tracking-text)}
.power-copy [data-sound-label]{font-size:var(--type-ui)}
.power-copy>span:first-child{letter-spacing:var(--tracking-meta)}
.mix-endpoints{font:400 1.25rem/1.1 var(--sans)}
.patch-heading h2{font-size:var(--type-meta)}
.patch-port-name{font-size:var(--type-meta);font-weight:var(--weight-emphasis)}

/* Oversized numerals are artwork, distinct from reading text. */
.case-art-title,.service-big-number{font-family:var(--sans);font-weight:400;line-height:.85;letter-spacing:-.075em;font-variant-numeric:lining-nums}
.case-art-title{font-size:clamp(5.625rem,11vw,11.25rem)}
.service-big-number{font-size:clamp(9.375rem,18vw,19.375rem)}
.service-photo-bottom>span:last-child{font:400 var(--type-micro)/1.3 var(--mono);letter-spacing:var(--tracking-meta)}

/* Symbols keep their intended graphic proportions. */
.mini-mark{font:400 1.0625rem/1.1 var(--sans);letter-spacing:var(--tracking-display)}

.section-kicker>span:last-child,.cases-heading h2>span,.case-caption>span,.text-link span,
.project-button>span,.service-tab-arrow{font:400 1.5rem/1 var(--sans);letter-spacing:0}
.cases-heading h2>span{vertical-align:top;margin-top:.15em}
.preset-row .reset-button,.patch-reset{font:400 1.375rem/1 var(--sans)}
.instrument-footer button span{font:400 1.125rem/1 var(--sans)}
.service-orbit{font:400 2.375rem/1 var(--sans)}
.service-story a span,.hero-bottom a span,.brand-poster figcaption>span:last-child{font:400 1.25rem/1 var(--sans)}
.modal-close{font:400 1.875rem/1 var(--sans)}

/* Give the new readable type space instead of shrinking it per component. */
.hero-intro{grid-template-columns:minmax(0,1fr) auto;gap:28px;padding-block:36px 30px}
.cases-heading{gap:36px}
.about-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.about-copy h2>span{white-space:normal}
.about-description{grid-template-columns:1fr 3fr;gap:24px}
.contact-heading{gap:24px}
.contact-heading h2{min-width:0}
.knob-label{gap:8px;flex-wrap:wrap;justify-content:flex-start}
.knob-label>span:last-child{margin-left:auto}
.knob-mapping{text-align:center}
.mix-heading{flex-wrap:wrap;row-gap:8px}
.mix-endpoints span{gap:5px}
.preset-row{flex-wrap:wrap;row-gap:8px}
.scope-bottom{flex-wrap:wrap;row-gap:3px}
.patch-heading{flex-wrap:wrap}
.patch-bottom{flex-wrap:wrap;min-height:38px}
.patch-port-name{white-space:normal;min-height:31px;display:flex;align-items:end;justify-content:center;text-align:center}
.patch-rack{min-height:207px}
.patch-port-code{min-height:16px}
.led-bezel-footer{color:#ff8d90a8}
.led-display .led-bezel-header{gap:12px}
.instrument-footer{gap:16px;flex-wrap:wrap;padding-block:12px}
.service-photo-top{gap:16px}
.service-story{min-height:325px}
.service-story p{max-width:32ch}
.service-story a{gap:12px}
.service-photo-bottom>span:last-child{max-width:80px}
.case-topline{gap:12px;flex-wrap:wrap;line-height:1.3}
.brand-poster figcaption{gap:8px;line-height:1.3}
.site-footer{gap:22px;flex-wrap:wrap}
.contact-bar{flex-wrap:wrap}
.sound-switch{min-width:126px}

@media(min-width:1700px){
  .service-display-title{font-size:7rem}.service-display-title.is-long{font-size:5.375rem}
}
@media(max-width:1150px){
  .hero-intro{grid-template-columns:1fr}.hero-stamp{display:none}
  .service-display-title{font-size:5.8vw}.service-display-title.is-long{font-size:4.5vw}
  .service-story{min-height:360px}
  .service-photo-top>span:last-child{max-width:11ch;text-align:right}
  .service-disciplines{margin-top:35px}
  .instrument{grid-template-columns:1fr 2.6fr}
  .mix-panel{grid-column:1/-1;grid-row:auto;border-left:0;border-top:1px solid var(--line)}
  .scope-panel{display:none}
  .preset-row{flex-wrap:nowrap}
  .mix-heading{flex-wrap:nowrap}
  .instrument-footer>span:nth-child(2){display:none}
  .about-description{grid-template-columns:1fr}
  .about-description>.micro{display:none}
  .cases-heading{align-items:start}
  .cases-heading>p{max-width:26ch}
}
@media(max-width:800px){
  :root{--type-intro:2.6875rem;--type-display:clamp(2.75rem,7.8vw,4.5rem)}
  .hero-intro{gap:30px}.hero-intro p{max-width:40ch}
  .service-display-title{font-size:8.6vw}.service-display-title.is-long{font-size:6.8vw}
  .services-side-intro p{font-size:var(--type-intro)}
  .service-story{min-height:325px}
  .service-big-number{font-size:28vw}
  .service-photo-top>span:last-child{max-width:none}
  .service-disciplines{margin-top:45px}
  .cases-heading>p{max-width:35ch;margin-top:24px}
  .case-grid{grid-template-columns:1fr;gap:34px}.case-pulso{margin-top:0}
  .case-topline>span{display:block}
  .about-layout{grid-template-columns:1fr;gap:40px}
  .about-description>div{max-width:45ch}.about-description{margin-top:32px}
  .brand-poster{max-width:330px;justify-self:center}
  .contact-heading h2{font-size:var(--type-display)}
  .site-footer>span:nth-child(3){display:none}
  .instrument-title{flex-wrap:wrap}
}
@media(max-width:600px){
  :root{--type-intro:2.375rem;--type-display:clamp(2.125rem,10.4vw,3.5rem)}
  .brand span{display:none}.site-header{gap:18px}
  .desktop-nav{display:none}.header-actions{margin-left:auto}
  .hero-intro{grid-template-columns:1fr;gap:22px;padding-block:30px}
  .hero-intro p{max-width:32ch;justify-self:start}
  .services-side-intro p{font-size:var(--type-intro)}

  .hero-bottom{align-items:start;gap:18px;padding-block:25px}
  .hero-bottom>span{max-width:16ch}.hero-bottom a{gap:14px;max-width:13ch}
  .instrument-lead{grid-template-columns:1fr;gap:10px;padding:18px}
  .instrument-title{grid-column:1/-1;flex-wrap:nowrap;gap:12px}
  .instrument-lead p{grid-column:1/-1;grid-row:auto;font-size:var(--type-body)}
  .listen-button{grid-column:1/-1;grid-row:auto;justify-self:start;margin-top:3px}
  .control-hint{grid-column:1/-1;grid-row:auto;justify-self:start;padding-top:5px}
  .knob-unit{padding-inline:8px}.knob-control{max-width:100%;margin-inline:0}
  .knob-label{display:flex;flex-direction:column;align-items:center;gap:5px}
  .knob-label>span:last-child{margin-left:0}.knob-label{font-size:.8125rem}
  .knob-mapping{font-size:var(--type-micro)}
  .instrument-footer{display:grid;grid-template-columns:1fr;gap:10px}
  .instrument-footer button{justify-self:start}
  .patch-heading{gap:10px}.patch-bank{width:48%}.patch-bank-label{font-size:var(--type-micro)}
  .patch-port-name{font-size:var(--type-micro);letter-spacing:-.025em}
  .patch-port-code{font-size:var(--type-micro)}.patch-rack{min-height:211px}
  .patch-bottom{padding-top:12px}.patch-bottom>span:last-child{display:none}
  .patch-rack-mark{display:none}
  .led-model{display:none}.led-bezel-header,.led-bezel-footer{font-size:var(--type-micro)}
  .wordmark-stage.led-display{grid-template-rows:25px minmax(0,1fr) 24px;height:clamp(185px,49vw,275px)}
  .led-bezel-footer{gap:8px}.led-bezel-footer>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .section-kicker>span:nth-child(2){display:none}
  .service-display-title{font-size:8.4vw}.service-display-title.is-long{font-size:6.65vw}
  .service-photo-top{gap:12px}.service-photo-top>span:last-child{max-width:10ch}
  .service-orbit{font-size:1.875rem}
  .service-disciplines{margin-top:36px}
  .service-story{min-height:0}.service-story p{max-width:none}
  .service-big-number{font-size:8.125rem}
  .service-photo-bottom>span:last-child{font-size:var(--type-micro);max-width:100px}
  .case-caption h3{font-size:var(--type-title)}
  .cases-heading h2>span{font-size:1.125rem;margin-left:5px}
  .about-copy h2{font-size:var(--type-display)}
  .about-description p{max-width:none}
  .brand-poster{width:85%}
  .about-bottom{flex-wrap:wrap;font-size:var(--type-micro)}
  .about-coordinate{font-size:var(--type-micro)}
  .contact-email{font-size:1.125rem}
  .site-footer{gap:14px;font-size:var(--type-micro)}
  .site-footer>a:last-child{font-size:var(--type-meta)}
  .modal dl>div{grid-template-columns:1fr;gap:6px}
}

/* Editorial case indexes and the final coral action share the existing scale. */
.case-art-title{font-size:clamp(5rem,10.5vw,9rem)}
.case-caption h3{font-size:clamp(1.125rem,1.5vw,1.375rem);letter-spacing:var(--tracking-text)}
.contact-bar>.project-button{font-size:var(--type-title);font-weight:400;line-height:1.15;letter-spacing:var(--tracking-display)}
.contact-bar>.project-button>span{font-size:2rem}
@media(max-width:900px){.case-art-title{font-size:clamp(7rem,22vw,11rem)}}
@media(max-width:600px){.case-art-title{font-size:clamp(5.3rem,24vw,8rem)}.case-caption h3{font-size:1.125rem}}

/* Signal labels belong to the same small equipment typography. */
.display-port{font:400 var(--type-meta)/1.2 var(--mono);letter-spacing:0}