@charset "UTF-8";
/*======================================================================================
SitexPrime — project layer
Author: SitexPrime (https://sitexprime.com)

Written mobile-first: every rule below states the small-screen case, then grows
through min-width breakpoints. Loaded after main.css, so it also carries the
handful of responsive corrections the vendor stylesheet needs at phone widths.

  01. Tokens & type
  02. Mobile-first corrections for the vendor stylesheet
  03. Language switcher
  04. Shared building blocks (buttons, links, leads, quotes)
  05. Page components
  06. Forms
  07. RTL / Arabic
  08. Contact form status & live chat
======================================================================================*/

/*--------------------------------------------------------------
  01. Tokens & type

  "Midnight bloom" (2026-09-22). One near-black plum ground, one soft light
  over it, and nothing else with a hue in it. The names say the ROLE, not the
  colour: --sx-ink used to mean "the dark one" and was doing duty as a heading
  colour, a card background and a border at the same time, which is how a
  palette swap turns into an afternoon of hunting invisible text.
--------------------------------------------------------------*/
:root {
    /* ground, in three steps - the page, a card, the edge of a card */
    --sx-ground: #140711;
    --sx-ground-deep: #0B0309;
    --sx-surface: #1E0F1B;
    --sx-surface-2: #2A1826;

    /* type, in three steps - heading, body, caption */
    --sx-bright: #F7F2F4;
    --sx-text: #B0A2AB;
    --sx-mute: #8E8088;

    /* the light. The bloom is the only colour on the site, so the accent is
       taken straight out of it rather than invented beside it. */
    --sx-rose: #E6AFB8;
    --sx-rose-deep: #B5828C;
    --sx-indigo: #4A4766;
    --sx-glow: 231, 183, 190;

    /* hairlines. A border on this ground is a lightening, never a darkening. */
    --sx-line: rgba(255, 255, 255, .10);
    --sx-line-strong: rgba(255, 255, 255, .18);

    --sx-radius: 20px;
    --sx-radius-sm: 12px;
    --sx-pill: 999px;
    --sx-gap: clamp(1.25rem, 4vw, 2.5rem);
    --sx-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);

    /* one grotesque, everywhere */
    --sx-heading: "Inter Tight", sans-serif;
    --sx-body: "Inter Tight", sans-serif;
    --sx-arabic: "IBM Plex Sans Arabic", "Inter Tight", sans-serif;
}

/* A hard line break that survives the vendor rule hiding <br> under 992px. */
.sx-ln {
    display: block;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*--------------------------------------------------------------
  02. Mobile-first corrections for the vendor stylesheet
  The theme ships desktop-first rules; these keep phones honest.
--------------------------------------------------------------*/
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    font-size: 1rem;
    line-height: 1.65;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* Fluid display sizes: one rule instead of six breakpoint overrides. */
h1,
.hero-title,
.breadcrumb-title {
    font-size: clamp(2.25rem, 8.5vw, 7.5rem);
    line-height: 1.02;
}

h2 {
    font-size: clamp(1.75rem, 5.4vw, 4rem);
    line-height: 1.1;
}

h3 {
    font-size: clamp(1.25rem, 2.6vw, 1.875rem);
}

.section-padding {
    padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

.container {
    padding-inline: 1.25rem;
}

@media (min-width: 576px) {
    .container {
        padding-inline: 1.5rem;
    }
}

/* Anything that scrolls sideways does it inside its own box, never the page. */
.as-team-1-wrap,
.sx-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Tap targets */
a,
button,
.acc-btn,
.lang-current {
    -webkit-tap-highlight-color: transparent;
}

.social-icon a {
    min-width: 34px;
    min-height: 34px;
}

/* The breadcrumb banner is a lot of empty space on a phone. */
.breadcrumb-wrapper .page-heading {
    padding: 150px 0 60px;
}

@media (min-width: 768px) {
    .breadcrumb-wrapper .page-heading {
        padding: 200px 0 100px;
    }
}

@media (min-width: 1200px) {
    .breadcrumb-wrapper .page-heading {
        padding: 230px 0 130px;
    }
}

.breadcrumb-wrapper .page-heading .breadcrumb-list {
    flex-wrap: wrap;
}

.breadcrumb-wrapper .page-heading .breadcrumb-list .sep {
    font-size: 11px;
    color: rgba(247, 242, 244, .45);
}

/* Homepage service rows stack cleanly before the theme's own breakpoints. */
@media (max-width: 991px) {
    .service-wrapper-one {
        flex-direction: column;
    }

    .service-line {
        display: none;
    }
}

.section-cta {
    margin-top: 2rem;
}

/* Award list is a two-column grid the theme only defines for large screens. */
.award-section .award-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .award-section .award-list {
        grid-template-columns: 1fr 1fr;
    }
}

/*--------------------------------------------------------------
  03. Language switcher
--------------------------------------------------------------*/
.lang-switch {
    position: relative;
    z-index: 30;
}

/* The header is always over something dark — a hero, a page banner, or the
   near-black bar it becomes on scroll — so the pill is a light one throughout,
   solid enough to read against any of them. */
.lang-switch .lang-current {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: 0 .9rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #F7F2F4;
    font-family: var(--sx-body);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all .3s ease;
}

.lang-switch .lang-current .arrow {
    font-size: .625rem;
    transition: transform .3s ease;
}

.lang-switch.open .lang-current .arrow {
    transform: rotate(180deg);
}

.lang-switch .lang-current:hover,
.lang-switch.open .lang-current {
    background: var(--sx-rose);
    border-color: var(--sx-rose);
}

.lang-switch .lang-list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .5rem);
    min-width: 160px;
    margin: 0;
    padding: .4rem;
    border-radius: var(--sx-radius-sm);
    background: #140711;
    box-shadow: 0 20px 45px -20px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .3s ease;
}

.lang-switch.open .lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switch .lang-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: var(--sx-bright);
    font-family: var(--sx-body);
    font-size: .875rem;
}

.lang-switch .lang-list a .code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: .15rem .35rem;
    border-radius: 6px;
    background: var(--sx-surface);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.lang-switch .lang-list li.active a,
.lang-switch .lang-list a:hover {
    background: var(--sx-surface);
    color: var(--sx-rose);
}

/* The phone bar is the same dark header, so the pill needs nothing of its own
   there — it only sits a little tighter beside the burger. */
.lang-switch--mobile .lang-current {
    padding: 0 .7rem;
}

/* The theme styles the phone/email panel inside the mobile drawer but then
   hides it, leaving a large empty panel. It is the most useful thing in there. */
.mobile-menu-area .mobile-menu-main .off-contact-area {
    display: block;
}

/* The sticky bar the theme fades in is #21120B — dark like everything else the
   header sits on, so the pill needs no variant there. It had one once, in ink
   on transparent, which made it disappear the moment the bar appeared; and a
   variant that only restated the colours would have overridden the hover and
   open states, which share its specificity and come earlier in this file. */

/*--------------------------------------------------------------
  04. Shared building blocks
--------------------------------------------------------------*/
.sx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 52px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--sx-ground);
    color: #F7F2F4;
    font-family: var(--sx-body);
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    transition: all .35s ease;
}

.sx-btn:hover {
    background: var(--sx-rose);
    color: #F7F2F4;
}

.sx-btn--full {
    width: 100%;
}

.sx-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--sx-bright);
    font-family: var(--sx-body);
    font-weight: 600;
    font-size: .9375rem;
}

.sx-link i {
    transition: transform .35s ease;
}

.sx-link:hover {
    color: var(--sx-rose);
}

.sx-link:hover i {
    transform: translateX(4px);
}

[dir="rtl"] .sx-link:hover i {
    transform: translateX(-4px);
}

.sx-lead {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.7;
    color: var(--sx-text);
    margin-bottom: 1.25rem;
}

.sx-h3 {
    margin: 2.5rem 0 1rem;
    font-family: var(--sx-heading);
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: 500;
    color: var(--sx-bright);
}

.sx-tag {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--sx-surface);
    color: var(--sx-rose);
    font-family: var(--sx-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

a.sx-tag:hover {
    background: var(--sx-rose);
    color: #F7F2F4;
}

.sx-quote {
    position: relative;
    margin: 2rem 0;
    padding: 1.75rem;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
}

.sx-quote img {
    width: 40px;
    margin-bottom: .75rem;
}

.sx-quote p {
    font-family: var(--sx-heading);
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    line-height: 1.45;
    color: var(--sx-bright);
}

.sx-quote cite {
    display: block;
    margin-top: 1rem;
    font-family: var(--sx-body);
    font-size: .875rem;
    font-style: normal;
    color: var(--sx-text);
}

.sx-quote--big {
    margin-top: 3rem;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    background: var(--sx-ground);
}

.sx-quote--big p {
    color: #F7F2F4;
}

.sx-quote--big cite {
    color: rgba(247, 242, 244, .6);
}

.sx-check {
    display: grid;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.sx-check li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: 1rem;
    color: var(--sx-text);
}

.sx-check i {
    flex: 0 0 auto;
    margin-top: .35rem;
    color: var(--sx-rose);
}

@media (min-width: 768px) {
    .sx-check {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }
}

.sx-sticky {
    position: static;
}

@media (min-width: 992px) {
    .sx-sticky {
        position: sticky;
        top: 120px;
    }
}

/*--------------------------------------------------------------
  05. Page components
--------------------------------------------------------------*/
/* --- about: values, process, media --- */
.sx-value,
.sx-step {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
    transition: all .4s ease;
}

.sx-value:hover,
.sx-step:hover {
    border-color: transparent;
    box-shadow: var(--sx-shadow);
    transform: translateY(-4px);
}

.sx-value__num,
.sx-step__num {
    display: inline-block;
    margin-bottom: .85rem;
    font-family: var(--sx-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sx-rose);
    letter-spacing: .08em;
}

.sx-value h3,
.sx-step h3 {
    margin-bottom: .6rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.sx-value p,
.sx-step p {
    font-size: .9375rem;
    color: var(--sx-text);
    margin: 0;
}

.sx-media-grid {
    display: grid;
    gap: 1rem;
    margin-top: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: 1fr;
}

.sx-media-grid img {
    width: 100%;
    border-radius: var(--sx-radius);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
    .sx-media-grid {
        grid-template-columns: 1fr 1.4fr;
    }

    .sx-media-grid img:first-child {
        aspect-ratio: 3 / 4;
    }

    .sx-media-grid img:last-child {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* The about page column is narrower than the homepage one, so the theme's
   flex row wraps badly. Grid keeps the three figures on one line from 480px. */
.sx-counters {
    display: grid;
    gap: 1px;
    margin-top: 2rem;
    background: var(--sx-line);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    overflow: hidden;
    grid-template-columns: 1fr;
}

.sx-counters .counter-items {
    margin: 0;
    padding: 1.25rem;
    background: #140711;
}

.sx-counters .line-1 {
    display: none;
}

@media (min-width: 480px) {
    .sx-counters {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- services --- */
.sx-service {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
    transition: all .4s ease;
}

.sx-service:hover {
    border-color: transparent;
    box-shadow: var(--sx-shadow);
}

.sx-service__media {
    position: relative;
    overflow: hidden;
}

.sx-service__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.23, 1, .32, 1);
}

.sx-service:hover .sx-service__media img {
    transform: scale(1.05);
}

.sx-service__num {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--sx-bright);
    font-family: var(--sx-heading);
    font-size: .875rem;
    font-weight: 600;
}

.sx-service__body {
    padding: 1.5rem;
}

.sx-service__body h3 {
    margin-bottom: .35rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.sx-service__tag {
    margin-bottom: .85rem;
    color: var(--sx-rose);
    font-size: .9375rem;
    font-weight: 500;
}

.sx-service__body > p {
    color: var(--sx-text);
    font-size: .9375rem;
}

.sx-service__list {
    display: grid;
    gap: .4rem .75rem;
    margin: 1.1rem 0 1.4rem;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--sx-line);
    grid-template-columns: 1fr 1fr;
}

.sx-service__list li {
    position: relative;
    padding-inline-start: .95rem;
    font-size: .8125rem;
    color: var(--sx-text);
}

.sx-service__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sx-rose);
}

@media (min-width: 992px) {
    .sx-service__body {
        padding: 2rem;
    }
}

/* --- details pages --- */
.sx-details__thumb {
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: var(--sx-radius);
}

.sx-details__thumb img {
    width: 100%;
    object-fit: cover;
}

.sx-details__thumb--wide img {
    aspect-ratio: 16 / 9;
}

.sx-details__thumb--split {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-block: 2.5rem;
}

@media (min-width: 640px) {
    .sx-details__thumb--split {
        grid-template-columns: 1fr 1fr;
    }
}

.sx-details__thumb--split img {
    border-radius: var(--sx-radius);
    aspect-ratio: 4 / 5;
}

.sx-details__title {
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    line-height: 1.12;
}

.sx-meta {
    display: grid;
    gap: 1.25rem;
    margin-block: 2.5rem;
    padding: 1.5rem;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
    grid-template-columns: 1fr;
}

.sx-meta__item span {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sx-rose);
}

.sx-meta__item strong {
    font-family: var(--sx-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--sx-bright);
}

@media (min-width: 640px) {
    .sx-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .sx-meta {
        grid-template-columns: repeat(4, 1fr);
        padding: 2rem;
    }

    .sx-meta--stack {
        grid-template-columns: 1fr 1fr;
    }
}

.sx-metrics {
    margin-top: 1.5rem;
}

.sx-metric {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    text-align: center;
}

.sx-metric__n {
    display: block;
    font-family: var(--sx-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--sx-rose);
    line-height: 1;
}

.sx-metric p {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--sx-text);
}

.sx-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sx-line);
}

/* --- sidebar --- */
.sx-side {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 992px) {
    .sx-side {
        margin-top: 0;
        position: sticky;
        top: 120px;
    }
}

.sx-side__box {
    padding: 1.5rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
}

.sx-side__box h4,
.sx-side__cta h4 {
    margin-bottom: 1rem;
    font-family: var(--sx-heading);
    font-size: 1.125rem;
    font-weight: 600;
}

.sx-side__list {
    display: grid;
    gap: .2rem;
    margin: 0;
}

.sx-side__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--sx-line);
    color: var(--sx-text);
    font-size: .9375rem;
}

.sx-side__list li:last-child a {
    border-bottom: 0;
}

.sx-side__list a:hover {
    color: var(--sx-rose);
    padding-inline-start: .6rem;
}

.sx-side__cta {
    padding: 1.75rem;
    border-radius: var(--sx-radius);
    background: var(--sx-ground);
    color: #F7F2F4;
}

.sx-side__cta h4 {
    color: #F7F2F4;
}

.sx-side__cta p {
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    color: rgba(247, 242, 244, .7);
}

.sx-side__cta .sx-btn {
    background: var(--sx-rose);
}

.sx-side__cta .sx-btn:hover {
    background: #140711;
    color: var(--sx-bright);
}

.sx-recent {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.sx-recent a {
    display: flex;
    gap: .85rem;
    align-items: center;
}

.sx-recent img {
    flex: 0 0 auto;
    width: 76px;
    height: 62px;
    border-radius: 10px;
    object-fit: cover;
}

.sx-recent span {
    font-family: var(--sx-heading);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sx-bright);
}

.sx-recent em {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--sx-body);
    font-size: .75rem;
    font-style: normal;
    color: var(--sx-rose);
}

.sx-recent a:hover span {
    color: var(--sx-rose);
}

/* --- work & blog cards --- */
.sx-work,
.sx-post {
    height: 100%;
}

.sx-work__thumb,
.sx-post__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--sx-radius);
}

.sx-work__thumb img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1);
}

.sx-post__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1);
}

.sx-work:hover .sx-work__thumb img,
.sx-post:hover .sx-post__thumb img {
    transform: scale(1.06);
}

.sx-work__go {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #140711;
    color: var(--sx-bright);
    opacity: 0;
    transform: translateY(10px);
    transition: all .4s ease;
}

.sx-work:hover .sx-work__go {
    opacity: 1;
    transform: translateY(0);
}

