:root{
    --red:#b10a23;
    --red-dark:#900419;
    --ink:#111111;
    --ink-soft:#191919;
    --text:#222222;
    --muted:#686868;
    --line:#e6e6e3;
    --paper:#f7f7f5;
    --white:#ffffff;
    --container:1160px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:"Inter",Arial,sans-serif;
    font-size:15px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

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

a{
    color:inherit;
}

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

.container.narrow{
    max-width:820px;
}


/* HEADER */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    height:64px;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px);
}

.header-inner{
    width:min(calc(100% - 48px),var(--container));
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    gap:24px;
}

.brand{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.brand img{
    width:auto;
    max-width:142px;
    max-height:37px;
}

.main-nav{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:2px;
}

.main-nav a{
    position:relative;
    padding:8px 9px;
    text-decoration:none;
    color:#363636;
    font-size:12.5px;
    font-weight:500;
}

.main-nav a:hover,
.main-nav a.active{
    color:var(--red);
}

.main-nav a.active:after{
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    bottom:3px;
    height:1px;
    background:var(--red);
}

.header-cta{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border:1px solid var(--red);
    text-decoration:none;
    color:var(--red);
    font-size:12px;
    font-weight:600;
}

.header-cta:hover{
    background:var(--red);
    color:#fff;
}

.nav-toggle{
    display:none;
}


/* COMMON */

.eyebrow{
    margin:0 0 10px;
    color:var(--red);
    font-size:10px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:.15em;
}

.eyebrow.light{
    color:#fff;
    opacity:.64;
}

h1,h2,h3,h4{
    font-family:"Montserrat",Arial,sans-serif;
    letter-spacing:-.035em;
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:11px 17px;
    min-height:40px;
    border:1px solid transparent;
    text-decoration:none;
    font-size:12px;
    line-height:1;
    font-weight:600;
    transition:.18s ease;
}

.button.primary{
    background:var(--red);
    border-color:var(--red);
    color:#fff;
}

.button.primary:hover{
    background:var(--red-dark);
    border-color:var(--red-dark);
}

.button.ghost{
    color:#fff;
    border-color:rgba(255,255,255,.35);
}

.button.ghost:hover{
    background:#fff;
    color:#111;
}

.white-button{
    background:#fff;
    color:#111;
}

.section-link{
    display:inline-flex;
    gap:10px;
    align-items:center;
    color:var(--red);
    text-decoration:none;
    font-size:12px;
    font-weight:600;
}

.section-link:hover span{
    transform:translateX(3px);
}

.section-link span{
    transition:.18s ease;
}


/* HERO */

.home-hero{
    position:relative;
    min-height:540px;
    height:calc(100vh - 64px);
    max-height:650px;
    background:#111;
    overflow:hidden;
}

.hero-visual{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 72% 44%,rgba(177,10,35,.34),transparent 31%),
        linear-gradient(120deg,#070707 0%,#171717 56%,#080808 100%);
}

.hero-visual:before{
    content:"";
    position:absolute;
    width:58%;
    height:140%;
    right:-17%;
    top:-20%;
    border-left:1px solid rgba(255,255,255,.10);
    border-right:1px solid rgba(177,10,35,.25);
    transform:rotate(13deg);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.25),transparent 65%);
}

.hero-inner{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

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

.hero-copy h1{
    margin:0;
    color:#fff;
    font-size:clamp(46px,6.1vw,76px);
    line-height:.98;
    font-weight:800;
}

.hero-copy h1 em{
    color:var(--red);
    font-style:normal;
}

.hero-copy>p:not(.eyebrow){
    max-width:600px;
    margin:23px 0 0;
    color:rgba(255,255,255,.67);
    font-size:14px;
    line-height:1.8;
}

.hero-actions{
    display:flex;
    gap:9px;
    margin-top:28px;
}

.hero-side{
    width:185px;
    align-self:flex-end;
    margin-bottom:43px;
}

.hero-side>div{
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,.16);
    color:#fff;
}

.hero-side span{
    display:block;
    margin-bottom:2px;
    color:rgba(255,255,255,.36);
    font-size:9px;
}

