/* ==========================================================
   01. RESET
========================================================== */
*,::before,::after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:auto}body{min-height:100vh;overflow-x:hidden;background:#030115;color:#fff;font-family:"DM Sans",sans-serif;font-size:1rem;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* ==========================================================
   02. ROOT VARIABLES
========================================================== */
:root{    --primary-color:#030115;    --secondary-color:#111827;    --accent-color:#4de0ff;    --text-color:#ffffff;
    --text-light:#b9bfd3;    --container:1400px;    --radius:12px;    --section-space:8rem;    --transition:.35s ease; 

--grbg: linear-gradient(135deg,  rgba(0,85,219,1) 0%,rgba(214,54,122,1) 43%,rgba(247,144,33,1) 60%,rgba(247,144,33,1) 100%);

}
/* ==========================================================
   03. MEDIA
========================================================== */
img,picture,video,canvas,svg{    display:block;    max-width:100%;    height:auto;}
img{    user-select:none;    -webkit-user-drag:none;}
/* ==========================================================
   04. TYPOGRAPHY
========================================================== */
h1,h2,h3,h4,h5,h6{    line-height:1.1;   font-weight:700;   overflow-wrap:break-word;}
p{    line-height:1.8;    color:var(--text-light);    overflow-wrap:break-word;}
strong{    font-weight:700;}
small{    font-size:.875rem;}
/* ==========================================================
   05. LINKS
========================================================== */
a{    color:inherit;    text-decoration:none;    transition:var(--transition);}
/* ==========================================================
   06. LISTS
========================================================== */
ul,ol{    list-style:none;}
/* ==========================================================
   07. TABLES
========================================================== */
table{    border-collapse:collapse;    border-spacing:0;}
/* ==========================================================
   08. FORM ELEMENTS
========================================================== */
input,button,textarea,select{    font:inherit;    color:inherit;    background:none;    border:none;    outline:none;}
button{    cursor:pointer;}
textarea{    resize:vertical;}
/* ==========================================================
   09. LAYOUT
========================================================== */
section{    position:relative;}
.container{    width:min(100% - 3rem, var(--container));    margin-inline:auto;}
.container-large{    width:min(100% - 3rem, 1800px);    margin-inline:auto;}.flex{    display:flex;}
.flex-wrap{    flex-wrap:wrap;}.align-center{    align-items:center;}.justify-between{    justify-content:space-between;}.grid{    display:grid;}
/* ==========================================================
   10. SPACING
========================================================== */
.section{    padding:var(--section-space) 0;}
.section-large{    padding:12rem 0;}
.fullscreen{    min-height:100vh;}
/* ==========================================================
   11. UTILITIES
========================================================== */
.text-center{    text-align:center;} .hidden{    overflow:hidden;}
.relative{    position:relative;}
.absolute{    position:absolute;}
.z-1{    z-index:1;}
.z-10{    z-index:10;}
.z-100{    z-index:100;}
/* ==========================================================
   12. GSAP HELPERS
========================================================== */
.pin-spacer{    overflow:hidden;}
.will-change{    will-change:transform,opacity;}
[data-speed]{    will-change:transform;}
/* ==========================================================
   13. SELECTION
========================================================== */
::selection{    background:var(--accent-color);    color:#030115;}
/* ==========================================================
   14. SCROLLBAR
========================================================== */
::-webkit-scrollbar{    width:10px;}
::-webkit-scrollbar-track{    background:#080818;}::-webkit-scrollbar-thumb{    background:#4de0ff;    border-radius:20px;}
/* Firefox */
*{    scrollbar-width:thin;    scrollbar-color:#4de0ff #080818;}
/* ==========================================================
   15. ACCESSIBILITY
========================================================== */
@media (prefers-reduced-motion:reduce){
    html{        scroll-behavior:auto;    }
    *,    *::before,    *::after{        animation-duration:.01ms !important;        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;        scroll-behavior:auto !important;    }
}

body {   font-family: "Geist", sans-serif; font-size: 1rem; }

.flex-container { display: flex; flex-wrap: wrap;  justify-content: space-between;} .align-center { align-items: center;}
.container-large, .container { width: calc(100% - 0px); max-width 1800px;; padding: 0 50px;}
.container-large { max-width: 2000px; margin: 0 auto;  }
.header-wrapp { position: fixed; top: 0; left: 0; z-index: 1600; width: 100%; padding: 40px 0;}
.site-logo:link, .site-logo:visited { width: 180px; display: block;}
/* ---------------- menu --------------------- */
.hamburger {    width: 36px;}
.hamburger .line {    width: 30px;    height: 2px;    background-color: #6f7272;    display: block;    margin: 5px auto;    -webkit-transition: all 0.3s ease-in-out;    -o-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}
.menu-overlay.menu-open .hamburger .line {    background-color: var(--brandColor);}
.hamburger:hover {    cursor: pointer;}
/* ONE */
.hamburger.is-active .line:nth-child(2) {    opacity: 0;}
.hamburger.is-active .line:nth-child(1) {    -webkit-transform: translateY(6px) rotate(45deg);    -ms-transform: translateY(6px) rotate45deg);    -o-transform: translateY(6px) rotate(45deg);    transform: translateY(6px) rotate(45deg);}
/* ONE */
.hamburger.is-active .line:nth-child(3) {    -webkit-transform: translateY(-9px) rotate(-45deg);    -ms-transform: translateY(-9px) otate(-45deg);    -o-transform: translateY(-9px) rotate(-45deg);    transform: translateY(-9px) rotate(-45deg);}
/* ------------------------------ */
/* ----------------------- header -------------------------- */
/* ----------------------- hero section -------------------------- */
.home-hero-section { height: 100svh; position: relative; background-image: url(../images/hero-image.webp); background-repeat: no-repeat; background-repeat: no-repeat;  background-size: cover; background-position: center center;  }
.hero-p { width: 400px;}
.hero-caption-wrapp { width: calc(100% - 0px);}
.hero-caption { width: calc(731px - 0px); }
.hero-bottom { position: absolute; bottom: 0; left:0; width: 100%; padding-bottom: 60px; }
/* ----------------------- hero section -------------------------- */
/* ----------------------- grow section video -------------------------- */
.grow-section{  position:relative;  /* Pull upward into hero */  z-index:20;}
/* Sticky area */
.grow-sticky{    height:100svh;  position:sticky;  top:0;  display:flex;  align-items:flex-start;  justify-content:center;  overflow:visible; flex-wrap: wrap; }
/* Growing Box */
.grow-box{  width:90%;  max-width:1916px;  height:auto;  background:#fff;    top:0px;  border-radius:100px;  transform:scale(0.1);
  transform-origin:center center;  z-index:9999;  will-change:transform; overflow: hidden; 
  transition:none;  backface-visibility:hidden;  transform-style:preserve-3d;  position: relative; }
.grow-box video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100;  /* object-fit: cover; */}
/* --- Particle Styling --- */
.welcome-wrapp { position: relative; overflow: hidden;}
.marquee {width:100%;overflow:hidden;white-space:nowrap;background:#050510;padding:80px 0 0}
.marquee-track{display:flex;width:max-content}
.marquee-track span {display:flex;align-items:center;flex-shrink:0;white-space:nowrap;padding-right:80px;font-size:clamp(60px,8vw,140px);font-weight:900;text-transform:uppercase;color:#fff}
/* ----------------------- grow section video -------------------------- */
.video-stage{position:relative;height:100vh;z-index:1}
.video-pin{height:100vh;overflow:hidden}
.video-pin video{width:100%;height:100%;object-fit:cover}
.story,.services,.process,.portfolio,.contact{position:relative;z-index:10;background:transparent;min-height:100vh}
.video-pin::after { content: ""; display: block; width: 100%; position: absolute; left: 0; top: 0; height: 100%; z-index: 100;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+49,000000+51,000000+99&0.4+1,0.69+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.54) 49%,rgba(0,0,0,0.55) 51%,rgba(0,0,0,0.69) 99%,rgba(0,0,0,0.69) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.welcome-wrapp{padding:100px 0}
.reveal-text{font-size:clamp(32px,3vw,60px);line-height:1.35;font-weight:500}
.reveal-text .word{display:inline-block;opacity:.15;transform:translateY(15px);transition:opacity .35s linear,transform .35s ease}
.reveal-text .word.active{opacity:1;transform:translateY(0)}
.story{height:500vh;position:relative}
.story-pin{height:100vh;position:relative;overflow:hidden}
.story-media{position:absolute;inset:0;z-index:1;top:0}
.story-media::after { content: ""; display: block; position: absolute; 
top: 0; left: 0; width: 100%; height: 100%;
z-index: 120;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+49,000000+51,000000+99&0.54+1,0.94+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.54) 0%,rgba(0,0,0,0.54) 1%,rgba(0,0,0,0.73) 49%,rgba(0,0,0,0.74) 51%,rgba(0,0,0,0.94) 99%,rgba(0,0,0,0.94) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.story-media video{width:100%;height:100%;object-fit:cover}
.story{height:400vh}
.story-pin{position:relative;height:100vh;overflow:hidden}
.story-media{position:absolute;top:0;left:0;width:100%;height:100%}
.story-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-content{position:relative;width:100%;height:100%;z-index:10}
.story-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;opacity:0}
.blinds-service{position:absolute;inset:0;display:flex;flex-direction:column}
.blind{flex:1;background:#030115;transform:scaleY(0);transform-origin:top}
.story.section{padding:0!important;margin:0!important}
.works-title h2{font-size:clamp(60px,10vw,180px);line-height:.9;font-weight:800;text-transform:uppercase}
.works-title .char{display:inline-block;will-change:transform}
.works-group-wrapp{margin:0 auto;overflow:hidden}
.work-group{display:flex;align-items:center;justify-content:space-between;gap:80px;margin:120px 0}
.work-details{flex:2}
.work-image{flex:2;will-change:transform;border-radius:50px}
.work-image img{width:100%;display:block; }
.welcome-mid-text p { font-size: 3rem; text-align: center; line-height: 1.3; }
.story-text { font-size: 2rem; text-align: center; line-height: 1.3; padding: 15px 0; }
.widgetTitle { font-size: 4rem; padding-bottom: 30px; text-align: center;}
.hero-caption h1 {    font-size: 3.7rem;    line-height: 1.1; } 
.hero-caption h2  {    font-size: 5.2rem;    line-height: 1.1; padding: 15px 0; 



} 

.marquee-track span, .hero-caption h2 { background: var(--grbg);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.container-middle { width: 100%; max-width: 1200px; margin: 0 auto;}

.work-image-item figcaption { padding: 20px 0 0 0;}

.work-image-item h4 { font-size: 1.5rem; padding-bottom: 10px;}
.work-image-item  p { }
.work-image-item ul { padding-top: 10px;}
.work-image-item  li { display: inline-block; position: relative; padding:0 20px;}
.work-image-item  li:after { content: ""; display: block; width: 5px; height: 5px; position: absolute; right: 0; background-color: #fff;  top: 10px; right: 0; border-radius: 50%;   }
.work-image-item li:first-child { padding-left: 0;} .work-image-item li:last-child :after { display: none;}


.hero-caption p {  font-size: 1.26rem;    line-height: 1.1; }


h1, h2, h3, h4, .marquee-track span {    font-family: "Geist", sans-serif; }


/* ----------------------- all btns -------------------------- */
.link-btns a:link, .link-btns a:visited { display: block; padding: 15px 25px; border: 1px solid #fff;
     border-radius: 10px; text-transform: uppercase; font-size: 10pt; letter-spacing: 2px;}
/* ----------------------- all btns -------------------------- */
/* ==========================================================
   16. RESPONSIVE
========================================================== */
@media (max-width:1200px){
    :root{
        --section-space:7rem;
    }
}
@media (max-width:992px){
    :root{
        --section-space:6rem;
    }
}
@media (max-width:768px){
    html{
        font-size:15px;
    }
    .container,
    .container-large{
        width:min(100% - 2rem, var(--container));
    }
}
@media (max-width:576px){
    html{
        font-size:14px;
    }
}