/* ==========================================================
   VIVWELD SOLUTIONS
   COMPLETE STYLE SYSTEM
   BLUE / SILVER / WHITE / LIQUID GLASS
========================================================== */

:root {
    --blue-950: #031126;
    --blue-900: #06152e;
    --blue-850: #08204a;
    --blue-800: #0a2145;
    --blue-700: #124bce;
    --blue-600: #1d6cff;
    --blue-500: #3c8dff;
    --blue-400: #69c7ff;

    --silver-900: #536273;
    --silver-700: #8796a7;
    --silver-500: #aeb8c4;
    --silver-300: #d7dee6;
    --silver-100: #f2f5f8;

    --white: #ffffff;
    --white-soft: #f5f8fc;

    --text: #ffffff;
    --text-soft: #d7e2f0;
    --muted: #9cb0c8;

    --glass: rgba(13, 43, 85, .38);
    --glass-strong: rgba(18, 61, 118, .52);
    --glass-light: rgba(255, 255, 255, .065);
    --glass-border: rgba(215, 230, 250, .20);
    --glass-border-strong: rgba(255, 255, 255, .34);

    --glow: rgba(29, 108, 255, .34);
    --glow-soft: rgba(60, 141, 255, .18);
    --cyan-glow: rgba(105, 199, 255, .12);

    --shadow: 0 24px 80px rgba(1, 11, 30, .34);
    --shadow-soft: 0 14px 45px rgba(1, 11, 30, .22);

    --ease: cubic-bezier(.22, 1, .36, 1);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 36px;
    --container: 1240px;
}

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

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: #063b91 !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(29,108,255,.18), transparent 30%),
        radial-gradient(circle at 86% 26%, rgba(105,199,255,.08), transparent 28%),
        radial-gradient(circle at 55% 90%, rgba(60,141,255,.08), transparent 30%),
        linear-gradient(135deg, var(--blue-950), var(--blue-900) 48%, #0a2145);
    font-family: "Poppins", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: -25%;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(circle at 25% 30%, rgba(29,108,255,.12), transparent 25%),
        radial-gradient(circle at 75% 60%, rgba(105,199,255,.07), transparent 24%);
    filter: blur(80px);
}

body.menu-open {
    overflow: hidden;
}

::selection {
    color: #063b91 !important;
    background: rgba(29,108,255,.42);
}

a {
    color: #063b91 !important;
    text-decoration: none;
}

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

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

button {
    cursor: pointer;
}

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

section {
    position: relative;
    isolation: isolate;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    z-index: 3000;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-400), var(--white));
    box-shadow: 0 0 16px rgba(60,141,255,.7);
}

.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(circle,
            rgba(29,108,255,.24) 0%,
            rgba(60,141,255,.16) 24%,
            rgba(105,199,255,.08) 44%,
            transparent 72%);
    filter: blur(48px);
    mix-blend-mode: screen;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    transition: opacity .5s ease;
}

.cursor-glow.is-visible {
    opacity: 1;
}

.spark-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle, rgba(29,108,255,.16), transparent 35%),
        linear-gradient(135deg, #031126, #06152e);
    transition: opacity .7s var(--ease), visibility .7s var(--ease);
}

.preloader.is-hidden,
.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.15);
    border-top-color: var(--blue-400);
    border-right-color: var(--silver-light);
    box-shadow: 0 0 35px rgba(29,108,255,.3);
    animation: loaderSpin 1s linear infinite;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

/* ---------- NAVBAR ---------- */

.navbar {
    position: fixed;
    top: 18px;
    left: 50%;
    width: min(calc(100% - 36px), 1240px);
    transform: translateX(-50%);
    z-index: 2000;
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(9,37,78,.48));
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 18px 55px rgba(0,10,28,.26);
    transition: .45s var(--ease);
}

.navbar .container {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.navbar.scrolled {
    top: 10px;
    background: rgba(7,27,58,.68);
    border-color: rgba(255,255,255,.25);
}

.logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 150px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(29,108,255,.25));
}

.nav-links {
    margin-left: auto;
}

.nav-links ul {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.nav-links a {
    position: relative;
    display: inline-flex;
    padding: 11px 13px;
    color: #063b91 !important;
    font-size: .86rem;
    font-weight: 500;
    border-radius: 12px;
    transition: .3s var(--ease);
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue-400), var(--white));
    transform: scaleX(0);
    transform-origin: center;
    transition: .3s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
    color: #063b91 !important;
    background: rgba(255,255,255,.055);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.2);
    font-weight: 600;
    font-size: .88rem;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.btn-primary {
    color: #063b91 !important;
    background:
        linear-gradient(135deg, rgba(29,108,255,.95), rgba(18,75,206,.85));
    box-shadow:
        0 12px 30px rgba(29,108,255,.24),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-primary:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.48);
    box-shadow:
        0 18px 42px rgba(29,108,255,.36),
        inset 0 1px 0 rgba(255,255,255,.32);
}

.btn-secondary {
    color: #063b91 !important;
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(70,130,220,.10));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(105,199,255,.55);
    box-shadow: 0 16px 40px rgba(29,108,255,.20);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--white);
}

/* ---------- HERO ---------- */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 150px 0 90px;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
    opacity: .26;
    filter: saturate(.7) contrast(1.05);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(3,17,38,.94) 0%, rgba(5,22,48,.78) 44%, rgba(5,20,44,.52) 100%),
        linear-gradient(180deg, rgba(4,16,32,.34), rgba(4,16,32,.85));
}

.hero-glow {
    position: absolute;
    width: 650px;
    height: 650px;
    right: -180px;
    top: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29,108,255,.24), rgba(60,141,255,.08) 40%, transparent 70%);
    filter: blur(30px);
    z-index: -1;
}

.hero-container {
    position: relative;
}

.hero-content {
    width: min(720px, 100%);
}

.hero-subtitle {
    display: inline-flex;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid rgba(105,199,255,.28);
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(15px);
    color: #063b91 !important;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
}

.hero h1 {
    margin-top: 24px;
    font-size: clamp(3rem, 7vw, 6.2rem);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;
    text-wrap: balance;
}

.hero h1::first-line {
    color: #063b91 !important;
}

.hero p {
    max-width: 650px;
    margin-top: 25px;
    color: #063b91 !important;
    font-size: 1rem;
    line-height: 1.85;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 48px;
}

.hero-stat {
    min-width: 145px;
    padding: 16px 18px;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero-stat h2 {
    font-size: 1.8rem;
    color: #063b91 !important;
}

.hero-stat span {
    color: #063b91 !important;
    font-size: .72rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #063b91 !important;
    font-size: .7rem;
    letter-spacing: .16em;
}

/* ---------- SECTIONS ---------- */

.about,
.services,
.industries,
.projects,
.why-us,
.safety,
.testimonials,
.contact {
    padding: 120px 0;
}

.about,
.industries,
.safety,
.contact {
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.025));
}

.section-header {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-subtitle {
    display: inline-block;
    margin-bottom: 12px;
    color: #063b91 !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.section-header h2 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.section-header p {
    margin-top: 16px;
    color: #063b91 !important;
    line-height: 1.8;
}

/* ---------- GLASS CARDS ---------- */

.about-content,
.service-card,
.industry-card,
.project-card,
.why-card,
.safety-content,
.testimonial-card,
.contact-wrapper,
.contact-item,
.about-image {
    position: relative;
    border: 1px solid var(--glass-border);
    background:
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(15,55,105,.20));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 22px 65px rgba(2,14,36,.22);
}

.about-grid,
.services-grid,
.industries-grid,
.projects-grid,
.why-grid {
    display: grid;
    gap: 22px;
}

/* ---------- ABOUT ---------- */

.about-grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
}

.about-content {
    padding: 38px;
    border-radius: var(--radius-lg);
}

.about-content h3 {
    font-size: 2rem;
    margin-bottom: 16px;
}

.about-content p {
    color: #063b91 !important;
    line-height: 1.85;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #063b91 !important;
    font-size: .86rem;
}

.feature-item i {
    color: #063b91 !important;
}

.about-image {
    min-height: 430px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-image img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    opacity: .86;
}

/* ---------- SERVICES ---------- */

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

.service-card {
    padding: 30px;
    min-height: 260px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.service-card::after,
.industry-card::after,
.why-card::after,
.testimonial-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(60,141,255,.18), transparent 45%);
    opacity: 0;
    transition: opacity .35s ease;
}

.service-card:hover,
.industry-card:hover,
.why-card:hover,
.testimonial-card:hover {
    transform: translateY(-7px);
    border-color: rgba(105,199,255,.38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 28px 75px rgba(2,14,36,.32),
        0 0 35px rgba(29,108,255,.08);
}

.service-card:hover::after,
.industry-card:hover::after,
.why-card:hover::after,
.testimonial-card:hover::after {
    opacity: 1;
}

.service-card > *,
.industry-card > *,
.why-card > *,
.testimonial-card > * {
    position: relative;
    z-index: 1;
}

.service-card i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: #063b91 !important;
    background: rgba(29,108,255,.12);
    border: 1px solid rgba(105,199,255,.2);
    font-size: 1.25rem;
}

.service-card h3 {
    margin-top: 24px;
    font-size: 1.25rem;
}

.service-card p {
    margin-top: 12px;
    color: #063b91 !important;
    line-height: 1.7;
}

/* ---------- INDUSTRIES ---------- */

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

.industry-card {
    min-height: 220px;
    padding: 28px;
    border-radius: var(--radius-lg);
    transition: .45s var(--ease);
}

