/* Keep the hero headline clear of fixed navigation. */
.brand img {
    display: block;
    width: 154px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
    object-position: left center
}

.site-header nav {
    margin-left: auto;
    margin-right: 2vw
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    pointer-events: none;
    mix-blend-mode: screen
}

.hero {
    align-items: center
}

.hero-content {
    margin: 60px 0 0 9vw
}

.hero h1 {
    font-size: clamp(52px, 6.8vw, 96px);
    max-width: 700px;
    line-height: .95
}

.section-light h2 {
    color: var(--green-dark)
}

.section-light h2 span {
    color: #557d35
}

.benefits-content h2 span {
    color: #557d35
}

.button {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, background .25s ease
}

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

.button-primary {
    background: linear-gradient(110deg, #c9f86b, var(--green))
}

.packaging {
    order: 2;
    background: linear-gradient(145deg, #f1f2ed 0%, #e4e9e1 100%)
}

.packaging-grid>a {
    overflow: hidden;
    transition: background .35s ease, transform .35s ease
}

.packaging-grid>a:before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease
}

.packaging-grid>a:hover {
    background: #d6e2d3;
    transform: translateY(-6px)
}

.packaging-grid>a:hover:before {
    transform: scaleX(1)
}

main {
    display: flex;
    flex-direction: column
}

.hero {
    order: 1
}

.statement {
    order: 3
}

.workflow {
    order: 4
}

.products {
    order: 5
}

.benefits {
    order: 6
}

.custom {
    order: 7
}

.recognition {
    order: 8
}

.story {
    order: 9
}

.contact {
    order: 10
}

.footer {
    position: relative;
    overflow: hidden
}

.footer:after {
    content: 'SLICED2GO';
    position: absolute;
    right: 3vw;
    bottom: 0;
    color: rgba(185, 243, 74, .045);
    font-size: clamp(70px, 15vw, 220px);
    font-weight: 800;
    letter-spacing: -.08em;
    pointer-events: none
}

.section-kicker {
    position: relative
}

.section-kicker:after {
    content: '';
    display: inline-block;
    width: 42px;
    height: 1px;
    margin: 0 0 3px 12px;
    background: var(--green)
}

.packaging-grid>a img {
    display: block;
    width: 100%;
    height: 145px;
    margin: 18px 0 0;
    object-fit: cover;
    filter: saturate(.65);
    transition: transform .5s ease, filter .5s ease
}

.packaging-grid>a:hover img {
    transform: scale(1.04);
    filter: saturate(1)
}

.inline-cta {
    order: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px
}

.products {
    order: 4
}

.inline-cta h2 {
    font-size: clamp(38px, 5vw, 70px)
}

.benefits {
    order: 6
}

.final-cta {
    order: 9;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px
}

.final-cta h2 {
    margin-top: 24px
}

.final-cta .hero-actions {
    margin: 0
}

.final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 540px;
    background: radial-gradient(circle at calc(72% + var(--cta-x, 0px)) calc(35% + var(--cta-y, 0px)), rgba(185, 243, 74, .2), transparent 24%), linear-gradient(120deg, #0c1110 0%, #182e24 56%, #102019 100%);
    border-top: 1px solid rgba(185, 243, 74, .35);
    border-bottom: 1px solid rgba(185, 243, 74, .2);
}

.final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .24;
    background-image: linear-gradient(rgba(185, 243, 74, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 243, 74, .16) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(115deg, transparent 8%, black 50%, transparent 100%);
    transform: perspective(800px) rotateX(58deg) translateY(25%);
    transform-origin: center bottom;
}

.final-cta::after {
    content: '';
    position: absolute;
    width: min(48vw, 620px);
    aspect-ratio: 1;
    right: -8%;
    top: 50%;
    z-index: -1;
    border: 1px solid rgba(185, 243, 74, .3);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(185, 243, 74, .045), 0 0 0 88px rgba(185, 243, 74, .025), inset 0 0 80px rgba(185, 243, 74, .08);
    transform: translate(calc(var(--cta-x, 0px) * .35), calc(-50% + var(--cta-y, 0px) * .35)) rotate(-18deg) perspective(700px) rotateY(-28deg);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.final-cta>* {
    position: relative;
    z-index: 1;
}

.final-cta .section-kicker {
    color: var(--green)
}

.final-cta h2 {
    color: var(--white);
    text-shadow: 0 12px 38px rgba(0, 0, 0, .3)
}

.final-cta .button-primary {
    box-shadow: 0 14px 30px rgba(185, 243, 74, .16)
}

.final-cta {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 150px;
    padding-bottom: 150px
}

.final-cta h2 {
    margin-top: 28px;
    max-width: 760px
}

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

.final-cta .button-primary {
    min-width: 220px;
    padding: 20px 28px;
    font-size: 13px
}

.final-cta::before {
    animation: ctaGridDrift 24s ease-in-out infinite alternate
}

.final-cta::after {
    animation: ctaRingFloat 14s ease-in-out infinite alternate
}

@keyframes ctaGridDrift {
    from {
        background-position: 0 0;
        opacity: .18
    }

    to {
        background-position: 70px -35px;
        opacity: .3
    }
}

@keyframes ctaRingFloat {
    from {
        margin-top: -10px;
        opacity: .65
    }

    to {
        margin-top: 18px;
        opacity: 1
    }
}

.story {
    order: 8
}

.recognition {
    order: 7
}

.custom {
    order: 6
}

.contact {
    order: 10
}

.hero {
    align-items: center
}

.hero-content {
    margin: 60px 0 0 9vw
}

@media(max-width:800px) {
    .brand img {
        width: 125px
    }

    .hero-canvas {
        opacity: .25
    }

    .hero h1 {
        font-size: clamp(48px, 14vw, 78px)
    }

    .packaging {
        order: 2
    }

    .packaging-grid>a:hover {
        transform: none
    }

    .footer:after {
        font-size: 90px
    }
}

@media(max-width:800px) {

    .inline-cta,
    .final-cta {
        display: block
    }

    .inline-cta .button {
        margin-top: 35px
    }

    .final-cta .hero-actions {
        margin-top: 35px
    }

    .packaging-grid>a img {
        height: 170px
    }

    .site-header nav {
        margin: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-canvas {
        display: none
    }

    .button:hover {
        transform: none
    }
}

@media(max-width:800px) {
    .hero-content {
        margin: 90px 6vw 0
    }
}

:root {
    --ink: #101412;
    --muted: #67706b;
    --paper: #f1f2ed;
    --line: #d4d9d3;
    --green: #b9f34a;
    --green-dark: #163d2a;
    --dark: #111715;
    --white: #f7f8f4;
    --mono: 'DM Mono', monospace;
    --sans: 'Manrope', sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

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

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

button,
input {
    font: inherit
}

button {
    cursor: pointer
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 4.5vw;
    color: #fff;
    transition: .35s ease
}

/* Premium structural refinements */
.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px
}

.site-header .brand {
    justify-self: start
}

.site-header nav {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    justify-content: center
}

.site-header .nav-cta {
    grid-column: 3;
    grid-row: 1;
    justify-self: end
}

.hero-canvas {
    z-index: 0
}

.hero-shade,
.hero-grid {
    z-index: 1
}

.hero-content,
.hero-meta,
.hero-tags {
    z-index: 2
}

.packaging-grid {
    position: relative;
    grid-template-columns: 1.15fr .9fr 1fr;
    gap: 18px;
    border: 0
}

.packaging-grid>a,
.packaging-grid>a:not(:first-child) {
    padding: 26px;
    min-height: 395px;
    border: 1px solid rgba(16, 20, 18, .12);
    background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(207, 218, 207, .54));
    box-shadow: 0 22px 45px rgba(26, 44, 31, .1);
    transform-style: preserve-3d;
    perspective: 900px
}

.packaging-grid>a:nth-child(2) {
    margin-top: 44px
}

.packaging-grid>a:nth-child(3) {
    margin-top: -22px
}

.packaging-grid>a img {
    height: 185px;
    margin: 20px 0 0;
    transform: translateZ(20px)
}

.packaging-grid>a h3,
.packaging-grid>a p,
.packaging-grid>a small {
    position: relative;
    z-index: 1;
    transform: translateZ(26px)
}

.packaging-grid>a>span {
    transform: translateZ(30px)
}

.products {
    position: relative
}

.product-explorer {
    position: sticky;
    top: 92px;
    z-index: 3;
    min-height: clamp(430px, 58vh, 560px);
    box-shadow: 0 28px 70px rgba(16, 20, 18, .14);
    transform-style: preserve-3d
}

.product-visual {
    transform: translateZ(16px);
    background: radial-gradient(circle at 60% 35%, #dce8d7, #aeb7ae 70%)
}

.product-visual:after {
    content: '';
    position: absolute;
    inset: 12% 8%;
    border: 1px solid rgba(185, 243, 74, .45);
    transform: perspective(800px) rotateY(-12deg);
    pointer-events: none
}

.product-details {
    transform: translateZ(28px)
}

#product-image {
    transition: opacity .2s ease, transform .5s ease
}

.product-tabs {
    position: relative;
    z-index: 4
}

.contact {
    background: radial-gradient(circle at 90% 10%, rgba(185, 243, 74, .16), transparent 32%), var(--paper)
}

.contact-form {
    position: relative;
    transform: perspective(1200px) rotateY(-2deg);
    box-shadow: 24px 26px 60px rgba(16, 20, 18, .12);
    border: 1px solid rgba(16, 20, 18, .08);
    padding: 42px
}

.contact-form:before {
    content: 'SALES / SLICING SYSTEMS';
    position: absolute;
    top: 15px;
    right: 20px;
    font: 9px var(--mono);
    letter-spacing: .12em;
    color: var(--green-dark);
    opacity: .55
}

.contact-form input {
    font-size: 15px;
    padding: 16px 0
}

.contact-form label {
    transition: color .2s ease
}

.contact-form label:focus-within {
    color: var(--green-dark)
}

.recognition {
    position: relative;
    overflow: hidden
}

.recognition:before {
    content: 'NGA';
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    font-size: clamp(120px, 25vw, 360px);
    font-weight: 800;
    color: rgba(185, 243, 74, .07);
    letter-spacing: -.12em
}

.award-mark,
.recognition>div:last-child {
    position: relative;
    z-index: 1
}

@media(max-width:800px) {
    .site-header {
        display: flex
    }

    .site-header nav {
        grid-column: auto;
        grid-row: auto;
        margin: 0
    }

    .site-header .nav-cta {
        grid-column: auto;
        grid-row: auto
    }

    .product-explorer {
        position: relative;
        top: auto;
        min-height: 0
    }

    .packaging-grid>a,
    .packaging-grid>a:not(:first-child) {
        min-height: 0;
        margin: 0
    }

    .contact-form {
        transform: none;
        padding: 28px 22px
    }

    .recognition:before {
        font-size: 130px;
        top: 28%
    }
}

.site-header.scrolled {
    padding-block: 12px;
    background: linear-gradient(105deg, rgba(11, 22, 17, .94), rgba(26, 57, 39, .78) 58%, rgba(16, 31, 24, .9));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(185, 243, 74, .28);
    box-shadow: 0 10px 30px rgba(5, 14, 9, .22), 0 1px 18px rgba(185, 243, 74, .08)
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .14em
}

.brand>span:last-child>span {
    color: var(--green)
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--green);
    color: var(--green);
    font: 500 11px var(--mono);
    letter-spacing: -.1em
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px
}

.site-header nav>a:not(.nav-cta) {
    opacity: .8
}

.site-header nav>a:not(.nav-cta):hover {
    opacity: 1
}

.nav-cta,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em
}

