/* ==========================================================================
   NSS — Next Smart Solutions
   Design System Core  ·  "Signal & Structure"
   --------------------------------------------------------------------------
   IMPORTANT: every --fs-* token below is copied 1:1 from the CURRENT website
   CSS. Font sizes are intentionally NOT redesigned. Only color, space,
   surface, motion and layout are new.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
    /* Brand — sampled directly from the NSS logo artwork (#18A0C8) */
    --nss-cyan: #18A0C8;
    --nss-cyan-300: #7FD2E8;
    --nss-cyan-400: #3FBBDC;
    --nss-cyan-600: #1189AB;
    --nss-cyan-700: #0C6E8C;
    --nss-cyan-rgb: 24, 160, 200;

    --nss-deep: #0B3C4E;
    --nss-deep-600: #0F4A5F;
    --nss-deep-800: #082E3C;
    --nss-ink: #10242D;

    --nss-slate: #5B7183;
    --nss-slate-300: #93A7B5;
    --nss-line: #E4EEF3;
    /* the whole site sits on white — no tinted section backgrounds */
    --nss-surface: #FFFFFF;
    --nss-surface-2: #FFFFFF;
    --nss-white: #FFFFFF;

    /* Signal gradients */
    --grad-brand: linear-gradient(135deg, #3FBBDC 0%, #18A0C8 45%, #0C6E8C 100%);
    --grad-deep: linear-gradient(160deg, #0F4A5F 0%, #0B3C4E 55%, #082E3C 100%);
    --grad-glass: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
    --grad-line: linear-gradient(90deg, transparent, var(--nss-cyan), transparent);

    /* Elevation */
    --sh-xs: 0 1px 2px rgba(11, 60, 78, .06);
    --sh-sm: 0 4px 14px rgba(11, 60, 78, .08);
    --sh-md: 0 14px 36px rgba(11, 60, 78, .10);
    --sh-lg: 0 28px 70px rgba(11, 60, 78, .16);
    --sh-cyan: 0 18px 44px rgba(24, 160, 200, .28);

    /* Radii */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Rhythm */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 48px;
    --sp-6: 64px;
    --sp-7: 88px;
    --sp-8: 120px;
    --shell: 1320px;

    /* Section rhythm — kept deliberately tight at the client's request */
    --sec-pad: 26px;
    --sec-pad-tight: 14px;
    --head-gap: 16px;   /* space under a section header */

    /* Section heading scale (new hierarchy)
       --fs-section-name : the section's own name, e.g. "About the Company"
       --fs-section-lead : the descriptive line under it                    */
    --fs-section-name: 1.95rem;
    --fs-section-name-md: 1.7rem;
    --fs-section-name-sm: 1.45rem;
    --fs-section-lead: 1rem;
    --fs-section-lead-sm: .92rem;

    /* Logo background — the gradient behind the NSS wordmark */
    --grad-logo: linear-gradient(160deg, #13B0CF 0%, #18A2C6 52%, #2595C7 100%);

    /* Motion */
    --e-out: cubic-bezier(.22, 1, .36, 1);
    --e-io: cubic-bezier(.65, 0, .35, 1);
    --t-fast: .25s;
    --t-base: .45s;
    --t-slow: .8s;

    /* ---------- FONT SIZES — PRESERVED FROM THE LIVE SITE ---------------- */
    /* hero / carousel (style.css) */
    --fs-hero: 4.2rem;
    --fs-hero-xxl: 6.6rem;
    --fs-hero-xl: 5.5rem;
    --fs-hero-lg: 4.5rem;
    --fs-hero-md: 4rem;
    --fs-hero-sm: 3.5rem;
    --fs-hero-xs: 2.5rem;
    --fs-hero-xxs: 2rem;
    --fs-hero-sub: 1.25em;
    --fs-hero-sub-sm: 1.5rem;
    --fs-hero-sub-xs: 1.2rem;
    --fs-hero-sub-xxs: 1rem;
    --fs-hero-p: 1.1rem;
    --fs-hero-p-sm: 1rem;
    --fs-hero-p-xs: 0.9rem;

    /* navigation (navbar.css) */
    --fs-nav-brand: 1.5rem;
    --fs-nav-link: 0.7rem;
    --fs-nav-social: 1.2rem;
    --fs-nav-lang: 0.7rem;

    /* section headers (home.blade.php inline + pages) */
    --fs-section-title: 2rem;
    --fs-section-title-lg: 2.2rem;
    --fs-section-title-sm: 1.8rem;
    --fs-section-sub: 1.1rem;
    --fs-section-sub-sm: 1rem;

    /* about (about-us.css) */
    --fs-about-title: 2.5rem;
    --fs-about-title-md: 2rem;
    --fs-about-title-sm: 1.8rem;
    --fs-about-title-xs: 1.5rem;
    --fs-about-desc: 13px;
    --fs-about-desc-sm: 0.95rem;
    --fs-feature-icon: 1.3rem;
    --fs-feature-icon-sm: 1.1rem;
    --fs-feature-title: 15px;
    --fs-feature-title-sm: 1rem;
    --fs-feature-text: 0.9rem;
    --fs-feature-text-sm: 0.85rem;

    /* vision & mission (vision-mission.css) */
    --fs-vm-section: 2.5rem;
    --fs-vm-title: 1.8rem;
    --fs-vm-title-sm: 1.5rem;
    --fs-vm-title-xs: 1.3rem;
    --fs-vm-desc: 1rem;
    --fs-vm-desc-sm: 0.95rem;
    --fs-vm-desc-xs: 0.9rem;
    --fs-vm-icon: 1.5rem;
    --fs-vm-icon-sm: 1.2rem;
    /* vision-mission partial (forms/vision-mission-form.blade.php) */
    --fs-vmcard-title: 1.05rem;

    /* counters (counter.css) */
    --fs-counter-title: 1.5rem;
    --fs-counter-sub: 1.1rem;
    --fs-counter-num: 2.5rem;
    --fs-counter-num-sm: 2rem;
    --fs-counter-icon: 1.5rem;
    --fs-counter-label: 1.1rem;
    --fs-counter-label-sm: 1rem;

    /* partners (partners.css) */
    --fs-partners-title: 1.5rem;
    --fs-partners-sub: 1.1rem;

    /* contact (contact.css + style.css) */
    --fs-contact-title: 1.5rem;
    --fs-contact-sub: 1rem;
    --fs-contact-h3: 1rem;
    --fs-form-control: 1rem;
    --fs-form-submit: 1.1rem;
    --fs-form-error: 0.875rem;
    --fs-office-h4: 1.6rem;
    --fs-office-h5: 1.2rem;
    --fs-office-item: 1rem;

    /* business lines (sections/business-lines.blade.php) */
    --fs-bl-badge: 2.5rem;
    --fs-bl-badge-sm: 2rem;
    --fs-bl-badge-xs: 1.8rem;
    --fs-bl-label: 0.9rem;
    --fs-bl-label-sm: 0.8rem;
    --fs-bl-label-xs: 0.7rem;
    --fs-bl-card-title: 1.1rem;
    --fs-bl-card-title-sm: 1rem;
    --fs-bl-card-text: 0.85rem;
    --fs-bl-card-text-sm: 0.8rem;
    --fs-bl-card-btn: 0.8rem;

    /* services pages (services/index + details) */
    --fs-svc-hero-title: 1.5rem;
    --fs-svc-hero-sub: 1rem;
    --fs-svc-stat-num: 2rem;
    --fs-svc-stat-label: 1rem;
    --fs-svc-card-title: 1.5rem;
    --fs-svc-icon: 2rem;
    --fs-svc-feature-title: 1.5rem;
    --fs-svc-crumb: 0.9rem;
    --fs-svc-related-title: 1.3rem;
    --fs-btn-sm: 0.9rem;

    /* projects pages (projects/index + details) */
    --fs-page-title: 3.5rem;
    --fs-page-title-sm: 2.5rem;
    --fs-page-title-xs: 2rem;
    --fs-crumb: 0.9rem;
    --fs-prj-title: 1.2rem;
    --fs-prj-title-sm: 1.3rem;
    --fs-prj-type: 0.9rem;
    --fs-prj-desc: 0.9rem;
    --fs-prj-detail-title: 2.5rem;
    --fs-prj-detail-desc: 1.1rem;
    --fs-prj-related-title: 2.5rem;
    --fs-prj-related-sub: 1.1rem;
    --fs-prj-excerpt: 0.95rem;

    /* about/vision form pages */
    --fs-form-page-title: 1.5rem;
    --fs-aboutcard-heading: 1.25rem;
    --fs-aboutcard-text: 0.98rem;

    /* decorative watermark (counter.css ::before scale) */
    --fs-watermark: 15rem;
    --fs-watermark-sm: 6.6rem;

    /* generic body */
    --fs-body: 1rem;
    --fs-small: 0.9rem;
    --fs-xsmall: 0.8rem;
    --fs-micro: 0.75rem;
}

/* ---------- 2. RESET / BASE --------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto; /* Lenis owns scrolling */
    /* NB: do NOT clip overflow here. Clipping on <html> makes <body> its own
       scroll container, which silently kills every position:sticky on the
       page (the About media column among them). Sideways overflow is handled
       on <main> with overflow-x:clip, which clips without creating one. */
}

body {
    margin: 0;
    background: var(--nss-white);
    color: var(--nss-ink);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.rtl {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--nss-deep);
}

p { margin: 0 0 1em; }

::selection {
    background: var(--nss-cyan);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nss-surface-2); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--nss-cyan), var(--nss-cyan-700));
    border-radius: var(--r-pill);
}

