/* ==========================================================================
   NSS — Section styles (loaded last, so it wins over nss-pages / nss-fx)
   Covers: rich text lists, the two-column About, the restored Project
   Portfolio / Achievements / Partners blocks, and the auto-moving
   Business Units rail. Brand colour is the logo's #18A0C8.
   ========================================================================== */

/* ==========================================================================
   0. WHITE CANVAS
   ========================================================================== */
body,
main,
.nss-section,
.nss-section--surface,
.nss-section--deep { background: #fff; }

/* decorative washes are gone on a flat white site */
.nss-section .nss-aurora,
.nss-section .nss-bloom { display: none; }

/* ==========================================================================
   1. RICH TEXT — bullets / numbers become real stacked lists
   ========================================================================== */
.nss-rich > p {
    margin: 0 0 .85em;
    color: var(--nss-slate);
    line-height: 1.9;
}
.nss-rich > p:last-child { margin-bottom: 0; }

/* the "… expertise in:" line that introduces a list */
.nss-rich__lead {
    color: var(--nss-deep) !important;
    font-weight: 700;
    margin-bottom: .55em !important;
}

.nss-rich__list {
    display: grid;
    gap: 10px;
    margin: 0 0 1.1em;
    padding: 0;
    list-style: none;
    counter-reset: nss-rich;
}
.nss-rich__list:last-child { margin-bottom: 0; }

.nss-rich__list li {
    position: relative;
    padding-inline-start: 30px;
    color: var(--nss-slate);
    line-height: 1.75;
}

/* bullet marker */
.nss-rich__list > li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--grad-brand);
    transform: rotate(45deg);
}

/* numbered marker */
.nss-rich__list--num { counter-reset: nss-rich; }
.nss-rich__list--num > li { padding-inline-start: 38px; }
.nss-rich__list--num > li::before {
    counter-increment: nss-rich;
    content: counter(nss-rich);
    top: .1em;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--nss-cyan-rgb), .12);
    color: var(--nss-cyan-700);
    font-size: .78rem;
    font-weight: 800;
    transform: none;
}

.nss-rich__list strong {
    color: var(--nss-deep);
    font-weight: 700;
}
.nss-rich__list strong + span::before {
    content: ' — ';
    color: var(--nss-slate-300);
}

/* ==========================================================================
   2. ABOUT — two equal halves
   ========================================================================== */
.nss-about__halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: start;
}

.nss-about__title {
    margin-bottom: 18px !important;
    font-size: var(--fs-section-lead) !important;
}

/* long admin copy stays readable without pushing the section sky-high */
.nss-about__scroll {
    max-height: 420px;
    overflow-y: auto;
    padding-inline-end: 14px;
    mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent 100%);
}
.nss-about__scroll::-webkit-scrollbar { width: 4px; }
.nss-about__scroll::-webkit-scrollbar-track { background: var(--nss-line); border-radius: 4px; }
.nss-about__scroll::-webkit-scrollbar-thumb {
    background: var(--nss-cyan);
    border-radius: 4px;
}

.nss-about__text { font-size: .95rem; }

.nss-about__cta { margin-top: var(--sp-3); }

/* --- right half: image then the four tabs --- */
.nss-about__media { display: grid; gap: var(--sp-3); }

.nss-about__frame {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-md);
}
.nss-about__frame img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 1.1s var(--e-out);
}
.nss-about__frame:hover img { transform: scale(1.05); }

.nss-about__chip {
    position: absolute;
    inset-inline-start: 18px;
    bottom: 18px;
    padding: 12px 18px;
    border-radius: var(--r-md);
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--sh-cyan);
}
.nss-about__chip b {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}
.nss-about__chip span {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .92;
}

/* the 4 capability tabs — 2 × 2 */
.nss-about__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.nss-tab {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--nss-line);
    border-radius: var(--r-md);
    background: #fff;
    overflow: hidden;
    transition: all var(--t-base) var(--e-out);
}
.nss-tab:hover {
    border-color: rgba(var(--nss-cyan-rgb), .45);
    box-shadow: var(--sh-md);
    transform: translateY(-4px);
}
.nss-tab::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--grad-brand);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform var(--t-base) var(--e-out);
}
.nss-tab:hover::before { transform: scaleY(1); }

.nss-tab__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: rgba(var(--nss-cyan-rgb), .1);
    color: var(--nss-cyan-700);
    font-size: 1.05rem;
    transition: all var(--t-base) var(--e-out);
}
.nss-tab:hover .nss-tab__icon {
    background: var(--grad-brand);
    color: #fff;
    transform: rotate(-6deg);
}

.nss-tab__title {
    margin: 0 0 4px;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--nss-deep);
}
.nss-tab__text {
    margin: 0;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--nss-slate);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    .nss-about__halves { grid-template-columns: 1fr; gap: var(--sp-4); }
    .nss-about__scroll { max-height: none; mask-image: none; -webkit-mask-image: none; padding-inline-end: 0; }
}
@media (max-width: 575px) {
    .nss-about__tabs { grid-template-columns: 1fr; }
    .nss-about__frame img { height: 220px; }
}

