/* =========================================================
   VEYRON INDUSTRIAL
   DESIGN SYSTEM + HOMEPAGE SECTION 01

   Visual direction:
   Ingenuity-inspired industrial editorial

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Colours:
   Midnight Navy:  #142A3B
   Deep Navy:      #0C1927
   Copper Orange:  #E87538
   Off-White:      #F5F5F2
========================================================= */


/* =========================================================
   01 — GLOBAL FOUNDATIONS
========================================================= */

:root {
    --vy-navy: #142A3B;
    --vy-deep: #0C1927;
    --vy-orange: #E87538;
    --vy-white: #F5F5F2;

    --vy-font: "Barlow", Arial, sans-serif;

    --vy-content-left: clamp(64px, 11vw, 210px);
    --vy-rail-left: clamp(26px, 6.5vw, 124px);

    --vy-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
    scroll-behavior: smooth;
}

body.vy-site {
    margin: 0;
    background: var(--vy-white);
    color: var(--vy-deep);
    font-family: var(--vy-font);
    -webkit-font-smoothing: antialiased;
}

body.vy-site *,
body.vy-site *::before,
body.vy-site *::after {
    box-sizing: border-box;
}

body.vy-site a {
    -webkit-tap-highlight-color: transparent;
}

.vy-skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 9999;
    padding: 12px 18px;
    background: var(--vy-white);
    color: var(--vy-deep);
}

.vy-skip-link:focus {
    top: 15px;
}


/* =========================================================
   02 — GLOBAL HEADER
========================================================= */

body.vy-site .vy-header {
    position: absolute;
    z-index: 100;

    top: 0;
    left: 0;

    width: 100%;

    background: rgba(8, 19, 30, .36);
    border-bottom: 1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.vy-site:not(.home) .vy-header {
    position: relative;
    background: var(--vy-deep);
}

body.vy-site .vy-header__inner {
    position: relative;

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

    width: 100%;
    max-width: 1920px;
    height: 90px;

    margin: 0 auto;

    padding-left: var(--vy-content-left);
    padding-right: clamp(30px, 6vw, 115px);

    gap: 30px;
}


/* =========================================================
   03 — VEYRON BRAND
========================================================= */

body.vy-site .vy-brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;
    gap: 9px;

    text-decoration: none;
    color: #FFFFFF;
}

body.vy-site .vy-brand__symbol {
    display: block;

    width: 39px;
    height: 39px;

    flex-shrink: 0;
}

body.vy-site .vy-brand__text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

body.vy-site .vy-brand__name {
    font-family: var(--vy-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;

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

    color: #FFFFFF;
}

body.vy-site .vy-brand__sub {
    margin-top: 5px;

    font-family: var(--vy-font);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;

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

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


/* =========================================================
   04 — DESKTOP NAVIGATION
========================================================= */

body.vy-site .vy-header__nav {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

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

    gap: clamp(24px, 2.1vw, 40px);

    margin: 0;
    padding: 0;

    white-space: nowrap;
}

body.vy-site .vy-header__nav-link {
    position: relative;

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

    height: 44px;

    font-family: var(--vy-font);
   font-size: 15px;
    font-weight: 700;

    letter-spacing: .06em;
    line-height: 1;

    text-transform: uppercase;
    text-decoration: none;

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

    transition: color .25s ease;
}

body.vy-site .vy-header__nav-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 7px;

    width: 100%;
    height: 2px;

    background: var(--vy-orange);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s var(--vy-ease);
}

body.vy-site
.vy-header__nav-link[aria-current="page"] {
    color: var(--vy-orange);
}

body.vy-site
.vy-header__nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

@media (hover: hover) {

    body.vy-site .vy-header__nav-link:hover {
        color: var(--vy-orange);
    }

    body.vy-site .vy-header__nav-link:hover::after {
        transform: scaleX(1);
    }

}


/* =========================================================
   05 — NAVIGATION CTA
========================================================= */

body.vy-site .vy-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
    gap: 12px;

    min-height: 43px;

    padding: 0 21px;

    background: var(--vy-orange);
    color: #FFFFFF;

    font-family: var(--vy-font);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: .035em;
    text-transform: uppercase;
    text-decoration: none;

    box-shadow:
        0 7px 22px rgba(0,0,0,.19),
        inset 0 1px 0 rgba(255,255,255,.12);

    transition:
        background .3s ease,
        transform .3s var(--vy-ease),
        box-shadow .3s ease;
}

body.vy-site .vy-header__cta span {
    display: inline-block;
    font-size: 19px;
    line-height: 1;

    transition: transform .3s ease;
}

@media (hover: hover) {

    body.vy-site .vy-header__cta:hover {
        background: #D7622A;

        transform: translateY(-2px);

        box-shadow: 0 12px 26px rgba(0,0,0,.28);
    }

    body.vy-site .vy-header__cta:hover span {
        transform: translateX(4px);
    }

}


/* =========================================================
   06 — MOBILE MENU BASE
========================================================= */

body.vy-site .vy-mobile-menu {
    display: none;
}


/* =========================================================
   07 — HOMEPAGE HERO
========================================================= */

body.vy-site .vy-hero {
    position: relative;
    isolation: isolate;

    display: flex;

    width: 100%;
    min-height: clamp(680px, 86svh, 900px);

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--vy-deep);
}


/* =========================================================
   08 — HERO PHOTO
========================================================= */

body.vy-site .vy-hero__media {
    position: absolute;
    z-index: 0;

    inset: 0;

    background-image:
        url("../images/Homepage/veyron-hero-desktop.png");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 43%;

    transform: scale(1.045);

    animation:
        vyHeroPhotoEnter 2.1s var(--vy-ease) both;

    will-change: transform;
}


/* =========================================================
   09 — PHOTO WASH / DEPTH

   Darkens image to keep title legible.
   Preserves industrial image details.
========================================================= */

body.vy-site .vy-hero__scrim {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6,17,30,.61) 0%,
            rgba(6,17,30,.41) 32%,
            rgba(6,17,30,.16) 66%,
            rgba(6,17,30,.07) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5,13,22,.36) 0%,
            rgba(5,13,22,.06) 43%,
            rgba(5,13,22,.36) 100%
        );

    pointer-events: none;
}


/* =========================================================
   10 — DIAGONAL NAVY OVERLAY

   Matches the architectural visual language
   of the reference without covering the image.
========================================================= */

body.vy-site .vy-hero__angle {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            116deg,
            rgba(7,23,39,.70) 0%,
            rgba(12,35,55,.49) 64%,
            rgba(20,42,59,.10) 100%
        );

    clip-path:
        polygon(
            0 0,
            29% 0,
            65% 100%,
            0 100%
        );

    pointer-events: none;
}


/* =========================================================
   11 — PHOTOGRAPHIC LIGHTING

   Subtle warm light and cool atmospheric depth.
========================================================= */

body.vy-site .vy-hero__light {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        radial-gradient(
            ellipse 68% 75% at 77% 25%,
            rgba(255,204,148,.12) 0%,
            rgba(255,204,148,.04) 58%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 75% 90% at 5% 75%,
            rgba(12,34,54,.26) 0%,
            transparent 76%
        );

    pointer-events: none;
}


/* =========================================================
   12 — COPPER VERTICAL LINE
========================================================= */

body.vy-site .vy-hero__rail {
    position: absolute;
    z-index: 8;

    top: 0;
    bottom: 0;
    left: var(--vy-rail-left);

    display: block;

    width: 2px;

    background: var(--vy-orange);

    box-shadow:
        0 0 14px rgba(232,117,56,.13);

    transform: scaleY(0);
    transform-origin: top;

    animation:
        vyHeroRailEnter 1.1s var(--vy-ease)
        .12s forwards;

    pointer-events: none;
}


/* =========================================================
   13 — HERO CONTENT LAYOUT
========================================================= */

body.vy-site .vy-hero__inner {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;

    width: 100%;
    max-width: 1920px;
    min-height: inherit;

    margin: 0 auto;

    padding:
        150px
        clamp(30px, 6vw, 115px)
        110px
        var(--vy-content-left);
}

body.vy-site .vy-hero__content {
    width: 100%;
    max-width: 1060px;

    margin: 0;
    padding: 0;
}


/* =========================================================
   14 — HERO HEADING

   Text content:
   Built to perform

   CSS controls uppercase appearance.
========================================================= */

body.vy-site .vy-hero__title {
    display: block;

    width: 100%;
    max-width: 1050px;

    margin: 0;
    padding: 0;

    font-family: var(--vy-font);
    font-size: clamp(76px, 6.6vw, 132px);
    font-weight: 800;

    line-height: .88;
    letter-spacing: -.052em;

    text-transform: uppercase;
    text-align: left;

    color: #FFFFFF;

    text-shadow:
        0 5px 22px rgba(0,0,0,.26),
        0 2px 5px rgba(0,0,0,.12);

    opacity: 0;

    animation:
        vyHeroTitleEnter 1.05s var(--vy-ease)
        .24s forwards;
}

body.vy-site .vy-hero__title span {
    display: block;

    width: fit-content;

    margin-top: 4px;

    color: #FFFFFF;
}


/* Decorative copper dot, not part of heading copy */

body.vy-site .vy-hero__title span::after {
    content: "";

    display: inline-block;

    width: .115em;
    height: .115em;

    margin-left: .075em;

    border-radius: 50%;

    background: var(--vy-orange);

    vertical-align: baseline;

    box-shadow:
        0 0 18px rgba(232,117,56,.12);
}


/* =========================================================
   15 — HERO ENTRANCE ANIMATIONS
========================================================= */

@keyframes vyHeroPhotoEnter {
    from {
        opacity: .5;
        transform: scale(1.085);
    }

    to {
        opacity: 1;
        transform: scale(1.045);
    }
}

@keyframes vyHeroRailEnter {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes vyHeroTitleEnter {
    from {
        opacity: 0;
        transform: translateY(32px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* =========================================================
   16 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    :root {
        --vy-content-left: clamp(86px, 11vw, 130px);
        --vy-rail-left: clamp(39px, 5.5vw, 65px);
    }

    body.vy-site .vy-header__inner {
        height: 82px;

        padding-left: var(--vy-content-left);
        padding-right: 38px;
    }

    body.vy-site .vy-header__nav,
    body.vy-site .vy-header__cta {
        display: none;
    }

    body.vy-site .vy-hero {
        min-height: 690px;
    }

    body.vy-site .vy-hero__media {
        background-position: 57% center;
    }

    body.vy-site .vy-hero__angle {
        clip-path:
            polygon(
                0 0,
                43% 0,
                88% 100%,
                0 100%
            );
    }

    body.vy-site .vy-hero__scrim {
        background:
            linear-gradient(
                90deg,
                rgba(7,20,35,.68) 0%,
                rgba(7,20,35,.38) 62%,
                rgba(7,20,35,.16) 100%
            ),
            linear-gradient(
                180deg,
                rgba(5,13,22,.30),
                transparent 48%,
                rgba(5,13,22,.36)
            );
    }

    body.vy-site .vy-hero__inner {
        padding:
            135px
            45px
            110px
            var(--vy-content-left);
    }

    body.vy-site .vy-hero__title {
        max-width: 770px;

        font-size: clamp(68px, 9vw, 106px);
    }

}


/* =========================================================
   17 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    :root {
        --vy-content-left: 53px;
        --vy-rail-left: 23px;
    }

    body.vy-site .vy-header {
        background: rgba(8,19,30,.49);

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

    body.vy-site .vy-header__inner {
        height: 76px;

        padding-left: var(--vy-content-left);
        padding-right: 22px;

        gap: 12px;
    }

    body.vy-site .vy-brand__symbol {
        width: 31px;
        height: 31px;
    }

    body.vy-site .vy-brand__name {
        font-size: 21px;
    }

    body.vy-site .vy-brand__sub {
        font-size: 7px;
        letter-spacing: .43em;
    }

    body.vy-site .vy-header__nav,
    body.vy-site .vy-header__cta {
        display: none;
    }

    body.vy-site .vy-hero {
        min-height: 620px;
        height: min(760px, 100svh);
    }

    body.vy-site .vy-hero__media {
        background-position: 62% center;
    }

    body.vy-site .vy-hero__scrim {
        background:
            linear-gradient(
                90deg,
                rgba(5,17,29,.78) 0%,
                rgba(5,17,29,.44) 75%,
                rgba(5,17,29,.24) 100%
            ),
            linear-gradient(
                180deg,
                rgba(4,13,24,.40) 0%,
                transparent 40%,
                rgba(4,13,24,.42) 100%
            );
    }

    body.vy-site .vy-hero__angle {
        background:
            linear-gradient(
                115deg,
                rgba(7,23,39,.62),
                rgba(7,23,39,.08)
            );

        clip-path:
            polygon(
                0 0,
                52% 0,
                100% 100%,
                0 100%
            );
    }

    body.vy-site .vy-hero__light {
        background:
            radial-gradient(
                ellipse 90% 65% at 88% 18%,
                rgba(255,204,148,.08),
                transparent 80%
            );
    }

    body.vy-site .vy-hero__rail {
        width: 2px;
    }

    body.vy-site .vy-hero__inner {
        align-items: center;

        padding:
            100px
            18px
            90px
            var(--vy-content-left);
    }

    body.vy-site .vy-hero__content {
        max-width: 100%;
    }

    body.vy-site .vy-hero__title {
        font-size: clamp(49px, 12vw, 72px);
        line-height: .93;

        letter-spacing: -.049em;

        max-width: 100%;
    }

    body.vy-site .vy-hero__title span {
        margin-top: 4px;
    }

}


/* =========================================================
   18 — TABLET & MOBILE DROPDOWN NAVIGATION
========================================================= */

@media screen and (max-width: 1100px) {

    body.vy-site .vy-mobile-menu {
        display: block;

        position: relative;
        z-index: 120;

        margin-left: auto;
    }

    body.vy-site .vy-mobile-menu__trigger {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        cursor: pointer;
        list-style: none;

        color: #FFFFFF;
    }

    body.vy-site
    .vy-mobile-menu__trigger::-webkit-details-marker {
        display: none;
    }

    body.vy-site .vy-mobile-menu__lines {
        display: flex;
        flex-direction: column;

        width: 24px;
        gap: 6px;
    }

    body.vy-site .vy-mobile-menu__lines span {
        display: block;

        width: 100%;
        height: 2px;

        background: #FFFFFF;

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

    body.vy-site
    .vy-mobile-menu[open]
    .vy-mobile-menu__lines span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    body.vy-site
    .vy-mobile-menu[open]
    .vy-mobile-menu__lines span:nth-child(2) {
        opacity: 0;
    }

    body.vy-site
    .vy-mobile-menu[open]
    .vy-mobile-menu__lines span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    body.vy-site .vy-mobile-menu__panel {
        position: absolute;

        top: calc(100% + 18px);
        right: 0;

        display: flex;
        flex-direction: column;

        width: min(310px, calc(100vw - 32px));

        padding: 17px;

        background: #101F2D;

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

        box-shadow:
            0 18px 45px rgba(0,0,0,.35);
    }

    body.vy-site .vy-mobile-menu__panel a {
        display: block;

        padding: 13px 12px;

        font-family: var(--vy-font);
        font-size: 15px;
        font-weight: 600;

        text-decoration: none;
        text-transform: uppercase;

        color: #FFFFFF;
    }

    body.vy-site .vy-mobile-menu__panel a:hover {
        color: var(--vy-orange);
    }

    body.vy-site
    .vy-mobile-menu__panel .vy-mobile-menu__cta {
        margin-top: 13px;
        padding: 14px;

        background: var(--vy-orange);
        color: #FFFFFF;

        text-align: center;

        font-size: 13px;
        font-weight: 700;
    }

}


/* =========================================================
   19 — KEYBOARD ACCESSIBILITY
========================================================= */

body.vy-site a:focus-visible,
body.vy-site summary:focus-visible {
    outline: 2px solid var(--vy-orange);
    outline-offset: 5px;
}


/* =========================================================
   20 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    body.vy-site .vy-hero__media,
    body.vy-site .vy-hero__rail,
    body.vy-site .vy-hero__title {
        animation: none !important;

        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    body.vy-site .vy-header__nav-link,
    body.vy-site .vy-header__cta,
    body.vy-site .vy-mobile-menu__lines span {
        transition: none !important;
    }

}



/* =====================================================
   VEYRON INDUSTRIAL — OFFICIAL HEADER LOGO

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below
===================================================== */

/* DESKTOP */

body.vy-site .vy-header .vy-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    flex: 0 0 auto;

    padding: 0;
    margin: 0;

    text-decoration: none;
}

body.vy-site .vy-header .vy-brand__logo {
    display: block;

    width: 190px;
    max-width: 100%;
    height: auto;
    max-height: 60px;

    object-fit: contain;
    object-position: left center;

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

@media (hover: hover) {
    body.vy-site .vy-brand:hover .vy-brand__logo {
        opacity: 0.90;
        transform: translateY(-1px);
    }
}

/* TABLET */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-header .vy-brand__logo {
        width: 165px;
        max-height: 54px;
    }

}

/* MOBILE */

@media screen and (max-width: 599px) {

    body.vy-site .vy-header .vy-brand__logo {
        width: 145px;
        max-height: 48px;
    }

}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-brand__logo {
        transition: none !important;
        transform: none !important;
    }

}





/* =========================================================
   VEYRON INDUSTRIAL
   GLOBAL HEADER & CONTENT WIDTH — V2

   Maximum content width: 1200px
   Full-width backgrounds
   Transparent header at top
   Navy header on scroll

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below
========================================================= */


/* =========================================================
   01 — SHARED DESIGN TOKENS
========================================================= */

:root {
    --vy-layout-max: 1200px;

    --vy-layout-gutter:
        clamp(26px, 4vw, 48px);

    --vy-header-scrolled:
        rgba(8, 19, 30, 0.92);
}


/* =========================================================
   02 — UNIVERSAL CONTENT ALIGNMENT

   All future page sections and footer content
   use the same 1200px alignment.

   Backgrounds remain full browser width.
========================================================= */

body.vy-site .vy-container,
body.vy-site .vy-section__inner,
body.vy-site .vy-footer__inner,
body.vy-site .vy-header__inner,
body.vy-site .vy-hero__inner {
    width: min(
        var(--vy-layout-max),
        calc(100% - 2 * var(--vy-layout-gutter))
    );

    max-width: var(--vy-layout-max);

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   03 — GLOBAL FIXED HEADER

   Important:
   Applies to the homepage AND internal pages.
========================================================= */

body.vy-site .vy-header,
body.vy-site:not(.home) .vy-header {
    position: fixed;

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

    width: 100%;
    z-index: 1000;

    background: transparent;

    border-bottom:
        1px solid transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}


/* =========================================================
   04 — SCROLLED HEADER APPEARANCE
========================================================= */

body.vy-site .vy-header.is-scrolled,
body.vy-site:not(.home) .vy-header.is-scrolled {
    background: var(--vy-header-scrolled);

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

    box-shadow:
        0 8px 28px rgba(0,0,0,0.16);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   05 — HEADER CONTENT CONTAINER
========================================================= */

body.vy-site .vy-header__inner {
    position: relative;

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

    height: 90px;

    padding: 0;
    gap: 24px;
}


/* =========================================================
   06 — EXACTLY CENTERED NAVIGATION
========================================================= */

body.vy-site .vy-header__nav {
    position: absolute;

    top: 50%;
    left: 50%;

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

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

    gap: clamp(20px, 2vw, 34px);

    margin: 0;
    padding: 0;

    white-space: nowrap;
}


/* =========================================================
   07 — SLIGHTLY LARGER NAVIGATION TEXT
========================================================= */

body.vy-site .vy-header__nav-link {
    font-size: 16px;
    font-weight: 700;

    letter-spacing: 0.045em;
}


/* =========================================================
   08 — SLIGHTLY LARGER HEADER CTA
========================================================= */

body.vy-site .vy-header__cta {
    min-height: 50px;

    padding-left: 24px;
    padding-right: 24px;

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

    letter-spacing: 0.035em;
}


/* =========================================================
   09 — HERO CONTENT ALIGNMENT

   Align BUILT TO PERFORM with the logo
   and the future page section headings.
========================================================= */

body.vy-site .vy-hero__inner {
    padding:
        150px
        0
        110px;
}


/* =========================================================
   10 — COPPER LINE ALIGNMENT

   Keeps the decorative rail slightly outside
   the shared content column.
========================================================= */

body.vy-site .vy-hero__rail {
    left: max(
        14px,
        calc((100vw - 1200px) / 2 - 34px)
    );
}


/* =========================================================
   11 — WORDPRESS ADMIN BAR COMPATIBILITY

   Prevents the fixed header from overlapping
   the WordPress toolbar while logged in.
========================================================= */

body.vy-site.admin-bar .vy-header {
    top: 32px;
}

@media screen and (max-width: 782px) {

    body.vy-site.admin-bar .vy-header {
        top: 46px;
    }

}


/* =========================================================
   12 — TABLET
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-header__inner {
        height: 82px;

        padding: 0;
    }

    body.vy-site .vy-header__nav,
    body.vy-site .vy-header__cta {
        display: none;
    }

    body.vy-site .vy-hero__inner {
        padding:
            135px
            0
            110px;
    }

    body.vy-site .vy-hero__rail {
        left: max(
            12px,
            calc(var(--vy-layout-gutter) - 16px)
        );
    }

}


/* =========================================================
   13 — MOBILE
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-header__inner {
        height: 76px;

        padding: 0;
        gap: 12px;
    }

    body.vy-site .vy-header__nav,
    body.vy-site .vy-header__cta {
        display: none;
    }

    body.vy-site .vy-hero__inner {
        padding:
            100px
            0
            90px;
    }

    body.vy-site .vy-hero__rail {
        left: max(
            10px,
            calc(var(--vy-layout-gutter) - 15px)
        );
    }

}


/* =========================================================
   14 — ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-header {
        transition: none;
    }

}


/* =========================================================
   VEYRON INDUSTRIAL — HOMEPAGE SECTION 02
   WHAT WE DO

   Angled editorial composition
   Responsive background artwork
   Shared 1200px content alignment
   Copper accents / Barlow typography

   Desktop: >= 1101px
   Tablet: 600px - 1100px
   Mobile: <= 599px
========================================================= */


/* =========================================================
   01 — MAIN OVERLAPPING SECTION
========================================================= */

body.vy-site .vy-intro {
    position: relative;
    isolation: isolate;

    z-index: 5;

    width: 100%;
    height: clamp(500px, 34vw, 640px);

    margin-top: calc(-1 * clamp(180px, 17vw, 285px));
    margin-bottom: 0;

    background: transparent;
}


/* =========================================================
   02 — ANGLED PHOTO COMPOSITION

   Section 2 sits over the lower part of Section 1.
   The polygon creates the architectural edges.

   The image supplies the off-white surface
   and the industrial photography.
========================================================= */

body.vy-site .vy-intro__picture {
    position: absolute;
    z-index: 0;

    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    overflow: hidden;

    clip-path: polygon(
        0 11%,
        46% 34%,
        100% 8%,
        100% 100%,
        43% 94%,
        0 80%
    );

    filter:
        drop-shadow(
            0 18px 25px rgba(9, 27, 41, .14)
        );
}

body.vy-site .vy-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    max-width: none;
    border: none;

    transition:
        transform 1.4s
        cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   03 — SUBTLE PHOTOGRAPHIC LIGHTING
========================================================= */

body.vy-site .vy-intro__lighting {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        radial-gradient(
            ellipse 43% 74% at 79% 44%,
            rgba(255, 222, 186, .11) 0%,
            transparent 78%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.035) 0%,
            transparent 48%,
            rgba(12, 32, 48, .035) 100%
        );

    clip-path: polygon(
        0 11%,
        46% 34%,
        100% 8%,
        100% 100%,
        43% 94%,
        0 80%
    );

    pointer-events: none;
}


/* =========================================================
   04 — COPPER VERTICAL LINE

   Continues the architectural accent
   from the homepage hero.
========================================================= */

body.vy-site .vy-intro__rail {
    position: absolute;
    z-index: 6;

    top: 0;
    bottom: 13%;

    left: max(
        14px,
        calc((100vw - 1200px) / 2 - 34px)
    );

    display: block;
    width: 2px;

    background: #E87538;

    box-shadow:
        0 0 12px rgba(232,117,56,.12);

    pointer-events: none;
}


/* =====================================================
   VEYRON — INDUSTRIAL DIAMOND END MARKER

   Decorative marker at the bottom of the
   existing Section 02 copper vertical line.
===================================================== */

/* Diamond shape */

body.vy-site .vy-intro__rail::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -10px;

    width: 22px;
    height: 22px;

    background: #F5F5F2;
    border: 2px solid #142A3B;
    border-radius: 2px;

    transform: translateX(-50%) rotate(45deg);

    box-shadow:
        3px 3px 0 rgba(232,117,56,.20),
        0 5px 14px rgba(0,0,0,.16);

    z-index: 1;
}

/* Copper center */

body.vy-site .vy-intro__rail::before {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -3px;

    width: 6px;
    height: 6px;

    background: #E87538;
    border-radius: 50%;

    transform: translateX(-50%);

    z-index: 2;
}

/* TABLET */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-intro__rail::after {
        width: 20px;
        height: 20px;
        bottom: -9px;
    }

}

/* MOBILE */

@media screen and (max-width: 599px) {

    body.vy-site .vy-intro__rail::after {
        width: 16px;
        height: 16px;
        bottom: -7px;
        border-width: 2px;
    }

    body.vy-site .vy-intro__rail::before {
        width: 4px;
        height: 4px;
        bottom: -2px;
    }

}


/* =========================================================
   05 — SHARED CONTENT CONTAINER

   Uses the existing .vy-container system.
========================================================= */

body.vy-site .vy-intro__inner {
    position: relative;
    z-index: 7;

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

    min-height: 100%;

    padding-top: calc(clamp(148px, 10vw, 190px) + 70px);
    padding-bottom: 110px;
}


/* =========================================================
   06 — CONTENT COLUMN
========================================================= */

body.vy-site .vy-intro__copy {
    position: relative;

    width: 100%;
    max-width: 420px;

    margin: 0;
    padding: 0;

    animation:
        vyIntroReveal 1s
        cubic-bezier(.22, 1, .36, 1)
        .2s both;
}


/* =========================================================
   07 — EYEBROW
========================================================= */

body.vy-site .vy-intro__eyebrow {
    display: flex;
    align-items: center;

    gap: 16px;

    margin: 0 0 15px;
    padding: 0;

    color: #E87538;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: .075em;
    text-transform: uppercase;
}

body.vy-site .vy-intro__eyebrow::after {
    content: "";

    display: block;

    width: 55px;
    height: 1px;

    background: #E87538;
    opacity: .9;
}


/* =========================================================
   08 — EXACT BODY COPY
========================================================= */

body.vy-site .vy-intro__description {
    max-width: 420px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: clamp(19px, 1.18vw, 23px);
    font-weight: 500;

    line-height: 1.35;
    letter-spacing: -.015em;

    color: #142A3B;

    text-wrap: pretty;
}


/* =========================================================
   09 — CTA BUTTON
========================================================= */

body.vy-site .vy-intro__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 49px;

    margin-top: 20px;
    padding: 0 24px;

    background: #E87538;
    border: 1px solid rgba(170,70,25,.12);

    color: #FFFFFF;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;

    letter-spacing: .005em;
    line-height: 1.2;
    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(38,55,65,.14),
        inset 0 1px 0 rgba(255,255,255,.16);

    transition:
        background .3s ease,
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
}

body.vy-site .vy-intro__arrow {
    display: inline-block;

    font-size: 21px;
    font-weight: 500;
    line-height: 1;

    transition:
        transform .3s cubic-bezier(.22,1,.36,1);
}

@media (hover: hover) {

    body.vy-site .vy-intro__button:hover {
        background: #D7622A;

        transform: translateY(-2px);

        box-shadow:
            0 12px 25px rgba(38,55,65,.20);
    }

    body.vy-site
    .vy-intro__button:hover
    .vy-intro__arrow {
        transform: translateX(4px);
    }

}


/* =========================================================
   10 — SUBTLE ENTRANCE ANIMATION
========================================================= */

@keyframes vyIntroReveal {

    from {
        opacity: 0;
        transform: translateY(23px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* =========================================================
   11 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    
body.vy-site .vy-intro {
    height: 490px;
    margin-top: -175px;
}


    body.vy-site .vy-intro__picture,
    body.vy-site .vy-intro__lighting {
        clip-path: polygon(
            0 10%,
            49% 31%,
            100% 7%,
            100% 100%,
            44% 94%,
            0 85%
        );
    }

    body.vy-site .vy-intro__image {
        object-fit: cover;
        object-position: center center;
    }

    
body.vy-site .vy-intro__inner {
    padding-top: 210px;
    padding-bottom: 105px;
}


    body.vy-site .vy-intro__copy {
        max-width: 350px;
    }

    body.vy-site .vy-intro__description {
        max-width: 350px;

        font-size: clamp(18px, 2.15vw, 21px);
        line-height: 1.4;
    }

    body.vy-site .vy-intro__eyebrow {
        font-size: 13px;
    }

    body.vy-site .vy-intro__button {
        min-height: 47px;

        font-size: 14px;
        padding: 0 21px;
    }

    body.vy-site .vy-intro__rail {
        left: max(
            12px,
            calc(var(--vy-layout-gutter) - 16px)
        );

        bottom: 11%;
    }

}


/* =========================================================
   12 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    
body.vy-site .vy-intro {
    height: 500px;
    min-height: 500px;
    margin-top: -105px;
}


    body.vy-site .vy-intro__picture,
    body.vy-site .vy-intro__lighting {
        clip-path: polygon(
            0 6%,
            100% 13%,
            100% 100%,
            0 95%
        );
    }

    body.vy-site .vy-intro__image {
        object-fit: cover;
        object-position: center center;
    }

    body.vy-site .vy-intro__inner {
        padding-top: 164px;
        padding-bottom: 50px;
    }

    body.vy-site .vy-intro__copy {
        width: 100%;
        max-width: 355px;
    }

    body.vy-site .vy-intro__eyebrow {
        gap: 12px;

        margin-bottom: 16px;

        font-size: 12px;
        letter-spacing: .07em;
    }

    body.vy-site .vy-intro__eyebrow::after {
        width: 42px;
    }

    body.vy-site .vy-intro__description {
        max-width: 350px;

        font-size: clamp(18px, 4.7vw, 21px);
        line-height: 1.43;
        letter-spacing: -.012em;
    }

    body.vy-site .vy-intro__button {
        min-height: 48px;

        margin-top: 23px;
        padding: 0 20px;

        font-size: 14px;
    }

    body.vy-site .vy-intro__rail {
        left: max(
            10px,
            calc(var(--vy-layout-gutter) - 15px)
        );

        top: 0;
        bottom: 6%;
    }

}


/* =========================================================
   13 — SMALL MOBILE DEVICES
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-intro__description {
        font-size: 18px;
    }

    body.vy-site .vy-intro__inner {
        padding-top: 126px;
    }

}


/* =========================================================
   14 — ACCESSIBILITY
========================================================= */

body.vy-site .vy-intro__button:focus-visible {
    outline: 2px solid #142A3B;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-intro__copy {
        animation: none !important;

        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    body.vy-site .vy-intro__image,
    body.vy-site .vy-intro__button,
    body.vy-site .vy-intro__arrow {
        transition: none !important;
    }

}


/* =====================================================
   VEYRON — SECTION 02 IMAGE / IVORY FIX

   Keeps the existing section structure unchanged.
   Left = solid ivory
   Right = industrial photograph
===================================================== */

/* DESKTOP */

@media screen and (min-width: 1101px) {

    body.vy-site .vy-intro__picture {
        background: #F5F5F2;
    }

    body.vy-site .vy-intro__image {
        clip-path: polygon(
            54% 0,
            100% 0,
            100% 100%,
            42% 100%
        );
    }

}

/* TABLET */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-intro__picture {
        background: #F5F5F2;
    }

    body.vy-site .vy-intro__image {
        clip-path: polygon(
            68% 0,
            100% 0,
            100% 100%,
            55% 100%
        );
    }

}

/* MOBILE */

@media screen and (max-width: 599px) {

    body.vy-site .vy-intro__picture {
        background: #F5F5F2;
    }

    body.vy-site .vy-intro__image {
        clip-path: polygon(
            0 75%,
            100% 66%,
            100% 100%,
            0 100%
        );
    }

}



/* =====================================================
   VEYRON — SECTION 02 MOBILE PHOTO REFINEMENT

   Keep existing section layout and diagonal edges.
   Show more of the industrial facility.
===================================================== */

@media screen and (max-width: 599px) {

    body.vy-site .vy-intro__picture::after {
        content: "";

        position: absolute;
        z-index: 2;
        inset: 0;

        background-image:
            url("../images/Homepage/section2mobile.png");

        background-repeat: no-repeat;

        /* Zoom slightly into the industrial facility */
        background-size: auto 125%;
        background-position: 65% top;

        /* Match existing mobile photo diagonal */
        clip-path: polygon(
            0 75%,
            100% 66%,
            100% 100%,
            0 100%
        );

        pointer-events: none;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — HOMEPAGE SECTION 03
   STATISTICS

   Design:
   Full-width industrial navy background
   1200px aligned content
   Subtle lighting and architectural depth
   Four statistics with vertical dividers
   Overlaps beneath Section 02

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below
========================================================= */


/* =========================================================
   01 — MAIN STATISTICS SECTION

   The negative margin places the navy background
   behind Section 02's existing angled lower edge.

   Section 02 remains visually above this section.
========================================================= */

body.vy-site .vy-stats {
    position: relative;
    isolation: isolate;

    z-index: 4;

    width: 100%;
    min-width: 0;

    margin-top: -118px;
    margin-bottom: 0;

    padding: 148px 0 75px;

    background: #142A3B;
    color: #FFFFFF;

    overflow: hidden;

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 12px),
        50% 100%,
        0 calc(100% - 12px)
    );
}


/* =========================================================
   02 — PHOTOGRAPHIC LIGHTING

   Very subtle illumination.
   No background image is used.
========================================================= */

body.vy-site .vy-stats__lighting {
    position: absolute;
    z-index: 0;

    inset: 0;

    background:
        radial-gradient(
            ellipse 48% 95% at 18% 12%,
            rgba(102,141,169,.16) 0%,
            transparent 80%
        ),
        radial-gradient(
            ellipse 42% 80% at 92% 80%,
            rgba(7,22,35,.40) 0%,
            transparent 85%
        ),
        linear-gradient(
            120deg,
            rgba(255,255,255,.025),
            transparent 55%
        );

    pointer-events: none;
}


/* =========================================================
   03 — ANGULAR BACKGROUND DEPTH

   Restrained geometric layer inspired by
   industrial architecture.
========================================================= */

body.vy-site .vy-stats__geometry {
    position: absolute;
    z-index: 1;

    inset: 0;

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

    clip-path: polygon(
        78% 0,
        100% 0,
        100% 100%,
        94% 100%
    );

    pointer-events: none;
}


/* =========================================================
   04 — CENTERED INNER CONTAINER

   Matches the global 1200px Veyron grid.
========================================================= */

body.vy-site .vy-stats__inner {
    position: relative;
    z-index: 2;

    padding: 0;
}


/* =========================================================
   05 — FOUR-COLUMN STATISTICS GRID
========================================================= */

body.vy-site .vy-stats__grid {
    display: grid;

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

    align-items: stretch;

    gap: 0;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   06 — INDIVIDUAL STATISTIC
========================================================= */

body.vy-site .vy-stats__item {
    position: relative;

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

    min-width: 0;

    padding: 0 clamp(20px, 2vw, 32px);

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

    transition:
        background-color .35s ease,
        transform .35s ease;
}

body.vy-site .vy-stats__item:first-child {
    padding-left: 0;
    border-left: none;
}

body.vy-site .vy-stats__item:last-child {
    padding-right: 0;
}


/* =========================================================
   07 — SMALL NUMBER ABOVE EACH STAT
========================================================= */

body.vy-site .vy-stats__index {
    display: block;

    margin: 0 0 7px;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: .07em;

    color: #E87538;
}


/* =========================================================
   08 — LARGE VALUE

   20+ / 100% / 50+
========================================================= */

body.vy-site .vy-stats__value {
    display: block;

    margin: 0 0 7px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: clamp(38px, 3vw, 52px);
    font-weight: 800;

    line-height: 1;
    letter-spacing: -.035em;

    color: #FFFFFF;

    text-shadow:
        0 2px 14px rgba(0,0,0,.08);
}


/* NORTH AMERICA must fit within column 04 */

body.vy-site .vy-stats__value--region {
    display: flex;
    align-items: flex-end;

    min-height: clamp(38px, 3vw, 52px);

    font-size: clamp(20px, 1.65vw, 27px);
    font-weight: 800;

    letter-spacing: -.015em;
    line-height: 1.15;

    white-space: nowrap;
}


/* =========================================================
   09 — STATISTIC LABEL
========================================================= */

body.vy-site .vy-stats__label {
    display: block;

    width: 100%;

    margin: 0 0 12px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 800;

    line-height: 1.25;
    letter-spacing: .075em;

    text-transform: uppercase;
    color: #FFFFFF;
}


/* =========================================================
   10 — DESCRIPTION
========================================================= */

body.vy-site .vy-stats__description {
    display: block;

    max-width: 255px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 400;

    line-height: 1.42;
    letter-spacing: 0;

    color: rgba(245,245,242,.82);

    text-wrap: pretty;
}


/* =========================================================
   11 — RESTRAINED DESKTOP HOVER EFFECT
========================================================= */

@media (hover: hover) and (min-width: 1101px) {

    body.vy-site .vy-stats__item:hover {
        transform: translateY(-4px);
    }

    body.vy-site
    .vy-stats__item:hover
    .vy-stats__index {
        color: #FFA06D;
    }

}


/* =========================================================
   12 — SCROLL ENTRANCE ANIMATION

   Progressive enhancement:
   runs in browsers supporting scroll-driven
   CSS animations.

   Stats remain fully visible otherwise.
========================================================= */

@keyframes vyStatsReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        body.vy-site .vy-stats__item {
            animation: vyStatsReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }

    }

}


