:root{
    --bg:#100f0e;
    --surface:#171512;
    --surface2:#201c18;
    --cream:#eee6db;
    --muted:#9a8d7e;
    --brass:#c5a059;
    --orange:#e65a15;
    --line:rgba(197,160,89,.20);
    --gutter:clamp(20px,5vw,96px);
    --syne:"Syne",sans-serif;
    --body:"Hanken Grotesk",sans-serif;
    --ease:cubic-bezier(.22,.75,.25,1);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--cream);
    font-family:var(--body);
}

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

button,
input,
select{
    font:inherit;
}

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


/* HEADER */

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;

    height:84px;
    padding:0 var(--gutter);

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

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

    background:rgba(16,15,14,.48);
    backdrop-filter:blur(16px);

    transition:.35s ease;
}

.site-header.scrolled{
    background:rgba(16,15,14,.92);
}

.brand{
    display:flex;
    align-items:center;
    gap:13px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
}

.brand img{
    width:44px;
    height:44px;
    object-fit:cover;
}

.desktop-nav{
    margin-left:auto;
    display:flex;
    gap:26px;
}

.desktop-nav a{
    color:#c8bdb2;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.12em;
    transition:.25s ease;
}

.desktop-nav a:hover{
    color:var(--cream);
}

.header-cta{
    min-height:43px;
    padding:0 17px;

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

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

    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.10em;
}

.menu-btn{
    display:none;
}


/* HERO */

.hero{
    position:relative;
    min-height:100svh;
    padding:
        150px var(--gutter)
        55px;

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

    overflow:hidden;
    isolation:isolate;
}

.hero-video,
.hero-overlay{
    position:absolute;
    inset:0;
}

.hero-video{
    z-index:-3;
}

.hero-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.72) contrast(1.08);
}

.hero-overlay{
    z-index:-2;

    background:
        linear-gradient(
            90deg,
            rgba(11,10,9,.92) 0%,
            rgba(11,10,9,.72) 42%,
            rgba(11,10,9,.28) 75%,
            rgba(11,10,9,.45) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10,9,8,.92) 0%,
            transparent 45%
        );
}

.hero-ghost{
    position:absolute;
    z-index:-1;
    top:49%;
    left:50%;

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

    font-family:var(--syne);
    font-size:clamp(150px,25vw,470px);
    font-weight:700;
    letter-spacing:-.08em;

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

    white-space:nowrap;
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr);
    gap:clamp(50px,8vw,140px);
    align-items:end;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:22px;

    color:var(--brass);

    font-size:8px;
    font-weight:700;
    letter-spacing:.19em;
}

.eyebrow span{
    width:38px;
    height:1px;
    background:var(--brass);
}

.hero h1{
    margin:0;

    max-width:1020px;

    font-family:var(--syne);
    font-size:clamp(66px,8vw,150px);
    line-height:.78;
    letter-spacing:-.065em;

    text-transform:uppercase;
}

.hero h1 span{
    color:var(--orange);
}

.hero-main p{
    max-width:580px;

    margin:30px 0 0;

    color:#c4b9ad;

    font-size:14px;
    line-height:1.75;
}

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

.btn{
    min-height:52px;
    padding:0 21px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    border:1px solid transparent;

    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;

    cursor:pointer;

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

.btn-orange{
    background:var(--orange);
    color:white;
}

.btn-orange:hover{
    background:#ff6a1d;
}

.btn-outline{
    border-color:var(--line);
}

.text-link{
    color:#d4c9bf;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.13em;
}

.hero-side{
    border-top:1px solid var(--line);
}

.micro-label{
    display:block;
    padding:16px 0;

    color:var(--brass);
    font-size:7px;
    letter-spacing:.18em;
}

.hero-service{
    min-height:62px;

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

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

.hero-service span{
    color:#70675f;
    font-size:8px;
}

.hero-service strong{
    font-family:var(--syne);
    font-size:15px;
    font-weight:500;
}

.hero-bottom{
    margin-top:60px;

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

    color:#756c64;
    font-size:7px;
    letter-spacing:.15em;
}

.hero-line{
    height:1px;
    background:rgba(255,255,255,.10);
}


/* SHARED */

section:not(.hero){
    padding:
        clamp(90px,9vw,170px)
        var(--gutter);
}

.section-index{
    display:block;

    margin-bottom:20px;

    color:var(--brass);
    font-size:8px;
    font-weight:700;
    letter-spacing:.17em;
}

.section-heading{
    display:grid;
    grid-template-columns:1fr .55fr;
    gap:80px;
    align-items:end;

    margin-bottom:75px;
}

.section-heading h2,
.events h2,
.equipment h2,
.training h2,
.work h2,
.quote h2{
    margin:0;

    font-family:var(--syne);
    font-size:clamp(58px,6.5vw,115px);
    line-height:.84;
    letter-spacing:-.055em;

    text-transform:uppercase;
}

h2 em{
    color:var(--orange);
    font-style:normal;
}

.section-heading p,
.equipment-head p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}


/* SERVICES */

.services{
    background:var(--surface);
}

.service-stage{
    display:grid;
    grid-template-columns:1fr .82fr;
    gap:clamp(40px,7vw,120px);
}

.service-list{
    border-top:1px solid var(--line);
}

.service-row{
    width:100%;
    min-height:104px;
    padding:0;

    display:grid;
    grid-template-columns:60px 1fr 40px;
    align-items:center;

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

    color:var(--cream);
    background:transparent;

    text-align:left;
    cursor:pointer;

    transition:
        padding .4s var(--ease),
        background .3s ease;
}

.service-row:hover,
.service-row.is-active{
    padding-left:16px;
    background:rgba(197,160,89,.035);
}

.service-num{
    color:#6e645b;
    font-size:8px;
}

.service-row strong{
    font-family:var(--syne);
    font-size:clamp(21px,2vw,34px);
    font-weight:500;
}

.service-row.is-active strong{
    color:var(--brass);
}

.service-arrow{
    font-size:18px;
}

.service-preview{
    position:sticky;
    top:120px;
    align-self:start;
}

.service-image-wrap{
    position:relative;
    height:520px;

    overflow:hidden;

    border:1px solid var(--line);
    background:#0d0c0b;
}

.service-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:
        opacity .35s ease,
        transform 1s var(--ease);
}

.service-image-wrap:hover img{
    transform:scale(1.04);
}

.media-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(to top,rgba(10,9,8,.68),transparent 50%);
}

.image-tag{
    position:absolute;
    left:18px;
    bottom:17px;

    color:var(--brass);

    font-size:7px;
    font-weight:700;
    letter-spacing:.15em;
}

.service-copy{
    padding-top:24px;
}

.service-copy h3{
    margin:0;

    font-family:var(--syne);
    font-size:31px;
    font-weight:500;
}

.service-copy p{
    max-width:520px;

    color:var(--muted);
    line-height:1.65;
}

.service-copy a{
    color:var(--brass);

    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
}


/* EVENTS */

.events{
    padding:0 !important;

    display:grid;
    grid-template-columns:1.16fr .84fr;

    min-height:790px;

    background:#0b0a09;
}

.events-video{
    position:relative;
    overflow:hidden;
}

.events-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.events-video-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(11,10,9,.58),
            transparent 55%
        );
}

.events-video>span{
    position:absolute;
    left:var(--gutter);
    bottom:35px;

    color:var(--brass);

    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
}

.events-copy{
    padding:
        130px var(--gutter);

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

.events-copy p{
    max-width:520px;

    color:var(--muted);
    line-height:1.75;
}

.event-types{
    margin:30px 0 35px;

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.event-types span{
    padding:8px 10px;

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

    color:#b8ab9f;

    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.10em;
}


/* EQUIPMENT */

.equipment{
    background:var(--surface);
    overflow:hidden;
}

.equipment-head{
    display:grid;
    grid-template-columns:1fr .45fr;
    gap:70px;
    align-items:end;

    margin-bottom:50px;
}

.equipment-tabs{
    display:flex;
    gap:0;

    margin-bottom:50px;

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

.equipment-tab{
    padding:15px 30px;

    border:0;
    border-bottom:2px solid transparent;

    background:transparent;
    color:#7d7167;

    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.13em;

    cursor:pointer;
}

.equipment-tab.is-active{
    color:var(--cream);
    border-bottom-color:var(--orange);
}

.equipment-stage{
    min-height:570px;

    display:grid;
    grid-template-columns:55px 1.15fr .7fr 55px;
    gap:28px;
    align-items:center;

    position:relative;
}

.equipment-arrow{
    width:48px;
    height:48px;

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

    color:var(--cream);
    background:transparent;

    cursor:pointer;

    transition:.3s ease;
}

.equipment-arrow:hover{
    background:var(--brass);
    color:#111;
}

.equipment-object{
    position:relative;

    height:540px;

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

    perspective:1200px;
}

.equipment-object img{
    position:relative;
    z-index:2;

    width:88%;
    height:88%;

    object-fit:contain;

    filter:
        drop-shadow(0 45px 55px rgba(0,0,0,.55));

    transition:
        transform .65s var(--ease),
        opacity .3s ease;
}

.equipment-aura{
    position:absolute;

    width:70%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(197,160,89,.18),
            transparent 66%
        );

    filter:blur(8px);
}

.equipment-info span{
    display:block;

    color:var(--brass);

    font-size:8px;
    letter-spacing:.15em;
}

.equipment-info h3{
    margin:14px 0;

    font-family:var(--syne);
    font-size:clamp(35px,4vw,67px);
    font-weight:500;
    line-height:.95;
}

.equipment-info p{
    max-width:430px;

    color:var(--muted);
    line-height:1.7;
}

.equipment-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin:25px 0;
}

.equipment-meta span{
    padding:8px 10px;

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

    color:#b8aca0;
}

.equipment-info>a{
    color:var(--orange);

    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.11em;
}

.equipment-strip{
    margin-top:40px;

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

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

.equipment-strip button{
    min-height:72px;

    padding:0 14px;

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

    background:transparent;
    color:#70675f;

    font-size:8px;
    text-align:left;

    cursor:pointer;
}

.equipment-strip button.is-active{
    color:var(--brass);
    background:rgba(197,160,89,.045);
}


/* TRAINING */

.training{
    padding:0 !important;

    background:#0b0a09;
}

.training-media{
    position:relative;
    height:680px;
    overflow:hidden;
}

.training-media video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.training-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(10,9,8,.82),
            transparent 62%
        );
}

.training-title{
    position:absolute;

    left:var(--gutter);
    bottom:60px;
}

.training-title>span{
    color:var(--brass);

    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
}

.training-title h2{
    margin-top:15px;
}

.training-grid{
    padding:
        80px var(--gutter)
        120px;

    display:grid;
    grid-template-columns:.48fr 1fr;
    gap:90px;
}

.training-intro p{
    color:var(--muted);
    line-height:1.7;
}

.training-intro .btn{
    margin-top:20px;
}

.course-list{
    border-top:1px solid var(--line);
}

.course-list a{
    min-height:88px;

    display:grid;
    grid-template-columns:55px 1fr 30px;
    align-items:center;

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

    transition:
        padding .35s var(--ease),
        background .3s ease;
}

.course-list a:hover{
    padding-left:14px;
    background:rgba(197,160,89,.035);
}

.course-list span{
    color:#70675f;
    font-size:8px;
}

.course-list strong{
    font-family:var(--syne);
    font-size:25px;
    font-weight:500;
}

.course-list i{
    font-style:normal;
}


/* WORK */

.work{
    background:var(--surface);
}

.work-heading{
    margin-bottom:60px;
}

.work-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:320px 320px;
    gap:16px;
}

.work-item{
    position:relative;
    overflow:hidden;

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

.work-item img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform 1s var(--ease);
}

.work-item:hover img{
    transform:scale(1.05);
}

.work-item::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(to top,rgba(9,8,7,.68),transparent 55%);
}

.work-item span{
    position:absolute;
    z-index:2;

    left:22px;
    bottom:20px;

    font-family:var(--syne);
    font-size:22px;
}

.work-large{
    grid-row:1 / 3;
}

.work-wide{
    grid-column:2;
}


/* QUOTE */

.quote{
    background:#0c0b0a;
}

.quote-top{
    max-width:1050px;
    margin-bottom:70px;
}

.quote-layout{
    display:grid;
    grid-template-columns:1.15fr .65fr;
    gap:70px;
}

.quote-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.field label{
    color:var(--brass);

    font-size:7px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.field input,
.field select{
    width:100%;

    padding:15px 0;

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

    background:transparent;
    color:var(--cream);

    outline:none;
}

.field input:focus,
.field select:focus{
    border-bottom-color:var(--brass);
}

.quote-form .btn{
    margin-top:10px;
}

.contact-panel{
    padding-left:45px;

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

.contact-panel>div>span{
    color:var(--brass);

    font-size:8px;
    font-weight:700;
    letter-spacing:.15em;
}

.contact-panel p{
    max-width:400px;

    color:var(--muted);
    line-height:1.7;
}

.contact-links{
    margin-top:40px;

    display:flex;
    flex-direction:column;
    gap:13px;
}

.contact-links a{
    font-family:var(--syne);
    font-size:18px;
}


/* FOOTER */

footer{
    min-height:115px;

    padding:
        30px var(--gutter);

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

    border-top:1px solid var(--line);

    color:#746b63;

    font-size:8px;
    letter-spacing:.12em;

    background:#0a0908;
}

footer div:nth-child(2){
    text-align:center;
}

footer div:last-child{
    text-align:right;
}


/* REVEAL */

.reveal{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .85s ease,
        transform 1s var(--ease);
}

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


/* TABLET */

@media(max-width:1000px){

    .desktop-nav,
    .header-cta{
        display:none;
    }

    .menu-btn{
        display:block;
        margin-left:auto;

        width:44px;
        height:44px;

        border:0;
        background:transparent;
    }

    .menu-btn span{
        display:block;

        width:22px;
        height:1px;

        margin:7px auto;

        background:white;
    }

    .site-header.mobile-open .desktop-nav{
        position:absolute;

        top:84px;
        left:0;
        right:0;

        padding:25px var(--gutter);

        display:flex;
        flex-direction:column;

        background:#11100f;
        border-bottom:1px solid var(--line);
    }

    .site-header.mobile-open .desktop-nav a{
        padding:13px 0;
    }

    .hero-grid,
    .section-heading,
    .service-stage,
    .equipment-head,
    .training-grid,
    .quote-layout{
        grid-template-columns:1fr;
    }

    .hero-side{
        display:none;
    }

    .service-preview{
        position:relative;
        top:auto;
    }

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

    .events-video{
        min-height:560px;
    }

    .equipment-stage{
        grid-template-columns:45px 1fr 45px;
    }

    .equipment-info{
        grid-column:1 / -1;
        text-align:center;
    }

    .equipment-info p{
        margin-left:auto;
        margin-right:auto;
    }

    .equipment-meta{
        justify-content:center;
    }

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

    .contact-panel{
        padding-left:0;
        padding-top:40px;

        border-left:0;
        border-top:1px solid var(--line);
    }

}


/* MOBILE */

@media(max-width:650px){

    :root{
        --gutter:18px;
    }

    .site-header{
        height:72px;
    }

    .hero{
        min-height:820px;

        padding-top:120px;
    }

    .hero h1{
        font-size:clamp(56px,17vw,78px);
    }

    .hero-main p{
        font-size:12px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-actions .btn{
        width:100%;
    }

    .hero-bottom{
        display:none;
    }

    section:not(.hero){
        padding-top:90px;
        padding-bottom:90px;
    }

    .service-image-wrap{
        height:390px;
    }

    .events-copy{
        padding:80px 18px;
    }

    .events-video{
        min-height:480px;
    }

    .equipment-stage{
        min-height:auto;

        grid-template-columns:38px 1fr 38px;
        gap:8px;
    }

    .equipment-object{
        height:370px;
    }

    .equipment-strip{
        grid-template-columns:repeat(5,130px);
        overflow-x:auto;
    }

    .training-media{
        height:560px;
    }

    .training-grid{
        padding:
            65px 18px 90px;
    }

    .work-grid{
        display:flex;
        flex-direction:column;
    }

    .work-item{
        min-height:320px;
    }

    footer{
        grid-template-columns:1fr;
        gap:12px;

        text-align:left;
    }

    footer div:nth-child(2),
    footer div:last-child{
        text-align:left;
    }

}

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation:none !important;
        transition:none !important;
    }

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

}


/* =========================================
   LOCKED UI POLISH — CARDS + CIRCULAR LOGO
========================================= */


/* CIRCULAR LOGO EVERYWHERE */

.brand img,
.site-header img[alt*="Iconic"],
footer img[alt*="Iconic"],
img[alt="Iconic Coffee Group"],
img[alt="Iconic Logo"]{
    border-radius:50% !important;
    overflow:hidden;
    object-fit:cover;
    aspect-ratio:1;
    border:1px solid rgba(197,160,89,.30);
    box-shadow:
        0 0 0 5px rgba(197,160,89,.025),
        0 12px 35px rgba(0,0,0,.28);
}


/* GLOBAL PREMIUM CARD LANGUAGE */

.service-preview,
.contact-panel,
.work-item,
.equipment-object,
.course-list,
.service-image-wrap{
    position:relative;
}


/* SERVICE ROWS */

.service-row{
    transition:
        padding .4s var(--ease),
        background .3s ease,
        border-color .3s ease,
        transform .35s var(--ease);
}

.service-row:hover{
    transform:translateX(8px);
    border-bottom-color:rgba(197,160,89,.38);
}

.service-row.is-active{
    background:
        linear-gradient(
            90deg,
            rgba(197,160,89,.08),
            transparent 70%
        );
}


/* SERVICE PREVIEW CARD */

.service-image-wrap{
    border:1px solid rgba(197,160,89,.24);
    box-shadow:
        0 30px 80px rgba(0,0,0,.26);
}

.service-image-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    border:1px solid transparent;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(197,160,89,.10) 45%,
            transparent 60%
        );

    transform:translateX(-110%);
    transition:transform .9s var(--ease);
}