.industry-card i {
    color: #063b91 !important;
    font-size: 1.8rem;
}

.industry-card h3 {
    margin-top: 22px;
}

.industry-card p {
    margin-top: 10px;
    color: #063b91 !important;
    line-height: 1.7;
}

/* ---------- WHY US ---------- */

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

.why-card {
    padding: 26px;
    border-radius: var(--radius-lg);
    transition: .45s var(--ease);
}

.why-card i {
    color: #063b91 !important;
    font-size: 1.5rem;
}

.why-card h3 {
    margin-top: 18px;
    font-size: 1.05rem;
}

.why-card p {
    margin-top: 9px;
    color: #063b91 !important;
    font-size: .84rem;
    line-height: 1.7;
}

/* ---------- PROJECTS ---------- */

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

.project-card {
    min-height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .5s var(--ease), border-color .4s ease;
}

.project-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform .7s var(--ease), filter .7s ease;
}

.project-card:hover img {
    transform: scale(1.06);
    filter: saturate(1.12);
}

.project-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 28px;
    background: linear-gradient(transparent, rgba(2,13,32,.95));
}

.project-overlay h3 {
    font-size: 1.25rem;
}

.project-overlay p {
    margin-top: 6px;
    color: #063b91 !important;
    font-size: .8rem;
}

/* ---------- SAFETY ---------- */

.safety-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 42px;
    border-radius: var(--radius-lg);
}

.safety-content h3 {
    font-size: 2rem;
}

.safety-content p {
    margin-top: 14px;
    color: #063b91 !important;
    line-height: 1.8;
}

.safety-features {
    display: grid;
    gap: 12px;
    margin-top: 25px;
}

.safety-item {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}

.safety-icon {
    color: #063b91 !important;
}

.safety-item p {
    margin: 0;
}

/* ---------- TESTIMONIALS ---------- */

.testimonial-wrapper {
    position: relative;
}

.testimonial-card {
    padding: 32px;
    border-radius: var(--radius-lg);
    transition: .45s var(--ease);
}

.testimonial-card p {
    color: #063b91 !important;
    line-height: 1.8;
}

.testimonial-card h4 {
    margin-top: 20px;
    color: #063b91 !important;
}

.testimonial-card span {
    color: #063b91 !important;
    font-size: .75rem;
}

/* ---------- CONTACT ---------- */

.contact-wrapper {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 28px;
    padding: 38px;
    border-radius: var(--radius-lg);
}

.contact-info {
    display: grid;
    gap: 14px;
    align-content: start;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.035);
}

.contact-item i {
    color: #063b91 !important;
    width: 22px;
    text-align: center;
}

.contact-item span {
    color: #063b91 !important;
    font-size: .82rem;
}

.contact-form {
    display: grid;
    gap: 14px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    color: #063b91 !important;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(215,230,250,.14);
    border-radius: 14px;
    outline: none;
    padding: 14px 16px;
    transition: .3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: rgba(105,199,255,.55);
    box-shadow: 0 0 0 4px rgba(29,108,255,.08);
    background: rgba(255,255,255,.065);
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form select option {
    background: var(--blue-900);
    color: #063b91 !important;
}

/* ---------- FOOTER ---------- */

.footer {
    padding: 75px 0 25px;
    border-top: 1px solid rgba(215,230,250,.12);
    background: rgba(2,12,29,.55);
}

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

.footer-logo img {
    width: 170px;
}

.footer p,
.footer a {
    color: #063b91 !important;
    font-size: .82rem;
    line-height: 1.8;
}

.footer h3 {
    margin-bottom: 12px;
    color: #063b91 !important;
    font-size: .95rem;
}

.footer-column {
    display: grid;
    align-content: start;
    gap: 4px;
}

.social-links {
    display: flex;
    gap: 9px;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    transition: .3s ease;
}

.social-links a:hover {
    color: #063b91 !important;
    border-color: rgba(105,199,255,.45);
    background: rgba(29,108,255,.14);
    transform: translateY(-3px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 55px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* ---------- BACK TO TOP ---------- */

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1500;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    color: #063b91 !important;
    background: rgba(12,45,88,.54);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: .35s var(--ease);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-4px);
    border-color: rgba(105,199,255,.5);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1050px) {
    .nav-links {
        display: none;
    }

    .nav-btn {
        margin-left: auto;
    }

    .menu-toggle {
        display: flex;
    }

    .about-grid,
    .contact-wrapper,
    .safety-content {
        grid-template-columns: 1fr;
    }

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

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

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

@media (max-width: 700px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .navbar {
        width: calc(100% - 20px);
        top: 10px;
    }

    .navbar .container {
        min-height: 64px;
    }

    .logo img {
        width: 125px;
    }

    .nav-btn {
        display: none;
    }

    .hero {
        padding-top: 125px;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 13vw, 4.2rem);
    }

    .hero p {
        font-size: .9rem;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-stat {
        min-width: 0;
    }

    .about,
    .services,
    .industries,
    .projects,
    .why-us,
    .safety,
    .testimonials,
    .contact {
        padding: 82px 0;
    }

    .services-grid,
    .industries-grid,
    .projects-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-content,
    .safety-content,
    .contact-wrapper {
        padding: 24px;
    }

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

    .footer-bottom {
        flex-direction: column;
    }

    .cursor-glow {
        display: none;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .cursor-glow {
        display: none;
    }
}
/* ==========================================================
   VIVWELD — SILVER GLASS → BLUE GLASS HOVER
========================================================== */

.service-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(210, 215, 220, 0.32),
            rgba(255, 255, 255, 0.12)
        );

    border: 1px solid rgba(180, 188, 198, 0.45);

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

    transition:
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s ease;
}


/* Hover → BLUE GLASS */

.service-card:hover {

    background:
        linear-gradient(
            145deg,
            rgba(23, 105, 255, 0.42),
            rgba(23, 105, 255, 0.16)
        );

    border-color:
        rgba(77, 163, 255, 0.75);

    box-shadow:
        0 20px 55px rgba(23, 105, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);

    transform:
        translateY(-6px);
}


/* Blue accent on the service icon */

.service-card:hover i,
.service-card:hover .service-icon {

    color: #063b91 !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(77, 163, 255, 0.75)
        );
}

/* ==========================================================
   VIVWELD — FINAL SILVER / BLUE THEME
   This section intentionally overrides the legacy theme.
========================================================== */

:root {
    --blue-950: #07152b;
    --blue-900: #0b2142;
    --blue-850: #12315b;
    --blue-800: #174278;
    --blue-700: #0f57d7;
    --blue-600: #1769ff;
    --blue-500: #2f7dff;
    --blue-400: #4da3ff;

    --silver-900: #59636e;
    --silver-700: #7f8994;
    --silver-500: #aeb7c0;
    --silver-300: #d7dce1;
    --silver-100: #f3f5f7;
    --silver-light: #dfe4e8;

    --white: #ffffff;
    --white-soft: #f8fafc;

    --text: #17304e;
    --text-soft: #405366;
    --muted: #647383;

    --glass: rgba(255,255,255,.46);
    --glass-strong: rgba(255,255,255,.64);
    --glass-light: rgba(255,255,255,.34);
    --glass-border: rgba(104,116,128,.25);
    --glass-border-strong: rgba(255,255,255,.72);

    --glow: rgba(23,105,255,.24);
    --glow-soft: rgba(23,105,255,.12);
    --cyan-glow: rgba(77,163,255,.12);

    --shadow: 0 24px 80px rgba(48,58,68,.20);
    --shadow-soft: 0 14px 45px rgba(48,58,68,.14);
}

/* ---------- SILVER PAGE ---------- */

html {
    scroll-padding-top: 94px;
}

body {
    color: #063b91 !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.72), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(23,105,255,.07), transparent 26%),
        linear-gradient(135deg, #b9c0c7 0%, #e4e7ea 45%, #c6cdd3 100%);
}

body::before {
    background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,.38), transparent 28%),
        radial-gradient(circle at 78% 65%, rgba(23,105,255,.07), transparent 26%);
    filter: blur(70px);
}

::selection {
    color: #063b91 !important;
    background: rgba(23,105,255,.55);
}

/* ---------- NAVBAR: SLIM SILVER GLASS ---------- */

.navbar {
    top: 14px;
    width: min(calc(100% - 32px), 1240px);
    height: 72px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.66), rgba(195,202,209,.48)) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 16px 45px rgba(50,60,70,.18);
    overflow: visible !important;
}

.navbar .container {
    position: relative;
    min-height: 70px;
    height: 70px;
    padding: 0 18px;
    display: flex;
    align-items: center;
}

.navbar .logo {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 10;
    perspective: none !important;
}

.navbar .logo img,
.navbar .logo img.vivweld-logo-3d,
.navbar .logo img.vivweld-logo-visible {
    width: auto;
    height: 50px;
    max-width: 150px;
    object-fit: contain;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 4px 8px rgba(35,45,55,.18)) !important;
    transition: filter .3s ease !important;
}

.navbar .logo:hover img {
    transform: none !important;
    filter: drop-shadow(0 0 12px rgba(23,105,255,.25)) !important;
}

.nav-links {
    margin: 0 auto;
    padding-right: 165px;
}

.nav-links ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.nav-links a {
    color: #063b91 !important;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
    transition: color .3s ease, text-shadow .3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: #063b91 !important;
    text-shadow: 0 0 10px rgba(255,255,255,.8);
}

.nav-btn {
    position: absolute;
    left: 18px;
    margin: 0 !important;
}

