:root {
    --ph-green: #294e4c;
    --ph-dark: #244a47;
    --ph-cream: #f8fbfa;
    --ph-white: #fff;
    --ph-text: #254a48;
    --ph-muted: #71827f;
    --ph-serif: 'Playfair Display',Georgia,serif;
    --ph-sans: 'DM Sans',Arial,sans-serif
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px
}

body.ph-home {
    font-family: var(--ph-sans);
    font-size: 15px;
    line-height: 1.5;
    background: #fff;
    color: var(--ph-text);
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

.ph-home *, .ph-home *::before, .ph-home *::after {
    box-sizing: border-box
}

.ph-home h1, .ph-home h2, .ph-home h3, .ph-home p, .ph-home figure {
    margin: 0
}

.ph-home img {
    max-width: 100%;
    height: auto
}

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

    .ph-home a:hover {
        text-decoration: none;
        color: inherit
    }

.ph-home button {
    cursor: pointer
}

.ph-home button, .ph-home input, .ph-home select {
    font: inherit
}

.ph-home :focus-visible {
    outline: 3px solid #c99b88;
    outline-offset: 3px
}

.ph-wide {
    width: min(1400px,calc(100% - 106px));
    margin: auto;
    padding-left: 0 !important;
    padding-right: 0 !important
}

.ph-narrow {
    width: min(1050px,calc(100% - 90px));
    margin: auto;
    padding-left: 0 !important;
    padding-right: 0 !important
}

.ph-kicker {
    font: 800 9px/1.7 var(--ph-sans);
    letter-spacing: 2.65px;
    text-transform: uppercase;
    color: var(--ph-green)
}

.ph-kicker-light {
    color: #e5e4d3
}

.ph-pill {
    display: inline-flex;
    gap: 19px;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0;
    border-radius: 100px;
    padding: 11px 22px;
    font: 700 12px/1.25 var(--ph-sans);
    white-space: nowrap;
    transition: transform .18s,background .18s
}

    .ph-pill:hover {
        transform: translateY(-2px)
    }

    .ph-pill i {
        font-size: 10px
    }

.ph-pill-dark {
    color: #fff !important;
    background: var(--ph-dark)
}

    .ph-pill-dark:hover {
        background: #173b38
    }

.ph-pill-white {
    color: var(--ph-dark) !important;
    background: #fff
}
/* HEADER */
.ph-header {
    height: 76px;
    background: var(--ph-cream);
    position: relative;
    z-index: 40
}

    .ph-header > .ph-wide {
        height: 100%
    }

.ph-brand {
    display: flex;
    align-items: center;
    min-width: 145px
}

    .ph-brand img {
        width: 133px;
        height: auto;
        display: block
    }

.ph-navigation {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto
}

.ph-nav-links {
    display: flex;
    gap: 25px;
    align-items: center
}

.ph-nav-actions {
    display: flex;
    align-items: center;
    gap: 19px
}

    .ph-nav-links a, .ph-nav-actions > a:not(.ph-pill) {
        font-size: 12px;
        font-weight: 700;
        color: #294a47
    }

        .ph-nav-links a:hover, .ph-nav-actions > a:not(.ph-pill):hover {
            color: #8a3048
        }

.ph-header .ph-pill {
    font-size: 11px;
    min-height: 37px;
    padding: 11px 19px
}

.ph-nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    padding: 8px;
    color: var(--ph-dark);
    font-size: 20px
}
/* HERO */
.ph-hero {
    position: relative;
    background: linear-gradient(108deg,#f9fcfb,#edf4f2);
    min-height: 655px;
    overflow: hidden
}

.ph-hero-row {
    min-height: 605px
}

.ph-hero-copy {
    z-index: 2;
    padding-top: 32px !important
}

    .ph-hero-copy .ph-kicker {
        margin-bottom: 14px
    }

    .ph-hero-copy h1 {
        color: #294e4c;
        font: 600 clamp(68px,6.7vw,101px)/.93 var(--ph-serif);
        letter-spacing: -3.8px;
        margin: 0
    }

        .ph-hero-copy h1 em {
            font-style: italic;
            font-weight: 500
        }

.ph-hero-description {
    font-size: 13px;
    color: #637b76;
    line-height: 1.65;
    max-width: 330px;
    margin-top: 21px !important
}

.ph-hero-visual {
    position: relative;
    height: 570px;
    align-self: stretch
}

.ph-hero-oval {
    position: absolute;
    right: 2.6%;
    top: 33px;
    width: 75%;
    height: 410px;
    border-radius: 52% 48% 47% 48% / 49% 50% 50% 51%;
    overflow: hidden;
    z-index: 2;
    background: #fff;
    box-shadow: 0 14px 30px rgba(52,77,65,.05)
}

    .ph-hero-oval img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 49% 42%
    }

.ph-hero-inset {
    position: absolute;
    bottom: 69px;
    left: 3%;
    width: 43%;
    height: 192px;
    border-radius: 50%;
    overflow: hidden;
    border: 7px solid white;
    box-shadow: 0 13px 29px rgba(29,51,49,.16);
    z-index: 3;
    background: #dadbd5
}

    .ph-hero-inset img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.ph-hero-seal {
    position: absolute;
    width: 156px;
    height: 156px;
    object-fit: contain;
    right: 0;
    bottom: 35px;
    z-index: 4;
    filter: drop-shadow(0 7px 10px rgba(30,62,60,.16))
}

.ph-hero-dust {
    position: absolute;
    border-radius: 50%;
    background: rgba(42,81,75,.065);
    pointer-events: none
}

.ph-hero-dust-one {
    width: 125px;
    height: 125px;
    top: 26px;
    left: 43%
}

.ph-hero-dust-two {
    width: 280px;
    height: 280px;
    top: -180px;
    right: -105px
}

.ph-hero-wave {
    position: absolute;
    inset: auto 0 -1px;
    height: 95px;
    z-index: 2;
    pointer-events: none
}

    .ph-hero-wave svg {
        display: block;
        width: 100%;
        height: 100%
    }