.service-image-wrap:hover::after{
    transform:translateX(110%);
}


/* EQUIPMENT OBJECT */

.equipment-object{
    border:
        1px solid rgba(197,160,89,.13);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(197,160,89,.08),
            rgba(255,255,255,.01) 45%,
            transparent 75%
        );

    box-shadow:
        inset 0 0 70px rgba(197,160,89,.025);
}

.equipment-object::before{
    content:"";
    position:absolute;
    inset:14px;

    border:
        1px solid rgba(197,160,89,.06);

    pointer-events:none;
}


/* EQUIPMENT STRIP */

.equipment-strip button{
    position:relative;

    transition:
        background .3s ease,
        color .3s ease,
        padding .35s var(--ease);
}

.equipment-strip button:hover{
    padding-left:20px;

    background:
        rgba(197,160,89,.035);

    color:var(--cream);
}

.equipment-strip button.is-active{
    color:var(--brass);

    background:
        linear-gradient(
            180deg,
            rgba(197,160,89,.08),
            rgba(197,160,89,.02)
        );
}

.equipment-strip button.is-active::before{
    content:"";

    position:absolute;

    top:-1px;
    left:0;
    right:0;

    height:2px;

    background:var(--orange);
}


/* COURSE LIST */

.course-list a{
    position:relative;

    transition:
        padding .35s var(--ease),
        background .3s ease,
        border-color .3s ease;
}

.course-list a::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:2px;
    height:0;

    background:var(--orange);

    transform:translateY(-50%);

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

.course-list a:hover::before{
    height:58%;
}

.course-list a:hover{
    padding-left:20px;
    border-bottom-color:rgba(197,160,89,.35);
}


/* WORK CARDS */

.work-item{
    box-shadow:
        0 20px 55px rgba(0,0,0,.18);

    transition:
        transform .45s var(--ease),
        border-color .35s ease,
        box-shadow .45s ease;
}

.work-item:hover{
    transform:translateY(-7px);

    border-color:
        rgba(197,160,89,.45);

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

.work-item span{
    transition:
        transform .35s var(--ease),
        color .3s ease;
}

.work-item:hover span{
    transform:translateY(-4px);
    color:var(--brass);
}


/* CONTACT PANEL */

.contact-panel{
    padding:38px;

    border:1px solid rgba(197,160,89,.18);

    background:
        linear-gradient(
            145deg,
            rgba(197,160,89,.045),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 28px 70px rgba(0,0,0,.18);
}


/* BUTTON DEPTH */

.btn,
.header-cta{
    position:relative;
    overflow:hidden;
}

.btn::after,
.header-cta::after{
    content:"";

    position:absolute;

    top:-70%;
    left:-40%;

    width:24%;
    height:240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transform:
        rotate(18deg)
        translateX(-400%);

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

.btn:hover::after,
.header-cta:hover::after{
    transform:
        rotate(18deg)
        translateX(800%);
}


/* MOBILE — KEEP CARDS CLEAN */

@media(max-width:650px){

    .contact-panel{
        padding:24px;
    }

    .service-row:hover,
    .work-item:hover{
        transform:none;
    }

}


/* =========================================================
   REAL SETUPS → CONTACT
   PREMIUM CARD SYSTEM V2
   Keep global layout locked
========================================================= */


/* =========================================================
   REAL SETUPS HEADER
========================================================= */

#work{
    position:relative;
    overflow:hidden;
}

#work::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-210px;
    top:80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(197,160,89,.075),
            rgba(197,160,89,.018) 45%,
            transparent 70%
        );

    pointer-events:none;
}


/* =========================================================
   REAL SETUPS — EDITORIAL CARDS
========================================================= */

.work-grid{
    gap:14px;
}

.work-item{
    position:relative;
    isolation:isolate;

    border:
        1px solid rgba(197,160,89,.16);

    background:#0d0c0b;

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

    overflow:hidden;

    transition:
        transform .55s var(--ease),
        box-shadow .55s ease,
        border-color .4s ease;
}


/* image */

.work-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        saturate(.90)
        contrast(1.04)
        brightness(.90);

    transform:scale(1.01);

    transition:
        transform 1.1s var(--ease),
        filter .65s ease;
}


/* cinematic gradient */

.work-item::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(10,9,8,.05) 25%,
            rgba(10,9,8,.28) 58%,
            rgba(10,9,8,.92) 100%
        );

    pointer-events:none;
}


/* subtle brass frame */

.work-item::before{
    content:"";

    position:absolute;
    inset:10px;

    z-index:3;

    border:
        1px solid rgba(197,160,89,0);

    pointer-events:none;

    transition:
        inset .45s var(--ease),
        border-color .4s ease;
}


/* title */

.work-item span{
    position:absolute;

    z-index:5;

    left:24px;
    bottom:22px;

    max-width:75%;

    padding-top:13px;

    font-family:var(--syne);

    font-size:
        clamp(19px,1.8vw,29px);

    font-weight:500;

    line-height:1;

    color:var(--cream);

    transition:
        transform .45s var(--ease),
        color .35s ease;
}


/* small line before title */

.work-item span::before{
    content:"";

    display:block;

    width:32px;
    height:1px;

    margin-bottom:12px;

    background:var(--orange);

    transition:
        width .45s var(--ease);
}


/* category micro label */

.work-item span::after{
    content:"VIEW PROJECT";

    display:block;

    margin-top:9px;

    font-family:var(--body);

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

    letter-spacing:.17em;

    color:var(--brass);
}


/* hover */

.work-item:hover{
    transform:
        translateY(-8px);

    border-color:
        rgba(197,160,89,.50);

    box-shadow:
        0 36px 90px rgba(0,0,0,.34);
}

.work-item:hover img{
    transform:scale(1.065);

    filter:
        saturate(1)
        contrast(1.06)
        brightness(.97);
}

.work-item:hover::before{
    inset:16px;

    border-color:
        rgba(197,160,89,.26);
}

.work-item:hover span{
    transform:
        translateY(-8px);

    color:#fff;
}

.work-item:hover span::before{
    width:62px;
}


/* different depth for large card */

.work-large span{
    font-size:
        clamp(26px,3vw,48px);
}

.work-large::after{
    background:
        linear-gradient(
            180deg,
            rgba(10,9,8,0) 25%,
            rgba(10,9,8,.20) 52%,
            rgba(10,9,8,.94) 100%
        );
}


/* =========================================================
   QUOTE SECTION — REMOVE BASIC FORM LOOK
========================================================= */

#quote{
    position:relative;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(197,160,89,.07),
            transparent 26%
        ),
        #0b0a09;
}

.quote-top{
    position:relative;
}


/* form itself becomes one architectural panel */

.quote-form{
    position:relative;

    padding:
        clamp(28px,3vw,48px);

    border:
        1px solid rgba(197,160,89,.18);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            rgba(197,160,89,.025)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.22);

    overflow:hidden;
}


/* accent corner */

.quote-form::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:90px;
    height:2px;

    background:var(--orange);
}


/* subtle light strip */

.quote-form::after{
    content:"";

    position:absolute;

    top:-60%;
    left:-20%;

    width:17%;
    height:220%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    transform:rotate(16deg);

    pointer-events:none;
}


/* each field should NOT look like a separate ugly card */

.field{
    position:relative;

    padding:0 0 8px;

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

.field label{
    margin-bottom:4px;

    color:
        rgba(197,160,89,.82);
}

.field input,
.field select{
    padding:
        14px 0 13px;

    border-bottom:
        1px solid rgba(197,160,89,.20);

    color:var(--cream);

    transition:
        border-color .3s ease,
        padding-left .3s ease;
}

.field input:hover,
.field select:hover{
    border-bottom-color:
        rgba(197,160,89,.42);
}

.field input:focus,
.field select:focus{
    padding-left:7px;

    border-bottom-color:
        var(--orange);
}


/* quote button stronger */

.quote-form .btn{
    min-height:58px;

    margin-top:18px;

    box-shadow:
        0 20px 45px rgba(230,90,21,.18);
}


/* =========================================================
   CONTACT PANEL — PREMIUM INFO CARD
========================================================= */

.contact-panel{
    position:relative;

    padding:
        clamp(28px,3vw,45px);

    border:
        1px solid rgba(197,160,89,.18);

    background:
        linear-gradient(
            160deg,
            rgba(197,160,89,.075),
            rgba(255,255,255,.012) 45%,
            rgba(255,255,255,.006)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.22);

    overflow:hidden;
}


/* oversized watermark */

.contact-panel::before{
    content:"ICONIC";

    position:absolute;

    right:-20px;
    top:15px;

    font-family:var(--syne);

    font-size:
        clamp(62px,8vw,130px);

    font-weight:700;

    letter-spacing:-.08em;

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

    pointer-events:none;
}


/* brass accent */

.contact-panel::after{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:2px;
    height:92px;

    background:
        linear-gradient(
            to bottom,
            var(--orange),
            rgba(230,90,21,0)
        );
}


.contact-panel>div:first-child{
    position:relative;
    z-index:2;
}

.contact-panel>div:first-child>span{
    display:block;

    margin-bottom:18px;
}

.contact-panel p{
    position:relative;

    max-width:430px;

    padding-bottom:26px;

    border-bottom:
        1px solid rgba(197,160,89,.13);
}


/* contact links as strong rows */

.contact-links{
    position:relative;
    z-index:2;

    margin-top:26px;

    border-top:
        1px solid rgba(197,160,89,.12);
}

.contact-links a{
    min-height:56px;

    padding:
        0 4px;

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

    border-bottom:
        1px solid rgba(197,160,89,.12);

    font-family:var(--body);

    font-size:
        clamp(11px,1vw,14px);

    transition:
        padding .35s var(--ease),
        color .3s ease,
        background .3s ease;
}

.contact-links a::after{
    content:"↗";

    color:var(--brass);

    font-size:14px;
}

.contact-links a:hover{
    padding-left:12px;

    color:var(--brass);

    background:
        rgba(197,160,89,.025);
}


/* =========================================================
   FOOTER — MAKE IT DESIGNED, NOT THREE TEXT LINES
========================================================= */

footer{
    position:relative;

    min-height:150px;

    padding:
        38px var(--gutter);

    border-top:
        1px solid rgba(197,160,89,.18);

    background:
        linear-gradient(
            180deg,
            #0a0908,
            #080706
        );

    overflow:hidden;
}


/* subtle huge background word */

footer::before{
    content:"ICONIC";

    position:absolute;

    left:50%;
    bottom:-45px;

    transform:
        translateX(-50%);

    font-family:var(--syne);

    font-size:
        clamp(110px,16vw,280px);

    font-weight:700;

    letter-spacing:-.08em;

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

    pointer-events:none;
}


footer>div{
    position:relative;
    z-index:2;
}


footer>div:first-child{
    color:var(--cream);

    font-family:var(--syne);

    font-size:
        clamp(16px,1.4vw,24px);

    font-weight:600;
}


footer>div:nth-child(2){
    color:var(--brass);

    font-size:7px;

    text-transform:uppercase;

    letter-spacing:.17em;
}


footer>div:last-child{
    color:#615951;
}


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

@media(max-width:650px){

    .work-grid{
        gap:12px;
    }


    .work-item{
        min-height:350px;
    }


    .work-item span{
        left:18px;
        bottom:18px;
    }


    .work-item:hover{
        transform:none;
    }


    .quote-form{
        padding:25px 20px;
    }


    .contact-panel{
        padding:26px 20px;
    }


    footer{
        padding-top:35px;
        padding-bottom:35px;
    }

}


/* =========================================================
   CARD REFINEMENT V3
   Premium / Professional / 3D / Blur / Depth
   Layout stays locked
========================================================= */

:root{
    --card-dark: rgba(18,16,14,.72);
    --card-dark-2: rgba(24,21,18,.82);
    --card-glass: rgba(255,255,255,.025);
    --card-border: rgba(197,160,89,.18);
    --card-border-strong: rgba(197,160,89,.34);
    --card-shadow-soft: 0 18px 45px rgba(0,0,0,.16);
    --card-shadow-deep: 0 38px 110px rgba(0,0,0,.34);
    --card-inner: inset 0 1px 0 rgba(255,255,255,.04);
}


/* =========================================================
   REAL SETUPS SECTION ATMOSPHERE
========================================================= */

#work{
    position:relative;
    overflow:hidden;
}

#work::before{
    content:"";
    position:absolute;
    left:-180px;
    bottom:-120px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(230,90,21,.08), transparent 68%);
    pointer-events:none;
    filter:blur(20px);
}

#work::after{
    content:"";
    position:absolute;
    right:-180px;
    top:20px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(197,160,89,.08), transparent 68%);
    pointer-events:none;
    filter:blur(25px);
}


/* =========================================================
   REAL SETUPS CARDS — NEW PREMIUM STYLE
========================================================= */

.work-grid{
    gap:18px;
    perspective:1400px;
}

.work-item{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    border:1px solid var(--card-border);
    background:
        linear-gradient(160deg, rgba(255,255,255,.02), rgba(255,255,255,.006)),
        linear-gradient(180deg, rgba(20,18,16,.88), rgba(11,10,9,.92));

    box-shadow:
        var(--card-shadow-soft),
        var(--card-inner);

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

    transform-style:preserve-3d;

    transition:
        transform .55s var(--ease),
        box-shadow .55s ease,
        border-color .35s ease,
        background .35s ease;
}

.work-item::before{
    content:"";
    position:absolute;
    inset:14px;
    border:1px solid rgba(197,160,89,0);
    z-index:3;
    pointer-events:none;
    transition:
        inset .45s var(--ease),
        border-color .35s ease,
        opacity .35s ease;
    opacity:.9;
}

.work-item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(10,9,8,.02) 18%,
            rgba(10,9,8,.16) 40%,
            rgba(10,9,8,.52) 68%,
            rgba(10,9,8,.94) 100%
        );
}

.work-item img{
    width:100%;
    height:100%;
    object-fit:cover;

    filter:
        saturate(.92)
        contrast(1.04)
        brightness(.92);

    transform:scale(1.02);

    transition:
        transform 1.2s var(--ease),
        filter .6s ease;
}

.work-item span{
    position:absolute;
    z-index:5;
    left:26px;
    right:26px;
    bottom:24px;

    display:block;

    font-family:var(--syne);
    font-size:clamp(20px,1.85vw,31px);
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.02em;
    color:var(--cream);

    transform:translateZ(28px);
    transition:
        transform .45s var(--ease),
        color .35s ease;
}

.work-item span::before{
    content:"";
    display:block;
    width:34px;
    height:1px;
    margin-bottom:14px;
    background:linear-gradient(90deg,var(--orange),rgba(230,90,21,.15));
    transition:
        width .45s var(--ease),
        opacity .35s ease;
}

.work-item span::after{
    content:"VIEW WORK";
    display:block;
    margin-top:10px;

    font-family:var(--body);
    font-size:7px;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--brass);

    opacity:.92;
    transition:letter-spacing .35s ease, color .35s ease;
}

.work-large span{
    font-size:clamp(28px,3.1vw,48px);
}

/* top light sheen */
.work-item .card-sheen,
.work-item::marker{
    display:none;
}

.work-item:hover{
    transform:
        translateY(-10px)
        rotateX(1.2deg)
        rotateY(-1.2deg);

    border-color:var(--card-border-strong);

    box-shadow:
        var(--card-shadow-deep),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.work-item:hover::before{
    inset:18px;
    border-color:rgba(197,160,89,.26);
}

.work-item:hover img{
    transform:scale(1.07);
    filter:
        saturate(1.01)
        contrast(1.06)
        brightness(.98);
}

.work-item:hover span{
    transform:translateY(-8px) translateZ(34px);
    color:#fff;
}

.work-item:hover span::before{
    width:66px;
}

.work-item:hover span::after{
    letter-spacing:.21em;
    color:#f0c98a;
}

/* moving gloss */
.work-item .gloss,
.work-item::selection{
    background:transparent;
}

.work-item:has(img)::selection{
    background:rgba(197,160,89,.25);
}

.work-item > .card-gloss-helper{
    display:none;
}

.work-item:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:4px;
}


/* =========================================================
   QUOTE FORM CARD — ARCHITECTURAL GLASS PANEL
========================================================= */

.quote-form{
    position:relative;
    padding:clamp(28px,3vw,46px);
    border:1px solid var(--card-border);
    background:
        linear-gradient(155deg, rgba(255,255,255,.028), rgba(197,160,89,.035) 48%, rgba(255,255,255,.01)),
        linear-gradient(180deg, rgba(21,18,16,.92), rgba(12,11,10,.96));
    box-shadow:
        var(--card-shadow-deep),
        inset 0 1px 0 rgba(255,255,255,.04);
    overflow:hidden;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.quote-form::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:110px;
    height:2px;
    background:linear-gradient(90deg,var(--orange),rgba(230,90,21,.08));
}

.quote-form::after{
    content:"";
    position:absolute;
    top:-55%;
    left:-18%;
    width:20%;
    height:220%;
    pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), rgba(197,160,89,.08), transparent);
    transform:rotate(16deg);
    filter:blur(1px);
}

.field{
    position:relative;
    padding-bottom:10px;
}

