/*
 * Plus PM Vietnam child theme for Botble Infinia
 * Version 4.1.1
 * UI source: approved Plus PM Vietnam HTML prototype
 * Palette: navy, silver, neutral gray and white only
 * Font: Noto Sans JP (English, Vietnamese and Japanese)
 */

:root,
html[data-bs-theme='light'],
html[data-bs-theme='dark'] {
    --ppmv-navy-950: #00345a;
    --ppmv-navy-900: #073a60;
    --ppmv-navy-800: #0b4b7a;
    --ppmv-navy-650: #416b8b;
    --ppmv-steel: #6f8292;
    --ppmv-silver: #a7aab1;
    --ppmv-silver-200: #d9dde1;
    --ppmv-silver-100: #edf1f4;
    --ppmv-surface: #f7f9fb;
    --ppmv-white: #ffffff;
    --ppmv-ink: #1b2731;
    --ppmv-muted: #596673;
    --ppmv-line: rgba(11, 75, 122, 0.16);
    --ppmv-shadow-sm: 0 12px 34px rgba(0, 52, 90, 0.08);
    --ppmv-shadow-md: 0 20px 48px rgba(0, 52, 90, 0.14);
    --ppmv-shadow-lg: 0 28px 64px rgba(0, 35, 62, 0.22);
    --ppmv-radius-sm: 8px;
    --ppmv-radius: 14px;
    --ppmv-container: 1280px;
    --ppmv-section: clamp(4.75rem, 8vw, 7.5rem);
    --ppmv-font: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --primary-color: #0b4b7a !important;
    --primary-color-rgb: 11, 75, 122 !important;
    --primary-color-dark: #00345a !important;
    --primary-color-dark-rgb: 0, 52, 90 !important;
    --bs-primary: #0b4b7a;
    --bs-primary-rgb: 11, 75, 122;
    --bs-link-color: #0b4b7a;
    --bs-link-hover-color: #00345a;
    --bs-warning: #6f8292;
    --bs-warning-rgb: 111, 130, 146;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

#overview,
#our-journey,
#our-philosophy,
#our-advantage {
    scroll-margin-top: 96px;
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ppmv-ink);
    background: var(--ppmv-white);
    font-family: var(--ppmv-font) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
label,
.font-heading {
    font-family: var(--ppmv-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--ppmv-navy-950);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.018em;
}

p {
    margin-top: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a,
button,
input,
textarea,
select,
summary {
    outline-color: var(--ppmv-navy-800);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(11, 75, 122, 0.34) !important;
    outline-offset: 3px;
    box-shadow: none !important;
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

button,
summary {
    cursor: pointer;
}

::selection {
    color: var(--ppmv-white);
    background: var(--ppmv-silver);
}

html:lang(ja) body {
    line-break: strict;
    word-break: normal;
}

html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) h4 {
    line-height: 1.38;
    letter-spacing: 0;
}

.container {
    width: min(100%, var(--ppmv-container));
    max-width: var(--ppmv-container);
    margin-right: auto;
    margin-left: auto;
    padding-right: 80px;
    padding-left: 80px;
}

.ppmv-main {
    min-height: 60vh;
    padding-top: 80px;
    overflow: clip;
    background: var(--ppmv-white);
}

.ppmv-page-shell {
    padding-top: var(--ppmv-section);
    padding-bottom: var(--ppmv-section);
}

.ppmv-skip-link {
    position: fixed;
    top: 8px;
    left: 12px;
    z-index: 9999;
    padding: 0.65rem 1rem;
    color: var(--ppmv-white);
    background: var(--ppmv-navy-950);
    transform: translateY(-150%);
    transition: transform 180ms ease;
}

.ppmv-skip-link:focus {
    transform: translateY(0);
}

.ppmv-ad-slot:empty,
.d-none,
[hidden] {
    display: none !important;
}

.ppmv-section {
    position: relative;
    padding-top: var(--ppmv-section);
    padding-bottom: var(--ppmv-section);
    background: var(--ppmv-white);
}

.section-padding {
    padding-top: var(--ppmv-section);
    padding-bottom: var(--ppmv-section);
}

.mt-6 {
    margin-top: 3.5rem !important;
}

.mt-7 {
    margin-top: 4rem !important;
}

.truncate-2-custom,
.truncate-3-custom {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.truncate-2-custom {
    -webkit-line-clamp: 2;
}

.truncate-3-custom {
    -webkit-line-clamp: 3;
}

.ppmv-page-content {
    overflow: clip;
}

.ppmv-section-heading {
    width: min(100%, 780px);
    margin: 0 auto 3.5rem;
    text-align: center;
}

.ppmv-section-heading h2,
.ppmv-split-copy h2,
.ppmv-contact-copy h2 {
    margin: 0;
    color: var(--ppmv-navy-950);
    font-size: clamp(2rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.14;
}

.ppmv-section-heading h2::after {
    display: block;
    width: 56px;
    height: 3px;
    margin: 1.15rem auto 0;
    border-radius: 99px;
    background: var(--ppmv-silver);
    content: '';
}

.ppmv-section-heading > p:not(.ppmv-eyebrow) {
    margin: 1.15rem auto 0;
    color: var(--ppmv-muted);
    font-size: 1.06rem;
    line-height: 1.75;
}

.ppmv-section-heading-light h2,
.ppmv-section-heading-light > p:not(.ppmv-eyebrow) {
    color: var(--ppmv-white);
}

.ppmv-section-heading-light > p:not(.ppmv-eyebrow) {
    color: rgba(255, 255, 255, 0.78);
}

.ppmv-eyebrow {
    margin: 0 0 0.85rem;
    color: var(--ppmv-navy-800);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.ppmv-section-heading-light .ppmv-eyebrow,
.ppmv-hero .ppmv-eyebrow,
.ppmv-detail-hero .ppmv-eyebrow,
.ppmv-project-detail-hero .ppmv-eyebrow {
    color: var(--ppmv-silver-200);
}

.ppmv-lead {
    color: var(--ppmv-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.78;
}

.ppmv-section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.ppmv-section-heading-row .ppmv-section-heading {
    margin: 0;
    text-align: left;
}

.ppmv-section-heading-row .ppmv-section-heading h2::after {
    margin-left: 0;
}

.ppmv-heading-action {
    flex: 0 0 auto;
}

.ppmv-button,
.ppmv-btn-primary,
.ppmv-btn-light,
.ppmv-btn-outline,
.ppmv-btn-ghost,
.btn-primary,
.btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 50px;
    padding: 0.78rem 1.45rem;
    border: 1px solid transparent;
    border-radius: var(--ppmv-radius-sm);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.ppmv-button-primary,
.ppmv-btn-primary,
.btn-primary,
.btn-gradient {
    border-color: var(--ppmv-navy-800) !important;
    color: var(--ppmv-white) !important;
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800)) !important;
    box-shadow: 0 12px 26px rgba(0, 52, 90, 0.2);
}

.ppmv-button-primary:hover,
.ppmv-btn-primary:hover,
.btn-primary:hover,
.btn-gradient:hover {
    color: var(--ppmv-white) !important;
    background: linear-gradient(135deg, var(--ppmv-navy-800), var(--ppmv-navy-650)) !important;
    transform: translateY(-2px);
}

.ppmv-button-light,
.ppmv-btn-light {
    border-color: var(--ppmv-white) !important;
    color: var(--ppmv-navy-950) !important;
    background: var(--ppmv-white) !important;
    box-shadow: 0 12px 28px rgba(0, 24, 43, 0.2);
}

.ppmv-button-light:hover,
.ppmv-btn-light:hover {
    color: var(--ppmv-navy-950) !important;
    background: var(--ppmv-silver-100) !important;
    transform: translateY(-2px);
}

.ppmv-button-outline,
.ppmv-btn-outline {
    border-color: rgba(11, 75, 122, 0.48) !important;
    color: var(--ppmv-navy-800) !important;
    background: var(--ppmv-white) !important;
}

.ppmv-button-outline:hover,
.ppmv-btn-outline:hover {
    color: var(--ppmv-white) !important;
    background: var(--ppmv-navy-800) !important;
    transform: translateY(-2px);
}

.ppmv-button-ghost,
.ppmv-btn-ghost {
    border-color: rgba(255, 255, 255, 0.64) !important;
    color: var(--ppmv-white) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
}

.ppmv-button-ghost:hover,
.ppmv-btn-ghost:hover {
    border-color: var(--ppmv-white) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-2px);
}

.ppmv-arrow-link,
.ppmv-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ppmv-navy-800);
    font-size: 0.9rem;
    font-weight: 700;
}

.ppmv-arrow-link span:last-child,
.ppmv-card-link span:last-child {
    transition: transform 180ms ease;
}

.ppmv-arrow-link:hover span:last-child,
.ppmv-card-link:hover span:last-child {
    transform: translateX(5px);
}

/* Header and navigation */
.ppmv-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    min-height: 80px;
    border-bottom: 1px solid rgba(11, 75, 122, 0.1);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 30px rgba(0, 52, 90, 0.055);
    backdrop-filter: blur(16px);
    transition: box-shadow 220ms ease, background 220ms ease;
}

body.ppmv-header-scrolled .ppmv-header {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 12px 34px rgba(0, 52, 90, 0.13);
}

.ppmv-header-inner {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 80px;
}

.ppmv-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 178px;
    height: 70px;
    overflow: hidden;
    line-height: 0;
}

.ppmv-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.ppmv-desktop-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    align-self: stretch;
}

.ppmv-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ppmv-menu-root {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(0.05rem, 0.45vw, 0.48rem);
}

.ppmv-menu-item {
    position: relative;
}

.ppmv-menu-root > .ppmv-menu-item {
    display: flex;
    align-items: stretch;
}

.ppmv-menu-link {
    display: flex;
    position: relative;
    align-items: center;
    gap: 0.48rem;
    padding: 0.75rem clamp(0.6rem, 0.8vw, 0.92rem);
    color: #46535f;
    font-size: 0.93rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 200ms ease, background 200ms ease;
}

.ppmv-menu-root > .ppmv-menu-item > .ppmv-menu-link::after {
    position: absolute;
    right: 0.72rem;
    bottom: 13px;
    left: 0.72rem;
    height: 2px;
    border-radius: 99px;
    background: var(--ppmv-silver);
    content: '';
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
}

.ppmv-menu-link:hover,
.ppmv-menu-link.is-active,
.ppmv-menu-item.is-active > .ppmv-menu-link {
    color: var(--ppmv-navy-800);
}

.ppmv-menu-root > .ppmv-menu-item:hover > .ppmv-menu-link::after,
.ppmv-menu-root > .ppmv-menu-item > .ppmv-menu-link.is-active::after {
    transform: scaleX(1);
}

.ppmv-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    box-shadow: none !important;
    transform: rotate(45deg) translateY(-2px);
    transform-origin: center;
    transition: transform 180ms ease;
}

.ppmv-menu-item:hover > .ppmv-menu-link .ppmv-chevron,
.ppmv-language-switcher[open] summary .ppmv-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.ppmv-submenu {
    visibility: hidden;
    position: absolute;
    top: calc(100% - 7px);
    left: 0;
    min-width: 230px;
    padding: 0.55rem;
    border: 1px solid rgba(11, 75, 122, 0.16);
    border-radius: 12px;
    opacity: 0;
    background: rgba(255, 255, 255, 0.995);
    box-shadow: 0 18px 46px rgba(0, 52, 90, 0.16);
    transform: translateY(9px);
    transition: visibility 0s linear 180ms, opacity 180ms ease, transform 180ms ease;
}

.ppmv-menu-item:hover > .ppmv-submenu,
.ppmv-menu-item:focus-within > .ppmv-submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.ppmv-submenu .ppmv-menu-link {
    min-height: 42px;
    padding: 0.65rem 0.8rem 0.65rem 1rem;
    border-radius: 8px;
    color: #4f5b66;
    font-size: 0.89rem;
}

.ppmv-submenu .ppmv-menu-link::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    border-radius: 99px;
    background: var(--ppmv-navy-800);
    content: '';
    transform: scaleY(0);
    transition: transform 180ms ease;
}

.ppmv-submenu .ppmv-menu-link:hover,
.ppmv-submenu .ppmv-menu-link.is-active {
    color: var(--ppmv-navy-800);
    background: rgba(11, 75, 122, 0.075);
}

.ppmv-submenu .ppmv-menu-link:hover::before,
.ppmv-submenu .ppmv-menu-link.is-active::before {
    transform: scaleY(1);
}

.ppmv-submenu .ppmv-submenu {
    top: -0.55rem;
    left: calc(100% + 0.45rem);
}

.ppmv-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.ppmv-language-switcher {
    position: relative;
}

.ppmv-language-switcher summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 38px;
    padding: 0.45rem 0.78rem;
    border: 1px solid rgba(11, 75, 122, 0.18);
    border-radius: 999px;
    color: var(--ppmv-navy-800);
    background: rgba(11, 75, 122, 0.055);
    font-size: 0.8rem;
    font-weight: 700;
    list-style: none;
}

.ppmv-language-switcher summary::-webkit-details-marker {
    display: none;
}

.ppmv-language-switcher ul {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10;
    width: 190px;
    margin: 0;
    padding: 0.45rem;
    border: 1px solid var(--ppmv-line);
    border-radius: 12px;
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-md);
    list-style: none;
}

.ppmv-language-switcher a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.62rem 0.72rem;
    border-radius: 8px;
    color: var(--ppmv-ink);
    font-size: 0.84rem;
}

.ppmv-language-switcher a small {
    color: var(--ppmv-muted);
}

.ppmv-language-switcher a:hover,
.ppmv-language-switcher a.is-active {
    color: var(--ppmv-navy-800);
    background: rgba(11, 75, 122, 0.075);
}

.ppmv-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid var(--ppmv-line);
    border-radius: 8px;
    background: var(--ppmv-white);
}

.ppmv-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    border-radius: 99px;
    background: var(--ppmv-navy-800);
    transition: transform 200ms ease, opacity 200ms ease;
}

.ppmv-menu-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ppmv-menu-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}

.ppmv-menu-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.ppmv-mobile-panel {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    border-top: 1px solid var(--ppmv-line);
    background: var(--ppmv-white);
    box-shadow: 0 20px 38px rgba(0, 52, 90, 0.12);
}

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

.ppmv-mobile-menu,
.ppmv-mobile-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ppmv-mobile-menu {
    padding: 1rem 0;
}

.ppmv-mobile-menu-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ppmv-line);
}

.ppmv-mobile-menu-link {
    flex: 1;
    padding: 0.85rem 0;
    color: var(--ppmv-ink);
    font-weight: 600;
}

.ppmv-mobile-menu-link:hover,
.ppmv-mobile-menu-link.is-active {
    color: var(--ppmv-navy-800);
}

.ppmv-mobile-submenu-toggle {
    width: 44px;
    height: 44px;
    border: 0;
    color: var(--ppmv-navy-800);
    background: transparent;
}

.ppmv-mobile-submenu-toggle[aria-expanded='true'] .ppmv-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.ppmv-mobile-submenu {
    display: none;
    padding: 0.3rem 0 0.7rem 1rem;
    border-bottom: 1px solid var(--ppmv-line);
}

.ppmv-mobile-menu-item.is-open > .ppmv-mobile-submenu {
    display: block;
}

.ppmv-mobile-submenu .ppmv-mobile-menu-row {
    border-bottom: 0;
}

.ppmv-mobile-submenu .ppmv-mobile-menu-link {
    padding: 0.55rem 0;
    color: var(--ppmv-muted);
    font-size: 0.92rem;
}

.ppmv-mobile-languages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0 1.4rem;
}

.ppmv-mobile-languages-label {
    color: var(--ppmv-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ppmv-mobile-languages > div {
    display: flex;
    gap: 0.45rem;
}

.ppmv-mobile-languages a {
    padding: 0.38rem 0.62rem;
    border: 1px solid var(--ppmv-line);
    border-radius: 999px;
    color: var(--ppmv-navy-800);
    font-size: 0.78rem;
    font-weight: 700;
}

.ppmv-mobile-languages a.is-active {
    color: var(--ppmv-white);
    background: var(--ppmv-navy-800);
}

/* Hero slider and page heroes */
.ppmv-hero,
.ppmv-hero-slider,
.ppmv-hero-slide {
    min-height: 440px;
}

.ppmv-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--ppmv-white);
    background: var(--ppmv-navy-950);
}

.ppmv-hero-slide,
.ppmv-static-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--ppmv-navy-950);
    background-image: var(--ppmv-hero-image);
    background-position: center;
    background-size: cover;
}

.ppmv-hero-picture,
.ppmv-hero-picture img,
.ppmv-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ppmv-hero-picture img {
    object-fit: cover;
    object-position: center;
    filter: saturate(0.76) contrast(1.05);
    transform: scale(1.035);
    transition: transform 8s ease;
}

.ppmv-hero-slide.swiper-slide-active .ppmv-hero-picture img {
    transform: scale(1);
}

.ppmv-ready .ppmv-hero-slide.swiper-slide-active .ppmv-hero-copy,
.ppmv-ready .ppmv-page-hero > .container,
.ppmv-ready .ppmv-detail-hero > .container,
.ppmv-ready .ppmv-project-detail-hero > .container {
    animation: ppmv-rise-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ppmv-rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ppmv-hero-overlay {
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 35, 62, 0.94) 0%, rgba(7, 58, 96, 0.78) 52%, rgba(11, 75, 122, 0.28) 100%), linear-gradient(0deg, rgba(0, 24, 43, 0.44), transparent 56%);
}

