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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Manrope',sans-serif;

    background:#090909;

    color:#fff;

    overflow-x:hidden;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

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

:root{

    --gold:#C9A86A;
    --gold-light:#E6C78E;

    --white:#FFFFFF;

    --gray:#D6D6D6;

    --dark:#090909;

}

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

.header{

    position:fixed;

    top:24px;

    left:0;

    width:100%;

    z-index:100;

    padding:0 30px;

}

/*======================================
        NAVBAR
======================================*/

.navbar{

    width:min(1400px,100%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 36px;

    border-radius:22px;

    background:rgba(10,10,10,.45);

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

    backdrop-filter:blur(18px);

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

    transition:.35s ease;

}

.navbar:hover{

    border-color:rgba(201,168,106,.25);

}

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

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    width: 160px;

}

/*======================================
        MENU
======================================*/

.nav-menu{

    display:flex;

    align-items:center;

    gap:38px;

}

.nav-menu a{

    position:relative;

    color:white;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.5px;

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

}


/*======================================
        HOVER + ACTIVE LINE
======================================*/

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:
        width .35s ease;

}


/* HOVER */

.nav-menu a:hover{

    color:var(--gold);

}

.nav-menu a:hover::after{

    width:100%;

}

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

.nav-menu a.active{

    color:var(--gold);

}

.nav-menu a.active::after{

    width:100%;

}

/*======================================
        BUTTON
======================================*/

.nav-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    border-radius:999px;

    background:var(--gold);

    color:#111;

    font-weight:700;

    transition:.35s;

}

.nav-btn:hover{

    transform:translateY(-3px);

    background:var(--gold-light);

    box-shadow:0 10px 30px rgba(201,168,106,.30);

}

/*======================================
        HAMBURGER
======================================*/

.hamburger{

    display:none;

    width:42px;

    height:42px;

}

.hamburger span{

    display:block;

    width:28px;

    height:2px;

    margin:6px auto;

    background:white;

    transition:.35s;

}

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

.hero{

    position:relative;

    min-height:100svh;
    min-height: 100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:url("assets/images/hero.jpg");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

/* SLIDER EFFECTION */ 

.hero-slider{

    position:absolute;

    inset:0;

    z-index:0;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 1.5s ease;

}

.hero-slide.active{

    opacity:1;

}

.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:heroZoom 8s linear forwards;

}

.hero-slide.active img{

    animation:heroZoom 8s linear forwards;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/* Zoom efekat pozadine */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:inherit;

    transform:scale(1.12);

    animation:heroZoom 8s ease forwards;

}

/*======================================
            OVERLAY
======================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

    linear-gradient(

        rgba(0,0,0,.72),

        rgba(0,0,0,.58)

    );

}

/* Zlatni glow */

.hero-overlay::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-220px;

    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(201,168,106,.15),

    transparent 70%);

    filter:blur(80px);

}

.hero-indicators{

    position:absolute;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:10;

}

.hero-indicators span{

    width:42px;

    height:3px;

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

    border-radius:20px;

    transition:.4s;

}

.hero-indicators span.active{

    background:var(--gold);

    width:70px;

}

/*======================================
            CONTAINER
======================================*/

.hero-container{

    position:relative;

    z-index:5;

    width:min(1400px,100%);

    margin:auto;

    padding:

    clamp(150px,18vh,220px)

    clamp(35px,7vw,90px)

    100px;

}

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

.hero-content{

    max-width:640px;
    position: relative;
    z-index: 5;

}

.hero-subtitle{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

    color:var(--gold);

    font-size:.75rem;

    letter-spacing:4px;

    text-transform:uppercase;

}

.hero-subtitle::before{

    content:"";

    width:60px;

    height:1px;

    background:var(--gold);

}

.hero h1{

    max-width:650px;

    font-size:clamp(2.8rem,4vw,4.6rem);

    line-height:1.08;

    font-weight:700;

    letter-spacing:-2px;

    margin-bottom:35px;

}

.hero p{

    max-width:560px;

    color:#d6d6d6;

    font-size:1.08rem;

    line-height:1.9;

    margin-bottom:50px;

    opacity:0;

    animation:fadeUp .8s .7s forwards;

}

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

.hero-buttons{

    display:flex;

    position: relative;

    z-index: 10;

    gap:20px;

    flex-wrap:wrap;

    opacity:0;

    animation:fadeUp .8s .9s forwards;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:999px;

    background:var(--gold);

    color:#111;

    font-weight:700;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-3px);

    background:var(--gold-light);

    box-shadow:0 12px 35px rgba(201,168,106,.25);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:999px;

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

    color:white;

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

.btn-secondary:hover{

    border-color:var(--gold);

    color:var(--gold);

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

}

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

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:5;

}

.hero-scroll span{

    width:2px;

    height:70px;

    background:linear-gradient(

    to bottom,

    var(--gold),

    transparent);

    animation:scroll 2s infinite;

}

.hero-scroll p{

    color:var(--gold);

    font-size:.75rem;

    letter-spacing:4px;

    text-transform:uppercase;

}

@keyframes scroll{

    0%{

        opacity:0;

        transform:translateY(-10px);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(10px);

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================
            COLLECTION
======================================*/

.collection{

    position:relative;

    overflow:hidden;

    padding:180px 0;

    background:

    radial-gradient(circle at top left,
    rgba(201,168,106,.05),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(201,168,106,.04),
    transparent 40%),

    linear-gradient(
    180deg,
    #070707,
    #0d0d0d,
    #090909);

}

.collection-grid{

    position:relative;

}

.collection::selection{

    background:var(--gold);

}

.collection{

    background-image:

    linear-gradient(

    rgba(255,255,255,.015) 1px,

    transparent 1px

    ),

    linear-gradient(

    90deg,

    rgba(255,255,255,.015) 1px,

    transparent 1px

    );

    background-size:90px 90px;

}

/* Glow */

.collection::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:-250px;
    top:200px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(201,168,106,.10),
    transparent 70%);

    filter:blur(120px);

    animation:glowMove 12s ease-in-out infinite alternate;

}

.collection::after{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-250px;
    bottom:-100px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(201,168,106,.06),
    transparent 70%);

    filter:blur(140px);

    animation:glowMove2 15s ease-in-out infinite alternate;

}

@keyframes glowMove{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(60px,-50px);

    }

}

@keyframes glowMove2{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-60px,40px);

    }

}

.section-container{

    position:relative;

    z-index:2;

    width:min(1400px,90%);

    margin:auto;

}

.collection-content{

    position: relative;
    max-width:480px;

    padding-left:50px;

}

.collection-content > *{

    position:relative;

    z-index:2;

}

.collection-number{

    position:absolute;

    top:-40px;

    left:-20px;

    font-size:8rem;

    font-weight:800;

    line-height:1;

    color:rgba(201,168,106,.05);

    pointer-events:none;

    z-index:0;

}

.collection-type{

    display:block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.8rem;

    margin-bottom:18px;

}

.collection-content h3{

    font-size:3.4rem;

    font-weight:700;

    margin-bottom:20px;

}

.collection-content p{

    font-size:1.05rem;

    line-height:1.9;

    color:#C8C8C8;

    margin-bottom:35px;

    max-width:420px;

}

/*======================================
        COLLECTION BUTTON
======================================*/

.collection-btn{

    display:inline-flex;
    align-items:center;
    gap:16px;

    padding:16px 28px;

    margin-top:35px;

    border:1px solid rgba(201,168,106,.35);

    border-radius:999px;

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

    color:#fff;

    text-decoration:none;

    transition:.35s ease;

}

.collection-btn span{

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.5px;

}

.btn-icon{

    width:42px;
    height:42px;

    border-radius:50%;

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

    background:rgba(201,168,106,.15);

    transition:.35s ease;

}

.btn-icon svg{

    color:var(--gold);

    transition:.35s ease;

}

.collection-btn:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(201,168,106,.25);

}

.collection-btn:hover .btn-icon{

    background:#111;

}

