@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --navy: #061827;
    --navy2: #0b2639;
    --graphite: #1d272e;
    --ink: #14212a;
    --paper: #f4f6f6;
    --white: #fff;
    --muted: #65727a;
    --line: #d4dcdf;
    --cyan: #20bde5;
    --cyan2: #0099c1;
    --max: 1400px;
    --shadow: 0 24px 70px rgba(3, 20, 32, .16);
    --font: Manrope, Arial, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6
}

body.menu-open {
    overflow: hidden
}

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

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

img {
    display: block;
    width: 100%
}

button {
    cursor: pointer
}

.skip {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 999;
    background: var(--cyan);
    padding: .65rem 1rem
}

.skip:focus {
    top: 1rem
}

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3 {
    line-height: 1.08;
    letter-spacing: -.035em
}

h1 {
    font-size: clamp(2.8rem, 5vw, 4.25rem)
}

h2 {
    font-size: clamp(2.2rem, 3.5vw, 3rem)
}

h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem)
}

p {
    color: var(--muted)
}

.eyebrow {
    display: block;
    margin-bottom: .8rem;
    color: var(--cyan2);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase
}







/* =========================================================
   HERO — DARK OVERLAY FOR TEXT READABILITY
   ========================================================= */

.cinema-hero {
    position: relative !important;
   
}

/* Full hero dark overlay */
.cinema-hero::after {
   

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.50) 28%,
            rgba(0, 0, 0, 0.34) 55%,
            rgba(0, 0, 0, 0.22) 78%,
            rgba(0, 0, 0, 0.28) 100%
        ) !important;
}







/* =========================================================
   MOBILE FOOTER — CLEAN SINGLE COLUMN
   ========================================================= */

@media (max-width: 620px) {

    .footer-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;

        width: 100% !important;
    }

    /* Brand */
    .footer-brand {
        width: 100% !important;
    }

    /* Products + Services */
    .footer-links {
        width: 100% !important;
    }

    .footer-links h3 {
        margin-bottom: 14px !important;
    }

    .footer-links a {
        display: block !important;
        margin-bottom: 10px !important;
    }

    /* Contact */
    .footer-contact {
        width: 100% !important;
        margin-top: 4px !important;
    }

    .footer-contact h3 {
        margin-bottom: 18px !important;
    }

    .footer-contact-item {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 11px !important;
        margin-bottom: 15px !important;
    }

    .footer-contact-item p {
        width: auto !important;
        max-width: 280px !important;
        margin: 0 !important;
        line-height: 1.5 !important;
    }

    .footer-contact-item a {
        line-height: 1.5 !important;
    }

    /* Bottom */
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .footer-bottom > div {
        display: flex !important;
        gap: 20px !important;
    }
}












.eyebrow.light {
    color: var(--cyan)
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 46px;
    padding: .75rem 1.2rem;
    border: 1px solid var(--cyan);
    background: var(--cyan);
    color: var(--navy);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: .25s
}

.button:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-2px)
}

.button span {
    transition: .25s
}

.button:hover span {
    transform: translate(3px, -2px)
}

.button.outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .65)
}

.button.dark {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.button.dark:hover {
    background: var(--cyan);
    color: var(--navy);
    border-color: var(--cyan)
}

.button.line {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink)
}

.text-link {
    display: inline-block;
    color: var(--cyan2);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em
}

.section {
    padding: 88px max(24px, calc((100vw - var(--max))/2))
}

.section-head {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 36px
}

.section-head h2 {
    margin-bottom: 0
}

.section-head p {
    max-width: 520px;
    margin: 0 0 4px auto
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 86px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 max(24px, calc((100vw - var(--max))/2));
    color: #fff;
    transition: .35s;
    background: linear-gradient(180deg, rgba(2, 14, 24, .85), transparent)
}

.site-header.compact,
.site-header:not(.is-dark) {
    height: 70px;
    color: var(--ink);
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 25px rgba(5, 22, 34, .07)
}




.site-header.is-dark.compact .desktop-nav a{

color:#000 !important;
}
.site-header.is-dark.compact .desktop-nav .nav-drop button{
    color:#000 !important;
}


.brand {
    width: 190px;
    margin-right: auto
}

.brand img {
    filter: brightness(0) invert(1)
}

.compact .brand img,
.site-header:not(.is-dark) .brand img {
    filter: none
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.desktop-nav>a,
.nav-drop>button {
    position: relative;
    padding: 28px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-transform: uppercase
}

.desktop-nav>a:after,
.nav-drop>button:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 20px;
    height: 2px;
    background: var(--cyan);
    transition: .25s
}

.desktop-nav>a:hover:after,
.nav-drop>button:hover:after {
    right: 0
}

.quote-head {
    white-space: nowrap
}

.mega-menu,
.service-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 86px;
    left: 50%;
    transform: translate(-50%, -8px);
    width: min(1380px, calc(100vw - 36px));
    padding: 28px;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow);
    border-top: 2px solid var(--cyan);
    transition: .25s
}

.compact .mega-menu,
.compact .service-menu {
    top: 70px
}

.nav-drop:hover .mega-menu,
.nav-drop:focus-within .mega-menu,
.nav-drop:hover .service-menu,
.nav-drop:focus-within .service-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0)
}

.mega-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px
}

.mega-col {
    padding-left: 18px;
    border-left: 1px solid var(--line)
}

.mega-col p {
    font-size: .62rem;
    color: var(--cyan2);
    font-weight: 800;
    letter-spacing: .1em
}