.ppmv-hero-row,
.ppmv-static-hero > .container {
    display: flex;
    align-items: flex-end;
    min-height: 440px;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.ppmv-hero-copy {
    width: min(100%, 780px);
}

.ppmv-hero h1,
.ppmv-hero h2 {
    margin: 0;
    color: var(--ppmv-white);
    font-size: clamp(2.5rem, 4.2vw, 3rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.042em;
    text-wrap: balance;
}

.ppmv-hero-description {
    width: min(100%, 700px);
    margin: 1.2rem 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    line-height: 1.7;
}

.ppmv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.ppmv-hero-arrow,
.ppmv-hero .swiper-button-prev,
.ppmv-hero .swiper-button-next {
    top: auto !important;
    bottom: 28px !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 50%;
    color: var(--ppmv-white) !important;
    background: rgba(0, 52, 90, 0.34);
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    transform: none !important;
}

.ppmv-hero .swiper-button-prev {
    right: auto !important;
    left: max(20px, calc((100vw - var(--ppmv-container)) / 2 + 80px)) !important;
}

.ppmv-hero .swiper-button-next {
    right: auto !important;
    left: max(72px, calc((100vw - var(--ppmv-container)) / 2 + 132px)) !important;
}

.ppmv-hero .swiper-button-prev::after,
.ppmv-hero .swiper-button-next::after {
    font-size: 15px;
    font-weight: 700;
}

.ppmv-hero-pagination,
.ppmv-hero .swiper-pagination {
    right: max(20px, calc((100vw - var(--ppmv-container)) / 2 + 80px)) !important;
    bottom: 32px !important;
    left: auto !important;
    width: auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ppmv-hero .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 !important;
    border-radius: 99px;
    opacity: 0.7;
    background: var(--ppmv-white);
    transition: width 240ms ease, opacity 240ms ease;
}

.ppmv-hero .swiper-pagination-bullet-active {
    width: 26px;
    opacity: 1;
}

.ppmv-page-hero {
    position: relative;
    isolation: isolate;
    min-height: 400px;
    overflow: hidden;
    color: var(--ppmv-white);
    background-color: var(--ppmv-navy-950);
    background-image: var(--ppmv-page-hero-image);
    background-position: center;
    background-size: cover;
}

.ppmv-page-hero::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 70px 70px;
    content: '';
    opacity: 0.45;
}

.ppmv-page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 35, 62, 0.92), rgba(11, 75, 122, 0.72) 58%, rgba(65, 107, 139, 0.42));
}

.ppmv-page-hero > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 3rem 0;
    text-align: center;
}

.ppmv-page-hero h1 {
    margin: 0 0 1rem;
    color: var(--ppmv-white);
    font-size: clamp(2.65rem, 5vw, 4rem);
    font-weight: 600;
}

.ppmv-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.85rem;
    list-style: none;
}

.ppmv-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ppmv-breadcrumb a:hover,
.ppmv-breadcrumb [aria-current='page'] {
    color: var(--ppmv-white);
}

.ppmv-breadcrumb-separator {
    color: var(--ppmv-silver);
}

/* Footer */
.ppmv-footer {
    position: relative;
    overflow: hidden;
    padding: 4.75rem 0 1.65rem;
    color: rgba(255, 255, 255, 0.76);
    background: radial-gradient(circle at 8% 5%, rgba(255, 255, 255, 0.08), transparent 27%), linear-gradient(135deg, #002d4d 0%, var(--ppmv-navy-950) 55%, var(--ppmv-navy-800) 100%);
}

.ppmv-footer::after {
    position: absolute;
    right: -2rem;
    bottom: -5rem;
    color: rgba(255, 255, 255, 0.035);
    font-size: clamp(9rem, 20vw, 18rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.08em;
    content: '+PM';
    pointer-events: none;
}

.ppmv-footer > .container {
    position: relative;
    z-index: 2;
}

.ppmv-footer-grid {
    display: grid;
    /* v5.2.0: Quick Links column removed (approved prototype has no 4th
       column). 3 real children remain — brand/company block, Our
       Locations, Plus PM Group — with the brand block getting roughly
       twice the width of the other two, matching the approved layout. */
    grid-template-columns: 2fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 4.5rem);
}

.ppmv-footer-logo {
    display: flex;
    width: 210px;
    height: 78px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.ppmv-footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.ppmv-footer-brand-column > p {
    width: min(100%, 410px);
    margin-bottom: 1.5rem;
}

.ppmv-footer h2 {
    margin: 0 0 1.35rem;
    color: var(--ppmv-white);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ppmv-footer h3 {
    margin: 0 0 0.45rem;
    color: var(--ppmv-white);
    font-size: 0.95rem;
    font-weight: 600;
}

.ppmv-footer-column p {
    margin-bottom: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.65;
}

.ppmv-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ppmv-footer-links li + li {
    margin-top: 0.65rem;
}

.ppmv-footer a {
    transition: color 180ms ease, opacity 180ms ease;
}

.ppmv-footer a:hover {
    color: var(--ppmv-white);
}

.ppmv-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.88rem;
}

.ppmv-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.ppmv-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.ppmv-social-links svg {
    width: 18px;
    height: 18px;
}

.ppmv-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.78rem;
}

.ppmv-footer-bottom p {
    margin: 0;
}

/* Services */
.ppmv-services-section {
    isolation: isolate;
    overflow: hidden;
    color: var(--ppmv-white);
    background: radial-gradient(circle at 8% 15%, rgba(255, 255, 255, 0.14), transparent 28%), radial-gradient(circle at 92% 82%, rgba(167, 170, 177, 0.16), transparent 25%), linear-gradient(135deg, var(--ppmv-navy-900) 0%, var(--ppmv-navy-800) 58%, var(--ppmv-navy-650) 100%);
}

.ppmv-services-section::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    content: '';
    opacity: 0.2;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.ppmv-services-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, rgba(0, 35, 62, 0.93), rgba(11, 75, 122, 0.75)), var(--ppmv-services-image);
    background-position: center;
    background-size: cover;
    opacity: 0.48;
}

.ppmv-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.ppmv-service-card {
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 258px;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--ppmv-radius);
    color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(145deg, rgba(0, 52, 90, 0.96), rgba(7, 58, 96, 0.92)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(167, 170, 177, 0.7), rgba(255, 255, 255, 0.42)) border-box;
    box-shadow: 0 18px 42px rgba(0, 25, 48, 0.2);
    transition: transform 280ms ease, box-shadow 280ms ease, background 280ms ease;
}

.ppmv-service-card:nth-child(even) {
    background: linear-gradient(145deg, rgba(7, 58, 96, 0.96), rgba(11, 75, 122, 0.92)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(167, 170, 177, 0.68), rgba(255, 255, 255, 0.36)) border-box;
}

.ppmv-service-card:hover {
    background: linear-gradient(145deg, var(--ppmv-navy-800), var(--ppmv-navy-650)) padding-box,
        linear-gradient(135deg, var(--ppmv-white), var(--ppmv-silver-200), var(--ppmv-white)) border-box;
    transform: translateY(-9px) scale(1.01);
    box-shadow: 0 27px 58px rgba(0, 25, 48, 0.3);
}

.ppmv-card-line,
.ppmv-service-card-line {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ppmv-white), var(--ppmv-silver), var(--ppmv-silver-200));
}

.ppmv-service-card h3 {
    margin: 0 0 1rem;
    color: var(--ppmv-white);
    font-size: 1.33rem;
    line-height: 1.35;
}

.ppmv-service-card h3 a::after {
    position: absolute;
    inset: 0;
    content: '';
}

.ppmv-service-card p {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.7;
}

.ppmv-service-card .ppmv-arrow-link {
    position: relative;
    z-index: 2;
    margin-top: auto;
    color: var(--ppmv-white);
}

.ppmv-section-action {
    margin-top: 2.5rem;
    text-align: center;
}

.ppmv-services-directory {
    background: var(--ppmv-white) !important;
}

.ppmv-service-category-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin: -0.4rem 0 3.5rem;
}

.ppmv-service-category-menu a {
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(11, 75, 122, 0.24);
    border-radius: 999px;
    color: var(--ppmv-navy-800);
    background: var(--ppmv-white);
    font-size: 0.84rem;
    font-weight: 700;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.ppmv-service-category-menu a:hover,
.ppmv-service-category-menu a.is-active {
    border-color: var(--ppmv-navy-800);
    color: var(--ppmv-white);
    background: var(--ppmv-navy-800);
    transform: translateY(-2px);
}

.ppmv-service-directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.ppmv-service-directory-card {
    display: grid;
    position: relative;
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
    min-height: 290px;
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: linear-gradient(145deg, var(--ppmv-white), var(--ppmv-surface));
    box-shadow: var(--ppmv-shadow-sm);
    transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}

.ppmv-service-directory-card:hover {
    border-color: rgba(11, 75, 122, 0.36);
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-7px);
}

.ppmv-service-directory-image {
    min-height: 100%;
    overflow: hidden;
    background: var(--ppmv-navy-950);
}

.ppmv-service-directory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.04);
    transition: transform 500ms ease;
}

.ppmv-service-directory-card:hover .ppmv-service-directory-image img {
    transform: scale(1.045);
}

.ppmv-service-directory-card > div {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.ppmv-service-directory-card h2 {
    margin-bottom: 0.85rem;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.ppmv-service-directory-card h2 a::after {
    position: absolute;
    inset: 0;
    content: '';
}

.ppmv-service-directory-card p:not(.ppmv-eyebrow) {
    margin-bottom: 1.4rem;
    color: var(--ppmv-muted);
    line-height: 1.7;
}

.ppmv-service-directory-card .ppmv-arrow-link {
    position: relative;
    z-index: 2;
    margin-top: auto;
}

.ppmv-service-sidebar-nav {
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-service-sidebar-label {
    margin: 0;
    padding: 1rem 1.2rem;
    color: var(--ppmv-white);
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ppmv-service-sidebar-nav > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--ppmv-line);
    color: var(--ppmv-navy-950);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 180ms ease, background 180ms ease, padding 180ms ease;
}

.ppmv-service-sidebar-nav > a:last-child {
    border-bottom: 0;
}

.ppmv-service-sidebar-nav > a:hover,
.ppmv-service-sidebar-nav > a.is-active {
    padding-left: 1.35rem;
    color: var(--ppmv-white);
    background: var(--ppmv-navy-800);
}

/* Advantage and flexible feature blocks */
.ppmv-advantage-section {
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at 88% 18%, rgba(11, 75, 122, 0.07), transparent 28%), radial-gradient(circle at 10% 85%, rgba(167, 170, 177, 0.08), transparent 24%), var(--ppmv-white) !important;
}

.ppmv-advantage-section::after {
    position: absolute;
    top: -5rem;
    right: -1.25rem;
    z-index: 0;
    color: rgba(11, 75, 122, 0.045);
    font-size: clamp(8rem, 18vw, 16rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.08em;
    content: '+PM';
    pointer-events: none;
}

.ppmv-advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.ppmv-advantage-card {
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 220px;
    padding: 2rem 1.65rem;
    overflow: hidden;
    border-radius: var(--ppmv-radius);
    color: rgba(255, 255, 255, 0.78);
    background: var(--ppmv-navy-950);
    box-shadow: 0 16px 38px rgba(0, 52, 90, 0.15);
    transition: transform 280ms ease, box-shadow 280ms ease;
}

.ppmv-advantage-card:nth-child(2) { background: var(--ppmv-navy-800); }
.ppmv-advantage-card:nth-child(3) { background: var(--ppmv-navy-650); }
.ppmv-advantage-card:nth-child(4n) { background: var(--ppmv-steel); }

.ppmv-advantage-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--ppmv-silver-200);
    content: '';
}

.ppmv-advantage-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 52px rgba(0, 52, 90, 0.23);
}

.ppmv-advantage-index {
    position: absolute;
    top: 0.35rem;
    right: 0.9rem;
    color: rgba(255, 255, 255, 0.12);
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1;
}

.ppmv-advantage-card h3 {
    position: relative;
    z-index: 1;
    max-width: 82%;
    margin: 2.6rem 0 0.8rem;
    color: var(--ppmv-white);
    font-size: 1.18rem;
}

.ppmv-advantage-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.94rem;
    line-height: 1.65;
}

.ppmv-feature-section {
    background: var(--ppmv-white);
}

.ppmv-feature-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
    gap: clamp(2rem, 5vw, 5rem);
}

.ppmv-feature-visual,
.ppmv-split-visual,
.ppmv-history-image,
.ppmv-process-image {
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-surface);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-feature-visual img,
.ppmv-split-visual img,
.ppmv-history-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppmv-feature-visual:hover img,
.ppmv-split-visual:hover img,
.ppmv-history-image:hover img {
    transform: scale(1.035);
}

.ppmv-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.ppmv-feature-card {
    padding: 1.7rem;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.ppmv-feature-card:hover {
    border-color: rgba(11, 75, 122, 0.44);
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-5px);
}

.ppmv-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: 10px;
    color: var(--ppmv-white);
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-650));
}

.ppmv-feature-icon img,
.ppmv-feature-icon svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
}

.ppmv-feature-card h3 {
    margin-bottom: 0.6rem;
    font-size: 1.08rem;
}

.ppmv-feature-card p {
    margin: 0;
    color: var(--ppmv-muted);
    font-size: 0.93rem;
}

/* About, history and philosophy */
.ppmv-split-layout,
.ppmv-careers-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);
}

.ppmv-split-layout.is-reversed .ppmv-split-copy {
    order: 2;
}

.ppmv-split-copy h2,
.ppmv-careers-intro h2 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.15rem, 4vw, 3.75rem);
}

.ppmv-split-copy > p:last-of-type {
    color: var(--ppmv-muted);
}

.ppmv-mini-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.ppmv-mini-feature-grid > div {
    position: relative;
    padding: 1.2rem;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius-sm);
    background: var(--ppmv-white);
}

.ppmv-mini-feature-grid span {
    color: var(--ppmv-silver);
    font-size: 0.75rem;
    font-weight: 700;
}

.ppmv-mini-feature-grid h3 {
    margin: 0.35rem 0;
    font-size: 1rem;
}

.ppmv-mini-feature-grid p {
    margin: 0;
    color: var(--ppmv-muted);
    font-size: 0.86rem;
}

.ppmv-global-expertise-section {
    color: var(--ppmv-white);
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800) 62%, var(--ppmv-navy-650));
}

.ppmv-global-expertise-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.ppmv-global-expertise-heading > div {
    display: flex;
    align-items: center;
    gap: 1.3rem;
}

.ppmv-global-expertise-heading h2 {
    margin: 0;
    color: var(--ppmv-white);
    font-size: clamp(2.1rem, 4vw, 3.6rem);
}

.ppmv-global-expertise-heading > p {
    width: min(100%, 520px);
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
}

.ppmv-global-mark {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
}

.ppmv-expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ppmv-radius);
    background: rgba(255, 255, 255, 0.2);
}

.ppmv-expertise-grid article {
    position: relative;
    min-height: 190px;
    padding: 1.7rem;
    background: rgba(0, 52, 90, 0.72);
    transition: background 200ms ease;
}

.ppmv-expertise-grid article:hover {
    background: rgba(65, 107, 139, 0.72);
}

.ppmv-expertise-grid strong {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--ppmv-white);
    font-size: 2rem;
}

.ppmv-expertise-grid h3 {
    color: var(--ppmv-white);
    font-size: 1.08rem;
}

.ppmv-expertise-grid p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.ppmv-expertise-grid article > a:last-child {
    position: absolute;
    inset: 0;
}

.ppmv-history-section {
    background: var(--ppmv-white) !important;
}

.ppmv-history-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
}

.ppmv-history-image {
    min-height: 440px;
}

.ppmv-history-timeline {
    position: relative;
    padding-left: 2rem;
}

.ppmv-history-timeline::before {
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 6px;
    width: 1px;
    background: linear-gradient(var(--ppmv-navy-800), var(--ppmv-silver));
    content: '';
}

.ppmv-history-event {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 1.2rem;
    margin-bottom: 2rem;
    transform: translateX(-2rem);
}

.ppmv-history-event > span {
    width: 13px;
    height: 13px;
    margin-top: 0.45rem;
    border: 3px solid var(--ppmv-white);
    border-radius: 50%;
    background: var(--ppmv-silver);
    box-shadow: 0 0 0 1px var(--ppmv-navy-800);
}

.ppmv-history-event.is-highlighted > span {
    background: var(--ppmv-navy-800);
}

.ppmv-history-event h3 {
    margin-bottom: 0.45rem;
    font-size: 1.16rem;
}

.ppmv-history-event p {
    margin: 0;
    color: var(--ppmv-muted);
}

.ppmv-philosophy-section {
    overflow: hidden;
    color: var(--ppmv-white);
    background: radial-gradient(circle at 95% 0%, rgba(255, 255, 255, 0.11), transparent 34%), linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800) 64%, var(--ppmv-navy-650)) !important;
}

.ppmv-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.ppmv-principle-card {
    position: relative;
    min-height: 230px;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--ppmv-radius);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    transition: transform 240ms ease, background 240ms ease;
}

.ppmv-principle-card:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-6px);
}

.ppmv-principle-card > span {
    display: block;
    margin-bottom: 2.5rem;
    color: var(--ppmv-silver-200);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.ppmv-principle-card h3 {
    color: var(--ppmv-white);
    font-size: 1.3rem;
}

.ppmv-principle-card strong,
.ppmv-principle-card blockquote {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.7;
}

.ppmv-philosophy-image {
    height: 320px;
    margin: 2.5rem 0 0;
    overflow: hidden;
    border-radius: var(--ppmv-radius);
}

.ppmv-philosophy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.25) saturate(0.72);
}

/* Projects and news */
.ppmv-projects-section,
.ppmv-latest-news-section,
.ppmv-news-listing,
.ppmv-related-section {
    background: linear-gradient(180deg, var(--ppmv-white), var(--ppmv-surface));
}

.ppmv-listing-heading {
    width: min(100%, 780px);
    text-align: center;
}

.ppmv-listing-heading h1,
.ppmv-listing-heading h2 {
    margin: 0;
    color: var(--ppmv-navy-950);
    font-size: clamp(2rem, 3.2vw, 2.5rem);
}

.ppmv-listing-heading > p:not(.ppmv-eyebrow) {
    margin: 1rem auto 0;
    color: var(--ppmv-muted);
}

.ppmv-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.ppmv-project-card {
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.ppmv-project-card:hover {
    border-color: rgba(11, 75, 122, 0.42);
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-7px);
}

.ppmv-project-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ppmv-silver-100);
}

.ppmv-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppmv-project-card:hover .ppmv-project-image img {
    transform: scale(1.045);
}

.ppmv-project-copy {
    padding: 1.55rem;
}

