/*
|--------------------------------------------------------------------------
| IRISH HEADLIGHT REPAIR
| Design System
|--------------------------------------------------------------------------
*/

:root {

    --black: #070909;
    --black-soft: #0b0e0d;

    --anthracite: #121715;
    --anthracite-2: #181e1b;
    --anthracite-3: #202723;

    --gray-100: #f3f5f4;
    --gray-300: #c7ceca;
    --gray-500: #808a85;
    --gray-700: #47504c;

    --white: #ffffff;

    --green: #7cff4f;
    --green-soft: #b1ff96;
    --green-dark: #45bb20;

    --border: rgba(255,255,255,.10);

    --container: 1320px;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;

    --header-height: 86px;

}


/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

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

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(124,255,79,.055),
            transparent 34rem
        ),
        var(--black);

    color: var(--white);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;

}

body.menu-open {
    overflow: hidden;
}

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

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

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

button {
    color: inherit;
}

svg {
    display: block;
}

.container {

    width: min(
        calc(100% - 64px),
        var(--container)
    );

    margin-inline: auto;

}


/*
|--------------------------------------------------------------------------
| TOP BAR
|--------------------------------------------------------------------------
*/

.site-topbar {

    position: relative;
    z-index: 110;

    min-height: 42px;

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

    background: #050706;

    color: var(--gray-300);

}

.site-topbar__inner {

    min-height: 42px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 24px;

}

.site-topbar__item {

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

    gap: 8px;

    min-width: 0;

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

    letter-spacing: .015em;

    white-space: nowrap;

}

.site-topbar__item svg {

    width: 14px;
    height: 14px;

    flex: 0 0 auto;

    fill: none;
    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.site-topbar__separator {

    display: block;

    width: 3px;
    height: 3px;

    margin-inline: 3px;

    border-radius: 50%;

    background: var(--gray-700);

}

.site-topbar__hours {

    justify-self: center;

}

.site-topbar__phone {

    justify-self: end;

    transition:
        color .2s ease,
        opacity .2s ease;

}

.site-topbar__phone:hover {
    color: var(--green);
}


/*
|--------------------------------------------------------------------------
| MAIN HEADER
|--------------------------------------------------------------------------
*/

.site-header {

    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom: 1px solid transparent;

    background: rgba(7,9,9,.88);

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

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.site-header.is-scrolled {

    border-color: rgba(255,255,255,.07);

    background: rgba(7,9,9,.95);

    box-shadow:
        0 18px 50px rgba(0,0,0,.22);

}

.site-header__inner {

    min-height: var(--header-height);

    display: grid;

    grid-template-columns:
        minmax(225px, 1fr)
        auto
        minmax(225px, 1fr);

    align-items: center;

    gap: 34px;

}


/*
|--------------------------------------------------------------------------
| BRAND
|--------------------------------------------------------------------------
*/

.brand {

    justify-self: start;

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

    gap: 13px;

    min-width: 0;

}

.brand__mark {

    position: relative;

    width: 49px;
    height: 39px;

    flex: 0 0 auto;

}

.brand__mark svg {

    width: 100%;
    height: 100%;

    overflow: visible;

}

.brand__mark-body {

    fill: none;

    stroke: rgba(255,255,255,.92);
    stroke-width: 1.7;

}

.brand__mark-light {

    fill: rgba(124,255,79,.08);

    stroke: var(--green);
    stroke-width: 1.8;

}

.brand__beam {

    fill: none;

    stroke: var(--green);
    stroke-width: 2;

    stroke-linecap: round;

}

.brand__copy {

    display: flex;
    flex-direction: column;

    gap: 2px;

    line-height: 1;

}

.brand__primary {

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

    letter-spacing: .105em;

}

.brand__secondary {

    color: var(--gray-300);

    font-size: 8.5px;
    font-weight: 580;

    letter-spacing: .13em;

}


/*
|--------------------------------------------------------------------------
| DESKTOP NAVIGATION
|--------------------------------------------------------------------------
*/

.main-navigation {

    justify-self: center;

    display: flex;
    align-items: center;

    gap: 36px;

}

.main-navigation__link {

    position: relative;

    padding-block: 33px;

    color: var(--gray-300);

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

    letter-spacing: -.01em;

    transition: color .2s ease;

}

.main-navigation__link::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 22px;

    width: 0;
    height: 1px;

    margin: auto;

    background: var(--green);

    transition: width .22s ease;

}

.main-navigation__link:hover,
.main-navigation__link.is-active {

    color: var(--white);

}

.main-navigation__link:hover::after,
.main-navigation__link.is-active::after {

    width: 100%;

}


/*
|--------------------------------------------------------------------------
| HEADER ACTIONS
|--------------------------------------------------------------------------
*/

.site-header__actions {

    justify-self: end;

    display: flex;
    align-items: center;

    gap: 9px;

}

.header-whatsapp {

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

    gap: 8px;

    height: 46px;

    padding-inline: 15px;

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

    color: var(--gray-300);

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

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;

}

.header-whatsapp svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.header-whatsapp:hover {

    color: var(--white);

    border-color: rgba(124,255,79,.35);

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

}

.button {

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

    gap: 12px;

    border: 0;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.button--header {

    min-height: 46px;

    padding: 0 18px;

    border-radius: 12px;

    background: var(--green);

    color: #081006;

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

}

.button--header svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .2s ease;

}

.button--header:hover {

    transform: translateY(-1px);

    background: var(--green-soft);

    box-shadow:
        0 10px 28px rgba(124,255,79,.13);

}

.button--header:hover svg {
    transform: translateX(2px);
}


/*
|--------------------------------------------------------------------------
| MOBILE MENU BUTTON
|--------------------------------------------------------------------------
*/

.mobile-menu-button {

    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 6px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--anthracite);

    cursor: pointer;

}

.mobile-menu-button span {

    display: block;

    width: 18px;
    height: 1.5px;

    background: var(--white);

    transition:
        transform .25s ease,
        width .25s ease;

}

.mobile-menu-button.is-active span:first-child {
    transform: translateY(3.75px) rotate(45deg);
}

.mobile-menu-button.is-active span:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
}


/*
|--------------------------------------------------------------------------
| MOBILE NAVIGATION
|--------------------------------------------------------------------------
*/

.mobile-navigation {

    display: none;

    position: fixed;

    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 99;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(124,255,79,.08),
            transparent 20rem
        ),
        rgba(7,9,9,.985);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

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

}

.mobile-navigation.is-open {

    opacity: 1;
    visibility: visible;

    transform: none;

}

.mobile-navigation__inner {

    height: 100%;

    padding-top: 42px;
    padding-bottom: 32px;

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

}

.mobile-navigation nav {

    display: flex;
    flex-direction: column;

}

.mobile-navigation nav a {

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 18px 0;

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

    color: var(--white);

    font-size: clamp(28px, 8vw, 42px);
    font-weight: 630;

    letter-spacing: -.04em;

}

.mobile-navigation nav a span {

    width: 24px;

    color: var(--green);

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

    letter-spacing: .08em;

}

.mobile-navigation__footer {

    padding-top: 25px;

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

}

.mobile-navigation__phone {

    display: inline-block;

    margin-bottom: 12px;

    font-size: 20px;
    font-weight: 650;

}

.mobile-navigation__footer p {

    margin: 4px 0;

    color: var(--gray-500);

    font-size: 12px;

}


/*
|--------------------------------------------------------------------------
| TEMP CONTENT SPACING
|--------------------------------------------------------------------------
*/

main {
    min-height: 70vh;
}

.section,
.page-hero {

    min-height: 100px;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1120px) {

    .site-topbar__item--location span:last-child,
    .site-topbar__item--location .site-topbar__separator {
        display: none;
    }

    .site-header__inner {

        grid-template-columns: 1fr auto;

    }

    .main-navigation {
        display: none;
    }

    .header-whatsapp span {
        display: none;
    }

    .header-whatsapp {

        width: 46px;

        padding: 0;

        justify-content: center;

    }

    .mobile-menu-button {
        display: flex;
    }

    .mobile-navigation {
        display: block;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    :root {
        --header-height: 72px;
    }

    .container {

        width: min(
            calc(100% - 32px),
            var(--container)
        );

    }

    .site-topbar {
        min-height: 35px;
    }

    .site-topbar__inner {

        min-height: 35px;

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

        gap: 12px;

    }

    .site-topbar__item {

        font-size: 9.5px;

    }

    .site-topbar__item--location {

        display: none;

    }

    .site-topbar__item--hours {

        justify-self: auto;

    }

    .site-topbar__item--hours .site-topbar__separator,
    .site-topbar__item--hours span:nth-of-type(2) {

        display: none;

    }

    .site-topbar__phone {

        margin-left: auto;

    }

    .site-topbar__phone svg {

        width: 12px;
        height: 12px;

    }

    .site-header__inner {

        min-height: var(--header-height);

        gap: 12px;

    }

    .brand {

        gap: 8px;

    }

    .brand__mark {

        width: 40px;
        height: 32px;

    }

    .brand__primary {

        font-size: 14px;

    }

    .brand__secondary {

        font-size: 7px;

        letter-spacing: .08em;

    }

    .header-whatsapp {

        display: none;

    }

    .button--header {

        display: none;

    }

    .mobile-menu-button {

        width: 43px;
        height: 43px;

    }

}


/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {

    .brand__secondary {
        display: none;
    }

    .site-topbar__phone span {
        font-size: 9px;
    }

}


/*
|--------------------------------------------------------------------------
| HOME — HERO
|--------------------------------------------------------------------------
*/

.hero {

    position: relative;

    min-height: calc(100svh - 128px);

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #070909 0%,
            #070909 42%,
            rgba(7,9,9,.96) 52%,
            #0b100e 100%
        );

    isolation: isolate;

}

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

}

.hero__ambient {

    position: absolute;

    z-index: -3;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

}

.hero__ambient--one {

    width: 650px;
    height: 650px;

    top: -280px;
    right: -120px;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.12),
            transparent 68%
        );

}

.hero__ambient--two {

    width: 420px;
    height: 420px;

    left: 20%;
    bottom: -330px;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.07),
            transparent 70%
        );

}


/*
|--------------------------------------------------------------------------
| HERO MAIN GRID
|--------------------------------------------------------------------------
*/

.hero__container {

    position: relative;

    min-height: 625px;

    display: grid;

    grid-template-columns:
        minmax(430px, .92fr)
        minmax(480px, 1.08fr);

    align-items: center;

    gap: clamp(40px, 5vw, 90px);

    padding-top: 74px;
    padding-bottom: 108px;

}


/*
|--------------------------------------------------------------------------
| HERO LEFT
|--------------------------------------------------------------------------
*/

.hero__content {

    position: relative;

    z-index: 4;

    max-width: 680px;

}

.hero__eyebrow {

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

    gap: 10px;

    margin-bottom: 26px;

    color: var(--gray-300);

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

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

}

.hero__eyebrow-dot {

    position: relative;

    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px rgba(124,255,79,.08);

}

.hero__eyebrow-dot::after {

    content: "";

    position: absolute;

    inset: -6px;

    border: 1px solid rgba(124,255,79,.22);
    border-radius: inherit;

    animation:
        heroStatusPulse 2.4s ease-out infinite;

}

@keyframes heroStatusPulse {

    0% {
        opacity: 1;
        transform: scale(.55);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.45);
    }

}


.hero__title {

    max-width: 720px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            57px,
            5.15vw,
            84px
        );

    font-weight: 610;

    line-height: .94;

    letter-spacing: -.058em;

    text-wrap: balance;

}

.hero__title span {

    position: relative;

    display: inline-block;

    color: var(--green);

}

.hero__title span::after {

    content: "";

    position: absolute;

    right: 1%;
    bottom: -7px;
    left: 1%;

    height: 1px;

    opacity: .42;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--green) 20%,
            var(--green) 80%,
            transparent
        );

}


.hero__description {

    max-width: 590px;

    margin:
        30px 0 0;

    color: #a5aeaa;

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

    line-height: 1.75;

    letter-spacing: -.012em;

}


/*
|--------------------------------------------------------------------------
| HERO CTA
|--------------------------------------------------------------------------
*/

.hero__actions {

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

    gap: 11px;

    margin-top: 34px;

}

.hero-button {

    min-height: 53px;

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

    gap: 12px;

    padding-inline: 22px;

    border-radius: 13px;

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

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.hero-button--primary {

    min-width: 181px;

    background: var(--green);

    color: #071005;

    box-shadow:
        0 10px 36px rgba(124,255,79,.11);

}

.hero-button--primary:hover {

    transform: translateY(-2px);

    background: var(--green-soft);

    box-shadow:
        0 15px 44px rgba(124,255,79,.17);

}

.hero-button--primary > svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .2s ease;

}

.hero-button--primary:hover > svg {
    transform: translateX(3px);
}

.hero-button--secondary {

    min-width: 164px;

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

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

    color: var(--gray-300);

}

.hero-button--secondary:hover {

    border-color: rgba(255,255,255,.23);

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

    color: var(--white);

}

.hero-button__play {

    width: 27px;
    height: 27px;

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

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

    color: var(--green);

}

.hero-button__play svg {

    width: 12px;
    height: 12px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| HERO TRUST
|--------------------------------------------------------------------------
*/

.hero__trust {

    display: flex;
    align-items: center;

    gap: 15px;

    margin-top: 43px;

}

.hero__trust-icons {

    display: flex;

}

.hero__trust-icons span {

    width: 33px;
    height: 33px;

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

    margin-left: -6px;

    border: 2px solid var(--black);
    border-radius: 50%;

    background: var(--anthracite-2);

}

.hero__trust-icons span:first-child {
    margin-left: 0;
}

.hero__trust-icons svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.hero__trust-copy {

    display: flex;
    flex-direction: column;

    gap: 2px;

}

.hero__trust-copy strong {

    color: var(--white);

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

}

.hero__trust-copy span {

    color: var(--gray-500);

    font-size: 10px;

}


/*
|--------------------------------------------------------------------------
| HERO RIGHT VISUAL
|--------------------------------------------------------------------------
*/

.hero__visual {

    position: relative;

    align-self: stretch;

    min-height: 570px;

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

}

.hero__visual-frame {

    position: absolute;

    top: 32px;
    right: -72px;
    bottom: 54px;
    left: 0;

    overflow: hidden;

    border-radius:
        220px 0 0 28px;

    background:
        radial-gradient(
            circle at 60% 45%,
            #26302c,
            #101512 48%,
            #080a09 78%
        );

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.045),
        -45px 30px 100px rgba(0,0,0,.28);

}

.hero__visual-grid {

    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: .15;

    background-image:

        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        radial-gradient(
            circle at 60% 40%,
            #000,
            transparent 76%
        );

}

.hero__image {

    position: absolute;

    z-index: 2;

    inset: 0;

    width: 100%;
    height: 100%;

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

    filter:
        brightness(.79)
        contrast(1.10)
        saturate(.83);

    transform: scale(1.015);

}

.hero__visual-shade {

    position: absolute;

    z-index: 3;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(7,9,9,.83) 0%,
            rgba(7,9,9,.26) 28%,
            transparent 58%
        ),

        linear-gradient(
            0deg,
            rgba(7,9,9,.6),
            transparent 38%
        );

}


/*
|--------------------------------------------------------------------------
| FALLBACK CAR
|--------------------------------------------------------------------------
*/

.hero__image-fallback {

    position: absolute;

    z-index: 2;

    inset: 0;

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

}

.hero__image-fallback::before {

    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    right: 8%;
    top: 28%;

    border-radius: 50%;

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

    filter: blur(75px);

}

.hero__image-fallback svg {

    position: relative;

    width: 112%;

    transform: translate(4%, 5%);

}

.hero-fallback-car {

    fill: #151c18;

    stroke: rgba(255,255,255,.15);
    stroke-width: 2;

}

.hero-fallback-glass {

    fill: #090d0b;

    stroke: rgba(255,255,255,.08);
    stroke-width: 2;

}

.hero-fallback-light {

    fill: rgba(124,255,79,.10);

    stroke: var(--green);
    stroke-width: 3;

    filter:
        drop-shadow(
            0 0 13px rgba(124,255,79,.65)
        );

}

.hero-fallback-beam {

    fill: none;

    stroke: url(#none);
    stroke: rgba(124,255,79,.23);
    stroke-width: 15;

}

.hero-fallback-wheel {

    fill: #090b0a;

    stroke: #333a36;
    stroke-width: 18;

}


/*
|--------------------------------------------------------------------------
| FLOATING CARDS
|--------------------------------------------------------------------------
*/

.hero__floating-card,
.hero__location-card {

    position: absolute;

    z-index: 5;

    display: flex;
    align-items: center;

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

    background: rgba(13,17,15,.78);

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

    box-shadow:
        0 17px 50px rgba(0,0,0,.24);

}

.hero__floating-card {

    top: 31px;
    right: 105px;

    gap: 11px;

    min-width: 230px;

    padding: 13px 15px;

    border-radius: 14px;

}

.hero__floating-icon {

    width: 34px;
    height: 34px;

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

    flex: 0 0 auto;

    border-radius: 10px;

    background: rgba(124,255,79,.10);

}

.hero__floating-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.hero__floating-card > span:last-child,
.hero__location-card > span:last-child {

    display: flex;
    flex-direction: column;

    gap: 3px;

}

.hero__floating-card small,
.hero__location-card small {

    color: var(--gray-500);

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

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

}

.hero__floating-card strong,
.hero__location-card strong {

    color: var(--white);

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

}


.hero__location-card {

    right: 74px;
    bottom: 30px;

    gap: 12px;

    padding: 13px 16px;

    border-radius: 13px;

}

.hero__location-pulse {

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px rgba(124,255,79,.10);

}


/*
|--------------------------------------------------------------------------
| HERO METRICS
|--------------------------------------------------------------------------
*/

.hero__metrics {

    position: relative;

    z-index: 8;

    min-height: 100px;

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

    margin-top: -100px;

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

    background:
        linear-gradient(
            90deg,
            rgba(7,9,9,.84),
            rgba(10,14,12,.68)
        );

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

}

.hero-metric {

    min-height: 100px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding:
        22px 28px;

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

}

.hero-metric:first-child {
    padding-left: 0;
}

.hero-metric--last {
    border-right: 0;
}

.hero-metric strong {

    color: var(--white);

    font-size: 28px;
    font-weight: 580;

    line-height: 1;

    letter-spacing: -.04em;

}

.hero-metric strong span {
    color: var(--green);
}

.hero-metric p {

    margin: 0;

    color: var(--gray-500);

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

    line-height: 1.45;

    letter-spacing: .015em;

    text-transform: uppercase;

}

.hero-metric__status {

    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 6px rgba(124,255,79,.08);

}


/*
|--------------------------------------------------------------------------
| SCROLL INDICATOR
|--------------------------------------------------------------------------
*/

.hero__scroll {

    position: absolute;

    z-index: 10;

    right: 24px;
    top: 50%;

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

    gap: 10px;

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

    transform:
        translateY(-50%);

}

.hero__scroll span {

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

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

    writing-mode: vertical-rl;

}

.hero__scroll svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| HERO — LARGE TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1180px) {

    .hero__container {

        grid-template-columns:
            minmax(380px, .95fr)
            minmax(410px, 1.05fr);

    }

    .hero__visual-frame {
        right: -42px;
    }

    .hero__title {
        font-size: clamp(52px, 5.8vw, 72px);
    }

    .hero__floating-card {
        right: 60px;
    }

}


