/* ======================================================
   NSA BRAND COLOR VARIABLES
   Ganti warna brand cukup di sini — semua tempat yang pakai
   warna ini (inline style di index.html maupun style.css)
   otomatis ikut berubah, tanpa perlu cari-ganti manual.
   Format RGB (bukan HEX) supaya bisa dipakai dengan opacity:
   contoh: rgba(var(--c-gold), 0.5)
   ====================================================== */
:root {
  --c-bg: 6, 16, 31;         /* navy gelap, warna dasar halaman */
  --c-card: 11, 22, 51;      /* navy sedikit lebih terang, warna card/panel */
  --c-purple: 29, 20, 54;    /* ungu gelap, aksen gradient */
  --c-gold: 232, 185, 60;    /* gold utama, warna aksen/tombol */
  --c-gold-hover: 243, 203, 94;  /* gold saat hover */
  --c-gold-muted: 201, 150, 44;  /* gold redup, buat kicker/label kecil */
  --c-text: 245, 243, 236;   /* putih gading, warna teks utama */
  --c-accent-purple: 107, 84, 153;      /* aksen ungu terang (border, hover) */
  --c-accent-purple-dark: 75, 59, 115;  /* aksen ungu gelap (background card hover) */

  /* ===== SPACING (desktop) — ganti di sini buat atur jarak semua section sekaligus ===== */
  --space-x: 4rem;              /* 64px — jarak kiri-kanan, SAMA untuk semua, dari Header sampai Footer */
  --space-header-y: 1.25rem;    /* 20px — navbar tetap ramping */
  --space-section-y: 8rem;      /* 128px — jarak atas-bawah section besar (About, Solusi, dst) */
  --space-strip-y: 2.5rem;      /* 40px — strip kecil (Keselamatan & Sertifikasi, Jaminan Kami) */
  --space-footer-top-y: 5.5rem; /* 88px — footer bagian atas (logo, kolom) */
  --space-footer-bottom-y: 1.5rem; /* 24px — footer bagian bawah (copyright) */
}

/* ======================================================
   RESPONSIVE PADDING FIX (patch)
   Redefine spacing variable per breakpoint, jadi otomatis
   ngalir ke SEMUA section yang pakai var(--space-x), dst,
   tanpa perlu override class satu-satu (.ns-about-2,
   .ns-facility-services-1, .ns-contact-2, .ns-footer-2, dst).
   ====================================================== */

@media (max-width: 1024px) {
  :root {
    --space-x: 2.5rem;             /* 40px, samain sama .px-64 tablet */
    --space-section-y: 6rem;       /* ~100px, biar senada sama .section-pad-lg tablet */
    --space-strip-y: 2rem;
    --space-footer-top-y: 4rem;
  }
}

@media (max-width: 768px) {
  :root {
    --space-x: 1.25rem;            /* 20px, samain sama .px-64 mobile */
    --space-section-y: 4rem;       /* 64px, samain sama .section-pad-lg mobile */
    --space-strip-y: 1.5rem;
    --space-footer-top-y: 3rem;
    --space-footer-bottom-y: 1rem;
  }

  /* ---- Elemen yang paddingnya HARDCODE px (nggak ikut variable) ---- */
  .ns-hero-7 { padding-bottom: 48px !important; }
  .ns-division-divider-1 { padding: 0 20px !important; margin-bottom: 40px !important; }
  .ns-solutions-intro-2 { padding: 64px 20px 40px !important; }
  .ns-footer-2 { padding-bottom: 40px !important; }

  /* ---- Grid section yang BELUM collapse ke 1 kolom di mobile ----
     Class ini beda nama dari utility .grid-2col/.grid-3col/dst, jadi
     rule collapse generik nggak kena ke sini. Section jadi keperas
     multi-kolom super sempit (kelihatan kayak "menjorok ke dalam"). */
  .ns-about-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ns-facility-services-4 { grid-template-columns: 1fr !important; }
  .ns-rope-access-4 { grid-template-columns: 1fr !important; }
  .ns-why-choose-nsa-8 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ns-featured-projects-8 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ns-featured-projects-30 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ns-contact-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ns-footer-2 { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* Facility/Rope image column ikut nyusut wajar, tinggi diturunin */
  .ns-facility-services-14, .ns-rope-access-5 { min-height: 260px !important; }
  .ns-rope-access-5 { order: -1 !important; } /* gambar tetep di atas teks, senada pola split-section lain */
  .ns-rope-access-10 { order: 2 !important; }
}

@media (max-width: 400px) {
  .ns-hero-7 { padding-bottom: 36px !important; }
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_03.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_04.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_05.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_06.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_07.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_03.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_04.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_05.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_06.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_07.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_03.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_04.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_05.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_06.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_07.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_03.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_04.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_05.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_06.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_07.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/asset_12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/asset_12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/asset_12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/asset_12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: rgb(var(--c-bg)); }
    a { color: rgb(var(--c-gold-muted)); text-decoration: none; }
    a:hover { color: rgb(var(--c-gold)); }
    ::selection { background: rgb(var(--c-gold)); color: rgb(var(--c-bg)); }
    details summary::-webkit-details-marker { display: none; }
    details summary::marker { content: ""; }
    details .sym-minus { display: none; }
    details[open] .sym-plus { display: none; }
    details[open] .sym-minus { display: inline; }
/* ===== Image Slider (Facility Services / Rope Access) ===== */
.img-slider { position:absolute; inset:0; overflow:hidden; }
.img-slider-track { display:flex; height:100%; transition:transform 0.7s cubic-bezier(0.65,0,0.35,1); }
.img-slide { width:100%; height:100%; flex-shrink:0; background-size:cover; background-position:center; filter:grayscale(0.15) contrast(1.06) brightness(0.92); }
.img-slide-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(135deg, rgb(var(--c-card)) 0%, rgb(var(--c-purple)) 100%);
  filter:none;
}
.img-slide-placeholder svg { width:52px; height:52px; stroke:rgb(var(--c-gold)); opacity:0.7; }
.img-slide-placeholder .ph-label {
  font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; letter-spacing:0.05em; color:rgb(var(--c-text));
}
.img-slide-placeholder .ph-sub {
  font-size:12px; color:rgba(var(--c-text), 0.5); letter-spacing:0.03em;
}
.img-slider-caption {
  position:absolute; left:50%; bottom:56px; z-index:2; transform:translateX(-50%);
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.08em;
  color:rgb(var(--c-text)); text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,0.5);
  pointer-events:none; text-align:center; white-space:nowrap;
}
.img-slider-dots {
  position:absolute; left:50%; bottom:24px; z-index:2; display:flex; align-items:center; gap:6px; transform:translateX(-50%);
}
.img-slider-dots button { cursor:pointer; }
/* Dynamic shrinking dot window: only dots near the active slide render at
   full size, further ones shrink and fade, and anything beyond the window
   is hidden — keeps the indicator compact no matter how many slides exist
   (dist is a circular distance from the active slide, set by slider.js).
   Shared with .nsa-lightbox-dot — see the Lightbox section — so the popup's
   dots look and behave exactly the same as the slider's. */

