/* ACF: two column icon list block – uses repeater "content" (WYSIWYG) */

.two-column-icon-list {
padding: 80px 0 90px;
background-color: var(--lightGreyColor);
color: var(--accentColor);
text-align: left;
}
.two-column-icon-list .two-column-icon-list__head {
margin-bottom: 50px;
}

.two-column-icon-list .two-column-icon-list__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 70px;
align-items: start;
}

.two-column-icon-list .two-column-icon-list__col {
display: flex;
flex-direction: column;
gap: 42px;
}

.two-column-icon-list .two-column-icon-list__item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 24px 28px;
}

.two-column-icon-list .two-column-icon-list__icon {
flex: 0 0 100px;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}

.two-column-icon-list .two-column-icon-list__icon--spacer {
opacity: 0;
pointer-events: none;
}

.two-column-icon-list .two-column-icon-list__icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.two-column-icon-list .two-column-icon-list__body {
flex: 1;
min-width: 0;
}

.two-column-icon-list .two-column-icon-list__content {
font-size: 20px;
font-weight: 300;
line-height: 1.45;
color: var(--accentColor);
}

.two-column-icon-list .two-column-icon-list__content h2,
.two-column-icon-list .two-column-icon-list__content h3,
.two-column-icon-list .two-column-icon-list__content h4 {
margin: 0 0 12px;
font-size: 25px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--accentColor);
}

.two-column-icon-list .two-column-icon-list__content p {
margin: 0;
}

.two-column-icon-list .two-column-icon-list__content p + p {
margin-top: 0.75em;
}

@media (max-width: 1024px) {
.two-column-icon-list .two-column-icon-list__grid {
    grid-template-columns: 1fr;
    gap: 40px;
}
}

@media (max-width: 834px) {
.two-column-icon-list {
    padding: 55px 0 60px;
}

.two-column-icon-list .two-column-icon-list__head {
    margin-bottom: 35px;
}

.two-column-icon-list .two-column-icon-list__title {
    font-size: 40px;
}

.two-column-icon-list .two-column-icon-list__item {
    flex-direction: column;
    gap: 16px;
}

.two-column-icon-list .two-column-icon-list__icon,
.two-column-icon-list .two-column-icon-list__icon--spacer {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
}

.two-column-icon-list .two-column-icon-list__content,
.two-column-icon-list .two-column-icon-list__content h2,
.two-column-icon-list .two-column-icon-list__content h3,
.two-column-icon-list .two-column-icon-list__content h4 {
    font-size: 18px;
}
}

/* ACF: Image cards — grid with notched-corner image cards */
.image-cards {
--image-cards-bg: #0d2c4d;
--image-cards-title-color: rgba(255, 255, 255, 0.45);
--image-cards-text-color: #ffffff;
--image-cards-desc-color: rgba(255, 255, 255, 0.78);
--image-cards-notch: 30px;

padding: 90px 0 100px;
background-color: var(--image-cards-bg);
color: var(--image-cards-text-color);
text-align: left;
}

.image-cards .image-cards__head {
text-align: center;
margin-bottom: 55px;
}

.image-cards .image-cards__title {
margin: 0;
line-height: 1.05;
letter-spacing: 0;
}

.image-cards .image-cards__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 40px 32px;
grid-template-columns: repeat(4, 1fr);
}

.image-cards--cols-2 .image-cards__grid {
grid-template-columns: repeat(2, 1fr);
}
.image-cards--cols-3 .image-cards__grid {
grid-template-columns: repeat(3, 1fr);
}
.image-cards--cols-4 .image-cards__grid {
grid-template-columns: repeat(4, 1fr);
}

.image-cards .image-cards__item {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0;
}

.image-cards .image-cards__media {
position: relative;
aspect-ratio: 4 / 3;
width: 100%;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
clip-path: polygon(
    0 0,
    calc(100% - var(--image-cards-notch)) 0,
    100% var(--image-cards-notch),
    100% 100%,
    0 100%
);
-webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--image-cards-notch)) 0,
    100% var(--image-cards-notch),
    100% 100%,
    0 100%
);
}

.image-cards .image-cards__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.image-cards .image-cards__body {
display: flex;
flex-direction: column;
gap: 8px;
}

.image-cards .image-cards__item-title {
margin: 0;
font-weight: 800;
font-size: 22px;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
}

