section{position:relative;padding:56px 0}
.eyebrow{font:italic 400 13px/1.2 var(--blk);letter-spacing:.08em;text-transform:uppercase;color:#ffd0e6;margin-bottom:10px}
.h2{font-size:clamp(46px,13vw,92px);line-height:1.04;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px rgba(255,10,120,.45))}
.sub{color:var(--soft);font-size:17px;max-width:34em;margin-top:12px}
.bolt{display:block;width:100%;height:clamp(30px,4vw,56px);margin:-14px 0;position:relative;z-index:2}
.js .lazybg{background-image:none!important}
.wall{--spray:url(img/spray-900.webp?v=a793514451);background:linear-gradient(180deg,var(--bg),rgba(7,1,15,.3) 26%,rgba(7,1,15,.3) 74%,var(--bg)),var(--spray) center/cover no-repeat,var(--bg)}

/* who is renting: every card ends on its own action */
.cards{display:grid;gap:14px;margin-top:22px}
.card{display:flex;flex-direction:column;padding:20px 18px;background:rgba(7,1,15,.86);box-shadow:0 0 0 2px var(--line) inset}
.card h3{font-size:clamp(30px,8.4vw,40px);line-height:1.08}
.card p{color:var(--soft);margin:8px 0 14px}
.card .btn{margin-top:auto;width:100%;padding:0 12px;font-size:14.5px}
.card-law{box-shadow:0 0 0 2px var(--pink) inset}

/* sound: real photo, and the clip kept small because the phone footage is soft */
#som{background:radial-gradient(70% 55% at 50% 0,rgba(106,18,255,.3),transparent 70%),var(--bg)}
.gear{display:grid;gap:22px}
.gear-text .btn{margin-top:16px}
.shot{width:min(100%,520px);justify-self:center}
.shot img{width:100%;height:auto}
.clip{position:relative;width:min(100%,340px);justify-self:center}
.clip video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000}
.clip video:not([controls]){cursor:pointer}
.play{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 18px;border:0;cursor:pointer;background:var(--pink);color:var(--on-pink);font:italic 400 15px/1 var(--blk);text-transform:uppercase;white-space:nowrap;box-shadow:0 0 22px rgba(255,10,120,.7)}
.play svg{width:22px;height:22px;fill:currentColor}
.play[hidden]{display:none}
.clip figcaption{margin-top:10px;font-size:13px;color:var(--mute)}
.clip figcaption:empty{display:none}
.clip .fail{color:var(--err);font-weight:700}

/* quote */
#orcamento{--art:image-set(url(img/hero-tall-640.webp?v=c747c029a4) 1x,url(img/hero-tall-1024.webp?v=d520870804) 2x);background:linear-gradient(180deg,var(--bg),rgba(7,1,15,.66) 30%,rgba(7,1,15,.8) 76%,var(--bg)),var(--art) center bottom/cover no-repeat,var(--bg)}
.orc{display:grid;gap:26px}
.form{background:rgba(0,0,0,.9);box-shadow:0 0 0 2px var(--pink-hi),0 0 26px rgba(255,10,120,.45);padding:20px 16px;display:grid;gap:16px}
.fld{border:0;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.fld>label,.fld legend{font:400 13.5px/1.1 var(--blk);text-transform:uppercase;letter-spacing:.05em;color:var(--pink-hi);padding:0;margin-bottom:6px}
.two{display:grid;gap:16px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.opts label{position:relative;min-width:0}
.opts.ev label:last-child{grid-column:1/-1}
.opts input{position:absolute;opacity:0;inset:0}
.opts span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;height:100%;padding:6px 4px;border:2px solid #4a2a63;font:400 clamp(16px,4.7vw,19px)/1.1 var(--disp);text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.opts.st{grid-template-columns:1fr}
.opts input:checked+span{border-color:var(--pink);background:var(--pink);color:var(--on-pink)}
.opts input:focus-visible+span{outline:3px solid var(--volt);outline-offset:2px}
input[type=text],input[type=date]{width:100%;min-height:52px;padding:12px 14px;border-radius:0;border:2px solid #4a2a63;background:#0e0518;color:#fff;font:600 16px/1.2 var(--body);color-scheme:dark}
input::placeholder{color:var(--mute)}
input[type=text]:focus,input[type=date]:focus{border-color:var(--pink);outline:none}
/* WebKit paints today's date in gray on an empty field, as if it were already filled */
#dt.empty:not(:focus)::-webkit-datetime-edit{opacity:0}
input[aria-invalid=true]{border-color:var(--err)}
.err{color:var(--err);font-size:14px;font-weight:700}
.warn{color:var(--volt);font-size:14px;font-weight:700}
.sent{color:var(--soft);font-size:14px;font-weight:700;text-align:center}
.sent a{color:#fff}
.err:empty,.warn:empty{display:none}
.preview{border:1px solid #4a2a63;padding:10px 12px;font-size:14px;color:var(--soft);white-space:pre-line}
.preview small{display:block;font:400 11px/1 var(--blk);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.form .btn{width:100%;padding:0 10px;white-space:nowrap}

/* closing */
.final{padding:48px 0 56px;overflow:hidden;background:radial-gradient(70% 60% at 50% 40%,rgba(106,18,255,.28),transparent 72%),var(--bg)}
.endgrid{display:grid;gap:22px;justify-items:center;text-align:center}
.moon{width:min(78vw,420px);height:auto;mix-blend-mode:screen}
.final .h2{font-size:clamp(34px,10vw,56px)}
.final .tel{width:100%;max-width:440px;margin:18px auto 0}
.endtext{width:100%}
.endlogo{width:min(100%,520px);height:auto;margin:0 auto 14px}
.final .sub{margin:12px auto 0}
.final .links{display:grid;gap:10px;width:100%;max-width:440px;margin:14px auto 0}
footer{border-top:2px solid var(--line);padding:26px 0 30px;color:var(--mute);font-size:14px}
footer .wrap{display:grid;gap:6px}
footer a{color:#fff}

@media (max-width:359px){
 .card .btn{padding:0 6px;gap:6px;font-size:13px;white-space:nowrap}
}
@media (min-width:600px){
 .two{grid-template-columns:1fr 1fr}
 .opts{grid-template-columns:repeat(3,1fr)}
 .opts.st{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
 section{padding:56px 0}
 .wall{--spray:url(img/spray-1672.webp?v=b9cdbd7e1c)}
 #orcamento{--art:url(img/hero-wide-1672.webp?v=a2c8f94883)}
 .cards{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
 .gear{grid-template-columns:minmax(0,1fr) minmax(0,400px) 320px;gap:40px;align-items:center}
 .shot,.clip{width:100%}
 .orc{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
 .form{padding:24px}
 .final{padding:56px 0}
 .endgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:56px;align-items:center;justify-items:start;text-align:left}
 .moon{width:min(100%,500px);justify-self:center}
 .endlogo{margin-left:0}
 .final .tel{margin-left:0}
 .final .sub{margin-left:0}
 .final .links{grid-template-columns:auto auto;justify-content:start;margin-left:0;max-width:none}
}