/* FLOATING SEARCH */
.ph-search-wrap {
    position: relative;
    z-index: 10;
    margin-top: -133px;
    text-align: center;
    scroll-margin-top: 60px;
    padding-bottom: 6px
}

.ph-search-outer {
    width: min(865px,calc(100% - 60px));
    margin: auto
}

.ph-search-modes {
    display: flex;
    width: max-content;
    position: relative;
    top: 3px;
    margin-left: 28px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    background: #294e4c
}

.ph-search-mode {
    font-size: 12px;
    font-weight: 700;
    padding: 11px 25px;
    border: 0;
    color: #fff;
    background: #294e4c;
    min-width: 95px
}

    .ph-search-mode.is-active {
        color: #294e4c;
        background: #fff;
        border: 1.5px solid #294e4c;
        border-bottom: 0;
        border-radius: 20px 20px 0 0
    }

.ph-search-panel {
    min-height: 80px;
    padding: 14px 14px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(30,59,52,.13);
    border-radius: 42px;
    display: grid;
    grid-template-columns: 1.48fr 1.05fr 1.06fr auto auto;
    gap: 9px;
    align-items: center;
    text-align: left
}

.ph-search-field {
    padding: 7px 15px 7px 20px;
    min-width: 0;
    border-radius: 38px;
    background: #f2f7f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 56px
}

    .ph-search-field label {
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        font-weight: 800;
        color: #637f79;
        margin: 0 0 2px
    }

    .ph-search-field select, .ph-search-field input {
        appearance: auto;
        border: 0;
        outline: 0;
        background: transparent;
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        font-weight: 650;
        color: var(--ph-dark);
        padding: 0;
        min-width: 0
    }

        .ph-search-field input:focus, .ph-search-field select:focus {
            box-shadow: none
        }

.ph-search-submit, .ph-filter-button {
    height: 56px;
    white-space: nowrap;
    border: 0;
    border-radius: 32px;
    font-size: 12px;
    font-weight: 750;
    padding: 0 21px
}

.ph-search-submit {
    background: #294e4c;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

    .ph-search-submit:hover {
        background: #173b38
    }

.ph-filter-button {
    background: #edf3f1;
    color: #45635d;
    padding: 0 17px
}

    .ph-filter-button:hover {
        background: #dfe9e6
    }

    .ph-search-submit i, .ph-filter-button i {
        font-size: 10px
    }

.ph-popular {
    margin: 10px 0 0;
    font-size: 9px;
    color: #647974;
    text-align: center
}

    .ph-popular button {
        padding: 0;
        border: 0;
        background: none;
        color: #355d57;
        font-size: inherit;
        font-weight: 750
    }

        .ph-popular button:hover {
            text-decoration: underline
        }

.ph-search-strapline {
    font: 400 16px/1.3 var(--ph-serif);
    color: #648078;
    margin-top: 47px
}

    .ph-search-strapline em {
        color: #2a4a47
    }

.ph-extra-filters {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 13px;
    padding: 12px 10px 5px;
    border-top: 1px solid #ecf0ee
}

    .ph-extra-filters[hidden] {
        display: none !important
    }

    .ph-extra-filters > label {
        font-size: 11px;
        color: #365650;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        gap: 3px
    }

    .ph-extra-filters select {
        border: 1px solid #d2dfda;
        background: #fff;
        border-radius: 6px;
        padding: 8px
    }

    .ph-extra-filters .ph-filter-check {
        flex-direction: row;
        gap: 6px;
        align-items: center;
        padding-bottom: 9px
    }

.ph-clear {
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    color: #294e4c;
    font-size: 12px;
    margin-bottom: 9px
}

.ph-filter-help {
    width: 100%;
    color: #7e8882;
    font-size: 10px
}
/* CATEGORY ROW */
.ph-categories {
    padding: 106px 0 120px;
    background: #fff
}

.ph-centered-heading {
    text-align: center
}

    .ph-centered-heading h2 {
        font: 500 clamp(36px,4.3vw,55px)/1.23 var(--ph-serif);
        letter-spacing: -1.7px;
        margin: 6px 0 10px;
        color: var(--ph-text)
    }

    .ph-centered-heading > p:last-child {
        color: #8a9b95;
        font-size: 12px;
        line-height: 1.6
    }

.ph-category-row {
    margin-top: 53px;
    margin-left: -7px;
    margin-right: -7px
}

.ph-category-column {
    padding: 0 7px
}

.ph-category-tile {
    height: 176px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e9f1ee;
    border-radius: 25px;
    text-align: center;
    padding: 15px 10px;
    color: #254b48;
    transition: transform .2s,background .2s
}

    .ph-category-tile:hover {
        transform: translateY(-5px);
        background: #dfeae6
    }

    .ph-category-tile.is-featured {
        background: #294e4c;
        color: #fff
    }

        .ph-category-tile.is-featured:hover {
            background: #1e3c39
        }

.ph-category-icon {
    width: 43px;
    height: 43px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #2e554f;
    font-size: 14px;
    margin-bottom: 13px
}

.ph-category-tile strong {
    font: 600 14px/1.17 var(--ph-serif);
    max-width: 130px
}

.ph-category-tile small {
    font-size: 10px;
    line-height: 1.36;
    margin-top: 6px;
    opacity: .82;
    max-width: 140px
}
/* WAVY DARK SECTIONS */
.ph-wave-section {
    position: relative;
    background: #fff;
    isolation: isolate;
    overflow: hidden
}

.ph-section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

.ph-wave-content {
    position: relative;
    z-index: 1
}

.ph-featured {
    padding: 118px 0 115px
}

.ph-section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 32px
}

    .ph-section-heading-row h2 {
        font: 500 clamp(34px,3.85vw,51px)/1.16 var(--ph-serif);
        color: #fff;
        letter-spacing: -1px;
        margin-top: 7px
    }

