@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================
   TORK BARBER SHOP
   PREMIUM MAIN STYLESHEET
========================================================= */

:root{
    --black:#050505;
    --black-2:#080808;
    --black-3:#101010;
    --black-4:#151515;

    --white:#ffffff;
    --off-white:#f4f4f2;

    --text:#c8c8c8;
    --muted:#858585;
    --muted-dark:#555555;

    --orange:#ff7200;
    --orange-dark:#d95d00;

    --line:rgba(255,255,255,.09);
    --line-light:rgba(255,255,255,.16);

    --max-width:1240px;
    --nav-height:88px;

    --ease:cubic-bezier(.2,.75,.2,1);
}

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

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{
    min-width:320px;
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(255,114,0,.045),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 32%,
            rgba(255,114,0,.035),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(255,255,255,.018),
            transparent 35%
        ),
        #050505;

    color:var(--white);
    font-family:"Inter",Arial,sans-serif;
    line-height:1.6;
    overflow-x:hidden;
}

body::before{
    content:"";

    position:fixed;
    inset:0;

    z-index:9998;

    pointer-events:none;

    opacity:.025;

    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
}

body::after{
    content:"";

    position:fixed;
    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(255,255,255,.015) 50%,
            transparent 50.2%
        ),
        linear-gradient(
            0deg,
            transparent 49.8%,
            rgba(255,255,255,.015) 50%,
            transparent 50.2%
        );

    background-size:
        90px 90px,
        90px 90px;

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

    opacity:.35;
}

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

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

button{
    font:inherit;
}

p,
h1,
h2,
h3,
h4{
    margin:0;
}

::selection{
    background:var(--orange);
    color:#000;
}

/* =========================================================
   COMMON
========================================================= */

.container{
    width:min(calc(100% - 48px),var(--max-width));
    margin-inline:auto;
}

.section-dark{
    position:relative;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255,114,0,.035),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #0a0a0a 50%,
            #050505 100%
        );

    color:#fff;
}

.section-dark::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

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

    opacity:.5;
}

.section-light{
    position:relative;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,114,0,.065),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f7f7f5 0%,
            #eeeeec 50%,
            #f8f8f6 100%
        );

    color:#090909;
}

.section-orange{
    position:relative;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(255,255,255,.15),
            transparent 25%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(0,0,0,.12),
            transparent 35%
        ),
        var(--orange);

    color:#050505;
}