/* ---------- 3. LAYOUT SHELL --------------------------------------------- */
.nss-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Compact vertical rhythm, matching the density of the previous site */
.nss-section {
    position: relative;
    padding-block: var(--sec-pad);
    overflow: clip;
    background: var(--nss-white);
}

.nss-section--tight { padding-block: var(--sec-pad-tight); }

/* Both modifiers stay white now — the site is a single white canvas and
   depth comes from borders, shadows and the brand accent instead. */
.nss-section--surface,
.nss-section--deep { background: var(--nss-white); }

.nss-section--deep { color: var(--nss-ink); }
.nss-section--deep h1,
.nss-section--deep h2,
.nss-section--deep h3,
.nss-section--deep h4 { color: var(--nss-deep); }

/* Blueprint grid — engineering signature of the brand */
.nss-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--nss-cyan-rgb), .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--nss-cyan-rgb), .05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.nss-section > * { position: relative; z-index: 1; }

/* Glow bloom */
.nss-bloom {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
    pointer-events: none;
    z-index: 0;
}
.nss-bloom--cyan { background: radial-gradient(circle, #35C6E3 0%, transparent 70%); }
.nss-bloom--deep { background: radial-gradient(circle, #0A6F8C 0%, transparent 70%); }

/* ---------- 4. SECTION HEADERS ------------------------------------------ */
/* Hierarchy: the SECTION NAME ("About the Company") is the loud headline;
   the descriptive line beneath it is the quieter sub-heading. */
.nss-head {
    max-width: 760px;
    margin-bottom: var(--head-gap);
}
.nss-head--center {
    margin-inline: auto;
    text-align: center;
}

.nss-eyebrow {
    display: block;
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nss-deep);
    font-size: var(--fs-section-name);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: none;
}
/* brand underline instead of the old pill */
.nss-eyebrow::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 8px;
    border-radius: var(--r-pill);
    background: var(--grad-brand);
}
.nss-head--center .nss-eyebrow::after { margin-inline: auto; }

.nss-section--deep .nss-eyebrow { color: var(--nss-deep); }

@keyframes nss-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--nss-cyan-rgb), .45); }
    50% { box-shadow: 0 0 0 7px rgba(var(--nss-cyan-rgb), 0); }
}