.hero-side strong{
    font-size:11px;
    font-weight:600;
}


/* SECTIONS */

.home-section{
    padding:72px 0;
    background:#fff;
}

.section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:31px;
}

.section-heading h2{
    margin:0;
    font-size:clamp(27px,3.5vw,42px);
    line-height:1.08;
}

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

.service-card{
    position:relative;
    min-height:205px;
    padding:25px;
    background:#fff;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    text-decoration:none;
    transition:background .16s ease;
}

.service-card:hover{
    background:#fafafa;
}

.service-card .service-number{
    display:block;
    margin-bottom:29px;
    color:#a0a0a0;
    font-size:9px;
}

.service-card h3{
    margin:0 0 8px;
    font-size:16px;
    line-height:1.3;
}

.service-card p{
    max-width:260px;
    margin:0;
    color:var(--muted);
    font-size:12.5px;
}

.service-card b{
    position:absolute;
    right:22px;
    bottom:18px;
    color:var(--red);
    font-size:16px;
}

.accent-card{
    background:#f5f2f2;
}

.dark-section{
    background:var(--ink);
    color:#fff;
}

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

.light-link{
    color:#fff;
}

.project-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.project-card{
    min-height:330px;
    background:
        linear-gradient(135deg,#282828,#171717);
    background-position:center;
    background-size:cover;
}

.project-overlay{
    min-height:inherit;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px;
    background:linear-gradient(180deg,transparent 24%,rgba(0,0,0,.88));
}

.project-overlay span{
    margin-bottom:5px;
    color:rgba(255,255,255,.52);
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
}

.project-overlay h3{
    margin:0 0 5px;
    color:#fff;
    font-size:17px;
}

.project-overlay p{
    margin:0;
    color:rgba(255,255,255,.58);
    font-size:11.5px;
}

.placeholder-project{
    background:
        radial-gradient(circle at 70% 30%,rgba(177,10,35,.34),transparent 30%),
        #242424;
}

.placeholder-project.second{
    background:
        radial-gradient(circle at 30% 30%,rgba(255,255,255,.10),transparent 28%),
        #181818;
}

.placeholder-project.third{
    background:
        radial-gradient(circle at 70% 70%,rgba(177,10,35,.22),transparent 35%),
        #202020;
}


/* ABOUT */

.home-about{
    padding:75px 0;
    background:var(--paper);
}

.about-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:80px;
    align-items:center;
}

.about-mark{
    height:210px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border:1px solid var(--line);
    background:#fff;
}

.about-mark span{
    color:var(--red);
    font-family:"Montserrat";
    font-size:45px;
    font-weight:700;
}

.about-mark small{
    color:#777;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
}

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

.about-content h2{
    margin:0 0 20px;
    font-size:clamp(29px,4vw,44px);
    line-height:1.08;
}

.about-content>p:not(.eyebrow){
    max-width:620px;
    margin:0 0 20px;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}


/* CTA */

.home-cta{
    padding:58px 0;
    background:var(--red);
    color:#fff;
}

.cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.cta-inner h2{
    margin:0;
    font-size:clamp(28px,4vw,43px);
    line-height:1.07;
}


/* INNER PAGES */

.page-hero{
    padding:75px 0 52px;
    background:#fff;
    border-bottom:1px solid var(--line);
}

.page-hero h1{
    max-width:850px;
    margin:0;
    color:#171717;
    font-size:clamp(37px,5vw,58px);
    line-height:1.02;
}

.page-lead{
    max-width:690px;
    margin:18px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
}

.content-section{
    padding:66px 0 82px;
}

.prose{
    color:#494949;
    font-size:15px;
    line-height:1.9;
}

.prose>p:first-child{
    margin-top:0;
}

.prose h2{
    margin:44px 0 13px;
    color:#181818;
    font-size:25px;
}

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

.info-grid>div{
    padding:25px;
    background:#fff;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.info-grid strong{
    display:block;
    color:var(--red);
    font-family:"Montserrat";
    font-size:22px;
}

