/* assets/css/get-in-touch.css */
/* Get in Touch – page-only styles (loads after styles.css) */

/* ---------------- Hero ---------------- */
.hero--contact{
  position: relative;
  min-height: clamp(360px, 46vh, 520px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero--contact .hero-bg{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 520px at 20% 10%, color-mix(in oklab, var(--brand-600) 24%, #fff) 0%, transparent 65%),
    radial-gradient(1200px 560px at 90% 80%, color-mix(in oklab, var(--brand-600) 16%, #fff) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.08)),
    var(--hero, radial-gradient(circle at 30% 40%, #cfe3ff, #9db9ff));
  background-size: cover; background-position: center;
  filter: saturate(1.05);
}
.hero--contact .hero-inner{
  position: relative; z-index: 1; color:#0f172a;
  text-align: left; max-width: 60rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.hero--contact h1{ margin-top:.25rem; }
.hero--contact .lead{ color: var(--muted); max-width: 52ch; }
.hero--contact .btn-row{ margin-top: .75rem; display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---------------- Contact Grid ---------------- */
.contact-grid{ padding-block: clamp(1.5rem, 5vw, 2.25rem); }
.contact-grid .grid{
  display:grid; gap: clamp(1rem, 3vw, 1.5rem);
  grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 900px){
  .contact-grid .grid{ grid-template-columns: 1fr; }
}

/* Card base */
.card{
  background:#fff;
  border:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

/* Form card */
.form-card{ padding: clamp(1rem, 2.5vw, 1.25rem); }
.form-card h3{ margin-bottom:.35rem; }
.form-card .muted{ margin-bottom:.75rem; }

/* Inputs */
.form-grid{
  display:grid; gap: clamp(.75rem, 2.5vw, 1rem);
  grid-template-columns: 1fr 1fr;
}
.form-grid .full{ grid-column: 1 / -1; }
.field{ display:grid; gap:.35rem; }
.input, .textarea{
  background:#fff; border:1px solid var(--border); border-radius:.8rem;
  padding:.85rem .95rem; outline:none;
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea{ min-height: 160px; resize: vertical; }
.input:focus, .textarea:focus{
  border-color: color-mix(in oklab, var(--brand-600) 55%, #fff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-600) 15%, #fff);
}
.actions{ margin-top:.25rem; }

/* Success */
.form-success{
  margin-top:.9rem; padding:.85rem 1rem;
  border-radius:.8rem; font-weight:600;
  background: color-mix(in oklab, #22c55e 10%, #fff);
  border:1px solid color-mix(in oklab, #22c55e 35%, #fff);
  color:#14532d;
}

/* Info card */
.info-card{
  display:grid; gap:.9rem;
  padding: clamp(1rem, 2.5vw, 1.25rem);
}
.info-list{ display:grid; gap:.75rem; }
.info-item{ display:flex; gap:.7rem; align-items:flex-start; }
.info-ico{
  width:2.2rem; height:2.2rem; display:grid; place-items:center;
  border-radius:.7rem; flex: 0 0 auto;
  background: color-mix(in oklab, var(--brand-600) 12%, #fff);
  border:1px solid color-mix(in oklab, var(--brand-600) 35%, #fff);
  box-shadow: var(--shadow-1);
}
.info-label{ font-weight:700; margin-bottom:.1rem; }
.not-italic{ font-style: normal; }
.mini-cta{ margin-top:.25rem; }
.w-full{ width:100%; }

/* Map placeholder */
.map{
  margin-top:.5rem; width:100%; aspect-ratio: 4/3; border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

/* ---------------- Slim CTA ---------------- */
.cta-slim{
  padding-block: clamp(1.1rem, 3.5vw, 1.75rem);
  background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--brand-600) 8%, #fff));
  border-top:1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.cta-slim-inner{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
@media (max-width: 720px){
  .cta-slim-inner{ flex-direction: column; align-items: flex-start; }
}

/* ---------------- Helpers ---------------- */
.tiny{ font-size:.9rem; }
