/* =========================================================
   ROOT / VARIABLES
========================================================= */

:root {
    --navy: #071b2d;
    --navy2: #0b2942;
    --red: #e31e2f;
    --ink: #10243a;
    --muted: #667789;
    --line: #e4e9ee;
    --paper: #f6f8fa;
    --max: 1220px;
}


/* =========================================================
   RESET / GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    overflow-x: hidden;
}

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

p {
    line-height: 1.75;
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.scroll-progress {
    position: fixed;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: var(--red);
    z-index: 1000;
}


/* =========================================================
   HEADER
========================================================= */

.top {
    height: 82px;
    padding: 0 max(5vw, 28px);

    display: flex;
    align-items: center;
    gap: 32px;

    position: sticky;
    top: 0;

    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);

    z-index: 100;

    transition: 0.3s;

    border-bottom: 1px solid transparent;
}

.top.scrolled {
    height: 70px;

    box-shadow: 0 10px 30px #071b2d12;

    border-color: #e8edf1;
}


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

.brand img {
    width: 190px;
    max-height: 54px;

    object-fit: contain;

    display: block;
}


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

.top nav {
    display: flex;
    gap: 25px;

    margin-left: auto;

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

.top nav a {
    position: relative;

    padding: 31px 0;

    transition: 0.25s;
}

.top.scrolled nav a {
    padding: 25px 0;
}

.top nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 20px;

    height: 2px;

    background: var(--red);

    transition: 0.25s;
}

.top nav a:hover {
    color: var(--red);
}

.top nav a:hover::after {
    right: 0;
}


/* =========================================================
   LANGUAGE SELECTOR
========================================================= */

.langs {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 11px;

    color: #667789;
}

.langs i {
    width: 1px;
    height: 11px;

    background: #cfd6dc;
}


/* =========================================================
   MOBILE NAVIGATION BUTTON
========================================================= */

.navbtn {
    display: none;

    border: 0;

    background: none;

    padding: 8px;
}

.navbtn span {
    display: block;

    width: 24px;
    height: 2px;

    margin: 5px;

    background: var(--navy);

    transition: 0.25s;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    height: clamp(500px, 62vw, 680px);
    min-height: 500px;
    max-height: 680px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;

    display: flex;
    align-items: center;

    padding: 48px max(7vw, 30px);

    color: #fff;

    position: relative;
    isolation: isolate;
}

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 140px;

    background:
        linear-gradient(
            transparent,
            #06182c55
        );

    z-index: -1;
}

.hero-copy {
    max-width: 690px;
}


/* =========================================================
   LABEL / EYEBROW
========================================================= */

.eyebrow,
.label {
    letter-spacing: 3.2px;

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

    color: var(--red);

    text-transform: uppercase;
}

.eyebrow {
    color: #e6edf3;

    line-height: 1.9;
}


/* =========================================================
   HERO TEXT
========================================================= */

.hero h1 {
    font-size: clamp(52px, 6.3vw, 88px);

    letter-spacing: -3px;

    line-height: 0.96;

    margin: 46px 0 25px;

    font-weight: 650;
}

.hero p {
    max-width: 560px;

    font-size: 17px;

    color: #e2e9ef;
}


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

.btn {
    display: inline-flex;

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

    padding: 15px 25px;

    margin: 18px 10px 0 0;

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

    letter-spacing: 0.2px;

    transition: 0.25s;
}

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

.red {
    background: var(--red);

    color: #fff;

    box-shadow: 0 10px 25px #e31e2f2d;
}

.red:hover {
    background: #c91726;
}

.ghost {
    border: 1px solid #ffffffaa;

    color: #fff;

    background: #ffffff08;
}

.ghost:hover {
    background: #fff;

    color: var(--navy);
}


/* =========================================================
   STATS
========================================================= */

.stats {
    display: grid;

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

    padding: 45px max(7vw, 30px);

    text-align: center;

    background: #fff;

    box-shadow: 0 20px 50px #071b2d0a;

    position: relative;

    z-index: 2;
}

