/* ==========================================================================
   LayerStack public site
   Bespoke dark theme. No CSS framework is loaded on the public pages.
   ========================================================================== */

:root {
    --ls-bg: #05060f;
    --ls-bg-alt: #070a17;
    --ls-surface: #0b0e1d;
    --ls-surface-2: #101527;
    --ls-border: #1b2138;
    --ls-border-soft: #151a2c;

    --ls-text: #e8ecf8;
    --ls-text-muted: #8d97b5;
    --ls-text-dim: #626d8c;

    --ls-accent: #3b82f6;
    --ls-accent-2: #8b5cf6;
    --ls-accent-3: #22d3ee;

    --ls-radius: 14px;
    --ls-radius-lg: 22px;
    --ls-maxw: 1200px;

    --ls-gradient: linear-gradient(103deg, var(--ls-accent) 0%, var(--ls-accent-2) 100%);
    --ls-shadow: 0 22px 60px -20px rgba(0, 0, 0, .85);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    /* clip, not hidden: kills the decorative hero-plane overflow that leaks past
       the start edge under dir="rtl" without turning the root into a scroll
       container (which would break the sticky header). */
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--ls-bg);
    color: var(--ls-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

h1, h2, h3, h4 {
    margin: 0 0 .5rem;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
}

p { margin: 0 0 1rem; }

/* ---------- Layout primitives ---------- */

.ls-container {
    width: 100%;
    max-width: var(--ls-maxw);
    margin-inline: auto;
    padding-inline: 24px;
}

.ls-section { padding: 96px 0; }
.ls-section--tight { padding: 64px 0; }
.ls-section--alt { background: var(--ls-bg-alt); }

.ls-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ls-accent-2);
    margin-bottom: 18px;
}

.ls-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ls-accent-2);
}

.ls-section-title {
    font-size: clamp(1.7rem, 3.4vw, 2.45rem);
    max-width: 22ch;
}

.ls-section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
}

.ls-section-head p {
    color: var(--ls-text-muted);
    max-width: 46ch;
    margin: 0;
    font-size: .94rem;
}

.ls-gradient-text {
    background: var(--ls-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Buttons ---------- */

.ls-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    white-space: nowrap;
}

.ls-btn:hover { transform: translateY(-2px); }

.ls-btn--primary {
    background: var(--ls-gradient);
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(59, 130, 246, .75);
}

.ls-btn--ghost {
    background: transparent;
    border-color: var(--ls-border);
    color: var(--ls-text);
}

.ls-btn--ghost:hover { border-color: var(--ls-accent); background: rgba(59, 130, 246, .08); }

.ls-btn--sm { padding: 9px 18px; font-size: .84rem; }

/* ---------- Header ---------- */

.ls-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(5, 6, 15, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ls-border-soft);
}

.ls-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 74px;
}

.ls-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }
.ls-logo img { height: 34px; width: auto; display: block; }

.ls-nav { display: flex; gap: 28px; margin-inline: auto; }

.ls-nav a {
    font-size: .88rem;
    color: var(--ls-text-muted);
    position: relative;
    padding: 6px 0;
    transition: color .18s ease;
}

.ls-nav a:hover, .ls-nav a.is-active { color: var(--ls-text); }

.ls-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ls-gradient);
}

.ls-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--ls-border);
    border-radius: 9px;
    color: var(--ls-text);
    width: 40px; height: 40px;
    font-size: 1.15rem;
    cursor: pointer;
}

/* ---------- Hero ---------- */

.ls-hero {
    position: relative;
    padding: 84px 0 72px;
    overflow: hidden;
}

.ls-hero::before {
    content: "";
    position: absolute;
    top: -180px; inset-inline-end: -120px;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(99, 102, 241, .22), transparent 68%);
    pointer-events: none;
}

.ls-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 56px;
    align-items: center;
}

.ls-hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.5rem);
    margin-bottom: 20px;
}

.ls-hero__subtitle {
    color: var(--ls-text-muted);
    font-size: 1.02rem;
    max-width: 52ch;
    margin-bottom: 32px;
}

.ls-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 54px; }

/* ---------- Trusted by ---------- */

.ls-trusted__label {
    font-size: .68rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ls-text-dim);
    margin-bottom: 18px;
}

.ls-trusted__list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 42px;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0;
}

.ls-trusted__list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ls-text-dim);
    font-size: .88rem;
    font-weight: 500;
    transition: color .18s ease;
}

.ls-trusted__list li:hover { color: var(--ls-text-muted); }

.ls-trusted__list li::before {
    content: "";
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .7;
}

/* ---------- 3D layer diagram ---------- */

.ls-stack {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
}

