/* =============================================
   0. FONTS (self-hosted — no external request)
   Roboto Condensed variable font, satu file untuk
   semua weight 100-900. Subset latin-ext hanya
   ter-download kalau ada karakter yang butuh.
   ============================================= */

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/roboto-condensed-latin-ext.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;
}

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/roboto-condensed-latin.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;
}

/* =============================================
   1. DESIGN SYSTEM (CSS VARIABLES)
   ============================================= */

:root {
    --teal:       #008080;
    --teal-dark:  #006666;
    --navy:       #003233;
    --bg-light:   #EBEFF7;
    --white:      #ffffff;
    --font:       'Roboto Condensed', sans-serif;

    /* ---------------------------------------------
       SKALA TIPOGRAFI — fluid, berbasis rem

       Satuan rem (bukan px) supaya ukuran ikut
       membesar kalau pengunjung menaikkan ukuran
       font di setelan browser/HP-nya. px mengabaikan
       setelan itu.

       clamp(min, fluid, max): ukuran naik mulus
       mengikuti lebar layar dari HP (375px) sampai
       desktop (1440px), jadi tablet tidak lagi
       kebagian ukuran desktop.

       Angka min/max diturunkan dari ukuran yang
       SUDAH dipakai di situs ini, dinaikkan tipis —
       supaya proporsi desain lama tetap terjaga.
       --------------------------------------------- */
    --fs-3xs:  clamp(0.688rem, 0.666rem + 0.094vw, 0.75rem);   /* 11  → 12   */
    --fs-2xs:  clamp(0.75rem,  0.717rem + 0.141vw, 0.844rem);  /* 12  → 13.5 */
    --fs-xs:   clamp(0.813rem, 0.769rem + 0.188vw, 0.938rem);  /* 13  → 15   */
    --fs-sm:   clamp(0.906rem, 0.873rem + 0.141vw, 1rem);      /* 14.5→ 16   */
    --fs-base: clamp(0.969rem, 0.925rem + 0.188vw, 1.094rem);  /* 15.5→ 17.5 */
    --fs-md:   clamp(1.063rem, 1.008rem + 0.235vw, 1.219rem);  /* 17  → 19.5 */
    --fs-lg:   clamp(1.313rem, 1.269rem + 0.188vw, 1.438rem);  /* 21  → 23   */
    --fs-xl:   clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem);   /* 22  → 28   */
    --fs-2xl:  clamp(1.688rem, 1.511rem + 0.751vw, 2.188rem);  /* 27  → 35   */
    --fs-3xl:  clamp(2.125rem, 1.905rem + 0.939vw, 2.75rem);   /* 34  → 44   */
    --fs-4xl:  clamp(2.125rem, 1.817rem + 1.315vw, 3rem);      /* 34  → 48   */
    --fs-5xl:  clamp(2.125rem, 1.729rem + 1.69vw,  3.25rem);   /* 34  → 52   */
    --fs-6xl:  clamp(2.125rem, 1.553rem + 2.441vw, 3.75rem);   /* 34  → 60   */

    /* Angka display besar (statistik, nomor kartu).
       Sengaja tetap besar di HP karena perannya visual,
       bukan teks bacaan — kalau ikut skala teks biasa,
       angka-angka ini kehilangan bobotnya di layar kecil. */
    --fs-num-sm: clamp(2.625rem, 2.383rem + 1.033vw, 3.313rem); /* 42 → 53 */
    --fs-num-md: clamp(2.5rem,   2.082rem + 1.784vw, 3.688rem); /* 40 → 59 */
    --fs-num-lg: clamp(3rem,     2.604rem + 1.69vw,  4.125rem); /* 48 → 66 */

    /* ---------------------------------------------
       SKALA JARAK — padding vertikal section
       Ikut fluid supaya ruang napas di tablet tidak
       sebesar desktop dan tidak sesempit HP.
       --------------------------------------------- */
    --pad-hero: clamp(6.5rem, 5.708rem + 3.38vw,  8.75rem); /* 104 → 140 */
    --pad-lg:   clamp(5rem,   4.12rem  + 3.756vw, 7.5rem);  /*  80 → 120 */
    --pad-md:   clamp(4rem,   3.208rem + 3.38vw,  6.25rem); /*  64 → 100 */
    --pad-sm:   clamp(3rem,   2.296rem + 3.005vw, 5rem);    /*  48 →  80 */
}

/* =============================================
   2. GLOBAL RESET & BASE STYLES
   ============================================= */

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

/* Scroll snap container — y mandatory on desktop */
html {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    background-color: #003233;
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.65;
    background-color: var(--white);
    color: var(--navy);
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
}

h1, h2, h3 {
    font-weight: 800;
    color: var(--teal);
    line-height: 1.1;
    margin-bottom: 20px;
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-xl); margin-bottom: 12px; }

p {
    font-weight: 400;
    line-height: 1.65;
    color: var(--navy);
    font-size: var(--fs-md);
}

/* =============================================
   3. BUTTONS
   ============================================= */

.btn-teal,
.btn-outline {
    font-family: var(--font);
    font-weight: 700;
    font-size: var(--fs-base);
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-block;
    padding: 14px 32px;
    border-radius: 6px;
    border: 2px solid var(--teal);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-teal {
    background-color: var(--teal);
    color: var(--white);
}

.btn-teal:hover {
    background-color: var(--teal-dark);
    border-color: var(--teal-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--teal);
}

.btn-outline:hover {
    color: var(--navy);
    border-color: var(--navy);
}

/* =============================================
   4. NAVBAR — position: fixed, not a snap target
   ============================================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0, 50, 51, 0.93);
    backdrop-filter: blur(8px);
    padding: 0 15%;
    transition: transform 0.35s ease;
}

.navbar--hidden {
    transform: translateY(-100%);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 68px;
}

/* Brand selalu mengambang, terpisah dari navbar */
.nav-brand {
    position: fixed;
    top: 0;
    left: 15%;
    height: 68px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo placeholder — teal saat navbar tersembunyi, monochrome saat terbuka */
/* Logo navbar punya DUA MODE, mengikuti keadaan menu:
     - menu tertutup -> versi berwarna
     - menu terbuka  -> versi putih (latar navbar jadi navy)

   Dipasang lewat background-image, bukan <img>, supaya
   gambarnya bisa ditukar oleh CSS saat menu dibuka.

   Kedua file tampil di kotak 44x44 yang sama persis, jadi
   dimensi kedua file itu harus sama — kalau beda, salah
   satunya akan terlihat lebih buram saat bertukar. */
.nav-logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background-image: url('images/logo/NAV-COLOR-LOGO.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Halo PUTIH, bukan bayangan hitam.

       Tulisan di sebelahnya berwarna putih, jadi bayangan
       gelap membuatnya menonjol. Logonya justru kebalikannya —
       badannya gelap, sehingga bayangan gelap tidak
       menghasilkan apa-apa di atas foto hero yang juga gelap.
       Yang memisahkannya dari latar adalah cahaya putih.

       Offset sengaja 0 0 supaya cahayanya mengelilingi logo
       merata, bukan jatuh ke satu sisi seperti bayangan.

       Dipakai filter: drop-shadow(), bukan box-shadow —
       box-shadow menggambar kotak persegi di sekeliling elemen,
       sedangkan drop-shadow mengikuti bentuk transparansi PNG,
       jadi halonya melingkar mengikuti logo. */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.32))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.22));
    transition: filter 0.35s ease;
}

