.rp-contact-section {
  background: transparent !important;
}

html[data-page="contact"] #projectCategories,
html[data-page="contact"] .pcard,
html[data-page="contact"] #pjinfo {
  display: none !important;
  pointer-events: none !important;
}

html[data-page="contact"] #rpanel.pj-on .rp-section.rp-contact-section.vis {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.rp-contact-section .rp-contact-link {
  text-transform: none;
}

.rp-contact-secondary-actions,
.rp-contact-details {
  width: min(100%, 430px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rp-contact-secondary-actions {
  margin-top: 12px;
}

.rp-contact-details {
  margin-top: 14px;
}

.rp-contact-secondary,
.rp-contact-detail {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border: 1px solid rgba(34, 126, 255, 0.42);
  background: rgba(3, 10, 22, 0.56);
  box-shadow: inset 0 0 18px rgba(34, 126, 255, 0.06), 0 0 18px rgba(34, 126, 255, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.rp-contact-secondary:hover,
.rp-contact-secondary:focus-visible,
.rp-contact-detail:hover,
.rp-contact-detail:focus-visible {
  color: #fff;
  border-color: rgba(34, 126, 255, 0.88);
  background: rgba(34, 126, 255, 0.1);
  box-shadow: inset 0 0 20px rgba(34, 126, 255, 0.08), 0 0 22px rgba(34, 126, 255, 0.22);
  outline: none;
  transform: translateY(-1px);
}

.rp-contact-secondary {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.rp-contact-secondary svg,
.rp-contact-detail-icon svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #227eff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rp-contact-detail {
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-contact-detail-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 126, 255, 0.3);
  border-radius: 50%;
  background: rgba(34, 126, 255, 0.07);
}

.rp-contact-detail-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rp-contact-detail-label {
  color: #227eff;
  font-family: var(--fm);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.rp-contact-detail-value {
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

html[data-locale="ar"] .rp-contact-secondary,
html[data-locale="ar"] .rp-contact-detail-label,
html[data-locale="ar"] .rp-contact-detail-value {
  font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  letter-spacing: normal;
}

@media (min-width: 901px) {
  .rp-contact-section,
  .rp-contact-section.vis {
    transform: translate(
        calc(-100vw + clamp(500px, 42vw, 760px) + 36px),
        -50%
      ) !important;
  }
}

@media (max-width: 900px) {
  .rp-contact-section::before,
  .rp-contact-section::after {
    display: none !important;
  }
}

@media (max-width: 767px) {
  html[data-page="work"].phone-contact-window #endLogo {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html[data-page="contact"] .rp-contact-section {
    padding-inline: 22px !important;
    padding-bottom: max(96px, calc(78px + env(safe-area-inset-bottom))) !important;
  }

  html[data-page="contact"] .rp-contact-secondary-actions {
    gap: 8px;
  }

  html[data-page="contact"] .rp-contact-details {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  html[data-page="contact"] .rp-contact-secondary {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 9px;
  }

  html[data-page="contact"] .rp-contact-detail {
    min-height: 50px;
    padding: 8px 10px;
  }

  html[data-page="contact"] .rp-contact-detail-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  html[data-page="contact"] .rp-contact-detail-value {
    font-size: 10.5px;
  }
}

/* Standalone Contact is a single fixed composition, not a road-progress page. */
html[data-page="contact"],
html[data-page="contact"] body {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #000 !important;
}

html[data-page="contact"] body {
  position: fixed !important;
  inset: 0 !important;
}

html[data-page="contact"] #c {
  width: 100vw !important;
  height: 100dvh !important;
}

html[data-page="contact"] #hero,
html[data-page="contact"] #endLogo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-page="contact"] #rpanel,
html[data-page="contact"] #rpanel.on,
html[data-page="contact"] #rpanel.pj-on {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html[data-page="contact"] .rp-contact-section,
html[data-page="contact"] .rp-contact-section.vis,
html[data-page="contact"] #rpanel.pj-on .rp-section.rp-contact-section,
html[data-page="contact"] #rpanel.pj-on .rp-section.rp-contact-section.vis {
  box-sizing: border-box !important;
  position: absolute !important;
  inset: auto auto auto 36px !important;
  top: 50% !important;
  display: flex !important;
  width: min(430px, calc(100vw - 72px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 156px) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

html[data-page="contact"] .rp-contact-section::before,
html[data-page="contact"] .rp-contact-section::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-page="contact"] .rp-contact-actions,
html[data-page="contact"] .rp-contact-secondary-actions,
html[data-page="contact"] .rp-contact-details {
  position: relative !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  html[data-page="contact"] .rp-contact-section,
  html[data-page="contact"] .rp-contact-section.vis,
  html[data-page="contact"] #rpanel.pj-on .rp-section.rp-contact-section,
  html[data-page="contact"] #rpanel.pj-on .rp-section.rp-contact-section.vis {
    inset: auto auto auto 50% !important;
    top: 50% !important;
    width: min(430px, calc(100vw - 44px)) !important;
    max-height: calc(100dvh - 156px) !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 767px) {
  html[data-page="contact"] .rp-contact-section,
  html[data-page="contact"] .rp-contact-section.vis,
  html[data-page="contact"] #rpanel.pj-on .rp-section.rp-contact-section,
  html[data-page="contact"] #rpanel.pj-on .rp-section.rp-contact-section.vis {
    width: calc(100vw - 44px) !important;
    max-height: calc(100dvh - 154px) !important;
    overflow: visible !important;
  }
}