@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root{--hf-red:#e33124;--hf-ink:#171717;--hf-muted:#6d6d6d;--hf-line:#deded8}.hf-projects{width:100%;max-width:none;margin:0;padding:68px 40px;box-sizing:border-box;color:var(--hf-ink)}.hf-intro{padding-bottom:42px;border-bottom:1px solid var(--hf-line)}.hf-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--hf-red);display:flex;gap:8px;align-items:center;margin-bottom:22px}.hf-eyebrow i{width:6px;height:6px;background:var(--hf-red);border-radius:50%}.hf-intro h1{font-size:clamp(55px,7vw,92px);line-height:.9;letter-spacing:-.055em;font-weight:500;margin:0 0 20px}.hf-intro p{max-width:430px;color:var(--hf-muted);font-size:17px;line-height:1.5;margin:0}.hf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:0 0 27px;border-bottom:0}.hf-filters{display:flex;align-items:center;gap:42px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}.hf-filters::-webkit-scrollbar{display:none}.hf-filters button{appearance:none;background:transparent;border:0;color:#222;padding:8px 0;cursor:pointer;font:700 11px/1.2 inherit;letter-spacing:.1em;white-space:nowrap;position:relative}.hf-filters button.is-active{color:var(--hf-red)}.hf-filters button.is-active:after{content:"";height:2px;background:var(--hf-red);position:absolute;left:0;right:0;bottom:-5px}.hf-toolbar-right{display:flex;align-items:center;gap:30px;flex:0 0 auto}.hf-count{font-size:12px;color:#999;white-space:nowrap}.hf-count strong{font-weight:500}.hf-view-toggle{display:flex;gap:13px}.hf-view-toggle button{appearance:none;background:transparent;border:0;color:#777;padding:4px;cursor:pointer;font-size:20px;line-height:1}.hf-view-toggle button.is-active{color:var(--hf-red)}.hf-grid{display:grid;grid-template-columns:1.55fr .72fr .72fr;grid-template-rows:310px 310px 310px;gap:14px}.hf-slot-0{grid-column:1;grid-row:1/3}.hf-slot-1{grid-column:2/4;grid-row:1}.hf-slot-2{grid-column:2/4;grid-row:2}.hf-slot-3{grid-column:1;grid-row:3}.hf-slot-4{grid-column:2/4;grid-row:3}.hf-hidden{display:none}.hf-list-view .hf-grid{display:flex;flex-direction:column;gap:12px}.hf-list-view .hf-slot{height:260px!important;grid-column:auto!important;grid-row:auto!important}.hf-list-view .hf-card h3{font-size:34px}.hf-list-view .hf-card-copy{max-width:650px}
.hf-card{height:100%;display:block;position:relative;overflow:hidden;border-radius:9px;background:#ddd;color:#fff;text-decoration:none}.hf-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}.hf-card:hover img{transform:scale(1.035)}.hf-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.74))}.hf-card-copy{position:absolute;left:26px;right:65px;bottom:24px}.hf-cat{color:var(--hf-red);font-size:9px;font-weight:800;letter-spacing:.14em}.hf-card h3{font-size:clamp(22px,2.3vw,39px);line-height:.98;letter-spacing:-.045em;font-weight:500;margin:9px 0;color:#fff}.hf-card p{font-size:12px;line-height:1.45;color:#ddd;margin:0}.hf-arrow{position:absolute;right:22px;bottom:22px;width:44px;height:44px;border:1px solid var(--hf-red);border-radius:50%;display:grid;place-items:center;font-size:21px;color:#fff;background:transparent;transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}.hf-card:hover .hf-arrow,.hf-card:focus-visible .hf-arrow{background:var(--hf-red);border-color:var(--hf-red);color:#fff;transform:translateY(-1px)}.hf-cta{border:1px solid var(--hf-line);margin-top:30px;padding:25px 28px;display:flex;justify-content:space-between;align-items:center;gap:25px}.hf-cta span{display:block;color:var(--hf-red);font-size:9px;font-weight:800;letter-spacing:.13em;margin-bottom:8px}.hf-cta strong{font-size:26px;font-weight:500}.hf-cta a{border:1px solid #222;padding:14px 18px;color:#222;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.08em}.hf-cta b{margin-left:20px}
/* =========================================================
   HYSSNA PROJECTS — INDIVIDUAL PROJECT PAGE v2.0
   Main Projects listing styles above remain unchanged.
========================================================= */

.hf-detail{
    width:100%;
    max-width:none;
    margin:0;
    color:#171717;
    background:#fff;
    overflow:hidden;
}

.hf-detail-container{
    width:100%;
    box-sizing:border-box;
}

.hf-crumb{
    height:38px;
    padding:0 50px;
    border-bottom:1px solid #e7e7e7;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    line-height:1;
    color:#8a8a8a;
    box-sizing:border-box;
}

.hf-crumb a{
    color:#5d5d5d;
    text-decoration:none!important;
    border:0!important;
    box-shadow:none!important;
}

.hf-hero{
    display:grid;
    grid-template-columns:35% 65%;
    min-height:570px;
    border-bottom:1px solid #e4e4e4;
}

.hf-detail-copy{
    min-width:0;
    padding:55px 48px 38px 50px;
    display:flex;
    align-items:center;
    background:#fff;
    box-sizing:border-box;
    position:relative;
    z-index:2;
}

.hf-copy-inner{
    width:100%;
    max-width:355px;
}

.hf-detail-copy .hf-eyebrow,
.hf-about .hf-eyebrow,
.hf-gallery .hf-eyebrow{
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.15em;
    color:#e33124;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 18px;
}

.hf-detail-copy .hf-eyebrow i,
.hf-about .hf-eyebrow i,
.hf-gallery .hf-eyebrow i{
    display:none;
}

.hf-detail-copy h1{
    font-size:clamp(48px,4.4vw,76px);
    line-height:.98;
    letter-spacing:-.06em;
    font-weight:400;
    margin:0 0 22px;
    color:#171717;
}

.hf-project-intro{
    font-size:13px;
    line-height:1.52;
    color:#424242;
    max-width:300px;
    margin-bottom:26px;
}

.hf-meta{
    border-top:1px solid #dedede;
    padding-top:22px;
    display:grid;
    gap:13px;
    max-width:340px;
}

.hf-meta-row{
    display:grid;
    grid-template-columns:18px 70px minmax(0,1fr);
    align-items:center;
    column-gap:4px;
    min-height:17px;
}

.hf-meta-icon{
    width:15px;
    height:15px;
    display:block;
}

.hf-meta-icon svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:#929292;
    stroke-width:1.35;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hf-meta-label{
    font-size:8px;
    line-height:1.1;
    letter-spacing:.12em;
    color:#737373;
}

.hf-meta-row strong{
    font-size:10px;
    line-height:1.35;
    font-weight:500;
    color:#222;
}

.hf-back{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:38px;
    padding:12px 17px;
    min-height:37px;
    border:1px solid #777;
    border-radius:2px;
    color:#242424!important;
    background:#fff;
    text-decoration:none!important;
    box-sizing:border-box;
    font-size:9px;
    line-height:1;
    font-weight:700;
    letter-spacing:.1em;
}

.hf-back span{
    font-size:15px;
    line-height:1;
}

.hf-back:hover,
.hf-back:focus{
    color:#242424!important;
    text-decoration:none!important;
    border-color:#222;
    box-shadow:none;
}

.hf-hero-img{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#eee;
}

.hf-hero-img:before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0 auto 0 0;
    width:23%;
    pointer-events:none;
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 12%,rgba(255,255,255,.35) 60%,rgba(255,255,255,0) 100%);
}

