/* Home: Product Categories over bg 9. From 1024px up the photo supplies the cards,
   their photos, arrow circles, the dark pill and the decorative/footer lines, so the
   markup only lays text and click targets on those shapes (% of the 1672x941 frame).
   Below 1024px the same markup stacks as ordinary cards with their own photos. */
.pc {
    --pc-navy: #1c2b45;
    --pc-rose: #b5715c;
    position: relative;
    color: var(--pc-navy);
    background: #f4f2f6;
    font-family: 'Nexa', sans-serif;
}

.pc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.pc-eyebrow {
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pc-title {
    margin: 0;
    font-family: 'Nexa', sans-serif;
    font-weight: 400;
    line-height: 1.04;
    text-transform: uppercase;
    color: var(--pc-navy);
}

.pc-title span,
.pc-special-title span {
    color: var(--pc-rose);
}

.pc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pc-card-text {
    display: flex;
    flex-direction: column;
}

.pc-card-text strong {
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pc-special-title {
    margin: 0;
    font-family: 'Nexa', sans-serif;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

.pc-more strong {
    display: block;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pc-more a {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .pc {
        aspect-ratio: 1672 / 941;
        overflow: hidden;
    }

    .pc-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pc-intro,
    .pc-cta,
    .pc-cards,
    .pc-special-intro,
    .pc-special,
    .pc-more {
        position: absolute;
        z-index: 1;
    }

    .pc-intro {
        left: 3.4%;
        top: 5.3%;
        width: 38%;
    }

    .pc-intro .pc-eyebrow {
        font-size: .86vw;
        margin-bottom: 1.1vw;
    }

    .pc-title {
        font-size: 3vw;
        margin-bottom: .9vw;
    }

    .pc-desc {
        margin: 0;
        max-width: 34em;
        font-size: .9vw;
        line-height: 1.5;
    }

    .pc-cta {
        left: 3.4%;
        top: 31.9%;
        width: 18.9%;
        height: 5.3%;
        display: flex;
        align-items: center;
        padding-left: 1.7%;
        border-radius: 999px;
        color: #fff !important;
        font-weight: 700;
        font-size: .8vw;
        letter-spacing: .06em;
        text-transform: uppercase;
        transition: box-shadow .25s ease;
    }

    .pc-cta:hover {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 14px 28px -12px rgba(28, 43, 69, .6);
    }

    .pc-cta svg {
        display: none;
    }

    .pc-cards {
        left: 2.09%;
        width: 95.95%;
        top: 39.6%;
        height: 24.45%;
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        column-gap: .536%;
    }

    .pc-special {
        left: 20.1%;
        right: 20.2%;
        top: 68.1%;
        bottom: 9.65%;
        display: grid;
        grid-template-columns: 234fr 241fr 240fr 253fr;
        column-gap: .75%;
    }

    .pc-card {
        justify-content: flex-end;
        border-radius: 10px;
        transition: box-shadow .25s ease;
    }

    .pc-card:hover {
        box-shadow: 0 0 0 1.5px rgba(181, 113, 92, .55), 0 18px 34px -20px rgba(28, 43, 69, .55);
    }

    .pc-card img,
    .pc-card i,
    .pc-more-icon,
    .pc-more a svg,
    .pc-foot {
        display: none;
    }

    .pc-cards .pc-card-text {
        height: 43.5%;
        padding: 7% 7% 0;
    }

    .pc-cards .pc-card-text strong {
        font-size: .95vw;
        line-height: 1.15;
        margin-bottom: .45vw;
    }

    .pc-cards .pc-card-text span {
        padding-right: 16%;
        font-size: .62vw;
        line-height: 1.5;
    }

    .pc-special-intro {
        left: 3.6%;
        top: 70.2%;
        width: 15.6%;
    }

    .pc-special-intro .pc-eyebrow {
        font-size: .8vw;
        margin-bottom: .9vw;
    }

    .pc-special-title {
        font-size: 1.62vw;
        margin-bottom: .9vw;
    }

    .pc-special-intro p {
        margin: 0;
        font-size: .66vw;
        line-height: 1.5;
    }

    .pc-special .pc-card-text {
        height: 45.5%;
        padding: 6% 7% 0;
    }

    .pc-special .pc-card-text strong {
        font-size: .8vw;
        line-height: 1.25;
        margin-bottom: .5vw;
    }

    .pc-special .pc-card-text span {
        padding-right: 18%;
        font-size: .68vw;
        line-height: 1.5;
    }

    .pc-more {
        left: 84.4%;
        right: 1.4%;
        top: 77.8%;
        bottom: 11.6%;
        display: flex;
        flex-direction: column;
    }

    .pc-more a {
        margin-top: auto;
    }

    .pc-more strong {
        font-size: .78vw;
        margin-bottom: .6vw;
    }

    .pc-more p {
        margin: 0;
        padding-right: 8%;
        font-size: .76vw;
        line-height: 1.5;
    }

    .pc-more a {
        font-size: .74vw;
    }

    .pc-more a:hover {
        color: var(--pc-rose);
    }
}

@media (max-width: 1023px) {
    .pc {
        padding: 56px 20px 40px;
        background: linear-gradient(180deg, #f6f4f8 0%, #efeef4 100%);
    }

    .pc-photo {
        display: none;
    }

    .pc-eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .pc-title {
        font-size: clamp(30px, 8vw, 44px);
        margin-bottom: 14px;
    }

    .pc-desc {
        margin: 0 0 22px;
        font-size: 14.5px;
        line-height: 1.6;
    }

    .pc-cta {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 15px 26px;
        border-radius: 999px;
        background: linear-gradient(180deg, #2a3c5c 0%, #1c2b45 100%);
        color: #fff !important;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        margin-bottom: 28px;
    }

    .pc-cards,
    .pc-special {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pc-card {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        background: rgba(255, 255, 255, .8);
        border: 1px solid #fff;
        box-shadow: 0 14px 30px -24px rgba(28, 43, 69, .5);
    }

    .pc-card img {
        display: block;
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    .pc-card-text {
        padding: 12px 12px 42px;
    }

    .pc-card-text strong {
        font-size: 12.5px;
        margin-bottom: 6px;
    }

    .pc-card-text span {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .pc-card i {
        position: absolute;
        right: 12px;
        bottom: 12px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid var(--pc-rose);
        background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23b5715c'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E");
    }

    .pc-special-intro {
        margin: 40px 0 18px;
    }

    .pc-special-title {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .pc-special-intro p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .pc-more {
        margin-top: 24px;
        padding: 20px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .8);
        border: 1px solid #fff;
    }

    .pc-more-icon {
        margin-bottom: 10px;
    }

    .pc-more strong {
        font-size: 12.5px;
        margin-bottom: 8px;
    }

    .pc-more p {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 1.55;
    }

    .pc-more a {
        font-size: 12px;
        color: var(--pc-navy);
    }

    .pc-foot {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 28px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .14em;
        line-height: 1.5;
        text-transform: uppercase;
    }
}