.navbar.scrolled {
    top: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.76), rgba(190,198,205,.58)) !important;
}

/* ---------- BUTTONS ---------- */

.btn-primary {
    color: #063b91 !important;
    background: linear-gradient(135deg, #1769ff, #0f57d7) !important;
    border-color: rgba(255,255,255,.62) !important;
    box-shadow:
        0 10px 28px rgba(23,105,255,.20),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-primary:hover {
    color: #063b91 !important;
    background: linear-gradient(135deg, #f4f6f8, #c9d0d6) !important;
    border-color: rgba(23,105,255,.34) !important;
    box-shadow: 0 14px 35px rgba(55,65,75,.18);
}

.btn-secondary {
    color: #063b91 !important;
    background: rgba(255,255,255,.38) !important;
    border-color: rgba(23,105,255,.25) !important;
}

.btn-secondary:hover {
    color: #063b91 !important;
    background: rgba(255,255,255,.68) !important;
    border-color: rgba(255,255,255,.82) !important;
}

/* ---------- HERO ---------- */

.hero {
    min-height: 780px;
    padding-top: 145px;
    background: linear-gradient(135deg, #b8c0c7, #e2e5e8);
}

.hero-video {
    opacity: .35;
    filter: grayscale(.55) saturate(.65) contrast(.9);
}

.hero-overlay {
    background:
        linear-gradient(135deg, rgba(214,219,224,.88), rgba(237,240,243,.72)) !important;
}

.hero-glow {
    background: radial-gradient(circle, rgba(23,105,255,.14), transparent 68%) !important;
}

.hero-subtitle,
.hero h1,
.hero p {
    color: #063b91 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.hero h1 {
    color: #063b91 !important;
}

.hero-buttons .btn-secondary {
    color: #063b91 !important;
}

.hero-stat {
    background: rgba(255,255,255,.38) !important;
    border-color: rgba(255,255,255,.62) !important;
    color: #063b91 !important;
}

/* ---------- SECTIONS ---------- */

.about,
.services,
.industries,
.projects,
.why-us,
.safety,
.testimonials,
.contact {
    background:
        linear-gradient(135deg, rgba(238,241,244,.76), rgba(193,200,207,.62));
}

.section-subtitle {
    color: #063b91 !important;
}

.section-header h2,
.section-header h3 {
    color: #063b91 !important;
}

.section-header p {
    color: #063b91 !important;
}

/* ---------- SILVER GLASS CARDS ---------- */

.about-content,
.service-card,
.industry-card,
.project-card,
.why-card,
.safety-content,
.testimonial-card,
.contact-wrapper {
    background:
        linear-gradient(145deg, rgba(255,255,255,.56), rgba(214,219,224,.34)) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow:
        0 18px 45px rgba(55,65,75,.12),
        inset 0 1px 0 rgba(255,255,255,.72);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.service-card,
.industry-card,
.why-card,
.testimonial-card {
    transition:
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        transform .45s var(--ease) !important;
}

/* SILVER → BLUE GLASS ON HOVER */

.service-card:hover,
.industry-card:hover,
.why-card:hover,
.testimonial-card:hover {
    background:
        linear-gradient(145deg, rgba(23,105,255,.72), rgba(45,125,235,.42)) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow:
        0 22px 55px rgba(23,105,255,.24),
        inset 0 1px 0 rgba(255,255,255,.45);
    transform: translateY(-6px);
}

.service-card h3,
.industry-card h3,
.why-card h3,
.testimonial-card h4 {
    color: #063b91 !important;
    transition: color .35s ease, text-shadow .35s ease;
}

.service-card p,
.industry-card p,
.why-card p,
.testimonial-card p {
    color: #063b91 !important;
}

.service-card:hover h3,
.industry-card:hover h3,
.why-card:hover h3,
.testimonial-card:hover h4,
.service-card:hover p,
.industry-card:hover p,
.why-card:hover p,
.testimonial-card:hover p,
.service-card:hover span,
.industry-card:hover span,
.why-card:hover span,
.testimonial-card:hover span {
    color: #063b91 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.10);
}

.service-card i,
.why-card i,
.contact-item i,
.feature-item i,
.safety-icon {
    color: #063b91 !important;
}

.service-card i {
    background: rgba(23,105,255,.08) !important;
    border-color: rgba(23,105,255,.18) !important;
}

.service-card:hover i,
.why-card:hover i {
    color: #063b91 !important;
    background: rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.42) !important;
}

/* ---------- PROJECTS ---------- */

.project-overlay {
    background: linear-gradient(transparent, rgba(40,48,56,.88)) !important;
}

.project-overlay h3,
.project-overlay p {
    color: #063b91 !important;
}

/* ---------- TESTIMONIAL SCROLLER ---------- */

.testimonial-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 2px 24px;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.testimonial-track {
    display: flex;
    width: max-content;
    gap: 24px;
    animation: vivweldTestimonials 34s linear infinite;
}

.testimonial-wrapper:hover .testimonial-track {
    animation-play-state: paused;
}

.testimonial-card {
    flex: 0 0 370px;
    min-height: 250px;
}

.stars {
    color: #063b91 !important;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

@keyframes vivweldTestimonials {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 12px)); }
}

/* ---------- CONTACT / FORM ---------- */

.contact-item {
    background: rgba(255,255,255,.34) !important;
    border: 1px solid rgba(255,255,255,.55);
}

.contact-item h3,
.contact-item p {
    color: #063b91 !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    color: #063b91 !important;
    background: rgba(255,255,255,.42) !important;
    border-color: rgba(95,108,120,.24) !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #063b91 !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: rgba(23,105,255,.55) !important;
    box-shadow: 0 0 0 4px rgba(23,105,255,.08) !important;
}

.contact-form select option {
    background: #eef1f4;
    color: #063b91 !important;
}

/* ---------- MAP ---------- */

.map {
    border: 1px solid rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.34) !important;
    box-shadow: 0 18px 45px rgba(55,65,75,.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ---------- FOOTER ---------- */

.footer {
    background:
        linear-gradient(135deg, #aeb7c0, #d9dee3) !important;
    border-top: 1px solid rgba(255,255,255,.72) !important;
}

.footer p,
.footer a {
    color: #063b91 !important;
}

.footer h3 {
    color: #063b91 !important;
}

.footer a:hover {
    color: #063b91 !important;
}

.footer-logo {
    width: 170px !important;
    height: auto !important;
    object-fit: contain;
}

.social-links a {
    color: #063b91 !important;
    background: rgba(255,255,255,.36) !important;
    border-color: rgba(255,255,255,.62) !important;
}

.social-links a:hover {
    color: #063b91 !important;
    background: #1769ff !important;
    border-color: #1769ff !important;
}

.footer-bottom {
    border-top-color: rgba(255,255,255,.55) !important;
}

/* ---------- BACK TO TOP / SCROLL ---------- */

.back-to-top {
    color: #063b91 !important;
    background: rgba(255,255,255,.56) !important;
    border-color: rgba(255,255,255,.72) !important;
}

.back-to-top:hover {
    color: #063b91 !important;
    background: #1769ff !important;
}

.scroll-progress {
    background: linear-gradient(90deg, #1769ff, #4da3ff) !important;
}

/* ---------- OLD ANIMATION COLOUR CLEANUP ---------- */

.welding-spark,
.vw-floating-particle,
.vw-spark,
.cursor-glow {
    --spark-color: #1769ff;
}

@media (max-width: 1050px) {
    .navbar .logo {
        right: 18px;
    }

    .nav-links {
        padding-right: 0;
    }

    .nav-btn {
        display: none;
    }
}

@media (max-width: 700px) {
    .navbar {
        top: 8px;
        width: calc(100% - 16px);
        height: 64px;
    }

    .navbar .container {
        height: 62px;
        min-height: 62px;
    }

    .navbar .logo {
        right: 14px;
    }

    .navbar .logo img,
    .navbar .logo img.vivweld-logo-3d,
    .navbar .logo img.vivweld-logo-visible {
        height: 44px;
        max-width: 130px;
    }

    .menu-toggle {
        position: absolute;
        left: 16px;
        z-index: 20;
    }

    .testimonial-card {
        flex-basis: min(82vw, 340px);
    }

    .testimonial-track {
        gap: 16px;
        animation-duration: 28s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-track {
        animation: none !important;
    }
}


/* ==========================================================
   VIVWELD FINAL HYBRID NAVBAR
   Navigation layout from Version 1
   Silver/blue visual theme from Version 2
========================================================== */

.navbar {
    position: fixed !important;
    top: 18px !important;
    left: 50% !important;
    width: min(calc(100% - 36px), 1240px) !important;
    height: auto !important;
    min-height: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 2000 !important;

    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.66),
            rgba(195,202,209,.48)
        ) !important;

    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 18px 55px rgba(50,60,70,.18) !important;

    overflow: visible !important;
}

.navbar .container {
    min-height: 76px !important;
    height: 76px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
}

/* Logo = LEFT, as in Version 1 */
.navbar .logo {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
}

.navbar .logo img,
.navbar .logo img.vivweld-logo-3d,
.navbar .logo img.vivweld-logo-visible {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    object-fit: contain !important;

    opacity: 1 !important;
    transform: none !important;
    animation: none !important;

    filter:
        drop-shadow(0 4px 8px rgba(35,45,55,.18)) !important;

    transition: filter .3s ease !important;
}

.navbar .logo:hover img {
    transform: none !important;
    filter:
        drop-shadow(0 0 12px rgba(23,105,255,.25)) !important;
}

/* Navigation = CENTER */
.navbar .nav-links {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: 0 !important;
}

.navbar .nav-links ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
}

.navbar .nav-links a {
    color: #063b91 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
    transition: color .3s ease, text-shadow .3s ease !important;
}

.navbar .nav-links a:hover,
.navbar .nav-links a.active {
    color: #063b91 !important;
    text-shadow: 0 0 10px rgba(255,255,255,.8) !important;
}

/* Quote button = RIGHT */
.navbar .nav-btn {
    order: 3 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Canadian badge = far right */
.navbar .proudly-canadian {
    order: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-left: 0 !important;
    padding: 6px 10px !important;

    border: 1px solid rgba(255,255,255,.65) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.28) !important;
    color: #063b91 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 5px 18px rgba(45,55,65,.10) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.navbar .canadian-flag {
    font-size: 18px !important;
    line-height: 1 !important;
}

.navbar .proudly-canadian:hover {
    color: #063b91 !important;
    background: rgba(174,183,194,.42) !important;
    border-color: rgba(255,255,255,.9) !important;
}

/* Scrolled navbar keeps Version 1 geometry */
.navbar.scrolled {
    top: 10px !important;
    width: min(calc(100% - 36px), 1240px) !important;
}

/* Mobile: retain Version 1 behavior */
@media (max-width: 1050px) {
    .navbar .proudly-canadian {
        display: none !important;
    }

    .navbar .nav-btn {
        display: none !important;
    }

    .navbar .nav-links {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 700px) {
    .navbar {
        top: 10px !important;
        width: calc(100% - 20px) !important;
        height: 64px !important;
        min-height: 64px !important;
    }

    .navbar .container {
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 14px !important;
    }

    .navbar .logo {
        order: 1 !important;
    }

    .navbar .logo img,
    .navbar .logo img.vivweld-logo-3d,
    .navbar .logo img.vivweld-logo-visible {
        width: 125px !important;
        max-width: 125px !important;
        height: auto !important;
    }

    .navbar .nav-links {
        display: none !important;
    }

    .navbar .menu-toggle {
        order: 4 !important;
        margin-left: auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        z-index: 20 !important;
    }
}


/* ==========================================================
   VIVWELD FINAL TYPOGRAPHY — DARK BLUE BRAND
   All visible typography uses the deep blue from the logo.
========================================================== */

:root{
    --brand-dark-blue:#062b72;
    --brand-blue:#0b45a3;
    --brand-blue-bright:#1769ff;
}

/* Global text colour */
body,
p,
span,
li,
label,
small,
strong,
em,
a,
button,
input,
textarea,
select,
option{
    color: #063b91 !important;
}

/* Headings — including headings that were previously white */
h1,h2,h3,h4,h5,h6,
.hero h1,
.hero h1::first-line,
.section-header h2,
.section-header h3,
.hero-stat h2,
.service-card h3,
.industry-card h3,
.project-card h3,
.why-card h3,
.testimonial-card h3,
.about-content h2,
.about-content h3,
.contact h2,
.contact h3{
    color: #063b91 !important;
}

/* Secondary text stays dark blue too */
.hero p,
.section-header p,
.hero-stat span,
.section-subtitle,
.section-copy,
.service-card p,
.industry-card p,
.project-card p,
.why-card p,
.testimonial-card p,
.contact-item p,
.contact-wrapper p,
.muted,
.text-muted{
    color: #063b91 !important;
}

/* Navigation */
.nav-links a,
.nav-links a:hover,
.nav-links a.active{
    color: #063b91 !important;
    text-shadow:none !important;
}

/* Buttons: silver/blue-glass with dark-blue lettering */
.btn-primary,
.btn-secondary,
.nav-btn,
.navbar .nav-btn{
    color: #063b91 !important;
}

.btn-primary{
    background:linear-gradient(135deg,#d9dee5,#aeb8c4) !important;
    border-color:#8d99a8 !important;
    box-shadow:0 10px 28px rgba(6,43,114,.16),inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.btn-secondary{
    background:rgba(215,222,230,.48) !important;
    border-color:rgba(6,43,114,.25) !important;
}

/* Navbar typography */
.navbar .proudly-canadian,
.navbar .proudly-canadian:hover{
    color: #063b91 !important;
}

/* Hero subtitle / section labels */
.hero-subtitle,
.section-subtitle,
.eyebrow{
    color: #063b91 !important;
}

/* Form typography */
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color: #063b91 !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
    opacity:.58;
}

/* Links */
a,
.text-link,
.inline-link{
    color: #063b91 !important;
}
a:hover{
    color: #063b91 !important;
}

/* Icons / stat values / numbers */
.hero-stat h2,
.stat-number,
.counter,
.service-icon,
.card-number,
.cert-code,
.stars,
.project-card small{
    color: #063b91 !important;
}

/* Footer text */
footer,
footer p,
footer a,
footer span,
footer h3,
footer small{
    color: #063b91 !important;
}

/* Keep footer readable by giving it a silver surface */
footer{
    background:linear-gradient(135deg,#aeb8c4,#d7dee6) !important;
    border-top:1px solid rgba(255,255,255,.7);
}
.footer-bottom,
.copyright{
    color: #063b91 !important;
}

/* Hero previously had white typography; use a light silver/steel surface
   so the requested dark-blue typography remains professional and readable. */
.hero{
    background:
        linear-gradient(135deg,#c7cdd4,#aeb8c4 55%,#d7dee6) !important;
}
.hero-overlay{
    background:linear-gradient(90deg,
        rgba(235,238,242,.82),
        rgba(205,211,218,.68),
        rgba(230,233,237,.72)
    ) !important;
}
.hero-video{
    opacity:.14 !important;
    filter:grayscale(.7) saturate(.45) contrast(.9) !important;
}

/* Dark section surfaces become premium silver/steel so dark-blue text
   remains legible without changing the site's structure. */
.about,
.industries,
.safety,
.contact,
.services,
.projects,
.why-us,
.testimonials{
    background:linear-gradient(135deg,#b8c0c8,#d7dce2) !important;
}

.about-content,
.service-card,
.industry-card,
.project-card,
.why-card,
.safety-content,
.testimonial-card,
.contact-wrapper,
.contact-item,
.about-image{
    background:rgba(235,238,242,.42) !important;
    border-color:rgba(255,255,255,.68) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 20px 55px rgba(45,55,65,.15) !important;
}

/* Animation accents also use the same dark blue */
.scroll-progress{
    background:var(--brand-dark-blue) !important;
    box-shadow:0 0 14px rgba(6,43,114,.45) !important;
}
.nav-links a::after{
    background:var(--brand-dark-blue) !important;
}
.hero-line,
.section-divider{
    background:var(--brand-dark-blue) !important;
}

/* Mobile menu icon */
.menu-toggle span{
    background:var(--brand-dark-blue) !important;
}


/* ==========================================================
   FINAL POLISH — DARK BLUE ICONS + CONTAINED TESTIMONIALS
========================================================== */

:root{
    --vivweld-dark-blue:#063b91;
    --vivweld-blue:#0b55d8;
}

/* All common icons / icon containers */
.icon,
.service-icon,
.cert-icon,
.feature-icon,
.industry-icon,
.contact-icon,
.social-icon,
.card-icon,
.stat-icon,
.why-icon,
.project-icon,
[class*="icon"],
[class*="-icon"]{
    color: #063b91 !important;
    fill:var(--vivweld-dark-blue) !important;
    stroke:var(--vivweld-dark-blue) !important;
}

/* Font Awesome / SVG icon safety */
svg,
svg path,
svg circle,
svg rect,
svg line,
svg polyline,
svg polygon{
    --icon-color:var(--vivweld-dark-blue);
}

.icon svg,
.service-icon svg,
.cert-icon svg,
.feature-icon svg,
.industry-icon svg,
.contact-icon svg,
.social-icon svg,
.card-icon svg,
.stat-icon svg,
.why-icon svg,
.project-icon svg{
    color: #063b91 !important;
    fill:var(--vivweld-dark-blue) !important;
    stroke:var(--vivweld-dark-blue) !important;
}

/* Testimonial viewport: animation MUST be clipped to the box */
.testimonial-window,
.testimonials-window,
.testimonial-container{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    clip-path:inset(0) !important;
    isolation:isolate;
}

/* Track itself cannot visually escape its viewport */
.testimonial-track{
    display:flex !important;
    width:max-content !important;
    max-width:none !important;
    overflow:visible !important;
    will-change:transform;
}

/* Individual testimonial cards stay inside the scrolling viewport */
.testimonial{
    flex:0 0 330px !important;
    max-width:330px !important;
    box-sizing:border-box !important;
    position:relative;
}

/* Extra mask at both edges for a clean professional fade */
.testimonial-window::before,
.testimonial-window::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:48px;
    z-index:5;
    pointer-events:none;
}

.testimonial-window::before{
    left:0;
    background:linear-gradient(90deg,rgba(184,184,184,.98),rgba(184,184,184,0));
}

.testimonial-window::after{
    right:0;
    background:linear-gradient(270deg,rgba(184,184,184,.98),rgba(184,184,184,0));
}

/* Don't let testimonial hover transforms create visual overflow */
.testimonial:hover{
    z-index:2;
}

/* Mobile testimonial sizing */
@media(max-width:760px){
    .testimonial{
        flex-basis:280px !important;
        max-width:280px !important;
    }

    .testimonial-window::before,
    .testimonial-window::after{
        width:24px;
    }
}

/* Ensure icon text remains dark blue on hover too */
.service:hover .service-icon,
.cert:hover .cert-icon,
.feature:hover .feature-icon,
.industry:hover .industry-icon,
.why:hover .why-icon,
.contact-info .contact-icon{
    color: #063b91 !important;
    fill:var(--vivweld-dark-blue) !important;
    stroke:var(--vivweld-dark-blue) !important;
}


/* ==========================================================
   VIVWELD CORRECTED FINAL SECTION FIX
========================================================== */

/* ----------------------------------------------------------
   1. TRUSTED ACROSS ONTARIO
   Completely remove hover movement and shine animation.
---------------------------------------------------------- */
#industries .industry-card,
#industries .industry-card:hover{
    transform:none !important;
    animation:none !important;
    transition:none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 22px 65px rgba(2,14,36,.22) !important;
}

#industries .industry-card::before,
#industries .industry-card::after,
#industries .industry-card:hover::before,
#industries .industry-card:hover::after{
    display:none !important;
    animation:none !important;
    transition:none !important;
}

#industries .industry-card i{
    color: #063b91 !important;
}

#industries .industry-card h3{
    color: #063b91 !important;
}

/* ----------------------------------------------------------
   2. BUILT ON QUALITY, SAFETY & RELIABILITY
   Completely remove hover movement and shine animation.
---------------------------------------------------------- */
#why-us .why-card,
#why-us .why-card:hover{
    transform:none !important;
    animation:none !important;
    transition:none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 22px 65px rgba(2,14,36,.22) !important;
}

#why-us .why-card::before,
#why-us .why-card::after,
#why-us .why-card:hover::before,
#why-us .why-card:hover::after{
    display:none !important;
    animation:none !important;
    transition:none !important;
}

#why-us .why-card i{
    color: #063b91 !important;
}