/*
|--------------------------------------------------------------------------
| HERO — TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .hero {

        min-height: auto;

    }

    .hero__container {

        min-height: auto;

        grid-template-columns: 1fr;

        gap: 42px;

        padding-top: 72px;
        padding-bottom: 135px;

    }

    .hero__content {

        max-width: 680px;

    }

    .hero__title {

        max-width: 660px;

        font-size:
            clamp(
                54px,
                9vw,
                75px
            );

    }

    .hero__description {

        max-width: 600px;

    }

    .hero__visual {

        min-height: 510px;

    }

    .hero__visual-frame {

        inset:
            0 -32px 0 8%;

        border-radius:
            160px 0 0 24px;

    }

    .hero__metrics {

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

        margin-top: -85px;

    }

    .hero-metric {

        min-height: 85px;

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

    }

    .hero-metric:nth-child(2) {
        border-right: 0;
    }

    .hero-metric:first-child {
        padding-left: 22px;
    }

    .hero__scroll {
        display: none;
    }

}


/*
|--------------------------------------------------------------------------
| HERO — MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .hero::before {

        background-size:
            44px 44px;

    }

    .hero__container {

        gap: 35px;

        padding-top: 53px;
        padding-bottom: 112px;

    }

    .hero__eyebrow {

        margin-bottom: 20px;

        font-size: 9px;

        letter-spacing: .09em;

    }

    .hero__title {

        font-size:
            clamp(
                46px,
                14.2vw,
                64px
            );

        line-height: .97;

        letter-spacing: -.06em;

    }

    .hero__title span::after {
        bottom: -3px;
    }

    .hero__description {

        margin-top: 25px;

        font-size: 13px;

        line-height: 1.7;

    }

    .hero__actions {

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

        margin-top: 29px;

    }

    .hero-button {

        width: 100%;

        min-height: 54px;

    }

    .hero__trust {

        margin-top: 30px;

    }

    .hero__trust-copy span {
        font-size: 9px;
    }

    .hero__visual {

        min-height: 360px;

    }

    .hero__visual-frame {

        right: -16px;
        left: 5%;

        border-radius:
            100px 0 0 20px;

    }

    .hero__floating-card {

        top: 17px;
        right: 18px;

        min-width: 195px;

    }

    .hero__location-card {

        right: 17px;
        bottom: 16px;

    }

    .hero__metrics {

        grid-template-columns:
            1fr 1fr;

        width: 100%;

        margin-top: -78px;

    }

    .hero-metric {

        min-height: 78px;

        gap: 10px;

        padding:
            16px 16px;

    }

    .hero-metric:first-child {
        padding-left: 16px;
    }

    .hero-metric strong {
        font-size: 23px;
    }

    .hero-metric p {
        font-size: 7.5px;
    }

}


/*
|--------------------------------------------------------------------------
| HERO — SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {

    .hero__title {

        font-size: 43px;

    }

    .hero__visual {
        min-height: 320px;
    }

    .hero__floating-card {

        min-width: auto;

        left: 18px;

    }

}


/*
|--------------------------------------------------------------------------
| HERO ENTRANCE
|--------------------------------------------------------------------------
*/

.js .hero__eyebrow,
.js .hero__title,
.js .hero__description,
.js .hero__actions,
.js .hero__trust {

    opacity: 0;

    transform: translateY(14px);

}

.js .hero__visual {

    opacity: 0;

    transform: translateX(18px);

}

.js .hero.is-ready .hero__eyebrow,
.js .hero.is-ready .hero__title,
.js .hero.is-ready .hero__description,
.js .hero.is-ready .hero__actions,
.js .hero.is-ready .hero__trust,
.js .hero.is-ready .hero__visual {

    opacity: 1;

    transform: none;

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.75,.2,1);

}

.js .hero.is-ready .hero__title {
    transition-delay: .06s;
}

.js .hero.is-ready .hero__description {
    transition-delay: .11s;
}

.js .hero.is-ready .hero__actions {
    transition-delay: .16s;
}

.js .hero.is-ready .hero__trust {
    transition-delay: .21s;
}

.js .hero.is-ready .hero__visual {
    transition-delay: .10s;
}


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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}


/*
|--------------------------------------------------------------------------
| HERO VISIBILITY SAFETY FIX
|--------------------------------------------------------------------------
|
| Contentul important NU trebuie să depindă de JavaScript pentru a fi
| vizibil. Animațiile sunt enhancement, nu condiție de randare.
|
*/

.hero__eyebrow,
.hero__title,
.hero__description,
.hero__actions,
.hero__trust,
.hero__visual,
.js .hero__eyebrow,
.js .hero__title,
.js .hero__description,
.js .hero__actions,
.js .hero__trust,
.js .hero__visual {

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

}


/*
|--------------------------------------------------------------------------
| HERO LAYER SAFETY
|--------------------------------------------------------------------------
*/

.site-topbar {
    position: relative;
    z-index: 1000;
}

.site-header {
    z-index: 900;
}

.hero {
    position: relative;
    z-index: 1;
}

.hero__container,
.hero__content {
    position: relative;
    z-index: 10;
}

.hero__visual {
    z-index: 2;
}

.hero__visual-frame {
    z-index: 1;
}


/*
|--------------------------------------------------------------------------
| DEBUG/FIX — PREVENT VISUAL FROM ESCAPING HERO
|--------------------------------------------------------------------------
*/

.hero__visual {
    overflow: hidden;
}

.hero__visual-frame {
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| HEADER VISIBILITY SAFETY
|--------------------------------------------------------------------------
*/

.site-topbar,
.site-header {

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

}

.site-header__inner {

    position: relative;
    z-index: 5;

}


/*
|--------------------------------------------------------------------------
| SECTION GLOBALS
|--------------------------------------------------------------------------
*/

.section-kicker {

    margin:
        0 0 18px;

    color: var(--green);

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

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

}


/*
|--------------------------------------------------------------------------
| SERVICES INTRO
|--------------------------------------------------------------------------
*/

.services-intro {

    position: relative;

    padding:
        135px 0 68px;

    background: var(--black);

}

.services-intro__grid {

    display: grid;

    grid-template-columns:
        minmax(330px, .86fr)
        minmax(500px, 1.14fr);

    gap:
        clamp(
            70px,
            10vw,
            160px
        );

    align-items: start;

}

.services-intro__heading h2 {

    max-width: 510px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            44px,
            4.4vw,
            68px
        );

    font-weight: 590;

    line-height: .99;

    letter-spacing: -.052em;

}

.services-intro__heading h2 span {

    display: block;

    color: var(--green);

}

.services-intro__content {

    max-width: 635px;

    padding-top: 26px;

}

.services-intro__lead {

    margin: 0;

    color: #9aa49f;

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

    line-height: 1.8;

    letter-spacing: -.01em;

}

.services-intro__points {

    display: grid;

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

    gap:
        13px 34px;

    margin-top: 30px;

}

.services-intro__points span {

    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--gray-300);

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

}

.services-intro__points i {

    width: 5px;
    height: 5px;

    display: block;

    flex: 0 0 auto;

    border-radius: 1px;

    background: var(--green);

    box-shadow:
        0 0 12px rgba(124,255,79,.3);

}


/*
|--------------------------------------------------------------------------
| HOME SERVICES
|--------------------------------------------------------------------------
*/

.home-services {

    position: relative;

    padding:
        35px 0 130px;

    background: var(--black);

}

.home-services__list {

    display: flex;
    flex-direction: column;

    gap: 22px;

}


/*
|--------------------------------------------------------------------------
| SERVICE FEATURE CARD
|--------------------------------------------------------------------------
*/

.service-feature-card {

    position: relative;

    min-height: 375px;

    display: grid;

    grid-template-columns:
        minmax(350px, .84fr)
        minmax(500px, 1.16fr);

    overflow: hidden;

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

    border-radius: 25px;

    background:
        linear-gradient(
            110deg,
            #121614,
            #0e1210
        );

    transition:
        border-color .28s ease,
        transform .28s ease,
        box-shadow .28s ease;

}

.service-feature-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(124,255,79,.15);

    box-shadow:
        0 30px 70px rgba(0,0,0,.20);

}


/*
|--------------------------------------------------------------------------
| CARD CONTENT
|--------------------------------------------------------------------------
*/

.service-feature-card__content {

    position: relative;

    z-index: 5;

    padding:
        52px
        clamp(35px, 4vw, 62px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

}

.service-feature-card__number {

    margin-bottom: 27px;

    color: var(--gray-300);

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

    letter-spacing: .07em;

}

.service-feature-card__number span {

    margin-left: 3px;

    color: var(--gray-700);

}

.service-feature-card h3 {

    max-width: 470px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            26px,
            2.5vw,
            38px
        );

    font-weight: 570;

    line-height: 1.08;

    letter-spacing: -.04em;

}

.service-feature-card__content > p {

    max-width: 470px;

    margin:
        22px 0 0;

    color: #89938e;

    font-size: 12px;

    line-height: 1.7;

}

.service-feature-card__link {

    min-height: 41px;

    margin-top: 30px;

    padding:
        0 15px;

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

    gap: 13px;

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

    border-radius: 10px;

    color: var(--gray-100);

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

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;

}

.service-feature-card__link svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .2s ease;

}

.service-feature-card__link:hover {

    border-color:
        rgba(124,255,79,.34);

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

}

.service-feature-card__link:hover svg {
    transform: translateX(3px);
}


/*
|--------------------------------------------------------------------------
| CARD VISUAL
|--------------------------------------------------------------------------
*/

.service-feature-card__visual {

    position: relative;

    min-height: 100%;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 60% 50%,
            rgba(124,255,79,.10),
            transparent 38%
        ),

        #161b18;

}

.service-feature-card__visual::before {

    content: "";

    position: absolute;

    z-index: 3;

    inset: 0;

    opacity: .13;

    background-image:

        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

    pointer-events: none;

}

.service-feature-card__visual img {

    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.78);

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        filter .4s ease;

}

.service-feature-card:hover
.service-feature-card__visual img {

    transform: scale(1.025);

    filter:
        brightness(.77)
        contrast(1.08)
        saturate(.85);

}

.service-feature-card__overlay {

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(14,18,16,.96) 0%,
            rgba(14,18,16,.50) 24%,
            transparent 60%
        ),

        linear-gradient(
            0deg,
            rgba(7,9,9,.31),
            transparent 50%
        );

}

.service-feature-card__tag {

    position: absolute;

    z-index: 5;

    right: 21px;
    bottom: 20px;

    padding:
        8px 11px;

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

    border-radius: 9px;

    background:
        rgba(7,9,9,.66);

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

    backdrop-filter:
        blur(10px);

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

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

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

}


/*
|--------------------------------------------------------------------------
| SERVICE FALLBACK
|--------------------------------------------------------------------------
*/

.service-feature-card__fallback {

    position: absolute;

    z-index: 1;

    inset: 0;

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

}

.service-feature-card__fallback::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(124,255,79,.075);

    filter: blur(65px);

}

.service-feature-card__fallback svg {

    position: relative;

    width: min(82%, 540px);

}

.service-feature-card__fallback path {

    fill: #1e2521;

    stroke:
        rgba(255,255,255,.10);

    stroke-width: 2;

}

.service-feature-card__fallback
.service-feature-card__fallback-light {

    fill:
        rgba(124,255,79,.07);

    stroke: var(--green);

    filter:
        drop-shadow(
            0 0 15px rgba(124,255,79,.42)
        );

}


/*
|--------------------------------------------------------------------------
| ALTERNATING CARDS
|--------------------------------------------------------------------------
*/

.service-feature-card:nth-child(even) {

    grid-template-columns:
        minmax(500px, 1.16fr)
        minmax(350px, .84fr);

}

.service-feature-card:nth-child(even)
.service-feature-card__content {

    grid-column: 2;
    grid-row: 1;

}

.service-feature-card:nth-child(even)
.service-feature-card__visual {

    grid-column: 1;
    grid-row: 1;

}

.service-feature-card:nth-child(even)
.service-feature-card__overlay {

    background:

        linear-gradient(
            270deg,
            rgba(14,18,16,.96) 0%,
            rgba(14,18,16,.50) 24%,
            transparent 60%
        ),

        linear-gradient(
            0deg,
            rgba(7,9,9,.31),
            transparent 50%
        );

}

.service-feature-card:nth-child(even)
.service-feature-card__tag {

    right: auto;
    left: 21px;

}


/*
|--------------------------------------------------------------------------
| MORE SERVICES
|--------------------------------------------------------------------------
*/

.home-services__more {

    min-height: 76px;

    margin-top: 22px;

    padding:
        0 25px;

    display: grid;

    grid-template-columns:
        auto
        auto
        1fr
        auto;

    align-items: center;

    gap: 15px;

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

    border-radius: 18px;

    background: #101412;

    transition:
        border-color .2s ease,
        background .2s ease;

}

.home-services__more:hover {

    border-color:
        rgba(124,255,79,.18);

    background:
        #131815;

}

.home-services__more-icon {

    width: 36px;
    height: 36px;

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

    border-radius: 10px;

    background:
        rgba(124,255,79,.07);

    color: var(--green);

}

.home-services__more-icon svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.4;

}

.home-services__more > span:nth-child(2) {

    color: var(--white);

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

}

.home-services__more small {

    justify-self: end;

    color: var(--gray-500);

    font-size: 9px;

}

.home-services__more-arrow {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| SERVICES TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .services-intro {

        padding-top: 105px;

    }

    .services-intro__grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .services-intro__content {

        max-width: 670px;

        padding-top: 0;

    }

    .service-feature-card,
    .service-feature-card:nth-child(even) {

        min-height: 640px;

        grid-template-columns: 1fr;
        grid-template-rows:
            auto
            330px;

    }

    .service-feature-card__content,
    .service-feature-card:nth-child(even)
    .service-feature-card__content {

        grid-column: 1;
        grid-row: 1;

    }

    .service-feature-card__visual,
    .service-feature-card:nth-child(even)
    .service-feature-card__visual {

        grid-column: 1;
        grid-row: 2;

    }

    .service-feature-card__overlay,
    .service-feature-card:nth-child(even)
    .service-feature-card__overlay {

        background:

            linear-gradient(
                180deg,
                rgba(14,18,16,.77),
                transparent 35%
            ),

            linear-gradient(
                0deg,
                rgba(7,9,9,.35),
                transparent 50%
            );

    }

}


/*
|--------------------------------------------------------------------------
| SERVICES MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .services-intro {

        padding:
            90px 0 48px;

    }

    .services-intro__heading h2 {

        font-size:
            clamp(
                42px,
                12vw,
                55px
            );

    }

    .services-intro__lead {

        font-size: 13px;

    }

    .services-intro__points {

        grid-template-columns: 1fr;

        gap: 11px;

    }

    .home-services {

        padding:
            20px 0 90px;

    }

    .home-services__list {

        gap: 15px;

    }

    .service-feature-card,
    .service-feature-card:nth-child(even) {

        min-height: 575px;

        grid-template-rows:
            auto
            245px;

        border-radius: 20px;

    }

    .service-feature-card__content {

        padding:
            34px 25px 31px;

    }

    .service-feature-card__number {

        margin-bottom: 18px;

    }

    .service-feature-card h3 {

        font-size:
            clamp(
                28px,
                8vw,
                35px
            );

    }

    .service-feature-card__content > p {

        margin-top: 17px;

        font-size: 11px;

    }

    .service-feature-card__link {

        margin-top: 23px;

    }

    .service-feature-card__tag {

        right: 14px;
        bottom: 13px;

    }

    .service-feature-card:nth-child(even)
    .service-feature-card__tag {

        right: 14px;
        left: auto;

    }

    .home-services__more {

        min-height: 70px;

        grid-template-columns:
            auto
            1fr
            auto;

        padding:
            0 18px;

    }

    .home-services__more small {

        display: none;

    }

}


/*
|--------------------------------------------------------------------------
| REPAIR VALUE
|--------------------------------------------------------------------------
*/

.repair-value {

    position: relative;

    padding:
        120px 0 145px;

    background:
        linear-gradient(
            180deg,
            var(--black),
            #090c0b
        );

}

.repair-value__grid {

    display: grid;

    grid-template-columns:
        minmax(420px, .95fr)
        minmax(450px, 1.05fr);

    gap:
        clamp(
            60px,
            8vw,
            125px
        );

    align-items: center;

}


/*
|--------------------------------------------------------------------------
| VALUE VISUAL
|--------------------------------------------------------------------------
*/

.repair-value__visual {

    position: relative;

    min-height: 540px;

    overflow: hidden;

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

    border-radius:
        26px 180px 26px 26px;

    background: var(--anthracite);

}

.repair-value__visual::before {

    content: "";

    position: absolute;

    z-index: 3;

    width: 260px;
    height: 260px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(124,255,79,.10);

    filter:
        blur(65px);

    pointer-events: none;

}

.repair-value__visual img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.75);

}

.repair-value__visual-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            0deg,
            rgba(5,8,6,.92) 0%,
            rgba(5,8,6,.18) 45%,
            rgba(5,8,6,.05) 70%
        ),

        linear-gradient(
            90deg,
            rgba(5,8,6,.15),
            transparent
        );

}

.repair-value__visual-label {

    position: absolute;

    z-index: 5;

    right: 35px;
    bottom: 35px;
    left: 35px;

    display: flex;
    flex-direction: column;

    gap: 6px;

}

.repair-value__visual-label span {

    color: var(--green);

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

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

}

.repair-value__visual-label strong {

    max-width: 390px;

    color: var(--white);

    font-size:
        clamp(
            29px,
            2.7vw,
            42px
        );

    font-weight: 560;

    line-height: 1.05;

    letter-spacing: -.04em;

}


/*
|--------------------------------------------------------------------------
| VALUE CONTENT
|--------------------------------------------------------------------------
*/

.repair-value__content {

    max-width: 650px;

}

.repair-value__content h2 {

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            45px,
            4.5vw,
            69px
        );

    font-weight: 580;

    line-height: .98;

    letter-spacing: -.055em;

}

.repair-value__content h2 span {

    display: block;

    color: var(--green);

}

.repair-value__lead {

    max-width: 590px;

    margin:
        28px 0 0;

    color: #9aa49f;

    font-size: 14px;

    line-height: 1.78;

}

.repair-value__benefits {

    display: flex;
    flex-direction: column;

    margin-top: 38px;

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

}

.repair-value__benefits > div {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 16px;

    padding:
        20px 0;

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

}

.repair-value__benefit-icon {

    width: 39px;
    height: 39px;

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

    border-radius: 11px;

    background:
        rgba(124,255,79,.07);

    color: var(--green);

}

.repair-value__benefit-icon svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.repair-value__benefits > div > span:last-child {

    display: flex;
    flex-direction: column;

    gap: 5px;

}

.repair-value__benefits strong {

    color: var(--gray-100);

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

}

.repair-value__benefits small {

    max-width: 470px;

    color: var(--gray-500);

    font-size: 10px;

    line-height: 1.55;

}

.repair-value__link {

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

    gap: 12px;

    margin-top: 29px;

    color: var(--white);

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

}

.repair-value__link svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .2s ease;

}

.repair-value__link:hover svg {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| REQUEST / QUOTE
|--------------------------------------------------------------------------
*/

.repair-request {

    position: relative;

    overflow: hidden;

    padding:
        125px 0;

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

    background:
        #0b0f0d;

}

.repair-request::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .12;

    background-image:

        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

}

.repair-request__ambient {

    position: absolute;

    width: 620px;
    height: 620px;

    right: -150px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.10),
            transparent 68%
        );

    pointer-events: none;

}

.repair-request__grid {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(380px, .82fr)
        minmax(550px, 1.18fr);

    gap:
        clamp(
            65px,
            8vw,
            120px
        );

    align-items: center;

}


/*
|--------------------------------------------------------------------------
| REQUEST LEFT
|--------------------------------------------------------------------------
*/

.repair-request__content h2 {

    max-width: 610px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            45px,
            4.6vw,
            70px
        );

    font-weight: 580;

    line-height: .98;

    letter-spacing: -.055em;

}

.repair-request__content h2 span {

    display: block;

    color: var(--green);

}

.repair-request__lead {

    max-width: 530px;

    margin:
        27px 0 0;

    color: #97a19c;

    font-size: 14px;

    line-height: 1.75;

}

.repair-request__contacts {

    display: flex;
    flex-direction: column;

    margin-top: 42px;

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

}

.repair-request__contacts > a,
.repair-request__contacts > div {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 14px;

    align-items: center;

    padding:
        17px 0;

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

}

.repair-request__contact-icon {

    width: 36px;
    height: 36px;

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

    border-radius: 10px;

    background:
        rgba(124,255,79,.065);

}

.repair-request__contact-icon svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.repair-request__contacts span:last-child {

    display: flex;
    flex-direction: column;

    gap: 3px;

}

