/* =========================================================
   JSB SECURITY SERVICES
   PREMIUM CORPORATE STYLE
========================================================= */


/* =========================================================
   01. VARIABLES
========================================================= */

:root {
    --black: #070707;
    --black-soft: #101010;
    --black-light: #171717;
    --white: #ffffff;
    --off-white: #f4f4f2;
    --silver: #c8c8c8;
    --silver-light: #dedede;
    --grey: #8b8b8b;
    --dark-grey: #555555;
    --text: #151515;
    --muted: #686868;
    --border-light: #ddddda;
    --border-dark: #292929;
    --container: 1380px;
}


/* =========================================================
   02. RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", Arial, sans-serif;
    background: var(--white);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   03. GLOBAL
========================================================= */

.container {
    width: min(calc(100% - 80px), var(--container));
    margin: 0 auto;
}

.section {
    padding: 125px 0;
}


/* =========================================================
   04. HEADER
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: #050505;
    border-bottom: 1px solid #262626;
}

.header-inner {
    width: min(calc(100% - 80px), var(--container));
    min-height: 110px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
}


/* =========================================================
   05. BRAND / LOGO
========================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    color: #ffffff;
}

.brand-logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-copy strong {
    font-family: "Manrope", sans-serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

.brand-copy span {
    margin-top: 9px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.2px;
    color: #9e9e9e;
}


/* =========================================================
   06. NAVIGATION
========================================================= */

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


/* =========================================================
   07. NAV LINKS
========================================================= */

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 13px 0;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.15px;
    color: #a7a7a7;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* Cursor over link */

.nav-link:hover {
    color: #ffffff;
    transform: translateY(-1px);
}


/* Underline */

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.25s ease;
}


/* Hover underline */

.nav-link:hover::after {
    width: 100%;
}


/* Current page */

.nav-link.active {
    color: #ffffff;
}

.nav-link.active::after {
    width: 100%;
}


/* =========================================================
   08. REQUEST QUOTE BUTTON
========================================================= */

.quote-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 30px;
    margin-left: 42px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #080808;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.quote-button:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   09. EYEBROW
========================================================= */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 30px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.eyebrow span {
    width: 32px;
    height: 1px;
    flex-shrink: 0;
}

.eyebrow.light {
    color: #bcbcbc;
}

.eyebrow.light span {
    background: #ffffff;
}

.eyebrow.dark {
    color: #777777;
}

.eyebrow.dark span {
    background: #777777;
}


/* =========================================================
   10. BUTTONS
========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid transparent;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-white {
    background: #ffffff;
    color: #070707;
    border-color: #ffffff;
}

.button-white:hover {
    background: transparent;
    color: #ffffff;
}

.button-black {
    background: #080808;
    color: #ffffff;
    border-color: #080808;
}

.button-black:hover {
    background: transparent;
    color: #080808;
}

.button-outline {
    background: transparent;
    color: #ffffff;
    border-color: #6b6b6b;
}

.button-outline:hover {
    background: #ffffff;
    color: #080808;
    border-color: #ffffff;
}


/* =========================================================
   11. TEXT LINKS
========================================================= */

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.text-link span {
    font-size: 17px;
    transition: transform 0.25s ease;
}

.text-link:hover span {
    transform: translate(4px, -4px);
}

.light-link {
    color: #ffffff;
}

.dark-link {
    color: #151515;
}


/* =========================================================
   12. HERO
========================================================= */

.hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    background: #050505;
    overflow: hidden;
}

.hero-image-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.72;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.96) 0%,
            rgba(0, 0, 0, 0.84) 36%,
            rgba(0, 0, 0, 0.50) 68%,
            rgba(0, 0, 0, 0.35) 100%
        );
}


/* =========================================================
   13. HERO CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    padding-bottom: 125px;
}

.hero h1 {
    max-width: 850px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(58px, 7vw, 102px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -4px;
    color: #ffffff;
}

.hero h1 em {
    display: block;
    font-style: normal;
    color: #a8a8a8;
}

.hero-text {
    max-width: 600px;
    margin-top: 32px;
    font-size: 17px;
    line-height: 1.8;
    color: #d0d0d0;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 40px;
}


/* =========================================================
   14. HERO META
========================================================= */

.hero-meta {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 76px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    border-top: 1px solid rgba(255,255,255,0.14);
    color: #a8a8a8;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


/* =========================================================
   15. INTRO
========================================================= */

.intro {
    background: var(--off-white);
}

.intro-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 110px;
    align-items: start;
}

.intro-heading h2,
.section-heading-row h2,
.why-content h2,
.areas-intro h2,
.cta-layout h2,
.about-content h2,
.approach-heading h2,
.values-heading h2,
.about-cta h2 {
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -2.8px;
}

.intro-heading h2 em,
.section-heading-row h2 em,
.why-content h2 em,
.areas-intro h2 em,
.cta-layout h2 em,
.about-content h2 em,
.approach-heading h2 em,
.values-heading h2 em,
.about-cta h2 em {
    display: block;
    font-style: normal;
    color: #929292;
}

.intro-copy {
    max-width: 680px;
}

.intro-copy p,
.about-content p {
    margin-bottom: 19px;
    font-size: 15px;
    line-height: 1.85;
    color: #626262;
}

.intro-copy .lead,
.about-content .lead {
    margin-bottom: 28px;
    font-size: 20px;
    line-height: 1.65;
    color: #202020;
}


/* =========================================================
   16. SERVICES — EXISTING INDEX SECTION
========================================================= */

.services {
    background: #080808;
    color: #ffffff;
}

.section-heading-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 70px;
}

.section-heading-row p {
    max-width: 500px;
    margin-left: auto;
    font-size: 15px;
    line-height: 1.8;
    color: #929292;
}

.service-list {
    border-top: 1px solid #2b2b2b;
}

.service-row {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    gap: 30px;
    align-items: center;
    padding: 34px 0;
    border-bottom: 1px solid #2b2b2b;
    transition:
        padding 0.25s ease,
        background 0.25s ease;
}

.service-row:hover {
    padding-left: 15px;
    padding-right: 15px;
    background: #111111;
}

.service-number {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #666666;
}

.service-main {
    display: grid;
    grid-template-columns: minmax(220px, 0.65fr) 1fr;
    gap: 50px;
    align-items: center;
}

.service-main h3 {
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
}

.service-main p {
    max-width: 500px;
    font-size: 13px;
    line-height: 1.7;
    color: #858585;
}

.service-arrow {
    justify-self: end;
    font-size: 20px;
    color: #bdbdbd;
    transition: transform 0.25s ease;
}

.service-row:hover .service-arrow {
    transform: translate(4px, -4px);
}


/* =========================================================
   17. WHY
========================================================= */

.why {
    background: #e9e9e7;
}

.why-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 100px;
    align-items: center;
}

.why-image-wrap {
    position: relative;
    overflow: hidden;
}

.why-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(100%);
}

.image-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 16px 20px;
    background: rgba(0,0,0,0.88);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.why-content {
    max-width: 680px;
}

.why-content .lead {
    margin-top: 30px;
    font-size: 17px;
    line-height: 1.8;
    color: #555555;
}

.principles {
    margin-top: 45px;
    border-top: 1px solid #c9c9c7;
}

.principle {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid #c9c9c7;
}

.principle > span {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #858585;
}

.principle h3 {
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #151515;
}

.principle p {
    margin-top: 6px;
    font-size: 13px;
    color: #666666;
}


/* =========================================================
   18. INDUSTRIES
========================================================= */

.industries {
    background: #ffffff;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 65px;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
}

.industry {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.industry span {
    font-size: 10px;
    color: #999999;
}

.industry strong {
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.industry:hover {
    background: #080808;
    color: #ffffff;
}


/* =========================================================
   19. SERVICE AREAS
========================================================= */

.areas {
    background: #080808;
    color: #ffffff;
}

.areas-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 110px;
    align-items: start;
}

.areas-intro {
    max-width: 560px;
}

.areas-intro p {
    margin: 28px 0 35px;
    font-size: 15px;
    line-height: 1.8;
    color: #929292;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #2b2b2b;
    border-left: 1px solid #2b2b2b;
}

.location {
    min-height: 115px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    border-right: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 650;
    color: #dddddd;
}

.location span {
    margin-bottom: auto;
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #666666;
}



/* =========================================================
   20. CTA
========================================================= */

.cta {
    background: #e8e8e6;
}

.cta-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 100px;
    align-items: end;
}

.cta-copy {
    max-width: 500px;
}

.cta-copy p {
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.8;
    color: #626262;
}


/* =========================================================
   JSB FOOTER - FINAL
========================================================= */

.site-footer {
    width: 100%;
    background: #080808;
    color: #ffffff;
    padding: 85px 0 30px;
    border-top: 1px solid #252525;
}


/* =========================================================
   FOOTER GRID
========================================================= */

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.55fr 0.75fr 0.9fr 1fr;
    gap: 70px;

    padding-bottom: 65px;

    border-bottom: 1px solid #292929;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand-block {
    max-width: 410px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 25px;

    color: #ffffff;
}


/* IMPORTANT:
   Footer logo is now separately controlled.
*/

.site-footer .footer-logo-image {
    width: 72px !important;
    height: 72px !important;

    max-width: 72px !important;
    min-width: 72px;

    object-fit: contain;
    display: block;
    flex-shrink: 0;
}


.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-logo-text strong {
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

.footer-logo-text span {
    margin-top: 9px;

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #8d8d8d;
}


/* =========================================================
   FOOTER DESCRIPTION
========================================================= */

.footer-description {
    max-width: 380px;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.85;

    color: #858585;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.site-footer .footer-column h4 {
    margin: 3px 0 24px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #ffffff;
}

.site-footer .footer-column a {
    display: block;

    width: fit-content;

    margin-bottom: 13px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.5;

    color: #858585;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.site-footer .footer-column a:hover {
    color: #ffffff;
    transform: translateX(3px);
}


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

.site-footer .footer-contact p {
    max-width: 280px;

    margin: 0 0 22px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.75;

    color: #858585;
}

.site-footer .footer-contact .footer-quote {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;

    color: #ffffff;
}

.site-footer .footer-contact .footer-quote span {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.site-footer .footer-contact .footer-quote:hover {
    color: #ffffff;
}

.site-footer .footer-contact .footer-quote:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.site-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 25px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;

    color: #5f5f5f;
}


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

@media (max-width: 1000px) {

    .site-footer {
        padding: 70px 0 28px;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 50px;
    }

    .footer-brand-block {
        grid-column: 1 / -1;
        max-width: 550px;
    }

}


@media (max-width: 700px) {

    .site-footer {
        padding: 60px 0 25px;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px 30px;
    }

    .footer-brand-block {
        grid-column: 1 / -1;
    }

    .site-footer .footer-logo-image {
        width: 62px !important;
        height: 62px !important;
        max-width: 62px !important;
        min-width: 62px;
    }

    .footer-logo-text strong {
        font-size: 24px;
    }

    .footer-logo-text span {
        font-size: 7px;
        letter-spacing: 1.6px;
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

}


@media (max-width: 480px) {

    .site-footer {
        padding: 50px 0 22px;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-brand-block {
        grid-column: auto;
    }

    .site-footer .footer-logo-image {
        width: 55px !important;
        height: 55px !important;
        max-width: 55px !important;
        min-width: 55px;
    }

    .footer-logo {
        gap: 12px;
    }

    .footer-logo-text strong {
        font-size: 22px;
    }

    .footer-logo-text span {
        font-size: 6px;
        letter-spacing: 1.4px;
    }

}

/* =========================================================
   22. ABOUT HERO
========================================================= */

.about-hero {
    padding: 105px 0 115px;
    background: #f4f4f2;
    border-bottom: 1px solid #ddddda;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 100px;
    align-items: end;
}

.about-hero h1 {
    max-width: 800px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(55px, 6.5vw, 92px);
    line-height: 0.99;
    font-weight: 800;
    letter-spacing: -4px;
}

.about-hero h1 em {
    display: block;
    font-style: normal;
    color: #8e8e8e;
}

.about-hero-copy {
    max-width: 520px;
}

.about-hero-copy > p {
    font-size: 19px;
    line-height: 1.7;
    color: #505050;
}

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 35px;
}

.about-tags span {
    padding: 10px 13px;
    border: 1px solid #d2d2d0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #777777;
}


/* =========================================================
   23. ABOUT INTRO
========================================================= */

.about-intro {
    background: #ffffff;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 0.3fr 1.7fr;
    gap: 80px;
}

.about-side-number {
    font-family: "Manrope", sans-serif;
    font-size: 110px;
    line-height: 0.8;
    font-weight: 800;
    letter-spacing: -7px;
    color: #e2e2df;
}

.about-content {
    max-width: 900px;
}

.about-content h2 {
    max-width: 800px;
    margin-bottom: 35px;
}


/* =========================================================
   24. APPROACH
========================================================= */

.approach {
    background: #080808;
    color: #ffffff;
}

.approach-heading {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 100px;
    align-items: end;
}

.approach-heading h2 {
    color: #ffffff;
}

.approach-heading h2 em {
    color: #909090;
}

.approach-heading p {
    max-width: 510px;
    font-size: 15px;
    line-height: 1.8;
    color: #929292;
}

.approach-list {
    margin-top: 70px;
    border-top: 1px solid #2b2b2b;
}

.approach-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;
    padding: 30px 0;
    border-bottom: 1px solid #2b2b2b;
}

.approach-item > span {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #666666;
}

.approach-item h3 {
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: #ffffff;
}

.approach-item p {
    max-width: 700px;
    margin-top: 7px;
    font-size: 14px;
    color: #858585;
}


/* =========================================================
   25. MISSION / VISION
========================================================= */

.mission-vision {
    background: #ffffff;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 65px;
    border-top: 1px solid #dcdcd9;
    border-left: 1px solid #dcdcd9;
}

.mv-card {
    min-height: 440px;
    padding: 45px;
    border-right: 1px solid #dcdcd9;
    border-bottom: 1px solid #dcdcd9;
}

.mv-card.dark-card {
    background: #080808;
    color: #ffffff;
    border-color: #080808;
}

.mv-number {
    display: block;
    margin-bottom: 55px;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #909090;
}

.mv-label {
    margin-bottom: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #777777;
}

.dark-card .mv-label {
    color: #858585;
}

.mv-card h2 {
    max-width: 550px;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.mv-card h2 em {
    display: block;
    font-style: normal;
    color: #929292;
}

.mv-card p {
    max-width: 550px;
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.8;
    color: #686868;
}

.dark-card p {
    color: #909090;
}


/* =========================================================
   26. VALUES
========================================================= */

.values {
    background: #ededeb;
}

.values-heading {
    margin-bottom: 60px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #cececb;
    border-left: 1px solid #cececb;
}

.value {
    min-height: 250px;
    padding: 30px;
    border-right: 1px solid #cececb;
    border-bottom: 1px solid #cececb;
}

.value > span {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #898989;
}

.value h3 {
    margin-top: 65px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.value p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: #686868;
}


/* =========================================================
   27. ABOUT CTA
========================================================= */

.about-cta {
    background: #080808;
    color: #ffffff;
}

.about-cta-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 100px;
    align-items: end;
}

.about-cta h2 {
    max-width: 850px;
    color: #ffffff;
}

.about-cta h2 em {
    color: #909090;
}

.about-cta-inner > div:last-child {
    max-width: 500px;
}

.about-cta p {
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.8;
    color: #909090;
}


/* =========================================================
   28. SERVICES PAGE ONLY
   PREMIUM CORPORATE CARD GRID

   IMPORTANT:
   Everything below this point is scoped specifically
   for the Services page.
   
   It will NOT change index.html or about.html.
========================================================= */


/* =========================================================
   SERVICES PAGE BODY
========================================================= */

.services-page-body {
    background: #f4f4f2;
    color: #111111;
}


/* =========================================================
   SERVICES HEADER
   Scoped only to Services page
========================================================= */

.services-header {
    width: 100%;
    background: #050505;
    border-bottom: 1px solid #292929;
    position: relative;
    z-index: 1000;
}

.services-header .header-inner {
    width: min(calc(100% - 80px), 1380px);
    min-height: 110px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}


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

.services-header .logo-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    color: #ffffff;
    text-decoration: none;
}

.services-header .logo-image {
    width: 76px;
    height: 76px;
    object-fit: contain;
    flex-shrink: 0;
}

.services-header .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.services-header .logo-text strong {
    font-family: "Manrope", sans-serif;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

.services-header .logo-text span {
    margin-top: 9px;
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2.2px;
    color: #9e9e9e;
}


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

.services-header .navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    margin-left: auto;
}

.services-header .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 13px 0;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.15px;
    color: #929292;
    white-space: nowrap;
    text-decoration: none;
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* Services nav hover */

.services-header .nav-link:hover {
    color: #ffffff;
    transform: translateY(-1px);
}


/* Services nav underline */

.services-header .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 0;
    height: 1px;
    background: #ffffff;
    transition: width 0.25s ease;
}

.services-header .nav-link:hover::after {
    width: 100%;
}


/* Services current page */

.services-header .nav-link.active {
    color: #ffffff;
}

.services-header .nav-link.active::after {
    width: 100%;
}


/* =========================================================
   SERVICES HEADER QUOTE BUTTON
========================================================= */

.services-header .header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 25px;
    margin-left: 38px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #080808;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.services-header .header-button:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   SERVICES PAGE MAIN
========================================================= */

.services-cards-section {
    width: 100%;
    padding: 75px 0 120px;
    background: #f4f4f2;
}


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

.services-cards-container {
    width: min(calc(100% - 80px), 1380px);
    margin: 0 auto;
}


/* =========================================================
   SERVICES CARD GRID
========================================================= */

.services-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}


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

.services-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #dededb;
    color: #111111;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.services-card:hover,
.services-card.is-hovered {
    transform: translateY(-7px);
    border-color: #bcbcb9;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.11);
}


/* =========================================================
   CARD IMAGE
========================================================= */

.services-card-image {
    position: relative;
    width: 100%;
    height: 245px;
    overflow: hidden;
    background: #111111;
}

.services-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition:
        transform 0.65s ease,
        filter 0.65s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.services-card:hover .services-card-image img,
.services-card.is-hovered .services-card-image img {
    transform: scale(1.07);
    filter: grayscale(65%);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.services-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.46) 100%
        );
    pointer-events: none;
}


/* =========================================================
   CARD NUMBER
========================================================= */

.services-card-number {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.services-card-content {
    display: flex;
    flex-direction: column;
    min-height: 245px;
    padding: 29px 29px 25px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.services-card-content h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.55px;
    color: #111111;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.services-card-content p {
    margin: 15px 0 0;
    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.75;
    color: #666666;
}


/* =========================================================
   CARD LINK
========================================================= */

.services-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 21px;
    border-top: 1px solid #e2e2df;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: #111111;
}


/* =========================================================
   CARD ARROW
========================================================= */

.services-card-link b {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccccca;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   ARROW HOVER
========================================================= */

.services-card:hover .services-card-link b,
.services-card.is-hovered .services-card-link b {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
    transform: translate(3px, -3px);
}


/* =========================================================
   CARD FOCUS
========================================================= */

.services-card:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 5px;
}


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

.services-footer {
    background: #050505;
}


/* =========================================================
   29. RESPONSIVE — 1200px
========================================================= */

@media (max-width: 1200px) {

    .header-inner {
        width: min(calc(100% - 50px), var(--container));
    }

    .navigation {
        gap: 18px;
    }

    .nav-link {
        font-size: 13px;
    }

    .quote-button {
        margin-left: 25px;
        padding: 0 22px;
    }

    .container {
        width: min(calc(100% - 50px), var(--container));
    }

    .intro-grid,
    .why-grid,
    .areas-grid {
        gap: 70px;
    }


    /* ---------------------------------------------
       SERVICES PAGE ONLY
    --------------------------------------------- */

    .services-header .header-inner {
        width: min(calc(100% - 50px), 1380px);
    }

    .services-header .navigation {
        gap: 18px;
    }

    .services-header .nav-link {
        font-size: 12px;
    }

    .services-header .header-button {
        margin-left: 24px;
        padding: 0 20px;
    }

    .services-cards-container {
        width: min(calc(100% - 50px), 1380px);
    }

    .services-card-grid {
        gap: 22px;
    }
}


/* =========================================================
   30. RESPONSIVE — 1000px
========================================================= */

@media (max-width: 1000px) {

    .header-inner {
        min-height: auto;
        padding: 18px 0;
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .navigation {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 24px;
        padding-top: 10px;
    }

    .quote-button {
        margin-left: auto;
    }

    .hero {
        min-height: 700px;
    }

    .intro-grid,
    .why-grid,
    .areas-grid,
    .about-hero-grid,
    .approach-heading,
    .cta-layout,
    .about-cta-inner {
        grid-template-columns: 1fr;
    }

    .intro-grid,
    .why-grid,
    .areas-grid {
        gap: 55px;
    }

    .section-heading-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .section-heading-row p {
        margin-left: 0;
    }

    .service-main {
        grid-template-columns: 0.8fr 1fr;
        gap: 25px;
    }

    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }


    /* ---------------------------------------------
       SERVICES PAGE ONLY
    --------------------------------------------- */

    .services-header .header-inner {
        min-height: auto;
        padding: 18px 0;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .services-header .navigation {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 22px;
        padding-top: 8px;
    }

    .services-header .header-button {
        margin-left: auto;
    }

    .services-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   31. RESPONSIVE — 700px
========================================================= */

@media (max-width: 700px) {

    .container,
    .header-inner {
        width: min(calc(100% - 36px), var(--container));
    }

    .section {
        padding: 85px 0;
    }

    .site-header {
        position: relative;
    }

    .header-inner {
        padding: 14px 0;
    }

    .brand-logo {
        width: 60px;
        height: 60px;
    }

    .brand-copy strong {
        font-size: 24px;
    }

    .brand-copy span {
        font-size: 7px;
        letter-spacing: 1.6px;
    }

    .quote-button {
        min-height: 46px;
        padding: 0 15px;
        font-size: 9px;
        margin-left: auto;
    }

    .navigation {
        justify-content: flex-start;
        gap: 4px 18px;
        padding-top: 8px;
    }

    .nav-link {
        font-size: 11px;
        padding: 7px 0;
    }

    .hero {
        min-height: 650px;
    }

    .hero-content {
        width: min(calc(100% - 36px), var(--container));
        padding-top: 70px;
        padding-bottom: 110px;
    }

    .hero h1 {
        font-size: 55px;
        letter-spacing: -2.5px;
    }

    .hero-text {
        font-size: 14px;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .hero-meta {
        padding: 0 15px;
        gap: 20px;
        flex-wrap: wrap;
        font-size: 8px;
    }

    .intro-grid {
        gap: 40px;
    }

    .intro-heading h2,
    .section-heading-row h2,
    .why-content h2,
    .areas-intro h2,
    .cta-layout h2,
    .about-content h2,
    .approach-heading h2,
    .values-heading h2,
    .about-cta h2 {
        font-size: 43px;
        letter-spacing: -1.8px;
    }

    .service-row {
        grid-template-columns: 45px 1fr 25px;
        gap: 12px;
        padding: 27px 0;
    }

    .service-main {
        display: block;
    }

    .service-main h3 {
        font-size: 18px;
    }

    .service-main p {
        margin-top: 8px;
        font-size: 12px;
    }

    .service-arrow {
        font-size: 16px;
    }

    .industry-grid {
        grid-template-columns: 1fr;
    }

    .location-grid {
        grid-template-columns: 1fr 1fr;
    }

    .location {
        min-height: 105px;
        font-size: 14px;
    }

    .mv-grid {
        grid-template-columns: 1fr;
    }

    .mv-card {
        min-height: auto;
        padding: 32px;
    }

    .mv-card h2 {
        font-size: 28px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .value {
        min-height: 200px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

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

    .about-hero {
        padding: 75px 0 80px;
    }

    .about-hero-grid {
        gap: 45px;
    }

    .about-hero h1 {
        font-size: 53px;
        letter-spacing: -2.5px;
    }

    .about-hero-copy > p {
        font-size: 17px;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-side-number {
        font-size: 70px;
    }

    .approach-item {
        grid-template-columns: 45px 1fr;
        gap: 15px;
    }

    .approach-item h3 {
        font-size: 21px;
    }


    /* ---------------------------------------------
       SERVICES PAGE ONLY
    --------------------------------------------- */

    .services-header .header-inner {
        width: min(calc(100% - 40px), 1380px);
    }

    .services-header .logo-image {
        width: 62px;
        height: 62px;
    }

    .services-header .logo-text strong {
        font-size: 25px;
    }

    .services-header .logo-text span {
        font-size: 7px;
        letter-spacing: 1.7px;
    }

    .services-header .navigation {
        justify-content: flex-start;
        gap: 5px 17px;
    }

    .services-header .nav-link {
        font-size: 11px;
        padding: 7px 0;
    }

    .services-header .header-button {
        min-height: 46px;
        padding: 0 15px;
        font-size: 9px;
    }

    .services-cards-section {
        padding: 55px 0 80px;
    }

    .services-cards-container {
        width: min(calc(100% - 40px), 1380px);
    }

    .services-card-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .services-card-image {
        height: 270px;
    }

    .services-card-content {
        min-height: 235px;
        padding: 27px 25px 24px;
    }
}


/* =========================================================
   32. RESPONSIVE — 480px
========================================================= */

@media (max-width: 480px) {

    .container,
    .header-inner {
        width: min(calc(100% - 28px), var(--container));
    }

    .brand {
        gap: 10px;
    }

    .brand-logo {
        width: 52px;
        height: 52px;
    }

    .brand-copy strong {
        font-size: 21px;
    }

    .brand-copy span {
        font-size: 6px;
        letter-spacing: 1.3px;
    }

    .quote-button {
        min-height: 42px;
        padding: 0 11px;
        font-size: 8px;
    }

    .navigation {
        gap: 2px 13px;
    }

    .nav-link {
        font-size: 10px;
    }

    .hero h1 {
        font-size: 45px;
    }

    .hero-kicker {
        font-size: 9px;
    }

    .hero-meta {
        gap: 11px;
        justify-content: flex-start;
    }

    .intro-heading h2,
    .section-heading-row h2,
    .why-content h2,
    .areas-intro h2,
    .cta-layout h2,
    .about-content h2,
    .approach-heading h2,
    .values-heading h2,
    .about-cta h2 {
        font-size: 36px;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .about-hero h1 {
        font-size: 43px;
    }

    .about-tags {
        gap: 5px;
    }

    .about-tags span {
        font-size: 8px;
    }


    /* ---------------------------------------------
       SERVICES PAGE ONLY
    --------------------------------------------- */

    .services-header .header-inner {
        width: calc(100% - 28px);
    }

    .services-header .logo-wrap {
        gap: 10px;
    }

    .services-header .logo-image {
        width: 52px;
        height: 52px;
    }

    .services-header .logo-text strong {
        font-size: 21px;
    }

    .services-header .logo-text span {
        font-size: 6px;
        letter-spacing: 1.3px;
    }

    .services-header .header-button {
        min-height: 42px;
        padding: 0 11px;
        font-size: 8px;
    }

    .services-header .navigation {
        gap: 2px 13px;
    }

    .services-header .nav-link {
        font-size: 10px;
    }

    .services-cards-container {
        width: calc(100% - 30px);
    }

    .services-cards-section {
        padding: 40px 0 60px;
    }

    .services-card-grid {
        gap: 18px;
    }

    .services-card-image {
        height: 225px;
    }

    .services-card-content {
        min-height: 225px;
        padding: 24px 22px 22px;
    }

    .services-card-content h2 {
        font-size: 20px;
    }

    .services-card-content p {
        font-size: 13px;
        line-height: 1.7;
    }

    .services-card-number {
        width: 38px;
        height: 38px;
        top: 15px;
        left: 15px;
    }
}
/* =====================================================
   SERVICES PAGE — BLACK HEADER & FOOTER
   ===================================================== */

.services-header {
    background: #070707;
    border-bottom: 1px solid #292929;
}

.services-logo-text strong {
    color: #ffffff;
}

.services-logo-text span {
    color: #9a9a9a;
}

.services-navigation a {
    color: #b8b8b8;
}

.services-navigation a:hover,
.services-navigation a.active {
    color: #ffffff;
}

.services-navigation a::after {
    background: #ffffff;
}

.services-quote-button {
    background: #ffffff;
    border-color: #ffffff;
    color: #070707;
}

.services-quote-button:hover {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}


/* =====================================================
   BLACK FOOTER
   ===================================================== */

.services-footer {
    background: #070707;
    border-top: 1px solid #292929;
}

.footer-brand h3 {
    color: #ffffff;
}

.footer-brand p {
    color: #999999;
}

.footer-column h4 {
    color: #ffffff;
}

.footer-column a {
    color: #999999;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-description {
    color: #999999;
}

.footer-quote-link {
    color: #ffffff !important;
}

.footer-bottom {
    border-top-color: #292929;
}

.footer-bottom p {
    color: #777777;
}
/* =========================================================
   SERVICES PAGE — FINAL FONT SIZE MATCH
========================================================= */

.services-header .nav-link {
    font-family: "Manrope", sans-serif;
    font-size: 14px !important;
    font-weight: 650;
    letter-spacing: 0.15px;
}

.services-header .logo-text strong {
    font-family: "Manrope", sans-serif;
    font-size: 30px !important;
    font-weight: 800;
}

.services-header .logo-text span {
    font-size: 9px !important;
    letter-spacing: 2.2px;
}

.services-header .header-button {
    font-family: "Manrope", sans-serif;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: 0.7px;
}


/* SERVICES CARDS */

.services-card-content h2 {
    font-family: "Manrope", sans-serif;
    font-size: 22px !important;
    line-height: 1.25;
    font-weight: 750;
}

.services-card-content p {
    font-family: "Inter", sans-serif;
    font-size: 13.5px !important;
    line-height: 1.75;
}

.services-card-link {
    font-family: "Manrope", sans-serif;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 1.25px;
}


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

@media (max-width: 1200px) {

    .services-header .nav-link {
        font-size: 13px !important;
    }

    .services-header .logo-text strong {
        font-size: 28px !important;
    }

    .services-header .header-button {
        font-size: 11px !important;
    }
}


@media (max-width: 700px) {

    .services-header .nav-link {
        font-size: 11px !important;
    }

    .services-header .logo-text strong {
        font-size: 25px !important;
    }

    .services-header .logo-text span {
        font-size: 7px !important;
    }

    .services-header .header-button {
        font-size: 9px !important;
    }

    .services-card-content h2 {
        font-size: 20px !important;
    }

    .services-card-content p {
        font-size: 13px !important;
    }
}


@media (max-width: 480px) {

    .services-header .nav-link {
        font-size: 10px !important;
    }

    .services-header .logo-text strong {
        font-size: 21px !important;
    }

    .services-header .logo-text span {
        font-size: 6px !important;
    }

    .services-header .header-button {
        font-size: 8px !important;
    }

    .services-card-content h2 {
        font-size: 20px !important;
    }

    .services-card-content p {
        font-size: 13px !important;
    }
}
/* =========================
   JSB HERO BACKGROUND
========================= */

.home-page .hero {
    position: relative;
    min-height: 650px;
    width: 100%;

    background-image: url("../../industry%20img.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;

    display: flex;
    align-items: center;
}


/* DARK OVERLAY */

.home-page .hero-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.86) 0%,
        rgba(0, 0, 0, 0.65) 35%,
        rgba(0, 0, 0, 0.25) 68%,
        rgba(0, 0, 0, 0.08) 100%
    );

    z-index: 1;
}


/* HERO CONTENT */

.home-page .hero-content {
    position: relative;
    z-index: 2;

    padding-top: 80px;
    padding-bottom: 100px;
}


/* HEADING */

.home-page .hero h1 {
    max-width: 700px;

    margin: 0;

    color: #fff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 6vw, 88px);
    line-height: 0.98;
    font-weight: 800;

    letter-spacing: -3px;
}

.home-page .hero h1 em {
    display: block;

    color: #c8c8c8;

    font-style: normal;
    font-weight: 600;
}


/* DESCRIPTION */

.home-page .hero-text {
    max-width: 560px;

    margin: 30px 0 0;

    color: #dedede;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.8;
}


/* BUTTON AREA */

.home-page .hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;

    margin-top: 38px;
}


/* BOTTOM META */

.home-page .hero-meta {
    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    width: min(calc(100% - 80px), 1380px);

    display: flex;
    justify-content: flex-end;
    gap: 30px;

    z-index: 2;
}

.home-page .hero-meta span {
    color: #aaa;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

    .home-page .hero {
        min-height: 600px;
        background-position: 62% center;
    }

    .home-page .hero h1 {
        font-size: clamp(48px, 7vw, 70px);
    }

    .home-page .hero-meta {
        width: calc(100% - 50px);
        gap: 18px;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .home-page .hero {
        min-height: 650px;
        background-position: 68% center;
    }

    .home-page .hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.90) 0%,
            rgba(0, 0, 0, 0.72) 55%,
            rgba(0, 0, 0, 0.35) 100%
        );
    }

    .home-page .hero h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .home-page .hero-text {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .home-page .hero-actions {
        flex-wrap: wrap;
        gap: 22px;
    }

    .home-page .hero-meta {
        left: 25px;
        bottom: 22px;

        transform: none;

        width: calc(100% - 50px);

        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 12px 18px;
    }

    .home-page .hero-meta span {
        font-size: 8px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

    .home-page .hero {
        min-height: 620px;
        background-position: 72% center;
    }

    .home-page .hero h1 {
        font-size: 40px;
    }

    .home-page .hero-text {
        font-size: 13px;
    }

}
/* =========================================================
   JSB HOMEPAGE UPDATES
========================================================= */


/* =========================================================
   LIGHT HOMEPAGE NAVBAR
========================================================= */

.home-page .site-header {
    background: #f1f1ef;
    border-bottom: 1px solid #d6d6d2;
}

.home-page .brand-copy strong {
    color: #171717;
}

.home-page .brand-copy span {
    color: #666666;
}

.home-page .nav-link {
    color: #555555;
}

.home-page .nav-link:hover,
.home-page .nav-link.active {
    color: #111111;
}

.home-page .nav-link.active::after {
    background: #111111;
}

.home-page .quote-button {
    background: #171717;
    border-color: #171717;
    color: #ffffff;
}

.home-page .quote-button:hover {
    background: #333333;
    border-color: #333333;
    color: #ffffff;
}


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

.home-page .hero {
    position: relative;
    border-top: 1px solid #d0d0cc;
}


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

.home-about {
    width: 100%;
    background: #ffffff;
    color: #151515;
    padding: 110px 0;
}

.home-about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 90px;
    align-items: center;
}

.home-about-image {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #eeeeec;
}

.home-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-image-label {
    position: absolute;
    left: 0;
    bottom: 0;

    padding: 14px 20px;

    background: rgba(10, 10, 10, 0.88);

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.home-about-content {
    max-width: 650px;
}

.home-about-content .eyebrow {
    margin-bottom: 30px;
}

.home-about-content h2 {
    margin: 0 0 30px;

    font-family: "Manrope", sans-serif;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1.5px;

    color: #151515;
}

.home-about-content h2 em {
    display: block;

    font-style: normal;
    font-weight: 400;

    color: #777777;
}

.home-about-content p {
    margin: 0 0 17px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.8;

    color: #666666;
}

.home-about-content .about-lead {
    margin-bottom: 22px;

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

    color: #292929;
}

.about-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;

    margin-top: 35px;
    margin-bottom: 35px;

    padding-top: 28px;

    border-top: 1px solid #ddddda;
}

.about-detail span {
    display: block;

    margin-bottom: 12px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #333333;
}

.about-detail p {
    margin: 0;

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

    color: #707070;
}


/* =========================================================
   WHY CHOOSE JSB
========================================================= */

.why-jsb {
    background: #f4f4f2;
    color: #151515;

    padding: 110px 0 120px;
}

.why-jsb-header {
    display: grid;

    grid-template-columns: 1fr 0.75fr;
    gap: 100px;

    align-items: end;

    margin-top: 45px;
    margin-bottom: 60px;
}

.why-jsb-header h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 50px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.7px;
}

.why-jsb-header h2 em {
    display: block;

    font-style: normal;
    font-weight: 400;

    color: #777777;
}

.why-jsb-header > p {
    margin: 0;

    max-width: 500px;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: #666666;
}


/* =========================================================
   WHY CARDS
========================================================= */

.why-jsb-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #d8d8d4;
    border-left: 1px solid #d8d8d4;
}

.why-card {
    min-height: 250px;

    padding: 32px;

    background: #ffffff;

    border-right: 1px solid #d8d8d4;
    border-bottom: 1px solid #d8d8d4;

    transition: all 0.3s ease;
}

.why-card:hover {
    background: #eeeeeb;
    transform: translateY(-3px);
}

.why-card-number {
    display: block;

    margin-bottom: 32px;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #999999;
}

.why-card h3 {
    margin: 0 0 14px;

    font-family: "Manrope", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    color: #171717;
}

.why-card p {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.75;

    color: #686868;
}


/* =========================================================
   HOMEPAGE SERVICES - LIGHT
========================================================= */

.home-page .services {
    background: #ffffff;
    color: #151515;
}

.home-page .services .section-heading h2 {
    color: #151515;
}

.home-page .services .section-heading h2 em {
    color: #777777;
}

.home-page .services .section-heading p {
    color: #666666;
}

.home-page .service-row {
    background: #f7f7f5;
    border-color: #ddddda;

    transition: all 0.3s ease;
}

.home-page .service-row:hover {
    background: #eeeeeb;
    transform: translateX(5px);
}

.home-page .service-number {
    color: #999999;
}

.home-page .service-content h3 {
    color: #171717;
}

.home-page .service-content p {
    color: #686868;
}

.home-page .service-arrow {
    color: #171717;
}


/* =========================================================
   INDUSTRIES LIGHT
========================================================= */

.home-page .industries {
    background: #f4f4f2;
    color: #151515;
}

.home-page .industry-item {
    background: #ffffff;
    border-color: #ddddda;

    transition: all 0.3s ease;
}

.home-page .industry-item:hover {
    background: #eeeeeb;
}

.home-page .industry-item span {
    color: #999999;
}

.home-page .industry-item strong {
    color: #171717;
}

.home-page .industry-item b {
    color: #171717;
}


/* =========================================================
   SERVICE AREAS
========================================================= */

.home-page .areas {
    background: #ffffff;
    color: #151515;
}

.home-page .areas h2 {
    color: #151515;
}

.home-page .areas h2 em {
    color: #777777;
}

.home-page .areas p {
    color: #686868;
}

.home-page .area-item {
    border-color: #ddddda;
}

.home-page .area-item span {
    color: #999999;
}

.home-page .area-item strong {
    color: #171717;
}


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

.home-page .cta {
    background: #111111;
    color: #ffffff;
}

.home-page .cta h2 {
    color: #ffffff;
}

.home-page .cta h2 em {
    color: #aaaaaa;
}

.home-page .cta p {
    color: #c0c0c0;
}


/* =========================================================
   RESPONSIVE - ABOUT
========================================================= */

@media (max-width: 1000px) {

    .home-about {
        padding: 80px 0;
    }

    .home-about-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .home-about-image {
        height: 500px;
    }

    .home-about-content {
        max-width: 100%;
    }

    .why-jsb-header {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .why-jsb-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE - TABLET / MOBILE
========================================================= */

@media (max-width: 700px) {

    .home-about {
        padding: 70px 0;
    }

    .home-about-grid {
        gap: 40px;
    }

    .home-about-image {
        height: 400px;
    }

    .home-about-content h2 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .home-about-content .about-lead {
        font-size: 16px;
    }

    .about-details {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    .why-jsb {
        padding: 75px 0;
    }

    .why-jsb-header {
        margin-top: 35px;
        margin-bottom: 40px;
    }

    .why-jsb-header h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .why-jsb-grid {
        grid-template-columns: 1fr;
    }

    .why-card {
        min-height: auto;
        padding: 28px;
    }

}


@media (max-width: 480px) {

    .home-about-image {
        height: 330px;
    }

    .home-about-content h2 {
        font-size: 31px;
    }

    .why-jsb-header h2 {
        font-size: 32px;
    }

}
/* =========================================================
   HOMEPAGE NAVBAR - BLACK
   ONLY NAVBAR CHANGE
========================================================= */

.home-page .site-header {
    background: #050505 !important;
    border-bottom: 1px solid #262626 !important;
}

.home-page .brand-copy strong {
    color: #ffffff !important;
}

.home-page .brand-copy span {
    color: #999999 !important;
}

.home-page .nav-link {
    color: #a7a7a7 !important;
}

.home-page .nav-link:hover,
.home-page .nav-link.active {
    color: #ffffff !important;
}

.home-page .nav-link.active::after {
    background: #ffffff !important;
}

.home-page .quote-button {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

.home-page .quote-button:hover {
    background: #dddddd !important;
    border-color: #dddddd !important;
    color: #111111 !important;
}
/* Remove line below navbar */

.home-page .site-header {
    border-bottom: none !important;
}

.home-page .hero {
    border-top: none !important;
}
 /* =========================================================
   CLIENT REQUIRED FOOTER CONTENT
========================================================= */

.footer-company-title {
    margin: 0 0 8px;

    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.footer-service-title {
    margin: 0 0 12px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #b5b5b5;
}

.footer-description {
    margin: 0;
    max-width: 380px;

    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    line-height: 1.8;
    color: #858585;
}


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

.site-footer .footer-contact p {
    margin: 0 0 15px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #858585;
}

.site-footer .footer-contact p strong {
    color: #ffffff;
    font-weight: 600;
}

.site-footer .footer-contact p a {
    display: inline;

    margin: 0;

    color: #858585;
}

.site-footer .footer-contact p a:hover {
    color: #ffffff;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.footer-disclaimer {
    padding: 32px 0 25px;

    border-bottom: 1px solid #292929;
}

.footer-disclaimer h4 {
    margin: 0 0 14px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #ffffff;
}

.footer-disclaimer blockquote {
    margin: 0;
    padding: 0;

    max-width: 1100px;

    border: 0;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    line-height: 1.8;

    color: #707070;
}


/* =========================================================
   PRIVACY / TERMS
========================================================= */

.footer-legal {
    padding: 20px 0 0;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-legal-links a {
    margin: 0 !important;

    font-family: "Inter", sans-serif;
    font-size: 11px;

    color: #858585;
}

.footer-legal-links a:hover {
    color: #ffffff;
}

.footer-legal-links span {
    font-size: 10px;
    color: #4f4f4f;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.site-footer .footer-bottom {
    padding-top: 20px;
}

.site-footer .footer-bottom span {
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;

    color: #5f5f5f;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .footer-disclaimer {
        padding-top: 28px;
    }

    .footer-disclaimer blockquote {
        font-size: 10.5px;
        line-height: 1.75;
    }

    .footer-legal-links {
        flex-wrap: wrap;
    }

}


@media (max-width: 480px) {

    .footer-company-title {
        font-size: 17px;
    }

    .footer-description {
        font-size: 11.5px;
    }

    .footer-disclaimer blockquote {
        font-size: 10px;
    }

}
/* =========================================================
   WHY JSB - BACKGROUND IMAGE VERSION
========================================================= */

/* MAIN SECTION */
.home-page .why-jsb {
    position: relative;
    overflow: hidden;
}

/* BACKGROUND IMAGE */
.home-page .why-jsb-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../../section%20img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* DARK OVERLAY */
.home-page .why-jsb-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(0, 0, 0, 0.45);
}

/* CONTENT + CARDS */
.home-page .why-jsb-content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   EYEBROW
========================================================= */

.home-page .why-jsb .eyebrow.dark {
    color: #c4c4c4;
}

.home-page .why-jsb .eyebrow.dark span {
    background: #bdbdbd;
}


/* =========================================================
   HEADING
========================================================= */

.home-page .why-jsb-heading {
    display: grid;
    grid-template-columns: 1fr 0.65fr;

    gap: 100px;

    align-items: end;

    margin-top: 42px;
    margin-bottom: 60px;
}

.home-page .why-jsb-heading h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 52px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.8px;

    color: #ffffff;
}

.home-page .why-jsb-heading h2 em {
    display: block;

    font-style: normal;
    font-weight: 400;

    color: #a7a7a7;
}

.home-page .why-jsb-heading > p {
    margin: 0;
    max-width: 480px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.8;

    color: #c0c0c0;
}


/* =========================================================
   CARDS GRID
========================================================= */

.home-page .why-jsb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}


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

.home-page .why-jsb-card {
    min-height: 275px;

    padding: 32px;

    background: rgba(35, 35, 35, 0.78);

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

    backdrop-filter: blur(3px);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.home-page .why-jsb-card:hover {
    background: rgba(55, 55, 55, 0.88);

    transform: translateY(-4px);
}


/* =========================================================
   CARD TOP
========================================================= */

.home-page .why-jsb-card-top {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 42px;
}

.home-page .why-jsb-number {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #b4b4b4;
}

.home-page .why-jsb-line {
    width: 45px;
    height: 1px;

    background: #777777;
}


/* =========================================================
   CARD HEADING
========================================================= */

.home-page .why-jsb-card h3 {
    margin: 0 0 16px;

    font-family: "Manrope", sans-serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   CARD TEXT
========================================================= */

.home-page .why-jsb-card p {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.75;

    color: #b8b8b8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .home-page .why-jsb {
        padding: 85px 0 95px;
    }

    .home-page .why-jsb-heading {
        grid-template-columns: 1fr;
        gap: 30px;

        margin-top: 35px;
        margin-bottom: 50px;
    }

    .home-page .why-jsb-heading h2 {
        font-size: 44px;
    }

    .home-page .why-jsb-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .home-page .why-jsb {
        padding: 70px 0 75px;
    }

    .home-page .why-jsb-heading {
        margin-bottom: 40px;
    }

    .home-page .why-jsb-heading h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .home-page .why-jsb-grid {
        grid-template-columns: 1fr;
    }

    .home-page .why-jsb-card {
        min-height: auto;
        padding: 28px;
    }

    .home-page .why-jsb-card-top {
        margin-bottom: 30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .home-page .why-jsb-heading h2 {
        font-size: 32px;
    }

    .home-page .why-jsb-heading > p {
        font-size: 13px;
    }

}
/* =========================================
   BACKGROUND IMAGE — CARDS 02, 04 & 06
========================================= */

/* Card 02, 04, 06 */
.why-jsb-card:nth-child(2),
.why-jsb-card:nth-child(4),
.why-jsb-card:nth-child(6) {
    position: relative;
    overflow: hidden;
}

/* Background image */
.why-jsb-card:nth-child(2)::before,
.why-jsb-card:nth-child(4)::before,
.why-jsb-card:nth-child(6)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../../section1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.03);
}

/* Dark overlay */
.why-jsb-card:nth-child(2)::after,
.why-jsb-card:nth-child(4)::after,
.why-jsb-card:nth-child(6)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(0, 0, 0, 0.35);
}

/* Card ka content image ke upar */
.why-jsb-card:nth-child(2) > *,
.why-jsb-card:nth-child(4) > *,
.why-jsb-card:nth-child(6) > * {
    position: relative;
    z-index: 2;
}
.why-jsb-card:nth-child(1),
.why-jsb-card:nth-child(3),
.why-jsb-card:nth-child(5) {
    background: linear-gradient(
        135deg,
        #101820 0%,
        #18232d 50%,
        #111a22 100%
    ) !important;
}
/* =========================================
   SERVICES — 2 COLUMNS / 3 ROWS
========================================= */

.services-page .services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #d4d4d1;
    border: 1px solid #d4d4d1;
    margin-top: 45px;
}

/* SERVICE CARD */
.services-page .service-item {
    position: relative;
    min-height: 250px;
    padding: 38px 42px;

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

    border: none !important;
    background: #ffffff;

    transition: background 0.3s ease;
}

/* Alternate grey cards */
.services-page .service-item:nth-child(even) {
    background: #eeeeec;
}

/* Number */
.services-page .service-item .service-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #929292;
    margin-bottom: 30px;
}

/* TITLE */
.services-page .service-item h3 {
    font-size: 27px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -0.6px;
    color: #111111;
    margin: 0 0 12px;
}

/* DESCRIPTION */
.services-page .service-item p {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* ARROW */
.services-page .service-item .service-arrow {
    position: absolute;
    right: 30px;
    bottom: 28px;

    font-size: 25px;
    color: #151515;

    transition: transform 0.3s ease;
}

/* HOVER */
.services-page .service-item:hover {
    background: #dededb;
}

.services-page .service-item:hover .service-arrow {
    transform: translate(5px, -5px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .services-page .services-list {
        grid-template-columns: 1fr;
    }

    .services-page .service-item {
        min-height: 220px;
        padding: 30px;
    }

    .services-page .service-item h3 {
        font-size: 23px;
    }
}
/* =========================================================
   HOMEPAGE SERVICES — 2 COLUMNS × 3 ROWS
   ONLY SERVICES CARDS
   HEADING WILL NOT CHANGE
========================================================= */


/* SERVICES SECTION */

.home-page .services {
    background: #ffffff !important;
}


/* 2 COLUMNS */

.home-page .services .services-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 2px !important;

    background: #d2d2cf !important;
    border: 1px solid #d2d2cf !important;

    margin-top: 45px;
}


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

.home-page .services .service-row {
    position: relative;

    min-height: 285px;

    padding: 42px 48px;

    display: flex !important;
    flex-direction: column;
    justify-content: space-between;

    border: none !important;

    transform: none !important;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   LIGHT CARDS
   01 / 03 / 05
========================================================= */

.home-page .services .service-row:nth-child(odd) {
    background: #f5f5f3 !important;
    color: #111111 !important;
}


/* =========================================================
   DARK CARDS
   02 / 04 / 06
========================================================= */

.home-page .services .service-row:nth-child(even) {
    background: #252a2e !important;
    color: #ffffff !important;
}


/* =========================================================
   NUMBER
========================================================= */

.home-page .services .service-row .service-number {
    position: absolute;

    top: 32px;
    left: 38px;

    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #999999 !important;
}


/* DARK CARD NUMBER */

.home-page .services .service-row:nth-child(even) .service-number {
    color: #aeb3b6 !important;
}


/* =========================================================
   CONTENT
========================================================= */

.home-page .services .service-row .service-content {
    padding-top: 42px;
    padding-right: 35px;
}


/* =========================================================
   TITLE
========================================================= */

.home-page .services .service-row .service-content h3 {
    margin: 0 0 14px;

    font-size: 28px !important;
    line-height: 1.15;

    font-weight: 750;

    letter-spacing: -0.6px;

    color: #111111 !important;
}


/* DARK TITLE */

.home-page .services .service-row:nth-child(even) .service-content h3 {
    color: #ffffff !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-page .services .service-row .service-content p {
    margin: 0;

    max-width: 520px;

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

    color: #666666 !important;
}


/* DARK DESCRIPTION */

.home-page .services .service-row:nth-child(even) .service-content p {
    color: #c0c4c6 !important;
}


/* =========================================================
   ARROW
========================================================= */

.home-page .services .service-row .service-arrow {
    position: absolute;

    right: 32px;
    bottom: 28px;

    font-size: 26px !important;

    color: #171717 !important;

    transition: transform 0.3s ease;
}


/* DARK ARROW */

.home-page .services .service-row:nth-child(even) .service-arrow {
    color: #ffffff !important;
}


/* =========================================================
   HOVER
========================================================= */

.home-page .services .service-row:nth-child(odd):hover {
    background: #e9e9e6 !important;
    transform: translateY(-3px) !important;
}

.home-page .services .service-row:nth-child(even):hover {
    background: #30373c !important;
    transform: translateY(-3px) !important;
}

.home-page .services .service-row:hover .service-arrow {
    transform: translate(5px, -5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .home-page .services .services-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .home-page .services .service-row {
        min-height: 260px;
        padding: 35px;
    }

    .home-page .services .service-row .service-content h3 {
        font-size: 24px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .home-page .services .services-list {
        grid-template-columns: 1fr !important;
    }

    .home-page .services .service-row {
        min-height: 230px;
        padding: 32px;
    }

    .home-page .services .service-row .service-content {
        padding-top: 35px;
    }

    .home-page .services .service-row .service-content h3 {
        font-size: 23px !important;
    }

    .home-page .services .service-row .service-content p {
        font-size: 14px !important;
    }
}
/* =========================================================
   SERVICES — ZIG ZAG COLOUR PATTERN
========================================================= */

/* 01, 04, 05 — LIGHT */
.home-page .services .service-row:nth-child(1),
.home-page .services .service-row:nth-child(4),
.home-page .services .service-row:nth-child(5) {
    background: #f5f5f3 !important;
    color: #111111 !important;
}

/* 02, 03, 06 — DARK */
.home-page .services .service-row:nth-child(2),
.home-page .services .service-row:nth-child(3),
.home-page .services .service-row:nth-child(6) {
    background: #252a2e !important;
    color: #ffffff !important;
}

/* DARK CARD TEXT */
.home-page .services .service-row:nth-child(2) .service-content h3,
.home-page .services .service-row:nth-child(3) .service-content h3,
.home-page .services .service-row:nth-child(6) .service-content h3 {
    color: #ffffff !important;
}

.home-page .services .service-row:nth-child(2) .service-content p,
.home-page .services .service-row:nth-child(3) .service-content p,
.home-page .services .service-row:nth-child(6) .service-content p {
    color: #c0c4c6 !important;
}

/* DARK ARROW */
.home-page .services .service-row:nth-child(2) .service-arrow,
.home-page .services .service-row:nth-child(3) .service-arrow,
.home-page .services .service-row:nth-child(6) .service-arrow {
    color: #ffffff !important;
}

/* LIGHT CARD TEXT */
.home-page .services .service-row:nth-child(1) .service-content h3,
.home-page .services .service-row:nth-child(4) .service-content h3,
.home-page .services .service-row:nth-child(5) .service-content h3 {
    color: #111111 !important;
}

.home-page .services .service-row:nth-child(1) .service-content p,
.home-page .services .service-row:nth-child(4) .service-content p,
.home-page .services .service-row:nth-child(5) .service-content p {
    color: #666666 !important;
}

/* LIGHT ARROW */
.home-page .services .service-row:nth-child(1) .service-arrow,
.home-page .services .service-row:nth-child(4) .service-arrow,
.home-page .services .service-row:nth-child(5) .service-arrow {
    color: #171717 !important;
}
/* =========================================================
   SERVICES HEADING — PREMIUM TYPOGRAPHY
========================================================= */

.home-page .services .section-heading h2 {
    font-size: 48px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: #111111 !important;
    margin-bottom: 16px !important;
}

/* "built around your needs." — GREY */
.home-page .services .section-heading h2 em {
    color: #777777 !important;
    font-style: italic !important;
    font-weight: 700 !important;
}


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

.home-page .services .section-heading p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #666666 !important;
    max-width: 1050px !important;
    margin-top: 0 !important;
}


/* =========================================================
   DESKTOP — MORE PRESENCE
========================================================= */

@media (min-width: 1000px) {
    .home-page .services .section-heading h2 {
        font-size: 52px !important;
    }

    .home-page .services .section-heading p {
        font-size: 19px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
    .home-page .services .section-heading h2 {
        font-size: 34px !important;
        letter-spacing: -0.8px !important;
    }

    .home-page .services .section-heading p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }
}
/* =========================================================
   INDUSTRIES BACKGROUND IMAGE
========================================================= */

.home-page .industries {
    position: relative;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.92) 0%,
            rgba(244,244,242,0.86) 50%,
            rgba(255,255,255,0.90) 100%
        ),
        url("../../industry%20img.png") center center / cover no-repeat !important;

    overflow: hidden;
}

.home-page .industries .container {
    position: relative;
    z-index: 2;
}
/* =========================================================
   INDUSTRIES — PREMIUM IMAGE + 3 × 2 GRID
========================================================= */

.home-page .industries {
    position: relative;
    width: 100%;
    min-height: 900px;
    padding: 115px 0 125px;

    overflow: hidden;

    color: #ffffff;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.home-page .industries-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../../industry%20img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.03);
}


/* =========================================================
   DARK OVERLAY
   IMPORTANT — IMAGE WILL NOW BE VISIBLE
========================================================= */

.home-page .industries-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 9, 0.82) 0%,
            rgba(10, 12, 15, 0.64) 48%,
            rgba(5, 7, 9, 0.78) 100%
        );
}


/* =========================================================
   CONTENT
========================================================= */

.home-page .industries-content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   EYEBROW
========================================================= */

.home-page .industries-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 32px;

    color: #c2c5c7;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.home-page .industries-eyebrow span {
    width: 48px;
    height: 1px;

    background: #aeb2b5;

    display: block;
}


/* =========================================================
   HEADING
========================================================= */

.home-page .industries-heading {
    max-width: 1050px;
    margin-bottom: 58px;
}

.home-page .industries-heading h2 {
    margin: 0 0 18px;

    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.05;

    font-weight: 750;
    letter-spacing: -2px;

    color: #ffffff;
}

.home-page .industries-heading h2 em {
    color: #a9adb0;
    font-style: italic;
}

.home-page .industries-heading p {
    max-width: 900px;

    margin: 0;

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

    color: #d0d3d5;
}


/* =========================================================
   INDUSTRY GRID
   3 COLUMNS × 2 ROWS
========================================================= */

.home-page .industries-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 2px;

    background: rgba(255,255,255,0.18);

    border: 1px solid rgba(255,255,255,0.18);
}


/* =========================================================
   INDUSTRY CARD
========================================================= */

.home-page .industry-card {
    position: relative;

    min-height: 275px;

    padding: 30px 34px 32px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    text-decoration: none;

    background: rgba(245,245,243,0.94);

    color: #111111;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


/* =========================================================
   DARK CARDS
========================================================= */

.home-page .industry-card.dark-card {
    background: rgba(32,36,40,0.94);

    color: #ffffff;
}


/* =========================================================
   NUMBER
========================================================= */

.home-page .industry-number {
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #8d9194;
}

.home-page .dark-card .industry-number {
    color: #aeb2b5;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.home-page .industry-card-content {
    padding-right: 35px;
}


/* =========================================================
   TITLE
========================================================= */

.home-page .industry-card h3 {
    margin: 0 0 13px;

    font-size: 25px;
    line-height: 1.15;

    font-weight: 750;

    letter-spacing: -0.5px;

    color: #111111;
}

.home-page .industry-card.dark-card h3 {
    color: #ffffff;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-page .industry-card p {
    margin: 0;

    max-width: 390px;

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

    color: #62676a;
}

.home-page .industry-card.dark-card p {
    color: #c1c5c7;
}


/* =========================================================
   ARROW
========================================================= */

.home-page .industry-arrow {
    position: absolute;

    right: 27px;
    bottom: 25px;

    font-size: 27px;
    line-height: 1;

    color: #16191b;

    transition:
        transform 0.35s ease;
}

.home-page .industry-card.dark-card .industry-arrow {
    color: #ffffff;
}


/* =========================================================
   HOVER
========================================================= */

.home-page .industry-card:hover {
    transform: translateY(-5px);

    background: rgba(255,255,255,0.98);
}

.home-page .industry-card.dark-card:hover {
    background: rgba(48,53,58,0.98);
}

.home-page .industry-card:hover .industry-arrow {
    transform: translate(5px, -5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .home-page .industries {
        padding: 90px 0 100px;
    }

    .home-page .industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .industry-card {
        min-height: 255px;
    }

    .home-page .industries-heading h2 {
        font-size: 44px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .home-page .industries {
        min-height: auto;
        padding: 75px 0 80px;
    }

    .home-page .industries-heading {
        margin-bottom: 40px;
    }

    .home-page .industries-heading h2 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .home-page .industries-heading p {
        font-size: 15px;
    }

    .home-page .industries-grid {
        grid-template-columns: 1fr;
    }

    .home-page .industry-card {
        min-height: 235px;
        padding: 27px 28px;
    }

    .home-page .industry-card h3 {
        font-size: 23px;
    }

    .home-page .industry-card p {
        font-size: 14px;
    }
}
/* =========================================================
   PREMIUM INDUSTRIES SECTION
   JSB SECURITY SERVICES
========================================================= */

.home-page .industries-premium,
.industries-page .industries-premium {

    position: relative;
    width: 100%;
    min-height: 820px;

    overflow: hidden;

    background: #08090a;
    color: #ffffff;

    padding: 110px 0 120px;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.home-page .industries-bg,
.industries-page .industries-bg {

    position: absolute;
    inset: 0;

    background-image: url("../../industry%20img.png");

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

    transform: scale(1.03);

    z-index: 0;
}


/* =========================================================
   IMAGE OVERLAY
   LIGHTER THAN CURRENT VERSION
   SO IMAGE STAYS VISIBLE
========================================================= */

.home-page .industries-overlay,
.industries-page .industries-overlay {

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 9, 0.94) 0%,
            rgba(5, 7, 9, 0.78) 32%,
            rgba(5, 7, 9, 0.42) 65%,
            rgba(5, 7, 9, 0.58) 100%
        );

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.home-page .industries-premium-inner,
.industries-page .industries-premium-inner {

    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 100px),
        1380px
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(600px, 1.28fr);

    gap: 70px;

    align-items: center;
}


/* =========================================================
   LEFT INTRO
========================================================= */

.home-page .industries-intro,
.industries-page .industries-intro {

    max-width: 520px;

    padding: 55px 45px;

    background: rgba(8, 9, 10, 0.72);

    border-left: 1px solid rgba(255,255,255,0.35);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

}


/* =========================================================
   EYEBROW
========================================================= */

.home-page .industries-eyebrow,
.industries-page .industries-eyebrow {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 42px;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #aeb2b5;

}


.home-page .industries-eyebrow span,
.industries-page .industries-eyebrow span {

    width: 45px;
    height: 1px;

    background: #9da1a4;

}


/* =========================================================
   MAIN HEADING
========================================================= */

.home-page .industries-intro h2,
.industries-page .industries-intro h2 {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(42px, 4vw, 64px);

    line-height: 1.03;

    letter-spacing: -2.5px;

    font-weight: 750;

    color: #ffffff;

}


.home-page .industries-intro h2 em,
.industries-page .industries-intro h2 em {

    display: block;

    margin-top: 5px;

    font-style: italic;

    color: #aeb2b5;

}


/* =========================================================
   INTRO DESCRIPTION
========================================================= */

.home-page .industries-intro > p,
.industries-page .industries-intro > p {

    margin: 30px 0 0;

    max-width: 450px;

    font-family: "Manrope", sans-serif;

    font-size: 16px;

    line-height: 1.75;

    color: #c8cbcd;

}


/* =========================================================
   INTRO BOTTOM LINE
========================================================= */

.home-page .industries-intro-line,
.industries-page .industries-intro-line {

    width: 100%;

    height: 1px;

    margin: 50px 0 22px;

    background: rgba(255,255,255,0.18);

}


.home-page .industries-note,
.industries-page .industries-note {

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: #777d81;

}


/* =========================================================
   INDUSTRY CARDS
========================================================= */

.home-page .industries-cards,
.industries-page .industries-cards {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

}


/* =========================================================
   CARD BASE
========================================================= */

.home-page .industry-card,
.industries-page .industry-card {

    position: relative;

    min-height: 245px;

    padding: 28px 30px 30px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.18);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;

}


/* =========================================================
   LIGHT GLASS CARDS
========================================================= */

.home-page .industry-card-light,
.industries-page .industry-card-light {

    background: rgba(245,245,243,0.91);

    color: #111111;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.15);

}


.home-page .industry-card-light:hover,
.industries-page .industry-card-light:hover {

    background: rgba(255,255,255,0.97);

    transform: translateY(-6px);

    border-color: rgba(255,255,255,0.8);

}


/* =========================================================
   DARK GLASS CARDS
========================================================= */

.home-page .industry-card-dark,
.industries-page .industry-card-dark {

    background: rgba(25,29,32,0.88);

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.28);

}


.home-page .industry-card-dark:hover,
.industries-page .industry-card-dark:hover {

    background: rgba(35,40,44,0.95);

    transform: translateY(-6px);

    border-color: rgba(255,255,255,0.38);

}


/* =========================================================
   NUMBER
========================================================= */

.home-page .industry-number,
.industries-page .industry-number {

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.home-page .industry-card-light .industry-number,
.industries-page .industry-card-light .industry-number {

    color: #85898c;

}


.home-page .industry-card-dark .industry-number,
.industries-page .industry-card-dark .industry-number {

    color: #969da1;

}


/* =========================================================
   CARD CONTENT
========================================================= */

.home-page .industry-card-content,
.industries-page .industry-card-content {

    padding-right: 35px;

}


.home-page .industry-card h3,
.industries-page .industry-card h3 {

    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;

    font-size: 23px;

    line-height: 1.18;

    letter-spacing: -0.6px;

    font-weight: 750;

}


.home-page .industry-card-light h3,
.industries-page .industry-card-light h3 {

    color: #111111;

}


.home-page .industry-card-dark h3,
.industries-page .industry-card-dark h3 {

    color: #ffffff;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-page .industry-card p,
.industries-page .industry-card p {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    line-height: 1.65;

}


.home-page .industry-card-light p,
.industries-page .industry-card-light p {

    color: #606568;

}


.home-page .industry-card-dark p,
.industries-page .industry-card-dark p {

    color: #b9bec1;

}


/* =========================================================
   ARROW
========================================================= */

.home-page .industry-arrow,
.industries-page .industry-arrow {

    position: absolute;

    right: 25px;
    bottom: 22px;

    font-size: 24px;

    line-height: 1;

    transition:
        transform 0.3s ease;

}


.home-page .industry-card-light .industry-arrow,
.industries-page .industry-card-light .industry-arrow {

    color: #151515;

}


.home-page .industry-card-dark .industry-arrow,
.industries-page .industry-card-dark .industry-arrow {

    color: #ffffff;

}


.home-page .industry-card:hover .industry-arrow,
.industries-page .industry-card:hover .industry-arrow {

    transform: translate(5px,-5px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .home-page .industries-premium-inner,
    .industries-page .industries-premium-inner {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .home-page .industries-intro,
    .industries-page .industries-intro {

        max-width: 700px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .home-page .industries-premium,
    .industries-page .industries-premium {

        padding: 80px 0;

    }

    .home-page .industries-premium-inner,
    .industries-page .industries-premium-inner {

        width: calc(100% - 36px);

    }

    .home-page .industries-intro,
    .industries-page .industries-intro {

        padding: 38px 28px;

    }

    .home-page .industries-intro h2,
    .industries-page .industries-intro h2 {

        font-size: 40px;

        letter-spacing: -1.5px;

    }

    .home-page .industries-cards,
    .industries-page .industries-cards {

        grid-template-columns: 1fr;

    }

    .home-page .industry-card,
    .industries-page .industry-card {

        min-height: 215px;

    }

}
/* =========================================================
   INDUSTRIES — PREMIUM FLOATING LAYOUT
   LEFT CONTENT + 3 x 2 COMPACT CARDS
========================================================= */

.home-page .industries {
    position: relative;
    overflow: hidden;
    min-height: 900px;
    padding: 120px 0 110px;
    background: #080b0e !important;
    color: #fff;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.home-page .industries::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../industry%20img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.72;
}


/* DARK OVERLAY — IMAGE VISIBLE RAHEGI */

.home-page .industries::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4,7,10,0.88) 0%,
            rgba(4,7,10,0.60) 32%,
            rgba(4,7,10,0.28) 65%,
            rgba(4,7,10,0.55) 100%
        );
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.home-page .industries .container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.78fr 1.7fr;
    gap: 70px;

    align-items: center;
}


/* =========================================================
   LEFT SIDE — NO BOX
========================================================= */

.home-page .industries .industries-intro {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    padding: 20px 0;

    max-width: 450px;
}


/* EYEBROW */

.home-page .industries .eyebrow {
    color: #b6b6b6 !important;
    letter-spacing: 3px;
    margin-bottom: 30px;
}


/* SMALL LINE */

.home-page .industries .eyebrow span {
    background: #b99a5b !important;
}


/* MAIN HEADING */

.home-page .industries .industries-intro h2 {
    margin: 0;

    font-size: clamp(48px, 4.4vw, 72px) !important;
    line-height: 0.98;

    letter-spacing: -3px;

    font-weight: 800;

    color: #ffffff !important;
}


/* ITALIC WORD */

.home-page .industries .industries-intro h2 em {
    display: block;

    color: #b8b8b8 !important;

    font-style: italic;
}


/* DESCRIPTION */

.home-page .industries .industries-intro > p {
    margin-top: 34px;

    max-width: 410px;

    font-size: 16px !important;
    line-height: 1.75;

    color: #c5c5c5 !important;
}


/* BOTTOM SMALL TEXT */

.home-page .industries .industries-intro::after {
    content: "PROFESSIONAL SECURITY SOLUTIONS";

    display: block;

    margin-top: 60px;
    padding-top: 22px;

    width: 100%;

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

    color: #a8956c;

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

    letter-spacing: 3px;
}


/* =========================================================
   CARDS GRID — 3 COLUMNS × 2 ROWS
========================================================= */

.home-page .industries .industry-grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;

    background: transparent !important;
}


/* =========================================================
   COMPACT CARDS
========================================================= */

.home-page .industries .industry-card {
    position: relative;

    min-height: 205px !important;

    padding: 27px 28px 30px !important;

    display: flex !important;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid rgba(255,255,255,0.16) !important;

    border-radius: 0 !important;

    backdrop-filter: blur(5px);

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;

    overflow: hidden;
}


/* =========================================================
   LIGHT / DARK ZIGZAG
========================================================= */


/* 01 WHITE */

.home-page .industries .industry-card:nth-child(1) {
    background: rgba(245,245,242,0.94) !important;
    color: #111 !important;
}


/* 02 DARK */

.home-page .industries .industry-card:nth-child(2) {
    background: rgba(18,23,28,0.94) !important;
    color: #fff !important;
}


/* 03 WHITE */

.home-page .industries .industry-card:nth-child(3) {
    background: rgba(245,245,242,0.94) !important;
    color: #111 !important;
}


/* 04 DARK */

.home-page .industries .industry-card:nth-child(4) {
    background: rgba(18,23,28,0.94) !important;
    color: #fff !important;
}


/* 05 WHITE */

.home-page .industries .industry-card:nth-child(5) {
    background: rgba(245,245,242,0.94) !important;
    color: #111 !important;
}


/* 06 DARK */

.home-page .industries .industry-card:nth-child(6) {
    background: rgba(18,23,28,0.94) !important;
    color: #fff !important;
}


/* =========================================================
   CARD NUMBER
========================================================= */

.home-page .industries .industry-number {
    font-size: 11px !important;

    font-weight: 700;

    letter-spacing: 2px;

    color: #8d9397 !important;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.home-page .industries .industry-card-content {
    padding: 0 !important;

    margin-top: 25px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.home-page .industries .industry-card h3 {
    margin: 0 0 10px !important;

    font-size: 22px !important;

    line-height: 1.15;

    letter-spacing: -0.6px;

    font-weight: 750;
}


/* LIGHT TITLE */

.home-page .industries .industry-card:nth-child(odd) h3 {
    color: #111 !important;
}


/* DARK TITLE */

.home-page .industries .industry-card:nth-child(even) h3 {
    color: #fff !important;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.home-page .industries .industry-card p {
    margin: 0 !important;

    max-width: 300px;

    font-size: 13px !important;

    line-height: 1.6;
}


/* LIGHT DESCRIPTION */

.home-page .industries .industry-card:nth-child(odd) p {
    color: #666d70 !important;
}


/* DARK DESCRIPTION */

.home-page .industries .industry-card:nth-child(even) p {
    color: #c0c4c6 !important;
}


/* =========================================================
   ARROW
========================================================= */

.home-page .industries .industry-arrow {
    position: absolute;

    right: 23px;
    bottom: 20px;

    font-size: 22px !important;

    color: inherit !important;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


/* =========================================================
   OUR APPROACH — INDUSTRIES STYLE HOVER
========================================================= */

.about-approach .about-approach-card {
    position: relative !important;
    background: #151515 !important;
    border: 1px solid #353535 !important;
    border-left: 3px solid transparent !important;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}


/* HOVER — DARK + SUBTLE WARM TINT */

.about-approach .about-approach-card:hover {
    background:
        linear-gradient(
            90deg,
            rgba(188, 157, 96, 0.13) 0%,
            rgba(188, 157, 96, 0.055) 35%,
            rgba(20, 20, 20, 0.96) 100%
        ) !important;

    border-color: #4a4a46 !important;

    /* screenshot style thin accent */
    border-left: 3px solid #b59a63 !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.24) !important;
}


/* NUMBER */

.about-approach .about-card-number {
    color: #777777 !important;
    transition: color 0.35s ease !important;
}

.about-approach .about-approach-card:hover .about-card-number {
    color: #c0a66d !important;
}


/* SMALL LINE */

.about-approach .about-card-line {
    width: 34px !important;
    height: 1px !important;
    background: #555555 !important;

    transition:
        width 0.35s ease,
        background 0.35s ease !important;
}

.about-approach .about-approach-card:hover .about-card-line {
    width: 50px !important;
    background: #9f895d !important;
}


/* TITLE */

.about-approach .about-approach-card h3 {
    color: #ffffff !important;
    transition: color 0.35s ease !important;
}

.about-approach .about-approach-card:hover h3 {
    color: #d1b574 !important;
}


/* DESCRIPTION */

.about-approach .about-approach-card p {
    color: #929292 !important;
    transition: color 0.35s ease !important;
}

.about-approach .about-approach-card:hover p {
    /* screenshot varga — description gold nahi */
    color: #d0d0d0 !important;
}


/* HOVER TITLE */

.home-page .industries .industry-card:hover h3 {
    color: #ffffff !important;
}


/* HOVER DESCRIPTION */

.home-page .industries .industry-card:hover p {
    color: #c8c8c8 !important;
}


/* HOVER NUMBER */

.home-page .industries .industry-card:hover .industry-number {
    color: #b99a5b !important;
}


/* HOVER ARROW */

.home-page .industries .industry-card:hover .industry-arrow {
    color: #c7a86b !important;

    transform: translate(5px, -5px);
}


/* =========================================================
   SMALL GOLD ACCENT
========================================================= */

.home-page .industries .industry-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 2px;

    background: #b99a5b;

    transition: width 0.35s ease;
}


.home-page .industries .industry-card:hover::before {
    width: 100%;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .home-page .industries .container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .home-page .industries .industries-intro {
        max-width: 700px;
    }

    .home-page .industries .industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .home-page .industries {
        padding: 80px 0;
    }

    .home-page .industries .industries-intro h2 {
        font-size: 44px !important;
        letter-spacing: -2px;
    }

    .home-page .industries .industry-grid {
        grid-template-columns: 1fr !important;
    }

    .home-page .industries .industry-card {
        min-height: 190px !important;
    }

}
/* =========================================================
   INDUSTRIES — PREMIUM HORIZONTAL FLOATING LAYOUT
========================================================= */

.home-page .industries {
    position: relative;
    overflow: hidden;
    padding: 110px 0 115px !important;
    min-height: 850px;

    background: #080b0e !important;
}


/* =========================================================
   BACKGROUND — KEEP IMAGE VISIBLE
========================================================= */

.home-page .industries::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("../industry%20img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.78;
}


/* SOFT DARK OVERLAY */

.home-page .industries::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4,7,10,0.82),
            rgba(4,7,10,0.38),
            rgba(4,7,10,0.72)
        );
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.home-page .industries .container {
    position: relative;
    z-index: 2;

    display: grid !important;

    grid-template-columns: 0.75fr 1.65fr !important;

    gap: 75px;

    align-items: center;
}


/* =========================================================
   LEFT HEADING — CENTERED VERTICALLY
========================================================= */

.home-page .industries .industries-intro {
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    max-width: 430px;

    align-self: center;
}


/* EYEBROW */

.home-page .industries .industries-intro .eyebrow {
    margin-bottom: 28px;

    color: #b8b8b8 !important;

    letter-spacing: 3px;
}


/* GOLD ACCENT LINE */

.home-page .industries .industries-intro .eyebrow span {
    background: #b89a62 !important;
}


/* HEADING */

.home-page .industries .industries-intro h2 {
    margin: 0 !important;

    font-size: clamp(48px, 4.2vw, 68px) !important;

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 800;

    color: #ffffff !important;
}


/* ITALIC PART */

.home-page .industries .industries-intro h2 em {
    color: #bdbdbd !important;
    font-style: italic;
}


/* DESCRIPTION */

.home-page .industries .industries-intro > p {
    margin-top: 30px !important;

    max-width: 400px;

    font-size: 16px !important;

    line-height: 1.75;

    color: #c6c6c6 !important;
}


/* =========================================================
   INDUSTRY GRID
   2 COLUMNS × 3 ROWS
========================================================= */

.home-page .industries .industry-grid {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 0 38px !important;

    background: transparent !important;

    width: 100%;
}


/* =========================================================
   REMOVE BOX FEEL
========================================================= */

.home-page .industries .industry-card {
    position: relative;

    min-height: 145px !important;

    padding: 25px 5px 25px 5px !important;

    display: grid !important;

    grid-template-columns: 38px 1fr 30px;

    column-gap: 18px;

    align-items: center;

    background: transparent !important;

    border: none !important;

    border-bottom: 1px solid rgba(255,255,255,0.22) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;

    backdrop-filter: none !important;

    transition:
        background 0.35s ease,
        padding 0.35s ease,
        border-color 0.35s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.home-page .industries .industry-number {
    align-self: start;

    padding-top: 3px;

    font-size: 11px !important;

    font-weight: 700;

    letter-spacing: 2px;

    color: #a2a6a8 !important;
}


/* =========================================================
   CONTENT
========================================================= */

.home-page .industries .industry-card-content {
    padding: 0 !important;

    margin: 0 !important;

    min-width: 0;
}


/* =========================================================
   TITLES
========================================================= */

.home-page .industries .industry-card h3 {
    margin: 0 0 7px !important;

    font-size: 21px !important;

    line-height: 1.2;

    letter-spacing: -0.4px;

    font-weight: 750;

    color: #ffffff !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-page .industries .industry-card p {
    margin: 0 !important;

    max-width: 430px;

    font-size: 13px !important;

    line-height: 1.55;

    color: #b9bec1 !important;
}


/* =========================================================
   ARROW
========================================================= */

.home-page .industries .industry-arrow {
    position: static !important;

    justify-self: end;

    font-size: 21px !important;

    color: #d0d0d0 !important;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   GOLD ACCENT
========================================================= */

.home-page .industries .industry-card::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 2px;

    background: #b89a62;

    transition: width 0.35s ease;
}


/* =========================================================
   HOVER — BLACK + GOLD
========================================================= */

.home-page .industries .industry-card:hover {
    padding-left: 15px !important;

    background:
        linear-gradient(
            90deg,
            rgba(185,154,98,0.10),
            rgba(0,0,0,0)
        ) !important;

    border-bottom-color: rgba(185,154,98,0.45) !important;
}


.home-page .industries .industry-card:hover::before {
    width: 70px;
}


.home-page .industries .industry-card:hover .industry-number {
    color: #c2a66e !important;
}


.home-page .industries .industry-card:hover h3 {
    color: #ffffff !important;
}


.home-page .industries .industry-card:hover p {
    color: #d0d0d0 !important;
}


.home-page .industries .industry-card:hover .industry-arrow {
    color: #c5a665 !important;

    transform: translate(5px, -5px);
}


/* =========================================================
   ZIG-ZAG GOLD ACCENT
========================================================= */

.home-page .industries .industry-card:nth-child(2):hover,
.home-page .industries .industry-card:nth-child(4):hover,
.home-page .industries .industry-card:nth-child(6):hover {
    background:
        linear-gradient(
            90deg,
            rgba(185,154,98,0),
            rgba(185,154,98,0.10)
        ) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .home-page .industries .container {
        grid-template-columns: 1fr !important;
        gap: 55px;
    }

    .home-page .industries .industries-intro {
        max-width: 700px;
    }

    .home-page .industries .industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .home-page .industries {
        padding: 80px 0 !important;
    }

    .home-page .industries .industries-intro h2 {
        font-size: 43px !important;

        letter-spacing: -2px;
    }

    .home-page .industries .industry-grid {
        grid-template-columns: 1fr !important;

        gap: 0 !important;
    }

    .home-page .industries .industry-card {
        min-height: 125px !important;

        grid-template-columns: 32px 1fr 25px;

        column-gap: 12px;

        padding: 22px 0 !important;
    }

    .home-page .industries .industry-card h3 {
        font-size: 19px !important;
    }

    .home-page .industries .industry-card p {
        font-size: 12px !important;
    }

}
/* =========================================================
   PREMIUM INDUSTRIES SECTION
   HORIZONTAL EDITORIAL ROWS
========================================================= */

.home-page .industries-premium {
    position: relative;
    width: 100%;
    min-height: 900px;

    overflow: hidden;

    color: #ffffff;

    padding: 125px 0 120px;

    background: #08090a;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.home-page .industries-premium-bg {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-image: url("../../industry%20img.png");

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

    transform: scale(1.03);
}


/* =========================================================
   DARK PREMIUM OVERLAY
========================================================= */

.home-page .industries-premium-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4, 6, 8, 0.94) 0%,
            rgba(7, 9, 11, 0.86) 45%,
            rgba(7, 9, 11, 0.68) 100%
        );
}


/* =========================================================
   CONTENT
========================================================= */

.home-page .industries-premium-content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   INTRO
========================================================= */

.home-page .industries-premium-intro {
    max-width: 850px;
    margin-bottom: 70px;
}


/* EYEBROW */

.home-page .industries-premium-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 28px;

    color: #b6b6b6;

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

    letter-spacing: 2.5px;
}


.home-page .industries-premium-eyebrow span {
    display: block;

    width: 48px;
    height: 1px;

    background: #b6b6b6;
}


/* =========================================================
   HEADING
========================================================= */

.home-page .industries-premium-intro h2 {
    margin: 0;

    max-width: 850px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(48px, 5.2vw, 78px);

    line-height: 0.98;

    letter-spacing: -3px;

    font-weight: 800;

    color: #ffffff;
}


.home-page .industries-premium-intro h2 em {
    display: block;

    color: #aeb2b5;

    font-style: italic;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.home-page .industries-premium-intro > p {
    max-width: 720px;

    margin: 28px 0 0;

    font-family: "Inter", sans-serif;

    font-size: 17px;

    line-height: 1.7;

    color: #c5c7c8;
}


/* =========================================================
   INDUSTRY LIST
========================================================= */

.home-page .industries-premium-list {
    width: 100%;

    border-top: 1px solid rgba(255,255,255,0.24);
}


/* =========================================================
   EACH ROW
========================================================= */

.home-page .industry-premium-row {

    position: relative;

    display: grid;

    grid-template-columns: 90px minmax(0, 1fr) 70px;

    align-items: center;

    min-height: 125px;

    padding: 22px 10px 22px 0;

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

    text-decoration: none;

    color: #ffffff;

    overflow: hidden;

    transition:
        background 0.35s ease,
        padding 0.35s ease;
}


/* =========================================================
   GOLD HOVER STRIP
========================================================= */

.home-page .industry-premium-row::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #b89b5e;

    transform: scaleY(0);

    transform-origin: center;

    transition: transform 0.35s ease;
}


/* =========================================================
   HOVER BACKGROUND
========================================================= */

.home-page .industry-premium-row::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(184,155,94,0.15),
            rgba(184,155,94,0.04),
            transparent
        );

    opacity: 0;

    transition: opacity 0.35s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.home-page .industry-premium-number {

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #92979a;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.home-page .industry-premium-main {

    display: grid;

    grid-template-columns: minmax(260px, 0.85fr) minmax(280px, 1fr);

    align-items: center;

    gap: 50px;
}


/* =========================================================
   TITLE
========================================================= */

.home-page .industry-premium-main h3 {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -0.7px;

    color: #ffffff;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-page .industry-premium-main p {

    max-width: 520px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 14px;

    line-height: 1.65;

    color: #aeb3b6;

    transition: color 0.35s ease;
}


/* =========================================================
   ARROW
========================================================= */

.home-page .industry-premium-arrow {

    justify-self: end;

    width: 48px;
    height: 48px;

    display: flex;

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

    border: 1px solid rgba(255,255,255,0.28);

    border-radius: 50%;

    font-size: 22px;

    color: #ffffff;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   HOVER
========================================================= */

.home-page .industry-premium-row:hover {

    background: rgba(184,155,94,0.08);

    padding-left: 22px;
}


.home-page .industry-premium-row:hover::before {
    transform: scaleY(1);
}


.home-page .industry-premium-row:hover::after {
    opacity: 1;
}


.home-page .industry-premium-row:hover
.industry-premium-number {

    color: #c7a866;

    transform: translateX(4px);
}


.home-page .industry-premium-row:hover
.industry-premium-main h3 {

    color: #d0b276;

    transform: translateX(5px);
}


.home-page .industry-premium-row:hover
.industry-premium-main p {

    color: #d0d2d3;
}


.home-page .industry-premium-row:hover
.industry-premium-arrow {

    background: #b89b5e;

    border-color: #b89b5e;

    color: #080808;

    transform: rotate(0deg) scale(1.05);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .home-page .industries-premium {
        padding: 100px 0;
    }

    .home-page .industries-premium-intro h2 {
        font-size: 54px;
    }

    .home-page .industry-premium-row {
        grid-template-columns: 65px minmax(0, 1fr) 55px;
    }

    .home-page .industry-premium-main {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .home-page .industries-premium {
        min-height: auto;

        padding: 80px 0 70px;
    }


    .home-page .industries-premium-intro {
        margin-bottom: 45px;
    }


    .home-page .industries-premium-intro h2 {

        font-size: 42px;

        line-height: 1;

        letter-spacing: -1.8px;
    }


    .home-page .industries-premium-intro > p {

        font-size: 14px;

        line-height: 1.65;

        margin-top: 22px;
    }


    .home-page .industry-premium-row {

        grid-template-columns: 42px minmax(0, 1fr) 42px;

        min-height: 120px;

        padding: 20px 0;
    }


    .home-page .industry-premium-main {

        display: block;
    }


    .home-page .industry-premium-main h3 {

        font-size: 19px;

        margin-bottom: 8px;
    }


    .home-page .industry-premium-main p {

        font-size: 12px;

        line-height: 1.55;

        padding-right: 10px;
    }


    .home-page .industry-premium-number {

        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .home-page .industry-premium-arrow {

        width: 38px;
        height: 38px;

        font-size: 18px;
    }


    .home-page .industry-premium-row:hover {

        padding-left: 10px;
    }

}
/* =========================================================
   ABOUT PAGE
   Paste this at the END of existing style.css
========================================================= */


/* =========================================================
   ABOUT PAGE HEADER
========================================================= */

.about-page .site-header {
    background: #050505;
    border-bottom: none;
}

.about-page .brand-copy strong {
    color: #ffffff;
}

.about-page .brand-copy span {
    color: #999999;
}

.about-page .nav-link {
    color: #a7a7a7;
}

.about-page .nav-link:hover,
.about-page .nav-link.active {
    color: #ffffff;
}

.about-page .nav-link.active::after {
    background: #ffffff;
}

.about-page .quote-button {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111;
}

.about-page .quote-button:hover {
    background: #dddddd;
    border-color: #dddddd;
    color: #111111;
}


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

.about-page .about-hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #090909;
}


/*
IMPORTANT:

If your image structure is:

frontend/
    about.html
    images/
        about img.png
    css/
        style.css

use:
../images/about%20img.png

If image is OUTSIDE frontend folder beside Logo.jpeg,
use:
../../about%20img.png
*/

.about-page .about-hero-bg {
    position: absolute;
    inset: 0;

    background-image: url("../images/about%20img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
    transform: scale(1.02);
}


.about-page .about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.93) 0%,
            rgba(0, 0, 0, 0.78) 38%,
            rgba(0, 0, 0, 0.40) 72%,
            rgba(0, 0, 0, 0.25) 100%
        );
}


.about-page .about-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    padding-bottom: 130px;
}


.about-page .about-hero .eyebrow {
    margin-bottom: 25px;
}


.about-page .about-hero h1 {
    max-width: 850px;
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(55px, 6vw, 88px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -3.5px;

    color: #ffffff;
}


.about-page .about-hero h1 em {
    display: block;
    margin-top: 5px;

    font-style: normal;
    font-weight: 600;

    color: #b7b7b7;
}


.about-page .about-hero-content > p {
    max-width: 650px;

    margin: 32px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.85;

    color: #c3c3c3;
}


.about-page .about-hero-bottom {
    position: absolute;
    z-index: 2;

    left: 50%;
    bottom: 30px;

    transform: translateX(-50%);

    width: min(calc(100% - 80px), 1380px);

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 35px;
}


.about-page .about-hero-bottom span {
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: #9c9c9c;
}


/* =========================================================
   WHO WE ARE
========================================================= */

.about-page .about-intro {
    background: #f4f4f2;
    padding: 120px 0;
}


.about-page .about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 120px;
    align-items: start;
}


.about-page .about-intro-heading h2 {
    max-width: 690px;
    margin: 30px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -3px;
    font-weight: 800;

    color: #111111;
}


.about-page .about-intro-heading h2 em {
    display: block;

    font-style: normal;
    font-weight: 600;

    color: #777777;
}


.about-page .about-intro-copy {
    padding-top: 52px;
}


.about-page .about-intro-copy p {
    margin: 0 0 24px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.9;

    color: #686868;
}


.about-page .about-intro-copy .about-lead {
    padding-bottom: 28px;
    margin-bottom: 30px;

    border-bottom: 1px solid #ccccca;

    font-family: "Manrope", sans-serif;
    font-size: 21px;
    line-height: 1.55;
    font-weight: 600;

    color: #1c1c1c;
}


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

.about-page .about-approach {
    padding: 120px 0;
    background: #111111;
    color: #ffffff;
}


.about-page .about-section-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 100px;
    align-items: end;

    margin-bottom: 70px;
}


.about-page .about-section-heading h2 {
    max-width: 750px;
    margin: 30px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1.03;
    letter-spacing: -3px;
    font-weight: 800;

    color: #ffffff;
}


.about-page .about-section-heading h2 em {
    display: block;

    font-style: normal;
    font-weight: 600;

    color: #929292;
}


.about-page .about-section-heading > p {
    max-width: 500px;
    margin: 0 0 7px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.85;

    color: #9e9e9e;
}


.about-page .about-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
}


.about-page .about-approach-card {
    min-height: 350px;
    padding: 38px 32px;

    background: #171717;

    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.about-page .about-approach-card:hover {
    background: #202020;
}


.about-page .about-card-number {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #777777;
}


.about-page .about-card-line {
    width: 32px;
    height: 1px;

    margin: 55px 0 28px;

    background: #737373;
}


.about-page .about-approach-card h3 {
    margin: 0 0 18px;

    font-family: "Manrope", sans-serif;
    font-size: 23px;
    font-weight: 700;

    color: #ffffff;
}


.about-page .about-approach-card p {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.8;

    color: #9d9d9d;
}


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

.about-page .about-values {
    padding: 120px 0;
    background: #ffffff;
}


.about-page .about-values-heading {
    max-width: 820px;
    margin-bottom: 75px;
}


.about-page .about-values-heading h2 {
    margin: 30px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1.03;
    letter-spacing: -3px;
    font-weight: 800;

    color: #111111;
}


.about-page .about-values-heading h2 em {
    display: block;

    font-style: normal;
    font-weight: 600;

    color: #7b7b7b;
}


.about-page .about-values-grid {
    border-top: 1px solid #d7d7d4;
}


.about-page .about-value {
    display: grid;
    grid-template-columns: 100px 0.7fr 1fr;

    align-items: start;

    padding: 42px 0;

    border-bottom: 1px solid #d7d7d4;
}


.about-page .about-value > span {
    padding-top: 6px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #999999;
}


.about-page .about-value h3 {
    grid-column: 2;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 27px;
    font-weight: 700;

    color: #171717;
}


.about-page .about-value > div {
    display: contents;
}


.about-page .about-value p {
    grid-column: 3;

    max-width: 600px;
    margin: 3px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 13.5px;
    line-height: 1.85;

    color: #696969;
}


/* =========================================================
   LOCAL SERVICE
========================================================= */

.about-page .about-local {
    padding: 120px 0;

    background: #292929;
    color: #ffffff;
}


.about-page .about-local-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 120px;
}


.about-page .about-local h2 {
    max-width: 730px;
    margin: 30px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -3px;
    font-weight: 800;

    color: #ffffff;
}


.about-page .about-local h2 em {
    display: block;

    font-style: normal;
    font-weight: 600;

    color: #aaaaaa;
}


.about-page .about-local-content {
    padding-top: 55px;
}


.about-page .about-local-content > p {
    max-width: 550px;
    margin: 0 0 35px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.9;

    color: #b7b7b7;
}


.about-page .about-location-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 38px;
}


.about-page .about-location-list span {
    padding: 12px 17px;

    border: 1px solid #515151;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    color: #dddddd;
}


.about-page .about-text-link {
    display: inline-block;

    padding-bottom: 6px;

    border-bottom: 1px solid #777777;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;

    color: #ffffff;

    transition: border-color 0.2s ease;
}


.about-page .about-text-link:hover {
    border-color: #ffffff;
}


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

.about-page .about-cta {
    padding: 105px 0;

    background: #eeeeeb;
}


.about-page .about-cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;

    align-items: end;
}


.about-page .about-cta h2 {
    max-width: 780px;
    margin: 28px 0 20px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -3px;
    font-weight: 800;

    color: #111111;
}


.about-page .about-cta h2 em {
    display: block;

    font-style: normal;
    font-weight: 600;

    color: #777777;
}


.about-page .about-cta p {
    max-width: 620px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.8;

    color: #666666;
}


.about-page .about-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 220px;
    gap: 12px;
}


.about-page .about-primary-button,
.about-page .about-secondary-button {
    min-height: 55px;

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

    padding: 0 22px;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;

    transition: all 0.2s ease;
}


.about-page .about-primary-button {
    background: #090909;
    border: 1px solid #090909;

    color: #ffffff;
}


.about-page .about-primary-button:hover {
    background: #292929;
    border-color: #292929;
}


.about-page .about-primary-button span {
    font-size: 18px;
}


.about-page .about-secondary-button {
    justify-content: center;

    background: transparent;
    border: 1px solid #bdbdb8;

    color: #171717;
}


.about-page .about-secondary-button:hover {
    background: #ffffff;
    border-color: #999999;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .about-page .about-intro-grid,
    .about-page .about-local-grid {
        gap: 70px;
    }


    .about-page .about-section-heading {
        gap: 60px;
    }


    .about-page .about-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .about-page .about-approach-card {
        min-height: 310px;
    }


    .about-page .about-cta-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .about-page .about-cta-actions {
        max-width: 280px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE / TABLET
========================================================= */

@media (max-width: 800px) {

    .about-page .about-hero {
        min-height: 600px;
    }


    .about-page .about-hero-bg {
        background-position: 60% center;
    }


    .about-page .about-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.94) 0%,
                rgba(0,0,0,.78) 60%,
                rgba(0,0,0,.50) 100%
            );
    }


    .about-page .about-hero-content {
        padding-top: 80px;
        padding-bottom: 120px;
    }


    .about-page .about-hero h1 {
        font-size: 52px;
        letter-spacing: -2.5px;
    }


    .about-page .about-hero-bottom {
        left: 25px;
        bottom: 22px;

        transform: none;

        width: calc(100% - 50px);

        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 12px 20px;
    }


    .about-page .about-intro,
    .about-page .about-approach,
    .about-page .about-values,
    .about-page .about-local {
        padding: 85px 0;
    }


    .about-page .about-intro-grid,
    .about-page .about-section-heading,
    .about-page .about-local-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .about-page .about-intro-copy,
    .about-page .about-local-content {
        padding-top: 0;
    }


    .about-page .about-section-heading {
        margin-bottom: 50px;
    }


    .about-page .about-value {
        grid-template-columns: 55px 1fr;
        gap: 0;
    }


    .about-page .about-value h3 {
        grid-column: 2;
    }


    .about-page .about-value p {
        grid-column: 2;

        margin-top: 15px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .about-page .about-hero {
        min-height: 580px;
    }


    .about-page .about-hero h1 {
        font-size: 42px;
        line-height: 1.02;
        letter-spacing: -2px;
    }


    .about-page .about-hero-content > p {
        font-size: 13px;
        line-height: 1.75;
    }


    .about-page .about-hero-bottom span {
        font-size: 7.5px;
    }


    .about-page .about-intro-heading h2,
    .about-page .about-section-heading h2,
    .about-page .about-values-heading h2,
    .about-page .about-local h2,
    .about-page .about-cta h2 {
        font-size: 39px;
        letter-spacing: -2px;
    }


    .about-page .about-intro-copy .about-lead {
        font-size: 18px;
    }


    .about-page .about-approach-grid {
        grid-template-columns: 1fr;
    }


    .about-page .about-approach-card {
        min-height: auto;
        padding: 35px 27px 40px;
    }


    .about-page .about-card-line {
        margin: 35px 0 23px;
    }


    .about-page .about-value {
        grid-template-columns: 40px 1fr;
        padding: 32px 0;
    }


    .about-page .about-value h3 {
        font-size: 22px;
    }


    .about-page .about-cta {
        padding: 80px 0;
    }


    .about-page .about-cta-actions {
        width: 100%;
        max-width: none;
    }

}
/* =========================================================
   ABOUT PAGE — TOP OVERVIEW SECTION
   Navbar ke niche / Existing About Hero ke upar
========================================================= */

.about-page .about-overview {
    width: 100%;
    padding: 105px 0 110px;
    background: #ffffff;
    color: #111111;
}


/* MAIN 2 COLUMN LAYOUT */

.about-page .about-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 85px;
    align-items: center;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.about-page .about-overview-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
}


.about-page .about-overview-image {
    display: block;
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center;
}


/* BLACK LABEL ON IMAGE */

.about-page .about-overview-image-label {
    position: absolute;
    left: 0;
    bottom: 0;

    min-width: 220px;
    padding: 18px 24px;

    background: #0b0b0b;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #ffffff;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.about-page .about-overview-content {
    width: 100%;
    max-width: 720px;
}


/* EYEBROW */

.about-page .about-overview-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 38px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2.2px;

    color: #777777;
}


.about-page .about-overview-eyebrow span {
    display: block;
    width: 34px;
    height: 1px;

    background: #777777;
}


/* HEADING */

.about-page .about-overview-content h2 {
    margin: 0 0 35px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 4.2vw, 65px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -2.5px;

    color: #111111;
}


.about-page .about-overview-content h2 em {
    display: block;

    font-style: normal;
    font-weight: 500;

    color: #777777;
}


/* PARAGRAPHS */

.about-page .about-overview-content > p {
    max-width: 700px;

    margin: 0 0 22px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.85;

    color: #666666;
}


.about-page .about-overview-content > .about-overview-lead {
    margin-bottom: 27px;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 500;

    color: #202020;
}


/* =========================================================
   MISSION + VISION
========================================================= */

.about-page .about-overview-mv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px;

    margin-top: 38px;
    padding-top: 30px;

    border-top: 1px solid #ddddda;
}


.about-page .about-overview-mv-item h3 {
    margin: 0 0 15px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #333333;
}


.about-page .about-overview-mv-item p {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 12.5px;
    line-height: 1.75;

    color: #707070;
}


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

@media (max-width: 1050px) {

    .about-page .about-overview {
        padding: 85px 0 90px;
    }

    .about-page .about-overview-grid {
        gap: 55px;
    }

    .about-page .about-overview-image {
        height: 570px;
    }

    .about-page .about-overview-content h2 {
        font-size: 48px;
    }

}


@media (max-width: 800px) {

    .about-page .about-overview {
        padding: 70px 0 80px;
    }

    .about-page .about-overview-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .about-page .about-overview-visual {
        max-width: 650px;
    }

    .about-page .about-overview-image {
        height: auto;
        max-height: 650px;
        object-fit: cover;
    }

    .about-page .about-overview-content {
        max-width: none;
    }

    .about-page .about-overview-content h2 {
        font-size: 44px;
    }

}


@media (max-width: 560px) {

    .about-page .about-overview {
        padding: 55px 0 65px;
    }

    .about-page .about-overview-grid {
        gap: 42px;
    }

    .about-page .about-overview-eyebrow {
        margin-bottom: 27px;
    }

    .about-page .about-overview-content h2 {
        margin-bottom: 28px;

        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -1.8px;
    }

    .about-page .about-overview-content > .about-overview-lead {
        font-size: 16px;
    }

    .about-page .about-overview-mv {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-page .about-overview-image-label {
        min-width: auto;
        padding: 15px 18px;

        font-size: 9px;
    }

}/* =========================================================
   ABOUT OVERVIEW — FINAL STRUCTURE + FULL IMAGE FIX
========================================================= */

.about-page .about-overview {
    width: 100%;
    padding: 90px 0 100px;
    background: #ffffff;
    color: #111111;
}


/* 2 COLUMN LAYOUT */

.about-page .about-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 75px;
    align-items: center;
}


/* =========================================================
   LEFT IMAGE — IMPORTANT FIX
========================================================= */

.about-page .about-overview-visual {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f7f7f7;
}


/*
IMPORTANT:
No fixed 650px height.
No object-fit: cover.

This allows the ENTIRE image to display.
*/

.about-page .about-overview-image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
}


/* BLACK IMAGE LABEL */

.about-page .about-overview-image-label {
    position: absolute;

    left: 0;
    bottom: 0;

    min-width: 220px;

    padding: 17px 22px;

    background: #0a0a0a;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1.5px;

    color: #ffffff;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.about-page .about-overview-content {
    width: 100%;
    max-width: 720px;
}


/* SMALL LABEL */

.about-page .about-overview-eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 35px;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 2.2px;

    color: #707070;
}


.about-page .about-overview-eyebrow span {
    width: 35px;
    height: 1px;

    background: #777777;
}


/* MAIN HEADING */

.about-page .about-overview-content h2 {
    margin: 0 0 34px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(43px, 4.2vw, 64px);

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2.7px;

    color: #111111;
}


.about-page .about-overview-content h2 em {
    display: block;

    font-style: normal;

    font-weight: 500;

    color: #7b7b7b;
}


/* MAIN INTRO */

.about-page .about-overview-content > p {
    max-width: 700px;

    margin: 0 0 20px;

    font-family: "Inter", sans-serif;

    font-size: 14px;

    line-height: 1.8;

    color: #656565;
}


.about-page .about-overview-content > .about-overview-lead {
    margin-bottom: 26px;

    font-family: "Manrope", sans-serif;

    font-size: 17px;

    line-height: 1.65;

    font-weight: 500;

    color: #202020;
}


/* =========================================================
   MISSION + VISION
========================================================= */

.about-page .about-overview-mv {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 42px;

    margin-top: 35px;

    padding-top: 30px;

    border-top: 1px solid #dcdcdc;
}


.about-page .about-overview-mv-item h3 {
    margin: 0 0 14px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    color: #333333;
}


.about-page .about-overview-mv-item p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 12.5px;

    line-height: 1.75;

    color: #6d6d6d;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .about-page .about-overview {
        padding: 75px 0 85px;
    }


    .about-page .about-overview-grid {
        gap: 50px;
    }


    .about-page .about-overview-content h2 {
        font-size: 46px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .about-page .about-overview-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .about-page .about-overview-visual {
        width: 100%;

        max-width: 650px;

        margin: 0 auto;
    }


    .about-page .about-overview-image {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }


    .about-page .about-overview-content {
        max-width: none;
    }


    .about-page .about-overview-content h2 {
        font-size: 43px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .about-page .about-overview {
        padding: 55px 0 65px;
    }


    .about-page .about-overview-grid {
        gap: 40px;
    }


    .about-page .about-overview-content h2 {
        font-size: 37px;

        line-height: 1.05;

        letter-spacing: -1.7px;
    }


    .about-page .about-overview-content > .about-overview-lead {
        font-size: 16px;
    }


    .about-page .about-overview-mv {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .about-page .about-overview-image-label {
        min-width: auto;

        padding: 14px 17px;

        font-size: 8px;
    }

}/* =========================================================
   ABOUT HERO — FINAL BACKGROUND IMAGE VERSION
   Paste at VERY END of style.css
========================================================= */


/* HERO SIZE */

.about-page .about-hero {
    position: relative !important;

    width: 100% !important;

    /* pehle section bahut bada tha */
    min-height: 540px !important;
    height: 540px !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;

    background: #080808 !important;

    color: #ffffff !important;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.about-page .about-hero-bg {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    /*
       IMAGE PATH:

       Agar image JSB Security Folder ke root mein hai,
       aur CSS frontend/css/style.css mein hai:

       ../../about1%20img.png

       Agar tum kisi aur image ko use karna chahti ho,
       bas filename change kar dena.
    */

    background-image: url("../../aboutpage.png") !important;
    background-size: cover !important;

    /*
       right side ka guard/person visible rakhne ke liye
    */
    background-position: center right !important;

    background-repeat: no-repeat !important;

    transform: none !important;

    z-index: 0 !important;
}


/* =========================================================
   PREMIUM DARK OVERLAY

   Left side dark:
   text clear rahega.

   Right side:
   image zyada visible rahegi.
========================================================= */

.about-page .about-hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,

            rgba(0, 0, 0, 0.94) 0%,

            rgba(0, 0, 0, 0.88) 28%,

            rgba(0, 0, 0, 0.68) 53%,

            rgba(0, 0, 0, 0.38) 75%,

            rgba(0, 0, 0, 0.24) 100%
        ) !important;
}


/* subtle bottom depth */

.about-page .about-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.34) 0%,
            rgba(0,0,0,0) 35%
        );
}


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

.about-page .about-hero-content {
    position: relative !important;

    z-index: 3 !important;

    width: 100% !important;

    padding-top: 40px !important;
    padding-bottom: 70px !important;
}


/* ABOUT JSB SMALL LABEL */

.about-page .about-hero .eyebrow {
    margin-bottom: 22px !important;

    font-size: 9px !important;

    letter-spacing: 2px !important;

    color: #d1d1d1 !important;
}


/* MAIN HEADING */

.about-page .about-hero h1 {
    max-width: 720px !important;

    margin: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: clamp(48px, 5vw, 72px) !important;

    line-height: 0.98 !important;

    font-weight: 800 !important;

    letter-spacing: -3px !important;

    color: #ffffff !important;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, 0.18);
}


/* GREY SECOND LINE */

.about-page .about-hero h1 em {
    display: block !important;

    margin-top: 5px !important;

    font-style: normal !important;

    font-weight: 600 !important;

    color: #a8a8a8 !important;
}


/* DESCRIPTION */

.about-page .about-hero-content > p {
    max-width: 630px !important;

    margin: 28px 0 0 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 14px !important;

    line-height: 1.75 !important;

    color: #d0d0d0 !important;

    text-shadow:
        0 1px 8px rgba(0,0,0,.35);
}


/* =========================================================
   BOTTOM LABELS
========================================================= */

.about-page .about-hero-bottom {
    position: absolute !important;

    z-index: 4 !important;

    right: max(
        30px,
        calc((100% - 1380px) / 2)
    ) !important;

    left: auto !important;

    bottom: 24px !important;

    transform: none !important;

    width: auto !important;

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: 38px !important;
}


.about-page .about-hero-bottom span {
    font-family: "Manrope", sans-serif !important;

    font-size: 8px !important;

    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: 1.7px !important;

    color: rgba(255,255,255,.60) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .about-page .about-hero {
        height: 500px !important;
        min-height: 500px !important;
    }


    .about-page .about-hero-bg {
        background-position: 65% center !important;
    }


    .about-page .about-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.94) 0%,
                rgba(0,0,0,.84) 48%,
                rgba(0,0,0,.45) 100%
            ) !important;
    }


    .about-page .about-hero h1 {
        max-width: 620px !important;

        font-size: 55px !important;
    }


    .about-page .about-hero-content > p {
        max-width: 550px !important;
    }


    .about-page .about-hero-bottom {
        right: 25px !important;

        gap: 20px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-page .about-hero {
        height: 520px !important;
        min-height: 520px !important;
    }


    /*
       Mobile par subject ko thoda right mein rakho
       taaki text ke peeche na aaye.
    */

    .about-page .about-hero-bg {
        background-position: 70% center !important;
    }


    .about-page .about-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.96) 0%,
                rgba(0,0,0,.87) 60%,
                rgba(0,0,0,.55) 100%
            ) !important;
    }


    .about-page .about-hero-content {
        padding-top: 35px !important;
        padding-bottom: 95px !important;
    }


    .about-page .about-hero h1 {
        max-width: 100% !important;

        font-size: 41px !important;

        line-height: 1.02 !important;

        letter-spacing: -2px !important;
    }


    .about-page .about-hero-content > p {
        max-width: 95% !important;

        margin-top: 22px !important;

        font-size: 12.5px !important;

        line-height: 1.7 !important;
    }


    .about-page .about-hero-bottom {
        left: 20px !important;
        right: 20px !important;

        bottom: 20px !important;

        width: auto !important;

        justify-content: flex-start !important;

        flex-wrap: wrap !important;

        gap: 10px 18px !important;
    }


    .about-page .about-hero-bottom span {
        font-size: 7px !important;

        letter-spacing: 1.2px !important;
    }

}/* =========================================================
   ABOUT — WHO WE ARE + WHAT WE VALUE
   FINAL REFINED DESIGN
========================================================= */

.about-page .about-company-split {
    width: 100%;

    padding: 95px 0 105px !important;

    background: #f4f4f2 !important;

    color: #111111;

    overflow: hidden;
}


/* =========================================================
   OUTER WIDTH / SIDE SPACE
========================================================= */

.about-page .about-company-split .container {
    width: min(1380px, calc(100% - 90px)) !important;

    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   TWO MAIN CARDS
========================================================= */

.about-page .about-company-split-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 38px !important;

    align-items: stretch !important;

    border: none !important;
}


/* =========================================================
   BOTH CARDS
========================================================= */

.about-page .about-company-left,
.about-page .about-company-right {
    position: relative;

    min-width: 0;

    height: 100%;

    padding: 50px 46px 52px !important;

    background: #ffffff !important;

    border: 1px solid #d5d5d1 !important;

    display: flex;
    flex-direction: column;

    /*
       Premium shadow behind both cards
    */

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.075),
        0 5px 16px rgba(0, 0, 0, 0.035) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* remove previous divider */

.about-page .about-company-right {
    border-left: 1px solid #d5d5d1 !important;
}


/* CARD HOVER */

.about-page .about-company-left:hover,
.about-page .about-company-right:hover {
    transform: translateY(-4px);

    border-color: #c4c4bf !important;

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.095),
        0 8px 22px rgba(0, 0, 0, 0.045) !important;
}


/* =========================================================
   EYEBROW
========================================================= */

.about-page .about-split-eyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    margin: 0 0 31px !important;

    font-family: "Manrope", sans-serif;

    font-size: 9px !important;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 2.1px;

    color: #747474;
}


.about-page .about-split-eyebrow > span {
    display: block;

    width: 31px;

    height: 1px;

    flex-shrink: 0;

    background: #777777;
}


/* =========================================================
   HEADINGS
========================================================= */

.about-page .about-company-left > h2,
.about-page .about-company-right > h2 {
    width: 100%;

    margin: 0 !important;

    font-family: "Manrope", sans-serif;

    font-size: clamp(34px, 2.7vw, 45px) !important;

    line-height: 1.04 !important;

    font-weight: 800 !important;

    letter-spacing: -1.9px !important;

    color: #101010 !important;
}


.about-page .about-company-left > h2 em,
.about-page .about-company-right > h2 em {
    display: block;

    margin-top: 3px;

    font-style: normal !important;

    font-weight: 500 !important;

    color: #8a8a88 !important;
}


/* =========================================================
   LEFT — WHO WE ARE
========================================================= */

.about-page .about-who-content {
    width: 100%;

    max-width: none !important;

    margin-top: 45px !important;

    border-top: 1px solid #d8d8d4;
}


/* =========================================================
   MAIN HIGHLIGHTED STATEMENT
========================================================= */

.about-page .about-who-lead {
    margin: 0 !important;

    padding: 25px 0 !important;

    border-bottom: 1px solid #d8d8d4;

    font-family: "Manrope", sans-serif !important;

    font-size: 16px !important;

    line-height: 1.55 !important;

    font-weight: 700 !important;

    letter-spacing: -0.3px;

    color: #1b1b1b !important;
}


/*
   IMPORTANT:
   remove all old dash / marker pseudo-elements
*/

.about-page .about-who-content p::before,
.about-page .about-who-lead::before,
.about-page .about-who-column p::before {
    display: none !important;

    content: none !important;
}


/* =========================================================
   TWO COLUMNS BELOW MAIN STATEMENT
========================================================= */

.about-page .about-who-columns {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: 100%;
}


/* EACH COLUMN */

.about-page .about-who-column {
    min-width: 0;

    padding: 27px 25px 8px 0;
}


/* divider between columns */

.about-page .about-who-column + .about-who-column {
    padding-left: 25px;

    padding-right: 0;

    border-left: 1px solid #d8d8d4;
}


/* COLUMN TEXT */

.about-page .about-who-column p {
    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    font-family: "Inter", sans-serif;

    font-size: 12.5px !important;

    line-height: 1.78 !important;

    font-weight: 400;

    color: #666664 !important;
}


/* =========================================================
   RIGHT — STANDARDS 2 × 2
========================================================= */

.about-page .about-standards-list {
    width: 100%;

    margin-top: 45px !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    border-top: 1px solid #d8d8d4 !important;

    border-left: 1px solid #d8d8d4 !important;
}


/* =========================================================
   STANDARD ITEM
========================================================= */

.about-page .about-standard-row {
    position: relative;

    display: block !important;

    min-height: 175px;

    padding: 26px 24px !important;

    background: #ffffff;

    border: none !important;

    border-right: 1px solid #d8d8d4 !important;

    border-bottom: 1px solid #d8d8d4 !important;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* NUMBER */

.about-page .about-standard-number {
    display: block;

    margin: 0 0 22px !important;

    padding: 0 !important;

    font-family: "Manrope", sans-serif;

    font-size: 9px !important;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #9b9b98 !important;
}


/* TITLE */

.about-page .about-standard-content h3 {
    margin: 0 0 10px !important;

    font-family: "Manrope", sans-serif;

    font-size: 17px !important;

    line-height: 1.25;

    font-weight: 750 !important;

    letter-spacing: -0.4px;

    color: #171717 !important;
}


/* DESCRIPTION */

.about-page .about-standard-content p {
    max-width: none !important;

    margin: 0 !important;

    font-family: "Inter", sans-serif;

    font-size: 11.5px !important;

    line-height: 1.65 !important;

    color: #686866 !important;
}


/* =========================================================
   STANDARD HOVER
========================================================= */

.about-page .about-standard-row:hover {
    padding-left: 24px !important;

    transform: none !important;

    background: #f3f3f1 !important;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.025);
}


.about-page .about-standard-row:hover
.about-standard-number {
    color: #111111 !important;
}


/* small underline on hover */

.about-page .about-standard-row::after {
    content: "";

    position: absolute;

    left: 24px;

    bottom: 0;

    width: 0;

    height: 2px;

    background: #1a1a1a;

    transition: width 0.3s ease;
}


.about-page .about-standard-row:hover::after {
    width: 34px;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .about-page .about-company-split .container {
        width: calc(100% - 60px) !important;
    }


    .about-page .about-company-split-grid {
        gap: 28px !important;
    }


    .about-page .about-company-left,
    .about-page .about-company-right {
        padding: 40px 34px 44px !important;
    }


    .about-page .about-company-left > h2,
    .about-page .about-company-right > h2 {
        font-size: 38px !important;
    }


    .about-page .about-who-column {
        padding-right: 18px;
    }


    .about-page .about-who-column + .about-who-column {
        padding-left: 18px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .about-page .about-company-split {
        padding: 70px 0 75px !important;
    }


    .about-page .about-company-split .container {
        width: calc(100% - 40px) !important;
    }


    .about-page .about-company-split-grid {
        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }


    .about-page .about-company-left,
    .about-page .about-company-right {
        padding: 40px !important;
    }


    .about-page .about-company-left > h2,
    .about-page .about-company-right > h2 {
        font-size: 40px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-page .about-company-split {
        padding: 55px 0 60px !important;
    }


    .about-page .about-company-split .container {
        width: calc(100% - 30px) !important;
    }


    .about-page .about-company-left,
    .about-page .about-company-right {
        padding: 30px 24px !important;
    }


    .about-page .about-company-left > h2,
    .about-page .about-company-right > h2 {
        font-size: 33px !important;

        line-height: 1.06 !important;

        letter-spacing: -1.4px !important;
    }


    .about-page .about-who-content,
    .about-page .about-standards-list {
        margin-top: 32px !important;
    }


    /* WHO WE ARE columns stack on mobile */

    .about-page .about-who-columns {
        grid-template-columns: 1fr;
    }


    .about-page .about-who-column {
        padding: 22px 0 !important;

        border-bottom: 1px solid #d8d8d4;
    }


    .about-page .about-who-column + .about-who-column {
        padding-left: 0 !important;

        border-left: none;

        border-bottom: none;
    }


    /* Standards stack on mobile */

    .about-page .about-standards-list {
        grid-template-columns: 1fr !important;
    }


    .about-page .about-standard-row {
        min-height: auto;

        padding: 22px !important;
    }


    .about-page .about-standard-row:hover {
        padding-left: 22px !important;
    }


    .about-page .about-standard-number {
        margin-bottom: 14px !important;
    }

}/* =========================================================
   ABOUT SPLIT PANELS — FINAL SHADOW + TABLE FIX
   KEEP THIS AT THE VERY END OF style.css
========================================================= */


/* =========================================================
   1. SPACE AROUND BOTH PANELS
========================================================= */

.about-page .about-company-split {
    padding: 90px 0 100px !important;
    background: #f4f4f2 !important;
}

.about-page .about-company-split .container {
    width: calc(100% - 100px) !important;
    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow: visible !important;
}


/* =========================================================
   2. TWO EQUAL PANELS
========================================================= */

.about-page .about-company-split-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 40px !important;

    align-items: stretch !important;

    overflow: visible !important;

    border: none !important;
}


/* =========================================================
   3. ACTUAL BOX SHADOW ON BOTH MAIN PANELS
========================================================= */

.about-page .about-company-left,
.about-page .about-company-right {
    position: relative !important;

    min-width: 0 !important;

    padding: 48px 45px 50px !important;

    background: #ffffff !important;

    border: 1px solid #d4d4d0 !important;

    /*
       IMPORTANT:
       actual visible shadow around complete card
    */
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.10),
        0 6px 15px rgba(0, 0, 0, 0.055) !important;

    overflow: visible !important;

    height: auto !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* explicitly remove old centre-panel styling */

.about-page .about-company-right {
    border-left: 1px solid #d4d4d0 !important;
}


/* slightly stronger on hover */

.about-page .about-company-left:hover,
.about-page .about-company-right:hover {
    transform: translateY(-4px) !important;

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.13),
        0 8px 20px rgba(0, 0, 0, 0.065) !important;
}


/* =========================================================
   4. WHO WE ARE — TABLE
========================================================= */

.about-page .about-who-content {
    width: 100% !important;

    max-width: none !important;

    margin-top: 44px !important;

    border: 1px solid #d4d4d0 !important;

    background: #ffffff !important;
}


/* =========================================================
   TOP FULL-WIDTH TABLE ROW
========================================================= */

.about-page .about-who-lead {
    display: flex !important;

    align-items: center !important;

    min-height: 115px !important;

    margin: 0 !important;

    padding: 25px 28px !important;

    border: none !important;

    border-bottom: 1px solid #d4d4d0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 16px !important;

    line-height: 1.55 !important;

    font-weight: 700 !important;

    letter-spacing: -0.25px !important;

    color: #191919 !important;

    background: #fafaf9 !important;
}


/* =========================================================
   BOTTOM TABLE ROW — TWO COLUMNS
========================================================= */

.about-page .about-who-columns {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;

    align-items: stretch !important;
}


/* =========================================================
   EACH TABLE CELL
========================================================= */

.about-page .about-who-column {
    min-width: 0 !important;

    min-height: 230px !important;

    padding: 27px 27px 30px !important;

    display: flex !important;

    align-items: flex-start !important;

    background: #ffffff !important;

    border: none !important;
}


/* middle vertical divider */

.about-page .about-who-column + .about-who-column {
    border-left: 1px solid #d4d4d0 !important;

    padding-left: 27px !important;
}


/* TEXT */

.about-page .about-who-column p {
    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    font-family: "Inter", sans-serif !important;

    font-size: 12.5px !important;

    line-height: 1.75 !important;

    font-weight: 400 !important;

    color: #666664 !important;
}


/* =========================================================
   REMOVE OLD DASHES COMPLETELY
========================================================= */

.about-page .about-who-content p::before,
.about-page .about-who-content p::after,
.about-page .about-who-lead::before,
.about-page .about-who-lead::after,
.about-page .about-who-column::before,
.about-page .about-who-column::after,
.about-page .about-who-column p::before,
.about-page .about-who-column p::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   5. STANDARDS TABLE — KEEP 2 × 2
========================================================= */

.about-page .about-standards-list {
    width: 100% !important;

    margin-top: 44px !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    border-top: 1px solid #d4d4d0 !important;
    border-left: 1px solid #d4d4d0 !important;

    background: #ffffff !important;
}


.about-page .about-standard-row {
    min-height: 175px !important;

    padding: 25px 24px !important;

    background: #ffffff !important;

    border: none !important;

    border-right: 1px solid #d4d4d0 !important;
    border-bottom: 1px solid #d4d4d0 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .about-page .about-company-split .container {
        width: calc(100% - 50px) !important;
    }

    .about-page .about-company-split-grid {
        gap: 25px !important;
    }

    .about-page .about-company-left,
    .about-page .about-company-right {
        padding: 38px 32px 40px !important;
    }

}


/* =========================================================
   STACK MAIN PANELS
========================================================= */

@media (max-width: 850px) {

    .about-page .about-company-split-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-page .about-company-split {
        padding: 55px 0 60px !important;
    }

    .about-page .about-company-split .container {
        width: calc(100% - 30px) !important;
    }

    .about-page .about-company-left,
    .about-page .about-company-right {
        padding: 28px 22px 30px !important;
    }

    /* WHO WE ARE table becomes one column */

    .about-page .about-who-columns {
        grid-template-columns: 1fr !important;
    }

    .about-page .about-who-column {
        min-height: auto !important;
        padding: 22px !important;
    }

    .about-page .about-who-column + .about-who-column {
        padding-left: 22px !important;

        border-left: none !important;

        border-top: 1px solid #d4d4d0 !important;
    }

    /* standards mobile */

    .about-page .about-standards-list {
        grid-template-columns: 1fr !important;
    }

}/* =========================================================
   ABOUT PAGE — WHO WE ARE
   FINAL TABLE DESIGN
   PASTE AT VERY END OF style.css
========================================================= */


/* -----------------------------------------
   WHO WE ARE TABLE OUTER BOX
----------------------------------------- */

body.about-page .about-company-left .about-who-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 38px 0 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #d5d5d2 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* -----------------------------------------
   ROW 1
   FULL WIDTH HEADING CELL
----------------------------------------- */

body.about-page .about-company-left .about-who-lead {
    display: block !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 26px 28px !important;

    box-sizing: border-box !important;

    background: #fafaf8 !important;

    border: 0 !important;
    border-bottom: 1px solid #d5d5d2 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 17px !important;
    line-height: 1.55 !important;

    font-weight: 700 !important;

    letter-spacing: -0.3px !important;

    color: #1c1c1c !important;
}


/* -----------------------------------------
   ROW 2
   TWO EQUAL TABLE CELLS
----------------------------------------- */

body.about-page .about-company-left .about-who-columns {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* -----------------------------------------
   TABLE CELLS
----------------------------------------- */

body.about-page .about-company-left .about-who-column {
    display: block !important;

    width: auto !important;

    min-width: 0 !important;
    min-height: 215px !important;

    margin: 0 !important;

    padding: 26px 28px 30px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 0 !important;
}


/* vertical divider between cells */

body.about-page
.about-company-left
.about-who-column:nth-child(2) {

    border-left:
        1px solid #d5d5d2 !important;
}


/* -----------------------------------------
   CELL PARAGRAPHS
----------------------------------------- */

body.about-page
.about-company-left
.about-who-column p {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 13px !important;
    line-height: 1.75 !important;

    font-weight: 400 !important;

    color: #666664 !important;
}


/* -----------------------------------------
   REMOVE ANY OLD ::before LINES
----------------------------------------- */

body.about-page
.about-company-left
.about-who-content::before,

body.about-page
.about-company-left
.about-who-content::after,

body.about-page
.about-company-left
.about-who-lead::before,

body.about-page
.about-company-left
.about-who-lead::after,

body.about-page
.about-company-left
.about-who-column::before,

body.about-page
.about-company-left
.about-who-column::after,

body.about-page
.about-company-left
.about-who-column p::before,

body.about-page
.about-company-left
.about-who-column p::after {

    content: none !important;
    display: none !important;
}


/* =========================================================
   BOTH MAIN PANELS — REAL BOX SHADOW
========================================================= */

body.about-page .about-company-split {
    overflow: visible !important;
}


body.about-page .about-company-split .container {
    overflow: visible !important;
}


body.about-page .about-company-split-grid {
    overflow: visible !important;

    gap: 35px !important;
}


body.about-page .about-company-left,
body.about-page .about-company-right {

    position: relative !important;

    background: #ffffff !important;

    border: 1px solid #ddddda !important;

    /*
       VISIBLE SHADOW
    */
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.07),
        0 18px 42px rgba(0, 0, 0, 0.12) !important;

    overflow: visible !important;

    z-index: 1 !important;
}


/* slightly stronger shadow on hover */

body.about-page .about-company-left:hover,
body.about-page .about-company-right:hover {

    transform: translateY(-3px) !important;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.09),
        0 25px 55px rgba(0, 0, 0, 0.15) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    body.about-page
    .about-company-left
    .about-who-columns {

        grid-template-columns: 1fr !important;
    }


    body.about-page
    .about-company-left
    .about-who-column {

        min-height: auto !important;

        padding: 22px !important;
    }


    body.about-page
    .about-company-left
    .about-who-column:nth-child(2) {

        border-left: 0 !important;

        border-top:
            1px solid #d5d5d2 !important;
    }


    body.about-page
    .about-company-left
    .about-who-lead {

        padding: 22px !important;

        font-size: 15px !important;
    }

}
/* =========================================================
   ABOUT — STRONGER PANEL + TABLE BORDERS
========================================================= */

/* BOTH MAIN PANELS */
body.about-page .about-company-left,
body.about-page .about-company-right {
    border: 2px solid #b8b8b4 !important;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.08),
        0 22px 48px rgba(0, 0, 0, 0.13) !important;
}


/* =========================================
   LEFT — WHO WE ARE TABLE
========================================= */

body.about-page .about-company-left .about-who-content {
    border: 1.5px solid #b5b5b1 !important;
}

/* horizontal divider */
body.about-page .about-company-left .about-who-lead {
    border-bottom: 1.5px solid #b5b5b1 !important;
}

/* center vertical divider */
body.about-page
.about-company-left
.about-who-column:nth-child(2) {
    border-left: 1.5px solid #b5b5b1 !important;
}


/* =========================================
   RIGHT — WHAT WE VALUE TABLE
========================================= */

body.about-page .about-company-right .about-standards-list {
    border: 1.5px solid #b5b5b1 !important;
}

/* every standard cell */
body.about-page .about-company-right .about-standard-row {
    border-color: #b5b5b1 !important;
}


/* vertical divider — right column */
body.about-page
.about-company-right
.about-standard-row:nth-child(even) {
    border-left: 1.5px solid #b5b5b1 !important;
}


/* horizontal divider — bottom row */
body.about-page
.about-company-right
.about-standard-row:nth-child(3),

body.about-page
.about-company-right
.about-standard-row:nth-child(4) {
    border-top: 1.5px solid #b5b5b1 !important;
}
/* =========================================================
   ABOUT PAGE — OUR APPROACH FINAL DESIGN
   Paste this at the VERY END of style.css
========================================================= */

.about-approach {
    background: #080808 !important;
    color: #ffffff !important;
    padding: 90px 0 100px !important;
}


/* ---------- TOP HEADING AREA ---------- */

.about-approach .about-section-heading {
    display: grid !important;
    grid-template-columns: 1fr 0.75fr !important;
    gap: 80px !important;
    align-items: end !important;
    margin-bottom: 48px !important;
}

.about-approach .about-section-heading h2 {
    margin: 14px 0 0 !important;

    /* smaller heading */
    font-family: "Manrope", sans-serif !important;
    font-size: 42px !important;
    line-height: 1.08 !important;
    font-weight: 750 !important;
    letter-spacing: -1.5px !important;

    color: #ffffff !important;
}

.about-approach .about-section-heading h2 em {
    display: block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;

    color: #8d8d8d !important;
}

.about-approach .about-section-heading > p {
    max-width: 500px !important;
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.75 !important;

    color: #999999 !important;
}


/* ---------- 4 SEPARATE CARDS ---------- */

.about-approach .about-approach-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    /* IMPORTANT: creates visible separation */
    gap: 18px !important;

    margin-top: 0 !important;

    /* remove old connected-grid styling */
    border: none !important;
    background: transparent !important;
}


/* ---------- CARD ---------- */

.about-approach .about-approach-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-height: 285px !important;
    padding: 28px 26px 30px !important;

    /* grey separate box */
    background: #171717 !important;

    border: 1px solid #2d2d2d !important;
    border-radius: 3px !important;

    color: #ffffff !important;

    overflow: hidden !important;

    transition:
        background-color 0.32s ease,
        border-color 0.32s ease,
        transform 0.32s ease,
        box-shadow 0.32s ease !important;
}


/* ---------- NUMBER ---------- */

.about-approach .about-card-number {
    display: block !important;
    margin-bottom: 27px !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;

    color: #777777 !important;

    transition: color 0.3s ease !important;
}


/* ---------- SMALL LINE ---------- */

.about-approach .about-card-line {
    width: 34px !important;
    height: 1px !important;

    margin-bottom: 35px !important;

    background: #555555 !important;

    transition:
        width 0.32s ease,
        background-color 0.32s ease !important;
}


/* ---------- CARD TITLE ---------- */

.about-approach .about-approach-card h3 {
    margin: 0 0 13px !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px !important;

    color: #ffffff !important;

    transition: color 0.3s ease !important;
}


/* ---------- CARD DESCRIPTION ---------- */

.about-approach .about-approach-card p {
    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.7 !important;

    color: #929292 !important;

    transition: color 0.3s ease !important;
}


/* =========================================================
   GOLD HOVER
========================================================= */

.about-approach .about-approach-card:hover {
    background: #c7a45a !important;
    border-color: #c7a45a !important;

    transform: translateY(-7px) !important;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28) !important;
}


/* number dark on gold */

.about-approach .about-approach-card:hover .about-card-number {
    color: rgba(10, 10, 10, 0.60) !important;
}


/* line dark + longer */

.about-approach .about-approach-card:hover .about-card-line {
    width: 55px !important;
    background: rgba(10, 10, 10, 0.55) !important;
}


/* heading dark */

.about-approach .about-approach-card:hover h3 {
    color: #0b0b0b !important;
}


/* paragraph dark */

.about-approach .about-approach-card:hover p {
    color: rgba(10, 10, 10, 0.76) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .about-approach .about-section-heading {
        grid-template-columns: 1fr 1fr !important;
        gap: 45px !important;
    }

    .about-approach .about-section-heading h2 {
        font-size: 37px !important;
    }

    .about-approach .about-approach-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .about-approach .about-approach-card {
        min-height: 260px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .about-approach {
        padding: 65px 0 70px !important;
    }

    .about-approach .about-section-heading {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        margin-bottom: 35px !important;
    }

    .about-approach .about-section-heading h2 {
        font-size: 31px !important;
        letter-spacing: -1px !important;
    }

    .about-approach .about-section-heading > p {
        font-size: 13px !important;
    }

    .about-approach .about-approach-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .about-approach .about-approach-card {
        min-height: 220px !important;
        padding: 25px 23px !important;
    }

    .about-approach .about-card-number {
        margin-bottom: 22px !important;
    }

    .about-approach .about-card-line {
        margin-bottom: 28px !important;
    }

    .about-approach .about-approach-card h3 {
        font-size: 20px !important;
    }
}
/* =========================================================
   OUR APPROACH — COMPACT PREMIUM CARDS
========================================================= */

body.about-page .about-approach {
    padding: 80px 0 88px !important;
    background: #090909 !important;
}


/* =========================
   HEADING
========================= */

body.about-page .about-approach .about-section-heading {
    display: grid !important;
    grid-template-columns: 1fr 0.8fr !important;
    align-items: end !important;
    gap: 70px !important;
    margin-bottom: 42px !important;
}

body.about-page .about-approach .about-section-heading h2 {
    margin: 15px 0 0 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 40px !important;
    line-height: 1.08 !important;
    font-weight: 750 !important;
    letter-spacing: -1.5px !important;

    color: #ffffff !important;
}

body.about-page .about-approach .about-section-heading h2 em {
    display: block !important;
    font-style: normal !important;
    color: #858585 !important;
}

body.about-page .about-approach .about-section-heading > p {
    max-width: 500px !important;
    margin: 0 !important;

    font-size: 13.5px !important;
    line-height: 1.75 !important;

    color: #929292 !important;
}


/* =========================
   GRID
========================= */

body.about-page .about-approach .about-approach-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}


/* =========================
   CARD
========================= */

body.about-page .about-approach .about-approach-card {
    position: relative !important;

    display: block !important;

    /* CARD HEIGHT REDUCED */
    min-height: 185px !important;

    padding: 25px 24px 24px !important;

    background: #181818 !important;

    border: 1px solid #343434 !important;
    border-radius: 7px !important;

    overflow: hidden !important;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.18) !important;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* subtle top highlight */

body.about-page .about-approach .about-approach-card::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 24px !important;
    right: 24px !important;

    height: 1px !important;

    background: #454545 !important;

    transition:
        left 0.3s ease,
        right 0.3s ease,
        background 0.3s ease !important;
}


/* =========================
   NUMBER + TITLE + ICON ROW
========================= */

body.about-page .approach-card-top {
    display: grid !important;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        40px !important;

    align-items: center !important;

    gap: 14px !important;

    margin-bottom: 22px !important;
}


/* NUMBER */

body.about-page .approach-card-top .about-card-number {
    margin: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: 1.3px !important;

    color: #727272 !important;

    transition: color 0.3s ease !important;
}


/* TITLE */

body.about-page .approach-card-top h3 {
    margin: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 18px !important;
    line-height: 1.2 !important;

    font-weight: 700 !important;

    letter-spacing: -0.35px !important;

    color: #f3f3f3 !important;

    transition: color 0.3s ease !important;
}


/* =========================
   ICON
========================= */

body.about-page .approach-icon {
    width: 40px !important;
    height: 40px !important;

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

    border: 1px solid #444444 !important;

    border-radius: 50% !important;

    background: #202020 !important;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease !important;
}

body.about-page .approach-icon svg {
    width: 18px !important;
    height: 18px !important;

    fill: none !important;

    stroke: #b5b5b5 !important;
    stroke-width: 1.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    transition: stroke 0.3s ease !important;
}


/* =========================
   DESCRIPTION
========================= */

body.about-page .about-approach .about-approach-card > p {
    margin: 0 !important;

    padding-top: 18px !important;

    border-top: 1px solid #303030 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 12.5px !important;
    line-height: 1.65 !important;

    color: #909090 !important;

    transition:
        color 0.3s ease,
        border-color 0.3s ease !important;
}


/* =========================================================
   HOVER
   GRAPHITE + SILVER
========================================================= */

body.about-page .about-approach .about-approach-card:hover {

    /*
       GOLD REMOVED.
       Slightly lighter graphite instead.
    */

    background: #242424 !important;

    border-color: #777777 !important;

    transform: translateY(-5px) !important;

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}


/* top line becomes silver */

body.about-page .about-approach .about-approach-card:hover::before {
    left: 0 !important;
    right: 0 !important;

    background: #bcbcbc !important;
}


/* number */

body.about-page
.about-approach-card:hover
.about-card-number {

    color: #c7c7c7 !important;
}


/* title */

body.about-page
.about-approach-card:hover
.approach-card-top h3 {

    color: #ffffff !important;
}


/* icon circle */

body.about-page
.about-approach-card:hover
.approach-icon {

    background: #eeeeec !important;

    border-color: #eeeeec !important;

    transform: rotate(-5deg) scale(1.05) !important;
}


/* icon itself */

body.about-page
.about-approach-card:hover
.approach-icon svg {

    stroke: #151515 !important;
}


/* description */

body.about-page
.about-approach
.about-approach-card:hover > p {

    color: #c6c6c6 !important;

    border-color: #4a4a4a !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    body.about-page .about-approach .about-approach-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body.about-page .about-approach .about-approach-card {
        min-height: 180px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    body.about-page .about-approach {
        padding: 60px 0 65px !important;
    }

    body.about-page .about-approach .about-section-heading {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        margin-bottom: 32px !important;
    }

    body.about-page .about-approach .about-section-heading h2 {
        font-size: 31px !important;
    }

    body.about-page .about-approach .about-approach-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.about-page .about-approach .about-approach-card {
        min-height: auto !important;
        padding: 22px !important;
    }

    body.about-page .approach-card-top {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            38px !important;
    }

    body.about-page .approach-icon {
        width: 38px !important;
        height: 38px !important;
    }
}
body.about-page .about-approach {
    position: relative !important;

    background-image:
        linear-gradient(
            rgba(5, 5, 5, 0.88),
            rgba(5, 5, 5, 0.92)
        ),
        url("../../our approach.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
}

body.about-page .about-approach > .container {
    position: relative !important;
    z-index: 2 !important;
}/* OUR APPROACH — KEEP RIGHT-SIDE LOGO VISIBLE */

body.about-page .about-approach {
    background-position: right center !important;
}

/* Cards nu thoda transparent rakho */
body.about-page .about-approach .about-approach-card {
    background: rgba(20, 20, 20, 0.86) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Hover */
body.about-page .about-approach .about-approach-card:hover {
    background: rgba(35, 35, 35, 0.93) !important;
}
/* =========================================================
   ABOUT — LOCAL SERVICE + SECURITY SUPPORT
   2 COLUMN COMBINED SECTION
========================================================= */

body.about-page .about-local-cta {
    padding: 95px 0;
    background: #f3f3f1;
}


/* =========================
   MAIN 2 COLUMN GRID
========================= */

body.about-page .about-local-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;

    border: 1px solid #d3d3cf;
    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.07);
}


/* =========================
   BOTH COLUMNS
========================= */

body.about-page .about-local-cta-column {
    position: relative;

    min-height: 520px;

    padding: 55px 55px 50px;

    box-sizing: border-box;
}


/* divider */

body.about-page .about-support-column {
    border-right: 1px solid #d3d3cf;
}


/* =========================
   EYEBROW
========================= */

body.about-page .about-combined-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 38px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;

    color: #777;
}


body.about-page .about-combined-eyebrow span {
    display: block;

    width: 31px;
    height: 1px;

    background: #777;
}


/* =========================
   HEADING
========================= */

body.about-page .about-local-cta-column h2 {
    max-width: 570px;

    margin: 0 0 27px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(37px, 3.2vw, 51px);
    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2px;

    color: #101010;
}


body.about-page .about-local-cta-column h2 em {
    display: block;

    margin-top: 3px;

    font-style: normal;
    font-weight: 500;

    color: #8a8a88;
}


/* =========================
   DESCRIPTION
========================= */

body.about-page .about-local-cta-column > p {
    max-width: 560px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 13px;
    line-height: 1.8;

    color: #666;
}


/* =========================================================
   LEFT — BUTTONS
========================================================= */

body.about-page .about-combined-actions {
    display: flex;
    flex-direction: column;

    width: 245px;

    margin-top: 42px;

    gap: 10px;
}


body.about-page .about-combined-primary,
body.about-page .about-combined-secondary {
    min-height: 58px;

    display: flex;
    align-items: center;

    padding: 0 22px;

    box-sizing: border-box;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


/* black button */

body.about-page .about-combined-primary {
    justify-content: space-between;

    background: #090909;

    border: 1px solid #090909;

    color: #ffffff;
}


body.about-page .about-combined-primary:hover {
    background: #242424;

    border-color: #242424;

    transform: translateY(-2px);
}


/* white button */

body.about-page .about-combined-secondary {
    justify-content: center;

    background: transparent;

    border: 1px solid #c8c8c4;

    color: #151515;
}


body.about-page .about-combined-secondary:hover {
    background: #ededeb;

    border-color: #999;
}


/* =========================================================
   RIGHT — LOCATIONS
========================================================= */

body.about-page .about-combined-locations {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 34px;
}


body.about-page .about-combined-locations span {
    display: inline-flex;

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

    min-height: 43px;

    padding: 0 18px;

    border: 1px solid #c8c8c4;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .3px;

    text-transform: uppercase;

    color: #333;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


body.about-page .about-combined-locations span:hover {
    background: #151515;

    border-color: #151515;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================
   SERVICE AREA LINK
========================= */

body.about-page .about-combined-link {
    display: inline-block;

    margin-top: 35px;

    padding-bottom: 7px;

    border-bottom: 1px solid #888;

    font-family: "Manrope", sans-serif;

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

    text-decoration: none;

    color: #151515;

    transition:
        color .25s ease,
        border-color .25s ease;
}


body.about-page .about-combined-link:hover {
    color: #666;

    border-color: #151515;
}


/* =========================================================
   SUBTLE DIFFERENCE BETWEEN BOTH SIDES
========================================================= */

body.about-page .about-support-column {
    background: #ffffff;
}


body.about-page .about-service-column {
    background: #f8f8f6;
}


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

@media (max-width: 900px) {

    body.about-page .about-local-cta-grid {
        grid-template-columns: 1fr;
    }

    body.about-page .about-support-column {
        border-right: 0;
        border-bottom: 1px solid #d3d3cf;
    }

    body.about-page .about-local-cta-column {
        min-height: auto;

        padding: 45px 38px;
    }

}


@media (max-width: 600px) {

    body.about-page .about-local-cta {
        padding: 55px 0;
    }

    body.about-page .about-local-cta-column {
        padding: 35px 25px;
    }

    body.about-page .about-local-cta-column h2 {
        font-size: 34px;

        letter-spacing: -1.3px;
    }

    body.about-page .about-combined-actions {
        width: 100%;
    }

}
/* LOCAL SERVICE — DARK GREY VERSION */

body.about-page .about-service-column,
body.about-page .about-local {
    background: #262626 !important;
}

/* Main heading */
body.about-page .about-service-column h2,
body.about-page .about-local h2 {
    color: #ffffff !important;
}

/* Grey heading line */
body.about-page .about-service-column h2 em,
body.about-page .about-local h2 em {
    color: #a5a5a5 !important;
}

/* Description */
body.about-page .about-service-column > p,
body.about-page .about-local-content > p {
    color: #b8b8b8 !important;
}

/* Eyebrow */
body.about-page .about-service-column .about-combined-eyebrow,
body.about-page .about-local .eyebrow {
    color: #bcbcbc !important;
}

/* Location boxes */
body.about-page .about-combined-locations span,
body.about-page .about-location-list span {
    background: transparent !important;
    border-color: #555555 !important;
    color: #eeeeee !important;
}

/* Explore link */
body.about-page .about-combined-link,
body.about-page .about-text-link {
    color: #ffffff !important;
    border-color: #777777 !important;
}
/* =========================================================
   ABOUT — WHO WE ARE DARK GREY CARD
========================================================= */

/* Complete table/card */
body.about-page .about-company-left .about-who-content {
    background: #262626 !important;
    border-color: #555555 !important;
}


/* Top highlighted row */
body.about-page .about-company-left .about-who-lead {
    background: #2d2d2d !important;
    color: #ffffff !important;

    border-bottom-color: #555555 !important;
}


/* Bottom two columns */
body.about-page .about-company-left .about-who-column {
    background: #262626 !important;
}


/* Middle divider */
body.about-page .about-company-left .about-who-column:nth-child(2) {
    border-left-color: #555555 !important;
}


/* Bottom description text */
body.about-page .about-company-left .about-who-column p {
    color: #c2c2c2 !important;
}


/* Slight premium hover */
body.about-page .about-company-left .about-who-content {
    transition:
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

body.about-page .about-company-left .about-who-content:hover {
    border-color: #707070 !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.14) !important;
}
/* WHO WE ARE — DARK GREY BACKGROUND + WHITE CARD */

body.about-page .about-company-left {
    background: #262626 !important;
}

/* Eyebrow */
body.about-page .about-company-left .about-split-eyebrow {
    color: #bcbcbc !important;
}

body.about-page .about-company-left .about-split-eyebrow > span {
    background: #bcbcbc !important;
}

/* Heading */
body.about-page .about-company-left > h2 {
    color: #ffffff !important;
}

body.about-page .about-company-left > h2 em {
    color: #a5a5a5 !important;
}

/* WHITE CARD */
body.about-page .about-company-left .about-who-content {
    background: #ffffff !important;
    border-color: #9a9a96 !important;
}

/* Top row */
body.about-page .about-company-left .about-who-lead {
    background: #ffffff !important;
    color: #171717 !important;
    border-bottom-color: #b8b8b4 !important;
}

/* Bottom cells */
body.about-page .about-company-left .about-who-column {
    background: #ffffff !important;
}

/* Middle divider */
body.about-page .about-company-left .about-who-column:nth-child(2) {
    border-left-color: #b8b8b4 !important;
}

/* Description */
body.about-page .about-company-left .about-who-column p {
    color: #626262 !important;
}
/* =========================================================
   HOME — SECURITY SUPPORT + LOCAL SERVICE
========================================================= */

.home-support-service {
    padding: 95px 0;
    background: #f3f3f1;
}


.home-support-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;

    background: #ffffff;
    border: 1px solid #d3d3cf;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   BOTH COLUMNS
========================================================= */

.home-support-column,
.home-local-column {
    position: relative;

    min-height: 520px;

    padding: 55px 55px 50px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.home-support-column {
    background: #ffffff;

    border-right: 1px solid #d3d3cf;
}


/* =========================================================
   EYEBROW
========================================================= */

.home-combined-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 38px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;

    color: #777777;
}


.home-combined-eyebrow > span {
    display: block;

    width: 31px;
    height: 1px;

    flex-shrink: 0;

    background: #777777;
}


/* =========================================================
   HEADINGS
========================================================= */

.home-support-column h2,
.home-local-column h2 {
    max-width: 570px;

    margin: 0 0 27px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(37px, 3.2vw, 51px);
    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2px;

    color: #101010;
}


.home-support-column h2 em,
.home-local-column h2 em {
    display: block;

    margin-top: 3px;

    font-style: normal;
    font-weight: 500;

    color: #8a8a88;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.home-support-column > p,
.home-local-column > p {
    max-width: 560px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 13px;
    line-height: 1.8;

    color: #666666;
}


/* =========================================================
   LEFT BUTTONS
========================================================= */

.home-support-actions {
    display: flex;
    flex-direction: column;

    width: 245px;

    margin-top: 42px;

    gap: 10px;
}


.home-support-primary,
.home-support-secondary {
    min-height: 58px;

    display: flex;
    align-items: center;

    padding: 0 22px;

    box-sizing: border-box;

    font-family: "Manrope", sans-serif;

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

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* REQUEST QUOTE */

.home-support-primary {
    justify-content: space-between;

    background: #090909;

    border: 1px solid #090909;

    color: #ffffff;
}


.home-support-primary:hover {
    background: #242424;

    border-color: #242424;

    transform: translateY(-2px);
}


.home-button-arrow {
    font-size: 16px;
    line-height: 1;
}


/* VIEW SERVICES */

.home-support-secondary {
    justify-content: center;

    background: transparent;

    border: 1px solid #c8c8c4;

    color: #151515;
}


.home-support-secondary:hover {
    background: #ededeb;

    border-color: #999999;
}


/* =========================================================
   RIGHT — LOCAL SERVICE
========================================================= */

.home-local-column {
    background: #262626;
}


/* RIGHT EYEBROW */

.home-local-column .home-combined-eyebrow {
    color: #bcbcbc;
}


.home-local-column .home-combined-eyebrow > span {
    background: #777777;
}


/* RIGHT HEADING */

.home-local-column h2 {
    color: #ffffff;
}


.home-local-column h2 em {
    color: #a5a5a5;
}


/* RIGHT DESCRIPTION */

.home-local-column > p {
    color: #b8b8b8;
}


/* =========================================================
   LOCATION BUTTONS
========================================================= */

.home-local-locations {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 34px;
}


.home-local-locations span {
    display: inline-flex;

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

    min-height: 43px;

    padding: 0 18px;

    border: 1px solid #555555;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.3px;

    text-transform: uppercase;

    color: #eeeeee;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.home-local-locations span:hover {
    background: #eeeeec;

    border-color: #eeeeec;

    color: #151515;

    transform: translateY(-2px);
}


/* =========================================================
   SERVICE AREA LINK
========================================================= */

.home-local-link {
    display: inline-block;

    margin-top: 35px;

    padding-bottom: 7px;

    border-bottom: 1px solid #777777;

    font-family: "Manrope", sans-serif;

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

    text-decoration: none;

    color: #ffffff;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.home-local-link:hover {
    color: #c7c7c7;

    border-color: #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .home-support-service-grid {
        grid-template-columns: 1fr;
    }


    .home-support-column {
        border-right: 0;

        border-bottom: 1px solid #d3d3cf;
    }


    .home-support-column,
    .home-local-column {
        min-height: auto;

        padding: 45px 38px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .home-support-service {
        padding: 55px 0;
    }


    .home-support-column,
    .home-local-column {
        padding: 35px 25px;
    }


    .home-support-column h2,
    .home-local-column h2 {
        font-size: 34px;

        letter-spacing: -1.3px;
    }


    .home-support-actions {
        width: 100%;
    }


    .home-local-locations span {
        min-height: 40px;

        padding: 0 14px;

        font-size: 8px;
    }

}
/* =========================================================
   SERVICES PAGE — PREMIUM CARD DESIGN
   Paste at END of style.css
========================================================= */


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

.services-page-body .services-cards-section {
    padding: 95px 0 110px !important;
    background: #f3f3f1 !important;
}

.services-page-body .services-cards-container {
    width: min(92%, 1380px) !important;
    margin: 0 auto !important;
}


/* =========================
   SECTION INTRO
========================= */

.services-page-body .services-page-intro {
    max-width: 1050px !important;
    margin: 0 0 55px !important;
}

.services-page-body .services-page-eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    margin-bottom: 22px !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    letter-spacing: 2.2px !important;

    color: #777 !important;
}

.services-page-body .services-page-eyebrow::before {
    content: "" !important;

    width: 34px !important;
    height: 1px !important;

    background: #777 !important;
}


/* HEADING */

.services-page-body .services-page-intro h1 {
    max-width: 900px !important;

    margin: 0 0 22px !important;

    font-family: "Manrope", sans-serif !important;

    font-size: clamp(40px, 4vw, 62px) !important;
    line-height: 1.02 !important;

    font-weight: 800 !important;

    letter-spacing: -2.6px !important;

    color: #111 !important;
}

.services-page-body .services-page-intro h1 span {
    color: #8d8d8a !important;
}


/* DESCRIPTION */

.services-page-body .services-page-intro > p {
    max-width: 850px !important;

    margin: 0 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 14px !important;
    line-height: 1.75 !important;

    color: #666 !important;
}


/* =========================================================
   CARD GRID
========================================================= */

.services-page-body .services-card-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 22px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CARD
========================================================= */

.services-page-body .services-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    background: #ffffff !important;

    border: 1px solid #d8d8d4 !important;
    border-radius: 4px !important;

    overflow: hidden !important;

    text-decoration: none !important;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.05) !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* SILVER TOP LINE */

.services-page-body .services-card::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 0 !important;
    height: 3px !important;

    background: #9b9b98 !important;

    z-index: 5 !important;

    transition: width .4s ease !important;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.services-page-body .services-card-image {
    position: relative !important;

    width: 100% !important;
    height: 245px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            135deg,
            #202020 0%,
            #101010 100%
        ) !important;
}


/* IMAGE */

.services-page-body .services-card-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    filter:
        grayscale(100%)
        contrast(1.04)
        brightness(.72) !important;

    transition:
        transform .6s ease,
        filter .45s ease !important;
}


/* DARK IMAGE OVERLAY */

.services-page-body .services-card-image::after {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .04) 15%,
            rgba(0, 0, 0, .15) 60%,
            rgba(0, 0, 0, .55) 100%
        ) !important;

    pointer-events: none !important;

    transition: background .35s ease !important;
}


/* =========================================================
   NUMBER
========================================================= */

.services-page-body .services-card-number {
    position: absolute !important;

    top: 22px !important;
    left: 22px !important;

    z-index: 3 !important;

    width: 55px !important;
    height: 55px !important;

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

    border: 1px solid rgba(255,255,255,.48) !important;

    background: rgba(10,10,10,.42) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 11px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: 1px !important;

    color: #fff !important;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease !important;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.services-page-body .services-card-content {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    flex: 1 !important;

    min-height: 235px !important;

    padding: 30px 28px 25px !important;

    background: #fff !important;

    transition:
        background-color .35s ease !important;
}


/* TITLE */

.services-page-body .services-card-content h2 {
    margin: 0 0 14px !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 21px !important;
    line-height: 1.2 !important;

    font-weight: 750 !important;

    letter-spacing: -.6px !important;

    color: #141414 !important;

    transition: color .3s ease !important;
}


/* DESCRIPTION */

.services-page-body .services-card-content > p {
    margin: 0 0 28px !important;

    font-family: "Inter", sans-serif !important;

    font-size: 12.5px !important;
    line-height: 1.72 !important;

    color: #686866 !important;

    transition: color .3s ease !important;
}


/* =========================================================
   LEARN MORE
========================================================= */

.services-page-body .services-card-link {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    margin-top: auto !important;

    padding-top: 18px !important;

    border-top: 1px solid #dededb !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: .5px !important;

    text-transform: uppercase !important;

    color: #333 !important;

    transition:
        color .3s ease,
        border-color .3s ease !important;
}


/* ARROW */

.services-page-body .services-card-link b {
    width: 34px !important;
    height: 34px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #c8c8c4 !important;
    border-radius: 50% !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    color: #151515 !important;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease !important;
}


/* =========================================================
   PREMIUM HOVER
========================================================= */

.services-page-body .services-card:hover {
    transform: translateY(-8px) !important;

    border-color: #8b8b88 !important;

    box-shadow:
        0 22px 45px rgba(0, 0, 0, .14) !important;
}


/* TOP LINE EXPANDS */

.services-page-body .services-card:hover::before {
    width: 100% !important;
}


/* IMAGE ZOOM */

.services-page-body .services-card:hover
.services-card-image img {
    transform: scale(1.055) !important;

    filter:
        grayscale(100%)
        contrast(1.08)
        brightness(.82) !important;
}


/* NUMBER HOVER */

.services-page-body .services-card:hover
.services-card-number {
    background: #eeeeec !important;

    border-color: #eeeeec !important;

    color: #111 !important;

    transform: translateY(-2px) !important;
}


/* CONTENT HOVER */

.services-page-body .services-card:hover
.services-card-content {
    background: #171717 !important;
}


.services-page-body .services-card:hover
.services-card-content h2 {
    color: #ffffff !important;
}


.services-page-body .services-card:hover
.services-card-content > p {
    color: #aaaaa7 !important;
}


.services-page-body .services-card:hover
.services-card-link {
    color: #ffffff !important;

    border-color: #3d3d3d !important;
}


/* ARROW HOVER */

.services-page-body .services-card:hover
.services-card-link b {
    background: #eeeeec !important;

    border-color: #eeeeec !important;

    color: #111 !important;

    transform: rotate(45deg) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .services-page-body .services-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .services-page-body .services-cards-section {
        padding: 65px 0 75px !important;
    }


    .services-page-body .services-page-intro {
        margin-bottom: 38px !important;
    }


    .services-page-body .services-page-intro h1 {
        font-size: 38px !important;

        letter-spacing: -1.7px !important;
    }


    .services-page-body .services-card-grid {
        grid-template-columns: 1fr !important;

        gap: 16px !important;
    }


    .services-page-body .services-card-image {
        height: 220px !important;
    }


    .services-page-body .services-card-content {
        min-height: auto !important;

        padding: 25px 23px 22px !important;
    }

}
/* =========================================================
   SERVICES PAGE — WHITE BACKGROUND
   Header + Footer unchanged
========================================================= */

/* Whole services page main content */
.services-page-body main {
    background: #ffffff !important;
}


/* Services cards section */
.services-page-body .services-cards-section {
    background: #ffffff !important;
}


/* Security Support + Local Service outer area */
.services-page-body .home-support-service {
    background: #ffffff !important;
}


/* Remove any grey background inherited inside main sections */
.services-page-body main section {
    background-color: #ffffff;
}


/* Keep Local Service right column DARK as designed */
.services-page-body .home-support-service .home-local-column {
    background: #262626 !important;
}


/* Keep Security Support left column WHITE */
.services-page-body .home-support-service .home-support-column {
    background: #ffffff !important;
}
/* =========================================
   SERVICES — KEEP IMAGES IN ORIGINAL COLOR
========================================= */

.services-page-body .services-card-image img {
    filter: none !important;
    -webkit-filter: none !important;

    opacity: 1 !important;

    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* Hover te vi image color hi rahe */
.services-page-body .services-card:hover .services-card-image img {
    filter: none !important;
    -webkit-filter: none !important;

    transform: scale(1.055) !important;
}/* =========================================================
   SERVICES PAGE — REFERENCE STYLE CARDS
   BLACK + GREY TEXT / NO BLUE THEME
========================================================= */

body.services-page-body .services-cards-section {
    background: #ffffff !important;
    padding: 90px 0 110px !important;
}

body.services-page-body .services-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
}


/* =========================
   CARD
========================= */

body.services-page-body .services-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 2px solid #333333 !important;
    border-radius: 31px !important;

    overflow: hidden !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 18px rgba(0,0,0,.05),
        0 20px 38px rgba(0,0,0,.09) !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* =========================
   IMAGE
========================= */

body.services-page-body .services-card-image {
    position: relative !important;

    width: 100% !important;
    height: 285px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #eeeeec !important;

    border-radius:
        28px 28px 72px 0 !important;
}

body.services-page-body .services-card-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    filter: none !important;
    -webkit-filter: none !important;

    opacity: 1 !important;

    transition: transform .55s ease !important;
}

body.services-page-body .services-card-image::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.01) 35%,
            rgba(0,0,0,.15) 100%
        ) !important;
}


/* =========================
   NUMBER BADGE
========================= */

body.services-page-body .services-card-number {
    position: absolute !important;

    top: 22px !important;
    left: 22px !important;

    z-index: 5 !important;

    width: 61px !important;
    height: 61px !important;

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

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(20,20,20,.78) !important;

    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 18px !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    color: #ffffff !important;

    box-shadow: 0 5px 15px rgba(0,0,0,.14) !important;
}


/* =========================
   CONTENT
========================= */

body.services-page-body .services-card-content {
    position: relative !important;

    flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    min-height: 260px !important;

    margin: 0 !important;

    padding: 25px 31px 27px !important;

    background: #ffffff !important;

    color: #111111 !important;
}


/* =========================
   ICON + TITLE
========================= */

body.services-page-body .services-card-title-row {
    display: flex !important;
    align-items: center !important;

    gap: 16px !important;

    width: 100% !important;

    margin: 0 0 17px !important;
}

body.services-page-body .services-card-icon {
    width: 52px !important;
    height: 52px !important;

    flex: 0 0 52px !important;

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

    background: #eeeeec !important;

    border: 1px solid #d2d2cf !important;
    border-radius: 50% !important;

    color: #252525 !important;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease !important;
}

body.services-page-body .services-card-icon svg {
    width: 23px !important;
    height: 23px !important;

    fill: none !important;

    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

body.services-page-body .services-card-title-row h2 {
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 21px !important;
    line-height: 1.18 !important;

    font-weight: 800 !important;

    letter-spacing: -.6px !important;

    color: #111111 !important;
}


/* =========================
   DESCRIPTION
========================= */

body.services-page-body .services-card-content > p {
    margin: 0 0 25px !important;
    padding: 0 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 13px !important;
    line-height: 1.7 !important;

    font-weight: 400 !important;

    color: #696967 !important;
}


/* =========================
   LEARN MORE
========================= */

body.services-page-body .services-card-link {
    display: flex !important;
    align-items: center !important;

    gap: 15px !important;

    margin-top: auto !important;

    padding: 0 !important;

    border: 0 !important;

    color: #111111 !important;
}

body.services-page-body .services-card-link span {
    font-family: "Manrope", sans-serif !important;

    font-size: 12px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    text-transform: none !important;

    color: #111111 !important;
}

body.services-page-body .services-card-link b {
    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

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

    margin: 0 !important;
    padding: 0 0 2px !important;

    background: #222222 !important;

    border: 0 !important;
    border-radius: 50% !important;

    color: #ffffff !important;

    font-family: "Inter", sans-serif !important;
    font-size: 19px !important;
    line-height: 1 !important;

    font-weight: 400 !important;

    transition:
        background .3s ease,
        transform .3s ease !important;
}


/* =========================
   HOVER
========================= */

body.services-page-body .services-card:hover {
    transform: translateY(-7px) !important;

    border-color: #111111 !important;

    box-shadow:
        0 13px 25px rgba(0,0,0,.08),
        0 30px 55px rgba(0,0,0,.14) !important;
}

body.services-page-body
.services-card:hover
.services-card-image img {
    transform: scale(1.045) !important;

    filter: none !important;
}

body.services-page-body
.services-card:hover
.services-card-icon {
    background: #252525 !important;

    border-color: #252525 !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}

body.services-page-body
.services-card:hover
.services-card-link b {
    background: #050505 !important;

    transform: translateX(4px) !important;
}


/* =========================
   KEEP TEXT BLACK / GREY
========================= */

body.services-page-body .services-page-intro h1 {
    color: #101010 !important;
}

body.services-page-body .services-page-intro h1 span {
    color: #666663 !important;
}

body.services-page-body .services-page-intro > p {
    color: #666663 !important;
}

body.services-page-body .services-page-eyebrow {
    color: #555555 !important;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1100px) {

    body.services-page-body .services-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 24px !important;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    body.services-page-body .services-card-grid {
        grid-template-columns: 1fr !important;

        gap: 22px !important;
    }

    body.services-page-body .services-card {
        border-radius: 25px !important;
    }

    body.services-page-body .services-card-image {
        height: 255px !important;

        border-radius:
            23px 23px 58px 0 !important;
    }

    body.services-page-body .services-card-number {
        top: 17px !important;
        left: 17px !important;

        width: 54px !important;
        height: 54px !important;

        border-radius: 15px !important;

        font-size: 17px !important;
    }

    body.services-page-body .services-card-content {
        min-height: auto !important;

        padding: 22px 24px 24px !important;
    }

    body.services-page-body .services-card-icon {
        width: 47px !important;
        height: 47px !important;

        flex-basis: 47px !important;
    }

    body.services-page-body .services-card-icon svg {
        width: 21px !important;
        height: 21px !important;
    }

    body.services-page-body .services-card-title-row h2 {
        font-size: 19px !important;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 430px) {

    body.services-page-body .services-card-image {
        height: 220px !important;
    }

    body.services-page-body .services-card-content {
        padding: 20px 20px 22px !important;
    }

    body.services-page-body .services-card-title-row {
        gap: 13px !important;
    }

    body.services-page-body .services-card-title-row h2 {
        font-size: 18px !important;
    }

    body.services-page-body .services-card-content > p {
        font-size: 12.5px !important;
    }

}/* SERVICES CARD — LEARN MORE WHITE ON HOVER ONLY */

body.services-page-body
.services-card:hover
.services-card-link span {
    color: #ffffff !important;
}

body.services-page-body
.services-card:hover
.services-card-link {
    color: #ffffff !important;
}body.services-page-body
.services-card:hover
.services-card-link b {
    color: #ffffff !important;
}
/* =========================================================
   ENVIRONMENTS WE SUPPORT — PREMIUM CAROUSEL
========================================================= */

body.industries-page .ind-directory {
    padding: 20px 0 105px;
    background: #ffffff;
}


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

body.industries-page .ind-directory-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;

    gap: 80px;
    align-items: end;

    padding: 40px 0 38px;

    border-top: 1px solid #d8d8d5;
}


body.industries-page .ind-directory-header .ind-eyebrow {
    margin-bottom: 20px;
}


body.industries-page .ind-directory-header h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(36px, 3.1vw, 48px);
    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2px;

    color: #111111;
}


body.industries-page .ind-directory-header h2 em {
    font-style: normal;
    font-weight: 500;

    color: #90908d;
}


body.industries-page .ind-directory-header > p {
    margin: 0;

    font-size: 12.5px;
    line-height: 1.75;

    color: #70706d;
}


/* =========================
   CAROUSEL
========================= */

body.industries-page .ind-carousel {
    position: relative;

    margin-top: 5px;
}


body.industries-page .ind-carousel-viewport {
    overflow: hidden;

    padding: 8px 0 22px;
}


body.industries-page .ind-carousel-track {
    display: flex;

    gap: 24px;

    transition:
        transform .65s cubic-bezier(.22, .61, .36, 1);

    will-change: transform;
}


/* =========================
   INDUSTRY CARD
========================= */

body.industries-page .ind-industry-card {
    position: relative;

    flex: 0 0 calc((100% - 48px) / 3);

    min-width: 0;
    min-height: 400px;

    padding: 34px 32px 30px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #d2d2cf;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f7f5 100%
        );

    color: #111111;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .055);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* LEFT DETAIL */

body.industries-page .ind-industry-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 34px;

    width: 3px;
    height: 58px;

    border-radius: 0 4px 4px 0;

    background: #777774;

    transform: scaleY(.45);

    transform-origin: top;

    transition:
        transform .35s ease,
        background .35s ease;
}


/* DECORATIVE CIRCLE */

body.industries-page .ind-industry-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -95px;
    top: -95px;

    border: 1px solid rgba(0, 0, 0, .07);

    border-radius: 50%;

    transition:
        border-color .35s ease,
        transform .5s ease;
}


/* =========================
   CARD TOP
========================= */

body.industries-page .ind-industry-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 68px;
}


body.industries-page .ind-industry-number {
    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;

    color: #aaa9a6;

    transition: color .3s ease;
}


body.industries-page .ind-industry-category {
    padding: 8px 11px;

    border: 1px solid #d4d4d1;

    border-radius: 999px;

    font-family: "Manrope", sans-serif;

    font-size: 7.5px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    color: #747471;

    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease;
}


/* =========================
   TITLE
========================= */

body.industries-page .ind-industry-card h3 {
    position: relative;

    z-index: 2;

    max-width: 330px;

    margin: 0 0 15px;

    font-family: "Manrope", sans-serif;

    font-size: 27px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1px;

    color: #141414;

    transition: color .3s ease;
}


/* DESCRIPTION */

body.industries-page .ind-industry-card > p {
    position: relative;

    z-index: 2;

    margin: 0 0 27px;

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

    color: #6d6d6a;

    transition: color .3s ease;
}


/* =========================
   FOCUS TAGS
========================= */

body.industries-page .ind-industry-focus {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;

    padding-top: 22px;

    border-top: 1px solid #dededb;

    transition:
        border-color .3s ease,
        padding-right .3s ease;
}


body.industries-page .ind-industry-focus span {
    min-height: 29px;

    display: inline-flex;

    align-items: center;

    padding: 0 10px;

    border: 1px solid #d4d4d1;

    border-radius: 999px;

    font-family: "Manrope", sans-serif;

    font-size: 7.5px;

    font-weight: 800;

    letter-spacing: .35px;

    text-transform: uppercase;

    color: #62625f;

    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease;
}


/* =========================
   ARROW
========================= */

body.industries-page .ind-industry-arrow {
    position: absolute;

    z-index: 3;

    right: 29px;
    bottom: 27px;

    width: 42px;
    height: 42px;

    display: flex;

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

    border: 1px solid #c8c8c5;

    border-radius: 50%;

    background: #ffffff;

    font-size: 18px;

    color: #111111;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* =========================
   CARD HOVER
========================= */

body.industries-page .ind-industry-card:hover {
    transform: translateY(-7px);

    background: #181818;

    border-color: #303030;

    box-shadow:
        0 20px 42px rgba(0, 0, 0, .15);
}


body.industries-page .ind-industry-card:hover::before {
    transform: scaleY(1);

    background: #c8c8c5;
}


body.industries-page .ind-industry-card:hover::after {
    border-color: rgba(255, 255, 255, .09);

    transform: scale(1.08);
}


body.industries-page
.ind-industry-card:hover
.ind-industry-number {
    color: #a7a7a4;
}


body.industries-page
.ind-industry-card:hover
.ind-industry-category {
    border-color: #474747;

    background: #222222;

    color: #b8b8b5;
}


body.industries-page
.ind-industry-card:hover h3 {
    color: #ffffff;
}


body.industries-page
.ind-industry-card:hover > p {
    color: #b5b5b2;
}


body.industries-page
.ind-industry-card:hover
.ind-industry-focus {
    padding-right: 55px;

    border-color: #3e3e3e;
}


body.industries-page
.ind-industry-card:hover
.ind-industry-focus span {
    border-color: #464646;

    background: #222222;

    color: #d0d0cd;
}


body.industries-page
.ind-industry-card:hover
.ind-industry-arrow {
    opacity: 1;

    transform: translateY(0);
}


/* =========================
   BOTTOM CONTROLS
========================= */

body.industries-page .ind-carousel-controls {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 18px;
}


/* COUNTER */

body.industries-page .ind-carousel-status {
    min-width: 68px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;

    color: #777774;
}


/* PROGRESS LINE */

body.industries-page .ind-carousel-progress {
    position: relative;

    flex: 1;

    height: 2px;

    overflow: hidden;

    background: #d5d5d2;
}


body.industries-page .ind-carousel-progress span {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;

    width: 25%;

    background: #171717;

    transition:
        left .45s ease,
        width .35s ease;
}


/* BUTTON AREA */

body.industries-page .ind-carousel-buttons {
    display: flex;

    gap: 9px;
}


body.industries-page .ind-carousel-button {
    width: 50px;
    height: 50px;

    display: inline-flex;

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

    padding: 0;

    border: 1px solid #c9c9c6;

    border-radius: 50%;

    background: #ffffff;

    color: #151515;

    font-size: 20px;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


body.industries-page .ind-carousel-button:hover {
    background: #171717;

    border-color: #171717;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================
   TABLET
========================= */

@media (max-width: 1050px) {

    body.industries-page .ind-directory-header {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    body.industries-page .ind-directory-header > p {
        max-width: 650px;
    }


    body.industries-page .ind-industry-card {
        flex-basis:
            calc((100% - 24px) / 2);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

    body.industries-page .ind-directory {
        padding-bottom: 70px;
    }


    body.industries-page .ind-directory-header {
        padding: 30px 0;
    }


    body.industries-page .ind-directory-header h2 {
        font-size: 34px;
    }


    body.industries-page .ind-carousel-track {
        gap: 15px;
    }


    body.industries-page .ind-industry-card {
        flex-basis: 100%;

        min-height: 380px;

        padding: 29px 25px 26px;

        border-radius: 22px;
    }


    body.industries-page .ind-industry-top {
        margin-bottom: 55px;
    }


    body.industries-page .ind-industry-card h3 {
        font-size: 24px;
    }


    body.industries-page .ind-carousel-status {
        display: none;
    }

}
/* =========================================================
   ENVIRONMENTS WE SUPPORT — PREMIUM CARD CAROUSEL
========================================================= */

body.industries-page .env-section {
    position: relative;
    padding: 30px 0 115px;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f5f3 100%
        );
}


/* =========================================================
   HEADING
========================================================= */

body.industries-page .env-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .65fr);

    gap: 100px;
    align-items: end;

    padding: 44px 0 45px;

    border-top: 1px solid #d5d5d2;
}


body.industries-page .env-heading h2 {
    max-width: 720px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(42px, 4vw, 60px);
    line-height: 1;

    font-weight: 800;

    letter-spacing: -2.8px;

    color: #111111;
}


body.industries-page .env-heading h2 span {
    display: block;

    margin-top: 6px;

    font-weight: 500;

    color: #969693;
}


body.industries-page .env-heading-right {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


body.industries-page .env-heading-right > p {
    max-width: 500px;

    margin: 0;

    font-size: 13px;
    line-height: 1.8;

    color: #696966;
}


/* TOP ARROWS */

body.industries-page .env-heading-controls {
    display: flex;

    gap: 9px;

    margin-top: 26px;
}


body.industries-page .env-arrow {
    width: 48px;
    height: 48px;

    display: flex;

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

    padding: 0;

    border: 1px solid #c7c7c3;

    border-radius: 50%;

    background: transparent;

    font-size: 19px;

    color: #111111;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


body.industries-page .env-arrow:hover {
    background: #111111;

    border-color: #111111;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   CAROUSEL
========================================================= */

body.industries-page .env-carousel {
    position: relative;
}


body.industries-page .env-viewport {
    width: 100%;

    overflow: hidden;

    padding: 10px 3px 30px;
}


body.industries-page .env-track {
    display: flex;

    gap: 22px;

    will-change: transform;

    transition:
        transform .75s
        cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   CARD
========================================================= */

body.industries-page .env-card {
    position: relative;

    flex:
        0 0
        calc((100% - 44px) / 3);

    min-width: 0;

    min-height: 505px;

    display: flex;
    flex-direction: column;

    padding: 29px 29px 27px;

    overflow: hidden;

    border: 1px solid #d1d1cd;

    border-radius: 22px;

    background: #ffffff;

    color: #111111;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.045);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}


/* SMALL TOP LINE */

body.industries-page .env-card::before {
    content: "";

    position: absolute;

    left: 29px;
    top: 0;

    width: 55px;
    height: 3px;

    background: #7f7f7b;

    transition:
        width .4s ease,
        background .35s ease;
}


/* LARGE BACKGROUND NUMBER */

body.industries-page .env-card::after {
    content: attr(data-number);

    position: absolute;

    right: -10px;
    top: 65px;

    font-family: "Manrope", sans-serif;

    font-size: 150px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -10px;

    color: rgba(0,0,0,.022);

    pointer-events: none;
}


/* =========================================================
   CARD TOP
========================================================= */

body.industries-page .env-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


body.industries-page .env-number {
    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #a4a4a0;

    transition: color .3s ease;
}


body.industries-page .env-type {
    padding: 7px 11px;

    border: 1px solid #d7d7d3;

    border-radius: 50px;

    font-family: "Manrope", sans-serif;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    color: #777773;

    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease;
}


/* =========================================================
   ICON / SYMBOL
========================================================= */

body.industries-page .env-card-symbol {
    position: relative;

    z-index: 2;

    width: 82px;
    height: 82px;

    display: flex;

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

    margin: 44px 0 40px;

    border: 1px solid #ddddda;

    border-radius: 50%;

    background: #f7f7f5;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}


body.industries-page .env-card-symbol svg {
    width: 37px;
    height: 37px;

    fill: none;

    stroke: #31312f;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: stroke .35s ease;
}


/* =========================================================
   CONTENT
========================================================= */

body.industries-page .env-card-content {
    position: relative;

    z-index: 2;
}


body.industries-page .env-small-title {
    display: block;

    margin-bottom: 12px;

    font-family: "Manrope", sans-serif;

    font-size: 7.5px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;

    color: #9a9a96;

    transition: color .3s ease;
}


body.industries-page .env-card h3 {
    margin: 0 0 17px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(25px, 2vw, 31px);
    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -1.2px;

    color: #161616;

    transition: color .3s ease;
}


body.industries-page .env-card-content p {
    max-width: 360px;

    margin: 0;

    font-size: 11.5px;
    line-height: 1.75;

    color: #6b6b68;

    transition: color .3s ease;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

body.industries-page .env-card-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-top: auto;

    padding-top: 24px;

    border-top: 1px solid #e0e0dd;

    transition: border-color .3s ease;
}


body.industries-page .env-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


body.industries-page .env-tags span {
    min-height: 27px;

    display: inline-flex;

    align-items: center;

    padding: 0 9px;

    border: 1px solid #d7d7d4;

    border-radius: 50px;

    font-family: "Manrope", sans-serif;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .35px;

    text-transform: uppercase;

    color: #666663;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


body.industries-page .env-card-arrow {
    flex: 0 0 auto;

    width: 41px;
    height: 41px;

    display: flex;

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

    border: 1px solid #cacac6;

    border-radius: 50%;

    font-size: 17px;

    color: #171717;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


/* =========================================================
   HOVER
========================================================= */

body.industries-page .env-card:hover {
    transform: translateY(-8px);

    border-color: #252525;

    background: #191919;

    box-shadow:
        0 22px 45px
        rgba(0,0,0,.14);
}


body.industries-page .env-card:hover::before {
    width: 95px;

    background: #bdbdba;
}


body.industries-page .env-card:hover .env-number {
    color: #777777;
}


body.industries-page .env-card:hover .env-type {
    border-color: #444444;

    background: #222222;

    color: #bdbdb9;
}


body.industries-page .env-card:hover .env-card-symbol {
    border-color: #404040;

    background: #222222;

    transform: rotate(-4deg);
}


body.industries-page .env-card:hover .env-card-symbol svg {
    stroke: #ffffff;
}


body.industries-page .env-card:hover .env-small-title {
    color: #777777;
}


body.industries-page .env-card:hover h3 {
    color: #ffffff;
}


body.industries-page .env-card:hover .env-card-content p {
    color: #b2b2af;
}


body.industries-page .env-card:hover .env-card-bottom {
    border-color: #3e3e3e;
}


body.industries-page .env-card:hover .env-tags span {
    border-color: #464646;

    background: #222222;

    color: #bdbdba;
}


body.industries-page .env-card:hover .env-card-arrow {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

    transform: rotate(45deg);
}


/* =========================================================
   PROGRESS / COUNTER
========================================================= */

body.industries-page .env-carousel-footer {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 35px;

    align-items: center;

    margin-top: 4px;
}


body.industries-page .env-progress {
    position: relative;

    width: 100%;
    height: 2px;

    overflow: hidden;

    background: #d1d1ce;
}


body.industries-page .env-progress-fill {
    position: absolute;

    left: 0;
    top: 0;

    width: 25%;
    height: 100%;

    background: #111111;

    transition:
        transform .55s ease,
        width .4s ease;
}


body.industries-page .env-counter {
    min-width: 72px;

    display: flex;

    align-items: baseline;

    gap: 6px;

    font-family: "Manrope", sans-serif;
}


body.industries-page .env-counter strong {
    font-size: 17px;

    font-weight: 800;

    color: #111111;
}


body.industries-page .env-counter span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #92928f;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    body.industries-page .env-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    body.industries-page .env-heading-right > p {
        max-width: 650px;
    }


    body.industries-page .env-card {
        flex-basis:
            calc((100% - 22px) / 2);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    body.industries-page .env-section {
        padding-bottom: 75px;
    }


    body.industries-page .env-heading {
        padding:
            32px 0
            35px;
    }


    body.industries-page .env-heading h2 {
        font-size: 37px;

        letter-spacing: -1.8px;
    }


    body.industries-page .env-track {
        gap: 14px;
    }


    body.industries-page .env-card {
        flex-basis: 100%;

        min-height: 480px;

        padding: 26px 23px 24px;
    }


    body.industries-page .env-card-symbol {
        margin:
            38px 0
            34px;
    }


    body.industries-page .env-card h3 {
        font-size: 27px;
    }


    body.industries-page .env-carousel-footer {
        gap: 20px;
    }

}
/* =========================================================
   ENVIRONMENT CARDS — COMPACT SIZE
========================================================= */

/* CARD SIZE SMALLER */
body.industries-page .env-card {
    min-height: 430px !important;
    padding: 24px 25px 22px !important;
}


/* ICON CIRCLE SMALLER */
body.industries-page .env-card-symbol {
    width: 64px !important;
    height: 64px !important;

    margin: 30px 0 28px !important;
}


/* ACTUAL ICON SMALLER */
body.industries-page .env-card-symbol svg {
    width: 28px !important;
    height: 28px !important;
}


/* LITTLE LESS TITLE SIZE */
body.industries-page .env-card h3 {
    font-size: 27px !important;
    margin-bottom: 13px !important;
}


/* DESCRIPTION A LITTLE TIGHTER */
body.industries-page .env-card-content p {
    font-size: 11px !important;
    line-height: 1.65 !important;
}


/* BOTTOM AREA COMPACT */
body.industries-page .env-card-bottom {
    padding-top: 18px !important;
}


/* TAGS SLIGHTLY SMALLER */
body.industries-page .env-tags span {
    min-height: 25px !important;
    padding: 0 8px !important;
    font-size: 6.5px !important;
}


/* ARROW ALSO SLIGHTLY SMALLER */
body.industries-page .env-card-arrow {
    width: 37px !important;
    height: 37px !important;
    font-size: 15px !important;
}


/* MOBILE */
@media (max-width: 650px) {

    body.industries-page .env-card {
        min-height: 420px !important;
        padding: 23px 21px 21px !important;
    }

    body.industries-page .env-card-symbol {
        width: 58px !important;
        height: 58px !important;
        margin: 27px 0 25px !important;
    }

    body.industries-page .env-card-symbol svg {
        width: 25px !important;
        height: 25px !important;
    }
}/* =========================================================
   JSB INDUSTRIES PAGE
========================================================= */


/* =========================================================
   BASE
========================================================= */

body.industries-page {
    margin: 0;
    background: #ffffff;
    color: #111111;
    font-family: "Inter", sans-serif;
}

body.industries-page *,
body.industries-page *::before,
body.industries-page *::after {
    box-sizing: border-box;
}

body.industries-page a {
    text-decoration: none;
}

body.industries-page button,
body.industries-page input,
body.industries-page select,
body.industries-page textarea {
    font: inherit;
}

body.industries-page button {
    cursor: pointer;
}

body.industries-page .ind-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


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

body.industries-page .ind-header {
    background: #070707;
    border-bottom: 1px solid #1e1e1e;
}

body.industries-page .ind-header-inner {
    width: min(1380px, calc(100% - 80px));
    min-height: 120px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    gap: 40px;
}

body.industries-page .ind-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

body.industries-page .ind-brand-logo {
    width: 72px;
    height: 82px;
    object-fit: contain;
    background: #0d0d0d;
}

body.industries-page .ind-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

body.industries-page .ind-brand-copy strong {
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
    color: #ffffff;
}

body.industries-page .ind-brand-copy span {
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #919191;
}

body.industries-page .ind-nav {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 34px;
}

body.industries-page .ind-nav a {
    position: relative;

    padding: 15px 0;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: #898989;

    transition: color .25s ease;
}

body.industries-page .ind-nav a:hover,
body.industries-page .ind-nav a.active {
    color: #ffffff;
}

body.industries-page .ind-nav a.active::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;

    height: 1px;
    background: #ffffff;
}

body.industries-page .ind-quote {
    min-height: 62px;
    padding: 0 28px;

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

    flex-shrink: 0;

    background: #ffffff;
    border: 1px solid #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;

    color: #111111;

    transition:
        background .25s ease,
        color .25s ease;
}

body.industries-page .ind-quote:hover {
    background: #1e1e1e;
    color: #ffffff;
}


/* =========================================================
   COMMON EYEBROW
========================================================= */

body.industries-page .ind-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 29px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;

    color: #747474;
}

body.industries-page .ind-eyebrow::before {
    content: "";

    display: block;

    width: 34px;
    height: 1px;

    background: currentColor;
}

body.industries-page .ind-eyebrow.light {
    color: #8d8d8d;
}


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

body.industries-page .ind-hero {
    position: relative;

    min-height: 630px;
    padding: 105px 0 85px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #070707 0%,
            #0b0b0b 57%,
            #151515 100%
        );
}

body.industries-page .ind-hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -230px;
    top: -330px;

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

body.industries-page .ind-hero::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: 70px;
    bottom: -320px;

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

body.industries-page .ind-hero-grid {
    position: relative;
    z-index: 2;

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

    gap: 110px;
    align-items: end;
}

body.industries-page .ind-hero h1 {
    max-width: 900px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 5.7vw, 82px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -4px;

    color: #ffffff;
}

body.industries-page .ind-hero h1 em {
    display: block;
    margin-top: 8px;

    font-style: normal;
    font-weight: 500;

    color: #858585;
}

body.industries-page .ind-hero-right {
    padding-bottom: 4px;
}

body.industries-page .ind-hero-right > p {
    max-width: 490px;

    margin: 0;

    font-size: 14px;
    line-height: 1.85;

    color: #a3a3a3;
}

body.industries-page .ind-hero-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    margin-top: 37px;

    border-top: 1px solid #333333;
}

body.industries-page .ind-hero-info-item {
    padding: 24px 18px 0 0;
}

body.industries-page
.ind-hero-info-item + .ind-hero-info-item {
    padding-left: 25px;
    border-left: 1px solid #333333;
}

body.industries-page .ind-hero-info strong {
    display: block;

    margin-bottom: 7px;

    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 700;

    color: #ffffff;
}

body.industries-page .ind-hero-info span {
    display: block;

    font-size: 9px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #686868;
}


/* =========================================================
   INTRO
========================================================= */

body.industries-page .ind-intro {
    padding: 105px 0 95px;
    background: #ffffff;
}

body.industries-page .ind-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap: 120px;
    align-items: start;
}

body.industries-page .ind-intro h2 {
    max-width: 590px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 3.6vw, 55px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -2.4px;

    color: #111111;
}

body.industries-page .ind-intro h2 em {
    display: block;
    margin-top: 5px;

    font-style: normal;
    font-weight: 500;

    color: #929290;
}

body.industries-page .ind-intro-copy {
    max-width: 680px;
}

body.industries-page .ind-intro-copy p {
    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.85;

    color: #666664;
}

body.industries-page .ind-intro-copy p:first-child {
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;

    color: #333333;
}

body.industries-page .ind-intro-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   NEW ENVIRONMENT SECTION
========================================================= */

body.industries-page .env-section {
    padding: 100px 0 115px;
    background: #f6f6f4;
    overflow: hidden;
}

body.industries-page .env-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .65fr);

    gap: 90px;

    align-items: end;

    margin-bottom: 55px;
}

body.industries-page .env-heading h2 {
    max-width: 720px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(45px, 4.8vw, 70px);
    line-height: 1;

    font-weight: 800;

    letter-spacing: -3.4px;

    color: #111111;
}

body.industries-page .env-heading h2 span {
    display: block;

    margin-top: 6px;

    font-weight: 500;

    color: #969694;
}

body.industries-page .env-heading-right > p {
    max-width: 520px;

    margin: 0;

    font-size: 13px;
    line-height: 1.85;

    color: #666664;
}

body.industries-page .env-heading-controls {
    display: flex;
    gap: 9px;

    margin-top: 30px;
}

body.industries-page .env-arrow {
    width: 50px;
    height: 50px;

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

    border: 1px solid #c7c7c3;
    border-radius: 50%;

    background: transparent;

    font-size: 18px;

    color: #151515;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

body.industries-page .env-arrow:hover {
    background: #111111;
    border-color: #111111;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   CAROUSEL
========================================================= */

body.industries-page .env-carousel {
    width: 100%;
}

body.industries-page .env-viewport {
    width: 100%;
    overflow: hidden;
}

body.industries-page .env-track {
    display: flex;
    gap: 24px;

    transition:
        transform .6s cubic-bezier(.22,.61,.36,1);
}

body.industries-page .env-card {
    flex:
        0 0
        calc((100% - 48px) / 3);

    min-width: 0;

    overflow: hidden;

    border: 1px solid #d3d3cf;
    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

body.industries-page .env-card:hover {
    transform: translateY(-8px);

    border-color: #bcbcb8;

    box-shadow:
        0 25px 55px rgba(0,0,0,.12);
}


/* =========================================================
   CARD IMAGE
========================================================= */

body.industries-page .env-card-image {
    position: relative;

    height: 265px;

    overflow: hidden;

    background: #1b1b1b;
}

body.industries-page .env-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter: none !important;

    transform: scale(1.001);

    transition:
        transform .65s ease;
}

body.industries-page
.env-card:hover
.env-card-image img {
    transform: scale(1.07);
}

body.industries-page .env-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.36) 0%,
            rgba(0,0,0,.04) 45%,
            rgba(0,0,0,.56) 100%
        );

    pointer-events: none;
}

body.industries-page .env-number {
    position: absolute;

    top: 20px;
    left: 20px;

    min-width: 48px;
    height: 38px;

    padding: 0 13px;

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

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

    background: rgba(0,0,0,.48);

    backdrop-filter: blur(8px);

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #ffffff;
}

body.industries-page .env-type {
    position: absolute;

    top: 20px;
    right: 20px;

    min-height: 38px;

    padding: 0 15px;

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

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

    background: rgba(0,0,0,.43);

    backdrop-filter: blur(8px);

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #ffffff;
}


/* =========================================================
   CARD BODY
========================================================= */

body.industries-page .env-card-body {
    padding: 31px 30px 30px;
}

body.industries-page .env-small-title {
    display: block;

    margin-bottom: 12px;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 1.25px;

    color: #999996;
}

body.industries-page .env-card h3 {
    min-height: 62px;

    margin: 0 0 14px;

    font-family: "Manrope", sans-serif;

    font-size: 27px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1px;

    color: #111111;
}

body.industries-page .env-card-description {
    min-height: 70px;

    margin: 0 0 24px;

    font-size: 12.5px;
    line-height: 1.75;

    color: #6d6d6a;
}


/* =========================================================
   REQUIREMENT CHIPS
========================================================= */

body.industries-page .env-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 8px;

    margin-bottom: 27px;
}

body.industries-page .env-requirements > span {
    min-height: 45px;

    padding: 7px 9px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid #dededb;
    border-radius: 10px;

    background: #fafaf9;

    font-family: "Manrope", sans-serif;

    font-size: 8px;
    line-height: 1.25;

    font-weight: 800;

    text-transform: uppercase;

    color: #555552;
}

body.industries-page .env-requirements i {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

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

    border-radius: 50%;

    background: #ededeb;
}

body.industries-page .env-requirements svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke: #1b1b1b;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   PLAN BUTTON
========================================================= */

body.industries-page .env-plan-button {
    width: 100%;
    min-height: 55px;

    padding: 0 9px 0 19px;

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

    gap: 15px;

    border: 1px solid #111111;
    border-radius: 50px;

    background: #111111;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .4px;

    text-transform: uppercase;

    color: #ffffff;

    transition:
        background .25s ease,
        color .25s ease;
}

body.industries-page .env-plan-button b {
    width: 39px;
    height: 39px;

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

    flex: 0 0 39px;

    border-radius: 50%;

    background: #ffffff;

    font-size: 17px;
    font-weight: 400;

    color: #111111;

    transition:
        transform .3s ease;
}

body.industries-page
.env-plan-button:hover b {
    transform: translateX(3px);
}


/* =========================================================
   CAROUSEL FOOTER
========================================================= */

body.industries-page .env-carousel-footer {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 35px;
}

body.industries-page .env-progress {
    position: relative;

    height: 2px;

    flex: 1;

    overflow: hidden;

    background: #d3d3d0;
}

body.industries-page .env-progress-fill {
    display: block;

    width: 25%;
    height: 100%;

    background: #111111;

    transition: width .4s ease;
}

body.industries-page .env-counter {
    min-width: 70px;

    display: flex;
    align-items: baseline;

    gap: 5px;

    font-family: "Manrope", sans-serif;
}

body.industries-page .env-counter strong {
    font-size: 16px;
    font-weight: 800;

    color: #111111;
}

body.industries-page .env-counter span {
    font-size: 9px;
    font-weight: 700;

    color: #999996;
}


/* =========================================================
   PRIORITIES
========================================================= */

body.industries-page .ind-priorities {
    position: relative;

    padding: 105px 0 110px;

    overflow: hidden;

    background: #0a0a0a;
}

body.industries-page .ind-priorities-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .75fr);

    gap: 100px;

    align-items: end;

    margin-bottom: 55px;
}

body.industries-page .ind-priorities h2 {
    max-width: 720px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(42px, 4vw, 60px);
    line-height: 1.03;

    font-weight: 800;

    letter-spacing: -2.5px;

    color: #ffffff;
}

body.industries-page .ind-priorities h2 em {
    display: block;

    margin-top: 5px;

    font-style: normal;
    font-weight: 500;

    color: #777777;
}

body.industries-page
.ind-priorities-heading > p {
    max-width: 520px;

    margin: 0;

    font-size: 13px;
    line-height: 1.8;

    color: #8f8f8f;
}

body.industries-page .ind-priority-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
}

body.industries-page .ind-priority-card {
    position: relative;

    min-height: 300px;

    padding: 31px 29px 30px;

    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;

    overflow: hidden;

    transition: background .3s ease;
}

body.industries-page
.ind-priority-card:hover {
    background: #171717;
}

body.industries-page .ind-priority-number {
    display: block;

    margin-bottom: 68px;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1.5px;

    color: #5f5f5f;
}

body.industries-page .ind-priority-card h3 {
    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;

    font-size: 19px;
    line-height: 1.25;

    font-weight: 700;

    color: #ffffff;
}

body.industries-page .ind-priority-card p {
    margin: 0;

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

    color: #858585;
}

body.industries-page .ind-priority-line {
    position: absolute;

    left: 29px;
    right: 29px;
    bottom: 0;

    height: 2px;

    background: #707070;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s ease;
}

body.industries-page
.ind-priority-card:hover
.ind-priority-line {
    transform: scaleX(1);
}


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

body.industries-page .ind-cta {
    padding: 100px 0;

    background: #f3f3f1;
}

body.industries-page .ind-cta-box {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap: 80px;

    align-items: center;

    padding: 64px 62px;

    background: #ffffff;

    border: 1px solid #d1d1ce;

    box-shadow:
        0 12px 35px rgba(0,0,0,.07);
}

body.industries-page .ind-cta h2 {
    max-width: 830px;

    margin: 0 0 18px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(38px,3.6vw,54px);
    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2.2px;

    color: #111111;
}

body.industries-page .ind-cta h2 em {
    display: block;

    margin-top: 5px;

    font-style: normal;
    font-weight: 500;

    color: #8d8d8b;
}

body.industries-page .ind-cta p {
    max-width: 750px;

    margin: 0;

    font-size: 13px;
    line-height: 1.8;

    color: #666664;
}

body.industries-page .ind-cta-button {
    min-width: 270px;
    min-height: 66px;

    padding: 0 25px;

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

    gap: 35px;

    background: #090909;
    border: 1px solid #090909;

    font-family: "Manrope", sans-serif;

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

    color: #ffffff;

    transition:
        background .25s ease,
        transform .25s ease;
}

body.industries-page
.ind-cta-button:hover {
    background: #292929;
    transform: translateY(-3px);
}


/* =========================================================
   SECURITY PLAN BUILDER
========================================================= */

body.builder-open {
    overflow: hidden;
}

.security-builder {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    visibility: hidden;
    pointer-events: none;
}

.security-builder.open {
    visibility: visible;
    pointer-events: auto;
}

.builder-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.68);

    opacity: 0;

    backdrop-filter: blur(5px);

    transition: opacity .35s ease;
}

.security-builder.open
.builder-backdrop {
    opacity: 1;
}

.builder-panel {
    position: relative;
    z-index: 2;

    width: min(760px, 100%);
    height: 100%;

    overflow-y: auto;

    padding: 45px 50px 35px;

    background: #f5f5f3;

    box-shadow:
        -20px 0 60px rgba(0,0,0,.25);

    transform: translateX(100%);

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1);
}

.security-builder.open
.builder-panel {
    transform: translateX(0);
}


/* BUILDER HEADER */

.builder-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 30px;

    padding-bottom: 30px;

    border-bottom: 1px solid #d2d2cf;
}

.builder-kicker {
    display: block;

    margin-bottom: 11px;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 2px;

    color: #8c8c89;
}

.builder-header h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(34px,4vw,48px);
    line-height: .98;

    font-weight: 800;

    letter-spacing: -2px;

    color: #111111;
}

.builder-header h2 span {
    display: block;

    margin-top: 5px;

    font-weight: 500;

    color: #90908d;
}

.builder-close {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border: 1px solid #c8c8c5;
    border-radius: 50%;

    background: #ffffff;

    font-size: 26px;
    line-height: 1;

    color: #111111;

    transition:
        background .25s ease,
        color .25s ease;
}

.builder-close:hover {
    background: #111111;
    color: #ffffff;
}


/* PROGRESS */

.builder-progress-area {
    padding: 25px 0 5px;
}

.builder-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 13px;
}

.builder-progress-copy span {
    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1.3px;

    color: #999996;
}

.builder-progress-copy strong {
    font-family: "Manrope", sans-serif;

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

    text-transform: uppercase;

    color: #111111;
}

.builder-progress-track {
    height: 3px;

    overflow: hidden;

    background: #ddddda;
}

.builder-progress-track span {
    display: block;

    width: 20%;
    height: 100%;

    background: #111111;

    transition: width .35s ease;
}


/* STEPS */

.builder-step {
    display: none;

    padding: 42px 0 30px;
}

.builder-step.active {
    display: block;

    animation:
        builderFade .35s ease;
}

@keyframes builderFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.builder-step-heading {
    max-width: 600px;

    margin-bottom: 30px;
}

.builder-step-heading > span {
    display: block;

    margin-bottom: 13px;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1.5px;

    color: #8c8c89;
}

.builder-step-heading h3 {
    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;

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

    font-weight: 800;

    letter-spacing: -1.2px;

    color: #111111;
}

.builder-step-heading p {
    max-width: 540px;

    margin: 0;

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

    color: #737370;
}


/* OPTIONS */

.builder-options {
    display: grid;

    gap: 10px;
}

.builder-options-two {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.builder-options-three {
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}

.builder-option {
    position: relative;

    min-height: 90px;

    cursor: pointer;
}

.builder-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.builder-option > span {
    width: 100%;
    height: 100%;

    min-height: 90px;

    padding: 18px;

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

    border: 1px solid #d2d2cf;
    border-radius: 12px;

    background: #ffffff;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.builder-option:hover > span {
    transform: translateY(-2px);

    border-color: #999996;
}

.builder-option input:checked + span {
    background: #111111;
    border-color: #111111;

    color: #ffffff;
}

.builder-option b {
    display: block;

    margin-bottom: 6px;

    font-family: "Manrope", sans-serif;

    font-size: 11px;
    line-height: 1.3;

    font-weight: 800;

    color: #151515;
}

.builder-option input:checked + span b {
    color: #ffffff;
}

.builder-option small {
    display: block;

    font-size: 10px;
    line-height: 1.5;

    color: #888885;
}

.builder-option input:checked + span small {
    color: #a9a9a6;
}

.builder-option-wide {
    grid-column: 1 / -1;
}

.builder-recommend > span {
    border-style: dashed;
}

.builder-option.compact {
    min-height: 64px;
}

.builder-option.compact > span {
    min-height: 64px;

    padding: 15px;

    text-align: center;
}

.builder-option.compact b {
    margin: 0;
}


/* FIELDS */

.builder-fields {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 17px;
}

.builder-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.builder-field-full {
    grid-column: 1 / -1;
}

.builder-field label,
.builder-subheading {
    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1px;
    text-transform: uppercase;

    color: #6f6f6c;
}

.builder-field input,
.builder-field select,
.builder-field textarea {
    width: 100%;

    border: 1px solid #d1d1ce;
    border-radius: 9px;

    outline: none;

    background: #ffffff;

    font-size: 12px;

    color: #111111;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.builder-field input,
.builder-field select {
    height: 52px;

    padding: 0 15px;
}

.builder-field textarea {
    padding: 15px;

    resize: vertical;
}

.builder-field input:focus,
.builder-field select:focus,
.builder-field textarea:focus {
    border-color: #777774;

    box-shadow:
        0 0 0 3px rgba(0,0,0,.04);
}

.builder-subheading {
    margin: 8px 0 14px;
}

.builder-contact-fields {
    margin-top: 30px;
}


/* BUILDER NAV */

.builder-navigation {
    position: sticky;
    bottom: -35px;

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

    gap: 20px;

    margin-top: 15px;

    padding: 22px 0 10px;

    background:
        linear-gradient(
            to bottom,
            rgba(245,245,243,.3),
            #f5f5f3 30%
        );
}

.builder-navigation-right {
    margin-left: auto;
}

.builder-back {
    min-height: 52px;

    padding: 0 18px;

    border: 0;

    background: transparent;

    font-family: "Manrope", sans-serif;

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

    text-transform: uppercase;

    color: #555552;
}

.builder-next,
.builder-submit {
    min-width: 180px;
    min-height: 54px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    border: 1px solid #111111;
    border-radius: 50px;

    background: #111111;

    font-family: "Manrope", sans-serif;

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

    text-transform: uppercase;

    color: #ffffff;
}

.builder-submit {
    display: none;

    min-width: 220px;
}


/* =========================================================
   FOOTER
========================================================= */

body.industries-page .ind-footer {
    padding: 75px 0 28px;

    background: #070707;

    color: #ffffff;
}

body.industries-page .ind-footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        .7fr
        .8fr
        1fr;

    gap: 65px;

    padding-bottom: 55px;
}

body.industries-page .ind-footer-brand p {
    max-width: 360px;

    margin: 25px 0 0;

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

    color: #777777;
}

body.industries-page .ind-footer-column h4 {
    margin: 0 0 22px;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1.7px;

    color: #606060;
}

body.industries-page .ind-footer-column a,
body.industries-page .ind-footer-column p {
    display: block;

    margin: 0 0 12px;

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

    color: #9b9b9b;

    transition: color .2s ease;
}

body.industries-page
.ind-footer-column a:hover {
    color: #ffffff;
}

body.industries-page .ind-footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 30px;

    padding-top: 25px;

    border-top: 1px solid #242424;
}

body.industries-page .ind-footer-bottom p {
    margin: 0;

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

    letter-spacing: .6px;

    color: #555555;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1180px) {

    body.industries-page .ind-nav {
        gap: 19px;
    }

    body.industries-page .ind-quote {
        display: none;
    }

    body.industries-page .ind-priority-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media (max-width: 1050px) {

    body.industries-page .env-card {
        flex:
            0 0
            calc((100% - 24px) / 2);
    }

    body.industries-page .env-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    body.industries-page
    .env-heading-right > p {
        max-width: 650px;
    }

}


@media (max-width: 950px) {

    body.industries-page .ind-container,
    body.industries-page .ind-header-inner {
        width:
            min(100% - 40px,1380px);
    }

    body.industries-page .ind-header-inner {
        padding: 20px 0;

        flex-wrap: wrap;
    }

    body.industries-page .ind-nav {
        width: 100%;

        order: 3;

        overflow-x: auto;
    }

    body.industries-page .ind-nav a {
        flex: 0 0 auto;
    }

    body.industries-page .ind-hero-grid,
    body.industries-page .ind-intro-grid,
    body.industries-page .ind-priorities-heading {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    body.industries-page .ind-cta-box {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    body.industries-page .ind-cta-button {
        width: 280px;
    }

    body.industries-page .ind-footer-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    body.industries-page .env-card {
        flex: 0 0 100%;
    }

    body.industries-page .env-card-image {
        height: 245px;
    }

    body.industries-page .env-heading h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }

    .builder-panel {
        padding:
            30px 22px
            25px;
    }

    .builder-options-two,
    .builder-options-three,
    .builder-fields {
        grid-template-columns: 1fr;
    }

    .builder-field-full,
    .builder-option-wide {
        grid-column: auto;
    }

    .builder-header h2 {
        font-size: 34px;
    }

    .builder-step-heading h3 {
        font-size: 26px;
    }

}


@media (max-width: 650px) {

    body.industries-page .ind-container,
    body.industries-page .ind-header-inner {
        width: calc(100% - 30px);
    }

    body.industries-page .ind-brand-logo {
        width: 58px;
        height: 66px;
    }

    body.industries-page
    .ind-brand-copy strong {
        font-size: 27px;
    }

    body.industries-page
    .ind-brand-copy span {
        font-size: 8px;

        letter-spacing: 2px;
    }

    body.industries-page .ind-nav {
        gap: 20px;
    }

    body.industries-page .ind-nav a {
        font-size: 12px;
    }

    body.industries-page .ind-hero {
        min-height: auto;

        padding: 75px 0;
    }

    body.industries-page .ind-hero h1 {
        font-size: 45px;

        letter-spacing: -2.5px;
    }

    body.industries-page .ind-intro {
        padding: 70px 0;
    }

    body.industries-page .env-section {
        padding: 70px 0 75px;
    }

    body.industries-page .env-heading {
        margin-bottom: 35px;
    }

    body.industries-page .env-card-body {
        padding: 27px 22px 25px;
    }

    body.industries-page .env-requirements {
        grid-template-columns: 1fr 1fr;
    }

    body.industries-page .ind-priorities {
        padding: 75px 0;
    }

    body.industries-page
    .ind-priorities h2 {
        font-size: 39px;
    }

    body.industries-page
    .ind-priority-grid {
        grid-template-columns: 1fr;
    }

    body.industries-page
    .ind-priority-card {
        min-height: 235px;
    }

    body.industries-page
    .ind-priority-number {
        margin-bottom: 45px;
    }

    body.industries-page .ind-cta {
        padding: 60px 0;
    }

    body.industries-page .ind-cta-box {
        padding: 38px 27px;
    }

    body.industries-page .ind-cta-button {
        width: 100%;
        min-width: 0;
    }

    body.industries-page .ind-footer-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    body.industries-page
    .ind-footer-bottom {
        flex-direction: column;

        gap: 10px;
    }

    .builder-navigation {
        align-items: stretch;
    }

    .builder-next,
    .builder-submit {
        min-width: 155px;
    }

}
/* =========================================================
   JSB INDUSTRIES V2
   ENVIRONMENT CARDS + DYNAMIC SECURITY PLAN
========================================================= */


/* =========================================================
   ENVIRONMENT SECTION
========================================================= */

body.industries-page .env-section {
    padding: 105px 0 115px;
    overflow: hidden;
    background: #f5f5f3;
}

body.industries-page .env-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .7fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 52px;
}

body.industries-page .env-heading h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(44px, 4.7vw, 68px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -3px;
    color: #111;
}

body.industries-page .env-heading h2 span {
    display: block;
    margin-top: 5px;
    font-weight: 500;
    color: #969694;
}

body.industries-page .env-heading-right p {
    max-width: 500px;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #666;
}

body.industries-page .env-heading-controls {
    display: flex;
    gap: 9px;
    margin-top: 25px;
}

body.industries-page .env-arrow {
    width: 50px;
    height: 50px;

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

    border: 1px solid #c9c9c6;
    border-radius: 50%;

    background: transparent;
    color: #111;

    font-size: 18px;

    transition: .25s ease;
}

body.industries-page .env-arrow:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}


/* =========================================================
   CAROUSEL
========================================================= */

body.industries-page .env-viewport {
    overflow: hidden;
}

body.industries-page .env-track {
    display: flex;
    gap: 24px;

    transition:
        transform .65s cubic-bezier(.22,.61,.36,1);
}


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

body.industries-page .env-card {
    flex: 0 0 calc((100% - 48px) / 3);

    border: 1px solid #d2d2cf;
    border-radius: 28px;

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 12px 35px rgba(0,0,0,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        border-color .35s ease;
}

body.industries-page .env-card:hover {
    transform: translateY(-7px);

    background: #171717;
    border-color: #171717;

    box-shadow:
        0 25px 55px rgba(0,0,0,.15);
}


/* =========================================================
   IMAGE
========================================================= */

body.industries-page .env-card-image {
    position: relative;

    height: 265px;

    margin: 28px 28px 0;

    overflow: hidden;

    background: #111;
}

body.industries-page .env-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter: none !important;

    transition: transform .6s ease;
}

body.industries-page .env-card:hover .env-card-image img {
    transform: scale(1.055);
}

body.industries-page .env-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.25),
            transparent 45%,
            rgba(0,0,0,.28)
        );
}

body.industries-page .env-number,
body.industries-page .env-type {
    position: absolute;
    top: 20px;

    min-height: 40px;

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

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 30px;

    background: rgba(12,12,12,.70);

    backdrop-filter: blur(8px);

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #fff;
}

body.industries-page .env-number {
    left: 20px;
    min-width: 55px;
}

body.industries-page .env-type {
    right: 20px;
    padding: 0 20px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

body.industries-page .env-card-body {
    padding: 33px 36px 36px;
}

body.industries-page .env-small-title {
    display: block;

    margin-bottom: 13px;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #999;
}

body.industries-page .env-card h3 {
    min-height: 64px;

    margin: 0 0 18px;

    font-family: "Manrope", sans-serif;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.3px;

    color: #111;

    transition: color .3s ease;
}

body.industries-page .env-card-body > p {
    min-height: 70px;

    margin: 0 0 25px;

    font-size: 12.5px;
    line-height: 1.75;

    color: #666;

    transition: color .3s ease;
}


/* HOVER TEXT FIX */

body.industries-page .env-card:hover h3 {
    color: #fff;
}

body.industries-page .env-card:hover .env-card-body > p {
    color: #aaa;
}

body.industries-page .env-card:hover .env-small-title {
    color: #777;
}


/* =========================================================
   REQUIREMENT CHIPS
========================================================= */

body.industries-page .env-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 9px;

    margin-bottom: 25px;
}

body.industries-page .env-requirements span {
    min-height: 48px;

    padding: 0 14px;

    display: flex;
    align-items: center;

    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fafafa;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;

    color: #555;

    transition: .3s ease;
}

body.industries-page .env-card:hover .env-requirements span {
    background: #f7f7f5;
    border-color: #ddd;
    color: #333;
}


/* =========================================================
   CARD ACTIONS
========================================================= */

body.industries-page .env-card-actions {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 9px;
}

body.industries-page .env-view-button {
    min-height: 54px;

    padding: 0 14px;

    border: 1px solid #ccc;
    border-radius: 50px;

    background: transparent;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;

    color: #333;

    transition: .25s ease;
}

body.industries-page .env-view-button:hover {
    background: #ededeb;
}

body.industries-page .env-card:hover .env-view-button {
    border-color: #555;
    color: #ddd;
}

body.industries-page .env-card:hover .env-view-button:hover {
    background: #292929;
    color: #fff;
}


body.industries-page .env-plan-button {
    min-height: 54px;

    padding: 0 8px 0 17px;

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

    gap: 10px;

    border: 1px solid #111;
    border-radius: 50px;

    background: #111;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;

    color: #fff;
}

body.industries-page .env-plan-button b {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 50%;

    background: #fff;
    color: #111;

    font-size: 17px;

    transition: transform .25s ease;
}

body.industries-page .env-plan-button:hover b {
    transform: translateX(3px);
}

body.industries-page .env-card:hover .env-plan-button {
    background: #080808;
    border-color: #080808;
}


/* =========================================================
   EXPANDED REQUIREMENTS
========================================================= */

body.industries-page .env-requirement-details {
    max-height: 0;

    margin-top: 0;

    padding: 0 18px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 14px;

    opacity: 0;

    transition:
        max-height .4s ease,
        opacity .3s ease,
        margin .3s ease,
        padding .3s ease;
}

body.industries-page .env-requirement-details.open {
    max-height: 220px;

    margin-top: 18px;

    padding: 18px;

    border-color: #ddd;

    opacity: 1;
}

body.industries-page .env-requirement-details strong {
    display: block;

    margin-bottom: 8px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;

    color: #222;
}

body.industries-page .env-requirement-details p {
    margin: 0;

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

    color: #777;
}

body.industries-page .env-card:hover .env-requirement-details.open {
    border-color: #3b3b3b;
    background: #1d1d1d;
}

body.industries-page .env-card:hover .env-requirement-details strong {
    color: #fff;
}

body.industries-page .env-card:hover .env-requirement-details p {
    color: #aaa;
}


/* =========================================================
   CAROUSEL PROGRESS
========================================================= */

body.industries-page .env-carousel-footer {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 35px;
}

body.industries-page .env-progress {
    flex: 1;

    height: 2px;

    overflow: hidden;

    background: #d5d5d2;
}

body.industries-page .env-progress span {
    display: block;

    width: 25%;
    height: 100%;

    background: #111;

    transition: width .4s ease;
}

body.industries-page .env-counter {
    min-width: 68px;

    font-family: "Manrope", sans-serif;
}

body.industries-page .env-counter strong {
    font-size: 16px;
    color: #111;
}

body.industries-page .env-counter span {
    margin-left: 4px;

    font-size: 9px;
    color: #999;
}


/* =========================================================
   BUILDER OVERLAY
========================================================= */

body.builder-open {
    overflow: hidden;
}

.security-builder {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    visibility: hidden;
    pointer-events: none;
}

.security-builder.open {
    visibility: visible;
    pointer-events: auto;
}

.builder-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.72);

    backdrop-filter: blur(5px);

    opacity: 0;

    transition: opacity .35s ease;
}

.security-builder.open .builder-backdrop {
    opacity: 1;
}


/* =========================================================
   BUILDER PANEL
========================================================= */

.builder-panel {
    position: relative;
    z-index: 2;

    width: min(820px, 100%);
    height: 100%;

    padding: 45px 52px 40px;

    overflow-y: auto;

    background: #f5f5f3;

    box-shadow:
        -20px 0 70px rgba(0,0,0,.25);

    transform: translateX(100%);

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1);
}

.security-builder.open .builder-panel {
    transform: translateX(0);
}


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

.builder-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 30px;

    padding-bottom: 28px;

    border-bottom: 1px solid #d2d2cf;
}

.builder-kicker {
    display: block;

    margin-bottom: 10px;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #888;
}

.builder-header h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 45px;
    line-height: .98;
    font-weight: 800;
    letter-spacing: -2px;

    color: #111;
}

.builder-header h2 span {
    display: block;

    margin-top: 5px;

    font-weight: 500;

    color: #92928f;
}

.builder-close {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border: 1px solid #ccc;
    border-radius: 50%;

    background: #fff;

    font-size: 26px;

    color: #111;

    transition: .25s ease;
}

.builder-close:hover {
    background: #111;
    color: #fff;
}


/* =========================================================
   SELECTED ENVIRONMENT BAR
========================================================= */

.builder-environment-bar {
    margin: 28px 0 0;

    padding: 18px 20px;

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

    gap: 20px;

    background: #111;

    border-radius: 12px;

    color: #fff;
}

.builder-environment-bar span {
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #777;
}

.builder-environment-bar strong {
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;

    text-align: right;

    color: #fff;
}


/* =========================================================
   DYNAMIC FORM INTRO
========================================================= */

.dynamic-form-intro {
    padding: 38px 0 32px;
}

.dynamic-form-intro > span {
    display: block;

    margin-bottom: 10px;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #999;
}

.dynamic-form-intro h3 {
    margin: 0 0 12px;

    font-family: "Manrope", sans-serif;
    font-size: 31px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1.2px;

    color: #111;
}

.dynamic-form-intro p {
    max-width: 600px;

    margin: 0;

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

    color: #777;
}


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

.dynamic-form-section {
    margin-bottom: 22px;

    padding: 27px;

    border: 1px solid #d5d5d2;
    border-radius: 18px;

    background: #fff;
}

.dynamic-section-title {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom: 1px solid #e4e4e1;
}

.dynamic-section-title > span {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 50%;

    background: #111;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;

    color: #fff;
}

.dynamic-section-title strong {
    display: block;

    margin-bottom: 3px;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;

    color: #111;
}

.dynamic-section-title small {
    display: block;

    font-size: 10px;
    color: #888;
}


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

.dynamic-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 18px;
}

.dynamic-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.dynamic-field-full {
    grid-column: 1 / -1;
}

.dynamic-field > label,
.dynamic-field-label {
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;

    color: #666;
}

.dynamic-field input,
.dynamic-field select,
.dynamic-field textarea {
    width: 100%;

    outline: none;

    border: 1px solid #d4d4d1;
    border-radius: 9px;

    background: #fafafa;

    color: #111;

    font-size: 12px;

    transition: .2s ease;
}

.dynamic-field input,
.dynamic-field select {
    height: 52px;

    padding: 0 14px;
}

.dynamic-field textarea {
    padding: 14px;

    resize: vertical;
}

.dynamic-field input:focus,
.dynamic-field select:focus,
.dynamic-field textarea:focus {
    border-color: #777;
    background: #fff;

    box-shadow:
        0 0 0 3px rgba(0,0,0,.04);
}


/* =========================================================
   CHECKBOX OPTIONS
========================================================= */

.dynamic-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 9px;
}

.dynamic-choice {
    position: relative;

    cursor: pointer;
}

.dynamic-choice input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.dynamic-choice > span {
    min-height: 52px;

    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid #d6d6d3;
    border-radius: 9px;

    background: #fafafa;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 700;

    color: #555;

    transition: .2s ease;
}

.dynamic-choice i {
    position: relative;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border: 1px solid #bbb;
    border-radius: 50%;

    background: #fff;
}

.dynamic-choice input:checked + span {
    border-color: #111;

    background: #111;

    color: #fff;
}

.dynamic-choice input:checked + span i {
    border-color: #fff;
    background: #fff;
}

.dynamic-choice input:checked + span i::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 3px;

    left: 6px;
    top: 6px;

    border-left: 2px solid #111;
    border-bottom: 2px solid #111;

    transform: rotate(-45deg);
}


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

.builder-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding: 15px 0 5px;
}

.builder-cancel,
.builder-edit-button {
    min-height: 54px;

    padding: 0 22px;

    border: 1px solid #ccc;
    border-radius: 50px;

    background: transparent;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;

    color: #555;
}

.builder-review-button,
.builder-submit-button {
    min-height: 56px;

    padding: 0 12px 0 23px;

    display: flex;
    align-items: center;

    gap: 30px;

    border: 1px solid #111;
    border-radius: 50px;

    background: #111;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;

    color: #fff;
}

.builder-review-button span,
.builder-submit-button span {
    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    background: #fff;

    color: #111;
}


/* =========================================================
   REVIEW SCREEN
========================================================= */

.builder-review {
    display: none;

    padding-top: 38px;
}

.builder-review.active {
    display: block;

    animation: builderReviewIn .35s ease;
}

@keyframes builderReviewIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.builder-review-heading {
    margin-bottom: 28px;
}

.builder-review-heading > span {
    display: block;

    margin-bottom: 10px;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #999;
}

.builder-review-heading h3 {
    margin: 0 0 12px;

    font-family: "Manrope", sans-serif;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.5px;

    color: #111;
}

.builder-review-heading h3 em {
    display: block;

    font-style: normal;
    font-weight: 500;

    color: #92928f;
}

.builder-review-heading p {
    max-width: 570px;

    margin: 0;

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

    color: #777;
}


/* REVIEW SUMMARY */

.builder-review-summary {
    overflow: hidden;

    border: 1px solid #d5d5d2;
    border-radius: 18px;

    background: #fff;
}

.review-environment {
    padding: 23px;

    background: #111;

    color: #fff;
}

.review-environment span {
    display: block;

    margin-bottom: 6px;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #777;
}

.review-environment strong {
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 800;

    color: #fff;
}

.review-row {
    display: grid;
    grid-template-columns: 200px 1fr;

    gap: 25px;

    padding: 18px 22px;

    border-bottom: 1px solid #e6e6e3;
}

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

.review-row span {
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;

    color: #888;
}

.review-row strong {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 700;

    color: #222;
}


/* =========================================================
   REVIEW BUTTONS
========================================================= */

.builder-review-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-top: 25px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    body.industries-page .env-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }

    body.industries-page .env-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    body.industries-page .env-card {
        flex: 0 0 100%;
    }

    body.industries-page .env-card-image {
        height: 235px;

        margin: 18px 18px 0;
    }

    body.industries-page .env-card-body {
        padding: 27px 22px;
    }

    body.industries-page .env-card-actions {
        grid-template-columns: 1fr;
    }

    body.industries-page .env-view-button,
    body.industries-page .env-plan-button {
        width: 100%;
    }


    /* BUILDER */

    .builder-panel {
        padding: 28px 20px;
    }

    .builder-header h2 {
        font-size: 34px;
    }

    .builder-environment-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .builder-environment-bar strong {
        text-align: left;
    }

    .dynamic-form-section {
        padding: 20px 16px;
    }

    .dynamic-fields {
        grid-template-columns: 1fr;
    }

    .dynamic-field-full {
        grid-column: auto;
    }

    .dynamic-choice-grid {
        grid-template-columns: 1fr;
    }

    .builder-form-actions,
    .builder-review-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .builder-cancel,
    .builder-edit-button,
    .builder-review-button,
    .builder-submit-button {
        width: 100%;
    }

    .builder-review-button,
    .builder-submit-button {
        justify-content: space-between;
    }

    .review-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

}
/* =========================================================
   JSB INDUSTRIES FINAL PATCH
   ENV BACKGROUND + CAROUSEL + ENVIRONMENT BUILDER
========================================================= */


/* =========================================================
   ENVIRONMENT BACKGROUND SECTION
========================================================= */

body.industries-page .env-section {
    position: relative;
    isolation: isolate;

    padding: 110px 0 115px;

    overflow: hidden;

    background-image: url("../../env img.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll;
}


/* soft professional overlay over supplied image */

body.industries-page .env-section::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(7, 10, 14, .52) 0%,
            rgba(7, 10, 14, .38) 42%,
            rgba(7, 10, 14, .56) 100%
        );
}


body.industries-page .env-section::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 10, .32) 0%,
            rgba(5, 7, 10, .10) 50%,
            rgba(5, 7, 10, .24) 100%
        );
}


body.industries-page .env-section-overlay {
    display: none;
}


body.industries-page .env-section-content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ENV HEADING
========================================================= */

body.industries-page .env-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .7fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 52px;
}


body.industries-page .env-light-eyebrow,
body.industries-page .env-heading .ind-eyebrow {
    color: rgba(255,255,255,.72) !important;
}


body.industries-page .env-heading h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(44px, 4.7vw, 68px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -3px;

    color: #ffffff;
}


body.industries-page .env-heading h2 span {
    display: block;

    margin-top: 5px;

    font-weight: 500;

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


body.industries-page .env-heading-right p {
    max-width: 500px;

    margin: 0;

    font-size: 13px;

    line-height: 1.8;

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


body.industries-page .env-heading-controls {
    display: flex;

    gap: 9px;

    margin-top: 25px;
}


body.industries-page .env-arrow {
    width: 50px;
    height: 50px;

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

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

    border-radius: 50%;

    background:
        rgba(10,10,10,.25);

    backdrop-filter: blur(10px);

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


body.industries-page .env-arrow:hover {
    background: #fff;

    border-color: #fff;

    color: #111;

    transform: translateY(-2px);
}


/* =========================================================
   CAROUSEL
========================================================= */

body.industries-page .env-carousel {
    position: relative;
}


body.industries-page .env-viewport {
    overflow: hidden;

    padding:
        8px
        2px
        22px;
}


body.industries-page .env-track {
    display: flex;

    gap: 24px;

    align-items: stretch;

    transition:
        transform
        .75s
        cubic-bezier(.22,.61,.36,1);

    will-change: transform;
}


/* =========================================================
   ENVIRONMENT CARD
========================================================= */

body.industries-page .env-card {
    flex:
        0 0
        calc((100% - 48px) / 3);

    display: flex;
    flex-direction: column;

    overflow: hidden;

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

    border-radius: 28px;

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

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.18);

    backdrop-filter: blur(10px);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


body.industries-page .env-card:hover {
    transform: translateY(-7px);

    background: #171717;

    border-color: #171717;

    box-shadow:
        0 30px 65px
        rgba(0,0,0,.28);
}


/* =========================================================
   CARD IMAGE
========================================================= */

body.industries-page .env-card-image {
    position: relative;

    height: 265px;

    margin:
        28px
        28px
        0;

    overflow: hidden;

    background: #111;
}


body.industries-page .env-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter: none !important;

    transition:
        transform .65s ease;
}


body.industries-page
.env-card:hover
.env-card-image img {
    transform: scale(1.055);
}


body.industries-page .env-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.28),
            transparent 45%,
            rgba(0,0,0,.26)
        );
}


/* =========================================================
   IMAGE BADGES
========================================================= */

body.industries-page
.env-number,

body.industries-page
.env-type {

    position: absolute;

    top: 20px;

    min-height: 40px;

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

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

    border-radius: 30px;

    background:
        rgba(12,12,12,.72);

    backdrop-filter: blur(8px);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #fff;
}


body.industries-page .env-number {
    left: 20px;

    min-width: 55px;
}


body.industries-page .env-type {
    right: 20px;

    padding: 0 20px;
}


/* =========================================================
   CARD BODY
========================================================= */

body.industries-page .env-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding:
        33px
        36px
        36px;
}


body.industries-page .env-small-title {
    display: block;

    margin-bottom: 13px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    line-height: 1.5;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #999;
}


body.industries-page .env-card h3 {
    min-height: 64px;

    margin:
        0
        0
        18px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 28px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.3px;

    color: #111;

    transition:
        color .3s ease;
}


body.industries-page
.env-card-body > p {

    min-height: 70px;

    margin:
        0
        0
        25px;

    font-size: 12.5px;

    line-height: 1.75;

    color: #666;

    transition:
        color .3s ease;
}


body.industries-page
.env-card:hover h3 {
    color: #fff;
}


body.industries-page
.env-card:hover
.env-card-body > p {
    color: #aaa;
}


body.industries-page
.env-card:hover
.env-small-title {
    color: #777;
}


/* =========================================================
   REQUIREMENT CHIPS
========================================================= */

body.industries-page .env-requirements {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 9px;

    margin-bottom: 25px;
}


body.industries-page
.env-requirements span {

    position: relative;

    min-height: 48px;

    padding:
        0
        12px
        0
        38px;

    display: flex;
    align-items: center;

    border:
        1px solid #ddd;

    border-radius: 10px;

    background: #fafafa;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    line-height: 1.3;

    text-transform: uppercase;

    color: #555;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


body.industries-page
.env-requirements span::before {

    content: "✓";

    position: absolute;

    left: 11px;

    width: 18px;
    height: 18px;

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

    border-radius: 50%;

    background: #ededeb;

    font-size: 9px;

    color: #444;
}


body.industries-page
.env-card:hover
.env-requirements span {

    background: #f7f7f5;

    border-color: #ddd;

    color: #333;
}


/* =========================================================
   CARD BUTTONS
========================================================= */

body.industries-page .env-card-actions {
    display: grid;

    grid-template-columns:
        .82fr
        1.18fr;

    gap: 9px;

    margin-top: auto;
}


body.industries-page
.env-view-button {

    min-height: 54px;

    padding: 0 14px;

    border:
        1px solid #ccc;

    border-radius: 50px;

    background: transparent;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;

    color: #333;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


body.industries-page
.env-view-button:hover {

    background: #ededeb;
}


body.industries-page
.env-card:hover
.env-view-button {

    border-color: #555;

    color: #ddd;
}


body.industries-page
.env-card:hover
.env-view-button:hover {

    background: #292929;

    color: #fff;
}


body.industries-page
.env-plan-button {

    min-height: 54px;

    padding:
        0
        8px
        0
        17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    border:
        1px solid #111;

    border-radius: 50px;

    background: #111;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;

    color: #fff;

    cursor: pointer;
}


body.industries-page
.env-plan-button b {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: #111;

    font-size: 17px;

    transition:
        transform .25s ease;
}


body.industries-page
.env-plan-button:hover b {

    transform:
        translateX(3px);
}


body.industries-page
.env-card:hover
.env-plan-button {

    background: #080808;

    border-color: #080808;
}


/* =========================================================
   EXPANDED REQUIREMENTS
========================================================= */

body.industries-page
.env-requirement-details {

    max-height: 0;

    margin-top: 0;

    padding:
        0
        18px;

    overflow: hidden;

    border:
        1px solid transparent;

    border-radius: 14px;

    opacity: 0;

    transition:
        max-height .4s ease,
        opacity .3s ease,
        margin .3s ease,
        padding .3s ease;
}


body.industries-page
.env-requirement-details.open {

    max-height: 220px;

    margin-top: 18px;

    padding: 18px;

    border-color: #ddd;

    opacity: 1;
}


body.industries-page
.env-requirement-details strong {

    display: block;

    margin-bottom: 8px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    color: #222;
}


body.industries-page
.env-requirement-details p {

    margin: 0;

    font-size: 11px;

    line-height: 1.7;

    color: #777;
}


body.industries-page
.env-card:hover
.env-requirement-details.open {

    border-color: #3b3b3b;

    background: #1d1d1d;
}


body.industries-page
.env-card:hover
.env-requirement-details strong {

    color: #fff;
}


body.industries-page
.env-card:hover
.env-requirement-details p {

    color: #aaa;
}


/* =========================================================
   CAROUSEL FOOTER
========================================================= */

body.industries-page
.env-carousel-footer {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 28px;
}


body.industries-page
.env-progress {

    flex: 1;

    height: 2px;

    overflow: hidden;

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


body.industries-page
.env-progress span {

    display: block;

    width: 25%;

    height: 100%;

    background: #fff;

    transition:
        width .45s ease;
}


body.industries-page
.env-counter {

    min-width: 68px;

    font-family:
        "Manrope",
        sans-serif;

    color: #fff;
}


body.industries-page
.env-counter strong {

    font-size: 16px;

    color: #fff;
}


body.industries-page
.env-counter span {

    margin-left: 4px;

    font-size: 9px;

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


/* =========================================================
   CTA BUTTON FIX
========================================================= */

body.industries-page
.ind-cta-button {

    border: 0;

    cursor: pointer;

    font-family:
        "Manrope",
        sans-serif;
}


/* =========================================================
   BUILDER
========================================================= */

body.builder-open {
    overflow: hidden;
}


.security-builder {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    justify-content: flex-end;

    visibility: hidden;

    pointer-events: none;
}


.security-builder.open {

    visibility: visible;

    pointer-events: auto;
}


.builder-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.72);

    backdrop-filter:
        blur(5px);

    opacity: 0;

    transition:
        opacity .35s ease;
}


.security-builder.open
.builder-backdrop {

    opacity: 1;
}


/* =========================================================
   BUILDER PANEL
========================================================= */

.builder-panel {

    position: relative;

    z-index: 2;

    width:
        min(850px, 100%);

    height: 100%;

    padding:
        45px
        52px
        42px;

    overflow-y: auto;

    background: #f5f5f3;

    box-shadow:
        -20px 0 70px
        rgba(0,0,0,.28);

    transform:
        translateX(100%);

    transition:
        transform
        .45s
        cubic-bezier(.22,.61,.36,1);
}


.security-builder.open
.builder-panel {

    transform:
        translateX(0);
}


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

.builder-header {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 30px;

    padding-bottom: 28px;

    border-bottom:
        1px solid #d2d2cf;
}


.builder-kicker {

    display: block;

    margin-bottom: 10px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #888;
}


.builder-header h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 45px;

    line-height: .98;

    font-weight: 800;

    letter-spacing: -2px;

    color: #111;
}


.builder-header h2 span {

    display: block;

    margin-top: 5px;

    font-weight: 500;

    color: #92928f;
}


.builder-close {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border:
        1px solid #ccc;

    border-radius: 50%;

    background: #fff;

    color: #111;

    font-size: 26px;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease;
}


.builder-close:hover {

    background: #111;

    color: #fff;
}


/* =========================================================
   ENVIRONMENT SELECTION
========================================================= */

.builder-environment-selection {

    padding-top: 42px;
}


.builder-selection-heading {

    margin-bottom: 30px;
}


.builder-selection-heading > span {

    display: block;

    margin-bottom: 11px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.6px;

    color: #8d8d8a;
}


.builder-selection-heading h3 {

    max-width: 620px;

    margin:
        0
        0
        15px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 36px;

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: #111;
}


.builder-selection-heading h3 em {

    display: block;

    font-style: normal;

    font-weight: 500;

    color: #949491;
}


.builder-selection-heading p {

    max-width: 610px;

    margin: 0;

    font-size: 12px;

    line-height: 1.75;

    color: #777;
}


/* =========================================================
   SIX ENVIRONMENT OPTIONS
========================================================= */

.builder-environment-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 12px;
}


.builder-environment-option {

    min-height: 115px;

    padding:
        20px
        18px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    gap: 15px;

    align-items: center;

    text-align: left;

    border:
        1px solid #d5d5d2;

    border-radius: 16px;

    background: #fff;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.builder-environment-option:hover {

    transform:
        translateY(-3px);

    border-color: #111;

    background: #111;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.10);
}


.builder-option-number {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f0f0ee;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    color: #333;
}


.builder-environment-option strong {

    display: block;

    margin-bottom: 5px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    color: #111;

    transition:
        color .25s ease;
}


.builder-environment-option small {

    display: block;

    font-size: 9px;

    line-height: 1.5;

    color: #888;

    transition:
        color .25s ease;
}


.builder-environment-option b {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 14px;

    transition:
        background .25s ease,
        color .25s ease;
}


.builder-environment-option:hover
strong {

    color: #fff;
}


.builder-environment-option:hover
small {

    color: #aaa;
}


.builder-environment-option:hover
.builder-option-number {

    background: #292929;

    color: #fff;
}


.builder-environment-option:hover b {

    background: #fff;

    color: #111;
}


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

.builder-form-screen {
    display: none;
}


/* =========================================================
   SELECTED ENVIRONMENT BAR
========================================================= */

.builder-environment-bar {

    margin:
        28px
        0
        0;

    padding:
        18px
        20px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    background: #111;

    border-radius: 12px;

    color: #fff;
}


.builder-environment-bar > div > span {

    display: block;

    margin-bottom: 4px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #777;
}


.builder-environment-bar strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size: 13px;

    font-weight: 800;

    color: #fff;
}


#changeEnvironmentButton {

    min-height: 38px;

    padding:
        0
        16px;

    border:
        1px solid #454545;

    border-radius: 50px;

    background: transparent;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 7px;

    font-weight: 800;

    text-transform: uppercase;

    color: #fff;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease;
}


#changeEnvironmentButton:hover {

    background: #fff;

    color: #111;
}


/* =========================================================
   DYNAMIC FORM INTRO
========================================================= */

.dynamic-form-intro {

    padding:
        38px
        0
        32px;
}


.dynamic-form-intro > span {

    display: block;

    margin-bottom: 10px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #999;
}


.dynamic-form-intro h3 {

    margin:
        0
        0
        12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 31px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.2px;

    color: #111;
}


.dynamic-form-intro p {

    max-width: 600px;

    margin: 0;

    font-size: 12px;

    line-height: 1.75;

    color: #777;
}


/* =========================================================
   DYNAMIC FORM SECTION
========================================================= */

.dynamic-form-section {

    margin-bottom: 22px;

    padding: 27px;

    border:
        1px solid #d5d5d2;

    border-radius: 18px;

    background: #fff;
}


.dynamic-section-title {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom:
        1px solid #e4e4e1;
}


.dynamic-section-title > span {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #111;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    color: #fff;
}


.dynamic-section-title strong {

    display: block;

    margin-bottom: 3px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    color: #111;
}


.dynamic-section-title small {

    display: block;

    font-size: 10px;

    color: #888;
}


/* =========================================================
   FIELDS
========================================================= */

.dynamic-fields {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 18px;
}


.dynamic-field {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.dynamic-field-full {

    grid-column:
        1 / -1;
}


.dynamic-field > label,
.dynamic-field-label {

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;

    color: #666;
}


.dynamic-field input,
.dynamic-field select,
.dynamic-field textarea {

    width: 100%;

    outline: none;

    border:
        1px solid #d4d4d1;

    border-radius: 9px;

    background: #fafafa;

    color: #111;

    font-family:
        "Inter",
        sans-serif;

    font-size: 12px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.dynamic-field input,
.dynamic-field select {

    height: 52px;

    padding:
        0
        14px;
}


.dynamic-field textarea {

    padding: 14px;

    resize: vertical;
}


.dynamic-field input:focus,
.dynamic-field select:focus,
.dynamic-field textarea:focus {

    border-color: #777;

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(0,0,0,.04);
}


/* =========================================================
   CHECKBOXES
========================================================= */

.dynamic-choice-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 9px;
}


.dynamic-choice {

    position: relative;

    cursor: pointer;
}


.dynamic-choice input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.dynamic-choice > span {

    min-height: 52px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid #d6d6d3;

    border-radius: 9px;

    background: #fafafa;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    line-height: 1.35;

    font-weight: 700;

    color: #555;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.dynamic-choice i {

    position: relative;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border:
        1px solid #bbb;

    border-radius: 50%;

    background: #fff;
}


.dynamic-choice
input:checked + span {

    border-color: #111;

    background: #111;

    color: #fff;
}


.dynamic-choice
input:checked + span i {

    border-color: #fff;

    background: #fff;
}


.dynamic-choice
input:checked + span i::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 3px;

    left: 6px;
    top: 6px;

    border-left:
        2px solid #111;

    border-bottom:
        2px solid #111;

    transform:
        rotate(-45deg);
}


/* =========================================================
   BUILDER ACTIONS
========================================================= */

.builder-form-actions,
.builder-review-actions {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 15px;

    padding:
        15px
        0
        5px;
}


.builder-cancel,
.builder-edit-button {

    min-height: 54px;

    padding:
        0
        22px;

    border:
        1px solid #ccc;

    border-radius: 50px;

    background: transparent;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    color: #555;

    cursor: pointer;
}


.builder-review-button,
.builder-submit-button {

    min-height: 56px;

    padding:
        0
        12px
        0
        23px;

    display: flex;

    align-items: center;

    gap: 30px;

    border:
        1px solid #111;

    border-radius: 50px;

    background: #111;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    color: #fff;

    cursor: pointer;
}


.builder-review-button span,
.builder-submit-button span {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: #111;
}


/* =========================================================
   REVIEW
========================================================= */

.builder-review {

    display: none;

    padding-top: 38px;
}


.builder-review.active {

    display: block;

    animation:
        builderReviewIn
        .35s ease;
}


@keyframes builderReviewIn {

    from {
        opacity: 0;
        transform:
            translateY(10px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }

}


.builder-review-heading {

    margin-bottom: 28px;
}


.builder-review-heading > span {

    display: block;

    margin-bottom: 10px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #999;
}


.builder-review-heading h3 {

    margin:
        0
        0
        12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 34px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: #111;
}


.builder-review-heading h3 em {

    display: block;

    font-style: normal;

    font-weight: 500;

    color: #92928f;
}


.builder-review-heading p {

    max-width: 570px;

    margin: 0;

    font-size: 12px;

    line-height: 1.7;

    color: #777;
}


/* =========================================================
   REVIEW SUMMARY
========================================================= */

.builder-review-summary {

    overflow: hidden;

    border:
        1px solid #d5d5d2;

    border-radius: 18px;

    background: #fff;
}


.review-environment {

    padding: 23px;

    background: #111;

    color: #fff;
}


.review-environment span {

    display: block;

    margin-bottom: 6px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #777;
}


.review-environment strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size: 19px;

    font-weight: 800;

    color: #fff;
}


.review-row {

    display: grid;

    grid-template-columns:
        200px
        1fr;

    gap: 25px;

    padding:
        18px
        22px;

    border-bottom:
        1px solid #e6e6e3;
}


.review-row:last-child {

    border-bottom: 0;
}


.review-row span {

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    line-height: 1.5;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;

    color: #888;
}


.review-row strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size: 11px;

    line-height: 1.6;

    font-weight: 700;

    color: #222;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    body.industries-page
    .env-card {

        flex:
            0 0
            calc((100% - 24px) / 2);
    }


    body.industries-page
    .env-heading {

        grid-template-columns:
            1fr;

        gap: 28px;
    }


    body.industries-page
    .env-heading-right {

        max-width: 600px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    body.industries-page
    .env-section {

        padding:
            80px
            0
            85px;

        background-position:
            center center !important;
    }


    body.industries-page
    .env-heading h2 {

        font-size:
            clamp(39px, 12vw, 52px);

        letter-spacing: -2px;
    }


    body.industries-page
    .env-card {

        flex:
            0 0
            100%;
    }


    body.industries-page
    .env-card-image {

        height: 235px;

        margin:
            18px
            18px
            0;
    }


    body.industries-page
    .env-card-body {

        padding:
            27px
            22px;
    }


    body.industries-page
    .env-card-actions {

        grid-template-columns:
            1fr;
    }


    body.industries-page
    .env-view-button,

    body.industries-page
    .env-plan-button {

        width: 100%;
    }


    /* BUILDER */

    .builder-panel {

        padding:
            28px
            20px;
    }


    .builder-header h2 {

        font-size: 34px;
    }


    .builder-environment-grid {

        grid-template-columns:
            1fr;
    }


    .builder-environment-option {

        min-height: 100px;
    }


    .builder-selection-heading h3 {

        font-size: 31px;
    }


    .builder-environment-bar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    #changeEnvironmentButton {

        margin-top: 8px;
    }


    .dynamic-form-section {

        padding:
            20px
            16px;
    }


    .dynamic-fields {

        grid-template-columns:
            1fr;
    }


    .dynamic-field-full {

        grid-column: auto;
    }


    .dynamic-choice-grid {

        grid-template-columns:
            1fr;
    }


    .builder-form-actions,
    .builder-review-actions {

        flex-direction:
            column-reverse;

        align-items:
            stretch;
    }


    .builder-cancel,
    .builder-edit-button,
    .builder-review-button,
    .builder-submit-button {

        width: 100%;
    }


    .builder-review-button,
    .builder-submit-button {

        justify-content:
            space-between;
    }


    .review-row {

        grid-template-columns:
            1fr;

        gap: 7px;
    }

}
/* =========================================
   INDUSTRY CARD IMAGE — FULL WIDTH
========================================= */

body.industries-page .env-card-image {
    width: 100% !important;
    height: 310px !important;

    margin: 0 !important;

    border-radius: 0 !important;
    overflow: hidden;
}

body.industries-page .env-card-image img {
    width: 100% !important;
    height: 100% !important;

    display: block;
    object-fit: cover !important;
    object-position: center !important;

    margin: 0 !important;
    border-radius: 0 !important;
}

/* Card ke top corners image ke saath rounded rahenge */
body.industries-page .env-card {
    overflow: hidden !important;
}

body.industries-page .env-card-image,
body.industries-page .env-card-image img {
    border-radius: 27px 27px 0 0 !important;
}


/* TABLET */
@media (max-width: 1050px) {
    body.industries-page .env-card-image {
        height: 285px !important;
    }
}


/* MOBILE */
@media (max-width: 720px) {
    body.industries-page .env-card-image {
        width: 100% !important;
        height: 260px !important;
        margin: 0 !important;
    }
}
/* =========================================================
   INDUSTRIES PAGE
   NEW SECURITY PRIORITIES SECTION
========================================================= */

body.industries-page .ind-priorities-visual {
    background: #080808;
    color: #ffffff;

    padding: 105px 0 115px;

    overflow: hidden;
}


/* =========================================================
   TOP HEADING
========================================================= */

body.industries-page
.ind-priorities-visual
.ind-priorities-heading {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, .8fr);

    gap: 70px;

    align-items: end;

    margin-bottom: 54px;
}


body.industries-page
.ind-priorities-visual
.ind-priorities-heading h2 {

    margin: 24px 0 0;

    max-width: 780px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(46px, 5vw, 76px);

    line-height: .98;

    letter-spacing: -0.055em;

    color: #ffffff;
}


body.industries-page
.ind-priorities-visual
.ind-priorities-heading h2 em {

    display: block;

    margin-top: 9px;

    color: #707070;

    font-style: normal;

    font-weight: 500;
}


body.industries-page
.ind-priorities-visual
.ind-priorities-heading > p {

    max-width: 560px;

    margin:
        0
        0
        7px
        auto;

    color: #a4a4a4;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   CONNECTING PROCESS LINE
========================================================= */

body.industries-page .priority-process-line {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-bottom: 18px;
}


body.industries-page
.priority-process-line::before {

    content: "";

    position: absolute;

    top: 19px;

    left: 12.5%;

    right: 12.5%;

    height: 1px;

    background: #565656;
}


body.industries-page
.priority-process-line > span {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;
}


body.industries-page
.priority-process-line b {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        #8d8d8d;

    border-radius: 50%;

    background: #080808;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .08em;
}


body.industries-page
.priority-process-line small {

    color: #a0a0a0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .19em;
}


/* =========================================================
   GRID
========================================================= */

body.industries-page
.priority-visual-grid {

    display: grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        ) !important;

    gap: 14px !important;

    border: 0 !important;
}


/* =========================================================
   CARD
========================================================= */

body.industries-page
.priority-visual-card {

    min-width: 0;

    padding: 0 !important;

    background:
        #0b0b0b !important;

    border:
        1px solid
        #303030 !important;

    border-radius:
        14px !important;

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}


body.industries-page
.priority-visual-card:hover {

    transform:
        translateY(-7px);

    background:
        #111111 !important;

    border-color:
        #555555 !important;
}


/* =========================================================
   CARD IMAGE
========================================================= */

body.industries-page
.priority-photo {

    position: relative;

    height: 235px;

    overflow: hidden;

    background: #111111;
}


body.industries-page
.priority-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02) 38%,
            rgba(0,0,0,.78) 100%
        );

    pointer-events: none;
}


body.industries-page
.priority-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.85)
        contrast(1.04);

    transition:
        transform .55s ease,
        filter .55s ease;
}


body.industries-page
.priority-visual-card:hover
.priority-photo img {

    transform:
        scale(1.045);

    filter:
        saturate(1)
        contrast(1.05);
}


/* BIG NUMBER */

body.industries-page
.priority-photo-number {

    position: absolute;

    z-index: 3;

    left: 26px;

    bottom: 20px;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 38px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -.04em;
}


/* =========================================================
   CARD CONTENT
========================================================= */

body.industries-page
.priority-card-content {

    padding:
        27px
        27px
        30px;
}


/* =========================================================
   HEADING + ICON
   ICON IS ON RIGHT SIDE
========================================================= */

body.industries-page
.priority-title-row {

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 18px;

    margin-bottom: 18px;
}


body.industries-page
.priority-title-row h3 {

    margin: 0 !important;

    max-width: 230px;

    color:
        #ffffff !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        22px !important;

    font-weight: 700;

    line-height:
        1.13 !important;

    letter-spacing:
        -.035em;
}


/* ICON */

body.industries-page
.priority-heading-icon {

    width: 45px;

    height: 45px;

    flex:
        0 0 45px;

    display: grid;

    place-items: center;

    border:
        1px solid
        #4b4b4b;

    border-radius: 50%;

    background:
        #111111;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


body.industries-page
.priority-heading-icon svg {

    width: 21px;

    height: 21px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.55;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ICON HOVER */

body.industries-page
.priority-visual-card:hover
.priority-heading-icon {

    background:
        #ffffff;

    border-color:
        #ffffff;

    transform:
        rotate(4deg);
}


body.industries-page
.priority-visual-card:hover
.priority-heading-icon svg {

    stroke:
        #090909;
}


/* =========================================================
   DESCRIPTION
========================================================= */

body.industries-page
.priority-card-content > p {

    min-height: 92px;

    margin:
        0
        0
        24px !important;

    color:
        #9d9d9d !important;

    font-size:
        14px !important;

    line-height:
        1.72 !important;
}


/* =========================================================
   BOTTOM TAGS
========================================================= */

body.industries-page
.priority-tags {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 8px;
}


body.industries-page
.priority-tags span {

    min-height: 37px;

    display: flex;

    align-items: center;

    padding:
        8px
        12px;

    border:
        1px solid
        #333333;

    border-radius:
        999px;

    color:
        #d1d1d1;

    background:
        #101010;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        11px;

    font-weight: 600;

    transition:
        border-color .3s ease,
        background .3s ease;
}


body.industries-page
.priority-tags span::before {

    content: "";

    width: 5px;

    height: 5px;

    flex:
        0 0 5px;

    margin-right: 8px;

    border-radius: 50%;

    background:
        #777777;
}


body.industries-page
.priority-visual-card:hover
.priority-tags span {

    border-color:
        #494949;

    background:
        #151515;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

    body.industries-page
    .priority-visual-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            18px !important;
    }


    body.industries-page
    .priority-process-line {

        display: none;
    }


    body.industries-page
    .priority-photo {

        height: 270px;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 820px) {

    body.industries-page
    .ind-priorities-visual {

        padding:
            78px
            0
            82px;
    }


    body.industries-page
    .ind-priorities-visual
    .ind-priorities-heading {

        grid-template-columns:
            1fr;

        gap: 28px;

        margin-bottom:
            38px;
    }


    body.industries-page
    .ind-priorities-visual
    .ind-priorities-heading > p {

        margin-left: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    body.industries-page
    .priority-visual-grid {

        grid-template-columns:
            1fr !important;
    }


    body.industries-page
    .priority-photo {

        height: 250px;
    }


    body.industries-page
    .priority-card-content {

        padding:
            24px
            22px
            26px;
    }


    body.industries-page
    .priority-card-content > p {

        min-height: auto;
    }


    body.industries-page
    .priority-title-row h3 {

        font-size:
            21px !important;
    }

}
/* =========================================================
   INDUSTRIES PAGE — COMPACT HERO
   REPLACE PREVIOUS HERO CSS WITH THIS
========================================================= */

body.industries-page .ind-hero.ind-hero-background {
    position: relative;

    /* COMPACT HEIGHT */
    min-height: 610px !important;
    height: auto !important;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    background-image: url("../../bg env.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #050607 !important;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

body.industries-page
.ind-hero.ind-hero-background
.ind-hero-background-overlay {

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 5, 7, 0.95) 0%,
            rgba(2, 5, 7, 0.84) 25%,
            rgba(2, 5, 7, 0.55) 47%,
            rgba(2, 5, 7, 0.18) 70%,
            rgba(2, 5, 7, 0.03) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.04) 55%,
            rgba(0, 0, 0, 0.24) 100%
        );
}


/* =========================================================
   MAIN CONTAINER
   THIS FIXES TEXT TOUCHING LEFT EDGE
========================================================= */

body.industries-page
.ind-hero.ind-hero-background
.ind-container {

    position: relative;
    z-index: 2;

    width: 100% !important;
    max-width: 1500px !important;

    margin: 0 auto !important;

    /* LEFT + RIGHT SPACE */
    padding-left: 60px !important;
    padding-right: 60px !important;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

body.industries-page
.ind-hero-background-content {

    width: 55% !important;
    max-width: 680px !important;

    /* COMPACT VERTICAL SPACE */
    padding: 70px 0 60px !important;
}


/* =========================================================
   EYEBROW
========================================================= */

body.industries-page
.ind-hero-background-content
.ind-eyebrow {

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px !important;

    letter-spacing: 0.22em !important;
}


/* =========================================================
   MAIN HEADING
========================================================= */

body.industries-page
.ind-hero-background-content h1 {

    max-width: 650px !important;

    margin:
        27px
        0
        22px !important;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    /* SMALLER THAN PREVIOUS */
    font-size: clamp(48px, 4.4vw, 72px) !important;

    line-height: 0.98 !important;

    letter-spacing: -0.05em !important;

    font-weight: 800;
}


/* GREY SECOND LINE */

body.industries-page
.ind-hero-background-content h1 em {

    display: block;

    margin-top: 5px;

    color: #969696;

    font-style: normal;

    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
========================================================= */

body.industries-page
.ind-hero-background-copy {

    max-width: 600px !important;

    margin: 0 !important;

    color: rgba(255, 255, 255, 0.70);

    font-family: "Inter", sans-serif;

    /* SMALLER TEXT */
    font-size: 15px !important;

    line-height: 1.65 !important;
}


/* =========================================================
   BOTTOM STATS
========================================================= */

body.industries-page
.ind-hero-background-content
.ind-hero-info {

    display: flex;

    width: 100%;

    max-width: 570px !important;

    /* LESS SPACE */
    margin-top: 28px !important;

    padding-top: 22px !important;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.22);
}


body.industries-page
.ind-hero-background-content
.ind-hero-info-item {

    flex: 1;
    min-width: 0;

    padding-right: 28px;
}


body.industries-page
.ind-hero-background-content
.ind-hero-info-item
+
.ind-hero-info-item {

    padding-left: 28px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.25);
}


/* 06 / ONTARIO */

body.industries-page
.ind-hero-background-content
.ind-hero-info-item strong {

    display: block;

    margin-bottom: 8px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 25px !important;

    line-height: 1;

    font-weight: 700;
}


/* SMALL STAT LABEL */

body.industries-page
.ind-hero-background-content
.ind-hero-info-item span {

    display: block;

    color:
        rgba(255, 255, 255, 0.52);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        9px !important;

    line-height: 1.4;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    font-weight: 600;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    body.industries-page
    .ind-hero.ind-hero-background
    .ind-container {

        max-width: 1600px !important;

        padding-left: 70px !important;
        padding-right: 70px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    body.industries-page
    .ind-hero.ind-hero-background {

        min-height: 590px !important;

        background-position:
            58% center !important;
    }


    body.industries-page
    .ind-hero.ind-hero-background
    .ind-container {

        padding-left:
            38px !important;

        padding-right:
            38px !important;
    }


    body.industries-page
    .ind-hero-background-content {

        width: 72% !important;

        max-width: 620px !important;

        padding:
            65px
            0
            55px !important;
    }


    body.industries-page
    .ind-hero-background-content h1 {

        font-size:
            clamp(
                46px,
                7vw,
                64px
            ) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    body.industries-page
    .ind-hero.ind-hero-background {

        min-height:
            560px !important;

        background-position:
            62% center !important;
    }


    body.industries-page
    .ind-hero.ind-hero-background
    .ind-container {

        padding-left:
            22px !important;

        padding-right:
            22px !important;
    }


    body.industries-page
    .ind-hero.ind-hero-background
    .ind-hero-background-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(2, 5, 7, 0.96) 0%,
                rgba(2, 5, 7, 0.86) 68%,
                rgba(2, 5, 7, 0.55) 100%
            );
    }


    body.industries-page
    .ind-hero-background-content {

        width:
            100% !important;

        max-width:
            100% !important;

        padding:
            55px
            0
            45px !important;
    }


    body.industries-page
    .ind-hero-background-content h1 {

        margin:
            22px
            0
            20px !important;

        font-size:
            clamp(
                42px,
                12vw,
                56px
            ) !important;

        line-height:
            1 !important;
    }


    body.industries-page
    .ind-hero-background-copy {

        max-width:
            95% !important;

        font-size:
            14px !important;

        line-height:
            1.6 !important;
    }


    body.industries-page
    .ind-hero-background-content
    .ind-hero-info {

        margin-top:
            24px !important;

        padding-top:
            20px !important;
    }


    body.industries-page
    .ind-hero-background-content
    .ind-hero-info-item {

        padding-right:
            16px;
    }


    body.industries-page
    .ind-hero-background-content
    .ind-hero-info-item
    +
    .ind-hero-info-item {

        padding-left:
            16px;
    }


    body.industries-page
    .ind-hero-background-content
    .ind-hero-info-item strong {

        font-size:
            22px !important;
    }

}
/* =========================================================
   JSB SECURITY SERVICES
   SERVICE AREAS PAGE
========================================================= */

body.service-area-page {
    margin: 0;
    background: #ffffff;
    color: #151515;
    font-family: "Inter", sans-serif;
}

body.service-area-page *,
body.service-area-page *::before,
body.service-area-page *::after {
    box-sizing: border-box;
}

body.service-area-page .sa-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   EYEBROW
========================================================= */

body.service-area-page .sa-eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

body.service-area-page .sa-eyebrow span {
    width: 40px;
    height: 1px;
    flex: 0 0 40px;
}

body.service-area-page .sa-eyebrow-light {
    color: rgba(255,255,255,.66);
}

body.service-area-page .sa-eyebrow-light span {
    background: rgba(255,255,255,.55);
}

body.service-area-page .sa-eyebrow-dark {
    color: #777;
}

body.service-area-page .sa-eyebrow-dark span {
    background: #151515;
}


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

/* =========================================================
   SERVICE AREA — IMAGE HERO
========================================================= */

body.service-area-page .sa-hero.sa-hero-image {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

   background-image: url("../../map.png") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #080808;
}


/* =========================================================
   REMOVE OLD HERO GRID BACKGROUND EFFECT
========================================================= */

body.service-area-page .sa-hero.sa-hero-image::before {
    display: none;
}


/* =========================================================
   DARK IMAGE OVERLAY
========================================================= */

body.service-area-page .sa-hero-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 4, 4, 0.96) 0%,
            rgba(4, 4, 4, 0.90) 24%,
            rgba(4, 4, 4, 0.70) 45%,
            rgba(4, 4, 4, 0.32) 68%,
            rgba(4, 4, 4, 0.12) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.02) 60%,
            rgba(0, 0, 0, 0.25) 100%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

body.service-area-page
.sa-hero.sa-hero-image
.sa-container {
    position: relative;
    z-index: 2;

    width: min(1380px, calc(100% - 80px));

    margin: 0 auto;
}


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

body.service-area-page .sa-hero-image-content {
    width: 58%;
    max-width: 700px;

    padding: 85px 0 80px;
}


/* =========================================================
   EYEBROW
========================================================= */

body.service-area-page
.sa-hero-image-content
.sa-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}


body.service-area-page
.sa-hero-image-content
.sa-eyebrow span {
    background: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   HEADING
========================================================= */

body.service-area-page
.sa-hero-image-content h1 {
    max-width: 690px;

    margin: 30px 0 25px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: clamp(54px, 5vw, 78px);

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 800;
}


body.service-area-page
.sa-hero-image-content h1 em {
    display: block;

    margin-top: 7px;

    color: #969696;

    font-style: normal;

    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
========================================================= */

body.service-area-page
.sa-hero-image-content
.sa-hero-copy {
    max-width: 620px;

    margin: 0;

    color: rgba(255, 255, 255, 0.70);

    font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   BUTTON AREA
========================================================= */

body.service-area-page
.sa-hero-image-content
.sa-hero-actions {
    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 38px;
}


/* WHITE BUTTON */

body.service-area-page
.sa-hero-image-content
.sa-button-light {
    background: #ffffff;

    color: #0a0a0a;

    border-color: #ffffff;
}


body.service-area-page
.sa-hero-image-content
.sa-button-light:hover {
    background: #d9d9d9;

    border-color: #d9d9d9;
}


/* TEXT LINK */

body.service-area-page
.sa-hero-image-content
.sa-text-link {
    color: rgba(255, 255, 255, 0.72);
}


body.service-area-page
.sa-hero-image-content
.sa-text-link:hover {
    color: #ffffff;
}


/* =========================================================
   HIDE OLD RIGHT-SIDE MAP PANEL
   SAFETY — IN CASE OLD HTML REMAINS
========================================================= */

body.service-area-page .sa-hero-visual,
body.service-area-page .sa-region-panel {
    display: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    body.service-area-page
    .sa-hero.sa-hero-image {

        min-height: 620px;

        background-position: 58% center;
    }


    body.service-area-page
    .sa-hero.sa-hero-image
    .sa-container {

        width: calc(100% - 60px);
    }


    body.service-area-page
    .sa-hero-image-content {

        width: 72%;

        max-width: 650px;

        padding: 75px 0 70px;
    }


    body.service-area-page
    .sa-hero-image-content h1 {

        font-size: clamp(
            48px,
            7vw,
            66px
        );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    body.service-area-page
    .sa-hero.sa-hero-image {

        min-height: 570px;

        background-position: 62% center;
    }


    body.service-area-page
    .sa-hero-image-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(3, 3, 3, 0.96) 0%,
                rgba(3, 3, 3, 0.87) 68%,
                rgba(3, 3, 3, 0.60) 100%
            );
    }


    body.service-area-page
    .sa-hero.sa-hero-image
    .sa-container {

        width: calc(100% - 40px);
    }


    body.service-area-page
    .sa-hero-image-content {

        width: 100%;

        max-width: 100%;

        padding: 60px 0 55px;
    }


    body.service-area-page
    .sa-hero-image-content h1 {

        margin: 24px 0 20px;

        font-size: clamp(
            42px,
            12vw,
            55px
        );

        line-height: 1;
    }


    body.service-area-page
    .sa-hero-image-content
    .sa-hero-copy {

        max-width: 95%;

        font-size: 14px;

        line-height: 1.65;
    }


    body.service-area-page
    .sa-hero-image-content
    .sa-hero-actions {

        margin-top: 30px;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

}
body.service-area-page .sa-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
}

body.service-area-page .sa-hero-decoration {
    position: absolute;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    pointer-events: none;
}

body.service-area-page .sa-hero-decoration-one {
    width: 620px;
    height: 620px;
    right: -200px;
    top: -250px;
}

body.service-area-page .sa-hero-decoration-two {
    width: 420px;
    height: 420px;
    right: 120px;
    bottom: -310px;
}

body.service-area-page .sa-hero-grid {
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 90px;
    padding: 80px 0;
}

body.service-area-page .sa-hero-content {
    max-width: 690px;
}

body.service-area-page .sa-hero h1 {
    margin: 30px 0 26px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 5vw, 78px);
    line-height: .99;
    letter-spacing: -.055em;
    font-weight: 800;
}

body.service-area-page .sa-hero h1 em {
    display: block;
    margin-top: 7px;
    color: #969696;
    font-style: normal;
    font-weight: 500;
}

body.service-area-page .sa-hero-copy {
    max-width: 610px;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.75;
}

body.service-area-page .sa-hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
}


/* =========================================================
   BUTTONS
========================================================= */

body.service-area-page .sa-button {
    min-height: 54px;
    padding: 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    border: 1px solid transparent;
    text-decoration: none;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

body.service-area-page .sa-button span {
    font-size: 17px;
}

body.service-area-page .sa-button:hover {
    transform: translateY(-2px);
}

body.service-area-page .sa-button-light {
    background: #fff;
    color: #0a0a0a;
}

body.service-area-page .sa-button-light:hover {
    background: #d9d9d9;
}

body.service-area-page .sa-button-dark {
    background: #0a0a0a;
    color: #fff;
    border-color: #0a0a0a;
}

body.service-area-page .sa-button-dark:hover {
    background: #292929;
    border-color: #292929;
}

body.service-area-page .sa-text-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: rgba(255,255,255,.74);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: color .25s ease;
}

body.service-area-page .sa-text-link:hover {
    color: #fff;
}


/* =========================================================
   HERO REGION VISUAL
========================================================= */

body.service-area-page .sa-region-panel {
    position: relative;
    max-width: 530px;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 28px;
    background: rgba(255,255,255,.045);
    box-shadow: 0 35px 80px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
}

body.service-area-page .sa-region-panel-top {
    min-height: 67px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.58);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

body.service-area-page .sa-live-dot {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.service-area-page .sa-live-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d8d8d8;
    box-shadow: 0 0 0 5px rgba(255,255,255,.06);
}

body.service-area-page .sa-region-graphic {
    position: relative;
    height: 355px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            transparent 0 49.6%,
            rgba(255,255,255,.06) 49.7% 50%,
            transparent 50.1%
        ),
        linear-gradient(
            45deg,
            transparent 0 49.6%,
            rgba(255,255,255,.035) 49.7% 50%,
            transparent 50.1%
        );
}

body.service-area-page .sa-region-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

body.service-area-page .sa-ring-one {
    width: 150px;
    height: 150px;
}

body.service-area-page .sa-ring-two {
    width: 260px;
    height: 260px;
}

body.service-area-page .sa-ring-three {
    width: 390px;
    height: 390px;
}

body.service-area-page .sa-map-point {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.78);
    font-size: 10px;
    font-weight: 600;
}

body.service-area-page .sa-map-point i {
    width: 9px;
    height: 9px;
    border: 2px solid #111;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(255,255,255,.1),
        0 0 20px rgba(255,255,255,.3);
}

body.service-area-page .sa-point-guelph {
    left: 49%;
    top: 48%;
}

body.service-area-page .sa-point-kitchener {
    left: 28%;
    top: 40%;
}

body.service-area-page .sa-point-waterloo {
    left: 27%;
    top: 26%;
}

body.service-area-page .sa-point-cambridge {
    left: 39%;
    top: 66%;
}

body.service-area-page .sa-point-fergus {
    left: 58%;
    top: 25%;
}

body.service-area-page .sa-point-elora {
    left: 49%;
    top: 17%;
}

body.service-area-page .sa-region-panel-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255,255,255,.1);
}

body.service-area-page .sa-region-panel-bottom > div {
    padding: 23px 25px;
}

body.service-area-page .sa-region-panel-bottom > div + div {
    border-left: 1px solid rgba(255,255,255,.1);
}

body.service-area-page .sa-region-panel-bottom strong {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
}

body.service-area-page .sa-region-panel-bottom span {
    color: rgba(255,255,255,.42);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}


/* =========================================================
   INTRO
========================================================= */

body.service-area-page .sa-intro {
    padding: 115px 0;
    background: #f5f5f3;
}

body.service-area-page .sa-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 120px;
    align-items: start;
}

body.service-area-page .sa-intro-heading h2 {
    max-width: 570px;
    margin: 28px 0 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

body.service-area-page .sa-intro-heading h2 em {
    display: block;
    color: #8b8b8b;
    font-style: normal;
    font-weight: 500;
}

body.service-area-page .sa-intro-copy {
    max-width: 650px;
    padding-top: 35px;
}

body.service-area-page .sa-intro-copy p {
    margin: 0 0 20px;
    color: #6a6a6a;
    font-size: 15px;
    line-height: 1.8;
}

body.service-area-page .sa-intro-copy .sa-intro-lead {
    color: #202020;
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    line-height: 1.65;
    font-weight: 500;
}


/* =========================================================
   SERVICE AREAS
========================================================= */

body.service-area-page .sa-areas {
    padding: 115px 0 120px;
    background: #0a0a0a;
}

body.service-area-page .sa-section-header {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 60px;
}

body.service-area-page .sa-section-header h2 {
    max-width: 650px;
    margin: 27px 0 0;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1.03;
    letter-spacing: -.045em;
}

body.service-area-page .sa-section-header h2 em {
    display: block;
    color: #898989;
    font-style: normal;
    font-weight: 500;
}

body.service-area-page .sa-section-header > p {
    max-width: 520px;
    margin: 0;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.8;
}

body.service-area-page .sa-area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #292929;
    border-left: 1px solid #292929;
}

body.service-area-page .sa-area-card {
    position: relative;
    min-height: 310px;
    padding: 30px 30px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-right: 1px solid #292929;
    border-bottom: 1px solid #292929;
    background: #0e0e0e;
    transition:
        background .35s ease,
        transform .35s ease;
}

body.service-area-page .sa-area-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -100px;
    bottom: -100px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    transition:
        width .4s ease,
        height .4s ease,
        right .4s ease,
        bottom .4s ease;
}

body.service-area-page .sa-area-card:hover {
    background: #181818;
}

body.service-area-page .sa-area-card:hover::after {
    width: 240px;
    height: 240px;
    right: -110px;
    bottom: -110px;
}

body.service-area-page .sa-area-number {
    color: #656565;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
}

body.service-area-page .sa-area-card-content {
    position: relative;
    z-index: 2;
}

body.service-area-page .sa-area-type {
    display: block;
    margin-bottom: 10px;
    color: #666;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}

body.service-area-page .sa-area-card h3 {
    margin: 0 0 12px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 29px;
    letter-spacing: -.03em;
}

body.service-area-page .sa-area-card p {
    max-width: 310px;
    margin: 0;
    color: rgba(255,255,255,.48);
    font-size: 13px;
    line-height: 1.65;
}

body.service-area-page .sa-area-arrow {
    position: absolute;
    right: 28px;
    top: 27px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #303030;
    border-radius: 50%;
    color: #777;
    font-size: 13px;
    transition:
        background .3s ease,
        color .3s ease;
}

body.service-area-page .sa-area-card:hover .sa-area-arrow {
    background: #fff;
    color: #111;
}


/* =========================================================
   EXTENDED COVERAGE
========================================================= */

body.service-area-page .sa-surrounding {
    margin-top: 45px;
    padding-top: 40px;
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 80px;
    border-top: 1px solid #292929;
}

body.service-area-page .sa-surrounding-label {
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(255,255,255,.46);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

body.service-area-page .sa-surrounding-label span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #333;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
}

body.service-area-page .sa-surrounding-items {
    display: grid;
    gap: 0;
}

body.service-area-page .sa-surrounding-item {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    border-bottom: 1px solid #292929;
}

body.service-area-page .sa-surrounding-item:first-child {
    border-top: 1px solid #292929;
}

body.service-area-page .sa-surrounding-item span {
    color: #5d5d5d;
    font-size: 10px;
    font-weight: 700;
}

body.service-area-page .sa-surrounding-item strong {
    color: #d8d8d8;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 500;
}


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

body.service-area-page .sa-approach {
    padding: 120px 0;
    background: #fff;
}

body.service-area-page .sa-approach-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 120px;
}

body.service-area-page .sa-approach-heading {
    position: sticky;
    top: 120px;
    align-self: start;
}

body.service-area-page .sa-approach-heading h2 {
    max-width: 590px;
    margin: 28px 0 25px;
    color: #111;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

body.service-area-page .sa-approach-heading h2 em {
    display: block;
    color: #929292;
    font-style: normal;
    font-weight: 500;
}

body.service-area-page .sa-approach-heading > p {
    max-width: 540px;
    margin: 0 0 32px;
    color: #696969;
    font-size: 14px;
    line-height: 1.8;
}

body.service-area-page .sa-approach-list {
    border-top: 1px solid #d8d8d8;
}

body.service-area-page .sa-approach-item {
    padding: 30px 0;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    border-bottom: 1px solid #d8d8d8;
}

body.service-area-page .sa-approach-item > span {
    padding-top: 5px;
    color: #a0a0a0;
    font-size: 10px;
    font-weight: 700;
}

body.service-area-page .sa-approach-item h3 {
    margin: 0 0 8px;
    color: #111;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    letter-spacing: -.025em;
}

body.service-area-page .sa-approach-item p {
    max-width: 500px;
    margin: 0;
    color: #737373;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   LOCATION CTA
========================================================= */

body.service-area-page .sa-location-cta {
    position: relative;
    overflow: hidden;
    background: #151515;
}

body.service-area-page .sa-location-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -200px;
    top: -250px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
}

body.service-area-page .sa-location-cta-inner {
    position: relative;
    min-height: 245px;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 35px;
}

body.service-area-page .sa-location-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
}

body.service-area-page .sa-location-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
}

body.service-area-page .sa-location-content > span {
    display: block;
    margin-bottom: 9px;
    color: #747474;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

body.service-area-page .sa-location-content h2 {
    margin: 0 0 8px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(29px, 3vw, 42px);
    letter-spacing: -.035em;
}

body.service-area-page .sa-location-content p {
    margin: 0;
    color: rgba(255,255,255,.52);
    font-size: 14px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    body.service-area-page .sa-container {
        width: min(100% - 60px, 1380px);
    }

    body.service-area-page .sa-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    body.service-area-page .sa-hero h1 {
        font-size: clamp(48px, 6vw, 68px);
    }

    body.service-area-page .sa-intro-grid,
    body.service-area-page .sa-approach-grid {
        gap: 70px;
    }

    body.service-area-page .sa-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.service-area-page .sa-section-header {
        gap: 50px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET / SMALL
========================================================= */

@media (max-width: 850px) {

    body.service-area-page .sa-hero-grid {
        grid-template-columns: 1fr;
        padding: 75px 0;
    }

    body.service-area-page .sa-hero-content {
        max-width: 700px;
    }

    body.service-area-page .sa-region-panel {
        width: 100%;
        max-width: 650px;
        margin: 0;
    }

    body.service-area-page .sa-intro-grid,
    body.service-area-page .sa-section-header,
    body.service-area-page .sa-approach-grid,
    body.service-area-page .sa-surrounding {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    body.service-area-page .sa-intro-copy {
        padding-top: 0;
    }

    body.service-area-page .sa-approach-heading {
        position: static;
    }

    body.service-area-page .sa-location-cta-inner {
        grid-template-columns: 75px 1fr;
        padding: 55px 0;
    }

    body.service-area-page .sa-location-button {
        grid-column: 2;
        justify-self: start;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 620px) {

    body.service-area-page .sa-container {
        width: calc(100% - 40px);
    }

    body.service-area-page .sa-hero {
        min-height: auto;
    }

    body.service-area-page .sa-hero-grid {
        min-height: auto;
        padding: 60px 0;
    }

    body.service-area-page .sa-hero h1 {
        margin-top: 24px;
        font-size: clamp(42px, 12vw, 55px);
    }

    body.service-area-page .sa-hero-copy {
        font-size: 14px;
    }

    body.service-area-page .sa-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    body.service-area-page .sa-region-graphic {
        height: 310px;
    }

    body.service-area-page .sa-map-point {
        font-size: 8px;
    }

    body.service-area-page .sa-intro,
    body.service-area-page .sa-areas,
    body.service-area-page .sa-approach {
        padding: 80px 0;
    }

    body.service-area-page .sa-intro-heading h2,
    body.service-area-page .sa-section-header h2,
    body.service-area-page .sa-approach-heading h2 {
        font-size: 40px;
    }

    body.service-area-page .sa-area-grid {
        grid-template-columns: 1fr;
    }

    body.service-area-page .sa-area-card {
        min-height: 270px;
    }

    body.service-area-page .sa-surrounding-item {
        grid-template-columns: 45px 1fr;
    }

    body.service-area-page .sa-surrounding-item strong {
        font-size: 15px;
    }

    body.service-area-page .sa-location-cta-inner {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    body.service-area-page .sa-location-button {
        grid-column: auto;
    }

}
/* =========================================================
   SERVICE AREA
   INTERACTIVE LOCATION DIRECTORY
========================================================= */

body.service-area-page .sa-interactive-areas {
    padding: 100px 0 105px;
    background: #090909;
    color: #ffffff;
}


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

body.service-area-page .sa-interactive-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr);
    gap: 100px;
    align-items: end;

    margin-bottom: 55px;
}


body.service-area-page .sa-interactive-title h2 {
    max-width: 720px;

    margin: 26px 0 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(46px, 4.2vw, 66px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


body.service-area-page .sa-interactive-title h2 em {
    display: block;

    margin-top: 6px;

    color: #858585;

    font-style: normal;
    font-weight: 500;
}


body.service-area-page .sa-interactive-intro {
    max-width: 500px;
}


body.service-area-page .sa-interactive-label {
    display: block;

    margin-bottom: 16px;

    color: #5f5f5f;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}


body.service-area-page .sa-interactive-intro p {
    margin: 0;

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

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   MAIN DIRECTORY
========================================================= */

body.service-area-page .sa-location-directory {
    display: grid;
    grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.05fr);

    min-height: 620px;

    border-top: 1px solid #292929;
    border-bottom: 1px solid #292929;
}


/* =========================================================
   LEFT ACTIVE LOCATION
========================================================= */

body.service-area-page .sa-location-display {
    min-width: 0;

    display: grid;
    grid-template-rows: 340px 1fr;

    border-right: 1px solid #292929;

    background: #101010;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


body.service-area-page .sa-location-display.sa-changing {
    opacity: .42;
    transform: scale(.995);
}


/* =========================================================
   ACTIVE IMAGE
========================================================= */

body.service-area-page .sa-location-display-image {
    position: relative;

    min-height: 340px;

    overflow: hidden;

    background: #181818;
}


body.service-area-page .sa-location-display-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease,
        opacity .25s ease;
}


body.service-area-page
.sa-location-display:hover
.sa-location-display-image img {
    transform: scale(1.035);
}


body.service-area-page .sa-location-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.22) 0%,
            rgba(0,0,0,.02) 42%,
            rgba(0,0,0,.70) 100%
        );
}


/* IMAGE TOP INFO */

body.service-area-page .sa-location-image-top {
    position: absolute;

    top: 25px;
    left: 28px;
    right: 28px;

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

    z-index: 2;
}


body.service-area-page
.sa-location-image-top
span:first-child {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    background: rgba(8,8,8,.72);

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

    color: #ffffff;

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

    backdrop-filter: blur(8px);
}


body.service-area-page
.sa-location-image-top
span:last-child {
    padding: 9px 13px;

    background: rgba(8,8,8,.68);

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

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

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;

    backdrop-filter: blur(8px);
}


/* LOCATION MARKER */

body.service-area-page .sa-location-image-marker {
    position: absolute;

    left: 30px;
    bottom: 28px;

    width: 54px;
    height: 54px;

    z-index: 2;

    display: grid;
    place-items: center;

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

    background: rgba(10,10,10,.35);

    backdrop-filter: blur(8px);
}


body.service-area-page .sa-location-image-marker span {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 6px rgba(255,255,255,.12),
        0 0 22px rgba(255,255,255,.35);
}


/* =========================================================
   ACTIVE CONTENT
========================================================= */

body.service-area-page .sa-location-display-content {
    min-height: 280px;

    padding: 35px 38px 30px;

    display: flex;
    flex-direction: column;
}


body.service-area-page .sa-active-region {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #686868;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}


body.service-area-page .sa-active-region-line {
    width: 25px;
    height: 1px;

    background: #5d5d5d;
}


body.service-area-page .sa-location-display-content h3 {
    margin: 15px 0 12px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 3.6vw, 55px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
}


body.service-area-page .sa-location-display-content > p {
    max-width: 500px;

    margin: 0;

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

    font-size: 13px;
    line-height: 1.7;
}


body.service-area-page .sa-active-footer {
    margin-top: auto;
    padding-top: 22px;

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

    gap: 20px;

    border-top: 1px solid #292929;
}


body.service-area-page .sa-active-footer > span {
    color: #555555;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}


body.service-area-page .sa-active-footer a {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #dedede;

    text-decoration: none;

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

    transition: color .25s ease;
}


body.service-area-page .sa-active-footer a:hover {
    color: #ffffff;
}


body.service-area-page .sa-active-footer b {
    font-size: 14px;
}


/* =========================================================
   RIGHT LOCATION OPTIONS
========================================================= */

body.service-area-page .sa-location-selector {
    display: flex;
    flex-direction: column;
}


body.service-area-page .sa-location-option {
    appearance: none;

    width: 100%;

    flex: 1;

    min-height: 100px;

    padding: 18px 27px;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        42px;

    gap: 18px;

    align-items: center;

    border: 0;
    border-bottom: 1px solid #292929;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background .28s ease,
        padding-left .28s ease;
}


body.service-area-page
.sa-location-option:last-child {
    border-bottom: 0;
}


body.service-area-page
.sa-location-option:hover {
    padding-left: 34px;

    background: #141414;
}


body.service-area-page
.sa-location-option.active {
    background:
        linear-gradient(
            90deg,
            #191919 0%,
            #121212 100%
        );
}


/* ACTIVE LINE */

body.service-area-page
.sa-location-option.active::before {
    content: "";

    position: absolute;
}


body.service-area-page .sa-option-number {
    color: #555555;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
}


body.service-area-page
.sa-location-option.active
.sa-option-number {
    color: #bdbdbd;
}


body.service-area-page .sa-option-copy {
    display: block;
}


body.service-area-page .sa-option-copy small {
    display: block;

    margin-bottom: 7px;

    color: #5f5f5f;

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .17em;
}


body.service-area-page .sa-option-copy strong {
    display: block;

    color: #d6d6d6;

    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.035em;

    transition:
        color .25s ease,
        transform .25s ease;
}


body.service-area-page
.sa-location-option:hover
.sa-option-copy strong,
body.service-area-page
.sa-location-option.active
.sa-option-copy strong {
    color: #ffffff;

    transform: translateX(3px);
}


/* OPTION ARROW */

body.service-area-page .sa-option-arrow {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    justify-self: end;

    border: 1px solid #333333;
    border-radius: 50%;

    color: #6d6d6d;

    font-size: 12px;

    transition:
        background .28s ease,
        border-color .28s ease,
        color .28s ease,
        transform .28s ease;
}


body.service-area-page
.sa-location-option:hover
.sa-option-arrow,
body.service-area-page
.sa-location-option.active
.sa-option-arrow {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

    transform: rotate(45deg);
}


/* =========================================================
   EXTENDED COVERAGE
========================================================= */

body.service-area-page .sa-interactive-extended {
    min-height: 120px;

    display: grid;
    grid-template-columns: .8fr 1fr 1fr;

    border-bottom: 1px solid #292929;
}


body.service-area-page .sa-extended-title,
body.service-area-page .sa-extended-area {
    padding: 27px 30px;

    display: flex;
    align-items: center;
}


body.service-area-page .sa-extended-title {
    gap: 16px;

    border-right: 1px solid #292929;
}


body.service-area-page .sa-extended-plus {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    border: 1px solid #383838;
    border-radius: 50%;

    color: #ffffff;

    font-size: 18px;
}


body.service-area-page .sa-extended-title small {
    display: block;

    margin-bottom: 5px;

    color: #555555;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}


body.service-area-page .sa-extended-title strong {
    color: #d5d5d5;

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 600;
}


body.service-area-page .sa-extended-area {
    gap: 20px;

    border-right: 1px solid #292929;
}


body.service-area-page
.sa-extended-area:last-child {
    border-right: 0;
}


body.service-area-page .sa-extended-area > span {
    color: #555555;

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


body.service-area-page .sa-extended-area p {
    margin: 0;

    color: #747474;

    font-size: 12px;
    line-height: 1.5;
}


body.service-area-page .sa-extended-area strong {
    display: block;

    color: #dedede;

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    body.service-area-page .sa-interactive-head {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    body.service-area-page .sa-location-directory {
        grid-template-columns: 1fr;
    }


    body.service-area-page .sa-location-display {
        border-right: 0;
        border-bottom: 1px solid #292929;
    }


    body.service-area-page .sa-location-display-image {
        height: 420px;
    }


    body.service-area-page .sa-location-option {
        min-height: 100px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body.service-area-page .sa-interactive-areas {
        padding: 75px 0;
    }


    body.service-area-page .sa-interactive-title h2 {
        font-size: 40px;
    }


    body.service-area-page .sa-location-display {
        grid-template-rows: 270px auto;
    }


    body.service-area-page .sa-location-display-image {
        min-height: 270px;
        height: 270px;
    }


    body.service-area-page .sa-location-display-content {
        min-height: 260px;

        padding: 28px 23px;
    }


    body.service-area-page .sa-location-display-content h3 {
        font-size: 40px;
    }


    body.service-area-page .sa-active-footer {
        margin-top: 30px;

        align-items: flex-start;
        flex-direction: column;
    }


    body.service-area-page .sa-location-option {
        min-height: 92px;

        padding: 16px 18px;

        grid-template-columns:
            34px
            minmax(0, 1fr)
            36px;

        gap: 10px;
    }


    body.service-area-page
    .sa-location-option:hover {
        padding-left: 18px;
    }


    body.service-area-page .sa-option-copy strong {
        font-size: 20px;
    }


    body.service-area-page .sa-option-arrow {
        width: 32px;
        height: 32px;
    }


    body.service-area-page .sa-interactive-extended {
        grid-template-columns: 1fr;
    }


    body.service-area-page .sa-extended-title,
    body.service-area-page .sa-extended-area {
        min-height: 95px;

        border-right: 0;
        border-bottom: 1px solid #292929;
    }


    body.service-area-page
    .sa-extended-area:last-child {
        border-bottom: 0;
    }

}/* =========================================================
   SERVICE AREA DIRECTORY — COMPACT SIZE + LARGE LEFT PANEL
   Paste at the VERY BOTTOM of style.css
========================================================= */


/* 01 — MAKE COMPLETE SECTION MORE COMPACT */

body.service-area-page .sa-interactive-areas {
    padding: 72px 0 78px;
}


/* HEADER MORE COMPACT */

body.service-area-page .sa-interactive-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .65fr);
    gap: 75px;
    margin-bottom: 38px;
}


body.service-area-page .sa-interactive-title h2 {
    max-width: 650px;

    margin-top: 20px;

    font-size: clamp(40px, 3.6vw, 56px);
    line-height: 1.02;
}


body.service-area-page .sa-interactive-intro {
    max-width: 460px;
}


body.service-area-page .sa-interactive-intro p {
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   02 — LEFT SIDE BIGGER / RIGHT SIDE SMALLER
========================================================= */

body.service-area-page .sa-location-directory {
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(330px, .85fr);

    min-height: 530px;
}


/* =========================================================
   03 — LEFT IMAGE + DETAILS PANEL
========================================================= */

body.service-area-page .sa-location-display {
    grid-template-rows: 335px 195px;
}


/* IMAGE AREA */

body.service-area-page .sa-location-display-image {
    min-height: 335px;
    height: 335px;
}


body.service-area-page .sa-location-display-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* TOP IMAGE INFO */

body.service-area-page .sa-location-image-top {
    top: 20px;
    left: 24px;
    right: 24px;
}


body.service-area-page
.sa-location-image-top
span:first-child {
    width: 36px;
    height: 36px;

    font-size: 9px;
}


body.service-area-page
.sa-location-image-top
span:last-child {
    padding: 7px 11px;

    font-size: 7px;
}


/* MAP / LOCATION DOT */

body.service-area-page .sa-location-image-marker {
    left: 25px;
    bottom: 23px;

    width: 46px;
    height: 46px;
}


body.service-area-page .sa-location-image-marker span {
    width: 8px;
    height: 8px;
}


/* =========================================================
   04 — LEFT DETAILS MORE HORIZONTAL / COMPACT
========================================================= */

body.service-area-page .sa-location-display-content {
    min-height: 195px;

    padding: 24px 30px 22px;
}


body.service-area-page .sa-active-region {
    gap: 10px;

    font-size: 7px;
}


body.service-area-page .sa-active-region-line {
    width: 20px;
}


body.service-area-page .sa-location-display-content h3 {
    margin: 10px 0 8px;

    font-size: clamp(32px, 3vw, 45px);
}


body.service-area-page .sa-location-display-content > p {
    max-width: 600px;

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


body.service-area-page .sa-active-footer {
    padding-top: 14px;
}


body.service-area-page .sa-active-footer > span {
    font-size: 7px;
}


body.service-area-page .sa-active-footer a {
    gap: 9px;

    font-size: 9px;
}


/* =========================================================
   05 — RIGHT LOCATION LIST SMALLER
========================================================= */

body.service-area-page .sa-location-selector {
    min-width: 0;
}


body.service-area-page .sa-location-option {
    min-height: 88px;

    padding: 12px 20px;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        34px;

    gap: 12px;
}


/* DON'T LET HOVER MAKE ROW TOO LARGE */

body.service-area-page .sa-location-option:hover {
    padding-left: 24px;
}


/* LOCATION NUMBER */

body.service-area-page .sa-option-number {
    font-size: 8px;
}


/* SMALL REGION LABEL */

body.service-area-page .sa-option-copy small {
    margin-bottom: 4px;

    font-size: 6.5px;
    letter-spacing: .14em;
}


/* LOCATION NAME */

body.service-area-page .sa-option-copy strong {
    font-size: 19px;
}


/* LOCATION ARROW */

body.service-area-page .sa-option-arrow {
    width: 30px;
    height: 30px;

    font-size: 10px;
}


/* =========================================================
   06 — EXTENDED COVERAGE COMPACT
========================================================= */

body.service-area-page .sa-interactive-extended {
    min-height: 90px;

    grid-template-columns: .75fr 1fr 1fr;
}


body.service-area-page .sa-extended-title,
body.service-area-page .sa-extended-area {
    padding: 19px 24px;
}


body.service-area-page .sa-extended-plus {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    font-size: 15px;
}


body.service-area-page .sa-extended-title small {
    font-size: 6px;
}


body.service-area-page .sa-extended-title strong {
    font-size: 14px;
}


body.service-area-page .sa-extended-area {
    gap: 15px;
}


body.service-area-page .sa-extended-area > span {
    font-size: 8px;
}


body.service-area-page .sa-extended-area p {
    font-size: 10px;
}


body.service-area-page .sa-extended-area strong {
    font-size: 14px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    body.service-area-page .sa-interactive-areas {
        padding: 65px 0 70px;
    }


    body.service-area-page .sa-interactive-head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 32px;
    }


    body.service-area-page .sa-location-directory {
        grid-template-columns: 1fr;
    }


    body.service-area-page .sa-location-display {
        grid-template-rows: 360px auto;

        border-right: 0;
        border-bottom: 1px solid #292929;
    }


    body.service-area-page .sa-location-display-image {
        height: 360px;
        min-height: 360px;
    }


    body.service-area-page .sa-location-display-content {
        min-height: 190px;
    }


    body.service-area-page .sa-location-option {
        min-height: 78px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body.service-area-page .sa-interactive-areas {
        padding: 55px 0 60px;
    }


    body.service-area-page .sa-interactive-title h2 {
        font-size: 36px;
    }


    body.service-area-page .sa-interactive-intro p {
        font-size: 11px;
    }


    /* ACTIVE LOCATION */

    body.service-area-page .sa-location-display {
        grid-template-rows: 260px auto;
    }


    body.service-area-page .sa-location-display-image {
        height: 260px;
        min-height: 260px;
    }


    body.service-area-page .sa-location-display-content {
        min-height: 210px;

        padding: 22px 20px;
    }


    body.service-area-page .sa-location-display-content h3 {
        font-size: 36px;
    }


    body.service-area-page .sa-location-display-content > p {
        font-size: 10.5px;
    }


    body.service-area-page .sa-active-footer {
        margin-top: 24px;
        padding-top: 13px;
    }


    /* LOCATION ROWS */

    body.service-area-page .sa-location-option {
        min-height: 72px;

        padding: 11px 15px;

        grid-template-columns:
            28px
            minmax(0, 1fr)
            30px;

        gap: 8px;
    }


    body.service-area-page .sa-location-option:hover {
        padding-left: 15px;
    }


    body.service-area-page .sa-option-copy strong {
        font-size: 17px;
    }


    body.service-area-page .sa-option-copy small {
        font-size: 6px;
    }


    body.service-area-page .sa-option-arrow {
        width: 28px;
        height: 28px;
    }


    /* EXTENDED COVERAGE */

    body.service-area-page .sa-interactive-extended {
        grid-template-columns: 1fr;
    }


    body.service-area-page .sa-extended-title,
    body.service-area-page .sa-extended-area {
        min-height: 75px;

        padding: 16px 18px;
    }

}
/* =========================================================
   SERVICE AREA — LOCAL APPROACH VISUAL LAYOUT
========================================================= */

body.service-area-page .sa-approach.sa-approach-visual {
    position: relative;
    overflow: hidden;

    padding: 95px 0 100px;

    background: #f8f8f7;
}


/* =========================================================
   MAIN GRID
========================================================= */

body.service-area-page .sa-approach-visual-grid {
    display: grid;

    grid-template-columns:
        minmax(390px, .82fr)
        minmax(650px, 1.38fr);

    gap: 70px;

    align-items: start;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

body.service-area-page .sa-approach-visual-left {
    position: relative;

    min-height: 690px;

    padding-top: 10px;
}


body.service-area-page .sa-approach-visual-left h2 {
    max-width: 570px;

    margin: 34px 0 26px;

    color: #0b0b0b;

    font-family: "Manrope", sans-serif;
    font-size: clamp(47px, 4.3vw, 67px);
    font-weight: 800;
    line-height: .99;
    letter-spacing: -.055em;
}


body.service-area-page .sa-approach-visual-left h2 em {
    display: block;

    margin-top: 6px;

    color: #a0a0a0;

    font-style: normal;
    font-weight: 500;
}


body.service-area-page .sa-approach-visual-copy {
    max-width: 525px;

    margin: 0 0 32px;

    color: #656565;

    font-size: 14px;
    line-height: 1.75;
}


/* BUTTON */

body.service-area-page
.sa-approach-visual-left
.sa-button {
    min-width: 280px;
}


/* =========================================================
   OUR APPROACH DECORATIVE AREA
========================================================= */

body.service-area-page .sa-local-insight {
    position: absolute;

    left: -70px;
    bottom: -100px;

    width: 610px;
    height: 300px;

    padding:
        88px
        55px
        45px
        185px;

    display: flex;
    gap: 25px;
    align-items: flex-start;

    border: 1px solid #dddddd;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;

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


body.service-area-page .sa-local-insight-icon {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;

    display: grid;
    place-items: center;

    border: 1px solid #dddddd;
    border-radius: 50%;

    background: #fafafa;
}


body.service-area-page .sa-local-insight-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: #111111;
    stroke-width: 1.7;
}


body.service-area-page .sa-local-insight-content {
    padding-top: 4px;
}


body.service-area-page .sa-local-insight-content > span {
    display: block;

    margin-bottom: 9px;

    color: #999999;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .19em;
}


body.service-area-page .sa-local-insight-content h3 {
    margin: 0 0 8px;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
}


body.service-area-page .sa-local-insight-content p {
    max-width: 280px;

    margin: 0;

    color: #747474;

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   RIGHT LIST
========================================================= */

body.service-area-page .sa-approach-visual-list {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* =========================================================
   EACH ROW
========================================================= */

body.service-area-page .sa-visual-service-row {
    min-height: 150px;

    display: grid;

    grid-template-columns:
        235px
        minmax(0, 1fr);

    gap: 14px;
}


/* =========================================================
   IMAGE
========================================================= */

body.service-area-page .sa-visual-service-image {
    position: relative;

    min-height: 150px;

    overflow: hidden;

    border-radius: 11px;

    background: #e6e6e6;
}


body.service-area-page .sa-visual-service-image img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform .45s ease;
}


body.service-area-page
.sa-visual-service-row:hover
.sa-visual-service-image img {
    transform: scale(1.045);
}


/* =========================================================
   RIGHT CARD
========================================================= */

body.service-area-page .sa-visual-service-card {
    min-width: 0;

    padding: 16px 25px 18px;

    display: flex;
    flex-direction: column;

    border-radius: 11px;

    background: #fbfbfb;

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


body.service-area-page
.sa-visual-service-row:hover
.sa-visual-service-card {
    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.045);
}


/* NUMBER */

body.service-area-page .sa-visual-service-number {
    display: flex;
    align-items: center;

    gap: 12px;

    height: 22px;
}


body.service-area-page .sa-visual-service-number span {
    color: #999999;

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


body.service-area-page .sa-visual-service-number i {
    width: 28px;
    height: 1px;

    display: block;

    background: #dedede;
}


/* =========================================================
   CARD BODY
========================================================= */

body.service-area-page .sa-visual-service-body {
    flex: 1;

    display: grid;

    grid-template-columns:
        62px
        minmax(0, 1fr)
        45px;

    gap: 18px;

    align-items: center;
}


/* ICON */

body.service-area-page .sa-visual-service-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid #e3e3e3;
    border-radius: 50%;

    background: #ffffff;
}


body.service-area-page .sa-visual-service-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: #111111;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* TEXT */

body.service-area-page .sa-visual-service-text h3 {
    margin: 0 0 8px;

    color: #0c0c0c;

    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
}


body.service-area-page .sa-visual-service-text p {
    max-width: 330px;

    margin: 0;

    color: #747474;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   ARROW
========================================================= */

body.service-area-page .sa-visual-service-arrow {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border: 1px solid #d2d2d2;
    border-radius: 50%;

    color: #111111;

    text-decoration: none;

    font-size: 17px;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


body.service-area-page
.sa-visual-service-row:hover
.sa-visual-service-arrow {
    background: #0a0a0a;

    border-color: #0a0a0a;

    color: #ffffff;

    transform: rotate(45deg);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1450px) {

    body.service-area-page .sa-approach-visual-grid {
        grid-template-columns:
            minmax(430px, .85fr)
            minmax(720px, 1.4fr);

        gap: 85px;
    }


    body.service-area-page .sa-visual-service-row {
        grid-template-columns:
            245px
            minmax(0, 1fr);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    body.service-area-page .sa-approach.sa-approach-visual {
        padding: 75px 0;
    }


    body.service-area-page .sa-approach-visual-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    body.service-area-page .sa-approach-visual-left {
        min-height: auto;
    }


    body.service-area-page .sa-approach-visual-left h2 {
        max-width: 620px;
    }


    body.service-area-page .sa-approach-visual-copy {
        max-width: 650px;
    }


    body.service-area-page .sa-local-insight {
        position: relative;

        left: auto;
        bottom: auto;

        width: 100%;
        height: auto;

        margin-top: 45px;

        padding: 28px;

        border-radius: 12px;
    }


    body.service-area-page .sa-visual-service-row {
        grid-template-columns:
            240px
            minmax(0, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    body.service-area-page .sa-approach.sa-approach-visual {
        padding: 60px 0;
    }


    body.service-area-page .sa-approach-visual-left h2 {
        margin-top: 26px;

        font-size: 42px;
    }


    body.service-area-page .sa-approach-visual-copy {
        font-size: 13px;
    }


    body.service-area-page
    .sa-approach-visual-left
    .sa-button {
        min-width: 0;
        width: 100%;
    }


    /* OUR APPROACH */

    body.service-area-page .sa-local-insight {
        padding: 24px 20px;

        gap: 16px;
    }


    body.service-area-page .sa-local-insight-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }


    body.service-area-page .sa-local-insight-content h3 {
        font-size: 19px;
    }


    /* EACH SERVICE */

    body.service-area-page .sa-visual-service-row {
        min-height: 0;

        grid-template-columns: 1fr;

        gap: 0;

        overflow: hidden;

        border-radius: 12px;

        background: #fbfbfb;
    }


    body.service-area-page .sa-visual-service-image {
        min-height: 190px;

        border-radius: 12px 12px 0 0;
    }


    body.service-area-page .sa-visual-service-card {
        min-height: 165px;

        padding: 18px;

        border-radius: 0 0 12px 12px;
    }


    body.service-area-page .sa-visual-service-body {
        grid-template-columns:
            50px
            minmax(0, 1fr)
            38px;

        gap: 12px;
    }


    body.service-area-page .sa-visual-service-icon {
        width: 48px;
        height: 48px;
    }


    body.service-area-page .sa-visual-service-icon svg {
        width: 20px;
        height: 20px;
    }


    body.service-area-page .sa-visual-service-text h3 {
        font-size: 21px;
    }


    body.service-area-page .sa-visual-service-text p {
        font-size: 11px;
    }


    body.service-area-page .sa-visual-service-arrow {
        width: 37px;
        height: 37px;
    }

}
/* =========================================================
   =========================================================
   JSB SECURITY SERVICES
   CAREERS PAGE
   =========================================================
========================================================= */


/* =========================================================
   GLOBAL CAREER PAGE
========================================================= */

body.careers-page {
    background: #ffffff;
    color: #151515;
}


body.careers-page .career-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   EYEBROW
========================================================= */

body.careers-page .career-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;

    color: #777777;

    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .19em;
}


body.careers-page .career-eyebrow > span {
    width: 38px;
    height: 1px;

    display: block;

    background: #161616;
}


body.careers-page .career-eyebrow-light {
    color: rgba(255,255,255,.55);
}


body.careers-page .career-eyebrow-light > span {
    background: rgba(255,255,255,.55);
}


/* =========================================================
   BUTTONS
========================================================= */

body.careers-page .career-button {
    min-height: 56px;

    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    border: 1px solid transparent;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


body.careers-page .career-button span {
    font-size: 16px;
}


body.careers-page .career-button-light {
    background: #ffffff;
    color: #0a0a0a;
}


body.careers-page .career-button-light:hover {
    background: #dedede;
}


body.careers-page .career-button-dark {
    background: #090909;
    color: #ffffff;
}


body.careers-page .career-button-dark:hover {
    background: #292929;
}


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

body.careers-page .career-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    /*
       OPTIONAL HERO IMAGE:

       Add an image named:
       careers-hero.png

       in your main JSB Security Folder.
    */

    background-image:
        linear-gradient(
            90deg,
            rgba(5,5,5,.94) 0%,
            rgba(5,5,5,.85) 43%,
            rgba(5,5,5,.47) 72%,
            rgba(5,5,5,.30) 100%
        ),
        url("../../careers-hero.png");

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

    background-color: #090909;
}


body.careers-page .career-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.38)
        );
}


body.careers-page .career-hero-content {
    width: 57%;
    max-width: 760px;

    padding: 85px 0 75px;
}


body.careers-page .career-hero h1 {
    margin: 28px 0 25px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(55px, 5.4vw, 82px);
    font-weight: 800;
    line-height: .97;
    letter-spacing: -.055em;
}


body.careers-page .career-hero h1 em {
    display: block;

    color: #9d9d9d;

    font-style: normal;
    font-weight: 500;
}


body.careers-page .career-hero-content > p {
    max-width: 610px;

    margin: 0;

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

    font-size: 14px;
    line-height: 1.8;
}


body.careers-page .career-hero-actions {
    margin-top: 34px;

    display: flex;
    align-items: center;
    gap: 30px;
}


body.careers-page .career-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;

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

    text-decoration: none;
}


body.careers-page .career-text-link span {
    transition: transform .25s ease;
}


body.careers-page .career-text-link:hover span {
    transform: translateX(4px);
}


body.careers-page .career-hero-meta {
    max-width: 690px;

    margin-top: 60px;
    padding-top: 24px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

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


body.careers-page .career-hero-meta > div {
    padding-right: 25px;
}


body.careers-page .career-hero-meta strong {
    display: block;

    margin-bottom: 6px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 600;
}


body.careers-page .career-hero-meta span {
    color: rgba(255,255,255,.42);

    font-size: 8px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}


/* =========================================================
   INTRO
========================================================= */

body.careers-page .career-intro {
    padding: 105px 0;

    background: #f5f5f3;
}


body.careers-page .career-intro-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;

    gap: 110px;
}


body.careers-page .career-intro-heading h2 {
    max-width: 580px;

    margin: 30px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(46px, 4.2vw, 65px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


body.careers-page .career-intro-heading h2 em {
    display: block;

    color: #9b9b9b;

    font-style: normal;
    font-weight: 500;
}


body.careers-page .career-intro-content {
    max-width: 620px;

    padding-top: 5px;
}


body.careers-page .career-intro-lead {
    margin: 0 0 20px;

    color: #171717;

    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.55;
}


body.careers-page .career-intro-content > p:not(.career-intro-lead) {
    color: #6a6a6a;

    font-size: 13px;
    line-height: 1.8;
}


body.careers-page .career-intro-line {
    width: 100%;
    height: 1px;

    margin: 35px 0 25px;

    background: #d8d8d5;
}


body.careers-page .career-intro-note {
    display: grid;
    grid-template-columns: 130px 1fr;

    gap: 30px;
}


body.careers-page .career-intro-note span {
    color: #929292;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
}


body.careers-page .career-intro-note p {
    margin: 0;

    color: #555555;

    font-size: 12px;
    line-height: 1.65;
}


/* =========================================================
   EXPECTATIONS
========================================================= */

body.careers-page .career-expectations {
    padding: 105px 0;

    background: #0a0a0a;
}


body.careers-page .career-section-head {
    margin-bottom: 55px;

    display: grid;
    grid-template-columns: 1fr 440px;

    gap: 80px;
    align-items: end;
}


body.careers-page .career-section-head h2 {
    margin: 27px 0 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 4vw, 62px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


body.careers-page .career-section-head h2 em {
    display: block;

    color: #7d7d7d;

    font-style: normal;
    font-weight: 500;
}


body.careers-page .career-section-head > p {
    margin: 0;

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

    font-size: 12px;
    line-height: 1.8;
}


/* QUALITY CARDS */

body.careers-page .career-quality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #292929;
    border-left: 1px solid #292929;
}


body.careers-page .career-quality-card {
    position: relative;

    min-height: 270px;

    padding: 27px;

    border-right: 1px solid #292929;
    border-bottom: 1px solid #292929;

    background: #0a0a0a;

    transition:
        background .3s ease,
        transform .3s ease;
}


body.careers-page .career-quality-card:hover {
    background: #151515;
}


body.careers-page .career-quality-number {
    color: #555555;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
}


body.careers-page .career-quality-icon {
    width: 48px;
    height: 48px;

    margin: 38px 0 28px;

    display: grid;
    place-items: center;

    border: 1px solid #333333;
    border-radius: 50%;

    color: #cfcfcf;

    font-size: 18px;
}


body.careers-page .career-quality-card h3 {
    margin: 0 0 11px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 600;
}


body.careers-page .career-quality-card p {
    max-width: 330px;

    margin: 0;

    color: #747474;

    font-size: 11px;
    line-height: 1.65;
}


body.careers-page .career-quality-card-wide {
    grid-column: span 3;

    min-height: 150px;

    display: grid;
    grid-template-columns: 60px 60px 1fr;

    gap: 30px;
    align-items: center;
}


body.careers-page
.career-quality-card-wide
.career-quality-icon {
    margin: 0;
}


/* =========================================================
   WORKING WITH JSB
========================================================= */

body.careers-page .career-work {
    padding: 105px 0;

    background: #ffffff;
}


body.careers-page .career-work-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 110px;
}


body.careers-page .career-work-main h2 {
    max-width: 590px;

    margin: 30px 0 25px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 4vw, 62px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


body.careers-page .career-work-main h2 em {
    display: block;

    color: #9b9b9b;

    font-style: normal;
    font-weight: 500;
}


body.careers-page .career-work-main > p {
    max-width: 530px;

    margin-bottom: 32px;

    color: #686868;

    font-size: 13px;
    line-height: 1.8;
}


/* RIGHT ITEMS */

body.careers-page .career-work-list {
    border-top: 1px solid #dddddd;
}


body.careers-page .career-work-item {
    min-height: 155px;

    padding: 27px 0;

    display: grid;
    grid-template-columns: 65px 1fr;

    gap: 30px;

    border-bottom: 1px solid #dddddd;
}


body.careers-page .career-work-item > span {
    color: #999999;

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


body.careers-page .career-work-item small {
    color: #a0a0a0;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}


body.careers-page .career-work-item h3 {
    margin: 8px 0;

    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 700;
}


body.careers-page .career-work-item p {
    max-width: 500px;

    margin: 0;

    color: #707070;

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


/* =========================================================
   APPLICATION SECTION
========================================================= */

body.careers-page .career-application {
    padding: 110px 0;

    background: #101010;
}


body.careers-page .career-application-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;

    gap: 90px;
    align-items: start;
}


/* LEFT */

body.careers-page .career-application-info {
    position: sticky;
    top: 120px;
}


body.careers-page .career-application-info h2 {
    max-width: 500px;

    margin: 30px 0 25px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(45px, 4vw, 62px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


body.careers-page .career-application-info h2 em {
    display: block;

    color: #7c7c7c;

    font-style: normal;
    font-weight: 500;
}


body.careers-page .career-application-info > p {
    max-width: 500px;

    color: #777777;

    font-size: 12px;
    line-height: 1.8;
}


/* STEPS */

body.careers-page .career-application-steps {
    margin-top: 40px;

    border-top: 1px solid #2c2c2c;
}


body.careers-page .career-application-step {
    padding: 21px 0;

    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 15px;

    border-bottom: 1px solid #2c2c2c;
}


body.careers-page .career-application-step > span {
    color: #555555;

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


body.careers-page .career-application-step strong {
    display: block;

    margin-bottom: 5px;

    color: #d7d7d7;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
}


body.careers-page .career-application-step p {
    margin: 0;

    color: #666666;

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


/* IMPORTANT NOTE */

body.careers-page .career-licence-note {
    margin-top: 30px;
    padding: 20px;

    border: 1px solid #303030;

    background: #161616;
}


body.careers-page .career-licence-note span {
    display: block;

    margin-bottom: 8px;

    color: #999999;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .18em;
}


body.careers-page .career-licence-note p {
    margin: 0;

    color: #777777;

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


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

body.careers-page .career-form-card {
    padding: 42px;

    background: #f4f4f2;
}


body.careers-page .career-form-head {
    margin-bottom: 35px;
    padding-bottom: 27px;

    border-bottom: 1px solid #d7d7d4;
}


body.careers-page .career-form-head > span {
    color: #999999;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}


body.careers-page .career-form-head h3 {
    margin: 9px 0 5px;

    font-family: "Manrope", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.035em;
}


body.careers-page .career-form-head p {
    margin: 0;

    color: #777777;

    font-size: 11px;
}


/* FORM */

body.careers-page .career-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 22px;
}


body.careers-page .career-field {
    min-width: 0;
}


body.careers-page .career-field-full {
    grid-column: 1 / -1;
}


body.careers-page .career-field > label:first-child {
    display: block;

    margin-bottom: 9px;

    color: #303030;

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


body.careers-page .career-field input:not([type="file"]),
body.careers-page .career-field select,
body.careers-page .career-field textarea {
    width: 100%;

    padding: 0 15px;

    border: 1px solid #d5d5d2;
    border-radius: 0;
    outline: none;

    background: #ffffff;

    color: #151515;

    font-family: "Inter", sans-serif;
    font-size: 11px;

    transition: border-color .2s ease;
}


body.careers-page .career-field input:not([type="file"]),
body.careers-page .career-field select {
    height: 52px;
}


body.careers-page .career-field textarea {
    min-height: 125px;

    padding-top: 15px;

    resize: vertical;
}


body.careers-page .career-field input:focus,
body.careers-page .career-field select:focus,
body.careers-page .career-field textarea:focus {
    border-color: #777777;
}


/* FILE INPUT */

body.careers-page #career-resume {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
}


body.careers-page .career-upload {
    min-height: 85px;

    padding: 16px;

    display: grid !important;
    grid-template-columns: 45px 1fr auto;

    gap: 15px;
    align-items: center;

    border: 1px dashed #c5c5c2;

    background: #ffffff;

    cursor: pointer;
}


body.careers-page .career-upload-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid #ddddda;
    border-radius: 50%;

    font-size: 16px;
}


body.careers-page .career-upload-copy strong {
    display: block;

    margin-bottom: 4px;

    color: #202020;

    font-size: 10px;
}


body.careers-page .career-upload-copy small {
    color: #8a8a8a;

    font-size: 9px;
}


body.careers-page .career-upload-button {
    padding: 9px 14px;

    background: #111111;

    color: #ffffff;

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


/* NOTICE */

body.careers-page .career-form-notice {
    margin-top: 25px;
    padding: 17px;

    display: grid;
    grid-template-columns: 30px 1fr;

    gap: 13px;

    border: 1px solid #d7d7d4;
}


body.careers-page .career-form-notice > span {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border: 1px solid #ccccca;
    border-radius: 50%;

    font-family: serif;
    font-size: 12px;
}


body.careers-page .career-form-notice p {
    margin: 0;

    color: #696969;

    font-size: 9px;
    line-height: 1.65;
}


/* SUBMIT */

body.careers-page .career-submit {
    width: 100%;
    min-height: 58px;

    margin-top: 25px;
    padding: 0 22px;

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

    border: 0;

    background: #090909;

    color: #ffffff;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition: background .25s ease;
}


body.careers-page .career-submit:hover {
    background: #292929;
}


body.careers-page .career-submit span {
    font-size: 17px;
}


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

body.careers-page .career-final-cta {
    padding: 80px 0;

    background: #080808;

    border-top: 1px solid #242424;
}


body.careers-page .career-final-cta-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;
}


body.careers-page .career-final-cta h2 {
    max-width: 780px;

    margin: 25px 0 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 3.7vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


body.careers-page .career-final-cta h2 em {
    display: block;

    color: #777777;

    font-style: normal;
    font-weight: 500;
}


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

@media (max-width: 1100px) {

    body.careers-page .career-container {
        width: min(100% - 50px, 1380px);
    }


    body.careers-page .career-hero-content {
        width: 75%;
    }


    body.careers-page .career-intro-grid,
    body.careers-page .career-work-grid,
    body.careers-page .career-application-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    body.careers-page .career-section-head {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    body.careers-page .career-quality-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    body.careers-page .career-quality-card-wide {
        grid-column: span 2;
    }


    body.careers-page .career-application-info {
        position: static;
    }

}


@media (max-width: 700px) {

    body.careers-page .career-container {
        width: calc(100% - 36px);
    }


    body.careers-page .career-hero {
        min-height: 670px;

        background-position: 62% center;
    }


    body.careers-page .career-hero-content {
        width: 100%;

        padding: 70px 0 55px;
    }


    body.careers-page .career-hero h1 {
        font-size: 48px;
    }


    body.careers-page .career-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }


    body.careers-page .career-hero-meta {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    body.careers-page .career-intro,
    body.careers-page .career-expectations,
    body.careers-page .career-work,
    body.careers-page .career-application {
        padding: 70px 0;
    }


    body.careers-page .career-intro-heading h2,
    body.careers-page .career-section-head h2,
    body.careers-page .career-work-main h2,
    body.careers-page .career-application-info h2 {
        font-size: 42px;
    }


    body.careers-page .career-intro-note {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    body.careers-page .career-quality-grid {
        grid-template-columns: 1fr;
    }


    body.careers-page .career-quality-card,
    body.careers-page .career-quality-card-wide {
        grid-column: auto;
    }


    body.careers-page .career-quality-card-wide {
        min-height: 270px;

        display: block;
    }


    body.careers-page
    .career-quality-card-wide
    .career-quality-icon {
        margin: 38px 0 28px;
    }


    body.careers-page .career-form-card {
        padding: 25px 18px;
    }


    body.careers-page .career-form-grid {
        grid-template-columns: 1fr;
    }


    body.careers-page .career-field-full {
        grid-column: auto;
    }


    body.careers-page .career-upload {
        grid-template-columns: 40px 1fr;

        gap: 12px;
    }


    body.careers-page .career-upload-button {
        grid-column: 1 / -1;

        text-align: center;
    }


    body.careers-page .career-final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }


    body.careers-page .career-final-cta h2 {
        font-size: 40px;
    }

}
	/* =====================================================
   CAREERS HERO — BACKGROUND IMAGE
===================================================== */

body.careers-page .career-hero {
    position: relative;

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.94) 0%,
            rgba(5, 5, 5, 0.82) 42%,
            rgba(5, 5, 5, 0.48) 72%,
            rgba(5, 5, 5, 0.30) 100%
        ),
        url("../../career.png");

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


/* Existing hero content image ke upar rahe */
body.careers-page .career-hero .career-container {
    position: relative;
    z-index: 2;
}


/* Agar existing overlay extra dark kar raha ho */
body.careers-page .career-hero-overlay {
    display: none;
}
/* =========================================================
   CAREERS — WHAT WE LOOK FOR
   WHITE REFINED VERSION
========================================================= */

body.careers-page .career-expectations-refined {
    background: #ffffff !important;
    color: #111111 !important;
    padding: 82px 0 76px;
}


/* =========================================================
   TOP
========================================================= */

body.careers-page .career-expectations-refined .career-eyebrow {
    color: #747474 !important;
    margin-bottom: 24px;
}

body.careers-page .career-expectations-refined .career-eyebrow span {
    background: #111111 !important;
}


body.careers-page .career-refined-top {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, .65fr);
    gap: 85px;
    align-items: end;

    margin-bottom: 48px;
}


body.careers-page .career-refined-heading h2 {
    margin: 0;

    max-width: 760px;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4.4vw, 68px);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 700;
}


body.careers-page .career-refined-heading h2 em {
    display: block;

    color: #9a9a9a;

    font-style: normal;
    font-weight: 500;
}


body.careers-page .career-refined-heading > p {
    max-width: 690px;

    margin: 22px 0 0;

    color: #666666;

    font-size: 15px;
    line-height: 1.75;
}


/* RIGHT TOP TEXT */

body.careers-page .career-refined-side-note {
    min-height: 185px;

    padding-left: 40px;

    border-left: 1px solid #d7d7d7;
}


body.careers-page .career-refined-side-note strong {
    display: block;

    color: #a1a1a1;

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: .12em;
}


body.careers-page .career-refined-side-note > span {
    display: block;

    width: 44px;
    height: 1px;

    margin: 22px 0 18px;

    background: #9b9b9b;
}


body.careers-page .career-refined-side-note small {
    display: block;

    color: #8a8a8a;

    font-size: 9px;
    line-height: 1.7;
    letter-spacing: .13em;
    font-weight: 700;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

body.careers-page .career-refined-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 40px;

    align-items: stretch;
}


/* =========================================================
   REQUIREMENTS
========================================================= */

body.careers-page .career-refined-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 46px;
}


body.careers-page .career-refined-item {
    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 18px;

    align-items: start;

    padding: 24px 0;

    border-bottom: 1px solid #dddddd;
}


body.careers-page .career-refined-item-last {
    grid-column: 1 / -1;

    max-width: calc(50% - 23px);
}


/* NUMBER */

body.careers-page .career-refined-number {
    width: 46px;
    height: 46px;

    display: inline-flex;

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

    border-radius: 50%;

    background: #f3f3f3;

    color: #333333;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
}


/* TITLE */

body.careers-page .career-refined-item h3 {
    margin: 2px 0 7px;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.02em;
    font-weight: 700;
}


/* DESCRIPTION */

body.careers-page .career-refined-item p {
    max-width: 410px;

    margin: 0;

    color: #6d6d6d;

    font-size: 12.5px;
    line-height: 1.65;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

body.careers-page .career-refined-visual {
    position: relative;

    min-height: 465px;

    overflow: hidden;

    border-radius: 5px;

    background: #eeeeec;
}


body.careers-page .career-refined-visual img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* IMAGE DARK BOTTOM */

body.careers-page .career-refined-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, .72) 100%
        );
}


/* IMAGE CAPTION */

body.careers-page .career-refined-image-caption {
    position: absolute;

    z-index: 2;

    left: 30px;
    bottom: 30px;

    display: flex;

    gap: 17px;

    align-items: stretch;
}


body.careers-page .career-refined-image-caption > span {
    width: 1px;

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


body.careers-page .career-refined-image-caption strong {
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1.65;
    letter-spacing: .12em;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

body.careers-page .career-refined-cta {
    display: grid;

    grid-template-columns:
        74px 1fr auto;

    gap: 26px;

    align-items: center;

    margin-top: 34px;

    padding: 25px 30px;

    background: #f5f5f4;
}


/* ICON */

body.careers-page .career-refined-cta-icon {
    width: 50px;
    height: 50px;

    display: flex;

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

    border: 1px solid #d3d3d3;
    border-radius: 50%;

    color: #222222;

    font-size: 20px;
}


/* CTA COPY */

body.careers-page .career-refined-cta-copy > span {
    display: block;

    margin-bottom: 7px;

    color: #969696;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}


body.careers-page .career-refined-cta-copy h3 {
    margin: 0 0 4px;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
}


body.careers-page .career-refined-cta-copy p {
    margin: 0;

    color: #747474;

    font-size: 12px;
    line-height: 1.55;
}


/* BUTTON */

body.careers-page .career-refined-cta-button {
    min-width: 250px;
    min-height: 58px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    background: #090909;

    color: #ffffff;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

    transition:
        background .25s ease,
        transform .25s ease;
}


body.careers-page .career-refined-cta-button:hover {
    background: #242424;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    body.careers-page .career-refined-top {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    body.careers-page .career-refined-side-note {
        min-height: auto;

        padding: 0;

        border-left: 0;
    }


    body.careers-page .career-refined-content {
        grid-template-columns: 1fr;
    }


    body.careers-page .career-refined-visual {
        min-height: 420px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    body.careers-page .career-expectations-refined {
        padding: 62px 0;
    }


    body.careers-page .career-refined-list {
        grid-template-columns: 1fr;
    }


    body.careers-page .career-refined-item-last {
        grid-column: auto;

        max-width: none;
    }


    body.careers-page .career-refined-cta {
        grid-template-columns:
            55px 1fr;
    }


    body.careers-page .career-refined-cta-button {
        grid-column: 1 / -1;

        width: 100%;
    }

}


@media (max-width: 520px) {

    body.careers-page .career-refined-heading h2 {
        font-size: 38px;
    }


    body.careers-page .career-refined-item {
        grid-template-columns:
            46px 1fr;

        gap: 12px;
    }


    body.careers-page .career-refined-number {
        width: 38px;
        height: 38px;

        font-size: 10px;
    }


    body.careers-page .career-refined-visual {
        min-height: 360px;
    }


    body.careers-page .career-refined-cta {
        padding: 22px;
    }

}
/* =========================================================
   JSB CONTACT PAGE
========================================================= */

body.contact-page {
    margin: 0;
    background: #ffffff;
    color: #151515;
    font-family: "Inter", sans-serif;
}

body.contact-page .contact-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   COMMON
========================================================= */

body.contact-page .contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;

    color: #777777;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .19em;
}

body.contact-page .contact-eyebrow > span {
    width: 42px;
    height: 1px;
    display: block;
    background: #111111;
}

body.contact-page .contact-eyebrow-light {
    color: #aaaaaa;
}

body.contact-page .contact-eyebrow-light > span {
    background: #dddddd;
}


body.contact-page .contact-button {
    min-height: 58px;
    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;

    transition:
        transform .25s ease,
        background .25s ease;
}

body.contact-page .contact-button-light {
    background: #ffffff;
    color: #111111;
}

body.contact-page .contact-button:hover {
    transform: translateY(-2px);
}



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

body.contact-page .contact-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 82% 48%,
            #303030 0,
            #181818 22%,
            #090909 56%,
            #050505 100%
        );
}


/* Subtle architectural/security pattern */

body.contact-page .contact-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 520px;
    height: 520px;

    right: 7%;
    top: 50%;

    transform: translateY(-50%);

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

body.contact-page .contact-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 350px;
    height: 350px;

    right: 12%;
    top: 50%;

    transform: translateY(-50%);

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


body.contact-page .contact-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(4,4,4,.96) 0%,
            rgba(4,4,4,.90) 45%,
            rgba(4,4,4,.38) 100%
        );
}


body.contact-page .contact-hero-content {
    width: 62%;
    max-width: 800px;

    padding: 80px 0 72px;
}


body.contact-page .contact-hero h1 {
    margin: 25px 0 24px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(52px, 5.2vw, 82px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 700;
}

body.contact-page .contact-hero h1 em {
    display: block;

    color: #9d9d9d;

    font-style: normal;
    font-weight: 500;
}


body.contact-page .contact-hero-content > p {
    max-width: 650px;

    margin: 0;

    color: #a9a9a9;

    font-size: 15px;
    line-height: 1.8;
}


body.contact-page .contact-hero-actions {
    display: flex;
    align-items: center;
    gap: 34px;

    margin-top: 35px;
}


body.contact-page .contact-text-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;

    color: #d3d3d3;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

body.contact-page .contact-text-link:hover {
    color: #ffffff;
}


body.contact-page .contact-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    max-width: 720px;

    margin-top: 55px;
    padding-top: 24px;

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

body.contact-page .contact-hero-meta div {
    padding-right: 25px;
}

body.contact-page .contact-hero-meta strong,
body.contact-page .contact-hero-meta span {
    display: block;
}

body.contact-page .contact-hero-meta strong {
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
}

body.contact-page .contact-hero-meta span {
    margin-top: 5px;

    color: #777777;

    font-size: 10px;
    letter-spacing: .04em;
}



/* =========================================================
   INTRO
========================================================= */

body.contact-page .contact-intro {
    padding: 95px 0;
    background: #f5f5f3;
}

body.contact-page .contact-intro-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;

    gap: 120px;
    align-items: start;
}


body.contact-page .contact-intro-heading h2 {
    max-width: 680px;

    margin: 25px 0 0;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1.04;
    letter-spacing: -.05em;
}

body.contact-page .contact-intro-heading h2 em {
    display: block;

    color: #9a9a9a;

    font-style: normal;
    font-weight: 500;
}


body.contact-page .contact-intro-copy {
    padding-top: 38px;
}

body.contact-page .contact-intro-copy p {
    max-width: 570px;

    margin: 0 0 18px;

    color: #6d6d6d;

    font-size: 14px;
    line-height: 1.8;
}

body.contact-page .contact-intro-copy .contact-intro-lead {
    color: #222222;

    font-family: "Manrope", sans-serif;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 500;
}



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

body.contact-page .contact-details {
    padding: 95px 0 105px;
    background: #ffffff;
}


body.contact-page .contact-details-head {
    display: grid;
    grid-template-columns: 1fr .65fr;

    gap: 100px;
    align-items: end;

    margin-bottom: 50px;
}

body.contact-page .contact-details-head h2 {
    margin: 24px 0 0;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: clamp(40px, 3.6vw, 58px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

body.contact-page .contact-details-head h2 em {
    display: block;

    color: #999999;

    font-style: normal;
    font-weight: 500;
}

body.contact-page .contact-details-head > p {
    margin: 0;

    color: #707070;

    font-size: 13px;
    line-height: 1.8;
}


body.contact-page .contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}


body.contact-page .contact-method {
    min-height: 355px;

    padding: 32px;

    position: relative;

    border-right: 1px solid #dedede;

    transition:
        background .25s ease,
        transform .25s ease;
}

body.contact-page .contact-method:last-child {
    border-right: 0;
}

body.contact-page .contact-method:hover {
    background: #f5f5f3;
}


body.contact-page .contact-method-number {
    color: #aaaaaa;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
}


body.contact-page .contact-method-icon {
    width: 48px;
    height: 48px;

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

    margin: 34px 0 26px;

    border: 1px solid #d3d3d3;
    border-radius: 50%;

    color: #111111;

    font-size: 18px;
}


body.contact-page .contact-method-label {
    display: block;

    margin-bottom: 10px;

    color: #999999;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}


body.contact-page .contact-method h3 {
    margin: 0 0 12px;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.025em;
}


body.contact-page .contact-method p {
    max-width: 350px;

    margin: 0 0 24px;

    color: #737373;

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


body.contact-page .contact-method-value {
    display: block;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;
}


body.contact-page .contact-method-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    color: #111111;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
}



/* =========================================================
   REQUEST / FORM SECTION
========================================================= */

body.contact-page .contact-request {
    padding: 105px 0;

    background: #090909;
}


body.contact-page .contact-request-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;

    gap: 90px;
    align-items: start;
}


/* LEFT */

body.contact-page .contact-request-info {
    position: sticky;
    top: 120px;
}


body.contact-page .contact-request-info h2 {
    max-width: 560px;

    margin: 25px 0 24px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.03;
    letter-spacing: -.05em;
}

body.contact-page .contact-request-info h2 em {
    display: block;

    color: #8d8d8d;

    font-style: normal;
    font-weight: 500;
}


body.contact-page .contact-request-info > p {
    max-width: 510px;

    margin: 0;

    color: #898989;

    font-size: 13px;
    line-height: 1.8;
}


/* PROCESS */

body.contact-page .contact-process {
    margin-top: 42px;

    border-top: 1px solid #2a2a2a;
}


body.contact-page .contact-process-item {
    display: grid;
    grid-template-columns: 44px 1fr;

    gap: 18px;

    padding: 20px 0;

    border-bottom: 1px solid #2a2a2a;
}

body.contact-page .contact-process-item > span {
    color: #666666;

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

body.contact-page .contact-process-item strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

body.contact-page .contact-process-item p {
    margin: 0;

    color: #747474;

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


body.contact-page .contact-request-note {
    margin-top: 30px;
    padding: 22px;

    background: #141414;

    border-left: 2px solid #777777;
}

body.contact-page .contact-request-note span {
    display: block;

    margin-bottom: 9px;

    color: #a4a4a4;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

body.contact-page .contact-request-note p {
    margin: 0;

    color: #777777;

    font-size: 11px;
    line-height: 1.7;
}



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

body.contact-page .contact-form-card {
    background: #ffffff;

    padding: 45px;
}


body.contact-page .contact-form-head {
    padding-bottom: 30px;

    border-bottom: 1px solid #dddddd;
}

body.contact-page .contact-form-head > span {
    display: block;

    margin-bottom: 10px;

    color: #999999;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}

body.contact-page .contact-form-head h3 {
    margin: 0 0 8px;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: 31px;
    letter-spacing: -.035em;
}

body.contact-page .contact-form-head p {
    margin: 0;

    color: #777777;

    font-size: 12px;
}


body.contact-page .contact-form {
    margin-top: 30px;
}


body.contact-page .contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 24px 20px;
}


body.contact-page .contact-field {
    display: flex;
    flex-direction: column;
}

body.contact-page .contact-field-full {
    grid-column: 1 / -1;
}


body.contact-page .contact-field label {
    margin-bottom: 9px;

    color: #333333;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
}


body.contact-page .contact-field input,
body.contact-page .contact-field select,
body.contact-page .contact-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d9d9d9;
    outline: none;

    background: #fafafa;

    color: #111111;

    font-family: "Inter", sans-serif;
    font-size: 12px;

    transition:
        border-color .2s ease,
        background .2s ease;
}


body.contact-page .contact-field input,
body.contact-page .contact-field select {
    height: 52px;

    padding: 0 15px;
}


body.contact-page .contact-field textarea {
    min-height: 145px;

    padding: 15px;

    resize: vertical;
}


body.contact-page .contact-field input:focus,
body.contact-page .contact-field select:focus,
body.contact-page .contact-field textarea:focus {
    border-color: #777777;

    background: #ffffff;
}


/* NOTICE */

body.contact-page .contact-form-notice {
    display: grid;
    grid-template-columns: 30px 1fr;

    gap: 12px;

    margin-top: 25px;
    padding: 16px;

    background: #f3f3f1;
}

body.contact-page .contact-form-notice > span {
    width: 24px;
    height: 24px;

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

    border: 1px solid #cccccc;
    border-radius: 50%;

    color: #555555;

    font-size: 11px;
}

body.contact-page .contact-form-notice p {
    margin: 0;

    color: #777777;

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


/* SUBMIT */

body.contact-page .contact-submit {
    width: 100%;
    min-height: 60px;

    margin-top: 20px;
    padding: 0 22px;

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

    border: 0;

    background: #090909;

    color: #ffffff;

    cursor: pointer;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;

    transition:
        background .25s ease,
        transform .25s ease;
}

body.contact-page .contact-submit:hover {
    background: #262626;

    transform: translateY(-2px);
}



/* =========================================================
   LOCAL SERVICE
========================================================= */

body.contact-page .contact-local {
    padding: 100px 0;

    background: #f5f5f3;
}


body.contact-page .contact-local-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;

    gap: 110px;
}


body.contact-page .contact-local-heading h2 {
    margin: 25px 0 0;

    color: #111111;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.04;
    letter-spacing: -.05em;
}

body.contact-page .contact-local-heading h2 em {
    display: block;

    color: #999999;

    font-style: normal;
    font-weight: 500;
}


body.contact-page .contact-local-content > p {
    max-width: 560px;

    margin: 0 0 28px;

    color: #676767;

    font-size: 14px;
    line-height: 1.8;
}


body.contact-page .contact-local-locations {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 30px;
}

body.contact-page .contact-local-locations span {
    padding: 10px 14px;

    border: 1px solid #d4d4d4;

    background: #ffffff;

    color: #333333;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 600;
}


body.contact-page .contact-local-link {
    display: inline-flex;
    align-items: center;
    gap: 28px;

    color: #111111;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
}



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

body.contact-page .contact-final {
    padding: 85px 0;

    background: #111111;
}


body.contact-page .contact-final-inner {
    display: grid;
    grid-template-columns: 1fr .65fr;

    gap: 100px;
    align-items: end;
}


body.contact-page .contact-final h2 {
    margin: 24px 0 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.04;
    letter-spacing: -.05em;
}

body.contact-page .contact-final h2 em {
    display: block;

    color: #858585;

    font-style: normal;
    font-weight: 500;
}


body.contact-page .contact-final-right p {
    max-width: 470px;

    margin: 0 0 25px;

    color: #8a8a8a;

    font-size: 13px;
    line-height: 1.8;
}



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

@media (max-width: 1100px) {

    body.contact-page .contact-intro-grid,
    body.contact-page .contact-details-head,
    body.contact-page .contact-request-grid,
    body.contact-page .contact-local-grid,
    body.contact-page .contact-final-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    body.contact-page .contact-request-info {
        position: static;
    }

    body.contact-page .contact-hero-content {
        width: 80%;
    }

}


@media (max-width: 850px) {

    body.contact-page .contact-methods {
        grid-template-columns: 1fr;
    }

    body.contact-page .contact-method {
        min-height: auto;

        border-right: 0;
        border-bottom: 1px solid #dedede;
    }

    body.contact-page .contact-method:last-child {
        border-bottom: 0;
    }

}


@media (max-width: 700px) {

    body.contact-page .contact-container {
        width: min(100% - 36px, 1380px);
    }


    body.contact-page .contact-hero {
        min-height: 610px;
    }

    body.contact-page .contact-hero-content {
        width: 100%;

        padding: 65px 0;
    }

    body.contact-page .contact-hero h1 {
        font-size: 48px;
    }


    body.contact-page .contact-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }


    body.contact-page .contact-hero-meta {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    body.contact-page .contact-intro,
    body.contact-page .contact-details,
    body.contact-page .contact-request,
    body.contact-page .contact-local {
        padding: 70px 0;
    }


    body.contact-page .contact-form-card {
        padding: 28px 22px;
    }


    body.contact-page .contact-form-grid {
        grid-template-columns: 1fr;
    }

    body.contact-page .contact-field-full {
        grid-column: auto;
    }


    body.contact-page .contact-final {
        padding: 65px 0;
    }

}

@media (max-width: 480px) {

    body.contact-page .contact-hero h1,
    body.contact-page .contact-intro-heading h2,
    body.contact-page .contact-details-head h2,
    body.contact-page .contact-request-info h2,
    body.contact-page .contact-local-heading h2,
    body.contact-page .contact-final h2 {
        font-size: 38px;
    }

}
/* =========================================================
   CONTACT HERO — BRIGHTER BACKGROUND IMAGE
========================================================= */

body.contact-page .contact-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.72) 0%,
            rgba(5, 5, 5, 0.48) 42%,
            rgba(5, 5, 5, 0.18) 72%,
            rgba(5, 5, 5, 0.08) 100%
        ),
        url("../../Contact.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* Old overlay ko remove rakho */
body.contact-page .contact-hero-overlay {
    display: none !important;
}


/* Old circles remove */
body.contact-page .contact-hero::before,
body.contact-page .contact-hero::after {
    display: none !important;
}
/* =========================================================
   HOME FAQ — SCREENSHOT MATCH FINAL
========================================================= */

body.home-page .home-faq-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #f7f7f5 0%,
            #f7f7f5 54%,
            #111212 54%,
            #111212 100%
        );
    padding: 105px 0 90px;
}


/* subtle background architecture */
body.home-page .home-faq-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 34%;
    height: 54%;
    background:
        linear-gradient(
            135deg,
            transparent 0 24%,
            rgba(0,0,0,.025) 24% 24.4%,
            transparent 24.4% 100%
        );
    pointer-events: none;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

body.home-page .home-faq-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 31% 69%;
    gap: 55px;

    align-items: start;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

body.home-page .home-faq-intro {
    padding-top: 8px;
}


body.home-page .home-faq-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 32px;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;

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

    color: #777773;
}


body.home-page .home-faq-eyebrow span {
    display: block;

    width: 42px;
    height: 1px;

    background: #8c8c88;
}


body.home-page .home-faq-intro h2 {
    margin: 0;

    max-width: 530px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 4.4vw, 72px);
    line-height: .98;
    font-weight: 700;

    letter-spacing: -.055em;

    color: #090909;
}


body.home-page .home-faq-intro h2 em {
    display: block;

    font-style: normal;
    font-weight: 500;

    color: #aaa9a6;
}


body.home-page .home-faq-intro > p {
    max-width: 500px;

    margin: 34px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.65;

    color: #5e5e5a;
}


/* CONTACT LINK — sits in dark portion */
body.home-page .home-faq-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;

    margin-top: 70px;

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;

    text-decoration: none;

    color: #ffffff;
}


body.home-page .home-faq-contact-link span {
    font-size: 25px;
    font-weight: 400;

    transform: translateY(-1px);

    transition: transform .25s ease;
}


body.home-page .home-faq-contact-link:hover span {
    transform: translate(4px, -4px);
}


/* =========================================================
   RIGHT FAQ AREA
========================================================= */

body.home-page .home-faq-content {
    min-width: 0;
}


body.home-page .home-faq-viewport {
    width: 100%;
    overflow: hidden;

    padding: 8px 2px 14px;
}


body.home-page .home-faq-track {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}


/* =========================================================
   FAQ CARD
   IMPORTANT:
   normal cards short
   active card taller
========================================================= */

body.home-page .home-faq-card {
    position: relative;

    flex: 0 0 calc((100% - 28px) / 3);

    height: 322px;
    min-height: 322px;

    display: flex;
    flex-direction: column;

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

    border: 1px solid #dededb;
    border-radius: 11px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.035);

    transition:
        height .35s ease,
        min-height .35s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* OPEN CARD */
body.home-page .home-faq-card.active {
    height: 420px;
    min-height: 420px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);
}


/* =========================================================
   CARD TOP
========================================================= */

body.home-page .home-faq-card-top {
    position: relative;

    display: grid;

    /* number | title | icon */
    grid-template-columns: 42px minmax(0, 1fr) 64px;

    column-gap: 14px;

    align-items: start;

    padding: 32px 25px 27px;

    min-height: 205px;

    box-sizing: border-box;
}


/* NUMBER */
body.home-page .home-faq-number {
    display: block;

    padding-top: 4px;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;

    color: #b0b0ad;
}


/* =========================================================
   TITLE AREA
   ICON CAN NEVER OVERLAP THIS
========================================================= */

body.home-page .home-faq-title-wrap {
    min-width: 0;

    padding-top: 0;
}


body.home-page .home-faq-title-wrap h3 {
    margin: 0 0 10px;

    font-family: "Manrope", sans-serif;

    font-size: 20px;
    line-height: 1.16;
    font-weight: 700;

    letter-spacing: -.035em;

    color: #101010;

    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}


body.home-page .home-faq-title-wrap p {
    margin: 0;

    max-width: 190px;

    font-family: "Inter", sans-serif;

    font-size: 15px;
    line-height: 1.42;
    font-weight: 400;

    color: #31312f;

    word-break: normal;
}


/* =========================================================
   ICON
========================================================= */

body.home-page .home-faq-icon {
    position: static;

    width: 60px;
    height: 60px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #f1f1ef;

    box-sizing: border-box;
}


body.home-page .home-faq-icon svg {
    width: 29px;
    height: 29px;

    fill: none;

    stroke: #111111;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ANSWER
========================================================= */

body.home-page .home-faq-answer {
    display: none;

    padding: 25px 25px 18px;

    border-top: 1px solid #ecece9;

    background: rgba(246,246,244,.82);

    box-sizing: border-box;
}


body.home-page .home-faq-card.active .home-faq-answer {
    display: block;
}


body.home-page .home-faq-answer > p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 14px;
    line-height: 1.55;

    color: #555551;
}


/* LICENSING NOTE */
body.home-page .home-faq-note {
    display: grid;

    grid-template-columns: 25px 1fr;

    gap: 12px;

    align-items: start;

    margin-top: 19px;
    padding-top: 18px;

    border-top: 1px solid #dededb;
}


body.home-page .home-faq-note > span {
    width: 20px;
    height: 20px;

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

    border: 1px solid #888884;
    border-radius: 50%;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    color: #6f6f6b;
}


body.home-page .home-faq-note em {
    font-family: "Inter", sans-serif;

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

    font-style: italic;

    color: #858581;
}


/* =========================================================
   READ ANSWER BOTTOM
========================================================= */

body.home-page .home-faq-toggle {
    width: 100%;

    min-height: 72px;

    margin-top: auto;
    padding: 0 24px;

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

    border: 0;
    border-top: 1px solid #dededb;

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

    cursor: pointer;

    box-sizing: border-box;
}


body.home-page .home-faq-toggle > span {
    font-family: "Manrope", sans-serif;

    font-size: 14px;
    line-height: 1;
    font-weight: 700;

    color: #151515;
}


/* PLUS CIRCLE */
body.home-page .home-faq-toggle > b {
    width: 42px;
    height: 42px;

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

    flex: 0 0 42px;

    border: 1px solid #888884;
    border-radius: 50%;

    font-family: "Inter", sans-serif;

    font-size: 26px;
    line-height: 1;
    font-weight: 400;

    color: #111111;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .3s ease;
}


/* ACTIVE MINUS */
body.home-page .home-faq-card.active .home-faq-toggle > b {
    background: #090909;
    border-color: #090909;

    color: #ffffff;

    transform: rotate(180deg);
}


/* =========================================================
   CONTROLS
========================================================= */

body.home-page .home-faq-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 27px;
    padding: 0 18px 0 10px;
}


/* DOTS */
body.home-page .home-faq-dots {
    display: flex;
    align-items: center;

    gap: 9px;
}


body.home-page .home-faq-dot {
    width: 8px;
    height: 8px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: #5b5b59;

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}


body.home-page .home-faq-dot.active {
    width: 25px;

    border-radius: 20px;

    background: #ffffff;
}


/* ARROWS */
body.home-page .home-faq-arrows {
    display: flex;

    gap: 12px;
}


body.home-page .home-faq-arrow {
    width: 54px;
    height: 54px;

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

    padding: 0;

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

    background: transparent;

    font-size: 22px;

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

    cursor: pointer;

    transition:
        border-color .25s ease,
        color .25s ease,
        background .25s ease;
}


body.home-page .home-faq-arrow:hover {
    border-color: #ffffff;

    color: #ffffff;
}


body.home-page .home-faq-arrow:not(:disabled):last-child {
    border-color: rgba(255,255,255,.8);

    color: #ffffff;
}


/* =========================================================
   BACKGROUND DECORATIVE LINES
========================================================= */

body.home-page .home-faq-bg-line {
    position: absolute;

    left: -120px;
    bottom: -170px;

    width: 430px;
    height: 430px;

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

    pointer-events: none;
}


body.home-page .home-faq-bg-line-two {
    width: 570px;
    height: 570px;

    left: -235px;
    bottom: -290px;
}


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

@media (max-width: 1200px) {

    body.home-page .home-faq-layout {
        grid-template-columns: 34% 66%;
        gap: 35px;
    }


    body.home-page .home-faq-card {
        flex-basis: calc((100% - 14px) / 2);
    }

}


@media (max-width: 900px) {

    body.home-page .home-faq-section {
        background:
            linear-gradient(
                180deg,
                #f7f7f5 0%,
                #f7f7f5 42%,
                #111212 42%,
                #111212 100%
            );

        padding: 80px 0 70px;
    }


    body.home-page .home-faq-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    body.home-page .home-faq-intro h2 {
        max-width: 650px;
    }


    body.home-page .home-faq-contact-link {
        margin-top: 45px;

        color: #111111;
    }


    body.home-page .home-faq-card {
        flex-basis: calc((100% - 14px) / 2);
    }

}


@media (max-width: 650px) {

    body.home-page .home-faq-section {
        padding: 65px 0 55px;
    }


    body.home-page .home-faq-intro h2 {
        font-size: 45px;
    }


    body.home-page .home-faq-intro > p {
        font-size: 15px;
    }


    body.home-page .home-faq-card {
        flex: 0 0 88%;

        height: 310px;
        min-height: 310px;
    }


    body.home-page .home-faq-card.active {
        height: 410px;
        min-height: 410px;
    }


    body.home-page .home-faq-card-top {
        grid-template-columns: 35px minmax(0, 1fr) 52px;

        gap: 10px;

        padding: 25px 18px;

        min-height: 190px;
    }


    body.home-page .home-faq-icon {
        width: 50px;
        height: 50px;
    }


    body.home-page .home-faq-icon svg {
        width: 24px;
        height: 24px;
    }


    body.home-page .home-faq-title-wrap h3 {
        font-size: 19px;
    }


    body.home-page .home-faq-controls {
        padding-right: 0;
    }

}

/* =========================================================
   CONTACT PAGE — GET IN TOUCH
   PREMIUM FINAL STYLING
========================================================= */

body.contact-page .contact-connect-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0 115px;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(0, 0, 0, 0.035) 0,
            rgba(0, 0, 0, 0) 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f8f7 48%,
            #f1f1ef 100%
        );
}


/* subtle decorative circles */

body.contact-page .contact-connect-section::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(10, 10, 10, 0.055);
    border-radius: 50%;
    right: -170px;
    top: -230px;
    pointer-events: none;
}

body.contact-page .contact-connect-section::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(10, 10, 10, 0.04);
    border-radius: 50%;
    right: -100px;
    top: -155px;
    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

body.contact-page .contact-connect-section .contact-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   TOP AREA
========================================================= */

body.contact-page .contact-connect-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 90px;
    align-items: end;

    padding-bottom: 58px;
    margin-bottom: 0;
}


/* =========================================================
   LEFT HEADING
========================================================= */

body.contact-page .contact-connect-heading {
    max-width: 760px;
}

body.contact-page .contact-connect-heading .contact-eyebrow {
    margin-bottom: 27px;
}

body.contact-page .contact-connect-heading h2 {
    margin: 0;
    max-width: 760px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(44px, 4.3vw, 70px);
    line-height: 0.99;
    letter-spacing: -0.055em;
    font-weight: 700;

    color: #0a0a0a;
}

body.contact-page .contact-connect-heading h2 em {
    display: block;
    font-style: normal;
    font-weight: 500;
    color: #9a9a98;
}

body.contact-page .contact-connect-heading > p {
    max-width: 650px;
    margin: 30px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #666664;
}


/* =========================================================
   RIGHT — HELP BOX
========================================================= */

body.contact-page .contact-help-box {
    position: relative;

    padding: 10px 0 8px 55px;
    border-left: 1px solid #d3d3d0;

    background: transparent;
}

body.contact-page .contact-help-label {
    display: block;
    margin-bottom: 13px;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #90908e;
}

body.contact-page .contact-help-box h3 {
    margin: 0;

    max-width: 430px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(27px, 2.2vw, 37px);
    line-height: 1.13;
    letter-spacing: -0.035em;
    font-weight: 700;

    color: #111111;
}

body.contact-page .contact-help-box p {
    max-width: 520px;
    margin: 20px 0 27px;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.7;

    color: #6c6c69;
}


/* HELP BUTTON */

body.contact-page .contact-help-button {
    width: fit-content;
    min-width: 250px;
    height: 58px;

    padding: 0 23px 0 26px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;

    text-decoration: none;

    background: #0a0a0a;
    color: #ffffff;

    border: 1px solid #0a0a0a;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

body.contact-page .contact-help-button:hover {
    background: #222222;
    transform: translateY(-2px);
}

body.contact-page .contact-help-arrow {
    font-size: 18px;
    font-weight: 400;
}


/* =========================================================
   CONTACT CARDS GRID
========================================================= */

body.contact-page .contact-connect-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

body.contact-page .contact-connect-card {
    position: relative;

    min-height: 335px;

    display: flex;
    flex-direction: column;

    padding: 32px 34px 0;

    background: rgba(255, 255, 255, 0.9);

    border: 1px solid #ddddda;
    border-radius: 3px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.035);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


/* top accent */

body.contact-page .contact-connect-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #111111;

    transition: width 0.4s ease;
}

body.contact-page .contact-connect-card:hover::before {
    width: 100%;
}

body.contact-page .contact-connect-card:hover {
    transform: translateY(-7px);

    border-color: #c9c9c5;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.09);

    background: #ffffff;
}


/* =========================================================
   CARD TOP
========================================================= */

body.contact-page .contact-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 30px;
}

body.contact-page .contact-card-number {
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.08em;

    color: #a0a09d;
}


/* =========================================================
   ICON
========================================================= */

body.contact-page .contact-card-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    border-radius: 50%;

    background: #f3f3f1;
    border: 1px solid #e4e4e1;

    color: #111111;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

body.contact-page .contact-card-icon svg {
    width: 24px;
    height: 24px;
}

body.contact-page .contact-connect-card:hover .contact-card-icon {
    background: #111111;
    color: #ffffff;

    transform: rotate(-5deg);
}


/* =========================================================
   CARD CONTENT
========================================================= */

body.contact-page .contact-card-content {
    padding-right: 15px;
}

body.contact-page .contact-card-content h3 {
    margin: 0 0 12px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(22px, 1.7vw, 29px);
    line-height: 1.15;

    letter-spacing: -0.035em;
    font-weight: 700;

    color: #111111;
}

body.contact-page .contact-card-content p {
    margin: 0;

    max-width: 390px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.65;

    color: #70706d;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

body.contact-page .contact-card-bottom {
    margin-top: auto;

    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-top: 1px solid #e0e0dd;
}

body.contact-page .contact-card-label {
    display: block;

    margin-bottom: 6px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;

    color: #999996;
}

body.contact-page .contact-card-bottom strong,
body.contact-page .contact-card-bottom a:not(.contact-card-action) {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    color: #111111;
    text-decoration: none;
}


/* =========================================================
   CARD ARROW
========================================================= */

body.contact-page .contact-card-action {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 50%;
    border: 1px solid #cececa;

    color: #111111;
    text-decoration: none;

    font-size: 18px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

body.contact-page .contact-connect-card:hover .contact-card-action {
    background: #111111;
    color: #ffffff;
    border-color: #111111;

    transform: translateX(3px);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    body.contact-page .contact-connect-section {
        padding: 85px 0 90px;
    }

    body.contact-page .contact-connect-top {
        grid-template-columns: 1fr 0.8fr;
        gap: 55px;
    }

    body.contact-page .contact-help-box {
        padding-left: 35px;
    }

    body.contact-page .contact-connect-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    body.contact-page .contact-connect-card:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

    body.contact-page .contact-connect-section {
        padding: 70px 0 75px;
    }

    body.contact-page .contact-connect-top {
        grid-template-columns: 1fr;
        gap: 45px;

        padding-bottom: 45px;
    }

    body.contact-page .contact-connect-heading h2 {
        font-size: clamp(39px, 11vw, 55px);
    }

    body.contact-page .contact-connect-heading > p {
        margin-top: 22px;
        font-size: 15px;
    }

    body.contact-page .contact-help-box {
        padding: 28px 0 0;
        border-left: 0;
        border-top: 1px solid #d5d5d2;
    }

    body.contact-page .contact-help-button {
        width: 100%;
    }

    body.contact-page .contact-connect-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.contact-page .contact-connect-card,
    body.contact-page .contact-connect-card:last-child {
        grid-column: auto;

        min-height: 315px;

        padding: 28px 27px 0;
    }

    body.contact-page .contact-card-top {
        margin-bottom: 25px;
    }

    body.contact-page .contact-card-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    body.contact-page .contact-card-content h3 {
        font-size: 23px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    body.contact-page .contact-connect-section {
        padding: 60px 0 65px;
    }

    body.contact-page .contact-connect-heading h2 {
        font-size: 38px;
    }

    body.contact-page .contact-help-box h3 {
        font-size: 27px;
    }

    body.contact-page .contact-connect-card {
        min-height: 300px;
        padding: 25px 23px 0;
    }

    body.contact-page .contact-card-bottom {
        min-height: 80px;
    }

}
/* =========================================================
   FAQ — OPEN ANSWER HEIGHT FIX
========================================================= */

/* Normal card */
.home-faq-card {
    height: 322px;
    min-height: 322px;
}

/* Open card — content ke according height badhe */
.home-faq-card.active {
    height: auto !important;
    min-height: 470px !important;
}

/* Answer ko proper space */
.home-faq-card.active .home-faq-answer {
    display: block;
    flex: 0 0 auto;
}

/* Close Answer bar hamesha proper bottom par */
.home-faq-card.active .home-faq-toggle {
    position: relative;
    flex-shrink: 0;
    margin-top: auto;

    min-height: 72px;

    background: #ffffff;

    border-top: 1px solid #dededb;

    z-index: 5;
}

/* Text vertically centered */
.home-faq-card.active .home-faq-toggle > span {
    display: flex;
    align-items: center;

    min-height: 72px;
}

/* Minus button centered */
.home-faq-card.active .home-faq-toggle > b {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

/* Answer text */
.home-faq-card.active .home-faq-answer > p {
    margin: 0;

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .home-faq-card.active {
        height: auto !important;
        min-height: 470px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .home-faq-card.active {
        height: auto !important;
        min-height: 460px !important;
    }

}
/* =========================================================
   JSB — SERVICES MEGA MENU
========================================================= */

.nav-services-mega {
    position: static;
}


/* TRIGGER */

.nav-services-trigger {
    display: flex !important;
    align-items: center;
    gap: 9px;
}

.nav-services-chevron {
    width: 8px;
    height: 8px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform .25s ease;
}

.nav-services-mega:hover .nav-services-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}


/* =========================================================
   DROPDOWN
========================================================= */

.services-mega-menu {
    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    background: #070707;

    border-top: 1px solid #202020;
    border-bottom: 1px solid #202020;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    z-index: 9999;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}


/* OPEN */

.nav-services-mega:hover .services-mega-menu,
.nav-services-mega:focus-within .services-mega-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   INNER GRID
========================================================= */

.services-mega-inner {
    width: min(1450px, calc(100% - 70px));

    margin: 0 auto;

    padding: 55px 0 48px;

    display: grid;

    grid-template-columns:
        minmax(270px, .8fr)
        minmax(430px, 1.55fr)
        minmax(290px, .9fr);

    gap: 58px;

    min-height: 530px;

    box-sizing: border-box;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.services-mega-label {
    margin-bottom: 38px;

    font-family: "Manrope", sans-serif;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #777777;
}


/* =========================================================
   LEFT LIST
========================================================= */

.services-mega-list {
    padding-right: 45px;

    border-right: 1px solid #2a2a2a;
}

.services-mega-item {
    position: relative;

    width: fit-content;

    display: block;

    margin: 0 0 19px;

    font-family: "Manrope", sans-serif;

    font-size: 17px;
    line-height: 1.3;

    font-weight: 500;

    text-decoration: none;

    color: #777777;

    transition:
        color .22s ease,
        transform .22s ease;
}


/* ACTIVE + HOVER */

.services-mega-item:hover,
.services-mega-item.active {
    color: #ffffff;

    transform: translateX(5px);
}

.services-mega-item::before {
    content: "";

    position: absolute;

    left: -17px;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ffffff;

    opacity: 0;

    transform: translateY(-50%);

    transition: opacity .2s ease;
}

.services-mega-item.active::before {
    opacity: 1;
}


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

.services-mega-details {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding-right: 15px;
}


/* TITLE */

.services-mega-title {
    width: fit-content;

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

    gap: 17px;

    margin-bottom: 22px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -.035em;

    color: #ffffff;

    text-decoration: none;
}

.services-mega-title b {
    font-size: 30px;

    font-weight: 300;

    transition: transform .25s ease;
}

.services-mega-title:hover b {
    transform: translateX(7px);
}


/* DESCRIPTION */

.services-mega-details > p {
    max-width: 600px;

    min-height: 135px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 17px;
    line-height: 1.58;

    color: #898989;
}


/* =========================================================
   TAGS
========================================================= */

.services-mega-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: auto;
    padding-top: 35px;
}

.services-mega-tags span {
    display: inline-flex;

    align-items: center;

    min-height: 37px;

    padding: 0 17px;

    border: 1px solid #2b2b2b;
    border-radius: 50px;

    background: #181818;

    font-family: "Inter", sans-serif;

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

    color: #eeeeee;
}


/* =========================================================
   LEARN MORE
========================================================= */

.services-mega-learn {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    padding-bottom: 6px;

    border-bottom: 1px solid #444444;

    font-family: "Manrope", sans-serif;

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

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    text-decoration: none;

    color: #ffffff;
}

.services-mega-learn span {
    font-size: 17px;

    transition: transform .25s ease;
}

.services-mega-learn:hover span {
    transform: translate(4px, -4px);
}


/* =========================================================
   RIGHT SECURITY PANEL
========================================================= */

.services-mega-visual {
    position: relative;

    min-height: 420px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    overflow: hidden;

    border: 1px solid #272727;
    border-radius: 5px;

    background:
        radial-gradient(
            circle at 70% 25%,
            #292929 0%,
            #161616 31%,
            #0c0c0c 68%
        );

    box-sizing: border-box;
}


/* subtle grid */

.services-mega-visual::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    pointer-events: none;
}


.services-mega-visual-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .13em;

    color: #7d7d7d;
}


/* SHIELD */

.services-mega-symbol {
    position: relative;

    z-index: 2;

    flex: 1;

    display: flex;

    align-items: center;
    justify-content: center;
}

.services-mega-symbol svg {
    width: 125px;
    height: 145px;

    fill: none;

    stroke: rgba(255,255,255,.78);

    stroke-width: 1.4;

    filter:
        drop-shadow(
            0 10px 25px rgba(0,0,0,.4)
        );

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.services-mega-visual:hover
.services-mega-symbol svg {
    transform: scale(1.05);
}


/* BOTTOM */

.services-mega-visual-bottom {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.services-mega-visual-bottom span {
    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .15em;

    color: #696969;
}

.services-mega-visual-bottom strong {
    font-family: "Manrope", sans-serif;

    font-size: 22px;

    line-height: 1.1;

    font-weight: 600;

    color: #ffffff;
}


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

@media (max-width: 1150px) {

    .services-mega-inner {
        width: calc(100% - 40px);

        grid-template-columns:
            250px
            minmax(0, 1fr);

        gap: 40px;
    }

    .services-mega-visual {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .services-mega-menu {
        position: static;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        opacity: 1;
        visibility: visible;

        transform: none;

        pointer-events: auto;

        border: 0;

        transition: max-height .4s ease;
    }

    .nav-services-mega:hover
    .services-mega-menu,
    .nav-services-mega:focus-within
    .services-mega-menu {
        max-height: 900px;
    }

    .services-mega-inner {
        width: 100%;

        min-height: 0;

        padding: 25px 0;

        display: block;
    }

    .services-mega-list {
        padding: 0;

        border: 0;
    }

    .services-mega-label {
        margin-bottom: 20px;
    }

    .services-mega-item {
        width: 100%;

        margin-bottom: 0;

        padding: 12px 0;

        font-size: 15px;

        border-bottom: 1px solid #222222;
    }

    .services-mega-details,
    .services-mega-visual {
        display: none;
    }
}
/* =========================================================
   SERVICES NAV MEGA MENU — COMPACT FINAL
========================================================= */

.nav-services-mega {
    position: static;
}

.nav-services-trigger {
    display: flex !important;
    align-items: center;
    gap: 8px;
}


/* arrow */

.nav-services-chevron {
    width: 7px;
    height: 7px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform .25s ease;
}

.nav-services-mega:hover .nav-services-chevron {
    transform: rotate(225deg);
}


/* =========================================================
   DROPDOWN BOX
========================================================= */

.services-mega-menu {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    width: min(1120px, calc(100vw - 60px));

    background: #080808;

    border: 1px solid #282828;
    border-radius: 12px;

    box-shadow:
        0 25px 65px rgba(0, 0, 0, .45);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -8px);

    z-index: 9999;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}


/* OPEN */

.nav-services-mega:hover .services-mega-menu,
.nav-services-mega:focus-within .services-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0);
}


/* =========================================================
   INNER
========================================================= */

.services-mega-inner {
    width: 100%;

    display: grid;

    grid-template-columns:
        230px
        minmax(340px, 1fr)
        270px;

    gap: 34px;

    padding: 32px;

    box-sizing: border-box;
}


/* =========================================================
   LABEL
========================================================= */

.services-mega-label {
    margin-bottom: 24px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: .16em;

    color: #747474;

    text-transform: uppercase;
}


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

.services-mega-list {
    padding-right: 25px;

    border-right: 1px solid #292929;
}


.services-mega-item {
    position: relative;

    display: block;

    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    line-height: 1.35;

    font-weight: 500;

    color: #777777;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.services-mega-item:hover,
.services-mega-item.active {
    color: #ffffff;

    transform: translateX(4px);
}


.services-mega-item::before {
    content: "";

    position: absolute;

    left: -12px;
    top: 7px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ffffff;

    opacity: 0;

    transition: opacity .2s ease;
}


.services-mega-item.active::before {
    opacity: 1;
}


/* =========================================================
   MIDDLE
========================================================= */

.services-mega-details {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.services-mega-title {
    width: fit-content;

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

    gap: 13px;

    margin-bottom: 16px;

    font-family: "Manrope", sans-serif;

    font-size: 24px;
    line-height: 1.15;

    font-weight: 650;
    letter-spacing: -.035em;

    color: #ffffff;

    text-decoration: none;
}


.services-mega-title b {
    font-size: 25px;
    font-weight: 300;

    transition: transform .25s ease;
}


.services-mega-title:hover b {
    transform: translateX(5px);
}


/* description */

.services-mega-details > p {
    max-width: 450px;

    min-height: 110px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 13px;
    line-height: 1.65;

    color: #8c8c8c;
}


/* =========================================================
   TAGS
========================================================= */

.services-mega-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;
    padding-top: 18px;
}


.services-mega-tags span {
    min-height: 30px;

    padding: 0 12px;

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

    background: #181818;

    border: 1px solid #2c2c2c;
    border-radius: 30px;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    color: #e7e7e7;
}


/* =========================================================
   LEARN MORE
========================================================= */

.services-mega-learn {
    width: fit-content;

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

    gap: 9px;

    margin-top: 20px;
    padding-bottom: 5px;

    border-bottom: 1px solid #444444;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .1em;

    text-transform: uppercase;
    text-decoration: none;

    color: #ffffff;
}


.services-mega-learn span {
    font-size: 15px;

    transition: transform .2s ease;
}


.services-mega-learn:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   RIGHT SERVICE IMAGE
========================================================= */

.services-mega-visual {
    position: relative;

    width: 270px;
    height: 320px;

    align-self: center;

    overflow: hidden;

    padding: 0;

    background: #151515;

    border: 1px solid #292929;
    border-radius: 9px;
}


/* remove old shield */

.services-mega-symbol {
    display: none !important;
}

.services-mega-visual::before {
    display: none !important;
}


/* image */

.services-mega-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    opacity: 1;

    transition:
        opacity .18s ease,
        transform .4s ease;
}


.services-mega-visual:hover .services-mega-image {
    transform: scale(1.035);
}


/* overlay */

.services-mega-image-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.22) 0%,
            rgba(0,0,0,.02) 42%,
            rgba(0,0,0,.78) 100%
        );

    pointer-events: none;
}


/* number */

.services-mega-image-number {
    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 3;

    width: 44px;
    height: 38px;

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

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 9px;

    background: rgba(10,10,10,.72);

    backdrop-filter: blur(7px);

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .08em;

    color: #ffffff;
}


/* bottom text */

.services-mega-image-info {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    z-index: 3;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.services-mega-image-info span {
    font-family: "Manrope", sans-serif;

    font-size: 8px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .15em;

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


.services-mega-image-info strong {
    font-family: "Manrope", sans-serif;

    font-size: 18px;
    line-height: 1.15;

    font-weight: 650;

    color: #ffffff;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1180px) {

    .services-mega-menu {
        width: min(1000px, calc(100vw - 40px));
    }

    .services-mega-inner {
        grid-template-columns:
            215px
            minmax(300px, 1fr)
            235px;

        gap: 25px;

        padding: 27px;
    }

    .services-mega-visual {
        width: 235px;
        height: 300px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .services-mega-inner {
        grid-template-columns:
            215px
            minmax(0, 1fr);
    }

    .services-mega-visual {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .services-mega-menu {
        position: static;

        width: 100%;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        transform: none;
    }


    .nav-services-mega:hover .services-mega-menu,
    .nav-services-mega:focus-within .services-mega-menu {
        transform: none;
    }


    .services-mega-inner {
        display: block;

        padding: 20px 0;
    }


    .services-mega-list {
        padding: 0;

        border-right: 0;
    }


    .services-mega-item {
        width: 100%;

        margin: 0;

        padding: 11px 0;

        border-bottom: 1px solid #222222;
    }


    .services-mega-details,
    .services-mega-visual {
        display: none;
    }

}
/* =========================================================
   SERVICES MEGA MENU — CLICK OPEN FIX
========================================================= */

/* IMPORTANT:
   menu hover se nahi, .mega-open class se open hoga
*/

.nav-services-mega {
    position: static;
}


/* SERVICES BUTTON */

.nav-services-trigger {
    appearance: none;
    -webkit-appearance: none;

    border: 0;
    outline: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;

    display: flex !important;
    align-items: center;
    gap: 8px;
}


/* CHEVRON */

.nav-services-chevron {
    width: 7px;
    height: 7px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform .25s ease;
}


/* =========================================================
   CLOSED
========================================================= */

.services-mega-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 50%;

    width: min(1120px, calc(100vw - 60px));

    background: #080808;

    border: 1px solid #282828;
    border-radius: 12px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.48);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -8px);

    z-index: 99999;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}


/* =========================================================
   IMPORTANT — REMOVE OLD HOVER OPEN BEHAVIOUR
========================================================= */

.nav-services-mega:hover .services-mega-menu,
.nav-services-mega:focus-within .services-mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -8px);
}


/* =========================================================
   CLICKED / OPEN
========================================================= */

.nav-services-mega.mega-open .services-mega-menu,
.nav-services-mega.mega-open:hover .services-mega-menu,
.nav-services-mega.mega-open:focus-within .services-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0);
}


/* rotate arrow when open */

.nav-services-mega.mega-open .nav-services-chevron {
    transform: rotate(225deg);
}


/* =========================================================
   INNER LAYOUT
========================================================= */

.services-mega-inner {
    width: 100%;

    display: grid;

    grid-template-columns:
        230px
        minmax(340px, 1fr)
        270px;

    gap: 34px;

    padding: 32px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT
========================================================= */

.services-mega-list {
    padding-right: 25px;

    border-right: 1px solid #292929;
}


.services-mega-label {
    margin-bottom: 24px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #777777;
}


.services-mega-item {
    position: relative;

    display: block;

    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    line-height: 1.35;

    font-weight: 500;

    color: #777777;

    text-decoration: none;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.services-mega-item:hover,
.services-mega-item.active {
    color: #ffffff;

    transform: translateX(4px);
}


.services-mega-item::before {
    content: "";

    position: absolute;

    left: -12px;
    top: 7px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ffffff;

    opacity: 0;

    transition: opacity .2s ease;
}


.services-mega-item:hover::before,
.services-mega-item.active::before {
    opacity: 1;
}


/* =========================================================
   MIDDLE
========================================================= */

.services-mega-details {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.services-mega-title {
    width: fit-content;

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

    gap: 13px;

    margin-bottom: 16px;

    font-family: "Manrope", sans-serif;

    font-size: 24px;
    line-height: 1.15;

    font-weight: 650;

    letter-spacing: -.035em;

    color: #ffffff;

    text-decoration: none;
}


.services-mega-title b {
    font-size: 25px;
    font-weight: 300;

    transition: transform .2s ease;
}


.services-mega-title:hover b {
    transform: translateX(5px);
}


.services-mega-details > p {
    max-width: 455px;

    min-height: 110px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 13px;
    line-height: 1.65;

    color: #8c8c8c;
}


/* TAGS */

.services-mega-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;
    padding-top: 18px;
}


.services-mega-tags span {
    min-height: 30px;

    padding: 0 12px;

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

    border: 1px solid #2c2c2c;
    border-radius: 30px;

    background: #181818;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    color: #e7e7e7;
}


/* LEARN MORE */

.services-mega-learn {
    width: fit-content;

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

    gap: 9px;

    margin-top: 20px;
    padding-bottom: 5px;

    border-bottom: 1px solid #444444;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .1em;

    text-transform: uppercase;
    text-decoration: none;

    color: #ffffff;
}


/* =========================================================
   IMAGE
========================================================= */

.services-mega-visual {
    position: relative;

    width: 270px;
    height: 320px;

    align-self: center;

    overflow: hidden;

    border: 1px solid #292929;
    border-radius: 9px;

    background: #151515;
}


.services-mega-image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 1;

    transition:
        opacity .15s ease,
        transform .4s ease;
}


.services-mega-visual:hover .services-mega-image {
    transform: scale(1.035);
}


.services-mega-image-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.03) 42%,
            rgba(0,0,0,.82) 100%
        );
}


.services-mega-image-number {
    position: absolute;

    z-index: 3;

    top: 16px;
    left: 16px;

    width: 44px;
    height: 38px;

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

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 9px;

    background: rgba(8,8,8,.72);

    font-family: "Manrope", sans-serif;

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

    color: #ffffff;
}


.services-mega-image-info {
    position: absolute;

    z-index: 3;

    left: 18px;
    right: 18px;
    bottom: 18px;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.services-mega-image-info span {
    font-family: "Manrope", sans-serif;

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

    letter-spacing: .15em;

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


.services-mega-image-info strong {
    font-family: "Manrope", sans-serif;

    font-size: 18px;
    line-height: 1.15;

    font-weight: 650;

    color: #ffffff;
}


/* HEADER MUST ALLOW DROPDOWN */

.site-header,
.header-inner,
.navigation {
    overflow: visible !important;
}


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

@media (max-width: 1180px) {

    .services-mega-menu {
        width: min(1000px, calc(100vw - 40px));
    }

    .services-mega-inner {
        grid-template-columns:
            215px
            minmax(300px, 1fr)
            235px;

        gap: 25px;

        padding: 27px;
    }

    .services-mega-visual {
        width: 235px;
        height: 300px;
    }
}
/* =========================================================
   SERVICES MEGA MENU — FINAL
========================================================= */

.nav-services-mega {
    position: static;
}


/* SERVICES BUTTON */

.nav-services-trigger {
    appearance: none;
    -webkit-appearance: none;

    display: flex !important;
    align-items: center;
    gap: 8px;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: inherit;
    font: inherit;

    cursor: pointer;
}


/* ARROW */

.nav-services-chevron {
    width: 7px;
    height: 7px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform .25s ease;
}

.nav-services-mega.mega-open .nav-services-chevron {
    transform: rotate(225deg);
}


/* =========================================================
   DROPDOWN
========================================================= */

.services-mega-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 50%;

    width: min(1120px, calc(100vw - 60px));

    background: #080808;

    border: 1px solid #292929;
    border-radius: 12px;

    box-shadow: 0 25px 70px rgba(0,0,0,.48);

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -8px);

    z-index: 99999;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}


/* CLICK KE BAAD OPEN */

.nav-services-mega.mega-open > .services-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0);
}


/* =========================================================
   INNER
========================================================= */

.services-mega-inner {
    width: 100%;
    min-height: 405px;

    display: grid;

    grid-template-columns:
        230px
        minmax(340px, 1fr)
        270px;

    gap: 34px;

    padding: 32px;

    box-sizing: border-box;
}


/* =========================================================
   LABEL
========================================================= */

.services-mega-label {
    margin-bottom: 24px;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .16em;

    color: #777;

    text-transform: uppercase;
}


/* =========================================================
   LEFT
========================================================= */

.services-mega-list {
    padding-right: 25px;

    border-right: 1px solid #292929;
}


.services-mega-item {
    position: relative;

    display: block;

    margin-bottom: 13px;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;

    color: #777;

    text-decoration: none;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.services-mega-item:hover,
.services-mega-item.active {
    color: #fff;

    transform: translateX(4px);
}


.services-mega-item::before {
    content: "";

    position: absolute;

    left: -12px;
    top: 7px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #fff;

    opacity: 0;
}


.services-mega-item:hover::before,
.services-mega-item.active::before {
    opacity: 1;
}


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

.services-mega-details {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.services-mega-title {
    width: fit-content;

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

    gap: 13px;

    margin-bottom: 16px;

    font-family: "Manrope", sans-serif;

    font-size: 24px;
    line-height: 1.15;
    font-weight: 650;

    letter-spacing: -.035em;

    color: #fff;

    text-decoration: none;
}


.services-mega-title b {
    font-size: 25px;
    font-weight: 300;

    transition: transform .2s ease;
}


.services-mega-title:hover b {
    transform: translateX(5px);
}


.services-mega-details > p {
    max-width: 455px;

    min-height: 110px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 13px;
    line-height: 1.65;

    color: #8c8c8c;
}


/* TAGS */

.services-mega-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;
    padding-top: 18px;
}


.services-mega-tags span {
    min-height: 30px;

    padding: 0 12px;

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

    border: 1px solid #2c2c2c;
    border-radius: 30px;

    background: #181818;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    color: #e7e7e7;
}


/* LEARN MORE */

.services-mega-learn {
    width: fit-content;

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

    gap: 9px;

    margin-top: 20px;
    padding-bottom: 5px;

    border-bottom: 1px solid #444;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .1em;

    text-transform: uppercase;
    text-decoration: none;

    color: #fff;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.services-mega-visual {
    position: relative;

    width: 270px;
    height: 320px;

    align-self: center;

    overflow: hidden;

    border: 1px solid #292929;
    border-radius: 9px;

    background: #151515;
}


.services-mega-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    opacity: 1;

    transition:
        opacity .15s ease,
        transform .4s ease;
}


.services-mega-visual:hover .services-mega-image {
    transform: scale(1.035);
}


.services-mega-image-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.02) 42%,
            rgba(0,0,0,.82) 100%
        );

    pointer-events: none;
}


/* NUMBER */

.services-mega-image-number {
    position: absolute;

    z-index: 3;

    top: 16px;
    left: 16px;

    width: 44px;
    height: 38px;

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

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 9px;

    background: rgba(8,8,8,.72);

    font-family: "Manrope", sans-serif;

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

    color: #fff;
}


/* IMAGE BOTTOM */

.services-mega-image-info {
    position: absolute;

    z-index: 3;

    left: 18px;
    right: 18px;
    bottom: 18px;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.services-mega-image-info span {
    font-family: "Manrope", sans-serif;

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

    letter-spacing: .15em;

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


.services-mega-image-info strong {
    font-family: "Manrope", sans-serif;

    font-size: 18px;
    line-height: 1.15;

    font-weight: 650;

    color: #fff;
}


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

.site-header {
    position: relative;
    z-index: 9999;

    overflow: visible !important;
}

.header-inner,
.navigation {
    overflow: visible !important;
}


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

@media (max-width: 1180px) {

    .services-mega-menu {
        width: min(1000px, calc(100vw - 40px));
    }

    .services-mega-inner {
        grid-template-columns:
            215px
            minmax(300px, 1fr)
            235px;

        gap: 25px;

        padding: 27px;
    }

    .services-mega-visual {
        width: 235px;
        height: 300px;
    }
}


@media (max-width: 900px) {

    .services-mega-inner {
        grid-template-columns: 210px 1fr;
    }

    .services-mega-visual {
        display: none;
    }
}
body.services-page-body .services-card {
    scroll-margin-top: 120px;
}
/* =========================================================
   FIX — SERVICES NAV TEXT ON ALL PAGES
========================================================= */

/* Services button ko normal navbar links jaisa dikhaye */
.navigation .nav-services-trigger,
.navigation button.nav-services-trigger {
    color: #b8b8b8 !important;
    opacity: 1 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: inherit !important;
    font-weight: 600 !important;

    background: transparent !important;
    border: 0 !important;

    cursor: pointer !important;
}


/* Hover */
.navigation .nav-services-trigger:hover,
.navigation button.nav-services-trigger:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* Dropdown open ho to Services white */
.navigation .nav-services-mega.mega-open .nav-services-trigger {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* Arrow bhi text ke same color mein */
.navigation .nav-services-chevron {
    border-color: currentColor !important;
    opacity: 1 !important;
}


/* Active Services page */
body.services-page-body .navigation .nav-services-trigger {
    color: #ffffff !important;
}


/* Active underline — Services page */
body.services-page-body .nav-services-trigger::after {
    opacity: 1 !important;
}
/* =========================================================
   FINAL NAV SERVICES FIX
   HOME / ABOUT / SERVICES / INDUSTRIES /
   SERVICE AREAS / CAREERS / CONTACT
========================================================= */


/* ---------------------------------------------------------
   1. SERVICES BUTTON RESET
--------------------------------------------------------- */

.navigation .nav-services-mega .nav-services-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    color: #a7a7a7 !important;
    -webkit-text-fill-color: #a7a7a7 !important;

    opacity: 1 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;

    text-transform: none !important;
    letter-spacing: inherit !important;

    cursor: pointer !important;
}


/* ---------------------------------------------------------
   2. INDUSTRIES PAGE — FORCE SERVICES VISIBLE
--------------------------------------------------------- */

body.industries-page .navigation .nav-services-trigger,
body.industry-page .navigation .nav-services-trigger,
body.industries-page-body .navigation .nav-services-trigger {
    color: #a7a7a7 !important;
    -webkit-text-fill-color: #a7a7a7 !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   3. HOVER
--------------------------------------------------------- */

.navigation .nav-services-mega .nav-services-trigger:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   4. OPEN STATE
--------------------------------------------------------- */

.navigation .nav-services-mega.mega-open .nav-services-trigger {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   5. CHEVRON
--------------------------------------------------------- */

.navigation .nav-services-chevron {
    display: inline-block !important;

    width: 7px !important;
    height: 7px !important;

    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;

    opacity: 1 !important;

    transform: rotate(45deg) translateY(-2px);

    transition: transform .25s ease;
}


.navigation
.nav-services-mega.mega-open
.nav-services-chevron {
    transform: rotate(225deg) !important;
}


/* =========================================================
   HEADER / DROPDOWN POSITION FIX
========================================================= */

.site-header,
.services-header,
.ind-header,
.industries-header {
    overflow: visible !important;
}


.header-inner {
    position: relative !important;
    overflow: visible !important;
}


.navigation {
    overflow: visible !important;
}


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

.navigation .nav-services-mega {
    position: static !important;
}


/* =========================================================
   DROPDOWN CLOSED
========================================================= */

.navigation .services-mega-menu {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    left: 50% !important;

    width: min(1120px, calc(100vw - 60px)) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translate(-50%, -8px) !important;

    z-index: 999999 !important;
}


/* =========================================================
   DROPDOWN OPEN
========================================================= */

.navigation
.nav-services-mega.mega-open
.services-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translate(-50%, 0) !important;
}


/* =========================================================
   INDUSTRIES PAGE — MAKE SURE MENU IS ABOVE HERO
========================================================= */

body.industries-page .site-header,
body.industry-page .site-header,
body.industries-page-body .site-header,

body.industries-page .services-header,
body.industry-page .services-header,
body.industries-page-body .services-header,

body.industries-page .ind-header,
body.industry-page .ind-header,
body.industries-page-body .ind-header,

body.industries-page .industries-header,
body.industry-page .industries-header,
body.industries-page-body .industries-header {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}


body.industries-page .header-inner,
body.industry-page .header-inner,
body.industries-page-body .header-inner {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}


body.industries-page .navigation,
body.industry-page .navigation,
body.industries-page-body .navigation {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}


/* Hero ko navbar/dropdown ke neeche rakho */

body.industries-page .ind-hero,
body.industry-page .ind-hero,
body.industries-page-body .ind-hero {
    z-index: 1 !important;
}
/* =========================================================
   FINAL GLOBAL SERVICES MEGA MENU
   SAME DESIGN ON EVERY PAGE
   ABOUT PAGE = MASTER LOOK
========================================================= */


/* =========================================================
   NAV SERVICES BUTTON
========================================================= */

.navigation .nav-services-mega {
    position: static !important;
}


.navigation .nav-services-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;

    color: #a8a8a8 !important;
    -webkit-text-fill-color: #a8a8a8 !important;

    opacity: 1 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;

    text-transform: none !important;

    cursor: pointer !important;
}


/* HOVER */

.navigation .nav-services-trigger:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* OPEN */

.navigation
.nav-services-mega.mega-open
.nav-services-trigger {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   CHEVRON
========================================================= */

.navigation .nav-services-chevron {
    display: inline-block !important;

    width: 7px !important;
    height: 7px !important;

    border: 0 !important;

    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;

    opacity: 1 !important;

    transform: rotate(45deg) translateY(-2px) !important;

    transition: transform .22s ease !important;
}


.navigation
.nav-services-mega.mega-open
.nav-services-chevron {
    transform: rotate(225deg) !important;
}


/* =========================================================
   HEADER — ALLOW DROPDOWN
========================================================= */

.site-header,
.services-header,
.ind-header,
.industries-header,
.header-inner,
.navigation {
    overflow: visible !important;
}


.site-header,
.services-header,
.ind-header,
.industries-header {
    position: relative !important;
    z-index: 99999 !important;
}


.header-inner {
    position: relative !important;
    z-index: 99999 !important;
}


/* =========================================================
   MEGA MENU
========================================================= */

.navigation .services-mega-menu {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    left: 50% !important;

    width: min(1120px, calc(100vw - 60px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #080808 !important;

    border: 1px solid #292929 !important;
    border-radius: 12px !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .45) !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translate(-50%, -8px) !important;

    z-index: 999999 !important;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease !important;
}


/* OPEN */

.navigation
.nav-services-mega.mega-open
.services-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translate(-50%, 0) !important;
}


/* =========================================================
   INNER — SAME SIZE AS ABOUT
========================================================= */

.navigation .services-mega-inner {
    width: 100% !important;

    height: auto !important;
    min-height: 405px !important;
    max-height: none !important;

    display: grid !important;

    grid-template-columns:
        230px
        minmax(340px, 1fr)
        270px !important;

    align-items: stretch !important;

    gap: 34px !important;

    margin: 0 !important;

    padding: 32px !important;

    box-sizing: border-box !important;

    background: #080808 !important;
}


/* =========================================================
   LABEL
========================================================= */

.navigation .services-mega-label {
    margin: 0 0 24px 0 !important;

    padding: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: .16em !important;

    color: #777 !important;

    text-transform: uppercase !important;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.navigation .services-mega-list {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 25px 0 0 !important;

    border: 0 !important;
    border-right: 1px solid #292929 !important;

    background: transparent !important;
}


.navigation .services-mega-item {
    position: relative !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 0 13px 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-bottom: 0 !important;

    background: transparent !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;

    letter-spacing: normal !important;
    text-transform: none !important;

    color: #777 !important;
    -webkit-text-fill-color: #777 !important;

    text-decoration: none !important;

    opacity: 1 !important;

    transform: none !important;

    transition:
        color .2s ease,
        transform .2s ease !important;
}


.navigation .services-mega-item:hover,
.navigation .services-mega-item.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    transform: translateX(4px) !important;
}


/* ACTIVE DOT */

.navigation .services-mega-item::before {
    content: "" !important;

    position: absolute !important;

    left: -12px !important;
    top: 7px !important;

    width: 4px !important;
    height: 4px !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    opacity: 0 !important;
}


.navigation .services-mega-item:hover::before,
.navigation .services-mega-item.active::before {
    opacity: 1 !important;
}


/* Remove any industries underline */

.navigation .services-mega-item::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   CENTER COLUMN
========================================================= */

.navigation .services-mega-details {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


.navigation .services-mega-title {
    width: fit-content !important;

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

    gap: 13px !important;

    margin: 0 0 16px 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 650 !important;

    letter-spacing: -.035em !important;
    text-transform: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-decoration: none !important;
}


.navigation .services-mega-title b {
    font-size: 25px !important;
    font-weight: 300 !important;

    color: #ffffff !important;
}


.navigation .services-mega-details > p {
    width: auto !important;
    max-width: 455px !important;

    min-height: 110px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 13px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;

    color: #8c8c8c !important;
    -webkit-text-fill-color: #8c8c8c !important;
}


/* =========================================================
   TAGS
========================================================= */

.navigation .services-mega-tags {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 7px !important;

    margin: auto 0 0 0 !important;
    padding: 18px 0 0 0 !important;

    background: transparent !important;
}


.navigation .services-mega-tags span {
    width: auto !important;
    height: auto !important;

    min-height: 30px !important;

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

    margin: 0 !important;
    padding: 0 12px !important;

    border: 1px solid #2c2c2c !important;
    border-radius: 30px !important;

    background: #181818 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    color: #e7e7e7 !important;
    -webkit-text-fill-color: #e7e7e7 !important;

    text-transform: none !important;
}


/* =========================================================
   LEARN MORE
========================================================= */

.navigation .services-mega-learn {
    width: fit-content !important;

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

    gap: 9px !important;

    margin: 20px 0 0 0 !important;
    padding: 0 0 5px 0 !important;

    border: 0 !important;
    border-bottom: 1px solid #444 !important;

    background: transparent !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: .1em !important;
    text-transform: uppercase !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-decoration: none !important;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.navigation .services-mega-visual {
    position: relative !important;

    width: 270px !important;
    height: 320px !important;

    min-width: 270px !important;
    min-height: 320px !important;

    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 1px solid #292929 !important;
    border-radius: 9px !important;

    background: #151515 !important;
}


.navigation .services-mega-image {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: 1;

    transition:
        opacity .15s ease,
        transform .4s ease !important;
}


.navigation .services-mega-image-shade {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.02) 42%,
            rgba(0,0,0,.82) 100%
        ) !important;

    pointer-events: none !important;
}


/* NUMBER */

.navigation .services-mega-image-number {
    position: absolute !important;

    z-index: 3 !important;

    top: 16px !important;
    left: 16px !important;

    width: 44px !important;
    height: 38px !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 9px !important;

    background: rgba(8,8,8,.72) !important;

    font-family: "Manrope", sans-serif !important;

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

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* IMAGE TEXT */

.navigation .services-mega-image-info {
    position: absolute !important;

    z-index: 3 !important;

    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
}


.navigation .services-mega-image-info span {
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 8px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: .15em !important;

    color: rgba(255,255,255,.62) !important;
    -webkit-text-fill-color: rgba(255,255,255,.62) !important;
}


.navigation .services-mega-image-info strong {
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 650 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   INDUSTRIES PAGE SPECIFIC CONFLICT FIX
========================================================= */

body.industries-page .nav-services-trigger,
body.industry-page .nav-services-trigger,
body.industries-page-body .nav-services-trigger {
    color: #a8a8a8 !important;
    -webkit-text-fill-color: #a8a8a8 !important;

    opacity: 1 !important;

    visibility: visible !important;
}


body.industries-page .services-mega-menu,
body.industry-page .services-mega-menu,
body.industries-page-body .services-mega-menu {
    height: auto !important;
    min-height: 0 !important;
}


body.industries-page .services-mega-inner,
body.industry-page .services-mega-inner,
body.industries-page-body .services-mega-inner {
    min-height: 405px !important;
    height: auto !important;

    padding: 32px !important;

    grid-template-columns:
        230px
        minmax(340px, 1fr)
        270px !important;

    gap: 34px !important;
}


/* Industries hero dropdown ke upar na aaye */

body.industries-page .ind-hero,
body.industry-page .ind-hero,
body.industries-page-body .ind-hero {
    position: relative !important;
    z-index: 1 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

    .navigation .services-mega-menu {
        width: min(1000px, calc(100vw - 40px)) !important;
    }

    .navigation .services-mega-inner {
        grid-template-columns:
            215px
            minmax(300px, 1fr)
            235px !important;

        gap: 25px !important;

        padding: 27px !important;
    }

    .navigation .services-mega-visual {
        width: 235px !important;
        min-width: 235px !important;

        height: 300px !important;
        min-height: 300px !important;
    }
}
/* =========================================================
   FINAL FIX — INDUSTRIES SERVICES MEGA MENU
   SAME FORMAT / SIZE AS OTHER PAGES
   Paste at the VERY END of style.css
========================================================= */


/* ---------------------------------------------------------
   HEADER MUST ALLOW DROPDOWN
--------------------------------------------------------- */

body.industries-page .site-header,
body.industry-page .site-header,
body.industries-page-body .site-header,
body.industries-page .services-header,
body.industry-page .services-header,
body.industries-page-body .services-header {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}


body.industries-page .header-inner,
body.industry-page .header-inner,
body.industries-page-body .header-inner {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}


body.industries-page .navigation,
body.industry-page .navigation,
body.industries-page-body .navigation {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   SERVICES WRAPPER
--------------------------------------------------------- */

body.industries-page .navigation .nav-services-mega,
body.industry-page .navigation .nav-services-mega,
body.industries-page-body .navigation .nav-services-mega {
    position: static !important;
}


/* ---------------------------------------------------------
   SERVICES BUTTON
--------------------------------------------------------- */

body.industries-page .navigation .nav-services-trigger,
body.industry-page .navigation .nav-services-trigger,
body.industries-page-body .navigation .nav-services-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;

    color: #a8a8a8 !important;
    -webkit-text-fill-color: #a8a8a8 !important;

    opacity: 1 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;

    cursor: pointer !important;
}


body.industries-page .navigation .nav-services-trigger:hover,
body.industry-page .navigation .nav-services-trigger:hover,
body.industries-page-body .navigation .nav-services-trigger:hover,

body.industries-page .navigation .nav-services-mega.mega-open .nav-services-trigger,
body.industry-page .navigation .nav-services-mega.mega-open .nav-services-trigger,
body.industries-page-body .navigation .nav-services-mega.mega-open .nav-services-trigger {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ---------------------------------------------------------
   CHEVRON
--------------------------------------------------------- */

body.industries-page .navigation .nav-services-chevron,
body.industry-page .navigation .nav-services-chevron,
body.industries-page-body .navigation .nav-services-chevron {
    display: inline-block !important;

    width: 7px !important;
    height: 7px !important;

    border: 0 !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;

    transform: rotate(45deg) translateY(-2px) !important;

    transition: transform .22s ease !important;
}


body.industries-page .navigation .nav-services-mega.mega-open .nav-services-chevron,
body.industry-page .navigation .nav-services-mega.mega-open .nav-services-chevron,
body.industries-page-body .navigation .nav-services-mega.mega-open .nav-services-chevron {
    transform: rotate(225deg) !important;
}


/* =========================================================
   MEGA MENU — EXACT COMPACT FORMAT
========================================================= */

body.industries-page .navigation .services-mega-menu,
body.industry-page .navigation .services-mega-menu,
body.industries-page-body .navigation .services-mega-menu {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    left: 50% !important;

    width: min(1120px, calc(100vw - 60px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #080808 !important;

    border: 1px solid #292929 !important;
    border-radius: 12px !important;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, .48) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translate(-50%, -8px) !important;

    overflow: hidden !important;

    z-index: 9999999 !important;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease !important;
}


/* ---------------------------------------------------------
   IMPORTANT — HOVER ALONE MUST NOT OPEN MENU
--------------------------------------------------------- */

body.industries-page .navigation .nav-services-mega:hover .services-mega-menu,
body.industry-page .navigation .nav-services-mega:hover .services-mega-menu,
body.industries-page-body .navigation .nav-services-mega:hover .services-mega-menu,

body.industries-page .navigation .nav-services-mega:focus-within .services-mega-menu,
body.industry-page .navigation .nav-services-mega:focus-within .services-mega-menu,
body.industries-page-body .navigation .nav-services-mega:focus-within .services-mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translate(-50%, -8px) !important;
}


/* ---------------------------------------------------------
   OPEN ONLY AFTER SERVICES CLICK
--------------------------------------------------------- */

body.industries-page .navigation .nav-services-mega.mega-open .services-mega-menu,
body.industry-page .navigation .nav-services-mega.mega-open .services-mega-menu,
body.industries-page-body .navigation .nav-services-mega.mega-open .services-mega-menu,

body.industries-page .navigation .nav-services-mega.mega-open:hover .services-mega-menu,
body.industry-page .navigation .nav-services-mega.mega-open:hover .services-mega-menu,
body.industries-page-body .navigation .nav-services-mega.mega-open:hover .services-mega-menu,

body.industries-page .navigation .nav-services-mega.mega-open:focus-within .services-mega-menu,
body.industry-page .navigation .nav-services-mega.mega-open:focus-within .services-mega-menu,
body.industries-page-body .navigation .nav-services-mega.mega-open:focus-within .services-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translate(-50%, 0) !important;
}


/* =========================================================
   INNER LAYOUT
   SAME SIZE AS OTHER PAGES
========================================================= */

body.industries-page .navigation .services-mega-inner,
body.industry-page .navigation .services-mega-inner,
body.industries-page-body .navigation .services-mega-inner {
    display: grid !important;

    grid-template-columns:
        230px
        minmax(340px, 1fr)
        270px !important;

    gap: 34px !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 32px !important;

    box-sizing: border-box !important;

    align-items: stretch !important;

    background: #080808 !important;
}


/* =========================================================
   LEFT SERVICE LIST
========================================================= */

body.industries-page .services-mega-list,
body.industry-page .services-mega-list,
body.industries-page-body .services-mega-list {
    min-width: 0 !important;
    height: auto !important;
}


body.industries-page .services-mega-label,
body.industry-page .services-mega-label,
body.industries-page-body .services-mega-label {
    margin-bottom: 18px !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .16em !important;

    color: #777777 !important;
}


body.industries-page .services-mega-item,
body.industry-page .services-mega-item,
body.industries-page-body .services-mega-item {
    display: block !important;

    padding: 9px 0 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    color: #8f8f8f !important;

    text-decoration: none !important;

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

    transition:
        color .2s ease,
        padding-left .2s ease !important;
}


body.industries-page .services-mega-item:hover,
body.industries-page .services-mega-item.active,
body.industry-page .services-mega-item:hover,
body.industry-page .services-mega-item.active,
body.industries-page-body .services-mega-item:hover,
body.industries-page-body .services-mega-item.active {
    color: #ffffff !important;
    padding-left: 7px !important;
}


/* =========================================================
   CENTER CONTENT
========================================================= */

body.industries-page .services-mega-details,
body.industry-page .services-mega-details,
body.industries-page-body .services-mega-details {
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 0 !important;
}


body.industries-page .services-mega-title,
body.industry-page .services-mega-title,
body.industries-page-body .services-mega-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    margin: 0 0 16px !important;

    text-decoration: none !important;

    color: #ffffff !important;
}


body.industries-page .services-mega-title span,
body.industry-page .services-mega-title span,
body.industries-page-body .services-mega-title span {
    font-family: "Manrope", sans-serif !important;

    font-size: 30px !important;
    line-height: 1.08 !important;

    font-weight: 600 !important;

    letter-spacing: -.035em !important;

    color: #ffffff !important;
}


body.industries-page .services-mega-title b,
body.industry-page .services-mega-title b,
body.industries-page-body .services-mega-title b {
    font-size: 22px !important;
    font-weight: 400 !important;

    color: #ffffff !important;
}


body.industries-page .services-mega-details > p,
body.industry-page .services-mega-details > p,
body.industries-page-body .services-mega-details > p {
    max-width: 470px !important;

    margin: 0 0 22px !important;

    font-family: "Inter", sans-serif !important;

    font-size: 13px !important;
    line-height: 1.75 !important;

    color: #9b9b9b !important;
}


/* TAGS */

body.industries-page .services-mega-tags,
body.industry-page .services-mega-tags,
body.industries-page-body .services-mega-tags {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    margin-bottom: 24px !important;
}


body.industries-page .services-mega-tags span,
body.industry-page .services-mega-tags span,
body.industries-page-body .services-mega-tags span {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 30px !important;

    padding: 6px 11px !important;

    border: 1px solid #2e2e2e !important;
    border-radius: 6px !important;

    background: #111111 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;

    letter-spacing: .05em !important;

    color: #b7b7b7 !important;
}


/* LEARN MORE */

body.industries-page .services-mega-learn,
body.industry-page .services-mega-learn,
body.industries-page-body .services-mega-learn {
    display: inline-flex !important;
    align-items: center !important;

    gap: 9px !important;

    width: max-content !important;

    margin-top: auto !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    color: #ffffff !important;

    text-decoration: none !important;
}


/* =========================================================
   RIGHT IMAGE — SAME COMPACT SIZE
========================================================= */

body.industries-page .navigation .services-mega-visual,
body.industry-page .navigation .services-mega-visual,
body.industries-page-body .navigation .services-mega-visual {
    position: relative !important;

    width: 270px !important;
    min-width: 270px !important;

    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;

    border-radius: 9px !important;

    overflow: hidden !important;

    background: #151515 !important;
}


body.industries-page .navigation .services-mega-image,
body.industry-page .navigation .services-mega-image,
body.industries-page-body .navigation .services-mega-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    transition:
        opacity .18s ease,
        transform .35s ease !important;
}


body.industries-page .services-mega-visual:hover .services-mega-image,
body.industry-page .services-mega-visual:hover .services-mega-image,
body.industries-page-body .services-mega-visual:hover .services-mega-image {
    transform: scale(1.025) !important;
}


body.industries-page .services-mega-image-shade,
body.industry-page .services-mega-image-shade,
body.industries-page-body .services-mega-image-shade {
    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04) 25%,
            rgba(0,0,0,.72) 100%
        ) !important;
}


/* NUMBER */

body.industries-page .services-mega-image-number,
body.industry-page .services-mega-image-number,
body.industries-page-body .services-mega-image-number {
    position: absolute !important;

    z-index: 3 !important;

    top: 16px !important;
    left: 16px !important;

    width: 44px !important;
    height: 38px !important;

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

    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 9px !important;

    background: rgba(8,8,8,.72) !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    color: #ffffff !important;
}


/* IMAGE TEXT */

body.industries-page .services-mega-image-info,
body.industry-page .services-mega-image-info,
body.industries-page-body .services-mega-image-info {
    position: absolute !important;

    z-index: 3 !important;

    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;
}


body.industries-page .services-mega-image-info span,
body.industry-page .services-mega-image-info span,
body.industries-page-body .services-mega-image-info span {
    font-family: "Manrope", sans-serif !important;

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

    letter-spacing: .15em !important;

    color: rgba(255,255,255,.62) !important;
}


body.industries-page .services-mega-image-info strong,
body.industry-page .services-mega-image-info strong,
body.industries-page-body .services-mega-image-info strong {
    font-family: "Manrope", sans-serif !important;

    font-size: 18px !important;
    line-height: 1.15 !important;

    font-weight: 650 !important;

    color: #ffffff !important;
}


/* =========================================================
   HERO ALWAYS UNDER DROPDOWN
========================================================= */

body.industries-page .ind-hero,
body.industry-page .ind-hero,
body.industries-page-body .ind-hero {
    position: relative !important;
    z-index: 1 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

    body.industries-page .navigation .services-mega-menu,
    body.industry-page .navigation .services-mega-menu,
    body.industries-page-body .navigation .services-mega-menu {
        width: min(1000px, calc(100vw - 40px)) !important;
    }


    body.industries-page .navigation .services-mega-inner,
    body.industry-page .navigation .services-mega-inner,
    body.industries-page-body .navigation .services-mega-inner {
        grid-template-columns:
            215px
            minmax(300px, 1fr)
            235px !important;

        gap: 25px !important;

        padding: 27px !important;
    }


    body.industries-page .navigation .services-mega-visual,
    body.industry-page .navigation .services-mega-visual,
    body.industries-page-body .navigation .services-mega-visual {
        width: 235px !important;
        min-width: 235px !important;

        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

}


/* =========================================================
   SMALL SCREEN
========================================================= */

@media (max-width: 900px) {

    body.industries-page .navigation .services-mega-inner,
    body.industry-page .navigation .services-mega-inner,
    body.industries-page-body .navigation .services-mega-inner {
        grid-template-columns:
            210px
            minmax(0, 1fr) !important;
    }


    body.industries-page .navigation .services-mega-visual,
    body.industry-page .navigation .services-mega-visual,
    body.industries-page-body .navigation .services-mega-visual {
        display: none !important;
    }

}
/* =========================================================
   INDUSTRIES PAGE — SHORTER MEGA MENU
   KEEP TEXT SIZE SAME
   ONLY REDUCE CARD HEIGHT / EMPTY SPACE
========================================================= */

/* MAIN DROPDOWN — width same, height content based */
body.industries-page .navigation .services-mega-menu,
body.industry-page .navigation .services-mega-menu,
body.industries-page-body .navigation .services-mega-menu {
    width: min(1120px, calc(100vw - 60px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}


/* =========================================================
   INNER CARD — THIS REDUCES THE LENGTH
========================================================= */

body.industries-page .navigation .services-mega-inner,
body.industry-page .navigation .services-mega-inner,
body.industries-page-body .navigation .services-mega-inner {
    grid-template-columns:
        230px
        minmax(340px, 1fr)
        250px !important;

    gap: 32px !important;

    /* main height reduction */
    padding: 24px 30px !important;

    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LABELS — TEXT SIZE SAME
========================================================= */

body.industries-page .services-mega-label,
body.industry-page .services-mega-label,
body.industries-page-body .services-mega-label {
    margin-bottom: 18px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
}


/* =========================================================
   LEFT SERVICES — KEEP NORMAL TEXT SIZE
========================================================= */

body.industries-page .services-mega-list,
body.industry-page .services-mega-list,
body.industries-page-body .services-mega-list {
    padding-right: 24px !important;
}


body.industries-page .services-mega-item,
body.industry-page .services-mega-item,
body.industries-page-body .services-mega-item {
    /* TEXT SIZE SAME */
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;

    /* only vertical gaps reduced */
    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    border-bottom: 0 !important;
}


body.industries-page .services-mega-item:hover,
body.industries-page .services-mega-item.active,
body.industry-page .services-mega-item:hover,
body.industry-page .services-mega-item.active,
body.industries-page-body .services-mega-item:hover,
body.industries-page-body .services-mega-item.active {
    font-size: 13px !important;

    padding-left: 4px !important;
}


/* =========================================================
   CENTER CONTENT
========================================================= */

body.industries-page .services-mega-details,
body.industry-page .services-mega-details,
body.industries-page-body .services-mega-details {
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 0 !important;
}


/* EXPLORE TITLE — SAME SIZE */
body.industries-page .services-mega-title,
body.industry-page .services-mega-title,
body.industries-page-body .services-mega-title {
    margin: 0 0 14px 0 !important;

    gap: 13px !important;
}


body.industries-page .services-mega-title span,
body.industry-page .services-mega-title span,
body.industries-page-body .services-mega-title span {
    /* KEEP TEXT BIG */
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 650 !important;
}


body.industries-page .services-mega-title b,
body.industry-page .services-mega-title b,
body.industries-page-body .services-mega-title b {
    font-size: 25px !important;
}


/* DESCRIPTION — SAME SIZE */
body.industries-page .services-mega-details > p,
body.industry-page .services-mega-details > p,
body.industries-page-body .services-mega-details > p {
    max-width: 455px !important;

    /* remove artificial height */
    min-height: 0 !important;

    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.65 !important;

    color: #8c8c8c !important;
}


/* =========================================================
   TAGS — MOVE UP, DON'T SHRINK TEXT
========================================================= */

body.industries-page .services-mega-tags,
body.industry-page .services-mega-tags,
body.industries-page-body .services-mega-tags {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 7px !important;

    /* fills available space instead of making menu taller */
    margin-top: auto !important;
    margin-bottom: 0 !important;

    padding-top: 12px !important;
}


body.industries-page .services-mega-tags span,
body.industry-page .services-mega-tags span,
body.industries-page-body .services-mega-tags span {
    min-height: 30px !important;

    padding: 0 12px !important;

    border-radius: 30px !important;

    /* SAME readable text */
    font-size: 10px !important;
    line-height: 1 !important;
}


/* =========================================================
   LEARN MORE
========================================================= */

body.industries-page .services-mega-learn,
body.industry-page .services-mega-learn,
body.industries-page-body .services-mega-learn {
    margin-top: 15px !important;

    padding-bottom: 5px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
}


/* =========================================================
   RIGHT IMAGE — SHORTER, NOT TINY
========================================================= */

body.industries-page .navigation .services-mega-visual,
body.industry-page .navigation .services-mega-visual,
body.industries-page-body .navigation .services-mega-visual {
    width: 250px !important;
    min-width: 250px !important;

    height: 290px !important;
    min-height: 290px !important;
    max-height: 290px !important;

    align-self: center !important;
}


/* KEEP IMAGE CONTENT NORMAL SIZE */
body.industries-page .services-mega-image-number,
body.industry-page .services-mega-image-number,
body.industries-page-body .services-mega-image-number {
    top: 14px !important;
    left: 14px !important;

    width: 44px !important;
    height: 38px !important;

    font-size: 12px !important;
}


body.industries-page .services-mega-image-info,
body.industry-page .services-mega-image-info,
body.industries-page-body .services-mega-image-info {
    left: 17px !important;
    right: 17px !important;
    bottom: 16px !important;
}


body.industries-page .services-mega-image-info span,
body.industry-page .services-mega-image-info span,
body.industries-page-body .services-mega-image-info span {
    font-size: 8px !important;
}


body.industries-page .services-mega-image-info strong,
body.industry-page .services-mega-image-info strong,
body.industries-page-body .services-mega-image-info strong {
    font-size: 18px !important;
    line-height: 1.15 !important;
}
/* =========================================================
   MOBILE ONLY — COMPACT FOOTER
   Desktop + Tablet remain unchanged
========================================================= */

@media only screen and (max-width: 600px) {

    /* Footer outer spacing */
    .site-footer,
    .compact-footer {
        padding-top: 24px !important;
        padding-bottom: 14px !important;
    }


    /* Main footer layout */
    .site-footer .footer-grid,
    .compact-footer .compact-footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        column-gap: 20px !important;
        row-gap: 24px !important;
    }


    /* Brand always full width */
    .site-footer .footer-brand-block,
    .compact-footer .compact-footer-brand {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       BRAND — reduce vertical space
    ----------------------------------------------------- */

    .site-footer .footer-logo,
    .compact-footer .compact-footer-logo {
        margin-bottom: 12px !important;
    }

    .site-footer .footer-logo-image,
    .compact-footer .compact-footer-logo img {
        width: 48px !important;
        height: 48px !important;
    }

    .site-footer .footer-company-title,
    .compact-footer .compact-footer-brand h3 {
        margin-bottom: 5px !important;
    }

    .site-footer .footer-service-title,
    .compact-footer .compact-footer-service {
        margin-bottom: 5px !important;
    }

    .site-footer .footer-description,
    .compact-footer .compact-footer-location {
        margin-bottom: 0 !important;
        line-height: 1.5 !important;
    }


    /* -----------------------------------------------------
       COLUMN HEADINGS
    ----------------------------------------------------- */

    .site-footer .footer-column h3,
    .site-footer .footer-contact h3,
    .compact-footer .compact-footer-column h4,
    .compact-footer .compact-footer-contact h4 {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }


    /* -----------------------------------------------------
       QUICK LINKS + SERVICES
       KEY FIX: 2 columns instead of long vertical lists
    ----------------------------------------------------- */

    .site-footer .footer-column ul {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 14px !important;
        row-gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .site-footer .footer-column li {
        margin: 0 !important;
        padding: 0 !important;
    }


    .compact-footer .compact-footer-links,
    .compact-footer .compact-footer-links.two-column-links {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 14px !important;
        row-gap: 8px !important;
    }


    /* Keep text readable */
    .site-footer .footer-column a,
    .compact-footer .compact-footer-links a {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .site-footer .footer-contact,
    .compact-footer .compact-footer-contact {
        width: 100% !important;
    }


    .site-footer .footer-contact p,
    .compact-footer .compact-footer-contact p {
        margin-bottom: 7px !important;

        font-size: 10px !important;
        line-height: 1.4 !important;
    }


    /* -----------------------------------------------------
       DISCLAIMER
    ----------------------------------------------------- */

    .site-footer .footer-disclaimer,
    .compact-footer .compact-footer-disclaimer {
        margin-top: 20px !important;

        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }


    .compact-footer .compact-footer-disclaimer {
        display: block !important;
    }


    .site-footer .footer-disclaimer h3,
    .compact-footer .compact-footer-disclaimer > strong {
        display: block !important;

        margin-bottom: 7px !important;
    }


    .site-footer .footer-disclaimer p,
    .compact-footer .compact-footer-disclaimer p {
        margin: 0 !important;

        font-size: 9px !important;
        line-height: 1.5 !important;
    }


    /* -----------------------------------------------------
       BOTTOM LEGAL AREA
    ----------------------------------------------------- */

    .site-footer .footer-bottom,
    .compact-footer .compact-footer-bottom {
        padding-top: 12px !important;

        gap: 7px !important;
    }


    .site-footer .footer-legal,
    .site-footer .footer-legal-links,
    .compact-footer .compact-footer-legal {
        gap: 9px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media only screen and (max-width: 380px) {

    .site-footer .container,
    .compact-footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .site-footer .footer-grid,
    .compact-footer .compact-footer-grid {
        column-gap: 14px !important;
        row-gap: 20px !important;
    }


    .site-footer .footer-column ul,
    .compact-footer .compact-footer-links,
    .compact-footer .compact-footer-links.two-column-links {
        column-gap: 10px !important;
        row-gap: 7px !important;
    }

}/* =========================================================
   MOBILE FOOTER — REMOVE EXTRA VERTICAL SPACE
   Desktop / Tablet unchanged
========================================================= */

@media only screen and (max-width: 600px) {

    /* CONTACT ke neeche wali extra space remove */
    .site-footer .footer-disclaimer,
    .compact-footer .compact-footer-disclaimer {
        margin-top: 8px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }


    /* Disclaimer heading */
    .site-footer .footer-disclaimer h3,
    .compact-footer .compact-footer-disclaimer > strong {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }


    /* Disclaimer paragraph */
    .site-footer .footer-disclaimer p,
    .compact-footer .compact-footer-disclaimer p {
        margin: 0 !important;
        padding: 0 !important;
    }


    /* Privacy Policy section ko disclaimer ke closer lao */
    .site-footer .footer-bottom,
    .compact-footer .compact-footer-bottom {
        margin-top: 0 !important;
        padding-top: 11px !important;
        padding-bottom: 0 !important;
        gap: 7px !important;
    }


    /* Privacy Policy / Terms */
    .site-footer .footer-legal,
    .site-footer .footer-legal-links,
    .compact-footer .compact-footer-legal {
        margin: 0 !important;
        padding: 0 !important;
    }


    /* Copyright */
    .site-footer .footer-bottom p,
    .compact-footer .compact-footer-bottom p {
        margin: 0 !important;
        padding: 0 !important;
    }

}
/* =========================================================
   HOME INDUSTRIES — COMPACT SIZE FIX
   Only reduces spacing/height
========================================================= */

body.home-page .industries-premium {
    min-height: auto !important;
    padding: 78px 0 72px !important;
}

/* Less empty space below heading area */
body.home-page .industries-premium-intro {
    margin-bottom: 42px !important;
}

/* Slightly more compact heading */
body.home-page .industries-premium-intro h2 {
    font-size: clamp(44px, 4.5vw, 66px) !important;
    line-height: 0.98 !important;
}

/* Reduce space between eyebrow and heading */
body.home-page .industries-premium-eyebrow {
    margin-bottom: 20px !important;
}

/* Compact industry rows */
body.home-page .industry-premium-row {
    min-height: 92px !important;
    padding: 15px 10px 15px 0 !important;
}

/* Keep content visually balanced */
body.home-page .industry-premium-main h3 {
    font-size: 23px !important;
}

body.home-page .industry-premium-main p {
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* Slightly smaller arrows */
body.home-page .industry-premium-arrow {
    width: 46px !important;
    height: 46px !important;
    font-size: 21px !important;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    body.home-page .industries-premium {
        padding: 70px 0 65px !important;
    }

    body.home-page .industries-premium-intro {
        margin-bottom: 36px !important;
    }

    body.home-page .industries-premium-intro h2 {
        font-size: 48px !important;
    }

    body.home-page .industry-premium-row {
        min-height: 90px !important;
        padding: 16px 0 !important;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    body.home-page .industries-premium {
        padding: 58px 0 52px !important;
    }

    body.home-page .industries-premium-intro {
        margin-bottom: 30px !important;
    }

    body.home-page .industries-premium-intro h2 {
        font-size: 38px !important;
    }

    body.home-page .industry-premium-row {
        min-height: 92px !important;
        padding: 15px 0 !important;
    }

    body.home-page .industry-premium-main h3 {
        font-size: 18px !important;
        margin-bottom: 5px !important;
    }

    body.home-page .industry-premium-main p {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }

    body.home-page .industry-premium-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 17px !important;
    }
}
/* =========================================================
   HOME — OUR SERVICES FINAL FIX
   1. Correct hover for cards 03 & 04
   2. Make section more compact
========================================================= */


/* =========================================================
   COMPACT SECTION
========================================================= */

body.home-page .services.section {
    padding-top: 82px !important;
    padding-bottom: 82px !important;
}

/* Reduce heading → cards spacing */
body.home-page .services .section-heading {
    margin-bottom: 42px !important;
}


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

body.home-page .services .service-row {
    min-height: 230px !important;
    padding: 34px 40px !important;
}

/* number position */
body.home-page .services .service-row .service-number {
    top: 26px !important;
    left: 32px !important;
}

/* content spacing */
body.home-page .services .service-row .service-content {
    padding-top: 34px !important;
    padding-right: 32px !important;
}

/* title slightly tighter */
body.home-page .services .service-row .service-content h3 {
    margin-bottom: 11px !important;
    font-size: 26px !important;
}

/* description */
body.home-page .services .service-row .service-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* arrow */
body.home-page .services .service-row .service-arrow {
    right: 28px !important;
    bottom: 24px !important;
}


/* =========================================================
   CORRECT HOVER PATTERN
========================================================= */

/*
   LIGHT CARDS:
   01 / 04 / 05
*/

body.home-page .services .service-row:nth-child(1):hover,
body.home-page .services .service-row:nth-child(4):hover,
body.home-page .services .service-row:nth-child(5):hover {
    background: #e9e9e6 !important;
    color: #111111 !important;
    transform: translateY(-3px) !important;
}

body.home-page .services .service-row:nth-child(1):hover .service-content h3,
body.home-page .services .service-row:nth-child(4):hover .service-content h3,
body.home-page .services .service-row:nth-child(5):hover .service-content h3 {
    color: #111111 !important;
}

body.home-page .services .service-row:nth-child(1):hover .service-content p,
body.home-page .services .service-row:nth-child(4):hover .service-content p,
body.home-page .services .service-row:nth-child(5):hover .service-content p {
    color: #666666 !important;
}

body.home-page .services .service-row:nth-child(1):hover .service-number,
body.home-page .services .service-row:nth-child(4):hover .service-number,
body.home-page .services .service-row:nth-child(5):hover .service-number {
    color: #999999 !important;
}

body.home-page .services .service-row:nth-child(1):hover .service-arrow,
body.home-page .services .service-row:nth-child(4):hover .service-arrow,
body.home-page .services .service-row:nth-child(5):hover .service-arrow {
    color: #171717 !important;
}


/*
   DARK CARDS:
   02 / 03 / 06
*/

body.home-page .services .service-row:nth-child(2):hover,
body.home-page .services .service-row:nth-child(3):hover,
body.home-page .services .service-row:nth-child(6):hover {
    background: #30373c !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
}

body.home-page .services .service-row:nth-child(2):hover .service-content h3,
body.home-page .services .service-row:nth-child(3):hover .service-content h3,
body.home-page .services .service-row:nth-child(6):hover .service-content h3 {
    color: #ffffff !important;
}

body.home-page .services .service-row:nth-child(2):hover .service-content p,
body.home-page .services .service-row:nth-child(3):hover .service-content p,
body.home-page .services .service-row:nth-child(6):hover .service-content p {
    color: #c0c4c6 !important;
}

body.home-page .services .service-row:nth-child(2):hover .service-number,
body.home-page .services .service-row:nth-child(3):hover .service-number,
body.home-page .services .service-row:nth-child(6):hover .service-number {
    color: #aeb3b6 !important;
}

body.home-page .services .service-row:nth-child(2):hover .service-arrow,
body.home-page .services .service-row:nth-child(3):hover .service-arrow,
body.home-page .services .service-row:nth-child(6):hover .service-arrow {
    color: #ffffff !important;
}


/* Arrow movement remains same */
body.home-page .services .service-row:hover .service-arrow {
    transform: translate(5px, -5px) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    body.home-page .services.section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    body.home-page .services .service-row {
        min-height: 220px !important;
        padding: 32px !important;
    }

    body.home-page .services .service-row .service-content h3 {
        font-size: 23px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    body.home-page .services.section {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    body.home-page .services .service-row {
        min-height: 205px !important;
        padding: 28px !important;
    }

    body.home-page .services .service-row .service-number {
        top: 22px !important;
        left: 28px !important;
    }

    body.home-page .services .service-row .service-content {
        padding-top: 32px !important;
        padding-right: 25px !important;
    }

    body.home-page .services .service-row .service-content h3 {
        font-size: 21px !important;
    }

    body.home-page .services .service-row .service-content p {
        font-size: 13px !important;
    }

    body.home-page .services .service-row .service-arrow {
        right: 24px !important;
        bottom: 21px !important;
    }
}