.ppmv-project-sector {
    margin-bottom: 0.45rem;
    color: var(--ppmv-steel);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ppmv-project-copy h3 {
    margin-bottom: 0.75rem;
    font-size: 1.18rem;
}

.ppmv-project-copy p:not(.ppmv-project-sector) {
    color: var(--ppmv-muted);
    font-size: 0.92rem;
}

.ppmv-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: -0.5rem 0 2.5rem;
    padding: 0.65rem;
    border: 1px solid var(--ppmv-line);
    border-radius: 12px;
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-filter-bar button {
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ppmv-muted);
    background: transparent;
    font-size: 0.86rem;
    font-weight: 600;
}

.ppmv-filter-bar button:hover,
.ppmv-filter-bar button.is-active {
    color: var(--ppmv-white);
    background: var(--ppmv-navy-800);
}

.ppmv-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.ppmv-news-card {
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.ppmv-news-card:hover {
    border-color: rgba(11, 75, 122, 0.42);
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-6px);
}

.ppmv-news-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ppmv-silver-100);
}

.ppmv-news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 620ms ease;
}

.ppmv-news-card:hover .ppmv-news-card-media img {
    transform: scale(1.045);
}

.ppmv-news-card-body {
    padding: 1.5rem;
}

.ppmv-news-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    color: var(--ppmv-steel);
    font-size: 0.74rem;
}

.ppmv-category-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    color: var(--ppmv-navy-800);
    background: rgba(11, 75, 122, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
}

.ppmv-news-card h2 {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    line-height: 1.42;
}

.ppmv-news-card-body > p {
    color: var(--ppmv-muted);
    font-size: 0.91rem;
}

.ppmv-news-list {
    width: min(100%, 1040px);
}

.ppmv-news-row {
    display: grid;
    grid-template-columns: 230px 1fr 48px;
    align-items: center;
    gap: 1.6rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--ppmv-line);
}

.ppmv-news-row-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
}

.ppmv-news-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppmv-news-row h2 {
    margin: 0;
    font-size: 1.18rem;
}

.ppmv-news-row-copy > p {
    margin: 0.6rem 0 0;
    color: var(--ppmv-muted);
}

.ppmv-row-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ppmv-line);
    border-radius: 50%;
    color: var(--ppmv-navy-800);
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.ppmv-news-row:hover .ppmv-row-arrow {
    color: var(--ppmv-white);
    background: var(--ppmv-navy-800);
    transform: translateX(4px);
}

/* Careers */
.ppmv-careers-intro {
    background: var(--ppmv-white) !important;
}

.ppmv-careers-visual {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 470px;
    overflow: hidden;
    border-radius: var(--ppmv-radius);
    color: var(--ppmv-white);
    background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.16), transparent 25%), linear-gradient(145deg, var(--ppmv-navy-950), var(--ppmv-navy-800) 62%, var(--ppmv-navy-650));
    box-shadow: var(--ppmv-shadow-md);
}

.ppmv-careers-visual::before,
.ppmv-careers-visual::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    content: '';
}

.ppmv-careers-visual::before {
    width: 320px;
    height: 320px;
}

.ppmv-careers-visual::after {
    width: 430px;
    height: 430px;
}

.ppmv-careers-visual span {
    position: relative;
    z-index: 2;
    font-size: clamp(5rem, 12vw, 9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.08em;
}

.ppmv-careers-visual small {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ppmv-careers-intro-grid > div:last-child > p:last-child {
    color: var(--ppmv-muted);
}

.ppmv-career-benefits {
    background: linear-gradient(180deg, #fbfcfd, var(--ppmv-surface)) !important;
}

.ppmv-career-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-line);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-career-benefit {
    position: relative;
    min-height: 220px;
    padding: 2rem;
    background: var(--ppmv-white);
    transition: background 200ms ease;
}

.ppmv-career-benefit:hover {
    background: #f1f5f8;
}

.ppmv-career-benefit > span {
    display: block;
    margin-bottom: 2.2rem;
    color: var(--ppmv-silver);
    font-size: 0.76rem;
    font-weight: 700;
}

.ppmv-career-benefit h3 {
    margin-bottom: 0.65rem;
    font-size: 1.2rem;
}

.ppmv-career-benefit p {
    margin: 0;
    color: var(--ppmv-muted);
}

.ppmv-careers-open {
    background: var(--ppmv-white) !important;
}

.ppmv-job-list {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.ppmv-job-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.ppmv-job-row:hover {
    border-color: rgba(11, 75, 122, 0.44);
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-4px);
}

.ppmv-job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.ppmv-job-tags span,
.ppmv-detail-meta span {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.62rem;
    border: 1px solid var(--ppmv-line);
    border-radius: 999px;
    color: var(--ppmv-muted);
    background: var(--ppmv-surface);
    font-size: 0.72rem;
    font-weight: 600;
}

.ppmv-job-row h3 {
    margin-bottom: 0.55rem;
    font-size: 1.3rem;
}

.ppmv-job-row p {
    max-width: 850px;
    margin: 0;
    color: var(--ppmv-muted);
}

.ppmv-general-application {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3.5rem;
    padding: 2rem;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-surface);
}

.ppmv-general-application h3 {
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
}

.ppmv-general-application p {
    margin: 0;
    color: var(--ppmv-muted);
}

.ppmv-empty-state {
    padding: 2rem;
    border: 1px dashed var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    color: var(--ppmv-muted);
    text-align: center;
}

/* Detail pages */
.ppmv-detail-hero,
.ppmv-project-detail-hero {
    position: relative;
    isolation: isolate;
    min-height: 520px;
    overflow: hidden;
    color: var(--ppmv-white);
    background-color: var(--ppmv-navy-950);
    background-image: linear-gradient(90deg, rgba(0, 35, 62, 0.94), rgba(11, 75, 122, 0.72) 58%, rgba(11, 75, 122, 0.28)), var(--ppmv-detail-image);
    background-position: center;
    background-size: cover;
}

.ppmv-detail-hero::after,
.ppmv-project-detail-hero::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(0deg, rgba(0, 24, 43, 0.58), transparent 62%);
    content: '';
}

.ppmv-detail-hero > .container,
.ppmv-project-detail-hero > .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 520px;
    padding-top: 5rem;
    padding-bottom: 4rem;
}

.ppmv-detail-hero h1,
.ppmv-project-detail-hero h1 {
    width: min(100%, 900px);
    margin: 0;
    color: var(--ppmv-white);
    font-size: clamp(2.7rem, 5vw, 4rem);
    line-height: 1.08;
}

.ppmv-project-detail-hero,
.ppmv-project-detail-hero > .container {
    min-height: min(760px, calc(100vh - 80px));
}

.ppmv-detail-hero > .container > p:not(.ppmv-eyebrow),
.ppmv-project-detail-hero > .container > p:not(.ppmv-eyebrow) {
    width: min(100%, 760px);
    margin: 1.15rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
}

.ppmv-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.35rem;
}

.ppmv-detail-meta span {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--ppmv-white);
    background: rgba(255, 255, 255, 0.1);
}

.ppmv-detail-hero .ppmv-button {
    margin-top: 1.7rem;
}

.ppmv-project-facts-section {
    position: relative;
    z-index: 4;
    border-bottom: 1px solid var(--ppmv-line);
    background: var(--ppmv-white);
    box-shadow: 0 14px 32px rgba(0, 52, 90, 0.06);
}

.ppmv-project-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    margin: 0;
}

.ppmv-project-facts > div {
    padding: 1.35rem 1rem;
    border-right: 1px solid var(--ppmv-line);
}

.ppmv-project-facts > div:last-child {
    border-right: 0;
}

.ppmv-project-facts dt {
    margin-bottom: 0.32rem;
    color: var(--ppmv-steel);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ppmv-project-facts dd {
    margin: 0;
    color: var(--ppmv-navy-950);
    font-size: 0.94rem;
    font-weight: 600;
}

.ppmv-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
}

.ppmv-detail-layout.has-sidebar,
.ppmv-career-detail .ppmv-detail-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.ppmv-detail-surface,
.ppmv-content-surface {
    color: var(--ppmv-ink);
    font-size: 1rem;
    line-height: 1.82;
}

.ppmv-detail-surface > :first-child,
.ppmv-content-surface > :first-child {
    margin-top: 0;
}

.ppmv-detail-surface h2,
.ppmv-content-surface h2 {
    position: relative;
    margin: 2.8rem 0 1.1rem;
    padding-left: 1rem;
    font-size: clamp(1.55rem, 2.8vw, 2.25rem);
}

.ppmv-detail-surface h2::before,
.ppmv-content-surface h2::before {
    position: absolute;
    top: 0.2em;
    bottom: 0.2em;
    left: 0;
    width: 3px;
    border-radius: 99px;
    background: var(--ppmv-silver);
    content: '';
}

.ppmv-detail-surface h3,
.ppmv-content-surface h3 {
    margin: 2rem 0 0.8rem;
    font-size: 1.25rem;
}

.ppmv-detail-surface p,
.ppmv-detail-surface li,
.ppmv-content-surface p,
.ppmv-content-surface li {
    color: var(--ppmv-muted);
}

.ppmv-detail-surface ul,
.ppmv-content-surface ul,
.ck-content ul {
    padding-left: 0;
    list-style: none;
}

.ppmv-detail-surface li,
.ppmv-content-surface li,
.ck-content > ul > li {
    position: relative;
    padding-left: 1.7rem;
}

.ppmv-detail-surface li::before,
.ppmv-content-surface li::before,
.ck-content > ul > li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 15px;
    height: 15px;
    background: var(--ppmv-navy-800);
    border-radius: 50%;
    content: '';
}

.ppmv-detail-surface li::after,
.ppmv-content-surface li::after,
.ck-content > ul > li::after {
    position: absolute;
    top: 0.78em;
    left: 4px;
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--ppmv-white, #fff);
    border-bottom: 2px solid var(--ppmv-white, #fff);
    transform: rotate(-45deg);
    content: '';
}

.ppmv-detail-surface img,
.ppmv-content-surface img,
.ck-content img {
    border-radius: var(--ppmv-radius);
}

.ppmv-detail-surface table,
.ppmv-content-surface table,
.ck-content table {
    width: 100%;
    border-collapse: collapse;
}

.ppmv-detail-surface th,
.ppmv-detail-surface td,
.ppmv-content-surface th,
.ppmv-content-surface td,
.ck-content th,
.ck-content td {
    padding: 0.9rem 1rem;
    border: 1px solid var(--ppmv-line);
    vertical-align: top;
}

.ppmv-detail-surface th,
.ppmv-content-surface th,
.ck-content th {
    color: var(--ppmv-navy-950);
    background: var(--ppmv-surface);
}

.ppmv-detail-sidebar,
.ppmv-career-sidebar > div {
    height: max-content;
    padding: 1.5rem;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-surface);
}

.ppmv-career-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ppmv-career-sidebar h2 {
    margin-bottom: 1.2rem;
    font-size: 1.25rem;
}

.ppmv-career-sidebar p {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ppmv-line);
    color: var(--ppmv-muted);
}

.ppmv-career-sidebar p:last-child {
    border-bottom: 0;
}

.ppmv-career-sidebar strong {
    color: var(--ppmv-navy-950);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.ppmv-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ppmv-line);
}

.ppmv-share-row p {
    margin: 0;
    color: var(--ppmv-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.ppmv-gallery-section {
    background: var(--ppmv-surface) !important;
}

.ppmv-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.ppmv-gallery-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ppmv-radius);
}

.ppmv-gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.ppmv-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.ppmv-gallery-item:hover img {
    transform: scale(1.04);
}

.ppmv-lightbox {
    width: min(94vw, 1200px);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: var(--ppmv-radius);
    background: transparent;
    box-shadow: var(--ppmv-shadow-lg);
}

.ppmv-lightbox::backdrop {
    background: rgba(0, 24, 43, 0.88);
    backdrop-filter: blur(8px);
}

.ppmv-lightbox img {
    display: block;
    width: 100%;
    max-height: 88vh;
    border-radius: var(--ppmv-radius);
    object-fit: contain;
}

.ppmv-lightbox button {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: var(--ppmv-white);
    background: rgba(0, 52, 90, 0.78);
    font-size: 1.55rem;
    line-height: 1;
}

.ppmv-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.ppmv-related-card {
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 180px;
    padding: 1.6rem;
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.ppmv-related-card:hover {
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-5px);
}

.ppmv-related-card > p,
.ppmv-related-card > small {
    margin-bottom: 1.5rem;
    color: var(--ppmv-steel);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ppmv-related-card h3 {
    margin: auto 0 0.7rem;
    font-size: 1.18rem;
}

.ppmv-related-card > span:last-child {
    color: var(--ppmv-navy-800);
}

.ppmv-related-card-image {
    min-height: 300px;
    padding: 0;
    background: var(--ppmv-navy-950);
}

.ppmv-related-card-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.58;
    object-fit: cover;
    transition: transform 500ms ease;
}

.ppmv-related-card-image:hover > img {
    transform: scale(1.04);
}

.ppmv-related-card-image > span {
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 1.5rem;
    color: var(--ppmv-white);
    background: linear-gradient(transparent, rgba(0, 35, 62, 0.88));
}

.ppmv-related-card-image strong {
    font-size: 1.15rem;
}

/* Blog detail */
.ppmv-news-detail {
    padding-top: var(--ppmv-section);
    padding-bottom: var(--ppmv-section);
}

.ppmv-article-heading,
.ppmv-article-content {
    width: min(100%, 820px);
}

.ppmv-article-heading h1 {
    margin: 1rem 0;
    font-size: clamp(2.45rem, 5vw, 4.55rem);
}

.ppmv-article-lead {
    color: var(--ppmv-muted);
    font-size: 1.12rem;
}

.ppmv-article-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--ppmv-line);
    border-bottom: 1px solid var(--ppmv-line);
}

.ppmv-author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.ppmv-author img {
    width: 42px;
    height: 42px;
    object-fit: cover;
}

.ppmv-author span {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
}

.ppmv-author time,
.ppmv-reading-time {
    color: var(--ppmv-muted);
}

.ppmv-article-media {
    width: min(100%, 1120px);
    overflow: hidden;
    border-radius: var(--ppmv-radius);
}

.ppmv-article-media img {
    width: 100%;
}

.ppmv-related-posts {
    background: linear-gradient(180deg, var(--ppmv-white), var(--ppmv-surface));
}

.ppmv-error-page {
    display: grid;
    min-height: min(760px, calc(100vh - 80px));
    place-items: center;
    padding: var(--ppmv-section) 0;
    background:
        radial-gradient(circle at 82% 18%, rgba(167, 170, 177, 0.2), transparent 28%),
        linear-gradient(145deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
}

.ppmv-error-card {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4.5rem);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--ppmv-radius);
    color: rgba(255, 255, 255, 0.78);
    background: rgba(0, 34, 60, 0.38);
    box-shadow: var(--ppmv-shadow-lg);
    text-align: center;
    backdrop-filter: blur(14px);
}

.ppmv-error-code {
    margin-bottom: 0.75rem;
    color: var(--ppmv-silver-200);
    font-size: clamp(3.5rem, 11vw, 7.5rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.ppmv-error-card h1 {
    margin-bottom: 1rem;
    color: var(--ppmv-white);
    font-size: clamp(2rem, 4vw, 3rem);
}

.ppmv-error-card p {
    max-width: 600px;
    margin: 0 auto 2rem;
}

.ppmv-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

/* Contact and CTA */
.ppmv-contact-section {
    isolation: isolate;
    background: var(--ppmv-white) !important;
}

.ppmv-contact-section::before {
    position: absolute;
    inset: 0 50% 0 0;
    z-index: 0;
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800)), var(--ppmv-contact-image);
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    content: '';
}

.ppmv-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.ppmv-contact-copy {
    padding-right: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.ppmv-contact-copy h2,
.ppmv-contact-copy .ppmv-lead {
    color: var(--ppmv-white);
}

.ppmv-contact-copy .ppmv-eyebrow {
    color: var(--ppmv-silver-200);
}

.ppmv-contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.ppmv-contact-info-grid article {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--ppmv-radius-sm);
    background: rgba(255, 255, 255, 0.07);
}

.ppmv-contact-info-grid h3 {
    color: var(--ppmv-white);
    font-size: 0.98rem;
}

.ppmv-contact-info-grid p,
.ppmv-contact-info-grid a {
    display: block;
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    line-height: 1.6;
}

.ppmv-contact-info-grid a:hover {
    color: var(--ppmv-white);
}

.ppmv-contact-form-card {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-lg);
}

.ppmv-contact-form-card h2 {
    margin-bottom: 0.6rem;
    font-size: 1.75rem;
}

.ppmv-contact-form-card > p {
    color: var(--ppmv-muted);
}

.ppmv-form-field,
.ppmv-contact-form-card .form-group,
.ppmv-contact-form-card .mb-3 {
    margin-bottom: 1rem !important;
}

.ppmv-contact-form-card .form-label,
.ppmv-contact-form-card label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ppmv-ink);
    font-size: 0.82rem;
    font-weight: 600;
}

.ppmv-contact-form-card .form-control,
.ppmv-contact-form-card input,
.ppmv-contact-form-card textarea,
.ppmv-contact-form-card select {
    width: 100%;
    min-height: 48px;
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(11, 75, 122, 0.2);
    border-radius: 8px;
    color: var(--ppmv-ink);
    background: var(--ppmv-surface);
    box-shadow: none;
}

.ppmv-contact-form-card textarea {
    min-height: 140px;
}

.ppmv-contact-form-card .form-control:focus,
.ppmv-contact-form-card input:focus,
.ppmv-contact-form-card textarea:focus,
.ppmv-contact-form-card select:focus {
    border-color: var(--ppmv-navy-800);
    background: var(--ppmv-white);
    box-shadow: 0 0 0 3px rgba(11, 75, 122, 0.1);
}

.ppmv-contact-block,
.ppmv-cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--ppmv-white);
    background: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.1), transparent 30%), linear-gradient(135deg, var(--ppmv-navy-900), var(--ppmv-navy-800) 62%, var(--ppmv-navy-650));
}

.ppmv-contact-block::before,
.ppmv-cta-section::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, rgba(0, 35, 62, 0.86), rgba(11, 75, 122, 0.62)), var(--ppmv-contact-block-image, var(--ppmv-cta-image));
    background-position: center;
    background-size: cover;
    content: '';
    opacity: 0.58;
}