.info-grid span{
    color:#777;
    font-size:11px;
}

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

.detail-cta{
    margin-top:48px;
    padding:25px;
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
}

.detail-cta strong{
    display:block;
    color:#222;
    font-family:"Montserrat";
    font-size:17px;
}

.detail-cta span{
    display:block;
    margin-top:3px;
    color:#777;
    font-size:12px;
}

.detail-cta>a{
    flex:0 0 auto;
    color:var(--red);
    text-decoration:none;
    font-weight:600;
    font-size:12px;
}


/* PROJECT PAGE */

.project-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.project-list-card{
    background:#fff;
    border:1px solid var(--line);
}

.project-list-image{
    height:260px;
    background:
        radial-gradient(circle at 70% 30%,rgba(177,10,35,.25),transparent 30%),
        #222;
    background-position:center;
    background-size:cover;
}

.project-list-content{
    padding:20px;
}

.project-list-content span{
    color:var(--red);
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
}

.project-list-content h2{
    margin:7px 0 8px;
    font-size:20px;
}

.project-list-content p{
    margin:0;
    color:#747474;
    font-size:12.5px;
}


/* EMPTY */

.empty-state{
    padding:55px;
    background:#fff;
    border:1px solid var(--line);
    text-align:center;
}

.empty-state>span{
    color:var(--red);
    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
}

.empty-state h2{
    margin:10px 0;
    font-size:24px;
}

.empty-state p{
    max-width:580px;
    margin:0 auto 23px;
    color:#777;
    font-size:13px;
}


/* GALLERY */

.gallery-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:245px;
    gap:10px;
}

.gallery-card{
    position:relative;
    background:#222;
    overflow:hidden;
}

.gallery-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 60% 35%,rgba(177,10,35,.34),transparent 31%),
        linear-gradient(140deg,#242424,#111);
}

.gallery-card:nth-child(even):before{
    background:
        radial-gradient(circle at 30% 55%,rgba(255,255,255,.09),transparent 28%),
        linear-gradient(140deg,#191919,#292929);
}

.gallery-card span{
    position:absolute;
    left:16px;
    bottom:14px;
    z-index:2;
    padding:5px 7px;
    color:#fff;
    background:rgba(0,0,0,.62);
    font-size:10px;
}

.gallery-note{
    margin-top:15px;
    color:#8a8a8a;
    font-size:11px;
}


/* CONTACT */

.contact-page-grid{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:75px;
}

.contact-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.contact-info span{
    margin:0 0 5px;
    color:#999;
    font-size:9px;
    font-weight:700;
    letter-spacing:.13em;
}

.contact-info p,
.contact-info a{
    margin:0 0 26px;
    color:#222;
    text-decoration:none;
    font-size:13px;
    line-height:1.7;
}

.contact-info a:hover{
    color:var(--red);
}

.contact-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding:28px;
    background:#fff;
    border:1px solid var(--line);
}

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

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

.field label{
    margin-bottom:6px;
    color:#666;
    font-size:10px;
    font-weight:600;
}

.field input,
.field textarea{
    width:100%;
    padding:11px 12px;
    border:1px solid #dedede;
    border-radius:0;
    background:#fafafa;
    font:inherit;
    font-size:13px;
    outline:none;
}

.field input:focus,
.field textarea:focus{
    background:#fff;
    border-color:#999;
}

.field textarea{
    resize:vertical;
}

.form-success,
.form-error{
    grid-column:1/-1;
    padding:12px;
    font-size:12px;
}

.form-success{
    background:#edf7ef;
    color:#245b2b;
}

.form-error{
    background:#fff0f1;
    color:#8a1a28;
}


/* FOOTER */

.site-footer{
    padding-top:42px;
    background:#0b0b0b;
    color:#fff;
}

.footer-main{
    display:grid;
    grid-template-columns:1.5fr .7fr 1fr .7fr;
    gap:42px;
    padding-bottom:34px;
}

.footer-logo{
    display:block;
    width:145px;
    margin-bottom:15px;
}