/* Descriptive headline under the section name — deliberately restrained */
.nss-title {
    margin: 0 0 8px;
    font-size: var(--fs-section-lead) !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.005em;
    color: var(--nss-slate);
}
.nss-title em {
    font-style: normal;
    color: var(--nss-cyan-700);
    -webkit-text-fill-color: currentColor;
    background: none;
}

.nss-sub {
    margin: 0;
    color: var(--nss-slate);
    line-height: 1.75;
}
.nss-section--deep .nss-sub { color: var(--nss-slate); }

.nss-rule {
    width: 76px;
    height: 3px;
    margin-top: 20px;
    border-radius: var(--r-pill);
    background: var(--grad-brand);
}
.nss-head--center .nss-rule { margin-inline: auto; }

/* ---------- 5. BUTTONS --------------------------------------------------- */
.nss-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: var(--r-pill);
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-fast) var(--e-out),
                box-shadow var(--t-fast) var(--e-out),
                color var(--t-fast) var(--e-out);
    will-change: transform;
}

.nss-btn i { transition: transform var(--t-fast) var(--e-out); }
.nss-btn:hover i { transform: translateX(3px); }
body.rtl .nss-btn:hover i { transform: translateX(-3px); }

.nss-btn--primary {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--sh-cyan);
}
.nss-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #0A6F8C, #17AFD0);
    opacity: 0;
    transition: opacity var(--t-base) var(--e-out);
}
.nss-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 56px rgba(23, 175, 208, .38);
    color: #fff;
}
.nss-btn--primary:hover::after { opacity: 1; }

