/* Contact page (/contact): a photo beside the title, four ways to reach us as
   cards, the message form (the shared contact card), the three steps after a
   message arrives, and the company details beside a second photo. */

.contact-hero{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);gap:clamp(40px, 5vw, 80px);align-items:center;}

/* ---------- four ways to reach us ---------- */
.contact-ways{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;}
.contact-way{
  display:flex;flex-direction:column;gap:10px;padding:28px 24px;border-radius:var(--r-lg);
  background:linear-gradient(160deg, var(--navy-high), var(--navy-raised));border:1px solid var(--line);
  box-shadow:var(--shadow-edge);transition:border-color var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.contact-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:50%;border:1px solid var(--line-hover);color:var(--text);}
.contact-way h2{font-size:var(--fs-h4);line-height:1.2;}
.contact-way p{font-size:12px;line-height:1.6;color:var(--text-muted);}
/* The address or action sits at the foot of the card, however long the line above it runs. */
.contact-way-link{margin-top:auto;padding-top:10px;font-size:12px;color:var(--text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;}

/* ---------- what happens next ---------- */
.contact-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, 1fr);gap:32px;counter-reset:step;}
.contact-steps li{counter-increment:step;padding-top:20px;border-top:1px solid var(--line-strong);}
.contact-steps li::before{content:"0" counter(step);display:block;margin-bottom:14px;font-size:clamp(34px, 2vw + 20px, 52px);font-weight:200;line-height:1;letter-spacing:-0.03em;color:var(--periwinkle);}
.contact-steps h3{font-size:var(--fs-h4);font-weight:200;letter-spacing:-0.02em;}
.contact-steps p{margin-top:8px;max-width:36ch;font-size:12px;line-height:1.65;color:var(--text-muted);}

@media (hover:hover){
  .contact-way:hover{border-color:var(--line-hover);transform:translateY(-3px);}
}

@media (max-width:1080px){
  .contact-ways{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .contact-hero,.contact-steps{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .contact-ways{grid-template-columns:1fr;}
}