.footer-intro p,
.footer-column p{
    max-width:310px;
    color:rgba(255,255,255,.47);
    font-size:11.5px;
    line-height:1.75;
}

.footer-intro strong{
    display:block;
    margin-top:14px;
    font-size:11px;
}

.footer-column h4{
    margin:0 0 12px;
    font-size:11px;
}

.footer-column a{
    display:block;
    margin:6px 0;
    color:rgba(255,255,255,.53);
    text-decoration:none;
    font-size:11.5px;
}

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

.footer-bottom{
    padding-top:15px;
    padding-bottom:15px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.34);
    font-size:9.5px;
}


/* MOBILE */

@media(max-width:900px){

    .site-header{
        height:60px;
    }

    .header-inner{
        width:min(calc(100% - 32px),var(--container));
    }

    .brand img{
        max-width:128px;
    }

    .header-cta{
        display:none;
    }

    .nav-toggle{
        display:flex;
        width:32px;
        height:32px;
        margin-left:auto;
        padding:8px 5px;
        flex-direction:column;
        justify-content:center;
        gap:4px;
        border:0;
        background:none;
    }

    .nav-toggle span{
        display:block;
        height:1px;
        width:100%;
        background:#111;
        transition:.18s ease;
    }

    .main-nav{
        position:absolute;
        left:0;
        right:0;
        top:60px;
        display:none;
        margin:0;
        padding:8px 16px 14px;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        border-bottom:1px solid var(--line);
    }

    .main-nav.is-open{
        display:flex;
    }

    .main-nav a{
        padding:11px 4px;
        border-bottom:1px solid #efefef;
    }

    .main-nav a.active:after{
        display:none;
    }

    .home-hero{
        height:auto;
        min-height:550px;
    }

    .hero-inner{
        min-height:550px;
        align-items:center;
    }

    .hero-side{
        display:none;
    }

    .service-cards,
    .inner-services{
        grid-template-columns:repeat(2,1fr);
    }

    .project-cards{
        grid-template-columns:repeat(2,1fr);
    }

    .project-card:last-child:nth-child(odd){
        grid-column:1/-1;
    }

    .about-layout{
        grid-template-columns:200px 1fr;
        gap:45px;
    }

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

    .contact-page-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

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

}


@media(max-width:600px){

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

    .home-hero{
        min-height:500px;
    }

    .hero-inner{
        min-height:500px;
    }

    .hero-copy h1{
        font-size:42px;
    }

    .hero-copy>p:not(.eyebrow){
        font-size:13px;
    }

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

    .home-section,
    .home-about{
        padding:55px 0;
    }

    .section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:15px;
    }

    .service-cards,
    .inner-services{
        grid-template-columns:1fr;
    }

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

    .project-cards{
        grid-template-columns:1fr;
    }

    .project-card:last-child:nth-child(odd){
        grid-column:auto;
    }

    .project-card{
        min-height:280px;
    }

    .about-layout{
        grid-template-columns:1fr;
        gap:28px;
    }

    .about-mark{
        height:145px;
    }

    .cta-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .page-hero{
        padding:57px 0 39px;
    }

    .content-section{
        padding:45px 0 60px;
    }

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

    .detail-cta{
        align-items:flex-start;
        flex-direction:column;
    }

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

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

    .field{
        grid-column:1/-1;
    }

    .empty-state{
        padding:35px 20px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:28px;
    }

    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

}

/* YKB REFERENCE PROJECT */

.project-detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);
    gap:28px;
    align-items:start;
}

.project-media{
    min-width:0;
}

.project-cover{
    width:100%;
    height:auto;
    display:block;
    border:1px solid var(--line);
    background:#fff;
}

.project-video-wrap{
    margin-top:18px;
    background:#0b0b0b;
}

.project-video-wrap video{
    display:block;
    width:100%;
    max-height:720px;
    background:#000;
}

.project-meta-card{
    position:sticky;
    top:86px;
    padding:24px;
    background:#fff;
    border:1px solid var(--line);
}

.project-client-logo{
    width:100%;
    max-width:190px;
    max-height:170px;
    object-fit:contain;
    margin:0 auto 24px;
}