.sx-work__body,
.sx-post__body {
    padding-top: 1.1rem;
}

.sx-work__body h3,
.sx-post__body h3 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}

.sx-work__body h3 a:hover,
.sx-post__body h3 a:hover {
    color: var(--sx-rose);
}

.sx-work__body p {
    margin-top: .3rem;
    font-size: .875rem;
    color: var(--sx-text);
}

.sx-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
    font-size: .8125rem;
    color: var(--sx-text);
}

.sx-post__meta img {
    width: 15px;
    vertical-align: -2px;
}

.sx-post__body p {
    margin: .6rem 0 1rem;
    font-size: .9375rem;
    color: var(--sx-text);
}

.sx-pagination {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 3rem;
}

.sx-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    border: 1px solid var(--sx-line);
    border-radius: 50%;
    font-family: var(--sx-heading);
    font-size: .9375rem;
    color: var(--sx-bright);
}

.sx-pagination a.active,
.sx-pagination a:hover {
    background: var(--sx-rose);
    border-color: var(--sx-rose);
    color: #F7F2F4;
}

/* --- article --- */
.sx-article p {
    margin-bottom: 1.25rem;
    color: var(--sx-text);
}

.sx-article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sx-line);
}

.sx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.sx-share {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    color: var(--sx-text);
}

.sx-legal .sx-h3:first-of-type {
    margin-top: 1rem;
}

.sx-updated {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--sx-surface);
    font-size: .8125rem;
    color: var(--sx-text);
}

/* --- team profile --- */
.sx-profile__thumb {
    overflow: hidden;
    border-radius: var(--sx-radius);
}

.sx-profile__thumb img {
    width: 100%;
    aspect-ratio: 9 / 10;
    object-fit: cover;
}

.sx-profile__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
    font-size: .875rem;
    color: var(--sx-text);
}

.sx-profile__role {
    margin-bottom: 1.5rem;
    color: var(--sx-rose);
    font-weight: 600;
}

.sx-skills {
    display: grid;
    gap: 1.1rem;
}

.sx-skill__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: .45rem;
    font-family: var(--sx-heading);
    font-size: .875rem;
    font-weight: 500;
}

.sx-skill__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--sx-surface);
    overflow: hidden;
}

.sx-skill__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sx-rose-deep), var(--sx-rose));
}

[dir="rtl"] .sx-skill__bar span {
    background: linear-gradient(270deg, var(--sx-rose-deep), var(--sx-rose));
}

.sx-join {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 3rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
}

.sx-join h3 {
    margin-bottom: .4rem;
    font-size: 1.375rem;
    font-weight: 500;
}

.sx-join p {
    margin: 0;
    color: var(--sx-text);
    font-size: .9375rem;
}

.sx-join .sx-btn {
    align-self: flex-start;
}

@media (min-width: 768px) {
    .sx-join {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .sx-join .sx-btn {
        align-self: auto;
        flex: 0 0 auto;
    }
}

/* --- 404 --- */
.sx-404 {
    padding-top: clamp(9rem, 24vw, 14rem);
    padding-bottom: clamp(5rem, 12vw, 9rem);
    text-align: center;
    background-color: var(--sx-ground);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.sx-404__code {
    display: block;
    font-family: var(--sx-heading);
    font-size: clamp(5rem, 22vw, 12rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(100deg, var(--sx-rose), #E6AFB8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sx-404 .content .title {
    color: #F7F2F4;
}

.sx-404 .content p {
    color: rgba(247, 242, 244, .72);
}

.sx-404 .content .theme-btn {
    background: var(--sx-rose);
}

.sx-404 .content .theme-btn:hover {
    background: #140711;
    color: var(--sx-bright);
}

.sx-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem;
}

.sx-404__links a {
    padding: .5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: rgba(247, 242, 244, .8);
    font-size: .875rem;
}

.sx-404__links a:hover {
    background: var(--sx-rose);
    border-color: var(--sx-rose);
    color: #F7F2F4;
}

/*--------------------------------------------------------------
  06. Forms
--------------------------------------------------------------*/
.sx-form {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
}

.sx-form h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.sx-form label {
    display: block;
    margin-bottom: .4rem;
    font-family: var(--sx-body);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sx-bright);
}

.sx-form input,
.sx-form select,
.sx-form textarea {
    width: 100%;
    min-height: 52px;
    padding: .85rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    background: #140711;
    color: var(--sx-bright);
    font-family: var(--sx-body);
    font-size: 1rem;
    transition: border-color .3s ease;
}

.sx-form textarea {
    min-height: 150px;
    resize: vertical;
}

.sx-form input:focus,
.sx-form select:focus,
.sx-form textarea:focus {
    border-color: var(--sx-rose);
    outline: none;
    color: var(--sx-bright);
}

.sx-form input::placeholder,
.sx-form textarea::placeholder {
    color: #A6968C;
}

.sx-consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 400 !important;
    font-size: .875rem !important;
    color: var(--sx-text) !important;
}

.sx-consent input {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px;
    min-height: 18px !important;
    margin: .2rem 0 0;
    padding: 0;
    accent-color: var(--sx-rose);
}

.sx-search {
    position: relative;
}

.sx-search input {
    width: 100%;
    min-height: 52px;
    padding: .8rem 3rem .8rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    color: var(--sx-bright);
    font-size: .9375rem;
}

[dir="rtl"] .sx-search input {
    padding: .8rem 1rem .8rem 3rem;
}

.sx-search button {
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--sx-rose);
    color: #F7F2F4;
}

.sx-contact-info {
    display: grid;
    gap: 1.25rem;
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
}

.sx-contact-info__item span {
    display: block;
    margin-bottom: .2rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sx-rose);
}

.sx-contact-info__item a,
.sx-contact-info__item p {
    font-family: var(--sx-heading);
    font-size: 1rem;
    color: var(--sx-bright);
    margin: 0;
}

.sx-contact-info__item a:hover {
    color: var(--sx-rose);
}

@media (min-width: 576px) {
    .sx-contact-info {
        grid-template-columns: 1fr 1fr;
    }
}

.sx-note {
    font-size: .8125rem;
    color: var(--sx-text);
}

.sx-map-section {
    padding-bottom: clamp(3.5rem, 9vw, 7.5rem);
}

.sx-map {
    position: relative;
    overflow: hidden;
    border-radius: var(--sx-radius);
}

.sx-map img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sx-map__card {
    position: relative;
    margin: -2.5rem 1rem 0;
    padding: 1.5rem;
    border-radius: var(--sx-radius-sm);
    background: #140711;
    box-shadow: var(--sx-shadow);
}

.sx-map__card strong {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--sx-heading);
    font-size: 1.125rem;
}

.sx-map__card p {
    margin-bottom: .75rem;
    font-size: .9375rem;
    color: var(--sx-text);
}

@media (min-width: 768px) {
    .sx-map__card {
        position: absolute;
        inset-block-end: 2rem;
        inset-inline-start: 2rem;
        max-width: 320px;
        margin: 0;
    }

    .sx-map img {
        aspect-ratio: 21 / 9;
    }
}

/*--------------------------------------------------------------
  07. RTL / Arabic
--------------------------------------------------------------*/
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] span,
[dir="rtl"] li,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] label,
[dir="rtl"] cite {
    font-family: var(--sx-arabic);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .breadcrumb-title,
[dir="rtl"] .hero-title,
[dir="rtl"] .sx-quote p,
[dir="rtl"] .sx-recent span,
[dir="rtl"] .sx-meta__item strong,
[dir="rtl"] .sx-contact-info__item a,
[dir="rtl"] .sx-contact-info__item p,
[dir="rtl"] .preloader-text {
    font-family: var(--sx-arabic);
    letter-spacing: 0;
}

/* Arabic runs taller than Latin; give the display sizes room to breathe. */
[dir="rtl"] h1,
[dir="rtl"] .hero-title,
[dir="rtl"] .breadcrumb-title {
    line-height: 1.24;
}

[dir="rtl"] h2 {
    line-height: 1.35;
}

[dir="rtl"] h3 {
    line-height: 1.5;
}

[dir="rtl"] .text-uppercase {
    text-transform: none;
}

/* Numbers, phone numbers and Latin brand names stay left-to-right. */
[dir="rtl"] [dir="ltr"] {
    display: inline-block;
    unicode-bidi: isolate;
}

/* Word-level reveal used instead of the theme's per-character split, which
   breaks Arabic letter joining. */
.sx-word-anim .sx-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.sx-word-anim .sx-wi {
    display: inline-block;
    will-change: transform;
}

/* The distortion canvases mirror with the layout. */
[dir="rtl"] .hero-image-items .text-items .arrow-icon svg {
    transform: scaleX(-1);
}

[dir="rtl"] .theme-btn-main .theme-btn-arrow-left i,
[dir="rtl"] .theme-btn-main .theme-btn-arrow-right i,
[dir="rtl"] .service-btn i,
[dir="rtl"] .sx-btn i,
[dir="rtl"] .sx-link i,
[dir="rtl"] .news-btn i {
    transform: scaleX(-1);
}

[dir="rtl"] .sx-side__list a:hover {
    padding-inline-start: 0;
    padding-inline-end: .6rem;
}

/*--------------------------------------------------------------
  08. Portfolio: case studies, templates, clients
--------------------------------------------------------------*/
.sx-chip {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border: 1px solid var(--sx-line);
    border-radius: 999px;
    font-family: var(--sx-body);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sx-text);
    white-space: nowrap;
}

.sx-chip--accent {
    border-color: transparent;
    background: var(--sx-accent, var(--sx-rose));
    color: #F7F2F4;
}

.sx-chip--live {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.08);
    color: var(--sx-bright);
}

.sx-chip--live::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-inline-end: .45rem;
    border-radius: 50%;
    background: #17b26a;
}

/* --- case studies --- */
.sx-cases__list {
    display: grid;
    gap: clamp(2.5rem, 7vw, 5rem);
}

.sx-case {
    display: grid;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    align-items: center;
    grid-template-columns: 1fr;
}

.sx-case__thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
    box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--sx-accent, #1D0F09) 70%, transparent);
}

.sx-case__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1);
}

.sx-case:hover .sx-case__thumb img {
    transform: scale(1.03);
}

.sx-case__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.sx-case__domain {
    font-family: var(--sx-body);
    font-size: .8125rem;
    color: var(--sx-text);
}

.sx-case__title {
    font-size: clamp(1.375rem, 3.2vw, 2.125rem);
    font-weight: 500;
    line-height: 1.2;
}

.sx-case__title a:hover {
    color: var(--sx-accent, var(--sx-rose));
}

.sx-case__tagline {
    margin: .6rem 0 1rem;
    font-family: var(--sx-heading);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--sx-accent, var(--sx-rose));
}

.sx-case__body > p {
    color: var(--sx-text);
}

.sx-case__stack {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1.25rem;
}

.sx-case__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}

.sx-case__actions .sx-btn {
    background: var(--sx-accent, var(--sx-ground));
}

.sx-case__actions .sx-btn:hover {
    background: var(--sx-ground);
}

@media (min-width: 992px) {
    .sx-case {
        grid-template-columns: 1.15fr 1fr;
    }

    .sx-case--flip .sx-case__thumb {
        order: 2;
    }
}

.sx-check--single {
    grid-template-columns: 1fr;
}

.sx-meta--single {
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .sx-meta--single {
        grid-template-columns: 1fr;
    }
}

/* --- template cards --- */
.sx-tpl {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
    transition: all .4s ease;
}

.sx-tpl:hover {
    border-color: transparent;
    box-shadow: var(--sx-shadow);
    transform: translateY(-4px);
}

.sx-tpl__thumb {
    display: block;
    overflow: hidden;
    background: var(--sx-surface);
}

.sx-tpl__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9.55;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.23, 1, .32, 1);
}

.sx-tpl:hover .sx-tpl__thumb img {
    transform: scale(1.04);
}

.sx-tpl__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.4rem;
}

.sx-tpl__body h3 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
}

.sx-tpl__body h3 a:hover {
    color: var(--sx-rose);
}

.sx-tpl__body > p {
    margin: .6rem 0 1rem;
    font-size: .875rem;
    color: var(--sx-text);
}

.sx-tpl__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sx-tpl__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-top: auto;
    padding-top: 1.1rem;
}

.sx-tpl__actions .sx-link {
    font-size: .875rem;
}

.sx-link--muted {
    color: var(--sx-text);
    font-weight: 500;
}

/* --- sector filter --- */
.sx-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.5rem;
}

.sx-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1px solid var(--sx-line);
    border-radius: 999px;
    background: transparent;
    color: var(--sx-bright);
    font-family: var(--sx-body);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease;
}

.sx-filter__n {
    font-size: .6875rem;
    color: var(--sx-text);
}

.sx-filter__btn:hover {
    border-color: var(--sx-rose);
    color: var(--sx-rose);
}

.sx-filter__btn.active {
    background: var(--sx-ground);
    border-color: var(--sx-line);
    color: #F7F2F4;
}

.sx-filter__btn.active .sx-filter__n {
    color: rgba(247, 242, 244, .6);
}

.sx-filter__empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--sx-text);
}

.sx-tpl-cell.is-hidden {
    display: none;
}

.sx-related {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid var(--sx-line);
}

/* --- client wall --- */
.sx-clients-section {
    background: var(--sx-ground);
}

.sx-clients-section .section-title h2,
.sx-clients-section .sx-details__title,
.sx-clients-section h2 {
    color: #F7F2F4;
}

.sx-clients-section .sx-lead,
.sx-clients-section .sx-note {
    color: rgba(247, 242, 244, .62);
}

.sx-clients-section .sx-link {
    color: #F7F2F4;
}

.sx-clients-section .sx-link:hover {
    color: var(--sx-rose);
}

.sx-logo-wall {
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--sx-radius);
    overflow: hidden;
    grid-template-columns: repeat(2, 1fr);
}

.sx-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 108px;
    padding: 1.25rem;
    background: var(--sx-ground);
    transition: background .35s ease;
}

.sx-logo img {
    width: auto;
    max-width: 100%;
    max-height: 62px;
    opacity: .82;
    transition: opacity .35s ease, transform .35s ease;
}

a.sx-logo:hover {
    background: #1E0F1B;
}

a.sx-logo:hover img {
    opacity: 1;
    transform: scale(1.04);
}

@media (min-width: 576px) {
    .sx-logo-wall {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .sx-logo-wall {
        grid-template-columns: repeat(4, 1fr);
    }

    .sx-logo {
        min-height: 132px;
    }

    .sx-logo img {
        max-height: 64px;
    }
}

/* The clients section on a light page keeps the dark wall as its own band. */
.sx-clients-section + .sx-cases,
.sx-clients-section + .section-padding {
    padding-top: clamp(3.5rem, 9vw, 7.5rem);
}

/* Home: a proof band under the hero, not a section of its own. Heading and
   link share a row and the padding comes right down, so the services section
   is still within reach of the first scroll. */
.sx-clients-section--strip {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.sx-clients-strip__head {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.sx-clients-strip__head .section-title {
    margin-bottom: 0;
}

.sx-clients-strip__head h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.25rem);
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .sx-clients-strip__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }

    .sx-clients-strip__head .sx-link {
        flex: none;
        padding-bottom: .35rem;
    }
}

/*--------------------------------------------------------------
  09. Pricing
--------------------------------------------------------------*/
.sx-lead--center {
    max-width: 68ch;
    margin-inline: auto;
}

.sx-filter--center {
    justify-content: center;
    margin-bottom: 2.5rem;
}

.sx-plans {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}

/* The number of columns comes from the number of plans, which the generator
   writes onto the panel as --sx-cols-lg and --sx-cols-xl. Four plans are four
   across on a wide screen rather than three with a lonely fourth beneath, and
   two-by-two on a laptop, where four would be too narrow to read. The
   fallbacks are what a panel without the variables gets. */
@media (min-width: 700px) {
    .sx-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1050px) {
    .sx-plans {
        grid-template-columns: repeat(var(--sx-cols-lg, 3), 1fr);
    }
}