/* =========================================================
   13 — TABLET
   600px to 1100px

   Two-column responsive layout.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-stats {
        margin-top: -95px;

        padding-top: 125px;
        padding-bottom: 72px;
    }

    body.vy-site .vy-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 34px;
    }

    body.vy-site .vy-stats__item {
        padding: 0 28px;
    }

    body.vy-site .vy-stats__item:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    body.vy-site .vy-stats__item:nth-child(even) {
        padding-right: 0;

        border-left:
            1px solid rgba(255,255,255,.23);
    }

    body.vy-site .vy-stats__item:nth-child(n+3) {
        padding-top: 28px;

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

    body.vy-site .vy-stats__value {
        font-size: 45px;
    }

    body.vy-site .vy-stats__value--region {
        min-height: 45px;
        font-size: 25px;
    }

    body.vy-site .vy-stats__label {
        font-size: 15px;
    }

    body.vy-site .vy-stats__description {
        font-size: 15px;
        max-width: 300px;
    }

}


/* =========================================================
   14 — MOBILE
   599px and below

   Single column for readable statistics
   and natural content height.
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-stats {
        margin-top: -28px;

        padding-top: 62px;
        padding-bottom: 52px;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 10px),
            50% 100%,
            0 calc(100% - 10px)
        );
    }

    body.vy-site .vy-stats__grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 0;
    }

    body.vy-site .vy-stats__item,
    body.vy-site .vy-stats__item:first-child,
    body.vy-site .vy-stats__item:last-child {
        padding: 22px 0;

        border-left: none;
        border-top:
            1px solid rgba(255,255,255,.20);
    }

    body.vy-site .vy-stats__item:first-child {
        padding-top: 0;
        border-top: none;
    }

    body.vy-site .vy-stats__item:last-child {
        padding-bottom: 0;
    }

    body.vy-site .vy-stats__index {
        margin-bottom: 6px;
        font-size: 12px;
    }

    body.vy-site .vy-stats__value {
        margin-bottom: 7px;

        font-size: 43px;
    }

    body.vy-site .vy-stats__value--region {
        min-height: 0;

        font-size: clamp(25px, 7vw, 33px);
    }

    body.vy-site .vy-stats__label {
        margin-bottom: 9px;

        font-size: 15px;
    }

    body.vy-site .vy-stats__description {
        max-width: 390px;

        font-size: 15px;
        line-height: 1.5;
    }

}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-stats__item {
        animation: none !important;
        transition: none !important;

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

}


/* =========================================================
   VEYRON INDUSTRIAL
   HOMEPAGE — SECTION 04: OUR SOLUTIONS

   Editorial industrial service grid

   Desktop >= 1101px: 4 columns
   Tablet 600–1100px: 2 columns
   Mobile <= 599px: 1 column

   Full-width ivory background
   1200px shared content alignment
========================================================= */


/* =========================================================
   01 — FULL-WIDTH SECTION
========================================================= */

body.vy-site .vy-solutions {
    position: relative;
    isolation: isolate;

    width: 100%;

    margin: 0;
    padding: 88px 0 112px;

    background: #F5F5F2;

    color: #142A3B;
}


/* Subtle ambient lighting on the ivory surface */

body.vy-site .vy-solutions::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(
            ellipse 58% 45% at 95% 0%,
            rgba(255,255,255,.62),
            transparent 85%
        ),
        radial-gradient(
            ellipse 45% 52% at 0% 100%,
            rgba(218,225,226,.25),
            transparent 90%
        );

    pointer-events: none;
}


/* =========================================================
   02 — SHARED CONTENT CONTAINER
========================================================= */

body.vy-site .vy-solutions__inner {
    position: relative;
    z-index: 1;

    padding: 0;
}


/* =========================================================
   03 — SECTION HEADING
========================================================= */

body.vy-site .vy-solutions__heading {
    width: 100%;

    margin: 0 0 40px;
    padding: 0;
}


/* Orange eyebrow and horizontal accent */

body.vy-site .vy-solutions__eyebrow {
    display: flex;
    align-items: center;

    gap: 17px;

    margin: 0 0 16px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: .075em;

    text-transform: uppercase;

    color: #E87538;
}

body.vy-site .vy-solutions__eyebrow::after {
    content: "";

    display: block;
    flex: 0 0 auto;

    width: 66px;
    height: 2px;

    background: #E87538;
    opacity: .70;
}


/* Large industrial headline */

body.vy-site .vy-solutions__title {
    width: 100%;
    max-width: 1200px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(38px, 3.35vw, 58px);
    font-weight: 800;

    line-height: 1.05;
    letter-spacing: -.032em;

    text-transform: uppercase;

    color: #142A3B;
}


/* =========================================================
   04 — FOUR COLUMN GRID
========================================================= */

body.vy-site .vy-solutions__grid {
    display: grid;

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

    align-items: start;

    column-gap: 22px;
    row-gap: 42px;

    width: 100%;
}


/* =========================================================
   05 — INDIVIDUAL SERVICE CARD

   No heavy card background.
   Keeps the editorial Ingenuity-inspired layout.
========================================================= */

body.vy-site .vy-solutions__card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 0;

    margin: 0;
    padding: 0;

    background: transparent;
}


/* =========================================================
   06 — PHOTOGRAPH CONTAINER
========================================================= */

body.vy-site .vy-solutions__media {
    position: relative;
    isolation: isolate;

    width: 100%;
    aspect-ratio: 2.42 / 1;

    margin: 0;

    overflow: hidden;

    background: #D6DBDC;

    box-shadow:
        0 12px 24px rgba(14,32,47,.12),
        0 2px 6px rgba(14,32,47,.055);

    transition:
        box-shadow .45s
        cubic-bezier(.22,1,.36,1);
}


/* Gentle lighting across photographs */

body.vy-site .vy-solutions__media::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055) 0%,
            transparent 48%,
            rgba(8,24,37,.10) 100%
        );

    pointer-events: none;
}


/* Actual photograph */

body.vy-site .vy-solutions__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    border: none;

    filter:
        saturate(.96)
        contrast(1.025);

    transform: scale(1);

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .6s ease;
}


/* =========================================================
   07 — SERVICE NUMBER + ARROW POSITION
========================================================= */

body.vy-site .vy-solutions__meta {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;
    height: 28px;

    margin-top: 17px;
}


/* Small copper numbering */

body.vy-site .vy-solutions__number {
    display: block;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: .055em;

    color: #E87538;
}


/* =========================================================
   08 — OUTLINED SQUARE ARROW BUTTON
========================================================= */

body.vy-site .vy-solutions__arrow {
    position: absolute;

    top: 0;
    right: 0;

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

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

    border: 1px solid #566878;
    border-radius: 0;

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

    color: #142A3B;
    text-decoration: none;

    box-shadow:
        0 2px 5px rgba(14,32,47,.045);

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s cubic-bezier(.22,1,.36,1);
}

body.vy-site .vy-solutions__arrow span {
    display: block;

    font-family: Arial, sans-serif;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;

    transform: translateY(-1px);

    transition:
        transform .3s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   09 — SERVICE HEADING
========================================================= */

body.vy-site .vy-solutions__card-title {
    display: block;

    max-width: 100%;

    margin: 0 0 10px;
    padding: 0 53px 0 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(19px, 1.25vw, 23px);
    font-weight: 800;

    line-height: 1.13;
    letter-spacing: -.01em;

    text-transform: uppercase;

    color: #142A3B;

    overflow-wrap: normal;
}


/* =========================================================
   10 — SERVICE DESCRIPTION
========================================================= */

body.vy-site .vy-solutions__description {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 17px;
    font-weight: 500;

    line-height: 1.42;
    letter-spacing: -.008em;

    color: #344352;

    text-wrap: pretty;
}


/* =========================================================
   11 — DESKTOP HOVER EFFECTS
========================================================= */

@media (hover: hover) {

    body.vy-site
    .vy-solutions__card:hover
    .vy-solutions__image {
        transform: scale(1.055);

        filter:
            saturate(1.04)
            contrast(1.04);
    }

    body.vy-site
    .vy-solutions__card:hover
    .vy-solutions__media {
        box-shadow:
            0 20px 35px rgba(14,32,47,.18),
            0 5px 12px rgba(14,32,47,.06);
    }

    body.vy-site
    .vy-solutions__arrow:hover {
        background: #E87538;
        border-color: #E87538;

        color: #FFFFFF;

        box-shadow:
            0 8px 18px rgba(232,117,56,.22);

        transform: translateY(-2px);
    }

    body.vy-site
    .vy-solutions__arrow:hover span {
        transform:
            translate(3px,-1px);
    }

}


/* =========================================================
   12 — SCROLL ENTRANCE MOTION

   Supported browsers reveal the cards gently.
   Other browsers display everything normally.
========================================================= */

@keyframes vySolutionsReveal {

    from {
        opacity: 0;
        transform: translateY(23px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        body.vy-site .vy-solutions__card {
            animation: vySolutionsReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }

    }

}


/* =========================================================
   13 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-solutions {
        padding-top: 72px;
        padding-bottom: 92px;
    }

    body.vy-site .vy-solutions__heading {
        margin-bottom: 32px;
    }

    body.vy-site .vy-solutions__eyebrow {
        font-size: 14px;
        margin-bottom: 14px;
    }

    body.vy-site .vy-solutions__title {
        font-size: clamp(35px, 5vw, 49px);
        line-height: 1.07;
    }

    body.vy-site .vy-solutions__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 24px;
        row-gap: 44px;
    }

    body.vy-site .vy-solutions__media {
        aspect-ratio: 2.4 / 1;
    }

    body.vy-site .vy-solutions__card-title {
        font-size: clamp(21px, 2.4vw, 25px);
        padding-right: 58px;
    }

    body.vy-site .vy-solutions__description {
        font-size: 17px;
        line-height: 1.48;
    }

    body.vy-site .vy-solutions__arrow {
        width: 48px;
        height: 48px;
    }

}


/* =========================================================
   14 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-solutions {
        padding-top: 60px;
        padding-bottom: 76px;
    }

    body.vy-site .vy-solutions__heading {
        margin-bottom: 28px;
    }

    body.vy-site .vy-solutions__eyebrow {
        gap: 12px;

        margin-bottom: 13px;

        font-size: 12px;
        letter-spacing: .075em;
    }

    body.vy-site .vy-solutions__eyebrow::after {
        width: 46px;
        height: 1px;
    }

    body.vy-site .vy-solutions__title {
        font-size: clamp(31px, 8vw, 43px);
        line-height: 1.08;
        letter-spacing: -.028em;
    }

    body.vy-site .vy-solutions__grid {
        grid-template-columns: minmax(0,1fr);

        row-gap: 37px;
    }

    body.vy-site .vy-solutions__media {
        aspect-ratio: 2.25 / 1;
    }

    body.vy-site .vy-solutions__meta {
        height: 29px;
        margin-top: 16px;
    }

    body.vy-site .vy-solutions__number {
        font-size: 14px;
    }

    body.vy-site .vy-solutions__arrow {
        width: 46px;
        height: 46px;
    }

    body.vy-site .vy-solutions__card-title {
        margin-bottom: 9px;
        padding-right: 56px;

        font-size: 22px;
        line-height: 1.15;
    }

    body.vy-site .vy-solutions__description {
        font-size: 16px;
        line-height: 1.5;
    }

}


/* =========================================================
   15 — VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-solutions__title {
        font-size: 29px;
    }

    body.vy-site .vy-solutions__card-title {
        font-size: 20px;
    }

    body.vy-site .vy-solutions__description {
        font-size: 15px;
    }

}


/* =========================================================
   16 — ACCESSIBILITY & REDUCED MOTION
========================================================= */

body.vy-site .vy-solutions__arrow:focus-visible {
    outline: 2px solid #E87538;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-solutions__card {
        animation: none !important;

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

    body.vy-site .vy-solutions__media,
    body.vy-site .vy-solutions__image,
    body.vy-site .vy-solutions__arrow,
    body.vy-site .vy-solutions__arrow span {
        transition: none !important;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — HOMEPAGE SECTION 05
   INDUSTRIES WE SERVE

   Full-width midnight navy industrial background
   White editorial heading
   Copper-orange SVG icons
   Shallow angled bottom-right transition
   Shared 1200px content alignment

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   No left vertical copper rail.
========================================================= */


/* =========================================================
   01 — FULL-WIDTH INDUSTRIES SECTION
========================================================= */

body.vy-site .vy-industries {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 68px 0 76px;

    background: #0C1927;
    color: #FFFFFF;

    overflow: hidden;
}


/* =========================================================
   02 — INDUSTRIAL BACKGROUND PHOTOGRAPH

   A full-width background.
   The 1200px restriction applies to content only.
========================================================= */

body.vy-site .vy-industries__photo {
    position: absolute;
    z-index: 0;

    inset: 0;

    background-image:
        url("../images/Homepage/industries-background.png");

    background-position: center 50%;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: .46;

    filter:
        saturate(.70)
        contrast(1.08);

    transform: scale(1.025);

    pointer-events: none;
}


/* =========================================================
   03 — NAVY LIGHTING AND ATMOSPHERIC DEPTH

   Dark enough for consistently readable text.
========================================================= */

body.vy-site .vy-industries__lighting {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 24, 39, .94) 0%,
            rgba(12, 33, 51, .81) 43%,
            rgba(7, 23, 38, .90) 100%
        ),
        radial-gradient(
            ellipse 45% 105% at 48% 0%,
            rgba(151, 179, 197, .17),
            transparent 80%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(0,0,0,.10)
        );

    pointer-events: none;
}


/* =========================================================
   04 — SHALLOW ANGLED BOTTOM EDGE

   Reproduces the small angled finish
   on the right side of your mockup.

   Ivory matches the next section's background.
========================================================= */

body.vy-site .vy-industries::after {
    content: "";

    position: absolute;
    z-index: 4;

    right: 0;
    bottom: -1px;

    width: clamp(105px, 10vw, 200px);
    height: clamp(18px, 2vw, 32px);

    background: #F5F5F2;

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   05 — SHARED 1200px INNER LAYOUT
========================================================= */

body.vy-site .vy-industries__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.1fr);

    align-items: center;

    column-gap: clamp(48px, 5vw, 82px);

    padding: 0;
}


/* =========================================================
   06 — LEFT HEADING AREA
========================================================= */

body.vy-site .vy-industries__heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-width: 0;
    min-height: 140px;

    padding-right: 32px;

    border-right:
        1px solid rgba(245,245,242,.48);
}


/* =========================================================
   07 — ORANGE EYEBROW
========================================================= */

body.vy-site .vy-industries__eyebrow {
    display: flex;
    align-items: center;

    gap: 16px;

    margin: 0 0 16px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: .065em;

    text-transform: uppercase;

    color: #E87538;
}

body.vy-site .vy-industries__eyebrow::after {
    content: "";

    display: block;

    width: 57px;
    height: 2px;

    background: #E87538;
    opacity: .76;
}


/* =========================================================
   08 — HEADING
========================================================= */

body.vy-site .vy-industries__title {
    width: 100%;
    max-width: 540px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(37px, 2.65vw, 46px);
    font-weight: 800;

    line-height: 1.04;
    letter-spacing: -.035em;

    text-transform: uppercase;

    color: #FFFFFF;

    text-shadow:
        0 3px 18px rgba(0,0,0,.14);
}

body.vy-site .vy-industries__title span {
    display: block;
}


/* =========================================================
   09 — RIGHT TWO-COLUMN INDUSTRY GRID
========================================================= */

body.vy-site .vy-industries__lists {
    display: grid;

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

    column-gap: clamp(25px, 3vw, 58px);

    width: 100%;
    min-width: 0;
}


/* Each column holds three industries */

body.vy-site .vy-industries__column {
    display: flex;
    flex-direction: column;

    gap: 20px;

    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   10 — EACH INDUSTRY
========================================================= */

body.vy-site .vy-industries__item {
    display: flex;
    align-items: center;

    gap: 16px;

    min-width: 0;
    min-height: 30px;

    margin: 0;
    padding: 0;

    color: #FFFFFF;
}


/* Icon */

body.vy-site .vy-industries__item svg {
    display: block;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    color: #E87538;

    overflow: visible;

    filter:
        drop-shadow(
            0 1px 3px rgba(0,0,0,.12)
        );

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        color .35s ease;
}


/* Exact industry names */

body.vy-site .vy-industries__item span {
    display: block;

    min-width: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(12px, .8vw, 14px);
    font-weight: 700;

    line-height: 1.35;
    letter-spacing: .025em;

    color: #FFFFFF;

    text-transform: uppercase;
}


/* =========================================================
   11 — SUBTLE HOVER INTERACTION

   No heavy cards or buttons.
========================================================= */

@media (hover: hover) {

    body.vy-site
    .vy-industries__item:hover svg {
        color: #FFA16C;

        transform:
            translateY(-2px) scale(1.045);
    }

}


/* =========================================================
   12 — SCROLL ENTRANCE ANIMATION

   Content stays visible in browsers without
   scroll-driven animation support.
========================================================= */

@keyframes vyIndustriesReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        body.vy-site .vy-industries__heading,
        body.vy-site .vy-industries__lists {
            animation: vyIndustriesReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 26%;
        }

    }

}


/* =========================================================
   13 — TABLET
   600px to 1100px

   Heading above a two-column industries grid.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-industries {
        padding-top: 62px;
        padding-bottom: 75px;
    }

    body.vy-site .vy-industries__photo {
        background-position: 60% center;
    }

    body.vy-site .vy-industries__lighting {
        background:
            linear-gradient(
                90deg,
                rgba(7,24,39,.95),
                rgba(7,24,39,.85)
            ),
            radial-gradient(
                ellipse at 75% 15%,
                rgba(153,182,198,.10),
                transparent 80%
            );
    }

    body.vy-site .vy-industries__inner {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 32px;
    }

    body.vy-site .vy-industries__heading {
        min-height: 0;

        padding-right: 0;
        padding-bottom: 25px;

        border-right: none;
        border-bottom:
            1px solid rgba(245,245,242,.28);
    }

    body.vy-site .vy-industries__title {
        max-width: 680px;

        font-size: clamp(36px, 5.1vw, 49px);
    }

    body.vy-site .vy-industries__eyebrow {
        font-size: 14px;
    }

    body.vy-site .vy-industries__lists {
        column-gap: 36px;
    }

    body.vy-site .vy-industries__column {
        gap: 19px;
    }

    body.vy-site .vy-industries__item span {
        font-size: 14px;
    }

    body.vy-site .vy-industries__item svg {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

}


/* =========================================================
   14 — MOBILE
   599px and below

   One-column industry list with larger
   touch-friendly visual spacing.
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-industries {
        padding-top: 55px;
        padding-bottom: 76px;
    }

    body.vy-site .vy-industries__photo {
        background-position: 66% center;
        opacity: .37;
    }

    body.vy-site .vy-industries__lighting {
        background:
            linear-gradient(
                180deg,
                rgba(7,22,36,.95),
                rgba(7,22,36,.87)
            );
    }

    body.vy-site .vy-industries__inner {
        grid-template-columns: minmax(0,1fr);

        row-gap: 30px;
    }

    body.vy-site .vy-industries__heading {
        min-height: 0;

        padding-right: 0;
        padding-bottom: 25px;

        border-right: none;
        border-bottom:
            1px solid rgba(245,245,242,.24);
    }

    body.vy-site .vy-industries__eyebrow {
        gap: 12px;

        margin-bottom: 15px;

        font-size: 12px;
        letter-spacing: .06em;
    }

    body.vy-site .vy-industries__eyebrow::after {
        width: 43px;
        height: 1px;
    }

    body.vy-site .vy-industries__title {
        max-width: 100%;

        font-size: clamp(30px, 8.2vw, 42px);
        line-height: 1.08;
        letter-spacing: -.03em;
    }

    body.vy-site .vy-industries__lists {
        grid-template-columns: minmax(0,1fr);

        row-gap: 18px;
    }

    body.vy-site .vy-industries__column {
        gap: 18px;
    }

    body.vy-site .vy-industries__item {
        gap: 17px;
        min-height: 31px;
    }

    body.vy-site .vy-industries__item svg {
        width: 26px;
        height: 26px;

        flex-basis: 26px;
    }

    body.vy-site .vy-industries__item span {
        font-size: 14px;
        letter-spacing: .035em;
    }

    body.vy-site .vy-industries::after {
        width: 100px;
        height: 18px;
    }

}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-industries__heading,
    body.vy-site .vy-industries__lists {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    body.vy-site .vy-industries__item svg {
        transition: none !important;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — HOMEPAGE SECTION 06
   FEATURED PROJECT

   Full-width ivory architectural background
   1200px aligned content
   Industrial photograph on left
   Project description on right
   Subtle lighting, depth and animation

   Desktop: 1101px+
   Tablet: 600–1100px
   Mobile: 599px and below

   No vertical orange rail
========================================================= */


/* =========================================================
   01 — FULL-WIDTH SECTION
========================================================= */

body.vy-site .vy-featured {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 52px 0 64px;

    background: #F5F5F2;
    color: #142A3B;

    overflow: hidden;
}


/* =========================================================
   02 — SUBTLE IVORY LIGHTING
========================================================= */

body.vy-site .vy-featured__lighting {
    position: absolute;
    z-index: 0;

    inset: 0;

    background:
        radial-gradient(
            ellipse 55% 95% at 90% 0%,
            rgba(255,255,255,.65),
            transparent 85%
        ),
        linear-gradient(
            120deg,
            rgba(224,229,226,.13),
            transparent 60%
        );

    pointer-events: none;
}


/* =========================================================
   03 — SMALL ANGLED LOWER CORNER

   A restrained architectural transition
   into the future Section 07.

   The next section can use a white background.
========================================================= */

body.vy-site .vy-featured::after {
    content: "";

    position: absolute;
    z-index: 3;

    right: 0;
    bottom: 0;

    width: clamp(120px, 14vw, 245px);
    height: clamp(14px, 1.8vw, 28px);

    background: #FFFFFF;

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   04 — SHARED 1200px CONTENT GRID
========================================================= */

body.vy-site .vy-featured__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);

    align-items: center;

    column-gap: clamp(38px, 4.5vw, 72px);

    padding: 0;
}


/* =========================================================
   05 — INDUSTRIAL PHOTO CONTAINER
========================================================= */

body.vy-site .vy-featured__media {
    position: relative;
    isolation: isolate;

    width: 100%;
    aspect-ratio: 2.65 / 1;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #CFD8DC;

    box-shadow:
        0 15px 34px rgba(15,35,48,.14),
        0 3px 9px rgba(15,35,48,.055);

    transition:
        box-shadow .45s cubic-bezier(.22,1,.36,1);
}


/* Refined cinematic lighting on the photo */

body.vy-site .vy-featured__media::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            transparent 45%,
            rgba(10,30,45,.13)
        );

    pointer-events: none;
}


/* Actual industrial photograph */

body.vy-site .vy-featured__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(.97)
        contrast(1.025);

    transform: scale(1);

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .6s ease;
}


/* =========================================================
   06 — RIGHT CONTENT COLUMN
========================================================= */

body.vy-site .vy-featured__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    max-width: 540px;

    margin: 0;
    padding: 0;
}


/* =========================================================
   07 — FEATURED PROJECT EYEBROW
========================================================= */

body.vy-site .vy-featured__eyebrow {
    display: flex;
    align-items: center;

    gap: 15px;

    margin: 0 0 13px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: .06em;

    text-transform: uppercase;

    color: #E87538;
}


/* Thin copper accent line */

body.vy-site .vy-featured__eyebrow::after {
    content: "";

    display: block;

    width: 56px;
    height: 2px;

    background: #E87538;
    opacity: .70;
}


/* =========================================================
   08 — PROJECT TITLE
========================================================= */

body.vy-site .vy-featured__title {
    width: 100%;

    margin: 0 0 14px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(27px, 2.35vw, 36px);
    font-weight: 800;

    line-height: 1.14;
    letter-spacing: -.025em;

    color: #142A3B;
}


/* =========================================================
   09 — PROJECT DESCRIPTION
========================================================= */

body.vy-site .vy-featured__description {
    width: 100%;
    max-width: 520px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 18px;
    font-weight: 500;

    line-height: 1.48;
    letter-spacing: -.008em;

    color: #344352;

    text-wrap: pretty;
}


/* =========================================================
   10 — SUBTLE DESKTOP HOVER DEPTH
========================================================= */

@media (hover: hover) {

    body.vy-site
    .vy-featured__media:hover {
        box-shadow:
            0 21px 42px rgba(15,35,48,.19),
            0 5px 14px rgba(15,35,48,.08);
    }

    body.vy-site
    .vy-featured__media:hover
    .vy-featured__image {
        transform: scale(1.045);

        filter:
            saturate(1.04)
            contrast(1.04);
    }

}


/* =========================================================
   11 — ENTRANCE ANIMATION
========================================================= */

@keyframes vyFeaturedReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        body.vy-site .vy-featured__media,
        body.vy-site .vy-featured__content {
            animation: vyFeaturedReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 28%;
        }

    }

}


/* =========================================================
   12 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-featured {
        padding: 44px 0 58px;
    }

    body.vy-site .vy-featured__inner {
        column-gap: 30px;
    }

    body.vy-site .vy-featured__media {
        aspect-ratio: 1.9 / 1;
    }

    body.vy-site .vy-featured__eyebrow {
        margin-bottom: 12px;
        font-size: 13px;
    }

    body.vy-site .vy-featured__title {
        font-size: clamp(24px, 2.7vw, 31px);
        margin-bottom: 12px;
    }

    body.vy-site .vy-featured__description {
        font-size: 16px;
        line-height: 1.48;
    }

}


/* Narrow tablet: photo above project details */

@media screen and (min-width: 600px)
and (max-width: 849px) {

    body.vy-site .vy-featured__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 25px;
    }

    body.vy-site .vy-featured__media {
        aspect-ratio: 2.6 / 1;
    }

    body.vy-site .vy-featured__content {
        max-width: 650px;
    }

    body.vy-site .vy-featured__title {
        font-size: 30px;
    }

    body.vy-site .vy-featured__description {
        font-size: 17px;
    }

}


/* =========================================================
   13 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-featured {
        padding: 36px 0 60px;
    }

    body.vy-site .vy-featured__inner {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 24px;
    }

    body.vy-site .vy-featured__media {
        aspect-ratio: 16 / 9;

        box-shadow:
            0 10px 24px rgba(15,35,48,.12);
    }

    body.vy-site .vy-featured__image {
        object-position: center;
    }

    body.vy-site .vy-featured__eyebrow {
        gap: 12px;

        margin-bottom: 12px;

        font-size: 12px;
    }

    body.vy-site .vy-featured__eyebrow::after {
        width: 43px;
        height: 1px;
    }

    body.vy-site .vy-featured__title {
        margin-bottom: 13px;

        font-size: clamp(27px, 7.1vw, 34px);
        line-height: 1.16;
    }

    body.vy-site .vy-featured__description {
        font-size: 16px;
        line-height: 1.55;
    }

    body.vy-site .vy-featured::after {
        width: 110px;
        height: 18px;
    }

}


/* =========================================================
   14 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-featured__media,
    body.vy-site .vy-featured__content {
        animation: none !important;

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

    body.vy-site .vy-featured__media,
    body.vy-site .vy-featured__image {
        transition: none !important;
    }

}


/* =========================================================
   VEYRON INDUSTRIAL
   HOMEPAGE SECTION 07 — TESTIMONIALS

   Desktop: 3 visible
   Tablet: 2 visible
   Mobile: 1 visible

   Full-width off-white surface
   Shared 1200px content alignment
   Navy architectural transition
========================================================= */


/* =========================================================
   01 — SECTION BACKGROUND

   Navy beneath the clipped white surface
   creates the shallow diagonal lower edge.
========================================================= */

body.vy-site .vy-clients {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;

    background: #0C1927;
    color: #142A3B;

    overflow: hidden;
}

body.vy-site .vy-clients::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background:
        radial-gradient(
            ellipse 65% 75% at 85% 0%,
            rgba(255,255,255,.95),
            transparent 92%
        ),
        #FAFAF8;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 calc(100% - 26px)
    );

    pointer-events: none;
}


/* =========================================================
   02 — SHARED INNER CONTAINER
========================================================= */

body.vy-site .vy-clients__inner {
    position: relative;
    z-index: 1;

    padding-top: 54px;
    padding-bottom: 72px;
}


/* =========================================================
   03 — SECTION HEADING ROW
========================================================= */

body.vy-site .vy-clients__header {
    display: grid;

    grid-template-columns:
        auto
        minmax(30px, 1fr)
        auto;

    align-items: center;

    column-gap: 28px;

    margin-bottom: 32px;
}


/* =========================================================
   04 — MAIN TITLE
========================================================= */

body.vy-site .vy-clients__title {
    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(27px, 2.25vw, 37px);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -.025em;

    color: #142A3B;
}


/* Long horizontal rule beside heading */

body.vy-site .vy-clients__heading-line {
    display: block;

    width: 100%;
    height: 1px;

    background:
        rgba(20,42,59,.34);
}


/* =========================================================
   05 — CAROUSEL ARROW CONTROLS
========================================================= */

body.vy-site .vy-clients__controls {
    display: flex;
    align-items: center;

    gap: 8px;
}

body.vy-site .vy-clients__control {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(20,42,59,.15);
    border-radius: 0;

    background: #FFFFFF;
    color: #142A3B;

    cursor: pointer;

    box-shadow:
        0 2px 7px rgba(14,32,47,.055);

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

body.vy-site .vy-clients__next {
    background: #E87538;
    border-color: #E87538;
    color: #FFFFFF;
}

body.vy-site .vy-clients__control span {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

body.vy-site .vy-clients__control:disabled {
    opacity: .36;
    cursor: not-allowed;
    box-shadow: none;
}

@media (hover: hover) {

    body.vy-site
    .vy-clients__control:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow:
            0 7px 15px rgba(14,32,47,.13);
    }

    body.vy-site
    .vy-clients__prev:not(:disabled):hover {
        background: #142A3B;
        color: #FFFFFF;
    }

    body.vy-site
    .vy-clients__next:not(:disabled):hover {
        background: #D7622A;
    }

}


/* =========================================================
   06 — TESTIMONIAL CAROUSEL TRACK

   Three testimonials occupy exactly the
   available width on desktop.
========================================================= */

body.vy-site .vy-clients__track {
    display: flex;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;

    overscroll-behavior-x: contain;
}

body.vy-site
.vy-clients__track::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   07 — EACH TESTIMONIAL COLUMN
========================================================= */

body.vy-site .vy-clients__item {
    position: relative;

    flex: 0 0 33.333333%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    margin: 0;

    padding: 0 25px;

    border-left:
        1px solid rgba(20,42,59,.12);

    scroll-snap-align: start;
    scroll-snap-stop: always;
}

body.vy-site .vy-clients__item:nth-child(3n+1) {
    padding-left: 0;
    border-left: none;
}

body.vy-site .vy-clients__item:nth-child(3n) {
    padding-right: 0;
}


/* =========================================================
   08 — ORANGE NUMBER / CATEGORY
========================================================= */

body.vy-site .vy-clients__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 15px;
}