/* ==========================================================================
   3. BUSINESS UNITS — auto-moving rail, natural imagery
   ========================================================================== */
.nss-bl__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.nss-bl__rail {
    position: relative;
    overflow: hidden;
    padding-block: 6px 18px;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.nss-bl__track {
    display: flex;
    gap: var(--sp-3);
    width: max-content;
    animation: nss-bl-drift 46s linear infinite;
}
.nss-bl__rail:hover .nss-bl__track { animation-play-state: paused; }

@keyframes nss-bl-drift { to { transform: translateX(-50%); } }
body.rtl .nss-bl__track { animation-direction: reverse; }

.nss-bl__card {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nss-line);
    border-radius: var(--r-lg);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    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-bl__card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--nss-cyan-rgb), .45);
    box-shadow: var(--sh-lg);
}

/* image shown as-is: no tint, no gradient scrim, no brightness cut */
.nss-bl__media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: var(--nss-line);
}
.nss-bl__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: transform .9s var(--e-out);
}
.nss-bl__card:hover .nss-bl__media img { transform: scale(1.06); }

.nss-bl__icon {
    position: absolute;
    z-index: 2;
    inset-inline-end: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: var(--grad-brand);
    color: #fff;
    font-size: 1rem;
    box-shadow: var(--sh-cyan);
    transition: transform var(--t-base) var(--e-out);
}
.nss-bl__card:hover .nss-bl__icon { transform: rotate(-8deg) scale(1.06); }

.nss-bl__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.nss-bl__index {
    display: inline-block;
    margin-bottom: 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--nss-cyan-700);
}

.nss-bl__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--nss-deep);
}

.nss-bl__text {
    flex: 1;
    margin: 0 0 16px;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--nss-slate);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nss-bl__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nss-cyan-700);
}
.nss-bl__more i { transition: transform var(--t-fast) var(--e-out); }
.nss-bl__card:hover .nss-bl__more i { transform: translateX(5px); }
body.rtl .nss-bl__card:hover .nss-bl__more i { transform: translateX(-5px); }

@media (max-width: 575px) {
    .nss-bl__card { flex-basis: 268px; }
    .nss-bl__media { height: 160px; }
}

/* ==========================================================================
   4. PROJECT PORTFOLIO — restored sidebar + details
   ========================================================================== */
.nss-prj { position: relative; overflow: hidden; }

.nss-prj__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-watermark);
    font-weight: 900;
    line-height: 1;
    color: rgba(11, 60, 78, .03);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.nss-prj__container {
    position: relative;
    z-index: 2;
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}

/* --- left sidebar --- */
.nss-prj__sidebar {
    flex: 0 0 300px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--nss-line);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-sm);
    max-height: 560px;
    overflow-y: auto;
}
.nss-prj__sidebar::-webkit-scrollbar { width: 4px; }
.nss-prj__sidebar::-webkit-scrollbar-thumb { background: var(--nss-cyan); border-radius: 4px; }

.nss-prj__item {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--nss-line);
    border-radius: var(--r-md);
    background: #fff;
    text-align: start;
    cursor: pointer;
    transition: all var(--t-base) var(--e-out);
}
.nss-prj__item:hover {
    background: rgba(var(--nss-cyan-rgb), .06);
    border-color: rgba(var(--nss-cyan-rgb), .35);
    transform: translateX(4px);
}
body.rtl .nss-prj__item:hover { transform: translateX(-4px); }

.nss-prj__item.is-active {
    background: var(--grad-brand);
    border-color: transparent;
    box-shadow: var(--sh-cyan);
    transform: translateX(7px);
}
body.rtl .nss-prj__item.is-active { transform: translateX(-7px); }

.nss-prj__item-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: rgba(var(--nss-cyan-rgb), .12);
    color: var(--nss-cyan-700);
    font-size: .88rem;
    transition: all var(--t-base) var(--e-out);
}
.nss-prj__item.is-active .nss-prj__item-icon { background: #fff; color: var(--nss-cyan-700); }

.nss-prj__item-title {
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--nss-deep);
}
.nss-prj__item-text {
    font-size: .75rem;
    line-height: 1.45;
    color: var(--nss-slate);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nss-prj__item.is-active .nss-prj__item-title { color: #fff; }
.nss-prj__item.is-active .nss-prj__item-text { color: rgba(255, 255, 255, .85); }

/* --- right details panel --- */
.nss-prj__details {
    flex: 1;
    min-width: 0;
    padding: var(--sp-3);
    border: 1px solid var(--nss-line);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-sm);
}

.nss-prj__content { display: none; gap: var(--sp-3); }
.nss-prj__content.is-active { display: flex; }

.nss-prj__text { flex: 1; min-width: 0; }

.nss-prj__title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--nss-deep);
}
.nss-prj__title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    margin-top: 9px;
    border-radius: 2px;
    background: var(--grad-brand);
}

.nss-prj__desc {
    margin-top: 12px;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--nss-slate);
    max-height: 120px;
    overflow: hidden;
}
.nss-prj__desc p { margin: 0 0 .6em; }
.nss-prj__desc ul { padding-inline-start: 18px; margin: 0; }

