@font-face { font-family: 'Mozilla Headline'; src: url('/assets/fonts/specimen/mozilla-headline-var.woff2') format('woff2'); font-weight: 200 700; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Mozilla Text'; src: url('/assets/fonts/specimen/mozilla-text-var.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }

@property --hs-slat { syntax: '<length>'; inherits: true; initial-value: 22px; }

body.spec-houselights { margin: 0; background: #E8E5DE; }

.hs-page {
  --hs-chalk: #E8E5DE; --hs-stone: #DAD6CD; --hs-paper: #F3F1EC; --hs-ink: #222427; --hs-ink2: #55575B;
  --hs-verm: #EC4E27; --hs-vink: #B52E0E; --hs-felt-ink: #141516;
  --hs-ground: var(--hs-chalk); --hs-text: var(--hs-ink);
  --hs-hd: 'Mozilla Headline', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --hs-tx: 'Mozilla Text', system-ui, 'Segoe UI', sans-serif;
  --hs-gut: clamp(16px, 4vw, 72px);
  --hs-ease: cubic-bezier(.3, 0, .1, 1);
  --hs-nav: 56px;
  --hs-pad: clamp(64px, 9vw, 144px); --hs-max: calc(1360px + 2 * var(--hs-gut)); --hs-inset: max(var(--hs-gut), calc((100% - 1360px) / 2));
  --hs-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .35 0'/></filter><rect width='220' height='220' filter='url%28%23n%29' opacity='.35'/></svg>");
  color: var(--hs-text);
  background-color: var(--hs-ground);
  background-image: var(--hs-grain);
  font-family: var(--hs-tx);
  font-size: clamp(1.0625rem, 1rem + .18vw, 1.1875rem);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.hs-page *, .hs-page *::before, .hs-page *::after { box-sizing: border-box; }
.hs-page :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hs-page h1, .hs-page h2, .hs-page h3 { font-family: var(--hs-hd); font-weight: 700; font-variation-settings: 'wdth' 75; margin: 0; text-wrap: balance; }
:where(.hs-page) p { margin: 0; }
:where(.hs-page) button { font: inherit; color: inherit; }
.hs-page img { display: block; max-width: 100%; height: auto; }
.hs-band { color: var(--hs-text); background-color: var(--hs-ground); box-shadow: 0 0 0 100vmax var(--hs-ground); clip-path: inset(0 -100vmax); }
.hs-stone { --hs-ground: var(--hs-stone); }
.hs-band[id] { scroll-margin-top: calc(var(--bar-h, 40px) + var(--hs-nav) - 1px); }
.hs-h2 { font-size: clamp(2.25rem, 1.2rem + 3.8vw, 5.25rem); line-height: .92; letter-spacing: -.01em; }

/* ── nav ── */
.hs-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  display: flex; align-items: center; gap: 28px;
  height: var(--hs-nav); padding: 0 var(--hs-gut);
  color: var(--hs-ink); background: var(--hs-chalk); border-bottom: 1px solid var(--hs-ink);
  transition: background-color .5s var(--hs-ease), color .5s var(--hs-ease);
}
.hs-nav.hs-onfelt { background: var(--hs-verm); color: var(--hs-felt-ink); }
.hs-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--hs-hd); font-weight: 700; font-variation-settings: 'wdth' 100; font-size: 18px; letter-spacing: .005em; margin-right: auto; }
.hs-mark { width: 28px; height: 28px; flex: none; }
.hs-links { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.hs-links a, .hs-asklink { color: inherit; text-decoration: none; font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; }
.hs-links a { padding: 8px 0; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.hs-links a:hover, .hs-links a[aria-current='true'] { text-decoration-line: underline; }
.hs-asklink { padding: 10px 16px; border: 1.5px solid currentColor; border-radius: 4px; transition: background-color .3s var(--hs-ease), color .3s var(--hs-ease); }
.hs-asklink:hover { background: var(--hs-ink); color: var(--hs-paper); }
.hs-menu { display: none; position: relative; }
.hs-menu summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 4px; cursor: pointer; list-style: none; font-weight: 500; font-size: 15px; }
.hs-menu summary::-webkit-details-marker { display: none; }
.hs-menu-i { width: 16px; height: 10px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 1.5px no-repeat; }
.hs-menulist { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 220px; margin: 0; padding: 8px; list-style: none; border-radius: 6px; color: var(--hs-ink); background: var(--hs-paper); box-shadow: 0 18px 34px -14px rgb(20 21 22 / .45), 0 0 0 1px var(--hs-ink); }
.hs-menulist a { display: block; padding: 12px 14px; border-radius: 4px; color: inherit; text-decoration: none; font-family: var(--hs-hd); font-variation-settings: 'wdth' 100; font-weight: 600; font-size: 1.125rem; line-height: 1.1; }
.hs-menulist a:hover, .hs-menulist a:focus-visible, .hs-menulist a[aria-current='true'] { background: var(--hs-chalk); }
.hs-menulist a[aria-current='true']::before { content: ''; display: inline-block; width: 10px; height: 4px; margin: 0 10px 3px 0; border-radius: 2px; background: var(--hs-verm); }
@media (max-width: 900px) { .hs-links { display: none; } .hs-menu { display: block; } .hs-nav { gap: 10px; } }
@media (max-width: 700px) { .hs-page { --hs-nav: 48px; } .hs-brand { font-size: 17px; } .hs-asklink { padding: 9px 12px; } }
@media (max-width: 359px) { .hs-brand { gap: 8px; } .hs-brand span { font-size: 16px; } .hs-menu summary { padding: 0 10px; } .hs-menu-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .hs-nav { gap: 8px; } .hs-asklink { padding: 9px 10px; } }

/* ── the hero: one treated side wall, the screen end at the left, the back row at the right ── */
.hs-hero { position: relative; padding: clamp(20px, 2.6vw, 36px) 0 0; }
.hs-herohead { display: grid; gap: 14px; max-width: calc(1360px + 2 * var(--hs-gut)); margin: 0 auto; padding: 0 var(--hs-gut) clamp(18px, 2.4vw, 30px); }
.hs-h1 { font-size: clamp(2.75rem, 1.4rem + 5.6vw, 6.25rem); line-height: .86; letter-spacing: -.014em; }
.hs-h1 em { display: block; font-style: normal; color: var(--hs-vink); }
.hs-herolede { max-width: 44ch; font-size: clamp(1rem, .95rem + .25vw, 1.1875rem); line-height: 1.45; text-wrap: pretty; }
.hs-wall { position: relative; margin: 0; background: #3a332d; }
.hs-wall img { width: 100%; height: auto; aspect-ratio: 2.5 / 1; object-fit: cover; }
.hs-wallfoot { display: grid; gap: 10px 40px; max-width: calc(1360px + 2 * var(--hs-gut)); margin: 0 auto; padding: 16px var(--hs-gut) 0; font-size: .9375rem; line-height: 1.45; }
.hs-wallfoot p { max-width: 62ch; text-wrap: pretty; }
.hs-wallgo { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--hs-ink); font-family: var(--hs-hd); font-variation-settings: 'wdth' 110; font-weight: 600; font-size: 1.0625rem; line-height: 1; text-decoration: none; padding: 12px 0; border-bottom: 1.5px solid currentColor; white-space: nowrap; }
.hs-wallgo::after { content: ''; width: 9px; height: 9px; margin-top: -5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hs-wallgo:hover { color: var(--hs-vink); }
.hs-skirting-hero { margin-top: 8px; }
@media (max-width: 700px) {
  .hs-wall img { aspect-ratio: 1 / 1; }
}
@media (min-width: 701px) {
  .hs-herohead { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(28px, 4vw, 72px); }
  .hs-herolede { max-width: 34ch; padding-bottom: .3em; }
  .hs-wallfoot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
@media (min-width: 1181px) {
  .hs-h1 em { display: inline; }
  .hs-wall img { max-height: calc(100svh - var(--hs-nav) - var(--bar-h, 40px) - 250px); min-height: 440px; }
}

/* ── where the bass lands: the room in plan ── */
.hs-bass {
  --hs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 3.25rem);
  --hs-ground: var(--hs-stone);
  display: flex; flex-direction: column; position: relative;
  max-width: calc(1360px + 2 * var(--hs-gut)); margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--hs-gut) 0;
}
.hs-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hs-basshead { padding-bottom: 18px; }
.hs-bassh { font-size: var(--hs-h1); line-height: .9; letter-spacing: -.012em; }
.hs-bassh em { display: block; font-style: normal; font-variation-settings: 'wdth' 75; font-weight: 700; }
.hs-basslede { margin-top: 12px; max-width: 54ch; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.45; text-wrap: pretty; }

.hs-room { position: relative; width: 100%; min-width: 0; }
.hs-floorbox { position: relative; background: var(--hs-ink); padding: 10px; border-radius: 2px; }
.hs-floor { position: relative; container-type: size; background: var(--hs-paper); aspect-ratio: 3.9 / 5.4; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.hs-floor:focus-visible { outline: 3px solid var(--hs-verm); outline-offset: 12px; }
.hs-screen { position: absolute; z-index: 3; pointer-events: none; background: var(--hs-ink); border-radius: 1px; left: 11.5%; width: 77%; top: 0; height: 6px; }
.hs-plan { position: absolute; left: 0; top: 0; width: 100cqh; height: 100cqw; transform: matrix(0, 1, 1, 0, 0, 0); transform-origin: 0 0; }
.hs-cv, .hs-poster, .hs-door { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.hs-cv { opacity: 0; }
.hs-live .hs-cv { opacity: 1; }
.hs-live .hs-poster, .hs-room:has(.hs-live:not(.hs-noworker)) .hs-postline { display: none; }
.hs-door { pointer-events: none; z-index: 2; }
.hs-gap { position: absolute; left: 9.26%; top: 100%; width: 16.67%; height: 10px; background: var(--hs-paper); }
.hs-postline { margin-top: 14px; max-width: 62ch; color: var(--hs-ink); font-size: .9375rem; line-height: 1.45; text-wrap: pretty; }
.hs-tag { position: absolute; z-index: 4; pointer-events: none; color: var(--hs-ink); font-size: .8125rem; font-weight: 600; line-height: 1; }
.hs-tag-screen { left: 50%; top: 14px; transform: translateX(-50%); }
.hs-tag-door { left: 100%; top: 17.6%; transform: translate(-100%, -50%) translateX(-10px); }

.hs-row, .hs-sub, .hs-onplan, .hs-margin .hs-hear, .hs-here, .hs-draghint, .hs-rtext, .hs-was, .hs-freq, .hs-mhz { display: none; }
.hs-js .hs-row, .hs-js .hs-sub, .hs-js .hs-here, .hs-js .hs-draghint, .hs-js .hs-was, .hs-js .hs-freq, .hs-js .hs-mhz { display: block; }
.hs-js .hs-rtext { display: inline; }
.hs-js .hs-onplan, .hs-js .hs-margin .hs-hear { display: flex; }
.hs-row { position: absolute; z-index: 5; padding: 0; margin: 0; border: 0; background: none; cursor: grab; touch-action: none; border-radius: 10px; left: calc(var(--x0, .4) * 100%); }
.hs-row:active { cursor: grabbing; }
.hs-row-front { top: 20.5%; height: 59%; width: 14.8%; display: none; flex-direction: column; justify-content: space-between; }
.hs-js .hs-row-front { display: flex; }
.hs-row-back { top: 9%; height: 82%; width: 18.5%; }
.hs-seat, .hs-sofa { position: relative; display: block; overflow: hidden; border: 2px solid var(--hs-ink); background: color-mix(in srgb, var(--hs-verm) calc(var(--glow, 0) * 42%), rgb(243 241 236 / .5)); transition: background-color .4s var(--hs-ease); }
.hs-seat { height: 31%; border-radius: 22% / 18%; }
.hs-sofa { height: 100%; border-radius: 14px; background-image: linear-gradient(transparent calc(100% - 1px), var(--hs-ink) 0); background-size: 100% 25%; }
.hs-seat::after, .hs-sofa::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 28%; border-left: 2px solid var(--hs-ink); background: repeating-linear-gradient(45deg, var(--hs-ink) 0 1.2px, transparent 1.2px 5px); opacity: .9; }
.hs-row:focus-visible, .hs-sub:focus-visible { outline: 2px solid var(--hs-verm); outline-offset: 4px; }
.hs-sub { position: absolute; z-index: 6; left: calc(var(--x, .1) * 100%); top: calc(var(--y, .1) * 100%); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; border-radius: 6px; }
.hs-sub span { position: absolute; left: 9px; top: 9px; width: 26px; height: 26px; border-radius: 3px; background: radial-gradient(circle, var(--hs-ink) 0 5px, var(--hs-paper) 5.5px 7.5px, var(--hs-ink) 8px); box-shadow: 0 2px 0 rgb(20 21 22 / .25); }
.hs-hinting .hs-sub span { animation: hs-nudge 1.1s var(--hs-ease) 2; }
@keyframes hs-nudge { 30% { transform: translate(7px, -5px); } 60% { transform: none; } }
.hs-holding .hs-row, .hs-holding .hs-sub { opacity: .18; transition: opacity .2s; }
.hs-onplan { position: absolute; z-index: 6; left: 10px; top: 21%; gap: 6px; }
.hs-add, .hs-tunekey { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1.5px solid var(--hs-ink); border-radius: 4px; cursor: pointer; font-size: .875rem; font-weight: 600; line-height: 1; }
.hs-add { background: var(--hs-paper); color: var(--hs-ink); padding-left: 8px; }
.hs-add::before { content: '+'; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px dashed currentColor; border-radius: 3px; font-size: 14px; }
.hs-add[hidden], .hs-tunekey[hidden] { display: none; }
.hs-tunekey { background: var(--hs-ink); color: var(--hs-paper); font-family: var(--hs-hd); font-variation-settings: 'wdth' 125; font-size: .9375rem; padding: 6px 16px; }
.hs-tunekey.is-busy { background: var(--hs-verm); border-color: var(--hs-verm); color: var(--hs-felt-ink); font-variation-settings: 'wdth' 100; }
.hs-add:hover { background: #fff; } .hs-tunekey:not(.is-busy):hover { background: #000; }
.hs-tunekey.is-busy:hover { background: #F0643F; border-color: #F0643F; }
.hs-add:focus-visible, .hs-tunekey:focus-visible { outline: 2px solid var(--hs-verm); outline-offset: 2px; }
.hs-here { position: absolute; z-index: 7; left: calc(var(--hx, .5) * 100%); top: calc(var(--hy, .5) * 100%); width: 0; height: 0; pointer-events: none; transition: left .25s, top .25s; }
.hs-here i { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--hs-ink); }
.hs-here b { position: absolute; right: 28px; top: 0; transform: translateY(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 3px; font-size: .8125rem; font-weight: 600; line-height: 1.1; color: var(--hs-felt-ink); background: var(--hs-verm); opacity: 0; transition: opacity .3s; }
.hs-hearing .hs-here i { border: 2.5px solid var(--hs-verm); animation: hs-pulse 1.25s ease-out infinite; }
.hs-hearing .hs-here b { opacity: 1; }
@keyframes hs-pulse { 0% { box-shadow: 0 0 0 0 rgb(236 78 39 / .55); } 100% { box-shadow: 0 0 0 18px rgb(236 78 39 / 0); } }
.hs-draghint { position: absolute; z-index: 7; pointer-events: none; white-space: nowrap; padding: 5px 9px; border-radius: 3px; font-size: .8125rem; font-weight: 600; line-height: 1.1; left: calc(var(--dx, .1) * 100%); top: calc(var(--dy, .9) * 100%); transform: translate(-50%, 28px); color: var(--hs-paper); background: var(--hs-ink); transition: opacity .5s; }
.hs-draghint::before { content: ''; position: absolute; left: 50%; top: -6px; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--hs-ink); }
.hs-draghint.is-left { transform: translate(calc(-100% + 24px), 28px); }
.hs-draghint.is-left::before { left: auto; right: 12px; }
.hs-draghint.is-gone { opacity: 0; }
.hs-was { position: absolute; z-index: 8; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 3px; background: var(--hs-ink); color: var(--hs-paper); font-family: var(--hs-hd); font-variation-settings: 'wdth' 110; font-weight: 600; font-size: .9375rem; line-height: 1; pointer-events: none; opacity: 0; transition: opacity .2s; }
.hs-holding .hs-was { opacity: 1; }

/* the plan's margin: one ink curve, which is also the note's fader */
.hs-margin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 20px; padding-top: 14px; }
.hs-hear { align-items: center; justify-content: center; min-width: 206px; gap: 8px; min-height: 48px; padding: 6px 16px 6px 12px; border: 1.5px solid var(--hs-ink); border-radius: 4px; background: transparent; color: var(--hs-ink); cursor: pointer; font-family: var(--hs-hd); font-variation-settings: 'wdth' 110; font-weight: 600; font-size: 1.0625rem; line-height: 1; white-space: nowrap; transition: background-color .3s var(--hs-ease); }
.hs-hear svg { width: 20px; height: 20px; flex: none; }
.hs-hear .hs-hear-off { display: none; }
.hs-hear[aria-pressed='true'] { background: var(--hs-verm); border-color: var(--hs-verm); color: var(--hs-felt-ink); }
.hs-hear[aria-pressed='true'] .hs-hear-on { display: none; } .hs-hear[aria-pressed='true'] .hs-hear-off { display: inline; }
.hs-hear:hover { background: rgb(34 36 39 / .07); }
.hs-hear[aria-pressed='true']:hover { background: #F0613D; }
.hs-hear:focus-visible { outline: 2px solid var(--hs-ink); outline-offset: 2px; }
.hs-mcurve { --fx: .301; position: relative; height: 64px; margin-bottom: 20px; }
.hs-mcv { display: block; width: 100%; height: 100%; overflow: visible; }
.hs-mcv path { vector-effect: non-scaling-stroke; fill: none; }
.hs-mbase { stroke: var(--hs-ink); stroke-opacity: .35; stroke-width: 1; }
.hs-mline { stroke: var(--hs-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hs-mcurve.hs-then .hs-mline { stroke-dasharray: 5 4; }
.hs-mcurve::after { content: ''; position: absolute; top: -4px; bottom: -4px; left: calc(var(--fx) * 100%); width: 2px; margin-left: -1px; background: var(--hs-verm); pointer-events: none; }
.hs-freq { position: absolute; left: -8px; top: -6px; width: calc(77.8% + 16px); height: calc(100% + 12px); margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; z-index: 2; }
.hs-freq::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.hs-freq::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 76px; border: 0; background: transparent; }
.hs-freq::-moz-range-track { background: transparent; }
.hs-freq::-moz-range-thumb { width: 16px; height: 76px; border: 0; background: transparent; }
.hs-freq:focus-visible { outline: 2px solid var(--hs-ink); outline-offset: 2px; }
.hs-mhz { position: absolute; top: -26px; left: calc(var(--fx) * 100%); transform: translateX(-50%); padding: 2px 6px; border-radius: 3px; background: var(--hs-verm); color: var(--hs-felt-ink); font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.hs-max { position: absolute; bottom: -20px; white-space: nowrap; font-size: .75rem; line-height: 1.2; color: var(--hs-ink2); transform: translateX(-50%); }
.hs-max1 { left: 0; transform: none; } .hs-max2 { left: 39.8%; } .hs-max3 { left: 77.8%; } .hs-max4 { left: 100%; transform: translateX(-100%); }
.hs-mcap { grid-column: 1 / -1; font-size: .875rem; line-height: 1.45; color: var(--hs-ink2); max-width: 78ch; }

.hs-side { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; font-size: clamp(.9375rem, .9rem + .12vw, 1rem); line-height: 1.5; }
.hs-side > p { max-width: 46ch; }
.hs-readout { font-weight: 500; font-size: 1.0625rem; }
.hs-above { font-weight: 700; }
.hs-hint b { font-weight: 600; }
.hs-moved { font-weight: 500; }
.hs-moved:empty { display: none; }
.hs-moved:not(:empty) + .hs-hint { display: none; }
.hs-holdhelp { padding-left: 12px; border-left: 2px solid var(--hs-verm); }
.hs-model { font-size: .875rem; color: var(--hs-ink2); padding-top: 12px; border-top: 1px solid rgb(34 36 39 / .3); }

@media (max-width: 700px) {
  .hs-margin { grid-template-columns: minmax(0, 1fr); }
  .hs-hear { justify-content: center; }
  .hs-mcurve { margin-top: 30px; }
  .hs-onplan { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 701px) {
  .hs-bass { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 32%); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .hs-basshead, .hs-skirting-bass { grid-column: 1 / -1; }
  .hs-bassh em { display: inline; }
  .hs-room { grid-column: 1; }
  .hs-side { grid-column: 2; grid-row: 2; margin-top: 0; }
  .hs-margin { padding-top: 34px; }
}
@media (min-width: 1181px) {
  .hs-bass {
    --hs-h1: clamp(3.5rem, 1.5rem + 2.8vw, 4.75rem);
    --hs-ph: max(360px, min(700px, calc(100svh - var(--hs-nav) - var(--bar-h, 40px) - var(--hs-h1) - 196px)));
    grid-template-columns: minmax(0, calc(var(--hs-ph) * 1.3846 + 20px)) minmax(300px, 1fr);
  }
  .hs-basshead { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-bottom: 22px; }
  .hs-basslede { margin: 0; max-width: 46ch; font-size: 1rem; padding-bottom: .35em; }
  .hs-floor { aspect-ratio: 5.4 / 3.9; }
  .hs-plan { width: 100cqw; height: 100cqh; transform: none; }
  .hs-screen { left: 0; width: 6px; top: 11.5%; height: 77%; }
  .hs-tag-screen { left: 16px; top: 13%; transform: none; }
  .hs-tag-door { left: 17.6%; top: 100%; transform: translate(-50%, -100%) translateY(-10px); }
  .hs-onplan { left: 21%; top: 10px; }
  .hs-draghint { transform: translate(28px, -50%); }
  .hs-draghint.is-left { transform: translate(calc(-100% - 28px), -50%); }
  .hs-draghint::before { display: none; }
  .hs-margin { padding-top: 32px; }
  .hs-side { padding-top: 4px; }
}

/* the skirting: a hairline with the step lights along it, the page's running baseline */
.hs-skirting { position: relative; height: 48px; pointer-events: none; }
.hs-skirting::before { content: ''; position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: currentColor; opacity: .6; }
.hs-skirting::after { content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 4px;
  background: linear-gradient(90deg, transparent calc(50% - 6px), var(--hs-verm) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px)) 0 0 / clamp(56px, 8vw, 120px) 4px repeat-x; }
.hs-skirting-bass { margin-top: clamp(24px, 3vw, 40px); }

/* ── what we put in a room: one wall taken apart ── */
.hs-panels { padding: clamp(40px, 6vw, 88px) var(--hs-gut) 0; }
.hs-panelgrid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.hs-lede { grid-column: 1 / 11; grid-row: 1; margin-bottom: clamp(48px, 6vw, 96px); max-width: 46ch; font-weight: 430; font-size: clamp(1.25rem, .95rem + 1vw, 2.125rem); line-height: 1.3; text-wrap: pretty; }
.hs-panels-h { grid-column: 1 / 8; grid-row: 2; font-size: clamp(2.5rem, 1rem + 5vw, 6.5rem); }
.hs-panels-sub { grid-column: 9 / 13; grid-row: 2; max-width: 36ch; padding-bottom: .4em; }
.hs-cutaway { grid-column: 1 / -1; grid-row: 3; margin: clamp(28px, 4vw, 56px) 0 0; }
.hs-cutaway figcaption { margin-top: 18px; max-width: 60ch; font-size: .9375rem; line-height: 1.45; }
.hs-cutpan:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }
.hs-dw { display: block; width: 100%; height: auto; overflow: visible; color: var(--hs-ink); }
.hs-dw-l { fill: none; stroke: currentColor; stroke-width: 2; }
.hs-dw-t { fill: none; stroke: currentColor; stroke-width: 1.2; }
.hs-dw-edge { fill: none; stroke: currentColor; stroke-width: 2.5; }
.hs-dw-cloth { fill: url(#hs-wv); stroke: currentColor; stroke-width: 1.2; }
.hs-dw-gap { fill: var(--hs-paper); }
.hs-dw-wool { fill: url(#hs-wl); stroke: currentColor; stroke-width: 1.2; }
.hs-dw-wall { fill: url(#hs-hh); stroke: currentColor; stroke-width: 1.2; }
.hs-dw-frame rect, .hs-dw-bat rect { fill: url(#hs-gr); stroke: currentColor; stroke-width: 1.5; }
.hs-dw-spk rect, .hs-dw-spk circle, .hs-dw-spks { fill: var(--hs-paper); stroke: currentColor; stroke-width: 2; }
.hs-dw-ghost * { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .5; }
.hs-dw-cl { fill: none; stroke: var(--hs-verm); stroke-width: 3; }
.hs-dw-rn { font-family: var(--hs-hd); font-variation-settings: 'wdth' 75; font-weight: 700; font-size: 30px; fill: currentColor; }
.hs-dw-tx { font-family: var(--hs-tx); font-size: 15px; font-weight: 500; fill: currentColor; }
.hs-dw-dim { font-weight: 600; }
.hs-run { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 48px; margin-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 104px); align-items: start; }
.hs-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hs-panel h3 { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem); line-height: .92; }
.hs-p1 h3 { font-size: clamp(2.5rem, 1.2rem + 3.4vw, 4.5rem); }
.hs-p1 > p:not(.hs-incl) { font-size: 1.125em; }
.hs-panel p { max-width: 46ch; }
.hs-incl { padding-top: 12px; border-top: 1px solid rgb(34 36 39 / .4); font-size: clamp(.9375rem, .9rem + .1vw, 1rem); line-height: 1.5; }
.hs-incl b { font-weight: 600; }

/* ── the lights go down: the photograph, framed on the wall ── */
.hs-screenband { padding: 0 var(--hs-inset) clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.hs-twin { grid-column: 1 / 10; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1A1A1A; }
.hs-twin picture, .hs-twin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-twin .hs-up { opacity: 0; }
.hs-screentext { grid-column: 10 / 13; padding-left: 8px; }
.hs-screentext h2 { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); line-height: .95; }
.hs-screentext p { margin-top: 18px; max-width: 34ch; }

/* ── behind the cloth: photographs seen between timber slats ── */
.hs-slats { padding: var(--hs-pad) 0 0; }
.hs-slathead { max-width: var(--hs-max); margin: 0 auto; padding: 0 var(--hs-gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.hs-slathead h2 { grid-column: 1 / 7; }
.hs-slathead p { grid-column: 8 / 12; }
.hs-slatrun { --hs-side: max(calc(var(--hs-gut) - 24px), calc((100% - 1360px) / 2 - 24px)); margin-top: 48px; display: grid; column-gap: 24px;
  grid-template-columns: var(--hs-side) minmax(0, 7fr) minmax(0, 5fr) var(--hs-side); grid-template-rows: min(72svh, 720px) 20px auto;
  background: linear-gradient(#1C1812 0 min(72svh, 720px), transparent 0); }
.hs-sl { display: contents; }
.hs-sl picture { grid-row: 1; display: block; overflow: hidden; }
.hs-sl img { width: 100%; height: 100%; object-fit: cover; }
.hs-sl-4 picture, .hs-sl-4 figcaption { grid-column: 2; }
.hs-sl-3 picture, .hs-sl-3 figcaption { grid-column: 3; }
.hs-sl figcaption { grid-row: 3; padding: 18px 0 clamp(56px, 7vw, 104px); max-width: 34ch; font-size: clamp(.9375rem, .9rem + .15vw, 1.0625rem); line-height: 1.45; }
.hs-slatover { grid-column: 1 / -1; grid-row: 1; pointer-events: none; position: relative; z-index: 1;
  background: repeating-linear-gradient(90deg, #6B4B22 0, #D9B67E 1.5px, #C9A36A 3px, #BF975C calc(var(--hs-slat) - 4px), #6B4B22 var(--hs-slat), rgb(10 6 0 / .55) var(--hs-slat), rgb(10 6 0 / 0) calc(var(--hs-slat) + 12px), rgb(10 6 0 / 0) 60px); }
.hs-slatfoot { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; background: linear-gradient(#DDBB84, #C9A36A 2px, #B68F55 12px, #7A5A2C 14px, var(--hs-ink) 14px 15px, transparent 15px); }

/* ── why the sofa moved: the section drawing, on stone ── */
.hs-sectionband { padding: var(--hs-pad) var(--hs-inset); }
.hs-sechead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.hs-h2-big { grid-column: 1 / 8; font-size: clamp(3rem, 1rem + 7vw, 9rem); line-height: .86; }
.hs-sechead p { grid-column: 9 / 13; max-width: 34ch; }
.hs-drawing { position: relative; margin: clamp(32px, 4vw, 56px) 0 0; container-type: inline-size; }
.hs-draw { display: block; width: 100%; height: auto; color: var(--hs-ink); overflow: visible; }
.hs-cut rect { stroke: currentColor; stroke-width: 1.2; }
.hs-solid { fill: currentColor; }
.hs-batten { fill: url(#hs-ht); stroke: currentColor; stroke-width: 1; }
.hs-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-ear { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 2 6; opacity: .75; }
.hs-lab { font-family: var(--hs-tx); font-size: 14px; font-weight: 500; fill: currentColor; }
.hs-seatd { fill: var(--hs-paper); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.hs-ghost { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .6; }
.hs-ext { stroke: currentColor; stroke-width: 1.2; }
.hs-dim { stroke: var(--hs-vink); stroke-width: 2; stroke-dasharray: 51 51; stroke-dashoffset: 0; }
.hs-sofamv { transform: translateX(-51px); }
.hs-hid { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.hs-dimt { font-family: var(--hs-hd); font-weight: 700; font-size: 24px; font-variation-settings: 'wdth' 75; fill: var(--hs-vink); }
.hs-dot { fill: currentColor; }
.hs-leads path { fill: none; stroke: currentColor; stroke-width: 1.1; }
.hs-notes { margin: 0; padding: 0; list-style: none; }
.hs-note b { font-family: var(--hs-hd); font-variation-settings: 'wdth' 75; font-weight: 700; font-size: 1.3em; line-height: 1; display: block; margin-bottom: 4px; }
.hs-longread { columns: 2 30ch; column-gap: 48px; margin: clamp(40px, 5vw, 72px) 0 0 calc((100% + 24px) / 6); }
.hs-longread p { break-inside: avoid; }
.hs-longread p + p { margin-top: 1em; }
@media (min-width: 1181px) {
  .hs-notes { position: absolute; inset: 0; pointer-events: none; }
  .hs-note { position: absolute; left: calc(var(--x) / 12 * 1%); top: calc((var(--y) + 90) / 7.5 * 1%); width: calc(var(--w) / 12 * 1%); font-size: min(15px, 1.2cqi); line-height: 1.42; padding-left: 8px; }
  .hs-n-mic { --x: 400; --y: 176; --w: 176; }
  .hs-n-ear { --x: 640; --y: -80; --w: 190; }
  .hs-n-dim { --x: 790; --y: 196; --w: 186; }
  .hs-n-wall { --x: 1002; --y: -86; --w: 190; }
}
@media (max-width: 1180px) {
  .hs-leads { display: none; }
  .hs-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin-top: 32px; }
  .hs-note { padding-top: 12px; border-top: 1px solid rgb(34 36 39 / .45); }
  .hs-n-ear { order: 1; } .hs-n-dim { order: 2; } .hs-n-wall { order: 3; } .hs-n-mic { order: 4; }
  .hs-n-dim { padding-left: 12px; }
}

/* ── scatter the back wall: the skyline diffuser ── */
.hs-skyline { padding: var(--hs-pad) 0 0; }
.hs-skyhead { max-width: var(--hs-max); margin: 0 auto; padding: 0 var(--hs-gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.hs-skycopy { grid-column: 1 / 7; }
.hs-skycopy p { margin-top: 20px; max-width: 56ch; }
.hs-skyctl { grid-column: 8 / 13; display: none; gap: 12px; padding: 16px 0; border-block: 1px solid rgb(34 36 39 / .45); }
.hs-js .hs-skyctl { display: grid; }
.hs-skyrow { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 12px; }
.hs-skylab { font-size: .9375rem; font-weight: 500; line-height: 1.2; }
.hs-skylab b { font-weight: 600; }
.hs-primes, .hs-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-pk, .hs-sendkey {
  border: 1.5px solid var(--hs-ink); border-radius: 4px; background: transparent; color: var(--hs-ink); cursor: pointer;
  font-family: var(--hs-hd); font-variation-settings: 'wdth' 125; font-weight: 600;
  transition: background-color .3s var(--hs-ease), color .3s var(--hs-ease);
}
.hs-pk:hover, .hs-sendkey:hover { background: rgb(34 36 39 / .08); }
.hs-pk[aria-checked='true'], .hs-sendkey:active { color: var(--hs-paper); background: var(--hs-ink); }
.hs-pk:focus-visible, .hs-sendkey:focus-visible { outline: 2px solid var(--hs-ink); outline-offset: 2px; }
.hs-pk { min-width: 48px; min-height: 44px; padding: 4px 10px; font-size: 1.0625rem; line-height: 1.05; }
.hs-pk[aria-disabled='true'] { opacity: .5; cursor: not-allowed; font-variation-settings: 'wdth' 100; }
.hs-pko { display: none; font-family: var(--hs-tx); font-size: .8125rem; font-weight: 500; }
.hs-pk[aria-disabled='true'] .hs-pko { display: inline; }
.hs-pkw { flex: 1; }
.hs-fader { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; color: var(--hs-ink); cursor: pointer; }
.hs-fader::-webkit-slider-runnable-track { height: 2px; background: currentColor; }
.hs-fader::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 28px; margin-top: -13px; border-radius: 3px; border: 2px solid currentColor; background: linear-gradient(90deg, transparent 4px, var(--hs-verm) 4px 6px, transparent 6px), var(--hs-paper); }
.hs-fader::-moz-range-track { height: 2px; background: currentColor; }
.hs-fader::-moz-range-thumb { width: 10px; height: 24px; border-radius: 3px; border: 2px solid currentColor; background: var(--hs-paper); }
.hs-skyline-line { grid-column: 8 / 13; grid-row: 2; margin-top: 14px; padding: 0 4px; font-size: .9375rem; line-height: 1.45; font-weight: 500; min-height: 4.35em; }
.hs-skywall { position: relative; height: 380px; margin-top: 28px; outline-offset: -4px; }
.hs-skywall:focus-visible { outline: 2px solid var(--hs-ink); }
.hs-skysvg, .hs-skycv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hs-skycv { opacity: 0; }
.hs-sky-live .hs-skycv { opacity: 1; }
.hs-sky-live .hs-skysvg { display: none; }
.hs-skytip { position: absolute; z-index: 2; padding: 4px 8px; border-radius: 3px; background: var(--hs-ink); color: var(--hs-paper); font-size: .875rem; font-weight: 600; line-height: 1.2; transform: translate(-50%, calc(-100% - 8px)); pointer-events: none; opacity: 0; white-space: nowrap; }
.hs-skytip.is-on { opacity: 1; }
.hs-skybase { height: 20px; background: linear-gradient(#E2C28E, #C9A36A 3px, #B08A52 14px, #7A5A2C); box-shadow: 0 4px 0 var(--hs-ink); margin-bottom: 4px; }

/* ── small rooms, low notes ── */
.hs-trap { padding: calc(var(--hs-pad) * .8) var(--hs-inset); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.hs-traphead { display: contents; }
.hs-traphead h2 { grid-column: 1 / 7; }
.hs-traphead p { grid-column: 8 / 13; max-width: 46ch; }
.hs-minis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.hs-mini { margin: 0; min-width: 0; }
.hs-minibox { position: relative; aspect-ratio: 568 / 418; }
.hs-minicv { position: absolute; left: 2.465%; top: 3.35%; width: 95.07%; height: 93.3%; display: block; background: var(--hs-paper); }
.hs-minisvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--hs-ink); overflow: visible; }
.hs-mwall { fill: none; stroke: currentColor; stroke-width: 10; }
.hs-mscreen { fill: currentColor; }
.hs-mrows rect { fill: var(--hs-paper); fill-opacity: .7; stroke: currentColor; stroke-width: 2.5; }
.hs-msubs rect { fill: currentColor; stroke: var(--hs-paper); stroke-width: 2; }
.hs-mtraps path { fill: #C9A36A; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.hs-mtraps text { font-family: var(--hs-tx); font-size: 18px; font-weight: 600; fill: currentColor; }
.hs-mini figcaption { margin-top: 14px; max-width: 52ch; font-size: clamp(.9375rem, .9rem + .12vw, 1rem); line-height: 1.5; }
.hs-mini figcaption b { font-family: var(--hs-hd); font-variation-settings: 'wdth' 75; font-weight: 700; font-size: 1.5em; line-height: 1; display: block; margin-bottom: 6px; }
.hs-mini-note { grid-column: 1 / -1; margin-top: 28px; max-width: 90ch; font-size: .9375rem; line-height: 1.45; color: var(--hs-ink2); }
.hs-faq { grid-column: 1 / 10; margin-top: clamp(64px, 8vw, 112px); }
.hs-trapq { margin-bottom: 14px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1; }
.hs-faq details { border-top: 1px solid rgb(34 36 39 / .45); }
.hs-faq details:last-child { border-bottom: 1px solid rgb(34 36 39 / .45); }
.hs-faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--hs-tx); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.3; }
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary::after { content: '+'; flex: none; font-weight: 400; font-size: 1.5rem; line-height: .6; }
.hs-faq details[open] summary::after { content: '\2212'; }
.hs-faq details p { max-width: 64ch; padding: 0 0 18px; }
.hs-faq summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── the tuning visit: one full-bleed panel of vermilion felt, the words set on the weave ── */
.hs-felt { --hs-ground: var(--hs-verm); --hs-text: var(--hs-felt-ink); position: relative;
  background-image: repeating-linear-gradient(0deg, rgb(20 21 22 / .06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(255 236 220 / .07) 0 1px, transparent 1px 3px), var(--hs-grain); }
.hs-felt::before, .hs-felt::after { content: ''; position: absolute; left: -100vmax; right: -100vmax; height: 0; border-top: 1.5px dashed rgb(20 21 22 / .45); }
.hs-felt::before { top: 16px; } .hs-felt::after { bottom: 16px; }
.hs-tune { padding: var(--hs-pad) var(--hs-inset); }
.hs-tunein { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(40px, 5vw, 72px); align-items: start; }
.hs-tunehead { grid-column: 1 / 8; }
.hs-tune-h { font-size: clamp(3rem, 1rem + 7vw, 9rem); line-height: .86; }
.hs-tunelede { margin-top: 40px; max-width: 34ch; font-size: clamp(1.25rem, .95rem + 1vw, 2rem); line-height: 1.3; font-weight: 450; }
.hs-mics { grid-column: 8 / 13; align-self: end; display: grid; gap: 18px; }
.hs-microw { display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 18px); padding-bottom: 10px; border-bottom: 1.5px solid var(--hs-felt-ink); }
.hs-micname { flex: 0 0 5.5em; align-self: center; font-family: var(--hs-hd); font-variation-settings: 'wdth' 75; font-weight: 700; font-size: 1.25rem; line-height: 1; }
.hs-mic { display: block; width: clamp(28px, 3.2vw, 44px); }
.hs-mic svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-cap { fill: var(--hs-felt-ink); }
.hs-stand { fill: none; stroke: var(--hs-felt-ink); stroke-width: 2.5; stroke-linecap: round; }
.hs-ring { fill: none; stroke: var(--hs-felt-ink); stroke-width: 2; stroke-linecap: round; }
.hs-tunepic { grid-column: 1 / 8; margin: 0; }
.hs-tunepic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 0 0 1.5px var(--hs-felt-ink); }
.hs-tunetext { grid-column: 8 / 13; align-self: end; }
.hs-tunetext h3 { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem); line-height: .95; }
.hs-tunetext p { margin-top: 16px; max-width: 42ch; }

/* ── ask ── */
.hs-ask { padding: var(--hs-pad) var(--hs-inset); }
.hs-askpanel { width: calc((100% + 24px) / 12 * 10 - 24px); margin: 0 auto; padding: clamp(28px, 4vw, 64px); background: var(--hs-paper); box-shadow: 0 0 0 1.5px var(--hs-ink); }
.hs-askhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.hs-askhead p { max-width: 40ch; }
.hs-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; margin-top: clamp(32px, 4vw, 56px); }
.hs-fl { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.hs-wide { grid-column: 1 / -1; }
.hs-form label, .hs-form legend { font-weight: 500; font-size: 1rem; line-height: 1.3; padding: 0; }
.hs-form input[type='text'], .hs-form input[type='email'], .hs-form select, .hs-form textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-bottom: 2px solid var(--hs-ink); border-radius: 3px 3px 0 0; background: var(--hs-chalk); color: inherit; font: inherit; font-variant-numeric: tabular-nums; }
.hs-form textarea { resize: vertical; min-height: 120px; }
.hs-form ::placeholder { color: var(--hs-ink2); opacity: 1; }
.hs-form input:focus-visible, .hs-form select:focus-visible, .hs-form textarea:focus-visible { outline: 2px solid var(--hs-ink); outline-offset: 2px; }
.hs-dims { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
.hs-dims legend { margin-bottom: 8px; }
.hs-dims span { display: grid; gap: 6px; }
.hs-dims label { font-size: .9375rem; }
.hs-radios { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 28px; row-gap: 6px; }
.hs-radios.hs-wide { grid-template-columns: repeat(3, max-content); }
.hs-radios legend { margin-bottom: 8px; }
.hs-radios label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 400; }
.hs-radios input { width: 20px; height: 20px; margin: 0; accent-color: var(--hs-ink); }
.hs-send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hs-sendkey { min-height: 56px; padding: 0 40px; border-width: 2px; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); background: var(--hs-ink); color: var(--hs-paper); }
.hs-sendkey:hover { background: #000; }
.hs-status { font-weight: 500; }

.hs-foot { padding: 56px var(--hs-gut) 8px; --hs-ground: var(--hs-stone); }
.hs-footin { max-width: 1360px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.hs-footmark { margin-right: 0; }
.hs-footline { flex: 1 1 280px; }
.hs-skirting-last { max-width: 1360px; margin: 32px auto 0; height: 56px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hs-twin { view-timeline: --hs-scr block; }
    .hs-twin .hs-up { animation: hs-dimup linear both; animation-timeline: --hs-scr; animation-range: entry 40% cover 60%; }
    .hs-slatrun { view-timeline: --hs-sla block; }
    .hs-slatover { animation: hs-open linear both; animation-timeline: --hs-sla; animation-range: cover 10% cover 50%; }
    .hs-drawing { view-timeline: --hs-drw block; }
    .hs-sofamv { animation: hs-sofa linear both; animation-timeline: --hs-drw; animation-range: entry 10% entry 80%; }
    .hs-dim { animation: hs-dimdraw linear both; animation-timeline: --hs-drw; animation-range: entry 10% entry 80%; }
    .hs-dimt { animation: hs-dimw linear both; animation-timeline: --hs-drw; animation-range: entry 40% entry 90%; }
    .hs-n-dim { animation: hs-bright linear both; animation-timeline: --hs-drw; animation-range: entry 40% entry 90%; }
    .hs-mics { view-timeline: --hs-mic block; }
    .hs-ring { animation: hs-ring linear both; animation-timeline: --hs-mic; }
    .hs-microw .hs-mic:nth-child(2) .hs-ring { animation-range: entry 20% entry 45%; }
    .hs-microw .hs-mic:nth-child(3) .hs-ring { animation-range: entry 30% entry 55%; }
    .hs-microw .hs-mic:nth-child(4) .hs-ring { animation-range: entry 40% entry 65%; }
    .hs-microw-b .hs-mic:nth-child(2) .hs-ring { animation-range: entry 50% entry 75%; }
    .hs-microw-b .hs-mic:nth-child(3) .hs-ring { animation-range: entry 60% entry 85%; }
    .hs-microw-b .hs-mic:nth-child(4) .hs-ring { animation-range: entry 70% entry 95%; }
    .hs-microw-b .hs-mic:nth-child(5) .hs-ring { animation-range: entry 80% cover 55%; }
  }
}
@keyframes hs-dimup { from { opacity: 1; } to { opacity: 0; } }
@keyframes hs-open { from { --hs-slat: 52px; } to { --hs-slat: 22px; } }
@keyframes hs-sofa { from { transform: translateX(0); } to { transform: translateX(-51px); } }
@keyframes hs-dimdraw { from { stroke-dashoffset: 51; } to { stroke-dashoffset: 0; } }
@keyframes hs-dimw { from { font-variation-settings: 'wdth' 112; } to { font-variation-settings: 'wdth' 75; } }
@keyframes hs-bright { from { box-shadow: inset 3px 0 0 transparent; } to { box-shadow: inset 3px 0 0 var(--hs-verm); } }
@keyframes hs-ring { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .hs-skyctl, .hs-skyline-line { grid-column: 7 / 13; }
  .hs-skywall { height: 300px; }
  .hs-askpanel { width: 100%; }
  .hs-twin { grid-column: 1 / 9; } .hs-screentext { grid-column: 9 / 13; }
  .hs-mics { grid-column: 1 / -1; max-width: 560px; }
  .hs-tunehead { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .hs-panelgrid, .hs-slathead, .hs-sechead, .hs-skyhead, .hs-trap, .hs-screenband, .hs-tunein { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hs-lede, .hs-panels-h, .hs-panels-sub { grid-column: 1 / -1; grid-row: auto; }
  .hs-cutaway, .hs-run { grid-row: auto; }
  .hs-twin, .hs-screentext { grid-column: 1 / -1; } .hs-screentext { padding: 28px 0 0; } .hs-screentext p { max-width: 56ch; }
  .hs-slathead h2, .hs-slathead p { grid-column: 1 / -1; } .hs-slathead p { margin-top: 20px; max-width: 56ch; }
  .hs-h2-big, .hs-sechead p { grid-column: 1 / -1; } .hs-sechead p { margin-top: 20px; }
  .hs-longread { margin-left: 0; }
  .hs-skycopy, .hs-skyctl, .hs-skyline-line { grid-column: 1 / -1; } .hs-skyctl { margin-top: 32px; max-width: 520px; } .hs-skyline-line { grid-row: auto; max-width: 520px; }
  .hs-traphead h2, .hs-traphead p, .hs-faq { grid-column: 1 / -1; } .hs-traphead p { margin-top: 20px; }
  .hs-minis { gap: 32px 24px; }
  .hs-tunepic, .hs-tunetext { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .hs-panelgrid, .hs-slathead, .hs-sechead, .hs-skyhead, .hs-trap, .hs-screenband, .hs-tunein { grid-template-columns: minmax(0, 1fr); }
  .hs-panelgrid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hs-panelgrid { row-gap: 20px; }
  .hs-run { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hs-cutpan { overflow-x: auto; scrollbar-width: thin; margin: 0 calc(-1 * var(--hs-gut)); padding: 0 var(--hs-gut) 8px; }
  .hs-walldw { width: 900px; max-width: none; }
  .hs-twin { margin: 0 calc(-1 * var(--hs-gut)); aspect-ratio: 3 / 4; }
  .hs-screentext h2 { font-size: 2.25rem; }
  .hs-slatrun { grid-template-columns: repeat(2, 86vw); grid-template-rows: min(66svh, 560px) 20px auto; column-gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--hs-gut); scroll-padding: 0 var(--hs-gut); scrollbar-width: none; background: linear-gradient(#1C1812 0 min(66svh, 560px), transparent 0); }
  .hs-sl picture { background: #1C1812; scroll-snap-align: start; }
  .hs-sl-4 picture, .hs-sl-4 figcaption { grid-column: 1; } .hs-sl-3 picture, .hs-sl-3 figcaption { grid-column: 2; }
  .hs-slatover, .hs-slatfoot { grid-column: 1 / -1; }
  .hs-pan { overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--hs-gut)); padding: 0 var(--hs-gut); scrollbar-width: thin; }
  .hs-drawbox { width: 720px; scroll-snap-align: end; }
  .hs-pan:focus-visible { outline-offset: -2px; }
  .hs-notes { grid-template-columns: minmax(0, 1fr); }
  .hs-longread { columns: 1; }
  .hs-skyline { display: flex; flex-direction: column; }
  .hs-skyhead { display: contents; }
  .hs-skycopy { order: 1; padding: 0 var(--hs-gut); }
  .hs-skywall { order: 2; height: 240px; }
  .hs-skybase { order: 3; }
  .hs-skyctl { order: 4; margin: 20px var(--hs-gut) 0; }
  .hs-skyline-line { order: 5; margin: 12px var(--hs-gut) 36px; }
  .hs-skyrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hs-minis { grid-template-columns: minmax(0, 1fr); }
  .hs-micname { flex-basis: 4.6em; font-size: 1.0625rem; }
  .hs-mic { width: 30px; }
  .hs-askhead, .hs-form { grid-template-columns: minmax(0, 1fr); }
  .hs-askpanel { padding: 24px 18px; }
  .hs-radios.hs-wide { grid-template-columns: minmax(0, 1fr); }
  .hs-sendkey { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-page *, .hs-page *::before, .hs-page *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .hs-twin .hs-up { opacity: 0; }
  .hs-hearing .hs-here i { animation: none; }
}