.hf-hero-img img{
    width:100%;
    height:100%;
    min-height:570px;
    display:block;
    object-fit:cover;
    object-position:center;
}

.hf-about{
    display:grid;
    grid-template-columns:44% 56%;
    gap:0;
    padding:47px 50px 45px;
    border-bottom:1px solid #e2e2e2;
    box-sizing:border-box;
}

.hf-about-copy{
    padding-right:55px;
}

.hf-about .hf-eyebrow{
    margin-bottom:22px;
}

.hf-about-text{
    max-width:500px;
}

.hf-about-text p{
    margin:0 0 12px;
    font-size:14px;
    line-height:1.65;
    color:#3e3e3e;
}

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

.hf-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-left:1px solid #e0e0e0;
}

.hf-feature{
    min-width:0;
    padding:0 28px;
    border-right:1px solid #e0e0e0;
    box-sizing:border-box;
}

.hf-feature:last-child{
    border-right:0;
}

.hf-feature-icon{
    width:30px;
    height:30px;
    display:block;
    margin:0 0 19px;
}

.hf-feature-icon svg{
    width:30px;
    height:30px;
    fill:none;
    stroke:#222;
    stroke-width:1.25;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hf-feature b{
    display:block;
    margin-bottom:11px;
    font-size:10px;
    line-height:1.25;
    font-weight:700;
    color:#222;
}

.hf-feature p{
    margin:0;
    max-width:145px;
    font-size:10px;
    line-height:1.55;
    color:#666;
}

.hf-gallery{
    padding:30px 50px 28px;
    border-bottom:0;
    box-sizing:border-box;
}

.hf-gallery-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:19px;
}

.hf-gallery .hf-eyebrow{
    margin:0;
}

.hf-gallery-controls{
    display:flex;
    align-items:center;
    gap:8px;
}

.hf-gallery-controls>span{
    margin-right:7px;
    font-size:9px;
    color:#555;
    letter-spacing:.04em;
}

.hf-gallery-nav{
    appearance:none;
    width:38px;
    height:27px;
    padding:0;
    border:1px solid #e1e1e1;
    border-radius:15px;
    background:#fff;
    color:#999;
    font-size:14px;
    line-height:1;
}

.hf-gallery-nav:hover{
    color:#222;
    border-color:#bbb;
}

.hf-gallery-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:230px 196px;
    gap:9px;
}

.hf-gallery-item{
    display:block;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border-radius:6px;
    text-decoration:none!important;
    border:0!important;
    box-shadow:none!important;
}

.hf-gallery-item:nth-child(1){
    grid-column:1/3;
    grid-row:1;
}

.hf-gallery-item:nth-child(2){
    grid-column:3/7;
    grid-row:1;
}

.hf-gallery-item:nth-child(3){
    grid-column:1/3;
    grid-row:2;
}

.hf-gallery-item:nth-child(4){
    grid-column:3/5;
    grid-row:2;
}

.hf-gallery-item:nth-child(5){
    grid-column:5/7;
    grid-row:2;
}

.hf-gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .55s ease;
}

.hf-gallery-item:hover img{
    transform:scale(1.02);
}

.hf-cta{
    margin:0 50px 50px;
    min-height:86px;
    padding:18px 22px;
    border:1px solid #e0e0e0;
    border-radius:5px;
    display:grid;
    grid-template-columns:58px 1fr auto;
    align-items:center;
    gap:22px;
    box-sizing:border-box;
    background:#fff;
}

.hf-cta-mark{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
}