.nss-prj__features { margin-top: 14px; }
.nss-prj__features h4,
.nss-prj__stats h4 {
    margin: 0 0 9px;
    font-size: .95rem;
    font-weight: 800;
    color: var(--nss-deep);
}

.nss-prj__feature-list { list-style: none; padding: 0; margin: 0; }
.nss-prj__feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid var(--nss-line);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--nss-slate);
}
.nss-prj__feature-list li:last-child { border-bottom: 0; }
.nss-prj__feature-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--nss-cyan);
    font-size: .8rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.nss-prj__stats {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--r-md);
    background: rgba(var(--nss-cyan-rgb), .05);
}
.nss-prj__stats-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.nss-prj__stat-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--nss-cyan-700);
}
.nss-prj__stat-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nss-slate);
}

.nss-prj__actions { margin-top: 16px; }

.nss-prj__image {
    flex: 0 0 380px;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-md);
    align-self: stretch;
    min-height: 360px;
}
.nss-prj__image img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

@media (max-width: 1100px) {
    .nss-prj__container { flex-direction: column; }
    .nss-prj__sidebar {
        flex: initial;
        width: 100%;
        max-height: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 1fr);
        overflow-x: auto;
    }
}
@media (max-width: 767px) {
    .nss-prj__content.is-active { flex-direction: column; }
    .nss-prj__image { flex: initial; min-height: 220px; }
    .nss-prj__image img { min-height: 220px; height: 220px; }
    .nss-prj__watermark { font-size: var(--fs-watermark-sm); }
}

/* ==========================================================================
   5. ACHIEVEMENTS — restored white counter cards
   ========================================================================== */
.nss-counter { position: relative; overflow: hidden; }

.nss-counter__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-watermark);
    font-weight: 900;
    line-height: 1;
    color: rgba(11, 60, 78, .03);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.nss-counter__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}

.nss-counter__item {
    padding: 24px 18px;
    border: 1px solid var(--nss-line);
    border-radius: var(--r-lg);
    background: #fff;
    text-align: center;
    box-shadow: var(--sh-sm);
    transition: all var(--t-base) var(--e-out);
}
.nss-counter__item:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--nss-cyan-rgb), .4);
    box-shadow: var(--sh-lg);
}

.nss-counter__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 14px;
    border-radius: var(--r-md);
    background: var(--grad-brand);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--sh-cyan);
    transition: all var(--t-base) var(--e-out);
}
.nss-counter__item:hover .nss-counter__icon { transform: rotate(-8deg) scale(1.06); }

/* NB: inline-flex, not block — this element also carries .nss-odo, whose
   digit columns must stay on one row. A `display:block` here would load
   after nss-fx.css and stack the digits vertically. */
.nss-counter__num {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.05;
    color: #15adcd;
    font-variant-numeric: tabular-nums;
}
/* the suffix was tuned for a dark panel — too pale on white */
.nss-counter__num .nss-odo__suffix { color: var(--nss-cyan) !important; }

.nss-counter__label {
    display: block;
    margin-top: 7px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--nss-deep);
}

@media (max-width: 991px) { .nss-counter__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .nss-counter__grid { grid-template-columns: 1fr; }
    .nss-counter__watermark { font-size: var(--fs-watermark-sm); }
}

/* ==========================================================================
   6. PARTNERS — restored single rail, logos in full colour
   ========================================================================== */
.nss-partners__slider {
    position: relative;
    overflow: hidden;
    padding-block: 14px;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.nss-partners__track {
    display: flex;
    align-items: center;
    gap: 42px;
    width: max-content;
    animation: nss-partners-slide 34s linear infinite;
}
.nss-partners__slider:hover .nss-partners__track { animation-play-state: paused; }

@keyframes nss-partners-slide { to { transform: translateX(-50%); } }
body.rtl .nss-partners__track { animation-direction: reverse; }

/* no card chrome, no greyscale — the logos read in their own colours */
.nss-partners__item {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 160px;
    height: 80px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: transform var(--t-base) var(--e-out);
}
.nss-partners__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: transform var(--t-base) var(--e-out);
}
.nss-partners__item:hover {
    transform: translateY(-5px);
    border: 0;
    box-shadow: none;
}
.nss-partners__item:hover img { filter: none; opacity: 1; transform: scale(1.05); }

@media (max-width: 575px) {
    .nss-partners__track { gap: 28px; }
    .nss-partners__item { width: 120px; height: 62px; }
}

/* ==========================================================================
   7. CONTACT — Google map frame
   ========================================================================== */
.nss-map {
    position: relative;
    height: 520px;
    border: 1px solid var(--nss-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    background: #fff;
}
.nss-map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 991px) { .nss-map { height: 360px; } }

/* ==========================================================================
   8. SECTION HEAD — button sits under the centred heading
   ========================================================================== */
.nss-head--center .nss-btn { margin-top: var(--sp-2); }

/* ==========================================================================
   9. LIGHT-THEME OVERRIDES
   Vision & Mission, the kinetic band and the closing CTA were authored for a
   dark canvas. The site is white now, so they are re-coloured here.
   ========================================================================== */