.ph-outline-light {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50px;
    color: #fff !important;
    white-space: nowrap;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 650
}

    .ph-outline-light:hover {
        background: rgba(255,255,255,.13)
    }

.ph-featured-grid {
    margin-left: -9px;
    margin-right: -9px
}

.ph-featured-column {
    padding: 0 9px
}

.ph-supplier-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(7,38,32,.10);
    height: 100%;
    display: flex;
    flex-direction: column
}

.ph-supplier-photo {
    position: relative;
    height: 215px;
    background: #dfebe7;
    display: block;
    overflow: hidden
}

    .ph-supplier-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s
    }

    .ph-supplier-photo:hover img {
        transform: scale(1.04)
    }

    .ph-supplier-photo.ph-photo-unavailable {
        background: linear-gradient(145deg,#d0e0d9,#f0f5ef)
    }

.ph-supplier-photo-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    border-radius: 100px;
    background: #fff;
    color: #244a47;
    font-size: 10px;
    letter-spacing: .15px;
    font-weight: 750;
    padding: 6px 11px
}

.ph-supplier-details {
    padding: 16px 17px 20px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.ph-supplier-category {
    color: #96aaa2;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

    .ph-supplier-category span {
        padding: 0 3px
    }

.ph-supplier-details h3 {
    margin: 8px 0 15px;
    font: 600 22px/1.2 var(--ph-serif);
    color: #203b39;
    min-height: 27px
}

.ph-supplier-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

    .ph-supplier-foot small {
        color: #8f9d97;
        font-size: 10px
    }

    .ph-supplier-foot a {
        font-weight: 700;
        font-size: 11px;
        white-space: nowrap;
        color: #244b45
    }

.ph-feature-empty {
    background: white;
    border-radius: 20px;
    text-align: center;
    padding: 70px 20px
}

    .ph-feature-empty h3 {
        font: 500 32px var(--ph-serif)
    }

    .ph-feature-empty p {
        font-size: 14px;
        margin: 10px 0 20px
    }

    .ph-feature-empty a {
        font-size: 12px;
        font-weight: 800;
        text-decoration: underline
    }
/* VIEWING PHOTOGRAPH */
.ph-viewing {
    padding: 130px 0 139px;
    background: linear-gradient(150deg,#f5faf8,#f0f7f4)
}

.ph-viewing-row {
    min-height: 430px
}

.ph-viewing-photo-col {
    padding-right: 55px !important
}

.ph-viewing-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 400px;
    border-radius: 50% / 46%;
    overflow: visible
}

    .ph-viewing-visual > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 50% / 46%;
        box-shadow: 0 10px 18px rgba(42,75,70,.08)
    }

.ph-viewing-bubble {
    position: absolute;
    right: -25px;
    bottom: 19px;
    width: 170px;
    height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 11px 30px rgba(13,58,42,.12)
}

    .ph-viewing-bubble small {
        font-size: 9px;
        text-transform: uppercase;
        color: #37615b;
        letter-spacing: 1px
    }

    .ph-viewing-bubble strong {
        font: 500 16px var(--ph-serif);
        margin: 4px 0
    }

    .ph-viewing-bubble span {
        font-size: 11px;
        color: #82928a
    }

.ph-viewing-copy {
    padding-left: 75px !important
}

    .ph-viewing-copy h2 {
        font: 500 clamp(44px,4.8vw,62px)/1.15 var(--ph-serif);
        color: #254b48;
        letter-spacing: -1.6px;
        margin: 11px 0 17px
    }

    .ph-viewing-copy > p:not(.ph-kicker) {
        font-size: 14px;
        line-height: 1.7;
        max-width: 390px;
        color: #69827b;
        margin-bottom: 24px
    }
/* 3 CARDS ON DARK WAVE */
.ph-steps {
    padding: 111px 0 119px
}

    .ph-steps .ph-centered-heading h2 {
        color: #fff;
        font: 500 clamp(39px,4.5vw,57px)/1.14 var(--ph-serif);
        margin: 13px 0 45px
    }

.ph-steps-row {
    margin-left: -10px;
    margin-right: -10px
}

.ph-step-col {
    padding: 0 10px
}

.ph-step {
    min-height: 210px;
    background: rgba(255,255,255,.105);
    border-radius: 25px;
    padding: 32px 30px;
    color: #fff
}

    .ph-step > span {
        display: block;
        color: #dde2d8;
        font-size: 11px;
        margin-bottom: 20px;
        font-weight: 700
    }

    .ph-step h3 {
        font: 500 22px/1.2 var(--ph-serif);
        margin-bottom: 11px
    }

    .ph-step p {
        font-size: 12px;
        line-height: 1.6;
        color: #e2eeeb
    }
/* FINAL CTA */
.ph-final-cta {
    position: relative;
    background: #fff;
    padding: 133px 20px 153px;
    min-height: 510px;
    text-align: center;
    overflow: hidden
}

.ph-final-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center
}

.ph-breathe-ghost {
    font: italic 600 clamp(70px,8vw,120px)/.9 var(--ph-serif);
    color: #e4e9e6;
    letter-spacing: -3px
}

.ph-final-content h2 {
    font: 500 clamp(35px,4.1vw,55px)/1.15 var(--ph-serif);
    color: #244a47;
    letter-spacing: -1.5px;
    margin-top: -7px
}

.ph-final-content > p {
    font-size: 12px;
    color: #91a19b;
    margin: 16px 0 24px
}

.ph-final-cta .ph-pill {
    font-size: 11px
}

.ph-orb {
    position: absolute;
    border-radius: 50%;
    background: #e7eeeb
}

.ph-orb-left {
    left: -62px;
    top: 87px;
    width: 120px;
    height: 120px
}

.ph-orb-right {
    right: -53px;
    bottom: 22px;
    width: 118px;
    height: 118px
}

