#home{& #hero{display:block;justify-content:start;align-items:center;min-height:800px;height:150vh;flex-direction:column;top:0;position:relative;& .slogan{position:absolute;top:var(--content-top);left:var(--content-left-m);max-width:var(--content-max-w);margin-left:auto;margin-right:auto;z-index:15;color:white;text-shadow:var(--text-shadow);display:flex;flex-direction:column;gap:1rem;& h1{color:var(--primary-light);text-wrap:balance;max-width:800px;font-size:clamp(2rem,9.4vw,5.5rem)}& p{max-width:400px;font-size:1.6rem}& .primary{& svg{transform:rotate(-90deg)}}}& .intro{position:absolute;top:80vh;text-align:center;z-index:1;color:white;left:50%;width:70%;transform:translateX(-50%);text-shadow:var(--text-shadow);text-wrap-style:balance;font-size:clamp(1.8rem,6vw,2.9rem)}& video{position:-webkit-sticky;position:sticky;top:0;width:100%;height:100vh;object-fit:cover;display:block;z-index:0}& .overlay.gradient{height:30%;bottom:0;top:auto;transform:rotate(180deg)}& .cta{position:absolute;color:var(--primary-light);text-align:center;bottom:2rem;z-index:20;justify-self:center;&>p{font-family:Poppins;font-size:1.7rem;font-weight:600;text-shadow:var(--text-shadow)}&>div{position:relative}& svg{width:4rem;fill:white}}}}#intro-arcweeder{position:relative;height:100vh;display:flex;justify-content:center;background-color:white;top:0;padding:100px 5%;gap:3rem;& .content-wrapper{display:flex;justify-content:space-between;flex-direction:column}& .accordion-wrapper{position:relative}& .accordion{border:none;position:relative;overflow:visible;padding:0;& .content-container{display:none}& svg{transition:all .5s;fill:var(--medium-grey)}& button{font-size:1.5rem;padding:1rem}& .content{color:var(--medium-grey);transition:color .5s;border:none;transform-origin:50% 50% 0;height:65.19px;position:relative;overflow:hidden;& .content-container{display:flex;font-size:.9rem;padding:.7rem 1rem 1.3rem 3.1rem}& .border{position:absolute;bottom:0;width:100%;height:1px;background-color:#d5d5d5}&[data-selected=true]{color:var(--primary-dark);& svg{fill:var(--primary-dark)}}}}& .content-wrapper>.content{top:11%;display:flex;position:relative;flex-direction:column;z-index:15;gap:1rem;height:60%;max-width:var(--content-max-w);& h1{font-size:clamp(2.4rem,6vw,5.4rem)}& p{font-size:1.7rem;text-wrap-style:balance;& span{margin-left:5px;font-style:italic;color:darkorange;font-family:var(--font-cursive)}}}& .product-description{display:flex;gap:1rem;flex-direction:column;& span{font-weight:500}}& button:has(.arcweeder-preview-container){background-color:transparent}& .arcweeder-preview-container{position:relative;width:100%;height:100%;overflow:hidden;border-radius:10px;align-self:end;&:hover{cursor:pointer;& img{scale:1.05}}& .wrapper{position:relative}& img{transition:scale .5s;width:100%;object-position:70% 90%;object-fit:cover;height:100%}}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5);&.sixty{background-color:rgba(0,0,0,.6)}&.gradient{top:0;width:100%;z-index:10;background-color:transparent;background-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0))}}#reinventing-gardening{position:-webkit-sticky;position:sticky;top:0;background-color:var(--subtle-grey);position:relative;display:flex;height:100vh;padding-top:calc(var(--spacing) * 20);padding-bottom:calc(var(--spacing) * 70);& .content{top:100px;position:relative}& .main-content{position:absolute;left:calc(var(--content-left-m) - 1%);width:var(--content-max-w);z-index:2;display:flex;flex-direction:column;gap:2rem;& h1{text-shadow:var(--text-shadow);font-size:clamp(2rem,9.4vw,6rem)}&>div{width:37%}& button{margin-top:2rem}}& .image-container{position:relative;margin-left:auto;width:70%;& #weedLayer{position:absolute;z-index:3;width:93%;right:0;height:auto;-webkit-clip-path:inset(0 0 13% 2%);clip-path:inset(0 0 13% 2%)}& #weedFull{margin-left:auto;margin-right:auto;object-fit:cover;width:100%;max-width:none;position:relative;right:0;height:auto;-webkit-clip-path:rect(11% 87% 80% 17%);clip-path:rect(11% 87% 80% 17%)}}@media only screen and (max-width:1024px){& #home{& #intro-arcweeder{padding:40px 20px;& .intro{width:90%}}}& .main-content{left:9%;top:-5rem;width:calc(100vw - 25.4%);gap:1rem;&>div{width:100%}}& #reinventing-gardening .main-content>div{background-color:red;position:relative;width:100%}& h1{font-size:2.6rem}& .image-container{width:110%;right:10%;top:120px}}}@media only screen and (max-width:600px){#home #hero{& .content{max-width:var(--sm-content-max-w);left:var(--sm-content-left-m)}& .intro{width:90%}}#intro-arcweeder{padding:40px 20px;flex-direction:column;& .content-wrapper{gap:2rem;&>.content{max-width:none}}& .accordion{width:100%;max-width:none;& .content{left:0}}}& #reinventing-gardening{& .main-content{left:9%}}}