.ls-stack__planes {
    position: relative;
    height: 420px;
    perspective: 1300px;
}

.ls-plane {
    position: absolute;
    left: 50%;
    width: 260px; height: 132px;
    margin-left: -130px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    transform: translateY(var(--y)) rotateX(58deg) rotateZ(-45deg);
    transform-style: preserve-3d;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .92);
    box-shadow: 0 26px 46px -22px rgba(0, 0, 0, .9);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.ls-stack:hover .ls-plane { transform: translateY(var(--y)) rotateX(54deg) rotateZ(-45deg) translateZ(18px); }

.ls-plane i { transform: rotateZ(45deg) rotateX(-58deg); }

.ls-plane--1 { --y: 12px;  background: linear-gradient(135deg, rgba(139, 92, 246, .85), rgba(99, 102, 241, .5)); }
.ls-plane--2 { --y: 86px;  background: linear-gradient(135deg, rgba(99, 102, 241, .8),  rgba(59, 130, 246, .45)); }
.ls-plane--3 { --y: 160px; background: linear-gradient(135deg, rgba(59, 130, 246, .78), rgba(34, 211, 238, .42)); }
.ls-plane--4 { --y: 234px; background: linear-gradient(135deg, rgba(34, 211, 238, .62), rgba(59, 130, 246, .3)); }
.ls-plane--5 { --y: 308px; background: linear-gradient(135deg, rgba(59, 130, 246, .42), rgba(139, 92, 246, .24)); }

.ls-stack__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }

.ls-stack__legend li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }

.ls-stack__num {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ls-text-dim);
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ls-stack__name { font-size: .86rem; font-weight: 600; display: block; }
.ls-stack__desc { font-size: .74rem; color: var(--ls-text-dim); line-height: 1.5; }

/* ---------- Cards ---------- */

.ls-grid { display: grid; gap: 20px; }
.ls-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ls-grid--6 { grid-template-columns: repeat(6, 1fr); }
.ls-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ls-card {
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius);
    padding: 26px 22px;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* min-width:0 keeps the card inside its grid track (the full-bleed image would
       otherwise stretch it and spill past the start edge under dir="rtl");
       overflow:hidden clips that image to the rounded corners. */
    min-width: 0;
    overflow: hidden;
}

.ls-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, .55);
    background: var(--ls-surface-2);
}

.ls-card__icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: rgba(99, 102, 241, .13);
    border: 1px solid rgba(99, 102, 241, .28);
    color: #a5b4fc;
    font-size: 1.2rem;
    margin-bottom: 18px;
}

/* Card image: full-bleed across the top, cancelling the card's own padding.
   max-width:none beats the global img{max-width:100%} so the negative margins
   can actually reach the card edges; the card's overflow:hidden rounds the top. */
.ls-card__media {
    display: block;
    width: calc(100% + 44px);
    max-width: none;
    margin: -26px -22px 18px;
    height: 170px;
    object-fit: cover;
    border-bottom: 1px solid var(--ls-border);
}

.ls-card h3 { font-size: 1rem; margin-bottom: 10px; }

.ls-card p {
    font-size: .84rem;
    color: var(--ls-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

.ls-card__more { color: var(--ls-accent); font-size: 1rem; }

/* ---------- Process ---------- */

.ls-process { display: grid; grid-template-columns: minmax(230px, .8fr) 2.2fr; gap: 48px; align-items: center; }

.ls-process__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
}

/* Connector rail behind the four icons. */
.ls-process__steps::before {
    content: "";
    position: absolute;
    top: 27px; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ls-border) 12%, var(--ls-border) 88%, transparent);
}

.ls-step { position: relative; text-align: start; }

.ls-step__icon {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    color: #a5b4fc;
    font-size: 1.25rem;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.ls-step__num {
    font-size: .76rem;
    font-weight: 700;
    color: var(--ls-accent);
    display: block;
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}

.ls-step h4 { font-size: .95rem; margin-bottom: 7px; }
.ls-step p { font-size: .78rem; color: var(--ls-text-muted); line-height: 1.55; margin: 0; }

/* ---------- Case studies ---------- */

.ls-work { display: flex; flex-direction: column; overflow: hidden; padding: 0; }

.ls-work__thumb {
    aspect-ratio: 16 / 10;
    background: linear-gradient(140deg, #0f1730, #1a1040);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.ls-work__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder shown until a real thumbnail is uploaded in the CMS. */
.ls-work__thumb-fallback {
    display: grid;
    place-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .32);
    font-size: 1.9rem;
}

.ls-work__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }

.ls-work__cat {
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ls-accent);
    font-weight: 700;
    margin-bottom: 9px;
}