/* =========================================================
   LOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;

    z-index:10000;

    display:grid;
    place-items:center;

    background:
        radial-gradient(
            circle at center,
            rgba(255,114,0,.06),
            transparent 30%
        ),
        #050505;

    opacity:1;
    visibility:visible;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-inner{
    width:100%;
    max-width:92vw;

    text-align:center;
    overflow:hidden;
}

.loader-logo{
    width:110px;
    height:110px;

    margin:0 auto 20px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 18px
            rgba(255,114,0,.45)
        );

    animation:
        loaderLogo 1.8s ease-in-out infinite alternate;
}

.loader-name{
    display:flex;
    justify-content:center;

    gap:8px;

    overflow:hidden;

    font-family:
        "Barlow Condensed",
        Impact,
        sans-serif;

    font-size:48px;
    font-weight:900;

    line-height:1;

    letter-spacing:10px;
}

.loader-name span{
    opacity:0;

    transform:translateY(18px);

    animation:typeLetter .35s forwards;
}

.loader-name span:nth-child(1){
    animation-delay:.25s;
}

.loader-name span:nth-child(2){
    animation-delay:.45s;
}

.loader-name span:nth-child(3){
    animation-delay:.65s;
}

.loader-name span:nth-child(4){
    animation-delay:.85s;
}

.loader-subtitle{
    margin-top:9px;

    color:var(--orange);

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

    letter-spacing:6px;
}

.loader-line{
    width:150px;
    height:2px;

    margin:28px auto 0;

    overflow:hidden;

    background:#222;
}

.loader-line span{
    display:block;

    width:100%;
    height:100%;

    background:var(--orange);

    transform:translateX(-100%);

    animation:loadLine 2.2s ease forwards;
}

@keyframes loaderLogo{
    from{
        transform:scale(1);

        filter:
            drop-shadow(
                0 0 15px
                rgba(255,114,0,.35)
            );
    }

    to{
        transform:scale(1.05);

        filter:
            drop-shadow(
                0 0 30px
                rgba(255,114,0,.75)
            );
    }
}

@keyframes typeLetter{
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes loadLine{
    to{
        transform:translateX(0);
    }
}

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

.navbar{
    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:5000;

    background:transparent;

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

.navbar.scrolled{
    background:rgba(5,5,5,.92);

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

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

    box-shadow:
        0 12px 40px
        rgba(0,0,0,.3);
}

.nav-container{
    min-height:var(--nav-height);

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

    gap:30px;
}

.nav-logo{
    display:flex;
    align-items:center;

    flex-shrink:0;
}

.nav-logo img{
    width:64px;
    height:64px;

    object-fit:contain;

    transition:
        transform .3s ease,
        filter .3s ease;
}

.nav-logo:hover img{
    transform:scale(1.05);

    filter:
        drop-shadow(
            0 0 12px
            rgba(255,114,0,.4)
        );
}


.nav-brand{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    margin-left:13px;
    line-height:1;
}

.nav-brand strong{
    color:#fff;
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-size:25px;
    font-weight:900;
    letter-spacing:1.5px;
}

.nav-brand small{
    color:var(--orange);
    font-size:8px;
    font-weight:900;
    letter-spacing:2.8px;
    white-space:nowrap;
}


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

.nav-menu{
    display:flex;
    align-items:center;

    gap:30px;
}

.nav-menu .nav-link{
    position:relative;

    color:#c9c9c9;

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

    letter-spacing:1.5px;
    text-transform:uppercase;

    white-space:nowrap;

    transition:
        color .25s ease,
        transform .25s ease;
}

.nav-menu .nav-link::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:var(--orange);

    transition:width .25s ease;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link.active{
    color:#fff;
}

.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after{
    width:100%;
}

.nav-call{
    display:inline-flex;

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

    min-height:44px;

    padding:12px 19px;

    background:var(--orange);
    color:#050505;

    border-radius:2px;

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

    letter-spacing:1.5px;

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

.nav-call:hover{
    background:#fff;
    color:#000;

    transform:translateY(-2px);

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

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

.menu-toggle{
    display:none;

    width:44px;
    height:44px;

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

    gap:5px;

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

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

    cursor:pointer;
}

.menu-toggle span{
    width:20px;
    height:2px;

    background:#fff;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

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

.hero{
    position:relative;

    min-height:100svh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding-top:var(--nav-height);
}

.hero-background{
    position:absolute;

    inset:-10%;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.78) 36%,
            rgba(5,5,5,.34) 68%,
            rgba(5,5,5,.58) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.58)
        ),
        url("../images/image1.png") center center / cover no-repeat;

    transform:scale(1.05);

    transition:transform .15s linear;
}

.hero-background::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255,255,255,.025) 35%,
            transparent 60%
        );

    opacity:.7;
}

.hero-background::after{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-180px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

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

    box-shadow:
        0 0 0 70px rgba(255,114,0,.018),
        0 0 0 140px rgba(255,114,0,.012),
        0 0 100px rgba(255,114,0,.12);

    opacity:.8;
}

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

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.98) 0%,
            rgba(5,5,5,.86) 30%,
            rgba(5,5,5,.58) 60%,
            rgba(5,5,5,.40) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.65)
        );
}

.hero-content{
    position:relative;

    z-index:2;

    width:100%;
    max-width:920px;
}

.hero-eyebrow{
    color:var(--orange);

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

    line-height:1.3;

    letter-spacing:3px;
}

.hero-eyebrow span{
    color:#fff;

    opacity:.55;

    margin:0 5px;
}

.hero-title{
    margin:20px 0 30px;

    font-family:
        "Barlow Condensed",
        Impact,
        sans-serif;

    font-size:
        clamp(
            64px,
            9vw,
            128px
        );

    font-weight:900;

    line-height:.88;

    letter-spacing:-1px;

    text-transform:uppercase;

    text-shadow:
        0 8px 40px
        rgba(0,0,0,.25);
}

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

.hero-text{
    max-width:610px;

    color:#c5c5c5;

    font-size:16px;

    line-height:1.8;
}

.hero-buttons{
    display:flex;

    gap:12px;

    margin-top:34px;
}

.hero-hours{
    display:flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    color:#999;

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

    letter-spacing:2px;
}

.hero-hours span{
    color:#fff;
}

.hero-scroll{
    position:absolute;

    right:32px;
    bottom:30px;

    z-index:3;

    display:flex;

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

    color:#777;

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

    letter-spacing:3px;
}

.hero-scroll i{
    display:block;

    width:1px;
    height:50px;

    margin-top:10px;

    background:var(--orange);

    animation:
        scrollLine 1.8s
        ease-in-out infinite;
}

@keyframes scrollLine{
    0%,
    100%{
        transform:scaleY(.45);
        transform-origin:top;
        opacity:.45;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
        opacity:1;
    }
}

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

.btn{
    position:relative;

    display:inline-flex;

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

    min-width:160px;
    min-height:52px;

    padding:14px 24px;

    overflow:hidden;

    border:1px solid transparent;

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

    letter-spacing:2px;

    cursor:pointer;

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

.btn-primary{
    background:var(--orange);
    color:#050505;

    box-shadow:
        0 8px 30px
        rgba(255,114,0,.12);
}

.btn-primary:hover{
    background:#fff;
    color:#000;

    transform:translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(255,255,255,.13);
}

.btn-outline{
    border-color:rgba(255,255,255,.3);

    color:#fff;

    background:rgba(255,255,255,.015);
}

.btn-outline:hover{
    border-color:var(--orange);

    color:var(--orange);

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

    transform:translateY(-3px);
}

.btn-dark{
    background:#050505;
    color:#fff;
}

.btn-dark:hover{
    background:#fff;
    color:#050505;

    transform:translateY(-3px);
}

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

.section-heading{
    max-width:750px;

    margin-bottom:60px;
}

.section-heading-light{
    color:#fff;
}

.section-number{
    display:block;

    margin-bottom:18px;

    color:#777;

    font-family:
        "Barlow Condensed",
        sans-serif;

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

    letter-spacing:2px;
}

.section-heading h2{
    margin:0;

    font-family:
        "Barlow Condensed",
        Impact,
        sans-serif;

    font-size:
        clamp(
            54px,
            6vw,
            88px
        );

    font-weight:900;

    line-height:.9;

    letter-spacing:-1px;

    text-transform:uppercase;
}

.section-heading h2 span{
    color:var(--orange);
}

.section-heading > p{
    max-width:620px;

    margin-top:22px;

    color:#8d8d8d;

    font-size:14px;

    line-height:1.8;
}

/* =========================================================
   ABOUT
========================================================= */

