/* ============================================================
   ZIPLORD MODERN HOMEPAGE
============================================================ */

:root {
    --zl-bg: #101310;
    --zl-bg-soft: #171b17;
    --zl-bg-light: #f5f3ed;
    --zl-surface: #1d211c;
    --zl-border: rgba(255, 255, 255, 0.12);
    --zl-text: #ffffff;
    --zl-muted: #a9afa8;
    --zl-dark-text: #161914;
    --zl-accent: #99a3a3;
    --zl-orange: #d98749;
    --zl-radius: 24px;
    --zl-transition: 0.35s ease;
}

html {
    scroll-behavior: smooth;
}

body.home-page {
    background: var(--zl-bg);
    color: var(--zl-text);
    overflow-x: hidden;
}

.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4,
.home-page h5,
.home-page h6 {
    font-weight: 700;
    letter-spacing: -0.04em;
}

.home-page p {
    color: var(--zl-muted);
    line-height: 1.8;
}

.home-page img {
    max-width: 100%;
}


/* ============================================================
   HEADER
============================================================ */

.home-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.home-header header,
.home-header .site-navbar,
.home-header .site-navbar-wrap {
    background: transparent !important;
}

.home-header .site-navbar {
    position: relative !important;
}

.home-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.home-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   GENERAL
============================================================ */

.zl-section {
    padding: 120px 0;
}

.zl-section-kicker,
.zl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--zl-accent);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 22px;
}

.zl-section-kicker::before,
.zl-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

.zl-section-title {
    color: #fff;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 0.98;
    margin-bottom: 30px;
}

.zl-section-title span {
    color: var(--zl-accent);
}

.zl-section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 70px;
}

.zl-section-heading-copy {
    width: 100%;
    max-width: 460px;
}

.zl-section-heading-copy p {
    margin: 0;
    font-size: 17px;
}

.zl-large-copy {
    color: #fff !important;
    font-size: 21px;
    line-height: 1.6 !important;
}

.zl-btn {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 0 30px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: var(--zl-transition);
    border: 1px solid transparent;
}

.zl-btn:hover {
    text-decoration: none;
}

.zl-btn-primary {
    background: var(--zl-accent);
    color: #131313;
}

.zl-btn-primary:hover {
    background: #fff;
    color: #111;
    transform: translateY(-3px);
}

.zl-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.zl-btn-outline:hover {
    color: #111;
    background: #fff;
    border-color: #fff;
}

.zl-btn-dark {
    background: #111;
    color: #fff;
}

.zl-btn-dark:hover {
    background: var(--zl-accent);
    color: #111;
}

.zl-text-link {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.35);
    padding-bottom: 8px;
    transition: var(--zl-transition);
}

.zl-text-link:hover {
    color: var(--zl-accent);
    border-color: var(--zl-accent);
    text-decoration: none;
}


/* ============================================================
   HERO
============================================================ */

.zl-hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.zl-hero-overlay {
    position: absolute;
    inset: 0;
    /* background:
        linear-gradient(
            90deg,
            rgba(9, 12, 9, 0.92) 0%,
            rgba(9, 12, 9, 0.72) 46%,
            rgba(9, 12, 9, 0.22) 100%
        ),
        linear-gradient(
            0deg,
            rgba(9,12,9,.70),
            transparent 50%
        ); */
    background:
        linear-gradient(
            90deg,
            rgba(8, 11, 8, 0.62) 0%,
            rgba(8, 11, 8, 0.46) 28%,
            rgba(8, 11, 8, 0.20) 58%,
            rgba(8, 11, 8, 0.06) 100%
        ),
        linear-gradient(
            0deg,
            rgba(8, 11, 8, 0.30) 0%,
            rgba(8, 11, 8, 0.08) 42%,
            rgba(8, 11, 8, 0.10) 100%
        );
}

.zl-hero-container {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 160px;
}

.zl-hero-title {
    color: #fff;
    font-size: clamp(58px, 7vw, 110px);
    line-height: 0.91;
    max-width: 900px;
    margin-bottom: 34px;
}

.zl-hero-title span {
    color: var(--zl-accent);
}

.zl-hero-description {
    max-width: 650px;
    font-size: 19px;
    color: rgba(255,255,255,.78) !important;
    margin-bottom: 40px;
}

.zl-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.zl-hero-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    /* border-top: 1px solid rgba(255,255,255,.15); */
    background: rgba(8,11,8,.25);
    backdrop-filter: blur(10px);
}

.zl-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.4fr;
    min-height: 112px;
}

.zl-stat,
.zl-scroll-hint {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 28px;
    border-right: 1px solid rgba(255,255,255,.13);
}

.zl-stat strong {
    color: #fff;
    font-size: 17px;
}

.zl-stat span,
.zl-scroll-hint span {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    margin-top: 5px;
}

.zl-scroll-hint {
    border-right: 0;
}

.zl-scroll-line {
    height: 1px;
    background: rgba(255,255,255,.3);
    margin-top: 13px;
    position: relative;
}

.zl-scroll-line::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 1px;
    background: var(--zl-accent);
    left: 0;
}


/* ============================================================
   ABOUT
============================================================ */

.zl-about {
    background: var(--zl-bg);
}

.zl-about-visual {
    position: relative;
    padding-right: 55px;
    padding-bottom: 55px;
}

.zl-about-visual > img {
    width: 100%;
    height: 670px;
    object-fit: cover;
    border-radius: var(--zl-radius);
}

.zl-about-floating-card {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 280px;
    padding: 30px;
    background: var(--zl-accent);
    border-radius: 18px;
    color: #111;
}

.zl-about-floating-card .zl-small-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 10px;
}

.zl-about-floating-card strong {
    font-size: 20px;
    line-height: 1.35;
    display: block;
}

.zl-play-button {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    position: absolute;
    top: 45px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--zl-transition);
}

.zl-play-button:hover {
    background: var(--zl-accent);
    color: #111;
    text-decoration: none;
    transform: scale(1.06);
}

.zl-about-points {
    margin: 40px 0;
    border-top: 1px solid var(--zl-border);
}

.zl-about-points > div {
    display: flex;
    gap: 25px;
    padding: 17px 0;
    border-bottom: 1px solid var(--zl-border);
}

.zl-about-points span {
    color: var(--zl-accent);
    font-size: 12px;
}

.zl-about-points p {
    margin: 0;
    color: #fff;
}


/* ============================================================
   PRODUCTS
============================================================ */

.zl-products {
    background: var(--zl-bg-soft);
}

.zl-product-card {
    position: relative;
    display: block;
    height: 350px;
    overflow: hidden;
    border-radius: 18px;
    background: #222;
}

.zl-product-image,
.zl-product-image img,
.zl-product-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zl-product-image img {
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.zl-product-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 15%,
            rgba(0,0,0,.88) 92%
        );
}

.zl-product-number {
    position: absolute;
    top: 25px;
    right: 25px;
    color: rgba(255,255,255,.7);
    font-size: 12px;
}

.zl-product-content {
    position: absolute;
    z-index: 2;
    bottom: 0;
    padding: 30px;
    width: 100%;
}

.zl-product-content h3 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 14px;
}

.zl-product-content p {
    font-size: 13px;
    color: rgba(255,255,255,.72);
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition: var(--zl-transition);
}

.zl-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--zl-accent);
    color: #111;
    margin-top: 20px;
    transition: var(--zl-transition);
}

.zl-product-card:hover .zl-product-image img {
    transform: scale(1.08);
}

.zl-product-card:hover .zl-product-content p {
    max-height: 150px;
    opacity: 1;
}

.zl-product-card:hover .zl-card-arrow {
    transform: translateX(5px);
}


/* ============================================================
   SERVICES
============================================================ */

.zl-services {
    background: var(--zl-bg-light);
}

.zl-services .zl-section-title {
    color: var(--zl-dark-text);
}

.zl-services .zl-section-title span {
    color: var(--zl-orange);
}

.zl-services .zl-section-kicker {
    color: var(--zl-orange);
}

.zl-services p {
    color: #5d625b;
}

.zl-sticky-heading {
    position: sticky;
    top: 120px;
}

.zl-service-item {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    gap: 20px;
    border-top: 1px solid rgba(17,17,17,.14);
    padding: 30px 0;
    transition: var(--zl-transition);
}

.zl-service-item:last-child {
    border-bottom: 1px solid rgba(17,17,17,.14);
}

.zl-service-number {
    font-size: 12px;
    color: var(--zl-orange);
    padding-top: 7px;
}

.zl-service-item h3 {
    color: #161914;
    font-size: 24px;
    margin-bottom: 8px;
}

.zl-service-item p {
    margin: 0;
}

.zl-service-arrow {
    color: #161914;
    font-size: 23px;
    transition: var(--zl-transition);
}

.zl-service-item:hover {
    padding-left: 12px;
}

.zl-service-item:hover .zl-service-arrow {
    color: var(--zl-orange);
    transform: translate(3px, -3px);
}


/* ============================================================
   PORTFOLIO MAP
============================================================ */

.zl-portfolio {
    background: var(--zl-bg);
}

.zl-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 30px;
}

.zl-map-wrap {
    height: 720px;
    position: relative;
    overflow: hidden;
    border-radius: var(--zl-radius);
    border: 1px solid var(--zl-border);
}

#ziplord-project-map {
    width: 100%;
    height: 100%;
    background: #dfe4dc;
}

.zl-map-caption {
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 500;
    background: rgba(12,15,12,.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px;
    padding: 12px 18px;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zl-map-pulse {
    width: 9px;
    height: 9px;
    background: var(--zl-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(245,163,0,.17);
}

.zl-project-locations {
    background: var(--zl-surface);
    border-radius: var(--zl-radius);
    padding: 12px 30px;
    max-height: 720px;
    overflow-y: auto;
}

.zl-location-item {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 15px;
    padding: 24px 0;
    border-bottom: 1px solid var(--zl-border);
}

.zl-location-item:last-child {
    border-bottom: 0;
}

.zl-location-index {
    color: var(--zl-accent);
    font-size: 11px;
    padding-top: 5px;
}

.zl-location-content h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 7px;
}

.zl-location-content span {
    display: block;
    color: var(--zl-muted);
    font-size: 13px;
    line-height: 1.65;
}

.zl-map-marker-wrapper {
    background: transparent !important;
    border: 0 !important;
}

.zl-map-marker {
    width: 18px;
    height: 18px;
    display: block;
    background: var(--zl-orange);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 8px rgba(245, 163, 0, .24),
        0 5px 15px rgba(0,0,0,.3);
}

.leaflet-popup-content-wrapper {
    border-radius: 14px;
}

.zl-map-popup {
    padding: 5px;
    min-width: 190px;
}

.zl-map-popup > span {
    font-size: 9px;
    color: #8a8f87;
    letter-spacing: .12em;
}

.zl-map-popup h4 {
    color: #171a15;
    font-size: 21px;
    margin: 5px 0 10px;
}

.zl-map-popup p {
    color: #50554e;
    font-size: 12px;
    line-height: 1.5;
    margin: 3px 0;
}


/* ============================================================
   FEATURED WORK
============================================================ */

.zl-featured-work {
    background: var(--zl-bg);
    padding: 0 0 120px;
}

.zl-featured-project {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 18px;
}

.zl-featured-project-large {
    height: 724px;
}

.zl-featured-project img,
.zl-featured-project-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zl-featured-project img {
    object-fit: cover;
    transition: transform .8s ease;
}

.zl-featured-project-overlay {
    background: linear-gradient(
        180deg,
        transparent 35%,
        rgba(0,0,0,.82) 100%
    );
}

.zl-featured-project:hover img {
    transform: scale(1.04);
}

.zl-featured-meta {
    position: absolute;
    left: 35px;
    bottom: 30px;
    z-index: 2;
}

.zl-featured-meta span {
    color: var(--zl-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.zl-featured-meta h3 {
    color: #fff;
    font-size: 34px;
    margin: 6px 0 0;
}


/* ============================================================
   TESTIMONIAL
============================================================ */

.zl-testimonial {
    background: var(--zl-bg-soft);
}

.zl-testimonial-slide {
    padding: 30px 0;
}

.zl-quote-mark {
    color: var(--zl-accent);
    font-family: Georgia, serif;
    font-size: 90px;
    line-height: .8;
}

.zl-testimonial blockquote {
    color: #fff;
    font-size: clamp(27px, 3vw, 43px);
    line-height: 1.35;
    font-weight: 500;
    border: 0;
    margin: 20px auto 50px;
    max-width: 900px;
}

.zl-testimonial-client {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.zl-testimonial-client img {
    width: 52px !important;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
}

.zl-testimonial-client strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.zl-testimonial-client span {
    color: var(--zl-muted);
    font-size: 12px;
}


/* ============================================================
   BLOG
============================================================ */

.zl-blog {
    background: var(--zl-bg);
}

.zl-blog-card {
    height: 100%;
}

.zl-blog-image {
    display: block;
    border-radius: 17px;
    overflow: hidden;
    margin-bottom: 25px;
}

.zl-blog-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform .7s ease;
}

.zl-blog-card:hover .zl-blog-image img {
    transform: scale(1.06);
}

.zl-blog-meta {
    color: var(--zl-accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.zl-blog-content h3 {
    font-size: 25px;
    line-height: 1.3;
    margin: 12px 0 25px;
}

.zl-blog-content h3 a {
    color: #fff;
}

.zl-blog-content h3 a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}


/* ============================================================
   FINAL CTA
============================================================ */

.zl-final-cta {
    background: var(--zl-accent);
    padding: 110px 0;
}

.zl-final-cta .zl-section-kicker {
    color: #111;
}

.zl-final-cta-inner {
    max-width: 900px;
}

.zl-final-cta h2 {
    color: #111;
    font-size: clamp(54px, 7vw, 95px);
    line-height: .95;
    margin-bottom: 28px;
}

.zl-final-cta h2 span {
    color: #fff;
}

.zl-final-cta p {
    color: rgba(17,17,17,.72);
    font-size: 18px;
    max-width: 600px;
}

.zl-cta-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.zl-final-cta .zl-btn-primary {
    background: #111;
    color: #fff;
}

.zl-final-cta .zl-btn-primary:hover {
    background: #fff;
    color: #111;
}

.zl-contact-number {
    color: #111;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(17,17,17,.4);
    padding-bottom: 5px;
}

.zl-contact-number:hover {
    color: #fff;
    text-decoration: none;
    border-color: #fff;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {
    .zl-hero-title {
        font-size: 78px;
    }

    .zl-product-card {
        height: 440px;
    }

    .zl-about-visual > img {
        height: 580px;
    }
}

@media (max-width: 991px) {
    .zl-section {
        padding: 90px 0;
    }

    .zl-section-heading-row {
        display: block;
    }

    .zl-section-heading-copy {
        margin-top: 30px;
    }

    .zl-hero {
        min-height: 850px;
    }

    .zl-hero-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .zl-scroll-hint {
        display: none;
    }

    .zl-sticky-heading {
        position: static;
    }

    .zl-map-layout {
        grid-template-columns: 1fr;
    }

    .zl-map-wrap {
        height: 620px;
    }

    .zl-project-locations {
        max-height: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 30px;
    }

    .zl-featured-project-large,
    .zl-featured-project {
        height: 500px;
    }
}

@media (max-width: 767px) {
    .zl-section {
        padding: 75px 0;
    }

    .zl-hero {
        min-height: 760px;
        background-position: 60% center;
    }

    .zl-hero-overlay {
        background: rgba(7,10,7,.67);
    }

    .zl-hero-container {
        padding-top: 140px;
        padding-bottom: 155px;
    }

    .zl-hero-title {
        font-size: 52px;
        line-height: .98;
    }

    .zl-hero-description {
        font-size: 16px;
    }

    .zl-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .zl-btn {
        width: 100%;
    }

    .zl-hero-stats {
        grid-template-columns: repeat(3, 1fr);
        min-height: 90px;
    }

    .zl-stat {
        padding: 14px 8px;
        text-align: center;
    }

    .zl-stat strong {
        font-size: 12px;
    }

    .zl-stat span {
        font-size: 8px;
    }

    .zl-section-title {
        font-size: 43px;
    }

    .zl-about-visual {
        padding: 0 20px 60px 0;
    }

    .zl-about-visual > img {
        height: 520px;
    }

    .zl-about-floating-card {
        width: 230px;
        padding: 22px;
    }

    .zl-play-button {
        width: 68px;
        height: 68px;
        right: 0;
    }

    .zl-product-card {
        height: 480px;
    }

    .zl-product-content p {
        max-height: 150px;
        opacity: 1;
    }

    .zl-service-item {
        grid-template-columns: 40px 1fr 25px;
    }

    .zl-map-wrap {
        height: 520px;
    }

    .zl-project-locations {
        display: block;
    }

    .zl-featured-project,
    .zl-featured-project-large {
        height: 430px;
    }

    .zl-featured-meta {
        left: 22px;
        bottom: 20px;
    }

    .zl-featured-meta h3 {
        font-size: 27px;
    }

    .zl-testimonial blockquote {
        font-size: 25px;
    }

    .zl-final-cta {
        padding: 80px 0;
    }

    .zl-final-cta h2 {
        font-size: 52px;
    }

    .zl-cta-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .zl-hero-title {
        font-size: 45px;
    }

    .zl-map-wrap {
        height: 450px;
    }

    .zl-product-card {
        height: 450px;
    }
}

/* ============================================================
   ZIPLORD MODERN ABOUT PAGE
============================================================ */

.about-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.about-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.about-header header,
.about-header .site-navbar,
.about-header .site-navbar-wrap {
    background: transparent !important;
}

.about-header .site-navbar {
    position: relative !important;
}

.about-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.about-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.za-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.za-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 10, 7, 0.88) 0%,
            rgba(7, 10, 7, 0.55) 52%,
            rgba(7, 10, 7, 0.20) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 10, 7, .88) 0%,
            transparent 55%
        );
}

.za-hero-container {
    position: relative;
    z-index: 2;
    padding-top: 180px;
    padding-bottom: 150px;
}

.za-hero-title {
    color: #fff;
    font-size: clamp(64px, 8vw, 115px);
    line-height: .9;
    margin: 0;
    letter-spacing: -.055em;
}

.za-hero-title span {
    color: var(--zl-accent);
}

.za-hero-copy {
    max-width: 650px;
    color: rgba(255,255,255,.73) !important;
    font-size: 19px;
    margin: 35px 0 0;
    line-height: 1.75 !important;
}

.za-hero-bottom {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.15);
    background: rgba(10,13,10,.26);
    backdrop-filter: blur(12px);
}