.mega-col a,
.service-menu a {
    display: block;
    padding: .28rem 0;
    font-size: .72rem;
    font-weight: 600;
    text-transform: none
}

.mega-col a:hover,
.service-menu a:hover {
    color: var(--cyan2);
    transform: translateX(3px)
}

.mega-all {
    grid-column: 1/-1;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--cyan2);
    font-size: .68rem;
    font-weight: 800
}

.service-menu {
    left: auto;
    right: 11%;
    width: 390px;
    transform: translateY(-8px)
}

.nav-drop:hover .service-menu,
.nav-drop:focus-within .service-menu {
    transform: none
}

.mobile-actions,
.mobile-panel {
    display: none
}

.cinema-hero {
    position: relative;
    height: min(850px, 70svh);
    min-height: 490px;
    background: var(--navy);
    overflow: hidden;
    color: #fff
}


.cinema-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.72) 18%,
            rgba(0, 0, 0, 0.48) 38%,
            rgba(0, 0, 0, 0.20) 58%,
            rgba(0, 0, 0, 0.02) 78%,
            transparent 100%
        );
}




/* =========================================================
   NOVERA HEADER — FINAL CLEAN RESPONSIVE VERSION
   ========================================================= */

/* ---------- DESKTOP ---------- */

@media (min-width: 901px) {

    .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;

        width: 100%;
        height: 76px;

        display: flex !important;
        align-items: center !important;

        

        z-index: 9999;

       
    }


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

    .site-header .brand {
        flex: 0 0 auto !important;

        width: auto !important;

        margin: 0 !important;

        display: flex;
        align-items: center;
    }

    .site-header .brand img {
        display: block;

        width: 190px;
        height: auto;
        margin-top: -18px !important;
    }


    /* ===============================
       CENTER NAVIGATION
       =============================== */

    .site-header .desktop-nav {

        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        transform: translate(-50%, -50%) !important;

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

        gap: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap;
    }


    .site-header .desktop-nav > a,
    .site-header .desktop-nav .nav-drop > button {

        position: relative;

        height: 76px;

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

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: 0 !important;

        color: #ffffff !important;

        font-size: 14px !important;
        line-height: 24px !important;
        font-weight: 700 !important;

        letter-spacing: 0.01em;

        white-space: nowrap;

        cursor: pointer;

        transition:
            color .25s ease,
            opacity .25s ease;
    }


    .site-header .desktop-nav > a:hover,
    .site-header .desktop-nav .nav-drop > button:hover {
        color: #25c2e8 !important;
    }


    /* ===============================
       CLEAN DROPDOWN ARROW
       =============================== */

    .site-header .nav-drop > button::after {

        content: "" !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        display: inline-block;

        width: 6px;
        height: 6px;

        margin-left: 8px;

        border: 0 !important;

        border-right: 1.5px solid currentColor !important;
        border-bottom: 1.5px solid currentColor !important;

        background: transparent !important;

        transform: rotate(45deg) translateY(-2px) !important;

        transition:
            transform .25s ease,
            color .25s ease;
    }


    .site-header .nav-drop:hover > button::after {
        transform: rotate(225deg) translateY(-1px) !important;

        color: #25c2e8;
    }


    /* Remove old dropdown decorative line */

    .site-header .nav-drop > button::before {
        display: none !important;
    }


    /* ===============================
       GET A QUOTE
       =============================== */

    .site-header .quote-head {

        flex: 0 0 auto !important;

        width: 144px;
        height: 46px;

        margin-left: auto !important;

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

        background: #25c2e8 !important;

        color: #061c2b !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        letter-spacing: .08em;

        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease;
    }


    .site-header .quote-head:hover {

        background: #ffffff !important;

        color: #061c2b !important;

        transform: translateY(-2px);
    }


    /* Dropdown position */

    .site-header .mega-menu {
        top: 76px !important;
    }

    .site-header .service-menu {
        top: 76px !important;
    }
}


/* =========================================================
   DESKTOP — SMALLER SCREEN
   ========================================================= */

@media (min-width: 901px) and (max-width: 1250px) {

    .site-header {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }


    .site-header .brand img {
        width: 165px;
    }


    .site-header .desktop-nav {
        gap: 18px !important;
    }


    .site-header .desktop-nav > a,
    .site-header .desktop-nav .nav-drop > button {
        font-size: 10px !important;
    }


    .site-header .quote-head {
        width: 125px;
        font-size: 9px !important;
    }
}


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

@media (max-width: 900px) {

    .site-header {

        position: fixed !important;

        top: 0;
        left: 0;
        right: 0;

        width: 100%;

        height: 68px;

        padding:
            0 18px !important;

        display: flex !important;
        align-items: center !important;

        
        z-index: 9999;
    }


    /* Logo */

    .site-header .brand {

        flex: 0 0 auto !important;

        margin: 0 !important;
    }


    .site-header .brand img {

        width: 150px;

        height: auto;

        display: block;
    }


    /* Desktop nav hidden */

    .site-header .desktop-nav {
        display: none !important;
    }


    /* Quote hidden */

    .site-header .quote-head {
        display: none !important;
    }


    /* Mobile menu button */

    .site-header .mobile-toggle {

        display: inline-flex !important;

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

        width: 42px;
        height: 42px;

        margin-left: auto;

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

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

        color: #ffffff;

        cursor: pointer;
    }
}


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