.ph-orb-tiny {
    right: 15%;
    top: 90px;
    width: 40px;
    height: 40px
}
/* PHOTO BANNER */
.ph-supplier-banner {
    height: 405px;
    background: #294e4c;
    position: relative;
    overflow: hidden;
    color: #fff
}

.ph-supplier-banner-photo {
    position: absolute;
    right: 0;
    top: -10px;
    width: 55%;
    height: 100%;
    background: #fff url('../images/photavio-home/supplier-footer-waves.png') center / 100% 100% no-repeat;
    opacity: .93
}

.ph-banner-content {
    position: relative;
    z-index: 2;
    padding-top: 87px
}

.ph-banner-brand {
    font: 400 15px var(--ph-sans);
    letter-spacing: 1.5px;
    color: #e2eeeb;
    margin-bottom: 20px !important
}

.ph-banner-content h2 {
    font: 500 clamp(42px,4.4vw,59px)/.99 var(--ph-serif);
    letter-spacing: -1.4px;
    color: #fff
}

.ph-banner-content > p:not(.ph-banner-brand) {
    font-size: 13px;
    line-height: 1.65;
    color: #e9efec;
    margin: 16px 0 18px
}

.ph-banner-content .ph-pill {
    font-size: 11px;
    min-height: 36px;
    padding: 10px 20px
}

.ph-banner-wave {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 3
}

    .ph-banner-wave svg {
        width: 100%;
        height: 100%
    }
/* FOOTER */
.ph-footer {
    background: #f9f7f3;
    padding: 54px 0 25px
}

.ph-footer-cols {
    padding-bottom: 47px
}

.ph-footer-info > img {
    display: block;
    width: 150px;
    margin-bottom: 17px
}

.ph-footer-info > p {
    max-width: 325px;
    color: #72908a;
    font-size: 12px;
    line-height: 1.85
}

.ph-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
}

    .ph-footer-col h3 {
        font: 800 13px var(--ph-serif);
        margin-bottom: 7px;
        color: #294e4c
    }

    .ph-footer-col a {
        font-size: 12px;
        color: #72908a
    }

        .ph-footer-col a:hover {
            color: #294e4c;
            text-decoration: underline
        }

.ph-footer-bottom {
    border-top: 1px solid #e3e8e3;
    padding-top: 17px;
    gap: 16px;
    color: #98a4a0;
    font-size: 10px
}

    .ph-footer-bottom nav {
        display: flex;
        gap: 20px
    }

    .ph-footer-bottom a:hover {
        color: #294e4c
    }
/* BOOTSTRAP RESPONSIVENESS */
@media (max-width:1199.98px) {
    .ph-hero-copy h1 {
        font-size: clamp(61px,6.7vw,87px)
    }

    .ph-hero-oval {
        height: 360px;
        top: 65px
    }

    .ph-hero-inset {
        bottom: 91px
    }

    .ph-viewing-copy {
        padding-left: 45px !important
    }

    .ph-viewing-photo-col {
        padding-right: 28px !important
    }
}

@media (max-width:991.98px) {
    .ph-wide {
        width: calc(100% - 56px)
    }

    .ph-narrow {
        width: calc(100% - 60px)
    }

    .ph-header {
        height: 68px
    }

    .ph-hero {
        min-height: 585px
    }

    .ph-hero-row {
        min-height: 550px
    }

    .ph-hero-copy h1 {
        font-size: clamp(49px,6.8vw,74px);
        letter-spacing: -2.2px
    }

    .ph-hero-visual {
        height: 485px
    }

    .ph-hero-oval {
        top: 53px;
        height: 330px;
        width: 86%
    }

    .ph-hero-inset {
        width: 46%;
        height: 135px;
        bottom: 77px
    }

    .ph-hero-seal {
        width: 110px;
        height: 110px;
        bottom: 42px
    }

    .ph-search-wrap {
        margin-top: -110px
    }

    .ph-search-outer {
        width: min(810px,calc(100% - 36px))
    }

    .ph-search-panel {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 9px;
        border-radius: 25px
    }

    .ph-filter-button, .ph-search-submit {
        height: 44px
    }

    .ph-search-field {
        min-height: 52px
    }

    .ph-search-submit {
        grid-column: 3
    }

    .ph-search-strapline {
        margin-top: 33px
    }

    .ph-category-row {
        gap: 13px 0
    }

    .ph-category-tile {
        height: 175px
    }

    .ph-featured {
        padding: 103px 0 100px
    }

    .ph-supplier-photo {
        height: 175px
    }

    .ph-supplier-details {
        padding: 14px
    }

        .ph-supplier-details h3 {
            font-size: 18px
        }

    .ph-viewing-visual {
        height: 350px
    }

    .ph-viewing-copy h2 {
        font-size: 39px
    }

    .ph-viewing-bubble {
        width: 132px;
        height: 117px;
        right: -4px
    }

    .ph-steps .ph-centered-heading h2 {
        font-size: 41px
    }

    .ph-step {
        padding: 24px 20px;
        min-height: 205px
    }

        .ph-step h3 {
            font-size: 19px
        }
}

