/* Contact page — /ar/contact/ and /contact/. Prefix: .ct-  */

/* ---------- hero art: two rings (your group + Codeator) slide together and interlock ---------- */
.ct-art text { font-family: var(--f-ui); text-anchor: middle; }
.ct-ring { fill: none; stroke-width: 14; }
.ct-ring.gold, .ct-over { stroke: var(--gold); }
.ct-ring.lapis { stroke: var(--lapis-400); }
.ct-over { fill: none; stroke-width: 14; }
.ct-dash { fill: none; stroke-width: 1.6; stroke-dasharray: 2 9; stroke-linecap: round; }
.ct-dash.gold { stroke: rgba(247,226,173,.6); }
.ct-dash.lapis { stroke: rgba(201,211,242,.5); }
.ct-label { font-size: 19px; font-weight: 500; fill: #fff; }
.ct-sub { font-size: 13.5px; font-weight: 300; fill: #aab6de; }
.ct-mark { --mk-ring: var(--lapis-400); }
.ct-cubes .f-top { fill: #fbfcff; }
.ct-cubes .f-left { fill: #d3dbf0; }
.ct-cubes .f-right { fill: #a9b7df; }
.ct-cubes .ct-bob { animation: bob-s var(--bt, 5s) ease-in-out infinite alternate; animation-delay: var(--bd, 0s); }

.ct-slide-a { animation: ct-slide-a 1.9s var(--ease) .5s both; }
.ct-slide-b { animation: ct-slide-b 1.9s var(--ease) .5s both; }
.ct-lens { animation: fade-in .8s ease 2.1s both; }
.ct-lens text { font-size: 15px; font-weight: 500; fill: var(--gold-soft); }
.ct-lens rect { fill: var(--gold); }
.ct-lens .ct-halo { fill: none; stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: halo 2.8s ease-out 2.4s infinite; }

@keyframes ct-slide-a { from { transform: translateX(70px); } to { transform: none; } }
@keyframes ct-slide-b { from { transform: translateX(-70px); } to { transform: none; } }

/* ---------- session + form ---------- */
.ct-split { align-items: start; }
.ct-after { font-size: var(--t-lg); color: var(--lapis-900); margin-block: clamp(36px, 4vw, 52px) 22px; }

/* the three steps, stacked, joined by a flowing rail */
.steps.ct-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ct-steps li { border-top: 0; padding-top: 0; padding-inline-start: 84px; padding-bottom: 30px; min-height: 86px; }
.ct-steps li:last-child { padding-bottom: 0; }
.ct-steps li::before {
  position: static; display: block; margin-bottom: 2px;
  content: "0" counter(st); font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--gold-deep);
}
.ct-steps li::after {
  top: 66px; bottom: 6px; inset-inline-start: 27px; width: 2px; height: auto; transform: none;
  background: repeating-linear-gradient(to bottom, var(--lapis-300) 0 6px, transparent 6px 12px);
  background-size: 2px 12px; animation: ct-rail .9s linear infinite;
}
.ct-steps li:last-child::after { display: none; }
.ct-glyph { position: absolute; top: 0; inset-inline-start: 0; width: 56px; height: 56px; overflow: visible; }
.ct-glyph .bg { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.ct-glyph .sheet { fill: var(--lapis-100); stroke: var(--lapis-700); stroke-width: 1.6; stroke-linejoin: round; }
.ct-glyph .ln { stroke: var(--lapis-500); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 16; }
.ct-glyph .seal { fill: var(--gold); }
.ct-glyph .r-gold, .ct-glyph .r-over { fill: none; stroke: var(--gold); stroke-width: 3; }
.ct-glyph .r-lapis { fill: none; stroke: var(--lapis-500); stroke-width: 3; }
.ct-glyph .t1 { fill: var(--lapis-900); }
.ct-glyph .t2 { fill: var(--lapis-700); }
.ct-glyph .t3 { fill: var(--gold); }
.in-view .ct-glyph .ln { animation: ct-write 3.6s var(--ease) infinite; animation-delay: var(--ld, 0s); }
.in-view .ct-glyph .r-a { animation: ct-near-a 3.6s var(--ease) infinite alternate; }
.in-view .ct-glyph .r-b { animation: ct-near-b 3.6s var(--ease) infinite alternate; }
.in-view .ct-glyph .t1, .in-view .ct-glyph .t2, .in-view .ct-glyph .t3 { animation: ct-tier 3.6s var(--ease) infinite; animation-delay: var(--ld, 0s); }

@keyframes ct-rail { from { background-position: 0 0; } to { background-position: 0 12px; } }
@keyframes ct-write { 0% { stroke-dashoffset: 16; } 35%, 100% { stroke-dashoffset: 0; } }
@keyframes ct-near-a { from { transform: translateX(3px); } to { transform: none; } }
@keyframes ct-near-b { from { transform: translateX(-3px); } to { transform: none; } }
@keyframes ct-tier { 0% { transform: translateY(5px); } 30%, 100% { transform: none; } }

.ct-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--line); }
.ct-facts > div { padding-block: 16px; }
.ct-facts dt { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-3); }
.ct-facts dd { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--lapis-900); }

/* the form panel */
.ct-panel {
  position: relative; background: var(--paper); border-radius: 3px;
  padding: clamp(22px, 3vw, 38px);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--gold), 0 30px 40px -34px rgba(14,27,82,.45);
}
.ct-panel h2 { font-size: clamp(24px, 2.4vw, 32px); color: var(--lapis-900); margin-bottom: 8px; }
.ct-panel > p { font-size: 16.5px; color: var(--ink-2); margin-bottom: 26px; }
.ct-panel label.ct-req::after { content: " *"; color: var(--gold-deep); font-weight: 700; }
[dir="rtl"] .ct-panel input[type="email"], [dir="rtl"] .ct-panel input[type="tel"] { direction: ltr; text-align: right; }
.ct-panel .field select { appearance: none; -webkit-appearance: none; padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231b3190' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px 8px; background-position: left 15px center; }
[dir="ltr"] .ct-panel .field select { background-position: right 15px center; }
.ct-submit { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ct-submit .form-status:empty { display: none; }
.ct-wide { grid-column: 1 / -1; }
.ct-legal { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-3); }

@media (max-width: 600px) {
  .ct-steps li { padding-inline-start: 72px; }
}