@media (max-width: 480px) {

    .site-header {

        height: 64px;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    .site-header .brand img {
        width: 138px;
    }


    .site-header .mobile-toggle {

        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   NOVERA HERO — EXTRA TEXT READABILITY OVERLAY
   ADD-ON ONLY
   Does NOT modify other sections
   ========================================================= */

.cinema-hero .hero-slide-copy {
    isolation: isolate;
}


/* Make hero heading clearly readable */
.cinema-hero .hero-slide-copy h1 {
    position: relative;
    z-index: 2;

    color: #fff;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.65),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Hero paragraph */
.cinema-hero .hero-slide-copy p {
    position: relative;
    z-index: 2;

    color: #f2f6f8;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.75);
}

/* Eyebrow / small label */
.cinema-hero .hero-slide-copy .eyebrow {
    position: relative;
    z-index: 2;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, 0.9);
}

/* Buttons stay completely above overlay */
.cinema-hero .hero-actions {
    position: relative;
    z-index: 5;
}


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

@media (max-width: 768px) {

    .cinema-hero .hero-slide-copy::before {
        left: -50px;
        right: -50px;
        top: -60px;
        bottom: -70px;

        width: auto;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.68) 0%,
                rgba(0, 0, 0, 0.55) 50%,
                rgba(0, 0, 0, 0.72) 100%
            );
    }

}












/* =========================================
   FOOTER CONTACT — FONT AWESOME
   ========================================= */

.footer-contact h3 {
    margin: 0 0 22px;
    color: #ffffff;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.footer-contact-item .contact-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;

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

    color: #25c2e8;
    font-size: 15px;

    margin-top: 2px;
}

.footer-contact-item p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.55;
}

.footer-contact-item a {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;

    transition: color .25s ease;
}

.footer-contact-item a:hover {
    color: #25c2e8;
}

/* Icon hover */
.footer-contact-item:hover .contact-icon {
    color: #ffffff;
}

/* Mobile */
@media (max-width: 600px) {

    .footer-contact-item {
        gap: 12px;
        margin-bottom: 16px;
    }

    .footer-contact-item .contact-icon {
        width: 20px;
        min-width: 20px;
        font-size: 14px;
    }

    .footer-contact-item p,
    .footer-contact-item a {
        font-size: 13px;
    }
}



/* =========================================================
   FOOTER CONTACT — CLEAN ALIGNMENT
   ========================================================= */

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 55px;
    align-items: start;
}

.footer-contact {
    width: 100%;
}

.footer-contact h3,
.footer-links h3 {
    margin: 0 0 20px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.footer-contact-item .contact-icon {
    width: 20px;
    min-width: 20px;
    height: 22px;

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

    color: #25c2e8;
    font-size: 14px;
    margin-top: 2px;
}

.footer-contact-item p {
    margin: 0;
    padding: 0;

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

    font-size: 14px;
    line-height: 1.55;

    max-width: 280px;
}

.footer-contact-item a {
    color: rgba(255,255,255,.85);

    font-size: 14px;
    line-height: 1.5;

    text-decoration: none;

    transition: color .25s ease;
}

.footer-contact-item a:hover {
    color: #25c2e8;
}


/* Footer links */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-links a {
    margin-bottom: 12px;
}


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

@media (max-width: 1000px) {

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

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

    .footer-contact-item p {
        max-width: 360px;
    }
}


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

@media (max-width: 600px) {

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

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

    .footer-contact-item p {
        max-width: 100%;
    }

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






.hero-slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: end;
    padding: 140px max(24px, calc((100vw - var(--max))/2)) 125px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
    background: linear-gradient(90deg, rgba(3, 15, 25, .93) 0%, rgba(3, 15, 25, .68) 48%, rgba(3, 15, 25, .19) 100%), var(--slide) center/cover
}

.hero-slide:before {
    content: "";
    position: absolute;
    inset: 0;
     background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.50) 28%,
            rgba(0, 0, 0, 0.34) 55%,
            rgba(0, 0, 0, 0.22) 78%,
            rgba(0, 0, 0, 0.28) 100%
        );
    mask-image: linear-gradient(to right, #000, transparent 78%)
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2
}

.hero-slide.active:after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--slide) center/cover;
    z-index: -1;
    animation: heroZoom 8s ease-out both
}

.hero-slide-copy {
    position: relative;
    z-index: 2;
    max-width: 780px
}

.hero-slide-copy h1 {
    max-width: 760px;
    margin-bottom: 1.1rem
}

.hero-slide-copy p {
    max-width: 620px;
    color: #c6d0d6;
    font-size: 1.05rem
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 25px
}

.scan-line {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 15px var(--cyan);
    animation: scanDown 5s linear infinite
}

.hero-controls {
    position: absolute;
    z-index: 10;
    bottom: 35px;
    right: max(24px, calc((100vw - var(--max))/2));
    display: flex;
    align-items: center;
    gap: 14px
}

.hero-controls>button,
.rail-controls button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(5, 20, 32, .35);
    color: #fff
}

.hero-dots {
    display: flex;
    gap: 7px
}

.hero-dots button {
    width: 42px;
    height: 2px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .35)
}

.hero-dots span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--cyan)
}

.hero-dots button.active span {
    animation: progress 6s linear both
}

.hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .2);
    z-index: 10
}

.hero-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--cyan);
    animation: progress 6s linear infinite
}

.intro-editorial {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 75px;
    align-items: center;
    background: #fff
}

.intro-editorial>div {
    max-width: 600px
}

.intro-editorial figure,
.service-intro figure,
.about-story figure {
    position: relative;
    margin: 0;
    min-height: 480px;
    overflow: hidden
}

.intro-editorial figure img,
.service-intro figure img,
.about-story figure img {
    height: 100%;
    object-fit: cover;
    position: absolute
}

