/* =====================================================================
   CONTACT US PAGE
   Hero → Let's Talk → (reused contact component) → Map. + shared footer.
   ===================================================================== */

.cp-page { overflow-x: hidden; }

.cp-section { padding: clamp(44px, 5vw, 80px) clamp(20px, 4vw, 60px); }
.cp-wrap { max-width: var(--maxw); margin: 0 auto; }

.grad-blue {
  background: linear-gradient(100deg, #5b8def 0%, #2f6bd8 55%, #6aa0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cp-eyebrow {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2f6bd8;
  background: rgba(91, 141, 239, 0.08);
  border: 1px solid rgba(91, 141, 239, 0.3);
}

/* ===================== HERO ===================== */
.cp-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 72vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(120px, 15vh, 180px);
  padding-bottom: clamp(36px, 5vw, 60px);
  text-align: center;
  border-bottom: 1px solid rgba(90, 120, 180, 0.14);
}
/* large background image filling the hero */
.cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../contact-us/contact-us.jpg") center / cover no-repeat;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}
.cp-hero .cp-wrap { position: relative; z-index: 1; }
/* phone-optimised hero image on small screens */
@media (max-width: 700px) {
  .cp-hero::before {
    background-image: url("../contact-us/contact-us-phone.webp");
    opacity: 0.4;            /* more visible image on phones */
  }
  /* hide the eyebrow; heading at top, paragraph pushed to the bottom */
  .cp-eyebrow { display: none; }
  .cp-hero {
    justify-content: stretch;
    padding-top: clamp(96px, 22vw, 130px);
  }
  .cp-hero .cp-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.cp-title {
  margin-top: 22px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #16202f;
}
.cp-hero-sub {
  margin: 20px auto 0;
  max-width: 620px;
  font-weight: 300;
  line-height: 1.7;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: #5a6478;
}

/* ===================== LET'S TALK ===================== */
.cp-talk-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.cp-talk-media {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(40, 60, 110, 0.18);
}
.cp-talk-media img,
.cp-talk-media video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
.cp-talk-h {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #16202f;
}
.cp-talk-p {
  margin-top: 22px;
  font-weight: 300;
  line-height: 1.75;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  color: #5a6478;
}

/* ===================== MAP ===================== */
.cp-map {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(40, 60, 110, 0.16);
  border: 1px solid rgba(90, 120, 180, 0.14);
  background: #eef2f8;
}
.cp-map iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 42vw, 520px);
  border: 0;
}

/* ===================== REVEAL ===================== */
.cp-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cp-reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .cp-reveal { transition: opacity 0.3s ease; transform: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .cp-talk-inner { grid-template-columns: 1fr; }
  .cp-talk-media { order: -1; }
}

/* ===================== DARK THEME ===================== */
[data-theme="dark"] .cp-eyebrow {
  color: var(--accent-deep);
  background: rgba(91, 155, 245, 0.12);
  border-color: rgba(91, 155, 245, 0.3);
}
[data-theme="dark"] .cp-hero { border-bottom-color: var(--d-line); }
[data-theme="dark"] .cp-hero::before { opacity: 0.07; }
[data-theme="dark"] .cp-title,
[data-theme="dark"] .cp-talk-h { color: var(--d-t1); }
[data-theme="dark"] .cp-hero-sub,
[data-theme="dark"] .cp-talk-p { color: var(--d-t2); }
[data-theme="dark"] .cp-talk-media { box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .cp-map {
  border-color: var(--d-line);
  box-shadow: var(--d-shadow);
  background: var(--d-surface);
}