/* ============================================================
   Contact page — built from Martin's comp. Hero and the closing
   CTA are artwork; the form, the contact details and the trust
   strip are live so the phone, text and email are tappable.
   ============================================================ */
.ct-hero{display:block;background:#fff;line-height:0;}
.ct-hero > img.plate{display:block;width:100%;height:auto;}

.ct-main{
  display:grid;grid-template-columns:47.5% 1fr;gap:1.6cqw;align-items:stretch;
  padding:2.2cqw 2.2cqw 1.4cqw;background:#f4f8fd;container-type:inline-size;line-height:normal;
}
.ct-form-card{background:#fff;border-radius:.6cqw;padding:2cqw 2.2cqw 2.2cqw;box-shadow:0 .12cqw .5cqw rgba(16,38,70,.1);}
.ct-eyebrow{
  margin:0 0 .5cqw;display:flex;align-items:center;gap:.9cqw;
  font-family:var(--ui);font-weight:900;font-size:1.02cqw;letter-spacing:.16em;color:var(--navy);
}
.ct-eyebrow::before{content:"";width:3.4cqw;height:.16cqw;background:var(--red);}
.ct-eyebrow span{color:var(--red);}
.ct-h2{
  margin:0 0 .5cqw;font-family:var(--display);font-weight:700;font-size:2.6cqw;line-height:1.05;
  color:var(--navy);text-transform:uppercase;
}
.ct-h2 span{color:var(--red);}
.ct-loc .ct-h2 span{display:block;}
.ct-sub{margin:0 0 1.3cqw;font-family:var(--ui);font-size:1.02cqw;color:#4a5768;}
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:.9cqw;}
.ct-fld{position:relative;display:block;}
.ct-wide{grid-column:1 / -1;}
.ct-ic{position:absolute;left:.9cqw;top:1.05cqw;width:1.3cqw;height:1.3cqw;pointer-events:none;}
.ct-ic svg{width:100%;height:100%;fill:var(--navy);}
.ct-area .ct-ic{top:.95cqw;}
.ct-form input,.ct-form select,.ct-form textarea{
  width:100%;box-sizing:border-box;padding:.95cqw 1cqw .95cqw 3cqw;
  border:1px solid #d5e0ee;border-radius:.35cqw;background:#fff;
  font-family:var(--ui);font-size:1.02cqw;color:var(--navy);
}
.ct-form select{padding-left:1cqw;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#12305e 50%),linear-gradient(135deg,#12305e 50%,transparent 50%);
  background-position:calc(100% - 1.4cqw) 1.5cqw,calc(100% - 1cqw) 1.5cqw;
  background-size:.4cqw .4cqw,.4cqw .4cqw;background-repeat:no-repeat;}
.ct-form textarea{padding-left:3cqw;resize:vertical;min-height:5.4cqw;}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:#8b98a8;}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:2px solid var(--navy);outline-offset:1px;}
.ct-send{
  grid-column:1 / -1;display:inline-flex;align-items:center;justify-content:center;gap:1cqw;
  height:3.6cqw;border:0;border-radius:.35cqw;background:var(--red);cursor:pointer;
  font-family:var(--ui);font-weight:900;font-size:1.22cqw;letter-spacing:.04em;color:#fff;
}
.ct-send svg{width:1.4cqw;height:1.4cqw;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ct-send:hover{background:var(--red-dark);}
.ct-secure{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:.5cqw;margin:.2cqw 0 0;
  font-family:var(--ui);font-size:.86cqw;color:#6b7a8d;
}
.ct-secure svg{width:.95cqw;height:.95cqw;fill:#6b7a8d;}

.ct-side{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:.6cqw;overflow:hidden;}
.ct-photo{display:block;width:100%;height:100%;object-fit:cover;}
.ct-details{
  display:grid;align-content:center;gap:1.2cqw;margin:0;padding:2cqw 1.6cqw;list-style:none;
  background:linear-gradient(180deg,#123a75 0%,#0d2a5c 100%);
}
.ct-details li{display:flex;align-items:center;gap:1cqw;}
.ct-bub{
  flex:0 0 auto;display:grid;place-items:center;width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--red);
}
.ct-bub svg{width:52%;height:52%;fill:#fff;}
.ct-details b{display:block;font-family:var(--ui);font-weight:900;font-size:.95cqw;letter-spacing:.06em;color:#fff;}
.ct-details a,.ct-details span{
  display:block;margin-top:.15cqw;font-family:var(--ui);font-size:1.12cqw;line-height:1.3;
  color:#fff;text-decoration:none;
}
.ct-details a:hover{text-decoration:underline;}

.ct-strip{
  display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:1.4cqw 2.2cqw;
  list-style:none;text-align:center;background:#eef4fb;container-type:inline-size;
}
.ct-strip li{padding:0 1cqw;border-left:1px solid #d3dfee;}
.ct-strip li:first-child{border-left:0;}
.ct-strip span{display:block;width:2.6cqw;height:2.6cqw;margin:0 auto .55cqw;}
.ct-strip svg{width:100%;height:100%;fill:var(--red);}
.ct-strip b{display:block;font-family:var(--display);font-weight:700;font-size:1.12cqw;line-height:1.15;color:var(--navy);text-transform:uppercase;}

.ct-loc{
  display:grid;grid-template-columns:42% 1fr;gap:2cqw;align-items:center;
  padding:2.4cqw 2.2cqw;background:#fff;container-type:inline-size;line-height:normal;
}
.ct-eyebrow2{
  margin:0 0 .6cqw;display:flex;align-items:center;gap:.9cqw;
  font-family:var(--ui);font-weight:900;font-size:1.02cqw;letter-spacing:.16em;color:var(--red);
}
.ct-eyebrow2::before{content:"";width:3.4cqw;height:.16cqw;background:var(--red);}
.ct-locp{margin:0 0 1.5cqw;font-family:var(--ui);font-size:1.08cqw;line-height:1.5;color:#3b4a5c;}
.ct-dir{
  display:inline-flex;align-items:center;gap:.9cqw;height:3.4cqw;padding:0 1.8cqw;border-radius:.35cqw;
  background:var(--red);color:#fff;text-decoration:none;font-family:var(--ui);font-weight:900;font-size:1.16cqw;
}
.ct-dir > svg{width:1.4cqw;height:1.4cqw;fill:#fff;}
.ct-dir i svg{width:1.2cqw;height:1.2cqw;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ct-dir:hover{background:var(--red-dark);}
.ct-map{display:block;line-height:0;border-radius:.6cqw;overflow:hidden;box-shadow:0 .12cqw .5cqw rgba(16,38,70,.12);}
.ct-map img{display:block;width:100%;height:auto;}

.ct-cta{position:relative;display:block;background:#fff;line-height:0;}
.ct-cta > img.plate{display:block;width:100%;height:auto;}
.ct-cta-hit{position:absolute;left:69.5%;top:36%;width:25.5%;height:28%;border-radius:.4cqw;}
.ct-cta-hit:hover{background:rgba(255,255,255,.12);}

@media (max-width:1000px){
  .ct-main{grid-template-columns:1fr;gap:16px;padding:16px;}
  .ct-form-card{padding:18px 16px 20px;border-radius:8px;}
  .ct-eyebrow,.ct-eyebrow2{font-size:.72rem;}
  .ct-eyebrow::before,.ct-eyebrow2::before{width:30px;height:2px;}
  .ct-h2{font-size:1.5rem;}
  .ct-sub{font-size:.95rem;margin-bottom:14px;}
  .ct-form{grid-template-columns:1fr;gap:10px;}
  .ct-ic{left:12px;top:15px;width:16px;height:16px;}
  .ct-form input,.ct-form select,.ct-form textarea{padding:13px 12px 13px 38px;font-size:1rem;border-radius:6px;}
  .ct-form select{padding-left:12px;background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px,6px 6px;}
  .ct-form textarea{min-height:90px;}
  .ct-send{height:52px;font-size:1rem;border-radius:6px;gap:10px;}
  .ct-send svg{width:18px;height:18px;}
  .ct-secure{font-size:.8rem;}
  .ct-side{grid-template-columns:1fr;border-radius:8px;}
  .ct-photo{height:220px;}
  .ct-details{padding:18px 16px;gap:14px;}
  .ct-bub{width:42px;height:42px;}
  .ct-details b{font-size:.78rem;}
  .ct-details a,.ct-details span{font-size:1rem;}
  .ct-strip{grid-template-columns:repeat(2,1fr);gap:16px 0;padding:18px 14px;}
  .ct-strip li{border-left:0;}
  .ct-strip li:last-child{grid-column:1 / -1;}
  .ct-strip span{width:30px;height:30px;}
  .ct-strip b{font-size:.84rem;}
  .ct-loc{grid-template-columns:1fr;gap:16px;padding:20px 16px;}
  .ct-locp{font-size:.98rem;}
  .ct-dir{height:48px;font-size:.95rem;padding:0 18px;border-radius:6px;}
  .ct-dir > svg{width:18px;height:18px;}
  .ct-dir i svg{width:15px;height:15px;}
}

/* ---- header on the new contact hero ----
   The old contact plate had a phone box painted into it, so the live call
   button was switched off; this artwork has none, so it comes back. The
   sky here is bright, so the nav gets a soft shadow to stay readable. */
.contactpage .head-call{display:flex !important;}
.contactpage .mainnav a,
.contactpage .credentials{text-shadow:0 .06cqw .22cqw rgba(8,26,58,.75),0 0 .5cqw rgba(8,26,58,.35);}

/* ---- contact card, matched to the comp: bigger type, white bubbles ---- */
.ct-details{gap:1.55cqw;padding:2.2cqw 1.8cqw;}
.ct-bub{width:3.6cqw;height:3.6cqw;background:#fff;}
.ct-bub svg{fill:#12305e;}
.ct-details li:first-child .ct-bub{background:var(--red);}
.ct-details li:first-child .ct-bub svg{fill:#fff;}
.ct-details b{font-size:1.14cqw;font-weight:700;letter-spacing:.04em;}
.ct-details a,.ct-details span{font-size:1.2cqw;}
.ct-details li:nth-child(-n+2) a{font-family:var(--display);font-weight:700;font-size:1.75cqw;line-height:1.1;}
@media (max-width:1000px){
  .ct-bub{width:44px;height:44px;}
  .ct-details b{font-size:.82rem;}
  .ct-details a,.ct-details span{font-size:1rem;}
  .ct-details li:nth-child(-n+2) a{font-size:1.3rem;}
}
/* the text rule for spans in the card was also catching the icon bubble,
   which knocked the icon out of centre */
.ct-details .ct-bub{display:grid !important;place-items:center;margin-top:0 !important;font-size:0 !important;}

/* icon centring that holds in Safari too: flex on the bubble and a fixed
   icon size, instead of a percentage size inside a grid cell */
.ct-details .ct-bub{
  display:flex !important;align-items:center !important;justify-content:center !important;
  position:relative;line-height:0 !important;
}
.ct-details .ct-bub svg{
  display:block;width:1.75cqw !important;height:1.75cqw !important;flex:0 0 auto;margin:0 !important;
}
@media (max-width:1000px){
  .ct-details .ct-bub svg{width:22px !important;height:22px !important;}
}