/* Technical presentation; isolated from the shared shell and the room editor. */
.acustiroom-presentation { background: #080d10; }
.room-story { --room-ink: #080d10; --room-line: #a9c2ce; --room-muted: #a3afb6; --room-accent: #ed853b; color: #edf2f4; }
.room-story :where(h1,h2,h3,p,figure) { margin: 0; }
.room-story p { line-height: 1.65; }
.room-kicker, .room-step-number, .room-step-tag, .room-intro-index, .room-view-label, .room-drawing-header { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.room-kicker { font-size: 11px; letter-spacing: .16em; line-height: 1.6; font-weight: 400; color: var(--room-accent); }
.room-intro { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 900px; min-height: max(850px,100svh); padding: 185px clamp(24px,6vw,100px) 140px; background: radial-gradient(ellipse at 76% 51%,#19283280,transparent 56%),#080d10; }
.room-intro::before { position: absolute; z-index: -2; inset: 0; content: ""; background-image: linear-gradient(#8ca4b707 1px,transparent 1px),linear-gradient(90deg,#8ca4b707 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg,transparent,#000); pointer-events: none; }
.room-intro-copy { position: relative; z-index: 2; width: 48%; max-width: 680px; }
.room-intro-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 32px !important; }
.room-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--room-accent); box-shadow: 0 0 12px #ed853b60; }
.room-intro h1 { font-size: clamp(52px,6.3vw,100px); line-height: 1.04; letter-spacing: -.06em; font-weight: 350; }
.room-intro h1 em { color: var(--room-accent); font-style: normal; }
.room-lead { max-width: 380px; margin-top: 30px !important; font-size: 17px; color: #aebbc2; }
.room-explore { display: inline-flex; align-items: center; gap: 28px; min-height: 48px; margin-top: 30px; padding: 12px 0; border-bottom: 1px solid #5d6f79; font-size: 13px; color: #e3eaed; }
.room-explore:hover { border-color: var(--room-accent); color: #fff; }
.room-explore > span:last-child { color: var(--room-accent); font-size: 22px; }
.room-intro-visual { position: absolute; z-index: 1; right: 0; top: 145px; width: 66%; max-width: 1220px; perspective: 1100px; overflow: clip; pointer-events: none; }
.room-scene { transform: rotateX(var(--depth-y,0deg)) rotateY(var(--depth-x,0deg)); transform-origin: 55% 52%; transition: transform .45s ease-out; }
.room-blueprint { display: block; width: 100%; height: auto; overflow: visible; }
.room-blueprint path { stroke-linejoin: round; stroke-linecap: round; }
.blueprint-grid { stroke: #a5c5d2; stroke-width: .65; opacity: .12; }
.blueprint-structure { stroke: #b0c9d5; stroke-width: 1; }
.blueprint-wall { fill: #8ab5c605; stroke-opacity: .44; }
.blueprint-floor { fill: #64869704; stroke-opacity: .65; }
.blueprint-hidden { stroke-dasharray: 5 10; stroke-opacity: .16; }
.blueprint-opening { stroke-opacity: .48; }
.blueprint-window { fill: #a8d6e307; stroke-opacity: .48; }
.blueprint-module-back { stroke-opacity: .22; }
.blueprint-furniture { stroke: #b3cbd5; stroke-width: 1; opacity: .34; }
.blueprint-projecting { stroke: #ef9652; stroke-width: 1.4; filter: drop-shadow(0 0 5px #e6812425); }
.blueprint-module path:first-child { fill: #e9863110; }
.blueprint-module path:nth-child(2) { fill: #e986310a; }
.blueprint-connection { stroke-dasharray: 3 6; opacity: .4; stroke-width: .8; }
.blueprint-dimensions { stroke: #b9d7e4; stroke-width: .8; opacity: .44; }
.blueprint-dimensions circle { fill: #c5dce6; stroke: none; }
.room-view-label { position: absolute; top: 16%; right: 10%; display: flex; align-items: center; gap: 10px; color: #93aab6; font-size: 9px; letter-spacing: .12em; }
.room-cross { position: relative; width: 15px; height: 15px; }
.room-cross::before, .room-cross::after { content: ""; position: absolute; background: #90a5b0; }
.room-cross::before { top: 7px; left: 0; width: 15px; height: 1px; }
.room-cross::after { top: 0; left: 7px; width: 1px; height: 15px; }
.room-intro-visual figcaption { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; margin: -32px 30px 0; color: #8fa1ac; font-size: 11px; line-height: 1.5; }
.room-intro-index { position: absolute; bottom: 45px; left: 6vw; right: 6vw; display: flex; align-items: center; gap: 24px; color: #8899a4; font-size: 9px; letter-spacing: .12em; }
.room-index-line { flex: 1; height: 1px; background: #9db3bf26; }
.room-process { padding: 100px max(24px,8vw) 70px; background: #0b1115; border-block: 1px solid #9db3bf26; scroll-margin-top: 32px; }
.room-section-heading { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 12%; align-items: end; max-width: 1180px; margin: auto; }
.room-section-heading .room-kicker { grid-column: 1/-1; margin-bottom: 26px; }
.room-section-heading h2 { max-width: 530px; font-size: clamp(34px,3.7vw,56px); line-height: 1.13; letter-spacing: -.04em; font-weight: 350; }
.room-section-heading > p:last-child { max-width: 375px; font-size: 16px; color: var(--room-muted); }
.room-steps { list-style: none; max-width: 1180px; padding: 0; margin: 64px auto 0; }
.room-steps li { display: grid; grid-template-columns: 100px minmax(0,1fr) 165px; gap: 28px; align-items: start; padding: 34px 0; border-top: 1px solid #9db3bf26; }
.room-step-number { font-size: 13px; line-height: 2.2; color: var(--room-accent); }
.room-steps h3 { font-size: clamp(23px,2.3vw,31px); line-height: 1.2; font-weight: 400; margin-bottom: 12px; letter-spacing: -.02em; }
.room-steps p { max-width: 600px; color: var(--room-muted); font-size: 15px; }
.room-step-tag { font-size: 9px; letter-spacing: .1em; text-align: right; padding-top: 8px; color: #a0b2bd; }
.room-handover { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 10%; align-items: center; padding: 110px max(24px,8vw); background: #080d10; }
.room-handover .room-kicker { margin-bottom: 24px; }
.room-handover h2 { font-size: clamp(36px,4vw,60px); line-height: 1.08; letter-spacing: -.04em; font-weight: 350; margin-bottom: 26px; }
.room-handover-copy > p:not(.room-kicker) { font-size: 16px; color: #b0bbc3; }
.room-handover-copy .room-handover-note { font-size: 13px !important; margin-top: 22px; color: #94a5b0 !important; }
.room-project-drawing { padding: 24px 0; border-block: 1px solid #9db3bf36; }
.room-drawing-header { display: flex; justify-content: space-between; gap: 16px; font-size: 9px; letter-spacing: .12em; color: #a0b2bd; }
.room-project-drawing svg { display: block; width: 100%; margin: 22px 0; }
.drawing-guides { stroke: #a9c2ce; opacity: .14; stroke-width: .7; stroke-dasharray: 4 6; }
.drawing-outline { stroke: #a9c2ce; opacity: .65; stroke-width: 1; }
.drawing-panels { stroke: #ed853b; stroke-width: 2; }
.drawing-dimensions { stroke: #a9c2ce; opacity: .4; stroke-width: .8; }
.room-project-drawing figcaption { color: #94a5b0; font-size: 11px; line-height: 1.5; }
.room-start { position: relative; isolation: isolate; padding: 110px 24px 120px; text-align: center; border-top: 1px solid #9db3bf26; background: radial-gradient(ellipse at 50% 100%,#1b2b3550,transparent 70%),#0b1115; }
.room-start::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg,transparent calc(50% - .5px),#9db3bf0d 50%,transparent calc(50% + .5px)); background-size: 140px 100%; pointer-events: none; }
.room-start .room-kicker { margin-bottom: 26px; }
.room-start h2 { font-size: clamp(40px,5vw,76px); line-height: 1.06; letter-spacing: -.045em; font-weight: 350; }
.room-start > p:not(.room-kicker) { max-width: 560px; margin: 25px auto 0; color: #a3b1ba; }
.room-start-button { display: inline-flex; align-items: center; justify-content: center; gap: 34px; max-width: 100%; min-height: 60px; margin-top: 34px; padding: 18px 28px; border: 1px solid #ef9859; border-radius: 0; background: #ed853b; color: #0b1115; box-shadow: none; font-size: 14px; letter-spacing: .04em; font-weight: 750; }
.room-start-button:hover { background: #ffa363; }
.room-start-button > span { font-size: 14px; font-weight: 750; line-height: 1.2; }
.room-start-button > span:last-child { font-size: 24px; font-weight: 400; }
.room-start .room-start-note { font-size: 12px; }
.acustiroom-presentation .site-footer { background: #080d10; }
.room-story a:focus-visible { outline: 2px solid #ef9859; outline-offset: 6px; }
@media (min-width: 1800px) { .room-intro { padding-left: max(80px,calc((100vw - 1600px)/2)); padding-right: max(80px,calc((100vw - 1600px)/2)); } .room-intro-visual { right: max(0px,calc((100vw - 1860px)/2)); top: 160px; } }
@media (max-width: 1050px) { .room-intro { min-height: 810px; padding-top: 175px; } .room-intro h1 { font-size: clamp(47px,6.4vw,65px); } .room-intro-copy { width: 51%; } .room-lead { max-width: 325px; font-size: 16px; } .room-intro-visual { width: 65%; top: 215px; opacity: .85; } .room-view-label { right: 7%; } .room-section-heading { column-gap: 6%; } .room-steps li { grid-template-columns: 75px minmax(0,1fr) 125px; gap: 20px; } .room-handover { gap: 7%; padding-inline: 6vw; } }
@media (max-width: 820px) { .room-intro { display: block; padding: 165px 28px 85px; min-height: auto; } .room-intro-copy { width: 100%; max-width: 600px; } .room-intro h1 { font-size: clamp(52px,8.4vw,72px); } .room-intro-kicker { margin-bottom: 24px !important; } .room-lead { max-width: 470px; font-size: 17px; } .room-intro-visual { position: relative; top: auto; right: auto; width: 100%; max-width: 650px; margin: 0 auto !important; opacity: 1; } .room-intro-visual figcaption { margin-top: -18px; } .room-view-label { top: 14%; right: 8%; font-size: 8px; } .room-intro-index { bottom: 24px; left: 28px; right: 28px; gap: 16px; font-size: 8px; } .room-intro-index > span:last-child { display: none; } .room-process { padding: 70px 28px 50px; } .room-section-heading { grid-template-columns: 1fr; gap: 22px; } .room-section-heading .room-kicker { margin: 0; } .room-section-heading > p:last-child { max-width: 520px; } .room-steps { margin-top: 44px; } .room-steps li { grid-template-columns: 45px minmax(0,1fr); gap: 18px; } .room-step-tag { display: none; } .room-handover { padding: 75px 28px; grid-template-columns: 1fr; gap: 40px; } .room-handover-copy { max-width: 600px; } .room-project-drawing { width: 100%; max-width: 500px; margin: auto !important; } .room-start { padding: 80px 28px; } }
@media (max-width: 430px) { .room-intro { padding: 145px 22px 76px; } .room-intro h1 { font-size: clamp(43px,12.5vw,53px); } .room-intro-kicker { font-size: 9px; letter-spacing: .12em; } .room-lead { font-size: 15px; margin-top: 24px !important; } .room-explore { margin-top: 18px; font-size: 12px; gap: 20px; } .room-intro-visual { margin-top: 16px !important; } .room-view-label { font-size: 6px; top: 9%; } .room-cross { display: none; } .room-intro-visual figcaption { margin: -5px 12px 0; font-size: 10px; text-align: center; } .room-intro-visual .room-dot { display: none; } .room-intro-index { left: 22px; right: 22px; } .room-process { padding: 56px 22px 30px; } .room-section-heading h2 { font-size: 34px; } .room-steps li { grid-template-columns: 26px minmax(0,1fr); gap: 16px; padding: 28px 0; } .room-step-number { font-size: 11px; } .room-steps h3 { font-size: 23px; } .room-steps p { font-size: 15px; } .room-handover { padding: 58px 22px; } .room-start { padding: 66px 22px; } .room-start h2 { font-size: 42px; } .room-start-button { width: 100%; padding: 15px 18px; gap: 16px; } .room-start-button > span:first-child { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { html:has(.room-story) { scroll-behavior: auto; } .room-scene { transform: none; transition: none; } }