.about{
    padding:125px 0;
}

.about-grid{
    display:grid;

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

    gap:100px;

    align-items:start;
}

.about-intro{
    padding-top:10px;
}

.large-text{
    max-width:600px;

    color:#111;

    font-size:
        clamp(
            25px,
            2.6vw,
            36px
        );

    font-weight:500;

    line-height:1.35;
}

.about-content{
    max-width:560px;
}

.about-content::before{
    content:"";

    display:block;

    width:80px;
    height:2px;

    margin-bottom:28px;

    background:var(--orange);
}

.about-content p{
    margin-bottom:25px;

    color:#555;

    font-size:14px;

    line-height:1.9;
}

.about-content p:last-child{
    margin-bottom:0;
}

/* =========================================================
   SERVICES
========================================================= */

.services{
    padding:125px 0;
}

.service-grid{
    display:grid;

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

    gap:1px;

    background:var(--line);

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

.service-card{
    position:relative;

    min-height:285px;

    padding:36px 30px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        ),
        #0a0a0a;

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

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

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

    position:absolute;

    left:0;
    top:0;

    width:3px;
    height:0;

    background:var(--orange);

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

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

    position:absolute;

    width:180px;
    height:180px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,114,0,.13),
            transparent 70%
        );

    opacity:0;

    transition:opacity .4s ease;
}

.service-card:hover{
    background:
        linear-gradient(
            145deg,
            rgba(255,114,0,.055),
            rgba(255,255,255,.015)
        ),
        #101010;

    border-color:
        rgba(255,114,0,.20);

    transform:translateY(-5px);
}

.service-card:hover::before{
    height:100%;
}

