/* ============================================================
   CONTACT page. Hero reuses the service pages' .svc-hero-simple
   pattern (see pi-po-migration.css); the form card uses main.css's
   shared card/button/token system.
   ============================================================ */
.svc-hero-simple{
  position: relative; overflow: hidden;
  padding: 140px 24px 64px; text-align: center;
}
@media (max-width: 1024px){ .svc-hero-simple{ padding: 120px 24px 48px; } }
@media (max-width: 640px){ .svc-hero-simple{ padding: 100px 20px 40px; } }
.svc-hero-inner{ position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.svc-hero-lede{ font-size: 16px; line-height: 1.6; max-width: 56ch; margin: 12px auto 0; }

.section-head.centered{ margin-inline: auto; text-align: center; }
.section-head.centered p{ margin-inline: auto; }
.section-head.centered .kicker{ display: flex; justify-content: center; }

/* ---------- Trusted Partnerships -- thin logo strip, cloned from
   klouddata's .kd-contact-trust* (assets/css/contact.css). ---------- */
.trust-partners-section{
  padding: 32px 24px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (max-width: 768px){ .trust-partners-section{ padding-left: 20px; padding-right: 20px; } }
.trust-partners-label{
  max-width: 1280px; margin: 0 auto 22px;
  text-align: center; font-family: var(--font-main);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.trust-partners-row{
  max-width: 1280px; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 44px;
}
.trust-partner{ display: inline-flex; align-items: center; }
.trust-partner img{ width: auto; max-height: 26px; }
.trust-partner-text{
  font-family: var(--font-main); font-size: 15px; font-weight: 700; color: var(--text-secondary);
}
@media (max-width: 780px){
  .trust-partners-row{ display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; gap: 28px 24px; }
}
@media (max-width: 640px){
  .trust-partners-row{ gap: 24px 20px; }
}

.contact-section{ padding-top: 0; }

.contact-card{
  max-width: 600px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(28px, 4vw, 44px);
}
.contact-card h2{ margin: 0 0 24px; text-align: center; }

.contact-form{ display: flex; flex-direction: column; gap: 18px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{ font-family: var(--font-main); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.field label .req{ color: var(--accent-blue); }
.field label .opt{ font-weight: 500; color: var(--text-muted); }

.field input,
.field textarea{
  font-family: var(--font-main); font-size: 15px; color: var(--text-primary);
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--text-muted); }
.field input:focus,
.field textarea:focus{
  outline: none; border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-glow);
}
.field textarea{ resize: vertical; min-height: 80px; }
.field input:user-invalid,
.field textarea:user-invalid{ border-color: var(--bad, #a3271f); }

.field-error{
  display: none; font-size: 13px; color: #a3271f; font-weight: 500;
}
.field.has-error input,
.field.has-error textarea{ border-color: #a3271f; }
.field.has-error .field-error{ display: block; }

/* Honeypot -- present in markup for bots to fill, invisible/unreachable
   for real users and screen readers alike. */
.field-hp{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; left: -9999px;
}

.contact-submit{
  justify-content: center; margin-top: 4px; position: relative;
}
.contact-submit .btn-spinner{
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: cf-spin 0.7s linear infinite;
}
.contact-submit.is-loading .btn-label{ opacity: 0.7; }
.contact-submit.is-loading .btn-spinner{ display: inline-block; }
.contact-submit:disabled{ cursor: not-allowed; opacity: 0.75; }
@keyframes cf-spin{ to{ transform: rotate(360deg); } }

.form-status{
  margin-bottom: 18px; padding: 14px 16px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; line-height: 1.5;
}
.form-status.success{ background: color-mix(in oklab, #00A888 12%, white); color: #0a6b52; }
.form-status.error{ background: color-mix(in oklab, #a3271f 10%, white); color: #a3271f; }

.contact-direct-email{
  margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--text-secondary);
}
.contact-direct-email a{ font-weight: 600; margin-left: 4px; }

@media (max-width: 640px){
  .contact-card{ padding: 28px 20px; }
}

/* ---------- "Prefer a faster back-and-forth?" -- 3 quick-contact cards,
   cloned from klouddata's .kd-contact-quick* (assets/css/contact.css).
   .locations-section right after it is a real color change (light page
   background -> dark navy band), so unlike a plain-to-plain seam (e.g.
   .proof-band -> .lanes-section, which collapses to avoid doubling up
   two same-colored gaps) this one keeps its own full bottom padding --
   same "both sides keep their padding" treatment as .svc-hero-simple's
   bottom + .why-now's restored top on the service pages, so there's a
   real light-colored gap before the dark band starts rather than the
   cards touching it directly. ---------- */
.quick-options-section{ padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 768px){ .quick-options-section{ padding-top: 64px; padding-bottom: 64px; } }
.quick-options-section .section-head{ max-width: 1280px; }
.quick-grid{
  max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 1024px){ .quick-grid{ grid-template-columns: 1fr; } }
.quick-card{
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-decoration: none !important; color: inherit;
  background: var(--bg-card); border: 1px solid #E4E8EF; border-radius: 24px;
  padding: 26px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.quick-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(11,18,36,.22);
  border-color: rgba(0,65,149,.25);
}
.quick-card-top{ display: flex; align-items: center; gap: 12px; }
.quick-card-icon{
  width: 40px; height: 40px; border-radius: 12px;
  background: #004195; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.quick-card-icon svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.quick-card h3{ margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.quick-card-desc{ margin: 0; font-size: 16px; line-height: 1.5; color: #6B7A99; }
.quick-card-link{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-main); font-size: 16px; font-weight: 700; line-height: 26px;
  color: #004195; margin-top: auto;
}
.quick-card-link svg{ flex-shrink: 0; transition: transform .2s ease; }
.quick-card:hover .quick-card-link svg{ transform: translateX(3px); }

/* ---------- Global Locations -- dark band, cloned from klouddata's
   .kd-contact-locations* (assets/css/contact.css). Has its own
   background (a real color break, not a plain seam), so -- same as
   .why-now/.lanes-section/#how on the other pages -- it restores its
   own top padding rather than collapsing against the section before
   it; the bottom padding is the sitewide `main section` default. ---------- */
.locations-section{
  padding-top: 96px; color: #fff;
  background-image: linear-gradient(135deg, #0F1A38 0%, #0B1224 60%);
}
@media (max-width: 768px){ .locations-section{ padding-top: 64px; } }
.locations-section .section-head{ max-width: 620px; margin-inline: auto; }
.locations-section .kicker{ color: var(--accent-teal); }
.locations-section h2{ color: #fff; }
.locations-section .section-head p{ font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.8); }

.location-grid{
  max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 1024px){ .location-grid{ grid-template-columns: 1fr; } }
.location-card{
  position: relative; min-height: 410px; overflow: hidden;
  border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
}
.location-card--gradient{ background-image: linear-gradient(155deg, #16264D 0%, #0B1224 100%); }
.location-badge{
  position: absolute; top: 16px; left: 16px; max-width: calc(100% - 32px); box-sizing: border-box;
  padding: 8px 16px; font-size: 13px; font-weight: 500; color: #fff;
  background: rgba(20,26,40,.55); border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 999px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.location-flag{ display: block; width: 32px; height: 32px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.location-card h3{ margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; color: #fff; }
.location-underline{ display: block; width: 40px; height: 2px; background: #3CC9FF; margin: 8px 0 16px; }
.location-address{ margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.85); }
.location-addr-row{ display: flex; gap: 20px; }
.location-addr-row .location-address{ flex: 1 1 0; min-width: 0; }