/* Arabic heading scale (2026-10-15): the Arabic headlines are full sentences now,
   so the display sizes built for short English titles are reduced. English pages are untouched.
   :where() keeps the generic rules at plain-element weight, so component sizes still win. */
:where(html[lang="ar"]) h1 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.25; }
:where(html[lang="ar"]) h2 { font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.3; }

html[lang="ar"] .hero-copy h1 { font-size: clamp(1.9rem, 3.7vw, 3.5rem); max-width: 16ch; line-height: 1.3; }
html[lang="ar"] .hs-card h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.3; }
html[lang="ar"] .step h3 { font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.3; }
html[lang="ar"] .ya-panel h1 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
html[lang="ar"] .q-h { font-size: clamp(1.7rem, 3vw, 2.5rem); }
html[lang="ar"] .bp-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.3; }
html[lang="ar"] .ft-big { font-size: clamp(1.5rem, 2.7vw, 2.4rem); line-height: 1.4; max-width: 44ch; text-wrap: balance; }

/* Home hero: the line under the headline changes with the rotating word. */
.rot-s { display: inline-block; transition: opacity .4s, transform .5s; }
.rot-s.is-out { opacity: 0; transform: translateY(-.3em); }
@media (prefers-reduced-motion: reduce) { .rot-s { transition: none; } }
@media (max-width: 760px) { html[lang="ar"] .hero-copy h1 { max-width: none; } html[lang="ar"] .hero-copy h1 .nw { display: block; } }
/* the shorter headline left empty space above it: centre the text on the dashboard drawing (desktop) */
@media (min-width: 901px) { html[lang="ar"] .hero-copy { align-self: center; } }

/* Home hero scroll cue: a mouse with a moving wheel and a bouncing chevron instead of text. */
.scroll-cue.sc-icon { flex-direction: column; gap: .4rem; }
.sc-mouse { position: relative; width: 24px; height: 38px; border: 2px solid var(--cyan); border-radius: 14px; opacity: .85; }
.sc-mouse b { position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--cyan); animation: scWheel 1.8s ease-in-out infinite; }
.sc-chev { width: 9px; height: 9px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); animation: scChev 1.8s ease-in-out infinite; }
@keyframes scWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes scChev { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .35; } 50% { transform: translateY(5px) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-mouse b, .sc-chev { animation: none; } }

/* Services page: hero text beside a "services circle" — the logo in the middle, the seven services around it,
   each one a link to its section. Arms are rotated around the centre; the node turns back upright. */
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
.svc-hub { --hs: 440px; --r: 172px; --node: 58px; position: relative; width: min(100%, var(--hs)); aspect-ratio: 1; justify-self: center; }
.sh-orbit, .sh-orbit::after { position: absolute; inset: calc(50% - var(--r)); border-radius: 50%; border: 1px dashed rgba(72,199,236,.35); animation: shSpin 80s linear infinite; }
.sh-orbit::after { content: ""; inset: 34%; border-style: solid; border-color: rgba(72,199,236,.12); animation: none; }
.sh-core { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; margin: -59px 0 0 -59px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(72,199,236,.18), rgba(14,37,49,.9) 70%); border: 1px solid rgba(72,199,236,.4); box-shadow: 0 0 60px rgba(72,199,236,.18); }
.sh-core .mk { width: 64px; height: 64px; }
.sh-core .mk .mk-ring { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-dasharray: none; }
.sh-core .mk .mk-m, .sh-core .mk .mk-leg { fill: var(--cyan); stroke: none; }
.sh-core .mk .mk-tick { fill: var(--ink); stroke: none; }
.sh-nodes { list-style: none; margin: 0; padding: 0; }
.sh-nodes li { --a: calc(var(--i) * 51.4286deg); position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.sh-nodes li::before { content: ""; position: absolute; left: -.5px; bottom: 0; width: 1px; height: calc(var(--r) - var(--node) / 2 - 6px);
  background: linear-gradient(to top, rgba(72,199,236,.05), rgba(72,199,236,.35)); }
.sh-nodes a { position: absolute; left: 0; top: calc(-1 * var(--r)); transform: translate(-50%, calc(-1 * var(--node) / 2)) rotate(calc(-1 * var(--a)));
  transform-origin: 50% calc(var(--node) / 2); display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 7.5rem; text-align: center;
  color: var(--text); text-decoration: none; }
.sh-ic { width: var(--node); height: var(--node); display: grid; place-items: center; border-radius: 50%; color: var(--cyan);
  background: rgba(14,37,49,.95); border: 1px solid var(--line-2); transition: border-color .25s, box-shadow .25s, transform .25s;
  animation: shPulse 8.4s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.sh-ic svg { width: 26px; height: 26px; }
.sh-t { font-size: .85rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.sh-nodes a:hover .sh-ic, .sh-nodes a:focus-visible .sh-ic { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(72,199,236,.15), 0 0 24px rgba(72,199,236,.35); transform: scale(1.08); animation: none; }
.sh-nodes a:focus-visible { outline: none; }
@keyframes shSpin { to { transform: rotate(360deg); } }
@keyframes shPulse { 0%, 14% { border-color: var(--cyan); box-shadow: 0 0 22px rgba(72,199,236,.35); } 24%, 100% { border-color: var(--line-2); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .sh-orbit, .sh-ic { animation: none; } }
@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: 1fr; }
  .svc-hub { --hs: 330px; --r: 122px; --node: 46px; margin-top: 1rem; }
  .sh-core { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
  .sh-core .mk { width: 48px; height: 48px; }
  .sh-ic svg { width: 21px; height: 21px; }
  .sh-t { font-size: .72rem; }
  .sh-nodes a { width: 6rem; }
}

/* Services list has 9 cards on the Arabic page: 3 full rows on desktop, so the last card is not wide there. */
@media (min-width: 961px) { .svc-list .svc-wide { grid-column: auto; } }
@media (min-width: 641px) and (max-width: 960px) { .svc-list #s-marketing { grid-column: auto; } }

/* Works grid: a lone last card (odd count) sits centred instead of hugging one side. */
.wk-grid > .wk:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(.6rem, 1.5vw, 1.1rem)); }
@media (max-width: 760px) { .wk-grid > .wk:last-child:nth-child(odd) { width: auto; } }

/* About page «مَهارة» card: what we do well, as cards (Arabic page only). */
.dict-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.dict-cards li { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .85rem .95rem; border: 1px solid var(--line-2); border-radius: 8px;
  background: rgba(72,199,236,.05); color: var(--text); font-size: 1rem; font-weight: 500; line-height: 1.45; transition: border-color .2s, background .2s; }
.dict-cards li:hover { border-color: var(--cyan); background: rgba(72,199,236,.1); }
.dict-cards li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dc-t { white-space: nowrap; }
.dc-ic { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(72,199,236,.14); color: var(--cyan); }
.dc-ic svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 420px) { .dict-cards { grid-template-columns: 1fr; } }