/* ===== Contact point before the footer: art left, light form right, no boxes (the owner's VSky layout) ===== */
.contact-sec{padding-top:0;padding-bottom:120px}
.talk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:40px 64px;align-items:start;position:relative}
.talk-copy{min-width:0}
.talk .eyebrow{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.talk h2{margin:0;font-weight:800;font-size:clamp(40px,4.6vw,76px);letter-spacing:-.05em;line-height:.98}
.talk .scr{margin:18px 0 0;font-size:clamp(24px,2.4vw,32px);color:var(--sticky);line-height:1.2}
.talk .scr s{color:#F3D58A;text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:2.5px;text-decoration-skip-ink:none}

/* the night scene bleeds to the viewport edges along the top of the block; the street lies on its lower part */
.contact{position:relative}
.talk .street-band{grid-column:1 / -1;width:100vw;margin:0 0 16px calc(50% - 50vw)}
.street{position:absolute;left:0;right:0;bottom:0;height:132px;z-index:3}
.strip{position:absolute;inset:0;z-index:2;pointer-events:none}
.strip canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
/* the box stands a third of the way in, so the moped, bench and pool spread across the scene rather than huddling
   in the left corner; still far enough from the edge for the moped to ride in and park before it */
.postdoor{position:absolute;left:36%;bottom:10px;z-index:1;visibility:hidden;width:58px;height:38px;border-radius:6px 6px 4px 4px;background:#16204A;border:2px solid #2C3766;box-shadow:0 8px 18px -8px rgba(0,0,0,.8);overflow:visible}
.postdoor .slot{position:absolute;left:10px;right:10px;top:9px;height:4px;border-radius:2px;background:var(--gold)}
.postdoor .flap{position:absolute;left:8px;right:8px;top:17px;height:13px;border-radius:3px;background:#2C3766;border-bottom:2px solid #0C1430;transform-origin:50% 0;transition:transform .35s ease}
.postdoor.open .flap{transform:rotateX(-70deg) translateY(-2px)}
.postdoor .letter{position:absolute;left:14px;top:20px;width:30px;height:16px;border-radius:2px;background:#fff;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .35s}
.postdoor .letter::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;background:#C9D0E2}
.postdoor.open:not(.taken) .letter{opacity:1;transform:translateY(-2px)}

/* the form: two columns, thin borders, nothing boxed */
.talk-form{min-width:0}
.form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:6px;font:500 12px/1.3 var(--mono);color:var(--muted)}
.form .wide{grid-column:1 / -1}
.form input,.form select,.form textarea{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:400 16px var(--font);min-height:50px}
.form textarea{resize:vertical;min-height:110px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.form .chk{grid-template-columns:20px 1fr;align-items:start;gap:10px;font:400 13px/1.4 var(--font);color:var(--soft)}
.form .chk input{width:20px;height:20px;min-height:0;margin-top:1px;padding:0}
.form .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.form .send{border-radius:999px;min-height:52px;padding:0 28px}
.form .pref{grid-template-columns:auto auto;align-items:center;gap:10px}
.form .pref select{min-height:44px;padding:8px 36px 8px 14px;border-radius:999px;font-size:14px;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3BD' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px}
.form .ok,.form .err{display:none;margin:0;font:500 14px/1.4 var(--font)}
.form .ok{color:#9BE8B4}
.form .err{color:#FFB3B8}
.form .ok[data-show],.form .err[data-show],.form.sent .ok,.form.failed .err{display:block}

/* the channel buttons: frosted glass, the brand colour only as a tint behind the icon and a glow under it */
.chan-icons{margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:14px} /* the same two columns as name / email */
.ci{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px 8px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -18px rgba(0,0,0,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);text-decoration:none;font-weight:700;font-size:14px;transition:transform .15s,border-color .15s,box-shadow .15s}
.ci:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 34px -16px var(--c1)}
.ci span{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.ci small{font-weight:500;font-size:12px;color:var(--muted)}
.ci svg{flex:none;box-sizing:content-box;width:22px;height:22px;padding:8px;border-radius:12px;color:var(--c1);background:linear-gradient(160deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 42%,var(--tint) 100%);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 18px -10px var(--c1)}
.ci.wa{--c1:#25D366;--tint:rgba(37,211,102,.38)}
.ci.tg{--c1:#2AABEE;--tint:rgba(42,171,238,.38)}

@media (max-width:1000px){.talk{grid-template-columns:1fr;gap:28px}}
@media (max-width:760px){
  .contact-sec{padding-top:24px;padding-bottom:96px}
  .street{height:100px}
  .postdoor{left:150px;bottom:8px;width:52px;height:34px}
  .form{grid-template-columns:1fr}
  .form .send{width:100%}
  .chan-icons{gap:8px;flex-wrap:nowrap;justify-content:stretch;margin-bottom:14px}
  .ci{flex:1 1 0;min-width:0;justify-content:center;padding:8px 10px;min-height:56px;font-size:14px}
  .ci span small{display:none}
}