/*==================================================
PROJECT DETAIL PAGE — "ENGINEERING CASE FILE"
Prefix: pd-

CLEANUP NOTES (read this before editing further):
This file had grown through several additive "rounds" (2.0, Round 2,
2.1) that kept redefining the same selectors instead of editing the
original rule in place. That's harmless to the browser (CSS cascades,
so the last rule wins) but it made the file hard to trust — several
classes had 2-3 competing definitions scattered hundreds of lines
apart, a few components were fully superseded and left behind as dead
weight, and a couple of small class names collided by accident.

What changed in this pass:
  1. Every selector that was defined more than once has been merged
     into a single rule, keeping whatever the LAST definition actually
     rendered (i.e. what your browser was already showing you) —
     nothing here should look visually different.
  2. Components that were fully replaced by a later redesign and are
     no longer referenced anywhere (an old two-column hero/photo
     layout superseded by the current split-hero, an old star-rating
     version of the "Engineering DNA" block superseded by the
     dot-meter version, and three abandoned thermometer/pulse widget
     variants) were removed. If another project page still relies on
     one of these, ping me and I'll bring it back.
  3. Components that simply aren't used by *this* page's HTML but are
     clearly reusable across other project pages (gauges, the Gantt
     timeline, the "related products" grid, before/after table, etc.)
     were left in place untouched — this file is shared, not page-
     specific.
  4. One missing rule was added: the HTML references a
     `.pd-flow-compressor-pulse` class (on the "Compressor" pill
     inside the chiller flow step) that had no CSS anywhere — it was
     silently doing nothing. Added a small pulse to match the fan/dot
     animations already used elsewhere on this page.
  5. Scroll-reveal rules for the same set of cards were declared twice
     (once when the widgets were introduced, again near the bottom of
     the file, verbatim) — consolidated into one place.
==================================================*/

/*---------- SHARED SECTION SHELL ----------*/

.pd-section {
    padding: clamp(80px, 12vw, 140px) 6%;
}

.pd-section.alt {
    background: #070B11;
}

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

.pd-section-header h2 {
    margin-top: 22px;
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1.12;
}

.pd-section-header p {
    margin-top: 22px;
    color: #9FB1C2;
    line-height: 1.85;
    font-size: clamp(14.5px, 1.6vw, 17px);
}

.pd-data-note {
    max-width: 700px;
    margin: 18px auto 0;
    text-align: center;
    color: #7F93A6;
    font-size: 12.5px;
    line-height: 1.7;
    font-style: italic;
}

/*---------- HERO (base) ----------*/

.pd-hero {
    position: relative;
    padding: clamp(150px, 18vw, 200px) 6% clamp(90px, 12vw, 130px);
    min-height: 78vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(70% 60% at 50% 0%, #0B1420 0%, #05070B 60%);
}

.pd-hero .section-particles {
    z-index: 1;
}

.pd-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(55% 55% at 12% 15%, rgba(66, 165, 255, .16), transparent 70%),
        radial-gradient(50% 50% at 92% 85%, rgba(79, 246, 255, .09), transparent 70%);
}

.pd-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.pd-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 12.5px;
    color: #7F93A6;
    flex-wrap: wrap;
}

.pd-breadcrumb a {
    color: #9FB1C2;
    transition: .25s;
}

.pd-breadcrumb a:hover {
    color: var(--cyan);
}

.pd-breadcrumb-current {
    color: var(--cyan);
}

.pd-hero-inner h1 {
    margin-top: 22px;
    font-size: clamp(34px, 5.6vw, 66px);
    line-height: 1.06;
}

.pd-hero-location {
    margin-top: 18px;
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 12.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pd-hero-sub {
    margin: 18px auto 0;
    max-width: 640px;
    color: #9FB1C2;
    line-height: 1.85;
    font-size: clamp(15px, 1.7vw, 17.5px);
}

.pd-hero-metric {
    margin-top: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pd-hero-metric-value {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(48px, 8vw, 84px);
    line-height: 1;
    background: linear-gradient(135deg, #42A5FF, #4FF6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pd-hero-metric-unit {
    color: #8DA4B8;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pd-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 38px;
}

.pd-badge {
    padding: 10px 20px;
    border-radius: 40px;
    border: 1px solid rgba(79, 246, 255, .2);
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(20px);
    font-size: 12.5px;
    color: #C7D3DE;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: .4px;
}

/*---------- HERO: STATUS PILL + STAT STRIP ----------*/

.pd-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    padding: 8px 18px;
    border-radius: 30px;
    background: rgba(79, 246, 255, .07);
    border: 1px solid rgba(79, 246, 255, .3);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--cyan);
}

.pd-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(79, 246, 255, .9);
    animation: pd-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes pd-dot-pulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }

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