.ls-work__body h3 { font-size: 1.02rem; margin-bottom: 9px; }
.ls-work__body p { font-size: .82rem; color: var(--ls-text-muted); line-height: 1.6; flex: 1; margin-bottom: 14px; }

.ls-work__metric {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--ls-accent-3);
    background: rgba(34, 211, 238, .08);
    border: 1px solid rgba(34, 211, 238, .2);
    border-radius: 999px;
    padding: 4px 11px;
    margin-bottom: 14px;
    align-self: flex-start;
}

.ls-work__link { font-size: .82rem; font-weight: 600; color: var(--ls-accent); display: inline-flex; gap: 7px; align-items: center; }

/* ---------- Technologies ---------- */

.ls-tech { display: grid; grid-template-columns: minmax(220px, .85fr) 2.15fr; gap: 44px; align-items: center; }

.ls-tech__list {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 30px;
    justify-content: flex-end;
}

.ls-tech__item { display: grid; justify-items: center; gap: 9px; width: 66px; }

.ls-tech__badge {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-border);
    font-size: .74rem;
    font-weight: 700;
    color: #a5b4fc;
    transition: transform .2s ease, border-color .2s ease;
    overflow: hidden;
}

.ls-tech__item:hover .ls-tech__badge { transform: translateY(-4px); border-color: rgba(99, 102, 241, .6); }
.ls-tech__badge img { width: 26px; height: 26px; object-fit: contain; }
.ls-tech__name { font-size: .7rem; color: var(--ls-text-muted); text-align: center; }

/* ---------- Stats ---------- */

.ls-stats { display: grid; grid-template-columns: minmax(240px, .9fr) 2.1fr; gap: 44px; align-items: center; }

.ls-stat {
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius);
    padding: 24px 20px;
}

.ls-stat__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(99, 102, 241, .13);
    border: 1px solid rgba(99, 102, 241, .28);
    color: #a5b4fc;
    margin-bottom: 16px;
}

.ls-stat__value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ls-stat__label { font-size: .84rem; font-weight: 600; margin: 5px 0 7px; }
.ls-stat__note { font-size: .74rem; color: var(--ls-text-dim); line-height: 1.5; }

/* ---------- CTA + contact ---------- */

.ls-cta {
    position: relative;
    border-radius: var(--ls-radius-lg);
    border: 1px solid rgba(99, 102, 241, .34);
    background: linear-gradient(115deg, #10173a 0%, #1a1145 55%, #0c1230 100%);
    padding: 46px;
    overflow: hidden;
}

.ls-cta::after {
    content: "";
    position: absolute;
    inset-inline-end: -80px; top: -80px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(139, 92, 246, .3), transparent 68%);
    pointer-events: none;
}