@media (max-width:767.98px) {
    .ph-header {
        height: 64px
    }

    .ph-brand img {
        width: 125px
    }

    .ph-nav-toggle {
        display: block
    }

    .ph-navigation {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: #f7fbfa;
        box-shadow: 0 15px 25px rgba(21,54,45,.15);
        padding: 18px 26px 26px;
        flex-direction: column;
        align-items: stretch;
        gap: 22px
    }

        .ph-navigation.is-open {
            display: flex
        }

    .ph-nav-links {
        align-items: stretch;
        flex-direction: column;
        gap: 16px
    }

    .ph-nav-actions {
        justify-content: space-between
    }

    .ph-wide {
        width: calc(100% - 36px)
    }

    .ph-narrow {
        width: calc(100% - 36px)
    }

    .ph-hero {
        min-height: 0;
        padding-bottom: 120px
    }

    .ph-hero-row {
        min-height: 0;
        display: flex;
        flex-direction: column
    }

    .ph-hero-copy {
        padding-top: 46px !important
    }

        .ph-hero-copy h1 {
            font-size: clamp(61px,11vw,92px);
            line-height: .98
        }

    .ph-hero-description {
        font-size: 13px
    }

    .ph-hero-visual {
        height: 440px;
        width: 100%;
        margin-top: 15px
    }

    .ph-hero-oval {
        width: 75%;
        height: 400px;
        right: 10px;
        top: 7px
    }

    .ph-hero-inset {
        left: 0;
        bottom: 20px;
        width: 44%;
        height: 160px
    }

    .ph-hero-seal {
        right: 0;
        bottom: 5px;
        width: 115px;
        height: 115px
    }

    .ph-hero-dust-one {
        left: 70%;
        top: 60px
    }

    .ph-search-wrap {
        margin-top: -152px
    }

    .ph-search-outer {
        width: calc(100% - 26px)
    }

    .ph-search-modes {
        margin-left: 16px
    }

    .ph-search-panel {
        border-radius: 26px;
        grid-template-columns: 1fr 1fr;
        padding: 16px;
        gap: 10px
    }

    .ph-search-field {
        grid-column: 1/-1
    }

    .ph-search-submit {
        grid-column: auto
    }

    .ph-search-mode {
        padding: 9px 17px;
        min-width: 80px
    }

    .ph-search-strapline {
        font-size: 15px;
        margin: 31px 20px 0
    }

    .ph-categories {
        padding: 90px 0
    }

    .ph-centered-heading h2 {
        font-size: clamp(34px,7vw,51px)
    }

    .ph-category-row {
        margin-top: 35px
    }

    .ph-category-tile {
        height: 172px
    }

    .ph-featured {
        padding: 120px 0 145px
    }

    .ph-section-background {
        min-width: 100%;
        height: 100%
    }

    .ph-featured .ph-section-heading-row {
        flex-wrap: wrap;
        gap: 15px
    }

        .ph-featured .ph-section-heading-row h2 {
            font-size: clamp(31px,6vw,45px)
        }

    .ph-featured-grid {
        gap: 20px 0
    }

    .ph-supplier-photo {
        height: 245px
    }

    .ph-supplier-details h3 {
        font-size: 24px
    }

    .ph-viewing {
        padding: 90px 0 105px
    }

    .ph-viewing-photo-col {
        padding-right: 15px !important
    }

    .ph-viewing-visual {
        height: 330px;
        max-width: 520px;
        margin: auto
    }

    .ph-viewing-copy {
        padding: 55px 15px 0 !important
    }

        .ph-viewing-copy h2 {
            font-size: clamp(38px,7vw,56px)
        }

    .ph-steps {
        padding: 123px 0 145px
    }

    .ph-steps-row {
        gap: 15px 0
    }

    .ph-step {
        min-height: 0;
        padding: 22px 28px
    }

        .ph-step > span {
            margin-bottom: 12px
        }

        .ph-step h3 {
            font-size: 22px
        }

    .ph-steps .ph-centered-heading h2 {
        font-size: clamp(35px,7vw,48px);
        margin-bottom: 27px
    }

    .ph-final-cta {
        padding: 100px 16px 120px;
        min-height: 390px
    }

    .ph-breathe-ghost {
        font-size: 76px
    }

    .ph-final-content h2 {
        font-size: clamp(35px,7vw,49px)
    }

    .ph-supplier-banner {
        height: 445px
    }

    .ph-supplier-banner-photo {
        width: 70%;
        height: 86%;
        opacity: .68;
        right: -12%;
        background-position: center
    }

    .ph-banner-content {
        padding-top: 85px
    }

        .ph-banner-content h2 {
            font-size: 49px
        }

    .ph-footer {
        padding: 53px 0 30px
    }

    .ph-footer-cols {
        row-gap: 37px
    }

    .ph-footer-info {
        margin-bottom: 12px
    }

        .ph-footer-info p {
            max-width: 440px
        }
}

@media(max-width:450px) {
    .ph-hero-copy h1 {
        font-size: clamp(51px,12vw,66px)
    }

    .ph-hero-visual {
        height: 320px
    }

    .ph-hero-oval {
        height: 286px;
        width: 78%;
        right: 10px
    }

    .ph-hero-inset {
        width: 45%;
        height: 132px;
        border-width: 4px
    }

    .ph-hero-seal {
        width: 97px;
        height: 97px;
        bottom: 3px
    }

    .ph-hero {
        padding-bottom: 115px
    }

    .ph-search-wrap {
        margin-top: -148px
    }

    .ph-search-panel {
        grid-template-columns: 1fr 1fr;
        padding: 12px
    }

    .ph-search-field {
        min-height: 55px
    }

    .ph-search-submit, .ph-filter-button {
        padding: 0 10px;
        font-size: 12px
    }

    .ph-category-column {
        padding-left: 6px;
        padding-right: 6px
    }

    .ph-category-tile {
        border-radius: 20px;
        height: 172px;
        padding: 14px 6px
    }

        .ph-category-tile strong {
            font-size: 14px
        }

        .ph-category-tile small {
            font-size: 10px
        }

    .ph-section-heading-row h2 {
        font-size: 33px
    }

    .ph-viewing-visual {
        height: 255px
    }

    .ph-viewing-bubble {
        width: 110px;
        height: 110px;
        right: -3px;
        bottom: -10px
    }

        .ph-viewing-bubble small {
            font-size: 8px
        }

        .ph-viewing-bubble strong {
            font-size: 13px
        }

    .ph-steps {
        padding: 117px 0 139px
    }

    .ph-breathe-ghost {
        font-size: 60px
    }

    .ph-final-content h2 {
        font-size: 32px
    }

    .ph-supplier-banner-photo {
        width: 98%;
        right: -44%;
        opacity: .48
    }

    .ph-banner-content h2 {
        font-size: 42px
    }

    .ph-footer-bottom nav {
        gap: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .ph-pill, .ph-category-tile, .ph-supplier-photo img {
        transition: none !important
    }
}
/* Reference desktop proportions: intentionally tighter than a typical 1200px layout. */
@media(min-width:1200px) {
    .ph-narrow {
        width: min(950px,calc(100% - 90px))
    }

    .ph-hero-copy h1 {
        font-size: 77px;
        line-height: .95
    }

        .ph-hero-copy h1 em {
            font-size: 1.12em
        }

    .ph-hero-oval {
        width: 59%;
        height: 386px;
        right: 5%;
        top: 23px
    }

    .ph-hero-inset {
        width: 27%;
        height: 157px;
        left: 17%;
        bottom: 99px
    }

    .ph-hero-seal {
        width: 150px;
        height: 150px;
        right: 0;
        bottom: 81px
    }
}

/* V3: keep the site's slim header in view as you scroll. */
.ph-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: rgba(248,251,250,.97);
    transition: background-color .2s ease,box-shadow .2s ease,border-color .2s ease;
    border-bottom: 1px solid transparent
}

    .ph-header.ph-header-scrolled {
        background: rgba(248,251,250,.96);
        box-shadow: 0 8px 24px rgba(20,47,43,.10);
        border-bottom-color: rgba(36,74,71,.08);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px)
    }