.service-card:hover::after{
    opacity:1;
}

.service-number{
    position:absolute;

    top:28px;
    right:28px;

    color:#444;

    font-family:
        "Barlow Condensed",
        sans-serif;

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

    letter-spacing:2px;
}

.service-icon{
    margin-bottom:42px;

    color:var(--orange);

    font-family:
        "Barlow Condensed",
        sans-serif;

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

    line-height:1;

    letter-spacing:2px;
}

.service-card h3{
    margin-bottom:12px;

    font-family:
        "Barlow Condensed",
        Impact,
        sans-serif;

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

    line-height:1;

    text-transform:uppercase;
}

.service-card p{
    max-width:300px;

    color:#888;

    font-size:13px;

    line-height:1.7;
}

/* =========================================================
   EXPERIENCE
========================================================= */

.experience{
    padding:125px 0;
}

.experience-grid{
    display:grid;

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

    margin-top:60px;

    border-top:1px solid #d8d8d8;
}

.experience-item{
    display:grid;

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

    gap:20px;

    padding:35px 0;

    border-bottom:1px solid #d8d8d8;
}

.experience-item:nth-child(odd){
    padding-right:50px;

    border-right:1px solid #d8d8d8;
}

.experience-item:nth-child(even){
    padding-left:50px;
}

.experience-number{
    color:var(--orange);

    font-family:
        "Barlow Condensed",
        sans-serif;

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

    letter-spacing:2px;
}

.experience-item h3{
    margin-bottom:8px;

    font-family:
        "Barlow Condensed",
        Impact,
        sans-serif;

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

    line-height:1;

    text-transform:uppercase;
}

.experience-item p{
    color:#666;

    font-size:13px;

    line-height:1.7;
}



/* =========================================================
   GALLERY
========================================================= */

.gallery{
    padding:125px 0 135px;
    overflow:hidden;
}

.gallery .section-heading{
    max-width:800px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:210px;
    gap:14px;
}

.gallery-card{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:#0b0b0b;
    cursor:pointer;
    text-align:left;
    isolation:isolate;
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s var(--ease), filter .5s ease;
}

.gallery-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.03) 25%,
        rgba(0,0,0,.82) 100%
    );
    opacity:.9;
    transition:opacity .4s ease;
}

.gallery-card:hover img{
    transform:scale(1.07);
    filter:saturate(1.08) contrast(1.03);
}

.gallery-card:hover::after{
    opacity:1;
}

.gallery-card-large{
    grid-column:span 7;
    grid-row:span 2;
}

.gallery-card-tall{
    grid-column:span 5;
    grid-row:span 2;
}

.gallery-card:not(.gallery-card-large):not(.gallery-card-tall){
    grid-column:span 3;
}

.gallery-card-wide{
    grid-column:span 3 !important;
}

.gallery-overlay{
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:3px;
    color:#fff;
    pointer-events:none;
}

.gallery-overlay strong{
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-size:25px;
    font-weight:800;
    line-height:1;
    letter-spacing:.5px;
}

.gallery-overlay small{
    color:#bdbdbd;
    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
}

.gallery-overlay i{
    position:absolute;
    right:0;
    bottom:0;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid rgba(255,255,255,.35);
    color:var(--orange);
    font-size:18px;
    font-style:normal;
    transition:background .3s ease,color .3s ease,border-color .3s ease;
}

.gallery-card:hover .gallery-overlay i{
    background:var(--orange);
    border-color:var(--orange);
    color:#050505;
}

.gallery-note{
    margin-top:18px;
    color:#666;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:11000;
    display:grid;
    place-items:center;
    padding:30px;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
}

.gallery-lightbox.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.gallery-lightbox-inner{
    position:relative;
    width:min(1100px,94vw);
    max-height:88vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.gallery-lightbox-inner img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:80vh;
    object-fit:contain;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 25px 80px rgba(0,0,0,.6);
}

.gallery-lightbox-caption{
    color:#aaa;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    text-align:center;
}