.collection-btn:hover .btn-icon svg{

    color:var(--gold);

    transform:translateX(4px);

}

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

.section-heading{

    max-width:720px;

    margin:0 auto 140px;

    text-align:center;

}

.section-subtitle{

    display:inline-flex;

    align-items:center;

    gap:16px;

    color:var(--gold);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.78rem;

    margin-bottom:24px;

}

.section-subtitle::before,
.section-subtitle::after{

    content:"";

    width:55px;

    height:1px;

    background:var(--gold);

}

.section-heading h2{

    font-size:clamp(3rem,5vw,5.3rem);

    line-height:.95;

    letter-spacing:-2px;

    margin-bottom:28px;

}

.section-heading p{

    color:#C5C5C5;

    font-size:1.05rem;

    line-height:1.9;

}

/*======================================
            ITEM
======================================*/

.collection-item{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:90px;

    margin-bottom:180px;

    position:relative;

}

.collection-item::after{

    content:"";

    position:absolute;

    bottom:-90px;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:1px;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(201,168,106,.35),

    transparent

    );

}

.collection-item:last-child::after{

    display:none;

}

.collection-item:last-child{

    margin-bottom:0;

}

.collection-item.reverse{

    grid-template-columns:.85fr 1.15fr;

}

.collection-item.reverse .collection-image{

    order:2;

}

.collection-item.reverse .collection-content{

    order:1;

}

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

.collection-image{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    aspect-ratio:16/10;

    background:#111;

    overflow: hidden;
    box-shadow: 0 30px 70px rgba( 0, 0, 0, .45), 0 0 0 1px rgba( 255, 255, 255, .05 );

}

.collection-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition: 1s cubic-bezier( .19, 1, .22, 1 );

}

.collection-item:hover img{

    transform:scale(1.06);

}

.collection-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.35),

    transparent

    );

    z-index:1;

}

.mouse-light{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(201,168,106,.12),

    transparent 70%);

    filter:blur(60px);

    pointer-events:none;

    left:0;

    top:0;

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

    transition:

    transform .08s linear;

}

/* =========================================
   THE MATERIAL / EXPERIENCE
========================================= */

.material-experience {

    position: relative;

    padding: 190px 0 140px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(201,168,106,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(201,168,106,.035),
            transparent 35%
        ),
        #080808;

    overflow: hidden;

}


/* =========================================
   AMBIENT LIGHT
========================================= */

.material-ambient {

    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(130px);

    opacity: .7;

}

.material-ambient-left {

    top: 300px;
    left: -350px;

    background:
        rgba(201,168,106,.055);

    animation:
        materialAmbientLeft 14s
        ease-in-out
        infinite alternate;

}

.material-ambient-right {

    right: -300px;
    bottom: 300px;

    background:
        rgba(201,168,106,.045);

    animation:
        materialAmbientRight 17s
        ease-in-out
        infinite alternate;

}

@keyframes materialAmbientLeft {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(80px,-60px,0);
    }

}

@keyframes materialAmbientRight {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-70px,50px,0);
    }

}


/* =========================================
   INTRO
========================================= */

.material-intro {

    position: relative;

    z-index: 2;

    width: min(1200px, 88%);

    margin: 0 auto 120px;

}

.material-eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 35px;

    color: var(--gold);

    font-size: .7rem;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

}

.material-eyebrow::before {

    content: "";

    width: 50px;

    height: 1px;

    background: var(--gold);

}

.material-intro h2 {

    max-width: 1000px;

    margin: 0;

    font-size:
        clamp(3.5rem, 7vw, 7.5rem);

    line-height: .9;

    letter-spacing: -5px;

    font-weight: 500;

}

.material-intro h2 span {

    display: block;

    color: var(--gold);

}

.material-intro p {

    max-width: 600px;

    margin: 45px 0 0 auto;

    color: #999;

    font-size: 1rem;

    line-height: 1.9;

}


/* =========================================
   MAIN VISUAL
========================================= */

.material-visual {

    position: relative;

    width: min(1500px, 94%);

    margin: 0 auto;

    z-index: 2;

}

.materia-image {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 2;

    overflow: hidden;

    border-radius: 24px;

    background: #fff;
}

.material-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            rgba(0,0,0,.25)
        );

    pointer-events: none;

}


.material-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform 1.5s
        cubic-bezier(.19,1,.22,1);

}

.material-visual:hover
.material-image img {

    transform: scale(1.01);

}


/* =========================================
   IMAGE FRAME
========================================= */

.material-visual::after {

    content: "";

    position: absolute;

    inset: 18px;

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

    pointer-events: none;

}


/* =========================================
   FLOATING CAPTION
========================================= */

.material-caption {

    position: absolute;

    right: 55px;

    bottom: 50px;

    width: 280px;

    padding: 25px 28px;

    background:
        rgba(8,8,8,.78);

    border:
        1px solid
        rgba(201,168,106,.22);

    backdrop-filter: blur(14px);

}

.material-caption span {

    display: block;

    margin-bottom: 12px;

    color: var(--gold);

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: 3px;

}

.material-caption p {

    margin: 0;

    color: #eee;

    font-size: .9rem;

    line-height: 1.6;

}


/* =========================================
   IMAGE INDEX
========================================= */

.material-index {

    position: absolute;

    left: 45px;

    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 14px;

    color: #fff;

    font-size: .7rem;

    letter-spacing: 2px;

}

.material-index span:first-child {

    color: var(--gold);

}

.index-line {

    width: 50px;

    height: 1px;

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

}


/* =========================================
   STATEMENT
========================================= */

.material-statement {

    position: relative;

    z-index: 2;

    width: min(1100px, 88%);

    margin: 190px auto;

    text-align: center;

}

.statement-eyebrow {

    display: block;

    margin-bottom: 35px;

    color: var(--gold);

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: 4px;

}

.material-statement h3 {

    max-width: 1000px;

    margin: 0 auto 35px;

    font-size:
        clamp(3rem, 6vw, 6.5rem);

    line-height: .92;

    letter-spacing: -4px;

    font-weight: 500;

}

.material-statement h3 span {

    color: var(--gold);

}

.material-statement p {

    max-width: 600px;

    margin: auto;

    color: #888;

    font-size: .98rem;

    line-height: 1.9;

}


/* =========================================
   SPLIT VISUAL
========================================= */

.material-split {

    position: relative;

    z-index: 2;

    width: min(1250px, 88%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        .7fr 1fr 1.35fr;

    gap: 45px;

    align-items: center;

}


/* =========================================
   SMALL IMAGE
========================================= */

.material-small-image {

    height: 430px;

    overflow: hidden;

}

.material-small-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1.2s
        cubic-bezier(.19,1,.22,1);

}

.material-small-image:hover img {

    transform: scale(1.06);

}


/* =========================================
   DETAIL TEXT
========================================= */

.material-detail {

    padding: 20px 10px;

}

.detail-number {

    display: block;

    margin-bottom: 28px;

    color: var(--gold);

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: 3px;

}

.material-detail h4 {

    margin: 0 0 25px;

    font-size:
        clamp(2rem, 3.5vw, 3.8rem);

    line-height: .98;

    letter-spacing: -2px;

    font-weight: 500;

}

.material-detail p {

    max-width: 400px;

    margin: 0;

    color: #999;

    font-size: .92rem;

    line-height: 1.9;

}

.detail-line {

    width: 70px;

    height: 1px;

    margin: 35px 0 18px;

    background: var(--gold);

}

.detail-note {

    color: #666;

    font-size: .58rem;

    letter-spacing: 3px;

}


/* =========================================
   MATERIAL LARGE IMAGE
========================================= */

.material-large-image {
    position: relative;

    width: 100%;

    /* prati proporciju same slike */
    aspect-ratio: 3 / 2;

    overflow: hidden;

    border-radius: 24px;

    background: #f4f1eb;
}


/* =========================================
   FULL IMAGE
========================================= */

.material-large-image img {
    display: block;

    width: 100%;
    height: 100%;

    /*
       BITNO:
       contain = ništa se ne seče
    */
    object-fit: contain;

    object-position: center;

    transform: none;

    transition:
        transform .9s cubic-bezier(.2,.65,.2,1);
}


