/* The contact page's motion (pairs with atlas-contact.js). The script marks the page .ct-on once it runs, so nothing is
 * hidden without it; with reduced motion nothing moves and everything shows. */

/* the hero: the heading rises word by word, the rest follows */
.ct-on .contact-hero .hero-content { opacity: 1 !important; transform: none !important; }
.ct-on .contact-hero h1 .ct-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.ct-on .contact-hero h1 .ct-w > span { display: inline-block; transform: translateY(105%) rotate(4deg); opacity: 0; transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .5s; transition-delay: calc(var(--i, 0) * 70ms + .15s); }
.ct-on .contact-hero.ct-in h1 .ct-w > span { transform: none; opacity: 1; }
.ct-on .contact-hero :is(.eyebrow, p, .hero-actions) { opacity: 0; translate: 0 22px; transition: opacity .7s, translate .9s cubic-bezier(.16, 1, .3, 1); }
.ct-on .contact-hero .eyebrow { transition-delay: .05s; }
.ct-on .contact-hero p { transition-delay: .55s; }
.ct-on .contact-hero .hero-actions { transition-delay: .7s; }
.ct-on .contact-hero.ct-in :is(.eyebrow, p, .hero-actions) { opacity: 1; translate: 0 0; }
/* the background drifts slower than the page */
.ct-on .contact-hero .contact-hero-bg { transform: translateY(var(--ct-par, 0px)) scale(1.08); will-change: transform; }

/* blocks rise in as they come on screen, children one after another */
.ct-on .ct-rise { opacity: 0; translate: 0 40px; transition: opacity .7s, translate .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.ct-on .ct-rise.ct-in { opacity: 1; translate: 0 0; }
.ct-on .reveal.ct-rise { transform: none !important; }

/* the ways to reach us: the icon pops when its row arrives and leans in on hover */
.ct-on .contact-method i { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; transform: scale(.4) rotate(-30deg); }
.ct-on .contact-method.ct-in i { transform: none; }
.contact-method { transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, background .3s !important; }
.contact-method:hover { transform: translateX(-6px); }
html[dir="ltr"] .contact-method:hover { transform: translateX(6px); }
.contact-method:hover i { box-shadow: 0 0 0 6px rgba(var(--xp-c-a, 255, 42, 74), .16), 0 10px 26px rgba(var(--xp-c-a, 255, 42, 74), .35); }

/* the form: a soft light where the pointer is, and each field lights up when it is in use */
.contact-form-panel { position: relative; isolation: isolate; }
.contact-form-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--ct-x, 50%) var(--ct-y, 30%), rgba(var(--xp-c-a, 255, 42, 74), .12), transparent 65%); }
.contact-form-panel:hover::before { opacity: 1; }
.contact-form-grid :is(input, select, textarea) { transition: border-color .25s, box-shadow .25s, transform .25s !important; }
.contact-form-grid :is(input, select, textarea):focus { border-color: rgba(var(--xp-c-a, 255, 42, 74), .7) !important; box-shadow: 0 0 0 4px rgba(var(--xp-c-a, 255, 42, 74), .14) !important; transform: translateY(-1px); }
.contact-submit-btn { position: relative; overflow: hidden; }
.contact-submit-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); }
.contact-submit-btn:hover::after { animation: ct-sheen .8s ease; }
@keyframes ct-sheen { to { transform: translateX(120%); } }
.contact-demo-result.active { animation: ct-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.contact-demo-result.is-error { animation: ct-shake .45s; }
@keyframes ct-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes ct-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* the routing cards: each one opens the form with its subject filled in */
@property --ct-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html body .contact-routing-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; perspective: 1400px; }
html body button.contact-routing-card.ct-route {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; justify-items: start; gap: 12px; width: 100%; min-height: 290px; margin: 0;
  padding: 26px 24px 24px !important; border-radius: 26px !important; border: 1px solid rgba(255, 255, 255, .08) !important; cursor: pointer; text-align: start; font: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 55%), rgb(var(--xp-c-bg2, 11, 12, 16)) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); color: inherit;
  transform: perspective(900px) rotateX(var(--ct-rx, 0deg)) rotateY(var(--ct-ry, 0deg)) translateY(var(--ct-lift, 0px));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s !important; }