.gallery-lightbox-close{
    position:absolute;
    top:20px;
    right:24px;
    z-index:2;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.gallery-lightbox-close:hover{
    background:var(--orange);
    border-color:var(--orange);
    color:#050505;
}

body.gallery-open{
    overflow:hidden;
}

/* FOOTER BRAND */

.footer-brand-lockup{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.footer-brand-lockup img{
    width:70px;
    height:70px;
    margin-bottom:0;
}

.footer-brand-lockup div{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.footer-brand-lockup strong{
    color:#fff;
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-size:29px;
    font-weight:900;
    letter-spacing:1px;
}

.footer-brand-lockup span{
    margin-top:5px;
    color:var(--orange);
    font-size:8px;
    font-weight:900;
    letter-spacing:2.5px;
}


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

.cta{
    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(255,255,255,.15),
            transparent 25%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(0,0,0,.12),
            transparent 35%
        ),
        var(--orange);

    color:#050505;
}

.cta::before{
    content:"TORK";

    position:absolute;

    right:-30px;
    bottom:-75px;

    color:rgba(0,0,0,.07);

    font-family:
        "Barlow Condensed",
        Impact,
        sans-serif;

    font-size:220px;
    font-weight:900;

    line-height:1;

    pointer-events:none;
}

.cta::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-180px;
    top:-180px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 70px rgba(0,0,0,.025),
        0 0 0 140px rgba(0,0,0,.018);
}

.cta-content{
    position:relative;

    z-index:1;
}

.cta-label{
    font-size:10px;
    font-weight:900;

    letter-spacing:3px;
}

.cta h2{
    margin:15px 0 20px;

    font-family:
        "Barlow Condensed",
        Impact,
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    font-weight:900;

    line-height:.88;

    text-transform:uppercase;
}

.cta h2 span{
    color:#fff;
}

.cta p{
    margin-bottom:30px;

    color:rgba(0,0,0,.65);

    font-size:14px;
}

/* =========================================================
   LOCATION
========================================================= */

.location{
    padding:125px 0;
}

.location-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:80px;

    align-items:stretch;
}

.location-info{
    display:flex;

    flex-direction:column;
}