.ls-cta__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; }
.ls-cta h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.ls-cta p { color: #b9c2e0; font-size: .92rem; margin: 0; }

.ls-form { display: grid; gap: 13px; }
.ls-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.ls-input, .ls-select, .ls-textarea {
    width: 100%;
    background: rgba(5, 6, 15, .58);
    border: 1px solid var(--ls-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--ls-text);
    font-family: inherit;
    font-size: .88rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ls-input:focus, .ls-select:focus, .ls-textarea:focus {
    outline: none;
    border-color: var(--ls-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}

.ls-input::placeholder, .ls-textarea::placeholder { color: var(--ls-text-dim); }
.ls-textarea { resize: vertical; min-height: 104px; }
.ls-select option { background: var(--ls-surface); color: var(--ls-text); }

/* The honeypot must be invisible to humans but still fillable by a naive bot,
   so it is clipped to nothing rather than display:none. The old technique moved
   it to left:-9999px, which under dir="rtl" opened ~10000px of horizontal scroll
   because an absolutely positioned box escapes the body's overflow clip. This
   WCAG "visually hidden" pattern occupies no scrollable space in either direction. */
.ls-honeypot {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Flash messages ---------- */

.ls-flash {
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 11px;
    padding: 13px 17px;
    font-size: .88rem;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.ls-flash--success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .34); color: #6ee7b7; }
.ls-flash--error   { background: rgba(239, 68, 68, .1);  border-color: rgba(239, 68, 68, .34);  color: #fca5a5; }

/* ---------- Footer ---------- */

.ls-footer { border-top: 1px solid var(--ls-border-soft); background: var(--ls-bg-alt); padding: 62px 0 26px; }

.ls-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
    gap: 34px;
    margin-bottom: 42px;
}

.ls-footer h5 {
    font-size: .8rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--ls-text);
}

.ls-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ls-footer li, .ls-footer p { font-size: .82rem; color: var(--ls-text-muted); }
.ls-footer a:hover { color: var(--ls-text); }
.ls-footer__tagline { max-width: 30ch; line-height: 1.6; margin: 14px 0 20px; }

.ls-social { display: flex; gap: 11px; }

.ls-social a {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: grid; place-items: center;
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    color: var(--ls-text-muted);
    transition: color .18s ease, border-color .18s ease;
}

.ls-social a:hover { color: var(--ls-text); border-color: var(--ls-accent); }

.ls-footer__contact { display: grid; gap: 10px; }
.ls-footer__contact li { display: flex; align-items: center; gap: 9px; }

.ls-subscribe { display: flex; gap: 8px; margin-top: 16px; }
.ls-subscribe .ls-input { padding: 10px 13px; font-size: .82rem; }

.ls-subscribe button {
    flex: 0 0 auto;
    width: 42px;
    border: none;
    border-radius: 10px;
    background: var(--ls-gradient);
    color: #fff;
    cursor: pointer;
}

.ls-footer__bottom {
    border-top: 1px solid var(--ls-border-soft);
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--ls-text-dim);
}

/* ---------- Scroll reveal ---------- */

.ls-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.ls-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .ls-grid--6 { grid-template-columns: repeat(3, 1fr); }
    .ls-hero__grid { grid-template-columns: 1fr; }
    .ls-stack { justify-items: center; }
    .ls-process, .ls-tech, .ls-stats { grid-template-columns: 1fr; }
    .ls-tech__list { justify-content: flex-start; }
    .ls-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .ls-section { padding: 68px 0; }
    .ls-nav {
        display: none;
        position: absolute;
        top: 74px; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--ls-bg-alt);
        border-bottom: 1px solid var(--ls-border);
        padding: 10px 24px 18px;
    }
    .ls-nav.is-open { display: flex; }
    .ls-nav a { padding: 11px 0; border-bottom: 1px solid var(--ls-border-soft); }
    .ls-nav-toggle { display: grid; place-items: center; margin-inline-start: auto; }
    .ls-header__inner { position: relative; }
    .ls-header .ls-btn--primary { display: none; }
    .ls-grid--3, .ls-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ls-process__steps { grid-template-columns: repeat(2, 1fr); }
    .ls-process__steps::before { display: none; }
    .ls-cta { padding: 32px 24px; }
    .ls-cta__grid { grid-template-columns: 1fr; }
    .ls-footer__grid { grid-template-columns: repeat(2, 1fr); }

    /* Stack the hero diagram above its legend instead of squeezing them side by
       side; give the (otherwise zero-width) plane container a width so the
       absolutely-positioned planes centre on the column. */
    .ls-stack { grid-template-columns: 1fr; gap: 4px; }
    .ls-stack__planes { width: 100%; }
    .ls-stack__legend { max-width: 340px; margin-inline: auto; }
}

@media (max-width: 620px) {
    .ls-grid--3, .ls-grid--4, .ls-grid--6 { grid-template-columns: 1fr; }
    .ls-process__steps { grid-template-columns: 1fr; }
    .ls-form__row { grid-template-columns: 1fr; }
    .ls-footer__grid { grid-template-columns: 1fr; }
    .ls-stack__planes { height: 380px; transform: scale(.86); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .ls-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Language switcher and right-to-left support

   Flexbox and grid mirror themselves under dir="rtl", and the physical offsets
   above were converted to logical properties, so this section only has to cover
   what direction-awareness cannot infer: typography, and glyphs that encode a
   reading direction.
   --------------------------------------------------------------------------- */

.ls-langswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ls-border);
    border-radius: 999px;
}

.ls-langswitch__item {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ls-text-muted);
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.ls-langswitch__item:hover { color: var(--ls-text); }

.ls-langswitch__item.is-active {
    color: #fff;
    background: var(--ls-gradient);
}

/* A system Arabic stack rather than a webfont: the site currently loads no
   external resources, and pulling one in for this would be the first. Swap in
   Cairo or Tajawal here if the brand calls for it. */
[dir="rtl"] body {
    font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Dubai", sans-serif;
}

/* Arabic renders taller than Latin at the same size; a little extra leading
   keeps the headline blocks from feeling cramped. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] .ls-section-title { line-height: 1.35; }

/* Arrows here mean "forward", not "east", so they follow the reading direction.
   Scoped to the arrow glyphs on purpose: brand marks and the social icons must
   not be mirrored. */
[dir="rtl"] .bi-arrow-right { display: inline-block; transform: scaleX(-1); }

/* The mobile nav toggle is pinned to the far edge, which mirrors correctly, but
   the panel itself is absolutely positioned against both edges and needs no
   change. Listed here so the next person does not go looking. */