.za-breadcrumb {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
}

.za-breadcrumb a {
    color: #fff;
}

.za-breadcrumb a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}

.za-breadcrumb span {
    color: rgba(255,255,255,.5);
}


/* ============================================================
   STORY
============================================================ */

.za-story {
    background: var(--zl-bg);
}

.za-story-image {
    position: relative;
    margin-top: 85px;
    height: 680px;
    overflow: hidden;
    border-radius: 24px;
}

.za-story-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.za-story-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.72) 100%
        );
}

.za-story-caption {
    position: absolute;
    z-index: 2;
    left: 45px;
    bottom: 45px;
    max-width: 440px;
}

.za-story-caption span {
    display: block;
    color: var(--zl-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    margin-bottom: 10px;
}

.za-story-caption strong {
    color: #fff;
    display: block;
    font-size: 30px;
    line-height: 1.25;
}


/* ============================================================
   ACHIEVEMENTS
============================================================ */

.za-achievements {
    background: var(--zl-accent);
}

.za-achievement {
    min-height: 350px;
    padding: 60px 40px;
    border-right: 1px solid rgba(0,0,0,.16);
}

.za-achievements .col-md-4:last-child .za-achievement {
    border-right: 0;
}

.za-achievement-number {
    display: block;
    color: #111;
    font-size: 74px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.06em;
    margin-bottom: 50px;
}

.za-achievement-number span {
    font-size: 30px;
    letter-spacing: normal;
}

.za-achievement h3 {
    color: #111;
    font-size: 24px;
    line-height: 1.25;
}

.za-achievement p {
    color: rgba(17,17,17,.66);
    margin: 15px 0 0;
}


/* ============================================================
   PURPOSE
============================================================ */

.za-purpose {
    background: var(--zl-bg);
}

.za-purpose-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 25px;
    padding: 45px 0;
    border-top: 1px solid var(--zl-border);
}

.za-purpose-card:last-child {
    border-bottom: 1px solid var(--zl-border);
}

.za-purpose-number {
    color: var(--zl-accent);
    font-size: 12px;
    padding-top: 7px;
}

.za-purpose-content > span {
    display: block;
    color: var(--zl-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    margin-bottom: 15px;
}

.za-purpose-content h3 {
    color: #fff;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 500;
    margin: 0;
}


/* ============================================================
   VALUES
============================================================ */

.za-values {
    background: var(--zl-bg-soft);
}

.za-value-card {
    height: 100%;
    min-height: 420px;
    background: #20251f;
    border: 1px solid var(--zl-border);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    transition: .35s ease;
}

.za-value-card:hover {
    transform: translateY(-7px);
    border-color: rgba(245,163,0,.5);
}

.za-value-number {
    position: absolute;
    top: 28px;
    right: 30px;
    color: rgba(255,255,255,.35);
    font-size: 11px;
}

.za-value-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zl-accent);
    color: #111;
    font-size: 24px;
    margin-bottom: 95px;
}

.za-value-card h3 {
    color: #fff;
    font-size: 31px;
    margin-bottom: 16px;
}

.za-value-card p {
    margin: 0;
}


/* ============================================================
   FOUNDER
============================================================ */

.za-founder {
    background: var(--zl-bg-light);
}

.za-founder .zl-section-title {
    color: #161914;
}

.za-founder .zl-section-title span {
    color: var(--zl-orange);
}

.za-founder .zl-section-kicker {
    color: var(--zl-orange);
}

.za-founder-image {
    position: relative;
    padding-right: 45px;
    padding-bottom: 45px;
}

.za-founder-image > img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center top;
    border-radius: 22px;
}

.za-founder-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 205px;
    background: #151814;
    color: #fff;
    padding: 25px;
    border-radius: 15px;
}

.za-founder-badge span {
    display: block;
    color: var(--zl-accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.za-founder-badge strong {
    display: block;
    font-size: 20px;
    margin-top: 4px;
}

.za-founder-role {
    color: var(--zl-orange) !important;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    margin-bottom: 30px;
}

.za-founder-quote {
    border: 0;
    color: #252921;
    font-size: 23px;
    line-height: 1.7;
    font-weight: 400;
    padding: 0;
    margin: 0 0 35px;
}

.za-founder-social {
    border-top: 1px solid rgba(0,0,0,.14);
    padding-top: 25px;
}

.za-founder-social a {
    color: #151815;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
}

.za-founder-social a:hover {
    color: var(--zl-orange);
    text-decoration: none;
}


/* ============================================================
   APPROACH
============================================================ */

.za-approach {
    background: var(--zl-bg);
}

.za-approach-list {
    border-top: 1px solid var(--zl-border);
}

.za-approach-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    padding: 34px 0;
    border-bottom: 1px solid var(--zl-border);
}

.za-approach-item > span {
    color: var(--zl-accent);
    font-size: 11px;
    padding-top: 8px;
}

.za-approach-item h3 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 10px;
}

.za-approach-item p {
    max-width: 570px;
    margin: 0;
}


/* ============================================================
   TESTIMONIAL
============================================================ */

.za-testimonials {
    background: var(--zl-bg-soft);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .za-hero {
        min-height: 680px;
    }

    .za-story-image {
        height: 580px;
    }

    .za-achievement {
        padding: 50px 25px;
    }

    .za-achievement-number {
        font-size: 58px;
    }

    .za-founder-image > img {
        height: 600px;
    }

}


@media (max-width: 767px) {

    .za-hero {
        min-height: 650px;
        background-position: center;
    }

    .za-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.90) 0%,
                rgba(7,10,7,.58) 100%
            );
    }

    .za-hero-container {
        padding-top: 160px;
        padding-bottom: 125px;
    }

    .za-hero-title {
        font-size: 54px;
        line-height: .98;
    }

    .za-hero-copy {
        font-size: 16px;
    }

    .za-story-image {
        height: 500px;
        margin-top: 55px;
    }

    .za-story-caption {
        left: 25px;
        bottom: 25px;
        right: 25px;
    }

    .za-story-caption strong {
        font-size: 24px;
    }

    .za-achievement {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,.16);
        padding: 45px 20px;
    }

    .za-achievements .col-md-4:last-child .za-achievement {
        border-bottom: 0;
    }

    .za-achievement-number {
        margin-bottom: 30px;
    }

    .za-purpose-card {
        grid-template-columns: 40px 1fr;
    }

    .za-purpose-content h3 {
        font-size: 23px;
    }

    .za-value-card {
        min-height: 360px;
    }

    .za-value-icon {
        margin-bottom: 60px;
    }

    .za-founder-image {
        padding-right: 20px;
        padding-bottom: 55px;
    }

    .za-founder-image > img {
        height: 520px;
    }

    .za-founder-badge {
        width: 190px;
    }

    .za-founder-quote {
        font-size: 20px;
    }

}


@media (max-width: 480px) {

    .za-hero-title {
        font-size: 46px;
    }

    .za-story-image {
        height: 430px;
    }

    .za-founder-image > img {
        height: 470px;
    }

}

/* ============================================================
   ZIPLORD MODERN FAQ PAGE
============================================================ */

.faq-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.faq-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.faq-header header,
.faq-header .site-navbar,
.faq-header .site-navbar-wrap {
    background: transparent !important;
}

.faq-header .site-navbar {
    position: relative !important;
}

.faq-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.faq-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.zf-hero {
    position: relative;
    min-height: 710px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.zf-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.91) 0%,
            rgba(7,10,7,.63) 48%,
            rgba(7,10,7,.22) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.88) 0%,
            transparent 55%
        );
}

.zf-hero-container {
    position: relative;
    z-index: 2;
    padding-top: 180px;
    padding-bottom: 145px;
}

.zf-hero-title {
    color: #fff;
    font-size: clamp(61px, 7.5vw, 108px);
    line-height: .92;
    letter-spacing: -.055em;
    margin: 0;
}

.zf-hero-title span {
    color: var(--zl-accent);
}

.zf-hero-copy {
    max-width: 640px;
    color: rgba(255,255,255,.73) !important;
    font-size: 19px;
    line-height: 1.75 !important;
    margin-top: 32px;
}

.zf-hero-bottom {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.15);
    background: rgba(8,11,8,.28);
    backdrop-filter: blur(12px);
}

.zf-breadcrumb {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
}

.zf-breadcrumb a {
    color: #fff;
}

.zf-breadcrumb a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}

.zf-breadcrumb span {
    color: rgba(255,255,255,.5);
}


/* ============================================================
   FAQ
============================================================ */

.zf-faq-section {
    background: var(--zl-bg);
}

.zf-faq-intro {
    position: sticky;
    top: 120px;
}

.zf-faq-intro > p {
    max-width: 390px;
}

.zf-intro-note {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid var(--zl-border);
}

.zf-note-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--zl-accent);
    color: #111;
    font-size: 19px;
    font-weight: 700;
}

.zf-intro-note strong {
    color: #fff;
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}

.zf-intro-note p {
    font-size: 13px;
    margin: 0;
}


/* Accordion */

.zf-accordion {
    border-top: 1px solid var(--zl-border);
}

.zf-accordion-item {
    border-bottom: 1px solid var(--zl-border);
}

.zf-accordion-button {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    min-height: 125px;

    display: grid;
    grid-template-columns: 55px 1fr 46px;
    gap: 22px;
    align-items: center;

    padding: 25px 0;

    border: 0;
    outline: 0;

    background: transparent;

    text-align: left;
    cursor: pointer;

    transition: .3s ease;
}

.zf-accordion-button:focus {
    outline: none;
}

.zf-faq-number {
    color: var(--zl-accent);
    font-size: 11px;
    font-weight: 700;
    align-self: start;
    padding-top: 12px;
}

.zf-faq-question {
    color: #fff;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 600;
    transition: .3s ease;
}


/* Plus / minus */

.zf-faq-toggle {
    width: 44px;
    height: 44px;

    position: relative;

    display: block;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;

    transition: .3s ease;
}

.zf-faq-toggle::before,
.zf-faq-toggle::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 14px;
    height: 1px;

    background: #fff;

    transform: translate(-50%, -50%);
    transition: .3s ease;
}

.zf-faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}


/* Open state */

.zf-accordion-button[aria-expanded="true"] .zf-faq-question {
    color: var(--zl-accent);
}

.zf-accordion-button[aria-expanded="true"] .zf-faq-toggle {
    background: var(--zl-accent);
    border-color: var(--zl-accent);
}

.zf-accordion-button[aria-expanded="true"] .zf-faq-toggle::before,
.zf-accordion-button[aria-expanded="true"] .zf-faq-toggle::after {
    background: #111;
}

.zf-accordion-button[aria-expanded="true"] .zf-faq-toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}


/* Hover */

.zf-accordion-button:hover .zf-faq-question {
    color: var(--zl-accent);
}

.zf-accordion-button:hover .zf-faq-toggle {
    border-color: var(--zl-accent);
}


/* Answer */

.zf-accordion-body {
    padding:
        0
        70px
        40px
        77px;
}

.zf-accordion-body p {
    max-width: 650px;
    color: var(--zl-muted);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 12px;
}

.zf-accordion-body p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   PROCESS
============================================================ */

.zf-process {
    background: var(--zl-bg-light);
}

.zf-process .zl-section-title {
    color: var(--zl-dark-text);
}

.zf-process .zl-section-title span {
    color: var(--zl-orange);
}

.zf-process .zl-section-kicker {
    color: var(--zl-orange);
}

.zf-process .zl-section-heading-copy p {
    color: #5e635d;
}

.zf-process-card {
    position: relative;

    min-height: 390px;
    height: 100%;

    padding: 30px;

    background: #fff;

    border: 1px solid rgba(17,17,17,.10);
    border-radius: 18px;

    transition: .35s ease;
}

.zf-process-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 60px rgba(17,17,17,.08);
}

.zf-process-number {
    display: block;

    color: var(--zl-orange);

    font-size: 11px;
    font-weight: 700;

    margin-bottom: 105px;
}

.zf-process-card h3 {
    color: #161914;
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 20px;
}

.zf-process-card p {
    color: #62675f;
    font-size: 14px;
    margin: 0;
}


/* ============================================================
   CONTACT
============================================================ */

.zf-contact {
    background: var(--zl-bg);
}

.zf-contact-box {
    position: relative;
    overflow: hidden;

    background: var(--zl-surface);

    border: 1px solid var(--zl-border);
    border-radius: 28px;

    padding: 75px;
}

/* .zf-contact-box::after {
    content: "";

    position: absolute;
    width: 420px;
    height: 420px;

    right: -180px;
    top: -210px;

    border-radius: 50%;

    border: 1px solid rgba(245,163,0,.22);

    pointer-events: none;
} */

.zf-contact-box h2 {
    color: #fff;

    font-size: clamp(44px, 5vw, 70px);
    line-height: .98;

    margin-bottom: 30px;
}

.zf-contact-box h2 span {
    color: var(--zl-accent);
}

.zf-contact-box > .row > div:first-child > p {
    max-width: 540px;
    font-size: 16px;
    margin-bottom: 35px;
}

.zf-contact-details {
    border-top: 1px solid var(--zl-border);
}

.zf-contact-item {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid var(--zl-border);
}

.zf-contact-label {
    color: var(--zl-accent);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .13em;
    text-transform: uppercase;

    padding-top: 4px;
}

.zf-contact-item a,
.zf-contact-item p {
    display: block;

    color: #fff;

    font-size: 15px;
    line-height: 1.7;

    margin: 0;
}

.zf-contact-item a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .zf-hero {
        min-height: 650px;
    }

    .zf-faq-intro {
        position: static;
    }

    .zf-contact-box {
        padding: 55px;
    }

}


@media (max-width: 767px) {

    .zf-hero {
        min-height: 620px;
    }

    .zf-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.92) 0%,
                rgba(7,10,7,.58) 100%
            );
    }

    .zf-hero-container {
        padding-top: 150px;
        padding-bottom: 125px;
    }

    .zf-hero-title {
        font-size: 51px;
        line-height: .98;
    }

    .zf-hero-copy {
        font-size: 16px;
    }


    /* FAQ */

    .zf-accordion-button {
        grid-template-columns: 36px 1fr 40px;
        gap: 12px;
        min-height: 105px;
    }

    .zf-faq-number {
        font-size: 9px;
    }

    .zf-faq-question {
        font-size: 19px;
    }

    .zf-faq-toggle {
        width: 38px;
        height: 38px;
    }

    .zf-accordion-body {
        padding:
            0
            45px
            30px
            48px;
    }


    /* PROCESS */

    .zf-process-card {
        min-height: 330px;
    }

    .zf-process-number {
        margin-bottom: 70px;
    }


    /* CONTACT */

    .zf-contact-box {
        padding: 40px 25px;
        border-radius: 20px;
    }

    .zf-contact-box h2 {
        font-size: 43px;
    }

    .zf-contact-item {
        grid-template-columns: 65px 1fr;
    }

}


@media (max-width: 480px) {

    .zf-hero-title {
        font-size: 44px;
    }

    .zf-accordion-button {
        grid-template-columns: 28px 1fr 36px;
        gap: 10px;
    }

    .zf-faq-question {
        font-size: 17px;
    }

    .zf-faq-toggle {
        width: 34px;
        height: 34px;
    }

    .zf-accordion-body {
        padding:
            0
            10px
            28px
            38px;
    }

    .zf-contact-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}

/* ============================================================
   ZIPLORD MODERN CONTACT PAGE
============================================================ */

.contact-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.contact-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.contact-header header,
.contact-header .site-navbar,
.contact-header .site-navbar-wrap {
    background: transparent !important;
}

.contact-header .site-navbar {
    position: relative !important;
}