/* Menu terbuka: latar navbar jadi navy pekat, jadi logo
   bertukar ke versi putih dan bayangannya dilepas — persis
   perlakuan yang sudah dipakai .nav-brand-text. */
body.nav-open .nav-logo {
    background-image: url('images/logo/NAV-WITE-LOGO.png');
    filter: none;
}

/* Teks brand — selalu putih, drop shadow agar terbaca di atas gambar apapun */
.nav-brand-text {
    font-weight: 800;
    font-size: var(--fs-md);
    color: var(--white);
    letter-spacing: 1px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.4);
    transition: text-shadow 0.35s ease;
}

body.nav-open .nav-brand-text {
    text-shadow: none;
}

.nav-links {
    display: flex;
    gap: 36px;
}

.nav-links a {
    font-family: var(--font);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--white);
}

.nav-links a.active {
    color: var(--teal);
    font-weight: 700;
    position: relative;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 3px;
    background-color: var(--teal);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(0, 128, 128, 0.6);
}

/* Floating toggle button */
.nav-fab {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 200;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--teal);
    border: none;
    color: var(--white);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav-fab:hover {
    background-color: var(--teal-dark);
    transform: scale(1.08);
}

/* =============================================
   5. HERO SECTION
   ============================================= */

/* Komposisi hero: TANPA kartu — teks langsung di atas
   foto, dialasi gradasi gelap supaya tetap terbaca.

   Penempatan teks diatur dua baris di bawah ini, kalau
   nanti mau digeser:
     - tengah : align-items: center;   justify-content: center;
     - kanan  : align-items: center;   justify-content: flex-end;
     - bawah  : align-items: flex-end; justify-content: flex-start; */
.hero-section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--pad-md) 6%;
}

/* Foto latar.

   Versi lama memakai inset:-30% (jadi 160% x 160%),
   di-cover pada ukuran itu, lalu dikecilkan dengan
   transform: scale(0.68). Akibatnya background-position
   tidak lagi menunjuk titik yang kita kira, dan framing
   foto bergeser mengikuti rasio jendela.

   Sekarang cover biasa pada kotak yang sama persis
   dengan section, sehingga hasilnya bisa diprediksi.

   Fotonya panorama lebar (~2.6:1), jadi pada hero 100vh
   yang terpotong hanya sisi kiri-kanan — tingginya utuh.
   Dengan position center: excavator jatuh di kiri (jadi
   siluetnya membayang di balik gradasi, di belakang teks)
   dan bulldozer di kanan, di area foto yang tetap terang. */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/excavator.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Gradasi pengalas teks.

   Di desktop arahnya MENYAMPING: pekat di kiri tempat teks
   berada, lalu bening di kanan supaya foto tetap terbaca
   sebagai foto. Di HP arah ini diputar jadi dari bawah —
   lihat blok mobile. Tanpa itu, teks akan menumpuk bagian
   foto yang masih terang dan jadi sulit dibaca.

   Dicat setelah ::before (urutan pseudo-element), jadi
   otomatis berada di atas foto namun di bawah .hero-card.

   PENTING — stop-nya PIKSEL, bukan persen.

   Lebar teks dipatok 620px (nilai tetap), sedangkan stop
   persen ikut menyusut bersama lebar layar. Waktu memakai
   persen, di layar tablet teks menempati 67% lebar (bukan
   50% seperti di desktop) sehingga ujungnya keluar dari
   zona gelap — kontras anjlok ke 2.3:1, jauh di bawah
   syarat WCAG AA 4.5:1.

   Dengan satuan piksel, zona gelap punya lebar tetap yang
   sama dengan teksnya, jadi kontras terjaga di semua lebar.
   Terukur pada 785 / 1009 / 1425 / 1905 px: paragraf
   7.8 / 7.7 / 6.9 / 5.9 dan judul 8.2 / 8.1 / 7.5 / 6.5.

   PENTING JUGA — titiknya banyak (9) demi KEHALUSAN.

   Versi sebelumnya cuma 5 titik dan alpha terjun 0.76 ke
   0.10 dalam 190px. Kemiringan seperti itu (3.5 per 1000px)
   terlihat sebagai garis batas gelap yang berhenti mendadak.
   Sembilan titik ini membentuk kurva-S dengan kemiringan
   maksimum 1.2 per 1000px dan perubahan yang bertahap, jadi
   tidak ada "lipatan" yang tertangkap mata.

   Patokan: jaga kemiringan antar titik di bawah ~1.3 per
   1000px. Kalau max-width .hero-card diubah, stop ini harus
   ikut digeser. */
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(0, 25, 26, 0.93) 0px,
        rgba(0, 25, 26, 0.88) 280px,
        rgba(0, 25, 26, 0.78) 560px,
        rgba(0, 25, 26, 0.68) 700px,
        rgba(0, 25, 26, 0.52) 850px,
        rgba(0, 25, 26, 0.34) 1000px,
        rgba(0, 25, 26, 0.18) 1150px,
        rgba(0, 25, 26, 0.06) 1320px,
        rgba(0, 25, 26, 0) 1500px);
    z-index: 0;
    pointer-events: none;
}

/* Kotak putihnya dihapus — kini cuma pembungkus posisi. */
.hero-card {
    position: relative;
    z-index: 1;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-align: left;
    width: 100%;
    max-width: 560px;
}