.ppmv-contact-block > .container,
.ppmv-cta-section > .container {
    display: flex;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-height: 240px;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.ppmv-contact-block h2,
.ppmv-cta-section h2 {
    margin: 0;
    color: var(--ppmv-white);
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.ppmv-contact-block p,
.ppmv-cta-section p {
    margin: 0.75rem 0 0;
    color: rgba(255, 255, 255, 0.78);
}

.ppmv-contact-block-detail {
    display: block;
    margin-top: 0.75rem;
    color: var(--ppmv-white);
    font-weight: 600;
}

.ppmv-site-contact {
    padding: 1rem 0;
    color: var(--ppmv-white);
    background: linear-gradient(90deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
}

.ppmv-site-contact > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.ppmv-site-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ppmv-site-contact p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
}

.ppmv-site-contact .ppmv-arrow-link {
    color: var(--ppmv-white);
}

/* Feature tabs */
.ppmv-feature-tabs {
    overflow: hidden;
    padding-top: var(--ppmv-section);
    padding-bottom: var(--ppmv-section);
    background: linear-gradient(180deg, var(--ppmv-white), var(--ppmv-surface));
}

.ppmv-feature-tabs-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0.07;
    pointer-events: none;
}

.ppmv-feature-tabs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) saturate(0);
}

.ppmv-service-nav {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ppmv-service-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 58px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ppmv-line);
    border-radius: 9px;
    color: var(--ppmv-muted);
    background: var(--ppmv-white);
    font-weight: 600;
    text-align: left;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.ppmv-service-nav .nav-link:hover,
.ppmv-service-nav .nav-link.active {
    color: var(--ppmv-white);
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
    box-shadow: var(--ppmv-shadow-sm);
    transform: translateX(5px);
}

.ppmv-service-nav-arrow {
    font-size: 1.1rem;
    transition: transform 180ms ease;
}

.ppmv-service-nav .nav-link:hover .ppmv-service-nav-arrow,
.ppmv-service-nav .nav-link.active .ppmv-service-nav-arrow {
    transform: translateX(4px);
}

.ppmv-service-tab-panel {
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-md);
}

.ppmv-service-tab-image {
    min-height: 100%;
    overflow: hidden;
}

.ppmv-service-tab-image img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.ppmv-service-tab-copy {
    padding: clamp(1.5rem, 4vw, 3rem);
}

.ppmv-service-tab-copy h3 {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.ppmv-service-tab-intro {
    color: var(--ppmv-muted);
}

.ppmv-service-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.6rem;
}

.ppmv-service-feature {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.8rem;
}

.ppmv-service-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    color: var(--ppmv-white);
    background: var(--ppmv-navy-800);
}

.ppmv-service-feature-icon img,
.ppmv-service-feature-icon svg {
    width: 21px;
    height: 21px;
    filter: grayscale(1) brightness(0) invert(1);
}

.ppmv-service-feature p {
    margin: 0.2rem 0 0;
    color: var(--ppmv-muted);
    font-size: 0.88rem;
}

/* Supporting blocks */
.ppmv-partners-section {
    padding: 3rem 0;
    border-top: 1px solid var(--ppmv-line);
    border-bottom: 1px solid var(--ppmv-line);
    background: var(--ppmv-white);
}

.ppmv-partner-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    align-items: center;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-line);
}

.ppmv-partner-strip > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 1.25rem;
    background: var(--ppmv-white);
}

.ppmv-partner-strip img {
    max-width: 130px;
    max-height: 52px;
    opacity: 0.68;
    filter: grayscale(1);
    transition: opacity 180ms ease, filter 180ms ease;
}

.ppmv-partner-strip > *:hover img {
    opacity: 1;
    filter: grayscale(0);
}

.ppmv-team-grid,
.ppmv-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.ppmv-team-card {
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.ppmv-team-card:hover {
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-5px);
}

.ppmv-team-image {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ppmv-silver-100);
}

.ppmv-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppmv-team-card > div {
    padding: 1.2rem;
}

.ppmv-team-card h3 {
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.ppmv-team-card p {
    margin: 0;
    color: var(--ppmv-muted);
    font-size: 0.86rem;
}

.ppmv-testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ppmv-testimonial-card {
    display: flex;
    flex-direction: column;
    min-height: 290px;
    margin: 0;
    padding: 1.75rem;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-testimonial-card blockquote {
    margin: 0 0 1.5rem;
    color: var(--ppmv-muted);
    line-height: 1.78;
}

.ppmv-testimonial-card figcaption {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: auto;
}

.ppmv-testimonial-card figcaption img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.ppmv-testimonial-card figcaption span {
    display: flex;
    flex-direction: column;
}

.ppmv-testimonial-card small {
    color: var(--ppmv-muted);
}

.ppmv-statistics-section {
    color: var(--ppmv-white);
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800) 62%, var(--ppmv-navy-650)) !important;
}

.ppmv-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ppmv-radius);
    background: rgba(255, 255, 255, 0.2);
}

.ppmv-stat-item {
    min-height: 180px;
    padding: 1.8rem;
    background: rgba(0, 52, 90, 0.45);
}

.ppmv-stat-item strong {
    color: var(--ppmv-white);
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.1;
}

.ppmv-stat-item p {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.ppmv-process-image {
    width: min(100%, 1120px);
    margin: 0 auto 2.5rem;
}

.ppmv-process-image img {
    display: block;
    width: 100%;
}

.ppmv-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.ppmv-steps-grid article {
    position: relative;
    min-height: 210px;
    padding: 1.7rem;
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-steps-grid article > span,
.ppmv-step-number {
    display: block;
    margin-bottom: 2rem;
    color: var(--ppmv-silver);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.ppmv-steps-grid h3 {
    font-size: 1.15rem;
}

.ppmv-steps-grid p {
    color: var(--ppmv-muted);
}

.ppmv-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1.25rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
}

.ppmv-checklist li {
    position: relative;
    padding-left: 1.45rem;
    color: var(--ppmv-muted);
}

.ppmv-checklist li::before {
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 8px;
    height: 8px;
    border: 2px solid var(--ppmv-silver);
    border-radius: 50%;
    content: '';
}

.ppmv-content-surface {
    width: min(100%, 940px);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--ppmv-line);
    border-radius: var(--ppmv-radius);
    background: var(--ppmv-white);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ppmv-content-actions a {
    color: var(--ppmv-navy-800);
    font-weight: 600;
    text-decoration: underline;
}

/* Pagination */
.ppmv-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0.45rem;
    border: 1px solid var(--ppmv-line);
    border-radius: 8px !important;
    color: var(--ppmv-navy-800);
    background: var(--ppmv-white);
}

.pagination .active .page-link,
.pagination .page-link:hover {
    border-color: var(--ppmv-navy-800);
    color: var(--ppmv-white);
    background: var(--ppmv-navy-800);
}

.pagination .disabled .page-link {
    opacity: 0.48;
}

.pagination svg path {
    stroke: currentColor !important;
}

/* Neutralize non-brand accents from plugins or editor content */
.text-warning,
.text-yellow,
[class*='text-accent-gold'],
[style*='#D2AF00'],
[style*='#d2af00'] {
    color: var(--ppmv-steel) !important;
}

.bg-warning,
.bg-yellow,
[class*='bg-accent-gold'] {
    background-color: var(--ppmv-silver) !important;
}

[class*='border-accent-gold'] {
    border-color: var(--ppmv-silver) !important;
}

img[src*='star-yellow'] {
    filter: grayscale(1) saturate(0) opacity(0.72) !important;
}

svg [fill='#6D4DF2' i],
svg [fill='#6342EC' i],
svg [fill='#007BFF' i],
svg[fill='#6D4DF2' i],
svg[fill='#6342EC' i],
svg[fill='#007BFF' i] {
    fill: var(--ppmv-navy-800) !important;
}

svg [stroke='#6D4DF2' i],
svg [stroke='#6342EC' i],
svg [stroke='#007BFF' i] {
    stroke: var(--ppmv-navy-800) !important;
}

svg [fill='#F28833' i],
svg [fill='#64E1B0' i],
svg [fill='#A38CFF' i],
svg[fill='#F28833' i],
svg[fill='#64E1B0' i],
svg[fill='#A38CFF' i] {
    fill: var(--ppmv-steel) !important;
}

svg [fill='#F5EEFF' i],
svg[fill='#F5EEFF' i] {
    fill: var(--ppmv-silver-100) !important;
}

.bg-primary-soft,
.bg-primary-soft-keep {
    background: rgba(11, 75, 122, 0.08) !important;
}

.text-primary,
.text-linear-2 {
    color: var(--ppmv-navy-800) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Reveal and hover motion */
.ppmv-reveal {
    opacity: 1;
    transform: none;
}

.ppmv-ready .ppmv-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--ppmv-order, 0) * 55ms);
}

.ppmv-ready .ppmv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1199.98px) {
    .ppmv-header-inner {
        grid-template-columns: 165px minmax(0, 1fr) auto;
    }

    .ppmv-brand {
        width: 158px;
    }

    .ppmv-menu-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        font-size: 0.86rem;
    }

    .ppmv-footer-grid {
        /* v5.2.0: 3-column layout only now (Quick Links removed); the old
           4-column-workaround spanning rule below is no longer needed. */
        grid-template-columns: 1.6fr 1fr 1fr;
    }

    .ppmv-service-grid,
    .ppmv-project-grid,
    .ppmv-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppmv-advantage-grid,
    .ppmv-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .ppmv-desktop-nav,
    .ppmv-desktop-language {
        display: none;
    }

    .ppmv-header-inner {
        display: flex;
        justify-content: space-between;
    }

    .ppmv-menu-toggle {
        display: block;
    }

    .ppmv-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppmv-footer-grid > :first-child {
        /* Brand/company block spans the full row; Our Locations and
           Plus PM Group split the two columns underneath it. */
        grid-column: 1 / -1;
    }

    .ppmv-split-layout,
    .ppmv-careers-intro-grid,
    .ppmv-feature-layout,
    .ppmv-history-layout,
    .ppmv-contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .ppmv-split-layout.is-reversed .ppmv-split-copy {
        order: 0;
    }

    .ppmv-contact-section::before {
        inset: 0;
    }

    .ppmv-contact-form-card {
        margin-top: 0.5rem;
    }

    .ppmv-expertise-grid,
    .ppmv-principle-grid,
    .ppmv-testimonial-grid,
    .ppmv-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppmv-global-expertise-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ppmv-detail-layout.has-sidebar,
    .ppmv-career-detail .ppmv-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-detail-sidebar,
    .ppmv-career-sidebar {
        order: 2;
    }

    .ppmv-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppmv-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppmv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppmv-service-tab-image img {
        min-height: 300px;
    }

    .ppmv-service-directory-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    :root {
        --ppmv-section: 4.5rem;
    }

    .container {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }

    /* v5.2.1: same mobile gutter as .container, for the About/Services
       content-contract sections that now reuse the container system
       (see the shared #overview/#our-journey/... rule and #service-flow/
       #core-services further below). */
    #overview,
    #our-journey,
    #our-philosophy,
    #our-advantage,
    #company-profile,
    #service-flow,
    #core-services {
        padding-inline: 20px;
    }

    .ppmv-main {
        padding-top: 72px;
    }

    .ppmv-header,
    .ppmv-header-inner {
        min-height: 72px;
    }

    .ppmv-brand {
        width: 146px;
        height: 62px;
    }

    .ppmv-hero,
    .ppmv-hero-slider,
    .ppmv-hero-slide,
    .ppmv-hero-row,
    .ppmv-static-hero > .container {
        min-height: 500px;
    }

    .ppmv-hero-row,
    .ppmv-static-hero > .container {
        padding-top: 3rem;
        padding-bottom: 4.3rem;
    }

    .ppmv-hero h1,
    .ppmv-hero h2 {
        font-size: clamp(2rem, 9vw, 2.5rem);
    }

    .ppmv-hero-arrow,
    .ppmv-hero .swiper-button-prev,
    .ppmv-hero .swiper-button-next {
        display: none !important;
    }

    .ppmv-page-hero,
    .ppmv-page-hero > .container {
        min-height: 340px;
    }

    .ppmv-page-hero h1 {
        font-size: clamp(2rem, 10vw, 2.5rem);
    }

    .ppmv-section-heading-row,
    .ppmv-contact-block > .container,
    .ppmv-cta-section > .container,
    .ppmv-general-application,
    .ppmv-site-contact > .container,
    .ppmv-article-byline,
    .ppmv-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .ppmv-section-heading-row .ppmv-section-heading {
        text-align: center;
    }

    .ppmv-section-heading-row .ppmv-section-heading h2::after {
        margin-left: auto;
    }

    .ppmv-service-grid,
    .ppmv-project-grid,
    .ppmv-news-grid,
    .ppmv-advantage-grid,
    .ppmv-feature-grid,
    .ppmv-expertise-grid,
    .ppmv-principle-grid,
    .ppmv-career-benefit-grid,
    .ppmv-testimonial-grid,
    .ppmv-steps-grid,
    .ppmv-team-grid,
    .ppmv-related-grid,
    .ppmv-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-contact-info-grid,
    .ppmv-mini-feature-grid,
    .ppmv-checklist {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-job-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-job-row .ppmv-button {
        width: 100%;
    }

    .ppmv-news-row {
        grid-template-columns: 104px 1fr;
        gap: 1rem;
    }

    .ppmv-news-row .ppmv-row-arrow {
        display: none;
    }

    .ppmv-gallery-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-gallery-item:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    .ppmv-project-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppmv-project-facts > div {
        border-right: 0;
        border-bottom: 1px solid var(--ppmv-line);
    }

    .ppmv-footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-careers-visual {
        min-height: 350px;
    }

    .ppmv-service-directory-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-service-directory-image {
        min-height: 240px;
    }
}

