/* PII Quarry - static rebuild, color palette matched to the original theme (style.css) */

:root {
    /* Exact colors sourced from wp-content/themes/pii/style.css */
    --pii-navy: #203568;         /* headings, active nav, primary text accents */
    --pii-navy-dark: #233C80;    /* exact color of #section9 (contact) in the original theme - reused for all dark sections (footer, page-hero, contact) for consistency */
    --pii-blue: #0892d1;         /* btn-blue gradient start */
    --pii-blue-dark: #1c519d;    /* btn-blue gradient end */
    --pii-teal: #00c5ad;         /* accent highlight color from theme */
    --pii-text: #58585B;         /* body paragraph color */
    --pii-nav-gray: #626366;     /* nav link color */
    --pii-muted: #777777;
    --pii-light: #E6E7E8;        /* alternate section background */
    --pii-border: #A7A9AB;
}

* { box-sizing: border-box; }

body {
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--pii-text);
    line-height: 1.7;
}

h1, h2, h3, h4, .section-title, .navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--pii-navy);
}

a { color: var(--pii-blue); text-decoration: none; }
a:hover { color: var(--pii-blue-dark); }

.btn-primary {
    background: linear-gradient(to right, var(--pii-blue) 0%, var(--pii-blue-dark) 100%);
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9rem;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(to right, var(--pii-blue-dark) 0%, var(--pii-blue) 100%);
}
.btn-outline-primary {
    color: var(--pii-navy);
    border-color: var(--pii-navy);
    font-weight: 600;
}
.btn-outline-primary:hover {
    background-color: var(--pii-navy);
    border-color: var(--pii-navy);
}

/* Navbar - matches original white navbar with navy active state */
.site-nav {
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.25);
    transition: all .3s ease;
    padding-top: .9rem;
    padding-bottom: .9rem;
}
.site-nav.scrolled { padding-top: .5rem; padding-bottom: .5rem; }
.site-nav .navbar-brand img { filter: none; }
.site-nav .navbar-nav { gap: .1rem; }
.site-nav .nav-link {
    color: var(--pii-nav-gray);
    font-weight: 500;
    font-size: .85rem;
    white-space: nowrap;
    padding: .5rem .6rem !important;
}
.site-nav .nav-link.active,
.site-nav .nav-link:hover { color: var(--pii-navy); }
/* "Kekuatan Inti" - plain nav item like all the others, per explicit user
   request to drop the navy ribbon/chevron badge treatment. */
.lang-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--pii-light);
    flex: 0 0 auto;
}
.lang-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--pii-muted); font-size: .8rem; font-weight: 600;
    white-space: nowrap;
}
.lang-link.active, .lang-link:hover { color: var(--pii-navy); }
.lang-link img { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }

@media (min-width: 992px) and (max-width: 1300px) {
    .site-nav .nav-link { font-size: .78rem; padding: .5rem .45rem !important; }
    .lang-switch { margin-left: .5rem; padding-left: .5rem; }
}

/* Hero - interactive isometric map, positions match the original theme's
   stylesheet.css pixel-for-pixel (780px base map, 970px+ breakpoint). */