.nav-cta {
    background: var(--green);
    color: var(--ink)
}

.nav-cta span,
.button span {
    font-size: 18px;
    font-weight: 400;
    line-height: 0
}

.menu-toggle {
    display: none
}

.hero {
    min-height: 720px;
    height: 94vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #202723;
    color: #fff
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.65) contrast(1.1)
}

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 12, 10, .9), rgba(8, 12, 10, .35) 58%, rgba(8, 12, 10, .18)), linear-gradient(0deg, rgba(8, 12, 10, .72), transparent 50%)
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to right, black, transparent 75%)
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 0 0 11vh 9vw
}

.eyebrow,
.section-kicker,
.visual-label,
.console-top,
.form-heading span {
    font: 500 10px var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--green)
}

.eyebrow i,
.status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(185, 243, 74, .12)
}

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

h1 {
    font-size: clamp(58px, 8vw, 126px);
    line-height: .93;
    letter-spacing: -.07em;
    margin: 24px 0 28px;
    font-weight: 700
}

h1 em,
h2 span {
    font-style: normal;
    color: var(--green)
}

.hero-copy {
    max-width: 470px;
    line-height: 1.65;
    color: #d8dfd9
}

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

.button-primary {
    background: var(--green);
    color: var(--ink)
}

.button-primary:hover {
    background: #d1fb7a
}