.repair-request__contacts small {

    color: var(--gray-500);

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

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

}

.repair-request__contacts strong {

    color: var(--gray-100);

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

}


/*
|--------------------------------------------------------------------------
| REQUEST FORM CARD
|--------------------------------------------------------------------------
*/

.repair-request__form-wrap {

    position: relative;

    padding:
        38px;

    overflow: hidden;

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

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(27,34,30,.90),
            rgba(16,21,18,.92)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.20);

}

.repair-request__form-wrap::before {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -120px;
    top: -160px;

    border-radius: 50%;

    background:
        rgba(124,255,79,.11);

    filter:
        blur(75px);

    pointer-events: none;

}

.repair-request__form-head {

    position: relative;

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

    gap: 25px;

    align-items: flex-start;

    margin-bottom: 32px;

}

.repair-request__form-head > div {

    display: flex;
    flex-direction: column;

    gap: 6px;

}

.repair-request__form-head > div > span {

    color: var(--green);

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

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

}

.repair-request__form-head h3 {

    margin: 0;

    color: var(--white);

    font-size: 23px;
    font-weight: 570;

    letter-spacing: -.035em;

}

.repair-request__online {

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

    gap: 7px;

    padding:
        7px 10px;

    border:
        1px solid rgba(124,255,79,.13);

    border-radius: 20px;

    background:
        rgba(124,255,79,.045);

    color: var(--gray-300);

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

}

.repair-request__online i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(124,255,79,.07);

}


/*
|--------------------------------------------------------------------------
| FORM FIELDS
|--------------------------------------------------------------------------
*/

.repair-request__form {

    position: relative;

}

.repair-request__row {

    display: grid;

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

    gap: 16px;

    margin-bottom: 17px;

}

.repair-request__form label {

    display: flex;
    flex-direction: column;

    gap: 9px;

}

.repair-request__form label > span {

    color: var(--gray-500);

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

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

}

.repair-request__form input,
.repair-request__form select,
.repair-request__form textarea {

    width: 100%;

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

    border-radius: 11px;

    outline: none;

    background:
        rgba(5,8,6,.37);

    color: var(--white);

    font-size: 11px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.repair-request__form input,
.repair-request__form select {

    height: 48px;

    padding:
        0 14px;

}

.repair-request__form textarea {

    min-height: 110px;

    padding:
        14px;

    resize: vertical;

    line-height: 1.6;

}

.repair-request__form input::placeholder,
.repair-request__form textarea::placeholder {

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

}

.repair-request__form select {

    color: var(--gray-300);

    appearance: none;

    background-image:

        linear-gradient(
            45deg,
            transparent 50%,
            var(--gray-500) 50%
        ),

        linear-gradient(
            135deg,
            var(--gray-500) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 21px,
        calc(100% - 13px) 21px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;

}

.repair-request__form select option {

    background: #151a17;

    color: var(--white);

}

.repair-request__form input:focus,
.repair-request__form select:focus,
.repair-request__form textarea:focus {

    border-color:
        rgba(124,255,79,.38);

    background:
        rgba(124,255,79,.025);

    box-shadow:
        0 0 0 3px rgba(124,255,79,.035);

}

.repair-request__message {

    margin-top: 2px;

}


/*
|--------------------------------------------------------------------------
| FORM BOTTOM
|--------------------------------------------------------------------------
*/

.repair-request__form-bottom {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 25px;

    align-items: center;

    margin-top: 25px;

}

.repair-request__form-bottom p {

    max-width: 310px;

    margin: 0;

    color: var(--gray-500);

    font-size: 8px;

    line-height: 1.55;

}

.repair-request__submit {

    min-height: 50px;

    padding:
        0 18px;

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

    gap: 20px;

    border: 0;
    border-radius: 12px;

    background: var(--green);

    color: #071005;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.repair-request__submit > span {

    display: flex;
    align-items: center;

    gap: 9px;

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

}

.repair-request__submit > span svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.repair-request__submit-arrow {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

}

.repair-request__submit:hover {

    transform: translateY(-1px);

    background: var(--green-soft);

    box-shadow:
        0 12px 30px rgba(124,255,79,.13);

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 960px) {

    .repair-value__grid,
    .repair-request__grid {

        grid-template-columns: 1fr;

    }

    .repair-value__content,
    .repair-request__content {

        max-width: 700px;

    }

    .repair-value__visual {

        min-height: 520px;

    }

    .repair-request__form-wrap {

        max-width: 760px;

    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .repair-value {

        padding:
            85px 0 100px;

    }

    .repair-value__grid {

        gap: 50px;

    }

    .repair-value__visual {

        min-height: 380px;

        border-radius:
            20px 95px 20px 20px;

    }

    .repair-value__visual-label {

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

    }

    .repair-value__content h2,
    .repair-request__content h2 {

        font-size:
            clamp(
                42px,
                12vw,
                55px
            );

    }

    .repair-value__lead,
    .repair-request__lead {

        font-size: 13px;

    }


    .repair-request {

        padding:
            90px 0;

    }

    .repair-request__grid {

        gap: 55px;

    }

    .repair-request__form-wrap {

        margin:
            0 -4px;

        padding:
            26px 20px;

        border-radius: 20px;

    }

    .repair-request__form-head {

        margin-bottom: 27px;

    }

    .repair-request__online {

        display: none;

    }

    .repair-request__row {

        grid-template-columns: 1fr;

        gap: 17px;

    }

    .repair-request__form-bottom {

        grid-template-columns: 1fr;

    }

    .repair-request__form-bottom p {

        max-width: none;

    }

    .repair-request__submit {

        width: 100%;

        justify-content: space-between;

    }

}


/*
|--------------------------------------------------------------------------
| RECENT WORKS
|--------------------------------------------------------------------------
*/

.recent-works {

    position: relative;

    padding:
        135px 0 145px;

    background:
        var(--black);

}

.recent-works__head {

    display: grid;

    grid-template-columns:
        minmax(460px, 1fr)
        minmax(360px, .72fr);

    gap:
        clamp(
            60px,
            9vw,
            150px
        );

    align-items: end;

    margin-bottom: 62px;

}

.recent-works__head h2 {

    max-width: 680px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            48px,
            5.3vw,
            80px
        );

    font-weight: 580;

    line-height: .94;

    letter-spacing: -.06em;

}

.recent-works__head h2 span {

    color: var(--green);

}

.recent-works__intro {

    max-width: 510px;

    padding-bottom: 7px;

}

.recent-works__intro p {

    margin: 0;

    color: #929c97;

    font-size: 13px;

    line-height: 1.75;

}

.recent-works__intro a {

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

    gap: 12px;

    margin-top: 25px;

    color: var(--white);

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

}

.recent-works__intro a svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .2s ease;

}

.recent-works__intro a:hover svg {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| WORK GRID
|--------------------------------------------------------------------------
*/

.recent-works__grid {

    display: grid;

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

    gap: 19px;

}

.work-card {

    grid-column:
        span 4;

    overflow: hidden;

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

    border-radius: 20px;

    background: #101412;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;

}

.work-card--featured {

    grid-column:
        span 8;

}

.work-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(124,255,79,.16);

    box-shadow:
        0 25px 65px rgba(0,0,0,.20);

}


/*
|--------------------------------------------------------------------------
| WORK IMAGE
|--------------------------------------------------------------------------
*/

.work-card__image {

    position: relative;

    width: 100%;
    height: 310px;

    display: block;

    overflow: hidden;

    padding: 0;

    border: 0;

    background: #111512;

    cursor: zoom-in;

}

.work-card--featured
.work-card__image {

    height: 430px;

}

.work-card__image img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.83)
        contrast(1.06)
        saturate(.88);

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;

}

.work-card:hover
.work-card__image img {

    transform: scale(1.025);

    filter:
        brightness(.91)
        contrast(1.06)
        saturate(.94);

}

.work-card__shade {

    position: absolute;

    z-index: 2;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(5,8,6,.05),
            transparent 55%,
            rgba(5,8,6,.48)
        );

    pointer-events: none;

}


/*
|--------------------------------------------------------------------------
| WORK BADGES
|--------------------------------------------------------------------------
*/

.work-card__badge {

    position: absolute;

    z-index: 4;

    top: 18px;
    left: 18px;

    padding:
        8px 10px;

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

    border-radius: 9px;

    background:
        rgba(7,9,9,.66);

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

    backdrop-filter:
        blur(10px);

    color: var(--gray-300);

    font-size: 7px;
    font-weight: 650;

    letter-spacing: .1em;

    text-transform: uppercase;

}

.work-card__zoom {

    position: absolute;

    z-index: 5;

    right: 18px;
    bottom: 18px;

    width: 39px;
    height: 39px;

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

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

    border-radius: 50%;

    background:
        rgba(7,9,9,.68);

    color: var(--white);

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

    backdrop-filter:
        blur(10px);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}

.work-card__zoom svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;

}

.work-card:hover
.work-card__zoom {

    transform: scale(1.05);

    background: var(--green);

    color: #061004;

}


/*
|--------------------------------------------------------------------------
| WORK CARD CONTENT
|--------------------------------------------------------------------------
*/

.work-card__content {

    min-height: 93px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 15px;

    padding:
        18px 20px;

}

.work-card__number {

    color: var(--green);

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

    letter-spacing: .08em;

}

.work-card__content > div {

    min-width: 0;

}

.work-card__content h3 {

    margin: 0;

    overflow: hidden;

    color: var(--white);

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

    line-height: 1.3;

    white-space: nowrap;
    text-overflow: ellipsis;

}

.work-card__content p {

    margin:
        4px 0 0;

    color: var(--gray-500);

    font-size: 8px;

}

.work-card__arrow {

    width: 31px;
    height: 31px;

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

    border-radius: 9px;

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

    color: var(--green);

}

.work-card__arrow svg {

    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.recent-works__empty {

    min-height: 240px;

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

    border:
        1px dashed rgba(255,255,255,.10);

    border-radius: 20px;

    color: var(--gray-500);

    font-size: 11px;

}

.recent-works__mobile-cta {
    display: none;
}


/*
|--------------------------------------------------------------------------
| WORK LIGHTBOX
|--------------------------------------------------------------------------
*/

.work-lightbox {

    position: fixed;

    z-index: 2000;

    inset: 0;

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

    padding: 40px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}

.work-lightbox.is-open {

    opacity: 1;
    visibility: visible;

}

.work-lightbox__backdrop {

    position: absolute;

    inset: 0;

    border: 0;

    background:
        rgba(0,0,0,.88);

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

    backdrop-filter:
        blur(14px);

    cursor: zoom-out;

}

.work-lightbox__dialog {

    position: relative;
    z-index: 2;

    width:
        min(
            1100px,
            100%
        );

    max-height:
        calc(100svh - 80px);

    overflow: hidden;

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

    border-radius: 22px;

    background: #0d110f;

    box-shadow:
        0 40px 120px rgba(0,0,0,.55);

    transform:
        scale(.97);

    transition:
        transform .25s ease;

}

.work-lightbox.is-open
.work-lightbox__dialog {

    transform: none;

}

.work-lightbox__dialog img {

    width: 100%;

    max-height:
        calc(100svh - 175px);

    object-fit: contain;

    background: #050706;

}

.work-lightbox__close {

    position: absolute;

    z-index: 5;

    top: 16px;
    right: 16px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background:
        rgba(7,9,9,.76);

    cursor: pointer;

}

.work-lightbox__close span {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 15px;
    height: 1px;

    background: var(--white);

}

.work-lightbox__close
span:first-child {

    transform:
        translate(-50%, -50%)
        rotate(45deg);

}

.work-lightbox__close
span:last-child {

    transform:
        translate(-50%, -50%)
        rotate(-45deg);

}

.work-lightbox__caption {

    min-height: 75px;

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

    gap: 3px;

    padding:
        15px 20px;

}

.work-lightbox__caption span {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

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

}

.work-lightbox__caption strong {

    color: var(--white);

    font-size: 13px;
    font-weight: 570;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .recent-works__head {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .recent-works__intro {

        max-width: 650px;

    }

    .work-card,
    .work-card--featured {

        grid-column:
            span 6;

    }

    .work-card--featured
    .work-card__image,
    .work-card__image {

        height: 330px;

    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .recent-works {

        padding:
            90px 0 100px;

    }

    .recent-works__head {

        margin-bottom: 38px;

    }

    .recent-works__head h2 {

        font-size:
            clamp(
                44px,
                13vw,
                58px
            );

    }

    .recent-works__intro p {

        font-size: 12px;

    }

    .recent-works__intro a {
        display: none;
    }

    .recent-works__grid {

        display: flex;

        overflow-x: auto;

        gap: 14px;

        margin:
            0 -16px;

        padding:
            0 16px 12px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

    }

    .recent-works__grid::-webkit-scrollbar {
        display: none;
    }

    .work-card,
    .work-card--featured {

        width: 84vw;

        min-width: 84vw;

        flex: 0 0 auto;

        scroll-snap-align: start;

    }

    .work-card__image,
    .work-card--featured
    .work-card__image {

        height: 330px;

    }

    .recent-works__mobile-cta {

        display: block;

        margin-top: 20px;

    }

    .recent-works__mobile-cta a {

        min-height: 52px;

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

        gap: 12px;

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

        border-radius: 12px;

        color: var(--white);

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

    }

    .recent-works__mobile-cta svg {

        width: 14px;
        height: 14px;

        fill: none;

        stroke: var(--green);
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;

    }

    .work-lightbox {

        padding: 15px;

    }

    .work-lightbox__dialog {

        max-height:
            calc(100svh - 30px);

        border-radius: 17px;

    }

}


body.work-lightbox-open {
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| WORKSHOP STANDARDS
|--------------------------------------------------------------------------
*/

.workshop-standards {

    position: relative;

    padding:
        20px 0 145px;

    overflow: hidden;

    background:
        var(--black);

}


/*
|--------------------------------------------------------------------------
| MAIN PANEL
|--------------------------------------------------------------------------
*/

.workshop-standards__panel {

    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(400px, .86fr)
        minmax(580px, 1.14fr);

    gap:
        clamp(
            60px,
            8vw,
            125px
        );

    padding:
        clamp(
            55px,
            6vw,
            88px
        );

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

    border-radius:
        30px;

    background:

        radial-gradient(
            circle at 77% 45%,
            rgba(124,255,79,.075),
            transparent 27rem
        ),

        radial-gradient(
            circle at 43% 105%,
            rgba(255,255,255,.035),
            transparent 25rem
        ),

        linear-gradient(
            130deg,
            #111614,
            #0c100e 72%
        );

}


/*
|--------------------------------------------------------------------------
| PANEL GRID
|--------------------------------------------------------------------------
*/

.workshop-standards__panel::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .12;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:
        56px 56px;

    mask-image:

        radial-gradient(
            circle at 75% 50%,
            #000,
            transparent 65%
        );

}


/*
|--------------------------------------------------------------------------
| LEFT
|--------------------------------------------------------------------------
*/

.workshop-standards__heading {

    position: relative;

    z-index: 2;

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

}


.workshop-standards__heading h2 {

    max-width: 560px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            50px,
            5.1vw,
            78px
        );

    font-weight: 580;

    line-height: .95;

    letter-spacing: -.06em;

}


.workshop-standards__heading h2 span {

    display: block;

    color: var(--green);

}


.workshop-standards__lead {

    max-width: 510px;

    margin:
        29px 0 0;

    color: #949e99;

    font-size: 13px;

    line-height: 1.78;

}


/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.workshop-standards__actions {

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

    gap: 10px;

    margin-top: 33px;

}


.workshop-standards__primary {

    min-height: 49px;

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

    gap: 12px;

    padding:
        0 18px;

    border-radius: 12px;

    background:
        var(--green);

    color:
        #071005;

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

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.workshop-standards__primary svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.workshop-standards__primary:hover {

    transform:
        translateY(-2px);

    background:
        var(--green-soft);

    box-shadow:
        0 12px 32px rgba(124,255,79,.11);

}


.workshop-standards__secondary {

    min-height: 49px;

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

    padding:
        0 17px;

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

    border-radius: 12px;

    color:
        var(--gray-300);

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

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;

}


.workshop-standards__secondary:hover {

    color:
        var(--white);

    border-color:
        rgba(124,255,79,.22);

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

}


/*
|--------------------------------------------------------------------------
| LOCATION
|--------------------------------------------------------------------------
*/

.workshop-standards__location {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: auto;
    padding-top: 70px;

}


.workshop-standards__location-dot {

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 5px rgba(124,255,79,.075);

}


.workshop-standards__location > div {

    display: flex;
    flex-direction: column;

    gap: 3px;

}


.workshop-standards__location small {

    color:
        var(--gray-500);

    font-size: 7px;
    font-weight: 620;

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

}


.workshop-standards__location strong {

    color:
        var(--gray-100);

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

}


/*
|--------------------------------------------------------------------------
| FEATURES GRID
|--------------------------------------------------------------------------
*/

.workshop-standards__features {

    position: relative;

    z-index: 2;

    display: grid;

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

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

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

}


/*
|--------------------------------------------------------------------------
| FEATURE
|--------------------------------------------------------------------------
*/

.standard-feature {

    position: relative;

    min-height: 210px;

    padding:
        29px 28px;

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

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

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

    transition:
        background .25s ease;

}


.standard-feature:hover {

    background:
        rgba(124,255,79,.025);

}


.standard-feature__number {

    position: absolute;

    top: 19px;
    right: 20px;

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

    font-size: 7px;
    font-weight: 660;

    letter-spacing: .09em;

}


.standard-feature__icon {

    width: 42px;
    height: 42px;

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

    margin-bottom: 28px;

    border-radius: 12px;

    background:
        rgba(124,255,79,.065);

    color:
        var(--green);

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

}


.standard-feature:hover
.standard-feature__icon {

    transform:
        translateY(-2px);

    background:
        rgba(124,255,79,.10);

}


.standard-feature__icon svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.standard-feature h3 {

    margin: 0;

    color:
        var(--white);

    font-size: 13px;
    font-weight: 590;

    line-height: 1.3;

    letter-spacing: -.02em;

}


.standard-feature p {

    max-width: 285px;

    margin:
        9px 0 0;

    color:
        var(--gray-500);

    font-size: 9px;

    line-height: 1.6;

}


/*
|--------------------------------------------------------------------------
| TRUST STRIP
|--------------------------------------------------------------------------
*/

.workshop-trust-strip {

    min-height: 83px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    align-items: center;

    gap: 45px;

    margin-top: 17px;

    padding:
        0 27px;

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

    border-radius: 17px;

    background:
        #0f1311;

}


.workshop-trust-strip__statement {

    display: flex;
    align-items: center;

    gap: 13px;

}


.workshop-trust-strip__mark {

    width: 36px;
    height: 36px;

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

    flex: 0 0 auto;

    border-radius: 10px;

    background:
        rgba(124,255,79,.065);

    color:
        var(--green);

}


.workshop-trust-strip__mark svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.workshop-trust-strip__statement > div {

    display: flex;
    flex-direction: column;

    gap: 3px;

}


.workshop-trust-strip__statement small {

    color:
        var(--gray-500);

    font-size: 7px;
    font-weight: 620;

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

}


.workshop-trust-strip__statement strong {

    color:
        var(--gray-100);

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

}


/*
|--------------------------------------------------------------------------
| TRUST ITEMS
|--------------------------------------------------------------------------
*/

.workshop-trust-strip__items {

    justify-self: end;

    display: flex;
    align-items: center;

    gap: 15px;

}


.workshop-trust-strip__items span {

    color:
        #77817c;

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

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

}


.workshop-trust-strip__items i {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--green);

    opacity: .6;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .workshop-standards__panel {

        grid-template-columns: 1fr;

        gap: 65px;

    }


    .workshop-standards__heading {

        max-width: 720px;

    }


    .workshop-standards__location {

        margin-top: 0;

        padding-top: 50px;

    }


    .workshop-standards__features {

        max-width: none;

    }


    .workshop-trust-strip {

        grid-template-columns: 1fr;

        gap: 17px;

        padding:
            20px 24px;

    }


    .workshop-trust-strip__items {

        justify-self: start;

    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .workshop-standards {

        padding:
            10px 0 100px;

    }


    .workshop-standards__panel {

        gap: 50px;

        padding:
            38px 22px 22px;

        border-radius: 22px;

    }


    .workshop-standards__heading h2 {

        font-size:
            clamp(
                44px,
                13vw,
                58px
            );

    }


    .workshop-standards__lead {

        font-size: 12px;

    }


    .workshop-standards__actions {

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

    }


    .workshop-standards__primary,
    .workshop-standards__secondary {

        width: 100%;

        justify-content: center;

    }


    .workshop-standards__location {

        padding-top: 39px;

    }


    .workshop-standards__features {

        grid-template-columns: 1fr;

    }


    .standard-feature {

        min-height: 180px;

        padding:
            25px 22px;

    }


    .standard-feature__icon {

        margin-bottom: 22px;

    }


    .standard-feature p {

        max-width: 330px;

    }


    .workshop-trust-strip {

        margin-top: 13px;

        border-radius: 14px;

    }


    .workshop-trust-strip__items {

        width: 100%;

        overflow-x: auto;

        gap: 11px;

        scrollbar-width: none;

    }


    .workshop-trust-strip__items::-webkit-scrollbar {
        display: none;
    }

}


/*
|--------------------------------------------------------------------------
| USEFUL TIPS
|--------------------------------------------------------------------------
*/

.useful-tips {

    position: relative;

    padding:
        135px 0 145px;

    background:
        linear-gradient(
            180deg,
            var(--black),
            #090c0b
        );

}


.useful-tips__head {

    display: grid;

    grid-template-columns:
        minmax(460px, 1fr)
        minmax(340px, .65fr);

    align-items: end;

    gap:
        clamp(
            60px,
            9vw,
            140px
        );

    margin-bottom: 55px;

}


.useful-tips__head h2 {

    max-width: 700px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            48px,
            5vw,
            76px
        );

    font-weight: 580;

    line-height: .96;

    letter-spacing: -.058em;

}


.useful-tips__head h2 span {

    display: block;

    color: var(--green);

}


.useful-tips__head-side {

    padding-bottom: 6px;

}


.useful-tips__head-side p {

    max-width: 460px;

    margin: 0;

    color: #919b96;

    font-size: 12px;

    line-height: 1.75;

}


.useful-tips__head-side a {

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

    gap: 11px;

    margin-top: 22px;

    color: var(--white);

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

}


.useful-tips__head-side svg,
.tip-card__read svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .2s ease;

}


.useful-tips__head-side a:hover svg,
.tip-card__read:hover svg {

    transform:
        translateX(4px);

}


/*
|--------------------------------------------------------------------------
| TIPS GRID
|--------------------------------------------------------------------------
*/

.useful-tips__grid {

    display: grid;

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

    gap: 19px;

}


.tip-card {

    overflow: hidden;

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

    border-radius: 21px;

    background: #101412;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;

}


.tip-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(124,255,79,.16);

    box-shadow:
        0 26px 65px rgba(0,0,0,.19);

}