.hero {
    padding-top: 90px;
    padding-bottom: 0;
    background: #f4f6f8;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}
/* Map is designed at a fixed 780px/970px pixel grid (all children positioned
   in px) - scale the whole thing down uniformly so it never touches the
   viewport edges, without having to recompute every position value. */
.land-wraper {
    width: 780px;
    flex: 0 0 auto;
    transform: scale(.62);
    transform-origin: top center;
}
@media (min-width: 1200px) {
    .land-wraper { transform: scale(.68); }
}
.land { position: relative; }
/* The original theme keeps land-full.png (busy machinery baked into the
   image) hidden and shows land3.png instead - the animated GIFs below
   (explosion/crusher/fountain/smoke) are overlaid on land3's emptier mining
   area to fill in that detail dynamically. Showing land-full instead
   double-stacks static + animated art in the same spot, which is what
   looked messy/misaligned. */
.land-full { display: none; }
.land-bg { width: 100%; display: block; aspect-ratio: 1723 / 1347; }
.plane { left: 618px; top: -163px; position: absolute; width: 90px; animation: pii-move 15s infinite; }
@keyframes pii-move {
    0%   { left: 618px; top: -163px; transform: rotate(0deg); }
    15%  { left: 421px; top: 47px;   transform: rotate(0deg); }
    30%, 50% { left: 364px; top: 80px; transform: rotate(0deg); }
    70%  { left: 312px; top: 110px;  transform: rotate(20deg); }
    100% { left: -420px; top: 110px; transform: rotate(28deg); }
}
.ledakan { left: 131px; position: absolute; top: 106px; width: 70px; }
.ledakan2 { left: 118px; position: absolute; top: 139px; width: 60px; }
.proses { left: 153px; position: absolute; top: 155px; }
.proses img { height: 139px; width: auto; }
.air-mancur { left: 493px; position: absolute; top: 149px; }
.air-mancur img { height: auto; width: 84px; }
.asap { left: 524px; position: absolute; top: 242px; width: 70px; }

.arrow-point { position: absolute; animation: pii-bounce 1.6s infinite; z-index: 2; }
.arrow-point img { width: 22px; }
@keyframes pii-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.arrow-legal { left: 319px; top: 0; }
.arrow-client { left: 463px; top: 47px; }
.arrow-about { left: 564px; top: 81px; }
.arrow-contact { left: 546px; top: 132px; }
.arrow-service { left: 522px; top: 231px; }
.arrow-product { left: 336px; top: 195px; }
.arrow-facilities { left: 232px; top: 164px; }
.arrow-news { left: 372px; top: 304px; }

.btn-land { position: absolute; opacity: 0; transition: opacity .2s; z-index: 3; }
.btn-land:hover { opacity: 1; }
.btn-legal { left: 291px; top: 7px; }
.btn-client { left: 433px; top: 39px; }
.btn-about { left: 535px; top: 81px; }
.btn-contact { left: 518px; top: 132px; }
.btn-service { left: 493px; top: 231px; }
.btn-product { left: 306px; top: 195px; }
.btn-facilities { left: 202px; top: 164px; }
.btn-news { left: 341px; top: 304px; }

@media (min-width: 1200px) {
    .land-wraper { width: 970px; }
    .plane { left: 720px; top: -222px; width: 110px; }
    @keyframes pii-move {
        0%   { left: 720px; top: -222px; transform: rotate(0deg); }
        15%  { left: 527px; top: 79px;   transform: rotate(0deg); }
        30%, 50% { left: 456px; top: 119px; transform: rotate(0deg); }
        70%  { left: 392px; top: 156px;  transform: rotate(20deg); }
        100% { left: -620px; top: 156px; transform: rotate(28deg); }
    }
    .ledakan { left: 145px; top: 155px; }
    .ledakan2 { left: 121px; top: 195px; }
    .proses { left: 166px; top: 212px; }
    .proses img { width: 257px; height: auto; }
    .air-mancur { left: 633px; top: 210px; }
    .air-mancur img { width: 94px; }
    .asap { left: 673px; top: 345px; }
    .arrow-legal { left: 399px; top: 27px; }
    .arrow-client { left: 593px; top: 84px; }
    .arrow-about { left: 717px; top: 127px; }
    .arrow-contact { left: 705px; top: 210px; }
    .arrow-service { left: 669px; top: 341px; }
    .arrow-product { left: 418px; top: 302px; }
    .arrow-facilities { left: 280px; top: 267px; }
    .arrow-news { left: 464px; top: 440px; }
    .btn-legal { left: 371px; top: 38px; }
    .btn-client { left: 562px; top: 83px; }
    .btn-about { left: 689px; top: 137px; }
    .btn-contact { left: 675px; top: 210px; }
    .btn-service { left: 642px; top: 341px; }
    .btn-product { left: 407px; top: 302px; }
    .btn-facilities { left: 268px; top: 267px; }
    .btn-news { left: 447px; top: 440px; }
}

.section-icon { height: 96px; width: auto; }
@media (max-width: 767px) { .section-icon { height: 72px; } }

/* Core strength preview - exact navy background from the original #section1 */
#core-strength-preview {
    background: var(--pii-navy-dark);
    color: #fff;
}
#core-strength-preview .section-title { color: #fff; }
#core-strength-preview .cs-icon { height: 78px; width: auto; }
.youtube-embed { border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(32,53,104,.15); }