.project-meta-row{
    padding:14px 0;
    border-top:1px solid var(--line);
}

.project-meta-row span{
    display:block;
    margin-bottom:3px;
    color:#999;
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.project-meta-row strong{
    display:block;
    color:#222;
    font-size:12.5px;
    line-height:1.45;
}

.project-description{
    max-width:820px;
    margin-top:55px;
}

.project-description h2{
    margin:0 0 17px;
    font-size:30px;
}

.project-description p{
    color:#5f5f5f;
    font-size:14px;
    line-height:1.9;
}

.project-source-note{
    margin-top:28px;
    padding-top:18px;
    border-top:1px solid var(--line);
    font-size:12px;
}

.project-source-note strong{
    margin-right:5px;
}

.project-source-note a{
    color:var(--red);
    text-decoration:none;
}

.featured-reference-card{
    margin-bottom:28px;
}

.featured-reference-link{
    display:grid;
    grid-template-columns:minmax(300px,.95fr) 1.05fr;
    min-height:310px;
    background:#fff;
    border:1px solid var(--line);
    text-decoration:none;
}

.featured-reference-image{
    overflow:hidden;
    background:#111;
}

.featured-reference-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.featured-reference-content{
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-reference-content>span{
    margin-bottom:10px;
    color:var(--red);
    font-size:9px;
    font-weight:700;
    letter-spacing:.13em;
}

.featured-reference-content h2{
    margin:0 0 12px;
    font-size:27px;
    line-height:1.15;
}

.featured-reference-content p{
    margin:0 0 20px;
    color:#777;
    font-size:13px;
}

.featured-reference-content b{
    color:var(--red);
    font-size:12px;
}

.ykb-project-card{
    background-size:cover;
    background-position:center;
    text-decoration:none;
}

@media(max-width:850px){

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

    .project-meta-card{
        position:static;
    }

    .featured-reference-link{
        grid-template-columns:1fr;
    }

    .featured-reference-image{
        min-height:260px;
    }

}

@media(max-width:600px){

    .featured-reference-content{
        padding:24px;
    }

    .featured-reference-content h2{
        font-size:21px;
    }

}


/* ==========================================================
   MOTTO YAPIM
   REFERENCE PROJECTS FINAL
   ========================================================== */


.reference-heading{
    margin-bottom:25px;
}

.reference-heading h2{
    margin:0;
    font-size:30px;
}


.reference-project-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-bottom:65px;
}


.reference-project-card{
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:310px;
    background:#fff;
    border:1px solid var(--line);
    color:#222;
    text-decoration:none;
}


.reference-project-image{
    min-height:310px;
    background-color:#151515;
    background-size:cover;
    background-position:center;
}


.reference-project-body{
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.reference-project-body>span{
    color:var(--red);
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
}


.reference-project-body h3{
    margin:10px 0;
    font-size:21px;
    line-height:1.17;
}


.reference-project-body p{
    margin:0 0 20px;
    color:#777;
    font-size:12px;
}


.reference-project-body b{
    color:var(--red);
    font-size:11px;
}


.ykb-card-visual{
    min-height:310px;
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
        linear-gradient(
            145deg,
            #111 0%,
            #1c1c1c 70%,
            #252525 100%
        );
    color:#fff;
}


.ykb-card-visual strong{
    display:block;
    font-family:"Montserrat",sans-serif;
    font-size:28px;
    line-height:1;
    letter-spacing:-.04em;
}


.ykb-card-visual span{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.55);
    font-size:10px;
    letter-spacing:.16em;
}


.ykb-card-visual small{
    color:rgba(255,255,255,.42);
    font-size:9px;
    letter-spacing:.14em;
}


.home-ykb-card{
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(177,10,35,.26),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #242424,
            #111
        );
}


.reference-layout{
    display:grid;
    grid-template-columns:
        minmax(0,1.65fr)
        minmax(270px,.65fr);
    gap:30px;
    align-items:start;
}


.reference-cover{
    width:100%;
    height:auto;
    border:1px solid var(--line);
}


.reference-video{
    margin-top:18px;
    background:#000;
}


