/*

Theme Name: Alona Brodsky Studio

Description: RTL specific overrides for Hebrew

*/

@font-face {

    font-family: 'Ploni';

    src: url('assets/fonts/ploni-regular-aaa.woff2') format('woff2'),

         url('assets/fonts/ploni-regular-aaa.woff') format('woff');

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'Ploni';

    src: url('assets/fonts/ploni-medium-aaa.woff2') format('woff2'),

         url('assets/fonts/ploni-medium-aaa.woff') format('woff');

    font-weight: 500;

    font-style: normal;

    font-display: swap;

}


@font-face {

    font-family: 'Ploni';

    src: url('assets/fonts/ploni-bold-aaa.woff2') format('woff2'),

         url('assets/fonts/ploni-bold-aaa.woff') format('woff');

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}




@media (min-width: 1800px) {

    .container {

        max-width: 1800px!important;

    }

}

:root {

  --color-primary: #262726;

  --color-cream: #FFFBEE;

  --color-accent: #7592D3;

}

/* ─── Reset ─── */

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

    html { scroll-behavior: auto; } /* Lenis handles smoothness */



    body {

      background: #FFFBEE;

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

      color: #262726;

      overflow-x: hidden;

    }



    /* ─── Hero specific ─── */

    .text-hero { font-size: clamp(55px, 5.25vw, 100px); }

/*body:not(.home) nav.scrolled {

    background: #FFFBEE;

}

body.home nav.scrolled {

    background: transparent;

}*/

#nav {

    transition: background-color 0.3s ease, filter 0.4s ease;

}



#videoTrap {

    clip-path: polygon(0% 0%, 73.36% 0%, 92.28% 100%, 0% 100%);

}





.page-template-page-investors #investorVideoTrap {

    clip-path: polygon(0% 0%, 85.36% 0%, 99.28% 100%, 0% 100%);

}



@media (max-width: 1024px) {

nav.scrolled {

    background: #FFFBEE;

}

.fSection {
    position: relative;
}

    #videoTrap,

    .page-template-page-investors #investorVideoTrap {

        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

    }

}

    #videoWipe { background: #FFFBEE; transform-origin: top center; }



    .cta-link { position: relative; }

    .cta-link::after {

      content: ''; position: absolute;

      bottom: -2px; right: 0;

      width: 0; height: 1px; background: #262726;

      transition: width .35s ease;

    }

    .cta-link:hover::after { width: 100%; }




    /* ─── Projects horizontal scroll ─── */

    /*

      #projects-pin is the ScrollTrigger pin target.

      It must be exactly 100vh tall so the page lays out correctly.

      #projects-track is the wide flex container that moves horizontally.

    */





 /* ─── Hero GSAP init ─── */

    #nav { opacity: 0; transition: background-color 0.3s ease, filter 0.4s ease; }

    #nav.nav-white svg path, #nav.nav-white svg rect, #nav.nav-white svg polyline, #nav.nav-white svg line {

      stroke: #FFFBEE !important;

      fill: #FFFBEE !important;

    }

    #headline, #subtext, #ctas { opacity: 0; }

    #headline { transform: translateY(40px); }

    #subtext  { transform: translateY(26px); }

    #ctas     { transform: translateY(16px); }



    /* ─── Scrollbar hidden ─── */

   /* ::-webkit-scrollbar { display: none; }

    html { scrollbar-width: none; } */



nav a {

  position: relative;

}



nav a .link-hover-svg {

    position: absolute;

    bottom: -0.18em;

    right: 0;

    width: 100%;

    height: 0.95em;

    opacity: 0;

    transition: opacity 0.25s ease;

    pointer-events: none;

    overflow: visible;

}



nav a:hover .link-hover-svg {

  opacity: 1;

}



.menu-link .link-hover-svg path {

  stroke-dasharray: 560;

  stroke-dashoffset: 560;

  transition: stroke-dashoffset 0.4s ease;

}

.menu-link:hover .link-hover-svg path {

  stroke-dashoffset: 0;

}

a.menu-link span {

    position: relative;

    z-index: 9;

}



.text-accent {

  color: var(--color-accent);

}





.photo-mask-80 {

      clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);

    }

.photo-mask-85 {

      clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);

    }

.photo-mask-78 {

    clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);

}
.photo-mask-73 {

    clip-path: polygon(0 0, 73% 0, 100% 100%, 0 100%);

}


