.hero-image{background-image:linear-gradient(90deg,rgba(27,13,16,.96) 0%,rgba(27,13,16,.71) 35%,rgba(27,13,16,.04) 66%),linear-gradient(0deg,rgba(27,13,16,.5),transparent 42%),url('./hero-directors-v2.webp');filter:saturate(1.03) contrast(1.03)}
.surface-cinema{position:relative;padding:clamp(90px,11vw,170px) 6vw;background:#140b0d;color:#fff;overflow:hidden}.surface-cinema:before{content:'04';position:absolute;right:-.02em;top:-.18em;font:500 clamp(16rem,32vw,36rem)/1 var(--serif);color:rgba(237,157,141,.035);pointer-events:none}.surface-title{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:7vw;margin-bottom:52px}.surface-title>span{position:absolute;top:-28px;font:500 .55rem var(--mono);letter-spacing:.12em;color:var(--blush)}.surface-title h2{margin:0;font:500 clamp(3.4rem,6.2vw,7.2rem)/.85 var(--serif);letter-spacing:-.05em}.surface-title h2 em{color:var(--blush)}.surface-title p{margin:0 0 5px;max-width:520px;color:#d7c8c5;line-height:1.7}
.surface-stage{position:relative;height:min(68vw,780px);min-height:540px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 38px 110px rgba(0,0,0,.38);background:#2d151a}.surface-finish{position:absolute;inset:0;background:url('./hero-directors-v2.webp') center/cover no-repeat;filter:saturate(1.03) contrast(1.04)}.surface-underlay{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--reveal-width)) 0 0);background:radial-gradient(circle at 24% 45%,rgba(237,157,141,.18),transparent 23%),linear-gradient(125deg,rgba(40,18,23,.98),rgba(70,31,39,.9));transition:clip-path .18s ease-out}.assembly-grid{position:absolute;inset:0;background:linear-gradient(rgba(237,157,141,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(237,157,141,.16) 1px,transparent 1px);background-size:42px 42px}.assembly-grid:before,.assembly-grid:after{content:'';position:absolute;border:1px solid rgba(237,157,141,.48)}.assembly-grid:before{left:13%;top:16%;width:30%;height:66%;border-radius:50% 50% 5% 5%}.assembly-grid:after{left:49%;top:14%;width:31%;height:69%;border-radius:45% 45% 4% 4%}
.assembly-callout{position:absolute;display:grid;gap:5px;font:500 .5rem var(--mono);letter-spacing:.08em}.assembly-callout i{width:11px;height:11px;border:2px solid var(--blush);border-radius:50%;box-shadow:0 0 0 7px rgba(237,157,141,.12),0 0 20px rgba(237,157,141,.45)}.assembly-callout b{color:var(--blush)}.assembly-callout small{color:#e7d6d2;font-size:.43rem}.assembly-callout.drain{left:63%;top:69%}.assembly-callout.wet{left:55%;top:33%}.assembly-callout.air{left:20%;top:22%}.assembly-callout.power{left:27%;top:55%}
.surface-divider{position:absolute;z-index:3;left:var(--reveal-width);top:0;bottom:0;width:1px;background:#fff;box-shadow:0 0 26px rgba(255,255,255,.52);transition:left .18s ease-out}.surface-divider i{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;background:var(--blush);box-shadow:0 16px 38px rgba(0,0,0,.28)}.surface-divider i:before,.surface-divider i:after{content:'';position:absolute;top:19px;width:10px;height:10px;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}.surface-divider i:before{left:12px;transform:rotate(-45deg)}.surface-divider i:after{right:12px;transform:rotate(135deg)}.surface-label{position:absolute;z-index:4;bottom:22px;padding:9px 12px;background:rgba(22,10,13,.72);backdrop-filter:blur(12px);font:500 .48rem var(--mono);letter-spacing:.1em}.surface-label.under{left:22px;color:var(--blush)}.surface-label.finished{right:22px;color:#fff}
.surface-range{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin-top:26px;font:500 .48rem var(--mono);letter-spacing:.1em;color:#ddcfcb}.surface-range input{width:100%;accent-color:var(--blush)}
@media(max-width:700px){.hero-image{background-image:linear-gradient(0deg,rgba(27,13,16,.96) 0%,rgba(27,13,16,.48) 65%,rgba(27,13,16,.04)),url('./hero-mobile-directors-v2.webp');background-position:center}.surface-cinema{padding:90px 20px}.surface-title{display:block;margin-bottom:35px}.surface-title>span{position:static;display:block;margin-bottom:20px}.surface-title h2{font-size:3.35rem}.surface-title p{margin-top:22px;font-size:.88rem}.surface-stage{height:690px;min-height:0}.surface-finish{background-image:url('./hero-mobile-directors-v2.webp');background-position:center}.assembly-callout{font-size:.42rem}.assembly-callout small{display:none}.assembly-callout.drain{left:58%;top:66%}.assembly-callout.wet{left:45%;top:34%}.assembly-callout.air{left:16%;top:23%}.assembly-callout.power{left:25%;top:51%}.surface-divider i{width:44px;height:44px}.surface-divider i:before,.surface-divider i:after{top:16px}.surface-divider i:before{left:10px}.surface-divider i:after{right:10px}.surface-range{gap:12px}}
@media(prefers-reduced-motion:reduce){.surface-underlay,.surface-divider{transition:none}}

/* The reveal, plan and wet-area study use three separate photographic assets. */
.surface-finish{background-image:url('./scene-finish-detail-v1.webp');background-position:center}
.material-film{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;padding:clamp(100px,11vw,165px) 6vw;background:var(--cream);color:var(--ink);overflow:hidden}.material-film:after{content:'';position:absolute;right:5vw;top:0;bottom:0;width:1px;background:rgba(75,32,40,.13)}.material-film-title{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:4vw;align-items:end;margin-bottom:34px}.material-film-title>span{align-self:start;font:500 .52rem var(--mono);letter-spacing:.12em;color:var(--rose)}.material-film-title h2{margin:0;font:500 clamp(3.5rem,6vw,7rem)/.86 var(--serif);letter-spacing:-.055em}.material-film-title h2 em{color:var(--rose)}.material-film-title p{margin:0 0 7px;color:#665256;line-height:1.7}.material-frame{position:relative;min-width:0;height:min(39vw,540px);margin:0;overflow:hidden;background:#d8cdc3}.material-frame.plan{transform:translateY(48px)}.material-frame img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .85s cubic-bezier(.2,.8,.2,1)}.material-frame:hover img{transform:scale(1.028)}.material-frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(0deg,rgba(28,13,16,.92),transparent);color:#fff}.material-frame figcaption span,.material-frame figcaption b,.material-frame figcaption small{display:block}.material-frame figcaption span{font:500 .46rem var(--mono);letter-spacing:.11em;color:var(--blush)}.material-frame figcaption b{margin:7px 0;font:500 clamp(1.1rem,1.7vw,1.55rem) var(--serif)}.material-frame figcaption small{font:500 .42rem var(--mono);letter-spacing:.05em;color:#ddceca}
@media(max-width:700px){.surface-finish{background-image:url('./scene-finish-detail-v1.webp');background-position:58% center}.material-film{display:block;padding:90px 20px}.material-film-title{display:block;margin-bottom:36px}.material-film-title>span{display:block;margin-bottom:19px}.material-film-title h2{font-size:3.35rem}.material-film-title p{margin-top:22px;font-size:.88rem}.material-frame,.material-frame.plan{height:410px;margin-bottom:14px;transform:none}.material-frame.wet{height:510px}.material-frame.plan img{object-position:center}.material-frame.wet img{object-position:62% center}}

/* A magazine spread puts three genuinely different renovation briefs above the plan. */
.renovation-edition{position:relative;padding:clamp(96px,10vw,156px) 6vw clamp(108px,12vw,180px);overflow:hidden;background:#efe8df;color:var(--ink)}.renovation-edition:before{content:'ROOM / 03';position:absolute;right:3vw;top:4vw;font:500 .47rem var(--mono);letter-spacing:.13em;color:#9a7779}.renovation-edition-head{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:end;margin-bottom:48px}.renovation-edition-head>span{grid-column:1/-1;font:500 .52rem var(--mono);letter-spacing:.13em;color:var(--rose)}.renovation-edition-head h2{margin:0;font:500 clamp(3.5rem,6vw,6.9rem)/.86 var(--serif);letter-spacing:-.055em}.renovation-edition-head p{max-width:520px;margin:0 0 8px;color:#6f575b;line-height:1.72}.renovation-spread{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:minmax(280px,34vw) minmax(230px,28vw);gap:14px}.renovation-plate{position:relative;margin:0;overflow:hidden;background:#4b2930}.renovation-plate.shower{grid-column:1/8;grid-row:1}.renovation-plate.access{grid-column:8/13;grid-row:1/3}.renovation-plate.ventilation{grid-column:2/8;grid-row:2}.renovation-plate img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(.92) contrast(1.02)}.renovation-plate:hover img{transform:scale(1.026);filter:saturate(1.02) contrast(1.03)}.renovation-plate.access img{object-position:center}.renovation-plate.ventilation img{object-position:center 42%}.renovation-plate figcaption{position:absolute;left:15px;right:15px;bottom:15px;padding:18px 20px;background:rgba(40,19,23,.79);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);color:#fff}.renovation-plate figcaption span,.renovation-plate figcaption strong,.renovation-plate figcaption small{display:block}.renovation-plate figcaption span{font:500 .45rem var(--mono);letter-spacing:.12em;color:var(--blush)}.renovation-plate figcaption strong{margin:8px 0 7px;font:500 clamp(1.05rem,1.7vw,1.55rem) var(--serif)}.renovation-plate figcaption small{font:500 .42rem var(--mono);letter-spacing:.05em;color:#e1d2ce}
@media(max-width:700px){.renovation-edition{padding:86px 20px 98px}.renovation-edition:before{display:none}.renovation-edition-head{display:block;margin-bottom:34px}.renovation-edition-head>span{display:block;margin-bottom:19px}.renovation-edition-head h2{font-size:3.25rem}.renovation-edition-head p{margin-top:22px;font-size:.88rem}.renovation-spread{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:500px 360px;gap:10px}.renovation-plate.shower{grid-column:1/-1;grid-row:1}.renovation-plate.access{grid-column:1;grid-row:2}.renovation-plate.ventilation{grid-column:2;grid-row:2}.renovation-plate.access img{object-position:46% center}.renovation-plate.ventilation img{object-position:52% center}.renovation-plate figcaption{left:9px;right:9px;bottom:9px;padding:14px}.renovation-plate figcaption strong{font-size:1rem}.renovation-plate figcaption small{display:none}}