.field label{
    color:rgba(197,160,89,.86);
    font-size:7px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.field input,
.field select{
    width:100%;
    padding:15px 0 14px;
    border:0;
    border-bottom:1px solid rgba(197,160,89,.20);
    background:transparent;
    color:var(--cream);
    transition:
        border-color .3s ease,
        padding-left .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.field input::placeholder{
    color:#84786d;
}

.field input:hover,
.field select:hover{
    border-bottom-color:rgba(197,160,89,.40);
}

.field input:focus,
.field select:focus{
    padding-left:8px;
    border-bottom-color:var(--orange);
    box-shadow:0 8px 18px rgba(230,90,21,.08);
}

.quote-form .btn{
    margin-top:16px;
    min-height:58px;
    box-shadow:
        0 18px 40px rgba(230,90,21,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   CONTACT PANEL — STRONGER PROFESSIONAL INFO CARD
========================================================= */

.contact-panel{
    position:relative;
    padding:clamp(28px,3vw,46px);
    border:1px solid var(--card-border);
    background:
        linear-gradient(150deg, rgba(197,160,89,.09), rgba(255,255,255,.012) 44%, rgba(255,255,255,.008)),
        linear-gradient(180deg, rgba(21,18,16,.92), rgba(12,11,10,.96));
    box-shadow:
        var(--card-shadow-deep),
        inset 0 1px 0 rgba(255,255,255,.04);
    overflow:hidden;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.contact-panel::before{
    content:"ICONIC";
    position:absolute;
    right:-18px;
    top:14px;
    font-family:var(--syne);
    font-size:clamp(62px,8vw,136px);
    font-weight:700;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.022);
    pointer-events:none;
}

.contact-panel::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:2px;
    height:110px;
    background:linear-gradient(to bottom, var(--orange), rgba(230,90,21,0));
}

.contact-panel > div:first-child > span{
    display:block;
    margin-bottom:18px;
    color:var(--brass);
    font-size:8px;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.contact-panel p{
    max-width:430px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(197,160,89,.12);
    color:#c1b4a7;
    line-height:1.72;
}

.contact-links{
    margin-top:24px;
    border-top:1px solid rgba(197,160,89,.10);
}

.contact-links a{
    min-height:58px;
    padding:0 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(197,160,89,.12);
    color:var(--cream);
    font-family:var(--body);
    font-size:clamp(11px,1vw,14px);
    transition:
        padding .35s var(--ease),
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.contact-links a::after{
    content:"↗";
    color:var(--brass);
    font-size:14px;
    transition:transform .3s ease, color .3s ease;
}

.contact-links a:hover{
    padding-left:14px;
    color:#fff;
    background:rgba(197,160,89,.03);
    border-bottom-color:rgba(197,160,89,.24);
}

.contact-links a:hover::after{
    transform:translateX(4px) translateY(-1px);
    color:#f0c98a;
}


/* =========================================================
   FOOTER — MORE DESIGNED / POLISHED
========================================================= */

footer{
    position:relative;
    min-height:155px;
    padding:40px var(--gutter);
    border-top:1px solid rgba(197,160,89,.18);
    background:
        linear-gradient(180deg, #0a0908, #080706);
    overflow:hidden;
}

footer::before{
    content:"ICONIC";
    position:absolute;
    left:50%;
    bottom:-50px;
    transform:translateX(-50%);
    font-family:var(--syne);
    font-size:clamp(110px,16vw,290px);
    font-weight:700;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.018);
    pointer-events:none;
}

footer > div{
    position:relative;
    z-index:2;
}

footer > div:first-child{
    font-family:var(--syne);
    font-size:clamp(16px,1.45vw,25px);
    font-weight:600;
    color:var(--cream);
}

footer > div:nth-child(2){
    color:var(--brass);
    font-size:7px;
    text-transform:uppercase;
    letter-spacing:.18em;
}

footer > div:last-child{
    color:#6f665e;
}


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

@media(max-width:1000px){

    .work-item:hover{
        transform:translateY(-6px);
    }

}

@media(max-width:650px){

    .work-grid{
        gap:14px;
    }

    .work-item{
        min-height:350px;
        box-shadow:0 16px 40px rgba(0,0,0,.18);
    }

    .work-item span{
        left:18px;
        right:18px;
        bottom:18px;
    }

    .work-item:hover{
        transform:none;
    }

    .work-item:hover::before{
        inset:14px;
    }

    .quote-form{
        padding:24px 20px;
    }

    .contact-panel{
        padding:24px 20px;
    }

    footer{
        padding-top:34px;
        padding-bottom:34px;
    }

}


/* =========================================================
   REFERENCE CARD SYSTEM V4
   Compact · Thin Brass Border · Soft 3D · Professional
========================================================= */

:root{
    --ref-card:#141311;
    --ref-card-soft:#191714;

    --ref-gold:#a98a5c;
    --ref-gold-soft:rgba(169,138,92,.42);
    --ref-gold-line:rgba(169,138,92,.30);

    --ref-radius:20px;

    --ref-shadow:
        0 12px 30px rgba(0,0,0,.20),
        0 3px 9px rgba(0,0,0,.12);

    --ref-shadow-hover:
        0 18px 42px rgba(0,0,0,.27),
        0 5px 14px rgba(0,0,0,.14);
}


/* =========================================================
   REAL SETUPS
========================================================= */

.work-grid{
    display:grid;

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

    grid-template-rows:none;

    gap:18px;

    perspective:1200px;
}


/* kill old giant grid treatment */

.work-large,
.work-wide{
    grid-column:auto !important;
    grid-row:auto !important;
}


.work-item{
    position:relative;

    min-height:0 !important;
    height:auto !important;

    aspect-ratio:.78;

    overflow:hidden;

    border:
        1px solid var(--ref-gold-line);

    border-radius:
        var(--ref-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ),
        var(--ref-card);

    box-shadow:
        var(--ref-shadow);

    transform:
        translate3d(0,0,0);

    transform-style:
        preserve-3d;

    transition:
        transform .42s cubic-bezier(.22,.75,.25,1),
        box-shadow .42s ease,
        border-color .35s ease;
}


/* image occupies upper area */

.work-item img{
    position:absolute;

    top:12px;
    left:12px;
    right:12px;

    width:calc(100% - 24px);

    height:66%;

    border-radius:
        calc(var(--ref-radius) - 6px);

    object-fit:cover;

    filter:
        saturate(.91)
        contrast(1.03)
        brightness(.92);

    transform:none;

    transition:
        transform .65s cubic-bezier(.22,.75,.25,1),
        filter .45s ease;
}


/* remove giant dark cinematic overlay */

.work-item::after{
    content:"";

    position:absolute;

    top:12px;
    left:12px;
    right:12px;

    height:66%;

    border-radius:
        calc(var(--ref-radius) - 6px);

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(10,9,8,.30)
        );

    pointer-events:none;
}


/* thin subtle inner outline */

.work-item::before{
    content:"";

    position:absolute;

    inset:5px;

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

    border-radius:
        calc(var(--ref-radius) - 4px);

    pointer-events:none;
}


/* card title area */

.work-item span,
.work-large span{
    position:absolute;

    left:18px;
    right:18px;
    bottom:17px;

    max-width:none;

    padding:0 !important;

    font-family:var(--syne);

    font-size:
        clamp(15px,1.2vw,19px);

    line-height:1.15;

    font-weight:600;

    color:#f0e9df;

    transform:none;

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


/* tiny category label */

.work-item span::before{
    content:"ICONIC / PROJECT";

    display:block;

    width:auto;
    height:auto;

    margin:0 0 7px;

    background:none;

    color:var(--ref-gold);

    font-family:var(--body);

    font-size:6px;

    font-weight:700;

    line-height:1;

    letter-spacing:.16em;
}


/* tiny arrow instead of VIEW PROJECT */

.work-item span::after{
    content:"↗";

    position:absolute;

    right:0;
    bottom:0;

    margin:0;

    color:var(--ref-gold);

    font-family:var(--body);

    font-size:14px;

    line-height:1;

    letter-spacing:0;

    transition:
        transform .3s ease;
}


/* hover is restrained */

.work-item:hover{
    transform:
        perspective(1200px)
        translateY(-6px)
        rotateX(1deg);

    border-color:
        rgba(169,138,92,.58);

    box-shadow:
        var(--ref-shadow-hover);
}


.work-item:hover img{
    transform:
        scale(1.025);

    filter:
        saturate(.98)
        contrast(1.04)
        brightness(.97);
}


.work-item:hover span{
    transform:
        translateY(-2px);

    color:#fff;
}


.work-item:hover span::after{
    transform:
        translate(3px,-3px);
}


/* subtle highlight instead of giant glow */

.work-item:hover::before{
    inset:5px;

    border-color:
        rgba(169,138,92,.08);
}



/* =========================================================
   QUOTE + CONTACT
   MATCH SAME SMALL PROFESSIONAL CARD LANGUAGE
========================================================= */

.quote-layout{
    gap:22px;
}


.quote-form,
.contact-panel{
    border:
        1px solid var(--ref-gold-line);

    border-radius:
        var(--ref-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.024),
            rgba(255,255,255,.007)
        ),
        var(--ref-card);

    box-shadow:
        var(--ref-shadow);

    backdrop-filter:
        blur(10px);

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


/* smaller form */

.quote-form{
    padding:
        clamp(22px,2.4vw,34px);

    gap:18px;
}


/* remove huge decorative light */

.quote-form::before{
    width:58px;
    height:2px;

    left:22px;

    background:
        var(--ref-gold);
}


.quote-form::after{
    display:none;
}


/* fields more refined */

.field{
    padding:0;
}


.field label{
    margin-bottom:5px;

    font-size:6px;

    color:
        var(--ref-gold);

    letter-spacing:.17em;
}


.field input,
.field select{
    padding:
        11px 0 10px;

    font-size:13px;

    border-bottom:
        1px solid rgba(169,138,92,.25);
}


.field input:focus,
.field select:focus{
    padding-left:0;

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

    box-shadow:none;
}


/* compact button */

.quote-form .btn{
    min-height:48px;

    margin-top:8px;

    border-radius:999px;

    box-shadow:
        0 8px 20px rgba(230,90,21,.15);
}



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

.contact-panel{
    padding:
        clamp(22px,2.4vw,34px);
}


.contact-panel::before{
    content:"";

    width:90px;
    height:90px;

    right:-15px;
    top:-18px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(169,138,92,.08),
            transparent 68%
        );
}


.contact-panel::after{
    width:45px;
    height:2px;

    left:22px;
    top:0;

    background:
        var(--ref-gold);
}


.contact-panel p{
    padding-bottom:18px;

    font-size:13px;

    line-height:1.62;

    border-bottom:
        1px solid rgba(169,138,92,.15);
}


.contact-links{
    margin-top:18px;

    border-top:0;
}


.contact-links a{
    min-height:46px;

    padding:0;

    font-size:12px;

    border-bottom:
        1px solid rgba(169,138,92,.14);
}


.contact-links a:hover{
    padding-left:7px;

    background:transparent;

    color:
        #e6c38d;
}



/* =========================================================
   EQUIPMENT STRIP — REFERENCE STYLE MINI CARDS
========================================================= */

.equipment-strip{
    margin-top:30px;

    display:grid;

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

    gap:10px;

    border-top:0;
}


.equipment-strip button{
    position:relative;

    min-height:62px;

    padding:
        12px 13px;

    border:
        1px solid rgba(169,138,92,.20);

    border-radius:14px;

    background:
        rgba(20,19,17,.68);

    color:#8d8175;

    text-align:left;

    line-height:1.3;

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


.equipment-strip button::before{
    display:none !important;
}


.equipment-strip button:hover{
    padding-left:13px;

    transform:
        translateY(-3px);

    color:#eee6db;

    border-color:
        rgba(169,138,92,.48);

    background:
        rgba(169,138,92,.045);
}


.equipment-strip button.is-active{
    color:#f2e7d9;

    border-color:
        rgba(169,138,92,.60);

    background:
        linear-gradient(
            145deg,
            rgba(169,138,92,.095),
            rgba(169,138,92,.025)
        );
}



/* =========================================================
   COURSE LIST — SMALLER CARD-LIKE ROWS
========================================================= */

.course-list{
    display:grid;

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

    gap:12px;

    border-top:0;
}


.course-list a{
    min-height:82px;

    padding:
        15px 16px;

    display:grid;

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

    align-items:center;

    border:
        1px solid rgba(169,138,92,.20);

    border-radius:16px;

    background:
        rgba(20,19,17,.58);

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


.course-list a::before{
    display:none;
}


.course-list a:hover{
    padding-left:16px;

    transform:
        translateY(-4px);

    border-color:
        rgba(169,138,92,.48);

    background:
        rgba(169,138,92,.04);
}


.course-list strong{
    font-size:
        clamp(16px,1.4vw,21px);
}



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

@media(max-width:1100px){

    .work-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:650px){

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

    .work-item{
        aspect-ratio:1.05;
    }

    .work-item img,
    .work-item::after{
        height:69%;
    }

    .work-item:hover{
        transform:none;
    }

    .course-list{
        grid-template-columns:1fr;
    }

    .equipment-strip{
        display:flex;

        overflow-x:auto;

        padding-bottom:5px;
    }

    .equipment-strip button{
        flex:0 0 150px;
    }

}

/* disable exaggerated JS tilt on reference-style work cards */

.work-item{
    transform-style:flat !important;
}



/* =========================================================
   SERVICE PREVIEW CARD V5
   Compact · Rounded · Thin Gold Border · 3D Depth
========================================================= */

.service-preview{
    position:sticky;
    top:112px;

    padding:14px;

    border:
        1px solid rgba(169,138,92,.30);

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(169,138,92,.018)
        ),
        rgba(19,18,16,.88);

    box-shadow:
        0 18px 45px rgba(0,0,0,.20),
        0 4px 14px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.03);

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

    overflow:hidden;

    transform-style:preserve-3d;

    transition:
        transform .42s cubic-bezier(.22,.75,.25,1),
        border-color .35s ease,
        box-shadow .42s ease;
}


/* soft ambient glow behind card */

.service-preview::before{
    content:"";

    position:absolute;

    right:-100px;
    bottom:-110px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(169,138,92,.09),
            transparent 68%
        );

    filter:blur(18px);

    pointer-events:none;
}


/* top highlight line */

.service-preview::after{
    content:"";

    position:absolute;

    top:0;
    left:24px;

    width:70px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            rgba(230,90,21,0)
        );
}


/* image block */

.service-image-wrap{
    position:relative;

    height:365px !important;

    overflow:hidden;

    border:
        1px solid rgba(169,138,92,.18);

    border-radius:16px;

    background:#0c0b0a;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transform:none !important;
}


.service-image-wrap img{
    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        saturate(.92)
        contrast(1.04)
        brightness(.94);

    transform:scale(1.01);

    transition:
        transform .75s cubic-bezier(.22,.75,.25,1),
        filter .45s ease,
        opacity .35s ease;
}


.service-preview:hover .service-image-wrap img{
    transform:scale(1.035);

    filter:
        saturate(.98)
        contrast(1.05)
        brightness(.98);
}


/* image shade */

.service-image-wrap .media-shade{
    background:
        linear-gradient(
            180deg,
            rgba(10,9,8,.02) 45%,
            rgba(10,9,8,.35) 75%,
            rgba(10,9,8,.64) 100%
        );
}


/* small label in image */

.image-tag{
    left:15px;
    bottom:13px;

    padding:
        5px 7px;

    border:
        1px solid rgba(169,138,92,.24);

    border-radius:999px;

    background:
        rgba(12,11,10,.62);

    backdrop-filter:blur(8px);

    color:#d7b784;

    font-size:6px;
    font-weight:700;
    letter-spacing:.16em;
}


/* text area */

.service-copy{
    position:relative;

    padding:
        22px 6px 5px;

    display:grid;

    grid-template-columns:1fr auto;

    grid-template-areas:
        "title arrow"
        "desc desc"
        "cta cta";

    column-gap:18px;
}


.service-copy h3{
    grid-area:title;

    margin:0;

    max-width:90%;

    font-family:var(--syne);

    font-size:
        clamp(22px,2.2vw,34px);

    line-height:1.02;

    font-weight:600;

    letter-spacing:-.025em;

    color:#f2e9dd;
}


/* decorative arrow circle */

.service-copy::after{
    content:"↗";

    grid-area:arrow;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border:
        1px solid rgba(169,138,92,.28);

    border-radius:50%;

    color:var(--ref-gold);

    font-size:13px;

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


.service-preview:hover .service-copy::after{
    transform:
        translate(3px,-3px);

    border-color:
        rgba(169,138,92,.55);

    background:
        rgba(169,138,92,.05);
}


/* description */

.service-copy p{
    grid-area:desc;

    max-width:95%;

    margin:
        13px 0 17px;

    color:#9d9084;

    font-size:12px;

    line-height:1.6;
}


/* CTA */

.service-copy a{
    grid-area:cta;

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

    width:max-content;

    min-height:34px;

    padding:
        0 12px;

    border:
        1px solid rgba(169,138,92,.24);

    border-radius:999px;

    color:#d9b87f;

    background:
        rgba(169,138,92,.025);

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

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

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


.service-copy a:hover{
    transform:translateY(-2px);

    border-color:
        rgba(169,138,92,.50);

    background:
        rgba(169,138,92,.07);

    color:#f0cf97;
}


/* subtle card lift */

.service-preview:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(169,138,92,.46);

    box-shadow:
        0 24px 60px rgba(0,0,0,.28),
        0 6px 16px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.035);
}



/* =========================================================
   SERVICE ROWS — MATCH THE SAME CARD LANGUAGE
========================================================= */

.service-list{
    border-top:0;

    display:flex;
    flex-direction:column;

    gap:10px;
}


.service-row{
    min-height:82px;

    padding:
        0 16px;

    border:
        1px solid rgba(169,138,92,.16);

    border-radius:14px;

    background:
        rgba(20,19,17,.52);

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


.service-row:hover,
.service-row.is-active{
    padding-left:16px;

    transform:
        translateX(4px);

    border-color:
        rgba(169,138,92,.40);

    background:
        linear-gradient(
            90deg,
            rgba(169,138,92,.065),
            rgba(169,138,92,.015)
        );

    box-shadow:
        0 9px 22px rgba(0,0,0,.10);
}


.service-row strong{
    font-size:
        clamp(17px,1.6vw,24px);
}


.service-row.is-active strong{
    color:
        #e3c18b;
}


.service-num{
    color:
        rgba(169,138,92,.62);
}


/* active accent dot */

.service-row.is-active::after{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 0 4px rgba(230,90,21,.10);
}


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

@media(max-width:1000px){

    .service-preview{
        position:relative;
        top:auto;
    }

}


@media(max-width:650px){

    .service-preview{
        padding:10px;
        border-radius:18px;
    }

    .service-image-wrap{
        height:300px !important;
        border-radius:13px;
    }

    .service-copy{
        padding:
            18px 5px 5px;
    }

    .service-row{
        min-height:74px;
    }

}


/* =========================================================
   EQUIPMENT SECTION V6
   Compact premium card system
========================================================= */

#equipment{
    position:relative;
    overflow:hidden;
}


/* softer ambient depth */

#equipment::before{
    content:"";
    position:absolute;

    width:480px;
    height:480px;

    left:-150px;
    top:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(197,160,89,.07),
            transparent 68%
        );

    filter:blur(25px);

    pointer-events:none;
}


