/* ===== CONTACT PAGE ===== */
.ct-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:26px;
}
.ct-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  background:#fff;
  border:1px solid #e3e9fb;
  border-top:4px solid var(--ca);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(18,24,63,.06);
  transition:transform .25s,box-shadow .25s;
}
.ct-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(18,24,63,.12)}
.ct-ico{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:19px;
  background:var(--cs);
  color:var(--ca);
}
.ct-card h3{margin:0 0 4px;font-size:16px;color:#0f1a44}
.ct-card p{margin:0;font-size:14.5px;line-height:1.5;color:#4a5170;overflow-wrap:anywhere}
.ct-card a{color:#4a5170;text-decoration:none}
.ct-card a:hover{color:#0b5aa5}

.ct-c{--ca:#00aeef;--cs:#e6f6fd}
.ct-m{--ca:#ec008c;--cs:#fde8f4}
.ct-y{--ca:#e0a100;--cs:#fff6dc}
.ct-n{--ca:#12183f;--cs:#e8eaf6}

/* dark chat card */
.ct-cta{
  position:relative;
  overflow:hidden;
  margin-top:20px;
  padding:24px;
  border-radius:16px;
  color:#fff;
  background:
    radial-gradient(circle at 0% 100%, rgba(190,20,110,.45), transparent 50%),
    linear-gradient(120deg,#3a0f45 0%,#12183f 55%,#0d3566 100%);
}
.ct-cta-dots{
  position:absolute;
  right:0;
  top:0;
  width:60%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(circle,#00aeef 2px,transparent 2.5px) 0 0/20px 20px,
    radial-gradient(circle,#ec008c 2px,transparent 2.5px) 10px 10px/20px 20px;
  opacity:.25;
  -webkit-mask-image:linear-gradient(to left,#000 10%,transparent 90%);
          mask-image:linear-gradient(to left,#000 10%,transparent 90%);
}
.ct-cta h3,.ct-cta p,.ct-cta-actions{position:relative;z-index:1}
.ct-cta h3{margin:0 0 6px;font-size:20px;color:#fff}
.ct-cta p{margin:0 0 16px;color:#d7d9f5;font-size:15px;line-height:1.6}
.ct-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.ct-cta-actions a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:8px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  background:#fff;
  color:#12183f;
  transition:.2s;
}
.ct-cta-actions a:last-child{background:#0b7d4e;color:#fff}
.ct-cta-actions a:hover{transform:translateY(-2px)}

/* equal height with the form (desktop) */
@media (min-width:992px){
  .ct-page .ct-cta{margin-top:auto}
  .ct-page .contact-grid > div:first-child .ct-cards{margin-bottom:20px}
  .ct-page .contact-grid > .form .fields{grid-template-rows:auto auto auto auto 1fr}
}

@media (max-width:575px){
  .ct-cards{grid-template-columns:1fr}
  .ct-cta{padding:20px}
  .ct-cta-actions a{flex:1;justify-content:center}
}


/* ===== CONTACT: small horizontal cards (icon left, text right) ===== */
.ct-cards{gap:12px;margin-top:22px}

.ct-card{
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #e3e9fb;
  border-left:4px solid var(--ca);
  border-top:1px solid #e3e9fb;
  border-radius:12px;
}
.ct-ico{
  flex:none;
  width:42px;
  height:42px;
  border-radius:10px;
  font-size:18px;
}
.ct-card > div{min-width:0}
.ct-card h3{margin:0 0 2px;font-size:15px}
.ct-card p{font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}

/* ===== CONTACT: left and right columns end on the same line ===== */
@media (min-width:992px){
  .ct-page .contact-grid{align-items:stretch !important}

  /* left column */
  .ct-page .contact-grid > div:first-child{
    display:flex;
    flex-direction:column;
  }
  .ct-page .contact-grid > div:first-child .ct-cards{margin-bottom:18px}
  .ct-page .ct-cta{margin-top:auto}

  /* right column: form stretches, message box grows */
  .ct-page .contact-grid > .form{
    display:flex;
    flex-direction:column;
  }
  .ct-page .contact-grid > .form .fields{
    flex:1;
    margin-bottom:24px;
    grid-template-rows:auto auto auto auto 1fr;
  }
  .ct-page .contact-grid > .form .field.full:last-child{
    display:flex;
    flex-direction:column;
  }
  .ct-page .contact-grid > .form .field.full:last-child textarea{
    flex:1;
    min-height:120px;
  }
}

@media (max-width:575px){
  .ct-cards{grid-template-columns:1fr}
}

/* ===== CONTACT: chat card keeps its natural height, right under the info cards ===== */
@media (min-width:992px){
  .ct-page .contact-grid > div:first-child .ct-cards{margin-bottom:14px}

  .ct-page .ct-cta{
    margin-top:0;
    flex:none;
  }
}

/* tablet and mobile: normal spacing */
@media (max-width:991px){
  .ct-cards{margin-bottom:14px}
  .ct-cta{margin-top:0}
}


/* Contact page hero artwork — overrides only the banner visual */
.page-hero .ph-contact-art {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: min(47%, 610px);
  height: 320px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero .ph-contact-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* The generated artwork has dark edges; screen blends them into the dark hero */
  mix-blend-mode: screen;
}

.page-hero .ph-contact-art .ph-chip {
  position: absolute;
  z-index: 4;
}

.page-hero .ph-contact-art .ph-c1 {
  top: 2%;
  left: 0;
}

.page-hero .ph-contact-art .ph-c2 {
  right: 0;
  bottom: 14%;
}

.page-hero .ph-contact-art .ph-c3 {
  left: 2%;
  bottom: 3%;
}

@media (max-width: 991px) {
  .page-hero .ph-contact-art {
    right: 1%;
    width: 44%;
    height: 260px;
  }
}

@media (max-width: 767px) {
  .page-hero .ph-contact-art {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 210px;
    margin: 18px auto 0;
  }

  .page-hero .ph-contact-banner-image {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
  }

  .page-hero .ph-contact-art .ph-chip {
    display: none !important;
  }
}

/* stacked phone / email links in the info cards: keep each tap target at least 24px tall */
.ct-card p a{display:inline-block;padding:3px 0}

/* email card spans both columns so the addresses never break mid-word */
.ct-card.ct-wide{grid-column:1/-1}