.hf-cta-mark svg{
    width:50px;
    height:50px;
    fill:none;
    stroke:#e33124;
    stroke-width:1.25;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hf-cta-copy span{
    display:block;
    margin-bottom:7px;
    color:#e33124;
    font-size:8px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.hf-cta-copy strong{
    display:block;
    font-size:20px;
    line-height:1.15;
    letter-spacing:-.025em;
    font-weight:400;
    color:#171717;
}

.hf-cta>a{
    min-width:155px;
    min-height:43px;
    padding:0 19px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-radius:3px;
    background:#e33124;
    color:#fff!important;
    text-decoration:none!important;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
    box-sizing:border-box;
}

.hf-cta>a:hover,
.hf-cta>a:focus{
    color:#fff!important;
    text-decoration:none!important;
    box-shadow:none!important;
}

.hf-cta>a b{
    font-size:16px;
    font-weight:400;
    line-height:1;
}

.hf-custom-header,
.hf-custom-footer{
    width:100%;
    text-decoration:none!important;
}

.hf-custom-header *,
.hf-custom-footer *{
    text-decoration:none!important;
}

.hf-custom-header a,
.hf-custom-header a:link,
.hf-custom-header a:visited,
.hf-custom-header a:hover,
.hf-custom-header a:focus,
.hf-custom-header a:active,
.hf-custom-footer a,
.hf-custom-footer a:link,
.hf-custom-footer a:visited,
.hf-custom-footer a:hover,
.hf-custom-footer a:focus,
.hf-custom-footer a:active{
    text-decoration:none!important;
    text-decoration-line:none!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    background-image:none!important;
}

.hf-custom-header a::before,
.hf-custom-header a::after,
.hf-custom-footer a::before,
.hf-custom-footer a::after,
.hf-custom-footer *::before,
.hf-custom-footer *::after{
    text-decoration:none!important;
    border-bottom:0!important;
    box-shadow:none!important;
}

@media(max-width:1050px){
    .hf-hero{
        grid-template-columns:39% 61%;
    }

    .hf-detail-copy{
        padding-left:32px;
        padding-right:28px;
    }

    .hf-crumb{
        padding-left:32px;
        padding-right:32px;
    }

    .hf-about,
    .hf-gallery{
        padding-left:32px;
        padding-right:32px;
    }

    .hf-cta{
        margin-left:32px;
        margin-right:32px;
    }
}

@media(max-width:850px){
    .hf-crumb{
        height:42px;
        padding:0 18px;
        font-size:9px;
        white-space:nowrap;
        overflow:hidden;
    }

    .hf-hero{
        display:flex;
        flex-direction:column;
        min-height:0;
    }

    .hf-hero-img{
        order:-1;
        min-height:65vw;
        max-height:520px;
    }

    .hf-hero-img img{
        min-height:65vw;
        max-height:520px;
    }

    .hf-hero-img:before{
        width:100%;
        height:30%;
        inset:auto 0 0;
        background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.65) 30%,rgba(255,255,255,0) 100%);
    }

    .hf-detail-copy{
        padding:32px 18px 40px;
    }

    .hf-copy-inner{
        max-width:none;
    }

    .hf-detail-copy h1{
        font-size:clamp(46px,14vw,66px);
        max-width:600px;
    }

    .hf-project-intro{
        max-width:520px;
    }

    .hf-meta{
        max-width:none;
    }

    .hf-back{
        margin-top:30px;
    }

    .hf-about{
        display:block;
        padding:38px 18px 35px;
    }

    .hf-about-copy{
        padding-right:0;
    }

    .hf-about-text{
        max-width:650px;
    }

    .hf-features{
        margin-top:34px;
        grid-template-columns:1fr;
        border-left:0;
        border-top:1px solid #e0e0e0;
    }

    .hf-feature{
        padding:21px 0;
        border-right:0;
        border-bottom:1px solid #e0e0e0;
    }

    .hf-feature:last-child{
        border-bottom:0;
    }

    .hf-feature-icon{
        margin-bottom:13px;
    }

    .hf-gallery{
        padding:28px 18px 24px;
    }

    .hf-gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:180px 180px 180px;
        gap:8px;
    }

    .hf-gallery-item:nth-child(1),
    .hf-gallery-item:nth-child(2),
    .hf-gallery-item:nth-child(3),
    .hf-gallery-item:nth-child(4),
    .hf-gallery-item:nth-child(5){
        grid-column:auto;
        grid-row:auto;
    }

    .hf-gallery-item:nth-child(1){
        grid-column:1/3;
    }

    .hf-gallery-item:nth-child(2){
        grid-column:1/3;
    }

    .hf-gallery-item:nth-child(n+6){
        display:none;
    }

    .hf-gallery-controls{
        gap:5px;
    }

    .hf-gallery-controls>span{
        margin-right:2px;
    }

    .hf-gallery-nav{
        width:34px;
        height:25px;
    }

    .hf-cta{
        margin:0 18px 35px;
        padding:18px;
        grid-template-columns:48px 1fr;
        gap:14px;
    }

    .hf-cta-mark,
    .hf-cta-mark svg{
        width:42px;
        height:42px;
    }

    .hf-cta-copy strong{
        font-size:18px;
    }

    .hf-cta>a{
        grid-column:1/3;
        width:100%;
        justify-content:space-between;
    }
}

@media(max-width:520px){
    .hf-detail-copy h1{
        font-size:46px;
    }

    .hf-gallery-grid{
        grid-template-rows:150px 150px 150px;
    }
}


/* v2.3 single-project isolation */
.hf-detail{
    isolation:isolate;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
}
.hf-detail *{
    box-sizing:border-box;
}
.hf-detail img{
    display:block;
}
.hf-detail a{
    text-decoration:none!important;
}


/* =========================================================
   HYSSNA PROJECTS v2.6 — GALLERY LIGHTBOX
========================================================= */
.hf-gallery-item{
    cursor:zoom-in;
}
.hf-gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(8,8,8,.95);
}
.hf-gallery-lightbox.is-open{display:flex;}
.hf-gallery-lightbox__image{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:calc(100vw - 150px)!important;
    max-height:calc(100vh - 100px)!important;
    object-fit:contain!important;
    margin:0!important;
    border-radius:2px;
}
.hf-gallery-lightbox__close,
.hf-gallery-lightbox__prev,
.hf-gallery-lightbox__next{
    position:absolute;
    z-index:3;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    background:rgba(0,0,0,.25);
    color:#fff!important;
    font-family:'Manrope',sans-serif!important;
    font-size:27px;
    line-height:1;
    cursor:pointer;
    box-shadow:none!important;
}
.hf-gallery-lightbox__close{top:20px;right:20px;}
.hf-gallery-lightbox__prev{left:22px;top:50%;transform:translateY(-50%);}
.hf-gallery-lightbox__next{right:22px;top:50%;transform:translateY(-50%);}
.hf-gallery-lightbox__counter{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    color:#fff!important;
    font:500 12px/1 'Manrope',sans-serif!important;
    letter-spacing:.08em;
}
@media(max-width:767px){
    .hf-gallery-lightbox{padding:15px;}
    .hf-gallery-lightbox__image{
        max-width:calc(100vw - 30px)!important;
        max-height:calc(100vh - 120px)!important;
    }
    .hf-gallery-lightbox__prev,
    .hf-gallery-lightbox__next{
        top:auto;
        bottom:18px;
        transform:none;
        width:42px;
        height:42px;
    }
    .hf-gallery-lightbox__prev{left:18px;}
    .hf-gallery-lightbox__next{right:18px;}
}