/* Teks jadi terang karena alasnya gelap. Drop shadow tipis
   sebagai jaring pengaman kalau ada bagian foto yang
   kebetulan terang menembus gradasi. */
.hero-card h1 {
    font-size: var(--fs-6xl);
    color: var(--white);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-card #heroDesc {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.hero-card h1,
.hero-card #heroDesc,
.hero-card #heroBtn {
    transition: opacity 0.22s ease;
}

.hero-card.is-transitioning h1,
.hero-card.is-transitioning #heroDesc,
.hero-card.is-transitioning #heroBtn {
    opacity: 0;
}

/* Panah slider dulu mengapit paragraf secara absolut
   (padding: 0 72px). Dengan kartu yang kini rata kiri dan
   dibatasi 560px, cara itu menyisakan lebar teks terlalu
   tipis — jadi panahnya turun ke bawah paragraf sebagai
   sepasang tombol. Urutan DOM tetap (prev, teks, next),
   ditata ulang dengan `order`. */
.description-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

#heroDesc {
    flex: 1 1 100%;
    order: 1;
    margin-bottom: 6px;
}

/* Panah bergaya "kaca" — kotak putih pekat akan terlalu
   mencolok di atas latar gelap. */
.slider-arrow {
    order: 2;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    color: var(--white);
    font-size: var(--fs-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.slider-arrow:hover {
    background-color: var(--teal);
    border-color: var(--teal);
    color: var(--white);
}

/* =============================================
   6. ABOUT SECTION
   ============================================= */

.about-section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--pad-lg) 15% var(--pad-sm);
}

.about-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0, 25, 26, 0.92) 0%, rgba(0, 25, 26, 0.55) 55%, rgba(0, 25, 26, 0.1) 100%),
        url('images/pengawas.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.about-content {
    position: relative;
    z-index: 2;
    max-width: 580px;
}

.about-section h2 {
    color: var(--white);
}

.about-content p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}

.about-buttons {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.about-buttons .btn-outline {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--white);
}

.about-buttons .btn-outline:hover {
    border-color: var(--white);
}

/* =============================================
   7. SERVICES SECTION
   Reduced padding + image height so 3 cards fit
   comfortably within a single 100vh screen.
   ============================================= */

.services-section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    padding: var(--pad-hero) 15% var(--pad-lg);
    background-color: var(--bg-light);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services-header {
    flex-shrink: 0;
    margin-bottom: 48px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

/* Zona atas: logo ikon terpusat, tinggi ringkas */
/* Tinggi mengikuti isinya, TIDAK dipatok angka tetap.

   Dulu tingginya 150px — warisan dari saat kotak ini berisi
   foto. Ikon 104px di tengahnya menyisakan 23px atas dan
   bawah, lalu .service-card-body menambah padding-atas 18px
   lagi. Hasilnya jarak di bawah ikon jadi 41px sementara di
   atasnya 23px, dan ikon terlihat naik sebelah.

   Sekarang jarak ATAS ikon diatur di sini, jarak BAWAH ikon
   diatur oleh padding-atas .service-card-body. Keduanya
   disetel ke angka yang sama (30px), jadi kalau salah satu
   diubah, yang lain harus ikut. */
.service-image-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 24px 0;
}

/* Ikon layanan — file SVG dari CorelDRAW.

   Dipasang lewat <img>, bukan disalin ke dalam HTML, supaya
   kamu bisa mengekspor ulang dari Corel dan menimpa filenya
   saja — tampilan situs ikut berubah tanpa perlu menyentuh
   kode sama sekali.

   Warnanya TIDAK diubah oleh CSS. Ikonnya dua warna
   (#222222 dan #003233), jadi kalau dipaksa satu warna lewat
   `fill` atau `stroke`, warna keduanya akan lebur jadi satu.

   Sebagai gantinya dipakai filter: saat diam diabu-abukan,
   saat kursor menyentuh kartu filternya dilepas sehingga
   warna aslinya muncul. Filter tidak peduli ikonnya punya
   berapa warna — dia hanya mengolah hasil akhirnya.

   Teknik yang sama sudah dipakai kartu klien di halaman
   Services, jadi perilakunya konsisten satu situs. */
.service-image-container img {
    width: 104px;
    height: 104px;
    display: block;
    object-fit: contain;
    filter: grayscale(1) opacity(0.72);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-image-container img {
    filter: none;
    transform: translateY(-4px);
}

.service-card:hover .service-image-container img {
    transform: scale(1.08);
}

/* Zona bawah: deskripsi */
.service-card-body {
    flex-shrink: 0;
    width: 100%;
    /* Padding-atas 30px = padding-atas .service-image-container.
       Inilah yang membuat jarak atas dan bawah ikon seimbang. */
    padding: 30px 24px 30px;
    text-align: center;
    background-color: var(--white);
}

.service-card-body h3 {
    font-size: var(--fs-lg);
    margin-bottom: 8px;
}

.service-card-body p {
    font-size: var(--fs-sm);
    margin-bottom: 0;
}

/* =============================================
   8. GALLERY SECTION
   Gallery items use calc() so 2 rows × 2 cols
   always fill the remaining space inside 100vh.

   Formula: 100vh
     − 70px (padding-top)
     − 20px (padding-bottom)
     − ~56px (h2 line)
     − ~8px  (gap above subtitle p)
     − ~32px (subtitle p)
     − 24px  (gallery-header margin-bottom)
     − 16px  (row gap)
     = 100vh − 226px  →  each row ≈ (100vh−226px)/2
   Using 240px as the constant gives a few px of
   breathing room at the bottom.
   ============================================= */

.gallery-section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    padding: var(--pad-md) 15% 50px;
    background-color: var(--white);
    text-align: center;
}

.gallery-header {
    margin-bottom: 40px;
}

.gallery-header p {
    font-size: var(--fs-base);
    color: #666;
    margin-top: 6px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.gallery-item {
    position: relative;
    /* Dynamic height: fills the two rows exactly */
    height: calc((100vh - 310px) / 2);
    overflow: hidden;
    border-radius: 12px;
    background-color: #ddd;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 128, 128, 0.82);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.gallery-overlay span {
    color: var(--white);
    font-size: var(--fs-md);
    font-weight: 700;
    padding: 16px 20px;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* =============================================
   8.5 STATS SECTION — navy, numbers + CTA band
   ============================================= */

.stats-section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    padding: var(--pad-md) 15% 50px;
    background-color: var(--navy);
    color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
}

.stats-header h2 {
    color: var(--white);
}

.stats-header p {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.72);
    margin-top: 6px;
}

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

