/* ============================================================================
   Explore contact page (/contact/)
   Loaded after explore-home.css, which styles the navbar, the client logos,
   the testimonials and the footer this page shares with the home page. This
   file adds the page's own sections and gives its footer the home footer's
   colours from before 2026-10-07 (crimson to dark orange, the amber kept for
   the glow behind the wordmark; explore-home.css at c173abf).
   Only palette colours from explore-home.css are used.
   ========================================================================== */

/* the bar is always solid here: there is no hero to sit over */
.body.xc-page .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.body.xc-page main { display: block; }

.xc-page .xc-wrap {
  box-sizing: border-box;
  max-width: calc(var(--xp-wrap) + 2 * var(--xp-gutter));
  margin-inline: auto;
  padding-inline: var(--xp-gutter);
}

/* ---------------------------------------------------------------------------
   Intro: white, the crimson eyebrow with its rule, the big black title
   ------------------------------------------------------------------------ */
.xc-page .xc-hero {
  padding: calc(var(--xp-nav-h) + var(--xp-section) * .8) 0 calc(var(--xp-section) * .5);
  background:
    radial-gradient(60% 80% at 100% 0%, var(--xp-peach-tint) 0%, rgba(255, 255, 255, 0) 70%),
    var(--xp-white);
}
.xc-page .xc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--xp-flame);
  font-size: var(--xp-t-s);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.xc-page .xc-eyebrow::before {
  content: "";
  width: 36px;
  height: 2px;
  background: var(--xp-grad-divider);
}
.xc-page .xc-title {
  max-width: 16ch;
  margin: 0 0 20px;
  color: var(--xp-black);
  font-size: var(--xp-t-4xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.xc-page .xc-lead {
  max-width: 56ch;
  margin: 0;
  color: var(--xp-text);
  font-size: var(--xp-t-l);
  line-height: 1.6;
}
.body.explore-rtl.xc-page .xc-title { max-width: 20ch; line-height: 1.35; letter-spacing: 0; }
.body.explore-rtl.xc-page .xc-eyebrow { letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   Details and form: the details as white cards at the reading start, the
   form card beside them (stacked under 992px)
   ------------------------------------------------------------------------ */
.xc-page .xc-main { padding: 0 0 var(--xp-section); background: var(--xp-white); }
.xc-page .xc-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}
@media screen and (max-width: 991px) {
  .xc-page .xc-grid { grid-template-columns: minmax(0, 1fr); }
}
.xc-page .xc-info { display: grid; gap: 14px; }
.xc-page .xc-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--xp-paper-rule);
  border-radius: var(--xp-r-card);
  background: var(--xp-white);
  box-shadow: var(--xp-shadow-card);
  color: var(--xp-ink);
  text-decoration: none;
  transition: transform .3s var(--xp-ease), box-shadow .3s var(--xp-ease);
}
.xc-page a.xc-card:hover { transform: translateY(-3px); }
.xc-page a.xc-card:focus-visible { outline: 3px solid var(--xp-flame); outline-offset: 3px; }
.xc-page .xc-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--xp-grad-sunset-bar);
  color: var(--xp-white);
}
.xc-page .xc-card-text { display: grid; gap: 4px; min-width: 0; }
.xc-page .xc-card-label {
  color: var(--xp-text-muted);
  font-size: var(--xp-t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.body.explore-rtl.xc-page .xc-card-label { letter-spacing: 0; font-size: var(--xp-t-s); }
.xc-page .xc-card-value { color: var(--xp-ink); font-size: var(--xp-t-l); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.xc-page .xc-card-note { color: var(--xp-text-muted); font-size: var(--xp-t-s); }
/* the email, phone and handle read left to right in both languages */
.xc-page .xc-ltr { direction: ltr; unicode-bidi: isolate; }
.body.explore-rtl.xc-page .xc-ltr { text-align: right; }
.xc-page .xc-social-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.xc-page .xc-social-row a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--xp-grad-sunset-bar);
  transition: transform .25s var(--xp-ease);
}
.xc-page .xc-social-row a:hover { transform: translateY(-2px); }
.xc-page .xc-social-row a:focus-visible { outline: 3px solid var(--xp-flame); outline-offset: 3px; }
.xc-page .xc-social-row img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.xc-page .xc-handle { color: var(--xp-text-muted); font-size: var(--xp-t-s); margin-inline-start: 4px; }

.xc-page .xc-form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--xp-r-card);
  background: var(--xp-paper);
  border: 1px solid var(--xp-paper-rule);
}
.xc-page .xc-form-title { margin: 0 0 4px; color: var(--xp-black); font-size: var(--xp-t-2xl); font-weight: 800; line-height: 1.2; }
.xc-page .xc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media screen and (max-width: 600px) { .xc-page .xc-row { grid-template-columns: minmax(0, 1fr); } }
.xc-page .xc-field { display: grid; gap: 8px; margin: 0; font-weight: 400; }
.xc-page .xc-label { color: var(--xp-slate); font-size: var(--xp-t-s); font-weight: 600; }
.xc-page .xc-form :is(input, textarea) {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--xp-line);
  border-radius: var(--xp-r-input);
  background: var(--xp-white);
  color: var(--xp-ink);
  font: inherit;
  font-size: var(--xp-t-m);
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.xc-page .xc-form textarea { min-height: 150px; resize: vertical; }
.xc-page .xc-form :is(input, textarea)::placeholder { color: var(--xp-text-muted); opacity: 1; }
.xc-page .xc-form :is(input, textarea):focus {
  outline: none;
  border-color: var(--xp-flame);
  box-shadow: 0 0 0 3px var(--xp-orange-a22);
}
.xc-page .xc-form [aria-invalid="true"] { border-color: var(--xp-red-deep); }
.xc-page .xc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.xc-page .xc-send {
  padding: 16px 40px;
  border: 0;
  border-radius: 999px;
  background: var(--xp-grad-sunset-bar);
  color: var(--xp-white);
  font: inherit;
  font-size: var(--xp-t-m);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px var(--xp-orange-a22);
  transition: transform .25s var(--xp-ease), box-shadow .25s var(--xp-ease);
}
.xc-page .xc-send:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--xp-orange-a35); }
.xc-page .xc-send:focus-visible { outline: 3px solid var(--xp-ink); outline-offset: 3px; }
.xc-page .xc-hint { margin: 0; color: var(--xp-text-muted); font-size: var(--xp-t-s); }
.xc-page .xc-error { margin: 0; color: var(--xp-red-deep); font-size: var(--xp-t-s); font-weight: 600; }
.xc-page .xc-error[hidden] { display: none; }
/* shown once the message reached the inbox (explore-contact.js) */
.xc-page .xc-sent { margin: 0; padding: 14px 18px; border-radius: var(--xp-r-input); background: var(--xp-peach-tint); color: var(--xp-ink); font-size: var(--xp-t-m); font-weight: 600; }
.xc-page .xc-sent[hidden] { display: none; }

