/* Contact presentation. Pipedrive owns the fields and the submission; on the
   English page it renders them in its own iframe, on the Arabic page they are
   rendered here so they read right-to-left (see .pdform-* at the end). */
@font-face { font-family: 'Contact Plex'; src: url('../fonts/ibmplexsans-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Contact Plex'; src: url('../fonts/ibmplexsans-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
.contact-stage, .contact-directory { font-family: 'Contact Plex', sans-serif; }
.contact-page { background: #f9f9f7; }
.contact-stage { background: #764ff6; color: #fff; padding: 56px 40px 64px; overflow: clip; }
.contact-composition { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1fr); gap: 68px; align-items: start; max-width: 1232px; margin: 0 auto; }
.contact-intro { min-width: 0; position: relative; }
.contact-label { margin: 4px 0 18px; font-size: 14px; line-height: 1.5; }
.contact-intro h1 { color: #fff; font-family: inherit; font-size: clamp(70px, 7.3vw, 108px); font-weight: 600; line-height: 1; letter-spacing: -.065em; margin: 0; text-wrap: nowrap; }
.contact-lede { font-size: clamp(22px, 2.15vw, 30px); line-height: 1.3; letter-spacing: -.02em; margin: 24px 0 0; color: #fff; }
.contact-description { color: #f0eaff; font-size: 16px; line-height: 1.65; margin: 20px 0 0; }
.contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 27px; position: relative; z-index: 1; }
.contact-icon { width: 23px; height: 23px; flex: 0 0 auto; }
.contact-message-link { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 13px 22px; background: #fff; color: #5130b4; border-radius: 8px; font-weight: 600; font-size: 15px; transition: background .18s ease; }
.contact-message-link:hover { background: #ede5ff; }
.contact-message-link .contact-icon { width: 20px; height: 20px; }
.contact-demo-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #c8b6ff; }
.contact-demo-link:hover { text-decoration-color: #fff; }
.contact-art { position: relative; margin: 3px -66px -13px -82px; pointer-events: none; }
.contact-art img { display: block; width: 100%; height: auto; opacity: .48; filter: saturate(.65); mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.contact-reply-note { display: flex; align-items: flex-start; gap: 12px; padding-top: 20px; border-top: 1px solid #ffffff38; max-width: 420px; }
.contact-reply-note svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.contact-reply-note p { margin: 0; font-size: 14px; line-height: 1.5; }
.contact-reply-note strong { display: block; font-weight: 600; }
.contact-reply-note span { display: block; margin-top: 3px; color: #f0eaff; }
.contact-form-panel { min-width: 0; background: #fff; color: #15151a; border-radius: 18px; padding: 23px 6px 0; box-shadow: 0 24px 60px #35107029; scroll-margin-top: 88px; position: relative; z-index: 1; }
.contact-form-embed { min-width: 0; }
.contact-form-panel .pipedriveWebForms { min-height: 735px; }
/* Preserve the iframe's provider-controlled resizing; do not crop or scale it. */
.contact-form-panel iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.contact-privacy { color: #66616f; font-size: 12px; line-height: 1.6; border-top: 1px solid #ece9f0; margin: 0 34px; padding: 19px 0 23px; }
.contact-privacy a { color: #6134d5; text-decoration: underline; text-underline-offset: 3px; }
.contact-directory { background: #f9f9f7; padding: 64px 40px 72px; color: #15151a; }
.contact-directory-inner { max-width: 1232px; margin: 0 auto; }
.contact-directory-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.contact-directory-heading h2 { margin: 0; font: 600 32px/1.15 'Contact Plex', sans-serif; letter-spacing: -.04em; color: #15151a; }
.contact-directory-heading > p { margin: 0; color: #686570; font-size: 15px; }
.contact-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #dcd9e1; }
.contact-route { display: block; min-width: 0; padding: 27px 32px 0; border-right: 1px solid #dcd9e1; }
.contact-route:first-child { padding-left: 0; }
.contact-route:last-child { padding-right: 0; border-right: 0; }
.contact-route-top { display: flex; justify-content: space-between; align-items: center; color: #764ff6; }
.contact-route-top > .contact-icon:first-child { width: 28px; height: 28px; }
.contact-route-arrow { width: 20px; height: 20px; color: #77717f; transform: rotate(-45deg); transition: transform .18s ease; }
.contact-route h3 { font: 600 21px/1.3 'Contact Plex', sans-serif; color: #15151a; letter-spacing: -.02em; margin: 21px 0 7px; }
.contact-route p { font-size: 14px; color: #686570; margin: 0; line-height: 1.55; }
.contact-route-label { display: inline-block; color: #6134d5; font-size: 14px; font-weight: 600; margin-top: 21px; }
.contact-route:hover .contact-route-arrow { transform: rotate(-45deg) translateX(3px); }
.contact-route:hover .contact-route-label { text-decoration: underline; text-underline-offset: 4px; }
.contact-stage a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.contact-form-panel:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.contact-form-panel a:focus-visible, .contact-directory a:focus-visible { outline: 3px solid #6134d5; outline-offset: 5px; }
@media (max-width: 1100px) {
  .contact-stage { padding: 40px 28px 48px; }
  .contact-composition { gap: 36px; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .contact-intro h1 { font-size: 76px; }
  .contact-lede { font-size: 24px; }
  .contact-description { font-size: 15px; }
  .contact-actions { gap: 8px 18px; }
  .contact-art { margin: 18px -32px 6px -44px; }
  .contact-privacy { margin-inline: 24px; }
  .contact-directory { padding: 48px 28px 56px; }
  .contact-route { padding-inline: 22px; }
}
/* Stack before the form or headline becomes cramped on tablets. */
@media (max-width: 960px) {
  .contact-stage { padding: 32px 24px 40px; }
  .contact-composition { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 640px; }
  .contact-intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
  .contact-heading { grid-column: 1; grid-row: 1; min-width: 0; }
  .contact-label { margin: 0 0 12px; font-size: 13px; }
  .contact-intro h1 { font-size: clamp(44px, 8vw, 76px); text-wrap: wrap; }
  .contact-lede, .contact-description, .contact-actions { grid-column: 1 / -1; }
  .contact-lede { font-size: clamp(22px, 3.4vw, 28px); line-height: 1.35; margin-top: 20px; max-width: 560px; }
  .contact-description { font-size: 15px; margin-top: 14px; max-width: 520px; }
  .contact-lede br, .contact-description br { display: none; }
  .contact-actions { margin-top: 22px; gap: 12px 24px; }
  .contact-message-link { min-height: 50px; font-size: 15px; padding: 12px 18px; gap: 18px; }
  .contact-demo-link { font-size: 14px; }
  .contact-art { grid-column: 2; grid-row: 1; position: static; width: 100%; margin: 0; }
  .contact-reply-note { display: none; }
  .contact-form-panel { padding: 16px 0 0; scroll-margin-top: 84px; }
  .contact-privacy { margin-inline: 24px; }
  .contact-directory { padding: 40px 24px 48px; }
  .contact-directory-inner { max-width: 640px; }
  .contact-directory-heading { display: block; margin-bottom: 24px; }
  .contact-directory-heading h2 { font-size: 28px; }
  .contact-directory-heading > p { margin-top: 10px; font-size: 14px; }
  .contact-routes { grid-template-columns: 1fr; }
  .contact-route, .contact-route:first-child, .contact-route:last-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid #dcd9e1; }
  .contact-route h3 { margin-top: 12px; }
  .contact-route-label { margin-top: 12px; }
}
@media (max-width: 480px) {
  .contact-stage { padding: 28px 16px 32px; }
  .contact-composition { gap: 24px; }
  .contact-intro h1 { font-size: clamp(44px, 13vw, 62px); }
  .contact-lede { margin-top: 18px; }
  .contact-description { font-size: 14px; line-height: 1.6; }
  .contact-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 20px; }
  .contact-message-link { width: 100%; justify-content: space-between; }
  .contact-demo-link { justify-content: center; }
  .contact-form-panel { border-radius: 14px; }
  .contact-privacy { margin-inline: 20px; }
  .contact-directory { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.contact-page) { scroll-behavior: auto; }
  .contact-stage *, .contact-directory * { transition: none; }
}

.contact-intro h1, .contact-lede, .contact-description { position: relative; z-index: 1; }

/* Arabic contact page: preserve connected letterforms and RTL reading order. */
@font-face { font-family: 'Contact Arabic'; src: url('../fonts/ibmplexsansarabic-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Contact Arabic'; src: url('../fonts/ibmplexsansarabic-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
.contact-page-ar .contact-stage, .contact-page-ar .contact-directory { font-family: 'Contact Arabic', sans-serif; }
.contact-page-ar .contact-intro h1 { font-family: inherit; font-size: clamp(52px, 5.6vw, 80px); line-height: 1.5; letter-spacing: 0; text-wrap: balance; }
.contact-page-ar .contact-lede { line-height: 1.65; letter-spacing: 0; text-wrap: balance; }
.contact-page-ar .contact-description { font-size: 16px; line-height: 1.9; }
.contact-page-ar .contact-directory-heading h2, .contact-page-ar .contact-route h3 { font-family: inherit; line-height: 1.6; letter-spacing: 0; }
.contact-page-ar .contact-route p, .contact-page-ar .contact-privacy { line-height: 1.8; }
.contact-page-ar .contact-route { border-right: 0; border-inline-end: 1px solid #dcd9e1; }
.contact-page-ar .contact-route:first-child { padding-left: 32px; padding-right: 0; }
.contact-page-ar .contact-route:last-child { padding-right: 32px; padding-left: 0; border-inline-end: 0; }
.contact-page-ar .contact-message-link .contact-icon { transform: scaleX(-1); }
.contact-page-ar .contact-route-arrow { transform: rotate(-135deg); }
.contact-page-ar .contact-route:hover .contact-route-arrow { transform: rotate(-135deg) translateX(3px); }
.contact-language { display: inline-flex; min-height: 44px; align-items: center; color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; margin-bottom: 8px; }
@media (max-width: 1100px) {
  .contact-page-ar .contact-route:first-child { padding-left: 22px; }
  .contact-page-ar .contact-route:last-child { padding-right: 22px; }
}
@media (max-width: 960px) {
  .contact-page-ar .contact-intro h1 { font-size: clamp(36px, 7vw, 60px); }
  .contact-page-ar .contact-route, .contact-page-ar .contact-route:first-child, .contact-page-ar .contact-route:last-child { padding: 24px 0; border-inline-end: 0; }
}
@media (max-width: 480px) {
  .contact-page-ar .contact-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .contact-page-ar .contact-intro h1 { font-size: clamp(32px, 9vw, 43px); }
  .contact-page-ar .contact-lede { font-size: 22px; }
}

/* ── Natively rendered lead form (_includes/pipedrive-form-native.html) ──────
   Logical properties throughout, so one rule set lays the form out
   left-to-right in English and right-to-left in Arabic. Visual language
   matches the panel the provider's iframe used, so swapping the renderer
   does not change the approved design. */
.pdform { min-width: 0; padding-inline: 28px; }
/* Hold roughly the rendered form's height while the definition loads, so the
   panel does not jump. The reservation lives on the placeholder, never on the
   mount, so a shorter form never leaves dead space under itself. */
.pdform-loading { margin: 0; padding: 48px 0; min-height: 800px; box-sizing: border-box; text-align: center; color: #66616f; font-size: 14px; }
.pdform-form { padding-bottom: 26px; }
.pdform-intro { margin-bottom: 22px; }
.pdform-title { font-family: inherit; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; color: #0b0712; margin: 0; }
.pdform-message { margin: 10px 0 0; color: #55505f; font-size: 15px; line-height: 1.7; }
.pdform-field { margin-bottom: 16px; }
.pdform-label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: #0b0712; }
.pdform-required { color: #764ff6; }
.pdform-optional { font-weight: 400; color: #7a7585; }
.pdform-input { display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 16px; border: 1px solid #d9d5e2; border-radius: 8px; background: #fff; color: #15151a; font-family: inherit; font-size: 15px; line-height: 1.5; text-align: start; transition: border-color .15s ease, box-shadow .15s ease; }
textarea.pdform-input { min-height: 132px; resize: vertical; }
.pdform-input:hover { border-color: #b9b2c9; }
.pdform-input:focus { outline: none; border-color: #764ff6; box-shadow: 0 0 0 3px #764ff633; }
.pdform-input.is-invalid { border-color: #c8324b; }
.pdform-input.is-invalid:focus { box-shadow: 0 0 0 3px #c8324b2e; }
.pdform-help { margin: 6px 0 0; font-size: 13px; color: #7a7585; }
.pdform-error { margin: 6px 0 0; font-size: 13px; color: #c8324b; }
.pdform-actions { margin-top: 22px; }
.pdform-submit { display: block; width: 100%; min-height: 52px; padding: 14px 20px; border: 0; border-radius: 8px; background: #764ff6; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background .18s ease; }
.pdform-submit:hover:not(:disabled) { background: #6134d5; }
.pdform-submit:disabled { opacity: .62; cursor: default; }
.pdform-status { margin: 10px 0 0; font-size: 13px; color: #55505f; text-align: center; }
.pdform-status:empty { display: none; }
.pdform-notes { margin-top: 18px; }
.pdform-note { margin: 0 0 8px; font-size: 12px; line-height: 1.7; color: #7a7585; }
.pdform-note:last-child { margin-bottom: 0; }
.pdform-note a { color: #6134d5; text-decoration: underline; text-underline-offset: 3px; }
.pdform-error-panel { margin: 0 28px 18px; padding: 12px 14px; border-radius: 8px; background: #fdecef; color: #8c1f33; font-size: 13px; line-height: 1.6; }
.pdform-error-panel strong { display: block; font-weight: 600; }
.pdform-success { padding: 96px 0 108px; text-align: center; }
.pdform-success .pdform-message { margin-top: 12px; }
.pdform-submit:focus-visible { outline: 3px solid #6134d5; outline-offset: 3px; }
.pdform-success:focus-visible { outline: 3px solid #764ff6; outline-offset: 6px; }
/* The v3 badge is replaced by the attribution notice the form renders, which
   is what Google's terms ask for when the badge is hidden. */
.grecaptcha-badge { visibility: hidden; }
/* Arabic needs the looser leading the rest of the page uses. */
.contact-page-ar .pdform-title { line-height: 1.6; letter-spacing: 0; }
.contact-page-ar .pdform-message, .contact-page-ar .pdform-note { line-height: 1.9; }
.contact-page-ar .pdform-input { line-height: 1.7; }
@media (max-width: 960px) {
  .pdform { padding-inline: 24px; }
}
@media (max-width: 480px) {
  .pdform { padding-inline: 20px; }
  .pdform-title { font-size: 21px; }
  .pdform-success { padding: 64px 0 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdform-input, .pdform-submit { transition: none; }
}