.stat-card {
    padding: 32px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    background-color: rgba(0, 128, 128, 0.12);
}

.stat-number {
    font-size: var(--fs-num-sm);
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
}

.stat-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stats-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.stats-cta h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--white);
    margin: 0;
    letter-spacing: 0.5px;
}

/* =============================================
   9. FOOTER — snap target, natural height
   ============================================= */

.footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--navy);
    padding: 28px 15%;
    text-align: center;
}

.footer .copyright {
    font-size: var(--fs-xs);
    font-weight: 350;
    color: rgba(255, 255, 255, 0.6);
}

/* =============================================
   9.5 ABOUT PAGE — hero logo, overview, VM, values, legal, download
   ============================================= */

.section-eyebrow {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Hero Logo — full viewport, white bg with blueprint grid */
.about-hero {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--white);
    background-image:
        linear-gradient(rgba(0, 128, 128, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 128, 128, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--pad-md) 15% 60px;
    gap: 32px;
    text-align: center;
    position: relative;
}

.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(255, 255, 255, 0.85) 80%);
    pointer-events: none;
}

.about-hero > * {
    position: relative;
    z-index: 1;
}

.about-hero-logo {
    width: 420px;
    max-width: 80%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about-hero-tagline {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--navy);
    letter-spacing: 1px;
    max-width: 600px;
}

/* Company Overview */
.overview-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--bg-light);
    padding: var(--pad-lg) 15% var(--pad-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-content {
    max-width: 880px;
    text-align: center;
}

.overview-content h2 {
    font-size: var(--fs-3xl);
    margin-bottom: 28px;
}

.overview-content p {
    font-size: var(--fs-base);
    color: #444;
    line-height: 1.75;
    margin-bottom: 18px;
}

/* Visi Misi — navy bg, dark glass cards */
.vm-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--navy);
    padding: var(--pad-lg) 15% var(--pad-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    position: relative;
}

.vm-header {
    text-align: center;
    position: relative;
    z-index: 1;
}

.vm-header h2 {
    font-size: var(--fs-3xl);
    color: var(--white);
    margin: 0;
}

.vm-section .section-eyebrow {
    color: var(--teal);
}

.vm-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(0, 128, 128, 0.15), transparent 50%),
                      radial-gradient(circle at 80% 70%, rgba(0, 128, 128, 0.1), transparent 50%);
    pointer-events: none;
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    width: 100%;
    position: relative;
    z-index: 1;
    align-items: start;
}

.vm-card {
    padding: 44px 40px;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.vm-card:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    background-color: rgba(0, 128, 128, 0.08);
}

.vm-eyebrow {
    display: inline-block;
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--white);
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 4px solid var(--teal);
    text-shadow: 0 2px 12px rgba(0, 128, 128, 0.35);
}

.vm-card p {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.75;
}

.vm-list {
    padding: 0 0 0 22px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.vm-list li {
    font-size: var(--fs-sm);
    line-height: 1.7;
    padding: 8px 0;
}

.vm-list li::marker {
    color: var(--teal);
    font-weight: 700;
}

.vm-list strong {
    color: var(--white);
    font-weight: 700;
}

/* Core Values */
.values-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--bg-light);
    padding: var(--pad-lg) 15% var(--pad-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}

.values-header {
    margin-bottom: 0;
}

.values-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 820px;
    margin: 0 auto;
}

.values-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 128, 128, 0.35), transparent);
}

.values-note {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--teal);
    text-transform: uppercase;
    white-space: nowrap;
}

.values-header h2 {
    font-size: var(--fs-3xl);
}

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

.value-card {
    padding: 36px 24px;
    background-color: var(--white);
    border-radius: 16px;
    text-align: left;
    border: 1px solid rgba(0, 50, 51, 0.08);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    border-color: var(--teal);
    box-shadow: 0 12px 28px rgba(0, 50, 51, 0.1);
}

.value-num {
    display: inline-block;
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.value-card h3 {
    font-size: var(--fs-md);
    color: var(--navy);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.value-card p {
    font-size: var(--fs-sm);
    color: #555;
    line-height: 1.65;
}

/* Legalitas — navy with dot grid pattern */
.legal-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--navy);
    background-image: radial-gradient(rgba(0, 128, 128, 0.25) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    color: var(--white);
    padding: var(--pad-lg) 15% var(--pad-sm);
    text-align: center;
    position: relative;
}

.legal-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--navy) 0%, rgba(0, 50, 51, 0.7) 40%, rgba(0, 50, 51, 0.7) 60%, var(--navy) 100%);
    pointer-events: none;
}

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

.legal-section .section-eyebrow {
    color: var(--teal);
}

.legal-header {
    margin-bottom: 50px;
}

.legal-header h2 {
    font-size: var(--fs-3xl);
    color: var(--white);
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    text-align: left;
}

.legal-item--wide {
    grid-column: 1 / -1;
}

.legal-value--contact {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.contact-actions {
    display: inline-flex;
    gap: 8px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-btn svg {
    display: block;
}

.contact-btn--call {
    background-color: var(--teal);
    color: var(--white);
}

.contact-btn--call:hover {
    background-color: var(--teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 128, 128, 0.35);
}

.contact-btn--wa {
    background-color: #25D366;
    color: var(--white);
}

.contact-btn--wa:hover {
    background-color: #1da851;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.35);
}

.legal-item {
    padding: 22px 28px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.legal-item:hover {
    border-color: var(--teal);
    background-color: rgba(0, 128, 128, 0.08);
}

.legal-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.legal-value {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--white);
    text-align: right;
}

/* Download CTA */
.download-section {
    min-height: 60vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--white);
    padding: var(--pad-md) 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.download-content {
    max-width: 680px;
}

.download-content h2 {
    font-size: var(--fs-3xl);
    margin-bottom: 18px;
}

.download-content p {
    font-size: var(--fs-base);
    color: #555;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* =============================================
   9.8 CONTACT PAGE — hero + contact main (info + form)
   ============================================= */

.contact-hero {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--navy);
    background-image: radial-gradient(rgba(0, 128, 128, 0.22) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    color: var(--white);
    padding: var(--pad-hero) 15% var(--pad-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    position: relative;
}

.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--navy) 0%, rgba(0, 50, 51, 0.65) 40%, rgba(0, 50, 51, 0.65) 60%, var(--navy) 100%);
    pointer-events: none;
}

.contact-hero > * {
    position: relative;
    z-index: 1;
}

.contact-hero-eyebrow {
    color: var(--teal);
}

.contact-hero h1 {
    font-size: var(--fs-6xl);
    line-height: 1.15;
    color: var(--white);
    max-width: 900px;
    margin: 0;
}

.contact-hero-sub {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 960px;
    margin: 0;
}

.contact-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 26px;
    background-color: var(--teal);
    color: var(--white);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-scroll-hint:hover {
    transform: translateY(-2px);
    background-color: var(--teal-dark);
    box-shadow: 0 10px 24px rgba(0, 128, 128, 0.35);
}

/* Contact main — shared header + 2-col grid */
.contact-main {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--bg-light);
    padding: var(--pad-lg) 8% var(--pad-md);
}