@media (max-width: 479.98px) {
    .ppmv-hero-actions,
    .ppmv-hero-actions .ppmv-button {
        width: 100%;
    }

    .ppmv-project-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-news-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppmv-news-row-media {
        aspect-ratio: 16 / 9;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .ppmv-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   PPMV Service Lifecycle shortcode
   Added on top of the verified v3.0.0 base. Uses this file's existing
   design tokens (--ppmv-navy-800, --ppmv-silver, --ppmv-radius,
   --ppmv-shadow-md, --ppmv-section, .ppmv-section-heading, .ppmv-reveal)
   rather than introducing a parallel token set.
   ========================================================================== */

.ppmv-lifecycle-track {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 2.5rem;
}

.ppmv-lifecycle-line {
    display: none;
}

@media (min-width: 992px) {
    .ppmv-lifecycle-line {
        display: block;
        position: absolute;
        top: 28px;
        left: 8%;
        right: 8%;
        height: 2px;
        background: var(--ppmv-silver-200);
        z-index: 0;
    }
}

.ppmv-lifecycle-phases {
    display: grid;
    grid-template-columns: repeat(1, minmax(160px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 576px) {
    .ppmv-lifecycle-phases {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (min-width: 992px) {
    .ppmv-lifecycle-phases {
        grid-auto-flow: column;
        grid-auto-columns: minmax(160px, 1fr);
        grid-template-columns: none;
    }
}

.ppmv-lifecycle-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ppmv-lifecycle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ppmv-radius-sm);
    background: var(--ppmv-navy-800);
    color: var(--ppmv-white);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 1.25rem;
    box-shadow: var(--ppmv-shadow-sm);
}

.ppmv-lifecycle-phase h3 {
    font-size: 1.1rem;
    color: var(--ppmv-navy-900);
    margin-bottom: 0.65rem;
}

.ppmv-lifecycle-phase p {
    font-size: 0.9rem;
    color: var(--ppmv-muted);
    text-align: left;
    border-top: 1px solid var(--ppmv-silver-200);
    padding-top: 0.9rem;
    margin-top: 0.4rem;
}

.ppmv-lifecycle-continuous {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2.75rem;
    padding: 1.1rem 1.5rem;
    background: var(--ppmv-navy-950);
    color: var(--ppmv-white);
    border-radius: var(--ppmv-radius-sm);
    text-align: center;
    font-weight: 600;
}

.ppmv-lifecycle-continuous-glyph {
    font-size: 1.15rem;
    line-height: 1;
}

/* ==========================================================================
   Regression fix — .btn-scroll-top (back-to-top button)
   ==========================================================================
   ROOT CAUSE: partials/scroll-to-top.blade.php ships Infinia's original
   "scroll to top" markup (a <div class="btn-scroll-top"> wrapping an SVG
   progress-square icon whose <svg> uses width="100%" height="100%").
   That markup was ALWAYS part of Infinia's parent template — it renders
   on every page regardless of theme. It depends entirely on Infinia's own
   CSS to be positioned as a small fixed-position circular button in the
   corner of the screen. This child theme's config.php intentionally
   removes Infinia's core stylesheet assets (main, theme, theme-rtl) to
   avoid the parent's demo presentation leaking through — but no
   replacement rule for .btn-scroll-top was ever added here. With no
   positioning/sizing CSS at all, the browser defaults kicked in: the div
   became a static block-level element, and its 100%-sized SVG grew to
   match the div's own auto width/height, which itself grew to fill the
   page's content column — producing the large black rounded rectangle
   seen after the footer on every page (confirmed via DevTools: computed
   width/height was 1500px, no position:fixed applied, display:block).

   FIX: restore fixed-position, small-footprint behavior matching how
   this exact component is used site-wide in Infinia (a corner
   scroll-to-top button), styled with this file's own PPMV tokens rather
   than the parent's removed CSS.
   ========================================================================== */

.btn-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: var(--ppmv-radius-sm, 8px);
    background: var(--ppmv-navy-800, #0b4b7a);
    box-shadow: var(--ppmv-shadow-md, 0 20px 48px rgba(0, 52, 90, 0.14));
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

/* Infinia's own JS toggles a visibility/active class on this element as
   the user scrolls (the exact class name was not confirmed against
   parent source, so both common conventions are covered defensively —
   neither rule does anything if its class is never applied). */
.btn-scroll-top.show,
.btn-scroll-top.active,
.btn-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-scroll-top svg.progress-square {
    display: block;
    width: 24px;
    height: 24px;
}

.btn-scroll-top svg.progress-square path {
    fill: none;
    stroke: var(--ppmv-white, #ffffff);
    stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
    .btn-scroll-top {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Regression fix — legacy `.ppm-svcv3-*` / `.ppm-svcv4-*` Custom HTML
   ==========================================================================
   ROOT CAUSE: the Services page (and likely other pages) was built using
   Botble's [custom-html] shortcode blocks containing pre-existing,
   hand-authored markup (class prefix "ppm-svcv3-" for the Services page
   hero, "ppm-svcv4-" for the "Service Flow" and "Our Core Services"
   sections). This markup predates this child theme and depended on CSS
   that is not present anywhere in this package, Theme Options Custom
   CSS, or elsewhere in the page content (confirmed — no source could be
   located). It most likely lived in Infinia's original stylesheet
   assets, which this child theme's config.php intentionally removes.

   STATUS: the ORIGINAL visual design for these specific classes is
   UNKNOWN — no source was recoverable. Per explicit instruction, this is
   NOT a reconstruction of that unknown design. It is a clean, neutral,
   production-ready layout built from this file's own existing PPMV
   design tokens (typography, spacing, navy/blue/gray palette, radius,
   responsive breakpoints), applied directly to the real DOM structure
   confirmed via live inspection. Existing classes/HTML were not changed.
   See docs/REGRESSION_FIX_REPORT.md for the exact selector list and
   verification notes.
   ========================================================================== */

/* --- Services page hero (section.ppm-svcv3-hero) ----------------------- */
.ppm-svcv3-hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 3rem;
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
    color: var(--ppmv-white);
}

.ppm-svcv3-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.08), transparent 55%);
    pointer-events: none;
}

.ppm-svcv3-hero-shell {
    max-width: var(--ppmv-container, 1280px);
    margin: 0 auto;
    padding: 0 1.25rem;
    position: relative;
    z-index: 1;
}

.ppm-svcv3-hero-copy {
    max-width: 760px;
}

.ppm-svcv3-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.ppm-svcv3-kicker--light {
    color: var(--ppmv-silver-200, #d9dde1);
}

.ppm-svcv3-hero h1 {
    color: var(--ppmv-white);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    margin: 0 0 1rem;
}

.ppm-svcv3-hero-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 680px;
}

/* --- Shared shell used by both ppm-svcv4 sections ----------------------- */
.ppm-svcv4-flow,
.ppm-svcv4-core {
    padding: var(--ppmv-section, clamp(3rem, 6vw, 5rem)) 0;
}

.ppm-svcv4-flow {
    background: var(--ppmv-surface, #f7f9fb);
}

.ppm-svcv4-core {
    background: var(--ppmv-white);
}

.ppm-svcv4-shell {
    max-width: var(--ppmv-container, 1280px);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --- Service Flow section (section.ppm-svcv4-flow) ---------------------- */
.ppm-svcv4-flow-head {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.ppm-svcv4-flow-title-row {
    margin-bottom: 1rem;
}

.ppm-svcv4-flow-head h2 {
    color: var(--ppmv-navy-950);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.ppm-svcv4-flow-title-line {
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto;
    background: var(--ppmv-navy-800);
    border-radius: 2px;
}

.ppm-svcv4-flow-intro {
    color: var(--ppmv-muted, #596673);
    font-size: 0.98rem;
    line-height: 1.65;
}

.ppm-svcv4-flow-panel {
    max-width: 960px;
    margin: 0 auto;
}

.ppm-svcv4-flow-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .ppm-svcv4-flow-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .ppm-svcv4-flow-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ppm-svcv4-flow-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-silver-200, #d9dde1);
    border-radius: var(--ppmv-radius, 14px);
    box-shadow: var(--ppmv-shadow-sm);
}

.ppm-svcv4-flow-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ppmv-radius-sm, 8px);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ppmv-white);
    background: var(--ppmv-steel, #6f8292);
}

.ppm-svcv4-flow-num--blue {
    background: var(--ppmv-navy-800);
}

.ppm-svcv4-flow-card strong {
    color: var(--ppmv-navy-950);
    font-size: 1rem;
    font-weight: 600;
}

.ppm-svcv4-flow-continuous {
    text-align: center;
    padding: 1rem 1.5rem;
    background: var(--ppmv-navy-950);
    color: var(--ppmv-white);
    border-radius: var(--ppmv-radius-sm, 8px);
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- Our Core Services section (section.ppm-svcv4-core) ----------------- */
.ppm-svcv4-core-head {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.ppm-svcv4-core-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ppmv-navy-800);
    margin-bottom: 0.6rem;
}

.ppm-svcv4-core-head h2 {
    color: var(--ppmv-navy-950);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0;
}

/* The exact class names inside each <li> of ppm-svcv4-core-list were not
   fully visible during inspection (their subtree was collapsed in
   DevTools). This styles the LIST STRUCTURE ITSELF (list-style removal,
   grid layout, and a card treatment applied to every direct <li> child)
   using only confirmed selectors, so the section renders as a readable
   grid of cards regardless of what markup exists one level deeper inside
   each item. If specific inner elements (icon, number, title,
   description, link) need their own styling later, their real class
   names need to be confirmed first — see docs/OPEN_ITEMS.md. */
.ppm-svcv4-core-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .ppm-svcv4-core-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .ppm-svcv4-core-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ppm-svcv4-core-list > li {
    padding: 1.5rem;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-silver-200, #d9dde1);
    border-radius: var(--ppmv-radius, 14px);
    box-shadow: var(--ppmv-shadow-sm);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.ppm-svcv4-core-list > li:hover {
    transform: translateY(-3px);
    box-shadow: var(--ppmv-shadow-md);
}

.ppm-svcv4-core-list > li h3,
.ppm-svcv4-core-list > li strong {
    display: block;
    color: var(--ppmv-navy-950);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.4rem 0 0.5rem;
}

.ppm-svcv4-core-list > li p {
    color: var(--ppmv-muted, #596673);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ppm-svcv4-core-list > li {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   PLUS PM VIETNAM — v4.1.1 ADDITIONS
   Admin content-contract visual system.
   Everything below targets semantic IDs/classes that ADMIN authors inside
   Page / Service / Project / Post content (WYSIWYG or Custom HTML blocks),
   plus the server-rendered dynamic grids from partials/dynamic/*.
   Scope: nested inside .ppmv-page-content, .ppmv-detail-surface or
   .ck-content — never relies on bare/generic selectors.
   Palette: navy / white / architectural gray only. No gold, no purple,
   no SaaS-style shadows. Font: Noto Sans JP throughout (EN/JA/VI).
   ========================================================================== */

:root,
html[data-bs-theme='light'],
html[data-bs-theme='dark'] {
    --ppmv-gray-bg: #f2f4f7;
    --ppmv-off-white: #fcf9f8;
    --ppmv-border: #e2e8f0;
    --ppmv-body-text: #54595f;
    --ppmv-max: 1280px;
    --ppmv-gutter: 24px;
    --ppmv-radius-card: 4px;
    --ppmv-radius-pill: 999px;
}

/* -------------------------------------------------------------------- *
 * Shared primitives reused by every content-contract section below
 * -------------------------------------------------------------------- */

.ppmv-page-content [data-source]:empty,
.ppmv-page-content [data-dynamic-content]:empty,
.ppmv-detail-surface [data-source]:empty,
.ppmv-detail-surface [data-dynamic-content]:empty {
    display: none;
}

.ppmv-cc-section {
    padding-block: clamp(3rem, 6vw, var(--ppmv-section));
}

.ppmv-cc-section + .ppmv-cc-section {
    border-top: 1px solid var(--ppmv-border);
}

.ppmv-cc-section.is-tinted {
    background: var(--ppmv-gray-bg);
}

.ppmv-cc-container {
    width: min(100% - 40px, var(--ppmv-max));
    margin-inline: auto;
}

.ppmv-cc-eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--ppmv-navy-800);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ppmv-cc-heading {
    max-width: 46rem;
    margin: 0 0 1rem;
    color: var(--ppmv-navy-950);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.01em;
}

.ppmv-cc-lede {
    max-width: 42rem;
    margin: 0;
    color: var(--ppmv-body-text);
    font-size: 1.05rem;
    line-height: 1.7;
}

.ppmv-cc-center {
    margin-inline: auto;
    text-align: center;
}
.ppmv-cc-center .ppmv-cc-lede {
    margin-inline: auto;
}

/* ====================================================================== *
 * ABOUT — #about-hero / #overview / #company-profile / #our-journey /
 * #our-philosophy / #our-advantage
 *
 * v5.2.3 — full visual rebuild against the approved prototype
 * (PPMV_Website_UI_v2.html, "about" template). Admin content stays
 * exactly as authored (flat H2/H3/P/blockquote); all composition below
 * targets either the container/shared rule this file already had, or
 * the real per-item markup the dedicated renderers (ProfileTableRenderer
 * unchanged; JourneyRenderer/AdvantageCardsRenderer rebuilt this release;
 * PhilosophyRenderer unchanged) already produce. No image assets are
 * hotlinked or invented — sections with no CMS image field use the
 * shared placeholder asset(s) under public/images/about/ (documented
 * per-section below) until real photography exists in Media.
 * ====================================================================== */

/* ---- About Hero ---------------------------------------------------- */
/* Presentation-only section injected by functions.php for /about-us
   only (see ppmv_render_page_content()) — not Admin content. Image: no
   CMS field exists yet; uses public/images/about/hero-architectural-
   placeholder.svg (a drafted architectural/skyline motif, not a photo,
   not hotlinked) until real project photography is added to Media and
   this section is wired to a proper image field. */
.ppmv-about-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
    text-align: center;
    color: var(--ppmv-white);
}

@media (min-width: 768px) {
    .ppmv-about-hero {
        min-height: 500px;
    }
}

.ppmv-about-hero-media {
    position: absolute;
    inset: 0;
    background-image: url('../images/about/hero-architectural-placeholder.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.ppmv-about-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--ppmv-navy-800);
    opacity: 0.8;
}

.ppmv-about-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: var(--ppmv-container);
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 768px) {
    .ppmv-about-hero-content {
        padding-inline: 80px;
    }
}

.ppmv-about-hero-title {
    margin: 0;
    color: var(--ppmv-white);
    font-size: clamp(2.1rem, 4.5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.ppmv-about-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
}

.ppmv-about-hero-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

.ppmv-about-hero-breadcrumb a:hover {
    color: var(--ppmv-white);
}

.ppmv-about-hero-breadcrumb-sep {
    opacity: 0.6;
}

.ppmv-about-hero-breadcrumb [aria-current="page"] {
    color: var(--ppmv-white);
    font-weight: 500;
}

/* ---- Shared container (unchanged from v5.2.1's confirmed fix) ------ */
#overview,
#our-journey,
#our-philosophy,
#our-advantage,
#company-profile {
    padding-block: clamp(3rem, 6vw, var(--ppmv-section));
    max-width: var(--ppmv-container);
    margin-inline: auto;
    padding-inline: 80px;
}

@media (max-width: 767.98px) {
    #overview,
    #our-journey,
    #our-philosophy,
    #our-advantage,
    #company-profile {
        padding-inline: 20px;
    }
}

.ppmv-about-hero + #overview,
#company-profile,
#our-journey,
#our-philosophy,
#our-advantage {
    border-top: 1px solid var(--ppmv-border);
}

/* ---- Overview — "Bridging Vision and Execution" --------------------- *
   Prototype: 2-column desktop (~45% text / ~55% image). Admin authors
   only <h2> + <p>+ (flat, no image field) — a CSS-generated grid item
   (::before, a real grid item per the CSS Grid spec for a container's
   own pseudo-elements) supplies the image pane so no new Admin markup
   or renderer is needed. Placeholder asset: public/images/about/
   architectural-placeholder.svg (no CMS image field exists yet). */
#overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

#overview > h2 {
    color: var(--ppmv-navy-950);
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    font-weight: 700;
    margin: 0 0 1.25rem;
}

#overview > p {
    max-width: 42rem;
    margin: 0 0 1.1rem;
    color: var(--ppmv-body-text);
    font-size: 1.05rem;
    line-height: 1.75;
    text-align: left;
    text-align-last: left;
}

#overview > p:last-of-type {
    margin-bottom: 0;
}

#overview::before {
    content: '';
    display: block;
    min-height: 260px;
    background-image: url('../images/about/architectural-placeholder.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    order: 2;
}

@media (min-width: 900px) {
    #overview {
        grid-template-columns: 45fr 55fr;
        gap: var(--ppmv-gutter) calc(var(--ppmv-gutter) * 2);
    }

    #overview > h2,
    #overview > p {
        grid-column: 1;
    }

    #overview::before {
        grid-column: 2;
        grid-row: 1 / -1;
        min-height: 100%;
        order: initial;
    }
}

/* ---- Company Information (Company Profile) -------------------------- *
   ProfileTableRenderer.php is unchanged — it already groups one <h3>
   label with every following non-<h3> sibling (any number of <p>s,
   e.g. the Address row's two office paragraphs) into a single value
   column, which is exactly the "Address stays one row" requirement.
   Only presentation changes here: centered white panel on the
   architectural-gray section background, restrained radius, subtle
   border/shadow, navy top accent. */
#company-profile {
    background: var(--ppmv-gray-bg);
}

#company-profile > .ppmv-cc-panel,
#company-profile {
    max-width: 56rem;
    margin-inline: auto;
}

#company-profile table,
#company-profile .ppmv-profile-table {
    position: relative;
    display: block;
    width: 100%;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-top: 3px solid var(--ppmv-navy-800);
    border-radius: var(--ppmv-radius-card);
    box-shadow: var(--ppmv-shadow-sm);
    padding: clamp(1.75rem, 4vw, 3.25rem);
}

#company-profile table > h2,
#company-profile .ppmv-profile-table > h2 {
    margin: 0 0 1.75rem;
    color: var(--ppmv-navy-950);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 700;
    text-align: center;
}

#company-profile table tbody,
#company-profile table tr {
    display: block;
    width: 100%;
}

#company-profile table tr {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--ppmv-border);
}

#company-profile table tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#company-profile table tr:first-child {
    padding-top: 0;
}

#company-profile table th,
#company-profile table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
    background: transparent;
}

#company-profile table th {
    color: var(--ppmv-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#company-profile table td {
    color: var(--ppmv-ink);
    font-size: 1rem;
    line-height: 1.65;
}

#company-profile table td p {
    margin: 0 0 0.5rem;
}

#company-profile table td p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    #company-profile table tr {
        flex-direction: row;
        align-items: baseline;
        gap: var(--ppmv-gutter);
    }

    #company-profile table th {
        flex: 0 0 30%;
        padding-top: 0.15rem;
    }

    #company-profile table td {
        flex: 1 1 auto;
    }
}

/* ---- Our Journey — country cards + timeline -------------------------- *
   JourneyRenderer.php (v5.2.3) groups Admin's flat H3/P sequence into
   country cards for every item except the last, and treats the last
   item as the timeline's one dynamic milestone. Country card imagery
   has no CMS field yet — shared placeholder asset per card (recolored
   via CSS filter per position so the three cards read as distinct
   without three separate image files). */
/* v6.3.4 — root cause of "heading still not centered" after v6.3.3:
   the shared .ppmv-cc-heading base rule (line ~4519) sets
   `max-width: 46rem` with `margin: 0 0 1rem` (no auto) for lede-style
   sections. text-align:center only centers the TEXT inside that 46rem
   box -- it does not center the box itself within a wider section, so
   the heading sat flush against the left edge of its max-width box
   instead of the middle of the page. Adding margin-inline:auto here
   centers the box itself; text-align:center (already present) then
   centers the text inside it. Same fix applied to #our-philosophy and
   #our-advantage below for the identical reason. */
#our-journey .ppmv-cc-heading,
#our-journey > h2 {
    max-width: none;
    margin-inline: auto;
    text-align: center;
    color: var(--ppmv-navy-950);
    margin-bottom: 3rem;
}

#our-journey .ppmv-journey-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ppmv-gutter);
    margin: 0 0 4rem;
}

@media (min-width: 768px) {
    #our-journey .ppmv-journey-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#our-journey .ppmv-journey-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 5;
    min-height: 280px;
    padding: 2rem;
    overflow: hidden;
    color: var(--ppmv-white);
    background-image:
        linear-gradient(180deg, rgba(11, 75, 122, 0.55) 0%, rgba(6, 47, 77, 0.92) 100%),
        url('../images/about/architectural-placeholder.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: var(--ppmv-radius-card);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

#our-journey .ppmv-journey-card-2 {
    filter: hue-rotate(-14deg);
}

#our-journey .ppmv-journey-card-3 {
    filter: hue-rotate(14deg);
}

#our-journey .ppmv-journey-card:hover {
    box-shadow: var(--ppmv-shadow-md);
    transform: translateY(-2px);
}

/* v6.1.0 — every #our-journey card is a plain, non-inline <article>
   (see journey.blade.php / JourneyRenderer::renderFallback() docblocks
   for why: an <a> wrapping this card's block-level children was being
   fragmented into one <a> per child node by the mandatory
   BaseHelper::clean() sanitization pass, breaking the whole grid).
   Japan/Malaysia's link now lives on the inline title text only and is
   stretched to cover the full card, matching this theme's existing
   stretched-link convention (see .ppmv-service-card h3 a::after and
   .ppmv-service-directory-card h2 a::after elsewhere in this file).
   Scoped to #our-journey; no other section or link on the site is
   touched. */
#our-journey .ppmv-journey-card-link {
    position: relative;
    z-index: 1;
    color: inherit;
    text-decoration: none;
}

#our-journey .ppmv-journey-card-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    content: '';
}

@media (prefers-reduced-motion: reduce) {
    #our-journey .ppmv-journey-card {
        transition-duration: 0.01ms !important;
    }
}

#our-journey .ppmv-journey-code {
    display: block;
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

#our-journey .ppmv-journey-title {
    margin: 0 0 0.35rem;
    color: var(--ppmv-white);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#our-journey .ppmv-journey-body {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
}

#our-journey .ppmv-journey-body p {
    margin: 0;
}

/* Timeline */
#our-journey .ppmv-journey-timeline {
    max-width: 62rem;
    margin: 0 auto;
    padding-inline: 1rem;
}

#our-journey .ppmv-journey-timeline-track {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 1rem;
}

#our-journey .ppmv-journey-timeline-track::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 5%;
    width: 90%;
    height: 1px;
    background: var(--ppmv-border);
}

#our-journey .ppmv-journey-milestone {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 150px;
    max-width: 190px;
    text-align: center;
}