/* =========================================
   SUBTLE HOVER
========================================= */

.material-large-image:hover img {
    transform: scale(1.015);
}


/* =========================================
   FINAL STATEMENT
========================================= */

.material-final {

    position: relative;

    z-index: 2;

    width: min(1200px, 88%);

    margin: 200px auto 150px;

    text-align: center;

}

.material-final span {

    display: block;

    margin-bottom: 35px;

    color: var(--gold);

    font-size: .65rem;

    letter-spacing: 5px;

    font-weight: 600;

}

.material-final h3 {

    margin: 0;

    font-size:
        clamp(3.5rem, 7vw, 8rem);

    line-height: .88;

    letter-spacing: -5px;

    font-weight: 500;

}

.material-final em {

    color: var(--gold);

    font-style: normal;

}


/* =========================================
   BOTTOM LINE
========================================= */

.material-bottom-line {

    width: min(1400px, 90%);

    height: 1px;

    margin: 0 auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,168,106,.3),
            transparent
        );

}


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

@media (max-width: 950px) {

    .material-intro h2 {

        letter-spacing: -3px;

    }

    .material-image {

        height: 600px;

    }

    .material-split {

        grid-template-columns:
            .8fr 1fr;

        gap: 35px;

    }

    .material-large-image {

        grid-column: 1 / -1;

        height: 500px;

    }

}


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

@media (max-width: 650px) {

    .material-experience {

        padding: 110px 0 90px;

    }

    .material-intro {

        width: 88%;

        margin-bottom: 75px;

    }

    .material-eyebrow {

        font-size: .62rem;

        letter-spacing: 3px;

    }

    .material-eyebrow::before {

        width: 30px;

    }

    .material-intro h2 {

        font-size: 3.1rem;

        line-height: .95;

        letter-spacing: -2px;

    }

    .material-intro p {

        margin: 30px 0 0;

        font-size: .9rem;

        line-height: 1.8;

    }


    /* Main image */

    .material-visual {

        width: 94%;

    }

    .material-image {

        height: 520px;

    }

    .material-visual::after {

        inset: 10px;

    }

    .material-caption {

        right: 20px;

        bottom: 20px;

        width: 220px;

        padding: 18px 20px;

    }

    .material-caption span {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .material-caption p {

        font-size: .78rem;

    }

    .material-index {

        left: 20px;

        bottom: 22px;

    }


    /* Statement */

    .material-statement {

        width: 88%;

        margin: 110px auto;

    }

    .statement-eyebrow {

        font-size: .55rem;

        letter-spacing: 3px;

    }

    .material-statement h3 {

        font-size: 3rem;

        letter-spacing: -2px;

    }

    .material-statement p {

        font-size: .88rem;

    }


    /* Split */

    .material-split {

        width: 88%;

        display: flex;

        flex-direction: column;

        gap: 45px;

        align-items: stretch;

    }

    .material-small-image {

        height: 380px;

    }

    .material-detail {

        padding: 0;

    }

    .material-detail h4 {

        font-size: 2.6rem;

        letter-spacing: -1px;

    }

    .material-large-image {

        height: 420px;

    }


    /* Final */

    .material-final {

        width: 88%;

        margin: 130px auto 100px;

    }

    .material-final h3 {

        font-size: 3.3rem;

        letter-spacing: -2px;

    }

    .material-final span {

        font-size: .55rem;

        letter-spacing: 3px;

    }

}


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

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

    .material-ambient-left,
    .material-ambient-right {

        animation: none;

    }

    .material-image img,
    .material-small-image img,
    .material-large-image img {

        transition: none;

    }

}

/* =========================================
   PROJECTS / REFERENZEN
========================================= */

.projects-section {

    position: relative;

    padding: 190px 0 150px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(201,168,106,.045),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #080808 0%,
            #0b0b0b 50%,
            #080808 100%
        );

    overflow: hidden;

}


/* =========================================
   AMBIENT GLOW
========================================= */

.projects-glow {

    position: absolute;

    width: 600px;
    height: 600px;

    right: -350px;
    top: 400px;

    border-radius: 50%;

    background:
        rgba(201,168,106,.045);

    filter: blur(130px);

    pointer-events: none;

    animation:
        projectGlow 16s
        ease-in-out
        infinite alternate;

}

@keyframes projectGlow {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-80px,60px,0);
    }

}


/* =========================================
   CONTAINER
========================================= */

.projects-container {

    position: relative;

    z-index: 2;

    width: min(1400px, 90%);

    margin: 0 auto;

}


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

.projects-header {

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 110px;

}

.projects-eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

}

.projects-eyebrow span {

    width: 50px;

    height: 1px;

    background: var(--gold);

}

.projects-eyebrow p {

    margin: 0;

    color: var(--gold);

    font-size: .68rem;

    font-weight: 600;

    letter-spacing: 4px;

}

.projects-heading {

    max-width: 900px;

}

.projects-heading h2 {

    margin: 0 0 35px;

    font-size:
        clamp(3.2rem, 6vw, 6.5rem);

    line-height: .92;

    letter-spacing: -4px;

    font-weight: 500;

}

.projects-heading h2 span {

    display: block;

    color: var(--gold);

}

.projects-heading p {

    max-width: 620px;

    margin: 0;

    color: #8f8f8f;

    font-size: .98rem;

    line-height: 1.9;

}


/* =========================================
   FEATURED PROJECT
========================================= */

.project-featured {

    margin-bottom: 120px;

}

.project-link {

    display: block;

    color: inherit;

    text-decoration: none;

}

.project-image {

    position: relative;

    overflow: hidden;

    background: #111;

}

.project-featured .project-image {

    width: 100%;

    height: min(68vh, 720px);

}

.project-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1.2s
        cubic-bezier(.19,1,.22,1);

}

.project-link:hover
.project-image img {

    transform: scale(1.055);

}


/* =========================================
   IMAGE OVERLAY
========================================= */

.project-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.55)
        );

    opacity: .65;

    transition: .5s ease;

}

.project-link:hover
.project-overlay {

    opacity: .85;

}


/* =========================================
   PROJECT VIEW
========================================= */

.project-view {

    position: absolute;

    right: 35px;
    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 15px;

    opacity: 0;

    transform:
        translateY(15px);

    transition: .45s ease;

}

.project-link:hover
.project-view {

    opacity: 1;

    transform:
        translateY(0);

}

.project-view span {

    color: #fff;

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: 2px;

}

.project-arrow {

    width: 48px;
    height: 48px;

    display: flex;

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

    border: 1px solid
        rgba(201,168,106,.6);

    border-radius: 50%;

    color: var(--gold);

    font-size: 1.1rem;

    transition: .4s ease;

}

.project-link:hover
.project-arrow {

    background: var(--gold);

    color: #111;

    transform:
        rotate(-45deg);

}


/* =========================================
   PROJECT INFO
========================================= */

.project-info {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

    padding: 25px 5px 0;

}

.project-category {

    display: block;

    margin-bottom: 9px;

    color: var(--gold);

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 3px;

}

.project-info h3 {

    margin: 0;

    font-size: 1.45rem;

    font-weight: 500;

    letter-spacing: -.3px;

}

.project-location {

    padding-top: 4px;

    color: #666;

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 2px;

    white-space: nowrap;

}


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

.projects-grid {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 130px 70px;

    align-items: start;

}


/* =========================================
   PROJECT CARD
========================================= */

.project-card {

    position: relative;

}


/* Small project */

.project-card-small {

    margin-top: 120px;

}

.project-card-small .project-image {

    height: 470px;

}


/* Large project */

.project-card-large {

    margin-top: 0;

}

.project-card-large .project-image {

    height: 620px;

}


/* Wide project */

.project-card-wide {

    grid-column: 1 / -1;

    width: 72%;

    margin-left: auto;

    margin-top: 40px;

}

.project-card-wide .project-image {

    height: 520px;

}