/*
|--------------------------------------------------------------------------
| TIP VISUAL
|--------------------------------------------------------------------------
*/

.tip-card__visual {

    position: relative;

    height: 275px;

    display: block;

    overflow: hidden;

    background: #171c19;

}


.tip-card__visual img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.75)
        contrast(1.07)
        saturate(.80);

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        filter .3s ease;

}


.tip-card:hover
.tip-card__visual img {

    transform:
        scale(1.035);

    filter:
        brightness(.82)
        contrast(1.07)
        saturate(.88);

}


.tip-card__overlay {

    position: absolute;

    z-index: 2;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(5,8,6,.05),
            transparent 48%,
            rgba(5,8,6,.60)
        );

}


.tip-card__category {

    position: absolute;

    z-index: 4;

    top: 17px;
    left: 17px;

    padding:
        8px 10px;

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

    border-radius: 9px;

    background:
        rgba(7,9,9,.68);

    color: var(--gray-300);

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

    backdrop-filter:
        blur(10px);

    font-size: 7px;
    font-weight: 650;

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

}


.tip-card__open {

    position: absolute;

    z-index: 4;

    right: 17px;
    bottom: 17px;

    width: 38px;
    height: 38px;

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

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

    border-radius: 50%;

    background:
        rgba(7,9,9,.66);

    color: var(--white);

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

    backdrop-filter:
        blur(10px);

    transition:
        background .2s ease,
        color .2s ease;

}


.tip-card:hover
.tip-card__open {

    background: var(--green);

    color: #071005;

}


.tip-card__open svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| TIP BODY
|--------------------------------------------------------------------------
*/

.tip-card__body {

    padding:
        25px 24px 27px;

}


.tip-card__meta {

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--gray-500);

    font-size: 7px;
    font-weight: 620;

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

}


.tip-card__meta i {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--green);

}


.tip-card h3 {

    margin:
        15px 0 0;

    color: var(--white);

    font-size: 20px;
    font-weight: 570;

    line-height: 1.18;

    letter-spacing: -.035em;

}


.tip-card h3 a {

    transition:
        color .2s ease;

}


.tip-card h3 a:hover {

    color: var(--green);

}


.tip-card__body > p {

    margin:
        14px 0 0;

    color: var(--gray-500);

    font-size: 10px;

    line-height: 1.65;

}


.tip-card__read {

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

    gap: 10px;

    margin-top: 21px;

    color: var(--gray-100);

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

}


/*
|--------------------------------------------------------------------------
| BLOG PAGE
|--------------------------------------------------------------------------
*/

.blog-page-hero {

    padding:
        120px 0 85px;

    background:
        var(--black);

}


.blog-page-hero h1 {

    max-width: 780px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            55px,
            6.5vw,
            96px
        );

    font-weight: 580;

    line-height: .93;

    letter-spacing: -.065em;

}


.blog-page-hero h1 span {

    display: block;

    color: var(--green);

}


.blog-page-hero > .container > p:last-child {

    max-width: 560px;

    margin:
        28px 0 0;

    color: var(--gray-500);

    font-size: 13px;

    line-height: 1.75;

}


.blog-page-list {

    padding:
        20px 0 130px;

    background: var(--black);

}


.blog-page-list__grid {

    display: grid;

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

    gap: 20px;

}


.blog-page-card {

    overflow: hidden;

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

    border-radius: 21px;

    background: #101412;

}


.blog-page-card__image {

    position: relative;

    height: 290px;

    display: block;

    overflow: hidden;

}


.blog-page-card__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.78)
        saturate(.84);

    transition:
        transform .5s ease;

}


.blog-page-card:hover
.blog-page-card__image img {

    transform: scale(1.03);

}


.blog-page-card__content {

    padding:
        26px;

}


.blog-page-card__meta {

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--gray-500);

    font-size: 7px;

    text-transform: uppercase;

}


.blog-page-card__meta i {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--green);

}


.blog-page-card h2 {

    margin:
        15px 0 0;

    color: var(--white);

    font-size: 22px;
    font-weight: 570;

    line-height: 1.15;

    letter-spacing: -.035em;

}


.blog-page-card__content > p {

    margin:
        14px 0 0;

    color: var(--gray-500);

    font-size: 10px;

    line-height: 1.65;

}


.blog-page-card__read {

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

    gap: 10px;

    margin-top: 23px;

    color: var(--white);

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

}


.blog-page-card__read svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| ARTICLE HERO
|--------------------------------------------------------------------------
*/

.article-hero {

    padding:
        100px 0 80px;

    background:

        radial-gradient(
            circle at 75% 25%,
            rgba(124,255,79,.055),
            transparent 30rem
        ),

        var(--black);

}


.article-hero__container {

    max-width: 1050px;

}


.article-hero__back {

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

    gap: 8px;

    margin-bottom: 55px;

    color: var(--gray-500);

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

}


.article-hero__back svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.article-hero__meta {

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--gray-500);

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

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

}


.article-hero__meta i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--green);

}


.article-hero h1 {

    max-width: 950px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            50px,
            6vw,
            86px
        );

    font-weight: 570;

    line-height: .96;

    letter-spacing: -.06em;

}


.article-hero__container > p {

    max-width: 730px;

    margin:
        28px 0 0;

    color: #9aa49f;

    font-size: 14px;

    line-height: 1.75;

}


/*
|--------------------------------------------------------------------------
| ARTICLE BODY
|--------------------------------------------------------------------------
*/

.article-body {

    padding:
        20px 0 140px;

    background: var(--black);

}


.article-body__grid {

    max-width: 1120px;

    display: grid;

    grid-template-columns:
        245px
        minmax(0, 1fr);

    gap: 70px;

    align-items: start;

}


.article-body__aside {

    position: sticky;

    top: 120px;

}


.article-body__aside-card {

    padding: 22px;

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

    border-radius: 17px;

    background: #101412;

}


.article-body__aside-card > span {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

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

}


.article-body__aside-card strong {

    display: block;

    margin-top: 8px;

    color: var(--white);

    font-size: 16px;
    font-weight: 570;

    line-height: 1.25;

}


.article-body__aside-card p {

    margin:
        12px 0 0;

    color: var(--gray-500);

    font-size: 9px;

    line-height: 1.6;

}


.article-body__aside-card a {

    min-height: 42px;

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

    gap: 9px;

    margin-top: 18px;

    border-radius: 10px;

    background: var(--green);

    color: #071005;

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

}


.article-body__aside-card a svg {

    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.article-body__image {

    height: 470px;

    overflow: hidden;

    margin-bottom: 45px;

    border-radius: 22px;

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

}


.article-body__image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.82)
        saturate(.86);

}


.article-body__intro {

    margin:
        0 0 45px;

    color: var(--gray-300);

    font-size: 17px;

    line-height: 1.75;

}


.article-body__content > section {

    padding:
        33px 0;

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

}


.article-body__content h2 {

    margin: 0;

    color: var(--white);

    font-size: 29px;
    font-weight: 570;

    line-height: 1.16;

    letter-spacing: -.035em;

}


.article-body__content
> section > p {

    margin:
        17px 0 0;

    color: #939d98;

    font-size: 13px;

    line-height: 1.8;

}


.article-body__cta {

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

    gap: 30px;

    margin-top: 38px;

    padding:
        25px;

    border:
        1px solid rgba(124,255,79,.14);

    border-radius: 17px;

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

}


.article-body__cta > div {

    display: flex;
    flex-direction: column;

    gap: 4px;

}


.article-body__cta span {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: .11em;

}


.article-body__cta strong {

    color: var(--white);

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

}


.article-body__cta > a {

    min-height: 43px;

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

    gap: 10px;

    padding:
        0 15px;

    border-radius: 10px;

    background: var(--green);

    color: #071005;

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

}


.article-body__cta > a svg {

    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

}


/*
|--------------------------------------------------------------------------
| BLOG TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .useful-tips__head {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .useful-tips__grid,
    .blog-page-list__grid {

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

    }


    .article-body__grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .article-body__aside {

        position: static;

        order: 2;

    }


    .article-body__aside-card {

        max-width: 470px;

    }

}


/*
|--------------------------------------------------------------------------
| BLOG MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .useful-tips {

        padding:
            90px 0 100px;

    }


    .useful-tips__head {

        margin-bottom: 37px;

    }


    .useful-tips__head h2 {

        font-size:
            clamp(
                44px,
                13vw,
                58px
            );

    }


    .useful-tips__head-side p {

        font-size: 12px;

    }


    .useful-tips__grid,
    .blog-page-list__grid {

        grid-template-columns: 1fr;

    }


    .tip-card__visual {

        height: 245px;

    }


    .blog-page-hero {

        padding:
            80px 0 55px;

    }


    .blog-page-hero h1 {

        font-size:
            clamp(
                48px,
                14vw,
                68px
            );

    }


    .blog-page-list {

        padding-bottom: 95px;

    }


    .article-hero {

        padding:
            70px 0 60px;

    }


    .article-hero__back {

        margin-bottom: 38px;

    }


    .article-hero h1 {

        font-size:
            clamp(
                45px,
                13vw,
                62px
            );

    }


    .article-hero__container > p {

        font-size: 13px;

    }


    .article-body {

        padding-bottom: 100px;

    }


    .article-body__image {

        height: 300px;

        margin-bottom: 35px;

        border-radius: 18px;

    }


    .article-body__intro {

        font-size: 15px;

    }


    .article-body__content h2 {

        font-size: 25px;

    }


    .article-body__cta {

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

    }


    .article-body__cta > a {

        width: 100%;

        justify-content: center;

    }

}


/*
|--------------------------------------------------------------------------
| HOME FAQ
|--------------------------------------------------------------------------
*/

.home-faq {

    position: relative;

    overflow: hidden;

    padding:
        135px 0 150px;

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

    background:
        #0a0d0c;

}


.home-faq::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .10;

    background-image:

        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:
        62px 62px;

    mask-image:
        radial-gradient(
            circle at 80% 40%,
            #000,
            transparent 60%
        );

}


.home-faq__ambient {

    position: absolute;

    width: 650px;
    height: 650px;

    top: -200px;
    right: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.09),
            transparent 67%
        );

    pointer-events: none;

}


.home-faq__grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(520px, 1.12fr)
        minmax(380px, .88fr);

    gap:
        clamp(
            65px,
            9vw,
            145px
        );

    align-items: start;

}


/*
|--------------------------------------------------------------------------
| FAQ HEAD
|--------------------------------------------------------------------------
*/

.home-faq__content h2 {

    max-width: 720px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            49px,
            5.2vw,
            79px
        );

    font-weight: 580;

    line-height: .95;

    letter-spacing: -.06em;

}


.home-faq__content h2 span {

    display: block;

    color: var(--green);

}


.home-faq__lead {

    max-width: 620px;

    margin:
        27px 0 0;

    color: #949e99;

    font-size: 13px;

    line-height: 1.78;

}


/*
|--------------------------------------------------------------------------
| FAQ LIST
|--------------------------------------------------------------------------
*/

.faq-list {

    margin-top: 50px;

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

}


.faq-item {

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

}


.faq-item__question {

    width: 100%;

    min-height: 78px;

    display: grid;

    grid-template-columns:
        34px
        1fr
        34px;

    align-items: center;

    gap: 16px;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

}


.faq-item__number {

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

    font-size: 7px;
    font-weight: 650;

    letter-spacing: .08em;

}


.faq-item__question-text {

    color: var(--gray-100);

    font-size:
        clamp(
            14px,
            1.15vw,
            17px
        );

    font-weight: 560;

    line-height: 1.35;

    letter-spacing: -.02em;

    transition:
        color .2s ease;

}


.faq-item__question:hover
.faq-item__question-text,
.faq-item.is-open
.faq-item__question-text {

    color: var(--white);

}


/*
|--------------------------------------------------------------------------
| FAQ +/- BUTTON
|--------------------------------------------------------------------------
*/

.faq-item__toggle {

    position: relative;

    width: 34px;
    height: 34px;

    display: block;

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

    border-radius: 50%;

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

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .25s ease;

}


.faq-item__toggle i {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 11px;
    height: 1px;

    background: var(--green);

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

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

}


.faq-item__toggle i:last-child {

    transform:
        translate(-50%, -50%)
        rotate(90deg);

}


.faq-item.is-open
.faq-item__toggle {

    border-color:
        rgba(124,255,79,.26);

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

    transform:
        rotate(180deg);

}


.faq-item.is-open
.faq-item__toggle i:last-child {

    opacity: 0;

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

}


/*
|--------------------------------------------------------------------------
| FAQ ANSWER
|--------------------------------------------------------------------------
*/

.faq-item__answer {

    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows .32s cubic-bezier(.2,.7,.2,1),
        opacity .25s ease;

}


.faq-item__answer > div {

    overflow: hidden;

}


.faq-item__answer p {

    max-width: 670px;

    margin:
        0 45px 0 50px;

    padding:
        0 0 26px;

    color: var(--gray-500);

    font-size: 11px;

    line-height: 1.75;

}


.faq-item.is-open
.faq-item__answer {

    grid-template-rows: 1fr;

    opacity: 1;

}


/*
|--------------------------------------------------------------------------
| FAQ ASIDE
|--------------------------------------------------------------------------
*/

.home-faq__aside {

    position: sticky;

    top: 125px;

}


.home-faq__visual {

    position: relative;

    min-height: 610px;

    overflow: hidden;

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

    border-radius:
        27px 145px 27px 27px;

    background:
        var(--anthracite);

}


.home-faq__visual img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        brightness(.61)
        contrast(1.09)
        saturate(.75);

}


.home-faq__visual-shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(5,7,6,.04),
            rgba(5,7,6,.18) 40%,
            rgba(5,7,6,.94) 100%
        ),

        linear-gradient(
            90deg,
            rgba(5,7,6,.13),
            transparent
        );

}


.home-faq__visual-top {

    position: absolute;

    z-index: 3;

    top: 23px;
    left: 23px;

}


.home-faq__status {

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

    gap: 8px;

    padding:
        8px 11px;

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

    border-radius: 20px;

    background:
        rgba(7,9,9,.63);

    color: var(--gray-300);

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

    backdrop-filter:
        blur(10px);

    font-size: 7px;
    font-weight: 620;

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

}


.home-faq__status i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(124,255,79,.08);

}


/*
|--------------------------------------------------------------------------
| FAQ VISUAL CONTENT
|--------------------------------------------------------------------------
*/

.home-faq__visual-content {

    position: absolute;

    z-index: 4;

    right: 32px;
    bottom: 33px;
    left: 32px;

}


.home-faq__visual-content > span {

    color: var(--green);

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

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

}


.home-faq__visual-content h3 {

    max-width: 390px;

    margin:
        9px 0 0;

    color: var(--white);

    font-size:
        clamp(
            35px,
            3.4vw,
            50px
        );

    font-weight: 560;

    line-height: .98;

    letter-spacing: -.052em;

}


.home-faq__visual-content p {

    max-width: 370px;

    margin:
        17px 0 0;

    color: #a1aaa5;

    font-size: 10px;

    line-height: 1.65;

}


.home-faq__visual-content > a {

    min-height: 49px;

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

    gap: 20px;

    margin-top: 25px;

    padding:
        0 16px;

    border-radius: 12px;

    background: var(--green);

    color: #071005;

    transition:
        background .2s ease,
        transform .2s ease;

}


.home-faq__visual-content > a:hover {

    transform:
        translateY(-2px);

    background:
        var(--green-soft);

}


.home-faq__visual-content > a > span {

    display: flex;
    align-items: center;

    gap: 9px;

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

}


.home-faq__visual-content > a svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.home-faq__visual-content
> a > span svg {

    width: 17px;
    height: 17px;

}


/*
|--------------------------------------------------------------------------
| PHONE CARD
|--------------------------------------------------------------------------
*/

.home-faq__contact-card {

    min-height: 78px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 13px;

    margin-top: 14px;

    padding:
        0 19px;

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

    border-radius: 16px;

    background:
        #101412;

}


.home-faq__contact-icon {

    width: 37px;
    height: 37px;

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

    border-radius: 10px;

    background:
        rgba(124,255,79,.065);

}


.home-faq__contact-icon svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.home-faq__contact-card > div {

    display: flex;
    flex-direction: column;

    gap: 3px;

}


.home-faq__contact-card small {

    color: var(--gray-500);

    font-size: 7px;
    font-weight: 620;

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

}


.home-faq__contact-card a {

    color: var(--white);

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

}


.home-faq__contact-arrow {

    color: var(--green);

}


.home-faq__contact-arrow svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| FAQ TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .home-faq__grid {

        grid-template-columns: 1fr;

    }


    .home-faq__content {

        max-width: 760px;

    }


    .home-faq__aside {

        position: static;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, .46fr);

        gap: 15px;

    }


    .home-faq__visual {

        min-height: 500px;

    }


    .home-faq__contact-card {

        min-height: 500px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;

        padding: 26px;

    }


    .home-faq__contact-arrow {
        display: none;
    }

}


