/* Separate story: the camera stays inside; both damage examples have their own entry. */
.option-b.hero{height:510svh;background:#e9e7e2}.option-b .depth-stage{min-height:0}.option-b.hero.is-pending{height:510svh}.option-b.is-pending .depth-stage{position:sticky;top:105px}.option-b.is-pending .static-story{display:none}
.case-switch{position:absolute;z-index:6;top:24px;right:var(--gutter);display:flex;align-items:center;gap:3px;padding:5px;background:#f3f4f4f5;border:1px solid #cbd1d7}
.case-switch>span{font-size:10px;letter-spacing:.1em;margin:0 12px;font-weight:600}.case-switch a{font-size:13px;min-height:44px;display:flex;align-items:center;padding:10px 16px;color:#183a6f;border:1px solid transparent}.case-switch a[aria-current]{background:#183a6f;color:#fff}.case-switch a:hover{border-color:#183a6f}.case-switch a:focus-visible{outline:3px solid #487ec3;outline-offset:2px}
.option-b .depth-copy{top:18%;max-width:740px}.option-b .depth-copy h1{font-size:clamp(49px,5.2vw,80px);line-height:1.02;letter-spacing:-.035em}.option-b .depth-copy .eyebrow{font-size:12px;text-transform:uppercase;margin-bottom:19px}.option-b .depth-description{font-size:16px;line-height:1.6}.option-b .hero-shade{background:linear-gradient(110deg,#f3f4f4f5 0%,#f3f4f4e6 20%,#f3f4f455 49%,#f3f4f400 70%)}
.option-b .chapter-note{width:300px;bottom:83px;top:auto;padding:20px 24px}.option-b .chapter-number{display:block;font-size:11px;letter-spacing:.08em}.option-b .chapter-description{font-size:16px;line-height:1.45;margin-top:12px}.option-b .chapter-note>a{min-height:42px;align-items:center;margin-top:15px;font-size:12px}.option-b .depth-floor{z-index:7;min-height:58px}.option-b .depth-floor>a{font-size:11px}.option-b .depth-floor>span{font-size:11px}.option-b .depth-progress{margin-left:auto}.story-context{font-size:13px;margin-top:24px;max-width:760px}
.mp-footer small>a{margin-left:20px}
@media(max-width:1100px) and (min-width:821px){.case-switch{top:18px}.option-b .depth-copy{top:20%;max-width:610px}.option-b .chapter-note{bottom:75px;width:270px;padding:17px 20px}.option-b .chapter-description{font-size:15px}}
@media(max-width:820px){.option-b.hero,.option-b.hero.is-pending{height:470svh}.option-b .depth-stage,.option-b.is-pending .depth-stage{top:86px}.case-switch{top:0;left:0;right:0;justify-content:center;gap:8px;padding:7px 20px;border-inline:0;border-top:0;background:#f3f4f4}.case-switch>span{display:none}.case-switch a{flex:1;justify-content:center;max-width:240px;font-size:13px;min-height:42px;padding:9px 8px}.option-b .depth-copy{top:80px;left:24px;right:24px;max-width:610px}.option-b .depth-copy h1{font-size:clamp(36px,6.2vw,58px);line-height:1.04}.option-b .depth-copy .eyebrow{font-size:12px;letter-spacing:.06em;margin-bottom:16px}.option-b .depth-description{font-size:14px;line-height:1.45;margin-top:16px}.option-b .depth-copy .button{min-height:44px;font-size:12px;margin-top:17px}.option-b .scene-viewport{top:28%;bottom:68px}.option-b .hero-shade{background:linear-gradient(#f3f4f4 0%,#f3f4f4 25%,#f3f4f400 60%)}.option-b .chapter-note{top:75px;left:24px;right:24px;bottom:auto;width:auto;padding:14px 18px;max-width:550px}.option-b .chapter-number{font-size:11px}.option-b .chapter-description{font-size:15px;margin-top:5px}.option-b .chapter-note>a{display:none}.option-b .depth-floor{min-height:68px;gap:5px 12px;padding:9px 24px}.option-b .depth-floor>a,.option-b .depth-floor>span{font-size:11px}.option-b .depth-floor>span{width:100%}.option-b .depth-progress{width:60px;margin-left:auto}}
@media(max-width:580px){.option-b .depth-copy{top:77px}.option-b .depth-copy h1{font-size:clamp(31px,9vw,45px)}.option-b .depth-copy .eyebrow{font-size:11px;line-height:1.5}.option-b .scene-viewport{top:30%;bottom:70px}.option-b .hero-shade{background:linear-gradient(#f3f4f4 0%,#f3f4f4 31%,#f3f4f400 62%)}.option-b .chapter-note{top:72px;padding:12px 15px}.option-b .chapter-description{font-size:14px;line-height:1.4}.option-b .depth-floor>a,.option-b .depth-floor>span{font-size:10px}.option-b .depth-copy h1 em::before{content:none}}
@media(max-width:580px) and (max-height:680px){.option-b .depth-copy{top:73px}.option-b .depth-copy .eyebrow{margin-bottom:11px}.option-b .depth-copy h1{font-size:clamp(29px,9vw,37px)}.option-b .depth-description{display:none}.option-b .depth-copy .button{margin-top:13px}.option-b .scene-viewport{top:32%}.option-b .chapter-description{font-size:13px}.option-b .chapter-number{font-size:10px}.option-b .hero-shade{background:linear-gradient(#f3f4f4 0%,#f3f4f4 35%,#f3f4f400 70%)}}
@media(prefers-reduced-motion:reduce){.option-b.hero,.option-b.hero.is-pending{height:auto}.option-b .depth-stage,.option-b.is-pending .depth-stage{position:relative;top:0;height:760px}.option-b .static-story{display:block}.option-b .chapter-note{display:none!important}}
.option-b.static-mode.hero{height:auto}.option-b.static-mode .depth-stage{position:relative;top:0;height:760px}.option-b.static-mode .static-story{display:block}
@media(max-height:500px) and (orientation:landscape){.option-b.hero,.option-b.hero.is-pending{height:auto!important}.option-b .depth-stage,.option-b.is-pending .depth-stage{position:relative;top:0;height:640px}.option-b .case-switch{justify-content:flex-end}.option-b .depth-copy{top:115px;max-width:600px}.option-b .depth-copy h1{font-size:45px}.option-b .scene-viewport{top:0;bottom:68px}.option-b .hero-shade{background:linear-gradient(100deg,#f3f4f4f0 0%,#f3f4f4a0 40%,transparent 85%)}.option-b .static-story{display:block}.option-b .chapter-note{display:none!important}}

/* Keep the progress label on one readable line and leave the drying equipment visible. */
.option-b .depth-floor>a .journey-label{display:inline;width:auto;height:auto;border:0;border-radius:0;font-size:11px;line-height:1.4;white-space:nowrap}
.option-b .chapter-note{left:auto;right:var(--gutter)}.option-b .chapter-number{display:none}.option-b .chapter-description{margin-top:0}
@media(max-width:820px){.option-b .chapter-note{left:24px;right:24px}.option-b .scene-viewport{top:190px}.option-b .hero-shade{background:linear-gradient(#f3f4f4 0,#f3f4f4 260px,#f3f4f400 410px)}}
@media(max-width:580px){.option-b .depth-floor>a .journey-label{font-size:10px}.option-b .scene-viewport{top:180px}}
@media(max-width:580px) and (max-height:680px){.option-b .scene-viewport{top:165px}.option-b .hero-shade{background:linear-gradient(#f3f4f4 0,#f3f4f4 185px,#f3f4f400 320px)}}
@media(max-height:500px) and (orientation:landscape){.option-b .scene-viewport{top:0}}

@media(prefers-reduced-motion:reduce){.option-b.is-pending .static-story{display:block}}
@media(max-height:500px) and (orientation:landscape){.option-b.is-pending .static-story{display:block}}

.original-pair{grid-template-columns:1fr 1fr;align-items:start}.original-pair .project img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}.original-pair .project:nth-child(2){margin-top:120px}.original-pair figcaption{min-height:125px}
@media(max-width:820px){.original-pair .project:nth-child(2){margin-top:60px}}
@media(max-width:580px){.original-pair{grid-template-columns:1fr}.original-pair .project:nth-child(2){margin-top:0}}

/* Identical static layout before and after texture initialization. */
@media(prefers-reduced-motion:reduce),(max-height:500px) and (orientation:landscape){.option-b .static-story,.option-b.is-pending .static-story{display:block;padding:40px var(--gutter);background:#e9edf0}.option-b .static-story ol,.option-b.is-pending .static-story ol{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:26px;margin:25px 0 0}.option-b .static-story li{flex:1 1 150px;font-size:14px}.option-b .static-story strong{display:block;color:var(--blue);margin-bottom:6px}}

.option-b .chapter-note{opacity:0}.option-b:not(.scene-ready) .chapter-note{visibility:hidden}

/* Bound ultrawide crop to keep both accepted openings visible. */
@media(min-width:821px){.option-b .scene-viewport{max-width:calc((100svh - 163px)*2.2);margin-inline:auto}.option-b .depth-stage{background:#e9e7e2}}

/* Mobile alpha intro v3: compact copy blends into the room; fixed grid rows while scrolling. */
@media(max-width:820px) and (min-height:501px){
 .option-b .depth-stage{--intro-overlap:54px;--intro-fade:112px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 68px;background:#f3f4f4}
 .option-b .depth-copy{position:relative;inset:auto;grid-column:1;grid-row:1;margin:18px 24px 16px;max-width:none}
 .option-b .depth-copy .eyebrow{font-size:10px;line-height:1.4;letter-spacing:.04em;margin-bottom:9px}
 .option-b .depth-copy h1{font-size:clamp(29px,8.7vw,40px);line-height:1.02}
 .option-b .depth-description{display:block;font-size:12px;line-height:1.4;margin-top:10px}
 .option-b .depth-copy .button{min-height:40px;font-size:12px;margin-top:12px;padding:10px 16px}
 .option-b .scene-viewport{position:relative;inset:auto;grid-column:1;grid-row:2;min-height:0;width:100%;height:calc(100% + var(--intro-overlap));margin-top:calc(-1 * var(--intro-overlap));max-width:none}
 .option-b .hero-shade{display:block;position:relative;inset:auto;grid-column:1;grid-row:2;align-self:start;height:var(--intro-fade);margin-top:calc(-1 * var(--intro-overlap));z-index:2;pointer-events:none;background:linear-gradient(180deg,#f3f4f4 0%,rgb(243 244 244 / .88) 22%,rgb(243 244 244 / .48) 53%,rgb(243 244 244 / .12) 78%,rgb(243 244 244 / 0) 100%)}
 .option-b .depth-floor{position:relative;inset:auto;grid-column:1;grid-row:3;min-height:68px}
}
@media(max-width:580px) and (min-height:501px) and (max-height:680px){
 .option-b .depth-stage{--intro-overlap:40px;--intro-fade:88px}
 .option-b .depth-copy{margin:12px 24px}
 .option-b .depth-copy .eyebrow{font-size:9px;margin-bottom:7px}
 .option-b .depth-copy h1{font-size:clamp(27px,8.4vw,33px)}
 .option-b .depth-description{font-size:11px;line-height:1.3;margin-top:8px}
 .option-b .depth-copy .button{margin-top:9px;min-height:38px;font-size:11px;padding:9px 15px}
}

/* Desktop: 30 percent less peak white, localized around the upper-left introduction. */
@media(min-width:821px){
 .option-b .hero-shade{background:radial-gradient(ellipse 65vw 75% at 0% 18%,rgb(243 244 244 / .67) 0%,rgb(243 244 244 / .63) 32%,rgb(243 244 244 / .35) 60%,rgb(243 244 244 / 0) 100%)}
}

/* Review fixes: direct service entries retain the existing ruled, numbered design. */
.service-entries{grid-template-columns:1fr 1fr;border-bottom:0}
.service-entries a,.service-entries a:last-child{padding:27px 24px;gap:20px;border:0;border-bottom:1px solid var(--line);min-width:0}
.service-entries a:nth-child(odd){padding-left:0;border-right:1px solid var(--line)}
.service-entries a>span:nth-child(2){min-width:0;font-size:23px}
.service-entries strong{display:block;font-weight:500;color:var(--blue)}
.service-entries small{display:block;font-size:13px;line-height:1.55;margin-top:7px;color:var(--muted)}
.service-entries a:nth-child(-n+2) strong{font-weight:700}
.service-entries .world-arrow{margin-left:auto;flex-shrink:0}
.service-entries a:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.service-detail-link{grid-column:1/-1;justify-self:start;margin-top:18px}
.project-entry{margin-block:25px 5px}
@media(max-width:580px){.service-entries{grid-template-columns:1fr}.service-entries a,.service-entries a:last-child,.service-entries a:nth-child(odd){padding:22px 0;border-right:0}.service-entries a>span:nth-child(2){font-size:22px}.service-detail-link{display:inline-flex;font-size:14px;line-height:1.4}}
/* One stable mobile picture behind the introduction; no empty row after it fades. */
@media(max-width:820px) and (min-height:501px){
 .option-b .depth-stage{display:block}
 .option-b .depth-copy{position:absolute;inset:0 24px auto;margin:18px 0 0}
 .option-b .scene-viewport{position:absolute;inset:0 0 68px;width:100%;height:auto;margin:0}
 .option-b .hero-shade{position:absolute;inset:0 0 auto;height:340px;margin:0;max-height:85%;background:linear-gradient(180deg,rgb(218 214 207 / .72) 0%,rgb(218 214 207 / .66) 42%,rgb(218 214 207 / .44) 62%,rgb(218 214 207 / .14) 83%,rgb(218 214 207 / 0) 100%)}
 .option-b .depth-floor{position:absolute;inset:auto 0 0;min-height:68px}
 .option-b .chapter-note{top:18px;bottom:auto;left:24px;right:24px;max-width:550px;background:rgb(24 58 111 / .93);padding:13px 16px}
}
@media(max-width:580px) and (min-height:501px) and (max-height:680px){.option-b .depth-copy{margin-top:12px}.option-b .hero-shade{height:295px}}

/* The approved narrative uses the same scene and a visible route to image provenance. */
.option-b .depth-description{max-width:590px}
.depth-floor>.story-credit{font-size:11px;line-height:1.35;min-height:44px;margin-left:auto;text-decoration:underline;text-underline-offset:4px;letter-spacing:.04em}
.story-origin{position:relative;background:var(--paper);padding-top:28px;scroll-margin-top:130px}
.story-origin details{border-bottom:1px solid var(--line);padding-bottom:15px}
.story-origin summary{min-height:44px;display:list-item;cursor:pointer;font-size:13px;color:var(--muted);width:fit-content}
.story-origin p{max-width:760px;font-size:14px;line-height:1.7;margin:8px 0 12px}
.story-origin .text-link{font-size:14px;margin-top:0}
@media(max-width:820px) and (min-height:501px){
 .option-b .depth-copy .eyebrow{max-width:38ch}
 .option-b .depth-copy .depth-description{max-width:48ch}
 .option-b .hero-shade{height:380px}
 .option-b .depth-floor{min-height:92px}
 .option-b .scene-viewport{bottom:92px}
 .depth-floor>.story-credit{width:100%;margin:0;font-size:10px;min-height:44px}
 .story-origin{padding-top:20px;scroll-margin-top:105px}
}
@media(max-width:580px) and (min-height:501px) and (max-height:680px){.option-b .hero-shade{height:340px}}

/* Readability: one continuous image-wide alpha gradient, no local panel or blur. */
.option-b .depth-copy .depth-description{position:relative;isolation:isolate;color:#112a3e;font-weight:500;font-size:18px;line-height:1.6;text-wrap:pretty}
@media(min-width:821px){
 .option-b .hero-shade{background:linear-gradient(100deg,rgb(218 214 207 / .66) 0%,rgb(218 214 207 / .60) 28%,rgb(218 214 207 / .48) 43%,rgb(218 214 207 / .22) 59%,rgb(218 214 207 / .05) 72%,rgb(218 214 207 / 0) 82%)}
}
@media(max-width:820px){.option-b .depth-copy .depth-description{font-size:14px;line-height:1.5}}
@media(max-height:500px) and (orientation:landscape){.option-b .depth-copy .depth-description{font-size:16px;line-height:1.5}}

.option-b .depth-copy .depth-description{color:#142938;font-weight:600;font-size:18px;line-height:1.6;max-width:56ch}
@media(max-width:820px){.option-b .depth-copy .depth-description{font-size:16px;line-height:1.55;max-width:48ch}}

/* One image-wide navy gradient; the existing layout and camera stay intact. */
.option-b .hero-shade{
 position:absolute;inset:0;margin:0;width:100%;height:100%;max-height:none;
 background:linear-gradient(90deg,rgb(13 30 49 / .78) 0%,rgb(13 30 49 / .68) max(50%,680px),rgb(13 30 49 / .24) 85%,rgb(13 30 49 / 0) 100%);
}
@media(max-width:820px){
 .option-b .hero-shade{background:linear-gradient(180deg,rgb(13 30 49 / .78) 0%,rgb(13 30 49 / .68) 55%,rgb(13 30 49 / .24) 78%,rgb(13 30 49 / 0) 100%)}
}
.option-b .depth-copy h1,.option-b .depth-copy h1 em,.option-b .depth-copy .eyebrow,.option-b .depth-copy .depth-description{color:#fffdf8}
.option-b .depth-copy .button-blue{background:#fffdf8;color:#183a6f}
.option-b .depth-copy .button-blue:hover{background:#e6edf3}
.option-b .depth-copy .button-blue:focus-visible{outline:3px solid #fffdf8;outline-offset:5px}

/* Design refinement: paired work states and a direct, readable contact close. */
.original-pair .project:nth-child(2){margin-top:0}
.original-pair .project{width:100%;min-width:0}
.original-pair{padding-inline:0;gap:6%}
.contact h2 em{color:#e1e8f1}
.contact-options a:focus-visible{outline:2px solid #fff;outline-offset:5px}
/* Mobile/tablet collage: staggered planes, with image and caption areas clear. */
@media(max-width:820px){
 .scene-stack.renovation-stack,.scene-stack.exterior-stack{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;row-gap:40px;height:auto;min-height:0;margin:40px 0 35px;padding-top:68px;padding-bottom:35px}
 .scene-stack .scene-photo,.scene-stack .scene-note{position:relative;inset:auto;width:100%;margin:0;min-width:0}
 .renovation-stack .scene-primary{grid-column:1/10;grid-row:1}
 .exterior-stack .scene-primary{grid-column:2/-1;grid-row:1}
 .renovation-stack .scene-secondary{grid-column:5/-1;grid-row:2}
 .exterior-stack .scene-secondary{grid-column:1/9;grid-row:2}
 .renovation-stack .scene-note{grid-column:1/9;grid-row:3;padding:22px}
 .exterior-stack .scene-note{grid-column:5/-1;grid-row:3;padding:22px}
 .scene-stack .scene-note p{font-size:clamp(23px,4.4vw,34px);line-height:1.08}
 .scene-stack .scene-photo figcaption{font-size:12px;line-height:1.5;overflow-wrap:normal}
 .scene-stack .scene-back{inset:0 0 50px;height:auto;width:100%}
 .scene-stack .scene-back span{font-size:clamp(29px,7.2vw,57px);top:0}
 .scene-stack .scene-edge{bottom:0}
 .exterior-stack .scene-secondary img{aspect-ratio:1/1;object-fit:cover;object-position:50% 38%}
 .original-pair{gap:40px}
}
@media(min-width:581px) and (max-width:820px){
 .scene-stack.renovation-stack,.scene-stack.exterior-stack{padding-top:90px}
 .renovation-stack .scene-primary{grid-column:1/9}
 .exterior-stack .scene-primary{grid-column:4/-1}
 .renovation-stack .scene-secondary{grid-column:7/-1}
 .exterior-stack .scene-secondary{grid-column:1/7}
 .renovation-stack .scene-note{grid-column:1/6;grid-row:2;align-self:end}
 .exterior-stack .scene-note{grid-column:8/-1;grid-row:2;align-self:end}
}

/* A slight moving contact between white photo rims; captions remain outside it. */
@media(max-width:820px){
 .original-pair{gap:32px}
 .scene-stack[data-frame-contact]{padding-top:clamp(68px,16vw,94px)}
 .scene-stack[data-frame-contact] .scene-primary{z-index:1}
 .scene-stack[data-frame-contact] .scene-secondary{z-index:2;margin-top:calc(var(--photo-contact-gap,5.25px) - 40px)}
}

/* Six-stage water story: retain the existing layout, add breathing room for two opening chapters. */
.option-b.hero,.option-b.hero.is-pending{height:640svh}
@media(max-width:820px){.option-b.hero,.option-b.hero.is-pending{height:600svh}}
@media(prefers-reduced-motion:reduce){.option-b.hero,.option-b.hero.is-pending{height:auto}}
.option-b.static-mode.hero{height:auto}

/* The static poster and first WebGL frame use the same unchanged exterior. */
.scene-exterior{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scene-ready .scene-exterior{visibility:hidden}

/* Follow the visible mobile viewport when browser chrome collapses.
   Keep the scroll track in svh so changing browser chrome does not resize the story. */
@supports (height: 100dvh){
 @media (max-width:820px) and (min-height:501px) and (prefers-reduced-motion:no-preference){
  .option-b:not(.static-mode) .depth-stage{height:calc(100dvh - 86px)}
 }
}

/* Keep the chapter strip readable over every floor-shadow frame. */
.option-b .depth-floor{background:var(--paper)}