.page-template-page-about .about-hero-photo {

    clip-path: polygon(0 0, 67% 0, 100% 179%, 0 100%);

    top: 15rem;

    width: 151%;

    left: 335px;

}



.group:hover .group-hover\:text-white svg path {

stroke: #fff;

}

#subtext p {

    margin-bottom: 1.25rem;

}

.animated-icon path {

    will-change: stroke-dashoffset;

}

table tr td {

    border: 1px solid #000;

}

.industry-main-text p {

    margin-bottom: 15px;

}



#menuPanel .menu-link {

    overflow: visible;

}



#menuPanel .menu-link .link-hover-svg {

    right: 0 !important;

    left: auto !important;

    bottom: -0.18em !important;

    width: 105% !important;

    min-width: 0;

    max-width: none;

    height: 0.75em !important;

    transform: translateY(24%);

}



#menuPanel .menu-sub .link-hover-svg {

    min-width: 0;

}



.page-template-page-contact .contact-corner-line {

    display: none;

}



@media (max-width: 767px) {

}



@media (min-width: 1024px) {

    body.home #s1,

    body.home #s2,

    body.home #projects-pin,

    body.home #s4 {

        height: 100svh !important;

        min-height: 100svh !important;

    }



    body.home #s2 {

        justify-content: center;

        padding-top: clamp(70px, 9vh, 118px) !important;

        padding-bottom: clamp(36px, 5.5vh, 70px) !important;

    }



    body.home #s2 > .w-full {

        display: flex;

        flex-direction: column;

        justify-content: center;

        min-height: 0;

    }



    body.home #s2 .mb-28,

    body.home #s2 .md\:mb-20 {

        margin-bottom: clamp(28px, 5.5vh, 58px) !important;

    }



    body.home #s2 > .w-full > .relative > svg {

        max-height: clamp(220px, 40vh, 370px);

    }



    body.home #s4 {

        padding-top: clamp(88px, 10vh, 150px) !important;

    }



    body.home #s4 .flex-1 {

        flex: 0 1 auto !important;

    }



    body.home #s4 .mt-16 {

        margin-top: clamp(24px, 5vh, 52px) !important;

    }



    body.home #s4 .py-12 {

        padding-top: clamp(20px, 4vh, 44px) !important;

        padding-bottom: clamp(20px, 4vh, 44px) !important;

    }



    body.home #s4 img {        

        object-fit: cover;

    }



    .page-template-page-about main > section:first-of-type,

    .page-template-page-industry main > section:first-of-type,

    .page-template-page-energy main > section:first-of-type,

    .page-template-page-investors #s1,

    .page-template-page-contact main {

        min-height: 100svh;

    }

}



@media (min-width: 1024px) and (max-width: 1680px) {

    body.home #s1 .text-hero {

        font-size: clamp(58px, 5.2vw, 88px);

    }



    body.home #s1 #subtext {

        font-size: clamp(18px, 1.1vw, 21px);

        max-width: clamp(430px, 34vw, 570px);

    }



    body.home #s1 #videoTrap {

        top: 175px;
        height: 530px !important;

        clip-path: polygon(0% 0%, 70.36% 0%, 87.28% 100%, 0% 100%);

    }



    body.home #s1 #drawSvg {

        top: 120px!important;

        right: clamp(48px, 5vw, 100px) !important;

        height: 585px!important;

    }



    body.home #s1 .home-hero-content {

        right: clamp(48px, 11vw, 74px);

        top: clamp(255px, 69vh, 500px);

        width: clamp(460px, 42vw, 640px);

    }



    body.home .proj-card > .top-28 {

        top: clamp(68px, 10vh, 100px) !important;

    }



    body.home .proj-card > .top-48 {

        top: clamp(124px, 18vh, 172px) !important;

    }



    body.home .proj-card h2 {

        font-size: clamp(54px, 5.4vw, 88px) !important;

    }



    body.home .proj-card > .top-36 {

        top: clamp(96px, 15vh, 136px) !important;

    }



    body.home .proj-card .mr-60 {

        margin-right: clamp(90px, 13vw, 190px) !important;

    }



    body.home .proj-card .pr-16 {

        padding-right: clamp(28px, 4vw, 64px) !important;

    }



    body.home .proj-card .max-2xl\:max-w-\[300px\] {

        max-width: clamp(300px, 26vw, 400px) !important;

    }



    body.home .proj-card .bottom-16 {

        bottom: clamp(34px, 6vh, 60px) !important;

    }



    .page-template-page-investors #investorVideoTrap {