@media (max-width: 1024px) {
.image-cards {
    padding: 70px 0 80px;
}
.image-cards--cols-4 .image-cards__grid,
.image-cards--cols-3 .image-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 28px;
}
.image-cards .image-cards__head {
    margin-bottom: 40px;
}
}

@media (max-width: 600px) {
.image-cards {
    --image-cards-notch: 22px;
    padding: 55px 0 65px;
}
.image-cards__grid,
.image-cards--cols-4 .image-cards__grid,
.image-cards--cols-3 .image-cards__grid,
.image-cards--cols-2 .image-cards__grid {
    grid-template-columns: 1fr;
    gap: 32px;
}
.image-cards .image-cards__media {
    aspect-ratio: 3 / 2;
}
.image-cards .image-cards__head {
    margin-bottom: 32px;
}
}


/* ACF: Steps to Owning — horizontal chevron-style step diagram */
.steps-to-owning {
--sto-strip-bg: #f3c500;
--sto-step-bg: #b8c4cf;
--sto-step-color: #0c2e4d;
--sto-arrow: 36px;
--sto-strip-pad-y: 36px;
--sto-card-pad-y: 36px;
--sto-card-pad-x: 32px;

display: block;
}

.steps-to-owning .steps-to-owning__intro-wrap {
padding: 60px 0 36px;
max-width: 980px;
}

.steps-to-owning .steps-to-owning__intro {
font-size: 22px;
line-height: 1.45;
color: #0c2e4d;
text-align: center;
}

.steps-to-owning .steps-to-owning__intro h1,
.steps-to-owning .steps-to-owning__intro h2,
.steps-to-owning .steps-to-owning__intro h3,
.steps-to-owning .steps-to-owning__intro h4,
.steps-to-owning .steps-to-owning__intro p {
margin: 0 0 1em;
}

.steps-to-owning .steps-to-owning__intro :last-child {
margin-bottom: 0;
}

.steps-to-owning .steps-to-owning__strip {
padding: var(--sto-strip-pad-y) 0;
}

.steps-to-owning .steps-to-owning__track {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--sto-count, 5), 1fr);
gap: 0;
align-items: stretch;
}

.steps-to-owning .steps-to-owning__step {
position: relative;
margin: 0;
padding: 0;
display: flex;
}

.steps-to-owning .steps-to-owning__card {
position: relative;
flex: 1 1 auto;
min-height: 100%;
padding: var(--sto-card-pad-y) calc(var(--sto-card-pad-x) + var(--sto-arrow)) var(--sto-card-pad-y) var(--sto-card-pad-x);
background-color: var(--sto-step-bg);
color: var(--sto-step-color);
clip-path: polygon(
    0 0,
    calc(100% - var(--sto-arrow)) 0,
    100% 50%,
    calc(100% - var(--sto-arrow)) 100%,
    0 100%
);
-webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--sto-arrow)) 0,
    100% 50%,
    calc(100% - var(--sto-arrow)) 100%,
    0 100%
);
}

.steps-to-owning .steps-to-owning__step + .steps-to-owning__step .steps-to-owning__card {
padding-left: calc(var(--sto-card-pad-x) + var(--sto-arrow) * 0.6);
margin-left: calc(var(--sto-arrow) * -1);
clip-path: polygon(
    0 0,
    calc(100% - var(--sto-arrow)) 0,
    100% 50%,
    calc(100% - var(--sto-arrow)) 100%,
    0 100%,
    var(--sto-arrow) 50%
);
-webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--sto-arrow)) 0,
    100% 50%,
    calc(100% - var(--sto-arrow)) 100%,
    0 100%,
    var(--sto-arrow) 50%
);
}

.steps-to-owning .steps-to-owning__head {
    margin-bottom: 18px;
}

.steps-to-owning .steps-to-owning__step-label{
font-weight: 700;
    font-size: 18px;

}

.steps-to-owning .steps-to-owning__step-heading {
margin: 0;
font-weight: 800;
font-size: 24px;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
color: inherit;
}

.steps-to-owning .steps-to-owning__card .steps-to-owning__head:last-child {
margin-bottom: 0;
}

.steps-to-owning .steps-to-owning__content {
font-size: 20px;
text-align: left;
}

