/* =========================================================
   POWERCORE
   GLOBAL NAVBAR CSS
   File: assets/css/styles.css
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif;

    background: var(--bg-primary);
    color: var(--text-primary);

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


/* =========================================================
   NAVBAR
   ========================================================= */

.pc-navbar {
    position: sticky;

    top: 0;
    left: 0;

    width: 100%;
    height: 78px;

    z-index: 9999;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border-color);

    font-family: "Manrope", sans-serif;
}


.pc-navbar-container {
    width: 100%;
    max-width: 1500px;

    height: 78px;

    margin: 0 auto;

    padding: 0 34px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    column-gap: 22px;
}


/* =========================================================
   LOGO
   ========================================================= */

.pc-brand {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--text-primary);

    text-decoration: none;

    white-space: nowrap;

    flex-shrink: 0;
}


.pc-logo-box {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: inline-flex;

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

    background: var(--accent);

    border: 2px solid var(--accent);

    color: #ffffff;

    border-radius: 5px;

    box-shadow:
        0 4px 12px rgba(255, 138, 0, 0.20);

    flex-shrink: 0;
}


.pc-logo-lightning {
    font-family: Arial, sans-serif;

    font-size: 27px;

    font-weight: 900;

    line-height: 1;

    transform: translateY(-1px);
}


.pc-brand-name {
    font-size: 20px;

    font-weight: 800;

    letter-spacing: 1px;

    color: var(--text-primary);
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.pc-desktop-nav {
    min-width: 0;

    display: flex;

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

    gap: 0;

    white-space: nowrap;
}


.pc-nav-item {
    position: relative;

    flex-shrink: 0;
}


.pc-nav-link {
    position: relative;

    min-height: 46px;

    padding: 7px 11px;

    display: inline-flex;

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

    gap: 6px;

    border: 0;

    background: transparent;

    color: var(--text-primary);

    font-family: "Manrope", sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


.pc-nav-link::after {
    content: "";

    position: absolute;

    left: 11px;
    right: 11px;

    bottom: 2px;

    height: 3px;

    background: var(--accent);

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.25s ease;
}


.pc-nav-link:hover {
    color: var(--accent);
}


.pc-nav-link.active {
    color: var(--accent);
}


.pc-nav-link.active::after {
    transform: scaleX(1);
}


.pc-chevron {
    font-size: 10px;

    transition:
        transform 0.25s ease;
}


.pc-dropdown.open .pc-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   DESKTOP DROPDOWN
   ========================================================= */

.pc-dropdown-menu {
    position: absolute;

    top: calc(100% + 8px);

    left: 50%;

    min-width: 205px;

    padding: 8px;

    background: var(--dropdown-bg);

    border: 1px solid var(--border-color);

    box-shadow: var(--dropdown-shadow);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translate(-50%, -8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}


.pc-products-dropdown {
    min-width: 220px;
}


.pc-dropdown.open .pc-dropdown-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%, 0);
}


.pc-dropdown-link {
    display: flex;

    align-items: center;

    min-height: 42px;

    padding: 9px 13px;

    color: var(--text-primary);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.pc-dropdown-link:hover,
.pc-dropdown-link.active {
    color: var(--accent);

    background: var(--accent-soft);
}


/* =========================================================
   RIGHT CONTROLS
   ========================================================= */

.pc-navbar-controls {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    flex-shrink: 0;
}


.pc-theme-toggle,
.pc-rtl-toggle,
.pc-menu-toggle {
    border: 1px solid var(--border-color);

    background: var(--control-bg);

    color: var(--text-primary);

    font-family: "Manrope", sans-serif;

    cursor: pointer;

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


.pc-theme-toggle {
    width: 39px;
    height: 39px;

    display: inline-flex;

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

    font-size: 16px;
}


.pc-theme-icon {
    line-height: 1;
}


.pc-rtl-toggle {
    width: 45px;
    height: 39px;

    display: inline-flex;

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

    font-size: 12px;

    font-weight: 800;
}


.pc-theme-toggle:hover,
.pc-rtl-toggle:hover {
    color: var(--accent);

    border-color: var(--accent);
}


.pc-theme-toggle:active,
.pc-rtl-toggle:active {
    transform: scale(0.94);
}


/* =========================================================
   LOGIN
   ========================================================= */

.pc-login-btn {
    min-width: 76px;

    height: 40px;

    padding: 0 17px;

    display: inline-flex;

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

    background: var(--accent);

    border: 1px solid var(--accent);

    color: var(--button-text);

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

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


.pc-login-btn:hover {
    background: var(--accent-hover);

    border-color: var(--accent-hover);

    color: var(--button-text);

    transform: translateY(-1px);
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.pc-menu-toggle {
    width: 41px;
    height: 41px;

    display: none;

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

    flex-direction: column;

    gap: 5px;
}


.pc-menu-toggle span {
    width: 21px;
    height: 2px;

    background: var(--text-primary);

    display: block;

    transition:
        background-color 0.2s ease;
}


.pc-menu-toggle:hover {
    border-color: var(--accent);
}


.pc-menu-toggle:hover span {
    background: var(--accent);
}


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

.pc-mobile-menu {
    position: fixed;

    top: 0;
    right: 0;

    width: min(400px, 100%);

    height: 100dvh;

    padding: 20px 23px 24px;

    display: flex;

    flex-direction: column;

    background: var(--mobile-menu-bg);

    border-left: 1px solid var(--border-color);

    transform: translateX(100%);

    visibility: hidden;

    pointer-events: none;

    overflow-y: auto;

    overscroll-behavior: contain;

    transition:
        transform 0.3s ease,
        visibility 0.3s ease;
}


.pc-mobile-menu.open {
    transform: translateX(0);

    visibility: visible;

    pointer-events: auto;
}


.pc-mobile-menu-header {
    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 27px;
}


.pc-mobile-brand {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--text-primary);

    font-size: 19px;

    font-weight: 800;

    letter-spacing: 0.8px;

    text-decoration: none;
}


.pc-mobile-brand .pc-logo-box {
    width: 34px;
    height: 34px;

    min-width: 34px;
}


.pc-mobile-brand .pc-logo-lightning {
    font-size: 25px;
}


.pc-mobile-close {
    width: 42px;
    height: 42px;

    display: inline-flex;

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

    border: 1px solid var(--border-color);

    background: var(--control-bg);

    color: var(--text-primary);

    font-size: 21px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.pc-mobile-close:hover {
    color: var(--accent);

    border-color: var(--accent);
}


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

.pc-mobile-nav {
    display: flex;

    flex-direction: column;

    gap: 0;
}


.pc-mobile-nav-item {
    width: 100%;
}


.pc-mobile-nav-link {
    width: 100%;

    min-height: 53px;

    padding: 10px 4px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-bottom: 1px solid var(--border-color);

    background: transparent;

    color: var(--text-primary);

    font-family: "Manrope", sans-serif;

    font-size: 17px;

    font-weight: 700;

    text-decoration: none;

    text-align: left;

    cursor: pointer;

    transition:
        color 0.2s ease;
}


.pc-mobile-nav-link:hover,
.pc-mobile-nav-link.active {
    color: var(--accent);
}


.pc-mobile-chevron {
    font-size: 11px;

    transition:
        transform 0.25s ease;
}


.pc-mobile-nav-item.open .pc-mobile-chevron {
    transform: rotate(180deg);
}


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

.pc-mobile-dropdown {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.3s ease,
        opacity 0.25s ease;
}


.pc-mobile-nav-item.open .pc-mobile-dropdown {
    max-height: 500px;

    opacity: 1;
}


.pc-mobile-dropdown-link {
    display: block;

    min-height: 44px;

    padding: 11px 18px;

    color: var(--text-secondary);

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid var(--border-color);

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


.pc-mobile-dropdown-link:hover,
.pc-mobile-dropdown-link.active {
    color: var(--accent);

    background: var(--accent-soft);
}


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

.pc-mobile-login-wrapper {
    margin-top: auto;

    padding-top: 30px;
}


.pc-mobile-login {
    width: 100%;

    height: 52px;
}


/* =========================================================
   BODY LOCK WHEN MENU OPEN
   ========================================================= */

body.pc-menu-open {
    overflow: hidden;
}


/* =========================================================
   LAPTOP - KEEP FULL NAVBAR
   ========================================================= */

@media (max-width: 1199px) and (min-width: 992px) {

    .pc-navbar-container {
        padding-left: 18px;
        padding-right: 18px;

        column-gap: 12px;
    }


    .pc-brand {
        gap: 7px;
    }


    .pc-logo-box {
        width: 32px;
        height: 32px;

        min-width: 32px;
    }


    .pc-logo-lightning {
        font-size: 24px;
    }


    .pc-brand-name {
        font-size: 17px;
        letter-spacing: 0.6px;
    }


    .pc-nav-link {
        padding-left: 7px;
        padding-right: 7px;

        font-size: 13px;

        gap: 4px;
    }


    .pc-nav-link::after {
        left: 7px;
        right: 7px;
    }


    .pc-navbar-controls {
        gap: 5px;
    }


    .pc-theme-toggle {
        width: 35px;
        height: 35px;
    }


    .pc-rtl-toggle {
        width: 40px;
        height: 35px;
    }


    .pc-login-btn {
        min-width: 64px;

        height: 35px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 12px;
    }

}


/* =========================================================
   TABLET + MOBILE
   Hamburger begins here
   ========================================================= */

@media (max-width: 991px) {

    .pc-navbar,
    .pc-navbar-container {
        height: 72px;
    }


    .pc-navbar-container {
        display: flex;

        justify-content: space-between;

        padding-left: 18px;
        padding-right: 18px;
    }


    .pc-desktop-nav {
        display: none;
    }


    .pc-desktop-login {
        display: none;
    }


    .pc-menu-toggle {
        display: inline-flex;
    }


    .pc-navbar-controls {
    margin-left: 0;
    margin-right: 0;

    flex-shrink: 0;
}
}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (max-width: 768px) {

    .pc-navbar,
    .pc-navbar-container {
        height: 68px;
    }


    .pc-navbar-container {
        padding-left: 14px;
        padding-right: 14px;
    }


    .pc-logo-box {
        width: 32px;
        height: 32px;

        min-width: 32px;
    }


    .pc-logo-lightning {
        font-size: 24px;
    }


    .pc-brand-name {
        font-size: 17px;

        letter-spacing: 0.7px;
    }


    .pc-navbar-controls {
        gap: 5px;
    }


    .pc-theme-toggle,
    .pc-rtl-toggle,
    .pc-menu-toggle {
        height: 38px;
    }


    .pc-theme-toggle {
        width: 38px;
    }


    .pc-rtl-toggle {
        width: 43px;
    }

}


/* =========================================================
   MOBILE-M
   ========================================================= */

@media (max-width: 576px) {

    .pc-navbar-container {
        padding-left: 10px;
        padding-right: 10px;
    }


    .pc-brand {
        gap: 7px;
    }


    .pc-logo-box {
        width: 30px;
        height: 30px;

        min-width: 30px;
    }


    .pc-logo-lightning {
        font-size: 22px;
    }


    .pc-brand-name {
        font-size: 15px;

        letter-spacing: 0.5px;
    }


    .pc-navbar-controls {
        gap: 4px;
    }


    .pc-theme-toggle,
    .pc-rtl-toggle,
    .pc-menu-toggle {
        height: 36px;
    }


    .pc-theme-toggle {
        width: 36px;
    }


    .pc-rtl-toggle {
        width: 40px;

        font-size: 11px;
    }


    .pc-menu-toggle {
        width: 38px;
    }

}


/* =========================================================
   MOBILE-S
   IMPORTANT:
   LOGO IS NOT HIDDEN
   ========================================================= */

@media (max-width: 380px) {

    .pc-navbar-container {
        padding-left: 7px;
        padding-right: 7px;
    }


    .pc-brand {
        gap: 5px;
    }


    .pc-logo-box {
        width: 28px;
        height: 28px;

        min-width: 28px;

        border-radius: 4px;
    }


    .pc-logo-lightning {
        font-size: 20px;
    }


    .pc-brand-name {
        font-size: 14px;

        letter-spacing: 0.3px;
    }


    .pc-navbar-controls {
        gap: 3px;
    }


    .pc-theme-toggle {
        width: 34px;
        height: 34px;

        font-size: 14px;
    }


    .pc-rtl-toggle {
        width: 37px;
        height: 34px;

        font-size: 10px;
    }


    .pc-menu-toggle {
        width: 35px;
        height: 34px;
    }


    .pc-menu-toggle span {
        width: 19px;
    }

}

/* =========================================================
   POWERCORE HOME 1 HERO
   LIGHT MODE / BASE
   ========================================================= */

.pc-h1-hero {
    --hero-orange: #FF8A00;

    position: relative;
    width: 100%;
    min-height: calc(100svh - 72px);

    display: grid;

    /* EXACTLY EQUAL WIDTH */
    grid-template-columns: 50% 50%;

    overflow: hidden;
    background: var(--bg-primary);
    isolation: isolate;
}

/* =========================================================
   LEFT STICKY CONTENT
   ========================================================= */

.pc-h1-hero-content {

    position: sticky;

    top: 72px;

    height: calc(100svh - 72px);

    min-height: 650px;

    background: #202A30;

    color: #F3F1EC;

    display: flex;

    align-items: center;

    overflow: hidden;

    z-index: 5;
}


.pc-h1-content-inner {

    width: 100%;

    max-width: 720px;

    padding: 70px clamp(36px, 5vw, 90px);

    margin: 0 auto;

    box-sizing: border-box;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.pc-h1-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 26px;

    color: #FF8A00;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(55px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);

    transition-delay: 0.05s;
}


.pc-h1-eyebrow-line {

    width: 34px;

    height: 2px;

    background: #FF8A00;

    flex-shrink: 0;
}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.pc-h1-title {
    margin: 0;

    max-width: 650px;

    color: #F3F1EC;

    font-family: "Manrope", sans-serif;

    /* REDUCED FROM 72px */
    font-size: clamp(42px, 4vw, 58px);

    line-height: 1.02;

    letter-spacing: -0.035em;

    font-weight: 800;


    opacity: 0;

    transform: translateY(90px);

    transition:
        opacity 0.95s ease,
        transform 0.95s cubic-bezier(.16,1,.3,1);

    transition-delay: 0.15s;
}


.pc-h1-title span {

    display: block;

    color: #FF8A00;
}


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

.pc-h1-description {

    max-width: 650px;

    margin: 30px 0 0;

    color: #D9E0E2;

    font-family: "Manrope", sans-serif;

    font-size: clamp(16px, 1.25vw, 19px);

    line-height: 1.75;

    font-weight: 500;

    opacity: 0;

    transform: translateY(70px);

    transition:
        opacity 0.85s ease,
        transform 0.85s cubic-bezier(.22,.61,.36,1);

    transition-delay: 0.3s;
}


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

.pc-h1-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    margin-top: 34px;

    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);

    transition-delay: 0.42s;
}


.pc-h1-btn {

    min-height: 54px;

    padding: 0 23px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border: 1px solid transparent;

    font-family: "Manrope", sans-serif;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;

    cursor: pointer;
}


.pc-h1-btn:hover {

    transform: translateY(-3px);
}


.pc-h1-btn-primary {

    background: #FF8A00;

    color: var(--pcx-graphite);

    border-color: #FF8A00;
}


.pc-h1-btn-primary:hover {

    background: #FF9D2E;

    border-color: #FF9D2E;

    color: var(--pcx-graphite);
}


.pc-h1-btn-secondary {

    background: #FF8A00;

    color: var(--pcx-graphite);

    border-color: #FF8A00;
}


.pc-h1-btn-secondary:hover {

    background: #FF9D2E;

    border-color: #FF9D2E;

    color: var(--pcx-graphite);
}


.pc-h1-btn-arrow {

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   SERVICE HIGHLIGHTS
   ========================================================= */

.pc-h1-highlights {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 48px;

    opacity: 0;

    transform: translateY(50px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);

    transition-delay: 0.55s;
}


.pc-h1-highlight {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 75px;
}


.pc-h1-highlight strong {

    color: #F3F1EC;

    font-size: 14px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.pc-h1-highlight span {

    color: #AEBBC0;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 600;

    white-space: nowrap;
}


.pc-h1-highlight-divider {

    width: 1px;

    height: 34px;

    background: rgba(243, 241, 236, 0.20);

    flex-shrink: 0;
}


/* =========================================================
   ACTIVATE TEXT ANIMATIONS
   ========================================================= */

.pc-h1-hero.is-visible .pc-h1-eyebrow,
.pc-h1-hero.is-visible .pc-h1-title,
.pc-h1-hero.is-visible .pc-h1-description,
.pc-h1-hero.is-visible .pc-h1-actions,
.pc-h1-hero.is-visible .pc-h1-highlights {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   RIGHT VISUAL AREA
   ========================================================= */

.pc-h1-visual {

    position: relative;

    min-width: 0;

    min-height: calc(100svh - 72px);

    background: #11181C;

    overflow: hidden;
}


.pc-h1-image-stage {

    position: relative;

    width: 100%;

    height: 100%;

    min-height: calc(100svh - 72px);

    overflow: hidden;
}


/* =========================================================
   SLIDES
   ========================================================= */

.pc-h1-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    visibility: hidden;

    opacity: 0;

    transform: translateX(100%);

    z-index: 1;
}


.pc-h1-slide-active {

    visibility: visible;

    opacity: 1;

    transform: translateX(0);

    z-index: 2;
}


/* =========================================================
   HERO IMAGE SLIDE
   NO BLANK GAP BETWEEN IMAGES
   ========================================================= */

.pc-h1-slide.pc-h1-slide-enter {

    visibility: visible;

    opacity: 1;

    transform: translateX(100%);

    z-index: 3;

    animation:
        pcHeroSlideFromRight
        0.9s
        cubic-bezier(.65, 0, .35, 1)
        forwards;
}


.pc-h1-slide.pc-h1-slide-exit {

    visibility: visible;

    opacity: 1;

    transform: translateX(0);

    z-index: 2;

    animation:
        pcHeroSlideToLeft
        0.9s
        cubic-bezier(.65, 0, .35, 1)
        forwards;
}


/* =========================================================
   NEW IMAGE ENTERS FROM RIGHT
   ========================================================= */

@keyframes pcHeroSlideFromRight {

    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }

}


/* =========================================================
   CURRENT IMAGE LEAVES TO LEFT
   ========================================================= */

@keyframes pcHeroSlideToLeft {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

}
/* =========================================================
   IMAGE
   ========================================================= */

.pc-h1-slide-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;
}


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

.pc-h1-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(16, 22, 25, 0.34),
            transparent 35%,
            transparent 70%,
            rgba(16, 22, 25, 0.12)
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE CAPTION
   ========================================================= */

.pc-h1-image-caption {

    position: absolute;

    left: clamp(24px, 4vw, 70px);

    bottom: clamp(28px, 5vw, 70px);

    display: flex;

    align-items: flex-start;

    gap: 15px;

    color: #FFFFFF;

    z-index: 5;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, 0.35);
}


.pc-h1-caption-number {

    color: #FF8A00;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.1em;
}


.pc-h1-image-caption strong {

    display: block;

    margin-bottom: 3px;

    color: #FFFFFF;

    font-size: clamp(18px, 1.6vw, 23px);

    font-weight: 800;
}


.pc-h1-image-caption span {

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

    font-size: 13px;

    font-weight: 600;
}


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

.pc-h1-slide-indicator {

    position: absolute;

    right: clamp(24px, 4vw, 70px);

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 13px;

    z-index: 10;
}


.pc-h1-indicator {

    width: 48px;

    padding: 5px 0;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

    border: 0;

    background: transparent;

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

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    transition: color 0.3s ease;
}


.pc-h1-indicator i {

    display: block;

    width: 28px;

    height: 2px;

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

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


.pc-h1-indicator:hover {

    color: #FFFFFF;
}


.pc-h1-indicator.active {

    color: #FF8A00;
}


.pc-h1-indicator.active i {

    width: 48px;

    background: #FF8A00;
}


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

.pc-h1-scroll-hint {

    position: absolute;

    left: 50%;

    bottom: 26px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.16em;

    z-index: 10;

    pointer-events: none;
}


.pc-h1-scroll-hint i {

    width: 1px;

    height: 32px;

    background: #FF8A00;

    animation: pcHeroScrollLine 1.5s ease-in-out infinite;
}


@keyframes pcHeroScrollLine {

    0%,
    100% {

        transform: scaleY(0.45);

        transform-origin: top;

        opacity: 0.45;

    }

    50% {

        transform: scaleY(1);

        transform-origin: top;

        opacity: 1;

    }

}


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

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

    .pc-h1-hero {

        display: block;

        min-height: auto;
    }


    .pc-h1-hero-content {

        position: relative;

        top: auto;

        height: auto;

        min-height: 500px;

        display: flex;

        align-items: center;
    }


    .pc-h1-content-inner {

        max-width: 900px;

        padding:
            70px
            clamp(35px, 7vw, 80px);
    }


    .pc-h1-title {

        font-size: clamp(46px, 7vw, 62px);
    }


    .pc-h1-visual {

        min-height: 70svh;

        height: 70svh;
    }


    .pc-h1-image-stage {

        min-height: 70svh;

        height: 70svh;
    }


    .pc-h1-slide-indicator {

        right: 30px;
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

    .pc-h1-hero {

        display: block;

        min-height: auto;
    }


    .pc-h1-hero-content {

        position: relative;

        top: auto;

        height: auto;

        min-height: auto;

        display: block;
    }


    .pc-h1-content-inner {

        padding:
            60px
            28px
            55px;
    }


    .pc-h1-eyebrow {

        margin-bottom: 20px;

        font-size: 11px;
    }


    .pc-h1-title {

        font-size: clamp(38px, 10vw, 48px);

        line-height: 1.02;
    }


    .pc-h1-description {

        margin-top: 23px;

        font-size: 16px;

        line-height: 1.7;
    }


    .pc-h1-actions {

        margin-top: 28px;

        flex-direction: column;

        align-items: stretch;
    }


    .pc-h1-btn {

        width: 100%;
    }


    .pc-h1-highlights {

        margin-top: 35px;

        gap: 14px;

        justify-content: space-between;
    }


    .pc-h1-highlight-divider {

        height: 30px;
    }


    .pc-h1-highlight span {

        white-space: normal;

        font-size: 10px;
    }


    .pc-h1-visual {

        height: 68svh;

        min-height: 480px;
    }


    .pc-h1-image-stage {

        height: 68svh;

        min-height: 480px;
    }


    .pc-h1-slide-indicator {

        right: 20px;

        gap: 8px;
    }


    .pc-h1-indicator {

        width: 38px;
    }


    .pc-h1-indicator.active i {

        width: 38px;
    }


    .pc-h1-scroll-hint {

        display: none;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 480px) {

    .pc-h1-hero {

        display: block;

        min-height: auto;
    }


    .pc-h1-hero-content {

        position: relative;

        top: auto;

        height: auto;

        min-height: auto;

        display: block;
    }


    .pc-h1-content-inner {

        padding:
            48px
            20px
            44px;
    }


    .pc-h1-eyebrow {

        gap: 8px;

        margin-bottom: 18px;

        font-size: 9px;

        letter-spacing: 0.1em;
    }


    .pc-h1-eyebrow-line {

        width: 24px;
    }


    .pc-h1-title {

        font-size: clamp(34px, 11vw, 42px);

        line-height: 1.02;

        letter-spacing: -0.04em;
    }


    .pc-h1-description {

        margin-top: 20px;

        font-size: 15px;

        line-height: 1.68;
    }


    .pc-h1-actions {

        margin-top: 25px;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .pc-h1-btn {

        width: 100%;

        min-height: 50px;

        padding: 0 18px;

        font-size: 14px;
    }


    .pc-h1-highlights {

        margin-top: 32px;

        gap: 10px;
    }


    .pc-h1-highlight {

        min-width: 0;

        flex: 1;
    }


    .pc-h1-highlight strong {

        font-size: 12px;
    }


    .pc-h1-highlight span {

        white-space: normal;

        font-size: 9px;

        line-height: 1.35;
    }


    .pc-h1-highlight-divider {

        height: 27px;
    }


    .pc-h1-visual {

        width: 100%;

        height: 62svh;

        min-height: 400px;
    }


    .pc-h1-image-stage {

        width: 100%;

        height: 62svh;

        min-height: 400px;
    }


    .pc-h1-image-caption {

        left: 18px;

        bottom: 20px;

        gap: 10px;
    }


    .pc-h1-image-caption strong {

        font-size: 16px;
    }


    .pc-h1-image-caption span {

        font-size: 11px;
    }


    .pc-h1-caption-number {

        font-size: 11px;
    }


    .pc-h1-slide-indicator {

        top: auto;

        right: 17px;

        bottom: 22px;

        transform: none;

        gap: 5px;
    }


    .pc-h1-indicator {

        width: 32px;

        font-size: 9px;
    }


    .pc-h1-indicator i {

        width: 20px;
    }


    .pc-h1-indicator.active i {

        width: 32px;
    }


    .pc-h1-scroll-hint {

        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-h1-eyebrow,
    .pc-h1-title,
    .pc-h1-description,
    .pc-h1-actions,
    .pc-h1-highlights {

        transition: none;

        transform: none;

        opacity: 1;
    }


    .pc-h1-slide.pc-h1-slide-enter,
    .pc-h1-slide.pc-h1-slide-exit {

        animation: none;
    }


    .pc-h1-scroll-hint i {

        animation: none;
    }

}

/* =========================================================
   POWERCORE HOMEPAGE 1
   9 SECTION SYSTEM
   ========================================================= */

:root {
    --pcx-bg: #F7F5F1;
    --pcx-bg-alt: #ECE9E2;
    --pcx-graphite: #202A30;
    --pcx-text: #202A30;
    --pcx-muted: #596A73;

    /* BRIGHTER ORANGE */
    --pcx-orange: #FF8A00;
    --pcx-orange-hover: #E87500;

    --pcx-line: rgba(32, 42, 48, 0.16);
    --pcx-white: #FFFFFF;

    --pcx-section-space: clamp(90px, 10vw, 170px);
}


/* =========================================================
   GLOBAL HOMEPAGE SECTION
   ========================================================= */

.pcx-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--pcx-bg);
    color: var(--pcx-text);
}

.pcx-wrap {
    width: min(1380px, calc(100% - 100px));
    margin-inline: auto;
}

.pcx-section h2 {
    margin: 0;
    color: var(--pcx-text);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.pcx-section h2 em {
    color: var(--pcx-orange);
    font-style: normal;
}

.pcx-section p {
    color: var(--pcx-muted);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 500;
}

.pcx-kicker {
    display: block;
    margin-bottom: 18px;
    color: var(--pcx-orange);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   SECTION INDEX
   ========================================================= */

.pcx-index {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 48px;
    color: var(--pcx-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pcx-index > span:first-child {
    color: var(--pcx-orange);
}

.pcx-index i {
    display: block;
    width: 44px;
    height: 2px;
    background: var(--pcx-orange);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.pcx-reveal {
    opacity: 0;
    transform: translateY(70px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.16, 1, .3, 1);
}

.pcx-reveal.pcx-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   SECTION 01
   ========================================================= */

.pcx-overview {
    padding: var(--pcx-section-space) 0;
    background:
        linear-gradient(
            120deg,
            var(--pcx-bg),
            var(--pcx-bg-alt)
        );
}

.pcx-overview-number {
    position: absolute;
    top: 20px;
    right: 4%;
    color: rgba(32, 42, 48, 0.04);
    font-size: clamp(180px, 25vw, 420px);
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.pcx-overview-grid {
    position: relative;
    z-index: 1;
}

.pcx-overview-grid > .pcx-index {
    justify-content: center;
}

.pcx-overview-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
    text-align: center;
}

.pcx-overview-heading h2 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pcx-overview-description {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.pcx-overview-description p + p {
    margin-top: 18px;
}

.pcx-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    color: var(--pcx-text);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid var(--pcx-orange);
    padding-bottom: 8px;
    transition: gap .3s ease, color .3s ease;
}

.pcx-overview .pcx-text-link,
.pcx-field-content .pcx-text-link,
.pcx-area-intro .pcx-text-link {
    align-self: flex-start;
    min-height: 54px;
    padding: 0 23px;
    border: 1px solid var(--pcx-orange);
    background: var(--pcx-orange);
    color: var(--pcx-graphite);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.pcx-overview .pcx-text-link span,
.pcx-field-content .pcx-text-link span,
.pcx-area-intro .pcx-text-link span {
    color: var(--pcx-graphite);
}

.pcx-overview .pcx-text-link:hover,
.pcx-field-content .pcx-text-link:hover,
.pcx-area-intro .pcx-text-link:hover {
    transform: translateY(-3px);
    background: #FF9D2E;
    border-color: #FF9D2E;
    color: var(--pcx-graphite);
}

.pcx-text-link span {
    color: var(--pcx-orange);
    transition: transform .3s ease;
}

.pcx-text-link:hover {
    color: var(--pcx-orange);
    gap: 18px;
}

.pcx-text-link:hover span {
    transform: translate(4px, -4px);
}

.pcx-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 100px;
    border-top: 1px solid var(--pcx-line);
}

.pcx-stat-line {
    padding: 30px 24px 10px 0;
    border-right: 1px solid var(--pcx-line);
}

.pcx-stat-line + .pcx-stat-line {
    padding-left: 24px;
}

.pcx-stat-line:last-child {
    border-right: 0;
}

.pcx-stat-line > span {
    display: block;
    margin-bottom: 24px;
    color: var(--pcx-orange);
    font-size: 12px;
    font-weight: 800;
}

.pcx-stat-line strong {
    display: block;
    color: var(--pcx-text);
    font-size: 25px;
    font-weight: 800;
}

.pcx-stat-line p {
    margin: 5px 0 0;
    font-size: 14px;
}


/* =========================================================
   SECTION 02 — BRANDS
   ========================================================= */

.pcx-brands {
    padding: var(--pcx-section-space) 0;
    background: var(--pcx-graphite);
    color: #fff;
}

.pcx-brands-heading {
    max-width: 850px;
    margin-bottom: 65px;
}

.pcx-brands .pcx-index {
    color: #A7B4BA;
}

.pcx-brands h2 {
    color: #F3F1EC;
}

.pcx-brands p {
    max-width: 680px;
    color: #A7B4BA;
}

.pcx-brand-marquee {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100vw;
    margin-left: calc((100vw - min(1380px, calc(100% - 100px))) / -2);
}

.pcx-brand-track {
    display: flex;
    width: max-content;
    gap: 18px;
    will-change: transform;
}

.pcx-brand-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    height: 82px;
    padding: 0 34px;
    background: var(--pcx-orange);
    color: var(--pcx-graphite);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
    border-radius: 0;
}

.pcx-brand-track-forward {
    animation: pcxBrandForward 28s linear infinite;
}

.pcx-brand-track-reverse {
    animation: pcxBrandReverse 28s linear infinite;
}

@keyframes pcxBrandForward {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes pcxBrandReverse {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}


/* =========================================================
   SECTION 03 — SERVICES
   ========================================================= */

.pcx-services {
    /* Extra scroll runway beyond the pinned 100vh viewport gives the
       scroll-driven image/list switcher (assets/js/script.js) room to
       step through all 6 services before the section releases. */
    min-height: 520vh;
    background: var(--pcx-bg);

    /* IMPORTANT: .pcx-section (below) sets overflow:hidden globally.
       An ancestor with overflow other than visible breaks
       position:sticky on .pcx-services-pin below, which is what was
       causing the pinned services block to scroll away immediately
       and leave a blank 520vh gap instead of staying pinned while the
       image/list switches. Overriding it here restores the pin. */
    overflow: visible;
}

.pcx-services-pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.pcx-services-grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 80px;
    align-items: center;
}

.pcx-services-copy {
    align-self: center;
}

.pcx-services-copy h2 {
    margin-bottom: 28px;
}

.pcx-services-copy p {
    max-width: 500px;
}

.pcx-service-counter {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 50px;
}

.pcx-service-counter strong {
    color: var(--pcx-orange);
    font-size: 60px;
    line-height: 1;
    font-weight: 800;
}

.pcx-service-counter span {
    color: var(--pcx-muted);
    font-size: 18px;
    font-weight: 700;
}

.pcx-service-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 32px;
    align-items: center;
}

.pcx-service-image-stage {
    position: relative;
    height: 620px;
    overflow: hidden;
    background: var(--pcx-graphite);
}

@media (min-width: 992px) {
    .pcx-service-stage {
        align-items: stretch;
    }

    .pcx-service-image-stage {
        height: auto;
    }
}

.pcx-service-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(110%);
    transition:
        opacity .75s ease,
        transform .85s cubic-bezier(.16, 1, .3, 1);
}

.pcx-service-image.is-active {
    opacity: 1;
    transform: translateX(0);
}

.pcx-service-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pcx-service-list {
    display: flex;
    flex-direction: column;
}

.pcx-service-item {
    display: grid;
    grid-template-columns: 42px 1fr 25px;
    gap: 18px;
    align-items: center;
    width: 100%;
    padding: 24px 0;
    border: 0;
    border-bottom: 1px solid var(--pcx-line);
    background: transparent;
    color: var(--pcx-text);
    text-align: left;
    cursor: pointer;
}

.pcx-service-item:first-child {
    border-top: 1px solid var(--pcx-line);
}

.pcx-service-item > span {
    color: var(--pcx-muted);
    font-size: 13px;
    font-weight: 800;
}

.pcx-service-item strong {
    display: block;
    font-size: 19px;
    font-weight: 800;
}

.pcx-service-item small {
    display: block;
    margin-top: 5px;
    color: var(--pcx-muted);
    font-size: 14px;
    line-height: 1.5;
}

.pcx-service-item b {
    color: var(--pcx-muted);
    font-size: 20px;
    transition: transform .3s ease, color .3s ease;
}

.pcx-service-item.is-active {
    color: var(--pcx-orange);
}

.pcx-service-item.is-active > span,
.pcx-service-item.is-active small {
    color: var(--pcx-muted);
}

.pcx-service-item.is-active b {
    color: var(--pcx-orange);
    transform: translate(5px, -5px);
}


/* =========================================================
   POWERCORE HOMEPAGE 1
   SECTION 04 — POWER CAPACITY
   REDESIGNED POWER ARC
   ========================================================= */

.pcx04-capacity{
    position:relative;
    overflow:hidden;
    padding:110px 0 95px;
    background:
        radial-gradient(
            circle at 70% 52%,
            rgba(255,138,0,.075),
            transparent 30%
        ),
        var(--pcx-bg);
    color:var(--pcx-text);
    isolation:isolate;
}


.pcx04-capacity-grid{
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.28;
    pointer-events:none;
    background-image:
        linear-gradient(
            rgba(32,42,48,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32,42,48,.055) 1px,
            transparent 1px
        );
    background-size:54px 54px;
    mask-image:
        radial-gradient(
            circle at 65% 50%,
            #000 0,
            transparent 72%
        );
}


.pcx04-capacity-glow{
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(110px);
    pointer-events:none;
    z-index:-1;
    opacity:.14;
}


.pcx04-capacity-glow-one{
    right:8%;
    top:18%;
    background:var(--pcx-orange);
}


.pcx04-capacity-glow-two{
    left:5%;
    bottom:4%;
    background:#E8A84A;
}


/* ---------------------------------------------------------
   TOP AREA
   --------------------------------------------------------- */

.pcx04-capacity-top{
    display:grid;
    grid-template-columns:
        minmax(360px,.82fr)
        minmax(520px,1.18fr);
    gap:55px;
    align-items:center;
}


.pcx04-capacity-copy{
    position:relative;
    z-index:4;
    max-width:620px;
}


.pcx04-index{
    margin-bottom:32px;
}


.pcx04-capacity-copy h2{
    max-width:650px;
    font-size:clamp(34px,4.5vw,64px);
    line-height:1.04;
}


.pcx04-capacity-copy p{
    max-width:530px;
    margin:26px 0 0;
    font-size:18px;
}


.pcx04-capacity-link{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-top:30px;
    color:var(--pcx-text);
    font-size:12px;
    font-weight:800;
    letter-spacing:.1em;
}


.pcx04-capacity-link b{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--pcx-orange);
    border-radius:50%;
    color:var(--pcx-orange);
    font-size:18px;
    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.pcx04-capacity-link:hover b{
    background:var(--pcx-orange);
    color:#171C1F;
    box-shadow:
        0 0 25px rgba(255,138,0,.42);
    transform:translateX(4px);
}


/* ---------------------------------------------------------
   POWER VISUAL
   --------------------------------------------------------- */

.pcx04-power-visual{
    position:relative;
    min-height:525px;
    display:grid;
    place-items:center;
}


.pcx04-generator{
    position:relative;
    z-index:4;
    width:min(520px,88%);
    aspect-ratio:1.25 / 1;
    margin:0;
    overflow:hidden;
    border:1px solid rgba(255,138,0,.65);
    background:#11171A;
    box-shadow:
        0 25px 75px rgba(20,26,30,.25),
        0 0 45px rgba(255,138,0,.11);
}


.pcx04-generator::before{
    content:"";
    position:absolute;
    inset:12px;
    z-index:5;
    border:1px solid rgba(255,138,0,.45);
    pointer-events:none;
}


.pcx04-generator img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .7s ease;
}


.pcx04-power-visual:hover .pcx04-generator img{
    transform:scale(1.06);
    filter:saturate(1.08) contrast(1.05);
}


.pcx04-generator-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(
            180deg,
            rgba(10,14,16,.08),
            rgba(10,14,16,.18) 48%,
            rgba(10,14,16,.75)
        );
}


.pcx04-generator figcaption{
    position:absolute;
    z-index:7;
    left:28px;
    bottom:25px;
    display:flex;
    flex-direction:column;
}


.pcx04-generator figcaption small{
    color:var(--pcx-orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;
}


.pcx04-generator figcaption strong{
    margin-top:4px;
    color:#fff;
    font-size:31px;
    line-height:1;
    font-weight:800;
}


/* ---------------------------------------------------------
   POWER ORBITS
   --------------------------------------------------------- */

.pcx04-power-orbit{
    position:absolute;
    z-index:1;
    border:1px solid rgba(255,138,0,.27);
    border-radius:50%;
    pointer-events:none;
}


.pcx04-orbit-one{
    width:610px;
    height:300px;
    transform:rotate(-8deg);
    box-shadow:
        0 0 25px rgba(255,138,0,.08);
    animation:pcx04Orbit 9s linear infinite;
}


.pcx04-orbit-two{
    width:680px;
    height:350px;
    transform:rotate(9deg);
    border-color:rgba(255,138,0,.13);
    animation:pcx04OrbitReverse 13s linear infinite;
}


.pcx04-orbit-three{
    width:760px;
    height:405px;
    border-color:rgba(255,138,0,.08);
    transform:rotate(-3deg);
}


.pcx04-power-scan{
    position:absolute;
    z-index:6;
    width:470px;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pcx-orange),
            transparent
        );
    box-shadow:
        0 0 20px rgba(255,138,0,.8);
    animation:pcx04Scan 4.5s ease-in-out infinite;
    pointer-events:none;
}


.pcx04-power-label{
    position:absolute;
    z-index:8;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:9px 12px;
    border-left:2px solid var(--pcx-orange);
    background:rgba(32,42,48,.88);
    color:#fff;
    box-shadow:
        0 10px 30px rgba(20,26,30,.16);
}


.pcx04-power-label span{
    color:var(--pcx-orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}


.pcx04-power-label b{
    color:#D8D2C6;
    font-size:8px;
    letter-spacing:.12em;
}


.pcx04-label-top{
    top:28px;
    right:9%;
}


.pcx04-power-readout{
    position:absolute;
    z-index:8;
    right:5%;
    bottom:22px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}


.pcx04-power-readout span{
    color:var(--pcx-orange);
    font-size:8px;
    font-weight:800;
    letter-spacing:.16em;
}


.pcx04-power-readout strong{
    color:var(--pcx-text);
    font-size:27px;
    line-height:1;
    font-weight:800;
}


.pcx04-power-readout small{
    margin-top:4px;
    color:var(--pcx-muted);
    font-size:11px;
    letter-spacing:.12em;
}


/* ---------------------------------------------------------
   CAPACITY SYSTEM
   --------------------------------------------------------- */

.pcx04-capacity-system{
    position:relative;
    margin-top:45px;
    padding-top:10px;
}


.pcx04-capacity-line{
    position:absolute;
    left:2%;
    right:2%;
    top:calc(50% - 54px);
    height:2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,138,0,.28) 5%,
            var(--pcx-orange) 20%,
            rgba(255,138,0,.55) 50%,
            var(--pcx-orange) 80%,
            rgba(255,138,0,.28) 95%,
            transparent
        );
    box-shadow:
        0 0 14px rgba(255,138,0,.42);
}


.pcx04-capacity-pulse{
    position:absolute;
    top:calc(50% - 54px);
    left:4%;
    width:85px;
    height:4px;
    transform:translateY(-50%);
    background:linear-gradient(
        90deg,
        transparent,
        #fff,
        var(--pcx-orange),
        transparent
    );
    box-shadow:
        0 0 18px rgba(255,138,0,.95),
        0 0 45px rgba(255,138,0,.4);
    animation:pcx04CapacityPulse 4.5s linear infinite;
    z-index:3;
}


.pcx04-capacity-items{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
}


.pcx04-capacity-node{
    position:relative;
    min-height:160px;
    padding-bottom:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--pcx-text);
    text-decoration:none;
    text-align:center;
    transition:
        transform .45s cubic-bezier(.16,1,.3,1);
}


.pcx04-capacity-node::before{
    content:"";
    position:absolute;
    inset:15px 8px 0;
    border-top:1px solid var(--pcx-line);
    border-bottom:1px solid var(--pcx-line);
    clip-path:polygon(
        9% 0,
        91% 0,
        100% 50%,
        91% 100%,
        9% 100%,
        0 50%
    );
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.pcx04-capacity-node:hover{
    transform:translateY(-10px);
}


.pcx04-capacity-node:hover::before{
    border-color:var(--pcx-orange);
    background:rgba(255,138,0,.055);
    box-shadow:
        0 0 28px rgba(255,138,0,.13);
}


.pcx04-node-number{
    position:relative;
    z-index:2;
    color:var(--pcx-orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}


.pcx04-node-ring{
    position:relative;
    z-index:2;
    width:42px;
    height:42px;
    margin:6px 0 7px;
    display:grid;
    place-items:center;
    border:1px solid var(--pcx-orange);
    border-radius:50%;
    background:var(--pcx-bg);
    box-shadow:
        0 0 0 5px rgba(255,138,0,.055),
        0 0 15px rgba(255,138,0,.12);
}


.pcx04-node-ring span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--pcx-orange);
    box-shadow:
        0 0 13px rgba(255,138,0,.9);
    animation:pcx04NodePulse 2.2s ease-in-out infinite;
    animation-delay:var(--node-delay);
}


.pcx04-capacity-node strong{
    position:relative;
    z-index:2;
    font-size:30px;
    line-height:1;
    font-weight:800;
}


.pcx04-capacity-node b{
    position:relative;
    z-index:2;
    margin-top:4px;
    color:var(--pcx-orange);
    font-size:13px;
}


.pcx04-capacity-node small{
    position:relative;
    z-index:2;
    margin-top:7px;
    color:var(--pcx-muted);
    font-size:14px;
}


.pcx04-capacity-foot{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:25px;
    color:var(--pcx-muted);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
}


.pcx04-capacity-foot i{
    width:65px;
    height:1px;
    background:var(--pcx-orange);
    box-shadow:0 0 10px rgba(255,138,0,.5);
}
/* =========================================================
   SECTION 05 — OUR PROCESS
   KINETIC POWER CIRCUIT
   NO IMAGES / NO CARDS / NO WAVE
   ========================================================= */

.pcx-process-command {
    position: relative;
    min-height: 780px;
    padding: clamp(100px, 9vw, 145px) 0 80px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(255, 138, 0, .12),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #202A30 0%,
            #182024 48%,
            #101619 100%
        );

    color: #F3F1EC;
}


/* =========================================================
   TECHNICAL GRID
   ========================================================= */

.pcx-process-command-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 82%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 82%
        );
}


/* =========================================================
   LARGE ORANGE ATMOSPHERIC GLOWS
   ========================================================= */

.pcx-process-command-glow {
    position: absolute;
    z-index: -2;
    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(255, 138, 0, .13);

    filter: blur(90px);

    pointer-events: none;

    animation:
        pcx-command-glow-pulse
        5s ease-in-out infinite;
}

.pcx-process-command-glow-one {
    left: 8%;
    top: 35%;
}

.pcx-process-command-glow-two {
    right: 7%;
    bottom: 4%;

    width: 350px;
    height: 350px;

    opacity: .7;

    animation-delay: 1.8s;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.pcx-process-command-wrap {
    position: relative;
    z-index: 2;

    width: min(
        1380px,
        calc(100% - 100px)
    );

    margin-inline: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.pcx-process-command-intro {
    position: relative;
    z-index: 5;
}

.pcx-process-command-intro .pcx-index {
    margin-bottom: 35px;
}

.pcx-process-command-title {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(260px, .75fr);

    gap: clamp(45px, 8vw, 130px);

    align-items: end;
}

.pcx-process-command-kicker {
    display: block;

    margin-bottom: 15px;

    color: var(--pcx-orange);

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

    letter-spacing: .2em;
    text-transform: uppercase;
}

.pcx-process-command-title h2 {
    max-width: 800px;

    margin: 0;

    color: #F3F1EC;

    font-size:
        clamp(
            44px,
            5.6vw,
            78px
        );

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 800;
}

.pcx-process-command-title h2 em {
    display: block;

    color: var(--pcx-orange);

    font-style: normal;

    text-shadow:
        0 0 24px rgba(255, 138, 0, .22);
}

.pcx-process-command-title p {
    max-width: 390px;

    margin: 0 0 5px;

    color: #AEB8BC;

    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   THE CONDUIT — FOUR DESCENDING ENERGY SHAFTS
   Scoped to .pcx-cd-* inside .pcx-process-command.
   ========================================================= */

/* ---------------------------------------------------------
   FLOATING SPARKS
   --------------------------------------------------------- */

.pcx-cd-spark {
    position: absolute;

    z-index: 1;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #FFD9A0;

    box-shadow:
        0 0 8px var(--pcx-orange),
        0 0 22px rgba(255, 138, 0, .8);

    opacity: 0;

    pointer-events: none;

    animation:
        pcx-cd-rise 7s linear infinite;
}

.pcx-cd-spark-1 {
    left: 6%;
    bottom: 4%;
    animation-duration: 7s;
    animation-delay: 0s;
}

.pcx-cd-spark-2 {
    left: 24%;
    bottom: 12%;
    animation-duration: 9s;
    animation-delay: 1.4s;
    width: 2px;
    height: 2px;
}

.pcx-cd-spark-3 {
    left: 52%;
    bottom: 2%;
    animation-duration: 8s;
    animation-delay: 2.6s;
}

.pcx-cd-spark-4 {
    left: 73%;
    bottom: 16%;
    animation-duration: 10s;
    animation-delay: .8s;
    width: 2px;
    height: 2px;
}

.pcx-cd-spark-5 {
    left: 88%;
    bottom: 6%;
    animation-duration: 7.5s;
    animation-delay: 3.4s;
}

.pcx-cd-spark-6 {
    left: 40%;
    bottom: 22%;
    animation-duration: 11s;
    animation-delay: 4.2s;
    width: 2px;
    height: 2px;
}


/* ---------------------------------------------------------
   DISTRIBUTION BUS
   --------------------------------------------------------- */

.pcx-cd-bus {
    position: relative;

    height: 74px;

    margin-top: clamp(52px, 6vw, 86px);
}

.pcx-cd-bus-rail {
    position: absolute;

    left: 0;
    right: 0;
    top: 30px;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 138, 0, .45) 6%,
            var(--pcx-orange) 26%,
            #FFD9A0 50%,
            var(--pcx-orange) 74%,
            rgba(255, 138, 0, .45) 94%,
            transparent 100%);

    box-shadow:
        0 0 12px rgba(255, 138, 0, .75),
        0 0 40px rgba(255, 138, 0, .35);
}

.pcx-cd-bus-flow {
    position: absolute;

    left: 0;
    right: 0;
    top: 30px;

    height: 3px;

    border-radius: 999px;

    overflow: hidden;
}

.pcx-cd-bus-flow::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 22%;

    background:
        linear-gradient(90deg,
            transparent,
            #FFF6E6,
            var(--pcx-orange),
            transparent);

    filter: blur(1px);

    animation:
        pcx-cd-bus-run 4.2s linear infinite;
}

/* end caps */

.pcx-cd-bus-cap {
    position: absolute;

    top: 30px;

    width: 13px;
    height: 13px;

    border:
        2px solid var(--pcx-orange);

    border-radius: 50%;

    background: #101619;

    transform: translateY(-50%);

    box-shadow:
        0 0 0 5px rgba(255, 138, 0, .07),
        0 0 20px rgba(255, 138, 0, .85);

    animation:
        pcx-cd-cap-pulse 3s ease-in-out infinite;
}

.pcx-cd-bus-cap-l {
    left: 0;
}

.pcx-cd-bus-cap-r {
    right: 0;
    animation-delay: 1.5s;
}


/* ---------------------------------------------------------
   CONDUIT SYSTEM
   --------------------------------------------------------- */

.pcx-cd-system {
    position: relative;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: clamp(18px, 2.4vw, 38px);

     margin-top: -80.5px;
}


/* the faint vertical guide each shaft hangs from */

.pcx-cd-spine {
    position: absolute;

    left: 12.5%;
    right: 12.5%;
    top: -34px;
    bottom: 0;

    z-index: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(180deg,
            rgba(255, 138, 0, .30) 0 2px,
            transparent 2px 9px);

    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}


/* ---------------------------------------------------------
   SHAFT
   --------------------------------------------------------- */

.pcx-cd-shaft {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 6px 26px;

    text-align: center;

    color: #F3F1EC;

    cursor: default;

    outline: none;

    transition:
        transform .5s cubic-bezier(.16, 1, .3, 1);
}

/* the glowing energy column behind each shaft */

.pcx-cd-shaft::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 34px;
    bottom: 0;

    width: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(180deg,
            var(--pcx-orange) 0%,
            rgba(255, 138, 0, .55) 45%,
            rgba(255, 138, 0, .12) 100%);

    box-shadow:
        0 0 10px rgba(255, 138, 0, .8),
        0 0 30px rgba(255, 138, 0, .4);

    transition:
        box-shadow .5s ease,
        opacity .5s ease;
}

/* travelling charge down the column */

.pcx-cd-shaft::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 34px;

    width: 2px;
    height: 34%;

    transform: translateX(-50%);

    background: linear-gradient(180deg, #FFF6E6, var(--pcx-orange), transparent);

    filter: blur(.6px);

    opacity: 0;

    transition: opacity .4s ease;

    animation:
        pcx-cd-charge 3.6s linear infinite;
}

.pcx-cd-shaft:nth-of-type(2)::after {
    animation-delay: .55s;
}

.pcx-cd-shaft:nth-of-type(3)::after {
    animation-delay: 1.1s;
}

.pcx-cd-shaft:nth-of-type(4)::after {
    animation-delay: 1.65s;
}

.pcx-cd-spine,
.pcx-cd-shaft::before,
.pcx-cd-shaft::after {
    display: none;
}


/* oversized ghost number */

.pcx-cd-num {
    position: absolute;

    top: 46px;
    left: 50%;

    transform: translateX(-50%);

    z-index: -1;

    color: rgba(255, 138, 0, .10);

    font-size: clamp(84px, 8.4vw, 132px);
    line-height: 1;

    font-weight: 800;

    letter-spacing: -.08em;

    pointer-events: none;

    transition:
        color .45s ease,
        text-shadow .45s ease;
}


/* ---------------------------------------------------------
   NODE PLATE (icon medallion)
   --------------------------------------------------------- */

.pcx-cd-node {
    position: relative;

    display: grid;
    place-items: center;

    width: 76px;
    height: 76px;

    margin-bottom: 22px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 138, 0, .22),
            rgba(255, 138, 0, .05) 62%,
            transparent 72%);

    box-shadow:
        0 0 0 1px rgba(255, 138, 0, .45),
        0 0 0 9px rgba(255, 138, 0, .05),
        0 0 34px rgba(255, 138, 0, .35);

    transition:
        transform .5s cubic-bezier(.16, 1, .3, 1),
        box-shadow .5s ease;
}

/* expanding sonar ring */

.pcx-cd-node::before {
    content: "";

    position: absolute;

    inset: -1px;

    border:
        1px solid rgba(255, 138, 0, .45);

    border-radius: 50%;

    animation:
        pcx-cd-sonar 3.4s ease-out infinite;
}

.pcx-cd-shaft:nth-of-type(2) .pcx-cd-node::before {
    animation-delay: .85s;
}

.pcx-cd-shaft:nth-of-type(3) .pcx-cd-node::before {
    animation-delay: 1.7s;
}

.pcx-cd-shaft:nth-of-type(4) .pcx-cd-node::before {
    animation-delay: 2.55s;
}

.pcx-cd-node-plate {
    position: relative;

    z-index: 2;

    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background:
        linear-gradient(155deg,
            #FFD9A0 0%,
            var(--pcx-orange) 58%,
            #E87500 100%);

    box-shadow:
        0 0 22px rgba(255, 138, 0, .6),
        inset 0 1px 0 rgba(255, 255, 255, .45);

    transition:
        transform .5s cubic-bezier(.16, 1, .3, 1);
}

.pcx-cd-node-plate svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: #101619;

    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------------------------------------------------------
   SHAFT COPY
   --------------------------------------------------------- */

.pcx-cd-copy {
    position: relative;

    max-width: 250px;
}

.pcx-cd-copy>span {
    display: block;

    margin-bottom: 9px;

    color: var(--pcx-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .17em;

    text-transform: uppercase;
}

.pcx-cd-copy h3 {
    margin: 0 0 10px;

    color: #F3F1EC;

    font-size: clamp(28px, 2.4vw, 33px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.035em;

    transition:
        color .35s ease,
        text-shadow .35s ease;
}

.pcx-cd-copy p {
    margin: 0;

    color: #9FAAB0;

    font-size: 14px;

    line-height: 1.72;

    font-weight: 500;
}


/* terminal foot — where the shaft grounds out */

.pcx-cd-term {
    position: relative;

    display: block;

    width: 100%;

    max-width: 210px;

    height: 1px;

    margin-top: 22px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 138, 0, .55),
            transparent);
}

.pcx-cd-term::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--pcx-orange);

    transform: translate(-50%, -50%);

    box-shadow: 0 0 10px var(--pcx-orange);
}


/* ---------------------------------------------------------
   HOVER / FOCUS
   --------------------------------------------------------- */

.pcx-cd-shaft:hover,
.pcx-cd-shaft:focus-visible {
    transform: translateY(-10px);
}

.pcx-cd-shaft:hover::after,
.pcx-cd-shaft:focus-visible::after {
    opacity: 1;
}

.pcx-cd-shaft:hover::before,
.pcx-cd-shaft:focus-visible::before {
    box-shadow:
        0 0 16px rgba(255, 138, 0, .95),
        0 0 46px rgba(255, 138, 0, .6);
}

.pcx-cd-shaft:hover .pcx-cd-num,
.pcx-cd-shaft:focus-visible .pcx-cd-num {
    color: rgba(255, 138, 0, .24);

    text-shadow: 0 0 34px rgba(255, 138, 0, .35);
}

.pcx-cd-shaft:hover .pcx-cd-node,
.pcx-cd-shaft:focus-visible .pcx-cd-node {
    transform: scale(1.09);

    box-shadow:
        0 0 0 1px var(--pcx-orange),
        0 0 0 11px rgba(255, 138, 0, .07),
        0 0 52px rgba(255, 138, 0, .65);
}

.pcx-cd-shaft:hover .pcx-cd-node-plate,
.pcx-cd-shaft:focus-visible .pcx-cd-node-plate {
    transform: scale(1.06);
}

.pcx-cd-shaft:hover .pcx-cd-copy h3,
.pcx-cd-shaft:focus-visible .pcx-cd-copy h3 {
    color: #FFFFFF;

    text-shadow: 0 0 22px rgba(255, 138, 0, .3);
}


@keyframes pcx-command-glow-pulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.92);
    }

    50% {
        opacity: .8;
        transform: scale(1.08);
    }

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pcx-cd-bus-run {

    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(560%);
    }

}


@keyframes pcx-cd-cap-pulse {

    0%,
    100% {
        transform: translateY(-50%) scale(.85);
        box-shadow:
            0 0 0 4px rgba(255, 138, 0, .06),
            0 0 14px rgba(255, 138, 0, .7);
    }

    50% {
        transform: translateY(-50%) scale(1.2);
        box-shadow:
            0 0 0 9px rgba(255, 138, 0, .09),
            0 0 30px rgba(255, 138, 0, .95);
    }

}


@keyframes pcx-cd-charge {

    0% {
        transform: translate(-50%, -40%);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 230%);
        opacity: 0;
    }

}


@keyframes pcx-cd-sonar {

    0% {
        transform: scale(1);
        opacity: .8;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }

}


@keyframes pcx-cd-rise {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    12% {
        opacity: .9;
    }

    78% {
        opacity: .55;
    }

    100% {
        transform: translateY(-320px);
        opacity: 0;
    }

}


/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1279px) {

    .pcx-cd-system {
        gap: 16px;

        margin-top: -75.5px;
    }

    .pcx-cd-node {
        width: 66px;
        height: 66px;

        margin-bottom: 18px;
    }

    .pcx-cd-node-plate {
        width: 44px;
        height: 44px;
    }

    .pcx-cd-node-plate svg {
        width: 20px;
        height: 20px;
    }

    .pcx-cd-copy {
        max-width: 210px;
    }

    .pcx-cd-copy p {
        font-size: 13.5px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .pcx-cd-bus {
        height: 62px;
    }

    .pcx-cd-bus-rail,
    .pcx-cd-bus-flow {
        top: 25px;
    }

    .pcx-cd-bus-cap {
        top: 25px;
    }

    .pcx-cd-system {
        margin-top: -4.5px;
    }

    .pcx-cd-system {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 44px 26px;
    }

    .pcx-cd-spine {
        left: 25%;
        right: 25%;
        top: -26px;
    }

    .pcx-cd-node {
        width: 72px;
        height: 72px;
    }

    .pcx-cd-copy {
        max-width: 300px;
    }

    .pcx-cd-copy p {
        max-width: 300px;
    }

}

@media (max-width: 1023px) {

    .pcx-cd-bus-rail,
    .pcx-cd-bus-flow,
    .pcx-cd-bus-cap {
        display: none;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE-M
   ========================================================= */

@media (max-width: 767px) {

    .pcx-cd-spark {
        display: none;
    }

    .pcx-cd-bus {
        height: 56px;

        margin-top: 44px;
    }

    .pcx-cd-bus-rail,
    .pcx-cd-bus-flow {
        top: 22px;
    }

    .pcx-cd-bus-cap {
        top: 22px;

        width: 11px;
        height: 11px;
    }

    .pcx-cd-system {
        margin-top: -3.5px;
    }

    /* single column: the bus feeds one vertical spine */

    .pcx-cd-system {
        grid-template-columns: 1fr;

        gap: 0;

        padding-left: 54px;
    }

    .pcx-cd-spine {
        left: 28px;
        right: auto;
        top: 30px;
        bottom: 30px;

        background:
            repeating-linear-gradient(180deg,
                rgba(255, 138, 0, .30) 0 2px,
                transparent 2px 9px);
    }

    .pcx-cd-shaft {
        flex-direction: row;
        align-items: flex-start;

        gap: 16px;

        padding: 0 0 44px;

        text-align: left;
    }

    .pcx-cd-shaft:last-child {
        padding-bottom: 0;
    }

    .pcx-cd-shaft::before {
        left: -31px;
        top: 30px;
        bottom: 0;

        height: auto;
        width: 2px;

        transform: none;
    }

    .pcx-cd-shaft:last-child::before {
        bottom: 50%;
    }

    .pcx-cd-shaft::after {
        left: -31px;
        top: 30px;

        transform: none;
    }

    .pcx-cd-shaft:hover,
    .pcx-cd-shaft:focus-visible {
        transform: translateX(6px);
    }

    .pcx-cd-num {
        top: 2px;
        left: -46px;

        font-size: 66px;
    }

    .pcx-cd-node {
        flex-shrink: 0;

        width: 56px;
        height: 56px;

        margin-bottom: 0;
    }

    .pcx-cd-node-plate {
        width: 38px;
        height: 38px;
    }

    .pcx-cd-node-plate svg {
        width: 17px;
        height: 17px;
    }

    .pcx-cd-copy {
        max-width: none;
        flex: 1;
    }

    .pcx-cd-copy h3 {
        font-size: 27px;
    }

    .pcx-cd-copy p {
        max-width: 340px;
    }

    .pcx-cd-term {
        display: none;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 390px) {

    .pcx-cd-system {
        padding-left: 46px;
    }

    .pcx-cd-spine {
        left: 18px;
    }

    .pcx-cd-shaft {
        gap: 13px;
    }

    .pcx-cd-system {
        margin-top: -1.5px;
    }

    .pcx-cd-shaft::before,
    .pcx-cd-shaft::after {
        left: -27px;
    }

    .pcx-cd-num {
        font-size: 56px;
        left: -42px;
    }

    .pcx-cd-node {
        width: 50px;
        height: 50px;
    }

    .pcx-cd-node-plate {
        width: 34px;
        height: 34px;
    }

    .pcx-cd-copy h3 {
        font-size: 24px;
    }

    .pcx-cd-copy p {
        font-size: 13px;
    }

    .pcx-cd-copy>span {
        font-size: 9px;
        letter-spacing: .14em;
    }

}


/* =========================================================
   COLLECTOR RAIL (footer label row)
   ========================================================= */

.pcx-process-command-footer {
    display: flex;

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

    gap: 18px;

    margin-top: 30px;

    color: #77848A;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;
}

.pcx-process-command-footer i {
    display: block;

    width: 38px;
    height: 1px;

    background:
        linear-gradient(90deg, transparent, var(--pcx-orange));

    box-shadow: 0 0 8px rgba(255, 138, 0, .4);
}

@media (max-width: 767px) {

    .pcx-process-command-footer {
        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 10px 12px;

        margin-top: 34px;

        font-size: 8px;
    }

    .pcx-process-command-footer i {
        width: 20px;
    }
}


/* =========================================================
   SHELL RESPONSIVE — WRAPPER / HEADER / FOOTER
   (frames shared with the rest of the section)
   ========================================================= */

@media (max-width: 1279px) {

    .pcx-process-command-wrap {
        width: min(1180px, calc(100% - 70px));
    }

    .pcx-process-command-title {
        gap: 55px;
    }
}


@media (max-width: 1023px) {

    .pcx-process-command {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .pcx-process-command-wrap {
        width: calc(100% - 60px);
    }

    .pcx-process-command-title {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pcx-process-command-title p {
        max-width: 600px;
    }
}


@media (max-width: 767px) {

    .pcx-process-command {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 70px;
    }

    .pcx-process-command-wrap {
        width: calc(100% - 36px);
    }

    .pcx-process-command-title h2 {
        font-size: 38px;
    }

    .pcx-process-command-title p {
        font-size: 15px;
    }

    .pcx-process-command-glow {
        width: 260px;
        height: 260px;
        filter: blur(65px);
    }
}


@media (max-width: 390px) {

    .pcx-process-command-wrap {
        width: calc(100% - 28px);
    }

    .pcx-process-command-title h2 {
        font-size: 34px;
    }

    .pcx-process-command-kicker {
        font-size: 10px;
        letter-spacing: .16em;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pcx-process-command *,
    .pcx-process-command *::before,
    .pcx-process-command *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pcx-process-command *,
    .pcx-process-command *::before,
    .pcx-process-command *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pcx04Orbit{
    from{
        transform:rotate(-8deg) rotate(0deg);
    }

    to{
        transform:rotate(-8deg) rotate(360deg);
    }
}


@keyframes pcx04OrbitReverse{
    from{
        transform:rotate(9deg) rotate(360deg);
    }

    to{
        transform:rotate(9deg) rotate(0deg);
    }
}


@keyframes pcx04Scan{
    0%,100%{
        opacity:0;
        transform:translateY(-170px);
    }

    15%{
        opacity:1;
    }

    50%{
        opacity:1;
        transform:translateY(170px);
    }

    65%,100%{
        opacity:0;
        transform:translateY(170px);
    }
}


@keyframes pcx04CapacityPulse{
    0%{
        left:4%;
    }

    100%{
        left:91%;
    }
}


@keyframes pcx04NodePulse{
    0%,100%{
        transform:scale(.7);
        opacity:.55;
    }

    50%{
        transform:scale(1.25);
        opacity:1;
    }
}


@keyframes pcx05EnergyPulse{
    0%{
        left:-3%;
    }

    100%{
        left:103%;
    }
}


@keyframes pcx05MarkerPulse{
    0%,100%{
        transform:scale(.75);
        opacity:.6;
    }

    50%{
        transform:scale(1.25);
        opacity:1;
    }
}


/* =========================================================
   LAPTOP-L / LARGE LAPTOP
   ========================================================= */

@media(max-width:1279px){

    .pcx04-capacity-top{
        grid-template-columns:
            minmax(330px,.8fr)
            minmax(460px,1.2fr);
        gap:35px;
    }

    .pcx04-power-visual{
        min-height:485px;
    }

    .pcx04-orbit-one{
        width:560px;
    }

    .pcx04-orbit-two{
        width:620px;
    }

    .pcx04-orbit-three{
        width:680px;
    }

    .pcx05-process-items{
        gap:14px;
    }

    .pcx05-process-node{
        padding-inline:10px;
    }

}


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

@media(max-width:991px){

    .pcx04-capacity{
        padding:90px 0 80px;
    }

    .pcx04-capacity-top{
        grid-template-columns:1fr;
        gap:30px;
    }

    .pcx04-capacity-copy{
        max-width:760px;
    }

    .pcx04-power-visual{
        min-height:470px;
    }

    .pcx04-capacity-items{
        grid-template-columns:repeat(3,1fr);
        row-gap:20px;
    }

    .pcx04-capacity-line{
        display:none;
    }

    .pcx04-capacity-pulse{
        display:none;
    }

    .pcx04-capacity-node{
        min-height:145px;
    }


    .pcx05-process{
        padding:90px 0 75px;
    }

    .pcx05-process-items{
        grid-template-columns:repeat(2,1fr);
        gap:30px 20px;
    }

    .pcx05-energy-line{
        display:none;
    }

    .pcx05-process-node,
    .pcx05-process-node:nth-child(odd),
    .pcx05-process-node:nth-child(even),
    .pcx05-process-node:hover,
    .pcx05-process-node:nth-child(odd):hover{
        transform:none;
    }

    .pcx05-process-node{
        min-height:270px;
        padding:20px;
        border-top:1px solid var(--pcx-line);
        border-bottom:1px solid var(--pcx-line);
    }

    .pcx05-node-marker{
        display:none;
    }

    .pcx05-process-baseline{
        display:none;
    }

    .pcx05-process-footer{
        grid-template-columns:1fr;
        gap:15px;
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
   ========================================================= */

@media(max-width:767px){

    .pcx04-capacity{
        padding:76px 0 65px;
    }

    .pcx04-capacity-top{
        gap:15px;
    }

    .pcx04-capacity-copy h2{
        font-size:34px;
    }

    .pcx04-capacity-copy p{
        font-size:16px;
    }

    .pcx04-power-visual{
        min-height:390px;
        margin-top:10px;
    }

    .pcx04-generator{
        width:88%;
    }

    .pcx04-orbit-one{
        width:110%;
        height:230px;
    }

    .pcx04-orbit-two{
        width:120%;
        height:270px;
    }

    .pcx04-orbit-three{
        width:130%;
        height:310px;
    }

    .pcx04-power-label{
        top:8px;
        right:4%;
    }

    .pcx04-power-readout{
        right:4%;
        bottom:4px;
    }

    .pcx04-capacity-items{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        margin-top:15px;
    }

    .pcx04-capacity-node{
        min-height:135px;
    }

    .pcx04-capacity-node::before{
        inset:8px 2px 0;
    }

    .pcx04-node-ring{
        width:37px;
        height:37px;
    }

    .pcx04-capacity-node strong{
        font-size:27px;
    }

    .pcx04-capacity-node small{
        font-size:12px;
    }

    .pcx04-capacity-foot{
        margin-top:18px;
        gap:10px;
        font-size:10px;
        text-align:center;
    }

    .pcx04-capacity-foot i{
        width:28px;
    }


    .pcx05-process{
        padding:76px 0 65px;
    }

    .pcx05-process-intro h2{
        font-size:34px;
    }

    .pcx05-process-intro p{
        font-size:16px;
    }

    .pcx05-process-system{
        margin-top:45px;
    }

    .pcx05-process-items{
        grid-template-columns:1fr;
        gap:0;
    }

    .pcx05-process-node,
    .pcx05-process-node:nth-child(odd),
    .pcx05-process-node:nth-child(even){
        min-height:180px;
        padding:20px 5px 20px 52px;
        border:0;
        border-left:1px solid var(--pcx-line);
    }

    .pcx05-process-node::before{
        content:"";
        position:absolute;
        left:-2px;
        top:0;
        bottom:0;
        width:2px;
        background:
            linear-gradient(
                180deg,
                transparent,
                var(--pcx-orange),
                transparent
            );
        opacity:.7;
    }

    .pcx05-node-top{
        height:58px;
    }

    .pcx05-node-icon{
        width:48px;
        height:48px;
    }

    .pcx05-node-number{
        position:absolute;
        left:-43px;
        top:15px;
        z-index:5;
    }

    .pcx05-node-content{
        padding-top:2px;
    }

    .pcx05-node-content h3{
        font-size:22px;
    }

    .pcx05-node-content p{
        max-width:330px;
        font-size:13px;
    }

    .pcx05-process-node::after{
        content:"";
        position:absolute;
        left:-5px;
        top:48px;
        width:8px;
        height:8px;
        border-radius:50%;
        background:var(--pcx-orange);
        box-shadow:
            0 0 0 6px rgba(255,138,0,.07),
            0 0 18px rgba(255,138,0,.8);
    }

    .pcx05-process-footer{
        margin-top:45px;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media(max-width:380px){

    .pcx04-capacity-copy h2,
    .pcx05-process-intro h2{
        font-size:30px;
    }

    .pcx04-power-visual{
        min-height:330px;
    }

    .pcx04-generator{
        width:94%;
    }

    .pcx04-generator figcaption strong{
        font-size:25px;
    }

    .pcx04-capacity-node{
        min-height:125px;
    }

    .pcx04-capacity-node strong{
        font-size:24px;
    }

    .pcx04-capacity-node small{
        font-size:11px;
    }

    .pcx04-capacity-foot{
        font-size:9px;
    }

    .pcx05-process-node{
        min-height:170px;
        padding-left:45px;
    }

    .pcx05-node-number{
        left:-38px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .pcx04-capacity *,
    .pcx05-process *,
    .pcx04-capacity *::before,
    .pcx04-capacity *::after,
    .pcx05-process *::before,
    .pcx05-process *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}

/* =========================================================
   SECTION 06 — FIELD
   ========================================================= */

.pcx-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 750px;
    background: var(--pcx-graphite);
}

.pcx-field-media {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}

.pcx-field-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 60%,
        rgba(32, 42, 48, .45)
    );
}

.pcx-field-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.pcx-field:hover .pcx-field-media img {
    transform: scale(1.05);
}

.pcx-field-media-label {
    position: absolute;
    z-index: 2;
    left: 35px;
    bottom: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .15em;
}

.pcx-field-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px;
}

.pcx-field-content .pcx-index {
    color: #A7B4BA;
}

.pcx-field-content h2 {
    color: #F3F1EC;
}

.pcx-field-content p {
    max-width: 600px;
    color: #A7B4BA;
}

.pcx-field-line {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.pcx-field-line span {
    color: #F3F1EC;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}


/* =========================================================
   SECTION 07 — PERFORMANCE ANALYTICS
   ========================================================= */

.pcx-why.pcx-analytics {

    min-height: calc(100vh - 80px);

    padding:
        clamp(58px, 6vw, 88px)
        0
        clamp(34px, 4vw, 54px);

    display: flex;

    align-items: stretch;

    background: #101619;

    color: #F3F1EC;

}


.pcx-analytics-wrap {

    width:
        min(
            1380px,
            calc(100% - 100px)
        );

    min-height: 100%;

    margin-inline: auto;

    display: grid;

    grid-template-rows:
        auto
        auto
        minmax(330px, 1fr)
        auto;

}


/* =========================================================
   INDEX
   ========================================================= */

.pcx-analytics .pcx-index {

    margin-bottom:
        clamp(34px, 4vw, 54px);

    color: #A7B4BA;

}


.pcx-analytics .pcx-index > span:first-child {

    color: #FF9700;

}


.pcx-analytics .pcx-index i {

    background: #FF9700;

}


/* =========================================================
   INTRO
   ========================================================= */

.pcx-analytics-copy {

    max-width: 760px;

}


.pcx-analytics-copy .pcx-kicker {

    margin-bottom: 20px;

    color: #FF9700;

}


.pcx-analytics-copy h2 {

    max-width: 760px;

    color: #F3F1EC;

    font-size:
        clamp(
            42px,
            5.2vw,
            76px
        );

    line-height: .98;

    letter-spacing: -.055em;

}


.pcx-analytics-copy h2 em {

    color: #FF9700;

    font-style: normal;

}


.pcx-analytics-copy p {

    max-width: 680px;

    margin: 26px 0 0;

    color: #A7B4BA;

    font-size:
        clamp(
            16px,
            1.25vw,
            20px
        );

    line-height: 1.65;

}


/* =========================================================
   GRAPH AREA
   ========================================================= */

.pcx-analytics-chart-shell {

    position: relative;

    min-height: 330px;

    margin-top:
        clamp(
            24px,
            3vw,
            38px
        );

    overflow: hidden;

}


.pcx-analytics-chart-shell::before {

    content: "";

    position: absolute;

    left: 42px;
    right: 0;

    top: 16%;
    bottom: 0;

    background-image:
        linear-gradient(
            to bottom,
            rgba(243,241,236,.07) 1px,
            transparent 1px
        );

    background-size:
        100% 25%;

    pointer-events: none;

}


.pcx-analytics-chart-shell::after {

    content: "";

    position: absolute;

    left: 42px;
    right: 0;

    bottom: 0;

    height: 1px;

    background:
        rgba(243,241,236,.25);

    box-shadow:
        0 0 10px
        rgba(255,151,0,.22);

    pointer-events: none;

}


/* =========================================================
   Y AXIS
   ========================================================= */

.pcx-analytics-y-axis {

    position: absolute;

    left: 0;

    top: 16%;
    bottom: 0;

    width: 34px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    padding-bottom: 1px;

    color: #73838A;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    z-index: 3;

}


.pcx-analytics-y-axis span {

    position: relative;

}


.pcx-analytics-y-axis span::after {

    content: "";

    position: absolute;

    left: 30px;

    top: 50%;

    width: 10px;

    height: 1px;

    background:
        rgba(243,241,236,.28);

}


/* =========================================================
   SVG
   ========================================================= */

.pcx-analytics-svg {

    position: absolute;

    left: 42px;
    right: 0;

    top: 0;
    bottom: 0;

    width:
        calc(100% - 42px);

    height: 100%;

    overflow: visible;

    z-index: 2;

}




/* =========================================================
   HISTOGRAM — WAVE FILLED
   ========================================================= */

.pcx-analytics-bar {

    fill:
        url(#pcxAnalyticsBarGradient);

    opacity: 0;

    transform-box: fill-box;

    transform-origin:
        center bottom;

    transform:
        scaleY(0);

    filter:
    drop-shadow(
        0 0 5px
        rgba(255,151,0,.22)
    );
}


.pcx-analytics-bar.is-visible {

    opacity: .78;

    transform:
        scaleY(1);

    transition:
        transform .48s
        cubic-bezier(.16,1,.3,1),

        opacity .35s ease;

}

/* =========================================================
   MAIN WAVE
   ========================================================= */

.pcx-analytics-wave {

    fill: none;

    stroke: #FF9700;

    stroke-width: 4;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 1;

    stroke-dashoffset: 1;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,151,0,.72)
        );

    transition:
        stroke-dashoffset
        2.4s
        cubic-bezier(.16,1,.3,1);

}


.pcx-analytics-wave-glow {

    fill: none;

    stroke:
        rgba(255,151,0,.22);

    stroke-width: 14;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 1;

    stroke-dashoffset: 1;

    vector-effect:
        non-scaling-stroke;

    filter: blur(7px);

    transition:
        stroke-dashoffset
        2.4s
        cubic-bezier(.16,1,.3,1);

}


.pcx-analytics-wave.is-drawn,
.pcx-analytics-wave-glow.is-drawn {

    stroke-dashoffset: 0;

}


/* =========================================================
   WAVE POINTS
   ========================================================= */

.pcx-analytics-point {

    opacity: 0;

    transform: scale(.35);

    transform-box: fill-box;

    transform-origin: center;

    transition:
        opacity .45s ease,
        transform .55s
        cubic-bezier(.16,1,.3,1);

}


.pcx-analytics-point.is-visible {

    opacity: 1;

    transform: scale(1);

}


.pcx-analytics-point-ring {

    fill:
        rgba(255,151,0,.14);

    stroke:
        rgba(255,151,0,.32);

    stroke-width: 2;

}


.pcx-analytics-point-core {

    fill: #FFF8EC;

    stroke: #FF9700;

    stroke-width: 4;

    filter:
        drop-shadow(
            0 0 9px
            rgba(255,151,0,.95)
        );

}


.pcx-analytics-marker-line {

    stroke:
        rgba(255,151,0,.75);

    stroke-width: 1.4;

    stroke-dasharray: 4 7;

}


/* =========================================================
   METRICS
   ========================================================= */

.pcx-analytics-metrics {

    position: absolute;

    inset: 0;

    left: 42px;

    z-index: 4;

    pointer-events: none;

}


.pcx-analytics-metric {

    position: absolute;

    min-width: 125px;

}


.pcx-analytics-metric:nth-child(1) {

    left: 5%;

    top: 25%;

}


.pcx-analytics-metric:nth-child(2) {

    left: 35%;

    top: 34%;

}


.pcx-analytics-metric:nth-child(3) {

    left: 65%;

    top: 10%;

}


.pcx-analytics-metric:nth-child(4) {

    right: 1%;

    top: 1%;

}


.pcx-analytics-metric-label {

    display: block;

    color: #FF9700;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;

}


.pcx-analytics-metric-value {

    display: block;

    margin-top: 5px;

    color: #F3F1EC;

    font-size:
        clamp(
            22px,
            2vw,
            30px
        );

    line-height: 1;

    font-weight: 800;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity .55s ease,
        transform .55s
        cubic-bezier(.16,1,.3,1);

}


.pcx-analytics-metric-value.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   BOTTOM ANALYTICS LINE
   ========================================================= */

.pcx-analytics-bottom {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 24px;

    padding-top: 22px;

    color: #87969D;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

}


.pcx-analytics-bottom span:last-child {

    display: inline-flex;

    align-items: center;

    gap: 12px;

}


.pcx-analytics-bottom span:last-child::before {

    content: "→";

    color: #FF9700;

    font-size: 18px;

}
/* =========================================================
   SECTION 08 — SERVICE AREA
   NEW ROUTE DESIGN
   ========================================================= */

.pcx-area {
    padding: var(--pcx-section-space) 0;
    background:
        linear-gradient(
            135deg,
            var(--pcx-bg-alt),
            var(--pcx-bg)
        );
}

.pcx-area-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
    align-items: center;
}

.pcx-area-intro p {
    max-width: 520px;
}

.pcx-area-route {
    position: relative;
    padding: 20px 0 20px 90px;
}

.pcx-route-line {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 28px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--pcx-orange),
        rgba(255,138,0,.12)
    );
}

.pcx-route-point {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    align-items: center;
    min-height: 115px;
    border-bottom: 1px solid var(--pcx-line);
}

.pcx-route-point:last-child {
    border-bottom: 0;
}

.pcx-route-point > span {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pcx-orange);
    color: var(--pcx-graphite);
    font-size: 13px;
    font-weight: 800;
    border-radius: 50%;
}

.pcx-route-point strong {
    display: block;
    color: var(--pcx-text);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .05em;
}

.pcx-route-point small {
    display: block;
    margin-top: 6px;
    color: var(--pcx-muted);
    font-size: 14px;
}


/* =========================================================
   SECTION 09 — CTA
   ========================================================= */

.pcx-cta {
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pcx-graphite);
    color: #fff;
    text-align: center;
}

.pcx-cta-orbit {
    position: absolute;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255,138,0,.16);
    border-radius: 50%;
    animation: pcxOrbit 18s linear infinite;
}

.pcx-cta-orbit::before,
.pcx-cta-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,138,0,.12);
    border-radius: 50%;
}

.pcx-cta-orbit::before {
    inset: 70px;
}

.pcx-cta-orbit::after {
    inset: 140px;
}

@keyframes pcxOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.pcx-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 950px;
}

.pcx-index-center {
    justify-content: center;
}

.pcx-cta .pcx-index {
    color: #A7B4BA;
}

.pcx-cta .pcx-kicker {
    color: var(--pcx-orange);
}

.pcx-cta h2 {
    color: #F3F1EC;
    font-size: clamp(40px, 5vw, 72px);
}

.pcx-cta p {
    max-width: 800px;
    margin: 25px auto 0;
    color: #A7B4BA;
}

.pcx-cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 42px;
}

.pcx-cta-phone,
.pcx-cta-button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.pcx-cta-phone {
    border: 1px solid var(--pcx-orange);
    background: var(--pcx-orange);
    color: var(--pcx-graphite);
}

.pcx-cta-phone:hover {
    border-color: #FFA733;
    background: #FFA733;
    color: var(--pcx-graphite);
    transform: translateY(-3px);
}

.pcx-cta-button {
    background: var(--pcx-orange);
    color: var(--pcx-graphite);
    transition:
        background .3s ease,
        transform .3s ease;
}

.pcx-cta-button span {
    margin-left: 12px;
}

.pcx-cta-button:hover {
    background: #FFA733;
    transform: translateY(-3px);
}


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

@media (max-width: 991px) {

    .pcx-wrap {
        width: min(100% - 50px, 900px);
    }

    .pcx-overview-main,
    .pcx-capacity-heading,
    .pcx-area-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .pcx-overview-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .pcx-stat-line:nth-child(2) {
        border-right: 0;
    }

    .pcx-services {
        min-height: auto;
    }

    .pcx-services-pin {
        position: relative;
        min-height: auto;
        padding: 100px 0;
    }

    .pcx-services-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .pcx-service-stage {
        grid-template-columns: 1fr;
    }

    .pcx-service-image-stage {
        height: 500px;
    }

    .pcx-capacity-rail {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 50px;
    }

    .pcx-capacity-node {
        min-height: 240px;
    }

    .pcx-capacity-node:nth-child(3n) {
        border-right: 0;
    }

    .pcx-process-flow {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
        perspective: 1400px;
    }

    .pcx-flip-card {
        height: 280px;
    }

    .pcx-flip-card:not(:last-child)::after {
        display: none;
    }

    .pcx-field {
        grid-template-columns: 1fr;
    }

    .pcx-field-media {
        min-height: 500px;
    }

    .pcx-field-content {
        padding: 80px 50px;
    }

    .pcx-why-item {
        grid-template-columns: 70px 1fr;
    }

    .pcx-why-item p {
        grid-column: 2;
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
   ========================================================= */

@media (max-width: 767px) {

    .pcx-wrap {
        width: calc(100% - 36px);
    }

    .pcx-section h2 {
        font-size: 34px;
    }

    .pcx-section p {
        font-size: 16px;
    }

    .pcx04-capacity .pcx04-capacity-copy h2,
    .pcx05-process .pcx05-process-intro h2 {
        font-size: 34px;
    }

    .pcx04-capacity .pcx04-capacity-copy p,
    .pcx05-process .pcx05-process-intro p {
        font-size: 17px;
    }

    .pcx04-capacity .pcx04-capacity-node small {
        font-size: 12px;
    }

    .pcx04-capacity .pcx04-capacity-foot {
        font-size: 10px;
    }

    .pcx05-process .pcx05-node-content h3 {
        font-size: 24px;
    }

    .pcx05-process .pcx05-node-content p {
        font-size: 16px;
    }

    .pcx-index {
        margin-bottom: 32px;
        font-size: 11px;
    }

    .pcx-overview-stats {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }

    .pcx-stat-line,
    .pcx-stat-line + .pcx-stat-line {
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid var(--pcx-line);
    }

    .pcx-stat-line:last-child {
        border-bottom: 0;
    }

    .pcx-brand-marquee {
        gap: 12px;
        margin-left: -18px;
    }

    .pcx-brand-box {
        min-width: 180px;
        height: 65px;
        padding: 0 22px;
        font-size: 14px;
    }

    .pcx-brand-track {
        gap: 12px;
    }

    .pcx-service-image-stage {
        height: 360px;
    }

    .pcx-service-item {
        grid-template-columns: 32px 1fr 20px;
        gap: 12px;
        padding: 20px 0;
    }

    .pcx-service-item strong {
        font-size: 16px;
    }

    .pcx-service-item small {
        font-size: 13px;
    }

    .pcx-capacity-rail {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 55px;
        row-gap: 45px;
    }

    .pcx-capacity-node {
        min-height: 220px;
    }

    .pcx-capacity-node:nth-child(3n) {
        border-right: 1px solid var(--pcx-line);
    }

    .pcx-capacity-node:nth-child(even) {
        border-right: 0;
    }

    .pcx-hang-card {
        max-width: 170px;
    }

    .pcx-process-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .pcx-process-flow {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 60px;
        perspective: none;
    }

    .pcx-flip-card {
        height: 220px;
    }

    .pcx-field-media {
        min-height: 350px;
    }

    .pcx-field-content {
        padding: 70px 30px;
    }

    .pcx-why-item {
        grid-template-columns: 45px 1fr;
        gap: 18px;
    }

    .pcx-why-item p {
        grid-column: 2;
    }

    .pcx-area-route {
        padding-left: 65px;
    }

    .pcx-route-line {
        left: 18px;
    }

    .pcx-route-point {
        grid-template-columns: 45px 1fr;
        gap: 18px;
    }

    .pcx-route-point > span {
        width: 44px;
        height: 44px;
        font-size: 11px;
    }

    .pcx-route-point strong {
        font-size: 17px;
    }

    .pcx-cta {
        min-height: 620px;
    }

    .pcx-cta-orbit {
        width: 400px;
        height: 400px;
    }

    .pcx-cta-actions {
        flex-direction: column;
        gap: 15px;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 380px) {

    .pcx-wrap {
        width: calc(100% - 28px);
    }

    .pcx-section h2 {
        font-size: 30px;
    }

    .pcx04-capacity .pcx04-capacity-copy h2,
    .pcx05-process .pcx05-process-intro h2 {
        font-size: 32px;
    }

    .pcx04-capacity .pcx04-capacity-copy p,
    .pcx05-process .pcx05-process-intro p {
        font-size: 16px;
    }

    .pcx04-capacity .pcx04-capacity-node strong {
        font-size: 25px;
    }

    .pcx04-capacity .pcx04-capacity-node small {
        font-size: 11px;
    }

    .pcx04-capacity .pcx04-capacity-foot {
        font-size: 9px;
    }

    .pcx-brand-box {
        min-width: 155px;
        font-size: 12px;
    }

    .pcx-capacity-node strong {
        font-size: 30px;
    }

    .pcx-hang-card {
        max-width: 150px;
        padding: 16px 12px 18px;
    }

    .pcx-hang-photo {
        width: 46px;
        height: 46px;
    }

    .pcx-flip-card {
        height: 200px;
    }

    .pcx-field-content {
        padding: 60px 22px;
    }

    .pcx-area-route {
        padding-left: 52px;
    }

}
/* =========================================================
   SECTION 07 — ANALYTICS RESPONSIVE
   ========================================================= */


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

@media (max-width: 991px) {

    .pcx-why.pcx-analytics {

        min-height: auto;

        padding:
            70px
            0
            42px;

    }


    .pcx-analytics-wrap {

        width:
            min(
                calc(100% - 50px),
                900px
            );

        min-height: 760px;

    }


    .pcx-analytics-copy h2 {

        font-size:
            clamp(
                44px,
                7vw,
                58px
            );

    }


    .pcx-analytics-chart-shell {

        min-height: 330px;

    }


    .pcx-analytics-metric:nth-child(1) {
        left: 4%;
    }


    .pcx-analytics-metric:nth-child(2) {
        left: 34%;
    }


    .pcx-analytics-metric:nth-child(3) {
        left: 64%;
    }


    .pcx-analytics-metric:nth-child(4) {
        right: 0;
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
   ========================================================= */

@media (max-width: 767px) {

    .pcx-why.pcx-analytics {

        min-height: auto;

        padding:
            56px
            0
            32px;

    }


    .pcx-analytics-wrap {

        width:
            calc(100% - 36px);

        min-height: 0;

        display: block;

    }


    .pcx-analytics .pcx-index {

        margin-bottom: 34px;

    }


    .pcx-analytics-copy h2 {

        font-size:
            clamp(
                38px,
                10vw,
                50px
            );

        line-height: .99;

    }


    .pcx-analytics-copy p {

        margin-top: 20px;

        font-size: 16px;

    }


    .pcx-analytics-chart-shell {

        min-height: 350px;

        margin-top: 34px;

    }


    .pcx-analytics-metric {

        min-width: 0;

    }


    .pcx-analytics-metric:nth-child(1) {

        left: 2%;
        top: 8%;

    }


    .pcx-analytics-metric:nth-child(2) {

        left: 51%;
        top: 25%;

    }


    .pcx-analytics-metric:nth-child(3) {

        left: 2%;
        top: 51%;

    }


    .pcx-analytics-metric:nth-child(4) {

        right: 0;
        top: 63%;

    }


    .pcx-analytics-metric-label {

        font-size: 9px;

        letter-spacing: .1em;

    }


    .pcx-analytics-metric-value {

        font-size: 20px;

    }


    .pcx-analytics-bottom {

        margin-top: 8px;

        padding-top: 18px;

        font-size: 9px;

        letter-spacing: .1em;

        flex-wrap: wrap;

    }


    .pcx-analytics-bottom span:last-child {

        margin-left: auto;

    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 380px) {

    .pcx-why.pcx-analytics {

        padding:
            48px
            0
            28px;

    }


    .pcx-analytics-wrap {

        width:
            calc(100% - 28px);

    }


    .pcx-analytics-copy h2 {

        font-size: 34px;

    }


    .pcx-analytics-copy p {

        font-size: 15px;

    }


    .pcx-analytics-chart-shell {

        min-height: 310px;

        margin-top: 28px;

    }


    .pcx-analytics-metric-label {

        font-size: 8px;

    }


    .pcx-analytics-metric-value {

        font-size: 18px;

    }


    .pcx-analytics-bottom {

        font-size: 8px;

    }

}
/* =========================================================
   POWERCORE - CONTENT VISIBILITY SAFETY FIX
   Prevent sections from remaining hidden if JS animation
   does not initialize.
   ========================================================= */

.pcx-reveal,
.pcx-visible,
[class*="pcx-reveal"] {
    visibility: visible;
}

.pcx-reveal {
    opacity: 1;
    transform: none;
}

/* Never allow the main homepage sections to disappear */
section,
main,
footer {
    visibility: visible;
}

/* =========================================================
   POWERCORE FOOTER
   ---------------------------------------------------------
   Full-width graphite footer
   ========================================================= */

.pc-footer {

    width: 100%;

    margin: 0;

    padding: 0;

    background: #101619;

    color: #F3F1EC;

    font-family: "Manrope", sans-serif;

    overflow: hidden;

}


/* =========================================================
   MAIN FOOTER AREA
   ========================================================= */

.pc-footer-inner {

    width: min(
        100%,
        1500px
    );

    margin: 0 auto;

    padding:
        clamp(58px, 6vw, 88px)
        clamp(28px, 4vw, 64px)
        clamp(48px, 5vw, 72px);

    display: grid;

    grid-template-columns:
        1.35fr
        1.25fr
        1.15fr
        1.65fr;

    gap:
        clamp(30px, 3.5vw, 70px);

}


/* =========================================================
   BRAND
   ========================================================= */

.pc-footer-brand {

    min-width: 0;

}


.pc-footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: #F3F1EC;

    text-decoration: none;

    font-size:
        clamp(
            22px,
            1.8vw,
            28px
        );

    font-weight: 800;

    letter-spacing: -.03em;

}


.pc-footer-logo-box {

    width: 38px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #FF9700;

    color: #101619;

    font-size: 27px;

    font-weight: 800;

    line-height: 1;

    border-radius: 5px;

    box-shadow:
        0 0 22px
        rgba(255,151,0,.18);

}


.pc-footer-description {

    max-width: 340px;

    margin:
        24px 0 30px;

    color: #A7B4BA;

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   EMERGENCY
   ========================================================= */

.pc-footer-emergency {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: #F3F1EC;

    text-decoration: none;

}


.pc-footer-emergency-dot {

    width: 10px;

    height: 10px;

    flex: 0 0 10px;

    border-radius: 50%;

    background: #FF9700;

    box-shadow:
        0 0 0 5px
        rgba(255,151,0,.10),

        0 0 14px
        rgba(255,151,0,.55);

    animation:
        pcFooterPulse 2s
        ease-in-out infinite;

}


.pc-footer-emergency span:last-child {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.pc-footer-emergency small {

    color: #FF9700;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;

}


.pc-footer-emergency strong {

    color: #F3F1EC;

    font-size: 17px;

    font-weight: 800;

}


@keyframes pcFooterPulse {

    0%,
    100% {

        opacity: .55;

        transform: scale(.85);

    }

    50% {

        opacity: 1;

        transform: scale(1);

    }

}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.pc-footer-column {

    min-width: 0;

}


.pc-footer-column h3,
.pc-footer-newsletter h3 {

    margin: 0 0 24px;

    color: #F3F1EC;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

}


/* =========================================================
   QUICK LINKS
   ========================================================= */

.pc-footer-links-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 24px;

    row-gap: 12px;

}


.pc-footer-links-grid a {

    position: relative;

    color: #A7B4BA;

    text-decoration: none;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 600;

    transition:
        color .25s ease,
        transform .25s ease;

}


.pc-footer-links-grid a::before {

    content: "→";

    display: inline-block;

    margin-right: 7px;

    color: #FF9700;

    opacity: 0;

    transform:
        translateX(-5px);

    transition:
        opacity .25s ease,
        transform .25s ease;

}


.pc-footer-links-grid a:hover {

    color: #F3F1EC;

    transform:
        translateX(3px);

}


.pc-footer-links-grid a:hover::before {

    opacity: 1;

    transform:
        translateX(0);

}


/* =========================================================
   POWER SUPPORT
   ========================================================= */

.pc-footer-service-list {

    display: flex;

    flex-direction: column;

}


.pc-footer-service-list a {

    min-height: 45px;

    display: grid;

    grid-template-columns: 32px 1fr;

    align-items: center;

    gap: 10px;

    border-bottom:
        1px solid
        rgba(243,241,236,.10);

    color: #A7B4BA;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        color .25s ease,
        padding .25s ease;

}


.pc-footer-service-list a:first-child {

    border-top:
        1px solid
        rgba(243,241,236,.10);

}


.pc-footer-service-list a span {

    color: #FF9700;

    font-size: 11px;

    font-weight: 800;

}


.pc-footer-service-list a:hover {

    color: #F3F1EC;

    padding-left: 5px;

}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.pc-footer-newsletter {

    min-width: 0;

}


.pc-footer-kicker {

    display: block;

    margin-bottom: 13px;

    color: #FF9700;

    font-size: 10px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .17em;

}


.pc-footer-newsletter h3 {

    max-width: 340px;

    margin-bottom: 15px;

    font-size:
        clamp(
            24px,
            2.1vw,
            34px
        );

    line-height: 1.1;

    letter-spacing: -.035em;

}


.pc-footer-newsletter > p {

    max-width: 430px;

    margin: 0 0 22px;

    color: #A7B4BA;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   NEWSLETTER FORM
   ========================================================= */

.pc-footer-newsletter-form {

    width: 100%;

    max-width: 470px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    border:
        1px solid
        rgba(243,241,236,.20);

    background:
        rgba(255,255,255,.035);

}


.pc-footer-newsletter-form input {

    width: 100%;

    min-width: 0;

    height: 54px;

    padding:
        0 16px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #F3F1EC;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 600;

}


.pc-footer-newsletter-form input::placeholder {

    color: #788990;

}


.pc-footer-newsletter-form input:focus {

    background:
        rgba(255,151,0,.035);

}


.pc-footer-newsletter-form button {

    min-width: 125px;

    height: 54px;

    padding:
        0 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 0;

    background: #FF9700;

    color: #101619;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background .25s ease,
        box-shadow .25s ease;

}


.pc-footer-newsletter-form button:hover {

    background: #FFAA2B;

    box-shadow:
        0 0 22px
        rgba(255,151,0,.22);

}


.pc-footer-newsletter-form button span {

    font-size: 18px;

    line-height: 1;

}


/* =========================================================
   NEWSLETTER MESSAGE
   ========================================================= */

.pc-footer-newsletter-message {

    min-height: 20px;

    margin:
        9px 0 0 !important;

    color: #FF9700 !important;

    font-size: 12px !important;

    font-weight: 700;

}


/* =========================================================
   SOCIALS
   ========================================================= */

.pc-footer-socials {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 18px;

}


.pc-footer-socials a {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(243,241,236,.18);

    color: #A7B4BA;

    text-decoration: none;

    font-size: 13px;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;

}


.pc-footer-socials a:hover {

    color: #101619;

    border-color: #FF9700;

    background: #FF9700;

    transform:
        translateY(-3px);

}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.pc-footer-bottom {

    border-top:
        1px solid
        rgba(243,241,236,.11);

}


.pc-footer-bottom-inner {

    width: min(
        100%,
        1500px
    );

    margin: 0 auto;

    padding:
        20px
        clamp(28px, 4vw, 64px);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 20px;

}


.pc-footer-bottom p {

    margin: 0;

    color: #74838A;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 600;

}


.pc-footer-bottom-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}


.pc-footer-bottom-links a {

    color: #87969D;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition:
        color .25s ease;

}


.pc-footer-bottom-links a:hover {

    color: #FF9700;

}


.pc-footer-bottom-links span {

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #FF9700;

}


.pc-footer-status {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #87969D !important;

    letter-spacing: .08em;

}


.pc-footer-status span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #FF9700;

    box-shadow:
        0 0 9px
        rgba(255,151,0,.7);

}


/* =========================================================
   SCREEN-READER ONLY
   ========================================================= */

.pc-footer-sr-only {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;

    border: 0 !important;

}


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

@media (max-width: 1100px) {

    .pc-footer-inner {

        grid-template-columns:
            1.2fr
            1fr
            1fr;

        gap: 42px;

    }


    .pc-footer-newsletter {

        grid-column:
            1 / -1;

        padding-top: 10px;

        border-top:
            1px solid
            rgba(243,241,236,.10);

    }


    .pc-footer-newsletter h3 {

        max-width: 500px;

    }


    .pc-footer-newsletter > p {

        max-width: 650px;

    }


    .pc-footer-newsletter-form {

        max-width: 600px;

    }

}


/* =========================================================
   TABLET / MOBILE-L
   ========================================================= */

@media (max-width: 767px) {

    .pc-footer-inner {

        width: 100%;

        padding:
            54px 24px 44px;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            42px 26px;

    }


    .pc-footer-brand {

        grid-column:
            1 / -1;

    }


    .pc-footer-column {

        min-width: 0;

    }


    .pc-footer-links-grid {

        grid-template-columns:
            1fr;

        row-gap: 11px;

    }


    .pc-footer-newsletter {

        grid-column:
            1 / -1;

        padding-top: 34px;

    }


    .pc-footer-bottom-inner {

        padding:
            18px 24px 22px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 13px;

    }


    .pc-footer-bottom-links {

        justify-content: flex-start;

        flex-wrap: wrap;

    }


    .pc-footer-status {

        justify-self: auto;

    }

}


/* =========================================================
   MOBILE-M / MOBILE-S
   ========================================================= */

@media (max-width: 480px) {

    .pc-footer-inner {

        padding:
            48px 18px 38px;

        grid-template-columns:
            1fr;

        gap: 38px;

    }


    .pc-footer-brand,
    .pc-footer-newsletter {

        grid-column:
            auto;

    }


    .pc-footer-description {

        max-width: none;

        margin:
            20px 0 25px;

        font-size: 14px;

    }


    .pc-footer-column h3,
    .pc-footer-newsletter h3 {

        margin-bottom: 18px;

    }


    .pc-footer-newsletter {

        padding-top: 0;

        border-top: 0;

    }


    .pc-footer-newsletter-form {

        display: flex;

        flex-direction: column;

        border: 0;

        gap: 9px;

        background: transparent;

    }


    .pc-footer-newsletter-form input {

        height: 52px;

        border:
            1px solid
            rgba(243,241,236,.20);

        background:
            rgba(255,255,255,.035);

    }


    .pc-footer-newsletter-form button {

        width: 100%;

        height: 52px;

    }


    .pc-footer-bottom-inner {

        padding:
            18px;

    }


    .pc-footer-bottom-links {

        gap: 9px;

    }


    .pc-footer-bottom-links a {

        font-size: 10px;

    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 360px) {

        .pcc-info-track {

        grid-template-columns:
            1fr;
    }

    .pc-footer-inner {

        padding:
            42px 15px 34px;

    }


    .pc-footer-logo {

        font-size: 21px;

    }


    .pc-footer-logo-box {

        width: 35px;

        height: 35px;

        font-size: 24px;

    }


    .pc-footer-newsletter h3 {

        font-size: 25px;

    }


    .pc-footer-description,
    .pc-footer-newsletter > p {

        font-size: 13px;

    }


    .pc-footer-bottom p {

        font-size: 10px;

    }

}


/* =========================================================================
   POWERCORE — HOMEPAGE 2 CREATIVE SECTIONS
   Paste this ENTIRE block at the very end of assets/css/styles.css
   Everything below is scoped under .pcx-hm2 so it cannot touch
   index.html or any other existing page.
   Uses the same design tokens as the rest of the site:
   --pcx-bg / --pcx-bg-alt / --pcx-graphite / --pcx-text / --pcx-muted /
   --pcx-orange / --pcx-orange-hover / --pcx-line / --pcx-white /
   --pcx-section-space  (all already theme-aware via dark.css)
   ========================================================================= */

.pcx-hm2 {
    display: block;
    overflow-x: clip;
}

.pcx-hm2 section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--pcx-section-space) 0;
    background: var(--pcx-bg);
    color: var(--pcx-text);
}

.pcx-hm2 .pcx-hm2-wrap {
    width: min(1380px, calc(100% - 64px));
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

.pcx-hm2 h2 {
    margin: 0;
    color: var(--pcx-text);
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.pcx-hm2 h2 em {
    color: var(--pcx-orange);
    font-style: normal;
}

.pcx-hm2 p {
    color: var(--pcx-muted);
    font-size: 16.5px;
    line-height: 1.75;
    font-weight: 500;
}

.pcx-hm2-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--pcx-orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pcx-hm2-kicker::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--pcx-orange);
    box-shadow: 0 0 10px var(--pcx-orange);
}

.pcx-hm2-head {
    max-width: 720px;
    margin-bottom: 64px;
}

.pcx-hm2-head p {
    margin-top: 16px;
    max-width: 560px;
}

.pcx-hm2-head.pcx-hm2-center {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}

.pcx-hm2-head.pcx-hm2-center .pcx-hm2-kicker {
    justify-content: center;
    width: 100%;
}

.pcx-hm2-head.pcx-hm2-center p {
    margin-inline: auto;
}

/* generic scroll-reveal used across all hm2 sections */
.pcx-hm2 .pcx-hm2-rise {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1),
                transform .9s cubic-bezier(.16,1,.3,1);
}

.pcx-hm2 .pcx-hm2-rise.pcx-hm2-in {
    opacity: 1;
    transform: translateY(0);
}

.pcx-hm2 [style*="--d:"] { transition-delay: var(--d); }


/* =========================================================
   POWERCORE HOME 2
   SECTION 2 — POWER ARCHITECTURE
   ========================================================= */

.pc-h2-architecture {
    --arch-bg: #F7F5F1;
    --arch-surface: #FFFFFF;
    --arch-text: #202A30;
    --arch-muted: #596A73;
    --arch-orange: #FF8A00;
    --arch-orange-bright: #E87500;

    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;

    padding:
        clamp(90px, 9vw, 150px)
        0
        clamp(80px, 8vw, 130px);

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 138, 0, 0.10),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #171E22 0%,
            #202A30 48%,
            #111619 100%
        );

    color: var(--arch-text);

    isolation: isolate;
}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.pc-h2-arch-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 18%,
            black 82%,
            transparent
        );

    pointer-events: none;
    z-index: -3;
}


/* =========================================================
   ATMOSPHERIC ORANGE GLOWS
   ========================================================= */

.pc-h2-arch-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,0,.18) 0%,
            rgba(255,138,0,.06) 30%,
            transparent 70%
        );

    filter: blur(25px);

    pointer-events: none;

    z-index: -2;

    animation:
        pcH2ArchitectureGlow
        9s ease-in-out infinite alternate;
}

.pc-h2-arch-glow-one {
    top: 15%;
    left: -260px;
}

.pc-h2-arch-glow-two {
    right: -280px;
    bottom: 8%;

    animation-delay: -4s;
}

@keyframes pcH2ArchitectureGlow {

    from {
        transform: translate3d(0,0,0) scale(1);
    }

    to {
        transform: translate3d(35px,-25px,0) scale(1.12);
    }
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.pc-h2-arch-wrap {
    position: relative;
    z-index: 2;

    width: min(
        1440px,
        calc(100% - 80px)
    );

    margin-inline: auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.pc-h2-arch-intro {
    max-width: 760px;

    margin-inline: auto;
    margin-bottom:
        clamp(60px, 7vw, 105px);

    text-align: center;
}

.pc-h2-arch-index {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 20px;

    color: var(--arch-muted);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.pc-h2-arch-index span {
    color: var(--arch-orange);
}

.pc-h2-arch-index i {
    display: block;

    width: 48px;
    height: 1px;

    background: var(--arch-orange);

    box-shadow:
        0 0 12px rgba(255,138,0,.8);
}

.pc-h2-arch-intro h2 {
    margin: 0 auto;

    max-width: 760px;

    color: var(--arch-text);

    font-size:
        clamp(36px, 5vw, 70px);

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -.055em;
}

.pc-h2-arch-intro h2 span {
    display: block;

    color: var(--arch-orange);
}

.pc-h2-arch-intro p {
    max-width: 640px;

    margin:
        25px auto 0;

    color: var(--arch-muted);

    font-size:
        clamp(16px, 1.3vw, 19px);

    line-height: 1.75;

    font-weight: 500;
}


/* =========================================================
   THREE COLUMN SYSTEM
   ========================================================= */

.pc-h2-arch-system {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(230px, .8fr)
        minmax(460px, 1.4fr)
        minmax(230px, .8fr);

    align-items: center;

    gap: clamp(25px, 4vw, 70px);

    min-height: 680px;
}


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

.pc-h2-arch-column {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 90px;
}

.pc-h2-arch-left {
    padding-right: 20px;
}

.pc-h2-arch-right {
    padding-left: 20px;
}

.pc-h2-arch-line {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,138,0,.65) 20%,
            rgba(255,138,0,.18) 50%,
            rgba(255,138,0,.65) 80%,
            transparent
        );
}

.pc-h2-arch-left .pc-h2-arch-line {
    right: 0;
}

.pc-h2-arch-right .pc-h2-arch-line {
    left: 0;
}


/* =========================================================
   INFORMATION ITEMS
   ========================================================= */

.pc-h2-arch-info {
    position: relative;

    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 18px;

    padding: 0 0 0 0;

    transition:
        transform .35s ease;
}

.pc-h2-arch-info:hover {
    transform: translateY(-5px);
}

.pc-h2-arch-number {
    color: var(--arch-orange);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .1em;
}

.pc-h2-arch-label {
    display: block;

    margin-bottom: 9px;

    color: var(--arch-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}

.pc-h2-arch-info h3 {
    margin: 0 0 10px;

    color: var(--arch-text);

    font-size:
        clamp(21px, 1.7vw, 26px);

    line-height: 1.15;

    font-weight: 800;
}

.pc-h2-arch-info p {
    max-width: 280px;

    margin: 0;

    color: var(--arch-muted);

    font-size: 14px;

    line-height: 1.75;

    font-weight: 500;
}


/* =========================================================
   CENTRAL GENERATOR VISUAL
   ========================================================= */

.pc-h2-arch-visual {
    position: relative;

    min-height: 660px;

    display: flex;

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


/* =========================================================
   CORE GLOW
   ========================================================= */

.pc-h2-arch-core-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,0,.25) 0%,
            rgba(255,138,0,.12) 26%,
            rgba(255,138,0,.035) 48%,
            transparent 70%
        );

    filter: blur(12px);

    animation:
        pcH2ArchCorePulse
        4.5s ease-in-out infinite;
}

@keyframes pcH2ArchCorePulse {

    0%,
    100% {
        transform: scale(.94);
        opacity: .75;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


/* =========================================================
   TECHNICAL RINGS
   ========================================================= */

.pc-h2-arch-ring {
    position: absolute;

    border: 1px solid
        rgba(255,138,0,.28);

    border-radius: 50%;

    pointer-events: none;
}

.pc-h2-arch-ring-one {
    width: 470px;
    height: 470px;

    animation:
        pcH2ArchRotate
        18s linear infinite;
}

.pc-h2-arch-ring-two {
    width: 570px;
    height: 570px;

    border-style: dashed;

    opacity: .45;

    animation:
        pcH2ArchRotateReverse
        25s linear infinite;
}

.pc-h2-arch-ring-three {
    width: 650px;
    height: 650px;

    border-color:
        rgba(255,138,0,.11);

    animation:
        pcH2ArchRotate
        34s linear infinite;
}

@keyframes pcH2ArchRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pcH2ArchRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* =========================================================
   GENERATOR IMAGE
   ========================================================= */

.pc-h2-arch-image-wrap {
    position: relative;

    width: min(650px, 100%);

    z-index: 5;

    animation:
        pcH2ArchitectureFloat
        5.5s ease-in-out infinite;
}

.pc-h2-arch-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 45px rgba(0,0,0,.5))
        drop-shadow(0 0 25px rgba(255,138,0,.18));
}

@keyframes pcH2ArchitectureFloat {

    0%,
    100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(0,-16px,0);
    }
}


/* =========================================================
   GLOWING ENERGY NODES
   ========================================================= */

.pc-h2-arch-node {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--arch-orange);

    box-shadow:
        0 0 8px var(--arch-orange),
        0 0 24px var(--arch-orange),
        0 0 50px rgba(255,138,0,.65);

    z-index: 8;

    animation:
        pcH2ArchNodePulse
        2s ease-in-out infinite alternate;
}

.pc-h2-node-one {
    top: 29%;
    left: 17%;
}

.pc-h2-node-two {
    top: 17%;
    right: 20%;
    animation-delay: -.5s;
}

.pc-h2-node-three {
    bottom: 29%;
    left: 22%;
    animation-delay: -1s;
}

.pc-h2-node-four {
    bottom: 22%;
    right: 17%;
    animation-delay: -1.5s;
}

@keyframes pcH2ArchNodePulse {

    from {
        transform: scale(.65);
        opacity: .55;
    }

    to {
        transform: scale(1.4);
        opacity: 1;
    }
}


/* =========================================================
   TECHNICAL READOUTS
   ========================================================= */

.pc-h2-arch-readout {
    position: absolute;

    z-index: 10;

    display: grid;

    grid-template-columns: 7px auto;

    column-gap: 9px;

    align-items: center;

    padding: 8px 12px;

    background: rgba(15,19,22,.72);

    border-left: 1px solid
        rgba(255,138,0,.5);

    backdrop-filter: blur(10px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);
}

.pc-h2-arch-readout span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--arch-orange);

    box-shadow:
        0 0 10px var(--arch-orange);
}

.pc-h2-arch-readout strong {
    color: var(--arch-text);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
}

.pc-h2-arch-readout small {
    grid-column: 2;

    color: var(--arch-orange);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;
}

.pc-h2-readout-one {
    top: 18%;
    left: 0;
}

.pc-h2-readout-two {
    top: 54%;
    right: -4%;
}

.pc-h2-readout-three {
    bottom: 14%;
    left: 5%;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.pc-h2-arch-timeline {
    margin-top:
        clamp(45px, 6vw, 90px);

    padding-top: 36px;

    border-top: 1px solid
        rgba(243,241,236,.10);
}

.pc-h2-arch-timeline-heading {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    gap: 25px;

    margin-bottom: 35px;
}

.pc-h2-arch-timeline-heading span {
    color: var(--arch-orange);

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

    letter-spacing: .17em;
}

.pc-h2-arch-timeline-heading strong {
    color: var(--arch-muted);

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

    letter-spacing: .12em;
}


/* =========================================================
   TIMELINE TRACK
   ========================================================= */

.pc-h2-arch-track {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    min-height: 80px;
}

.pc-h2-arch-track::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 0;
    right: 0;

    height: 1px;

    background:
        rgba(243,241,236,.16);
}


/* =========================================================
   POWER FLOW — THICK PROGRESSIVE GLOW
   ========================================================= */

.pc-h2-arch-progress {
    position: absolute;

    top: 5px;
    left: 0;

    width: 0;
    height: 5px;

    background: #FF8A00;

    border-radius: 0 4px 4px 0;

    box-shadow:
        0 0 5px rgba(255, 138, 0, 1),
        0 0 12px rgba(255, 138, 0, .95),
        0 0 24px rgba(255, 138, 0, .75),
        0 0 45px rgba(255, 138, 0, .45);

    transition:
        width 2.8s cubic-bezier(.16, 1, .3, 1);

    z-index: 3;
}


/* Moving bright energy head */

.pc-h2-arch-progress::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -7px;

    width: 14px;
    height: 14px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #FFB14A;

    box-shadow:
        0 0 6px #FFB14A,
        0 0 15px #FF8A00,
        0 0 30px #FF8A00,
        0 0 55px rgba(255, 138, 0, .8);

    animation:
        pcH2TimelineHead
        1.1s ease-in-out infinite alternate;
}


@keyframes pcH2TimelineHead {

    from {
        transform: translateY(-50%) scale(.8);
        opacity: .75;
    }

    to {
        transform: translateY(-50%) scale(1.25);
        opacity: 1;
    }
}


/* Make the base track slightly thicker */

.pc-h2-arch-track::before {
    height: 2px;

    background:
        rgba(243, 241, 236, .18);
}


/* Timeline nodes become stronger */

.pc-h2-arch-step.is-active
.pc-h2-arch-step-dot {
    width: 11px;
    height: 11px;

    background: #FF8A00;

    border-color: #FF8A00;

    box-shadow:
        0 0 7px #FF8A00,
        0 0 16px #FF8A00,
        0 0 32px rgba(255, 138, 0, .8);
}
/* =========================================================
   TIMELINE STEPS
   ========================================================= */

.pc-h2-arch-step {
    position: relative;

    padding-top: 27px;

    opacity: .55;

    transition:
        opacity .4s ease,
        transform .4s ease;
}

.pc-h2-arch-step.is-active {
    opacity: 1;

    transform: translateY(-3px);
}

.pc-h2-arch-step-dot {
    position: absolute;

    top: 4px;
    left: 0;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--arch-bg);

    border: 1px solid
        rgba(243,241,236,.35);

    z-index: 4;

    transition:
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.pc-h2-arch-step.is-active
.pc-h2-arch-step-dot {
    background: var(--arch-orange);

    border-color: var(--arch-orange);

    box-shadow:
        0 0 8px var(--arch-orange),
        0 0 25px rgba(255,138,0,.75);
}

.pc-h2-arch-step strong {
    display: block;

    margin-bottom: 5px;

    color: var(--arch-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
}

.pc-h2-arch-step div span {
    color: var(--arch-text);

    font-size:
        clamp(15px, 1.2vw, 18px);

    font-weight: 700;
}


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

.pc-h2-arch-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 50px;
}

.pc-h2-arch-button {
    display: inline-flex;

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

    gap: 12px;

    min-height: 50px;

    padding: 0 22px;

    border: 1px solid transparent;

    text-decoration: none !important;

    font-family: "Manrope", sans-serif;

    font-size: 14px;
    font-weight: 800;

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

.pc-h2-arch-button:hover {
    transform: translateY(-3px);
}

.pc-h2-arch-button-primary {
    background: var(--arch-orange);

    color: #101619 !important;

    box-shadow:
        0 10px 30px rgba(255,138,0,.18);
}

.pc-h2-arch-button-primary:hover {
    background: var(--arch-orange-bright);
}

.pc-h2-arch-button-secondary {
    color: var(--arch-text) !important;

    border-color:
        rgba(243,241,236,.28);
}

.pc-h2-arch-button-secondary:hover {
    border-color: var(--arch-orange);

    color: var(--arch-orange) !important;
}


/* =========================================================
   SCROLL REVEAL STATES
   ========================================================= */

.pc-h2-arch-reveal {
    opacity: 0;

    transform:
        translate3d(0,55px,0);

    transition:
        opacity .85s cubic-bezier(.16,1,.3,1),
        transform .85s cubic-bezier(.16,1,.3,1);

    transition-delay:
        var(--arch-delay, 0s);
}

.pc-h2-arch-reveal.is-visible {
    opacity: 1;

    transform:
        translate3d(0,0,0);
}

.pc-h2-arch-left
.pc-h2-arch-reveal {
    transform:
        translate3d(-70px,35px,0);
}

.pc-h2-arch-right
.pc-h2-arch-reveal {
    transform:
        translate3d(70px,35px,0);
}

.pc-h2-arch-left
.pc-h2-arch-reveal.is-visible,
.pc-h2-arch-right
.pc-h2-arch-reveal.is-visible {
    transform:
        translate3d(0,0,0);
}

.pc-h2-arch-timeline {
    transform:
        translate3d(120px,0,0);
}

.pc-h2-arch-timeline.is-visible {
    transform:
        translate3d(0,0,0);
}


/* =========================================================
   TABLET — 768px–991px
   ========================================================= */

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

    .pc-h2-arch-wrap {
        width: min(
            calc(100% - 48px),
            900px
        );
    }

    .pc-h2-arch-system {
        grid-template-columns:
            1fr 1.45fr 1fr;

        gap: 20px;

        min-height: 590px;
    }

    .pc-h2-arch-visual {
        min-height: 570px;
    }

    .pc-h2-arch-ring-one {
        width: 370px;
        height: 370px;
    }

    .pc-h2-arch-ring-two {
        width: 450px;
        height: 450px;
    }

    .pc-h2-arch-ring-three {
        width: 510px;
        height: 510px;
    }

    .pc-h2-arch-info {
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }

    .pc-h2-arch-info p {
        font-size: 13px;
    }

    .pc-h2-arch-readout {
        transform: scale(.85);
    }
}


/* =========================================================
   LAPTOP — 992px–1199px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .pc-h2-arch-wrap {
        width: min(
            calc(100% - 60px),
            1120px
        );
    }

    .pc-h2-arch-system {
        grid-template-columns:
            minmax(200px,.8fr)
            minmax(380px,1.4fr)
            minmax(200px,.8fr);

        gap: 30px;
    }

    .pc-h2-arch-ring-one {
        width: 420px;
        height: 420px;
    }

    .pc-h2-arch-ring-two {
        width: 500px;
        height: 500px;
    }

    .pc-h2-arch-ring-three {
        width: 570px;
        height: 570px;
    }
}


/* =========================================================
   LAPTOP-L — 1200px–1439px
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1439px) {

    .pc-h2-arch-wrap {
        width: min(
            calc(100% - 70px),
            1320px
        );
    }
}


/* =========================================================
   DESKTOP — 1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .pc-h2-arch-wrap {
        width: min(
            1440px,
            calc(100% - 100px)
        );
    }

    .pc-h2-arch-system {
        min-height: 720px;
    }
}


/* =========================================================
   MOBILE-L — 576px–767px
   ========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .pc-h2-arch-wrap {
        width: calc(100% - 38px);
    }

    .pc-h2-arch-system {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 45px;
    }

    .pc-h2-arch-visual {
        order: 1;
        min-height: 440px;
    }

    .pc-h2-arch-left {
        order: 2;
    }

    .pc-h2-arch-right {
        order: 3;
    }

    .pc-h2-arch-column {
        gap: 42px;
    }

    .pc-h2-arch-left,
    .pc-h2-arch-right {
        padding: 0;
    }

    .pc-h2-arch-line {
        display: none;
    }

    .pc-h2-arch-ring-one {
        width: 320px;
        height: 320px;
    }

    .pc-h2-arch-ring-two {
        width: 390px;
        height: 390px;
    }

    .pc-h2-arch-ring-three {
        width: 450px;
        height: 450px;
    }

    .pc-h2-arch-readout {
        transform: scale(.8);
    }

    .pc-h2-arch-timeline-heading {
        flex-direction: column;
        gap: 8px;
    }

    .pc-h2-arch-actions {
        flex-wrap: wrap;
    }
}


/* =========================================================
   MOBILE-M — 400px–575px
   ========================================================= */

@media (min-width: 400px) and (max-width: 575px) {

    .pc-h2-arch-wrap {
        width: calc(100% - 30px);
    }

    .pc-h2-arch-system {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 35px;
    }

    .pc-h2-arch-visual {
        order: 1;

        min-height: 350px;
    }

    .pc-h2-arch-left {
        order: 2;
    }

    .pc-h2-arch-right {
        order: 3;
    }

    .pc-h2-arch-column {
        gap: 38px;
    }

    .pc-h2-arch-left,
    .pc-h2-arch-right {
        padding: 0;
    }

    .pc-h2-arch-line {
        display: none;
    }

    .pc-h2-arch-ring-one {
        width: 260px;
        height: 260px;
    }

    .pc-h2-arch-ring-two {
        width: 320px;
        height: 320px;
    }

    .pc-h2-arch-ring-three {
        width: 370px;
        height: 370px;
    }

    .pc-h2-arch-readout {
        transform: scale(.68);
    }

    .pc-h2-readout-one {
        left: -18px;
    }

    .pc-h2-readout-two {
        right: -18px;
    }

    .pc-h2-readout-three {
        left: -8px;
    }

    .pc-h2-arch-timeline-heading {
        flex-direction: column;
        gap: 8px;
    }

    .pc-h2-arch-track {
        grid-template-columns: 1fr;

        gap: 25px;

        padding-left: 14px;
    }

    .pc-h2-arch-track::before {
        top: 0;
        bottom: 0;
        left: 3px;

        width: 1px;
        height: auto;
    }

    .pc-h2-arch-progress {
        top: 0;
        bottom: auto;
        left: 2px;

        width: 3px !important;
        height: 0;

        background:
            linear-gradient(
                to bottom,
                var(--arch-orange),
                transparent
            );

        transition:
            height 1.5s cubic-bezier(.16,1,.3,1);
    }

    .pc-h2-arch-step {
        padding-top: 0;
        padding-left: 18px;
    }

    .pc-h2-arch-step-dot {
        top: 2px;
        left: -1px;
    }

    .pc-h2-arch-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pc-h2-arch-button {
        width: 100%;
    }
}


/* =========================================================
   MOBILE-S — 399px AND BELOW
   ========================================================= */

@media (max-width: 399px) {

    .pc-h2-arch-wrap {
        width: calc(100% - 24px);
    }

    .pc-h2-architecture {
        padding-top: 75px;
        padding-bottom: 70px;
    }

    .pc-h2-arch-system {
        grid-template-columns: 1fr;

        min-height: auto;

        gap: 32px;
    }

    .pc-h2-arch-visual {
        order: 1;

        min-height: 300px;
    }

    .pc-h2-arch-left {
        order: 2;
    }

    .pc-h2-arch-right {
        order: 3;
    }

    .pc-h2-arch-left,
    .pc-h2-arch-right {
        padding: 0;
    }

    .pc-h2-arch-line {
        display: none;
    }

    .pc-h2-arch-ring-one {
        width: 220px;
        height: 220px;
    }

    .pc-h2-arch-ring-two {
        width: 275px;
        height: 275px;
    }

    .pc-h2-arch-ring-three {
        width: 320px;
        height: 320px;
    }

    .pc-h2-arch-readout {
        transform: scale(.56);
    }

    .pc-h2-arch-track {
        grid-template-columns: 1fr;

        gap: 24px;

        padding-left: 14px;
    }

    .pc-h2-arch-track::before {
        top: 0;
        bottom: 0;
        left: 3px;

        width: 1px;
        height: auto;
    }

    .pc-h2-arch-progress {
        top: 0;
        left: 2px;

        width: 3px !important;
        height: 0;

        background:
            linear-gradient(
                to bottom,
                var(--arch-orange),
                transparent
            );

        transition:
            height 1.5s cubic-bezier(.16,1,.3,1);
    }

    .pc-h2-arch-step {
        padding-top: 0;
        padding-left: 18px;
    }

    .pc-h2-arch-step-dot {
        top: 2px;
        left: -1px;
    }

    .pc-h2-arch-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pc-h2-arch-button {
        width: 100%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-h2-arch-image-wrap,
    .pc-h2-arch-glow,
    .pc-h2-arch-ring,
    .pc-h2-arch-node {
        animation: none;
    }

    .pc-h2-arch-reveal {
        opacity: 1;
        transform: none !important;
        transition: none;
    }
}
/* =========================================================================
   POWERCORE — HOMEPAGE 2 — SECTION 3 GALLERY (V-shape skyline)
   Paste at the end of assets/css/styles.css — replaces the previous
   gallery-v CSS block entirely (this version fixes the missing heading
   and the empty top gap, and increases all tile heights).
   Scoped entirely to .pcx-hm2-gallery / .pcx-hm2-gallery-v* — nothing
   else on the page is touched.
   Uses the same tokens as the rest of the site: --pcx-bg-alt / --pcx-line /
   --pcx-orange / --pcx-orange-hover.
   ========================================================================= */

/* tighter top padding just for this section — the generic
   var(--pcx-section-space) on .pcx-hm2 section was leaving too much
   empty air above the heading */
.pcx-hm2-gallery {
    padding-top: clamp(56px, 7vw, 96px);
}

/* heading — self-contained, animates in on load, does NOT depend on
   any scroll-reveal script, so it is guaranteed to be visible */
.pcx-hm2-gallery-v-head {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
    opacity: 0;
    transform: translateY(24px);
    animation: pcxHm2GalleryHeadIn .9s cubic-bezier(.16,1,.3,1) .1s forwards;
}

.pcx-hm2-gallery-v-head .pcx-hm2-kicker {
    justify-content: center;
    width: 100%;
}

.pcx-hm2-gallery-v-head p {
    margin: 16px auto 0;
    max-width: 560px;
}

@keyframes pcxHm2GalleryHeadIn {
    to { opacity: 1; transform: translateY(0); }
}


/* =========================================================================
   THE V GRID
   ========================================================================= */

.pcx-hm2-gallery-v {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    gap: clamp(12px, 2.2vw, 28px);
}

.pcx-hm2-gallery-v-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--pcx-line);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    transition: transform .45s cubic-bezier(.16,1,.3,1),
                box-shadow .45s ease;
}

.pcx-hm2-gallery-v-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, filter .6s ease;
    filter: saturate(.95);
}

.pcx-hm2-gallery-v-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(255,138,0,.28);
}

.pcx-hm2-gallery-v-item:hover img {
    transform: scale(1.08);
    filter: saturate(1.1);
}

/* the V — center shortest, each ring outward taller, mirrored.
   Heights increased from the previous version, same ratio kept. */
.pcx-hm2-gallery-v-md { height: clamp(240px, 26vw, 320px); }
.pcx-hm2-gallery-v-lg { height: clamp(320px, 34vw, 420px); }
.pcx-hm2-gallery-v-xl { height: clamp(400px, 42vw, 520px); }

/* scroll-in reveal: rises AND grows from the shared bottom line */
.pcx-hm2-gallery-v-item {
    opacity: 0;
    transform-origin: bottom;
    transform: scaleY(.6) translateY(20px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1),
                transform .8s cubic-bezier(.16,1,.3,1),
                box-shadow .45s ease;
}

.pcx-hm2-gallery-v-item.pcx-hm2-in {
    opacity: 1;
    transform: scaleY(1) translateY(0);
}

.pcx-hm2-gallery-v-item.pcx-hm2-in:hover {
    transform: scaleY(1) translateY(-8px);
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 991px) {
    .pcx-hm2-gallery-v { grid-template-columns: repeat(5, 1fr); gap: 10px; }
    .pcx-hm2-gallery-v-item { border-radius: 14px; }
    .pcx-hm2-gallery-v-md { height: clamp(200px, 24vw, 260px); }
    .pcx-hm2-gallery-v-lg { height: clamp(260px, 30vw, 340px); }
    .pcx-hm2-gallery-v-xl { height: clamp(320px, 38vw, 420px); }
}

@media (max-width: 767px) {
    .pcx-hm2-gallery { padding-top: clamp(44px, 10vw, 72px); }
    .pcx-hm2-gallery-v-head { margin-bottom: 30px; }
    .pcx-hm2-gallery-v {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pcx-hm2-gallery-v-item.pcx-hm2-gallery-v-md,
    .pcx-hm2-gallery-v-item.pcx-hm2-gallery-v-lg,
    .pcx-hm2-gallery-v-item.pcx-hm2-gallery-v-xl {
        height: clamp(220px, 62vw, 320px);
    }
    .pcx-hm2-gallery-v-item,
    .pcx-hm2-gallery-v-item.pcx-hm2-in,
    .pcx-hm2-gallery-v-item:hover,
    .pcx-hm2-gallery-v-item.pcx-hm2-in:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .pcx-hm2-gallery-v { gap: 6px; }
    .pcx-hm2-gallery-v-item { border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pcx-hm2-gallery-v-head { animation: none !important; opacity: 1; transform: none; }
    .pcx-hm2-gallery-v-item { transition: opacity .2s ease !important; transform: none !important; }
}
/* =========================================================
   POWERCORE HOME 2 — HERO
   ========================================================= */

.pc-h2-hero {
    position: relative;
    min-height: calc(100vh - 78px);
    width: 100%;
    overflow: hidden;
    background: #202A30;
    color: #F7F5F1;
    isolation: isolate;
}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.pc-h2-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    filter: blur(40px);
}

.pc-h2-glow-one {
    width: 600px;
    height: 600px;
    right: 8%;
    top: 5%;
    background: rgba(255, 138, 0, 0.16);
}

.pc-h2-glow-two {
    width: 420px;
    height: 420px;
    left: 22%;
    bottom: -20%;
    background: rgba(255, 138, 0, 0.08);
}


/* =========================================================
   TECHNICAL GRID
   ========================================================= */

.pc-h2-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.15;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 138, 0, 0.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 138, 0, 0.18) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 45%,
        black 100%
    );
}


/* =========================================================
   HERO INNER
   ========================================================= */

.pc-h2-hero-inner {
    position: relative;
    z-index: 2;

    width: min(1500px, 94%);
    min-height: calc(100vh - 125px);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 43% 57%;
    align-items: center;
    gap: 0;
}


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

.pc-h2-hero-content {
    position: relative;
    z-index: 5;
    padding: 30px 0 70px 20px;
}

.pc-h2-hero-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: #FF8A00;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pc-h2-hero-kicker span {
    width: 32px;
    height: 2px;
    background: #FF8A00;
    box-shadow: 0 0 12px rgba(255, 138, 0, 0.8);
}


.pc-h2-hero-title {
    max-width: 700px;
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(46px, 5vw, 78px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.055em;

    color: #15252B;
}

.pc-h2-hero-title strong {
    display: block;
    color: #FF8A00;
    font-weight: 800;

    text-shadow:
        0 0 18px rgba(255, 138, 0, 0.35),
        0 0 45px rgba(255, 138, 0, 0.15);
}


.pc-h2-hero-description {
    max-width: 610px;

    margin: 30px 0 0;

    color: #C8D0D3;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 500;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.pc-h2-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}

.pc-h2-hero-primary,
.pc-h2-hero-secondary {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    padding: 0 23px;

    font-size: 15px;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.pc-h2-hero-primary {
    background: #FF8A00;
    color: #202A30;

    box-shadow:
        0 0 18px rgba(255, 138, 0, 0.42),
        0 0 45px rgba(255, 138, 0, 0.16);
}

.pc-h2-hero-primary:hover {
    background: #E87500;
    transform: translateY(-3px);
    color: #202A30;
}

.pc-h2-hero-secondary {
    border: 1px solid #FF8A00;
    color: #202A30;
    background: #FF8A00;
    box-shadow:
        0 0 18px rgba(255, 138, 0, 0.42),
        0 0 45px rgba(255, 138, 0, 0.16);
}

.pc-h2-hero-secondary:hover {
    border-color: #E87500;
    color: #202A30;
    background: #E87500;
    transform: translateY(-3px);
}


/* =========================================================
   METRICS
   ========================================================= */

.pc-h2-hero-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    margin-top: 58px;
}

.pc-h2-metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pc-h2-metric strong {
    color: #FF8A00;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.pc-h2-metric span {
    color: #AEB9BD;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pc-h2-metric-line {
    width: 1px;
    height: 35px;
    margin: 0 24px;
    background: rgba(255, 255, 255, 0.2);
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.pc-h2-hero-visual {
    position: relative;

    min-height: 720px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   GENERATOR GLOW
   ========================================================= */

.pc-h2-generator-glow {
    position: absolute;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 138, 0, 0.35) 0%,
            rgba(255, 138, 0, 0.18) 28%,
            rgba(255, 138, 0, 0.06) 50%,
            transparent 72%
        );

    filter: blur(15px);

    animation: pcH2GlowPulse 4s ease-in-out infinite;
}

@keyframes pcH2GlowPulse {

    0%,
    100% {
        transform: scale(0.95);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


/* =========================================================
   ROTATING TECHNICAL RINGS
   ========================================================= */

.pc-h2-tech-ring {
    position: absolute;

    border: 1px solid rgba(255, 138, 0, 0.28);
    border-radius: 50%;

    pointer-events: none;
}

.pc-h2-ring-one {
    width: 610px;
    height: 610px;

    animation: pcH2Rotate 22s linear infinite;
}

.pc-h2-ring-two {
    width: 510px;
    height: 510px;

    border-style: dashed;
    border-color: rgba(255, 138, 0, 0.2);

    animation: pcH2RotateReverse 17s linear infinite;
}

.pc-h2-ring-three {
    width: 700px;
    height: 280px;

    transform: rotate(-18deg);

    border-color: rgba(255, 138, 0, 0.16);

    animation: pcH2Orbit 10s ease-in-out infinite;
}

@keyframes pcH2Rotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pcH2RotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes pcH2Orbit {

    0%,
    100% {
        transform: rotate(-18deg) scale(1);
    }

    50% {
        transform: rotate(-8deg) scale(1.04);
    }
}


/* =========================================================
   GENERATOR IMAGE
   ========================================================= */

.pc-h2-generator-wrap {
    position: relative;
    z-index: 5;

    width: min(760px, 95%);

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

    animation: pcH2GeneratorFloat 5s ease-in-out infinite;
}

.pc-h2-generator-image {
    display: block;

    width: 100%;
    max-width: 760px;
    height: auto;

    object-fit: contain;

    /* removes visible rectangular image background */
    mix-blend-mode: screen;

    filter:
        drop-shadow(0 0 12px rgba(255, 138, 0, 0.65))
        drop-shadow(0 0 35px rgba(255, 138, 0, 0.3));

    animation: pcH2GeneratorRotate 8s ease-in-out infinite;
}


/*
   IMPORTANT:
   The image itself must have a transparent background.
   mix-blend-mode helps with dark/black backgrounds but
   cannot remove an actual white background from an image.
*/

@keyframes pcH2GeneratorFloat {

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

    50% {
        transform: translateY(-14px);
    }
}

@keyframes pcH2GeneratorRotate {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-1deg) scale(1.015);
    }

    75% {
        transform: rotate(1deg) scale(1.015);
    }
}


/* =========================================================
   FLOATING TECH PARTS
   ========================================================= */

.pc-h2-floating-part {
    position: absolute;
    z-index: 8;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 16px;

    border-left: 2px solid #FF8A00;

    background: rgba(32, 42, 48, 0.72);

    box-shadow:
        0 0 20px rgba(255, 138, 0, 0.08);

    backdrop-filter: blur(8px);

    animation: pcH2PartFloat 4s ease-in-out infinite;
}

.pc-h2-floating-part strong {
    display: block;

    color: #F7F5F1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pc-h2-floating-part small {
    display: block;

    margin-top: 3px;

    color: #FF8A00;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.pc-h2-part-icon {
    color: #FF8A00;
    font-size: 19px;

    text-shadow:
        0 0 12px rgba(255, 138, 0, 0.8);
}

.pc-h2-part-one {
    top: 18%;
    right: 3%;
}

.pc-h2-part-two {
    top: 47%;
    left: 2%;

    animation-delay: -1.4s;
}

.pc-h2-part-three {
    bottom: 18%;
    right: 8%;

    animation-delay: -2.6s;
}

@keyframes pcH2PartFloat {

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

    50% {
        transform: translateY(-12px);
    }
}


/* =========================================================
   LOAD METER
   ========================================================= */

.pc-h2-load-meter {
    position: absolute;
    z-index: 9;

    right: -5px;
    top: 27%;

    width: 74px;

    padding: 14px 10px;

    border: 1px solid rgba(255, 138, 0, 0.35);

    background: rgba(32, 42, 48, 0.7);

    backdrop-filter: blur(8px);
}

.pc-h2-load-title {
    color: #AEB9BD;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pc-h2-load-title span {
    display: block;
}

.pc-h2-load-bars {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;

    margin: 10px 0;
}

.pc-h2-load-bars span {
    width: 100%;
    height: 5px;

    background: rgba(255, 138, 0, 0.12);
}

.pc-h2-load-bars span:nth-child(-n + 9) {
    background: #FF8A00;

    box-shadow:
        0 0 8px rgba(255, 138, 0, 0.45);
}

.pc-h2-load-meter > strong {
    color: #FF8A00;
    font-size: 17px;
    font-weight: 800;
}


/* =========================================================
   CIRCUIT LINES
   ========================================================= */

.pc-h2-circuit {
    position: absolute;
    height: 1px;
    background: #FF8A00;

    box-shadow:
        0 0 8px rgba(255, 138, 0, 0.8),
        0 0 20px rgba(255, 138, 0, 0.4);

    opacity: 0.65;
}

.pc-h2-circuit-one {
    width: 110px;
    top: 32%;
    right: 15%;
}

.pc-h2-circuit-two {
    width: 90px;
    bottom: 31%;
    left: 11%;
}

.pc-h2-circuit-three {
    width: 65px;
    top: 58%;
    right: 3%;
}


/* =========================================================
   PARTICLES
   ========================================================= */

.pc-h2-particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 8px #FF8A00,
        0 0 18px rgba(255, 138, 0, 0.7);

    z-index: 1;

    animation: pcH2ParticleFloat 4s ease-in-out infinite;
}

.pc-h2-particle-1 {
    top: 22%;
    right: 39%;
}

.pc-h2-particle-2 {
    top: 42%;
    right: 26%;
    animation-delay: -1s;
}

.pc-h2-particle-3 {
    top: 65%;
    right: 43%;
    animation-delay: -2s;
}

.pc-h2-particle-4 {
    top: 30%;
    right: 14%;
    animation-delay: -0.5s;
}

.pc-h2-particle-5 {
    bottom: 22%;
    right: 31%;
    animation-delay: -2.5s;
}

.pc-h2-particle-6 {
    bottom: 35%;
    right: 48%;
    animation-delay: -1.5s;
}

@keyframes pcH2ParticleFloat {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-22px);
        opacity: 1;
    }
}


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

.pc-h2-hero-bottom {
    position: absolute;

    left: 3%;
    right: 3%;
    bottom: 22px;

    z-index: 10;

    display: flex;
    align-items: center;
    gap: 16px;

    color: #91A0A6;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.pc-h2-bottom-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 138, 0, 0.3);
}

.pc-h2-hero-bottom span:last-child {
    color: #FF8A00;
}


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

@media (max-width: 1100px) {

    .pc-h2-hero-inner {
        grid-template-columns: 45% 55%;
        width: 94%;
    }

    .pc-h2-hero-content {
        padding-left: 10px;
    }

    .pc-h2-hero-title {
        font-size: clamp(42px, 5vw, 62px);
    }

    .pc-h2-hero-description {
        font-size: 17px;
    }

    .pc-h2-generator-glow {
        width: 500px;
        height: 500px;
    }

    .pc-h2-ring-one {
        width: 500px;
        height: 500px;
    }

    .pc-h2-ring-two {
        width: 430px;
        height: 430px;
    }

    .pc-h2-floating-part {
        transform: scale(0.9);
    }

    .pc-h2-part-one {
        right: 0;
    }

    .pc-h2-load-meter {
        right: -10px;
    }
}


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

@media (max-width: 850px) {

    .pc-h2-hero {
        min-height: auto;
    }

    .pc-h2-hero-inner {
        min-height: auto;

        display: flex;
        flex-direction: column;

        width: 92%;
    }

    .pc-h2-hero-content {
        width: 100%;
        padding: 65px 0 25px;
        text-align: center;
    }

    .pc-h2-hero-kicker {
        justify-content: center;
    }

    .pc-h2-hero-title {
        max-width: 700px;
        margin: auto;

        font-size: clamp(40px, 8vw, 56px);
    }

    .pc-h2-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .pc-h2-hero-actions {
        justify-content: center;
    }

    .pc-h2-hero-metrics {
        justify-content: center;
        margin-top: 40px;
    }

    .pc-h2-hero-visual {
        width: 100%;
        min-height: 540px;
    }

    .pc-h2-generator-wrap {
        width: 92%;
    }

    .pc-h2-generator-glow {
        width: 440px;
        height: 440px;
    }

    .pc-h2-ring-one {
        width: 430px;
        height: 430px;
    }

    .pc-h2-ring-two {
        width: 360px;
        height: 360px;
    }

    .pc-h2-part-one {
        top: 10%;
        right: 0;
    }

    .pc-h2-part-two {
        left: 0;
        top: 45%;
    }

    .pc-h2-part-three {
        right: 2%;
        bottom: 10%;
    }

    .pc-h2-load-meter {
        right: 0;
        top: 28%;
    }

    .pc-h2-hero-bottom {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 92%;
        margin: 0 auto 22px;

        font-size: 9px;
    }
}


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

@media (max-width: 600px) {

    .pc-h2-hero-content {
        padding-top: 48px;
    }

    .pc-h2-hero-kicker {
        font-size: 12px;
    }

    .pc-h2-hero-title {
        font-size: clamp(35px, 10vw, 46px);
        line-height: 1.02;
    }

    .pc-h2-hero-description {
        font-size: 16px;
        line-height: 1.65;
    }

    .pc-h2-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .pc-h2-hero-primary,
    .pc-h2-hero-secondary {
        width: 100%;
        max-width: 330px;
    }

    .pc-h2-hero-metrics {
        gap: 15px;
    }

    .pc-h2-metric-line {
        margin: 0 7px;
        height: 30px;
    }

    .pc-h2-metric strong {
        font-size: 19px;
    }

    .pc-h2-metric span {
        font-size: 9px;
    }

    .pc-h2-hero-visual {
        min-height: 430px;
    }

    .pc-h2-generator-wrap {
        width: 105%;
    }

    .pc-h2-generator-glow {
        width: 350px;
        height: 350px;
    }

    .pc-h2-ring-one {
        width: 350px;
        height: 350px;
    }

    .pc-h2-ring-two {
        width: 290px;
        height: 290px;
    }

    .pc-h2-floating-part {
        padding: 9px 10px;
    }

    .pc-h2-floating-part strong {
        font-size: 8px;
    }

    .pc-h2-floating-part small {
        font-size: 7px;
    }

    .pc-h2-part-two {
        left: -5px;
    }

    .pc-h2-load-meter {
        width: 58px;
        padding: 10px 7px;
    }

    .pc-h2-load-meter > strong {
        font-size: 14px;
    }

    .pc-h2-hero-bottom {
        gap: 8px;
        letter-spacing: 0.08em;
    }

    .pc-h2-hero-bottom span:first-child {
        display: none;
    }
}


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

@media (max-width: 400px) {

    .pc-h2-hero-title {
        font-size: 34px;
    }

    .pc-h2-hero-description {
        font-size: 15px;
    }

    .pc-h2-hero-visual {
        min-height: 370px;
    }

    .pc-h2-generator-glow {
        width: 290px;
        height: 290px;
    }

    .pc-h2-ring-one {
        width: 290px;
        height: 290px;
    }

    .pc-h2-ring-two {
        width: 240px;
        height: 240px;
    }

    .pc-h2-floating-part {
        transform: scale(0.78);
    }

    .pc-h2-part-one {
        right: -15px;
    }

    .pc-h2-part-two {
        left: -20px;
    }

    .pc-h2-part-three {
        right: -15px;
    }

    .pc-h2-load-meter {
        display: none;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-h2-generator-wrap,
    .pc-h2-generator-image,
    .pc-h2-tech-ring,
    .pc-h2-floating-part,
    .pc-h2-particle,
    .pc-h2-generator-glow {
        animation: none !important;
    }
}

/* HOME2 SECTION 2 — CENTERED INTRO */

.pc-h2-arch-intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pc-h2-arch-intro h2,
.pc-h2-arch-intro p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HOME 2 — PERFORMANCE STATS
   ========================================================= */

.pc-h2-stats {

    position: relative;

    width: 100%;

    height: 300px;
    min-height: 300px;

    overflow: hidden;

    isolation: isolate;

    /*
     * POWERCORE ELECTRIC ORANGE
     * Same visual family as Home 1 marquee.
     */
    background: #FF8A00;

    color: #202A30;
}


/* =========================================================
   TECHNICAL GRID
   ========================================================= */

.pc-h2-stats-grid {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(32, 42, 48, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 42, 48, .08) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    opacity: .85;
}


/* =========================================================
   WAVEFORM CONTAINER
   ========================================================= */

.pc-h2-stats-wave {

    position: absolute;

    left: 0;
    right: 0;

    top: 38%;

    height: 150px;

    transform: translateY(-50%);

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: clamp(6px, 1vw, 14px);

    padding: 0 4%;

    pointer-events: none;

    opacity: .95;
}


/* =========================================================
   WAVEFORM BLOCKS
   ========================================================= */

.pc-h2-wave-block {

    display: block;

    flex: 1 1 0;

    max-width: 48px;

    min-width: 7px;

    /*
     * GRAPHITE / DARK ORANGE.
     * NOT WHITE.
     */
    background: rgba(32, 42, 48, .20);

    border: 1px solid rgba(32, 42, 48, .18);

    transform-origin: center;

    opacity: .9;

    animation:
        pcH2WaveMotion
        2.8s
        ease-in-out
        infinite;

    transition:
        background .3s ease,
        opacity .3s ease;
}


/*
 * Different waveform heights.
 *
 * This creates the electrical waveform instead
 * of one straight row.
 */

.pc-h2-wave-block:nth-child(1)  { height: 22px; }
.pc-h2-wave-block:nth-child(2)  { height: 42px; }
.pc-h2-wave-block:nth-child(3)  { height: 68px; }
.pc-h2-wave-block:nth-child(4)  { height: 98px; }
.pc-h2-wave-block:nth-child(5)  { height: 56px; }

.pc-h2-wave-block:nth-child(6)  { height: 82px; }
.pc-h2-wave-block:nth-child(7)  { height: 125px; }
.pc-h2-wave-block:nth-child(8)  { height: 72px; }
.pc-h2-wave-block:nth-child(9)  { height: 112px; }
.pc-h2-wave-block:nth-child(10) { height: 48px; }

.pc-h2-wave-block:nth-child(11) { height: 88px; }
.pc-h2-wave-block:nth-child(12) { height: 138px; }
.pc-h2-wave-block:nth-child(13) { height: 75px; }
.pc-h2-wave-block:nth-child(14) { height: 118px; }
.pc-h2-wave-block:nth-child(15) { height: 52px; }

.pc-h2-wave-block:nth-child(16) { height: 95px; }
.pc-h2-wave-block:nth-child(17) { height: 128px; }
.pc-h2-wave-block:nth-child(18) { height: 66px; }
.pc-h2-wave-block:nth-child(19) { height: 105px; }
.pc-h2-wave-block:nth-child(20) { height: 44px; }

.pc-h2-wave-block:nth-child(21) { height: 74px; }
.pc-h2-wave-block:nth-child(22) { height: 120px; }
.pc-h2-wave-block:nth-child(23) { height: 88px; }
.pc-h2-wave-block:nth-child(24) { height: 55px; }
.pc-h2-wave-block:nth-child(25) { height: 94px; }

.pc-h2-wave-block:nth-child(26) { height: 64px; }
.pc-h2-wave-block:nth-child(27) { height: 110px; }
.pc-h2-wave-block:nth-child(28) { height: 76px; }
.pc-h2-wave-block:nth-child(29) { height: 42px; }
.pc-h2-wave-block:nth-child(30) { height: 68px; }


/* =========================================================
   WAVEFORM ANIMATION
   ========================================================= */

@keyframes pcH2WaveMotion {

    0%,
    100% {
        transform: scaleY(.72);
        opacity: .60;
    }

    50% {
        transform: scaleY(1);
        opacity: .92;
    }
}


/*
 * Offset the animation so all blocks don't
 * move simultaneously.
 */

.pc-h2-wave-block:nth-child(2n) {
    animation-delay: -.45s;
}

.pc-h2-wave-block:nth-child(3n) {
    animation-delay: -.9s;
}

.pc-h2-wave-block:nth-child(4n) {
    animation-delay: -1.25s;
}


/* =========================================================
   ENERGY LINES
   ========================================================= */

.pc-h2-stats-energy {

    position: absolute;

    height: 2px;

    background: rgba(32, 42, 48, .38);

    z-index: 2;

    pointer-events: none;

    opacity: .75;
}


.pc-h2-stats-energy-one {

    width: 180px;

    left: -180px;

    top: 37%;

    animation:
        pcH2StatsEnergyOne
        5s
        linear
        infinite;
}


.pc-h2-stats-energy-two {

    width: 230px;

    right: -230px;

    top: 67%;

    animation:
        pcH2StatsEnergyTwo
        6s
        linear
        infinite;
}


@keyframes pcH2StatsEnergyOne {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    15% {
        opacity: .7;
    }

    80% {
        opacity: .7;
    }

    100% {
        transform: translateX(calc(100vw + 360px));
        opacity: 0;
    }
}


@keyframes pcH2StatsEnergyTwo {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    15% {
        opacity: .7;
    }

    80% {
        opacity: .7;
    }

    100% {
        transform: translateX(calc(-100vw - 460px));
        opacity: 0;
    }
}


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

.pc-h2-stats-inner {

    position: relative;

    z-index: 5;

    width: min(
        1360px,
        calc(100% - 80px)
    );

    height: 100%;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: start;

    gap: 0;
}


/* =========================================================
   STAT ITEM
   ========================================================= */

.pc-h2-stat-item {

    position: relative;

    height: 100%;

    padding-top: 58px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    color: #202A30;
}


/* =========================================================
   VERTICAL DIVIDERS
   ========================================================= */

.pc-h2-stat-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 58px;

    width: 1px;

    height: 92px;

    background: rgba(
        32,
        42,
        48,
        .25
    );
}


/* =========================================================
   VALUE ROW
   ========================================================= */

.pc-h2-stat-value {

    min-height: 68px;

    display: flex;

    align-items: baseline;

    justify-content: center;

    white-space: nowrap;
}


/* =========================================================
   NUMBER
   ========================================================= */

.pc-h2-stat-number {

    display: inline-block;

    margin: 0;

    color: #202A30 !important;

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        46px,
        4.2vw,
        64px
    );

    line-height: .95;

    font-weight: 800;

    letter-spacing: -2.5px;

    text-shadow: none !important;

    opacity: 1 !important;
}


/* =========================================================
   UNIT
   ========================================================= */

.pc-h2-stat-unit {

    display: inline-block;

    margin-left: 5px;

    color: #202A30 !important;

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        17px,
        1.4vw,
        23px
    );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.4px;
}


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

.pc-h2-stat-item small {

    display: block;

    margin-top: 10px;

    color: #202A30 !important;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 2.6px;

    opacity: 1 !important;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .pc-h2-stats {

        height: 285px;
        min-height: 285px;
    }

    .pc-h2-stats-inner {

        width: min(
            1100px,
            calc(100% - 60px)
        );
    }

    .pc-h2-stat-item {

        padding-top: 55px;
    }

    .pc-h2-stat-item:not(:last-child)::after {

        top: 55px;
        height: 86px;
    }

    .pc-h2-stat-number {

        font-size: 50px;
    }

    .pc-h2-stat-unit {

        font-size: 18px;
    }
}


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

@media (max-width: 991px) {

    .pc-h2-stats {

        height: 300px;
        min-height: 300px;
    }

    .pc-h2-stats-inner {

        width: calc(100% - 48px);

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows:
            repeat(2, 1fr);
    }

    .pc-h2-stat-item {

        height: 150px;

        padding-top: 26px;
    }

    .pc-h2-stat-item:nth-child(3),
    .pc-h2-stat-item:nth-child(4) {

        padding-top: 22px;
    }


    /*
     * Horizontal separator between rows
     */

    .pc-h2-stat-item:nth-child(3)::before,
    .pc-h2-stat-item:nth-child(4)::before {

        content: "";

        position: absolute;

        top: 0;

        left: 8%;
        right: 8%;

        height: 1px;

        background: rgba(
            32,
            42,
            48,
            .20
        );
    }


    .pc-h2-stat-number {

        font-size: 44px;
    }

    .pc-h2-stat-unit {

        font-size: 16px;
    }

    .pc-h2-stat-item small {

        font-size: 12px;

        letter-spacing: 2px;
    }


    .pc-h2-stats-wave {

        gap: 7px;

        padding-inline: 2%;
    }
}


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

@media (max-width: 767px) {

    .pc-h2-stats {

        height: 270px;
        min-height: 270px;
    }

    .pc-h2-stats-inner {

        width: calc(100% - 28px);
    }

    .pc-h2-stat-item {

        height: 135px;
    }

    .pc-h2-stat-number {

        font-size: 37px;

        letter-spacing: -1.7px;
    }

    .pc-h2-stat-unit {

        font-size: 14px;

        margin-left: 3px;
    }

    .pc-h2-stat-item small {

        margin-top: 9px;

        font-size: 10px;

        letter-spacing: 1.7px;
    }


    .pc-h2-stat-item:not(:last-child)::after {

        top: 32px;

        height: 65px;
    }


    /*
     * Smaller waveform on mobile
     */

    .pc-h2-stats-wave {

        height: 120px;

        gap: 4px;

        padding-inline: 1.5%;
    }

    .pc-h2-wave-block {

        min-width: 4px;

        max-width: 20px;
    }

    .pc-h2-wave-block:nth-child(1),
    .pc-h2-wave-block:nth-child(5),
    .pc-h2-wave-block:nth-child(10),
    .pc-h2-wave-block:nth-child(15),
    .pc-h2-wave-block:nth-child(20),
    .pc-h2-wave-block:nth-child(25),
    .pc-h2-wave-block:nth-child(30) {

        opacity: .55;
    }

    .pc-h2-stats-grid {

        background-size: 30px 30px;
    }
}


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

@media (max-width: 480px) {

    .pc-h2-stats {

        height: 250px;
        min-height: 250px;
    }

    .pc-h2-stats-inner {

        width: calc(100% - 18px);
    }

    .pc-h2-stat-item {

        height: 125px;

        padding-top: 25px;
    }

    .pc-h2-stat-item:nth-child(3),
    .pc-h2-stat-item:nth-child(4) {

        padding-top: 20px;
    }

    .pc-h2-stat-number {

        font-size: 32px;
    }

    .pc-h2-stat-unit {

        font-size: 12px;
    }

    .pc-h2-stat-item small {

        font-size: 9px;

        letter-spacing: 1.4px;
    }

    .pc-h2-stat-item:not(:last-child)::after {

        top: 30px;

        height: 56px;
    }


    .pc-h2-stats-wave {

        height: 105px;

        gap: 3px;
    }

    .pc-h2-wave-block {

        max-width: 14px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-h2-wave-block,
    .pc-h2-stats-energy {

        animation: none;
    }
}

/* =========================================================================
   POWERCORE HOME 2
   SECTION 5 — FIELD RESPONSE / FIELD SERVICE

   Desktop:
   LEFT   = full-height content
   CENTER = full-height timeline
   RIGHT  = full-height engineer

   All three columns use the same parent height.
   ========================================================================= */

.pc-h2-field-response {
    position: relative;

    width: 100%;
    min-height: 820px;

    overflow: hidden;

    isolation: isolate;

    background: var(--pcx-bg);
    color: var(--pcx-text);
}


/* Technical background */
.pc-h2-field-grid {
    position: absolute;
    inset: 0;

    opacity: .24;

    background-image:
        linear-gradient(
            var(--pcx-line) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--pcx-line) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 14%,
            #000 86%,
            transparent
        );
}


/* =========================================================
   MAIN THREE-COLUMN SPACE

   IMPORTANT:
   The height is controlled here.
   Text / timeline / image all stretch to this height.
   ========================================================= */

.pc-h2-field-inner {
    position: relative;
    z-index: 3;

    width: min(1500px, calc(100% - 72px));

    min-height: 820px;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        190px
        minmax(0, 1fr);

    align-items: stretch;

    gap: clamp(24px, 3vw, 54px);
}


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

.pc-h2-field-content {
    min-height: 100%;
    height: 100%;

    padding: 54px 0;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    opacity: 0;

    transform: translateX(-55px);

    transition:
        opacity 1s ease,
        transform 1.1s cubic-bezier(.16,1,.3,1);
}


.pc-h2-field-content.is-visible {
    opacity: 1;

    transform: translateX(0);
}


.pc-h2-field-content-top {
    max-width: 650px;

    /*
     * Keeps the content vertically balanced
     * across the same height as the timeline.
     */
    margin-top: 0;
    margin-bottom: 0;
}


.pc-h2-field-kicker {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--pcx-orange);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .18em;
}


.pc-h2-field-kicker::before {
    content: "";

    width: 42px;
    height: 2px;

    background: var(--pcx-orange);

    box-shadow:
        0 0 14px var(--pcx-orange);
}


.pc-h2-field-content h2 {
    margin: 20px 0 24px;

    max-width: 640px;

    color: var(--pcx-text);

    font-size: clamp(38px, 4.2vw, 64px);

    line-height: 1.03;

    font-weight: 800;

    letter-spacing: -.055em;
}


.pc-h2-field-content h2 em {
    color: var(--pcx-orange);

    font-style: normal;
}


.pc-h2-field-content p {
    max-width: 600px;

    margin: 0;

    color: var(--pcx-muted);

    font-size: 17px;

    line-height: 1.8;

    font-weight: 500;
}


/* CTA */
.pc-h2-field-button {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 34px;

    min-width: 215px;

    padding: 15px 18px;

    color: #fff;

    background: var(--pcx-orange);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .08em;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.pc-h2-field-button:hover {
    color: #fff;

    background: var(--pcx-orange-hover);

    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(255,138,0,.28);
}


.pc-h2-field-button strong {
    font-size: 20px;

    line-height: 1;
}


/* =========================================================
   CENTER TIMELINE
   ========================================================= */

.pc-h2-field-timeline {
    position: relative;

    height: 100%;
    min-height: 820px;

    display: flex;

    justify-content: center;
}


/* Base + progress line */
.pc-h2-field-timeline-track,
.pc-h2-field-timeline-progress {
    position: absolute;

    top: 0;
    bottom: 54px;

    left: 50%;

    transform: translateX(-50%);
}


.pc-h2-field-timeline-track {
    width: 2px;

    background:
        rgba(255,138,0,.18);
}


.pc-h2-field-timeline-progress {
    width: 4px;

    height: 0;

    bottom: auto;

    background: var(--pcx-orange);

    box-shadow:
        0 0 7px var(--pcx-orange),
        0 0 20px var(--pcx-orange),
        0 0 48px rgba(255,138,0,.65),
        0 0 90px rgba(255,138,0,.35);

    transition:
        height 1.5s cubic-bezier(.16,1,.3,1);
}


/* Timeline stages */
.pc-h2-field-stages {
    position: relative;

    z-index: 4;

    width: 100%;

    height: 100%;
    min-height: 820px;

    padding: 54px 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.pc-h2-field-stage {
    position: relative;

    min-height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Horizontal energy branch */
.pc-h2-field-stage::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 104px;
    height: 1px;

    transform:
        translate(-50%, -50%);

    background:
        rgba(255,138,0,.22);

    transition:
        width .6s ease,
        background .6s ease,
        box-shadow .6s ease;
}


.pc-h2-field-stage.is-active::before {
    width: 128px;

    background: var(--pcx-orange);

    box-shadow:
        0 0 12px var(--pcx-orange),
        0 0 26px rgba(255,138,0,.5);
}


/* Timeline node */
.pc-h2-field-stage-node {
    position: relative;

    z-index: 5;

    width: 18px;
    height: 18px;

    border: 2px solid var(--pcx-orange);

    border-radius: 50%;

    background: var(--pcx-bg);

    box-shadow:
        0 0 0 5px rgba(255,138,0,.08),
        0 0 18px rgba(255,138,0,.5);

    transition:
        transform .45s ease,
        background .45s ease,
        box-shadow .45s ease;
}


.pc-h2-field-stage.is-active .pc-h2-field-stage-node {
    transform: scale(1.35);

    background: var(--pcx-orange);

    box-shadow:
        0 0 0 8px rgba(255,138,0,.10),
        0 0 20px var(--pcx-orange),
        0 0 50px rgba(255,138,0,.75);
}


/* Stage labels */
.pc-h2-field-stage-label {
    position: absolute;

    left: calc(50% + 35px);
    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 110px;
}


.pc-h2-field-stage-label small {
    color: var(--pcx-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .16em;
}


.pc-h2-field-stage-label strong {
    color: var(--pcx-text);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .12em;
}


/* =========================================================
   RIGHT IMAGE
   ========================================================= */

.pc-h2-field-visual {
    position: relative;

    height: 100%;
    min-height: 820px;

    overflow: visible;

    display: flex;

    align-items: stretch;

    justify-content: center;
}


/* Image wrapper */
.pc-h2-field-man {
    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: stretch;

    justify-content: center;

    opacity: 0;

    transform:
        translateX(120px)
        scale(.94);

    transition:
        opacity 1s ease .15s,
        transform 1.25s cubic-bezier(.16,1,.3,1) .1s;
}


.pc-h2-field-man.is-visible {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);
}


/* Image fills same height as timeline */
.pc-h2-field-man img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 58% center;

    filter:
        saturate(.82)
        contrast(1.04)
        brightness(.88);

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 16%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 16%,
            #000 100%
        );
}


/* Orange glow behind engineer */
.pc-h2-field-glow {
    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: 8%;

    width: 440px;
    height: 440px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,0,.34),
            rgba(255,138,0,.13) 34%,
            transparent 72%
        );

    filter: blur(12px);

    animation:
        pcH2FieldGlow 4s ease-in-out infinite;
}


@keyframes pcH2FieldGlow {

    0%,
    100% {
        opacity: .55;

        transform:
            translateX(-50%)
            scale(.88);
    }

    50% {
        opacity: 1;

        transform:
            translateX(-50%)
            scale(1.08);
    }
}


/* Technical rim */
.pc-h2-field-rim {
    position: absolute;

    z-index: 4;

    right: 7%;
    bottom: 9%;

    width: 220px;
    height: 220px;

    border:
        1px solid rgba(255,138,0,.55);

    border-radius: 50%;

    box-shadow:
        0 0 22px rgba(255,138,0,.22),
        inset 0 0 30px rgba(255,138,0,.1);

    animation:
        pcH2FieldOrbit 12s linear infinite;

    pointer-events: none;
}


/* Rotating orbit */
.pc-h2-field-orbit {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    width: 72%;

    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(255,138,0,.18);

    border-radius: 50%;

    pointer-events: none;
}


.pc-h2-field-orbit-one {
    animation:
        pcH2FieldOrbit 15s linear infinite;
}


.pc-h2-field-orbit-two {
    width: 54%;

    animation:
        pcH2FieldOrbitReverse 11s linear infinite;
}


@keyframes pcH2FieldOrbit {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes pcH2FieldOrbitReverse {

    to {
        transform:
            translate(-50%, -50%)
            rotate(-360deg);
    }
}


/* Glowing signal points */
.pc-h2-field-signal {
    position: absolute;

    z-index: 5;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--pcx-orange);

    box-shadow:
        0 0 10px var(--pcx-orange),
        0 0 28px var(--pcx-orange);

    animation:
        pcH2FieldSignal 2.8s ease-in-out infinite;
}


.pc-h2-field-signal-one {
    top: 22%;
    right: 13%;
}

.pc-h2-field-signal-two {
    top: 48%;
    right: 27%;
    animation-delay: -.8s;
}

.pc-h2-field-signal-three {
    bottom: 20%;
    left: 15%;
    animation-delay: -1.7s;
}


@keyframes pcH2FieldSignal {

    0%,
    100% {
        opacity: .2;
        transform: scale(.6);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}


/* Horizontal energy lines */
.pc-h2-field-energy {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pcx-orange),
            transparent
        );

    box-shadow:
        0 0 12px var(--pcx-orange);

    opacity: .45;

    animation:
        pcH2FieldEnergy 5s linear infinite;
}


.pc-h2-field-energy-one {
    width: 38vw;
    left: -40vw;
    top: 22%;
}


.pc-h2-field-energy-two {
    width: 30vw;
    right: -35vw;
    top: 71%;

    animation-delay: -2.2s;
}


@keyframes pcH2FieldEnergy {

    to {
        transform: translateX(180vw);
    }
}


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

@media (max-width: 1199px) {

    .pc-h2-field-inner {
        width: min(1180px, calc(100% - 48px));

        grid-template-columns:
            minmax(0, 1fr)
            150px
            minmax(0, .9fr);

        gap: 24px;
    }

    .pc-h2-field-content h2 {
        font-size: clamp(36px, 4vw, 54px);
    }

    .pc-h2-field-stage-label {
        left: calc(50% + 28px);
    }
}


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

@media (max-width: 991px) {

    .pc-h2-stats {
        min-height: 430px;
    }

    .pc-h2-stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .pc-h2-stat-item:nth-child(3)::before {
        display: none;
    }

    .pc-h2-stat-item:nth-child(n+3) {
        border-top:
            1px solid rgba(255,255,255,.28);
    }


    .pc-h2-field-response {
        min-height: 760px;
    }

    .pc-h2-field-inner {
        min-height: 760px;

        grid-template-columns:
            minmax(0, 1fr)
            150px
            minmax(0, .9fr);

        gap: 18px;
    }

    .pc-h2-field-timeline,
    .pc-h2-field-stages,
    .pc-h2-field-visual {
        min-height: 760px;
    }

    .pc-h2-field-content {
        padding: 62px 0;
    }

    .pc-h2-field-content h2 {
        font-size: 40px;
    }

    .pc-h2-field-content p {
        font-size: 16px;
    }
}


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

@media (max-width: 767px) {

    .pc-h2-stats {
        min-height: 520px;
    }

    .pc-h2-stats-inner {
        width: min(100% - 28px, 560px);
    }

    .pc-h2-stat-item {
        min-height: 190px;
        padding: 18px 10px;
    }

    .pc-h2-stat-item:nth-child(3)::before,
    .pc-h2-stat-item:nth-child(2n+1)::before {
        display: none;
    }

    .pc-h2-stat-item:nth-child(n+3) {
        border-top:
            1px solid rgba(255,255,255,.3);
    }

    .pc-h2-stat-number {
        font-size: clamp(42px, 12vw, 62px);
    }


    /*
     * Mobile becomes a clean vertical composition.
     * We do NOT squash the desktop 3-column layout.
     */
    .pc-h2-field-response {
        min-height: auto;
    }

    .pc-h2-field-inner {
        width: min(100% - 32px, 620px);

        min-height: auto;

        display: flex;
        flex-direction: column;

        gap: 0;
    }


    .pc-h2-field-content {
        min-height: auto;
        height: auto;

        padding: 64px 0 34px;

        display: flex;

        justify-content: flex-start;

        gap: 34px;
    }

    .pc-h2-field-content-top {
        margin: 0;
    }

    .pc-h2-field-content h2 {
        font-size:
            clamp(34px, 9vw, 46px);
    }

    .pc-h2-field-content p {
        font-size: 16px;
    }

    .pc-h2-field-button {
        margin-top: 0;
    }


    /* Mobile timeline */
    .pc-h2-field-timeline {
        min-height: 560px;
        height: 560px;

        width: 100%;
    }

    .pc-h2-field-stages {
        min-height: 560px;
        height: 560px;

        padding: 32px 0;
    }

    .pc-h2-field-timeline-track,
    .pc-h2-field-timeline-progress {
        top: 32px;
        bottom: 32px;
    }

    .pc-h2-field-stage {
        min-height: 110px;
    }

    .pc-h2-field-stage-label {
        left: calc(50% + 30px);
    }


    /* Mobile engineer */
    .pc-h2-field-visual {
        min-height: 560px;
        height: 560px;

        margin-top: 8px;
    }

    .pc-h2-field-man {
        min-height: 560px;
        height: 560px;

        transform:
            translateX(70px)
            scale(.96);
    }

    .pc-h2-field-man img {
        object-position: 56% center;

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000 8%,
                #000 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000 8%,
                #000 100%
            );
    }

    .pc-h2-field-rim {
        right: 4%;
        bottom: 7%;

        width: 150px;
        height: 150px;
    }

    .pc-h2-field-orbit {
        width: 88%;
    }

    .pc-h2-field-orbit-two {
        width: 65%;
    }
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 480px) {

    .pc-h2-stats {
        min-height: 480px;
    }

    .pc-h2-stat-item {
        min-height: 170px;
    }

    .pc-h2-stat-item small {
        font-size: 11px;
    }

    .pc-h2-field-inner {
        width: min(100% - 24px, 500px);
    }

    .pc-h2-field-content {
        padding-top: 52px;
    }

    .pc-h2-field-content h2 {
        font-size: 33px;
    }

    .pc-h2-field-timeline,
    .pc-h2-field-stages,
    .pc-h2-field-visual,
    .pc-h2-field-man {
        min-height: 500px;
        height: 500px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .pc-h2-stat-item:nth-child(-n+2) .pc-h2-stat-value {
        transform: translateY(-102px);
    }
}

@media (max-width: 767px) {
    .pc-h2-stat-item:nth-child(-n+2) .pc-h2-stat-value {
        transform: translateY(-52px);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-h2-stats-radial,
    .pc-h2-stats-wave span,
    .pc-h2-stats-streak,
    .pc-h2-stat-particle,
    .pc-h2-field-energy,
    .pc-h2-field-orbit,
    .pc-h2-field-rim,
    .pc-h2-field-signal {
        animation: none !important;
    }

    .pc-h2-field-content,
    .pc-h2-field-man {
        opacity: 1 !important;
        transform: none !important;

        transition: none !important;
    }
}

/* =========================================================
   HOME 2 — FIELD VOICES / TESTIMONIAL MARQUEE
   ========================================================= */

.pc-h2-field-voices {

    position: relative;

    width: 100%;

    padding:
        clamp(88px, 9vw, 132px)
        0
        clamp(70px, 7vw, 100px);

    overflow: hidden;

    isolation: isolate;

    background: #F7F5F1;

    color: #202A30;
}


/* =========================================================
   TECHNICAL GRID
   ========================================================= */

.pc-h2-voices-grid {

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(32, 42, 48, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 42, 48, .045) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    opacity: .9;
}


/* =========================================================
   ORANGE AMBIENT GLOW
   ========================================================= */

.pc-h2-voices-glow {

    position: absolute;

    z-index: -2;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 138, 0, .17) 0%,
            rgba(255, 138, 0, .08) 30%,
            rgba(255, 138, 0, 0) 72%
        );

    filter: blur(5px);

    animation:
        pcH2VoiceGlow
        7s
        ease-in-out
        infinite;
}


.pc-h2-voices-glow-one {

    width: 620px;
    height: 420px;

    left: 18%;

    top: 30%;

    transform: translate(-50%, -50%);
}


.pc-h2-voices-glow-two {

    width: 480px;
    height: 340px;

    right: 8%;

    bottom: -100px;

    animation-delay: -3.5s;
}


@keyframes pcH2VoiceGlow {

    0%,
    100% {
        opacity: .45;
        transform: scale(.92);
    }

    50% {
        opacity: .8;
        transform: scale(1.06);
    }
}


/* =========================================================
   INTRO
   ========================================================= */

.pc-h2-voices-intro {

    position: relative;

    z-index: 5;

    width: min(
        850px,
        calc(100% - 48px)
    );

    margin: 0 auto
        clamp(48px, 5vw, 70px);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* =========================================================
   KICKER
   ========================================================= */

.pc-h2-voices-kicker {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    color: #202A30;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.pc-h2-voices-kicker::before {

    content: "";

    width: 34px;

    height: 2px;

    margin-right: 12px;

    background: #FF8A00;

    box-shadow:
        0 0 8px rgba(255, 138, 0, .45),
        0 0 18px rgba(255, 138, 0, .25);
}


/* =========================================================
   HEADING
   ========================================================= */

.pc-h2-voices-intro h2 {

    margin: 0;

    max-width: 820px;

    color: #202A30;

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        36px,
        4.2vw,
        58px
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.8px;

    text-align: center;
}


.pc-h2-voices-intro h2 span {

    display: block;

    color: #FF8A00;

    text-shadow:
        0 0 18px rgba(255, 138, 0, .14);
}


/* =========================================================
   INTRO PARAGRAPH
   ========================================================= */

.pc-h2-voices-intro p {

    max-width: 690px;

    margin:
        22px auto 0;

    color: #596A73;

    font-family: "Manrope", sans-serif;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 500;

    text-align: center;
}


/* =========================================================
   MARQUEE VIEWPORT
   ========================================================= */

.pc-h2-voices-marquee {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        14px 0
        24px;

    /*
     * Prevents any horizontal page overflow.
     */

    isolation: isolate;
}


/*
 * Soft orange edge illumination.
 */

.pc-h2-voices-marquee::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 120px;

    height: 100%;

    z-index: 8;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #F7F5F1,
            rgba(247, 245, 241, .65),
            transparent
        );
}


.pc-h2-voices-marquee::after {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    width: 120px;

    height: 100%;

    z-index: 8;

    pointer-events: none;

    background:
        linear-gradient(
            270deg,
            #F7F5F1,
            rgba(247, 245, 241, .65),
            transparent
        );
}


/* =========================================================
   MARQUEE TRACK
   ========================================================= */

.pc-h2-voices-track {

    display: flex;

    align-items: stretch;

    width: max-content;

    gap: 24px;

    will-change: transform;

    animation:
        pcH2FieldVoicesMarquee
        32s
        linear
        infinite;
}


/*
 * Right → Left.
 */

@keyframes pcH2FieldVoicesMarquee {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(
            -50%,
            0,
            0
        );
    }
}


/* =========================================================
   TESTIMONIAL FRAME
   ========================================================= */

.pc-h2-voice {

    position: relative;

    flex: 0 0
        clamp(
            360px,
            29vw,
            455px
        );

    min-height: 315px;

    padding:
        30px
        30px
        28px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    background:
        rgba(
            247,
            245,
            241,
            .76
        );

    border-top: 1px solid
        rgba(
            32,
            42,
            48,
            .22
        );

    border-bottom: 1px solid
        rgba(
            32,
            42,
            48,
            .22
        );

    border-left: 1px solid
        rgba(
            32,
            42,
            48,
            .14
        );

    border-right: 1px solid
        rgba(
            32,
            42,
            48,
            .14
        );

    backdrop-filter: blur(8px);

    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1),
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* =========================================================
   ORANGE TOP INDICATOR
   ========================================================= */

.pc-h2-voice::before {

    content: "";

    position: absolute;

    left: 30px;

    top: -2px;

    width: 54px;

    height: 3px;

    background: #FF8A00;

    box-shadow:
        0 0 7px rgba(255, 138, 0, .65),
        0 0 18px rgba(255, 138, 0, .30);

    transition:
        width .35s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.pc-h2-voice:hover {

    transform:
        translateY(-8px);

    background:
        rgba(
            255,
            255,
            255,
            .90
        );

    border-color:
        rgba(
            255,
            138,
            0,
            .55
        );

    box-shadow:
        0 0 0 1px
        rgba(
            255,
            138,
            0,
            .08
        ),
        0 12px 38px
        rgba(
            255,
            138,
            0,
            .12
        );
}


.pc-h2-voice:hover::before {

    width: 100%;

    box-shadow:
        0 0 9px rgba(255, 138, 0, .75),
        0 0 24px rgba(255, 138, 0, .35);
}


/* =========================================================
   TOP META
   ========================================================= */

.pc-h2-voice-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 17px;

    border-bottom: 1px solid
        rgba(
            32,
            42,
            48,
            .12
        );
}


.pc-h2-voice-number {

    color: #FF8A00;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.pc-h2-voice-type {

    color: #596A73;

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 2px;
}


/* =========================================================
   PROFESSIONAL STAR RATING
   ========================================================= */

.pc-h2-voice-stars {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    margin:
        23px 0 17px;

    color: #FF8A00;

    filter:
        drop-shadow(
            0 0 5px
            rgba(255, 138, 0, .28)
        );
}


.pc-h2-voice-stars span {

    display: block;

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1;

    color: #FF8A00;
}


/* =========================================================
   QUOTE
   ========================================================= */

.pc-h2-voice blockquote {

    margin: 0;

    min-height: 92px;

    color: #202A30;

    font-family: "Manrope", sans-serif;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 600;

    text-align: center;
}


/* =========================================================
   PERSON
   ========================================================= */

.pc-h2-voice-person {

    margin-top: auto;

    padding-top: 19px;

    text-align: center;

    border-top: 1px solid
        rgba(
            32,
            42,
            48,
            .11
        );
}


.pc-h2-voice-person strong {

    display: block;

    color: #202A30;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 800;
}


.pc-h2-voice-person small {

    display: block;

    margin-top: 5px;

    color: #596A73;

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 600;

    letter-spacing: .4px;
}


/* =========================================================
   TECHNICAL SIGNAL
   ========================================================= */

.pc-h2-voices-signal {

    position: relative;

    width: min(
        1360px,
        calc(100% - 80px)
    );

    height: 1px;

    margin:
        30px auto
        0;

    background:
        rgba(
            32,
            42,
            48,
            .13
        );
}


.pc-h2-voices-signal::before {

    content: "";

    position: absolute;

    left: 0;

    top: -1px;

    width: 22%;

    height: 3px;

    background: #FF8A00;

    box-shadow:
        0 0 7px rgba(255, 138, 0, .65),
        0 0 20px rgba(255, 138, 0, .25);

    animation:
        pcH2VoiceSignal
        4.5s
        linear
        infinite;
}


.pc-h2-voices-signal span {

    position: absolute;

    top: -3px;

    left: 0;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 7px #FF8A00,
        0 0 17px rgba(255, 138, 0, .65);

    animation:
        pcH2VoiceSignalPoint
        4.5s
        linear
        infinite;
}


@keyframes pcH2VoiceSignal {

    0% {
        transform: translateX(-10%);
    }

    100% {
        transform:
            translateX(460%);
    }
}


@keyframes pcH2VoiceSignalPoint {

    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}


/* =========================================================
   BOTTOM LINE
   ========================================================= */

.pc-h2-voices-footer-line {

    width: min(
        1360px,
        calc(100% - 80px)
    );

    margin:
        22px auto
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    color: #596A73;

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   LAPTOP-L
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .pc-h2-voice {

        flex-basis: 430px;

        min-height: 320px;
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .pc-h2-field-voices {

        padding:
            82px 0
            75px;
    }

    .pc-h2-voices-intro {

        margin-bottom: 48px;
    }

    .pc-h2-voice {

        flex-basis: 380px;

        min-height: 305px;

        padding: 27px;
    }

    .pc-h2-voices-track {

        gap: 20px;

        animation-duration: 29s;
    }

    .pc-h2-voices-signal,
    .pc-h2-voices-footer-line {

        width: calc(100% - 60px);
    }
}


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

@media (max-width: 991px) {

    .pc-h2-field-voices {

        padding:
            72px 0
            66px;
    }

    .pc-h2-voices-intro {

        width: calc(100% - 48px);

        margin-bottom: 42px;
    }

    .pc-h2-voices-kicker {

        font-size: 12px;

        letter-spacing: 2.5px;
    }

    .pc-h2-voices-intro h2 {

        font-size: 40px;

        letter-spacing: -1.2px;
    }

    .pc-h2-voices-intro p {

        font-size: 16px;

        max-width: 620px;
    }

    .pc-h2-voice {

        flex-basis: 340px;

        min-height: 300px;

        padding: 25px;
    }

    .pc-h2-voices-track {

        gap: 18px;

        animation-duration: 27s;
    }

    .pc-h2-voices-footer-line {

        width: calc(100% - 48px);

        font-size: 10px;
    }
}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (max-width: 767px) {

    .pc-h2-field-voices {

        padding:
            64px 0
            55px;
    }

    .pc-h2-voices-grid {

        background-size: 32px 32px;
    }

    .pc-h2-voices-intro {

        width: calc(100% - 34px);

        margin-bottom: 38px;
    }

    .pc-h2-voices-kicker {

        margin-bottom: 15px;

        font-size: 11px;

        letter-spacing: 2px;
    }

    .pc-h2-voices-kicker::before {

        width: 24px;

        margin-right: 8px;
    }

    .pc-h2-voices-intro h2 {

        font-size: 34px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .pc-h2-voices-intro p {

        margin-top: 17px;

        font-size: 15px;

        line-height: 1.65;
    }

    .pc-h2-voices-marquee {

        padding:
            10px 0
            20px;
    }

    .pc-h2-voices-marquee::before,
    .pc-h2-voices-marquee::after {

        width: 55px;
    }

    .pc-h2-voices-track {

        gap: 16px;

        animation-duration: 24s;
    }

    .pc-h2-voice {

        flex-basis: 325px;

        min-height: 295px;

        padding:
            24px 22px
            23px;
    }

    .pc-h2-voice::before {

        left: 22px;

        width: 46px;
    }

    .pc-h2-voice-top {

        padding-bottom: 15px;
    }

    .pc-h2-voice-stars {

        margin:
            20px 0 15px;
    }

    .pc-h2-voice blockquote {

        min-height: 90px;

        font-size: 15px;

        line-height: 1.62;
    }

    .pc-h2-voice-person {

        padding-top: 16px;
    }

    .pc-h2-voices-signal {

        width: calc(100% - 34px);

        margin-top: 25px;
    }

    .pc-h2-voices-footer-line {

        width: calc(100% - 34px);

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 9px;

        text-align: center;

        font-size: 9px;

        letter-spacing: 1.4px;
    }
}


/* =========================================================
   MOBILE-M
   ========================================================= */

@media (max-width: 480px) {

    .pc-h2-field-voices {

        padding:
            56px 0
            48px;
    }

    .pc-h2-voices-intro {

        width: calc(100% - 28px);
    }

    .pc-h2-voices-intro h2 {

        font-size: 31px;
    }

    .pc-h2-voices-intro p {

        font-size: 14px;
    }

    .pc-h2-voice {

        flex-basis: 300px;

        min-height: 290px;

        padding:
            22px 19px;
    }

    .pc-h2-voice::before {

        left: 19px;
    }

    .pc-h2-voice-type {

        font-size: 9px;

        letter-spacing: 1.5px;
    }

    .pc-h2-voice-stars span {

        font-size: 16px;
    }

    .pc-h2-voice blockquote {

        font-size: 14px;
    }

    .pc-h2-voice-person strong {

        font-size: 13px;
    }

    .pc-h2-voice-person small {

        font-size: 10px;
    }

    .pc-h2-voices-track {

        gap: 14px;

        animation-duration: 22s;
    }
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 360px) {

    .pc-h2-field-voices {

        padding:
            50px 0
            44px;
    }

    .pc-h2-voices-intro {

        width: calc(100% - 22px);

        margin-bottom: 32px;
    }

    .pc-h2-voices-intro h2 {

        font-size: 28px;

        letter-spacing: -.8px;
    }

    .pc-h2-voices-intro p {

        font-size: 13px;
    }

    .pc-h2-voice {

        flex-basis: 282px;

        min-height: 285px;

        padding:
            20px 17px;
    }

    .pc-h2-voice::before {

        left: 17px;
    }

    .pc-h2-voice blockquote {

        font-size: 13px;

        line-height: 1.58;
    }

    .pc-h2-voices-track {

        animation-duration: 20s;
    }

    .pc-h2-voices-signal,
    .pc-h2-voices-footer-line {

        width: calc(100% - 22px);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-h2-voices-track,
    .pc-h2-voices-glow,
    .pc-h2-voices-signal::before,
    .pc-h2-voices-signal span {

        animation: none;
    }

    .pc-h2-voices-track {

        transform: translate3d(0, 0, 0);
    }
}

/* =========================================================================
   POWERCORE — HOMEPAGE 2 — POWER RESTORATION SLIDER
   Paste at the end of assets/css/styles.css
   Scoped entirely to .pcx-hm2-restore* — does not touch any other
   section or page. Self-contained heading animation (no JS dependency),
   same lesson as the gallery-section fix.
   Uses the same tokens as the rest of the site: --pcx-bg / --pcx-line /
   --pcx-text / --pcx-muted / --pcx-orange / --pcx-orange-hover.
   ========================================================================= */

.pcx-hm2-restore {
    padding-top: clamp(56px, 7vw, 96px);
}

.pcx-hm2-restore-head {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
    opacity: 0;
    transform: translateY(24px);
    animation: pcxHm2RestoreHeadIn .9s cubic-bezier(.16,1,.3,1) .1s forwards;
}

.pcx-hm2-restore-head .pcx-hm2-kicker {
    justify-content: center;
    width: 100%;
}

.pcx-hm2-restore-head p {
    margin: 16px auto 0;
    max-width: 560px;
}

@keyframes pcxHm2RestoreHeadIn {
    to { opacity: 1; transform: translateY(0); }
}

.pcx-hm2-restore-frame {
    max-width: 980px;
    margin: 0 auto;
}


/* =========================================================================
   THE COMPARE FRAME
   ========================================================================= */

.pcx-hm2-restore-compare {
    --pos: 50%;
    position: relative;
    height: clamp(260px, 42vw, 520px);
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid var(--pcx-line);
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    isolation: isolate;
}

.pcx-hm2-restore-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.pcx-hm2-restore-before {
    filter: grayscale(1) brightness(.42) contrast(1.08);
}

.pcx-hm2-restore-after {
    filter: saturate(1.15) brightness(1.05) contrast(1.02);
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* glowing orange "energy seam" that travels with the drag line */
.pcx-hm2-restore-spark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 160px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,138,0,.6), transparent 70%);
    filter: blur(22px);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

.pcx-hm2-restore-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    pointer-events: none;
    z-index: 4;
}

.pcx-hm2-restore-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    transform: translateX(-50%);
    background: var(--pcx-orange);
    box-shadow: 0 0 16px rgba(255,138,0,.7);
}

.pcx-hm2-restore-handle-grip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pcx-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 0 24px rgba(255,138,0,.6), 0 8px 20px rgba(0,0,0,.35);
}

.pcx-hm2-restore-label {
    position: absolute;
    top: 20px;
    z-index: 3;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10,10,10,.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.18);
    pointer-events: none;
}

.pcx-hm2-restore-label-left { left: 20px; }
.pcx-hm2-restore-label-right { right: 20px; }

/* the actual interactive control — stretched over the whole frame so
   dragging anywhere on the image works, native range drag behavior */
.pcx-hm2-restore-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 5;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.pcx-hm2-restore-range::-webkit-slider-runnable-track {
    background: transparent;
    height: 100%;
}

.pcx-hm2-restore-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 60px;
    height: 100%;
    background: transparent;
    cursor: ew-resize;
}

.pcx-hm2-restore-range::-moz-range-track {
    background: transparent;
    height: 100%;
}

.pcx-hm2-restore-range::-moz-range-thumb {
    width: 60px;
    height: 100%;
    border: none;
    background: transparent;
    cursor: ew-resize;
}

.pcx-hm2-restore-range:focus-visible ~ .pcx-hm2-restore-handle .pcx-hm2-restore-handle-grip {
    box-shadow: 0 0 0 4px var(--pcx-bg), 0 0 0 7px var(--pcx-orange), 0 0 24px rgba(255,138,0,.6);
}

.pcx-hm2-restore-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--pcx-muted);
    letter-spacing: .02em;
}

.pcx-hm2-restore-hint i { color: var(--pcx-orange); }


/* =========================================================================
   RESPONSIVE — mobile-s / mobile-m / mobile-l / tablet / laptop / laptop-l
   ========================================================================= */

@media (max-width: 991px) {
    .pcx-hm2-restore-compare { border-radius: 20px; }
    .pcx-hm2-restore-handle-grip { width: 48px; height: 48px; font-size: 15px; }
}

@media (max-width: 767px) {
    .pcx-hm2-restore { padding-top: clamp(44px, 10vw, 72px); }
    .pcx-hm2-restore-head { margin-bottom: 28px; }
    .pcx-hm2-restore-compare { height: clamp(220px, 58vw, 340px); border-radius: 16px; }
    .pcx-hm2-restore-label { top: 14px; font-size: 10.5px; padding: 6px 12px; }
    .pcx-hm2-restore-label-left { left: 14px; }
    .pcx-hm2-restore-label-right { right: 14px; }
}

@media (max-width: 480px) {
    .pcx-hm2-restore-compare { height: clamp(190px, 62vw, 280px); border-radius: 12px; }
    .pcx-hm2-restore-handle-grip { width: 42px; height: 42px; font-size: 13px; }
    .pcx-hm2-restore-hint { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .pcx-hm2-restore-head { animation: none !important; opacity: 1; transform: none; }
}
/* =========================================================
   POWERCORE HOME 2
   FINAL CTA / POWER RESPONSE
   ========================================================= */

.pc-h2-final-cta {

    position: relative;

    width: 100%;
    min-height: 560px;

    overflow: hidden;

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

    isolation: isolate;

    background: #202A30;

    color: #F3F1EC;

}


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

.pc-h2-cta-image {

    position: absolute;

    inset: -4%;

    z-index: -5;

    overflow: hidden;

}

.pc-h2-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    display: block;

    transform: scale(1.04);

    filter: none;

    animation:
        pcH2CtaImageZoom 14s ease-in-out infinite alternate;
}


@keyframes pcH2CtaImageZoom {

    0% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1.11);
    }

}


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

.pc-h2-cta-overlay {
    position: absolute;

    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .08),
            rgba(0, 0, 0, .18)
        );
}


/* =========================================================
   TECHNICAL GRID
   ========================================================= */

.pc-h2-cta-grid {

    position: absolute;

    inset: 0;

    z-index: -3;

    opacity: .24;

    background-image:

        linear-gradient(
            rgba(255, 138, 0, .13) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 138, 0, .13) 1px,
            transparent 1px
        );

    background-size:
        70px 70px,
        70px 70px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 22%,
            #000 78%,
            transparent 100%
        );

}


/* =========================================================
   ORANGE ATMOSPHERIC GLOW
   ========================================================= */

.pc-h2-cta-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;

    background: rgba(255, 138, 0, .28);

    filter: blur(70px);

    animation:
        pcH2CtaGlow 5s ease-in-out infinite alternate;

}


.pc-h2-cta-glow-one {

    width: 430px;
    height: 430px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

}


.pc-h2-cta-glow-two {

    width: 240px;
    height: 240px;

    right: 8%;
    bottom: -100px;

    background:
        rgba(255, 138, 0, .18);

    filter: blur(55px);

    animation-delay: 1.4s;

}


@keyframes pcH2CtaGlow {

    0% {
        opacity: .45;
        transform:
            translate(-50%, -50%)
            scale(.88);
    }

    100% {
        opacity: .82;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

}


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

.pc-h2-cta-content {

    position: relative;

    z-index: 5;

    width: min(1040px, 92%);

    margin-inline: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


/* =========================================================
   KICKER
   ========================================================= */

.pc-h2-cta-kicker {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-bottom: 25px;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .22em;

    color: #FF8A00;

}


.pc-h2-cta-kicker-line {

    width: 42px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #FF8A00
        );

}


.pc-h2-cta-kicker-line:last-child {

    background:
        linear-gradient(
            90deg,
            #FF8A00,
            transparent
        );

}


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

.pc-h2-cta-title {

    max-width: 1000px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(48px, 5.5vw, 76px);

    line-height: .98;

    font-weight: 800;

    letter-spacing: -.045em;

    color: #F3F1EC;

}


.pc-h2-cta-title span {

    display: block;

    margin-top: 8px;

    color: #FF8A00;

}


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

.pc-h2-cta-description {

    width: min(760px, 100%);

    margin:

        27px

        auto

        34px;

    font-family: "Manrope", sans-serif;

    font-size: 17px;

    line-height: 1.75;

    font-weight: 500;

    color: #D5DADC;

}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.pc-h2-cta-action {

    display: flex;

    justify-content: center;

}


.pc-h2-cta-button {

    position: relative;

    min-width: 235px;

    height: 64px;

    padding:
        0
        24px
        0
        28px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    overflow: hidden;

    text-decoration: none;

    background: #FF8A00;

    color: #202A30;

    font-family: "Manrope", sans-serif;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .08em;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

    box-shadow:
        0 0 0 rgba(255, 138, 0, 0);

}


.pc-h2-cta-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.28) 50%,
            transparent 80%
        );

    transform:
        translateX(-130%);

    transition:
        transform .7s ease;

}


.pc-h2-cta-button:hover {

    transform:
        translateY(-4px);

    background: #FF9A1A;

    box-shadow:
        0 0 20px rgba(255, 138, 0, .4),
        0 0 55px rgba(255, 138, 0, .22);

}


.pc-h2-cta-button:hover::before {

    transform:
        translateX(130%);

}


.pc-h2-cta-button-text,
.pc-h2-cta-button-arrow {

    position: relative;

    z-index: 2;

}


.pc-h2-cta-button-arrow {

    font-size: 24px;

    line-height: 1;

}


.pc-h2-cta-button-line {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;

    height: 3px;

    background: #202A30;

    transition:
        width .45s ease;

}


.pc-h2-cta-button:hover
.pc-h2-cta-button-line {

    width: 100%;

}


/* =========================================================
   STATUS
   ========================================================= */

.pc-h2-cta-status {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 25px;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .16em;

    color: #E1E5E7;

}


.pc-h2-cta-status-dot {

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 8px rgba(255, 138, 0, .9),
        0 0 18px rgba(255, 138, 0, .55);

    animation:
        pcH2CtaStatusPulse 1.8s ease-in-out infinite;

}


@keyframes pcH2CtaStatusPulse {

    0%,
    100% {
        opacity: .55;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }

}


.pc-h2-cta-status i {

    width: 28px;

    height: 1px;

    background:
        rgba(255, 138, 0, .65);

}


/* =========================================================
   BOTTOM TECHNICAL LINE
   ========================================================= */

.pc-h2-cta-bottom {

    position: absolute;

    left: 5%;

    right: 5%;

    bottom: 28px;

    z-index: 5;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 18px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;

    color: #BFC8CC;

}


.pc-h2-cta-bottom-line {

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 138, 0, .05),
            rgba(255, 138, 0, .65),
            rgba(255, 138, 0, .05)
        );

}


/* =========================================================
   CORNER MARKERS
   ========================================================= */

.pc-h2-cta-marker {

    position: absolute;

    width: 38px;
    height: 38px;

    z-index: 4;

    opacity: .75;

}


.pc-h2-cta-marker::before,
.pc-h2-cta-marker::after {

    content: "";

    position: absolute;

    background: #FF8A00;

}


.pc-h2-cta-marker::before {

    width: 38px;
    height: 1px;

}


.pc-h2-cta-marker::after {

    width: 1px;
    height: 38px;

}


.pc-h2-cta-marker-tl {

    top: 30px;
    left: 30px;

}


.pc-h2-cta-marker-tr {

    top: 30px;
    right: 30px;

    transform: rotate(90deg);

}


.pc-h2-cta-marker-bl {

    bottom: 30px;
    left: 30px;

    transform: rotate(-90deg);

}


.pc-h2-cta-marker-br {

    bottom: 30px;
    right: 30px;

    transform: rotate(180deg);

}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.pc-h2-cta-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1);

}


.pc-h2-final-cta.is-visible
.pc-h2-cta-reveal {

    opacity: 1;

    transform:
        translateY(0);

}


.pc-h2-final-cta.is-visible
.pc-h2-cta-kicker {

    transition-delay: .08s;

}


.pc-h2-final-cta.is-visible
.pc-h2-cta-title {

    transition-delay: .2s;

}


.pc-h2-final-cta.is-visible
.pc-h2-cta-description {

    transition-delay: .34s;

}


.pc-h2-final-cta.is-visible
.pc-h2-cta-action {

    transition-delay: .48s;

}


.pc-h2-final-cta.is-visible
.pc-h2-cta-status {

    transition-delay: .62s;

}


.pc-h2-final-cta.is-visible
.pc-h2-cta-bottom {

    transition-delay: .75s;

}


/* =========================================================
   LAPTOP-L
   ========================================================= */

@media (min-width: 1441px) {

    .pc-h2-final-cta {
        min-height: 600px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1440px) {

    .pc-h2-final-cta {
        min-height: 570px;
    }

    .pc-h2-cta-title {
        font-size: 64px;
    }

}


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

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

    .pc-h2-final-cta {

        min-height: 520px;

    }

    .pc-h2-cta-content {

        width: min(760px, 88%);

    }

    .pc-h2-cta-title {

        font-size: 50px;

    }

    .pc-h2-cta-description {

        font-size: 16px;

        max-width: 590px;

    }

    .pc-h2-cta-bottom {

        left: 4%;
        right: 4%;

    }

}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .pc-h2-final-cta {

        min-height: 560px;

    }

    .pc-h2-cta-image img {

        object-position: center;

    }

    .pc-h2-cta-content {

        width: 88%;

    }

    .pc-h2-cta-title {

        font-size: 42px;

        line-height: 1.02;

    }

    .pc-h2-cta-description {

        margin-top: 22px;

        font-size: 16px;

        line-height: 1.65;

    }

    .pc-h2-cta-kicker {

        font-size: 11px;

        letter-spacing: .16em;

    }

    .pc-h2-cta-button {

        height: 58px;

        min-width: 220px;

    }

    .pc-h2-cta-bottom {

        bottom: 18px;

        left: 5%;
        right: 5%;

        font-size: 8px;

        gap: 10px;

    }

}


/* =========================================================
   MOBILE-M
   ========================================================= */

@media (min-width: 390px) and (max-width: 575px) {

    .pc-h2-final-cta {

        min-height: 545px;

    }

    .pc-h2-cta-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(10,14,17,.91),
                rgba(10,14,17,.76),
                rgba(10,14,17,.93)
            );

    }

    .pc-h2-cta-content {

        width: 88%;

    }

    .pc-h2-cta-kicker {

        gap: 9px;

        margin-bottom: 19px;

        font-size: 9px;

        letter-spacing: .14em;

    }

    .pc-h2-cta-kicker-line {

        width: 24px;

    }

    .pc-h2-cta-title {

        font-size: 36px;

        letter-spacing: -.035em;

    }

    .pc-h2-cta-description {

        margin:
            20px
            auto
            27px;

        font-size: 15px;

        line-height: 1.6;

    }

    .pc-h2-cta-button {

        min-width: 205px;

        height: 55px;

        padding-left: 21px;
        padding-right: 20px;

        font-size: 13px;

    }

    .pc-h2-cta-status {

        gap: 8px;

        font-size: 9px;

        letter-spacing: .11em;

    }

    .pc-h2-cta-status i {

        width: 16px;

    }

    .pc-h2-cta-bottom {

        display: none;

    }

    .pc-h2-cta-marker {

        width: 25px;
        height: 25px;

    }

    .pc-h2-cta-marker::before {
        width: 25px;
    }

    .pc-h2-cta-marker::after {
        height: 25px;
    }

    .pc-h2-cta-marker-tl,
    .pc-h2-cta-marker-tr {

        top: 18px;

    }

    .pc-h2-cta-marker-bl,
    .pc-h2-cta-marker-br {

        bottom: 18px;

    }

    .pc-h2-cta-marker-tl,
    .pc-h2-cta-marker-bl {

        left: 18px;

    }

    .pc-h2-cta-marker-tr,
    .pc-h2-cta-marker-br {

        right: 18px;

    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 389px) {

    .pc-h2-final-cta {

        min-height: 520px;

    }

    .pc-h2-cta-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(10,14,17,.93),
                rgba(10,14,17,.79),
                rgba(10,14,17,.95)
            );

    }

    .pc-h2-cta-content {

        width: 91%;

    }

    .pc-h2-cta-kicker {

        margin-bottom: 17px;

        font-size: 8px;

        letter-spacing: .11em;

    }

    .pc-h2-cta-kicker-line {

        width: 19px;

    }

    .pc-h2-cta-title {

        font-size: 32px;

    }

    .pc-h2-cta-description {

        margin:
            18px
            auto
            24px;

        font-size: 14px;

        line-height: 1.58;

    }

    .pc-h2-cta-button {

        min-width: 190px;

        height: 52px;

        font-size: 12px;

        gap: 15px;

    }

    .pc-h2-cta-button-arrow {

        font-size: 20px;

    }

    .pc-h2-cta-status {

        font-size: 8px;

        letter-spacing: .08em;

    }

    .pc-h2-cta-bottom {

        display: none;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-h2-cta-image img,
    .pc-h2-cta-glow,
    .pc-h2-cta-energy,
    .pc-h2-cta-status-dot {

        animation: none;

    }

    .pc-h2-cta-reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }

}

/* ==========================================================================

   POWERCORE — PRODUCTS PAGE
   GLOBAL PRODUCTS STYLES
   File: assets/css/styles.css

   ========================================================================== */


/* ==========================================================================
   01. ROOT VARIABLES
   ========================================================================== */

:root {

    /* ---------------------------------------------------------
       POWERCORE LIGHT SYSTEM
       --------------------------------------------------------- */

    --pc-bg-primary: #F7F5F1;
    --pc-bg-secondary: #EEEAE3;
    --pc-bg-soft: #E6E1D9;
    --pc-bg-card: #FFFDF9;

    --pc-text-primary: #202A30;
    --pc-text-secondary: #596A73;
    --pc-text-muted: #7B878D;

    --pc-orange: #FF8A00;
    --pc-orange-hover: #E87500;
    --pc-orange-soft: rgba(255, 138, 0, 0.10);
    --pc-orange-line: rgba(255, 138, 0, 0.35);

    --pc-border: rgba(32, 42, 48, 0.14);
    --pc-border-strong: rgba(32, 42, 48, 0.22);

    --pc-white: #FFFFFF;
    --pc-black: #000000;

    /* ---------------------------------------------------------
       TYPOGRAPHY
       --------------------------------------------------------- */

    --pc-font:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* ---------------------------------------------------------
       LAYOUT
       --------------------------------------------------------- */

    --pc-container: 1440px;

    --pc-radius-small: 4px;
    --pc-radius-medium: 8px;
    --pc-radius-large: 14px;

    --pc-transition:
        0.3s cubic-bezier(0.22, 1, 0.36, 1);

    --pc-shadow-soft:
        0 12px 40px rgba(32, 42, 48, 0.08);

    --pc-shadow-card:
        0 20px 50px rgba(32, 42, 48, 0.10);
}


/* ==========================================================================
   02. RESET
   ========================================================================== */

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


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


body {
    min-height: 100vh;

    margin: 0;

    background: var(--pc-bg-primary);
    color: var(--pc-text-primary);

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

    font-size: 16px;
    font-weight: 400;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body.pc-products-page {
    overflow-x: hidden;
}


img {
    display: block;
    max-width: 100%;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    border: 0;
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


ul,
ol {
    list-style: none;
}


/* ==========================================================================
   03. GLOBAL FOCUS
   ========================================================================== */

:focus-visible {
    outline: 3px solid rgba(255, 138, 0, 0.55);
    outline-offset: 4px;
}


/* ==========================================================================
   04. PRODUCTS HERO
   ========================================================================== */

.pc-products-hero {

    position: relative;

    width: 100%;
    height: 65vh;
    min-height: 560px;
    max-height: 760px;

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

    overflow: hidden;

    isolation: isolate;

    background: #202A30;
}


/* ---------------------------------------------------------
   Hero image

   The HTML contains the image through CSS background-like
   positioning so the source remains an actual <img>.
   --------------------------------------------------------- */

.pc-products-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.02);

    z-index: -3;
}


/* ---------------------------------------------------------
   Dark technical overlay
   --------------------------------------------------------- */

.pc-products-hero-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 16, 0.88) 0%,
            rgba(10, 14, 16, 0.67) 38%,
            rgba(10, 14, 16, 0.45) 68%,
            rgba(10, 14, 16, 0.64) 100%
        );

    z-index: -2;
}


/* ---------------------------------------------------------
   Subtle orange technical glow
   --------------------------------------------------------- */

.pc-products-hero::after {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    bottom: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 138, 0, 0.20) 0%,
            rgba(255, 138, 0, 0.07) 38%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;
}


/* ---------------------------------------------------------
   Hero content
   --------------------------------------------------------- */

.pc-products-hero-content {

    width: min(900px, calc(100% - 48px));

    margin-inline: auto;

    text-align: center;

    color: #FFFFFF;

    position: relative;
    z-index: 2;

    animation:
        pcHeroReveal 0.8s ease both;
}


@keyframes pcHeroReveal {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   Hero eyebrow
   --------------------------------------------------------- */

.pc-products-eyebrow {

    display: inline-flex;

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

    margin-bottom: 20px;

    color: #FF9D2E;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Hero heading
   --------------------------------------------------------- */

.pc-products-hero h1 {

    max-width: 850px;

    margin: 0 auto;

    color: #FFFFFF;

    font-size: clamp(42px, 5vw, 64px);

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -0.045em;
}


/* ---------------------------------------------------------
   Hero paragraph
   --------------------------------------------------------- */

.pc-products-hero p {

    max-width: 680px;

    margin: 24px auto 0;

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

    font-size: 18px;
    font-weight: 500;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   Hero buttons
   --------------------------------------------------------- */

.pc-products-hero-actions {

    display: flex;

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

    gap: 14px;

    margin-top: 34px;
}


.pc-products-btn {

    min-height: 52px;

    display: inline-flex;

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

    gap: 11px;

    padding: 0 24px;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 0.04em;

    transition:
        transform var(--pc-transition),
        background var(--pc-transition),
        border-color var(--pc-transition),
        color var(--pc-transition);

    border-radius: var(--pc-radius-small);
}


.pc-products-btn-primary {

    background: var(--pc-orange);
    color: #161616;
}


.pc-products-btn-primary:hover {

    background: var(--pc-orange-hover);

    transform: translateY(-2px);
}


.pc-products-btn-secondary {

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

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

    color: #FFFFFF;

    backdrop-filter: blur(8px);
}


.pc-products-btn-secondary:hover {

    border-color: #FFFFFF;

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

    transform: translateY(-2px);
}


/* ==========================================================================
   05. CATALOGUE SECTION
   ========================================================================== */

.pc-products-catalogue {

    position: relative;

    padding:
        90px
        0
        120px;

    background: var(--pc-bg-primary);
}


.pc-products-shell {

    width: min(
        var(--pc-container),
        calc(100% - 80px)
    );

    margin-inline: auto;
}


/* ==========================================================================
   06. MOBILE FILTER BAR
   ========================================================================== */

.pc-products-mobile-filter-bar {

    display: none;
}


/* ==========================================================================
   07. PRODUCTS MAIN LAYOUT
   ========================================================================== */

.pc-products-layout {

    display: grid;

    grid-template-columns:
        minmax(250px, 290px)
        minmax(0, 1fr);

    align-items: start;

    gap: clamp(45px, 5vw, 90px);
}


/* ==========================================================================
   08. STICKY FILTER SIDEBAR
   ========================================================================== */

.pc-products-filter {

    position: sticky;

    top: 30px;

    z-index: 20;

    padding: 30px 26px;

    background: var(--pc-bg-card);

    border: 1px solid var(--pc-border);

    box-shadow: var(--pc-shadow-soft);

    border-radius: var(--pc-radius-medium);

    transition:
        background var(--pc-transition),
        border-color var(--pc-transition);
}


/* ---------------------------------------------------------
   Filter header
   --------------------------------------------------------- */

.pc-products-filter-head {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 25px;

    border-bottom: 1px solid var(--pc-border);
}


.pc-products-filter-head > div > span {

    display: block;

    margin-bottom: 6px;

    color: var(--pc-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.15em;
}


.pc-products-filter-head h2 {

    color: var(--pc-text-primary);

    font-size: 19px;
    font-weight: 800;

    line-height: 1.3;
}


.pc-products-filter-close {

    display: none;

    width: 36px;
    height: 36px;

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

    flex-shrink: 0;

    background: var(--pc-bg-secondary);

    color: var(--pc-text-primary);

    border-radius: 50%;

    transition:
        background var(--pc-transition),
        color var(--pc-transition);
}


.pc-products-filter-close:hover {

    background: var(--pc-orange);
    color: #161616;
}


/* ==========================================================================
   09. FILTER GROUPS
   ========================================================================== */

.pc-products-filter-group {

    padding: 25px 0;

    border-bottom: 1px solid var(--pc-border);
}


.pc-products-filter-label {

    margin-bottom: 15px;

    color: var(--pc-text-primary);

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

    letter-spacing: 0.12em;
}


.pc-filter-option {

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--pc-text-secondary);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color var(--pc-transition);
}


.pc-filter-option + .pc-filter-option {
    margin-top: 5px;
}


.pc-filter-option:hover {
    color: var(--pc-text-primary);
}


/* ---------------------------------------------------------
   Custom checkbox
   --------------------------------------------------------- */

.pc-filter-option input {

    position: relative;

    width: 17px;
    height: 17px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    flex: 0 0 17px;

    border: 1px solid var(--pc-border-strong);

    background: var(--pc-bg-primary);

    border-radius: 3px;

    cursor: pointer;

    transition:
        background var(--pc-transition),
        border-color var(--pc-transition);
}


.pc-filter-option input::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 9px;

    left: 5px;
    top: 2px;

    border:
        solid #171717;

    border-width:
        0
        2px
        2px
        0;

    transform:
        rotate(45deg)
        scale(0);

    transition:
        transform 0.18s ease;
}


.pc-filter-option input:checked {

    background: var(--pc-orange);

    border-color: var(--pc-orange);
}


.pc-filter-option input:checked::after {

    transform:
        rotate(45deg)
        scale(1);
}


/* ==========================================================================
   10. FILTER BOTTOM
   ========================================================================== */

.pc-products-filter-bottom {

    display: flex;

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

    gap: 10px;

    padding-top: 24px;
}


.pc-products-filter-bottom span {

    color: var(--pc-text-muted);

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


.pc-products-filter-bottom button {

    background: transparent;

    color: var(--pc-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    transition:
        color var(--pc-transition);
}


.pc-products-filter-bottom button:hover {

    color: var(--pc-orange-hover);
}


/* ==========================================================================
   11. PRODUCTS RESULTS
   ========================================================================== */

.pc-products-results {
    min-width: 0;
}


/* ---------------------------------------------------------
   Results heading
   --------------------------------------------------------- */

.pc-products-results-head {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 65px;
}


.pc-products-section-kicker {

    display: block;

    margin-bottom: 9px;

    color: var(--pc-orange);

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

    letter-spacing: 0.16em;
}


.pc-products-results-head h2 {

    color: var(--pc-text-primary);

    font-size: clamp(34px, 3.3vw, 44px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


.pc-products-results-head > p {

    flex-shrink: 0;

    color: var(--pc-text-muted);

    font-size: 14px;
    font-weight: 600;
}


/* ==========================================================================
   12. CAPACITY SECTION
   ========================================================================== */

.pc-products-capacity {

    scroll-margin-top: 40px;

    margin-bottom: 105px;
}


.pc-products-capacity:last-of-type {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Capacity heading
   --------------------------------------------------------- */

.pc-products-section-head {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--pc-border);
}


.pc-products-section-head > div > span {

    display: block;

    margin-bottom: 8px;

    color: var(--pc-text-muted);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.15em;
}


.pc-products-section-head h3 {

    color: var(--pc-text-primary);

    font-size: 30px;
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.03em;
}


.pc-products-section-head p {

    max-width: 550px;

    margin-top: 8px;

    color: var(--pc-text-secondary);

    font-size: 15px;
    font-weight: 500;
}


/* ---------------------------------------------------------
   View all
   --------------------------------------------------------- */

.pc-products-view-all {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    padding-bottom: 4px;

    border-bottom: 1px solid var(--pc-orange);

    color: var(--pc-text-primary);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.08em;

    transition:
        color var(--pc-transition),
        gap var(--pc-transition);
}


.pc-products-view-all i {
    color: var(--pc-orange);

    transition:
        transform var(--pc-transition);
}


.pc-products-view-all:hover {

    color: var(--pc-orange);

    gap: 14px;
}


.pc-products-view-all:hover i {

    transform: translateX(3px);
}


/* ==========================================================================
   13. PRODUCT GRID
   ========================================================================== */

.pc-products-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* ==========================================================================
   14. PRODUCT CARD
   ========================================================================== */

.pc-product-card {

    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: var(--pc-bg-card);

    border: 1px solid var(--pc-border);

    border-radius: var(--pc-radius-medium);

    box-shadow:
        0 8px 30px rgba(32, 42, 48, 0.045);

    transition:
        transform var(--pc-transition),
        box-shadow var(--pc-transition),
        border-color var(--pc-transition),
        background var(--pc-transition);
}


.pc-product-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(255, 138, 0, 0.42);

    box-shadow:
        0 20px 45px rgba(32, 42, 48, 0.11);
}


/* ==========================================================================
   15. PRODUCT IMAGE
   ========================================================================== */

.pc-product-image-link {

    display: block;

    overflow: hidden;

    background: #EAE6DE;
}


.pc-product-image {

    position: relative;

    height: 270px;

    overflow: hidden;
}


.pc-product-image::after {

    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(0, 0, 0, 0.08)
        );

    pointer-events: none;
}


.pc-product-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


.pc-product-card:hover .pc-product-image img {

    transform: scale(1.055);
}


/* ==========================================================================
   16. PRODUCT CARD BODY
   ========================================================================== */

.pc-product-card-body {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 24px 22px 22px;
}


/* ---------------------------------------------------------
   Product meta
   --------------------------------------------------------- */

.pc-product-meta {

    display: flex;

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

    gap: 10px;

    margin-bottom: 13px;
}


.pc-product-meta span {

    color: var(--pc-orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.pc-product-meta span:last-child {

    color: var(--pc-text-muted);

    text-align: right;
}


/* ---------------------------------------------------------
   Product title
   --------------------------------------------------------- */

.pc-product-card h4 {

    margin: 0;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.02em;
}


.pc-product-card h4 a {

    color: var(--pc-text-primary);

    transition:
        color var(--pc-transition);
}


.pc-product-card h4 a:hover {

    color: var(--pc-orange);
}


/* ---------------------------------------------------------
   Product description
   --------------------------------------------------------- */

.pc-product-card-body > p {

    margin-top: 11px;

    color: var(--pc-text-secondary);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.65;
}


/* ==========================================================================
   17. PRODUCT ACTION BUTTONS
   ========================================================================== */

.pc-product-actions {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    margin-top: auto;
    padding-top: 23px;
}


.pc-product-btn {

    min-height: 45px;

    display: inline-flex;

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

    padding: 0 10px;

    border-radius: var(--pc-radius-small);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.055em;

    text-align: center;

    transition:
        background var(--pc-transition),
        color var(--pc-transition),
        border-color var(--pc-transition),
        transform var(--pc-transition);
}


.pc-product-btn-primary {

    background: var(--pc-orange);

    color: #171717;

    border: 1px solid var(--pc-orange);
}


.pc-product-btn-primary:hover {

    background: var(--pc-orange-hover);

    border-color: var(--pc-orange-hover);

    transform: translateY(-2px);
}


.pc-product-btn-outline {

    background: transparent;

    color: var(--pc-text-primary);

    border: 1px solid var(--pc-border-strong);
}


.pc-product-btn-outline:hover {

    background: var(--pc-text-primary);

    color: var(--pc-bg-card);

    border-color: var(--pc-text-primary);

    transform: translateY(-2px);
}


/* ==========================================================================
   18. FILTERED CARD STATE
   ========================================================================== */

.pc-product-card.is-filtered-out {

    display: none;
}


.pc-products-capacity.is-empty {

    display: none;
}


/* ==========================================================================
   19. NO RESULTS
   ========================================================================== */

.pc-products-no-results {

    padding: 80px 30px;

    border-top: 1px solid var(--pc-border);
    border-bottom: 1px solid var(--pc-border);

    text-align: center;
}


.pc-products-no-results[hidden] {
    display: none;
}


.pc-products-no-results > i {

    margin-bottom: 20px;

    color: var(--pc-orange);

    font-size: 34px;
}


.pc-products-no-results h3 {

    color: var(--pc-text-primary);

    font-size: 25px;
    font-weight: 800;
}


.pc-products-no-results p {

    max-width: 500px;

    margin: 10px auto 24px;

    color: var(--pc-text-secondary);

    font-size: 15px;
}


.pc-products-no-results button {

    min-height: 46px;

    padding: 0 22px;

    background: var(--pc-orange);

    color: #171717;

    border-radius: var(--pc-radius-small);

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

    letter-spacing: 0.06em;

    transition:
        background var(--pc-transition),
        transform var(--pc-transition);
}


.pc-products-no-results button:hover {

    background: var(--pc-orange-hover);

    transform: translateY(-2px);
}


/* ==========================================================================
   20. TABLET — 1024PX
   ========================================================================== */

@media (max-width: 1199px) {

    .pc-products-shell {

        width: min(
            var(--pc-container),
            calc(100% - 48px)
        );
    }


    .pc-products-layout {

        grid-template-columns:
            240px
            minmax(0, 1fr);

        gap: 34px;
    }


    .pc-products-filter {

        padding: 25px 20px;
    }


    .pc-products-grid {

        gap: 18px;
    }


    .pc-product-image {

        height: 230px;
    }


    .pc-product-card-body {

        padding: 21px 18px 19px;
    }


    .pc-product-card h4 {

        font-size: 18px;
    }


    .pc-product-btn {

        min-height: 43px;

        font-size: 10px;
    }

}


/* ==========================================================================
   21. TABLET — 768PX TO 991PX
   ========================================================================== */

@media (max-width: 991px) {

    .pc-products-hero {

        min-height: 520px;
    }


    .pc-products-catalogue {

        padding-top: 70px;
    }


    .pc-products-layout {

        display: block;
    }


    /* ---------------------------------------------------------
       Mobile filter top bar
       --------------------------------------------------------- */

    .pc-products-mobile-filter-bar {

        display: flex;

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

        gap: 20px;

        margin-bottom: 30px;

        padding: 16px 18px;

        background: var(--pc-bg-card);

        border:
            1px solid var(--pc-border);

        border-radius: var(--pc-radius-medium);
    }


    .pc-products-mobile-filter-info {

        display: flex;

        flex-direction: column;

        gap: 2px;
    }


    .pc-products-filter-kicker {

        color: var(--pc-orange);

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 0.13em;
    }


    .pc-products-mobile-filter-info strong {

        color: var(--pc-text-primary);

        font-size: 15px;
        font-weight: 800;
    }


    .pc-products-filter-trigger {

        min-height: 42px;

        display: inline-flex;

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

        gap: 8px;

        padding: 0 17px;

        background: var(--pc-text-primary);

        color: var(--pc-bg-card);

        border-radius: var(--pc-radius-small);

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

        letter-spacing: 0.06em;

        transition:
            background var(--pc-transition),
            color var(--pc-transition);
    }


    .pc-products-filter-trigger:hover {

        background: var(--pc-orange);

        color: #171717;
    }


    /* ---------------------------------------------------------
       Filter drawer
       --------------------------------------------------------- */

    .pc-products-filter {

        position: fixed;

        top: 0;
        left: 0;

        width: min(360px, 90vw);
        height: 100dvh;

        overflow-y: auto;

        z-index: 1000;

        border-radius: 0;

        padding:
            28px
            25px
            40px;

        transform: translateX(-105%);

        transition:
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

        box-shadow:
            15px 0 50px rgba(0, 0, 0, 0.16);
    }


    .pc-products-filter.is-open {

        transform: translateX(0);
    }


    .pc-products-filter-close {

        display: flex;
    }


    .pc-products-results-head {

        margin-bottom: 55px;
    }


    .pc-products-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .pc-product-image {

        height: 250px;
    }

}


/* ==========================================================================
   22. MOBILE LARGE — 576PX TO 767PX
   ========================================================================== */

@media (max-width: 767px) {

    .pc-products-hero {

        height: 65vh;
        min-height: 500px;
    }


    .pc-products-hero-content {

        width: min(
            100% - 34px,
            650px
        );
    }


    .pc-products-eyebrow {

        margin-bottom: 15px;

        font-size: 11px;
    }


    .pc-products-hero h1 {

        font-size: clamp(38px, 9vw, 48px);

        line-height: 1.07;
    }


    .pc-products-hero p {

        margin-top: 18px;

        font-size: 16px;

        line-height: 1.6;
    }


    .pc-products-hero-actions {

        flex-direction: column;

        width: 100%;

        margin-top: 27px;
    }


    .pc-products-btn {

        width: min(100%, 320px);

        min-height: 50px;
    }


    .pc-products-catalogue {

        padding:
            60px
            0
            85px;
    }


    .pc-products-shell {

        width: calc(100% - 30px);
    }


    .pc-products-results-head {

        display: block;

        margin-bottom: 48px;
    }


    .pc-products-results-head h2 {

        font-size: 34px;
    }


    .pc-products-results-head > p {

        margin-top: 10px;

        font-size: 13px;
    }


    .pc-products-capacity {

        margin-bottom: 75px;
    }


    .pc-products-section-head {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        margin-bottom: 24px;
    }


    .pc-products-section-head h3 {

        font-size: 28px;
    }


    .pc-products-section-head p {

        font-size: 14px;
    }


    .pc-products-view-all {

        align-self: flex-start;
    }


    .pc-products-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .pc-product-image {

        height: 280px;
    }


    .pc-product-card-body {

        padding: 23px 20px 20px;
    }


    .pc-product-card h4 {

        font-size: 20px;
    }


    .pc-product-card-body > p {

        font-size: 14px;
    }


    .pc-product-actions {

        gap: 10px;
    }


    .pc-product-btn {

        min-height: 46px;

        font-size: 11px;
    }

}


/* ==========================================================================
   23. MOBILE SMALL — BELOW 576PX
   ========================================================================== */

@media (max-width: 575px) {

    .pc-products-hero {

        min-height: 480px;
    }


    .pc-products-hero::before {

        background-position: 58% center;
    }


    .pc-products-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(10, 14, 16, 0.58) 0%,
                rgba(10, 14, 16, 0.76) 58%,
                rgba(10, 14, 16, 0.90) 100%
            );
    }


    .pc-products-hero h1 {

        font-size: 38px;

        letter-spacing: -0.035em;
    }


    .pc-products-hero p {

        font-size: 15px;
    }


    .pc-products-shell {

        width: calc(100% - 24px);
    }


    .pc-products-mobile-filter-bar {

        padding: 13px 14px;
    }


    .pc-products-filter-trigger {

        min-height: 40px;

        padding: 0 13px;

        font-size: 11px;
    }


    .pc-products-filter {

        width: min(330px, 92vw);

        padding:
            24px
            20px
            35px;
    }


    .pc-products-results-head h2 {

        font-size: 31px;
    }


    .pc-products-section-head h3 {

        font-size: 26px;
    }


    .pc-product-image {

        height: 245px;
    }


    .pc-product-card-body {

        padding:
            21px
            17px
            18px;
    }


    .pc-product-actions {

        grid-template-columns: 1fr;

        gap: 8px;
    }


    .pc-product-btn {

        width: 100%;
    }

}


/* ==========================================================================
   24. EXTRA SMALL — BELOW 380PX
   ========================================================================== */

@media (max-width: 379px) {

    .pc-products-hero h1 {

        font-size: 34px;
    }


    .pc-products-hero-actions {

        gap: 9px;
    }


    .pc-products-btn {

        min-height: 47px;

        padding: 0 17px;

        font-size: 12px;
    }


    .pc-products-results-head h2 {

        font-size: 28px;
    }


    .pc-products-section-head h3 {

        font-size: 24px;
    }


    .pc-product-image {

        height: 220px;
    }

}


/* ==========================================================================
   25. LARGE LAPTOP / DESKTOP
   ========================================================================== */

@media (min-width: 1440px) {

    .pc-products-hero h1 {

        font-size: 64px;
    }


    .pc-products-layout {

        grid-template-columns:
            285px
            minmax(0, 1fr);

        gap: 80px;
    }


    .pc-product-image {

        height: 290px;
    }


    .pc-products-grid {

        gap: 28px;
    }

}


/* ==========================================================================
   26. ULTRA LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1700px) {

    .pc-products-shell {

        width: min(
            1540px,
            calc(100% - 100px)
        );
    }


    .pc-products-layout {

        grid-template-columns:
            300px
            minmax(0, 1fr);

        gap: 90px;
    }


    .pc-products-hero h1 {

        font-size: 68px;
    }


    .pc-product-image {

        height: 310px;
    }

}


/* ==========================================================================
   27. 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;
    }

}
/* =========================================================
   POWERCORE — PRODUCT FILTER FIX
   IMPORTANT: KEEP AT END OF styles.css
   ========================================================= */


/* ---------------------------------------------------------
   FILTERED PRODUCT
   --------------------------------------------------------- */

.pc-products-filter .pc-filtered-out,
.pc-product-card.pc-filtered-out {
    display: none !important;
}


/* ---------------------------------------------------------
   FILTERED CAPACITY SECTION
   --------------------------------------------------------- */

.pc-products-capacity.pc-filtered-section-empty {
    display: none !important;
}


/* ---------------------------------------------------------
   NO RESULTS
   --------------------------------------------------------- */

.pc-products-no-results[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   FILTER PANEL — LIGHT MODE
   Explicit values prevent global navbar/site styles
   from making the filter unreadable.
   --------------------------------------------------------- */

html[data-theme="light"] .pc-products-filter,
html:not([data-theme="dark"]) .pc-products-filter {
    background: #FFFFFF !important;
    color: #202A30 !important;
    border-color: rgba(32, 42, 48, 0.14) !important;
}


html[data-theme="light"] .pc-products-filter-head h2,
html:not([data-theme="dark"]) .pc-products-filter-head h2 {
    color: #202A30 !important;
}


html[data-theme="light"] .pc-products-filter-head span,
html:not([data-theme="dark"]) .pc-products-filter-head span {
    color: #FF8A00 !important;
}


html[data-theme="light"] .pc-products-filter-label,
html:not([data-theme="dark"]) .pc-products-filter-label {
    color: #596A73 !important;
}


html[data-theme="light"] .pc-products-filter label,
html:not([data-theme="dark"]) .pc-products-filter label {
    color: #202A30 !important;
}


html[data-theme="light"] .pc-products-filter label span,
html:not([data-theme="dark"]) .pc-products-filter label span {
    color: #596A73 !important;
}


html[data-theme="light"] .pc-products-filter label:hover span,
html:not([data-theme="dark"]) .pc-products-filter label:hover span {
    color: #202A30 !important;
}


html[data-theme="light"] .pc-products-filter input {
    accent-color: #FF8A00;
}


html[data-theme="light"] .pc-products-filter-bottom span,
html:not([data-theme="dark"]) .pc-products-filter-bottom span {
    color: #596A73 !important;
}


html[data-theme="light"] .pc-products-filter-bottom button,
html:not([data-theme="dark"]) .pc-products-filter-bottom button {
    color: #FF8A00 !important;
}


/* ---------------------------------------------------------
   FILTER PANEL — DARK MODE
   Explicit values prevent text disappearing.
   --------------------------------------------------------- */

html[data-theme="dark"] .pc-products-filter,
html.dark-mode .pc-products-filter {
    background: #151D21 !important;
    color: #F3F1EC !important;
    border-color: rgba(243, 241, 236, 0.14) !important;
}


html[data-theme="dark"] .pc-products-filter-head,
html.dark-mode .pc-products-filter-head {
    border-color: rgba(243, 241, 236, 0.14) !important;
}


html[data-theme="dark"] .pc-products-filter-head h2,
html.dark-mode .pc-products-filter-head h2 {
    color: #F3F1EC !important;
}


html[data-theme="dark"] .pc-products-filter-head span,
html.dark-mode .pc-products-filter-head span {
    color: #FF9D2E !important;
}


html[data-theme="dark"] .pc-products-filter-label,
html.dark-mode .pc-products-filter-label {
    color: #A7B4BA !important;
}


html[data-theme="dark"] .pc-products-filter label,
html.dark-mode .pc-products-filter label {
    color: #F3F1EC !important;
}


html[data-theme="dark"] .pc-products-filter label span,
html.dark-mode .pc-products-filter label span {
    color: #F3F1EC !important;
}


html[data-theme="dark"] .pc-products-filter label:hover span,
html.dark-mode .pc-products-filter label:hover span {
    color: #FFB14A !important;
}


html[data-theme="dark"] .pc-products-filter input,
html.dark-mode .pc-products-filter input {
    accent-color: #FF9D2E;
}


html[data-theme="dark"] .pc-products-filter-bottom,
html.dark-mode .pc-products-filter-bottom {
    border-color: rgba(243, 241, 236, 0.14);
}


html[data-theme="dark"] .pc-products-filter-bottom span,
html.dark-mode .pc-products-filter-bottom span {
    color: #A7B4BA !important;
}


html[data-theme="dark"] .pc-products-filter-bottom button,
html.dark-mode .pc-products-filter-bottom button {
    color: #FF9D2E !important;
}


html[data-theme="dark"] .pc-products-filter-close,
html.dark-mode .pc-products-filter-close {
    color: #F3F1EC !important;
}


/* ---------------------------------------------------------
   MOBILE FILTER — DARK
   --------------------------------------------------------- */

html[data-theme="dark"] .pc-products-mobile-filter-bar,
html.dark-mode .pc-products-mobile-filter-bar {
    background: #151D21 !important;
    color: #F3F1EC !important;
    border-color: rgba(243, 241, 236, 0.14) !important;
}


html[data-theme="dark"] .pc-products-mobile-filter-bar strong,
html.dark-mode .pc-products-mobile-filter-bar strong {
    color: #F3F1EC !important;
}


html[data-theme="dark"] .pc-products-filter-trigger,
html.dark-mode .pc-products-filter-trigger {
    background: #101619 !important;
    color: #F3F1EC !important;
    border-color: rgba(243, 241, 236, 0.2) !important;
}


html[data-theme="dark"] .pc-products-filter-trigger:hover,
html.dark-mode .pc-products-filter-trigger:hover {
    color: #FF9D2E !important;
    border-color: #FF9D2E !important;
}


/* ---------------------------------------------------------
   MOBILE FILTER — LIGHT
   --------------------------------------------------------- */

html[data-theme="light"] .pc-products-mobile-filter-bar,
html:not([data-theme="dark"]) .pc-products-mobile-filter-bar {
    background: #FFFFFF !important;
    color: #202A30 !important;
}


html[data-theme="light"] .pc-products-filter-trigger,
html:not([data-theme="dark"]) .pc-products-filter-trigger {
    background: #F7F5F1 !important;
    color: #202A30 !important;
    border-color: rgba(32, 42, 48, 0.14) !important;
}


/* ---------------------------------------------------------
   DRAWER BACKGROUND
   --------------------------------------------------------- */

@media (max-width: 991px) {

    html[data-theme="dark"] .pc-products-filter,
    html.dark-mode .pc-products-filter {
        background: #151D21 !important;
    }

    html[data-theme="light"] .pc-products-filter,
    html:not([data-theme="dark"]) .pc-products-filter {
        background: #FFFFFF !important;
    }

}

/* =========================================================
   POWERCORE PRODUCTS
   FILTER VIEWPORT + INDEPENDENT SCROLL FIX
   ========================================================= */


/* =========================================================
   1. FILTER SCROLL BEHAVIOUR
   ========================================================= */

.pc-products-filter {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}


/* =========================================================
   2. LAPTOP / DESKTOP
      992px and above
   ========================================================= */

@media (min-width: 992px) {

    /*
     * The navbar is sticky above the catalogue.
     * Adjust this single value if your navbar height changes.
     */
    :root {
        --pc-navbar-height: 78px;
    }


    /*
     * Main filter panel.
     *
     * It remains attached to the viewport while the
     * product area continues to scroll normally.
     */
    .pc-products-filter {

        position: sticky !important;

        top: var(--pc-navbar-height) !important;

        height: calc(
            100vh - var(--pc-navbar-height)
        ) !important;

        max-height: calc(
            100vh - var(--pc-navbar-height)
        ) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior-y: contain !important;

        touch-action: pan-y !important;

        scrollbar-width: thin;

        z-index: 20;
    }


    /*
     * IMPORTANT:
     * Do not allow the filter's internal content to
     * stretch the filter beyond the viewport.
     */
    .pc-products-filter > * {
        max-width: 100%;
    }


    /*
     * Chrome / Edge scrollbar
     */
    .pc-products-filter::-webkit-scrollbar {
        width: 7px;
    }

    .pc-products-filter::-webkit-scrollbar-track {
        background: transparent;
    }

    .pc-products-filter::-webkit-scrollbar-thumb {
        background: rgba(89, 106, 115, 0.45);
        border-radius: 20px;
    }

    .pc-products-filter::-webkit-scrollbar-thumb:hover {
        background: #FF8A00;
    }


    /*
     * DARK MODE FILTER SCROLLBAR
     */
    html[data-theme="dark"] .pc-products-filter::-webkit-scrollbar-thumb,
    html.dark-mode .pc-products-filter::-webkit-scrollbar-thumb {
        background: rgba(167, 180, 186, 0.42);
    }

    html[data-theme="dark"] .pc-products-filter::-webkit-scrollbar-thumb:hover,
    html.dark-mode .pc-products-filter::-webkit-scrollbar-thumb:hover {
        background: #FF9D2E;
    }
}


/* =========================================================
   3. LAPTOP-L
      Prevent oversized filter from affecting layout
   ========================================================= */

@media (min-width: 1440px) {

    .pc-products-filter {

        height: calc(100vh - 78px) !important;

        max-height: calc(100vh - 78px) !important;

        overflow-y: auto !important;

        overscroll-behavior: contain !important;
    }
}


/* =========================================================
   4. TABLET
      768px – 991px
   ========================================================= */

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

    .pc-products-filter {

        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        height: 100dvh !important;

        max-height: 100dvh !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        overscroll-behavior-y: contain !important;

        touch-action: pan-y !important;

        scrollbar-width: thin;

        z-index: 30;
    }


    .pc-products-filter::-webkit-scrollbar {
        width: 6px;
    }

    .pc-products-filter::-webkit-scrollbar-track {
        background: transparent;
    }

    .pc-products-filter::-webkit-scrollbar-thumb {
        background: rgba(89, 106, 115, 0.45);
    }


    html[data-theme="dark"] .pc-products-filter::-webkit-scrollbar-thumb,
    html.dark-mode .pc-products-filter::-webkit-scrollbar-thumb {
        background: rgba(167, 180, 186, 0.42);
    }
}


/* =========================================================
   5. MOBILE-S / MOBILE-M / MOBILE-L
      Up to 767px
   ========================================================= */

@media (max-width: 767px) {

    /*
     * The filter becomes the mobile filter drawer.
     *
     * It occupies the viewport instead of being limited
     * by the product section height.
     */
    .pc-products-filter {

        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;

        left: 0 !important;
        right: auto !important;

        width: min(
            88vw,
            380px
        ) !important;

        height: 100dvh !important;

        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain !important;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-y;

        z-index: 9999;

        scrollbar-width: thin;

        /*
         * Closed state
         */
        transform: translateX(-105%) !important;

        visibility: hidden;

        pointer-events: none;

        transition:
            transform 0.3s ease,
            visibility 0.3s ease;
    }


    /*
     * OPEN FILTER
     */
    .pc-products-filter.is-open,
    .pc-products-filter.active {

        transform: translateX(0) !important;

        visibility: visible;

        pointer-events: auto;
    }


    /*
     * RTL mobile drawer
     */
    html[dir="rtl"] .pc-products-filter {

        left: auto !important;

        right: 0 !important;

        transform: translateX(105%) !important;
    }


    html[dir="rtl"] .pc-products-filter.is-open,
    html[dir="rtl"] .pc-products-filter.active {

        transform: translateX(0) !important;
    }


    /*
     * Mobile scrollbar
     */
    .pc-products-filter::-webkit-scrollbar {
        width: 6px;
    }

    .pc-products-filter::-webkit-scrollbar-track {
        background: transparent;
    }

    .pc-products-filter::-webkit-scrollbar-thumb {
        background: rgba(89, 106, 115, 0.5);
        border-radius: 10px;
    }


    html[data-theme="dark"] .pc-products-filter::-webkit-scrollbar-thumb,
    html.dark-mode .pc-products-filter::-webkit-scrollbar-thumb {

        background: rgba(167, 180, 186, 0.45);
    }


    html[data-theme="dark"] .pc-products-filter::-webkit-scrollbar-thumb:hover,
    html.dark-mode .pc-products-filter::-webkit-scrollbar-thumb:hover {

        background: #FF9D2E;
    }
}


/* =========================================================
   6. VERY SMALL MOBILE
      320px – 374px
   ========================================================= */

@media (max-width: 374px) {

    .pc-products-filter {

        width: 92vw !important;

        height: 100dvh !important;

        max-height: 100dvh !important;
    }
}


/* =========================================================
   7. MOBILE-S
      Extra protection for 320px screens
   ========================================================= */

@media (max-width: 340px) {

    .pc-products-filter {

        width: 94vw !important;
    }

}


/* =========================================================
   8. PREVENT PAGE SCROLL WHEN MOBILE FILTER IS OPEN
   ========================================================= */

body.pc-filter-open {

    overflow: hidden !important;

    height: 100dvh !important;
}


/*
 * iOS / mobile browser protection
 */
body.pc-filter-open {

    overscroll-behavior: none !important;
}


/* =========================================================
   9. FILTER CONTENT MUST NOT CREATE EXTRA HEIGHT
   ========================================================= */

.pc-products-filter-inner,
.pc-products-filter-content {

    max-height: none;

    min-height: 0;
}


/* =========================================================
   10. FILTER SECTIONS
   ========================================================= */

.pc-products-filter .pc-filter-group {

    flex-shrink: 0;
}


/* =========================================================
   11. FILTER CHECKBOX AREA
   ========================================================= */

.pc-products-filter label {

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   12. MOBILE FILTER HEADER STAYS VISIBLE
   ========================================================= */

@media (max-width: 767px) {

    .pc-products-filter-head {

        position: sticky;

        top: 0;

        z-index: 5;

        background: inherit;
    }
}


/* =========================================================
   13. TABLET FILTER HEADER
   ========================================================= */

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

    .pc-products-filter-head {

        position: sticky;

        top: 0;

        z-index: 5;

        background: inherit;
    }
}


/* =========================================================
   14. DARK MODE STICKY HEADER
   ========================================================= */

html[data-theme="dark"] .pc-products-filter-head,
html.dark-mode .pc-products-filter-head {

    background: #151D21;
}


/* =========================================================
   15. LIGHT MODE STICKY HEADER
   ========================================================= */

html[data-theme="light"] .pc-products-filter-head,
html:not([data-theme="dark"]) .pc-products-filter-head {

    background: #FFFFFF;
}

/* =========================================================
   POWERCORE
   1–5 kVA CAPACITY PAGE
   GLOBAL / LAYOUT / RESPONSIVE
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    min-width: 320px;
}

body {
    font-family: "Manrope", sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

body.pc-filter-open {
    overflow: hidden !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

::selection {
    background: var(--accent);
    color: var(--button-text);
}


/* =========================================================
   TOP TOOLBAR
   ========================================================= */

.pc-capacity-toolbar {
    min-height: 64px;
    width: 100%;
    padding: 0 clamp(16px, 3vw, 48px);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;

    background: var(--toolbar-bg);
    color: var(--toolbar-text);

    border-bottom: 1px solid var(--border-color);

    position: relative;
    z-index: 50;
}

.pc-capacity-back {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;

    width: max-content;

    color: var(--toolbar-muted);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.9px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.pc-capacity-back:hover {
    color: var(--accent);
    transform: translateX(-3px);
}

.pc-capacity-toolbar-brand {
    text-align: center;

    color: var(--toolbar-text);

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.pc-capacity-toolbar-brand span {
    color: var(--accent);
}

.pc-capacity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pc-capacity-control {
    min-width: 40px;
    height: 38px;

    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--toolbar-border);
    background: var(--toolbar-control);
    color: var(--toolbar-text);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.pc-capacity-control:hover {
    color: var(--accent);
    border-color: var(--accent);
}


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

.pc-products-hero {
    position: relative;

    height: 65vh;
    min-height: 540px;

    display: grid;
    place-items: center;

    overflow: hidden;

    color: #ffffff;
    text-align: center;

    isolation: isolate;
}

.pc-products-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.02);

    z-index: -4;
}

.pc-products-hero-pattern {
    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: 0.32;

    background-image:
        linear-gradient(
            rgba(255, 138, 0, 0.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 138, 0, 0.18) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 25%,
            #000 75%,
            transparent
        );
}

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

    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(8, 12, 14, 0.60),
            rgba(8, 12, 14, 0.84)
        );
}

.pc-products-hero-content {
    position: relative;
    z-index: 2;

    width: min(
        900px,
        calc(100% - 40px)
    );

    margin: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.pc-products-eyebrow {
    color: #FF9D2E;

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

    letter-spacing: 2.3px;
    text-transform: uppercase;
}

.pc-capacity-number {
    margin-top: 18px;

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

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

.pc-products-hero h1 {
    max-width: 850px;

    margin: 12px 0 18px;

    color: #ffffff;

    font-size: clamp(
        46px,
        6vw,
        76px
    );

    line-height: 1;
    font-weight: 800;

    letter-spacing: -2.6px;
}

.pc-products-hero p {
    max-width: 690px;

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

    font-size: clamp(
        16px,
        1.35vw,
        19px
    );

    line-height: 1.75;
}

.pc-products-hero-actions {
    margin-top: 32px;

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

    gap: 13px;
    flex-wrap: wrap;
}

.pc-products-btn {
    min-height: 52px;

    padding: 13px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 1px solid transparent;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.8px;

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

.pc-products-btn:hover {
    transform: translateY(-2px);
}

.pc-products-btn-primary {
    background: var(--accent);
    color: var(--button-text);
    border-color: var(--accent);
}

.pc-products-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.pc-products-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.42);
    color: #ffffff;
}

.pc-products-btn-secondary:hover {
    border-color: #FF9D2E;
    color: #ffffff;
    background: rgba(255, 157, 46, 0.12);
}


/* =========================================================
   CATALOGUE
   ========================================================= */

.pc-products-catalogue {
    padding: 88px 0 110px;

    background: var(--bg-primary);
}

.pc-products-shell {
    width: min(
        1480px,
        calc(100% - 56px)
    );

    margin: 0 auto;
}


/* =========================================================
   MOBILE FILTER BAR
   ========================================================= */

.pc-products-mobile-filter-bar {
    display: none;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.pc-products-layout {
    display: grid;

    grid-template-columns:
        minmax(255px, 280px)
        minmax(0, 1fr);

    gap: clamp(
        28px,
        3vw,
        48px
    );

    align-items: start;
}


/* =========================================================
   FILTER
   ========================================================= */

.pc-products-filter {
    position: sticky;

    top: 20px;

    align-self: start;

    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior-y: contain;

    scrollbar-width: thin;

    border: 1px solid var(--border-color);

    background: var(--surface);

    padding: 24px 21px;

    z-index: 20;

    color: var(--text-primary);
}

.pc-products-filter::-webkit-scrollbar {
    width: 6px;
}

.pc-products-filter::-webkit-scrollbar-track {
    background: transparent;
}

.pc-products-filter::-webkit-scrollbar-thumb {
    background: var(--filter-scrollbar);
    border-radius: 20px;
}

.pc-products-filter::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.pc-products-filter-head {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 14px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--border-color);
}

.pc-products-filter-head > div {
    min-width: 0;
}

.pc-products-filter-head span {
    color: var(--accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.pc-products-filter-head h2 {
    margin-top: 8px;

    color: var(--text-primary);

    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;

    letter-spacing: -0.35px;
}

.pc-products-filter-head p {
    margin-top: 9px;

    color: var(--text-secondary);

    font-size: 12px;
    line-height: 1.65;
}

.pc-products-filter-close {
    display: none;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border: 1px solid var(--border-color);

    background: transparent;

    color: var(--text-primary);

    font-size: 18px;
}

.pc-products-filter-group {
    padding: 23px 0;

    border-bottom: 1px solid var(--border-color);
}

.pc-products-filter-label {
    margin-bottom: 11px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.55px;
}

.pc-products-filter label {
    min-height: 34px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 5px 0;

    color: var(--text-primary);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;
}

.pc-products-filter label span {
    color: inherit;
}

.pc-products-filter label:hover {
    color: var(--accent);
}

.pc-products-filter input {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    accent-color: var(--accent);

    cursor: pointer;
}

.pc-products-filter-bottom {
    display: flex;

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

    gap: 12px;

    padding-top: 20px;
}

.pc-products-filter-bottom span {
    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 700;
}

.pc-products-filter-bottom button {
    border: 0;

    background: transparent;

    color: var(--accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}

.pc-products-filter-bottom button:hover {
    color: var(--accent-hover);
}


/* =========================================================
   RESULTS
   ========================================================= */

.pc-products-results {
    min-width: 0;
}

.pc-products-results-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 42px;
    padding-bottom: 22px;

    border-bottom: 1px solid var(--border-color);
}

.pc-products-section-kicker {
    color: var(--accent);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

.pc-products-results-head h2 {
    margin-top: 7px;

    color: var(--text-primary);

    font-size: clamp(
        31px,
        3vw,
        46px
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.pc-products-results-head p {
    color: var(--text-secondary);

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.pc-products-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.pc-product-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: var(--surface);

    border: 1px solid var(--border-color);

    color: var(--text-primary);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.pc-product-card:hover {
    transform: translateY(-4px);

    border-color: rgba(
        255,
        138,
        0,
        0.45
    );

    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, 0.08);
}

.pc-product-image-link {
    display: block;

    overflow: hidden;
}

.pc-product-image {
    height: 230px;

    overflow: hidden;

    background: var(--image-bg);
}

.pc-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.5s ease;
}

.pc-product-card:hover
.pc-product-image img {
    transform: scale(1.045);
}

.pc-product-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 20px 19px 19px;
}

.pc-product-meta {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;

    color: var(--accent);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.pc-product-card h4 {
    margin-bottom: 9px;

    color: var(--text-primary);

    font-size: 19px;
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.25px;
}

.pc-product-card h4 a {
    color: inherit;
}

.pc-product-card h4 a:hover {
    color: var(--accent);
}

.pc-product-card p {
    margin-bottom: 20px;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.7;
}

.pc-product-actions {
    margin-top: auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.pc-product-btn {
    min-height: 44px;

    padding: 10px 8px;

    display: inline-flex;

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

    text-align: center;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.55px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.pc-product-btn-primary {
    background: var(--accent);

    border: 1px solid var(--accent);

    color: var(--button-text);
}

.pc-product-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.pc-product-btn-outline {
    background: transparent;

    border: 1px solid var(--border-color);

    color: var(--text-primary);
}

.pc-product-btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}


/* =========================================================
   FILTERED PRODUCTS
   IMPORTANT: display none must win over card display.
   ========================================================= */

.pc-product-card.pc-filtered-out,
.pc-products-filter .pc-filtered-out {
    display: none !important;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

.pc-products-no-results {
    margin-top: 30px;

    padding: 65px 20px;

    text-align: center;

    background: var(--surface);

    border: 1px solid var(--border-color);

    color: var(--text-primary);
}

.pc-products-no-results[hidden] {
    display: none !important;
}

.pc-products-no-results i {
    margin-bottom: 17px;

    color: var(--accent);

    font-size: 28px;
}

.pc-products-no-results h3 {
    margin-bottom: 8px;

    color: var(--text-primary);

    font-size: 22px;
    font-weight: 800;
}

.pc-products-no-results p {
    margin-bottom: 18px;

    color: var(--text-secondary);

    font-size: 14px;
}

.pc-products-no-results button {
    border: 0;

    background: transparent;

    color: var(--accent);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

.pc-capacity-bottom-nav {
    margin-top: 70px;
    padding-top: 22px;

    border-top: 1px solid var(--border-color);

    display: flex;

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

    gap: 20px;
}

.pc-capacity-bottom-nav a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--accent);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.8px;
}

.pc-capacity-bottom-nav a:hover {
    color: var(--accent-hover);
}


/* =========================================================
   DESKTOP / LAPTOP-L
   1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .pc-products-shell {
        width: min(
            1480px,
            calc(100% - 72px)
        );
    }

    .pc-products-layout {
        grid-template-columns:
            290px
            minmax(0, 1fr);

        gap: 52px;
    }

    .pc-product-image {
        height: 245px;
    }

}


/* =========================================================
   LAPTOP-L / LARGE LAPTOP
   1200px – 1439px
   ========================================================= */

@media (min-width: 1200px)
and (max-width: 1439px) {

    .pc-products-shell {
        width: min(
            1280px,
            calc(100% - 52px)
        );
    }

    .pc-products-layout {
        grid-template-columns:
            270px
            minmax(0, 1fr);

        gap: 36px;
    }

    .pc-product-image {
        height: 225px;
    }

}


/* =========================================================
   LAPTOP
   992px – 1199px
   ========================================================= */

@media (min-width: 992px)
and (max-width: 1199px) {

    .pc-products-shell {
        width: calc(100% - 42px);
    }

    .pc-products-layout {
        grid-template-columns:
            250px
            minmax(0, 1fr);

        gap: 28px;
    }

    .pc-products-grid {
        gap: 17px;
    }

    .pc-product-image {
        height: 205px;
    }

    .pc-product-actions {
        grid-template-columns: 1fr;
    }

    .pc-product-btn {
        min-height: 43px;
    }

}


/* =========================================================
   TABLET
   768px – 991px
   ========================================================= */

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

    .pc-capacity-toolbar {
        min-height: 60px;
    }

    .pc-products-hero {
        min-height: 510px;
        height: 65vh;
    }

    .pc-products-catalogue {
        padding-top: 62px;
    }

    .pc-products-shell {
        width: calc(100% - 36px);
    }

    .pc-products-mobile-filter-bar {
        display: flex;

        position: sticky;
        top: 0;

        z-index: 30;

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

        gap: 18px;

        margin-bottom: 25px;

        padding: 13px 15px;

        background: var(--surface);

        border: 1px solid var(--border-color);

        box-shadow:
            0 8px 24px
            rgba(0, 0, 0, 0.06);
    }

    .pc-products-mobile-filter-bar > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pc-products-filter-kicker {
        color: var(--accent);

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 1.5px;
    }

    .pc-products-mobile-filter-bar strong {
        color: var(--text-primary);

        font-size: 13px;
        font-weight: 800;
    }

    .pc-products-filter-trigger {
        min-height: 40px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 8px;

        padding: 9px 13px;

        background: var(--control-bg);

        border: 1px solid var(--border-color);

        color: var(--text-primary);

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 0.9px;
    }

    .pc-products-layout {
        display: block;
    }

    /*
     * Independent tablet filter.
     */
    .pc-products-filter {
        position: fixed;

        top: 0;
        bottom: 0;

        left: 0;
        right: auto;

        width: min(
            380px,
            88vw
        );

        height: 100dvh;
        max-height: 100dvh;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;

        transform: translateX(-105%);

        transition:
            transform 0.3s ease;

        background: var(--surface);

        box-shadow:
            20px 0 50px
            rgba(0, 0, 0, 0.24);

        padding: 25px 22px;

        z-index: 10001;
    }

    .pc-products-filter.is-open {
        transform: translateX(0);
    }

    .pc-products-filter-close {
        display: inline-flex;

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

    .pc-products-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 18px;
    }

    .pc-product-image {
        height: 220px;
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
   480px – 767px
   ========================================================= */

@media (min-width: 480px)
and (max-width: 767px) {

    .pc-capacity-toolbar {
        min-height: 58px;

        padding:
            0 15px;

        grid-template-columns:
            1fr auto;

        gap: 10px;
    }

    .pc-capacity-toolbar-brand {
        display: none;
    }

    .pc-capacity-back span {
        display: inline;
    }

    .pc-capacity-controls {
        gap: 6px;
    }

    .pc-capacity-control {
        min-width: 37px;
        height: 36px;
        padding: 0 9px;
    }

    .pc-products-hero {
        height: 65vh;
        min-height: 510px;
    }

    .pc-products-hero-content {
        width: calc(100% - 30px);
    }

    .pc-products-hero h1 {
        font-size: clamp(
            40px,
            10vw,
            52px
        );

        letter-spacing: -1.7px;
    }

    .pc-products-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .pc-products-hero-actions {
        width: 100%;
        margin-top: 27px;
    }

    .pc-products-btn {
        min-height: 49px;
    }

    .pc-products-catalogue {
        padding: 44px 0 75px;
    }

    .pc-products-shell {
        width: calc(100% - 28px);
    }

    .pc-products-mobile-filter-bar {
        display: flex;

        position: sticky;
        top: 0;

        z-index: 30;

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

        gap: 10px;

        margin-bottom: 25px;

        padding: 12px 13px;

        background: var(--surface);

        border: 1px solid var(--border-color);

        box-shadow:
            0 8px 24px
            rgba(0, 0, 0, 0.06);
    }

    .pc-products-mobile-filter-bar > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pc-products-filter-kicker {
        color: var(--accent);

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 1.4px;
    }

    .pc-products-mobile-filter-bar strong {
        color: var(--text-primary);

        font-size: 12px;
        font-weight: 800;
    }

    .pc-products-filter-trigger {
        min-height: 39px;

        display: inline-flex;
        align-items: center;

        gap: 7px;

        padding: 9px 11px;

        background: var(--control-bg);

        border: 1px solid var(--border-color);

        color: var(--text-primary);

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 0.8px;
    }

    .pc-products-layout {
        display: block;
    }

    .pc-products-filter {
        position: fixed;

        top: 0;
        bottom: 0;

        left: 0;
        right: auto;

        width: min(
            380px,
            88vw
        );

        height: 100dvh;
        max-height: 100dvh;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;

        transform: translateX(-105%);

        transition:
            transform 0.3s ease;

        background: var(--surface);

        box-shadow:
            20px 0 50px
            rgba(0, 0, 0, 0.24);

        padding: 22px 19px;

        z-index: 10001;
    }

    .pc-products-filter.is-open {
        transform: translateX(0);
    }

    .pc-products-filter-close {
        display: inline-flex;

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

    .pc-products-results-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 11px;

        margin-bottom: 34px;
    }

    .pc-products-results-head h2 {
        font-size: 32px;
    }

    .pc-products-results-head p {
        white-space: normal;
    }

    .pc-products-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .pc-product-image {
        height: 245px;
    }

}


/* =========================================================
   MOBILE-S
   320px – 479px
   ========================================================= */

@media (max-width: 479px) {

    .pc-capacity-toolbar {
        min-height: 56px;

        padding: 0 12px;

        grid-template-columns:
            1fr auto;

        gap: 8px;
    }

    .pc-capacity-toolbar-brand {
        display: none;
    }

    .pc-capacity-back {
        font-size: 10px;
        letter-spacing: 0.7px;
    }

    .pc-capacity-back span {
        display: inline;
    }

    .pc-capacity-controls {
        gap: 5px;
    }

    .pc-capacity-control {
        min-width: 34px;
        height: 34px;

        padding: 0 7px;

        font-size: 9px;
    }

    .pc-products-hero {
        height: 65vh;
        min-height: 500px;
    }

    .pc-products-hero-content {
        width: calc(100% - 26px);
    }

    .pc-products-eyebrow {
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    .pc-capacity-number {
        font-size: 9px;
    }

    .pc-products-hero h1 {
        margin-top: 10px;

        font-size: 38px;

        letter-spacing: -1.4px;
    }

    .pc-products-hero p {
        font-size: 14px;
        line-height: 1.6;
    }

    .pc-products-hero-actions {
        width: 100%;

        flex-direction: column;

        margin-top: 25px;

        gap: 9px;
    }

    .pc-products-btn {
        width: 100%;

        min-height: 48px;

        padding:
            12px 14px;

        font-size: 10px;
    }

    .pc-products-catalogue {
        padding:
            38px 0 65px;
    }

    .pc-products-shell {
        width: calc(100% - 22px);
    }

    .pc-products-mobile-filter-bar {
        display: flex;

        position: sticky;
        top: 0;

        z-index: 30;

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

        gap: 8px;

        margin-bottom: 22px;

        padding: 11px;

        background: var(--surface);

        border: 1px solid var(--border-color);
    }

    .pc-products-mobile-filter-bar > div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .pc-products-filter-kicker {
        color: var(--accent);

        font-size: 8px;
        font-weight: 800;

        letter-spacing: 1.2px;
    }

    .pc-products-mobile-filter-bar strong {
        color: var(--text-primary);

        font-size: 11px;
        font-weight: 800;
    }

    .pc-products-filter-trigger {
        min-height: 37px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 6px;

        padding:
            8px 10px;

        background: var(--control-bg);

        border: 1px solid var(--border-color);

        color: var(--text-primary);

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 0.6px;
    }

    .pc-products-layout {
        display: block;
    }

    /*
     * MOBILE FILTER:
     * completely independent viewport scroll.
     */
    .pc-products-filter {
        position: fixed;

        top: 0;
        bottom: 0;

        left: 0;
        right: auto;

        width: min(
            380px,
            90vw
        );

        height: 100dvh;
        max-height: 100dvh;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        transform: translateX(-105%);

        transition:
            transform 0.3s ease;

        background: var(--surface);

        box-shadow:
            16px 0 40px
            rgba(0, 0, 0, 0.24);

        padding:
            20px 17px;

        z-index: 10001;
    }

    .pc-products-filter.is-open {
        transform: translateX(0);
    }

    .pc-products-filter-close {
        display: inline-flex;

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

        width: 36px;
        height: 36px;
    }

    .pc-products-filter-head h2 {
        font-size: 18px;
    }

    .pc-products-filter-head p {
        font-size: 11px;
    }

    .pc-products-filter label {
        min-height: 35px;

        font-size: 13px;
    }

    .pc-products-filter-group {
        padding: 20px 0;
    }

    .pc-products-results-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 30px;
    }

    .pc-products-section-kicker {
        font-size: 9px;
    }

    .pc-products-results-head h2 {
        font-size: 29px;

        letter-spacing: -0.9px;
    }

    .pc-products-results-head p {
        font-size: 12px;

        white-space: normal;
    }

    .pc-products-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .pc-product-image {
        height: 220px;
    }

    .pc-product-card-body {
        padding:
            18px 16px 17px;
    }

    .pc-product-card h4 {
        font-size: 18px;
    }

    .pc-product-card p {
        font-size: 12px;
    }

    .pc-product-actions {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .pc-product-btn {
        min-height: 44px;

        font-size: 10px;
    }

    .pc-capacity-bottom-nav {
        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }

    .pc-capacity-bottom-nav a {
        justify-content: center;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   320px – 374px
   ========================================================= */

@media (max-width: 374px) {

    .pc-products-shell {
        width: calc(100% - 18px);
    }

    .pc-capacity-back span {
        display: none;
    }

    .pc-products-hero h1 {
        font-size: 35px;
    }

    .pc-products-hero p {
        font-size: 13px;
    }

    .pc-product-image {
        height: 205px;
    }

    .pc-products-filter {
        width: 92vw;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

@media (max-width: 1199px) {

    body.pc-capacity-page .pc-navbar {
        position: fixed;
    }

    body.pc-capacity-page > main {
        padding-top: 78px;
    }
}

@media (max-width: 991px) {

    body.pc-capacity-page > main {
        padding-top: 72px;
    }
}

@media (max-width: 768px) {

    body.pc-capacity-page > main {
        padding-top: 68px;
    }
}

/* =========================================================
   POWERCORE
   6–20 kVA PRODUCTS PAGE
   GLOBAL LIGHT MODE
========================================================= */

:root {

    --pc-bg: #F7F5F1;
    --pc-surface: #FFFFFF;
    --pc-surface-2: #EFECE6;

    --pc-text: #202A30;
    --pc-text-soft: #596A73;
    --pc-text-muted: #738088;

    --pc-border: rgba(32, 42, 48, 0.14);
    --pc-border-strong: rgba(32, 42, 48, 0.25);

    --pc-orange: #FF8A00;
    --pc-orange-hover: #E87500;

    --pc-black: #101619;

    --pc-danger: #C94F49;

    --pc-shadow:
        0 20px 60px rgba(16, 22, 25, 0.08);

    --pc-radius: 8px;

    --pc-filter-width: 290px;

    --pc-transition:
        220ms ease;

}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--pc-bg);
    color: var(--pc-text);

    font-family: "Manrope", sans-serif;

    font-size: 16px;
    line-height: 1.6;

    overflow-x: hidden;

    transition:
        background-color var(--pc-transition),
        color var(--pc-transition);
}

body.pc-filter-open {
    overflow: hidden;
}

button,
input,
a {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   TOOLBAR
========================================================= */

.pc-catalog-toolbar {
    width: 100%;

    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        12px
        clamp(18px, 4vw, 64px);

    background: var(--pc-surface);

    border-bottom:
        1px solid var(--pc-border);

    position: relative;
    z-index: 100;

    transition:
        background-color var(--pc-transition),
        border-color var(--pc-transition);
}

.pc-catalog-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--pc-text);

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

    transition:
        color var(--pc-transition),
        transform var(--pc-transition);
}

.pc-catalog-back:hover {
    color: var(--pc-orange);
    transform: translateX(-3px);
}

.pc-catalog-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-control-btn,
.pc-mobile-filter-trigger {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 14px;

    border:
        1px solid var(--pc-border-strong);

    background: var(--pc-surface);

    color: var(--pc-text);

    font-size: 13px;
    font-weight: 800;

    transition:
        background-color var(--pc-transition),
        color var(--pc-transition),
        border-color var(--pc-transition);
}

.pc-control-btn:hover,
.pc-mobile-filter-trigger:hover {
    border-color: var(--pc-orange);
    color: var(--pc-orange);
}

.pc-mobile-filter-trigger {
    display: none;
}


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

.pc-products-hero {
    position: relative;

    min-height: 65vh;

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

    overflow: hidden;

    background: var(--pc-black);

    isolation: isolate;
}

.pc-products-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.02);

    z-index: -3;
}

.pc-products-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(16, 22, 25, 0.94),
            rgba(16, 22, 25, 0.72),
            rgba(16, 22, 25, 0.55)
        );
}

.pc-products-hero-content {
    width: min(900px, 92%);

    margin: auto;

    text-align: center;

    color: #F7F5F1;
}

.pc-products-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--pc-orange);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.pc-products-hero-content h1 {
    margin: 0 auto;

    max-width: 850px;

    color: #FFFFFF;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.06;
    font-weight: 800;

    letter-spacing: -0.04em;
}

.pc-products-hero-content p {
    max-width: 700px;

    margin:
        24px auto
        0;

    color: #E7E9E9;

    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.75;
}

.pc-products-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


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

.pc-products-btn {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding:
        0 22px;

    border: 1px solid transparent;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.02em;

    transition:
        transform var(--pc-transition),
        background-color var(--pc-transition),
        color var(--pc-transition),
        border-color var(--pc-transition);
}

.pc-products-btn:hover {
    transform: translateY(-2px);
}

.pc-products-btn-primary {
    background: var(--pc-orange);
    color: #111111;
}

.pc-products-btn-primary:hover {
    background: var(--pc-orange-hover);
    color: #FFFFFF;
}

.pc-products-btn-secondary {
    background: transparent;
    color: #FFFFFF;

    border-color: rgba(255, 255, 255, 0.55);
}

.pc-products-btn-secondary:hover {
    background: #FFFFFF;
    color: var(--pc-black);
}

.pc-products-hero .pc-products-btn-primary,
.pc-products-hero .pc-products-btn-secondary {
    background: var(--accent);
    border-color: var(--accent);
    color: #202A30;
}

.pc-products-hero .pc-products-btn-primary:hover,
.pc-products-hero .pc-products-btn-secondary:hover {
    background: #FFB14A;
    border-color: #FFB14A;
    color: #202A30;
    box-shadow: 0 8px 24px rgba(255, 138, 0, .3);
}

.pc-product-btn {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 17px;

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

    white-space: nowrap;

    transition:
        background-color var(--pc-transition),
        color var(--pc-transition),
        border-color var(--pc-transition),
        transform var(--pc-transition);
}

.pc-product-btn:hover {
    transform: translateY(-1px);
}

.pc-product-btn-primary {
    background: var(--pc-orange);
    color: #111111;
}

.pc-product-btn-primary:hover {
    background: var(--pc-orange-hover);
    color: #FFFFFF;
}

.pc-product-btn-outline {
    background: transparent;
    color: var(--pc-text);

    border: 1px solid var(--pc-border-strong);
}

.pc-product-btn-outline:hover {
    border-color: var(--pc-orange);
    color: var(--pc-orange);
}


/* =========================================================
   CATALOGUE SHELL
========================================================= */

.pc-products-shell {
    width: 100%;

    padding:
        clamp(40px, 6vw, 80px)
        clamp(18px, 4vw, 64px);
}

.pc-products-layout {
    width: min(1480px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        var(--pc-filter-width)
        minmax(0, 1fr);

    gap:
        clamp(30px, 4vw, 58px);

    align-items: start;
}


/* =========================================================
   FILTER
========================================================= */

.pc-products-filter {
    position: sticky;

    top: 20px;

    width: 100%;

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    background: var(--pc-surface);

    border:
        1px solid var(--pc-border);

    padding: 28px;

    z-index: 20;

    box-shadow: var(--pc-shadow);

    transition:
        background-color var(--pc-transition),
        border-color var(--pc-transition),
        color var(--pc-transition);
}

.pc-products-filter::-webkit-scrollbar {
    width: 7px;
}

.pc-products-filter::-webkit-scrollbar-track {
    background: transparent;
}

.pc-products-filter::-webkit-scrollbar-thumb {
    background: var(--pc-border-strong);
}

.pc-products-filter::-webkit-scrollbar-thumb:hover {
    background: var(--pc-orange);
}

.pc-filter-mobile-head {
    display: block;

    margin-bottom: 30px;
}

.pc-filter-mobile-head h2 {
    margin: 5px 0 0;

    color: var(--pc-text);

    font-size: 25px;
    line-height: 1.2;
    font-weight: 800;
}

.pc-filter-kicker {
    color: var(--pc-orange);

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

    letter-spacing: 0.13em;
}

.pc-filter-close {
    display: none;
}

.pc-filter-group {
    margin: 0;
    padding: 0 0 25px;

    border: 0;
    border-bottom:
        1px solid var(--pc-border);

    margin-bottom: 25px;
}

.pc-filter-group legend {
    display: block;

    margin-bottom: 17px;
    padding: 0;

    color: var(--pc-text);

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.12em;
}

.pc-filter-check {
    min-height: 39px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: var(--pc-text-soft);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    user-select: none;

    transition:
        color var(--pc-transition);
}

.pc-filter-check:hover {
    color: var(--pc-orange);
}

.pc-filter-check input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.pc-checkmark {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    border:
        1.5px solid var(--pc-text-soft);

    background: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
        background-color var(--pc-transition),
        border-color var(--pc-transition);
}

.pc-filter-check input:checked + .pc-checkmark {
    background: var(--pc-orange);
    border-color: var(--pc-orange);
}

.pc-filter-check input:checked + .pc-checkmark::after {
    content: "✓";

    color: #111111;

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

    line-height: 1;
}

.pc-filter-check input:checked ~ span:last-child {
    color: var(--pc-text);
    font-weight: 800;
}

.pc-filter-reset {
    width: 100%;

    min-height: 44px;

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

    gap: 8px;

    background: transparent;

    border:
        1px solid var(--pc-border-strong);

    color: var(--pc-text);

    font-size: 13px;
    font-weight: 800;

    transition:
        color var(--pc-transition),
        border-color var(--pc-transition),
        background-color var(--pc-transition);
}

.pc-filter-reset:hover {
    color: var(--pc-orange);
    border-color: var(--pc-orange);
}


/* =========================================================
   FILTER BACKDROP
========================================================= */

.pc-filter-backdrop {
    display: none;
}


/* =========================================================
   RESULTS HEADER
========================================================= */

.pc-products-results {
    min-width: 0;
}

.pc-products-results-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 24px;

    border-bottom:
        1px solid var(--pc-border);

    margin-bottom: 30px;
}

.pc-section-index {
    display: block;

    margin-bottom: 7px;

    color: var(--pc-orange);

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

    letter-spacing: 0.12em;
}

.pc-products-results-head h2 {
    margin: 0;

    color: var(--pc-text);

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 800;

    letter-spacing: -0.035em;
}

.pc-products-results-head p {
    max-width: 700px;

    margin:
        10px 0
        0;

    color: var(--pc-text-soft);

    font-size: 17px;
    line-height: 1.65;
}

.pc-results-count {
    display: flex;
    align-items: baseline;

    gap: 7px;

    color: var(--pc-text-muted);

    white-space: nowrap;
}

.pc-results-count strong {
    color: var(--pc-text);

    font-size: 24px;
    font-weight: 800;
}

.pc-results-count span {
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.pc-products-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.pc-product-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: var(--pc-surface);

    border:
        1px solid var(--pc-border);

    overflow: hidden;

    transition:
        transform var(--pc-transition),
        border-color var(--pc-transition),
        background-color var(--pc-transition),
        box-shadow var(--pc-transition);
}

.pc-product-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(255, 138, 0, 0.5);

    box-shadow:
        0 18px 40px rgba(16, 22, 25, 0.1);
}

.pc-product-card.pc-filter-hidden {
    display: none;
}

.pc-product-image-link {
    display: block;

    overflow: hidden;
}

.pc-product-image {
    width: 100%;

    aspect-ratio: 1.32 / 1;

    overflow: hidden;

    background: #ECEBE7;
}

.pc-product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 450ms ease;
}

.pc-product-card:hover .pc-product-image img {
    transform: scale(1.045);
}

.pc-product-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 24px 22px 22px;
}

.pc-product-meta {
    display: flex;

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

    gap: 10px;

    margin-bottom: 13px;
}

.pc-product-meta span {
    color: var(--pc-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.pc-product-meta small {
    color: var(--pc-text-muted);

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

    white-space: nowrap;
}

.pc-product-content h3 {
    margin: 0;

    color: var(--pc-text);

    font-size: 21px;
    line-height: 1.2;
    font-weight: 800;
}

.pc-product-content h3 a {
    color: inherit;

    transition:
        color var(--pc-transition);
}

.pc-product-content h3 a:hover {
    color: var(--pc-orange);
}

.pc-product-content p {
    margin:
        13px 0
        22px;

    color: var(--pc-text-soft);

    font-size: 14px;
    line-height: 1.7;
}

.pc-product-actions {
    margin-top: auto;

    display: flex;
    align-items: stretch;

    gap: 8px;

    flex-wrap: wrap;
}

.pc-product-actions .pc-product-btn {
    flex: 1 1 0;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.pc-products-empty {
    padding:
        70px
        20px;

    text-align: center;

    border:
        1px solid var(--pc-border);

    background: var(--pc-surface);
}

.pc-products-empty[hidden] {
    display: none;
}

.pc-empty-icon {
    width: 54px;
    height: 54px;

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

    margin: 0 auto 18px;

    background: var(--pc-orange);

    color: #111111;

    font-size: 20px;
}

.pc-products-empty h3 {
    margin: 0;

    color: var(--pc-text);

    font-size: 24px;
    font-weight: 800;
}

.pc-products-empty p {
    margin:
        9px auto
        22px;

    color: var(--pc-text-soft);

    font-size: 15px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .pc-products-layout {
        grid-template-columns:
            310px
            minmax(0, 1fr);

        gap: 64px;
    }

    .pc-products-grid {
        gap: 28px;
    }

    .pc-product-content {
        padding: 26px;
    }

}


/* =========================================================
   LAPTOP-L / LAPTOP
========================================================= */

@media (min-width: 1200px) and (max-width: 1599px) {

    .pc-products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

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

    .pc-products-shell {
        padding:
            50px
            28px;
    }

    .pc-products-layout {
        display: block;

        grid-template-columns:
            250px
            minmax(0, 1fr);

        gap: 24px;
    }

    .pc-products-filter {
        padding: 22px;

        max-height:
            calc(100vh - 30px);

        top: 15px;
    }

    .pc-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .pc-products-results-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .pc-results-count {
        align-self: flex-start;
    }

    .pc-product-actions {
        flex-direction: column;
    }

    .pc-product-actions .pc-product-btn {
        flex: 0 0 auto;
        width: 100%;
    }

}


/* =========================================================
   MOBILE FILTER MODE
========================================================= */

@media (max-width: 767px) {

    .pc-catalog-toolbar {
        min-height: 64px;

        padding:
            10px
            14px;
    }

    .pc-catalog-back {
        font-size: 13px;
    }

    .pc-control-btn {
        width: 39px;
        height: 39px;

        padding: 0;
    }

    .pc-mobile-filter-trigger {
        display: inline-flex;

        min-height: 39px;

        padding:
            0 12px;
    }


    /* HERO */

    .pc-products-hero {
        min-height: 64vh;
    }

    .pc-products-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(16, 22, 25, 0.96),
                rgba(16, 22, 25, 0.76)
            );
    }

    .pc-products-hero-content {
        width: min(94%, 650px);

        padding:
            50px
            0;
    }

    .pc-products-eyebrow {
        font-size: 11px;
    }

    .pc-products-hero-content h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .pc-products-hero-content p {
        font-size: 16px;
        line-height: 1.65;
    }

    .pc-products-hero-actions {
        flex-direction: column;

        width: 100%;
    }

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


    /* SHELL */

    .pc-products-shell {
        padding:
            40px
            14px;
    }

    .pc-products-layout {
        display: block;
    }


    /* MOBILE FILTER */

    .pc-products-filter {
        position: fixed;

        top: 0;
        left: 0;

        width:
            min(88vw, 360px);

        height: 100dvh;

        max-height: none;

        padding:
            22px
            20px
            32px;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;

        transform:
            translateX(-105%);

        transition:
            transform 280ms ease;

        z-index: 1001;

        box-shadow:
            20px 0 60px rgba(0, 0, 0, 0.2);
    }

    .pc-products-filter.pc-filter-open {
        transform:
            translateX(0);
    }

    .pc-filter-backdrop {
        position: fixed;

        inset: 0;

        background:
            rgba(16, 22, 25, 0.65);

        backdrop-filter:
            blur(2px);

        z-index: 1000;

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 220ms ease,
            visibility 220ms ease;
    }

    .pc-filter-backdrop.pc-filter-open {
        display: block;

        opacity: 1;
        visibility: visible;
    }

    .pc-filter-mobile-head {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 20px;

        padding-bottom: 22px;

        border-bottom:
            1px solid var(--pc-border);
    }

    .pc-filter-close {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border:
            1px solid var(--pc-border-strong);

        background: transparent;

        color: var(--pc-text);

        font-size: 17px;
    }

    .pc-filter-close:hover {
        border-color: var(--pc-orange);
        color: var(--pc-orange);
    }


    /* RESULTS */

    .pc-products-results-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        margin-bottom: 25px;
    }

    .pc-products-results-head h2 {
        font-size: 34px;
    }

    .pc-products-results-head p {
        font-size: 16px;
    }

    .pc-results-count {
        align-self: flex-start;
    }


    /* GRID */

    .pc-products-grid {
        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .pc-product-content {
        padding:
            22px
            19px
            20px;
    }

    .pc-product-content h3 {
        font-size: 20px;
    }

    .pc-product-content p {
        font-size: 14px;
    }

    .pc-product-actions {
        flex-direction: column;
    }

    .pc-product-actions .pc-product-btn {
        flex: 0 0 auto;
        width: 100%;
    }

}


/* =========================================================
   MOBILE-S
   320–374px
========================================================= */

@media (max-width: 374px) {

    .pc-catalog-back span {
        display: none;
    }

    .pc-catalog-toolbar-right {
        gap: 5px;
    }

    .pc-mobile-filter-trigger span {
        display: none;
    }

    .pc-mobile-filter-trigger {
        width: 39px;
        padding: 0;
    }

    .pc-products-hero-content h1 {
        font-size: 35px;
    }

    .pc-products-hero-content p {
        font-size: 15px;
    }

    .pc-products-shell {
        padding:
            34px
            12px;
    }

    .pc-products-filter {
        width:
            min(92vw, 340px);
    }

}


/* =========================================================
   MOBILE-L
   576–767px
========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .pc-products-shell {
        padding:
            48px
            22px;
    }

    .pc-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pc-product-actions {
        flex-direction: column;
    }

    .pc-product-actions .pc-product-btn {
        width: 100%;
    }

}


/* =========================================================
   LANDSCAPE SAFETY
========================================================= */

@media (max-height: 600px) and (max-width: 767px) {

    .pc-products-hero {
        min-height: 600px;
    }

    .pc-products-filter {
        padding-top: 18px;
    }

}

/* =========================================================
   POWERCORE 21–50 KVA PAGE ONLY
   Page scope: body.pc21-page
   Do NOT remove existing global POWERCORE CSS.
========================================================= */


/* =========================================================
   PAGE BASE
========================================================= */

body.pc21-page {
    background: var(--pc-bg-primary);
    color: var(--pc-text-primary);
    overflow-x: hidden;
}


/* Keep hero image consistent */

body.pc21-page .pc-products-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Hero content */

body.pc21-page .pc-products-hero-content {
    width: min(
        calc(100% - 80px),
        760px
    );

    margin-inline: auto;
}


/* =========================================================
   CATALOGUE
========================================================= */

body.pc21-page .pc-products-catalogue {
    background: var(--pc-bg-primary);

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


/* =========================================================
   SAME SHELL AS EXISTING PRODUCTS PAGE
========================================================= */

body.pc21-page .pc-products-shell {
    width: min(
        var(--pc-container),
        calc(100% - 80px)
    );

    margin-inline: auto;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
========================================================= */

body.pc21-page .pc-products-layout {
    display: grid;

    grid-template-columns:
        minmax(250px, 290px)
        minmax(0, 1fr);

    align-items: start;

    gap: clamp(45px, 5vw, 90px);
}


/* =========================================================
   FILTER
   Same visual structure as existing Products page
========================================================= */

body.pc21-page .pc-products-filter {
    position: sticky;

    top: 95px;

    z-index: 20;

    width: 100%;

    max-height:
        calc(100vh - 120px);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    padding:
        30px
        26px;

    background: var(--pc-bg-card);

    color: var(--pc-text-primary);

    border:
        1px solid var(--pc-border);

    border-radius: var(--pc-radius-medium);

    box-shadow:
        0 8px 30px rgba(
            32,
            42,
            48,
            0.045
        );

    scrollbar-width: thin;
}


/* Keep filter scrolling independent */

body.pc21-page .pc-products-filter::-webkit-scrollbar {
    width: 7px;
}

body.pc21-page .pc-products-filter::-webkit-scrollbar-track {
    background: transparent;
}

body.pc21-page .pc-products-filter::-webkit-scrollbar-thumb {
    background: rgba(
        89,
        106,
        115,
        0.35
    );

    border-radius: 20px;
}


/* =========================================================
   FILTER HEADER
========================================================= */

body.pc21-page .pc-products-filter-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 25px;

    border-bottom:
        1px solid var(--pc-border);
}


body.pc21-page .pc-products-filter-head > div > span {
    display: block;

    margin-bottom: 6px;

    color: var(--pc-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.15em;
}


body.pc21-page .pc-products-filter-head h2 {
    margin: 0;

    color: var(--pc-text-primary);

    font-size: 24px;
    font-weight: 800;

    line-height: 1.25;
}


/* =========================================================
   FILTER GROUP
========================================================= */

body.pc21-page .pc-products-filter-group {
    padding: 25px 0;

    border-bottom:
        1px solid var(--pc-border);
}


body.pc21-page .pc-products-filter-label {
    margin-bottom: 15px;

    color: var(--pc-text-primary);

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

    letter-spacing: 0.12em;
}


/* =========================================================
   FILTER OPTIONS
========================================================= */

body.pc21-page .pc-filter-option {
    min-height: 36px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--pc-text-secondary);

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}


body.pc21-page .pc-filter-option + .pc-filter-option {
    margin-top: 5px;
}


body.pc21-page .pc-filter-option:hover {
    color: var(--pc-text-primary);
}


/* =========================================================
   CHECKBOX
========================================================= */

body.pc21-page .pc-filter-option input {
    position: relative;

    width: 18px;
    height: 18px;

    min-width: 18px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border:
        1px solid var(--pc-border-strong);

    background:
        var(--pc-bg-primary);

    border-radius: 2px;

    cursor: pointer;
}


body.pc21-page .pc-filter-option input:checked {
    background: var(--pc-orange);

    border-color: var(--pc-orange);
}


body.pc21-page .pc-filter-option input::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 9px;

    left: 5px;
    top: 2px;

    border:
        solid #171717;

    border-width:
        0
        2px
        2px
        0;

    transform:
        rotate(45deg)
        scale(0);

    transition:
        transform 0.16s ease;
}


body.pc21-page .pc-filter-option input:checked::after {
    transform:
        rotate(45deg)
        scale(1);
}


/* =========================================================
   FILTER BOTTOM
   SAME "CLEAR ALL" STYLE
========================================================= */

body.pc21-page .pc-products-filter-bottom {
    display: flex;

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

    gap: 12px;

    padding-top: 24px;
}


body.pc21-page .pc-products-filter-bottom span {
    color: var(--pc-text-muted);

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


body.pc21-page .pc-products-filter-bottom button {
    padding: 0;

    background: transparent;

    color: var(--pc-orange);

    border: 0;

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    cursor: pointer;
}


body.pc21-page .pc-products-filter-bottom button:hover {
    color: var(--pc-orange-hover);
}


/* =========================================================
   RESULTS HEADER
========================================================= */

body.pc21-page .pc-products-results {
    min-width: 0;
}


body.pc21-page .pc-products-results-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom:
        1px solid var(--pc-border);
}


body.pc21-page .pc-products-section-kicker {
    display: block;

    margin-bottom: 9px;

    color: var(--pc-orange);

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

    letter-spacing: 0.16em;
}


body.pc21-page .pc-products-results-head h2 {
    margin: 0;

    color: var(--pc-text-primary);

    font-size: clamp(
        34px,
        3.3vw,
        44px
    );

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


body.pc21-page .pc-products-results-head > div > p {
    max-width: 650px;

    margin-top: 10px;

    color: var(--pc-text-secondary);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.65;
}


body.pc21-page #desktopResultCount {
    flex-shrink: 0;

    color: var(--pc-text-muted);

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

    white-space: nowrap;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

body.pc21-page .pc-products-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

body.pc21-page .pc-product-card {
    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: var(--pc-bg-card);

    border:
        1px solid var(--pc-border);

    border-radius:
        var(--pc-radius-medium);

    box-shadow:
        0 8px 30px rgba(
            32,
            42,
            48,
            0.045
        );

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


body.pc21-page .pc-product-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(
            255,
            138,
            0,
            0.45
        );

    box-shadow:
        0 20px 45px rgba(
            32,
            42,
            48,
            0.11
        );
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

body.pc21-page .pc-product-image-link {
    display: block;

    overflow: hidden;

    background: #EAE6DE;
}


body.pc21-page .pc-product-image {
    position: relative;

    width: 100%;

    height: 270px;

    overflow: hidden;

    background: #EAE6DE;
}


body.pc21-page .pc-product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    transition:
        transform 0.65s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


body.pc21-page .pc-product-card:hover
.pc-product-image img {
    transform: scale(1.05);
}


/* =========================================================
   PRODUCT CARD BODY
========================================================= */

body.pc21-page .pc-product-card-body {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding:
        24px
        22px
        22px;
}


/* =========================================================
   PRODUCT META
========================================================= */

body.pc21-page .pc-product-meta {
    display: flex;

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

    gap: 10px;

    margin-bottom: 13px;
}


body.pc21-page .pc-product-meta span {
    color: var(--pc-orange);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


body.pc21-page .pc-product-meta span:last-child {
    color: var(--pc-text-muted);

    text-align: right;
}


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

body.pc21-page .pc-product-card h4 {
    margin: 0;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.02em;
}


body.pc21-page .pc-product-card h4 a {
    color: var(--pc-text-primary);

    text-decoration: none;
}


body.pc21-page .pc-product-card h4 a:hover {
    color: var(--pc-orange);
}


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

body.pc21-page .pc-product-card-body > p {
    margin-top: 11px;

    color: var(--pc-text-secondary);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.65;
}


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

/* =========================================================
   21–50 KVA PRODUCT BUTTONS
   Match Products / 1–5 / 6–20 pages
========================================================= */

body.pc21-page .pc-product-actions {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 8px;

    margin-top: auto;

    padding-top: 23px;
}

body.pc21-page .pc-product-btn {
    min-height: 45px;

    display: inline-flex;

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

    padding:
        0
        10px;

    border-radius:
        var(--pc-radius-small);

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.055em;

    text-align: center;

    text-decoration: none;

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


body.pc21-page .pc-product-btn-primary {
    background: var(--pc-orange);

    color: #171717;

    border:
        1px solid var(--pc-orange);
}


body.pc21-page .pc-product-btn-primary:hover {
    background: var(--pc-orange-hover);

    border-color: var(--pc-orange-hover);

    color: #171717;

    transform: translateY(-2px);
}


body.pc21-page .pc-product-btn-outline {
    background: transparent;

    color: var(--pc-text-primary);

    border:
        1px solid var(--pc-border-strong);
}


body.pc21-page .pc-product-btn-outline:hover {
    background: var(--pc-text-primary);

    color: var(--pc-bg-card);

    border-color: var(--pc-text-primary);

    transform: translateY(-2px);
}


/* =========================================================
   FILTERED CARDS
========================================================= */

body.pc21-page .pc-product-card.pc-filter-hidden {
    display: none !important;
}


/* =========================================================
   NO RESULTS
========================================================= */

body.pc21-page .pc-products-no-results {
    margin-top: 25px;

    padding:
        70px
        20px;

    text-align: center;

    background: var(--pc-bg-card);

    color: var(--pc-text-primary);

    border:
        1px solid var(--pc-border);
}


body.pc21-page .pc-products-no-results[hidden] {
    display: none !important;
}


body.pc21-page .pc-products-no-results h3 {
    color: var(--pc-text-primary);

    font-size: 24px;
    font-weight: 800;
}


body.pc21-page .pc-products-no-results p {
    margin:
        10px auto
        22px;

    color: var(--pc-text-secondary);

    font-size: 15px;
}


body.pc21-page .pc-products-no-results button {
    min-height: 45px;

    padding:
        0
        22px;

    background: var(--pc-orange);

    color: #171717;

    border: 0;

    border-radius:
        var(--pc-radius-small);

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.06em;

    cursor: pointer;
}


/* =========================================================
   MOBILE FILTER BAR
========================================================= */

body.pc21-page .pc-products-mobile-filter-bar {
    display: none;
}


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

@media (max-width: 1199px) {

    body.pc21-page .pc-products-shell {
        width:
            calc(100% - 48px);
    }

    body.pc21-page .pc-products-layout {
        grid-template-columns:
            240px
            minmax(0, 1fr);

        gap: 34px;
    }

    body.pc21-page .pc-products-filter {
        top: 90px;

        max-height:
            calc(100vh - 110px);

        padding:
            25px
            20px;
    }

    body.pc21-page .pc-products-grid {
        gap: 18px;
    }

    body.pc21-page .pc-product-image {
        height: 230px;
    }

    body.pc21-page .pc-product-card-body {
        padding:
            21px
            18px
            19px;
    }

    body.pc21-page .pc-product-card h4 {
        font-size: 18px;
    }

}


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

@media (max-width: 991px) {

    body.pc21-page .pc-products-layout {
        display: block;
    }

    body.pc21-page .pc-products-mobile-filter-bar {
        display: flex;

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

        gap: 20px;

        margin-bottom: 30px;

        padding:
            16px
            18px;

        background: var(--pc-bg-card);

        border:
            1px solid var(--pc-border);

        border-radius:
            var(--pc-radius-medium);
    }

    body.pc21-page .pc-products-mobile-filter-info {
        display: flex;

        flex-direction: column;

        gap: 2px;
    }

    body.pc21-page .pc-products-filter-kicker {
        color: var(--pc-orange);

        font-size: 10px;
        font-weight: 800;

        letter-spacing: 0.13em;
    }

    body.pc21-page .pc-products-mobile-filter-info strong {
        color: var(--pc-text-primary);

        font-size: 15px;
        font-weight: 800;
    }

    body.pc21-page .pc-products-filter-trigger {
        min-height: 42px;

        display: inline-flex;

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

        gap: 8px;

        padding:
            0
            17px;

        background: var(--pc-text-primary);

        color: var(--pc-bg-card);

        border: 0;

        border-radius:
            var(--pc-radius-small);

        font-family: inherit;

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

        letter-spacing: 0.06em;

        cursor: pointer;
    }

    /* Independent mobile filter */

    body.pc21-page .pc-products-filter {
        position: fixed;

        top: 0;
        left: 0;

        width:
            min(360px, 90vw);

        height: 100dvh;

        max-height: none;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;

        padding:
            28px
            25px
            40px;

        border-radius: 0;

        transform:
            translateX(-105%);

        transition:
            transform 0.35s
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            );

        z-index: 1001;
    }

    body.pc21-page .pc-products-filter.pc-filter-open {
        transform:
            translateX(0);
    }

    body.pc21-page .pc-products-filter-close {
        display: flex;
    }

    body.pc21-page .pc-products-results-head {
        margin-bottom: 45px;
    }

    body.pc21-page .pc-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    body.pc21-page .pc-product-image {
        height: 250px;
    }

}


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

@media (max-width: 767px) {

    body.pc21-page .pc-products-hero {
        height: 65vh;

        min-height: 500px;

        max-height: none;
    }

    body.pc21-page .pc-products-catalogue {
        padding:
            60px
            0
            85px;
    }

    body.pc21-page .pc-products-shell {
        width:
            calc(100% - 30px);
    }

    body.pc21-page .pc-products-results-head {
        display: block;

        margin-bottom: 40px;
    }

    body.pc21-page .pc-products-results-head > p {
        margin-top: 14px;
    }

    body.pc21-page .pc-products-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    body.pc21-page .pc-product-image {
        height: 280px;
    }

    body.pc21-page .pc-product-card-body {
        padding:
            23px
            20px
            20px;
    }

    body.pc21-page .pc-product-card h4 {
        font-size: 20px;
    }

    body.pc21-page .pc-product-card-body > p {
        font-size: 14px;
    }

}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 575px) {

    body.pc21-page .pc-products-shell {
        width:
            calc(100% - 24px);
    }

    body.pc21-page .pc-products-mobile-filter-bar {
        padding:
            13px
            14px;
    }

    body.pc21-page .pc-products-filter-trigger {
        min-height: 40px;

        padding:
            0
            13px;

        font-size: 11px;
    }

    body.pc21-page .pc-products-filter {
        width:
            min(330px, 92vw);

        padding:
            24px
            20px
            35px;
    }

    body.pc21-page .pc-products-results-head h2 {
        font-size: 31px;
    }

    body.pc21-page .pc-product-image {
        height: 245px;
    }

    

    body.pc21-page .pc-product-btn {
        width: 100%;

        min-height: 46px;
    }

}


@media (max-width: 767px) {

    .pc-products-hero,
    body.pc21-page .pc-products-hero {
        height: auto;
        min-height: 400px;
    }

    .pc-products-hero-content,
    body.pc21-page .pc-products-hero-content {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    body.pc21-page .pc-products-hero-content {
        width: min(94%, 650px);
    }

    .pc-products-shell,
    body.pc21-page .pc-products-shell {
        padding-top: 0;
    }

    .pc-products-catalogue,
    body.pc21-page .pc-products-catalogue {
        padding-top: 0;
    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 374px) {

    body.pc21-page .pc-products-filter {
        width: 92vw;

        height: 100dvh;

        max-height: 100dvh;
    }

    body.pc21-page .pc-products-results-head h2 {
        font-size: 29px;
    }

    body.pc21-page .pc-product-image {
        height: 225px;
    }

}


/* =========================================================================
   PRODUCTS FILTER — MOBILE DRAWER FIX (authoritative override)
   Fixes: filter panel not fully visible / not scrolling on mobile-s/m/l
   across products.html, products-1-5kva.html, products-6-20kva.html,
   products-21-50kva.html. An earlier !important block in this file only
   opened the drawer for .is-open/.active, but the real "Filters" button
   applies .pc-filter-open — so it never matched. This block wins because
   it is later in the file AND !important, and it accepts every class
   name your buttons actually use, so it works regardless of which page.
   ========================================================================= */

@media (max-width: 767px) {

    .pc-products-filter,
    body.pc21-page .pc-products-filter {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        margin: 0 !important;

        width: min(88vw, 360px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;

        padding: 22px 20px calc(40px + env(safe-area-inset-bottom, 0px)) !important;

        z-index: 999999 !important;

        transform: translateX(-105%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .3s ease, visibility .3s ease !important;
    }

    /* accepts whichever class your JS actually applies */
    .pc-products-filter.pc-filter-open,
    .pc-products-filter.is-open,
    .pc-products-filter.active,
    body.pc21-page .pc-products-filter.pc-filter-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html[dir="rtl"] .pc-products-filter {
        left: auto !important;
        right: 0 !important;
        transform: translateX(105%) !important;
    }

    html[dir="rtl"] .pc-products-filter.pc-filter-open,
    html[dir="rtl"] .pc-products-filter.is-open,
    html[dir="rtl"] .pc-products-filter.active {
        transform: translateX(0) !important;
    }

    body.pc-filter-open,
    body.pc21-page.pc-filter-open {
        overflow: hidden !important;
    }

    /* dim backdrop — injected by the JS fix below, styled here */
    .pc-filter-auto-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 10, .6);
        z-index: 999998;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .pc-filter-auto-backdrop.pc-filter-open {
        opacity: 1;
        visibility: visible;
    }

}


/* =========================================================================
   PRODUCTS LAYOUT — TABLET/LAPTOP FIX (authoritative override)
   Fixes: filter renders as a full-width block instead of a sidebar, and
   the mobile "CATALOGUE / FILTER" bar wrongly overlaps it, between
   768px and 1199px, on products.html, products-1-5kva.html,
   products-6-20kva.html and products-21-50kva.html.
   Cause: an earlier block set .pc-products-layout to display:block for
   this range (silently disabling its own grid-template-columns), and
   a separate block kept .pc-products-mobile-filter-bar visible up to
   991px instead of stopping at 767px. This override wins because it is
   later in the file and matches the same unscoped + pc21-page-scoped
   selectors.
   ========================================================================= */

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

    .pc-products-layout,
    body.pc21-page .pc-products-layout {
        display: grid !important;
        grid-template-columns: 250px minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .pc-products-mobile-filter-bar,
    body.pc21-page .pc-products-mobile-filter-bar {
        display: none !important;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {

    .pc-products-layout,
    body.pc21-page .pc-products-layout {
        grid-template-columns: 270px minmax(0, 1fr) !important;
    }

}

/* =========================================================
   POWERCORE PRODUCT DETAILS
   PAGE ONLY
   Scope: body.pcd-page
========================================================= */


/* =========================================================
   PAGE FOUNDATION
========================================================= */

body.pcd-page {

    background: var(--pc-bg-primary);

    color: var(--pc-text-primary);

    overflow-x: hidden;

}


body.pcd-page .pcd-main {

    width: 100%;

    overflow: hidden;

}


body.pcd-page .pcd-container {

    width: min(
        var(--pc-container),
        calc(100% - 80px)
    );

    margin-inline: auto;

}


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

body.pcd-page .pcd-hero {

    position: relative;

    padding:
        55px
        0
        95px;

    background:
        var(--pc-bg-primary);

}


body.pcd-page .pcd-back {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 42px;

    color: var(--pc-text-primary);

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .08em;

    transition:
        color .25s ease,
        gap .25s ease;

}


body.pcd-page .pcd-back i {

    color: var(--pc-orange);

    transition:
        transform .25s ease;

}


body.pcd-page .pcd-back:hover {

    color: var(--pc-orange);

    gap: 13px;

}


body.pcd-page .pcd-back:hover i {

    transform:
        translateX(-3px);

}


/* =========================================================
   HERO GRID
========================================================= */

body.pcd-page .pcd-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap:
        clamp(
            45px,
            7vw,
            110px
        );

}


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

body.pcd-page .pcd-hero-content {

    min-width: 0;

}


body.pcd-page .pcd-eyebrow {

    display: block;

    margin-bottom: 20px;

    color: var(--pc-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .17em;

}


body.pcd-page .pcd-product-meta {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 15px;

}


body.pcd-page .pcd-product-meta span {

    color: var(--pc-text-muted);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .10em;

}


body.pcd-page .pcd-product-meta span:first-child {

    color: var(--pc-orange);

}


body.pcd-page .pcd-hero-content h1 {

    margin: 0;

    color: var(--pc-text-primary);

    font-size:
        clamp(
            42px,
            5.5vw,
            76px
        );

    line-height: .98;

    font-weight: 800;

    letter-spacing: -.055em;

}


body.pcd-page .pcd-hero-content h2 {

    max-width: 620px;

    margin-top: 22px;

    color: var(--pc-text-primary);

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -.025em;

}


body.pcd-page .pcd-hero-description {

    max-width: 650px;

    margin-top: 18px;

    color: var(--pc-text-secondary);

    font-size: 17px;

    line-height: 1.75;

    font-weight: 500;

}


/* =========================================================
   HERO BUTTONS
   VERTICAL — SAME AS PRODUCT CARDS
========================================================= */

body.pcd-page .pcd-hero-actions {

    width: min(
        100%,
        340px
    );

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-top: 30px;

}


body.pcd-page .pcd-btn {

    min-height: 49px;

    width: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        0
        18px;

    border-radius:
        var(--pc-radius-small);

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

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .055em;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


body.pcd-page .pcd-btn-primary {

    background:
        var(--pc-orange);

    color: #171717;

    border:
        1px solid
        var(--pc-orange);

}


body.pcd-page .pcd-btn-primary:hover {

    background:
        var(--pc-orange-hover);

    border-color:
        var(--pc-orange-hover);

    transform:
        translateY(-2px);

}


body.pcd-page .pcd-btn-secondary {

    background:
        transparent;

    color:
        var(--pc-text-primary);

    border:
        1px solid
        var(--pc-border-strong);

}


body.pcd-page .pcd-btn-secondary:hover {

    background:
        var(--pc-text-primary);

    color:
        var(--pc-bg-card);

    border-color:
        var(--pc-text-primary);

    transform:
        translateY(-2px);

}


/* =========================================================
   HERO IMAGE
========================================================= */

body.pcd-page .pcd-hero-visual {

    min-width: 0;

}


body.pcd-page .pcd-image-frame {

    position: relative;

    width: 100%;

    height:
        clamp(
            430px,
            48vw,
            650px
        );

    overflow: hidden;

    background:
        #EAE6DE;

    border:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-main-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


body.pcd-page .pcd-image-label {

    position: absolute;

    top: 20px;

    left: 20px;

    z-index: 2;

    padding:
        8px
        11px;

    background:
        var(--pc-orange);

    color:
        #171717;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .10em;

}


body.pcd-page .pcd-image-caption {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 13px;

}


body.pcd-page .pcd-image-caption span {

    color: var(--pc-text-muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .10em;

}


body.pcd-page .pcd-image-caption span:first-child {

    color:
        var(--pc-text-primary);

}


/* =========================================================
   QUICK INFORMATION
========================================================= */

body.pcd-page .pcd-quick-section {

    border-top:
        1px solid
        var(--pc-border);

    border-bottom:
        1px solid
        var(--pc-border);

    background:
        var(--pc-bg-secondary);

}


body.pcd-page .pcd-quick-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

}


body.pcd-page .pcd-quick-item {

    min-width: 0;

    min-height: 130px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        25px 28px;

    border-inline-end:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-quick-item:last-child {

    border-inline-end: 0;

}


body.pcd-page .pcd-quick-item span {

    margin-bottom: 9px;

    color: var(--pc-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .13em;

}


body.pcd-page .pcd-quick-item strong {

    color: var(--pc-text-primary);

    font-size: 16px;

    line-height: 1.45;

    font-weight: 800;

}


/* =========================================================
   COMMON SECTION
========================================================= */

body.pcd-page .pcd-overview,
body.pcd-page .pcd-highlights,
body.pcd-page .pcd-applications,
body.pcd-page .pcd-information,
body.pcd-page .pcd-service,
body.pcd-page .pcd-suggestions {

    padding:
        clamp(
            75px,
            8vw,
            125px
        )
        0;

}


body.pcd-page .pcd-section-intro {

    max-width: 780px;

    margin-bottom: 55px;

}


body.pcd-page .pcd-section-kicker {

    display: block;

    margin-bottom: 14px;

    color: var(--pc-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .16em;

}


body.pcd-page .pcd-section-intro h2 {

    margin: 0;

    color: var(--pc-text-primary);

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.045em;

}


body.pcd-page .pcd-section-intro > p {

    max-width: 650px;

    margin-top: 17px;

    color: var(--pc-text-secondary);

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   OVERVIEW
========================================================= */

body.pcd-page .pcd-overview {

    background:
        var(--pc-bg-primary);

}


body.pcd-page .pcd-overview-grid {

    display: grid;

    grid-template-columns:
        minmax(240px, .55fr)
        minmax(0, 1.45fr);

    gap:
        clamp(
            50px,
            8vw,
            130px
        );

    align-items: start;

}


body.pcd-page .pcd-overview-number {

    padding-top: 5px;

    border-top:
        1px solid
        var(--pc-orange);

}


body.pcd-page .pcd-overview-number strong {

    display: block;

    color: var(--pc-text-primary);

    font-size:
        clamp(
            80px,
            12vw,
            170px
        );

    line-height: .82;

    font-weight: 800;

    letter-spacing: -.08em;

}


body.pcd-page .pcd-overview-number span {

    display: block;

    margin-top: 16px;

    color: var(--pc-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;

}


body.pcd-page .pcd-overview-copy {

    max-width: 760px;

}


body.pcd-page .pcd-overview-copy p {

    color: var(--pc-text-secondary);

    font-size: 16px;

    line-height: 1.8;

    font-weight: 500;

}


body.pcd-page .pcd-overview-copy p + p {

    margin-top: 20px;

}


body.pcd-page .pcd-overview-copy .pcd-lead {

    color: var(--pc-text-primary);

    font-size: 23px;

    line-height: 1.5;

    font-weight: 700;

}


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

body.pcd-page .pcd-highlights {

    background:
        var(--pc-bg-secondary);

}


body.pcd-page .pcd-highlight-list {

    border-top:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-highlight {

    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        28px 0;

    border-bottom:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-index {

    color: var(--pc-orange);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .08em;

}


body.pcd-page .pcd-highlight h3 {

    margin: 0;

    color: var(--pc-text-primary);

    font-size: 22px;

    line-height: 1.3;

    font-weight: 800;

}


body.pcd-page .pcd-highlight p {

    max-width: 650px;

    margin-top: 7px;

    color: var(--pc-text-secondary);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   APPLICATIONS
========================================================= */

body.pcd-page .pcd-applications {

    background:
        var(--pc-bg-primary);

}


body.pcd-page .pcd-application-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-application {

    min-height: 235px;

    padding:
        28px;

    border-bottom:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-application:nth-child(odd) {

    border-inline-end:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-application > span {

    color: var(--pc-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .12em;

}


body.pcd-page .pcd-application h3 {

    margin-top: 55px;

    color: var(--pc-text-primary);

    font-size: 27px;

    font-weight: 800;

}


body.pcd-page .pcd-application p {

    max-width: 470px;

    margin-top: 9px;

    color: var(--pc-text-secondary);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   INFORMATION TABLE
========================================================= */

body.pcd-page .pcd-information {

    background:
        var(--pc-bg-secondary);

}


body.pcd-page .pcd-info-table {

    border-top:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-info-row {

    display: grid;

    grid-template-columns:
        minmax(180px, .65fr)
        minmax(0, 1.35fr);

    gap: 30px;

    min-height: 72px;

    align-items: center;

    border-bottom:
        1px solid
        var(--pc-border);

}


body.pcd-page .pcd-info-row span {

    color: var(--pc-text-muted);

    font-size: 13px;

    font-weight: 700;

}


body.pcd-page .pcd-info-row strong {

    color: var(--pc-text-primary);

    font-size: 15px;

    font-weight: 800;

}


/* =========================================================
   SERVICE
========================================================= */

body.pcd-page .pcd-service {

    background:
        var(--pc-bg-primary);

}


body.pcd-page .pcd-service-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        clamp(
            50px,
            9vw,
            140px
        );

}


body.pcd-page .pcd-service-grid h2 {

    max-width: 650px;

    margin-top: 4px;

    color: var(--pc-text-primary);

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.045em;

}


body.pcd-page .pcd-service-copy {

    max-width: 650px;

}


body.pcd-page .pcd-service-copy p {

    color: var(--pc-text-secondary);

    font-size: 16px;

    line-height: 1.8;

}


body.pcd-page .pcd-service-copy p + p {

    margin-top: 18px;

}


body.pcd-page .pcd-service-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;

    margin-top: 30px;

}


/* =========================================================
   TEXT LINKS
========================================================= */

body.pcd-page .pcd-text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--pc-text-primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .07em;

    text-decoration: none;

    transition:
        color .25s ease,
        gap .25s ease;

}


body.pcd-page .pcd-text-link i {

    color: var(--pc-orange);

    transition:
        transform .25s ease;

}


body.pcd-page .pcd-text-link:hover {

    color: var(--pc-orange);

    gap: 13px;

}


body.pcd-page .pcd-text-link:hover i {

    transform:
        translateX(3px);

}


/* =========================================================
   CTA
========================================================= */

body.pcd-page .pcd-cta {

    padding:
        80px 0;

    background:
        #101619;

    color:
        #F3F1EC;

}


body.pcd-page .pcd-cta-inner {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(250px, .65fr);

    align-items: center;

    gap: 60px;

}


body.pcd-page .pcd-cta .pcd-section-kicker {

    color: #FF9700;

}


body.pcd-page .pcd-cta h2 {

    max-width: 800px;

    color: #F3F1EC;

    font-size:
        clamp(
            34px,
            4.5vw,
            58px
        );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.045em;

}


body.pcd-page .pcd-cta p {

    max-width: 650px;

    margin-top: 17px;

    color: #A7B4BA;

    font-size: 16px;

    line-height: 1.75;

}


body.pcd-page .pcd-cta-actions {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


body.pcd-page .pcd-cta .pcd-btn-secondary {

    color: #F3F1EC;

    border-color:
        rgba(
            243,
            241,
            236,
            .25
        );

}


body.pcd-page .pcd-cta .pcd-btn-secondary:hover {

    background: #F3F1EC;

    color: #101619;

    border-color: #F3F1EC;

}


/* =========================================================
   SUGGESTIONS
========================================================= */

body.pcd-page .pcd-suggestions {

    background:
        var(--pc-bg-primary);

}


body.pcd-page .pcd-section-head-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 35px;

    margin-bottom: 40px;

}


body.pcd-page .pcd-section-head-row h2 {

    color: var(--pc-text-primary);

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.045em;

}


body.pcd-page .pcd-view-all {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding-bottom: 5px;

    flex-shrink: 0;

    color: var(--pc-text-primary);

    border-bottom:
        1px solid
        var(--pc-orange);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .08em;

    text-decoration: none;

}


body.pcd-page .pcd-view-all i {

    color: var(--pc-orange);

}


body.pcd-page .pcd-suggestion-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

}


body.pcd-page .pcd-suggestion {

    min-width: 0;

    background:
        var(--pc-bg-card);

    border:
        1px solid
        var(--pc-border);

    border-radius:
        var(--pc-radius-medium);

    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


body.pcd-page .pcd-suggestion:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(
            255,
            138,
            0,
            .42
        );

    box-shadow:
        0 20px 45px
        rgba(
            32,
            42,
            48,
            .10
        );

}


body.pcd-page .pcd-suggestion-image {

    display: block;

    height: 255px;

    overflow: hidden;

    background:
        #EAE6DE;

}


body.pcd-page .pcd-suggestion-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

}


body.pcd-page .pcd-suggestion:hover
.pcd-suggestion-image img {

    transform:
        scale(1.05);

}


body.pcd-page .pcd-suggestion-body {

    padding:
        22px;

}


body.pcd-page .pcd-suggestion-meta {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;

}


body.pcd-page .pcd-suggestion-meta span {

    color: var(--pc-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .10em;

}


body.pcd-page .pcd-suggestion-meta span:last-child {

    color: var(--pc-text-muted);

}


body.pcd-page .pcd-suggestion-body h3 {

    color: var(--pc-text-primary);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;

}


body.pcd-page .pcd-suggestion-body p {

    min-height: 50px;

    margin:
        10px 0
        18px;

    color: var(--pc-text-secondary);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   BACK TO ALL PRODUCTS
========================================================= */

body.pcd-page .pcd-back-products {

    padding:
        90px 0
        100px;

    background:
        var(--pc-bg-secondary);

    border-top:
        1px solid
        var(--pc-border);

    text-align: center;

}


body.pcd-page .pcd-back-products > div {

    display: flex;

    flex-direction: column;

    align-items: center;

}


body.pcd-page .pcd-back-products > div > span {

    color: var(--pc-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .17em;

}


body.pcd-page .pcd-back-products h2 {

    max-width: 760px;

    margin:
        15px auto
        30px;

    color: var(--pc-text-primary);

    font-size:
        clamp(
            32px,
            4vw,
            52px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.045em;

}


body.pcd-page .pcd-back-products .pcd-btn {

    width:
        min(
            100%,
            300px
        );

}


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

@media (max-width: 1199px) {

    body.pcd-page .pcd-container {

        width:
            calc(100% - 56px);

    }


    body.pcd-page .pcd-hero-grid {

        gap: 45px;

    }


    body.pcd-page .pcd-image-frame {

        height: 520px;

    }


    body.pcd-page .pcd-suggestion-image {

        height: 220px;

    }

}


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

@media (max-width: 991px) {

    body.pcd-page .pcd-container {

        width:
            calc(100% - 44px);

    }


    body.pcd-page .pcd-hero {

        padding:
            42px
            0
            75px;

    }


    body.pcd-page .pcd-hero-grid {

        grid-template-columns:
            1fr;

    }


    body.pcd-page .pcd-hero-content {

        max-width: 800px;

    }


    body.pcd-page .pcd-image-frame {

        height:
            clamp(
                420px,
                60vw,
                560px
            );

    }


    body.pcd-page .pcd-quick-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    body.pcd-page .pcd-quick-item:nth-child(2) {

        border-inline-end: 0;

    }


    body.pcd-page .pcd-quick-item:nth-child(-n + 2) {

        border-bottom:
            1px solid
            var(--pc-border);

    }


    body.pcd-page .pcd-overview-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    body.pcd-page .pcd-overview-number {

        max-width: 280px;

    }


    body.pcd-page .pcd-service-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    body.pcd-page .pcd-cta-inner {

        grid-template-columns:
            1fr;

        gap: 35px;

    }


    body.pcd-page .pcd-cta-actions {

        width:
            min(
                100%,
                360px
            );

    }


    body.pcd-page .pcd-suggestion-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    body.pcd-page .pcd-suggestion:last-child {

        grid-column:
            1 / -1;

        max-width:
            calc(
                50% - 12px
            );

        width: 100%;

        margin-inline: auto;

    }

}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {

    body.pcd-page .pcd-container {

        width:
            calc(100% - 32px);

    }


    body.pcd-page .pcd-hero {

        padding:
            32px
            0
            65px;

    }


    body.pcd-page .pcd-back {

        margin-bottom: 32px;

    }


    body.pcd-page .pcd-hero-content h1 {

        font-size:
            clamp(
                40px,
                11vw,
                55px
            );

    }


    body.pcd-page .pcd-hero-content h2 {

        font-size: 22px;

    }


    body.pcd-page .pcd-hero-description {

        font-size: 16px;

    }


    body.pcd-page .pcd-image-frame {

        height:
            430px;

    }


    body.pcd-page .pcd-quick-grid {

        grid-template-columns:
            1fr;

    }


    body.pcd-page .pcd-quick-item {

        min-height: 100px;

        padding:
            22px 0;

        border-inline-end: 0;

        border-bottom:
            1px solid
            var(--pc-border);

    }


    body.pcd-page .pcd-quick-item:last-child {

        border-bottom: 0;

    }


    body.pcd-page .pcd-overview,
    body.pcd-page .pcd-highlights,
    body.pcd-page .pcd-applications,
    body.pcd-page .pcd-information,
    body.pcd-page .pcd-service,
    body.pcd-page .pcd-suggestions {

        padding:
            68px 0;

    }


    body.pcd-page .pcd-section-intro {

        margin-bottom: 40px;

    }


    body.pcd-page .pcd-section-intro h2 {

        font-size: 34px;

    }


    body.pcd-page .pcd-overview-copy .pcd-lead {

        font-size: 20px;

    }


    body.pcd-page .pcd-highlight {

        grid-template-columns:
            55px
            minmax(0, 1fr);

        gap: 14px;

        padding:
            25px 0;

    }


    body.pcd-page .pcd-highlight h3 {

        font-size: 20px;

    }


    body.pcd-page .pcd-application-list {

        grid-template-columns:
            1fr;

    }


    body.pcd-page .pcd-application {

        min-height: auto;

        padding:
            25px 0;

    }


    body.pcd-page .pcd-application:nth-child(odd) {

        border-inline-end: 0;

    }


    body.pcd-page .pcd-application h3 {

        margin-top: 30px;

        font-size: 24px;

    }


    body.pcd-page .pcd-info-row {

        grid-template-columns:
            1fr;

        gap: 5px;

        padding:
            18px 0;

    }


    body.pcd-page .pcd-info-row strong {

        font-size: 15px;

    }


    body.pcd-page .pcd-service-grid h2 {

        font-size: 34px;

    }


    body.pcd-page .pcd-section-head-row {

        display: block;

    }


    body.pcd-page .pcd-view-all {

        margin-top: 20px;

    }


    body.pcd-page .pcd-suggestion-grid {

        grid-template-columns:
            1fr;

    }


    body.pcd-page .pcd-suggestion:last-child {

        grid-column: auto;

        max-width: none;

    }


    body.pcd-page .pcd-suggestion-image {

        height: 260px;

    }


    body.pcd-page .pcd-back-products {

        padding:
            70px 0
            80px;

    }

}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 575px) {

    body.pcd-page .pcd-container {

        width:
            calc(100% - 26px);

    }


    body.pcd-page .pcd-hero {

        padding:
            27px
            0
            55px;

    }


    body.pcd-page .pcd-back {

        margin-bottom: 28px;

        font-size: 10px;

    }


    body.pcd-page .pcd-eyebrow {

        font-size: 10px;

    }


    body.pcd-page .pcd-product-meta {

        gap: 10px;

    }


    body.pcd-page .pcd-product-meta span {

        font-size: 9px;

    }


    body.pcd-page .pcd-hero-content h1 {

        font-size: 39px;

    }


    body.pcd-page .pcd-hero-content h2 {

        margin-top: 17px;

        font-size: 20px;

    }


    body.pcd-page .pcd-hero-description {

        margin-top: 15px;

        font-size: 15px;

        line-height: 1.7;

    }


    body.pcd-page .pcd-hero-actions {

        width: 100%;

        margin-top: 25px;

    }


    body.pcd-page .pcd-image-frame {

        height: 350px;

    }


    body.pcd-page .pcd-image-label {

        top: 14px;

        left: 14px;

        font-size: 9px;

    }


    body.pcd-page .pcd-image-caption {

        display: block;

    }


    body.pcd-page .pcd-image-caption span {

        display: block;

        font-size: 9px;

    }


    body.pcd-page .pcd-image-caption span + span {

        margin-top: 5px;

    }


    body.pcd-page .pcd-section-intro h2,
    body.pcd-page .pcd-service-grid h2,
    body.pcd-page .pcd-section-head-row h2,
    body.pcd-page .pcd-back-products h2 {

        font-size: 30px;

    }


    body.pcd-page .pcd-section-kicker {

        font-size: 10px;

    }


    body.pcd-page .pcd-overview-number strong {

        font-size: 95px;

    }


    body.pcd-page .pcd-overview-copy p {

        font-size: 15px;

    }


    body.pcd-page .pcd-overview-copy .pcd-lead {

        font-size: 19px;

    }


    body.pcd-page .pcd-highlight {

        grid-template-columns:
            42px
            minmax(0, 1fr);

    }


    body.pcd-page .pcd-highlight h3 {

        font-size: 19px;

    }


    body.pcd-page .pcd-highlight p,
    body.pcd-page .pcd-application p {

        font-size: 14px;

    }


    body.pcd-page .pcd-application h3 {

        font-size: 22px;

    }


    body.pcd-page .pcd-suggestion-image {

        height: 235px;

    }


    body.pcd-page .pcd-suggestion-body {

        padding:
            20px;

    }


    body.pcd-page .pcd-suggestion-body p {

        min-height: auto;

    }


    body.pcd-page .pcd-cta {

        padding:
            65px 0;

    }


    body.pcd-page .pcd-cta h2 {

        font-size: 31px;

    }


    body.pcd-page .pcd-cta p {

        font-size: 15px;

    }

}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 374px) {

    body.pcd-page .pcd-container {

        width:
            calc(100% - 22px);

    }


    body.pcd-page .pcd-hero-content h1 {

        font-size: 35px;

    }


    body.pcd-page .pcd-hero-content h2 {

        font-size: 18px;

    }


    body.pcd-page .pcd-image-frame {

        height: 300px;

    }


    body.pcd-page .pcd-section-intro h2,
    body.pcd-page .pcd-service-grid h2,
    body.pcd-page .pcd-section-head-row h2,
    body.pcd-page .pcd-back-products h2 {

        font-size: 27px;

    }


    body.pcd-page .pcd-btn {

        min-height: 47px;

        font-size: 10px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.pcd-page *,
    body.pcd-page *::before,
    body.pcd-page *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

    }

}
/* =========================================================
   POWERCORE CONTACT PAGE
   ---------------------------------------------------------
   ALL SELECTORS ARE SCOPED UNDER .pcc-
   DOES NOT MODIFY EXISTING PAGE COMPONENTS
   ========================================================= */


/* =========================================================
   CONTACT PAGE VARIABLES
   ========================================================= */

.pc-contact-page {

    --pcc-orange: #FF8A00;
    --pcc-orange-hover: #E87500;

    --pcc-bg: #F7F5F1;
    --pcc-bg-alt: #EEEAE3;

    --pcc-text: #202A30;
    --pcc-muted: #596A73;

    --pcc-line: rgba(32,42,48,.14);
    --pcc-soft: rgba(255,138,0,.10);

    --pcc-emergency: #C94F49;

    font-family: "Manrope", sans-serif;

    overflow-x: clip;
}


/* =========================================================
   PAGE RESET
   ========================================================= */

.pcc-page,
.pcc-page *,
.pcc-page *::before,
.pcc-page *::after {

    box-sizing: border-box;
}


.pcc-page {

    width: 100%;
    overflow: clip;

    background:
        var(--pcc-bg);

    color:
        var(--pcc-text);
}


.pcc-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--pcc-bg);

    color:
        var(--pcc-text);
}


.pcc-container {

    width:
        min(
            1380px,
            calc(100% - 64px)
        );

    margin-inline: auto;

    position: relative;

    z-index: 2;
}


/* =========================================================
   COMMON TYPOGRAPHY
   ========================================================= */

.pcc-kicker {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--pcc-orange);

    font-size: 13px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.pcc-kicker::before {

    content: "";

    width: 28px;

    height: 2px;

    background:
        var(--pcc-orange);

    box-shadow:
        0 0 12px
        rgba(255,138,0,.55);
}


.pcc-section-heading {

    max-width: 780px;

    margin-bottom:
        clamp(42px, 5vw, 70px);
}


.pcc-section-heading h2,
.pcc-support-copy h2,
.pcc-area-copy h2 {

    margin: 16px 0 0;

    color:
        var(--pcc-text);

    font-size:
        clamp(
            34px,
            4vw,
            56px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -.045em;
}


.pcc-section-heading h2 em,
.pcc-support-copy h2 em,
.pcc-area-copy h2 em,
.pcc-emergency-copy h2 em,
.pcc-final h2 em {

    color:
        var(--pcc-orange);

    font-style:
        normal;
}


.pcc-section-heading p,
.pcc-support-copy > p,
.pcc-area-copy > p,
.pcc-emergency-copy > p,
.pcc-final p {

    margin:
        18px 0 0;

    max-width:
        650px;

    color:
        var(--pcc-muted);

    font-size:
        17px;

    line-height:
        1.75;

    font-weight:
        500;
}


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

.pcc-primary-btn,
.pcc-secondary-btn,
.pcc-emergency-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding:
        0 24px;

    border:
        1px solid
        var(--pcc-orange);

    text-decoration:
        none;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.pcc-primary-btn {

    background:
        var(--pcc-orange);

    color:
        #FFFFFF;

    box-shadow:
        0 10px 28px
        rgba(255,138,0,.18);
}


.pcc-primary-btn:hover {

    background:
        var(--pcc-orange-hover);

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 36px
        rgba(255,138,0,.27);
}


.pcc-primary-btn span {

    transition:
        transform .3s ease;
}


.pcc-primary-btn:hover span {

    transform:
        translate(4px,-4px);
}


.pcc-secondary-btn {

    background:
        transparent;

    color:
        var(--pcc-text);

    border-color:
        var(--pcc-line);
}


.pcc-secondary-btn:hover {

    color:
        var(--pcc-orange);

    border-color:
        var(--pcc-orange);

    transform:
        translateY(-3px);
}


/* =========================================================
   01 — HERO
   ========================================================= */

.pcc-hero {

    position:
        relative;

    min-height:
        65vh;

    height:
        65vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #202A30;
}


.pcc-hero-bg {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(16,22,25,.78),
            rgba(16,22,25,.45),
            rgba(16,22,25,.76)
        ),
        url("../images/contact1.jpg")
        center / cover no-repeat;

    transform:
        scale(1.03);

    animation:
        pccHeroImage 12s ease-in-out infinite alternate;
}


@keyframes pccHeroImage {

    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.09);
    }
}


.pcc-hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .16;

    background-image:
        linear-gradient(
            rgba(255,138,0,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,138,0,.15) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );
}


.pcc-hero-content {

    position:
        relative;

    z-index:
        5;

    width:
        min(900px, calc(100% - 40px));

    text-align:
        center;

    color:
        #FFFFFF;
}


.pcc-hero-content .pcc-kicker {

    justify-content:
        center;
}


.pcc-hero-content h1 {

    margin:
        18px 0 0;

    color:
        #FFFFFF;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height:
        .98;

    font-weight:
        800;

    letter-spacing:
        -.055em;
}


.pcc-hero-content h1 span {

    color:
        var(--pcc-orange);

    display:
        inline-block;
}


.pcc-hero-content p {

    max-width:
        680px;

    margin:
        22px auto 30px;

    color:
        rgba(255,255,255,.84);

    font-size:
        clamp(16px, 1.5vw, 19px);

    line-height:
        1.7;

    font-weight:
        500;
}


.pcc-hero-signal {

    position:
        absolute;

    bottom:
        32px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    gap:
        7px;
}


.pcc-hero-signal span {

    width:
        7px;

    height:
        7px;

    background:
        var(--pcc-orange);

    border-radius:
        50%;

    box-shadow:
        0 0 14px
        rgba(255,138,0,.9);

    animation:
        pccSignal 1.5s ease-in-out infinite;
}


.pcc-hero-signal span:nth-child(2) {

    animation-delay:
        .18s;
}


.pcc-hero-signal span:nth-child(3) {

    animation-delay:
        .36s;
}


@keyframes pccSignal {

    0%,
    100% {
        opacity: .35;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-7px);
    }
}


/* ORANGE ORBITS */

.pcc-hero-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(255,138,0,.28);

    border-radius:
        50%;

    pointer-events:
        none;

    animation:
        pccOrbit 8s linear infinite;
}


.pcc-hero-orbit-one {

    width:
        380px;

    height:
        380px;

    right:
        -150px;

    top:
        10%;

    box-shadow:
        0 0 70px
        rgba(255,138,0,.10);
}


.pcc-hero-orbit-two {

    width:
        620px;

    height:
        620px;

    left:
        -340px;

    bottom:
        -380px;

    animation-direction:
        reverse;
}


@keyframes pccOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   02 — CONTACT INFORMATION
   ========================================================= */

.pcc-contact-info {

    padding:
        clamp(72px, 8vw, 120px) 0;

    background:
        var(--pcc-bg);
}


.pcc-info-track {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        var(--pcc-line);

    border-bottom:
        1px solid
        var(--pcc-line);
}


.pcc-info-item {

    position:
        relative;

    min-height:
        270px;

    padding:
        34px 34px 38px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-inline-start:
        1px solid
        var(--pcc-line);

    overflow:
        hidden;
}


.pcc-info-item:first-child {

    border-inline-start:
        0;
}


.pcc-info-item::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        100%;

    bottom:
        0;

    height:
        3px;

    background:
        var(--pcc-orange);

    box-shadow:
        0 0 18px
        rgba(255,138,0,.7);

    transition:
        right .55s ease;
}


.pcc-info-item:hover::before {

    right:
        0;
}


.pcc-info-number {

    color:
        var(--pcc-orange);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.pcc-info-icon {

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    margin:
        25px 0 20px;

    color:
        var(--pcc-orange);

    border:
        1px solid
        rgba(255,138,0,.35);

    background:
        var(--pcc-soft);

    box-shadow:
        0 0 30px
        rgba(255,138,0,.08);

    font-size:
        19px;
}


.pcc-info-item h3 {

    margin:
        0 0 8px;

    color:
        var(--pcc-text);

    font-size:
        22px;

    font-weight:
        800;
}


.pcc-info-item p {

    margin:
        0 0 14px;

    color:
        var(--pcc-muted);

    font-size:
        15px;

    line-height:
        1.7;
}


.pcc-info-item a,
.pcc-info-item > div:last-child > span {

    color:
        var(--pcc-text);

    font-size:
        15px;

    font-weight:
        800;

    text-decoration:
        none;

    word-break:
        break-word;
}


.pcc-info-item a:hover {

    color:
        var(--pcc-orange);
}


/* =========================================================
   03 — SUPPORT
   ========================================================= */

.pcc-support {

    padding:
        0;

    background:
        var(--pcc-bg-alt);
}


.pcc-support-line {

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pcc-orange),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(255,138,0,.45);
}


.pcc-support-layout {

    min-height:
        650px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        clamp(45px, 7vw, 110px);

    align-items:
        center;

    padding:
        clamp(70px, 8vw, 120px) 0;
}


.pcc-support-visual {

    height:
        520px;

    position:
        relative;
}


.pcc-image-frame {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        var(--pcc-line);

    background:
        #202A30;

    box-shadow:
        20px 20px 0
        var(--pcc-orange);
}


.pcc-image-frame img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        .86;

    filter:
        saturate(.75)
        contrast(1.05);

    transition:
        transform .8s ease;
}


.pcc-image-frame:hover img {

    transform:
        scale(1.06);
}


.pcc-image-scan {

    position:
        absolute;

    left:
        0;

    right:
        0;

    height:
        2px;

    top:
        20%;

    background:
        var(--pcc-orange);

    box-shadow:
        0 0 22px
        rgba(255,138,0,.95);

    animation:
        pccScan 4s ease-in-out infinite;
}


@keyframes pccScan {

    0%,
    100% {
        top: 15%;
        opacity: .25;
    }

    50% {
        top: 82%;
        opacity: 1;
    }
}


.pcc-image-label {

    position:
        absolute;

    left:
        24px;

    bottom:
        22px;

    color:
        #FFFFFF;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}


.pcc-support-copy {

    min-width:
        0;
}


.pcc-support-list {

    margin-top:
        36px;

    border-top:
        1px solid
        var(--pcc-line);
}


.pcc-support-list div {

    display:
        grid;

    grid-template-columns:
        48px 1fr;

    align-items:
        center;

    min-height:
        58px;

    border-bottom:
        1px solid
        var(--pcc-line);

    transition:
        padding .35s ease;
}


.pcc-support-list div:hover {

    padding-inline:
        8px;
}


.pcc-support-list span {

    color:
        var(--pcc-orange);

    font-size:
        13px;

    font-weight:
        800;
}


.pcc-support-list strong {

    color:
        var(--pcc-text);

    font-size:
        16px;

    font-weight:
        700;
}


/* =========================================================
   04 — BOOKING
   ========================================================= */

.pcc-booking {

    padding:
        clamp(76px, 8vw, 125px) 0;

    background:
        var(--pcc-bg);
}


.pcc-form {

    position:
        relative;

    display:
        block;

    margin-top:
        0;

    padding:
        clamp(28px, 4vw, 52px);

    border:
        1px solid
        var(--pcc-line);

    background:
        color-mix(
            in srgb,
            var(--pcc-bg-alt) 55%,
            transparent
        );

    box-shadow:
        0 25px 80px
        rgba(32,42,48,.07);
}


.pcc-form::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        35%;

    height:
        3px;

    background:
        var(--pcc-orange);

    box-shadow:
        0 0 20px
        rgba(255,138,0,.65);
}


.pcc-form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        25px 28px;
}


.pcc-field {

    min-width:
        0;
}


.pcc-field-full {

    grid-column:
        1 / -1;
}


.pcc-field label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--pcc-text);

    font-size:
        14px;

    line-height:
        1.4;

    font-weight:
        800;
}


.pcc-field label span {

    color:
        var(--pcc-emergency);
}


.pcc-field input,
.pcc-field select,
.pcc-field textarea {

    width:
        100%;

    min-height:
        54px;

    border:
        1px solid
        var(--pcc-line);

    outline:
        none;

    background:
        var(--pcc-bg);

    color:
        var(--pcc-text);

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        500;

    padding:
        14px 16px;

    border-radius:
        0;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.pcc-field textarea {

    min-height:
        150px;

    resize:
        vertical;
}


.pcc-field input::placeholder,
.pcc-field textarea::placeholder {

    color:
        var(--pcc-muted);

    opacity:
        .78;
}


.pcc-field select {

    cursor:
        pointer;
}


.pcc-field input:focus,
.pcc-field select:focus,
.pcc-field textarea:focus {

    border-color:
        var(--pcc-orange);

    box-shadow:
        0 0 0 3px
        rgba(255,138,0,.10);
}


/* VALIDATION */

.pcc-field.is-invalid label {

    color:
        var(--pcc-emergency);
}


.pcc-field.is-invalid label span {

    color:
        var(--pcc-emergency);
}


.pcc-field.is-invalid input,
.pcc-field.is-invalid select,
.pcc-field.is-invalid textarea {

    border-color:
        var(--pcc-emergency) !important;

    color:
        var(--pcc-text);

    box-shadow:
        0 0 0 3px
        rgba(201,79,73,.09);
}


.pcc-error {

    display:
        block;

    min-height:
        18px;

    margin-top:
        6px;

    color:
        var(--pcc-emergency);

    font-size:
        12px;

    line-height:
        1.4;

    font-weight:
        700;
}


.pcc-form-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        20px;

    padding-top:
        22px;

    border-top:
        1px solid
        var(--pcc-line);
}


.pcc-form-bottom p {

    margin:
        0;

    color:
        var(--pcc-muted);

    font-size:
        13px;

    font-weight:
        600;
}


.pcc-form-bottom p span {

    color:
        var(--pcc-emergency);
}


.pcc-submit-btn {

    cursor:
        pointer;
}


.pcc-form-success {

    display:
        none;

    margin-top:
        20px;

    padding:
        15px 18px;

    border:
        1px solid
        rgba(255,138,0,.35);

    background:
        var(--pcc-soft);

    color:
        var(--pcc-text);

    font-size:
        14px;

    font-weight:
        700;
}


.pcc-form-success.is-visible {

    display:
        block;
}


/* =========================================================
   05 — EMERGENCY
   ========================================================= */

.pcc-emergency {

    padding:
        clamp(60px, 7vw, 95px) 0;

    background:
        #202A30;

    color:
        #FFFFFF;
}


.pcc-emergency-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -220px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        rgba(255,138,0,.12);

    filter:
        blur(50px);

    pointer-events:
        none;
}


.pcc-emergency-line {

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        4px;

    background:
        var(--pcc-orange);

    box-shadow:
        0 0 30px
        rgba(255,138,0,.75);
}


.pcc-emergency-inner {

    display:
        grid;

    grid-template-columns:
        90px 1fr auto;

    align-items:
        center;

    gap:
        30px;
}


.pcc-emergency-symbol {

    width:
        72px;

    height:
        72px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--pcc-orange);

    border:
        1px solid
        rgba(255,138,0,.5);

    box-shadow:
        0 0 35px
        rgba(255,138,0,.15);

    font-size:
        25px;

    animation:
        pccHanging 3.2s ease-in-out infinite;
    transform-origin:
        top center;
}


@keyframes pccHanging {

    0%,
    100% {
        transform:
            rotate(-3deg);
    }

    50% {
        transform:
            rotate(3deg);
    }
}


.pcc-emergency-copy .pcc-kicker {

    color:
        var(--pcc-orange);
}


.pcc-emergency-copy h2 {

    margin:
        13px 0 0;

    color:
        #F3F1EC;

    font-size:
        clamp(30px, 3.5vw, 48px);

    line-height:
        1.08;

    font-weight:
        800;

    letter-spacing:
        -.04em;
}


.pcc-emergency-copy > p {

    color:
        #A7B4BA;

    max-width:
        680px;
}


.pcc-emergency-action {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        15px;
}


.pcc-emergency-number {

    color:
        #F3F1EC;

    font-size:
        clamp(20px, 2vw, 28px);

    font-weight:
        800;

    text-decoration:
        none;

    white-space:
        nowrap;
}


.pcc-emergency-number:hover {

    color:
        var(--pcc-orange);
}


.pcc-emergency-btn {

    color:
        #FFFFFF;

    text-decoration:
        none;

    border:
        1px solid
        var(--pcc-orange);

    padding:
        14px 20px;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    transition:
        .3s ease;
}


.pcc-emergency-btn:hover {

    background:
        var(--pcc-orange);

    transform:
        translateY(-3px);
}


/* =========================================================
   06 — SERVICE AREA
   ========================================================= */

.pcc-area {

    padding:
        clamp(76px, 8vw, 120px) 0;

    background:
        var(--pcc-bg);
}


.pcc-area-layout {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        clamp(50px, 8vw, 130px);

    align-items:
        center;
}


.pcc-area-details {

    margin-top:
        35px;

    border-top:
        1px solid
        var(--pcc-line);
}


.pcc-area-details > div {

    display:
        grid;

    grid-template-columns:
        48px 1fr;

    gap:
        14px;

    padding:
        18px 0;

    border-bottom:
        1px solid
        var(--pcc-line);
}


.pcc-area-details span {

    color:
        var(--pcc-orange);

    font-size:
        13px;

    font-weight:
        800;
}


.pcc-area-details strong {

    display:
        block;

    color:
        var(--pcc-text);

    font-size:
        16px;

    font-weight:
        800;
}


.pcc-area-details p {

    margin:
        5px 0 0;

    color:
        var(--pcc-muted);

    font-size:
        14px;

    line-height:
        1.55;
}


.pcc-map-frame {

    position:
        relative;

    min-height:
        480px;

    overflow:
        hidden;

    border:
        1px solid
        var(--pcc-line);

    background:
        var(--pcc-bg-alt);

    box-shadow:
        inset 0 0 70px
        rgba(255,138,0,.04);
}


.pcc-map-grid {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(255,138,0,.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,138,0,.11) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    opacity:
        .7;
}


.pcc-map-ring {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%,-50%);

    border:
        1px solid
        rgba(255,138,0,.30);

    border-radius:
        50%;

    animation:
        pccMapPulse 3.5s ease-out infinite;
}


.pcc-map-ring-one {

    width:
        120px;

    height:
        120px;
}


.pcc-map-ring-two {

    width:
        250px;

    height:
        250px;

    animation-delay:
        .7s;
}


.pcc-map-ring-three {

    width:
        400px;

    height:
        400px;

    animation-delay:
        1.4s;
}


@keyframes pccMapPulse {

    0% {
        opacity: .7;
        transform:
            translate(-50%,-50%)
            scale(.8);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%,-50%)
            scale(1.15);
    }
}


.pcc-map-pin {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%,-50%);

    width:
        62px;

    height:
        62px;

    display:
        grid;

    place-items:
        center;

    color:
        #FFFFFF;

    background:
        var(--pcc-orange);

    box-shadow:
        0 0 35px
        rgba(255,138,0,.45);

    font-size:
        22px;

    animation:
        pccPinFloat 2.5s ease-in-out infinite;
}


@keyframes pccPinFloat {

    0%,
    100% {
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%,-50%)
            translateY(-8px);
    }
}


.pcc-map-label {

    position:
        absolute;

    left:
        25px;

    bottom:
        22px;

    color:
        var(--pcc-text);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


/* =========================================================
   07 — FINAL
   ========================================================= */

.pcc-final {

    padding:
        clamp(80px, 9vw, 135px) 0;

    background:
        var(--pcc-bg-alt);

    text-align:
        center;
}


.pcc-final-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .45;

    background-image:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(255,138,0,.10) 50%,
            transparent 50.2%
        ),
        linear-gradient(
            transparent 49.8%,
            rgba(255,138,0,.10) 50%,
            transparent 50.2%
        );

    background-size:
        80px 80px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 70%
        );
}


.pcc-final-inner {

    max-width:
        900px;
}


.pcc-final .pcc-kicker {

    justify-content:
        center;
}


.pcc-final h2 {

    margin:
        18px 0 0;

    color:
        var(--pcc-text);

    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -.05em;
}


.pcc-final p {

    margin-inline:
        auto;
}


.pcc-final-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;

    margin-top:
        30px;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.pcc-reveal {

    opacity:
        0;

    transform:
        translateY(40px);

    transition:
        opacity .8s cubic-bezier(.16,1,.3,1),
        transform .8s cubic-bezier(.16,1,.3,1);
}


.pcc-reveal.is-visible {

    opacity:
        1;

    transform:
        translate3d(0,0,0);
}


.pcc-slide-left {

    transform:
        translateX(-55px);
}


.pcc-slide-right {

    transform:
        translateX(55px);
}


.pcc-slide-up {

    transform:
        translateY(55px);
}


.pcc-slide-left.is-visible,
.pcc-slide-right.is-visible,
.pcc-slide-up.is-visible {

    transform:
        translate3d(0,0,0);
}


/* =========================================================
   LAPTOP-L / DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .pcc-container {

        width:
            min(
                1450px,
                calc(100% - 100px)
            );
    }

    .pcc-support-visual {

        height:
            570px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 992px) and (max-width: 1399px) {

    .pcc-container {

        width:
            calc(100% - 56px);
    }

    .pcc-support-layout {

        gap:
            55px;
    }

    .pcc-map-frame {

        min-height:
            430px;
    }

}


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

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

    .pcc-container {

        width:
            calc(100% - 44px);
    }


    .pcc-hero {

        height:
            65vh;

        min-height:
            520px;
    }


    .pcc-info-track {

        grid-template-columns:
            1fr;

    }


    .pcc-info-item {

        min-height:
            220px;

        border-inline-start:
            0;

        border-bottom:
            1px solid
            var(--pcc-line);
    }


    .pcc-info-item:last-child {

        border-bottom:
            0;
    }


    .pcc-support-layout {

        grid-template-columns:
            1fr;

        gap:
            55px;

        padding:
            70px 0;
    }


    .pcc-support-visual {

        height:
            480px;
    }


    .pcc-area-layout {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .pcc-map-frame {

        min-height:
            440px;
    }


    .pcc-emergency-inner {

        grid-template-columns:
            75px 1fr;

    }


    .pcc-emergency-action {

        grid-column:
            2;

        align-items:
            flex-start;
    }

}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (min-width: 576px) and (max-width: 767px) {

    .pcc-container {

        width:
            calc(100% - 36px);
    }


    .pcc-hero {

        height:
            65vh;

        min-height:
            500px;
    }


    .pcc-info-track {

        grid-template-columns:
            1fr;
    }


    .pcc-info-item {

        border-inline-start:
            0;

        border-bottom:
            1px solid
            var(--pcc-line);

    }


    .pcc-info-item:last-child {

        border-bottom:
            0;
    }


    .pcc-support-layout,
    .pcc-area-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .pcc-support-visual {

        height:
            400px;
    }


    .pcc-form-grid {

        grid-template-columns:
            1fr;
    }


    .pcc-field-full {

        grid-column:
            auto;
    }


    .pcc-form-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .pcc-emergency-inner {

        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    .pcc-emergency-action {

        align-items:
            flex-start;
    }


    .pcc-map-frame {

        min-height:
            390px;
    }

}


/* =========================================================
   MOBILE-M
   ========================================================= */

@media (min-width: 361px) and (max-width: 575px) {

    .pcc-container {

        width:
            calc(100% - 30px);
    }


    .pcc-hero {

        height:
            65vh;

        min-height:
            490px;
    }


    .pcc-hero-content {

        width:
            calc(100% - 28px);
    }


    .pcc-hero-content h1 {

        font-size:
            42px;
    }


    .pcc-hero-content p {

        font-size:
            15px;
    }


    .pcc-info-track {

        grid-template-columns:
            1fr;
    }


    .pcc-info-item {

        min-height:
            240px;

        padding:
            28px 22px;

        border-inline-start:
            0;

        border-bottom:
            1px solid
            var(--pcc-line);
    }


    .pcc-info-item:last-child {

        border-bottom:
            0;
    }


    .pcc-support-layout,
    .pcc-area-layout {

        grid-template-columns:
            1fr;

        gap:
            38px;
    }


    .pcc-support-visual {

        height:
            350px;
    }


    .pcc-image-frame {

        box-shadow:
            12px 12px 0
            var(--pcc-orange);
    }


    .pcc-form {

        padding:
            24px 18px;
    }


    .pcc-form-grid {

        grid-template-columns:
            1fr;

        gap:
            19px;
    }


    .pcc-field-full {

        grid-column:
            auto;
    }


    .pcc-form-bottom {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .pcc-submit-btn {

        width:
            100%;
    }


    .pcc-emergency-inner {

        grid-template-columns:
            1fr;

        gap:
            22px;
    }


    .pcc-emergency-action {

        align-items:
            flex-start;
    }


    .pcc-emergency-number {

        white-space:
            normal;
    }


    .pcc-map-frame {

        min-height:
            330px;
    }


    .pcc-final-actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .pcc-final-actions a {

        width:
            100%;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 360px) {

    .pcc-container {

        width:
            calc(100% - 24px);
    }
        .pcc-info-track {

        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr);

        width:
            100%;
    }


    .pcc-hero {

        height:
            65vh;

        min-height:
            470px;
    }


    .pcc-hero-content h1 {

        font-size:
            37px;
    }


    .pcc-hero-content p {

        font-size:
            14px;

        line-height:
            1.65;
    }


    .pcc-primary-btn,
    .pcc-secondary-btn,
    .pcc-emergency-btn {

        min-height:
            50px;

        padding:
            0 17px;

        font-size:
            13px;
    }


    .pcc-section-heading h2,
    .pcc-support-copy h2,
    .pcc-area-copy h2 {

        font-size:
            31px;
    }


    .pcc-section-heading p,
    .pcc-support-copy > p,
    .pcc-area-copy > p {

        font-size:
            15px;
    }


    .pcc-info-item {

        min-height:
            250px;

        padding:
            26px 18px;
    }
    .pcc-support-layout,
.pcc-area-layout {
    grid-template-columns: 1fr;
    gap: 38px;
}

.pcc-image-frame {
    box-shadow: 12px 12px 0 var(--pcc-orange);
}

.pcc-form-grid {
    grid-template-columns: 1fr;
}

.pcc-field-full {
    grid-column: auto;
}

.pcc-form-bottom {
    align-items: stretch;
    flex-direction: column;
}

.pcc-submit-btn {
    width: 100%;
}

.pcc-emergency-inner {
    grid-template-columns: 1fr;
    gap: 22px;
}

.pcc-emergency-action {
    align-items: flex-start;
}

.pcc-emergency-number {
    white-space: normal;
}

.pcc-final-actions {
    flex-direction: column;
    align-items: stretch;
}

.pcc-final-actions a {
    width: 100%;
}


    .pcc-support-visual {

        height:
            300px;
    }


    .pcc-form {

        padding:
            20px 14px;
    }


    .pcc-field input,
    .pcc-field select,
    .pcc-field textarea {

        font-size:
            14px;

        padding:
            13px 13px;
    }


    .pcc-emergency-copy h2 {

        font-size:
            29px;
    }


    .pcc-map-frame {

        min-height:
            285px;
    }


    .pcc-final h2 {

        font-size:
            37px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pcc-hero-bg,
    .pcc-hero-orbit,
    .pcc-hero-signal span,
    .pcc-image-scan,
    .pcc-emergency-symbol,
    .pcc-map-ring,
    .pcc-map-pin {

        animation:
            none !important;
    }


    .pcc-reveal {

        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   06 — EMERGENCY DISPATCH BEACON
   Scoped to .pce-* — no global selectors.
   ========================================================= */

.pce-beacon {

    position: relative;

    padding:
        clamp(84px, 9vw, 140px) 0
        clamp(72px, 8vw, 120px);

    overflow: hidden;

    isolation: isolate;

    background:
        var(--pcc-bg-alt);
}


/* ---------------------------------------------------------
   ATMOSPHERE
   --------------------------------------------------------- */

.pce-beacon-bg {

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;
}

.pce-beacon-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(70px);
}

.pce-beacon-glow-a {

    width: 620px;
    height: 620px;

    left: 50%;
    top: 6%;

    transform: translateX(-50%);

    background:
        radial-gradient(circle,
            rgba(255,138,0,.22),
            transparent 68%);

    animation:
        pceBeaconDriftA 17s ease-in-out infinite;
}

.pce-beacon-glow-b {

    width: 460px;
    height: 460px;

    left: -6%;
    bottom: -8%;

    background:
        radial-gradient(circle,
            rgba(255,138,0,.15),
            transparent 70%);

    animation:
        pceBeaconDrift 21s ease-in-out infinite reverse;
}

.pce-beacon-glow-c {

    width: 420px;
    height: 420px;

    right: -5%;
    top: 32%;

    background:
        radial-gradient(circle,
            rgba(255,138,0,.13),
            transparent 70%);

    animation:
        pceBeaconDrift 24s ease-in-out infinite;
}

.pce-beacon-grid {

    position: absolute;
    inset: 0;

    opacity: .5;

    background-image:
        linear-gradient(var(--pcc-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--pcc-line) 1px, transparent 1px);

    background-size: 64px 64px;

    -webkit-mask-image:
        radial-gradient(120% 80% at 50% 45%,
            #000 25%,
            transparent 76%);

    mask-image:
        radial-gradient(120% 80% at 50% 45%,
            #000 25%,
            transparent 76%);
}


/* floating motes */

.pce-beacon-motes {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;
}

.pce-beacon-motes span {

    position: absolute;

    left: var(--x);
    bottom: -12px;

    width: var(--z);
    height: var(--z);

    border-radius: 50%;

    background: #FFD9A0;

    box-shadow:
        0 0 8px var(--pcc-orange),
        0 0 20px rgba(255,138,0,.7);

    opacity: 0;

    animation:
        pceBeaconRise var(--s) linear infinite;
    animation-delay: var(--d);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.pce-beacon-head {

    max-width: 820px;

    margin: 0 auto clamp(34px, 4vw, 58px);

    text-align: center;
}

.pce-beacon-head .pcc-kicker {

    justify-content: center;
}

.pce-beacon-head h2 {

    margin: 16px 0 0;

    color: var(--pcc-text);

    font-size:
        clamp(34px, 4.2vw, 60px);

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -.045em;
}

.pce-beacon-head h2 em {

    display: block;

    color: var(--pcc-orange);

    font-style: normal;

    text-shadow: 0 0 30px rgba(255,138,0,.25);
}

.pce-beacon-head p {

    margin: 20px auto 0;

    max-width: 620px;

    color: var(--pcc-muted);

    font-size: 17px;

    line-height: 1.75;

    font-weight: 500;
}


/* ---------------------------------------------------------
   BEACON STAGE
   --------------------------------------------------------- */

.pce-beacon-stage {

    position: relative;

    width: min(760px, 100%);

    aspect-ratio: 1;

    margin: 0 auto;
}

.pce-beacon-rings {

    position: absolute;
    inset: 0;
}

.pce-beacon-rings span {

    position: absolute;

    border-radius: 50%;

    border: 1px dashed rgba(255,138,0,.28);

    animation:
        pceBeaconSpin 42s linear infinite;
}

.pce-beacon-rings span:nth-child(1) { inset: 0; }
.pce-beacon-rings span:nth-child(2) { inset: 13%; animation-duration: 32s; animation-direction: reverse; }
.pce-beacon-rings span:nth-child(3) { inset: 26%; animation-duration: 24s; }
.pce-beacon-rings span:nth-child(4) { inset: 38%; animation-duration: 18s; animation-direction: reverse; }

.pce-beacon-sweep {

    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        conic-gradient(from 0deg,
            rgba(255,138,0,.34),
            transparent 34%);

    -webkit-mask-image:
        radial-gradient(circle, transparent 0%, #000 100%);

    mask-image:
        radial-gradient(circle, transparent 0%, #000 100%);

    animation:
        pceBeaconSpin 7s linear infinite;
}

.pce-beacon-ping {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 190px;
    height: 190px;

    margin: -95px 0 0 -95px;

    border-radius: 50%;

    border: 2px solid var(--pcc-orange);

    opacity: 0;

    animation:
        pceBeaconPing 4.4s ease-out infinite;
}

.pce-beacon-ping-2 { animation-delay: 1.45s; }
.pce-beacon-ping-3 { animation-delay: 2.9s; }

.pce-beacon-orbiter {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    animation:
        pceBeaconOrbit 9s linear infinite;
}

.pce-beacon-orbiter::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 9px;
    height: 9px;

    margin-left: -4.5px;

    border-radius: 50%;

    background: var(--pcc-orange);

    box-shadow:
        0 0 12px var(--pcc-orange),
        0 0 26px rgba(255,138,0,.7);
}

.pce-beacon-orbiter-2 {

    inset: 13%;

    opacity: .75;

    animation-duration: 15s;
    animation-direction: reverse;
}

.pce-beacon-orbiter-2::after {

    width: 6px;
    height: 6px;

    margin-left: -3px;

    opacity: .8;
}


/* ---------------------------------------------------------
   CORE
   --------------------------------------------------------- */

.pce-beacon-core {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: min(310px, 62%);

    aspect-ratio: 1;

    display: flex;
    flex-direction: column;

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

    gap: 8px;

    padding: 22px;

    text-align: center;

    border-radius: 50%;

    background:
        radial-gradient(circle at 50% 34%,
            #FFD9A0 0%,
            var(--pcc-orange) 46%,
            #E87500 100%);

    box-shadow:
        0 0 0 10px rgba(255,138,0,.10),
        0 0 0 22px rgba(255,138,0,.05),
        0 0 60px rgba(255,138,0,.55);

    animation:
        pceBeaconCore 4.2s ease-in-out infinite;
}

.pce-beacon-siren {

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: rgba(16,22,25,.16);

    color: #101619;

    font-size: 19px;

    animation:
        pceBeaconSiren 1.5s ease-in-out infinite;
}

.pce-beacon-core-label {

    font-size: 10.5px;

    font-weight: 800;

    letter-spacing: .17em;

    color: rgba(16,22,25,.72);
}

.pce-beacon-number {

    color: #101619;

    font-size: clamp(19px, 2vw, 25px);

    font-weight: 800;

    letter-spacing: -.02em;

    text-decoration: none;

    white-space: nowrap;
}

.pce-beacon-call {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 999px;

    background: #101619;

    color: var(--pcc-orange);

    font-size: 11.5px;

    font-weight: 800;

    letter-spacing: .12em;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.pce-beacon-call:hover {

    transform: translateY(-2px);

    box-shadow: 0 0 22px rgba(16,22,25,.45);
}


/* ---------------------------------------------------------
   FAULT PODS
   --------------------------------------------------------- */

.pce-beacon-pods {

    display: contents;
}

.pce-beacon-pod {

    position: absolute;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 17px;

    border-radius: 999px;

    background: var(--pcc-bg);

    border: 1px solid var(--pcc-line);

    box-shadow: 0 12px 32px rgba(0,0,0,.10);

    color: var(--pcc-text);

    font-size: 13.5px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        border-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.pce-beacon-pod i {

    color: var(--pcc-orange);

    font-size: 13px;
}

.pce-beacon-pod:hover {

    transform: translateY(-4px);

    color: var(--pcc-orange);

    border-color: var(--pcc-orange);

    box-shadow:
        0 0 0 1px var(--pcc-orange),
        0 0 26px rgba(255,138,0,.40);
}

.pce-beacon-pod-1 { top: 3%;   left: 50%; transform: translateX(-50%); }
.pce-beacon-pod-2 { top: 26%;  right: -3%; }
.pce-beacon-pod-3 { top: 62%;  right: -5%; }
.pce-beacon-pod-4 { bottom: 3%; left: 50%; transform: translateX(-50%); }
.pce-beacon-pod-5 { top: 62%;  left: -5%; }
.pce-beacon-pod-6 { top: 26%;  left: -3%; }

.pce-beacon-pod-1:hover { transform: translateX(-50%) translateY(-4px); }
.pce-beacon-pod-4:hover { transform: translateX(-50%) translateY(-4px); }


/* ---------------------------------------------------------
   CHANNELS
   --------------------------------------------------------- */

.pce-beacon-channels {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1px;

    margin-top: clamp(40px, 5vw, 68px);

    background: var(--pcc-line);

    border-top: 1px solid var(--pcc-line);
    border-bottom: 1px solid var(--pcc-line);
}

.pce-beacon-channel {

    position: relative;

    display: block;

    padding: 26px 22px 24px;

    background: var(--pcc-bg-alt);

    text-decoration: none;

    transition:
        background .35s ease;
}

.pce-beacon-channel::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(90deg, transparent, var(--pcc-orange), transparent);

    transform: scaleX(0);

    transition: transform .45s cubic-bezier(.16,1,.3,1);
}

.pce-beacon-channel:hover {

    background: var(--pcc-bg);
}

.pce-beacon-channel:hover::after {

    transform: scaleX(1);
}

.pce-beacon-channel-idx {

    display: block;

    margin-bottom: 10px;

    color: var(--pcc-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .16em;
}

.pce-beacon-channel strong {

    display: block;

    color: var(--pcc-text);

    font-size: 17px;

    font-weight: 800;

    letter-spacing: -.02em;
}

.pce-beacon-channel-sub {

    display: block;

    margin-top: 7px;

    color: var(--pcc-muted);

    font-size: 13px;

    line-height: 1.6;

    font-weight: 500;
}


/* ---------------------------------------------------------
   TICKER
   --------------------------------------------------------- */

.pce-beacon-ticker {

    margin-top: clamp(30px, 3.5vw, 48px);

    overflow: hidden;

    -webkit-mask-image:
        linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);

    mask-image:
        linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.pce-beacon-ticker-track {

    display: flex;

    align-items: center;

    gap: 26px;

    width: max-content;

    padding: 12px 0;

    animation:
        pceBeaconMarquee 36s linear infinite;
}

.pce-beacon-ticker:hover .pce-beacon-ticker-track {

    animation-play-state: paused;
}

.pce-beacon-ticker-track span {

    color: var(--pcc-muted);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .04em;

    white-space: nowrap;
}

.pce-beacon-ticker-track i {

    color: var(--pcc-orange);

    font-size: 8px;

    font-style: normal;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pceBeaconDrift {

    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50%      { transform: translate3d(24px,20px,0) scale(1.08); }

}

@keyframes pceBeaconDriftA {

    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) translateY(18px) scale(1.1); }

}


@keyframes pceBeaconSpin {

    to { transform: rotate(360deg); }

}


@keyframes pceBeaconPing {

    0% {
        transform: scale(.28);
        opacity: .9;
    }

    100% {
        transform: scale(3.2);
        opacity: 0;
    }

}


@keyframes pceBeaconOrbit {

    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }

}


@keyframes pceBeaconCore {

    0%, 100% { box-shadow: 0 0 0 10px rgba(255,138,0,.10), 0 0 0 22px rgba(255,138,0,.05), 0 0 60px rgba(255,138,0,.55); }
    50%      { box-shadow: 0 0 0 16px rgba(255,138,0,.08), 0 0 0 34px rgba(255,138,0,.04), 0 0 96px rgba(255,138,0,.75); }

}


@keyframes pceBeaconSiren {

    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.12); opacity: .82; }

}


@keyframes pceBeaconRise {

    0%   { transform: translateY(0);      opacity: 0; }
    12%  { opacity: .95; }
    78%  { opacity: .5; }
    100% { transform: translateY(-560px); opacity: 0; }

}


@keyframes pceBeaconMarquee {

    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }

}


/* =========================================================
   RESPONSIVE — DESKTOP XL
   ========================================================= */

@media (min-width: 1600px) {

    .pce-beacon-stage {

        width: min(820px, 100%);
    }

    .pce-beacon-core {

        width: min(330px, 62%);
    }
}


/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1279px) {

    .pce-beacon-stage {

        width: min(660px, 100%);
    }

    .pce-beacon-core {

        width: min(280px, 64%);
    }

    .pce-beacon-pod {

        font-size: 12.5px;

        padding: 9px 14px;
    }

    .pce-beacon-channel {

        padding: 22px 18px 20px;
    }

    .pce-beacon-channel strong {

        font-size: 16px;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .pce-beacon-stage {

        width: min(560px, 100%);
    }

    .pce-beacon-core {

        width: min(250px, 68%);
    }

    .pce-beacon-number {

        font-size: 19px;
    }

    /* pods tuck in so nothing clips at the edges */

    .pce-beacon-pod-2 { right: -1%; }
    .pce-beacon-pod-3 { right: -1%; }
    .pce-beacon-pod-5 { left: -1%; }
    .pce-beacon-pod-6 { left: -1%; }

    .pce-beacon-channels {

        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   RESPONSIVE — MOBILE-M
   ========================================================= */

@media (max-width: 767px) {

    .pce-beacon-motes { display: none; }

    .pce-beacon-stage {

        width: min(420px, 100%);
    }

    .pce-beacon-core {

        width: min(210px, 72%);
    }

    .pce-beacon-siren {

        width: 38px;
        height: 38px;

        font-size: 17px;
    }

    .pce-beacon-core-label {

        font-size: 9.5px;
        letter-spacing: .14em;
    }

    .pce-beacon-number {

        font-size: 17px;
    }

    /* the ring of pods becomes a wrapped list under the beacon */

    .pce-beacon-pods {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        margin-top: 26px;
    }

    .pce-beacon-pod {

        position: static;

        display: inline-flex;

        margin: 0 5px 8px 0;

        font-size: 12px;

        padding: 8px 13px;
    }

    .pce-beacon-pod-1:hover,
    .pce-beacon-pod-4:hover { transform: translateY(-4px); }

    .pce-beacon-stage {

        aspect-ratio: auto;
    }

    .pce-beacon-rings,
    .pce-beacon-sweep,
    .pce-beacon-ping,
    .pce-beacon-orbiter {

        display: none;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 390px) {

    .pce-beacon-head h2 {

        font-size: 30px;
    }

    .pce-beacon-head p {

        font-size: 15px;
    }

    .pce-beacon-stage {

        width: min(340px, 100%);
    }

    .pce-beacon-core {

        width: min(190px, 76%);
    }

    .pce-beacon-number {

        font-size: 15.5px;
    }

    .pce-beacon-pod {

        font-size: 11.5px;

        padding: 7px 11px;
    }

    .pce-beacon-channels {

        grid-template-columns: 1fr;
    }

    .pce-beacon-channel-sub {

        font-size: 12.5px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pce-beacon *,
    .pce-beacon *::before,
    .pce-beacon *::after {

        animation:
            none !important;

        transition:
            none !important;
    }

}

/* =========================================================
   SERVICE NETWORK — LEFT CONTENT / RIGHT MAP
   ========================================================= */

.pc-contact-network {
    width: 100%;
    padding: 75px 6%;
    background: var(--bg-primary, #F7F5F1);
    color: var(--text-primary, #202A30);
    overflow: hidden;
}

.pc-contact-network-header {
    max-width: 1200px;
    margin: 0 auto 35px;
    text-align: left;
}

/* Two-column layout */
.pc-contact-network {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(450px, 1.15fr);
    align-items: center;
    gap: 60px;
}

/* Keep heading/content on left */
.pc-contact-network-header {
    margin: 0;
    max-width: 500px;
}

.pc-contact-network-header .pc-contact-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #FF8A00;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pc-contact-network-header h2 {
    margin: 0 0 18px;
    color: var(--text-primary, #202A30);
    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 800;
    line-height: 1.1;
}

.pc-contact-network-header p {
    margin: 0;
    max-width: 470px;
    color: var(--text-secondary, #596A73);
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1.7;
}

/* Smaller map on right */
.pc-contact-map-wrap {
    position: relative;
    width: 100%;
    height: 390px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 138, 0, 0.35);
    box-shadow: 0 18px 45px rgba(32, 42, 48, 0.13);
}

.pc-contact-map-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Orange edge effect */
.pc-contact-map-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid rgba(255, 138, 0, 0.12);
    box-shadow: inset 0 0 35px rgba(255, 138, 0, 0.07);
}


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

@media (max-width: 1023px) {
    .pc-contact-network {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
        padding: 65px 5%;
    }

    .pc-contact-map-wrap {
        height: 350px;
    }

    .pc-contact-network-header h2 {
        font-size: 36px;
    }
}


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

@media (max-width: 767px) {
    .pc-contact-network {
        display: block;
        padding: 55px 20px;
    }

    .pc-contact-network-header {
        margin-bottom: 30px;
        text-align: left;
    }

    .pc-contact-network-header h2 {
        font-size: 32px;
    }

    .pc-contact-network-header p {
        font-size: 16px;
    }

    .pc-contact-map-wrap {
        height: 300px;
    }
}


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

@media (max-width: 390px) {
    .pc-contact-network {
        padding: 50px 15px;
    }

    .pc-contact-network-header h2 {
        font-size: 29px;
    }

    .pc-contact-map-wrap {
        height: 270px;
    }
}

/* =========================================================
   POWERCORE ABOUT PAGE
   PAGE-SCOPED STYLES ONLY
   ========================================================= */

.pca-page {
    --pca-bg: #F7F5F1;
    --pca-bg-alt: #ECE9E2;
    --pca-graphite: #202A30;
    --pca-muted: #596A73;
    --pca-orange: #FF8A00;
    --pca-orange-hover: #E87500;
    --pca-white: #FFFFFF;
    --pca-line: rgba(32, 42, 48, 0.16);

    background: var(--pca-bg);
    color: var(--pca-graphite);
}

.pca-page .pca-main {
    width: 100%;
    overflow: hidden;
}

.pca-page .pca-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.pca-page .pca-container {
    position: relative;
    z-index: 2;
    width: min(1380px, calc(100% - 100px));
    margin-inline: auto;
}

.pca-page .pca-kicker {
    display: inline-block;

    color: var(--pca-orange);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 2px;
    line-height: 1.2;
}

.pca-page .pca-section h2 {
    margin: 0;

    color: var(--pca-graphite);

    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;

    line-height: 1.05;
    letter-spacing: -0.04em;
}

.pca-page .pca-section h2 em,
.pca-page .pca-purpose-card h3 em {
    color: var(--pca-orange);
    font-style: normal;
}


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

.pca-page .pca-hero {
    position: relative;

    width: 100%;
    height: 65vh;
    min-height: 500px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background: #101619;
    color: #F3F1EC;
}

.pca-page .pca-hero-bg {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 14, .84),
            rgba(8, 12, 14, .48),
            rgba(8, 12, 14, .78)
        ),
        url("../images/aboutpage.hero.jpg")
        center / cover
        no-repeat;

    transform: scale(1.03);

    animation:
        pcaHeroZoom 12s ease-out forwards;
}

.pca-page .pca-hero-grid {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(255, 138, 0, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 138, 0, .08) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    opacity: .32;
}

.pca-page .pca-hero-glow {
    position: absolute;

    width: min(42vw, 620px);
    height: min(42vw, 620px);

    border: 1px solid rgba(255, 138, 0, .22);
    border-radius: 50%;

    box-shadow:
        0 0 80px rgba(255, 138, 0, .08),
        inset 0 0 80px rgba(255, 138, 0, .05);

    animation:
        pcaOrbit 10s linear infinite;
}

.pca-page .pca-hero-content {
    position: relative;
    z-index: 3;

    width: min(900px, calc(100% - 40px));

    text-align: center;
}

.pca-page .pca-hero-content h1 {
    margin: 14px 0 20px;

    color: #F3F1EC;

    font-size: clamp(38px, 5vw, 64px);
    font-weight: 800;

    line-height: 1.02;
    letter-spacing: -0.045em;
}

.pca-page .pca-hero-content h1 span {
    color: #FF9D2E;
}

.pca-page .pca-hero-content p {
    width: min(720px, 100%);

    margin: 0 auto 28px;

    color: #D5DADD;

    font-size: 18px;
    font-weight: 500;

    line-height: 1.7;
}

.pca-page .pca-hero-link {
    display: inline-flex;

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

    gap: 12px;

    min-height: 50px;

    padding: 0 20px;

    border: 1px solid var(--pca-orange);

    background: var(--pca-orange);

    color: #202A30;

    box-shadow: 0 0 25px rgba(255, 138, 0, .25);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1px;

    text-decoration: none;

    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.pca-page .pca-hero-link:hover {
    background: #FFB14A;

    border-color: #FFB14A;

    color: #202A30;

    box-shadow:
        0 0 30px rgba(255, 138, 0, .30);

    transform: translateY(-2px);
}

.pca-page .pca-hero-link span {
    font-size: 20px;
}


/* =========================================================
   PARTICLES
   ========================================================= */

.pca-page .pca-particles {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}

.pca-page .pca-particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 12px rgba(255, 138, 0, .75);

    opacity: .25;

    animation:
        pcaParticleFloat
        linear
        infinite;
}


/* =========================================================
   COMPANY OVERVIEW
   ========================================================= */

.pca-page .pca-overview {
    position: relative;

    padding:
        clamp(90px, 9vw, 145px)
        0;

    background: var(--pca-bg);
}

.pca-page .pca-overview-line {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(255, 138, 0, .28),
            transparent
        );

    opacity: .5;
}

.pca-page .pca-overview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(50px, 7vw, 105px);

    align-items: center;
}

.pca-page .pca-overview-image {
    min-width: 0;
}

.pca-page .pca-image-frame {
    position: relative;

    width: 100%;
    min-height: 570px;

    overflow: hidden;

    border: 1px solid rgba(255, 138, 0, .25);

    background: #ECE9E2;

    box-shadow:
        20px 25px 70px rgba(32, 42, 48, .12);
}

.pca-page .pca-image-frame::before {
    content: "";

    position: absolute;
    inset: 14px;

    z-index: 2;

    border: 1px solid rgba(255, 138, 0, .28);

    pointer-events: none;
}

.pca-page .pca-image-frame img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 570px;

    object-fit: cover;

    filter:
        saturate(.92)
        contrast(1.02);

    transition:
        transform .8s ease;
}

.pca-page .pca-image-frame:hover img {
    transform: scale(1.035);
}

.pca-page .pca-image-tag {
    position: absolute;

    left: 26px;
    bottom: 25px;

    z-index: 3;

    padding: 9px 12px;

    color: #F3F1EC;

    background: rgba(16, 22, 25, .84);

    border-left:
        3px solid
        var(--pca-orange);

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

    letter-spacing: 1.2px;
}

.pca-page .pca-image-corner {
    position: absolute;

    z-index: 3;

    width: 48px;
    height: 48px;

    border-color:
        var(--pca-orange);

    border-style: solid;
}

.pca-page .pca-image-corner-one {
    top: 0;
    right: 0;

    border-width:
        3px 3px 0 0;
}

.pca-page .pca-image-corner-two {
    left: 0;
    bottom: 0;

    border-width:
        0 0 3px 3px;
}

.pca-page .pca-overview-copy {
    min-width: 0;
}

.pca-page .pca-overview-copy h2 {
    margin:
        14px 0 22px;
}

.pca-page .pca-overview-copy > p {
    max-width: 720px;

    margin:
        0 0 17px;

    color:
        var(--pca-muted);

    font-size: 17px;

    line-height: 1.78;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.pca-page .pca-capabilities {
    margin-top: 30px;

    border-top:
        1px solid
        var(--pca-line);
}

.pca-page .pca-capabilities > div {
    display: grid;

    grid-template-columns:
        42px
        minmax(180px, .65fr)
        minmax(180px, 1fr);

    gap: 16px;

    align-items: start;

    padding: 18px 0;

    border-bottom:
        1px solid
        var(--pca-line);

    transition:
        padding-left .3s ease,
        border-color .3s ease;
}

.pca-page .pca-capabilities > div:hover {
    padding-left: 8px;

    border-color:
        rgba(255, 138, 0, .55);
}

.pca-page .pca-capabilities span {
    color:
        var(--pca-orange);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;
}

.pca-page .pca-capabilities strong {
    color:
        var(--pca-graphite);

    font-size: 16px;
    font-weight: 800;
}

.pca-page .pca-capabilities small {
    color:
        var(--pca-muted);

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   MISSION / VISION
   ========================================================= */

.pca-page .pca-purpose {
    position: relative;

    padding:
        clamp(95px, 10vw, 155px)
        0;

    background: #202A30;

    color: #F3F1EC;
}

.pca-page .pca-purpose-grid {
    position: absolute;
    inset: 0;

    opacity: .13;

    background:
        linear-gradient(
            rgba(255, 138, 0, .15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 138, 0, .15) 1px,
            transparent 1px
        );

    background-size: 80px 80px;
}

.pca-page .pca-purpose-heading {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin:
        0 auto 65px;

    text-align: center;
}

.pca-page .pca-purpose-heading h2 {
    margin:
        14px 0 17px;

    color: #F3F1EC;
}

.pca-page .pca-purpose-heading p {
    max-width: 680px;

    margin: 0 auto;

    color: #BFC9CD;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   COLLISION STAGE
   ========================================================= */

.pca-page .pca-purpose-stage {
    position: relative;

    min-height: 470px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        clamp(30px, 8vw, 150px);

    align-items: center;
}

.pca-page .pca-purpose-card {
    position: relative;

    min-height: 405px;

    padding:
        38px 38px 34px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 138, 0, .46);

    background:
        linear-gradient(
            145deg,
            rgba(39, 49, 54, .98),
            rgba(21, 27, 30, .98)
        );

    box-shadow:
        0 0 0 1px rgba(255, 138, 0, .04),
        0 0 35px rgba(255, 138, 0, .06),
        inset 0 0 35px rgba(255, 138, 0, .025);

    transition:
        transform .8s cubic-bezier(.2,.75,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* glowing corners */

.pca-page .pca-purpose-card::before,
.pca-page .pca-purpose-card::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    border-color:
        #FF8A00;

    border-style: solid;

    opacity: .7;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 138, 0, .4)
        );
}

.pca-page .pca-purpose-card::before {
    top: -1px;
    left: -1px;

    border-width:
        2px 0 0 2px;
}

.pca-page .pca-purpose-card::after {
    right: -1px;
    bottom: -1px;

    border-width:
        0 2px 2px 0;
}


/* stronger glow after collision */

.pca-page .pca-purpose-card.is-collided {
    border-color:
        rgba(255, 157, 46, .85);

    box-shadow:
        0 0 55px rgba(255, 138, 0, .16),
        inset 0 0 45px rgba(255, 138, 0, .05);
}

.pca-page .pca-card-number {
    position: absolute;

    top: 24px;
    right: 28px;

    color: #FF9D2E;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2px;
}

.pca-page .pca-card-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 28px;

    border:
        1px solid
        rgba(255, 138, 0, .45);

    color: #FF9D2E;

    background:
        rgba(255, 138, 0, .07);

    box-shadow:
        0 0 22px
        rgba(255, 138, 0, .08);
}

.pca-page .pca-card-icon i {
    display: block;
    line-height: 1;
}

@media (min-width: 1024px) {
    .pca-page .pca-card-icon {
        position: relative;
        top: -19px;
        left: -19px;
    }
}

@media (min-width: 992px) and (max-width: 1023px) {
    .pca-page .pca-card-icon {
        position: relative;
        top: -13px;
        left: -9px;
    }
}

.pca-page .pca-card-kicker {
    color: #FF9D2E;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2px;
}

.pca-page .pca-purpose-card h3 {
    margin:
        13px 0 18px;

    color: #F3F1EC;

    font-size:
        clamp(26px, 2.7vw, 37px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -.03em;
}

.pca-page .pca-purpose-card p {
    max-width: 500px;

    margin:
        0 0 14px;

    color: #C1CBCF;

    font-size: 16px;

    line-height: 1.75;
}

.pca-page .pca-card-line {
    width: 90px;
    height: 2px;

    margin-top: 30px;

    background:
        linear-gradient(
            90deg,
            #FF8A00,
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(255, 138, 0, .55);
}


/* =========================================================
   CENTER COLLISION
   ========================================================= */

.pca-page .pca-collision-core {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(.5);

    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255, 138, 0, .55);

    border-radius: 50%;

    opacity: 0;

    background:
        rgba(32, 42, 48, .94);

    box-shadow:
        0 0 35px
        rgba(255, 138, 0, .18);

    transition:
        opacity .7s ease,
        transform .8s ease;
}

.pca-page .pca-collision-core span {
    position: absolute;
    inset: -16px;

    border:
        1px solid
        rgba(255, 138, 0, .22);

    border-radius: 50%;

    animation:
        pcaPulse 2.4s
        ease-in-out
        infinite;
}

.pca-page .pca-collision-core i {
    color: #FF9D2E;

    font-style: normal;

    font-size: 22px;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 138, 0, .8)
        );
}


/* desktop collision positions */

.pca-page .pca-mission {
    transform:
        translateX(-110px);
}

.pca-page .pca-vision {
    transform:
        translateX(110px);
}

.pca-page .pca-purpose-stage.is-active .pca-mission {
    transform:
        translateX(0);
}

.pca-page .pca-purpose-stage.is-active .pca-vision {
    transform:
        translateX(0);
}

.pca-page .pca-purpose-stage.is-active .pca-collision-core {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================================
   SCROLL REVEALS
   ========================================================= */

.pca-page .pca-about-reveal {
    opacity: 0;

    transform:
        translateY(34px);

    transition:
        opacity .85s ease,
        transform .9s cubic-bezier(.2,.75,.2,1);
}

.pca-page .pca-from-left {
    transform:
        translateX(-90px);
}

.pca-page .pca-from-right {
    transform:
        translateX(90px);
}

.pca-page .pca-about-reveal.is-visible {
    opacity: 1;

    transform:
        translate(0);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes pcaHeroZoom {

    from {
        transform:
            scale(1.03);
    }

    to {
        transform:
            scale(1.10);
    }

}


@keyframes pcaOrbit {

    from {
        transform:
            rotate(0deg)
            translateX(8px)
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg)
            translateX(8px)
            rotate(-360deg);
    }

}


@keyframes pcaParticleFloat {

    0% {
        transform:
            translate3d(0, 25px, 0);

        opacity: 0;
    }

    15% {
        opacity: .35;
    }

    70% {
        opacity: .15;
    }

    100% {
        transform:
            translate3d(35px, -110px, 0);

        opacity: 0;
    }

}


@keyframes pcaPulse {

    0%,
    100% {
        transform:
            scale(.85);

        opacity: .2;
    }

    50% {
        transform:
            scale(1.12);

        opacity: .65;
    }

}


@keyframes pcaMobileMission {

    from {
        opacity: 0;

        transform:
            translateX(-70px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes pcaMobileVision {

    from {
        opacity: 0;

        transform:
            translateX(70px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =========================================================
   TABLET — 768px to 1023px
   ========================================================= */

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

    .pca-page .pca-container {
        width:
            calc(100% - 60px);
    }


    .pca-page .pca-overview-grid {
        grid-template-columns:
            minmax(0, .8fr)
            minmax(0, 1.2fr);

        gap: 40px;
    }


    .pca-page .pca-image-frame,
    .pca-page .pca-image-frame img {
        min-height: 500px;
    }


    .pca-page .pca-capabilities > div {
        grid-template-columns:
            40px 1fr;

        gap: 12px;
    }


    .pca-page .pca-capabilities small {
        grid-column: 2;
    }


    .pca-page .pca-purpose-stage {
        gap: 30px;
    }


    .pca-page .pca-purpose-card {
        padding:
            32px 28px;

        min-height: 410px;
    }


    .pca-page .pca-mission {
        transform:
            translateX(-65px);
    }


    .pca-page .pca-vision {
        transform:
            translateX(65px);
    }

}


/* =========================================================
   LAPTOP — 1024px to 1279px
   ========================================================= */

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

    .pca-page .pca-container {
        width:
            calc(100% - 70px);
    }


    .pca-page .pca-overview-grid {
        gap: 55px;
    }


    .pca-page .pca-image-frame,
    .pca-page .pca-image-frame img {
        min-height: 520px;
    }

}


/* =========================================================
   LAPTOP-L — 1280px to 1535px
   ========================================================= */

@media (min-width: 1280px) and (max-width: 1535px) {

    .pca-page .pca-container {
        width:
            min(
                1320px,
                calc(100% - 90px)
            );
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M — <=767px
   ========================================================= */

@media (max-width: 767px) {

    .pca-page .pca-container {
        width:
            calc(100% - 36px);
    }


    .pca-page .pca-hero {
        height: 65vh;

        min-height: 470px;
    }


    .pca-page .pca-hero-content h1 {
        font-size: 42px;
    }


    .pca-page .pca-hero-content p {
        font-size: 16px;
    }


    .pca-page .pca-overview {
        padding:
            78px 0;
    }


    .pca-page .pca-overview-line {
        display: none;
    }


    .pca-page .pca-overview-grid {
        grid-template-columns: 1fr;

        gap: 46px;
    }


    .pca-page .pca-image-frame,
    .pca-page .pca-image-frame img {
        height: 330px;

        min-height: 330px;
    }


    .pca-page .pca-overview-copy h2 {
        font-size: 36px;
    }


    .pca-page .pca-overview-copy > p {
        font-size: 16px;
    }


    .pca-page .pca-capabilities > div {
        grid-template-columns:
            36px 1fr;

        gap: 10px;
    }


    .pca-page .pca-capabilities small {
        grid-column: 2;

        font-size: 13px;
    }


    .pca-page .pca-purpose {
        padding:
            82px 0;
    }


    .pca-page .pca-purpose-heading {
        margin-bottom: 45px;
    }


    .pca-page .pca-purpose-heading h2 {
        font-size: 36px;
    }


    .pca-page .pca-purpose-heading p {
        font-size: 16px;
    }


    .pca-page .pca-purpose-stage {
        display: grid;

        grid-template-columns: 1fr;

        gap: 28px;

        min-height: auto;
    }


    .pca-page .pca-purpose-card {
        min-height: 0;

        padding:
            30px 25px;
    }


    .pca-page .pca-mission,
    .pca-page .pca-vision {
        transform: translateX(0);

        opacity: 0;
    }


    .pca-page .pca-purpose-stage.is-active .pca-mission {
        animation:
            pcaMobileMission
            .85s
            cubic-bezier(.2,.75,.2,1)
            forwards;
    }


    .pca-page .pca-purpose-stage.is-active .pca-vision {
        animation:
            pcaMobileVision
            .85s
            .18s
            cubic-bezier(.2,.75,.2,1)
            forwards;
    }


    .pca-page .pca-collision-core {
        position: absolute;

        top: 50%;

        width: 58px;
        height: 58px;
    }

}


/* =========================================================
   MOBILE-S — <=360px
   ========================================================= */

@media (max-width: 360px) {

    .pca-page .pca-container {
        width:
            calc(100% - 28px);
    }


    .pca-page .pca-hero {
        min-height: 440px;
    }


    .pca-page .pca-hero-content h1 {
        font-size: 36px;
    }


    .pca-page .pca-hero-content p {
        font-size: 15px;

        line-height: 1.6;
    }


    .pca-page .pca-hero-link {
        min-height: 48px;

        padding:
            0 15px;

        font-size: 12px;
    }


    .pca-page .pca-overview {
        padding:
            65px 0;
    }


    .pca-page .pca-image-frame,
    .pca-page .pca-image-frame img {
        height: 285px;

        min-height: 285px;
    }


    .pca-page .pca-image-frame::before {
        inset: 9px;
    }


    .pca-page .pca-image-tag {
        left: 16px;
        bottom: 16px;

        font-size: 10px;
    }


    .pca-page .pca-overview-copy h2 {
        font-size: 32px;
    }


    .pca-page .pca-overview-copy > p {
        font-size: 15px;

        line-height: 1.68;
    }


    .pca-page .pca-capabilities {
        margin-top: 22px;
    }


    .pca-page .pca-capabilities > div {
        grid-template-columns:
            31px
            minmax(0, 1fr);

        padding:
            15px 0;
    }


    .pca-page .pca-capabilities strong {
        font-size: 15px;
    }


    .pca-page .pca-capabilities small {
        font-size: 13px;

        line-height: 1.55;
    }


    .pca-page .pca-purpose {
        padding:
            68px 0;
    }


    .pca-page .pca-purpose-heading h2 {
        font-size: 32px;
    }


    .pca-page .pca-purpose-heading p {
        font-size: 15px;
    }


    .pca-page .pca-purpose-card {
        padding:
            26px 20px;
    }


    .pca-page .pca-purpose-card h3 {
        font-size: 26px;
    }


    .pca-page .pca-purpose-card p {
        font-size: 15px;

        line-height: 1.65;
    }


    .pca-page .pca-card-icon {
        width: 44px;
        height: 44px;
    }


    .pca-page .pca-card-number {
        right: 20px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pca-page *,
    .pca-page *::before,
    .pca-page *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }


    .pca-page .pca-about-reveal,
    .pca-page .pca-from-left,
    .pca-page .pca-from-right,
    .pca-page .pca-mission,
    .pca-page .pca-vision {

        opacity: 1 !important;

        transform: none !important;
    }


    .pca-page .pca-collision-core {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}

/* =========================================================
   ABOUT PAGE
   SECTION 3 — MISSION / VISION COLLISION ANIMATION
   ========================================================= */


/* ---------------------------------------------------------
   COLLISION STAGE
   --------------------------------------------------------- */

.pca-purpose .pca-purpose-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-height: 480px;
    isolation: isolate;
}


/* ---------------------------------------------------------
   FORCE BOTH CARDS TO EXACTLY THE SAME HEIGHT
   --------------------------------------------------------- */

.pca-purpose .pca-purpose-stage > .pca-purpose-card {
    height: 480px;
    min-height: 480px;
    max-height: 480px;
    box-sizing: border-box;

    position: relative;
    z-index: 2;

    overflow: hidden;

    transition:
        transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.7s ease,
        filter 0.8s ease,
        box-shadow 0.8s ease;
}

@media (min-width: 768px) and (max-width: 991px) {
    .pca-purpose .pca-purpose-stage > .pca-purpose-card {
        height: auto;
        max-height: none;
    }
}


/* ---------------------------------------------------------
   INITIAL MISSION POSITION
   MISSION ENTERS FROM LEFT
   --------------------------------------------------------- */

.pca-purpose .pca-purpose-card.pca-mission {
    transform: translate3d(-110%, 0, 0);
    opacity: 0;
    filter: blur(5px);
}


/* ---------------------------------------------------------
   INITIAL VISION POSITION
   VISION ENTERS FROM RIGHT
   --------------------------------------------------------- */

.pca-purpose .pca-purpose-card.pca-vision {
    transform: translate3d(110%, 0, 0);
    opacity: 0;
    filter: blur(5px);
}


/* ---------------------------------------------------------
   ANIMATION ACTIVE STATE
   --------------------------------------------------------- */

.pca-purpose
.pca-purpose-card.pca-mission.pca-purpose-collided {

    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: blur(0);

    box-shadow:
        20px 0 45px rgba(255, 138, 0, 0.08),
        0 0 30px rgba(255, 138, 0, 0.06);
}


.pca-purpose
.pca-purpose-card.pca-vision.pca-purpose-collided {

    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: blur(0);

    box-shadow:
        -20px 0 45px rgba(255, 138, 0, 0.08),
        0 0 30px rgba(255, 138, 0, 0.06);
}


/* ---------------------------------------------------------
   ORANGE CARD OUTLINE GLOW
   --------------------------------------------------------- */

.pca-purpose
.pca-purpose-card.pca-mission.pca-purpose-collided::before,

.pca-purpose
.pca-purpose-card.pca-vision.pca-purpose-collided::before {

    content: "";

    position: absolute;
    inset: 0;

    border: 1px solid rgba(255, 138, 0, 0.8);

    pointer-events: none;

    opacity: 1;

    box-shadow:
        inset 0 0 25px rgba(255, 138, 0, 0.035),
        0 0 25px rgba(255, 138, 0, 0.12);

    animation:
        pcaPurposeBorderGlow 2.8s ease-in-out infinite;
}


/* ---------------------------------------------------------
   BORDER GLOW ANIMATION
   --------------------------------------------------------- */

@keyframes pcaPurposeBorderGlow {

    0%,
    100% {
        box-shadow:
            inset 0 0 20px rgba(255, 138, 0, 0.025),
            0 0 15px rgba(255, 138, 0, 0.06);
    }

    50% {
        box-shadow:
            inset 0 0 35px rgba(255, 138, 0, 0.06),
            0 0 35px rgba(255, 138, 0, 0.18);
    }
}


/* ---------------------------------------------------------
   CENTER COLLISION CORE
   --------------------------------------------------------- */

.pca-purpose .pca-collision-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 72px;
    height: 72px;

    transform:
        translate(-50%, -50%)
        scale(0);

    opacity: 0;

    z-index: 10;

    pointer-events: none;

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

    transition:
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease;
}


/* ---------------------------------------------------------
   COLLISION OUTER RING
   --------------------------------------------------------- */

.pca-purpose .pca-collision-core span {

    position: absolute;

    inset: 0;

    border: 1px solid rgba(255, 138, 0, 0.65);

    border-radius: 50%;

    box-shadow:
        0 0 20px rgba(255, 138, 0, 0.3),
        0 0 45px rgba(255, 138, 0, 0.15);

    animation:
        pcaPurposeCollisionRing 2s ease-in-out infinite;
}


/* ---------------------------------------------------------
   COLLISION STAR
   --------------------------------------------------------- */

.pca-purpose .pca-collision-core i {

    position: relative;

    z-index: 2;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #ff8a00;

    font-size: 18px;
    font-style: normal;

    background: rgba(255, 138, 0, 0.08);

    box-shadow:
        0 0 20px rgba(255, 138, 0, 0.4),
        0 0 45px rgba(255, 138, 0, 0.18);
}


/* ---------------------------------------------------------
   ACTIVATE COLLISION CORE
   --------------------------------------------------------- */

.pca-purpose
.pca-purpose-stage.pca-purpose-collision-active
.pca-collision-core {

    transform:
        translate(-50%, -50%)
        scale(1);

    opacity: 1;
}


/* ---------------------------------------------------------
   COLLISION RING PULSE
   --------------------------------------------------------- */

@keyframes pcaPurposeCollisionRing {

    0%,
    100% {
        transform: scale(0.88);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.22);
        opacity: 0.2;
    }
}


/* ---------------------------------------------------------
   CENTER ORANGE ENERGY LINE
   --------------------------------------------------------- */

.pca-purpose
.pca-purpose-stage::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 2px;
    height: 0;

    transform: translate(-50%, -50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            #ff8a00,
            #ffb14a,
            #ff8a00,
            transparent
        );

    opacity: 0;

    z-index: 6;

    pointer-events: none;

    box-shadow:
        0 0 12px rgba(255, 138, 0, 0.65),
        0 0 28px rgba(255, 138, 0, 0.3);

    transition:
        height 0.8s ease 0.85s,
        opacity 0.4s ease 0.85s;
}


/* ---------------------------------------------------------
   SHOW CENTER ENERGY LINE
   --------------------------------------------------------- */

.pca-purpose
.pca-purpose-stage.pca-purpose-collision-active::before {

    height: 72%;
    opacity: 1;
}


/* ---------------------------------------------------------
   SMALL FLOATING ORANGE ENERGY GLOW
   --------------------------------------------------------- */

.pca-purpose
.pca-purpose-card.pca-purpose-collided
.pca-card-line {

    animation:
        pcaPurposeLineGlow 2.5s ease-in-out infinite;
}


@keyframes pcaPurposeLineGlow {

    0%,
    100% {
        filter:
            drop-shadow(
                0 0 2px rgba(255, 138, 0, 0.25)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 9px rgba(255, 138, 0, 0.65)
            );
    }
}


/* =========================================================
   MOBILE — DO NOT LET CARDS OVERFLOW
   ========================================================= */

@media (max-width: 767px) {

    .pca-purpose .pca-purpose-stage {

        grid-template-columns: 1fr;

        gap: 24px;

        min-height: auto;
    }


    .pca-purpose .pca-purpose-stage > .pca-purpose-card {

        height: auto;
        min-height: 0;
        max-height: none;

        width: 100%;

        box-sizing: border-box;
    }


    /* Mission starts slightly left */
    .pca-purpose
    .pca-purpose-card.pca-mission {

        transform:
            translate3d(-45%, 0, 0);

        opacity: 0;
    }


    /* Vision starts slightly right */
    .pca-purpose
    .pca-purpose-card.pca-vision {

        transform:
            translate3d(45%, 0, 0);

        opacity: 0;
    }


    .pca-purpose
    .pca-purpose-card.pca-mission.pca-purpose-collided,

    .pca-purpose
    .pca-purpose-card.pca-vision.pca-purpose-collided {

        transform:
            translate3d(0, 0, 0);

        opacity: 1;
    }


    /* Center collision graphics are hidden
       because cards are stacked on mobile. */

    .pca-purpose
    .pca-purpose-stage::before,

    .pca-purpose
    .pca-collision-core {

        display: none;
    }
}


/* =========================================================
   MOBILE-S — 320px
   ========================================================= */

@media (max-width: 360px) {

    .pca-purpose .pca-purpose-stage {

        width: 100%;
        gap: 20px;
    }


    .pca-purpose
    .pca-purpose-stage > .pca-purpose-card {

        width: 100%;
        min-width: 0;

        padding-left: 20px;
        padding-right: 20px;
    }


    .pca-purpose
    .pca-purpose-card.pca-mission,

    .pca-purpose
    .pca-purpose-card.pca-vision {

        transform:
            translate3d(0, 28px, 0);
    }


    .pca-purpose
    .pca-purpose-card.pca-mission.pca-purpose-collided,

    .pca-purpose
    .pca-purpose-card.pca-vision.pca-purpose-collided {

        transform:
            translate3d(0, 0, 0);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pca-purpose
    .pca-purpose-stage > .pca-purpose-card {

        transform: none !important;
        opacity: 1 !important;
        filter: none !important;

        transition: none !important;
    }


    .pca-purpose
    .pca-collision-core,

    .pca-purpose
    .pca-purpose-stage::before {

        display: none !important;
    }


    .pca-purpose
    .pca-purpose-card::before,

    .pca-purpose
    .pca-purpose-card .pca-card-line {

        animation: none !important;
    }
}

/* =========================================================
   POWERCORE ABOUT
   SECTION 4 — MEET OUR TEAM
   ========================================================= */

.pca-team {
    position: relative;
    overflow: hidden;
    padding: clamp(90px, 9vw, 150px) 0;
    background: var(--bg-primary, #f7f5f1);
    color: var(--text-primary, #202a30);
}


/* ---------------------------------------------------------
   BACKGROUND GRID
   --------------------------------------------------------- */

.pca-team-grid,
.pca-process-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;

    background-image:
        linear-gradient(
            rgba(32, 42, 48, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 42, 48, .045) 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}


.pca-team-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 138, 0, .08);
    filter: blur(75px);
    pointer-events: none;
}


.pca-team-glow-one {
    top: 12%;
    left: -100px;
}


.pca-team-glow-two {
    right: -100px;
    bottom: 8%;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.pca-team-heading,
.pca-process-heading {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin-bottom: clamp(45px, 6vw, 80px);
}


.pca-team-heading-line,
.pca-process-heading-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}


.pca-team-heading h2,
.pca-process-heading h2 {
    margin: 0 0 20px;
    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 800;
}


.pca-team-heading h2 em,
.pca-process-heading h2 em {
    color: #ff8a00;
    font-style: normal;
}


.pca-team-heading p,
.pca-process-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--text-secondary, #596a73);
    font-size: 18px;
    line-height: 1.75;
}


.pca-team-heading-index,
.pca-process-index {
    flex-shrink: 0;
    color: #ff8a00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
}


/* =========================================================
   TEAM GRID
   ========================================================= */

.pca-team-grid-wrap {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: clamp(14px, 1.6vw, 26px);
}


/* ---------------------------------------------------------
   TEAM CARD
   --------------------------------------------------------- */

.pca-team-card {
    position: relative;

    height: clamp(430px, 34vw, 520px);

    min-width: 0;

    perspective: 1200px;

    outline: none;

    opacity: 0;
    transform: translateY(70px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}


.pca-team-card.pca-team-visible {
    opacity: 1;
    transform: translateY(0);
}


/* stagger */

.pca-team-card:nth-child(1) {
    transition-delay: .05s;
}

.pca-team-card:nth-child(2) {
    transition-delay: .16s;
}

.pca-team-card:nth-child(3) {
    transition-delay: .27s;
}

.pca-team-card:nth-child(4) {
    transition-delay: .38s;
}


/* ---------------------------------------------------------
   FLIP INNER
   --------------------------------------------------------- */

.pca-team-card-inner {
    position: relative;
    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1);
}


.pca-team-card:hover .pca-team-card-inner {
    transform: rotateY(180deg);
}

/* ---------------------------------------------------------
   BOTH FACES
   --------------------------------------------------------- */

.pca-team-face {
    position: absolute;
    inset: 0;

    overflow: hidden;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    border: 1px solid rgba(255, 138, 0, .55);

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   FRONT
   --------------------------------------------------------- */

.pca-team-front {
    background: #202a30;
    color: #f7f5f1;
}


.pca-team-image {
    position: absolute;
    inset: 0;
}


.pca-team-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1.1s ease,
        filter 1.1s ease;
}


.pca-team-card:hover .pca-team-image img,
.pca-team-card:focus-within .pca-team-image img,
.pca-team-card.pca-team-flipped .pca-team-image img {
    transform: scale(1.05);
    filter: brightness(.7);
}


.pca-team-front-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7, 9, 10, .96) 0%,
            rgba(7, 9, 10, .35) 48%,
            rgba(7, 9, 10, .05) 100%
        );
}


/* ---------------------------------------------------------
   NUMBER
   --------------------------------------------------------- */

.pca-team-number {
    position: absolute;

    top: 24px;
    right: 24px;

    color: #ff8a00;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .15em;
}


/* ---------------------------------------------------------
   FRONT CONTENT
   --------------------------------------------------------- */

.pca-team-front-content {
    position: absolute;

    left: 26px;
    right: 26px;
    bottom: 27px;
}


.pca-team-role-label {
    display: block;

    margin-bottom: 10px;

    color: #ff9d2e;

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

    letter-spacing: .14em;
}


.pca-team-front h3,
.pca-team-back h3 {
    margin: 0;

    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.1;

    font-weight: 800;
}


.pca-team-front-line {
    display: block;

    width: 55px;
    height: 2px;

    margin-top: 17px;

    background: #ff8a00;

    box-shadow:
        0 0 12px rgba(255, 138, 0, .75);
}


/* ---------------------------------------------------------
   BACK
   --------------------------------------------------------- */

.pca-team-back {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: clamp(28px, 2.5vw, 40px);

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(255, 138, 0, .13),
            transparent 32%
        ),
        #202a30;

    color: #f3f1ec;

    transform: rotateY(180deg);
}


.pca-team-back .pca-team-number {
    top: 25px;
    right: 25px;
}


.pca-team-back h3 {
    margin-bottom: 20px;
}


.pca-team-back p {
    margin: 0 0 25px;

    color: #b9c2c6;

    font-size: 15px;
    line-height: 1.75;
}


.pca-team-job {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding-top: 18px;

    border-top: 1px solid rgba(255, 138, 0, .35);
}


.pca-team-job span {
    color: #ff9d2e;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
}


.pca-team-job strong {
    font-size: 14px;
    line-height: 1.4;
}


.pca-team-back-line {
    width: 65px;
    height: 2px;

    margin-top: 24px;

    background: #ff8a00;

    box-shadow:
        0 0 15px rgba(255, 138, 0, .7);
}


/* ---------------------------------------------------------
   GLOWING OUTLINE
   --------------------------------------------------------- */

.pca-team-card::before {
    content: "";

    position: absolute;
    inset: -1px;

    border: 1px solid rgba(255, 138, 0, .7);

    pointer-events: none;

    z-index: 10;

    opacity: .55;

    transition:
        opacity .5s ease,
        box-shadow .5s ease;
}


.pca-team-card:hover::before,
.pca-team-card:focus-within::before,
.pca-team-card.pca-team-flipped::before {
    opacity: 1;

    box-shadow:
        0 0 18px rgba(255, 138, 0, .3),
        0 0 45px rgba(255, 138, 0, .12);
}


/* ---------------------------------------------------------
   TEAM HINT
   --------------------------------------------------------- */

.pca-team-hint {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 25px;

    color: var(--text-secondary, #596a73);

    font-size: 13px;
}


.pca-team-hint-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ff8a00;

    box-shadow:
        0 0 10px rgba(255, 138, 0, .7);

    animation:
        pcaTeamHintPulse 2s ease-in-out infinite;
}


@keyframes pcaTeamHintPulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


/* =========================================================
   SECTION 5 — PROCESS
   ========================================================= */

.pca-process {
    position: relative;
    overflow: hidden;

    padding:
        clamp(95px, 9vw, 155px)
        0
        clamp(90px, 8vw, 130px);

    background: #202a30;
    color: #f3f1ec;
}


/* ---------------------------------------------------------
   PROCESS GRID
   --------------------------------------------------------- */

.pca-process-grid {
    opacity: .16;

    background-image:
        linear-gradient(
            rgba(243, 241, 236, .07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 241, 236, .07) 1px,
            transparent 1px
        );
}


/* ---------------------------------------------------------
   PROCESS GLOW
   --------------------------------------------------------- */

.pca-process-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(255, 138, 0, .06);

    filter: blur(90px);

    pointer-events: none;
}


/* ---------------------------------------------------------
   PROCESS HEADING
   --------------------------------------------------------- */

.pca-process-heading {
    position: relative;
    z-index: 3;
}


.pca-process-heading p {
    color: #aeb9be;
}


/* ---------------------------------------------------------
   PIPELINE
   --------------------------------------------------------- */

.pca-process-pipeline {
    position: relative;

    width: 100%;

    height: 520px;

    margin-top: 20px;
}


/* ---------------------------------------------------------
   SVG
   --------------------------------------------------------- */

.pca-process-wave {
    position: absolute;

    inset: 30px 0 auto;

    width: 100%;
    height: 420px;

    overflow: visible;

    pointer-events: none;
}


.pca-process-wave path {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.pca-process-wave-base {
    stroke: rgba(255, 138, 0, .16);
    stroke-width: 2;
}


.pca-process-wave-progress {
    stroke: #ff8a00;
    stroke-width: 3;

    filter:
        drop-shadow(
            0 0 7px rgba(255, 138, 0, .75)
        );

    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;

    transition:
        stroke-dashoffset 2.8s
        cubic-bezier(.22, 1, .36, 1);
}


.pca-process-pipeline.pca-process-active
.pca-process-wave-progress {
    stroke-dashoffset: 0;
}


/* ---------------------------------------------------------
   PROCESS NODE
   --------------------------------------------------------- */

.pca-process-node {
    position: absolute;

    width: 220px;

    opacity: 0;

    transform:
        translateY(40px)
        scale(.95);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1);
}


.pca-process-node.pca-process-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* node positions */

.pca-process-node-one {
    left: 0;
    top: 260px;      /* was 130px — matches node-three's clearance under crest 1 */
}

.pca-process-node-two {
    left: 32%;
    top: -50px;      /* was 0px — tucks it above the dip toward the first trough */
}



.pca-process-node-three {
    left: 58%;
    top: 260px;
}


.pca-process-node-four {
    right: 0;
    top: 10px;       /* was 130px — sits above the second trough, matching node-two's logic */
}

/* ---------------------------------------------------------
   NODE CORE
   --------------------------------------------------------- */

.pca-process-node-core {
    position: relative;

    width: 68px;
    height: 68px;

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

    margin-bottom: 22px;

    border: 1px solid rgba(255, 138, 0, .8);

    border-radius: 50%;

    background: #202a30;

    color: #ff8a00;

    box-shadow:
        0 0 0 8px rgba(255, 138, 0, .035),
        0 0 25px rgba(255, 138, 0, .12);

    transition:
        box-shadow .5s ease,
        background .5s ease;
}


.pca-process-node.pca-process-visible
.pca-process-node-core {
    animation:
        pcaProcessNodeGlow 2.5s ease-in-out infinite;
}


@keyframes pcaProcessNodeGlow {

    0%,
    100% {
        box-shadow:
            0 0 0 8px rgba(255, 138, 0, .035),
            0 0 20px rgba(255, 138, 0, .15);
    }

    50% {
        box-shadow:
            0 0 0 13px rgba(255, 138, 0, .025),
            0 0 40px rgba(255, 138, 0, .4);
    }
}


.pca-process-node-core span {
    font-size: 14px;
    font-weight: 800;
}


/* ---------------------------------------------------------
   NODE CONTENT
   --------------------------------------------------------- */

.pca-process-node-content {
    max-width: 220px;
}


.pca-process-kicker {
    display: block;

    margin-bottom: 8px;

    color: #ff9d2e;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
}


.pca-process-node h3 {
    margin: 0 0 12px;

    color: #f3f1ec;

    font-size: 24px;
    line-height: 1.15;

    font-weight: 800;
}


.pca-process-node p {
    margin: 0;

    color: #aeb9be;

    font-size: 15px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   PROCESS FOOTER
   --------------------------------------------------------- */

.pca-process-footer {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 15px;
}


.pca-process-footer-line {
    width: 80px;
    height: 2px;

    flex-shrink: 0;

    background: #ff8a00;

    box-shadow:
        0 0 12px rgba(255, 138, 0, .65);
}


.pca-process-footer p {
    margin: 0;

    color: #d2d8da;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: .04em;
}


/* =========================================================
   TABLET — 768px TO 1023px
   ========================================================= */

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

    .pca-team {
        padding: 90px 0;
    }


    .pca-team-grid-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }


    .pca-team-card {
        height: 460px;
    }


    .pca-process-pipeline {
        height: 820px;
    }


    .pca-process-wave {
        left: 50%;
        width: 4px;
        height: 620px;

        transform: translateX(-50%);
    }


    .pca-process-wave-base,
.pca-process-wave-progress {
    opacity: 0;
}

.pca-process-pipeline::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 138, 0, .8),
        rgba(255, 138, 0, .3),
        #ff8a00,
        transparent
    );
    box-shadow: 0 0 12px rgba(255, 138, 0, .35);
}
    .pca-process-node {
        width: 42%;
    }


    .pca-process-node-one {
        left: 0;
        top: 30px;
    }


    .pca-process-node-two {
        right: 0;
        left: auto;
        top: 190px;
    }


    .pca-process-node-three {
        left: 0;
        top: 370px;
    }


    .pca-process-node-four {
        right: 0;
        top: 550px;
    }

}


/* =========================================================
   MOBILE-L / MOBILE-M / MOBILE-S
   ========================================================= */

@media (max-width: 767px) {

    .pca-team,
    .pca-process {
        padding-left: 0;
        padding-right: 0;
    }


    .pca-team-heading-line,
    .pca-process-heading-line {
        align-items: flex-start;
    }


    .pca-team-heading h2,
    .pca-process-heading h2 {
        font-size: clamp(34px, 9vw, 44px);
    }


    .pca-team-heading p,
    .pca-process-heading p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* TEAM */

    .pca-team-grid-wrap {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .pca-team-card {
        width: 100%;
        height: 470px;
    }


    /* PROCESS */

    .pca-process-pipeline {
        height: auto;

        margin-top: 45px;

        padding-left: 50px;
    }


    .pca-process-wave {
        position: absolute;

        top: 0;
        left: 18px;

        width: 45px;
        height: 100%;

        overflow: visible;

        transform: none;
    }


    .pca-process-wave-base,
    .pca-process-wave-progress {
        display: none;
    }


    /* vertical energy line */

    .pca-process-pipeline::before {
        content: "";

        position: absolute;

        top: 34px;
        bottom: 34px;
        left: 22px;

        width: 2px;

        background:
            linear-gradient(
                to bottom,
                transparent,
                rgba(255, 138, 0, .8),
                rgba(255, 138, 0, .3),
                #ff8a00,
                transparent
            );

        box-shadow:
            0 0 12px rgba(255, 138, 0, .35);
    }


    .pca-process-node {
        position: relative;

        inset: auto !important;

        width: 100%;

        min-height: 150px;

        margin-bottom: 45px;

        opacity: 0;

        transform:
            translateX(45px);
    }


    .pca-process-node:last-child {
        margin-bottom: 0;
    }


    .pca-process-node.pca-process-visible {
        transform:
            translateX(0);
    }


    .pca-process-node-core {
        position: absolute;

        left: -50px;
        top: 0;

        width: 46px;
        height: 46px;

        margin: 0;

        background: #202a30;
    }


    .pca-process-node-content {
        max-width: none;
    }


    .pca-process-node h3 {
        font-size: 22px;
    }


    .pca-process-node p {
        font-size: 15px;
    }


    .pca-process-footer {
        margin-top: 40px;
    }

}


/* =========================================================
   MOBILE-S — 320px
   ========================================================= */

@media (max-width: 360px) {

    .pca-team {
        padding-top: 75px;
        padding-bottom: 80px;
    }


    .pca-process {
        padding-top: 75px;
        padding-bottom: 80px;
    }


    .pca-team-heading-line,
    .pca-process-heading-line {
        gap: 10px;
    }


    .pca-team-heading-index,
    .pca-process-index {
        font-size: 10px;
        letter-spacing: .08em;
    }


    .pca-team-heading h2,
    .pca-process-heading h2 {
        font-size: 32px;
        line-height: 1.08;
    }


    .pca-team-heading p,
    .pca-process-heading p {
        font-size: 15px;
    }


    .pca-team-card {
        height: 430px;
    }


    .pca-team-front-content {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }


    .pca-team-number {
        top: 20px;
        right: 20px;
    }


    .pca-team-back {
        padding: 22px;
    }


    .pca-team-back h3 {
        font-size: 22px;
    }


    .pca-team-back p {
        font-size: 14px;
        line-height: 1.65;
    }


    .pca-process-pipeline {
        padding-left: 44px;
    }


    .pca-process-pipeline::before {
        left: 17px;
    }


    .pca-process-node-core {
        left: -43px;

        width: 40px;
        height: 40px;

        font-size: 12px;
    }


    .pca-process-node h3 {
        font-size: 21px;
    }


    .pca-process-node p {
        font-size: 14px;
        line-height: 1.65;
    }


    .pca-process-footer {
        align-items: flex-start;
    }


    .pca-process-footer-line {
        width: 45px;
        margin-top: 8px;
    }


    .pca-process-footer p {
        font-size: 13px;
        line-height: 1.6;
    }

}


/* =========================================================
   LAPTOP — 1024px TO 1279px
   ========================================================= */

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

    .pca-team-grid-wrap {
        gap: 14px;
    }


    .pca-team-card {
        height: 450px;
    }


    .pca-team-front-content {
        left: 20px;
        right: 20px;
    }


    .pca-process-node {
        width: 190px;
    }


    .pca-process-node p {
        font-size: 14px;
    }

}


/* =========================================================
   LAPTOP-L — 1280px TO 1535px
   ========================================================= */

@media (min-width: 1280px) and (max-width: 1535px) {

    .pca-team-card {
        height: 500px;
    }

}


/* =========================================================
   DESKTOP — 1536px+
   ========================================================= */

@media (min-width: 1536px) {

    .pca-team-card {
        height: 540px;
    }


    .pca-process-pipeline {
        height: 550px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pca-team-card,
    .pca-process-node,
    .pca-team-card-inner,
    .pca-process-wave-progress {
        transition: none !important;
        animation: none !important;
    }


    .pca-team-card {
        opacity: 1 !important;
        transform: none !important;
    }


    .pca-process-node {
        opacity: 1 !important;
        transform: none !important;
    }


    .pca-process-wave-progress {
        stroke-dashoffset: 0 !important;
    }

}

/* =========================================================
   POWERCORE ABOUT — SECTIONS 6–9
   ========================================================= */


/* =========================================================
   SHARED REVEAL
   ========================================================= */

.pca6-reveal,
.pca7-reveal,
.pca8-reveal,
.pca9-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .85s ease,
        transform .9s cubic-bezier(.22,1,.36,1);
}

.pca6-reveal.pca-visible,
.pca7-reveal.pca-visible,
.pca8-reveal.pca-visible,
.pca9-reveal.pca-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   SECTION 6 — WHY POWERCORE
   ========================================================= */

.pca6-why {
    position: relative;
    overflow: hidden;
    padding: 115px 5vw;
    background: #F7F5F1;
    color: #202A30;
}

.pca6-grid-bg {
    position: absolute;
    inset: 0;
    opacity: .32;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(32,42,48,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32,42,48,.06) 1px,
            transparent 1px
        );
    background-size: 65px 65px;
}

.pca6-container {
    position: relative;
    width: min(1450px,100%);
    margin: auto;
}

.pca6-intro {
    max-width: 900px;
    margin-bottom: 70px;
}

.pca6-kicker,
.pca7-kicker,
.pca8-kicker,
.pca9-kicker {
    display: inline-block;
    color: #FF8A00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.pca6-intro h2 {
    margin: 16px 0 20px;
    font-size: clamp(42px,5vw,70px);
    line-height: .96;
    letter-spacing: -.05em;
    font-weight: 800;
}

.pca6-intro h2 span {
    color: #FF8A00;
}

.pca6-intro p {
    max-width: 760px;
    margin: 0;
    color: #596A73;
    font-size: 18px;
    line-height: 1.75;
}

.pca6-main {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: stretch;
}

.pca6-visual {
    min-width: 0;
}

.pca6-image-wrap {
    position: relative;
    height: 100%;
    min-height: 570px;
    overflow: hidden;
    background: #202A30;
    border-left: 4px solid #FF8A00;
    box-shadow:
        0 20px 60px rgba(32,42,48,.16);
}

.pca6-image-wrap img {
    width: 100%;
    height: 100%;
    min-height: 570px;
    display: block;
    object-fit: cover;
    filter: saturate(.82) contrast(1.08);
    transition:
        transform 1.1s cubic-bezier(.22,1,.36,1);
}

.pca6-image-wrap:hover img {
    transform: scale(1.055);
}

.pca6-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(15,19,21,.88)
        );
    z-index: 1;
}

.pca6-image-frame {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,138,0,.55);
    z-index: 2;
    pointer-events: none;
}

.pca6-image-caption {
    position: absolute;
    left: 35px;
    bottom: 32px;
    z-index: 3;
    color: #F7F5F1;
}

.pca6-image-caption strong {
    display: block;
    font-size: 20px;
    letter-spacing: .08em;
}

.pca6-image-caption span {
    display: block;
    margin-top: 6px;
    color: #FF9D2E;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.pca6-image-orbit {
    position: absolute;
    width: 170px;
    height: 170px;
    right: -75px;
    top: 50px;
    border: 1px solid rgba(255,138,0,.7);
    border-radius: 50%;
    box-shadow:
        0 0 35px rgba(255,138,0,.25);
    animation: pca6Orbit 6s linear infinite;
    z-index: 2;
}

@keyframes pca6Orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.pca6-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pca6-item {
    position: relative;
    display: grid;
    grid-template-columns: 65px 1fr 30px;
    gap: 25px;
    align-items: start;
    padding: 38px 0;
    border-top: 1px solid rgba(32,42,48,.18);
    transition:
        padding-left .4s ease,
        background .4s ease;
}

.pca6-item:last-child {
    border-bottom: 1px solid rgba(32,42,48,.18);
}

.pca6-item:hover {
    padding-left: 14px;
}

.pca6-number {
    color: #FF8A00;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .1em;
}

.pca6-item-body h3 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
}

.pca6-item-body p {
    max-width: 650px;
    margin: 0;
    color: #596A73;
    font-size: 16px;
    line-height: 1.75;
}

.pca6-item-arrow {
    color: #FF8A00;
    font-size: 22px;
    transition: transform .35s ease;
}

.pca6-item:hover .pca6-item-arrow {
    transform: translate(5px,-5px);
}


/* =========================================================
   SECTION 7 — STATS
   ========================================================= */

.pca7-stats {
    position: relative;
    overflow: hidden;
    padding: 120px 5vw 70px;
    background: #202A30;
    color: #F7F5F1;
}

.pca7-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255,255,255,.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.1) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
}

.pca7-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20%;
    width: 25%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,138,0,.18),
        transparent
    );
    transform: skewX(-15deg);
    animation: pca7Scan 5s linear infinite;
}

@keyframes pca7Scan {
    from {
        left: -25%;
    }

    to {
        left: 110%;
    }
}

.pca7-container {
    position: relative;
    width: min(1500px,100%);
    margin: auto;
}

.pca7-heading {
    max-width: 850px;
    margin: 0 auto 75px;
    text-align: center;
}

.pca7-heading h2 {
    margin: 15px 0 18px;
    font-size: clamp(42px,5vw,68px);
    line-height: .96;
    letter-spacing: -.05em;
    font-weight: 800;
}

.pca7-heading h2 span {
    color: #FF9D2E;
    text-shadow:
        0 0 18px rgba(255,138,0,.35);
}

.pca7-heading p {
    max-width: 720px;
    margin: auto;
    color: #C5CED2;
    font-size: 18px;
    line-height: 1.75;
}

.pca7-glow {
    position: absolute;
    border-radius: 50%;
    background: #FF8A00;
    filter: blur(110px);
    pointer-events: none;
}

.pca7-glow-left {
    width: 300px;
    height: 300px;
    left: -170px;
    top: 170px;
    opacity: .16;
    animation: pca7GlowLeft 6s ease-in-out infinite;
}

.pca7-glow-right {
    width: 260px;
    height: 260px;
    right: -140px;
    bottom: 80px;
    opacity: .14;
    animation: pca7GlowRight 7s ease-in-out infinite;
}

@keyframes pca7GlowLeft {
    50% {
        transform: translate(120px,40px) scale(1.25);
    }
}

@keyframes pca7GlowRight {
    50% {
        transform: translate(-100px,-60px) scale(1.3);
    }
}

.pca7-stat-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.pca7-stat {
    position: relative;
    min-height: 390px;
    padding: 34px 30px;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.14);
    transition:
        background .4s ease,
        transform .4s ease;
}

.pca7-stat:last-child {
    border-right: 0;
}

.pca7-stat:hover {
    background: rgba(255,138,0,.045);
    transform: translateY(-8px);
}

.pca7-stat::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: #FF8A00;
    filter: blur(60px);
    opacity: 0;
    transition: opacity .4s ease;
}

.pca7-stat:hover::after {
    opacity: .35;
}

.pca7-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pca7-stat-top span {
    color: #FF8A00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .15em;
}

.pca7-stat-top i {
    color: rgba(255,255,255,.35);
    font-style: normal;
}

.pca7-number-wrap {
    display: flex;
    align-items: flex-start;
    margin-top: 52px;
    color: #FF9D2E;
    text-shadow:
        0 0 12px rgba(255,138,0,.8),
        0 0 35px rgba(255,138,0,.3);
}

.pca7-number {
    font-size: clamp(58px,6vw,94px);
    line-height: .8;
    font-weight: 800;
    letter-spacing: -.07em;
}

.pca7-number-wrap strong {
    margin-top: 2px;
    font-size: 28px;
    font-weight: 800;
}

.pca7-stat h3 {
    margin: 35px 0 10px;
    font-size: 21px;
    font-weight: 800;
}

.pca7-stat p {
    max-width: 260px;
    margin: 0;
    color: #AEB9BE;
    font-size: 15px;
    line-height: 1.7;
}

.pca7-progress {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 26px;
    height: 2px;
    background: rgba(255,255,255,.12);
}

.pca7-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #FF8A00;
    box-shadow: 0 0 14px rgba(255,138,0,.9);
    transition:
        width 1.7s cubic-bezier(.22,1,.36,1);
}

.pca7-stat.pca7-active .pca7-progress span {
    width: 100%;
}

.pca7-bottom {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 42px;
    color: #8F9DA2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.pca7-bottom i {
    width: 28px;
    height: 1px;
    background: #FF8A00;
    box-shadow: 0 0 9px rgba(255,138,0,.7);
}

.pca7-bottom-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.15);
}

.pca7-bottom-line span {
    display: block;
    width: 32%;
    height: 100%;
    background: #FF8A00;
    box-shadow: 0 0 10px rgba(255,138,0,.8);
}


/* =========================================================
   SECTION 8 — COMMITMENT
   ========================================================= */

.pca8-commitment {
    position: relative;
    overflow: hidden;
    padding: 125px 5vw;
    background: #F7F5F1;
    color: #202A30;
}

.pca8-pattern {
    position: absolute;
    inset: 0;
    opacity: .2;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 25px,
            rgba(32,42,48,.06) 26px,
            transparent 27px
        );
}

.pca8-container {
    position: relative;
    z-index: 1;
    width: min(1400px,100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.pca8-copy h2 {
    margin: 16px 0 25px;
    font-size: clamp(42px,5vw,70px);
    line-height: .96;
    letter-spacing: -.05em;
    font-weight: 800;
}

.pca8-copy h2 span {
    color: #FF8A00;
}

.pca8-copy > p {
    max-width: 650px;
    margin: 0;
    color: #596A73;
    font-size: 18px;
    line-height: 1.8;
}

.pca8-points {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
    margin-top: 45px;
}

.pca8-points div {
    padding-top: 17px;
    border-top: 2px solid #FF8A00;
}

.pca8-points span {
    display: block;
    margin-bottom: 9px;
    color: #FF8A00;
    font-size: 12px;
    font-weight: 800;
}

.pca8-points strong {
    display: block;
    font-size: 15px;
    line-height: 1.4;
}

.pca8-image-wrap {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    background: #202A30;
    border-bottom: 4px solid #FF8A00;
    box-shadow:
        0 25px 65px rgba(32,42,48,.18);
}

.pca8-image-wrap img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    display: block;
    object-fit: cover;
    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}

.pca8-image-wrap:hover img {
    transform: scale(1.055);
}

.pca8-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(15,19,21,.9)
        );
}

.pca8-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 2;
    border-color: #FF8A00;
    border-style: solid;
}

.pca8-corner-one {
    left: 20px;
    top: 20px;
    border-width: 2px 0 0 2px;
}

.pca8-corner-two {
    right: 20px;
    bottom: 20px;
    border-width: 0 2px 2px 0;
}

.pca8-image-label {
    position: absolute;
    left: 35px;
    bottom: 32px;
    z-index: 2;
    color: #F7F5F1;
}

.pca8-image-label strong {
    display: block;
    font-size: 19px;
    letter-spacing: .08em;
}

.pca8-image-label span {
    display: block;
    margin-top: 5px;
    color: #FF9D2E;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.pca8-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -10%;
    height: 2px;
    z-index: 3;
    background: #FF8A00;
    box-shadow:
        0 0 12px #FF8A00,
        0 0 28px rgba(255,138,0,.65);
    animation: pca8Scan 4.5s linear infinite;
}

@keyframes pca8Scan {
    from {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    to {
        transform: translateY(650px);
        opacity: 0;
    }
}


/* =========================================================
   SECTION 9 — FINAL CTA
   ========================================================= */

.pca9-cta {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 5vw;
    background: #202A30;
    color: #F7F5F1;
    text-align: center;
}

.pca9-pattern {
    position: absolute;
    inset: 0;
    opacity: .34;
    pointer-events: none;
    background-image:
        linear-gradient(
            30deg,
            rgba(255,138,0,.12) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255,138,0,.12) 87.5%
        ),
        linear-gradient(
            150deg,
            rgba(255,138,0,.12) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255,138,0,.12) 87.5%
        );
    background-size: 70px 120px;
    animation: pca9Pattern 18s linear infinite;
}

@keyframes pca9Pattern {
    from {
        background-position: 0 0,0 0;
    }

    to {
        background-position: 140px 240px,-140px -240px;
    }
}

.pca9-grid-lines {
    position: absolute;
    inset: 0;
    opacity: .13;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 49.9%,
            rgba(255,138,0,.5) 50%,
            transparent 50.1%
        ),
        linear-gradient(
            transparent 49.9%,
            rgba(255,138,0,.5) 50%,
            transparent 50.1%
        );
    background-size: 100px 100px;
}

.pca9-content {
    position: relative;
    z-index: 2;
    width: min(900px,100%);
    margin: auto;
}

.pca9-power-mark {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 27px;
    border: 1px solid #FF8A00;
    color: #FF9D2E;
    font-size: 27px;
    box-shadow:
        0 0 22px rgba(255,138,0,.35),
        inset 0 0 20px rgba(255,138,0,.08);
    animation: pca9PowerMark 2.5s ease-in-out infinite;
}

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

    50% {
        transform: translateY(-8px) rotate(5deg);
        box-shadow:
            0 0 38px rgba(255,138,0,.7),
            inset 0 0 25px rgba(255,138,0,.12);
    }
}

.pca9-content h2 {
    margin: 16px 0 23px;
    font-size: clamp(42px,5.5vw,78px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 800;
}

.pca9-content h2 span {
    display: block;
    color: #FF9D2E;
    text-shadow:
        0 0 25px rgba(255,138,0,.35);
}

.pca9-content > p {
    max-width: 680px;
    margin: auto;
    color: #C7D0D3;
    font-size: 18px;
    line-height: 1.75;
}

.pca9-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 42px;
}

.pca9-btn {
    min-width: 210px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 25px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.pca9-btn span {
    font-size: 20px;
    transition: transform .3s ease;
}

.pca9-btn:hover span {
    transform: translateX(5px);
}

.pca9-btn-primary {
    background: #FF8A00;
    color: #202A30;
    box-shadow:
        0 0 25px rgba(255,138,0,.25);
}

.pca9-btn-primary:hover {
    background: #E87500;
    transform: translateY(-4px);
    box-shadow:
        0 0 42px rgba(255,138,0,.5);
}

.pca9-btn-secondary {
    border: 1px solid var(--pca-orange, #FF8A00);
    color: #202A30;
    background: var(--pca-orange, #FF8A00);
    box-shadow: 0 0 25px rgba(255,138,0,.25);
}

.pca9-btn-secondary:hover {
    border-color: #FFB14A;
    background: #FFB14A;
    color: #202A30;
    transform: translateY(-4px);
    box-shadow:
        0 0 42px rgba(255,138,0,.5);
}

.pca9-footer-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin-top: 62px;
    color: #8E9CA1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.pca9-footer-line i {
    width: 42px;
    height: 1px;
    background: #FF8A00;
    box-shadow:
        0 0 8px rgba(255,138,0,.8);
}


/* =========================================================
   TABLET — 768–1023
   ========================================================= */

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

    .pca6-why,
    .pca8-commitment {
        padding: 90px 5vw;
    }

    .pca6-main,
    .pca8-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .pca6-image-wrap,
    .pca6-image-wrap img,
    .pca8-image-wrap,
    .pca8-image-wrap img {
        min-height: 440px;
    }

    .pca7-stats {
        padding: 90px 5vw 60px;
    }

    .pca7-stat-row {
        grid-template-columns: repeat(2,1fr);
    }

    .pca7-stat:nth-child(2) {
        border-right: 0;
    }

    .pca7-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .pca8-points {
        max-width: 700px;
    }

    .pca9-cta {
        min-height: 580px;
    }

}


/* =========================================================
   LAPTOP — 1024–1279
   ========================================================= */

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

    .pca6-why,
    .pca7-stats,
    .pca8-commitment,
    .pca9-cta {
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .pca6-main {
        gap: 45px;
    }

    .pca6-image-wrap,
    .pca6-image-wrap img {
        min-height: 500px;
    }

    .pca7-stat {
        padding-left: 22px;
        padding-right: 22px;
    }

    .pca7-number {
        font-size: 65px;
    }

    .pca8-container {
        gap: 55px;
    }

}


/* =========================================================
   LAPTOP-L — 1280–1535
   ========================================================= */

@media (min-width:1280px) and (max-width:1535px) {

    .pca6-why,
    .pca7-stats,
    .pca8-commitment,
    .pca9-cta {
        padding-left: 4.5vw;
        padding-right: 4.5vw;
    }

}


/* =========================================================
   MOBILE-L — 391–767
   ========================================================= */

@media (min-width:391px) and (max-width:767px) {

    .pca6-why,
    .pca8-commitment {
        padding: 75px 6vw;
    }

    .pca6-main,
    .pca8-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .pca6-intro {
        margin-bottom: 45px;
    }

    .pca6-intro h2,
    .pca8-copy h2 {
        font-size: 40px;
    }

    .pca6-intro p,
    .pca8-copy > p,
    .pca9-content > p {
        font-size: 16px;
    }

    .pca6-image-wrap,
    .pca6-image-wrap img {
        min-height: 350px;
    }

    .pca6-item {
        grid-template-columns: 45px 1fr 25px;
        gap: 15px;
        padding: 27px 0;
    }

    .pca6-item-body h3 {
        font-size: 20px;
    }

    .pca6-item-body p {
        font-size: 15px;
    }

    .pca7-stats {
        padding: 80px 6vw 55px;
    }

    .pca7-stat-row {
        grid-template-columns: 1fr;
    }

    .pca7-stat {
        min-height: 325px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .pca7-stat:last-child {
        border-bottom: 0;
    }

    .pca7-number {
        font-size: 70px;
    }

    .pca8-image-wrap,
    .pca8-image-wrap img {
        min-height: 350px;
    }

    .pca8-points {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pca9-cta {
        min-height: 640px;
        padding: 80px 6vw;
    }

    .pca9-content h2 {
        font-size: 45px;
    }

    .pca9-actions {
        flex-direction: column;
        gap: 12px;
    }

    .pca9-btn {
        width: 100%;
    }

    .pca9-footer-line {
        flex-wrap: wrap;
        margin-top: 45px;
    }

}


/* =========================================================
   MOBILE-M — 361–390
   ========================================================= */

@media (min-width:361px) and (max-width:390px) {

    .pca6-why,
    .pca8-commitment {
        padding: 70px 5vw;
    }

    .pca6-main,
    .pca8-container {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .pca6-intro h2,
    .pca8-copy h2 {
        font-size: 36px;
    }

    .pca6-image-wrap,
    .pca6-image-wrap img,
    .pca8-image-wrap,
    .pca8-image-wrap img {
        min-height: 310px;
    }

    .pca6-item {
        grid-template-columns: 40px 1fr 20px;
        gap: 12px;
    }

    .pca6-item-body h3 {
        font-size: 19px;
    }

    .pca6-item-body p {
        font-size: 15px;
    }

    .pca7-stats {
        padding: 70px 5vw 50px;
    }

    .pca7-stat-row {
        grid-template-columns: 1fr;
    }

    .pca7-stat {
        min-height: 315px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .pca7-number {
        font-size: 64px;
    }

    .pca8-points {
        grid-template-columns: 1fr;
    }

    .pca9-cta {
        padding: 75px 5vw;
    }

    .pca9-content h2 {
        font-size: 40px;
    }

    .pca9-actions {
        flex-direction: column;
    }

    .pca9-btn {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================================
   MOBILE-S — 320–360
   ========================================================= */

@media (max-width:360px) {

    .pca6-why,
    .pca8-commitment {
        padding: 65px 5vw;
    }

    .pca6-kicker,
    .pca7-kicker,
    .pca8-kicker,
    .pca9-kicker {
        font-size: 10px;
        letter-spacing: .13em;
    }

    .pca6-intro h2,
    .pca8-copy h2 {
        font-size: 33px;
    }

    .pca6-intro p,
    .pca8-copy > p,
    .pca9-content > p {
        font-size: 14px;
    }

    .pca6-main,
    .pca8-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pca6-image-wrap,
    .pca6-image-wrap img,
    .pca8-image-wrap,
    .pca8-image-wrap img {
        min-height: 275px;
    }

    .pca6-image-caption {
        left: 24px;
        bottom: 23px;
    }

    .pca6-image-caption strong {
        font-size: 17px;
    }

    .pca6-image-caption span {
        font-size: 9px;
    }

    .pca6-item {
        grid-template-columns: 35px 1fr 18px;
        gap: 9px;
        padding: 23px 0;
    }

    .pca6-number {
        font-size: 13px;
    }

    .pca6-item-body h3 {
        font-size: 18px;
    }

    .pca6-item-body p {
        font-size: 14px;
    }

    .pca7-stats {
        padding: 65px 5vw 45px;
    }

    .pca7-heading h2 {
        font-size: 34px;
    }

    .pca7-heading p {
        font-size: 14px;
    }

    .pca7-stat-row {
        grid-template-columns: 1fr;
    }

    .pca7-stat {
        min-height: 295px;
        padding: 27px 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .pca7-number {
        font-size: 58px;
    }

    .pca7-stat h3 {
        font-size: 19px;
    }

    .pca7-stat p {
        font-size: 14px;
    }

    .pca7-progress {
        left: 20px;
        right: 20px;
    }

    .pca8-points {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pca8-image-label {
        left: 24px;
        bottom: 23px;
    }

    .pca9-cta {
        min-height: 610px;
        padding: 70px 5vw;
    }

    .pca9-content h2 {
        font-size: 36px;
    }

    .pca9-actions {
        flex-direction: column;
        gap: 11px;
    }

    .pca9-btn {
        width: 100%;
        min-width: 0;
        font-size: 14px;
    }

    .pca9-footer-line {
        gap: 9px;
        margin-top: 42px;
        font-size: 8px;
    }

    .pca9-footer-line i {
        width: 22px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .pca6-reveal,
    .pca7-reveal,
    .pca8-reveal,
    .pca9-reveal,
    .pca6-image-orbit,
    .pca7-grid::after,
    .pca7-glow,
    .pca8-scan,
    .pca8-image-wrap img,
    .pca9-pattern,
    .pca9-power-mark {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   POWERCORE — AMC PLANS PAGE
   Scoped stylesheet — classes prefixed "amc-" only.
   Does not touch or override any existing site class.
   ========================================================= */

:root,
html[data-theme="light"] {
    --amc-bg: #F7F5F1;
    --amc-bg-alt: #EEEAE3;
    --amc-surface: #FFFFFF;
    --amc-text: #202A30;
    --amc-text-soft: #596A73;
    --amc-orange: #FF8A00;
    --amc-orange-hover: #E87500;
    --amc-orange-soft: rgba(255, 138, 0, .10);
    --amc-line: rgba(32, 42, 48, .14);
    --amc-line-strong: rgba(32, 42, 48, .22);
    --amc-shadow: 0 20px 55px rgba(32, 42, 48, .10);
}

html.dark-mode,
html[data-theme="dark"] {
    --amc-bg: #101619;
    --amc-bg-alt: #151D21;
    --amc-surface: #182127;
    --amc-text: #F3F1EC;
    --amc-text-soft: #A7B4BA;
    --amc-orange: #FF9D2E;
    --amc-orange-hover: #FFB14A;
    --amc-orange-soft: rgba(255, 157, 46, .14);
    --amc-line: rgba(243, 241, 236, .14);
    --amc-line-strong: rgba(243, 241, 236, .24);
    --amc-shadow: 0 20px 55px rgba(0, 0, 0, .45);
}

.amc-page {
    background: var(--amc-bg);
    color: var(--amc-text);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
    transition: background-color .3s ease, color .3s ease;
}

.amc-page * { box-sizing: border-box; }

.amc-page section { position: relative; width: 100%; }

.amc-wrap {
    width: min(1320px, calc(100% - 48px));
    margin-inline: auto;
}

.amc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--amc-orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.amc-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--amc-orange);
    box-shadow: 0 0 10px rgba(255, 138, 0, .6);
}

.amc-page h1,
.amc-page h2,
.amc-page h3 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--amc-text);
}

.amc-page h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.08; }
.amc-page h2 em { color: var(--amc-orange); font-style: normal; }

.amc-page p {
    margin: 0;
    color: var(--amc-text-soft);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
}

.amc-page .pc-footer-column h3,
.amc-page .pc-footer-newsletter h3 {
    color: #F3F1EC;
}

.amc-page .pc-footer-description,
.amc-page .pc-footer-newsletter > p,
.amc-page .pc-footer-bottom p {
    color: #A7B4BA;
}

.amc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}

.amc-btn-primary {
    background: var(--amc-orange);
    color: #101619;
    box-shadow: 0 14px 30px rgba(255, 138, 0, .30);
}

.amc-btn-primary:hover {
    background: var(--amc-orange-hover);
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(255, 138, 0, .40);
}

.amc-btn-ghost {
    background: transparent;
    color: var(--amc-text);
    border-color: var(--amc-line-strong);
}

.amc-btn-ghost:hover {
    border-color: var(--amc-orange);
    color: var(--amc-orange);
    transform: translateY(-3px);
}

/* ---------------------------------------------------------
   SCROLL REVEAL (shared)
   --------------------------------------------------------- */

.amc-reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.amc-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.amc-reveal-left  { transform: translateX(-50px); }
.amc-reveal-left.is-visible { transform: translate3d(0,0,0); }
.amc-reveal-right { transform: translateX(50px); }
.amc-reveal-right.is-visible { transform: translate3d(0,0,0); }

.amc-delay-1 { transition-delay: .10s; }
.amc-delay-2 { transition-delay: .20s; }
.amc-delay-3 { transition-delay: .30s; }
.amc-delay-4 { transition-delay: .40s; }

/* ---------------------------------------------------------
   SCROLL PROGRESS BAR
   --------------------------------------------------------- */

.amc-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--amc-orange), #FFD48A);
    z-index: 9998;
    box-shadow: 0 0 12px rgba(255, 138, 0, .6);
    transition: width .1s linear;
}

/* ---------------------------------------------------------
   BACK TO TOP
   --------------------------------------------------------- */

.amc-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--amc-orange);
    color: #101619;
    border: none;
    cursor: pointer;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease, background .3s ease;
    box-shadow: 0 12px 26px rgba(255, 138, 0, .35);
}
.amc-to-top.is-shown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.amc-to-top:hover { background: var(--amc-orange-hover); }

/* =========================================================
   SECTION 1 — HERO (65vh)
   ========================================================= */

.amc-hero {
    position: relative;
    min-height: 65vh;
    height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #101619;
}

.amc-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(16,22,25,.55), rgba(16,22,25,.78) 60%, rgba(16,22,25,.94)),
        url("../images/about.hero.jpg") center / cover no-repeat;
    transform: scale(1.06);
    animation: amcHeroPan 16s ease-in-out infinite alternate;
}

@keyframes amcHeroPan {
    from { transform: scale(1.06) translateX(0); }
    to   { transform: scale(1.14) translateX(-1.5%); }
}

.amc-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    opacity: .5;
}

.amc-hero-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,138,0,.28);
    animation: amcSpin 34s linear infinite;
}
.amc-hero-orbit-a { width: 480px; height: 480px; top: -120px; left: -100px; }
.amc-hero-orbit-b { width: 620px; height: 620px; bottom: -220px; right: -160px; animation-duration: 46s; animation-direction: reverse; }

@keyframes amcSpin { to { transform: rotate(360deg); } }

.amc-hero-particles { position: absolute; inset: 0; pointer-events: none; }
.amc-hero-particles span {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--amc-orange, #FF8A00);
    box-shadow: 0 0 8px rgba(255,138,0,.8);
    opacity: .7;
    animation: amcFloat linear infinite;
}
@keyframes amcFloat {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .5; }
    100% { transform: translateY(-140px) translateX(18px); opacity: 0; }
}

.amc-hero-content {
    position: relative;
    z-index: 3;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.amc-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 20px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,138,0,.35);
    backdrop-filter: blur(6px);
    color: #FFD9A8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.amc-hero-kicker i { color: #FF8A00; }

.amc-hero h1 {
    color: #FFFFFF;
    font-size: clamp(34px, 5.6vw, 68px);
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.amc-hero h1 span { color: #FF9D2E; }

.amc-hero p {
    max-width: 620px;
    margin: 22px auto 0;
    color: #D7DEE1;
    font-size: 17px;
    line-height: 1.8;
}

.amc-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.amc-hero .amc-btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.amc-hero .amc-btn-ghost:hover { border-color: #FF9D2E; color: #FF9D2E; }

.amc-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 14px;
    z-index: 3;
}
.amc-scroll-cue::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    width: 4px; height: 8px;
    background: #FF9D2E;
    border-radius: 2px;
    transform: translateX(-50%);
    animation: amcScrollDot 1.8s ease-in-out infinite;
}
@keyframes amcScrollDot {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    70%  { opacity: .2; }
    100% { transform: translate(-50%, 16px); opacity: 0; }
}

/* =========================================================
   SHARED SECTION HEADING (centered)
   ========================================================= */

.amc-heading {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}
.amc-heading .amc-kicker { justify-content: center; }
.amc-heading p { margin: 18px auto 0; max-width: 620px; }

/* =========================================================
   SECTION 2 — WHY AMC
   ========================================================= */

.amc-why { padding: clamp(80px, 9vw, 130px) 0; background: var(--amc-bg); }

.amc-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.amc-why-card {
    position: relative;
    padding: 32px 26px;
    border-radius: 16px;
    background: var(--amc-surface);
    border: 1px solid var(--amc-line);
    box-shadow: var(--amc-shadow);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.amc-why-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px 120px at 20% 0%, var(--amc-orange-soft), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
}
.amc-why-card:hover { transform: translateY(-10px); border-color: var(--amc-orange); }
.amc-why-card:hover::before { opacity: 1; }

.amc-why-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--amc-orange-soft);
    color: var(--amc-orange);
    font-size: 22px;
    margin-bottom: 20px;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.amc-why-card:hover .amc-why-icon { transform: rotate(-8deg) scale(1.08); }

.amc-why-card h3 { font-size: 19px; margin-bottom: 10px; }
.amc-why-card p { font-size: 14.5px; line-height: 1.7; }

/* =========================================================
   SECTION 3 — PLANS / PRICING
   ========================================================= */

.amc-plans { padding: clamp(80px, 9vw, 130px) 0; background: var(--amc-bg-alt); }

.amc-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}

.amc-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 38px 30px;
    border-radius: 20px;
    background: var(--amc-surface);
    border: 1px solid var(--amc-line);
    box-shadow: var(--amc-shadow);
    transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.amc-plan:hover { box-shadow: 0 30px 70px rgba(32,42,48,.18); }

.amc-plan-popular {
    border-color: var(--amc-orange);
    background: linear-gradient(180deg, var(--amc-orange-soft), var(--amc-surface) 40%);
}

.amc-plan-badge {
    position: absolute;
    top: -14px; left: 30px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--amc-orange);
    color: #101619;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    animation: amcPulseBadge 2.4s ease-in-out infinite;
}
@keyframes amcPulseBadge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,0,.45); }
    50%      { box-shadow: 0 0 0 8px rgba(255,138,0,0); }
}

.amc-plan-name { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amc-orange); }
.amc-plan-title { font-size: 24px; margin-top: 10px; }

.amc-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 22px; }
.amc-plan-price strong { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.amc-plan-price span { color: var(--amc-text-soft); font-size: 14px; font-weight: 600; }

.amc-plan-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.amc-plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--amc-text-soft);
    line-height: 1.5;
}
.amc-plan-list i { color: var(--amc-orange); margin-top: 3px; font-size: 13px; }

.amc-plan .amc-btn { justify-content: center; width: 100%; }

/* =========================================================
   SECTION 4 — PROCESS
   ========================================================= */

.amc-process { padding: clamp(80px, 9vw, 130px) 0; background: var(--amc-bg); }

.amc-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    counter-reset: amcstep;
}

.amc-steps::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--amc-orange) 0 10px, transparent 10px 20px);
    opacity: .5;
}

.amc-step {
    position: relative;
    text-align: left;
    padding-top: 4px;
}

.amc-step-num {
    position: relative;
    z-index: 2;
    width: 68px; height: 68px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--amc-bg);
    border: 2px solid var(--amc-orange);
    color: var(--amc-orange);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 22px;
    box-shadow: 0 0 0 6px var(--amc-bg);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.amc-step:hover .amc-step-num { transform: scale(1.1) rotate(-6deg); }

.amc-step h3 { font-size: 18px; margin-bottom: 8px; }
.amc-step p { font-size: 14.5px; }

/* =========================================================
   SECTION 5 — WHAT'S COVERED
   ========================================================= */

.amc-coverage { padding: clamp(80px, 9vw, 130px) 0; background: var(--amc-bg-alt); overflow: hidden; }

.amc-coverage .amc-wrap { width: min(1200px, calc(100% - 64px)); }

.amc-coverage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 52px);
    margin-bottom: 90px;
}
.amc-coverage-row:last-child { margin-bottom: 0; }
.amc-coverage-row.amc-flip { direction: rtl; }
.amc-coverage-row.amc-flip > * { direction: ltr; }

.amc-coverage-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    min-width: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--amc-shadow);
}
.amc-coverage-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.amc-coverage-frame:hover img { transform: scale(1.08); }
.amc-coverage-frame::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(16,22,25,.55));
}

.amc-coverage-tag {
    position: absolute;
    left: 18px; bottom: 18px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(16,22,25,.65);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.amc-coverage-copy .amc-kicker { margin-bottom: 14px; }
.amc-coverage-copy { min-width: 0; }
.amc-coverage-copy h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
.amc-coverage-copy p { margin-bottom: 20px; }

.amc-coverage-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.amc-coverage-points li { display: flex; gap: 10px; font-size: 14.5px; color: var(--amc-text-soft); }
.amc-coverage-points i { color: var(--amc-orange); margin-top: 3px; font-size: 13px; }

/* =========================================================
   SECTION 6 — STATS
   ========================================================= */

.amc-stats {
    padding: clamp(70px, 8vw, 110px) 0;
    background: #101619;
    position: relative;
    overflow: hidden;
}
.amc-stats::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(560px 260px at 12% 20%, rgba(255,138,0,.14), transparent 70%),
        radial-gradient(560px 260px at 88% 80%, rgba(255,138,0,.10), transparent 70%);
}

.amc-stats-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    text-align: center;
}

.amc-stat-num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -.02em;
}
.amc-stat-num span { color: #FF9D2E; }
.amc-stat-label {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #A7B4BA;
}

/* =========================================================
   SECTION 7 — FAQ + FINAL CTA
   ========================================================= */

.amc-faq { padding: clamp(80px, 9vw, 130px) 0; background: var(--amc-bg); }

.amc-faq-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start;
}

.amc-faq-cta {
    position: sticky;
    top: 110px;
    padding: 40px 32px;
    border-radius: 20px;
    background: linear-gradient(160deg, #101619, #1B2126);
    color: #fff;
    box-shadow: var(--amc-shadow);
}
.amc-faq-cta .amc-kicker { color: #FF9D2E; }
.amc-faq-cta h3 { color: #fff; font-size: 26px; margin-bottom: 14px; }
.amc-faq-cta p { color: #C7CFD2; margin-bottom: 26px; }
.amc-faq-cta .amc-btn-primary { width: 100%; justify-content: center; }

html[data-theme="light"] .amc-page .amc-kicker,
html[data-theme="light"] .amc-page h2 em,
html[data-theme="light"] .amc-page .amc-plan-name,
html[data-theme="light"] .amc-page .amc-step-num,
html[data-theme="light"] .amc-page .amc-plan-list i,
html[data-theme="light"] .amc-page .amc-coverage-points i,
html[data-theme="light"] .amc-page .amc-faq-q i {
    color: #FF8A00;
}

html[data-theme="light"] .amc-page .amc-faq-cta .amc-kicker {
    color: #FF9D2E;
}

.amc-faq-list { display: flex; flex-direction: column; gap: 14px; }

.amc-faq-item {
    border: 1px solid var(--amc-line);
    border-radius: 14px;
    background: var(--amc-surface);
    overflow: hidden;
    transition: border-color .3s ease;
}
.amc-faq-item.is-open { border-color: var(--amc-orange); }

.amc-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--amc-text);
    font-family: inherit;
}
.amc-faq-q i { color: var(--amc-orange); transition: transform .35s cubic-bezier(.16,1,.3,1); flex-shrink: 0; }
.amc-faq-item.is-open .amc-faq-q i { transform: rotate(135deg); }

.amc-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.16,1,.3,1); }
.amc-faq-a p { padding: 0 22px 22px; font-size: 14.5px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 1536px) {
    .amc-hero { height: 72vh; min-height: 72vh; }
}

@media (max-width: 1279px) {
    .amc-why-grid { grid-template-columns: repeat(2, 1fr); }
    .amc-plans-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .amc-steps { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
    .amc-steps::before { display: none; }
    .amc-faq-layout { grid-template-columns: 1fr; }
    .amc-faq-cta { position: static; }
}

@media (max-width: 1535px) {
    .amc-coverage-row .amc-reveal-left,
    .amc-coverage-row .amc-reveal-right { transform: translateY(42px); }
    .amc-coverage-row .amc-reveal-left.is-visible,
    .amc-coverage-row .amc-reveal-right.is-visible { transform: translate3d(0,0,0); }

    .amc-faq-layout .amc-reveal-left,
    .amc-faq-layout .amc-reveal-right { transform: translateY(42px); }
    .amc-faq-layout .amc-reveal-left.is-visible,
    .amc-faq-layout .amc-reveal-right.is-visible { transform: translate3d(0,0,0); }
}

@media (max-width: 1023px) {
    .amc-coverage-row,
    .amc-coverage-row.amc-flip { grid-template-columns: minmax(0, 1fr); direction: ltr; gap: 30px; }
    .amc-coverage-row { margin-bottom: 64px; }
    .amc-coverage-frame { width: 100%; max-width: 560px; margin-inline: auto; }
    .amc-stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}

@media (max-width: 767px) {
    .amc-hero { height: 65vh; }
    .amc-why-grid { grid-template-columns: 1fr; }
    .amc-steps { grid-template-columns: 1fr; row-gap: 30px; }
    .amc-hero-actions { flex-direction: column; width: 100%; }
    .amc-hero-actions .amc-btn { width: 100%; justify-content: center; }
}

@media (max-width: 575px) {
    .amc-wrap { width: calc(100% - 32px); }
    .amc-hero h1 { font-size: 30px; }
    .amc-hero p { font-size: 15px; }
    .amc-plan { padding: 30px 22px; }
    .amc-stats-grid { grid-template-columns: 1fr; row-gap: 30px; }
}

@media (max-width: 360px) {
    .amc-hero-content { padding: 0 16px; }
    .amc-hero h1 { font-size: 26px; }
    .amc-btn { padding: 13px 22px; font-size: 13px; }
    .amc-why-card, .amc-plan { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .amc-page * { animation: none !important; transition: none !important; }
}

/* =========================================================
   POWERCORE — SERVICE AREA PAGE
   Scoped stylesheet — every rule lives under .sva-page or a
   class prefixed "sva-". Nothing global is touched.
   ========================================================= */

:root,
html[data-theme="light"] {
    --sva-bg: #F7F5F1;
    --sva-bg-alt: #EEEAE3;
    --sva-surface: #FFFFFF;
    --sva-text: #202A30;
    --sva-text-soft: #596A73;
    --sva-orange: #FF8A00;
    --sva-orange-hover: #E87500;
    --sva-orange-soft: rgba(255, 138, 0, .10);
    --sva-line: rgba(32, 42, 48, .14);
    --sva-line-strong: rgba(32, 42, 48, .22);
    --sva-shadow: 0 20px 55px rgba(32, 42, 48, .10);
}

html.dark-mode,
html[data-theme="dark"] {
    --sva-bg: #101619;
    --sva-bg-alt: #151D21;
    --sva-surface: #182127;
    --sva-text: #F3F1EC;
    --sva-text-soft: #A7B4BA;
    --sva-orange: #FF9D2E;
    --sva-orange-hover: #FFB14A;
    --sva-orange-soft: rgba(255, 157, 46, .14);
    --sva-line: rgba(243, 241, 236, .14);
    --sva-line-strong: rgba(243, 241, 236, .24);
    --sva-shadow: 0 20px 55px rgba(0, 0, 0, .45);
}

.sva-page {
    background: var(--sva-bg);
    color: var(--sva-text);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
    transition: background-color .3s ease, color .3s ease;
}
.sva-page * { box-sizing: border-box; }
.sva-page section { position: relative; width: 100%; }

.sva-wrap { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }

.sva-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--sva-orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.sva-kicker::before {
    content: "";
    width: 26px; height: 2px;
    background: var(--sva-orange);
    box-shadow: 0 0 10px rgba(255, 138, 0, .6);
}

.sva-page h1, .sva-page h2, .sva-page h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; color: var(--sva-text); }
.sva-page h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.1; }
.sva-page h2 em { color: var(--sva-orange); font-style: normal; }
.sva-page p { margin: 0; color: var(--sva-text-soft); font-size: 16px; line-height: 1.75; font-weight: 500; }

.sva-page .pc-footer-column h3,
.sva-page .pc-footer-newsletter h3 {
    color: #F3F1EC;
}

.sva-page .pc-footer-description,
.sva-page .pc-footer-newsletter > p,
.sva-page .pc-footer-bottom p {
    color: #A7B4BA;
}

.sva-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.sva-btn-primary { background: var(--sva-orange); color: #101619; box-shadow: 0 14px 30px rgba(255,138,0,.30); }
.sva-btn-primary:hover { background: var(--sva-orange-hover); transform: translateY(-3px); box-shadow: 0 20px 38px rgba(255,138,0,.40); }
.sva-btn-ghost { background: transparent; color: var(--sva-text); border-color: var(--sva-line-strong); }
.sva-btn-ghost:hover { border-color: var(--sva-orange); color: var(--sva-orange); transform: translateY(-3px); }

.sva-heading { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sva-heading .sva-kicker { justify-content: center; }
.sva-heading p { margin: 18px auto 0; max-width: 620px; }

/* ---------------------------------------------------------
   SCROLL REVEAL
   --------------------------------------------------------- */

.sva-reveal { opacity: 0; transform: translateY(42px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.sva-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.sva-reveal-left { transform: translateX(-50px); }
.sva-reveal-left.is-visible { transform: translate3d(0,0,0); }
.sva-reveal-right { transform: translateX(50px); }
.sva-reveal-right.is-visible { transform: translate3d(0,0,0); }
.sva-reveal-pop { transform: translateY(30px) scale(.92); }
.sva-reveal-pop.is-visible { transform: translate3d(0,0,0) scale(1); }
.sva-delay-1 { transition-delay: .08s; }
.sva-delay-2 { transition-delay: .16s; }
.sva-delay-3 { transition-delay: .24s; }
.sva-delay-4 { transition-delay: .32s; }
.sva-delay-5 { transition-delay: .40s; }
.sva-delay-6 { transition-delay: .48s; }

/* ---------------------------------------------------------
   SHARED — SCROLL PROGRESS + BACK TO TOP
   --------------------------------------------------------- */

.sva-scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--sva-orange), #FFD48A);
    z-index: 9998;
    box-shadow: 0 0 12px rgba(255,138,0,.6);
    transition: width .1s linear;
}

.sva-to-top {
    position: fixed; right: 24px; bottom: 24px;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sva-orange); color: #101619; border: none;
    cursor: pointer; z-index: 9998;
    opacity: 0; pointer-events: none; transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease, background .3s ease;
    box-shadow: 0 12px 26px rgba(255,138,0,.35);
}
.sva-to-top.is-shown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sva-to-top:hover { background: var(--sva-orange-hover); }

/* Decorative floating orange blob, reused as a background accent */
.sva-blob {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,138,0,.35), rgba(255,138,0,0) 70%);
    filter: blur(4px);
    pointer-events: none;
    animation: svaDrift 14s ease-in-out infinite alternate;
}
@keyframes svaDrift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(18px,-22px) scale(1.08); }
}

/* =========================================================
   SECTION 1 — HERO (65vh, mandatory)
   ========================================================= */

.sva-hero {
    position: relative;
    min-height: 65vh; height: 65vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: #101619;
}
.sva-hero-bg {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(16,22,25,.55), rgba(16,22,25,.80) 60%, rgba(16,22,25,.95)),
        url("../images/service-area.jpg") center / cover no-repeat;
    transform: scale(1.06);
    animation: svaHeroPan 17s ease-in-out infinite alternate;
}
@keyframes svaHeroPan {
    from { transform: scale(1.06) translateX(0); }
    to   { transform: scale(1.15) translateX(1.5%); }
}
.sva-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    opacity: .5;
}

/* radiating orange pulse rings behind the hero title */
.sva-hero-pulse { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; }
.sva-hero-pulse span {
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(255,138,0,.4);
    animation: svaPulseRing 4.5s ease-out infinite;
}
.sva-hero-pulse span:nth-child(2) { animation-delay: 1.5s; }
.sva-hero-pulse span:nth-child(3) { animation-delay: 3s; }
@keyframes svaPulseRing {
    0%   { transform: scale(1); opacity: .6; }
    100% { transform: scale(6.5); opacity: 0; }
}

.sva-hero-content { position: relative; z-index: 3; max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sva-hero-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 auto 20px; padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,138,0,.35);
    backdrop-filter: blur(6px);
    color: #FFD9A8; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.sva-hero-kicker i { color: #FF8A00; }
.sva-hero h1 { color: #FFFFFF; font-size: clamp(34px, 5.6vw, 66px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.sva-hero h1 span { color: #FF9D2E; }
.sva-hero p { max-width: 620px; margin: 22px auto 0; color: #D7DEE1; font-size: 17px; line-height: 1.8; }
.sva-hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.sva-hero .sva-btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.sva-hero .sva-btn-ghost:hover { border-color: #FF9D2E; color: #FF9D2E; }

.sva-scroll-cue {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    width: 26px; height: 42px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 14px; z-index: 3;
}
.sva-scroll-cue::before {
    content: ""; position: absolute; top: 7px; left: 50%;
    width: 4px; height: 8px; background: #FF9D2E; border-radius: 2px;
    transform: translateX(-50%);
    animation: svaScrollDot 1.8s ease-in-out infinite;
}
@keyframes svaScrollDot {
    0% { transform: translate(-50%,0); opacity: 1; }
    70% { opacity: .2; }
    100% { transform: translate(-50%,16px); opacity: 0; }
}

/* =========================================================
   SECTION 2 — INTRO / WHAT WE DO (asymmetric split)
   ========================================================= */

.sva-intro { padding: clamp(80px, 9vw, 130px) 0; background: var(--sva-bg); overflow: hidden; }
.sva-intro-blob { width: 420px; height: 420px; top: -120px; right: -120px; }

.sva-intro-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}

.sva-intro-copy h2 { margin-bottom: 20px; }
.sva-intro-copy p { font-size: 17px; margin-bottom: 28px; }

.sva-intro-chips { display: flex; flex-direction: column; gap: 18px; }
.sva-chip {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    background: var(--sva-surface);
    border: 1px solid var(--sva-line);
    border-radius: 16px;
    box-shadow: var(--sva-shadow);
    transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.sva-chip:hover { transform: translateX(8px); border-color: var(--sva-orange); }
.sva-chip-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--sva-orange-soft);
    color: var(--sva-orange);
    font-size: 19px;
}
.sva-chip-text strong { display: block; font-size: 15px; color: var(--sva-text); margin-bottom: 3px; }
.sva-chip-text span { font-size: 13.5px; color: var(--sva-text-soft); }

/* =========================================================
   SECTION 3 — SERVICES (3D FLIP CARDS)
   ========================================================= */

.sva-services { padding: clamp(80px, 9vw, 130px) 0; background: var(--sva-bg-alt); }

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

.sva-flip-card {
    perspective: 1400px;
    height: 230px;
}
.sva-flip-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.sva-flip-card:hover .sva-flip-inner,
.sva-flip-card:focus-within .sva-flip-inner { transform: rotateY(180deg); }

.sva-flip-face {
    position: absolute; inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 18px;
    padding: 30px 26px;
    display: flex; flex-direction: column;
    border: 1px solid var(--sva-line);
    box-shadow: var(--sva-shadow);
}
.sva-flip-front { background: var(--sva-surface); justify-content: center; align-items: flex-start; }
.sva-flip-back {
    background: linear-gradient(160deg, #101619, #202A30);
    color: #fff;
    transform: rotateY(180deg);
    justify-content: center;
}

.sva-flip-icon {
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--sva-orange-soft);
    color: var(--sva-orange);
    font-size: 21px;
    margin-bottom: 18px;
}
.sva-flip-front h3 { font-size: 18px; margin-bottom: 8px; }
.sva-flip-front span { font-size: 13px; color: var(--sva-orange); font-weight: 700; letter-spacing: .04em; }
.sva-flip-back p { color: #C7CFD2; font-size: 14px; line-height: 1.65; }
.sva-flip-back i.sva-flip-check { color: #FF9D2E; margin-right: 6px; }

/* =========================================================
   SECTION 4 — COVERAGE NEXUS (GLOWING ENERGY NETWORK)
   All selectors scoped to .sva-nexus-* — no global leakage.
   ========================================================= */

.sva-nexus {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 8.5vw, 128px) 0 clamp(66px, 7vw, 108px);
    background: var(--sva-bg);
    isolation: isolate;
}

/* --- atmosphere --- */
.sva-nexus-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sva-nexus-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.sva-nexus-glow-a {
    width: 620px; height: 620px;
    right: -6%; top: -12%;
    background: radial-gradient(circle, rgba(255,138,0,.20), transparent 68%);
    animation: svaNexusDrift 16s ease-in-out infinite;
}
.sva-nexus-glow-b {
    width: 520px; height: 520px;
    left: -8%; bottom: -22%;
    background: radial-gradient(circle, rgba(255,138,0,.13), transparent 68%);
    animation: svaNexusDrift 20s ease-in-out infinite reverse;
}
@keyframes svaNexusDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(26px, 22px, 0) scale(1.08); }
}
.sva-nexus-grid {
    position: absolute; inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(var(--sva-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--sva-line) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%);
    mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%);
}

.sva-nexus-top {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(28px, 4vw, 62px);
    align-items: center;
}

.sva-nexus-copy h2 { margin-bottom: 16px; }
.sva-nexus-copy p { margin-bottom: 22px; max-width: 46ch; }

.sva-nexus-readout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 9px 16px 9px 12px;
    border: 1px solid var(--sva-line-strong);
    border-radius: 999px;
    background: var(--sva-orange-soft);
}
.sva-nexus-readout-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--sva-orange);
    box-shadow: 0 0 0 4px rgba(255,138,0,.18);
    animation: svaNexusBeat 1.6s ease-in-out infinite;
}
@keyframes svaNexusBeat {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,138,0,.14); }
    50%      { box-shadow: 0 0 0 8px rgba(255,138,0,.05); }
}
.sva-nexus-readout-text {
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em;
    color: var(--sva-text-soft);
}
.sva-nexus-readout strong {
    font-size: 12.5px; font-weight: 800;
    letter-spacing: .08em;
    color: var(--sva-orange);
}

/* --- network stage --- */
.sva-nexus-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 1;
}
.sva-nexus-halo {
    position: absolute; inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,138,0,.16), rgba(255,138,0,.04) 45%, transparent 70%);
    filter: blur(14px);
    animation: svaNexusHalo 5.5s ease-in-out infinite;
}
@keyframes svaNexusHalo {
    0%, 100% { opacity: .75; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

.sva-nexus-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.sva-nexus-rings circle {
    fill: none;
    stroke: var(--sva-orange);
    stroke-width: 1;
    opacity: .22;
    stroke-dasharray: 5 12;
    transform-origin: 300px 300px;
    animation: svaNexusSpin 46s linear infinite;
}
.sva-nexus-rings circle:nth-child(2) { animation-duration: 34s; animation-direction: reverse; opacity: .16; }
.sva-nexus-rings circle:nth-child(3) { animation-duration: 24s; opacity: .12; }
@keyframes svaNexusSpin { to { transform: rotate(360deg); } }

.sva-nexus-beam {
    stroke: var(--sva-orange);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 10 260;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(255,138,0,.85));
    animation: svaNexusBeam 3.2s linear infinite;
    animation-delay: var(--d, 0s);
}
@keyframes svaNexusBeam {
    0%   { stroke-dashoffset: 270; opacity: 0; }
    12%  { opacity: .95; }
    55%  { opacity: .55; }
    100% { stroke-dashoffset: -270; opacity: 0; }
}

.sva-nexus-ping circle {
    fill: none;
    stroke: var(--sva-orange);
    stroke-width: 2;
    opacity: 0;
    animation: svaNexusPing 2.6s ease-out infinite;
    transform-origin: center;
}
.sva-nexus-ping circle:nth-child(2) { animation-delay: .3s; }
.sva-nexus-ping circle:nth-child(3) { animation-delay: .6s; }
.sva-nexus-ping circle:nth-child(4) { animation-delay: .9s; }
.sva-nexus-ping circle:nth-child(5) { animation-delay: 1.2s; }
@keyframes svaNexusPing {
    0%   { transform: scale(.3); opacity: .85; }
    100% { transform: scale(2.6); opacity: 0; }
}

.sva-nexus-node {
    fill: var(--sva-orange);
    filter: drop-shadow(0 0 7px rgba(255,138,0,.9));
    animation: svaNexusNode 2.6s ease-in-out infinite;
}
.sva-nexus-node-base { animation-delay: .15s; }
@keyframes svaNexusNode {
    0%, 100% { transform: scale(1);   opacity: .9; }
    50%      { transform: scale(1.35); opacity: 1; }
}

.sva-nexus-core-halo {
    fill: var(--sva-orange);
    opacity: .16;
    filter: blur(16px);
    animation: svaNexusCoreHalo 3.4s ease-in-out infinite;
}
@keyframes svaNexusCoreHalo {
    0%, 100% { transform: scale(1);   opacity: .14; }
    50%      { transform: scale(1.28); opacity: .3; }
}
.sva-nexus-core-rim {
    fill: none;
    stroke: var(--sva-orange);
    stroke-width: 1.5;
    opacity: .8;
    animation: svaNexusCoreRim 3.4s ease-in-out infinite;
}
@keyframes svaNexusCoreRim {
    0%, 100% { transform: scale(1);   opacity: .55; }
    50%      { transform: scale(1.28); opacity: 0; }
}

.sva-nexus-core-label {
    position: absolute; inset: 0;
    margin: auto;
    width: 118px; height: 118px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    text-align: center;
    border-radius: 50%;
    color: #101619;
    background: radial-gradient(circle at 50% 40%, #FFB14A, var(--sva-orange) 72%);
    box-shadow: 0 0 0 8px rgba(255,138,0,.10), 0 0 34px rgba(255,138,0,.55);
}
.sva-nexus-core-label i { font-size: 16px; }
.sva-nexus-core-label span {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .14em;
    opacity: .78;
}
.sva-nexus-core-label strong { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }

/* --- floating zone labels --- */
.sva-nexus-tag {
    position: absolute;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--sva-text);
    background: var(--sva-surface);
    border: 1px solid var(--sva-line-strong);
    box-shadow: 0 8px 22px rgba(32,42,48,.12);
    white-space: nowrap;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, color .3s ease, border-color .3s ease;
}
.sva-nexus-tag-1 { top: 20%;  right: 0; }
.sva-nexus-tag-2 { bottom: 19%; right: 6%; }
.sva-nexus-tag-3 { bottom: 6%;  left: 50%; transform: translateX(-50%); }
.sva-nexus-tag-4 { bottom: 19%; left: 4%; }
.sva-nexus-tag-5 { top: 20%;  left: 0; }

.sva-nexus-tag:hover {
    transform: translateY(-3px);
    color: var(--sva-orange);
    border-color: var(--sva-orange);
    box-shadow: 0 0 0 1px var(--sva-orange), 0 0 22px rgba(255,138,0,.42);
}
.sva-nexus-tag-3:hover { transform: translateX(-50%) translateY(-3px); }

/* --- zone strip --- */
.sva-zone-columns {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    margin-top: clamp(34px, 4vw, 58px);
    background: var(--sva-line);
    border: 1px solid var(--sva-line);
    border-radius: 20px;
    overflow: hidden;
}
.sva-zone-col {
    position: relative;
    padding: 22px 18px 20px;
    background: var(--sva-bg);
    transition: background .35s ease;
}
.sva-zone-col::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sva-orange), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.sva-zone-col:hover { background: var(--sva-surface); }
.sva-zone-col:hover::after { transform: scaleX(1); }

.sva-zone-col-index {
    display: block;
    font-size: 11px; font-weight: 800;
    letter-spacing: .14em;
    color: var(--sva-orange);
    margin-bottom: 8px;
}
.sva-zone-col strong {
    display: block;
    font-size: 15.5px; font-weight: 800;
    color: var(--sva-text);
    letter-spacing: -.01em;
}
.sva-zone-col-tag {
    display: block;
    margin-top: 4px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sva-text-soft);
}
.sva-zone-col-meter {
    display: block;
    margin-top: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--sva-line);
    overflow: hidden;
}
.sva-zone-col-meter i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--sva-orange);
    box-shadow: 0 0 10px rgba(255,138,0,.75);
    transition: width 1.1s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--d, 0s);
}
.sva-zone-columns.is-visible .sva-zone-col-meter i,
.sva-zone-col.is-visible .sva-zone-col-meter i { width: 82%; }
.sva-zone-columns.is-visible .sva-zone-col:nth-child(1) .sva-zone-col-meter i,
.sva-zone-col:nth-child(1).is-visible .sva-zone-col-meter i { width: 100%; }
.sva-zone-columns.is-visible .sva-zone-col:nth-child(3) .sva-zone-col-meter i,
.sva-zone-col:nth-child(3).is-visible .sva-zone-col-meter i { width: 88%; }
.sva-zone-columns.is-visible .sva-zone-col:nth-child(4) .sva-zone-col-meter i,
.sva-zone-col:nth-child(4).is-visible .sva-zone-col-meter i { width: 66%; }
.sva-zone-columns.is-visible .sva-zone-col:nth-child(5) .sva-zone-col-meter i,
.sva-zone-col:nth-child(5).is-visible .sva-zone-col-meter i { width: 54%; }
.sva-zone-columns.is-visible .sva-zone-col:nth-child(6) .sva-zone-col-meter i,
.sva-zone-col:nth-child(6).is-visible .sva-zone-col-meter i { width: 38%; }


/* =========================================================
   SECTION 5 — RESPONSE WALL (GLOWING ENERGY BARS)
   ========================================================= */

.sva-wall {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(78px, 8.5vw, 128px) 0 clamp(70px, 7.5vw, 112px);
    background: var(--sva-bg-alt);
}
.sva-wall::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(620px 340px at 12% 8%, rgba(255,138,0,.15), transparent 70%),
        radial-gradient(620px 340px at 88% 92%, rgba(255,138,0,.12), transparent 70%);
}
.sva-wall-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sva-wall-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}
.sva-wall-glow-a {
    width: 460px; height: 460px;
    left: 4%; top: 22%;
    background: radial-gradient(circle, rgba(255,138,0,.16), transparent 70%);
    animation: svaNexusDrift 18s ease-in-out infinite;
}
.sva-wall-glow-b {
    width: 400px; height: 400px;
    right: 6%; bottom: 8%;
    background: radial-gradient(circle, rgba(255,138,0,.13), transparent 70%);
    animation: svaNexusDrift 22s ease-in-out infinite reverse;
}
.sva-wall-scan {
    position: absolute; left: 0; right: 0; top: 0;
    height: 180px;
    background: linear-gradient(180deg, transparent, rgba(255,138,0,.07), transparent);
    animation: svaWallScan 9s linear infinite;
}
@keyframes svaWallScan {
    0%   { transform: translateY(-200px); }
    100% { transform: translateY(115%); }
}

.sva-wall-head {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(24px, 3.5vw, 56px);
    align-items: end;
    margin-bottom: clamp(34px, 4vw, 56px);
}
.sva-wall-copy h2 { margin-bottom: 15px; }
.sva-wall-copy p { max-width: 52ch; }

.sva-wall-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.sva-wall-stat {
    position: relative;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: var(--sva-surface);
    border: 1px solid var(--sva-line);
    box-shadow: var(--sva-shadow);
    transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.sva-wall-stat::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    background: linear-gradient(140deg, rgba(255,138,0,.30), transparent 55%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.sva-wall-stat:hover { transform: translateY(-4px); border-color: var(--sva-orange); }
.sva-wall-stat:hover::before { opacity: 1; }

.sva-wall-stat strong {
    position: relative;
    display: block;
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 800;
    color: var(--sva-text);
    letter-spacing: -.02em;
    line-height: 1.05;
}
.sva-wall-stat strong span { color: var(--sva-orange); }
.sva-wall-stat p {
    position: relative;
    margin-top: 6px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sva-text-soft);
}

/* --- the wall itself --- */
.sva-wall-stage {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(10px, 1.4vw, 22px);
    align-items: end;
    padding: 26px 22px 22px;
    border-radius: 24px;
    background: var(--sva-surface);
    border: 1px solid var(--sva-line);
    box-shadow: var(--sva-shadow);
    overflow: hidden;
}
.sva-wall-stage::before {
    content: "";
    position: absolute; left: 22px; right: 22px; bottom: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sva-line-strong) 12%, var(--sva-line-strong) 88%, transparent);
}
.sva-wall-line {
    position: absolute; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,138,0,.35), transparent);
    animation: svaWallLine 6s ease-in-out infinite;
}
.sva-wall-line-1 { top: 34%; animation-delay: 0s; }
.sva-wall-line-2 { top: 66%; animation-delay: 1.6s; }
@keyframes svaWallLine {
    0%, 100% { opacity: 0; transform: scaleX(.5); }
    50%      { opacity: 1;  transform: scaleX(1); }
}

.sva-wall-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-align: center;
}
.sva-wall-value {
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 800;
    color: var(--sva-text);
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
}
.sva-wall-value small {
    display: block;
    margin-top: 4px;
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .16em;
    color: var(--sva-orange);
}
.sva-wall-track {
    position: relative;
    width: 100%;
    height: clamp(160px, 20vw, 260px);
    display: flex;
    align-items: flex-end;
    border-radius: 999px;
    background: var(--sva-line);
    overflow: hidden;
}
.sva-wall-bar {
    display: block;
    width: 100%;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFC46B, var(--sva-orange) 42%, #E87500);
    box-shadow: 0 0 20px rgba(255,138,0,.65), inset 0 1px 0 rgba(255,255,255,.35);
    transition: height 1.2s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--d, 0s);
    position: relative;
}
.sva-wall-bar::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.45), transparent);
    animation: svaWallShine var(--p, 2.6s) linear infinite;
    animation-delay: var(--d, 0s);
}
@keyframes svaWallShine {
    0%   { transform: translateY(-100%); opacity: 0; }
    30%  { opacity: .8; }
    100% { transform: translateY(100%); opacity: 0; }
}
.sva-wall-stage.is-visible .sva-wall-bar,
.sva-wall-col.is-visible .sva-wall-bar { height: var(--lvl, 60%); }

.sva-wall-name {
    font-size: clamp(12.5px, 1.05vw, 14.5px);
    font-weight: 800;
    color: var(--sva-text);
    letter-spacing: -.01em;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.sva-wall-note {
    font-size: 11px; font-weight: 600;
    letter-spacing: .04em;
    color: var(--sva-text-soft);
    line-height: 1.3;
}

/* --- ticker --- */
.sva-wall-ticker {
    position: relative; z-index: 1;
    margin-top: 26px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sva-wall-ticker-track {
    display: flex;
    align-items: center;
    gap: 26px;
    width: max-content;
    padding: 12px 0;
    animation: svaMarquee 34s linear infinite;
}
.sva-wall-ticker:hover .sva-wall-ticker-track { animation-play-state: paused; }
.sva-wall-ticker-track span {
    font-size: 13px; font-weight: 700;
    letter-spacing: .04em;
    color: var(--sva-text-soft);
    white-space: nowrap;
}
.sva-wall-ticker-track i {
    font-size: 8px;
    color: var(--sva-orange);
    font-style: normal;
}

/* =========================================================
   SECTION 6 — TESTIMONIAL MARQUEE
   ========================================================= */

.sva-testimonials { padding: clamp(80px, 9vw, 120px) 0; background: var(--sva-bg-alt); overflow: hidden; }

.sva-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sva-marquee-track { display: flex; gap: 22px; width: max-content; animation: svaMarquee 38s linear infinite; }
.sva-marquee:hover .sva-marquee-track { animation-play-state: paused; }
@keyframes svaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sva-quote-card {
    flex-shrink: 0;
    width: 340px;
    padding: 28px 26px;
    background: var(--sva-surface);
    border: 1px solid var(--sva-line);
    border-radius: 18px;
    box-shadow: var(--sva-shadow);
}
.sva-quote-mark { color: var(--sva-orange); font-size: 30px; line-height: 1; font-weight: 800; text-shadow: 0 0 18px rgba(255,138,0,.35); }
.sva-quote-card p { margin: 14px 0 20px; font-size: 14.5px; color: var(--sva-text); line-height: 1.7; }
.sva-quote-person { display: flex; align-items: center; gap: 12px; }
.sva-quote-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--sva-orange-soft);
    color: var(--sva-orange);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    flex-shrink: 0;
}
.sva-quote-person strong { display: block; font-size: 13.5px; color: var(--sva-text); }
.sva-quote-person span { font-size: 12px; color: var(--sva-text-soft); }

html[data-theme="light"] .sva-page .sva-kicker,
html[data-theme="light"] .sva-page h2 em,
html[data-theme="light"] .sva-page .sva-flip-front span,
html[data-theme="light"] .sva-page .sva-wall-stat strong span,
html[data-theme="light"] .sva-page .sva-wall-value small,
html[data-theme="light"] .sva-page .sva-nexus-readout strong,
html[data-theme="light"] .sva-page .sva-quote-mark,
html[data-theme="light"] .sva-page .sva-quote-avatar {
    color: #FF8A00;
}

/* =========================================================
   SECTION 7 — FINAL CTA (HANGING SIGNBOARD)
   ========================================================= */

.sva-cta { padding: clamp(90px, 10vw, 150px) 0 clamp(70px, 8vw, 110px); background: var(--sva-bg); overflow: hidden; }

.sva-cta-panel {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(50px, 6vw, 74px) clamp(28px, 5vw, 60px);
    border-radius: 26px;
    background: linear-gradient(160deg, #101619, #1B2126);
    text-align: center;
    overflow: visible;
    box-shadow: var(--sva-shadow);
}

.sva-sign-strings { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); display: flex; gap: 120px; }
.sva-sign-strings span { width: 1px; height: 40px; background: rgba(255,157,46,.5); }

.sva-sign {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 26px;
    padding: 10px 22px;
    border-radius: 10px;
    background: rgba(255,157,46,.12);
    border: 1px solid rgba(255,157,46,.4);
    color: #FFD9A8;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform-origin: top center;
    animation: svaSignSwing 5s ease-in-out infinite;
}
@keyframes svaSignSwing {
    0%, 100% { transform: rotate(-2.2deg); }
    50%      { transform: rotate(2.2deg); }
}

.sva-cta-panel h2 { color: #fff; margin-bottom: 16px; }
.sva-cta-panel p { color: #C7CFD2; max-width: 560px; margin: 0 auto 34px; }
.sva-cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.sva-cta-panel .sva-btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.sva-cta-panel .sva-btn-ghost:hover { border-color: #FF9D2E; color: #FF9D2E; }

.amc-page .amc-hero-actions .amc-btn {
    border: 1px solid #FF8A00;
    border-radius: 0;
    background: #FF8A00;
    color: #202A30;
}

.amc-page .amc-hero-actions .amc-btn:hover,
.amc-page .amc-hero-actions .amc-btn:focus-visible {
    border-color: #FFB14A;
    background: #FFB14A;
    color: #202A30;
}

.sva-page .sva-btn.sva-btn-primary,
.sva-page .sva-btn.sva-btn-ghost {
    border: 1px solid #FF8A00;
    border-radius: 0;
    background: #FF8A00;
    color: #202A30;
}

.sva-page .sva-btn.sva-btn-primary:hover,
.sva-page .sva-btn.sva-btn-ghost:hover,
.sva-page .sva-btn.sva-btn-primary:focus-visible,
.sva-page .sva-btn.sva-btn-ghost:focus-visible {
    border-color: #FFB14A;
    background: #FFB14A;
    color: #202A30;
}

html.dark-mode .sva-page .sva-btn.sva-btn-primary,
html[data-theme="dark"] .sva-page .sva-btn.sva-btn-primary,
html.dark-mode .sva-page .sva-btn.sva-btn-primary:hover,
html[data-theme="dark"] .sva-page .sva-btn.sva-btn-primary:hover {
    color: #202A30;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 1536px) {
    .sva-hero { height: 72vh; min-height: 72vh; }

    .sva-nexus-stage { max-width: 620px; }
    .sva-wall-track { height: 300px; }
}

@media (max-width: 1279px) {
    .sva-flip-grid { grid-template-columns: repeat(2, 1fr); }

    /* Nexus */
    .sva-nexus-top { grid-template-columns: 1fr 1fr; gap: 28px; }
    .sva-nexus-stage { max-width: 440px; }
    .sva-nexus-tag { font-size: 11.5px; padding: 6px 11px; }
    .sva-nexus-core-label { width: 104px; height: 104px; }
    .sva-nexus-core-label strong { font-size: 13px; }
    .sva-nexus-core-label span { font-size: 8.5px; }

    /* Wall */
    .sva-wall-stage { gap: 12px; padding: 22px 18px 20px; }
    .sva-wall-track { height: 200px; }
}

@media (min-width: 1536px) {
    .sva-nexus-stage { max-width: 620px; }
    .sva-wall-track { height: 300px; }
}

@media (max-width: 1535px) {
    .sva-intro-grid .sva-reveal-left,
    .sva-intro-grid .sva-reveal-right { transform: translateY(42px); }

    .sva-intro-grid .sva-reveal-left.is-visible,
    .sva-intro-grid .sva-reveal-right.is-visible { transform: translate3d(0,0,0); }
}

@media (max-width: 1023px) {
    .sva-intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .sva-intro-blob { display: none; }

    /* NEXUS — copy on top, network below, full width */
    .sva-nexus-top { grid-template-columns: 1fr; gap: 26px; }
    .sva-nexus-copy { text-align: center; }
    .sva-nexus-copy p { margin-left: auto; margin-right: auto; }
    .sva-nexus-copy .sva-kicker { justify-content: center; }
    .sva-nexus-stage { max-width: 460px; }
    .sva-nexus-tag { font-size: 12px; padding: 7px 13px; }

    .sva-zone-columns {
        grid-template-columns: repeat(3, 1fr);
        border-radius: 18px;
    }
    .sva-zone-col { padding: 18px 16px 16px; }

    /* WALL */
    .sva-wall-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
    .sva-wall-copy { text-align: center; }
    .sva-wall-copy p { margin-left: auto; margin-right: auto; }
    .sva-wall-copy .sva-kicker { justify-content: center; }
    .sva-wall-stats { max-width: 520px; margin: 0 auto; }
    .sva-wall-stage { gap: 10px; padding: 22px 16px 20px; }
    .sva-wall-track { height: 180px; }
}

@media (max-width: 767px) {
    .sva-hero { height: 65vh; }
    .sva-flip-grid { grid-template-columns: 1fr; }
    .sva-flip-card { height: 210px; }
    .sva-hero-actions { flex-direction: column; width: 100%; }
    .sva-hero-actions .sva-btn { width: 100%; justify-content: center; }
    .sva-sign-strings { gap: 60px; }

    /* NEXUS */
    .sva-nexus-stage { max-width: 340px; }
    .sva-nexus-core-label { width: 88px; height: 88px; }
    .sva-nexus-core-label i { font-size: 13px; }
    .sva-nexus-core-label strong { font-size: 12px; }
    .sva-nexus-core-label span { font-size: 7.5px; letter-spacing: .1em; }
    .sva-nexus-tag { font-size: 11px; padding: 6px 10px; }
    .sva-nexus-tag-1 { top: 19%; right: -2%; }
    .sva-nexus-tag-5 { top: 19%; left: -2%; }
    .sva-nexus-tag-2 { bottom: 17%; right: 2%; }
    .sva-nexus-tag-4 { bottom: 17%; left: 0; }
    .sva-nexus-tag-3 { bottom: 3%; }

    .sva-zone-columns { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
    .sva-zone-col { padding: 16px 14px 14px; }
    .sva-zone-col strong { font-size: 14.5px; }

    /* WALL */
    .sva-wall-stats { grid-template-columns: 1fr; gap: 10px; }
    .sva-wall-stat { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; }
    .sva-wall-stat p { margin-top: 0; text-align: right; }

    .sva-wall-stage {
        grid-template-columns: 1fr;
        gap: 0;
        align-items: stretch;
        padding: 22px 18px 20px;
    }
    .sva-wall-stage::before { left: 18px; right: 18px; bottom: 20px; }
    .sva-wall-col {
        display: grid;
        grid-template-columns: 92px 1fr;
        grid-template-areas: "value track" "value name" "value note";
        align-items: center;
        column-gap: 14px;
        row-gap: 2px;
        text-align: left;
    }
    .sva-wall-value { grid-area: value; font-size: 20px; align-self: center; }
    .sva-wall-value small { display: inline; margin: 0 0 0 4px; }
    .sva-wall-track { grid-area: track; height: 26px; width: 100%; }
    .sva-wall-name { grid-area: name; }
    .sva-wall-note { grid-area: note; }
    .sva-wall-col + .sva-wall-col { margin-top: 18px; }
    .sva-wall-line { display: none; }
}

@media (max-width: 575px) {
    .sva-wrap { width: calc(100% - 32px); }
    .sva-hero h1 { font-size: 30px; }
    .sva-hero p { font-size: 15px; }
    .sva-quote-card { width: 280px; }

    /* NEXUS — keeps the diagram intact, just tighter */
    .sva-nexus-stage { max-width: 300px; }
    .sva-nexus-core-label { width: 78px; height: 78px; }
    .sva-nexus-core-label strong { font-size: 11px; }
    .sva-nexus-core-label span { font-size: 7px; }
    .sva-nexus-tag { font-size: 10.5px; padding: 5px 9px; }
    .sva-nexus-tag-1 { right: -4%; }
    .sva-nexus-tag-5 { left: -4%; }
    .sva-nexus-tag-2 { right: 0; }
    .sva-nexus-tag-4 { left: -2%; }

    .sva-zone-col strong { font-size: 13.5px; }
    .sva-zone-col-tag { font-size: 10.5px; }

    /* WALL */
    .sva-wall-col { grid-template-columns: 78px 1fr; column-gap: 12px; }
    .sva-wall-value { font-size: 18px; }
    .sva-wall-note { font-size: 10.5px; }
}

@media (max-width: 360px) {
    .sva-hero-content { padding: 0 16px; }
    .sva-hero h1 { font-size: 26px; }
    .sva-btn { padding: 13px 22px; font-size: 13px; }
    .sva-cta-panel { padding: 42px 20px; }
    .sva-quote-card { width: 250px; }

    .sva-nexus-stage { max-width: 264px; }
    .sva-nexus-core-label { width: 70px; height: 70px; }
    .sva-nexus-tag { font-size: 9.5px; padding: 5px 8px; }
    .sva-zone-col { padding: 14px 12px 12px; }
    .sva-wall-col { grid-template-columns: 68px 1fr; }
    .sva-wall-value { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .sva-page * { animation: none !important; transition: none !important; }
}

@media (max-height: 700px) {
    .amc-hero,
    .sva-hero {
        height: auto;
        min-height: 65vh;
        padding: 52px 0 84px;
    }
}

@media (max-width: 767px) {
    .amc-hero,
    .sva-hero {
        height: auto;
        min-height: 65svh;
        padding: clamp(88px, 12svh, 112px) 0 clamp(104px, 14svh, 128px);
    }
}

:root{
    --bg:#F7F5F1;
    --bg2:#EEEAE2;
    --dark:#202A30;
    --txt:#202A30;
    --muted:#596A73;
    --orange:#FF8A00;
    --orange2:#E87500;
    --line:rgba(32,42,48,.15);
    --white:#F7F5F1;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--txt);
    font-family:Manrope,sans-serif;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

img{
    max-width:100%;
    display:block;
}

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

.wrap{
    width:min(1280px,92%);
    margin:auto;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.pc-nav{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(247,245,241,.95);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}

.pc-nav-inner{
    height:78px;
    width:min(1500px,94%);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.pc-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:.05em;
    white-space:nowrap;
}

.pc-brand b{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    background:var(--dark);
    color:var(--orange);
    border:1px solid rgba(255,138,0,.5);
    font-size:22px;
}

.pc-links{
    display:flex;
    align-items:center;
}

.pc-links>a,
.pc-drop>button{
    border:0;
    background:none;
    padding:12px 10px;
    font-size:14px;
    font-weight:700;
    color:var(--txt);
    position:relative;
}

.pc-links>a:hover,
.pc-links>a.active,
.pc-drop>button:hover{
    color:var(--orange);
}

.pc-drop{
    position:relative;
}

.pc-drop>button i{
    font-size:9px;
}

.pc-drop>div{
    position:absolute;
    top:45px;
    left:0;
    min-width:205px;
    padding:7px;
    background:var(--bg);
    border:1px solid var(--line);
    box-shadow:0 20px 55px #0002;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.22s;
}

.pc-drop:hover>div{
    opacity:1;
    visibility:visible;
    transform:none;
}

.pc-drop>div a{
    display:block;
    padding:11px 12px;
    font-size:13px;
    font-weight:700;
}

.pc-drop>div a:hover{
    background:rgba(255,138,0,.12);
    color:var(--orange);
}

.pc-controls{
    display:flex;
    gap:7px;
    align-items:center;
}

.pc-controls button{
    width:37px;
    height:37px;
    border:1px solid var(--line);
    background:none;
    color:var(--txt);
}

.enquire,
.mobile-enquire{
    background:var(--orange);
    color:#151515;
    padding:11px 16px;
    font-size:12px;
    font-weight:800;
}

.hamb{
    display:none;
}

.mobile{
    display:none;
}


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

.hero{
    min-height:65vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    color:#fff;
    background:#111;
    isolation:isolate;
}

.hero-bg{
    position:absolute;
    inset:0;
    z-index:-4;
    background:
        linear-gradient(
            90deg,
            #07090af2 0%,
            #07090ac4 43%,
            #07090a38
        ),
        url('../images/houses.jpg') center/cover;
}

.hero-grid,
.tech-grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.11;
    background-image:
        linear-gradient(#ff8a0033 1px,transparent 1px),
        linear-gradient(90deg,#ff8a0033 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(circle,#000,transparent 82%);
}

.hero-copy{
    width:min(1280px,92%);
    margin:auto;
    padding:60px 0;
    position:relative;
    z-index:4;
}

.hero-copy small,
.heading>small,
.step small,
.service>div>small,
.point small,
.em-copy>small{
    color:var(--orange);
    font-weight:800;
    letter-spacing:.16em;
    font-size:11px;
}

.hero h1{
    font-size:clamp(43px,6vw,76px);
    line-height:.92;
    letter-spacing:-.055em;
    margin:18px 0;
}

.hero h1 em,
.heading em,
.em-copy em{
    font-style:normal;
    color:var(--orange);
}

.hero p{
    max-width:560px;
    font-size:17px;
    line-height:1.7;
    color:#eee;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
}

.btn{
    min-height:48px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:800;
    transition:.3s;
}

.btn.orange{
    background:var(--orange);
    color:#151515;
}

.btn.orange:hover{
    background:var(--orange2);
    transform:translateY(-3px);
    box-shadow:0 12px 35px #ff8a0044;
}

.btn.ghost{
    border:1px solid #ffffff55;
    color:#fff;
}

.btn.ghost:hover{
    border-color:var(--orange);
    color:var(--orange);
    transform:translateY(-3px);
}

.float{
    position:absolute;
    z-index:2;
    overflow:hidden;
    border:1px solid #ff8a0066;
    box-shadow:0 0 35px #ff8a0022;
    filter:drop-shadow(0 18px 28px #0009);
}

.float img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.gen{
    width:310px;
    height:230px;
    right:9%;
    top:19%;
    transform:rotate(-2deg);
    animation:float 5s ease-in-out infinite;
}

.inv{
    width:185px;
    height:145px;
    right:3%;
    bottom:9%;
    transform:rotate(4deg);
    animation:float 4s ease-in-out 1s infinite;
}

.hero-glow{
    position:absolute;
    width:430px;
    height:430px;
    right:14%;
    top:3%;
    border-radius:50%;
    background:#ff8a0028;
    filter:blur(70px);
    z-index:-2;
}

.spark{
    position:absolute;
    width:4px;
    height:4px;
    background:var(--orange);
    box-shadow:0 0 13px var(--orange);
    animation:spark 4s linear infinite;
}

.s1{
    left:53%;
    top:25%;
}

.s2{
    left:73%;
    top:65%;
    animation-delay:1.2s;
}

.s3{
    left:83%;
    top:32%;
    animation-delay:2.3s;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.orbit,
.process,
.experts{
    position:relative;
    overflow:hidden;
    padding:105px 0;
}

.heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 55px;
    position:relative;
    z-index:3;
}

.heading.left{
    text-align:left;
    margin-left:0;
}

.heading h2{
    font-size:clamp(34px,4.3vw,56px);
    line-height:1;
    letter-spacing:-.045em;
    margin:13px 0;
}

.heading p{
    font-size:16px;
    line-height:1.75;
    color:var(--muted);
    margin:0 auto;
}

.dark .heading p{
    color:#aeb8bc;
}


/* =========================================================
   SECTION 2 - DIAGNOSTIC ORBIT
   ========================================================= */

.orbit-stage{
    height:620px;
    max-width:1080px;
    margin:auto;
    position:relative;
}

.orbit-stage>svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
}

.orbit-stage path{
    fill:none;
    stroke:#ff8a004d;
    stroke-width:2;
    stroke-dasharray:8 9;
    transition:.4s;
    filter:drop-shadow(0 0 3px #ff8a0033);
}

.orbit-stage path.active{
    stroke:var(--orange);
    stroke-width:4;
    filter:drop-shadow(0 0 8px #ff8a00);
}

.center{
    position:absolute;
    left:50%;
    top:50%;
    width:330px;
    height:330px;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
}

.center>i{
    position:absolute;
    border:1px solid #ff8a0055;
    border-radius:50%;
    animation:spin 15s linear infinite;
}

.center>i:first-child{
    inset:12px;
}

.center>i:nth-child(2){
    inset:-4px;
    border-style:dashed;
    animation-direction:reverse;
    animation-duration:21s;
}

.center>i:nth-child(3){
    inset:35px;
    animation-duration:9s;
}

.center figure{
    width:245px;
    height:245px;
    border-radius:50%;
    overflow:hidden;
    margin:0;
    position:relative;
    border:1px solid #ff8a00aa;
    box-shadow:0 0 55px #ff8a0035;
}

.center figure img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.center figcaption{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:linear-gradient(#0001,#000b);
    color:#fff;
}

.center figcaption small{
    color:var(--orange);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}

.center figcaption strong{
    font-size:23px;
}

.center figcaption b{
    color:var(--orange);
    font-size:20px;
    margin-top:8px;
}

.node{
    position:absolute;
    width:255px;
    min-height:96px;
    padding:14px 16px;
    display:flex;
    gap:12px;
    align-items:center;
    background:#0c1113d9;
    border:1px solid #ff8a0055;
    color:#fff;
    backdrop-filter:blur(9px);
    transition:.4s cubic-bezier(.16,1,.3,1);
}

.node:hover,
.node.active{
    transform:translateY(-7px) scale(1.035);
    border-color:var(--orange);
    box-shadow:
        0 0 30px #ff8a002e,
        0 15px 40px #0008;
}

.node>b{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--orange);
    color:var(--orange);
    font-size:18px;
    flex:none;
}

.node span{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.node small{
    color:var(--orange);
    font-size:9px;
    font-weight:800;
}

.node strong{
    font-size:14px;
}

.node em{
    font-style:normal;
    color:#aeb8bc;
    font-size:10px;
}

.n1{
    left:0;
    top:55px;
}

.n2{
    left:0;
    top:265px;
}

.n3{
    left:0;
    bottom:45px;
}

.n4{
    right:0;
    top:55px;
}

.n5{
    right:0;
    top:265px;
}

.n6{
    right:0;
    bottom:45px;
}


/* =========================================================
   SECTION 3 - MARQUEE
   ========================================================= */

.marquee{
    padding:100px 0 110px;
    overflow:hidden;
}

.marquee-window{
    overflow:hidden;
    position:relative;
}

.marquee-window:before,
.marquee-window:after{
    content:'';
    position:absolute;
    z-index:4;
    top:0;
    bottom:0;
    width:10%;
    pointer-events:none;
}

.marquee-window:before{
    left:0;
    background:linear-gradient(90deg,var(--bg),transparent);
}

.marquee-window:after{
    right:0;
    background:linear-gradient(270deg,var(--bg),transparent);
}

.track{
    display:flex;
    gap:18px;
    width:max-content;
    animation:marquee 34s linear infinite;
}

.marquee-window:hover .track{
    animation-play-state:paused;
}

.tile{
    width:290px;
    height:290px;
    flex:0 0 290px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    background:#151a1c;
}

.tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.tile:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 40%,#000c);
}

.tile b{
    position:absolute;
    z-index:2;
    left:18px;
    bottom:17px;
    color:#fff;
    font-size:11px;
    letter-spacing:.1em;
}

.tile:hover{
    border-color:var(--orange);
    box-shadow:0 20px 50px #ff8a002b;
}

.tile:hover img{
    transform:scale(1.1);
}


/* =========================================================
   SECTION 4 - TIMELINE
   ========================================================= */

.timeline{
    position:relative;
    max-width:900px;
    margin:auto;
}

.timeline:before{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:2px;
    background:#ff8a0038;
    transform:translateX(-50%);
}

.progress{
    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:0;
    background:linear-gradient(
        var(--orange),
        #ffb14a,
        var(--orange)
    );
    transform:translateX(-50%);
    box-shadow:0 0 15px var(--orange);
    z-index:2;
}

.step{
    position:relative;
    width:50%;
    min-height:150px;
    padding:0 58px 60px 0;
}

.step:nth-of-type(even){
    margin-left:50%;
    padding:0 0 60px 58px;
}

.step>b{
    position:absolute;
    right:-23px;
    top:0;
    width:46px;
    height:46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#151b1e;
    color:#fff;
    border:1px solid var(--orange);
    box-shadow:0 0 25px #ff8a0044;
    z-index:3;
    font-size:11px;
}

.step:nth-of-type(even)>b{
    left:-23px;
    right:auto;
}

.step.revealed>b{
    background:var(--orange);
    color:#111;
}

.step h3{
    font-size:21px;
    margin:7px 0;
}

.step p{
    margin:0;
    color:#aeb8bc;
    line-height:1.7;
    font-size:14px;
}


/* =========================================================
   SECTION 5 - SPLIT
   ========================================================= */

.solutions{
    padding:105px 0 115px;
}

.split{
    display:grid;
    grid-template-columns:1fr 55px 1fr;
    align-items:center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.service{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:center;
    padding:38px 0;
}

.service:first-child{
    padding-right:45px;
}

.service.inverter{
    padding-left:45px;
}

.service figure{
    margin:0;
    height:330px;
    position:relative;
    overflow:hidden;
    background:#151b1e;
    border:1px solid var(--line);
}

.service figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s;
}

.service:hover figure img{
    transform:scale(1.08);
}

.service figure i{
    position:absolute;
    inset:12%;
    border:1px solid #ff8a0055;
    transform:rotate(10deg);
    transition:.5s;
}

.service:hover figure i{
    transform:none;
    box-shadow:0 0 35px #ff8a0025;
}

.pcr-page .solutions .service figure{
    overflow:visible;
    background:transparent;
    border:0;
}

.pcr-page .solutions .service figure img{
    object-fit:contain;
}

.pcr-page .solutions .service:hover figure img{
    transform:none;
}

.pcr-page .solutions .service figure i{
    display:none;
}

.service h3{
    font-size:34px;
    letter-spacing:-.04em;
    margin:10px 0;
}

.service p{
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}

.service ul{
    list-style:none;
    padding:0;
    margin:18px 0;
    display:grid;
    gap:8px;
}

.service li{
    font-size:12px;
    font-weight:700;
}

.service li:before{
    content:'✓';
    color:var(--orange);
    margin-right:8px;
}

.service a{
    color:var(--orange);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    border-bottom:1px solid #ff8a0055;
    padding-bottom:6px;
}

.split-orb{
    width:46px;
    height:46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--orange);
    border:1px solid var(--orange);
    box-shadow:0 0 28px #ff8a0035;
    animation:pulse 2.2s infinite;
}


/* =========================================================
   SECTION 6 - EXPERTS
   ========================================================= */

.experts{
    padding:105px 0;
}

.expert-layout{
    display:grid;
    grid-template-columns:300px 1fr 175px;
    gap:42px;
    align-items:stretch;
}

.expert-image{
    height:auto;
    min-height:420px;
    margin:0;
    position:relative;
    border:1px solid #ff8a0055;
    overflow:hidden;
}

.expert-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.expert-image:hover img{
    transform:scale(1.07);
}

.expert-image b{
    position:absolute;
    right:0;
    bottom:0;
    background:#0c1113dd;
    color:var(--orange);
    padding:10px;
    font-size:9px;
    letter-spacing:.14em;
}

.points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.point{
    min-height:74px;
    padding:13px;
    border-left:2px solid #ff8a0055;
    display:flex;
    gap:11px;
    align-items:center;
    background:#ffffff05;
    transition:.35s;
}

.point:hover{
    border-color:var(--orange);
    transform:translateX(5px);
    background:#ff8a0008;
}

.point i{
    color:var(--orange);
    font-size:18px;
    width:25px;
    text-align:center;
}

.point b{
    font-size:11px;
    color:#fff;
}

.point small{
    display:block;
    color:#aeb8bc;
    letter-spacing:0;
    font-size:9px;
    margin-top:3px;
}

.stats{
    border:1px solid #ff8a0055;
    text-align:center;
    padding:22px;
    background:#0002;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.stats>small{
    color:var(--orange);
    font-weight:800;
    font-size:9px;
    letter-spacing:.15em;
}

.stats strong{
    display:block;
    color:var(--orange);
    font-size:31px;
    margin-top:18px;
}

.stats span{
    font-size:18px;
}

.stats em{
    font-style:normal;
    color:#aeb8bc;
    font-size:9px;
}


/* =========================================================
   SECTION 7 - EMERGENCY
   ========================================================= */

.emergency{
    min-height:470px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    color:#fff;
    background:#111;
}

.em-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            #050708ed,
            #0507087c,
            #050708ed
        ),
        url('../images/big-gnerator.jpg') center/cover;
}

.em-copy{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:780px;
}

.em-copy h2{
    font-size:clamp(36px,5vw,62px);
    line-height:1;
    letter-spacing:-.05em;
    margin:15px 0;
}

.em-copy p{
    font-size:16px;
    line-height:1.7;
    color:#e2e5e3;
}

.em-copy .actions{
    justify-content:center;
}

.power-orb{
    position:absolute;
    left:9%;
    top:50%;
    transform:translateY(-50%);
    width:145px;
    height:145px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--orange);
    font-size:50px;
    border:1px solid #ff8a00aa;
    box-shadow:
        0 0 0 13px #ff8a0008,
        0 0 65px #ff8a0038;
    animation:pulse 2.4s infinite;
}


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

.footer{
    background:#171d20;
    color:#fff;
    border-top:1px solid #ff8a0038;
}

.footer-grid{
    width:min(1500px,94%);
    margin:auto;
    padding:65px 0;
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr 1.1fr;
    gap:40px;
}

.footer p{
    color:#aeb8bc;
    font-size:12px;
    line-height:1.7;
}

.footer h3{
    font-size:14px;
}

.footer strong{
    font-size:10px;
    letter-spacing:.08em;
}

.footer strong em{
    color:var(--orange);
    font-style:normal;
}

.foot-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.foot-links.one{
    grid-template-columns:1fr;
}

.foot-links a{
    font-size:11px;
    color:#b8c0c2;
}

.foot-links a:hover{
    color:var(--orange);
}

form{
    display:flex;
    border:1px solid #ffffff22;
    margin-top:15px;
}

.footer input{
    flex:1;
    min-width:0;
    background:transparent;
    border:0;
    padding:11px;
    color:#fff;
    outline:0;
    font-size:11px;
}

.footer form button{
    border:0;
    background:var(--orange);
    font-weight:800;
    font-size:10px;
    padding:0 13px;
}

.footer #msg{
    display:block;
    color:var(--orange);
    margin-top:7px;
}

.bottom{
    width:min(1500px,94%);
    margin:auto;
    padding:16px 0;
    border-top:1px solid #ffffff0f;
    display:flex;
    justify-content:space-between;
    color:#778185;
    font-size:9px;
    letter-spacing:.08em;
}


/* =========================================================
   REVEAL + ANIMATIONS
   ========================================================= */

.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .75s cubic-bezier(.16,1,.3,1),
        transform .75s cubic-bezier(.16,1,.3,1);
}

.reveal.revealed{
    opacity:1;
    transform:none;
}

@keyframes float{
    0%,100%{
        translate:0 0;
    }

    50%{
        translate:0 -13px;
    }
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

@keyframes pulse{
    50%{
        box-shadow:
            0 0 0 16px #ff8a0004,
            0 0 48px #ff8a0066;
    }
}

@keyframes marquee{
    to{
        transform:translateX(-50%);
    }
}

@keyframes spark{
    0%{
        opacity:0;
        transform:translateY(25px);
    }

    30%,70%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translateY(-55px);
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media(max-width:1279px){

    .pc-links>a,
    .pc-drop>button{
        padding-inline:7px;
        font-size:13px;
    }

    .gen{
        width:260px;
        height:195px;
    }

    .orbit-stage{
        transform:scale(.95);
        transform-origin:top center;
        margin-bottom:-30px;
    }

    .expert-layout{
        grid-template-columns:260px 1fr 150px;
    }
}


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

@media(max-width:1023px){

    .pc-links,
    .enquire{
        display:none;
    }

    .hamb{
        display:block;
    }

    .mobile{
        position:fixed;
        inset:0;
        z-index:2000;
        background:var(--bg);
        display:flex;
        flex-direction:column;
        transform:translateX(100%);
        transition:.4s;
        overflow:auto;
    }

    .mobile.open{
        transform:none;
    }

    .mobile-head{
        height:78px;
        min-height:78px;
        padding:0 5%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-bottom:1px solid var(--line);
    }

    .mobile-head button{
        width:40px;
        height:40px;
        background:none;
        border:1px solid var(--line);
        color:var(--txt);
    }

    .mobile-links{
        padding:15px 5% 100px;
    }

    .mobile-links>a,
    .mobile-links summary{
        display:block;
        padding:16px 0;
        border-bottom:1px solid var(--line);
        font-weight:700;
    }

    .mobile-links details>a{
        display:block;
        padding:11px 0 11px 18px;
        color:var(--muted);
        font-size:13px;
    }

    .mobile-enquire{
        margin:auto 5% 20px;
        text-align:center;
    }

    .orbit-stage{
        height:720px;
    }

    .node{
        width:220px;
    }

    .n1,
    .n4{
        top:50px;
    }

    .n2,
    .n5{
        top:300px;
    }

    .n3,
    .n6{
        bottom:55px;
    }

    .center{
        width:280px;
        height:280px;
    }

    .center figure{
        width:205px;
        height:205px;
    }

    .split{
        grid-template-columns:1fr;
    }

    .split-orb{
        display:none;
    }

    .service:first-child,
    .service.inverter{
        padding-inline:0;
    }

    .expert-layout{
        grid-template-columns:240px 1fr;
    }

    .stats{
        grid-column:1/-1;
        display:flex;
        flex-direction:row;
        justify-content:center;
        gap:22px;
        align-items:center;
    }

    .stats strong{
        margin:0;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}


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

@media(max-width:767px){

    .pc-nav-inner{
        height:68px;
    }

    .pc-controls button{
        width:34px;
        height:34px;
    }

    .pc-brand b{
        width:32px;
        height:32px;
    }

    .pc-brand span{
        font-size:15px;
    }

    .wrap{
        width:92%;
    }

    .heading{
        margin-bottom:40px;
    }

    .heading h2{
        font-size:31px;
    }

    .heading p{
        font-size:14px;
    }

    .hero{
        min-height:65vh;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-copy{
        padding-bottom:150px;
    }

    .gen{
        width:175px;
        height:132px;
        right:-18px;
        top:auto;
        bottom:20px;
    }

    .inv{
        width:115px;
        height:90px;
        right:18px;
        bottom:5px;
    }

    .orbit,
    .process,
    .experts{
        padding:80px 0;
    }

    .orbit-stage{
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:13px;
        transform:none;
    }

    .orbit-stage>svg{
        display:none;
    }

    .center{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        width:235px;
        height:235px;
        margin-bottom:15px;
    }

    .center figure{
        width:170px;
        height:170px;
    }

    .node{
        position:relative;
        inset:auto!important;
        width:100%;
        min-height:82px;
        transform:none!important;
    }

    .node:hover{
        transform:translateY(-4px)!important;
    }

    .track{
        gap:12px;
    }

    .tile{
        width:215px;
        height:215px;
        flex-basis:215px;
    }

    .timeline{
        padding-left:27px;
    }

    .timeline:before{
        left:11px;
        transform:none;
    }

    .progress{
        left:9px;
        transform:none;
    }

    .step,
    .step:nth-of-type(even){
        width:100%;
        margin:0;
        padding:0 0 48px 40px;
    }

    .step>b,
    .step:nth-of-type(even)>b{
        left:-12px;
        right:auto;
        width:43px;
        height:43px;
    }

    .step h3{
        font-size:19px;
    }

    .step p{
        font-size:13px;
    }

    .service{
        grid-template-columns:1fr;
        gap:24px;
        padding:30px 0;
    }

    .service.inverter div{
        order:2;
    }

    .service.inverter figure{
        order:1;
    }

    .service figure{
        height:245px;
    }

    .expert-layout{
        grid-template-columns:1fr;
        gap:25px;
    }

    .expert-image{
        height:290px;
        min-height:0;
    }

    .points{
        grid-template-columns:1fr;
    }

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

    .stats strong{
        font-size:22px;
    }

    .stats em{
        font-size:8px;
    }

    .emergency{
        min-height:510px;
    }

    .power-orb{
        width:92px;
        height:92px;
        left:50%;
        top:15%;
        transform:translateX(-50%);
        font-size:30px;
    }

    .em-copy{
        padding-top:90px;
    }

    .em-copy h2{
        font-size:38px;
    }

    .em-copy p{
        font-size:14px;
    }

    .em-copy .actions{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .bottom{
        flex-direction:column;
        gap:8px;
    }
}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media(max-width:390px){

    .hero h1{
        font-size:37px;
    }

    .hero-copy{
        padding-bottom:135px;
    }

    .gen{
        width:145px;
        height:110px;
    }

    .inv{
        width:95px;
        height:74px;
    }

    .tile{
        width:195px;
        height:195px;
        flex-basis:195px;
    }

    .heading h2{
        font-size:28px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }

    .reveal{
        opacity:1!important;
        transform:none!important;
    }
}


/* =========================================================================
   SERVICE AREA — INTRO/CHIPS RESPONSIVE (forced, authoritative)
   Paste at the very end of assets/css/styles.css. Every property here
   is !important and this is the last .sva-intro-grid / .sva-chip rule
   in the file, so nothing else can override it, on any page state
   (light or dark mode).
   ========================================================================= */

@media (max-width: 1023px) {

    .sva-intro-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .sva-intro-chips {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 18px !important;
    }

    .sva-chip {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sva-chip-icon {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .sva-chip-text {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 0 !important;
    }

    .sva-chip-text strong,
    .sva-chip-text span {
        display: block !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

}

@media (max-width: 575px) {
    .sva-wrap {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
}

.sva-page {
    overflow-x: hidden !important;
}

/* =========================================================
   POWERCORE REPAIR
   SECTION 02 — DIAGNOSTIC FIELD REPLACEMENT
   Graphite / Expanded Square Core
   ========================================================= */

.pcr-diagnostic{
    --pcr-bg:#202A30;
    --pcr-bg-deep:#171E22;
    --pcr-bg-soft:#263238;
    --pcr-white:#F7F5F1;
    --pcr-muted:#A7B4BA;
    --pcr-orange:#FF8A00;
    --pcr-orange-hot:#FF9D2E;
    --pcr-amber:#E8B35B;
    --pcr-line:rgba(247,245,241,.12);

    position:relative;
    overflow:hidden;
    padding:92px 0 42px;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255,138,0,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #202A30 0%,
            #1B2327 48%,
            #151C20 100%
        );
    color:var(--pcr-white);
    isolation:isolate;
}


/* ---------------------------------------------------------
   TECHNICAL BACKGROUND
   --------------------------------------------------------- */

.pcr-diagnostic-grid{
    position:absolute;
    inset:0;
    z-index:-3;
    opacity:.20;
    pointer-events:none;
    background-image:
        linear-gradient(
            rgba(247,245,241,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(247,245,241,.045) 1px,
            transparent 1px
        );
    background-size:46px 46px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 16%,
            #000 82%,
            transparent 100%
        );
}


.pcr-diagnostic::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            transparent 0 8%,
            rgba(255,138,0,.05) 8% 8.1%,
            transparent 8.1% 91.9%,
            rgba(255,138,0,.05) 91.9% 92%,
            transparent 92%
        );
}


.pcr-diagnostic-glow{
    position:absolute;
    width:460px;
    height:460px;
    border-radius:50%;
    pointer-events:none;
    filter:blur(100px);
    opacity:.16;
    z-index:-1;
}


.pcr-diagnostic-glow-one{
    left:24%;
    top:30%;
    background:#FF8A00;
}


.pcr-diagnostic-glow-two{
    right:18%;
    bottom:12%;
    background:#E8B35B;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.pcr-diagnostic-heading{
    max-width:900px;
    margin:0 auto 30px;
    text-align:center;
}


.pcr-diagnostic-kicker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    color:var(--pcr-orange);
    font-size:10px;
    font-weight:800;
    letter-spacing:.22em;
}


.pcr-diagnostic-kicker span{
    width:34px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--pcr-orange)
    );
}


.pcr-diagnostic-kicker span:last-child{
    background:linear-gradient(
        90deg,
        var(--pcr-orange),
        transparent
    );
}


.pcr-diagnostic-heading h2{
    margin:16px 0 12px;
    color:var(--pcr-white);
    font-size:clamp(38px,5vw,64px);
    line-height:.96;
    letter-spacing:-.055em;
    font-weight:800;
}


.pcr-diagnostic-heading h2 em{
    display:block;
    color:var(--pcr-orange);
    font-style:normal;
}


.pcr-diagnostic-heading p{
    max-width:680px;
    margin:0 auto;
    color:#AEB8BC;
    font-size:15px;
    line-height:1.75;
}


/* ---------------------------------------------------------
   TELEMETRY
   --------------------------------------------------------- */

.pcr-diagnostic-telemetry{
    min-height:58px;
    display:grid;
    grid-template-columns:
        1fr
        1fr
        1fr
        1fr
        90px;
    align-items:center;
    margin-bottom:22px;
    border-top:1px solid var(--pcr-line);
    border-bottom:1px solid var(--pcr-line);
    background:rgba(0,0,0,.13);
}


.pcr-diagnostic-telemetry > div{
    min-height:40px;
    padding:8px 18px;
    border-right:1px solid var(--pcr-line);
}


.pcr-diagnostic-telemetry small{
    display:block;
    margin-bottom:3px;
    color:#78868C;
    font-size:8px;
    font-weight:800;
    letter-spacing:.15em;
}


.pcr-diagnostic-telemetry strong{
    color:var(--pcr-white);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}


.status-live{
    display:flex;
    align-items:center;
    gap:7px;
}


.status-live i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--pcr-orange);
    box-shadow:0 0 0 5px rgba(255,138,0,.08),
               0 0 12px rgba(255,138,0,.65);
    animation:pcr-status-pulse 1.7s ease-in-out infinite;
}


.telemetry-code{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:var(--pcr-orange);
}


.telemetry-code span{
    font-size:12px;
    font-weight:800;
}


.telemetry-code b{
    color:var(--pcr-white);
    font-size:11px;
}


/* ---------------------------------------------------------
   MAIN FIELD
   --------------------------------------------------------- */

.pcr-diagnostic-field{
    position:relative;
    min-height:570px;
    display:grid;
    grid-template-columns:
        minmax(250px,1fr)
        minmax(500px,1.55fr)
        minmax(250px,1fr);
    gap:28px;
    align-items:center;
}


/* ---------------------------------------------------------
   LEFT / RIGHT COLUMNS
   --------------------------------------------------------- */

.pcr-diagnostic-column{
    position:relative;
    z-index:5;
    height:570px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:18px;
}


.pcr-diagnostic-left{
    padding:10px 0 10px 0;
}


.pcr-diagnostic-right{
    padding:10px 0 10px 0;
}


/* ---------------------------------------------------------
   DIAGNOSTIC NODE
   --------------------------------------------------------- */

.pcr-diagnostic-node{
    position:relative;
    min-height:145px;
    display:grid;
    grid-template-columns:36px 50px minmax(0,1fr) 24px;
    align-items:center;
    gap:12px;
    padding:20px 18px;
    overflow:hidden;
    color:var(--pcr-white);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018)
        );
    border:1px solid rgba(247,245,241,.13);
    border-left:2px solid rgba(255,138,0,.32);
    backdrop-filter:blur(12px);
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


.pcr-diagnostic-right .pcr-diagnostic-node{
    border-left:1px solid rgba(247,245,241,.13);
    border-right:2px solid rgba(255,138,0,.32);
}


.pcr-diagnostic-node::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:linear-gradient(
        90deg,
        var(--pcr-orange),
        transparent 65%
    );
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s ease;
}


.pcr-diagnostic-right .pcr-diagnostic-node::before{
    background:linear-gradient(
        270deg,
        var(--pcr-orange),
        transparent 65%
    );
    transform-origin:right;
}


.pcr-diagnostic-node::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-50px;
    bottom:-60px;
    border-radius:50%;
    background:rgba(255,138,0,.10);
    filter:blur(20px);
    transition:.45s ease;
}


.pcr-diagnostic-node:hover,
.pcr-diagnostic-node:focus-visible{
    transform:translateY(-7px);
    border-color:rgba(255,138,0,.65);
    background:
        linear-gradient(
            135deg,
            rgba(255,138,0,.12),
            rgba(255,255,255,.035)
        );
    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        0 0 35px rgba(255,138,0,.08);
    outline:none;
}


.pcr-diagnostic-node:hover::before,
.pcr-diagnostic-node:focus-visible::before{
    transform:scaleX(1);
}


.pcr-diagnostic-node:hover::after,
.pcr-diagnostic-node:focus-visible::after{
    width:160px;
    height:160px;
    right:-75px;
    bottom:-95px;
}


.pcr-node-index{
    align-self:start;
    color:#77858A;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}


.pcr-node-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    color:var(--pcr-orange);
    border:1px solid rgba(255,138,0,.55);
    background:rgba(255,138,0,.06);
    font-size:19px;
    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}


.pcr-diagnostic-node:hover .pcr-node-icon,
.pcr-diagnostic-node:focus-visible .pcr-node-icon{
    background:var(--pcr-orange);
    color:#171B1D;
    box-shadow:0 0 28px rgba(255,138,0,.28);
    transform:rotate(-4deg) scale(1.05);
}


.pcr-node-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}


.pcr-node-copy small{
    color:var(--pcr-orange);
    font-size:8px;
    font-weight:800;
    letter-spacing:.14em;
}


.pcr-node-copy strong{
    color:var(--pcr-white);
    font-size:15px;
    line-height:1.25;
    font-weight:800;
}


.pcr-node-copy em{
    color:#87949A;
    font-size:9px;
    line-height:1.4;
    font-style:normal;
}


.pcr-node-arrow{
    align-self:start;
    color:#6F7D82;
    font-size:15px;
    transition:
        color .3s ease,
        transform .3s ease;
}


.pcr-diagnostic-node:hover .pcr-node-arrow,
.pcr-diagnostic-node:focus-visible .pcr-node-arrow{
    color:var(--pcr-orange);
    transform:translate(3px,-3px);
}


/* ---------------------------------------------------------
   CENTER CORE
   --------------------------------------------------------- */

.pcr-diagnostic-core{
    position:relative;
    z-index:4;
    width:100%;
    aspect-ratio:1 / 1;
    max-width:570px;
    margin:auto;
    display:grid;
    place-items:center;
}


.pcr-core-image{
    position:relative;
    width:calc(100% - 38px);
    height:calc(100% - 38px);
    margin:0;
    overflow:hidden;
    background:#11171A;
    border:1px solid rgba(255,138,0,.68);
    box-shadow:
        0 0 0 1px rgba(255,138,0,.08),
        0 25px 75px rgba(0,0,0,.38),
        0 0 70px rgba(255,138,0,.10);
}


.pcr-core-image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    border:1px solid rgba(247,245,241,.10);
}


.pcr-core-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform 1.1s cubic-bezier(.16,1,.3,1),
        filter .8s ease;
}


.pcr-diagnostic-core:hover .pcr-core-image img{
    transform:scale(1.055);
    filter:saturate(1.08) contrast(1.04);
}


.pcr-core-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    background:
        linear-gradient(
            180deg,
            rgba(7,9,10,.08),
            rgba(7,9,10,.18) 45%,
            rgba(7,9,10,.88) 100%
        );
    pointer-events:none;
}


.pcr-core-scan{
    position:absolute;
    z-index:7;
    left:19px;
    right:19px;
    top:19px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,138,0,.15),
        var(--pcr-orange),
        rgba(255,138,0,.15),
        transparent
    );
    box-shadow:0 0 18px rgba(255,138,0,.65);
    animation:pcr-core-scan 4.2s ease-in-out infinite;
    pointer-events:none;
}


.pcr-core-image figcaption{
    position:absolute;
    z-index:5;
    left:28px;
    right:28px;
    bottom:25px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


.pcr-core-image figcaption small{
    color:var(--pcr-orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;
}


.pcr-core-image figcaption strong{
    margin-top:5px;
    color:#fff;
    font-size:clamp(34px,4vw,52px);
    line-height:.9;
    letter-spacing:-.055em;
    font-weight:800;
}


.pcr-core-image figcaption span{
    margin-top:10px;
    color:#BAC3C6;
    font-size:8px;
    font-weight:800;
    letter-spacing:.16em;
}


.pcr-core-image figcaption b{
    color:var(--pcr-orange);
    font-size:14px;
    margin:0 5px;
}


/* ---------------------------------------------------------
   CENTER ANGULAR FRAME
   --------------------------------------------------------- */

.pcr-core-corner{
    position:absolute;
    z-index:8;
    width:35px;
    height:35px;
    pointer-events:none;
}


.pcr-core-corner::before,
.pcr-core-corner::after{
    content:"";
    position:absolute;
    background:var(--pcr-orange);
    box-shadow:0 0 12px rgba(255,138,0,.35);
}


.pcr-core-corner::before{
    width:35px;
    height:2px;
}


.pcr-core-corner::after{
    width:2px;
    height:35px;
}


.pcr-core-corner-tl{
    left:0;
    top:0;
}


.pcr-core-corner-tr{
    right:0;
    top:0;
    transform:scaleX(-1);
}


.pcr-core-corner-bl{
    left:0;
    bottom:0;
    transform:scaleY(-1);
}


.pcr-core-corner-br{
    right:0;
    bottom:0;
    transform:scale(-1);
}


/* ---------------------------------------------------------
   CORE LABELS
   --------------------------------------------------------- */

.pcr-core-label{
    position:absolute;
    z-index:9;
    display:flex;
    align-items:center;
    gap:6px;
    color:#7F8D92;
    font-size:8px;
    font-weight:800;
    letter-spacing:.14em;
}


.pcr-core-label span{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    color:var(--pcr-orange);
    border:1px solid rgba(255,138,0,.45);
    background:#202A30;
    font-size:8px;
}


.pcr-core-label-top{
    top:-12px;
    left:50%;
    transform:translateX(-50%);
}


.pcr-core-label-right{
    right:-17px;
    top:50%;
    transform:translateY(-50%) rotate(90deg);
}


.pcr-core-label-bottom{
    bottom:-12px;
    left:50%;
    transform:translateX(-50%);
}


.pcr-core-label-left{
    left:-17px;
    top:50%;
    transform:translateY(-50%) rotate(-90deg);
}


/* ---------------------------------------------------------
   CONNECTOR LINES
   --------------------------------------------------------- */

.pcr-diagnostic-connectors{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
}


.pcr-connector{
    position:absolute;
    height:1px;
    width:calc(
        (100% - 590px) / 2
    );
    max-width:210px;
    background:
        linear-gradient(
            90deg,
            rgba(255,138,0,.10),
            rgba(255,138,0,.62)
        );
    transform-origin:left center;
}


.pcr-connector::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--pcr-orange);
    transform:translateY(-50%);
    box-shadow:
        0 0 12px rgba(255,138,0,.8),
        0 0 28px rgba(255,138,0,.28);
}


.pcr-connector-l1,
.pcr-connector-l2,
.pcr-connector-l3{
    right:calc(50% + 285px);
    transform-origin:right center;
    background:
        linear-gradient(
            270deg,
            rgba(255,138,0,.10),
            rgba(255,138,0,.62)
        );
}


.pcr-connector-l1{
    top:19%;
    transform:rotate(12deg);
}


.pcr-connector-l2{
    top:50%;
}


.pcr-connector-l3{
    top:81%;
    transform:rotate(-12deg);
}


.pcr-connector-r1{
    left:calc(50% + 285px);
    top:19%;
    transform:rotate(-12deg);
}


.pcr-connector-r2{
    left:calc(50% + 285px);
    top:50%;
}


.pcr-connector-r3{
    left:calc(50% + 285px);
    top:81%;
    transform:rotate(12deg);
}


.pcr-connector-l1::after,
.pcr-connector-l2::after,
.pcr-connector-l3::after{
    right:auto;
    left:0;
}


.pcr-connector-l1,
.pcr-connector-l2,
.pcr-connector-l3{
    animation:pcr-connector-pulse 2.8s ease-in-out infinite;
}


.pcr-connector-r1,
.pcr-connector-r2,
.pcr-connector-r3{
    animation:pcr-connector-pulse 2.8s ease-in-out infinite;
}


.pcr-connector-l2,
.pcr-connector-r2{
    animation-delay:.45s;
}


.pcr-connector-l3,
.pcr-connector-r3{
    animation-delay:.9s;
}


/* ---------------------------------------------------------
   STATUS BAR
   --------------------------------------------------------- */

.pcr-diagnostic-status{
    min-height:62px;
    margin-top:22px;
    display:grid;
    grid-template-columns:1.2fr repeat(5,1fr) 1.1fr;
    align-items:center;
    border-top:1px solid var(--pcr-line);
    border-bottom:1px solid var(--pcr-line);
    background:rgba(0,0,0,.14);
}


.pcr-status-title,
.pcr-status-item,
.pcr-status-code{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0 15px;
    border-right:1px solid var(--pcr-line);
}


.pcr-status-title{
    gap:8px;
    color:var(--pcr-orange);
    font-size:8px;
    font-weight:800;
    letter-spacing:.14em;
}


.pcr-status-title > span{
    width:6px;
    height:6px;
    background:var(--pcr-orange);
    border-radius:50%;
    box-shadow:0 0 12px rgba(255,138,0,.75);
}


.pcr-status-item{
    gap:7px;
    flex-wrap:wrap;
}


.pcr-status-item i{
    width:6px;
    height:6px;
    flex:none;
    border-radius:50%;
    background:#5D6A70;
}


.pcr-status-item:not(.is-checking) i{
    background:#7BB68B;
    box-shadow:0 0 8px rgba(123,182,139,.55);
}


.pcr-status-item.is-checking i{
    background:var(--pcr-orange);
    box-shadow:0 0 9px rgba(255,138,0,.65);
    animation:pcr-status-pulse 1.5s infinite;
}


.pcr-status-item span{
    color:#78868C;
    font-size:7px;
    font-weight:800;
    letter-spacing:.1em;
}


.pcr-status-item b{
    color:var(--pcr-white);
    font-size:7px;
    font-weight:800;
}


.pcr-status-item.is-checking b{
    color:var(--pcr-orange);
}


.pcr-status-code{
    justify-content:center;
    color:#69777C;
    border-right:0;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes pcr-status-pulse{
    0%,100%{
        opacity:.45;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }
}


@keyframes pcr-core-scan{
    0%{
        top:19px;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    50%{
        top:calc(100% - 20px);
        opacity:1;
    }

    62%,100%{
        top:calc(100% - 20px);
        opacity:0;
    }
}


@keyframes pcr-connector-pulse{
    0%,100%{
        opacity:.35;
    }

    50%{
        opacity:1;
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width:1199px){

    .pcr-diagnostic{
        padding-top:82px;
    }

    .pcr-diagnostic-field{
        grid-template-columns:
            minmax(215px,1fr)
            minmax(430px,1.5fr)
            minmax(215px,1fr);
        gap:18px;
    }

    .pcr-diagnostic-core{
        max-width:490px;
    }

    .pcr-core-image{
        width:calc(100% - 30px);
        height:calc(100% - 30px);
    }

    .pcr-diagnostic-column{
        height:500px;
    }

    .pcr-diagnostic-node{
        min-height:125px;
        grid-template-columns:26px 42px minmax(0,1fr) 16px;
        gap:9px;
        padding:15px 12px;
    }

    .pcr-node-icon{
        width:42px;
        height:42px;
    }

    .pcr-node-copy strong{
        font-size:13px;
    }

    .pcr-node-copy em{
        font-size:8px;
    }

    .pcr-connector{
        max-width:145px;
        width:calc((100% - 510px) / 2);
    }

    .pcr-connector-l1,
    .pcr-connector-l2,
    .pcr-connector-l3{
        right:calc(50% + 245px);
    }

    .pcr-connector-r1,
    .pcr-connector-r2,
    .pcr-connector-r3{
        left:calc(50% + 245px);
    }

    .pcr-diagnostic-status{
        grid-template-columns:1.1fr repeat(5,1fr);
    }

    .pcr-status-code{
        display:none;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   --------------------------------------------------------- */

@media (max-width:991px){

    .pcr-diagnostic-field{
        min-height:760px;
        grid-template-columns:1fr 1.25fr;
        grid-template-rows:auto auto;
        align-items:stretch;
    }

    .pcr-diagnostic-core{
        grid-column:1 / -1;
        grid-row:1;
        width:min(540px,100%);
        max-width:540px;
    }

    .pcr-diagnostic-left,
    .pcr-diagnostic-right{
        height:430px;
        padding:0;
    }

    .pcr-diagnostic-left{
        grid-column:1;
        grid-row:2;
    }

    .pcr-diagnostic-right{
        grid-column:2;
        grid-row:2;
    }

    .pcr-diagnostic-node{
        min-height:126px;
    }

    .pcr-diagnostic-connectors{
        display:none;
    }

    .pcr-diagnostic-status{
        grid-template-columns:repeat(5,1fr);
    }

    .pcr-status-title{
        grid-column:1 / -1;
        border-right:0;
        border-bottom:1px solid var(--pcr-line);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:767px){

    .pcr-diagnostic{
        padding:72px 0 30px;
    }

    .pcr-diagnostic-heading{
        margin-bottom:24px;
    }

    .pcr-diagnostic-kicker{
        font-size:8px;
        letter-spacing:.16em;
    }

    .pcr-diagnostic-heading h2{
        font-size:36px;
        margin-top:14px;
    }

    .pcr-diagnostic-heading p{
        font-size:13px;
    }

    .pcr-diagnostic-telemetry{
        grid-template-columns:1fr 1fr;
        gap:0;
    }

    .pcr-diagnostic-telemetry > div{
        min-height:48px;
        padding:9px 12px;
    }

    .pcr-diagnostic-telemetry > div:nth-child(2){
        border-right:0;
    }

    .pcr-diagnostic-telemetry > div:nth-child(3){
        border-top:1px solid var(--pcr-line);
    }

    .pcr-diagnostic-telemetry > div:nth-child(4){
        border-top:1px solid var(--pcr-line);
        border-right:0;
    }

    .pcr-diagnostic-telemetry .telemetry-code{
        display:none;
    }

    .pcr-diagnostic-field{
        min-height:0;
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .pcr-diagnostic-core{
        order:1;
        width:100%;
        max-width:none;
        aspect-ratio:1 / 1;
    }

    .pcr-diagnostic-left{
        order:2;
        height:auto;
        gap:10px;
    }

    .pcr-diagnostic-right{
        order:3;
        height:auto;
        gap:10px;
    }

    .pcr-diagnostic-node{
        min-height:92px;
        grid-template-columns:28px 42px minmax(0,1fr) 16px;
        padding:12px 10px;
        gap:8px;
    }

    .pcr-node-icon{
        width:40px;
        height:40px;
        font-size:16px;
    }

    .pcr-node-copy small{
        font-size:7px;
    }

    .pcr-node-copy strong{
        font-size:13px;
    }

    .pcr-node-copy em{
        font-size:8px;
    }

    .pcr-node-arrow{
        font-size:13px;
    }

    .pcr-core-label{
        display:none;
    }

    .pcr-core-image{
        width:calc(100% - 26px);
        height:calc(100% - 26px);
    }

    .pcr-core-image figcaption{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .pcr-core-image figcaption strong{
        font-size:38px;
    }

    .pcr-diagnostic-status{
        margin-top:18px;
        grid-template-columns:1fr 1fr;
    }

    .pcr-status-title{
        grid-column:1 / -1;
    }

    .pcr-status-item{
        min-height:42px;
    }

    .pcr-status-item:nth-child(3),
    .pcr-status-item:nth-child(5){
        border-right:0;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width:480px){

    .pcr-diagnostic-heading h2{
        font-size:32px;
    }

    .pcr-diagnostic-heading p{
        font-size:12px;
    }

    .pcr-diagnostic-telemetry strong{
        font-size:9px;
    }

    .pcr-diagnostic-node{
        min-height:88px;
    }

    .pcr-node-index{
        font-size:8px;
    }

    .pcr-node-icon{
        width:36px;
        height:36px;
    }

    .pcr-node-copy strong{
        font-size:12px;
    }

    .pcr-node-copy em{
        font-size:7px;
    }

    .pcr-core-image figcaption strong{
        font-size:34px;
    }

}


/* ---------------------------------------------------------
   320PX MOBILE
   --------------------------------------------------------- */

@media (max-width:380px){

    .pcr-diagnostic{
        padding-top:62px;
    }

    .pcr-diagnostic-heading h2{
        font-size:29px;
    }

    .pcr-diagnostic-heading p{
        font-size:11px;
    }

    .pcr-diagnostic-node{
        grid-template-columns:22px 34px minmax(0,1fr) 12px;
        gap:6px;
        padding:10px 8px;
    }

    .pcr-node-icon{
        width:32px;
        height:32px;
        font-size:14px;
    }

    .pcr-node-copy small{
        font-size:6px;
    }

    .pcr-node-copy strong{
        font-size:11px;
    }

    .pcr-node-copy em{
        font-size:6.5px;
    }

    .pcr-core-image figcaption strong{
        font-size:29px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .pcr-diagnostic *,
    .pcr-diagnostic *::before,
    .pcr-diagnostic *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}

.pcr-page .pcr-diagnostic-heading h2,
.pcr-page .heading h2,
.pcr-page .em-copy h2{
    font-family:Manrope,sans-serif;
    font-size:clamp(30px,4vw,52px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.04em;
}

.pcr-page .hero p,
.pcr-page .pcr-diagnostic-heading p,
.pcr-page .heading p,
.pcr-page .em-copy p{
    font-size:18px;
    line-height:1.7;
}

.pcr-page .step p,
.pcr-page .service p{
    font-size:16px;
    line-height:1.7;
}

.pcr-page .service li{
    font-size:14px;
    line-height:1.5;
}

.pcr-page .service a{
    font-size:12px;
}

.pcr-page .point b{
    font-size:14px;
    line-height:1.45;
}

.pcr-page .point small,
.pcr-page .stats em{
    font-size:12px;
    line-height:1.5;
}

.pcr-page .stats>small{
    font-size:11px;
}

.pcr-page .pcr-diagnostic-telemetry small{
    font-size:9px;
}

.pcr-page .pcr-diagnostic-telemetry strong{
    font-size:11px;
}

.pcr-page .pcr-node-copy small{
    font-size:10px;
}

.pcr-page .pcr-node-copy strong{
    font-size:16px;
}

.pcr-page .pcr-node-copy em{
    font-size:12px;
}

.amc-plan-list li,
.amc-coverage-points li,
.sva-chip,
.sva-quote-person {
    min-width: 0;
}

.amc-faq-q {
    min-width: 0;
    white-space: normal;
}

.amc-plan-list li > *:last-child,
.amc-coverage-points li > *:last-child {
    min-width: 0;
    overflow-wrap: break-word;
}

/* =========================================================
   AMC PLANS — FAQ OVERFLOW FIX (forced, authoritative)
   Below 1280px this drops the grid entirely so there is no
   track/min-width interaction left to go wrong.
   ========================================================= */

@media (max-width: 1279px) {

    .amc-faq-layout {
        display: block !important;
    }

    .amc-faq-cta {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
        box-sizing: border-box !important;
    }

    .amc-faq-list {
        width: 100% !important;
        max-width: 100% !important;
    }

}

.amc-faq-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.amc-faq-q {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.amc-faq-a,
.amc-faq-a p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.amc-faq-cta,
.amc-faq-cta * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* =========================================================
   POWERCORE 404 PAGE
   PAGE-SCOPED STYLES ONLY

   File:
   pages/404/styles.css

   No global POWERCORE components are modified.
   ========================================================= */


/* =========================================================
   PAGE RESET
   ========================================================= */

.pc404-page {

    margin: 0;

    min-height: 100vh;

    overflow-x: hidden;

    font-family: "Manrope", sans-serif;

    background:
        var(--pc404-bg);

    color:
        var(--pc404-text);

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.pc404-page a {

    color: inherit;

    text-decoration: none;

}


.pc404-page button,
.pc404-page a {

    -webkit-tap-highlight-color: transparent;

}


.pc404-page button:focus-visible,
.pc404-page a:focus-visible {

    outline:
        2px solid
        var(--pc404-accent);

    outline-offset: 4px;

}


/* =========================================================
   TOP CONTROLS
   ========================================================= */

.pc404-controls {

    position: absolute;

    top: 24px;

    right: 32px;

    z-index: 50;

    display: flex;

    align-items: center;

    gap: 7px;

}


/* =========================================================
   THEME BUTTON
   ========================================================= */

.pc404-controls .pc-theme-toggle,
.pc404-controls .pc-rtl-toggle {

    border:
        1px solid
        var(--pc404-border);

    background:
        var(--pc404-control-bg);

    color:
        var(--pc404-text);

    font-family:
        "Manrope",
        sans-serif;

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        color .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.pc404-controls .pc-theme-toggle {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

}


.pc404-controls .pc-rtl-toggle {

    width: 48px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 800;

}


.pc404-controls .pc-theme-toggle:hover,
.pc404-controls .pc-rtl-toggle:hover {

    color:
        var(--pc404-accent);

    border-color:
        var(--pc404-accent);

    box-shadow:
        0 0 20px
        var(--pc404-accent-glow);

}


.pc404-controls .pc-theme-toggle:active,
.pc404-controls .pc-rtl-toggle:active {

    transform:
        scale(.94);

}


/* =========================================================
   MAIN
   ========================================================= */

.pc404-main {

    position: relative;

    min-height: 100vh;

    min-height: 100svh;

    display: grid;

    place-items: center;

    padding:
        110px
        40px
        60px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 48%,
            var(--pc404-center-glow),
            transparent 31%
        ),

        radial-gradient(
            circle at 12% 85%,
            var(--pc404-side-glow),
            transparent 25%
        ),

        radial-gradient(
            circle at 88% 12%,
            var(--pc404-side-glow),
            transparent 23%
        ),

        var(--pc404-bg);

}


/* =========================================================
   TECH GRID
   ========================================================= */

.pc404-grid {

    position: absolute;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    background-image:

        linear-gradient(
            var(--pc404-grid-line) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--pc404-grid-line) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 15%,
            transparent 82%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 15%,
            transparent 82%
        );

    opacity: .8;

}


/* =========================================================
   AMBIENT GLOW
   ========================================================= */

.pc404-glow {

    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;

    background:
        var(--pc404-glow-color);

    filter:
        blur(90px);

    animation:
        pc404-glow-pulse
        5s
        ease-in-out
        infinite;

}


.pc404-glow-one {

    width: 420px;

    height: 420px;

    left: -150px;

    top: 35%;

}


.pc404-glow-two {

    width: 360px;

    height: 360px;

    right: -130px;

    bottom: -100px;

    animation-delay:
        1.6s;

}


/* =========================================================
   PARTICLES
   ========================================================= */

.pc404-particles {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

}


.pc404-particles span {

    position: absolute;

    display: block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background:
        var(--pc404-accent);

    box-shadow:
        0 0 8px
        var(--pc404-accent),

        0 0 20px
        var(--pc404-accent);

    animation:
        pc404-particle
        5s
        linear
        infinite;

    opacity: 0;

}


.pc404-particles span:nth-child(1) {
    left: 14%;
    top: 70%;
    animation-delay: .2s;
}

.pc404-particles span:nth-child(2) {
    left: 25%;
    top: 25%;
    animation-delay: 1.1s;
}

.pc404-particles span:nth-child(3) {
    left: 38%;
    top: 78%;
    animation-delay: 2s;
}

.pc404-particles span:nth-child(4) {
    left: 52%;
    top: 18%;
    animation-delay: .7s;
}

.pc404-particles span:nth-child(5) {
    left: 67%;
    top: 72%;
    animation-delay: 2.7s;
}

.pc404-particles span:nth-child(6) {
    left: 78%;
    top: 30%;
    animation-delay: 1.8s;
}

.pc404-particles span:nth-child(7) {
    left: 88%;
    top: 62%;
    animation-delay: 3.2s;
}

.pc404-particles span:nth-child(8) {
    left: 8%;
    top: 42%;
    animation-delay: 3.8s;
}


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

.pc404-content {

    position: relative;

    z-index: 10;

    width:
        min(900px, 100%);

    margin-inline: auto;

    text-align: center;

}


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

.pc404-system-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-bottom: 28px;

    color:
        var(--pc404-muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .2em;

}


.pc404-label-line {

    width: 38px;

    height: 1px;

    background:
        var(--pc404-accent);

    box-shadow:
        0 0 10px
        var(--pc404-accent);

}


/* =========================================================
   404 NUMBER
   ========================================================= */

.pc404-number-wrap {

    position: relative;

    width:
        min(800px, 100%);

    height:
        clamp(170px, 24vw, 275px);

    margin:
        0
        auto
        8px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* subtle background number */

.pc404-number-shadow {

    position: absolute;

    inset: 50% auto auto 50%;

    transform:
        translate(-50%, -50%);

    color:
        var(--pc404-shadow-number);

    font-size:
        clamp(
            160px,
            23vw,
            290px
        );

    line-height: .8;

    font-weight: 800;

    letter-spacing:
        -.09em;

    user-select: none;

}


/* actual number */

.pc404-number {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(8px, 2vw, 20px);

    color:
        var(--pc404-number);

    font-size:
        clamp(
            105px,
            17vw,
            205px
        );

    line-height: .8;

    font-weight: 800;

    letter-spacing:
        -.08em;

    text-shadow:
        0 0 35px
        var(--pc404-number-glow);

    animation:
        pc404-number-enter
        1s
        cubic-bezier(.16,1,.3,1)
        both;

}


/* =========================================================
   ZERO — POWER CORE
   ========================================================= */

.pc404-zero {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:
        clamp(
            82px,
            13vw,
            155px
        );

    height:
        clamp(
            82px,
            13vw,
            155px
        );

    border:
        clamp(7px, 1vw, 12px)
        solid
        var(--pc404-accent);

    border-radius: 50%;

    box-shadow:

        0 0 0 6px
        var(--pc404-ring-soft),

        0 0 28px
        var(--pc404-accent-glow),

        0 0 70px
        var(--pc404-accent-glow-soft);

    animation:
        pc404-core-pulse
        3s
        ease-in-out
        infinite;

}


.pc404-zero::before {

    content: "";

    position: absolute;

    inset:
        -16px;

    border:
        1px dashed
        var(--pc404-ring);

    border-radius: 50%;

    animation:
        pc404-ring-spin
        8s
        linear
        infinite;

}


.pc404-zero::after {

    content: "";

    position: absolute;

    inset:
        -29px;

    border:
        1px solid
        var(--pc404-ring-faint);

    border-radius: 50%;

}


.pc404-zero i {

    position: relative;

    width:
        17px;

    height:
        17px;

    border-radius: 50%;

    background:
        var(--pc404-accent);

    box-shadow:

        0 0 10px
        var(--pc404-accent),

        0 0 30px
        var(--pc404-accent),

        0 0 60px
        var(--pc404-accent);

    animation:
        pc404-core-dot
        2s
        ease-in-out
        infinite;

}


/* =========================================================
   ENERGY LINE
   ========================================================= */

.pc404-energy-line {

    position: absolute;

    left: 8%;

    right: 8%;

    bottom: 12px;

    height: 2px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pc404-accent),
            transparent
        );

    box-shadow:
        0 0 10px
        var(--pc404-accent-glow);

}


.pc404-energy-line::after {

    content: "";

    position: absolute;

    top: 50%;

    left: -15%;

    width: 90px;

    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pc404-accent),
            #FFF1D8,
            var(--pc404-accent),
            transparent
        );

    box-shadow:
        0 0 15px
        var(--pc404-accent),

        0 0 35px
        var(--pc404-accent);

    animation:
        pc404-energy-run
        3.5s
        linear
        infinite;

}


/* =========================================================
   MESSAGE
   ========================================================= */

.pc404-message {

    animation:
        pc404-message-enter
        .9s
        .15s
        cubic-bezier(.16,1,.3,1)
        both;

}


.pc404-kicker {

    display: block;

    margin-top: 20px;

    margin-bottom: 13px;

    color:
        var(--pc404-accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .2em;

}


.pc404-message h1 {

    margin: 0;

    color:
        var(--pc404-text);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height: 1.05;

    letter-spacing:
        -.045em;

    font-weight: 800;

}


.pc404-message h1 strong {

    color:
        var(--pc404-accent);

    font-weight: 800;

}


.pc404-message p {

    width:
        min(580px, 100%);

    margin:
        18px
        auto
        0;

    color:
        var(--pc404-muted);

    font-size:
        clamp(
            14px,
            1.35vw,
            17px
        );

    line-height: 1.75;

}


/* =========================================================
   ACTIONS
   ========================================================= */

.pc404-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 30px;

    animation:
        pc404-message-enter
        .9s
        .28s
        cubic-bezier(.16,1,.3,1)
        both;

}


.pc404-primary,
.pc404-secondary {

    min-height: 50px;

    padding:
        0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .02em;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.pc404-page .pc404-primary {

    background:
        var(--pc404-accent);

    border:
        1px solid
        var(--pc404-accent);

    color:
        var(--pc404-button-text);

    box-shadow:
        0 8px 30px
        var(--pc404-accent-glow-soft);

}


.pc404-page .pc404-primary:hover {

    transform:
        translateY(-3px);

    background:
        var(--pc404-accent-hover);

    border-color:
        var(--pc404-accent-hover);

    box-shadow:
        0 12px 38px
        var(--pc404-accent-glow);

}


.pc404-primary i {

    transition:
        transform .25s ease;

}


.pc404-primary:hover i {

    transform:
        translateX(4px);

}


.pc404-page .pc404-secondary {

    border:
        1px solid
        var(--pc404-accent);

    color:
        var(--pc404-button-text);

    background:
        var(--pc404-accent);

    box-shadow:
        0 8px 30px
        var(--pc404-accent-glow-soft);

}


.pc404-page .pc404-secondary:hover {

    transform:
        translateY(-3px);

    color:
        var(--pc404-button-text);

    background:
        var(--pc404-accent-hover);

    border-color:
        var(--pc404-accent-hover);

    box-shadow:
        0 12px 38px
        var(--pc404-accent-glow);

}


/* =========================================================
   STATUS
   ========================================================= */

.pc404-status {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 34px;

    color:
        var(--pc404-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

}


.pc404-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--pc404-accent);

    box-shadow:
        0 0 9px
        var(--pc404-accent);

    animation:
        pc404-status-pulse
        1.8s
        ease-in-out
        infinite;

}


.pc404-status strong {

    color:
        var(--pc404-accent);

}


.pc404-status i {

    width: 24px;

    height: 1px;

    background:
        var(--pc404-border);

}


/* =========================================================
   CORNER MARKERS
   ========================================================= */

.pc404-marker {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        var(--pc404-muted);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;

}


.pc404-marker i {

    display: block;

    width: 30px;

    height: 1px;

    background:
        var(--pc404-accent);

    box-shadow:
        0 0 8px
        var(--pc404-accent);

}


.pc404-marker-tl {

    top: 42px;

    left: 40px;

}


.pc404-marker-br {

    right: 40px;

    bottom: 32px;

}


/* =========================================================
   SCAN BEAM
   ========================================================= */

.pc404-scan {

    position: absolute;

    left: 0;

    right: 0;

    top: -15%;

    height: 1px;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pc404-accent),
            transparent
        );

    opacity: .35;

    box-shadow:
        0 0 18px
        var(--pc404-accent);

    animation:
        pc404-scan
        8s
        linear
        infinite;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pc404-number-enter {

    from {

        opacity: 0;

        transform:
            scale(.82)
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


@keyframes pc404-message-enter {

    from {

        opacity: 0;

        transform:
            translateY(22px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes pc404-core-pulse {

    0%,
    100% {

        transform:
            scale(.96);

    }

    50% {

        transform:
            scale(1.045);

    }

}


@keyframes pc404-core-dot {

    0%,
    100% {

        transform:
            scale(.7);

    }

    50% {

        transform:
            scale(1.35);

    }

}


@keyframes pc404-ring-spin {

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes pc404-energy-run {

    from {

        left: -15%;

    }

    to {

        left: 110%;

    }

}


@keyframes pc404-glow-pulse {

    0%,
    100% {

        opacity: .35;

        transform:
            scale(.94);

    }

    50% {

        opacity: .65;

        transform:
            scale(1.08);

    }

}


@keyframes pc404-particle {

    0% {

        opacity: 0;

        transform:
            translateY(35px)
            scale(.5);

    }

    25% {

        opacity: 1;

    }

    75% {

        opacity: .75;

    }

    100% {

        opacity: 0;

        transform:
            translateY(-85px)
            scale(1);

    }

}


@keyframes pc404-status-pulse {

    0%,
    100% {

        transform:
            scale(.75);

        opacity: .65;

    }

    50% {

        transform:
            scale(1.3);

        opacity: 1;

    }

}


@keyframes pc404-scan {

    0% {

        top: -10%;

        opacity: 0;

    }

    10% {

        opacity: .35;

    }

    50% {

        opacity: .25;

    }

    90% {

        opacity: .35;

    }

    100% {

        top: 110%;

        opacity: 0;

    }

}


/* =========================================================
   LAPTOP-L
   ========================================================= */

@media (max-width: 1440px) {

    .pc404-main {

        padding-left: 32px;

        padding-right: 32px;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .pc404-main {

        padding-top: 100px;

    }

    .pc404-number-wrap {

        height: 225px;

    }

}


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

@media (max-width: 991px) {

    .pc404-main {

        padding:
            100px
            30px
            50px;

    }


    .pc404-controls {

        top: 18px;

        right: 22px;

    }


    .pc404-marker-tl {

        left: 25px;

    }


    .pc404-marker-br {

        right: 25px;

    }


    .pc404-number-wrap {

        height: 205px;

    }


    .pc404-number {

        font-size:
            clamp(
                95px,
                17vw,
                170px
            );

    }


    .pc404-message h1 {

        font-size: 38px;

    }

}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (max-width: 768px) {

    .pc404-main {

        min-height: 100svh;

        padding:
            92px
            20px
            45px;

    }


    .pc404-controls {

        top: 15px;

        right: 16px;

    }


    .pc404-controls .pc-theme-toggle {

        width: 38px;

        height: 38px;

    }


    .pc404-controls .pc-rtl-toggle {

        width: 43px;

        height: 38px;

    }


    .pc404-system-label {

        font-size: 8px;

        gap: 9px;

        margin-bottom: 18px;

    }


    .pc404-label-line {

        width: 24px;

    }


    .pc404-number-wrap {

        height: 170px;

    }


    .pc404-number {

        font-size: 120px;

        gap: 7px;

    }


    .pc404-zero {

        width: 90px;

        height: 90px;

        border-width: 8px;

    }


    .pc404-zero i {

        width: 12px;

        height: 12px;

    }


    .pc404-number-shadow {

        font-size: 155px;

    }


    .pc404-energy-line {

        left: 3%;

        right: 3%;

    }


    .pc404-kicker {

        font-size: 10px;

        margin-top: 16px;

    }


    .pc404-message h1 {

        font-size: 32px;

    }


    .pc404-message p {

        font-size: 14px;

        line-height: 1.7;

    }


    .pc404-actions {

        margin-top: 25px;

    }


    .pc404-primary,
    .pc404-secondary {

        min-height: 48px;

        padding:
            0 16px;

        font-size: 12px;

    }


    .pc404-status {

        margin-top: 28px;

        font-size: 8px;

    }


    .pc404-marker {

        display: none;

    }

}


/* =========================================================
   MOBILE-M
   ========================================================= */

@media (max-width: 576px) {

    .pc404-main {

        padding:
            88px
            16px
            38px;

    }


    .pc404-system-label {

        max-width: 310px;

        margin-inline: auto;

        line-height: 1.5;

    }


    .pc404-number-wrap {

        height: 145px;

    }


    .pc404-number {

        font-size: 94px;

        gap: 5px;

    }


    .pc404-number-shadow {

        font-size: 125px;

    }


    .pc404-zero {

        width: 72px;

        height: 72px;

        border-width: 7px;

    }


    .pc404-zero::before {

        inset: -11px;

    }


    .pc404-zero::after {

        inset: -20px;

    }


    .pc404-message h1 {

        font-size: 29px;

    }


    .pc404-message p {

        max-width: 330px;

        font-size: 13px;

    }


    .pc404-actions {

        flex-direction: column;

        width: 100%;

    }


    .pc404-primary,
    .pc404-secondary {

        width: 100%;

        max-width: 310px;

    }


    .pc404-status {

        flex-wrap: wrap;

    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 380px) {

    .pc404-main {

        padding:
            82px
            12px
            30px;

    }


    .pc404-controls {

        top: 12px;

        right: 10px;

        gap: 4px;

    }


    .pc404-controls .pc-theme-toggle {

        width: 34px;

        height: 34px;

        font-size: 14px;

    }


    .pc404-controls .pc-rtl-toggle {

        width: 38px;

        height: 34px;

        font-size: 10px;

    }


    .pc404-number-wrap {

        height: 125px;

    }


    .pc404-number {

        font-size: 78px;

    }


    .pc404-number-shadow {

        font-size: 105px;

    }


    .pc404-zero {

        width: 60px;

        height: 60px;

        border-width: 6px;

    }


    .pc404-zero i {

        width: 9px;

        height: 9px;

    }


    .pc404-message h1 {

        font-size: 26px;

    }


    .pc404-message p {

        font-size: 12.5px;

    }


    .pc404-system-label {

        font-size: 7px;

    }


    .pc404-kicker {

        font-size: 9px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc404-page *,
    .pc404-page *::before,
    .pc404-page *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* ================================================================
   POWERCORE — COMING SOON PAGE
   PAGE-SCOPED STYLES ONLY
   ================================================================ */


/* ================================================================
   PAGE BODY
   ================================================================ */

body.pc-coming-body {

    margin: 0;

    min-height: 100vh;

    overflow-x: hidden;

    background: #F7F5F1;

    color: #202A30;

    font-family:
        "Manrope",
        sans-serif;

}


/* ================================================================
   PAGE ROOT
   ================================================================ */

.pc-coming-page {

    --coming-bg: #F7F5F1;

    --coming-text: #202A30;

    --coming-muted: #596A73;

    --coming-orange: #FF8A00;

    --coming-orange-dark: #E87500;

    --coming-line:
        rgba(32, 42, 48, .14);

    --coming-panel:
        rgba(255, 255, 255, .45);

    position: relative;

    min-height: 100vh;

    width: 100%;

    overflow: hidden;

    isolation: isolate;

    display: flex;

    flex-direction: column;

    background:
        radial-gradient(
            circle at 76% 50%,
            rgba(255, 138, 0, .10),
            transparent 24%
        ),
        var(--coming-bg);

    color: var(--coming-text);

}


/* ================================================================
   TOP CONTROLS
   ================================================================ */

.pc-coming-controls {

    position: absolute;

    top: 24px;

    right: 32px;

    z-index: 50;

    display: flex;

    align-items: center;

    gap: 8px;

}


.pc-coming-control {

    width: 44px;

    height: 40px;

    display: grid;

    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(32, 42, 48, .16);

    background:
        rgba(247, 245, 241, .78);

    color: #202A30;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    backdrop-filter: blur(14px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.pc-coming-control:hover {

    color: #FF8A00;

    border-color: #FF8A00;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(255, 138, 0, .15);

}


.pc-coming-rtl {

    width: 48px;

}


/* ================================================================
   TECH GRID
   ================================================================ */

.pc-coming-grid {

    position: absolute;

    inset: 0;

    z-index: -5;

    opacity: .42;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(32, 42, 48, .045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(32, 42, 48, .045) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 82%
        );

}


/* ================================================================
   ORANGE AMBIENT GLOWS
   ================================================================ */

.pc-coming-glow {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(80px);

    z-index: -3;

}


.pc-coming-glow-one {

    width: 460px;

    height: 460px;

    right: 11%;

    top: 23%;

    background:
        rgba(255, 138, 0, .14);

    animation:
        comingGlowOne 5s ease-in-out infinite;

}


.pc-coming-glow-two {

    width: 300px;

    height: 300px;

    left: 16%;

    bottom: 3%;

    background:
        rgba(255, 138, 0, .07);

    animation:
        comingGlowTwo 6s ease-in-out infinite;

}


/* ================================================================
   PARTICLES
   ================================================================ */

.pc-coming-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: -1;

}


.pc-coming-particles span {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 10px
        rgba(255, 138, 0, .8);

    opacity: .45;

    animation:
        comingParticle 6s linear infinite;

}


.pc-coming-particles span:nth-child(1) {
    left: 9%;
    top: 22%;
    animation-delay: -.5s;
}

.pc-coming-particles span:nth-child(2) {
    left: 21%;
    top: 74%;
    animation-delay: -2s;
}

.pc-coming-particles span:nth-child(3) {
    left: 37%;
    top: 17%;
    animation-delay: -3.4s;
}

.pc-coming-particles span:nth-child(4) {
    left: 49%;
    top: 82%;
    animation-delay: -1.3s;
}

.pc-coming-particles span:nth-child(5) {
    left: 63%;
    top: 13%;
    animation-delay: -4s;
}

.pc-coming-particles span:nth-child(6) {
    left: 76%;
    top: 76%;
    animation-delay: -2.6s;
}

.pc-coming-particles span:nth-child(7) {
    left: 88%;
    top: 27%;
    animation-delay: -5s;
}

.pc-coming-particles span:nth-child(8) {
    left: 93%;
    top: 58%;
    animation-delay: -1.8s;
}

.pc-coming-particles span:nth-child(9) {
    left: 15%;
    top: 47%;
    animation-delay: -4.6s;
}

.pc-coming-particles span:nth-child(10) {
    left: 55%;
    top: 67%;
    animation-delay: -3s;
}


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

.pc-coming-content {

    width:
        min(
            1440px,
            calc(100% - 100px)
        );

    min-height: 100vh;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(420px, 1.08fr);

    align-items: center;

    gap: 70px;

    padding:
        80px 0 75px;

    position: relative;

    z-index: 5;

}


/* ================================================================
   COPY
   ================================================================ */

.pc-coming-copy {

    max-width: 690px;

    position: relative;

    z-index: 5;

}


.pc-coming-kicker {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 24px;

    color: #596A73;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .16em;

}


.pc-coming-kicker-line {

    width: 44px;

    height: 2px;

    background: #FF8A00;

    box-shadow:
        0 0 12px
        rgba(255, 138, 0, .8);

}


.pc-coming-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 12px
        rgba(255, 138, 0, .95);

    animation:
        statusBlink 1.5s ease-in-out infinite;

}


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

.pc-coming-title {

    margin: 0;

    max-width: 720px;

    font-size:
        clamp(
            52px,
            6.5vw,
            92px
        );

    line-height: .92;

    letter-spacing: -.065em;

    font-weight: 800;

    color: #202A30;

}


.pc-coming-title span {

    display: block;

    color: #FF8A00;

    text-shadow:
        0 0 22px
        rgba(255, 138, 0, .18),

        0 0 65px
        rgba(255, 138, 0, .08);

}


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

.pc-coming-description {

    max-width: 570px;

    margin:
        30px 0 0;

    color: #596A73;

    font-size: 18px;

    line-height: 1.75;

    font-weight: 500;

}


/* ================================================================
   STATUS
   ================================================================ */

.pc-coming-status {

    width: min(570px, 100%);

    margin-top: 42px;

}


.pc-coming-status-top,
.pc-coming-status-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}


.pc-coming-status-top {

    margin-bottom: 12px;

    color: #596A73;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;

}


.pc-coming-status-top strong {

    color: #FF8A00;

    font-size: 14px;

}


.pc-coming-progress {

    width: 100%;

    height: 4px;

    position: relative;

    overflow: visible;

    background:
        rgba(32, 42, 48, .10);

}


.pc-coming-progress span {

    display: block;

    width: 72%;

    height: 100%;

    position: relative;

    background:
        linear-gradient(
            90deg,
            #E87500,
            #FF8A00,
            #FFB14A
        );

    box-shadow:
        0 0 8px
        rgba(255, 138, 0, .9),

        0 0 25px
        rgba(255, 138, 0, .45);

    animation:
        progressPulse 2.2s ease-in-out infinite;

}


.pc-coming-progress span::after {

    content: "";

    position: absolute;

    right: -3px;

    top: 50%;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #FFB14A;

    transform:
        translateY(-50%);

    box-shadow:
        0 0 10px
        #FF8A00,

        0 0 25px
        #FF8A00;

}


.pc-coming-status-bottom {

    margin-top: 10px;

    color: #596A73;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .13em;

}


/* ================================================================
   META
   ================================================================ */

.pc-coming-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 42px;

}


.pc-coming-meta span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #596A73;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .09em;

}


.pc-coming-meta i {

    color: #FF8A00;

    font-size: 11px;

}


/* ================================================================
   POWER VISUAL
   ================================================================ */

.pc-coming-visual {

    width: min(590px, 100%);

    aspect-ratio: 1 / 1;

    position: relative;

    margin-inline: auto;

    display: grid;

    place-items: center;

}


/* ================================================================
   RINGS
   ================================================================ */

.pc-coming-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 138, 0, .30);

}


.ring-one {

    width: 74%;

    aspect-ratio: 1;

    animation:
        ringPulse 4s ease-in-out infinite;

}


.ring-two {

    width: 58%;

    aspect-ratio: 1;

    border-style: dashed;

    border-color:
        rgba(255, 138, 0, .42);

    animation:
        ringRotate 18s linear infinite;

}


.ring-three {

    width: 43%;

    aspect-ratio: 1;

    border-color:
        rgba(255, 138, 0, .58);

    box-shadow:
        0 0 35px
        rgba(255, 138, 0, .08);

    animation:
        ringPulse 2.8s ease-in-out infinite reverse;

}


/* ================================================================
   ORBIT
   ================================================================ */

.pc-coming-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 138, 0, .26);

}


.orbit-one {

    width: 82%;

    aspect-ratio: 1;

    transform: rotate(-22deg);

    border-left-color:
        transparent;

    border-right-color:
        rgba(255, 138, 0, .65);

    animation:
        orbitRotate 12s linear infinite;

}


.orbit-two {

    width: 67%;

    aspect-ratio: 1;

    transform: rotate(42deg);

    border-top-color:
        rgba(255, 138, 0, .70);

    border-bottom-color:
        transparent;

    animation:
        orbitRotateReverse 9s linear infinite;

}


.pc-coming-orbit span {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 12px #FF8A00,
        0 0 30px rgba(255, 138, 0, .8);

}


.orbit-one span:nth-child(1) {
    left: 9%;
    top: 20%;
}

.orbit-one span:nth-child(2) {
    right: 5%;
    top: 58%;
}

.orbit-one span:nth-child(3) {
    left: 47%;
    bottom: -4px;
}


.orbit-two span:nth-child(1) {
    right: 10%;
    top: 22%;
}

.orbit-two span:nth-child(2) {
    left: 5%;
    bottom: 28%;
}


/* ================================================================
   CENTRAL CORE
   ================================================================ */

.pc-coming-core {

    width: 245px;

    aspect-ratio: 1;

    position: relative;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 138, 0, .18) 0%,
            rgba(255, 138, 0, .05) 34%,
            rgba(20, 25, 28, .03) 64%,
            transparent 70%
        );

    animation:
        coreFloat 4s ease-in-out infinite;

}


.pc-coming-core::before {

    content: "";

    position: absolute;

    inset: 18px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 138, 0, .65);

    box-shadow:
        inset 0 0 40px
        rgba(255, 138, 0, .08),

        0 0 45px
        rgba(255, 138, 0, .13);

}


.pc-coming-core::after {

    content: "";

    position: absolute;

    inset: 39px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 35%,
            #FFB14A,
            #FF8A00 28%,
            #9B4900 58%,
            #202A30 72%
        );

    box-shadow:
        0 0 28px
        rgba(255, 138, 0, .75),

        0 0 75px
        rgba(255, 138, 0, .32),

        inset 0 0 30px
        rgba(0, 0, 0, .65);

}


.pc-coming-core-inner {

    width: 86px;

    height: 86px;

    position: relative;

    z-index: 3;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255, 218, 165, .60);

    border-radius: 50%;

    background:
        rgba(18, 23, 26, .88);

    box-shadow:
        0 0 22px
        rgba(255, 138, 0, .55);

}


.pc-coming-core-inner i {

    color: #FF9D2E;

    font-size: 34px;

    filter:
        drop-shadow(
            0 0 9px
            rgba(255, 138, 0, .9)
        );

    animation:
        boltPulse 1.8s ease-in-out infinite;

}


.core-label {

    position: absolute;

    z-index: 4;

    bottom: 48px;

    color: #FFB14A;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .22em;

}


/* ================================================================
   SIGNALS
   ================================================================ */

.pc-coming-signal {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #FF8A00;

    box-shadow:
        0 0 10px #FF8A00,
        0 0 25px rgba(255, 138, 0, .65);

    animation:
        signalPulse 2s ease-in-out infinite;

}


.signal-one {
    left: 14%;
    top: 48%;
}

.signal-two {
    right: 13%;
    top: 33%;
    animation-delay: -.5s;
}

.signal-three {
    right: 24%;
    bottom: 16%;
    animation-delay: -1s;
}

.signal-four {
    left: 25%;
    bottom: 22%;
    animation-delay: -1.5s;
}


/* ================================================================
   TECH LABELS
   ================================================================ */

.pc-coming-tech {

    position: absolute;

    display: flex;

    flex-direction: column;

    gap: 3px;

    padding: 8px 11px;

    border-left:
        2px solid
        #FF8A00;

    background:
        rgba(247, 245, 241, .52);

    backdrop-filter: blur(10px);

}


.pc-coming-tech small {

    color: #596A73;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .14em;

}


.pc-coming-tech strong {

    color: #202A30;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .08em;

}


.tech-one {

    left: 3%;

    top: 26%;

}


.tech-two {

    right: 2%;

    top: 63%;

}


.tech-three {

    left: 15%;

    bottom: 8%;

}


/* ================================================================
   BOTTOM LINE
   ================================================================ */

.pc-coming-bottom {

    width:
        min(
            1440px,
            calc(100% - 100px)
        );

    margin:
        auto auto 0;

    padding:
        17px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(32, 42, 48, .12);

    color: #596A73;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;

}


.pc-coming-bottom span:last-child {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}


.pc-coming-bottom i {

    color: #FF8A00;

    font-size: 6px;

    animation:
        statusBlink 1.5s ease-in-out infinite;

}


/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes comingGlowOne {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .7;

    }

    50% {

        transform:
            scale(1.18);

        opacity: 1;

    }

}


@keyframes comingGlowTwo {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0);

    }

    50% {

        transform:
            translate3d(20px, -25px, 0);

    }

}


@keyframes comingParticle {

    0% {

        transform:
            translate3d(0, 18px, 0);

        opacity: 0;

    }

    25% {

        opacity: .75;

    }

    75% {

        opacity: .35;

    }

    100% {

        transform:
            translate3d(10px, -50px, 0);

        opacity: 0;

    }

}


@keyframes statusBlink {

    0%,
    100% {

        opacity: .35;

    }

    50% {

        opacity: 1;

    }

}


@keyframes progressPulse {

    0%,
    100% {

        filter:
            brightness(1);

    }

    50% {

        filter:
            brightness(1.35);

    }

}


@keyframes ringPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .7;

    }

    50% {

        transform:
            scale(1.035);

        opacity: 1;

    }

}


@keyframes ringRotate {

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes orbitRotate {

    to {

        transform:
            rotate(338deg);

    }

}


@keyframes orbitRotateReverse {

    to {

        transform:
            rotate(-318deg);

    }

}


@keyframes coreFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-9px);

    }

}


@keyframes boltPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.15);

    }

}


@keyframes signalPulse {

    0%,
    100% {

        transform:
            scale(.65);

        opacity: .35;

    }

    50% {

        transform:
            scale(1.35);

        opacity: 1;

    }

}


/* ================================================================
   LAPTOP-L
   ================================================================ */

@media (max-width: 1366px) {

    .pc-coming-content {

        width:
            min(
                1260px,
                calc(100% - 80px)
            );

        gap: 45px;

    }


    .pc-coming-title {

        font-size:
            clamp(
                50px,
                6vw,
                78px
            );

    }


    .pc-coming-visual {

        max-width: 520px;

    }

}


/* ================================================================
   LAPTOP
   ================================================================ */

@media (max-width: 1199px) {

    .pc-coming-content {

        grid-template-columns:
            minmax(0, .95fr)
            minmax(390px, 1.05fr);

        gap: 25px;

    }


    .pc-coming-description {

        font-size: 16px;

    }


    .pc-coming-visual {

        max-width: 470px;

    }


    .pc-coming-core {

        width: 205px;

    }


    .pc-coming-tech {

        transform:
            scale(.9);

    }

}


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

@media (max-width: 991px) {

    .pc-coming-controls {

        top: 20px;

        right: 22px;

    }


    .pc-coming-content {

        width:
            min(
                760px,
                calc(100% - 60px)
            );

        grid-template-columns: 1fr;

        gap: 15px;

        padding:
            95px 0 45px;

        text-align: center;

    }


    .pc-coming-copy {

        max-width: 720px;

        margin-inline: auto;

    }


    .pc-coming-kicker {

        justify-content: center;

    }


    .pc-coming-description {

        margin-inline: auto;

    }


    .pc-coming-status {

        margin-inline: auto;

    }


    .pc-coming-meta {

        justify-content: center;

    }


    .pc-coming-visual {

        width:
            min(
                500px,
                70vw
            );

        margin-top: -5px;

    }


    .pc-coming-bottom {

        width:
            calc(100% - 60px);

    }

}


/* ================================================================
   MOBILE-L
   ================================================================ */

@media (max-width: 767px) {

    .pc-coming-controls {

        top: 16px;

        right: 16px;

    }


    .pc-coming-control {

        width: 40px;

        height: 38px;

    }


    .pc-coming-content {

        width:
            calc(100% - 36px);

        min-height: auto;

        padding:
            92px 0 30px;

    }


    .pc-coming-title {

        font-size:
            clamp(
                42px,
                12vw,
                58px
            );

        line-height: .94;

    }


    .pc-coming-description {

        margin-top: 22px;

        font-size: 15px;

        line-height: 1.65;

    }


    .pc-coming-status {

        margin-top: 32px;

    }


    .pc-coming-meta {

        gap: 12px 18px;

        margin-top: 30px;

    }


    .pc-coming-meta span {

        font-size: 9px;

    }


    .pc-coming-visual {

        width:
            min(
                390px,
                86vw
            );

        margin-top: 0;

    }


    .pc-coming-core {

        width: 165px;

    }


    .pc-coming-core-inner {

        width: 64px;

        height: 64px;

    }


    .pc-coming-core-inner i {

        font-size: 25px;

    }


    .core-label {

        bottom: 35px;

    }


    .pc-coming-tech {

        padding: 6px 8px;

        transform:
            scale(.78);

    }


    .tech-one {

        left: 0;

    }


    .tech-two {

        right: 0;

    }


    .tech-three {

        left: 8%;

    }


    .pc-coming-bottom {

        width:
            calc(100% - 36px);

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        padding: 14px 0;

    }

}


/* ================================================================
   MOBILE-M
   ================================================================ */

@media (max-width: 480px) {

    .pc-coming-controls {

        top: 13px;

        right: 13px;

    }


    .pc-coming-content {

        width:
            calc(100% - 28px);

        padding-top: 82px;

    }


    .pc-coming-kicker {

        gap: 7px;

        font-size: 9px;

        letter-spacing: .12em;

    }


    .pc-coming-kicker-line {

        width: 28px;

    }


    .pc-coming-title {

        font-size:
            clamp(
                38px,
                13vw,
                51px
            );

    }


    .pc-coming-description {

        font-size: 14px;

    }


    .pc-coming-meta {

        display: grid;

        grid-template-columns: 1fr;

        justify-items: center;

    }


    .pc-coming-visual {

        width:
            min(
                330px,
                91vw
            );

    }


    .ring-one {

        width: 78%;

    }


    .ring-two {

        width: 63%;

    }


    .ring-three {

        width: 47%;

    }


    .pc-coming-core {

        width: 145px;

    }


    .pc-coming-core::before {

        inset: 14px;

    }


    .pc-coming-core::after {

        inset: 31px;

    }


    .pc-coming-core-inner {

        width: 56px;

        height: 56px;

    }


    .pc-coming-core-inner i {

        font-size: 21px;

    }


    .core-label {

        bottom: 29px;

        font-size: 7px;

    }


    .pc-coming-signal {

        width: 5px;

        height: 5px;

    }


    .pc-coming-tech {

        display: none;

    }


    .pc-coming-bottom {

        font-size: 7px;

        letter-spacing: .08em;

    }

}


/* ================================================================
   MOBILE-S
   ================================================================ */

@media (max-width: 360px) {

    .pc-coming-control {

        width: 37px;

        height: 36px;

        font-size: 12px;

    }


    .pc-coming-content {

        width:
            calc(100% - 22px);

        padding-top: 78px;

    }


    .pc-coming-title {

        font-size: 35px;

    }


    .pc-coming-description {

        font-size: 13px;

    }


    .pc-coming-status-top {

        font-size: 9px;

    }


    .pc-coming-visual {

        width: 300px;

    }


    .pc-coming-core {

        width: 130px;

    }


    .pc-coming-bottom {

        width:
            calc(100% - 22px);

    }

}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .pc-coming-page *,
    .pc-coming-page *::before,
    .pc-coming-page *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =========================================================
   COMING SOON — COUNTDOWN TIMER
   ========================================================= */

.pc-coming-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 42px auto 0;
    position: relative;
    z-index: 5;
}

.pc-timer-item {
    min-width: 105px;
    text-align: center;
    position: relative;
}

.pc-timer-item strong {
    display: block;
    font-family: Manrope, sans-serif;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #202A30;
    transition:
        color .3s ease,
        text-shadow .3s ease,
        transform .3s ease;
}

.pc-timer-item span {
    display: block;
    margin-top: 10px;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #596A73;
}

.pc-timer-separator {
    color: #FF8A00;
    font-size: 34px;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    margin-top: -20px;
    text-shadow:
        0 0 8px rgba(255,138,0,.7),
        0 0 22px rgba(255,138,0,.35);
    animation: pcTimerPulse 1s ease-in-out infinite;
}

/* Active second glow */
.pc-timer-item.pc-timer-active strong {
    color: #FF8A00;
    text-shadow:
        0 0 8px rgba(255,138,0,.75),
        0 0 24px rgba(255,138,0,.4);
    transform: translateY(-2px);
}

@keyframes pcTimerPulse {
    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    .pc-coming-timer {
        gap: 14px;
        margin-top: 35px;
    }

    .pc-timer-item {
        min-width: 88px;
    }

    .pc-timer-item strong {
        font-size: 35px;
    }

    .pc-timer-item span {
        font-size: 11px;
    }

    .pc-timer-separator {
        font-size: 28px;
    }
}

/* Mobile L / M */
@media (max-width: 767px) {
    .pc-coming-timer {
        gap: 7px;
        width: 100%;
        margin-top: 30px;
    }

    .pc-timer-item {
        min-width: 0;
        flex: 1;
    }

    .pc-timer-item strong {
        font-size: clamp(25px, 8vw, 32px);
    }

    .pc-timer-item span {
        margin-top: 8px;
        font-size: 9px;
        letter-spacing: .08em;
    }

    .pc-timer-separator {
        font-size: 23px;
        margin-top: -16px;
    }
}

/* Mobile S */
@media (max-width: 390px) {
    .pc-coming-timer {
        gap: 4px;
        margin-top: 25px;
    }

    .pc-timer-item strong {
        font-size: 24px;
    }

    .pc-timer-item span {
        font-size: 8px;
        letter-spacing: .05em;
    }

    .pc-timer-separator {
        font-size: 19px;
        margin-top: -14px;
    }
}

/* RTL */
html[dir="rtl"] .pc-coming-timer,
html.rtl-mode .pc-coming-timer {
    direction: ltr;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pc-timer-separator {
        animation: none;
    }

    .pc-timer-item strong {
        transition: none;
    }
}

/* ==========================================================================
   PRODUCTS PAGES — TABLET ALIGNMENT FIX (768px – 991px)
   Affects: products.html, products-1-5kva.html, products-6-20kva.html,
            products-21-50kva.html

   Cause: in this range an earlier block turns .pc-products-filter into a
   position:fixed off-canvas drawer using !important, so it is removed from
   the grid flow while .pc-products-layout keeps its two-column template. The
   remaining .pc-products-results is then auto-placed into the narrow 250px
   sidebar track, which squashes the whole catalogue into the left column.

   Fix: on tablet the filter goes back into the normal flow as the first
   grid column and the results take the remaining width, so both columns
   line up with the shell edges. No other breakpoint is affected.
   ========================================================================== */

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

    /* Restore the two-column grid that the drawer rule silently disabled */

    .pc-products-layout,
    body.pc-products-page .pc-products-layout,
    body.pc-capacity-page .pc-products-layout,
    body.pc21-page .pc-products-layout {
        display: grid;

        grid-template-columns:
            minmax(230px, 250px)
            minmax(0, 1fr);

        gap: 26px;

        align-items: start;
    }

    /*
     * Bring the filter back into the grid as a sticky in-flow column.
     * !important is required because the drawer rule it replaces also
     * used !important in this same breakpoint.
     */

    .pc-products-filter,
    body.pc-products-page .pc-products-filter,
    body.pc-capacity-page .pc-products-filter,
    body.pc21-page .pc-products-filter {
        position: sticky !important;

        top: 20px !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        min-width: 0;

        height: auto !important;
        max-height: calc(100vh - 40px) !important;

        transform: none !important;

        transition: none !important;

        padding: 24px 20px !important;

        z-index: 20;
    }

    /* Tablet has a real sidebar, so the close button is not needed */

    .pc-products-filter-close,
    body.pc-products-page .pc-products-filter-close,
    body.pc-capacity-page .pc-products-filter-close,
    body.pc21-page .pc-products-filter-close {
        display: none !important;
    }

    /* The off-canvas "CATALOGUE / FILTER" bar is a mobile-only affordance */

    .pc-products-mobile-filter-bar,
    body.pc-products-page .pc-products-mobile-filter-bar,
    body.pc-capacity-page .pc-products-mobile-filter-bar,
    body.pc21-page .pc-products-mobile-filter-bar {
        display: none !important;
    }

    /* Let the results column take the real remaining width */

    .pc-products-results,
    body.pc-products-page .pc-products-results,
    body.pc-capacity-page .pc-products-results,
    body.pc21-page .pc-products-results {
        min-width: 0;
        width: 100%;
    }

    .pc-products-grid,
    body.pc-products-page .pc-products-grid,
    body.pc-capacity-page .pc-products-grid,
    body.pc21-page .pc-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    /* Keep card content from forcing the column wider than its track */

    .pc-product-card,
    body.pc-products-page .pc-product-card,
    body.pc-capacity-page .pc-product-card,
    body.pc21-page .pc-product-card {
        min-width: 0;
    }

    .pc-product-image {
        height: 210px;
    }

    /*
     * The results heading is a flex row. Its text column has the default
     * min-width:auto, so a long line refuses to shrink and pushes the row
     * past the grid track, causing horizontal overflow. Letting it shrink
     * keeps the heading inside the column.
     */

    .pc-products-results-head {
        min-width: 0;
    }

    .pc-products-results-head > div:first-child {
        min-width: 0;
    }

    .pc-products-results-head h2,
    .pc-products-results-head p {
        overflow-wrap: break-word;
    }

    /*
     * The description is nowrap by default, which is fine on wide
     * columns but overflows a tablet column. Let it wrap here.
     */

    .pc-products-results-head p {
        white-space: normal;
    }

}


/* ==========================================================================
   REPAIR PROCESS TIMELINE — MOBILE RAIL CENTRE FIX (up to 767px)
   Page: repair.html

   Cause: on mobile the rail, the progress fill and the numbered circles are
   each positioned from their own hard-coded numbers, and those numbers do
   not agree. The rail lands at 12px and the progress bar at 11px, while the
   circle centre lands at 36.5px — so the vertical line misses the middle of
   every circle by roughly 24px.

   Fix: drive all three from ONE variable (--pcr-tl-rail) so the rail, the
   progress fill and both circle variants are guaranteed to share the same
   centre. Scoped to max-width:767px only; every other breakpoint already
   lines up and is untouched.
   ========================================================================== */

@media (max-width: 767px) {

    /* Single source of truth for the rail centre, measured from the
     * .timeline box: timeline padding (27) + the original -12px circle
     * offset + half the 43px circle = 27 - 12 + 21.5 = 36.5. */
    .timeline {
        --pcr-tl-rail: 36.5px;

        padding-left: 27px;
    }

    /* The rail and the progress fill sit on it. */

    .timeline:before {
        left: var(--pcr-tl-rail);

        transform: translateX(-50%);
    }

    .progress {
        left: var(--pcr-tl-rail);

        transform: translateX(-50%);
    }

    .step,
    .step:nth-of-type(even) {
        padding: 0 0 48px 40px;
    }

    /*
     * The circle is absolutely positioned inside .step, whose padding box
     * is already inset by the .timeline padding (27px). Subtracting that
     * keeps it on exactly the same centre as the rail.
     */

    .step>b,
    .step:nth-of-type(even)>b {
        left: calc(
            var(--pcr-tl-rail) - 27px - 21.5px
        );
        right: auto;
    }

}


/* ==========================================================================
   FILTER HEADER — SCROLL WITH THE PANEL (authoritative override)
   Pages: products.html, products-1-5kva.html only
   Sizes: mobile-s / m / l (up to 767px) and tablet (768–991px)

   Issue: .pc-products-filter-head was position:sticky inside the scrolling
   filter panel, so the "Find the right system / REFINE" block stayed pinned
   while the filter topics scrolled underneath it. The whole panel should
   scroll as one piece.

   Fix: take the header out of sticky flow at these two sizes. Scoped to
   body.pc-products-page, which covers exactly products.html and
   products-1-5kva.html — products-6-20kva.html and products-21-50kva.html
   do not carry that class, so they are not affected. Desktop and any other
   breakpoint are untouched.
   ========================================================================== */

@media (max-width: 991px) {

    body.pc-products-page .pc-products-filter-head {
        position: static;

        top: auto;

        z-index: auto;
    }

}