/* =========================================================
   HYSSNA PROJECTS v2.7 — FORCE MANROPE EVERYWHERE
   This stylesheet is loaded only by the standalone project
   template, so the document-wide reset is safe here.
========================================================= */
html,
html body,
body{
    font-family:'Manrope',Arial,sans-serif!important;
}

html body *,
html body *::before,
html body *::after{
    font-family:'Manrope',Arial,sans-serif!important;
}

.hf-custom-header,
.hf-custom-header *,
.hf-custom-footer,
.hf-custom-footer *{
    font-family:'Manrope',Arial,sans-serif!important;
}

.hf-custom-header a,
.hf-custom-header button,
.hf-custom-header input,
.hf-custom-header select,
.hf-custom-header textarea,
.hf-custom-footer a,
.hf-custom-footer button,
.hf-custom-footer input,
.hf-custom-footer select,
.hf-custom-footer textarea{
    font-family:'Manrope',Arial,sans-serif!important;
}


/* =========================================================
   HYSSNA PROJECTS v2.8
   TYPOGRAPHY + COLOR ONLY
   Values matched to the supplied Hyssna Projects reference.
   No layout, spacing, image, gallery, CTA, or functionality changes.
========================================================= */

/* Main individual-project page */
.hf-detail{
    color:#111!important;
}

.hf-crumb{
    font-size:10px!important;
    color:#777!important;
}

.hf-crumb a,
.hf-crumb a:visited,
.hf-crumb a:hover,
.hf-crumb a:focus{
    color:#777!important;
}

.hf-detail-copy .hf-eyebrow,
.hf-about .hf-eyebrow,
.hf-gallery .hf-eyebrow{
    font-size:10px!important;
    color:#ED1C24!important;
}

.hf-detail-copy h1{
    font-size:clamp(58px,6.4vw,88px)!important;
    color:#111!important;
}

.hf-project-intro{
    font-size:14px!important;
    color:#777!important;
}

.hf-meta-label{
    font-size:8px!important;
    color:#777!important;
}

.hf-meta-row strong{
    font-size:10px!important;
    color:#111!important;
}

.hf-back{
    font-size:9px!important;
    color:#111!important;
}

.hf-back span{
    color:#111!important;
}

.hf-about-text p{
    font-size:14px!important;
    color:#777!important;
}

.hf-feature b{
    font-size:10px!important;
    color:#111!important;
}

.hf-feature p{
    font-size:10px!important;
    color:#666!important;
}

.hf-gallery-controls>span{
    font-size:9px!important;
    color:#555!important;
}

/* Custom footer: typography/color only, without changing its structure. */
.hf-custom-footer{
    color:#111!important;
}

.hf-custom-footer p{
    font-size:14px!important;
    color:#777!important;
}

.hf-custom-footer h1,
.hf-custom-footer h2,
.hf-custom-footer h3,
.hf-custom-footer h4,
.hf-custom-footer h5,
.hf-custom-footer h6{
    color:#111!important;
}

.hf-custom-footer a,
.hf-custom-footer a:visited{
    color:#111!important;
}

.hf-custom-footer small,
.hf-custom-footer .eyebrow,
.hf-custom-footer .label,
.hf-custom-footer [class*="eyebrow"],
.hf-custom-footer [class*="label"]{
    font-size:10px!important;
    color:#ED1C24!important;
}


/* v2.9 — Heading weight only */
.hf-detail-copy h1{
    font-weight:500!important;
}


/* v3.0 — Footer text visibility only */
.hf-custom-footer,
.hf-custom-footer p,
.hf-custom-footer span,
.hf-custom-footer a,
.hf-custom-footer a:visited,
.hf-custom-footer li,
.hf-custom-footer small,
.hf-custom-footer label{
    color:#777!important;
}


/* v3.1 — Footer text color only */
.hf-custom-footer,
.hf-custom-footer p,
.hf-custom-footer span,
.hf-custom-footer a,
.hf-custom-footer a:visited,
.hf-custom-footer li,
.hf-custom-footer small,
.hf-custom-footer label{
    color:#fff!important;
}


/* =========================================================
   HYSSNA PROJECTS v3.3 — MAIN PROJECTS PAGE UI
   Match supplied reference: container + filters only.
   Individual project page is intentionally untouched.
========================================================= */

/* Center the complete projects listing at the reference width. */
.hf-projects-wrap{
    width:100%!important;
    max-width:1764px!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* Reference filter typography. */
.hf-projects-filters,
.hf-projects-filters *{
    font-family:'Manrope',Arial,sans-serif!important;
}

.hf-projects-filters button,
.hf-projects-filters a{
    font-size:13px!important;
    font-weight:600!important;
    letter-spacing:.06em!important;
}

.hf-projects-filters .active,
.hf-projects-filters button.active,
.hf-projects-filters a.active{
    color:#111!important;
}

.hf-projects-filters button:not(.active),
.hf-projects-filters a:not(.active){
    color:#b3b3b3!important;
}

.hf-projects-filters .active::after,
.hf-projects-filters button.active::after,
.hf-projects-filters a.active::after{
    background:#ED1C24!important;
}

/* Compact editorial filter spacing. */
.hf-projects-filters{
    gap:42px!important;
}

/* =========================================================
   HYSSNA PROJECTS v3.8.0
   MAIN PROJECT LISTING — 3 COLUMN GRID ONLY
========================================================= */

/* Reference content width */
.hf-projects .hf-projects__inner{
    width:min(1280px,calc(100% - 120px))!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
}

/* Full-width outer section */
section.hf-projects{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
}

/* Filters */
.hf-projects .hf-filters{
    gap:28px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
}
.hf-projects .hf-filters::-webkit-scrollbar{display:none!important;}

.hf-projects .hf-filters button{
    font-family:'Manrope',Arial,sans-serif!important;
    font-size:9px!important;
    line-height:9px!important;
    font-weight:700!important;
    letter-spacing:.10em!important;
    color:#a0a0a0!important;
    padding:8px 0!important;
    white-space:nowrap!important;
}
.hf-projects .hf-filters button.is-active{
    color:rgb(17,17,17)!important;
}
.hf-projects .hf-filters button.is-active:after{
    height:1px!important;
    background:#ED1C24!important;
    bottom:-5px!important;
}

/* Remove Bento / featured masonry treatment and use a normal 3-column grid. */
.hf-projects .hf-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    gap:16px!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
}

