/* ==========================================================================
   contact-us.css — page-specific styles for contact-us.html ONLY.
   Reuses variables, typography, header, footer, dropdown/accordion,
   .disclaimer, .btn*, .contact-details, .enquire-form, .form-field,
   .form-error, .form-success classes already defined in the shared style.css.
   Nothing in style.css is modified here.
   ========================================================================== */


/* ---------- Contact info + map ---------- */
.contact-reach{background:var(--navy-deep);color:#fff;padding:100px 0}
.contact-reach h2{color:#fff}
.contact-reach .section-sub{color:#AAB4C2}

.contact-reach-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

.contact-details a{color:inherit;transition:color .3s var(--ease)}
.contact-details a:hover{color:var(--gold)}

.map-embed{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  aspect-ratio:4/3;background:#0d1b2e;
}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Forms ---------- */
.forms-section{padding:100px 0;background:var(--cream)}
.forms-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}

.form-intro{font-size:13.5px;color:var(--grey);line-height:1.7;margin:-10px 0 22px}

.phone-group{display:flex;gap:10px}
.phone-group .country-code{flex:0 0 112px;width:112px;padding-left:10px;padding-right:6px}
.phone-group input{flex:1 1 auto}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .contact-reach-grid{grid-template-columns:1fr;gap:44px}
  .forms-grid{grid-template-columns:1fr;gap:32px}
  .map-embed{aspect-ratio:16/9}
}

@media (max-width:860px){
  
}

@media (max-width:480px){
  .phone-group{flex-direction:column}
  .phone-group .country-code{width:100%;flex:none}
}

@media (max-width:640px){
  .contact-reach{padding:70px 0}
  .forms-section{padding:70px 0}
}