@media (min-width: 1300px) {
    .sx-plans {
        grid-template-columns: repeat(var(--sx-cols-xl, 3), 1fr);
    }
}

.sx-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.sx-plan:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--sx-shadow);
}

/* The chosen plan carries the brand, so the eye lands on it first. */
.sx-plan--featured {
    border-color: transparent;
    background: var(--sx-ground);
    color: #F7F2F4;
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8);
}

.sx-plan__flag {
    position: absolute;
    inset-block-start: -.75rem;
    inset-inline-start: 1.5rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--sx-rose);
    color: #F7F2F4;
    font-family: var(--sx-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sx-plan__name {
    font-size: 1.375rem;
    font-weight: 500;
}

.sx-plan--featured .sx-plan__name {
    color: #F7F2F4;
}

.sx-plan__summary {
    margin: .4rem 0 1.25rem;
    font-size: .9375rem;
    color: var(--sx-text);
}

.sx-plan--featured .sx-plan__summary {
    color: rgba(247, 242, 244, .7);
}

.sx-plan__price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

/* Five cards to a row leaves each one narrow: a long price like "From 2,000"
   would wrap while its neighbours sit on a single line. Only where the row is
   actually that crowded — the panel says so — and only once the row has
   formed, which is the same width the fifth column appears at. */
@media (min-width: 1300px) {
    .sx-plans[data-tight] .sx-plan__amount { font-size: 2.1rem; }
    .sx-plans[data-tight] .sx-plan__price { white-space: nowrap; }
}

.sx-plan__amount {
    font-family: var(--sx-heading);
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

.sx-plan--featured .sx-plan__amount {
    color: var(--sx-rose);
}

.sx-plan__cur {
    font-family: var(--sx-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sx-text);
}

.sx-plan--featured .sx-plan__cur {
    color: rgba(247, 242, 244, .6);
}

.sx-plan__period {
    margin-top: .35rem;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sx-text);
}

.sx-plan--featured .sx-plan__period {
    color: rgba(247, 242, 244, .55);
}

.sx-plan__list {
    display: grid;
    gap: .6rem;
    margin: 1.4rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sx-line);
}

.sx-plan--featured .sx-plan__list {
    border-top-color: rgba(255, 255, 255, 0.10);
}

.sx-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9375rem;
    color: var(--sx-text);
}

.sx-plan--featured .sx-plan__list li {
    color: rgba(247, 242, 244, .8);
}

.sx-plan__list i {
    flex: 0 0 auto;
    margin-top: .3rem;
    color: var(--sx-rose);
}

.sx-plan .sx-btn {
    margin-top: auto;
}

.sx-plan--featured .sx-btn {
    background: var(--sx-rose);
}

.sx-plan--featured .sx-btn:hover {
    background: #140711;
    color: var(--sx-bright);
}

.sx-pricing .sx-note {
    max-width: 64ch;
    margin: 2rem auto 0;
}

/*--------------------------------------------------------------
  10. Brand film
--------------------------------------------------------------*/
.sx-film {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.sx-film video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sx-radius);
    background: #0B0309;
    box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .85);
}

.sx-film__cap {
    margin-top: .9rem;
    text-align: center;
    font-size: .8125rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(247, 242, 244, .55);
}

/* The magnific wrapper is transparent by default; give the film room to
   breathe and keep the close button clear of the video. */
.sx-film-mfp .mfp-content {
    padding: 0 1rem;
}

.sx-film-mfp .mfp-close {
    top: -46px;
    right: 0;
    color: #F7F2F4;
    opacity: .85;
}

[dir="rtl"] .sx-film-mfp .mfp-close {
    right: auto;
    left: 0;
}

/* Fallback overlay when magnific is unavailable. */
.sx-film.is-open {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 1.5rem;
    background: rgba(11, 3, 9, .92);
}

.sx-film.is-open video {
    max-width: 1120px;
}

/*--------------------------------------------------------------
  Footer credit
--------------------------------------------------------------*/
.footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom .container {
        justify-content: space-between;
        text-align: start;
    }
}

.footer-bottom .credit a {
    color: inherit;
    opacity: .75;
}

.footer-bottom .credit a:hover {
    color: var(--sx-rose);
    opacity: 1;
}

/*--------------------------------------------------------------
  08. Contact form status + live chat
  Written with logical properties throughout, so the widget mirrors
  itself on the Arabic pages without a second stylesheet.
--------------------------------------------------------------*/
.sx-trap {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sx-form__status {
    margin: .9rem 0 0;
    min-height: 1.2em;
    font-size: .9rem;
    line-height: 1.5;
}

.sx-form__status.is-wait { color: var(--sx-text); }
.sx-form__status.is-ok   { color: #8FD6AF; font-weight: 600; }
.sx-form__status.is-err  { color: #F2A9A2; font-weight: 600; }

.sx-form button[disabled] { opacity: .65; cursor: progress; }

/* --- the launcher --- */
.sx-chat {
    position: fixed;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    inset-inline-end: 1rem;
    /* the theme's header sits at 99999 and its mobile drawer at 999999; on a
       phone the panel covers the whole screen, so it has to clear both */
    z-index: 1000000;
    font-family: var(--sx-body);
}

[dir="rtl"] .sx-chat { font-family: var(--sx-arabic); }

.sx-chat__launch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--sx-ground);
    color: #F7F2F4;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6);
    transition: transform .25s ease, background .25s ease;
}

.sx-chat__launch:hover { background: var(--sx-rose); transform: translateY(-2px); }
.sx-chat__launch:focus-visible { outline: 2px solid var(--sx-rose); outline-offset: 3px; }
.sx-chat__ic { width: 22px; height: 22px; flex: none; }
.sx-chat__launch-text { display: none; }

.sx-chat__badge {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sx-rose);
    color: #F7F2F4;
    font-size: .72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.sx-chat__launch.has-news { animation: sx-chat-nudge 1.6s ease-in-out 3; }

@keyframes sx-chat-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .sx-chat__launch, .sx-chat__panel { transition: none; animation: none; }
}

/* --- the panel --- */
.sx-chat__panel {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #140711;
    border: 1px solid var(--sx-line);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
    overflow: hidden;
}

.sx-chat__panel[hidden] { display: none; }
.sx-chat.is-open .sx-chat__launch { display: none; }

.sx-chat__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    background: var(--sx-ground);
    color: #F7F2F4;
}

.sx-chat__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--sx-rose);
    font-family: var(--sx-heading);
    font-weight: 600;
}

.sx-chat__heading { display: flex; flex-direction: column; min-width: 0; padding-inline-end: .5rem; }
.sx-chat__heading strong { font-family: var(--sx-heading); font-size: .98rem; font-weight: 600; }
.sx-chat__heading small {
    font-size: .78rem;
    line-height: 1.4;
    color: rgba(247, 242, 244, .66);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sx-chat__close {
    margin-inline-start: auto;
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #F7F2F4;
    cursor: pointer;
}

.sx-chat__close:hover { background: rgba(255, 255, 255, 0.14); }
.sx-chat__close svg { width: 18px; height: 18px; }

/* --- the name step --- */
.sx-chat__intro { padding: 1.35rem 1.1rem; }
.sx-chat__intro label { display: block; margin-bottom: .5rem; font-size: .85rem; font-weight: 600; }

.sx-chat__intro input {
    width: 100%;
    min-height: 50px;
    margin-bottom: .9rem;
    padding: .8rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    font: inherit;
    font-size: 1rem;
}

.sx-chat__intro input:focus { outline: none; border-color: var(--sx-rose); }
.sx-chat__privacy { margin: .9rem 0 0; font-size: .78rem; color: var(--sx-text); }

.sx-chat__status { margin: .75rem 0 0; font-size: .82rem; line-height: 1.5; }
.sx-chat__status:empty { margin: 0; }
.sx-chat__status.is-err { color: #F2A9A2; font-weight: 600; }

/* --- the conversation --- */
.sx-chat__log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem;
    background: var(--sx-surface);
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.sx-chat__msg {
    max-width: 85%;
    padding: .65rem .85rem;
    border-radius: 14px;
    background: #140711;
    border: 1px solid var(--sx-line);
    align-self: flex-start;
    border-start-start-radius: 4px;
}

.sx-chat__msg.is-mine {
    align-self: flex-end;
    background: var(--sx-ground);
    border-color: var(--sx-line);
    color: #F7F2F4;
    border-start-start-radius: 14px;
    border-start-end-radius: 4px;
}

.sx-chat__who {
    display: block;
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sx-rose-deep);
}

.sx-chat__msg.is-mine .sx-chat__who { color: rgba(247, 242, 244, .6); }
.sx-chat__msg p { margin: 0; font-size: .93rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.sx-chat__notice {
    margin: 0;
    padding: .5rem .7rem;
    border-radius: 10px;
    background: rgba(242, 169, 162, 0.10);
    color: #F2A9A2;
    font-size: .82rem;
    text-align: center;
}

.sx-chat__note {
    margin: 0;
    padding: .6rem 1.1rem;
    background: var(--sx-surface);
    border-block-start: 1px solid var(--sx-line);
    font-size: .75rem;
    color: var(--sx-text);
}

/* --- the composer --- */
.sx-chat__composer {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .7rem;
    border-block-start: 1px solid var(--sx-line);
    background: #140711;
}

.sx-chat__composer textarea {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 120px;
    padding: .65rem .8rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    font: inherit;
    font-size: .95rem;
    line-height: 1.5;
    resize: none;
}

.sx-chat__composer textarea:focus { outline: none; border-color: var(--sx-rose); }

.sx-chat__send {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--sx-rose);
    color: #F7F2F4;
    cursor: pointer;
    transition: background .25s ease;
}

.sx-chat__send:hover { background: var(--sx-ground); }
.sx-chat__send svg { width: 20px; height: 20px; }
/* the paper plane points the way the language reads */
[dir="rtl"] .sx-chat__send svg { transform: scaleX(-1); }

/* From tablet up the panel stops being a full screen and sits in the corner. */
@media (min-width: 576px) {
    .sx-chat__launch-text { display: inline; }

    .sx-chat__panel {
        inset: auto;
        inset-block-end: 0;
        inset-inline-end: 0;
        width: min(24rem, calc(100vw - 2rem));
        height: min(32rem, calc(100vh - 6rem));
        border-radius: var(--sx-radius);
    }
}

/*--------------------------------------------------------------
  09. Account, checkout and project pages
  The PHP pages wear the site's chrome; everything inside it is
  described here, mobile-first and in logical properties.
--------------------------------------------------------------*/
/* the chrome puts a banner above this, so the page starts normally */
.sx-app {
    padding-block-start: clamp(2.5rem, 7vw, 5rem);
}

.sx-app__head {
    max-inline-size: 52rem;
    margin-inline: auto;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.sx-app__head h1 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    margin-bottom: .5rem;
}

.sx-narrow {
    max-width: 34rem;
    margin-inline: auto;
}

.sx-account {
    max-width: 52rem;
    margin-inline: auto;
}

.sx-account__bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.sx-account__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: baseline;
}

.sx-panel {
    padding: clamp(1.25rem, 4vw, 2rem);
    margin-bottom: 1.25rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
}

.sx-panel h2 {
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    margin-bottom: .5rem;
}

.sx-panel--quiet {
    background: var(--sx-surface);
    border-style: dashed;
}

/* the sign-in panel puts a button and a link side by side */
.sx-panel--quiet .sx-btn {
    margin-inline-end: 1.25rem;
}

.sx-flash {
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--sx-radius-sm);
    background: rgba(143, 214, 175, 0.10);
    color: #8FD6AF;
    font-weight: 600;
}

.sx-flash.is-err {
    background: rgba(242, 169, 162, 0.10);
    color: #F2A9A2;
}

/* --- the three steps --- */
.sx-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.sx-steps li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--sx-line);
}

.sx-steps li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.sx-steps__dot {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: none;
    margin-block-start: .25rem;
    border-radius: 50%;
    border: 2px solid var(--sx-line);
    background: #140711;
}

.sx-steps li.is-done .sx-steps__dot {
    border-color: rgba(255, 255, 255, 0.10);
    background: #8FD6AF;
}

.sx-steps li.is-now .sx-steps__dot {
    border-color: var(--sx-rose);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .18);
}

.sx-steps strong { display: block; }
.sx-steps small { display: block; color: var(--sx-text); font-size: .85rem; }
.sx-steps em {
    display: inline-block;
    margin-block-start: .35rem;
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sx-rose-deep);
}

.sx-steps li.is-done em { color: #8FD6AF; }
.sx-steps li.is-now em { color: var(--sx-rose); }
.sx-steps li.is-todo { opacity: .6; }

/* the compact version on the list of projects */
.sx-steps--mini {
    display: flex;
    gap: .5rem;
    margin-block: 1rem;
}

.sx-steps--mini li {
    flex: 1 1 0;
    display: block;
    padding: .45rem 0 0;
    border-bottom: 0;
    border-top: 3px solid var(--sx-line);
    font-size: .78rem;
    color: var(--sx-text);
}

.sx-steps--mini li.is-done { border-top-color: rgba(255, 255, 255, 0.10); }
.sx-steps--mini li.is-now { border-top-color: var(--sx-rose); color: var(--sx-bright); font-weight: 600; }

/* --- project cards --- */
.sx-order-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.sx-order-card__head h2 { margin-bottom: .2rem; }
.sx-order-card__money { text-align: end; }
.sx-order-card__money strong { display: block; font-family: var(--sx-heading); }
.sx-order-card__money span { font-size: .8rem; }

.sx-order-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.sx-tag {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--sx-surface);
    font-size: .8rem;
    font-weight: 600;
}