/* --- Vision & Mission cards --- */
.nss-vm__card {
    border: 1px solid var(--nss-line) !important;
    background: #fff !important;
    backdrop-filter: none !important;
    box-shadow: var(--sh-sm);
}
.nss-vm__card:hover {
    border-color: rgba(var(--nss-cyan-rgb), .45) !important;
    background: #fff !important;
    box-shadow: var(--sh-lg);
}
.nss-vm__icon {
    background: rgba(var(--nss-cyan-rgb), .1) !important;
    color: var(--nss-cyan-700) !important;
}
.nss-vm__card:hover .nss-vm__icon {
    background: var(--grad-brand) !important;
    color: #fff !important;
}
.nss-vm__title { color: var(--nss-deep) !important; }
.nss-vm__desc  { color: var(--nss-slate) !important; }

.nss-vm__tag {
    border-color: var(--nss-line) !important;
    background: rgba(var(--nss-cyan-rgb), .06) !important;
    color: var(--nss-cyan-700) !important;
}
.nss-vm__tag:hover {
    background: var(--grad-brand) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.nss-ghost { color: rgba(11, 60, 78, .05) !important; }

/* --- kinetic capability band --- */
.nss-kinetic {
    background: #fff !important;
    border-block: 1px solid var(--nss-line) !important;
}
.nss-kinetic__item { color: var(--nss-deep) !important; }
.nss-kinetic__item:hover { color: var(--nss-cyan-700) !important; }
.nss-kinetic__item i { color: var(--nss-cyan) !important; }

/* --- closing CTA --- */
.nss-cta {
    background: #fff !important;
    border-top: 1px solid var(--nss-line);
    color: var(--nss-ink);
}
.nss-cta h2 { color: var(--nss-deep) !important; }
.nss-cta p  { color: var(--nss-slate) !important; }
.nss-cta__ghost span { color: rgba(11, 60, 78, .05) !important; }
.nss-cta .nss-eyebrow { color: var(--nss-deep) !important; }

/* a light CTA needs a visible secondary button */
.nss-cta .nss-btn--light {
    background: #fff !important;
    color: var(--nss-deep) !important;
    box-shadow: inset 0 0 0 1.5px var(--nss-line) !important;
    backdrop-filter: none !important;
}
.nss-cta .nss-btn--light:hover {
    color: var(--nss-cyan-700) !important;
    box-shadow: inset 0 0 0 1.5px var(--nss-cyan) !important;
}

/* ==========================================================================
   10. INNER-PAGE HERO
   The page hero keeps its own hierarchy: the <h1> stays the big element and
   its eyebrow stays a small label, so it must opt out of the new section
   heading scale applied above.
   ========================================================================== */
.nss-phero__title.nss-title {
    font-size: 2.5rem !important;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: #fff;
}
@media (max-width: 767px) { .nss-phero__title.nss-title { font-size: var(--fs-page-title-sm) !important; } }
@media (max-width: 480px) { .nss-phero__title.nss-title { font-size: var(--fs-page-title-xs) !important; } }

.nss-phero .nss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.nss-phero .nss-eyebrow::after { display: none; }

/* --- Vision image: show the photo as it is, no colour wash --- */
.nss-vm__media::after { display: none !important; }
.nss-vm__media img { filter: none !important; }
/* the badge sat on the removed scrim, so give it its own backing */
.nss-vm__badge {
    background: rgba(11, 60, 78, .72) !important;
    backdrop-filter: blur(8px);
    color: #fff !important;
}

/* ==========================================================================
   11. COMPACT PASS — tighten spacing inside sections
   The client asked for the page to read as densely as possible, so the
   internal gaps/paddings are pulled in well below the design-system defaults.
   ========================================================================== */

/* --- About --- */
.nss-about__halves { gap: var(--sp-3) !important; }
.nss-about__title  { margin-bottom: 10px !important; }
.nss-about__scroll { max-height: 330px; }
.nss-about__cta    { margin-top: 14px !important; }
.nss-about__media  { gap: 12px !important; }
.nss-about__frame img { height: 230px; }
.nss-about__tabs   { gap: 9px !important; }
.nss-tab           { padding: 12px !important; gap: 10px !important; }
.nss-tab__icon     { width: 34px; height: 34px; font-size: .92rem; }
.nss-tab__title    { font-size: .86rem; margin-bottom: 2px !important; }
.nss-tab__text     { font-size: .76rem; line-height: 1.5; -webkit-line-clamp: 2; }
.nss-about__chip   { padding: 9px 14px; inset-inline-start: 14px; bottom: 14px; }
.nss-about__chip b { font-size: 1.2rem; }
.nss-rich > p      { margin-bottom: .6em; line-height: 1.75; }
.nss-rich__list    { gap: 6px; margin-bottom: .75em; }
.nss-rich__list li { line-height: 1.6; }

/* --- Business units --- */
.nss-bl__head   { margin-bottom: var(--head-gap) !important; }
.nss-bl__rail   { padding-block: 4px 10px; }
.nss-bl__track  { gap: var(--sp-2) !important; }
.nss-bl__card   { flex-basis: 290px; }
.nss-bl__media  { height: 160px; }
.nss-bl__body   { padding: 15px !important; }
.nss-bl__index  { margin-bottom: 6px; }
.nss-bl__title  { font-size: 1rem; margin-bottom: 6px !important; }
.nss-bl__text   { font-size: .82rem; line-height: 1.6; margin-bottom: 11px !important; -webkit-line-clamp: 2; }
.nss-bl__icon   { width: 38px; height: 38px; font-size: .9rem; inset-inline-end: 11px; top: 11px; }

/* --- Vision & Mission --- */
.nss-vm__grid   { gap: var(--sp-3) !important; }
.nss-vm__cards  { gap: 12px !important; }
.nss-vm__card   { padding: 18px !important; }
.nss-vm__head   { margin-bottom: 9px !important; }
.nss-vm__icon   { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
.nss-vm__title  { font-size: 1.05rem !important; }
.nss-vm__desc   { font-size: .88rem !important; line-height: 1.65 !important; margin-bottom: 10px !important; }
.nss-vm__media img { height: 380px !important; }
.nss-vm__tags   { gap: 7px !important; }
.nss-vm__tag    { padding: 4px 11px !important; font-size: .68rem !important; }

/* --- Project portfolio --- */
.nss-prj__container     { gap: var(--sp-3) !important; }
.nss-prj__sidebar       { flex-basis: 268px; padding: 12px; gap: 6px; max-height: 470px; }
.nss-prj__item          { padding: 9px 11px; gap: 3px; }
.nss-prj__item-icon     { width: 28px; height: 28px; font-size: .8rem; }
.nss-prj__item-title    { font-size: .85rem; }
.nss-prj__item-text     { font-size: .72rem; }
.nss-prj__details       { padding: var(--sp-2) !important; }
.nss-prj__content       { gap: var(--sp-2) !important; }
.nss-prj__title         { font-size: 1.05rem; }
.nss-prj__title::after  { margin-top: 7px; width: 42px; }
.nss-prj__desc          { margin-top: 9px; font-size: .84rem; line-height: 1.55; max-height: 92px; }
.nss-prj__features      { margin-top: 10px; }
.nss-prj__features h4,
.nss-prj__stats h4      { font-size: .88rem; margin-bottom: 6px; }
.nss-prj__feature-list li { padding: 4px 0; font-size: .81rem; }
.nss-prj__stats         { margin-top: 10px; padding: 10px 12px; }
.nss-prj__stats-grid    { gap: var(--sp-2) !important; }
.nss-prj__stat-num      { font-size: 1.2rem; }
.nss-prj__stat-label    { font-size: .68rem; }
.nss-prj__actions       { margin-top: 11px; }
.nss-prj__image         { flex-basis: 330px; min-height: 300px; }
.nss-prj__image img     { min-height: 300px; }

/* --- Achievements --- */
.nss-counter__grid   { gap: var(--sp-2) !important; }
.nss-counter__item   { padding: 16px 14px; }
.nss-counter__icon   { width: 42px; height: 42px; margin-bottom: 9px; font-size: .95rem; }
.nss-counter__num    { font-size: 1.8rem; }
.nss-counter__label  { font-size: .9rem; margin-top: 4px; }

/* --- Partners --- */
.nss-partners__slider { padding-block: 8px; }
.nss-partners__track  { gap: 34px; }
.nss-partners__item   { width: 140px; height: 64px; }

/* --- Contact --- */
.nss-contact__grid { gap: var(--sp-3) !important; }
.nss-offices       { gap: 9px !important; }
.nss-office        { padding: 14px !important; }
.nss-office__head  { margin-bottom: 9px !important; gap: 10px !important; }
.nss-office__pin   { width: 32px !important; height: 32px !important; }
.nss-office__name  { font-size: 1rem !important; }
.nss-office__rows  { gap: 6px !important; }
.nss-office__row   { font-size: .83rem !important; }
.nss-map           { height: 430px; }

/* --- Contact form --- */
.nss-form          { padding: var(--sp-3) !important; }
.nss-form__rows    { gap: 12px !important; }
.nss-field input,
.nss-field textarea { padding: 10px 13px !important; }
.nss-field textarea { min-height: 110px !important; }
.nss-form__submit  { margin-top: 14px !important; padding: 12px 26px !important; }

/* --- CTA --- */
.nss-cta        { padding-block: var(--sec-pad) !important; }
.nss-cta__inner { gap: var(--sp-3) !important; }

/* --- Inner page hero --- */
.nss-phero          { padding: 118px 0 32px !important; }
.nss-phero__stats   { gap: var(--sp-4) !important; margin-top: var(--sp-2) !important; }
.nss-phero__sub     { margin-top: 2px; }
.nss-crumb          { margin-bottom: 12px !important; }
@media (max-width: 767px) { .nss-phero { padding: 96px 0 26px !important; } }

/* inner-page grids */
.nss-svcgrid, .nss-why__grid, .nss-prjgrid { gap: var(--sp-2) !important; }
.nss-why      { padding: 20px 16px !important; }
.nss-why__icon { width: 54px; height: 54px; margin-bottom: 12px; font-size: 1.4rem; }
.nss-why h3   { font-size: 1.05rem; margin-bottom: 7px; }
.nss-why p    { font-size: .86rem; line-height: 1.6; }

/* ==========================================================================
   12. NAVBAR + FOOTER — the logo's own background gradient
   Sampled from the NSS logo tile: #13B0CF at the top easing to #2595C7.
   ========================================================================== */

/* ---------- Navbar ---------- */
.nss-nav {
    background: var(--grad-logo);
    box-shadow: 0 2px 18px rgba(11, 60, 78, .14);
}
/* the dark scrim only existed to lift text off the hero image */
.nss-nav::before { display: none !important; }

.nss-nav.is-stuck {
    background: var(--grad-logo);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 28px rgba(11, 60, 78, .22);
}

/* The uploaded logo is a solid tile that already carries this same gradient
   behind a white wordmark, so it is shown unfiltered — inverting it would
   flatten the whole tile to a white square. */
.nss-nav .nss-brand img,
.nss-nav.is-stuck .nss-brand img,
.nss-footer__brand img {
    filter: none;
    border-radius: 8px;
}
/* a square tile needs more height than a wide wordmark to stay legible */
.nss-nav .nss-brand img { height: 48px; }
.nss-footer__brand img { height: 58px; }

.nss-nav .nss-nav__link,
.nss-nav.is-stuck .nss-nav__link { color: rgba(255, 255, 255, .9); }

.nss-nav .nss-nav__link:hover,
.nss-nav .nss-nav__link.is-active,
.nss-nav.is-stuck .nss-nav__link:hover,
.nss-nav.is-stuck .nss-nav__link.is-active { color: #fff; }

.nss-nav .nss-nav__link::after,
.nss-nav.is-stuck .nss-nav__link::after { background: #fff; }

.nss-nav .nss-nav__social,
.nss-nav.is-stuck .nss-nav__social {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}
.nss-nav .nss-nav__social:hover,
.nss-nav.is-stuck .nss-nav__social:hover {
    background: #fff;
    color: var(--nss-cyan-700);
    box-shadow: 0 8px 18px rgba(11, 60, 78, .25);
}

.nss-nav .nss-lang__btn,
.nss-nav.is-stuck .nss-lang__btn {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.nss-nav .nss-lang__btn:hover,
.nss-nav.is-stuck .nss-lang__btn:hover {
    background: #fff;
    color: var(--nss-cyan-700);
    border-color: #fff;
}

.nss-nav .nss-burger,
.nss-nav.is-stuck .nss-burger {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .14);
}
.nss-nav .nss-burger span,
.nss-nav.is-stuck .nss-burger span { background: #fff; }

/* mobile drawer picks up the same brand surface */
.nss-drawer { background: var(--grad-logo); }
.nss-drawer__link i { color: #fff; }
.nss-drawer__link:hover,
.nss-drawer__link.is-active { background: rgba(255, 255, 255, .16); color: #fff; }

/* the bar is opaque now, so the hero needs its own top clearance */
.nss-hero__inner { padding-block: 150px 120px; }
@media (max-width: 767px) { .nss-hero__inner { padding-block: 130px 140px; } }

/* ---------- Footer ---------- */
.nss-footer {
    background: var(--grad-logo);
    color: rgba(255, 255, 255, .88);
}
.nss-footer::before { background: rgba(255, 255, 255, .28); }

.nss-footer h4,
.nss-footer__tagline { color: #fff; }
.nss-footer__about { color: rgba(255, 255, 255, .85); }

.nss-footer__list a { color: rgba(255, 255, 255, .85); }
.nss-footer__list a::before { background: #fff; }
.nss-footer__list a:hover { color: #fff; }

.nss-footer__ci { color: rgba(255, 255, 255, .85); }
.nss-footer__ci i {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.nss-footer__ci strong { color: #fff; }
.nss-footer__ci a:hover { color: #fff; text-decoration: underline; }

.nss-footer__social a {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.nss-footer__social a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--nss-cyan-700);
    box-shadow: 0 10px 22px rgba(11, 60, 78, .28);
}

.nss-footer__bottom { border-top-color: rgba(255, 255, 255, .22); }
.nss-footer__bottom a { color: #fff; text-decoration: underline; }
.nss-footer__mark { color: rgba(255, 255, 255, .08); }

/* compact footer */
.nss-footer__top    { padding-block: var(--sp-4) var(--sp-3) !important; gap: var(--sp-3) !important; }
.nss-footer h4      { margin-bottom: 12px !important; }
.nss-footer__brand img { height: 44px; margin-bottom: 12px; }
.nss-footer__about  { margin-bottom: 14px !important; }
.nss-footer__contact { gap: 11px !important; }
.nss-footer__list   { gap: 8px !important; }
.nss-footer__bottom { padding-block: 13px !important; }

/* the lead sits beside a button, so it needs more room before wrapping */
.nss-bl__head .nss-head { max-width: min(860px, 68%); }
@media (max-width: 767px) { .nss-bl__head .nss-head { max-width: 100%; } }

/* ==========================================================================
   13. BUSINESS UNITS RAIL — GSAP velocity loop
   The CSS keyframe drift stays as the no-JS / reduced-motion fallback; once
   the GSAP rail takes over it adds .is-js and the keyframe is switched off.
   ========================================================================== */
.nss-bl__rail.is-js .nss-bl__track {
    animation: none !important;
    will-change: transform;
}
.nss-bl__rail.is-js { cursor: grab; }
.nss-bl__rail.is-dragging { cursor: grabbing; }
.nss-bl__rail.is-dragging .nss-bl__card { transition: none; }

/* skew is applied per-card by GSAP, so each card needs its own compositing */
.nss-bl__rail.is-js .nss-bl__card { will-change: transform; }

/* hint that the rail is draggable */
.nss-bl__rail.is-js::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ==========================================================================
   14. ABOUT — show the full write-up
   The inner scrollbox hid most of the admin copy. The text now flows in
   full and the shorter media column sticks instead, so neither side
   leaves a long empty gap.
   ========================================================================== */
.nss-about__scroll {
    max-height: none;
    overflow: visible;
    padding-inline-end: 0;
    mask-image: none;
    -webkit-mask-image: none;
}

@media (min-width: 992px) {
    .nss-about__halves { align-items: start; }
    .nss-about__media {
        position: sticky;
        top: 96px;   /* clears the fixed navbar */
    }
}

/* the copy is long, so keep it comfortable to read */
.nss-about__text { font-size: .92rem; }
.nss-rich__list--num > li { padding-inline-start: 34px; }

/* ==========================================================================
   15. INK TEXT — long copy that writes itself in on scroll
   ========================================================================== */
.nss-ink__w {
    display: inline;
    will-change: opacity;
}
/* without JS the copy must still be fully legible */
.no-js .nss-ink__w { opacity: 1 !important; }

/* ==========================================================================
   16. BUSINESS UNITS — expanding panel accordion
   ========================================================================== */
.nss-acc {
    display: flex;
    gap: 10px;
    height: 390px;
    margin-top: var(--head-gap);
}

.nss-acc__panel {
    position: relative;
    flex: 0 1 86px;
    min-width: 86px;
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--nss-deep);
    transition: flex-grow .75s var(--e-out),
                flex-basis .75s var(--e-out),
                box-shadow .5s var(--e-out);
    outline: none;
}
.nss-acc__panel.is-open {
    flex: 1 1 auto;
    box-shadow: var(--sh-lg);
}
.nss-acc__panel:focus-visible { box-shadow: 0 0 0 3px rgba(var(--nss-cyan-rgb), .55); }

/* imagery stays natural, darkened only enough to carry white type */
.nss-acc__media { position: absolute; inset: 0; }
.nss-acc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--e-out);
}
.nss-acc__panel.is-open .nss-acc__media img { transform: scale(1.04); }
.nss-acc__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 46, 60, .18) 0%, rgba(8, 46, 60, .82) 100%);
    transition: opacity .6s var(--e-out);
}
/* the open panel carries white copy over a bright photo, so the side the
   text sits on needs to stay dark enough to read against */
.nss-acc__panel.is-open .nss-acc__media::after {
    background:
        linear-gradient(0deg, rgba(8, 46, 60, .92) 0%, rgba(8, 46, 60, .25) 55%, transparent 100%),
        linear-gradient(100deg, rgba(8, 46, 60, .72) 0%, rgba(8, 46, 60, .12) 70%);
}

/* collapsed state: vertical spine */
.nss-acc__spine {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    opacity: 1;
    transition: opacity .35s var(--e-out);
}
.nss-acc__panel.is-open .nss-acc__spine { opacity: 0; pointer-events: none; }

.nss-acc__index {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--nss-cyan-300);
}
.nss-acc__spine-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 250px;
}
.nss-acc__spine-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .85rem;
}

/* open state: full card */
.nss-acc__body {
    position: absolute;
    z-index: 3;
    inset-inline-start: 0;
    bottom: 0;
    width: min(420px, 90%);
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--e-out);
}
.nss-acc__panel.is-open .nss-acc__body { opacity: 1; pointer-events: auto; }

.nss-acc__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--grad-brand);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.nss-acc__title {
    margin: 0 0 7px;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.3;
}

.nss-acc__text {
    margin: 0 0 12px;
    font-size: .84rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .84);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nss-acc__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, .4);
    padding-bottom: 3px;
    transition: border-color var(--t-fast) var(--e-out), gap var(--t-fast) var(--e-out);
}
.nss-acc__cta:hover { border-color: var(--nss-cyan-300); gap: 12px; color: #fff; }

@media (max-width: 991px) {
    .nss-acc { height: 340px; }
    .nss-acc__panel { flex-basis: 70px; min-width: 70px; }
    .nss-acc__body { width: 100%; padding: 16px; }
}
/* below tablet the accordion becomes a simple stack of cards */
@media (max-width: 700px) {
    .nss-acc { display: grid; grid-template-columns: 1fr; gap: 10px; height: auto; }
    .nss-acc__panel { min-width: 0; height: 190px; flex: initial; display: flex; align-items: flex-end; }
    .nss-acc__spine { display: none; }
    .nss-acc__body { opacity: 1 !important; pointer-events: auto !important; position: relative; width: 100%; }
    .nss-acc__media::after {
        background: linear-gradient(180deg, rgba(8, 46, 60, .25) 0%, rgba(8, 46, 60, .88) 100%) !important;
    }
}

/* ==========================================================================
   17. PROJECT PORTFOLIO — alternating case-study rows
   ========================================================================== */
.nss-case__list {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-3);
}