/*
|--------------------------------------------------------------------------
| FAQ MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .home-faq {

        padding:
            90px 0 100px;

    }


    .home-faq__grid {

        gap: 55px;

    }


    .home-faq__content h2 {

        font-size:
            clamp(
                44px,
                13vw,
                58px
            );

    }


    .home-faq__lead {

        font-size: 12px;

    }


    .faq-list {

        margin-top: 36px;

    }


    .faq-item__question {

        min-height: 73px;

        grid-template-columns:
            25px
            1fr
            32px;

        gap: 11px;

    }


    .faq-item__question-text {

        font-size: 13px;

    }


    .faq-item__toggle {

        width: 31px;
        height: 31px;

    }


    .faq-item__answer p {

        margin:
            0 42px 0 36px;

        padding-bottom: 23px;

        font-size: 10px;

    }


    .home-faq__aside {

        display: block;

    }


    .home-faq__visual {

        min-height: 500px;

        border-radius:
            22px 95px 22px 22px;

    }


    .home-faq__visual-content {

        right: 23px;
        bottom: 24px;
        left: 23px;

    }


    .home-faq__visual-content h3 {

        font-size:
            39px;

    }


    .home-faq__contact-card {

        min-height: 76px;

        display: grid;

        grid-template-columns:
            auto
            1fr;

        align-items: center;

        padding:
            0 17px;

    }

}


/*
|--------------------------------------------------------------------------
| FINAL CTA
|--------------------------------------------------------------------------
*/

.final-cta {

    position: relative;

    padding:
        110px 0 120px;

    background:
        var(--black);

}


.final-cta__panel {

    position: relative;

    min-height: 520px;

    display: grid;

    grid-template-columns:
        minmax(480px, 1fr)
        minmax(420px, .82fr);

    overflow: hidden;

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

    border-radius: 30px;

    background:
        #101412;

}


.final-cta__ambient {

    position: absolute;

    z-index: 1;

    width: 620px;
    height: 620px;

    left: -170px;
    bottom: -400px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.11),
            transparent 66%
        );

    pointer-events: none;

}


/*
|--------------------------------------------------------------------------
| FINAL CTA CONTENT
|--------------------------------------------------------------------------
*/

.final-cta__content {

    position: relative;

    z-index: 4;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding:
        clamp(
            45px,
            6vw,
            82px
        );

}


.final-cta__content h2 {

    max-width: 710px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            48px,
            5.2vw,
            78px
        );

    font-weight: 580;

    line-height: .95;

    letter-spacing: -.06em;

}


.final-cta__content h2 span {

    display: block;

    color: var(--green);

}


.final-cta__content > p {

    max-width: 570px;

    margin:
        27px 0 0;

    color: #959f9a;

    font-size: 13px;

    line-height: 1.78;

}


/*
|--------------------------------------------------------------------------
| FINAL CTA ACTIONS
|--------------------------------------------------------------------------
*/

.final-cta__actions {

    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 33px;

}


.final-cta__primary {

    min-height: 54px;

    min-width: 210px;

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

    gap: 25px;

    padding:
        0 18px;

    border-radius: 12px;

    background: var(--green);

    color: #071005;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.final-cta__primary:hover {

    transform:
        translateY(-2px);

    background:
        var(--green-soft);

    box-shadow:
        0 14px 35px rgba(124,255,79,.13);

}


.final-cta__primary > span {

    display: flex;
    align-items: center;

    gap: 9px;

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

}


.final-cta__primary svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.final-cta__primary > span svg {

    width: 17px;
    height: 17px;

}


.final-cta__secondary {

    min-height: 54px;

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

    gap: 2px;

    padding:
        0 18px;

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

    border-radius: 12px;

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

}


.final-cta__secondary small {

    color: var(--gray-500);

    font-size: 7px;
    font-weight: 620;

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

}


.final-cta__secondary strong {

    color: var(--white);

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

}


/*
|--------------------------------------------------------------------------
| FINAL CTA VISUAL
|--------------------------------------------------------------------------
*/

.final-cta__visual {

    position: relative;

    min-height: 520px;

    overflow: hidden;

}


.final-cta__visual::after {

    content: "";

    position: absolute;

    z-index: 3;

    inset: 0;

    opacity: .11;

    background-image:

        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

}


.final-cta__visual img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.69)
        contrast(1.08)
        saturate(.77);

}


.final-cta__visual-shade {

    position: absolute;

    z-index: 2;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            #101412 0%,
            rgba(16,20,18,.56) 18%,
            transparent 57%
        ),

        linear-gradient(
            0deg,
            rgba(7,9,9,.40),
            transparent 50%
        );

}


.final-cta__badge {

    position: absolute;

    z-index: 6;

    right: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        12px 15px;

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

    border-radius: 12px;

    background:
        rgba(7,9,9,.72);

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

    backdrop-filter:
        blur(12px);

}


.final-cta__badge-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px rgba(124,255,79,.08);

}


.final-cta__badge > div {

    display: flex;
    flex-direction: column;

    gap: 2px;

}


.final-cta__badge small {

    color: var(--gray-500);

    font-size: 6px;
    font-weight: 650;

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

}


.final-cta__badge strong {

    color: var(--white);

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

}


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

.site-footer {

    position: relative;

    padding:
        85px 0 0;

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

    background:
        #070908;

}


/*
|--------------------------------------------------------------------------
| FOOTER MAIN
|--------------------------------------------------------------------------
*/

.site-footer__main {

    display: grid;

    grid-template-columns:
        minmax(250px, 1.25fr)
        .6fr
        1fr
        .9fr;

    gap:
        clamp(
            40px,
            6vw,
            90px
        );

    padding-bottom: 65px;

}


/*
|--------------------------------------------------------------------------
| FOOTER BRAND
|--------------------------------------------------------------------------
*/

.footer-brand {

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

    gap: 12px;

}


.footer-brand__mark {

    width: 45px;
    height: 34px;

    display: block;

}


.footer-brand__mark svg {

    width: 100%;
    height: 100%;

    overflow: visible;

}


.footer-brand__body {

    fill: none;

    stroke: rgba(255,255,255,.92);
    stroke-width: 1.7;

}


.footer-brand__light {

    fill: rgba(124,255,79,.07);

    stroke: var(--green);
    stroke-width: 1.8;

}


.footer-brand__beam {

    fill: none;

    stroke: var(--green);
    stroke-width: 2;
    stroke-linecap: round;

}


.footer-brand__copy {

    display: flex;
    flex-direction: column;

    gap: 3px;

    line-height: 1;

}


.footer-brand__copy strong {

    color: var(--white);

    font-size: 15px;
    font-weight: 740;

    letter-spacing: .11em;

}


.footer-brand__copy small {

    color: var(--gray-500);

    font-size: 7px;
    font-weight: 590;

    letter-spacing: .12em;

}


.site-footer__brand > p {

    max-width: 320px;

    margin:
        25px 0 0;

    color: var(--gray-500);

    font-size: 10px;

    line-height: 1.7;

}


.site-footer__whatsapp {

    min-height: 40px;

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

    gap: 8px;

    margin-top: 23px;

    padding:
        0 13px;

    border:
        1px solid rgba(124,255,79,.14);

    border-radius: 10px;

    background:
        rgba(124,255,79,.04);

    color: var(--gray-300);

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

}


.site-footer__whatsapp svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| FOOTER COLUMNS
|--------------------------------------------------------------------------
*/

.site-footer__label {

    display: block;

    margin-bottom: 22px;

    color: var(--gray-500);

    font-size: 7px;
    font-weight: 680;

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

}


.site-footer__column nav {

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

}


.site-footer__column nav > a {

    color: #b0b8b4;

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

    line-height: 1.35;

    transition:
        color .2s ease,
        transform .2s ease;

}


.site-footer__column nav > a:hover {

    color: var(--white);

    transform:
        translateX(2px);

}


.site-footer__column nav
.site-footer__all-services {

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

    gap: 8px;

    margin-top: 5px;

    color: var(--green);

}


.site-footer__all-services svg {

    width: 12px;
    height: 12px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| FOOTER CONTACT
|--------------------------------------------------------------------------
*/

.site-footer__contact {

    display: flex;
    flex-direction: column;

}


.site-footer__contact-item {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 11px;

    padding:
        13px 0;

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

}


.site-footer__contact-item > span {

    width: 31px;
    height: 31px;

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

    border-radius: 9px;

    background:
        rgba(124,255,79,.05);

}


.site-footer__contact-item > span svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.site-footer__contact-item > div {

    display: flex;
    flex-direction: column;

    gap: 3px;

}


.site-footer__contact-item small {

    color: var(--gray-700);

    font-size: 6px;
    font-weight: 650;

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

}


.site-footer__contact-item strong,
.site-footer__contact-item a {

    color: var(--gray-300);

    font-size: 8.5px;
    font-weight: 540;

    line-height: 1.5;

}


/*
|--------------------------------------------------------------------------
| FOOTER SEO SERVICE STRIP
|--------------------------------------------------------------------------
*/

.site-footer__service-strip {

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

    gap:
        9px 18px;

    padding:
        23px 0;

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

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

}


.site-footer__service-strip a {

    color: #59615d;

    font-size: 6.5px;
    font-weight: 580;

    line-height: 1.4;

    transition:
        color .2s ease;

}


.site-footer__service-strip a:hover {

    color: var(--gray-300);

}


/*
|--------------------------------------------------------------------------
| FOOTER BOTTOM
|--------------------------------------------------------------------------
*/

.site-footer__bottom {

    min-height: 73px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 25px;

}


.site-footer__bottom p {

    margin: 0;

    color: #4e5652;

    font-size: 7px;

}


.site-footer__bottom > div {

    display: flex;
    align-items: center;

    gap: 12px;

}


.site-footer__bottom > div a {

    color: #606863;

    font-size: 7px;

    transition:
        color .2s ease;

}


.site-footer__bottom > div a:hover {

    color: var(--gray-300);

}


.site-footer__bottom > div span {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #39403c;

}


.site-footer__top {

    justify-self: end;

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

    gap: 8px;

    color: #68716c;

    font-size: 7px;
    font-weight: 590;

}


.site-footer__top svg {

    width: 12px;
    height: 12px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| FOOTER / CTA TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .final-cta__panel {

        grid-template-columns: 1fr;

    }


    .final-cta__visual {

        min-height: 420px;

    }


    .final-cta__visual-shade {

        background:

            linear-gradient(
                180deg,
                #101412,
                rgba(16,20,18,.15) 27%,
                transparent 55%
            ),

            linear-gradient(
                0deg,
                rgba(7,9,9,.32),
                transparent
            );

    }


    .site-footer__main {

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

    }

}


/*
|--------------------------------------------------------------------------
| FOOTER / CTA MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .final-cta {

        padding:
            80px 0 85px;

    }


    .final-cta__panel {

        border-radius: 22px;

    }


    .final-cta__content {

        padding:
            38px 23px 45px;

    }


    .final-cta__content h2 {

        font-size:
            clamp(
                43px,
                12.7vw,
                56px
            );

    }


    .final-cta__content > p {

        font-size: 12px;

    }


    .final-cta__actions {

        width: 100%;

        flex-direction: column;

    }


    .final-cta__primary,
    .final-cta__secondary {

        width: 100%;

    }


    .final-cta__visual {

        min-height: 340px;

    }


    .final-cta__badge {

        right: 17px;
        bottom: 17px;

    }


    .site-footer {

        padding-top: 65px;

    }


    .site-footer__main {

        grid-template-columns: 1fr;

        gap: 45px;

        padding-bottom: 50px;

    }


    .site-footer__brand > p {

        max-width: 330px;

    }


    .site-footer__column--services nav {

        display: grid;

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

        gap:
            13px 18px;

    }


    .site-footer__service-strip {

        display: none;

    }


    .site-footer__bottom {

        min-height: auto;

        grid-template-columns: 1fr;

        gap: 14px;

        padding:
            25px 0;

    }


    .site-footer__bottom > div {

        order: 2;

    }


    .site-footer__top {

        justify-self: start;

        order: 3;

    }

}


/*
|--------------------------------------------------------------------------
| SERVICES INDEX HERO
|--------------------------------------------------------------------------
*/

.services-index-hero {

    position: relative;

    overflow: hidden;

    padding:
        75px 0 0;

    background:
        var(--black);

}


.services-index-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .12;

    background-image:

        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:
        62px 62px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 30%,
            #000 80%,
            transparent
        );

}


.services-index-hero__ambient {

    position: absolute;

    width: 700px;
    height: 700px;

    top: -430px;
    right: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.10),
            transparent 68%
        );

}


.services-index-hero__breadcrumbs {

    position: relative;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 65px;

    color: var(--gray-700);

    font-size: 8px;

}


.services-index-hero__breadcrumbs a {

    color: var(--gray-500);

}


.services-index-hero__grid {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(500px, 1.15fr)
        minmax(370px, .85fr);

    gap:
        clamp(
            70px,
            9vw,
            145px
        );

    align-items: end;

    padding-bottom: 78px;

}


.services-index-hero h1 {

    max-width: 820px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            61px,
            6.6vw,
            104px
        );

    font-weight: 570;

    line-height: .91;

    letter-spacing: -.067em;

}


.services-index-hero h1 span {

    display: block;

    color: var(--green);

}


.services-index-hero__intro {

    max-width: 520px;

    padding-bottom: 8px;

}


.services-index-hero__intro p {

    margin: 0;

    color: #949e99;

    font-size: 13px;

    line-height: 1.8;

}


.services-index-hero__intro a {

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

    gap: 11px;

    margin-top: 25px;

    color: var(--white);

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

}


.services-index-hero__intro svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

}


/*
|--------------------------------------------------------------------------
| SERVICE INDEX STATS
|--------------------------------------------------------------------------
*/

.services-index-hero__stats {

    position: relative;

    display: grid;

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

    min-height: 95px;

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

}


.services-index-hero__stats > div {

    display: flex;
    align-items: center;

    gap: 14px;

    padding:
        20px 27px;

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

}


.services-index-hero__stats > div:first-child {

    padding-left: 0;

}


.services-index-hero__stats
> div:last-child {

    border-right: 0;

}


.services-index-hero__stats strong {

    color: var(--white);

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

    letter-spacing: -.04em;

}


.services-index-hero__stats span {

    color: var(--gray-500);

    font-size: 8px;

    line-height: 1.45;

}


/*
|--------------------------------------------------------------------------
| SERVICES INDEX LIST
|--------------------------------------------------------------------------
*/

.services-index-list {

    padding:
        110px 0 130px;

    background:
        #090c0b;

}


.services-index-list__head {

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

    margin-bottom: 27px;
    padding-bottom: 14px;

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

}


.services-index-list__head p,
.services-index-list__head span {

    margin: 0;

    color: var(--gray-500);

    font-size: 7px;
    font-weight: 630;

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

}


.services-index-list__grid {

    display: grid;

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

    gap: 20px;

}


.service-index-card {

    overflow: hidden;

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

    border-radius: 22px;

    background: #101412;

    transition:
        transform .28s ease,
        border-color .28s ease;

}


.service-index-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(124,255,79,.16);

}


.service-index-card__visual {

    position: relative;

    height: 315px;

    display: block;

    overflow: hidden;

}


.service-index-card__visual img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.75)
        contrast(1.07)
        saturate(.80);

    transition:
        transform .5s ease,
        filter .3s ease;

}


.service-index-card:hover
.service-index-card__visual img {

    transform: scale(1.025);

    filter:
        brightness(.82)
        contrast(1.07)
        saturate(.87);

}


.service-index-card__shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,8,6,.05),
            transparent 52%,
            rgba(5,8,6,.64)
        );

}


.service-index-card__number {

    position: absolute;

    top: 18px;
    left: 18px;

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

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

}


.service-index-card__open {

    position: absolute;

    right: 17px;
    bottom: 17px;

    width: 39px;
    height: 39px;

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

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

    border-radius: 50%;

    background:
        rgba(7,9,9,.68);

    color: var(--green);

}


.service-index-card__open svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

}


.service-index-card__content {

    padding:
        28px 27px 30px;

}


.service-index-card__eyebrow {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

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

}


.service-index-card h2 {

    margin:
        12px 0 0;

    color: var(--white);

    font-size:
        clamp(
            24px,
            2.3vw,
            34px
        );

    font-weight: 560;

    line-height: 1.08;

    letter-spacing: -.04em;

}


.service-index-card__content > p {

    max-width: 510px;

    margin:
        16px 0 0;

    color: var(--gray-500);

    font-size: 10px;

    line-height: 1.7;

}


.service-index-card__link {

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

    gap: 10px;

    margin-top: 22px;

    color: var(--gray-100);

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

}


.service-index-card__link svg {

    width: 13px;
    height: 13px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;

}


/*
|--------------------------------------------------------------------------
| SERVICES INDEX CTA
|--------------------------------------------------------------------------
*/

.services-index-cta {

    padding:
        0 0 120px;

    background:
        #090c0b;

}


.services-index-cta__panel {

    min-height: 205px;

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

    gap: 50px;

    padding:
        45px 55px;

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

    border-radius: 23px;

    background:

        radial-gradient(
            circle at 80% 120%,
            rgba(124,255,79,.08),
            transparent 22rem
        ),

        #101512;

}


.services-index-cta__panel > div > span {

    color: var(--green);

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

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

}


.services-index-cta h2 {

    margin:
        10px 0 0;

    color: var(--white);

    font-size: 32px;
    font-weight: 560;

    line-height: 1.08;

    letter-spacing: -.04em;

}


.services-index-cta h2 strong {

    display: block;

    color: var(--gray-500);

    font-weight: inherit;

}


.services-index-cta__panel > a {

    min-height: 52px;

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

    gap: 14px;

    padding:
        0 18px;

    flex: 0 0 auto;

    border-radius: 12px;

    background: var(--green);

    color: #071005;

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

}


.services-index-cta__panel > a svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

}


/*
|--------------------------------------------------------------------------
| SERVICE PAGE HERO
|--------------------------------------------------------------------------
*/

.service-page-hero {

    position: relative;

    overflow: hidden;

    padding:
        58px 0 95px;

    background:
        var(--black);

}


.service-page-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .11;

    background-image:

        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 25%,
            #000 85%,
            transparent
        );

}


.service-page-hero__ambient {

    position: absolute;

    width: 700px;
    height: 700px;

    right: -170px;
    top: -320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.10),
            transparent 68%
        );

}


.service-page-hero__breadcrumbs {

    position: relative;

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

    gap: 8px;

    margin-bottom: 47px;

    color: var(--gray-700);

    font-size: 8px;

}


.service-page-hero__breadcrumbs a {

    color: var(--gray-500);

}


.service-page-hero__grid {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(460px, .92fr)
        minmax(500px, 1.08fr);

    gap:
        clamp(
            55px,
            7vw,
            105px
        );

    align-items: center;

}


.service-page-hero__content {

    position: relative;

    z-index: 4;

}


.service-page-hero h1 {

    max-width: 760px;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(
            53px,
            5.6vw,
            88px
        );

    font-weight: 570;

    line-height: .93;

    letter-spacing: -.062em;

}


.service-page-hero__intro {

    max-width: 630px;

    margin:
        28px 0 0;

    color: #9aa49f;

    font-size: 14px;

    line-height: 1.78;

}


.service-page-hero__actions {

    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 32px;

}


.service-page-hero__primary {

    min-height: 52px;

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

    gap: 15px;

    padding:
        0 18px;

    border-radius: 12px;

    background: var(--green);

    color: #071005;

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

}


.service-page-hero__primary svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

}


.service-page-hero__phone {

    min-height: 52px;

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

    gap: 2px;

    padding:
        0 17px;

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

    border-radius: 12px;

}


.service-page-hero__phone small {

    color: var(--gray-500);

    font-size: 6px;
    text-transform: uppercase;

}


.service-page-hero__phone strong {

    color: var(--white);

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

}


.service-page-hero__meta {

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

    gap: 20px;

    margin-top: 35px;

    color: var(--gray-500);

    font-size: 8px;

}


.service-page-hero__meta span {

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

    gap: 8px;

}


.service-page-hero__meta i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(124,255,79,.07);

}


/*
|--------------------------------------------------------------------------
| SERVICE HERO VISUAL
|--------------------------------------------------------------------------
*/

.service-page-hero__visual {

    position: relative;

    min-height: 555px;

    overflow: hidden;

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

    border-radius:
        170px 24px 24px 24px;

    background: var(--anthracite);

}