.intro-editorial figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 13px 16px;
    background: var(--navy);
    color: #fff;
    font-size: .62rem;
    letter-spacing: .12em
}

.capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px
}

.capabilities span,
.availability span {
    padding: 8px 11px;
    border: 1px solid var(--line);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase
}

.brand-showcase {
    display: grid;
    grid-template-columns: 1.1fr .9fr 1fr;
    min-height: 500px
}

.brand-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(180deg, rgba(3, 17, 28, .08), rgba(3, 17, 28, .88)), var(--brand-image) center/cover
}

.brand-panel:after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    transition: .3s
}

/* .brand-panel:hover:after {
    inset: 12px;
    border-color: var(--cyan)
} */

.brand-panel>span {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .25)
}

.brand-panel div {
    position: relative;
    z-index: 2
}

.brand-panel small {
    font-size: .65rem;
    letter-spacing: .14em;
    color: var(--cyan)
}

.brand-panel strong {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    margin-top:10px;
}

.brand-panel p {
    max-width: 310px;
    margin: .8rem 0 0;
    color: #d0d8dc
}

.product-showcase,
.essentials-section {
    background: #e8edef
}

.rail-wrap {
    position: relative
}















/* =========================================================
   PRODUCT CARDS — FULL IMAGE VISIBLE
   ========================================================= */

.product-showcase .product-visual {
    position: relative;
    width: 100%;
    height: 300px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f6f2 !important;
}

/* FULL PRODUCT — NO CROPPING */
.product-showcase .product-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 12px !important;
    display: block;
    transform: none !important;
    background: #f7f6f2 !important;
}

/* Hover zoom — very slight */
.product-showcase .product-card:hover .product-visual img {
    transform: scale(1.025) !important;
}

/* Remove blue scanning line from product images */
.product-showcase .product-visual .scan-line {
    display: none !important;
}

/* Same clean label position */
.product-showcase .product-visual .visual-note {
    bottom: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(5, 23, 37, 0.9);
}

/* Product card */
.product-showcase .product-card {
    overflow: hidden;
}

/* Mobile */
@media (max-width: 900px) {
    .product-showcase .product-visual {
        height: 280px !important;
    }
}

@media (max-width: 600px) {
    .product-showcase .product-visual {
        height: 300px !important;
    }

    .product-showcase .product-visual img {
        padding: 15px !important;
    }
}








/* =========================================================
   TESTIMONIAL SLIDER — FIX ALL REVIEWS VISIBILITY
   ========================================================= */

.nv-review-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.nv-review-item {
    display: block !important;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    inset: 0;
    transform: translateX(30px);
    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease;
    pointer-events: none;
}

.nv-review-item.active {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    z-index: 2;
}



/* =========================================================
   NOVERA PREMIUM PRODUCT GALLERY
   ========================================================= */

.nv-product-gallery {
    position: relative;
    padding: 115px 0 95px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(28, 185, 224, .08),
            transparent 32%
        ),
        #eef3f5;
}


/* subtle architectural lines */

.nv-product-gallery::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .4;

    background-image:
        linear-gradient(
            90deg,
            rgba(6,32,51,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(6,32,51,.025) 1px,
            transparent 1px
        );

    background-size:
        100px 100px,
        100px 100px;
}


/* cyan top accent */

.nv-product-gallery::after {
    content: "";
    position: absolute;

    top: 0;
    left: 7%;

    width: 86%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #19bde7,
            transparent
        );
}


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

.nv-product-heading {
    position: relative;
    z-index: 2;

    margin-bottom: 55px;
}

.nv-product-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 17px;

    color: #009cc8;

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

    letter-spacing: .22em;

    text-transform: uppercase;
}

.nv-product-eyebrow::before {
    content: "";

    width: 32px;
    height: 1px;

    background: #12bce7;
}

.nv-product-heading h2 {
    margin: 0;

    color: #062033;

    font-size:
        clamp(42px, 4.5vw, 70px);

    font-weight: 700;

    line-height: .94;

    letter-spacing: -.055em;
}

.nv-product-intro {
    max-width: 350px;

    margin-left: auto;

    padding-left: 28px;

    border-left:
        1px solid #b8cbd3;

    color: #5f7380;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

#nvProductCarousel {
    position: relative;
    z-index: 2;
}

.nv-product-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    background: #fff;

    border:
        1px solid #d4dfe3;

    transition:
        transform .5s cubic-bezier(.2,.75,.2,1),
        box-shadow .5s ease,
        border-color .3s ease;
}

.nv-product-card:hover {
    transform: translateY(-8px);

    border-color: #16b8df;

    box-shadow:
        0 28px 55px
        rgba(5, 28, 43, .14);
}


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

.nv-product-image {
    position: relative;

    height: 330px;

    display: flex;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f6f9fa 55%,
            #e3eaed 100%
        );
}

.nv-product-image::before {
    content: "";

    position: absolute;

    top: 18px;
    left: 18px;

    width: 38px;
    height: 38px;

    border-top:
        1px solid #19bde7;

    border-left:
        1px solid #19bde7;
}

.nv-product-image::after {
    content: "";

    position: absolute;

    right: 18px;
    bottom: 18px;

    width: 38px;
    height: 38px;

    border-right:
        1px solid #19bde7;

    border-bottom:
        1px solid #19bde7;
}