top: clamp(112px, 23vh, 160px);
        height: clamp(420px, 80vh, 598px);

    }



    .page-template-page-investors #drawSvg {

        height: clamp(500px, 100vh, 630px) !important;

    }


    .page-template-page-investors #investorText {
        top: clamp(300px, 30vw, 425px);
    }



    .page-template-page-about main > section:first-of-type > div:first-of-type,

    .page-template-page-industry main > section:first-of-type > div:nth-of-type(2),

    .page-template-page-energy main > section:first-of-type > div:nth-of-type(3) {

        padding-top: clamp(80px, 12vh, 140px) !important;

        padding-bottom: clamp(40px, 7vh, 90px) !important;

    }



    .page-template-page-industry main > section:first-of-type {

        grid-template-columns: minmax(0, 52%) minmax(0, 48%) !important;

        height: 100svh;

        min-height: 100svh;

        overflow: hidden;

    }



    .page-template-page-industry main > section:first-of-type > div:nth-of-type(2) {

        align-self: center;

        max-width: none !important;

        padding-inline: clamp(44px, 5vw, 88px) !important;

        padding-block: clamp(42px, 6vh, 78px) !important;

    }



    .page-template-page-industry main > section:first-of-type h1 {

        font-size: clamp(54px, 4.7vw, 86px) !important;

        line-height: 0.9 !important;

        margin-bottom: clamp(18px, 3vh, 34px) !important;

    }



    .page-template-page-industry main > section:first-of-type .industry-main-text {

        font-size: clamp(16px, 1.14vw, 21px) !important;

        line-height: 1.18 !important;

        max-width: min(100%, 620px) !important;

        margin-bottom: clamp(16px, 3vh, 32px) !important;

    }



    .page-template-page-industry main > section:first-of-type .industry-main-text p {

        margin-bottom: 0.65em;

    }

}


@media (min-width: 1400px) and (max-width: 1599px) {
    .page-template-page-investors #investorVideoTrap {
        top: clamp(112px, 23vh, 180px);
        height: clamp(420px, 80vh, 550px);
    }


}
@media (min-width: 1280px) and (max-width: 1368px) {

    
    .page-template-page-investors #drawSvg {
    top: 5rem;
}

}




@media (min-width: 1260px) and (max-width: 1300px) {

    .page-template-page-investors #investorVideoTrap {

top: clamp(112px, 30vh, 190px);
        height: clamp(420px, 60vh, 560px);
        width: 54%;
        /* clip-path: polygon(0% 0%, 85.36% 0%, 101.28% 100%, 0% 100%);

    }



    .page-template-page-investors .stats-row-container {

        width: 100%;

        height: 175px;

    }



    .page-template-page-contact .photo-col {

         top: 0;

        width: 58%;

        clip-path: polygon(0 0, 77% 0, 100% 100%, 0 100%);

    }



    .page-template-page-contact .contact-hero-line {

             bottom: -11rem;

        z-index: 1;

        right: 375px;

    }



    .page-template-page-energy .energy-hero-line {

        top: clamp(100px, 9.375vw, 180px);

        left: 8.5rem;

        max-width: 60%;

    }



    .page-template-page-energy .photo-col {

        top: 0;

        width: 55%;

        height: 100%;

        clip-path: polygon(0 0, 74% 0, 100% 100%, 0 100%);

    }



    .page-template-page-industry .industry-hero-line {

                inset: -10rem;

        top: 6rem;

        right: 10rem;

    }



    .page-template-page-about .about-hero-line {

        top: 12rem;

        left: -14rem;

    }



    .page-template-page-about .about-hero-photo {

                clip-path: polygon(0 0, 67% 0, 100% 163%, 0 100%);

        top: 15rem;

        width: 169%;

        left: 216px;

    }



    .page-id-315 .page-hero-title-wrap {

        padding-top: 7rem;

    }



    body.home #s1 .home-hero-content {

right: 6rem;
        top: clamp(200px, 28.729vw, 590px);
        width: 42%;

    }



}



@media (min-width: 1340px) and (max-width: 1390px) {

        .page-template-page-investors #investorVideoTrap {

        top: clamp(112px, 29vh, 160px);
        height: clamp(422px, 75vh, 528px);
        width: 55%;
        /* clip-path: polygon(0% 0%, 85.36% 0%, 101.28% 100%, 0% 100%); */

    }



    .page-template-page-investors .stats-row-container {

        width: 100%;

        height: 190px;

    }



    .page-template-page-contact .photo-col {

         top: 0;

        width: 58%;

        clip-path: polygon(0 0, 77% 0, 100% 100%, 0 100%);

    }

    



    .page-template-page-contact .contact-hero-line {

               bottom: -8rem;

        z-index: 1;

        left: -12rem;

    }



    .page-template-page-energy .energy-hero-line {

        top: clamp(100px, 9.375vw, 180px);

        left: 6.5rem;

        max-width: 60%;

    }



    .page-template-page-energy .photo-col {

                top: 0;

        width: 52%;

        height: 100%;

        clip-path: polygon(0 0, 74% 0, 100% 100%, 0 100%);

    }



    .page-template-page-industry .industry-hero-line {

        inset: -17rem;

        top: 6rem;

        right: 10rem;

    }



    .page-template-page-about .about-hero-line {

        top: 12rem;

        left: -14rem;

    }



    .page-template-page-about .about-hero-photo {

       clip-path: polygon(0 0, 68% 0, 100% 168%, 0 100%);

        top: 15rem;

        width: 169%;

        left: 216px;

    }



    .page-id-315 .page-hero-title-wrap {

        padding-top: 8rem;

    }



    body.home #s1 .home-hero-content {

                right: 5rem;

        top: clamp(200px, 35.729vw, 590px);

        width: 42%;

    }



}