/* About carousel - full-bleed, fills the entire section (matches the
   original .carrousel-about { height: inherit } which filled the whole
   fullPage section, no container/gutter, no rounded corners). */
#about-preview { padding: 0; position: relative; overflow: hidden; }
#about-preview .about-swiper,
#about-preview .swiper-slide { width: 100%; height: 100vh; }
.about-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.about-swiper .swiper-button-prev,
.about-swiper .swiper-button-next {
    color: #fff;
    font-weight: 900;
    --swiper-navigation-size: 34px;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
    z-index: 5;
}
/* "Read More" sits on top of the photo, bottom-center, like the original
   .read-more-about absolute overlay. */
.about-read-more {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 5;
}

/* Products preview - dark background matching the original section */
.products-preview-section {
    background: linear-gradient(180deg, #3a3f42, #2b2f31);
    color: #fff;
}
.products-preview-section .section-title,
.products-preview-section .section-sub { color: #fff; }
.products-preview-section .section-sub { opacity: .85; }

/* Home news cards (compact, date badge like the original blog-entry) */
.news-card-home {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(32,53,104,.08);
    height: 100%;
}
.news-date-badge {
    background: var(--pii-navy);
    color: #fff;
    padding: .75rem .5rem;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-date-badge .d { font-weight: 700; font-size: .95rem; }
.news-date-badge .y { font-size: .8rem; opacity: .8; }
.news-thumb-wrap { width: 110px; flex: 0 0 110px; }
.news-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.news-info { padding: .9rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.news-info .entry-title { font-weight: 600; color: var(--pii-navy); }

/* Sections */
.section { padding: 5rem 0; }
.section-alt { background: var(--pii-light); }
.section-title {
    font-size: 2rem;
    color: var(--pii-navy);
    margin-bottom: .5rem;
}
.section-sub { color: var(--pii-muted); max-width: 700px; }

/* Detail page header - matches the original theme's real markup: the badge
   (icon-wrapper) and optional corner accent (menu-wrapper) are ABSOLUTE
   overlays that occupy no layout space of their own (position:absolute
   inside the positioned .container) - so the actual page content starts
   immediately below the navbar with no dead gap, exactly like the original
   ".page-content > .icon-wrapper / .menu-wrapper / content" pattern. Badge
   images render at their native pixel size (not stretched) to match the
   original's proportions. Light page background, NOT a solid navy banner. */
/* Subtle diamond-pattern background from the original theme (bg.png),
   applied to the whole page (not just the header box) so it never creates a
   visible seam/cutoff where a short boxed container used to end. Detail
   pages only - the homepage has its own hero/section backgrounds. */
body:not(.snap-scroll) {
    background: #f7f8fa url('../images/bg.png') no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
}
.page-content {
    position: relative;
    padding: 7rem 0 5rem;
}
.page-content .container { position: relative; }
.icon-wrapper { text-align: center; margin-bottom: 1.5rem; }
.icon-wrapper .decor-img { display: none; }
.icon-wrapper .icon-img { max-width: 90px; height: auto; }
.menu-wrapper { display: none; }
.page-title {
    color: var(--pii-navy);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
/* Measured directly from the live original WordPress page via
   getComputedStyle()/getBoundingClientRect() (not guessed from reading the
   old theme's CSS, which has an easy-to-misread cascade across two
   stylesheets) - both badges use position:fixed, vertically centered in the
   viewport, at their NATIVE pixel size with no responsive scaling, and they
   stay put on screen while the page scrolls (confirmed with a scroll test:
   rect.top was identical before/after scrolling). */
@media (min-width: 768px) {
    .icon-wrapper {
        position: fixed;
        left: 0;
        top: 50%;
        margin-top: -10%;
        margin-bottom: 0;
        text-align: left;
        width: 160px;
        z-index: 5;
    }
    .icon-wrapper .decor-img { display: block; width: 100%; height: auto; }
    .icon-wrapper .icon-img {
        position: absolute;
        left: 17px;
        top: 41px;
        width: 277px;
        max-width: none;
        height: auto;
    }
    .menu-wrapper {
        display: block;
        position: fixed;
        right: 0;
        top: 50%;
        margin-top: -10%;
        width: 210px;
        z-index: 5;
    }
    /* No overflow:hidden and no forced width on the img - on the real site
       the photo (native 249x287) is shown at its own size and simply spills
       9-40px past the wrapper's edge uncropped; caging it in a clipped
       square (an earlier attempt at "fitting" it) doesn't match. */
    .menu-wrapper img { width: 249px; height: auto; display: block; opacity: .9; }
    /* padding-left:25% + padding-right:20% is the original theme's own
       .content-wrapper rule (style.css) - width stays 100% because the
       badges are position:fixed now, i.e. completely out of document flow,
       so content never needs to sacrifice column width to dodge them. */
    .page-content-inner { width: 100%; padding-left: 25%; padding-right: 20%; }
    /* News uses a modernized 3-column card grid (the original theme just had
       a plain thumbnail+text row list) - it needs far more horizontal room
       than a paragraph-of-text page, so it gets a much smaller right margin
       instead of the 20% meant for prose. */
    .page-content.wide .page-content-inner { padding-right: 4%; }
    .page-title { font-size: 2.4rem; text-align: left; }
}

.feature-card {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 1.5rem;
    box-shadow: 0 6px 24px rgba(32,53,104,.1);
    height: 100%;
}
.feature-number {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--pii-teal);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    margin-bottom: 1rem;
}

.content-excerpt { color: var(--pii-muted); }

/* Outer image-icon menu (Products/Facilities detail pages) - switches
   between the 4 top-level category blocks (Boulders/Aggregate/... or
   Stone/Mobile/Quarry/Infra). Content column comes first in the HTML source
   (so it's on the left by default on desktop with no order override needed);
   the nav column is only pulled to the top via `order` on small screens. */
@media (max-width: 991px) {
    .outer-tabs-nav { order: -1; }
}
.outer-tab-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}
.outer-tab-menu li { flex: 0 0 auto; }
.outer-tab-menu a { display: block; opacity: .55; transition: .2s; }
.outer-tab-menu a.active, .outer-tab-menu a:hover { opacity: 1; }
.outer-tab-menu img { width: 90px; height: auto; }
@media (min-width: 992px) {
    .outer-tab-menu {
        flex-direction: column;
        position: sticky;
        top: 110px;
    }
    .outer-tab-menu img { width: 100%; max-width: 140px; }
}

/* Content blocks (rendered from legacy WYSIWYG content) */
.content-block table { width: 100%; margin: 1rem 0 1.5rem; border-collapse: collapse; }
.content-block table td { padding: .6rem .8rem; border-bottom: 1px solid var(--pii-light); }
/* Exact striping gradient from the original theme's .tab-pane table rule */
.content-block table tr:nth-child(odd) {
    background: linear-gradient(to right, rgba(8,146,209,.25) 0%, rgba(28,81,157,.25) 100%);
}
.content-block .title, .content-block .inner-title { font-weight: 700; color: var(--pii-navy); margin: 1rem 0 .5rem; font-size: 1.1rem; }
.content-block img { max-width: 100%; height: auto; }
/* Clients page: the WP content itself embeds "Klien Kami" as its title
   (instead of the shared page-title h1, see $dhSkipTitle in clients.php) -
   style that first .title as the real page heading, not a small sub-title. */
.clients-grid > .title:first-child {
    font-size: 2rem;
    margin: 0 0 1rem;
}
@media (min-width: 768px) { .clients-grid > .title:first-child { font-size: 2.4rem; } }
.content-block ul { padding-left: 1.2rem; }

.tabbed-content .nav-tabs { border-bottom: 2px solid var(--pii-light); margin-bottom: 1.5rem; }
.tabbed-content .nav-tabs .nav-link,
.tabbed-content .nav-tabs a { color: var(--pii-muted); font-weight: 600; border: none; }
.tabbed-content .nav-tabs .nav-link.active,
.tabbed-content .nav-tabs a.active { color: var(--pii-navy); border-bottom: 3px solid var(--pii-teal); background: none; }
.tabbed-content .tab-pane { padding-top: .5rem; }

/* Clients preview - exact navy background from the original #section5 */
#clients-preview {
    background: var(--pii-navy-dark);
    color: #fff;
}
#clients-preview .section-title,
#clients-preview .section-sub { color: #fff; }

/* About page company-profile PDF gallery - horizontal scroll strip with
   click-to-enlarge, standing in for the original touchcarousel+fancybox. */
.pdf-gallery-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x proximity;
}
.pdf-gallery-item {
    flex: 0 0 auto;
    width: 170px;
    text-align: center;
    scroll-snap-align: start;
}
.pdf-gallery-item img {
    width: 170px;
    height: 230px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(32,53,104,.15);
    display: block;
    margin-bottom: .4rem;
    transition: .2s;
}
.pdf-gallery-item:hover img { transform: scale(1.03); }
.pdf-gallery-item span { font-size: .8rem; color: var(--pii-text); }

/* Every client logo is styled as the same white square card directly on the
   <img> itself (padding creates the white margin, object-fit keeps the logo
   from stretching) - works automatically on both the swiper logos AND the
   raw WordPress-extracted client grid HTML, no wrapper markup needed, so
   every logo lines up identically regardless of its own image dimensions. */
.clients-grid img,
.client-logo {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    padding: 14px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto 1.5rem;
    transition: .2s;
}
.client-logo:hover, .clients-grid img:hover { transform: scale(1.05); }

/* Client swiper */
.client-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; }

