/* contact: one soft card over the hero arch (same card/chip/button recipes as the index deck and the about page) */
.hero.page.still.arch .container{padding-bottom:clamp(110px,14vw,190px)}
.contact{--ink:#101a2b;--gold:#ffd21e;--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,1.5,.5,1);max-width:900px;margin:-80px auto 0;padding:0 22px 30px;background:#fff;color:var(--ink)}
.contact h2,.contact p{margin:0}
.contact :focus-visible{outline:3px solid rgba(16,26,43,.55);outline-offset:4px;border-radius:12px}
.contact .sheet{position:relative;z-index:3;margin-top:20px;animation:rise .9s var(--spring) both .15s}
@keyframes rise{from{opacity:0;translate:0 60px;rotate:-1.2deg}to{opacity:1;translate:0 0;rotate:0deg}}

/* contact methods: icon + text */
.contact .tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin:0}
.contact .tile{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;background:#f5f5f7;border-radius:22px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 10px 24px rgba(0,0,0,.08);transition:translate .15s var(--ease),box-shadow .2s;font:600 16px/1.3 Inter,sans-serif;color:var(--ink);text-decoration:none}
.contact a.tile:hover{translate:0 -2px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 14px 28px rgba(0,0,0,.12)}
.contact .ic{display:grid;place-items:center}
.contact .ic svg{width:22px;height:22px;fill:currentColor}
.contact .ic.mail{color:#ea4335}
.contact .ic.li{color:#0a66c2}
.contact .ic.loc{color:#2fd16b}

/* heading */
.contact .chip{display:inline-block;padding:7px 22px;border-radius:999px;background:#20D9FF;color:var(--ink);font:400 20px/1.2 Comicy,Helvetica,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.contact .top{text-align:center;margin:80px 0 52px}
.contact .h{letter-spacing:.1em;margin:0 auto;font:400 clamp(30px,4.4vw,48px)/1 Comicy,Helvetica,sans-serif;text-transform:uppercase;width:fit-content;background:linear-gradient(115deg,#55ccff 0%,#22a2ff 50%,#1e6cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact .lead{max-width:430px;margin:14px auto 0;color:#3a4458;font-size:17.5px;line-height:1.5}

/* form */
.contact form{display:grid;gap:18px;padding:36px;background:#f5f5f7;border-radius:30px;box-shadow:0 2px 6px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1)}
.contact .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact .field{display:flex;flex-direction:column;gap:7px}
.contact .field label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7385}
.contact .field input,.contact .field textarea{width:100%;padding:15px 18px;border:2px solid transparent;border-radius:18px;font:inherit;font-size:17px;color:var(--ink);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:border-color .2s,box-shadow .2s}
.contact .field input::placeholder,.contact .field textarea::placeholder{color:#9aa1b2}
.contact .field input:focus,.contact .field textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,210,30,.3)}
.contact .field textarea{min-height:150px;resize:vertical}
/* yellow pill button, same as the deck "Play" button */
.contact .btn{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-width:120px;min-height:50px;padding:0 30px;border:0;color:var(--ink);font:700 16px/1 Inter,sans-serif;background:var(--gold);border-radius:999px;cursor:pointer;transition:translate .15s var(--ease),background .2s,scale .15s var(--ease)}
.contact .btn:hover{background:#ffe04a;translate:0 -1px}
.contact .btn:active{scale:.96}
.contact .btn:disabled{opacity:.6;cursor:wait}
.contact .status{justify-self:end;font-size:15px;font-weight:600}
.contact .status:empty{display:none}
.contact .status.ok{color:#168a45}
.contact .status.err{color:#c62828}

@media(max-width:820px){
 .contact{padding:0 16px 70px}
 .contact .sheet{margin-top:10px}
 .contact form{padding:22px}
 .contact .two{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.contact .sheet{animation:none}}