body.vy-site .vy-clients__number {
    font-family: "Barlow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: .06em;
    color: #E87538;
}

body.vy-site .vy-clients__separator {
    font-size: 12px;
    font-weight: 700;
    color: #425466;
}

body.vy-site .vy-clients__category {
    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.3;
    letter-spacing: .085em;

    text-transform: uppercase;
    color: #344352;
}


/* =========================================================
   09 — TESTIMONIAL QUOTE
========================================================= */

body.vy-site .vy-clients__quote {
    position: relative;

    flex: 1 1 auto;

    margin: 0 0 20px;
    padding: 0 0 0 15px;

    border: none;
    background: none;
}

body.vy-site .vy-clients__quote::before {
    content: "“";

    position: absolute;

    top: -7px;
    left: 0;

    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 700;

    color: #E87538;
}

body.vy-site .vy-clients__quote p {
    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.48;
    letter-spacing: -.005em;

    color: #273846;
}


/* =========================================================
   10 — CLIENT NAME AND POSITION
========================================================= */

body.vy-site .vy-clients__person {
    margin-top: auto;
    padding-left: 15px;
}

body.vy-site .vy-clients__name {
    margin: 0 0 4px;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;

    line-height: 1.2;

    color: #142A3B;
}

body.vy-site .vy-clients__role {
    margin: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    color: #626B73;
}


/* =========================================================
   11 — CONCEPT-DISCLOSURE NOTE
========================================================= */

body.vy-site .vy-clients__disclosure {
    margin: 32px 0 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;

    line-height: 1.45;

    color: #56616B;
}


/* =========================================================
   12 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-clients__inner {
        padding-top: 48px;
        padding-bottom: 72px;
    }

    body.vy-site .vy-clients__header {
        gap: 19px;
        margin-bottom: 28px;
    }

    body.vy-site .vy-clients__title {
        font-size: clamp(26px, 3.5vw, 34px);
    }

    body.vy-site .vy-clients__item {
        flex-basis: 50%;
        padding: 0 21px;
    }

    body.vy-site .vy-clients__item:nth-child(n) {
        border-left:
            1px solid rgba(20,42,59,.12);

        padding-left: 21px;
        padding-right: 21px;
    }

    body.vy-site .vy-clients__item:nth-child(2n+1) {
        border-left: none;
        padding-left: 0;
    }

    body.vy-site .vy-clients__item:nth-child(2n) {
        padding-right: 0;
    }

    body.vy-site .vy-clients__quote p {
        font-size: 16px;
    }

}


/* =========================================================
   13 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-clients::before {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            0 calc(100% - 16px)
        );
    }

    body.vy-site .vy-clients__inner {
        padding-top: 46px;
        padding-bottom: 63px;
    }

    body.vy-site .vy-clients__header {
        grid-template-columns: minmax(0,1fr) auto;

        column-gap: 12px;
        row-gap: 18px;

        margin-bottom: 27px;
    }

    body.vy-site .vy-clients__title {
        font-size: clamp(25px, 6.8vw, 32px);
        line-height: 1.14;
    }

    body.vy-site .vy-clients__heading-line {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body.vy-site .vy-clients__controls {
        grid-column: 2;
        grid-row: 1;
    }

    body.vy-site .vy-clients__control {
        width: 39px;
        height: 39px;
    }

    body.vy-site .vy-clients__item,
    body.vy-site .vy-clients__item:nth-child(n) {
        flex-basis: 100%;

        padding: 0;

        border-left: none;
    }

    body.vy-site .vy-clients__meta {
        margin-bottom: 14px;
    }

    body.vy-site .vy-clients__quote {
        margin-bottom: 18px;
    }

    body.vy-site .vy-clients__quote p {
        font-size: 17px;
        line-height: 1.53;
    }

    body.vy-site .vy-clients__name {
        font-size: 16px;
    }

    body.vy-site .vy-clients__role {
        font-size: 14px;
    }

    body.vy-site .vy-clients__disclosure {
        margin-top: 27px;
    }

}


/* =========================================================
   14 — KEYBOARD ACCESSIBILITY
========================================================= */

body.vy-site .vy-clients__control:focus-visible,
body.vy-site .vy-clients__track:focus-visible {
    outline: 2px solid #E87538;
    outline-offset: 4px;
}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-clients__track {
        scroll-behavior: auto;
    }

    body.vy-site .vy-clients__control {
        transition: none !important;
    }

}


/* =========================================================
   VEYRON INDUSTRIAL — HOMEPAGE SECTION 08
   FINAL CALL TO ACTION

   Midnight navy industrial atmosphere
   1200px content alignment
   Large heading / central copper divider
   Copper CTA button
   Angular architectural background

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   No far-left orange vertical rail
========================================================= */


/* =========================================================
   01 — FULL WIDTH NAVY SECTION
========================================================= */

body.vy-site .vy-final-cta {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 88px 0 92px;

    background: #0C1927;
    color: #FFFFFF;

    overflow: hidden;
}


/* =========================================================
   02 — INDUSTRIAL PHOTOGRAPHIC ATMOSPHERE

   Reuses the industrial background from
   Section 05 with a different navy treatment.

   Navy remains visible if image is unavailable.
========================================================= */

body.vy-site .vy-final-cta::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(7,20,32,.94) 0%,
            rgba(11,31,49,.84) 50%,
            rgba(9,27,43,.96) 100%
        ),
        url("../images/Homepage/industries-background.png");

    background-repeat: no-repeat;
    background-position: center, center 65%;
    background-size: cover;

    filter: saturate(.8);

    pointer-events: none;
}


/* =========================================================
   03 — EDITORIAL LIGHTING

   Controlled shadows and subtle luminosity.
========================================================= */

body.vy-site .vy-final-cta__lighting {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        radial-gradient(
            ellipse 50% 130% at 53% 0%,
            rgba(117,152,177,.20),
            transparent 75%
        ),
        radial-gradient(
            ellipse 40% 100% at 100% 100%,
            rgba(100,133,161,.13),
            transparent 80%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 50%,
            rgba(0,0,0,.09)
        );

    pointer-events: none;
}


/* =========================================================
   04 — RIGHT-SIDE ANGULAR ARCHITECTURE

   Decorative slate-blue surface, similar to
   the diagonal geometry in your mockup.
========================================================= */

body.vy-site .vy-final-cta__geometry {
    position: absolute;
    z-index: 1;

    right: 0;
    bottom: 0;

    width: 32%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            rgba(113,145,171,.29),
            rgba(81,115,145,.43)
        );

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   05 — SHARED 1200PX CONTENT GRID
========================================================= */

body.vy-site .vy-final-cta__inner {
    position: relative;
    z-index: 3;

    display: grid;

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

    align-items: center;

    column-gap: clamp(42px, 5vw, 82px);

    padding: 0;
}


/* =========================================================
   06 — LEFT HEADING
========================================================= */

body.vy-site .vy-final-cta__heading {
    display: flex;
    align-items: center;

    min-width: 0;
    padding: 0;
}

body.vy-site .vy-final-cta__title {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(38px, 3.4vw, 54px);
    font-weight: 800;

    line-height: 1.06;
    letter-spacing: -.035em;

    color: #FFFFFF;
    text-transform: uppercase;

    text-shadow:
        0 3px 18px rgba(0,0,0,.12);
}

body.vy-site .vy-final-cta__title span {
    display: block;
}


/* =========================================================
   07 — RIGHT CONTENT WITH CENTRAL DIVIDER

   The copper divider separates the two columns.
   No vertical line is added on the far left.
========================================================= */

body.vy-site .vy-final-cta__content {
    position: relative;

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

    min-width: 0;

    padding: 5px 0 5px 40px;

    border-left: 2px solid #E87538;
}


/* =========================================================
   08 — BODY COPY
========================================================= */

body.vy-site .vy-final-cta__description {
    max-width: 440px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(18px, 1.3vw, 21px);
    font-weight: 500;

    line-height: 1.48;
    letter-spacing: -.005em;

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

    text-wrap: pretty;
}


/* =========================================================
   09 — COPPER CTA BUTTON
========================================================= */

body.vy-site .vy-final-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    min-height: 54px;

    margin-top: 24px;
    padding: 0 25px;

    background: #E87538;

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

    color: #FFFFFF;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    text-decoration: none;

    box-shadow:
        0 12px 26px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.16);

    transition:
        background .3s ease,
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease;
}

body.vy-site .vy-final-cta__button svg {
    display: block;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    transition:
        transform .3s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   10 — HOVER INTERACTION
========================================================= */

@media (hover: hover) {

    body.vy-site .vy-final-cta__button:hover {
        background: #F08446;

        transform: translateY(-2px);

        box-shadow:
            0 17px 32px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.20);
    }

    body.vy-site
    .vy-final-cta__button:hover svg {
        transform: translateX(4px);
    }

}


/* =========================================================
   11 — SUBTLE ENTRANCE ANIMATION
========================================================= */

@keyframes vyFinalReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        body.vy-site .vy-final-cta__heading,
        body.vy-site .vy-final-cta__content {
            animation: vyFinalReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }

    }

}


/* =========================================================
   12 — TABLET 600PX–1100PX
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-final-cta {
        padding: 75px 0 80px;
    }

    body.vy-site .vy-final-cta__inner {
        column-gap: 30px;
    }

    body.vy-site .vy-final-cta__title {
        font-size: clamp(33px, 4.6vw, 47px);
        line-height: 1.08;
    }

    body.vy-site .vy-final-cta__content {
        padding-left: 26px;
    }

    body.vy-site .vy-final-cta__description {
        font-size: 17px;
        line-height: 1.5;
    }

    body.vy-site .vy-final-cta__button {
        min-height: 50px;

        padding: 0 22px;
        margin-top: 21px;

        font-size: 16px;
    }

    body.vy-site .vy-final-cta__geometry {
        width: 40%;
        opacity: .75;
    }

}


/* =========================================================
   13 — NARROW TABLET

   One-column editorial layout for readability.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 799px) {

    body.vy-site .vy-final-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
    }

    body.vy-site .vy-final-cta__title {
        font-size: clamp(38px, 6vw, 48px);
    }

    body.vy-site .vy-final-cta__content {
        padding: 0 0 0 25px;
    }

    body.vy-site .vy-final-cta__description {
        max-width: 520px;
        font-size: 18px;
    }

}


/* =========================================================
   14 — MOBILE 599PX AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-final-cta {
        padding: 60px 0 70px;
    }

    body.vy-site .vy-final-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
    }

    body.vy-site .vy-final-cta__title {
        font-size: clamp(34px, 8.5vw, 45px);
        line-height: 1.08;
        letter-spacing: -.03em;
    }

    body.vy-site .vy-final-cta__content {
        padding: 0 0 0 20px;

        border-left-width: 2px;
    }

    body.vy-site .vy-final-cta__description {
        max-width: 100%;

        font-size: 17px;
        line-height: 1.55;
    }

    body.vy-site .vy-final-cta__button {
        min-height: 52px;

        margin-top: 22px;
        padding: 0 21px;

        font-size: 16px;
    }

    body.vy-site .vy-final-cta__geometry {
        width: 70%;
        opacity: .42;
    }

    body.vy-site .vy-final-cta::before {
        background-position: center, 65% center;
    }

}


/* =========================================================
   15 — VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-final-cta__title {
        font-size: 31px;
    }

    body.vy-site .vy-final-cta__description {
        font-size: 16px;
    }

}


/* =========================================================
   16 — ACCESSIBILITY
========================================================= */

body.vy-site .vy-final-cta__button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-final-cta__heading,
    body.vy-site .vy-final-cta__content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.vy-site .vy-final-cta__button,
    body.vy-site .vy-final-cta__button svg {
        transition: none !important;
    }

}


/* =========================================================
   VEYRON INDUSTRIAL — GLOBAL FOOTER

   Ingenuity-inspired industrial editorial design
   Midnight navy / copper orange / ivory

   Shared 1200px alignment
   Full-width background

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: <= 599px
========================================================= */


/* =========================================================
   01 — MAIN FOOTER SURFACE
========================================================= */

body.vy-site .vy-footer {
    position: relative;
    isolation: isolate;

    width: 100%;

    margin: 0;
    padding: 82px 0 28px;

    background: #091722;
    color: #F5F5F2;

    overflow: hidden;

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


/* Subtle photographic-style depth */

body.vy-site .vy-footer::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    background:
        radial-gradient(
            ellipse 60% 65% at 92% 10%,
            rgba(83,119,146,.14),
            transparent 80%
        ),
        linear-gradient(
            125deg,
            rgba(255,255,255,.018),
            transparent 58%
        );

    pointer-events: none;
}


/* =========================================================
   02 — ANGULAR INDUSTRIAL DETAIL
========================================================= */

body.vy-site .vy-footer__geometry {
    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;

    width: 29%;
    height: 100%;

    background: rgba(105,139,165,.055);

    clip-path: polygon(
        100% 0,
        100% 100%,
        15% 100%
    );

    pointer-events: none;
}


/* =========================================================
   03 — SHARED CONTENT CONTAINER
========================================================= */

body.vy-site .vy-footer__inner {
    position: relative;
    z-index: 1;

    padding: 0;
}


/* =========================================================
   04 — FOUR-COLUMN DESKTOP LAYOUT
========================================================= */

body.vy-site .vy-footer__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(0, .70fr)
        minmax(0, 1.05fr)
        minmax(0, 1.05fr);

    align-items: start;

    column-gap: clamp(26px, 3.3vw, 52px);
    row-gap: 45px;

    width: 100%;

    padding-bottom: 75px;
}


/* =========================================================
   05 — BRAND COLUMN
========================================================= */

body.vy-site .vy-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
}

body.vy-site .vy-footer__logo-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    text-decoration: none;
}

body.vy-site .vy-footer__logo {
    display: block;

    width: 205px;
    max-width: 100%;
    height: auto;

    object-fit: contain;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

body.vy-site .vy-footer__statement {
    margin: 26px 0 14px;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.1;
    letter-spacing: -.025em;

    color: #FFFFFF;
}

body.vy-site .vy-footer__about {
    max-width: 340px;

    margin: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.65;

    color: rgba(245,245,242,.71);
}


/* =========================================================
   06 — FOOTER COLUMN HEADINGS
========================================================= */

body.vy-site .vy-footer__heading {
    margin: 4px 0 27px;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.25;
    letter-spacing: .095em;

    text-transform: uppercase;

    color: #E87538;
}


/* =========================================================
   07 — PAGE AND CAPABILITY LINKS
========================================================= */

body.vy-site .vy-footer__links {
    display: flex;
    flex-direction: column;

    gap: 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}

body.vy-site .vy-footer__links li {
    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.45;

    color: rgba(245,245,242,.79);
}

body.vy-site .vy-footer__links a {
    display: inline-block;

    color: rgba(245,245,242,.85);

    text-decoration: none;

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


/* =========================================================
   08 — SOLUTIONS LINK
========================================================= */

body.vy-site .vy-footer__explore {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-top: 24px;
    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(232,117,56,.52);

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.3;

    color: #E87538;

    text-decoration: none;

    transition: color .3s ease;
}

body.vy-site .vy-footer__explore span {
    font-size: 21px;

    transition:
        transform .3s ease;
}


/* =========================================================
   09 — CONTACT COLUMN
========================================================= */

body.vy-site .vy-footer__contact {
    min-width: 0;
}

body.vy-site .vy-footer__contact-title {
    max-width: 280px;

    margin: 0 0 22px;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: -.02em;

    color: #FFFFFF;
}


/* =========================================================
   10 — CONTACT BUTTON
========================================================= */

body.vy-site .vy-footer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 50px;

    padding: 0 19px;

    background: #E87538;

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

    color: #FFFFFF;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;

    text-decoration: none;

    box-shadow:
        0 12px 24px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.14);

    transition:
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

body.vy-site .vy-footer__button svg {
    display: block;

    width: 19px;
    height: 19px;

    flex-shrink: 0;

    transition: transform .3s ease;
}


/* =========================================================
   11 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) {

    body.vy-site
    .vy-footer__logo-link:hover
    .vy-footer__logo {
        opacity: .88;
        transform: translateY(-2px);
    }

    body.vy-site
    .vy-footer__links a:hover {
        color: #E87538;
        transform: translateX(4px);
    }

    body.vy-site
    .vy-footer__explore:hover {
        color: #FFA06D;
    }

    body.vy-site
    .vy-footer__explore:hover span {
        transform: translateX(4px);
    }

    body.vy-site
    .vy-footer__button:hover {
        background: #F08446;

        transform: translateY(-2px);

        box-shadow:
            0 17px 30px rgba(0,0,0,.27);
    }

    body.vy-site
    .vy-footer__button:hover svg {
        transform: translateX(4px);
    }

}


/* =========================================================
   12 — BOTTOM FOOTER BAR
========================================================= */

body.vy-site .vy-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;
    gap: 18px 28px;

    width: 100%;

    padding: 27px 0 0;

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


/* Copyright */

body.vy-site .vy-footer__copyright {
    margin: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.5;

    color: rgba(245,245,242,.55);
}


/* Legal links */

body.vy-site .vy-footer__legal {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 18px;
}

body.vy-site .vy-footer__legal a {
    font-family: "Barlow", Arial, sans-serif;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.5;

    color: rgba(245,245,242,.68);

    text-decoration: none;

    transition: color .25s ease;
}


/* Back to top */

body.vy-site .vy-footer__back-top {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .04em;

    color: #E87538;

    text-decoration: none;
}

body.vy-site .vy-footer__back-top span:last-child {
    font-size: 23px;
    line-height: 1;

    transition:
        transform .3s ease;
}


/* Concept disclosure */

body.vy-site .vy-footer__disclosure {
    margin: 22px 0 0;

    max-width: 900px;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.5;

    color: rgba(245,245,242,.48);
}


/* Bottom link hover effects */

@media (hover: hover) {

    body.vy-site .vy-footer__legal a:hover {
        color: #E87538;
    }

    body.vy-site
    .vy-footer__back-top:hover
    span:last-child {
        transform: translateY(-4px);
    }

}


/* =========================================================
   13 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body.vy-site .vy-footer {
        padding-top: 70px;
        padding-bottom: 26px;
    }

    body.vy-site .vy-footer__main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 45px;
        row-gap: 45px;

        padding-bottom: 64px;
    }

    body.vy-site .vy-footer__logo {
        width: 185px;
    }

    body.vy-site .vy-footer__statement {
        font-size: 26px;
        margin-top: 22px;
    }

    body.vy-site .vy-footer__heading {
        margin-bottom: 21px;
    }

    body.vy-site .vy-footer__contact-title {
        max-width: 350px;
        font-size: 24px;
    }

    body.vy-site .vy-footer__geometry {
        width: 43%;
    }

}


/* =========================================================
   14 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-footer {
        padding-top: 56px;
        padding-bottom: 28px;
    }

    body.vy-site .vy-footer__main {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 37px;

        padding-bottom: 54px;
    }

    body.vy-site .vy-footer__logo {
        width: 175px;
    }

    body.vy-site .vy-footer__statement {
        margin-top: 21px;
        margin-bottom: 12px;

        font-size: 27px;
    }

    body.vy-site .vy-footer__about {
        max-width: 380px;

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

    body.vy-site .vy-footer__heading {
        margin-bottom: 17px;

        font-size: 12px;
    }

    body.vy-site .vy-footer__links {
        gap: 13px;
    }

    body.vy-site .vy-footer__links li {
        font-size: 15px;
    }

    body.vy-site .vy-footer__contact-title {
        max-width: 300px;

        font-size: 23px;
    }

    body.vy-site .vy-footer__button {
        min-height: 50px;
        padding: 0 20px;
    }

    body.vy-site .vy-footer__bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 17px;
        padding-top: 25px;
    }

    body.vy-site .vy-footer__legal {
        gap: 12px 20px;
    }

    body.vy-site .vy-footer__back-top {
        margin-top: 4px;
    }

    body.vy-site .vy-footer__disclosure {
        margin-top: 24px;
        font-size: 11px;
    }

    body.vy-site .vy-footer__geometry {
        width: 65%;
        opacity: .7;
    }

}


/* =========================================================
   15 — ACCESSIBILITY
========================================================= */

body.vy-site .vy-footer a:focus-visible {
    outline: 2px solid #E87538;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-footer a,
    body.vy-site .vy-footer a *,
    body.vy-site .vy-footer__logo {
        transition: none !important;
    }

}


/* =========================================================
   VEYRON INDUSTRIAL — COMPANY PAGE
   SECTION 01: ABOUT VEYRON

   Editorial industrial hero
   Ivory / navy / copper
   Condensed heading typography
   Diagonal architectural composition
   Responsive photography

   Desktop: >= 1101px
   Tablet: 600px–1100px
   Mobile: <= 599px
========================================================= */


/* =========================================================
   01 — PAGE FOUNDATION
========================================================= */

body.vy-site .vy-company-page {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #F7F6F2;
    overflow: clip;
}


/* =========================================================
   02 — MAIN HERO
========================================================= */

body.vy-site .vy-company-hero {
    position: relative;
    isolation: isolate;

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

    margin: 0;
    padding: 0;

    background: #E4E5E1;

    overflow: hidden;
}


/* =========================================================
   03 — FULL-WIDTH RESPONSIVE PHOTO
========================================================= */

body.vy-site .vy-company-hero__picture {
    position: absolute;
    z-index: 0;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

body.vy-site .vy-company-hero__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 67% center;

    filter:
        saturate(.94)
        contrast(1.04);

    transform: scale(1);

    animation:
        vyCompanyImageReveal
        1.8s cubic-bezier(.22,1,.36,1)
        both;
}


/* =========================================================
   04 — PHOTOGRAPHIC LIGHTING
========================================================= */

body.vy-site .vy-company-hero__photo-light {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10,25,38,.12),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(4,17,29,.16) 0%,
            transparent 35%,
            rgba(9,27,42,.12) 100%
        );

    pointer-events: none;
}


/* =========================================================
   05 — MAIN IVORY ARCHITECTURAL SHAPE

   Full-viewport background treatment.
   Does NOT restrict the photograph or section
   to the 1200px content container.
========================================================= */

body.vy-site .vy-company-hero__ivory {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            112deg,
            #F7F6F2 0%,
            #FFFFFF 66%,
            #EAECE8 100%
        );

    clip-path: polygon(
        0 0,
        40% 0,
        60% 50%,
        46% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   06 — SOFT DIAGONAL GLASS FACET

   Adds depth without creating a busy design.
========================================================= */

body.vy-site .vy-company-hero__facet {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            122deg,
            rgba(255,255,255,.36),
            rgba(234,239,239,.62) 58%,
            rgba(255,255,255,.08)
        );

    clip-path: polygon(
        32% 0,
        44% 0,
        64% 52%,
        48% 100%,
        38% 100%,
        55% 50%
    );

    pointer-events: none;
}


/* =========================================================
   07 — SHARED 1200px INNER CONTENT SYSTEM
========================================================= */

body.vy-site .vy-company-hero__inner {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    min-height: 760px;

    box-sizing: border-box;

    padding-top: 120px;
    padding-bottom: 85px;
}


/* =========================================================
   08 — LEFT CONTENT BLOCK
========================================================= */

body.vy-site .vy-company-hero__content {
    width: 100%;
    max-width: 620px;

    margin: 0;
    padding: 0;

    animation:
        vyCompanyContentReveal
        .95s .10s cubic-bezier(.22,1,.36,1)
        both;
}


/* =========================================================
   09 — EYEBROW
========================================================= */

body.vy-site .vy-company-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 17px;

    margin: 0 0 29px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .14em;

    text-transform: uppercase;

    color: #142A3B;
}


/* Copper line before eyebrow */

body.vy-site .vy-company-hero__eyebrow-line {
    display: block;

    flex: 0 0 27px;

    width: 27px;
    height: 2px;

    background: #E87538;

    box-shadow:
        0 1px 5px rgba(232,117,56,.14);
}


/* =========================================================
   10 — LARGE CONDENSED HEADING
========================================================= */

body.vy-site .vy-company-hero__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(72px, 5.35vw, 105px);
    font-weight: 900;

    line-height: .88;
    letter-spacing: -.028em;

    text-transform: uppercase;

    color: #0C1927;

    text-shadow:
        0 3px 20px rgba(9,25,37,.055);
}

body.vy-site .vy-company-hero__title > span {
    display: block;
    white-space: nowrap;
}

body.vy-site .vy-company-hero__dot {
    color: #E87538;
}


/* =========================================================
   11 — INTRODUCTORY BODY COPY
========================================================= */

body.vy-site .vy-company-hero__description {
    width: 100%;
    max-width: 515px;

    margin: 35px 0 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;
    font-weight: 400;

    line-height: 1.51;
    letter-spacing: -.018em;

    color: #172B3D;

    text-wrap: pretty;
}


/* =========================================================
   12 — OUR STORY BUTTON
========================================================= */

body.vy-site .vy-company-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    min-height: 55px;

    margin-top: 31px;
    padding: 0 26px;

    background: #E87538;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 0;

    color: #FFFFFF;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .12em;

    text-transform: uppercase;
    text-decoration: none;

    box-shadow:
        0 15px 28px rgba(53,58,61,.13),
        0 4px 10px rgba(232,117,56,.15);

    transition:
        background-color .3s ease,
        box-shadow .3s ease,
        transform .3s cubic-bezier(.22,1,.36,1);
}

body.vy-site .vy-company-hero__button svg {
    display: block;

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    transition:
        transform .3s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   13 — BUTTON INTERACTIONS
========================================================= */

@media (hover: hover) {

    body.vy-site .vy-company-hero__button:hover {
        background: #F08446;

        transform: translateY(-3px);

        box-shadow:
            0 20px 34px rgba(53,58,61,.18),
            0 7px 17px rgba(232,117,56,.19);
    }

    body.vy-site
    .vy-company-hero__button:hover svg {
        transform: translateX(4px);
    }

}

body.vy-site
.vy-company-hero__button:focus-visible {
    outline: 2px solid #142A3B;
    outline-offset: 4px;
}


/* =========================================================
   14 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes vyCompanyContentReveal {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes vyCompanyImageReveal {

    from {
        opacity: .8;
        transform: scale(1.045);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================================
   15 — TABLET
   900px to 1100px
   Angled side-by-side composition
========================================================= */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    body.vy-site .vy-company-hero,
    body.vy-site .vy-company-hero__inner {
        min-height: 735px;
    }

    body.vy-site .vy-company-hero__inner {
        padding-top: 135px;
        padding-bottom: 75px;
    }

    body.vy-site .vy-company-hero__ivory {
        clip-path: polygon(
            0 0,
            50% 0,
            80% 53%,
            58% 100%,
            0 100%
        );
    }

    body.vy-site .vy-company-hero__facet {
        clip-path: polygon(
            41% 0,
            55% 0,
            84% 52%,
            62% 100%,
            51% 100%,
            73% 52%
        );
    }

    body.vy-site .vy-company-hero__content {
        max-width: 550px;
    }

    body.vy-site .vy-company-hero__title {
        font-size: clamp(68px, 7vw, 82px);
    }

    body.vy-site .vy-company-hero__description {
        max-width: 460px;

        font-size: 19px;
        line-height: 1.5;
    }

}


/* =========================================================
   16 — TABLET
   600px to 899px

   Ivory content surface above a diagonal
   photographic area for readability.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    body.vy-site .vy-company-hero,
    body.vy-site .vy-company-hero__inner {
        min-height: 920px;
    }

    body.vy-site .vy-company-hero__image {
        object-position: 67% center;
    }

    body.vy-site .vy-company-hero__ivory {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 67%,
            0 79%
        );
    }

    body.vy-site .vy-company-hero__facet {
        background:
            linear-gradient(
                115deg,
                rgba(255,255,255,.36),
                rgba(255,255,255,.04)
            );

        clip-path: polygon(
            0 66%,
            100% 55%,
            100% 68%,
            0 80%
        );
    }

    body.vy-site .vy-company-hero__inner {
        align-items: flex-start;

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

    body.vy-site .vy-company-hero__content {
        max-width: 590px;
    }

    body.vy-site .vy-company-hero__eyebrow {
        margin-bottom: 24px;
    }

    body.vy-site .vy-company-hero__title {
        font-size: clamp(57px, 8vw, 75px);
    }

    body.vy-site .vy-company-hero__description {
        max-width: 515px;

        margin-top: 28px;

        font-size: 20px;
    }

    body.vy-site .vy-company-hero__button {
        margin-top: 25px;
    }

}


/* =========================================================
   17 — MOBILE
   599px and below

   Full-width ivory content area with
   angled photographic reveal underneath.
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-company-hero,
    body.vy-site .vy-company-hero__inner {
        min-height: 850px;
    }

    body.vy-site .vy-company-hero__image {
        object-position: 72% center;
    }

    body.vy-site .vy-company-hero__photo-light {
        background:
            linear-gradient(
                180deg,
                rgba(7,22,36,.10),
                transparent 65%
            );
    }

    body.vy-site .vy-company-hero__ivory {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 72%,
            0 83%
        );
    }

    body.vy-site .vy-company-hero__facet {
        background:
            linear-gradient(
                115deg,
                rgba(255,255,255,.25),
                rgba(255,255,255,.025)
            );

        clip-path: polygon(
            0 74%,
            100% 63%,
            100% 74%,
            0 84%
        );
    }

    body.vy-site .vy-company-hero__inner {
        align-items: flex-start;

        padding-top: 139px;
        padding-bottom: 270px;
    }

    body.vy-site .vy-company-hero__content {
        max-width: 100%;
    }

    body.vy-site .vy-company-hero__eyebrow {
        gap: 11px;

        margin-bottom: 23px;

        font-size: 12px;
        letter-spacing: .105em;
    }

    body.vy-site .vy-company-hero__eyebrow-line {
        flex-basis: 23px;

        width: 23px;
    }

    body.vy-site .vy-company-hero__title {
        font-size: clamp(41px, 10.6vw, 63px);

        line-height: .94;
        letter-spacing: -.022em;
    }

    body.vy-site .vy-company-hero__description {
        max-width: 450px;

        margin-top: 25px;

        font-size: 17px;
        line-height: 1.48;
        letter-spacing: -.013em;
    }

    body.vy-site .vy-company-hero__button {
        gap: 13px;

        min-height: 50px;

        margin-top: 24px;
        padding: 0 20px;

        font-size: 12px;
        letter-spacing: .1em;
    }

    body.vy-site .vy-company-hero__button svg {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }

}


/* =========================================================
   18 — SMALL MOBILE
   Additional room for text wrapping
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-company-hero,
    body.vy-site .vy-company-hero__inner {
        min-height: 910px;
    }

    body.vy-site .vy-company-hero__title {
        font-size: clamp(35px, 10.2vw, 40px);
    }

    body.vy-site .vy-company-hero__description {
        font-size: 16px;
    }

}


/* =========================================================
   19 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-company-hero__image,
    body.vy-site .vy-company-hero__content {
        animation: none !important;

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

    body.vy-site .vy-company-hero__button,
    body.vy-site .vy-company-hero__button svg {
        transition: none !important;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL
   COMPANY PAGE — HERO REFINEMENTS

   01. Glassy header on internal pages
   02. Desktop photograph repositioning
   03. Tablet photo reveal
   04. Mobile spacing and photo reveal

   Homepage remains unchanged.
========================================================= */


/* =========================================================
   01 — GLOBAL HEADER ON INTERNAL PAGES

   Homepage:
   Transparent at top, dark on scroll.

   All other pages:
   Glassy navy background at all times.
========================================================= */

body.vy-site:not(.home) .vy-header,
body.vy-site:not(.home) .vy-header.is-scrolled {

    background: rgba(8, 19, 30, .88);

    -webkit-backdrop-filter:
        blur(14px) saturate(125%);

    backdrop-filter:
        blur(14px) saturate(125%);

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

    box-shadow:
        0 8px 26px rgba(4,14,24,.12);

}


/* =========================================================
   02 — DESKTOP PHOTOGRAPH
   1101px and above

   Shift photograph toward the right.
   Keep ivory diagonal and text unchanged.
========================================================= */


/* DESKTOP — PHOTO POSITION */
@media screen and (min-width: 1101px) {

    body.vy-site .vy-company-hero__image {
        object-position: center center;

        animation: none;

        transform: translateX(8%) scale(1.16);
        transform-origin: center center;
    }

}



/* =========================================================
   03 — TABLET PHOTOGRAPH
   600px to 899px

   Reveal photograph higher up so more of
   the workers' bodies become visible.

   Text and typography remain unchanged.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    body.vy-site .vy-company-hero__ivory {

        clip-path: polygon(
            0 0,
            100% 0,
            100% 57%,
            0 72%
        );

    }

    body.vy-site .vy-company-hero__facet {

        clip-path: polygon(
            0 59%,
            100% 47%,
            100% 59%,
            0 73%
        );

    }

    body.vy-site .vy-company-hero__image {
    object-position: 68% center;
    animation: none;
    transform: translateY(23%);
}

}


/* =========================================================
   04 — MOBILE HEIGHT AND SPACING
   599px and below

   Reduce excess ivory space.
   Keep the same content and diagonal design.
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-company-hero,
    body.vy-site .vy-company-hero__inner {

        min-height: 740px;

    }

    body.vy-site .vy-company-hero__inner {

        padding-top: 132px;

        padding-bottom: 145px;

    }


    /* Reveal the photograph sooner */

    body.vy-site .vy-company-hero__ivory {

        clip-path: polygon(
            0 0,
            100% 0,
            100% 71%,
            0 81%
        );

    }


    /* Keep the subtle glass diagonal */

    body.vy-site .vy-company-hero__facet {

        clip-path: polygon(
            0 80%,
            100% 70%,
            100% 76%,
            0 86%
        );

    }

