.footer-bg {
    background-color: var(--base-grey);
}

/* ===== Case study page ===== */
.pd-page {
    --pd-dark: #001746;
    --pd-dark-2: #0a2a6b;
    --pd-skin: var(--base-skin, #0054df);
    --pd-light: var(--base-grey, #eff3fa);
    --pd-light-blue: #e6f0ff;
    --pd-heading: var(--base-headingfont-color, #001746);
    --pd-body: #3f5566;
    --pd-border: rgba(0, 25, 76, 0.1);
    color: var(--pd-body);
    font-size: 17px;
    line-height: 1.75;
}

.pd-section {
    padding: 90px 0;
    position: relative;
}

.pd-section--white {
    background: #fff;
}

.pd-section--light {
    background: var(--pd-light);
}

.pd-section--light-blue {
    background: var(--pd-light-blue);
}

.pd-section--dark {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(0, 84, 223, 0.35),
            transparent 45%
        ),
        var(--pd-dark);
    color: rgba(255, 255, 255, 0.82);
}

/* Small section label - a compact pill instead of a leading line */
.pd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    background: var(--pd-light-blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pd-skin);
    margin-bottom: 16px;
}

.pd-eyebrow::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pd-section--light .pd-eyebrow,
.pd-section--light-blue .pd-eyebrow {
    background: #fff;
}

.pd-section--dark .pd-eyebrow,
.pd-role .pd-eyebrow {
    background: rgba(127, 176, 255, 0.14);
    color: #9cc2ff;
}

.pd-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--pd-heading);
    margin: 0 0 20px;
}

.pd-section--dark .pd-title {
    color: #fff;
}

.pd-lead {
    font-size: 19px;
    line-height: 1.7;
    margin: 0;
}

/* ===== Hero ===== */
.pd-hero.prt-page-title-row {
    padding-bottom: 90px;
}

.pd-hero.prt-page-title-row > .prt-bg-layer {
    background: linear-gradient(
        100deg,
        rgba(0, 23, 70, 0.97) 0%,
        rgba(0, 23, 70, 0.92) 50%,
        rgba(0, 35, 105, 0.82) 100%
    );
    opacity: 1;
}

.pd-hero__name {
    display: block;
    width: max-content;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7fb0ff;
    margin-bottom: 12px;
}

/* Add this new block to break layout stream and force strict left-alignment */
.pd-hero__main-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Forces child elements to stack perfectly flush-left */
    text-align: left;
    width: 100%;
    margin-top: 20px; /* Provides consistent separation below breadcrumbs */
}

.pd-hero h1 {
    display: block;
    width: 100%;

    font-size: 50px;
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    padding: 0;
}

.pd-hero__intro {
    font-size: 19px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px;
    margin-bottom: 30px;
}

.pd-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 12px 28px;
    margin: 0 0 36px;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    max-width: 620px;
}

.pd-facts dt {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    padding-top: 3px;
}

.pd-facts dd {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.pd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    text-align: center;
}

.pd-btn--fill {
    background: var(--pd-skin);
    border-color: var(--pd-skin);
    color: #fff;
}

.pd-btn--fill:hover {
    background: #fff;
    border-color: #fff;
    color: var(--pd-dark);
}

.pd-btn--outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.pd-btn--outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--pd-dark);
}

.pd-btn i {
    font-size: 13px;
}

.pd-hero__media {
    position: relative;
    margin: 0;
}

.pd-hero__media::before {
    content: "";
    position: absolute;
    inset: 24px -16px -16px 24px;
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(0, 84, 223, 0.55),
        rgba(127, 176, 255, 0.15)
    );

    animation: floatImage 4s ease-in-out infinite;
}

.pd-hero__media img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top center;
    border-radius: 20px;
    border: 6px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    background: #fff;

    animation: floatImage 4s ease-in-out infinite;
}

.pd-hero__media figcaption {
    position: relative;
    margin-top: 26px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

@keyframes floatImage {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px); /* Moves the image up by 12px */
  }
}

.breadcrumb-wrapper span a { color: var(--base-white); }
.breadcrumb-wrapper span {
    font-weight: 500;
    text-transform: capitalize;
    font-size: 16px;
    line-height: 26px;
    color: var(--base-dark);
}

/*breadcrumb-wrapper*/
.breadcrumb-wrapper {
    position: relative;
    z-index: 99;
    margin: 0;
    background-color:rgba( 0,23,70,0.50);
    display: inline-block;
    vertical-align: top;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--base-border-radius-30);

}
.breadcrumb-wrapper span{
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    font-family: var(--base-headingfont);
    position: relative;
    color: var(--base-white);

}
.breadcrumb-wrapper span:last-child{ padding-right: 0; margin-right: 0; }
.breadcrumb-wrapper span a{ color: var(--base-white); }
.breadcrumb-wrapper span a:hover{ color: var(--base-skin); }
.breadcrumb-wrapper span:last-child:after{ display: none; }

