/* v71 · first screen = the brick wall scene; the slab scene moves to the Brand block */

/* ── first screen ── */
.wall-hero .wall-in{padding-top:0}
.wall-hero .wall-copy{top:0 !important}
.wall-hero .wall-copy .p{top:41% !important}
.wall-eyebrow{position:absolute;left:0;right:0;top:calc(41% - 175px);margin:0;text-align:center;font-size:14px;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:-.01em}
.wall-hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,3.5vh,36px);z-index:4;display:flex;flex-direction:column;gap:18px}
.whf-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.whf-en{margin:0;font:700 clamp(16px,1.4vw,20px)/1.2 var(--en);letter-spacing:-.02em;color:rgba(255,255,255,.85)}
.wall-hero-foot .hero-cta{display:flex;gap:10px;margin:0}
.wall-hero-foot .hero-services{position:static !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 !important;width:auto !important;inset:auto !important}
.wall-hero-foot .hero-service{min-height:0 !important;padding:16px 18px !important}
/* soften the wall under the foot so buttons and cards stay readable */
.wall-hero .wall-in::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,5,6,.85) 70%,#050506)}

/* ── Brand: text left, slab scene right ── */
#app .about2-brand{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
#app .brand-visual{position:relative;height:clamp(420px,62vh,620px);border-radius:24px;overflow:hidden}
#app .brand-visual .hero-visual{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important}
#app .brand-visual .hero-hotspots{z-index:3}
.brand-replay{position:absolute;right:16px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,12,.5);color:rgba(255,255,255,.75);font-size:12px;cursor:pointer;backdrop-filter:blur(8px)}
.brand-replay:hover{color:#fff;border-color:rgba(255,255,255,.4)}

@media (max-width:1100px){.whf-top{flex-direction:column;align-items:flex-start}}
@media (max-width:820px){
 .wall-hero .wall-copy .p{top:34% !important}
 .wall-eyebrow{top:calc(34% - 130px);font-size:12px;padding:0 20px}
 .wall-hero-foot{gap:12px}
 .whf-top{gap:10px}
 .wall-hero-foot .hero-cta .btn{height:44px;padding:0 16px;font-size:13px}
 .wall-hero-foot .hero-services{grid-template-columns:1fr;gap:6px}
 .wall-hero-foot .hero-service{padding:10px 14px !important}
 .wall-hero-foot .hero-service p,.wall-hero-foot .service-price{display:none}
 #app .about2-brand{grid-template-columns:1fr}
 #app .brand-visual{height:360px}
}
/* the slab scene was composed for a full-width hero (stack at ~75% across); widen and shift it so the stack lands mid-box */
#app .brand-visual .hero-visual{left:-70% !important;width:160% !important;right:auto !important}
#app .brand-visual{-webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(120% 100% at 50% 50%,#000 60%,transparent 100%)}
#app .brand-visual{border-radius:0 !important;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask-composite:intersect}
#app .brand-visual .brand-replay{right:18% !important;bottom:20% !important}
@media (max-width:820px){
 .wall-hero-foot .hero-services{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:6px !important}
 .wall-hero-foot .hero-service{padding:10px 8px !important;justify-content:center;text-align:center;border-radius:12px !important}
 .wall-hero-foot .hero-service>svg,.wall-hero-foot .hero-service .motion-icon,.wall-hero-foot .service-arrow{display:none !important}
 .wall-hero-foot .service-name{font-size:12.5px !important;white-space:nowrap}
 .wall-hero-foot{bottom:92px}
}