.nss-case__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: center;
}
.nss-case__row.is-flipped .nss-case__visual { order: 2; }

.nss-case__visual { position: relative; }

.nss-case__frame {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-md);
}
.nss-case__frame img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 1.2s var(--e-out);
}
.nss-case__frame:hover img { transform: scale(1.05); }

/* oversized index bleeding out behind the frame */
.nss-case__ghost {
    position: absolute;
    z-index: 0;
    inset-inline-start: -26px;
    top: -34px;
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    color: rgba(11, 60, 78, .07);
    pointer-events: none;
    user-select: none;
}
.nss-case__row.is-flipped .nss-case__ghost {
    inset-inline-start: auto;
    inset-inline-end: -26px;
}

.nss-case__chip {
    position: absolute;
    z-index: 2;
    inset-inline-start: 16px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: rgba(8, 46, 60, .72);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.nss-case__chip i { color: var(--nss-cyan-300); }

.nss-case__num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--nss-cyan-700);
}
.nss-case__num i {
    display: block;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
}

.nss-case__title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--nss-deep);
}

.nss-case__desc {
    font-size: .88rem;
    line-height: 1.72;
    color: var(--nss-slate);
}
.nss-case__desc p { margin: 0 0 .6em; }
.nss-case__desc ul { margin: 0 0 .6em; padding-inline-start: 18px; }
.nss-case__desc li { margin-bottom: 4px; }