.contact-main-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 56px;
}

.contact-main-header h2 {
    font-size: var(--fs-3xl);
    margin-bottom: 14px;
}

.contact-main-header p {
    font-size: var(--fs-base);
    color: #555;
    line-height: 1.7;
}

/* Address hero card */
.address-card {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 60px;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--navy);
    color: var(--white);
    box-shadow: 0 18px 44px rgba(0, 50, 51, 0.15);
}

.address-card-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 128, 128, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 128, 128, 0.18) 1px, transparent 1px),
        radial-gradient(circle at 85% 30%, rgba(0, 128, 128, 0.35), transparent 55%),
        radial-gradient(circle at 15% 80%, rgba(0, 128, 128, 0.25), transparent 55%);
    background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
    opacity: 0.85;
    pointer-events: none;
}

.address-card-inner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 40px 44px;
}

.address-icon {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 128, 128, 0.2);
    color: var(--teal);
    border: 2px solid rgba(0, 128, 128, 0.5);
}

.address-body { min-width: 0; }

.address-tag {
    display: inline-block;
    font-size: var(--fs-3xs);
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.address-body h3 {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.address-body p {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    margin: 0;
}

.address-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.address-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.address-actions .contact-btn--copy {
    justify-content: center;
}

/* Email card */
.email-card {
    max-width: 1200px;
    margin: 0 auto 24px;
    padding: 32px 40px;
    background-color: var(--white);
    border-radius: 18px;
    border: 1px solid rgba(0, 50, 51, 0.08);
    box-shadow: 0 10px 28px rgba(0, 50, 51, 0.05);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
}

.email-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 128, 128, 0.1);
    color: var(--teal);
}

.email-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.email-card-tag {
    font-size: var(--fs-3xs);
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--teal);
    text-transform: uppercase;
}

.email-card-value {
    font-size: var(--fs-md);
    font-weight: 800;
    color: var(--navy);
    word-break: break-all;
}

.email-card-note {
    font-size: var(--fs-2xs);
    color: #666;
}

.email-card-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Copy button variant */
.contact-btn--copy {
    background-color: var(--navy);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-family: var(--font);
}

.contact-btn--copy:hover {
    background-color: #014a4c;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 50, 51, 0.3);
}

.contact-btn--copy.is-copied {
    background-color: var(--teal);
}

/* Toast */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background-color: var(--navy);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(0, 50, 51, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 500;
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =============================================
   9.7 SERVICES PAGE — pillars, capabilities, commitment, clients, QSHE
   ============================================= */

/* Hero */
.svc-hero {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--navy);
    background-image:
        linear-gradient(rgba(0, 128, 128, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 128, 128, 0.08) 1px, transparent 1px);
    background-size: 56px 56px;
    color: var(--white);
    padding: var(--pad-hero) 15% var(--pad-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-align: center;
    position: relative;
}

.svc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--navy), rgba(0, 50, 51, 0.6) 50%, var(--navy));
    pointer-events: none;
}

.svc-hero > * {
    position: relative;
    z-index: 1;
}

.svc-hero-eyebrow { color: var(--teal); }

.svc-hero h1 {
    font-size: var(--fs-6xl);
    line-height: 1.1;
    color: var(--white);
    max-width: 900px;
    margin: 0;
}

.svc-hero p {
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    max-width: 720px;
    margin: 0;
}

/* Three Pillars */
.pillars-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--white);
    padding: var(--pad-lg) 8% var(--pad-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 56px;
}

.pillars-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

.pillars-header h2 { font-size: var(--fs-3xl); }

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.pillar-card {
    padding: 40px 32px;
    background-color: var(--bg-light);
    border-radius: 16px;
    border: 1px solid rgba(0, 50, 51, 0.08);
    border-top: 4px solid var(--teal);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-6px);
    border-color: var(--teal);
    box-shadow: 0 18px 40px rgba(0, 50, 51, 0.1);
}

.pillar-num {
    display: inline-block;
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--teal);
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.pillar-card h3 {
    font-size: var(--fs-md);
    color: var(--navy);
    margin-bottom: 14px;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.pillar-card p {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: #555;
}

/* Capabilities */
.capabilities-section {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--bg-light);
    padding: var(--pad-lg) 8% var(--pad-md);
}

.capabilities-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 56px;
}

.capabilities-header h2 { font-size: var(--fs-3xl); margin-bottom: 16px; }

.capabilities-header p {
    font-size: var(--fs-base);
    color: #555;
    line-height: 1.7;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.cap-card {
    position: relative;
    padding: 38px 34px 32px;
    background-color: var(--white);
    border-radius: 18px;
    border: 1px solid rgba(0, 50, 51, 0.08);
    overflow: hidden;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
    isolation: isolate;
}

.cap-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal-dark) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.cap-card:hover {
    border-color: var(--teal);
    box-shadow: 0 20px 48px rgba(0, 50, 51, 0.12);
    transform: translateY(-4px);
}

.cap-card:hover::before { transform: scaleX(1); }

.cap-card-num {
    position: absolute;
    top: 22px;
    right: 28px;
    font-size: var(--fs-num-lg);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 128, 128, 0.22);
    letter-spacing: -2px;
    pointer-events: none;
    transition: -webkit-text-stroke-color 0.35s ease;
}

.cap-card:hover .cap-card-num {
    -webkit-text-stroke-color: rgba(0, 128, 128, 0.55);
}

.cap-card-head {
    margin-bottom: 22px;
    padding-bottom: 16px;
    padding-right: 70px;
    border-bottom: 1px solid rgba(0, 50, 51, 0.08);
}

