.studio--construction { --surface: #eeeae0; --tone: #26372d; --display-font: StudioSpace; --body-font: StudioMono; }
.studio--construction .s-nav { border-bottom: 1px solid #a6aca0; }
.studio--construction .s-brand span { color: #c4512d; }
.build-blueprint { padding: 3% 5% 0; background-image: linear-gradient(#72857612 1px, transparent 1px), linear-gradient(90deg, #72857612 1px, transparent 1px); background-size: 60px 60px; }
.build-title { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; align-items: end; }
.build-title .s-kicker { grid-column: 1 / -1; margin-bottom: 8px; }
.build-title .s-title { font-size: 8.5cqw; font-weight: 700; line-height: .95; }
.build-title em { color: #a14729; font-style: normal; }
.build-caption { font-size: 10px; line-height: 1.7; padding-bottom: 5px; }
.build-caption .s-button { margin-top: 25px; }
.build-grid { display: grid; grid-template-columns: 1fr 3fr 35px; margin-top: 40px; border-top: 1px solid #98a195; }
.build-grid > img { height: 370px; }
.build-note { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 20px 25px 0; font-size: 11px; }
.s-cross { font-size: 40px; }
.build-coordinate { font-size: 9px; line-height: 1.8; }
.build-side { writing-mode: vertical-rl; font-size: 9px; letter-spacing: .15em; padding: 20px 10px; }
.studio--construction .studio-body { border-top: 16px solid #a14729; }
.studio--roofing { --surface: #f9f5eb; --tone: #203b4a; --display-font: StudioCondensed; }
.roof-utility { display: flex; justify-content: space-between; padding: 12px 5%; background: #203b4a; color: #fff; font-size: 10px; letter-spacing: .12em; }
.studio--roofing .s-brand span { color: #b8492c; }
.roof-scene { min-height: 660px; overflow: hidden; padding: 7% 5% 13%; }
.roof-angle { position: absolute; inset: 0 0 0 36%; clip-path: polygon(35% 0,100% 0,100% 100%,0 100%); }
.roof-angle::after { content: ''; position: absolute; inset: 0; background: #193e4120; }
.roof-message { position: relative; width: 50%; }
.roof-message .s-title { font-size: 8.3cqw; letter-spacing: -.035em; }
.roof-message p { margin: 20px 0; }
.roof-message .s-button { background: #b8492c; color: #fff; }
.roof-ticket { position: absolute; bottom: 35px; right: 5%; background: #fff4d2; padding: 25px; width: 255px; border-top: 6px solid #b8492c; }
.roof-ticket span { font-size: 9px; letter-spacing: .1em; }
.roof-ticket strong { display: block; font: 35px/1 StudioCondensed; margin: 16px 0; }
.roof-ticket a { font-size: 12px; text-decoration: underline; }
.studio--roofing .studio-body { background: #203b4a; color: #f9f5eb; }
.studio--plumbing { --surface: #f1f7f4; --tone: #145b80; --display-font: StudioSpace; }
.studio--plumbing .s-brand { font-size: 45px; }
.studio--plumbing .s-brand span { font-size: 20px; color: #ed9478; }
.flow-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 35px 6%; padding: 4% 7% 5%; }
.flow-circle { position: relative; width: 100%; aspect-ratio: 1; align-self: center; }
.flow-circle img { border-radius: 50%; }
.flow-drop { position: absolute; bottom: -10px; left: -20px; font-size: 120px; line-height: 1; color: #ed9478; transform: rotate(-30deg); }
.flow-copy .s-title { font-size: 7.5cqw; }
.flow-copy em { color: #277293; }
.flow-copy > p { margin-top: 22px; }
.flow-chooser { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 25px; background: #dfedf0; border-radius: 30px; padding: 20px 30px; }
.flow-chooser .s-choice-row { margin-top: 0; }
.flow-chooser .s-choice-copy { min-height: 0; }
.studio--plumbing .s-button, .studio--plumbing .s-choice-row button { border-radius: 40px; }
.studio--plumbing .studio-grid article { background: #fff; border: 0; border-radius: 25px; }
.studio--electrical { --surface: #111e22; --tone: #e2ff59; --display-font: StudioSpace; --body-font: StudioMono; }
.studio--electrical .s-nav { border-bottom: 1px solid #647068; }
.studio--electrical .s-brand span { color: white; }
.current-hero { display: grid; grid-template-columns: 1.2fr 1fr; padding: 6% 5%; gap: 6%; }
.current-copy .s-title { font-size: 6.7cqw; font-weight: 700; }
.current-copy .s-title > span { color: #e7ebe4; }
.current-copy p:not(.s-kicker) { color: #c1cbc1; font-size: 13px; margin: 25px 0; }
.current-circuit { border: 1px solid #667563; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; background-image: radial-gradient(#667563 1px, transparent 1px); background-size: 20px 20px; }
.circuit-label, .circuit-bottom { font-size: 9px; letter-spacing: .08em; }
.circuit-orbit { border: 1px solid #e2ff59; border-radius: 50%; aspect-ratio: 1; margin: 30px auto; width: 85%; display: flex; align-items: center; justify-content: space-between; }
.circuit-orbit b { border: 1px solid currentColor; padding: 25px; font: 35px StudioSpace; }
.circuit-orbit i { background: #e2ff59; color: #111e22; font-size: 30px; font-style: normal; padding: 0 6px; }
.circuit-nodes { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #e2ff59; padding-top: 18px; margin-bottom: 30px; font-size: 9px; }
.studio--electrical .studio-body { background: #d7f55e; color: #111e22; }
.studio--hvac { --surface: #f4f0e9; --tone: #203e43; --display-font: StudioSpace; }
.studio--hvac .s-brand span { font-weight: 400; color: #607f7e; }
.climate-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 3% 7% 0; }
.climate-copy .s-title { font-size: 7.1cqw; }
.climate-copy em { color: #a95837; }
.climate-copy p:not(.s-kicker) { margin: 25px 0; }
.climate-display { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 0 20px; }
.climate-dial { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 14px solid #e1d9cc; outline: 1px solid #c8beb0; width: min(100%,310px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 15px 45px #372d2215; background: #fcf9f2; }
.climate-dial span { font-size: 8px; letter-spacing: .2em; }
.climate-dial output { font: 85px StudioSpace; letter-spacing: -.06em; margin: 5px 0; }
.climate-dial strong { font-size: 11px; font-weight: 400; }
.climate-display label { font-size: 11px; margin: 20px 0 8px; }
.climate-display input { width: 200px; accent-color: #a95837; }
.climate-display small { font-size: 9px; margin-top: 12px; }
.climate-photo { grid-column: 1 / -1; height: 230px; margin-top: 20px; position: relative; }
.climate-photo img { border-radius: 140px 140px 0 0; }
.climate-photo span { position: absolute; bottom: 20px; left: 30px; font-size: 10px; letter-spacing: .18em; background: #f4f0e9; padding: 10px; }
.studio--hvac .studio-body { background: #e1e8df; }
@container (max-width: 700px) {
  .build-title { grid-template-columns: 1fr; }
  .build-title .s-title { font-size: 12cqw; }
  .build-caption { display: flex; align-items: center; gap: 20px; margin-top: 15px; }
  .build-caption .s-button { margin: 0; }
  .build-grid { grid-template-columns: 1fr 30px; }
  .build-note { display: none; }
  .build-grid > img { height: 280px; }
  .roof-utility { font-size: 8px; }
  .roof-scene { padding: 25px 6% 240px; }
  .roof-angle { inset: 300px 0 0 0; clip-path: none; }
  .roof-message { width: 100%; }
  .roof-message .s-title { font-size: 14cqw; }
  .roof-ticket { bottom: 20px; width: 210px; padding: 18px; }
  .flow-hero { grid-template-columns: 1fr; }
  .flow-circle { width: 70%; margin: auto; order: 2; }
  .flow-copy { order: 1; }
  .flow-copy .s-title { font-size: 13cqw; }
  .flow-chooser { order: 3; grid-template-columns: 1fr; border-radius: 20px; padding: 25px; }
  .flow-drop { font-size: 80px; }
  .current-hero { grid-template-columns: 1fr; gap: 35px; padding: 35px 7%; }
  .current-copy .s-title { font-size: 10.5cqw; }
  .current-circuit { min-height: 370px; }
  .circuit-orbit { width: 210px; }
  .climate-hero { grid-template-columns: 1fr; gap: 35px; }
  .climate-copy .s-title { font-size: 13cqw; }
  .climate-photo { height: 200px; }
}