/* ==========================================================================
   PAWAN INDUSTRIES — Homepage Stylesheet
   Precision Engineering & Machining Components Manufacturer
   --------------------------------------------------------------------------
   Palette:  Red #E31B23 · Charcoal #252525 · Grey #5F6368
             Light #F4F4F4 · Gold #D5A928 · White #FFFFFF
   Type:     Montserrat (headings) · Inter (body)
   Stack:    Bootstrap 5 · Swiper.js · Vanilla CSS
   ========================================================================== */

/* ----------------------------------------------------
   1. DESIGN TOKENS & BASE
---------------------------------------------------- */
:root {
    --p-red: #e31b23;
    --p-red-dark: #b9141b;
    --p-charcoal: #252525;
    --p-black: #191919;
    --p-grey: #5f6368;
    --p-grey-soft: #9aa0a6;
    --p-light: #f4f4f4;
    --p-line: #e4e4e4;
    --p-gold: #d5a928;
    --p-gold-dark: #9a7b0f;
    --p-white: #ffffff;

    --font-head: "Montserrat", sans-serif;
    --font-body: "Inter", sans-serif;

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --shadow-card: 0 14px 40px rgba(20, 20, 20, 0.1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--p-charcoal);
    background: var(--p-white);
    overflow-x: hidden; /* guard against horizontal scroll */
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
} /* responsive images everywhere */

::selection {
    background: var(--p-red);
    color: var(--p-white);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--p-light);
}
::-webkit-scrollbar-thumb {
    background: var(--p-charcoal);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--p-red);
}

/* Accessible focus */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--p-red);
    outline-offset: 2px;
}

/* Lucide icon base size */
.ic {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Utility text colors */
.text-red {
    color: var(--p-red) !important;
}
.text-gold {
    color: var(--p-gold) !important;
}

/* Blueprint hairline grid (dark surfaces) */
.bg-grid-dark {
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 46px 46px;
}
/* Blueprint hairline grid (light surfaces) */
.bg-grid-light {
    background-image: linear-gradient(rgba(37, 37, 37, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 37, 37, 0.045) 1px, transparent 1px);
    background-size: 46px 46px;
}

/* ----------------------------------------------------
   2. SHARED COMPONENTS
---------------------------------------------------- */

/* Section rhythm */
.section {
    padding: 104px 0;
    position: relative;
}
.section-head {
    margin-bottom: 12px;
}

/* Overline label — small red bar + letterspaced text */
.section-label {
    display: flex;
    align-items: center;
    font-family: var(--font-head);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--p-red);
    margin-bottom: 14px;
}
.section-label .label-mark {
    display: inline-block;
    width: 34px;
    height: 3px;
    background: var(--p-red);
    margin-right: 14px;
}
.section-label.label-gold {
    color: var(--p-gold);
}
.section-label.label-gold .label-mark {
    background: var(--p-gold);
}
.section-label.label-light {
    color: rgba(255, 255, 255, 0.85);
}

/* Section title */
.section-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    line-height: 1.16;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    margin-bottom: 0;
}
.section-text {
    color: var(--p-grey);
    font-size: 15.5px;
    max-width: 640px;
}

/* ------- Buttons (sharp, industrial) ------- */
.btn {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-radius: 0;
    padding: 15px 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
}
.btn .ic {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--ease-out);
}
.btn:hover .ic {
    transform: translateX(4px);
}
.btn-lg {
    padding: 17px 34px;
    font-size: 13px;
}

.btn-pi-red {
    background: var(--p-red);
    border: 1px solid var(--p-red);
    color: var(--p-white);
}
.btn-pi-red:hover,
.btn-pi-red:focus {
    background: var(--p-charcoal);
    border-color: var(--p-charcoal);
    color: var(--p-white);
}

.btn-pi-dark {
    background: var(--p-charcoal);
    border: 1px solid var(--p-charcoal);
    color: var(--p-white);
}
.btn-pi-dark:hover,
.btn-pi-dark:focus {
    background: var(--p-red);
    border-color: var(--p-red);
    color: var(--p-white);
}

.btn-pi-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: var(--p-white);
}
.btn-pi-outline:hover,
.btn-pi-outline:focus {
    background: var(--p-white);
    border-color: var(--p-white);
    color: var(--p-charcoal);
}

.btn-pi-outline-dark {
    background: transparent;
    border: 1px solid var(--p-charcoal);
    color: var(--p-charcoal);
}
.btn-pi-outline-dark:hover,
.btn-pi-outline-dark:focus {
    background: var(--p-red);
    border-color: var(--p-red);
    color: var(--p-white);
}

/* ------- Scroll reveal (vanilla, subtle) ------- */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform;
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------------------
   3. PRELOADER
---------------------------------------------------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--p-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.preloader-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-inner {
    text-align: center;
}
.preloader-logo {
    height: 62px;
    width: auto;
}
.preloader-bar {
    width: 180px;
    height: 3px;
    background: #ececec;
    margin: 22px auto 0;
    overflow: hidden;
    position: relative;
}
.preloader-bar span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: var(--p-red);
    animation: preloadSlide 1.1s ease-in-out infinite;
}
@keyframes preloadSlide {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

/* ----------------------------------------------------
   4. TOP INFO BAR
---------------------------------------------------- */
.topbar {
    background: var(--p-charcoal);
    color: #b9bdc2;
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 0;
}
.topbar-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar-list .ic {
    width: 14px;
    height: 14px;
    color: var(--p-red);
}
.topbar-list a {
    color: #e5e7e9;
    text-decoration: none;
    transition: color 0.25s;
}
.topbar-list a:hover {
    color: var(--p-red);
}
.topbar-closed {
    color: var(--p-grey-soft);
}
.topbar-closed::before {
    content: "·";
    margin: 0 8px;
}
.topbar-badge {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--p-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar-badge .ic {
    width: 15px;
    height: 15px;
}

/* ----------------------------------------------------
   5. NAVBAR
---------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    transition: box-shadow 0.35s ease;
}
.site-header.navbar-scrolled {
    box-shadow: 0 6px 30px rgba(20, 20, 20, 0.12);
}

.pi-navbar {
    background: var(--p-white);
    border-bottom: 1px solid #ededed;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 86px;
    transition: min-height 0.35s ease;
}
.site-header.navbar-scrolled .pi-navbar {
    min-height: 72px;
}

.nav-logo {
    height: 60px;
    width: auto;
    transition: height 0.35s ease;
}
.site-header.navbar-scrolled .nav-logo {
    height: 50px;
}

.pi-navbar .nav-link {
    position: relative;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    padding: 32px 16px !important;
    transition: color 0.3s ease, padding 0.35s ease;
}
.site-header.navbar-scrolled .pi-navbar .nav-link {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}
.pi-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 20px;
    height: 2px;
    background: var(--p-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out), bottom 0.35s ease;
}
.site-header.navbar-scrolled .pi-navbar .nav-link::after {
    bottom: 14px;
}
.pi-navbar .nav-link:hover,
.pi-navbar .nav-link.active {
    color: var(--p-red);
}
.pi-navbar .nav-link:hover::after,
.pi-navbar .nav-link.active::after {
    transform: scaleX(1);
}

.btn-quote {
    padding: 13px 26px;
}

/* Custom hamburger */
.pi-toggler {
    width: 46px;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
}
.pi-toggler:focus {
    box-shadow: 0 0 0 2px rgba(227, 27, 35, 0.35);
}
.toggler-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--p-charcoal);
    transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.pi-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.pi-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
    opacity: 0;
}
.pi-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------
   6. HERO