/* Every project occupies one normal grid cell. */
.hf-projects .hf-grid > .hf-slot{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    min-width:0!important;
    overflow:hidden!important;
}

/* Neutralize featured/Bento sizing classes. */
.hf-projects .hf-grid > .hf-slot.hf-featured,
.hf-projects .hf-grid > .hf-slot.hf-large,
.hf-projects .hf-grid > .hf-slot.hf-wide,
.hf-projects .hf-grid > .hf-slot.hf-tall,
.hf-projects .hf-grid > .hf-slot.hf-bento{
    grid-column:auto!important;
    grid-row:auto!important;
    width:auto!important;
    height:auto!important;
}

/* Hide List View controls completely. */
.hf-projects .hf-view-toggle,
.hf-projects .hf-list-toggle,
.hf-projects [data-view="list"],
.hf-projects button[data-view="list"],
.hf-projects a[data-view="list"],
.hf-projects .hf-view-list{
    display:none!important;
}

/* Hide any list-view project wrapper if present; grid is the only view. */
.hf-projects .hf-list,
.hf-projects .hf-project-list{
    display:none!important;
}

/* Tablet */
@media(max-width:1000px){
    .hf-projects .hf-projects__inner{
        width:calc(100% - 70px)!important;
        max-width:none!important;
    }
    .hf-projects .hf-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

/* Mobile */
@media(max-width:700px){
    .hf-projects .hf-projects__inner{
        width:calc(100% - 40px)!important;
        max-width:none!important;
    }
    .hf-projects .hf-grid{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }
}

/* =========================================================
   HYSSNA PROJECTS v3.9.0
   MAIN PAGE — HARD CONTAINER WIDTH FIX
========================================================= */

/* Main listing content must use the reference site's 1280px container. */
.hf-projects .hf-projects__inner,
.hf-projects .hf-projects-inner,
.hf-projects .hf-projects__container,
.hf-projects .hf-container,
.hf-projects .hf-project-grid-wrap{
    width:min(1280px,calc(100% - 120px)) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* If the listing wrapper is a direct child, keep it constrained too. */
.hf-projects > .hf-projects__inner,
.hf-projects > .hf-projects-inner,
.hf-projects > .hf-container{
    width:min(1280px,calc(100% - 120px)) !important;
    max-width:1280px !important;
}

/* Never allow the 3-column grid to determine the page width. */
.hf-projects .hf-grid{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* The outer section can be full-width; only its content is constrained. */
section.hf-projects{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}

/* Preserve the reference width at desktop/tablet. */
@media (min-width:1001px){
    .hf-projects .hf-projects__inner,
    .hf-projects .hf-projects-inner,
    .hf-projects .hf-projects__container,
    .hf-projects .hf-container,
    .hf-projects .hf-project-grid-wrap{
        width:min(1280px,calc(100% - 120px)) !important;
        max-width:1280px !important;
    }
}

@media (max-width:1000px){
    .hf-projects .hf-projects__inner,
    .hf-projects .hf-projects-inner,
    .hf-projects .hf-projects__container,
    .hf-projects .hf-container,
    .hf-projects .hf-project-grid-wrap{
        width:calc(100% - 70px) !important;
        max-width:none !important;
    }
}

@media (max-width:700px){
    .hf-projects .hf-projects__inner,
    .hf-projects .hf-projects-inner,
    .hf-projects .hf-projects__container,
    .hf-projects .hf-container,
    .hf-projects .hf-project-grid-wrap{
        width:calc(100% - 40px) !important;
        max-width:none !important;
    }
}

/* =========================================================
   HYSSNA PROJECTS v4.0.0
   MAIN PAGE — REAL WIDTH TARGET
========================================================= */

/*
 * The previous width rules targeted a wrapper that does not exist in the
 * generated markup. The actual structure is:
 * .hf-projects
 *   > .hf-toolbar
 *   > .hf-grid
 *
 * Therefore constrain the actual children directly.
 */
.hf-projects > .hf-toolbar,
.hf-projects > .hf-grid{
    width:min(1280px,calc(100% - 120px)) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* Toolbar and grid must never stretch because of flex/grid sizing. */
.hf-projects > .hf-toolbar{
    flex:none !important;
}

.hf-projects > .hf-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
}

/* Every card is a regular 3-column item. */
.hf-projects > .hf-grid > .hf-slot,
.hf-projects > .hf-grid > .hf-slot-0,
.hf-projects > .hf-grid > .hf-slot-1,
.hf-projects > .hf-grid > .hf-slot-2,
.hf-projects > .hf-grid > .hf-slot-3,
.hf-projects > .hf-grid > .hf-slot-4{
    grid-column:auto !important;
    grid-row:auto !important;
    width:auto !important;
    height:360px !important;
    min-height:360px !important;
}

/* Projects 6+ must remain visible and continue onto new rows. */
.hf-projects > .hf-grid > .hf-slot:nth-child(n+6){
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
}

/* No list view UI. */
.hf-projects .hf-view-toggle{
    display:none !important;
}

/* Desktop/tablet reference proportions. */
@media (max-width:1000px){
    .hf-projects > .hf-toolbar,
    .hf-projects > .hf-grid{
        width:calc(100% - 70px) !important;
        max-width:none !important;
    }
    .hf-projects > .hf-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:700px){
    .hf-projects > .hf-toolbar,
    .hf-projects > .hf-grid{
        width:calc(100% - 40px) !important;
        max-width:none !important;
    }
    .hf-projects > .hf-grid{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   HYSSNA PROJECTS v4.1.0
   MAIN PAGE — GRID GAPS + ACTIVE FILTER MARKER
========================================================= */

.hf-projects > .hf-grid{
    column-gap:16px !important;
    row-gap:16px !important;
}

.hf-projects > .hf-grid > .hf-slot{
    margin:0 !important;
    padding:0 !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
}

/* Reference-style active filter: black text + clear red underline. */
.hf-projects .hf-filters button{
    border:0 !important;
    border-bottom:2px solid transparent !important;
    border-radius:0 !important;
    padding:8px 0 10px !important;
    text-decoration:none !important;
    box-shadow:none !important;
}

.hf-projects .hf-filters button.is-active,
.hf-projects .hf-filters button.is-active:hover,
.hf-projects .hf-filters button.is-active:focus{
    color:#111 !important;
    border-bottom-color:#ED1C24 !important;
}

.hf-projects .hf-filters button.is-active:after{
    display:none !important;
}

@media(max-width:700px){
    .hf-projects > .hf-grid{
        row-gap:14px !important;
        column-gap:14px !important;
    }
}


/* =========================================================
   HYSSNA PROJECTS v4.2.0
   MAIN PAGE — FILTER FUNCTION + VISIBLE GRID GAPS
========================================================= */

/* Filtered cards must actually disappear. Earlier grid rules used
   !important on the slot display, which overrode .hf-hidden. */
.hf-projects > .hf-grid > .hf-slot.hf-hidden,
.hf-projects .hf-grid > .hf-slot.hf-hidden{
    display:none !important;
    visibility:hidden !important;
}

/* Keep a real, visible gutter between every row and column. */
.hf-projects > .hf-grid{
    column-gap:24px !important;
    row-gap:24px !important;
    align-items:stretch !important;
}

.hf-projects > .hf-grid > .hf-slot:not(.hf-hidden){
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
}

/* Preserve the gutter on the smaller breakpoints too. */
@media (max-width:1000px){
    .hf-projects > .hf-grid{
        column-gap:20px !important;
        row-gap:20px !important;
    }
}

@media (max-width:700px){
    .hf-projects > .hf-grid{
        column-gap:14px !important;
        row-gap:14px !important;
    }
}


/* =========================================================
   HYSSNA PROJECTS v4.3.0
   HARD GRID/FILTER FIX
========================================================= */

/* The main listing is a true 3-column CSS grid. These selectors are
   intentionally more specific than generic Elementor/theme rules. */
section.hf-projects[data-hf-projects] > div.hf-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:360px !important;
    grid-template-rows:none !important;
    gap:24px !important;
    row-gap:24px !important;
    column-gap:24px !important;
    align-items:stretch !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
}

section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-0,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-1,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-2,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-3,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-4{
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    height:360px !important;
    min-height:360px !important;
    max-height:360px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:stretch !important;
    position:relative !important;
    display:block !important;
    box-sizing:border-box !important;
}

section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card{
    width:100% !important;
    height:100% !important;
    display:block !important;
}

/* Inline display:none from the filter script must always win. */
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot.hf-hidden,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot[aria-hidden="true"]{
    display:none !important;
}

/* Grid-only interface. */
section.hf-projects[data-hf-projects] .hf-view-toggle,
section.hf-projects[data-hf-projects] [data-view="list"]{
    display:none !important;
}

/* Active filter: black label + red line. */
section.hf-projects[data-hf-projects] .hf-filters button.is-active{
    color:#111 !important;
    border-bottom:2px solid #ED1C24 !important;
}
section.hf-projects[data-hf-projects] .hf-filters button.is-active::after{
    display:none !important;
}

@media (max-width:1000px){
    section.hf-projects[data-hf-projects] > div.hf-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:340px !important;
        gap:20px !important;
    }
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-0,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-1,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-2,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-3,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-4{
        height:340px !important;
        min-height:340px !important;
        max-height:340px !important;
    }
}

@media (max-width:700px){
    section.hf-projects[data-hf-projects] > div.hf-grid{
        grid-template-columns:1fr !important;
        grid-auto-rows:300px !important;
        gap:14px !important;
    }
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-0,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-1,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-2,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-3,
    section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot-4{
        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;
    }
}


/* =========================================================
   HYSSNA PROJECTS v4.4.0 — SINGLE PROJECT HEADER ACTIVE STATE
   The standalone project template bypasses the theme body classes,
   so the Projects navigation item needs to be marked explicitly.
========================================================= */
.hf-single-project-header a.hf-projects-current-menu{
    color:#ED1C24!important;
    text-decoration:none!important;
    text-decoration-line:none!important;
    position:relative!important;
}

.hf-single-project-header a.hf-projects-current-menu::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-7px!important;
    width:auto!important;
    height:2px!important;
    background:#ED1C24!important;
    border:0!important;
    box-shadow:none!important;
    display:block!important;
    opacity:1!important;
    transform:none!important;
}

/* v4.6.0 — project gallery video support */
.hf-gallery-item--video{position:relative;overflow:hidden}
.hf-gallery-item--video video{display:block;width:100%;height:100%;object-fit:cover;border:0}
.hf-gallery-video-label{position:absolute;left:12px;top:12px;z-index:2;padding:5px 8px;border-radius:3px;background:rgba(23,23,23,.78);color:#fff;font-size:9px;line-height:1;font-weight:800;letter-spacing:.12em;pointer-events:none}
.hf-gallery-lightbox__media{display:flex;align-items:center;justify-content:center;max-width:min(90vw,1400px);max-height:88vh;width:100%;height:100%}
.hf-gallery-lightbox__media img,.hf-gallery-lightbox__media video{display:block;max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain}
.hf-gallery-lightbox__video{background:#000}
@media(max-width:700px){.hf-gallery-video-label{left:8px;top:8px}.hf-gallery-lightbox__media{max-width:94vw;max-height:82vh}.hf-gallery-lightbox__media img,.hf-gallery-lightbox__media video{max-height:82vh}}

/* =========================================================
   HYSSNA PROJECTS v5.0.0 — NAVIGATION / RESPONSIVE / VIDEO
========================================================= */

/* Previous / Next project navigation */
.hf-project-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid #e2e2e2;
    border-bottom:1px solid #e2e2e2;
    margin:0 50px;
}
.hf-project-nav__item{
    min-width:0;
}
.hf-project-nav__item + .hf-project-nav__item{
    border-left:1px solid #e2e2e2;
}
.hf-project-nav__item a{
    position:relative;
    min-height:118px;
    padding:24px 54px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#171717!important;
    text-decoration:none!important;
    box-sizing:border-box;
}
.hf-project-nav__item a:hover{
    background:#fafafa;
}
.hf-project-nav__label{
    color:#e33124;
    font-size:8px;
    font-weight:800;
    letter-spacing:.13em;
    margin-bottom:8px;
}
.hf-project-nav__item strong{
    font-size:18px;
    line-height:1.2;
    font-weight:500;
}
.hf-project-nav__arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
    color:#e33124;
}
.hf-project-nav__prev .hf-project-nav__arrow{left:22px}
.hf-project-nav__next .hf-project-nav__arrow{right:22px}
.hf-project-nav__next{text-align:right}

/* Gallery videos match image tiles. */
.hf-gallery-item--video video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background:#111;
}
.hf-gallery-video-label{
    position:absolute;
    left:12px;
    top:12px;
    z-index:2;
    padding:5px 7px;
    border-radius:3px;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-size:7px;
    font-weight:800;
    letter-spacing:.1em;
}
.hf-gallery-item--video{position:relative}

/* Lightbox media */
.hf-gallery-lightbox__video{
    max-width:92vw;
    max-height:88vh;
    width:auto;
    height:auto;
    display:block;
}

/* Mobile individual project layout */
@media(max-width:900px){
    .hf-hero{
        grid-template-columns:1fr;
        min-height:0;
    }
    .hf-detail-copy{
        padding:42px 28px 34px;
    }
    .hf-hero-img img{
        min-height:420px;
        height:62vw;
    }
    .hf-about{
        grid-template-columns:1fr;
        padding:38px 28px;
    }
    .hf-about-copy{
        padding-right:0;
        margin-bottom:34px;
    }
    .hf-features{
        border-left:0;
        border-top:1px solid #e0e0e0;
        padding-top:28px;
    }
    .hf-gallery{
        padding:28px;
    }
    .hf-gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:190px 150px 150px;
    }
    .hf-gallery-item:nth-child(1){grid-column:1/3;grid-row:1}
    .hf-gallery-item:nth-child(2){grid-column:1/3;grid-row:2}
    .hf-gallery-item:nth-child(3){grid-column:1;grid-row:3}
    .hf-gallery-item:nth-child(4){grid-column:2;grid-row:3}
    .hf-gallery-item:nth-child(5){grid-column:1/3;grid-row:4}
    .hf-gallery-item:nth-child(n+6){grid-column:auto;grid-row:auto;min-height:150px}
    .hf-project-nav{margin:0 28px}
    .hf-project-nav__item a{padding:20px 35px}
}