/* LARGER TABLETS — 900px TO 1100px */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    body.vy-site .vy-company-hero__image {
        animation: none;
        transform: translateY(4%) scale(1.18);
    }

}
    /* Favor the upper portion of the photograph */

    body.vy-site .vy-company-hero__image {
    object-position: 68% center;
    animation: none;
    transform: translateY(35%);
}

}


/* =========================================================
   05 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-company-hero__image {
        animation: none !important;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — COMPANY PAGE
   SECTION 02 — WHAT DRIVES US

   Industrial editorial design
   Navy / White / Copper Orange
   Angular architectural overlays
   Photographic lighting and depth
   Oversized Barlow Condensed typography

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: <=599px

   All backgrounds full width.
   All content aligned to 1200px.
========================================================= */


/* =========================================================
   01 — MAIN SECTION
========================================================= */

body.vy-site .vy-values {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #091B2C;
    color: #FFFFFF;

    overflow: hidden;
}


/* =========================================================
   02 — RESPONSIVE BACKGROUND PHOTOGRAPH
========================================================= */

body.vy-site .vy-values__picture {
    position: absolute;
    z-index: 0;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
}

body.vy-site .vy-values__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 61% center;

    filter:
        saturate(.94)
        contrast(1.05);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   03 — DEEP NAVY PHOTOGRAPHIC WASH

   Strong contrast behind editorial copy.
   Right edge retains visible photography.
========================================================= */

body.vy-site .vy-values__scrim {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6,23,39,.98) 0%,
            rgba(8,29,48,.95) 36%,
            rgba(8,29,48,.79) 63%,
            rgba(7,23,38,.14) 100%
        );

    pointer-events: none;
}


/* =========================================================
   04 — ANGULAR INDUSTRIAL NAVY PANEL

   Recreates the dramatic diagonal movement
   from the approved mockup.
========================================================= */

body.vy-site .vy-values__angle {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            113deg,
            rgba(6,23,39,.90),
            rgba(10,38,62,.74)
        );

    clip-path: polygon(
        0 0,
        55% 0,
        83% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   05 — SUBTLE TRANSLUCENT FACET

   Creates layered architectural depth
   without overpowering the typography.
========================================================= */

body.vy-site .vy-values__facet {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            123deg,
            rgba(119,157,183,.04),
            rgba(112,156,186,.16),
            rgba(10,29,46,.03)
        );

    clip-path: polygon(
        40% 0,
        51% 0,
        85% 100%,
        72% 100%
    );

    pointer-events: none;
}


/* =========================================================
   06 — EDITORIAL LIGHTING

   Controlled glow and soft shadow depth.
========================================================= */

body.vy-site .vy-values__lighting {
    position: absolute;
    z-index: 4;

    inset: 0;

    background:
        radial-gradient(
            ellipse 38% 105% at 31% 40%,
            rgba(53,99,129,.17),
            transparent 80%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 45%,
            rgba(0,0,0,.15)
        );

    pointer-events: none;
}


/* =========================================================
   07 — SHARED 1200PX LAYOUT

   Left editorial copy / right values.
========================================================= */

body.vy-site .vy-values__inner {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 350px)
        minmax(0, 1fr);

    align-items: center;

    column-gap: clamp(45px, 5vw, 88px);

    min-height: 590px;

    box-sizing: border-box;

    padding-top: 76px;
    padding-bottom: 82px;
}


/* =========================================================
   08 — LEFT EDITORIAL COPY
========================================================= */

body.vy-site .vy-values__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    max-width: 350px;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   09 — EYEBROW
========================================================= */

body.vy-site .vy-values__eyebrow {
    display: flex;
    align-items: center;

    gap: 15px;

    margin: 0 0 24px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .14em;

    text-transform: uppercase;

    color: #FFFFFF;
}

body.vy-site .vy-values__eyebrow-line {
    display: block;

    flex: 0 0 28px;

    width: 28px;
    height: 2px;

    background: #E87538;

    box-shadow:
        0 0 12px rgba(232,117,56,.22);
}


/* =========================================================
   10 — ITALIC EDITORIAL STATEMENT
========================================================= */

body.vy-site .vy-values__statement {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(24px, 1.65vw, 30px);
    font-weight: 400;
    font-style: italic;

    line-height: 1.43;
    letter-spacing: -.016em;

    color: #F7F6F2;

    text-wrap: pretty;

    text-shadow:
        0 2px 12px rgba(0,0,0,.12);
}


/* =========================================================
   11 — SUPPORTING PARAGRAPH
========================================================= */

body.vy-site .vy-values__description {
    width: 100%;

    margin: 26px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.65;
    letter-spacing: -.005em;

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


/* =========================================================
   12 — RIGHT VALUES COLUMN
========================================================= */

body.vy-site .vy-values__principles {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   13 — VALUE LIST
========================================================= */

body.vy-site .vy-values__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 2px;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   14 — OVERSIZED VALUES

   Barlow Condensed maintains the same
   powerful industrial typography used
   throughout the Company page.
========================================================= */

body.vy-site .vy-values__item {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(59px, 4.4vw, 84px);
    font-weight: 900;

    line-height: .91;
    letter-spacing: -.02em;

    text-transform: uppercase;

    color: #FFFFFF;

    white-space: nowrap;

    text-shadow:
        0 4px 19px rgba(0,0,0,.18);
}


/* First three punctuation marks in copper */

body.vy-site .vy-values__dot {
    color: #E87538;
}


/* Last three words and periods in copper */

body.vy-site .vy-values__item--accent {
    color: #E87538;
}


/* =========================================================
   15 — OPTIONAL SUBTLE PHOTO INTERACTION
========================================================= */

@media (hover: hover) {

    body.vy-site
    .vy-values:hover
    .vy-values__image {
        transform: scale(1.025);
    }

}


/* =========================================================
   16 — SCROLL ENTRANCE
========================================================= */

@keyframes vyValuesReveal {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        body.vy-site .vy-values__intro,
        body.vy-site .vy-values__principles {
            animation: vyValuesReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 24%;
        }

    }

}


/* =========================================================
   17 — TABLET
   900px to 1100px

   Retains side-by-side editorial layout.
========================================================= */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    body.vy-site .vy-values__inner {
        grid-template-columns:
            minmax(0, 300px)
            minmax(0, 1fr);

        column-gap: 32px;

        min-height: 550px;

        padding-top: 67px;
        padding-bottom: 72px;
    }

    body.vy-site .vy-values__statement {
        font-size: 25px;
    }

    body.vy-site .vy-values__description {
        font-size: 16px;
        line-height: 1.6;
    }

    body.vy-site .vy-values__item {
        font-size: clamp(57px, 6.1vw, 68px);
    }

    body.vy-site .vy-values__image {
        object-position: 69% center;
    }

    body.vy-site .vy-values__angle {
        clip-path: polygon(
            0 0,
            65% 0,
            90% 100%,
            0 100%
        );
    }

}


/* =========================================================
   18 — SMALLER TABLET
   600px to 899px

   Stacked content:
   Editorial introduction above values.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    body.vy-site .vy-values__inner {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 42px;

        min-height: 0;

        padding-top: 72px;
        padding-bottom: 78px;
    }

    body.vy-site .vy-values__intro {
        max-width: 560px;
    }

    body.vy-site .vy-values__eyebrow {
        margin-bottom: 24px;
    }

    body.vy-site .vy-values__statement {
        max-width: 510px;

        font-size: clamp(26px, 3.6vw, 32px);
    }

    body.vy-site .vy-values__description {
        max-width: 520px;

        margin-top: 22px;

        font-size: 17px;
        line-height: 1.62;
    }

    body.vy-site .vy-values__item {
        font-size: clamp(55px, 8vw, 73px);
    }

    body.vy-site .vy-values__list {
        gap: 3px;
    }

    body.vy-site .vy-values__image {
        object-position: 70% center;
    }

    body.vy-site .vy-values__scrim {
        background:
            linear-gradient(
                90deg,
                rgba(6,23,39,.98),
                rgba(8,29,48,.90) 57%,
                rgba(7,23,38,.58)
            );
    }

    body.vy-site .vy-values__angle {
        clip-path: polygon(
            0 0,
            74% 0,
            100% 72%,
            100% 100%,
            0 100%
        );
    }

    body.vy-site .vy-values__facet {
        opacity: .60;
    }

}


/* =========================================================
   19 — MOBILE
   599px and below

   Compact stacked design with enough
   contrast for white and copper typography.
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-values {
        min-height: 0;
    }

    body.vy-site .vy-values__inner {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 37px;

        min-height: 0;

        padding-top: 60px;
        padding-bottom: 66px;
    }

    body.vy-site .vy-values__intro {
        max-width: 100%;
    }

    body.vy-site .vy-values__eyebrow {
        gap: 12px;

        margin-bottom: 21px;

        font-size: 12px;
        letter-spacing: .11em;
    }

    body.vy-site .vy-values__eyebrow-line {
        flex-basis: 24px;
        width: 24px;
    }

    body.vy-site .vy-values__statement {
        max-width: 430px;

        font-size: clamp(23px, 5.8vw, 29px);
        line-height: 1.42;
    }

    body.vy-site .vy-values__description {
        max-width: 440px;

        margin-top: 21px;

        font-size: 16px;
        line-height: 1.65;
    }

    body.vy-site .vy-values__principles {
        width: 100%;
    }

    body.vy-site .vy-values__list {
        gap: 4px;
    }

    body.vy-site .vy-values__item {
        font-size: clamp(42px, 10.4vw, 60px);

        line-height: .94;
        letter-spacing: -.018em;
    }

    body.vy-site .vy-values__image {
        object-position: 72% center;
    }

    body.vy-site .vy-values__scrim {
        background:
            linear-gradient(
                180deg,
                rgba(6,23,39,.98) 0%,
                rgba(8,29,48,.95) 48%,
                rgba(8,29,48,.82) 100%
            );
    }

    body.vy-site .vy-values__angle {
        background:
            linear-gradient(
                130deg,
                rgba(6,23,39,.86),
                rgba(10,38,62,.57)
            );

        clip-path: polygon(
            0 0,
            80% 0,
            100% 58%,
            100% 100%,
            0 100%
        );
    }

    body.vy-site .vy-values__facet {
        opacity: .42;

        clip-path: polygon(
            56% 0,
            67% 0,
            100% 55%,
            100% 76%
        );
    }

}


/* =========================================================
   20 — VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-values__inner {
        row-gap: 31px;
        padding-top: 54px;
        padding-bottom: 58px;
    }

    body.vy-site .vy-values__statement {
        font-size: 22px;
    }

    body.vy-site .vy-values__description {
        font-size: 15px;
    }

    body.vy-site .vy-values__item {
        font-size: 39px;
    }

}


/* =========================================================
   21 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-values__image {
        transform: none !important;
        transition: none !important;
    }

    body.vy-site .vy-values__intro,
    body.vy-site .vy-values__principles {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — COMPANY PAGE
   SECTION 03 — OUR PHILOSOPHY

   Ivory editorial statement
   Industrial photographic background
   Angular architectural overlays
   Copper underlined phrases
   Soft lighting and controlled depth

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Full-width background
   Shared 1200px content alignment
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body.vy-site .vy-philosophy {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #F7F6F2;
    color: #0C1927;

    overflow: hidden;
}


/* =========================================================
   02 — RESPONSIVE INDUSTRIAL PHOTOGRAPH
========================================================= */

body.vy-site .vy-philosophy__picture {
    position: absolute;
    z-index: 0;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
}

body.vy-site .vy-philosophy__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 74% 45%;

    filter:
        saturate(.95)
        contrast(1.04);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   03 — PHOTOGRAPHIC LIGHTING

   Subtle shadows and controlled highlights.
========================================================= */

body.vy-site .vy-philosophy__photo-light {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10,25,38,.03) 0%,
            transparent 55%,
            rgba(10,25,38,.10) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            transparent 38%,
            rgba(9,27,42,.10)
        );

    pointer-events: none;
}


/* =========================================================
   04 — IVORY ARCHITECTURAL SURFACE

   The content surface forms a diagonal edge.
   The photograph remains full width underneath.
========================================================= */

body.vy-site .vy-philosophy__ivory {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            112deg,
            #FFFFFF 0%,
            #F9F8F5 64%,
            #EAECE9 100%
        );

    clip-path: polygon(
        0 0,
        81% 0,
        62% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   05 — TRANSLUCENT ANGULAR FACET

   Adds the glass-like layered geometry
   visible near the image boundary.
========================================================= */

body.vy-site .vy-philosophy__facet {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.06),
            rgba(233,239,241,.54),
            rgba(255,255,255,.13)
        );

    clip-path: polygon(
        64% 0,
        76% 0,
        57% 100%,
        46% 100%
    );

    pointer-events: none;
}


/* =========================================================
   06 — SHARED 1200PX CONTENT LAYOUT
========================================================= */

body.vy-site .vy-philosophy__inner {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    min-height: 625px;

    box-sizing: border-box;

    padding-top: 88px;
    padding-bottom: 92px;
}


/* =========================================================
   07 — LEFT EDITORIAL CONTENT
========================================================= */

body.vy-site .vy-philosophy__content {
    width: 66%;
    max-width: 725px;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   08 — SECTION EYEBROW
========================================================= */

body.vy-site .vy-philosophy__eyebrow {
    display: flex;
    align-items: center;

    gap: 16px;

    margin: 0 0 31px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .14em;

    text-transform: uppercase;

    color: #0C1927;
}

body.vy-site .vy-philosophy__eyebrow-line {
    display: block;

    flex: 0 0 28px;

    width: 28px;
    height: 2px;

    background: #E87538;
}


/* =========================================================
   09 — LARGE EDITORIAL STATEMENT

   Serif italic matches the visual hierarchy
   of your approved mockup.
========================================================= */

body.vy-site .vy-philosophy__statement {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(29px, 2.45vw, 44px);
    font-weight: 400;
    font-style: italic;

    line-height: 1.24;
    letter-spacing: -.025em;

    color: #141922;

    text-wrap: pretty;
}


/* =========================================================
   10 — COPPER UNDERLINE ACCENTS

   Only the two approved phrases are underlined.
========================================================= */

body.vy-site .vy-philosophy__underline {
    color: inherit;

    text-decoration-line: underline;
    text-decoration-color: #E87538;
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;

    text-decoration-skip-ink: none;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* =========================================================
   11 — SUPPORTING PARAGRAPH
========================================================= */

body.vy-site .vy-philosophy__description {
    width: 100%;
    max-width: 630px;

    margin: 31px 0 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(16px, 1.05vw, 19px);
    font-weight: 400;

    line-height: 1.65;
    letter-spacing: -.008em;

    color: #344352;

    text-wrap: pretty;
}


/* =========================================================
   12 — SUBTLE PHOTOGRAPHIC INTERACTION
========================================================= */

@media (hover: hover) {

    body.vy-site
    .vy-philosophy:hover
    .vy-philosophy__image {
        transform: scale(1.025);
    }

}


/* =========================================================
   13 — SCROLL ENTRANCE ANIMATION
========================================================= */

@keyframes vyPhilosophyReveal {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        body.vy-site .vy-philosophy__content {
            animation: vyPhilosophyReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 24%;
        }

    }

}


/* =========================================================
   14 — WIDE TABLET
   900px to 1100px

   Keeps text left and photo right.
========================================================= */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    body.vy-site .vy-philosophy__inner {
        min-height: 610px;

        padding-top: 72px;
        padding-bottom: 76px;
    }

    body.vy-site .vy-philosophy__content {
        width: 65%;
        max-width: 660px;
    }

    body.vy-site .vy-philosophy__statement {
        font-size: clamp(31px, 3.7vw, 39px);
        line-height: 1.27;
    }

    body.vy-site .vy-philosophy__description {
        max-width: 560px;

        font-size: 17px;
    }

    body.vy-site .vy-philosophy__ivory {
        clip-path: polygon(
            0 0,
            83% 0,
            65% 100%,
            0 100%
        );
    }

    body.vy-site .vy-philosophy__facet {
        clip-path: polygon(
            67% 0,
            80% 0,
            62% 100%,
            52% 100%
        );
    }

    body.vy-site .vy-philosophy__image {
        object-position: 76% center;
    }

}


/* =========================================================
   15 — TABLET
   600px to 899px

   Ivory statement above the photograph.
   The diagonal transition remains visible.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    body.vy-site .vy-philosophy__inner {
        min-height: 0;

        align-items: flex-start;

        padding-top: 70px;
        padding-bottom: 385px;
    }

    body.vy-site .vy-philosophy__content {
        width: 100%;
        max-width: 650px;
    }

    body.vy-site .vy-philosophy__eyebrow {
        margin-bottom: 27px;
    }

    body.vy-site .vy-philosophy__statement {
        max-width: 630px;

        font-size: clamp(30px, 4.5vw, 37px);
        line-height: 1.27;
    }

    body.vy-site .vy-philosophy__description {
        max-width: 580px;

        margin-top: 27px;

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

    body.vy-site .vy-philosophy__ivory {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 340px),
            0 calc(100% - 225px)
        );
    }

    body.vy-site .vy-philosophy__facet {
        clip-path: polygon(
            0 calc(100% - 250px),
            100% calc(100% - 380px),
            100% calc(100% - 290px),
            0 calc(100% - 155px)
        );
    }

    body.vy-site .vy-philosophy__image {
        object-position: 65% 42%;
    }

}


/* =========================================================
   16 — MOBILE
   599px and below

   Spacious readable content, followed by
   an angled photographic reveal.

   Section height grows with content.
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-philosophy__inner {
        min-height: 0;

        align-items: flex-start;

        padding-top: 56px;
        padding-bottom: 355px;
    }

    body.vy-site .vy-philosophy__content {
        width: 100%;
        max-width: 100%;
    }

    body.vy-site .vy-philosophy__eyebrow {
        gap: 12px;

        margin-bottom: 23px;

        font-size: 12px;
        letter-spacing: .11em;
    }

    body.vy-site .vy-philosophy__eyebrow-line {
        width: 24px;
        flex-basis: 24px;
    }

    body.vy-site .vy-philosophy__statement {
        max-width: 100%;

        font-size: clamp(27px, 7vw, 34px);

        line-height: 1.32;
        letter-spacing: -.02em;
    }

    body.vy-site .vy-philosophy__underline {
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
    }

    body.vy-site .vy-philosophy__description {
        max-width: 100%;

        margin-top: 25px;

        font-size: 16px;
        line-height: 1.65;
    }

    body.vy-site .vy-philosophy__ivory {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 312px),
            0 calc(100% - 205px)
        );
    }

    body.vy-site .vy-philosophy__facet {
        clip-path: polygon(
            0 calc(100% - 215px),
            100% calc(100% - 340px),
            100% calc(100% - 280px),
            0 calc(100% - 155px)
        );

        opacity: .72;
    }

    body.vy-site .vy-philosophy__image {
        object-position: 68% 43%;
    }

}


/* =========================================================
   17 — VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-philosophy__inner {
        padding-top: 49px;
        padding-bottom: 340px;
    }

    body.vy-site .vy-philosophy__statement {
        font-size: clamp(25px, 7.6vw, 28px);
    }

    body.vy-site .vy-philosophy__description {
        font-size: 15px;
    }

}


/* =========================================================
   18 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-philosophy__image {
        transition: none !important;
        transform: none !important;
    }

    body.vy-site .vy-philosophy__content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — COMPANY PAGE
   SECTION 04 — OUR APPROACH

   Interactive vertical navigation
   Condensed industrial typography
   Ivory architectural background
   Right-side photographic diagonal
   Soft lighting, depth, and transitions

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: <=599px

   No orange vertical line at left.
   No changes to earlier sections.
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body.vy-site .vy-approach {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #FAF9F6;
    color: #0C1927;

    overflow: hidden;
}


/* =========================================================
   02 — SUBTLE EDITORIAL LIGHTING
========================================================= */

body.vy-site .vy-approach__lighting {
    position: absolute;
    z-index: 0;

    inset: 0;

    background:
        radial-gradient(
            ellipse 55% 90% at 25% 10%,
            rgba(255,255,255,.95),
            transparent 85%
        ),
        linear-gradient(
            125deg,
            rgba(235,238,238,.24),
            transparent 60%
        );

    pointer-events: none;
}


/* =========================================================
   03 — 1200PX CONTENT GRID

   Left: vertical topic menu
   Middle: selected content
   Right: full-bleed photographic background
========================================================= */

body.vy-site .vy-approach__inner {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(230px, 270px)
        minmax(0, 1fr);

    column-gap: clamp(35px, 3vw, 58px);

    align-items: start;

    min-height: 510px;

    padding-top: 78px;
    padding-bottom: 82px;

    box-sizing: border-box;
}


/* =========================================================
   04 — LEFT NAVIGATION SIDEBAR
========================================================= */

body.vy-site .vy-approach__sidebar {
    min-width: 0;

    padding-right: 26px;

    border-right:
        1px solid rgba(12,25,39,.13);
}


/* Eyebrow */

body.vy-site .vy-approach__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 30px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .12em;

    text-transform: uppercase;

    color: #0C1927;
}

body.vy-site .vy-approach__eyebrow-line {
    display: block;

    flex: 0 0 27px;

    width: 27px;
    height: 2px;

    background: #E87538;
}


/* =========================================================
   05 — VERTICAL APPROACH MENU
========================================================= */

body.vy-site .vy-approach__menu {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* Each clickable topic */

body.vy-site .vy-approach__option {
    position: relative;

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

    gap: 12px;

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

    box-sizing: border-box;

    margin: 0;
    padding: 11px 4px 11px 15px;

    border-bottom:
        1px solid rgba(12,25,39,.10);

    cursor: pointer;

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


/* Remove lower separator on final topic */

body.vy-site
.vy-approach__option:last-child {
    border-bottom: none;
}


/* Copper selection indicator */

body.vy-site .vy-approach__option::before {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 0;

    width: 3px;

    background: #E87538;

    opacity: 0;
    transform: scaleY(.45);

    transform-origin: center;

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


/* Visually hidden native radio input

   Native radio navigation supports keyboard
   interaction without a JavaScript dependency.
*/

body.vy-site .vy-approach__radio {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: 0;
    padding: 0;

    opacity: 0;

    pointer-events: none;
}


/* Menu labels */

body.vy-site .vy-approach__option-text {
    display: block;

    min-width: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.3;

    color: #344352;

    transition:
        color .25s ease,
        font-weight .25s ease;
}


/* Arrow shown on the selected topic */

body.vy-site .vy-approach__option-arrow {
    display: block;

    flex: 0 0 auto;

    font-family: Arial, sans-serif;

    font-size: 21px;

    color: #E87538;

    opacity: 0;

    transform: translateX(-5px);

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


/* =========================================================
   06 — ACTIVE TOPIC STATE
========================================================= */

body.vy-site
.vy-approach__option:has(
    .vy-approach__radio:checked
)::before {
    opacity: 1;
    transform: scaleY(1);
}

body.vy-site
.vy-approach__option:has(
    .vy-approach__radio:checked
)
.vy-approach__option-text {
    color: #0C1927;
    font-weight: 800;
}

body.vy-site
.vy-approach__option:has(
    .vy-approach__radio:checked
)
.vy-approach__option-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   07 — HOVER AND KEYBOARD FOCUS
========================================================= */

@media (hover: hover) {

    body.vy-site
    .vy-approach__option:hover {
        background: rgba(232,117,56,.045);
    }

    body.vy-site
    .vy-approach__option:hover
    .vy-approach__option-text {
        color: #0C1927;
    }

}

body.vy-site
.vy-approach__option:focus-within {
    outline: 2px solid #E87538;
    outline-offset: -2px;
}


/* =========================================================
   08 — SELECTED CONTENT COLUMN
========================================================= */

body.vy-site .vy-approach__details {
    position: relative;

    min-width: 0;
    width: 100%;
    max-width: 580px;

    padding-top: 38px;
}


/* Panels hidden until selected */

body.vy-site .vy-approach__panel {
    display: none;

    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    width: 100%;
}


/* =========================================================
   09 — CSS-ONLY INTERACTIVE PANEL SELECTION
========================================================= */

body.vy-site
.vy-approach:has(
    .vy-approach__radio[value="1"]:checked
)
.vy-approach__panel--1 {
    display: flex;
}

body.vy-site
.vy-approach:has(
    .vy-approach__radio[value="2"]:checked
)
.vy-approach__panel--2 {
    display: flex;
}

body.vy-site
.vy-approach:has(
    .vy-approach__radio[value="3"]:checked
)
.vy-approach__panel--3 {
    display: flex;
}

body.vy-site
.vy-approach:has(
    .vy-approach__radio[value="4"]:checked
)
.vy-approach__panel--4 {
    display: flex;
}

body.vy-site
.vy-approach:has(
    .vy-approach__radio[value="5"]:checked
)
.vy-approach__panel--5 {
    display: flex;
}

body.vy-site
.vy-approach:has(
    .vy-approach__radio[value="6"]:checked
)
.vy-approach__panel--6 {
    display: flex;
}


/* =========================================================
   10 — LARGE INDUSTRIAL HEADING
========================================================= */

body.vy-site .vy-approach__heading {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(39px, 3.1vw, 54px);
    font-weight: 900;

    line-height: .99;
    letter-spacing: -.02em;

    text-transform: uppercase;

    color: #0C1927;

    text-wrap: balance;

    text-shadow:
        0 3px 16px rgba(12,25,39,.05);
}


/* =========================================================
   11 — SMALL COPPER HEADING UNDERLINE
========================================================= */

body.vy-site .vy-approach__accent {
    display: block;

    width: 55px;
    height: 3px;

    margin: 25px 0 28px;

    background: #E87538;

    box-shadow:
        0 1px 7px rgba(232,117,56,.16);
}


/* =========================================================
   12 — DESCRIPTION
========================================================= */

body.vy-site .vy-approach__description {
    width: 100%;
    max-width: 510px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.62;
    letter-spacing: -.008em;

    color: #344352;

    text-wrap: pretty;
}


/* =========================================================
   13 — LEARN MORE BUTTON
========================================================= */

body.vy-site .vy-approach__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    min-height: 51px;

    margin-top: 27px;
    padding: 0 23px;

    background: #0C1927;

    border: 1px solid rgba(12,25,39,.1);
    border-radius: 0;

    color: #FFFFFF;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .09em;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(12,25,39,.15),
        inset 0 1px 0 rgba(255,255,255,.10);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

body.vy-site .vy-approach__button svg {
    display: block;

    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    transition: transform .3s ease;
}


/* Hover */

@media (hover: hover) {

    body.vy-site .vy-approach__button:hover {
        background: #173349;

        transform: translateY(-2px);

        box-shadow:
            0 15px 30px rgba(12,25,39,.20);
    }

    body.vy-site
    .vy-approach__button:hover svg {
        transform: translateX(4px);
    }

}

body.vy-site .vy-approach__button:focus-visible {
    outline: 2px solid #E87538;
    outline-offset: 4px;
}


/* =========================================================
   14 — RIGHT INDUSTRIAL PHOTOGRAPH

   The image extends to the browser edge,
   while text stays aligned to 1200px.
========================================================= */

body.vy-site .vy-approach__picture {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: clamp(330px, 30vw, 580px);
    height: 100%;

    overflow: hidden;

    clip-path: polygon(
        23% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    background: #C7D1D6;
}

body.vy-site .vy-approach__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 54% center;

    filter:
        saturate(.96)
        contrast(1.035);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}


/* Subtle cinematic lighting */

body.vy-site .vy-approach__picture::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            transparent 43%,
            rgba(10,25,39,.12)
        );

    pointer-events: none;
}


/* =========================================================
   15 — TRANSLUCENT ANGULAR FACET
========================================================= */

body.vy-site .vy-approach__facet {
    position: absolute;
    z-index: 2;

    top: 0;
    right: 26%;

    width: 13%;
    height: 100%;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.48),
            rgba(221,232,238,.17)
        );

    clip-path: polygon(
        40% 0,
        100% 0,
        60% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   16 — CONTENT TRANSITION
========================================================= */

@keyframes vyApproachPanelIn {
    from {
        opacity: 0;
        transform: translateY(11px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {

    body.vy-site .vy-approach__panel {
        animation:
            vyApproachPanelIn
            .38s cubic-bezier(.22,1,.36,1)
            both;
    }

}


/* =========================================================
   17 — DESKTOP PHOTO AND CONTENT BALANCE
   1101px to 1399px
========================================================= */

@media screen and (min-width: 1101px)
and (max-width: 1399px) {

    body.vy-site .vy-approach__picture {
        width: 25%;
    }

    body.vy-site .vy-approach__facet {
        right: 21%;
    }

    body.vy-site .vy-approach__heading {
        font-size: clamp(39px, 3.5vw, 46px);
    }

    body.vy-site .vy-approach__description {
        max-width: 480px;
        font-size: 17px;
    }

}


/* =========================================================
   18 — WIDE TABLET
   900px to 1100px
========================================================= */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    body.vy-site .vy-approach__inner {
        grid-template-columns:
            minmax(205px, 235px)
            minmax(0, 1fr);

        column-gap: 30px;

        min-height: 480px;

        padding-top: 65px;
        padding-bottom: 67px;
    }

    body.vy-site .vy-approach__sidebar {
        padding-right: 19px;
    }

    body.vy-site .vy-approach__option-text {
        font-size: 14px;
    }

    body.vy-site .vy-approach__details {
        padding-top: 34px;
        max-width: 440px;
    }

    body.vy-site .vy-approach__heading {
        font-size: 40px;
    }

    body.vy-site .vy-approach__description {
        max-width: 390px;
        font-size: 16px;
    }

    body.vy-site .vy-approach__picture {
        width: 26%;
    }

    body.vy-site .vy-approach__facet {
        right: 21%;
        width: 12%;
    }

}


/* =========================================================
   19 — SMALLER TABLET
   600px to 899px

   Two-column menu and description,
   followed by full-width photo reveal.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    body.vy-site .vy-approach__inner {
        grid-template-columns:
            minmax(190px, .85fr)
            minmax(0, 1.15fr);

        column-gap: 26px;

        min-height: 0;

        padding-top: 60px;
        padding-bottom: 48px;
    }

    body.vy-site .vy-approach__sidebar {
        padding-right: 17px;
    }

    body.vy-site .vy-approach__eyebrow {
        font-size: 12px;
        margin-bottom: 24px;
    }

    body.vy-site .vy-approach__option {
        min-height: 49px;
    }

    body.vy-site .vy-approach__option-text {
        font-size: 14px;
    }

    body.vy-site .vy-approach__details {
        max-width: 100%;

        padding-top: 34px;
    }

    body.vy-site .vy-approach__heading {
        font-size: clamp(35px, 4.6vw, 43px);
    }

    body.vy-site .vy-approach__accent {
        margin-top: 21px;
        margin-bottom: 23px;
    }

    body.vy-site .vy-approach__description {
        font-size: 16px;
        line-height: 1.58;
    }

    body.vy-site .vy-approach__picture {
        position: relative;

        width: 100%;
        height: 290px;

        clip-path: polygon(
            0 10%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    body.vy-site .vy-approach__image {
        object-position: center 42%;
    }

    body.vy-site .vy-approach__facet {
        display: none;
    }

}


/* =========================================================
   20 — MOBILE
   599px and below

   Vertical navigation above the selected
   content and the industrial image.
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-approach__inner {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 28px;

        min-height: 0;

        padding-top: 52px;
        padding-bottom: 42px;
    }

    body.vy-site .vy-approach__sidebar {
        width: 100%;

        padding-right: 0;

        border-right: none;
    }

    body.vy-site .vy-approach__eyebrow {
        gap: 12px;

        margin-bottom: 22px;

        font-size: 12px;
    }

    body.vy-site .vy-approach__eyebrow-line {
        width: 24px;
        flex-basis: 24px;
    }

    body.vy-site .vy-approach__option {
        min-height: 46px;

        padding-top: 9px;
        padding-bottom: 9px;
    }

    body.vy-site .vy-approach__option-text {
        font-size: 15px;
    }

    body.vy-site .vy-approach__option-arrow {
        font-size: 19px;
    }

    body.vy-site .vy-approach__details {
        max-width: 100%;

        padding-top: 0;
    }

    body.vy-site .vy-approach__heading {
        font-size: clamp(38px, 9.2vw, 49px);

        line-height: 1;
    }

    body.vy-site .vy-approach__accent {
        width: 47px;

        margin-top: 21px;
        margin-bottom: 22px;
    }

    body.vy-site .vy-approach__description {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.62;
    }

    body.vy-site .vy-approach__button {
        min-height: 49px;

        margin-top: 24px;
        padding: 0 20px;

        font-size: 13px;
    }

    body.vy-site .vy-approach__picture {
        position: relative;

        width: 100%;
        height: clamp(240px, 70vw, 355px);

        clip-path: polygon(
            0 11%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    body.vy-site .vy-approach__image {
        object-position: center 42%;
    }

    body.vy-site .vy-approach__facet {
        display: none;
    }

}


/* =========================================================
   21 — VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-approach__inner {
        padding-top: 46px;
        padding-bottom: 36px;
    }

    body.vy-site .vy-approach__option-text {
        font-size: 14px;
    }

    body.vy-site .vy-approach__heading {
        font-size: 35px;
    }

    body.vy-site .vy-approach__description {
        font-size: 15px;
    }

}


/* =========================================================
   22 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-approach__panel {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.vy-site .vy-approach__image,
    body.vy-site .vy-approach__option,
    body.vy-site .vy-approach__option-arrow,
    body.vy-site .vy-approach__button,
    body.vy-site .vy-approach__button svg {
        transition: none !important;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — COMPANY PAGE
   SECTION 05 — FINAL CTA

   Navy architectural design
   Copper orange / ivory typography
   Angular layering and controlled lighting

   Shared 1200px grid
   Full-width section background

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: <=599px

   Fully scoped — other sections unchanged.
========================================================= */


/* =========================================================
   01 — FULL-WIDTH SECTION
========================================================= */

body.vy-site .vy-company-cta {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 100px 0 38px;

    background:
        linear-gradient(
            120deg,
            #081725 0%,
            #10283D 52%,
            #081A2A 100%
        );

    color: #FFFFFF;

    overflow: hidden;
}


/* =========================================================
   02 — ANGLED TRANSITION FROM SECTION 04

   Small ivory architectural cut along the top.
========================================================= */

body.vy-site .vy-company-cta::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;

    width: 100%;
    height: 55px;

    background: #FAF9F6;

    clip-path: polygon(
        0 0,
        100% 0,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   03 — SLATE-BLUE ANGULAR GEOMETRY
========================================================= */

body.vy-site .vy-company-cta__geometry {
    position: absolute;
    z-index: 0;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(99,133,163,.04),
            rgba(115,147,173,.20)
        );

    clip-path: polygon(
        76% 0,
        100% 0,
        100% 100%,
        46% 100%
    );

    pointer-events: none;
}


/* =========================================================
   04 — CONTROLLED EDITORIAL LIGHTING
========================================================= */

body.vy-site .vy-company-cta__lighting {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        radial-gradient(
            ellipse 50% 105% at 82% 30%,
            rgba(115,151,184,.20),
            transparent 76%
        ),
        radial-gradient(
            ellipse 50% 120% at 15% 100%,
            rgba(55,101,135,.12),
            transparent 76%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 58%,
            rgba(0,0,0,.14)
        );

    pointer-events: none;
}


/* =========================================================
   05 — SHARED CONTENT CONTAINER
========================================================= */

body.vy-site .vy-company-cta__inner {
    position: relative;
    z-index: 3;

    box-sizing: border-box;
}


/* =========================================================
   06 — COPPER EYEBROW
========================================================= */

body.vy-site .vy-company-cta__eyebrow {
    display: flex;
    align-items: center;

    gap: 15px;

    margin: 0 0 34px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .15em;

    text-transform: uppercase;

    color: #F18A4C;
}

body.vy-site .vy-company-cta__eyebrow-line {
    display: block;

    flex: 0 0 28px;

    width: 28px;
    height: 2px;

    background: #E87538;

    box-shadow:
        0 0 14px rgba(232,117,56,.20);
}


/* =========================================================
   07 — TWO-COLUMN CONTENT GRID
========================================================= */

body.vy-site .vy-company-cta__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    align-items: center;

    column-gap: clamp(50px, 6vw, 100px);

    width: 100%;

    padding-bottom: 82px;
}


/* =========================================================
   08 — LARGE INDUSTRIAL HEADING
========================================================= */

body.vy-site .vy-company-cta__heading-wrap {
    min-width: 0;
}

body.vy-site .vy-company-cta__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(69px, 5.6vw, 105px);
    font-weight: 900;

    line-height: .89;
    letter-spacing: -.025em;

    text-transform: uppercase;

    color: #FFFFFF;

    text-shadow:
        0 5px 24px rgba(0,0,0,.17);
}

body.vy-site .vy-company-cta__title > span {
    display: block;
    white-space: nowrap;
}

body.vy-site .vy-company-cta__dot {
    color: #E87538;
}


/* =========================================================
   09 — RIGHT CONTENT WITH COPPER DIVIDER
========================================================= */

body.vy-site .vy-company-cta__content {
    position: relative;

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

    min-width: 0;

    padding: 10px 0 10px 35px;

    border-left:
        2px solid #E87538;
}


/* =========================================================
   10 — DESCRIPTION
========================================================= */

body.vy-site .vy-company-cta__description {
    width: 100%;
    max-width: 435px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 400;

    line-height: 1.55;
    letter-spacing: -.005em;

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

    text-wrap: pretty;
}


/* =========================================================
   11 — COPPER CONTACT BUTTON
========================================================= */

body.vy-site .vy-company-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    min-height: 56px;

    margin-top: 28px;
    padding: 0 25px;

    box-sizing: border-box;

    background: #E87538;

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

    color: #FFFFFF;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .07em;

    text-decoration: none;

    box-shadow:
        0 12px 27px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.16);

    transition:
        background-color .3s ease,
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease;
}