/* =========================================
   CARD BORDER
========================================= */

.project-card .project-image::after {

    content: "";

    position: absolute;

    inset: 12px;

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

    pointer-events: none;

    transition: .5s ease;

}

.project-card:hover
.project-image::after {

    inset: 8px;

    border-color:
        rgba(201,168,106,.25);

}


/* =========================================
   CTA
========================================= */

.projects-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-top: 170px;

    padding-top: 60px;

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

}

.projects-cta p {

    margin: 0;

    color: #888;

    font-size: .95rem;

}

.projects-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    color: #fff;

    text-decoration: none;

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: 2px;

}

.projects-button-icon {

    width: 45px;
    height: 45px;

    display: flex;

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

    border:
        1px solid
        rgba(201,168,106,.5);

    border-radius: 50%;

    color: var(--gold);

    transition: .4s ease;

}

.projects-button:hover {

    color: var(--gold);

}

.projects-button:hover
.projects-button-icon {

    background: var(--gold);

    color: #111;

    transform:
        translateX(7px);

}


/* =========================================
   BOTTOM LINE
========================================= */

.projects-line {

    width: min(1400px, 90%);

    height: 1px;

    margin: 150px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,168,106,.25),
            transparent
        );

}


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

@media (max-width: 950px) {

    .projects-header {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .projects-heading h2 {

        letter-spacing: -3px;

    }

    .project-featured .project-image {

        height: 580px;

    }

    .projects-grid {

        gap: 90px 40px;

    }

    .project-card-small .project-image {

        height: 400px;

    }

    .project-card-large .project-image {

        height: 520px;

    }

    .project-card-wide {

        width: 85%;

    }

}


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

@media (max-width: 650px) {

    .projects-section {

        padding: 110px 0 5px;

    }

    .projects-container {

        width: 88%;

    }

    .projects-header {

        margin-bottom: 75px;

    }

    .projects-eyebrow p {

        font-size: .58rem;

        letter-spacing: 3px;

    }

    .projects-eyebrow span {

        width: 30px;

    }

    .projects-heading h2 {

        font-size: 2.15rem;

        line-height: 1.04;

        letter-spacing: -1px;

    }

    .projects-heading p {

        font-size: .88rem;

        line-height: 1.8;

    }


    /* Featured */

    .project-featured {

        margin-bottom: 85px;

    }

    .project-featured .project-image {

        height: 500px;

    }


    /* View */

    .project-view {

        right: 20px;

        bottom: 20px;

        opacity: 1;

        transform: none;

    }

    .project-view span {

        display: none;

    }

    .project-arrow {

        width: 43px;
        height: 43px;

    }


    /* Info */

    .project-info {

        padding-top: 20px;

        gap: 15px;

    }

    .project-info h3 {

        font-size: 1.15rem;

    }

    .project-category {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .project-location {

        font-size: .52rem;

        letter-spacing: 1.5px;

    }


    /* Grid */

    .projects-grid {

        display: flex;

        flex-direction: column;

        gap: 80px;

    }

    .project-card-small,
    .project-card-large,
    .project-card-wide {

        width: 100%;

        margin: 0;

    }

    .project-card-small .project-image,
    .project-card-large .project-image,
    .project-card-wide .project-image {

        height: 430px;

    }


    /* CTA */

    .projects-cta {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 110px;

        padding-top: 40px;

    }

    .projects-button {

        font-size: .62rem;

    }


    .projects-line {

        margin-top: 90px;

    }

}


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

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

    .projects-glow {

        animation: none;

    }

    .project-image img {

        transition: none;

    }

}

/* =========================================
   OUR PROCESS
========================================= */

.process-section {

    position: relative;

    padding: 190px 0 150px;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(201,168,106,.045),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(201,168,106,.035),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0c0c0c 50%,
            #080808 100%
        );

    overflow: hidden;

}


/* =========================================
   AMBIENT GLOW
========================================= */

.process-glow {

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 35%;

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

    border-radius: 50%;

    background:
        rgba(201,168,106,.035);

    filter: blur(140px);

    pointer-events: none;

    animation:
        processGlow 15s
        ease-in-out
        infinite alternate;

}

@keyframes processGlow {

    from {

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

    }

    to {

        transform:
            translate(-45%, -55%)
            scale(1.15);

    }

}


/* =========================================
   CONTAINER
========================================= */

.process-container {

    position: relative;

    z-index: 2;

    width: min(1400px, 90%);

    margin: 0 auto;

}


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

.process-header {

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 150px;

}

.process-eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

}

.process-eyebrow span {

    width: 50px;

    height: 1px;

    background: var(--gold);

}

.process-eyebrow p {

    margin: 0;

    color: var(--gold);

    font-size: .68rem;

    font-weight: 600;

    letter-spacing: 4px;

}

.process-heading {

    max-width: 900px;

}

.process-heading h2 {

    margin: 0 0 30px;

    font-size:
        clamp(3.3rem, 6vw, 6.5rem);

    line-height: .91;

    letter-spacing: -4px;

    font-weight: 500;

}

.process-heading h2 span {

    display: block;

    color: var(--gold);

}

.process-heading p {

    max-width: 650px;

    margin: 0;

    color: #8d8d8d;

    font-size: .98rem;

    line-height: 1.9;

}


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

.process-timeline {

    position: relative;

    display: grid;

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

    gap: 45px;

}


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

.process-line {

    position: absolute;

    top: 30px;

    left: 0;

    width: 100%;

    height: 1px;

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

    z-index: 0;

}

.process-line-progress {

    width: 25%;

    height: 100%;

    background:

        linear-gradient(
            90deg,
            var(--gold),
            rgba(201,168,106,.35)
        );

    box-shadow:
        0 0 12px
        rgba(201,168,106,.35);

}


/* =========================================
   PROCESS STEP
========================================= */

.process-step {

    position: relative;

    z-index: 2;

    padding-top: 0;

}


/* =========================================
   MARKER
========================================= */

.process-marker {

    position: relative;

    width: 60px;
    height: 60px;

    display: flex;

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

    margin-bottom: 55px;

    border: 1px solid
        rgba(201,168,106,.35);

    border-radius: 50%;

    background: #0b0b0b;

    transition:
        .45s ease;

}

.process-marker::before {

    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #444;

    transition: .45s ease;

}

.process-marker span {

    position: relative;

    z-index: 2;

    color: #777;

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 1px;

    transition: .45s ease;

}

.process-step.active
.process-marker {

    border-color: var(--gold);

    box-shadow:
        0 0 30px
        rgba(201,168,106,.12);

}

.process-step.active
.process-marker::before {

    background: var(--gold);

    box-shadow:
        0 0 15px
        rgba(201,168,106,.5);

}

.process-step.active
.process-marker span {

    color: var(--gold);

}


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

.process-content {

    max-width: 290px;

}

.process-category {

    display: block;

    margin-bottom: 18px;

    color: var(--gold);

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 3px;

}

.process-content h3 {

    margin: 0 0 18px;

    font-size: 1.7rem;

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -.5px;

}

.process-content p {

    margin: 0;

    color: #858585;

    font-size: .88rem;

    line-height: 1.8;

}


/* =========================================
   HOVER
========================================= */

.process-step:hover
.process-marker {

    border-color: var(--gold);

    transform: translateY(-4px);

}

.process-step:hover
.process-marker::before {

    background: var(--gold);

    box-shadow:
        0 0 15px
        rgba(201,168,106,.45);

}

.process-step:hover
.process-marker span {

    color: var(--gold);

}


/* =========================================
   CTA
========================================= */

.process-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    margin-top: 180px;

    padding-top: 70px;

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

}

.process-cta-text > span {

    display: block;

    margin-bottom: 25px;

    color: var(--gold);

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 4px;

}

.process-cta-text h3 {

    max-width: 750px;

    margin: 0;

    font-size:
        clamp(2.8rem, 5vw, 5rem);

    line-height: .94;

    letter-spacing: -3px;

    font-weight: 500;

}

.process-cta-text em {

    color: var(--gold);

    font-style: normal;

}


