/* solutions.zakpy.com: only what the kit does not have. Colours, type and spacing come from the kit tokens. */

.hero .display { font-size: clamp(2.25rem, 5.4vw, 4rem); }
.sec__title { margin: 0; }

/* Our work: project cards and one number */
.work { list-style: none; padding: 0; margin-block-end: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.work__case { display: flex; flex-direction: column; gap: var(--space-2); border-inline-start: 4px solid var(--accent); }
.work__case h3, .work__case p { margin: 0; }
.work__tag { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.work__tag .icon { color: var(--accent); }
.work__stat { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; }
.stat .stat__value { color: var(--accent); white-space: nowrap; font-size: clamp(2rem, 7vw, 3rem); }
[dir="rtl"] .stat__value { direction: ltr; text-align: end; unicode-bidi: isolate; }

/* Online now: live sites, a browser frame with the desktop shot and a phone overlapping the corner */
.live { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.live__item { display: flex; flex-direction: column; gap: var(--space-3); }
.live__shot { position: relative; display: block; margin-inline-end: 2.25rem; margin-block-end: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); overflow: visible; }
.live__bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--bg-alt); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.live__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--border); }
.live__bar i:first-child { background: var(--accent); }
.live__url { margin-inline-start: 0.5rem; flex: 1; min-width: 0; padding: 0.15rem 0.75rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__screen { display: block; overflow: hidden; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.live__desk { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.6s var(--ease); transform-origin: top center; }
.live__phone { position: absolute; inset-inline-end: -2.25rem; bottom: -1.5rem; width: 26%; max-width: 8.5rem; height: auto; border-radius: 1rem; border: 4px solid #0b1220; outline: 1px solid var(--border); background: #0b1220; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); transition: transform 0.6s var(--ease); }
.live__item:hover .live__desk { transform: scale(1.03); }
.live__item:hover .live__phone { transform: translateY(-8px); }
.live__body { display: flex; flex-direction: column; gap: var(--space-1); }
.live__body h3, .live__body p { margin: 0; }
.live__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.live__tag { display: inline-flex; align-items: center; padding: 0.1rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--border); color: var(--text-muted); }
.live__tag--client { border-color: var(--accent); color: var(--accent); }
[lang="ar-MA"] .live__tag, [dir="rtl"] .live__tag { letter-spacing: 0; }
.live__langs { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; }
.live__host { font-weight: 400; color: var(--text-muted); font-size: 0.9em; }
.live__body .link-arrow { align-self: flex-start; margin-top: var(--space-1); }
@media (max-width: 480px) {
  .live__shot { margin-inline-end: 1.25rem; }
  .live__phone { inset-inline-end: -1.25rem; width: 28%; border-width: 3px; border-radius: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .live__desk, .live__phone { transition: none; }
  .live__item:hover .live__desk, .live__item:hover .live__phone { transform: none; }
}

/* Services */
.services { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.service { display: flex; flex-direction: column; gap: var(--space-2); }
.service h3, .service p { margin: 0; }

/* Contact block */
.contact { padding: var(--space-6) var(--space-4); border-radius: var(--radius); }
.contact .lead { max-width: 36rem; }
.contact .btn--secondary { --btn-fg: var(--inverse-text); --btn-border: var(--inverse-text); }
.contact .btn--secondary:hover { --btn-fg: var(--inverse-bg); --btn-bg: var(--inverse-text); }
.contact .btn span { overflow-wrap: anywhere; }

.footer__mail { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer__legal { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.footer__legal p { margin: 0; }

.nav__logo span, .nav__drawer-head .logo span { white-space: nowrap; }

/* Process levels */
.h2 { font: 800 clamp(1.625rem, 3vw, 2.25rem)/1.15 var(--font-display); margin: 0 0 var(--space-2); }
[dir="rtl"] .h2 { font-family: var(--font-ar); }