---------------------------------------------------- */

/* =========================================================
   HERO SECTION
========================================================= */

.hero {
    position: relative;
    min-height: 92vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--p-black);
    color: var(--p-white);
}

/* =========================================================
   SWIPER
========================================================= */

.hero-swiper {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
}

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

/* =========================================================
   SLIDE
========================================================= */

.hero-slide {
    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.hero-slide-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    transform: scale(1);

    transition: transform 7s ease;
}

/* Ken Burns effect */

.hero-swiper .swiper-slide-active .hero-slide-bg {
    transform: scale(1.07);
}

/* =========================================================
   OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(15, 15, 15, 0.94) 0%,
        rgba(20, 20, 20, 0.84) 35%,
        rgba(20, 20, 20, 0.48) 62%,
        rgba(20, 20, 20, 0.12) 100%
    );
}

/* Bottom dark fade */

.hero-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, transparent 35%);
}

/* =========================================================
   CONTENT
========================================================= */

.hero-content-wrap {
    position: relative;

    z-index: 5;

    width: 100%;

    padding-top: 80px;
    padding-bottom: 130px;
}

.hero-content {
    max-width: 760px;
}

/* =========================================================
   LABEL
========================================================= */

.hero-label {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    font-family: var(--font-head);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.82);
}

.label-mark {
    display: inline-block;

    width: 42px;
    height: 3px;

    flex-shrink: 0;

    background: var(--p-red);
}

/* =========================================================
   TITLE
========================================================= */

.hero-title {
    margin: 0 0 25px;
}

/* Route text */

.hero-title-routes {
    display: block;

    max-width: 700px;

    margin-bottom: 12px;

    font-family: var(--font-head);

    font-size: clamp(0.9rem, 1.5vw, 1.2rem);

    font-weight: 600;

    line-height: 1.5;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--p-gold);
}

/* Main title */

.hero-title-main {
    display: block;

    font-family: var(--font-head);

    font-size: clamp(2.2rem, 5vw, 4.5rem);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -2px;

    text-transform: uppercase;

    color: var(--p-white);
}

.hero-title-main em {
    display: block;

    font-style: normal;

    color: var(--p-red);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.hero-text {
    max-width: 560px;

    margin: 0 0 32px;

    font-family: var(--font-body);

    font-size: 16px;

    line-height: 1.75;

    color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   BUTTONS
========================================================= */

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.hero-actions .btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 0;

    font-family: var(--font-head);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.hero-actions .btn svg {
    width: 17px;
    height: 17px;

    transition: transform 0.3s ease;
}

.hero-actions .btn:hover svg {
    transform: translateX(4px);
}

/* Red button */

.btn-pi-red {
    color: var(--p-white);

    background: var(--p-red);

    border: 1px solid var(--p-red);
}

.btn-pi-red:hover {
    color: var(--p-white);

    background: var(--p-red-dark);

    border-color: var(--p-red-dark);

    transform: translateY(-2px);
}

/* Outline button */

.btn-pi-outline {
    color: var(--p-white);

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.55);
}

.btn-pi-outline:hover {
    color: var(--p-charcoal);

    background: var(--p-white);

    border-color: var(--p-white);

    transform: translateY(-2px);
}

/* =========================================================
   SIDE NAVIGATION
========================================================= */

.hero-nav {
    position: absolute;

    right: 35px;
    top: 50%;

    z-index: 10;

    display: flex;

    flex-direction: column;

    gap: 10px;

    transform: translateY(-50%);
}

.hero-nav-btn {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--p-white);

    background: rgba(20, 20, 20, 0.55);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 50%;

    cursor: pointer;

    backdrop-filter: blur(5px);

    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hero-nav-btn svg {
    width: 18px;
    height: 18px;
}

.hero-nav-btn:hover {
    background: var(--p-red);

    border-color: var(--p-red);

    transform: scale(1.06);
}

/* =========================================================
   HERO FOOTER
========================================================= */

.hero-foot {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10;

    border-top: 1px solid rgba(255, 255, 255, 0.13);

    background: rgba(18, 18, 18, 0.45);

    backdrop-filter: blur(5px);
}

.hero-foot-inner {
    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 35px;
}

/* =========================================================
   PAGINATION AREA
========================================================= */

.hero-pagination-wrap {
    display: flex;

    align-items: center;

    gap: 22px;
}

.hero-slide-count {
    display: flex;

    align-items: center;

    font-family: var(--font-head);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;

    color: var(--p-white);
}

.hero-slide-count #heroCurrent {
    color: var(--p-red);

    font-size: 17px;
}

.count-divider {
    margin: 0 7px;

    color: rgba(255, 255, 255, 0.3);
}

/* =========================================================
   PAGINATION BARS
========================================================= */

.hero-pagination {
    display: flex;

    align-items: center;

    gap: 7px;
}

.hero-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 3px;

    margin: 0 !important;

    padding: 0;

    opacity: 1;

    border-radius: 0;

    background: rgba(255, 255, 255, 0.3);

    transition: width 0.35s ease, background 0.35s ease;
}

.hero-pagination .swiper-pagination-bullet-active {
    width: 50px;

    background: var(--p-red);
}

/* =========================================================
   HERO HIGHLIGHTS
========================================================= */

.hero-highlights {
    align-items: center;

    gap: 24px;

    margin-left: auto;
}

.hero-highlight {
    display: flex;

    align-items: center;

    gap: 9px;
}

.hero-highlight strong {
    font-family: var(--font-head);

    font-size: 18px;

    font-weight: 800;

    color: var(--p-red);
}

.hero-highlight span {
    font-family: var(--font-head);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.65);
}

.hero-highlight-divider {
    width: 1px;
    height: 25px;

    background: rgba(255, 255, 255, 0.18);
}

/* =========================================================
   SCROLL HINT
========================================================= */