.contact-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.contact-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.zc-hero {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zc-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.93) 0%,
            rgba(7,10,7,.62) 48%,
            rgba(7,10,7,.18) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.90) 0%,
            transparent 55%
        );
}

.zc-hero-container {
    position: relative;
    z-index: 2;

    padding-top: 180px;
    padding-bottom: 145px;
}

.zc-hero-title {
    color: #fff;

    font-size: clamp(64px, 8vw, 112px);
    line-height: .91;

    letter-spacing: -.055em;

    margin: 0;
}

.zc-hero-title span {
    color: var(--zl-accent);
}

.zc-hero-copy {
    max-width: 640px;

    margin-top: 32px;

    color: rgba(255,255,255,.73) !important;

    font-size: 19px;
    line-height: 1.75 !important;
}


/* Breadcrumb */

.zc-hero-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 3;

    border-top: 1px solid rgba(255,255,255,.15);

    background: rgba(8,11,8,.28);

    backdrop-filter: blur(12px);
}

.zc-breadcrumb {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 15px;

    font-size: 12px;
}

.zc-breadcrumb a {
    color: #fff;
}

.zc-breadcrumb a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}

.zc-breadcrumb span {
    color: rgba(255,255,255,.5);
}


/* ============================================================
   QUICK CONTACT
============================================================ */

.zc-quick-contact {
    background: var(--zl-bg-soft);

    border-bottom: 1px solid var(--zl-border);
}

.zc-contact-card {
    position: relative;

    min-height: 270px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 35px;

    border-right: 1px solid var(--zl-border);

    transition: .35s ease;

    overflow: hidden;
}

.zc-quick-contact .col-md-4:last-child .zc-contact-card {
    border-right: 0;
}

.zc-contact-card:hover {
    background: var(--zl-accent);
    text-decoration: none;
}

.zc-contact-card-number {
    position: absolute;

    top: 30px;
    right: 30px;

    color: rgba(255,255,255,.3);

    font-size: 11px;

    transition: .35s ease;
}

.zc-contact-card-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    margin-bottom: 42px;

    background: rgba(255,255,255,.08);

    color: var(--zl-accent);

    font-size: 21px;

    transition: .35s ease;
}

.zc-contact-card-label {
    color: var(--zl-muted);

    text-transform: uppercase;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;

    margin-bottom: 9px;

    transition: .35s ease;
}

.zc-contact-card strong {
    color: #fff;

    font-size: 19px;

    word-break: break-word;

    transition: .35s ease;
}

.zc-contact-card-arrow {
    position: absolute;

    right: 30px;
    bottom: 33px;

    color: rgba(255,255,255,.5);

    font-size: 21px;

    transition: .35s ease;
}

.zc-contact-card:hover .zc-contact-card-number,
.zc-contact-card:hover .zc-contact-card-label,
.zc-contact-card:hover .zc-contact-card-arrow {
    color: rgba(17,17,17,.58);
}

.zc-contact-card:hover .zc-contact-card-icon {
    background: #111;
    color: #fff;
}

.zc-contact-card:hover strong {
    color: #111;
}

.zc-contact-card:hover .zc-contact-card-arrow {
    transform: translate(3px, -3px);
}


/* ============================================================
   ENQUIRY SECTION
============================================================ */

.zc-enquiry {
    background: var(--zl-bg);
}

.zc-enquiry-intro {
    position: sticky;
    top: 120px;
}

.zc-enquiry-intro > p {
    max-width: 390px;
}


/* Helpful information */

.zc-enquiry-tip {
    margin-top: 45px;

    padding-top: 28px;

    border-top: 1px solid var(--zl-border);

    display: flex;
    align-items: flex-start;

    gap: 17px;
}

.zc-tip-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--zl-accent);

    color: #111;

    font-weight: 800;
}

.zc-enquiry-tip strong {
    color: #fff;

    display: block;

    font-size: 14px;

    margin-bottom: 5px;
}

.zc-enquiry-tip p {
    margin: 0;

    font-size: 13px;
}


/* ============================================================
   FORM
============================================================ */

.zc-form-wrap {
    background: var(--zl-bg-light);

    border-radius: 24px;

    padding: 55px;
}

.zc-form-heading {
    margin-bottom: 45px;

    border-bottom: 1px solid rgba(0,0,0,.12);

    padding-bottom: 30px;
}

.zc-form-heading > span {
    display: block;

    color: var(--zl-orange);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;

    margin-bottom: 8px;
}

.zc-form-heading h3 {
    color: #151815;

    font-size: 42px;

    margin: 0;
}


/* Group */

.zc-form-group {
    margin-bottom: 28px;
}

.zc-form-group label {
    display: block;

    color: #262a24;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .07em;

    margin-bottom: 10px;
}


/* Inputs */

.zc-form-group input,
.zc-form-group textarea {
    width: 100%;

    border: 0;
    border-bottom: 1px solid rgba(17,17,17,.22);

    border-radius: 0;

    background: transparent;

    color: #171a16;

    padding: 13px 0 15px;

    font-size: 15px;

    outline: none;

    transition: .3s ease;
}

.zc-form-group textarea {
    resize: vertical;
    min-height: 170px;
}

.zc-form-group input::placeholder,
.zc-form-group textarea::placeholder {
    color: rgba(17,17,17,.40);
}

.zc-form-group input:focus,
.zc-form-group textarea:focus {
    border-color: var(--zl-orange);
}


/* Footer */

.zc-form-footer {
    margin-top: 15px;

    display: flex;
    align-items: center;

    gap: 25px;
}

.zc-submit-btn {
    flex: 0 0 auto;

    border: 0;

    cursor: pointer;
}

.zc-form-footer > p {
    max-width: 260px;

    margin: 0;

    color: #777c73;

    font-size: 10px;
    line-height: 1.6;
}


/* Alerts */

.zc-alert {
    margin-bottom: 30px;

    padding: 17px 20px;

    border-radius: 10px;

    font-size: 13px;
}

.zc-alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.zc-alert-success {
    background: rgba(61,147,63,.11);

    color: #28722c;

    border: 1px solid rgba(61,147,63,.25);
}

.zc-alert-error {
    background: rgba(183,50,50,.08);

    color: #9a3030;

    border: 1px solid rgba(183,50,50,.2);
}


/* ============================================================
   DETAILS
============================================================ */

.zc-details {
    background: var(--zl-bg-soft);
}

.zc-details-grid {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 25px;
}

.zc-detail-panel {
    min-height: 430px;

    padding: 45px;

    background: var(--zl-surface);

    border: 1px solid var(--zl-border);

    border-radius: 22px;

    position: relative;
}

.zc-detail-panel-main {
    background:
        linear-gradient(
            180deg,
            rgba(14,17,14,.38),
            rgba(14,17,14,.94)
        ),
        url('../images/breadcrumb-2.jpg');

    background-size: cover;
    background-position: center;
}

.zc-detail-label {
    color: var(--zl-accent);

    display: block;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .15em;

    margin-bottom: 120px;
}

.zc-detail-panel-main h3 {
    color: #fff;

    font-size: clamp(32px, 4vw, 52px);

    margin-bottom: 5px;
}

.zc-detail-panel-main > p {
    color: rgba(255,255,255,.7);

    font-size: 16px;
}

.zc-location-marker {
    position: absolute;

    left: 45px;
    bottom: 38px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: #fff;

    font-size: 11px;
}

.zc-location-marker > span {
    width: 10px;
    height: 10px;

    background: var(--zl-accent);

    border-radius: 50%;

    box-shadow: 0 0 0 7px rgba(245,163,0,.17);
}


/* Contact rows */

.zc-detail-row {
    display: grid;

    grid-template-columns: 85px 1fr;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid var(--zl-border);
}

.zc-detail-row:last-child {
    border-bottom: 0;
}

.zc-detail-row > span {
    color: var(--zl-muted);

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .12em;
}

.zc-detail-row a {
    display: block;

    color: #fff;

    font-size: 15px;

    line-height: 1.8;
}

.zc-detail-row a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}


/* ============================================================
   ABOUT STRIP
============================================================ */

.zc-about-strip {
    background: #111411;

    border-top: 1px solid var(--zl-border);
    border-bottom: 1px solid var(--zl-border);

    padding: 80px 0;
}

.zc-about-small {
    display: block;

    color: var(--zl-accent);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .14em;

    margin-bottom: 17px;
}

.zc-about-strip h2 {
    color: #fff;

    font-size: clamp(31px, 4vw, 51px);

    line-height: 1.15;

    margin: 0;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .zc-hero {
        min-height: 650px;
    }

    .zc-enquiry-intro {
        position: static;
    }

    .zc-details-grid {
        grid-template-columns: 1fr;
    }

    .zc-detail-panel {
        min-height: 380px;
    }

}


@media (max-width: 767px) {

    /* HERO */

    .zc-hero {
        min-height: 620px;
    }

    .zc-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.93) 0%,
                rgba(7,10,7,.57) 100%
            );
    }

    .zc-hero-container {
        padding-top: 150px;
        padding-bottom: 125px;
    }

    .zc-hero-title {
        font-size: 52px;
        line-height: .97;
    }

    .zc-hero-copy {
        font-size: 16px;
    }


    /* QUICK CONTACT */

    .zc-contact-card {
        min-height: 230px;

        border-right: 0;
        border-bottom: 1px solid var(--zl-border);
    }

    .zc-quick-contact .col-md-4:last-child .zc-contact-card {
        border-bottom: 0;
    }


    /* FORM */

    .zc-form-wrap {
        padding: 35px 25px;

        border-radius: 18px;
    }

    .zc-form-heading h3 {
        font-size: 35px;
    }

    .zc-form-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .zc-submit-btn {
        width: 100%;
    }

    .zc-form-footer > p {
        max-width: 100%;
    }


    /* DETAILS */

    .zc-detail-panel {
        padding: 30px;

        min-height: 360px;
    }

    .zc-detail-label {
        margin-bottom: 90px;
    }

    .zc-location-marker {
        left: 30px;
        bottom: 30px;
    }


    /* ABOUT */

    .zc-about-strip {
        padding: 65px 0;
    }

    .zc-about-strip .zl-btn {
        margin-top: 30px;
    }

}


@media (max-width: 480px) {

    .zc-hero-title {
        font-size: 45px;
    }

    .zc-detail-row {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .zc-contact-card strong {
        font-size: 17px;
    }

}

/* ============================================================
   ZIPLORD MODERN BLOG
============================================================ */

.blog-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.blog-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.blog-header header,
.blog-header .site-navbar,
.blog-header .site-navbar-wrap {
    background: transparent !important;
}

.blog-header .site-navbar {
    position: relative !important;
}

.blog-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.blog-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.zb-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zb-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.93) 0%,
            rgba(7,10,7,.62) 50%,
            rgba(7,10,7,.15) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.9) 0%,
            transparent 60%
        );
}

.zb-hero-container {
    position: relative;
    z-index: 2;

    padding-top: 180px;
    padding-bottom: 145px;
}

.zb-hero-title {
    margin: 0;

    color: #fff;

    font-size: clamp(61px, 8vw, 110px);
    line-height: .91;

    letter-spacing: -.055em;
}

.zb-hero-title span {
    color: var(--zl-accent);
}

.zb-hero-copy {
    max-width: 650px;

    margin-top: 32px;

    color: rgba(255,255,255,.72) !important;

    font-size: 19px;
    line-height: 1.75 !important;
}


/* Breadcrumb */

.zb-hero-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 3;

    background: rgba(8,11,8,.28);

    border-top: 1px solid rgba(255,255,255,.14);

    backdrop-filter: blur(12px);
}

.zb-breadcrumb {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 15px;

    font-size: 12px;
}

.zb-breadcrumb a {
    color: #fff;
}

.zb-breadcrumb a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}

.zb-breadcrumb span {
    color: rgba(255,255,255,.5);
}


/* ============================================================
   FEATURED ARTICLE
============================================================ */

.zb-featured-section {
    background: var(--zl-bg);
}

.zb-section-heading {
    margin-bottom: 25px;
}

.zb-featured-article {
    display: grid;

    grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr);

    min-height: 650px;

    background: var(--zl-bg-soft);

    border: 1px solid var(--zl-border);
    border-radius: 25px;

    overflow: hidden;
}


/* Featured image */

.zb-featured-image {
    position: relative;

    display: block;

    min-height: 650px;

    overflow: hidden;
}

.zb-featured-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.35)
        );
}

.zb-featured-image img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;

    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.zb-featured-image:hover img {
    transform: scale(1.04);
}

.zb-featured-category {
    position: absolute;

    left: 30px;
    top: 30px;

    z-index: 2;

    background: var(--zl-accent);

    color: #111;

    padding: 10px 16px;

    border-radius: 100px;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .08em;
}


/* Featured content */

.zb-featured-content {
    padding: 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zb-featured-content h2 {
    margin: 18px 0 25px;

    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.05;
}

.zb-featured-content h2 a {
    color: #fff;
}

.zb-featured-content h2 a:hover {
    color: var(--zl-accent);
    text-decoration: none;
}

.zb-featured-content > p {
    margin-bottom: 35px;

    font-size: 15px;
}


/* Meta */

.zb-article-meta {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--zl-muted);

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .09em;
}

.zb-meta-dot {
    width: 4px;
    height: 4px;

    display: inline-block;

    background: var(--zl-accent);

    border-radius: 50%;
}


/* ============================================================
   ARTICLE SECTION
============================================================ */

.zb-articles-section {
    background: var(--zl-bg-light);
}

.zb-articles-section .zl-section-title {
    color: var(--zl-dark-text);
}

.zb-articles-section .zl-section-title span {
    color: var(--zl-orange);
}

.zb-articles-section .zl-section-kicker {
    color: var(--zl-orange);
}

.zb-articles-section .zl-section-heading-copy p {
    color: #5c625b;
}


/* ============================================================
   ARTICLE CARDS
============================================================ */

.zb-blog-card {
    height: 100%;
}

.zb-blog-card-image {
    display: block;

    position: relative;

    height: 360px;

    overflow: hidden;

    border-radius: 18px;

    margin-bottom: 26px;
}

.zb-blog-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.zb-blog-card:hover .zb-blog-card-image img {
    transform: scale(1.06);
}

.zb-blog-category {
    position: absolute;

    top: 20px;
    left: 20px;

    background: rgba(16,19,16,.9);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 100px;

    padding: 9px 14px;

    color: #fff;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .09em;
}


/* Card content */

.zb-blog-card-content .zb-article-meta {
    color: #777d74;
}

.zb-blog-card-content h3 {
    margin: 15px 0 17px;

    font-size: 27px;
    line-height: 1.22;
}

.zb-blog-card-content h3 a {
    color: #181b17;
}

.zb-blog-card-content h3 a:hover {
    color: var(--zl-orange);
    text-decoration: none;
}

.zb-blog-card-content > p {
    color: #646a62;

    font-size: 14px;

    margin-bottom: 25px;
}


/* Read more */

.zb-read-more {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(17,17,17,.25);

    color: #171a16;

    font-size: 12px;
    font-weight: 700;

    transition: .3s ease;
}

.zb-read-more span {
    transition: .3s ease;
}

.zb-read-more:hover {
    color: var(--zl-orange);

    border-color: var(--zl-orange);

    text-decoration: none;
}

.zb-read-more:hover span {
    transform: translateX(4px);
}


/* ============================================================
   DISCOVER / SIDEBAR SECTION
============================================================ */

.zb-discover-section {
    background: var(--zl-bg-soft);
}

.zb-discover-heading {
    position: sticky;

    top: 120px;
}

.zb-discover-heading > p {
    max-width: 370px;
}


/* ============================================================
   EXISTING BLOG SIDEBAR OVERRIDES
============================================================ */

.zb-sidebar-modern {
    background: var(--zl-surface);

    border: 1px solid var(--zl-border);
    border-radius: 22px;

    padding: 40px;
}


/* Generic headings inside current partial */

.zb-sidebar-modern h3,
.zb-sidebar-modern h4,
.zb-sidebar-modern h5 {
    color: #fff !important;

    font-size: 20px;

    border: 0 !important;

    margin-bottom: 20px !important;
}


/* Paragraphs */

.zb-sidebar-modern p,
.zb-sidebar-modern li {
    color: var(--zl-muted) !important;
}


/* Links */

.zb-sidebar-modern a {
    color: #fff !important;

    transition: .3s ease;
}

.zb-sidebar-modern a:hover {
    color: var(--zl-accent) !important;

    text-decoration: none;
}


/* Common sidebar blocks */

.zb-sidebar-modern .sidebar-box,
.zb-sidebar-modern .p-4,
.zb-sidebar-modern .mb-5 {
    background: transparent !important;
}

.zb-sidebar-modern .sidebar-box {
    padding: 0 0 30px !important;

    margin-bottom: 30px !important;

    border-bottom: 1px solid var(--zl-border);
}

.zb-sidebar-modern .sidebar-box:last-child {
    border-bottom: 0;

    margin-bottom: 0 !important;
}


/* Categories */

.zb-sidebar-modern .categories,
.zb-sidebar-modern ul {
    padding-left: 0;

    list-style: none;
}

.zb-sidebar-modern .categories li {
    padding: 12px 0;

    border-bottom: 1px solid var(--zl-border);
}

