html{background-color:#fffcfc}.header-box{background-color:#fffcfc;transform:rotate(-30deg) translate(-170px) translatey(-50px);width:500px;display:flex;align-items:center;flex-direction:column;padding-right:100px;padding-left:100px;animation:scroll 1.5s;border-top:solid black 3px;border-bottom:solid black 3px;transition:all ease .5s;position:fixed;overflow:hidden;z-index:1}.header-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:#8ac87c;transform:translate(100%);transition:transform .5s ease}.header-box:hover:before{transform:translate(0)}.header-box:not(:hover):before{transform:translate(-100%)}.header-title{display:flex;align-items:center;font-family:futura-pt,sans-serif;font-weight:600;font-style:italic;font-size:xx-large;color:#000;animation:fade 2.5s;position:relative;z-index:1}@keyframes scroll{0%{transform:rotate(-30deg) translate(500px) scale(1) translatey(-50px)}50%{transform:rotate(-30deg) translate(500px) scale(1) translatey(-50px)}to{transform:rotate(-30deg) translate(-170px) scale(1) translatey(-50px)}}@keyframes fade{0%{opacity:0%}50%{opacity:0%}to{opacity:100%}}.header-video{position:absolute;transform:translatey(335px) rotate(-55deg) translate(380px);opacity:100%;pointer-events:none;z-index:1;position:fixed}@media (max-width: 768px){.header-box{position:relative}.header-video{position:relative;transform:translatey(250px) rotate(-55deg) translate(380px);opacity:100%;pointer-events:none;z-index:101}}.hero{padding-top:250px;padding-bottom:150px;max-width:1600px;margin:0 auto;position:relative;font-family:futura-pt,sans-serif;font-weight:600;font-style:italic}.hero-title{font-size:3rem;font-weight:700;font-style:italic;margin-bottom:4rem;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:50px;opacity:0;animation:titleFade 1s ease forwards;animation-delay:1.3s}.grid{max-width:1200px;margin-left:auto;margin-right:100px;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.card{position:relative;background:#fffcfc;padding:2rem 2rem 8rem;border:none;text-align:left;cursor:pointer;font-family:futura-pt,sans-serif;font-weight:600;font-style:italic;opacity:0;transform:translateY(20px);animation:fadeUp .6s ease forwards;animation-delay:var(--delay)}.card h2{font-size:1.7rem;margin-bottom:1rem;font-weight:700;opacity:0;animation:titleFade 1s ease forwards;animation-delay:1.3s}.card p{font-size:1.2em;line-height:1.5;opacity:0;animation:titleFade 1s ease forwards;animation-delay:1.3s}.card:hover{background:#8ac87c}.card:focus{outline:none}.card:focus-visible{outline:3px solid black;outline-offset:3px}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}@keyframes titleFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.draw-border:before,.draw-border:after,.draw-border>span:before,.draw-border>span:after{content:"";position:absolute;background:#000}.draw-border:before{top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;animation:drawX .4s ease forwards;animation-delay:calc(var(--delay) + .2s)}.draw-border:after{top:0;right:0;width:2px;height:100%;transform:scaleY(0);transform-origin:top;animation:drawY .4s ease forwards;animation-delay:calc(var(--delay) + .4s)}.draw-border>span:before{bottom:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:right;animation:drawX .4s ease forwards;animation-delay:calc(var(--delay) + .6s)}.draw-border>span:after{bottom:0;left:0;width:2px;height:100%;transform:scaleY(0);transform-origin:bottom;animation:drawY .4s ease forwards;animation-delay:calc(var(--delay) + .8s)}@keyframes drawX{to{transform:scaleX(1)}}@keyframes drawY{to{transform:scaleY(1)}}@media (max-width: 1100px){.grid{margin-right:2rem}}@media (max-width: 900px){.hero{padding-top:180px}.hero-title{font-size:2rem;padding-left:0}.grid{grid-template-columns:1fr;max-width:90%;margin:0 auto}.card{padding-bottom:6rem}}@media (max-width: 600px){.hero{padding-top:140px}.hero-title{font-size:1.6rem}.project-dialog{width:95vw;padding:2rem}}.project-dialog{width:min(900px,90vw);border:none;padding:0;background:transparent}.project-dialog[open]{animation:modalIn .45s cubic-bezier(.16,1,.3,1) forwards}@keyframes modalIn{0%{opacity:0;transform:translateY(40px) scale(.94)}60%{opacity:1;transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.project-dialog::backdrop{animation:backdropFade .4s ease forwards}@keyframes backdropFade{0%{background:#0000}to{background:#00000073}}.dialog-frame{position:relative;background:#fff;font-family:futura-pt,sans-serif;font-weight:600;font-style:italic;max-height:85vh;padding:0;box-sizing:border-box;overflow:hidden}.dialog-frame.draw-border:before,.dialog-frame.draw-border:after,.dialog-frame.draw-border>span:before,.dialog-frame.draw-border>span:after{animation-delay:.3s;animation-duration:.6s}.dialog-scroll{max-height:calc(85vh - 6rem);overflow-y:auto;overflow-x:hidden;padding:2.5rem}.close{position:absolute;top:1.5rem;right:1.5rem;border:none;background:none;font-size:1.75rem;cursor:pointer}.content h2{font-size:2rem;margin-bottom:1.5rem}.content img{max-width:100%;margin-bottom:2rem}.content p{margin-bottom:2rem;line-height:1.6}.tech{margin-bottom:2rem}.tech span{display:inline-block;background:#8ac87c;padding:.25rem .75rem;border-radius:20px;margin:.25rem .5rem .25rem 0;font-size:.875rem}.tech .type{display:inline-block;background:#87a0e4;padding:.25rem .75rem;border-radius:20px;margin:.25rem .5rem .25rem 0;font-size:.875rem}.links{display:flex;gap:1rem;margin-bottom:2rem}.cta-button{display:inline-block;background:#000;color:#fff;padding:.85rem 1.75rem;border-radius:6px;text-decoration:none;font-weight:700;font-style:italic;font-size:1rem;border:none;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.cta-button:hover{transform:scale(1.02);background:#1b1b1b}.cta-button:focus-visible{outline:3px solid rgb(138,200,124);outline-offset:4px}.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;margin-bottom:2rem}.video-wrapper iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}@media (max-width: 768px){.project-dialog{width:95vw}.dialog-frame{max-height:90vh}.dialog-scroll{max-height:calc(90vh - 4rem)}.content h2{font-size:1.6rem}}