.service-page-hero__visual img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.73)
        contrast(1.08)
        saturate(.80);

}


.service-page-hero__shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(5,8,6,.05),
            transparent 48%,
            rgba(5,8,6,.63)
        );

}


.service-page-hero__index {

    position: absolute;

    top: 25px;
    right: 27px;

    color: var(--white);

    font-size: 20px;
    font-weight: 570;

}


.service-page-hero__index small {

    color: var(--gray-500);

    font-size: 8px;

}


.service-page-hero__visual-card {

    position: absolute;

    right: 23px;
    bottom: 23px;
    left: 23px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        14px 16px;

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

    border-radius: 12px;

    background:
        rgba(7,9,9,.70);

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

    backdrop-filter:
        blur(12px);

}


.service-page-hero__visual-card > span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px rgba(124,255,79,.07);

}


.service-page-hero__visual-card > div {

    display: flex;
    flex-direction: column;

    gap: 2px;

}


.service-page-hero__visual-card small {

    color: var(--gray-500);

    font-size: 6px;
    text-transform: uppercase;

}


.service-page-hero__visual-card strong {

    color: var(--white);

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

}


/*
|--------------------------------------------------------------------------
| SERVICE DETAILS
|--------------------------------------------------------------------------
*/

.service-details {

    padding:
        125px 0 135px;

    background:
        #090c0b;

}


.service-details__grid {

    display: grid;

    grid-template-columns:
        minmax(300px, .62fr)
        minmax(590px, 1.38fr);

    gap:
        clamp(
            70px,
            9vw,
            145px
        );

    align-items: start;

}


.service-details__side {

    position: sticky;

    top: 125px;

}


.service-details__side > span {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

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

}


.service-details__side h2 {

    margin:
        15px 0 0;

    color: var(--white);

    font-size: 35px;
    font-weight: 560;

    line-height: 1.03;

    letter-spacing: -.045em;

}


.service-details__side h2 strong {

    display: block;

    color: var(--green);

    font-weight: inherit;

}


.service-details__side p {

    margin:
        22px 0 0;

    color: var(--gray-500);

    font-size: 11px;

    line-height: 1.7;

}


.service-details__side a {

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

    gap: 10px;

    margin-top: 25px;

    color: var(--white);

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

}


.service-details__side a svg {

    width: 13px;
    height: 13px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;

}


/*
|--------------------------------------------------------------------------
| DETAIL BLOCKS
|--------------------------------------------------------------------------
*/

.service-detail-block {

    padding:
        0 0 60px;

    margin-bottom: 60px;

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

}


.service-detail-block__head {

    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 20px;

    margin-bottom: 32px;

}


.service-detail-block__head > span {

    color: var(--green);

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

}


.service-detail-block__head small {

    color: var(--gray-500);

    font-size: 7px;
    font-weight: 650;

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

}


.service-detail-block__head h2 {

    margin:
        7px 0 0;

    color: var(--white);

    font-size:
        clamp(
            28px,
            3vw,
            43px
        );

    font-weight: 560;

    line-height: 1.08;

    letter-spacing: -.045em;

}


.service-detail-list {

    display: grid;

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

    gap: 10px;

}


.service-detail-list > div {

    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        12px 15px;

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

    border-radius: 11px;

    background: #101412;

}


.service-detail-list > div > span {

    width: 26px;
    height: 26px;

    flex: 0 0 auto;

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

    border-radius: 8px;

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

}


.service-detail-list svg {

    width: 12px;
    height: 12px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.7;

}


.service-detail-list p,
.service-process-list p {

    margin: 0;

    color: var(--gray-300);

    font-size: 9px;

    line-height: 1.5;

}


.service-process-list {

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

}


.service-process-list > div {

    min-height: 65px;

    display: grid;

    grid-template-columns:
        50px 1fr;

    align-items: center;

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

}


.service-process-list > div > span {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

}


.service-process-list p {

    font-size: 10px;

}


.service-detail-quote {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 18px;

    margin: 0;
    padding: 27px;

    border:
        1px solid rgba(124,255,79,.13);

    border-radius: 16px;

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

}


.service-detail-quote > span {

    width: 39px;
    height: 39px;

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

    border-radius: 10px;

    background:
        rgba(124,255,79,.07);

}


.service-detail-quote svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.5;

}


.service-detail-quote p {

    margin: 0;

    color: var(--gray-100);

    font-size: 13px;

    line-height: 1.65;

}


/*
|--------------------------------------------------------------------------
| SERVICE CONTACT CTA
|--------------------------------------------------------------------------
*/

.service-contact {

    padding:
        0 0 130px;

    background:
        #090c0b;

}


.service-contact__panel {

    min-height: 250px;

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

    gap: 60px;

    padding:
        50px 55px;

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

    border-radius: 24px;

    background:

        radial-gradient(
            circle at 80% 110%,
            rgba(124,255,79,.10),
            transparent 24rem
        ),

        #111614;

}


.service-contact__panel > div:first-child {

    max-width: 680px;

}


.service-contact__panel
> div:first-child > span {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

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

}


.service-contact h2 {

    margin:
        10px 0 0;

    color: var(--white);

    font-size:
        clamp(
            34px,
            3.6vw,
            52px
        );

    font-weight: 560;

    line-height: 1.02;

    letter-spacing: -.05em;

}


.service-contact h2 strong {

    color: var(--green);

    font-weight: inherit;

}


.service-contact__panel
> div:first-child > p {

    max-width: 570px;

    margin:
        17px 0 0;

    color: var(--gray-500);

    font-size: 10px;

    line-height: 1.7;

}


.service-contact__actions {

    display: flex;
    flex-direction: column;

    gap: 9px;

    flex: 0 0 auto;

}


.service-contact__actions > a {

    min-height: 46px;

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

    padding:
        0 16px;

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

    border-radius: 11px;

    color: var(--gray-300);

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

}


.service-contact__actions
.service-contact__whatsapp {

    gap: 12px;

    border: 0;

    background: var(--green);

    color: #071005;

}


.service-contact__whatsapp svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

}


/*
|--------------------------------------------------------------------------
| RELATED SERVICES
|--------------------------------------------------------------------------
*/

.related-services {

    padding:
        115px 0 130px;

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

    background:
        var(--black);

}


.related-services__head {

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

    gap: 40px;

    margin-bottom: 35px;

}


.related-services__head span {

    color: var(--green);

    font-size: 7px;
    font-weight: 650;

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

}


.related-services__head h2 {

    margin:
        8px 0 0;

    color: var(--white);

    font-size: 38px;
    font-weight: 560;

    letter-spacing: -.045em;

}


.related-services__head > a {

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

    gap: 9px;

    color: var(--gray-300);

    font-size: 9px;

}


.related-services__head svg {

    width: 13px;
    height: 13px;

    fill: none;

    stroke: var(--green);
    stroke-width: 1.6;

}


.related-services__grid {

    display: grid;

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

    gap: 17px;

}


.related-services__grid article {

    overflow: hidden;

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

    border-radius: 17px;

    background: #101412;

}


.related-services__visual {

    position: relative;

    height: 210px;

    display: block;

    overflow: hidden;

}


.related-services__visual img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.76)
        saturate(.82);

    transition:
        transform .4s ease;

}


.related-services__grid article:hover
.related-services__visual img {

    transform: scale(1.025);

}


.related-services__visual > span {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5,8,6,.38)
        );

}


.related-services__grid article > div {

    padding:
        18px 19px 21px;

}


.related-services__grid small {

    color: var(--green);

    font-size: 6px;
    font-weight: 650;

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

}


.related-services__grid h3 {

    margin:
        8px 0 0;

    color: var(--white);

    font-size: 16px;
    font-weight: 560;

    line-height: 1.2;

    letter-spacing: -.03em;

}


/*
|--------------------------------------------------------------------------
| SERVICES TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 950px) {

    .services-index-hero__grid,
    .service-page-hero__grid {

        grid-template-columns: 1fr;

    }


    .services-index-hero__intro {

        max-width: 650px;

    }


    .services-index-list__grid {

        grid-template-columns: 1fr;

    }


    .service-page-hero__visual {

        min-height: 520px;

    }


    .service-details__grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .service-details__side {

        position: static;

        max-width: 600px;

    }


    .service-contact__panel {

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

    }


    .service-contact__actions {

        width: 100%;

        max-width: 400px;

    }

}


/*
|--------------------------------------------------------------------------
| SERVICES MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .services-index-hero {

        padding-top: 45px;

    }


    .services-index-hero__breadcrumbs {

        margin-bottom: 42px;

    }


    .services-index-hero__grid {

        gap: 32px;

        padding-bottom: 52px;

    }


    .services-index-hero h1 {

        font-size:
            clamp(
                49px,
                14.2vw,
                67px
            );

    }


    .services-index-hero__stats {

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

    }


    .services-index-hero__stats > div {

        min-height: 75px;

        padding:
            15px;

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

    }


    .services-index-hero__stats
    > div:first-child {

        padding-left: 15px;

    }


    .services-index-list {

        padding:
            80px 0 95px;

    }


    .service-index-card__visual {

        height: 255px;

    }


    .service-index-card__content {

        padding:
            23px 21px 25px;

    }


    .services-index-cta {

        padding-bottom: 90px;

    }


    .services-index-cta__panel {

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

        gap: 28px;

        padding:
            32px 24px;

    }


    .services-index-cta__panel > a {

        width: 100%;

        justify-content: center;

    }


    .service-page-hero {

        padding:
            38px 0 75px;

    }


    .service-page-hero__breadcrumbs {

        margin-bottom: 38px;

    }


    .service-page-hero h1 {

        font-size:
            clamp(
                46px,
                13.5vw,
                62px
            );

    }


    .service-page-hero__intro {

        font-size: 12px;

    }


    .service-page-hero__actions {

        flex-direction: column;

    }


    .service-page-hero__primary,
    .service-page-hero__phone {

        width: 100%;

    }


    .service-page-hero__visual {

        min-height: 390px;

        border-radius:
            90px 19px 19px 19px;

    }


    .service-details {

        padding:
            85px 0 95px;

    }


    .service-detail-list {

        grid-template-columns: 1fr;

    }


    .service-detail-block {

        margin-bottom: 45px;

        padding-bottom: 45px;

    }


    .service-detail-block__head {

        grid-template-columns:
            32px 1fr;

        gap: 12px;

    }


    .service-detail-quote {

        padding:
            21px;

    }


    .service-contact {

        padding-bottom: 95px;

    }


    .service-contact__panel {

        padding:
            32px 23px;

    }


    .service-contact__actions {

        max-width: none;

    }


    .related-services {

        padding:
            85px 0 95px;

    }


    .related-services__head {

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

    }


    .related-services__grid {

        grid-template-columns: 1fr;

    }


    .related-services__visual {

        height: 240px;

    }

}


/*
|--------------------------------------------------------------------------
| SERVICES CATALOG — REFERENCE STYLE
|--------------------------------------------------------------------------
*/

.services-catalog {

    position: relative;

    padding:
        55px 0 105px;

    background:
        #111412;

}


/*
|--------------------------------------------------------------------------
| INTRO
|--------------------------------------------------------------------------
*/

.services-catalog__intro {

    padding-bottom:
        52px;

}


.services-catalog__breadcrumb {

    display: flex;
    align-items: center;

    gap: 8px;

    color:
        #626b66;

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

}


.services-catalog__breadcrumb a {

    color:
        #7d8781;

    transition:
        color .2s ease;

}


.services-catalog__breadcrumb a:hover {

    color:
        var(--green);

}


.services-catalog__title-row {

    display: grid;

    grid-template-columns:
        minmax(480px, 1fr)
        minmax(300px, .48fr);

    gap:
        80px;

    align-items: end;

    margin-top:
        27px;

}


.services-catalog__title-row h1 {

    margin: 0;

    max-width:
        740px;

    color:
        var(--white);

    font-size:
        clamp(
            45px,
            4.8vw,
            70px
        );

    font-weight:
        570;

    line-height:
        .97;

    letter-spacing:
        -.055em;

}


.services-catalog__title-row h1 span {

    color:
        var(--green);

}


.services-catalog__intro-copy {

    max-width:
        430px;

    margin:
        0 0 4px;

    color:
        #8b958f;

    font-size:
        11px;

    line-height:
        1.7;

}


/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.services-catalog__grid {

    display: grid;

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

    gap:
        18px;

}


/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.services-catalog-card {

    position: relative;

    min-height:
        285px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(185px, .97fr);

    overflow: hidden;

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

    border-radius:
        15px;

    background:
        #090b0a;

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.services-catalog-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(124,255,79,.15);

    box-shadow:
        0 24px 65px
        rgba(0,0,0,.18);

}


/*
|--------------------------------------------------------------------------
| CARD CONTENT
|--------------------------------------------------------------------------
*/

.services-catalog-card__content {

    position: relative;

    z-index: 5;

    min-width: 0;

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

    padding:
        29px
        10px
        28px
        30px;

}


.services-catalog-card__top {

    display: flex;
    align-items: center;

    gap:
        10px;

    margin-bottom:
        19px;

}


.services-catalog-card__number {

    color:
        var(--green);

    font-size:
        7px;

    font-weight:
        680;

    letter-spacing:
        .08em;

}


.services-catalog-card__category {

    padding-left:
        10px;

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

    color:
        #58615c;

    font-size:
        6px;

    font-weight:
        630;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.services-catalog-card h2 {

    max-width:
        260px;

    margin:
        0;

    color:
        var(--white);

    font-size:
        clamp(
            17px,
            1.55vw,
            23px
        );

    font-weight:
        570;

    line-height:
        1.12;

    letter-spacing:
        -.035em;

}


.services-catalog-card h2 a {

    transition:
        color .2s ease;

}


.services-catalog-card:hover h2 a {

    color:
        #f4f7f5;

}


.services-catalog-card__content > p {

    max-width:
        255px;

    margin:
        13px 0 0;

    color:
        #69726d;

    font-size:
        8.5px;

    line-height:
        1.58;

}


.services-catalog-card__button {

    min-height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    margin-top:
        auto;

    padding:
        0 12px;

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

    border-radius:
        7px;

    color:
        #f0f3f1;

    font-size:
        7.5px;

    font-weight:
        620;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;

}


.services-catalog-card__button svg {

    width:
        11px;

    height:
        11px;

    fill:
        none;

    stroke:
        var(--green);

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.services-catalog-card__button:hover {

    border-color:
        var(--green);

    background:
        rgba(124,255,79,.04);

}


/*
|--------------------------------------------------------------------------
| VISUAL
|--------------------------------------------------------------------------
*/

.services-catalog-card__visual {

    position: relative;

    min-width: 0;

    min-height:
        285px;

    display: block;

    overflow: hidden;

}


.services-catalog-card__visual::before {

    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    background:

        radial-gradient(
            circle at 72% 50%,
            rgba(124,255,79,.065),
            transparent 42%
        );

}


.services-catalog-card__glow {

    position: absolute;

    z-index: 1;

    width:
        180px;

    height:
        180px;

    right:
        -40px;

    bottom:
        -55px;

    border-radius:
        50%;

    background:
        rgba(124,255,79,.07);

    filter:
        blur(55px);

}


.services-catalog-card__visual img {

    position: absolute;

    z-index: 2;

    width:
        111%;

    height:
        92%;

    right:
        -9%;

    bottom:
        -3%;

    object-fit:
        contain;

    object-position:
        center right;

    filter:
        brightness(.81)
        contrast(1.05)
        saturate(.84);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        filter .3s ease;

}


.services-catalog-card:hover
.services-catalog-card__visual img {

    transform:
        scale(1.035)
        translateX(-2px);

    filter:
        brightness(.89)
        contrast(1.05)
        saturate(.92);

}


.services-catalog-card__visual-shade {

    position: absolute;

    z-index: 3;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            #090b0a 0%,
            rgba(9,11,10,.88) 8%,
            rgba(9,11,10,.29) 38%,
            transparent 70%
        ),

        linear-gradient(
            0deg,
            rgba(5,7,6,.19),
            transparent 60%
        );

}


.services-catalog-card__arrow {

    position: absolute;

    z-index: 5;

    right:
        15px;

    top:
        15px;

    width:
        29px;

    height:
        29px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        rgba(7,9,8,.54);

    opacity:
        0;

    transform:
        translateY(-4px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        background .2s ease;

}


.services-catalog-card:hover
.services-catalog-card__arrow {

    opacity:
        1;

    transform:
        none;

}


.services-catalog-card__arrow svg {

    width:
        12px;

    height:
        12px;

    fill:
        none;

    stroke:
        var(--green);

    stroke-width:
        1.6;

}


/*
|--------------------------------------------------------------------------
| PHOTO IMAGES — MORE FILL
|--------------------------------------------------------------------------
*/

.services-catalog-card:nth-child(1)
.services-catalog-card__visual img,

.services-catalog-card:nth-child(2)
.services-catalog-card__visual img,

.services-catalog-card:nth-child(3)
.services-catalog-card__visual img,

.services-catalog-card:nth-child(4)
.services-catalog-card__visual img,

.services-catalog-card:nth-child(6)
.services-catalog-card__visual img,

.services-catalog-card:nth-child(9)
.services-catalog-card__visual img,

.services-catalog-card:nth-child(10)
.services-catalog-card__visual img {

    width:
        118%;

    height:
        100%;

    right:
        -14%;

    bottom:
        0;

    object-fit:
        cover;

}


/*
|--------------------------------------------------------------------------
| LAST CARD
|--------------------------------------------------------------------------
*/

.services-catalog-card:last-child {

    grid-column:
        1 / 2;

}


/*
|--------------------------------------------------------------------------
| CONTACT STRIP
|--------------------------------------------------------------------------
*/

.services-catalog__contact-strip {

    min-height:
        76px;

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

    gap:
        35px;

    margin-top:
        20px;

    padding:
        15px 19px;

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

    border-radius:
        13px;

    background:
        #0b0e0c;

}


.services-catalog__contact-strip
> div {

    display: flex;
    align-items: center;

    gap:
        13px;

}


.services-catalog__contact-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 5px
        rgba(124,255,79,.065);

}


.services-catalog__contact-strip
> div > div {

    display: flex;
    flex-direction: column;

    gap:
        3px;

}


.services-catalog__contact-strip small {

    color:
        #555e59;

    font-size:
        6px;

    font-weight:
        650;

    text-transform:
        uppercase;

    letter-spacing:
        .09em;

}


.services-catalog__contact-strip strong {

    color:
        #b5bdb8;

    font-size:
        9px;

    font-weight:
        550;

}


.services-catalog__contact-strip
> a {

    min-height:
        37px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    flex:
        0 0 auto;

    padding:
        0 13px;

    border:
        1px solid
        rgba(124,255,79,.15);

    border-radius:
        8px;

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

    color:
        #d9dfdb;

    font-size:
        8px;

    font-weight:
        620;

}


.services-catalog__contact-strip
> a svg {

    width:
        12px;

    height:
        12px;

    fill:
        none;

    stroke:
        var(--green);

    stroke-width:
        1.6;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1020px) {

    .services-catalog__title-row {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }


    .services-catalog__intro-copy {

        max-width:
            600px;

    }


    .services-catalog__grid {

        grid-template-columns:
            1fr;

    }


    .services-catalog-card:last-child {

        grid-column:
            auto;

    }


    .services-catalog-card {

        min-height:
            310px;

        grid-template-columns:
            minmax(300px, .9fr)
            minmax(300px, 1.1fr);

    }


    .services-catalog-card__visual {

        min-height:
            310px;

    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .services-catalog {

        padding:
            38px 0 80px;

    }


    .services-catalog__intro {

        padding-bottom:
            37px;

    }


    .services-catalog__title-row {

        margin-top:
            22px;

    }


    .services-catalog__title-row h1 {

        font-size:
            clamp(
                45px,
                13.5vw,
                58px
            );

    }


    .services-catalog__intro-copy {

        font-size:
            10px;

    }


    .services-catalog__grid {

        gap:
            13px;

    }


    .services-catalog-card {

        min-height:
            455px;

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto
            225px;

        border-radius:
            14px;

    }


    .services-catalog-card__content {

        padding:
            24px 22px 22px;

    }


    .services-catalog-card h2 {

        max-width:
            330px;

        font-size:
            23px;

    }


    .services-catalog-card__content > p {

        max-width:
            330px;

        font-size:
            9px;

    }


    .services-catalog-card__button {

        margin-top:
            22px;

    }


    .services-catalog-card__visual {

        min-height:
            225px;

    }


    .services-catalog-card__visual img {

        width:
            104% !important;

        height:
            105% !important;

        right:
            -4% !important;

        bottom:
            -5% !important;

        object-fit:
            contain !important;

    }


    .services-catalog-card__visual-shade {

        background:

            linear-gradient(
                180deg,
                #090b0a 0%,
                rgba(9,11,10,.34) 20%,
                transparent 58%
            ),

            linear-gradient(
                0deg,
                rgba(5,7,6,.15),
                transparent
            );

    }


    .services-catalog-card__arrow {

        opacity:
            1;

        transform:
            none;

    }


    .services-catalog__contact-strip {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            18px;

    }


    .services-catalog__contact-strip
    > a {

        width:
            100%;

        justify-content:
            center;

    }

}


/*
|--------------------------------------------------------------------------
| OUR WORKS REFERENCE V2
|--------------------------------------------------------------------------
*/

.works-catalog {

    padding:
        52px 0 110px;

    background:
        #111412;

}


.works-catalog__intro {

    padding-bottom:
        48px;

}


.works-catalog__breadcrumb {

    display: flex;
    align-items: center;

    gap: 8px;

    color:
        #626b66;

    font-size: 8px;

}


.works-catalog__breadcrumb a {

    color:
        #7c8680;

}


.works-catalog__intro h1 {

    margin:
        28px 0 0;

    color:
        var(--white);

    font-size:
        clamp(
            34px,
            3vw,
            48px
        );

    font-weight:
        570;

    letter-spacing:
        -.045em;

}


/*
|--------------------------------------------------------------------------
| FEATURED
|--------------------------------------------------------------------------
*/

.works-featured {

    min-height:
        370px;

    display: grid;

    grid-template-columns:
        minmax(330px, .82fr)
        minmax(500px, 1.18fr);

    overflow: hidden;

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

    border-radius:
        16px;

    background:
        #090b0a;

}


.works-featured__content {

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

    padding:
        38px 34px;

}


.works-featured__tags,
.works-list-card__tags {

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

    gap:
        6px;

}


.works-featured__tags span,
.works-list-card__tags span {

    padding:
        5px 7px;

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

    border-radius:
        5px;

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

    color:
        #7e8882;

    font-size:
        6px;

    font-weight:
        620;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


.works-featured h2 {

    max-width:
        390px;

    margin:
        18px 0 0;

    color:
        var(--white);

    font-size:
        clamp(
            28px,
            2.8vw,
            42px
        );

    font-weight:
        580;

    line-height:
        1.04;

    letter-spacing:
        -.045em;

}


.works-featured__content > p {

    max-width:
        390px;

    margin:
        22px 0 0;

    color:
        #737d77;

    font-size:
        10px;

    line-height:
        1.65;

}


.works-featured__button,
.works-list-card__button {

    min-height:
        35px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        auto;

    padding:
        0 12px;

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

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--white);

    cursor:
        pointer;

    font-size:
        7.5px;

    font-weight:
        620;

}


.works-featured__button svg,
.works-list-card__button svg {

    width:
        11px;

    height:
        11px;

    fill:
        none;

    stroke:
        var(--green);

    stroke-width:
        1.6;

}


.works-featured__visual {

    position:
        relative;

    min-height:
        370px;

    overflow:
        hidden;

    padding:
        0;

    border:
        0;

    background:
        #121613;

    cursor:
        zoom-in;

}


.works-featured__visual img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        brightness(.83)
        contrast(1.04)
        saturate(.88);

    transition:
        transform .45s ease;

}


.works-featured:hover
.works-featured__visual img {

    transform:
        scale(1.02);

}


.works-featured__visual > span {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(9,11,10,.18),
            transparent 32%
        );

}