/* News - a 3-column card grid (modernized from the original's plain
   thumbnail+text row list), so it needs a lot more horizontal room than a
   paragraph-of-text page - see .page-content.wide below. Cards are a flex
   column so titles/excerpts of differing lengths don't leave the "Baca
   Selengkapnya" button floating at a different height per card. */
.news-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(32,53,104,.1); display: flex; flex-direction: column; }
.news-thumb { width: 100%; height: 180px; object-fit: cover; }
.news-thumb-placeholder { background: var(--pii-light); }
.news-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.news-body h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-date { color: var(--pii-muted); font-size: .85rem; }
.news-body p:not(.news-date) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-body .btn { margin-top: auto; align-self: flex-start; }

/* Legal gallery */
.legal-thumb-link { display: block; text-align: center; }
.legal-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 14px rgba(32,53,104,.15); }
.legal-thumb-label { display: block; font-size: .8rem; color: var(--pii-muted); margin-top: .4rem; }
/* Legal document carousel - matches the original touchcarousel (a handful of
   pages visible at a time with prev/next arrows), not an all-at-once grid. */
.legal-swiper { padding: 0 40px 2.5rem; position: relative; }
.legal-swiper .swiper-slide { width: 160px; }
.legal-swiper-prev, .legal-swiper-next {
    color: var(--pii-navy);
    background: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(32,53,104,.2);
    --swiper-navigation-size: 16px;
}