.scroll-hint {
    margin-left: auto;

    font-family: var(--font-head);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    color: rgba(255, 255, 255, 0.65);

    transition: color 0.3s ease;
}

.scroll-hint:hover {
    color: var(--p-white);
}

.scroll-hint .ic {
    width: 15px;
    height: 15px;

    animation: hintDrop 1.8s ease-in-out infinite;
}

@keyframes hintDrop {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/* =========================================================
   SLIDE CONTENT ANIMATION
========================================================= */

.hero-content > * {
    opacity: 0;

    transform: translateY(30px);
}

.swiper-slide-active .hero-content > * {
    animation: heroContentReveal 0.8s var(--ease-out) forwards;
}

.swiper-slide-active .hero-label {
    animation-delay: 0.15s;
}

.swiper-slide-active .hero-title {
    animation-delay: 0.3s;
}

.swiper-slide-active .hero-text {
    animation-delay: 0.45s;
}

.swiper-slide-active .hero-actions {
    animation-delay: 0.6s;
}

@keyframes heroContentReveal {
    to {
        opacity: 1;

        transform: translateY(0);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
    .hero {
        min-height: 90vh;
    }

    .hero-content-wrap {
        padding-top: 90px;
        padding-bottom: 120px;
    }

    .hero-title-main {
        font-size: clamp(2.8rem, 8vw, 5rem);
    }

    .hero-nav {
        right: 20px;
    }

    .hero-nav-btn {
        width: 42px;
        height: 42px;
    }

    .hero-overlay {
        background: linear-gradient(90deg, rgba(15, 15, 15, 0.94), rgba(20, 20, 20, 0.65));
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
    .hero {
        min-height: 100svh;
    }

    .hero-content-wrap {
        min-height: 100svh;

        display: flex;
        align-items: center;

        padding-top: 80px;
        padding-bottom: 110px;
    }

    .hero-label {
        font-size: 9px;

        letter-spacing: 2px;

        gap: 10px;
    }

    .label-mark {
        width: 28px;
        height: 2px;
    }

    .hero-title {
        margin-bottom: 20px;
    }

    .hero-title-routes {
        font-size: 9px;

        letter-spacing: 1px;

        line-height: 1.7;
    }

    .hero-title-main {
        font-size: clamp(2.5rem, 12vw, 4rem);

        line-height: 1;

        letter-spacing: -1px;
    }

    .hero-text {
        font-size: 14px;

        line-height: 1.7;

        max-width: 100%;
    }

    .hero-actions {
        flex-direction: column;

        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-nav {
        right: 15px;

        top: auto;
        bottom: 105px;

        flex-direction: row;

        transform: none;
    }

    .hero-nav-btn {
        width: 38px;
        height: 38px;
    }

    .hero-foot-inner {
        min-height: 65px;

        gap: 15px;
    }

    .hero-pagination-wrap {
        gap: 15px;
    }

    .hero-pagination .swiper-pagination-bullet {
        width: 20px;
    }

    .hero-pagination .swiper-pagination-bullet-active {
        width: 35px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {
    .hero-title-main {
        font-size: 2.4rem;
    }

    .hero-title-routes {
        font-size: 8px;
    }

    .hero-description {
        font-size: 13px;
    }
}

/* ----------------------------------------------------
   7. CAPABILITY TICKER (Swiper marquee)
---------------------------------------------------- */
.capability-strip {
    background: var(--p-black);
    border-top: 3px solid var(--p-red);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.marquee-swiper {
    padding: 15px 0;
}
.marquee-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}
.marquee-swiper .swiper-slide {
    width: auto;
}
.tick-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8e9297;
    white-space: nowrap;
}
.tick-dot {
    width: 9px;
    height: 9px;
    background: var(--p-red);
    transform: rotate(45deg);
    display: inline-block;
}

/* ----------------------------------------------------
   8. ABOUT SECTION
---------------------------------------------------- */
.about-section {
    background: var(--p-white);
    overflow: hidden;
}
.about-section .container {
    position: relative;
    z-index: 2;
}
.about-section.bg-grid-light {
    background-color: var(--p-white);
}

.about-media {
    position: relative;
}
.about-media-frame {
    position: relative;
}
.about-media-frame img {
    width: 100%;
    aspect-ratio: 5 / 5.6;
    object-fit: cover;
    display: block;
}
/* Offset red frame accent */
.about-media-frame::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 26px;
    right: -14px;
    bottom: -14px;
    border: 2px solid var(--p-red);
    z-index: -1;
}
.about-media-small {
    position: absolute;
    right: -8px;
    bottom: -42px;
    width: 46%;
    border: 8px solid var(--p-white);
    box-shadow: var(--shadow-card);
}
.about-badge {
    position: absolute;
    top: 0;
    left: -14px;
    background: var(--p-red);
    color: var(--p-white);
    padding: 18px 22px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    max-width: 210px;
}
.about-badge-years {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.about-badge-text {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 4px;
    line-height: 1.55;
}

.about-list-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--p-charcoal);
}
.about-list-item .ic {
    width: 16px;
    height: 16px;
    color: var(--p-white);
    background: var(--p-red);
    padding: 3px;
    box-sizing: content-box;
}

/* ----------------------------------------------------
   9. STATISTICS
---------------------------------------------------- */
.stats-section {
    background: var(--p-charcoal);
    padding: 0;
}
.stats-section .container {
    padding-top: 88px;
    padding-bottom: 88px;
    position: relative;
    z-index: 2;
}
.stats-grid {
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-cell {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}
.stat-cell:last-child {
    border-right: 0;
}
.stat-box {
    padding: 46px 30px 40px;
    position: relative;
    transition: background 0.35s ease;
}
.stat-box::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--p-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-out);
}
.stat-box:hover {
    background: rgba(255, 255, 255, 0.03);
}
.stat-box:hover::before {
    transform: scaleX(1);
}
.stat-icon {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(213, 169, 40, 0.45);
    background: rgba(213, 169, 40, 0.08);
    color: var(--p-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.stat-icon .ic {
    width: 24px;
    height: 24px;
}
.stat-number {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height: 1;
    color: var(--p-white);
    margin-bottom: 10px;
}
.stat-suffix {
    color: var(--p-red);
    margin-left: 2px;
}
.stat-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 6px;
}
.stat-note {
    font-size: 12.5px;
    color: var(--p-grey-soft);
}

/* ----------------------------------------------------
   10. PRODUCTS
---------------------------------------------------- */
.products-section {
    background: var(--p-light);
}
.products-section .container {
    position: relative;
    z-index: 2;
}

.product-card {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--p-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-out);
    z-index: 3;
}
.product-card:hover {
    border-color: #d3d3d3;
    box-shadow: var(--shadow-card);
    transform: translateY(-5px);
}
.product-card:hover::before {
    transform: scaleX(1);
}

.product-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 3.9;
    background: #efefef;
}
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out);
}
.product-card:hover .product-thumb img {
    transform: scale(1.08);
}
.product-index {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--p-charcoal);
    color: var(--p-white);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 7px 13px;
    transition: background 0.3s ease;
}
.product-card:hover .product-index {
    background: var(--p-red);
}