.text-link,
.arrow-link {
    font-weight: 700;
    font-size: 13px
}

.text-link span,
.arrow-link span {
    color: var(--green);
    font-size: 18px;
    margin-left: 8px
}

.hero-meta {
    position: absolute;
    bottom: 35px;
    right: 4.5vw;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #cad0cb;
    font: 10px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase
}

.meta-line {
    width: 100px;
    height: 1px;
    background: var(--green)
}

.hero-tags {
    position: absolute;
    right: 4.5vw;
    top: 44%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 10px var(--mono);
    text-transform: uppercase;
    letter-spacing: .15em
}

.hero-tags span {
    padding: 8px 10px;
    border: 1px solid rgba(185, 243, 74, .5);
    color: var(--green);
    background: rgba(10, 17, 13, .28)
}

.section-light {
    padding: 130px 9vw
}

.section-dark {
    background: var(--dark);
    color: var(--white);
    padding: 130px 9vw
}

.section-kicker {
    color: #7e8981
}

.section-dark .section-kicker {
    color: var(--green)
}

h2 {
    font-size: clamp(42px, 6vw, 88px);
    line-height: .97;
    letter-spacing: -.065em;
    margin: 0;
    font-weight: 700
}

.statement-layout,
.workflow-head,
.products-heading,
.packaging-head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 7vw;
    margin-top: 30px
}

.statement-body,
.workflow-head p,
.products-heading p,
.packaging-head p {
    max-width: 430px;
    line-height: 1.7;
    color: var(--muted);
    align-self: end
}

.statement-body p:first-child {
    font-size: 20px;
    color: var(--ink);
    line-height: 1.4
}

.arrow-link {
    display: inline-block;
    margin-top: 20px;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 8px
}

.challenge-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    margin-top: 95px
}

.challenge-row>div {
    padding: 18px 0;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 35px
}

.challenge-row>div:not(:first-child) {
    padding-left: 22px
}

.challenge-row strong,
.product-index {
    font: 12px var(--mono);
    color: var(--muted)
}

.challenge-row span {
    font-size: 14px;
    font-weight: 700
}

.workflow h2 {
    margin-bottom: 0
}

.workflow-head p {
    color: #a5afa8
}

.process-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 100px 0 70px;
    border-top: 1px solid #48564d
}

.process-step {
    position: relative;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid #48564d
}

.process-step:not(:first-child) {
    padding-left: 20px
}

.process-step:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    background: #48564d;
    border-radius: 50%
}

.process-step.active:before {
    background: var(--green);
    box-shadow: 0 0 0 7px rgba(185, 243, 74, .1)
}

.process-step b {
    font: 10px var(--mono);
    color: #778379
}

.process-step span {
    font-size: 32px;
    font-weight: 700
}

.process-step small {
    font: 11px var(--mono);
    color: #778379
}

.outcome-strip {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid #48564d;
    font: 12px var(--mono);
    color: #778379
}

.outcome-strip strong {
    color: var(--green);
    font: 700 15px var(--sans)
}

.products-heading {
    margin-bottom: 65px
}

.product-explorer {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    min-height: 480px;
    background: #dfe3dc
}

.product-visual {
    position: relative;
    overflow: hidden;
    background: #aeb7ae
}

.product-visual img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    mix-blend-mode: multiply;
    filter: contrast(1.1)
}

.visual-label {
    position: absolute;
    top: 22px;
    left: 25px;
    z-index: 1;
    color: var(--ink)
}

.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--green);
    box-shadow: 0 0 20px var(--green);
    opacity: .65
}

.product-details {
    padding: 45px 40px;
    display: flex;
    flex-direction: column
}

.product-index {
    margin-bottom: 45px
}

.product-index span {
    color: #9ba59e
}

.product-details h3 {
    font-size: 56px;
    letter-spacing: -.06em;
    margin: 0 0 20px
}

.product-details p {
    line-height: 1.6;
    color: #59645d
}

.product-note {
    margin-top: 20px;
    padding: 14px 0;
    border-top: 1px solid #bbc4bc;
    border-bottom: 1px solid #bbc4bc;
    font: 11px var(--mono);
    color: var(--green-dark)
}

.product-details .arrow-link {
    margin-top: auto;
    align-self: flex-start
}

.product-tabs {
    display: flex;
    margin: 28px 0 36px;
    border-bottom: 1px solid var(--line)
}

.product-tab {
    background: none;
    border: 0;
    padding: 14px 20px 18px 0;
    margin-right: 24px;
    color: #8a948c;
    text-align: left;
    font-weight: 800;
    font-size: 15px;
    border-bottom: 2px solid transparent
}

.product-tab small {
    display: block;
    margin-top: 5px;
    font: 9px var(--mono);
    text-transform: uppercase
}