.ph-home #discover, .ph-home #how-it-works, .ph-home #venue-viewings, .ph-home #inspiration {
    scroll-margin-top: 90px
}

/* V3: more faithful narrow, soft-green category cards. */
.ph-categories {
    padding-top: 98px;
    padding-bottom: 117px
}

.ph-category-row {
    margin-top: 48px;
    margin-left: -5px;
    margin-right: -5px
}

.ph-category-column {
    padding-left: 5px;
    padding-right: 5px
}

.ph-category-tile {
    border-radius: 24px;
    min-height: 184px;
    height: 100%;
    padding: 20px 10px 18px;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 0 0 1px rgba(40,83,76,.018) inset
}

.ph-category-icon {
    flex: none;
    margin: 11px 0 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 14px
}

.ph-category-tile strong {
    font-size: 14px;
    line-height: 1.18;
    letter-spacing: -.2px;
    min-height: 18px
}

.ph-category-tile small {
    font: 400 10px/1.37 var(--ph-sans);
    margin-top: 7px;
    max-width: 125px;
    opacity: .82
}

.ph-category-tile:not(.is-featured) {
    background: #eaf2ef
}

    .ph-category-tile:not(.is-featured):hover {
        background: #dfeae6
    }

/* V3: live nearby supplier cards with honest photo fallbacks and distances. */
.ph-featured {
    padding-top: 116px;
    padding-bottom: 115px
}

.ph-section-heading-row {
    align-items: center;
    gap: 12px;
    margin-bottom: 22px
}

.ph-nearby-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 17px;
    row-gap: 4px;
    margin-top: 12px
}

.ph-nearby-locate {
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 40px;
    color: #fff;
    background: rgba(255,255,255,.1);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s
}

    .ph-nearby-locate:hover, .ph-nearby-locate:focus {
        background: rgba(255,255,255,.23)
    }

    .ph-nearby-locate:disabled {
        opacity: .65;
        cursor: progress
    }

.ph-nearby-status {
    font-size: 10px;
    color: #d7e9e3;
    max-width: 260px;
    line-height: 1.35
}

    .ph-nearby-status.is-error {
        color: #fff1cc
    }

.ph-search-field.ph-search-location {
    position: relative;
    padding-right: 37px
}

.ph-search-locate {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(41,78,76,.08);
    color: #294e4c;
    font-size: 13px;
    display: grid;
    place-items: center
}

    .ph-search-locate:hover, .ph-search-locate:focus {
        background: #d9e9e2
    }

    .ph-search-locate:disabled {
        opacity: .45;
        cursor: progress
    }

.ph-supplier-photo {
    isolation: isolate
}

.ph-image-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg,#d1e3dc 0%,#eef4f0 100%);
    color: #55736b;
    font: 700 11px var(--ph-sans);
    z-index: 0
}

    .ph-image-fallback i {
        font-size: 29px
    }

.ph-fallback-icon {
    font: 400 37px var(--ph-serif)
}

.ph-supplier-photo img {
    position: relative;
    z-index: 1
}

.ph-supplier-photo-label {
    z-index: 2
}

.ph-supplier-distance {
    display: block;
    margin: -3px 0 12px;
    font-size: 10px;
    color: #698780;
    font-weight: 700
}

.ph-featured-grid[aria-busy="true"] {
    opacity: .65;
    transition: opacity .15s
}

.ph-retry-radius, .ph-empty-all {
    font: 700 12px var(--ph-sans);
    margin: 14px 12px 0 0;
    display: inline-flex;
    border: 1px solid rgba(255,255,255,.45);
    padding: 10px 15px;
    border-radius: 28px;
    color: #fff;
    background: rgba(255,255,255,.11)
}

    .ph-retry-radius:hover, .ph-empty-all:hover {
        background: rgba(255,255,255,.20);
        color: #fff
    }

/* V3: footer weight, rhythm, columns and final strip closer to supplied reference. */
.ph-footer {
    background: #f9f8f5;
    padding-top: 66px;
    padding-bottom: 28px
}

.ph-footer-cols {
    align-items: start;
    padding-bottom: 58px
}

.ph-footer-info > img {
    width: 139px;
    margin: 0 0 22px
}

.ph-footer-info > p {
    max-width: 345px;
    font-size: 11px;
    line-height: 1.75;
    color: #778985
}

.ph-footer-col {
    gap: 7px;
    padding-top: 4px
}

    .ph-footer-col h3 {
        font: 700 13px/1.2 var(--ph-serif);
        color: #294e4c;
        margin-bottom: 11px
    }

    .ph-footer-col a {
        font: 500 11px/1.5 var(--ph-sans);
        color: #778985
    }