.sx-tag--ok { background: rgba(143, 214, 175, 0.10); color: #8FD6AF; }
.sx-tag--due { background: rgba(232, 196, 138, 0.10); color: #E8C48A; }

/* --- money --- */
.sx-facts { margin: 0; display: grid; gap: .6rem; }
.sx-facts div {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--sx-line);
}
.sx-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-facts dt { color: var(--sx-text); font-size: .875rem; }
.sx-facts dd { margin: 0; font-weight: 600; text-align: end; }

.sx-pay-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.sx-pay-list li {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .9rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
}

/* --- the two ways to pay --- */
.sx-choices { border: 0; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
.sx-choices legend { padding: 0; margin-bottom: .5rem; font-weight: 600; }

.sx-choice {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}

.sx-choice.is-on { border-color: var(--sx-rose); background: #1E0F1B; }
.sx-choice input { margin-block-start: .3rem; flex: none; }
.sx-choice__body { display: grid; gap: .25rem; }
.sx-choice__body b { font-family: var(--sx-heading); font-size: 1.05rem; }
.sx-choice__body small { color: var(--sx-text); font-size: .875rem; }

/* what each way of paying actually costs, and when — one instalment to a
   line, so an amount is never split from the words that date it */
.sx-choice__sum {
    display: grid;
    gap: .15rem;
    margin-top: .45rem;
    font-family: var(--sx-heading);
    font-size: .98rem;
}

.sx-choice__sum > span { white-space: nowrap; }

.sx-choice__sum i {
    font-style: normal;
    font-family: var(--sx-body);
    font-size: .78rem;
    font-weight: 500;
    color: var(--sx-text);
}

.sx-choice.is-on .sx-choice__sum { color: var(--sx-rose); }
.sx-choice.is-on .sx-choice__sum i { color: var(--sx-text); }

/* --- messages on a project --- */
.sx-thread {
    max-height: 22rem;
    overflow-y: auto;
    display: grid;
    gap: .7rem;
    padding: 1rem;
    margin-bottom: .9rem;
    border-radius: var(--sx-radius-sm);
    background: var(--sx-surface);
}

.sx-msg {
    max-width: 85%;
    justify-self: start;
    padding: .6rem .85rem;
    border-radius: 14px;
    border: 1px solid var(--sx-line);
    background: #140711;
}

.sx-msg.is-mine { justify-self: end; background: var(--sx-ground); border-color: var(--sx-line); color: #F7F2F4; }
.sx-msg__who {
    display: block;
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sx-rose-deep);
}
.sx-msg.is-mine .sx-msg__who { color: rgba(247, 242, 244, .65); }
.sx-msg p { margin: 0; font-size: .93rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-msg__error { margin: 0; color: #F2A9A2; font-size: .85rem; text-align: center; }

.sx-thread__form { display: grid; gap: .6rem; }
.sx-thread__form textarea {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    font: inherit;
    resize: vertical;
}
.sx-thread__form textarea:focus { outline: none; border-color: var(--sx-rose); }
.sx-thread__form .sx-btn { justify-self: start; }

/*--------------------------------------------------------------
  What we do — a list, not a carousel
--------------------------------------------------------------*/
.sx-what {
    display: grid;
    gap: 1.75rem 2.5rem;
}

@media (min-width: 700px) {
    .sx-what { grid-template-columns: 1fr 1fr; }
}

.sx-what__item {
    padding-block: .9rem;
    border-top: 1px solid var(--sx-line);
}

.sx-what__item h3 {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.25;
}

.sx-what__item h3 a {
    display: block;
    color: var(--sx-bright);
    transition: color .2s ease;
}

.sx-what__item h3 a:hover { color: var(--sx-rose); }

/* the moment the build starts, and the invitation to speak up during it */
.sx-building {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    margin: 1.4rem 0 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-surface);
}

.sx-building span { flex: 1 1 18rem; font-size: .92rem; color: var(--sx-text); }
.sx-building .sx-btn { flex: none; }

/* --- who is there, and whether it makes a sound --- */
.sx-thread__bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

/* a dot that fills in when the other person is actually at the keyboard */
.sx-presence {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sx-text);
}

.sx-presence::before {
    content: "";
    inline-size: .5rem;
    block-size: .5rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
}

.sx-presence.is-on { color: #8FD6AF; }
.sx-presence.is-on::before {
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .45);
    animation: sx-pulse 2.4s ease-out infinite;
}

@keyframes sx-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, .45); }
    70%  { box-shadow: 0 0 0 .42rem rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.sx-mute {
    display: inline-flex;
    padding: .35rem;
    border: 1px solid var(--sx-line);
    border-radius: 50%;
    background: #140711;
    color: var(--sx-text);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.sx-mute:hover { color: var(--sx-bright); border-color: var(--sx-line); }
.sx-mute svg { inline-size: 1.1rem; block-size: 1.1rem; }
.sx-mute .sx-mute__cross { opacity: 0; }
.sx-mute.is-off .sx-mute__wave { opacity: 0; }
.sx-mute.is-off .sx-mute__cross { opacity: 1; }

/* --- the other person is mid-sentence --- */
.sx-typing {
    display: flex;
    align-items: center;
    gap: .55rem;
    justify-self: start;
    padding: .5rem .8rem;
    border-radius: 14px;
    border: 1px solid var(--sx-line);
    background: #140711;
}

.sx-typing[hidden] { display: none; }

.sx-typing__dots { display: inline-flex; gap: .22rem; }

.sx-typing__dots i {
    inline-size: .38rem;
    block-size: .38rem;
    border-radius: 50%;
    background: var(--sx-rose);
    animation: sx-typing 1.25s ease-in-out infinite;
}

.sx-typing__dots i:nth-child(2) { animation-delay: .18s; }
.sx-typing__dots i:nth-child(3) { animation-delay: .36s; }

.sx-typing__who {
    font-size: .78rem;
    font-weight: 600;
    color: var(--sx-text);
}

@keyframes sx-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30%           { transform: translateY(-.28rem); opacity: 1; }
}

/* Somebody who asked for less movement gets the words without the bouncing. */
@media (prefers-reduced-motion: reduce) {
    .sx-typing__dots i,
    .sx-presence.is-on::before { animation: none; }
    .sx-typing__dots i { opacity: .7; }
}

/* --- history --- */
.sx-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sx-history li {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--sx-line);
    font-size: .88rem;
}
.sx-history li:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-history time { color: var(--sx-text); font-size: .8rem; min-inline-size: 9rem; }

#sx-paypal.is-busy { opacity: .5; pointer-events: none; }

@media (min-width: 768px) {
    .sx-choices { grid-template-columns: 1fr 1fr; }
    .sx-choices legend { grid-column: 1 / -1; }
}

/* --- sign in with Google --- */
.sx-google {
    margin-bottom: 1.5rem;
    display: grid;
    justify-items: center;
    gap: .5rem;
}

.sx-google__status { margin: 0; font-size: .85rem; text-align: center; }
.sx-google__status.is-err { color: #F2A9A2; font-weight: 600; }

/* a rule with the word "or" sitting in it */
.sx-or {
    width: 100%;
    margin: .5rem 0 1.5rem;
    text-align: center;
    line-height: 1;
    border-top: 1px solid var(--sx-line);
}

.sx-or span {
    display: inline-block;
    transform: translateY(-50%);
    padding-inline: .9rem;
    background: #140711;
    color: var(--sx-text);
    font-size: .8rem;
}

/* The steps shown before paying: numbered, none of them started yet. */
.sx-steps--preview li { opacity: 1; }
.sx-steps--preview + .sx-note { margin-block-start: 1.25rem; }

.sx-steps--preview .sx-steps__dot {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-block-start: 0;
    border-color: var(--sx-rose);
    color: var(--sx-rose);
    font-family: var(--sx-heading);
    font-size: .85rem;
    font-weight: 600;
}

/*--------------------------------------------------------------
  10. The stepper, the checkout and the sign-in card
--------------------------------------------------------------*/
/* --- the journey, across --- */
.sx-stepper {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0 0 .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    counter-reset: step;
}

.sx-stepper::-webkit-scrollbar { display: none; }

.sx-stepper li {
    position: relative;
    flex: 1 0 7.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding-inline: .35rem;
    text-align: center;
}

/* the line joining one mark to the next, drawn behind them */
.sx-stepper li::before,
.sx-stepper li::after {
    content: "";
    position: absolute;
    inset-block-start: 1.1rem;
    block-size: 2px;
    background: var(--sx-line);
    inline-size: 50%;
}

.sx-stepper li::before { inset-inline-start: 0; }
.sx-stepper li::after { inset-inline-end: 0; }
.sx-stepper li:first-child::before,
.sx-stepper li:last-child::after { content: none; }

.sx-stepper li.is-done::before,
.sx-stepper li.is-done::after,
.sx-stepper li.is-now::before { background: var(--sx-rose); }

.sx-stepper__mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--sx-line);
    background: #140711;
    font-family: var(--sx-heading);
    font-size: .9rem;
    font-weight: 600;
    color: var(--sx-rose-deep);
    transition: transform .3s ease;
}

.sx-stepper__mark svg { inline-size: 1rem; block-size: 1rem; }

.sx-stepper li.is-done .sx-stepper__mark {
    border-color: var(--sx-rose);
    background: var(--sx-rose);
    color: #F7F2F4;
}

.sx-stepper li.is-now .sx-stepper__mark {
    border-color: var(--sx-rose);
    background: var(--sx-ground);
    color: #F7F2F4;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .18);
    transform: scale(1.08);
}

.sx-stepper__label {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sx-text);
}

.sx-stepper li.is-now .sx-stepper__label { color: var(--sx-bright); }
.sx-stepper li.is-todo .sx-stepper__label { font-weight: 500; }

.sx-stepper__note {
    display: none;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--sx-text);
}

.sx-stepper--compact li { flex-basis: 5.5rem; }
.sx-stepper--compact .sx-stepper__mark { inline-size: 1.6rem; block-size: 1.6rem; font-size: .75rem; }
.sx-stepper--compact li::before,
.sx-stepper--compact li::after { inset-block-start: .8rem; }
.sx-stepper--compact .sx-stepper__label { font-size: .72rem; }

@media (min-width: 768px) {
    .sx-stepper__note { display: block; }
    .sx-stepper li { flex-basis: 0; }
}

/* --- the checkout --- */
.sx-checkout { max-width: 62rem; margin-inline: auto; }

.sx-checkout__journey {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    margin-bottom: 1.5rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
}

.sx-checkout__step {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin: 0 0 1.1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sx-rose-deep);
}

.sx-checkout__cols { display: grid; gap: 1.5rem; align-items: start; }
.sx-checkout__aside { order: -1; }        /* the money first on a phone */
.sx-checkout__after { margin-top: .8rem; text-align: center; }

.sx-summary {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
}

.sx-summary h2 { font-size: 1rem; margin-bottom: .35rem; }
.sx-summary__plan {
    margin: 0 0 1rem;
    font-family: var(--sx-heading);
    font-size: 1.35rem;
    color: var(--sx-bright);
}

.sx-trust {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: .55rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--sx-text);
}

.sx-trust li { display: flex; gap: .5rem; }

.sx-trust li::before {
    content: "";
    inline-size: 1rem;
    block-size: 1rem;
    flex: none;
    margin-block-start: .18rem;
    border-radius: 50%;
    background: var(--sx-rose);
    /* a tick, drawn as a mask so it takes the accent colour */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

/* --- the way out that is not a card payment --- */
.sx-alt {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sx-line);
}

.sx-alt h3 { font-size: 1rem; margin-bottom: .75rem; }

.sx-alt__link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease;
}

.sx-alt__link:hover { border-color: var(--sx-rose); background: #1E0F1B; }
.sx-alt__link svg { inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--sx-rose); }
.sx-alt__link span { display: grid; gap: .1rem; }
.sx-alt__link strong { font-size: .95rem; }
.sx-alt__link small { font-size: .8rem; color: var(--sx-text); }
.sx-alt__link i { margin-inline-start: auto; color: var(--sx-rose-deep); }

@media (min-width: 900px) {
    .sx-checkout__cols { grid-template-columns: 1fr 21rem; gap: 2rem; }
    .sx-checkout__aside { order: 0; position: sticky; top: 7rem; }
}

/* --- the sign-in card --- */
.sx-auth { max-width: 27rem; margin-inline: auto; }

.sx-auth__card {
    padding: clamp(1.5rem, 5vw, 2.25rem);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
    box-shadow: var(--sx-shadow);
}

.sx-auth__lead { margin: 0 0 1.5rem; color: var(--sx-text); font-size: .95rem; }
.sx-auth__form { display: grid; gap: 1.1rem; }
.sx-auth__swap { margin: 1.25rem 0 0; font-size: .9rem; text-align: center; }

.sx-field label {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .4rem;
    font-size: .85rem;
    font-weight: 600;
}

.sx-field__aside { font-size: .8rem; font-weight: 500; color: var(--sx-rose); }

/* The theme paints every input's text white for its dark forms; ours sit on
   white cards, so the colour has to be said again here or the value is
   invisible. */
.sx-field input,
.sx-field select,
.sx-field textarea {
    width: 100%;
    min-height: 52px;
    padding: .8rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    background: #140711;
    color: var(--sx-bright);
    font: inherit;
    font-size: 1rem;
}

.sx-field select {
    appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C4A40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.05rem;
}

[dir="rtl"] .sx-field select { background-position: left 1rem center; }

.sx-field input:focus,
.sx-field select:focus,
.sx-field textarea:focus {
    outline: none;
    color: var(--sx-bright);
    border-color: var(--sx-rose);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .16);
}

.sx-field input::placeholder,
.sx-field textarea::placeholder { color: #A6968C; }

.sx-field small { display: block; margin-top: .35rem; font-size: .78rem; color: var(--sx-text); }
.sx-trust--auth { margin-top: 1.5rem; }
.sx-trust + .sx-note { margin-block-start: 1rem; }

/* --- the terms, stated rather than chosen --- */
.sx-terms h2 { font-size: 1.15rem; margin-bottom: .75rem; }

.sx-terms__card {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--sx-rose);
    border-radius: var(--sx-radius);
    background: #1E0F1B;
}

.sx-terms__card strong { display: block; font-family: var(--sx-heading); font-size: 1.05rem; }
.sx-terms__card p { margin: .3rem 0 0; font-size: .9rem; }

.sx-terms__split {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
    counter-reset: instalment;
}

.sx-terms__split li {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding: .6rem .8rem;
    border-radius: var(--sx-radius-sm);
    background: #140711;
    border: 1px solid var(--sx-line);
    font-size: .9rem;
}

.sx-terms__split b,
.sx-terms__one b { font-family: var(--sx-heading); font-size: 1rem; }
.sx-terms__one { margin: 1rem 0 0; font-size: 1.35rem; }
.sx-terms__one b { font-size: 1.35rem; }

/* how a plan is paid for, under its price */
.sx-plan__terms {
    margin: -.25rem 0 1rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--sx-rose-deep);
}

.sx-plan--featured .sx-plan__terms { color: rgba(247, 242, 244, .66); }

/*--------------------------------------------------------------
  11. The client dashboard
--------------------------------------------------------------*/
.sx-section { margin-bottom: clamp(1.75rem, 5vw, 2.75rem); }

.sx-section > h2 {
    margin-bottom: .9rem;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
}

/* what only the customer can move along, said first and said plainly */
.sx-attention {
    border-color: var(--sx-rose);
    background: #1E0F1B;
}

.sx-attention__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.sx-attention__list li {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-radius: var(--sx-radius-sm);
    background: #140711;
    border: 1px solid var(--sx-line);
}

.sx-attention__list strong { display: block; font-size: .98rem; }
.sx-attention__list small { color: var(--sx-text); font-size: .8rem; }

.sx-tiles {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.sx-tile {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
}

.sx-tile b {
    display: block;
    font-family: var(--sx-heading);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.15;
}

.sx-tile span { font-size: .82rem; color: var(--sx-text); }

.sx-order-card h3 { font-size: 1.2rem; margin-bottom: .2rem; }

/* the last thing said on each project */
.sx-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.sx-recent li {
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--sx-line);
}

.sx-recent li:last-child { padding-bottom: 0; border-bottom: 0; }

.sx-recent__who {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sx-rose-deep);
}

.sx-recent time { font-weight: 500; letter-spacing: 0; text-transform: none; }
.sx-recent p { margin: .3rem 0 .4rem; font-size: .93rem; overflow-wrap: anywhere; }

.sx-facts + .sx-note { margin-block-start: 1.1rem; }

/* the account button inside the phone menu, where the nav actually is */
/* The account button inside the phone menu.
 *
 * The theme only dresses this button where it wrote it — .header-1
 * .menu-right-info — so in here it arrived with no background and the dark
 * text it inherits, which on a near-black panel is invisible. It gets the
 * same white pill as the desktop one, at a size a thumb can hit, and the rule
 * above it is a light hairline rather than the dark one that vanished. */
.sx-menu-account {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sx-menu-account .lets-talk-btn,
.offcanvas-menu .sx-menu-account .lets-talk-btn {
    display: block;
    padding: .95rem 1.5rem;
    border-radius: 999px;
    background: #140711;
    color: var(--sx-bright);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background .25s ease, color .25s ease;
}

.sx-menu-account .lets-talk-btn:hover,
.sx-menu-account .lets-talk-btn:focus-visible {
    background: var(--sx-rose);
    color: #F7F2F4;
}

/*--------------------------------------------------------------
  12. The dashboard frame: a sidebar, and the page beside it
--------------------------------------------------------------*/
.sx-shell {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .sx-shell { grid-template-columns: 16.5rem minmax(0, 1fr); }

    .sx-shell__side {
        position: sticky;
        top: 6.5rem;                       /* clear of the sticky header */
    }
}

.sx-shell__side {
    padding: 1.25rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: #140711;
}

.sx-shell__who {
    padding-bottom: 1rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--sx-line);
}

.sx-shell__who b {
    display: block;
    font-family: var(--sx-heading);
    font-size: 1.05rem;
    line-height: 1.25;
}

.sx-shell__who span {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--sx-text);
    overflow-wrap: anywhere;
}

.sx-shell__nav { display: grid; gap: .25rem; }

.sx-shell__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .8rem;
    border-radius: var(--sx-radius-sm);
    font-size: .95rem;
    font-weight: 600;
    color: var(--sx-bright);
    transition: background .2s ease, color .2s ease;
}

.sx-shell__link svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.sx-shell__link span { flex: 1 1 auto; }