.nv-product-image img {
    position: relative;

    z-index: 2;

    width: 88%;
    height: 88%;

    object-fit: contain;

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

.nv-product-card:hover
.nv-product-image img {
    transform: scale(1.07);
}


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

.nv-product-number {
    position: absolute;

    top: 18px;
    right: 20px;

    z-index: 5;

    color: #09283b;

    font-size: 32px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.06em;

    opacity: .14;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.nv-product-category {
    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 6;

    padding:
        7px 10px;

    background: #09283b;

    color: #fff;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* =========================================================
   SCAN
   ========================================================= */

.nv-product-scan {
    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    z-index: 4;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22,189,231,.9),
            transparent
        );

    box-shadow:
        0 0 15px rgba(22,189,231,.65);

    opacity: .65;
}

.nv-product-card:hover
.nv-product-scan {
    animation:
        nvProductScan
        1.6s
        ease-in-out
        infinite;
}

@keyframes nvProductScan {

    0% {
        transform: translateY(-130px);
        opacity: 0;
    }

    25% {
        opacity: .8;
    }

    75% {
        opacity: .8;
    }

    100% {
        transform: translateY(130px);
        opacity: 0;
    }
}


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

.nv-product-content {
    position: relative;

    min-height: 225px;

    padding:
        24px 22px 20px;
}

.nv-product-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 22px;

    width: 45px;
    height: 2px;

    background: #18bce7;

    transition:
        width .35s ease;
}

.nv-product-card:hover
.nv-product-content::before {
    width: 85px;
}


.nv-product-brand {
    min-height: 30px;

    margin-bottom: 14px;

    color: #009bc5;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .13em;

    line-height: 1.6;

    text-transform: uppercase;
}

.nv-product-content h3 {
    min-height: 62px;

    margin: 0;

    color: #062033;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -.035em;
}


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

.nv-product-footer {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-top: 15px;

    border-top:
        1px solid #d9e1e4;
}

.nv-product-footer a {
    text-decoration: none;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .07em;

    transition:
        color .25s ease,
        transform .25s ease;
}

.nv-product-link {
    color: #062033;
}

.nv-product-quote {
    color: #009bc5;
}

.nv-product-footer a:hover {
    color: #18bce7;

    transform:
        translateX(3px);
}

.nv-product-link span {
    margin-left: 5px;

    font-size: 13px;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.nv-product-controls {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 32px;
}

.nv-product-counter {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #8a9aa2;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .1em;
}

.nv-current {
    color: #062033;
}

.nv-counter-line {
    width: 60px;
    height: 1px;

    background: #a9bbc3;
}

.nv-product-arrows {
    display: flex;

    gap: 7px;
}

.nv-product-arrow {
    width: 52px;
    height: 52px;

    display: flex;

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

    border:
        1px solid #062033;

    background: #062033;

    color: #fff;

    font-size: 18px;

    transition:
        all .3s ease;
}

.nv-product-arrow:hover,
.nv-product-arrow-active:hover {
    background: #18bce7;

    border-color: #18bce7;

    color: #062033;

    transform: translateY(-3px);
}


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

.nv-product-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 50px;

    padding-top: 28px;

    border-top:
        1px solid #cbd7dc;
}

.nv-product-bottom span {
    display: block;

    margin-bottom: 7px;

    color: #009bc5;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .15em;
}

.nv-product-bottom strong {
    color: #062033;

    font-size: 15px;

    font-weight: 600;
}

.nv-product-bottom a {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        15px 20px;

    background: #062033;

    color: #fff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;

    transition: all .3s ease;
}

.nv-product-bottom a:hover {
    background: #18bce7;

    color: #062033;

    transform: translateY(-3px);
}


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

@media (max-width: 1199px) {

    .nv-product-image {
        height: 290px;
    }

    .nv-product-heading h2 {
        font-size: 48px;
    }

}


@media (max-width: 767px) {

    .nv-product-gallery {
        padding: 75px 0 65px;
    }

    .nv-product-heading {
        margin-bottom: 35px;
    }

    .nv-product-heading h2 {
        font-size: 38px;
    }

    .nv-product-intro {
        margin-top: 20px;

        margin-left: 0;

        padding-left: 18px;
    }

    .nv-product-image {
        height: 300px;
    }

    .nv-product-content {
        min-height: 210px;
    }

    .nv-product-controls {
        margin-top: 22px;
    }

    .nv-product-bottom {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 35px;
    }

}


@media (max-width: 480px) {

    .nv-product-gallery {
        padding-left: 15px;
        padding-right: 15px;
    }

    .nv-product-heading h2 {
        font-size: 34px;
    }

    .nv-product-image {
        height: 270px;
    }

    .nv-product-content h3 {
        font-size: 19px;
    }

}






/* =========================================================
   NOVERA PREMIUM CUSTOMER EXPERIENCE
   NO BOOTSTRAP
   ========================================================= */

.nv-review-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #061c2b;
}

.nv-review-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background:
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 120px 100%;
}

.nv-review-container {
    position: relative;
    z-index: 2;
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


/* HEADER */

.nv-review-header {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 55px;
}

.nv-review-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #19bde7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.nv-review-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: #19bde7;
}

.nv-review-title h2 {
    max-width: 800px;
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.055em;
}

.nv-review-title h2 em {
    color: #19bde7;
    font-style: normal;
}

.nv-review-intro {
    max-width: 390px;
    margin: 0 0 4px auto;
    padding-left: 25px;
    border-left: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.8;
}


/* MAIN */

.nv-review-grid {
    display: grid;
    grid-template-columns: 43% 57%;
    min-height: 540px;
}


/* IMAGE */

.nv-review-image {
    position: relative;
    min-height: 540px;
    overflow: hidden;
}

.nv-review-image img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    display: block;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2,.75,.2,1);
}

