/* contact.css */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-detail h2 { margin-bottom: 1.5rem; }
.contact-line { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 0; border-top: 1px solid var(--line); transition: padding-left 0.4s var(--ease-out); }
.contact-line:last-child { border-bottom: 1px solid var(--line); }
.contact-line:hover { padding-left: 0.5rem; }
.cl-label { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.cl-value { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }

/* Floating-label form */
.contact-form { position: relative; display: grid; gap: 1.1rem; }
.field { position: relative; }
.field input, .field select, .field textarea {
  width: 100%; padding: 1.4rem 1rem 0.6rem; border-radius: 14px;
  background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit; color: var(--ink); transition: box-shadow 0.3s ease;
}
.field textarea { padding-top: 1.6rem; resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--teal); }
.field label {
  position: absolute; left: 1rem; top: 1rem; color: color-mix(in srgb, var(--ink) 55%, transparent);
  pointer-events: none; transition: transform 0.25s var(--ease-out), font-size 0.25s var(--ease-out), color 0.25s ease;
  transform-origin: left top;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + .lbl-float, .field select:valid + .lbl-float {
  transform: translateY(-0.7rem) scale(0.78); color: var(--teal);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23071E22' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.contact-form .btn { justify-self: start; margin-top: 0.4rem; }

/* Success overlay */
.form-success { position: absolute; inset: 0; background: var(--paper); border-radius: 18px; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6rem; padding: 2rem; }
.contact-form.is-sent .form-success { display: flex; }
.fs-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: var(--paper); display: grid; place-items: center; margin-bottom: 0.5rem; }
.fs-mark svg { width: 30px; height: 30px; transform: rotate(-45deg); }

.map-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 50px -28px rgba(7,30,34,0.5); border: 1px solid var(--line); }
.map-wrap iframe { display: block; filter: grayscale(0.1) contrast(1.02); }