#our-journey .ppmv-journey-milestone-marker {
    display: block;
    width: 22px;
    height: 22px;
    margin-bottom: 1rem;
    background: var(--ppmv-white);
    border: 2px solid var(--ppmv-navy-800);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--ppmv-white);
}

#our-journey .ppmv-journey-milestone-marker-filled {
    background: var(--ppmv-navy-800);
    border-width: 4px;
}

#our-journey .ppmv-journey-milestone-year {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ppmv-navy-950);
    font-size: 1.1rem;
    font-weight: 700;
}

#our-journey .ppmv-journey-milestone-text,
#our-journey .ppmv-journey-milestone-text p {
    margin: 0;
    color: var(--ppmv-body-text);
    font-size: 0.88rem;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    #our-journey .ppmv-journey-timeline-track {
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
    }

    #our-journey .ppmv-journey-timeline-track::before {
        top: 0;
        left: 10px;
        width: 1px;
        height: 100%;
    }

    #our-journey .ppmv-journey-milestone {
        flex-direction: row;
        align-items: flex-start;
        max-width: none;
        text-align: left;
        gap: 1rem;
    }

    #our-journey .ppmv-journey-milestone-marker {
        flex-shrink: 0;
        margin-bottom: 0;
    }
}

/* ---- Philosophy — quote panel + Vision/Mission cards ----------------- *
   PhilosophyRenderer.php is unchanged; only presentation is tuned here
   to match the approved prototype's light, restrained composition. */
/* v6.3.4 — same box-not-centered bug as #our-journey/#our-advantage
   (see the comment on the #our-journey rule above); .ppmv-cc-heading's
   max-width:46rem box was never itself centered. */
#our-philosophy .ppmv-cc-heading,
#our-philosophy h2 {
    max-width: none;
    margin-inline: auto;
    text-align: center;
    color: var(--ppmv-navy-950);
    margin-bottom: 2.5rem;
}

#our-philosophy .ppmv-philosophy-quote-panel {
    max-width: 44rem;
    margin: 0 auto 2rem;
    padding: clamp(2rem, 4vw, 3.25rem);
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
    border: none;
    border-radius: var(--ppmv-radius-card);
    box-shadow: var(--ppmv-shadow-sm);
    text-align: center;
}

#our-philosophy .ppmv-philosophy-quote-eyebrow {
    display: block;
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#our-philosophy blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ppmv-white);
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.45;
    text-align: center;
}

#our-philosophy .ppmv-philosophy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ppmv-gutter);
    margin-top: 2rem;
    max-width: 62rem;
    margin-inline: auto;
    counter-reset: ppmv-philosophy-count;
}

@media (min-width: 768px) {
    #our-philosophy .ppmv-philosophy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v6.3.3 — client-requested: match the navy/white alternating card
   treatment already used for #home-advantage and Our Track Record,
   instead of the previous plain white-bordered cards. First card (Our
   Vision) is solid navy; second (Our Mission) stays white with a large
   faded counter-generated number watermark, same CSS-counter technique
   as #home-advantage (no content/PHP change — PhilosophyRenderer.php is
   untouched). */
#our-philosophy .ppmv-philosophy-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    box-shadow: var(--ppmv-shadow-sm);
}

#our-philosophy .ppmv-philosophy-card::before {
    counter-increment: ppmv-philosophy-count;
    content: counter(ppmv-philosophy-count, decimal-leading-zero);
    position: absolute;
    top: 0.1rem;
    right: 1rem;
    z-index: 0;
    font-family: var(--ppmv-font);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ppmv-navy-800);
    opacity: 0.08;
    pointer-events: none;
}

#our-philosophy .ppmv-philosophy-card:first-child {
    background: linear-gradient(135deg, var(--ppmv-navy-900), var(--ppmv-navy-650));
    border-color: transparent;
}

#our-philosophy .ppmv-philosophy-card:first-child::before {
    color: var(--ppmv-white);
    opacity: 0.16;
}

#our-philosophy .ppmv-philosophy-card:first-child .ppmv-philosophy-title {
    color: var(--ppmv-white);
}

#our-philosophy .ppmv-philosophy-card:first-child .ppmv-philosophy-body,
#our-philosophy .ppmv-philosophy-card:first-child .ppmv-philosophy-body p {
    color: rgba(255, 255, 255, 0.85);
}

#our-philosophy .ppmv-philosophy-title {
    position: relative;
    z-index: 1;
    margin: 0 0 0.6rem;
    color: var(--ppmv-navy-800);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#our-philosophy .ppmv-philosophy-body {
    position: relative;
    z-index: 1;
    color: var(--ppmv-body-text);
    line-height: 1.7;
}

#our-philosophy .ppmv-philosophy-body p {
    margin: 0;
}

#our-philosophy blockquote p {
    margin: 0;
}

/* ---- Our Advantage — 4 wide alternating feature rows ----------------- *
   AdvantageCardsRenderer.php (v5.2.3) splits Admin's own "NN — Title"
   heading text into an index badge + title, so the index is never shown
   twice. Row imagery has no CMS field yet — shared placeholder asset,
   alternated left/right per the approved prototype. ID-scoped selectors
   throughout, matching the pattern that already resolved the v5.2.1
   ".ppmv-advantage-card h3" specificity collision — these rules do not
   reuse that older, unrelated dark-variant class combination. */
/* v6.3.4 — same box-not-centered bug as #our-journey/#our-philosophy
   (see the comment on the #our-journey rule above); .ppmv-cc-heading's
   max-width:46rem box was never itself centered. Also: the index-number
   color/opacity added in v6.3.3 was bumped up further here (0.55 -> 0.85
   opacity) since the client reported it still reading as "not colored"
   -- AdvantageCardsRenderer.php/markup untouched, CSS-only. */
#our-advantage .ppmv-cc-heading,
#our-advantage > h2 {
    max-width: none;
    margin-inline: auto;
    text-align: center;
    color: var(--ppmv-navy-950);
    margin-bottom: 3rem;
}

#our-advantage .ppmv-advantage-rows {
    display: flex;
    flex-direction: column;
    gap: var(--ppmv-gutter);
}

#our-advantage .ppmv-advantage-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    box-shadow: var(--ppmv-shadow-sm);
    overflow: hidden;
}

@media (min-width: 860px) {
    #our-advantage .ppmv-advantage-row {
        grid-template-columns: 1fr 1fr;
        min-height: 320px;
    }

    #our-advantage .ppmv-advantage-row-text-right .ppmv-advantage-row-text {
        order: 2;
    }

    #our-advantage .ppmv-advantage-row-text-right .ppmv-advantage-row-image {
        order: 1;
    }
}

#our-advantage .ppmv-advantage-row-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 3.5vw, 3.25rem);
}

/* v6.3.3 — client-requested: the index number was nearly invisible
   (--ppmv-silver-200 on white). Bumped to navy at a larger size so it
   reads as an intentional numbered-list design element, matching the
   weight the equivalent numbers carry elsewhere on the site
   (#home-advantage, Our Track Record). AdvantageCardsRenderer.php and
   the markup are unchanged — CSS-only.

   BUG FOUND WHILE MAKING THIS CHANGE (fixed here, not introduced by it):
   ".ppmv-advantage-index" is also used, unscoped, by the unrelated older
   ".ppmv-advantage-card" component (see that rule elsewhere in this
   file), which sets "position: absolute; top; right" for ITS OWN use —
   floating a large number in a card's corner. Because this
   #our-advantage-scoped rule never set its own `position`, that other
   component's position:absolute leaked in via the cascade, escaping
   this span out of the text column to the page's top-right corner
   (relative to the nearest positioned ancestor, or the viewport if
   there was none) — invisible before only because the old silver-200
   color blended into the white background at that stray position too.
   Setting `position: static` here cancels the inherited absolute
   positioning so the number renders inline where the markup actually
   places it, and does not touch the other component's own rule. */
#our-advantage .ppmv-advantage-index {
    position: static;
    display: block;
    margin: 0 0 0.75rem;
    color: var(--ppmv-navy-800);
    opacity: 0.85;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
}

#our-advantage .ppmv-advantage-title {
    margin: 0 0 0.85rem;
    color: var(--ppmv-navy-950);
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
}

#our-advantage .ppmv-advantage-body,
#our-advantage .ppmv-advantage-body p {
    margin: 0;
    color: var(--ppmv-body-text);
    line-height: 1.7;
}

#our-advantage .ppmv-advantage-row-image {
    min-height: 220px;
    background-image: url('../images/about/architectural-placeholder.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* ====================================================================== *
 * HOMEPAGE — #ppmv-home root + section rhythm
 * ====================================================================== */

#ppmv-home #home-hero {
    position: relative;
    color: var(--ppmv-white);
    background: linear-gradient(180deg, rgba(0, 52, 90, 0.72), rgba(0, 52, 90, 0.88));
    box-shadow: 0 12px 24px -16px rgba(0, 20, 40, 0.35);
}

#ppmv-home #home-hero h1 {
    max-width: 42rem;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--ppmv-white);
}

/* Hero eyebrow/lede paragraphs — v4.1.1.1 fix: these were previously
   unstyled (falling back to 16px body text), which is why hero sections
   read as "empty" with awkward-looking wide centered lines. The eyebrow
   (first <p>, appears above the <h1>) gets a small tracked label
   treatment; the lede (last <p>, appears after the <h1>) gets a
   constrained measure so it wraps like a real intro paragraph instead of
   stretching edge-to-edge. */
#ppmv-home #home-hero p,
#ppmv-services-list #services-hero p,
#ppmv-contact #contact-hero p {
    color: var(--ppmv-white);
    opacity: 0.92;
}

#ppmv-home #home-hero p:first-child,
#ppmv-services-list #services-hero p:first-child,
#ppmv-contact #contact-hero p:first-child {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}

#ppmv-home #home-hero p:last-child:not(:first-child),
#ppmv-services-list #services-hero p:last-child:not(:first-child),
#ppmv-contact #contact-hero p:last-child:not(:first-child) {
    max-width: 34rem;
    margin: 1rem auto 0;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
}

#ppmv-home #home-hero p:last-child:not(:first-child) {
    margin-left: 0;
    margin-right: 0;
}

#ppmv-home #home-about,
#ppmv-home #home-global-expertise,
#ppmv-home #home-services,
#ppmv-home #home-advantage,
#ppmv-home #home-projects,
#ppmv-home #home-news,
#ppmv-home #home-contact-cta {
    padding-block: clamp(3rem, 6vw, var(--ppmv-section));
    border-top: 1px solid var(--ppmv-border);
}

#ppmv-home #home-about,
#ppmv-home #home-news {
    background: var(--ppmv-white);
}

#ppmv-home #home-global-expertise,
#ppmv-home #home-advantage,
#ppmv-home #home-projects {
    background: var(--ppmv-gray-bg);
}

/* v6.3.0 — client-confirmed (checked live in two different browsers)
   that the approved reference shows "Our Services" on a navy background
   with a white heading, not the plain white section this was on before.
   Scoped to #home-services only — #home-about and #home-news, which
   used to share this rule, keep their white background untouched. */
#ppmv-home #home-services {
    background: linear-gradient(160deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
    border-top: none;
}

#home-services .ppmv-section-heading h2,
#home-services .ppmv-section-heading .ppmv-eyebrow {
    color: var(--ppmv-white);
}

#home-services .ppmv-section-heading > p:not(.ppmv-eyebrow) {
    color: rgba(255, 255, 255, 0.78);
}

#home-services .ppmv-section-heading h2::after {
    background: rgba(255, 255, 255, 0.4);
}

/* v6.2.0 — #home-advantage reuses the theme's existing generic
   .ppmv-feature-grid/.ppmv-feature-card component (already used
   elsewhere, unscoped, no PHP renderer needed since it's a plain
   4-item title+text grid, unlike #our-advantage's numbered layout).
   Its own default is 2 columns (tablet); this widens it to 4 at
   desktop to match the approved prototype's "The Plus PM Advantage"
   row. Purely additive — does not change .ppmv-feature-grid's
   existing behavior anywhere else it's already used. */
@media (min-width: 1024px) {
    #home-advantage .ppmv-feature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* v6.3.0 — client-requested "Plus PM Advantage" visual upgrade: navy
   gradient cards (progressively lighter left-to-right) with a large,
   faded index number as a background watermark, replacing the plain
   white/bordered look. Scoped strictly to #home-advantage .ppmv-feature-*
   so the shared .ppmv-feature-card/.ppmv-feature-grid component used
   elsewhere on the site is completely untouched. Numbers are generated
   with a CSS counter — no content/PHP change needed. */
#home-advantage .ppmv-feature-grid {
    counter-reset: ppmv-advantage-count;
}

#home-advantage .ppmv-feature-card {
    position: relative;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
    box-shadow: none;
}

#home-advantage .ppmv-feature-card:nth-child(2) {
    background: linear-gradient(135deg, var(--ppmv-navy-900), var(--ppmv-navy-650));
}

#home-advantage .ppmv-feature-card:nth-child(3) {
    background: linear-gradient(135deg, var(--ppmv-navy-800), var(--ppmv-steel));
}

#home-advantage .ppmv-feature-card:nth-child(4) {
    background: linear-gradient(135deg, var(--ppmv-navy-650), var(--ppmv-steel));
}

#home-advantage .ppmv-feature-card:hover {
    border-color: transparent;
    box-shadow: var(--ppmv-shadow-md);
}

#home-advantage .ppmv-feature-card::before {
    counter-increment: ppmv-advantage-count;
    content: counter(ppmv-advantage-count, decimal-leading-zero);
    position: absolute;
    top: 0.25rem;
    right: 1.1rem;
    z-index: 0;
    font-family: var(--ppmv-font);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

#home-advantage .ppmv-feature-card h3,
#home-advantage .ppmv-feature-card p {
    position: relative;
    z-index: 1;
}

#home-advantage .ppmv-feature-card h3 {
    color: var(--ppmv-white);
}

#home-advantage .ppmv-feature-card p {
    color: rgba(255, 255, 255, 0.8);
}

/* v6.3.0 — "Our Track Record" sector-category tile grid, matching the
   approved prototype's 6-sector showcase (Factory / Shopping Mall /
   School / Hotel / Hospital / Others). This replaces the previous
   dynamic-latest-projects card grid with a fixed set of sector tiles
   that link out to filtered project listings. New, uniquely-named
   classes (.ppmv-sector-tile*) — does not reuse or modify
   .ppmv-dyn-project-card or any other shared component, so nothing
   else on the site is affected. Background photos are placeholder
   gradients until real sector photography is supplied; swap the
   background-image on each .ppmv-sector-tile in Admin content when
   ready. */
#home-projects .ppmv-sector-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (min-width: 768px) {
    #home-projects .ppmv-sector-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ppmv-sector-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 240px;
    overflow: hidden;
    border: 1px solid var(--ppmv-line);
    background-color: var(--ppmv-navy-800);
    background-size: cover;
    background-position: center;
}

.ppmv-sector-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 52, 90, 0.92), rgba(0, 52, 90, 0.1) 65%);
}

.ppmv-sector-tile span {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    color: var(--ppmv-white);
    font-weight: 700;
    font-size: 1.15rem;
}

.ppmv-sector-tile:hover {
    box-shadow: var(--ppmv-shadow-md);
}

#ppmv-home #home-contact-cta {
    background: var(--ppmv-navy-950);
    color: var(--ppmv-white);
}

/* ====================================================================== *
 * SERVICES LISTING — #ppmv-services-list
 * ====================================================================== */

/* v6.3.5 — approved prototype's Services hero is a photographic banner
   (dark navy diagonal overlay over a construction-site image), left-
   aligned copy, not the flat centered gradient this theme shipped with.
   No CMS field exists for this image (same situation as About's hero —
   see about-hero.blade.php's own note), so this reuses that exact same
   already-approved, locally-authored placeholder asset rather than
   hotlinking new photography or inventing a CMS field this release. */
#ppmv-services-list #services-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-block: clamp(3rem, 7vw, 5rem);
    padding-inline: 20px;
    color: var(--ppmv-white);
    text-align: left;
    background:
        linear-gradient(90deg, rgba(7, 58, 96, .92) 0%, rgba(11, 75, 122, .72) 50%, rgba(11, 75, 122, .3) 100%),
        url('../images/about/hero-architectural-placeholder.svg') center 44% / cover no-repeat;
    box-shadow: 0 12px 24px -16px rgba(0, 20, 40, 0.35);
}

@media (min-width: 768px) {
    #ppmv-services-list #services-hero {
        padding-inline: 80px;
    }
}

#ppmv-services-list #services-hero > * {
    width: 100%;
    max-width: var(--ppmv-container);
    margin-inline: auto;
}

#ppmv-services-list #services-hero h1 {
    margin: 0 0 0.85rem;
    max-width: none;
    text-align: left;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--ppmv-white);
}

/* Override the centered/measure-constrained lede shared with Home and
   Contact heroes (public/css/ppmv.css ~line 5382) — the approved
   Services hero copy runs left-aligned, not centered. */
#ppmv-services-list #services-hero p:first-child {
    text-align: left;
}

#ppmv-services-list #services-hero p:last-child:not(:first-child) {
    margin: 0;
    max-width: 36rem;
    text-align: left;
}

/* Service Flow — six-step semantic list, theme controls numbering.
   v6.3.5: rebuilt against the prototype file's own hidden second-pass
   CSS (injected at runtime for route==='services', not present in the
   raw per-route HTML this theme was originally built against — see
   docs conversation for how that was found). Admin's markup is still
   just <ol><li><span>Label</span></li></ol> + a trailing <p> — no DOM
   changes needed, only CSS. */
#service-flow {
    padding-block: clamp(3rem, 6vw, var(--ppmv-section));
    background: linear-gradient(180deg, #ffffff 0%, var(--ppmv-gray-bg) 100%);
    border-top: 1px solid var(--ppmv-border);
    max-width: var(--ppmv-container);
    margin-inline: auto;
    padding-inline: 80px;
}

#service-flow ol,
#service-flow ul {
    counter-reset: ppmv-flow;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.75rem 1.5rem 1.25rem;
    margin: 2.5rem 0 0;
    list-style: none;
    /* Top half of the two-piece "shell" illusion — see the trailing
       <p> rule below for the matching bottom half. No wrapping div
       exists in Admin's markup, so the light rounded card the prototype
       shows is built from these two adjacent siblings sharing borders/
       radius/background with zero gap between them, rather than adding
       a new DOM wrapper for a single visual effect. */
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(11, 75, 122, 0.16);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(7, 58, 96, 0.09);
}