#why-us .why-card h3{
    color: #063b91 !important;
}

/* ----------------------------------------------------------
   3. BUILT TO LAST / FEATURED PROJECTS
   Keep all project heading and card text WHITE.
---------------------------------------------------------- */
#projects .section-header h2,
#projects .section-header p,
#projects .project-overlay h3,
#projects .project-overlay p{
    color: #063b91 !important;
}

#projects .section-subtitle{
    color: #063b91 !important;
}

#projects .project-overlay{
    color: #063b91 !important;
}

#projects .project-overlay h3,
#projects .project-overlay p{
    text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ----------------------------------------------------------
   4. DARK BLUE ICONS SITE-WIDE
---------------------------------------------------------- */
.service-card i,
.industry-card i,
.why-card i,
.feature-item i,
.safety-icon i,
.contact-item i,
.certification-card i,
.project-card i{
    color: #063b91 !important;
}

.service-card i::before,
.industry-card i::before,
.why-card i::before,
.feature-item i::before,
.safety-icon i::before,
.contact-item i::before,
.certification-card i::before,
.project-card i::before{
    color: #063b91 !important;
}

/* ----------------------------------------------------------
   5. TESTIMONIAL VIEWPORT
   Keep the scrolling animation strictly inside its box.
---------------------------------------------------------- */
#testimonials .testimonial-track{
    position:relative !important;
    z-index:1 !important;
}