.product-body {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    margin-bottom: 8px;
}
.product-text {
    font-size: 14.5px;
    color: var(--p-grey);
    margin-bottom: 18px;
    flex: 1;
}
.product-link {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--p-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.product-link .ic {
    width: 15px;
    height: 15px;
    transition: transform 0.3s var(--ease-out);
}
.product-link:hover {
    color: var(--p-red-dark);
}
.product-link:hover .ic {
    transform: translateX(5px);
}

/* ----------------------------------------------------
   11. AWARD
---------------------------------------------------- */
.award-section {
    background: #202020;
}
.award-section .container {
    position: relative;
    z-index: 2;
}
.award-text {
    color: #b9bdc2;
    font-size: 15.5px;
    max-width: 600px;
}
.award-text strong {
    color: var(--p-white);
    font-weight: 600;
}

.award-fact {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--p-gold);
    padding: 14px 20px;
}
.award-fact .ic {
    width: 26px;
    height: 26px;
    color: var(--p-gold);
}
.award-fact strong {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--p-white);
    letter-spacing: 0.4px;
}
.award-fact span {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--p-grey-soft);
}

.award-visual {
    position: relative;
    border: 1px solid rgba(213, 169, 40, 0.55);
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
}
.award-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
}
.award-ribbon {
    position: absolute;
    top: -26px;
    left: -26px;
    width: 76px;
    height: 76px;
    background: var(--p-red);
    color: var(--p-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 10px 26px rgba(227, 27, 35, 0.4);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.award-ribbon .ic {
    width: 32px;
    height: 32px;
}
.award-visual-caption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--p-black);
    border-top: 2px solid var(--p-gold);
    padding: 13px 18px;
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--p-grey-soft);
}
.award-visual-caption span:first-child {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* ----------------------------------------------------
   12. BEST PRACTICES
---------------------------------------------------- */
.practices-section {
    background: var(--p-white);
}
.practices-section .container {
    position: relative;
    z-index: 2;
}

.practice-card {
    position: relative;
    border: 1px solid var(--p-line);
    background: var(--p-white);
    padding: 36px 28px 32px;
    overflow: hidden;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.practice-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--p-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-out);
}
.practice-card:hover {
    border-color: #d3d3d3;
    box-shadow: var(--shadow-card);
}
.practice-card:hover::before {
    transform: scaleX(1);
}

.practice-num {
    position: absolute;
    top: 12px;
    right: 18px;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 58px;
    line-height: 1;
    color: rgba(37, 37, 37, 0.055);
    pointer-events: none;
}
.practice-icon {
    width: 58px;
    height: 58px;
    background: rgba(227, 27, 35, 0.07);
    border: 1px solid rgba(227, 27, 35, 0.18);
    color: var(--p-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background 0.35s ease, color 0.35s ease;
}
.practice-icon .ic {
    width: 26px;
    height: 26px;
}
.practice-card:hover .practice-icon {
    background: var(--p-red);
    color: var(--p-white);
}
.practice-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    margin-bottom: 10px;
}
.practice-text {
    font-size: 14.5px;
    color: var(--p-grey);
    margin-bottom: 0;
}

/* ----------------------------------------------------
   13. TRACEABILITY
---------------------------------------------------- */
.trace-section {
    background: var(--p-charcoal);
}
.trace-section .container {
    position: relative;
    z-index: 2;
}
.trace-text {
    color: #b9bdc2;
    font-size: 15.5px;
}

.trace-list li {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.trace-list li:last-child {
    border-bottom: 0;
}
.trace-check {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 1px solid rgba(213, 169, 40, 0.45);
    background: rgba(213, 169, 40, 0.07);
    color: var(--p-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.trace-check .ic {
    width: 21px;
    height: 21px;
}
.trace-list strong {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--p-white);
    display: block;
    margin-bottom: 3px;
}
.trace-list p {
    font-size: 13.5px;
    color: var(--p-grey-soft);
    margin: 0;
}

.trace-visual {
    position: relative;
    padding: 14px;
}
.trace-visual img {
    width: 100%;
    aspect-ratio: 16 / 11.5;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
/* Red corner brackets — machine-vision framing motif */
.trace-visual .corner {
    position: absolute;
    width: 26px;
    height: 26px;
    z-index: 2;
}
.corner-tl {
    top: 0;
    left: 0;
    border-top: 3px solid var(--p-red);
    border-left: 3px solid var(--p-red);
}
.corner-tr {
    top: 0;
    right: 0;
    border-top: 3px solid var(--p-red);
    border-right: 3px solid var(--p-red);
}
.corner-bl {
    bottom: 0;
    left: 0;
    border-bottom: 3px solid var(--p-red);
    border-left: 3px solid var(--p-red);
}
.corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid var(--p-red);
    border-right: 3px solid var(--p-red);
}
.trace-tag {
    position: absolute;
    left: 26px;
    bottom: 26px;
    z-index: 3;
    background: var(--p-red);
    color: var(--p-white);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.trace-tag .ic {
    width: 16px;
    height: 16px;
}

/* ----------------------------------------------------
   14. SERVICES PREVIEW
---------------------------------------------------- */
.services-section {
    background: var(--p-light);
}
.services-section .container {
    position: relative;
    z-index: 2;
}

.service-card {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    display: flex;
    flex-direction: column;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.service-card:hover {
    border-color: #d3d3d3;
    box-shadow: var(--shadow-card);
    transform: translateY(-5px);
}
.service-thumb {
    overflow: hidden;
    aspect-ratio: 4 / 2.9;
    background: #efefef;
}
.service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out), filter 0.5s ease;
    filter: grayscale(18%);
}
.service-card:hover .service-thumb img {
    transform: scale(1.07);
    filter: grayscale(0%);
}

.service-body {
    padding: 30px 24px 24px;
    position: relative;
    flex: 1;
}
.service-machine {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--p-gold-dark);
    display: block;
    margin-bottom: 7px;
}
.service-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    margin-bottom: 8px;
}
.service-text {
    font-size: 13.5px;
    color: var(--p-grey);
    margin-bottom: 0;
}
.service-arrow {
    position: absolute;
    top: -21px;
    right: 22px;
    width: 42px;
    height: 42px;
    background: var(--p-charcoal);
    color: var(--p-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s var(--ease-out);
}
.service-arrow .ic {
    width: 18px;
    height: 18px;
}
.service-card:hover .service-arrow {
    background: var(--p-red);
}
.service-arrow:hover {
    transform: translate(3px, -3px);
}

/* ----------------------------------------------------
   15. CALL TO ACTION
---------------------------------------------------- */
.cta-section {
    position: relative;
    padding: 118px 0;
    background: linear-gradient(rgba(22, 22, 22, 0.9), rgba(22, 22, 22, 0.82)),
        url("https://images.pexels.com/photos/19544248/pexels-photo-19544248.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1920&h=900")
            center / cover no-repeat;
    color: var(--p-white);
}
.cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    background: var(--p-red);
}
.cta-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;
    background: var(--p-gold);
}
.cta-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.18;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 0;
}
.cta-text {
    font-size: 16.5px;
    color: rgba(255, 255, 255, 0.75);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------------
   16. FOOTER
---------------------------------------------------- */
.site-footer {
    background: var(--p-black);
    color: #a7abb0;
}
/* two-tone brand strip */
.footer-top {
    height: 5px;
    background: linear-gradient(90deg, var(--p-red) 0 55%, var(--p-gold) 55% 100%);
}
.footer-main {
    padding: 78px 0 60px;
}

.footer-logo {
    height: 62px;
    width: auto;
    background: var(--p-white);
    padding: 10px 14px;
}
.footer-text {
    font-size: 14px;
    line-height: 1.8;
    color: #a7abb0;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #c9cccf;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-social a:hover {
    background: var(--p-red);
    border-color: var(--p-red);
    color: var(--p-white);
}
.footer-social .ic {
    width: 17px;
    height: 17px;
}

.footer-title {
    position: relative;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--p-white);
    margin-bottom: 24px;
    padding-bottom: 14px;
}
.footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    background: var(--p-red);
}

