/* Home page. Every selector hooks a BeBuilder block by the class set in
   Advanced → Custom → CSS classes; the blocks themselves hold plain HTML. */

/* tall scroll scenes: section is long, its stage wrap sticks to the screen */
.rb-hero,.rb-moment,.rb-stage{position:relative}
.rb-hero>.section_wrapper,.rb-moment>.section_wrapper,.rb-stage>.section_wrapper{height:100%}
.rb-stage-w{position:sticky!important;top:0;height:100svh;overflow:hidden}
.rb-stage-w>.mcb-wrap-inner{position:relative!important;height:100%;display:block!important}
.rb-fill,.rb-fill>.mcb-column-inner,.rb-fill .column_attr{height:100%}

/* ---------- hero: viewfinder ---------- */
.rb-hero{height:320vh;background:var(--rb-dark)!important;color:var(--rb-on-dark)}
/* the photo is the wrap's own background (BeBuilder → Wrap → Advanced → Background);
   the viewfinder is drawn over it by rb-home.js: four dark masks that open with scroll */
.rb-hero .rb-stage-w>.mcb-wrap-inner{background-color:var(--rb-dark)}
.rb-vf{position:absolute;inset:0;z-index:1;pointer-events:none;--t:24%;--l:31%}
.rb-vf::before{content:"";position:absolute;inset:40% 0 0 0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.rb-vf-m{position:absolute;background:var(--rb-dark)}
.rb-vf-m.t{top:0;left:0;right:0;height:var(--t)}.rb-vf-m.b{bottom:0;left:0;right:0;height:var(--t)}
.rb-vf-m.l{top:var(--t);bottom:var(--t);left:0;width:var(--l)}.rb-vf-m.r{top:var(--t);bottom:var(--t);right:0;width:var(--l)}
.rb-name,.rb-hero-kicker,.rb-hero-claim{z-index:2}
.rb-vf-c{position:absolute;width:28px;height:28px;border:0 solid var(--rb-on-dark);opacity:var(--co,1)}
.rb-vf-c.tl{top:calc(var(--t) - 14px);left:calc(var(--l) - 14px);border-top-width:2px;border-left-width:2px}
.rb-vf-c.tr{top:calc(var(--t) - 14px);right:calc(var(--l) - 14px);border-top-width:2px;border-right-width:2px}
.rb-vf-c.bl{bottom:calc(var(--t) - 14px);left:calc(var(--l) - 14px);border-bottom-width:2px;border-left-width:2px}
.rb-vf-c.br{bottom:calc(var(--t) - 14px);right:calc(var(--l) - 14px);border-bottom-width:2px;border-right-width:2px}
.rb-vf-focus{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:1px solid rgba(239,235,228,.8);opacity:var(--co,1)}
.rb-name{position:absolute!important;inset:0;pointer-events:none}
.rb-name h1{position:absolute;inset:0;font-size:clamp(56px,min(13.5vw,24vh),240px)!important;line-height:.82!important;color:var(--rb-on-dark)!important;font-weight:300}
.rb-name h1 span,.rb-name h1 em{position:absolute;display:block;white-space:nowrap;will-change:transform}
.rb-name h1 span{left:var(--rb-gut);top:9vh;font-style:normal}
.rb-name h1 em{right:var(--rb-gut);bottom:9vh;font-style:italic}
.rb-hero-kicker{position:absolute!important;left:50%;top:calc(24% - 48px);width:auto!important;transform:translateX(-50%);opacity:var(--co,1)}
.rb-hero-kicker p{white-space:nowrap;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--rb-on-dark-soft)}
.rb-hero-claim{position:absolute!important;left:var(--rb-gut);right:var(--rb-gut);bottom:10vh;width:auto!important;opacity:0}
.rb-hero-claim h2{font-size:clamp(32px,min(5vw,10vh),80px)!important;line-height:1.02!important;color:var(--rb-on-dark)!important;max-width:12em;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.rb-hero-claim p{margin-top:22px!important;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,235,228,.85)}
.rb-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ---------- street: stack of whole photos ---------- */
.rb-street{background:var(--rb-dark)!important;color:var(--rb-on-dark);padding-top:22vh!important}
.rb-intro>.mcb-wrap-inner{display:grid!important;grid-template-columns:1.2fr 1fr;gap:6vw;align-items:end;padding:0 var(--rb-gut) 18vh!important}
.rb-intro h2{font-size:clamp(44px,min(7vw,14vh),120px)!important;line-height:.95!important}
.rb-intro p{font-size:17px;line-height:1.65;color:var(--rb-on-dark-soft);max-width:34em}
.rb-intro p+p{margin-top:18px!important}
.rb-intro a{color:var(--rb-on-dark);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;font-size:15px}
.rb-card{position:sticky!important;top:0;height:100svh;overflow:hidden}
.rb-card>.mcb-column-inner{position:absolute!important;inset:0;transform-origin:50% 0;will-change:transform;background:var(--rb-dark)}
/* photos are shown whole, never cropped: the composition is the author's */
.rb-card .column_attr{height:100%;display:grid!important;grid-template-columns:auto minmax(220px,1fr);grid-template-rows:1fr auto auto;column-gap:4vw;align-items:center;padding:0 var(--rb-gut) 0!important}
.rb-card img{grid-row:1/4;width:auto!important;max-width:66vw!important;max-height:84svh;object-fit:contain}
.rb-card p{grid-column:2;align-self:end;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,235,228,.8);margin-bottom:16px!important}
.rb-card h3{grid-column:2;align-self:start;padding-bottom:9vh;font-size:clamp(28px,min(3.6vw,8vh),64px)!important;line-height:1!important;color:var(--rb-on-dark)!important}
.rb-quote{position:relative;z-index:2;background:var(--rb-paper)}
.rb-quote blockquote{margin:0;padding:26vh var(--rb-gut);border:0;background:none}
.rb-quote blockquote p{font-family:var(--rb-serif);font-style:italic;font-weight:300;font-size:clamp(34px,5.2vw,88px)!important;line-height:1.05!important;color:var(--rb-ink)!important;max-width:13em;margin:0 auto!important;text-align:center}

