/* Final contact screen: dark pop-art artwork and a cream writing panel. */
#contact.banana-contact{background-color:var(--ink);background-image:radial-gradient(#fff1d209 .8px,transparent 1px);background-size:6px 6px;color:var(--cream);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr) auto;gap:2dvh 5%;padding:4dvh 6% 2dvh;align-items:center}
#contact.banana-contact .contact-art{height:100%;min-height:0;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}
#contact.banana-contact h2{align-self:flex-start;color:var(--cream);font:400 clamp(42px,min(8.6vw,12dvh),120px)/1.04 Anton,Impact,sans-serif;letter-spacing:.01em;text-shadow:4px 4px var(--pink);margin:0;position:relative;z-index:3}
#contact.banana-contact h2:after{content:'✦';color:var(--yellow);font:400 .55em/1 Arial,sans-serif;text-shadow:none;position:absolute;left:calc(100% + 18px);top:8%}
.contact-phone{position:relative;flex:none;min-height:0;width:min(100%,49dvh);aspect-ratio:1;isolation:isolate;margin-top:2dvh}
.phone-base,.phone-receiver{position:absolute;aspect-ratio:1;background:url('/assets/contact-phone-sprite-v2.png') left center/200% 100% no-repeat;pointer-events:none}
.phone-cord{position:absolute;left:-12%;top:5%;width:100%;height:100%;z-index:3;aspect-ratio:1;background:url('/assets/contact-phone-cord-v2.png') left center/200% 100% no-repeat;pointer-events:none}
.phone-base{inset:0;z-index:2;width:100%;height:100%}
.phone-receiver{background-position:right center;top:-14%;left:8%;width:92%;height:92%;z-index:1;transform-origin:50% 60%}
.phone-ring{position:absolute;top:10%;right:0;z-index:3;color:var(--pink);font-size:60px;opacity:0}
#contact.banana-contact.is-ringing .phone-receiver{animation:phone-vibrate 5s infinite}#contact.banana-contact.is-ringing .phone-ring{animation:phone-marks 5s infinite}
@keyframes phone-vibrate{0%,20%,100%{transform:translate(0) rotate(0)}2%,6%,10%,14%,18%{transform:translate(-2px,-2px) rotate(-2deg)}4%,8%,12%,16%{transform:translate(2px,-2px) rotate(2deg)}}
@keyframes phone-marks{0%,20%,100%{opacity:0}2%,18%{opacity:1}}
#contact.banana-contact .contact-form-wrap{min-width:0;background:var(--cream);color:var(--ink);padding:clamp(20px,3.2vw,52px);box-shadow:10px 10px var(--pink)}
#contact.banana-contact form{display:grid;gap:1.7dvh}#contact.banana-contact form>label:not(.consent){font:700 clamp(15px,1.5vw,23px)/1.4 Arial,sans-serif;margin:0}
#contact.banana-contact input:not([type=checkbox]),#contact.banana-contact textarea{display:block;width:100%;background:transparent;color:var(--ink);border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:8px 0;font:400 16px/1.4 Arial,sans-serif;box-sizing:border-box}
#contact.banana-contact textarea{border:2px solid var(--ink);margin-top:10px;padding:10px;height:17dvh;min-height:65px;resize:vertical}
#contact.banana-contact .consent{font:400 clamp(11px,1vw,14px)/1.5 Arial,sans-serif;margin:0}#contact.banana-contact .consent a{text-decoration:underline}
#contact.banana-contact .button{width:100%;background:var(--ink);color:var(--yellow);border:2px solid var(--ink);border-radius:0;box-shadow:none;justify-content:center;gap:24px;font:400 clamp(24px,3vw,40px)/1.2 Anton,Impact,sans-serif;text-transform:uppercase;padding:10px 20px}
#contact.banana-contact .button:hover{background:var(--yellow);color:var(--ink)}
#contact.banana-contact #form-status{font:400 13px/1.4 Arial,sans-serif;margin:0}#contact.banana-contact #form-status:empty{display:none}
.contact-sound[hidden]{display:none!important}
#contact.banana-contact .contact-footer{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:4px 28px;align-items:center;margin:0;padding:12px 0 0;border-top:1px solid #fff1d277;background:transparent;color:var(--cream);height:auto;min-height:0}
.contact-footer nav{grid-column:2;display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;font:400 12px/1.4 Arial,sans-serif}.contact-footer small{grid-column:2;font:400 10px/1.5 Arial,sans-serif;opacity:.75}.contact-footer-logo{grid-column:1;grid-row:1/3;display:block}.contact-footer-logo img{display:block;width:clamp(100px,10vw,151px);height:auto}
@media(max-width:700px){
 #contact.banana-contact{grid-template-columns:1fr;grid-template-rows:23dvh auto auto;gap:2dvh;padding:2dvh 6%}
 #contact.banana-contact .contact-art{display:flex;align-items:flex-start;justify-content:center;min-height:150px}#contact.banana-contact h2{font-size:clamp(30px,7.4vw,48px);text-shadow:2px 2px var(--pink)}#contact.banana-contact h2:after{left:calc(100% + 8px);font-size:.4em}
 .contact-phone{position:absolute;right:-2%;bottom:-1dvh;width:24dvh;max-width:49%;margin:0}.phone-ring{font-size:32px}
 #contact.banana-contact .contact-form-wrap{padding:18px 20px;box-shadow:6px 6px var(--pink)}#contact.banana-contact form{gap:1dvh}#contact.banana-contact form>label:not(.consent){font-size:14px}#contact.banana-contact input:not([type=checkbox]){padding:5px 0}#contact.banana-contact textarea{height:11dvh;margin-top:6px}#contact.banana-contact .button{font-size:25px;padding:8px 16px}#contact.banana-contact .consent{font-size:10px}
 #contact.banana-contact .contact-footer{padding-top:8px;gap:5px 12px}.contact-footer nav{gap:7px 12px;font-size:10px}.contact-footer small{font-size:8px}.contact-footer-logo img{width:80px}
}
@media(prefers-reduced-motion:reduce){#contact.banana-contact.is-ringing .phone-receiver,#contact.banana-contact.is-ringing .phone-ring{animation:none}}

#contact .contact-footer{padding-right:155px}
@media(max-width:700px){#contact .contact-footer{padding-right:0;padding-bottom:76px}}

@media(max-width:700px){#contact.banana-contact{grid-template-rows:18dvh auto auto;align-content:start}#contact.banana-contact .contact-art{min-height:0}.contact-phone{width:21dvh}#contact.banana-contact .contact-footer{padding-bottom:88px}.contact-footer small{grid-column:1/-1}}