.zb-sidebar-modern .categories li:last-child {
    border-bottom: 0;
}

.zb-sidebar-modern .categories a {
    display: flex;

    justify-content: space-between;
}


/* Search */

.zb-sidebar-modern input[type="text"],
.zb-sidebar-modern input[type="search"] {
    width: 100%;

    background: rgba(255,255,255,.06);

    border: 1px solid var(--zl-border);

    border-radius: 10px;

    padding: 14px 15px;

    color: #fff;

    outline: none;
}

.zb-sidebar-modern input::placeholder {
    color: rgba(255,255,255,.38);
}


/* Recent blog images */

.zb-sidebar-modern img {
    border-radius: 10px;
}


/* ============================================================
   BLOG CTA
============================================================ */

.zb-blog-cta {
    background: var(--zl-accent);

    padding: 110px 0;
}

.zb-blog-cta-inner {
    display: grid;

    grid-template-columns: 1fr .55fr;

    gap: 100px;

    align-items: end;
}

.zb-blog-cta .zl-section-kicker {
    color: #111;
}

.zb-blog-cta h2 {
    color: #111;

    font-size: clamp(50px, 6vw, 85px);
    line-height: .95;

    margin: 0;
}

.zb-blog-cta h2 span {
    color: #fff;
}

.zb-blog-cta-right p {
    color: rgba(17,17,17,.7);

    font-size: 17px;

    margin-bottom: 30px;
}

.zb-blog-cta .zl-btn-primary {
    background: #111;

    color: #fff;
}

.zb-blog-cta .zl-btn-primary:hover {
    background: #fff;

    color: #111;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .zb-featured-content {
        padding: 45px;
    }

    .zb-blog-card-image {
        height: 320px;
    }

}


@media (max-width: 991px) {

    .zb-hero {
        min-height: 650px;
    }

    .zb-featured-article {
        grid-template-columns: 1fr;
    }

    .zb-featured-image {
        min-height: 520px;
    }

    .zb-featured-content {
        padding: 50px;
    }

    .zb-discover-heading {
        position: static;
    }

    .zb-blog-cta-inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}


@media (max-width: 767px) {

    /* HERO */

    .zb-hero {
        min-height: 620px;
    }

    .zb-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.93) 0%,
                rgba(7,10,7,.58) 100%
            );
    }

    .zb-hero-container {
        padding-top: 150px;
        padding-bottom: 125px;
    }

    .zb-hero-title {
        font-size: 50px;

        line-height: .98;
    }

    .zb-hero-copy {
        font-size: 16px;
    }


    /* FEATURED */

    .zb-featured-article {
        border-radius: 18px;
    }

    .zb-featured-image {
        min-height: 420px;
    }

    .zb-featured-content {
        padding: 35px 25px;
    }

    .zb-featured-content h2 {
        font-size: 34px;
    }


    /* CARDS */

    .zb-blog-card-image {
        height: 360px;
    }


    /* SIDEBAR */

    .zb-sidebar-modern {
        padding: 28px 22px;
    }


    /* CTA */

    .zb-blog-cta {
        padding: 80px 0;
    }

    .zb-blog-cta h2 {
        font-size: 50px;
    }

}


@media (max-width: 480px) {

    .zb-hero-title {
        font-size: 43px;
    }

    .zb-featured-image {
        min-height: 350px;
    }

    .zb-blog-card-image {
        height: 310px;
    }

    .zb-article-meta {
        flex-wrap: wrap;
    }

}

/* ============================================================
   ZIPLORD MODERN BLOG SIDEBAR
============================================================ */

.zbs-sidebar {
    width: 100%;
}


/* ============================================================
   GENERIC BLOCK
============================================================ */

.zbs-block {
    background: #1d211c;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 20px;

    padding: 30px;

    margin-bottom: 28px;
}

.zbs-block-heading {
    margin-bottom: 28px;
}

.zbs-heading-kicker {
    display: block;

    color: var(--zl-accent, #99a3a3);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .15em;

    margin-bottom: 8px;
}

.zbs-block-heading h3 {
    color: #fff !important;

    font-size: 23px;
    line-height: 1.2;

    margin: 0;

    border: 0 !important;
}


/* ============================================================
   SEARCH
============================================================ */

.zbs-search-field {
    display: flex;

    align-items: center;

    background: rgba(255,255,255,.055);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px;

    padding: 5px;

    transition: .3s ease;
}

.zbs-search-field:focus-within {
    border-color: var(--zl-accent, #99a3a3);

    background: rgba(255,255,255,.075);
}

.zbs-search-field input {
    flex: 1;

    width: 100%;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #fff !important;

    font-size: 13px;

    padding: 10px 10px 10px 17px;

    box-shadow: none !important;
}

.zbs-search-field input::placeholder {
    color: rgba(255,255,255,.4);
}

.zbs-search-field button {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: var(--zl-accent, #99a3a3);

    color: #111;

    cursor: pointer;

    transition: .3s ease;
}

.zbs-search-field button:hover {
    background: #fff;

    transform: translateX(2px);
}


/* ============================================================
   POPULAR POSTS
============================================================ */

.zbs-post-list {
    display: flex;
    flex-direction: column;
}

.zbs-post-item {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 17px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255,255,255,.1);

    transition: .3s ease;
}

.zbs-post-item:first-child {
    padding-top: 0;
}

.zbs-post-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


/* Image */

.zbs-post-image {
    position: relative;

    display: block;

    height: 100px;

    overflow: hidden;

    border-radius: 12px;
}

.zbs-post-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.zbs-post-item:hover .zbs-post-image img {
    transform: scale(1.08);
}

.zbs-post-number {
    position: absolute;

    left: 7px;
    bottom: 7px;

    min-width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(12,15,12,.88);

    color: #fff;

    border-radius: 50%;

    font-size: 8px;

    backdrop-filter: blur(5px);
}


/* Content */

.zbs-post-content {
    min-width: 0;
}

.zbs-post-category {
    color: var(--zl-accent, #99a3a3);

    display: block;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .09em;

    margin-bottom: 6px;
}

.zbs-post-content h4 {
    font-size: 14px !important;
    line-height: 1.35 !important;

    margin: 0 0 7px !important;

    border: 0 !important;
}

.zbs-post-content h4 a {
    color: #fff !important;

    transition: .3s ease;
}

.zbs-post-content h4 a:hover {
    color: var(--zl-accent, #99a3a3) !important;

    text-decoration: none;
}

.zbs-post-content time {
    color: rgba(255,255,255,.42);

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .06em;
}


/* Current article */

.zbs-post-item.is-current {
    opacity: .55;
}

.zbs-post-item.is-current .zbs-post-category::after {
    content: " · Reading";

    color: rgba(255,255,255,.55);
}


/* ============================================================
   PROJECT CTA
============================================================ */

.zbs-project-cta {
    position: relative;

    min-height: 430px;

    overflow: hidden;

    border-radius: 20px;

    margin-bottom: 28px;
}

.zbs-project-cta-bg,
.zbs-project-cta-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.zbs-project-cta-bg {
    background-size: cover;
    background-position: center;

    transition: transform .8s ease;
}

.zbs-project-cta:hover .zbs-project-cta-bg {
    transform: scale(1.05);
}

.zbs-project-cta-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5,8,5,.18) 0%,
            rgba(5,8,5,.92) 82%
        );
}

.zbs-project-cta-content {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 2;

    padding: 32px;
}

.zbs-project-small {
    display: block;

    color: var(--zl-accent, #99a3a3);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .14em;

    margin-bottom: 10px;
}

.zbs-project-cta h3 {
    color: #fff;

    font-size: 30px;
    line-height: 1.05;

    margin-bottom: 15px;
}

.zbs-project-cta p {
    color: rgba(255,255,255,.68);

    font-size: 12px;
    line-height: 1.7;

    margin-bottom: 24px;
}

.zbs-project-button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;

    gap: 20px;

    padding: 0 20px;

    background: var(--zl-accent, #99a3a3);

    color: #111 !important;

    border-radius: 100px;

    font-size: 11px;
    font-weight: 700;

    transition: .3s ease;
}

.zbs-project-button:hover {
    background: #fff;

    color: #111 !important;

    text-decoration: none;

    transform: translateY(-2px);
}


/* ============================================================
   SERVICE CARDS
============================================================ */

.zbs-service-card {
    background: #f5f3ed;

    border-radius: 20px;

    overflow: hidden;

    margin-bottom: 28px;
}

.zbs-service-image {
    height: 215px;

    overflow: hidden;
}

.zbs-service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}

.zbs-service-card:hover .zbs-service-image img {
    transform: scale(1.06);
}

.zbs-service-content {
    padding: 27px;
}

.zbs-service-label {
    display: block;

    color: #d98749;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .12em;

    margin-bottom: 8px;
}

.zbs-service-content h3 {
    color: #171a16 !important;

    font-size: 24px;

    margin: 0 0 12px !important;

    border: 0 !important;
}

.zbs-service-content p {
    color: #666b63 !important;

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 20px;
}

.zbs-service-content > a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #171a16 !important;

    font-size: 11px;
    font-weight: 700;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(17,17,17,.22);

    transition: .3s ease;
}

.zbs-service-content > a span {
    transition: .3s ease;
}

.zbs-service-content > a:hover {
    color: #d98749 !important;

    border-color: #d98749;

    text-decoration: none;
}

.zbs-service-content > a:hover span {
    transform: translateX(4px);
}


/* ============================================================
   CONTACT BLOCK
============================================================ */

.zbs-contact-block {
    background: var(--zl-accent, #99a3a3);

    border-radius: 20px;

    padding: 32px;
}

.zbs-contact-block .zbs-heading-kicker {
    color: rgba(17,17,17,.62);
}

.zbs-contact-block h3 {
    color: #111;

    font-size: 28px;
    line-height: 1.12;

    margin-bottom: 15px;
}

.zbs-contact-block > p {
    color: rgba(17,17,17,.66);

    font-size: 12px;
    line-height: 1.7;

    margin-bottom: 27px;
}

.zbs-contact-links {
    border-top: 1px solid rgba(17,17,17,.17);
}

.zbs-contact-links a {
    display: block;

    color: #111 !important;

    padding: 15px 0;

    border-bottom: 1px solid rgba(17,17,17,.17);

    font-size: 12px;

    transition: .3s ease;
}

.zbs-contact-links a span {
    display: block;

    color: rgba(17,17,17,.55);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .12em;

    margin-bottom: 3px;
}

.zbs-contact-links a:hover {
    padding-left: 6px;

    text-decoration: none;
}


/* ============================================================
   STICKY SIDEBAR
============================================================ */

@media (min-width: 992px) {

    .zbs-sidebar {
        position: sticky;

        top: 105px;
    }

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .zbs-block {
        padding: 24px;
    }

    .zbs-post-item {
        grid-template-columns: 85px 1fr;
    }

    .zbs-post-image {
        height: 85px;
    }

    .zbs-project-cta-content {
        padding: 25px;
    }

}


@media (max-width: 991px) {

    .zbs-sidebar {
        max-width: 700px;

        margin: 0 auto;
    }

    .zbs-post-item {
        grid-template-columns: 130px 1fr;
    }

    .zbs-post-image {
        height: 110px;
    }

}


@media (max-width: 575px) {

    .zbs-block {
        padding: 23px 19px;
    }

    .zbs-post-item {
        grid-template-columns: 90px 1fr;

        gap: 13px;
    }

    .zbs-post-image {
        height: 90px;
    }

    .zbs-post-content h4 {
        font-size: 13px !important;
    }

    .zbs-project-cta {
        min-height: 390px;
    }

    .zbs-project-cta-content {
        padding: 25px 22px;
    }

    .zbs-project-cta h3 {
        font-size: 27px;
    }

}

/* ============================================================
   ZIPLORD SINGLE BLOG PAGE
============================================================ */

.single-blog-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.single-blog-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;
}

.single-blog-header header,
.single-blog-header .site-navbar,
.single-blog-header .site-navbar-wrap {
    background: transparent !important;
}

.single-blog-header .site-navbar {
    position: relative !important;
}

.single-blog-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.single-blog-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.zsb-hero {
    position: relative;

    min-height: 790px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zsb-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 10, 7, .94) 0%,
            rgba(7, 10, 7, .68) 48%,
            rgba(7, 10, 7, .16) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.92) 0%,
            transparent 60%
        );
}

.zsb-hero-container {
    position: relative;

    z-index: 2;

    padding-top: 190px;
    padding-bottom: 155px;
}


/* CATEGORY */

.zsb-category {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: var(--zl-accent);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .15em;
}

.zsb-category::before {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--zl-accent);
}


/* TITLE */

.zsb-hero-title {
    max-width: 1000px;

    margin: 0;

    color: #fff;

    font-size: clamp(65px, 8vw, 115px);
    line-height: .9;

    letter-spacing: -.055em;
}

.zsb-hero-title span {
    color: var(--zl-accent);
}


/* INTRO */

.zsb-hero-intro {
    max-width: 650px;

    margin-top: 32px;

    color: rgba(255,255,255,.72) !important;

    font-size: 19px;
    line-height: 1.75 !important;
}


/* META */

.zsb-hero-meta {
    display: flex;

    gap: 55px;

    margin-top: 45px;
}

.zsb-hero-meta > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.zsb-hero-meta span {
    color: rgba(255,255,255,.42);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .13em;
}

.zsb-hero-meta strong {
    color: #fff;

    font-size: 12px;
    font-weight: 500;
}


/* ============================================================
   BREADCRUMB
============================================================ */

.zsb-hero-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 3;

    background: rgba(8,11,8,.28);

    border-top: 1px solid rgba(255,255,255,.15);

    backdrop-filter: blur(12px);
}

.zsb-breadcrumb {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 14px;

    font-size: 11px;
}

.zsb-breadcrumb a {
    color: #fff;
}

.zsb-breadcrumb a:hover {
    color: var(--zl-accent);

    text-decoration: none;
}

.zsb-breadcrumb span {
    color: rgba(255,255,255,.45);
}


/* ============================================================
   ARTICLE SECTION
============================================================ */

.zsb-article-section {
    background: #f5f3ed;

    color: #1a1d18;
}


/* ============================================================
   FEATURE IMAGE
============================================================ */

.zsb-feature-image {
    position: relative;

    height: 680px;

    overflow: hidden;

    border-radius: 24px;

    margin-bottom: 100px;
}

.zsb-feature-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.zsb-feature-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(0,0,0,.58) 100%
        );
}

.zsb-image-caption {
    position: absolute;

    z-index: 2;

    left: 35px;
    bottom: 30px;

    color: rgba(255,255,255,.82);

    font-size: 11px;
}

.zsb-image-caption span {
    display: block;

    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .12em;

    margin-bottom: 5px;
}


/* ============================================================
   CONTENT LAYOUT
============================================================ */

.zsb-content-layout {
    align-items: flex-start;
}


/* ============================================================
   ARTICLE TYPOGRAPHY
============================================================ */

.zsb-article {
    padding-right: 45px;
}

.zsb-article > p,
.zsb-article-block > p {
    max-width: 760px;

    color: #555b53;

    font-size: 16px;
    line-height: 1.95;

    margin-bottom: 27px;
}

.zsb-lead {
    color: #1c201a !important;

    font-size: 26px !important;
    line-height: 1.6 !important;

    font-weight: 500;

    margin-bottom: 35px !important;
}


/* ============================================================
   ARTICLE BLOCK
============================================================ */

.zsb-article-block {
    position: relative;

    margin-top: 90px;

    padding-top: 40px;

    border-top: 1px solid rgba(17,17,17,.13);
}

.zsb-section-number {
    display: block;

    color: #d98749;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .12em;

    margin-bottom: 15px;
}

.zsb-article-block h2 {
    max-width: 700px;

    color: #171a16;

    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.08;

    letter-spacing: -.035em;

    margin: 0 0 35px;
}


/* ============================================================
   PULL QUOTE
============================================================ */

.zsb-pull-quote {
    position: relative;

    border: 0;

    margin: 55px 0;

    padding: 45px 40px 45px 55px;

    background: #191d18;

    border-radius: 18px;

    color: #fff;

    font-size: 26px;
    line-height: 1.55;

    font-weight: 500;
}

.zsb-pull-quote::before {
    content: "“";

    position: absolute;

    left: 20px;
    top: 20px;

    color: var(--zl-accent);

    font-family: Georgia, serif;

    font-size: 55px;
    line-height: 1;
}


/* ============================================================
   PROCESS LIST
============================================================ */

.zsb-process-list {
    margin: 45px 0 55px;

    border-top: 1px solid rgba(17,17,17,.13);
}

.zsb-process-item {
    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 22px;

    padding: 32px 0;

    border-bottom: 1px solid rgba(17,17,17,.13);
}

.zsb-process-count {
    color: #d98749;

    font-size: 10px;
    font-weight: 700;

    padding-top: 7px;
}

.zsb-process-item h3 {
    color: #171a16;

    font-size: 24px;
    line-height: 1.25;

    margin: 0 0 10px;
}

.zsb-process-item p {
    color: #62675f;

    font-size: 14px;
    line-height: 1.8;

    margin: 0;

    max-width: 650px;
}