@media (min-width: 1024px) {
    #service-flow ol,
    #service-flow ul {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
    }

    /* Thin connecting line behind the row of steps. */
    #service-flow ol::before,
    #service-flow ul::before {
        content: "";
        position: absolute;
        left: 5%;
        right: 5%;
        top: 45%;
        height: 2px;
        background: linear-gradient(90deg, #a7aab1, #0b4b7a, #a7aab1);
        opacity: 0.68;
    }
}

#service-flow li {
    counter-increment: ppmv-flow;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 4.5rem;
    padding: 1.6rem 1rem 0.85rem;
    background: linear-gradient(155deg, #ffffff 8%, #e8ecef 100%);
    border: 1px solid rgba(11, 75, 122, 0.18);
    border-radius: 13px;
    text-align: center;
    box-shadow: 0 10px 24px rgba(7, 58, 96, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#service-flow li:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 75, 122, 0.5);
    box-shadow: 0 16px 34px rgba(7, 58, 96, 0.13);
}

@media (min-width: 1024px) {
    #service-flow li {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Circular numbered badge — replaces the old "01." text-only counter.
   Odd steps navy, even steps a lighter steel-gray, matching the
   prototype's alternating badge color (not an alternating card
   background, which is what this theme shipped with previously). */
#service-flow li::before {
    content: counter(ppmv-flow, decimal-leading-zero);
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 0.5rem;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--ppmv-navy-800);
    box-shadow: 0 5px 15px rgba(7, 58, 96, 0.2);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

#service-flow li:nth-child(even)::before {
    background: #6f8292;
}

#service-flow li::after {
    content: none;
}

/* Live inspection (docs/LIVE_DOM_AUDIT.md) shows Admin authors ONE
   <span> per <li> — a single label, not a separate title+description
   pair. */
#service-flow li span {
    display: block;
    color: var(--ppmv-navy-900, var(--ppmv-navy-950));
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
}

#service-flow li span:not(:only-child):not(:first-child) {
    margin-top: 0.25rem;
    color: var(--ppmv-body-text);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
}

#service-flow li strong,
#service-flow li h3,
#service-flow li h4 {
    display: block;
    margin: 0;
    color: var(--ppmv-navy-950);
    font-size: 0.92rem;
}

#service-flow li p {
    margin: 0.25rem 0 0;
    color: var(--ppmv-body-text);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Trailing <p> — "Continuous Provision of Services for Client's
   Business". A second, separate rounded card sitting right under the
   steps card (matching the prototype's own two-stacked-cards read),
   styled as a solid navy pill with an arrow. */
#service-flow p:last-of-type {
    position: relative;
    margin: 0.75rem 0 0;
    padding: 1rem 3.5rem 1rem 1.75rem;
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #0b4b7a, #416b8b);
    border-radius: 999px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 12px 26px rgba(7, 58, 96, 0.18);
}

#service-flow p:last-of-type::after {
    content: "\2192";
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font: 500 22px/1 Arial, sans-serif;
}

/* Tablet: keep the row horizontal but let it scroll rather than squeeze
   6 steps into a narrow viewport. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    #service-flow ol,
    #service-flow ul {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    #service-flow li {
        flex: 0 0 200px;
    }
}

/* Our Core Services — real Service records, rendered via
   partials/dynamic/services-grid.blade.php inside #core-services.
   v6.3.5: rebuilt against the prototype's hidden second-pass CSS
   (.ppmv-services-catalog) — a dark, full-bleed navy section with a
   faint oversized "+PM" watermark, not the plain light-background grid
   this theme shipped with. Reuses the same local architectural-grid
   asset as the hero rather than hotlinking the prototype's own
   Unsplash URL, for the same reasons noted on #services-hero above. */
#core-services {
    position: relative;
    isolation: isolate;
    max-width: none;
    padding-block: clamp(3rem, 6vw, var(--ppmv-section));
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(rgba(7, 58, 96, .93), rgba(11, 75, 122, .9)),
        url('../images/about/hero-architectural-placeholder.svg') center / cover no-repeat;
}

#core-services::after {
    content: "+PM";
    position: absolute;
    right: -28px;
    top: -84px;
    z-index: -1;
    color: rgba(255, 255, 255, 0.06);
    font: 700 clamp(150px, 21vw, 320px)/1 var(--ppmv-font-heading, inherit);
    letter-spacing: -0.09em;
    pointer-events: none;
}

#core-services > h2 {
    max-width: var(--ppmv-container);
    margin-inline: auto;
    padding-inline: 80px;
    color: #ffffff;
    text-align: center;
}

#core-services > div {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 80px;
}

@media (max-width: 767.98px) {
    #core-services > h2,
    #core-services > div {
        padding-inline: 20px;
    }
}

/* Glassmorphism dark cards — scoped to #core-services so Homepage/
   Projects/News, which reuse the same .ppmv-dyn-card/.ppmv-dyn-
   service-card classes on a light background, are unaffected. */
#core-services .ppmv-dyn-service-card {
    border: 1px solid transparent;
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(7, 58, 96, .97), rgba(11, 75, 122, .94)) padding-box,
        linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(167, 170, 177, .28), rgba(255, 255, 255, .62)) border-box;
    box-shadow: 0 18px 46px rgba(0, 24, 43, 0.24);
    backdrop-filter: blur(6px);
}

#core-services .ppmv-dyn-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 58px rgba(0, 24, 43, 0.32);
}

#core-services .ppmv-dyn-service-card h3,
#core-services .ppmv-dyn-service-card h3 a {
    color: #ffffff;
}

#core-services .ppmv-dyn-service-card p {
    color: rgba(255, 255, 255, 0.78);
}

#core-services .ppmv-dyn-card-icon-badge {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.32);
}

#core-services .ppmv-dyn-card-icon-bg {
    opacity: 0.1;
}

#core-services .ppmv-dyn-service-card a {
    color: #ffffff;
}

#core-services .ppmv-dyn-service-card a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* v6.3.5 — the raw approved copy (Admin's own saved content, confirmed
   live) uses a solid navy filled button here
   (`bg-deep-navy text-white`), not the light/white variant this
   section's markup carries (`.ppmv-button-light` — meant for dark hero
   backgrounds elsewhere on the site). On this section's light-gray
   background that variant renders as a near-invisible white-on-white
   button. Overriding the existing class here rather than editing
   Admin's saved HTML. */
#services-contact-cta {
    padding-block: clamp(3rem, 6vw, 4rem);
    background: var(--ppmv-gray-bg);
    border-top: 1px solid var(--ppmv-border);
    text-align: center;
}

#services-contact-cta h2,
#services-contact-cta p {
    max-width: 40rem;
    margin-inline: auto;
}

#services-contact-cta .ppmv-button-light {
    display: inline-block;
    margin-top: 1.5rem;
    background: var(--ppmv-navy-800) !important;
    border-color: var(--ppmv-navy-800) !important;
    color: #ffffff !important;
}

#services-contact-cta .ppmv-button-light:hover {
    background: var(--ppmv-navy-950) !important;
    color: #ffffff !important;
}

/* ====================================================================== *
 * DYNAMIC CARD GRIDS — shared by Homepage services/projects/news pulls
 * and the Services Listing #core-services block
 * ====================================================================== */

.ppmv-dyn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ppmv-gutter);
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .ppmv-dyn-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ppmv-dyn-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ppmv-dyn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ppmv-off-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.ppmv-dyn-card:hover {
    border-color: var(--ppmv-navy-800);
    box-shadow: var(--ppmv-shadow-sm);
    transform: translateY(-3px);
}

.ppmv-dyn-service-card {
    position: relative;
    overflow: hidden;
    padding: 2rem;
}

/* v6.3.0 — replaces the old "01/02/03" .ppmv-dyn-card-index number with
   a small solid icon badge plus a large, faded icon watermark, matching
   the approved prototype's service-card treatment.

   v6.3.1 FIX: the first cut of this (still in the v6.3.0 zip you may have
   already installed) had the Blade partial emit raw inline <svg>/<path>
   markup. That HTML is produced by DynamicGridRenderer, which runs BEFORE
   functions.php's ppmv_render_page_content() calls BaseHelper::clean() on
   the whole rendered page (see that file's docblock) — and BaseHelper::
   clean() (Botble's HTMLPurifier wrapper) strips <svg>/<path>/<circle>
   tags because they are not in its allowed-tag list, the same way it
   strips <form>/<input> elsewhere in this theme. Net effect: the wrapping
   <div> survived, everything inside it got silently deleted -> empty
   badge boxes, exactly what showed up live.

   Fix: the icons are now pure CSS. The Blade partial only ever outputs a
   plain <div class="ppmv-dyn-card-icon-badge ppmv-icon-KEY"></div> (and a
   matching watermark <span>) — no svg/path tags anywhere, so there is
   nothing for the sanitizer to touch. Each .ppmv-icon-KEY class below just
   sets a CSS custom property holding a data: URI background-image (the
   navy stroke color, #0b4b7a / --ppmv-navy-800, is baked directly into
   the SVG string since this component only ever appears on a fixed
   white-card background, so no currentColor/mask trickery is needed). */
.ppmv-dyn-card-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    background: var(--ppmv-gray-bg);
    background-image: var(--ppmv-icon-svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: var(--ppmv-navy-800);
}

.ppmv-dyn-card-icon-bg {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    z-index: 0;
    display: block;
    width: 108px;
    height: 108px;
    background-image: var(--ppmv-icon-svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
}

/* Icon key -> SVG lookup. Each Service name maps to one of these (see
   $ppmvServiceIcons in services-grid.blade.php); an unmatched/renamed
   Service falls back to .ppmv-icon-default so it never renders blank. */
.ppmv-icon-account-tree { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%230b4b7a'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2224%22%20cy=%2210%22%20r=%225%22/%3E%3Ccircle%20cx=%2210%22%20cy=%2238%22%20r=%225%22/%3E%3Ccircle%20cx=%2238%22%20cy=%2238%22%20r=%225%22/%3E%3Cpath%20d=%22M24%2015v9m0%200l-14%209m14-9l14%209%22/%3E%3C/svg%3E"); }
.ppmv-icon-hard-hat { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%230b4b7a'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M8%2034h32v4H8z%22/%3E%3Cpath%20d=%22M12%2034c0-11%205-19%2012-19s12%208%2012%2019%22/%3E%3Cpath%20d=%22M22%2015v-4h4v4%22/%3E%3C/svg%3E"); }
.ppmv-icon-design { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%230b4b7a'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M32%206l10%2010-22%2022H10V28z%22/%3E%3Cpath%20d=%22M26%2012l10%2010%22/%3E%3C/svg%3E"); }
.ppmv-icon-gavel { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%230b4b7a'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M27%206l11%2011-6%206-11-11z%22/%3E%3Cpath%20d=%22M22%2017l9%209-14%2014-9-9z%22/%3E%3Cpath%20d=%22M6%2042h18%22/%3E%3C/svg%3E"); }
.ppmv-icon-analytics { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%230b4b7a'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2220%22%20cy=%2220%22%20r=%2214%22/%3E%3Cpath%20d=%22M30%2030l10%2010%22/%3E%3Cpath%20d=%22M14%2022l5-6%204%204%207-8%22%20fill=%22none%22/%3E%3C/svg%3E"); }
.ppmv-icon-invoice { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%230b4b7a'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%204h20l6%206v34H12z%22/%3E%3Cpath%20d=%22M32%204v6h6%22/%3E%3Cpath%20d=%22M18%2020h14M18%2026h14M18%2032h9%22/%3E%3C/svg%3E"); }
.ppmv-icon-default { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%230b4b7a'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%228%22%20y=%228%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3Crect%20x=%2226%22%20y=%228%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3Crect%20x=%228%22%20y=%2226%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3Crect%20x=%2226%22%20y=%2226%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3C/svg%3E"); }

/* v6.3.6 — the icon SVGs above bake in a navy stroke
   (%230b4b7a) intended for the light service cards used on
   Homepage/Projects/News. #core-services now sits on a dark
   navy glass-card background (see above), where that same navy
   stroke is effectively invisible. Scoped white-stroke variants
   for this one context only -- Homepage/Projects/News keep the
   original navy icons unchanged. */
#core-services .ppmv-icon-account-tree { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2224%22%20cy=%2210%22%20r=%225%22/%3E%3Ccircle%20cx=%2210%22%20cy=%2238%22%20r=%225%22/%3E%3Ccircle%20cx=%2238%22%20cy=%2238%22%20r=%225%22/%3E%3Cpath%20d=%22M24%2015v9m0%200l-14%209m14-9l14%209%22/%3E%3C/svg%3E"); }
#core-services .ppmv-icon-hard-hat { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M8%2034h32v4H8z%22/%3E%3Cpath%20d=%22M12%2034c0-11%205-19%2012-19s12%208%2012%2019%22/%3E%3Cpath%20d=%22M22%2015v-4h4v4%22/%3E%3C/svg%3E"); }
#core-services .ppmv-icon-design { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M32%206l10%2010-22%2022H10V28z%22/%3E%3Cpath%20d=%22M26%2012l10%2010%22/%3E%3C/svg%3E"); }
#core-services .ppmv-icon-gavel { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M27%206l11%2011-6%206-11-11z%22/%3E%3Cpath%20d=%22M22%2017l9%209-14%2014-9-9z%22/%3E%3Cpath%20d=%22M6%2042h18%22/%3E%3C/svg%3E"); }
#core-services .ppmv-icon-analytics { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx=%2220%22%20cy=%2220%22%20r=%2214%22/%3E%3Cpath%20d=%22M30%2030l10%2010%22/%3E%3Cpath%20d=%22M14%2022l5-6%204%204%207-8%22%20fill=%22none%22/%3E%3C/svg%3E"); }
#core-services .ppmv-icon-invoice { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%204h20l6%206v34H12z%22/%3E%3Cpath%20d=%22M32%204v6h6%22/%3E%3Cpath%20d=%22M18%2020h14M18%2026h14M18%2032h9%22/%3E%3C/svg%3E"); }
#core-services .ppmv-icon-default { --ppmv-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x=%228%22%20y=%228%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3Crect%20x=%2226%22%20y=%228%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3Crect%20x=%228%22%20y=%2226%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3Crect%20x=%2226%22%20y=%2226%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3C/svg%3E"); }


.ppmv-dyn-service-card .ppmv-dyn-card-body {
    position: relative;
    z-index: 1;
}

/* v6.3.2 — client-requested removal: the approved prototype's service
   cards (both on the Homepage and the standalone Services listing page,
   which share this same partial/component) show only icon + title +
   description + "Learn More", no category eyebrow label above the title.
   CSS-only, scoped to this one card type — doesn't touch .ppmv-eyebrow
   anywhere else (section headings, hero, etc). The category is still in
   the data/DOM (Service Detail pages and Admin still show it), just not
   painted on this specific card. */
.ppmv-dyn-service-card .ppmv-eyebrow {
    display: none;
}

.ppmv-dyn-service-card h3 {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
}

.ppmv-dyn-service-card h3 a {
    color: var(--ppmv-navy-950);
    text-decoration: none;
}

.ppmv-dyn-service-card p {
    color: var(--ppmv-body-text);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.ppmv-dyn-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ppmv-gray-bg);
}

.ppmv-dyn-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.ppmv-dyn-card:hover .ppmv-dyn-card-media img {
    transform: scale(1.04);
}

.ppmv-dyn-project-card .ppmv-dyn-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.ppmv-dyn-project-card small {
    color: var(--ppmv-navy-800);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ppmv-dyn-project-card strong {
    color: var(--ppmv-navy-950);
    font-size: 1.05rem;
    font-weight: 700;
}

.ppmv-dyn-card-meta {
    color: var(--ppmv-body-text);
    font-size: 0.85rem;
}

.ppmv-dyn-news-card .ppmv-dyn-card-body {
    padding: 1.5rem;
}

.ppmv-dyn-card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    color: var(--ppmv-muted);
}

.ppmv-dyn-news-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.ppmv-dyn-news-card h3 a {
    color: var(--ppmv-navy-950);
    text-decoration: none;
}

.ppmv-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ppmv-navy-800);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.ppmv-arrow-link span:last-child {
    transition: transform 200ms ease;
}

.ppmv-dyn-card:hover .ppmv-arrow-link span:last-child,
.ppmv-arrow-link:hover span:last-child {
    transform: translateX(3px);
}

.ppmv-empty-state {
    padding: 2.5rem;
    text-align: center;
    color: var(--ppmv-muted);
    background: var(--ppmv-gray-bg);
    border-radius: var(--ppmv-radius-card);
}

@media (prefers-reduced-motion: reduce) {
    .ppmv-dyn-card,
    .ppmv-dyn-card-media img,
    .ppmv-arrow-link span:last-child {
        transition-duration: 0.01ms !important;
    }
}

/* ====================================================================== *
 * SERVICE DETAIL — #ppmv-service-project-management (generic: applies to
 * any Service record's semantic content, not just Project Management)
 * ====================================================================== */

.ppmv-service-detail-surface #service-introduction {
    padding-bottom: 1rem;
}

.ppmv-service-detail-surface #what-we-manage > ul,
.ppmv-service-detail-surface #what-we-manage > ol,
.ppmv-service-detail-surface .ppmv-manage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ppmv-gutter);
    padding: 0;
    margin: 2rem 0;
    list-style: none;
}

@media (min-width: 768px) {
    .ppmv-service-detail-surface #what-we-manage > ul,
    .ppmv-service-detail-surface #what-we-manage > ol,
    .ppmv-service-detail-surface .ppmv-manage-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ppmv-service-detail-surface #what-we-manage > ul > li,
.ppmv-service-detail-surface #what-we-manage > ol > li {
    position: relative;
    padding: 2.25rem 1.75rem 1.75rem;
    background: var(--ppmv-off-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
}

/* Decorative category icon per card — fixed order (Time & Schedule / Cost &
   Procurement / Quality & Coordination), navy-only per project palette. */
.ppmv-service-detail-surface #what-we-manage > ul > li::before,
.ppmv-service-detail-surface #what-we-manage > ol > li::before {
    position: static;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    background-color: var(--ppmv-navy-800);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.3rem 1.3rem;
    border-radius: var(--ppmv-radius-card);
    content: '';
}

.ppmv-service-detail-surface #what-we-manage > ul > li:nth-child(1)::before,
.ppmv-service-detail-surface #what-we-manage > ol > li:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
}

.ppmv-service-detail-surface #what-we-manage > ul > li:nth-child(2)::before,
.ppmv-service-detail-surface #what-we-manage > ol > li:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}

.ppmv-service-detail-surface #what-we-manage > ul > li:nth-child(3)::before,
.ppmv-service-detail-surface #what-we-manage > ol > li:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.ppmv-service-detail-surface #what-we-manage > ul > li h3,
.ppmv-service-detail-surface #what-we-manage > ol > li h3,
.ppmv-service-detail-surface #what-we-manage > ul > li h4,
.ppmv-service-detail-surface #what-we-manage > ol > li h4,
.ppmv-service-detail-surface #what-we-manage > ul > li strong,
.ppmv-service-detail-surface #what-we-manage > ol > li strong {
    display: block;
    margin: 0 0 0.5rem;
    color: var(--ppmv-navy-950);
    font-size: 1.05rem;
}

.ppmv-service-detail-surface #what-we-manage > ul > li > p,
.ppmv-service-detail-surface #what-we-manage > ol > li > p {
    margin: 0;
    color: var(--ppmv-body-text);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Optional sub-bullet list nested inside a What We Manage card. The outer
   grid/card selectors above are scoped to direct children only (> ul/> ol),
   so this nested list is safe to author without becoming an unwanted grid. */
.ppmv-service-detail-surface #what-we-manage > ul > li ul,
.ppmv-service-detail-surface #what-we-manage > ol > li ul {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.ppmv-service-detail-surface #what-we-manage > ul > li ul li,
.ppmv-service-detail-surface #what-we-manage > ol > li ul li {
    position: relative;
    padding: 0 0 0.4rem 1.1rem;
    color: var(--ppmv-body-text);
    font-size: 0.88rem;
    line-height: 1.5;
}