.nv-review-image:hover img {
    transform: scale(1.05);
}

.nv-review-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(3,18,29,.05) 25%,
            rgba(3,18,29,.9) 100%
        );
}

.nv-review-image-content {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 38px;
    z-index: 3;
}

.nv-review-image-content span {
    display: block;
    margin-bottom: 13px;
    color: #19bde7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.nv-review-image-content h3 {
    max-width: 430px;
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: .98;
    letter-spacing: -.045em;
}

.nv-review-image-content i {
    display: block;
    width: 65px;
    height: 2px;
    margin-top: 24px;
    background: #19bde7;
}

.nv-review-big-number {
    position: absolute;
    top: 25px;
    right: 30px;
    color: rgba(255,255,255,.22);
    font-size: 55px;
    line-height: 1;
    letter-spacing: -.08em;
}


/* CONTENT */

.nv-review-content {
    min-height: 540px;
    padding: 38px 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f3f7f8;
}

.nv-review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nv-review-top > span {
    color: #009bc5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.nv-review-nav {
    display: flex;
    gap: 6px;
}

.nv-review-nav button {
    width: 45px;
    height: 45px;
    border: 1px solid #c8d5da;
    background: transparent;
    color: #062033;
    cursor: pointer;
    transition: .3s ease;
}

.nv-review-nav button:hover {
    border-color: #19bde7;
    background: #19bde7;
    transform: translateY(-2px);
}


/* SLIDER */

.nv-review-slider {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 40px 0 30px;
}

.nv-review-item {
    width: 100%;
    flex: 0 0 100%;
    opacity: 0;
    transform: translateX(30px);
    pointer-events: none;
    transition:
        opacity .45s ease,
        transform .45s ease;
}

.nv-review-item.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.nv-review-quote {
    color: #19bde7;
    font-family: Georgia, serif;
    font-size: 85px;
    line-height: .65;
}

.nv-review-item h3 {
    max-width: 650px;
    margin: 25px 0;
    color: #062033;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.nv-review-item p {
    max-width: 620px;
    margin: 0;
    color: #627680;
    font-size: 15px;
    line-height: 1.8;
}


/* META */

.nv-review-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #d4dfe3;
}

.nv-review-meta strong {
    display: block;
    margin-bottom: 5px;
    color: #062033;
    font-size: 11px;
    text-transform: uppercase;
}

.nv-review-meta span {
    color: #809099;
    font-size: 10px;
}

.nv-review-meta b {
    color: #009bc5;
    font-size: 10px;
}


/* PROGRESS */

.nv-review-progress {
    display: flex;
    gap: 6px;
}

.nv-review-progress span {
    width: 35px;
    height: 2px;
    background: #cbd7db;
    transition: .4s ease;
}

.nv-review-progress span.active {
    width: 70px;
    background: #19bde7;
}


/* TABLET */

@media (max-width: 900px) {

    .nv-review-container {
        width: min(100% - 40px, 700px);
    }

    .nv-review-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .nv-review-intro {
        margin: 0;
    }

    .nv-review-grid {
        grid-template-columns: 1fr;
    }

    .nv-review-image,
    .nv-review-image img {
        min-height: 420px;
    }

    .nv-review-content {
        min-height: 500px;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .nv-review-section {
        padding: 75px 0;
    }

    .nv-review-container {
        width: calc(100% - 30px);
    }

    .nv-review-title h2 {
        font-size: 38px;
    }

    .nv-review-image,
    .nv-review-image img {
        min-height: 350px;
    }

    .nv-review-image-content {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }

    .nv-review-content {
        min-height: 520px;
        padding: 25px 22px;
    }

    .nv-review-item h3 {
        font-size: 28px;
    }

    .nv-review-item p {
        font-size: 13px;
    }

    .nv-review-meta {
        margin-top: 25px;
    }

}







.product-rail,
.essentials-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 3px 1px 20px;
    scrollbar-width: none
}

.product-card {
    flex: 0 0 calc(25% - 12px);
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--line);
    scroll-snap-align: start;
    transition: .3s
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(4, 25, 38, .1);
    border-color: var(--cyan2)
}

.product-visual {
    position: relative;
    aspect-ratio: 1.2;
    overflow: hidden;
    background: #edf1f2
}

.product-visual img {
    height: 100%;
    object-fit: cover;
    transition: .6s cubic-bezier(.2, .8, .2, 1)
}

.product-card:hover .product-visual img {
    transform: scale(1.04)
}

.visual-note {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 8px;
    background: rgba(5, 23, 37, .83);
    color: #d7e0e4;
    font-size: .48rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

.product-card-body {
    padding: 20px
}

.product-card-body small,
.category-label {
    color: var(--cyan2);
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em
}

.product-card-body h3 {
    min-height: 2.4em;
    margin: .55rem 0 1rem
}

.card-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 13px;
    border-top: 1px solid var(--line)
}

.card-actions a {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase
}

.card-actions a:last-child {
    color: var(--cyan2)
}

.rail-controls {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px
}

.rail-controls button {
    border-color: var(--navy);
    background: var(--navy)
}

.all-products {
    margin-top: 18px
}

.services-visual {
    background: var(--navy);
    color: #fff
}

.services-visual .section-head p {
    color: #aebec7
}

.service-gallery {
    display: grid;
    grid-template-columns: 1.1fr .9fr .9fr;
    grid-auto-rows: 285px;
    gap: 10px
}

.service-tile {
    position: relative;
    overflow: hidden
}

.service-tile:first-child {
    grid-row: span 2
}