@media(max-width:600px){
    .hf-crumb{padding:0 20px}
    .hf-detail-copy{padding:36px 20px 30px}
    .hf-about{padding:34px 20px}
    .hf-features{grid-template-columns:1fr;gap:26px}
    .hf-feature{padding:0;border-right:0}
    .hf-gallery{padding:24px 20px}
    .hf-gallery-grid{
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:none;
        gap:8px;
    }
    .hf-gallery-item,
    .hf-gallery-item:nth-child(n){
        grid-column:auto;
        grid-row:auto;
        min-height:220px;
    }
    .hf-project-nav{
        margin:0 20px;
        grid-template-columns:1fr;
    }
    .hf-project-nav__item + .hf-project-nav__item{
        border-left:0;
        border-top:1px solid #e2e2e2;
    }
    .hf-project-nav__next{text-align:left}
    .hf-project-nav__next .hf-project-nav__arrow{right:auto;left:22px}
    .hf-project-nav__next a{padding-left:54px}
}


/* =========================================================
   HYSSNA PROJECTS v5.2.1
   PROJECT GRID — DEEP BLACK BOTTOM OVERLAY
========================================================= */

/* Keep the image visible above while creating a stronger, deeper
   black base from the lower portion of every project card. */
.hf-projects .hf-card{
    background:#111 !important;
}

