/* Section 7 — How We Work "How Our Lending Process Works" (components/how-we-work/how-we-work.php) */

.how__head {
    max-width: 780px;
    margin: 0 0 48px;
}
/* Eyebrow — Montserrat SemiBold 24, gold (Figma). */
.how .eyebrow {
    font-size: 24px;
    letter-spacing: normal;
    margin-bottom: 16px;
}
/* Title — DM Serif Display Regular 40, navy (Figma). */
.how__title {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 40px;
    line-height: 1.15;
    color: var(--color-navy-mid);
    margin: 0 0 16px;
}
/* Subtitle — Montserrat Regular 18, navy (Figma). */
.how__subtitle {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-navy-mid);
    margin: 0;
}

.how__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* Card: light content area + full-height coloured band on the right. */
.step-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr 84px;
    background: var(--color-card-grey);
    border: 1px solid var(--color-navy-mid);
    border-radius: 12px;
    overflow: hidden;
}
/* Hover: the step colour sweeps across the whole card from right to left. */
.step-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s ease;
}
.step-card--1::before { background: var(--color-gold); }
.step-card--2::before { background: var(--color-step-teal); }
.step-card--3::before { background: var(--color-navy-mid); }
.step-card:hover::before,
.step-card:focus-within::before {
    transform: scaleX(1);
}
/* Content inverts to light once the colour fills the card. */
.step-card__icon,
.step-card__title,
.step-card__text {
    transition: color 0.45s ease;
}
.step-card:hover .step-card__icon,
.step-card:focus-within .step-card__icon,
.step-card:hover .step-card__title,
.step-card:focus-within .step-card__title,
.step-card:hover .step-card__text,
.step-card:focus-within .step-card__text {
    color: var(--color-off-white);
}
.step-card__content {
    padding: 28px 26px;
}
.step-card__icon {
    display: block;
    color: var(--color-navy-deep);
    margin-bottom: 28px;
}
.step-card__icon svg { display: block; }
.step-card__icon img {
    width: 44px;
    height: 44px;
    display: block;
    transition: filter 0.45s ease;
}
/* On hover the card fills with colour, so the icon flips to white. */
.step-card:hover .step-card__icon img,
.step-card:focus-within .step-card__icon img {
    filter: brightness(0) invert(1);
}
.step-card__title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: var(--weight-semibold);
    color: var(--color-navy-deep);
    margin: 0 0 12px;
}
.step-card__text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-navy-deep);
    margin: 0;
}

/* Right band — chevron top, step number bottom; colour per step. */
.step-card__band {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    text-align: center;
    color: var(--color-off-white);
}
.step-card--1 .step-card__band { background: var(--color-gold); }
.step-card--2 .step-card__band { background: var(--color-step-teal); }
.step-card--3 .step-card__band { background: var(--color-navy-mid); }
.step-card__chevron svg { display: block; }
/* Count — Montserrat SemiBold 24; Step — Montserrat Regular 18 (Figma). */
.step-card__no {
    display: block;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--weight-semibold);
    line-height: 1.1;
}
.step-card__step {
    display: block;
    font-size: 18px;
    font-weight: var(--weight-regular);
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .how__steps { grid-template-columns: 1fr; }
    .how__title { font-size: 32px; }
}
@media (max-width: 768px) {
    .how__title { font-size: 28px; }
}