@font-face{font-family:Auren Geo;src:url("assets/auren-geo.woff") format("woff");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:Auren Text;src:url("assets/auren-text-v5.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#f3f1ed;--ink:#161716;--page-ink:var(--ink);--muted:#6c6d65;--copper:#a4663f;--gutter:6.2vw;--safe-bottom:max(22px,env(safe-area-inset-bottom));color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip;overscroll-behavior-y:none}body{margin:0;background:var(--paper);color:var(--ink);font-family:Auren Text,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}a{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--copper);outline-offset:6px}[hidden]{display:none!important}::selection{background:#b578493d}h1,h2,h3,p,figure{margin:0}h2,h3,.assembly-title{font-family:Auren Geo,Arial,sans-serif;font-weight:700}h2,.assembly-title{font-size:clamp(50px,5.8vw,110px);line-height:.98;letter-spacing:-.052em;margin-bottom:26px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:24px;top:18px;z-index:40;padding:12px 18px;border-radius:30px;background:var(--ink);color:var(--paper);transform:translateY(-160%);font-size:14px;text-decoration:none}.skip-link:focus{transform:translateY(0)}
.type-plane{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none;user-select:none}.giant-type{position:absolute;left:50%;width:max-content;white-space:nowrap;font-family:Auren Geo,Arial,sans-serif;font-weight:700;font-size:36vw;line-height:1;letter-spacing:-.075em;transform:translateX(-50%);opacity:0;will-change:transform,opacity}.hero-wordmark{top:24svh;opacity:1}.bottom-type{top:76svh}.stage{position:fixed;inset:0;z-index:2;pointer-events:none;isolation:isolate;will-change:opacity,transform}#scene-canvas{display:block;width:100%;height:100%;pointer-events:auto;touch-action:pan-y;cursor:grab}#scene-canvas:active{cursor:grabbing}.stage.is-hidden #scene-canvas{pointer-events:none}body.is-crown-locked #scene-canvas{cursor:default}body.is-inspecting #scene-canvas{touch-action:pinch-zoom}
#poster{position:absolute;left:50%;top:7svh;width:140svh;height:86svh;object-fit:contain;transform:translateX(-50%);pointer-events:none}body.model-ready #poster{opacity:0}.scene-section{position:relative;width:100%}.panel{position:sticky;top:0;height:100svh;z-index:3;pointer-events:none}.hero-section{height:160svh}.concept-section,.finishes-section{height:160svh}.control-section{height:170svh}.components-section{height:480svh}.assembly-section{height:143svh}.materials-section{height:auto}.brand-section{height:185svh}.return-section{height:160svh}
.editorial-copy{position:absolute;left:var(--gutter);top:24svh;width:35%;max-width:540px}.eyebrow{display:flex;gap:18px;margin:0 0 28px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.eyebrow span{letter-spacing:.04em}.body-copy{font-size:clamp(14px,1.12vw,18px);line-height:1.7;color:var(--muted);max-width:360px}.hero-copy{position:absolute;left:var(--gutter);bottom:10svh}.hero-tagline{font-size:17px;margin:0 0 4px;line-height:1.4}.hero-description{font-size:12px;color:var(--muted)}.scroll-cue{position:absolute;right:var(--gutter);bottom:10svh;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;padding:0;background:none;pointer-events:auto}.cue-track{opacity:.2;stroke-width:1}.cue-arrow{animation:cue-drift 4s ease-in-out infinite}@keyframes cue-drift{0%,65%,100%{transform:translateY(0)}80%{transform:translateY(4px)}}.control-copy{left:auto;right:var(--gutter);top:23svh;width:35%}.control-copy h2{font-size:clamp(48px,5vw,96px)}

.finish-picker{display:flex;gap:19px;margin:35px 0 0;pointer-events:auto;width:max-content}
.finish-choice{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:58px;min-height:80px;border:0;background:none;padding:7px 5px 5px;font-size:12px;line-height:1.2;letter-spacing:.005em;color:var(--muted)}
.swatch{display:block;width:32px;height:32px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px #0000000f;transition:transform .42s cubic-bezier(.22,.68,0,1)}
.swatch:after{content:"";position:absolute;inset:-6px;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.8);transition:opacity .32s ease,transform .48s cubic-bezier(.22,.68,0,1)}
.swatch-cognac{background:#74472f}.swatch-black{background:#232523}.swatch-ivory{background:#e1dcd1}
.finish-choice[aria-pressed="true"],.finish-choice.is-active{color:var(--page-ink)}
.finish-choice[aria-pressed="true"] .swatch:after,.finish-choice.is-active .swatch:after{opacity:1;transform:scale(1)}
.finish-choice:hover .swatch{transform:translateY(-2px)}
.finish-caption{margin:17px 0 0;font-size:11px;letter-spacing:.025em;color:var(--muted)}
.caption-divider{margin:0 11px;opacity:.6}
#finish-name{display:inline-block;min-width:6ch;color:var(--page-ink)}
.control-copy h2{font-size:clamp(46px,5.35vw,100px)}
.volume-control{width:min(100%,360px);margin-top:36px;pointer-events:auto}
.volume-label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:12px;color:var(--page-ink)}
#volume-value{font-variant-numeric:tabular-nums;color:var(--muted)}
#volume{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;background:transparent;margin:0;cursor:ew-resize;touch-action:pan-y}
#volume::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--ink) 0,var(--ink) var(--volume-progress,40%),#d0cec7 var(--volume-progress,40%),#d0cec7 100%);border-radius:2px}
#volume::-moz-range-track{height:2px;background:#d0cec7;border-radius:2px}
#volume::-moz-range-progress{height:2px;background:var(--ink)}
#volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:5px solid var(--paper);border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px #16171624;transform:translateY(-9px);transition:box-shadow .2s ease}
#volume::-moz-range-thumb{width:12px;height:12px;border:5px solid var(--paper);border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px #16171624}
#volume:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #1617160a}
.volume-endpoints{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.05em;margin-top:0}
.audio-toggle{display:inline-flex;align-items:center;gap:11px;min-height:44px;padding:0;border:0;border-bottom:1px solid #16171630;background:none;margin:26px 0 0;font-size:13px;line-height:1;pointer-events:auto}
.audio-toggle:hover{border-bottom-color:currentColor}
.audio-toggle[aria-pressed="true"]{color:var(--copper)}
.audio-note{font-size:10px;line-height:1.5;letter-spacing:.015em;color:var(--muted);max-width:310px;margin:12px 0 0}

/* Keep the pager below the translated copy and in the same column. */
.component-ui{position:absolute;left:var(--gutter);top:22svh;width:min(40vw,560px);min-height:calc(44svh + 44px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.component-counter{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:20px;font-variant-numeric:tabular-nums}
.component-story h3{font-size:clamp(38px,4.4vw,82px);line-height:1.02;letter-spacing:-.052em;text-wrap:balance;margin-bottom:20px}
.component-story>p:last-child{font-size:clamp(14px,1.12vw,18px);line-height:1.65;color:var(--muted);max-width:380px}
.component-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-inline-start:-10px}
.component-navigation{display:flex;flex-wrap:wrap;gap:6px;pointer-events:auto}
.component-navigation button{min-width:44px;min-height:44px;border:0;background:none;padding:0 10px 12px;font-size:11px;position:relative;color:var(--muted);font-variant-numeric:tabular-nums}
.component-navigation button:after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;background:currentColor;opacity:.2;transform:scaleX(.6);transition:transform .25s,opacity .25s}
.component-navigation button.is-active{color:var(--ink)}
.component-navigation button.is-active:after{opacity:1;transform:scaleX(1)}
.component-next{display:grid;place-items:center;width:44px;height:44px;border:1px solid #16171630;border-radius:50%;padding:0;background:none;pointer-events:auto}
.component-next:hover{background:#16171608}

@media (min-width:761px) and (max-width:1100px){
 .component-navigation{gap:0}
}
@media (max-height:650px) and (min-aspect-ratio:6/5){
 .component-ui{top:14svh}
 .component-story h3{font-size:clamp(32px,4.4vw,44px);margin-bottom:14px}
 .component-story>p:last-child{font-size:13px}
}
@media (max-height:540px) and (min-aspect-ratio:6/5){
 .component-ui{top:12svh;width:min(45vw,500px);gap:14px}
 .component-story .eyebrow,.component-counter{margin-bottom:10px}
 .component-counter{font-size:9px}
 .component-story h3{font-size:clamp(25px,3.3vw,38px);margin-bottom:12px}
 .component-story>p:last-child{font-size:11px;line-height:1.55}
 .component-navigation{gap:0}
 .component-navigation button{padding:0 8px 9px;font-size:9px}
}
@media (aspect-ratio < 6/5), (max-width:760px) and (min-height:540px){
 .component-ui{right:var(--gutter);top:auto;bottom:max(11svh,var(--safe-bottom));width:auto;min-height:0;gap:16px}
 .component-story{max-width:360px}
 .component-story .eyebrow{margin-bottom:9px}
 .component-counter{font-size:9px;margin-bottom:11px}
 .component-story h3{font-size:clamp(28px,8.2vw,32px);margin-bottom:12px;max-width:320px}
 .component-story>p:last-child{font-size:12px;line-height:1.6;max-width:320px}
 .component-navigation{gap:3px}
 .component-navigation button{width:44px;padding:0 10px 9px;font-size:11px}
 .component-next{margin-inline-start:auto}
}
@media (max-width:380px){
 .component-next{display:none}
 .component-navigation{gap:0}
}
@media (max-height:720px) and (aspect-ratio < 6/5), (max-height:720px) and (max-width:760px) and (min-height:540px){
 .component-ui{bottom:max(11svh,var(--safe-bottom))}
 .component-story h3{font-size:28px}
 .component-story>p:last-child{font-size:11px}
}
@media (max-width:760px) and (height < 540px) and (min-aspect-ratio:6/5){
 .component-next{display:none}
}

.assembly-copy{position:fixed;left:var(--gutter);top:23svh;z-index:3;width:35%;opacity:0;pointer-events:none}
@media (min-aspect-ratio:6/5) and (min-width:761px){.assembly-copy{width:27%}.assembly-copy .assembly-title{font-size:clamp(30px,4.2vw,80px)}}
#brand-title{font-size:clamp(46px,min(7vw,12svh),140px)}
.loading-status{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:12;display:flex;gap:12px;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.03em;text-align:center}.loading-status.is-loaded{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}.retry-button{border:0;border-bottom:1px solid currentColor;padding:6px 0;min-height:44px;font-size:10px;white-space:nowrap;background:none}.noscript-note{position:fixed;bottom:0;left:0;right:0;padding:16px;background:var(--ink);color:var(--paper);z-index:30;text-align:center}
body.model-unavailable #scene-canvas{display:none}body.model-unavailable #poster{opacity:1}body.model-unavailable:is([data-scene="concept"],[data-scene="finishes"]) #poster{left:71%;top:8svh;width:100svh;height:75svh}body.model-unavailable[data-scene="control"] #poster{left:21%;top:-19svh;width:225svh;height:155svh}body.model-unavailable[data-scene="components"] #poster{left:73%;top:10svh;width:64svh;height:64svh}body.model-unavailable[data-scene="assembly"] #poster{left:68%;width:105svh;height:75svh;top:8svh}body.model-unavailable .stage[data-opaque="true"] #poster{mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,#000 38%,transparent 72%)}
body.is-wrapping,body.is-wrapping *{transition:none!important}html:has(body.is-wrapping){scroll-behavior:auto!important}
@media(max-width:1100px) and (min-width:761px){:root{--gutter:5vw}.editorial-copy{width:38%}h2{font-size:6.1vw}.control-copy h2{font-size:5.3vw}.body-copy{font-size:14px}}
@media (max-aspect-ratio:6/5), (max-width:760px) and (min-height:540px){:root{--gutter:24px}.hero-wordmark{top:24svh}.bottom-type{top:85svh}.panel{height:100svh}.components-section{height:400svh}.hero-copy{bottom:9svh;max-width:270px}.hero-tagline{font-size:16px}.hero-description{font-size:11px}.scroll-cue{bottom:8svh}.editorial-copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:16svh;width:auto;max-width:none}.eyebrow{font-size:9px;gap:14px;margin-bottom:16px}h2,.control-copy h2,.assembly-title{font-size:clamp(38px,11vw,56px);line-height:.99;margin-bottom:17px}.body-copy{font-size:12px;line-height:1.65;max-width:300px}.concept-copy{bottom:18svh}.finish-copy{bottom:18svh}.finish-picker{gap:12px;margin-top:21px}.finish-choice{font-size:10px;gap:10px;min-width:50px;min-height:61px}.swatch{width:27px;height:27px}.swatch:after{inset:-5px}.finish-caption{font-size:9px;margin-top:7px}.control-copy{left:24px;right:24px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));width:auto}.control-copy h2{font-size:38px}.control-copy .eyebrow{margin-bottom:12px}.volume-control{margin-top:16px;width:min(100%,350px)}.volume-label{font-size:11px;margin-bottom:4px}.volume-endpoints{font-size:9px}.audio-toggle{font-size:11px;margin-top:8px;min-height:40px}.audio-note{font-size:8px;margin-top:5px}.assembly-copy{left:24px;top:auto;bottom:16svh;width:calc(100% - 48px)}.assembly-copy .body-copy{max-width:220px}#brand-title{font-size:clamp(44px,14vw,64px)}.loading-status{max-width:calc(100% - 40px);top:8px;gap:10px;font-size:8px}.loading-status span{max-width:240px}.retry-button{font-size:8px;flex-shrink:0}#poster{width:142vw;height:68svh;top:11svh}body.model-unavailable:is([data-scene="concept"],[data-scene="finishes"]) #poster{left:50%;top:2svh;width:109vw;height:49svh}body.model-unavailable[data-scene="control"] #poster{left:44%;top:-9svh;width:195vw;height:71svh}body.model-unavailable[data-scene="components"] #poster{left:50%;top:15svh;width:75vw;height:44svh}body.model-unavailable[data-scene="assembly"] #poster{left:50%;width:110vw;height:51svh;top:3svh}
}
@media (max-height:720px) and (max-aspect-ratio:6/5), (max-height:720px) and (max-width:760px) and (min-height:540px){.audio-note{display:none}.control-copy h2{font-size:34px;margin-bottom:12px}.control-copy .body-copy{font-size:11px}.volume-control{margin-top:12px}.finish-copy{bottom:18svh}.finish-copy h2{font-size:36px}}
@media (max-height:650px) and (min-aspect-ratio:6/5){.editorial-copy{top:17svh}h2{font-size:58px}.control-copy h2{font-size:50px}.body-copy{font-size:13px}.eyebrow{margin-bottom:18px}.finish-picker{margin-top:20px}.volume-control{margin-top:20px}.audio-toggle{margin-top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Short landscape windows share the desktop columns, with a reserved type band. */
@media (max-height:540px) and (min-aspect-ratio:6/5){
 :root{--gutter:clamp(22px,5vw,100px)}
 .editorial-copy{top:12svh;width:38%;max-width:520px}
 h2,.control-copy h2,.assembly-title{font-size:clamp(28px,4.5vw,48px);line-height:1.02;margin-bottom:12px}
 .eyebrow{font-size:8px;margin-bottom:12px;gap:12px}.body-copy{font-size:11px;line-height:1.6}
 .finish-picker{margin-top:13px;gap:10px}.finish-choice{min-width:42px;min-height:54px;gap:8px;font-size:9px}.swatch{width:23px;height:23px}.finish-caption{margin-top:7px;font-size:9px}
 .volume-control{margin-top:12px;max-width:300px}.volume-label{font-size:10px;margin-bottom:2px}.volume-endpoints{font-size:8px}.audio-toggle{min-height:34px;font-size:10px;margin-top:5px}.audio-note{display:none}
 .hero-tagline{font-size:14px}.hero-description{font-size:10px}.hero-copy,.scroll-cue{bottom:8svh}.scroll-cue{width:40px;height:40px}.assembly-copy{top:14svh}
}

/* The concept word intentionally bleeds past the upper and left edges. */
.sound-wordmark{--sound-width:min(109vw,275svh);position:absolute;left:-8vw;top:calc(var(--sound-width) * -.096);width:var(--sound-width);height:auto;overflow:visible;fill:var(--ink);opacity:0;will-change:transform}
.concept-copy{top:auto;bottom:12svh}
/* Echo Sound's generous edge crop, anchored below the lower viewport edge. */
.tone-wordmark{--tone-width:112vw;position:absolute;right:-5vw;bottom:calc(var(--tone-width) * -.068);width:var(--tone-width);height:auto;overflow:visible;fill:var(--ink);opacity:0;will-change:transform}
.inside-wordmark{--inside-width:108vw;position:absolute;left:-4vw;top:auto;bottom:calc(var(--inside-width) * -.12);width:var(--inside-width);height:auto;overflow:visible;fill:var(--ink);opacity:0;will-change:transform}
@media (min-aspect-ratio:6/5) and (min-width:761px), (min-aspect-ratio:6/5) and (max-height:539px){
 .finish-copy{left:auto;right:var(--gutter);top:10svh}
 body.model-unavailable[data-scene="finishes"] #poster{left:29%}
}
html.auren-steps{scroll-behavior:auto}
html.auren-steps,html.auren-steps body,html.auren-steps #scene-canvas{touch-action:pinch-zoom}
html.auren-steps.is-free-scrolling,html.auren-steps.is-free-scrolling body,html.auren-steps.is-free-scrolling #scene-canvas{touch-action:pan-y pinch-zoom}
@media (max-aspect-ratio:6/5), (max-width:760px) and (min-height:540px){
 .sound-wordmark{left:-12vw;top:auto;bottom:84svh;width:clamp(86svh,132vw,114svh)}
 .concept-copy{bottom:18svh}
}
@media (max-height:540px) and (min-aspect-ratio:6/5){.concept-copy{bottom:9svh}}
@media (max-height:800px) and (min-aspect-ratio:6/5){.finish-copy{top:8svh}}
@media (max-height:540px) and (min-aspect-ratio:6/5){.finish-copy{top:6svh}.finish-copy .finish-picker{margin-top:9px}.finish-copy .finish-caption{margin-top:3px}}


/* Campaign photographs: static, readable figures are the baseline. */
.materials-panel {
  position: relative;
  z-index: 5;
  height: auto;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
  pointer-events: auto;
}
.gallery-heading {
  position: relative;
  z-index: 110;
  padding: 6svh var(--gutter) 30px;
  pointer-events: none;
}
.gallery-heading .eyebrow { margin-bottom: 13px; }
.gallery-heading h2 {
  font-size: clamp(30px,3.2vw,58px);
  line-height: 1;
  letter-spacing: -.055em;
  margin: 0;
}
.gallery-rail {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 32px 24px;
  width: calc(100% - var(--gutter) * 2);
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 60px;
}
.gallery-card { min-width: 0; margin: 0; }
.gallery-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
  background: #e7e3db;
  user-select: none;
  -webkit-user-drag: none;
}
.gallery-card figcaption {
  padding-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.gallery-footer { display: none; }
.gallery-enhanced .materials-panel {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
.gallery-enhanced .gallery-heading { position: absolute; inset: 0 0 auto; }
.gallery-enhanced .gallery-rail {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  perspective: 2000px;
  perspective-origin: 50% 52%;
  transform-style: preserve-3d;
}
.gallery-enhanced .gallery-card {
  position: absolute;
  left: 50%;
  top: 52%;
  transform-origin: center;
  will-change: transform;
  cursor: pointer;
}
.gallery-enhanced .gallery-card img {
  height: 100%;
  box-shadow: 0 16px 40px #29221b14;
}
.gallery-enhanced .gallery-card figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.gallery-enhanced .gallery-footer {
  position: absolute;
  z-index: 110;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(4svh,var(--safe-bottom));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.gallery-label { display: flex; align-items: baseline; gap: 24px; }
.gallery-count { font-size: 10px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--muted); }
.gallery-label p { font-size: 13px; line-height: 1.4; }
.gallery-navigation { display: flex; gap: 10px; }
.gallery-navigation button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #16171630;
  border-radius: 50%;
  background: var(--paper);
  pointer-events: auto;
}
.gallery-navigation button:hover:not(:disabled) { background: #e9e6df; }
.gallery-navigation button:disabled { opacity: .25; cursor: default; }
/* Touch devices: a decoded copy of the photograph, see gallery-raster.js. */
.gallery-raster { display:none; }
.gallery-enhanced .gallery-raster { display:block; position:absolute; inset:0; width:100%; height:100%; border-radius:18px; }
.gallery-enhanced .gallery-card.is-rastered img { visibility:hidden; }
.materials-panel:focus-visible { outline: 1px solid var(--copper); outline-offset: -5px; }
@media (max-width:760px) {
  .gallery-rail { grid-template-columns: 1fr; }
  .gallery-heading { padding-top: 6svh; }
  .gallery-heading h2 { font-size: 36px; }
  .gallery-label { display: block; }
  .gallery-label p { margin-top: 5px; font-size: 12px; }
  .gallery-enhanced .gallery-footer { gap: 12px; bottom: max(7svh,var(--safe-bottom)); }
  .gallery-navigation { gap: 7px; }
}
@media (max-height:540px) and (min-aspect-ratio:6/5) {
  .gallery-heading { padding-top: 4svh; }
  .gallery-heading .eyebrow { margin-bottom: 8px; font-size: 8px; }
  .gallery-heading h2 { font-size: 26px; }
  .gallery-enhanced .gallery-footer { bottom: 3svh; }
}


/* The assembled product remains in front of the centred, edge-cropped title. */
.together-wordmark {
  position: absolute;
  left: 50%;
  top: 50svh;
  width: 108vw;
  height: auto;
  overflow: visible;
  fill: var(--ink);
  opacity: 0;
  transform: translate(-50%,-50%);
  will-change: transform;
}

/* Logo animation as the loading screen. */
#auren-loader { position:fixed; inset:0; z-index:1000; overflow:hidden; background:#f3f1ed; transition:opacity .6s ease, visibility .6s; }
.loader-frame { position:absolute; inset:0; will-change:transform; }
#auren-loader video, #auren-loader canvas { display:block; width:100%; height:100%; object-fit:contain; }
#auren-loader canvas { position:absolute; inset:0; }
#auren-loader.is-done { opacity:0; visibility:hidden; pointer-events:none; }
html.auren-loading, html.auren-loading body { overflow:hidden !important; }
html.auren-loading { scrollbar-gutter:stable; }
html.auren-landing .type-plane { z-index:1001; }
html.auren-landing .stage { z-index:1002; }
/* iPhone: the body scrolls, so the browser bars stay in place (see page-scroll.js). */
html.inner-scroll { height:100%; overflow:hidden; overscroll-behavior:none; }
html.inner-scroll body { height:100%; height:100dvh; overflow:hidden auto; overscroll-behavior:none; }
/* Layout and framing stay on the stable small viewport, like the scroll timeline.
   Only the paint surfaces reach the real screen edge when Safari's bars collapse:
   the canvas is stable at the large viewport, and the type plane keeps inset:0 so
   cropped words are cut by the screen, not by a line above it. */
.stage { height:100vh; height:100lvh; bottom:auto; }
@media (max-aspect-ratio:6/5), (max-width:760px) and (min-height:540px) {
  :root { --gutter:max(24px,env(safe-area-inset-left),env(safe-area-inset-right)); }
  .sound-wordmark { left:-6vw; top:16svh; bottom:auto; translate:0 -100%; width:112vw; }
  .component-ui { bottom:max(calc(11svh + 12px),var(--safe-bottom)); }
  .control-copy,.assembly-copy { left:var(--gutter); right:var(--gutter); width:auto; }
  .assembly-copy { bottom:max(var(--safe-bottom),clamp(6svh,calc(37.5svh - 188px),16svh)); }
}
@media (max-height:540px) and (min-aspect-ratio:6/5) {
  .inside-wordmark { bottom:calc(var(--inside-width) * -.17); }
  .gallery-enhanced .gallery-footer { bottom:max(3svh,var(--safe-bottom)); }
}
@media (any-pointer:coarse), (max-width:760px) {
  .assembly-section { height:164svh; }
  #volume { height:44px; }
  .audio-toggle,.scroll-cue { min-height:44px; }
  .scroll-cue { min-width:44px; }
  .finish-choice { min-width:44px; min-height:44px; }
}

/* Portrait editorial slots: a generous product above compact, readable copy. */
@media (max-aspect-ratio:6/5), (max-width:760px) and (min-height:540px) {
  .concept-copy { top:63svh; bottom:auto; }
  .concept-copy h2 { font-size:clamp(38px,11vw,48px); margin-bottom:16px; }
  .concept-copy .body-copy { font-size:13px; line-height:1.6; max-width:310px; }
  .finish-copy { top:50svh; bottom:auto; }
  .finish-copy h2 { font-size:clamp(30px,9.2vw,40px); margin-bottom:14px; }
  .finish-copy h2 br { display:none; }
  .finish-copy .eyebrow { margin-bottom:12px; }
  .finish-copy .body-copy { font-size:13px; line-height:1.55; max-width:330px; }
  .finish-picker { margin-top:18px; gap:20px; }
  .finish-choice { min-width:44px; gap:8px; }
  .finish-caption { margin-top:8px; }
  .control-copy { top:54svh; bottom:auto; }
  .control-copy h2 { font-size:clamp(29px,8.3vw,36px); line-height:1.02; margin-bottom:14px; }
  .control-copy .body-copy { font-size:12px; line-height:1.55; }
  .control-copy .eyebrow { margin-bottom:12px; }
  .volume-control { margin-top:13px; }
  .audio-note { display:none; }
  .component-ui { top:59svh; bottom:auto; gap:14px; }
  .component-story { display:grid; grid-template-columns:1fr auto; max-width:none; }
  .component-story .eyebrow { grid-column:1; margin-bottom:15px; }
  .component-counter { grid-column:2; margin-bottom:15px; align-self:start; }
  .component-story h3 { grid-column:1 / -1; max-width:none; font-size:clamp(28px,8.2vw,34px); line-height:1.03; margin-bottom:12px; }
  .component-story>p:last-child { grid-column:1 / -1; max-width:340px; font-size:12px; line-height:1.55; }
  .component-controls { flex-wrap:nowrap; gap:4px; }
  .component-navigation { flex-wrap:nowrap; gap:0; }
  .component-next { flex-shrink:0; }
  .gallery-enhanced .gallery-rail { perspective:2400px; }
  .gallery-enhanced .gallery-card img { box-shadow:0 10px 24px #29221b0d; }
}
@media (max-width:380px) and (orientation:portrait) {
  .component-ui { top:59svh; }
  .finish-copy h2 { font-size:32px; }
}
@media (max-height:620px) and (orientation:portrait) {
  .control-copy { top:50svh; }
  .control-copy h2 { font-size:28px; margin-bottom:10px; }
  .control-copy .body-copy { font-size:11px; }
  .component-story h3 { font-size:27px; margin-bottom:10px; }
  .component-story>p:last-child { font-size:11px; line-height:1.45; }
  .component-story .eyebrow,.component-counter { margin-bottom:12px; }
  .component-ui { gap:10px; }
}

/* Optional portrait composition: the existing SVG masks turn with the word.
   Individual rotation leaves each word's animated transform independent. */
@media (max-width:760px) and (orientation:portrait) {
  html[data-mobile-type="vertical"] :is(.sound-wordmark,.tone-wordmark,.inside-wordmark) {
    --vertical-word-end:min(56svh,calc(82svh - 164px));
    left:-3vw;
    right:auto;
    top:var(--vertical-word-end);
    bottom:auto;
    width:calc(var(--vertical-word-end) + 5svh);
    height:auto;
    transform-origin:0 0;
    translate:none;
    rotate:-90deg;
  }
  html[data-mobile-type="vertical"] .tone-wordmark {
    --vertical-word-end:min(48svh,calc(82svh - 282px));
  }
  html[data-mobile-type="vertical"] .inside-wordmark {
    /* Clear the longest compact story without resizing between parts. */
    --vertical-word-end:min(56svh,calc(89svh - 250px));
  }
}

/* The gallery: a wall of arched windows under a large trimmed heading. Only the photographs remain. */
.gallery-card figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.gallery-inner { display:contents; }
.closer-wordmark { display:block; width:100%; height:auto; overflow:visible; fill:var(--ink); }
.gallery-enhanced .materials-panel { overflow:hidden; }
.gallery-enhanced .gallery-heading { z-index:0; padding:0; }
.gallery-enhanced .closer-wordmark { width:97vw; margin:5svh 0 0 1.5vw; opacity:0; will-change:transform; }
.gallery-enhanced .closer-wordmark.is-stacked { width:92vw; margin:6svh 0 0 4vw; }
.gallery-enhanced .gallery-rail { z-index:1; perspective:none; transform-style:flat; }
.gallery-enhanced .gallery-card { left:0; top:0; overflow:hidden; background:#e7e3db; }
.gallery-enhanced .gallery-inner { display:block; position:absolute; left:0; top:-8%; width:100%; height:116%; will-change:transform; }
.gallery-enhanced .gallery-card img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; }
.gallery-enhanced .gallery-raster { border-radius:0; }

/* As little on screen as possible: larger editorial text, nothing that counts steps. */
.body-copy { font-size:clamp(15px,1.28vw,21px); line-height:1.55; letter-spacing:-.005em; color:#55564f; max-width:30em; }
.finish-lead { font-family:Auren Geo,Arial,sans-serif; font-weight:700; font-size:clamp(25px,2.5vw,44px); line-height:1.06; letter-spacing:-.04em; color:var(--ink); margin:0 0 16px; }
.finish-note { margin:0; }
#component-description { font-size:clamp(15px,1.28vw,21px); line-height:1.55; letter-spacing:-.005em; color:#55564f; }
.editorial-copy > * { translate:0 calc((1 - var(--arrive,1)) * var(--rise,0px)); }
.editorial-copy > :nth-child(2) { --rise:14px; }
.editorial-copy > :nth-child(3) { --rise:26px; }
.editorial-copy > :nth-child(n+4) { --rise:38px; }
.finish-picker { gap:24px; margin-top:32px; }
.finish-choice { font-size:12.5px; gap:13px; }
.swatch { width:36px; height:36px; }
.component-navigation { gap:2px; }
.component-navigation button { min-width:38px; padding:0; }
.component-navigation button:after { left:7px; right:7px; top:50%; bottom:auto; height:2px; border-radius:2px; opacity:.16; transform:none; transition:opacity .3s; }
.component-navigation button:hover:after { opacity:.4; }
.component-navigation button.is-active:after { opacity:1; transform:none; }
@media (max-width:760px), (max-aspect-ratio:6/5) {
  .editorial-copy .body-copy, .assembly-copy .body-copy { font-size:15px; line-height:1.5; }
  #component-description { font-size:15px; line-height:1.5; }
  .finish-lead { font-size:clamp(25px,7.2vw,36px); margin-bottom:11px; }
  .finish-picker { gap:18px; margin-top:20px; }
  .swatch { width:32px; height:32px; }
}
@media (max-height:720px) and (max-aspect-ratio:6/5), (max-height:720px) and (max-width:760px) and (min-height:540px) {
  .editorial-copy .body-copy, .assembly-copy .body-copy, #component-description { font-size:14px; line-height:1.45; }
  .finish-lead { font-size:24px; margin-bottom:8px; }
  .finish-picker { gap:14px; margin-top:12px; }
}
@media (max-height:540px) and (min-aspect-ratio:6/5) {
  .editorial-copy .body-copy, .assembly-copy .body-copy, #component-description { font-size:12.5px; line-height:1.45; }
  .finish-lead { font-size:clamp(18px,3vw,26px); margin-bottom:6px; }
  .finish-picker { gap:10px; margin-top:10px; }
  .swatch { width:23px; height:23px; }
}

/* The crown is the volume control: an arc around it, one large number, and waves that follow the music. */
.crown-dial { position:fixed; left:0; top:0; z-index:4; width:120px; height:120px; border-radius:50%; opacity:0; pointer-events:none; touch-action:none; cursor:grab; transition:opacity .35s ease; -webkit-tap-highlight-color:transparent; user-select:none; }
.crown-dial::before { content:''; position:absolute; inset:-22px; border-radius:50%; }
.crown-dial.is-on { opacity:1; pointer-events:auto; }
.crown-dial.is-held { cursor:grabbing; }
.crown-dial:focus-visible { outline:2px solid var(--copper); outline-offset:2px; }
.crown-dial svg { display:block; width:100%; height:100%; overflow:visible; }
.crown-dial circle { fill:none; }
.dial-track { stroke:#ffffff; stroke-opacity:.42; stroke-width:1; stroke-linecap:round; }
.dial-arc { stroke:#9a4f22; stroke-width:1.9; stroke-linecap:round; }
.dial-dot { fill:#9a4f22 !important; stroke:#fff; stroke-width:.8; }
.crown-dial.is-on:not(.was-touched) .dial-dot { transform-box:fill-box; transform-origin:center; animation:dial-hint 1.9s ease-in-out infinite; }
@keyframes dial-hint { 0%,100% { transform:scale(1); } 50% { transform:scale(1.7); } }
.crown-waves { position:fixed; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.crown-wave { position:absolute; display:block; box-sizing:border-box; border:1.6px solid var(--copper); border-radius:50%; opacity:0; }
.volume-readout { display:none; margin:26px 0 0; font-family:Auren Geo,Arial,sans-serif; font-weight:700; font-size:clamp(72px,8.4vw,150px); line-height:.86; letter-spacing:-.06em; color:var(--ink); font-variant-numeric:tabular-nums; pointer-events:none; }
#volume-big { display:inline-block; transform-origin:left bottom; }
body.model-ready .volume-readout { display:block; }
body.model-ready .volume-control { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); pointer-events:none; }
.audio-toggle { margin-top:22px; }
@media (prefers-reduced-motion:reduce) { .crown-dial.is-on:not(.was-touched) .dial-dot { animation:none; } }
@media (max-width:760px), (max-aspect-ratio:6/5) {
  .volume-readout { font-size:clamp(58px,17vw,84px); margin-top:14px; }
  .audio-toggle { margin-top:12px; }
}
@media (max-height:720px) and (max-aspect-ratio:6/5), (max-height:720px) and (max-width:760px) and (min-height:540px) {
  .volume-readout { font-size:52px; margin-top:8px; }
  .audio-toggle { margin-top:6px; }
}
@media (max-height:540px) and (min-aspect-ratio:6/5) {
  .volume-readout { font-size:44px; margin-top:6px; }
  .audio-toggle { margin-top:4px; }
}

/* On iPhone the body scrolls and the stage is fixed, so a touch on the closing shot could move nothing at all. */
html.inner-scroll.is-free-scrolling #scene-canvas { pointer-events:none; }
/* The dial has to be seen at a glance on a phone. */
@media (max-width:760px), (max-aspect-ratio:6/5) {
  .dial-track { stroke-opacity:.72; stroke-width:1.5; }
  .dial-arc { stroke-width:2.9; }
  .crown-dial.is-on:not(.was-touched) .dial-dot { animation-name:dial-hint-strong; }
}
@keyframes dial-hint-strong { 0%,100% { transform:scale(1.25); } 50% { transform:scale(2.2); } }