/* the contact page: everything on ONE screen. The left says who we are and how to reach us; the right is the form. On a phone it scrolls normally. */
.contact-page { min-height: 100vh; }
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(90% 70% at 85% 0%, #0f3a5e 0%, transparent 60%), var(--navy); }
.backdrop i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: .32; animation: drift 18s ease-in-out infinite alternate; }
.backdrop i:first-of-type { background: #14b8a6; top: -18vmax; right: -12vmax; }
.backdrop i:nth-of-type(2) { background: #2563eb; bottom: -22vmax; left: -14vmax; animation-delay: -9s; }
.backdrop img { position: absolute; right: -4vmax; bottom: -6vmax; width: 38vmax; opacity: .05; transform: rotate(-12deg); }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.12); } }
.contact-page .bar { background: rgba(8, 22, 44, .72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding-block: 8px; }
.contact-page .brand img { height: 40px; }

.wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; min-height: 100vh; max-width: 1200px; margin: 0 auto; padding: 84px clamp(20px, 4vw, 48px) 20px; }
.intro { display: grid; gap: clamp(10px, 2.2vh, 20px); }
.intro h1 { font-size: clamp(30px, 5.4vh, 54px); }
.intro .lead { font-size: clamp(15px, 2.1vh, 18px); line-height: 1.55; max-width: 50ch; }