/* ===== Project Status Badge (On Going / Selesai) ===== */
.status-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.06em;
}
.status-badge .dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.status-badge.ongoing { color:rgb(var(--c-gold)); }
.status-badge.ongoing .dot { background:rgb(var(--c-gold)); box-shadow:0 0 0 3px rgba(var(--c-gold), 0.2); }
.status-badge.done { color:rgba(var(--c-text), 0.45); }
.status-badge.done .dot { background:transparent; border:1.5px solid rgba(var(--c-text), 0.4); }

/* ===== Client Logo Ticker (auto-scroll, pause on hover) ===== */
.client-ticker {
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.client-ticker-track {
  display:flex; align-items:center; gap:16px; width:max-content;
  animation: client-ticker-scroll 32s linear infinite;
}
.client-ticker:hover .client-ticker-track { animation-play-state:paused; }
.client-logo {
  background:#FFFFFF; border-radius:8px; padding:30px; width:220px; height:112px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.client-logo img { max-width:100%; max-height:100%; object-fit:contain; }
@keyframes client-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .client-ticker-track { animation: none; }
}

/* ===== Contact Form Focus State ===== */
#nsa-contact-form input:focus,
#nsa-contact-form textarea:focus {
  border-color: rgb(var(--c-gold));
  outline: none;
}
#nsa-form-status.success { color: #6BCF8E; }
#nsa-form-status.error { color: #E08585; }

/* ===== Floating WhatsApp Button ===== */
.wa-float {
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform:scale(1.08); box-shadow:0 12px 30px rgba(0,0,0,0.45); }
.wa-float svg { width:30px; height:30px; }

/* ===== Lightbox ===== */
.nsa-lightbox {
  display:none; position:fixed; inset:0; z-index:200; /* above .nsa-project-modal (100) so the gallery button inside it can open this on top */
  background:rgba(var(--c-bg), 0.94); align-items:center; justify-content:center;
}
.nsa-lightbox.open { display:flex; }
.nsa-lightbox-content {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:82vw; max-height:90vh;
}
/* Shrinks to the rendered photo's own size (not the popup's max-width), so
   position:absolute children below sit right on its edges at any aspect ratio. */