.footer-links li {
    margin-bottom: 10px;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #a7abb0;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s var(--ease-out);
}
.footer-links a:hover {
    color: var(--p-red);
    transform: translateX(4px);
}
.footer-links .ic {
    width: 13px;
    height: 13px;
    color: var(--p-red);
}

.footer-contact li {
    display: flex;
    gap: 13px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.75;
}
.footer-contact .ic {
    width: 17px;
    height: 17px;
    color: var(--p-gold);
    margin-top: 3px;
}
.footer-contact strong {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--p-white);
    margin-bottom: 4px;
}
.footer-contact a {
    color: #a7abb0;
    text-decoration: none;
    transition: color 0.25s;
}
.footer-contact a:hover {
    color: var(--p-red);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
    font-size: 13px;
    color: #80858b;
}
.footer-bottom strong {
    color: #c9cccf;
}
.footer-tagline {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(213, 169, 40, 0.85);
}

/* ----------------------------------------------------
   17. BACK TO TOP
---------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1050;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 0;
    background: var(--p-red);
    color: var(--p-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(20, 20, 20, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.35s ease, visibility 0.35s, transform 0.35s var(--ease-out), background 0.3s;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--p-charcoal);
}
.back-to-top .ic {
    width: 19px;
    height: 19px;
}

/* ----------------------------------------------------
   18. RESPONSIVE
---------------------------------------------------- */
@media (max-width: 1199.98px) {
    .pi-navbar .nav-link {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .btn-quote {
        padding: 13px 20px;
    }
}

@media (max-width: 991.98px) {
    .section {
        padding: 84px 0;
    }

    /* Navbar — mobile collapse panel */
    .pi-navbar {
        min-height: 72px;
        padding: 10px 0;
    }
    .nav-logo {
        height: 48px;
    }
    .pi-navbar .navbar-collapse {
        background: var(--p-white);
        border-top: 1px solid #efefef;
        margin-top: 10px;
        padding: 8px 4px 22px;
    }
    .pi-navbar .nav-link {
        padding: 13px 8px !important;
        border-bottom: 1px solid #f2f2f2;
    }
    .pi-navbar .nav-link::after {
        display: none;
    }
    .btn-quote {
        justify-content: center;
    }

    .hero {
        min-height: 88vh;
    }
    .hero-content-wrap {
        padding-bottom: 120px;
    }

    /* Stats — 2x2 grid seams */
    .stat-cell {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .stat-cell:nth-child(2) {
        border-right: 0;
    }
    .stat-cell:nth-child(3),
    .stat-cell:nth-child(4) {
        border-bottom: 0;
    }

    .about-media {
        margin-bottom: 56px;
    }
    .about-media-small {
        bottom: -30px;
    }
    .award-visual {
        max-width: 480px;
        margin: 30px auto 0;
    }
    .award-ribbon {
        left: -14px;
    }
    .trace-visual {
        margin-top: 8px;
    }
}

@media (max-width: 767.98px) {
    html {
        scroll-padding-top: 76px;
    }
    .section {
        padding: 72px 0;
    }

    .hero {
        min-height: 86vh;
    }
    .hero-text {
        font-size: 15.5px;
    }
    .hero-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .hero-foot {
        padding: 15px 0;
    }

    .about-badge {
        left: 0;
        max-width: 190px;
        padding: 14px 18px;
    }
    .about-badge-years {
        font-size: 16px;
    }

    .award-ribbon {
        width: 62px;
        height: 62px;
        top: -20px;
        left: 2px;
    }
    .award-ribbon .ic {
        width: 26px;
        height: 26px;
    }

    .service-arrow {
        width: 38px;
        height: 38px;
        top: -19px;
    }

    .cta-section {
        padding: 88px 0;
    }
    .cta-section::before,
    .cta-section::after {
        width: 6px;
    }

    .footer-main {
        padding: 62px 0 46px;
    }
    .footer-title {
        margin-top: 10px;
    }
}

@media (max-width: 575.98px) {
    .section-title {
        font-size: 1.65rem;
    }
    .stats-section .container {
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .stat-box {
        padding: 34px 20px 30px;
    }
    .tick-item {
        padding: 0 18px;
        font-size: 12.5px;
    }
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ----------------------------------------------------
   19. REDUCED MOTION
---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal,
    [data-hero] {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-slide-bg {
        transform: none !important;
    }
}

/* ----------------------------------------------------
   20. TEXTURED SECTIONS — blueprint grid variants
        (higher specificity so the hairline grid sits on
        top of the flat section background colors)
---------------------------------------------------- */
section.stats-section.bg-grid-dark,
section.trace-section.bg-grid-dark,
section.award-section.bg-grid-dark {
    background-color: var(--p-charcoal);
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 46px 46px;
}
section.award-section.bg-grid-dark {
    background-color: #202020;
}

section.about-section.bg-grid-light,
section.products-section.bg-grid-light,
section.services-section.bg-grid-light {
    background-color: var(--p-light);
    background-image: linear-gradient(rgba(37, 37, 37, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 37, 37, 0.04) 1px, transparent 1px);
    background-size: 46px 46px;
}
section.about-section.bg-grid-light {
    background-color: var(--p-white);
}

/* ==========================================================================
   ABOUT PAGE COMPONENTS
   ========================================================================== */

/* ----------------------------------------------------
   21. INNER PAGE HERO (banner + breadcrumb)
---------------------------------------------------- */
.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    padding: 150px 0 78px;
    background: linear-gradient(
            100deg,
            rgba(18, 18, 18, 0.92) 0%,
            rgba(24, 24, 24, 0.72) 55%,
            rgba(24, 24, 24, 0.45) 100%
        ),
        url("https://images.pexels.com/photos/8865189/pexels-photo-8865189.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1920&h=720")
            center / cover no-repeat;
    border-bottom: 4px solid var(--p-red);
    color: var(--p-white);
    overflow: hidden;
}
/* faint technical grid over banner imagery */
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 54px 54px;
    opacity: 0.5;
    pointer-events: none;
}
.page-hero-overlay {
    position: absolute;
    inset: 0;
}
.page-hero-content {
    position: relative;
    z-index: 2;
}
.page-hero-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(2.4rem, 5.2vw, 3.9rem);
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    padding-left: 24px;
    border-left: 5px solid var(--p-red);
}
.breadcrumb-pi {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-left: 29px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.breadcrumb-pi a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.25s;
}
.breadcrumb-pi a:hover {
    color: var(--p-red);
}
.breadcrumb-pi .ic {
    width: 13px;
    height: 13px;
    color: var(--p-gold);
}
.breadcrumb-pi .current {
    color: var(--p-white);
}

/* Slightly smaller title for long about heading */
.section-title-md {
    font-size: clamp(1.55rem, 2.7vw, 2.25rem);
    line-height: 1.28;
}

/* ----------------------------------------------------
   22. QUALITY PILLARS — ISO / STAFF / "0" PPM
---------------------------------------------------- */
.pillars-section {
    background: var(--p-white);
}
.pillars-grid {
    border: 1px solid var(--p-line);
}
.pillar-cell {
    border-right: 1px solid var(--p-line);
}
.pillar-cell:last-child {
    border-right: 0;
}
.pillar-box {
    position: relative;
    height: 100%;
    padding: 46px 34px 42px;
    background: var(--p-white);
    transition: background 0.35s ease;
}
.pillar-box::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--p-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-out);
}
.pillar-box:hover {
    background: #fbfbfb;
}
.pillar-box:hover::before {
    transform: scaleX(1);
}
.pillar-icon {
    width: 58px;
    height: 58px;
    background: rgba(227, 27, 35, 0.07);
    border: 1px solid rgba(227, 27, 35, 0.18);
    color: var(--p-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background 0.35s ease, color 0.35s ease;
}
.pillar-icon .ic {
    width: 26px;
    height: 26px;
}
.pillar-box:hover .pillar-icon {
    background: var(--p-red);
    color: var(--p-white);
}
.pillar-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    margin-bottom: 10px;
}
.pillar-text {
    font-size: 14.5px;
    color: var(--p-grey);
    margin-bottom: 0;
}
.pillar-text strong {
    color: var(--p-charcoal);
    font-weight: 600;
}