.ph-footer-bottom {
    min-height: 35px;
    border-top: 1px solid #e6e8e2;
    padding-top: 18px;
    font-size: 10px;
    color: #a0a7a3
}

    .ph-footer-bottom nav a {
        color: #738782
    }

@media(max-width:991.98px) {
    .ph-category-column {
        margin-bottom: 10px
    }

    .ph-featured {
        padding-top: 104px;
        padding-bottom: 111px
    }

    .ph-category-tile {
        min-height: 171px
    }
}

@media(max-width:767.98px) {
    .ph-header {
        z-index: 1050
    }

    .ph-navigation {
        max-height: calc(100dvh - 64px);
        overflow-y: auto
    }

    .ph-category-row {
        row-gap: 10px
    }

    .ph-category-column {
        margin-bottom: 0
    }

    .ph-category-tile {
        min-height: 167px
    }

    .ph-featured {
        padding-top: 119px;
        padding-bottom: 143px
    }

    .ph-section-heading-row {
        align-items: flex-start;
        gap: 15px
    }

    .ph-nearby-tools {
        margin-top: 11px
    }

    .ph-nearby-status {
        font-size: 10px
    }

    .ph-footer {
        padding-top: 54px
    }

    .ph-footer-cols {
        padding-bottom: 38px
    }

    .ph-footer-col {
        margin-top: 10px
    }
}

@media(max-width:450px) {
    .ph-category-icon {
        width: 36px;
        height: 36px;
        margin: 6px 0 13px
    }

    .ph-category-tile {
        min-height: 156px;
        padding: 15px 7px
    }

        .ph-category-tile strong {
            font-size: 13px
        }

        .ph-category-tile small {
            font-size: 9.5px
        }

    .ph-featured .ph-section-heading-row h2 {
        font-size: 31px
    }

    .ph-nearby-tools {
        width: 100%
    }

    .ph-footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }

        .ph-footer-bottom nav {
            flex-wrap: wrap
        }
}

.ph-feature-empty .ph-retry-radius, .ph-feature-empty .ph-empty-all {
    background: #294e4c;
    border-color: #294e4c;
    color: #fff;
    text-decoration: none
}

    .ph-feature-empty .ph-retry-radius:hover, .ph-feature-empty .ph-empty-all:hover {
        background: #1b3b38;
        color: #fff
    }

/* ============================================================
   V4 — exact visual corrections from the two reference screenshots
   Categories: six tall, deliberately staggered editorial tiles.
   Supplier CTA: complete photo composition instead of cropped cover.
   Footer: reference column spacing and alignment.
   ============================================================ */

/* Category heading and row match the wide desktop reference. */
.ph-categories {
    padding-top: 103px;
    padding-bottom: 158px
}

    .ph-categories .ph-narrow {
        width: min(1260px,calc(100% - 90px))
    }

    .ph-categories .ph-centered-heading h2 {
        font-size: clamp(43px,4.45vw,69px);
        line-height: 1.14;
        letter-spacing: -2.2px;
        margin: 14px 0 13px
    }

    .ph-categories .ph-centered-heading > p:last-child {
        font-size: 14px;
        line-height: 1.5
    }

.ph-category-row {
    margin: 62px -7px 0;
    row-gap: 25px;
    align-items: flex-start
}

.ph-category-column {
    padding: 0 7px;
    align-self: flex-start;
    transition: transform .2s ease
}

    .ph-category-column:nth-child(even) {
        transform: translateY(21px)
    }

.ph-category-tile, .ph-category-tile.is-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 230px;
    min-height: 230px;
    border-radius: 33px;
    padding: 20px 15px 23px;
}

.ph-category-icon {
    width: 53px;
    height: 53px;
    margin: 0 0 23px;
    font-size: 18px;
    flex-shrink: 0
}

.ph-category-tile strong {
    font-size: 19px;
    line-height: 1.14;
    letter-spacing: -.42px;
    min-height: 0;
    max-width: 180px
}

.ph-category-tile small {
    font: 400 14px/1.35 var(--ph-sans);
    margin-top: 11px;
    max-width: 170px;
    opacity: .88
}

.ph-category-tile:hover {
    transform: translateY(-5px)
}

/* The footer photo is itself a complete composition with a book and roses.
   'cover' magnified it and lost the book; 'contain' preserves both elements. */
.ph-supplier-banner {
    height: 540px;
    background: #294e4c
}