.stats div {
    padding: 4px 15px;

    border-right: 1px solid var(--line);
}

.stats div:last-child {
    border: 0;
}

.stats b {
    display: block;

    font-size: 30px;

    letter-spacing: -1px;

    color: var(--navy);
}

.stats span {
    font-size: 12px;

    color: #758391;
}


/* =========================================================
   ABOUT / SPLIT SECTION
========================================================= */

.split {
    display: grid;

    grid-template-columns:
        minmax(360px, 42%)
        1fr;

    min-height: 520px;
}

.about > div:first-child {
    padding: 95px max(7vw, 40px);

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.about p {
    max-width: 510px;

    color: var(--muted);
}

.photo {
    position: relative;

    background-size: cover;
    background-position: center;
}

.photo::after {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid #fff2;
}


/* =========================================================
   GENERAL SECTION
========================================================= */

.section {
    padding: 95px max(7vw, 30px);
}

.section h2,
.about h2,
.manufacturing h2,
.career h2 {
    font-size: clamp(38px, 4.1vw, 58px);

    letter-spacing: -2px;

    line-height: 1.03;

    margin: 16px 0 24px;

    color: var(--navy);
}

.sectionhead {
    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 60px;

    max-width: var(--max);

    margin: auto;
}

.sectionhead > p {
    max-width: 430px;

    color: var(--muted);
}


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

.grid {
    display: grid;

    gap: 24px;
}


/* =========================================================
   PRODUCTS
========================================================= */

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

    max-width: var(--max);

    margin: 42px auto 0;
}

.products article,
.news article {
    transition: 0.3s;
}

.products article:hover,
.news article:hover {
    transform: translateY(-6px);
}


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

.cardimg {
    height: 245px;

    background:
        #edf0f2
        center / cover
        no-repeat;

    overflow: hidden;

    position: relative;
}

.cardimg::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            transparent 0,
            #06182c12 70%
        );

    transition: 0.2s;
}

.products h3,
.news h3 {
    margin: 18px 0 7px;

    color: var(--navy);

    font-size: 18px;
}

.products p,
.news p {
    font-size: 13px;

    color: var(--muted);
}

.products a,
.news a {
    font-size: 12px;

    font-weight: 800;

    color: var(--red);
}


/* =========================================================
   MANUFACTURING
========================================================= */

.manufacturing {
    min-height: 680px;

    padding: 90px max(7vw, 30px);

    color: #fff;

    background-size: cover;
    background-position: center;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;
}

.manufacturing > div:first-child {
    max-width: 560px;
}

.manufacturing h2,
.career h2 {
    color: #fff;
}

.manufacturing p,
.career p {
    color: #dce6ee;
}

.light {
    color: #fff;
}


/* =========================================================
   MANUFACTURING PROCESS
========================================================= */

.process {
    display: grid;

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

    gap: 1px;

    background: #ffffff2c;
}

.process span {
    padding: 48px 24px 26px;

    background: #061a2dc9;

    font-size: 30px;

    transition: 0.25s;
}

.process span:hover {
    background: #e31e2fe6;

    transform: translateY(-5px);
}

.process b {
    font-size: 14px;

    letter-spacing: 0.3px;
}


/* =========================================================
   SUSTAINABILITY
========================================================= */

.sustainability {
    display: grid;

    grid-template-columns: 31% 69%;

    gap: 55px;

    align-items: center;

    max-width: 1500px;

    margin: auto;
}

.sustainability > div:first-child p {
    color: var(--muted);
}

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

.sustaincards article {
    height: 380px;

    background:
        center / cover;

    display: flex;

    align-items: end;

    padding: 26px;

    color: #fff;

    font-size: 21px;

    box-shadow:
        inset 0 -150px 100px #00172ccc;

    transition: 0.3s;
}

.sustaincards article:hover {
    transform: translateY(-7px);
}


/* =========================================================
   CAREER
========================================================= */

.career {
    min-height: 430px;

    background:
        center / cover;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    color: #fff;

    padding: 60px max(7vw, 30px);
}

.career > div {
    width: min(43%, 540px);
}