/* Highlighted "0" PPM cell */
.pillar-box-dark {
    background: var(--p-charcoal);
}
.pillar-box-dark.pillar-box:hover {
    background: #2b2b2b;
}
.pillar-box-dark .pillar-title {
    color: var(--p-white);
}
.pillar-box-dark .pillar-text {
    color: var(--p-grey-soft);
}
.pillar-box-dark .pillar-text strong {
    color: var(--p-gold);
    font-weight: 700;
}
.pillar-icon-red {
    background: var(--p-red);
    border-color: var(--p-red);
    color: var(--p-white);
}
.pillar-box-dark:hover .pillar-icon-red {
    background: var(--p-gold);
    border-color: var(--p-gold);
    color: var(--p-charcoal);
}

/* ----------------------------------------------------
   23. TEAM / OUR EXPERTS
---------------------------------------------------- */
.team-section {
    background: var(--p-light);
}
.team-card {
    background: var(--p-white);
    border: 1px solid var(--p-line);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.team-card:hover {
    border-color: #d3d3d3;
    box-shadow: var(--shadow-card);
    transform: translateY(-5px);
}
.team-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 4.4;
    background: #ececec;
}
.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(25%);
    transition: transform 0.7s var(--ease-out), filter 0.5s ease;
}
.team-card:hover .team-photo img {
    transform: scale(1.05);
    filter: grayscale(0%);
}
.team-role {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--p-red);
    color: var(--p-white);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 20px;
}
.team-body {
    padding: 26px 28px 30px;
}
.team-name {
    position: relative;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    padding-bottom: 14px;
    margin-bottom: 16px;
}
.team-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--p-gold);
}
.team-text {
    font-size: 14.5px;
    color: var(--p-grey);
    margin-bottom: 0;
}

/* ----------------------------------------------------
   24. VISION & MISSION PANELS
---------------------------------------------------- */
.vm-section {
    background: #1e1e1e;
}
.vm-panel {
    position: relative;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
    padding: 50px 42px 46px;
    overflow: hidden;
    transition: transform 0.35s var(--ease-out), background 0.35s ease;
}
.vm-panel:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.045);
}
.vm-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}
.vm-panel-red::before {
    background: var(--p-red);
}
.vm-panel-gold::before {
    background: var(--p-gold);
}
.vm-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}
.vm-panel-red .vm-icon {
    background: rgba(227, 27, 35, 0.14);
    border: 1px solid rgba(227, 27, 35, 0.4);
    color: var(--p-red);
}
.vm-panel-gold .vm-icon {
    background: rgba(213, 169, 40, 0.12);
    border: 1px solid rgba(213, 169, 40, 0.4);
    color: var(--p-gold);
}
.vm-icon .ic {
    width: 28px;
    height: 28px;
}
.vm-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--p-white);
    margin-bottom: 16px;
}
.vm-text {
    font-size: 18.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 0;
    max-width: 460px;
}

/* ----------------------------------------------------
   25. AWARDS SHOWCASE
---------------------------------------------------- */
.awards-section {
    background: var(--p-light);
}
.award-showcase-media {
    position: relative;
    border: 8px solid var(--p-white);
    box-shadow: var(--shadow-card);
}
.award-showcase-media img {
    width: 100%;
    aspect-ratio: 24 / 25;
    object-fit: cover;
    display: block;
}
.award-showcase-tag {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--p-charcoal);
    color: var(--p-gold);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.award-showcase-tag .ic {
    width: 16px;
    height: 16px;
}