.hf-projects .hf-card .hf-shade{
    inset:0 !important;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0) 32%,
        rgba(0,0,0,.025) 42%,
        rgba(0,0,0,.08) 51%,
        rgba(0,0,0,.18) 61%,
        rgba(0,0,0,.34) 71%,
        rgba(0,0,0,.55) 82%,
        rgba(0,0,0,.74) 92%,
        rgba(0,0,0,.84) 100%
    ) !important;
    z-index:1 !important;
    pointer-events:none !important;
}

/* Keep all card text and controls clearly above the overlay. */
.hf-projects .hf-card .hf-card-copy,
.hf-projects .hf-card .hf-arrow{
    z-index:2 !important;
}

.hf-projects .hf-card h3{
    text-shadow:0 1px 12px rgba(0,0,0,.18) !important;
}

@media(max-width:700px){
    .hf-projects .hf-card .hf-shade{
        background:linear-gradient(
            to bottom,
            rgba(0,0,0,0) 28%,
            rgba(0,0,0,.025) 40%,
            rgba(0,0,0,.08) 50%,
            rgba(0,0,0,.20) 62%,
            rgba(0,0,0,.40) 74%,
            rgba(0,0,0,.63) 88%,
            rgba(0,0,0,.78) 100%
        ) !important;
    }
}


/* =========================================================
   HYSSNA PROJECTS v5.3.0 — CARD IMAGE FILL FIX
   Force every project thumbnail to completely fill its card.
   Different source aspect ratios are cropped with object-fit:cover
   so no intrinsic image dimensions can create empty/black areas.
========================================================= */

section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card{
    position:relative !important;
    overflow:hidden !important;
    background:#111 !important;
}

section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card > img,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card > .hf-project-image{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:scale(1.001);
}

section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card:hover > img,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card:focus-visible > img{
    transform:scale(1.035) !important;
}

section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card > .hf-shade{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
}

section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card > .hf-card-copy,
section.hf-projects[data-hf-projects] > div.hf-grid > div.hf-slot > a.hf-card > .hf-arrow{
    z-index:3 !important;
}


/* =========================================================
   HYSSNA PROJECTS v5.4.0 — FIXED SINGLE-PROJECT HERO
   Keep the hero/image height independent of project title length.
   Give the title a wider copy area so normal project names stay
   within 2–3 lines instead of forcing the image taller.
========================================================= */
.hf-hero{
    grid-template-columns:38% 62%;
    height:620px;
    min-height:620px;
    max-height:620px;
    align-items:stretch;
    overflow:hidden;
}