#testimonials .testimonial-card{
    flex-shrink:0 !important;
}

/* The section itself clips anything that could cross the edge. */
#testimonials{
    overflow:hidden !important;
}

#testimonials .container{
    overflow:hidden !important;
}

#testimonials .testimonial-track{
    max-width:none !important;
}

/* ----------------------------------------------------------
   6. PROJECT CARDS
   Preserve the image animation but never animate the text
   out of alignment.
---------------------------------------------------------- */
#projects .project-card{
    overflow:hidden !important;
}

#projects .project-overlay{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
}


/* ==========================================================
   TESTIMONIALS — KEEP SLIDING, REMOVE SHINE
========================================================== */

/* Keep the automatic horizontal sliding animation intact. */
#testimonials .testimonial-track{
    animation-play-state:running !important;
}

/* Remove ONLY the shine/light-sweep effect from testimonial cards. */
#testimonials .testimonial-card::before,
#testimonials .testimonial-card::after,
#testimonials .testimonial-card:hover::before,
#testimonials .testimonial-card:hover::after{
    content:none !important;
    display:none !important;
    animation:none !important;
    background:none !important;
    box-shadow:none !important;
}

/* Hover must not create a shine effect. */
#testimonials .testimonial-card:hover{
    background:inherit;
}

/* Preserve the sliding viewport and clipping. */
#testimonials,
#testimonials .container{
    overflow:hidden !important;
}

/* ==========================================================
   FINAL VIVWELD SERVICE + PROJECT PRESENTATION
========================================================== */

/* Four-service layout */
#services .services-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

#services .service-card{
  min-height:230px;
}

#services .service-card h3{
  color: #063b91 !important;
}

#services .service-card i{
  color: #063b91 !important;
}

/* Text-only Featured Projects */
#projects .projects-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

#projects .project-text-card{
  position:relative !important;
  min-height:280px !important;
  padding:36px 30px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,#34373b,#25282c) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:20px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.18) !important;
}

#projects .project-text-card img,
#projects .project-text-card .project-overlay{
  display:none !important;
}

#projects .project-text-card i{
  font-size:32px !important;
  color: #063b91 !important;
  margin-bottom:20px !important;
}

#projects .project-text-card h3,
#projects .project-text-card .project-type,
#projects .project-text-card .project-description{
  color: #063b91 !important;
}

#projects .project-text-card h3{
  margin:0 0 7px !important;
}

#projects .project-text-card .project-type{
  font-weight:600 !important;
  margin:0 0 12px !important;
  opacity:.9;
}

#projects .project-text-card .project-description{
  margin:0 !important;
  line-height:1.7 !important;
  opacity:.78;
}

#projects .project-text-card:hover{
  transform:translateY(-5px) !important;
}

/* Responsive */
@media (max-width:1000px){
  #services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #projects .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  #services .services-grid,
  #projects .projects-grid{grid-template-columns:1fr;}
}


/* ==========================================================
   VIVWELD FOOTER — FINAL
========================================================== */
.site-footer {
  margin-top: 0;
  background: #20252b;
  color: #063b91 !important;
  border-top: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 -18px 50px rgba(0,0,0,.16);
}

.site-footer .footer-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 28px 48px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: 42px;
}

.site-footer .footer-brand-name {
  color: #063b91 !important;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 1px 0 #fff;
  margin-bottom: 12px;
}

.site-footer p {
  color: #063b91 !important;
  line-height: 1.7;
  margin: 0 0 16px;
}

.site-footer h3 {
  color: #063b91 !important;
  font-size: 16px;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.site-footer a {
  display: block;
  color: #063b91 !important;
  text-decoration: none;
  margin: 0 0 12px;
  transition: color .2s ease;
}

.site-footer a:hover {
  color: #063b91 !important;
}

.site-footer .made-canada {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #063b91 !important;
  background: rgba(255,255,255,.06);
  font-size: 12px;
  letter-spacing: 1px;
}

.site-footer .footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 28px 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #063b91 !important;
  font-size: 13px;
}

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

@media (max-width: 900px) {
  .site-footer .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .site-footer .footer-main {
    grid-template-columns: 1fr;
    padding: 48px 20px 34px;
  }

  .site-footer .footer-bottom {
    flex-direction: column;
    padding: 16px 20px 20px;
  }
}

/* ==========================================================
   PROJECT / WORK CATEGORIES
   Silver background like the rest of the site + blue hover
========================================================== */

/* Make the six project/category cards match the site's
   normal silver background instead of dark image-card styling. */
#projects .project-card {
    background: #b8b8b8 !important;
    color: #063b91 !important;
    border: 1px solid #d0d0d0 !important;
    box-shadow: 0 12px 30px rgba(35,35,35,.10) !important;
    transition:
        transform .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease !important;
}

/* Remove the dark overlay treatment so the card itself is silver. */
#projects .project-card::before,
#projects .project-card::after {
    background: none !important;
}

/* Blue animation/effect on hover, consistent with the rest
   of the website. */
#projects .project-card:hover {
    background: #b8b8b8 !important;
    border-color: #0b55d8 !important;
    transform: translateY(-6px) !important;
    box-shadow:
        0 18px 38px rgba(11,85,216,.16),
        0 0 0 1px rgba(11,85,216,.16) !important;
}

/* Blue animated accent line. */
#projects .project-card .project-content {
    position: relative;
}

#projects .project-card .project-content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 3px;
    background: #0b55d8;
    border-radius: 3px;
    transition: width .4s ease;
}

#projects .project-card:hover .project-content::after {
    width: 72px;
}

/* All text stays dark VivWeld blue. */
#projects .project-card h3,
#projects .project-card p,
#projects .project-card small,
#projects .project-card span {
    color: #063b91 !important;
}

/* If the old image area exists, hide it so these are
   clean text-based cards as requested. */
#projects .project-card .project-image,
#projects .project-card .project-visual {
    display: none !important;
}

/* ==========================================================
   PROJECT CARDS — MATCH THE OTHER SILVER CARDS
========================================================== */
#projects .project-card,
#projects .project-card:hover{
    background:#c5c5c5 !important;
    color: #063b91 !important;
}

#projects .project-card{
    border-color:#d8d8d8 !important;
    box-shadow:0 12px 30px rgba(35,35,35,.10) !important;
}

#projects .project-card:hover{
    background:#c5c5c5 !important;
    border-color:#0b55d8 !important;
    box-shadow:
        0 18px 38px rgba(11,85,216,.14),
        0 0 0 1px rgba(11,85,216,.12) !important;
}