/* =========================================================
   TABS
========================================================= */

.equipment-tabs{
    width:max-content;

    display:flex;
    gap:8px;

    margin-bottom:34px;

    padding:5px;

    border:
        1px solid rgba(169,138,92,.18);

    border-radius:999px;

    background:
        rgba(20,19,17,.72);

    backdrop-filter:blur(10px);

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


.equipment-tab{
    min-width:110px;

    padding:
        10px 18px;

    border:0 !important;

    border-radius:999px;

    background:transparent;

    color:#80756b;

    transition:
        color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.equipment-tab.is-active{
    color:#efe6da;

    background:
        rgba(169,138,92,.10);

    box-shadow:
        inset 0 0 0 1px rgba(169,138,92,.30);
}


/* =========================================================
   MAIN EQUIPMENT STAGE
========================================================= */

.equipment-stage{
    min-height:0 !important;

    padding:18px;

    display:grid;

    grid-template-columns:
        44px minmax(0,1.15fr) minmax(300px,.65fr) 44px;

    gap:18px;

    align-items:stretch;

    border:
        1px solid rgba(169,138,92,.22);

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            rgba(169,138,92,.016)
        ),
        rgba(17,16,14,.88);

    box-shadow:
        0 18px 45px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter:blur(12px);

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


/* =========================================================
   MAIN MACHINE IMAGE CARD
========================================================= */

.equipment-object{
    height:430px !important;

    position:relative;

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

    overflow:hidden;

    border:
        1px solid rgba(169,138,92,.18);

    border-radius:16px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(197,160,89,.10),
            rgba(20,19,17,.75) 56%,
            rgba(12,11,10,.95)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transform:none !important;
}


/* inner border */

.equipment-object::before{
    content:"";

    position:absolute;

    inset:10px;

    border:
        1px solid rgba(169,138,92,.07);

    border-radius:12px;

    pointer-events:none;
}


/* small light source */

.equipment-aura{
    width:62%;

    opacity:.65;

    background:
        radial-gradient(
            circle,
            rgba(197,160,89,.16),
            transparent 67%
        );

    filter:blur(22px);
}


.equipment-object img{
    width:88% !important;
    height:88% !important;

    object-fit:contain;

    filter:
        drop-shadow(0 22px 28px rgba(0,0,0,.46))
        saturate(.96)
        contrast(1.02);

    transition:
        transform .6s cubic-bezier(.22,.75,.25,1),
        opacity .3s ease,
        filter .4s ease;
}


.equipment-object:hover img{
    transform:
        translateY(-4px)
        scale(1.025);

    filter:
        drop-shadow(0 28px 34px rgba(0,0,0,.52))
        saturate(1)
        contrast(1.03);
}


/* =========================================================
   INFO CARD
========================================================= */

.equipment-info{
    position:relative;

    padding:
        28px 26px;

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

    border:
        1px solid rgba(169,138,92,.18);

    border-radius:16px;

    background:
        linear-gradient(
            150deg,
            rgba(169,138,92,.05),
            rgba(255,255,255,.008)
        ),
        rgba(20,19,17,.70);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
}


.equipment-info::before{
    content:"";

    position:absolute;

    top:0;
    left:24px;

    width:55px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            transparent
        );
}


.equipment-info > span{
    margin-bottom:12px;

    color:#b59869;

    font-size:7px;

    letter-spacing:.17em;
}


.equipment-info h3{
    margin:
        0 0 14px;

    font-size:
        clamp(28px,3vw,48px);

    line-height:.96;

    letter-spacing:-.035em;
}


.equipment-info p{
    margin:
        0 0 20px;

    max-width:420px;

    color:#94887c;

    font-size:12px;

    line-height:1.62;
}


/* badges */

.equipment-meta{
    margin:
        0 0 20px;

    gap:7px;
}


.equipment-meta span{
    padding:
        6px 9px;

    border:
        1px solid rgba(169,138,92,.22);

    border-radius:999px;

    background:
        rgba(169,138,92,.025);

    color:#bca98d;

    font-size:6px;

    text-transform:uppercase;

    letter-spacing:.11em;
}


/* CTA */

.equipment-info > a{
    width:max-content;

    min-height:34px;

    padding:
        0 12px;

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

    border:
        1px solid rgba(169,138,92,.25);

    border-radius:999px;

    background:
        rgba(169,138,92,.025);

    color:#d6b77f;

    font-size:7px;

    letter-spacing:.14em;

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


.equipment-info > a:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(169,138,92,.48);

    background:
        rgba(169,138,92,.07);
}


/* =========================================================
   SIDE ARROWS
========================================================= */

.equipment-arrow{
    width:40px;
    height:40px;

    align-self:center;

    border:
        1px solid rgba(169,138,92,.22);

    border-radius:50%;

    background:
        rgba(20,19,17,.78);

    color:#d5c5b3;

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


.equipment-arrow:hover{
    transform:
        scale(1.08);

    border-color:
        rgba(169,138,92,.55);

    background:
        rgba(169,138,92,.09);

    color:#fff;
}


/* =========================================================
   BOTTOM EQUIPMENT SELECTOR CARDS
========================================================= */

.equipment-strip{
    margin-top:16px;

    display:grid;

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

    gap:10px;

    border-top:0;
}


.equipment-strip button{
    position:relative;

    min-height:58px;

    padding:
        11px 12px;

    border:
        1px solid rgba(169,138,92,.17);

    border-radius:14px;

    background:
        rgba(20,19,17,.58);

    color:#81766b;

    font-size:7px;

    line-height:1.35;

    text-align:left;

    overflow:hidden;

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


/* remove old line */

.equipment-strip button::before{
    display:none !important;
}


.equipment-strip button:hover{
    padding-left:12px;

    transform:
        translateY(-3px);

    color:#eee4d7;

    border-color:
        rgba(169,138,92,.38);

    background:
        rgba(169,138,92,.035);

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);
}


.equipment-strip button.is-active{
    color:#f2e8dc;

    border-color:
        rgba(169,138,92,.55);

    background:
        linear-gradient(
            145deg,
            rgba(169,138,92,.095),
            rgba(169,138,92,.020)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 20px rgba(0,0,0,.10);
}


/* active orange indicator */

.equipment-strip button.is-active::after{
    content:"";

    position:absolute;

    left:11px;
    top:9px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 0 3px rgba(230,90,21,.10);
}


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

@media(max-width:1000px){

    .equipment-stage{
        grid-template-columns:
            40px 1fr 40px;
    }

    .equipment-info{
        grid-column:1 / -1;
    }

}


@media(max-width:650px){

    .equipment-tabs{
        width:100%;

        justify-content:center;
    }

    .equipment-tab{
        flex:1;
    }

    .equipment-stage{
        padding:10px;

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

        gap:8px;

        border-radius:18px;
    }

    .equipment-object{
        height:330px !important;

        border-radius:14px;
    }

    .equipment-info{
        padding:
            22px 18px;
    }

    .equipment-strip{
        display:flex;

        overflow-x:auto;

        gap:8px;

        padding-bottom:5px;
    }

    .equipment-strip button{
        flex:
            0 0 145px;
    }

}

.equipment-object.tilt{
    transform:none !important;
}


/* =========================================================
   EQUIPMENT ALIGNMENT FIX
   Instagram ratio + cleaner alignment
========================================================= */

#equipment{
    position:relative;
}

#equipment .equipment-stage{
    width:min(100%, 1540px);
    margin:0 auto;

    grid-template-columns: 54px minmax(420px, 620px) minmax(340px, 460px) 54px !important;
    gap:26px !important;

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

    padding:24px !important;
    border-radius:26px !important;
}


/* LEFT VISUAL PANEL */
#equipment .equipment-object{
    width:100%;
    max-width:620px;
    margin:0 auto;

    aspect-ratio: 4 / 5 !important;   /* Instagram-style */
    height:auto !important;
    min-height:auto !important;

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

    padding:26px !important;
    overflow:hidden;

    border-radius:22px !important;
}

#equipment .equipment-object img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    display:block;
    margin:0 auto;
}


/* RIGHT CONTENT CARD */
#equipment .equipment-info{
    width:100%;
    max-width:460px;
    min-height:520px;

    margin:0;
    align-self:stretch;

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

    padding:34px 28px !important;
    border-radius:22px !important;
}

#equipment .equipment-info h3{
    font-size:clamp(34px, 3vw, 56px) !important;
    line-height:0.98 !important;
    margin-bottom:14px !important;
}

#equipment .equipment-info p{
    max-width:360px !important;
    margin-bottom:18px !important;
}


/* ARROWS */
#equipment .equipment-arrow{
    width:42px !important;
    height:42px !important;

    align-self:center !important;
    justify-self:center !important;
}


/* BOTTOM SELECTOR CARDS */
#equipment .equipment-strip{
    width:min(100%, 1540px);
    margin:16px auto 0 auto !important;

    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px !important;
}

#equipment .equipment-strip button{
    min-height:64px !important;
    padding:14px 14px !important;
    border-radius:16px !important;

    display:flex;
    align-items:center;

    font-size:8px !important;
    line-height:1.35 !important;
}


/* TABS */
#equipment .equipment-tabs{
    margin-bottom:22px !important;
}


/* BETTER SECTION HEADING SPACING */
#equipment .section-heading{
    margin-bottom:18px !important;
}

#equipment .section-heading p{
    max-width:420px !important;
}


/* TABLET */
@media(max-width:1100px){

    #equipment .equipment-stage{
        grid-template-columns: 44px minmax(320px,1fr) 44px !important;
        gap:16px !important;
    }

    #equipment .equipment-info{
        max-width:none;
        min-height:auto;
        grid-column:1 / -1;
    }

    #equipment .equipment-object{
        max-width:520px;
        aspect-ratio: 4 / 5 !important;
    }
}


/* MOBILE */
@media(max-width:700px){

    #equipment .equipment-stage{
        grid-template-columns: 1fr !important;
        gap:14px !important;
        padding:14px !important;
    }

    #equipment .equipment-arrow{
        display:none !important;
    }

    #equipment .equipment-object{
        max-width:100%;
        aspect-ratio: 4 / 5 !important;
        padding:16px !important;
        border-radius:18px !important;
    }

    #equipment .equipment-info{
        padding:22px 18px !important;
        border-radius:18px !important;
    }

    #equipment .equipment-info h3{
        font-size:clamp(28px, 8vw, 40px) !important;
    }

    #equipment .equipment-strip{
        display:flex !important;
        overflow-x:auto;
        gap:10px !important;
        padding-bottom:6px;
    }

    #equipment .equipment-strip button{
        flex:0 0 180px;
        min-height:58px !important;
    }
}


/* =========================================================
   EQUIPMENT IMAGE FIT FIX
   Full machine visible + blurred image background
========================================================= */

#equipment .equipment-object{
    position:relative !important;

    aspect-ratio:4 / 5 !important;
    height:auto !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#100f0e !important;
}


/* blurred same-image background */

#equipment .equipment-object::after{
    content:"";

    position:absolute;
    inset:-8%;

    z-index:0;

    background-image:
        var(--equipment-bg);

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

    filter:
        blur(28px)
        brightness(.38)
        saturate(.70);

    transform:scale(1.15);

    opacity:.72;

    pointer-events:none;
}


/* dark professional overlay */

#equipment .equipment-object::before{
    content:"";

    position:absolute !important;

    inset:0 !important;

    z-index:1 !important;

    border:0 !important;

    border-radius:inherit !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0,0,0,.04),
            rgba(10,9,8,.22) 62%,
            rgba(10,9,8,.55) 100%
        );

    pointer-events:none;
}


/* actual machine */

#equipment .equipment-object img{
    position:absolute !important;

    z-index:2 !important;

    inset:50% auto auto 50% !important;

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

    width:92% !important;
    height:92% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;

    filter:
        drop-shadow(0 25px 35px rgba(0,0,0,.48))
        saturate(1)
        contrast(1.03) !important;

    transition:
        width .5s cubic-bezier(.22,.75,.25,1),
        height .5s cubic-bezier(.22,.75,.25,1),
        opacity .3s ease !important;
}


/* slight professional hover */

#equipment .equipment-object:hover img{
    width:94% !important;
    height:94% !important;

    transform:
        translate(-50%,-51%) !important;
}


/* remove old aura */

#equipment .equipment-aura{
    display:none !important;
}


/* landscape commercial machines need slightly more breathing room */

#equipment .equipment-object.is-landscape img{
    width:94% !important;
    height:88% !important;
}


/* portrait grinders */

#equipment .equipment-object.is-portrait img{
    width:82% !important;
    height:92% !important;
}


@media(max-width:700px){

    #equipment .equipment-object{
        aspect-ratio:4 / 5 !important;
    }

    #equipment .equipment-object img{
        width:94% !important;
        height:92% !important;
    }

}


/* =========================================================
   GLOBAL TYPOGRAPHY NORMALIZATION
   Balanced premium scale across entire website
========================================================= */

:root{
    --type-hero: clamp(64px, 6.6vw, 112px);
    --type-h2: clamp(44px, 4.7vw, 78px);
    --type-h3: clamp(26px, 2.5vw, 42px);
    --type-card-title: clamp(17px, 1.35vw, 22px);

    --type-body-lg: clamp(15px, .95vw, 17px);
    --type-body: clamp(14px, .88vw, 16px);
    --type-small: clamp(12px, .75vw, 14px);

    --type-label: 11px;
    --type-micro: 9px;
}


/* =========================================================
   GLOBAL BODY
========================================================= */

body{
    font-size:16px;
    line-height:1.6;
}

p{
    font-size:var(--type-body);
    line-height:1.65;
}


/* =========================================================
   HERO — REDUCE GIANT TEXT
========================================================= */

.hero h1{
    font-size:var(--type-hero) !important;
    line-height:.86 !important;
    letter-spacing:-.055em !important;

    max-width:1100px;
}

.hero-main p{
    max-width:650px;

    font-size:var(--type-body-lg) !important;
    line-height:1.65 !important;
}

.eyebrow{
    font-size:10px !important;
    letter-spacing:.16em !important;
}

.hero-service strong{
    font-size:17px !important;
}

.hero-service span,
.hero-bottom{
    font-size:9px !important;
}


/* =========================================================
   MAIN SECTION HEADINGS
========================================================= */

.section-heading h2,
.events h2,
.equipment h2,
.training h2,
.work h2,
.quote h2,
.training-title h2{
    font-size:var(--type-h2) !important;

    line-height:.90 !important;

    letter-spacing:-.045em !important;
}

.section-index{
    font-size:10px !important;

    letter-spacing:.15em !important;

    margin-bottom:16px !important;
}


/* =========================================================
   SERVICES
========================================================= */

.service-row strong{
    font-size:clamp(19px,1.65vw,27px) !important;
    line-height:1.15 !important;
}

.service-num{
    font-size:10px !important;
}

.service-copy h3{
    font-size:clamp(25px,2vw,34px) !important;

    line-height:1.05 !important;
}

.service-copy p{
    font-size:14px !important;
    line-height:1.65 !important;
}

.service-copy a{
    font-size:9px !important;
}

.image-tag{
    font-size:8px !important;
}


/* =========================================================
   EVENTS
========================================================= */

.events-copy p{
    font-size:15px !important;
    line-height:1.7 !important;
}

.event-types span{
    font-size:10px !important;

    letter-spacing:.08em !important;
}


/* =========================================================
   EQUIPMENT
========================================================= */

.equipment-head p{
    font-size:15px !important;

    line-height:1.65 !important;
}

.equipment-tab{
    font-size:11px !important;
    letter-spacing:.10em !important;

    font-weight:700 !important;
}

.equipment-info > span{
    font-size:9px !important;

    letter-spacing:.14em !important;
}

.equipment-info h3{
    font-size:clamp(32px,3vw,50px) !important;

    line-height:1 !important;

    letter-spacing:-.035em !important;
}

.equipment-info p{
    font-size:14px !important;

    line-height:1.65 !important;
}

.equipment-meta span{
    font-size:9px !important;

    letter-spacing:.08em !important;
}

.equipment-info > a{
    font-size:10px !important;
}


/* IMPORTANT:
   current selector text is almost invisible */

.equipment-strip button{
    font-size:10px !important;

    line-height:1.35 !important;

    font-weight:600 !important;

    color:#a99c90 !important;
}

.equipment-strip button.is-active{
    color:#f0e7dc !important;
}


/* =========================================================
   TRAINING
========================================================= */

.training-title > span{
    font-size:10px !important;
}

.training-intro p{
    font-size:15px !important;

    line-height:1.65 !important;
}

.course-list span{
    font-size:10px !important;
}

.course-list strong{
    font-size:clamp(18px,1.55vw,24px) !important;

    line-height:1.2 !important;
}


/* =========================================================
   REAL SETUPS / WORK CARDS
========================================================= */

.work-item span,
.work-large span{
    font-size:var(--type-card-title) !important;

    line-height:1.15 !important;
}

.work-item span::before{
    font-size:8px !important;
}

.work-item span::after{
    font-size:13px !important;
}


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

.field label{
    font-size:9px !important;

    letter-spacing:.13em !important;
}