.product-tab.active {
    color: var(--ink);
    border-color: var(--green-dark)
}

.button-dark {
    background: var(--ink);
    color: var(--white);
    align-self: flex-start
}

.benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #d6ddd4
}

.benefits-image {
    min-height: 650px;
    overflow: hidden
}

.benefits-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.75)
}

.benefits-content {
    padding: 110px 9vw 90px
}

.benefits-content>p {
    max-width: 420px;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 35px
}

.benefit-list {
    margin-top: 55px
}

.benefit-list>div {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 12px;
    border-top: 1px solid #b8c2b8;
    padding: 20px 0
}

.benefit-list span {
    color: var(--green-dark);
    font-size: 18px;
    grid-row: span 2
}

.benefit-list strong {
    font-size: 16px
}

.benefit-list small {
    color: var(--muted);
    margin-top: 5px
}

.custom-layout {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 10vw;
    margin-top: 50px
}

.custom-layout p {
    max-width: 430px;
    line-height: 1.7;
    color: #a5afa8;
    margin-top: 35px
}

.custom-console {
    border: 1px solid #445049;
    padding: 20px
}

.console-top {
    display: flex;
    justify-content: space-between;
    color: #76837a;
    padding-bottom: 22px;
    border-bottom: 1px solid #445049
}

.status {
    color: var(--green);
    text-transform: none;
    letter-spacing: 0
}

.application {
    display: flex;
    justify-content: space-between;
    padding: 22px 0;
    border-bottom: 1px solid #445049;
    color: #87938a
}

.application.active {
    color: var(--white);
    font-size: 25px
}

.application span {
    color: var(--green)
}

.console-footer {
    padding-top: 25px;
    color: var(--green);
    font: 10px var(--mono);
    line-height: 1.7
}

.packaging-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 75px 0 55px;
    font-size: 18px;
    font-weight: 700
}

.packaging-flow i {
    color: var(--green-dark);
    font-style: normal;
    font-size: 28px
}

.packaging-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line)
}

.packaging-grid>a {
    padding: 25px 25px 25px 0;
    border-right: 1px solid var(--line);
    position: relative;
    min-height: 250px
}

.packaging-grid>a:not(:first-child) {
    padding-left: 25px
}

.packaging-grid small {
    font: 10px var(--mono);
    color: var(--green-dark)
}

.packaging-grid h3 {
    font-size: 24px;
    letter-spacing: -.04em;
    margin: 48px 0 12px
}

.packaging-grid p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 260px
}

.packaging-grid a>span {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 24px;
    color: var(--green-dark)
}

.recognition {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    padding: 130px 9vw;
    background: var(--green-dark);
    color: var(--white)
}

.award-mark {
    display: flex;
    align-items: flex-start;
    color: var(--green);
    font-size: 160px;
    line-height: .75;
    font-weight: 700;
    letter-spacing: -.1em
}

.award-mark small {
    font: 30px var(--mono);
    margin-top: 10px
}

.recognition h2 {
    margin: 24px 0
}

.recognition p {
    color: #bed0c2;
    line-height: 1.6
}

.story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0
}

.story-image {
    min-height: 620px
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.5)
}

.story-copy {
    padding: 120px 9vw
}

.story-copy p {
    max-width: 410px;
    line-height: 1.7;
    color: #a5afa8;
    margin-top: 35px
}

.arrow-link.light {
    color: var(--white);
    border-color: #66736a
}

.contact {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10vw
}

.contact-info>p {
    max-width: 420px;
    color: var(--muted);
    line-height: 1.7;
    margin-top: 35px
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 50px;
    font-size: 14px;
    font-weight: 700
}

.contact-details address {
    font-style: normal;
    color: var(--muted);
    font-weight: 400;
    margin-top: 12px;
    line-height: 1.7
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px 16px;
    padding: 28px;
    background: #e1e5df;
    border-top: 2px solid var(--green-dark)
}

.form-heading {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 12px
}

.form-heading span {
    color: var(--green-dark)
}

.form-heading strong {
    font-size: 20px
}

.contact-form label {
    font: 10px var(--mono);
    text-transform: uppercase;
    color: #647068
}

.contact-form input {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #aeb8af;
    background: transparent;
    padding: 12px 0;
    outline: 0;
    color: var(--ink)
}

.contact-form input:focus {
    border-color: var(--green-dark);
    box-shadow: 0 1px 0 var(--green-dark)
}

.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #aeb8af;
    background: transparent;
    padding: 16px 0;
    color: var(--ink);
    outline: 0;
    resize: vertical
}

.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--green-dark);
    box-shadow: 0 1px 0 var(--green-dark)
}

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

.contact-form .button {
    border: 0;
    margin-top: 10px
}

.form-status {
    grid-column: 1/-1;
    margin: 0;
    color: var(--green-dark);
    font-size: 13px
}

.footer {
    background: var(--ink);
    color: var(--white);
    padding: 70px 9vw 25px
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 70px
}

.footer-top p {
    color: #9da8a0;
    line-height: 1.5
}

.footer-bottom {
    border-top: 1px solid #39423c;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    color: #7c887f;
    font: 12px var(--mono);
    text-transform: uppercase
}

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

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease
}

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