.reference-video video{
    width:100%;
    max-height:720px;
    display:block;
    background:#000;
}


.reference-meta{
    position:sticky;
    top:84px;
    padding:24px;
    background:#fff;
    border:1px solid var(--line);
}


.reference-logo{
    width:100%;
    max-width:200px;
    max-height:180px;
    margin:0 auto 24px;
    object-fit:contain;
}


.meta-line{
    padding:13px 0;
    border-top:1px solid var(--line);
}


.meta-line span{
    display:block;
    margin-bottom:4px;
    color:#999;
    font-size:8.5px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}


.meta-line strong{
    display:block;
    color:#222;
    font-size:12px;
    line-height:1.5;
}


.reference-copy{
    max-width:800px;
}


.reference-copy h2{
    margin:0 0 18px;
    font-size:30px;
}


.reference-copy p{
    color:#606060;
    font-size:14px;
    line-height:1.9;
}


.reference-main .reference-copy{
    margin-top:48px;
}


.ykb-project-layout{
    display:grid;
    grid-template-columns:
        minmax(0,1.6fr)
        minmax(270px,.65fr);
    gap:60px;
    align-items:start;
}


.ykb-page-hero{
    background:#fafafa;
}


.ykb-wordmark{
    margin:22px 0 30px;
}


.ykb-wordmark span{
    display:block;
    font-family:"Montserrat",sans-serif;
    font-size:20px;
    font-weight:800;
    letter-spacing:-.04em;
}


.ykb-wordmark small{
    display:block;
    margin-top:2px;
    color:#777;
    font-size:9px;
    font-weight:600;
    letter-spacing:.15em;
}


.ykb-meta-logo{
    margin-bottom:24px;
    padding:25px 18px;
    background:#141414;
    color:#fff;
}


.ykb-meta-logo strong{
    display:block;
    font-family:"Montserrat",sans-serif;
    font-size:21px;
}


.ykb-meta-logo span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.55);
    font-size:9px;
    letter-spacing:.14em;
}


.sport-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:28px;
}


.sport-tags span{
    padding:7px 10px;
    background:#fff;
    border:1px solid var(--line);
    color:#555;
    font-size:10px;
}


.official-source{
    margin-top:38px;
    padding-top:18px;
    border-top:1px solid var(--line);
}


.official-source>span{
    display:block;
    margin-bottom:7px;
    color:#999;
    font-size:8px;
    font-weight:700;
    letter-spacing:.13em;
}


.official-source a{
    color:var(--red);
    text-decoration:none;
    font-size:12px;
    font-weight:600;
}


.db-project-section{
    padding-top:10px;
}


@media(max-width:1000px){

    .reference-project-card{
        grid-template-columns:1fr;
    }

    .reference-project-image,
    .ykb-card-visual{
        min-height:240px;
    }

}


@media(max-width:820px){

    .reference-project-grid{
        grid-template-columns:1fr;
    }

    .reference-layout,
    .ykb-project-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    .reference-meta{
        position:static;
    }

}


@media(max-width:600px){

    .reference-project-body{
        padding:22px;
    }

    .reference-project-body h3{
        font-size:19px;
    }

    .reference-copy h2{
        font-size:24px;
    }

}

/* SERVICES COMPACT FINAL */

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

.service-card{
    min-height:178px;
    padding:22px 24px;
}

.service-card .service-number{
    margin-bottom:21px;
    font-size:9px;
}

.service-card h3{
    max-width:280px;
    margin-bottom:8px;
    font-size:15px;
    line-height:1.25;
}

.service-card p{
    max-width:295px;
    color:#666;
    font-size:12px;
    line-height:1.6;
}

.service-card b{
    right:20px;
    bottom:16px;
}

.section-heading h2{
    max-width:680px;
    font-size:clamp(28px,3.4vw,41px);
    line-height:1.08;
}

