/* ============================================================
   About / Contact pages — reuses the same navy/gold system.
   ============================================================ */

.page-hero { padding-top: calc(var(--header-h, 210px) + var(--space-5)); padding-bottom: var(--space-7); }
.page-hero-eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-3); }
.page-hero-title { font-family: var(--font-heading); font-size: 40px; color: var(--white); line-height: 1.05; }
.page-hero-sub { color: rgba(255,255,255,0.65); font-size: 15px; margin-top: var(--space-3); max-width: 60ch; }

/* ---------- About ---------- */
.about-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
}
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.3fr 1fr; } }
.about-desc { color: var(--gray); font-size: 16px; line-height: 1.75; margin-bottom: var(--space-4); max-width: 65ch; }
.about-why { display: grid; gap: var(--space-6); align-content: start; }
.about-why .why-choose-icon { background: var(--white); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.3fr 1fr; } }

.contact-form-wrap {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-6);
}
.contact-form-heading { color: var(--navy-900) !important; margin-bottom: var(--space-5); }

/* Contact Form 7 default markup, restyled to the design system */
.contact-form-wrap .wpcf7-form { display: block; }
.contact-form-wrap .aht-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 520px) { .contact-form-wrap .aht-form-row { grid-template-columns: 1fr; } }
.contact-form-wrap .wpcf7-form-control-wrap { display: block; margin-bottom: var(--space-4); }
.contact-form-wrap .aht-form-row .wpcf7-form-control-wrap { margin-bottom: 0; }
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--off-white); color: var(--ink);
  font-family: var(--font-body); font-size: 15px;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.contact-form-wrap textarea { min-height: 130px; resize: vertical; }
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
  outline: none; border-color: var(--navy-900); background: var(--white);
}
.contact-form-wrap input.wpcf7-not-valid,
.contact-form-wrap textarea.wpcf7-not-valid { border-color: #c0392b; }
.contact-form-wrap .wpcf7-not-valid-tip { color: #c0392b; font-size: 12.5px; margin-top: var(--space-1); }
.contact-form-wrap .wpcf7-response-output {
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: 13.5px; color: var(--ink);
}
.contact-form-wrap .wpcf7-mail-sent-ok { border-color: #2e7d32; color: #1e5c22; background: #eef7ee; }
.contact-form-wrap .wpcf7-validation-errors,
.contact-form-wrap .wpcf7-acceptance-missing { border-color: #c0392b; color: #7c2318; background: #fbeceb; }
.contact-form-wrap input[type="submit"] {
  background: var(--gold); color: var(--navy-900); border: none;
  border-radius: var(--radius-sm); padding: 13px 32px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), transform 0.3s var(--ease-out-quart);
}
.contact-form-wrap input[type="submit"]:hover { background: var(--gold-dark); transform: translateY(-2px); }
.contact-form-wrap .wpcf7-spinner { margin-left: var(--space-3); }

.contact-info { display: grid; gap: var(--space-5); align-content: start; }
.contact-info-item h3 {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray); margin-bottom: var(--space-2);
}
.contact-info-item p { font-size: 16px; color: var(--ink); }
.contact-info-item a { color: var(--ink); text-decoration: none; }
.contact-info-item a:hover { color: var(--gold-dark); }
.contact-map {
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border);
  margin-top: var(--space-2);
}