.pb-ico { width:76px; height:76px; display:grid; place-items:center; font-family:var(--f-titre); font-size:30px; background:var(--pure); color:var(--anti); margin-bottom:26px; background-image:radial-gradient(rgba(128,128,128,.2) 1px,transparent 1.4px); background-size:8px 8px; }
.sec-sub { margin-top:14px; font-family:var(--f-sous); font-size:12.5px; letter-spacing:1.4px; line-height:1.55; color:var(--dim-2); max-width:44ch; }
.steps { counter-reset:s; display:grid; gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); margin-top:30px; }
.step { background:var(--bg); display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:26px 24px; transition:background .35s var(--ease); }
.step:hover { background:var(--panel); }
.step::before { counter-increment:s; content:counter(s,decimal-leading-zero); font-family:var(--f-sous); font-size:12px; letter-spacing:2px; color:var(--dim); padding-top:4px; }
.step b { font-size:17px; }
.step p { color:var(--dim); font-size:14px; margin-top:4px; }
.band-quote { padding:clamp(50px,9vh,110px) var(--gut); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); position:relative; z-index:2; }
.shots { position:relative; display:flex; justify-content:center; padding:clamp(20px,4vw,44px) 0; }
.shot { display:block; width:min(228px, 46%); height:auto; box-shadow:0 24px 60px rgba(0,0,0,.22); }
.shot--back { position:absolute; left:8%; top:clamp(46px,7vw,84px); width:min(196px, 40%); transform:rotate(-6deg); opacity:.85; }
.shot--front { transform:rotate(3deg); }
.band-quote p { max-width:840px; margin:0 auto; text-align:center; font-family:var(--f-titre); font-weight:700; letter-spacing:-1.4px; font-size:clamp(21px,3.2vw,38px); line-height:1.25; }
.pb-scene { position:absolute; right:calc(var(--gut) * -0.5); top:14%; z-index:1; width:min(760px, 58vw); pointer-events:none; opacity:.5; -webkit-mask-image:linear-gradient(100deg, transparent 0%, #000 34%, #000 82%, transparent 100%); mask-image:linear-gradient(100deg, transparent 0%, #000 34%, #000 82%, transparent 100%); }
.pb-scene-in { transform:rotate(-3deg); }
@media (max-width:1100px) {
  .pb-scene { position:static; order:2; width:min(520px,100%); margin:38px auto 0; opacity:1; -webkit-mask-image:none; mask-image:none; transform:none !important; }
  .pb-scene-in { transform:rotate(-1.5deg); }
}
.hero .wrap { position:relative; z-index:2; order:1; }
.pb-ed { background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line-2), 0 30px 70px rgba(0,0,0,.09); }
.pb-ed-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); }
.pb-ed-bar i { width:8px; height:8px; background:var(--line-2); }
.pb-ed-bar b { margin-left:10px; font-family:var(--f-sous); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); font-weight:400; }
.pb-ed-bar u { margin-left:auto; text-decoration:none; font-family:var(--f-sous); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--line-2); }
.pb-ed-shot { display:block; width:100%; height:auto; }
.pb-shot { position:relative; width:152px; }
.pb-shot img { display:block; width:100%; height:auto; box-shadow:0 18px 40px rgba(0,0,0,.24); }
.pb-shot--float { position:absolute; left:-52px; bottom:-58px; width:126px; transform:rotate(-5deg); }
@media (max-width:1100px) {
  .pb-shot--float { left:-8px; bottom:-42px; width:min(104px,26%); }
}
.pb-handles i { position:absolute; width:7px; height:7px; background:var(--pure); }
.pb-handles i:nth-child(1) { left:-4px;  top:-4px; }
.pb-handles i:nth-child(2) { right:-4px; top:-4px; }
.pb-handles i:nth-child(3) { left:-4px;  bottom:-4px; }
.pb-handles i:nth-child(4) { right:-4px; bottom:-4px; }
.split .shots { order:-1; }
@media (max-width:820px) {
  .split .shots { order:2; }
}
@media (max-width:820px) {
  .shots { padding:10px 0 26px; }
  .shot { width:min(220px, 56%); }
  .shot--back { left:2%; width:min(180px, 46%); }
  .band-quote { padding:44px var(--gut); }
  .band-quote p { font-size:clamp(18px,5.4vw,24px); letter-spacing:-.8px; }
  .mesh > div { flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:8px 12px; }
  .mesh .fi { font-size:17px; }
  .mesh p { width:100%; font-size:13px; }
}
@media (max-width:560px) {
  .shot--back { display:none; }
  .shot--front { transform:rotate(0deg); width:min(230px,72%); }
}