@media(max-width:900px){
    .service-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .service-cards{
        grid-template-columns:1fr;
    }

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

/* SERVICES COMPACT FINAL */

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

.service-card{
    min-height:178px;
    padding:22px 24px;
}

.service-card .service-number{
    margin-bottom:21px;
    font-size:9px;
}

.service-card h3{
    max-width:280px;
    margin-bottom:8px;
    font-size:15px;
    line-height:1.25;
}

.service-card p{
    max-width:295px;
    color:#666;
    font-size:12px;
    line-height:1.6;
}

.service-card b{
    right:20px;
    bottom:16px;
}

.section-heading h2{
    max-width:680px;
    font-size:clamp(28px,3.4vw,41px);
    line-height:1.08;
}

@media(max-width:900px){
    .service-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .service-cards{
        grid-template-columns:1fr;
    }

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

/* PROJECT GRID VISUAL FINAL */

.project-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.project-card{
    min-height:245px;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(255,255,255,.07);
}

.project-overlay{
    min-height:245px;
    padding:19px 20px;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 28%,
            rgba(0,0,0,.92) 100%
        );
}

.project-overlay span{
    font-size:8px;
    letter-spacing:.12em;
}

.project-overlay h3{
    font-size:16px;
    line-height:1.25;
}

.project-overlay p{
    font-size:11px;
    line-height:1.5;
}

.dark-section{
    padding-top:58px;
    padding-bottom:60px;
}

@media(max-width:900px){
    .project-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .project-cards{
        grid-template-columns:1fr;
    }

    .project-card,
    .project-overlay{
        min-height:220px;
    }
}

/* PROJECT COVER FINAL */

.project-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.project-card{
    min-height:230px;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(255,255,255,.08);
}

.project-overlay{
    min-height:230px;
    padding:18px;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 22%,
            rgba(0,0,0,.90) 100%
        );
}

.project-overlay span{
    font-size:8px;
}

.project-overlay h3{
    font-size:15px;
    line-height:1.25;
}

.project-overlay p{
    font-size:10.5px;
    line-height:1.45;
}

@media(max-width:900px){
    .project-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .project-cards{
        grid-template-columns:1fr;
    }
}

/* MOTTO FINAL LOGO */
.header-inner .brand img,
.site-header .brand img{
    width:auto;
    max-width:205px;
    max-height:48px;
    object-fit:contain;
}

@media(max-width:700px){
    .header-inner .brand img,
    .site-header .brand img{
        max-width:155px;
        max-height:38px;
    }
}

/* ==========================================================
   EVENTS GRID FINAL
   ========================================================== */

.events-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.event-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
}

.event-card-image{
    position:relative;
    aspect-ratio:16 / 10;
    background-color:#181818;
    background-size:cover;
    background-position:center;
}

.event-card-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(177,10,35,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #292929,
            #111
        );
}

.event-card-placeholder span{
    color:rgba(255,255,255,.18);
    font-family:"Montserrat",sans-serif;
    font-size:28px;
    font-weight:800;
}

.event-card-content{
    padding:20px;
}

.event-category{
    display:block;
    margin-bottom:8px;

    color:var(--red);
    font-size:8.5px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.event-card h2{
    margin:0 0 9px;

    font-size:17px;
    line-height:1.28;
}

.event-card p{
    margin:0;

    color:#6f6f6f;
    font-size:12px;
    line-height:1.65;
}

.event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-top:15px;
    padding-top:13px;

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

.event-meta span{
    color:#888;
    font-size:9.5px;
}

@media(max-width:950px){

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

}

@media(max-width:600px){

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

}

/* HOME PROJECTS FINAL 2x2 */

.project-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.project-card{
    min-height:290px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
}

.project-overlay{
    min-height:290px;
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04) 22%,
            rgba(0,0,0,.92) 100%
        );
}

.project-overlay span{
    font-size:8px;
    letter-spacing:.12em;
}

.project-overlay h3{
    margin:6px 0 5px;
    font-size:18px;
    line-height:1.23;
}

.project-overlay p{
    margin:0;
    font-size:11px;
    line-height:1.5;
}

@media(max-width:700px){
    .project-cards{
        grid-template-columns:1fr;
    }

    .project-card,
    .project-overlay{
        min-height:235px;
    }
}