/* ============================================================
   ARTICLE FOOTER
============================================================ */

.zsb-article-footer {
    margin-top: 80px;

    padding: 30px 0;

    border-top: 1px solid rgba(17,17,17,.13);
    border-bottom: 1px solid rgba(17,17,17,.13);

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;
}


/* TAGS */

.zsb-tags {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}

.zsb-tags > span,
.zsb-share > span {
    color: #8a8e86;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .12em;

    margin-right: 5px;
}

.zsb-tags a {
    display: inline-flex;

    padding: 7px 12px;

    background: #e8e5dc;

    border-radius: 100px;

    color: #4b5048;

    font-size: 9px;

    transition: .3s ease;
}

.zsb-tags a:hover {
    background: #d98749;

    color: #fff;

    text-decoration: none;
}


/* SHARE */

.zsb-share {
    display: flex;

    align-items: center;

    gap: 8px;
}

.zsb-share a {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(17,17,17,.15);

    border-radius: 50%;

    color: #1a1d18;

    font-size: 12px;

    transition: .3s ease;
}

.zsb-share a:hover {
    background: #171a16;

    color: #fff;

    border-color: #171a16;

    text-decoration: none;
}


/* ============================================================
   BACK LINK
============================================================ */

.zsb-back-blog {
    margin-top: 40px;
}

.zsb-back-blog a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #171a16;

    font-size: 12px;
    font-weight: 700;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(17,17,17,.25);

    transition: .3s ease;
}

.zsb-back-blog a span {
    transition: .3s ease;
}

.zsb-back-blog a:hover {
    color: #d98749;

    border-color: #d98749;

    text-decoration: none;
}

.zsb-back-blog a:hover span {
    transform: translateX(-4px);
}


/* ============================================================
   SIDEBAR OVERRIDE
   Sidebar is dark while article background is light.
============================================================ */

.zsb-content-layout .zbs-sidebar {
    margin-top: 0;
}


/* ============================================================
   PROJECT CTA
============================================================ */

.zsb-project-cta {
    background: var(--zl-accent);

    padding: 110px 0;
}

.zsb-project-cta-inner {
    display: grid;

    grid-template-columns: 1fr .75fr;

    gap: 100px;

    align-items: end;
}

.zsb-project-cta .zl-section-kicker {
    color: #111;
}

.zsb-project-cta h2 {
    color: #111;

    font-size: clamp(50px, 6vw, 82px);
    line-height: .95;

    margin: 0;
}

.zsb-project-cta h2 span {
    color: #fff;
}

.zsb-project-cta-content > p {
    color: rgba(17,17,17,.7);

    font-size: 16px;
    line-height: 1.75;

    margin-bottom: 30px;
}

.zsb-project-actions {
    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;
}

.zsb-whatsapp-link {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #111;

    font-size: 12px;
    font-weight: 700;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(17,17,17,.35);

    transition: .3s ease;
}

.zsb-whatsapp-link:hover {
    color: #fff;

    border-color: #fff;

    text-decoration: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .zsb-article {
        padding-right: 20px;
    }

}


@media (max-width: 991px) {

    .zsb-hero {
        min-height: 720px;
    }

    .zsb-feature-image {
        height: 580px;

        margin-bottom: 70px;
    }

    .zsb-article {
        padding-right: 0;

        margin-bottom: 80px;
    }

    .zsb-project-cta-inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}


@media (max-width: 767px) {

    /* HERO */

    .zsb-hero {
        min-height: 680px;

        background-position: center;
    }

    .zsb-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.94) 0%,
                rgba(7,10,7,.57) 100%
            );
    }

    .zsb-hero-container {
        padding-top: 155px;
        padding-bottom: 130px;
    }

    .zsb-hero-title {
        font-size: 51px;

        line-height: .97;
    }

    .zsb-hero-intro {
        font-size: 16px;
    }

    .zsb-hero-meta {
        gap: 25px;

        flex-wrap: wrap;
    }


    /* BREADCRUMB */

    .zsb-breadcrumb {
        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    /* IMAGE */

    .zsb-feature-image {
        height: 430px;

        border-radius: 18px;

        margin-bottom: 55px;
    }

    .zsb-image-caption {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }


    /* ARTICLE */

    .zsb-lead {
        font-size: 21px !important;
    }

    .zsb-article > p,
    .zsb-article-block > p {
        font-size: 15px;
    }

    .zsb-article-block {
        margin-top: 70px;
    }

    .zsb-article-block h2 {
        font-size: 36px;
    }


    /* QUOTE */

    .zsb-pull-quote {
        padding: 38px 25px 38px 45px;

        font-size: 21px;
    }


    /* PROCESS */

    .zsb-process-item {
        grid-template-columns: 38px 1fr;

        gap: 15px;
    }

    .zsb-process-item h3 {
        font-size: 21px;
    }


    /* ARTICLE FOOTER */

    .zsb-article-footer {
        align-items: flex-start;

        flex-direction: column;
    }


    /* CTA */

    .zsb-project-cta {
        padding: 80px 0;
    }

    .zsb-project-cta h2 {
        font-size: 49px;
    }

}


@media (max-width: 480px) {

    .zsb-hero-title {
        font-size: 44px;
    }

    .zsb-feature-image {
        height: 360px;
    }

    .zsb-hero-meta {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .zsb-pull-quote {
        padding: 35px 22px;

        font-size: 19px;
    }

    .zsb-pull-quote::before {
        display: none;
    }

}

/* ============================================================
   ZIPLORD MODERN SERVICES PAGE
============================================================ */

.services-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.services-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;
}

.services-header header,
.services-header .site-navbar,
.services-header .site-navbar-wrap {
    background: transparent !important;
}

.services-header .site-navbar {
    position: relative !important;
}

.services-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.services-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.zs-hero {
    position: relative;

    min-height: 750px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zs-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.94) 0%,
            rgba(7,10,7,.63) 50%,
            rgba(7,10,7,.15) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.9) 0%,
            transparent 60%
        );
}

.zs-hero-container {
    position: relative;

    z-index: 2;

    padding-top: 190px;
    padding-bottom: 150px;
}

.zs-hero-title {
    color: #fff;

    font-size: clamp(64px, 8vw, 112px);
    line-height: .9;

    letter-spacing: -.055em;

    margin: 0;
}

.zs-hero-title span {
    color: var(--zl-accent);
}

.zs-hero-copy {
    max-width: 650px;

    margin-top: 34px;

    color: rgba(255,255,255,.73) !important;

    font-size: 19px;
    line-height: 1.75 !important;
}


/* Breadcrumb */

.zs-hero-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 3;

    border-top: 1px solid rgba(255,255,255,.15);

    background: rgba(8,11,8,.28);

    backdrop-filter: blur(12px);
}

.zs-breadcrumb {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 15px;

    font-size: 12px;
}

.zs-breadcrumb a {
    color: #fff;
}

.zs-breadcrumb a:hover {
    color: var(--zl-accent);

    text-decoration: none;
}

.zs-breadcrumb span {
    color: rgba(255,255,255,.5);
}


/* ============================================================
   INTRO
============================================================ */

.zs-intro {
    background: var(--zl-bg);
}


/* Capability strip */

.zs-capability-strip {
    margin-top: 90px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid var(--zl-border);
    border-bottom: 1px solid var(--zl-border);
}

.zs-capability-strip > div {
    min-height: 175px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px;

    border-right: 1px solid var(--zl-border);
}

.zs-capability-strip > div:last-child {
    border-right: 0;
}

.zs-capability-strip span {
    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;

    margin-bottom: 25px;
}

.zs-capability-strip strong {
    color: #fff;

    font-size: 20px;

    margin-bottom: 5px;
}

.zs-capability-strip small {
    color: var(--zl-muted);

    font-size: 11px;
}


/* ============================================================
   SERVICES
============================================================ */

.zs-services {
    background: var(--zl-bg-light);
}

.zs-services .zl-section-title {
    color: var(--zl-dark-text);
}

.zs-services .zl-section-title span {
    color: var(--zl-orange);
}

.zs-services .zl-section-kicker {
    color: var(--zl-orange);
}

.zs-services .zl-section-heading-copy p {
    color: #62685f;
}


/* LIST */

.zs-services-list {
    border-top: 1px solid rgba(17,17,17,.15);
}

.zs-service-row {
    display: grid;

    grid-template-columns:
        65px
        minmax(260px, 1fr)
        minmax(300px, .85fr)
        48px;

    gap: 30px;

    align-items: center;

    padding: 37px 0;

    border-bottom: 1px solid rgba(17,17,17,.15);

    transition: .35s ease;
}

.zs-service-row:hover {
    padding-left: 14px;
}


/* Number */

.zs-service-number {
    color: var(--zl-orange);

    font-size: 10px;
    font-weight: 700;

    align-self: start;

    padding-top: 7px;
}


/* Main */

.zs-service-tag {
    display: block;

    color: #858a82;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .14em;

    margin-bottom: 8px;
}

.zs-service-main h3 {
    color: #171a16;

    font-size: 29px;
    line-height: 1.15;

    margin-bottom: 10px;
}

.zs-service-short {
    color: #62675f !important;

    font-size: 13px;

    margin: 0;

    max-width: 480px;
}


/* Description */

.zs-service-detail p {
    color: #686d65;

    font-size: 13px;
    line-height: 1.8;

    margin: 0;
}


/* Arrow */

.zs-service-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(17,17,17,.18);

    border-radius: 50%;

    color: #171a16;

    font-size: 18px;

    transition: .35s ease;
}

.zs-service-row:hover .zs-service-icon {
    background: var(--zl-orange);

    color: #fff;

    border-color: var(--zl-orange);

    transform: translate(3px, -3px);
}


/* Anchor offset */

#marketing-branding,
#maintenance-services {
    scroll-margin-top: 120px;
}


/* ============================================================
   PROCESS
============================================================ */

.zs-process {
    background: var(--zl-bg);
}

.zs-process-intro {
    position: sticky;

    top: 120px;
}


/* Step */

.zs-process-step {
    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 25px;

    padding: 38px 0;

    border-top: 1px solid var(--zl-border);
}

.zs-process-step:last-child {
    border-bottom: 1px solid var(--zl-border);
}

.zs-process-number {
    color: var(--zl-accent);

    font-size: 10px;
    font-weight: 700;

    padding-top: 7px;
}

.zs-process-label {
    display: block;

    color: var(--zl-muted);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .14em;

    margin-bottom: 9px;
}

.zs-process-step h3 {
    color: #fff;

    font-size: 29px;
    line-height: 1.25;

    margin-bottom: 10px;
}

.zs-process-step p {
    max-width: 570px;

    margin: 0;

    font-size: 14px;
}


/* ============================================================
   FEATURE IMAGE BREAK
============================================================ */

.zs-feature {
    position: relative;

    min-height: 700px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zs-feature-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.86),
            rgba(7,10,7,.28)
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.75),
            transparent 60%
        );
}

.zs-feature .container {
    position: relative;

    z-index: 2;
}

.zs-feature-content {
    max-width: 760px;

    padding: 100px 0;
}

.zs-feature-content h2 {
    color: #fff;

    font-size: clamp(50px, 6vw, 83px);
    line-height: .95;

    letter-spacing: -.045em;

    margin-bottom: 30px;
}

.zs-feature-content h2 span {
    color: var(--zl-accent);
}

.zs-feature-content p {
    max-width: 600px;

    color: rgba(255,255,255,.72);

    font-size: 17px;
}


/* ============================================================
   WHAT WE BUILD
============================================================ */

.zs-build {
    background: var(--zl-bg-soft);
}


/* Build card */

.zs-build-card {
    position: relative;

    display: block;

    height: 460px;

    overflow: hidden;

    border-radius: 18px;
}

.zs-build-card > img,
.zs-build-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.zs-build-card > img {
    object-fit: cover;

    transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.zs-build-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.82)
        );
}

.zs-build-content {
    position: absolute;

    z-index: 2;

    left: 26px;
    right: 26px;
    bottom: 27px;
}

.zs-build-content > span {
    display: block;

    color: var(--zl-accent);

    font-size: 9px;

    margin-bottom: 8px;
}

.zs-build-content h3 {
    color: #fff;

    font-size: 27px;

    margin: 0;
}

.zs-build-card:hover > img {
    transform: scale(1.07);
}

.zs-build-card:hover {
    text-decoration: none;
}


/* ============================================================
   FINAL CTA ADDITION
============================================================ */

.zs-contact-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #111;

    font-size: 13px;
    font-weight: 700;

    border-bottom: 1px solid rgba(17,17,17,.35);

    padding-bottom: 6px;

    transition: .3s ease;
}

.zs-contact-link:hover {
    color: #fff;

    border-color: #fff;

    text-decoration: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .zs-service-row {
        grid-template-columns:
            50px
            minmax(240px, 1fr)
            minmax(250px, .8fr)
            42px;

        gap: 20px;
    }

    .zs-service-main h3 {
        font-size: 25px;
    }

}


@media (max-width: 991px) {

    .zs-hero {
        min-height: 680px;
    }

    .zs-capability-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .zs-capability-strip > div {
        border-bottom: 1px solid var(--zl-border);
    }

    .zs-capability-strip > div:nth-child(even) {
        border-right: 0;
    }

    .zs-capability-strip > div:last-child {
        grid-column: span 2;
        border-bottom: 0;
    }

    .zs-service-row {
        grid-template-columns: 45px 1fr 40px;
    }

    .zs-service-detail {
        grid-column: 2 / 3;
    }

    .zs-service-icon {
        grid-column: 3;
        grid-row: 1;
    }

    .zs-process-intro {
        position: static;
    }

}


@media (max-width: 767px) {

    /* HERO */

    .zs-hero {
        min-height: 640px;
    }

    .zs-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.94),
                rgba(7,10,7,.55)
            );
    }

    .zs-hero-container {
        padding-top: 155px;
        padding-bottom: 125px;
    }

    .zs-hero-title {
        font-size: 51px;
        line-height: .98;
    }

    .zs-hero-copy {
        font-size: 16px;
    }


    /* CAPABILITY */

    .zs-capability-strip {
        grid-template-columns: 1fr;

        margin-top: 60px;
    }

    .zs-capability-strip > div,
    .zs-capability-strip > div:nth-child(even),
    .zs-capability-strip > div:last-child {
        grid-column: auto;

        border-right: 0;
        border-bottom: 1px solid var(--zl-border);

        min-height: 130px;
    }

    .zs-capability-strip > div:last-child {
        border-bottom: 0;
    }


    /* SERVICES */

    .zs-service-row {
        grid-template-columns: 32px 1fr 36px;

        gap: 12px;

        padding: 30px 0;
    }

    .zs-service-row:hover {
        padding-left: 0;
    }

    .zs-service-main h3 {
        font-size: 23px;
    }

    .zs-service-short {
        font-size: 12px;
    }

    .zs-service-detail {
        grid-column: 2 / 4;

        padding-right: 10px;
    }

    .zs-service-detail p {
        font-size: 12px;
    }

    .zs-service-icon {
        width: 34px;
        height: 34px;
    }


    /* PROCESS */

    .zs-process-step {
        grid-template-columns: 38px 1fr;

        gap: 15px;
    }

    .zs-process-step h3 {
        font-size: 23px;
    }


    /* FEATURE */

    .zs-feature {
        min-height: 570px;
    }

    .zs-feature-content {
        padding: 75px 0;
    }

    .zs-feature-content h2 {
        font-size: 48px;
    }


    /* BUILD */

    .zs-build-card {
        height: 420px;
    }

}


@media (max-width: 480px) {

    .zs-hero-title {
        font-size: 44px;
    }

    .zs-feature-content h2 {
        font-size: 43px;
    }

    .zs-build-card {
        height: 380px;
    }

}

/* ============================================================
   ZIPLORD MODERN PRODUCTS PAGE
============================================================ */

.products-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.products-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;
}

.products-header header,
.products-header .site-navbar,
.products-header .site-navbar-wrap {
    background: transparent !important;
}

.products-header .site-navbar {
    position: relative !important;
}

.products-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.products-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.zp-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zp-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.95) 0%,
            rgba(7,10,7,.64) 50%,
            rgba(7,10,7,.14) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.92) 0%,
            transparent 60%
        );
}

.zp-hero-container {
    position: relative;

    z-index: 2;

    padding-top: 190px;
    padding-bottom: 150px;
}

.zp-hero-title {
    color: #fff;

    font-size: clamp(64px, 8vw, 112px);
    line-height: .9;

    letter-spacing: -.055em;

    margin: 0;
}

.zp-hero-title span {
    color: var(--zl-accent);
}

.zp-hero-copy {
    max-width: 660px;

    margin-top: 34px;

    color: rgba(255,255,255,.73) !important;

    font-size: 19px;
    line-height: 1.75 !important;
}


/* Breadcrumb */

.zp-hero-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 3;

    border-top: 1px solid rgba(255,255,255,.15);

    background: rgba(8,11,8,.28);

    backdrop-filter: blur(12px);
}

.zp-breadcrumb {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 15px;

    font-size: 12px;
}