.cap-card-head h3 {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cap-card-sub {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
}

.cap-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2px;
}

.cap-card-list li {
    position: relative;
    padding: 8px 0 8px 26px;
    font-size: var(--fs-sm);
    color: #333;
    line-height: 1.55;
}

.cap-card-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 16px;
    width: 14px;
    height: 2px;
    background-color: var(--teal);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.cap-card:hover .cap-card-list li::before { width: 18px; }

/* Commitment */
.commitment-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--navy);
    color: var(--white);
    padding: var(--pad-lg) 8% var(--pad-sm);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.commitment-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.commitment-header h2 {
    font-size: var(--fs-3xl);
    color: var(--white);
    margin-bottom: 16px;
}

.commitment-header p {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}

.commitment-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.commit-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
}

.commit-stat-num {
    font-size: var(--fs-num-md);
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
}

.commit-stat-label {
    font-size: var(--fs-xs);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
}

.commit-stat-sep {
    width: 1px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Photo Scroller — infinite marquee */
.photo-scroller {
    position: relative;
    overflow: hidden;
    padding: 16px 0 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.photo-track {
    display: flex;
    gap: 18px;
    padding: 0 4px;
    width: max-content;
    will-change: transform;
}

.photo-item {
    flex: 0 0 auto;
    width: 320px;
    height: 220px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    scroll-snap-align: start;
}

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

.photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--white);
    letter-spacing: 1px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

/* Clients */
.clients-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--white);
    padding: var(--pad-lg) 8% var(--pad-md);
    text-align: center;
}

.clients-header {
    max-width: 780px;
    margin: 0 auto 50px;
}

.clients-header h2 { font-size: var(--fs-3xl); margin-bottom: 16px; }
.clients-header p { font-size: var(--fs-base); color: #555; line-height: 1.7; }

.clients-marquee {
    position: relative;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.clients-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

.client-logo {
    flex: 0 0 auto;
    width: 220px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--bg-light);
    border-radius: 14px;
    border: 1px solid rgba(0, 50, 51, 0.06);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.client-logo:hover {
    transform: translateY(-3px);
    border-color: var(--teal);
    box-shadow: 0 12px 28px rgba(0, 50, 51, 0.08);
}

/* Isi kartu klien kini berupa nama sektor, bukan logo.
   Aturan untuk <img> tetap dipertahankan di bawah, supaya
   kalau nanti logo klien sudah tersedia tinggal ditukar
   kembali tanpa perlu menulis ulang CSS-nya. */
.client-logo span {
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 1px;
    color: var(--navy);
    opacity: 0.72;
    text-align: center;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.client-logo:hover span {
    opacity: 1;
    color: var(--teal);
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.75);
    transition: filter 0.3s ease;
}

.client-logo:hover img {
    filter: grayscale(0) opacity(1);
}

/* QSHE */
.qshe-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--navy);
    color: var(--white);
    padding: 0;
}

.qshe-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--pad-lg) 8% var(--pad-md);
    position: relative;
}

.qshe-header {
    padding: 36px 40px;
    background: linear-gradient(135deg, #e8a93a 0%, #d49220 100%);
    color: var(--navy);
    border-radius: 16px;
    margin-bottom: 36px;
    text-align: center;
}

.qshe-eyebrow {
    color: var(--navy) !important;
}

.qshe-header h2 {
    font-size: var(--fs-2xl);
    color: var(--navy);
    margin-bottom: 14px;
}

.qshe-header p {
    font-size: var(--fs-sm);
    color: rgba(0, 50, 51, 0.85);
    line-height: 1.7;
    max-width: 820px;
    margin: 0 auto;
}

.qshe-list {
    padding-left: 28px;
    counter-reset: qshe;
    list-style: none;
}

.qshe-list li {
    position: relative;
    padding: 14px 16px 14px 48px;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    background-color: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--teal);
    border-radius: 0 10px 10px 0;
    counter-increment: qshe;
}

.qshe-list li::before {
    content: counter(qshe, decimal-leading-zero);
    position: absolute;
    left: 14px;
    top: 14px;
    font-weight: 800;
    color: var(--teal);
    font-size: var(--fs-xs);
}

/* =============================================
   9.9 PAGE PLACEHOLDER — untuk halaman belum diisi
   ============================================= */

.page-placeholder {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--pad-lg) 15% var(--pad-sm);
    background-color: var(--bg-light);
    gap: 12px;
}

.page-placeholder h1 {
    font-size: var(--fs-6xl);
    color: var(--navy);
    margin: 0;
}

.page-placeholder p {
    font-size: var(--fs-base);
    color: #666;
}

/* =============================================
   9.10 PAGE ENTRY ANIMATION — hero staggered fade-up

   Murni CSS (bukan JS) supaya kalau script gagal
   atau lambat, konten tetap tampil — tidak ada
   risiko halaman blank permanen.

   Yang dianimasi hanya ANAK dari hero, bukan
   <section>-nya sendiri, supaya scroll-snap tidak
   bergeser.

   fill-mode `backwards` (bukan `forwards`/`both`)
   itu disengaja: elemen tersembunyi selama delay,
   lalu setelah animasi selesai kendali balik ke
   cascade normal. Kalau pakai `forwards`, nilai
   akhir animasi akan mengunci opacity dan diam-diam
   mematikan fade slider hero (.is-transitioning).
   ============================================= */

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-card > *,
.about-hero > *,
.svc-hero > *,
.contact-hero > * {
    animation: heroIn 0.55s ease-out backwards;
}

.hero-card > *:nth-child(1),
.about-hero > *:nth-child(1),
.svc-hero > *:nth-child(1),
.contact-hero > *:nth-child(1) { animation-delay: 0.05s; }

.hero-card > *:nth-child(2),
.about-hero > *:nth-child(2),
.svc-hero > *:nth-child(2),
.contact-hero > *:nth-child(2) { animation-delay: 0.14s; }

.hero-card > *:nth-child(3),
.about-hero > *:nth-child(3),
.svc-hero > *:nth-child(3),
.contact-hero > *:nth-child(3) { animation-delay: 0.23s; }

.hero-card > *:nth-child(4),
.about-hero > *:nth-child(4),
.svc-hero > *:nth-child(4),
.contact-hero > *:nth-child(4) { animation-delay: 0.32s; }

/* Hormati user yang mematikan animasi di setting OS */
@media (prefers-reduced-motion: reduce) {
    .hero-card > *,
    .about-hero > *,
    .svc-hero > *,
    .contact-hero > * {
        animation: none;
    }
}