@media(max-width:800px) {
    .site-header {
        padding: 16px 6vw
    }

    .site-header nav {
        display: none;
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        background: rgba(16, 20, 18, .97);
        padding: 25px 6vw;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px
    }

    .site-header nav.open {
        display: flex
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 4px;
        border: 0;
        background: none;
        color: #fff
    }

    .menu-toggle span {
        width: 18px;
        height: 1px;
        background: var(--green);
        display: block
    }

    .menu-toggle b {
        font: 10px var(--mono);
        margin-left: 5px;
        text-transform: uppercase
    }

    .hero {
        min-height: 700px;
        height: 90vh
    }

    .hero-content {
        margin: 0 6vw 14vh
    }

    .hero-tags {
        right: 6vw;
        top: auto;
        bottom: 70px;
        flex-direction: row
    }

    .hero-tags span {
        font-size: 8px;
        padding: 6px
    }

    .hero-meta {
        display: none
    }

    h1 {
        font-size: clamp(54px, 15vw, 90px)
    }

    .hero-copy {
        font-size: 14px;
        max-width: 390px
    }

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

    .section-light,
    .section-dark {
        padding: 82px 6vw
    }

    .statement-layout,
    .workflow-head,
    .products-heading,
    .custom-layout,
    .contact {
        display: block
    }

    .statement-body {
        margin-top: 35px
    }

    .challenge-row {
        grid-template-columns: 1fr 1fr;
        margin-top: 65px
    }

    .challenge-row>div {
        gap: 25px;
        border-bottom: 1px solid var(--line)
    }

    .challenge-row>div:nth-child(3) {
        padding-left: 0;
        border-bottom: 0
    }

    .challenge-row>div:nth-child(4) {
        border-bottom: 0
    }

    .product-explorer {
        display: flex;
        flex-direction: column
    }

    .product-visual img {
        min-height: 280px;
        height: 280px
    }

    .product-details {
        min-height: 400px;
        padding: 30px
    }

    .product-index {
        margin-bottom: 30px
    }

    .product-details h3 {
        font-size: 50px
    }

    .product-tabs {
        overflow: auto;
        margin-top: 22px
    }

    .product-tab {
        min-width: max-content;
        margin-right: 20px
    }

    .benefits {
        display: flex;
        flex-direction: column
    }

    .benefits-image {
        min-height: 340px
    }

    .benefits-content {
        padding: 75px 6vw
    }

    .process-line {
        margin: 70px 0 50px
    }

    .process-step span {
        font-size: 22px
    }

    .process-step small {
        font-size: 9px
    }

    .outcome-strip {
        gap: 17px
    }

    .packaging-flow {
        gap: 9px;
        justify-content: space-between;
        font-size: 12px;
        margin: 55px 0 40px
    }

    .packaging-flow i {
        font-size: 19px
    }

    .packaging-grid {
        display: block
    }

    .packaging-grid>a,
    .packaging-grid>a:not(:first-child) {
        display: block;
        min-height: 0;
        padding: 25px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .packaging-grid h3 {
        margin: 30px 0 12px
    }

    .recognition {
        display: block;
        padding: 85px 6vw
    }

    .award-mark {
        font-size: 110px;
        margin-bottom: 40px
    }

    .story {
        display: flex;
        flex-direction: column
    }

    .story-image {
        min-height: 340px
    }

    .story-copy {
        padding: 75px 6vw
    }

    .contact-form {
        margin-top: 60px;
        padding: 22px;
        gap: 18px 12px
    }

    .footer {
        padding: 55px 6vw 22px
    }

    .footer-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
        padding-bottom: 50px
    }

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

    .footer-bottom div {
        order: 3;
        width: 100%;
        justify-content: space-between
    }

    .custom-console {
        margin-top: 50px
    }
}

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

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

    .hero-video {
        display: none
    }

    .scan-line {
        display: none
    }

    .final-cta::before,
    .final-cta::after {
        animation: none
    }
}

/* Premium footer environment and information grid. */
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 96px 9vw 28px;
    background: radial-gradient(circle at 78% 12%, rgba(185, 243, 74, .18), transparent 24%), linear-gradient(135deg, #102c20 0%, #0d1c17 54%, #07100d 100%);
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .2;
    background-image: linear-gradient(rgba(185, 243, 74, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 243, 74, .18) 1px, transparent 1px);
    background-size: 68px 68px;
    transform: perspective(900px) rotateX(58deg) translateY(20%);
    transform-origin: center bottom;
    animation: footerGridDrift 28s ease-in-out infinite alternate
}

.footer-depth {
    position: absolute;
    width: min(52vw, 680px);
    aspect-ratio: 1;
    right: -10%;
    top: 8%;
    z-index: -1;
    border: 1px solid rgba(185, 243, 74, .25);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(185, 243, 74, .035), 0 0 0 96px rgba(185, 243, 74, .02), inset 0 0 90px rgba(185, 243, 74, .05);
    transform: perspective(700px) rotateY(-28deg) rotateX(12deg);
    animation: footerRingFloat 16s ease-in-out infinite alternate
}

.footer-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .8fr .9fr 1.55fr .9fr;
    align-items: start;
    gap: 5vw;
    padding-bottom: 88px
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    color: #c7d2ca;
    font-size: 13px;
    line-height: 1.65
}

.footer-label {
    margin-bottom: 24px;
    color: var(--green);
    font: 500 10px var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase
}

.footer-column h3 {
    margin: 0 0 10px;
    color: var(--white);
    font-size: 17px
}

.footer-column a {
    position: relative;
    transition: color .25s ease, transform .25s ease
}

.footer-column a:hover {
    color: var(--green);
    transform: translateX(4px)
}

.footer-column address {
    font-style: normal;
    color: #aab8ae
}

.footer-arrow,
.footer-learn {
    /* margin-top: 22px; */
    color: var(--green)
}

.footer-arrow span,
.footer-learn span {
    margin-left: 8px;
    font-size: 17px
}

.footer-column .footer-subhead {
    margin-top: 24px;
    font: 10px var(--mono);
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .1em
}

.footer-products {
    gap: 13px
}

.footer-products a {
    display: grid;
    grid-template-columns: 94px 1fr;
    gap: 14px;
    width: 100%;
    border-bottom: 1px solid rgba(199, 210, 202, .15);
    padding-bottom: 10px
}

.footer-products strong {
    color: var(--white);
    font-size: 13px
}

.footer-products span {
    color: #aab8ae;
    font-size: 13px;
    line-height: 1.45
}

.footer-brand .brand {
    margin-bottom: 28px
}

.footer-brand .brand img {
    width: 170px
}

.footer-brand p {
    color: #d7e0d9;
    line-height: 1.5
}