.nsa-lightbox-image-wrap { position:relative; display:inline-block; line-height:0; max-width:100%; }
.nsa-lightbox-img { max-width:82vw; max-height:70vh; object-fit:contain; border-radius:6px; display:block; }
.nsa-lightbox-caption {
  font-family:'Oswald',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.04em; color:rgb(var(--c-text));
}
.nsa-lightbox-close {
  position:absolute; top:24px; right:24px; width:42px; height:42px; font-size:24px; line-height:1;
  background:rgba(var(--c-text), 0.1); border:1px solid rgba(var(--c-text), 0.25);
  color:rgb(var(--c-text)); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.nsa-lightbox-close:hover { background:rgba(var(--c-gold), 0.25); }
/* Positioned relative to .nsa-lightbox-image-wrap (not the full popup), so
   they hug the photo's edges instead of floating in the empty space around it. */
.nsa-lightbox-prev, .nsa-lightbox-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; font-size:26px;
  background:rgba(var(--c-text), 0.1); border:1px solid rgba(var(--c-text), 0.25);
  color:rgb(var(--c-text)); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.nsa-lightbox-prev:hover, .nsa-lightbox-next:hover { background:rgba(var(--c-gold), 0.25); }
.nsa-lightbox-prev { left:12px; }
.nsa-lightbox-next { right:12px; }

/* Same dynamic shrinking-window sizing as .img-slider-dots (data-dist, set by
   NSASlider.applyDotSizes) so the popup's dots look identical to the slider's
   own dots — same rules at every screen width, not just a mobile-only style. */
.nsa-lightbox-dots {
  display:flex; align-items:center; gap:6px; z-index:2;
}
.img-slider-dots button, .nsa-lightbox-dot {
  width:6px; height:6px; border-radius:50%; border:none; padding:0; flex-shrink:0;
  background:rgba(var(--c-text), 0.35);
  transition:width 0.25s ease, height 0.25s ease, opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.img-slider-dots button[data-dist="0"], .nsa-lightbox-dot[data-dist="0"] { width:9px; height:9px; background:rgb(var(--c-gold)); }
.img-slider-dots button[data-dist="1"], .nsa-lightbox-dot[data-dist="1"] { opacity:0.8; }
.img-slider-dots button[data-dist="2"], .nsa-lightbox-dot[data-dist="2"] { width:5px; height:5px; opacity:0.55; }
.img-slider-dots button[data-dist="3"], .nsa-lightbox-dot[data-dist="3"] { width:4px; height:4px; opacity:0.3; }
.img-slider-dots button[data-dist="4"], .nsa-lightbox-dot[data-dist="4"] { display:none; }

@media (max-width: 768px) {
  /* Mobile: keep the arrows (shrunk down) instead of hiding them — swipe and
     autoplay both still work, but an explicit tap target is easy to miss out
     on otherwise, especially for anyone not used to swiping a photo popup. */
  .nsa-lightbox-prev, .nsa-lightbox-next { width:36px; height:36px; font-size:22px; }
  .nsa-lightbox-prev { left:10px; }
  .nsa-lightbox-next { right:10px; }
}

/* ===== Project Detail Modal (Featured Projects) ===== */
.nsa-project-modal {
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(var(--c-bg), 0.94); align-items:center; justify-content:center; padding:24px;
}
.nsa-project-modal.open { display:flex; }
.nsa-project-modal-card {
  width:100%; max-width:920px; max-height:86vh; overflow-y:auto;
  background:rgb(var(--c-card)); border:1px solid rgba(var(--c-gold), 0.25); border-radius:12px;
  display:grid; grid-template-columns:1fr 1fr;
}
.nsa-project-modal-image { position:relative; min-height:340px; background:#070D1C; }
.nsa-project-modal-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.nsa-project-modal-image.has-photo img { display:block; }
.nsa-project-modal-image.has-photo .nsa-project-modal-placeholder { display:none; }
.nsa-project-modal-dots {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.nsa-project-modal-dot {
  width:7px; height:7px; border-radius:50%; background:rgba(var(--c-text), 0.4);
  transition:background 0.2s ease, transform 0.2s ease;
}
.nsa-project-modal-dot.active { background:rgb(var(--c-gold)); transform:scale(1.2); }
.nsa-project-modal-placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:rgba(var(--c-text), 0.35);
}
.nsa-project-modal-placeholder svg { width:44px; height:44px; opacity:0.6; }
.nsa-project-modal-placeholder span { font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:0.04em; }
.nsa-project-modal-gallery-btn {
  display:none; align-items:center; gap:8px;
  position:absolute; left:16px; top:16px; z-index:2;
  padding:9px 15px; border-radius:999px;
  background:rgba(var(--c-bg), 0.75); border:1px solid rgba(var(--c-gold), 0.4);
  color:rgb(var(--c-text)); font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.03em;
  cursor:pointer; transition:background 0.2s ease, border-color 0.2s ease;
}
.nsa-project-modal-gallery-btn svg { width:15px; height:15px; flex:none; }
.nsa-project-modal-gallery-btn:hover { background:rgba(var(--c-gold), 0.25); border-color:rgb(var(--c-gold)); }
.nsa-project-modal-image.has-gallery .nsa-project-modal-gallery-btn { display:flex; }
.nsa-project-modal-body { padding:44px 40px; display:flex; flex-direction:column; justify-content:center; }
.nsa-project-modal-category {
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.1em; color:rgb(var(--c-gold)); margin-bottom:14px;
}
.nsa-project-modal-title {
  font-family:'Oswald',sans-serif; font-size:26px; font-weight:500; color:rgb(var(--c-text)); margin:0 0 10px; letter-spacing:-0.01em;
}
.nsa-project-modal-location { font-size:14px; color:rgba(var(--c-text), 0.6); margin-bottom:22px; }
.nsa-project-modal-status { margin-bottom:18px; }
.nsa-project-modal-meta {
  font-size:13.5px; line-height:1.9; color:rgba(var(--c-text), 0.72);
  border-top:1px solid rgba(var(--c-text), 0.12); padding-top:18px;
}
.nsa-project-modal-close {
  position:fixed; top:24px; right:24px; width:42px; height:42px; font-size:24px; line-height:1;
  background:rgba(var(--c-text), 0.1); border:1px solid rgba(var(--c-text), 0.25);
  color:rgb(var(--c-text)); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease; z-index:101;
}
.nsa-project-modal-close:hover { background:rgba(var(--c-gold), 0.25); }
/* Prev/next live inside .nsa-project-modal-image (position:relative) instead of
   being fixed to the viewport, so they always stay pinned to the photo itself —
   whether it's the full-height left column (desktop) or the shorter stacked
   panel on top (mobile) — rather than floating at the vertical center of
   whatever the total modal height happens to be. */
.nsa-project-modal-prev, .nsa-project-modal-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; font-size:22px;
  background:rgba(var(--c-text), 0.1); border:1px solid rgba(var(--c-text), 0.25);
  color:rgb(var(--c-text)); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.nsa-project-modal-prev:hover, .nsa-project-modal-next:hover { background:rgba(var(--c-gold), 0.25); }
.nsa-project-modal-prev { left:12px; }
.nsa-project-modal-next { right:12px; }
@media (max-width: 760px) {
  .nsa-project-modal-card { grid-template-columns:1fr; }
  .nsa-project-modal-image { min-height:220px; }
  .nsa-project-modal-prev, .nsa-project-modal-next { width:30px; height:30px; font-size:17px; }
}

/* ===== Contact Form — Collapsible Sub-category Checkboxes ===== */
.solusi-sub {
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows 0.25s ease;
  margin-left:26px;
}
.solusi-sub.expanded { grid-template-rows:1fr; }
.solusi-sub-inner {
  min-height:0; overflow:hidden;
  display:flex; flex-direction:column; gap:2px; padding-bottom:6px;
}
.solusi-sub label {
  display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(var(--c-text), 0.7);
  cursor:pointer; padding:6px 0;
}
.solusi-sub input[type="checkbox"] {
  width:14px; height:14px; accent-color:rgb(var(--c-gold));
}

/* ======================================================
   RESPONSIVE — Tablet (<=1024px) & Mobile (<=768px)
   ====================================================== */

/* ---- Hamburger nav toggle (hidden on desktop) ---- */
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:transparent; border:none; cursor:pointer; padding: 10px;
  flex-shrink:0; position:relative; z-index:56;
}
.nav-toggle span {
  display:block; width:24px; height:2px; background:rgb(var(--c-text)); border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---- Tablet breakpoint ---- */
@media (max-width: 1024px) {
  .section-pad-lg { padding:100px 40px !important; }
  .section-pad-lg-y { padding:100px 0 !important; }
  .px-64 { padding-left:40px !important; padding-right:40px !important; }
  .ns-header-inner { padding-left:var(--space-x) !important; padding-right:var(--space-x) !important; max-width:none !important; }
  .footer-bottom-bar, .footer-grid { padding-left:var(--space-x) !important; padding-right:var(--space-x) !important; }
  .hero-inner { padding-left:var(--space-x) !important; padding-right:var(--space-x) !important; }
  .hero-title { font-size:50px !important; }
  .section-title { font-size:32px !important; }
  .division-title { font-size:34px !important; }
  .grid-3col { grid-template-columns:repeat(2, 1fr) !important; }
  .grid-4col { grid-template-columns:repeat(2, 1fr) !important; }
  .split-text-col { padding:48px 40px !important; }
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:40px !important; }
}

/* ---- Mobile breakpoint ---- */
@media (max-width: 768px) {
  /* Header / nav */
  .ns-header-inner { padding:16px var(--space-x) !important; max-width:none !important; }
  .header-brand-tag { display:none; }
  .header-brand-name { font-size:13px !important; }
  .nav-toggle { display:flex; }
  .site-nav {
    display:flex !important; flex-direction:column; align-items:stretch !important; gap:0 !important;
    position:fixed; inset:0; height:100vh; width:100vw;
    background:rgb(var(--c-card));
    padding:96px 32px 40px !important; z-index:55;
    transform:translateX(100%); transition:transform 0.3s ease;
    overflow-y:auto;
  }
  .site-nav.open { transform:translateX(0); }
  .site-nav a {
    padding:18px 0 !important; border-bottom:1px solid rgba(var(--c-text), 0.1);
    text-align:left !important; background:none !important; color:rgb(var(--c-text)) !important;
    box-shadow:none !important; border-radius:0 !important;
    font-size:17px !important;
  }
  .site-nav a:last-child { margin-top:24px; text-align:center !important; background:rgb(var(--c-gold)) !important; color:rgb(var(--c-bg)) !important; border-radius:999px !important; border-bottom:none; padding:18px 0 !important; }

  /* Generic padding resets */
  .section-pad-lg { padding:64px 20px !important; }
  .section-pad-lg-y { padding:64px 0 !important; }
  .px-64 { padding-left:20px !important; padding-right:20px !important; }
  .footer-bottom-bar { padding:22px 20px !important; flex-direction:column; align-items:flex-start !important; gap:14px !important; }
  .footer-grid { padding:56px 20px 40px !important; }

  /* Hero */
  .hero-section { min-height:auto !important; padding-top:110px !important; padding-bottom:40px; }
  .hero-inner { padding:0 20px 48px !important; }
  .hero-title { font-size:34px !important; line-height:1.15 !important; }
  .hero-cta-row { flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
  .hero-cta-row a { text-align:center !important; white-space:nowrap; }

  /* Headings */
  .section-title { font-size:26px !important; }
  .division-title { font-size:28px !important; }

  /* Center section title blocks (kicker + heading + intro paragraph) that are left-aligned by default */
  .mobile-center-block { text-align:center !important; }
  .mobile-center-block > div { justify-content:center !important; }
  .mobile-center-block p { max-width:100% !important; margin-left:auto !important; margin-right:auto !important; }

  /* Frame in ABout Video section for mobile */
  .ns-about-10 {display: none;}

  /* Grids collapse to single column */
  .grid-2col, .grid-2col-tight, .grid-3col, .grid-4col, .featured-main-grid, .footer-grid {
    grid-template-columns:1fr !important;
  }
  .grid-2col { gap:40px !important; }
  .grid-2col-tight { gap:18px !important; }
  .grid-3col, .grid-4col { gap:14px !important; }
  .footer-grid { gap:36px !important; }

  /* Facility Services / Rope Access split sections */
  .split-section .split-media-col { order:-1 !important; min-height:280px !important; }
  .split-text-col { padding:36px 22px !important; }

  /* Contact form card */
  .contact-form-card { padding:26px !important; }

  /* Project cards small grid — Featured Projects 04-07 */
  .grid-4col > div { padding:22px 20px !important; }
}

/* ---- Small mobile (narrow phones) ---- */
@media (max-width: 400px) {
  .hero-title { font-size:28px !important; }
  .section-title { font-size:22px !important; }
}

/* ---- Decorative giant division numbers — shrink on mobile ---- */
@media (max-width: 768px) {
  .division-bignum { font-size:90px !important; }
}

/* ---- Featured Projects meta rows — wrap on narrow screens ---- */
@media (max-width: 768px) {
  div:has(> .status-badge) { flex-wrap:wrap !important; row-gap:8px !important; }
}

/* ===== About Section — Video (lazy autoplay + click-to-fullscreen) ===== */
.about-video-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:64px; height:64px; border-radius:50%; background:rgb(var(--c-gold));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.35); transition:transform 0.2s ease, background 0.2s ease;
  pointer-events:none;
}
.about-video-wrap:hover .about-video-play { transform:translate(-50%, -50%) scale(1.08); background:rgb(var(--c-gold-hover)); }
.about-video-play svg { margin-left:3px; }

.nsa-video-modal {
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(var(--c-bg), 0.94); align-items:center; justify-content:center; padding:24px;
}
.nsa-video-modal.open { display:flex; }
.nsa-video-modal-player {
  max-width:1100px; width:100%; max-height:82vh; border-radius:8px; background:#000;
}
.nsa-video-modal-close {
  position:fixed; top:24px; right:24px; z-index:101;
  width:42px; height:42px; border-radius:50%;
  background:rgba(var(--c-text), 0.1); border:1px solid rgba(var(--c-text), 0.25);
  color:rgb(var(--c-text)); font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.nsa-video-modal-close:hover { background:rgba(var(--c-gold), 0.25); }

/* ===== Safety Claim Dot Indicator (matches status-badge dot pattern) ===== */
.safety-claim {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:rgba(var(--c-text), 0.72);
}
.safety-claim .dot {
  width:6px; height:6px; border-radius:50%; background:rgb(var(--c-gold)); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(var(--c-gold), 0.18);
}

/* ===== Mobile fixes batch 2 ===== */
.kicker-line-right { display:none; }

@media (max-width: 768px) {
  .scroll-hint { display:none !important; }
  .mobile-center-block .kicker-line-right { display:inline-block; }
  .cta-pill { align-self:center !important; }
  .claim-strip {
    padding:28px 22px !important; flex-direction:column !important; align-items:flex-start !important;
  }

  /* Footer — center everything except the address paragraph */
  .footer-grid { text-align:center; }
  .footer-grid > div { display:flex; flex-direction:column; align-items:center; }
  .footer-grid a, .footer-grid span:not(.footer-address) { text-align:center; }
  .footer-address { text-align:left; max-width:280px; }
  .footer-bottom-bar { flex-direction:column; align-items:center !important; text-align:center; padding-bottom:110px !important; }
}

/* ======================================================
   NSA PAGE COMPONENT CLASSES
   Digenerate dari inline style asli — dikelompokkan per section
   (ns-{section}-{urutan}). Hover state sekarang pakai :hover
   CSS asli, bukan JS lagi.
   ====================================================== */
.ns-root-1 { font-family:'Inter',sans-serif; color:#1B2431; background:rgb(var(--c-bg)); width:100%; overflow-x:clip; }
.ns-header-1 { position:sticky; top:0; z-index:50; background:rgba(7,13,28,0.97); backdrop-filter:blur(6px); border-bottom:1px solid rgba(var(--c-gold), 0.22); box-shadow:0 8px 24px rgba(0,0,0,0.18); }
.ns-header-inner { max-width: 1360px; margin: 0 auto; width: 100%; padding: var(--space-header-y) var(--space-x); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; }
.ns-header-2 { display:flex; align-items:center; gap:16px; }
.ns-header-3 { width:36px; height:36px; object-fit:contain; flex-shrink:0; }
.ns-header-4 { display:flex; flex-direction:column; line-height:1.1; padding-left:16px; border-left:1px solid rgba(var(--c-text), 0.18); }
.ns-header-5 { font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:rgb(var(--c-text)); letter-spacing:0.06em; }
.ns-header-6 { font-size:10px; font-weight:500; color:rgb(var(--c-gold-muted)); letter-spacing:0.2em; }
.ns-header-7 { display:flex; align-items:center; gap:38px; }
.ns-header-8 { font-size:13.5px; font-weight:500; letter-spacing:0.02em; color:rgba(var(--c-text), 0.72); transition:color 0.2s ease; }
.ns-header-8:hover { color:rgb(var(--c-text)); }
.ns-header-9 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.06em; color:rgb(var(--c-bg)); background:rgb(var(--c-gold)); padding:12px 24px; border-radius:999px; transition:all 0.2s ease; box-shadow:0 0 0 rgba(var(--c-gold), 0); }
.ns-header-9:hover { background:rgb(var(--c-gold-hover)); transform:translateY(-1px); box-shadow:0 8px 20px rgba(var(--c-gold), 0.28); }
.ns-hero-1 { position:relative; min-height:96vh; display:flex; align-items:flex-end; background:rgb(var(--c-bg)); overflow:hidden; padding-top:140px; }
.ns-hero-2 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:grayscale(0.15) contrast(1.08) brightness(0.88) saturate(1.05); }
.ns-hero-3 { position:absolute; inset:0; background:rgb(var(--c-card)); mix-blend-mode:multiply; opacity:0.3; }
.ns-hero-4 { position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--c-bg), 0.2) 0%, rgba(var(--c-bg), 0.12) 35%, rgba(var(--c-bg), 0.78) 78%, rgb(var(--c-bg)) 100%); }
.ns-hero-5 { position:absolute; inset:0; background:linear-gradient(100deg, rgba(var(--c-bg), 0.6) 0%, rgba(var(--c-bg), 0.05) 45%); }
.ns-hero-6 { position:absolute; inset:0; background:radial-gradient(ellipse 1000px 800px at 92% 4%, rgba(var(--c-accent-purple), 0.55) 0%, rgba(var(--c-accent-purple-dark), 0.15) 45%, rgba(var(--c-accent-purple-dark), 0) 68%); }
.ns-hero-7 { position:relative; max-width:1360px; margin:0 auto; padding:0 var(--space-x) 100px; width:100%; }
.ns-hero-8 { max-width:740px; }
.ns-hero-9 { display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.ns-hero-10 { width:40px; height:1px; background:rgb(var(--c-gold)); }
.ns-hero-11 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.32em; color:rgb(var(--c-gold)); }
.ns-hero-12 { font-family:'Oswald',sans-serif; font-size:66px; line-height:1.08; font-weight:600; color:rgb(var(--c-text)); margin:0 0 30px; letter-spacing:-0.02em; text-shadow:0 4px 28px rgba(0,0,0,0.35); }
.ns-hero-13 { font-size:17px; line-height:1.75; color:rgba(var(--c-text), 0.78); margin:0 0 40px; max-width:560px; font-weight:400; }
.ns-hero-14 { display:flex; gap:18px; }
.ns-hero-15 { font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.05em; color:rgb(var(--c-bg)); background:rgb(var(--c-gold)); padding:17px 34px; border-radius:999px; transition:all 0.2s ease; }
.ns-hero-15:hover { background:rgb(var(--c-gold-hover)); transform:translateY(-2px); box-shadow:0 12px 28px rgba(var(--c-gold), 0.3); }
.ns-hero-16 { font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.05em; color:rgb(var(--c-text)); background:transparent; border:1px solid rgba(var(--c-text), 0.35); padding:17px 34px; border-radius:999px; transition:all 0.2s ease; }
.ns-hero-16:hover { border-color:rgb(var(--c-text)); background:rgba(var(--c-text), 0.06); }
.ns-hero-17 { margin-top:36px; border-top:1px solid rgba(var(--c-text), 0.16); padding-top:26px; max-width:520px; display:flex; gap:14px; flex-wrap:wrap; }
.ns-hero-18 { display:flex; align-items:center; gap:10px; padding:14px 20px; border:1px solid rgba(var(--c-text), 0.22); border-radius:999px; transition:all 0.2s ease; }
.ns-hero-18:hover { border-color:rgb(var(--c-gold)); background:rgba(var(--c-gold), 0.08); }
.ns-hero-19 { font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.04em; color:rgb(var(--c-text)); }
.ns-hero-20 { font-size:15px; color:rgb(var(--c-gold)); }
.ns-hero-21 { position:absolute; right:64px; bottom:52px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ns-hero-22 { font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:0.24em; color:rgba(var(--c-text), 0.5); writing-mode:vertical-rl; }
.ns-hero-23 { width:1px; height:50px; background:linear-gradient(180deg, rgba(var(--c-gold), 0.9), rgba(var(--c-gold), 0)); }
.ns-about-1 { background:rgb(var(--c-bg)); }
.ns-about-2 { max-width:1360px; margin:0 auto; padding:var(--space-section-y) var(--space-x); box-sizing:border-box; display:grid; grid-template-columns:1fr 0.92fr; gap:88px; align-items:center; }
.ns-about-3 { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.ns-about-4 { width:32px; height:1px; background:rgb(var(--c-gold-muted)); }
.ns-about-5 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.26em; color:rgb(var(--c-gold-muted)); margin:0; }
.ns-about-6 { font-size:16px; line-height:1.85; color:rgba(var(--c-text), 0.68); margin:0 0 24px; }
.ns-about-7 { font-size:16px; line-height:1.85; color:rgba(var(--c-text), 0.68); margin:0 0 40px; }
.ns-about-8 { display:grid; grid-template-columns:1fr 1fr; gap:24px 36px; border-top:1px solid rgba(var(--c-text), 0.14); padding-top:32px; }
.ns-about-9 { position:relative; }
.ns-about-10 { position:absolute; top:-18px; left:-18px; width:100%; height:100%; border:1px solid rgb(var(--c-gold)); border-radius:8px; }
.ns-about-11 { position:relative; border-radius:8px; overflow:hidden; cursor:pointer; }
.ns-about-12 { position:relative; width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; object-position:center; display:block; filter:grayscale(0.2) contrast(1.06) brightness(0.94); background:rgb(var(--c-card)); }
.ns-about-13 { position:absolute; inset:0; background:rgb(var(--c-card)); mix-blend-mode:multiply; opacity:0.18; pointer-events:none; }
.ns-about-14 { position:absolute; top:16px; left:16px; width:22px; height:22px; border-top:2px solid rgb(var(--c-gold)); border-left:2px solid rgb(var(--c-gold)); pointer-events:none; }
.ns-about-15 { position:absolute; bottom:16px; right:16px; width:22px; height:22px; border-bottom:2px solid rgb(var(--c-gold)); border-right:2px solid rgb(var(--c-gold)); pointer-events:none; }
.ns-solutions-facility-rope-1 { background:linear-gradient(180deg, rgb(var(--c-bg)) 0%, rgb(var(--c-purple)) 35%, rgb(var(--c-purple)) 65%, rgb(var(--c-bg)) 100%); }
.ns-solutions-intro-1 { }
.ns-solutions-intro-2 { max-width:1360px; margin:0 auto; padding:112px var(--space-x) 72px; box-sizing:border-box; text-align:center; }
.ns-solutions-intro-3 { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.ns-solutions-intro-4 { width:32px; height:1px; background:rgb(var(--c-gold)); }
.ns-solutions-intro-5 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.26em; color:rgb(var(--c-gold)); margin:0; }
.ns-solutions-intro-6 { font-size:16px; line-height:1.75; color:rgba(var(--c-text), 0.62); max-width:600px; margin:0; display: contents; }
.ns-facility-services-1 { padding:0 var(--space-x) var(--space-section-y); }
.ns-facility-services-2 { max-width:calc(1360px - 2 * var(--space-x)); margin:0 auto; background:rgb(var(--c-card)); border:1px solid rgba(var(--c-gold), 0.2); border-radius:8px; position:relative; overflow:hidden; }
.ns-facility-services-3 { position:absolute; top:8px; right:32px; font-family:'Oswald',sans-serif; font-size:160px; font-weight:700; color:rgba(var(--c-gold), 0.05); line-height:1; pointer-events:none; user-select:none; }
.ns-facility-services-4 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:stretch; position:relative; }
.ns-facility-services-5 { padding:2.5rem; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.ns-facility-services-6 { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.ns-facility-services-7 { width:26px; height:1px; background:rgb(var(--c-gold)); }
.ns-facility-services-8 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.2em; color:rgb(var(--c-gold)); }
.ns-facility-services-9 { font-family:'Oswald',sans-serif; font-size:44px; font-weight:500; color:rgb(var(--c-text)); margin:0 0 24px; line-height:1.08; letter-spacing:-0.01em; }
.ns-facility-services-10 { font-size:15.5px; line-height:1.85; color:rgba(var(--c-text), 0.68); margin:0 0 38px; max-width:460px; }
.ns-facility-services-11 { display:flex; flex-direction:column; border-top:1px solid rgba(var(--c-text), 0.12); }
.ns-facility-services-12 { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 38px; }
.ns-facility-services-13 { display:inline-block; align-self:flex-start; font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.05em; color:rgb(var(--c-bg)); background:rgb(var(--c-gold)); padding:17px 32px; border-radius:999px; transition:all 0.2s ease; }
.ns-facility-services-13:hover { background:rgb(var(--c-gold-hover)); transform:translateY(-2px); box-shadow:0 12px 28px rgba(var(--c-gold), 0.3); }
.ns-facility-services-14 { position:relative; min-height:660px; min-width:0; overflow:hidden; }
.ns-facility-services-15 { position:absolute; inset:0; background:rgb(var(--c-card)); mix-blend-mode:multiply; opacity:0.2; pointer-events:none; }
.ns-facility-services-16 { position:absolute; inset:0; background:linear-gradient(90deg, rgba(var(--c-card), 0.4) 0%, rgba(var(--c-card), 0) 32%); pointer-events:none; }
.ns-facility-services-17 { position:absolute; top:24px; right:24px; width:22px; height:22px; border-top:2px solid rgba(var(--c-gold), 0.7); border-right:2px solid rgba(var(--c-gold), 0.7); }
.ns-facility-services-18 { position:absolute; bottom:24px; left:24px; width:22px; height:22px; border-bottom:2px solid rgba(var(--c-gold), 0.7); border-left:2px solid rgba(var(--c-gold), 0.7); }
.ns-division-divider-1 { max-width:1360px; margin:0 auto; padding:0 64px; }
.ns-division-divider-2 { height:1px; background:linear-gradient(90deg, rgba(var(--c-gold), 0) 0%, rgba(var(--c-accent-purple), 0.7) 50%, rgba(var(--c-gold), 0) 100%); margin-bottom:64px; }
.ns-rope-access-1 { padding:0 var(--space-x) var(--space-section-y); }
.ns-rope-access-2 { max-width:calc(1360px - 2 * var(--space-x)); margin:0 auto; background:rgb(var(--c-card)); border:1px solid rgba(var(--c-gold), 0.2); border-radius:8px; position:relative; overflow:hidden; }
.ns-rope-access-3 { position:absolute; top:8px; left:32px; font-family:'Oswald',sans-serif; font-size:160px; font-weight:700; color:rgba(var(--c-gold), 0.05); line-height:1; pointer-events:none; user-select:none; }
.ns-rope-access-4 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:stretch; position:relative; }
.ns-rope-access-5 { position:relative; min-height:660px; order:1; min-width:0; overflow:hidden; }
.ns-rope-access-6 { position:absolute; inset:0; background:rgb(var(--c-card)); mix-blend-mode:multiply; opacity:0.2; pointer-events:none; }
.ns-rope-access-7 { position:absolute; inset:0; background:linear-gradient(270deg, rgba(var(--c-card), 0.4) 0%, rgba(var(--c-card), 0) 32%); pointer-events:none; }
.ns-rope-access-8 { position:absolute; top:24px; left:24px; width:22px; height:22px; border-top:2px solid rgba(var(--c-gold), 0.7); border-left:2px solid rgba(var(--c-gold), 0.7); }
.ns-rope-access-9 { position:absolute; bottom:24px; right:24px; width:22px; height:22px; border-bottom:2px solid rgba(var(--c-gold), 0.7); border-right:2px solid rgba(var(--c-gold), 0.7); }
.ns-rope-access-10 { padding:2.5rem; display:flex; flex-direction:column; justify-content:center; order:2; min-width:0; }
.ns-rope-access-11 { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.ns-rope-access-12 { width:26px; height:1px; background:rgb(var(--c-gold)); }
.ns-rope-access-13 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.2em; color:rgb(var(--c-gold)); }
.ns-rope-access-14 { font-family:'Oswald',sans-serif; font-size:44px; font-weight:500; color:rgb(var(--c-text)); margin:0 0 24px; line-height:1.08; letter-spacing:-0.01em; }
.ns-rope-access-15 { font-size:15.5px; line-height:1.85; color:rgba(var(--c-text), 0.68); margin:0 0 38px; max-width:460px; }
.ns-rope-access-16 { display:flex; flex-direction:column; border-top:1px solid rgba(var(--c-text), 0.12); }
.ns-rope-access-17 { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 38px; }
.ns-rope-access-18 { display:inline-block; align-self:flex-start; font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.05em; color:rgb(var(--c-bg)); background:rgb(var(--c-gold)); padding:17px 32px; border-radius:999px; transition:all 0.2s ease; }
.ns-rope-access-18:hover { background:rgb(var(--c-gold-hover)); transform:translateY(-2px); box-shadow:0 12px 28px rgba(var(--c-gold), 0.3); }
.ns-safety-certification-str-1 { padding:var(--space-strip-y) var(--space-x); border-top:1px solid rgba(var(--c-gold), 0.2); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; }
.ns-safety-certification-str-2 { font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.14em; color:rgb(var(--c-gold)); flex-shrink:0; }
.ns-safety-certification-str-3 { display:flex; flex-wrap:wrap; gap:16px 30px; }
.ns-why-choose-nsa-1 { background:rgb(var(--c-bg)); }
.ns-why-choose-nsa-2 { max-width:1360px; margin:0 auto; padding:var(--space-section-y) var(--space-x); box-sizing:border-box; }
.ns-why-choose-nsa-3 { text-align:center; margin-bottom:72px; }
.ns-why-choose-nsa-4 { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.ns-why-choose-nsa-5 { width:32px; height:1px; background:rgb(var(--c-gold-muted)); }
.ns-why-choose-nsa-6 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.26em; color:rgb(var(--c-gold-muted)); }
.ns-why-choose-nsa-7 { font-family:'Oswald',sans-serif; font-size:40px; font-weight:500; color:rgb(var(--c-text)); margin:0; letter-spacing:-0.01em; }
.ns-why-choose-nsa-8 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ns-why-choose-nsa-9 { margin-top:48px; background:rgb(var(--c-card)); padding:var(--space-strip-y) var(--space-x); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; border-left:2px solid rgb(var(--c-gold)); border-radius:8px; }
.ns-why-choose-nsa-10 { font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.14em; color:rgb(var(--c-gold)); flex-shrink:0; }
.ns-why-choose-nsa-11 { display:flex; flex-wrap:wrap; gap:18px 32px; }
.ns-featured-projects-1 { background:rgb(var(--c-bg)); }
.ns-featured-projects-2 { max-width:1360px; margin:0 auto; padding:var(--space-section-y) var(--space-x); box-sizing:border-box; }
.ns-featured-projects-3 { text-align:center; margin-bottom:72px; }
.ns-featured-projects-4 { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.ns-featured-projects-5 { width:32px; height:1px; background:rgb(var(--c-gold)); }
.ns-featured-projects-6 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.26em; color:rgb(var(--c-gold)); }
.ns-featured-projects-7 { font-family:'Oswald',sans-serif; font-size:40px; font-weight:500; color:rgb(var(--c-text)); margin:0; letter-spacing:-0.01em; }
.ns-featured-projects-8 { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; margin-bottom:24px; }
.ns-featured-projects-9 { position:relative; height:660px; overflow:hidden; border-radius:8px; cursor:pointer; }
.ns-featured-projects-10 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.08) brightness(0.9) saturate(1.05); transition:transform 0.6s ease; }
.ns-featured-projects-10:hover { transform:scale(1.04); }
.ns-featured-projects-11 { position:absolute; inset:0; background:rgb(var(--c-card)); mix-blend-mode:multiply; opacity:0.12; pointer-events:none; }
.ns-featured-projects-12 { position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--c-bg), 0.94) 0%, rgba(var(--c-bg), 0.32) 48%, rgba(var(--c-bg), 0.02) 70%); pointer-events:none; }
.ns-featured-projects-13 { position:absolute; top:28px; left:28px; display:flex; align-items:center; gap:10px; pointer-events:none; }
.ns-featured-projects-14 { font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.14em; color:rgb(var(--c-bg)); background:rgb(var(--c-gold)); padding:8px 14px; border-radius:8px; }
.ns-featured-projects-15 { position:absolute; top:24px; right:24px; width:22px; height:22px; border-top:2px solid rgba(var(--c-gold), 0.7); border-right:2px solid rgba(var(--c-gold), 0.7); pointer-events:none; }
.ns-featured-projects-16 { position:absolute; left:0; right:0; bottom:0; padding:44px; pointer-events:none; }
.ns-featured-projects-17 { font-family:'Oswald',sans-serif; font-size:13px; color:rgba(var(--c-gold), 0.9); letter-spacing:0.08em; margin-bottom:12px; }
.ns-featured-projects-18 { font-family:'Oswald',sans-serif; font-size:29px; font-weight:500; color:rgb(var(--c-text)); margin-bottom:10px; letter-spacing:-0.01em; }
.ns-featured-projects-19 { font-size:13.5px; color:rgba(var(--c-text), 0.65); margin-bottom:20px; }
.ns-featured-projects-20 { display:flex; gap:24px; font-size:12.5px; color:rgb(var(--c-gold)); letter-spacing:0.03em; border-top:1px solid rgba(var(--c-text), 0.2); padding-top:18px; align-items:center; }
.ns-featured-projects-21 { display:flex; flex-direction:column; gap:24px; }
/* flex:1 (not a fixed px height) so this column keeps splitting evenly across
   however many photo cards it holds — matching the hero's height on desktop
   (where the grid row stretches this column to 660px) — while min-height
   keeps each card a sane size if it ever renders full-width on its own. */