.field input,
.field select{
    font-size:14px !important;
}

.contact-panel > div:first-child > span{
    font-size:10px !important;
}

.contact-panel p{
    font-size:14px !important;
    line-height:1.65 !important;
}

.contact-links a{
    font-size:14px !important;
}


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

.btn,
.header-cta{
    font-size:10px !important;

    letter-spacing:.10em !important;
}

.text-link{
    font-size:10px !important;
}


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

.brand{
    font-size:11px !important;
}

.desktop-nav a{
    font-size:10px !important;
}


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

footer{
    font-size:10px !important;
}

footer > div:first-child{
    font-size:18px !important;
}

footer > div:nth-child(2){
    font-size:9px !important;
}


/* =========================================================
   LARGE DESKTOP
   Stop typography becoming ridiculous on 1900px screens
========================================================= */

@media(min-width:1500px){

    .hero h1{
        font-size:108px !important;
    }

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:72px !important;
    }

}


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

@media(max-width:1000px){

    .hero h1{
        font-size:clamp(58px,10vw,88px) !important;
    }

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:clamp(42px,7vw,64px) !important;
    }

}


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

@media(max-width:650px){

    .hero h1{
        font-size:clamp(48px,14vw,67px) !important;

        line-height:.90 !important;
    }

    .hero-main p{
        font-size:14px !important;
    }

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:clamp(38px,11vw,54px) !important;

        line-height:.94 !important;
    }

    .service-row strong{
        font-size:18px !important;
    }

    .service-copy h3{
        font-size:25px !important;
    }

    .equipment-info h3{
        font-size:30px !important;
    }

    .equipment-strip button{
        font-size:10px !important;
    }

    .course-list strong{
        font-size:18px !important;
    }

}


/* =========================================================
   GLOBAL TYPOGRAPHY VISIBILITY SYSTEM
   Whole website readability correction
========================================================= */

:root{

    /* text colors */
    --text-main:#f2ebe2;
    --text-soft:#d3c8bd;
    --text-muted:#aa9d90;
    --text-dim:#897d72;

    --text-gold:#cdb07a;
    --text-orange:#ef6419;

    /* scale */
    --fs-body:16px;
    --fs-body-small:14px;
    --fs-label:11px;
    --fs-nav:12px;
    --fs-button:11px;

    --fs-card-title:20px;
    --fs-section-title:clamp(46px,4.5vw,76px);
    --fs-hero:clamp(64px,6.4vw,108px);
}


/* =========================================================
   GLOBAL FONT RENDERING
========================================================= */

html{
    font-size:16px;
}

body{
    color:var(--text-main);

    font-family:
        "Hanken Grotesk",
        Arial,
        Helvetica,
        sans-serif;

    font-size:var(--fs-body);

    line-height:1.65;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;
}


p{
    color:var(--text-soft);

    font-size:16px !important;

    line-height:1.7 !important;
}


/* =========================================================
   REMOVE MICROSCOPIC TEXT
========================================================= */

/* nothing important should be below 10px */

.section-index,
.eyebrow,
.micro-label,
.image-tag,
.service-num,
.equipment-info > span,
.training-title > span,
.field label,
footer,
.event-types span,
.equipment-meta span{
    font-size:11px !important;
}


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

.brand{
    font-size:12px !important;

    color:var(--text-main);

    letter-spacing:.10em !important;
}

.desktop-nav a{
    font-size:12px !important;

    color:#d8cec4 !important;

    letter-spacing:.07em !important;

    line-height:1.2;
}

.desktop-nav a:hover{
    color:#fff !important;
}

.header-cta{
    font-size:11px !important;

    color:#fff !important;

    letter-spacing:.07em !important;
}


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

.hero h1{
    font-size:var(--fs-hero) !important;

    line-height:.88 !important;

    letter-spacing:-.045em !important;

    color:#f5eee6 !important;
}

.hero-main p{
    font-size:17px !important;

    line-height:1.68 !important;

    color:#d1c6bc !important;

    max-width:620px;
}

.eyebrow{
    color:var(--text-gold) !important;

    letter-spacing:.13em !important;
}

.hero-service span{
    font-size:11px !important;

    color:#9a8e82 !important;
}

.hero-service strong{
    font-size:18px !important;

    color:#eee7df !important;
}

.hero-bottom{
    font-size:10px !important;

    color:#93877b !important;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading h2,
.events h2,
.equipment h2,
.training h2,
.work h2,
.quote h2,
.training-title h2{
    font-size:var(--fs-section-title) !important;

    line-height:.92 !important;

    letter-spacing:-.035em !important;

    color:#f2ebe3 !important;
}

.section-index{
    color:var(--text-gold) !important;

    letter-spacing:.12em !important;

    font-weight:600;
}


/* =========================================================
   SERVICES
========================================================= */

.service-row strong{
    font-size:21px !important;

    line-height:1.15 !important;

    color:#eee7df;
}

.service-row.is-active strong{
    color:#e1bf88 !important;
}

.service-num{
    color:#ac9370 !important;
}

.service-copy h3{
    font-size:30px !important;

    line-height:1.05 !important;

    color:#f2ebe2 !important;
}

.service-copy p{
    font-size:15px !important;

    color:#b9ada1 !important;

    line-height:1.68 !important;
}

.service-copy a{
    font-size:11px !important;

    color:#d9b77f !important;

    letter-spacing:.08em !important;
}

.image-tag{
    color:#e1c38e !important;
}


/* =========================================================
   EVENTS
========================================================= */

.events-copy p{
    font-size:16px !important;

    color:#bfb3a7 !important;
}

.event-types span{
    font-size:11px !important;

    color:#d1c4b8 !important;

    letter-spacing:.05em !important;
}


/* =========================================================
   EQUIPMENT
========================================================= */

.equipment-head p{
    font-size:16px !important;

    color:#bbb0a5 !important;
}

.equipment-tab{
    font-size:12px !important;

    color:#a99d91 !important;

    letter-spacing:.07em !important;
}

.equipment-tab.is-active{
    color:#f0e8df !important;
}

.equipment-info > span{
    font-size:11px !important;

    color:#c1a36f !important;

    letter-spacing:.10em !important;
}

.equipment-info h3{
    font-size:clamp(34px,3vw,50px) !important;

    line-height:1 !important;

    color:#f2ebe3 !important;
}

.equipment-info p{
    font-size:15px !important;

    color:#b3a79c !important;

    line-height:1.65 !important;
}

.equipment-meta span{
    font-size:10px !important;

    color:#ccb995 !important;

    letter-spacing:.05em !important;
}

.equipment-info > a{
    font-size:11px !important;

    color:#e2bf80 !important;

    letter-spacing:.07em !important;
}


/* equipment selector must be readable */

.equipment-strip button{
    font-size:11px !important;

    font-weight:500 !important;

    line-height:1.3 !important;

    color:#a99d91 !important;

    letter-spacing:0 !important;
}

.equipment-strip button.is-active{
    color:#f2e9df !important;
}


/* =========================================================
   TRAINING
========================================================= */

.training-title > span{
    font-size:11px !important;

    color:#cfb077 !important;
}

.training-intro p{
    font-size:16px !important;

    color:#bbb0a5 !important;
}

.course-list span{
    font-size:11px !important;

    color:#ac9371 !important;
}

.course-list strong{
    font-size:21px !important;

    color:#eee6dc !important;
}


/* =========================================================
   WORK / REAL SETUPS
========================================================= */

.work-item span,
.work-large span{
    font-size:20px !important;

    color:#f0e8df !important;

    line-height:1.15 !important;
}

.work-item span::before{
    font-size:9px !important;

    color:#c8aa74 !important;
}


/* =========================================================
   FORMS
========================================================= */

.field label{
    font-size:11px !important;

    color:#ceb078 !important;

    letter-spacing:.08em !important;
}

.field input,
.field select{
    font-size:15px !important;

    color:#f1e9df !important;
}

.field input::placeholder{
    color:#93877c !important;
}


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

.contact-panel > div:first-child > span{
    font-size:11px !important;

    color:#cdb07b !important;
}

.contact-panel p{
    font-size:15px !important;

    color:#bbb0a5 !important;

    line-height:1.65 !important;
}

.contact-links a{
    font-size:14px !important;

    color:#e3d9cf !important;
}


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

.btn,
.header-cta{
    font-size:11px !important;

    font-weight:600 !important;

    letter-spacing:.06em !important;
}

.text-link{
    font-size:11px !important;

    color:#d2c6bb !important;

    letter-spacing:.06em !important;
}


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

footer{
    font-size:11px !important;

    color:#978b80 !important;
}

footer > div:first-child{
    font-size:19px !important;

    color:#ece4dc !important;
}

footer > div:nth-child(2){
    font-size:10px !important;

    color:#c1a66f !important;

    letter-spacing:.08em !important;
}


/* =========================================================
   IMPORTANT:
   remove excessive uppercase spacing where readability suffers
========================================================= */

.service-copy a,
.equipment-info > a,
.btn,
.header-cta,
.desktop-nav a,
.event-types span,
.field label{
    letter-spacing:.06em !important;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(min-width:1600px){

    body{
        font-size:17px;
    }

    .hero h1{
        font-size:105px !important;
    }

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:72px !important;
    }

    .equipment-strip button{
        font-size:12px !important;
    }

}


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

@media(max-width:1000px){

    body{
        font-size:15px;
    }

    .hero h1{
        font-size:clamp(58px,9vw,82px) !important;
    }

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:clamp(42px,7vw,60px) !important;
    }

}


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

@media(max-width:650px){

    body{
        font-size:15px;
    }

    p{
        font-size:15px !important;
    }

    .hero h1{
        font-size:clamp(48px,13vw,64px) !important;

        line-height:.92 !important;
    }

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

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:clamp(38px,10vw,52px) !important;
    }

    .service-row strong{
        font-size:18px !important;
    }

    .service-copy h3{
        font-size:25px !important;
    }

    .equipment-info h3{
        font-size:30px !important;
    }

    .equipment-strip button{
        font-size:11px !important;
    }

    .course-list strong{
        font-size:18px !important;
    }

    .contact-links a{
        font-size:13px !important;
    }

}

/* =========================================================
   FINAL READABILITY RESET
   Stronger visibility across entire website
========================================================= */

:root{
    --read-white:#f6f0e8;
    --read-soft:#ddd3c8;
    --read-muted:#c0b4a8;
    --read-dim:#a89b8f;

    --read-gold:#d2b27c;
    --read-orange:#f06418;

    --read-body:16px;
    --read-body-lg:17px;
    --read-small:13px;
    --read-label:12px;
    --read-nav:13px;
    --read-button:12px;

    --read-card-title:22px;
    --read-section:clamp(44px,4.2vw,70px);
    --read-hero:clamp(60px,5.8vw,96px);
}


/* -----------------------------------------
   BASE
----------------------------------------- */

html{
    font-size:16px !important;
}

body{
    color:var(--read-white) !important;
    font-size:var(--read-body) !important;
    line-height:1.65 !important;
    font-weight:500 !important;
}

p{
    color:var(--read-soft) !important;
    font-size:var(--read-body) !important;
    line-height:1.72 !important;
    font-weight:400 !important;
}


/* -----------------------------------------
   HERO
----------------------------------------- */

.hero h1{
    font-size:var(--read-hero) !important;
    line-height:.9 !important;
    letter-spacing:-.045em !important;
    color:var(--read-white) !important;
    max-width:1080px !important;
}

.hero-main p{
    font-size:var(--read-body-lg) !important;
    line-height:1.7 !important;
    color:var(--read-soft) !important;
    max-width:660px !important;
}

.eyebrow{
    font-size:var(--read-label) !important;
    color:var(--read-gold) !important;
    letter-spacing:.10em !important;
    font-weight:700 !important;
}

.hero-service span{
    font-size:var(--read-small) !important;
    color:var(--read-dim) !important;
}

.hero-service strong{
    font-size:18px !important;
    color:var(--read-white) !important;
    font-weight:600 !important;
}

.hero-bottom{
    font-size:12px !important;
    color:var(--read-dim) !important;
}


/* -----------------------------------------
   MAIN SECTION HEADINGS
----------------------------------------- */

.section-heading h2,
.events h2,
.equipment h2,
.training h2,
.work h2,
.quote h2,
.training-title h2{
    font-size:var(--read-section) !important;
    line-height:.95 !important;
    letter-spacing:-.035em !important;
    color:var(--read-white) !important;
}

.section-index{
    font-size:var(--read-label) !important;
    color:var(--read-gold) !important;
    letter-spacing:.09em !important;
    font-weight:700 !important;
}


/* -----------------------------------------
   HEADER / NAV
----------------------------------------- */

.brand{
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    color:var(--read-white) !important;
}

.desktop-nav a{
    font-size:var(--read-nav) !important;
    font-weight:600 !important;
    letter-spacing:.04em !important;
    color:var(--read-soft) !important;
}

.desktop-nav a:hover{
    color:#fff !important;
}

.header-cta{
    font-size:var(--read-button) !important;
    font-weight:700 !important;
}


/* -----------------------------------------
   BUTTONS / LINKS
----------------------------------------- */

.btn,
.text-link,
.service-copy a,
.equipment-info > a{
    font-size:var(--read-button) !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
}

.btn{
    min-height:50px !important;
}


/* -----------------------------------------
   SERVICES
----------------------------------------- */

.service-row strong{
    font-size:22px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    color:var(--read-white) !important;
}

.service-row.is-active strong{
    color:#e2c08a !important;
}

.service-num{
    font-size:var(--read-label) !important;
    color:var(--read-gold) !important;
}

.service-copy h3{
    font-size:31px !important;
    line-height:1.08 !important;
    font-weight:600 !important;
    color:var(--read-white) !important;
}

.service-copy p{
    font-size:15px !important;
    line-height:1.7 !important;
    color:var(--read-muted) !important;
}

.image-tag{
    font-size:10px !important;
    color:#e5c995 !important;
}


/* -----------------------------------------
   EVENTS
----------------------------------------- */

.events-copy p{
    font-size:16px !important;
    color:var(--read-muted) !important;
}

.event-types span{
    font-size:12px !important;
    color:var(--read-soft) !important;
    font-weight:600 !important;
    letter-spacing:.02em !important;
}


/* -----------------------------------------
   EQUIPMENT
----------------------------------------- */

.equipment-head p{
    font-size:16px !important;
    color:var(--read-muted) !important;
}

.equipment-tab{
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.03em !important;
    color:var(--read-dim) !important;
}

.equipment-tab.is-active{
    color:var(--read-white) !important;
}

.equipment-info > span{
    font-size:12px !important;
    font-weight:700 !important;
    color:var(--read-gold) !important;
    letter-spacing:.06em !important;
}

.equipment-info h3{
    font-size:clamp(34px,3vw,48px) !important;
    line-height:1.03 !important;
    font-weight:600 !important;
    color:var(--read-white) !important;
}

.equipment-info p{
    font-size:15px !important;
    line-height:1.68 !important;
    color:var(--read-muted) !important;
}

.equipment-meta span{
    font-size:11px !important;
    font-weight:600 !important;
    color:#d4c2a4 !important;
}

.equipment-strip button{
    font-size:12px !important;
    line-height:1.4 !important;
    font-weight:600 !important;
    color:#b9aea3 !important;
}

.equipment-strip button.is-active{
    color:#fff !important;
}


/* -----------------------------------------
   TRAINING
----------------------------------------- */

.training-title > span{
    font-size:12px !important;
    color:var(--read-gold) !important;
    font-weight:700 !important;
}

.training-intro p{
    font-size:16px !important;
    color:var(--read-muted) !important;
}

.course-list span{
    font-size:12px !important;
    color:var(--read-gold) !important;
}

.course-list strong{
    font-size:22px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    color:var(--read-white) !important;
}


/* -----------------------------------------
   REAL SETUPS / WORK
----------------------------------------- */

.work-item span,
.work-large span{
    font-size:21px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    color:var(--read-white) !important;
}

.work-item span::before{
    font-size:10px !important;
    color:var(--read-gold) !important;
}


/* -----------------------------------------
   FORM
----------------------------------------- */

.field label{
    font-size:12px !important;
    font-weight:700 !important;
    color:var(--read-gold) !important;
    letter-spacing:.04em !important;
}

.field input,
.field select{
    font-size:15px !important;
    color:var(--read-white) !important;
}

.field input::placeholder{
    color:#9f9388 !important;
}


/* -----------------------------------------
   CONTACT
----------------------------------------- */

.contact-panel > div:first-child > span{
    font-size:12px !important;
    font-weight:700 !important;
    color:var(--read-gold) !important;
}

.contact-panel p{
    font-size:15px !important;
    line-height:1.7 !important;
    color:var(--read-muted) !important;
}

.contact-links a{
    font-size:15px !important;
    color:var(--read-soft) !important;
    font-weight:500 !important;
}


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

footer{
    font-size:12px !important;
    color:#a99d92 !important;
}

footer > div:first-child{
    font-size:20px !important;
    color:var(--read-white) !important;
}

footer > div:nth-child(2){
    font-size:11px !important;
    color:var(--read-gold) !important;
}


/* -----------------------------------------
   LARGE DESKTOP CONTROL
----------------------------------------- */

@media(min-width:1600px){

    .hero h1{
        font-size:94px !important;
    }

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:68px !important;
    }

    .equipment-strip button{
        font-size:13px !important;
    }

}


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

@media(max-width:1000px){

    .hero h1{
        font-size:clamp(56px,9vw,80px) !important;
    }

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:clamp(40px,7vw,58px) !important;
    }

}


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