.location-block{
    padding:23px 0;

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

.location-block:last-of-type{
    border-bottom:1px solid var(--line);
}

.location-label{
    display:block;

    margin-bottom:8px;

    color:var(--orange);

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

    letter-spacing:2px;
}

.location-block p{
    color:#aaa;

    font-size:13px;

    line-height:1.75;
}

.location-block a{
    color:#aaa;

    transition:color .25s ease;
}

.location-block a:hover{
    color:var(--orange);
}

.location-info > .btn{
    width:max-content;

    margin-top:25px;
}

.map-wrapper{
    min-height:430px;

    overflow:hidden;

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

    background:#111;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.18);
}

.map-wrapper iframe{
    display:block;

    width:100%;
    height:100%;

    min-height:430px;

    border:0;

    filter:
        grayscale(1)
        contrast(1.08);
}

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

.footer{
    background:#030303;

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

.footer-main{
    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1.3fr
        1fr;

    gap:50px;

    padding:70px 0;
}

.footer-brand img{
    width:70px;
    height:70px;

    margin-bottom:18px;

    object-fit:contain;
}

.footer-brand p,
.footer-column p,
.footer-column a{
    color:#777;

    font-size:12px;

    line-height:1.8;
}

.footer-column{
    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.footer-title{
    display:block;

    margin-bottom:18px;

    color:var(--orange);

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

    letter-spacing:2px;
}

.footer-column a{
    transition:color .25s ease;
}

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

.footer-bottom{
    min-height:70px;

    display:flex;

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

    gap:20px;

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

.footer-bottom p{
    color:#555;

    font-size:10px;
}

.footer-links{
    display:flex;

    gap:22px;
}

.footer-links a{
    color:#666;

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

    letter-spacing:1px;

    transition:color .25s ease;
}

.footer-links a:hover{
    color:var(--orange);
}

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

.cookie-notice{
    position:fixed;

    left:20px;
    right:20px;
    bottom:20px;

    z-index:6000;

    width:min(760px,calc(100% - 40px));

    margin-inline:auto;

    display:flex;

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

    gap:30px;

    padding:20px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.01)
        ),
        #101010;

    border:1px solid rgba(255,114,0,.30);

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.5);

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

    transform:translateY(140%);

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

.cookie-notice.show{
    transform:translateY(0);
}

.cookie-content{
    display:flex;

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

    width:100%;

    gap:25px;
}

.cookie-notice strong{
    display:block;

    color:var(--orange);

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

    letter-spacing:2px;
}

.cookie-notice p{
    margin-top:5px;

    color:#888;

    font-size:11px;

    line-height:1.6;
}

.cookie-notice button{
    flex:0 0 auto;

    padding:11px 18px;

    border:0;

    background:var(--orange);
    color:#000;

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

    letter-spacing:1px;

    cursor:pointer;

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

.cookie-notice button:hover{
    background:#fff;

    transform:translateY(-2px);
}

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

.reveal{
    opacity:0;

    transform:translateY(30px);

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

.reveal.visible{
    opacity:1;

    transform:none;
}

.delay-1{
    transition-delay:.12s;
}

.delay-2{
    transition-delay:.22s;
}

.delay-3{
    transition-delay:.32s;
}

/* =========================================================
   RIPPLE
========================================================= */

.ripple{
    position:relative;
}

.ripple-effect{
    position:absolute;

    border-radius:50%;

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

    transform:scale(0);

    pointer-events:none;

    animation:rippleAnimation .7s ease-out;
}

@keyframes rippleAnimation{
    to{
        transform:scale(2.5);

        opacity:0;
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1100px){

    .container{
        width:min(
            calc(100% - 42px),
            var(--max-width)
        );
    }

    .nav-menu{
        gap:22px;
    }

    .nav-menu .nav-link{
        font-size:10px;
    }

    .about-grid{
        gap:60px;
    }

    .location-grid{
        gap:50px;
    }

    .footer-main{
        gap:30px;
    }

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

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

@media(max-width:900px){

    .about,
    .services,
    .experience,
    .location{
        padding:100px 0;
    }

    .nav-menu{
        gap:18px;
    }

    .nav-call{
        padding:11px 14px;
    }

    .about-grid,
    .location-grid{
        grid-template-columns:1fr;

        gap:45px;
    }

    .about-content{
        max-width:700px;
    }

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

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

        gap:45px;
    }
}

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

@media(max-width:760px){

    :root{
        --nav-height:76px;
    }

    .container{
        width:min(
            calc(100% - 34px),
            var(--max-width)
        );
    }

    .about,
    .services,
    .experience,
    .location{
        padding:90px 0;
    }

    /* NAV */

    .nav-container{
        min-height:76px;
    }

    .nav-logo img{
        width:55px;
        height:55px;
    }

    .nav-brand{
        margin-left:9px;
    }

    .nav-brand strong{
        font-size:21px;
    }

    .nav-brand small{
        font-size:7px;
        letter-spacing:2px;
    }

    .menu-toggle{
        display:flex;
    }

    .nav-menu{
        position:absolute;

        top:76px;
        left:0;
        right:0;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:10px 17px 18px;

        background:
            rgba(5,5,5,.98);

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

        transform:translateY(-20px);

        opacity:0;
        visibility:hidden;

        transition:
            transform .3s ease,
            opacity .3s ease,
            visibility .3s ease;
    }

    .nav-menu.active{
        transform:translateY(0);

        opacity:1;
        visibility:visible;
    }

    .nav-menu .nav-link{
        padding:14px 4px;

        font-size:10px;
    }

    .nav-menu .nav-link::after{
        bottom:5px;
    }

    .nav-call{
        margin-top:8px;

        text-align:center;
    }

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

    .menu-toggle.active span:nth-child(2){
        opacity:0;
    }

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

    /* HERO */

    .hero{
        min-height:760px;
    }

    .hero-background::after{
        width:400px;
        height:400px;

        right:-180px;
    }

    .hero-content{
        padding-top:20px;
    }

    .hero-title{
        margin-top:18px;

        font-size:
            clamp(
                58px,
                16vw,
                90px
            );
    }

    .hero-text{
        max-width:500px;

        font-size:14px;
    }

    .hero-buttons{
        flex-direction:column;

        align-items:stretch;

        max-width:330px;
    }

    .btn{
        width:100%;
    }

    .hero-scroll{
        display:none;
    }

    /* HEADINGS */

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading h2{
        font-size:58px;
    }

    /* ABOUT */

    .about-grid{
        gap:35px;
    }

    .large-text{
        font-size:25px;
    }

    /* SERVICES */

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

    .service-card{
        min-height:220px;
    }

    /* EXPERIENCE */

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

    /* GALLERY */

    .gallery{
        padding:90px 0;
    }

    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-auto-rows:210px;
        gap:10px;
    }

    .gallery-card-large,
    .gallery-card-tall{
        grid-column:span 2;
        grid-row:span 1;
    }

    .gallery-card:not(.gallery-card-large):not(.gallery-card-tall),
    .gallery-card-wide{
        grid-column:span 1 !important;
    }

    .gallery-overlay{
        left:15px;
        right:15px;
        bottom:15px;
    }

    .gallery-overlay strong{
        font-size:20px;
    }

    .gallery-overlay i{
        width:31px;
        height:31px;
        font-size:15px;
    }

    .experience-item:nth-child(odd){
        padding-right:0;

        border-right:0;
    }

    .experience-item:nth-child(even){
        padding-left:0;
    }

    /* CTA */

    .cta{
        padding:75px 0;
    }

    .cta h2{
        font-size:58px;
    }

    /* LOCATION */

    .location-grid{
        gap:40px;
    }

    .location-info{
        max-width:700px;
    }

    .location-info > .btn{
        width:100%;
        max-width:330px;
    }

    .map-wrapper,
    .map-wrapper iframe{
        min-height:330px;
    }

    /* FOOTER */

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

        gap:35px;

        padding:55px 0;
    }

    .footer-bottom{
        min-height:auto;

        padding:20px 0;

        align-items:flex-start;

        flex-direction:column;

        gap:12px;
    }

    .footer-links{
        flex-wrap:wrap;

        gap:16px 20px;
    }

    /* COOKIE */

    .cookie-notice{
        left:12px;
        right:12px;
        bottom:12px;

        width:auto;

        padding:16px;
    }

    .cookie-content{
        align-items:flex-end;

        gap:15px;
    }
}

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

@media(max-width:480px){

    .container{
        width:calc(100% - 28px);
    }

    .about,
    .services,
    .experience,
    .location{
        padding:78px 0;
    }

    .loader-logo{
        width:90px;
        height:90px;
    }

    .loader-name{
        font-size:40px;

        letter-spacing:8px;
    }

    .loader-subtitle{
        font-size:9px;

        letter-spacing:4px;
    }

    .hero{
        min-height:720px;
    }

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

    .hero-text{
        font-size:13px;
    }

    .hero-hours{
        font-size:9px;

        letter-spacing:1.5px;

        flex-wrap:wrap;
    }

    .section-heading h2{
        font-size:51px;
    }

    .large-text{
        font-size:22px;
    }

    .service-card{
        padding:28px;

        min-height:205px;
    }

    .gallery-grid{
        grid-template-columns:1fr;
        grid-auto-rows:240px;
    }

    .gallery-card-large,
    .gallery-card-tall,
    .gallery-card:not(.gallery-card-large):not(.gallery-card-tall),
    .gallery-card-wide{
        grid-column:span 1 !important;
        grid-row:span 1;
    }

    .gallery-lightbox{
        padding:15px;
    }

    .gallery-lightbox-inner img{
        max-height:75vh;
    }

    .gallery-lightbox-close{
        top:12px;
        right:12px;
        width:42px;
        height:42px;
    }

    .service-icon{
        margin-bottom:35px;
    }

    .experience-item{
        grid-template-columns:
            50px
            minmax(0,1fr);

        gap:12px;

        padding:28px 0;
    }

    .experience-item h3{
        font-size:25px;
    }

    .cta h2{
        font-size:49px;
    }

    .cta::before{
        font-size:150px;
    }

    .map-wrapper,
    .map-wrapper iframe{
        min-height:290px;
    }

    .cookie-content{
        align-items:stretch;

        flex-direction:column;

        gap:12px;
    }

    .cookie-notice button{
        width:100%;

        padding:11px 14px;
    }
}

/* =========================================================
   VERY SMALL
========================================================= */

@media(max-width:360px){

    .container{
        width:calc(100% - 24px);
    }

    .hero-title{
        font-size:50px;
    }

    .section-heading h2{
        font-size:47px;
    }

    .loader-name{
        font-size:36px;
    }
}

/* =========================================================
   FOCUS
========================================================= */

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

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

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}