*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden; background: var(--pn-background);
color: var(--pn-on-surface);
font-family: var(--pn-font-body);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3, p, ul {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-size: 1em;
line-height: 1; display: inline-block;
width: 1em;
height: 1em;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
} .pn-container {
width: 100%;
max-width: var(--pn-container-max);
margin-inline: auto;
padding-inline: var(--pn-page-margin-desktop);
}
@media (max-width: 768px) {
.pn-container {
padding-inline: var(--pn-page-margin-mobile);
}
}
.pn-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pn-space-sm);
padding: var(--pn-space-md) var(--pn-space-xl);
border-radius: var(--pn-radius-full);
font-family: var(--pn-font-body);
font-size: var(--pn-button-size);
font-weight: var(--pn-button-weight);
border: 1px solid transparent;
cursor: pointer;
transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.pn-button:active {
transform: scale(0.97);
}
.pn-button--primary {
background: var(--pn-white);
color: var(--pn-navy);
}
.pn-button--primary:hover {
opacity: 0.9;
}
.pn-button--ghost {
background: rgba(255, 255, 255, 0.1);
border-color: var(--pn-white);
color: var(--pn-white);
backdrop-filter: blur(4px);
}
.pn-button--ghost:hover {
background: rgba(255, 255, 255, 0.2);
} .pn-button--green {
background: var(--pn-green);
color: var(--pn-white);
}
.pn-button--green:hover {
opacity: 0.9;
} .pn-button--blue {
background: var(--pn-navy);
color: var(--pn-white);
}
.pn-button--blue:hover {
opacity: 0.9;
}
.pn-block-button {
display: flex;
margin-block: var(--pn-space-lg);
}
.pn-block-button--left {
justify-content: flex-start;
}
.pn-block-button--center {
justify-content: center;
}
.pn-block-button--right {
justify-content: flex-end;
}
.pn-button--navbar {
background: var(--pn-navy);
color: var(--pn-white);
padding: var(--pn-space-sm) var(--pn-space-lg);
}
.pn-button--navbar:hover {
opacity: 0.85;
} .pn-section-cta {
display: flex;
margin-top: var(--pn-space-2xl);
}
.pn-section-cta--right {
justify-content: flex-end;
}
.pn-link {
display: inline-flex;
align-items: center;
gap: var(--pn-space-xs);
font-family: var(--pn-font-body);
font-size: var(--pn-button-size);
font-weight: 700;
color: var(--pn-green);
}
.pn-arrow-slide {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
overflow: hidden;
vertical-align: middle;
}
.pn-arrow-slide__icon {
position: absolute;
top: 0;
left: 0;
}
.pn-arrow-slide__icon--current {
transform: translateX(0);
}
.pn-arrow-slide__icon--incoming {
transform: translateX(-150%);
} .pn-arrow-slide--down .pn-arrow-slide__icon--current {
transform: translateY(0);
}
.pn-arrow-slide--down .pn-arrow-slide__icon--incoming {
transform: translateY(-150%);
}
.pn-load-more:hover .pn-arrow-slide--down .pn-arrow-slide__icon--current {
transform: translateY(150%);
transition: transform 0.3s ease;
}
.pn-load-more:hover .pn-arrow-slide--down .pn-arrow-slide__icon--incoming {
transform: translateY(0);
transition: transform 0.3s ease;
} .pn-link--arrow:hover .pn-arrow-slide__icon--current,
.pn-card:hover .pn-arrow-slide__icon--current,
.pn-home-lyw__card:hover .pn-arrow-slide__icon--current,
.pn-reports__featured:hover .pn-arrow-slide__icon--current,
.pn-reports__side-item:hover .pn-arrow-slide__icon--current {
transform: translateX(150%);
transition: transform 0.3s ease;
}
.pn-link--arrow:hover .pn-arrow-slide__icon--incoming,
.pn-card:hover .pn-arrow-slide__icon--incoming,
.pn-home-lyw__card:hover .pn-arrow-slide__icon--incoming,
.pn-reports__featured:hover .pn-arrow-slide__icon--incoming,
.pn-reports__side-item:hover .pn-arrow-slide__icon--incoming {
transform: translateX(0);
transition: transform 0.3s ease;
}
.pn-tag {
display: inline-block;
padding: 4px var(--pn-space-md);
border-radius: var(--pn-radius-full);
color: var(--pn-white);
font-family: var(--pn-font-body);
font-size: var(--pn-label-md-size);
font-weight: 700;
}
.pn-tag--magenta { background: var(--pn-magenta); }
.pn-tag--yellow  { background: var(--pn-yellow); color: var(--pn-navy); } .pn-navbar {
position: sticky;
top: 0;
z-index: 50;
background: var(--pn-background);
width: 100%;
transition: box-shadow 0.2s ease;
}
.pn-navbar.is-scrolled {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.pn-navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pn-space-lg);
padding-block: var(--pn-space-md);
}
.pn-navbar__logo {
display: flex;
align-items: center;
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
font-weight: 700;
color: var(--pn-navy);
}
.pn-navbar__logo-img {
height: 40px;
width: auto;
object-fit: contain;
}
.pn-navbar__nav {
display: none;
align-items: center;
gap: var(--pn-space-lg);
}
.pn-navbar__link {
font-family: var(--pn-font-body);
font-size: var(--pn-label-lg-size);
font-weight: var(--pn-label-lg-weight);
color: var(--pn-on-surface-variant);
padding-bottom: 4px;
border-bottom: 2px solid transparent;
transition: color 0.15s ease;
}
.pn-navbar__link:hover {
color: var(--pn-navy);
}
.pn-navbar__link--active {
color: var(--pn-navy);
border-bottom-color: var(--pn-navy);
}
.pn-navbar__toggle {
background: none;
border: none;
color: var(--pn-navy);
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: var(--pn-space-xs);
}
.pn-navbar__mobile {
display: none;
flex-direction: column;
gap: var(--pn-space-lg);
padding: var(--pn-space-lg) var(--pn-page-margin-mobile) var(--pn-space-xl);
border-top: 1px solid var(--pn-surface-low);
}
.pn-navbar__mobile.is-open {
display: flex;
}
.pn-navbar-scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 40;
}
.pn-navbar-scrim.is-open {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 769px) {
.pn-navbar-scrim {
display: none;
}
}
.pn-navbar__nav--mobile {
display: flex;
flex-direction: column;
gap: var(--pn-space-md);
}
@media (min-width: 769px) {
.pn-navbar__nav {
display: flex;
}
.pn-navbar__toggle {
display: none;
}
.pn-navbar__mobile {
display: none !important;
}
}
@media (max-width: 768px) {
.pn-navbar .pn-button--navbar {
display: none;
}
.pn-navbar__mobile .pn-button--navbar {
display: inline-flex;
}
} .pn-hero {
position: relative;
width: 100%;
min-height: 90vh;
display: flex;
align-items: center;
background: var(--pn-navy);
overflow: hidden;
}
.pn-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.pn-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-hero__bg--fallback {
background: linear-gradient(135deg, var(--pn-navy), #0a1730);
}
.pn-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(19, 41, 75, 0.9), rgba(19, 41, 75, 0.4));
}
.pn-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--pn-space-xl);
padding-top: 128px;
padding-bottom: 96px;
}
.pn-hero__headline {
max-width: 900px;
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-display-size);
line-height: var(--pn-headline-display-line);
letter-spacing: var(--pn-headline-display-tracking);
font-weight: var(--pn-headline-display-weight);
}
.pn-hero__subtext {
max-width: 480px;
color: rgba(255, 255, 255, 0.9);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pn-space-md);
} .pn-hero-scroll {
position: absolute;
bottom: var(--pn-space-xl);
left: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: none;
background: none;
padding: 0;
color: var(--pn-surface-low);
cursor: pointer; transform: translateX(-50%);
animation: pn-hero-scroll-bounce 1.8s ease-in-out infinite;
}
.pn-hero-scroll .material-symbols-outlined {
font-size: 36px;
}
.pn-hero-scroll:hover {
opacity: 0.8;
}
@keyframes pn-hero-scroll-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50%      { transform: translateX(-50%) translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
.pn-hero-scroll {
animation: none;
}
} .pn-metrics {
width: 100%;
background: var(--pn-navy);
padding-block: var(--pn-section-desktop);
}
.pn-metrics__header {
max-width: 640px;
margin-bottom: var(--pn-space-2xl);
}
.pn-metrics__heading {
margin-bottom: var(--pn-space-sm);
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-metrics__subtext {
color: rgba(255, 255, 255, 0.75);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-metrics__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pn-space-2xl);
}
.pn-metrics__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.pn-metrics__number {
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-display-size);
line-height: var(--pn-headline-display-line);
letter-spacing: var(--pn-headline-display-tracking);
font-weight: var(--pn-headline-display-weight);
}
.pn-metrics__number--magenta { color: var(--pn-magenta); }
.pn-metrics__number--green   { color: var(--pn-green); }
.pn-metrics__number--yellow  { color: var(--pn-yellow); }
.pn-metrics__label {
margin-top: var(--pn-space-sm);
color: rgba(255, 255, 255, 0.9);
font-size: var(--pn-label-lg-size);
font-weight: var(--pn-label-lg-weight);
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (min-width: 769px) {
.pn-metrics__inner {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.pn-metrics__item {
align-items: flex-start;
text-align: left;
}
} .pn-pillars {
width: 100%;
background: var(--pn-surface-lowest);
padding-block: var(--pn-section-desktop);
}
.pn-pillars__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--pn-space-lg);
margin-bottom: var(--pn-space-3xl);
}
.pn-pillars__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
letter-spacing: var(--pn-headline-lg-tracking);
font-weight: var(--pn-headline-lg-weight);
}
.pn-pillars__list {
display: flex;
flex-direction: column;
gap: var(--pn-space-3xl);
}
.pn-pillars__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pn-space-xl);
}
.pn-pillars__text {
position: relative;
z-index: 0; width: 100%;
}
.pn-pillars__decor { position: absolute;
top: 20px;
left: 0;
width: 256px;
height: 256px;
object-fit: contain;
opacity: 0.2;
z-index: -1;
pointer-events: none;
will-change: transform;
transform: translate(-50%, -50%);
transform-origin: center;
}
.pn-pillars__decor--spin { transition: none;
}
.pn-pillars__title {
margin-top: var(--pn-space-md);
margin-bottom: var(--pn-space-md);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-md-size);
line-height: var(--pn-headline-md-line);
letter-spacing: var(--pn-headline-md-tracking);
font-weight: var(--pn-headline-md-weight);
}
.pn-pillars__description {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
}
.pn-pillars__link {
margin-top: var(--pn-space-lg);
}
.pn-pillars__image {
width: 100%;
height: 280px;
border-radius: var(--pn-radius);
overflow: hidden;
background: var(--pn-surface-low);
}
.pn-pillars__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 769px) {
.pn-pillars__item {
flex-direction: row;
gap: var(--pn-space-3xl);
}
.pn-pillars__item--reverse {
flex-direction: row-reverse;
}
.pn-pillars__text {
width: 33.333%;
flex-shrink: 0;
}
.pn-pillars__image {
width: 66.666%;
height: 500px;
}
} .pn-projects {
width: 100%;
background: var(--pn-surface-low);
padding-block: var(--pn-section-desktop);
}
.pn-projects__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--pn-space-lg);
margin-bottom: var(--pn-space-3xl);
}
.pn-projects__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
letter-spacing: var(--pn-headline-lg-tracking);
font-weight: var(--pn-headline-lg-weight);
}
.pn-projects__subtext {
margin-top: var(--pn-space-sm);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-projects__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-gutter);
}
@media (min-width: 769px) {
.pn-projects__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pn-link--on-dark {
color: var(--pn-green);
} .pn-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--pn-radius-card);
overflow: hidden;
background: var(--pn-white);
box-shadow: 0 4px 20px rgba(19, 41, 75, 0.18);
cursor: pointer;
}
.pn-card__stretched-link {
position: absolute;
inset: 0;
z-index: 2;
}
.pn-card__image {
position: relative;
height: 300px;
}
.pn-card__image--placeholder {
background: linear-gradient(135deg, #2c4269, #13294b);
}
.pn-card__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-card__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 12%, rgba(255, 255, 255, 0) 55%);
pointer-events: none;
}
.pn-card__tags {
position: absolute;
top: var(--pn-space-md);
left: var(--pn-space-md);
z-index: 1;
display: flex;
gap: var(--pn-space-sm);
}
.pn-card__caption {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
padding: var(--pn-space-lg) var(--pn-space-lg) var(--pn-space-xs);
box-sizing: border-box;
}
.pn-card__title {
margin: 0 0 var(--pn-space-xs);
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: var(--pn-headline-sm-weight);
}
.pn-card__type {
display: block;
color: var(--pn-on-surface-variant);
font-size: var(--pn-label-md-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
} .pn-card__image--photo .pn-card__title {
color: var(--pn-navy);
} .pn-card__body .pn-card__title {
margin: 0;
color: var(--pn-navy);
}
.pn-card--plain-image .pn-card__body {
padding-top: var(--pn-space-lg);
}
.pn-card__body {
display: flex;
flex-direction: column;
gap: var(--pn-space-md);
padding: var(--pn-space-xs) var(--pn-space-lg) var(--pn-space-lg);
}
.pn-card__body .pn-link--arrow {
margin-top: var(--pn-space-sm);
}
.pn-card__meta {
display: flex;
flex-direction: column;
gap: var(--pn-space-xs);
color: var(--pn-navy);
font-size: var(--pn-body-md-size);
}
.pn-card__meta li {
display: flex;
align-items: center;
gap: var(--pn-space-sm);
}
.pn-card__meta .material-symbols-outlined {
font-size: 16px;
} .pn-reports {
width: 100%;
background: var(--pn-navy);
padding-block: var(--pn-section-desktop);
}
.pn-reports__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--pn-space-lg);
margin-bottom: var(--pn-space-3xl);
}
.pn-reports__heading {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
letter-spacing: var(--pn-headline-lg-tracking);
font-weight: var(--pn-headline-lg-weight);
}
.pn-reports__subtext {
margin-top: var(--pn-space-sm);
color: rgba(255, 255, 255, 0.75);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-reports__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-space-xl);
}
.pn-reports__featured,
.pn-reports__side-item {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
position: relative;
z-index: 0;
border-radius: var(--pn-radius);
overflow: hidden;
color: var(--pn-white);
box-shadow: 0 4px 20px rgba(19, 41, 75, 0.18);
}
.pn-reports__photo {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-reports__scrim {
position: absolute;
inset: 0;
z-index: -1; background: linear-gradient(to top, var(--pn-navy) 0%, rgba(19, 41, 75, 0.85) 35%, rgba(19, 41, 75, 0) 68%);
}
.pn-reports__featured {
min-height: 400px;
padding: var(--pn-space-2xl);
gap: var(--pn-space-sm);
}
.pn-reports__featured-title {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
margin-bottom: var(--pn-space-sm);
}
.pn-reports__featured-description {
max-width: 480px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--pn-space-sm);
}
.pn-reports__side {
display: flex;
flex-direction: column;
gap: var(--pn-space-xl);
}
.pn-reports__side-item {
min-height: 200px;
padding: var(--pn-space-xl);
gap: var(--pn-space-sm);
}
.pn-reports__side-title {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: var(--pn-headline-sm-weight);
}
@media (min-width: 769px) {
.pn-reports__grid {
grid-template-columns: 2fr 1fr;
}
.pn-reports__featured {
min-height: 600px;
}
.pn-reports__side-item {
min-height: 284px;
}
} .pn-footer {
width: 100%;
background: var(--pn-navy);
padding-block: var(--pn-space-3xl);
}
.pn-footer__grid {
display: flex;
flex-direction: column;
gap: var(--pn-space-2xl);
padding-bottom: var(--pn-space-2xl);
margin-bottom: var(--pn-space-2xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media (min-width: 769px) {
.pn-footer__grid {
flex-direction: row;
justify-content: space-between;
}
}
.pn-footer__logo {
display: inline-flex;
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
font-weight: var(--pn-headline-sm-weight);
}
.pn-footer__logo-img {
height: 220px;
width: auto;
} @media (min-width: 769px) {
.pn-footer__logo {
flex: 0 0 auto;
width: calc(220px * 643.8 / 529.49);
}
.pn-footer__logo-img {
max-width: none;
}
}
.pn-footer__column {
display: flex;
flex-direction: column;
}
.pn-footer__column-heading {
margin: 0 0 var(--pn-space-md);
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-body-lg-size);
font-weight: 800;
}
.pn-footer__nav {
display: flex;
flex-direction: column;
gap: var(--pn-space-sm);
}
.pn-footer__nav--legal {
margin-top: var(--pn-space-md);
}
.pn-footer__nav a {
color: rgba(255, 255, 255, 0.75);
font-size: var(--pn-body-md-size);
}
.pn-footer__nav a:hover {
color: var(--pn-white);
}
.pn-footer__column--social {
align-items: flex-start;
gap: var(--pn-space-sm);
}
.pn-footer__socials {
display: flex;
align-items: center;
gap: var(--pn-space-md);
}
.pn-footer__social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
}
.pn-footer__social-icon svg {
width: 100%;
height: 100%;
}
.pn-footer__social-icon--green,
.pn-footer__social-icon--red,
.pn-footer__social-icon--yellow {
color: var(--pn-white);
}
.pn-footer__social-icon:hover {
opacity: 0.8;
}
.pn-footer__eu-logo {
max-height: 68px;
width: auto; margin-top: auto;
align-self: flex-end;
}
.pn-footer__copy {
color: rgba(255, 255, 255, 0.6);
font-size: var(--pn-body-sm-size);
}
@media (max-width: 768px) { .pn-footer__logo {
align-self: center;
}
.pn-footer__eu-logo {
align-self: center;
margin-top: var(--pn-space-2xl);
}
} .pn-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: var(--pn-radius-full);
font-family: var(--pn-font-body);
font-size: var(--pn-label-md-size);
font-weight: 700;
letter-spacing: 0.05em;
}
.pn-pill__dot {
display: inline-block;
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
background: currentColor;
animation: pn-pill-blink 1.4s ease-in-out infinite;
}
@keyframes pn-pill-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.pn-pill__dot {
animation: none;
}
}
.pn-pill--yellow { background: var(--pn-yellow); color: var(--pn-navy); }
.pn-pill--green  { background: var(--pn-green); color: var(--pn-white); }
.pn-pill--red    { background: var(--pn-magenta); color: var(--pn-white); }
.pn-pill--navy   { background: var(--pn-navy); color: var(--pn-white); } .pn-pill--red .pn-pill__dot {
animation: none;
} .pn-project-hero {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
background: var(--pn-navy);
overflow: hidden;
}
.pn-project-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.pn-project-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-project-hero__bg--fallback {
background: linear-gradient(135deg, var(--pn-navy), #0a1730);
}
.pn-project-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(19, 41, 75, 0.95), rgba(19, 41, 75, 0.5));
}
.pn-project-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--pn-space-lg);
max-width: 900px;
margin-inline: auto;
padding-block: 140px 64px;
}
.pn-project-hero__badge-row {
display: flex;
align-items: center;
gap: var(--pn-space-md);
}
.pn-project-hero__type {
color: var(--pn-white);
font-size: var(--pn-label-lg-size);
font-weight: 700;
letter-spacing: 0.08em;
}
.pn-project-hero__title {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-display-size);
line-height: var(--pn-headline-display-line);
letter-spacing: var(--pn-headline-display-tracking);
font-weight: var(--pn-headline-display-weight);
}
.pn-project-hero__subtext {
max-width: 620px;
color: rgba(255, 255, 255, 0.92);
font-size: var(--pn-headline-sm-size);
line-height: 1.5;
font-weight: 400;
}
.pn-project-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pn-space-md);
margin-top: var(--pn-space-md);
}
.pn-project-hero__actions .pn-button {
padding: var(--pn-space-md) var(--pn-space-2xl);
font-size: 18px;
} .pn-project-infobar {
width: 100%;
background: var(--pn-navy);
padding-block: var(--pn-space-3xl);
}
.pn-project-infobar__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pn-space-xl);
}
.pn-project-infobar__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pn-space-sm);
text-align: center;
}
.pn-project-infobar__caption {
display: flex;
align-items: center;
gap: var(--pn-space-sm);
color: rgba(255, 255, 255, 0.8);
font-size: var(--pn-label-lg-size);
font-weight: 700;
letter-spacing: 0.08em;
}
.pn-project-infobar__icon {
font-size: 20px;
}
.pn-project-infobar__icon--green  { color: var(--pn-green); }
.pn-project-infobar__icon--red    { color: var(--pn-magenta); }
.pn-project-infobar__icon--yellow { color: var(--pn-yellow); }
.pn-project-infobar__value {
color: var(--pn-white);
font-size: 18px;
font-weight: 700;
}
@media (min-width: 769px) {
.pn-project-infobar__inner {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.pn-project-infobar__item {
align-items: flex-start;
text-align: left;
}
} .pn-project-about {
position: relative;
width: 100%;
background-color: var(--pn-surface-lowest);
padding-block: var(--pn-section-desktop);
}
.pn-project-about__decor { display: none;
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
width: 600px;
height: 600px;
overflow: hidden;
background-repeat: no-repeat;
background-position: top left;
background-size: 1200px 1200px;
pointer-events: none;
}
.pn-project-about__grid {
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.pn-project-about__decor {
display: block;
}
}
.pn-project-about__grid {
display: flex;
flex-direction: column;
gap: var(--pn-space-3xl);
}
.pn-project-about__main {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
gap: var(--pn-space-xl);
order: 1;
}
.pn-project-about__side {
display: flex;
flex-direction: column;
gap: var(--pn-space-xl);
order: -1;
}
.pn-project-about__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: 700;
margin-bottom: var(--pn-space-sm);
}
.pn-project-about__block {
padding-top: var(--pn-space-lg);
border-top: 1px solid var(--pn-surface-low);
}
.pn-project-about__block-heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: 700;
margin-bottom: var(--pn-space-sm);
}
.pn-project-about__text {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
}
.pn-project-about__text p {
margin: 0 0 var(--pn-space-md);
}
.pn-project-about__text p:last-child {
margin-bottom: 0;
}
.pn-project-about__text strong {
font-weight: 700;
color: var(--pn-navy);
}
.pn-project-about__text ul,
.pn-project-about__text ol {
margin: 0 0 var(--pn-space-md);
padding-left: 1.25em;
}
.pn-project-about__text ul {
list-style: disc;
}
.pn-project-about__text ol {
list-style: decimal;
}
.pn-project-about__text li {
margin-bottom: var(--pn-space-sm);
}
.pn-project-about__text li:last-child {
margin-bottom: 0;
} .pn-project-about__text iframe,
.pn-report-content iframe {
display: block;
width: 100%;
max-width: 480px;
aspect-ratio: 16 / 9;
height: auto;
margin: var(--pn-space-lg) 0;
border: 0;
border-radius: var(--pn-radius);
}
@media (min-width: 769px) {
.pn-project-about__grid {
flex-direction: row;
align-items: flex-start;
}
.pn-project-about__main {
order: 0;
width: 66%;
}
.pn-project-about__side {
order: 0;
width: 34%;
flex-shrink: 0;
}
}
.pn-info-box {
background: var(--pn-navy);
color: var(--pn-white);
border-radius: var(--pn-radius);
padding: var(--pn-space-xl);
}
.pn-info-box__heading {
text-align: left;
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: 700;
margin-bottom: var(--pn-space-lg);
}
.pn-info-box__items {
display: flex;
flex-direction: column;
gap: var(--pn-space-md);
}
.pn-info-box__item {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: var(--pn-space-md);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.pn-info-box__item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.pn-info-box__item-label {
color: rgba(255, 255, 255, 0.65);
font-size: var(--pn-label-md-size);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pn-info-box__item-value {
font-size: var(--pn-body-md-size);
font-weight: 600;
}
.pn-info-box__item--list {
flex-direction: row;
align-items: flex-start;
gap: var(--pn-space-sm);
padding-bottom: 0;
border-bottom: none;
}
.pn-info-box__item-icon {
margin-top: 2px;
color: var(--pn-green);
font-size: 20px;
} .pn-project-gallery {
width: 100%;
background: var(--pn-navy);
padding-block: var(--pn-section-desktop);
}
.pn-project-gallery__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--pn-space-lg);
margin-bottom: var(--pn-space-2xl);
}
.pn-project-gallery__heading {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-project-gallery__description {
margin-top: var(--pn-space-sm);
color: rgba(255, 255, 255, 0.75);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-project-gallery__nav {
display: flex;
gap: var(--pn-space-sm);
flex-shrink: 0;
}
.pn-project-gallery__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: var(--pn-white);
cursor: pointer;
transition: background-color 0.15s ease;
}
.pn-project-gallery__arrow:hover {
background: rgba(255, 255, 255, 0.1);
}
.pn-project-gallery__track {
display: flex;
gap: var(--pn-gutter);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
cursor: grab;
}
.pn-project-gallery__track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.pn-project-gallery__track::-webkit-scrollbar {
display: none;
} .pn-project-gallery--grid .pn-project-gallery__track {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-gutter);
overflow: visible;
scroll-snap-type: none;
cursor: default;
}
@media (min-width: 769px) {
.pn-project-gallery--grid .pn-project-gallery__track {
grid-template-columns: repeat(3, 1fr);
}
}
.pn-project-gallery--grid .pn-lyw-carousel__card {
width: 100%;
}
.pn-project-gallery__item {
flex: 0 0 auto;
width: 70%;
max-width: 520px;
height: 360px;
border-radius: var(--pn-radius);
overflow: hidden;
scroll-snap-align: start;
}
.pn-project-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 769px) {
.pn-project-gallery__item {
width: 45%;
}
} .pn-archive-hero {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
background: var(--pn-navy);
overflow: hidden;
}
.pn-archive-hero--compact {
min-height: 60vh;
} .pn-archive-hero--plain {
min-height: 60vh;
background: var(--pn-navy);
} .pn-hero-decor {
position: absolute;
width: 320px;
height: 320px;
background-repeat: no-repeat;
background-size: 640px 640px;
pointer-events: none;
will-change: transform;
transform: translateY(var(--pn-parallax-offset, 0px));
} .pn-hero-decor--top-right {
top: -100px;
right: 0;
height: 420px;
background-position: 0px -220px;
}
.pn-hero-decor--bottom-left {
bottom: -100px;
left: 0;
height: 420px;
background-position: -320px 0px;
} @media (max-width: 1023px) {
.pn-hero-decor {
width: 160px;
height: 160px;
background-size: 320px 320px;
}
.pn-hero-decor--top-right {
top: -50px;
height: 210px;
background-position: 0px -110px;
}
.pn-hero-decor--bottom-left {
bottom: -50px;
height: 210px;
background-position: -160px 0px;
}
} .pn-hero-decor-rotated {
position: absolute;
width: 560px;
height: 560px;
pointer-events: none;
transform: translateY(var(--pn-parallax-offset, 0px));
} .pn-hero-decor-rotated--bottom-left {
bottom: -140px;
left: -140px;
transform: rotate(30deg) translateY(var(--pn-parallax-offset, 0px));
}
.pn-hero-decor-rotated--top-right {
top: -140px;
right: -140px;
}
.pn-hero-decor-rotated img {
width: 100%;
height: 100%;
object-fit: contain;
} @media (max-width: 1023px) {
.pn-hero-decor-rotated {
width: 280px;
height: 280px;
}
.pn-hero-decor-rotated--bottom-left {
bottom: -70px;
left: -70px;
}
.pn-hero-decor-rotated--top-right {
top: -70px;
right: -70px;
}
}
.pn-archive-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.pn-archive-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-archive-hero__bg--fallback {
background: linear-gradient(135deg, var(--pn-navy), #0a1730);
}
.pn-archive-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(19, 41, 75, 0.9), rgba(19, 41, 75, 0.4));
}
.pn-archive-hero__inner {
position: relative;
z-index: 1;
max-width: 900px;
margin-inline: auto;
text-align: center;
}
.pn-archive-hero__title {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-display-size);
line-height: var(--pn-headline-display-line);
letter-spacing: var(--pn-headline-display-tracking);
font-weight: var(--pn-headline-display-weight);
}
.pn-archive-hero__subtext {
margin-top: var(--pn-space-md);
color: rgba(255, 255, 255, 0.9);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
} .pn-404__code {
margin-bottom: var(--pn-space-md);
color: var(--pn-green);
font-family: var(--pn-font-headline);
font-size: var(--pn-body-lg-size);
font-weight: 800;
letter-spacing: 0.2em;
}
.pn-404__actions {
display: flex;
justify-content: center;
margin-top: var(--pn-space-xl);
}
.pn-archive-intro {
width: 100%;
background: var(--pn-white);
padding-block: var(--pn-space-3xl);
}
.pn-archive-intro__text {
max-width: 780px;
margin-inline: auto;
color: var(--pn-navy);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
text-align: center;
} .pn-projects-archive {
width: 100%;
background: var(--pn-white);
padding-top: var(--pn-space-xl);
padding-bottom: var(--pn-section-desktop);
}
.pn-projects-archive--reports {
padding-top: var(--pn-space-3xl);
}
.pn-projects-archive__filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pn-space-sm);
margin-bottom: var(--pn-space-2xl);
}
.pn-projects-archive__filter-label {
margin: 0 0 var(--pn-space-md);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-label-lg-size);
font-weight: 700;
text-align: center;
}
.pn-filter-pill {
padding: var(--pn-space-sm) var(--pn-space-lg);
border: none;
border-radius: var(--pn-radius-full);
background: var(--pn-surface-low);
color: var(--pn-navy);
font-family: var(--pn-font-body);
font-size: var(--pn-label-lg-size);
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.pn-filter-pill:hover {
background: var(--pn-surface-container-highest, #e2e2e2);
} .pn-filter-pill.is-active {
background: var(--pn-navy);
color: var(--pn-white);
}
.pn-filter-pill--all.is-active {
background: var(--pn-navy);
color: var(--pn-white);
}
.pn-filter-pill--upcoming.is-active {
background: var(--pn-yellow);
color: var(--pn-navy);
}
.pn-filter-pill--ongoing.is-active {
background: var(--pn-green);
color: var(--pn-white);
}
.pn-filter-pill--completed.is-active {
background: var(--pn-magenta);
color: var(--pn-white);
}
.pn-filter-pill--report.is-active {
background: var(--pn-magenta);
color: var(--pn-white);
}
.pn-filter-pill--story.is-active {
background: var(--pn-yellow);
color: var(--pn-navy);
}
.pn-projects-archive__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-gutter);
}
@media (min-width: 640px) {
.pn-projects-archive__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.pn-projects-archive__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pn-card__description {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-sm-size);
line-height: var(--pn-body-sm-line);
} .pn-card--plain-image .pn-card__description {
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
}
.pn-projects-archive__empty {
grid-column: 1 / -1;
padding-block: var(--pn-space-2xl);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
text-align: center;
}
.pn-projects-archive__load-more {
display: flex;
justify-content: center;
margin-top: var(--pn-space-2xl);
}
.pn-load-more {
display: inline-flex;
align-items: center;
gap: var(--pn-space-xs);
border: none;
background: none;
padding: 0;
color: var(--pn-green);
font-family: var(--pn-font-body);
font-size: var(--pn-button-size);
font-weight: 700;
cursor: pointer;
}
.pn-load-more:disabled {
opacity: 0.5;
cursor: default;
}
.pn-load-more .pn-arrow-slide {
font-size: 20px;
}
.pn-load-more:hover .material-symbols-outlined {
transform: translateY(3px);
} .pn-project-cta {
position: relative;
width: 100%;
overflow: hidden;
background: var(--pn-surface-low);
padding-block: var(--pn-section-desktop);
}
.pn-project-cta__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--pn-space-md);
max-width: 640px;
margin-inline: auto;
}
.pn-project-cta__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-project-cta__subtext {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-project-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pn-space-md);
margin-top: var(--pn-space-sm);
} .pn-project-cta .pn-button--primary {
background: var(--pn-navy);
color: var(--pn-white);
}
.pn-project-cta .pn-button--ghost {
background: transparent;
border-color: var(--pn-navy);
color: var(--pn-navy);
}
.pn-project-cta__decor { display: none;
position: absolute;
bottom: -140px;
left: -140px;
width: 560px;
height: 560px;
z-index: 0;
pointer-events: none;
transform: rotate(30deg);
}
.pn-project-cta__decor img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (min-width: 1024px) {
.pn-project-cta__decor {
display: block;
}
} .pn-report-hero {
position: relative;
width: 100%; min-height: 60vh;
min-height: 60svh;
display: flex;
align-items: center;
justify-content: center;
background: var(--pn-navy);
overflow: hidden;
}
.pn-report-hero__badge-row {
display: flex;
align-items: center;
justify-content: center;
gap: var(--pn-space-md);
margin-bottom: var(--pn-space-md);
}
.pn-report-hero__date {
color: rgba(255, 255, 255, 0.8);
font-size: var(--pn-label-md-size);
font-weight: 600;
letter-spacing: 0.05em;
}
.pn-report-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.pn-report-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-report-hero__bg--fallback {
background: linear-gradient(135deg, var(--pn-navy), #0a1730);
}
.pn-report-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(19, 41, 75, 0.9), rgba(19, 41, 75, 0.4));
}
.pn-report-hero__inner {
position: relative;
z-index: 1;
max-width: 800px;
margin-inline: auto;
text-align: center;
}
.pn-report-hero__title {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-display-size);
line-height: var(--pn-headline-display-line);
letter-spacing: var(--pn-headline-display-tracking);
font-weight: var(--pn-headline-display-weight);
}
.pn-report-hero__subtext {
margin-top: var(--pn-space-md);
color: rgba(255, 255, 255, 0.9);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-report-content {
padding-block: var(--pn-section-desktop);
} .pn-report-content > p,
.pn-report-content > h1,
.pn-report-content > h2,
.pn-report-content > h3,
.pn-report-content > h4,
.pn-report-content > ul,
.pn-report-content > ol,
.pn-report-content > blockquote,
.pn-report-content > figure,
.pn-report-content > img,
.pn-report-content > .pn-block-button {
max-width: var(--pn-container-max);
margin-inline: auto;
padding-inline: var(--pn-page-margin-desktop);
} @media (max-width: 768px) {
.pn-report-content > p,
.pn-report-content > h1,
.pn-report-content > h2,
.pn-report-content > h3,
.pn-report-content > h4,
.pn-report-content > ul,
.pn-report-content > ol,
.pn-report-content > blockquote,
.pn-report-content > figure,
.pn-report-content > img,
.pn-report-content > .pn-block-button {
padding-inline: var(--pn-page-margin-mobile);
}
} .pn-report-content > h2 {
margin-top: var(--pn-space-2xl);
margin-bottom: var(--pn-space-md);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-md-size);
line-height: var(--pn-headline-md-line);
font-weight: var(--pn-headline-md-weight);
}
.pn-report-content > h3 {
margin-top: var(--pn-space-xl);
margin-bottom: var(--pn-space-sm);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: var(--pn-headline-sm-weight);
}
.pn-report-content > p {
margin-bottom: var(--pn-space-md);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
}
.pn-report-content > ul,
.pn-report-content > ol {
margin: 0 0 var(--pn-space-md);
padding-left: 1.25em;
color: var(--pn-on-surface-variant);
}
.pn-report-content > ul > li,
.pn-report-content > ol > li {
margin-bottom: var(--pn-space-sm);
}
.pn-report-content > img {
border-radius: var(--pn-radius);
margin-block: var(--pn-space-md);
}
.pn-report-content > p > a,
.pn-report-content > ul a,
.pn-report-content > ol a,
.pn-report-content > blockquote a {
display: inline-flex;
align-items: center;
gap: var(--pn-space-xs);
color: var(--pn-green);
font-weight: 700;
}
.pn-report-content > p > a::after,
.pn-report-content > ul a::after,
.pn-report-content > ol a::after,
.pn-report-content > blockquote a::after {
font-family: 'Material Symbols Outlined';
content: 'arrow_forward';
font-size: 1em;
transition: transform 0.2s ease;
}
.pn-report-content > p > a:hover::after,
.pn-report-content > ul a:hover::after,
.pn-report-content > ol a:hover::after,
.pn-report-content > blockquote a:hover::after {
transform: translateX(4px);
}
.pn-report-content > blockquote {
margin: var(--pn-space-lg) 0;
padding-left: var(--pn-space-lg);
border-left: 3px solid var(--pn-green);
color: var(--pn-navy);
font-style: italic;
} .pn-card--report {
background: var(--pn-navy);
}
.pn-card--report .pn-card__image--placeholder {
background: linear-gradient(135deg, #0a1730, var(--pn-navy));
}
.pn-card--report .pn-card__scrim {
background: linear-gradient(to top, rgba(19, 41, 75, 1) 0%, rgba(19, 41, 75, 0.9) 35%, rgba(19, 41, 75, 0) 68%);
}
.pn-card--report .pn-card__title {
color: var(--pn-white);
}
.pn-card--report .pn-card__type {
color: rgba(255, 255, 255, 0.7);
}
.pn-card--report .pn-card__description {
color: rgba(255, 255, 255, 0.85);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
} .pn-about-story {
width: 100%;
background: var(--pn-surface-low);
padding-block: var(--pn-section-desktop);
}
.pn-about-story__grid {
display: flex;
flex-direction: column;
gap: var(--pn-space-xl);
}
.pn-about-story__image {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--pn-radius-lg);
overflow: hidden;
background: var(--pn-surface-low);
}
.pn-about-story__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-about-story__content {
display: flex;
flex-direction: column;
gap: var(--pn-space-lg);
}
.pn-about-story__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-about-story__text {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-about-story__text p {
margin: 0 0 var(--pn-space-md);
}
.pn-about-story__text p:last-child {
margin-bottom: 0;
}
@media (min-width: 1024px) {
.pn-about-story__grid {
flex-direction: row;
align-items: center;
gap: var(--pn-space-3xl);
}
.pn-about-story__image,
.pn-about-story__content {
width: 50%;
flex-shrink: 0;
} .pn-about-story--flip .pn-about-story__grid {
flex-direction: row-reverse;
}
} .pn-about-drives {
width: 100%;
background: var(--pn-surface-lowest);
padding-block: var(--pn-section-desktop);
}
.pn-about-drives__header {
max-width: 640px;
margin: 0 auto var(--pn-space-3xl);
text-align: center;
}
.pn-about-drives__heading {
margin-bottom: var(--pn-space-md);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-about-drives__subtext {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-about-drives__boxes {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-space-xl);
margin-bottom: var(--pn-space-3xl);
}
@media (min-width: 769px) {
.pn-about-drives__boxes {
grid-template-columns: repeat(2, 1fr);
}
}
.pn-about-drives__box {
background: var(--pn-navy);
border-radius: var(--pn-radius);
padding: var(--pn-space-2xl);
}
.pn-about-drives__box-header {
display: flex;
align-items: center;
gap: var(--pn-space-md);
margin-bottom: var(--pn-space-lg);
}
.pn-about-drives__icon {
font-size: 36px;
}
.pn-about-drives__icon--green { color: var(--pn-green); }
.pn-about-drives__icon--red   { color: var(--pn-magenta); }
.pn-about-drives__box-heading {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-md-size);
line-height: var(--pn-headline-md-line);
font-weight: var(--pn-headline-md-weight);
}
.pn-about-drives__box-text {
color: rgba(255, 255, 255, 0.85);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
}
.pn-about-drives__values-heading {
margin-bottom: var(--pn-space-xl);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: var(--pn-headline-sm-weight);
text-align: center;
}
.pn-about-drives__values {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pn-space-md);
}
.pn-about-drives__value {
padding: var(--pn-space-md) var(--pn-space-xl);
border-radius: var(--pn-radius-full);
background: var(--pn-yellow);
color: var(--pn-navy);
font-family: var(--pn-font-body);
font-size: var(--pn-label-lg-size);
font-weight: var(--pn-label-lg-weight);
box-shadow: 0 2px 10px rgba(19, 41, 75, 0.2);
opacity: 0;
transform: translateY(28px);
transition: transform 0.5s ease, opacity 0.5s ease;
}
.pn-about-drives__value.is-visible {
opacity: 1;
transform: translateY(0);
}
.pn-about-drives__value.is-visible:hover {
transform: translateY(-3px);
}
.pn-about-drives__value:nth-child(1) { transition-delay: 0s; }
.pn-about-drives__value:nth-child(2) { transition-delay: 0.08s; }
.pn-about-drives__value:nth-child(3) { transition-delay: 0.16s; }
.pn-about-drives__value:nth-child(4) { transition-delay: 0.24s; }
.pn-about-drives__value:nth-child(5) { transition-delay: 0.32s; }
.pn-about-drives__value:nth-child(6) { transition-delay: 0.4s; }
.pn-about-drives__value:nth-child(7) { transition-delay: 0.48s; }
.pn-about-drives__value:nth-child(8) { transition-delay: 0.56s; } .pn-about-team {
width: 100%;
background: var(--pn-surface-low);
padding-block: var(--pn-section-desktop);
}
.pn-about-team__header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pn-space-md);
margin-bottom: var(--pn-space-3xl);
text-align: center;
}
.pn-about-team__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-about-team__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--pn-space-3xl) var(--pn-space-xl);
}
@media (min-width: 769px) {
.pn-about-team__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pn-about-team__member {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.pn-about-team__photo {
width: 160px;
height: 160px;
margin-bottom: var(--pn-space-lg);
border-radius: 50%;
overflow: hidden;
background: var(--pn-surface-low);
box-shadow: 0 12px 28px rgba(19, 41, 75, 0.35);
transition: box-shadow 0.25s ease;
}
.pn-about-team__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-about-team__member:hover .pn-about-team__photo {
box-shadow: 0 16px 32px rgba(19, 41, 75, 0.45);
}
.pn-about-team__name {
margin-bottom: 2px;
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: var(--pn-headline-sm-weight);
}
.pn-about-team__role {
max-width: 280px;
margin-inline: auto;
color: var(--pn-on-surface-variant);
font-size: var(--pn-label-md-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
} .pn-about-partners {
width: 100%;
background: var(--pn-white);
padding-block: var(--pn-section-desktop);
} .pn-home-partners__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--pn-space-lg);
margin-bottom: var(--pn-space-3xl);
}
.pn-home-partners__header-text {
max-width: 560px;
}
.pn-home-partners__heading {
margin-bottom: var(--pn-space-sm);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-home-partners__subtext {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-about-partners__group {
text-align: center;
}
.pn-about-partners__group + .pn-about-partners__group {
margin-top: var(--pn-space-3xl);
}
.pn-about-partners__heading {
margin-bottom: var(--pn-space-xl);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-md-size);
line-height: var(--pn-headline-md-line);
font-weight: var(--pn-headline-md-weight);
}
.pn-about-partners__marquee {
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.pn-about-partners__track {
display: flex;
align-items: center;
gap: var(--pn-space-3xl);
width: max-content;
animation: pn-partners-marquee 28s linear infinite;
}
.pn-about-partners__marquee:hover .pn-about-partners__track {
animation-play-state: paused;
}
@keyframes pn-partners-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.pn-about-partners__track {
animation: none;
}
}
.pn-about-partners__logo {
height: 110px;
width: auto;
max-width: 260px;
object-fit: contain;
flex-shrink: 0;
}
.pn-about-partners__logo-link {
display: flex;
flex-shrink: 0;
}
.pn-about-partners__logo-link:hover {
opacity: 0.8;
} .pn-about-cta {
position: relative;
width: 100%;
overflow: hidden;
background: var(--pn-navy);
padding-block: var(--pn-section-desktop);
}
.pn-about-cta__decor {
display: none;
position: absolute;
width: 320px;
height: 320px;
background-repeat: no-repeat;
background-size: 640px 640px;
z-index: 0;
pointer-events: none;
will-change: transform;
transform: translateY(var(--pn-parallax-offset, 0px));
} .pn-about-cta__decor--triangle {
top: -100px;
left: 0;
height: 420px;
background-position: -320px -220px;
}
.pn-about-cta__decor--circle {
bottom: -100px;
right: 0;
height: 420px;
background-position: 0px 0px;
}
@media (min-width: 1024px) {
.pn-about-cta__decor {
display: block;
}
}
.pn-about-cta__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--pn-space-md);
max-width: 640px;
margin-inline: auto;
}
.pn-about-cta__heading {
color: var(--pn-white);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-about-cta__subtext {
color: rgba(255, 255, 255, 0.85);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-about-cta .pn-button {
margin-top: var(--pn-space-sm);
} .pn-toolkits {
width: 100%;
background: var(--pn-white);
padding-block: var(--pn-section-desktop);
}
.pn-toolkits__list {
display: flex;
flex-direction: column;
gap: var(--pn-space-lg);
} .pn-toolkit {
background: var(--pn-navy); border-radius: var(--pn-radius-xl);
overflow: hidden;
}
.pn-toolkit__header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pn-space-md);
width: 100%;
color: var(--pn-white);
padding: var(--pn-space-md) var(--pn-space-xl);
cursor: pointer;
}
.pn-toolkit__chevron {
flex-shrink: 0;
font-size: var(--pn-headline-sm-size);
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
transition: transform 0.25s ease;
}
.pn-toolkit__header[aria-expanded="true"] .pn-toolkit__chevron {
transform: rotate(180deg);
}
.pn-toolkit__title {
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
font-weight: 700;
}
.pn-toolkit__type {
color: rgba(255, 255, 255, 0.65);
font-size: var(--pn-label-md-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pn-toolkit__button {
flex-shrink: 0;
margin-left: auto;
}
.pn-toolkit__button--mobile {
display: none;
grid-column: 1;
justify-self: start;
margin-left: 0; margin-top: var(--pn-space-lg);
}
.pn-toolkit__panel {
overflow: hidden;
max-height: 0;
color: var(--pn-white);
transition: max-height 0.35s ease;
} @media (max-width: 1024px) {
.pn-toolkit__type,
.pn-toolkit__button--desktop {
display: none;
}
.pn-toolkit__button--mobile {
display: inline-flex;
} .pn-toolkit__header {
flex-wrap: nowrap;
}
.pn-toolkit__title {
min-width: 0;
}
}
.pn-toolkit__panel-inner {
display: grid;
grid-template-columns: 60% 1fr;
gap: var(--pn-space-xl);
padding: var(--pn-space-xl);
}
.pn-toolkit__description {
color: rgba(255, 255, 255, 0.85);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
}
.pn-toolkit__description a {
color: var(--pn-yellow);
}
.pn-toolkit__description p + p {
margin-top: var(--pn-space-md);
}
@media (max-width: 768px) {
.pn-toolkit__panel-inner {
grid-template-columns: 1fr;
}
}  .pn-lyw-content {
padding-block: var(--pn-section-desktop);
}
.pn-lyw-content > p,
.pn-lyw-content > h1,
.pn-lyw-content > h2,
.pn-lyw-content > h3,
.pn-lyw-content > h4,
.pn-lyw-content > ul,
.pn-lyw-content > ol,
.pn-lyw-content > blockquote,
.pn-lyw-content > figure,
.pn-lyw-content > .pn-block-button {
max-width: var(--pn-container-max);
margin-inline: auto;
padding-inline: var(--pn-page-margin-desktop);
} @media (max-width: 768px) {
.pn-lyw-content > p,
.pn-lyw-content > h1,
.pn-lyw-content > h2,
.pn-lyw-content > h3,
.pn-lyw-content > h4,
.pn-lyw-content > ul,
.pn-lyw-content > ol,
.pn-lyw-content > blockquote,
.pn-lyw-content > figure,
.pn-lyw-content > .pn-block-button {
padding-inline: var(--pn-page-margin-mobile);
}
} .pn-lyw-content > * + * {
margin-top: var(--pn-space-md);
}
.pn-lyw-content > h1 + *,
.pn-lyw-content > h2 + *,
.pn-lyw-content > h3 + *,
.pn-lyw-content > h4 + * {
margin-top: var(--pn-space-sm);
} .pn-lyw-content > :where(p, h1, h2, h3, h4, ul, ol, blockquote) a {
display: inline-flex;
align-items: center;
gap: var(--pn-space-xs);
color: var(--pn-green);
font-weight: 700;
}
.pn-lyw-content > :where(p, h1, h2, h3, h4, ul, ol, blockquote) a::after {
font-family: 'Material Symbols Outlined';
content: 'arrow_forward';
font-size: 1em;
transition: transform 0.2s ease;
}
.pn-lyw-content > :where(p, h1, h2, h3, h4, ul, ol, blockquote) a:hover::after {
transform: translateX(4px);
} .pn-project-gallery.pn-editor-block,
.pn-about-team.pn-editor-block,
.pn-about-story.pn-editor-block,
.pn-home-tools.pn-editor-block {
background: transparent; padding-block: var(--pn-space-2xl);
}
.pn-project-gallery.pn-editor-block .pn-project-gallery__heading,
.pn-project-gallery.pn-editor-block .pn-project-gallery__description {
color: var(--pn-navy);
}
.pn-project-gallery.pn-editor-block .pn-project-gallery__description {
color: var(--pn-on-surface-variant);
}
.pn-project-gallery.pn-editor-block .pn-project-gallery__arrow {
border-color: rgba(19, 41, 75, 0.25);
color: var(--pn-navy);
}
.pn-project-gallery.pn-editor-block .pn-project-gallery__arrow:hover {
background: rgba(19, 41, 75, 0.06);
} .pn-about-story.pn-editor-block .pn-about-story__text {
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
} .pn-about-story.pn-editor-block .pn-about-story__text a {
display: inline-flex;
align-items: center;
gap: var(--pn-space-xs);
color: var(--pn-green);
font-weight: 700;
}
.pn-about-story.pn-editor-block .pn-about-story__text a::after {
font-family: 'Material Symbols Outlined';
content: 'arrow_forward';
font-size: 1em;
transition: transform 0.2s ease;
}
.pn-about-story.pn-editor-block .pn-about-story__text a:hover::after {
transform: translateX(4px);
}  .pn-lyw-section {
width: 100%;
padding-block: var(--pn-section-desktop);
}
.pn-lyw-section.pn-lyw-section--white {
background: var(--pn-white);
}
.pn-lyw-section.pn-lyw-section--gray {
background: var(--pn-surface-low);
}
.pn-lyw-section__header-text {
max-width: 640px;
}
.pn-lyw-section__heading {
margin-bottom: var(--pn-space-sm);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-lyw-section__text {
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
} .pn-lyw-section .pn-project-gallery__arrow {
border-color: rgba(19, 41, 75, 0.25);
color: var(--pn-navy);
}
.pn-lyw-section .pn-project-gallery__arrow:hover {
background: rgba(19, 41, 75, 0.06);
}
.pn-lyw-carousel__card { flex: 0 0 auto;
width: 400px;
scroll-snap-align: start;
} .pn-card--navy-body {
background: var(--pn-navy);
}
.pn-card--navy-body .pn-card__body .pn-card__title {
color: var(--pn-white);
}
.pn-card--navy-body .pn-card__description {
color: rgba(255, 255, 255, 0.75);
} .pn-card--logo-image .pn-card__image {
background: var(--pn-white);
}
.pn-card--logo-image .pn-card__photo {
object-fit: contain;
padding: var(--pn-space-lg);
box-sizing: border-box;
} .pn-home-lyw {
width: 100%;
background: var(--pn-white);
padding-block: var(--pn-section-desktop);
}
.pn-home-lyw__header-text {
max-width: 640px;
margin-bottom: var(--pn-space-2xl);
}
@media (min-width: 769px) {
.pn-home-lyw__header-text {
max-width: none;
}
.pn-home-lyw__heading {
white-space: nowrap;
}
}
.pn-home-lyw__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-home-lyw__subtext {
margin-top: var(--pn-space-sm);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-home-lyw__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-gutter);
}
@media (min-width: 769px) {
.pn-home-lyw__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.pn-home-lyw__card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--pn-radius-card);
overflow: hidden;
background: var(--pn-white);
box-shadow: 0 4px 20px rgba(19, 41, 75, 0.18);
cursor: pointer;
}
.pn-home-lyw__card-image {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #2c4269, #13294b);
}
.pn-home-lyw__card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-home-lyw__card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--pn-space-md);
padding: var(--pn-space-lg);
}
.pn-home-lyw__card-title {
margin: 0;
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: var(--pn-headline-sm-weight);
}
.pn-home-lyw__card-description {
margin: 0;
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
} .pn-home-tools {
width: 100%;
background: var(--pn-surface-low);
padding-block: var(--pn-section-desktop);
}
.pn-home-tools__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--pn-space-lg);
margin-bottom: var(--pn-space-2xl);
}
.pn-home-tools__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-home-tools__subtext {
margin-top: var(--pn-space-sm);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
} .pn-home-contact {
width: 100%;
background: var(--pn-surface-low);
padding-block: var(--pn-section-desktop);
}
.pn-home-contact__header-text {
max-width: 640px;
margin-bottom: var(--pn-space-2xl);
}
.pn-home-contact__heading {
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-lg-size);
line-height: var(--pn-headline-lg-line);
font-weight: var(--pn-headline-lg-weight);
}
.pn-home-contact__subtext {
margin-top: var(--pn-space-sm);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-home-contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-space-2xl);
}
@media (min-width: 1024px) {
.pn-home-contact__grid {
grid-template-columns: 1fr 1fr;
align-items: center;
}
} .pn-home-contact__form {
display: flex;
flex-direction: column;
gap: var(--pn-space-lg);
}
.pn-home-contact__row {
display: grid;
grid-template-columns: 1fr;
gap: var(--pn-space-lg);
}
@media (min-width: 640px) {
.pn-home-contact__row {
grid-template-columns: 1fr 1fr;
}
}
.pn-home-contact__field {
display: flex;
flex-direction: column;
gap: var(--pn-space-xs);
}
.pn-home-contact__label {
color: var(--pn-navy);
font-size: var(--pn-label-md-size);
font-weight: 600;
}
.pn-home-contact__input {
width: 100%;
padding: var(--pn-space-md) var(--pn-space-lg);
border: 1px solid rgba(19, 41, 75, 0.15);
border-radius: var(--pn-radius-full);
background: var(--pn-white);
color: var(--pn-navy);
font-family: var(--pn-font-body);
font-size: var(--pn-body-md-size);
box-sizing: border-box;
}
.pn-home-contact__input:focus {
outline: none;
border-color: var(--pn-navy);
} .pn-home-contact__input--textarea {
border-radius: var(--pn-radius-lg);
resize: vertical;
} .pn-home-contact__field-hp {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.pn-home-contact__notice {
margin: 0 0 var(--pn-space-lg);
padding: var(--pn-space-md) var(--pn-space-lg);
border-radius: var(--pn-radius);
font-size: var(--pn-body-md-size);
}
.pn-home-contact__notice--success {
background: rgba(59, 179, 119, 0.15);
color: var(--pn-green);
}
.pn-home-contact__notice--error {
background: rgba(188, 32, 75, 0.12);
color: var(--pn-magenta);
}
.pn-home-contact__person {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 380px;
margin-inline: auto;
background: var(--pn-white);
border-radius: var(--pn-radius-lg);
padding: var(--pn-space-2xl);
box-shadow: 0 4px 20px rgba(19, 41, 75, 0.18);
}
.pn-home-contact__person-photo {
width: 160px;
height: 160px;
margin-bottom: var(--pn-space-lg);
border-radius: 50%;
overflow: hidden;
background: var(--pn-white);
}
.pn-home-contact__person-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pn-home-contact__person-name {
margin-bottom: 2px;
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
font-weight: var(--pn-headline-sm-weight);
}
.pn-home-contact__person-position {
margin: 0 0 var(--pn-space-lg);
color: var(--pn-on-surface-variant);
font-size: var(--pn-label-md-size);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pn-home-contact__person-details {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pn-space-sm);
}
.pn-home-contact__contact-item {
display: inline-flex;
align-items: center;
gap: var(--pn-space-sm);
color: var(--pn-navy);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-lg-line);
}
.pn-home-contact__contact-icon {
font-size: 20px;
}
.pn-home-contact__contact-icon--yellow,
.pn-home-contact__contact-icon--red {
color: var(--pn-navy);
} .pn-contact-map {
width: 100%;
padding-block: var(--pn-section-desktop);
}
.pn-contact-map__heading {
margin-bottom: var(--pn-space-2xl);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-md-size);
line-height: var(--pn-headline-md-line);
font-weight: var(--pn-headline-md-weight);
text-align: center;
}
.pn-contact-map__frame {
position: relative;
width: 100%;
aspect-ratio: 21 / 9;
border-radius: var(--pn-radius-lg);
overflow: hidden;
}
@media (max-width: 768px) {
.pn-contact-map__frame {
aspect-ratio: 1 / 1;
}
}
.pn-contact-map__frame #pn-contact-map-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.pn-contact-company {
width: 100%;
background: var(--pn-surface-low);
padding-block: var(--pn-section-desktop);
}
.pn-contact-company__info {
max-width: 640px;
margin: 0 auto;
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
text-align: center;
}
.pn-contact-company__info p {
margin: 0 0 var(--pn-space-sm);
}
.pn-contact-company__info p:last-child {
margin-bottom: 0;
} .pn-contact-company__info p:first-child {
margin-bottom: var(--pn-space-md);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-body-lg-size);
font-weight: 700;
}
.pn-contact-company__logo-pack {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.pn-contact-company__info + .pn-contact-company__logo-pack {
margin-top: var(--pn-space-3xl);
padding-top: var(--pn-space-3xl);
border-top: 1px solid rgba(19, 41, 75, 0.15);
} .pn-contact-company__logo-pack-heading {
margin: 0 0 var(--pn-space-md);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-body-lg-size);
line-height: var(--pn-body-md-line);
font-weight: 700;
}
.pn-contact-company__logo-pack-text {
margin: 0 0 var(--pn-space-lg);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
} .pn-faq {
width: 100%;
background: var(--pn-white);
padding-block: var(--pn-section-desktop);
}
.pn-faq__inner {
max-width: 900px;
margin-inline: auto;
}
.pn-faq__group + .pn-faq__group {
margin-top: var(--pn-space-3xl);
}
.pn-faq__group-heading {
margin: 0 0 var(--pn-space-lg);
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-headline-sm-size);
line-height: var(--pn-headline-sm-line);
letter-spacing: var(--pn-headline-sm-tracking);
font-weight: var(--pn-headline-sm-weight);
}
.pn-faq__item {
border-bottom: 1px solid rgba(19, 41, 75, 0.15);
}
.pn-faq__item:first-child {
border-top: 1px solid rgba(19, 41, 75, 0.15);
}
.pn-faq__question {
margin: 0;
}
.pn-faq__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pn-space-md);
width: 100%;
padding: var(--pn-space-lg) 0;
background: none;
border: 0;
color: var(--pn-navy);
font-family: var(--pn-font-headline);
font-size: var(--pn-body-lg-size);
line-height: 1.4;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.pn-faq__toggle:hover .pn-faq__question-text {
opacity: 0.8;
}
.pn-faq__toggle:focus-visible {
outline: 2px solid var(--pn-green);
outline-offset: 4px;
}
.pn-faq__icon {
flex-shrink: 0;
font-size: 28px;
transition: transform 0.3s ease;
}
.pn-faq__item.is-open .pn-faq__icon {
transform: rotate(180deg);
}
.pn-faq__answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.pn-faq__item.is-open .pn-faq__answer {
grid-template-rows: 1fr;
}
.pn-faq__answer-clip {
overflow: hidden;
}
.pn-faq__answer-content {
padding-bottom: var(--pn-space-lg);
color: var(--pn-on-surface-variant);
font-size: var(--pn-body-md-size);
line-height: var(--pn-body-md-line);
}
.pn-faq__answer-content p,
.pn-faq__answer-content ul,
.pn-faq__answer-content ol {
margin: 0 0 var(--pn-space-md);
}
.pn-faq__answer-content > :last-child {
margin-bottom: 0;
}
.pn-faq__answer-content ul,
.pn-faq__answer-content ol {
padding-left: var(--pn-space-lg);
}
.pn-faq__answer-content ul {
list-style: disc;
}
.pn-faq__answer-content ol {
list-style: decimal;
}
.pn-faq__answer-content a {
color: var(--pn-navy);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.pn-faq__answer-content a:hover {
color: var(--pn-green);
}
@media (max-width: 768px) {
.pn-faq {
padding-block: var(--pn-section-mobile);
}
}
@media (prefers-reduced-motion: reduce) {
.pn-faq__answer,
.pn-faq__icon {
transition: none;
}
}