:root{--bg: #0b0c0e;--ink: #f3f0ea;--dim: rgba(243, 240, 234, .42);--accent: #c9ac86}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100vw;height:100vh;overflow:hidden;background:var(--bg);font-family:Hanken Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}img{width:100%;height:100%;object-fit:cover}.content{position:relative;width:100%;height:100%;z-index:2}nav{position:fixed;width:100%;padding:2.4em 3em;display:flex;justify-content:space-between;align-items:center;z-index:3}.nav-links{display:flex;align-items:center;gap:2.4em}.nav-item{clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}.nav-item a{position:relative;top:20px;text-decoration:none;color:var(--ink);opacity:.4;font-size:.9rem;font-weight:500;letter-spacing:.02em;transition:opacity .25s ease,color .25s ease}.nav-item a:hover{opacity:1}.nav-item a#active{opacity:1;color:var(--accent)}.brand a{opacity:1;font-size:.95rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}.hero{position:absolute;width:95%;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;color:var(--ink)}.icon,.icon-2{flex:.5;padding:0 5em;font-size:26px;opacity:.45;color:var(--accent)}.icon-2{text-align:right}.icon ion-icon,.icon-2 ion-icon{transform:scale(0)}.title{flex:2;text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}.title p{position:relative;top:110px}.title-main{font-size:clamp(2.4rem,5vw,4.1rem);font-weight:300;line-height:1.02;letter-spacing:-.015em}.title-sub{margin-top:1.1em;font-size:.72rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}footer{position:absolute;bottom:0;width:100%}.preview{position:absolute;bottom:2em;right:2em;z-index:1;display:flex;gap:.35em;clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}.preview img{position:relative;top:100px;width:78px;height:52px;cursor:pointer;outline:1px solid transparent;outline-offset:3px;transition:outline-color .25s ease,opacity .25s ease;opacity:.72}.preview img:hover{opacity:1}.preview img.active{outline-color:var(--accent);opacity:1}.hero-bg{position:fixed;inset:0;z-index:1;opacity:0;transition:opacity .6s ease;pointer-events:none}.hero-bg.visible{opacity:.5}.hero-bg img{width:100%;height:100%;object-fit:cover}.slide-num{margin:3em 0;padding-left:3em;text-align:left;color:var(--dim);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}.slide-num p{position:relative;top:30px;font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase}.container{position:fixed;width:100%;height:100%;display:flex;gap:1em}.container .col{position:relative;flex:1;width:100%;display:flex;flex-direction:column;gap:1em}.col .item{position:relative;flex:1;width:100%;background:#17181b;overflow:hidden}.c-1,.c-3,.c-5,.c-1 .item,.c-3 .item,.c-5 .item{top:100%}.c-2 .item,.c-4 .item{top:-100%}@media(max-width:900px){.icon,.icon-2{padding:0 1em;font-size:15px}}@media(max-width:768px){nav{padding:1.6em 1.4em}.nav-links{gap:1.3em}.brand a{font-size:.82rem;letter-spacing:.24em}.nav-item a{font-size:.8rem}.hero{width:100%}.icon,.icon-2{flex:0;padding:0 .9em;font-size:13px}.title{flex:1}.title-main{font-size:clamp(2rem,9vw,3rem)}.title-sub{font-size:.62rem;letter-spacing:.24em;margin-top:1.3em}.preview{left:50%;right:auto;transform:translate(-50%);bottom:3.4em;gap:.3em}.preview img{width:38px;height:27px;outline-offset:2px}.slide-num{padding-left:0;margin:1.5em 0;text-align:center}.slide-num p{font-size:.62rem;letter-spacing:.2em}}