.steps-to-owning .steps-to-owning__content > :first-child {
margin-top: 0;
}

.steps-to-owning .steps-to-owning__content > :last-child {
margin-bottom: 0;

}

.steps-to-owning .steps-to-owning__content p {
margin: 0 0 10px;
}
.steps-to-owning__step:last-child .steps-to-owning__card {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
.steps-to-owning .steps-to-owning__content h4{
margin: 0 0 16px;
font-weight: 800;
font-size: 21px;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
color: inherit;
}

.steps-to-owning .steps-to-owning__content strong {
font-weight: 700;
}

.steps-to-owning .steps-to-owning__content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.steps-to-owning .steps-to-owning__content ul li {
position: relative;
padding-left: 14px;
margin: 0 0 8px;
}

.steps-to-owning .steps-to-owning__content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.steps-to-owning .steps-to-owning__content ul li:last-child {
    margin-bottom: 0;
}

.steps-to-owning .steps-to-owning__content ol {
    margin: 0 0 10px 1.2em;
    padding: 0;
}

.steps-to-owning .steps-to-owning__content a {
    color: inherit;
    text-decoration: underline;
}

/* Tablet + mobile: single column + bottom-pointed chevrons (not right-edge arrows) */
@media (max-width: 1024px) {
    .steps-to-owning {
        --sto-arrow: 28px;
        --sto-card-pad-x: 22px;
        --sto-card-pad-y: 28px;
        --sto-arrow-v: 24px;
        --sto-card-pad-mobile-x: 22px;
        --sto-card-pad-mobile-y: 24px;
    }


    .steps-to-owning .steps-to-owning__content h1,
    .steps-to-owning .steps-to-owning__content h2,
    .steps-to-owning .steps-to-owning__content h3,
    .steps-to-owning .steps-to-owning__content h4,
    .steps-to-owning .steps-to-owning__content h5,
    .steps-to-owning .steps-to-owning__content h6 {
        font-size: 16px;
    }


    .steps-to-owning .steps-to-owning__strip {
        padding: 24px 0;
    }

    .steps-to-owning .steps-to-owning__track {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .steps-to-owning .steps-to-owning__step {
        width: 100%;
        position: relative;
        z-index: 0;
    }

    /* Later steps paint above earlier ones so overlap hides strip gaps under bottom clips */
    .steps-to-owning .steps-to-owning__step + .steps-to-owning__step {
        margin-top: calc(var(--sto-arrow-v) * -1);
        z-index: 1;
    }

    /*
        * Kill desktop horizontal clip-path (including .step + .step override).
        */
    .steps-to-owning .steps-to-owning__step .steps-to-owning__card,
    .steps-to-owning .steps-to-owning__step + .steps-to-owning__step .steps-to-owning__card {
        margin-left: 0 !important;
        padding-left: var(--sto-card-pad-mobile-x) !important;
        padding-right: var(--sto-card-pad-mobile-x) !important;
        padding-top: var(--sto-card-pad-mobile-y);
        padding-bottom: var(--sto-card-pad-mobile-y);
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    /* Single step: plain rectangle */
    .steps-to-owning .steps-to-owning__step:only-child .steps-to-owning__card {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    }

    /*
        * Stacked steps (2+): flat top on every card; angle at bottom only on non-last cards.
        * No top “V” notch — avoids yellow gaps between rows + duplicate angles.
        */
    .steps-to-owning .steps-to-owning__step:not(:last-child):not(:only-child) .steps-to-owning__card {
        padding-bottom: calc(var(--sto-card-pad-mobile-y) + var(--sto-arrow-v)) !important;
        clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--sto-arrow-v)),
        50% 100%,
        0 calc(100% - var(--sto-arrow-v))
        ) !important;
        -webkit-clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--sto-arrow-v)),
        50% 100%,
        0 calc(100% - var(--sto-arrow-v))
        ) !important;
    }

    /* Last step: rectangle (flat top & bottom) */
    .steps-to-owning .steps-to-owning__step:last-child:not(:only-child) .steps-to-owning__card {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
        padding-top: 51px;
    }

    .steps-to-owning .steps-to-owning__card br {
        display: none;
    }
}

@media (max-width: 767px) {
    .steps-to-owning .steps-to-owning__intro-wrap {
        padding: 40px 25px 24px;
    }
}