/* ===== Snapshot ===== */
.pd-snapshot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pd-snapshot__item {
    padding: 22px 24px;
    border: 1px solid var(--pd-border);
    border-radius: 16px;
    background: #fff;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.pd-snapshot__item:hover {
    box-shadow: 0 14px 30px rgba(0, 23, 70, 0.08);
    transform: translateY(-2px);
}

.pd-snapshot__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pd-skin);
    margin-bottom: 6px;
}

.pd-snapshot__value {
    color: var(--pd-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-chips li {
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--pd-light-blue);
    color: var(--pd-dark-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* ===== Rich text ===== */
.pd-rich {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pd-rich > *:first-child {
    margin-top: 0;
}

.pd-rich > *:last-child {
    margin-bottom: 0;
}

.pd-rich h1,
.pd-rich h2,
.pd-rich h3,
.pd-rich h4,
.pd-rich h5,
.pd-rich h6 {
    color: var(--pd-heading);
    font-weight: 700;
    line-height: 1.3;
    margin: 30px 0 14px;
}

.pd-rich h2 {
    font-size: 26px;
}

.pd-rich h3 {
    font-size: 22px;
}

.pd-rich h4 {
    font-size: 19px;
}

.pd-rich p {
    margin: 0 0 18px;
}

.pd-rich a {
    color: var(--pd-skin);
    text-decoration: underline;
}

.pd-rich ul,
.pd-rich ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.pd-rich ul {
    list-style: disc;
}

.pd-rich ol {
    list-style: decimal;
}

.pd-rich ul li,
.pd-rich ol li {
    margin: 0 0 8px !important;
    padding: 0 0 0 4px !important;
    line-height: 1.7 !important;
    min-height: 0 !important;
}

.pd-rich li > p {
    margin: 0 !important;
}

.pd-rich p:empty {
    display: none;
}

.pd-rich img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 10px 0;
}

.pd-rich blockquote {
    margin: 20px 0;
    padding: 14px 22px;
    border-left: 4px solid var(--pd-skin);
    background: var(--pd-light);
    border-radius: 0 10px 10px 0;
}

.pd-rich table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    display: block;
    overflow-x: auto;
}

.pd-rich th,
.pd-rich td {
    border: 1px solid #dfe6f1;
    padding: 10px 12px;
    text-align: left;
}

.pd-rich pre {
    background: var(--pd-light);
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
}

.pd-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 18px 40px rgba(0, 23, 70, 0.06);
}

/* ===== Challenge ===== */
.pd-challenge .pd-card {
    border-left: 5px solid #ff8a3d;
}

/* ===== Solution / Our role ===== */
.pd-role {
    background: var(--pd-dark);
    color: rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    padding: 34px;
    position: sticky;
    top: 120px;
}

.pd-role h3 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 16px;
}

.pd-role .pd-rich,
.pd-role .pd-rich h4 {
    color: rgba(255, 255, 255, 0.85);
}

.pd-role .pd-rich ul li::marker {
    color: #7fb0ff;
}

/* ===== Features ===== */
.pd-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.pd-feature {
    background: #fff;
    border-radius: 18px;
    padding: 30px 28px;
    border: 1px solid transparent;
    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.pd-feature:hover {
    border-color: rgba(0, 84, 223, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 23, 70, 0.08);
}

.pd-feature__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pd-light-blue);
    color: var(--pd-skin);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 18px;
}

.pd-feature h3 {
    font-size: 19px;
    line-height: 1.4;
    color: var(--pd-heading);
    margin: 0 0 10px;
}

.pd-feature p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* ===== Technology stack ===== */
.pd-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.pd-stack__group {
    border: 1px solid var(--pd-border);
    border-top: 4px solid var(--pd-skin);
    border-radius: 16px;
    padding: 24px;
    background: #fff;
}

.pd-stack__group h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pd-heading);
    margin: 0 0 14px;
}

/* ===== Product screens =====
           Web screens: browser-frame cards in 1-3 columns. Mobile screens: phone-frame cards, 5 per row.
           Both kinds = hybrid gallery with one labelled block per kind. Cards take the ratio of their group
           (--pd-ratio), so space is reserved before the lazy images load. */
.pd-gallery + .pd-gallery {
    margin-top: 64px;
}

.pd-gallery__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 26px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.pd-gallery__label i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 176, 255, 0.14);
    color: #9cc2ff;
    font-size: 15px;
}

.pd-screens {
    --pd-cols: 3;
    --pd-gap: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pd-gap);
}

.pd-screens--cols-1 {
    --pd-cols: 1;
}

.pd-screens--cols-2 {
    --pd-cols: 2;
}