body.vy-site .vy-company-cta__button svg {
    display: block;

    flex: 0 0 21px;

    width: 21px;
    height: 21px;

    transition:
        transform .3s ease;
}


/* =========================================================
   12 — HOVER AND FOCUS
========================================================= */

@media (hover: hover) {

    body.vy-site .vy-company-cta__button:hover {
        background: #F08446;

        transform: translateY(-3px);

        box-shadow:
            0 18px 35px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.19);
    }

    body.vy-site
    .vy-company-cta__button:hover svg {
        transform: translateX(5px);
    }

}

body.vy-site .vy-company-cta__button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}


/* =========================================================
   13 — BOTTOM EDITORIAL RULE
========================================================= */

body.vy-site .vy-company-cta__bottom {
    display: flex;
    align-items: center;

    gap: 25px;

    width: 100%;

    padding-top: 24px;

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

body.vy-site .vy-company-cta__bottom > span:first-child {
    flex: 0 0 auto;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.3;
    letter-spacing: .11em;

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

body.vy-site .vy-company-cta__bottom-line {
    display: block;

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(232,117,56,.35),
            transparent 75%
        );
}


/* =========================================================
   14 — TABLET
   900px–1100px
========================================================= */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    body.vy-site .vy-company-cta {
        padding-top: 90px;
        padding-bottom: 32px;
    }

    body.vy-site .vy-company-cta__grid {
        column-gap: 42px;
        padding-bottom: 65px;
    }

    body.vy-site .vy-company-cta__title {
        font-size: clamp(60px, 6.7vw, 77px);
    }

    body.vy-site .vy-company-cta__content {
        padding-left: 26px;
    }

    body.vy-site .vy-company-cta__description {
        font-size: 18px;
    }

}


/* =========================================================
   15 — SMALLER TABLET
   600px–899px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    body.vy-site .vy-company-cta {
        padding-top: 88px;
        padding-bottom: 32px;
    }

    body.vy-site .vy-company-cta__eyebrow {
        margin-bottom: 28px;
    }

    body.vy-site .vy-company-cta__grid {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 34px;

        padding-bottom: 56px;
    }

    body.vy-site .vy-company-cta__title {
        font-size: clamp(62px, 9vw, 81px);
    }

    body.vy-site .vy-company-cta__content {
        padding-left: 25px;
    }

    body.vy-site .vy-company-cta__description {
        max-width: 540px;

        font-size: 19px;
    }

}


/* =========================================================
   16 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    body.vy-site .vy-company-cta {
        padding-top: 76px;
        padding-bottom: 28px;
    }

    body.vy-site .vy-company-cta::before {
        height: 35px;
    }

    body.vy-site .vy-company-cta__eyebrow {
        gap: 12px;

        margin-bottom: 25px;

        font-size: 12px;
        letter-spacing: .10em;
    }

    body.vy-site .vy-company-cta__eyebrow-line {
        width: 24px;
        flex-basis: 24px;
    }

    body.vy-site .vy-company-cta__grid {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 32px;

        padding-bottom: 53px;
    }

    body.vy-site .vy-company-cta__title {
        font-size: clamp(43px, 10.1vw, 63px);

        line-height: .94;
        letter-spacing: -.018em;
    }

    body.vy-site .vy-company-cta__content {
        padding: 0 0 0 20px;
    }

    body.vy-site .vy-company-cta__description {
        max-width: 100%;

        font-size: 17px;
        line-height: 1.56;
    }

    body.vy-site .vy-company-cta__button {
        gap: 17px;

        min-height: 52px;

        margin-top: 24px;
        padding: 0 20px;

        font-size: 13px;
    }

    body.vy-site .vy-company-cta__button svg {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

    body.vy-site .vy-company-cta__bottom {
        gap: 12px;
        padding-top: 21px;
    }

    body.vy-site
    .vy-company-cta__bottom > span:first-child {
        font-size: 10px;
    }

    body.vy-site .vy-company-cta__geometry {
        opacity: .64;
    }

}


/* =========================================================
   17 — VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 370px) {

    body.vy-site .vy-company-cta__title {
        font-size: clamp(37px, 10vw, 43px);
    }

    body.vy-site .vy-company-cta__description {
        font-size: 16px;
    }

}


/* =========================================================
   18 — ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.vy-site .vy-company-cta__button,
    body.vy-site .vy-company-cta__button svg {
        transition: none !important;
        transform: none !important;
    }

}



/* ==========================================================
   VEYRON INDUSTRIAL — SOLUTIONS PAGE
   SECTION 01 — INTEGRATED SOLUTIONS HERO

   Premium industrial editorial composition
   Ivory architectural panel
   Full-bleed industrial imagery
   Translucent diagonal glass
   Copper-orange accents
   Depth, lighting, subtle entrance motion

   Desktop: 1101px+
   Tablet: 600–1100px
   Mobile: 599px and below

   Backgrounds full width.
   Text aligned to the existing 1200px grid.
========================================================== */


/* ==========================================================
   01 — PAGE FOUNDATION
========================================================== */

.vy-solutions-page {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #F7F6F2;
    overflow: clip;
}


/* ==========================================================
   02 — FULL-WIDTH HERO
========================================================== */

.vy-solutions-page .vy-solutions-hero {
    position: relative;
    isolation: isolate;

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

    margin: 0;
    padding: 0;

    background: #E4E1DB;

    overflow: hidden;
}


/* ==========================================================
   03 — RESPONSIVE FULL-BLEED IMAGE
========================================================== */

.vy-solutions-page .vy-solutions-hero__picture {
    position: absolute;
    z-index: 0;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
}

.vy-solutions-page .vy-solutions-hero__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 73% center;

    filter:
        saturate(.96)
        contrast(1.055);

    animation:
        vySolutionsPhotoReveal
        1.5s cubic-bezier(.22,1,.36,1)
        both;
}


/* ==========================================================
   04 — CONTROLLED PHOTOGRAPHIC LIGHTING
========================================================== */

.vy-solutions-page .vy-solutions-hero__photo-light {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,245,224,.02) 35%,
            transparent 64%,
            rgba(8,20,32,.14) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8,20,32,.09),
            transparent 44%,
            rgba(8,20,32,.13)
        );

    pointer-events: none;
}


/* ==========================================================
   05 — MAIN IVORY PANEL

   A full-height angled architectural surface.
   The industrial image remains full width behind it.
========================================================== */

.vy-solutions-page .vy-solutions-hero__ivory {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            #FFFEFC 0%,
            #F8F6F1 75%,
            #ECEBE7 100%
        );

    clip-path: polygon(
        0 0,
        43% 0,
        56% 54%,
        61% 100%,
        0 100%
    );

    pointer-events: none;
}


/* ==========================================================
   06 — TRANSLUCENT DIAGONAL GLASS

   Soft architectural depth.
========================================================== */

.vy-solutions-page .vy-solutions-hero__facet {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            118deg,
            rgba(255,255,255,.53),
            rgba(234,235,232,.67) 52%,
            rgba(210,217,216,.18)
        );

    clip-path: polygon(
        43% 0,
        55% 0,
        67% 54%,
        56% 100%,
        46% 100%,
        58% 54%
    );

    pointer-events: none;
}


/* ==========================================================
   07 — SECONDARY GEOMETRIC GLASS DETAIL
========================================================== */

.vy-solutions-page .vy-solutions-hero__glass {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.045)
        );

    clip-path: polygon(
        51% 0,
        56% 0,
        67% 53%,
        59% 100%,
        55% 100%,
        63% 53%
    );

    opacity: .8;

    pointer-events: none;
}


/* ==========================================================
   08 — SHARED 1200PX CONTENT CONTAINER
========================================================== */

.vy-solutions-page .vy-solutions-hero__inner {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    min-height: 760px;

    margin-inline: auto;

    padding-top: 126px;
    padding-bottom: 85px;

    box-sizing: border-box;
}


/* ==========================================================
   09 — TEXT BLOCK
========================================================== */

.vy-solutions-page .vy-solutions-hero__content {
    width: 100%;
    max-width: 680px;
    min-width: 0;

    margin: 0;
    padding: 0;

    animation:
        vySolutionsContentReveal
        1s .12s cubic-bezier(.22,1,.36,1)
        both;
}


/* ==========================================================
   10 — EYEBROW
========================================================== */

.vy-solutions-page .vy-solutions-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 27px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .15em;

    text-transform: uppercase;

    color: #0C1927;
}

.vy-solutions-page .vy-solutions-hero__eyebrow-line {
    display: block;

    flex: 0 0 31px;

    width: 31px;
    height: 3px;

    background: #E87538;

    box-shadow:
        0 2px 9px rgba(232,117,56,.16);
}


/* ==========================================================
   11 — LARGE CONDENSED HERO HEADING
========================================================== */

.vy-solutions-page .vy-solutions-hero__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(65px, 5vw, 96px);
    font-weight: 900;

    line-height: .89;
    letter-spacing: -.026em;

    text-transform: uppercase;

    color: #0C1927;

    text-shadow:
        0 3px 18px rgba(12,25,39,.05);
}

.vy-solutions-page .vy-solutions-hero__title > span {
    display: block;
}

.vy-solutions-page .vy-solutions-hero__dot {
    color: #E87538;
}


/* ==========================================================
   12 — EDITORIAL ITALIC STATEMENT
========================================================== */

.vy-solutions-page .vy-solutions-hero__statement {
    width: 100%;
    max-width: 575px;

    margin: 31px 0 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(23px, 1.8vw, 30px);
    font-weight: 400;
    font-style: italic;

    line-height: 1.34;
    letter-spacing: -.022em;

    color: #1B2835;

    text-wrap: pretty;
}


/* ==========================================================
   13 — SUPPORTING PARAGRAPH
========================================================== */

.vy-solutions-page .vy-solutions-hero__description {
    width: 100%;
    max-width: 565px;

    margin: 21px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(17px, 1.12vw, 20px);
    font-weight: 400;

    line-height: 1.53;
    letter-spacing: -.005em;

    color: #344352;

    text-wrap: pretty;
}


/* ==========================================================
   14 — SUBTLE ENTRANCE ANIMATIONS
========================================================== */

@keyframes vySolutionsPhotoReveal {
    from {
        opacity: .78;
        transform: scale(1.045);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes vySolutionsContentReveal {
    from {
        opacity: 0;
        transform: translateY(21px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   15 — WIDE TABLET
   900px to 1100px

   Maintain the side-by-side composition
   while scaling typography and geometry.
========================================================== */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-solutions-page .vy-solutions-hero {
        min-height: 745px;
    }

    .vy-solutions-page .vy-solutions-hero__inner {
        width: calc(100% - 60px);

        min-height: 745px;

        padding-top: 135px;
        padding-bottom: 70px;
    }

    .vy-solutions-page .vy-solutions-hero__content {
        max-width: 540px;
    }

    .vy-solutions-page .vy-solutions-hero__title {
        font-size: clamp(59px, 6.6vw, 72px);
    }

    .vy-solutions-page .vy-solutions-hero__statement {
        max-width: 465px;

        font-size: 23px;
    }

    .vy-solutions-page .vy-solutions-hero__description {
        max-width: 445px;

        font-size: 17px;
    }

    .vy-solutions-page .vy-solutions-hero__ivory {
        clip-path: polygon(
            0 0,
            49% 0,
            66% 54%,
            70% 100%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-hero__facet {
        clip-path: polygon(
            49% 0,
            59% 0,
            74% 54%,
            66% 100%,
            55% 100%,
            67% 54%
        );
    }

    .vy-solutions-page .vy-solutions-hero__glass {
        opacity: .55;
    }

    .vy-solutions-page .vy-solutions-hero__image {
        object-position: 72% center;
    }
}


/* ==========================================================
   16 — SMALLER TABLET
   600px to 899px

   Ivory editorial panel above the photograph.
   Angular transition preserves the Veyron aesthetic.
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    .vy-solutions-page .vy-solutions-hero {
        min-height: 0;
    }

    .vy-solutions-page .vy-solutions-hero__inner {
        width: calc(100% - 54px);

        min-height: 0;

        align-items: flex-start;

        padding-top: 150px;
        padding-bottom: 405px;
    }

    .vy-solutions-page .vy-solutions-hero__content {
        max-width: 640px;
    }

    .vy-solutions-page .vy-solutions-hero__title {
        font-size: clamp(63px, 8.6vw, 79px);

        line-height: .93;
    }

    .vy-solutions-page .vy-solutions-hero__statement {
        max-width: 560px;

        margin-top: 29px;

        font-size: clamp(24px, 3vw, 29px);
    }

    .vy-solutions-page .vy-solutions-hero__description {
        max-width: 545px;

        font-size: 18px;
        line-height: 1.57;
    }

    .vy-solutions-page .vy-solutions-hero__ivory {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 350px),
            0 calc(100% - 235px)
        );
    }

    .vy-solutions-page .vy-solutions-hero__facet {
        clip-path: polygon(
            0 calc(100% - 255px),
            100% calc(100% - 390px),
            100% calc(100% - 310px),
            0 calc(100% - 165px)
        );

        opacity: .65;
    }

    .vy-solutions-page .vy-solutions-hero__glass {
        display: none;
    }

    .vy-solutions-page .vy-solutions-hero__image {
        object-position: 68% 45%;
    }
}


/* ==========================================================
   17 — MOBILE
   599px and below

   Full-width readable ivory panel with
   a diagonal industrial photo reveal.
========================================================== */

@media screen and (max-width: 599px) {

    .vy-solutions-page .vy-solutions-hero {
        min-height: 0;
    }

    .vy-solutions-page .vy-solutions-hero__inner {
        width: calc(100% - 38px);

        min-height: 0;

        align-items: flex-start;

        padding-top: 139px;
        padding-bottom: 365px;
    }

    .vy-solutions-page .vy-solutions-hero__content {
        max-width: 100%;
    }

    .vy-solutions-page .vy-solutions-hero__eyebrow {
        gap: 11px;

        margin-bottom: 24px;

        font-size: 12px;
        letter-spacing: .12em;
    }

    .vy-solutions-page .vy-solutions-hero__eyebrow-line {
        flex-basis: 25px;

        width: 25px;
        height: 2px;
    }

    .vy-solutions-page .vy-solutions-hero__title {
        font-size: clamp(47px, 10.9vw, 64px);

        line-height: .94;
        letter-spacing: -.018em;
    }

    .vy-solutions-page .vy-solutions-hero__statement {
        max-width: 100%;

        margin-top: 26px;

        font-size: clamp(21px, 5.7vw, 27px);
        line-height: 1.4;
    }

    .vy-solutions-page .vy-solutions-hero__description {
        max-width: 100%;

        margin-top: 21px;

        font-size: 16px;
        line-height: 1.58;
    }

    .vy-solutions-page .vy-solutions-hero__ivory {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 315px),
            0 calc(100% - 225px)
        );
    }

    .vy-solutions-page .vy-solutions-hero__facet {
        clip-path: polygon(
            0 calc(100% - 245px),
            100% calc(100% - 350px),
            100% calc(100% - 295px),
            0 calc(100% - 180px)
        );

        opacity: .58;
    }

    .vy-solutions-page .vy-solutions-hero__glass {
        display: none;
    }

    .vy-solutions-page .vy-solutions-hero__image {
        object-position: 68% 48%;
    }
}


/* ==========================================================
   18 — VERY SMALL MOBILE
   Up to 370px
========================================================== */

@media screen and (max-width: 370px) {

    .vy-solutions-page .vy-solutions-hero__inner {
        width: calc(100% - 34px);

        padding-top: 125px;
        padding-bottom: 360px;
    }

    .vy-solutions-page .vy-solutions-hero__title {
        font-size: clamp(41px, 11vw, 46px);
    }

    .vy-solutions-page .vy-solutions-hero__statement {
        font-size: 21px;
    }

    .vy-solutions-page .vy-solutions-hero__description {
        font-size: 15px;
    }
}


/* ==========================================================
   19 — ACCESSIBILITY: REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-solutions-page .vy-solutions-hero__image,
    .vy-solutions-page .vy-solutions-hero__content {
        animation: none !important;

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



/* =====================================================
   SOLUTIONS HERO — DESKTOP PHOTO CORRECTION

   Reveal the golden sunlight from the original image.
   Preserve the ivory geometry, typography and layout.
   Desktop only.
===================================================== */

@media screen and (min-width: 1101px) {

    .vy-solutions-page .vy-solutions-hero__picture {
        inset: auto;

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 45%;

        width: 55%;
        height: 100%;
    }

    .vy-solutions-page .vy-solutions-hero__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: left center;
    }

}


/* =====================================================
   VEYRON SOLUTIONS HERO
   TABLET + MOBILE SUNLIGHT CORRECTION

   Keeps existing ivory geometry and text.
   Changes only the photographic framing.
===================================================== */


/* LARGE TABLET — 900px to 1100px */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-solutions-page .vy-solutions-hero__picture {
        top: 0;
        right: 0;
        bottom: 0;
        left: 45%;

        width: 55%;
        height: 100%;
    }

    .vy-solutions-page .vy-solutions-hero__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: left 25%;
    }

}


/* SMALLER TABLET — 600px to 899px */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    .vy-solutions-page .vy-solutions-hero__picture {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 520px;
    }

    .vy-solutions-page .vy-solutions-hero__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: left 22%;
    }

}


/* MOBILE — 599px and below */

@media screen and (max-width: 599px) {

    .vy-solutions-page .vy-solutions-hero__picture {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: clamp(400px, 110vw, 540px);
    }

    .vy-solutions-page .vy-solutions-hero__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: left 22%;
    }

}



/* =========================================================
   VEYRON INDUSTRIAL — SOLUTIONS PAGE
   SECTION 02 — INDUSTRIAL INFRASTRUCTURE

   Full-bleed industrial photograph
   Angled architectural image boundary
   Ivory editorial content
   Condensed industrial typography
   Five copper-accent capability points
   Subtle lighting, shadows and motion

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Scoped to this section only.
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

.vy-solutions-page .vy-solutions-infra {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            115deg,
            #FFFFFF 0%,
            #FBFAF7 68%,
            #F5F3EF 100%
        );

    color: #0C1927;

    overflow: hidden;
}


/* =========================================================
   02 — LEFT PHOTOGRAPH

   Full bleed on desktop with a slanted right edge.
========================================================= */

.vy-solutions-page .vy-solutions-infra__picture {
    position: absolute;
    z-index: 0;

    top: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: calc(50% - 170px);
    height: 100%;

    overflow: hidden;

    clip-path: polygon(
        0 0,
        100% 0,
        78% 100%,
        0 100%
    );

    background: #203547;

    pointer-events: none;
}

.vy-solutions-page .vy-solutions-infra__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 47% center;

    filter:
        saturate(.97)
        contrast(1.035);

    transition:
        transform 1.1s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   03 — PHOTOGRAPHIC LIGHTING
========================================================= */

.vy-solutions-page .vy-solutions-infra__photo-light {
    position: absolute;
    z-index: 1;

    inset: 0 auto 0 0;

    width: calc(50% - 170px);
    height: 100%;

    background:
        linear-gradient(
            110deg,
            rgba(255,204,141,.10),
            transparent 52%,
            rgba(9,27,44,.17)
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            transparent 48%,
            rgba(5,18,30,.17)
        );

    clip-path: polygon(
        0 0,
        100% 0,
        78% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================================
   04 — SHARED 1200PX CONTENT ALIGNMENT
========================================================= */

.vy-solutions-page .vy-solutions-infra__inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        36%
        minmax(0, 1fr);

    align-items: center;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    min-height: 580px;

    box-sizing: border-box;

    margin-inline: auto;

    padding: 85px 0 90px;
}


/* =========================================================
   05 — MAIN CONTENT GRID

   Heading and description in the middle.
   Capability list on the right.
========================================================= */

.vy-solutions-page .vy-solutions-infra__content {
    grid-column: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, .85fr);

    align-items: center;

    column-gap: clamp(25px, 3vw, 55px);

    width: 100%;
    min-width: 0;
}


/* =========================================================
   06 — MAIN EDITORIAL COLUMN
========================================================= */

.vy-solutions-page .vy-solutions-infra__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   07 — NUMBER 01
========================================================= */

.vy-solutions-page .vy-solutions-infra__number {
    display: flex;
    align-items: center;

    gap: 13px;

    margin: 0 0 22px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1;

    color: #E87538;
}

.vy-solutions-page .vy-solutions-infra__number-line {
    display: block;

    width: 37px;
    height: 1px;

    background: rgba(12,25,39,.35);
}


/* =========================================================
   08 — INDUSTRIAL HEADING
========================================================= */

.vy-solutions-page .vy-solutions-infra__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(45px, 3.45vw, 66px);
    font-weight: 900;

    line-height: .91;
    letter-spacing: -.022em;

    text-transform: uppercase;

    color: #0C1927;

    text-shadow:
        0 3px 16px rgba(12,25,39,.045);
}

.vy-solutions-page .vy-solutions-infra__title span {
    display: block;
}


/* =========================================================
   09 — ITALIC EDITORIAL INTRODUCTION
========================================================= */

.vy-solutions-page .vy-solutions-infra__lead {
    width: 100%;

    margin: 25px 0 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(20px, 1.4vw, 25px);
    font-style: italic;
    font-weight: 400;

    line-height: 1.38;
    letter-spacing: -.02em;

    color: #273441;

    text-wrap: pretty;
}


/* =========================================================
   10 — COMPLETE SERVICE EXPLANATION
========================================================= */

.vy-solutions-page .vy-solutions-infra__description {
    width: 100%;

    margin: 23px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: -.005em;

    color: #344352;

    text-wrap: pretty;
}


/* =========================================================
   11 — CAPABILITIES COLUMN
========================================================= */

.vy-solutions-page .vy-solutions-infra__capabilities {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;

    padding-top: 26px;
}


/* =========================================================
   12 — CAPABILITIES LIST
========================================================= */

.vy-solutions-page .vy-solutions-infra__list {
    display: flex;
    flex-direction: column;

    gap: 17px;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Individual capability */

.vy-solutions-page .vy-solutions-infra__list li {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.4;

    color: #344352;
}


/* Copper diagonal strokes */

.vy-solutions-page .vy-solutions-infra__list li::before {
    content: "";

    display: block;

    flex: 0 0 3px;

    width: 3px;
    height: 15px;

    margin-top: 4px;

    background: #E87538;

    transform: skewX(-25deg);

    box-shadow:
        0 0 8px rgba(232,117,56,.10);
}


/* =========================================================
   13 — SUBTLE PHOTOGRAPHIC INTERACTION
========================================================= */

@media (hover: hover) {

    .vy-solutions-page
    .vy-solutions-infra:hover
    .vy-solutions-infra__image {
        transform: scale(1.025);
    }

}


/* =========================================================
   14 — LIGHT SCROLL REVEAL
========================================================= */

@keyframes vyInfraReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        .vy-solutions-page .vy-solutions-infra__main,
        .vy-solutions-page .vy-solutions-infra__capabilities {
            animation: vyInfraReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 24%;
        }

    }

}


/* =========================================================
   15 — DESKTOP REFINEMENT
   1101px–1399px
========================================================= */

@media screen and (min-width: 1101px)
and (max-width: 1399px) {

    .vy-solutions-page .vy-solutions-infra__inner {
        min-height: 540px;
    }

    .vy-solutions-page .vy-solutions-infra__content {
        column-gap: 27px;
    }

    .vy-solutions-page .vy-solutions-infra__title {
        font-size: clamp(43px, 3.7vw, 52px);
    }

    .vy-solutions-page .vy-solutions-infra__lead {
        font-size: 20px;
    }

    .vy-solutions-page .vy-solutions-infra__description {
        font-size: 16px;
    }

    .vy-solutions-page .vy-solutions-infra__list li {
        font-size: 15px;
    }

}


/* =========================================================
   16 — TABLET
   800px–1100px

   Photo becomes a full-width upper panel.
   Detailed content stays in two columns below.
========================================================= */