/* =============================================
   9.11 TEKSTUR SECTION — pola sangat halus

   Memakai kosakata visual yang SUDAH ada di situs
   ini (titik teal & garis blueprint teal), bukan
   pola baru — supaya terasa satu bahasa.

   Diterapkan SELANG-SELING, bukan ke semua section.
   Yang sudah bertekstur: .about-hero, .svc-hero,
   .vm-section, .legal-section, .contact-hero.
   Jadi di sini hanya section polos yang kebetulan
   jatuh di posisi berseling, sehingga mata tetap
   dapat jeda "bersih" di antaranya.

   Opacity sengaja 0.10-0.11 (pola lama di situs ini
   0.18-0.25) supaya terbaca sebagai tekstur, bukan
   sebagai motif yang menuntut perhatian.
   ============================================= */

/* Titik halus — section berlatar terang */
.services-section,
.capabilities-section,
.clients-section {
    background-image: radial-gradient(rgba(0, 128, 128, 0.11) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* Cahaya lembut — section berlatar navy.

   Sebelumnya di sini grid garis, tapi garis berulang di
   belakang deretan angka besar terasa ramai dan bersaing
   dengan angkanya. Diganti dua semburat cahaya melebar:
   tetap tidak polos, tapi tidak menuntut perhatian. */
.stats-section {
    background-image:
        radial-gradient(circle at 12% 20%, rgba(0, 128, 128, 0.28), transparent 48%),
        radial-gradient(circle at 88% 80%, rgba(0, 128, 128, 0.20), transparent 45%);
    background-size: auto;
}

/* =============================================
   9.11a UTILITAS SEMBUNYI SEMENTARA

   Dipakai untuk bagian yang menunggu aset (foto/logo)
   sebelum situs diunggah. HTML-nya sengaja DIBIARKAN UTUH
   supaya tidak ada yang hilang — untuk memunculkannya lagi
   cukup hapus kelas `is-hidden` pada elemen bersangkutan
   di HTML, tanpa menulis ulang apa pun.

   Sedang dipakai di:
     - index.html    -> section "OUR PROJECT & EXPERIENCED"
     - services.html -> marquee foto di "COMMITMENT IN ACTION"

   `!important` disengaja: ini kelas utilitas yang harus
   menang atas aturan display milik section aslinya.
   ============================================= */

.is-hidden {
    display: none !important;
}

/* =============================================
   9.11b SCROLL REVEAL — isi section muncul saat digulir

   PENGAMAN: kelas `js-reveal` dipasang oleh script.js.
   Selama kelas itu belum ada, aturan penyembunyi di bawah
   tidak berlaku sama sekali — jadi kalau JS gagal, lambat,
   atau dimatikan, seluruh konten tetap tampil normal.
   Tanpa pengaman ini, satu error kecil di JS bisa membuat
   halaman kosong melompong.

   Yang dianimasi ISI section, bukan <section>-nya sendiri.
   Section adalah target scroll-snap; memberi transform
   padanya bisa menggeser titik snap. Transform pada anaknya
   tidak memengaruhi tata letak sama sekali, jadi snap tetap
   utuh.
   ============================================= */

.js-reveal .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Hormati user yang mematikan animasi di setelan OS */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal,
    .js-reveal .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================
   9.12 RESPONSIVE — TABLET (max-width: 1024px)

   Sebelumnya tidak ada breakpoint tablet sama
   sekali: layar 769-1024px langsung kebagian
   layout desktop — grid 3-4 kolom dengan padding
   sisi 15% — sehingga tiap kolom jadi sempit dan
   isinya sesak.

   Ukuran font sendiri sudah ditangani clamp(),
   jadi di sini murni soal LAYOUT.
   ============================================= */

@media screen and (max-width: 1024px) {

    /* Padding sisi 15% terlalu boros di tablet */
    .navbar   { padding: 0 8%; }
    .nav-brand { left: 8%; }
    .nav-links { gap: 24px; }

    .about-section,
    .services-section,
    .gallery-section,
    .stats-section,
    .about-hero,
    .overview-section,
    .vm-section,
    .values-section,
    .legal-section,
    .download-section,
    .contact-hero,
    .svc-hero,
    .page-placeholder,
    .footer {
        padding-left: 8%;
        padding-right: 8%;
    }

    /* Turunkan jumlah kolom supaya tiap kartu tetap lapang */
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .pillars-grid  { grid-template-columns: repeat(2, 1fr); }
    .stats-grid    { grid-template-columns: repeat(2, 1fr); }
    .values-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   10. RESPONSIVE — MOBILE (max-width: 768px)

   Switch to `proximity` so sections taller than
   100vh (services/gallery in single-column) can
   scroll freely and still snap near their start.
   Sections use min-height: 100vh + height: auto
   so content is never clipped.
   ============================================= */

@media screen and (max-width: 768px) {

    /* Mobile: lepas snap — touch scroll lebih nyaman bebas */
    html {
        scroll-snap-type: none;
    }
    .hero-section,
    .about-section,
    .services-section,
    .gallery-section,
    .stats-section,
    .footer {
        scroll-snap-stop: normal;
    }

    /* Navbar mobile — top: 0, padding-top dorong link ke bawah brand
       Sehingga translateY(-100%) benar-benar keluar dari layar */
    .navbar {
        padding: 54px 6% 0;
    }

    .nav-container {
        flex-direction: row;
        height: auto;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
    }

    /* Brand mobile — lebih kecil, di kiri */
    .nav-brand {
        left: 6%;
        height: 54px;
        gap: 10px;
    }

    .nav-logo {
        width: 34px;
        height: 34px;
    }


    .nav-links {
        width: 100%;
        justify-content: space-between;
        border-top: none;
        padding: 0;
        gap: 0;
    }


    /* Hero — stays exactly 1 screen tall */
    .hero-section {
        height: 100vh;
        padding: 120px 6% 70px;
    }

    /* Teks menempel ke BAWAH, bukan tengah — mengikuti pola
       yang sudah dipakai section About di mobile, supaya
       satu bahasa. */
    .hero-section {
        align-items: flex-end;
        justify-content: flex-start;
        padding: 120px 6% 64px;
    }

    .hero-card {
        width: 100%;
        max-width: none;
    }

    /* Gradasi diputar jadi DARI BAWAH.

       Ini bagian terpenting di mobile: gradasi menyamping
       milik desktop tidak masuk akal di layar sempit-tinggi
       — teks akan menumpuk bagian foto yang masih terang.

       Berhenti pekat di ~62% supaya alat beratnya (yang
       duduk di paruh atas frame) tetap kelihatan jelas. */
    .hero-section::after {
        background: linear-gradient(to top,
            rgba(0, 25, 26, 0.94) 0%,
            rgba(0, 25, 26, 0.90) 20%,
            rgba(0, 25, 26, 0.83) 36%,
            rgba(0, 25, 26, 0.72) 50%,
            rgba(0, 25, 26, 0.58) 62%,
            rgba(0, 25, 26, 0.42) 74%,
            rgba(0, 25, 26, 0.27) 86%,
            rgba(0, 25, 26, 0.14) 100%);
    }

    /* Layar HP jauh lebih tinggi daripada lebar, sedangkan
       fotonya panorama — jadi yang tersisa cuma potongan
       sempit (~18% lebar foto). Digeser ke 72% supaya
       potongan itu jatuh tepat pada bulldozer, bukan pada
       tanah kosong di antara kedua alat. */
    .hero-section::before { background-position: 72% center; }

    .slider-arrow { width: 40px; height: 40px; }

    /* About — full-screen background image, teks di atas gradasi bawah */
    .about-section {
        height: 100vh;
        padding: 0;
        align-items: flex-end;
    }

    /* Foto full + gradasi gelap dari bawah ke atas */
    .about-bg-overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to top, rgba(0, 25, 26, 0.93) 45%, rgba(0, 25, 26, 0.15) 100%),
            url('images/pengawas.jpg');
        background-size: cover;
        background-position: center;
    }

    .about-content {
        padding: 0 8% 72px;
        max-width: 100%;
    }

    /* Teks jadi putih karena latar gelap */
    .about-section h2 {
        color: var(--white);
        text-align: left;
    }

    .about-content p {
        color: rgba(255, 255, 255, 0.82);
        text-align: left;
        margin-bottom: 20px;
    }

    .about-buttons {
        flex-direction: row;
        gap: 12px;
        flex-wrap: wrap;
    }

    .about-buttons .btn-outline {
        border-color: rgba(255, 255, 255, 0.6);
        color: var(--white);
    }

    .about-buttons .btn-outline:hover {
        border-color: var(--white);
    }

    /* Services — 1-column stack, taller than 100vh; scroll naturally */
    .services-section {
        padding: 110px 8% 80px;
        height: auto;
        min-height: 100vh;
    }

    .services-header { margin-bottom: 48px; }
    .services-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Tinggi tetap 160px dihapus — dulu dibutuhkan karena isinya
       foto. Sekarang isinya ikon, dan tingginya sudah mengikuti
       padding + ukuran ikon, jadi jarak atas-bawahnya tetap
       seimbang di HP sama seperti di desktop. */
    .service-image-container { flex: none; }

    /* Gallery — 1-column stack, taller than 100vh; scroll naturally */
    .gallery-section {
        padding: 110px 8% 80px;
        height: auto;
        min-height: 100vh;
    }

    .gallery-header { margin-bottom: 40px; }

    /* Single column; fixed px heights are fine since section scrolls freely */
    .gallery-grid { grid-template-columns: 1fr; gap: 18px; }
    .gallery-item { height: 240px; }

    /* Stats — stack vertically, natural height */
    .stats-section {
        padding: 110px 8% 80px;
        height: auto;
        min-height: 100vh;
        gap: 36px;
    }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .stat-card { padding: 24px 12px; }
    .stats-cta {
        flex-direction: column;
        padding: 24px 20px;
        text-align: center;
    }

    /* About page — mobile */
    .about-hero {
        padding: 110px 8% 60px;
        gap: 24px;
    }
    .about-hero-logo {
        width: 260px;
    }

    .overview-section,
    .vm-section,
    .values-section,
    .legal-section {
        padding: 110px 8% 80px;
        height: auto;
    }
    .vm-grid { grid-template-columns: 1fr; gap: 18px; }
    .vm-card { padding: 32px 24px; }

    .values-grid { grid-template-columns: 1fr; gap: 14px; }
    .value-card { padding: 28px 22px; }
    .values-note { white-space: normal; }
    .values-footnote { gap: 12px; }

    .legal-grid { grid-template-columns: 1fr; }
    .legal-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 18px 22px;
    }
    .legal-value { text-align: left; }

    .download-section { padding: 80px 8%; }

    /* Contact page — mobile */
    .contact-hero { padding: 130px 6% 80px; }

    .contact-main { padding: 100px 6% 80px; }

    /* Address card stacks on mobile */
    .address-card-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 28px 22px;
        text-align: center;
    }
    .address-icon { margin: 0 auto; width: 64px; height: 64px; }
    .address-actions { width: 100%; }
    .address-btn-primary { padding: 12px 18px; }

    /* Email card stacks */
    .email-card {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon body"
            "actions actions";
        gap: 14px 16px;
        padding: 24px 22px;
        text-align: left;
    }
    .email-card-icon { grid-area: icon; margin: 0; }
    .email-card-body { grid-area: body; }
    .email-card-actions { grid-area: actions; flex-direction: column; }
    .email-card-actions .contact-btn { justify-content: center; }

    /* Services page — mobile */
    .svc-hero { padding: 130px 6% 80px; }

    .pillars-section,
    .capabilities-section,
    .commitment-section,
    .clients-section { padding: 100px 6% 80px; }
    .pillars-grid { grid-template-columns: 1fr; gap: 16px; }
    .pillar-card { padding: 32px 24px; }

    .capabilities-grid { grid-template-columns: 1fr; gap: 18px; }
    .cap-card { padding: 28px 22px 24px; }
    .cap-card-num { top: 18px; right: 20px; }
    .cap-card-head { padding-right: 56px; }

    .commitment-stats { gap: 14px; }
    .commit-stat { min-width: 110px; }
    .commit-stat-sep { display: none; }

    .photo-item { width: 240px; height: 170px; }

    .client-logo { width: 170px; height: 90px; padding: 18px; }

    .qshe-inner { padding: 100px 6% 80px; }
    .qshe-header { padding: 24px 20px; }
    .qshe-list { padding-left: 0; }
    .qshe-list li { padding-left: 44px; }

    /* Footer */
    .footer { padding: 24px 8%; }
}