/* =========================================
   CTA BUTTON
========================================= */

.process-button {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 20px;

    color: #fff;

    text-decoration: none;

    font-size: .68rem;

    font-weight: 600;

    letter-spacing: 2px;

    transition: .35s ease;

}

.process-button-icon {

    width: 52px;
    height: 52px;

    display: flex;

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

    border:
        1px solid
        rgba(201,168,106,.5);

    border-radius: 50%;

    color: var(--gold);

    font-size: 1.1rem;

    transition: .45s ease;

}

.process-button:hover {

    color: var(--gold);

}

.process-button:hover
.process-button-icon {

    background: var(--gold);

    color: #111;

    transform:
        translateX(7px);

    box-shadow:
        0 10px 30px
        rgba(201,168,106,.2);

}


/* =========================================
   BOTTOM LINE
========================================= */

.process-bottom-line {

    width: min(1400px, 90%);

    height: 1px;

    margin: 150px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,168,106,.25),
            transparent
        );

}


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

@media (max-width: 950px) {

    .process-header {

        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 110px;

    }

    .process-heading h2 {

        letter-spacing: -3px;

    }

    .process-timeline {

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

        gap: 80px 50px;

    }

    .process-line {

        display: none;

    }

    .process-marker {

        margin-bottom: 35px;

    }

    .process-cta {

        align-items: flex-start;

    }

}


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

@media (max-width: 650px) {

    .process-section {

        padding: 110px 0 35px;

    }

    .process-container {

        width: 88%;

    }

    .process-header {

        margin-bottom: 85px;

    }

    .process-eyebrow p {

        font-size: .58rem;

        letter-spacing: 3px;

    }

    .process-eyebrow span {

        width: 30px;

    }

    .process-heading h2 {

        font-size: 3rem;

        line-height: .95;

        letter-spacing: -2px;

    }

    .process-heading p {

        font-size: .88rem;

        line-height: 1.8;

    }


    /* Vertical timeline */

    .process-timeline {

        display: flex;

        flex-direction: column;

        gap: 0;

        padding-left: 10px;

    }

    .process-line {

        display: block;

        top: 30px;

        bottom: 30px;

        left: 29px;

        width: 1px;

        height: auto;

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

    }

    .process-line-progress {

        width: 100%;

        height: 25%;

        background:
            linear-gradient(
                to bottom,
                var(--gold),
                rgba(201,168,106,.2)
            );

    }

    .process-step {

        display: grid;

        grid-template-columns: 60px 1fr;

        gap: 25px;

        min-height: 230px;

    }

    .process-marker {

        margin: 0;

    }

    .process-content {

        max-width: 100%;

        padding-top: 5px;

    }

    .process-content h3 {

        font-size: 1.5rem;

    }

    .process-content p {

        font-size: .86rem;

        line-height: 1.75;

    }


    /* CTA */

    .process-cta {

        flex-direction: column;

        align-items: flex-start;

        gap: 40px;

        margin-top: 100px;

        padding-top: 45px;

    }

    .process-cta-text h3 {

        font-size: 2.8rem;

        letter-spacing: -2px;

    }

    .process-button {

        font-size: .6rem;

    }

    .process-button-icon {

        width: 45px;

        height: 45px;

    }

    .process-bottom-line {

        margin-top: 90px;

    }

}


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

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

    .process-glow {

        animation: none;

    }

}

/* =========================================
   ABOUT US / ÜBER SINTERIOR
========================================= */

.about-section {

    position: relative;

    padding: 190px 0 150px;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(201,168,106,.045),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(201,168,106,.035),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0b0b0b 50%,
            #080808 100%
        );

    overflow: hidden;

}


/* =========================================
   AMBIENT GLOW
========================================= */

.about-glow {

    position: absolute;

    width: 600px;
    height: 600px;

    right: -350px;
    top: 300px;

    border-radius: 50%;

    background:
        rgba(201,168,106,.04);

    filter: blur(130px);

    pointer-events: none;

    animation:
        aboutGlow 16s
        ease-in-out
        infinite alternate;

}

@keyframes aboutGlow {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(-80px,70px,0)
            scale(1.12);

    }

}


/* =========================================
   CONTAINER
========================================= */

.about-container {

    position: relative;

    z-index: 2;

    width: min(1400px, 90%);

    margin: 0 auto;

}


/* =========================================
   INTRO
========================================= */

.about-intro {

    margin-bottom: 120px;

}

.about-eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 35px;

}

.about-eyebrow span {

    width: 50px;

    height: 1px;

    background: var(--gold);

}

.about-eyebrow p {

    margin: 0;

    color: var(--gold);

    font-size: .68rem;

    font-weight: 600;

    letter-spacing: 4px;

}

.about-intro h2 {

    max-width: 1050px;

    margin: 0;

    font-size:
        clamp(3.5rem, 7vw, 7.5rem);

    line-height: .9;

    letter-spacing: -5px;

    font-weight: 500;

}

.about-intro h2 span {

    display: block;

    color: var(--gold);

}


/* =========================================
   MAIN STORY
========================================= */

.about-story {

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 100px;

    align-items: center;

}


/* =========================================
   ABOUT US IMAGE
========================================= */

.about-image {
    position: relative;

    width: 100%;

    border-radius: 24px;

    /* BITNO:
       ostavljamo visible da se zlatni
       ram vidi izvan slike */
    overflow: visible;

    isolation: isolate;
}


/* =========================================
   GOLD OFFSET FRAME
========================================= */

.about-image::before {

    content: "";

    position: absolute;

    /*
       Ram je pomeren gore + desno
    */
    top: -22px;
    right: -22px;

    width: 100%;
    height: 100%;

    border: 1px solid
        rgba(201, 168, 106, .45);

    border-radius: 24px;

    pointer-events: none;

    z-index: 0;

    transition:
        opacity .7s ease;

}


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

.about-image img {

    position: relative;

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 24px;

    /*
       Sprečava da sam image
       strči iz svog oblika
    */
    clip-path:
        inset(
            0
            0
            0
            0
            round 24px
        );

    z-index: 1;

    transform:
        translate3d(0, 0, 0);

    transition:
        transform
        .8s
        cubic-bezier(.22, .61, .36, 1);

}


/* =========================================
   GOLD OVERLAY
========================================= */

.about-image::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 24px;

    pointer-events: none;

    z-index: 2;

    background:
        linear-gradient(
            135deg,
            rgba(201,168,106,.10),
            transparent 42%,
            rgba(201,168,106,.025)
        );

}


/* =========================================
   HOVER
========================================= */

.about-image:hover img {

    /*
       Slika ulazi u zlatni ram
       gore + desno
    */
    transform:
        translate3d(22px, -22px, 0);

}


/* =========================================
   FRAME HOVER
========================================= */

.about-image:hover::before {

    border-color:
        rgba(201,168,106,.65);

}


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

@media (max-width: 650px) {

    .about-image::before {

        top: -12px;
        right: -12px;

        border-radius: 18px;

    }

    .about-image img {

        border-radius: 18px;

    }

    .about-image::after {

        border-radius: 18px;

    }

    .about-image:hover img {

        transform:
            translate3d(12px, -12px, 0);

    }

    .about-intro h2 {

        width: 100%;
        max-width: 100%;

        font-size: clamp(2.35rem, 10vw, 3.1rem);

        line-height: 1.02;

        letter-spacing: -1.5px;

        overflow-wrap: break-word;

        word-break: normal;

    }

}


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

.about-content {

    max-width: 520px;

}

.about-small-title {

    display: block;

    margin-bottom: 25px;

    color: var(--gold);

    font-size: .63rem;

    font-weight: 600;

    letter-spacing: 3.5px;

}

.about-content h3 {

    margin: 0 0 35px;

    font-size:
        clamp(2.7rem, 4vw, 4.5rem);

    line-height: .95;

    letter-spacing: -2.5px;

    font-weight: 500;

}

.about-content p {

    margin: 0 0 22px;

    color: #929292;

    font-size: .94rem;

    line-height: 1.9;

}


