/* Final CTA: carry the four-colour family and the same two decisions through from the FV. */
.contact{
  min-height:clamp(680px,72vw,850px);
  padding-top:clamp(82px,8vw,116px);
}
.contact-inner{width:min(620px,52vw);position:relative;z-index:3}
.contact-hats{position:absolute;inset:0;z-index:1;pointer-events:none}
#contact .contact-hats>img.contact-hat{
  position:absolute;
  width:clamp(230px,24vw,390px);
  max-width:none;
  opacity:1;
  filter:brightness(1.035) saturate(1.02) drop-shadow(13px 24px 16px rgba(22,66,53,.11));
}
#contact .contact-hats>img.contact-hat--cream{left:-5%;right:auto;top:7%;bottom:auto;transform:rotate(-9deg)}
#contact .contact-hats>img.contact-hat--blue{right:-5%;left:auto;top:5%;bottom:auto;transform:rotate(8deg)}
#contact .contact-hats>img.contact-hat--mint{display:block;left:-4%;right:auto;top:auto;bottom:4%;transform:rotate(10deg)}
#contact .contact-hats>img.contact-hat--pink{right:-4%;left:auto;top:auto;bottom:2%;transform:rotate(-9deg)}
.contact-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:min(100%,540px);
  margin:35px auto 18px;
}
.contact-actions .contact-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:66px;
  margin:0;
  padding:17px 22px;
  border:1px solid #064943;
  border-radius:999px;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
  white-space:nowrap;
}
.contact-actions .contact-button-primary{background:#064943;color:#fff}
.contact-actions .contact-button-primary:hover{background:#0d5a53}
.contact-actions .contact-button-colors{gap:12px;background:rgba(255,255,255,.68);color:#064943}
.contact-actions .contact-button-colors:hover{background:#fff}
.contact-actions .contact-color-dots{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;font-size:0}
.contact-actions .contact-button>span{position:static;inset:auto;transform:none;font-size:inherit}
.contact-actions .contact-button:hover>span{transform:none}
.contact-color-dots i{display:block;width:8px;height:8px;border-radius:50%}
.contact-color-dots i:nth-child(1){background:#f3b8c8}
.contact-color-dots i:nth-child(2){background:#f1d35c}
.contact-color-dots i:nth-child(3){background:#79d5ca}
.contact-color-dots i:nth-child(4){background:#70a8df}
.contact .downloads{justify-content:center;margin-top:2px}
.contact .downloads a{color:rgba(6,73,67,.72);font-size:12px}
.contact .downloads span{color:rgba(6,73,67,.58)}

@media(max-width:1100px){
  .contact-inner{width:min(600px,62vw)}
  #contact .contact-hats>img.contact-hat{width:clamp(210px,25vw,290px)}
  #contact .contact-hats>img.contact-hat--cream{left:-8%}
  #contact .contact-hats>img.contact-hat--blue{right:-8%}
  #contact .contact-hats>img.contact-hat--mint{left:-8%}
  #contact .contact-hats>img.contact-hat--pink{right:-8%}
}

@media(max-width:760px){
  .contact{
    min-height:680px;
    padding:68px 20px 0;
  }
  .contact-inner{width:100%;max-width:430px}
  .contact h2{font-size:clamp(42px,12.5vw,54px);line-height:1.42;margin:22px 0}
  .contact-inner>p:not(.eyebrow){font-size:12px;line-height:2}
  #contact .contact-hats>img.contact-hat{display:block;width:43vw;max-width:178px;opacity:.95}
  #contact .contact-hats>img.contact-hat--cream{left:-20%;top:8%;transform:rotate(-10deg)}
  #contact .contact-hats>img.contact-hat--blue{right:-20%;top:6%;transform:rotate(9deg)}
  #contact .contact-hats>img.contact-hat--mint{display:block;left:-20%;bottom:5%;transform:rotate(11deg)}
  #contact .contact-hats>img.contact-hat--pink{right:-20%;bottom:4%;transform:rotate(-10deg)}
  .contact-actions{gap:8px;width:100%;max-width:360px;margin-top:30px}
  .contact-actions .contact-button{min-height:60px;padding:14px 9px;font-size:12px}
  .contact-actions .contact-button-colors{gap:7px}
  .contact-actions .contact-color-dots{gap:2px}
  .contact-color-dots i{width:6px;height:6px}
  .contact .downloads{font-size:10px}
  .contact-word{margin-top:76px}
}

@media(max-width:360px){
  .contact{min-height:650px;padding-inline:16px}
  .contact-actions .contact-button{font-size:11px}
}