/* =========================================================
   LINKWORLD EXPRESS
   CONTACT — PAGE-SPECIFIC STYLES
   Shared tokens/header/footer/hero/buttons/cta/loader live
   in style.css. This file only holds what's unique here.
========================================================= */


/* the "Email" row's value ("Support Desk") sits right where
   the inherited stamp position lands - nudge the stamp down
   and out of the way of the row text beside it */
.hero-stamp{
  top:150px;
}


/* =========================================================
   CONTACT CHANNELS
========================================================= */
.contact-channels{ padding:100px 0; }

.channels-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
}

.channel-card{
  background:var(--paper);
  padding:36px 32px;
  text-align:center;
}

.channel-icon{
  width:50px; height:50px;
  margin:0 auto 18px;
  background:var(--navy);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
}

.channel-card .eyebrow{
  justify-content:center;
  margin-bottom:12px;
}

.channel-card h3{
  font-family:var(--display);
  font-size:19px;
  color:var(--navy);
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:10px;
  word-break:break-word;
}

.channel-card p{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   CONTACT FORM
========================================================= */
.contact-form-section{
  background:var(--navy-2);
  padding:100px 0;
  color:var(--white);
}

.form-wrapper{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:start;
}

.form-intro .eyebrow{ color:var(--orange); }
.form-intro .eyebrow::before{ background:var(--orange); }

.form-intro h2{
  font-family:var(--display);
  font-size:clamp(26px,3vw,34px);
  margin:14px 0 16px;
  line-height:1.1;
}

.form-intro > p{
  color:#AFB9C4;
  font-size:15px;
  margin-bottom:30px;
}

.office-map-card{
  border:1px solid rgba(255,255,255,.15);
}

#officeMap{
  width:100%;
  height:220px;
  filter:grayscale(.3) contrast(1.05);
}

.office-map-label{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--navy);
  color:#C6CDD6;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.05em;
  padding:14px 18px;
}

.office-map-label i{ color:var(--orange); }

.contact-form .form-card{
  background:var(--paper);
  color:var(--ink);
  padding:34px;
  border-top:3px solid var(--orange);
  margin-bottom:0;
}

.contact-form .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:26px;
}

.contact-form .form-group.full-width{ grid-column:1 / -1; }

.contact-form .form-group label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--white);
  padding:12px 14px;
  font-family:var(--body);
  font-size:14px;
  color:var(--ink);
}

.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus{
  outline:2px solid var(--orange);
  outline-offset:1px;
  border-color:var(--orange);
}

.contact-form .form-group textarea{ resize:vertical; }

.contact-form .submit-request-btn{
  background:var(--orange);
  color:var(--white);
  border:none;
  padding:16px 36px;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-family:var(--body);
}

.contact-form .submit-request-btn:hover{ background:var(--orange-dk); }

.contact-form .submit-request-btn:disabled{ opacity:.7; cursor:not-allowed; }


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:980px){
  .channels-grid{ grid-template-columns:1fr; }
  .form-wrapper{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .contact-form .form-grid{ grid-template-columns:1fr; }
  .contact-form .form-card{ padding:26px 22px; }
  .channel-card h3{ font-size:15px; word-break:break-word; }
}