.hf-detail-copy{
    min-height:0;
    height:620px;
    padding:48px 52px 38px 50px;
    align-items:center;
    overflow:hidden;
}

.hf-copy-inner{
    width:100%;
    max-width:470px;
    min-width:0;
}

.hf-detail-copy h1{
    max-width:470px;
    font-size:clamp(48px,4vw,70px);
    line-height:.94;
    letter-spacing:-.055em;
    margin:0 0 20px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

.hf-hero-img{
    height:620px;
    min-height:620px;
    max-height:620px;
}

.hf-hero-img img{
    width:100%;
    height:620px;
    min-height:620px;
    max-height:620px;
    object-fit:cover;
    object-position:center center;
}

@media(max-width:1200px) and (min-width:901px){
    .hf-hero,
    .hf-detail-copy,
    .hf-hero-img{
        height:590px;
        min-height:590px;
        max-height:590px;
    }
    .hf-detail-copy{
        padding-left:42px;
        padding-right:38px;
    }
    .hf-copy-inner,
    .hf-detail-copy h1{
        max-width:430px;
    }
    .hf-detail-copy h1{
        font-size:clamp(45px,4.1vw,64px);
    }
    .hf-hero-img img{
        height:590px;
        min-height:590px;
        max-height:590px;
    }
}

@media(max-width:900px){
    .hf-hero{
        display:grid;
        grid-template-columns:1fr;
        height:auto;
        min-height:0;
        max-height:none;
        overflow:visible;
    }
    .hf-detail-copy{
        height:auto;
        min-height:0;
        max-height:none;
        padding:42px 28px 34px;
        overflow:visible;
    }
    .hf-copy-inner,
    .hf-detail-copy h1{
        max-width:none;
    }
    .hf-detail-copy h1{
        font-size:clamp(44px,9vw,64px);
        -webkit-line-clamp:3;
    }
    .hf-hero-img{
        height:62vw;
        min-height:420px;
        max-height:none;
    }
    .hf-hero-img img{
        height:62vw;
        min-height:420px;
        max-height:none;
    }
}


/* =========================================================
   HYSSNA PROJECTS v5.5.0 — DEEPER CARD GRADIENT + READABLE TEXT
   Keep the image visible while giving the lower text area a stronger
   black gradient so every title remains readable without a hard box.
========================================================= */
.hf-projects .hf-card .hf-shade{
    inset:0 !important;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0) 28%,
        rgba(0,0,0,.015) 38%,
        rgba(0,0,0,.06) 47%,
        rgba(0,0,0,.18) 57%,
        rgba(0,0,0,.40) 66%,
        rgba(0,0,0,.66) 75%,
        rgba(0,0,0,.86) 86%,
        rgba(0,0,0,.96) 100%
    ) !important;
    z-index:2 !important;
    pointer-events:none !important;
}

.hf-projects .hf-card .hf-card-copy{
    z-index:3 !important;
    text-shadow:0 2px 16px rgba(0,0,0,.42);
}

.hf-projects .hf-card .hf-cat{
    text-shadow:0 1px 8px rgba(0,0,0,.35);
}

.hf-projects .hf-card h3{
    text-shadow:0 2px 18px rgba(0,0,0,.48) !important;
}

.hf-projects .hf-card .hf-arrow{
    z-index:4 !important;
}

@media(max-width:700px){
    .hf-projects .hf-card .hf-shade{
        background:linear-gradient(
            to bottom,
            rgba(0,0,0,0) 24%,
            rgba(0,0,0,.03) 36%,
            rgba(0,0,0,.10) 47%,
            rgba(0,0,0,.28) 59%,
            rgba(0,0,0,.52) 70%,
            rgba(0,0,0,.76) 83%,
            rgba(0,0,0,.94) 100%
        ) !important;
    }
}

/* Prevent browser autofill/autocomplete suggestion styling on project detail fields. */
.hf-admin-fields input[autocomplete="off"]{
    -webkit-autofill: none;
}

/* =========================================================
   HYSSNA PROJECTS v5.7.0 — AJAX FILTERING / MICRO-INTERACTIONS
========================================================= */
.hf-projects{position:relative}
.hf-projects.hf-filter-loading .hf-grid{pointer-events:none}
.hf-grid--filtering{opacity:.55}

/* Keep filtering immediate: no page/card transition animation. */
.hf-grid--filter-enter > .hf-slot{animation:none}

/* Subtle tactile feedback instead of page transitions. */
.hf-is-pressed{transform:translateY(1px) scale(.99)!important}
.hf-is-focused{outline:2px solid rgba(237,28,36,.22);outline-offset:3px}

/* Premium card hover: image movement and arrow feedback stay lightweight. */
.hf-card{will-change:transform}
.hf-card:hover img{transform:scale(1.035)}
.hf-card:hover .hf-arrow{transform:translateY(-2px)}
.hf-card .hf-arrow{will-change:transform,background-color}

/* Filter controls get a crisp active-state cue without sliding animations. */
.hf-projects .hf-filters button{position:relative}
.hf-projects .hf-filters button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--hf-red,#ED1C24);transform:scaleX(0);transform-origin:center}
.hf-projects .hf-filters button.is-active::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .hf-card img,.hf-card .hf-arrow{transition:none!important}
  .hf-is-pressed,.hf-is-focused{transform:none!important}
}


/* =========================================================
   HYSSNA PROJECTS v5.9.2 — STABLE LIGHTBOX NAVIGATION
   Keep gallery arrows above the media/backdrop and prevent accidental
   backdrop clicks from closing the lightbox.
========================================================= */
.hf-gallery-lightbox__prev,
.hf-gallery-lightbox__next,
.hf-gallery-lightbox__close{
    z-index:1000002 !important;
    pointer-events:auto !important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}
.hf-gallery-lightbox__media{
    position:relative;
    z-index:1;
    pointer-events:auto;
}
.hf-gallery-lightbox__counter{z-index:2;pointer-events:none;}
/* Lightbox controls must retain their own positioning transform. */
.hf-gallery-lightbox .hf-gallery-lightbox__prev.hf-is-pressed,
.hf-gallery-lightbox .hf-gallery-lightbox__next.hf-is-pressed{
    transform:translateY(-50%) !important;
}