/* ==========================================================
   FINAL LOGO PLACEMENT — CLEAN
========================================================== */

/* Navigation uses the original horizontal VivWeld logo. */
.navbar .logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.navbar .logo img {
  width: 150px;
  max-width: 150px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(29,108,255,.18));
}

/* Footer uses the exact full logo uploaded by the user. */
.site-footer .footer-logo-full {
  display: block;
  width: 205px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 0 18px;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.24));
}

/* Canadian badge/banner is intentionally removed. */
.canada-badge {
  display: none !important;
}

@media (max-width: 900px) {
  .navbar .logo img {
    width: 130px;
    max-width: 130px;
  }

  .site-footer .footer-logo-full {
    width: 180px;
  }
}

@media (max-width: 560px) {
  .navbar .logo img {
    width: 112px;
    max-width: 112px;
  }

  .site-footer .footer-logo-full {
    width: 165px;
  }
}

/* ==========================================================
   FINAL FOOTER LOGO TOUCH
========================================================== */
.site-footer .footer-logo-full {
  display: block;
  width: 205px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 0 18px;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.24));
}
@media (max-width: 900px) {
  .site-footer .footer-logo-full { width: 180px; }
}
@media (max-width: 560px) {
  .site-footer .footer-logo-full { width: 165px; }
}




/* Main hero/title headings */
.hero h1,
.hero h2,
.hero .hero-title,
.hero .hero-heading,
.vivweld-precision-heading,

/* Section headings */
.section-title,
.section-heading,
.section-header h1,
.section-header h2,
.section-header h3,
section > .container > h1,
section > .container > h2,
section > .container > .section-title,
section > .container > .section-header h1,
section > .container > .section-header h2,

/* Common major heading elements */
h1.major-heading,
h2.major-heading,
h3.major-heading {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Important: headings containing spans must also have blue text.
   Prevents existing white/gradient span rules from winning. */
.hero h1 *,
.hero h2 *,
.section-title *,
.section-heading *,
.section-header h1 *,
.section-header h2 *,
.vivweld-precision-heading * {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Generic major h1/h2 headings in content sections */
main h1,
main h2 {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

main h1 *,
main h2 * {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
}

/* ==========================================================
   MAJOR HEADINGS — VIVWELD BLUE + SILVER ANIMATION
========================================================== */

:root {
  --vivweld-heading-blue: #063b91;
  --vivweld-silver: #d7d7d7;
  --vivweld-silver-light: #f2f2f2;
}

/* Resting color is the same dark blue used in the VivWeld logo. */
.hero h1,
.hero h2,
.hero .hero-title,
.hero .hero-heading,
.vivweld-precision-heading,
.section-title,
.section-heading,
.section-header h1,
.section-header h2,
.section-header h3,
main h1,
main h2,
h1.major-heading,
h2.major-heading,
h3.major-heading {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: none !important;
  position: relative;
}

/* Keep child spans blue as well. */
.hero h1 *,
.hero h2 *,
.section-title *,
.section-heading *,
.section-header h1 *,
.section-header h2 *,
.vivweld-precision-heading *,
main h1 *,
main h2 * {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* Silver highlight sweeps across the heading without changing its
   underlying blue identity. */
.vivweld-precision-heading::after,
.section-title::after,
.section-heading::after,
.section-header h1::after,
.section-header h2::after,
.hero h1::after,
.hero h2::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(215,215,215,0) 28%,
    rgba(242,242,242,.95) 50%,
    rgba(215,215,215,0) 72%,
    transparent 100%
  );
  transform: translateX(-55%);
  opacity: .75;
  animation: vivweldSilverHeadingSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vivweldSilverHeadingSweep {
  0%, 58% {
    transform: translateX(-55%);
    opacity: 0;
  }
  68% {
    opacity: .8;
  }
  82%, 100% {
    transform: translateX(55%);
    opacity: 0;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .vivweld-precision-heading::after,
  .section-title::after,
  .section-heading::after,
  .section-header h1::after,
  .section-header h2::after,
  .hero h1::after,
  .hero h2::after {
    animation: none !important;
    opacity: .35;
  }
}

/* Final heading color match: use the same blue as the site's existing fonts. */
.hero h1,
.hero h2,
.hero .hero-title,
.hero .hero-heading,
.vivweld-precision-heading,
.section-title,
.section-heading,
.section-header h1,
.section-header h2,
.section-header h3,
main h1,
main h2,
h1.major-heading,
h2.major-heading,
h3.major-heading {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  background-color: transparent !important;
}

/* ==========================================================
   FINAL TYPOGRAPHY COLOR — VIVWELD LOGO BLUE
   All website typography uses the same dark blue as the logo.
   Backgrounds, borders, glass surfaces and silver animations
   remain unchanged.
========================================================== */

:root {
  --vivweld-logo-blue: #063b91;
}

/* Global typography */
body,
body p,
body span,
body li,
body label,
body small,
body strong,
body b,
body em,
body a,
body button,
body input,
body textarea,
body select,
body option,
body blockquote,
body dt,
body dd,
body figcaption {
  color: var(--vivweld-logo-blue) !important;
  -webkit-text-fill-color: var(--vivweld-logo-blue) !important;
}

/* All headings */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  color: var(--vivweld-logo-blue) !important;
  -webkit-text-fill-color: var(--vivweld-logo-blue) !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* Keep the existing silver animation/highlight on major headings. */
.vivweld-precision-heading::after,
.section-title::after,
.section-heading::after,
.section-header h1::after,
.section-header h2::after,
.hero h1::after,
.hero h2::after {
  color: initial !important;
  -webkit-text-fill-color: initial !important;
}

/* Form placeholder text */
input::placeholder,
textarea::placeholder {
  color: var(--vivweld-logo-blue) !important;
  opacity: .72;
}

/* Icons and icon fonts */
i,
.icon,
[class*="icon"],
svg {
  color: var(--vivweld-logo-blue) !important;
}

/* SVG strokes/fills follow the logo blue. */
svg path,
svg circle,
svg rect,
svg line,
svg polyline,
svg polygon {
  stroke: var(--vivweld-logo-blue);
}

/* Preserve image colors and actual logo image colors. */
img {
  color: initial !important;
  -webkit-text-fill-color: initial !important;
}

/* Preserve silver/gray surfaces and borders. */
[class*="glass"],
.glass,
.card,
.service-card,
.industry-card,
.why-card,
.project-card,
.testimonial-card,
.contact-form,
.site-footer {
  /* no color/background override here */
}


/* ==========================================================
   FINAL CARD SURFACE — ONE CONSISTENT SILVER
========================================================== */

:root {
  --vivweld-card-silver: #c5c5c5;
  --vivweld-card-silver-border: #d8d8d8;
}

/* All main content cards use the exact same silver surface. */
.service-card,
.industry-card,
.why-card,
.project-card,
.testimonial-card,
.feature-card,
.certification-card,
.contact-card,
.info-card,
.stat-card,
.card,
.glass-card,
.service-item,
.feature-item,
.industry-item,
.why-item {
  background: var(--vivweld-card-silver) !important;
  border-color: var(--vivweld-card-silver-border) !important;
}

/* Keep the same surface on hover; only the existing blue effects
   are allowed to change the card's border/shadow. */
.service-card:hover,
.industry-card:hover,
.why-card:hover,
.project-card:hover,
.testimonial-card:hover,
.feature-card:hover,
.certification-card:hover,
.contact-card:hover,
.info-card:hover,
.stat-card:hover,
.card:hover,
.glass-card:hover {
  background: var(--vivweld-card-silver) !important;
}

/* Remove accidental dark/black fills from card pseudo-elements. */
.service-card::before,
.service-card::after,
.industry-card::before,
.industry-card::after,
.why-card::before,
.why-card::after,
.project-card::before,
.project-card::after,
.testimonial-card::before,
.testimonial-card::after,
.feature-card::before,
.feature-card::after,
.certification-card::before,
.certification-card::after {
  background-color: transparent !important;
}

/* Preserve images themselves. */
.card img,
.project-card img,
.service-card img,
.industry-card img {
  background: transparent !important;
}


/* ==========================================================
   FINAL CARD SURFACE — LIGHT BACKGROUND SILVER
========================================================== */

:root {
  --vivweld-light-card-silver: #d9d9d9;
  --vivweld-light-card-border: #e6e6e6;
}

/* All card surfaces use the same light silver as the site's
   light silver background family. */
.service-card,
.industry-card,
.why-card,
.project-card,
.testimonial-card,
.feature-card,
.certification-card,
.contact-card,
.info-card,
.stat-card,
.card,
.glass-card,
.service-item,
.feature-item,
.industry-item,
.why-item {
  background: var(--vivweld-light-card-silver) !important;
  border-color: var(--vivweld-light-card-border) !important;
}

/* Keep the light silver surface when hovering. */
.service-card:hover,
.industry-card:hover,
.why-card:hover,
.project-card:hover,
.testimonial-card:hover,
.feature-card:hover,
.certification-card:hover,
.contact-card:hover,
.info-card:hover,
.stat-card:hover,
.card:hover,
.glass-card:hover {
  background: var(--vivweld-light-card-silver) !important;
}

/* Do not allow old dark pseudo-element fills to alter the surface. */
.service-card::before,
.service-card::after,
.industry-card::before,
.industry-card::after,
.why-card::before,
.why-card::after,
.project-card::before,
.project-card::after,
.testimonial-card::before,
.testimonial-card::after,
.feature-card::before,
.feature-card::after,
.certification-card::before,
.certification-card::after {
  background-color: transparent !important;
}


/* ==========================================================
   BUILT TO LAST — CARD SURFACE COLOR
========================================================== */

/* Project cards under the Built To Last section use the same
   light silver surface as the site's light background. */
#projects .project-card {
  background: #d9d9d9 !important;
  border-color: #e6e6e6 !important;
}

/* Keep the same surface during the existing blue hover animation. */
#projects .project-card:hover {
  background: #d9d9d9 !important;
}



/* The heading remains VivWeld blue while a soft silver glass
   highlight travels across it. */
.hero h1,
.hero h2,
.hero .hero-title,
.hero .hero-heading,
.vivweld-precision-heading,
.section-title,
.section-heading,
.section-header h1,
.section-header h2,
.section-header h3,
main h1,
main h2,
h1.major-heading,
h2.major-heading,
h3.major-heading {
  position: relative !important;
  isolation: isolate;
  overflow: visible;
}

/* Silver glass "gel" highlight */
.hero h1::after,
.hero h2::after,
.hero .hero-title::after,
.hero .hero-heading::after,
.vivweld-precision-heading::after,
.section-title::after,
.section-heading::after,
.section-header h1::after,
.section-header h2::after,
.section-header h3::after,
main h1::after,
main h2::after,
h1.major-heading::after,
h2.major-heading::after,
h3.major-heading::after {
  content: "";
  position: absolute;
  left: -15%;
  bottom: -7px;
  width: 32%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.75),
    rgba(205,205,205,.95),
    rgba(255,255,255,.72),
    rgba(255,255,255,0)
  );
  box-shadow:
    0 0 7px rgba(225,225,225,.75),
    0 0 16px rgba(205,205,205,.45);
  opacity: 0;
  pointer-events: none;
  animation: vivweldSilverGelSweep 4.5s ease-in-out infinite;
}