@media(max-width:650px){

    body{
        font-size:15px !important;
    }

    p{
        font-size:15px !important;
    }

    .hero h1{
        font-size:clamp(46px,13vw,62px) !important;
        line-height:.93 !important;
    }

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

    .section-heading h2,
    .events h2,
    .equipment h2,
    .training h2,
    .work h2,
    .quote h2,
    .training-title h2{
        font-size:clamp(36px,10vw,50px) !important;
    }

    .service-row strong{
        font-size:18px !important;
    }

    .service-copy h3{
        font-size:25px !important;
    }

    .equipment-info h3{
        font-size:30px !important;
    }

    .equipment-strip button{
        font-size:12px !important;
    }

    .course-list strong{
        font-size:18px !important;
    }

}


/* =========================================================
   INTERACTIVE EVENT EXPERIENCE
========================================================= */

.events-interactive{
    padding:
        clamp(85px,8vw,135px)
        var(--gutter) !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(380px,.72fr) !important;

    gap:22px !important;

    min-height:auto !important;

    align-items:stretch;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(197,160,89,.055),
            transparent 25%
        ),
        #0d0c0b !important;
}



/* ================================
   VIDEO CARD
================================ */

.event-player{
    min-width:0;
}


.event-video-frame{
    position:relative;

    width:100%;
    height:100%;

    min-height:620px;

    overflow:hidden;

    border:
        1px solid rgba(169,138,92,.28);

    border-radius:22px;

    background:#11100e;

    box-shadow:
        0 20px 55px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025);
}


.event-video-frame::before{
    content:"";

    position:absolute;

    inset:12px;

    z-index:4;

    border:
        1px solid rgba(169,138,92,.10);

    border-radius:15px;

    pointer-events:none;
}


.event-video-frame video{
    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        saturate(.88)
        contrast(1.05)
        brightness(.91);

    transform:scale(1.015);

    transition:
        opacity .35s ease,
        transform 1.2s var(--ease),
        filter .45s ease;
}


.event-video-frame:hover video{
    transform:scale(1.045);

    filter:
        saturate(.96)
        contrast(1.06)
        brightness(.96);
}


.event-video-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(8,7,6,.42) 0%,
            transparent 35%,
            transparent 58%,
            rgba(8,7,6,.78) 100%
        );

    pointer-events:none;
}


.event-video-top{
    position:absolute;

    top:28px;
    left:30px;
    right:30px;

    z-index:5;

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

    color:#d2b57f;

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

    letter-spacing:.11em;
}


.event-video-bottom{
    position:absolute;

    z-index:5;

    left:30px;
    right:30px;
    bottom:29px;
}


.event-video-label{
    display:block;

    margin-bottom:8px;

    color:#c6aa76;

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

    letter-spacing:.12em;
}


.event-video-bottom strong{
    display:block;

    max-width:560px;

    font-family:var(--syne);

    font-size:
        clamp(28px,3vw,48px);

    font-weight:600;

    line-height:1;

    color:#f4ede5;
}



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

.event-content-card{
    position:relative;

    padding:
        clamp(26px,2.8vw,40px);

    border:
        1px solid rgba(169,138,92,.28);

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(169,138,92,.055),
            rgba(255,255,255,.008) 47%,
            rgba(255,255,255,.004)
        ),
        rgba(18,17,15,.91);

    box-shadow:
        0 20px 55px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter:blur(12px);

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


.event-content-card::before{
    content:"";

    position:absolute;

    top:0;
    left:30px;

    width:75px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            transparent
        );
}


.event-content-head h2{
    font-size:
        clamp(42px,4vw,67px) !important;

    margin-bottom:18px !important;
}


.event-content-head p{
    margin:
        0 0 28px;

    max-width:520px;

    font-size:15px !important;

    line-height:1.68 !important;

    color:#b9aea3 !important;

    min-height:76px;
}



/* ================================
   CLICKABLE CONTENT CARDS
================================ */

.event-selector{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.event-choice{
    position:relative;

    width:100%;

    min-height:76px;

    padding:
        12px 14px;

    display:grid;

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

    gap:10px;

    align-items:center;

    border:
        1px solid rgba(169,138,92,.15);

    border-radius:14px;

    background:
        rgba(15,14,12,.54);

    color:#d3c8bd;

    text-align:left;

    cursor:pointer;

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


.event-choice > span{
    font-size:11px;

    color:#a68e66;

    font-weight:700;
}


.event-choice strong{
    display:block;

    margin-bottom:3px;

    font-family:var(--syne);

    font-size:15px;

    line-height:1.15;

    color:#e7ded4;
}


.event-choice small{
    display:block;

    color:#998e84;

    font-size:12px;

    line-height:1.25;
}


.event-choice i{
    font-style:normal;

    color:#a78d64;

    font-size:14px;

    transition:
        transform .3s ease;
}


.event-choice:hover{
    transform:
        translateX(4px);

    border-color:
        rgba(169,138,92,.38);

    background:
        rgba(169,138,92,.035);
}


.event-choice:hover i{
    transform:
        translate(2px,-2px);
}


.event-choice.is-active{
    border-color:
        rgba(169,138,92,.55);

    background:
        linear-gradient(
            90deg,
            rgba(169,138,92,.10),
            rgba(169,138,92,.018)
        );

    box-shadow:
        inset 3px 0 0 var(--orange),
        0 7px 18px rgba(0,0,0,.10);
}


.event-choice.is-active strong{
    color:#f4eade;
}


.event-choice.is-active > span{
    color:#e0bd84;
}



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

.event-card-footer{
    margin-top:25px;

    padding-top:22px;

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

    gap:20px;

    border-top:
        1px solid rgba(169,138,92,.14);
}


.event-card-footer > span{
    color:#81766d;

    font-size:11px;

    letter-spacing:.09em;
}



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

@media(max-width:1050px){

    .events-interactive{
        grid-template-columns:1fr !important;
    }

    .event-video-frame{
        min-height:570px;
    }

}



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

@media(max-width:650px){

    .events-interactive{
        padding:
            80px 18px !important;

        gap:14px !important;
    }

    .event-video-frame{
        min-height:500px;

        border-radius:18px;
    }

    .event-video-top{
        top:20px;
        left:20px;
        right:20px;
    }

    .event-video-bottom{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .event-content-card{
        padding:
            24px 18px;

        border-radius:18px;
    }

    .event-choice{
        min-height:74px;

        grid-template-columns:
            28px 1fr 20px;
    }

    .event-choice strong{
        font-size:14px;
    }

    .event-choice small{
        font-size:11px;
    }

    .event-card-footer{
        flex-direction:column;

        align-items:stretch;
    }

    .event-card-footer .btn{
        width:100%;
    }

}

/* video 02 edge cleanup / tighter event crop */

.event-video-frame video{
    object-fit:cover !important;
    transform:scale(1.035);
}

/* slightly stronger overscan so social-video edges never show */
.event-video-frame:hover video{
    transform:scale(1.055);
}


/* =========================================================
   HERO 3D DEPTH V2
   Layout stays locked
========================================================= */

.hero{
    perspective:1600px;
    transform-style:preserve-3d;
    isolation:isolate;
}


/* video sits further back */

.hero-video{
    transform:
        translate3d(
            calc(var(--hero-x, 0px) * -.20),
            calc(var(--hero-y, 0px) * -.15),
            -55px
        )
        scale(1.06);

    transform-origin:center;

    transition:
        transform .35s ease-out;
}


/* extra cinematic depth layer */

.hero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 24% 42%,
            rgba(197,160,89,.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 78% 28%,
            rgba(230,90,21,.055),
            transparent 28%
        );

    transform:
        translate3d(
            calc(var(--hero-x, 0px) * .15),
            calc(var(--hero-y, 0px) * .12),
            -10px
        );

    transition:
        transform .4s ease-out;
}


/* large ghost typography further back */

.hero-ghost{
    transform:
        translate(-50%,-50%)
        translate3d(
            calc(var(--hero-x, 0px) * -.10),
            calc(var(--hero-y, 0px) * -.08),
            -35px
        );

    text-shadow:
        0 30px 90px rgba(0,0,0,.35);

    transition:
        transform .35s ease-out;
}


/* main copy comes forward */

.hero-main{
    position:relative;

    transform:
        translate3d(
            calc(var(--hero-x, 0px) * .16),
            calc(var(--hero-y, 0px) * .10),
            40px
        );

    transform-style:preserve-3d;

    transition:
        transform .32s ease-out;
}


/* headline depth */

.hero h1{
    text-shadow:
        0 4px 0 rgba(255,255,255,.018),
        0 16px 28px rgba(0,0,0,.24),
        0 38px 80px rgba(0,0,0,.34);

    transform:
        translateZ(38px);

    transform-style:preserve-3d;
}


/* orange FOR slightly more forward */

.hero h1 span{
    display:inline-block;

    transform:
        translateZ(24px);

    text-shadow:
        0 14px 30px rgba(230,90,21,.18);
}


/* hero paragraph slightly behind heading */

.hero-main p{
    transform:
        translateZ(18px);
}


/* buttons foreground */

.hero-actions{
    transform:
        translateZ(32px);
}


/* side service panel depth */

.hero-side{
    position:relative;

    transform:
        translate3d(
            calc(var(--hero-x, 0px) * -.10),
            calc(var(--hero-y, 0px) * -.06),
            24px
        );

    transition:
        transform .35s ease-out;
}


/* service rows become subtle glass layers */

.hero-service{
    position:relative;

    padding-left:12px;
    padding-right:12px;

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

.hero-service:hover{
    transform:
        translateX(6px)
        translateZ(16px);

    background:
        linear-gradient(
            90deg,
            rgba(197,160,89,.07),
            transparent
        );

    border-top-color:
        rgba(197,160,89,.28);
}


/* buttons more dimensional */

.hero .btn,
.hero .text-link{
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.hero .btn:hover{
    transform:
        translateY(-4px)
        translateZ(12px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.32),
        0 8px 22px rgba(230,90,21,.18);
}

.hero .text-link:hover{
    transform:
        translateY(-2px)
        translateZ(8px);
}


/* bottom line closer */

.hero-bottom{
    transform:
        translate3d(
            calc(var(--hero-x, 0px) * .06),
            calc(var(--hero-y, 0px) * .04),
            12px
        );

    transition:
        transform .35s ease-out;
}


/* slight foreground vignette */

.hero::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:20;

    pointer-events:none;

    box-shadow:
        inset 0 -110px 120px rgba(0,0,0,.20),
        inset 0 0 140px rgba(0,0,0,.14);
}


/* desktop only full parallax */

@media(max-width:1000px){

    .hero-video,
    .hero-main,
    .hero-side,
    .hero-bottom,
    .hero-ghost{
        transform:none !important;
    }

    .hero-ghost{
        transform:translate(-50%,-50%) !important;
    }

}


/* accessibility */

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

    .hero-video,
    .hero-main,
    .hero-side,
    .hero-bottom,
    .hero-ghost{
        transform:none !important;
        transition:none !important;
    }

}

/* =========================================================
   REAL EQUIPMENT CATALOGUE
   13 machines / 9 grinders
========================================================= */

.equipment-strip{
    display:flex !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:14px 2px 18px !important;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:rgba(210,178,124,.4) transparent;
}

.equipment-strip::-webkit-scrollbar{
    height:5px;
}

.equipment-strip::-webkit-scrollbar-track{
    background:transparent;
}

.equipment-strip::-webkit-scrollbar-thumb{
    background:rgba(210,178,124,.38);
    border-radius:99px;
}

.equipment-strip button{
    flex:0 0 auto !important;
    min-width:190px !important;
    max-width:230px !important;
    min-height:58px !important;
    padding:12px 16px !important;

    border:1px solid rgba(210,178,124,.18) !important;
    border-radius:14px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.01)
        ) !important;

    color:rgba(246,240,232,.74) !important;

    font-size:12px !important;
    line-height:1.35 !important;
    letter-spacing:.02em !important;

    text-align:left !important;
    white-space:normal !important;

    scroll-snap-align:start;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease !important;
}

.equipment-strip button:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(210,178,124,.48) !important;
    color:#f6f0e8 !important;
}

.equipment-strip button.is-active{
    border-color:rgba(230,90,21,.75) !important;

    background:
        linear-gradient(
            145deg,
            rgba(230,90,21,.13),
            rgba(210,178,124,.055)
        ) !important;

    color:#fff !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.22),
        inset 3px 0 0 rgba(230,90,21,.9);
}


/* real equipment image presentation */

.equipment-object{
    position:relative;
    overflow:hidden !important;
    border-radius:22px !important;
    border:1px solid rgba(210,178,124,.24) !important;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(210,178,124,.09),
            rgba(16,14,13,.92) 58%
        ) !important;
}

.equipment-object img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center !important;

    padding:24px !important;

    transform:none !important;

    filter:
        drop-shadow(0 26px 34px rgba(0,0,0,.30));

    transition:
        opacity .25s ease,
        transform .4s cubic-bezier(.2,.7,.2,1) !important;
}

.equipment-object:hover img{
    transform:scale(1.025) !important;
}


/* grinder portraits need breathing room */

@media(min-width:900px){

    .equipment-object{
        min-height:590px !important;
    }

}


/* mobile catalogue */

@media(max-width:700px){

    .equipment-strip button{
        min-width:170px !important;
        max-width:190px !important;
    }

    .equipment-object{
        min-height:430px !important;
    }

    .equipment-object img{
        padding:18px !important;
    }

}

/* =========================================================
   FINAL EQUIPMENT SELECTOR FIX
========================================================= */

.equipment-selector{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;

    min-width:210px !important;
    min-height:64px !important;
}

.equipment-selector-number{
    flex:0 0 auto;

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

    color:#d2b27c;

    opacity:.8;
}

.equipment-selector-name{
    display:block;

    font-size:12px;
    line-height:1.3;

    color:inherit;

    white-space:normal;
}

.equipment-selector.is-active
.equipment-selector-number{
    color:#e65a15;
}


/* machine images */

.equipment-object.is-machine img{
    object-fit:contain !important;
    object-position:center !important;
}


/* grinder images are portrait */

.equipment-object.is-grinder img{
    object-fit:contain !important;
    object-position:center !important;

    padding:28px !important;
}


@media(max-width:700px){

    .equipment-selector{
        min-width:180px !important;
    }

    .equipment-object.is-grinder img{
        padding:18px !important;
    }

}

/* =========================================================
   EQUIPMENT CATALOGUE CTA
========================================================= */

.equipment-strip[hidden]{
    display:none !important;
}

.equipment-catalogue-cta{
    width:min(1540px,calc(100% - 40px));
    margin:22px auto 0;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.equipment-catalogue-link{
    min-height:110px;

    padding:22px 24px;

    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:5px 20px;

    text-decoration:none;

    border:1px solid rgba(210,178,124,.22);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.16);

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

.equipment-catalogue-link > span:first-child{
    grid-column:1;

    font-size:11px;
    letter-spacing:.14em;

    color:#d2b27c;
}

.equipment-catalogue-link strong{
    grid-column:1;

    font-family:'Syne',sans-serif;
    font-size:22px;
    line-height:1.05;

    color:#f6f0e8;
}

.equipment-catalogue-arrow{
    grid-column:2;
    grid-row:1 / 3;

    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border:1px solid rgba(210,178,124,.30);
    border-radius:50%;

    color:#e65a15;

    font-size:18px;
}

.equipment-catalogue-link:hover{
    transform:translateY(-4px);

    border-color:rgba(230,90,21,.55);

    background:
        linear-gradient(
            145deg,
            rgba(230,90,21,.08),
            rgba(210,178,124,.03)
        );
}

@media(max-width:700px){

    .equipment-catalogue-cta{
        width:calc(100% - 28px);
        grid-template-columns:1fr;
    }

    .equipment-catalogue-link{
        min-height:96px;
    }

}

/* =========================================================
   REMOVE OLD HOMEPAGE EQUIPMENT SELECTOR
========================================================= */

#equipmentStrip,
#equipmentStrip.equipment-strip,
.equipment-section #equipmentStrip{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}


/* =========================================================
   PREMIUM FLOATING HEADER
========================================================= */

.site-header{
    position:fixed;
    top:18px;
    left:50%;
    transform:translateX(-50%);

    width:min(1540px,calc(100% - 40px));
    min-height:74px;

    padding:10px 12px 10px 14px;

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

    z-index:1000;

    border:1px solid rgba(210,178,124,.16);
    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(20,18,16,.72),
            rgba(15,14,13,.60)
        );

    backdrop-filter:blur(20px) saturate(120%);
    -webkit-backdrop-filter:blur(20px) saturate(120%);

    box-shadow:
        0 18px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.03);

    transition:
        top .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.site-header.scrolled{
    top:10px;

    background:
        linear-gradient(
            180deg,
            rgba(16,14,13,.92),
            rgba(13,12,11,.86)
        );

    border-color:rgba(210,178,124,.22);

    box-shadow:
        0 20px 60px rgba(0,0,0,.34);
}


/* BRAND */

.site-header .brand{
    display:flex;
    align-items:center;
    gap:11px;

    min-width:max-content;

    text-decoration:none;
}

.site-header .brand img{
    width:48px;
    height:48px;

    object-fit:cover;
    border-radius:50%;

    border:1px solid rgba(210,178,124,.38);

    box-shadow:
        0 8px 22px rgba(0,0,0,.25);

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.site-header .brand:hover img{
    transform:rotate(-4deg) scale(1.04);
    border-color:rgba(230,90,21,.7);
}

.site-header .brand span{
    font-size:11px;
    line-height:1;

    letter-spacing:.14em;
    font-weight:700;

    color:#f4eee7;

    white-space:nowrap;
}


/* NAV CAPSULE */

.desktop-nav{
    justify-self:center;

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

    padding:5px;

    border:1px solid rgba(210,178,124,.10);
    border-radius:999px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02);
}

.desktop-nav a{
    position:relative;

    padding:11px 15px;

    border-radius:999px;

    color:rgba(245,238,229,.72);

    text-decoration:none;

    font-size:12px;
    line-height:1;

    font-weight:600;
    letter-spacing:.025em;

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

.desktop-nav a::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:6px;

    width:0;
    height:1px;

    transform:translateX(-50%);

    background:#e65a15;

    transition:width .25s ease;
}