.pd-screens--cols-3 {
    --pd-cols: 3;
}

.pd-screens--mobile {
    --pd-cols: 5;
}

.pd-screen {
    margin: 0;
    min-width: 0;
    flex: 0 0
        calc((100% - (var(--pd-cols) - 1) * var(--pd-gap)) / var(--pd-cols));
    max-width: calc(
        (100% - (var(--pd-cols) - 1) * var(--pd-gap)) / var(--pd-cols)
    );
}

.pd-screens--cols-1 .pd-screen {
    max-width: 900px;
}

.pd-screen__link {
    display: block;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.pd-screen__link:hover {
    transform: translateY(-4px);
}

.pd-screen__link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--pd-ratio, 1.6);
    object-fit: cover;
    object-position: top center;
    background: #e9eef7;
}

/* Website screen in a browser frame */
.pd-screen--web .pd-screen__link {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pd-screen__bar {
    display: block;
    height: 24px;
    background:
        radial-gradient(circle, #ff6159 4px, transparent 4.5px) 14px 50% / 10px
            10px no-repeat,
        radial-gradient(circle, #ffbd2e 4px, transparent 4.5px) 30px 50% / 10px
            10px no-repeat,
        radial-gradient(circle, #28c941 4px, transparent 4.5px) 46px 50% / 10px
            10px no-repeat,
        #eef2f9;
    border-bottom: 1px solid #dde4f0;
}

/* Mobile screen in a phone frame */
.pd-screen--mobile .pd-screen__link {
    padding: 7px;
    border-radius: 30px;
    background: #0d2152;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.pd-screen--mobile .pd-screen__link img {
    border-radius: 23px;
}

.pd-screen__link::after {
    content: "\e611";
    font-family: "themify";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 23, 70, 0.75);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pd-screen__link:hover::after,
.pd-screen__link:focus-visible::after {
    opacity: 1;
}

.pd-screen figcaption {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}

/* ===== Website screens deck =====
           Every window is sticky at the same top, so the first one stays in place and each next window slides up
           from below and rests on top of the previous one. The shadow of the window on top falls on the one under it. */
body .page {
    /* Theme uses overflow:hidden, which disables position:sticky; clip crops the same without that. */
    overflow: clip;
}

.pd-deck {
    --pd-top: 110px;
    --pd-gap: 24px;
    --pd-bar: 38px;
    max-width: 1040px;
    margin: 0 auto;
}

.pd-deck__card {
    position: sticky;
    top: var(--pd-top);
    z-index: var(--pd-card-index);
    /* Window always fits the screen below the header */
    width: min(
        100%,
        calc((100vh - var(--pd-top) - var(--pd-bar) - 60px) * var(--pd-ratio))
    );
    margin: 0 auto var(--pd-gap);
}

.pd-deck__card:last-child {
    margin-bottom: 0;
}

.pd-deck__window {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 -16px 36px -12px rgba(0, 6, 25, 0.55),
        0 26px 50px -20px rgba(0, 6, 25, 0.7);
}

.pd-deck__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: var(--pd-bar);
    padding: 0 16px 0 76px;
    background:
        radial-gradient(circle, #ff6159 5px, transparent 5.5px) 16px 50% / 12px
            12px no-repeat,
        radial-gradient(circle, #ffbd2e 5px, transparent 5.5px) 34px 50% / 12px
            12px no-repeat,
        radial-gradient(circle, #28c941 5px, transparent 5.5px) 52px 50% / 12px
            12px no-repeat,
        #eef2f9;
    border-bottom: 1px solid #dde4f0;
}

.pd-deck__address {
    flex: 0 1 420px;
    min-width: 0;
    padding: 3px 14px;
    border-radius: 7px;
    background: #fff;
    color: #4a5b78;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-deck__count {
    position: absolute;
    right: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #6b7a93;
}

.pd-deck__link:hover {
    transform: none;
}

.pd-deck__link img {
    aspect-ratio: var(--pd-ratio, 1.6);
}

@media (max-width: 991px) {
    .pd-deck {
        --pd-top: 90px;
        --pd-gap: 20px;
    }
}

@media (max-width: 575px) {
    .pd-deck {
        --pd-top: 76px;
        --pd-gap: 16px;
        --pd-bar: 28px;
    }

    .pd-deck__bar {
        padding-left: 56px;
        background-size: 10px 10px;
        background-position:
            12px 50%,
            26px 50%,
            40px 50%,
            0 0;
    }

    .pd-deck__address {
        font-size: 11px;
        padding: 1px 10px;
    }

    .pd-deck__count {
        display: none;
    }

    .pd-deck__window {
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-deck__card {
        position: static;
    }
}

.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 10, 35, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 70px;
}

.pd-lightbox.is-open {
    display: flex;
}

.pd-lightbox figure {
    margin: 0;
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.pd-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    border-radius: 12px;
    background: #fff;
}

.pd-lightbox figcaption {
    color: #fff;
    margin-top: 14px;
    font-size: 16px;
}

.pd-lightbox__control {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.pd-lightbox__control:hover {
    background: var(--pd-skin);
    color: #fff;
}

.pd-lightbox__close {
    top: 18px;
    right: 18px;
}

.pd-lightbox__prev {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.pd-lightbox__next {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

/* ===== Outcome ===== */
.pd-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.pd-metric {
    background: #fff;
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 14px 30px rgba(0, 23, 70, 0.06);
}

.pd-metric strong {
    display: block;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--pd-skin);
    margin-bottom: 8px;
}

.pd-metric span {
    font-size: 15px;
    font-weight: 600;
    color: var(--pd-heading);
}

/* ===== Client questions ===== */
.pd-faq {
    border: 1px solid var(--pd-border);
    border-radius: 16px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}

.pd-faq[open] {
    border-color: rgba(0, 84, 223, 0.3);
    box-shadow: 0 14px 30px rgba(0, 23, 70, 0.06);
}

.pd-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 64px 22px 26px;
    font-size: 18px;
    font-weight: 600;
    color: var(--pd-heading);
    position: relative;
}

.pd-faq summary::-webkit-details-marker {
    display: none;
}

/* Plus / minus toggle drawn with two bars so it stays centred in any font */
.pd-faq summary::before,
.pd-faq summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.pd-faq summary::before {
    background: var(--pd-light-blue);
}

.pd-faq summary::after {
    background:
        linear-gradient(var(--pd-skin), var(--pd-skin)) center / 12px 2px
            no-repeat,
        linear-gradient(var(--pd-skin), var(--pd-skin)) center / 2px 12px
            no-repeat;
}

.pd-faq summary:hover::before {
    background: #d6e6ff;
}

.pd-faq[open] summary::before {
    background: var(--pd-skin);
}

.pd-faq[open] summary::after {
    background: linear-gradient(#fff, #fff) center / 12px 2px no-repeat;
}

.pd-faq__answer {
    padding: 0 26px 24px;
    font-size: 16px;
    line-height: 1.75;
}

/* ===== Call to action ===== */
.pd-cta {
    padding: 90px 0;
}

.pd-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.pd-cta__text {
    max-width: 680px;
}

.pd-cta__text p {
    font-size: 18px;
    margin: 0;
}

.pd-cta__links {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 280px;
}

/* ===== Related projects ===== */
.pd-related .portfolio-image {
    height: 230px;
    object-fit: cover;
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
    .pd-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-screens--mobile {
        --pd-cols: 4;
    }
}

@media (max-width: 991px) {
    .pd-screens--cols-3 {
        --pd-cols: 2;
    }

    .pd-screens--mobile {
        --pd-cols: 3;
    }

    .pd-section,
    .pd-cta {
        padding: 70px 0;
    }

    .pd-hero h1 {
        font-size: 40px;
    }

    .pd-title {
        font-size: 32px;
    }

    .pd-hero__media {
        margin-top: 50px;
    }

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

    .pd-role {
        position: static;
        margin-top: 30px;
    }

    .pd-cta__box {
        flex-direction: column;
        align-items: flex-start;
    }

    .pd-cta__links {
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .pd-page {
        font-size: 16px;
    }

    .pd-hero.prt-page-title-row {
        padding-top: 130px;
        padding-bottom: 60px;
    }

    .pd-section,
    .pd-cta {
        padding: 56px 0;
    }

    .pd-hero h1 {
        font-size: 32px;
    }

    .pd-hero__intro,
    .pd-lead {
        font-size: 17px;
    }

    .pd-title {
        font-size: 28px;
    }

    .pd-card {
        padding: 26px 22px;
    }

    .pd-snapshot,
    .pd-features,
    .pd-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-screens {
        --pd-gap: 16px;
    }

    .pd-screen figcaption {
        font-size: 14px;
    }

    .pd-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .pd-facts dd {
        margin-bottom: 10px;
    }

    .pd-actions .pd-btn,
    .pd-cta__links .pd-btn {
        width: 100%;
    }

    .pd-lightbox {
        padding: 60px 12px;
    }

    .pd-lightbox__prev,
    .pd-lightbox__next {
        top: auto;
        bottom: 14px;
        transform: none;
    }
}

@media (max-width: 575px) {
    .pd-screens--cols-2,
    .pd-screens--cols-3 {
        --pd-cols: 1;
    }

    .pd-screens--mobile {
        --pd-cols: 2;
        --pd-gap: 12px;
    }

    .pd-screen--mobile .pd-screen__link {
        padding: 5px;
        border-radius: 22px;
    }

    .pd-screen--mobile .pd-screen__link img {
        border-radius: 17px;
    }
}