.sx-shell__link:hover,
.sx-shell__link:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--sx-bright); }

.sx-shell__link.is-on {
    background: var(--sx-ground);
    color: #F7F2F4;
}

.sx-pill {
    flex: none;
    min-inline-size: 1.5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

.sx-shell__link.is-on .sx-pill { background: rgba(255, 255, 255, 0.14); color: #F7F2F4; }

.sx-shell__out {
    display: block;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--sx-line);
    font-size: .85rem;
    font-weight: 600;
    color: var(--sx-text);
}

.sx-shell__out:hover { color: var(--sx-rose); }

.sx-shell__main { min-inline-size: 0; }

/* On a phone the sidebar is a strip of tabs above the page, not a column. */
@media (max-width: 61.99rem) {
    .sx-shell__side { padding: 1rem; }

    .sx-shell__nav {
        grid-auto-flow: column;
        grid-auto-columns: minmax(max-content, 1fr);
        gap: .35rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sx-shell__nav::-webkit-scrollbar { display: none; }

    .sx-shell__link {
        flex-direction: column;
        gap: .3rem;
        padding: .6rem .5rem;
        font-size: .78rem;
        text-align: center;
    }

    .sx-shell__link span { flex: none; }
    .sx-shell__link .sx-pill { display: none; }   /* the count is in the page itself */
    .sx-shell__out { text-align: center; }
}

.sx-page__title {
    margin-bottom: 1.1rem;
    font-size: clamp(1.35rem, 3.2vw, 1.9rem);
}

.sx-page__row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.sx-page__row h3 { margin: 0; font-size: 1.15rem; }

/* Inside the dashboard a form is one setting among several, so its button is
   the size of its words — not the full-width commitment of the sign-in card. */
.sx-shell .sx-panel > h3 { margin-bottom: 1rem; font-size: 1.15rem; }
.sx-shell .sx-panel .sx-auth__form .sx-btn { justify-self: start; }
.sx-shell .sx-panel + .sx-panel { margin-top: 1.25rem; }

/* which conversation is being read */
.sx-thread-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.sx-thread-pick {
    padding: .55rem .85rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    background: #140711;
    color: var(--sx-bright);
    line-height: 1.3;
}

.sx-thread-pick strong { display: block; font-size: .92rem; }
.sx-thread-pick small { font-size: .75rem; color: var(--sx-text); }

.sx-thread-pick.is-on {
    border-color: var(--sx-line);
    background: var(--sx-ground);
    color: #F7F2F4;
}

.sx-thread-pick.is-on small { color: rgba(247, 242, 244, .7); }

/* ------------------------------------------------------ templates for sale */
.sx-tpl__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.sx-tpl__head h3 { flex: 1 1 auto; min-width: 0; }
.sx-tpl__price {
    flex: none;
    font-family: var(--sx-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--sx-rose);
    line-height: 1.2;
    padding-block-start: .15rem;
}

.sx-buy {
    padding: 1.5rem;
    margin-block-end: 1.25rem;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    background: var(--sx-surface);
    box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .45);
}
.sx-buy__label {
    display: block;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sx-text);
}
.sx-buy__price {
    margin: .2rem 0 0;
    font-family: var(--sx-heading);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--sx-bright);
}
.sx-buy__sub { margin: .25rem 0 1.1rem; color: var(--sx-text); font-size: .92rem; }
.sx-buy .sx-btn--full { width: 100%; justify-content: center; }
.sx-buy__list { margin: 1.1rem 0 0; font-size: .9rem; grid-template-columns: 1fr; gap: .1rem; }
.sx-buy__list li { display: flex; gap: .55rem; align-items: flex-start; padding: .25rem 0; }
.sx-buy__list i { color: var(--sx-rose); margin-block-start: .3rem; font-size: .8rem; }
.sx-buy__note { margin: .9rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--sx-text); }

.sx-summary__thumb {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--sx-radius) - 4px);
    margin-block-end: 1rem;
    border: 1px solid var(--sx-line);
}
.sx-summary__plan .sx-tag { margin-inline-start: .5rem; vertical-align: middle; font-size: .7rem; }

/* A product page opens on its content: the band is only as tall as the
   header that sits on it, and carries just the trail. */
.breadcrumb-wrapper--compact .page-heading {
    padding: 120px 0 18px;
    text-align: start;
}
@media (min-width: 768px) {
    .breadcrumb-wrapper--compact .page-heading { padding: 128px 0 20px; }
}
@media (min-width: 1200px) {
    .breadcrumb-wrapper--compact .page-heading { padding: 132px 0 22px; }
}
.breadcrumb-wrapper--compact .page-heading .breadcrumb-list { justify-content: flex-start; }
.sx-details--product .sx-details__title { margin-block-start: .25rem; }
.sx-details--product .sx-case__actions { margin-block-end: 2rem; }
.sx-details--product .sx-details__thumb { margin-block-end: 2.25rem; }

/* the template's key points: one column, generous, easy to scan */
.sx-points {
    grid-template-columns: 1fr;
    gap: .6rem;
    margin: 0 0 2rem;
}
.sx-points li {
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--sx-line);
    border-radius: calc(var(--sx-radius) - 6px);
    background: var(--sx-surface);
    font-size: 1rem;
    line-height: 1.6;
}
.sx-points li i { color: var(--sx-rose); margin-block-start: .4rem; flex: none; }
@media (min-width: 992px) {
    .sx-points { gap: .7rem; }
}

/* ---------------------------------------------------------- the wordmark
   On every page load the logo assembles itself: its letters rise into
   place one after another, left to right, and settle with a small
   overshoot. The whole thing is over in about a second.

   The letters are the logo, not the word re-set in a font that only looks
   close. Each span carries the same PNG and shows one letter of it through
   a clip-path cut at the transparent columns between the glyphs - measured
   off the artwork by `python _build/images.py logo` and written into the
   markup by build.py, so a redrawn wordmark is re-measured rather than
   re-guessed.

   Only translate and opacity are animated. A scale or a rotate would turn
   about the span's centre - the centre of the whole wordmark, not of the
   letter inside it - and the letters would visibly converge.

   The <img> underneath is the fallback, so nothing here can hide the mark:
   the slices are only shown where clip-path works, and that is the same
   rule that hides the picture.

   The class is .sx-brandmark rather than .sx-logo: .sx-logo is already a
   cell of the client logo wall higher up this file, and sharing the name
   put the wall's opacity on the header wordmark and this animation on all
   sixteen client marks. */
.sx-brandmark {
    display: inline-block;
}

/* The slices are laid against this, not against the link: .navbar-brand
   carries vertical padding, and an absolutely positioned overlay resolves
   against the padding box - ten pixels taller than the artwork. This
   shrink-wraps the picture, so the two boxes are the same box. */
.sx-brandmark__mark {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/* block, or the line box leaves a baseline gap under the picture and the
   slices sit high by the height of a descender */
.sx-brandmark img {
    display: block;
}

.sx-brandmark__letters {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sx-brandmark__letters span {
    position: absolute;
    inset: 0;
    background-image: url("../img/logo/logo-trans.png?v=1789800075");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* --l and --r are this letter's own edges, as percentages of the mark */
    clip-path: inset(0 var(--r) 0 var(--l));
    animation: sx-letter-in .58s cubic-bezier(.22, .9, .3, 1.12) both;
    animation-delay: calc(var(--i) * 42ms);
}

@supports (clip-path: inset(0 10% 0 10%)) {
    .sx-brandmark img { opacity: 0; }
    .sx-brandmark__letters { display: block; }
}

@keyframes sx-letter-in {
    0%   { opacity: 0; transform: translateY(44%); filter: blur(3px); }
    55%  { opacity: 1; filter: blur(0); }
    72%  { transform: translateY(-7%); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Arabic reads the other way, so the letters land the other way: the last
   letter of the mark is the first one home. */
[dir="rtl"] .sx-brandmark__letters span {
    animation-delay: calc(var(--j) * 42ms);
}

/* Asked for less movement: the mark simply arrives, whole. */
@media (prefers-reduced-motion: reduce) {
    .sx-brandmark__letters { display: none; }
    .sx-brandmark img { animation: sx-brand-fade .3s ease-out both; }
    @supports (clip-path: inset(0 10% 0 10%)) {
        .sx-brandmark img { opacity: 1; }
    }
    @keyframes sx-brand-fade { from { opacity: 0; } to { opacity: 1; } }
}


/* ------------------------------------------------------ the loading screen
   The mark assembles itself in the middle of an ink field while a hairline
   fills underneath, then the whole thing fades away.

   It answers to nothing. The curtain's own animation takes it off the page
   after 1.45s whether or not a script ever runs, so a visitor with
   JavaScript disabled is never shut out - the script (inline, in build.py's
   LOAD_JS) only ever ends it sooner, and it never waits for window.load.
   That was the failing of the theme's preloader this replaces: it waited,
   and then wiped for 2.4 seconds, on every page.

   The line wears the brand's ember gradient (the poster's glow): deep
   #A14D25 rising to #D46A32 and burning out to cream #1E0F1B. */
.sx-load {
    position: fixed;
    inset: 0;
    /* the theme's own preloader sat here; nothing may cover this */
    z-index: 99999999999999;
    display: grid;
    place-items: center;
    padding: var(--sx-gap);
    background: var(--sx-ground);
    animation: sx-load-out .42s ease 1.15s both;
}

/* the script has taken over: it decides when, and it is sooner */
.sx-load.is-out {
    animation: sx-load-out .42s ease 0s both;
}

.sx-load__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: sx-load-rise .6s cubic-bezier(.22, .9, .3, 1.05) both;
}

/* bigger here than in the header - it is the only thing on the screen */
.sx-load__mark img {
    width: clamp(190px, 44vw, 300px);
    height: auto;
}

.sx-load__track {
    position: relative;
    inline-size: clamp(160px, 38vw, 260px);
    block-size: 2px;
    margin-block-start: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.sx-load__bar {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #B5828C, #E6AFB8 52%, #1E0F1B);
    transform-origin: left center;
    /* --p is how far along we actually are; the keyframes below are only
       the answer for a browser whose script never ran */
    transform: scaleX(var(--p, 0));
    animation: sx-load-bar 1.15s cubic-bezier(.35, .1, .2, 1) both;
}

/* the script is driving: real milestones, not a timer */
.sx-load.is-live .sx-load__bar {
    animation: none;
    transition: transform .3s ease-out;
}

[dir="rtl"] .sx-load__bar {
    transform-origin: right center;
}

@keyframes sx-load-bar {
    from { transform: scaleX(.05); }
    to   { transform: scaleX(1); }
}

@keyframes sx-load-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* visibility is flipped at the very end rather than at the midpoint a
   discrete property would otherwise take, so the fade is not cut in half -
   and once it is hidden it stops swallowing clicks. */
@keyframes sx-load-out {
    0%   { opacity: 1; visibility: visible; }
    99%  { opacity: 0; visibility: visible; transform: translateY(-1%); }
    100% { opacity: 0; visibility: hidden; transform: translateY(-1%); }
}

/* Asked for less movement: there is no curtain at all. */
@media (prefers-reduced-motion: reduce) {
    .sx-load {
        animation: none;
        opacity: 0;
        visibility: hidden;
    }
}

/*======================================================================================
  13. Midnight bloom — the 2026-09-22 redesign

  Everything above this line is the site as it was built on a white page. This
  section is the design itself: one near-black plum ground, one soft light in
  the corner of it, one grotesque at one weight, and shapes that are either a
  pill or a hairline. It is last in the file on purpose — it is the layer that
  decides, and the cascade should not have to be argued with.

  Three rules hold the whole thing together:

    * **The light is the only colour.** Every accent on this site is a value
      taken out of the bloom. There is no second hue to keep in sync.
    * **A border is a lightening.** On a dark ground a darker line is a hole.
      Every rule, divider and card edge is white at 10–18% and nothing else.
    * **Weight, not size, carries hierarchy.** The display line is 300. So is
      the nav. What separates them is scale and space, which is why the page
      can be this quiet and still be readable.

  13.1 Ground and type      13.7  Forms, footer and the small furniture
  13.2 The bloom            13.8  Arabic
  13.3 Header and nav       13.10 What the vendor theme still argued about
  13.4 Hero and pills       13.11 Phones
  13.5 The rule and the logo strip under the hero
  13.6 Cards, sections and bands   13.13 Second pass
                                   13.14 The rail
                                   13.15 The marquee
                                   13.16 The work showcase
                                   13.17 The two things that float
                                   13.18 The loading screen
                                   13.19 The products row
                                                 13.12 Motion
======================================================================================*/

/*--------------------------------------------------------------
  13.1 Ground and type
--------------------------------------------------------------*/
html {
    background: var(--sx-ground);
}

body {
    background: var(--sx-ground);
    font-family: var(--sx-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -.011em;
    color: var(--sx-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The theme set headings at 600/700 for a white page. At display size on a
   dark one that is a shout: the light weight is the whole voice here, and it
   is what lets a 7rem headline sit quietly instead of filling the room. */
h1, h2, h3, h4, h5, h6,
.hero-title,
.breadcrumb-title,
.section-title h2,
.title {
    font-family: var(--sx-heading);
    font-weight: 300;
    color: var(--sx-bright);
    letter-spacing: -.028em;
    line-height: 1.08;
}

/* Below about 1.4rem a 300 goes spindly - the small headings come back to a
   normal weight and give up the tight tracking with it. */
h4, h5, h6,
.sx-tpl__title,
.sx-case__title {
    font-weight: 400;
    letter-spacing: -.016em;
    line-height: 1.25;
}

p {
    color: var(--sx-text);
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--sx-rose);
    color: var(--sx-ground);
}

:focus-visible {
    outline: 2px solid var(--sx-rose);
    outline-offset: 3px;
    border-radius: 4px;
}

/* The eyebrow. Small caps, wide tracking, mute grey - it names the section
   without becoming a second heading, and it is never a pill: a chip around
   two words is the tell of a page that was assembled rather than designed. */
.sx-eyebrow,
.sub-title,
.section-title .sub-title,
.sx-rule span {
    display: block;
    font-family: var(--sx-body);
    font-size: clamp(.66rem, 1.4vw, .73rem);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sx-mute);
    background: none;
    border: 0;
    padding: 0;
}

.sub-title,
.section-title .sub-title {
    margin-bottom: 1.1rem;
}

.sx-eyebrow .sx-dot {
    color: rgba(255, 255, 255, .55);
    margin: 0 .1em;
}

/* The opening word of a headline stays in the shade the light has not
   reached yet. One span, and the line reads as lit. */
.sx-dim {
    color: var(--sx-mute);
}

.sx-lead,
.sx-hero__lead {
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--sx-text);
}

/*--------------------------------------------------------------
  13.2 The bloom

  One sunrise in the top corner: white at the core, warm salmon spreading
  left across the top, and a cooler lavender lobe falling away down and to
  the left. The far edge of a real light is cooler than its centre, and
  skipping that is the single thing that makes a CSS glow look like a CSS
  glow - so there is a warm layer and a cool one rather than one pink blur.

  Four layers, because no single gradient is all of these at once, and the
  shaft is two gradients because the lobe *leans*: it runs down-left from the
  source, and an axis-aligned ellipse cannot. Two overlapping ellipses along
  that axis approximate it for nothing, where a rotated element would need a
  box half again as large and would fight the section's overflow.

  The stops are not guessed. They were fitted against the reference frame -
  sample the background where it is background, composite the candidate,
  minimise the mean channel error - and they land at about 4.5% mean, which
  is the difference between this and a JPEG of it.

  It is absolutely positioned inside a section rather than fixed to the
  viewport: the reference lights the first screen and lets the page go dark
  underneath. A fixed light would follow the visitor down the page.
--------------------------------------------------------------*/
.sx-bloom {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--sx-ground);
}

.sx-bloom > span {
    position: absolute;
    inset: 0;
    display: block;
}

/* the warm wash across the top */
.sx-bloom__warm {
    background: radial-gradient(62% 72% at 88% 2%,
        rgba(236, 150, 130, .95) 0%,
        rgba(232, 144, 128, .87) 14%,
        rgba(210, 118, 116, .72) 28%,
        rgba(174, 94, 106, .54) 44%,
        rgba(128, 72, 94, .36) 60%,
        rgba(80, 50, 74, .18) 76%,
        rgba(46, 30, 52, .06) 88%,
        transparent 100%);
}

/* the cool lobe, in two overlapping ellipses along its axis */
.sx-bloom__shaft {
    background:
        radial-gradient(52% 84% at 104% 5%,
            rgba(240, 238, 252, .92) 0%,
            rgba(224, 218, 244, .78) 14%,
            rgba(196, 190, 228, .60) 28%,
            rgba(158, 152, 202, .42) 44%,
            rgba(114, 108, 166, .25) 60%,
            rgba(70, 64, 116, .11) 78%,
            transparent 96%),
        radial-gradient(48% 56% at 76% 44%,
            rgba(206, 198, 232, .52) 0%,
            rgba(176, 168, 212, .40) 20%,
            rgba(138, 130, 182, .27) 40%,
            rgba(96, 90, 142, .15) 62%,
            rgba(58, 54, 94, .06) 82%,
            transparent 100%);
}

/* the source. A round light, so its radius is a length rather than a pair
   of percentages - percentages of a 3:1 box would draw an oval sun. It is
   sized off the viewport so the composition holds at any width. */
.sx-bloom__core {
    background: radial-gradient(circle clamp(130px, 20vw, 440px) at 97% 11%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, .98) 14%,
        rgba(253, 248, 251, .82) 30%,
        rgba(245, 228, 237, .52) 50%,
        rgba(220, 194, 212, .24) 72%,
        rgba(190, 166, 190, .08) 88%,
        transparent 100%);
}

/* the dust. Masked back to the lit half: a star field over the whole width
   reads as dirt on the screen rather than as sky. */
.sx-bloom__stars {
    background-image: url("../img/bg/stars.png?v=1790105088");
    background-repeat: repeat;
    opacity: .55;
    -webkit-mask-image: radial-gradient(70% 70% at 88% 6%, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 72%);
    mask-image: radial-gradient(70% 70% at 88% 6%, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 72%);
}

/* and the ground closing over it again at the bottom edge, so a section can
   end without a visible seam between the lit band and the dark page */
.sx-bloom::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(to bottom, transparent, var(--sx-ground));
}

/* A page header carries the same light at a third of the strength, so every
   page opens the way the home page does without spending a screen on it. */
.sx-bloom--page .sx-bloom__warm {
    opacity: .62;
}

.sx-bloom--page .sx-bloom__shaft {
    opacity: .70;
}

.sx-bloom--page .sx-bloom__core {
    opacity: .55;
}

/* The award band is lit from the opposite corner - it is the one place the
   page turns round, and it is what stops a long scroll reading as one very
   tall hero. */
.sx-bloom--band .sx-bloom__warm {
    opacity: .5;
    transform: scale(-1, 1);
}

.sx-bloom--band .sx-bloom__shaft {
    opacity: .55;
    transform: scale(-1, 1);
}

.sx-bloom--band .sx-bloom__core {
    opacity: .30;
    transform: scale(-1, 1);
}

.sx-bloom--band .sx-bloom__stars {
    transform: scale(-1, 1);
}

/*--------------------------------------------------------------
  13.3 Header and nav
--------------------------------------------------------------*/
.header-section,
.header-section.header-1 {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.header-section .header-main {
    border: 0;
    padding-block: 1.6rem;
}

/* Once it detaches it needs a ground of its own, or the page scrolls up
   through it. Blur rather than a solid fill keeps the light showing. */
.header-section.sticky-menu {
    background: rgba(20, 7, 17, .78);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid var(--sx-line);
}

.header-section.sticky-menu .header-main {
    padding-block: .9rem;
}

.navbar-nav .nav-link,
.navbar .nav-item .nav-link {
    font-family: var(--sx-body);
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: -.008em;
    color: rgba(247, 242, 244, .66);
    text-transform: none;
    padding: .4rem .95rem;
    transition: color .25s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
    color: var(--sx-bright);
}

/* The theme drew the active state as a filled block. A page this quiet says
   it with brightness alone. */
.navbar-nav .nav-link::before,
.navbar-nav .nav-link::after {
    display: none;
}

.navbar-brand,
.footer-logo,
.logo-link {
    filter: none;
}

/* Sign in, the language switch and the burger, right-aligned and all three
   the same height so the row has one baseline. */
.menu-right-info {
    gap: .6rem;
}

/* The nav starts beside the wordmark rather than in the middle of the page,
   which is where the reference puts it - and needs to be told to stand off
   it, or the first link reads as part of the brand. */
.header-section .navbar-brand {
    margin-inline-end: clamp(1.5rem, 4vw, 3.5rem);
}

.sidebar__toggle span,
.mobile-topbar .bars span {
    background: rgba(247, 242, 244, .75);
}

/*--------------------------------------------------------------
  13.4 Hero and pills
--------------------------------------------------------------*/
.sx-hero {
    display: flex;
    align-items: center;
    min-height: min(80svh, 730px);
    padding-block: clamp(6.5rem, 15vh, 9.5rem) clamp(1rem, 3vh, 2rem);
    text-align: center;
    background: none;
}

.sx-hero__inner {
    max-width: 62rem;
    margin-inline: auto;
}

.sx-hero__title {
    font-size: clamp(2.35rem, 6.1vw, 4.9rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    margin-block: 1.5rem 0;
}

.sx-hero__lead {
    max-width: 36rem;
    margin: 1.5rem auto 0;
}

.sx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2.25rem;
}

/* The pill. One shape for every button on the site: a near-white fill for
   the single thing a page wants you to do, a hairline ghost for the rest. */
.sx-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.55rem;
    border: 1px solid transparent;
    border-radius: var(--sx-pill);
    font-family: var(--sx-body);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: -.008em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .28s ease, border-color .28s ease,
        color .28s ease, transform .28s var(--as-cube-1);
}

.sx-pill i {
    font-size: .85em;
    transition: transform .32s var(--as-cube-1);
}

.sx-pill:hover i {
    transform: translateX(.2rem);
}

.sx-pill--solid {
    background: var(--sx-bright);
    color: var(--sx-ground);
}

.sx-pill--solid:hover,
.sx-pill--solid:focus-visible {
    background: #fff;
    color: var(--sx-ground);
    transform: translateY(-2px);
}

.sx-pill--ghost {
    background: rgba(255, 255, 255, .045);
    border-color: var(--sx-line-strong);
    color: rgba(247, 242, 244, .82);
}

.sx-pill--ghost:hover,
.sx-pill--ghost:focus-visible {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .3);
    color: var(--sx-bright);
    transform: translateY(-2px);
}

