.b2c-hero{background:#212529;color:#eee;border-radius:20px;overflow:hidden;min-width:0}
.b2c-hero .header-contact{background:white;color:var(--ink);border-radius:30px;padding:12px 28px;font-size:14px}
.b2c-hero-composition{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:6% 8.8% 8.4%}
.b2c-hero-copy{border:1px solid #eeeeee80;border-radius:20px;padding:28px 9% 32px 20px;min-height:clamp(300px,28vw,488px)}
.b2c-hero h1{font-size:clamp(26px,2.8vw,48px);letter-spacing:.19em;margin:0 0 40px;line-height:1.3}
.b2c-hero-copy p{max-width:552px;font-size:clamp(15px,1.16vw,20px);line-height:1.69;margin:0 0 40px}
.b2c-hero-copy .pill{background:transparent;color:inherit;border:1px solid #eee;font-size:clamp(12px,1.16vw,20px)}
.b2c-hero-object{border:1px solid #eeeeee80;border-radius:20px;aspect-ratio:642/402;margin-left:-8%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none}
.b2c-hero-object img{width:86%;height:auto;max-height:115%;object-fit:contain}
.b2c-gallery{padding:6% 3% 0;display:grid;gap:clamp(40px,5vw,86px);scroll-margin-top:20px}
.framed-photo{width:100%;height:auto;align-self:start;justify-self:stretch;position:relative;overflow:hidden;border-radius:20px;margin:0;aspect-ratio:1586/904;min-width:0}
.framed-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.framed-photo:after{content:"";position:absolute;inset:10px;border:1px solid white;border-radius:20px;pointer-events:none}
.framed-photo--vanity img{object-position:center top}
.photo-story{display:grid;grid-template-columns:1.8fr 1fr;gap:3.8%;align-items:stretch}
.photo-story>.framed-photo{aspect-ratio:1018/696}
.photo-story-copy{border-left:1px solid #929292;display:flex;align-items:center;padding:20px 0 20px 30px}
.photo-story-copy p{font-size:clamp(15px,1.16vw,20px);line-height:1.69;margin:0}
.framed-photo--basin img{object-position:center 72.4%}
.photo-story--image-right{grid-template-columns:1fr 1.6fr}
.photo-story--image-right>.framed-photo{grid-column:2;grid-row:1;aspect-ratio:907/1012}
.photo-story--image-right>.photo-story-copy{grid-column:1;grid-row:1;border-left:0;border-right:1px solid #929292;padding:20px 30px 20px 5%}
.framed-photo--shelves img{object-position:left center}
.framed-photo--bedroom{aspect-ratio:1601/830}
.framed-photo--bedroom img{object-position:11% bottom;transform:scale(1.0875);transform-origin:11% bottom}
@media(max-width:900px){.b2c-hero-composition{padding:35px 5% 55px}.b2c-hero h1{letter-spacing:.12em;font-size:27px}.b2c-hero-copy{padding:24px 30px 24px 20px}.photo-story-copy{padding-left:20px}.photo-story--image-right>.photo-story-copy{padding-right:20px}}
@media(max-width:700px){
 .b2c-hero header{padding:18px 14px}.b2c-hero .header-contact{font-size:10px;padding:9px 12px}
 .b2c-hero-composition{grid-template-columns:1fr;padding:20px 18px 36px;gap:24px}
 .b2c-hero-copy{min-height:0;padding:24px 20px}.b2c-hero h1{font-size:clamp(20px,5.5vw,30px);letter-spacing:.1em;margin-bottom:24px}
 .b2c-hero-copy p{font-size:16px;margin-bottom:26px}.b2c-hero-object{margin-left:0;aspect-ratio:1.6}
 .b2c-gallery{padding:35px 0 0;gap:32px}.photo-story,.photo-story--image-right{grid-template-columns:1fr;gap:20px}
 .photo-story--image-right>.framed-photo,.photo-story--image-right>.photo-story-copy{grid-column:auto;grid-row:auto}
 .photo-story-copy,.photo-story--image-right>.photo-story-copy{border:0;border-top:1px solid #aaa;padding:22px 12px 0}
 .photo-story-copy p{font-size:16px}.framed-photo--vanity,.framed-photo--bedroom{aspect-ratio:4/3}
 .photo-story--image-right>.framed-photo{aspect-ratio:907/1012}
}
@media(max-width:380px){.b2c-hero .brand img{width:75px;height:50px}.b2c-hero .header-contact{font-size:9px;padding:9px}}

/* Tall product frame for doors, outdoor lighting and dividers. */
.b2c-hero--portrait .b2c-hero-composition{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding-top:3%;padding-bottom:4%}
.b2c-hero--portrait .b2c-hero-object{aspect-ratio:523/609;width:86%;justify-self:start;margin-left:-5%;min-height:0}
.b2c-hero--portrait .b2c-hero-object img{position:absolute;width:90%;height:91%;max-height:none;object-fit:contain}
.b2c-hero--portrait .b2c-hero-copy{min-width:0}
.b2c-hero--portrait h1{font-size:clamp(23px,2.35vw,40px);letter-spacing:.12em;overflow-wrap:break-word}
@media(max-width:700px){.b2c-hero--portrait .b2c-hero-composition{grid-template-columns:1fr;padding:20px 18px 36px}.b2c-hero--portrait .b2c-hero-object{width:80%;max-width:330px;margin:0;justify-self:center}.b2c-hero--portrait h1{font-size:clamp(20px,5.5vw,30px);letter-spacing:.1em}}
.photo-story--tall{grid-template-columns:1fr 1.08fr;gap:4.5%}
.photo-story--tall>.framed-photo{aspect-ratio:724/1361}
.photo-story--tall>.photo-story-copy{flex-direction:column;justify-content:space-evenly;gap:30px;padding-left:7%}
.photo-story--tall>.photo-story-copy p{font-size:clamp(17px,1.85vw,32px)}
@media(max-width:700px){.photo-story--tall{grid-template-columns:1fr}.photo-story--tall>.photo-story-copy{padding:22px 12px 0;gap:24px}.photo-story--tall>.framed-photo{aspect-ratio:3/4}}

/* Keep both detail photographs between their texts on phones. */
.b2c-stories{display:grid;gap:clamp(40px,5vw,86px)}
@media(max-width:700px){
 .b2c-stories{grid-template-columns:minmax(0,1fr);gap:20px}
 .b2c-stories>.photo-story{display:contents}
 .b2c-stories .photo-story>.framed-photo{grid-row:2;grid-column:1;width:100%;aspect-ratio:1018/696;align-self:start}
 .b2c-stories .photo-story--image-right>.framed-photo{grid-row:3;aspect-ratio:907/1012}
 .b2c-stories .framed-photo img{position:absolute;inset:0;width:100%;height:100%}
 .b2c-stories .photo-story>.photo-story-copy{grid-column:1/-1;grid-row:4;padding:20px 12px 0}
 .b2c-stories .photo-story:first-child>.photo-story-copy{grid-row:1}
 .b2c-stories--paired .photo-story>.photo-story-copy{display:contents}
 .b2c-stories--paired .photo-story-copy p{grid-column:1/-1;padding:0 12px}
 .b2c-stories--paired .photo-story-copy p:first-child{grid-row:1}
 .b2c-stories--paired .photo-story-copy p:last-child{grid-row:3}
 .b2c-stories--paired .photo-story>.framed-photo{grid-column:1/-1;max-height:65svh;aspect-ratio:3/4}
}

/* Mobile framing keeps the concrete product in view. */
@media(max-width:700px){.b2c-page .framed-photo--bedroom img{object-position:75% center;transform:none}}

/* Keep the hero content below the floating navigation, including portrait variants. */
.b2c-page .b2c-hero-composition{padding-top:max(138px,6%)}
@media(max-width:700px){
 .b2c-page .b2c-hero-composition{padding-top:calc(10px + 94px + 24px - var(--gutter))}
}
/* Explicit grid tracks prevent intrinsic image sizing from shrinking Safari columns. */
@media(min-width:701px){
 .b2c-page .photo-story{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
 .b2c-page .photo-story--image-right{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
 .b2c-page .photo-story--tall{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
}