.desktop-nav a:hover{
    color:#fff;

    background:
        linear-gradient(
            180deg,
            rgba(210,178,124,.08),
            rgba(255,255,255,.02)
        );

    transform:translateY(-1px);
}

.desktop-nav a:hover::after{
    width:24px;
}


/* HEADER CTA */

.header-cta{
    min-height:50px;

    padding:0 18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    border:1px solid rgba(230,90,21,.68);
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #e65a15,
            #c94a0e
        );

    color:#fff;

    text-decoration:none;

    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;

    box-shadow:
        0 10px 26px rgba(230,90,21,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.header-cta span{
    width:24px;
    height:24px;

    display:grid;
    place-items:center;

    border-radius:50%;

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

    transition:transform .25s ease;
}

.header-cta:hover{
    transform:translateY(-2px);

    box-shadow:
        0 16px 34px rgba(230,90,21,.26);
}

.header-cta:hover span{
    transform:translate(2px,-2px);
}


/* MOBILE MENU BUTTON */

.menu-btn{
    display:none;

    width:48px;
    height:48px;

    border:1px solid rgba(210,178,124,.2);
    border-radius:50%;

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

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
}

.menu-btn span{
    width:18px;
    height:1px;

    background:#f5eee5;
}


/* TABLET */

@media(max-width:1180px){

    .desktop-nav{
        gap:0;
    }

    .desktop-nav a{
        padding:10px 11px;
        font-size:11px;
    }

    .site-header .brand span{
        display:none;
    }

}


/* MOBILE */

@media(max-width:850px){

    .site-header{
        top:10px;

        width:calc(100% - 20px);

        min-height:66px;

        grid-template-columns:auto 1fr auto;

        padding:8px 9px;
    }

    .desktop-nav{
        display:none;
    }

    .site-header .brand img{
        width:46px;
        height:46px;
    }

    .site-header .brand span{
        display:block;

        font-size:10px;
        letter-spacing:.11em;
    }

    .header-cta{
        display:none;
    }

    .menu-btn{
        display:flex;
        justify-self:end;
    }

}

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

.site-footer{
    position:relative;

    margin-top:0;

    padding:90px 0 28px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(230,90,21,.07),
            transparent 27%
        ),
        radial-gradient(
            circle at 15% 70%,
            rgba(210,178,124,.055),
            transparent 28%
        ),
        #0c0b0a;

    border-top:1px solid rgba(210,178,124,.16);
}


/* huge background word */

.footer-ghost{
    position:absolute;

    left:50%;
    bottom:-45px;

    transform:translateX(-50%);

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

    font-size:clamp(130px,22vw,390px);
    font-weight:700;
    line-height:.75;

    letter-spacing:-.075em;

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

    white-space:nowrap;

    pointer-events:none;
    user-select:none;
}


/* main container */

.footer-inner{
    position:relative;
    z-index:2;

    width:min(1540px,calc(100% - 48px));
    margin:auto;
}


/* main grid */

.footer-main{
    display:grid;

    grid-template-columns:
        minmax(320px,1.6fr)
        .65fr
        1fr
        .9fr;

    gap:70px;

    padding-bottom:72px;
}


/* brand */

.footer-brand{
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-bottom:34px;

    text-decoration:none;
}

.footer-brand img{
    width:54px;
    height:54px;

    object-fit:cover;

    border-radius:50%;

    border:1px solid rgba(210,178,124,.34);

    box-shadow:
        0 10px 30px rgba(0,0,0,.28);
}

.footer-brand span{
    color:#f5eee5;

    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
}


.footer-brand-block h2{
    margin:0;

    max-width:620px;

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

    font-size:clamp(42px,4.3vw,74px);
    line-height:.91;

    letter-spacing:-.05em;

    color:#f5eee5;
}

.footer-brand-block h2 em{
    display:inline-block;

    color:#e65a15;
    font-style:normal;
}

