/* Contact · other ways in — four inboxes, then the offices as typographic plates (no city photographs) and a
   plate to book a call. The live "open now" line is filled by contact/reach.js. */

.ct-boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bdh-gap)}
.ct-box{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.ct-box__ico{display:grid;place-items:center;width:42px;height:42px;margin-bottom:6px;border-radius:var(--r-sm);background:var(--paper-3);color:var(--ink)}
.ct-box__ico .xt-ico{width:22px;height:22px}
.ct-box__t{font-family:var(--f-h);font-size:var(--t-h3);font-weight:500;letter-spacing:-.012em;line-height:1.28;color:var(--ink)}
.ct-box__d{font-size:var(--t-sm);line-height:1.6;color:var(--txt)}
.ct-box__a{display:flex;align-items:center;min-height:44px;margin-top:auto;padding-top:4px;font-family:var(--f);font-size:var(--t-xs);font-weight:500;letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px}
.ct-box__a:hover{color:var(--blue-d);text-decoration-color:var(--blue)}
.ct-box__sla{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line-2);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ct-box__sla .xt-ico{width:16px;height:16px}
.ct-box__go{align-self:flex-start}

.ct-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bdh-gap);margin-top:var(--bdh-gap-l)}
.ct-plate{display:flex;flex-direction:column;gap:14px;min-height:320px;padding:28px;border-top:2px solid var(--ink);background:var(--paper);border-radius:0 0 var(--r-lg) var(--r-lg)}
.ct-plate__k{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ct-plate__now{color:var(--muted)}
.ct-plate__now:empty{display:none}
.ct-plate__now.is-open{color:var(--blue-d)}
.ct-plate__city{font-family:var(--f-h);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:500;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.ct-plate__addr{display:flex;flex-direction:column;gap:2px;font-style:normal;font-size:var(--t-sm);line-height:1.6;color:var(--txt)}
.ct-plate__u{font-family:var(--f);font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;color:var(--ink)}
.ct-plate__hrs{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:var(--t-xs);color:var(--muted)}
.ct-plate__hrs .xt-ico{width:16px;height:16px}
.ct-plate__map{align-self:flex-start}
.ct-plate--book{background:var(--ink);border-top-color:var(--blue);border-radius:0 0 var(--r-lg) var(--r-lg)}
.ct-plate--book .ct-plate__k{color:var(--on-ink-3)}
.ct-plate--book .ct-plate__city{color:var(--on-ink)}
.ct-plate__p{font-size:var(--t-sm);line-height:1.65;color:var(--on-ink-2)}
.ct-plate--book .btn{align-self:flex-start;margin-top:auto}

/* the six parts of every card share rows, so each address, reply aim and link sits level with its neighbours' */
@supports (grid-template-rows:subgrid){
  @media (min-width:641px){
    .ct-box{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:10px;align-content:start}
    .ct-box__a{align-self:end}
  }
}
@media (max-width:1180px){ .ct-boxes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1023px){
  .ct-plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-plate--book{grid-column:1 / -1;min-height:0}
}
@media (max-width:640px){
  .ct-boxes,.ct-plates{grid-template-columns:minmax(0,1fr)}
  .ct-boxes{gap:12px}
  .ct-box{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:20px}
  .ct-box__ico{grid-row:1 / span 2;margin:0}
  .ct-box__t{align-self:center}
  .ct-box__d{grid-column:2}
  .ct-box__a,.ct-box__sla,.ct-box__go{grid-column:1 / -1}
  .ct-box__a{padding-top:8px}
  .ct-plate{min-height:0;padding:24px 20px}
}