/* The theme's own buttons, wherever they are still rendered, wear the same
   shape - a card's "Read more", the pricing table, the contact form. */
.service-btn,
.subscribe-btn,
.news-btn,
.sx-btn,
button.theme-btn,
.theme-btn-main {
    border-radius: var(--sx-pill);
    font-family: var(--sx-body);
    font-weight: 500;
    letter-spacing: -.008em;
    text-transform: none;
}

.sx-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.55rem;
    background: var(--sx-bright);
    color: var(--sx-ground);
    border: 1px solid transparent;
    line-height: 1;
    transition: background-color .28s ease, transform .28s var(--as-cube-1);
}

.sx-btn:hover {
    background: #fff;
    color: var(--sx-ground);
    transform: translateY(-2px);
}

/* A text link with an arrow: the quiet alternative to a third pill. */
.sx-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--sx-bright);
    transition: color .25s ease, gap .25s ease;
}

.sx-link i {
    font-size: .85em;
    transition: transform .3s var(--as-cube-1);
}

.sx-link:hover {
    color: var(--sx-rose);
}

.sx-link:hover i {
    transform: translateX(.2rem);
}

.sx-link--muted {
    color: var(--sx-mute);
    font-weight: 400;
}

.sx-link--muted:hover {
    color: var(--sx-bright);
}

/*--------------------------------------------------------------
  13.5 The rule, and the logo strip under the hero
--------------------------------------------------------------*/

/* A caption with a hairline running out of it both ways. flex + two growing
   pseudo-elements, so it centres at any width and needs no measuring. */
.sx-rule {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 auto 2.75rem;
    max-width: 46rem;
}

.sx-rule::before,
.sx-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--sx-line-strong));
}

.sx-rule::after {
    background: linear-gradient(to left, transparent, var(--sx-line-strong));
}

.sx-rule span {
    white-space: nowrap;
}

.sx-clients-section--strip {
    padding-block: 0 clamp(4rem, 9vw, 7rem);
}

/* The marks: one monochrome row, dimmed until you look at one. Grayscale is
   not enough on its own - a white logo and a mid-grey one still arrive at
   different weights - so opacity does the levelling and hover undoes it. */
.sx-logo-wall {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 6vw, 4.5rem);
    border: 0;
    background: none;
    padding: 0;
}

.sx-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    opacity: .55;
    filter: grayscale(1) brightness(2.2) contrast(.9);
    transition: opacity .3s ease, filter .3s ease;
}

.sx-logo img {
    width: auto;
    height: clamp(18px, 2.4vw, 26px);
    object-fit: contain;
}

.sx-logo:hover {
    opacity: .85;
}

.sx-clients-strip__more {
    text-align: center;
    margin-top: clamp(2rem, 5vw, 3rem);
}

/*--------------------------------------------------------------
  13.6 Cards, sections and bands
--------------------------------------------------------------*/
.section-padding {
    padding-block: clamp(4rem, 9vw, 7.5rem);
}

.section-title h2,
.section-title .title {
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    letter-spacing: -.032em;
}

.section-title p,
.section-title .text {
    color: var(--sx-text);
}

/* One card. Templates, case studies, services, plans, people - all of them
   are a plum panel a step off the ground with a hairline around it, and all
   of them lift the same way. */
.sx-tpl,
.sx-case,
.service-box-items,
.team-box-items,
.pricing-box-items,
.faq-box-items,
.sx-what__item {
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    box-shadow: none;
    transition: background-color .3s ease, border-color .3s ease,
        transform .3s var(--as-cube-1);
}

.sx-tpl:hover,
.sx-case:hover,
.service-box-items:hover,
.team-box-items:hover,
.pricing-box-items:hover {
    background: var(--sx-surface-2);
    border-color: var(--sx-line-strong);
    transform: translateY(-4px);
}

/* A screenshot is the brightest thing on a dark page and will pull the eye
   off the copy beside it. Held back a little until it is hovered. */
.sx-tpl__thumb img,
.sx-case__thumb img {
    border-radius: var(--sx-radius-sm);
    opacity: .88;
    transition: opacity .35s ease, transform .5s var(--as-cube-1);
}

.sx-tpl:hover .sx-tpl__thumb img,
.sx-case:hover .sx-case__thumb img {
    opacity: 1;
}

.sx-tpl__price,
.sx-case__domain {
    color: var(--sx-rose);
}

.sx-chip {
    border-color: var(--sx-line);
    color: var(--sx-mute);
    background: none;
}

.sx-chip--accent {
    border-color: var(--sx-line-strong);
    background: rgba(255, 255, 255, .06);
    color: var(--sx-bright);
}

.sx-chip--live {
    background: rgba(255, 255, 255, .06);
    color: var(--sx-text);
}

/* The bands. Both used to be photographs with type over them; they are now
   the page with its own light on. */
.award-section,
.breadcrumb-wrapper,
.sx-404 {
    background: none;
}

.breadcrumb-wrapper {
    padding-block: clamp(8rem, 15vh, 11rem) clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.breadcrumb-wrapper--compact {
    padding-block: clamp(7rem, 13vh, 8.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.breadcrumb-title {
    font-size: clamp(2.1rem, 5.6vw, 4.25rem);
    letter-spacing: -.034em;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    margin-top: 1.25rem;
    font-size: .9rem;
    color: var(--sx-text);
}

/* The theme sets these at 45% white, which measures 4.16:1 on this ground -
   near enough to look fine and under the 4.5 a body size has to clear. It
   names them four levels deep, so this does too. */
.breadcrumb-wrapper .page-heading .breadcrumb-list li,
.breadcrumb-wrapper .page-heading .breadcrumb-list li a,
.breadcrumb-wrapper .page-heading .breadcrumb-list li.color-2,
.breadcrumb-list a,
.breadcrumb-list li {
    color: var(--sx-text);
}

.breadcrumb-wrapper .page-heading .breadcrumb-list li a:hover,
.breadcrumb-list a:hover {
    color: var(--sx-bright);
}

.breadcrumb-list .sep {
    font-size: .7em;
    opacity: .5;
}

.award-section .title {
    font-size: clamp(2.2rem, 8vw, 6rem);
    letter-spacing: -.04em;
}

.award-section .title span {
    display: block;
    font-size: clamp(.66rem, 1.4vw, .73rem);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sx-mute);
    margin-bottom: 1.2rem;
}

/* The closing invitation: the one photograph the page keeps, dimmed hard so
   the card on top of it stays the brightest thing in the band. */
.cta-banner-section .cta-thumb img {
    opacity: .34;
    filter: grayscale(.55);
}

.cta-banner-section .content-box {
    background: rgba(30, 15, 27, .88);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    overflow: hidden;
}

.cta-banner-section .content-box .service-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--sx-bright);
    color: var(--sx-ground);
    border-radius: 0;
    transition: background-color .28s ease;
}

.cta-banner-section .content-box .service-btn:hover {
    background: #fff;
    color: var(--sx-ground);
}

.video-btn {
    background: var(--sx-bright);
    color: var(--sx-ground);
}

/*--------------------------------------------------------------
  13.7 Forms, footer and the small furniture
--------------------------------------------------------------*/
input,
textarea,
select,
.nice-select {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    color: var(--sx-bright);
    font-family: var(--sx-body);
    transition: border-color .25s ease, background-color .25s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--sx-mute);
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .32);
    outline: none;
}

/* The browser paints its own card over a remembered field, in its own
   colours, and there is no property that turns it off - an inset shadow the
   size of the box is the one thing that covers it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sx-bright);
    -webkit-box-shadow: 0 0 0 100px #22121E inset;
    caret-color: var(--sx-bright);
}

.footer-section {
    background: var(--sx-ground-deep);
    border-top: 1px solid var(--sx-line);
}

.footer-section .footer-widget-wrapper {
    border: 0;
}

.footer-section h3,
.footer-section h4,
.footer-section .widget-title {
    font-size: .73rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sx-mute);
}

.footer-section a {
    color: var(--sx-text);
    transition: color .22s ease;
}

.footer-section a:hover {
    color: var(--sx-bright);
}

.footer-section .footer-text,
.footer-section p {
    color: var(--sx-mute);
}

.footer-section form {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-pill);
    padding: .3rem .3rem .3rem 1.1rem;
}

.footer-section form input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding: .6rem 0;
}

.footer-section form input:focus {
    background: none;
}

.subscribe-btn {
    background: var(--sx-bright);
    color: var(--sx-ground);
    border: 0;
    padding: .65rem 1.2rem;
    white-space: nowrap;
}

.subscribe-btn:hover {
    background: #fff;
    color: var(--sx-ground);
}

.social-icon a,
.social-icon-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--sx-line);
    border-radius: 50%;
    color: var(--sx-text);
    background: none;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}

.social-icon a:hover,
.social-icon-list a:hover {
    border-color: transparent;
    background: var(--sx-bright);
    color: var(--sx-ground);
}

.back-to-top {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--sx-line-strong);
    color: var(--sx-bright);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.back-to-top:hover {
    background: var(--sx-bright);
    color: var(--sx-ground);
}

/* The offcanvas and the mobile drawer are the page again, not a white sheet
   sliding over it. */
.offcanvas-menu,
.mobile-menu-main,
.mobile-menu-area {
    background: var(--sx-ground-deep);
    border-inline-start: 1px solid var(--sx-line);
}