@keyframes vivweldSilverGelSweep {
  0%, 55% {
    transform: translateX(0) scaleX(.65);
    opacity: 0;
  }
  62% {
    opacity: .75;
  }
  76% {
    transform: translateX(360%) scaleX(1);
    opacity: .9;
  }
  88%, 100% {
    transform: translateX(470%) scaleX(.65);
    opacity: 0;
  }
}

/* Keep heading text blue while the animation stays silver. */
.hero h1,
.hero h2,
.hero .hero-title,
.hero .hero-heading,
.vivweld-precision-heading,
.section-title,
.section-heading,
.section-header h1,
.section-header h2,
.section-header h3,
main h1,
main h2,
h1.major-heading,
h2.major-heading,
h3.major-heading,
.hero h1 *,
.hero h2 *,
.section-title *,
.section-heading *,
.section-header h1 *,
.section-header h2 * {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero h1::after,
  .hero h2::after,
  .hero .hero-title::after,
  .hero .hero-heading::after,
  .vivweld-precision-heading::after,
  .section-title::after,
  .section-heading::after,
  .section-header h1::after,
  .section-header h2::after,
  .section-header h3::after,
  main h1::after,
  main h2::after,
  h1.major-heading::after,
  h2.major-heading::after,
  h3.major-heading::after {
    animation: none !important;
    opacity: .35;
  }
}



/* Animate the actual heading letters, not just an underline.
   The base remains VivWeld blue; a soft silver highlight
   travels through the letterforms. */
.hero h1,
.hero h2,
.hero .hero-title,
.hero .hero-heading,
.vivweld-precision-heading,
.section-title,
.section-heading,
.section-header h1,
.section-header h2,
.section-header h3,
main h1,
main h2,
h1.major-heading,
h2.major-heading,
h3.major-heading {
  color: #063b91 !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #063b91 0%,
    #063b91 28%,
    #9f9f9f 40%,
    #f7f7f7 47%,
    #ffffff 50%,
    #f7f7f7 53%,
    #9f9f9f 60%,
    #063b91 72%,
    #063b91 100%
  ) !important;
  background-size: 250% 100% !important;
  background-position: 120% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: vivweldHeadingMetallicText 5.5s ease-in-out infinite !important;
}

/* Spans inside headings receive the same animated text treatment. */
.hero h1 *,
.hero h2 *,
.hero .hero-title *,
.hero .hero-heading *,
.vivweld-precision-heading *,
.section-title *,
.section-heading *,
.section-header h1 *,
.section-header h2 *,
.section-header h3 *,
main h1 *,
main h2 * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: inherit !important;
  background-size: inherit !important;
  background-position: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

@keyframes vivweldHeadingMetallicText {
  0%, 55% {
    background-position: 120% 50%;
  }
  75% {
    background-position: 35% 50%;
  }
  100% {
    background-position: -20% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero h2,
  .hero .hero-title,
  .hero .hero-heading,
  .vivweld-precision-heading,
  .section-title,
  .section-heading,
  .section-header h1,
  .section-header h2,
  .section-header h3,
  main h1,
  main h2,
  h1.major-heading,
  h2.major-heading,
  h3.major-heading {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}



/* Hover changes the letters themselves to a moving
   blue/silver liquid-metal reflection. */
.hero h1:hover,
.hero h2:hover,
.hero .hero-title:hover,
.hero .hero-heading:hover,
.vivweld-precision-heading:hover,
.section-title:hover,
.section-heading:hover,
.section-header h1:hover,
.section-header h2:hover,
.section-header h3:hover,
main h1:hover,
main h2:hover,
h1.major-heading:hover,
h2.major-heading:hover,
h3.major-heading:hover {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    110deg,
    #063b91 0%,
    #063b91 28%,
    #9f9f9f 40%,
    #f7f7f7 47%,
    #ffffff 50%,
    #f7f7f7 53%,
    #9f9f9f 60%,
    #063b91 72%,
    #063b91 100%
  ) !important;
  background-size: 320% 100% !important;
  background-position: 120% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: vivweldLiquidMetalHover 2.8s linear infinite !important;
}

/* Child spans must follow the parent heading animation. */
.hero h1:hover *,
.hero h2:hover *,
.hero .hero-title:hover *,
.hero .hero-heading:hover *,
.vivweld-precision-heading:hover *,
.section-title:hover *,
.section-heading:hover *,
.section-header h1:hover *,
.section-header h2:hover *,
.section-header h3:hover *,
main h1:hover *,
main h2:hover * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: inherit !important;
  background-size: inherit !important;
  background-position: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

@keyframes vivweldLiquidMetalHover {
  0% {
    background-position: 120% 50%;
  }
  100% {
    background-position: -120% 50%;
  }
}
  100% {
    background-position: -120% 50%;
  }
}

/* Keep the effect subtle and stop it for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .hero h1:hover,
  .hero h2:hover,
  .hero .hero-title:hover,
  .hero .hero-heading:hover,
  .vivweld-precision-heading:hover,
  .section-title:hover,
  .section-heading:hover,
  .section-header h1:hover,
  .section-header h2:hover,
  .section-header h3:hover,
  main h1:hover,
  main h2:hover,
  h1.major-heading:hover,
  h2.major-heading:hover,
  h3.major-heading:hover {
    animation: none !important;
    background-image: none !important;
    color: #063b91 !important;
    -webkit-text-fill-color: #063b91 !important;
  }
}



/* Activate only when the cursor is directly over the heading. */
.vivweld-liquid-hover:hover {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #063b91 0%,
    #063b91 24%,
    #8f8f8f 38%,
    #dcdcdc 45%,
    #ffffff 50%,
    #dcdcdc 55%,
    #8f8f8f 62%,
    #063b91 76%,
    #063b91 100%
  ) !important;
  background-size: 350% 100% !important;
  background-position: 120% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: vivweldLiquidLeftToRight 2.2s linear infinite !important;
  text-shadow: 0 0 8px rgba(210,210,210,.35);
}

@keyframes vivweldLiquidLeftToRight {
  from {
    background-position: 120% 50%;
  }
  to {
    background-position: -120% 50%;
  }
}

/* Make spans inside headings participate too. */
.vivweld-liquid-hover:hover span,
.vivweld-liquid-hover:hover strong,
.vivweld-liquid-hover:hover em {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: inherit !important;
  background-size: inherit !important;
  background-position: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Do not run it when the cursor is elsewhere. */
.vivweld-liquid-hover:not(:hover) {
  animation: none !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .vivweld-liquid-hover:hover {
    animation: none !important;
    color: #063b91 !important;
    -webkit-text-fill-color: #063b91 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
}


/* ==========================================================
   MAGNETIC LIFT — ALL SURFACE CARDS
========================================================== */

/* Smooth magnetic-style lift when the cursor reaches a card. */
.service-card,
.industry-card,
.why-card,
.project-card,
.testimonial-card,
.feature-card,
.certification-card,
.contact-card,
.info-card,
.stat-card,
.card,
.glass-card,
.service-item,
.feature-item,
.industry-item,
.why-item {
  transition:
    transform .38s cubic-bezier(.22,1,.36,1),
    box-shadow .38s ease,
    border-color .3s ease !important;
  will-change: transform;
}

/* The card gently lifts toward the cursor rather than jumping. */
.service-card:hover,
.industry-card:hover,
.why-card:hover,
.project-card:hover,
.testimonial-card:hover,
.feature-card:hover,
.certification-card:hover,
.contact-card:hover,
.info-card:hover,
.stat-card:hover,
.card:hover,
.glass-card:hover,
.service-item:hover,
.feature-item:hover,
.industry-item:hover,
.why-item:hover {
  transform: translateY(-9px) scale(1.018) !important;
  box-shadow:
    0 20px 38px rgba(6,59,145,.16),
    0 5px 12px rgba(0,0,0,.08) !important;
  border-color: rgba(6,59,145,.35) !important;
}

/* Keep Built To Last cards compatible with their light silver surface. */
#projects .project-card:hover {
  transform: translateY(-9px) scale(1.018) !important;
  background: #d9d9d9 !important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .industry-card,
  .why-card,
  .project-card,
  .testimonial-card,
  .feature-card,
  .certification-card,
  .contact-card,
  .info-card,
  .stat-card,
  .card,
  .glass-card,
  .service-item,
  .feature-item,
  .industry-item,
  .why-item {
    transition: none !important;
  }

  .service-card:hover,
  .industry-card:hover,
  .why-card:hover,
  .project-card:hover,
  .testimonial-card:hover,
  .feature-card:hover,
  .certification-card:hover,
  .contact-card:hover,
  .info-card:hover,
  .stat-card:hover,
  .card:hover,
  .glass-card:hover,
  .service-item:hover,
  .feature-item:hover,
  .industry-item:hover,
  .why-item:hover {
    transform: none !important;
  }
}


/* ==========================================================
   FINAL FIX — REMOVE SILVER UNDERLINE FROM ALL HEADINGS
   Heading text hover animations remain available.
========================================================== */

.vivweld-precision-heading::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.section-title::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.section-heading::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.section-header h1::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.section-header h2::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.section-header h3::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.hero h1::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.hero h2::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.hero .hero-title::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.hero .hero-heading::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

main h1::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

main h2::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

h1.major-heading::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

h2.major-heading::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

h3.major-heading::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}