.footer-learn {
    border-bottom: 1px solid var(--green);
    padding-bottom: 7px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em
}

.footer-bottom {
    position: relative;
    z-index: 1;
    padding-top: 22px;
    border-top-color: rgba(199, 210, 202, .2)
}

@keyframes footerGridDrift {
    from {
        background-position: 0 0
    }

    to {
        background-position: 68px -34px
    }
}

@keyframes footerRingFloat {
    from {
        transform: perspective(700px) rotateY(-28deg) rotateX(12deg) translateY(-14px) rotateZ(-3deg)
    }

    to {
        transform: perspective(700px) rotateY(-22deg) rotateX(16deg) translateY(18px) rotateZ(3deg)
    }
}

@media(max-width:800px) {
    .footer {
        padding: 75px 6vw 24px
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 48px 28px;
        padding-bottom: 60px
    }

    .footer-products,
    .footer-brand {
        grid-column: 1/-1
    }

    .footer-products a {
        grid-template-columns: 100px 1fr
    }

    .footer-brand .brand img {
        width: 150px
    }

    .footer-depth {
        width: 520px;
        right: -55%;
        top: 25%
    }
}

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

    .footer::before,
    .footer-depth {
        animation: none
    }
}

.footer-top>.footer-column {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease
}

.footer.is-visible>.footer-top>.footer-column {
    opacity: 1;
    transform: none
}

.footer.is-visible>.footer-top>.footer-column:nth-child(2) {
    transition-delay: .08s
}

.footer.is-visible>.footer-top>.footer-column:nth-child(3) {
    transition-delay: .16s
}

.footer.is-visible>.footer-top>.footer-column:nth-child(4) {
    transition-delay: .24s
}

@media(prefers-reduced-motion:reduce) {
    .footer-top>.footer-column {
        opacity: 1;
        transform: none;
        transition: none
    }
}

.footer-social {
    margin-top: 42px
}

.footer-social .footer-label {
    margin-bottom: 12px
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #d7e0d9
}

.social-link span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(185, 243, 74, .45);
    border-radius: 50%;
    color: var(--green);
    font: 700 12px var(--sans);
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease
}

.social-link b {
    color: var(--green);
    font-size: 16px;
    font-weight: 400;
    transition: transform .25s ease
}

.social-link:hover {
    transform: none !important;
    color: var(--white)
}

.social-link:hover span {
    background: var(--green);
    color: var(--ink);
    transform: translateY(-2px) rotate(-5deg);
    box-shadow: 0 0 18px rgba(185, 243, 74, .22)
}

.social-link:hover b {
    transform: translate(3px, -3px)
}

.button {
    isolation: isolate;
    transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease
}

.button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--green-dark);
    transform: translateX(-102%);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1)
}

.button:hover {
    transform: translateY(-3px) translateZ(6px);
    box-shadow: 0 12px 24px rgba(16, 20, 18, .2);
    color: var(--white)
}

.button:hover::before {
    transform: translateX(0)
}

.button:hover span {
    transform: translate(3px, -3px);
    transition: transform .25s ease
}

.button span {
    transition: transform .25s ease
}

.button-dark::before {
    background: var(--green)
}

.button-dark:hover {
    color: var(--ink)
}

.arrow-link {
    transition: color .25s ease, border-color .25s ease, transform .25s ease
}

.arrow-link:hover {
    transform: translateX(4px);
    color: var(--green-dark);
    border-color: var(--green-dark)
}

.arrow-link.light:hover {
    color: var(--green);
    border-color: var(--green)
}

@media(max-width:800px) {
    .footer-social {
        margin-top: 30px
    }

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

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

    .button,
    .button::before,
    .button span,
    .arrow-link,
    .social-link,
    .social-link span,
    .social-link b {
        transition: none
    }

    .button:hover,
    .arrow-link:hover,
    .social-link:hover {
        transform: none !important
    }
}

.inline-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at calc(18% + var(--fit-x, 0px)) calc(60% + var(--fit-y, 0px)), rgba(185, 243, 74, .16), transparent 25%), linear-gradient(110deg, #203e30 0%, #14271f 46%, #0b1511 100%);
    border-top: 1px solid rgba(185, 243, 74, .25);
    border-bottom: 1px solid rgba(185, 243, 74, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -30px 70px rgba(0, 0, 0, .18)
}

.inline-cta::before {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: -2;
    background: repeating-linear-gradient(118deg, transparent 0 90px, rgba(185, 243, 74, .09) 91px, transparent 93px 180px);
    transform: perspective(700px) rotateY(-18deg) translateX(-12%);
    animation: fitLightSweep 20s linear infinite
}

.inline-cta::after {
    content: '';
    position: absolute;
    right: 8%;
    top: 50%;
    z-index: -1;
    width: min(35vw, 440px);
    aspect-ratio: 1;
    border: 1px solid rgba(185, 243, 74, .28);
    border-radius: 22%;
    transform: translate(calc(var(--fit-x, 0px) * .25), calc(-50% + var(--fit-y, 0px) * .25)) rotate(45deg) perspective(700px) rotateX(52deg);
    box-shadow: 0 0 0 22px rgba(185, 243, 74, .035), 0 0 60px rgba(185, 243, 74, .1);
    animation: fitFrameFloat 13s ease-in-out infinite alternate
}

.inline-cta>* {
    position: relative;
    z-index: 1
}

.inline-cta h2 {
    color: var(--white);
    text-shadow: 0 10px 30px rgba(0, 0, 0, .25)
}

.inline-cta .button-primary {
    box-shadow: 0 12px 28px rgba(185, 243, 74, .16)
}

@keyframes fitLightSweep {
    from {
        background-position: 0 0;
        opacity: .45
    }

    to {
        background-position: 360px 0;
        opacity: .8
    }
}

@keyframes fitFrameFloat {
    from {
        margin-top: -10px;
        opacity: .55
    }

    to {
        margin-top: 18px;
        opacity: 1
    }
}

@media(max-width:800px) {
    .inline-cta::after {
        width: 300px;
        right: -20%;
        opacity: .65
    }

    .inline-cta::before {
        opacity: .45
    }
}

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

    .inline-cta::before,
    .inline-cta::after {
        animation: none
    }
}