/* ---------- peak: focus catch ---------- */
.rb-moment{height:260vh;background:var(--rb-dark)!important;color:var(--rb-on-dark)}
/* photo = the wrap's background in BeBuilder; rb-home.js lays a focus layer over it (backdrop blur) */
.rb-moment .rb-stage-w>.mcb-wrap-inner{background-color:var(--rb-dark)}
.rb-focus{position:absolute;inset:0;z-index:1;pointer-events:none}
.rb-shutter{position:absolute;inset:0;z-index:3;background:#fff;opacity:var(--s,0);pointer-events:none}
.rb-moment-before,.rb-moment-now,.rb-moment-after{z-index:2}
.rb-moment-before,.rb-moment-now,.rb-moment-after{position:absolute!important;width:auto!important}
.rb-moment-before p,.rb-moment-now p,.rb-moment-after p{font-family:var(--rb-serif);font-weight:300;color:var(--rb-on-dark);text-shadow:0 2px 24px rgba(0,0,0,.5);white-space:nowrap}
.rb-js .rb-moment-before,.rb-js .rb-moment-now,.rb-js .rb-moment-after{opacity:0}
.rb-moment-before{left:var(--rb-gut);top:14vh}.rb-moment-before p{font-size:clamp(28px,3.4vw,56px)}
.rb-moment-now{left:50%;top:50%;transform:translate(-50%,-50%)}.rb-moment-now p{font-style:italic;font-size:clamp(72px,min(16vw,30vh),280px);line-height:1}
.rb-moment-after{right:var(--rb-gut);bottom:12vh}.rb-moment-after p{font-size:clamp(24px,2.6vw,42px)}

/* ---------- services: sticky whole photo, text scrolls ---------- */
.rb-svc{background:var(--rb-paper)!important}
.rb-svc>.section_wrapper{display:grid!important;grid-template-columns:1fr 1fr}
.rb-svc-media{position:sticky!important;top:0;height:100svh;overflow:hidden;background:var(--rb-dark)}
.rb-svc-media>.mcb-wrap-inner{position:relative!important;height:100%;display:block!important}
.rb-svc-photo{position:absolute!important;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1);background:var(--rb-dark)}
.rb-svc-photo.on{clip-path:inset(0 0 0 0);z-index:2}
.rb-svc-photo.was{clip-path:inset(0 0 0 0);z-index:1}
.rb-svc-photo>.mcb-column-inner,.rb-svc-photo .column_attr{height:100%}
.rb-svc-photo img{width:100%!important;height:100%!important;max-width:none!important;object-fit:contain;padding:6vh 3vw}
.rb-s .rb-svc-text{padding:0 var(--rb-gut) 0 6vw!important}
.rb-s .rb-svc-head{padding:14vh 0 8vh!important}
.rb-svc-head h2{font:500 12px var(--rb-sans)!important;letter-spacing:.24em!important;text-transform:uppercase;margin-bottom:20px!important}
.rb-svc-head p,.rb-svc-item p{font-size:17px;line-height:1.65;color:var(--rb-soft);max-width:34em}
.rb-svc-item{min-height:80vh;display:flex!important;flex-direction:column;justify-content:center;border-top:1px solid var(--rb-line)}
.rb-svc-item p{transition:opacity .6s}
.rb-svc-item p+p{margin-top:22px!important}
.rb-svc-item a{color:var(--rb-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;font-size:15px}
@media (min-width:901px){.rb-js .rb-svc-item:not(.on) p{opacity:.45}}
.rb-svc-item h3{font-size:clamp(44px,min(6.4vw,12vh),112px)!important;line-height:.95!important;margin-bottom:24px!important;transition:transform .6s}
.rb-svc-item.on h3{transform:translateX(12px)}
.rb-svc .rb-svc-inline{display:none}

/* ---------- stage: filmstrip ---------- */
.rb-stage{height:300vh;background:var(--rb-dark)!important;color:var(--rb-on-dark)}
.rb-stage .rb-stage-w>.mcb-wrap-inner{display:flex!important;flex-direction:column;justify-content:center;gap:5vh}
.rb-stage-text .column_attr{padding:0 var(--rb-gut)!important;display:flex!important;gap:6vw;align-items:baseline}
.rb-s h1,.rb-s h2,.rb-s h3{word-break:normal!important;overflow-wrap:normal!important;hyphens:manual}
.rb-stage-text h2{flex-shrink:0;font-size:clamp(48px,min(8vw,14vh),140px)!important;line-height:.9!important}
.rb-stage-text p{font-size:17px;line-height:1.65;color:var(--rb-on-dark-soft);max-width:28em}
.rb-strip{width:max-content!important;will-change:transform}
.rb-strip .column_attr{display:flex!important;gap:2vw;padding-left:var(--rb-gut)!important}
.rb-strip img{height:62vh!important;width:auto!important;max-width:none!important}

/* ---------- about ---------- */
.rb-about{background:var(--rb-paper)!important;padding:24vh var(--rb-gut)!important}
.rb-about-w>.mcb-wrap-inner{display:grid!important;grid-template-columns:5fr 7fr;gap:7vw;align-items:center}
.rb-about-photo{overflow:hidden}
.rb-about-photo img{width:100%;transform:scale(1.12);will-change:transform}
.rb-about-text h2{font-size:clamp(48px,6vw,104px)!important;line-height:.95!important;margin-bottom:28px!important}
.rb-about-text p{font-size:17px;line-height:1.65;color:var(--rb-soft);max-width:34em}
.rb-about-text p+p{margin-top:1em!important}
.rb-about-text a{color:var(--rb-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;font-size:15px}

/* ---------- close ---------- */
.rb-close{position:relative;background:var(--rb-dark)!important;color:var(--rb-on-dark);overflow:hidden}
.rb-close-w>.mcb-wrap-inner{position:relative!important;min-height:100svh;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:stretch}
/* photo = the wrap's background in BeBuilder; darkened here so the text always reads */
.rb-close-w>.mcb-wrap-inner{background-color:var(--rb-dark)}
.rb-close-w>.mcb-wrap-inner::before{content:"";position:absolute;inset:0;background:rgba(11,10,9,.5);pointer-events:none}
.rb-s .rb-close-text{position:relative!important;padding:var(--rb-gut) var(--rb-gut) 12vh!important}
.rb-close-text h2{font-size:clamp(52px,min(11vw,19vh),190px)!important;line-height:.9!important;color:var(--rb-on-dark)!important;margin-bottom:32px!important}
.rb-close-text p{font-size:17px;line-height:1.65;color:rgba(239,235,228,.85);max-width:34em}
.rb-close-text p:last-child{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;margin-top:36px!important;max-width:none}
.rb-close-text p:last-child a{color:var(--rb-on-dark);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;font-size:15px}
.rb-close-text p:last-child a:first-child{background:var(--rb-paper);color:var(--rb-ink);border:0;padding:18px 34px;font-weight:500;transition:transform .2s,background .2s}
.rb-close-text p:last-child a:first-child:hover{transform:translateY(-2px);background:#fff}

@media (max-width:900px){
 .rb-vf{--t:30%;--l:12%}
 .rb-name h1 span{top:12vh}.rb-name h1 em{bottom:14vh}
 .rb-hero-kicker{top:calc(30% - 40px)}
 .rb-intro>.mcb-wrap-inner{grid-template-columns:1fr;gap:24px}
 .rb-card .column_attr{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;row-gap:0}
 .rb-card img{grid-row:auto;max-width:100%!important;max-height:62svh;margin-bottom:24px}
 .rb-card p,.rb-card h3{grid-column:1}
 .rb-card h3{padding-bottom:0}
 .rb-svc>.section_wrapper{grid-template-columns:1fr}
 .rb-svc-media{display:none!important}
 .rb-s .rb-svc-text{padding:12vh var(--rb-gut)!important}
 .rb-s .rb-svc-head{padding:0 0 5vh!important}
 .rb-s .rb-svc-item{min-height:0;padding:7vh 0!important}
 .rb-svc .rb-svc-inline{display:block;width:100%;height:auto;margin-bottom:24px}
 .rb-stage-text .column_attr{flex-direction:column;gap:12px}
 .rb-strip img{height:44vh!important}
 .rb-about-w>.mcb-wrap-inner{grid-template-columns:1fr}
}

/* inside the BeBuilder editor everything stays static and visible for editing */
body.mfn-ui .rb-hero,body.mfn-ui .rb-moment,body.mfn-ui .rb-stage{height:auto}
body.mfn-ui .rb-stage-w,body.mfn-ui .rb-card,body.mfn-ui .rb-svc-media{position:relative!important;height:auto}
body.mfn-ui .rb-name,body.mfn-ui .rb-hero-kicker,body.mfn-ui .rb-hero-claim,
body.mfn-ui .rb-moment-before,body.mfn-ui .rb-moment-now,body.mfn-ui .rb-moment-after,body.mfn-ui .rb-svc-photo{position:relative!important;inset:auto;opacity:1;clip-path:none;transform:none}
body.mfn-ui .rb-card>.mcb-column-inner{position:relative!important}
body.mfn-ui .rb-stage-w>.mcb-wrap-inner{min-height:80vh}
body.mfn-ui .rb-name h1,body.mfn-ui .rb-name h1 span,body.mfn-ui .rb-name h1 em{position:relative;inset:auto}