/*
|--------------------------------------------------------------------------
| FILTERS
|--------------------------------------------------------------------------
*/

.works-filters {

    display:
        grid;

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

    gap:
        15px;

    margin-top:
        45px;

}


.works-filter {

    position:
        relative;

    min-height:
        84px;

    padding:
        13px 17px;

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

    border-radius:
        10px;

    background:
        #1a1e1b;

}


.works-filter__label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #555e59;

    font-size:
        6px;

    text-transform:
        uppercase;

}


.works-filter__button {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

}


.works-filter__button
> span:first-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.works-filter__button small {

    color:
        #69726d;

    font-size:
        7px;

}


.works-filter__button strong {

    color:
        var(--white);

    font-size:
        10px;

    font-weight:
        560;

}


.works-filter__plus {

    width:
        29px;

    height:
        29px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        var(--white);

    font-size:
        18px;

    font-weight:
        300;

}


.works-filter__menu {

    position:
        absolute;

    z-index:
        30;

    top:
        calc(100% + 7px);

    right:
        0;

    left:
        0;

    display:
        none;

    overflow:
        hidden;

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

    border-radius:
        9px;

    background:
        #111512;

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.35);

}


.works-filter.is-open
.works-filter__menu {

    display:
        block;

}


.works-filter__menu button {

    width:
        100%;

    min-height:
        39px;

    padding:
        0 14px;

    border:
        0;

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

    background:
        transparent;

    color:
        #a5aea9;

    text-align:
        left;

    cursor:
        pointer;

    font-size:
        8px;

}


.works-filter__menu button:hover {

    background:
        rgba(124,255,79,.045);

    color:
        var(--white);

}


.works-filters__clear {

    min-height:
        84px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

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

    border-radius:
        10px;

    background:
        #1a1e1b;

    color:
        #d0d6d2;

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        560;

}


.works-filters__clear svg {

    width:
        13px;

    height:
        13px;

    fill:
        none;

    stroke:
        var(--green);

    stroke-width:
        1.5;

}


/*
|--------------------------------------------------------------------------
| ALL WORKS
|--------------------------------------------------------------------------
*/

.works-list {

    margin-top:
        60px;

}


.works-list__heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        17px;

    color:
        #67706b;

    font-size:
        7px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.works-list__grid {

    display:
        grid;

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

    gap:
        16px;

}


/*
|--------------------------------------------------------------------------
| WORK CARD
|--------------------------------------------------------------------------
*/

.works-list-card {

    min-height:
        285px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, .92fr);

    overflow:
        hidden;

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

    border-radius:
        13px;

    background:
        #090b0a;

    transition:
        border-color .2s ease,
        transform .2s ease;

}


.works-list-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(124,255,79,.14);

}


.works-list-card[hidden] {

    display:
        none !important;

}


.works-list-card__content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    min-width:
        0;

    padding:
        25px 10px 25px 25px;

}


.works-list-card h2 {

    max-width:
        260px;

    margin:
        14px 0 0;

    color:
        var(--white);

    font-size:
        clamp(
            17px,
            1.6vw,
            23px
        );

    font-weight:
        570;

    line-height:
        1.12;

    letter-spacing:
        -.035em;

}


.works-list-card__content > p {

    max-width:
        250px;

    margin:
        13px 0 0;

    color:
        #68716c;

    font-size:
        8.5px;

    line-height:
        1.58;

}


.works-list-card__visual {

    position:
        relative;

    min-height:
        285px;

    overflow:
        hidden;

    padding:
        0;

    border:
        0;

    background:
        #131714;

    cursor:
        zoom-in;

}


.works-list-card__visual img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        brightness(.82)
        contrast(1.05)
        saturate(.88);

    transition:
        transform .4s ease,
        filter .25s ease;

}


.works-list-card:hover
.works-list-card__visual img {

    transform:
        scale(1.025);

    filter:
        brightness(.88)
        contrast(1.05)
        saturate(.93);

}


.works-list-card__shade {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(9,11,10,.28),
            transparent 37%
        );

}


/*
|--------------------------------------------------------------------------
| PAGINATION / EMPTY
|--------------------------------------------------------------------------
*/

.works-list__empty {

    min-height:
        180px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px dashed rgba(255,255,255,.10);

    border-radius:
        12px;

    color:
        #69726d;

    font-size:
        10px;

}


.works-list__empty[hidden] {

    display:
        none;

}


.works-pagination {

    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        40px;

}


.works-pagination button {

    width:
        30px;

    height:
        30px;

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

    border-radius:
        7px;

    background:
        #151916;

    color:
        #7c857f;

    font-size:
        8px;

}


.works-pagination button.is-active {

    border-color:
        var(--white);

    background:
        var(--white);

    color:
        #070907;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 950px) {

    .works-featured {

        grid-template-columns:
            1fr;

    }


    .works-featured__visual {

        min-height:
            420px;

    }


    .works-filters {

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

    }


    .works-filters__clear {

        grid-column:
            span 2;

    }


    .works-list__grid {

        grid-template-columns:
            1fr;

    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .works-catalog {

        padding:
            38px 0 80px;

    }


    .works-catalog__intro {

        padding-bottom:
            35px;

    }


    .works-featured {

        min-height:
            0;

    }


    .works-featured__content {

        padding:
            26px 22px;

    }


    .works-featured__button {

        margin-top:
            25px;

    }


    .works-featured__visual {

        min-height:
            300px;

    }


    .works-filters {

        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-top:
            30px;

    }


    .works-filters__clear {

        grid-column:
            auto;

        min-height:
            58px;

    }


    .works-list {

        margin-top:
            45px;

    }


    .works-list-card {

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto
            260px;

    }


    .works-list-card__content {

        padding:
            23px 21px;

    }


    .works-list-card__button {

        margin-top:
            22px;

    }


    .works-list-card__visual {

        min-height:
            260px;

    }

}


/*
|--------------------------------------------------------------------------
| CONTACT PAGE REFERENCE V1
|--------------------------------------------------------------------------
*/

.contact-page {

    padding:
        52px 0 110px;

    background:
        #111412;

}


/*
|--------------------------------------------------------------------------
| INTRO
|--------------------------------------------------------------------------
*/

.contact-page__intro {

    padding-bottom:
        47px;

}


.contact-page__breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #626b66;

    font-size:
        8px;

}


.contact-page__breadcrumb a {

    color:
        #7c8680;

}


.contact-page__intro h1 {

    max-width:
        850px;

    margin:
        28px 0 0;

    color:
        var(--white);

    font-size:
        clamp(
            34px,
            3.1vw,
            49px
        );

    font-weight:
        570;

    line-height:
        1.05;

    letter-spacing:
        -.045em;

}


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

.contact-map {

    position:
        relative;

    height:
        470px;

    overflow:
        hidden;

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

    border-radius:
        17px;

    background:
        #171a18;

}


.contact-map iframe {

    position:
        absolute;

    inset:
        -2%;

    width:
        104%;

    height:
        104%;

    border:
        0;

    filter:
        grayscale(1)
        invert(.87)
        contrast(.82)
        brightness(.72);

}


.contact-map__shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        rgba(7,9,8,.06);

}


.contact-map__location {

    position:
        absolute;

    z-index:
        5;

    left:
        50%;

    bottom:
        34px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        11px 14px;

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

    border-radius:
        12px;

    background:
        rgba(8,11,9,.84);

    transform:
        translateX(-50%);

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

    backdrop-filter:
        blur(12px);

    white-space:
        nowrap;

}


.contact-map__pin {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--green);

    color:
        #071005;

}


.contact-map__pin svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

}


.contact-map__location
> span:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.contact-map__location small {

    color:
        #757e79;

    font-size:
        6px;

    font-weight:
        620;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.contact-map__location strong {

    color:
        var(--white);

    font-size:
        9px;

    font-weight:
        580;

}


/*
|--------------------------------------------------------------------------
| INFORMATION
|--------------------------------------------------------------------------
*/

.contact-information {

    display:
        grid;

    grid-template-columns:
        minmax(220px, .42fr)
        minmax(500px, 1.58fr);

    gap:
        clamp(
            60px,
            9vw,
            140px
        );

    padding:
        72px 0 75px;

}


.contact-information__label h2,
.contact-request__label h2 {

    margin:
        0;

    color:
        var(--white);

    font-size:
        21px;

    font-weight:
        570;

    letter-spacing:
        -.025em;

}


.contact-information__details {

    display:
        grid;

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

    gap:
        45px;

}


.contact-information__item {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.contact-information__item
> span {

    margin-bottom:
        12px;

    color:
        #6f7873;

    font-size:
        8px;

}


.contact-information__item
> strong {

    color:
        #d9dfdb;

    font-size:
        10px;

    font-weight:
        540;

    line-height:
        1.65;

}


.contact-information__phone {

    color:
        var(--white);

    font-size:
        15px;

    font-weight:
        570;

}


.contact-information__item
> a:not(.contact-information__phone) {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        10px;

    color:
        var(--green);

    font-size:
        8px;

    font-weight:
        620;

}


.contact-information__item
> a svg {

    width:
        11px;

    height:
        11px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

}


.contact-information__whatsapp-link {

    text-decoration:
        underline;

    text-underline-offset:
        3px;

}


.contact-information__item em {

    margin-top:
        9px;

    color:
        var(--green);

    font-size:
        8px;

    font-style:
        normal;

    font-weight:
        620;

}


/*
|--------------------------------------------------------------------------
| REQUEST
|--------------------------------------------------------------------------
*/

.contact-request {

    display:
        grid;

    grid-template-columns:
        minmax(220px, .42fr)
        minmax(500px, 1.58fr);

    gap:
        clamp(
            60px,
            9vw,
            140px
        );

    padding:
        0 0 70px;

}


.contact-request__content {

    max-width:
        900px;

}


.contact-request__lead {

    max-width:
        800px;

    margin:
        0;

    color:
        #c0c7c3;

    font-size:
        13px;

    line-height:
        1.7;

}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.contact-request__form {

    margin-top:
        55px;

}


.contact-request__row {

    display:
        grid;

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

    gap:
        22px;

}


.contact-request__form label {

    display:
        flex;

    flex-direction:
        column;

    margin-bottom:
        25px;

}


.contact-request__form label
> span {

    margin-bottom:
        7px;

    color:
        #727b76;

    font-size:
        8px;

}


.contact-request__form input,
.contact-request__form select,
.contact-request__form textarea {

    width:
        100%;

    border:
        0;

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

    border-radius:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--white);

    font-family:
        inherit;

    font-size:
        11px;

    transition:
        border-color .2s ease;

}


.contact-request__form input,
.contact-request__form select {

    height:
        40px;

}


.contact-request__form textarea {

    min-height:
        120px;

    padding:
        10px 0;

    resize:
        vertical;

}


.contact-request__form input:focus,
.contact-request__form select:focus,
.contact-request__form textarea:focus {

    border-color:
        var(--green);

}


.contact-request__form select {

    appearance:
        auto;

}


.contact-request__form select option {

    background:
        #121613;

    color:
        var(--white);

}


.contact-request__form
textarea::placeholder {

    color:
        #555e59;

}


.contact-request__bottom {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;

    margin-top:
        8px;

}


.contact-request__bottom p {

    max-width:
        540px;

    margin:
        0;

    color:
        #656e69;

    font-size:
        7px;

    line-height:
        1.6;

}


.contact-request__bottom button {

    min-width:
        175px;

    min-height:
        45px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(--green);

    color:
        #071005;

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        680;

}


.contact-request__bottom button svg {

    width:
        13px;

    height:
        13px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

}


/*
|--------------------------------------------------------------------------
| CONTACT TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 950px) {

    .contact-information,
    .contact-request {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .contact-information__details {

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

    }

}


/*
|--------------------------------------------------------------------------
| CONTACT MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .contact-page {

        padding:
            38px 0 75px;

    }


    .contact-page__intro {

        padding-bottom:
            35px;

    }


    .contact-page__intro h1 {

        font-size:
            clamp(
                34px,
                10vw,
                46px
            );

    }


    .contact-map {

        height:
            360px;

        border-radius:
            14px;

    }


    .contact-map__location {

        right:
            15px;

        bottom:
            15px;

        left:
            15px;

        width:
            auto;

        transform:
            none;

        white-space:
            normal;

    }


    .contact-information {

        padding:
            55px 0 60px;

    }


    .contact-information__details {

        grid-template-columns:
            1fr;

        gap:
            32px;

    }


    .contact-request {

        padding-bottom:
            40px;

    }


    .contact-request__lead {

        font-size:
            12px;

    }


    .contact-request__form {

        margin-top:
            40px;

    }


    .contact-request__row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .contact-request__bottom {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .contact-request__bottom button {

        width:
            100%;

    }

}


/*
|--------------------------------------------------------------------------
| GLOBAL IMAGE PLACEHOLDER MODE V1
|--------------------------------------------------------------------------
|
| DEVELOPMENT ONLY
|
| Preserves every original image URL and layout.
| Real images are hidden visually.
|
*/

.image-placeholders
main
.image-slot-hidden {

    opacity: 0 !important;

    visibility: hidden !important;

}


.image-placeholders
.image-slot-parent {

    position: relative !important;

    isolation: isolate;

}


/*
|--------------------------------------------------------------------------
| PLACEHOLDER
|--------------------------------------------------------------------------
*/

.image-placeholders
.image-placeholder-overlay {

    position: absolute;

    z-index: 50;

    inset: 0;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    overflow: hidden;

    border:
        1px dashed
        rgba(124,255,79,.28);

    background:

        linear-gradient(
            45deg,
            rgba(255,255,255,.018) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.018) 75%
        ),

        linear-gradient(
            45deg,
            rgba(255,255,255,.018) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.018) 75%
        ),

        radial-gradient(
            circle at center,
            rgba(124,255,79,.055),
            transparent 48%
        ),

        #0a0d0b;

    background-position:
        0 0,
        14px 14px,
        center,
        center;

    background-size:
        28px 28px,
        28px 28px,
        auto,
        auto;

    color:
        var(--white);

    pointer-events:
        none;

}


/*
|--------------------------------------------------------------------------
| CROSS LINES
|--------------------------------------------------------------------------
*/

.image-placeholders
.image-placeholder-overlay::before,

.image-placeholders
.image-placeholder-overlay::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 140%;

    height: 1px;

    background:
        rgba(124,255,79,.07);

    transform-origin:
        center;

}


.image-placeholders
.image-placeholder-overlay::before {

    transform:
        translate(-50%, -50%)
        rotate(32deg);

}


.image-placeholders
.image-placeholder-overlay::after {

    transform:
        translate(-50%, -50%)
        rotate(-32deg);

}


/*
|--------------------------------------------------------------------------
| IMG LABEL
|--------------------------------------------------------------------------
*/

.image-placeholders
.image-placeholder-overlay strong {

    position: relative;

    z-index: 3;

    min-width: 58px;
    min-height: 34px;

    display: flex;

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

    padding:
        0 12px;

    border:
        1px solid
        rgba(124,255,79,.28);

    border-radius:
        7px;

    background:
        #101512;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        650;

    letter-spacing:
        .13em;

}


.image-placeholders
.image-placeholder-overlay span {

    position: relative;

    z-index: 3;

    max-width:
        calc(100% - 30px);

    overflow:
        hidden;

    color:
        #69736d;

    font-size:
        7px;

    font-weight:
        550;

    letter-spacing:
        .04em;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/*
|--------------------------------------------------------------------------
| SMALL IMAGE SLOTS
|--------------------------------------------------------------------------
*/

.image-placeholders
.image-placeholder-overlay.is-small {

    gap: 4px;

}


.image-placeholders
.image-placeholder-overlay.is-small strong {

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

    padding:
        0 8px;

    font-size:
        8px;

}


.image-placeholders
.image-placeholder-overlay.is-small span {

    display: none;

}


/*
|--------------------------------------------------------------------------
| OFFICIAL IRISH HEADLIGHT LOGO V1
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.site-logo {

    position: relative;

    width: 175px;
    height: 56px;

    display: block;

    flex: 0 0 auto;

}


/* Hide old generated logo artwork */
.site-logo > * {

    display: none !important;

}


.site-logo::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        url('/assets/img/brand/irish-headlight-logo-site.png');

    background-repeat:
        no-repeat;

    background-position:
        left center;

    background-size:
        contain;

}


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