.workflow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at calc(78% + var(--workflow-x, 0px)) calc(25% + var(--workflow-y, 0px)), rgba(185, 243, 74, .13), transparent 25%), linear-gradient(135deg, #111a16 0%, #172a20 58%, #0d1411 100%)
}

.workflow::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .25;
    background-image: linear-gradient(rgba(185, 243, 74, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 243, 74, .16) 1px, transparent 1px);
    background-size: 58px 58px;
    transform: perspective(850px) rotateX(62deg) translateY(24%);
    transform-origin: center bottom;
    animation: workflowGrid 25s ease-in-out infinite alternate
}

.workflow::after {
    content: '';
    position: absolute;
    width: min(52vw, 620px);
    aspect-ratio: 1;
    right: -12%;
    top: 50%;
    z-index: -1;
    border: 1px solid rgba(185, 243, 74, .24);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(185, 243, 74, .035), 0 0 0 78px rgba(185, 243, 74, .02), inset 0 0 70px rgba(185, 243, 74, .06);
    transform: translate(calc(var(--workflow-x, 0px) * .3), calc(-50% + var(--workflow-y, 0px) * .3)) perspective(720px) rotateY(-26deg) rotateX(12deg);
    animation: workflowRing 17s ease-in-out infinite alternate
}

.workflow>* {
    position: relative;
    z-index: 1
}

.workflow-head h2,
.workflow-head p {
    text-shadow: 0 10px 35px rgba(0, 0, 0, .24)
}

.process-line {
    position: relative;
    transform-style: preserve-3d
}

.process-step {
    transition: transform .35s ease, background .35s ease
}

.process-step:hover {
    transform: translateZ(14px);
    background: rgba(185, 243, 74, .035)
}

.outcome-strip {
    position: relative
}

.outcome-strip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    background-size: 35% 100%;
    background-repeat: no-repeat;
    animation: workflowSweep 7s linear infinite
}

@keyframes workflowGrid {
    from {
        background-position: 0 0;
        opacity: .18
    }

    to {
        background-position: 58px -28px;
        opacity: .3
    }
}

@keyframes workflowRing {
    from {
        margin-top: -14px
    }

    to {
        margin-top: 18px
    }
}

@keyframes workflowSweep {
    from {
        background-position: -35% 0
    }

    to {
        background-position: 135% 0
    }
}

@media(max-width:800px) {
    .workflow::before {
        opacity: .14
    }

    .workflow::after {
        width: 520px;
        right: -42%;
        opacity: .7
    }

    .process-step:hover {
        transform: none
    }
}

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

    .workflow::before,
    .workflow::after,
    .outcome-strip::after {
        animation: none
    }

    .process-step:hover {
        transform: none
    }
}

.final-cta {
    background: radial-gradient(circle at calc(72% + var(--cta-x, 0px)) calc(35% + var(--cta-y, 0px)), rgba(185, 243, 74, .2), transparent 24%), linear-gradient(120deg, #0c1110 0%, #182e24 56%, #102019 100%);
    border-top: 1px solid rgba(185, 243, 74, .35);
    border-bottom: 1px solid rgba(185, 243, 74, .2)
}

@media(min-width:801px) {
    .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        justify-content: initial
    }

    .site-header nav {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        justify-content: center;
        white-space: nowrap
    }

    .site-header .nav-cta {
        position: absolute;
        right: calc(4.5vw - 15px);
        top: 50%;
        transform: translateY(-50%)
    }

    .product-explorer {
        position: static;
        top: auto;
        z-index: auto;
        min-height: 480px;
        box-shadow: none;
        transform-style: flat
    }

    .products {
        min-height: 0
    }
}

.packaging-grid>a,
.packaging-grid>a:not(:first-child) {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: initial
}

.packaging-grid>a img {
    max-height: 185px;
    border-radius: 2px
}

.packaging-grid>a h3 {
    margin-bottom: 12px
}

.packaging-grid>a p {
    margin-bottom: 24px
}

.packaging-grid>a>span {
    margin-top: auto
}

.packaging-grid>a:first-child h3,
.packaging-grid>a:first-child p,
.packaging-grid>a:first-child small {
    transform: none
}

.packaging-grid>a:first-child {
    padding-left: 26px;
    padding-right: 26px
}

.products .product-explorer {
    position: static;
    top: auto;
    min-height: 480px;
    box-shadow: none;
    transform-style: flat
}

.products .product-visual {
    transform: none;
    background: #aeb7ae
}

.products .product-visual:after {
    display: none
}

.products .product-details {
    transform: none
}

.products .product-tabs {
    z-index: auto
}

@media(max-width:800px) {
    .products .product-explorer {
        min-height: 0
    }
}

@media(max-width:800px) {
    .site-header .nav-cta {
        position: static;
        transform: none
    }
}

#main-nav>a:not(.nav-cta) {
    font-size: 16px
}







/* 404 page */




/* ========================================
   SLICED2GO CREATIVE 404 PAGE
======================================== */

.error-page {
    min-height: 100vh;
    position: relative;

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

    overflow: hidden;

    /* Increased Top & Bottom Padding */
    padding: 100px 20px 100px;

    background:
        radial-gradient(circle at 80% 50%, rgba(41, 104, 65, 0.28), transparent 35%),
        radial-gradient(circle at 20% 20%, rgba(200, 255, 61, 0.05), transparent 30%),
        linear-gradient(135deg, #07110e 0%, #0b1c16 50%, #07110e 100%);

    color: #ffffff;
}



/* ========================================
   GRID BACKGROUND
======================================== */

.error-page::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size: 70px 70px;

    mask-image: linear-gradient(to bottom, black, transparent);

    pointer-events: none;
}