.service-tile img {
    height: 100%;
    object-fit: cover;
    transition: .7s
}

.service-tile:hover img {
    transform: scale(1.05)
}

.service-tile:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(3, 15, 25, .94))
}

.service-tile>div {
    position: absolute;
    z-index: 2;
    inset: auto 24px 22px
}

.service-tile small,
.service-tile span {
    font-size: .63rem;
    color: var(--cyan);
    font-weight: 800
}

.service-tile h3 {
    margin: .3rem 0
}

.service-tile p {
    margin: 0 0 .5rem;
    color: #c4d0d6;
    font-size: .82rem
}

.solution-visual {
    background: #fff
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line)
}

.solution-grid a {
    position: relative;
    min-height: 260px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background: linear-gradient(rgba(5, 22, 35, .35), rgba(5, 22, 35, .93)), var(--solution) center/cover;
    overflow: hidden
}

.solution-grid a:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cyan);
    transform: translateY(101%);
    transition: .35s
}

.solution-grid a:hover:before {
    transform: none;
    opacity: .88
}

.solution-grid a>* {
    position: relative
}

.solution-grid small {
    color: var(--cyan)
}

.solution-grid a:hover small,
.solution-grid a:hover p {
    color: var(--navy)
}

.solution-grid h3 {
    font-size: 1.55rem;
    margin: .5rem 0
}

.solution-grid p {
    color: #ced8dd;
    margin: 0 0 .5rem
}

.solution-grid span {
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase
}

.process-section {
    background: var(--graphite);
    color: #fff
}

.process-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .2)
}

.process-line:before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--cyan);
    transition: 1.5s
}

.process-line.visible:before {
    width: 100%
}

.process-line article {
    padding: 32px 25px;
    border-left: 1px solid rgba(255, 255, 255, .16)
}

.process-line b {
    color: var(--cyan);
    font-size: .67rem
}

.process-line p {
    color: #aebdc5
}

.essentials-rail .product-card {
    flex-basis: calc(25% - 12px)
}

.experience {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: var(--navy);
    color: #fff;
    padding: 0
}

.experience-image {
    min-height: 560px
}

.experience-image img {
    height: 100%;
    object-fit: cover
}

.experience>div:last-child {
    padding: 70px
}

.principle {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 15px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .16)
}

.principle b {
    color: var(--cyan)
}

.principle p {
    color: #b7c5cc;
    margin: 0
}

.coverage-image {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    min-height: 500px;
    background: #fff
}

.coverage-image>div {
    padding: 70px max(40px, calc((100vw - var(--max))/2));
    padding-right: 55px;
    background: var(--navy2);
    color: #fff
}

.coverage-image>div p {
    color: #b8c6cd
}

.coverage-image figure {
    position: relative;
    margin: 0;
    overflow: hidden
}

.coverage-image img {
    height: 100%;
    object-fit: cover
}

.map-lines {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 58% 46%, var(--cyan) 0 4px, transparent 5px), repeating-radial-gradient(circle at 58% 46%, transparent 0 35px, rgba(32, 189, 229, .25) 36px 37px, transparent 38px 65px)
}

.faq-section {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 70px;
    background: #fff
}

.faq details {
    border-top: 1px solid var(--line);
    padding: 20px 0
}

.faq summary {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    cursor: pointer
}

.faq summary:after {
    content: "+";
    color: var(--cyan2)
}

.faq details[open] summary:after {
    content: "−"
}

.faq p {
    margin: 12px 0 0
}

.final-cta {
    min-height: 470px;
    padding: 80px max(24px, calc((100vw - var(--max))/2));
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(90deg, rgba(3, 15, 25, .92), rgba(3, 15, 25, .38)), var(--cta) center/cover fixed
}

.final-cta>div {
    max-width: 720px
}

.final-cta p {
    color: #c5cfd4
}

.page-hero {
    position: relative;
    min-height: 440px;
    padding: 145px max(24px, calc((100vw - var(--max))/2)) 60px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(3, 16, 27, .92), rgba(3, 16, 27, .28)), var(--hero) center/cover
}

.page-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(32, 189, 229, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 189, 229, .07) 1px, transparent 1px);
    background-size: 45px 45px;
    mask-image: linear-gradient(90deg, #000, transparent)
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 920px
}

.page-hero h1 {
    font-size: clamp(2.7rem, 5vw, 4.25rem);
    margin-bottom: .75rem
}

.page-hero p {
    max-width: 680px;
    color: #ccd6db
}

.breadcrumbs {
    margin-bottom: 18px;
    color: #b7c5cc;
    font-size: .62rem;
    text-transform: uppercase
}

.breadcrumbs a {
    color: var(--cyan)
}

.catalogue-tools {
    position: sticky;
    top: 70px;
    z-index: 40;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px max(24px, calc((100vw - var(--max))/2));
    background: rgba(244, 246, 246, .97);
    border-bottom: 1px solid var(--line)
}

.search-wrap {
    flex: 1
}

.search-wrap input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #fff
}

.filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.filter {
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase
}

.filter.active,
.filter:hover {
    background: var(--navy);
    color: #fff
}

.catalogue {
    background: #eef1f2
}

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px
}

.catalogue-grid .product-card {
    grid-column: span 3;
    min-width: 0
}

.catalogue-grid .product-card:nth-child(8n+1) {
    grid-column: span 6;
    display: grid;
    grid-template-columns: 1.15fr .85fr
}

.catalogue-grid .product-card:nth-child(8n+1) .product-visual {
    aspect-ratio: auto
}

.catalogue-grid .product-card:nth-child(6n) {
    grid-column: span 6
}