.award-subtitle {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--p-gold-dark);
}
.award-list li {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
    transition: transform 0.3s var(--ease-out);
}
.award-list li:last-child {
    border-bottom: 0;
}
.award-list li:hover {
    transform: translateX(6px);
}
.award-num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    color: rgba(227, 27, 35, 0.28);
    min-width: 56px;
}
.award-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.award-item .ic {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(213, 169, 40, 0.1);
    border: 1px solid rgba(213, 169, 40, 0.35);
    color: var(--p-gold-dark);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.award-list li:hover .award-item .ic {
    background: var(--p-red);
    border-color: var(--p-red);
    color: var(--p-white);
}
.award-item h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    margin: 0;
}

/* ----------------------------------------------------
   26. CERTIFICATE PRESENTATION
---------------------------------------------------- */
.cert-section {
    background: var(--p-white);
}
.cert-frame {
    position: relative;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    padding: 14px;
    box-shadow: 0 22px 60px rgba(20, 20, 20, 0.14);
}
.cert-frame img {
    display: block;
    width: 100%;
    max-height: 660px;
    object-fit: contain;
    background: var(--p-white);
}
/* red corner brackets (shared machine-vision motif) */
.cert-frame .corner {
    position: absolute;
    width: 26px;
    height: 26px;
    z-index: 2;
}

.cert-note {
    display: flex;
    gap: 18px;
    background: #f7f7f7;
    border-left: 3px solid var(--p-red);
    padding: 22px 24px;
}
.cert-note-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: var(--p-charcoal);
    color: var(--p-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cert-note-icon .ic {
    width: 24px;
    height: 24px;
}
.cert-note p {
    font-size: 14.5px;
    color: var(--p-grey);
    margin: 0;
}
.cert-note strong {
    color: var(--p-charcoal);
    font-weight: 600;
}
.cert-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--p-line);
    background: var(--p-white);
    padding: 11px 18px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    transition: border-color 0.3s ease, color 0.3s ease;
}
.cert-chip:hover {
    border-color: var(--p-red);
}
.cert-chip .ic {
    width: 15px;
    height: 15px;
    color: var(--p-red);
}

/* ----------------------------------------------------
   27. APPRECIATION
---------------------------------------------------- */
.appreciation-section {
    background: var(--p-charcoal);
}
.appreciation-media {
    position: relative;
}
.appreciation-media img {
    width: 100%;
    aspect-ratio: 552 / 400;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.appreciation-text {
    color: #b9bdc2;
    font-size: 16.5px;
    max-width: 560px;
}

/* ----------------------------------------------------
   28. CUSTOMER BASE CAROUSEL
---------------------------------------------------- */
.clients-section {
    background: var(--p-white);
    overflow: hidden;
}
.clients-swiper {
    padding: 14px 2px 26px;
}
.client-tile {
    height: 150px;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 18px 16px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.client-tile:hover {
    border-color: var(--p-red);
    box-shadow: 0 12px 30px rgba(227, 27, 35, 0.1);
    transform: translateY(-4px);
}
.client-tile .ic {
    width: 26px;
    height: 26px;
    color: var(--p-gold-dark);
    transition: color 0.3s ease, transform 0.6s var(--ease-out);
}
.client-tile:hover .ic {
    color: var(--p-red);
    transform: rotate(35deg);
}
.client-tile span {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--p-charcoal);
    line-height: 1.45;
}
.clients-nav {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--p-charcoal);
    color: var(--p-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.clients-nav:hover {
    background: var(--p-red);
    border-color: var(--p-red);
    color: var(--p-white);
}
.clients-nav .ic {
    width: 18px;
    height: 18px;
}

/* ----------------------------------------------------
   29. ABOUT PAGE RESPONSIVE ADJUSTMENTS
---------------------------------------------------- */
@media (max-width: 991.98px) {
    .page-hero {
        min-height: 320px;
        padding: 120px 0 64px;
    }
    .pillar-cell {
        border-right: 0;
        border-bottom: 1px solid var(--p-line);
    }
    .pillar-cell:last-child {
        border-bottom: 0;
    }
    .award-showcase-media {
        max-width: 560px;
        margin: 0 auto 26px;
    }
    .cert-frame {
        margin-top: 8px;
    }
    .vm-panel {
        padding: 42px 32px 38px;
    }
}

@media (max-width: 767.98px) {
    .page-hero {
        min-height: 280px;
        padding: 104px 0 54px;
    }
    .page-hero-title {
        padding-left: 18px;
        border-left-width: 4px;
    }
    .breadcrumb-pi {
        padding-left: 22px;
    }
    .pillar-box {
        padding: 38px 26px 34px;
    }
    .award-num {
        font-size: 26px;
        min-width: 44px;
    }
    .vm-text {
        font-size: 16.5px;
    }
    .client-tile span {
        font-size: 14.5px;
    }
}

/* ==========================================================================
   PRODUCTS PAGE COMPONENTS
   ========================================================================== */

/* ----------------------------------------------------
   30. PRODUCTS HERO (banner variant)
---------------------------------------------------- */
.page-hero-products {
    background: linear-gradient(
            100deg,
            rgba(18, 18, 18, 0.92) 0%,
            rgba(24, 24, 24, 0.72) 55%,
            rgba(24, 24, 24, 0.45) 100%
        ),
        url("https://images.pexels.com/photos/48799/drill-milling-milling-machine-drilling-48799.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1920&h=720")
            center / cover no-repeat;
}
.page-hero-sub {
    margin-top: 16px;
    padding-left: 29px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--p-gold);
}
.page-hero-kicker {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
    padding-left: 29px;
}

/* ----------------------------------------------------
   31. STICKY PRODUCT CATEGORY NAVIGATION
---------------------------------------------------- */
.cat-nav {
    position: sticky;
    top: 71px;
    z-index: 1020;
    background: var(--p-charcoal);
    border-bottom: 3px solid var(--p-red);
}
.cat-nav-track {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -webkit-overflow-scrolling: touch;
    /* soft fade on the right edge = more categories */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 70px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 70px), transparent 100%);
}
.cat-nav-track::-webkit-scrollbar {
    display: none;
} /* Chrome/Safari */
.cat-link {
    position: relative;
    flex: 0 0 auto;
    padding: 17px 22px 15px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease;
}
.cat-link::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 9px;
    height: 2px;
    background: var(--p-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
}
.cat-link:hover {
    color: var(--p-white);
    background: rgba(255, 255, 255, 0.04);
}
.cat-link.active {
    color: var(--p-white);
    background: rgba(227, 27, 35, 0.14);
}
.cat-link.active::after {
    transform: scaleX(1);
}
.cat-link .cat-link-num {
    color: var(--p-red);
    font-weight: 700;
    margin-right: 7px;
    font-size: 10.5px;
}

