/* =========================================================
   CONTACT — page-specific styles
   Loaded AFTER design-services.css, which provides the shared
   design system (container, section-heading, buttons, FAQ,
   final CTA). The site had no forms before this page, so all
   form styling is defined here.

   Used by: contact.php
   ========================================================= */

/* =========================
   HERO
========================= */
.contact-hero { padding:190px 0 90px; text-align:center; }
.contact-hero .section-label { margin-bottom:14px; }
.contact-hero h1 {
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1.06; letter-spacing:-.04em;
  max-width:16ch; margin:0 auto 26px;
}
.contact-hero-lead {
  max-width:640px; margin:0 auto;
  color:#666; font-size:1.06rem; line-height:1.9;
}
.contact-hero-lead + .contact-hero-lead { margin-top:16px; }

/* =========================
   LAYOUT — form left, details right
========================= */
.contact-main { padding:40px 0 130px; }
.contact-layout {
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:34px; align-items:start;
  max-width:1160px; margin:0 auto;
}

/* =========================
   FORM
========================= */
.contact-form-card {
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:28px; padding:48px 44px;
  box-shadow:0 30px 70px rgba(19,72,130,.07);
}
.contact-form-card h2 { font-size:1.5rem; letter-spacing:-.02em; margin-bottom:8px; }
.contact-form-card > p { color:#666; font-size:.98rem; line-height:1.8; margin-bottom:34px; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-field { display:flex; flex-direction:column; }
.form-field.full { grid-column:1 / -1; }
.form-field label {
  font-size:.84rem; font-weight:700; color:var(--primary, #134882);
  letter-spacing:.02em; margin-bottom:9px;
}
.form-field .req { color:#E11931; }

.form-field input,
.form-field select,
.form-field textarea {
  font-family:'Inter',sans-serif; font-size:.98rem; color:#22293a;
  background:var(--bg-soft, #F7F8FA);
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:15px 17px;
  width:100%;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.form-field textarea { resize:vertical; min-height:150px; line-height:1.75; }
.form-field input::placeholder,
.form-field textarea::placeholder { color:#a3a9b5; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline:none;
  background:#fff;
  border-color:var(--primary, #134882);
  box-shadow:0 0 0 4px rgba(19,72,130,.1);
}
.form-field input.has-error,
.form-field select.has-error,
.form-field textarea.has-error { border-color:#E11931; background:#fff; }
.field-error { font-size:.82rem; color:#E11931; margin-top:7px; font-weight:500; }

/* Native select arrow replacement */
.form-field select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23134882' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px;
  padding-right:46px;
  cursor:pointer;
}

/* Contextual link shown when a monthly service is selected */
.service-hint {
  display:none; margin-top:11px;
  font-size:.88rem; font-weight:600;
}
.service-hint.show { display:block; }
.service-hint a {
  color:var(--primary, #134882);
  display:inline-flex; align-items:center; gap:7px;
  transition:gap .3s ease;
}
.service-hint a:hover { gap:12px; }

/* Honeypot — hidden from humans, catches bots */
.hp-field {
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

.form-submit { margin-top:30px; }
.form-submit .btn { width:100%; justify-content:center; }
.form-footnote { font-size:.84rem; color:#999; margin-top:16px; line-height:1.7; }

/* Success / error banners */
.form-alert {
  border-radius:18px; padding:24px 26px; margin-bottom:30px;
  display:flex; gap:16px; align-items:flex-start;
}
.form-alert-icon {
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800;
}
.form-alert h3 { font-size:1.05rem; margin-bottom:6px; letter-spacing:-.01em; }
.form-alert p { font-size:.94rem; line-height:1.75; margin:0; }
.form-alert a { font-weight:700; text-decoration:underline; }

.form-alert.success { background:rgba(19,72,130,.06); border:1px solid rgba(19,72,130,.18); }
.form-alert.success .form-alert-icon { background:var(--primary, #134882); color:#fff; }
.form-alert.success h3 { color:var(--primary, #134882); }
.form-alert.success p { color:#4a5568; }
.form-alert.success a { color:var(--primary, #134882); }

.form-alert.error { background:rgba(225,25,49,.05); border:1px solid rgba(225,25,49,.2); }
.form-alert.error .form-alert-icon { background:#E11931; color:#fff; }
.form-alert.error h3 { color:#E11931; }
.form-alert.error p { color:#4a5568; }
.form-alert.error a { color:#E11931; }

/* =========================
   CONTACT DETAILS — right column
========================= */
.contact-aside { display:flex; flex-direction:column; gap:22px; }

.detail-card {
  background:var(--bg-soft, #F7F8FA);
  border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:40px 36px;
}
.detail-card > h2 { font-size:1.25rem; letter-spacing:-.02em; margin-bottom:8px; }
.detail-card > p { color:#666; font-size:.95rem; line-height:1.8; margin-bottom:30px; }

.detail-list { display:flex; flex-direction:column; gap:24px; }
.detail-item { display:flex; gap:16px; align-items:flex-start; }
.detail-icon {
  flex-shrink:0;
  width:44px; height:44px; border-radius:14px;
  background:rgba(19,72,130,.08); color:var(--primary, #134882);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s ease, color .35s ease, transform .4s var(--ease-premium, ease);
}
.detail-icon svg { width:20px; height:20px; }
.detail-item:hover .detail-icon { background:var(--primary, #134882); color:#fff; transform:scale(1.06); }
.detail-body { padding-top:2px; }
.detail-label {
  display:block; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:#999; margin-bottom:6px;
}
.detail-body a, .detail-body span.detail-value {
  display:block; font-size:1rem; font-weight:600; color:#22293a;
  line-height:1.6; transition:color .3s ease;
}
.detail-body a:hover { color:var(--primary, #134882); }
.detail-body .detail-sub { font-size:.9rem; font-weight:400; color:#777; }

/* Working hours */
.hours-list { display:flex; flex-direction:column; gap:12px; }
.hours-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-bottom:12px; border-bottom:1px solid rgba(0,0,0,.07);
}
.hours-row:last-child { border-bottom:none; padding-bottom:0; }
.hours-day { font-size:.95rem; font-weight:600; color:#22293a; }
.hours-time { font-size:.93rem; color:#666; white-space:nowrap; }
.hours-row.closed .hours-time { color:#E11931; font-weight:600; }

/* =========================
   BEFORE YOU CONTACT US
========================= */
.before-section { background:var(--bg-soft, #F7F8FA); padding:120px 0; }
.before-card {
  max-width:880px; margin:0 auto;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:32px; padding:56px 52px;
}
.before-list {
  list-style:none; padding:0; margin:0 0 30px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px 30px;
}
.before-list li {
  font-size:.98rem; font-weight:500; color:#444;
  padding-left:30px; position:relative; line-height:1.5;
}
.before-list li::before {
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--primary, #134882); font-weight:800; font-size:.88rem;
}
.before-close {
  font-size:.98rem; color:#666; line-height:1.8;
  padding-top:26px; border-top:1px solid rgba(0,0,0,.07);
  margin:0;
}

/* =========================
   MAP
========================= */
.map-section { padding:0 0 130px; }
.map-frame {
  max-width:1160px; margin:0 auto;
  border-radius:28px; overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 30px 70px rgba(19,72,130,.07);
  line-height:0;
}
.map-frame iframe { width:100%; height:420px; border:0; display:block; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:980px) {
  .contact-layout { grid-template-columns:1fr; gap:26px; }
}
@media (max-width:720px) {
  .contact-hero { padding:140px 0 60px; }
  .contact-main { padding:20px 0 90px; }
  .form-grid { grid-template-columns:1fr; gap:20px; }
  .contact-form-card { padding:36px 26px; }
  .detail-card { padding:34px 26px; }
  .before-section { padding:80px 0; }
  .before-card { padding:40px 28px; }
  .before-list { grid-template-columns:1fr; }
  .map-section { padding:0 0 90px; }
  .map-frame { border-radius:20px; }
  .map-frame iframe { height:320px; }
}