/* Photavio footer restored from the ORIGINAL reference markup and CSS.
   Keep this separate from homepage experiments (.ph-supplier-banner/.ph-footer).
   The hero uses the real source image already referenced by the current
   application's _Layout.cshtml, NOT the screenshot-cropped supplier-banner.jpg. */
.live-footer {
    --green: #2c4c4c;
    --deep: #173736;
    --soft: #eaf1ef;
    --serif: "Playfair Display", Georgia, serif;
    --sans: "Poppins", Arial, sans-serif;
    background: #f7f5f1;
    padding: 0;
    position: relative;
    color: #667b79;
    font-family: var(--sans);
}

.live-footer, .live-footer * { box-sizing: border-box; }

/* Original banner contains the photographed book, roses and bottom wave.
   Stretch it to the source canvas, as the reference site's CSS does. */
.live-footer .supplier-footer-hero {
    min-height: 610px;
    background-color: var(--green);
    background-image: url('../images/Supplier%20Page_Footer%20Waves.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-blend-mode: lighten;
    position: relative;
}
.live-footer .supplier-footer-hero-inner {
    width: min(1240px, calc(100% - 48px));
    min-height: 610px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}
.live-footer .supplier-footer-hero-copy {
    width: min(430px, 46%);
    color: #fff;
    padding: 190px 0 62px;
}
.live-footer .supplier-footer-hero-copy > img {
    display: block;
    width: 155px;
    height: auto;
    margin-bottom: 30px;
    filter: brightness(0) invert(1);
}
.live-footer .supplier-footer-hero-copy h2 {
    font-family: var(--serif);
    font-size: clamp(42px, 4.5vw, 66px);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.045em;
    margin: 0 0 22px;
    color: #fff;
}
.live-footer .supplier-footer-hero-copy p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    max-width: 350px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.78);
}
.live-footer .supplier-footer-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 15px 22px;
    background: #fff;
    color: var(--deep);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 16px 36px rgba(4,28,27,.2);
    white-space: nowrap;
}
.live-footer .supplier-footer-button:hover { color: var(--deep); text-decoration: none; }
.live-footer .supplier-footer-button span { font-size: 20px; line-height: 1; }

.live-footer .supplier-footer-main {
    padding: 58px clamp(24px, 6vw, 90px) 25px;
    background: #f7f5f1;
}
.live-footer .supplier-footer-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1.7fr) minmax(190px, .7fr) minmax(150px, .55fr);
    gap: clamp(45px, 7vw, 100px);
    align-items: start;
}
.live-footer .supplier-footer-brand img {
    display: block;
    width: 165px;
    height: auto;
    margin-bottom: 22px;
}
.live-footer .supplier-footer-brand p {
    max-width: 500px;
    line-height: 1.75;
    margin: 0;
    font-size: 14px;
    font-family: var(--sans);
}
.live-footer .supplier-footer-brand a,
.live-footer .supplier-footer-links a,
.live-footer .supplier-footer-bottom a {
    color: var(--green);
    text-decoration: none;
}
.live-footer .supplier-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.live-footer .supplier-footer-links h3 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--deep);
    margin: 0 0 8px;
}
.live-footer .supplier-footer-links a { font-family: var(--sans); font-size: 13px; }
.live-footer .supplier-footer-links a:hover,
.live-footer .supplier-footer-bottom a:hover { text-decoration: underline; }
.live-footer .supplier-footer-bottom {
    max-width: 1240px;
    margin: 45px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(44,76,76,.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: var(--sans);
    font-size: 11px;
}
.live-footer .supplier-footer-bottom p { margin: 0; }
.live-footer .supplier-footer-bottom nav { display: flex; gap: 20px; }

@media (max-width: 991.98px) {
    .live-footer .supplier-footer-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);
        gap: 24px;
    }
}
@media (max-width: 760px) {
    .live-footer .supplier-footer-hero {
        min-height: 640px;
        background-size: auto 100%;
        background-position: 57% center;
    }
    .live-footer .supplier-footer-hero-inner {
        min-height: 640px;
        width: calc(100% - 40px);
        align-items: flex-start;
    }
    .live-footer .supplier-footer-hero-copy {
        width: 72%;
        padding: 190px 0 68px;
    }
    .live-footer .supplier-footer-hero-copy > img { width: 120px; margin-bottom: 20px; }
    .live-footer .supplier-footer-hero-copy h2 { font-size: 40px; }
    .live-footer .supplier-footer-hero-copy p { font-size: 14px; line-height: 1.55; }
    .live-footer .supplier-footer-main { padding: 48px 20px 28px; }
    .live-footer .supplier-footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .live-footer .supplier-footer-bottom {
        margin-top: 36px;
        align-items: flex-start;
        flex-direction: column;
    }
    .live-footer .supplier-footer-bottom nav { flex-wrap: wrap; gap: 12px 18px; }
}
@media (max-width: 420px) {
    .live-footer .supplier-footer-hero { min-height: 590px; }
    .live-footer .supplier-footer-hero-inner { min-height: 590px; }
    .live-footer .supplier-footer-hero-copy { width: 84%; padding-top: 155px; }
    .live-footer .supplier-footer-hero-copy h2 { font-size: clamp(35px, 9vw, 40px); }
    .live-footer .supplier-footer-button { padding: 13px 18px; font-size: 12px; }
}

/* =========================================
   FOOTER TOP WAVE
========================================= */

.ph-footer-wave {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    line-height: 0;
    background: #ffffff;
    margin-bottom: -1px;
}

    .ph-footer-wave svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.live-footer {
    position: relative;
    background-color: #2c4c4c;
}

/* Remove any gap between the wave and footer */
.supplier-footer-hero {
    margin-top: 0;
}

/* Tablet */
@media (max-width: 991.98px) {
    .ph-footer-wave {
        height: 90px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .ph-footer-wave {
        height: 65px;
    }
}