.nss-btn--ghost {
    background: transparent;
    color: var(--nss-deep);
    box-shadow: inset 0 0 0 1.5px rgba(5, 44, 62, .18);
}
.nss-btn--ghost:hover {
    transform: translateY(-3px);
    color: var(--nss-cyan-700);
    box-shadow: inset 0 0 0 1.5px var(--nss-cyan), var(--sh-sm);
}

.nss-btn--light {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .26);
}
.nss-btn--light:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-3px);
    color: #fff;
}

.nss-btn--sm {
    padding: 10px 20px;
    font-size: var(--fs-btn-sm);
}

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

/* Shine sweep (React Bits "Shiny" port) */
.nss-btn--primary .nss-shine,
.nss-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
.nss-btn:hover .nss-shine { animation: nss-sweep .9s var(--e-out); }

@keyframes nss-sweep {
    to { left: 140%; }
}

/* ---------- 6. SURFACES / CARDS ----------------------------------------- */
.nss-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--nss-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform var(--t-base) var(--e-out),
                box-shadow var(--t-base) var(--e-out),
                border-color var(--t-base) var(--e-out);
}
.nss-card:hover {
    transform: translateY(-8px);
    border-color: rgba(23, 175, 208, .35);
    box-shadow: var(--sh-lg);
}

.nss-glass {
    background: var(--grad-glass);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-lg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Spotlight card (React Bits "SpotlightCard" port) */
.nss-spot { --mx: 50%; --my: 50%; }
.nss-spot::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(420px circle at var(--mx) var(--my),
                rgba(23, 175, 208, .16), transparent 62%);
    opacity: 0;
    transition: opacity var(--t-base) var(--e-out);
    pointer-events: none;
}
.nss-spot:hover::before { opacity: 1; }

.nss-section--deep .nss-spot::before {
    background: radial-gradient(420px circle at var(--mx) var(--my),
                rgba(111, 220, 239, .22), transparent 62%);
}

/* Gradient hairline border on hover */
.nss-edge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-brand);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--t-base) var(--e-out);
    pointer-events: none;
}
.nss-edge:hover::after { opacity: 1; }

/* ---------- 7. REACT-BITS STYLE TEXT EFFECTS ---------------------------- */
/* SplitText / BlurText — per-char & per-word reveal, driven by GSAP.
   Deliberately no `display` here: the class is added to live headings and
   must not turn a block <h1> into an inline-block box. */