/* ========================================
   LARGE BACKGROUND 404
======================================== */

.background-404 {
    position: absolute;
    left: 50%;
    top: 50%;

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

    font-size: clamp(220px, 38vw, 650px);
    font-weight: 800;

    letter-spacing: -35px;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.06);

    white-space: nowrap;

    user-select: none;

    z-index: 1;
}


/* ========================================
   DECORATIVE CIRCLES
======================================== */

.error-circle {
    position: absolute;
    border: 1px solid rgba(200,255,61,.13);
    border-radius: 50%;
    z-index: 1;

    pointer-events: none;
}

.error-circle.one {
    width: 650px;
    height: 650px;

    right: -280px;
    top: 50%;

    transform: translateY(-50%);
}

.error-circle.two {
    width: 460px;
    height: 460px;

    right: -190px;
    top: 50%;

    transform: translateY(-50%);
}

.error-circle.three {
    width: 280px;
    height: 280px;

    right: -100px;
    top: 50%;

    transform: translateY(-50%);
}


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

.error-content {
    position: relative;
    z-index: 3;

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

    margin: 0 auto;

    text-align: center;
}


/* ========================================
   ERROR TAG
======================================== */

.error-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #c8ff3d;

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

    letter-spacing: 2px;

    margin-bottom: 35px;
}

.error-tag::before,
.error-tag::after {
    content: "";

    width: 35px;
    height: 1px;

    background: #c8ff3d;
}


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

.error-number {
    font-size: clamp(150px, 20vw, 300px);
    font-weight: 800;

    line-height: .8;

    letter-spacing: -14px;

    color: #ffffff;

    margin-bottom: 50px;

    text-shadow:
        0 0 50px rgba(200,255,61,.08);
}

.error-number span {
    color: #c8ff3d;
}


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

.error-content h1 {
    font-size: clamp(38px, 5vw, 70px);

    line-height: 1.08;

    letter-spacing: -2.5px;

    margin: 0 0 25px;

    color: #ffffff;
}

.error-content h1 span {
    color: #c8ff3d;
}


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

.error-content p {
    max-width: 620px;

    margin: 0 auto;

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

    line-height: 1.8;

    font-size: 15px;
}


/* ========================================
   BUTTONS
======================================== */

.error-actions {
    margin-top: 45px;

    display: flex;

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

    gap: 15px;

    flex-wrap: wrap;
}


.error-btn {
    padding: 17px 28px;

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

    letter-spacing: 1.5px;

    transition: all .3s ease;

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

    gap: 15px;

    text-decoration: none;

    min-width: 190px;
}


.error-btn-primary {
    background: #c8ff3d;

    color: #07110e;
}

.error-btn-primary:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 40px rgba(200,255,61,.18);
}


.error-btn-secondary {
    border: 1px solid rgba(255,255,255,.28);

    color: #ffffff;
}

.error-btn-secondary:hover {
    border-color: #c8ff3d;

    color: #c8ff3d;

    transform: translateY(-5px);
}


/* ========================================
   BOTTOM STATUS
======================================== */

.system-status {
    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

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

    gap: 10px;

    font-size: 10px;

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

    letter-spacing: 1px;

    z-index: 3;

    white-space: nowrap;
}


.status-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #c8ff3d;

    box-shadow: 0 0 15px #c8ff3d;

    animation: statusPulse 1.5s infinite;
}


@keyframes statusPulse {

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

    50% {
        opacity: .4;
        transform: scale(1.7);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


/* ========================================
   SIDE TEXT
======================================== */

.side-text {
    position: absolute;

    left: 30px;
    bottom: 50px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    font-size: 9px;

    letter-spacing: 2px;

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

    z-index: 3;
}


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

@media (max-width: 991px) {

    .error-page {
        padding: 140px 25px 120px;
    }

    .background-404 {
        font-size: 42vw;
    }

    .error-circle.one {
        width: 500px;
        height: 500px;

        right: -250px;
    }

    .error-circle.two {
        width: 350px;
        height: 350px;

        right: -175px;
    }

    .error-circle.three {
        width: 220px;
        height: 220px;

        right: -110px;
    }

}


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

@media (max-width: 767px) {

    .error-page {
        min-height: 100vh;

        padding: 130px 20px 120px;

        align-items: center;
    }


    .background-404 {
        font-size: 65vw;

        letter-spacing: -12px;

        top: 48%;
    }


    .error-tag {
        font-size: 9px;

        letter-spacing: 1.5px;

        margin-bottom: 25px;

        gap: 8px;
    }

    .error-tag::before,
    .error-tag::after {
        width: 20px;
    }


    .error-number {
        font-size: clamp(130px, 38vw, 210px);

        letter-spacing: -8px;

        margin-bottom: 35px;
    }


    .error-content h1 {
        font-size: clamp(34px, 9vw, 50px);

        letter-spacing: -1.5px;

        margin-bottom: 20px;
    }


    .error-content p {
        font-size: 14px;

        line-height: 1.7;
    }


    .error-actions {
        margin-top: 35px;

        flex-direction: column;

        width: 100%;
    }


    .error-btn {
        width: 100%;

        max-width: 320px;

        min-height: 55px;
    }


    .side-text {
        display: none;
    }


    .system-status {
        bottom: 25px;

        font-size: 8px;

        letter-spacing: .5px;

        width: calc(100% - 30px);

        text-align: center;
    }


    .error-circle.one {
        width: 380px;
        height: 380px;

        right: -230px;
    }

    .error-circle.two {
        width: 270px;
        height: 270px;

        right: -165px;
    }

    .error-circle.three {
        width: 160px;
        height: 160px;

        right: -100px;
    }

}


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

@media (max-width: 480px) {

    .error-page {
        padding: 110px 15px 100px;
    }


    .error-number {
        font-size: 125px;
    }


    .error-content h1 {
        font-size: 32px;
    }


    .error-content p {
        font-size: 13px;
    }


    .error-btn {
        max-width: 100%;
    }

}