.footer-brand-block p{
    max-width:500px;

    margin:26px 0 0;

    color:#b9aca0;

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


/* labels */

.footer-label{
    display:block;

    margin-bottom:22px;

    color:#d2b27c;

    font-size:10px;
    font-weight:700;
    letter-spacing:.17em;
}


/* navigation */

.footer-links,
.footer-contact,
.footer-action{
    padding-top:14px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-links a{
    position:relative;

    margin-bottom:13px;

    color:#e8ded4;

    text-decoration:none;

    font-size:14px;

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

.footer-links a:hover{
    color:#e65a15;

    transform:translateX(4px);
}


/* contact */

.footer-contact a{
    display:block;

    margin-bottom:10px;

    color:#f0e7dd;

    text-decoration:none;

    font-size:14px;

    transition:color .25s ease;
}

.footer-contact a:hover{
    color:#e65a15;
}

.footer-contact p{
    margin:22px 0 0;

    color:#a99d92;

    font-size:13px;
    line-height:1.65;
}


/* whatsapp card */

.footer-whatsapp{
    min-height:102px;

    padding:18px 18px 18px 20px;

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

    border:1px solid rgba(210,178,124,.22);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    color:#fff;

    text-decoration:none;

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

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

.footer-whatsapp > span{
    display:flex;
    flex-direction:column;
    gap:5px;

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

    font-size:18px;
    line-height:1.1;
}

.footer-whatsapp small{
    font-family:'Hanken Grotesk',sans-serif;

    color:#a99d92;

    font-size:11px;
    font-weight:500;
}

.footer-whatsapp b{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:50%;

    background:#e65a15;

    color:#fff;

    font-size:16px;

    transition:transform .3s ease;
}

.footer-whatsapp:hover{
    transform:translateY(-4px);

    border-color:rgba(230,90,21,.55);

    background:
        linear-gradient(
            145deg,
            rgba(230,90,21,.085),
            rgba(255,255,255,.018)
        );
}

.footer-whatsapp:hover b{
    transform:translate(2px,-2px);
}


/* bottom line */

.footer-bottom{
    min-height:68px;

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

    border-top:1px solid rgba(210,178,124,.14);

    color:#857a70;

    font-size:11px;
}

.footer-bottom span:nth-child(2){
    text-align:center;
}

.footer-bottom a{
    justify-self:end;

    color:#d2b27c;

    text-decoration:none;

    transition:color .25s ease;
}

.footer-bottom a:hover{
    color:#e65a15;
}


/* responsive */

@media(max-width:1100px){

    .footer-main{
        grid-template-columns:1.4fr 1fr;
        gap:50px 70px;
    }

}


@media(max-width:700px){

    .site-footer{
        padding-top:65px;
    }

    .footer-inner{
        width:calc(100% - 28px);
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:38px;

        padding-bottom:50px;
    }

    .footer-brand-block h2{
        font-size:clamp(42px,13vw,62px);
    }

    .footer-links,
    .footer-contact,
    .footer-action{
        padding-top:0;
    }

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

        padding:22px 0;

        gap:12px;
    }

    .footer-bottom span:nth-child(2){
        text-align:left;
    }

    .footer-bottom a{
        justify-self:start;
    }

    .footer-ghost{
        bottom:20px;
        font-size:40vw;
    }

}

/* =========================================================
   FOOTER V2 — COMPACT PREMIUM
========================================================= */

.footer-v2{
    position:relative !important;
    overflow:hidden !important;

    padding:0 !important;
    margin:0 !important;

    background:#0d0c0b !important;

    border-top:
        1px solid rgba(210,178,124,.16) !important;
}


/* kill previous oversized footer elements */

.footer-v2 .footer-ghost,
.footer-v2 .footer-main,
.footer-v2 .footer-inner{
    display:none !important;
}


.footer-v2-inner{
    display:block !important;

    width:min(1540px,calc(100% - 48px)) !important;
    margin:0 auto !important;
}


/* TOP GRID */

.footer-v2-top{
    display:grid !important;

    grid-template-columns:
        minmax(300px,1.45fr)
        .72fr
        1.08fr
        .9fr !important;

    gap:54px !important;

    padding:66px 0 58px !important;

    align-items:start !important;
}


/* BRAND */

.footer-v2-logo{
    display:inline-flex !important;
    align-items:center !important;
    gap:13px !important;

    text-decoration:none !important;
}

.footer-v2-logo img{
    width:54px !important;
    height:54px !important;

    border-radius:50% !important;
    object-fit:cover !important;

    border:
        1px solid rgba(210,178,124,.34) !important;
}

.footer-v2-logo div{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
}

.footer-v2-logo strong{
    color:#f5eee5 !important;

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

.footer-v2-logo span{
    color:#9d9186 !important;

    font-size:10px !important;
    letter-spacing:.08em !important;
}


.footer-v2-brand p{
    max-width:410px !important;

    margin:24px 0 0 !important;

    color:#b9aca0 !important;

    font-size:14px !important;
    line-height:1.65 !important;
}


/* LABELS */

.footer-v2-label{
    display:block !important;

    margin-bottom:20px !important;

    color:#d2b27c !important;

    font-size:10px !important;
    font-weight:700 !important;

    letter-spacing:.16em !important;
}


/* NAV */

.footer-v2-links{
    display:flex !important;
    flex-direction:column !important;
    gap:11px !important;
}

.footer-v2-links a{
    width:max-content !important;

    color:#ded5cc !important;

    text-decoration:none !important;

    font-size:13px !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

.footer-v2-links a:hover{
    color:#e65a15 !important;
    transform:translateX(4px) !important;
}


/* CONTACT */

.footer-v2-contact > a{
    display:block !important;

    margin-bottom:9px !important;

    color:#eee5dc !important;

    text-decoration:none !important;

    font-size:13px !important;
}

.footer-v2-contact p{
    margin:19px 0 0 !important;

    color:#9f9388 !important;

    font-size:12px !important;
    line-height:1.7 !important;
}


/* ACTION */

.footer-v2-whatsapp{
    min-height:82px !important;

    padding:15px 16px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;

    text-decoration:none !important;

    border:
        1px solid rgba(210,178,124,.22) !important;

    border-radius:16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.01)
        ) !important;

    transition:
        transform .25s ease,
        border-color .25s ease !important;
}

.footer-v2-whatsapp div{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
}

.footer-v2-whatsapp div span{
    color:#9d9186 !important;

    font-size:10px !important;
    letter-spacing:.08em !important;
}

.footer-v2-whatsapp div strong{
    color:#fff !important;

    font-family:'Syne',sans-serif !important;

    font-size:15px !important;
}

.footer-v2-whatsapp b{
    width:38px !important;
    height:38px !important;

    flex:0 0 auto !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    background:#e65a15 !important;

    color:#fff !important;
}

.footer-v2-whatsapp:hover{
    transform:translateY(-3px) !important;

    border-color:
        rgba(230,90,21,.55) !important;
}


.footer-v2-quote{
    margin-top:10px !important;

    min-height:45px !important;

    padding:0 14px !important;

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

    color:#d2b27c !important;

    text-decoration:none !important;

    font-size:12px !important;

    border-bottom:
        1px solid rgba(210,178,124,.16) !important;
}


/* BOTTOM */

.footer-v2-bottom{
    min-height:66px !important;

    display:grid !important;

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

    align-items:center !important;

    gap:20px !important;

    border-top:
        1px solid rgba(210,178,124,.12) !important;

    color:#766c63 !important;

    font-size:10px !important;

    letter-spacing:.04em !important;
}

.footer-v2-bottom span:nth-child(2){
    text-align:center !important;
}

.footer-v2-bottom a{
    justify-self:end !important;

    color:#bda06f !important;

    text-decoration:none !important;
}


/* TABLET */

@media(max-width:1050px){

    .footer-v2-top{
        grid-template-columns:
            1.25fr 1fr !important;

        gap:46px 60px !important;
    }

}


/* MOBILE */

@media(max-width:650px){

    .footer-v2-inner{
        width:calc(100% - 28px) !important;
    }

    .footer-v2-top{
        grid-template-columns:1fr !important;

        gap:36px !important;

        padding:52px 0 42px !important;
    }

    .footer-v2-bottom{
        grid-template-columns:1fr !important;

        gap:10px !important;

        padding:20px 0 !important;
    }

    .footer-v2-bottom span:nth-child(2){
        text-align:left !important;
    }

    .footer-v2-bottom a{
        justify-self:start !important;
    }

}

/* =========================================================
   FINAL ISOLATED FOOTER
========================================================= */

.iconic-footer-final{
    position:relative !important;
    display:block !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#0b0a09 !important;

    border-top:
        1px solid rgba(210,178,124,.17) !important;

    color:#f5eee5 !important;
}


/* kill any inherited ghost/pseudo artwork */

.iconic-footer-final::before,
.iconic-footer-final::after{
    content:none !important;
    display:none !important;
}


.iff-wrap{
    width:min(1540px,calc(100% - 64px)) !important;
    max-width:1540px !important;

    margin:0 auto !important;
    padding:0 !important;
}


/* MAIN AREA */

.iff-top{
    display:grid !important;

    grid-template-columns:
        minmax(300px,1.35fr)
        minmax(150px,.65fr)
        minmax(260px,1fr)
        minmax(300px,1.1fr) !important;

    gap:70px !important;

    align-items:start !important;

    padding:72px 0 66px !important;
}


/* BRAND */

.iff-brand{
    min-width:0 !important;
}

.iff-logo{
    display:inline-flex !important;
    align-items:center !important;

    gap:14px !important;

    text-decoration:none !important;
}

.iff-logo img{
    display:block !important;

    width:58px !important;
    height:58px !important;

    min-width:58px !important;

    border-radius:50% !important;

    object-fit:cover !important;

    border:
        1px solid rgba(210,178,124,.40) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.28) !important;
}

.iff-logo div{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
}

.iff-logo strong{
    color:#fff !important;

    font-family:'Syne',sans-serif !important;

    font-size:13px !important;
    line-height:1 !important;

    letter-spacing:.10em !important;
}

.iff-logo span{
    color:#a99b8f !important;

    font-size:10px !important;
    line-height:1 !important;

    letter-spacing:.12em !important;
}


.iff-brand > p{
    max-width:390px !important;

    margin:26px 0 0 !important;

    color:#afa398 !important;

    font-size:14px !important;
    line-height:1.7 !important;

    letter-spacing:0 !important;

    text-align:left !important;
}


/* LABEL */

.iff-label{
    display:block !important;

    margin:0 0 22px !important;

    color:#d2b27c !important;

    font-size:10px !important;
    line-height:1 !important;

    font-weight:700 !important;
    letter-spacing:.16em !important;
}


/* EXPLORE + CONTACT */

.iff-column{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

    min-width:0 !important;
}

.iff-column > a{
    display:inline-block !important;

    margin:0 0 12px !important;
    padding:0 !important;

    color:#ddd4cb !important;

    font-size:13px !important;
    line-height:1.35 !important;

    font-weight:500 !important;

    letter-spacing:0 !important;

    text-decoration:none !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

.iff-column > a:hover{
    color:#e65a15 !important;
    transform:translateX(4px) !important;
}


.iff-contact > a{
    color:#f4ece4 !important;
}

.iff-contact p{
    margin:15px 0 0 !important;

    color:#9f9388 !important;

    font-size:12px !important;
    line-height:1.75 !important;

    text-align:left !important;
}


/* ENQUIRY */

.iff-enquiry{
    min-width:0 !important;

    padding:24px !important;

    border:
        1px solid rgba(210,178,124,.19) !important;

    border-radius:20px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.032),
            rgba(255,255,255,.008)
        ) !important;

    box-shadow:
        0 24px 60px rgba(0,0,0,.18) !important;
}

.iff-enquiry h3{
    margin:0 0 24px !important;
    padding:0 !important;

    color:#f5eee5 !important;

    font-family:'Syne',sans-serif !important;

    font-size:24px !important;
    line-height:1.05 !important;

    font-weight:600 !important;

    letter-spacing:-.03em !important;

    text-align:left !important;
}


.iff-whatsapp{
    width:100% !important;
    min-height:52px !important;

    padding:0 10px 0 17px !important;

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

    border-radius:999px !important;

    background:#e65a15 !important;

    color:#fff !important;

    text-decoration:none !important;

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

    letter-spacing:.01em !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.iff-whatsapp span{
    width:34px !important;
    height:34px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    background:rgba(255,255,255,.14) !important;
}

.iff-whatsapp:hover{
    transform:translateY(-2px) !important;

    box-shadow:
        0 14px 32px rgba(230,90,21,.20) !important;
}


.iff-quote{
    display:inline-block !important;

    margin-top:17px !important;

    color:#d2b27c !important;

    text-decoration:none !important;

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

    letter-spacing:.04em !important;
}


/* BOTTOM */

.iff-bottom{
    min-height:72px !important;

    display:grid !important;

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

    align-items:center !important;

    gap:30px !important;

    border-top:
        1px solid rgba(210,178,124,.13) !important;

    color:#766d65 !important;

    font-size:10px !important;
    line-height:1.3 !important;

    letter-spacing:.06em !important;
}

.iff-bottom > div:nth-child(2){
    text-align:center !important;
}

.iff-bottom > a{
    justify-self:end !important;

    color:#bda06f !important;

    text-decoration:none !important;

    font-size:10px !important;
}


/* TABLET */

@media(max-width:1100px){

    .iff-top{
        grid-template-columns:
            1.2fr .8fr !important;

        gap:50px 70px !important;
    }

}


/* MOBILE */

@media(max-width:700px){

    .iff-wrap{
        width:calc(100% - 30px) !important;
    }

    .iff-top{
        grid-template-columns:1fr !important;

        gap:38px !important;

        padding:55px 0 45px !important;
    }

    .iff-brand > p{
        max-width:100% !important;
    }

    .iff-enquiry{
        padding:20px !important;
    }

    .iff-bottom{
        grid-template-columns:1fr !important;

        gap:10px !important;

        padding:21px 0 !important;
    }

    .iff-bottom > div:nth-child(2){
        text-align:left !important;
    }

    .iff-bottom > a{
        justify-self:start !important;
    }

}

/* REMOVE ALL PREVIOUS FOOTER ARTWORK */

.footer-ghost,
.footer-main,
.footer-inner,
.footer-v2-inner,
.footer-v2-top,
.footer-v2-bottom{
    display:none !important;
}


/* =========================================
   FOOTER LOGO ALIGNMENT FIX
========================================= */

.iff-brand{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
}

.iff-logo{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    margin:0 0 22px 0 !important;
    text-align:left !important;
}

.iff-logo img{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    flex:0 0 64px !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:50% !important;
    margin:0 !important;
    position:relative !important;
    top:0 !important;
    left:0 !important;
}

.iff-logo div{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:5px !important;
    margin:0 !important;
    padding:0 !important;
}

.iff-logo strong{
    display:block !important;
    margin:0 !important;
    line-height:1.1 !important;
}

.iff-logo span{
    display:block !important;
    margin:0 !important;
    line-height:1.1 !important;
}

.iff-brand > p{
    margin:0 !important;
    max-width:420px !important;
    text-align:left !important;
}

@media (max-width:700px){
    .iff-logo{
        gap:12px !important;
        margin-bottom:18px !important;
    }

    .iff-logo img{
        width:56px !important;
        height:56px !important;
        min-width:56px !important;
        flex:0 0 56px !important;
    }
}

/* =========================================================
   QUOTE FORM — DARK SELECT + DATE CONTROL FIX
========================================================= */

.quote select,
.quote input[type="date"]{
    width:100% !important;

    background-color:#171513 !important;
    color:#f5eee5 !important;

    border:0 !important;
    border-bottom:1px solid rgba(210,178,124,.28) !important;

    border-radius:0 !important;

    padding:14px 36px 14px 4px !important;

    font-family:'Hanken Grotesk',sans-serif !important;
    font-size:15px !important;
    line-height:1.4 !important;

    outline:none !important;

    color-scheme:dark !important;
}


/* SELECT */

.quote select{
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;

    cursor:pointer !important;

    background-image:
        linear-gradient(45deg, transparent 50%, #d2b27c 50%),
        linear-gradient(135deg, #d2b27c 50%, transparent 50%) !important;

    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50% !important;

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

    background-repeat:no-repeat !important;
}


/* DROPDOWN ITEMS */

.quote select option{
    background:#171513 !important;
    color:#f5eee5 !important;

    font-family:'Hanken Grotesk',sans-serif !important;

    padding:12px !important;
}


/* SELECTED / FOCUS */

.quote select:focus,
.quote input[type="date"]:focus{
    border-bottom-color:#e65a15 !important;
}


/* DATE CALENDAR ICON */

.quote input[type="date"]::-webkit-calendar-picker-indicator{
    filter:
        invert(78%)
        sepia(21%)
        saturate(650%)
        hue-rotate(355deg)
        brightness(95%) !important;

    cursor:pointer !important;

    opacity:.9 !important;
}


/* REMOVE WHITE AUTOFILL BACKGROUND */

.quote input:-webkit-autofill,
.quote input:-webkit-autofill:hover,
.quote input:-webkit-autofill:focus,
.quote select:-webkit-autofill{
    -webkit-text-fill-color:#f5eee5 !important;

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

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


/* =========================================
   SERVICES HEADING ALIGNMENT
   EVERYTHING COFFEE.
========================================= */

.services .section-heading h2{
    display:flex !important;
    align-items:baseline !important;
    flex-wrap:wrap !important;
    gap:.18em !important;

    margin:0 !important;

    font-family:'Syne',sans-serif !important;
    font-size:clamp(48px,5.4vw,82px) !important;
    line-height:.94 !important;

    letter-spacing:-.05em !important;

    color:#f5eee5 !important;
}

.services .section-heading h2 em{
    display:inline-block !important;

    margin:0 !important;
    padding:0 !important;

    font:inherit !important;
    line-height:inherit !important;

    letter-spacing:inherit !important;

    color:#e65a15 !important;
    font-style:normal !important;

    vertical-align:baseline !important;

    transform:none !important;
}


/* desktop: keep both words visually balanced */

@media(min-width:900px){

    .services .section-heading h2{
        white-space:normal !important;
    }

}


/* mobile */

@media(max-width:700px){

    .services .section-heading h2{
        font-size:clamp(42px,13vw,62px) !important;
        line-height:.96 !important;
        gap:.12em !important;
    }

}

/* =========================================================
   SERVICES TYPOGRAPHY — FINAL BALANCE
========================================================= */

/* section heading wrapper */
.services .section-heading{
    align-items:end !important;
}


/* EVERYTHING COFFEE */
.services .section-heading h2{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

    gap:0 !important;

    margin:0 !important;

    font-family:'Syne',sans-serif !important;

    font-size:clamp(46px,4.4vw,70px) !important;
    line-height:.92 !important;

    font-weight:600 !important;

    letter-spacing:-.045em !important;

    color:#f5eee5 !important;
}

.services .section-heading h2 em{
    display:block !important;

    margin:4px 0 0 !important;

    font:inherit !important;
    line-height:.92 !important;

    color:#e65a15 !important;

    font-style:normal !important;

    letter-spacing:-.045em !important;
}


/* 01 / SERVICES */
.services .section-index{
    font-size:11px !important;
    line-height:1 !important;

    font-weight:700 !important;

    letter-spacing:.10em !important;

    color:#d2b27c !important;
}


/* description */
.services .section-heading > p{
    max-width:700px !important;

    font-size:15px !important;
    line-height:1.65 !important;

    color:#c1b7ae !important;

    letter-spacing:0 !important;
}


/* service row titles */
.services .service-item strong,
.services .service-row strong,
.services .service-list strong{
    font-family:'Syne',sans-serif !important;

    font-size:20px !important;
    line-height:1.15 !important;

    font-weight:600 !important;

    letter-spacing:-.02em !important;
}


/* service numbers */
.services .service-item > span:first-child,
.services .service-row > span:first-child{
    font-size:11px !important;
    line-height:1 !important;

    font-weight:700 !important;

    color:#d2b27c !important;
}


/* desktop refinement */
@media(min-width:1200px){

    .services .section-heading h2{
        font-size:64px !important;
    }

}


/* mobile */
@media(max-width:700px){

    .services .section-heading h2{
        font-size:clamp(42px,12vw,58px) !important;
        line-height:.94 !important;
    }

    .services .section-heading > p{
        font-size:14px !important;
    }

    .services .service-item strong,
    .services .service-row strong,
    .services .service-list strong{
        font-size:18px !important;
    }

}

/* =========================================================
   OUR WORK — VISUAL GALLERY
========================================================= */

.work-gallery-section{
    position:relative;
    padding:110px 0 105px !important;
    overflow:hidden;
}


/* heading */

.work-gallery-head{
    width:min(1540px,calc(100% - 48px));
    margin:0 auto 52px;

    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:60px;
    align-items:end;
}

.work-gallery-head h2{
    margin:14px 0 0;

    font-family:'Syne',sans-serif;
    font-size:clamp(52px,5.4vw,82px);
    line-height:.9;

    font-weight:600;
    letter-spacing:-.055em;

    color:#f5eee5;
}

.work-gallery-head h2 em{
    color:#e65a15;
    font-style:normal;
}

.work-gallery-head > p{
    max-width:460px;
    margin:0;

    color:#b9aca0;

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


/* gallery */

.work-gallery{
    width:min(1540px,calc(100% - 48px));
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:250px;

    gap:14px;
}


/* image item */

.work-gallery-item{
    position:relative;

    width:100%;
    height:100%;

    padding:0;
    margin:0;

    overflow:hidden;

    border:1px solid rgba(210,178,124,.17);
    border-radius:18px;

    background:#151311;

    cursor:pointer;

    appearance:none;

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

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

.work-gallery-item::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

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

    opacity:.4;

    transition:opacity .35s ease;
}

.work-gallery-item img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transform:scale(1.001);

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


/* asymmetric sizes */

.work-gallery-wide{
    grid-column:span 2;
}

.work-gallery-tall{
    grid-row:span 2;
}


/* hover */

.work-gallery-item:hover{
    transform:translateY(-5px);

    border-color:rgba(210,178,124,.46);

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

.work-gallery-item:hover img{
    transform:scale(1.045);
}

.work-gallery-item:hover::after{
    opacity:.7;
}


/* footer */

.work-gallery-footer{
    width:min(1540px,calc(100% - 48px));

    margin:24px auto 0;

    padding-top:20px;

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

    border-top:1px solid rgba(210,178,124,.15);
}

.work-gallery-footer > span{
    color:#84796f;

    font-size:10px;
    letter-spacing:.13em;
}

.work-gallery-cta{
    min-height:50px;

    padding:0 10px 0 18px;

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

    border:1px solid rgba(210,178,124,.24);
    border-radius:999px;

    color:#f5eee5;

    text-decoration:none;

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

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

.work-gallery-cta b{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#e65a15;

    color:#fff;
}

.work-gallery-cta:hover{
    transform:translateY(-3px);

    border-color:rgba(230,90,21,.55);

    background:rgba(230,90,21,.05);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.work-lightbox{
    position:fixed;
    inset:0;

    z-index:5000;

    padding:40px;

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

    background:rgba(5,5,5,.92);

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

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.work-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.work-lightbox img{
    max-width:min(1400px,92vw);
    max-height:88vh;

    display:block;

    object-fit:contain;

    border-radius:18px;

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

.work-lightbox-close{
    position:absolute;

    top:25px;
    right:30px;

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border:1px solid rgba(210,178,124,.28);
    border-radius:50%;

    background:rgba(20,18,16,.8);

    color:#fff;

    font-size:27px;
    line-height:1;

    cursor:pointer;
}


/* responsive */

@media(max-width:1050px){

    .work-gallery{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:260px;
    }

    .work-gallery-head{
        grid-template-columns:1fr;
        gap:20px;
    }

}


@media(max-width:650px){

    .work-gallery-section{
        padding:75px 0 !important;
    }

    .work-gallery-head,
    .work-gallery,
    .work-gallery-footer{
        width:calc(100% - 28px);
    }

    .work-gallery{
        grid-template-columns:1fr;
        grid-auto-rows:290px;
        gap:12px;
    }

    .work-gallery-wide,
    .work-gallery-tall{
        grid-column:span 1;
        grid-row:span 1;
    }

    .work-gallery-item:nth-child(1),
    .work-gallery-item:nth-child(5){
        min-height:390px;
    }

    .work-gallery-footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .work-lightbox{
        padding:16px;
    }

}

/* =========================================================
   OUR WORK — TRUE MASONRY FIX
========================================================= */

.work-gallery{
    display:block !important;

    width:min(1540px,calc(100% - 48px)) !important;
    margin:0 auto !important;

    column-count:4 !important;
    column-gap:14px !important;

    grid-template-columns:none !important;
    grid-auto-rows:auto !important;
}


/* every gallery image keeps its natural proportion */

.work-gallery-item,
.work-gallery-wide,
.work-gallery-tall{
    display:block !important;

    width:100% !important;
    height:auto !important;

    min-height:0 !important;

    margin:0 0 14px !important;
    padding:0 !important;

    break-inside:avoid !important;
    page-break-inside:avoid !important;

    grid-column:auto !important;
    grid-row:auto !important;

    overflow:hidden !important;

    border-radius:18px !important;

    background:#151311 !important;
}


.work-gallery-item img,
.work-gallery-wide img,
.work-gallery-tall img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    min-height:0 !important;
    max-height:none !important;

    object-fit:initial !important;
    object-position:center !important;

    padding:0 !important;

    transform:scale(1.001);

    transition:
        transform .65s cubic-bezier(.2,.7,.2,1),
        filter .35s ease !important;
}


/* controlled hover */

.work-gallery-item:hover{
    transform:translateY(-4px) !important;
}

.work-gallery-item:hover img{
    transform:scale(1.025) !important;
}


/* tablet */

@media(max-width:1100px){

    .work-gallery{
        column-count:3 !important;
    }

}


/* smaller tablet */

@media(max-width:800px){

    .work-gallery{
        column-count:2 !important;
    }

}


/* mobile */

@media(max-width:520px){

    .work-gallery{
        width:calc(100% - 28px) !important;

        column-count:1 !important;
        column-gap:0 !important;
    }

    .work-gallery-item,
    .work-gallery-wide,
    .work-gallery-tall{
        margin-bottom:12px !important;
    }

}

/* =========================================================
   OUR WORK — MODERN EDITORIAL BENTO V2
========================================================= */

.work-gallery{
    width:min(1540px,calc(100% - 48px)) !important;
    margin:0 auto !important;

    display:grid !important;

    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    grid-template-rows:
        250px
        250px
        240px !important;

    gap:16px !important;

    column-count:initial !important;
}


/* reset old masonry/fixed rules */

.work-gallery-item,
.work-gallery-wide,
.work-gallery-tall{
    position:relative !important;

    width:100% !important;
    height:100% !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    border:
        1px solid rgba(210,178,124,.17) !important;

    border-radius:20px !important;

    background:#151311 !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.15) !important;

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        border-color .35s ease,
        box-shadow .35s ease !important;
}


/* -----------------------------------------
   CUSTOM EDITORIAL POSITIONS
----------------------------------------- */

/* BIG FEATURE */

.work-gallery-item:nth-child(1){
    grid-column:1 / span 6 !important;
    grid-row:1 / span 2 !important;
}


/* TALL RIGHT FEATURE */

.work-gallery-item:nth-child(2){
    grid-column:7 / span 3 !important;
    grid-row:1 / span 2 !important;
}


/* TOP RIGHT */

.work-gallery-item:nth-child(3){
    grid-column:10 / span 3 !important;
    grid-row:1 !important;
}


/* MID RIGHT */

.work-gallery-item:nth-child(4){
    grid-column:10 / span 3 !important;
    grid-row:2 !important;
}


/* BOTTOM WIDE */

.work-gallery-item:nth-child(5){
    grid-column:1 / span 4 !important;
    grid-row:3 !important;
}


/* BOTTOM CENTER */

.work-gallery-item:nth-child(6){
    grid-column:5 / span 3 !important;
    grid-row:3 !important;
}


/* BOTTOM RIGHT 1 */

.work-gallery-item:nth-child(7){
    grid-column:8 / span 2 !important;
    grid-row:3 !important;
}


/* BOTTOM RIGHT 2 */

.work-gallery-item:nth-child(8){
    grid-column:10 / span 3 !important;
    grid-row:3 !important;
}


/* -----------------------------------------
   IMAGE BEHAVIOUR
----------------------------------------- */

.work-gallery-item img,
.work-gallery-wide img,
.work-gallery-tall img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    min-height:0 !important;
    max-height:none !important;

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

    padding:0 !important;

    transform:scale(1.01) !important;

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


/* subtle depth overlay */

.work-gallery-item::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 52%,
            rgba(0,0,0,.24) 100%
        );

    opacity:.45;

    transition:opacity .35s ease;
}


/* tiny editorial corner mark */

.work-gallery-item::after{
    content:"↗";

    position:absolute;

    right:16px;
    bottom:16px;

    z-index:3;

    width:36px;
    height:36px;

    display:grid;
    place-items:center;

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

    border-radius:50%;

    background:rgba(12,11,10,.46);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:13px;

    opacity:0;
    transform:translateY(8px);

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


/* -----------------------------------------
   HOVER
----------------------------------------- */

.work-gallery-item:hover{
    transform:
        translateY(-6px)
        scale(1.003) !important;

    border-color:
        rgba(210,178,124,.48) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30) !important;
}

.work-gallery-item:hover img{
    transform:scale(1.045) !important;

    filter:
        contrast(1.025)
        saturate(1.03) !important;
}

.work-gallery-item:hover::before{
    opacity:.7;
}

.work-gallery-item:hover::after{
    opacity:1;
    transform:translateY(0);
}


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

@media(max-width:1100px){

    .work-gallery{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        grid-template-rows:
            330px
            240px
            240px
            240px !important;
    }

    .work-gallery-item:nth-child(1){
        grid-column:1 / span 4 !important;
        grid-row:1 !important;
    }

    .work-gallery-item:nth-child(2){
        grid-column:5 / span 2 !important;
        grid-row:1 !important;
    }

    .work-gallery-item:nth-child(3){
        grid-column:1 / span 3 !important;
        grid-row:2 !important;
    }

    .work-gallery-item:nth-child(4){
        grid-column:4 / span 3 !important;
        grid-row:2 !important;
    }

    .work-gallery-item:nth-child(5){
        grid-column:1 / span 2 !important;
        grid-row:3 !important;
    }

    .work-gallery-item:nth-child(6){
        grid-column:3 / span 2 !important;
        grid-row:3 !important;
    }

    .work-gallery-item:nth-child(7){
        grid-column:5 / span 2 !important;
        grid-row:3 !important;
    }

    .work-gallery-item:nth-child(8){
        grid-column:1 / span 6 !important;
        grid-row:4 !important;
    }

}


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

@media(max-width:650px){

    .work-gallery{
        width:calc(100% - 28px) !important;

        display:grid !important;

        grid-template-columns:1fr 1fr !important;
        grid-template-rows:auto !important;

        gap:10px !important;
    }

    .work-gallery-item{
        min-height:180px !important;
    }

    .work-gallery-item:nth-child(1){
        grid-column:1 / -1 !important;
        grid-row:auto !important;

        min-height:330px !important;
    }

    .work-gallery-item:nth-child(2),
    .work-gallery-item:nth-child(3),
    .work-gallery-item:nth-child(4),
    .work-gallery-item:nth-child(5),
    .work-gallery-item:nth-child(6),
    .work-gallery-item:nth-child(7){
        grid-column:auto !important;
        grid-row:auto !important;

        min-height:190px !important;
    }

    .work-gallery-item:nth-child(8){
        grid-column:1 / -1 !important;
        grid-row:auto !important;

        min-height:260px !important;
    }

    .work-gallery-item::after{
        display:none !important;
    }

}