/* Core Strength detail page - 3-column layout matching the original theme:
   big image buttons pick a group (left), each group has its own image
   sub-tabs (top of right column) with a numbered badge per item. */
.cs-page { padding-top: 90px; }
.cs-nav-col {
    background: var(--pii-light);
    padding: 2.5rem 1.5rem;
}
.cs-group-nav { gap: 1.25rem; }
.cs-group-nav .nav-link { padding: 0; opacity: .55; transition: .2s; }
.cs-group-nav .nav-link.active,
.cs-group-nav .nav-link:hover { opacity: 1; }
.cs-group-nav img { width: 100%; max-width: 220px; }
.cs-sub-nav { border-bottom: 2px solid var(--pii-light); padding: 2rem 2.5rem 0; gap: .5rem; }
.cs-sub-nav .nav-link { border: none; opacity: .45; padding: .5rem; }
.cs-sub-nav .nav-link.active, .cs-sub-nav .nav-link:hover { opacity: 1; border-bottom: 3px solid var(--pii-teal); }
.cs-sub-nav img { width: 60px; height: 60px; object-fit: contain; }
.cs-sub-content { padding: 2rem 2.5rem 3rem; }
.cs-number {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--pii-navy);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    margin-bottom: 1rem;
}
.cs-sub-content .title { font-weight: 700; color: var(--pii-navy); font-size: 1.3rem; margin-bottom: .75rem; }
@media (max-width: 767px) {
    .cs-nav-col { padding: 1.5rem; }
    .cs-group-nav { flex-direction: row !important; justify-content: center; gap: .75rem; }
    .cs-group-nav img { max-width: 90px; }
    .cs-sub-nav { padding: 1.5rem 1rem 0; }
    .cs-sub-content { padding: 1.5rem 1rem 2rem; }
}