/* a light runs round the edge on hover */
button.ct-route::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--ct-spin), transparent 0 70%, rgb(var(--xp-c-a, 255, 42, 74)) 85%, rgba(255, 255, 255, .9) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ct-spin 2.6s linear infinite; }
@keyframes ct-spin { to { --ct-spin: 360deg; } }
/* the pointer's light inside the card */
button.ct-route::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(320px circle at var(--ct-x, 50%) var(--ct-y, 0%), rgba(var(--xp-c-a, 255, 42, 74), .16), transparent 65%); }
button.ct-route:hover, button.ct-route:focus-visible { --ct-lift: -6px; border-color: transparent !important; box-shadow: 0 34px 80px rgba(0, 0, 0, .5), 0 0 50px rgba(var(--xp-c-a, 255, 42, 74), .12); }
button.ct-route:hover::before, button.ct-route:focus-visible::before, button.ct-route:hover::after { opacity: 1; }
button.ct-route:focus-visible { outline: 2px solid rgb(var(--xp-c-a, 255, 42, 74)); outline-offset: 3px; }
html body .ct-route .ct-route-num { position: absolute; top: 20px; inset-inline-end: 22px; font: 900 13px Inter, sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .28) !important; transition: color .3s; }
button.ct-route:hover .ct-route-num { color: rgb(var(--xp-c-a, 255, 42, 74)) !important; }
html body .ct-route .ct-route-bg { position: absolute; z-index: -1; bottom: -26px; inset-inline-end: -18px; font-size: 150px; line-height: 1; color: rgba(255, 255, 255, .035) !important;
  transform: translate(var(--ct-bx, 0px), var(--ct-by, 0px)) rotate(-8deg); transition: color .4s, transform .4s cubic-bezier(.2, .8, .2, 1); }
button.ct-route:hover .ct-route-bg { color: rgba(var(--xp-c-a, 255, 42, 74), .09) !important; }
.ct-route .ct-route-icon { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; margin-bottom: 8px;
  background: linear-gradient(140deg, rgb(var(--xp-c-a, 255, 42, 74)), rgb(var(--xp-c-a2, 196, 0, 37))); box-shadow: 0 14px 34px rgba(var(--xp-c-a, 255, 42, 74), .35);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; }