.offcanvas-overlay,
.mobile-menu-overlay {
    background: rgba(11, 3, 9, .7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mobile-menu-main .menu-list a,
.offcanvas-menu a {
    color: var(--sx-text);
}

.mobile-menu-main .menu-list a:hover,
.offcanvas-menu a:hover {
    color: var(--sx-bright);
}

/* The loading curtain is the ground it is covering, not a white flash. */
.sx-load {
    background: var(--sx-ground);
}

.sx-load__track {
    background: var(--sx-line);
}

.sx-load__bar {
    background: linear-gradient(to right, var(--sx-rose-deep), var(--sx-rose), var(--sx-bright));
}

.mouseCursor.cursor-inner {
    background: var(--sx-rose);
}

.mouseCursor.cursor-outer {
    border-color: var(--sx-line-strong);
}

/*--------------------------------------------------------------
  13.8 Arabic

  The light comes from the side the reading starts on. In English that is the
  top right; in Arabic the page is mirrored and so is the sky - otherwise the
  headline's dim opening word sits under the brightest part of the gradient,
  which is exactly backwards.

  Only the horizontal position of each layer is flipped. The vertical
  placement, the colours and the falloff are the same light.
--------------------------------------------------------------*/
[dir="rtl"] body,
[dir="rtl"] .sx-eyebrow,
[dir="rtl"] .sx-pill,
[dir="rtl"] .sx-link,
[dir="rtl"] .sub-title,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .hero-title,
[dir="rtl"] .breadcrumb-title,
[dir="rtl"] .title {
    font-family: var(--sx-arabic);
    /* Arabic does not take negative tracking: the letters join, and pulling
       them together closes the joins up. */
    letter-spacing: 0;
}

[dir="rtl"] .sx-eyebrow,
[dir="rtl"] .sub-title,
[dir="rtl"] .sx-rule span,
[dir="rtl"] .footer-section h3,
[dir="rtl"] .footer-section h4 {
    letter-spacing: .06em;
}

/* The light comes from the side the reading starts on. Every layer is the
   same light; only its horizontal placement flips, which one transform does
   for all four - restating eight gradients backwards is how a mirror and an
   original stop agreeing after the first edit. */
[dir="rtl"] .sx-bloom > span {
    transform: scale(-1, 1);
}

[dir="rtl"] .sx-bloom--band > span {
    transform: none;
}

/* The arrow in a pill points the way the reading goes. */
[dir="rtl"] .sx-pill i,
[dir="rtl"] .sx-link i {
    transform: scaleX(-1);
}

[dir="rtl"] .sx-pill:hover i,
[dir="rtl"] .sx-link:hover i {
    transform: scaleX(-1) translateX(.2rem);
}

[dir="rtl"] .footer-section form {
    padding: .3rem 1.1rem .3rem .3rem;
}

/*--------------------------------------------------------------
  13.10 The pieces the vendor theme still had an opinion about

  Everything here is a rule the purchased stylesheet wrote for a white page
  and is specific enough to have survived section 13. They are gathered in
  one place rather than scattered, so the next person can see exactly how
  much of the old theme is still being argued with.
--------------------------------------------------------------*/

/* THE INVISIBLE PARAGRAPHS. The theme's "text invert" effect paints type
   with a two-stop gradient through background-clip and wipes the split
   across it on scroll: grey on the way in, near-black once read - which is
   correct on a white page and, after the palette was inverted, painted the
   finished state in the page's own background colour. Three paragraphs and a
   heading on the home page simply were not there.

   The two stops are the two states. Bright is the read one; the other is the
   same colour held back, not a different grey, so a line that is halfway
   through the wipe does not change hue on the way. */
.text_invert-2 > div,
.text_invert > div {
    background-image: linear-gradient(to right,
        var(--sx-bright) 50%, rgba(247, 242, 244, .30) 50%);
}

/* The theme paints its own heading colour over ours in a dozen section
   scopes. This is the same value; it is here to win. */
.about-right-items h2,
.about-team-items h2,
.section-title h2,
.cta-banner-section .title,
.award-section .title {
    color: var(--sx-bright);
}

/* THE WORDMARK. It is a picture, and it was drawn at the size a white page's
   header wanted. The reference sets its mark small and quiet - the nav is
   not where the brand shouts. The letter slices are laid against this box,
   so sizing the picture sizes them with it and the intro still lands. */
.navbar-brand .sx-brandmark__mark img,
.mobile-topbar .sx-brandmark__mark img,
.logo-link .sx-brandmark__mark img {
    height: 26px;
    width: auto;
}

.footer-logo .sx-brandmark__mark img {
    height: 30px;
    width: auto;
}

.sx-brandmark {
    filter: brightness(1.08);
}

/* SIGN IN. The last thing in the nav is the one filled shape on the first
   screen, exactly as the reference puts its one white pill at the end of
   the row. */
.header-1 .menu-right-info .lets-talk-btn,
.header-section .menu-right-info .lets-talk-btn,
.lets-talk-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--sx-pill);
    background: var(--sx-bright);
    color: var(--sx-ground);
    font-family: var(--sx-body);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: -.008em;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .28s ease, transform .28s var(--as-cube-1);
}

.lets-talk-btn::before,
.lets-talk-btn::after {
    display: none;
}

.header-1 .menu-right-info .lets-talk-btn:hover,
.header-section .menu-right-info .lets-talk-btn:hover,
.lets-talk-btn:hover {
    background: #fff;
    color: var(--sx-ground);
    transform: translateY(-1px);
}

/* The language switch beside it is the ghost of that pill. */
.sx-lang__btn,
.sx-lang-toggle {
    border-radius: var(--sx-pill);
    border: 1px solid var(--sx-line-strong);
    background: rgba(255, 255, 255, .045);
    color: rgba(247, 242, 244, .82);
}

.sx-lang__btn:hover,
.sx-lang-toggle:hover {
    background: rgba(255, 255, 255, .09);
    color: var(--sx-bright);
}

.sx-lang__menu,
.sx-lang-menu {
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
    box-shadow: var(--sx-shadow);
}

.sx-lang__menu a:hover,
.sx-lang-menu a:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--sx-bright);
}

/* THE SUBSCRIBE BUTTON. The theme fills it with --theme, which is now the
   rose, and near-white type on rose is a 1.7:1 contrast - the one genuinely
   unreadable thing the inversion produced. The theme names it four levels
   deep, so this does too. */
.footer-widget-wrapper .footer-content form .subscribe-btn,
.footer-section .subscribe-btn,
form .subscribe-btn {
    background: var(--sx-bright);
    color: var(--sx-ground);
}

.footer-widget-wrapper .footer-content form .subscribe-btn:hover,
.footer-section .subscribe-btn:hover,
form .subscribe-btn:hover {
    background: #fff;
    color: var(--sx-ground);
}

/* THE CASE-STUDY ACCENT. Each case carries its subject's brand colour in
   --sx-accent, and the old design used it for the button and the domain
   line - so three case studies put a green, a blue and a red button on one
   page. The design has one accent and it is the light; the brand colour is
   kept for the glow behind the screenshot, where it reads as the product's
   own light rather than as a fourth palette. */
.sx-case .sx-btn,
.sx-details .sx-btn,
.sx-case__actions .sx-btn {
    background: var(--sx-bright);
    color: var(--sx-ground);
}

.sx-case .sx-btn:hover,
.sx-details .sx-btn:hover {
    background: #fff;
    color: var(--sx-ground);
}

/* Same for the standfirst under a case study's title: it was set in the
   subject's brand colour, and Mustajad's blue measures 4.37:1 on this
   ground. The colour the page is made of reads at 17.8. */
.sx-case__tagline,
.sx-details .sx-case__tagline {
    color: var(--sx-bright);
    font-weight: 400;
}

.sx-case__domain,
.sx-details .sx-case__domain {
    color: var(--sx-mute);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sx-chip--accent {
    background: rgba(255, 255, 255, .07);
    color: var(--sx-bright);
}

/* THE SERVICE LIST. Six rows, not six capsules: the card radius turned a
   list of links into a stack of pills, which is a lot of shape for what is
   really a table of contents. A rule under each one is enough. */
.sx-what__item,
.service-list-items li,
.service-box-items.style-list {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--sx-line);
    border-radius: 0;
    transition: border-color .3s ease, padding .3s var(--as-cube-1);
}

.sx-what__item:hover,
.service-list-items li:hover {
    background: none;
    border-color: var(--sx-line-strong);
    transform: none;
}

.sx-what__item a,
.sx-what__item {
    color: var(--sx-bright);
}

/* THE PRICE TABLE. Same card as everything else, with the one plan a page
   recommends carrying the hairline a shade brighter instead of a colour. */
.pricing-box-items.active,
.sx-plan--featured {
    background: var(--sx-surface-2);
    border-color: rgba(255, 255, 255, .26);
}

.pricing-box-items .price,
.sx-plan__price {
    color: var(--sx-bright);
    font-weight: 300;
}

/* THE CHAT WIDGET. It is a pill too, and on this ground it needs a border
   to sit on rather than a shadow. */
.sx-chat__launch,
.sx-chat-launch {
    background: rgba(30, 15, 27, .9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--sx-line-strong);
    color: var(--sx-bright);
    box-shadow: var(--sx-shadow);
}

.sx-chat__panel,
.sx-chat-panel {
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    box-shadow: var(--sx-shadow);
}

/* THE FILM LIGHTBOX and anything else magnific puts over the page. */
.mfp-bg {
    background: rgba(11, 3, 9, .92);
}

.sx-film__cap {
    color: var(--sx-mute);
}

/* Horizontal rules and the theme's dividers, all of them lightenings now. */
hr,
.line,
.section-title::after,
.footer-widget-wrapper,
.footer-bottom {
    border-color: var(--sx-line);
    background-color: transparent;
}

.footer-bottom {
    border-top: 1px solid var(--sx-line);
}

/* A table, wherever the account area draws one. */
table,
th,
td {
    border-color: var(--sx-line);
    color: var(--sx-text);
}

thead th {
    color: var(--sx-mute);
    font-weight: 500;
}

/*--------------------------------------------------------------
  13.11 Phones

  The design is one column of centred type at every width; what changes is
  how much air it can afford. The reference's proportions are a desktop
  composition - a 6rem headline and 11rem of padding above it would leave a
  phone with a headline and nothing else on the first screen.
--------------------------------------------------------------*/
@media (max-width: 991px) {
    .sx-hero {
        min-height: auto;
        padding-block: 7rem 2.5rem;
    }

    .sx-rule {
        gap: 1rem;
    }

    .sx-logo-wall {
        gap: 1.75rem 2.25rem;
    }

    .sx-hero__actions .sx-pill {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    /* Two full-width pills stacked, rather than two half-width ones with a
       label each too cramped to read. */
    .sx-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sx-rule::before,
    .sx-rule::after {
        display: none;
    }

    .sx-rule {
        justify-content: center;
    }
}

/*--------------------------------------------------------------
  13.13 Second pass

  What only showed up once the design was on every page: rules from the
  site's own earlier layer (not the vendor's) that outlived the thing they
  were drawn for, and three places where the light and the furniture on top
  of it were competing.
--------------------------------------------------------------*/

/* THE LOGO WALL was a bordered grid of 108px cells - a table of marks, which
   is right on a clients page and wrong as a line under a headline. The strip
   made it a flex row, but the cell height came along with it and left 270px
   between two rows of 18px logos on a phone. */
.sx-logo {
    min-height: 0;
    padding: 0;
    background: none;
}

.sx-logo img {
    max-height: none;
    opacity: 1;
}

a.sx-logo:hover {
    background: none;
}

a.sx-logo:hover img {
    transform: none;
}

/* THE MOBILE TOPBAR is not a bar. It was given the drawer's ground, which
   painted an opaque band across the top of the light on every phone; only
   the drawer that slides out needs a surface of its own. */
.mobile-menu-area {
    background: none;
    border: 0;
}

/* THE BURGER sits in the brightest corner of the page - which is exactly
   where the reference puts its one white pill, and a bare three-line icon
   has nothing to hold onto there. Giving it the ghost pill's ground means it
   reads on the white core and on the plum alike, and it matches the language
   switch beside it instead of floating next to it. */
.sidebar__toggle,
.mobile-topbar .bars {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--sx-line-strong);
    border-radius: 50%;
    background: rgba(20, 7, 17, .35);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background-color .25s ease, border-color .25s ease;
}

.sidebar__toggle:hover,
.mobile-topbar .bars:hover {
    background: rgba(20, 7, 17, .6);
    border-color: rgba(255, 255, 255, .34);
}

.sidebar__toggle span,
.mobile-topbar .bars span {
    display: block;
    width: 16px;
    height: 1.5px;
    margin: 0;
    border-radius: 2px;
    background: var(--sx-bright);
}

/* THE TAGS on a template card were bordered chips - three little capsules
   under every description, sixty of them on the shelf page. They are facts
   about the template, so they are set as facts: small caps in the mute grey,
   separated by the same middot the hero eyebrow uses. Nothing is lost and
   the card stops looking like a form. */
.sx-tpl__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
}

.sx-tpl__tags .sx-chip {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sx-mute);
}

.sx-tpl__tags .sx-chip + .sx-chip::before {
    content: "·";
    margin-inline-end: .55rem;
    color: rgba(255, 255, 255, .26);
}

/* THE AWARD BAND is the one place the page turns the light round, and its
   type is left-aligned - so the light belongs on the right, away from it.
   Mirroring the hero's layers put the brightest part of the band directly
   under the eyebrow, which disappeared into it. */
.sx-bloom--band .sx-bloom__warm,
.sx-bloom--band .sx-bloom__shaft,
.sx-bloom--band .sx-bloom__core,
.sx-bloom--band .sx-bloom__stars {
    transform: none;
}

.sx-bloom--band .sx-bloom__warm {
    opacity: .45;
}

.sx-bloom--band .sx-bloom__shaft {
    opacity: .5;
}

.sx-bloom--band .sx-bloom__core {
    opacity: .22;
}

[dir="rtl"] .sx-bloom--band > span {
    transform: scale(-1, 1);
}

.award-section .container {
    position: relative;
}

/* The eyebrow above PROMISES is the smallest type on the page and was the
   one thing sitting on a lit ground. Brought up to the body colour, which is
   the same decision the breadcrumb trail already makes. */
.award-section .title span {
    color: var(--sx-text);
}

/* THE 404 BUTTON was the site's own rule, and it filled with the accent -
   which was readable when the accent was a deep ember and is not now that it
   is a pale rose. It is the page's one action, so it is the solid pill. */
.sx-404 .content .theme-btn {
    background: var(--sx-bright);
    color: var(--sx-ground);
    border-radius: var(--sx-pill);
}

.sx-404 .content .theme-btn:hover {
    background: #fff;
    color: var(--sx-ground);
}

/* THE MARKS, a shade further forward: at .55 the palest of the sixteen had
   dropped out of the row entirely. */
.sx-logo {
    opacity: .62;
}

.sx-logo:hover {
    opacity: 1;
}

/*--------------------------------------------------------------
  13.14 The rail

  The reference's third element, under the hero and the logo strip: a row of
  cards that runs off the edge of the screen instead of wrapping, with a set
  of small bars underneath saying how far along it is. Nineteen templates is
  a shelf, and this is what a shelf looks like.

  It is a horizontal scroller first and a Swiper second. Before any script
  runs - and for anyone whose never does - the track is `overflow-x: auto`
  with scroll snapping, so the rail can be swiped, dragged and tabbed
  through exactly as it can afterwards. `.is-live` is added once Swiper has
  taken the track over, and that is what turns the native scrolling off:
  two things translating the same element is how a carousel ends up jittery.

  It bleeds past the container on the leading side only. A rail that stops
  neatly at both margins is a grid that happens to scroll; the whole signal
  is the card leaving the screen.
--------------------------------------------------------------*/
.sx-rail {
    position: relative;
    /* out to the viewport edge on the trailing side, back to the container's
       own gutter on the leading one, whichever way the page reads */
    margin-inline-end: calc(50% - 50vw);
}

.sx-rail__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 4px;
}

.sx-rail__viewport::-webkit-scrollbar {
    display: none;
}