/* Footer */
/* Contact form */
.contact-form .form-control { border-radius: 8px; padding: .65rem .9rem; }
.contact-form .form-control:focus { border-color: var(--pii-blue); box-shadow: 0 0 0 .2rem rgba(8,146,209,.15); }

/* Homepage contact section - exact navy background from the original #section9,
   every piece of text on it must stay white for contrast. */
#contact-preview {
    background: var(--pii-navy-dark);
    color: #fff;
}
#contact-preview .section-title,
#contact-preview label,
#contact-preview p,
#contact-preview .content-block,
#contact-preview .content-block * {
    color: #fff !important;
}
#contact-preview .content-block strong,
#contact-preview .content-block b { color: #fff; }
#contact-preview .form-control { background: #fff; border: none; border-radius: 0; color: var(--pii-text); }
#contact-preview .btn-primary {
    background: var(--pii-navy);
    border-radius: 0;
    box-shadow: none;
}
#contact-preview .btn-primary:hover { background: #16265a; }
/* The office address block (right column) has a lot of text - shrink it so
   every line (including the website/Facebook links at the bottom) fits
   inside the section instead of being clipped off screen. */
#contact-preview .col-md-3 .content-block {
    font-size: .78rem;
    line-height: 1.45;
}
#contact-preview .col-md-3 .content-block p { margin-bottom: .6rem; }
#contact-preview .col-md-3 .content-block a { color: #fff; text-decoration: underline; }

@media (max-width: 767px) {
    .plane, .ledakan, .ledakan2, .proses, .air-mancur, .asap { display: none; }
}

/* Service area - title overlaid on the map like the original (which used an
   absolutely-positioned header over a fixed-width oversized map, causing it
   to get clipped on smaller screens). Map here is responsive (max-width:100%)
   so it can be shown large without ever being cropped. */
#service-area-preview .container { text-align: center; }
/* display:inline-block so the wrap's own box shrinks to exactly match the
   <img> inside it (not a fixed 1100px box with the image centered inside,
   which was leaving a gap between the wrap's edge and the image's actual
   edge - throwing off the overlay's top/left percentages, which are
   relative to the wrap, not the image). Now overlay position always lines
   up with the image's real corner regardless of the image's rendered size. */
.service-area-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
/* max-height goes directly on the <img> (not the parent wrap) - percentage
   heights on a child are ignored unless the parent has an explicit height,
   which was silently defeating this constraint before (image always
   rendered at its intrinsic ~645px regardless of viewport). This is the
   real fix: the map always fits top-to-bottom within one screen, no matter
   how short the actual browser window is. */
.service-area-map { max-height: 78vh; width: auto; max-width: 100%; display: block; }
@media (max-width: 767px) {
    .service-area-map { max-height: none; width: 100%; }
}
#service-area-preview { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.service-area-overlay {
    position: absolute;
    top: 2%;
    left: 4%;
    text-align: left;
    z-index: 2;
}
.service-area-overlay .section-title { margin-bottom: 0; }
@media (max-width: 767px) {
    .service-area-overlay { position: static; transform: none; margin-bottom: 1rem; }
}

/* Legal preview - same photographed background used by the original #section8 */
#legal-preview {
    background: linear-gradient(rgba(10,20,45,.55), rgba(10,20,45,.7)), url('../images/bg-legal.png');
    background-size: cover;
    background-position: center;
    color: #fff;
}
#legal-preview .section-title,
#legal-preview .section-sub { color: #fff; }

/* One-section-per-scroll homepage layout. Actual step-by-step navigation is
   driven by JS (assets/js/site.js intercepts wheel events) so a single scroll
   tick always lands exactly one section forward/back, like the original
   fullPage.js site - CSS here just makes each section fill one viewport. */
body.snap-scroll .section {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
body.snap-scroll .section > .container {
    width: 100%;
}
@media (max-width: 767px) {
    /* Locked one-section-per-scroll doesn't work well with touch scrolling
       and long content (tables, grids) - fall back to normal scroll on mobile. */
    body.snap-scroll .section { min-height: auto; display: block; }
}