@media screen and (min-width: 800px)
and (max-width: 1100px) {

    .vy-solutions-page .vy-solutions-infra__picture {
        top: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: clamp(330px, 40vw, 430px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 80%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-infra__photo-light {
        inset: 0 0 auto;

        width: 100%;
        height: clamp(330px, 40vw, 430px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 80%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-infra__image {
        object-position: center 48%;
    }

    .vy-solutions-page .vy-solutions-infra__inner {
        display: block;

        width: calc(100% - 64px);
        min-height: 0;

        padding-top: clamp(365px, 44vw, 465px);
        padding-bottom: 72px;
    }

    .vy-solutions-page .vy-solutions-infra__content {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(0, .85fr);

        column-gap: 45px;
    }

    .vy-solutions-page .vy-solutions-infra__title {
        font-size: clamp(50px, 6.1vw, 67px);
    }

    .vy-solutions-page .vy-solutions-infra__lead {
        font-size: 23px;
    }

    .vy-solutions-page .vy-solutions-infra__description {
        font-size: 17px;
    }

    .vy-solutions-page .vy-solutions-infra__capabilities {
        padding-top: 20px;
    }

}


/* =========================================================
   17 — SMALLER TABLET
   600px–799px

   Photo at top.
   Full explanation followed by capabilities.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 799px) {

    .vy-solutions-page .vy-solutions-infra__picture {
        top: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: clamp(280px, 40vw, 325px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 80%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-infra__photo-light {
        inset: 0 0 auto;

        width: 100%;
        height: clamp(280px, 40vw, 325px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 80%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-infra__image {
        object-position: center 48%;
    }

    .vy-solutions-page .vy-solutions-infra__inner {
        display: block;

        width: calc(100% - 54px);
        min-height: 0;

        padding-top: clamp(315px, 44vw, 360px);
        padding-bottom: 66px;
    }

    .vy-solutions-page .vy-solutions-infra__content {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 32px;
    }

    .vy-solutions-page .vy-solutions-infra__title {
        font-size: clamp(51px, 8vw, 66px);
    }

    .vy-solutions-page .vy-solutions-infra__lead {
        max-width: 560px;

        font-size: 23px;
    }

    .vy-solutions-page .vy-solutions-infra__description {
        max-width: 600px;
    }

    .vy-solutions-page .vy-solutions-infra__capabilities {
        padding-top: 0;
    }

    .vy-solutions-page .vy-solutions-infra__list {
        display: grid;

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

        column-gap: 28px;
        row-gap: 18px;
    }

}


/* =========================================================
   18 — MOBILE
   599px AND BELOW

   Photo above detailed explanation.
   No oversized empty space.
========================================================= */

@media screen and (max-width: 599px) {

    .vy-solutions-page .vy-solutions-infra__picture {
        top: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: clamp(245px, 68vw, 345px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 83%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-infra__photo-light {
        inset: 0 0 auto;

        width: 100%;
        height: clamp(245px, 68vw, 345px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 83%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-infra__image {
        object-position: center 49%;
    }

    .vy-solutions-page .vy-solutions-infra__inner {
        display: block;

        width: calc(100% - 38px);
        min-height: 0;

        padding-top: clamp(280px, 76vw, 380px);
        padding-bottom: 55px;
    }

    .vy-solutions-page .vy-solutions-infra__content {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 32px;
    }

    .vy-solutions-page .vy-solutions-infra__number {
        margin-bottom: 19px;

        font-size: 15px;
    }

    .vy-solutions-page .vy-solutions-infra__title {
        font-size: clamp(40px, 10.4vw, 53px);
        line-height: .94;
    }

    .vy-solutions-page .vy-solutions-infra__lead {
        margin-top: 21px;

        font-size: clamp(20px, 5.4vw, 24px);
        line-height: 1.4;
    }

    .vy-solutions-page .vy-solutions-infra__description {
        margin-top: 20px;

        font-size: 16px;
        line-height: 1.65;
    }

    .vy-solutions-page .vy-solutions-infra__capabilities {
        padding-top: 0;
    }

    .vy-solutions-page .vy-solutions-infra__list {
        gap: 17px;
    }

    .vy-solutions-page .vy-solutions-infra__list li {
        font-size: 16px;
        line-height: 1.45;
    }

}


/* =========================================================
   19 — VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 370px) {

    .vy-solutions-page .vy-solutions-infra__inner {
        width: calc(100% - 34px);
        padding-bottom: 49px;
    }

    .vy-solutions-page .vy-solutions-infra__title {
        font-size: 40px;
    }

    .vy-solutions-page .vy-solutions-infra__description,
    .vy-solutions-page .vy-solutions-infra__list li {
        font-size: 15px;
    }

}


/* =========================================================
   20 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vy-solutions-page .vy-solutions-infra__image {
        transform: none !important;
        transition: none !important;
    }

    .vy-solutions-page .vy-solutions-infra__main,
    .vy-solutions-page .vy-solutions-infra__capabilities {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}



/* ==========================================================
   VEYRON INDUSTRIAL — SOLUTIONS PAGE
   SECTION 03 — SYSTEMS INTEGRATION

   Ivory left / Industrial photo right
   Angled translucent architectural edge
   Editorial serif introduction
   Barlow Condensed industrial heading
   Copper diagonal capability markers

   Desktop: 1101px+
   Tablet: 600–1100px
   Mobile: 599px and below

   Fully scoped to Section 03.
========================================================== */


/* ==========================================================
   01 — SECTION FOUNDATION
========================================================== */

.vy-solutions-page .vy-solutions-systems {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #F8F7F3;
    color: #0C1927;

    overflow: hidden;
}


/* ==========================================================
   02 — SUBTLE IVORY LIGHTING
========================================================== */

.vy-solutions-page .vy-solutions-systems__lighting {
    position: absolute;
    z-index: 0;

    inset: 0;

    background:
        radial-gradient(
            ellipse 60% 90% at 25% 10%,
            rgba(255,255,255,.95),
            transparent 85%
        ),
        linear-gradient(
            110deg,
            #FCFBF8,
            #F3F1EB
        );

    pointer-events: none;
}


/* ==========================================================
   03 — RIGHT-SIDE FULL-BLEED PHOTOGRAPH
========================================================== */

.vy-solutions-page .vy-solutions-systems__picture {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 54%;
    height: 100%;

    overflow: hidden;

    clip-path: polygon(
        18% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    background: #21384B;

    pointer-events: none;
}

.vy-solutions-page .vy-solutions-systems__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 63% center;

    filter:
        saturate(.96)
        contrast(1.045);

    transition:
        transform 1.1s cubic-bezier(.22,1,.36,1);
}


/* ==========================================================
   04 — PHOTOGRAPHIC LIGHTING
========================================================== */

.vy-solutions-page .vy-solutions-systems__photo-light {
    position: absolute;
    z-index: 2;

    inset: 0 0 0 auto;

    width: 54%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.19),
            transparent 32%,
            rgba(9,25,39,.07)
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            transparent 50%,
            rgba(8,22,35,.12)
        );

    clip-path: polygon(
        18% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* ==========================================================
   05 — TRANSLUCENT ANGULAR TRANSITION
========================================================== */

.vy-solutions-page .vy-solutions-systems__facet {
    position: absolute;
    z-index: 3;

    top: 0;
    bottom: 0;
    left: 43%;

    width: 17%;
    height: 100%;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.84),
            rgba(225,229,227,.48),
            rgba(255,255,255,.22)
        );

    clip-path: polygon(
        10% 0,
        100% 0,
        68% 100%,
        0 100%
    );

    pointer-events: none;
}


/* ==========================================================
   06 — SHARED 1200PX CONTENT
========================================================== */

.vy-solutions-page .vy-solutions-systems__inner {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    min-height: 650px;

    box-sizing: border-box;

    margin-inline: auto;
    padding: 77px 0 83px;
}


/* ==========================================================
   07 — LEFT CONTENT COLUMN
========================================================== */

.vy-solutions-page .vy-solutions-systems__content {
    width: 45%;
    max-width: 515px;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   08 — COPPER SECTION NUMBER
========================================================== */

.vy-solutions-page .vy-solutions-systems__number {
    display: flex;
    align-items: center;

    gap: 13px;

    margin: 0 0 21px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1;

    color: #E87538;
}

.vy-solutions-page .vy-solutions-systems__number-line {
    display: block;

    width: 37px;
    height: 1px;

    background: rgba(12,25,39,.35);
}


/* ==========================================================
   09 — CONDENSED INDUSTRIAL HEADING
========================================================== */

.vy-solutions-page .vy-solutions-systems__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(49px, 3.7vw, 70px);
    font-weight: 900;

    line-height: .91;
    letter-spacing: -.022em;

    text-transform: uppercase;

    color: #0C1927;

    text-shadow:
        0 3px 15px rgba(12,25,39,.045);
}

.vy-solutions-page .vy-solutions-systems__title span {
    display: block;
}


/* ==========================================================
   10 — EDITORIAL SERIF INTRODUCTION
========================================================== */

.vy-solutions-page .vy-solutions-systems__lead {
    width: 100%;

    margin: 23px 0 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(20px, 1.45vw, 26px);
    font-style: italic;
    font-weight: 400;

    line-height: 1.39;
    letter-spacing: -.02em;

    color: #273441;

    text-wrap: pretty;
}


/* ==========================================================
   11 — FULL SERVICE EXPLANATION
========================================================== */

.vy-solutions-page .vy-solutions-systems__description {
    width: 100%;

    margin: 21px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: -.005em;

    color: #344352;

    text-wrap: pretty;
}


/* ==========================================================
   12 — CAPABILITY LIST
========================================================== */

.vy-solutions-page .vy-solutions-systems__list {
    display: flex;
    flex-direction: column;

    gap: 12px;

    width: 100%;

    margin: 23px 0 0;
    padding: 0;

    list-style: none;
}

.vy-solutions-page .vy-solutions-systems__list li {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.45;

    color: #344352;
}


/* Copper diagonal strokes */

.vy-solutions-page .vy-solutions-systems__list li::before {
    content: "";

    display: block;

    flex: 0 0 3px;

    width: 3px;
    height: 15px;

    margin-top: 4px;

    background: #E87538;

    transform: skewX(-25deg);

    box-shadow:
        0 1px 6px rgba(232,117,56,.14);
}


/* ==========================================================
   13 — VERY SUBTLE PHOTO INTERACTION
========================================================== */

@media (hover: hover) {

    .vy-solutions-page
    .vy-solutions-systems:hover
    .vy-solutions-systems__image {
        transform: scale(1.025);
    }

}


/* ==========================================================
   14 — SCROLL REVEAL ANIMATION
========================================================== */

@keyframes vySystemsReveal {

    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        .vy-solutions-page .vy-solutions-systems__content {
            animation: vySystemsReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 20%;
        }

    }

}


/* ==========================================================
   15 — SMALLER DESKTOP
   1101px–1399px
========================================================== */

@media screen and (min-width: 1101px)
and (max-width: 1399px) {

    .vy-solutions-page .vy-solutions-systems__inner {
        min-height: 610px;

        padding-top: 66px;
        padding-bottom: 70px;
    }

    .vy-solutions-page .vy-solutions-systems__content {
        width: 44%;
        max-width: 480px;
    }

    .vy-solutions-page .vy-solutions-systems__title {
        font-size: clamp(46px, 4vw, 57px);
    }

    .vy-solutions-page .vy-solutions-systems__lead {
        font-size: 21px;
    }

    .vy-solutions-page .vy-solutions-systems__description {
        font-size: 16px;
    }

    .vy-solutions-page .vy-solutions-systems__list li {
        font-size: 15px;
    }

}


/* ==========================================================
   16 — WIDE TABLET
   900px–1100px

   Keeps the diagonal side-by-side composition.
========================================================== */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-solutions-page .vy-solutions-systems__inner {
        width: calc(100% - 60px);

        min-height: 660px;

        padding-top: 65px;
        padding-bottom: 65px;
    }

    .vy-solutions-page .vy-solutions-systems__content {
        width: 45%;
        max-width: 435px;
    }

    .vy-solutions-page .vy-solutions-systems__title {
        font-size: clamp(45px, 5.6vw, 56px);
    }

    .vy-solutions-page .vy-solutions-systems__lead {
        font-size: 20px;
    }

    .vy-solutions-page .vy-solutions-systems__description {
        font-size: 16px;
        line-height: 1.55;
    }

    .vy-solutions-page .vy-solutions-systems__list {
        gap: 11px;
    }

    .vy-solutions-page .vy-solutions-systems__list li {
        font-size: 15px;
    }

    .vy-solutions-page .vy-solutions-systems__picture,
    .vy-solutions-page .vy-solutions-systems__photo-light {
        width: 52%;
    }

    .vy-solutions-page .vy-solutions-systems__facet {
        left: 43%;
        width: 15%;
    }

    .vy-solutions-page .vy-solutions-systems__image {
        object-position: 63% center;
    }

}


/* ==========================================================
   17 — SMALLER TABLET
   600px–899px

   Text first, photograph below.
   Keeps every capability visible.
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    .vy-solutions-page .vy-solutions-systems__inner {
        display: block;

        width: calc(100% - 54px);
        min-height: 0;

        padding-top: 66px;
        padding-bottom: 37px;
    }

    .vy-solutions-page .vy-solutions-systems__content {
        width: 100%;
        max-width: 660px;
    }

    .vy-solutions-page .vy-solutions-systems__title {
        font-size: clamp(57px, 8vw, 70px);
    }

    .vy-solutions-page .vy-solutions-systems__lead {
        max-width: 570px;

        font-size: 24px;
    }

    .vy-solutions-page .vy-solutions-systems__description {
        max-width: 610px;

        font-size: 17px;
    }

    .vy-solutions-page .vy-solutions-systems__list {
        display: grid;

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

        column-gap: 28px;
        row-gap: 16px;

        margin-top: 25px;
    }

    .vy-solutions-page .vy-solutions-systems__picture {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        width: 100%;
        height: clamp(330px, 52vw, 440px);

        clip-path: polygon(
            0 13%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-systems__photo-light {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: clamp(330px, 52vw, 440px);

        clip-path: polygon(
            0 13%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-systems__image {
        object-position: 60% 45%;
    }

    .vy-solutions-page .vy-solutions-systems__facet {
        display: none;
    }

}


/* ==========================================================
   18 — MOBILE
   599px AND BELOW
========================================================== */

@media screen and (max-width: 599px) {

    .vy-solutions-page .vy-solutions-systems__inner {
        display: block;

        width: calc(100% - 38px);
        min-height: 0;

        padding-top: 53px;
        padding-bottom: 34px;
    }

    .vy-solutions-page .vy-solutions-systems__content {
        width: 100%;
        max-width: 100%;
    }

    .vy-solutions-page .vy-solutions-systems__number {
        margin-bottom: 19px;

        font-size: 15px;
    }

    .vy-solutions-page .vy-solutions-systems__title {
        font-size: clamp(43px, 10.5vw, 56px);

        line-height: .94;
    }

    .vy-solutions-page .vy-solutions-systems__lead {
        margin-top: 23px;

        font-size: clamp(20px, 5.6vw, 25px);
        line-height: 1.43;
    }

    .vy-solutions-page .vy-solutions-systems__description {
        margin-top: 20px;

        font-size: 16px;
        line-height: 1.65;
    }

    .vy-solutions-page .vy-solutions-systems__list {
        gap: 15px;

        margin-top: 24px;
    }

    .vy-solutions-page .vy-solutions-systems__list li {
        gap: 14px;

        font-size: 16px;
        line-height: 1.45;
    }

    .vy-solutions-page .vy-solutions-systems__picture {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        width: 100%;
        height: clamp(270px, 78vw, 390px);

        clip-path: polygon(
            0 12%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-systems__photo-light {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: clamp(270px, 78vw, 390px);

        clip-path: polygon(
            0 12%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-systems__image {
        object-position: 62% 45%;
    }

    .vy-solutions-page .vy-solutions-systems__facet {
        display: none;
    }

}


/* ==========================================================
   19 — VERY SMALL MOBILE
========================================================== */

@media screen and (max-width: 370px) {

    .vy-solutions-page .vy-solutions-systems__inner {
        width: calc(100% - 34px);

        padding-top: 47px;
        padding-bottom: 30px;
    }

    .vy-solutions-page .vy-solutions-systems__title {
        font-size: 42px;
    }

    .vy-solutions-page .vy-solutions-systems__description,
    .vy-solutions-page .vy-solutions-systems__list li {
        font-size: 15px;
    }

}


/* ==========================================================
   20 — ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-solutions-page .vy-solutions-systems__image {
        transform: none !important;
        transition: none !important;
    }

    .vy-solutions-page .vy-solutions-systems__content {
        animation: none !important;

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

}



/* ==========================================================
   VEYRON INDUSTRIAL — SOLUTIONS PAGE
   SECTION 04 — MAINTENANCE & RELIABILITY

   Industrial photography left
   Ivory editorial explanation center
   Five capabilities right
   Angled architectural photo boundary
   Subtle depth, lighting and motion

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Fully scoped to this section.
========================================================== */


/* ==========================================================
   01 — SECTION FOUNDATION
========================================================== */

.vy-solutions-page .vy-solutions-maint {
    --vy-maint-navy: #0C1927;
    --vy-maint-orange: #E87538;

    /* Match the shared 1200px content alignment */
    --vy-maint-photo-width:
        min(43vw, calc(50% - 160px));

    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            ellipse 45% 90% at 53% 15%,
            rgba(255,255,255,.98),
            transparent 90%
        ),
        linear-gradient(
            112deg,
            #FAF9F6,
            #FFFFFF 65%,
            #F7F5F1
        );

    color: var(--vy-maint-navy);
    overflow: hidden;
}


/* ==========================================================
   02 — FULL-BLEED LEFT PHOTOGRAPH
========================================================== */

.vy-solutions-page .vy-solutions-maint__picture {
    position: absolute;
    z-index: 0;

    top: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: var(--vy-maint-photo-width);
    height: 100%;

    overflow: hidden;

    clip-path: polygon(
        0 0,
        100% 0,
        83% 100%,
        0 100%
    );

    background: #243440;

    pointer-events: none;
}


/* ==========================================================
   03 — PHOTOGRAPH FRAMING
========================================================== */

.vy-solutions-page .vy-solutions-maint__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 53% center;

    filter:
        saturate(.97)
        contrast(1.045);

    transition:
        transform 1s cubic-bezier(.22,1,.36,1);
}


/* ==========================================================
   04 — NATURAL INDUSTRIAL LIGHTING
========================================================== */

.vy-solutions-page .vy-solutions-maint__photo-light {
    position: absolute;
    z-index: 1;

    top: 0;
    bottom: 0;
    left: 0;

    width: var(--vy-maint-photo-width);
    height: 100%;

    background:
        linear-gradient(
            110deg,
            rgba(255,211,155,.08),
            transparent 45%,
            rgba(255,255,255,.10)
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            transparent 55%,
            rgba(8,25,39,.14)
        );

    clip-path: polygon(
        0 0,
        100% 0,
        83% 100%,
        0 100%
    );

    pointer-events: none;
}


/* ==========================================================
   05 — TRANSLUCENT DIAGONAL

   Adds architectural depth at the photo boundary.
========================================================== */

.vy-solutions-page .vy-solutions-maint__facet {
    position: absolute;
    z-index: 2;

    top: 0;
    bottom: 0;

    left: calc(var(--vy-maint-photo-width) - 92px);

    width: 116px;
    height: 100%;

    background:
        linear-gradient(
            112deg,
            rgba(255,255,255,.72),
            rgba(244,243,238,.50),
            rgba(255,255,255,.15)
        );

    clip-path: polygon(
        78% 0,
        100% 0,
        24% 100%,
        0 100%
    );

    pointer-events: none;
}


/* ==========================================================
   06 — SHARED 1200PX GRID
========================================================== */

.vy-solutions-page .vy-solutions-maint__inner {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        34%
        minmax(0, 1.23fr)
        minmax(0, .88fr);

    column-gap: clamp(24px, 2.7vw, 42px);

    align-items: center;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;
    min-height: 545px;

    box-sizing: border-box;

    margin-inline: auto;
    padding: 76px 0 82px;
}


/* ==========================================================
   07 — MAIN EXPLANATION COLUMN
========================================================== */

.vy-solutions-page .vy-solutions-maint__main {
    grid-column: 2;

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

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   08 — NUMBER 03
========================================================== */

.vy-solutions-page .vy-solutions-maint__number {
    display: flex;
    align-items: center;

    gap: 13px;

    margin: 0 0 21px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1;

    color: var(--vy-maint-orange);
}

.vy-solutions-page .vy-solutions-maint__number-line {
    display: block;

    width: 37px;
    height: 1px;

    background: rgba(12,25,39,.32);
}


/* ==========================================================
   09 — HEADING
========================================================== */

.vy-solutions-page .vy-solutions-maint__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(45px, 3.5vw, 65px);
    font-weight: 900;

    line-height: .92;
    letter-spacing: -.022em;

    text-transform: uppercase;

    color: var(--vy-maint-navy);

    text-shadow:
        0 3px 16px rgba(12,25,39,.04);
}

.vy-solutions-page .vy-solutions-maint__title span {
    display: block;
}


/* ==========================================================
   10 — EDITORIAL ITALIC STATEMENT
========================================================== */

.vy-solutions-page .vy-solutions-maint__lead {
    width: 100%;

    margin: 23px 0 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(20px, 1.4vw, 25px);
    font-weight: 400;
    font-style: italic;

    line-height: 1.39;
    letter-spacing: -.02em;

    color: #273441;

    text-wrap: pretty;
}


/* ==========================================================
   11 — COMPLETE SERVICE DESCRIPTION
========================================================== */

.vy-solutions-page .vy-solutions-maint__description {
    width: 100%;

    margin: 22px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: -.005em;

    color: #344352;

    text-wrap: pretty;
}


/* ==========================================================
   12 — RIGHT CAPABILITIES COLUMN
========================================================== */

.vy-solutions-page .vy-solutions-maint__capabilities {
    grid-column: 3;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 28px 0 0;
}


/* ==========================================================
   13 — CAPABILITIES LIST
========================================================== */

.vy-solutions-page .vy-solutions-maint__list {
    display: flex;
    flex-direction: column;

    gap: 17px;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.vy-solutions-page .vy-solutions-maint__list li {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.42;

    color: #344352;
}


/* ==========================================================
   14 — COPPER DIAGONAL LIST MARKERS
========================================================== */

.vy-solutions-page .vy-solutions-maint__list li::before {
    content: "";

    display: block;

    flex: 0 0 3px;

    width: 3px;
    height: 15px;

    margin-top: 4px;

    background: var(--vy-maint-orange);

    transform: skewX(-25deg);

    box-shadow:
        0 1px 7px rgba(232,117,56,.13);
}


/* ==========================================================
   15 — SUBTLE PHOTOGRAPH INTERACTION
========================================================== */

@media (hover: hover) {

    .vy-solutions-page
    .vy-solutions-maint:hover
    .vy-solutions-maint__image {
        transform: scale(1.025);
    }

}


/* ==========================================================
   16 — SCROLL ENTRANCE
========================================================== */

@keyframes vyMaintReveal {

    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        .vy-solutions-page .vy-solutions-maint__main,
        .vy-solutions-page .vy-solutions-maint__capabilities {
            animation: vyMaintReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 20%;
        }

    }

}


/* ==========================================================
   17 — COMPACT DESKTOP
   1101px–1399px
========================================================== */

@media screen and (min-width: 1101px)
and (max-width: 1399px) {

    .vy-solutions-page .vy-solutions-maint__inner {
        min-height: 530px;
        padding-top: 65px;
        padding-bottom: 69px;
    }

    .vy-solutions-page .vy-solutions-maint__title {
        font-size: clamp(43px, 3.8vw, 54px);
    }

    .vy-solutions-page .vy-solutions-maint__lead {
        font-size: 20px;
    }

    .vy-solutions-page .vy-solutions-maint__description {
        font-size: 16px;
    }

    .vy-solutions-page .vy-solutions-maint__list li {
        font-size: 15px;
    }

    .vy-solutions-page .vy-solutions-maint__list {
        gap: 14px;
    }

}


/* ==========================================================
   18 — LARGE TABLET
   800px–1100px

   Photograph across the top.
   Explanation and capabilities below.
========================================================== */

@media screen and (min-width: 800px)
and (max-width: 1100px) {

    .vy-solutions-page .vy-solutions-maint__picture {
        position: relative;

        top: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: clamp(320px, 39vw, 415px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 82%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-maint__image {
        object-position: center 47%;
    }

    .vy-solutions-page .vy-solutions-maint__photo-light {
        top: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: clamp(320px, 39vw, 415px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 82%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-maint__facet {
        display: none;
    }

    .vy-solutions-page .vy-solutions-maint__inner {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, .85fr);

        column-gap: 42px;

        align-items: center;

        width: calc(100% - 64px);
        min-height: 0;

        padding-top: 45px;
        padding-bottom: 72px;
    }

    .vy-solutions-page .vy-solutions-maint__main {
        grid-column: 1;
    }

    .vy-solutions-page .vy-solutions-maint__capabilities {
        grid-column: 2;
        padding-top: 20px;
    }

    .vy-solutions-page .vy-solutions-maint__title {
        font-size: clamp(49px, 6vw, 64px);
    }

    .vy-solutions-page .vy-solutions-maint__lead {
        font-size: 22px;
    }

    .vy-solutions-page .vy-solutions-maint__description {
        font-size: 17px;
    }

}


/* ==========================================================
   19 — SMALL TABLET
   600px–799px
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 799px) {

    .vy-solutions-page .vy-solutions-maint__picture {
        position: relative;

        top: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: clamp(285px, 44vw, 345px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 82%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-maint__image {
        object-position: center 48%;
    }

    .vy-solutions-page .vy-solutions-maint__photo-light {
        top: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: clamp(285px, 44vw, 345px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 82%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-maint__facet {
        display: none;
    }

    .vy-solutions-page .vy-solutions-maint__inner {
        display: grid;

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

        row-gap: 32px;

        width: calc(100% - 54px);
        min-height: 0;

        padding-top: 38px;
        padding-bottom: 64px;
    }

    .vy-solutions-page .vy-solutions-maint__main,
    .vy-solutions-page .vy-solutions-maint__capabilities {
        grid-column: 1;
    }

    .vy-solutions-page .vy-solutions-maint__title {
        font-size: clamp(52px, 8vw, 67px);
    }

    .vy-solutions-page .vy-solutions-maint__lead {
        max-width: 570px;
        font-size: 23px;
    }

    .vy-solutions-page .vy-solutions-maint__description {
        max-width: 610px;
    }

    .vy-solutions-page .vy-solutions-maint__capabilities {
        padding-top: 0;
    }

    .vy-solutions-page .vy-solutions-maint__list {
        display: grid;

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

        column-gap: 28px;
        row-gap: 18px;
    }

}


/* ==========================================================
   20 — MOBILE
   599px AND BELOW
========================================================== */

@media screen and (max-width: 599px) {

    .vy-solutions-page .vy-solutions-maint__picture {
        position: relative;

        top: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: clamp(250px, 69vw, 350px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 83%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-maint__image {
        object-position: 51% 47%;
    }

    .vy-solutions-page .vy-solutions-maint__photo-light {
        top: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: clamp(250px, 69vw, 350px);

        clip-path: polygon(
            0 0,
            100% 0,
            100% 83%,
            0 100%
        );
    }

    .vy-solutions-page .vy-solutions-maint__facet {
        display: none;
    }

    .vy-solutions-page .vy-solutions-maint__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 30px;

        width: calc(100% - 38px);
        min-height: 0;

        padding-top: 31px;
        padding-bottom: 55px;
    }

    .vy-solutions-page .vy-solutions-maint__main,
    .vy-solutions-page .vy-solutions-maint__capabilities {
        width: 100%;
    }

    .vy-solutions-page .vy-solutions-maint__number {
        margin-bottom: 19px;
        font-size: 15px;
    }

    .vy-solutions-page .vy-solutions-maint__title {
        font-size: clamp(42px, 10.3vw, 55px);
        line-height: .94;
    }

    .vy-solutions-page .vy-solutions-maint__lead {
        margin-top: 22px;

        font-size: clamp(20px, 5.4vw, 24px);
        line-height: 1.43;
    }

    .vy-solutions-page .vy-solutions-maint__description {
        margin-top: 20px;

        font-size: 16px;
        line-height: 1.65;
    }

    .vy-solutions-page .vy-solutions-maint__capabilities {
        padding-top: 0;
    }

    .vy-solutions-page .vy-solutions-maint__list {
        gap: 16px;
    }

    .vy-solutions-page .vy-solutions-maint__list li {
        font-size: 16px;
        line-height: 1.45;
    }

}


/* ==========================================================
   21 — VERY SMALL MOBILE
========================================================== */

@media screen and (max-width: 370px) {

    .vy-solutions-page .vy-solutions-maint__inner {
        width: calc(100% - 34px);
        padding-bottom: 48px;
    }

    .vy-solutions-page .vy-solutions-maint__title {
        font-size: 40px;
    }

    .vy-solutions-page .vy-solutions-maint__description,
    .vy-solutions-page .vy-solutions-maint__list li {
        font-size: 15px;
    }

}


/* ==========================================================
   22 — ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-solutions-page .vy-solutions-maint__image {
        transform: none !important;
        transition: none !important;
    }

    .vy-solutions-page .vy-solutions-maint__main,
    .vy-solutions-page .vy-solutions-maint__capabilities {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}



/* ==========================================================
   VEYRON INDUSTRIAL — SOLUTIONS PAGE
   SECTION 06 — OUR APPROACH

   Architectural linework background
   Warm ivory editorial surface
   Four copper SVG icons
   Subtle lighting, depth and motion

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Scoped to Section 06 only.
========================================================== */


/* ==========================================================
   01 — FULL-WIDTH SECTION
========================================================== */

.vy-solutions-page .vy-solutions-approach {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #FAF9F6;
    color: #0C1927;

    border-top: 1px solid rgba(12,25,39,.07);

    box-shadow:
        inset 0 18px 42px rgba(12,25,39,.025);

    overflow: hidden;
}


/* ==========================================================
   02 — ARCHITECTURAL DRAFTING
========================================================== */

.vy-solutions-page .vy-solutions-approach__drafting {
    position: absolute;
    z-index: 0;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    opacity: .5;

    pointer-events: none;
}


/* ==========================================================
   03 — SOFT WHITE EDITORIAL LIGHTING
========================================================== */

.vy-solutions-page .vy-solutions-approach__lighting {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        radial-gradient(
            ellipse 70% 90% at 50% 55%,
            rgba(255,255,255,.94),
            rgba(255,255,255,.72) 45%,
            rgba(255,255,255,.12) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   04 — SHARED 1200PX CONTAINER
========================================================== */

.vy-solutions-page .vy-solutions-approach__inner {
    position: relative;
    z-index: 2;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    margin-inline: auto;

    padding: 83px 0 91px;

    box-sizing: border-box;
}


/* ==========================================================
   05 — SECTION HEADING
========================================================== */

.vy-solutions-page .vy-solutions-approach__header {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ==========================================================
   06 — EYEBROW
========================================================== */

.vy-solutions-page .vy-solutions-approach__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 24px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.25;
    letter-spacing: .13em;

    color: #0C1927;
}

.vy-solutions-page .vy-solutions-approach__eyebrow-line {
    display: block;

    flex: 0 0 31px;

    width: 31px;
    height: 3px;

    background: #E87538;

    box-shadow:
        0 1px 7px rgba(232,117,56,.18);
}


/* ==========================================================
   07 — LARGE EDITORIAL STATEMENT
========================================================== */

.vy-solutions-page .vy-solutions-approach__title {
    width: 100%;
    max-width: 1100px;

    margin: 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(38px, 3.6vw, 55px);
    font-weight: 400;
    font-style: italic;

    line-height: 1.22;
    letter-spacing: -.025em;

    color: #141A20;

    text-wrap: pretty;
}


/* ==========================================================
   08 — FOUR-COLUMN GRID
========================================================== */

.vy-solutions-page .vy-solutions-approach__grid {
    display: grid;

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

    align-items: stretch;

    width: 100%;
    min-width: 0;

    margin-top: 45px;
}


/* ==========================================================
   09 — INDIVIDUAL PILLAR
========================================================== */

.vy-solutions-page .vy-solutions-approach__pillar {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;

    min-width: 0;

    margin: 0;
    padding: 10px 22px 12px;

    text-align: center;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1);
}


/* ==========================================================
   10 — THIN VERTICAL DIVIDERS
========================================================== */

.vy-solutions-page
.vy-solutions-approach__pillar
+ .vy-solutions-approach__pillar::before {
    content: "";

    position: absolute;

    top: 8px;
    bottom: 9px;
    left: 0;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(12,25,39,.16) 15%,
            rgba(12,25,39,.16) 85%,
            transparent
        );
}


/* ==========================================================
   11 — COPPER SVG ICONS
========================================================== */

.vy-solutions-page .vy-solutions-approach__icon {
    display: block;

    flex: 0 0 auto;

    width: 55px;
    height: 55px;

    color: #E87538;

    filter:
        drop-shadow(0 3px 4px rgba(232,117,56,.08));

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        filter .4s ease;
}


/* ==========================================================
   12 — PILLAR TEXT
========================================================== */

.vy-solutions-page .vy-solutions-approach__pillar-copy {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 13px;

    width: 100%;
    min-width: 0;
}

.vy-solutions-page .vy-solutions-approach__pillar-title {
    max-width: 260px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.4;
    letter-spacing: .095em;

    text-transform: uppercase;

    color: #102334;

    text-wrap: balance;
}

.vy-solutions-page .vy-solutions-approach__pillar-text {
    max-width: 220px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.52;

    color: #405160;

    text-wrap: pretty;
}


/* ==========================================================
   13 — REFINED HOVER INTERACTION
========================================================== */

@media (hover: hover) {

    .vy-solutions-page
    .vy-solutions-approach__pillar:hover
    .vy-solutions-approach__icon {
        transform: translateY(-4px);

        filter:
            drop-shadow(
                0 7px 8px rgba(232,117,56,.15)
            );
    }

}


/* ==========================================================
   14 — LIGHT SCROLL REVEAL
========================================================== */

@keyframes vyApproachReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        .vy-solutions-page
        .vy-solutions-approach__header,
        .vy-solutions-page
        .vy-solutions-approach__grid {
            animation: vyApproachReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 22%;
        }

    }

}


/* ==========================================================
   15 — TABLET
   600px–1100px
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    .vy-solutions-page .vy-solutions-approach__inner {
        width: calc(100% - 60px);

        padding-top: 76px;
        padding-bottom: 77px;
    }

    .vy-solutions-page .vy-solutions-approach__title {
        max-width: 820px;

        font-size: clamp(37px, 4.7vw, 48px);
        line-height: 1.26;
    }

    .vy-solutions-page .vy-solutions-approach__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 0;

        margin-top: 39px;
    }

    .vy-solutions-page .vy-solutions-approach__pillar {
        gap: 17px;

        padding: 30px 22px;
    }

    /* Start each new row without a left divider */

    .vy-solutions-page
    .vy-solutions-approach__pillar:nth-child(3)::before {
        display: none;
    }

    /* Dividing line between rows */

    .vy-solutions-page
    .vy-solutions-approach__pillar:nth-child(n+3) {
        border-top: 1px solid rgba(12,25,39,.11);
    }

    .vy-solutions-page .vy-solutions-approach__pillar-text {
        max-width: 270px;

        font-size: 17px;
    }

    .vy-solutions-page .vy-solutions-approach__drafting {
        opacity: .35;
    }

}


/* ==========================================================
   16 — MOBILE
   599px AND BELOW

   Compact vertical editorial rows.
========================================================== */

@media screen and (max-width: 599px) {

    .vy-solutions-page .vy-solutions-approach__inner {
        width: calc(100% - 38px);

        padding-top: 61px;
        padding-bottom: 63px;
    }

    .vy-solutions-page .vy-solutions-approach__eyebrow {
        gap: 11px;

        margin-bottom: 20px;

        font-size: 12px;
    }

    .vy-solutions-page .vy-solutions-approach__eyebrow-line {
        flex-basis: 26px;

        width: 26px;
        height: 2px;
    }

    .vy-solutions-page .vy-solutions-approach__title {
        max-width: 100%;

        font-size: clamp(30px, 7.7vw, 39px);
        line-height: 1.3;
    }

    .vy-solutions-page .vy-solutions-approach__grid {
        display: grid;

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

        margin-top: 30px;
    }

    .vy-solutions-page .vy-solutions-approach__pillar {
        display: grid;

        grid-template-columns: 56px minmax(0, 1fr);

        align-items: start;

        column-gap: 21px;

        padding: 23px 0;

        text-align: left;
    }

    .vy-solutions-page
    .vy-solutions-approach__pillar
    + .vy-solutions-approach__pillar {
        border-top: 1px solid rgba(12,25,39,.13);
    }

    .vy-solutions-page
    .vy-solutions-approach__pillar::before {
        display: none;
    }

    .vy-solutions-page .vy-solutions-approach__icon {
        width: 50px;
        height: 50px;
    }

    .vy-solutions-page .vy-solutions-approach__pillar-copy {
        align-items: flex-start;

        gap: 9px;

        padding-top: 3px;
    }

    .vy-solutions-page .vy-solutions-approach__pillar-title {
        max-width: 100%;

        font-size: 14px;
        line-height: 1.4;
    }

    .vy-solutions-page .vy-solutions-approach__pillar-text {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.53;
    }

    .vy-solutions-page .vy-solutions-approach__drafting {
        opacity: .24;
    }

}


/* ==========================================================
   17 — VERY SMALL MOBILE
========================================================== */

@media screen and (max-width: 370px) {

    .vy-solutions-page .vy-solutions-approach__inner {
        width: calc(100% - 34px);

        padding-top: 54px;
        padding-bottom: 55px;
    }

    .vy-solutions-page .vy-solutions-approach__title {
        font-size: 29px;
    }

    .vy-solutions-page .vy-solutions-approach__pillar {
        grid-template-columns: 48px minmax(0, 1fr);

        column-gap: 14px;
    }

    .vy-solutions-page .vy-solutions-approach__icon {
        width: 45px;
        height: 45px;
    }

}


/* ==========================================================
   18 — ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-solutions-page
    .vy-solutions-approach__header,
    .vy-solutions-page
    .vy-solutions-approach__grid,
    .vy-solutions-page
    .vy-solutions-approach__icon {
        animation: none !important;
        transition: none !important;

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

}



/* ==========================================================
   VEYRON INDUSTRIAL — SOLUTIONS PAGE
   SECTION 07 — OUR COMMITMENT

   Full-width navy architectural banner
   Industrial photograph with warm lighting
   Angular navy overlay and layered depth
   Orange vertical divider
   Large condensed industrial typography

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Scoped to Section 07 only.
========================================================== */


/* ==========================================================
   01 — SECTION FOUNDATION
========================================================== */

.vy-solutions-page .vy-solutions-commitment {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;
    min-height: 350px;

    margin: 0;
    padding: 0;

    color: #FFFFFF;
    background: #0B1D2B;

    overflow: hidden;

    box-shadow:
        inset 0 18px 40px rgba(0,0,0,.12);
}


/* ==========================================================
   02 — FULL-WIDTH INDUSTRIAL PHOTOGRAPH
========================================================== */

.vy-solutions-page .vy-solutions-commitment__media {
    position: absolute;
    z-index: 0;

    inset: 0;

    background-image:
        url("../images/Solutions/section7desktop.png");

    background-size: cover;
    background-position: 72% center;
    background-repeat: no-repeat;

    filter:
        saturate(.9)
        contrast(1.08);

    transform: scale(1.005);

    transition:
        transform 1.4s cubic-bezier(.22,1,.36,1);

    pointer-events: none;
}


/* ==========================================================
   03 — DARK NAVY WASH

   Keeps all the typography readable.
   Leaves the right-side warm industrial light visible.
========================================================== */

.vy-solutions-page .vy-solutions-commitment__scrim {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,23,35,.98) 0%,
            rgba(8,29,43,.96) 29%,
            rgba(9,30,44,.89) 53%,
            rgba(9,29,43,.63) 76%,
            rgba(9,29,43,.25) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   04 — ANGULAR ARCHITECTURAL OVERLAY
========================================================== */

.vy-solutions-page .vy-solutions-commitment__angle {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(8,24,36,.65),
            rgba(8,29,44,.50)
        );

    clip-path: polygon(
        0 0,
        63% 0,
        80% 100%,
        0 100%
    );

    pointer-events: none;
}


/* ==========================================================
   05 — CONTROLLED LIGHTING AND DEPTH
========================================================== */

.vy-solutions-page .vy-solutions-commitment__light {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        radial-gradient(
            ellipse 38% 90% at 95% 74%,
            rgba(232,117,56,.14),
            transparent 78%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.025) 0%,
            transparent 46%,
            rgba(0,0,0,.17) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   06 — SHARED 1200PX CONTENT CONTAINER
========================================================== */

.vy-solutions-page .vy-solutions-commitment__inner {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(0, .85fr);

    align-items: center;

    column-gap: clamp(40px, 5vw, 82px);

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;
    min-height: 350px;

    margin-inline: auto;
    padding: 65px 0 70px;

    box-sizing: border-box;
}


/* ==========================================================
   07 — LEFT HEADING COLUMN
========================================================== */

.vy-solutions-page .vy-solutions-commitment__heading {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   08 — EYEBROW
========================================================== */

.vy-solutions-page .vy-solutions-commitment__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 25px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .13em;

    text-transform: uppercase;

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

.vy-solutions-page .vy-solutions-commitment__eyebrow-line {
    display: block;

    flex: 0 0 31px;

    width: 31px;
    height: 3px;

    background: #E87538;

    box-shadow:
        0 2px 9px rgba(232,117,56,.23);
}


/* ==========================================================
   09 — LARGE INDUSTRIAL HEADING
========================================================== */

.vy-solutions-page .vy-solutions-commitment__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

    font-size: clamp(43px, 3.7vw, 64px);
    font-weight: 900;

    line-height: .96;
    letter-spacing: -.015em;

    text-transform: uppercase;

    color: #FFFFFF;

    text-shadow:
        0 5px 22px rgba(0,0,0,.18);
}

.vy-solutions-page .vy-solutions-commitment__title > span {
    display: block;
}

.vy-solutions-page .vy-solutions-commitment__dot {
    color: #E87538;
}


/* ==========================================================
   10 — RIGHT DESCRIPTION AND ORANGE DIVIDER
========================================================== */

.vy-solutions-page .vy-solutions-commitment__message {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 8px 0 8px 27px;

    border-left: 3px solid #E87538;
}

.vy-solutions-page .vy-solutions-commitment__description {
    width: 100%;
    max-width: 390px;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 19px;
    font-weight: 400;

    line-height: 1.55;
    letter-spacing: 0;

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

    text-wrap: pretty;

    text-shadow:
        0 2px 10px rgba(0,0,0,.16);
}


/* ==========================================================
   11 — GENTLE DESKTOP PHOTO INTERACTION
========================================================== */

@media (hover: hover) {

    .vy-solutions-page
    .vy-solutions-commitment:hover
    .vy-solutions-commitment__media {
        transform: scale(1.025);
    }

}


/* ==========================================================
   12 — COMPACT DESKTOP
   1101px TO 1399px
========================================================== */

@media screen and (min-width: 1101px)
and (max-width: 1399px) {

    .vy-solutions-page .vy-solutions-commitment__inner {
        column-gap: 42px;
    }

    .vy-solutions-page .vy-solutions-commitment__title {
        font-size: clamp(42px, 4.1vw, 55px);
    }

    .vy-solutions-page .vy-solutions-commitment__description {
        font-size: 18px;
    }

}


/* ==========================================================
   13 — WIDE TABLET
   900px TO 1100px
========================================================== */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-solutions-page .vy-solutions-commitment__inner {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(0, .85fr);

        column-gap: 34px;

        width: calc(100% - 60px);
        min-height: 340px;

        padding-top: 64px;
        padding-bottom: 68px;
    }

    .vy-solutions-page .vy-solutions-commitment__title {
        font-size: clamp(41px, 4.8vw, 52px);
    }

    .vy-solutions-page .vy-solutions-commitment__message {
        padding-left: 23px;
    }

    .vy-solutions-page .vy-solutions-commitment__description {
        font-size: 17px;
        line-height: 1.55;
    }

    .vy-solutions-page .vy-solutions-commitment__media {
        background-image:
            url("../images/Solutions/section7tablet.png");

        background-position: 72% center;
    }

}


/* ==========================================================
   14 — SMALLER TABLET
   600px TO 899px
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    .vy-solutions-page .vy-solutions-commitment__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 34px;

        width: calc(100% - 54px);
        min-height: 0;

        padding-top: 78px;
        padding-bottom: 82px;
    }

    .vy-solutions-page .vy-solutions-commitment__title {
        max-width: 710px;

        font-size: clamp(47px, 6.8vw, 61px);
        line-height: .97;
    }

    .vy-solutions-page .vy-solutions-commitment__message {
        max-width: 530px;
        padding-left: 24px;
    }

    .vy-solutions-page .vy-solutions-commitment__description {
        max-width: 480px;
        font-size: 18px;
    }

    .vy-solutions-page .vy-solutions-commitment__media {
        background-image:
            url("../images/Solutions/section7tablet.png");

        background-position: 72% center;
    }

    .vy-solutions-page .vy-solutions-commitment__scrim {
        background:
            linear-gradient(
                90deg,
                rgba(7,23,35,.98) 0%,
                rgba(8,27,41,.95) 55%,
                rgba(8,26,41,.64) 100%
            );
    }

    .vy-solutions-page .vy-solutions-commitment__angle {
        clip-path: polygon(
            0 0,
            67% 0,
            100% 100%,
            0 100%
        );
    }

}


/* ==========================================================
   15 — MOBILE
   599px AND BELOW
========================================================== */

@media screen and (max-width: 599px) {

    .vy-solutions-page .vy-solutions-commitment {
        min-height: 0;
    }

    .vy-solutions-page .vy-solutions-commitment__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 31px;

        width: calc(100% - 38px);
        min-height: 0;

        padding-top: 62px;
        padding-bottom: 67px;
    }

    .vy-solutions-page .vy-solutions-commitment__eyebrow {
        gap: 11px;
        margin-bottom: 22px;

        font-size: 12px;
    }

    .vy-solutions-page .vy-solutions-commitment__eyebrow-line {
        flex-basis: 26px;

        width: 26px;
        height: 2px;
    }

    .vy-solutions-page .vy-solutions-commitment__title {
        font-size: clamp(38px, 9.5vw, 52px);

        line-height: 1;
        letter-spacing: -.012em;

        overflow-wrap: normal;
    }

    .vy-solutions-page .vy-solutions-commitment__message {
        max-width: 100%;

        padding: 5px 0 5px 20px;

        border-left-width: 2px;
    }

    .vy-solutions-page .vy-solutions-commitment__description {
        max-width: 100%;

        font-size: 17px;
        line-height: 1.57;
    }

    .vy-solutions-page .vy-solutions-commitment__media {
        background-image:
            url("../images/Solutions/section7tablet.png");

        background-position: 73% center;
    }

    /* Stronger navy overlay for mobile readability */

    .vy-solutions-page .vy-solutions-commitment__scrim {
        background:
            linear-gradient(
                90deg,
                rgba(7,22,34,.98) 0%,
                rgba(8,27,40,.94) 55%,
                rgba(8,26,40,.79) 100%
            );
    }

    .vy-solutions-page .vy-solutions-commitment__angle {
        clip-path: polygon(
            0 0,
            62% 0,
            100% 100%,
            0 100%
        );

        opacity: .75;
    }

}


/* ==========================================================
   16 — VERY SMALL MOBILE
========================================================== */

@media screen and (max-width: 370px) {

    .vy-solutions-page .vy-solutions-commitment__inner {
        width: calc(100% - 34px);

        gap: 28px;

        padding-top: 54px;
        padding-bottom: 59px;
    }

    .vy-solutions-page .vy-solutions-commitment__title {
        font-size: clamp(34px, 9.8vw, 39px);
    }

    .vy-solutions-page .vy-solutions-commitment__description {
        font-size: 16px;
    }

}


/* ==========================================================
   17 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-solutions-page .vy-solutions-commitment__media {
        transform: none !important;
        transition: none !important;
    }

}


/* =====================================================
   VEYRON — SOLUTIONS PAGE
   TABLET & MOBILE PHOTO SEPARATION

   Adds breathing room between adjacent photographs.
   Keeps all existing layouts and angled edges intact.
   Desktop remains unchanged.
===================================================== */

/* TABLET — 600px to 1100px */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    /* Hero photo → Industrial Infrastructure photo */
    .vy-solutions-page .vy-solutions-infra {
        margin-top: 30px;
    }

    /* Systems Integration photo → Maintenance photo */
    .vy-solutions-page .vy-solutions-maint {
        margin-top: 30px;
    }

}


/* MOBILE — 599px and below */

@media screen and (max-width: 599px) {

    /* Hero photo → Industrial Infrastructure photo */
    .vy-solutions-page .vy-solutions-infra {
        margin-top: 22px;
    }

    /* Systems Integration photo → Maintenance photo */
    .vy-solutions-page .vy-solutions-maint {
        margin-top: 22px;
    }

}



/* ==========================================================
   VEYRON INDUSTRIAL — CONTACT PAGE
   SECTION 01 — HERO

   Editorial ivory / industrial photography
   Angular architectural overlays
   Soft lighting and dimensional depth
   Barlow Condensed + Barlow + editorial serif
   Gentle entrance animations

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   All styles are scoped to the Contact page.
========================================================== */


/* ==========================================================
   01 — CONTACT PAGE FOUNDATION
========================================================== */

.vy-contact-page {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    color: #0C1927;
    background: #F8F7F3;

    overflow-x: clip;
}


/* ==========================================================
   02 — HERO SECTION
========================================================== */

.vy-contact-page .vy-contact-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #F8F7F3;

    overflow: hidden;
}


/* ==========================================================
   03 — FULL-BLEED INDUSTRIAL PHOTOGRAPH
========================================================== */

.vy-contact-page .vy-contact-hero__media {
    position: absolute;
    z-index: 0;

    inset: 0 0 0 auto;

    width: 65%;
    height: 100%;

    overflow: hidden;

    background: #253644;

    pointer-events: none;
}

.vy-contact-page .vy-contact-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.vy-contact-page .vy-contact-hero__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 54% center;

    filter:
        saturate(.97)
        contrast(1.035);

    animation:
        vyContactPhotoEnter
        1.5s
        cubic-bezier(.22,1,.36,1)
        both;
}


/* ==========================================================
   04 — PHOTOGRAPHIC LIGHTING
========================================================== */

.vy-contact-page .vy-contact-hero__photo-light {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.10),
            transparent 52%,
            rgba(11,29,43,.12)
        ),
        radial-gradient(
            ellipse 39% 60% at 87% 50%,
            rgba(243,165,86,.14),
            transparent 82%
        );

    pointer-events: none;
}