/* =========================================
   SIGNATURE
========================================= */

.about-signature {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 45px;

    padding-top: 25px;

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

}

.about-signature span {

    color: #eee;

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: 3px;

}

.about-signature small {

    color: #666;

    font-size: .52rem;

    letter-spacing: 3px;

}


/* =========================================
   VALUES
========================================= */

.about-values {

    display: grid;

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

    gap: 70px;

    margin-top: 180px;

    padding-top: 70px;

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

}

.about-value {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 25px;

}

.about-value-number {

    padding-top: 5px;

    color:
        rgba(201,168,106,.45);

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: 2px;

}

.about-value-label {

    display: block;

    margin-bottom: 17px;

    color: var(--gold);

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 3px;

}

.about-value h4 {

    margin: 0 0 18px;

    font-size: 1.7rem;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -.5px;

}

.about-value p {

    max-width: 300px;

    margin: 0;

    color: #7f7f7f;

    font-size: .84rem;

    line-height: 1.8;

}


/* =========================================
   BRAND STATEMENT
========================================= */

.about-statement {

    position: relative;

    margin-top: 200px;

    padding: 150px 0;

    text-align: center;

}

.about-statement::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 1px;

    height: 80px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(201,168,106,.45)
        );

}

.about-statement > span {

    display: block;

    margin-bottom: 35px;

    color: var(--gold);

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 5px;

}

.about-statement h3 {

    max-width: 1100px;

    margin: 0 auto;

    font-size:
        clamp(3.3rem, 6.5vw, 7rem);

    line-height: .9;

    letter-spacing: -4px;

    font-weight: 500;

}

.about-statement em {

    color: var(--gold);

    font-style: normal;

}


/* =========================================
   BOTTOM LINE
========================================= */

.about-bottom-line {

    width: min(1400px, 90%);

    height: 1px;

    margin: 0 auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,168,106,.28),
            transparent
        );

}


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

@media (max-width: 950px) {

    .about-intro h2 {

        letter-spacing: -3px;

    }

    .about-story {

        grid-template-columns:
            1fr;

        gap: 70px;

    }

    .about-image {

        height: 600px;

    }

    .about-content {

        max-width: 700px;

    }

    .about-values {

        gap: 40px;

    }

}


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

@media (max-width: 650px) {

    .about-section {

        padding: 80px 0 0px;

    }

    .about-container {

        width: 88%;

    }


    /* Intro */

    .about-intro {

        margin-bottom: 75px;

    }

    .about-eyebrow {

        gap: 12px;

        margin-bottom: 28px;

    }

    .about-eyebrow span {

        width: 30px;

    }

    .about-eyebrow p {

        font-size: .58rem;

        letter-spacing: 3px;

    }

    .about-intro h2 {

        font-size: 3.1rem;

        line-height: .95;

        letter-spacing: -2px;

    }


    /* Story */

    .about-story {

        gap: 55px;

    }

    .about-image {

        height: 500px;

    }

    .about-image-frame {

        top: 12px;

        left: 12px;

    }

    .about-content h3 {

        font-size: 2.7rem;

        letter-spacing: -1.5px;

    }

    .about-content p {

        font-size: .88rem;

        line-height: 1.8;

    }

    .about-signature {

        margin-top: 35px;

    }


    /* Values */

    .about-values {

        grid-template-columns: 1fr;

        gap: 55px;

        margin-top: 110px;

        padding-top: 50px;

    }

    .about-value {

        gap: 20px;

    }

    .about-value h4 {

        font-size: 1.5rem;

    }

    .about-value p {

        max-width: 100%;

        font-size: .83rem;

    }


    /* Statement */

    .about-statement {

        margin-top: 120px;

        padding: 100px 0;

    }

    .about-statement h3 {

        font-size: 2.15rem;

        line-height: 1.05;

        letter-spacing: -1px;

    }

    .about-statement > span {

        font-size: .55rem;

        letter-spacing: 3px;

    }


    .about-bottom-line {

        width: 88%;

    }

}


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

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

    .about-glow {

        animation: none;

    }

    .about-image img {

        transition: none;

    }

}

/* =========================================
   CONTACT / ANGEBOT ANFRAGEN
========================================= */

.contact-section {

    position: relative;

    padding: 190px 0 150px;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(201,168,106,.065),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(201,168,106,.035),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0b0b0b 50%,
            #080808 100%
        );

    overflow: hidden;

}


/* =========================================
   AMBIENT GLOW
========================================= */

.contact-glow {

    position: absolute;

    width: 700px;
    height: 700px;

    right: -350px;
    top: 180px;

    border-radius: 50%;

    background:
        rgba(201,168,106,.045);

    filter: blur(140px);

    pointer-events: none;

    animation:
        contactGlow 16s
        ease-in-out
        infinite alternate;

}

@keyframes contactGlow {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(-90px,70px,0)
            scale(1.15);

    }

}


/* =========================================
   CONTAINER
========================================= */

.contact-container {

    position: relative;

    z-index: 2;

    width: min(1400px, 90%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 130px;

    align-items: start;

}


/* =========================================
   LEFT / INTRO
========================================= */

.contact-intro {

    padding-top: 20px;

}

.contact-eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 35px;

    color: var(--gold);

    font-size: .68rem;

    font-weight: 600;

    letter-spacing: 4px;

}

.contact-eyebrow::before {

    content: "";

    width: 50px;

    height: 1px;

    background: var(--gold);

}

.contact-intro h2 {

    max-width: 700px;

    margin: 0;

    font-size:
        clamp(3.5rem, 6.5vw, 7rem);

    line-height: .9;

    letter-spacing: -5px;

    font-weight: 500;

}

.contact-intro h2 span {

    display: block;

    color: var(--gold);

}

.contact-intro > p {

    max-width: 500px;

    margin: 45px 0 0;

    color: #999;

    font-size: 1rem;

    line-height: 1.8;

}


/* =========================================
   CONTACT DETAILS
========================================= */

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 70px;

    padding-top: 30px;

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

    max-width: 430px;

}

.contact-details a {

    color: #eee;

    text-decoration: none;

    font-size: .9rem;

    transition: .3s ease;

}

.contact-details a:hover {

    color: var(--gold);

}

.contact-details span {

    color: #666;

    font-size: .75rem;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* =========================================
   FORM WRAPPER
========================================= */

.contact-form-wrapper {

    position: relative;

    padding: 50px;

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

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

    backdrop-filter: blur(12px);

}

.form-heading {

    margin-bottom: 45px;

    padding-bottom: 25px;

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

}

.form-heading span {

    display: block;

    margin-bottom: 12px;

    color: var(--gold);

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: 4px;

}

.form-heading p {

    margin: 0;

    color: #777;

    font-size: .88rem;

}


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

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 30px;

}

.form-field {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.form-field label {

    color: #888;

    font-size: .6rem;

    font-weight: 600;

    letter-spacing: 2.5px;

}

.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 15px 0;

    border: 0;

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

    outline: none;

    background: transparent;

    color: #eee;

    font-family: inherit;

    font-size: .92rem;

    border-radius: 0;

    transition:
        border-color .3s ease;

}

.form-field input::placeholder,
.form-field textarea::placeholder {

    color: #555;

}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-bottom-color:
        var(--gold);

}

.form-field select {

    cursor: pointer;

    color: #777;

    appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--gold) 50%
        ),
        linear-gradient(
            135deg,
            var(--gold) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 8px) 50%,
        calc(100% - 3px) 50%;

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

    background-repeat: no-repeat;

}

.form-field select:valid {

    color: #eee;

}

.form-field select option {

    background: #111;

    color: #eee;

}

.form-field textarea {

    min-height: 120px;

    resize: vertical;

}


/* =========================================
   SUBMIT BUTTON
========================================= */

.contact-submit {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-top: 15px;

    padding: 18px 0;

    border: 0;

    border-bottom:
        1px solid
        rgba(201,168,106,.45);

    background: transparent;

    color: #fff;

    font-family: inherit;

    font-size: .68rem;

    font-weight: 600;

    letter-spacing: 2.5px;

    cursor: pointer;

    transition:
        color .35s ease,
        border-color .35s ease;

}