/* Swiper has the track: stop scrolling it as well. */
.sx-rail.is-live .sx-rail__viewport {
    overflow: hidden;
    scroll-snap-type: none;
}

.sx-rail .swiper-wrapper {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

/* Swiper puts the gap between slides itself (spaceBetween), and a flex gap
   on top of it double-counts - every slide would drift left of where the
   translate expects it. */
.sx-rail.is-live .swiper-wrapper {
    gap: 0;
}

.sx-rail__cell {
    flex: 0 0 auto;
    width: min(86vw, 25rem);
    height: auto;
    scroll-snap-align: start;
}

.sx-rail__cell > .sx-tpl {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sx-rail__cell .sx-tpl__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sx-rail__cell .sx-tpl__actions {
    margin-top: auto;
}

/* the bars and the two arrows, on one row under the track */
.sx-rail__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    /* back inside the container - the track bleeds, the controls do not */
    margin-inline-end: calc(50vw - 50%);
}

.sx-rail__bars {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* The reference's indicator: short bars, the current one longer and bright.
   A row of dots would read as decoration; a bar that grows reads as
   position. */
.sx-rail__bar {
    display: block;
    width: 18px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .18);
    cursor: pointer;
    transition: width .35s var(--as-cube-1), background-color .35s ease;
}

.sx-rail__bar.is-on {
    width: 34px;
    background: var(--sx-bright);
}

.sx-rail__nav {
    display: flex;
    gap: .5rem;
}

.sx-rail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sx-line-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, .045);
    color: var(--sx-bright);
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
}

.sx-rail__btn:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
}

/* Swiper marks an arrow that has nowhere to go; it stays on the page so the
   row does not reflow, but it stops inviting a click. */
.sx-rail__btn.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
}

[dir="rtl"] .sx-rail__btn i {
    transform: scaleX(-1);
}

/* With no pointer to drag and no script to arrow, the bars are the only way
   through - so they are never the only way. The section keeps its "all
   templates" button above, which is a plain link to the whole shelf. */
@media (max-width: 575px) {
    .sx-rail__foot {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sx-rail__bar {
        transition-duration: .01ms !important;
    }
}

/*--------------------------------------------------------------
  13.15 The marquee

  The client marks under the hero, moving. A wall of sixteen is a grid; a row
  that drifts is a procession, and it can show all sixteen without wrapping
  to three lines or shrinking them to nothing.

  The track is two identical groups and the animation translates it by
  exactly half its width — when the first group has moved its own width the
  second is sitting where the first began, so the loop is seamless and there
  is never a frame with a gap in it. That is why the trailing gap lives on
  the group as padding rather than on the flex container: `gap` would not
  apply between the two groups, and the seam would close up.

  It is one CSS animation on one element. No script, no measuring, and it
  pauses when anyone is looking at it closely — hover or keyboard focus.
--------------------------------------------------------------*/
.sx-marquee {
    overflow: hidden;
    /* fade both ends rather than cutting them: a mark sliced in half by a
       hard edge reads as a rendering fault */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.sx-marquee__track {
    display: flex;
    width: max-content;
    animation: sx-marquee 52s linear infinite;
    will-change: transform;
}

.sx-marquee:hover .sx-marquee__track,
.sx-marquee:focus-within .sx-marquee__track {
    animation-play-state: paused;
}

.sx-marquee__group {
    display: flex;
    align-items: center;
    gap: clamp(2.75rem, 6vw, 5rem);
    /* the seam's own gap - see above */
    padding-inline-end: clamp(2.75rem, 6vw, 5rem);
}

@keyframes sx-marquee {
    to { transform: translate3d(-50%, 0, 0); }
}

/* Arabic reads right to left and so does the procession. Reversing the
   animation starts it at -50% and walks back to 0, which is the same loop
   travelling the other way — no second keyframe to keep in step. */
[dir="rtl"] .sx-marquee__track {
    animation-direction: reverse;
}

/* Bigger than the wall's: this is the only thing on that band, and the marks
   were being asked to identify themselves at 18px. */
.sx-marquee .sx-logo {
    flex: none;
}

.sx-marquee .sx-logo img {
    height: clamp(26px, 3.2vw, 40px);
}

@media (prefers-reduced-motion: reduce) {
    /* Still all sixteen, still one row — but the visitor moves it. */
    .sx-marquee__track {
        animation: none;
    }

    .sx-marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sx-marquee::-webkit-scrollbar {
        display: none;
    }

    .sx-marquee__group[aria-hidden="true"] {
        display: none;
    }
}

/*--------------------------------------------------------------
  13.16 The work showcase

  The home page's case studies, as the reference composition ends: one case
  held in the middle of the screen with the next and the last peeking in at
  the edges, and a row of bars across the top of it that fill as it moves.

  Like the rail in 13.14 this is a scroll-snap scroller before it is a
  Swiper, so it works with no script; `.is-live` is what hands the track over
  and turns the native scrolling off.
--------------------------------------------------------------*/
.sx-showcase__head {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sx-showcase__head .sx-lead {
    margin-inline: auto;
    max-width: 34rem;
}

.sx-showcase__cta {
    margin-top: 1.75rem;
}

.sx-showcase {
    position: relative;
}

.sx-showcase__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sx-showcase__viewport::-webkit-scrollbar {
    display: none;
}

.sx-showcase.is-live .sx-showcase__viewport {
    overflow: hidden;
    scroll-snap-type: none;
}

.sx-showcase .swiper-wrapper {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.sx-showcase.is-live .swiper-wrapper {
    /* Swiper spaces the slides itself; a flex gap on top double-counts it */
    gap: 0;
}

.sx-showcase__slide {
    flex: 0 0 auto;
    width: min(84vw, 62rem);
    height: auto;
    scroll-snap-align: center;
}

/* The neighbours are held back so the middle one is unmistakably the one
   being looked at - but only a little: the peek is the point, and a
   neighbour dimmed to nothing is just a margin. */
.sx-showcase.is-live .swiper-slide {
    opacity: .38;
    transform: scale(.975);
    transition: opacity .55s var(--as-cube-1), transform .55s var(--as-cube-1);
}

.sx-showcase.is-live .swiper-slide-active {
    opacity: 1;
    transform: none;
}

.sx-showcase .sx-case,
.sx-showcase .sx-tpl {
    margin: 0;
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

.sx-showcase .sx-case__thumb,
.sx-showcase .sx-tpl__thumb {
    position: relative;
    display: block;
    margin: 0;
    border-radius: 0;
}

.sx-showcase .sx-case__thumb img,
.sx-showcase .sx-tpl__thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    opacity: 1;
}

/* The bars sit over the top of the picture, and the pictures are
   screenshots - several of them white. A gradient down from the top edge
   gives them something to be read against whatever the shot happens to be,
   and reads as the card's own vignette rather than as a device. */
.sx-showcase .sx-case__thumb::after,
.sx-showcase .sx-tpl__thumb::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(70px, 10vw, 120px);
    /* Held dark for the first half rather than fading immediately: the bars
       sit 22px in, and several of these screenshots are white pages. */
    background: linear-gradient(to bottom,
        rgba(11, 3, 9, .72) 0%,
        rgba(11, 3, 9, .46) 42%,
        rgba(11, 3, 9, .16) 74%,
        transparent 100%);
    pointer-events: none;
}

.sx-showcase .sx-case__body,
.sx-showcase .sx-tpl__body {
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* A template's description is written for a card in a grid, where three or
   four lines are the point. Across a 62rem slide the same words are one very
   long line and the card grows a screen taller than its picture. Two lines
   here; the whole thing is on the template's own page. */
.sx-showcase .sx-tpl__body > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 46rem;
}

/* The slide is a card, and a card that lifts on hover inside a slider
   fights the slider. */
.sx-showcase .sx-tpl:hover,
.sx-showcase .sx-case:hover {
    transform: none;
    background: var(--sx-surface);
    border-color: var(--sx-line);
}

.sx-showcase .sx-case__title,
.sx-showcase .sx-tpl__head h3 {
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
}

/* Two class names deep, and physical insets, both on purpose. Swiper stamps
   `.swiper-pagination-bullets.swiper-pagination-horizontal` onto whatever
   element it is given and that rule sets top/bottom/left/width - so a single
   class loses on specificity, and a logical inset only overrides two of the
   four it sets, leaving the box stretched across the section and dragged
   half a screen sideways by the centring transform.

   left:50% with a -50% translate centres the same way in both directions,
   so there is no RTL twin to keep in step either. */
.sx-showcase .sx-showcase__bars {
    position: absolute;
    top: clamp(14px, 2.2vw, 26px);
    bottom: auto;
    left: 50%;
    right: auto;
    width: auto;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    z-index: 3;
}

.sx-showcase__bar {
    display: block;
    width: 20px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .42);
    /* belt and braces over a white screenshot */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: width .4s var(--as-cube-1), background-color .4s ease;
}

.sx-showcase__bar.is-on {
    width: 40px;
    background: var(--sx-bright);
}

.sx-showcase__btn {
    position: absolute;
    inset-block-start: clamp(70px, 14vw, 190px);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--sx-line-strong);
    border-radius: 50%;
    background: rgba(20, 7, 17, .6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--sx-bright);
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
}

.sx-showcase__btn:hover {
    background: rgba(20, 7, 17, .85);
    border-color: rgba(255, 255, 255, .34);
}

.sx-showcase__btn--prev {
    inset-inline-start: clamp(.75rem, 4vw, 3rem);
}

.sx-showcase__btn--next {
    inset-inline-end: clamp(.75rem, 4vw, 3rem);
}

[dir="rtl"] .sx-showcase__btn i {
    transform: scaleX(-1);
}

.sx-showcase__btn.swiper-button-disabled {
    opacity: .25;
    pointer-events: none;
}

@media (max-width: 767px) {
    .sx-showcase__slide {
        width: 88vw;
    }

    .sx-showcase__btn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sx-showcase.is-live .swiper-slide,
    .sx-showcase__bar {
        transition-duration: .01ms !important;
    }
}

/*--------------------------------------------------------------
  13.17 The two things that float

  Back-to-top and the chat launcher were both pinned to the bottom-right
  corner — the theme put its arrow at right:30px/bottom:30px and the chat
  widget sits at 1rem — so the chat button covered the arrow completely and
  the arrow was unclickable on every page.

  They are one column now: the chat stays where it is and the arrow stacks
  above it, sharing its inline edge. Both insets are logical, so on the
  Arabic pages the column moves to the left where the rest of the page went.
--------------------------------------------------------------*/
.back-to-top {
    /* the theme's physical insets, undone */
    right: auto;
    bottom: auto;
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 3.9rem);
    width: 46px;
    height: 46px;
    line-height: 44px;
    text-align: center;
    border-radius: 50% !important;
    /* under the chat panel, which covers the screen on a phone, and over
       everything else */
    z-index: 999998;
}

/* While the chat is open the arrow has nothing to scroll and would sit on
   top of the panel's header. :has() reaches it from the other side of the
   tree, which a sibling selector cannot: the launcher is outside
   .page-wrapper and the arrow is inside it. */
body:has(.sx-chat.is-open) .back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*--------------------------------------------------------------
  13.18 The loading screen

  The mark draws itself. Each letter is an outline traced from the artwork
  (`_build/logo_svg.py` → `wordmark-paths.json`, inlined by `preloader()`),
  stroked on left to right and then inked in. It used to be the word
  assembling out of slices of the picture, which is a good effect and is
  still what the header does — on a full screen it read as text arriving
  rather than as a mark being made.

  Every path carries its own length in `--len`, measured at trace time. That
  is the whole reason this needs no script: `stroke-dasharray` has to equal
  the path's length for the dash to cover it exactly, the browser can only
  measure that after layout, and a number in the markup is available on the
  first frame.

  It is over at about 730ms, comfortably inside the 980ms the curtain waits
  anyway - the draw should finish before the page is ready, not hold it up.
--------------------------------------------------------------*/
.sx-load__mark {
    display: block;
    width: clamp(200px, 46vw, 340px);
    height: auto;
    overflow: visible;
}

.sx-load__mark path {
    fill: var(--sx-bright);
    stroke: var(--sx-bright);
    stroke-width: 1.5;
    stroke-linejoin: round;
    /* keep the drawn line one screen pixel whatever the mark is scaled to */
    vector-effect: non-scaling-stroke;
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    fill-opacity: 0;
    animation:
        sx-draw .38s cubic-bezier(.6, .02, .3, 1) both,
        sx-ink .22s ease-out both;
    animation-delay:
        calc(var(--i) * 30ms),
        calc(var(--i) * 30ms + .24s);
}

/* Drawn from the side the page is read from. */
[dir="rtl"] .sx-load__mark path {
    animation-delay:
        calc(var(--j) * 30ms),
        calc(var(--j) * 30ms + .24s);
}

@keyframes sx-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes sx-ink {
    to { fill-opacity: 1; }
}

/* Asked for less movement: the mark is simply there. */
@media (prefers-reduced-motion: reduce) {
    .sx-load__mark path {
        animation: none;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

/*--------------------------------------------------------------
  13.19 The products, as a row of three

  The three things this studio owns and runs. They used to be the full-width
  alternating bands that the Work page still uses, which is right on a page
  someone reached by going looking for the work and far too much room on a
  home page that has already shown nineteen templates above.

  Three equal cards, the picture at the top of each. It says "and we build
  our own" in one screen instead of three.
--------------------------------------------------------------*/
.sx-cases__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
    align-items: stretch;
}

.sx-cases--grid .section-title {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sx-cases--grid .section-title .sx-lead {
    margin-inline: auto;
    max-width: 36rem;
}

.sx-cases__grid .sx-case {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--sx-surface);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    overflow: hidden;
    transition: background-color .3s ease, border-color .3s ease,
        transform .3s var(--as-cube-1);
}

.sx-cases__grid .sx-case:hover {
    background: var(--sx-surface-2);
    border-color: var(--sx-line-strong);
    transform: translateY(-4px);
}

.sx-cases__grid .sx-case__thumb {
    display: block;
    margin: 0;
    border-radius: 0;
}

.sx-cases__grid .sx-case__thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    opacity: .9;
    transition: opacity .35s ease;
}

.sx-cases__grid .sx-case:hover .sx-case__thumb img {
    opacity: 1;
}

.sx-cases__grid .sx-case__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .6rem;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

.sx-cases__grid .sx-case__title {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.sx-cases__grid .sx-case__actions {
    margin-top: auto;
    padding-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

/* Three cards in a row leave no space for two controls side by side. The
   card is the link; the text link beside it is the only one that stays. */
.sx-cases__grid .sx-btn {
    padding: .7rem 1.15rem;
    font-size: .875rem;
}

@media (prefers-reduced-motion: reduce) {
    .sx-cases__grid .sx-case,
    .sx-cases__grid .sx-case__thumb img {
        transition-duration: .01ms !important;
    }

    .sx-cases__grid .sx-case:hover {
        transform: none;
    }
}

/*--------------------------------------------------------------
  13.12 Motion

  Everything above animates by moving or fading, both of which a visitor can
  turn off. Nothing here is load-bearing: with motion reduced the page is the
  same page, already in its finished state.
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    .sx-pill,
    .sx-pill i,
    .sx-link i,
    .sx-tpl,
    .sx-case,
    .service-box-items,
    .team-box-items,
    .pricing-box-items {
        transition-duration: .01ms !important;
    }

    .sx-pill:hover,
    .sx-tpl:hover,
    .sx-case:hover,
    .service-box-items:hover,
    .team-box-items:hover,
    .pricing-box-items:hover {
        transform: none;
    }
}

/* The track's fill ran rose -> rose -> ground, which put the darkest part of
   the gradient at the *leading* edge: the bar looked like it was evaporating
   as it advanced rather than filling. It runs into the light now. */
.sx-load__bar {
    background: linear-gradient(90deg, var(--sx-rose-deep), var(--sx-rose) 55%, var(--sx-bright));
}

[dir="rtl"] .sx-load__bar {
    background: linear-gradient(270deg, var(--sx-rose-deep), var(--sx-rose) 55%, var(--sx-bright));
}