.contact__info { display: grid; gap: 32px; min-width: 0; }
.contact__list { display: grid; border-top: 1px solid var(--line); }
.contact__list > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.contact__list b { font-weight: 500; font-variant-numeric: tabular-nums; }
.avail { display: inline-flex; align-items: center; gap: 8px; }
.avail i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.avail i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(74, 222, 128, .6); animation: ping-ok 2s ease-out infinite; }
.copy__tag { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--mute); transition: background .3s, color .3s; flex: none; }
.copy.is-copied .copy__tag { background: var(--ok); color: var(--ink); border-color: var(--ok); }

.phone-chat { border-radius: 40px; padding: 10px; background: linear-gradient(145deg, #3a3d48, #16181f 40%, #2b2e38); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.chat__head { display: grid; justify-items: center; gap: 6px; padding: 16px 16px 12px; background: rgba(28, 28, 32, .9); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.chat__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--iris), #4a3bc4); font: 800 16px/1 var(--f-display); letter-spacing: -.04em; }
.chat__name { font: 600 13px/1 var(--f-body); display: flex; gap: 6px; align-items: center; }
.chat__name small { color: var(--mute); font-weight: 400; }
.bubble--summary { display: grid; gap: 6px; }
.bubble--summary dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.bubble--summary dt { color: var(--mute); }
.bubble--summary dd { margin: 0; }
.receipt { align-self: flex-end; font-size: 11px; color: var(--mute); margin: -2px 4px 6px; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 0 14px 10px; }
.chat__chips button { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--imsg); color: #6fb4ff; font-size: 14px; animation: bubble .4s var(--ease-spring) both; transition: background .25s, color .25s; }
.chat__chips button:hover { background: var(--imsg); color: #fff; }
.chat__form { display: flex; gap: 8px; align-items: center; padding: 10px 12px 14px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(28, 28, 32, .9); }
.chat__form input { flex: 1; min-width: 0; padding: 10px 16px; border-radius: 99px; border: 1px solid #3a3a3f; background: transparent; outline: none; font-size: 16px; }
.chat__form input:focus { border-color: var(--imsg); }
.chat__send { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--imsg); display: grid; place-items: center; transition: transform .3s var(--ease-spring), opacity .3s; }
.chat__send:disabled { opacity: .35; transform: scale(.85); }
.chat__send svg { width: 16px; height: 16px; }
.chat__actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 14px 10px; flex-wrap: wrap; }
.chat__actions button { padding: 10px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.chat__actions .primary { background: var(--imsg); color: #fff; }
.chat__actions .ghost { border: 1px solid #3a3a3f; color: var(--mute); }
.chat__note { color: var(--mute); font-size: 13px; margin-top: 14px; text-align: center; }
@media (pointer: coarse) {

  .chat__send { width: 40px; height: 40px; }
  .chat__send svg { width: 18px; height: 18px; }
  .chat__chips button, .chat__actions button { min-height: 40px; }
  .copy__tag { padding: 9px 12px; }
}

/* ---------- contact: the monkey is your messenger (contact.js) ---------- */
.chat__avatar { position: relative; overflow: visible; }
.chat__avatar svg { width: 40px; height: auto; margin-top: -6px; overflow: visible; }
.mk-paw { transform-box: fill-box; transform-origin: 0 100%; opacity: 0; transform: rotate(-30deg) scale(.6); transition: opacity .25s, transform .4s var(--ease-spring); }
.mk-what { transform-box: fill-box; transform-origin: 0 100%; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--ease-spring); }
/* talking: the visor glows while a reply is typed */
.chat__avatar[data-mood="talk"] .mk-visor { animation: mk-glow .45s ease-in-out infinite alternate; }
.chat__avatar[data-mood="talk"] .mk-tip { animation-duration: .35s; }
/* reading what you type */
.chat__avatar[data-mood="read"] .mk-eyes { translate: 0 1.4px; }
.chat__avatar[data-mood="read"] .mk-head { transform: rotate(4deg) translateY(1px); }
/* reactions */
.chat__avatar[data-mood="wave"] .mk-paw { opacity: 1; animation: mk-wave .35s ease-in-out infinite alternate; }
.chat__avatar[data-mood="wave"] .mk-grin, .chat__avatar[data-mood="yay"] .mk-grin, .chat__avatar[data-mood="love"] .mk-grin { opacity: 1; }
.chat__avatar[data-mood="wave"] .mk-mouth, .chat__avatar[data-mood="yay"] .mk-mouth, .chat__avatar[data-mood="love"] .mk-mouth { opacity: 0; }
.chat__avatar[data-mood="yay"] .mk-head { animation: mk-hop .3s ease-in-out 4 alternate; }
.chat__avatar[data-mood="love"] .mk-eyes { opacity: 0; }
.chat__avatar[data-mood="love"] .mk-hearts { opacity: 1; animation: mk-beat .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.chat__avatar[data-mood="hmm"] .mk-head { transform: rotate(-12deg); }
.chat__avatar[data-mood="hmm"] .mk-what { opacity: 1; transform: none; }
/* typing bubble: the monkey taps on a tiny phone */
.typing--mk { padding: 6px 12px 5px; }
.typing--mk svg { width: 58px; height: auto; display: block; }
.typing__paw { animation: mk-tap .18s ease-in-out infinite alternate; }
.typing__paw--r { animation-delay: -.09s; }
.typing__scr { animation: mk-scr .9s steps(2) infinite; }
/* send: the monkey jetpacks the message off the top of the screen */
.jet { position: fixed; z-index: 250; width: 90px; pointer-events: none; animation: jet-go 2.1s both; }
.jet svg { display: block; width: 100%; height: auto; overflow: visible; }
.jet__flame { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: jet-flame .08s ease-in-out .5s infinite alternate; }
@media (prefers-reduced-motion: reduce) {
 .chat__avatar *, .typing--mk * { animation: none !important; }
}

/* =========================================================
   Contact: a rooftop at sunset
   The site's only warm sky: indigo overhead, melting through magenta into orange where the sun goes down behind the
   city. The monkey sits on the ledge with its phone and reacts with the chat; a dish beams signal rings up, paper
   planes carry messages across the sky. The chat itself is unchanged and sits on top
   ========================================================= */
.rf-page { position: relative; isolation: isolate; overflow: clip; } /* a little night over the words */
.rf__stars { left: 0; right: 0; top: 0; height: 52%; opacity: .8; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.rf__stars svg { display: block; width: 100%; height: 100%; }
/* the city: as wide as the screen but never narrower than 1000px, kept to the bottom and centred on --fx */
.rf__city { --fx: 50%; left: 50%; bottom: 0; width: max(100%, 1000px); aspect-ratio: 1600 / 520; transform: translateX(calc(var(--fx) * -1)); }
.rf__city > svg, .rf__city > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.rf__twinkle--a { animation: rf-twinkle 3.6s ease-in-out infinite alternate; }
.rf__twinkle--b { animation: rf-twinkle 1.9s ease-in-out -.8s infinite alternate; }
.rf__city > i, .rf__city > span { position: absolute; left: calc(var(--x) / 1600 * 100%); top: calc(var(--y) / 520 * 100%); }
.rf__blink { width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 12px 4px rgba(255, 77, 109, .6); animation: st-blink 1.4s steps(1) infinite; }
/* signal rings from the dish, up and to the right */
.rf__rings { width: 0; height: 0; }
.rf__rings i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: rgba(159, 232, 255, .9); border-right-color: rgba(159, 232, 255, .9); transform: rotate(-10deg) scale(.15); opacity: 0; animation: rf-ring 2.7s ease-out infinite; }
.rf__rings i:nth-child(2) { animation-delay: .9s; } .rf__rings i:nth-child(3) { animation-delay: 1.8s; }
/* the monkey on the ledge: its feet hang over the front */
.rf__mk { width: clamp(78px, 8%, 128px); aspect-ratio: 90 / 120; translate: -50% -80%; }
.rf__mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rf__mk-tail { transform-box: fill-box; transform-origin: 0 0; animation: st-tail 2.4s ease-in-out infinite alternate; }
.rf__mk-hand { transform-box: fill-box; transform-origin: center; animation: st-type .17s ease-in-out infinite alternate; }
.rf__mk-hand--r { animation-delay: -.08s; animation-duration: .2s; }
.rf__mk-glow { animation: rf-glow 2.2s ease-in-out infinite alternate; }
.rf__mk[data-mood="idle"] .rf__mk-hand, .rf__mk[data-mood="wave"] .rf__mk-hand, .rf__mk[data-mood="yay"] .rf__mk-hand, .rf__mk[data-mood="love"] .rf__mk-hand { animation-play-state: paused; }
.rf__mk[data-mood="talk"] .mk-visor { animation: mk-glow .45s ease-in-out infinite alternate; }
.rf__mk[data-mood="read"] .mk-eyes { translate: 0 1.4px; }
.rf__mk[data-mood="wave"] .mk-grin, .rf__mk[data-mood="yay"] .mk-grin, .rf__mk[data-mood="love"] .mk-grin { opacity: 1; }
.rf__mk[data-mood="wave"] .mk-mouth, .rf__mk[data-mood="yay"] .mk-mouth, .rf__mk[data-mood="love"] .mk-mouth { opacity: 0; }
.rf__mk[data-mood="yay"] .mk-head { animation: mk-hop .3s ease-in-out 4 alternate; }
.rf__mk[data-mood="love"] .mk-eyes { opacity: 0; }
.rf__mk[data-mood="love"] .mk-hearts { opacity: 1; animation: mk-beat .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
/* paper planes gliding across the sky, and a few birds */
.rf__planes { inset: 0; }
.rf__planes i { position: absolute; left: 0; top: var(--y, 20%); width: 22px; height: 14px; opacity: 0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 6 22 0 9 14 7 8z' fill='%23fff'/%3E%3Cpath d='M7 8 22 0 9 9z' fill='%23d8d2ea'/%3E%3C/svg%3E"); animation: rf-plane var(--t, 22s) linear var(--d, 0s) infinite; }
.rf__planes i:nth-child(1) { --y: 18%; --t: 24s; --d: -4s; }
.rf__planes i:nth-child(2) { --y: 34%; --t: 30s; --d: -17s; width: 16px; height: 10px; }
.rf__planes i:nth-child(3) { --y: 10%; --t: 36s; --d: -26s; width: 13px; height: 8px; }
.rf__birds { left: 0; top: 24%; }
.rf__birds i { position: absolute; width: 14px; height: 6px; border-top: 2px solid #1a0f24; border-radius: 50% 50% 0 0; animation: rf-birds 40s linear infinite, fk-flap .5s ease-in-out infinite alternate; }
.rf__birds i:nth-child(2) { left: 18px; top: 8px; animation-delay: -.2s, -.15s; } .rf__birds i:nth-child(3) { left: 34px; top: -4px; animation-delay: -.4s, -.3s; } .rf__birds i:nth-child(4) { left: 50px; top: 10px; animation-delay: -.6s, -.05s; }
/* the chat's phone catches the sunset */
.rf-page .phone-chat { box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 90px -30px rgba(255, 130, 110, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.rf-page .contact { padding-bottom: clamp(220px, 30vw, 380px); }
.rf-page .chat__note { color: rgba(255, 236, 220, .8); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.rf-page.is-off *, .rf-page.is-off *::before, .rf-page.is-off *::after { animation-play-state: paused !important; }
@media (max-width: 860px) {

  .rf__city { --fx: 38%; }
  /* phones: a shorter chat, so the whole phone and its input fit on screen with the conversation just begun */
  .chat { height: min(560px, 66svh); }
  .rf-page .contact { padding-bottom: 230px; }
}

@media (prefers-reduced-motion: reduce) {
 .rf__planes, .rf__birds { display: none; }
}

@keyframes mk-glow { to { fill: #e2dcff; } }
@keyframes mk-wave { from { transform: rotate(-18deg); } to { transform: rotate(16deg); } }
@keyframes mk-hop { to { transform: translateY(-3px) rotate(-5deg); } }
@keyframes mk-beat { to { transform: scale(1.25); } }
@keyframes mk-tap { from { transform: translateY(-2px); } to { transform: translateY(1px); } }
@keyframes mk-scr { 50% { opacity: .6; } }
@keyframes jet-go {
  0% { transform: translateY(40px) scale(.5); opacity: 0; animation-timing-function: var(--ease-spring); }
  14% { transform: none; opacity: 1; }
  28% { transform: translateY(6px) scale(1.04, .94); animation-timing-function: cubic-bezier(.55, 0, .8, .35); }
  100% { transform: translate(40px, -115vh) rotate(9deg) scale(.75); opacity: 1; }
}
@keyframes jet-flame { from { transform: scaleY(.8); } to { transform: scaleY(1.25); } }
@keyframes rf-twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes rf-ring { 0% { transform: rotate(-10deg) scale(.15); opacity: 0; } 15% { opacity: 1; } 100% { transform: rotate(-10deg) scale(1.9); opacity: 0; } }
@keyframes rf-glow { from { opacity: .14; } to { opacity: .3; } }
@keyframes rf-plane { 0% { transform: translate3d(-40px, 30px, 0) rotate(-6deg); opacity: 0; } 6% { opacity: .9; } 50% { transform: translate3d(50vw, -10px, 0) rotate(-2deg); } 94% { opacity: .9; } 100% { transform: translate3d(calc(100vw + 40px), 18px, 0) rotate(-8deg); opacity: 0; } }
@keyframes rf-birds { from { transform: translate3d(calc(100vw + 60px), 0, 0); } to { transform: translate3d(-120px, -40px, 0); } }