/* Full-width renovation stage; the introduction scrolls away before the scene pins. */
.renovation-journey{--room-ink:#f4f2ec;--room-muted:#bcc0b8;position:relative;background:#292f2c;color:var(--room-ink);isolation:isolate}
.reno-heading{max-width:1520px;margin-inline:auto;padding:52px 50px 30px;display:grid;grid-template-columns:1.2fr 1fr;gap:7vw;align-items:end}
.reno-heading .eyebrow{color:#c6cac1;margin-bottom:18px}.reno-heading h2{font-size:clamp(32px,3.25vw,51px);line-height:1.35;margin:0}.reno-heading h2 em{display:block;font-style:normal;color:#ff8072}
.reno-intro{font-size:16px;line-height:1.9;color:var(--room-muted);margin:0;max-width:48ch}
.reno-hint{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.8;color:#c6cac1;margin:18px 0 0}.reno-hint>span:first-child{color:#ff8072;font-size:22px}
.reno-archive-link{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:44px;border-bottom:1px solid #7b817a;font-size:14px;line-height:1.7;margin-top:8px}.reno-archive-link>span{color:#ff8072;font-size:22px}.reno-archive-link:hover{color:#ff8072}
.reno-track{position:relative}.reno-panel{max-width:1720px;margin-inline:auto;padding:12px 28px 16px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;background:#292f2c}
.is-reno-scroll .reno-track{height:var(--reno-scene-height,auto)}.is-reno-scroll .reno-panel{position:sticky;top:var(--header-height)}
.reno-figure{width:100%;min-width:0;margin:0}.reno-art{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#41443d;border:1px solid #62665f}
.reno-layer{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}.reno-layer:last-of-type{opacity:1}.reno-layer img{position:absolute;display:block;width:200%;height:200%;max-width:none;left:0;top:0;user-select:none;-webkit-user-drag:none}
.reno-layer[data-reno-frame="1"] img{left:-100%}.reno-layer[data-reno-frame="2"] img{top:-100%}.reno-layer[data-reno-frame="3"] img{left:-100%;top:-100%}
.reno-scan{position:absolute;top:0;bottom:0;width:1px;background:#fff3d9;box-shadow:0 0 14px #fff5de66;opacity:0;pointer-events:none}
.reno-figure figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px 20px;padding:10px 0}.reno-stage-name{display:block;font-size:16px;line-height:1.6}.reno-concept{font-size:12px;line-height:1.7;color:var(--room-muted);text-align:right}
/* Keep the detailed stage description available to assistive technology without shrinking the image. */
.reno-stage-detail{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.reno-progress{width:100%;min-width:0}.reno-progress-line{height:1px;background:#596056;overflow:hidden}.reno-progress-line>span{display:block;width:100%;height:100%;background:#ff8072;transform:scaleX(var(--reno-progress,1));transform-origin:left}
.reno-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:12px 0 0}
.reno-stages button{position:relative;text-align:left;min-height:44px;border:0;background:none;color:#bfc4bb;padding:0 0 10px;line-height:1.65;font-size:17px;font-weight:300;cursor:pointer}.reno-stages button::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:30px;background:#ff8072;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.reno-stages button[aria-pressed="true"]{color:#fff}.reno-stages button[aria-pressed="true"]::after{transform:scaleX(1)}.reno-stages button:hover{color:#ff8072}.reno-stages button:disabled{cursor:default}.renovation-journey :focus-visible{outline-color:#ff8072}
/* Preserve the entire 3:2 frame while using the available screen height for the image. */
.is-reno-scroll .reno-figure,.is-reno-scroll .reno-progress{width:min(100%,var(--reno-frame-width,calc((100svh - var(--header-height) - 152px) * 1.5)))}
@media(max-width:1100px){.reno-heading{padding-inline:32px;gap:4vw}.reno-heading h2{font-size:34px}.reno-stages{gap:14px}.reno-stages button{font-size:15px}}
@media(max-width:760px){.reno-heading{display:block;padding:32px 20px 20px}.reno-heading .eyebrow{font-size:12px;margin-bottom:10px}.reno-heading h2{font-size:clamp(29px,6vw,39px);line-height:1.35}.reno-heading h2 em{display:inline}.reno-intro{display:none}.reno-hint{margin-top:14px;font-size:14px}.reno-archive-link{font-size:14px;margin-top:6px;min-height:44px}.reno-panel{padding:8px 12px 16px}.reno-figure figcaption{display:block;padding:10px 4px}.reno-stage-name{font-size:15px}.reno-concept{display:block;font-size:12px;margin-top:4px;text-align:left}.reno-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 20px;padding:10px 4px 0}.reno-stages button{font-size:15px;min-height:44px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.is-reno-scroll .reno-track{height:auto}.reno-panel{position:relative!important}.reno-scan{display:none}.reno-stages button::after{transition:none}}