.ph-supplier-banner-photo {
    top: 0;
    right: -4%;
    width: 50%;
    height: 100%;
    opacity: 1;
    background-image: url('../images/photavio-home/supplier-banner.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
}

.ph-supplier-banner .ph-banner-content {
    width: min(1130px,calc(100% - 80px));
    padding-top: 188px
}

.ph-banner-brand {
    margin-bottom: 36px !important
}

.ph-banner-content h2 {
    font-size: clamp(43px,4.4vw,60px);
    line-height: .99
}

.ph-banner-content > p:not(.ph-banner-brand) {
    font-size: 14px;
    line-height: 1.55;
    margin: 16px 0 22px
}

.ph-banner-content .ph-pill {
    min-height: 45px;
    font-size: 12px;
    padding: 12px 22px
}

.ph-banner-wave {
    height: 112px
}

/* Three columns: the reference's x positions are ~310, ~950 and ~1265 on desktop. */
.ph-footer {
    background: #f9f8f5;
    padding: 77px 0 35px
}

    .ph-footer .ph-narrow {
        width: min(1130px,calc(100% - 80px))
    }

.ph-footer-cols {
    display: grid !important;
    grid-template-columns: 56.5% 28% 15.5%;
    margin: 0 !important;
    padding-bottom: 58px;
    align-items: start;
}

    .ph-footer-cols > [class*="col-"] {
        flex: initial;
        max-width: none;
        width: auto;
        padding: 0 !important
    }

.ph-footer-info > img {
    width: 145px;
    margin-bottom: 24px
}

.ph-footer-info > p {
    max-width: 410px;
    font-size: 13px;
    line-height: 1.6
}

.ph-footer-col {
    gap: 11px;
    padding-top: 0
}

    .ph-footer-col h3 {
        font-size: 16px;
        margin-bottom: 9px
    }

    .ph-footer-col a {
        font-size: 12px;
        line-height: 1.6
    }

.ph-footer-bottom {
    padding-top: 20px;
    min-height: 46px
}

/* Keep the stagger in the Bootstrap three-column tablet layout. */
@media(max-width:1199.98px) {
    .ph-category-row {
        row-gap: 33px
    }

    .ph-category-tile, .ph-category-tile.is-featured {
        height: 216px;
        min-height: 216px;
        padding: 19px 12px
    }

    .ph-category-icon {
        width: 47px;
        height: 47px;
        margin-bottom: 18px
    }

    .ph-category-tile strong {
        font-size: 17px
    }

    .ph-category-tile small {
        font-size: 12px
    }

    .ph-supplier-banner-photo {
        width: 54%;
        right: -5%
    }

    .ph-footer .ph-narrow, .ph-supplier-banner .ph-banner-content {
        width: calc(100% - 80px)
    }
}

@media(max-width:991.98px) {
    .ph-categories .ph-narrow {
        width: calc(100% - 60px)
    }

    .ph-category-row {
        margin-top: 49px;
        row-gap: 33px
    }

    .ph-category-column:nth-child(even) {
        transform: translateY(16px)
    }

    .ph-categories {
        padding-bottom: 132px
    }

    .ph-supplier-banner {
        height: 505px
    }

    .ph-supplier-banner-photo {
        width: 58%;
        right: -12%;
        background-position: right center
    }

    .ph-supplier-banner .ph-banner-content {
        padding-top: 145px
    }

    .ph-footer-cols {
        grid-template-columns: 50% 25% 25%
    }
}

@media(max-width:767.98px) {
    .ph-categories {
        padding: 80px 0 113px
    }

        .ph-categories .ph-narrow {
            width: calc(100% - 34px)
        }

        .ph-categories .ph-centered-heading h2 {
            font-size: clamp(35px,7.5vw,54px);
            letter-spacing: -1.3px;
            margin: 9px 0 12px
        }

        .ph-categories .ph-centered-heading > p:last-child {
            font-size: 12px
        }

    .ph-category-row {
        margin: 35px -6px 0;
        row-gap: 25px
    }

    .ph-category-column {
        padding: 0 6px;
        margin-bottom: 0
    }

        .ph-category-column:nth-child(even) {
            transform: translateY(14px)
        }

    .ph-category-tile, .ph-category-tile.is-featured {
        height: 185px;
        min-height: 185px;
        border-radius: 25px;
        padding: 16px 9px
    }

    .ph-category-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 13px;
        font-size: 15px
    }

    .ph-category-tile strong {
        font-size: 15px;
        line-height: 1.13
    }

    .ph-category-tile small {
        font-size: 11px;
        line-height: 1.32;
        max-width: 145px;
        margin-top: 7px
    }

    .ph-supplier-banner {
        height: 530px
    }

    .ph-supplier-banner-photo {
        width: 86%;
        right: -27%;
        height: 90%;
        top: 35px;
        background-position: right bottom;
        opacity: .74
    }

    .ph-supplier-banner .ph-banner-content {
        width: calc(100% - 44px);
        padding-top: 105px
    }

    .ph-banner-brand {
        margin-bottom: 26px !important
    }

    .ph-banner-content h2 {
        font-size: clamp(43px,8vw,56px)
    }

    .ph-banner-content > p:not(.ph-banner-brand) {
        font-size: 12px;
        max-width: 260px
    }

    .ph-banner-wave {
        height: 90px
    }

    .ph-footer {
        padding-top: 53px
    }

        .ph-footer .ph-narrow {
            width: calc(100% - 44px)
        }

    .ph-footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 35px 20px;
        padding-bottom: 36px
    }

    .ph-footer-info {
        grid-column: 1/-1;
        margin: 0
    }

        .ph-footer-info > p {
            max-width: 410px
        }
}

@media(max-width:450px) {
    .ph-categories {
        padding-bottom: 100px
    }

    .ph-category-row {
        row-gap: 26px
    }

    .ph-category-tile, .ph-category-tile.is-featured {
        height: 170px;
        min-height: 170px;
        padding: 12px 6px;
        border-radius: 22px
    }

    .ph-category-icon {
        width: 38px;
        height: 38px;
        font-size: 14px;
        margin-bottom: 11px
    }

    .ph-category-tile strong {
        font-size: 14px;
        letter-spacing: -.3px
    }

    .ph-category-tile small {
        font-size: 10px;
        max-width: 135px;
        margin-top: 7px
    }

    .ph-supplier-banner {
        height: 515px
    }

    .ph-supplier-banner-photo {
        width: 113%;
        right: -56%;
        opacity: .58
    }

    .ph-supplier-banner .ph-banner-content {
        padding-top: 110px
    }

    .ph-banner-content h2 {
        font-size: 44px
    }

    .ph-footer-col h3 {
        font-size: 14px
    }

    .ph-footer-col a {
        font-size: 11px
    }
}



/* Seamless wave transitions */
.ph-home {
    --ph-viewing-surface: #f5f8f7;
}

/* White above, pale green below */
.ph-featured.ph-wave-section {
    background: linear-gradient( to bottom, #ffffff 0%, #ffffff 50%, var(--ph-viewing-surface) 50%, var(--ph-viewing-surface) 100% );
}

/* Venue viewing section */
.ph-viewing {
    background: var(--ph-viewing-surface);
}

/* Pale green above, white below */
.ph-steps.ph-wave-section {
    background: linear-gradient( to bottom, var(--ph-viewing-surface) 0%, var(--ph-viewing-surface) 50%, #ffffff 50%, #ffffff 100% );
}