.nss-case__label {
    margin: 0 0 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nss-deep);
}

.nss-case__feats { margin-top: 12px; }
.nss-case__feats ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nss-case__feats li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--nss-slate);
}
.nss-case__feats li i {
    flex-shrink: 0;
    margin-top: 3px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--nss-cyan-rgb), .14);
    color: var(--nss-cyan-700);
    font-size: .56rem;
}

/* stats strip inside a case row */
.nss-prj__stats--case {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: rgba(var(--nss-cyan-rgb), .05);
    border: 1px solid rgba(var(--nss-cyan-rgb), .14);
}
.nss-prj__stats--case h4 {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.nss-prj__stats--case .nss-prj__stat-num { font-size: 1.35rem; }

.nss-case__cta { margin-top: 14px; }

@media (max-width: 991px) {
    .nss-case__row { grid-template-columns: 1fr; gap: var(--sp-3); }
    .nss-case__row.is-flipped .nss-case__visual { order: 0; }
    .nss-case__frame img { height: 280px; }
    .nss-case__ghost { font-size: 4rem; top: -24px; }
    .nss-case__list { gap: var(--sp-4); }
}
@media (max-width: 575px) {
    .nss-case__feats ul { grid-template-columns: 1fr; }
    .nss-case__frame img { height: 210px; }
}

/* ==========================================================================
   18. ABOUT — media column pinned while the copy scrolls past it
   --------------------------------------------------------------------------
   Horizontal overflow (the rotated kinetic band, the Ken Burns hero) is
   clipped on <main> rather than on <html>/<body>: `overflow-x: clip` clips
   without creating a scroll container, so position:sticky keeps working.
   ========================================================================== */
/* no clip on <main>: Chrome treats an overflow-clip ancestor as a sticky
   boundary too, so sideways overflow is contained at its own source
   (see the .nss-kinetic rules below) instead. */

@media (min-width: 992px) {
    .nss-about__halves { align-items: start; }

    .nss-about__media {
        position: sticky;
        top: 84px;               /* clears the fixed navbar */
        align-self: start;
    }

    /* the copy sets the section height; the media rides along pinned */
    .nss-about__copy { padding-bottom: 6px; }
}

/* --- reading progress rail beside the pinned column ---
   NB: no `position` here. A plain .nss-about__media rule placed after the
   media query above would override `position: sticky` (media queries add no
   specificity) and silently unpin the column. */
.nss-about__progress {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nss-slate-300);
}
@media (min-width: 992px) { .nss-about__progress { display: flex; } }

.nss-about__progress-bar {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--nss-line);
    overflow: hidden;
}
.nss-about__progress-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
body.rtl .nss-about__progress-fill { transform-origin: 100% 50%; }

.nss-about__progress-pct {
    font-variant-numeric: tabular-nums;
    color: var(--nss-cyan-700);
    min-width: 4ch;
    text-align: end;
}

/* --- kinetic band ---------------------------------------------------------
   Outer element is a plain, untransformed clipper so nothing pokes past the
   viewport; the inner wrapper carries the tilt AND the ribbon's surface, so
   the diagonal edges read the way they did before. --------------------- */
.nss-kinetic {
    transform: none !important;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    padding-block: 0 !important;
}
.nss-kinetic__skew {
    padding-block: var(--sp-3);
    background: #fff;
    border-block: 1px solid var(--nss-line);
    transform: rotate(-1.4deg) scale(1.04);
    transform-origin: 50% 50%;
}
body.rtl .nss-kinetic__skew { transform: rotate(1.4deg) scale(1.04); }