.personnel-transportation-page {
    background: #f3f6f8;
    overflow: hidden;
}

    /* ------------------------------
   SHARED
------------------------------ */
    .personnel-transportation-page .pt-eyebrow,
    .personnel-transportation-page .pt-eyebrow-light {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 1rem;
        line-height: 1;
    }

    .personnel-transportation-page .pt-eyebrow {
        color: #0b4f72;
        background: rgba(11, 79, 114, 0.10);
        border: 1px solid rgba(11, 79, 114, 0.12);
    }

    .personnel-transportation-page .pt-eyebrow-light {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .personnel-transportation-page .pt-section-title {
        font-size: clamp(1.8rem, 3vw, 3rem);
        line-height: 1.15;
        font-weight: 800;
        color: #08273a;
        margin-bottom: 1rem;
    }

    .personnel-transportation-page .pt-hero-text,
    .personnel-transportation-page .pt-section-text {
        font-size: 1.05rem;
        line-height: 1.8;
        color: #435160;
        margin-bottom: 0;
    }

    .personnel-transportation-page .pt-section-text-center {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    .personnel-transportation-page .pt-btn-main,
    .personnel-transportation-page .pt-btn-alt,
    .personnel-transportation-page .pt-btn-light,
    .personnel-transportation-page .pt-dark-btn,
    .personnel-transportation-page .pt-btn-outline {
        border-radius: 999px;
        padding: 0.85rem 1.5rem;
        background: linear-gradient(135deg, var(--accent-color) 0%, #0d5c84 100%);
        color: #fff;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        box-shadow: 0 16px 36px rgba(var(--tech-accent-rgb),0.22);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        text-decoration: none;
        display: inline-block;
    }

        .personnel-transportation-page .pt-btn-main:hover,
        .personnel-transportation-page .pt-btn-alt:hover,
        .personnel-transportation-page .pt-btn-light:hover,
        .personnel-transportation-page .pt-dark-btn:hover,
        .personnel-transportation-page .pt-btn-outline:hover {
            transform: translateY(-2px);
        }

    .personnel-transportation-page .pt-card-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #0b4f72;
        font-weight: 700;
        text-decoration: none;
        transition: gap 0.2s ease, color 0.2s ease;
    }

        .personnel-transportation-page .pt-card-link:hover {
            color: #08344f;
            gap: 0.7rem;
        }

    .personnel-transportation-page .pt-card-link-sm {
        font-size: 0.96rem;
    }

    .personnel-transportation-page .pt-btn-outline {
        color: #1b2b37 !important;
        border: 1px solid rgba(27, 43, 55, 0.22) !important;
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(4px);
        box-shadow: 0 8px 20px rgba(11, 24, 35, 0.04);
    }

        .personnel-transportation-page .pt-btn-outline:hover {
            background: #1b2b37 !important;
            color: #ffffff !important;
            border-color: #1b2b37 !important;
            box-shadow: 0 14px 28px rgba(11, 24, 35, 0.12);
        }

    /* ------------------------------
   HERO
------------------------------ */
    .personnel-transportation-page .pt-hero-section {
        padding: 20px 0;
    }

    .personnel-transportation-page .pt-hero-title {
        font-size: clamp(2.3rem, 4vw, 4.2rem);
        line-height: 1.08;
        font-weight: 800;
        color: #06263a;
        margin-bottom: 1.25rem;
    }

    .personnel-transportation-page .pt-hero-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .personnel-transportation-page .pt-stat-box {
        min-width: 160px;
        padding: 1rem 1.15rem;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 14px 30px rgba(12, 35, 54, 0.08);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

        .personnel-transportation-page .pt-stat-box:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 34px rgba(12, 35, 54, 0.12);
        }

        .personnel-transportation-page .pt-stat-box strong {
            display: block;
            font-size: 1.7rem;
            line-height: 1;
            color: #0b4f72;
            margin-bottom: 0.45rem;
        }

        .personnel-transportation-page .pt-stat-box span {
            display: block;
            font-size: 0.92rem;
            color: #526172;
            line-height: 1.5;
        }

    .personnel-transportation-page .pt-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .personnel-transportation-page .pt-hero-visual {
        position: relative;
    }

    .personnel-transportation-page .pt-main-image {
        width: 100%;
        height: 560px;
        object-fit: cover;
        border-radius: 34px;
        box-shadow: 0 24px 50px rgba(7, 28, 45, 0.14);
    }

    .personnel-transportation-page .pt-floating-badge {
        position: absolute;
        right: -10px;
        bottom: 28px;
        background: #0b4f72;
        color: #fff;
        padding: 1rem 1.4rem;
        border-radius: 999px;
        box-shadow: 0 16px 35px rgba(11, 79, 114, 0.28);
    }

        .personnel-transportation-page .pt-floating-badge span {
            display: block;
            font-size: 0.82rem;
            opacity: 0.82;
        }

        .personnel-transportation-page .pt-floating-badge strong {
            display: block;
            font-size: 1rem;
        }

    /* ------------------------------
   FEATURE STRIP
------------------------------ */
    .personnel-transportation-page .pt-feature-strip {
        padding: 36px 0 20px;
    }

    .personnel-transportation-page .pt-mini-card {
        position: relative;
        height: 100%;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
        border: 1px solid rgba(11, 79, 114, 0.08);
        border-radius: 28px;
        padding: 1.6rem;
        box-shadow: 0 14px 34px rgba(8, 29, 45, 0.06);
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
        overflow: hidden;
    }

        .personnel-transportation-page .pt-mini-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #0b4f72 0%, #38a3d1 100%);
        }

        .personnel-transportation-page .pt-mini-card:hover,
        .personnel-transportation-page .pt-mini-card.is-hovered {
            transform: translateY(-8px);
            box-shadow: 0 24px 48px rgba(8, 29, 45, 0.14);
            border-color: rgba(11, 79, 114, 0.18);
        }

    .personnel-transportation-page .pt-mini-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        margin-bottom: 1.2rem;
    }

    .personnel-transportation-page .pt-mini-icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        background: linear-gradient(135deg, #0b4f72 0%, #116892 100%);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        box-shadow: 0 14px 26px rgba(11, 79, 114, 0.18);
        flex-shrink: 0;
    }

    .personnel-transportation-page .pt-mini-tag {
        display: inline-flex;
        align-items: center;
        height: 34px;
        padding: 0 0.9rem;
        border-radius: 999px;
        background: rgba(11, 79, 114, 0.08);
        color: #0b4f72;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .personnel-transportation-page .pt-mini-card h3 {
        font-size: 1.45rem;
        line-height: 1.2;
        font-weight: 700;
        color: #08273a;
        margin-bottom: 0.9rem;
    }

    .personnel-transportation-page .pt-mini-card p {
        color: #526172;
        line-height: 1.75;
        margin-bottom: 1.25rem;
    }

    /* ------------------------------
   HIGHLIGHT BAND
------------------------------ */
    .personnel-transportation-page .pt-highlight-band {
        padding: 20px 0 20px;
        background: linear-gradient(180deg, #f3f6f8 0%, #eef4f8 100%);
    }

    .personnel-transportation-page .pt-highlight-band-inner {
        background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(240,247,251,0.96) 100%);
        color: #08273a;
        border: 1px solid rgba(11, 79, 114, 0.08);
        border-radius: 30px;
        padding: 2.1rem;
        display: grid;
        grid-template-columns: 120px 1fr auto;
        gap: 1.5rem;
        align-items: center;
        box-shadow: 0 20px 44px rgba(8, 28, 42, 0.08);
        backdrop-filter: blur(8px);
    }

    .personnel-transportation-page .pt-highlight-date-box.pt-highlight-icon-box {
        width: 110px;
        height: 110px;
        border-radius: 28px;
        background: linear-gradient(135deg, #0b4f72 0%, #1271a4 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 16px 30px rgba(11, 79, 114, 0.22);
    }

    .personnel-transportation-page .pt-highlight-icon-box i {
        font-size: 2.35rem;
        color: #ffffff;
    }

    .personnel-transportation-page .pt-highlight-content h2 {
        font-size: clamp(1.8rem, 2.5vw, 2.8rem);
        font-weight: 800;
        margin-bottom: 0.75rem;
        color: #08273a;
    }

    .personnel-transportation-page .pt-highlight-content p {
        margin-bottom: 0;
        line-height: 1.85;
        color: #4f6170;
    }

    .personnel-transportation-page .pt-dark-btn {
        background: linear-gradient(135deg, #0b4f72 0%, #0f6b97 100%);
        color: #fff;
        border: none;
        box-shadow: 0 14px 28px rgba(11, 79, 114, 0.18);
    }

        .personnel-transportation-page .pt-dark-btn:hover {
            background: #1271a4;
            color: #fff;
        }

    /* ------------------------------
   STORY / TIMELINE
------------------------------ */
    .personnel-transportation-page .pt-story-section {
        padding: 30px 0 20px;
    }

    .personnel-transportation-page .pt-timeline {
        position: relative;
        margin-top: 2rem;
        padding-left: 1.5rem;
    }

        .personnel-transportation-page .pt-timeline::before {
            content: "";
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #b8cddd;
        }

    .personnel-transportation-page .pt-timeline-item {
        position: relative;
        padding-left: 1.2rem;
        margin-bottom: 1.8rem;
    }

    .personnel-transportation-page .pt-timeline-dot {
        position: absolute;
        left: -0.1rem;
        top: 0.3rem;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #0b4f72;
        box-shadow: 0 0 0 6px rgba(11, 79, 114, 0.08);
    }

    .personnel-transportation-page .pt-timeline-item h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #0a2a3d;
        margin-bottom: 0.45rem;
    }

    .personnel-transportation-page .pt-timeline-item p {
        margin-bottom: 0;
        color: #4b5b6b;
        line-height: 1.7;
    }

    .personnel-transportation-page .pt-story-image {
        width: 100%;
        height: 520px;
        object-fit: cover;
        border-radius: 28px;
        box-shadow: 0 20px 44px rgba(8, 28, 42, 0.12);
    }

    .personnel-transportation-page .pt-story-mini-grid {
        margin-top: 0.5rem;
    }

    .personnel-transportation-page .pt-side-card {
        background: #ffffff;
        border-radius: 24px;
        padding: 1.5rem;
        height: 100%;
        box-shadow: 0 14px 30px rgba(8, 29, 45, 0.06);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

        .personnel-transportation-page .pt-side-card:hover,
        .personnel-transportation-page .pt-side-card.is-hovered {
            transform: translateY(-6px);
            box-shadow: 0 20px 34px rgba(8, 29, 45, 0.12);
        }

        .personnel-transportation-page .pt-side-card h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #08273a;
            margin-bottom: 0.75rem;
        }

        .personnel-transportation-page .pt-side-card p {
            margin-bottom: 0;
            line-height: 1.7;
            color: #526172;
        }

    /* ------------------------------
   INFO GRID
------------------------------ */
    .personnel-transportation-page .pt-grid-section {
        padding: 34px 0 20px;
    }

    .personnel-transportation-page .pt-section-heading {
        margin-bottom: 2.5rem;
    }

    .personnel-transportation-page .pt-info-card {
        position: relative;
        height: 100%;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
        border: 1px solid rgba(11, 79, 114, 0.08);
        border-radius: 28px;
        padding: 1.7rem;
        box-shadow: 0 14px 34px rgba(8, 29, 45, 0.06);
        overflow: hidden;
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    }

        .personnel-transportation-page .pt-info-card::before {
            content: "";
            position: absolute;
            left: 1.7rem;
            top: 0;
            width: 72px;
            height: 4px;
            background: linear-gradient(90deg, #0b4f72 0%, #3fb0d9 100%);
            border-radius: 999px;
        }

        .personnel-transportation-page .pt-info-card:hover,
        .personnel-transportation-page .pt-info-card.is-hovered {
            transform: translateY(-8px);
            box-shadow: 0 24px 48px rgba(8, 29, 45, 0.13);
            border-color: rgba(11, 79, 114, 0.18);
        }

    .personnel-transportation-page .pt-info-card-accent {
        background: linear-gradient(180deg, #fafdff 0%, #eef7fb 100%);
    }

    .personnel-transportation-page .pt-info-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        background: linear-gradient(135deg, #0b4f72 0%, #1271a4 100%);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
        box-shadow: 0 14px 28px rgba(11, 79, 114, 0.2);
    }

    .personnel-transportation-page .pt-info-card h3 {
        font-size: 1.45rem;
        font-weight: 700;
        color: #08273a;
        margin-bottom: 0.85rem;
    }

    .personnel-transportation-page .pt-info-card p {
        margin-bottom: 1.2rem;
        color: #526172;
        line-height: 1.75;
    }

    /* ------------------------------
   WIDE IMAGE
------------------------------ */
    .personnel-transportation-page .pt-wide-image-section {
        padding: 10px 0 20px;
    }

    .personnel-transportation-page .pt-wide-image-wrap {
        position: relative;
    }

    .personnel-transportation-page .pt-wide-image {
        width: 100%;
        height: 620px;
        object-fit: cover;
        border-radius: 34px;
        box-shadow: 0 22px 48px rgba(7, 27, 44, 0.14);
    }

    .personnel-transportation-page .pt-wide-overlay-card {
        position: absolute;
        left: 40px;
        bottom: 40px;
        max-width: 520px;
        background: rgba(5, 31, 48, 0.82);
        color: #ffffff;
        padding: 1.6rem 1.7rem;
        border-radius: 24px;
        backdrop-filter: blur(8px);
    }

        .personnel-transportation-page .pt-wide-overlay-card h2 {
            font-size: clamp(1.5rem, 2.2vw, 2.3rem);
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 0.75rem;
            color: #ffffff;
        }

        .personnel-transportation-page .pt-wide-overlay-card p {
            margin-bottom: 0;
            color: rgba(255, 255, 255, 0.84);
            line-height: 1.8;
        }

    /* ------------------------------
   FINAL CTA
------------------------------ */
    .personnel-transportation-page .pt-final-cta-section {
        padding: 0 0 90px;
    }

    .personnel-transportation-page .pt-final-cta {
        border-radius: 30px;
        padding: 2rem;
        background: linear-gradient(135deg, #0a4f73 0%, #08344f 100%);
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
    }

        .personnel-transportation-page .pt-final-cta h2 {
            font-size: clamp(1.5rem, 2.5vw, 2.5rem);
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 0;
            color: #ffffff;
        }

    .personnel-transportation-page .pt-final-cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .personnel-transportation-page .pt-btn-light {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.55);
    }

        .personnel-transportation-page .pt-btn-light:hover {
            background: #ffffff;
            color: #08344f;
            border-color: #ffffff;
        }

/* ------------------------------
   RESPONSIVE
------------------------------ */
@media (max-width: 1199.98px) {
    .personnel-transportation-page .pt-highlight-band-inner {
        grid-template-columns: 100px 1fr;
    }

    .personnel-transportation-page .pt-highlight-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .personnel-transportation-page .pt-hero-section {
        padding-top: 20px;
    }

    .personnel-transportation-page .pt-main-image,
    .personnel-transportation-page .pt-story-image,
    .personnel-transportation-page .pt-wide-image {
        height: auto;
    }

    .personnel-transportation-page .pt-final-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .personnel-transportation-page .pt-wide-overlay-card {
        position: static;
        max-width: 100%;
        margin-top: 1rem;
        background: #08344f;
    }
}

@media (max-width: 767.98px) {
    .personnel-transportation-page .pt-floating-badge {
        position: static;
        display: inline-block;
        margin-top: 1rem;
        border-radius: 20px;
    }

    .personnel-transportation-page .pt-highlight-band-inner {
        grid-template-columns: 1fr;
    }

    .personnel-transportation-page .pt-highlight-date-box {
        width: 100%;
        height: auto;
        padding: 1rem;
        flex-direction: row;
        gap: 0.75rem;
    }
}