.footer-brand {

    position: relative;

    width: 225px;
    height: 72px;

    display: block;

}


/* Hide old generated footer logo artwork */
.footer-brand > * {

    display: none !important;

}


.footer-brand::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        url('/assets/img/brand/irish-headlight-logo-site.png');

    background-repeat:
        no-repeat;

    background-position:
        left center;

    background-size:
        contain;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .site-logo {

        width: 145px;
        height: 46px;

    }


    .footer-brand {

        width: 195px;
        height: 62px;

    }

}


/*
|--------------------------------------------------------------------------
| OFFICIAL LOGO FINAL
|--------------------------------------------------------------------------
*/

/* HEADER */

.brand.brand--official {

    width: 225px !important;
    height: 72px !important;

    display: flex !important;

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

    flex: 0 0 auto !important;

    padding: 0 !important;

    overflow: visible !important;

    background: none !important;

}


.brand.brand--official::before,
.brand.brand--official::after {

    content: none !important;

    display: none !important;

}


.brand.brand--official
.brand__official-image {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

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

    opacity: 1 !important;
    visibility: visible !important;

}


/* FOOTER */

.footer-brand.footer-brand--official {

    width: 250px !important;
    height: 92px !important;

    display: flex !important;

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

    padding: 0 !important;

    overflow: visible !important;

    background: none !important;

}


.footer-brand.footer-brand--official::before,
.footer-brand.footer-brand--official::after {

    content: none !important;

    display: none !important;

}


.footer-brand.footer-brand--official
.footer-brand__official-image {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

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

    opacity: 1 !important;
    visibility: visible !important;

}


/* MOBILE */

@media (max-width: 620px) {

    .brand.brand--official {

        width: 185px !important;
        height: 60px !important;

    }


    .footer-brand.footer-brand--official {

        width: 220px !important;
        height: 82px !important;

    }

}


/*
|--------------------------------------------------------------------------
| BMW HERO — FINAL VISUAL V1
|--------------------------------------------------------------------------
*/

/*
| Never allow the global placeholder mode
| to hide an approved hero image.
*/

.image-placeholders
.hero__image.image-placeholder-exempt {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

}


.image-placeholders
.hero__visual
.image-placeholder-overlay {

    display: none !important;

}


/*
|--------------------------------------------------------------------------
| HERO VISUAL
|--------------------------------------------------------------------------
*/

.hero__visual {

    position: relative !important;

    min-height: 540px;

    overflow: visible !important;

}


.hero__visual-frame {

    position: absolute !important;

    inset: 0 !important;

    overflow: visible !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

}


/*
|--------------------------------------------------------------------------
| BMW
|--------------------------------------------------------------------------
*/

.hero__image.image-placeholder-exempt {

    position: absolute !important;

    z-index: 5 !important;

    top: 50% !important;

    right: -7% !important;

    bottom: auto !important;

    left: auto !important;

    width: 118% !important;

    height: auto !important;

    max-width: none !important;

    object-fit: contain !important;

    object-position: center !important;

    transform:
        translateY(-47%) !important;

    opacity: 1 !important;

    visibility: visible !important;

    filter:
        brightness(.94)
        contrast(1.08)
        saturate(.90) !important;

}


/*
|--------------------------------------------------------------------------
| SOFT GREEN GLOW BEHIND CAR
|--------------------------------------------------------------------------
*/

.hero__visual::before {

    content: "";

    position: absolute;

    z-index: 1;

    width: 580px;
    height: 580px;

    top: 50%;
    right: -10%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.12),
            rgba(124,255,79,.035) 38%,
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .hero__visual {

        min-height: 430px;

        overflow: hidden !important;

    }


    .hero__image.image-placeholder-exempt {

        width: 110% !important;

        right: -5% !important;

        top: 51% !important;

    }

}


@media (max-width: 620px) {

    .hero__visual {

        min-height: 330px;

    }


    .hero__image.image-placeholder-exempt {

        width: 125% !important;

        right: -14% !important;

        top: 52% !important;

    }

}


/*
|--------------------------------------------------------------------------
| HERO BMW — POSITION FIX V2
|--------------------------------------------------------------------------
| Țintă:
| partea de jos a BMW-ului ≈ nivelul de jos al butoanelor CTA
|--------------------------------------------------------------------------
*/

.hero__visual {

    position: relative !important;
    min-height: 560px !important;
    overflow: visible !important;

}


.hero__visual-frame {

    position: absolute !important;
    inset: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

}


/*
|--------------------------------------------------------------------------
| BMW — ridicat mai sus
|--------------------------------------------------------------------------
*/

.hero__image.image-placeholder-exempt {

    position: absolute !important;

    top: auto !important;
    left: auto !important;

    right: -6% !important;
    bottom: 170px !important;

    width: 112% !important;
    height: auto !important;
    max-width: none !important;

    transform: none !important;

    object-fit: contain !important;
    object-position: right bottom !important;

    opacity: 1 !important;
    visibility: visible !important;

    filter:
        brightness(.94)
        contrast(1.08)
        saturate(.90) !important;

}


/*
|--------------------------------------------------------------------------
| Glow mutat odată cu mașina
|--------------------------------------------------------------------------
*/

.hero__visual::before {

    content: "" !important;

    position: absolute !important;
    z-index: 1 !important;

    width: 560px !important;
    height: 560px !important;

    right: -8% !important;
    bottom: 120px !important;
    top: auto !important;

    transform: none !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(124,255,79,.12),
            rgba(124,255,79,.04) 38%,
            transparent 70%
        ) !important;

    filter: blur(15px) !important;
    pointer-events: none !important;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .hero__visual {

        min-height: 460px !important;

    }


    .hero__image.image-placeholder-exempt {

        right: -5% !important;
        bottom: 120px !important;
        width: 108% !important;

    }


    .hero__visual::before {

        right: -6% !important;
        bottom: 90px !important;
        width: 460px !important;
        height: 460px !important;

    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 620px) {

    .hero__visual {

        min-height: 330px !important;
        overflow: hidden !important;

    }


    .hero__image.image-placeholder-exempt {

        right: -14% !important;
        bottom: 35px !important;
        width: 123% !important;

    }


    .hero__visual::before {

        right: -18% !important;
        bottom: 10px !important;
        width: 320px !important;
        height: 320px !important;

    }

}


/*
|--------------------------------------------------------------------------
| BMW HERO — ALIGN BOTTOM WITH CTA V3
|--------------------------------------------------------------------------
|
| Bottom of BMW = bottom level of hero CTA buttons
|
*/

@media (min-width: 901px) {

    .hero__image.image-placeholder-exempt {

        top: auto !important;
        bottom: 32px !important;

        right: -6% !important;

        width: 112% !important;
        height: auto !important;

        transform: none !important;

        object-fit: contain !important;
        object-position: right bottom !important;

    }


    /*
    | Glow follows the car lower
    */

    .hero__visual::before {

        top: auto !important;
        bottom: -25px !important;

        right: -8% !important;

        transform: none !important;

    }

}


/* =========================================================
   SERVICES — SHOW REAL IMAGES
   Disable global image placeholder only inside service cards
   ========================================================= */

.services-catalog-card__visual .image-slot-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.services-catalog-card__visual .image-placeholder-overlay {
    display: none !important;
}



/* =========================================================
   SERVICES — REAL IMAGES
   Override development placeholder mode
   ========================================================= */

.image-placeholders main
.services-catalog-card__visual
.image-slot-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.image-placeholders main
.services-catalog-card__visual
.image-placeholder-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}



/* =========================================================
   SERVICES — CUSTOM POSITIONING FOR NEW SERVICE IMAGES
   ========================================================= */

.services-catalog-card__visual[href*="/service/module-repairs-all-types/"] img,
.services-catalog-card__visual[href*="/service/headlight-coding-adjustments/"] img,
.services-catalog-card__visual[href*="/service/bi-led-module-installation/"] img,
.services-catalog-card__visual[href*="/service/lens-replacement-or-repair/"] img,
.services-catalog-card__visual[href*="/service/daytime-running-lights-repairs/"] img,
.services-catalog-card__visual[href*="/service/electronic-board-repairs-for-high-performance-headlights/"] img {
    width: 100% !important;
    height: 100% !important;
    right: 0 !important;
    bottom: 0 !important;

    object-fit: cover !important;

    transform: none !important;

    filter:
        brightness(.92)
        contrast(1.04)
        saturate(.96) !important;
}


/* Headlight Module Repairs */
.services-catalog-card__visual[href*="/service/module-repairs-all-types/"] img {
    object-position: 76% center !important;
}


/* Coding & Headlight Adjustment */
.services-catalog-card__visual[href*="/service/headlight-coding-adjustments/"] img {
    object-position: 76% center !important;
}


/* Bi-LED Module Installation */
.services-catalog-card__visual[href*="/service/bi-led-module-installation/"] img {
    object-position: 76% center !important;
}


/* Headlight Lens Replacement */
.services-catalog-card__visual[href*="/service/lens-replacement-or-repair/"] img {
    object-position: 78% center !important;
}


/* DRL Repairs */
.services-catalog-card__visual[href*="/service/daytime-running-lights-repairs/"] img {
    object-position: 80% center !important;
}


/* Electronic Board Repairs */
.services-catalog-card__visual[href*="/service/electronic-board-repairs-for-high-performance-headlights/"] img {
    object-position: 79% center !important;
}


/* Hover */
.services-catalog-card:hover
.services-catalog-card__visual[href*="/service/module-repairs-all-types/"] img,

.services-catalog-card:hover
.services-catalog-card__visual[href*="/service/headlight-coding-adjustments/"] img,

.services-catalog-card:hover
.services-catalog-card__visual[href*="/service/bi-led-module-installation/"] img,

.services-catalog-card:hover
.services-catalog-card__visual[href*="/service/lens-replacement-or-repair/"] img,

.services-catalog-card:hover
.services-catalog-card__visual[href*="/service/daytime-running-lights-repairs/"] img,

.services-catalog-card:hover
.services-catalog-card__visual[href*="/service/electronic-board-repairs-for-high-performance-headlights/"] img {
    transform: scale(1.035) !important;

    filter:
        brightness(1)
        contrast(1.04)
        saturate(1) !important;
}


/* MOBILE */
@media (max-width: 760px) {

    .services-catalog-card__visual[href*="/service/module-repairs-all-types/"] img,
    .services-catalog-card__visual[href*="/service/headlight-coding-adjustments/"] img,
    .services-catalog-card__visual[href*="/service/bi-led-module-installation/"] img,
    .services-catalog-card__visual[href*="/service/lens-replacement-or-repair/"] img,
    .services-catalog-card__visual[href*="/service/daytime-running-lights-repairs/"] img,
    .services-catalog-card__visual[href*="/service/electronic-board-repairs-for-high-performance-headlights/"] img {

        width: 100% !important;
        height: 100% !important;

        right: 0 !important;
        bottom: 0 !important;

        object-fit: cover !important;
        object-position: 75% center !important;
    }

}



/* =========================================================
   HOMEPAGE SERVICES — REAL SERVICE IMAGES
   ========================================================= */

.image-placeholders main
.service-feature-card__visual
.image-slot-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.image-placeholders main
.service-feature-card__visual
.image-placeholder-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* NEW SERVICE IMAGES */

.service-feature-card[data-service="lens-replacement-or-repair"]
.service-feature-card__visual img,

.service-feature-card[data-service="daytime-running-lights-repairs"]
.service-feature-card__visual img,

.service-feature-card[data-service="electronic-board-repairs-for-high-performance-headlights"]
.service-feature-card__visual img,

.service-feature-card[data-service="headlight-coding-adjustments"]
.service-feature-card__visual img,

.service-feature-card[data-service="bi-led-module-installation"]
.service-feature-card__visual img,

.service-feature-card[data-service="module-repairs-all-types"]
.service-feature-card__visual img {

    width: 100% !important;
    height: 100% !important;

    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    object-fit: cover !important;

    transform: none !important;

    filter:
        brightness(.92)
        contrast(1.04)
        saturate(.96) !important;
}


/* Headlight Lens Replacement */

.service-feature-card[data-service="lens-replacement-or-repair"]
.service-feature-card__visual img {
    object-position: 78% center !important;
}


/* DRL Repairs */

.service-feature-card[data-service="daytime-running-lights-repairs"]
.service-feature-card__visual img {
    object-position: 80% center !important;
}


/* Electronic Board Repairs */

.service-feature-card[data-service="electronic-board-repairs-for-high-performance-headlights"]
.service-feature-card__visual img {
    object-position: 79% center !important;
}


/* Coding & Headlight Adjustment */

.service-feature-card[data-service="headlight-coding-adjustments"]
.service-feature-card__visual img {
    object-position: 76% center !important;
}


/* Bi-LED Module Installation */

.service-feature-card[data-service="bi-led-module-installation"]
.service-feature-card__visual img {
    object-position: 76% center !important;
}


/* Headlight Module Repairs */

.service-feature-card[data-service="module-repairs-all-types"]
.service-feature-card__visual img {
    object-position: 76% center !important;
}


/* HOVER */

.service-feature-card[data-service]
.service-feature-card__visual img {
    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        filter .3s ease !important;
}

.service-feature-card[data-service]:hover
.service-feature-card__visual img {
    transform: scale(1.035) !important;

    filter:
        brightness(1)
        contrast(1.04)
        saturate(1) !important;
}


/* MOBILE */

@media (max-width: 760px) {

    .service-feature-card[data-service="lens-replacement-or-repair"]
    .service-feature-card__visual img,

    .service-feature-card[data-service="daytime-running-lights-repairs"]
    .service-feature-card__visual img,

    .service-feature-card[data-service="electronic-board-repairs-for-high-performance-headlights"]
    .service-feature-card__visual img,

    .service-feature-card[data-service="headlight-coding-adjustments"]
    .service-feature-card__visual img,

    .service-feature-card[data-service="bi-led-module-installation"]
    .service-feature-card__visual img,

    .service-feature-card[data-service="module-repairs-all-types"]
    .service-feature-card__visual img {

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: 75% center !important;
    }

}



/* =========================================================
   SERVICE PAGE — EXTENDED SEO CONTENT
   ========================================================= */

.service-detail-copy {
    display: grid;
    gap: 18px;
}

.service-detail-copy p {
    margin: 0;

    color: var(--gray-300);

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

.service-detail-copy p:first-child {
    color: var(--gray-200);
    font-size: 11px;
}


/* FAQ */

.service-faq {
    display: grid;
    gap: 10px;
}

.service-faq details {
    overflow: hidden;

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

    border-radius: 12px;

    background: #101412;
}

.service-faq summary {
    position: relative;

    padding:
        18px 48px 18px 18px;

    color: var(--white);

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

    line-height: 1.45;

    cursor: pointer;

    list-style: none;
}

.service-faq summary::-webkit-details-marker {
    display: none;
}

.service-faq summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 18px;

    transform:
        translateY(-50%);

    color: var(--green);

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

    transition:
        transform .25s ease;
}

.service-faq details[open] summary::after {
    transform:
        translateY(-50%)
        rotate(45deg);
}

.service-faq details p {
    margin: 0;

    padding:
        0 18px 19px;

    color: var(--gray-300);

    font-size: 9px;

    line-height: 1.75;
}

.service-faq details[open] {
    border-color:
        rgba(124,255,79,.15);

    background:
        rgba(124,255,79,.025);
}


/* MOBILE */

@media (max-width: 760px) {

    .service-detail-copy p {
        font-size: 10px;
    }

    .service-faq summary {
        padding:
            17px 44px 17px 16px;
    }

    .service-faq details p {
        padding:
            0 16px 17px;
    }

}



/* =========================================================
   SERVICE DETAIL HERO — SHOW REAL REPRESENTATIVE IMAGE
   ========================================================= */

.image-placeholders main
.service-page-hero__visual
.image-slot-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.image-placeholders main
.service-page-hero__visual
.image-placeholder-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}



/* =========================================================
   SERVICE DETAIL HERO — IMAGE POSITIONING
   ========================================================= */

.service-page-hero__visual[data-service]
> img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    filter:
        brightness(.82)
        contrast(1.06)
        saturate(.92) !important;
}


/* Xenon to LED */
.service-page-hero__visual[data-service="xenon-to-led-conversions"]
> img {
    object-position: 70% center !important;
}


/* PPF */
.service-page-hero__visual[data-service="ppf-protective-film-application"]
> img {
    object-position: 72% center !important;
}


/* Custom Modifications */
.service-page-hero__visual[data-service="custom-modifications"]
> img {
    object-position: 78% center !important;
}


/* Headlight Module Repairs */
.service-page-hero__visual[data-service="module-repairs-all-types"]
> img {
    object-position: 76% center !important;
}


/* Coding & Headlight Adjustment */
.service-page-hero__visual[data-service="headlight-coding-adjustments"]
> img {
    object-position: 76% center !important;
}


/* Bi-LED */
.service-page-hero__visual[data-service="bi-led-module-installation"]
> img {
    object-position: 76% center !important;
}


/* Internal Wiring */
.service-page-hero__visual[data-service="internal-wiring-repairs"]
> img {
    object-position: 72% center !important;
}


/* Housing */
.service-page-hero__visual[data-service="housing-replacement-or-repair"]
> img {
    object-position: 70% center !important;
}


/* Lens Replacement */
.service-page-hero__visual[data-service="lens-replacement-or-repair"]
> img {
    object-position: 78% center !important;
}


/* DRL */
.service-page-hero__visual[data-service="daytime-running-lights-repairs"]
> img {
    object-position: 80% center !important;
}


/* Electronic Board Repairs */
.service-page-hero__visual[data-service="electronic-board-repairs-for-high-performance-headlights"]
> img {
    object-position: 79% center !important;
}


/* MOBILE */
@media (max-width: 760px) {

    .service-page-hero__visual[data-service]
    > img {
        object-position: 72% center !important;
    }

}



/* =========================================================
   REPAIR / REBUILD / RESTORE — SHOW REAL IMAGE
   ========================================================= */

.image-placeholders main
.repair-value__visual
.image-slot-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.image-placeholders main
.repair-value__visual
.image-placeholder-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}



/* =========================================================
   BEFORE / AFTER — SHOW REAL WORK IMAGES
   ========================================================= */

.image-placeholders main
.work-card__image
.image-slot-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.image-placeholders main
.work-card__image
.image-placeholder-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}



/* =========================================================
   FAQ — SHOW REAL IMAGE
   ========================================================= */

.image-placeholders main
.home-faq__visual
.image-slot-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.image-placeholders main
.home-faq__visual
.image-placeholder-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* =========================================================
   HOMEPAGE WORKS — FULL IMAGE VISIBILITY
   ========================================================= */

.recent-works .work-card__image img {
    object-fit: contain;
    object-position: center;
}

.recent-works .work-card:hover .work-card__image img {
    transform: none;
}


/* =========================================================
   HOMEPAGE WORKS — NATURAL IMAGE RATIO
   ========================================================= */

.recent-works .work-card__image,
.recent-works .work-card--featured .work-card__image {
    height: auto;
    aspect-ratio: auto;
    background: transparent;
}

.recent-works .work-card__image img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: initial;
}

.recent-works .work-card:hover .work-card__image img {
    transform: none;
}


/* =========================================================
   HOMEPAGE WORKS — FINAL MASONRY LAYOUT
   Full images, natural proportions, balanced grid
   ========================================================= */

.recent-works .recent-works__grid {
    display: block;
    columns: 3;
    column-gap: 19px;
}

.recent-works .work-card,
.recent-works .work-card--featured {
    display: inline-block;
    width: 100%;
    margin: 0 0 19px;
    break-inside: avoid;
    grid-column: auto;
    vertical-align: top;
}

.recent-works .work-card__image,
.recent-works .work-card--featured .work-card__image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #101412;
}

.recent-works .work-card__image img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: initial;
}

.recent-works .work-card:hover .work-card__image img {
    transform: none;
}

@media (max-width: 900px) {
    .recent-works .recent-works__grid {
        columns: 2;
    }
}

@media (max-width: 600px) {
    .recent-works .recent-works__grid {
        columns: 1;
    }
}