@media (min-width: 1640px) and (max-width: 1710px) {

    .page-template-page-investors #investorVideoTrap {

        top: clamp(112px, 18vh, 150px);

        height: clamp(420px, 80vh, 585px);

        width: 59%;

        clip-path: polygon(0% 0%, 85.36% 0%, 98.28% 100%, 0% 100%);

    }



    .page-template-page-investors .stats-row-container {

        width: 100%;

        height: 230px;

    }



    .page-template-page-contact .photo-col {

             top: 0;

        width: 58%;

        clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);

    }



    .page-template-page-contact .contact-hero-line {

                      bottom: -7rem;

        left: -2rem;

        z-index: 1;

    }



    .page-template-page-energy .energy-hero-line {

        top: clamp(100px, 9.375vw, 180px);

        left: 3.5rem;

        max-width: 60%;

    }



    .page-template-page-energy .photo-col {

        top: 0;

        width: 50%;

        height: 100%;

        clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);

    }



    .page-template-page-industry .industry-hero-line {

        inset: 5rem;

        top: 12rem;

        right: 10rem;

    }



    .page-template-page-about .about-hero-line {

        top: 12rem;

        left: -7rem;

    }



    .page-template-page-about .about-hero-photo {

        clip-path: polygon(0 0, 67% 0, 100% 167%, 0 100%);

        top: 15rem;

        width: 130%;

        left: 227px;

    }



    .page-id-315 .page-hero-title-wrap {

        padding-top: 10rem;

    }



    body.home #s1 .home-hero-content {

                right: 6rem;

        top: clamp(200px, 32.729vw, 590px);

        width: 42%;

    }



}



@media (min-width: 1880px) and (max-width: 1960px) {

    .page-template-page-investors #investorVideoTrap {

        top: clamp(112px, 21vh, 166px);

        height: clamp(420px, 74vh, 675px);

        clip-path: polygon(0% 0%, 85.36% 0%, 99.28% 100%, 0% 100%);

    }

}



@media (min-width: 1024px) and (max-width: 1366px) {

    .page-template-page-industry main > section:first-of-type > div:nth-of-type(2) {

        padding-inline: 48px !important;

        padding-block: 34px !important;

    }



    .page-template-page-industry main > section:first-of-type h1 {

        font-size: clamp(50px, 4.55vw, 62px) !important;

        margin-bottom: 18px !important;

    }



    .page-template-page-industry main > section:first-of-type .industry-main-text {

        font-size: 16px !important;

        line-height: 1.13 !important;

    }



    body.home #s2 .leading-\[1\.21\] {

        font-size: clamp(24px, 3vw, 30px) !important;

    }



    body.home #s2 .text-\[clamp\(60px\,6\.25vw\,120px\)\] {

        font-size: clamp(72px, 7vw, 96px) !important;

    }



    body.home .proj-card .text-\[clamp\(18px\,1\.146vw\,22px\)\] {

        font-size: clamp(17px, 1.35vw, 19px) !important;

    }

}