/* ==========================================================
   05 — SOLID IVORY ANGULAR PANEL

   Content remains readable on the left.
   Right photo extends full bleed.
========================================================== */

.vy-contact-page .vy-contact-hero__ivory {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        radial-gradient(
            ellipse 65% 90% at 18% 48%,
            #FFFFFF 0%,
            #FBFAF7 67%,
            #F6F4EF 100%
        );

    clip-path: polygon(
        0 0,
        44% 0,
        59% 50%,
        44% 100%,
        0 100%
    );

    filter:
        drop-shadow(12px 0 18px rgba(9,24,38,.06));

    pointer-events: none;
}


/* ==========================================================
   06 — TRANSLUCENT ARCHITECTURAL FACET
========================================================== */

.vy-contact-page .vy-contact-hero__facet {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.80),
            rgba(231,234,231,.58) 52%,
            rgba(255,255,255,.13)
        );

    clip-path: polygon(
        43% 0,
        50% 0,
        65% 50%,
        50% 100%,
        43% 100%,
        58% 50%
    );

    pointer-events: none;
}


/* ==========================================================
   07 — SHARED 1200PX CONTENT SYSTEM
========================================================== */

.vy-contact-page .vy-contact-hero__inner {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    min-height: clamp(570px, 48vw, 735px);

    box-sizing: border-box;

    margin-inline: auto;
    padding: 105px 0 100px;
}


/* ==========================================================
   08 — LEFT TEXT CONTENT
========================================================== */

.vy-contact-page .vy-contact-hero__content {
    width: 44%;
    max-width: 500px;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   09 — CONTACT EYEBROW
========================================================== */

.vy-contact-page .vy-contact-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 24px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.2;
    letter-spacing: .15em;

    color: #142638;
}

.vy-contact-page .vy-contact-hero__eyebrow-line {
    display: block;

    flex: 0 0 32px;

    width: 32px;
    height: 3px;

    background: #E87538;

    box-shadow:
        0 2px 9px rgba(232,117,56,.18);
}


/* ==========================================================
   10 — BOLD INDUSTRIAL HERO HEADING
========================================================== */

.vy-contact-page .vy-contact-hero__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Impact,
        sans-serif;

    font-size: clamp(62px, 5.2vw, 88px);
    font-weight: 900;

    line-height: .90;
    letter-spacing: -.02em;

    text-transform: uppercase;

    color: #0C1927;

    text-shadow:
        0 4px 16px rgba(12,25,39,.045);
}

.vy-contact-page .vy-contact-hero__title > span {
    display: block;
}

.vy-contact-page .vy-contact-hero__dot {
    color: #E87538;
}


/* ==========================================================
   11 — EDITORIAL ITALIC INTRODUCTION
========================================================== */

.vy-contact-page .vy-contact-hero__lead {
    max-width: 475px;

    margin: 25px 0 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(22px, 1.65vw, 29px);
    font-weight: 400;
    font-style: italic;

    line-height: 1.34;
    letter-spacing: -.022em;

    color: #273441;

    text-wrap: pretty;
}


/* ==========================================================
   12 — SUPPORTING DESCRIPTION
========================================================== */

.vy-contact-page .vy-contact-hero__description {
    max-width: 475px;

    margin: 23px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.52;
    letter-spacing: -.005em;

    color: #344352;

    text-wrap: pretty;
}


/* ==========================================================
   13 — REFINED ENTRANCE ANIMATIONS
========================================================== */

@keyframes vyContactHeroEnter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vyContactPhotoEnter {
    from {
        opacity: .65;
        transform: scale(1.045);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: no-preference) {

    .vy-contact-page .vy-contact-hero__eyebrow {
        animation:
            vyContactHeroEnter .7s ease-out both;
    }

    .vy-contact-page .vy-contact-hero__title {
        animation:
            vyContactHeroEnter .85s .10s ease-out both;
    }

    .vy-contact-page .vy-contact-hero__lead {
        animation:
            vyContactHeroEnter .85s .20s ease-out both;
    }

    .vy-contact-page .vy-contact-hero__description {
        animation:
            vyContactHeroEnter .85s .30s ease-out both;
    }

}


/* ==========================================================
   14 — COMPACT DESKTOP
   1101px–1399px
========================================================== */

@media screen and (min-width: 1101px)
and (max-width: 1399px) {

    .vy-contact-page .vy-contact-hero__inner {
        min-height: 610px;

        padding-top: 85px;
        padding-bottom: 85px;
    }

    .vy-contact-page .vy-contact-hero__content {
        width: 44%;
        max-width: 465px;
    }

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(59px, 5.5vw, 75px);
    }

    .vy-contact-page .vy-contact-hero__lead {
        font-size: 23px;
    }

    .vy-contact-page .vy-contact-hero__description {
        font-size: 17px;
    }

}


/* ==========================================================
   15 — LARGE TABLET
   900px–1100px

   Maintains the split editorial composition.
========================================================== */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-contact-page .vy-contact-hero__inner {
        width: calc(100% - 54px);
        min-height: 570px;

        padding-top: 74px;
        padding-bottom: 74px;
    }

    .vy-contact-page .vy-contact-hero__content {
        width: 45%;
        max-width: 450px;
    }

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(54px, 6.3vw, 70px);
    }

    .vy-contact-page .vy-contact-hero__lead {
        font-size: 22px;
    }

    .vy-contact-page .vy-contact-hero__description {
        font-size: 16px;
    }

    .vy-contact-page .vy-contact-hero__ivory {
        clip-path: polygon(
            0 0,
            48% 0,
            63% 50%,
            48% 100%,
            0 100%
        );
    }

    .vy-contact-page .vy-contact-hero__facet {
        clip-path: polygon(
            46% 0,
            54% 0,
            68% 50%,
            54% 100%,
            46% 100%,
            61% 50%
        );
    }

    .vy-contact-page .vy-contact-hero__image {
        object-position: 58% center;
    }

}


/* ==========================================================
   16 — STACKED TABLET AND MOBILE FOUNDATION
   899px AND BELOW

   Content first.
   Industrial photograph below.
   No overlapping or cropped text.
========================================================== */

@media screen and (max-width: 899px) {

    .vy-contact-page .vy-contact-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .vy-contact-page .vy-contact-hero__inner {
        order: 1;

        display: block;

        min-height: 0;
        max-width: none;
    }

    .vy-contact-page .vy-contact-hero__content {
        width: 100%;
        max-width: 700px;
    }

    .vy-contact-page .vy-contact-hero__media {
        order: 2;

        position: relative;

        inset: auto;

        width: 100%;

        overflow: hidden;

        clip-path: polygon(
            0 13%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-contact-page .vy-contact-hero__ivory,
    .vy-contact-page .vy-contact-hero__facet,
    .vy-contact-page .vy-contact-hero__photo-light {
        display: none;
    }

    .vy-contact-page .vy-contact-hero__media::after {
        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.05),
                transparent 50%,
                rgba(12,25,39,.10)
            );

        pointer-events: none;
    }

}


/* ==========================================================
   17 — SMALLER TABLET
   600px–899px
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    .vy-contact-page .vy-contact-hero__inner {
        width: calc(100% - 60px);

        padding-top: 76px;
        padding-bottom: 38px;
    }

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(65px, 9vw, 86px);
    }

    .vy-contact-page .vy-contact-hero__lead {
        max-width: 645px;

        font-size: clamp(25px, 3.7vw, 30px);
    }

    .vy-contact-page .vy-contact-hero__description {
        max-width: 635px;

        font-size: 18px;
    }

    .vy-contact-page .vy-contact-hero__media {
        height: clamp(360px, 53vw, 460px);

        margin-top: -10px;
    }

    .vy-contact-page .vy-contact-hero__image {
        object-position: 55% 48%;
    }

}


/* ==========================================================
   18 — MOBILE
   599px AND BELOW
========================================================== */

@media screen and (max-width: 599px) {

    .vy-contact-page .vy-contact-hero__inner {
        width: calc(100% - 38px);

        padding-top: 58px;
        padding-bottom: 28px;
    }

    .vy-contact-page .vy-contact-hero__eyebrow {
        gap: 11px;

        margin-bottom: 20px;

        font-size: 12px;
    }

    .vy-contact-page .vy-contact-hero__eyebrow-line {
        flex-basis: 26px;

        width: 26px;
        height: 2px;
    }

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(45px, 11vw, 67px);

        line-height: .95;
        letter-spacing: -.017em;
    }

    .vy-contact-page .vy-contact-hero__lead {
        max-width: 100%;

        margin-top: 23px;

        font-size: clamp(21px, 5.7vw, 27px);
        line-height: 1.4;
    }

    .vy-contact-page .vy-contact-hero__description {
        max-width: 100%;

        margin-top: 20px;

        font-size: 16px;
        line-height: 1.58;
    }

    .vy-contact-page .vy-contact-hero__media {
        height: clamp(275px, 78vw, 400px);

        margin-top: -6px;

        clip-path: polygon(
            0 11%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-contact-page .vy-contact-hero__image {
        object-position: 57% 47%;
    }

}


/* ==========================================================
   19 — VERY SMALL MOBILE
========================================================== */

@media screen and (max-width: 370px) {

    .vy-contact-page .vy-contact-hero__inner {
        width: calc(100% - 34px);

        padding-top: 50px;
        padding-bottom: 24px;
    }

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(40px, 11.3vw, 45px);
    }

    .vy-contact-page .vy-contact-hero__lead {
        font-size: 20px;
    }

    .vy-contact-page .vy-contact-hero__description {
        font-size: 15px;
    }

    .vy-contact-page .vy-contact-hero__media {
        height: 265px;
    }

}


/* ==========================================================
   20 — ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-contact-page .vy-contact-hero__image,
    .vy-contact-page .vy-contact-hero__eyebrow,
    .vy-contact-page .vy-contact-hero__title,
    .vy-contact-page .vy-contact-hero__lead,
    .vy-contact-page .vy-contact-hero__description {
        animation: none !important;
        transition: none !important;

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

}



/* =====================================================
   VEYRON CONTACT — TABLET & MOBILE HERO REFINEMENT

   Fixes eyebrow hidden behind header
   Balances heading and body typography
   Reduces unnecessary vertical spacing
   Keeps existing angled photographs
   Desktop remains unchanged
===================================================== */


/* LARGE TABLET — 900px to 1100px */

@media screen and (min-width: 900px) and (max-width: 1100px) {

    .vy-contact-page .vy-contact-hero__inner {
        min-height: 610px;
        padding-top: 148px;
        padding-bottom: 65px;
    }

    .vy-contact-page .vy-contact-hero__eyebrow {
        margin-bottom: 20px;
    }

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(53px, 6vw, 67px);
    }

    .vy-contact-page .vy-contact-hero__lead {
        margin-top: 20px;
        font-size: 21px;
    }

    .vy-contact-page .vy-contact-hero__description {
        margin-top: 17px;
        font-size: 16px;
    }

}


/* TABLET — 600px to 899px */

@media screen and (min-width: 600px) and (max-width: 899px) {

    /* Move the entire text block below the sticky header */

    .vy-contact-page .vy-contact-hero__inner {
        padding-top: 142px;
        padding-bottom: 20px;
    }

    .vy-contact-page .vy-contact-hero__eyebrow {
        margin-bottom: 18px;
    }

    /* Balanced heading */

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(54px, 8vw, 76px);
        line-height: .96;
    }

    /* Reduce excessive text height */

    .vy-contact-page .vy-contact-hero__lead {
        margin-top: 19px;

        font-size: clamp(23px, 3.1vw, 27px);
        line-height: 1.36;
    }

    .vy-contact-page .vy-contact-hero__description {
        margin-top: 16px;

        font-size: 17px;
        line-height: 1.5;
    }

    /* Keep the photograph prominent without excess height */

    .vy-contact-page .vy-contact-hero__media {
        height: clamp(320px, 46vw, 410px);
        margin-top: 0;
    }

    .vy-contact-page .vy-contact-hero__image {
        object-position: 55% 48%;
    }

}


/* MOBILE — 599px and below */

@media screen and (max-width: 599px) {

    /* Make CONTACT visible beneath the fixed header */

    .vy-contact-page .vy-contact-hero__inner {
        padding-top: 138px;
        padding-bottom: 18px;
    }

    .vy-contact-page .vy-contact-hero__eyebrow {
        margin-bottom: 17px;
    }

    /* Preserve two-line industrial heading */

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(41px, 10.4vw, 52px);
        line-height: .96;
        letter-spacing: -.016em;
    }

    /* More compact editorial introduction */

    .vy-contact-page .vy-contact-hero__lead {
        margin-top: 18px;

        font-size: clamp(19px, 5vw, 23px);
        line-height: 1.36;
    }

    /* Reduce text-to-photo spacing */

    .vy-contact-page .vy-contact-hero__description {
        margin-top: 15px;

        font-size: 15.5px;
        line-height: 1.52;
    }

    /* Shorter photographic area, same diagonal edge */

    .vy-contact-page .vy-contact-hero__media {
        height: clamp(255px, 70vw, 340px);
        margin-top: 0;
    }

    .vy-contact-page .vy-contact-hero__image {
        object-position: 55% 47%;
    }

}


/* SMALL MOBILE — 370px and below */

@media screen and (max-width: 370px) {

    .vy-contact-page .vy-contact-hero__inner {
        padding-top: 130px;
        padding-bottom: 15px;
    }

    .vy-contact-page .vy-contact-hero__title {
        font-size: clamp(38px, 10.4vw, 41px);
    }

    .vy-contact-page .vy-contact-hero__lead {
        font-size: 19px;
    }

}



/* ==========================================================
   VEYRON INDUSTRIAL — CONTACT PAGE
   SECTION 02 — CONTACT INFORMATION & INQUIRY FORM

   Warm ivory editorial background
   Four architectural contact cards
   Elevated white inquiry form
   Copper icons, focus states and subtle depth
   Shared 1200px content alignment

   Desktop / Tablet / Mobile
   Scoped to Section 02 only
========================================================== */


/* ==========================================================
   01 — SECTION FOUNDATION
========================================================== */

.vy-contact-page .vy-contact-details {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    padding: 0;
    margin: 0;

    background:
        radial-gradient(
            ellipse 65% 60% at 85% 10%,
            rgba(255,255,255,.98),
            transparent 85%
        ),
        linear-gradient(
            115deg,
            #FBFAF7 0%,
            #F8F7F4 55%,
            #FFFFFF 100%
        );

    color: #0C1927;

    overflow: hidden;
}


/* ==========================================================
   02 — SHARED 1200PX CONTAINER
========================================================== */

.vy-contact-page .vy-contact-details__inner {
    display: grid;

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

    align-items: start;

    column-gap: clamp(42px, 5.5vw, 82px);

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    margin-inline: auto;
    padding: 102px 0 115px;

    box-sizing: border-box;
}


/* ==========================================================
   03 — LEFT CONTACT INFORMATION
========================================================== */

.vy-contact-page .vy-contact-details__information {
    width: 100%;
    min-width: 0;
}

.vy-contact-page .vy-contact-details__heading {
    margin-bottom: 29px;
}


/* ==========================================================
   04 — SECTION EYEBROWS
========================================================== */

.vy-contact-page .vy-contact-details__eyebrow,
.vy-contact-page .vy-contact-inquiry__eyebrow {
    display: flex;
    align-items: center;

    gap: 13px;

    margin: 0 0 18px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: .13em;

    color: #142638;
}

.vy-contact-page .vy-contact-details__eyebrow > span,
.vy-contact-page .vy-contact-inquiry__eyebrow > span {
    display: block;
    flex: 0 0 31px;

    width: 31px;
    height: 3px;

    background: #E87538;
}


/* ==========================================================
   05 — INDUSTRIAL SECTION HEADINGS
========================================================== */

.vy-contact-page .vy-contact-details__title,
.vy-contact-page .vy-contact-inquiry__title {
    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Impact,
        sans-serif;

    font-size: clamp(39px, 3.1vw, 53px);
    font-weight: 900;

    line-height: .98;
    letter-spacing: -.018em;

    text-transform: uppercase;

    color: #0B1C2B;

    text-wrap: balance;
}


/* ==========================================================
   06 — INTRODUCTORY COPY
========================================================== */

.vy-contact-page .vy-contact-details__intro,
.vy-contact-page .vy-contact-inquiry__intro {
    max-width: 480px;

    margin: 18px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;

    line-height: 1.55;

    color: #53606B;

    text-wrap: pretty;
}


/* ==========================================================
   07 — CONTACT CARD STACK
========================================================== */

.vy-contact-page .vy-contact-details__cards {
    display: flex;
    flex-direction: column;

    gap: 14px;

    width: 100%;
}


/* ==========================================================
   08 — CONTACT INFORMATION CARDS
========================================================== */

.vy-contact-page .vy-contact-details__card {
    display: grid;

    grid-template-columns:
        76px minmax(0, 1fr);

    align-items: center;

    gap: 19px;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    margin: 0;
    padding: 18px 19px;

    background:
        linear-gradient(
            120deg,
            #F5F4F0,
            #F9F8F5
        );

    border: 1px solid rgba(12,25,39,.025);

    box-shadow:
        0 8px 22px rgba(12,25,39,.025);

    transition:
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* ==========================================================
   09 — ICON TILES
========================================================== */

.vy-contact-page .vy-contact-details__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    background: #F0EFEB;

    color: #E87538;
}

.vy-contact-page .vy-contact-details__icon svg {
    display: block;

    width: 38px;
    height: 38px;

    filter:
        drop-shadow(
            0 2px 3px rgba(232,117,56,.075)
        );
}


/* ==========================================================
   10 — CARD CONTENT
========================================================== */

.vy-contact-page .vy-contact-details__card-content {
    min-width: 0;

    padding-left: 20px;

    border-left:
        1px solid rgba(12,25,39,.16);
}

.vy-contact-page .vy-contact-details__card-content h3 {
    margin: 0 0 7px;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Arial,
        sans-serif;

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

    line-height: 1.1;
    letter-spacing: .005em;

    text-transform: uppercase;

    color: #0C1927;
}

.vy-contact-page .vy-contact-details__card-content p {
    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    color: #64707B;
}


/* ==========================================================
   11 — CONTACT DETAILS INSIDE CARDS
========================================================== */

.vy-contact-page .vy-contact-details__card-meta {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-top: 9px;
}

.vy-contact-page .vy-contact-details__card-meta span {
    display: block;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.35;

    color: #25384A;

    overflow-wrap: anywhere;
}

.vy-contact-page .vy-contact-details__address span {
    display: block;
}


/* ==========================================================
   12 — REFINED CARD HOVER
========================================================== */

@media (hover: hover) {

    .vy-contact-page .vy-contact-details__card:hover {
        background: #FFFFFF;

        transform: translateY(-2px);

        box-shadow:
            0 14px 28px rgba(12,25,39,.06);
    }

}


/* ==========================================================
   13 — RIGHT FORM CONTAINER
========================================================== */

.vy-contact-page .vy-contact-inquiry {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    padding: 39px 37px 35px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FCFBF9
        );

    border: 1px solid rgba(12,25,39,.065);
    border-radius: 10px;

    box-shadow:
        0 22px 50px rgba(12,25,39,.065),
        0 4px 14px rgba(12,25,39,.035),
        inset 0 1px 0 rgba(255,255,255,.8);

    scroll-margin-top: 110px;
}


/* ==========================================================
   14 — FORM INTRO SPACING
========================================================== */

.vy-contact-page .vy-contact-inquiry__heading {
    margin-bottom: 26px;
}

.vy-contact-page .vy-contact-inquiry__intro {
    margin-top: 16px;
}


/* ==========================================================
   15 — FORM LAYOUT
========================================================== */

.vy-contact-page .vy-contact-inquiry__form {
    display: flex;
    flex-direction: column;

    gap: 18px;

    width: 100%;

    margin: 0;
    padding: 0;
}

.vy-contact-page .vy-contact-inquiry__field {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}

.vy-contact-page .vy-contact-inquiry__row {
    display: grid;

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

    gap: 16px;
}


/* ==========================================================
   16 — FORM LABELS
========================================================== */

.vy-contact-page .vy-contact-inquiry__field label {
    display: block;

    margin: 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: .09em;

    color: #172A3A;
}

.vy-contact-page .vy-contact-inquiry__field label span {
    color: #E87538;
}


/* ==========================================================
   17 — TEXT INPUTS, SELECT & TEXTAREA
========================================================== */

.vy-contact-page .vy-contact-inquiry__field input,
.vy-contact-page .vy-contact-inquiry__field select,
.vy-contact-page .vy-contact-inquiry__field textarea {
    display: block;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    margin: 0;
    padding: 12px 14px;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.4;

    color: #233447;

    background: #FFFFFF;

    border: 1px solid #D9DDDF;
    border-radius: 2px;

    outline: none;

    box-shadow:
        inset 0 1px 3px rgba(12,25,39,.018);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.vy-contact-page .vy-contact-inquiry__field input,
.vy-contact-page .vy-contact-inquiry__field select {
    min-height: 47px;
}

.vy-contact-page .vy-contact-inquiry__field textarea {
    min-height: 122px;

    resize: vertical;
}


/* ==========================================================
   18 — PLACEHOLDERS
========================================================== */

.vy-contact-page
.vy-contact-inquiry__field input::placeholder,
.vy-contact-page
.vy-contact-inquiry__field textarea::placeholder {
    color: #9DA7AE;
    opacity: 1;
}


/* ==========================================================
   19 — KEYBOARD AND INPUT FOCUS
========================================================== */

.vy-contact-page .vy-contact-inquiry__field input:focus,
.vy-contact-page .vy-contact-inquiry__field select:focus,
.vy-contact-page .vy-contact-inquiry__field textarea:focus {
    border-color: #E87538;

    box-shadow:
        0 0 0 3px rgba(232,117,56,.11);

    background: #FFFFFF;
}


/* ==========================================================
   20 — CUSTOM SELECT ARROW
========================================================== */

.vy-contact-page .vy-contact-inquiry__select-wrap {
    position: relative;
    width: 100%;
}

.vy-contact-page .vy-contact-inquiry__select-wrap select {
    appearance: none;
    -webkit-appearance: none;

    padding-right: 43px;
    cursor: pointer;
}

.vy-contact-page
.vy-contact-inquiry__select-wrap::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 19px;

    width: 9px;
    height: 9px;

    border-right: 1.8px solid #233447;
    border-bottom: 1.8px solid #233447;

    transform:
        translateY(-70%) rotate(45deg);

    pointer-events: none;
}


/* ==========================================================
   21 — ORANGE SUBMIT BUTTON
========================================================== */

.vy-contact-page .vy-contact-inquiry__submit {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 19px;

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

    box-sizing: border-box;

    margin: 3px 0 0;
    padding: 14px 22px;

    border: 1px solid #E87538;
    border-radius: 0;

    background: #E87538;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;

    line-height: 1.25;
    letter-spacing: .08em;

    color: #FFFFFF;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(232,117,56,.15);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.vy-contact-page
.vy-contact-inquiry__submit span:last-child {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.vy-contact-page .vy-contact-inquiry__submit:hover {
    background: #D8652B;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(232,117,56,.22);
}

.vy-contact-page .vy-contact-inquiry__submit:focus-visible {
    outline: 3px solid #0C1927;
    outline-offset: 3px;
}


/* ==========================================================
   22 — PRIVACY NOTE
========================================================== */

.vy-contact-page .vy-contact-inquiry__privacy {
    margin: -2px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.55;

    color: #89939A;
}

.vy-contact-page .vy-contact-inquiry__privacy a {
    color: #667781;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.vy-contact-page .vy-contact-inquiry__privacy a:hover {
    color: #E87538;
}


/* ==========================================================
   23 — SUBMISSION FEEDBACK
========================================================== */

.vy-contact-page .vy-contact-inquiry__notice {
    margin: 0 0 19px;
    padding: 13px 15px;

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

    font-family: "Barlow", Arial, sans-serif;
    font-size: 15px;

    line-height: 1.45;
}

.vy-contact-page .vy-contact-inquiry__notice.is-success {
    background: #EDF4ED;
    color: #254A32;
}

.vy-contact-page .vy-contact-inquiry__notice.is-error {
    background: #FFF0EB;
    color: #8D3620;
}


/* ==========================================================
   24 — HIDDEN HONEYPOT
========================================================== */

.vy-contact-page .vy-contact-inquiry__honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}


/* ==========================================================
   25 — SUBTLE SCROLL ENTRANCE
========================================================== */

@keyframes vyContactDetailsEnter {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion: no-preference) {

        .vy-contact-page .vy-contact-details__information,
        .vy-contact-page .vy-contact-inquiry {
            animation: vyContactDetailsEnter linear both;

            animation-timeline: view();
            animation-range: entry 0% cover 15%;
        }

    }
}