.nss-split { }
.nss-split .nss-word {
    display: inline-block;
    white-space: pre;
    overflow: hidden;
    vertical-align: top;
}
.nss-split .nss-char {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* ShinyText */
.nss-shiny {
    background: linear-gradient(110deg,
        currentColor 32%,
        rgba(255, 255, 255, .95) 48%,
        currentColor 64%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nss-shiny 5.5s linear infinite;
}
@keyframes nss-shiny {
    to { background-position: -220% 0; }
}

/* GradientText */
.nss-gradient-text {
    background: linear-gradient(90deg, #35C6E3, #17AFD0, #6FDCEF, #17AFD0, #35C6E3);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nss-gradient-flow 7s linear infinite;
}
@keyframes nss-gradient-flow {
    to { background-position: 300% 0; }
}

/* DecryptedText */
.nss-decrypt { font-variant-numeric: tabular-nums; }

/* Aurora backdrop (React Bits "Aurora" port) */
.nss-aurora {
    position: absolute;
    inset: -30% -10%;
    z-index: 0;
    pointer-events: none;
    filter: blur(60px) saturate(150%);
    opacity: .55;
    background:
        radial-gradient(38% 46% at 22% 30%, #35C6E3 0%, transparent 62%),
        radial-gradient(34% 42% at 72% 24%, #0A6F8C 0%, transparent 60%),
        radial-gradient(40% 48% at 52% 76%, #17AFD0 0%, transparent 64%);
    animation: nss-aurora 18s var(--e-io) infinite alternate;
}
@keyframes nss-aurora {
    0% { transform: translate3d(-3%, -2%, 0) scale(1); }
    50% { transform: translate3d(3%, 2%, 0) scale(1.09); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}

/* Particle / network canvas */
.nss-net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ClickSpark */
.nss-spark {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nss-cyan-300);
    pointer-events: none;
    z-index: 9999;
}

/* ---------- 8. SCROLL REVEAL -------------------------------------------- */
[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
}
.no-js [data-reveal],
.nss-revealed { opacity: 1 !important; }

/* ---------- 9. SCROLL PROGRESS + PRELOADER ------------------------------- */
.nss-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad-brand);
    box-shadow: 0 0 18px rgba(23, 175, 208, .7);
    z-index: 9998;
}
body.rtl .nss-progress { transform-origin: 100% 50%; }

.nss-preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: var(--grad-deep);
}
.nss-preloader__mark {
    width: 108px;
    height: 108px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
}
.nss-preloader__mark img { width: 104px; }
.nss-preloader__bar {
    width: 190px;
    height: 2px;
    margin-top: 22px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}
.nss-preloader__fill {
    width: 0%;
    height: 100%;
    background: var(--grad-brand);
}
.nss-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s var(--e-out), visibility .6s;
}

/* ---------- 10. UTILITIES ------------------------------------------------ */
.nss-stack { display: grid; }
.nss-flow > * + * { margin-top: var(--sp-2); }
.nss-center { text-align: center; }
.nss-muted { color: var(--nss-slate); }
.nss-nowrap { white-space: nowrap; }
.nss-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 11. REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .nss-aurora, .nss-net { display: none; }
}

/* ---------- 13. ARABIC / RTL TYPOGRAPHY --------------------------------- */
/* Arabic glyphs carry ascenders + descenders that the tight Latin tracking
   and 1.02 line-height clip. Sizes are untouched — only spacing. */
body.rtl h1, body.rtl h2, body.rtl h3,
body.rtl h4, body.rtl h5, body.rtl h6,
body.rtl .nss-title { letter-spacing: 0; }

body.rtl .nss-hero__title { line-height: 1.32; }
body.rtl .nss-phero__title { line-height: 1.3; }
body.rtl .nss-about__title,
body.rtl .nss-vm__title,
body.rtl .nss-pd__title,
body.rtl .nss-sd__title { line-height: 1.4; }

/* give the line masks room so descenders are not cut off */
body.rtl .nss-line { padding-bottom: .22em; margin-bottom: -.22em; }

body.rtl .nss-eyebrow,
body.rtl .nss-nav__link,
body.rtl .nss-drawer__link,
body.rtl .nss-crumb { letter-spacing: .04em; }

/* ---------- 12. RESPONSIVE SHELL ---------------------------------------- */
@media (max-width: 991px) {
    :root {
        --sec-pad: 22px;
        --sec-pad-tight: 12px;
        --head-gap: 14px;
        --fs-section-name: var(--fs-section-name-md);
    }
    .nss-shell { padding-inline: 20px; }
}
@media (max-width: 575px) {
    :root {
        --sec-pad: 18px;
        --sec-pad-tight: 10px;
        --head-gap: 12px;
        --fs-section-name: var(--fs-section-name-sm);
        --fs-section-lead: var(--fs-section-lead-sm);
    }
    .nss-shell { padding-inline: 16px; }
    .nss-eyebrow::after { width: 40px; height: 3px; margin-top: 7px; }
}