.submit-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    border:
        1px solid
        rgba(201,168,106,.5);

    border-radius: 50%;

    color: var(--gold);

    font-size: 1.1rem;

    transition:
        .4s ease;

}

.contact-submit:hover {

    color: var(--gold);

    border-bottom-color:
        var(--gold);

}

.contact-submit:hover
.submit-arrow {

    background: var(--gold);

    color: #111;

    transform:
        translateX(7px);

}


/* =========================================
   FORM VALIDATION
========================================= */

.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {

    border-bottom-color:
        rgba(180,70,70,.6);

}

.form-field input:valid,
.form-field textarea:valid {

    border-bottom-color:
        rgba(201,168,106,.18);

}

/* =========================================
   CONTACT FORM — AUTOFILL FIX
========================================= */

.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form input:-webkit-autofill:active,
.contact-form textarea:-webkit-autofill,
.contact-form textarea:-webkit-autofill:hover,
.contact-form textarea:-webkit-autofill:focus,
.contact-form textarea:-webkit-autofill:active {

    -webkit-text-fill-color: #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px #11110f inset !important;

    box-shadow:
        0 0 0 1000px #11110f inset !important;

    background-color: #11110f !important;

    caret-color: #ffffff !important;

    transition:
        background-color 9999s ease-in-out 0s;

}

.contact-form input,
.contact-form textarea,
.contact-form select {

    background: transparent !important;

    color: #ffffff;

}

.contact-form input::placeholder,
.contact-form textarea::placeholder {

    color: rgba(255, 255, 255, 0.35);

}


/* =========================================
   BOTTOM LINE
========================================= */

.contact-bottom-line {

    width: min(1400px, 90%);

    height: 1px;

    margin: 150px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,168,106,.28),
            transparent
        );

}


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

@media (max-width: 950px) {

    .contact-container {

        grid-template-columns:
            1fr;

        gap: 80px;

    }

    .contact-intro h2 {

        letter-spacing: -3px;

    }

    .contact-intro > p {

        max-width: 650px;

    }

    .contact-details {

        margin-top: 45px;

    }

}


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

@media (max-width: 650px) {

    .contact-section {

        padding: 110px 0 90px;

    }

    .contact-container {

        width: 88%;

        gap: 65px;

    }


    /* Intro */

    .contact-eyebrow {

        margin-bottom: 28px;

        font-size: .58rem;

        letter-spacing: 3px;

    }

    .contact-eyebrow::before {

        width: 30px;

    }

    .contact-intro h2 {

        font-size: 3.1rem;

        line-height: .95;

        letter-spacing: -2px;

    }

    .contact-intro > p {

        margin-top: 30px;

        font-size: .88rem;

        line-height: 1.8;

    }


    /* Details */

    .contact-details {

        margin-top: 40px;

        padding-top: 25px;

    }

    .contact-details a {

        font-size: .82rem;

    }


    /* Form */

    .contact-form-wrapper {

        padding: 30px 22px;

    }

    .form-heading {

        margin-bottom: 35px;

        padding-bottom: 20px;

    }

    .form-heading span {

        font-size: .58rem;

        letter-spacing: 3px;

    }

    .form-heading p {

        font-size: .8rem;

    }

    .contact-form {

        gap: 25px;

    }

    .form-field {

        gap: 9px;

    }

    .form-field label {

        font-size: .55rem;

    }

    .form-field input,
    .form-field select,
    .form-field textarea {

        font-size: .86rem;

        padding: 13px 0;

    }

    .form-field textarea {

        min-height: 110px;

    }

    .contact-submit {

        font-size: .6rem;

        letter-spacing: 2px;

    }

    .submit-arrow {

        width: 42px;

        height: 42px;

    }


    .contact-bottom-line {

        width: 88%;

        margin-top: 90px;

    }

}

/* =========================================
   CONTACT FORM - HONEYPOT
========================================= */

.contact-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


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

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

    .contact-glow {

        animation: none;

    }

}

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

.site-footer {

    position: relative;

    padding: 100px 0 35px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(201,168,106,.035),
            transparent 30%
        ),
        #060606;

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

    overflow: hidden;

}


/* =========================================
   CONTAINER
========================================= */

.footer-container {

    width: min(1400px, 90%);

    margin: 0 auto;

}


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

.footer-main {

    display: grid;

    grid-template-columns:
        1.6fr
        .8fr
        1fr
        .7fr;

    gap: 80px;

    padding-bottom: 85px;

}


/* =========================================
   BRAND
========================================= */

.footer-brand {

    max-width: 320px;

}

.footer-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    margin-bottom: 28px;

}

.footer-logo img {

    display: block;

    width: 190px;

    height: auto;

    max-height: 70px;

    object-fit: contain;

    object-position: left center;

}

.footer-brand p {

    max-width: 280px;

    margin: 0 0 30px;

    color: #777;

    font-size: .85rem;

    line-height: 1.8;

}

.footer-location {

    display: inline-block;

    color: var(--gold);

    font-size: .58rem;

    font-weight: 600;

    letter-spacing: 3px;

}


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

.footer-column {

    display: flex;

    flex-direction: column;

}

.footer-title {

    display: block;

    margin-bottom: 28px;

    color: #555;

    font-size: .58rem;

    font-weight: 600;

    letter-spacing: 3px;

}


/* =========================================
   LINKS
========================================= */

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.footer-links a {

    position: relative;

    display: inline-block;

    width: fit-content;

    color: #aaa;

    text-decoration: none;

    font-size: .78rem;

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

}

.footer-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -4px;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition:
        width .3s ease;

}

.footer-links a:hover {

    color: var(--gold);

    transform: translateX(3px);

}

.footer-links a:hover::after {

    width: 100%;

}


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

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.footer-contact a {

    color: #aaa;

    text-decoration: none;

    font-size: .78rem;

    line-height: 1.5;

    transition:
        color .3s ease;

}

.footer-contact a:hover {

    color: var(--gold);

}

.footer-contact span {

    margin-top: 5px;

    color: #555;

    font-size: .68rem;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* =========================================
   DIVIDER
========================================= */

.footer-divider {

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,168,106,.2),
            transparent
        );

}


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

.footer-bottom {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 40px;

    padding-top: 30px;

}


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

.footer-copyright {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.footer-copyright span {

    color: #555;

    font-size: .6rem;

    letter-spacing: .5px;

}


/* =========================================
   LEGAL
========================================= */

.footer-legal {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

}

.footer-legal a {

    color: #555;

    text-decoration: none;

    font-size: .6rem;

    transition:
        color .3s ease;

}

.footer-legal a:hover {

    color: var(--gold);

}


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

.back-to-top {

    justify-self: end;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(201,168,106,.3);

    border-radius: 50%;

    background: transparent;

    color: var(--gold);

    font-family: inherit;

    font-size: 1rem;

    cursor: pointer;

    /* Hidden initially */

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease;

}

/* =========================================
   WEB DESIGN CREDIT
========================================= */

.footer-credit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 28px;

    padding-top: 22px;

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

    font-size: .62rem;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.footer-credit span {

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

}

.footer-credit a {

    color: var(--gold);

    text-decoration: none;

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

}

.footer-credit a:hover {

    color: #fff;

    opacity: .9;

}


/* =========================================
   VISIBLE
========================================= */

.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

}


/* =========================================
   HOVER
========================================= */

.back-to-top.show:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: #080808;

    transform: translateY(-4px);

}


/* =========================================
   SUBTLE TOP GLOW
========================================= */

.site-footer::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 50%;

    width: 180px;

    height: 1px;

    transform:
        translateX(-50%);

    background:
        var(--gold);

    box-shadow:
        0 0 30px
        rgba(201,168,106,.25);

}


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