/* ==========================================================
   26 — LARGE TABLET
   900px TO 1100px
========================================================== */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-contact-page .vy-contact-details__inner {
        width: calc(100% - 56px);

        column-gap: 35px;

        padding-top: 76px;
        padding-bottom: 85px;
    }

    .vy-contact-page .vy-contact-details__title,
    .vy-contact-page .vy-contact-inquiry__title {
        font-size: clamp(36px, 4.1vw, 46px);
    }

    .vy-contact-page .vy-contact-details__card {
        grid-template-columns: 58px minmax(0, 1fr);

        gap: 13px;
        padding: 15px 12px;
    }

    .vy-contact-page .vy-contact-details__icon {
        width: 58px;
        height: 65px;
    }

    .vy-contact-page .vy-contact-details__icon svg {
        width: 31px;
        height: 31px;
    }

    .vy-contact-page .vy-contact-details__card-content {
        padding-left: 14px;
    }

    .vy-contact-page .vy-contact-details__card-content h3 {
        font-size: 19px;
    }

    .vy-contact-page .vy-contact-inquiry {
        padding: 31px 25px;
    }
}


/* ==========================================================
   27 — TABLET
   600px TO 899px
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    .vy-contact-page .vy-contact-details__inner {
        grid-template-columns: minmax(0, 1fr);

        gap: 50px;

        width: calc(100% - 60px);

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

    .vy-contact-page .vy-contact-details__title,
    .vy-contact-page .vy-contact-inquiry__title {
        font-size: clamp(45px, 6.2vw, 58px);
    }

    .vy-contact-page .vy-contact-details__intro {
        max-width: 650px;
    }

    .vy-contact-page .vy-contact-details__cards {
        display: grid;

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

        gap: 16px;
    }

    .vy-contact-page .vy-contact-details__card {
        grid-template-columns: 58px minmax(0, 1fr);

        gap: 13px;
        padding: 16px 13px;
    }

    .vy-contact-page .vy-contact-details__icon {
        width: 58px;
        height: 65px;
    }

    .vy-contact-page .vy-contact-details__icon svg {
        width: 31px;
        height: 31px;
    }

    .vy-contact-page .vy-contact-details__card-content {
        padding-left: 12px;
    }

    .vy-contact-page .vy-contact-details__card-content h3 {
        font-size: 18px;
    }

    .vy-contact-page .vy-contact-inquiry {
        width: 100%;
        max-width: 740px;

        margin-inline: auto;
        padding: 38px;
    }
}


/* ==========================================================
   28 — MOBILE
   599px AND BELOW
========================================================== */

@media screen and (max-width: 599px) {

    .vy-contact-page .vy-contact-details__inner {
        grid-template-columns: minmax(0, 1fr);

        gap: 39px;

        width: calc(100% - 38px);

        padding-top: 59px;
        padding-bottom: 69px;
    }

    .vy-contact-page .vy-contact-details__heading {
        margin-bottom: 23px;
    }

    .vy-contact-page .vy-contact-details__eyebrow,
    .vy-contact-page .vy-contact-inquiry__eyebrow {
        margin-bottom: 16px;

        font-size: 11px;
    }

    .vy-contact-page .vy-contact-details__title,
    .vy-contact-page .vy-contact-inquiry__title {
        font-size: clamp(36px, 9vw, 47px);

        line-height: .98;
    }

    .vy-contact-page .vy-contact-details__intro,
    .vy-contact-page .vy-contact-inquiry__intro {
        margin-top: 15px;

        font-size: 16px;
        line-height: 1.55;
    }

    .vy-contact-page .vy-contact-details__cards {
        gap: 12px;
    }

    .vy-contact-page .vy-contact-details__card {
        grid-template-columns: 57px minmax(0, 1fr);

        gap: 12px;

        padding: 14px 11px;
    }

    .vy-contact-page .vy-contact-details__icon {
        width: 57px;
        height: 61px;
    }

    .vy-contact-page .vy-contact-details__icon svg {
        width: 30px;
        height: 30px;
    }

    .vy-contact-page .vy-contact-details__card-content {
        padding-left: 12px;
    }

    .vy-contact-page .vy-contact-details__card-content h3 {
        margin-bottom: 5px;

        font-size: 19px;
    }

    .vy-contact-page .vy-contact-details__card-content p,
    .vy-contact-page .vy-contact-details__card-meta span {
        font-size: 14px;
    }

    /* Full-width form with compact mobile padding */

    .vy-contact-page .vy-contact-inquiry {
        padding: 27px 19px 25px;

        border-radius: 7px;
    }

    .vy-contact-page .vy-contact-inquiry__heading {
        margin-bottom: 23px;
    }

    .vy-contact-page .vy-contact-inquiry__form {
        gap: 16px;
    }

    .vy-contact-page .vy-contact-inquiry__row {
        grid-template-columns: minmax(0, 1fr);

        gap: 16px;
    }

    .vy-contact-page .vy-contact-inquiry__field input,
    .vy-contact-page .vy-contact-inquiry__field select {
        min-height: 48px;
    }

    .vy-contact-page .vy-contact-inquiry__field textarea {
        min-height: 135px;
    }

    .vy-contact-page .vy-contact-inquiry__submit {
        min-height: 53px;
    }

    .vy-contact-page .vy-contact-inquiry__privacy {
        font-size: 12px;
    }
}


/* ==========================================================
   29 — SMALL MOBILE
   370px AND BELOW
========================================================== */

@media screen and (max-width: 370px) {

    .vy-contact-page .vy-contact-details__inner {
        width: calc(100% - 30px);
    }

    .vy-contact-page .vy-contact-details__title,
    .vy-contact-page .vy-contact-inquiry__title {
        font-size: 35px;
    }

    .vy-contact-page .vy-contact-details__card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }

    .vy-contact-page .vy-contact-details__icon {
        width: 48px;
        height: 55px;
    }

    .vy-contact-page .vy-contact-details__icon svg {
        width: 27px;
        height: 27px;
    }

    .vy-contact-page .vy-contact-details__card-content {
        padding-left: 10px;
    }

    .vy-contact-page .vy-contact-inquiry {
        padding: 24px 15px;
    }
}


/* ==========================================================
   30 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-contact-page .vy-contact-details__information,
    .vy-contact-page .vy-contact-inquiry,
    .vy-contact-page .vy-contact-details__card,
    .vy-contact-page .vy-contact-inquiry__submit {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}



/* =====================================================
   VEYRON CONTACT — SECTION 03
   OUR COMMITMENT — REFINED FINAL VERSION

   Desktop: worker visible on right
   Tablet: responsive photograph
   Mobile: readable copy above photograph
   Same CTA typography as other pages
===================================================== */


/* SECTION FOUNDATION */

.vy-contact-page .vy-contact-closing {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    background: #0A1D2D;
    color: #FFFFFF;

    overflow: hidden;
}


/* PHOTOGRAPH */

.vy-contact-page .vy-contact-closing__picture {
    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;

    display: block;

    width: 61%;
    height: 100%;

    overflow: hidden;
}

.vy-contact-page .vy-contact-closing__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 74% center;

    filter: saturate(1.04) contrast(1.025);

    opacity: 1;

    transition: transform .8s ease;
}


/* NAVY GRADIENT — PROTECT TEXT, REVEAL PHOTOGRAPH */

.vy-contact-page .vy-contact-closing__scrim {
    position: absolute;
    z-index: 1;
    inset: 0;

    background: linear-gradient(
        90deg,
        #0A1D2D 0%,
        #0A1D2D 27%,
        rgba(10,29,45,.98) 38%,
        rgba(10,29,45,.82) 47%,
        rgba(10,29,45,.29) 60%,
        rgba(10,29,45,0) 78%
    );

    pointer-events: none;
}


/* ARCHITECTURAL DIAGONAL */

.vy-contact-page .vy-contact-closing__angle {
    position: absolute;
    z-index: 2;
    inset: 0;

    background: linear-gradient(
        120deg,
        rgba(24,55,75,.26),
        rgba(17,43,62,.09)
    );

    clip-path: polygon(
        0 0,
        43% 0,
        61% 100%,
        0 100%
    );

    pointer-events: none;
}


/* SUBTLE PHOTOGRAPHIC LIGHTING */

.vy-contact-page .vy-contact-closing__lighting {
    position: absolute;
    z-index: 3;
    inset: 0;

    background: radial-gradient(
        ellipse 27% 70% at 91% 45%,
        rgba(232,117,56,.07),
        transparent 90%
    );

    pointer-events: none;
}


/* CONTENT CONTAINER — 1200PX */

.vy-contact-page .vy-contact-closing__inner {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;
    min-height: 360px;

    margin-inline: auto;
    padding: 65px 0;

    box-sizing: border-box;
}

.vy-contact-page .vy-contact-closing__content {
    width: 100%;
    max-width: 720px;

    margin: 0;
    padding: 0;

    /* Keep the text visible, including during scrolling */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}


/* EYEBROW */

.vy-contact-page .vy-contact-closing__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0 0 22px;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: .14em;

    color: #FFFFFF;
}

.vy-contact-page .vy-contact-closing__eyebrow-line {
    flex: 0 0 33px;

    width: 33px;
    height: 3px;

    background: #E87538;
}


/* HEADING */

.vy-contact-page .vy-contact-closing__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Impact,
        sans-serif;

    font-size: clamp(42px, 3.65vw, 61px);
    font-weight: 900;

    line-height: .97;
    letter-spacing: -.018em;

    text-transform: uppercase;
    color: #FFFFFF;

    text-shadow: 0 3px 15px rgba(0,0,0,.15);
}

.vy-contact-page .vy-contact-closing__title > span {
    display: block;
}

.vy-contact-page .vy-contact-closing__dot {
    color: #E87538;
}


/* BODY COPY — SAME TYPOGRAPHY AS OTHER FINAL CTAS */

.vy-contact-page .vy-contact-closing__description {
    width: 100%;
    max-width: 540px;

    margin: 23px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 400;

    line-height: 1.55;
    letter-spacing: -.005em;

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

    text-wrap: pretty;
}


/* DESKTOP REFINEMENT */

@media screen and (min-width: 1101px) {

    .vy-contact-page .vy-contact-closing__picture {
        width: 61%;
    }

    .vy-contact-page .vy-contact-closing__image {
        object-position: 74% 48%;
    }

}


/* LARGE TABLET — 900PX TO 1100PX */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-contact-page .vy-contact-closing__inner {
        width: calc(100% - 56px);

        min-height: 385px;
        padding: 60px 0;
    }

    .vy-contact-page .vy-contact-closing__content {
        max-width: 65%;
    }

    .vy-contact-page .vy-contact-closing__title {
        font-size: clamp(40px, 4.8vw, 51px);
    }

    .vy-contact-page .vy-contact-closing__description {
        max-width: 470px;
        font-size: 18px;
    }

    .vy-contact-page .vy-contact-closing__picture {
        width: 66%;
    }

    .vy-contact-page .vy-contact-closing__image {
        object-position: 76% center;
    }

    .vy-contact-page .vy-contact-closing__scrim {
        background: linear-gradient(
            90deg,
            #0A1D2D 0%,
            rgba(10,29,45,.98) 35%,
            rgba(10,29,45,.76) 49%,
            rgba(10,29,45,.12) 79%,
            transparent 100%
        );
    }

}


/* TABLET AND MOBILE — STACK THE PHOTO BELOW THE TEXT */

@media screen and (max-width: 899px) {

    .vy-contact-page .vy-contact-closing {
        display: flex;
        flex-direction: column;
    }

    .vy-contact-page .vy-contact-closing__inner {
        order: 1;

        display: block;

        width: calc(100% - 56px);

        min-height: 0;
        padding: 58px 0 45px;
    }

    .vy-contact-page .vy-contact-closing__content {
        width: 100%;
        max-width: 100%;
    }

    .vy-contact-page .vy-contact-closing__picture {
        order: 2;

        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        height: clamp(320px, 49vw, 460px);

        clip-path: polygon(
            0 8%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-contact-page .vy-contact-closing__image {
        object-position: 70% 48%;
    }

    /* Do not darken the separate photograph */

    .vy-contact-page .vy-contact-closing__scrim,
    .vy-contact-page .vy-contact-closing__angle,
    .vy-contact-page .vy-contact-closing__lighting {
        display: none;
    }

    .vy-contact-page .vy-contact-closing__title {
        font-size: clamp(43px, 6.5vw, 57px);
    }

    .vy-contact-page .vy-contact-closing__description {
        max-width: 620px;
        font-size: 19px;
    }

}


/* MOBILE — 599PX AND BELOW */

@media screen and (max-width: 599px) {

    .vy-contact-page .vy-contact-closing__inner {
        width: calc(100% - 38px);

        min-height: 0;

        padding-top: 48px;
        padding-bottom: 34px;
    }

    .vy-contact-page .vy-contact-closing__eyebrow {
        gap: 11px;
        margin-bottom: 18px;

        font-size: 12px;
    }

    .vy-contact-page .vy-contact-closing__eyebrow-line {
        flex-basis: 27px;
        width: 27px;
        height: 2px;
    }

    .vy-contact-page .vy-contact-closing__title {
        font-size: clamp(35px, 9vw, 48px);

        line-height: 1;
        letter-spacing: -.012em;

        overflow-wrap: normal;
    }

    .vy-contact-page .vy-contact-closing__description {
        max-width: 100%;

        margin-top: 19px;

        font-size: 17px;
        line-height: 1.55;
    }

    .vy-contact-page .vy-contact-closing__picture {
        height: clamp(275px, 78vw, 390px);

        clip-path: polygon(
            0 7%,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .vy-contact-page .vy-contact-closing__image {
        object-position: 73% center;
    }

}


/* SMALL MOBILE */

@media screen and (max-width: 370px) {

    .vy-contact-page .vy-contact-closing__inner {
        width: calc(100% - 34px);
        padding-top: 43px;
        padding-bottom: 29px;
    }

    .vy-contact-page .vy-contact-closing__title {
        font-size: 34px;
    }

    .vy-contact-page .vy-contact-closing__description {
        font-size: 16px;
    }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .vy-contact-page .vy-contact-closing__image {
        transition: none !important;
        transform: none !important;
    }

}



/* ==========================================================
   VEYRON INDUSTRIAL — PRIVACY POLICY PAGE

   Industrial editorial legal layout
   Dark navy photographic hero
   Angular glass facets and warm lighting
   Sticky legal document navigation
   Elevated ivory / white document surface
   Responsive desktop / tablet / mobile

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below
========================================================== */


/* ==========================================================
   01 — PAGE FOUNDATION
========================================================== */

.vy-policy-page {
    --vy-policy-navy: #0A1D2D;
    --vy-policy-ink: #102537;
    --vy-policy-orange: #E87538;
    --vy-policy-ivory: #F8F7F3;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: var(--vy-policy-ivory);
    color: var(--vy-policy-ink);
}

.vy-policy-page *,
.vy-policy-page *::before,
.vy-policy-page *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02 — HERO FOUNDATION
========================================================== */

.vy-policy-page .vy-policy-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: #081B29;
    color: #FFFFFF;

    overflow: hidden;
}


/* ==========================================================
   03 — PHOTOGRAPHIC BACKGROUND
========================================================== */

.vy-policy-page .vy-policy-hero__picture {
    position: absolute;
    z-index: 0;

    inset: 0 0 0 auto;

    display: block;

    width: 76%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
}

.vy-policy-page .vy-policy-hero__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 59% center;

    filter:
        saturate(.88)
        contrast(1.06);

    transform: scale(1.025);
}


/* ==========================================================
   04 — DEEP NAVY PHOTOGRAPHIC SCRIM
========================================================== */

.vy-policy-page .vy-policy-hero__scrim {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #081B29 0%,
            rgba(8,27,41,.99) 24%,
            rgba(8,27,41,.96) 43%,
            rgba(8,27,41,.70) 59%,
            rgba(8,27,41,.25) 80%,
            rgba(8,27,41,.06) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   05 — ARCHITECTURAL ANGULAR FACET
========================================================== */

.vy-policy-page .vy-policy-hero__facet {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            125deg,
            rgba(55,79,98,.24),
            rgba(14,37,54,.08)
        );

    clip-path: polygon(
        47% 0,
        56% 0,
        71% 100%,
        61% 100%
    );

    pointer-events: none;
}


/* ==========================================================
   06 — INDUSTRIAL LIGHTING
========================================================== */

.vy-policy-page .vy-policy-hero__light {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        radial-gradient(
            ellipse 30% 90% at 95% 73%,
            rgba(232,117,56,.13),
            transparent 84%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            transparent 55%,
            rgba(0,0,0,.10)
        );

    pointer-events: none;
}


/* ==========================================================
   07 — HERO CONTENT: SHARED 1200PX ALIGNMENT
========================================================== */

.vy-policy-page .vy-policy-hero__inner {
    position: relative;
    z-index: 4;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    min-height: 325px;

    margin-inline: auto;

    padding: 142px 0 57px;
}

.vy-policy-page .vy-policy-hero__content {
    width: 100%;
    max-width: 840px;
}


/* ==========================================================
   08 — LEGAL EYEBROW
========================================================== */

.vy-policy-page .vy-policy-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 16px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.3;
    letter-spacing: .15em;

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

.vy-policy-page .vy-policy-hero__eyebrow span {
    display: block;

    flex: 0 0 35px;

    width: 35px;
    height: 3px;

    background: #E87538;

    box-shadow:
        0 3px 12px rgba(232,117,56,.23);
}


/* ==========================================================
   09 — HERO TITLE
========================================================== */

.vy-policy-page .vy-policy-hero__title {
    margin: 0;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        Impact,
        sans-serif;

    font-size: clamp(59px, 6.4vw, 94px);
    font-weight: 900;

    line-height: .94;
    letter-spacing: -.017em;

    text-transform: uppercase;

    color: #FFFFFF;

    text-shadow:
        0 4px 22px rgba(0,0,0,.16);
}


/* ==========================================================
   10 — HERO SUBTITLE
========================================================== */

.vy-policy-page .vy-policy-hero__subtitle {
    max-width: 580px;

    margin: 19px 0 0;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 19px;
    font-weight: 400;

    line-height: 1.5;

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


/* ==========================================================
   11 — DOCUMENT SECTION FOUNDATION
========================================================== */

.vy-policy-page .vy-policy-document {
    position: relative;

    width: 100%;

    background:
        radial-gradient(
            ellipse 60% 42% at 12% 5%,
            rgba(255,255,255,.94),
            transparent 85%
        ),
        linear-gradient(
            135deg,
            #FAF9F6 0%,
            #F6F5F1 100%
        );
}


/* ==========================================================
   12 — TWO-COLUMN DOCUMENT LAYOUT
========================================================== */

.vy-policy-page .vy-policy-document__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 250px)
        minmax(0, 1fr);

    align-items: start;

    gap: 32px;

    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;

    margin-inline: auto;

    padding: 43px 0 115px;
}


/* ==========================================================
   13 — STICKY LEGAL NAVIGATION
========================================================== */

.vy-policy-page .vy-policy-document__sidebar {
    position: sticky;
    top: 112px;

    min-width: 0;
}

.vy-policy-page .vy-policy-document__navigation {
    display: flex;
    flex-direction: column;

    width: 100%;

    box-shadow:
        0 12px 32px rgba(9,25,38,.045);
}


/* ==========================================================
   14 — NAVIGATION LINKS
========================================================== */

.vy-policy-page .vy-policy-document__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-width: 0;
    min-height: 62px;

    padding: 17px 20px;

    border: 1px solid rgba(12,32,48,.045);

    background: #FFFFFF;

    font-family: "Barlow", Arial, sans-serif;

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

    line-height: 1.35;

    color: #253A4B;
    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.vy-policy-page
.vy-policy-document__nav-link + .vy-policy-document__nav-link {
    border-top: 0;
}

.vy-policy-page .vy-policy-document__nav-link.is-active {
    background: linear-gradient(
        110deg,
        #0B1D2D,
        #153347
    );

    border-color: #0B1D2D;

    color: #FFFFFF;

    box-shadow:
        0 9px 22px rgba(11,29,45,.13);
}

.vy-policy-page .vy-policy-document__nav-arrow {
    flex: 0 0 auto;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;

    color: #6B7A86;

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

.vy-policy-page .is-active .vy-policy-document__nav-arrow {
    color: #E87538;
}


/* ==========================================================
   15 — NAVIGATION INTERACTION
========================================================== */

@media (hover: hover) {

    .vy-policy-page
    .vy-policy-document__nav-link:not(.is-active):hover {
        background: #F4F5F4;
        color: #E87538;
    }

    .vy-policy-page
    .vy-policy-document__nav-link:hover
    .vy-policy-document__nav-arrow {
        transform: translateX(4px);
        color: #E87538;
    }

}

.vy-policy-page .vy-policy-document__nav-link:focus-visible {
    outline: 3px solid #E87538;
    outline-offset: 3px;
}


/* ==========================================================
   16 — MAIN POLICY DOCUMENT CARD
========================================================== */

.vy-policy-page .vy-policy-document__card {
    min-width: 0;
    width: 100%;

    margin: 0;
    padding: 30px 35px 40px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #FEFDFC 100%
        );

    border: 1px solid rgba(11,30,45,.045);
    border-radius: 3px;

    box-shadow:
        0 20px 55px rgba(11,30,45,.055),
        0 5px 15px rgba(11,30,45,.025),
        inset 0 1px 0 rgba(255,255,255,.90);
}


/* ==========================================================
   17 — DOCUMENT INTRODUCTION
========================================================== */

.vy-policy-page .vy-policy-document__intro {
    padding-bottom: 15px;
}

.vy-policy-page .vy-policy-document__date {
    margin: 0 0 16px;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    color: #6D7B87;
}

.vy-policy-page .vy-policy-document__intro p:not(.vy-policy-document__date) {
    margin: 0 0 7px;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.65;

    color: #405367;
}


/* ==========================================================
   18 — INDIVIDUAL NUMBERED POLICY SECTIONS
========================================================== */

.vy-policy-page .vy-policy-document__section {
    display: grid;

    grid-template-columns:
        30px minmax(0, 1fr);

    align-items: start;

    column-gap: 17px;

    width: 100%;

    margin: 0;

    padding: 21px 0 20px;

    border-top:
        1px solid rgba(13,35,52,.145);
}


/* ==========================================================
   19 — ORANGE NUMBERING
========================================================== */

.vy-policy-page .vy-policy-document__number {
    margin: 0;
    padding-top: 1px;

    font-family:
        "Barlow Condensed",
        "Barlow",
        sans-serif;

    font-size: 28px;
    font-weight: 900;

    line-height: 1;

    color: #E87538;

    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   20 — SECTION TYPOGRAPHY
========================================================== */

.vy-policy-page .vy-policy-document__section-body {
    min-width: 0;
}

.vy-policy-page .vy-policy-document__section-body h2 {
    margin: 0 0 9px;
    padding: 0;

    font-family:
        "Barlow Condensed",
        "Barlow",
        sans-serif;

    font-size: clamp(25px, 2.05vw, 32px);
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -.008em;

    text-transform: uppercase;

    color: #102537;
}

.vy-policy-page .vy-policy-document__section-body p {
    margin: 0 0 13px;
    padding: 0;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.67;

    color: #485869;

    overflow-wrap: anywhere;
}

.vy-policy-page .vy-policy-document__section-body p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   21 — POLICY LISTS
========================================================== */

.vy-policy-page .vy-policy-document__section-body ul {
    margin: 8px 0 16px;

    padding-left: 22px;

    list-style: disc;
}

.vy-policy-page .vy-policy-document__section-body li {
    padding-left: 2px;

    margin-bottom: 5px;

    font-family: "Barlow", Arial, sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.53;

    color: #485869;
}

.vy-policy-page .vy-policy-document__section-body li::marker {
    color: #E87538;
}


/* ==========================================================
   22 — DOCUMENT LINKS
========================================================== */

.vy-policy-page .vy-policy-document__section-body a {
    color: #D6652E;

    text-decoration: none;
    text-underline-offset: 3px;

    overflow-wrap: anywhere;

    transition: color .2s ease;
}

.vy-policy-page .vy-policy-document__section-body a:hover {
    color: #A94A21;
    text-decoration: underline;
}

.vy-policy-page .vy-policy-document__section-body a:focus-visible {
    outline: 2px solid #E87538;
    outline-offset: 3px;
}


/* ==========================================================
   23 — FINAL PORTFOLIO DISCLOSURE
========================================================== */

.vy-policy-page .vy-policy-document__disclosure {
    margin: 17px 0 0;
    padding: 20px 23px;

    background: #F6F5F1;

    border-left: 3px solid #E87538;

    font-family: "Barlow", Arial, sans-serif;

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

    color: #52616E;
}


/* ==========================================================
   24 — SUBTLE PAGE ENTRANCE ANIMATIONS
========================================================== */

@keyframes vyPolicyFadeUp {
    from {
        opacity: 0;
        transform: translateY(13px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vyPolicyPhotoReveal {
    from {
        transform: scale(1.055);
    }

    to {
        transform: scale(1.025);
    }
}

@media (prefers-reduced-motion: no-preference) {

    .vy-policy-page .vy-policy-hero__content {
        animation:
            vyPolicyFadeUp .8s ease-out both;
    }

    .vy-policy-page .vy-policy-hero__image {
        animation:
            vyPolicyPhotoReveal
            1.4s
            cubic-bezier(.22,1,.36,1)
            both;
    }

}


/* ==========================================================
   25 — TABLET
   900px TO 1100px
========================================================== */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    .vy-policy-page .vy-policy-hero__inner {
        width: calc(100% - 56px);

        min-height: 310px;

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

    .vy-policy-page .vy-policy-hero__title {
        font-size: clamp(60px, 7vw, 80px);
    }

    .vy-policy-page .vy-policy-document__inner {
        width: calc(100% - 56px);

        grid-template-columns:
            minmax(0, 220px)
            minmax(0, 1fr);

        gap: 23px;

        padding-top: 35px;
        padding-bottom: 85px;
    }

    .vy-policy-page .vy-policy-document__nav-link {
        padding: 15px 16px;

        font-size: 14px;
    }

    .vy-policy-page .vy-policy-document__card {
        padding: 26px 27px 35px;
    }

    .vy-policy-page .vy-policy-document__section {
        column-gap: 13px;
    }

}


/* ==========================================================
   26 — SMALL TABLET
   600px TO 899px
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    .vy-policy-page .vy-policy-hero__inner {
        width: calc(100% - 56px);

        min-height: 0;

        padding-top: 153px;
        padding-bottom: 59px;
    }

    .vy-policy-page .vy-policy-hero__title {
        font-size: clamp(57px, 8vw, 75px);
    }

    .vy-policy-page .vy-policy-hero__subtitle {
        font-size: 18px;
    }

    .vy-policy-page .vy-policy-hero__picture {
        width: 90%;
    }

    .vy-policy-page .vy-policy-hero__image {
        object-position: 61% center;
    }

    .vy-policy-page .vy-policy-document__inner {
        display: grid;

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

        gap: 25px;

        width: calc(100% - 56px);

        padding-top: 35px;
        padding-bottom: 78px;
    }

    .vy-policy-page .vy-policy-document__sidebar {
        position: static;
    }

    .vy-policy-page .vy-policy-document__navigation {
        display: grid;

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

    .vy-policy-page .vy-policy-document__nav-link {
        min-height: 62px;
    }

    .vy-policy-page
    .vy-policy-document__nav-link + .vy-policy-document__nav-link {
        border-top: 1px solid rgba(12,32,48,.045);
    }

    .vy-policy-page .vy-policy-document__card {
        padding: 32px 36px 43px;
    }

}


/* ==========================================================
   27 — MOBILE
   599px AND BELOW
========================================================== */

@media screen and (max-width: 599px) {

    /* HERO */

    .vy-policy-page .vy-policy-hero__inner {
        width: calc(100% - 38px);

        min-height: 0;

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

    .vy-policy-page .vy-policy-hero__eyebrow {
        gap: 11px;

        margin-bottom: 17px;

        font-size: 11px;
    }

    .vy-policy-page .vy-policy-hero__eyebrow span {
        flex-basis: 27px;

        width: 27px;
        height: 2px;
    }

    .vy-policy-page .vy-policy-hero__title {
        font-size: clamp(48px, 12vw, 66px);
        line-height: .97;
    }

    .vy-policy-page .vy-policy-hero__subtitle {
        margin-top: 17px;

        font-size: 16px;
        line-height: 1.5;
    }

    /* KEEP HERO TEXT LEGIBLE */

    .vy-policy-page .vy-policy-hero__picture {
        width: 100%;
    }

    .vy-policy-page .vy-policy-hero__image {
        object-position: 67% center;
    }

    .vy-policy-page .vy-policy-hero__scrim {
        background:
            linear-gradient(
                90deg,
                rgba(8,27,41,.98) 0%,
                rgba(8,27,41,.92) 40%,
                rgba(8,27,41,.60) 100%
            );
    }

    .vy-policy-page .vy-policy-hero__facet {
        clip-path: polygon(
            60% 0,
            79% 0,
            100% 100%,
            83% 100%
        );
    }

    /* DOCUMENT */

    .vy-policy-page .vy-policy-document__inner {
        display: grid;

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

        gap: 19px;

        width: calc(100% - 30px);

        padding-top: 28px;
        padding-bottom: 66px;
    }

    .vy-policy-page .vy-policy-document__sidebar {
        position: static;
    }

    .vy-policy-page .vy-policy-document__navigation {
        display: grid;

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

        box-shadow:
            0 9px 25px rgba(9,25,38,.045);
    }

    .vy-policy-page .vy-policy-document__nav-link {
        min-height: 55px;

        padding: 14px 17px;

        font-size: 15px;
    }

    /* WHITE CARD */

    .vy-policy-page .vy-policy-document__card {
        padding: 25px 19px 32px;

        border-radius: 3px;
    }

    .vy-policy-page .vy-policy-document__date {
        font-size: 13px;
    }

    .vy-policy-page .vy-policy-document__intro p:not(.vy-policy-document__date) {
        font-size: 15px;
        line-height: 1.65;
    }

    /* SECTION CONTENT */

    .vy-policy-page .vy-policy-document__section {
        grid-template-columns:
            27px minmax(0, 1fr);

        column-gap: 11px;

        padding: 22px 0 20px;
    }

    .vy-policy-page .vy-policy-document__number {
        font-size: 25px;
    }

    .vy-policy-page .vy-policy-document__section-body h2 {
        font-size: clamp(23px, 6.4vw, 29px);
        line-height: 1.12;
    }

    .vy-policy-page .vy-policy-document__section-body p,
    .vy-policy-page .vy-policy-document__section-body li {
        font-size: 15px;
        line-height: 1.68;
    }

    .vy-policy-page .vy-policy-document__section-body ul {
        padding-left: 19px;
    }

    .vy-policy-page .vy-policy-document__disclosure {
        margin-top: 12px;
        padding: 16px;

        font-size: 14px;
    }

}


/* ==========================================================
   28 — VERY SMALL MOBILE
   370px AND BELOW
========================================================== */

@media screen and (max-width: 370px) {

    .vy-policy-page .vy-policy-hero__inner {
        width: calc(100% - 34px);

        padding-top: 137px;
        padding-bottom: 46px;
    }

    .vy-policy-page .vy-policy-hero__title {
        font-size: 46px;
    }

    .vy-policy-page .vy-policy-document__inner {
        width: calc(100% - 22px);
    }

    .vy-policy-page .vy-policy-document__card {
        padding: 22px 14px 28px;
    }

    .vy-policy-page .vy-policy-document__section {
        grid-template-columns:
            24px minmax(0, 1fr);

        column-gap: 9px;
    }

    .vy-policy-page .vy-policy-document__number {
        font-size: 23px;
    }

    .vy-policy-page .vy-policy-document__section-body h2 {
        font-size: 22px;
    }

}


/* ==========================================================
   29 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .vy-policy-page .vy-policy-hero__content,
    .vy-policy-page .vy-policy-hero__image,
    .vy-policy-page .vy-policy-document__nav-link,
    .vy-policy-page .vy-policy-document__nav-arrow {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }

    .vy-policy-page .vy-policy-hero__image {
        transform: none !important;
    }

}



/* =====================================================
   VEYRON INDUSTRIAL — TERMS & CONDITIONS

   Reuses all existing Privacy Policy styles.

   Only adjusts the longer hero heading
   for desktop / tablet / mobile.
===================================================== */


/* DESKTOP */

@media screen and (min-width: 1101px) {

    .vy-terms-page .vy-policy-hero__title {
        max-width: 950px;

        font-size: clamp(64px, 5.6vw, 84px);
        line-height: .96;

        text-wrap: balance;
    }

}


/* TABLET */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    .vy-terms-page .vy-policy-hero__title {
        max-width: 100%;

        font-size: clamp(54px, 7.2vw, 74px);
        line-height: .98;

        text-wrap: balance;
    }

}


/* MOBILE */

@media screen and (max-width: 599px) {

    .vy-terms-page .vy-policy-hero__title {
        max-width: 100%;

        font-size: clamp(42px, 10.1vw, 57px);
        line-height: 1;

        overflow-wrap: normal;
        text-wrap: balance;
    }

}


/* VERY SMALL MOBILE */

@media screen and (max-width: 370px) {

    .vy-terms-page .vy-policy-hero__title {
        font-size: clamp(38px, 10vw, 43px);
    }

}



/* =====================================================
   VEYRON FOOTER — LOWER ROW
   Copyright on left / Back to Top on right
===================================================== */

.vy-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

@media screen and (max-width: 599px) {

    .vy-footer__bottom {
        align-items: flex-start;
        gap: 18px;
    }

}



/* SOLUTIONS — SCROLL ANCHOR OFFSET */

.vy-solutions-page #industrial-infrastructure,
.vy-solutions-page #systems-integration,
.vy-solutions-page #maintenance-reliability,
.vy-solutions-page #project-delivery {
    scroll-margin-top: 100px;
}


/* ===== Company page: Our Approach touches Work With Veyron (no gap) ===== */
body.vy-site .vy-approach { margin-bottom: 0 !important; padding-bottom: 0 !important; }
body.vy-site .vy-approach__inner { padding-bottom: 0 !important; }
body.vy-site .vy-company-cta { margin-top: 0 !important; }
body.vy-site .vy-company-cta::before { display: none !important; }
body.vy-site .vy-approach + .vy-company-cta { margin-top: -1px !important; }