.pd-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
    border: 1px solid rgba(79, 246, 255, .18);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}

.pd-hero-stat {
    flex: 1 1 140px;
    padding: 18px 20px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.pd-hero-stat:last-child {
    border-right: none;
}

.pd-hero-stat b {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(16px, 1.8vw, 20px);
    background: linear-gradient(135deg, #42A5FF, #4FF6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}

.pd-hero-stat span {
    display: block;
    color: #8DA4B8;
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

@media(max-width:700px) {
    .pd-hero-stat {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
}

/*---------- HERO: SPLIT LAYOUT WITH PHOTO PANEL (current hero design) ----------*/

.pd-hero-inner.pd-hero-split {
    max-width: 1250px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pd-hero-text-col .pd-breadcrumb,
.pd-hero-text-col .pd-hero-stats {
    justify-content: flex-start;
}

.pd-hero-photo-col {
    position: relative;
}

.pd-hero-photo-panel {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(79, 246, 255, .2);
    background:
        repeating-linear-gradient(135deg, rgba(79, 246, 255, .05) 0 2px, transparent 2px 14px),
        radial-gradient(120% 100% at 30% 20%, rgba(66, 165, 255, .22), transparent 60%),
        linear-gradient(160deg, #0B1420, #05070B);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-hero-photo-placeholder {
    text-align: center;
    color: #56718A;
}

.pd-hero-photo-placeholder span {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pd-hero-photo-placeholder small {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: #3D5065;
}

.pd-hero-kpi-float {
    position: absolute;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(8, 12, 18, .8);
    border: 1px solid rgba(79, 246, 255, .3);
    backdrop-filter: blur(16px);
    text-align: center;
}

.pd-hero-kpi-float b {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    color: var(--cyan);
}

.pd-hero-kpi-float span {
    display: block;
    font-size: 9px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #8DA4B8;
    margin-top: 3px;
}

.pd-hero-kpi-float.pd-kpi-tl {
    top: -14px;
    left: -14px;
}

.pd-hero-kpi-float.pd-kpi-tr {
    top: -14px;
    right: -14px;
}

.pd-hero-kpi-float.pd-kpi-bl {
    bottom: -14px;
    left: -14px;
}

.pd-hero-kpi-float.pd-kpi-br {
    bottom: -14px;
    right: -14px;
}

@media(max-width:900px) {
    .pd-hero-inner.pd-hero-split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pd-hero-text-col .pd-breadcrumb,
    .pd-hero-text-col .pd-hero-stats {
        justify-content: center;
    }

    .pd-hero-kpi-float {
        position: static;
        display: inline-block;
        margin: 6px;
    }
}

/*---------- PROJECT SNAPSHOT ----------*/

.pd-snapshot-grid {
    max-width: 1150px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pd-snap-card {
    padding: 24px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .12);
    text-align: center;
    transition: .35s;
}

.pd-snap-card:hover {
    border-color: rgba(79, 246, 255, .35);
    transform: translateY(-4px);
}

.pd-snap-card span {
    display: block;
    color: #7F93A6;
    font-size: 10.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pd-snap-card b {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    color: white;
}

@media(max-width:900px) {
    .pd-snapshot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*---------- NARRATIVE (Challenge) ----------*/

.pd-narrative {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.pd-narrative h2 {
    margin-top: 22px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.15;
}

.pd-narrative p {
    margin-top: 22px;
    color: #9FB1C2;
    line-height: 1.9;
    font-size: clamp(15px, 1.6vw, 16.5px);
    text-align: left;
}

/*---------- ENGINEERING ANALYSIS ----------*/

.pd-analysis-grid {
    max-width: 1000px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pd-analysis-card {
    padding: 24px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .1);
    transition: .35s;
}

.pd-analysis-card:hover {
    border-color: rgba(79, 246, 255, .3);
    transform: translateY(-4px);
}

.pd-analysis-label {
    display: block;
    color: var(--cyan);
    font-size: 12px;
    letter-spacing: .3px;
    margin-bottom: 10px;
}

.pd-analysis-card b {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: white;
}

@media(max-width:800px) {
    .pd-analysis-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:520px) {
    .pd-analysis-grid {
        grid-template-columns: 1fr;
    }
}

/*---------- FLOW (Solution Architecture / Thermal Cycle) ----------*/

.pd-flow {
    max-width: 620px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-flow.pd-flow-narrow {
    max-width: 480px;
}

.pd-flow-step {
    width: 100%;
    padding: 20px 26px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .15);
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 18px;
}

.pd-flow-step:hover {
    border-color: rgba(79, 246, 255, .4);
    box-shadow: 0 10px 30px rgba(66, 165, 255, .12);
}

.pd-flow-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(135deg, rgba(66, 165, 255, .25), rgba(79, 246, 255, .12));
    color: var(--cyan);
}

.pd-flow-text b {
    display: block;
    color: white;
    font-size: 15px;
    margin-bottom: 3px;
}

.pd-flow-text span {
    color: #9FB1C2;
    font-size: 13.5px;
    line-height: 1.6;
}

.pd-flow-arrow {
    width: 2px;
    height: 30px;
    margin: 3px auto;
    background: linear-gradient(180deg, rgba(79, 246, 255, .5), rgba(79, 246, 255, .1));
    position: relative;
    overflow: hidden;
}

.pd-flow-arrow::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(79, 246, 255, .6);
}

.pd-flow-arrow.pd-flow-water::before {
    content: "";
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 10px rgba(79, 246, 255, .8);
    animation: pd-water-flow 1.8s linear infinite;
}

@keyframes pd-water-flow {
    to {
        top: 200%;
    }
}

/* alternate "heat" coloring for the arrow, used when a step rejects heat
   rather than carrying chilled water (not used on this page's markup yet,
   kept as a ready-made variant — see .pd-flow-heatnote below for how the
   heat-rejection callout above the flow uses the same orange palette) */
.pd-flow-arrow.pd-flow-heat {
    background: linear-gradient(180deg, rgba(255, 138, 76, .5), rgba(255, 90, 60, .1));
}

.pd-flow-arrow.pd-flow-heat::after {
    border-top-color: rgba(255, 120, 70, .65);
}

.pd-flow-arrow.pd-flow-heat::before {
    content: "";
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, #FF8A4C, transparent);
    box-shadow: 0 0 10px rgba(255, 120, 70, .8);
    animation: pd-water-flow 1.8s linear infinite;
}

@media(max-width:600px) {
    .pd-flow-step {
        flex-direction: column;
        text-align: center;
    }
}

/*---------- FLOW: INSIDE-THE-CHILLER INSET (compressor/condenser/etc pills) ----------*/

.pd-flow-inset {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.pd-flow-inset span {
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(79, 246, 255, .06);
    border: 1px dashed rgba(79, 246, 255, .25);
    color: #8DA4B8;
    font-size: 10.5px;
}

/* the HTML marks the active refrigeration stage with this class; it had no
   rule at all before this cleanup, so it rendered as a plain, static pill */
.pd-flow-compressor-pulse {
    color: var(--cyan);
    border-color: rgba(79, 246, 255, .5);
}

/*---------- FLOW: AXIAL FAN ICON ----------*/

.pd-flow-icon-fan {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.pd-fan-svg {
    width: 100%;
    height: 100%;
    animation: pd-fan-spin 1.2s linear infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 6px rgba(79, 246, 255, .5));
}

@keyframes pd-fan-spin {
    from {
        transform: rotate(0deg);
    }

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

/*---------- FLOW: HEAT-REJECTION CALLOUT ----------*/

.pd-flow-heatnote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    padding: 14px 22px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 138, 76, .35);
    background: rgba(255, 138, 76, .04);
}

.pd-flow-heatnote-text {
    color: #FFAE85;
    font-family: 'Orbitron', sans-serif;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.pd-flow-heatnote-arrow {
    color: #FF8A4C;
    font-size: 16px;
    line-height: 1;
    animation: pd-heatnote-rise 1.8s ease-in-out infinite;
}

@keyframes pd-heatnote-rise {

    0%,
    100% {
        transform: translateY(0);
        opacity: .55;
    }

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

.pd-flow-heatnote-fan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #C7D3DE;
    font-size: 13px;
}

.pd-flow-heatnote-connector {
    position: relative;
    width: 2px;
    height: 25px;
    margin-top: 2px;
    background: linear-gradient(180deg, rgba(255, 138, 76, .45), rgba(79, 246, 255, .3));
}

.pd-flow-heatnote-connector::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF8A4C;
    box-shadow: 0 0 8px rgba(255, 138, 76, .9);
    animation: pd-heatnote-rise-dot 1.6s linear infinite;
}

@keyframes pd-heatnote-rise-dot {
    to {
        bottom: 80%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-flow-heatnote-arrow {
        animation: none;
    }
}

/*---------- EQUIPMENT CARDS ----------*/

.pd-equip-grid {
    max-width: 1150px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pd-equip-card {
    padding: 26px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .1);
    transition: .35s;
}

.pd-equip-card:hover {
    border-color: rgba(79, 246, 255, .3);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(66, 165, 255, .12);
}

.pd-equip-card h3 {
    font-size: 16.5px;
    margin-bottom: 10px;
}

.pd-equip-role {
    display: block;
    color: #9FB1C2;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.pd-equip-stat {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(79, 246, 255, .08);
    border: 1px solid rgba(79, 246, 255, .2);
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 12.5px;
}

@media(max-width:900px) {
    .pd-equip-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:560px) {
    .pd-equip-grid {
        grid-template-columns: 1fr;
    }
}

/*---------- PERFORMANCE DASHBOARD (simple ring/number cards) ----------*/

.pd-perf-grid {
    max-width: 1150px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pd-perf-card {
    padding: 26px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .12);
    text-align: center;
    transition: .35s;
}

.pd-perf-card:hover {
    border-color: rgba(79, 246, 255, .35);
    transform: translateY(-4px);
}

.pd-perf-card b {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    background: linear-gradient(135deg, #42A5FF, #4FF6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.pd-perf-card span {
    display: block;
    color: #8DA4B8;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media(max-width:900px) {
    .pd-perf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*---------- ENGINEERING HIGHLIGHTS ----------*/

.pd-highlight-list {
    max-width: 700px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
}

.pd-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 6px;
}

.pd-highlight-item+.pd-highlight-item {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.pd-highlight-check {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 246, 255, .1);
    border: 1px solid rgba(79, 246, 255, .3);
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
}

.pd-highlight-item b {
    display: block;
    color: white;
    font-size: 15px;
    margin-bottom: 4px;
}

.pd-highlight-item span {
    color: #9FB1C2;
    font-size: 13.5px;
}

/*---------- BEFORE / AFTER TABLE ----------*/

.pd-ba-wrap {
    max-width: 900px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(79, 246, 255, .12);
    background: rgba(255, 255, 255, .02);
}

.pd-ba-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

.pd-ba-row::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .07);
}

.pd-ba-row+.pd-ba-row {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.pd-ba-row span {
    padding: 18px 26px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-ba-head {
    background: rgba(79, 246, 255, .06);
}

.pd-ba-head span {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    font-weight: 600;
}

.pd-ba-before {
    color: #8DA0B2;
}

.pd-ba-before::before {
    content: "×";
    color: #FF6B6B;
    font-weight: 700;
    flex-shrink: 0;
}

.pd-ba-after {
    color: #E7EEF4;
    font-weight: 500;
}

.pd-ba-after::before {
    content: "✓";
    color: var(--cyan);
    font-weight: 700;
    flex-shrink: 0;
}

@media(max-width:640px) {
    .pd-ba-row {
        grid-template-columns: 1fr;
    }

    .pd-ba-row::after {
        display: none;
    }

    .pd-ba-row:not(.pd-ba-head) span:first-child {
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
}

/*---------- PROJECT SPECIFICATIONS ----------*/

.pd-specs-table {
    max-width: 700px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(79, 246, 255, .12);
    background: rgba(255, 255, 255, .02);
}

.pd-specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 26px;
}

.pd-specs-row+.pd-specs-row {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.pd-specs-row span {
    color: #8DA4B8;
    font-size: 12.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.pd-specs-row b {
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
}

.pd-specs-placeholder {
    color: #6E859A !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 400 !important;
    font-style: italic;
    font-size: 12.5px !important;
    text-decoration: underline dashed rgba(79, 246, 255, .3);
    text-underline-offset: 4px;
}

/*---------- SIMILAR APPLICATIONS ----------*/

.pd-similar-grid {
    max-width: 1000px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pd-similar-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .1);
    color: #D3DEE8;
    font-size: 14px;
    transition: .3s;
}

.pd-similar-card span {
    color: var(--cyan);
    transition: .3s;
}

.pd-similar-card:hover {
    border-color: rgba(79, 246, 255, .35);
    background: rgba(79, 246, 255, .04);
}

.pd-similar-card:hover span {
    transform: translateX(4px);
}

@media(max-width:800px) {
    .pd-similar-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:520px) {
    .pd-similar-grid {
        grid-template-columns: 1fr;
    }
}

/*---------- RELATED PRODUCTS ----------*/

.pd-related-grid {
    max-width: 1000px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pd-related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .1);
    transition: .35s;
}

.pd-related-card span {
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.pd-related-card em {
    font-style: normal;
    color: var(--cyan);
    font-size: 13px;
}

.pd-related-card:hover {
    border-color: rgba(79, 246, 255, .35);
    transform: translateY(-5px);
}

@media(max-width:800px) {
    .pd-related-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:520px) {
    .pd-related-grid {
        grid-template-columns: 1fr;
    }
}

/*---------- BLUEPRINT (principles / tag list) ----------*/

.pd-blueprint {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.pd-blueprint h2 {
    margin-top: 22px;
    font-size: clamp(26px, 3.6vw, 40px);
}

.pd-blueprint-list {
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.pd-blueprint-list li {
    padding: 10px 18px;
    border-radius: 30px;
    background: rgba(79, 246, 255, .06);
    border: 1px solid rgba(79, 246, 255, .2);
    color: #C7D3DE;
    font-size: 13px;
}

.pd-blueprint-btn {
    margin-top: 36px;
}

/*---------- ENGINEERING MISSION BRIEF ----------*/

.pd-mission {
    max-width: 780px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(79, 246, 255, .15);
    overflow: hidden;
}

.pd-mission-row {
    display: flex;
    justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.pd-mission-row span {
    color: #7F93A6;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pd-mission-row b {
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    text-align: right;
}

.pd-mission-objective {
    padding: 24px 28px;
    background: rgba(79, 246, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.pd-mission-objective span {
    display: block;
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.pd-mission-objective p {
    color: #E7EEF4;
    font-size: 15px;
    line-height: 1.7;
}

.pd-mission-scope {
    padding: 24px 28px;
}

.pd-mission-scope span {
    display: block;
    color: #7F93A6;
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}

.pd-mission-scope ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.pd-mission-scope li {
    color: #D3DEE8;
    font-size: 13.5px;
}

@media(max-width:600px) {
    .pd-mission-scope ul {
        grid-template-columns: 1fr;
    }

    .pd-mission-row {
        flex-direction: column;
        gap: 4px;
    }

    .pd-mission-row b {
        text-align: left;
    }
}

/*---------- FACTORY THERMAL MAP ----------*/

.pd-thermal-map {
    max-width: 640px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-tm-node {
    width: 100%;
    max-width: 320px;
    padding: 18px 24px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .2);
    text-align: center;
}

.pd-tm-node span {
    display: block;
    color: #7F93A6;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.pd-tm-node b {
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
}

.pd-tm-line {
    width: 2px;
    height: 34px;
    background: linear-gradient(180deg, rgba(79, 246, 255, .5), rgba(79, 246, 255, .1));
    position: relative;
}

.pd-tm-line::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(79, 246, 255, .6);
}

/* the connecting lines between thermal-map nodes carry an animated "drip"
   dot; overflow is hidden so the dot disappears cleanly at each end
   instead of the plain arrowhead used by the static .pd-tm-line above */
.pd-tm-branch-line {
    position: relative;
    width: 2px;
    height: 34px;
    background: linear-gradient(180deg, rgba(79, 246, 255, .5), rgba(79, 246, 255, .1));
    overflow: hidden;
}

.pd-tm-branch-line::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(79, 246, 255, .9);
    animation: pd-tm-drip 1.6s linear infinite;
}

@keyframes pd-tm-drip {
    to {
        top: 130%;
    }
}

.pd-tm-label {
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 6px 0;
}

/* one line fanning out into three (Pump Station -> Lines A/B/C) */
.pd-tm-fan {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 460px;
    margin-top: -2px;
}

.pd-tm-fan svg {
    width: 100%;
    height: 40px;
    overflow: visible;
}

.pd-tm-fan path {
    fill: none;
    stroke: rgba(79, 246, 255, .35);
    stroke-width: 1.6;
}

.pd-tm-loopback {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(79, 246, 255, .05);
    border: 1px dashed rgba(79, 246, 255, .3);
    font-family: 'Orbitron', sans-serif;
    color: #7F93A6;
    font-size: 12px;
    letter-spacing: .5px;
}

.pd-tm-lines {
    display: flex;
    gap: 16px;
    width: 100%;
}

.pd-tm-lines .pd-tm-node {
    max-width: none;
    flex: 1;
}

@media(max-width:560px) {
    .pd-tm-lines {
        flex-direction: column;
    }
}

/* alternate fan-out connector + "view full flow" link — not used by this
   page's thermal map (which uses .pd-tm-fan above) but kept for pages
   that use the shorter one-line-splitting-into-three-columns layout */
.pd-tm-connector {
    width: 100%;
    max-width: 420px;
    height: 46px;
}

.pd-tm-connector svg {
    width: 100%;
    height: 100%;
}

.pd-tm-connector path {
    fill: none;
    stroke: rgba(79, 246, 255, .4);
    stroke-width: 2;
}

.pd-tm-sub {
    display: block;
    color: #7F93A6;
    font-size: 11px;
    margin-top: 4px;
}

/*---------- PROCESS TRANSFORMATION (Before / Target) ----------*/

.pd-transform {
    max-width: 1000px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.pd-transform-col {
    padding: clamp(24px, 3vw, 34px);
    border-radius: 20px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(79, 246, 255, .1);
}

.pd-transform-col h3 {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7F93A6;
    margin-bottom: 22px;
}

.pd-transform-old ul {
    list-style: none;
    padding: 0;
}

.pd-transform-old li {
    color: #9FB1C2;
    font-size: 14px;
    padding: 10px 0;
    position: relative;
}

.pd-transform-old li+li {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.pd-transform-target h3 {
    color: var(--cyan);
}

.pd-transform-target-value {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(30px, 3.4vw, 38px);
    background: linear-gradient(135deg, #42A5FF, #4FF6FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 18px;
}

.pd-transform-target ul {
    list-style: none;
    padding: 0;
}

.pd-transform-target li {
    color: #D3DEE8;
    font-size: 14px;
    padding: 3px 0 3px 22px;
    position: relative;
}

.pd-transform-target li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-size: 11px;
}

@media(max-width:760px) {
    .pd-transform {
        grid-template-columns: 1fr;
    }
}

/*---------- ENGINEERED SYSTEM MODULES ----------*/

.pd-module-grid {
    max-width: 1150px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pd-module-card {
    padding: 26px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .1);
    transition: .35s;
}

.pd-module-card:hover {
    border-color: rgba(79, 246, 255, .3);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(66, 165, 255, .12);
}

.pd-module-index {
    display: block;
    font-family: 'Orbitron', sans-serif;
    color: rgba(79, 246, 255, .35);
    font-size: 22px;
    margin-bottom: 10px;
}

.pd-module-category {
    display: block;
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pd-module-card h3 {
    font-size: 16px;
    margin-bottom: 14px;
}

.pd-module-purpose span {
    display: block;
    color: #7F93A6;
    font-size: 10.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.pd-module-purpose p {
    color: #C7D3DE;
    font-size: 13px;
    line-height: 1.6;
}

@media(max-width:900px) {
    .pd-module-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:560px) {
    .pd-module-grid {
        grid-template-columns: 1fr;
    }
}

/*---------- THERMAL CYCLE STATS ----------*/

.pd-cycle-stats {
    max-width: 480px;
    margin: 36px auto 0;
    display: flex;
    gap: 18px;
}

.pd-cycle-stat {
    flex: 1;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .15);
    text-align: center;
}

.pd-cycle-stat b {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: var(--cyan);
    margin-bottom: 6px;
}

.pd-cycle-stat span {
    color: #8DA4B8;
    font-size: 10.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/*---------- SYSTEM ARCHITECTURE (layered stack) ----------*/

.pd-arch-stack {
    max-width: 520px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-arch-layer {
    width: 100%;
    padding: 22px 26px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .15);
    text-align: center;
}

.pd-arch-layer span.pd-arch-name {
    display: block;
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.pd-arch-layer p {
    color: #9FB1C2;
    font-size: 13.5px;
    line-height: 1.7;
}

/*---------- PERFORMANCE GAUGES (alt widget, not used by this page) ----------*/

.pd-gauge-grid {
    max-width: 1000px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    justify-items: center;
}

.pd-gauge {
    position: relative;
    width: 116px;
    height: 116px;
}

.pd-gauge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--cyan) calc(var(--pct, 50) * 3.6deg), rgba(255, 255, 255, .07) 0);
}

.pd-gauge-inner {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
}

.pd-gauge-inner b {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 14px;
}

.pd-gauge-label {
    margin-top: 12px;
    text-align: center;
    color: #8DA4B8;
    font-size: 10.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

@media(max-width:900px) {
    .pd-gauge-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:560px) {
    .pd-gauge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*---------- ENGINEERING DECISIONS (rationale) ----------*/

.pd-decision-grid {
    max-width: 900px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-decision-card {
    padding: clamp(24px, 3vw, 32px);
    border-radius: 20px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(79, 246, 255, .1);
}

.pd-decision-card h3 {
    font-size: 17px;
    margin-bottom: 20px;
    color: var(--cyan);
}

.pd-decision-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 10px 0;
}

.pd-decision-row+.pd-decision-row {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.pd-decision-row span {
    color: #7F93A6;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-top: 2px;
}

.pd-decision-row p {
    color: #D3DEE8;
    font-size: 14px;
    line-height: 1.6;
}

@media(max-width:560px) {
    .pd-decision-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/*---------- INSTALLATION TIMELINE (alt widget, not used by this page) ----------*/

.pd-exec-timeline {
    max-width: 560px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-exec-step {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .15);
}

.pd-exec-step-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pd-exec-index {
    font-family: 'Orbitron', sans-serif;
    color: var(--cyan);
    font-size: 13px;
}

.pd-exec-step b {
    display: block;
    color: white;
    font-size: 14px;
}

.pd-exec-status {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 30px;
    white-space: nowrap;
}

.pd-exec-status.pd-exec-done {
    color: var(--cyan);
    background: rgba(79, 246, 255, .1);
    border: 1px solid rgba(79, 246, 255, .3);
}

.pd-exec-status.pd-exec-active {
    color: #05070B;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.pd-exec-line {
    width: 2px;
    height: 22px;
    background: rgba(79, 246, 255, .2);
}

@media(max-width:480px) {
    .pd-exec-step {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/*---------- MIXED PERFORMANCE WIDGETS (ring / thermometer / bar / pulse) ----------*/

.pd-widget-grid {
    max-width: 1100px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.pd-widget-card {
    padding: 20px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.pd-widget-label {
    color: #8DA4B8;
    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ring (conic-gradient technique, per-metric color via --ring-color) */
.pd-widget-ring {
    position: relative;
    width: 84px;
    height: 84px;
}

.pd-widget-ring-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color, var(--cyan)) calc(var(--pct, 50) * 3.6deg), rgba(255, 255, 255, .07) 0);
}

.pd-widget-ring-inner {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-widget-ring-inner b {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 12px;
}

/* thermometer widget */
.pd-widget-thermo {
    width: 84px;
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: 90px;
}

.pd-widget-thermo-icon {
    position: relative;
    border: 2px solid rgba(79, 246, 255, .4);
    width: 14px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
}

.pd-widget-thermo-icon::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2px;
    right: 2px;
    height: 65%;
    background: linear-gradient(180deg, var(--cyan), var(--blue));
    border-radius: 10px;
}

.pd-widget-thermo-icon::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(79, 246, 255, .6);
}

.pd-widget-thermo b {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 16px;
}

/* horizontal bar widget */
.pd-widget-bar-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90px;
    gap: 10px;
}

.pd-widget-bar-track {
    width: 80%;
    height: 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.pd-widget-bar-fill {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.pd-widget-bar-wrap b {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 16px;
}

/* pulse widget (continuous operation indicator) */
.pd-widget-pulse {
    width: 84px;
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pd-widget-pulse-dot {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(79, 246, 255, .8);
}

.pd-widget-pulse-dot::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(79, 246, 255, .4);
    animation: pd-pulse-ring 2s ease-out infinite;
}

@keyframes pd-pulse-ring {
    0% {
        transform: scale(.9);
        opacity: 1;
    }

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

.pd-widget-pulse b {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 16px;
}

@media(max-width:900px) {
    .pd-widget-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:560px) {
    .pd-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*---------- GANTT-STYLE EXECUTION TIMELINE (alt widget, not used by this page) ----------*/

.pd-gantt {
    max-width: 640px;
    margin: clamp(50px, 8vw, 80px) auto 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pd-gantt-row {
    padding: 16px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .12);
}

.pd-gantt-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pd-gantt-week {
    color: #7F93A6;
    font-family: 'Orbitron', sans-serif;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pd-gantt-phase {
    color: white;
    font-size: 13.5px;
}

.pd-gantt-track {
    height: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

.pd-gantt-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    width: var(--w, 100%);
}

.pd-gantt-fill.pd-gantt-active {
    background: linear-gradient(90deg, var(--cyan), var(--blue), var(--cyan));
    background-size: 200% 100%;
    animation: pd-gantt-shimmer 2s linear infinite;
}

@keyframes pd-gantt-shimmer {
    to {
        background-position: -200% 0;
    }
}

.pd-gantt-final {
    text-align: center;
    padding-top: 4px;
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
}

/*---------- ENGINEERING DNA (hexagon layout, current design) ----------*/

.pd-dna {
    position: relative;
    max-width: 560px;
    aspect-ratio: 1;
    margin: clamp(60px, 8vw, 90px) auto 0;
}

.pd-dna-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(79, 246, 255, .08);
    border: 1px solid rgba(79, 246, 255, .35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0 40px rgba(79, 246, 255, .18);
    animation: pd-dna-core-pulse 3.2s ease-in-out infinite;
}

@keyframes pd-dna-core-pulse {

    0%,
    100% {
        box-shadow: 0 0 40px rgba(79, 246, 255, .18);
    }

    50% {
        box-shadow: 0 0 62px rgba(79, 246, 255, .32);
    }
}

.pd-dna-core span {
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

.pd-dna-node {
    position: absolute;
    width: 130px;
    padding: 14px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(79, 246, 255, .15);
    text-align: center;
    color: #C7D3DE;
    font-size: 11.5px;
    line-height: 1.4;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .7s ease;
}

.pd-dna-node.in-view {
    opacity: 1;
}

.pd-dna-node:nth-child(2) {
    top: 4%;
    left: 50%;
}

.pd-dna-node:nth-child(3) {
    top: 27%;
    left: 92%;
}

.pd-dna-node:nth-child(4) {
    top: 73%;
    left: 92%;
}

.pd-dna-node:nth-child(5) {
    top: 96%;
    left: 50%;
}

.pd-dna-node:nth-child(6) {
    top: 73%;
    left: 8%;
}

.pd-dna-node:nth-child(7) {
    top: 27%;
    left: 8%;
}

/* segmented dot-rating meter shown inside each hexagon node — this is the
   design the on-page caption calls out ("shown as a segmented meter
   rather than star icons"), so the separate star-rating list further
   down was dropped in favor of this one */
.pd-dna-rating {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
}

.pd-dna-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.pd-dna-dot.pd-dna-filled {
    background: var(--cyan);
    box-shadow: 0 0 6px rgba(79, 246, 255, .6);
}

@media(max-width:600px) {
    .pd-dna {
        max-width: 320px;
    }

    .pd-dna-node {
        width: 108px;
        font-size: 10px;
        padding: 10px 8px;
    }
}

/*---------- ENGINEERING DOCUMENTS (placeholder list, not used by this page) ----------*/

.pd-doc-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.pd-doc-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(79, 246, 255, .25);
    color: #8DA4B8;
    font-size: 12.5px;
}

/*--------------------------Gallery------------------------------*/
/*=========================================================
PROJECT GALLERY
=========================================================*/

.pd-gallery-grid.pd-gallery-masonry {
    display: grid;
    margin: 40px auto 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(220px, 16vw, 280px);
    grid-auto-flow: dense;
    gap: 20px;
}


/* Featured image */
.pd-gallery-grid.pd-gallery-masonry .pd-gallery-tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.pd-gallery-tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #0A0E15;
    border: 1px solid rgba(79, 246, 255, .10);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.pd-gallery-wide {
    grid-column: span 2;
}

.pd-gallery-tall {
    grid-row: span 2;
}

.pd-gallery-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .8s ease;
}

.pd-gallery-tile:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 246, 255, .35);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .35),
        0 0 24px rgba(79, 246, 255, .12);
}

.pd-gallery-tile:hover img {
    transform: scale(1.05);
}

.pd-gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    background:
        linear-gradient(180deg,
            transparent 20%,
            rgba(5, 7, 11, .35) 60%,
            rgba(5, 7, 11, .92) 100%);
    opacity: 0;
    transition: .35s;
}

.pd-gallery-tile:hover .pd-gallery-overlay {
    opacity: 1;
}

.pd-gallery-overlay b {
    color: #fff;
    font-size: 14px;
    letter-spacing: .5px;
}

@media (max-width:900px) {
    .pd-gallery-grid.pd-gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }

    .pd-gallery-grid.pd-gallery-masonry .pd-gallery-tile:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width:600px) {
    .pd-gallery-grid.pd-gallery-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px;
    }

    .pd-gallery-grid.pd-gallery-masonry .pd-gallery-tile:first-child,
    .pd-gallery-wide,
    .pd-gallery-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/*---------- SCROLL REVEAL ----------*/
/* one consolidated set of reveal rules for every card-like block across
   the page, instead of the same declarations being restated twice */

.pd-snap-card,
.pd-analysis-card,
.pd-flow-step,
.pd-equip-card,
.pd-perf-card,
.pd-gallery-tile,
.pd-highlight-item,
.pd-ba-row,
.pd-specs-row,
.pd-similar-card,
.pd-related-card,
.pd-mission-row,
.pd-tm-node,
.pd-transform-col,
.pd-module-card,
.pd-arch-layer,
.pd-gauge,
.pd-decision-card,
.pd-exec-step,
.pd-widget-card,
.pd-gantt-row {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

.pd-snap-card.in-view,
.pd-analysis-card.in-view,
.pd-flow-step.in-view,
.pd-equip-card.in-view,
.pd-perf-card.in-view,
.pd-gallery-tile.in-view,
.pd-highlight-item.in-view,
.pd-ba-row.in-view,
.pd-specs-row.in-view,
.pd-similar-card.in-view,
.pd-related-card.in-view,
.pd-mission-row.in-view,
.pd-tm-node.in-view,
.pd-transform-col.in-view,
.pd-module-card.in-view,
.pd-arch-layer.in-view,
.pd-gauge.in-view,
.pd-decision-card.in-view,
.pd-exec-step.in-view,
.pd-widget-card.in-view,
.pd-gantt-row.in-view {
    opacity: 1;
    transform: translateY(0);
}

/*---------- RESPONSIVE FIXES ----------*/

@media(max-width:480px) {

    .pd-hero,
    .pd-section {
        padding-left: 5%;
        padding-right: 5%;
    }
}