/* ==========================================================
   VIVWELD LIQUID METAL — ACTUAL CURSOR INTERACTION
========================================================== */

/* Normal state: solid VivWeld blue. */
.vivweld-liquid-heading {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  transition: filter .2s ease;
}

/* Activated only by pointerenter. */
.vivweld-liquid-heading.liquid-metal-active {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #063b91 0%,
    #063b91 24%,
    #6f6f6f 36%,
    #bdbdbd 43%,
    #ffffff 50%,
    #bdbdbd 57%,
    #6f6f6f 64%,
    #063b91 76%,
    #063b91 100%
  ) !important;
  background-size: 420% 100% !important;
  background-position: 125% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: vivweldLiquidMetalLTR 2.4s linear infinite !important;
}

/* If a heading contains spans, force their text to reveal the same
   animated parent background rather than covering it. */
.vivweld-liquid-heading.liquid-metal-active > *,
.vivweld-liquid-heading.liquid-metal-active span,
.vivweld-liquid-heading.liquid-metal-active strong,
.vivweld-liquid-heading.liquid-metal-active em {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

@keyframes vivweldLiquidMetalLTR {
  0% {
    background-position: 125% 50%;
  }
  100% {
    background-position: -125% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vivweld-liquid-heading.liquid-metal-active {
    animation: none !important;
    color: #063b91 !important;
    -webkit-text-fill-color: #063b91 !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
}





/* Logo stays on the LEFT side and is vertically centered. */
.nav-left-logo {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  z-index: 2;
}

.nav-left-logo img {
  display: block;
  width: 155px;
  max-width: 155px;
  height: auto;
  object-fit: contain;
}

/* Navigation links occupy the middle and are centered. */
.nav-center-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.nav-center-links a {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  text-decoration: none;
  white-space: nowrap;
}

/* Quote remains on the right. */
.nav-quote {
  grid-column: 3;
  justify-self: end;
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid rgba(6,59,145,.35);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease;
}

.nav-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(6,59,145,.16);
}

.nav-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
}

.nav-menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background: #063b91;
}

@media (max-width: 1050px) {
  .navbar .nav-inner {
    column-gap: 18px;
  }

  .nav-left-logo img {
    width: 135px;
    max-width: 135px;
  }

  .nav-center-links {
    gap: 16px;
  }

  .nav-center-links a {
    font-size: 14px;
  }
}

@media (max-width: 800px) {
  .navbar .nav-inner {
    display: flex;
    min-height: 72px;
    justify-content: space-between;
  }

  .nav-center-links,
  .nav-quote {
    display: none;
  }

  .nav-left-logo {
    position: static;
  }

  .nav-left-logo img {
    width: 125px;
    max-width: 125px;
  }

  .nav-menu-toggle {
    display: block;
    margin-left: auto;
  }
}


/* ==========================================================
   FINAL NAVIGATION ORDER
   LOGO | HOME | ABOUT | INDUSTRIES | PROJECTS | CONTACT | GET QUOTE
========================================================== */

.navbar .nav-inner {
  width: min(1400px, 94%);
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-left-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-left-logo img {
  display: block;
  width: 155px;
  height: auto;
  max-width: 155px;
  object-fit: contain;
}

.nav-center-links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.nav-center-links a {
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  text-decoration: none;
  white-space: nowrap;
}

.nav-center-links .nav-quote {
  flex: 0 0 auto;
  padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid rgba(6,59,145,.35);
}

.nav-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
}

.nav-menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background: #063b91;
}

@media (max-width: 1050px) {
  .navbar .nav-inner { gap: 18px; }
  .nav-left-logo img { width: 135px; max-width: 135px; }
  .nav-center-links { gap: 17px; }
  .nav-center-links a { font-size: 14px; }
}

@media (max-width: 800px) {
  .navbar .nav-inner {
    min-height: 72px;
    justify-content: space-between;
  }

  .nav-center-links {
    display: none;
  }

  .nav-menu-toggle {
    display: block;
    margin-left: auto;
  }

  .nav-left-logo img {
    width: 125px;
    max-width: 125px;
  }
}


/* ==========================================================
   FINAL NAV LOGO — LARGER + PERFECTLY ALIGNED
========================================================== */

.navbar .nav-inner {
  align-items: center !important;
}

.nav-left-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: center !important;
  line-height: 0 !important;
  height: 100% !important;
}

.nav-left-logo img {
  display: block !important;
  width: 190px !important;
  max-width: 190px !important;
  height: auto !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width: 1050px) {
  .nav-left-logo img {
    width: 165px !important;
    max-width: 165px !important;
    max-height: 58px !important;
  }
}

@media (max-width: 800px) {
  .nav-left-logo img {
    width: 145px !important;
    max-width: 145px !important;
    max-height: 52px !important;
  }
}


/* ==========================================================
   FOOTER TAGLINE — UNDER LOGO
========================================================== */
.site-footer .footer-tagline {
  margin: 8px 0 0;
  max-width: 290px;
  color: #063b91 !important;
  -webkit-text-fill-color: #063b91 !important;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}


/* ==========================================================
   FINAL HEADING BLUE — SLIGHTLY DARKER
========================================================== */

/* Major headings only: deeper VivWeld blue, no background change. */
.hero h1,
.hero h2,
.hero .hero-title,
.hero .hero-heading,
.vivweld-liquid-heading,
.vivweld-precision-heading,
.section-title,
.section-heading,
.section-header h1,
.section-header h2,
.section-header h3,
main h1,
main h2,
h1.major-heading,
h2.major-heading,
h3.major-heading {
  color: #04327A !important;
  -webkit-text-fill-color: #04327A !important;
}

/* Keep child heading text consistent. */
.hero h1 *,
.hero h2 *,
.hero .hero-title *,
.hero .hero-heading *,
.vivweld-liquid-heading *,
.vivweld-precision-heading *,
.section-title *,
.section-heading *,
.section-header h1 *,
.section-header h2 *,
.section-header h3 *,
main h1 *,
main h2 * {
  color: #04327A !important;
  -webkit-text-fill-color: #04327A !important;
}

/* Preserve the liquid-metal hover behavior: its silver reflection
   can still override the text color when the cursor is over a heading. */
.vivweld-liquid-heading.liquid-metal-active {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}


/* ==========================================================
   FINAL TYPOGRAPHY — ALL HEADINGS DARKER BLUE
========================================================== */

/* Every heading level throughout the website uses the same
   deeper VivWeld blue. */
h1, h2, h3, h4, h5, h6 {
  color: #04327A !important;
  -webkit-text-fill-color: #04327A !important;
  background-color: transparent !important;
}

/* Heading text inside wrappers/spans inherits the same blue. */
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  color: #04327A !important;
  -webkit-text-fill-color: #04327A !important;
}

/* Preserve the liquid-metal hover effect on interactive headings. */
.vivweld-liquid-heading.liquid-metal-active {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}


/* ==========================================================
   FINAL TYPOGRAPHY — ALL WEBSITE FONTS DARKER BLUE
========================================================== */

/* Every textual element uses the same deeper VivWeld blue.
   Images, backgrounds, silver surfaces and borders are untouched. */
body,
body p,
body span,
body li,
body a,
body button,
body label,
body small,
body strong,
body b,
body em,
body blockquote,
body figcaption,
body dt,
body dd,
body th,
body td,
body input,
body textarea,
body select,
body option,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: #04327A !important;
  -webkit-text-fill-color: #04327A !important;
}

/* Keep icons in the same darker blue. */
body i,
body [class*="icon"] {
  color: #04327A !important;
}

/* Preserve the actual liquid-metal hover effect on headings. */
.vivweld-liquid-heading.liquid-metal-active {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Placeholder text follows the darker blue, but remains softer. */
input::placeholder,
textarea::placeholder {
  color: #04327A !important;
  opacity: .65;
}

/* Preserve the actual logo/image colors. */
img {
  color: initial !important;
  -webkit-text-fill-color: initial !important;
}