/* Brand pages: /pages/crushed and /pages/about. Editorial v2 (6 Oct). Scoped to .bx */
.bx{--bx-pad:20px;--bx-gap:10px;color:var(--ink);background:var(--bg)}
@media (min-width:990px){.bx{--bx-pad:48px;--bx-gap:16px}}
.bx img{display:block;width:100%;height:100%;object-fit:cover}
.bx figure{margin:0;overflow:hidden;background:#0b0f1a}
.bx p,.bx h1,.bx h2,.bx h3{margin:0}
.bx a{color:inherit}
.bx-lab{font:400 10.5px/1.3 var(--ff,Roboto,sans-serif);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:18px!important}
.bx-title{font:300 clamp(34px,7vw,88px)/1 var(--ff,Roboto,sans-serif);letter-spacing:.32em;margin-right:-.32em!important;text-transform:uppercase;color:#fff}
.bx-h{font:300 clamp(24px,3.2vw,40px)/1.15 var(--ff,Roboto,sans-serif);letter-spacing:.01em}
.bx-ul{display:inline-block;font:400 11px/1 var(--ff,Roboto,sans-serif);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px;transition:opacity .3s}
.bx-ul:hover{opacity:.65}
.bx-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 36px;font:400 11px/1 var(--ff,Roboto,sans-serif);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.7);background:transparent;transition:background .35s,color .35s,border-color .35s}
.bx-btn:hover{background:#fff;color:#000;border-color:#fff}
.bx a:focus-visible{outline:1px solid currentColor;outline-offset:5px}

/* reveal */
.bx-in{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.1,1)}
.bx-in.bx-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bx-in{opacity:1;transform:none;transition:none}}

/* hero */
.bx-hero{position:relative;height:calc(100svh - 96px);min-height:540px;max-height:1000px;overflow:hidden;background:#000;color:#fff}
.bx-hero picture,.bx-hero img{position:absolute;inset:0;width:100%;height:100%}
.bx-hero img{object-position:50% 40%;animation:bxFade 1.6s ease both}
@keyframes bxFade{from{opacity:0}to{opacity:1}}
.bx-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.92) 100%)}
.bx-hero__txt{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,88px);z-index:1;text-align:center;padding:0 var(--bx-pad)}
.bx-hero .bx-lab{color:rgba(255,255,255,.75)}
.bx-hero .bx-title{margin-bottom:30px!important}
.bx-hero .bx-ul{color:#fff}

/* statement */
.bx-state{max-width:760px;margin:0 auto;padding:clamp(96px,14vw,180px) var(--bx-pad);text-align:center}
.bx-lede{font:300 clamp(19px,2.1vw,26px)/1.55 var(--ff,Roboto,sans-serif);letter-spacing:.005em}

/* two equal images */
.bx-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--bx-gap);padding:0 var(--bx-pad)}
.bx-duo figure{aspect-ratio:4/5}
.bx-cap{padding:18px var(--bx-pad) 0;text-align:center;font:400 10.5px/1.5 var(--ff,Roboto,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* product grid */
.bx-coll{padding:clamp(110px,14vw,190px) var(--bx-pad) clamp(90px,11vw,150px)}
.bx-coll__head{text-align:center;margin-bottom:clamp(48px,6vw,84px)}
.bx-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px var(--bx-gap)}
@media (min-width:990px){.bx-grid{grid-template-columns:repeat(3,1fr);gap:72px var(--bx-gap)}.bx-grid--4{grid-template-columns:repeat(4,1fr)}}
.bx-item{display:block;text-decoration:none;text-align:center}
.bx-item figure{aspect-ratio:4/5;margin-bottom:18px}
.bx-item img{transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.bx-item:hover img{transform:scale(1.035)}
.bx-item__n{font:400 11.5px/1.3 var(--ff,Roboto,sans-serif);letter-spacing:.2em;text-transform:uppercase;margin-bottom:7px!important}
.bx-item__d{font:300 13px/1.45 var(--ff,Roboto,sans-serif);color:var(--mute)}
.bx-item__p{font:400 13px/1.4 var(--ff,Roboto,sans-serif);margin-top:6px!important}

/* full-bleed image */
.bx-full{height:min(82svh,900px);overflow:hidden;background:#000}
.bx-full img{object-position:50% 35%}

/* materials / service row */
.bx-mat{display:grid;grid-template-columns:1fr 1fr;margin:clamp(80px,10vw,130px) var(--bx-pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bx-mat div{padding:30px 10px;text-align:center}
.bx-mat div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.bx-mat .bx-lab{margin-bottom:10px!important}
.bx-mat p:not(.bx-lab){font:300 14px/1.45 var(--ff,Roboto,sans-serif)}
.bx-mat a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
@media (min-width:990px){.bx-mat{grid-template-columns:repeat(4,1fr)}.bx-mat div{padding:44px 16px}.bx-mat div:nth-child(-n+2){border-bottom:0}.bx-mat p:not(.bx-lab){font-size:15px}}

/* about essay */
.bx-essay{display:grid;gap:44px;max-width:1180px;margin:0 auto;padding:0 var(--bx-pad) clamp(100px,12vw,170px);text-align:center}
.bx-essay p:not(.bx-lab){font:300 15px/1.65 var(--ff,Roboto,sans-serif);max-width:340px;margin:0 auto!important;opacity:.88}
@media (min-width:990px){.bx-essay{grid-template-columns:repeat(3,1fr);gap:6vw}}

/* closing */
.bx-end{position:relative;height:min(88svh,940px);min-height:520px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:#000;color:#fff;text-align:center}
.bx-end>img{position:absolute;inset:0}
.bx-end::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.9))}
.bx-end__txt{position:relative;z-index:1;padding:0 var(--bx-pad) clamp(48px,9vh,100px)}
.bx-end .bx-lab{color:rgba(255,255,255,.75)}
.bx-end .bx-h{color:#fff;margin-bottom:30px!important}
.bx-end__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* reviews block on the CRUSHED page */
.t-page .rvs-wrap{background:var(--bg)}

.bx-coll+.bx-mat{margin-top:0}
.bx--about .bx-hero img{object-position:50% 20%}
.bx-state__h{margin-bottom:28px!important}
.bx-state .bx-lede{font-size:clamp(16px,1.6vw,19px);color:var(--mute)}
/* slow light drift on the texture close-ups */
.bx--crushed .bx-duo img{animation:bxDrift 14s ease-in-out infinite alternate;transform-origin:60% 50%}
.bx--crushed .bx-duo figure:last-child img{animation-delay:-7s}
@keyframes bxDrift{from{transform:scale(1) translateX(0);filter:brightness(.92)}to{transform:scale(1.07) translateX(-1.5%);filter:brightness(1.08)}}
@media (prefers-reduced-motion:reduce){.bx--crushed .bx-duo img{animation:none}}