.empty-state {
    grid-column: 1/-1;
    padding: 50px;
    background: #fff;
    text-align: center
}

.product-intro,
.service-intro,
.about-story {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 65px;
    align-items: center;
    background: #fff
}

.detail-product-image .product-visual {
    aspect-ratio: 1.3;
    box-shadow: var(--shadow)
}

.product-facts {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    background: var(--navy);
    color: #fff
}

.product-facts p {
    color: #b9c7ce
}

.spec-panel {
    padding: 28px;
    background: #fff;
    color: var(--ink);
    border-top: 3px solid var(--cyan)
}

.spec-row {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

.spec-row span {
    color: var(--muted)
}

.availability {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 22px 0
}

.applications {
    background: #e8edef
}

.application-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line)
}

.application-list>div {
    padding: 24px;
    background: #fff
}

.related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.related .product-card {
    min-width: 0
}

.form-section {
    background: #e8edef
}

.enquiry-form {
    max-width: 1100px;
    margin: auto;
    padding: 38px;
    background: #fff;
    border-top: 3px solid var(--cyan)
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

.form-grid label {
    font-size: .63rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--muted)
}

.form-grid input,
.form-grid select,
.form-grid textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink)
}

.form-grid .full {
    grid-column: 1/-1
}

.enquiry-form .button {
    margin-top: 18px
}

.form-note {
    font-size: .72rem
}

.form-result {
    margin-top: 15px;
    padding: 16px;
    background: #e3f7fb;
    white-space: pre-wrap
}

.service-catalogue {
    display: grid;
    gap: 16px;
    background: #e9edef
}

.service-feature {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 390px;
    background: #fff
}

.service-feature:nth-child(even) {
    grid-template-columns: .9fr 1.1fr
}

.service-feature:nth-child(even) img {
    order: 2
}

.service-feature img {
    height: 100%;
    object-fit: cover
}

.service-feature div {
    padding: 48px;
    align-self: center
}

.service-feature small {
    color: var(--cyan2)
}

.service-feature span {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--cyan2)
}

.service-benefits {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 60px
}

.benefit-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line)
}

.benefit-list>div {
    padding: 23px;
    background: #fff
}

.image-strip {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1fr;
    height: 330px
}

.image-strip img {
    height: 100%;
    object-fit: cover
}

.solution-story {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 460px;
    background: #fff
}

.solution-story.reverse {
    grid-template-columns: .9fr 1.1fr;
    background: #e8edef
}

.solution-story.reverse figure {
    order: 2
}

.solution-story figure {
    margin: 0;
    overflow: hidden
}

.solution-story img {
    height: 100%;
    object-fit: cover
}

.solution-story>div {
    padding: 60px;
    align-self: center
}

.area-split {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 65px;
    align-items: center;
    background: #fff
}

.area-split figure {
    position: relative;
    margin: 0;
    height: 500px;
    overflow: hidden
}

.area-split img {
    height: 100%;
    object-fit: cover
}

.contact-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 0
}

.contact-details {
    padding: 50px;
    background: var(--navy);
    color: #fff
}

.contact-item {
    padding: 17px 0;
    border-top: 1px solid rgba(255, 255, 255, .17)
}

.contact-item small {
    display: block;
    color: var(--cyan);
    font-size: .62rem;
    letter-spacing: .1em
}

.contact-layout .form-section {
    padding: 0;
    background: transparent
}

.map-image {
    position: relative;
    height: 380px
}

.map-image img {
    height: 100%;
    object-fit: cover
}

.map-image div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 22px;
    background: rgba(3, 20, 33, .9);
    color: #fff
}

.map-image strong {
    display: block
}

.legal {
    max-width: 980px;
    margin: auto
}

.site-footer {
    padding: 65px max(24px, calc((100vw - var(--max))/2)) 24px;
    background: #03131f;
    color: #fff
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 45px
}

.footer-brand img {
    width: 230px;
    filter: brightness(0) invert(1);
    margin-bottom: 18px
}

.footer-brand p {
    max-width: 430px;
    color: #9faeb6
}

.footer-brand span,
.site-footer h3 {
    font-size: .62rem;
    color: var(--cyan);
    letter-spacing: .1em;
    text-transform: uppercase
}

.site-footer a {
    display: block;
    padding: .25rem 0;
    color: #bac6cc;
    font-size: .8rem
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 42px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: #84959e;
    font-size: .67rem
}

.footer-bottom div {
    display: flex;
    gap: 18px
}

.footer-bottom a {
    display: inline;
    padding: 0
}

.mobile-cta {
    display: none
}

.image-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s cubic-bezier(.2, .75, .2, 1)
}

.image-reveal.visible {
    clip-path: inset(0)
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: .7s
}

.reveal.visible {
    opacity: 1;
    transform: none
}

@keyframes heroZoom {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.07)
    }
}

@keyframes scanDown {
    0% {
        top: 0;
        opacity: 0
    }

    12%,
    88% {
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

@keyframes progress {
    to {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important
    }

    .image-reveal {
        clip-path: none
    }

    .reveal {
        opacity: 1;
        transform: none
    }

    .final-cta {
        background-attachment: scroll
    }
}

[hidden] {
    display: none !important
}

.hero-slide-copy p {
    color: #edf3f5;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .5)
}

.image-reveal {
    clip-path: inset(0)
}

.catalogue-grid.is-filtered .product-card:not([hidden]) {
    grid-column: span 6
}

.catalogue-grid.is-filtered .product-card:not([hidden]) .product-visual {
    aspect-ratio: 1.35
}