.zp-breadcrumb a {
    color: #fff;
}

.zp-breadcrumb a:hover {
    color: var(--zl-accent);

    text-decoration: none;
}

.zp-breadcrumb span {
    color: rgba(255,255,255,.5);
}


/* ============================================================
   INTRO
============================================================ */

.zp-intro {
    background: var(--zl-bg);
}


/* ============================================================
   PRODUCT NAVIGATION
============================================================ */

.zp-product-nav {
    position: sticky;
    top: 0;

    z-index: 100;

    background: rgba(16,19,16,.94);

    border-top: 1px solid var(--zl-border);
    border-bottom: 1px solid var(--zl-border);

    backdrop-filter: blur(15px);
}

.zp-product-nav-inner {
    display: flex;

    overflow-x: auto;

    scrollbar-width: none;
}

.zp-product-nav-inner::-webkit-scrollbar {
    display: none;
}

.zp-product-nav-inner a {
    flex: 0 0 auto;

    min-height: 67px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 0 20px;

    border-right: 1px solid var(--zl-border);

    color: rgba(255,255,255,.72);

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;

    transition: .3s ease;
}

.zp-product-nav-inner a span {
    color: var(--zl-accent);

    font-size: 8px;
}

.zp-product-nav-inner a:hover {
    color: #fff;

    background: rgba(255,255,255,.05);

    text-decoration: none;
}


/* ============================================================
   PRODUCTS
============================================================ */

.zp-products {
    background: var(--zl-bg-light);
}

.zp-product-section {
    padding: 115px 0;

    border-bottom: 1px solid rgba(17,17,17,.12);

    scroll-margin-top: 68px;
}

.zp-product-section:nth-child(even) {
    background: #ece9e0;
}


/* GRID */

.zp-product-grid {
    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 90px;

    align-items: center;
}

.zp-product-reverse .zp-product-image {
    order: 2;
}

.zp-product-reverse .zp-product-content {
    order: 1;
}


/* ============================================================
   PRODUCT IMAGE
============================================================ */

.zp-product-image {
    position: relative;

    display: block;

    height: 600px;

    overflow: hidden;

    border-radius: 22px;
}

.zp-product-image > img,
.zp-product-image-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.zp-product-image > img {
    object-fit: cover;

    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.zp-product-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04),
            rgba(0,0,0,.68)
        );
}

.zp-product-image:hover > img {
    transform: scale(1.055);
}


/* Number */

.zp-product-image-number {
    position: absolute;

    top: 28px;
    right: 28px;

    z-index: 2;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(13,16,13,.65);

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

    backdrop-filter: blur(10px);

    color: #fff;

    font-size: 10px;
}


/* Label */

.zp-product-image-label {
    position: absolute;

    left: 32px;
    bottom: 30px;

    z-index: 2;
}

.zp-product-image-label span {
    display: block;

    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .13em;

    margin-bottom: 5px;
}

.zp-product-image-label strong {
    color: rgba(255,255,255,.8);

    font-size: 11px;
    font-weight: 500;
}


/* ============================================================
   PRODUCT CONTENT
============================================================ */

.zp-product-content {
    max-width: 540px;
}

.zp-product-category {
    display: block;

    color: var(--zl-orange);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .14em;

    margin-bottom: 18px;
}

.zp-product-content h2 {
    color: #171a16;

    font-size: clamp(45px, 5vw, 70px);
    line-height: .97;

    letter-spacing: -.045em;

    margin-bottom: 25px;
}

.zp-product-intro {
    color: #30352e !important;

    font-size: 20px !important;
    line-height: 1.55 !important;

    font-weight: 500;

    margin-bottom: 24px;
}

.zp-product-description {
    color: #62685f !important;

    font-size: 14px;

    line-height: 1.85 !important;

    margin-bottom: 35px;
}


/* ============================================================
   ACTIONS
============================================================ */

.zp-product-actions {
    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;
}

.zp-enquire-link,
.zp-contact-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #171a16;

    font-size: 12px;
    font-weight: 700;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(17,17,17,.3);

    transition: .3s ease;
}

.zp-enquire-link:hover,
.zp-contact-link:hover {
    color: var(--zl-orange);

    border-color: var(--zl-orange);

    text-decoration: none;
}


/* ============================================================
   DESTINATION SECTION
============================================================ */

.zp-destination {
    background: var(--zl-bg);
}

.zp-destination-grid {
    margin-top: 70px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--zl-border);
    border-bottom: 1px solid var(--zl-border);
}

.zp-destination-card {
    min-height: 350px;

    padding: 45px 38px;

    border-right: 1px solid var(--zl-border);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.zp-destination-card:last-child {
    border-right: 0;
}

.zp-destination-number {
    display: block;

    color: var(--zl-accent);

    font-size: 10px;

    margin-bottom: auto;
}

.zp-destination-card h3 {
    color: #fff;

    font-size: 28px;

    margin-bottom: 14px;
}

.zp-destination-card p {
    color: var(--zl-muted);

    font-size: 13px;

    margin: 0;
}


/* ============================================================
   PROCESS CTA
============================================================ */

.zp-process-cta {
    position: relative;

    min-height: 700px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zp-process-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.91),
            rgba(7,10,7,.32)
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.86),
            transparent 62%
        );
}

.zp-process-cta .container {
    position: relative;

    z-index: 2;
}

.zp-process-content {
    max-width: 790px;

    padding: 105px 0;
}

.zp-process-content h2 {
    color: #fff;

    font-size: clamp(49px, 6vw, 82px);
    line-height: .95;

    letter-spacing: -.045em;

    margin-bottom: 30px;
}

.zp-process-content h2 span {
    color: var(--zl-accent);
}

.zp-process-content > p {
    max-width: 630px;

    color: rgba(255,255,255,.72);

    font-size: 17px;

    margin-bottom: 35px;
}

.zp-process-actions {
    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;
}

.zp-process-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255,255,255,.45);

    transition: .3s ease;
}

.zp-process-link:hover {
    color: var(--zl-accent);

    border-color: var(--zl-accent);

    text-decoration: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .zp-product-grid {
        gap: 60px;
    }

    .zp-product-image {
        height: 540px;
    }

}


@media (max-width: 991px) {

    .zp-hero {
        min-height: 680px;
    }

    .zp-product-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .zp-product-reverse .zp-product-image,
    .zp-product-reverse .zp-product-content {
        order: initial;
    }

    .zp-product-content {
        max-width: 700px;
    }

    .zp-product-image {
        height: 600px;
    }

    .zp-destination-grid {
        grid-template-columns: 1fr;
    }

    .zp-destination-card {
        min-height: 250px;

        border-right: 0;
        border-bottom: 1px solid var(--zl-border);
    }

    .zp-destination-card:last-child {
        border-bottom: 0;
    }

}


@media (max-width: 767px) {

    /* HERO */

    .zp-hero {
        min-height: 640px;
    }

    .zp-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.94),
                rgba(7,10,7,.56)
            );
    }

    .zp-hero-container {
        padding-top: 155px;
        padding-bottom: 125px;
    }

    .zp-hero-title {
        font-size: 50px;
        line-height: .98;
    }

    .zp-hero-copy {
        font-size: 16px;
    }


    /* PRODUCT NAV */

    .zp-product-nav-inner a {
        min-height: 58px;

        padding: 0 15px;
    }


    /* PRODUCTS */

    .zp-product-section {
        padding: 75px 0;
    }

    .zp-product-image {
        height: 470px;

        border-radius: 18px;
    }

    .zp-product-image-number {
        top: 20px;
        right: 20px;
    }

    .zp-product-image-label {
        left: 22px;
        bottom: 22px;
    }

    .zp-product-content h2 {
        font-size: 43px;
    }

    .zp-product-intro {
        font-size: 18px !important;
    }


    /* DESTINATION */

    .zp-destination-grid {
        margin-top: 50px;
    }


    /* PROCESS */

    .zp-process-cta {
        min-height: 600px;
    }

    .zp-process-content {
        padding: 80px 0;
    }

    .zp-process-content h2 {
        font-size: 48px;
    }

}


@media (max-width: 480px) {

    .zp-hero-title {
        font-size: 43px;
    }

    .zp-product-image {
        height: 400px;
    }

    .zp-product-content h2 {
        font-size: 38px;
    }

    .zp-product-actions {
        align-items: flex-start;

        flex-direction: column;
    }

    .zp-process-content h2 {
        font-size: 42px;
    }

}

/* ============================================================
   ZIPLORD PRODUCT DETAIL PAGE
============================================================ */

.product-single-page {
    background: var(--zl-bg);
    color: #fff;
    overflow-x: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.product-single-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;
}

.product-single-header header,
.product-single-header .site-navbar,
.product-single-header .site-navbar-wrap {
    background: transparent !important;
}

.product-single-header .site-navbar {
    position: relative !important;
}

.product-single-header .site-navigation .site-menu > li > a {
    color: #fff !important;
}

.product-single-header .site-navigation .site-menu > li > a:hover {
    color: var(--zl-accent) !important;
}


/* ============================================================
   HERO
============================================================ */

.zpd-hero {
    position: relative;

    min-height: 790px;

    display: flex;
    align-items: flex-end;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zpd-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.95) 0%,
            rgba(7,10,7,.65) 48%,
            rgba(7,10,7,.15) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.91) 0%,
            transparent 58%
        );
}

.zpd-hero-container {
    position: relative;

    z-index: 2;

    padding-top: 190px;
    padding-bottom: 155px;
}


/* Label */

.zpd-product-label {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--zl-accent);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .15em;

    margin-bottom: 22px;
}

.zpd-product-label::before {
    content: "";

    width: 30px;
    height: 1px;

    background: var(--zl-accent);
}


/* Heading */

.zpd-hero-title {
    color: #fff;

    font-size: clamp(68px, 9vw, 125px);
    line-height: .86;

    letter-spacing: -.06em;

    margin: 0;
}

.zpd-hero-title span {
    color: var(--zl-accent);
}

.zpd-hero-copy {
    max-width: 660px;

    margin-top: 35px;

    color: rgba(255,255,255,.74) !important;

    font-size: 19px;
    line-height: 1.75 !important;
}


/* Actions */

.zpd-hero-actions {
    display: flex;
    align-items: center;

    gap: 30px;

    flex-wrap: wrap;

    margin-top: 40px;
}

.zpd-hero-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255,255,255,.42);

    transition: .3s ease;
}

.zpd-hero-link:hover {
    color: var(--zl-accent);

    border-color: var(--zl-accent);

    text-decoration: none;
}


/* Breadcrumb */

.zpd-hero-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 3;

    width: 100%;

    background: rgba(8,11,8,.28);

    border-top: 1px solid rgba(255,255,255,.15);

    backdrop-filter: blur(12px);
}

.zpd-breadcrumb {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 14px;

    color: rgba(255,255,255,.45);

    font-size: 11px;
}

.zpd-breadcrumb a {
    color: #fff;
}

.zpd-breadcrumb a:hover {
    color: var(--zl-accent);

    text-decoration: none;
}


/* ============================================================
   INTRO
============================================================ */

.zpd-intro {
    background: var(--zl-bg);
}


/* Principles */

.zpd-principles {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 85px;

    border-top: 1px solid var(--zl-border);
    border-bottom: 1px solid var(--zl-border);
}

.zpd-principle {
    min-height: 230px;

    display: flex;
    flex-direction: column;

    padding: 35px;

    border-right: 1px solid var(--zl-border);
}

.zpd-principle:last-child {
    border-right: 0;
}

.zpd-principle > span {
    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;

    margin-bottom: auto;
}

.zpd-principle strong {
    color: #fff;

    font-size: 26px;

    margin-bottom: 10px;
}

.zpd-principle p {
    max-width: 280px;

    color: var(--zl-muted);

    font-size: 12px;

    margin: 0;
}


/* ============================================================
   FEATURE IMAGE
============================================================ */

.zpd-feature-image {
    position: relative;

    height: 760px;

    overflow: hidden;
}

.zpd-feature-image > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.zpd-feature-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,7,.78),
            rgba(7,10,7,.12)
        ),
        linear-gradient(
            0deg,
            rgba(7,10,7,.7),
            transparent 55%
        );
}

.zpd-feature-image .container {
    position: relative;

    height: 100%;

    z-index: 2;
}

.zpd-feature-caption {
    position: absolute;

    left: 15px;
    bottom: 80px;
}

.zpd-feature-caption > span {
    display: block;

    color: var(--zl-accent);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .14em;

    margin-bottom: 15px;
}

.zpd-feature-caption h2 {
    max-width: 750px;

    color: #fff;

    font-size: clamp(50px, 6vw, 82px);
    line-height: .95;

    letter-spacing: -.045em;

    margin: 0;
}

.zpd-feature-caption h2 strong {
    color: var(--zl-accent);

    font-weight: inherit;
}


/* ============================================================
   COMPONENTS
============================================================ */

.zpd-components {
    background: var(--zl-bg-soft);
}

.zpd-components-intro {
    position: sticky;

    top: 115px;
}


/* Row */

.zpd-component-row {
    display: grid;

    grid-template-columns: 60px 1fr;

    gap: 25px;

    padding: 36px 0;

    border-top: 1px solid var(--zl-border);
}

.zpd-component-row:last-child {
    border-bottom: 1px solid var(--zl-border);
}

.zpd-component-number {
    color: var(--zl-accent);

    font-size: 10px;
    font-weight: 700;

    padding-top: 7px;
}

.zpd-component-label {
    display: block;

    color: var(--zl-muted);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .15em;

    margin-bottom: 8px;
}

.zpd-component-row h3 {
    color: #fff;

    font-size: 27px;
    line-height: 1.2;

    margin-bottom: 10px;
}

.zpd-component-row p {
    max-width: 590px;

    color: var(--zl-muted);

    font-size: 13px;
    line-height: 1.8;

    margin: 0;
}


/* ============================================================
   VALUE
============================================================ */

.zpd-value {
    background: var(--zl-bg-light);
}

.zpd-value .zl-section-title {
    color: var(--zl-dark-text);
}

.zpd-value .zl-section-title span {
    color: var(--zl-orange);
}

.zpd-value .zl-section-kicker {
    color: var(--zl-orange);
}

.zpd-value .zl-section-heading-copy p {
    color: #62675f;
}


/* Cards */

.zpd-value-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin-top: 70px;

    border-top: 1px solid rgba(17,17,17,.14);
    border-bottom: 1px solid rgba(17,17,17,.14);
}

.zpd-value-card {
    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding: 35px 28px;

    border-right: 1px solid rgba(17,17,17,.14);
}

.zpd-value-card:last-child {
    border-right: 0;
}

.zpd-value-card > span {
    display: block;

    color: var(--zl-orange);

    font-size: 9px;

    margin-bottom: auto;
}

.zpd-value-card h3 {
    color: #171a16;

    font-size: 25px;

    margin-bottom: 13px;
}

.zpd-value-card p {
    color: #686d65;

    font-size: 12px;

    margin: 0;
}


/* ============================================================
   GALLERY
============================================================ */

.zpd-gallery-section {
    background: var(--zl-bg-soft);
}


/* Grid */

.zpd-gallery {
    display: grid;

    grid-template-columns: repeat(12, 1fr);

    grid-auto-rows: 230px;

    gap: 12px;
}

.zpd-gallery-item {
    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 14px;
}


/* Large */

.zpd-gallery-item-1 {
    grid-column: span 8;
    grid-row: span 2;
}

.zpd-gallery-item-2 {
    grid-column: span 4;
}

.zpd-gallery-item-3 {
    grid-column: span 4;
}

.zpd-gallery-item-4,
.zpd-gallery-item-5,
.zpd-gallery-item-6,
.zpd-gallery-item-7 {
    grid-column: span 3;
}


/* Second large row */

.zpd-gallery-item-8 {
    grid-column: span 4;
}

.zpd-gallery-item-9 {
    grid-column: span 4;
}

.zpd-gallery-item-10 {
    grid-column: span 4;
}


/* Images */

.zpd-gallery-item img,
.zpd-gallery-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.zpd-gallery-item img {
    object-fit: cover;

    transition: transform .65s cubic-bezier(.2,.8,.2,1);
}

.zpd-gallery-overlay {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5,8,5,.55)
        );

    opacity: .65;

    transition: .3s ease;
}

.zpd-gallery-item:hover img {
    transform: scale(1.06);
}

.zpd-gallery-item:hover .zpd-gallery-overlay {
    opacity: 1;
}


/* Number */

.zpd-gallery-number {
    position: absolute;

    left: 18px;
    bottom: 15px;

    color: rgba(255,255,255,.75);

    font-size: 9px;

    z-index: 2;
}


/* Plus */

.zpd-gallery-icon {
    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 2;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(12,15,12,.55);

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    backdrop-filter: blur(8px);

    color: #fff;

    font-size: 18px;

    transform: scale(.8);

    opacity: 0;

    transition: .3s ease;
}

.zpd-gallery-item:hover .zpd-gallery-icon {
    opacity: 1;

    transform: scale(1);
}


/* ============================================================
   MAGNIFIC POPUP
============================================================ */

.mfp-bg {
    background: #090c09;

    opacity: .96;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #fff;
}