/* ----------------------------------------------------
   32. PRODUCT CATEGORY SECTIONS
---------------------------------------------------- */
.pcat-section {
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}
.pcat-section.pcat-bg-light {
    background: var(--p-light);
}
.pcat-section.pcat-bg-white {
    background: var(--p-white);
}

/* large ghost index at the section edge */
.pcat-index {
    position: absolute;
    top: 34px;
    right: 2%;
    font-family: var(--font-head);
    font-weight: 900;
    font-size: clamp(4.4rem, 9vw, 8.5rem);
    line-height: 1;
    color: rgba(37, 37, 37, 0.045);
    pointer-events: none;
    user-select: none;
}
.pcat-section.pcat-bg-light .pcat-index {
    color: rgba(37, 37, 37, 0.055);
}

/* title stays Title Case (not all-uppercase) per design brief */
.pcat-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.1vw, 2.6rem);
    line-height: 1.15;
    color: var(--p-charcoal);
    text-transform: none;
    margin-bottom: 0;
}
.pcat-rule {
    width: 62px;
    height: 4px;
    background: var(--p-red);
    margin: 18px 0 20px;
}
.pcat-text {
    font-size: 15.5px;
    color: var(--p-grey);
    max-width: 480px;
}

.pcat-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}
.pcat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--p-line);
    background: var(--p-white);
    padding: 9px 16px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--p-charcoal);
}
.pcat-chip .ic {
    width: 14px;
    height: 14px;
    color: var(--p-red);
}
.pcat-chip-number {
    border-color: var(--p-red);
    background: var(--p-red);
    color: var(--p-white);
}
.pcat-chip-number .ic {
    color: var(--p-white);
}
.pcat-zoom-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--p-grey-soft);
    font-weight: 500;
}
.pcat-zoom-hint .ic {
    width: 14px;
    height: 14px;
}

/* ----------------------------------------------------
   33. PRODUCT GALLERY (per-category Swiper)
---------------------------------------------------- */
.pgallery {
    position: relative;
}
.pgallery-frame {
    border: 1px solid var(--p-line);
    background: linear-gradient(rgba(37, 37, 37, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 37, 37, 0.03) 1px, transparent 1px), #fbfbfb;
    background-size: 42px 42px, 42px 42px, auto;
    position: relative;
}
.pgallery-swiper {
    overflow: hidden;
}
.pgallery-stage {
    height: clamp(340px, 38vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px;
    cursor: zoom-in;
}
.p-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.p-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* never crop the product */
    transition: transform 0.55s var(--ease-out);
    user-select: none;
}
.pgallery:hover .p-slide img {
    transform: scale(1.025);
}

/* square red navigation arrows */
.p-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    background: var(--p-white);
    border: 1px solid var(--p-line);
    color: var(--p-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.p-nav:hover {
    background: var(--p-red);
    border-color: var(--p-red);
    color: var(--p-white);
}
.p-nav .ic {
    width: 19px;
    height: 19px;
}
.p-prev {
    left: -1px;
}
.p-next {
    right: -1px;
}

/* image counter chip */
.p-counter {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    background: var(--p-charcoal);
    color: var(--p-white);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 9px 16px;
}
.p-counter .p-current {
    color: var(--p-red);
}
.p-counter .p-divider {
    margin: 0 7px;
    color: rgba(255, 255, 255, 0.4);
}

/* pagination row under the gallery */
.pgallery-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 2px;
}
.p-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.p-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    border-radius: 0;
    background: #d5d5d5;
    opacity: 1;
    margin: 0 !important;
    transition: background 0.3s, transform 0.3s var(--ease-out);
}
.p-pagination .swiper-pagination-bullet-active {
    background: var(--p-red);
    transform: rotate(45deg);
}

/* ----------------------------------------------------
   34. PRODUCT LIGHTBOX (vanilla JS)
---------------------------------------------------- */
body.lb-open {
    overflow: hidden;
}
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(12, 12, 12, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
}
.lightbox.open {
    opacity: 1;
    visibility: visible;
}
.lb-stage {
    position: relative;
    max-width: 88vw;
    text-align: center;
    margin: 0;
}
.lb-img {
    max-width: 88vw;
    max-height: 78vh;
    object-fit: contain;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: opacity 0.25s ease, transform 0.35s var(--ease-out);
}
.lightbox.open .lb-img {
    transform: scale(1);
}
.lb-img.lb-swapping {
    opacity: 0;
}
.lb-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
}
.lb-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}
.lb-counter {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.55);
}
.lb-counter .lb-current {
    color: var(--p-red);
}
.lb-btn {
    position: fixed;
    z-index: 4001;
    width: 52px;
    height: 52px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--p-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.lb-btn:hover {
    background: var(--p-red);
    border-color: var(--p-red);
}
.lb-btn .ic {
    width: 20px;
    height: 20px;
}
.lb-close {
    top: 26px;
    right: 26px;
}
.lb-prev {
    top: 50%;
    left: 26px;
    transform: translateY(-50%);
}
.lb-next {
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
}

/* ----------------------------------------------------
   35. PRODUCTS PAGE RESPONSIVE
---------------------------------------------------- */
@media (max-width: 1199.98px) {
    .pcat-section {
        padding: 84px 0;
    }
}

@media (max-width: 991.98px) {
    .cat-nav {
        top: 61px;
    }
    .pcat-content-col {
        margin-bottom: 34px;
    }
    .pgallery-stage {
        height: clamp(300px, 52vw, 420px);
        padding: 26px;
    }
}

@media (max-width: 767.98px) {
    .pcat-section {
        padding: 68px 0;
    }
    .cat-link {
        padding: 14px 16px 12px;
        font-size: 11px;
    }
    .cat-link::after {
        left: 16px;
        right: 16px;
    }
    .pgallery-stage {
        height: clamp(260px, 74vw, 380px);
        padding: 18px;
    }
    .p-nav {
        width: 40px;
        height: 40px;
    }
    .p-nav .ic {
        width: 16px;
        height: 16px;
    }
    .p-counter {
        font-size: 11px;
        padding: 7px 12px;
    }
    .lb-btn {
        width: 44px;
        height: 44px;
    }
    .lb-close {
        top: 14px;
        right: 14px;
    }
    .lb-prev {
        left: 10px;
    }
    .lb-next {
        right: 10px;
    }
    .lb-img {
        max-height: 68vh;
    }
}