/* =========================================================
   NEWS
========================================================= */

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

    margin: 38px auto 0;

    max-width: var(--max);
}

.news small {
    display: block;

    margin-top: 16px;

    color: #82909c;

    font-size: 11px;
}


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

.footer {
    padding: 70px max(7vw, 30px);

    display: grid;

    grid-template-columns:
        1.35fr
        0.7fr
        1fr;

    gap: 80px;

    background: var(--navy);

    color: #cdd8e2;
}

.footer img {
    width: 210px;

    filter: brightness(0) invert(1);

    opacity: 0.95;
}

.footer h4 {
    color: #fff;

    letter-spacing: 0.5px;
}

.footer p,
.footerlinks {
    line-height: 1.8;

    font-size: 12px;
}

.footerlinks {
    display: grid;

    gap: 5px;
}

.footer a:hover {
    color: #fff;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {
    padding: 18px max(7vw, 30px);

    background: #041522;

    color: #758696;

    font-size: 10px;

    display: flex;

    justify-content: space-between;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.backtop {
    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 44px;
    height: 44px;

    border: 0;

    background: var(--red);

    color: #fff;

    opacity: 0;

    pointer-events: none;

    transform: translateY(12px);

    transition: 0.25s;

    z-index: 50;
}

.backtop.show {
    opacity: 1;

    pointer-events: auto;

    transform: none;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(26px);

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

.reveal.visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   INNER PAGES
========================================================= */

.inner {
    min-height: 60vh;
}

.inner-page {
    padding-top: 90px;
}


/* =========================================================
   PAGE HERO
========================================================= */

.pagehero {
    padding:
        110px
        max(7vw, 30px)
        70px;

    background:
        linear-gradient(
            135deg,
            #f5f7f9,
            #fff
        );

    border-bottom:
        1px solid var(--line);
}

.pagehero h1,
.detail h1,
.article h1 {
    font-size:
        clamp(42px, 5.5vw, 70px);

    letter-spacing: -2.5px;

    margin: 0.2em 0;

    color: var(--navy);
}

.pagehero p {
    max-width: 650px;

    color: var(--muted);
}


/* =========================================================
   PRODUCT DETAIL
========================================================= */

.detail {
    max-width: 1200px;

    margin: auto;

    padding: 90px 30px;

    display: grid;

    grid-template-columns:
        1.1fr
        1fr;

    gap: 60px;

    align-items: center;
}

.detailimg {
    min-height: 500px;

    background-size: cover;

    background-position: center;
}


/* =========================================================
   ARTICLE / NEWS DETAIL
========================================================= */

.article {
    max-width: 900px;

    margin: auto;

    padding: 90px 30px;
}

.article img {
    width: 100%;

    max-height: 540px;

    object-fit: cover;

    margin: 25px 0;
}

.article p {
    font-size: 17px;

    line-height: 1.85;
}


/* =========================================================
   JOBS / CAREER
========================================================= */

.jobs {
    max-width: 1000px;

    margin: auto;
}

.jobs article {
    padding: 30px;

    margin: 18px 0;

    background: #f7f9fa;

    border-left:
        3px solid var(--red);

    transition: 0.25s;
}

.jobs article:hover {
    transform: translateX(5px);

    box-shadow:
        0 15px 35px #071b2d0d;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 14px;

    max-width: 850px;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;

    border:
        1px solid #d7dde5;

    font: inherit;

    outline: none;

    transition: 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #7d8c99;

    box-shadow:
        0 0 0 3px #0b294208;
}

.contact-form textarea,
.contact-form button {
    grid-column: 1 / -1;
}

.contact-form button {
    padding: 15px;

    background: var(--red);

    color: #fff;

    border: 0;

    font-weight: 700;
}


/* =========================================================
   NOTICE
========================================================= */

.notice {
    padding: 14px;

    margin: 15px 0;

    background: #eef7f0;

    border-left:
        4px solid #1d7b43;
}


/* =========================================================
   DETAIL COPY
========================================================= */

.detail-copy {
    max-width: 900px;

    font-size: 1.08rem;

    line-height: 1.9;

    margin:
        0 auto 55px;
}


/* =========================================================
   GRID 3 / GRID 4
========================================================= */

.grid3,
.grid4 {
    display: grid;

    gap: 22px;

    margin-top: 35px;
}

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

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


/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    max-width: 900px;

    margin: 30px auto;
}

.timeline article {
    display: grid;

    grid-template-columns:
        120px
        1fr;

    gap: 25px;

    padding: 25px 0;

    border-top:
        1px solid #dfe5ea;
}

.timeline strong {
    font-size: 1.5rem;

    color: #07569b;
}


/* =========================================================
   MAINTENANCE PAGE
========================================================= */

.maintenance {
    min-height: 80vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px;
}

.maintenance img {
    width: 180px;

    margin-bottom: 30px;
}

.maintenance h1 {
    font-size:
        clamp(3rem, 8vw, 7rem);

    margin: 0;
}


/* =========================================================
   RESPONSIVE - 1000px
========================================================= */

@media (max-width: 1000px) {

    .top nav {
        gap: 16px;
    }

    .top nav a {
        font-size: 12px;
    }

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

    .career > div {
        width: 55%;
    }

    .footer {
        gap: 40px;
    }

}


/* =========================================================
   RESPONSIVE - 900px
========================================================= */

@media (max-width: 900px) {

    .grid3,
    .grid4 {
        grid-template-columns: 1fr;
    }

    .timeline article {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVE - 850px
========================================================= */

@media (max-width: 850px) {

    .top {
        height: 72px;
    }

    .top nav {
        display: none;

        position: absolute;

        top: 72px;
        left: 0;
        right: 0;

        background: #fff;

        padding:
            18px
            28px
            28px;

        box-shadow:
            0 20px 30px #071b2d18;

        flex-direction: column;

        gap: 0;
    }

    .top.menu-open nav {
        display: flex;
    }

    .top nav a,
    .top.scrolled nav a {
        padding: 12px 0;
    }

    .langs {
        margin-left: auto;
    }

    .navbtn {
        display: block;
    }

    .top.menu-open
    .navbtn span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .top.menu-open
    .navbtn span:nth-child(2) {
        opacity: 0;
    }

    .top.menu-open
    .navbtn span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }

    .brand img {
        width: 155px;
    }

    .hero {
        height: 560px;
        min-height: 560px;
        max-height: 560px;
        background-size: cover;
        background-position: center;
    }

    .stats {
        grid-template-columns:
            1fr 1fr;

        gap: 28px;
    }

    .stats div {
        border: 0;
    }

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

    .photo {
        min-height: 380px;
    }

    .products,
    .news {
        grid-template-columns:
            1fr 1fr;
    }

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

    .career > div {
        width: 70%;
    }

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

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

}


/* =========================================================
   RESPONSIVE - 560px
========================================================= */

@media (max-width: 560px) {

    .langs {
        display: none;
    }

    .hero {
        padding:
            60px 24px;

        height: 520px;
        min-height: 520px;
        max-height: 520px;

        background-size: cover;
        background-position:
            62% center;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .hero p {
        font-size: 15px;
    }

    .stats,
    .products,
    .news,
    .sustaincards,
    .footer {
        grid-template-columns: 1fr;
    }

    .stats {
        padding:
            35px 24px;
    }

    .section,
    .about > div:first-child,
    .manufacturing {
        padding:
            65px 24px;
    }

    .sectionhead {
        display: block;
    }

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

    .process span {
        padding:
            32px 15px 20px;
    }

    .career {
        justify-content:
            flex-start;

        padding:
            55px 24px;

        min-height:
            430px;
    }

    .career > div {
        width: 100%;
    }

    .sustaincards article {
        height: 290px;
    }

    .copyright {
        display: block;

        line-height: 1.8;
    }

    .detail {
        grid-template-columns: 1fr;

        padding:
            60px 24px;
    }

    .detailimg {
        min-height: 300px;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-form > * {
        grid-column:
            1 !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    * {
        animation: none !important;

        transition: none !important;
    }

}