.mfp-title {
    color: rgba(255,255,255,.7);

    font-size: 11px;
}

.mfp-counter {
    color: rgba(255,255,255,.5);
}


/* ============================================================
   RELATED PRODUCTS
============================================================ */

.zpd-related {
    background: var(--zl-bg);
}

.zpd-related-card {
    position: relative;

    display: block;

    height: 470px;

    overflow: hidden;

    border-radius: 18px;
}

.zpd-related-card img,
.zpd-related-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.zpd-related-card img {
    object-fit: cover;

    transition: transform .65s ease;
}

.zpd-related-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03),
            rgba(0,0,0,.82)
        );
}

.zpd-related-card:hover img {
    transform: scale(1.06);
}

.zpd-related-content {
    position: absolute;

    left: 27px;
    right: 27px;
    bottom: 27px;

    z-index: 2;
}

.zpd-related-content > span {
    display: block;

    color: var(--zl-accent);

    font-size: 9px;

    margin-bottom: 8px;
}

.zpd-related-content h3 {
    color: #fff;

    font-size: 27px;

    margin-bottom: 8px;
}

.zpd-related-content p {
    color: rgba(255,255,255,.65);

    font-size: 12px;

    margin: 0;
}

.zpd-related-card:hover {
    text-decoration: none;
}


/* View all */

.zpd-all-products-link {
    margin-top: 28px;

    text-align: center;
}

.zpd-all-products-link a {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(255,255,255,.28);

    transition: .3s ease;
}

.zpd-all-products-link a:hover {
    color: var(--zl-accent);

    border-color: var(--zl-accent);

    text-decoration: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .zpd-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .zpd-value-card:nth-child(2) {
        border-right: 0;
    }

    .zpd-value-card:nth-child(-n+2) {
        border-bottom: 1px solid rgba(17,17,17,.14);
    }

}


@media (max-width: 991px) {

    .zpd-hero {
        min-height: 700px;
    }

    .zpd-components-intro {
        position: static;
    }

    .zpd-feature-image {
        height: 650px;
    }

    .zpd-gallery {
        grid-template-columns: repeat(2, 1fr);

        grid-auto-rows: 280px;
    }

    .zpd-gallery-item,
    .zpd-gallery-item-1,
    .zpd-gallery-item-2,
    .zpd-gallery-item-3,
    .zpd-gallery-item-4,
    .zpd-gallery-item-5,
    .zpd-gallery-item-6,
    .zpd-gallery-item-7,
    .zpd-gallery-item-8,
    .zpd-gallery-item-9,
    .zpd-gallery-item-10 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .zpd-gallery-item-1 {
        grid-column: span 2;

        grid-row: span 2;
    }

}


@media (max-width: 767px) {

    /* HERO */

    .zpd-hero {
        min-height: 660px;
    }

    .zpd-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(7,10,7,.94),
                rgba(7,10,7,.56)
            );
    }

    .zpd-hero-container {
        padding-top: 155px;
        padding-bottom: 125px;
    }

    .zpd-hero-title {
        font-size: 57px;

        line-height: .92;
    }

    .zpd-hero-copy {
        font-size: 16px;
    }


    /* PRINCIPLES */

    .zpd-principles {
        grid-template-columns: 1fr;

        margin-top: 60px;
    }

    .zpd-principle {
        min-height: 170px;

        border-right: 0;
        border-bottom: 1px solid var(--zl-border);
    }

    .zpd-principle:last-child {
        border-bottom: 0;
    }


    /* FEATURE */

    .zpd-feature-image {
        height: 560px;
    }

    .zpd-feature-caption {
        left: 15px;
        right: 15px;
        bottom: 55px;
    }

    .zpd-feature-caption h2 {
        font-size: 46px;
    }


    /* COMPONENTS */

    .zpd-component-row {
        grid-template-columns: 38px 1fr;

        gap: 14px;
    }

    .zpd-component-row h3 {
        font-size: 22px;
    }


    /* VALUE */

    .zpd-value-grid {
        grid-template-columns: 1fr;
    }

    .zpd-value-card {
        min-height: 240px;

        border-right: 0;
        border-bottom: 1px solid rgba(17,17,17,.14);
    }

    .zpd-value-card:nth-child(2) {
        border-right: 0;
    }

    .zpd-value-card:last-child {
        border-bottom: 0;
    }


    /* GALLERY */

    .zpd-gallery {
        grid-auto-rows: 220px;
    }

    .zpd-gallery-item-1 {
        grid-row: span 2;
    }


    /* RELATED */

    .zpd-related-card {
        height: 410px;
    }

}


@media (max-width: 575px) {

    .zpd-hero-title {
        font-size: 48px;
    }

    .zpd-hero-actions {
        align-items: flex-start;

        flex-direction: column;
    }

    .zpd-breadcrumb {
        overflow: hidden;

        white-space: nowrap;
    }

    .zpd-feature-image {
        height: 480px;
    }

    .zpd-feature-caption h2 {
        font-size: 40px;
    }

    .zpd-gallery {
        display: grid;

        grid-template-columns: 1fr;

        grid-auto-rows: 290px;
    }

    .zpd-gallery-item,
    .zpd-gallery-item-1 {
        grid-column: span 1;

        grid-row: span 1;
    }

}

/* ============================================================
   PRODUCT USE LIST
============================================================ */

.zpd-use-list {
    margin-top: 45px;

    border-top: 1px solid var(--zl-border);
}

.zpd-use-item {
    display: grid;

    grid-template-columns: 48px 1fr;

    align-items: center;

    gap: 15px;

    padding: 22px 0;

    border-bottom: 1px solid var(--zl-border);
}

.zpd-use-item span {
    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;
}

.zpd-use-item strong {
    color: #fff;

    font-size: 17px;
    font-weight: 500;
}

/* ============================================================
   SEVEN IMAGE PRODUCT GALLERY
============================================================ */

.zpd-gallery-seven .zpd-gallery-item-1 {
    grid-column: span 8;
    grid-row: span 2;
}

.zpd-gallery-seven .zpd-gallery-item-2 {
    grid-column: span 4;
}

.zpd-gallery-seven .zpd-gallery-item-3 {
    grid-column: span 4;
}

.zpd-gallery-seven .zpd-gallery-item-4,
.zpd-gallery-seven .zpd-gallery-item-5,
.zpd-gallery-seven .zpd-gallery-item-6,
.zpd-gallery-seven .zpd-gallery-item-7 {
    grid-column: span 3;
}


@media (max-width: 991px) {

    .zpd-gallery-seven .zpd-gallery-item-1,
    .zpd-gallery-seven .zpd-gallery-item-2,
    .zpd-gallery-seven .zpd-gallery-item-3,
    .zpd-gallery-seven .zpd-gallery-item-4,
    .zpd-gallery-seven .zpd-gallery-item-5,
    .zpd-gallery-seven .zpd-gallery-item-6,
    .zpd-gallery-seven .zpd-gallery-item-7 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .zpd-gallery-seven .zpd-gallery-item-1 {
        grid-column: span 2;
        grid-row: span 2;
    }

}


@media (max-width: 575px) {

    .zpd-gallery-seven .zpd-gallery-item-1,
    .zpd-gallery-seven .zpd-gallery-item-2,
    .zpd-gallery-seven .zpd-gallery-item-3,
    .zpd-gallery-seven .zpd-gallery-item-4,
    .zpd-gallery-seven .zpd-gallery-item-5,
    .zpd-gallery-seven .zpd-gallery-item-6,
    .zpd-gallery-seven .zpd-gallery-item-7 {
        grid-column: span 1;
        grid-row: span 1;
    }

}

/* ============================================================
   EIGHT IMAGE PRODUCT GALLERY
============================================================ */

.zpd-gallery-eight .zpd-gallery-item-1 {
    grid-column: span 8;
    grid-row: span 2;
}

.zpd-gallery-eight .zpd-gallery-item-2,
.zpd-gallery-eight .zpd-gallery-item-3 {
    grid-column: span 4;
}

.zpd-gallery-eight .zpd-gallery-item-4,
.zpd-gallery-eight .zpd-gallery-item-5 {
    grid-column: span 6;
}

.zpd-gallery-eight .zpd-gallery-item-6,
.zpd-gallery-eight .zpd-gallery-item-7,
.zpd-gallery-eight .zpd-gallery-item-8 {
    grid-column: span 4;
}


@media (max-width: 991px) {

    .zpd-gallery-eight .zpd-gallery-item-1,
    .zpd-gallery-eight .zpd-gallery-item-2,
    .zpd-gallery-eight .zpd-gallery-item-3,
    .zpd-gallery-eight .zpd-gallery-item-4,
    .zpd-gallery-eight .zpd-gallery-item-5,
    .zpd-gallery-eight .zpd-gallery-item-6,
    .zpd-gallery-eight .zpd-gallery-item-7,
    .zpd-gallery-eight .zpd-gallery-item-8 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .zpd-gallery-eight .zpd-gallery-item-1 {
        grid-column: span 2;
        grid-row: span 2;
    }

}


@media (max-width: 575px) {

    .zpd-gallery-eight .zpd-gallery-item-1,
    .zpd-gallery-eight .zpd-gallery-item-2,
    .zpd-gallery-eight .zpd-gallery-item-3,
    .zpd-gallery-eight .zpd-gallery-item-4,
    .zpd-gallery-eight .zpd-gallery-item-5,
    .zpd-gallery-eight .zpd-gallery-item-6,
    .zpd-gallery-eight .zpd-gallery-item-7,
    .zpd-gallery-eight .zpd-gallery-item-8 {
        grid-column: span 1;
        grid-row: span 1;
    }

}

/* ============================================================
   PROJECT METRICS
============================================================ */

.zl-project-metrics {
    position: relative;

    background: var(--zl-bg);

    padding: 35px 0 120px;

    overflow: hidden;
}

.zl-project-metrics-shell {
    position: relative;

    min-height: 390px;

    display: grid;
    grid-template-columns: 1.15fr .8fr .8fr;

    overflow: hidden;

    background: #99a3a3;

    border-radius: 18px;

    isolation: isolate;
}


/* ============================================================
   INTRO
============================================================ */

.zl-project-metrics-intro {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 65px 55px;

    background: #181c17;

    z-index: 2;
}


/* Angular cut into orange section */

.zl-project-metrics-intro::after {
    content: "";

    position: absolute;

    top: 0;
    right: -69px;

    width: 140px;
    height: 100%;

    background: #181c17;

    transform: skewX(-10deg);

    transform-origin: top;

    z-index: -1;
}


.zl-project-metrics-kicker {
    color: #99a3a3;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .16em;

    margin-bottom: 22px;
}


.zl-project-metrics-intro h2 {
    color: #fff;

    font-size: clamp(43px, 4.5vw, 65px);

    line-height: .97;

    letter-spacing: -.045em;

    margin: 0 0 24px;
}

.zl-project-metrics-intro h2 span {
    color: #99a3a3;
}


.zl-project-metrics-intro p {
    max-width: 330px;

    color: rgba(255,255,255,.55);

    font-size: 13px;
    line-height: 1.7;

    margin: 0;
}


/* ============================================================
   METRICS
============================================================ */

.zl-project-metric {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 45px 40px;

    color: #111;
}


/* Divider */

.zl-project-metric + .zl-project-metric {
    border-left: 1px solid rgba(17,17,17,.18);
}


/* Giant number */

.zl-project-metric-number {
    position: relative;

    color: #111;

    font-size: clamp(105px, 11vw, 170px);

    font-weight: 700;

    line-height: .72;

    letter-spacing: -.09em;

    margin-bottom: 38px;
}


/* Tiny marker above number */

.zl-project-metric-number::before {
    content: "";

    position: absolute;

    top: -26px;
    left: 5px;

    width: 32px;
    height: 3px;

    background: #111;
}


/* Copy */

.zl-project-metric-copy {
    position: relative;

    padding-top: 20px;

    border-top: 1px solid rgba(17,17,17,.24);
}


.zl-project-metric-copy span {
    display: block;

    color: rgba(17,17,17,.55);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .16em;

    margin-bottom: 3px;
}


.zl-project-metric-copy strong {
    display: block;

    color: #111;

    font-size: 22px;
    font-weight: 600;

    letter-spacing: -.025em;
}


.zl-project-metric-copy p {
    color: rgba(17,17,17,.6);

    font-size: 11px;
    line-height: 1.6;

    margin: 8px 0 0;
}


/* ============================================================
   ONGOING STATUS
============================================================ */

.zl-project-metric-status {
    position: absolute;

    top: 34px;
    right: 30px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #111;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .13em;
}


.zl-project-metric-status i {
    position: relative;

    display: block;

    width: 8px;
    height: 8px;

    background: #5ea51d;

    border-radius: 50%;
}


/* Animated live pulse */

.zl-project-metric-status i::after {
    content: "";

    position: absolute;

    inset: -4px;

    border: 1px solid #5ea51d;

    border-radius: 50%;

    animation: zlMetricPulse 1.8s infinite;
}


@keyframes zlMetricPulse {

    0% {
        transform: scale(.65);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }

}


/* ============================================================
   DECORATIVE PROJECT NUMBER
============================================================ */

.zl-project-metric-completed::before,
.zl-project-metric-ongoing::before {
    position: absolute;

    top: 25px;
    left: 28px;

    color: rgba(17,17,17,.35);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .15em;
}


.zl-project-metric-completed::before {
    content: "01 / DELIVERED";
}


.zl-project-metric-ongoing::before {
    content: "02 / ACTIVE";
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .zl-project-metrics-shell {
        grid-template-columns: 1fr 1fr;
    }

    .zl-project-metrics-intro {
        grid-column: 1 / -1;

        min-height: 320px;
    }

    .zl-project-metrics-intro::after {
        display: none;
    }

    .zl-project-metric {
        min-height: 340px;
    }

}


@media (max-width: 575px) {

    .zl-project-metrics {
        padding-bottom: 80px;
    }

    .zl-project-metrics-shell {
        display: block;

        border-radius: 0;
    }

    .zl-project-metrics-intro {
        min-height: auto;

        padding: 50px 28px;
    }

    .zl-project-metrics-intro h2 {
        font-size: 45px;
    }

    .zl-project-metric {
        min-height: 315px;

        padding: 45px 28px 35px;
    }

    .zl-project-metric + .zl-project-metric {
        border-left: 0;

        border-top: 1px solid rgba(17,17,17,.2);
    }

    .zl-project-metric-number {
        font-size: 125px;

        margin-top: 55px;
    }

}

/* ============================================================
   HERO VIDEO BACKGROUND
============================================================ */

.zl-video-hero {
    position: relative;
    overflow: hidden;

    /* fallback if video fails or is still loading */
    background-image: url('../images/slide-1.jpg');
    background-size: cover;
    background-position: center;
}


.zl-hero-video-wrap {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 0;
}


.zl-hero-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.01);

    transition: opacity 1.2s ease;

    pointer-events: none;
}


.zl-hero-video.is-active {
    opacity: 1;
}


/* Your dark hero overlay must sit above video */
.zl-video-hero .zl-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;
}


/* Hero content above everything */
.zl-video-hero .zl-hero-container {
    position: relative;

    z-index: 2;
}

/* ============================================================
   OPERATIONS TRAINING
============================================================ */

.zl-training-section {
    position: relative;
    padding: 120px 0;
    background: var(--zl-bg-soft);
    overflow: hidden;
}

.zl-training-shell {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    border-radius: 18px;
    min-height: 720px;
    background: #f5f3ed;
    overflow: hidden;
}


/* ============================================================
   VISUAL
============================================================ */

.zl-training-visual {
    position: relative;
    min-height: 720px;
    overflow: hidden;
}

.zl-training-visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform .8s ease;
}

.zl-training-shell:hover .zl-training-visual img {
    transform: scale(1.025);
}

.zl-training-visual-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 11, 8, .08) 20%,
            rgba(8, 11, 8, .72) 100%
        );
}


/* BADGE */

.zl-training-badge {
    position: absolute;
    top: 35px;
    left: 35px;

    display: inline-flex;
    flex-direction: column;

    padding: 14px 18px;

    background: #f5a300;

    color: #111;
}

.zl-training-badge span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.zl-training-badge strong {
    margin-top: 2px;

    font-size: 16px;
    font-weight: 600;
}


/* IMAGE COPY */

.zl-training-visual-copy {
    position: absolute;

    left: 40px;
    bottom: 45px;

    z-index: 2;
}

.zl-training-visual-copy span {
    display: block;

    color: rgba(255,255,255,.7);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .14em;

    margin-bottom: 5px;
}

.zl-training-visual-copy strong {
    display: block;

    color: #fff;

    font-size: clamp(30px, 3vw, 47px);
    font-weight: 500;

    line-height: 1;
    letter-spacing: -.04em;
}


/* ============================================================
   CONTENT
============================================================ */

.zl-training-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 75px 70px;

    color: var(--zl-dark-text);
}

.zl-training-content .zl-section-kicker {
    margin-bottom: 23px;
}

.zl-training-title {
    color: #171a16;

    font-size: clamp(48px, 5vw, 72px);
    font-weight: 500;

    line-height: .96;
    letter-spacing: -.055em;

    margin: 0 0 25px;
}