@media (max-width: 1000px) {

    .footer-main {

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

        gap: 60px;

    }

    .footer-brand {

        grid-column: 1 / -1;

        max-width: 500px;

    }

    .footer-bottom {

        grid-template-columns:
            1fr auto;

    }

    .footer-legal {

        justify-content: flex-end;

    }

}


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

@media (max-width: 650px) {

    .site-footer {

        padding: 80px 0 30px;

    }

    .footer-container {

        width: 88%;

    }

    .footer-main {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 55px 30px;

        padding-bottom: 60px;

    }


    /* Brand */

    .footer-brand {

        grid-column: 1 / -1;

        max-width: 100%;

    }

    .footer-logo {

        margin-bottom: 22px;

    }

    .footer-logo img {

        width: 165px;

        max-height: 60px;

    }

    .footer-brand p {

        max-width: 300px;

        font-size: .8rem;

    }


    /* Columns */

    .footer-column {

        min-width: 0;

    }

    .footer-title {

        margin-bottom: 20px;

        font-size: .55rem;

        letter-spacing: 2.5px;

    }

    .footer-links {

        gap: 11px;

    }

    .footer-links a,
    .footer-contact a {

        font-size: .72rem;

    }

    .footer-contact {

        gap: 11px;

    }


    /* Bottom */

    .footer-bottom {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        padding-top: 25px;

    }

    .footer-copyright {

        gap: 5px;

    }

    .footer-legal {

        flex-wrap: wrap;

        justify-content: flex-start;

        gap: 12px 20px;

    }

    .footer-legal a {

        font-size: .57rem;

    }

    .back-to-top {

        position: absolute;

        right: 0;

        bottom: 0;

        width: 43px;

        height: 43px;

    }

}


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

@media (max-width: 400px) {

    .footer-main {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .footer-brand {

        grid-column: auto;

    }

    .footer-column {

        width: 100%;

    }

    .back-to-top {

        position: static;

        align-self: flex-end;

    }

}


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

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

    .footer-links a,
    .footer-links a::after,
    .footer-contact a,
    .footer-legal a,
    .back-to-top {

        transition: none;

    }

}

/* =========================================
   ABOUT US IMAGE
========================================= */

.about-image {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}


/* Slika */

.about-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.65,.2,1);
}


/* Blagi zoom */

.about-image:hover img {
    transform: scale(1.02);
}


/*======================================
        RESPONSIVE
======================================*/

/* Laptop */

@media (max-width:1200px){

    .hero{

        background-position:60% center;

    }

    .hero-content{

        max-width:560px;

    }

}


/* Tablet */

@media (max-width:992px){

    .header{

        top:18px;

        padding:0 18px;

    }

    .navbar{

        padding:16px 22px;

    }

    .nav-btn{

        display:none;

    }

    .hero{

        justify-content:center;

        text-align:center;

        background-position:68% center;

    }

    .hero-container{

        padding:
        150px
        30px
        80px;

    }

    .hero-content{

        max-width:700px;

        margin:auto;

    }

    .hero-subtitle{

        justify-content:center;

    }

    .hero p{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 60px;
    }
}


/* Mobile Menu */

@media (max-width:860px){

    .hamburger{

        display:block;

        z-index:1002;

    }

    .nav-menu{

        position:fixed;

        top:95px;

        left:18px;

        right:18px;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:26px;

        padding:35px;

        border-radius:22px;

        background:rgba(10,10,10,.96);

        backdrop-filter:blur(18px);

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

        opacity:0;

        visibility:hidden;

        transform:translateY(-20px);

        transition:.35s;

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

        overflow-y: auto;

    }

    .nav-menu.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

}


/* Mobile */

@media (max-width:576px){

    .header{

        top:12px;

        padding:0 12px;

    }

    .navbar{

        padding:15px 18px;

        border-radius:18px;

    }

    .logo img{

        width:130px;

    }

    .hero{

        background-position:72% center;

        min-height:100svh;

    }

    .hero-container{

        padding:
        130px
        22px
        60px;

    }

    .hero h1{

        font-size:clamp(2.8rem,12vw,4rem);

        line-height:1;

        letter-spacing:-2px;

    }

    .hero p{

        font-size:.98rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        justify-content:center;

    }

    .hero-scroll{

        display:none;

    }

    .collection {
        padding: 90px 0;
    }

    .section-heading h2 {
        font-size: 2.6rem;
    }

    .card-content {
        padding: 24px;
    }

    .card-content h3 {
        font-size: 1.6rem;
    }

}


/* Small Mobile */

@media (max-width:380px){

    .hero-container{

        padding:
        120px
        18px
        50px;

    }

    .hero-subtitle{

        font-size:.72rem;

        letter-spacing:2px;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .hero p{

        font-size:.92rem;

    }

}


/* =========================================
   LANDSCAPE PHONES
========================================= */

@media (max-height: 700px) and (orientation: landscape) {

    .hero {

        min-height: 100svh;

    }

    .hero-container {

        padding-top: 110px;
        padding-bottom: 50px;

    }

    .hero-scroll {

        display: none;

    }

}

@media (max-width: 860px) and (orientation: landscape) {

    .nav-menu {

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

        overflow-y: auto;

    }

    .hero {

        min-height: 100svh;

    }

}

@supports (padding: env(safe-area-inset-top)) {

    .header {

        top: calc(12px + env(safe-area-inset-top));

    }

    .site-footer {

    padding-bottom:
        max(
            30px,
            env(safe-area-inset-bottom)
        );

}

}

/* =========================================
   COLLECTION RESPONSIVE
========================================= */


/* TABLET */

@media (max-width: 992px) {

    .collection-item,
    .collection-item.reverse {

        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 130px;

    }


    /* Reset alternating desktop layout */

    .collection-item.reverse .collection-image,
    .collection-item.reverse .collection-content {

        order: initial;

    }


    /* Image first */

    .collection-item .collection-image {

        order: 1;

        width: 100%;

    }


    /* Content second */

    .collection-item .collection-content {

        order: 2;

        width: 100%;

        max-width: 650px;

        padding-left: 0;

    }

}


/* MOBILE */

@media (max-width: 650px) {

    .collection-item,
    .collection-item.reverse {

        grid-template-columns: 1fr;

        width: 88%;

        margin-left: auto;

        margin-right: auto;

        gap: 30px;

        margin-bottom: 100px;

    }


    .collection-item .collection-image {

        width: 100%;

        aspect-ratio: 4 / 3;

        height: auto;

        order: 1;

    }


    .collection-item .collection-content {

        width: 100%;

        max-width: none;

        padding-left: 0;

        order: 2;

    }


    .collection-item::after {

        bottom: -50px;

        width: 120px;

    }

}

/* =========================================
   MATERIAL — MOBILE IMAGE FIX
========================================= */

@media (max-width: 650px) {

    .material-experience {

        padding: 90px 0 30px;

        overflow: hidden;

    }


    /* Main visual */

    .material-visual {

        width: 94%;

        margin: 0 auto;

        position: relative;

        overflow: visible;

    }


    /* Main image frame */

    .material-image {

        position: relative;

        width: 100%;

        height: auto;

        aspect-ratio: 4 / 3;

        overflow: hidden;

        border-radius: 18px;

        background: #111;

    }


    /* Image */

    .material-image img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

    }


    /* Frame */

    .material-visual::after {

        inset: 10px;

        border-radius: 14px;

    }


    /* Caption */

    .material-caption {

        right: 18px;

        bottom: 18px;

        width: 220px;

        padding: 18px 20px;

    }


    .material-caption span {

        font-size: .55rem;

        letter-spacing: 2px;

    }


    .material-caption p {

        font-size: .78rem;

        line-height: 1.6;

    }


    /* Index */

    .material-index {

        left: 18px;

        bottom: 20px;

        gap: 10px;

        font-size: .6rem;

    }


    /* Split section */

    .material-split {

        width: 88%;

        display: flex;

        flex-direction: column;

        gap: 45px;

        align-items: stretch;

    }

}

/* =========================================
   PERFORMANCE — MOBILE
========================================= */

@media (max-width: 650px) {

    .mouse-light {
        display: none;
    }

}