.ppmv-service-detail-surface #what-we-manage > ul > li ul li::before,
.ppmv-service-detail-surface #what-we-manage > ol > li ul li::before {
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    background: var(--ppmv-navy-800);
    border-radius: 50%;
    content: '';
}

/* Our Role Across the Project — horizontal stage sequence */
.ppmv-service-detail-surface #project-lifecycle > ol,
.ppmv-service-detail-surface #project-lifecycle > ul {
    display: flex;
    flex-wrap: wrap;
    counter-reset: ppmv-stage;
    gap: 0.75rem;
    padding: 0;
    margin: 2rem 0;
    list-style: none;
}

.ppmv-service-detail-surface #project-lifecycle > ol > li,
.ppmv-service-detail-surface #project-lifecycle > ul > li {
    counter-increment: ppmv-stage;
    flex: 1 1 140px;
    position: relative;
    padding: 1.25rem 1rem 1rem;
    text-align: center;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
}

.ppmv-service-detail-surface #project-lifecycle > ol > li::before,
.ppmv-service-detail-surface #project-lifecycle > ul > li::before {
    position: static;
    content: counter(ppmv-stage);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 auto 0.6rem;
    border-radius: 50%;
    background: var(--ppmv-navy-800);
    color: var(--ppmv-white);
    font-size: 0.75rem;
    font-weight: 700;
}

.ppmv-service-detail-surface #project-lifecycle > ol > li strong,
.ppmv-service-detail-surface #project-lifecycle > ul > li strong,
.ppmv-service-detail-surface #project-lifecycle > ol > li h3,
.ppmv-service-detail-surface #project-lifecycle > ul > li h3,
.ppmv-service-detail-surface #project-lifecycle > ol > li h4,
.ppmv-service-detail-surface #project-lifecycle > ul > li h4 {
    display: block;
    color: var(--ppmv-navy-950);
    font-size: 0.9rem;
}

/* How We Protect the Client */
.ppmv-service-detail-surface #client-protection {
    padding: clamp(2rem, 4vw, 3rem);
    margin: 2rem 0;
    background: var(--ppmv-gray-bg);
    border-radius: var(--ppmv-radius-card);
}

.ppmv-service-detail-surface #client-protection > ul,
.ppmv-service-detail-surface #client-protection > ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0;
    margin: 1.5rem 0 0;
    list-style: none;
}

@media (min-width: 768px) {
    .ppmv-service-detail-surface #client-protection > ul,
    .ppmv-service-detail-surface #client-protection > ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ppmv-service-detail-surface #client-protection > ul > li,
.ppmv-service-detail-surface #client-protection > ol > li {
    padding-left: 2rem;
    position: relative;
    color: var(--ppmv-ink);
}

.ppmv-service-detail-surface #client-protection > ul > li::before,
.ppmv-service-detail-surface #client-protection > ol > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--ppmv-navy-800);
    border-radius: 50%;
}

.ppmv-service-detail-surface #client-protection > ul > li::after,
.ppmv-service-detail-surface #client-protection > ol > li::after {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.5rem;
    width: 0.6rem;
    height: 0.35rem;
    border-left: 2px solid var(--ppmv-white, #fff);
    border-bottom: 2px solid var(--ppmv-white, #fff);
    transform: rotate(-45deg);
}

/* Key Deliverables */
.ppmv-service-detail-surface #key-deliverables > ul,
.ppmv-service-detail-surface #key-deliverables > ol {
    padding: 0;
    margin: 1.5rem 0 0;
    list-style: none;
    border-top: 1px solid var(--ppmv-border);
}

.ppmv-service-detail-surface #key-deliverables > ul > li,
.ppmv-service-detail-surface #key-deliverables > ol > li {
    position: relative;
    padding: 1rem 0 1rem 1.75rem;
    border-bottom: 1px solid var(--ppmv-border);
    color: var(--ppmv-ink);
}

.ppmv-service-detail-surface #key-deliverables > ul > li::before,
.ppmv-service-detail-surface #key-deliverables > ol > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.35rem;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--ppmv-navy-800);
    border-radius: 50%;
}

/* Related Projects / Other Services headings inside service detail body */
.ppmv-service-detail-surface #related-projects h2,
.ppmv-service-detail-surface #other-services h2 {
    font-size: 1.4rem;
    color: var(--ppmv-navy-950);
}

/* ====================================================================== *
 * PROJECT DETAIL — #ppmv-project-sumida (generic: applies to any Project
 * record's semantic content)
 * ====================================================================== */

.ppmv-project-detail-surface #project-hero-content {
    padding-bottom: 1rem;
}

/* v5.0.0: #project-information's content (a <dl> in Admin's actual
   authored HTML, not the <table> v4.1.x assumed) is normalized by
   renderers/InformationGridRenderer.php into one stable structure —
   .ppmv-info-grid-wrap > .ppmv-info-grid > .ppmv-info-row(.is-empty) >
   .ppmv-info-label + .ppmv-info-value — regardless of whether Admin
   used a <dl> or a <table>. This CSS styles that renderer output only;
   it does not need to know or guess which tag Admin used. */
.ppmv-info-grid-wrap {
    margin: 2rem 0;
}

.ppmv-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    overflow: hidden;
}

.ppmv-info-row {
    display: grid;
    grid-template-columns: 33% 1fr;
    border-bottom: 1px solid var(--ppmv-border);
}

.ppmv-info-row:last-child {
    border-bottom: 0;
}

.ppmv-info-label,
.ppmv-info-value {
    padding: 0.9rem 1.25rem;
}

.ppmv-info-label {
    background: var(--ppmv-gray-bg);
    color: var(--ppmv-muted);
    font-weight: 700;
    font-size: 0.85rem;
}

.ppmv-info-value {
    color: var(--ppmv-ink);
}

/* A row whose value is intentionally empty (no source fact) still
   renders — never dropped — per "keep blank rows, don't invent or
   delete." The renderer already substitutes an em dash; this just mutes
   its color so it reads as "known to be blank," not body text. */
.ppmv-info-row.is-empty .ppmv-info-value {
    color: var(--ppmv-silver);
}

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

    .ppmv-info-label {
        border-bottom: 1px solid var(--ppmv-border);
    }
}

/* v5.0.0: #company-profile is normalized by
   renderers/ProfileTableRenderer.php from Admin's flat H3/P sequence
   (including a label whose value spans more than one <p>, e.g.
   "Address") into real label/value rows — CSS never has to infer that
   grouping via nth-child. */
.ppmv-profile-table {
    margin: 2rem 0;
}

.ppmv-profile-rows {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    overflow: hidden;
    margin: 1.5rem 0 0;
}

.ppmv-profile-row {
    display: grid;
    grid-template-columns: 30% 1fr;
    border-bottom: 1px solid var(--ppmv-border);
}

.ppmv-profile-row:last-child {
    border-bottom: 0;
}

.ppmv-profile-label,
.ppmv-profile-value {
    margin: 0;
    padding: 1rem 1.25rem;
}

.ppmv-profile-label {
    background: var(--ppmv-gray-bg);
    color: var(--ppmv-navy-950);
    font-weight: 700;
    font-size: 0.9rem;
}

.ppmv-profile-value {
    color: var(--ppmv-ink);
}

.ppmv-profile-value p {
    margin: 0 0 0.6rem;
}

.ppmv-profile-value p:last-child {
    margin-bottom: 0;
}

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

    .ppmv-profile-label {
        border-bottom: 1px solid var(--ppmv-border);
    }
}

/* v5.0.0: #our-advantage is normalized by
   renderers/AdvantageCardsRenderer.php from Admin's flat H3/P sequence
   into 4 real card components — a flat grid of headings and bodies as
   direct siblings cannot be paired into cards by CSS alone. */
.ppmv-advantage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .ppmv-advantage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ppmv-advantage-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ppmv-advantage-card {
    padding: 1.75rem 1.5rem;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-top: 3px solid var(--ppmv-navy-800);
    border-radius: var(--ppmv-radius-card);
    box-shadow: 0 1px 2px rgba(0, 20, 40, 0.05);
}

.ppmv-advantage-index {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--ppmv-navy-800);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ppmv-advantage-title {
    margin: 0 0 0.5rem;
    color: var(--ppmv-navy-950);
    font-size: 1.05rem;
    font-weight: 700;
}

.ppmv-advantage-body {
    color: var(--ppmv-body-text);
    font-size: 0.9rem;
    line-height: 1.6;
}

.ppmv-advantage-body p {
    margin: 0;
}

/* A dynamic grid that legitimately returned zero results (as opposed to
   a renderer failure, which surfaces as an HTML comment for QA — see
   renderers/DynamicGridRenderer.php) renders one hidden, empty div. The
   [hidden] attribute already removes it from layout; this is a defensive
   backstop in case a parent style ever overrides display. */
.ppmv-dyn-empty {
    display: none !important;
}

.ppmv-project-detail-surface #project-feature-photo img {
    width: 100%;
    border-radius: var(--ppmv-radius-card);
}

.ppmv-project-detail-surface #project-challenges,
.ppmv-project-detail-surface #project-outcome {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    margin: 2rem 0;
    background: var(--ppmv-gray-bg);
    border-radius: var(--ppmv-radius-card);
}

.ppmv-project-detail-surface #project-services ul,
.ppmv-project-detail-surface #project-services ol {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0;
    margin: 1.5rem 0 0;
    list-style: none;
}

@media (min-width: 640px) {
    .ppmv-project-detail-surface #project-services ul,
    .ppmv-project-detail-surface #project-services ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ppmv-project-detail-surface #project-services li {
    padding: 1rem 1.25rem;
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    color: var(--ppmv-ink);
    font-weight: 500;
}

/* Project Gallery — reuses the theme's existing .ppmv-gallery-grid /
   data-ppmv-lightbox mechanism already wired in ppmv.js; only spacing is
   added here so an Admin-authored #project-gallery block matches it. */
.ppmv-project-detail-surface #project-gallery img {
    border-radius: var(--ppmv-radius-card);
}

/* Client Voice — only rendered by Admin when a real quote exists; no
   placeholder/fabricated content, so this only needs baseline styling. */
.ppmv-project-detail-surface #client-voice blockquote {
    max-width: 42rem;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--ppmv-gray-bg);
    border-left: 4px solid var(--ppmv-navy-800);
    border-radius: var(--ppmv-radius-card);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ppmv-navy-950);
}

/* ====================================================================== *
 * NEWS DETAIL — #ppmv-news-sumida-tree-planting (generic: applies to any
 * Blog Post's semantic content)
 * ====================================================================== */

.ppmv-news-detail-surface #news-introduction {
    font-size: 1.05rem;
    line-height: 1.75;
}

.ppmv-news-detail-surface #news-tree-gift,
.ppmv-news-detail-surface #news-partnership {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin: 2rem 0;
    background: var(--ppmv-gray-bg);
    border-radius: var(--ppmv-radius-card);
}

.ppmv-news-detail-surface #news-tree-gift h2,
.ppmv-news-detail-surface #news-partnership h2,
.ppmv-news-detail-surface #news-introduction h2 {
    color: var(--ppmv-navy-950);
    font-size: 1.3rem;
}

/* ====================================================================== *
 * CONTACT — #ppmv-contact (#contact-hero / #contact-main /
 * #contact-form-slot / #visit-office)
 * ====================================================================== */

#ppmv-contact #contact-hero {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5rem);
    color: var(--ppmv-white);
    background: linear-gradient(135deg, var(--ppmv-navy-950), var(--ppmv-navy-800));
    text-align: center;
    box-shadow: 0 12px 24px -16px rgba(0, 20, 40, 0.35);
}

#ppmv-contact #contact-hero h1 {
    margin: 0 auto;
    max-width: 36rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--ppmv-white);
}

#ppmv-contact #contact-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ppmv-gutter);
    padding-block: clamp(3rem, 6vw, var(--ppmv-section));
}

@media (min-width: 1024px) {
    #ppmv-contact #contact-main {
        grid-template-columns: 5fr 7fr;
        align-items: start;
    }
}

#ppmv-contact #contact-main > :first-child > * + * {
    margin-top: 1.75rem;
}

/* #contact-form-slot wraps the real Botble Contact Form
   shortcode/widget — the plugin still owns validation + submission.
   Everything here is layout/typography only. */
#contact-form-slot,
.contact-form-widget {
    padding: clamp(1.75rem, 3vw, 3rem);
    background: var(--ppmv-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
}

/* v5.0.0: renderers/ContactFormRenderer.php wraps the real Botble
   Contact Form output in .ppmv-real-contact-form, under the "Send Us an
   Inquiry" <h2> Admin already authored. The rules above target
   `#contact-form-slot form ...` as descendant selectors, so this extra
   wrapper div doesn't break them — this just spaces the heading. */
#contact-form-slot > h2 {
    margin: 0 0 1.5rem;
    color: var(--ppmv-navy-950);
    font-size: 1.3rem;
}

.contact-form-widget {
    background: var(--ppmv-white) !important;
}

#contact-form-slot form .row,
.contact-form-widget form .row {
    --bs-gutter-x: 1.25rem;
    row-gap: 1.25rem;
}

#contact-form-slot label,
.contact-form-widget label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--ppmv-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#contact-form-slot .form-control,
#contact-form-slot .form-select,
.contact-form-widget .form-control,
.contact-form-widget .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--ppmv-off-white);
    border: 1px solid var(--ppmv-border);
    border-radius: var(--ppmv-radius-card);
    color: var(--ppmv-ink);
    font-family: var(--ppmv-font);
    font-size: 0.95rem;
}

#contact-form-slot .form-control:focus,
#contact-form-slot .form-select:focus,
.contact-form-widget .form-control:focus,
.contact-form-widget .form-select:focus {
    outline: none;
    border-color: var(--ppmv-navy-800);
    box-shadow: 0 0 0 3px rgba(11, 75, 122, 0.14);
}

#contact-form-slot textarea.form-control,
.contact-form-widget textarea.form-control {
    min-height: 9rem;
    resize: vertical;
}

/* Fixes the Phase B checkbox rendering finding: Botble's default
   "I agree to the Terms and Privacy Policy" checkbox markup is a
   standard Bootstrap .form-check, which the parent theme's stripped
   CSS layer no longer styles at all. */
#contact-form-slot .form-check,
.contact-form-widget .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-left: 0;
}

#contact-form-slot .form-check-input,
.contact-form-widget .form-check-input {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    accent-color: var(--ppmv-navy-800);
    border: 1px solid var(--ppmv-silver);
    border-radius: 3px;
}

#contact-form-slot .form-check-label,
.contact-form-widget .form-check-label {
    margin: 0;
    color: var(--ppmv-body-text);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.5;
}

#contact-form-slot button[type='submit'],
.contact-form-widget button[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    background: var(--ppmv-navy-800);
    color: var(--ppmv-white);
    border: 0;
    border-radius: var(--ppmv-radius-card);
    font-family: var(--ppmv-font);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 180ms ease;
}

#contact-form-slot button[type='submit']:hover,
.contact-form-widget button[type='submit']:hover {
    background: var(--ppmv-navy-950);
}

#visit-office {
    padding-block: clamp(3rem, 6vw, var(--ppmv-section));
    background: var(--ppmv-gray-bg);
    border-top: 1px solid var(--ppmv-border);
}

#visit-office iframe,
#visit-office .ppmv-map-embed {
    width: 100%;
    aspect-ratio: 16 / 8;
    border: 0;
    border-radius: var(--ppmv-radius-card);
}

@media (max-width: 1023.98px) {
    #visit-office iframe,
    #visit-office .ppmv-map-embed {
        aspect-ratio: 4 / 3;
    }
}

/* ====================================================================== *
 * RESPONSIVE SANITY — QA breakpoints 390 / 768 / 1024 / 1440
 * ====================================================================== */

@media (max-width: 389.98px) {
    .ppmv-cc-container {
        width: min(100% - 32px, var(--ppmv-max));
    }

    #service-flow li::before,
    .ppmv-service-detail-surface #project-lifecycle > ol > li::before,
    .ppmv-service-detail-surface #project-lifecycle > ul > li::before {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* Prevent any content-contract block from causing horizontal overflow
   regardless of what Admin pastes inside it. */
.ppmv-page-content,
.ppmv-detail-surface {
    overflow-x: hidden;
}

.ppmv-page-content table,
.ppmv-detail-surface table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.ppmv-page-content img,
.ppmv-detail-surface img {
    max-width: 100%;
    height: auto;
}