@media (min-width: 1024px) and (max-width: 1280px) {

    body.home #s1 .home-hero-content {

        width: min(45vw, 430px);

    }

#menuPanel .menu-link {
    font-size: 2vw;
}

    body.home #s1 #subtext {

        line-height: 1.38;

    }



    body.home .proj-card .mr-60 {

        margin-right: clamp(70px, 10vw, 130px) !important;

    }



    body.home .proj-card .pr-16 {

        padding-right: clamp(20px, 3vw, 38px) !important;

    }

}



@media (min-width: 1880px) and (max-width: 1960px) {

    body.home #s1 #videoTrap {

        clip-path: polygon(0% 0%, 70.36% 0%, 87.28% 100%, 0% 100%) !important;

        top: clamp(150px, 8.854vw, 170px);

        height: clamp(263px, 42.417vw, 680px);

    }

}



@media (min-width: 1640px) and (max-width: 1710px) {

    body.home #s1 #videoTrap {

        clip-path: polygon(0% 0%, 70.36% 0%, 87.28% 100%, 0% 100%) !important;
        top: 185px !important;
        height: 650px !important;

    }
    body.home #s1 #drawSvg {
        top: 130px !important;
        right: clamp(48px, 5vw, 100px) !important;
        height: 705px !important;
    }

}



@media (min-width: 1340px) and (max-width: 1390px) {

    body.home #s1 #videoTrap {

        height: 410px !important;
        top: 175px;

    }

    body.home #s1 #drawSvg {
        height: 455px !important;
    }

body.home #s1 .home-hero-content {
        top: 305px;
        transform: scale(0.8);
        transform-origin: top right;
    }
}



@media (min-width: 1260px) and (max-width: 1300px) {

    body.home #s1 #videoTrap {
        top: 175px !important;
        height: 560px !important;

    }

}



@media (min-width: 1024px) and (max-height: 760px) {




    body.home #s2 .mb-28,

    body.home #s2 .md\:mb-20 {

        margin-bottom: 24px !important;

    }



    body.home #s4 {

        padding-top: 76px !important;

    }



    body.home #s4 .mt-16 {

        margin-top: 20px !important;

    }

}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
}

#preloader video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home #body_content {
    opacity: 0;
}
.font-normal strong {
    font-weight: 700;
}

.policy-content table {
    width: 75%;
}
.policy-content table td {
    padding: 5px 10px;
}
.properties-bg{
    background-size:cover;
    background-position:center;
}
@keyframes scrollHint {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}
@media (max-width: 1023px) {
    section#properties-section {
    position: relative;
}
.policy-content table {
    width: 100%;
}
}


@media (min-width: 767px) and (max-height: 700px) {
        .page-template-page-investors #investorVideoTrap {
        height: clamp(420px, 70vh, 598px);
    clip-path: polygon(0% 0%, 86% 0%, 100% 100%, 0% 100%);
    }
    .page-template-page-investors #enSvg {
        display: none;
    }
}
@media (min-width: 1023px) {

    .scrollable-section .inner-scroll {
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

            /* Base styles */
        body {
            margin: 0;
            padding: 0;
            /* Allow native vertical scrolling, but hide horizontal scrollbars */
            overflow-x: hidden; 
        }

        /* Each page is absolute within the pinned wrapper */
        .fSection {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            will-change: transform;
            overflow: hidden;
        }

        /* Horizontal slider wrap inside the projects page */
        .horizontal-wrap {
            display: flex;
            width: 500vw; /* 5 projects * 100vw */
            height: 100vh;
            will-change: transform;
            
            /* CRITICAL FIX FOR RTL: 
               Force the 500vw container to align its right edge 
               to the right edge of the screen. 
               Without this, browsers might align it to the left, breaking the view! */
            position: absolute;
            right: 0;
            top: 0;
        }

        .horizontal-slide {
            width: 100vw;
            height: 100vh;
            flex-shrink: 0;
            position: relative;
        }

          #scrub-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.fSection {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
}

.horizontal-wrap {
    display: flex;
    width: max-content;
    height: 100%;
}

.slide {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
}  
}