/* ══════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════ */

/* — Hero intro paragraph, shifted right of center (margin-based, stays
   responsive instead of overflowing on narrow viewports) — */
.page-hero .hero-shift-right{margin-left:auto;margin-right:180px}
@media(max-width:640px){.page-hero .hero-shift-right{margin-right:0}}

.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-16);align-items:start}
@media(max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr)}}

.contact-info-card{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-950));
  border-radius:var(--radius-lg);padding:var(--space-8);color:var(--white);
}
.contact-info-card h3{color:var(--white);margin-bottom:var(--space-6)}
.contact-row{display:flex;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-6)}
.contact-row:last-child{margin-bottom:0}
.contact-row-icon{
  flex:none;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
}
.contact-row-icon svg{width:19px;height:19px}
.contact-row strong{display:block;font-size:.9rem}
.contact-row span{display:block;font-size:.84rem;color:rgba(255,255,255,.65);margin-top:2px}
.contact-row span a{color:inherit;text-decoration:none}
.contact-row span a:hover{color:var(--gold-l);text-decoration:underline}

.required-mark{color:#c0392b}

.phone-input-group{
  display:flex;align-items:stretch;
  border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);
  background:var(--white);transition:border-color var(--dur-fast);
}
.phone-input-group:focus-within{border-color:var(--gold)}
.field.invalid .phone-input-group{border-color:#b3261e}
.phone-input-group .phone-code-select{
  flex:0 0 auto;width:auto;max-width:56px;
  padding:14px 8px 14px 14px;border:none;border-right:1.5px solid var(--border-soft);
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  background:transparent;color:var(--text-body);font-size:1rem;
  overflow:hidden;text-overflow:clip;white-space:nowrap;
}
.phone-code-select:focus{outline:none}

/* Number field sits over a "ghost" layer: typed characters visually cover
   the matching example-format characters underneath as the customer types,
   so the placeholder appears to disappear one character at a time. */
.phone-number-wrap{position:relative;flex:1;min-width:0;display:flex}
.phone-number-ghost{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:14px 16px;white-space:pre;overflow:hidden;
  pointer-events:none;user-select:none;
  font:inherit;font-variant-numeric:tabular-nums;color:var(--gray-400);
}
.phone-number-ghost .ghost-typed{color:transparent}
.phone-input-group .phone-number-input{
  position:relative;z-index:1;width:100%;min-width:0;padding:14px 16px;
  border:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:transparent;
  font-variant-numeric:tabular-nums;
}
.phone-number-input:focus{outline:none}
@media(max-width:520px){
  .phone-input-group .phone-code-select{max-width:48px}
}

.location-card{
  margin-top:var(--space-6);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-soft);
}
.location-card svg{display:block;width:100%;height:auto}
.location-caption{padding:var(--space-4) var(--space-6);background:var(--bg-alt);font-size:.85rem;color:var(--gray-600)}

/* — Success popup (see js/contact.js) — */
#contact-modal-overlay{
  position:fixed;inset:0;background:rgba(7,20,41,.85);
  display:none;align-items:center;justify-content:center;z-index:10000;padding:var(--space-6);
}
#contact-modal-overlay.open{display:flex}
.contact-modal{
  background:var(--white);border-radius:var(--radius-lg);padding:var(--space-8);
  max-width:420px;width:100%;text-align:center;position:relative;
  box-shadow:var(--shadow-lg);
}
.contact-modal-close{
  position:absolute;top:14px;right:14px;background:none;border:none;
  font-size:26px;line-height:1;cursor:pointer;color:var(--gray-400);
}
.contact-modal-close:hover{color:var(--navy-900)}
.contact-modal h3{color:var(--navy-900);margin-bottom:var(--space-6)}
.contact-modal-ref{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1.7rem;
  letter-spacing:.12em;color:var(--gold-d);background:var(--navy-50);
  padding:12px 28px;border-radius:var(--radius-md);margin-bottom:var(--space-6);
}
.contact-modal p{color:var(--gray-600);line-height:1.75;margin-bottom:var(--space-6)}
.contact-modal .btn{width:100%}