.ns-featured-projects-22 { position:relative; flex:1 1 0; min-height:190px; overflow:hidden; border-radius:8px; cursor:pointer; }
.ns-featured-projects-23 { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.2) contrast(1.1) brightness(0.86); transition:transform 0.6s ease; }
.ns-featured-projects-23:hover { transform:scale(1.04); }
.ns-featured-projects-24 { position:absolute; inset:0; background:rgb(var(--c-card)); mix-blend-mode:multiply; opacity:0.2; pointer-events:none; }
.ns-featured-projects-25 { position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--c-bg), 0.92) 0%, rgba(var(--c-bg), 0.18) 58%, rgba(var(--c-bg), 0) 78%); pointer-events:none; }
.ns-featured-projects-26 { position:absolute; left:0; right:0; bottom:0; padding:28px; pointer-events:none; }
.ns-featured-projects-27 { font-family:'Oswald',sans-serif; font-size:11px; color:rgba(var(--c-gold), 0.85); letter-spacing:0.08em; margin-bottom:8px; }
.ns-featured-projects-28 { font-family:'Oswald',sans-serif; font-size:19px; font-weight:500; color:rgb(var(--c-text)); margin-bottom:6px; letter-spacing:-0.01em; }
.ns-featured-projects-29 { display:flex; align-items:center; gap:14px; font-size:12px; color:rgb(var(--c-gold)); letter-spacing:0.03em; }
.ns-featured-projects-30 { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.ns-featured-projects-31 { border:1px solid rgba(var(--c-text), 0.12); border-top:2px solid transparent; border-radius:8px; padding:28px 26px 26px; transition:all 0.25s ease; cursor:pointer; }
.ns-featured-projects-31:hover { border-top-color:rgb(var(--c-gold)); border-color:rgba(var(--c-accent-purple), 0.5); background:rgba(var(--c-accent-purple-dark), 0.08); transform:translateY(-2px); }
.ns-featured-projects-32 { font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; color:rgb(var(--c-gold)); letter-spacing:0.06em; margin-bottom:14px; }
.ns-featured-projects-33 { font-family:'Oswald',sans-serif; font-size:15px; font-weight:500; color:rgb(var(--c-text)); margin-bottom:9px; }
.ns-featured-projects-34 { font-size:12.5px; color:rgba(var(--c-text), 0.45); margin-bottom:16px; }
.ns-featured-projects-35 { display:flex; align-items:center; gap:12px; font-size:11.5px; color:rgb(var(--c-gold-muted)); letter-spacing:0.03em; }
.ns-our-clients-1 { padding:var(--space-section-y) 0; background:rgb(var(--c-bg)); }
.ns-our-clients-2 { max-width:1360px; margin:0 auto; padding:0 var(--space-x); }
.ns-our-clients-3 { text-align:center; margin-bottom:64px; }
.ns-our-clients-4 { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.ns-our-clients-5 { width:32px; height:1px; background:rgb(var(--c-gold-muted)); }
.ns-our-clients-6 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.26em; color:rgb(var(--c-gold-muted)); }
.ns-our-clients-7 { font-family:'Oswald',sans-serif; font-size:40px; font-weight:500; color:rgb(var(--c-text)); margin:0; letter-spacing:-0.01em; }
.ns-contact-1 { background:rgb(var(--c-bg)); }
.ns-contact-2 { max-width:1360px; margin:0 auto; padding:var(--space-section-y) var(--space-x); box-sizing:border-box; display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; }
.ns-contact-3 { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.ns-contact-4 { width:32px; height:1px; background:rgb(var(--c-gold)); }
.ns-contact-5 { font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.26em; color:rgb(var(--c-gold)); }
.ns-contact-6 { font-family:'Oswald',sans-serif; font-size:40px; font-weight:500; color:rgb(var(--c-text)); margin:0 0 22px; line-height:1.18; letter-spacing:-0.01em; }
.ns-contact-7 { font-size:15.5px; line-height:1.8; color:rgba(var(--c-text), 0.6); margin:0 0 44px; }
.ns-contact-8 { display:flex; flex-direction:column; gap:26px; }
.ns-contact-9 { display:flex; gap:18px; align-items:flex-start; }
.ns-contact-10 { width:40px; height:40px; background:rgb(var(--c-gold)); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ns-contact-11 { font-size:14.5px; line-height:1.7; color:rgba(var(--c-text), 0.75); padding-top:8px; }
.ns-contact-12 { display:flex; gap:18px; align-items:center; }
.ns-contact-13 { font-size:14.5px; color:rgba(var(--c-text), 0.75); }
.ns-contact-14 { background:rgb(var(--c-card)); border:1px solid rgba(var(--c-gold), 0.2); border-radius:8px; padding:52px; }
.ns-contact-15 { display:none; }
.ns-contact-16 { display:flex; flex-direction:column; gap:24px; }
.ns-contact-17 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ns-contact-18 { display:block; font-size:12px; font-weight:500; letter-spacing:0.06em; color:rgba(var(--c-text), 0.55); margin-bottom:9px; }
.ns-contact-19 { width:100%; background:rgb(var(--c-bg)); border:1px solid rgba(var(--c-text), 0.15); border-radius:8px; color:rgb(var(--c-text)); padding:14px 16px; font-size:14px; font-family:'Inter',sans-serif; transition:border-color 0.2s ease; }
.ns-contact-20 { display:flex; flex-direction:column; gap:4px; background:rgb(var(--c-bg)); border:1px solid rgba(var(--c-text), 0.15); border-radius:8px; padding:16px; }
.ns-contact-21 { display:flex; align-items:center; gap:10px; font-size:14px; color:rgb(var(--c-text)); cursor:pointer; padding:8px 0; }
.ns-contact-22 { width:16px; height:16px; accent-color:rgb(var(--c-gold)); }
.ns-contact-23 { width:100%; background:rgb(var(--c-bg)); border:1px solid rgba(var(--c-text), 0.15); border-radius:8px; color:rgb(var(--c-text)); padding:14px 16px; font-size:14px; font-family:'Inter',sans-serif; resize:vertical; transition:border-color 0.2s ease; }
.ns-contact-24 { font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.05em; color:rgb(var(--c-bg)); background:rgb(var(--c-gold)); border:none; border-radius:999px; padding:17px; cursor:pointer; transition:all 0.2s ease; }
.ns-contact-24:hover { background:rgb(var(--c-gold-hover)); box-shadow:0 12px 28px rgba(var(--c-gold), 0.3); }
.ns-contact-25 { font-size:13.5px; text-align:center; margin:0; min-height:18px; }
.ns-footer-1 { background:#070D1C; border-top:1px solid rgba(var(--c-gold), 0.2); }
.ns-footer-2 { max-width:1360px; margin:0 auto; padding:var(--space-footer-top-y) var(--space-x) 56px; display:grid; grid-template-columns:1.3fr 0.8fr 0.8fr 1.1fr; gap:56px; }
.ns-footer-3 { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.ns-footer-4 { width:34px; height:34px; object-fit:contain; }
.ns-footer-5 { display:flex; flex-direction:column; line-height:1.1; }
.ns-footer-6 { font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; color:rgb(var(--c-text)); letter-spacing:0.04em; }
.ns-footer-7 { font-size:9.5px; font-weight:500; color:rgb(var(--c-gold-muted)); letter-spacing:0.16em; }
.ns-footer-8 { font-size:13.5px; line-height:1.8; color:rgba(var(--c-text), 0.5); max-width:320px; margin:0; }
.ns-footer-9 { font-family:'Oswald',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.14em; color:rgb(var(--c-gold)); margin-bottom:24px; }
.ns-footer-10 { display:flex; flex-direction:column; gap:14px; }
.ns-footer-11 { font-size:13.5px; color:rgba(var(--c-text), 0.6); transition:color 0.2s ease; }
.ns-footer-11:hover { color:rgb(var(--c-text)); }
.ns-footer-12 { display:flex; flex-direction:column; gap:16px; }
.ns-footer-13 { font-size:13.5px; line-height:1.7; color:rgba(var(--c-text), 0.6); }
.ns-footer-14 { max-width:1360px; margin:0 auto; padding:var(--space-footer-bottom-y) var(--space-x); border-top:1px solid rgba(var(--c-text), 0.1); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.ns-footer-15 { font-size:12.5px; color:rgba(var(--c-text), 0.4); }
.ns-footer-16 { display:flex; gap:28px; }
.ns-footer-17 { font-size:12.5px; color:rgba(var(--c-text), 0.4); transition:color 0.2s ease; }
.ns-footer-17:hover { color:rgb(var(--c-text)); }

/* ======================================================
   DYNAMIC CONTENT CLASSES
   Dipakai oleh content-loader.js buat elemen yang dirender
   dari JSON (accordion, Why Choose NSA, poin About, dst).
   ====================================================== */

/* Accordion items (Facility Services / Rope Access) */
.dyn-accordion-item { border-bottom: 1px solid rgba(var(--c-text), 0.12); }
.dyn-accordion-summary { display: flex; align-items: center; gap: 16px; padding: 16px 4px; cursor: pointer; }
.dyn-accordion-icon-wrap {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 8px; background: rgba(var(--c-accent-purple-dark), 0.18);
  border: 1px solid rgba(var(--c-accent-purple-dark), 0.4); color: rgb(var(--c-gold)); flex-shrink: 0;
}
.dyn-accordion-title { font-family: 'Oswald', sans-serif; font-size: 16.5px; font-weight: 500; color: rgb(var(--c-text)); flex: 1; }
.dyn-accordion-toggle { font-size: 15px; font-weight: 500; color: rgb(var(--c-gold)); }
.dyn-accordion-desc { font-size: 13.5px; line-height: 1.7; color: rgba(var(--c-text), 0.62); margin: 0 0 16px 50px; }

/* Tags line under accordion */
.dyn-tags-text { font-size: 12.5px; color: rgba(var(--c-text), 0.55); line-height: 1.6; }

/* Why Choose NSA cards */
.dyn-why-card {
  background: rgb(var(--c-card)); padding: 46px 40px; border: 1px solid rgba(var(--c-text), 0.1);
  border-top: 2px solid transparent; border-radius: 8px; transition: all 0.25s ease;
}
.dyn-why-card:hover {
  border-top-color: rgb(var(--c-gold));
  box-shadow: 0 24px 44px rgba(var(--c-accent-purple-dark), 0.28);
  transform: translateY(-3px);
}
.dyn-why-icon-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(var(--c-text), 0.12); }
.dyn-why-icon-wrap {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--c-accent-purple-dark), 0.35), rgba(var(--c-accent-purple-dark), 0.1));
  border: 1px solid rgba(var(--c-accent-purple), 0.5); color: rgb(var(--c-gold)); flex-shrink: 0;
}
.dyn-why-title { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; color: rgb(var(--c-text)); margin-bottom: 12px; }
.dyn-why-desc { font-size: 14px; line-height: 1.75; color: rgba(var(--c-text), 0.62); }

/* Jaminan Kami list items */
.dyn-jaminan-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(var(--c-text), 0.72); }
.dyn-jaminan-dot { width: 5px; height: 5px; background: rgb(var(--c-gold)); flex-shrink: 0; }

/* About section value points */
.dyn-point-item { display: flex; gap: 14px; align-items: flex-start; }
.dyn-point-dot { width: 6px; height: 6px; margin-top: 8px; background: rgb(var(--c-gold)); flex-shrink: 0; }
.dyn-point-text { font-size: 14.5px; line-height: 1.65; color: rgba(var(--c-text), 0.68); }


/* ======================================================
   FIX: Double padding kiri-kanan di mobile & tablet
   Wrapper luar (.ns-about-1, .ns-why-choose-nsa-1, dst)
   kemungkinan kebawa class utility "section-pad-lg" di HTML,
   yang nambah padding LAGI di atas padding elemen -2 di
   dalamnya — hasilnya dobel inset (kelihatan "menjorok").
   Nolin padding kiri-kanan wrapper luar ini, biar cuma
   padding dari elemen -2 (var(--space-x)) yang berlaku,
   sama kayak header.
   ====================================================== */
@media (max-width: 1024px) {
  .ns-about-1,
  .ns-why-choose-nsa-1,
  .ns-featured-projects-1,
  .ns-contact-1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}