.zl-training-title span {
    color: #f5a300;
}

.zl-training-lead {
    color: #171a16 !important;

    font-size: 22px;
    font-weight: 500;

    line-height: 1.35;

    margin: 0 0 18px;
}

.zl-training-description {
    max-width: 650px;

    color: #686d66;

    font-size: 13px;
    line-height: 1.8;

    margin: 0 0 13px;
}


/* ============================================================
   TRAINING ITEMS
============================================================ */

.zl-training-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-top: 38px;

    border-top: 1px solid rgba(17, 20, 16, .14);
}

.zl-training-item {
    display: grid;
    grid-template-columns: 30px 1fr;

    gap: 14px;

    padding: 22px 20px 22px 0;

    border-bottom: 1px solid rgba(17, 20, 16, .14);
}

.zl-training-item:nth-child(even) {
    padding-left: 25px;

    border-left: 1px solid rgba(17, 20, 16, .14);
}

.zl-training-item > span {
    color: #f5a300;

    font-size: 9px;
    font-weight: 700;

    padding-top: 3px;
}

.zl-training-item strong {
    display: block;

    color: #171a16;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 5px;
}

.zl-training-item p {
    color: #777c74;

    font-size: 10px;
    line-height: 1.6;

    margin: 0;
}


/* ============================================================
   ACTIONS
============================================================ */

.zl-training-actions {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 38px;
}

.zl-training-note {
    color: #777c74;

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .1em;

    max-width: 165px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .zl-training-content {
        padding: 65px 45px;
    }

}


@media (max-width: 991px) {

    .zl-training-shell {
        grid-template-columns: 1fr;
    }

    .zl-training-visual {
        min-height: 540px;
    }

    .zl-training-content {
        padding: 70px 50px;
    }

}


@media (max-width: 767px) {

    .zl-training-section {
        padding: 80px 0;
    }

    .zl-training-visual {
        min-height: 430px;
    }

    .zl-training-content {
        padding: 55px 30px;
    }

    .zl-training-grid {
        grid-template-columns: 1fr;
    }

    .zl-training-item,
    .zl-training-item:nth-child(even) {
        padding: 20px 0;

        border-left: 0;
    }

    .zl-training-actions {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 575px) {

    .zl-training-shell {
        margin-left: -15px;
        margin-right: -15px;
    }

    .zl-training-visual {
        min-height: 390px;
    }

    .zl-training-badge {
        top: 22px;
        left: 22px;
    }

    .zl-training-visual-copy {
        left: 25px;
        right: 25px;
        bottom: 30px;
    }

    .zl-training-content {
        padding: 50px 25px;
    }

    .zl-training-title {
        font-size: 45px;
    }

}

/* ============================================================
   ZIPLORD EQUIPMENT
============================================================ */

.equipment-page,
.equipment-single-page {
    background: var(--zl-bg);
}


/* ============================================================
   HEADER
============================================================ */

.equipment-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;
}

.equipment-header header,
.equipment-header .site-navbar,
.equipment-header .site-navbar-wrap {
    background: transparent !important;
}

.equipment-header .site-navbar {
    position: relative !important;
}

.equipment-header .site-navigation .site-menu > li > a {
    color: #333 !important;
}


/* ============================================================
   HERO
============================================================ */

.zeq-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: flex-end;

    padding: 180px 0 100px;

    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.zeq-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,11,8,.90) 0%,
            rgba(8,11,8,.66) 45%,
            rgba(8,11,8,.22) 100%
        ),
        linear-gradient(
            0deg,
            rgba(8,11,8,.58),
            transparent 55%
        );
}

.zeq-hero-container {
    position: relative;

    z-index: 2;
}

.zeq-hero h1 {
    max-width: 940px;

    color: #fff;

    font-size: clamp(65px, 8vw, 125px);
    font-weight: 500;

    line-height: .88;
    letter-spacing: -.065em;

    margin: 20px 0 30px;
}

.zeq-hero h1 span {
    color: var(--zl-accent);
}

.zeq-hero p {
    max-width: 620px;

    color: rgba(255,255,255,.68);

    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 35px;
}


/* ============================================================
   INTRO
============================================================ */

.zeq-intro {
    padding: 120px 0;

    background: var(--zl-bg);
}

.zeq-intro h2 {
    color: #fff;

    font-size: clamp(48px, 5vw, 74px);
    font-weight: 500;

    line-height: .95;
    letter-spacing: -.055em;
}

.zeq-intro h2 span {
    color: var(--zl-accent);
}

.zeq-intro-lead {
    color: #fff;

    font-size: 23px !important;
    font-weight: 500;

    line-height: 1.45 !important;
}

.zeq-intro p {
    color: var(--zl-muted);

    font-size: 13px;
    line-height: 1.8;
}

.zeq-intro-note {
    display: grid;
    grid-template-columns: 35px 1fr;

    gap: 15px;

    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid var(--zl-border);
}

.zeq-intro-note > span {
    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   SHOP
============================================================ */

.zeq-shop {
    padding: 110px 0 120px;

    background: #f5f3ed;
}

.zeq-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;

    margin-bottom: 55px;
}

.zeq-toolbar-heading h2 {
    color: #161914;

    font-size: clamp(46px, 5vw, 70px);
    font-weight: 500;

    line-height: .95;
    letter-spacing: -.055em;

    margin: 15px 0 0;
}

.zeq-toolbar-heading h2 span {
    color: var(--zl-accent);
}


/* SEARCH */

.zeq-search {
    position: relative;

    width: 340px;
}

.zeq-search input {
    width: 100%;

    padding: 17px 45px 17px 0;

    color: #161914;

    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(22,25,20,.25);

    outline: 0;

    font-size: 13px;
}

.zeq-search span {
    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    color: #161914;

    font-size: 20px;
}


/* ============================================================
   FILTERS
============================================================ */

.zeq-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 45px;
}

.zeq-filter {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 12px 17px;

    color: #676b65;

    background: transparent;

    border: 1px solid rgba(22,25,20,.14);
    border-radius: 100px;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .09em;

    cursor: pointer;

    transition: .25s ease;
}

.zeq-filter span {
    opacity: .55;
}

.zeq-filter:hover,
.zeq-filter.is-active {
    color: #111;

    background: var(--zl-accent);

    border-color: var(--zl-accent);
}


/* ============================================================
   PRODUCT GRID
============================================================ */

.zeq-product-column {
    margin-bottom: 35px;
}

.zeq-product-card {
    height: 100%;

    background: #fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.zeq-product-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 22px 50px rgba(22,25,20,.09);
}


/* IMAGE */

.zeq-product-image {
    position: relative;

    display: block;

    height: 340px;

    overflow: hidden;

    background: #e7e5de;
}

.zeq-product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}

.zeq-product-card:hover .zeq-product-image img {
    transform: scale(1.035);
}

.zeq-product-category {
    position: absolute;

    left: 18px;
    top: 18px;

    padding: 8px 11px;

    color: #111;

    background: var(--zl-accent);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.zeq-product-arrow {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #111;

    background: #fff;

    border-radius: 50%;

    font-size: 17px;
}


/* CONTENT */

.zeq-product-content {
    padding: 28px;
}

.zeq-product-brand {
    display: block;

    color: #999d97;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .15em;

    margin-bottom: 10px;
}

.zeq-product-content h3 {
    min-height: 57px;

    margin: 0 0 13px;

    font-size: 21px;
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -.025em;
}

.zeq-product-content h3 a {
    color: #171a16;
}

.zeq-product-content p {
    min-height: 66px;

    color: #737870;

    font-size: 11px;
    line-height: 1.7;
}

.zeq-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid rgba(22,25,20,.10);
}

.zeq-quote-price {
    color: #171a16;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}

.zeq-product-footer > a {
    color: #171a16;

    font-size: 10px;
    font-weight: 700;
}

.zeq-product-footer > a span {
    color: var(--zl-accent);

    margin-left: 5px;
}


/* ============================================================
   NO RESULTS
============================================================ */

.zeq-no-results {
    display: none;

    padding: 80px 20px;

    text-align: center;
}

.zeq-no-results.is-visible {
    display: block;
}

.zeq-no-results > span {
    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .15em;
}

.zeq-no-results h3 {
    margin: 15px 0;

    color: #171a16;

    font-size: 35px;
}

.zeq-no-results p {
    color: #777;

    margin-bottom: 25px;
}


/* ============================================================
   SUPPORT
============================================================ */

.zeq-support {
    padding: 110px 0;

    background: var(--zl-bg);
}

.zeq-support-grid {
    display: grid;

    grid-template-columns: 1.5fr repeat(2, 1fr);
}

.zeq-support-heading {
    grid-row: span 2;

    padding-right: 60px;
}

.zeq-support-heading h2 {
    color: #fff;

    font-size: clamp(44px, 4vw, 62px);

    line-height: .96;
    letter-spacing: -.05em;
}

.zeq-support-heading h2 span {
    color: var(--zl-accent);
}

.zeq-support-item {
    padding: 35px;

    border-left: 1px solid var(--zl-border);
    border-bottom: 1px solid var(--zl-border);
}

.zeq-support-item > span {
    display: block;

    color: var(--zl-accent);

    font-size: 9px;

    margin-bottom: 40px;
}

.zeq-support-item strong {
    display: block;

    color: #fff;

    font-size: 18px;
    font-weight: 500;

    margin-bottom: 10px;
}

.zeq-support-item p {
    color: var(--zl-muted);

    font-size: 11px;
    line-height: 1.7;

    margin: 0;
}


/* ============================================================
   SINGLE PRODUCT
============================================================ */

.zeqs-product {
    padding: 175px 0 110px;

    background: #f5f3ed;
}

.zeqs-breadcrumb {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 55px;

    color: #8b8f87;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .09em;
}

.zeqs-breadcrumb a {
    color: #171a16;
}

.zeqs-product-image {
    position: relative;

    min-height: 660px;

    background: #e4e1d9;

    overflow: hidden;
}

.zeqs-product-image img {
    width: 100%;
    height: 660px;

    object-fit: cover;
}

.zeqs-image-label {
    position: absolute;

    left: 25px;
    top: 25px;

    padding: 9px 13px;

    color: #111;

    background: var(--zl-accent);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .1em;
}

.zeqs-image-number {
    position: absolute;

    left: 25px;
    bottom: 25px;

    color: #fff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .15em;

    text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

.zeqs-brand {
    display: block;

    color: #777c74;

    margin-top: 15px;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .12em;
}

.zeqs-product h1 {
    color: #171a16;

    font-size: clamp(50px, 5vw, 78px);
    font-weight: 500;

    line-height: .96;
    letter-spacing: -.055em;

    margin: 20px 0 30px;
}

.zeqs-lead {
    color: #171a16;

    font-size: 20px;
    line-height: 1.5;

    margin-bottom: 20px;
}

.zeqs-description {
    color: #777c74;

    font-size: 12px;
    line-height: 1.85;
}

.zeqs-price {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 35px 0 30px;
    padding: 20px 0;

    border-top: 1px solid rgba(22,25,20,.15);
    border-bottom: 1px solid rgba(22,25,20,.15);
}

.zeqs-price span {
    color: #8c9089;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}

.zeqs-price strong {
    color: #171a16;

    font-size: 16px;
}

.zeqs-actions {
    display: flex;
    align-items: center;

    gap: 22px;
}

.zeqs-call {
    color: #171a16;

    font-size: 10px;
    font-weight: 700;
}

.zeqs-assistance {
    margin-top: 35px;
    padding-left: 20px;

    border-left: 2px solid var(--zl-accent);
}

.zeqs-assistance span {
    color: #171a16;

    font-size: 11px;
    font-weight: 700;
}

.zeqs-assistance p {
    color: #777c74;

    font-size: 10px;
    line-height: 1.6;

    margin: 5px 0 0;
}


/* ============================================================
   PRODUCT DETAILS
============================================================ */

.zeqs-details {
    padding: 120px 0;

    background: var(--zl-bg);
}

.zeqs-details h2,
.zeqs-training h2,
.zeqs-related h2 {
    color: #fff;

    font-size: clamp(45px, 5vw, 70px);
    font-weight: 500;

    line-height: .95;
    letter-spacing: -.055em;
}

.zeqs-details h2 span,
.zeqs-training h2 span,
.zeqs-related h2 span {
    color: var(--zl-accent);
}

.zeqs-detail-block {
    display: grid;
    grid-template-columns: 50px 1fr;

    gap: 20px;

    padding: 35px 0;

    border-top: 1px solid var(--zl-border);
}

.zeqs-detail-number {
    color: var(--zl-accent);

    font-size: 9px;
    font-weight: 700;
}

.zeqs-detail-label {
    display: block;

    color: #fff;

    font-size: 18px;
    font-weight: 500;

    margin-bottom: 25px;
}

.zeqs-feature {
    display: grid;
    grid-template-columns: 25px 1fr;

    gap: 10px;

    padding: 13px 0;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.zeqs-feature span {
    color: var(--zl-accent);
}

.zeqs-feature p {
    color: var(--zl-muted);

    font-size: 11px;

    margin: 0;
}

.zeqs-applications {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.zeqs-applications span {
    padding: 10px 13px;

    color: #fff;

    border: 1px solid var(--zl-border);
    border-radius: 100px;

    font-size: 9px;
}

.zeqs-technical-note {
    margin-top: 35px;

    padding: 25px;

    background: rgba(245,163,0,.08);

    border-left: 3px solid var(--zl-accent);
}

.zeqs-technical-note span {
    display: block;

    color: var(--zl-accent);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .13em;

    margin-bottom: 10px;
}

.zeqs-technical-note p {
    color: var(--zl-muted);

    font-size: 14px;
    line-height: 1.7;

    margin: 0;
}


/* ============================================================
   TRAINING
============================================================ */

.zeqs-training {
    padding: 100px 0;

    background: #181c17;
}

.zeqs-training-inner {
    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 80px;

    align-items: flex-end;
}

.zeqs-training-inner p {
    color: var(--zl-muted);

    font-size: 12px;
    line-height: 1.8;
}

.zeqs-training-inner a {
    display: inline-block;

    margin-top: 15px;

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.zeqs-training-inner a span {
    color: var(--zl-accent);

    margin-left: 7px;
}


/* ============================================================
   RELATED
============================================================ */

.zeqs-related {
    padding: 110px 0;

    background: #f5f3ed;
}

.zeqs-related h2 {
    color: #171a16;
}

.zeqs-related-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 55px;
}

.zeqs-related-heading > a {
    color: #171a16;

    font-size: 10px;
    font-weight: 700;
}

.zeqs-related-heading > a span {
    color: var(--zl-accent);

    margin-left: 7px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .zeq-hero {
        min-height: 680px;
    }

    .zeq-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .zeq-search {
        width: 100%;
    }

    .zeq-support-grid {
        grid-template-columns: 1fr 1fr;
    }

    .zeq-support-heading {
        grid-column: 1 / -1;
        grid-row: auto;

        margin-bottom: 40px;
    }

    .zeq-support-item {
        border-left: 0;
        border-top: 1px solid var(--zl-border);
    }

    .zeqs-product-image {
        min-height: 560px;
    }

    .zeqs-product-image img {
        height: 560px;
    }

    .zeqs-training-inner {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 767px) {

    .zeq-hero {
        min-height: 620px;

        padding-bottom: 70px;
    }

    .zeq-hero h1 {
        font-size: 62px;
    }

    .zeq-intro,
    .zeq-shop,
    .zeq-support,
    .zeqs-details,
    .zeqs-related {
        padding: 80px 0;
    }

    .zeq-support-grid {
        grid-template-columns: 1fr;
    }

    .zeq-support-heading {
        padding-right: 0;
    }

    .zeq-product-image {
        height: 390px;
    }

    .zeqs-product {
        padding-top: 140px;
    }

    .zeqs-product-image {
        min-height: 450px;
    }

    .zeqs-product-image img {
        height: 450px;
    }

    .zeqs-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .zeqs-related-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 575px) {

    .zeq-hero h1 {
        font-size: 53px;
    }

    .zeq-product-image {
        height: 330px;
    }

    .zeq-product-content {
        padding: 24px;
    }

    .zeqs-product-image,
    .zeqs-product-image img {
        height: 390px;
        min-height: 390px;
    }

}

/* ============================================================
   HEADER THEMES
============================================================ */

/* Default header over dark hero */
.zl-header-dark .site-navigation .site-menu > li > a {
    color: #fff !important;
}


/* Header over light background */
.zl-header-light .site-navigation .site-menu > li > a {
    color: #171a16 !important;
}


/* Dropdown arrow / icon colours if necessary */
.zl-header-light .site-navigation .site-menu > li.has-children > a::before {
    color: #171a16;
}


/* Mobile menu trigger if yours uses spans */
.zl-header-light .site-menu-toggle span,
.zl-header-light .site-menu-toggle span::before,
.zl-header-light .site-menu-toggle span::after {
    background: #171a16;
}


/* Optional subtle bottom divider on light pages */
/* .equipment-header-on-light {
    border-bottom: 1px solid rgba(22, 25, 20, .08);
} */