@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');

        :root {
            --ink: #111318;
            --blue: #3157FF;
            --paper: #F7F7F5;
            --white: #fff;
            --muted: #6B7280;
            --line: #D9DCE1;
            --s8: 8px;
            --s12: 12px;
            --s16: 16px;
            --s24: 24px;
            --s32: 32px;
            --s48: 48px;
            --s64: 64px;
            --s96: 96px;
            --font: "Geist", "Arial", sans-serif;
            --arabic: "IBM Plex Sans Arabic", Arial, sans-serif
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: var(--font);
            font-size: 16px;
            line-height: 1.5
        }

        button {
            font: inherit
        }

        button:focus-visible,
        a:focus-visible {
            outline: 3px solid var(--blue);
            outline-offset: 3px
        }

        .wrap {
            max-width: 1440px;
            margin: auto;
            /* Fluid gutters: 20px on the narrowest phone, 48px from 1143px up.
               A fixed 48px read as a wall on a 360px screen, and a 20px step at
               760px left tablet layouts cramped. */
            padding: 0 max(20px, min(4.2vw, 48px))
        }

        .eyebrow {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .17em;
            text-transform: uppercase;
            color: var(--muted)
        }

        .rule {
            height: 1px;
            background: var(--line)
        }

        .logo {
            display: flex;
            align-items: center;
            color: var(--ink)
        }

        .logo svg {
            display: block;
            width: auto;
            height: 36px
        }

        .mark-foot,
        .mark-hero {
            display: block;
            flex: 0 0 auto
        }

        .mark-foot svg {
            display: block;
            width: auto;
            height: 26px
        }

        header {
            height: 76px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--line);
            /* Stacks above the mobile navigation panel so the toggle that
               opened the menu stays tappable while it is open. */
            position: relative;
            z-index: 70
        }

        header .wrap {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 24px
        }

        .nav button,
        .text-button {
            background: transparent;
            border: 0;
            color: var(--ink);
            cursor: pointer;
            padding: 8px 0;
            font-size: 13px
        }

        .nav button:hover,
        .text-button:hover {
            color: var(--blue)
        }

        .lang {
            display: flex;
            border: 1px solid var(--line);
            padding: 3px;
            margin-left: 10px
        }

        .lang button {
            border: 0;
            background: transparent;
            padding: 5px 8px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            color: var(--muted)
        }

        .lang button.active {
            background: var(--ink);
            color: #fff
        }

        .menu {
            display: none;
            align-items: center;
            gap: 9px;
            min-height: 44px;
            padding: 0 2px;
            background: none;
            border: 0;
            color: var(--ink);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase
        }

        .menu-icon {
            position: relative;
            width: 20px;
            height: 12px;
            flex: none
        }

        .menu-icon:before,
        .menu-icon:after {
            content: "";
            position: absolute;
            inset-inline: 0;
            height: 2px;
            background: currentColor;
            transition: transform .2s
        }

        .menu-icon:before {
            top: 0
        }

        .menu-icon:after {
            bottom: 0
        }

        .menu[aria-expanded="true"] .menu-icon:before {
            transform: translateY(5px) rotate(45deg)
        }

        .menu[aria-expanded="true"] .menu-icon:after {
            transform: translateY(-5px) rotate(-45deg)
        }

        /* ---------- Mobile navigation ----------
           bita.js builds this panel from the header nav. The header keeps a
           higher stacking order than the panel, so the control that opened the
           menu is also the control that closes it, and the logo stays visible. */
        body.nav-open {
            overflow: hidden
        }

        .mobile-nav {
            position: fixed;
            inset: 0;
            z-index: 60;
            background: var(--paper);
            display: flex;
            flex-direction: column;
            padding: 76px 20px 20px;
            overflow-y: auto;
            overscroll-behavior: contain
        }

        .mobile-nav[hidden] {
            display: none
        }

        .mobile-nav-links {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto
        }

        .mobile-nav-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-height: 58px;
            padding: 6px 0;
            border-bottom: 1px solid var(--line);
            color: var(--ink);
            text-decoration: none;
            font-size: 24px;
            letter-spacing: -.04em;
            line-height: 1.15
        }

        .mobile-nav-link:after {
            content: "→";
            flex: none;
            color: var(--blue);
            font-size: 15px
        }

        html[dir="rtl"] .mobile-nav-link:after {
            content: "←"
        }

        .mobile-nav-lang {
            margin-top: auto;
            padding-top: 24px
        }

        .mobile-nav-lang button {
            min-width: 46px;
            min-height: 46px
        }

        .mobile-nav-cta {
            display: block;
            margin-top: 16px;
            min-height: 54px;
            text-align: center
        }

        .hero {
            padding: var(--s64) 0 var(--s48);
            min-height: 570px;
            position: relative;
            overflow: hidden
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 7fr 5fr;
            gap: var(--s48);
            align-items: end
        }

        .hero h1 {
            font-size: clamp(48px, 6.3vw, 88px);
            letter-spacing: -.075em;
            line-height: .98;
            max-width: 800px;
            margin: var(--s16) 0 var(--s24)
        }

        .hero p {
            max-width: 510px;
            font-size: 18px;
            color: var(--muted);
            margin: 0 0 var(--s32)
        }

        .actions {
            display: flex;
            gap: 12px;
            align-items: center
        }

        .button {
            border: 1px solid var(--ink);
            padding: 13px 18px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 650;
            transition: .2s
        }

        .button.primary {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue)
        }

        .button.primary:hover {
            background: #2447da
        }

        .button.dark {
            background: var(--ink);
            color: #fff
        }

        .button.ghost {
            background: transparent;
            color: var(--ink)
        }

        .hero-art {
            height: 410px;
            position: relative;
            background: var(--ink);
            overflow: hidden
        }

        .hero-art .gridlines {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
            background-size: 42px 42px
        }

        .mark-hero {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            height: 190px
        }

        .mark-hero svg {
            display: block;
            width: auto;
            height: 100%
        }

        .corner-note {
            position: absolute;
            left: 20px;
            top: 18px;
            color: #fff;
            font-size: 10px;
            letter-spacing: .15em;
            text-transform: uppercase
        }

        .axis {
            position: absolute;
            right: 20px;
            bottom: 18px;
            color: #fff;
            font-size: 10px;
            letter-spacing: .12em;
            opacity: .65
        }

        .statement-band {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            padding: 24px 0
        }

        .statement {
            display: grid;
            grid-template-columns: 2fr 3fr;
            gap: 32px
        }

        .statement p {
            font-size: 24px;
            line-height: 1.25;
            letter-spacing: -.035em;
            margin: 0;
            max-width: 710px
        }

        .section {
            /* Fluid vertical rhythm: 48px on a phone, 96px on a wide screen.
               The fixed 96px/64px pair wasted a third of a small viewport. */
            padding: clamp(48px, 6.5vw, 96px) 0
        }

        .section-head {
            display: grid;
            grid-template-columns: 3fr 6fr 3fr;
            gap: 24px;
            border-top: 1px solid var(--line);
            padding-top: 16px;
            margin-bottom: 48px
        }

        .section-title {
            font-size: clamp(30px, 3.6vw, 52px);
            line-height: 1.05;
            letter-spacing: -.06em;
            margin: 0
        }

        .section-intro {
            color: var(--muted);
            margin: 4px 0 0;
            max-width: 430px
        }

        .services {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            border: 1px solid var(--line);
            border-right: 0
        }

        .solutions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border: 1px solid var(--line)
        }

        .solution {
            padding: 32px;
            min-height: 310px;
            position: relative;
            border-right: 1px solid var(--line);
            background: var(--white);
            overflow: hidden
        }

        .solution:last-child {
            border-right: 0
        }

        .solution h3 {
            font-size: 31px;
            line-height: 1.04;
            letter-spacing: -.05em;
            max-width: min(270px, calc(100% - 190px));
            margin: 58px 0 12px
        }

        .solution p {
            max-width: min(370px, calc(100% - 190px));
            font-size: 14px;
            color: var(--muted);
            margin: 0
        }

        .solution .solution-mark {
            position: absolute;
            right: -28px;
            bottom: -18px;
            width: 190px;
            height: 190px;
            background: var(--blue);
            clip-path: polygon(0 0, 100% 0, 100% 55%, 52% 100%, 0 100%);
            opacity: .96
        }

        .solution.growth .solution-mark {
            background: var(--ink);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%, 0 55%)
        }

        .about-grid {
            display: grid;
            grid-template-columns: 5fr 7fr;
            border-top: 1px solid var(--line);
            padding-top: 20px;
            gap: 48px
        }

        .about-copy {
            font-size: clamp(25px, 3.2vw, 43px);
            line-height: 1.12;
            letter-spacing: -.055em;
            margin: 0;
            max-width: 690px
        }

        .about-list {
            border-left: 1px solid var(--line);
            padding-left: 24px
        }

        .about-list div {
            padding: 12px 0;
            border-bottom: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            font-size: 14px
        }

        .about-list span:last-child {
            color: var(--muted)
        }

        .service {
            padding: 28px;
            border-right: 1px solid var(--line);
            min-height: 260px;
            position: relative;
            background: var(--white)
        }

        .service:hover {
            background: #f1f3ff
        }

        .service-no {
            font-size: 12px;
            color: var(--blue);
            font-weight: 700
        }

        .service h3 {
            font-size: 25px;
            letter-spacing: -.04em;
            margin: 58px 0 9px
        }

        .service p {
            font-size: 14px;
            color: var(--muted);
            margin: 0
        }

        .service .line-icon {
            position: absolute;
            right: 24px;
            top: 24px;
            width: 25px;
            height: 25px;
            border: 1.5px solid var(--ink)
        }

        /* Service card that has its own detail page: whole card is the hit area. */
        .service h3 a.service-link {
            color: inherit;
            text-decoration: none
        }

        .service h3 a.service-link:hover {
            color: var(--blue)
        }

        .service:has(.service-link) {
            cursor: pointer
        }

        .service h3 a.service-link:after {
            content: "";
            position: absolute;
            inset: 0
        }

        .service-go {
            position: absolute;
            bottom: 22px;
            inset-inline-start: 28px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color .2s
        }

        .service:has(.service-link) {
            padding-bottom: 50px
        }

        .service:has(.service-link):hover .service-go,
        .service:has(a.service-link:focus-visible) .service-go {
            color: var(--blue)
        }

        .service:nth-child(2) .line-icon {
            border-radius: 50%;
            border-right-color: var(--blue)
        }

        .service:nth-child(3) .line-icon {
            transform: rotate(45deg);
            border-color: var(--blue)
        }

        .work {
            background: var(--ink);
            color: #fff
        }

        .work .section-head {
            border-color: #343741
        }

        .work .eyebrow {
            color: #abb0bc
        }

        .work .section-intro {
            color: #b8bdc8
        }

        .work-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 20px
        }

        .case {
            min-height: 370px;
            position: relative;
            padding: 24px;
            overflow: hidden;
            background: #1a1e27;
            display: flex;
            flex-direction: column
        }

        .case.light {
            background: #e9edff;
            color: var(--ink)
        }

        .case small {
            font-size: 11px;
            letter-spacing: .14em;
            text-transform: uppercase
        }

        .case h3 {
            margin: auto 0 0;
            font-size: 27px;
            letter-spacing: -.05em
        }

        .case .sample {
            position: absolute;
            top: 23px;
            right: 20px;
            background: rgba(255, 255, 255, .16);
            padding: 5px 8px;
            font-size: 10px;
            letter-spacing: .1em
        }

        .light .sample {
            background: rgba(17, 19, 24, .08)
        }

        .screen {
            position: relative;
            flex: 0 0 auto;
            height: 228px;
            margin: 22px 11px 18px;
            background: #fff;
            color: var(--ink);
            padding: 14px;
            border-radius: 4px
        }

        .screen-nav {
            height: 8px;
            width: 55%;
            background: #dce1eb;
            margin-bottom: 24px
        }

        .screen-title {
            font-weight: 800;
            font-size: 30px;
            letter-spacing: -.07em;
            max-width: 220px;
            line-height: .95
        }

        .screen-blue {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 47%;
            height: 56%;
            background: var(--blue);
            clip-path: polygon(100% 0, 100% 100%, 0 100%)
        }

        .screen-grid {
            position: absolute;
            bottom: 30px;
            left: 14px;
            right: 14px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px
        }

        .screen-grid b {
            height: 43px;
            background: #f0f2f6;
            border: 1px solid #e1e4eb
        }

        .process {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--line)
        }

        .step {
            padding: 22px 22px 0 0;
            margin-right: 22px;
            border-right: 1px solid var(--line);
            min-height: 180px
        }

        .step:last-child {
            border: 0
        }

        .step b {
            display: block;
            font-size: 12px;
            color: var(--blue);
            margin-bottom: 44px
        }

        .step h3 {
            font-size: 20px;
            letter-spacing: -.03em;
            margin: 0 0 7px
        }

        .step p {
            font-size: 13px;
            color: var(--muted);
            margin: 0
        }

        .contact {
            padding: clamp(48px, 6.5vw, 96px) 0;
            background: var(--blue);
            color: #fff
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 7fr 5fr;
            gap: 48px;
            align-items: end
        }

        .contact h2 {
            font-size: clamp(44px, 5.6vw, 76px);
            line-height: .98;
            letter-spacing: -.07em;
            margin: 14px 0
        }

        .contact p {
            max-width: 490px;
            margin: 0;
            color: rgba(255, 255, 255, .9);
            font-size: 17px
        }

        .contact .button {
            background: #fff;
            border-color: #fff;
            color: var(--ink);
            margin-top: 28px
        }

        .contact-side {
            border-left: 1px solid rgba(255, 255, 255, .7);
            padding: 20px 0 20px 26px
        }

        .contact-side p {
            font-size: 12px;
            line-height: 1.6
        }

        .contact .eyebrow {
            color: rgba(255, 255, 255, .9)
        }

        .contact-form {
            display: grid;
            gap: 17px;
            margin: 0
        }

        .field {
            display: grid;
            gap: 6px
        }

        .field label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .9)
        }

        .field input,
        .field select,
        .field textarea {
            width: 100%;
            background: transparent;
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, .7);
            color: #fff;
            font: inherit;
            font-size: 15px;
            padding: 9px 0;
            border-radius: 0;
            appearance: none;
            -webkit-appearance: none;
            transition: border-color .2s, box-shadow .2s
        }

        .field textarea {
            resize: vertical;
            min-height: 92px;
            line-height: 1.5;
            font-size: 14px
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: rgba(255, 255, 255, .9);
            opacity: 1
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-bottom-color: #fff;
            box-shadow: 0 1px 0 0 #fff
        }

        .sel {
            position: relative;
            display: block
        }

        .sel:after {
            content: "";
            position: absolute;
            inset-inline-end: 2px;
            top: 16px;
            width: 7px;
            height: 7px;
            border-right: 1.5px solid rgba(255, 255, 255, .9);
            border-bottom: 1.5px solid rgba(255, 255, 255, .9);
            transform: rotate(45deg);
            pointer-events: none
        }

        .field select option {
            background: #111318;
            color: #fff
        }

        .field input.is-invalid,
        .field select.is-invalid,
        .field textarea.is-invalid {
            border-bottom-color: #FF6B6B;
            box-shadow: 0 1px 0 0 #FF6B6B
        }

        .field-error,
        .contact-form-error {
            display: block;
            font-size: 12px;
            line-height: 1.5;
            color: #FF9B9B
        }

        .field-error:empty {
            display: none
        }

        /* Outcome line for the submit. aria-live announces it, so it stays in
           flow rather than overlaying anything the reader has to dismiss. */
        .contact-status {
            display: grid;
            gap: 2px;
            margin: 0 0 14px;
            padding: 11px 14px;
            border-inline-start: 2px solid #FF9B9B;
            background: rgba(255, 155, 155, .1);
            color: #FFD4D4;
            font-size: 13px;
            line-height: 1.5
        }

        .contact-status:empty {
            display: none
        }

        .contact-status.is-ok {
            border-inline-start-color: #7BE0A8;
            background: rgba(123, 224, 168, .1);
            color: #CFF5E0
        }

        .contact-form .contact-submit {
            justify-self: start;
            margin: 4px 0 0;
            padding: 12px 22px;
            background: #fff;
            border-color: #fff;
            color: var(--ink);
            font-weight: 650;
            cursor: pointer
        }

        .contact-form.is-sending .contact-submit {
            opacity: .72;
            cursor: progress
        }

        /* One label at a time. The loading copy is present in the markup from
           the start so the swap costs no layout shift and no reflow. */
        .submit-loading {
            display: none
        }

        .is-sending .submit-loading {
            display: inline
        }

        .is-sending .submit-normal {
            display: none
        }

        .contact-form .sample-note {
            margin: 0;
            color: rgba(255, 255, 255, .9);
            opacity: 1;
            max-width: none;
            font-size: 12px;
            line-height: 1.6
        }

        .sample-note {
            font-size: 10px;
            letter-spacing: .1em;
            text-transform: uppercase;
            opacity: .72
        }

        footer {
            padding: 24px 0;
            background: var(--ink);
            color: #fff
        }

        footer .wrap {
            display: flex;
            align-items: center;
            gap: 16px;
            justify-content: space-between;
            font-size: 11px;
            color: #bdc2cc
        }

        .ar {
            font-family: var(--arabic);
            display: none
        }

        .fr {
            display: none
        }

        html[data-lang="ar"] .en,
        html[data-lang="fr"] .en {
            display: none
        }

        html[data-lang="ar"] .fr,
        html[data-lang="fr"] .ar {
            display: none
        }

        html[data-lang="ar"] .ar,
        html[data-lang="fr"] .fr {
            display: block
        }

        html[data-lang="ar"] .hero h1,
        html[data-lang="ar"] .section-title,
        html[data-lang="ar"] .contact h2 {
            letter-spacing: -.04em
        }

        html[data-lang="ar"] .hero-grid,
        html[data-lang="ar"] .contact-grid {
            direction: rtl
        }

        html[data-lang="ar"] .hero-art {
            text-align: left
        }

        html[data-lang="ar"] .statement,
        html[data-lang="ar"] .section-head {
            direction: rtl
        }

        html[data-lang="ar"] .service,
        html[data-lang="ar"] .step {
            text-align: right
        }

        html[data-lang="ar"] .step {
            border-right: 0;
            border-left: 1px solid var(--line);
            padding: 22px 0 0 22px;
            margin: 0 0 0 22px
        }

        html[data-lang="ar"] .solution {
            border-right: 0;
            border-left: 1px solid var(--line)
        }

        html[data-lang="ar"] .solution:last-child {
            border-left: 0
        }

        html[data-lang="ar"] .solution .solution-mark {
            right: auto;
            left: -28px;
            transform: scaleX(-1)
        }

        html[data-lang="ar"] .contact-side {
            border-left: 0;
            border-right: 1px solid rgba(255, 255, 255, .7);
            padding: 20px 26px 20px 0
        }

        @media(max-width:1050px) {
            .services {
                grid-template-columns: repeat(3, 1fr)
            }

            .solutions {
                grid-template-columns: 1fr
            }

            /* Four columns at 768px left each stage 146px wide, which wrapped
               every title. Two columns give the 20px title a readable measure
               and let the four stages form a 2x2 block. */
            .process:not(.five) {
                grid-template-columns: repeat(2, 1fr)
            }

            .process:not(.five) .step,
            html[data-lang="ar"] .process:not(.five) .step {
                border-inline-end: 0;
                padding: 22px 0;
                margin-inline-end: 0;
                min-height: 0
            }

            .process:not(.five) .step:nth-child(-n+2) {
                border-bottom: 1px solid var(--line);
                padding-bottom: 22px
            }

            /* Tablets in this range are still touch devices, and the header row
               is 76px tall, so the nav can carry a full-size target without
               crowding the six links: 361px of links in 697px at 761px. */
            .nav>button,
            .nav .nav-link {
                min-height: 44px;
                display: inline-flex;
                align-items: center
            }

            .nav {
                gap: 18px
            }

            .lang button {
                min-width: 36px;
                min-height: 40px
            }
        }

        /* The desktop header row needs about 890px in the longest locale
           (French: 123px logo + 603px of nav links + 128px language switch
           + 40px gutters), so it overflowed a 768px tablet. The logo + MENU
           pill header therefore takes over at tablet-portrait width, and the
           band above it tightens the nav gap and language buttons to keep
           headroom in every locale. */
        @media(max-width:900px) {
            .nav {
                display: flex;
                margin-left: auto
            }

            .nav>button {
                display: none
            }

            .lang {
                margin-left: 0
            }

            .menu {
                display: inline-flex
            }

            .logo svg {
                height: 30px
            }

            /* Touch targets. A 30px logo link and a 31x27 language switch are
               below a reliable finger target; the logo keeps its optical
               position because the header height is fixed. */
            a.logo {
                padding-block: 8px
            }

            .lang {
                padding: 2px
            }

            .lang button {
                min-width: 40px;
                min-height: 40px;
                position: relative
            }

            .lang button:after {
                content: "";
                position: absolute;
                inset: -2px
            }
        }

        @media(max-width:760px) {
            .hero {
                padding: 40px 0 24px;
                min-height: auto
            }

            .hero-grid,
            .contact-grid,
            .statement {
                grid-template-columns: 1fr;
                gap: 28px
            }

            .hero-art {
                height: clamp(210px, 52vw, 300px)
            }

            .mark-hero {
                height: 120px
            }

            /* 51px on every phone width was the desktop headline on a 320px
               screen. The ramp reaches the desktop 48px floor at the
               breakpoint, so there is no jump at 761px. */
            .hero h1 {
                font-size: clamp(34px, 7.6vw, 48px)
            }

            .contact h2 {
                font-size: clamp(34px, 9.5vw, 44px)
            }

            .section-head {
                grid-template-columns: 1fr;
                gap: 14px;
                margin-bottom: 28px
            }

            .services,
            .work-grid,
            .process,
            .solutions,
            .about-grid {
                grid-template-columns: 1fr
            }

            .solution {
                border-right: 0;
                border-bottom: 1px solid var(--line);
                min-height: 0;
                padding-bottom: 132px
            }

            .solution:last-child {
                border-bottom: 0
            }

            .solution h3 {
                max-width: 270px
            }

            .solution p {
                max-width: 370px
            }

            .solution .solution-mark {
                width: 130px;
                height: 130px
            }

            html[data-lang="ar"] .solution {
                border-left: 0
            }

            html[data-lang="ar"] .solution .solution-mark {
                left: -24px
            }

            .about-list {
                border-left: 0;
                padding-left: 0
            }

            .services {
                border-right: 1px solid var(--line)
            }

            /* Five 25px-titled cards cannot stack without either shrinking the
               names or leaving a 190px hole above each one. Read as a list
               instead: number and name share the first line, the description
               and the page link follow, and the whole row is the hit area. */
            .service {
                display: grid;
                grid-template-columns: 2.6rem 1fr;
                column-gap: 2px;
                min-height: 0;
                padding: 22px 0 24px;
                border-right: 0;
                border-bottom: 1px solid var(--line)
            }

            .service:has(.service-link) {
                padding-bottom: 24px
            }

            .service-no {
                grid-area: 1 / 1;
                padding-top: 5px
            }

            .service .line-icon {
                top: 24px;
                right: 0;
                width: 22px;
                height: 22px
            }

            .service h3 {
                grid-area: 1 / 2;
                font-size: 23px;
                margin: 0 0 10px;
                padding-inline-end: 38px
            }

            .service p {
                grid-area: 2 / 2;
                font-size: 15px
            }

            .service-go {
                position: static;
                grid-area: 3 / 2;
                margin-top: 14px
            }

            .process {
                border-top: 1px solid var(--line)
            }

            .step,
            html[data-lang="ar"] .step {
                border-right: 0;
                border-left: 0;
                border-bottom: 1px solid var(--line);
                padding: 20px 0;
                margin: 0;
                min-height: 0
            }

            .step b {
                margin-bottom: 24px
            }

            /* The four homepage stages read as a vertical flow: the number sits
               in its own gutter and a hairline connects one stage to the next.
               The five-step service variant keeps the stacked layout because its
               stages carry deliverable lists that need the full width. */
            .process:not(.five) .step {
                position: relative;
                display: grid;
                grid-template-columns: 2.6rem 1fr;
                column-gap: 2px;
                padding: 22px 0
            }

            .process:not(.five) .step b {
                grid-area: 1 / 1;
                margin-bottom: 0;
                padding-top: 3px
            }

            .process:not(.five) .step h3 {
                grid-area: 1 / 2
            }

            .process:not(.five) .step p {
                grid-area: 2 / 2
            }

            .process:not(.five) .step:before {
                content: "";
                position: absolute;
                inset-inline-start: 6px;
                top: 36px;
                bottom: 0;
                width: 1px;
                background: var(--line)
            }

            .process:not(.five) .step:last-child:before {
                display: none
            }

            .contact-side,
            html[data-lang="ar"] .contact-side {
                border-left: 0;
                border-right: 0;
                border-top: 1px solid rgba(255, 255, 255, .7);
                padding: 20px 0
            }

            .work-grid {
                gap: 12px
            }

            .case {
                min-height: 300px
            }

            .screen {
                height: 190px;
                margin: 18px 0 16px
            }

            /* 15px inputs make iOS Safari zoom the page on focus. */
            .field input,
            .field select,
            .field textarea {
                font-size: 16px;
                padding: 11px 0
            }

            /* One primary action per row: the widest label still fits and the
               tap surface is the full column. */
            .actions {
                flex-direction: column;
                align-items: stretch;
                gap: 6px
            }

            .actions .button {
                min-height: 50px;
                display: flex;
                align-items: center;
                justify-content: center
            }

            .actions .text-button {
                min-height: 50px;
                text-align: center
            }

            .contact .button {
                width: 100%;
                min-height: 50px;
                display: flex;
                align-items: center;
                justify-content: center
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            .button {
                transition: none
            }
        }

        @media(max-width:420px) {
            /* Logo (123px) + language group (126px) + toggle (76px) needs 365px
               of row, which does not fit a 320px screen once the 20px gutters
               are taken. Language switching stays available one tap away inside
               the menu panel, so the header keeps the logo and the toggle. */
            header .lang {
                display: none
            }
        }

        /* ---- link variants of existing controls (service pages) ---- */
        a.button,
        a.text-button,
        a.nav-link {
            text-decoration: none;
            display: inline-block
        }

        a.text-button {
            padding: 13px 0
        }

        .nav .nav-link {
            background: transparent;
            border: 0;
            color: var(--ink);
            cursor: pointer;
            padding: 8px 0;
            font-size: 13px
        }

        .nav .nav-link:hover {
            color: var(--blue)
        }

        .crumb {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .17em;
            text-transform: uppercase;
            color: var(--muted);
            text-decoration: none;
            padding: 8px 0
        }

        .crumb:hover {
            color: var(--blue)
        }