/* the fast ways to reach us */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick a { display: flex; align-items: center; gap: 12px; padding: clamp(8px, 1.5vh, 13px) 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); text-decoration: none; color: #fff; transition: border-color .2s, transform .2s, background .2s; }
.quick a.wide { grid-column: 1 / -1; }
.quick a:hover { border-color: var(--teal); background: rgba(20, 184, 166, .12); transform: translateY(-2px); }
.quick i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #14b8a6, #0f7a6e); flex: none; }
.quick svg { width: 20px; height: 20px; color: #fff; }
.quick span { display: grid; font: 700 15px var(--text); }
.quick small { font: 600 10px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }

/* what happens next: three small steps in a row */
.next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.next li { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .04); }
.next b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-d); font: 800 13px var(--display); }
.next span { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.45; color: var(--soft); }
.next strong { font-size: 14px; color: #fff; }
.where { margin: 0; font-size: 12.5px; letter-spacing: .02em; color: var(--soft); }

/* the form */
.formcard { position: relative; padding: clamp(18px, 2.8vh, 30px) clamp(20px, 2.6vw, 34px); border: 1px solid rgba(20, 184, 166, .35); border-radius: 26px; background: linear-gradient(180deg, rgba(10, 30, 58, .92), rgba(8, 22, 44, .92)); backdrop-filter: blur(16px); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7), 0 0 80px -40px rgba(20, 184, 166, .5); }
.formcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 26px 26px 0 0; background: linear-gradient(90deg, #14b8a6, #38bdf8); }
.formcard h2 { font-size: clamp(20px, 3vh, 26px); margin: 0 0 clamp(8px, 1.6vh, 14px); }
.sub em, .field em { color: var(--teal); font-style: normal; }
form { display: grid; gap: clamp(10px, 1.7vh, 16px); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 6px; }
.field > span, .lbl { display: flex; align-items: baseline; gap: 4px; margin: 0; font: 600 14px/1.2 var(--text); letter-spacing: .01em; color: #eaf3fb; }
.field small { margin-left: auto; font: 500 11.5px var(--text); letter-spacing: .04em; text-transform: uppercase; color: #7f95ad; }
input:not([type=radio]), textarea { width: 100%; padding: clamp(9px, 1.4vh, 13px) 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; font: 400 16px/1.4 var(--text); transition: border-color .2s, background .2s, box-shadow .2s; }
textarea { display: block; resize: none; line-height: 1.5; height: clamp(76px, 12vh, 108px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(20, 184, 166, .6) transparent; }
textarea::-webkit-scrollbar { width: 8px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(20, 184, 166, .55); }
input::placeholder, textarea::placeholder { color: #71879f; }
input:not([type=radio]):hover, textarea:hover { border-color: rgba(255, 255, 255, .34); }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--teal); background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 4px rgba(20, 184, 166, .22); }
.field.bad input, .field.bad textarea { border-color: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .18); }

/* the choices: four equal tiles (icon above a short name) and a three-part switch for the reply */
.choices { display: grid; gap: 8px; }
.choices label { cursor: pointer; display: block; }
.choices label > input { position: absolute; opacity: 0; pointer-events: none; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tiles label > span { display: grid; justify-items: center; align-content: center; gap: 5px; height: clamp(56px, 8.4vh, 70px); padding: 6px 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: rgba(255, 255, 255, .03); font: 600 13px/1.1 var(--text); color: var(--soft); text-align: center; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.tiles label > span i { width: 22px; height: 22px; color: var(--teal); }
.tiles label > span svg { width: 22px; height: 22px; display: block; }
.tiles label:hover > span { border-color: rgba(20, 184, 166, .65); color: #fff; transform: translateY(-1px); }
.tiles label > input:checked + span { border-color: var(--teal); background: rgba(20, 184, 166, .18); color: #fff; box-shadow: inset 0 0 0 1px var(--teal); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.seg label > span { display: block; padding: 8px 6px; border-radius: 999px; font: 600 13.5px var(--text); color: var(--soft); text-align: center; transition: background .2s, color .2s; }
.seg label:hover > span { color: #fff; }
.seg label > input:checked + span { background: var(--teal-d); color: #fff; box-shadow: 0 4px 14px -4px rgba(20, 184, 166, .6); }
.choices label > input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.send { border: 0; cursor: pointer; font: 700 16px var(--text); padding: clamp(11px, 1.8vh, 15px) 28px; width: 100%; }
.send:disabled { opacity: .6; cursor: wait; }
.status { margin: 0; min-height: 1.2em; font-size: 14px; line-height: 1.4; color: #7ef0e0; }
.status:empty { display: none; }
.status.error { color: #fca5a5; }
.status a { color: #fff; }
.thanks { display: grid; gap: 14px; padding: 40px 6px; text-align: center; justify-items: center; }
.thanks b { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #14b8a6, #0f7a6e); font-size: 34px; box-shadow: 0 0 40px -6px #14b8a6; }
.thanks h2 { margin: 0; }
.thanks p { margin: 0; color: var(--soft); line-height: 1.6; max-width: 36ch; }

/* a short screen: tighten a little more so it still fits */
@media (min-width: 961px) and (max-height: 760px) { .next, .where { display: none; } .quick a { padding-block: 7px; } }
/* a phone or a narrow window: one column, normal scrolling */
@media (max-width: 960px) { .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 96px; padding-bottom: 40px; } .intro h1 { font-size: clamp(30px, 8vw, 44px); } textarea { height: 100px; } }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr 1fr; } .next { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .backdrop i { animation: none; } .quick a:hover { transform: none; } }

/* follow us: three tiles, the same family as the call / WhatsApp / email tiles */
.socials.on-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.socials.on-contact a { height: auto; justify-content: flex-start; gap: 10px; padding: clamp(8px, 1.5vh, 12px) 12px; border-radius: 16px; background: var(--glass); font-size: 14px; }
.socials.on-contact svg { box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #14b8a6, #0f7a6e); }
.socials.on-contact a:nth-child(1) svg { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.socials.on-contact a:nth-child(2) svg { background: linear-gradient(135deg, #f59e0b, #db2777 60%, #7c3aed); }
.socials.on-contact a:nth-child(3) svg { background: linear-gradient(135deg, #22d3ee, #0f172a 80%); }
@media (max-width: 560px) { .socials.on-contact a span { display: none; } .socials.on-contact a { justify-content: center; } }