.ct-route .ct-route-icon::after { content: ""; position: absolute; inset: -7px; border-radius: 24px; border: 1px solid rgba(var(--xp-c-a, 255, 42, 74), .35); opacity: 0; transform: scale(.85); transition: opacity .35s, transform .45s; }
html body .ct-route .ct-route-icon i { font-size: 24px; color: rgb(var(--xp-c-on-a, 255, 255, 255)) !important; }
button.ct-route:hover .ct-route-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); box-shadow: 0 20px 44px rgba(var(--xp-c-a, 255, 42, 74), .5); }
button.ct-route:hover .ct-route-icon::after { opacity: 1; transform: none; }
html body .ct-route h3 { margin: 0 !important; font-size: 20px !important; font-weight: 900 !important; color: #fff !important; }
html body .ct-route p { margin: 0 !important; font-size: 14px !important; line-height: 1.85 !important; color: rgba(244, 245, 247, .66) !important; }
html body .ct-route .ct-route-go { display: inline-flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; font-weight: 900; font-size: 13px; color: rgb(var(--xp-c-a, 255, 42, 74)) !important; }
html body .ct-route .ct-route-go span { color: inherit !important; }
.ct-route .ct-route-go i { transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
html[dir="ltr"] .ct-route .ct-route-go i { transform: scaleX(-1); }
button.ct-route:hover .ct-route-go i { translate: -5px 0; }
html[dir="ltr"] button.ct-route:hover .ct-route-go i { translate: 5px 0; }
/* atlas.css paints every icon inside these cards as a 64px red tile: only the one in .ct-route-icon is meant to be */
html body .ct-route .ct-route-bg, html body .ct-route .ct-route-go i, html body .ct-route .ct-route-icon i {
  width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; display: inline-block !important; }
html body .ct-route .ct-route-bg { position: absolute !important; font-size: 150px !important; }
html body .ct-route .ct-route-go i { font-size: 13px !important; }
html body .ct-route .ct-route-icon i { font-size: 24px !important; }
/* the cards arrive turning up in 3D, one after another */
.ct-on .ct-route.ct-rise { translate: none; opacity: 0; rotate: x 28deg; transform-origin: 50% 100%; transition: opacity .7s, rotate 1s cubic-bezier(.16, 1, .3, 1) !important; transition-delay: calc(var(--i, 0) * 110ms) !important; }
.ct-on .ct-route.ct-rise.ct-in { opacity: 1; rotate: x 0deg; }
/* the chosen subject, flashed on the form */
.contact-form-panel.ct-picked { animation: ct-picked 1s cubic-bezier(.2, .8, .2, 1); }
@keyframes ct-picked { 0% { box-shadow: 0 0 0 0 rgba(var(--xp-c-a, 255, 42, 74), .6); } 100% { box-shadow: 0 0 0 22px rgba(var(--xp-c-a, 255, 42, 74), 0); } }
@media (max-width: 1100px) { html body .contact-routing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { html body .contact-routing-grid { grid-template-columns: 1fr !important; } html body button.contact-routing-card.ct-route { min-height: 0; } }

/* ------------------------------------------------------------------ the scroll scenes (wide screens, atlas-contact.js) */
/* the opening gathers into a card as it leaves (--ct-q: 0 → 1 as it scrolls away) */
.ct-scene-on .contact-hero { clip-path: inset(calc(var(--ct-q, 0) * 3%) calc(var(--ct-q, 0) * 5%) 0 round calc(var(--ct-q, 0) * 40px)); }
.ct-scene-on .contact-hero .hero-content { translate: 0 calc(var(--ct-q, 0) * -140px) !important; opacity: calc(1 - var(--ct-q, 0) * 1.5) !important; }
.ct-scene-on .contact-hero .contact-hero-bg { scale: calc(1 + var(--ct-q, 0) * .18); }
/* the contact block is held while the scene plays */
.ct-scene-on .contact-section.ct-scene { position: relative; }
.ct-scene-on .contact-section.ct-scene > .contact-layout { position: sticky; top: var(--ct-top, 90px); }
.ct-scene-on .contact-section .contact-layout.reveal { opacity: 1 !important; transform: none !important; }
.ct-scene-on .contact-info-panel, .ct-scene-on .contact-form-panel, .ct-scene-on .contact-method, .ct-scene-on #contactForm > *, .ct-scene-on #contactSend { will-change: translate, opacity; }
/* the heading's words light up */
.ct-scene-on .contact-info-panel h2 .ct-lw { display: inline-block; opacity: .16; translate: 0 .12em; transition: opacity .3s, translate .45s cubic-bezier(.2, .8, .2, 1), color .3s; }
.ct-scene-on .contact-info-panel h2 .ct-lw.on { opacity: 1; translate: 0 0; }
/* the send button, ready */
.ct-scene-on #contactSend.ct-ready { box-shadow: 0 0 0 0 rgba(var(--xp-c-a, 255, 42, 74), .55), 0 16px 40px rgba(var(--xp-c-a, 255, 42, 74), .35) !important; animation: ct-ready 2.2s ease-in-out infinite; }
@keyframes ct-ready { 50% { box-shadow: 0 0 0 12px rgba(var(--xp-c-a, 255, 42, 74), 0), 0 16px 40px rgba(var(--xp-c-a, 255, 42, 74), .45); } }
/* the routing cards are dealt by the scroll, not by the arrive-on-screen motion */
.ct-scene-on .ct-route { will-change: translate, rotate, scale; }
.ct-scene-on .contact-routing-section .section-head.reveal, .ct-scene-on .ct-route.reveal { opacity: 1; transform: none !important; }
/* the last call opens in a circle */
.ct-scene-on .final-cta .final-content.reveal { transform: none !important; }

/* ------------------------------------------------------------------ the last call: a round button in a turning ring, the
   section flooding with the palette's colour as it arrives (--ct-c: 0 → 1), like the home page's ending */
.final-cta { position: relative; isolation: isolate; overflow: hidden; }
.final-cta .ct-flood { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgb(var(--xp-c-a, 255, 42, 74)), rgb(var(--xp-c-a2, 196, 0, 37)) 72%);
  clip-path: circle(calc(var(--ct-c, 0) * 85%) at 50% 62%); }
.final-cta .final-content { position: relative; z-index: 2; }
html body .final-cta h2, html body .final-cta p, html body .final-cta .eyebrow { transition: color .4s; }
.final-cta.ct-flooded .final-bg { opacity: .25; transition: opacity .6s; }
html body .final-cta.ct-flooded :is(h2, p, .eyebrow), html body .final-cta.ct-flooded :is(h2, p) span { color: rgb(var(--xp-c-on-a, 255, 255, 255)) !important; }
html body .final-cta.ct-flooded .eyebrow { border-color: rgba(var(--xp-c-on-a, 255, 255, 255), .4) !important; background: rgba(0, 0, 0, .12) !important; }
.ct-ring-wrap { position: relative; display: inline-grid; place-items: center; width: 280px; height: 280px; margin-top: 18px; }
.ct-orbit { position: absolute; inset: 0; direction: ltr; transform: rotate(var(--ct-spin, 0deg)); }
html body .ct-orbit span { position: absolute; left: 50%; top: 0; height: 50%; transform-origin: 50% 100%; text-align: center; white-space: nowrap;
  font: 800 14px/1 Inter, Tajawal, sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .85) !important; translate: -50% 0; }
html body .ct-orbit.is-ar span { font: 800 16px/1 Tajawal, Inter, sans-serif; letter-spacing: 0; }
html body .final-cta.ct-flooded .ct-orbit span { color: rgba(var(--xp-c-on-a, 255, 255, 255), .9) !important; }
html body a.ct-magnet { position: relative; display: grid; place-items: center; width: 170px; height: 170px; border-radius: 50%; text-decoration: none !important;
  background: rgb(var(--xp-c-a, 255, 42, 74)); color: rgb(var(--xp-c-on-a, 255, 255, 255)) !important; font: 900 18px Tajawal, Inter, sans-serif;
  box-shadow: 0 30px 80px rgba(var(--xp-c-a, 255, 42, 74), .45); transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .35s, color .35s, box-shadow .35s; }
html body a.ct-magnet span { color: inherit !important; }
/* the site's theme rule paints every link white at a higher weight: the button's colours go on its id */
html body #ctMagnet, html body #ctMagnet span { color: rgb(var(--xp-c-on-a, 255, 255, 255)) !important; }
html body .final-cta.ct-flooded #ctMagnet, html body .final-cta.ct-flooded #ctMagnet span { color: rgb(var(--xp-c-a, 255, 42, 74)) !important; }
html body .final-cta.ct-flooded #ctMagnet:hover, html body .final-cta.ct-flooded #ctMagnet:hover span { color: #fff !important; }
a.ct-magnet::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(var(--xp-c-a, 255, 42, 74), .45); animation: ct-ring 2.6s ease-out infinite; }
@keyframes ct-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
html body .final-cta.ct-flooded a.ct-magnet { background: #fff; color: rgb(var(--xp-c-a, 255, 42, 74)) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
html body .final-cta.ct-flooded a.ct-magnet::before { border-color: rgba(255, 255, 255, .55); }
html body .final-cta.ct-flooded a.ct-magnet:hover { background: #0b0c10; color: #fff !important; }
@media (max-width: 600px) { .ct-ring-wrap { width: 230px; height: 230px; } html body a.ct-magnet { width: 140px; height: 140px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .final-cta .ct-flood { clip-path: none; } a.ct-magnet::before { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .ct-on * { transition: none !important; animation: none !important; }
  .ct-on .ct-rise, .ct-on .contact-hero :is(.eyebrow, p, .hero-actions), .ct-on .contact-hero h1 .ct-w > span, .ct-on .contact-method i { opacity: 1 !important; translate: none !important; transform: none !important; }
}