/* A single stage for the construction film and the finished before/after pair. */
.home-page .renovation-lead.bath-lead{grid-template-columns:1fr 1fr;align-items:end;gap:8%;margin-bottom:55px}
.bath-lead h2{margin-bottom:0}.bath-lead .renovation-deck{margin-top:0}
.bath-story{position:relative;left:50%;transform:translateX(-50%);width:calc(100vw - 32px);margin:0;scroll-margin-top:110px;--bath-top:100px;--bath-progress:0}
.bath-story.is-scroll{height:calc(var(--bath-stage-height,620px) + 110svh)}
.bath-stage{padding:8px 0;background:var(--paper);width:min(calc(100vw - 32px),calc((100svh - var(--bath-top) - 145px)*1.5));margin-inline:auto}
.bath-story.is-scroll .bath-stage{position:sticky;top:var(--bath-top)}
.bath-stage-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:10px}
.bath-stage-heading h3{font:400 clamp(24px,2.6vw,34px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:5px 0 0}
.bath-stage-heading .eyebrow{margin:0;color:#736b60;font-size:9px}
.bath-stage-heading>p{margin:0;color:#736b60;font-size:12px;text-align:right}
.home-page .bath-story .renovation-frame{width:100%;height:auto;max-height:none;min-height:0;aspect-ratio:3/2;margin:0 auto;background:#e7e1d6}
.home-page .bath-story .renovation-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;aspect-ratio:auto}
.bath-build-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:5;background:#e7e1d6;pointer-events:none}
.bath-story[data-mode=compare] .bath-build-video{visibility:hidden}
.bath-story:not([data-mode=compare]) .renovation-label,.bath-story:not([data-mode=compare]) .renovation-divider,.bath-story:not([data-mode=compare]) input{visibility:hidden}
.bath-story[data-mode=compare] .renovation-label.first{opacity:var(--before-label,1)}
.bath-story .renovation-divider span{width:46px;height:46px}
.bath-progress{height:2px;background:#d7d1c6;margin-top:8px;overflow:hidden}
.bath-progress::after{content:"";display:block;height:100%;width:100%;background:#554b3e;transform:scaleX(var(--bath-progress));transform-origin:left}
.bath-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:4px;min-height:44px}
.bath-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bath-controls button,.bath-controls a{font:inherit;font-size:12px;line-height:1.4;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:8px 0;border:0;border-bottom:1px solid var(--taupe);background:none;cursor:pointer;text-decoration:none}
.bath-controls button:focus-visible,.bath-controls a:focus-visible{outline:2px solid #9b7952;outline-offset:4px}
.bath-controls [hidden]{display:none}
.bath-caption{font-size:10px;color:#80776b;margin:8px 0 0;line-height:1.5}
.bath-story:not(.is-scroll) .bath-stage-heading>p{max-width:220px}
@media(max-width:850px){.home-page .renovation-lead.bath-lead{grid-template-columns:1fr;gap:24px;margin-bottom:30px}.bath-lead>div:last-child{max-width:620px}}
@media(max-width:650px){.bath-story{--bath-top:88px;scroll-margin-top:88px}.bath-story.is-scroll{height:calc(var(--bath-stage-height,450px) + 85svh)}.bath-stage{padding-top:16px;width:100%}.bath-stage-heading{display:block;margin-bottom:18px}.bath-stage-heading>p{text-align:left;margin-top:12px;font-size:11px}.bath-stage-heading h3{font-size:30px}.home-page .bath-story .renovation-frame{width:100%;aspect-ratio:3/2}.bath-controls{align-items:start;flex-wrap:wrap;gap:8px}.bath-actions{gap:20px}.bath-controls button,.bath-controls a{font-size:11px}.bath-controls>a{margin-left:auto}.bath-story .renovation-label{top:10px;padding:6px 10px;font-size:8px}.bath-story .renovation-label.first{left:10px}.bath-story .renovation-label.last{right:10px}.bath-caption{font-size:9px}}
@media(max-height:550px) and (min-width:651px){.bath-story.is-scroll{height:auto}.bath-story .bath-stage{position:relative;top:auto;width:100%}.home-page .bath-story .renovation-frame{width:min(100%,720px)}}
@media(prefers-reduced-motion:reduce){.bath-story.is-scroll{height:auto}.bath-story .bath-stage{position:relative;top:auto;width:100%}}

/* Original photographs follow the construction visualization. */
.bath-photo-section{display:grid;grid-template-columns:1fr;align-items:start;gap:32px;margin-top:64px;padding-top:64px;border-top:1px solid var(--taupe);scroll-margin-top:120px}
.bath-photo-copy .eyebrow{color:#736b60;font-size:10px;letter-spacing:.12em}
.bath-photo-copy h3{font:400 clamp(32px,4vw,52px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:16px 0 24px}
.bath-photo-copy>p:not(.eyebrow){max-width:360px;color:#68645d;font-size:17px;line-height:1.7}
.bath-photo-copy .bath-photo-hint{font-size:13px!important;margin-top:24px}
@media(max-width:900px){.bath-photo-section{grid-template-columns:1fr;gap:24px;margin-top:40px;padding-top:40px;scroll-margin-top:100px}.bath-photo-copy h3{margin:12px 0 16px}.bath-photo-copy>p:not(.eyebrow){font-size:15px}.bath-photo-copy .bath-photo-hint{margin:16px 0 0}.home-page .bath-photo-section .home-bath-proof{width:min(100%,480px)}}

/* Give the original photographs the full available width. */
.home-page .bath-photo-section .home-bath-proof{width:90%;max-width:760px;justify-self:center}
.bath-photo-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:8%;align-items:end}
.bath-photo-copy .eyebrow{grid-column:1/-1}
.bath-photo-copy h3{grid-row:2/4;margin:12px 0 0}
.bath-photo-copy>p:not(.eyebrow){max-width:none;margin:0}
.bath-photo-copy .bath-photo-hint{margin-top:12px}
@media(max-width:900px){.bath-photo-copy{display:block}.bath-photo-copy h3{margin:12px 0 16px}.bath-photo-copy .bath-photo-hint{margin-top:12px}.home-page .bath-photo-section .home-bath-proof{max-width:none}}
@media(max-width:650px){.bath-story{width:calc(100vw - 24px)}.bath-stage{width:100%}.bath-photo-section{position:relative;left:50%;transform:translateX(-50%);width:calc(100vw - 24px)}.bath-photo-copy{padding-inline:8px}}

/* Preserve the full width of the new construction film, including the toilet and water supply. */
.home-page .bath-story.bath-film-wide .renovation-frame{aspect-ratio:16/9}
.bath-film-wide .bath-stage{width:min(calc(100vw - 32px),calc((100svh - var(--bath-top) - 145px)*16/9))}
@media(max-width:650px){.bath-film-wide .bath-stage{width:100%}}
@media(max-height:550px) and (min-width:651px){.bath-film-wide .bath-stage{width:100%}}