/* the home page's amber-to-coral stripe, as a divider before the logos */
.body.xc-page .w2.xc-stripe { margin: 0; }

/* ---------------------------------------------------------------------------
   Footer: the home footer's colours from before 2026-10-07. The sweep runs
   crimson at the reading start to dark orange at the end (mirrored in
   Arabic, so the contact column and its form stay on the crimson), and the
   amber is kept for the glow behind the EXPLORE wordmark.
   ------------------------------------------------------------------------ */
.body.xc-page { --xc-foot-dir: to right; }
.body.xc-page.explore-rtl { --xc-foot-dir: to left; }
.body.xc-page .footer-section {
  background-image: linear-gradient(var(--xc-foot-dir), var(--xp-sunset-000) 0%, var(--xp-sunset-020) 24%,
    var(--xp-sunset-040) 52%, var(--xp-sunset-050) 74%, var(--xp-sunset-060) 100%);
}
.body.xc-page .div-block-117 {
  background: linear-gradient(180deg, rgba(196, 76, 38, 0) 0%, var(--xp-card-070) 30%, var(--xp-foot-070) 55%,
    var(--xp-foot-090) 80%, var(--xp-foot-100) 100%);
}

/* the phone field reads left to right in Arabic too (explore-i18n.css sets
   every Arabic input right to left) */
.body.explore-rtl.xc-page .xc-form input[type="tel"] { direction: ltr !important; text-align: right !important; }