:root{--ink:#32384e;--muted:#7e8297;--blue:#92b4eb;--purple:#b1a0d8;--line:#e7e7f0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#fdfdff;color:var(--ink);font-family:'Noto Sans Thai',sans-serif;font-size:15px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #7c83c6;outline-offset:6px}header{height:94px;max-width:1280px;margin:auto;padding:0 44px;display:flex;align-items:center;justify-content:space-between}.logo{font:500 32px 'Outfit',sans-serif;letter-spacing:-1.6px}.logo>span{background:linear-gradient(110deg,#7daee6,#b49edb);background-clip:text;color:transparent}.logo i{display:block;font:9px 'Outfit',sans-serif;letter-spacing:2.4px;margin-top:5px;color:#8d8da1}nav{display:flex;align-items:center;gap:40px;font-size:13px}.nav-contact{border:1px solid var(--line);padding:12px 20px;border-radius:30px}.nav-contact span{margin-left:20px}.hero{max-width:1440px;min-height:620px;margin:auto;position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 45%,#e7eaff 0,transparent 58%),radial-gradient(ellipse at 10% 95%,#f0eafd,transparent 50%),#f9fbff;border-top:1px solid #f1f2f8}.hero-content{position:relative;z-index:2;max-width:1192px;margin:auto;padding:92px 0 26px}.eyebrow{font:11px 'Outfit',sans-serif;letter-spacing:2.4px;color:#8a87ac;margin:0 0 23px}.eyebrow>span{display:inline-block;background:#a99acc;border-radius:50%;width:6px;height:6px;margin:0 10px 2px 0}h1{font-size:clamp(36px,4.2vw,61px);line-height:1.45;font-weight:600;letter-spacing:-2px;margin:0 0 22px}.gradient{background:linear-gradient(100deg,#7cabe0,#ac8ec9);background-clip:text;color:transparent}.intro{line-height:1.9;color:#7c8094;font-size:15px;margin-bottom:30px}.button{display:inline-flex;align-items:center;gap:30px;border:0;border-radius:40px;background:#3d435d;color:white;padding:15px 24px;font-size:13px;box-shadow:0 8px 22px #555b7814;transition:.2s}.button:hover{background:#686c91;transform:translateY(-2px)}.hero-bottom{display:flex;justify-content:space-between;max-width:585px;border-top:1px solid #dddeeb;margin-top:66px;padding-top:19px;color:#9393a9;font:10px 'Outfit','Noto Sans Thai',sans-serif;letter-spacing:1px}.glass-ribbon{position:absolute;right:-40px;top:25px;width:480px;height:480px;border-radius:44%;border:65px solid #c5c3ef40;box-shadow:inset 10px 8px 22px #fff, inset -15px -10px 32px #a4b6e6a0, 8px 16px 30px #a4b4e533;transform:rotate(-35deg) skewY(25deg);background:linear-gradient(120deg,#fff8,transparent)}.ribbon-two{top:310px;right:90px;width:360px;height:360px;transform:rotate(30deg) skewY(-20deg);border-width:46px;opacity:.65}.floating-label{position:absolute;z-index:1;top:205px;right:145px;font:500 49px/.95 'Outfit',sans-serif;letter-spacing:2px;color:#8996c3;transform:rotate(-8deg)}.floating-label em{font-weight:400;color:#a699c9}.floating-label span{display:block;font:10px 'Noto Sans Thai',sans-serif;letter-spacing:0;margin-top:20px;color:#9190aa}.collection{max-width:1192px;margin:0 auto;padding:87px 0 40px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}h2{font-size:35px;letter-spacing:-1px;font-weight:500;line-height:1.5;margin:0}.section-head h2 span{color:var(--purple)}.section-head p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.8}.section-head .eyebrow{margin-bottom:12px}.draft-note{font-size:11px;color:#9894a9;border-top:1px solid var(--line);padding:18px 0 24px}.draft-note span{margin-right:8px}.collection-layout{display:grid;grid-template-columns:200px 1fr;gap:52px}aside{position:sticky;top:35px;align-self:start;padding-top:17px}.aside-label{font:10px 'Outfit';letter-spacing:2px;color:#a4a0b4;display:block;margin-bottom:22px}aside>a{display:flex;gap:24px;font:16px 'Outfit',sans-serif;color:#a4a3b7;padding:16px 15px;border-left:2px solid #edecf4}aside>a span{font:12px 'Noto Sans Thai',sans-serif}aside>a.active{color:#7670a7;background:linear-gradient(90deg,#f1edfa,transparent);border-color:#a799d0}.aside-bottom{margin-top:52px;font-size:11px;line-height:1.9;color:#a3a0b1;padding-left:15px}.aside-bottom span{display:block;font-size:25px;margin-top:14px;color:#aaa3c8}.work{margin-bottom:55px;scroll-margin-top:35px}.work-top{display:flex;justify-content:space-between;color:#9393a7;font:10px 'Outfit','Noto Sans Thai';letter-spacing:1px;margin-bottom:14px}.visual{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;overflow:hidden;position:relative;display:block;background:#e8edf8;text-align:left;color:#626b8f}.visual img{width:100%;height:100%;object-fit:cover}.visual-corner{position:absolute;left:25px;top:24px;font:8px/1.5 'Outfit';letter-spacing:2px;opacity:.65}.visual-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:22px 25px;font-size:11px;background:linear-gradient(transparent,#ffffffe0)}.visual-bottom>span{font-size:18px}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;height:66px;background:#ffffffb8;border:1px solid #fff;border-radius:50%;font-size:32px;backdrop-filter:blur(8px);box-shadow:0 8px 40px #6676ae22;transition:.25s}.visual:hover .play{transform:translate(-50%,-50%) scale(1.12);background:white}.art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 20% 80%,#dcd5ee,transparent 65%),linear-gradient(120deg,#edf5fb,#dbe5f6)}.art-word{position:absolute;left:0;right:0;top:38%;text-align:center;font:500 clamp(16px,3vw,39px) 'Outfit';letter-spacing:3px;color:#8f97b9}.shape{position:absolute;transition:transform .5s}.cinema .s1{width:65%;height:65%;border:1px solid #fff;left:18%;top:18%;transform:rotate(-8deg);border-radius:10px;background:linear-gradient(130deg,#fff8,#c3c9e055);box-shadow:20px 28px 40px #9fa9ce44}.cinema .s2{width:64%;height:64%;border:1px solid #fff9;left:16%;top:18%;transform:rotate(5deg);border-radius:10px}.product .art{background:radial-gradient(circle at 55% 20%,#ffffff,#e9e2f1 65%)}.product .s1{width:120px;height:180px;left:43%;top:21%;border-radius:25px 25px 30px 30px;background:linear-gradient(100deg,#e6d9ef,#ffffffe0,#cac7e7);box-shadow:12px 16px 25px #b8aac44d;transform:rotate(15deg)}.product .s2{width:180px;height:45px;border-radius:50%;background:#d9cfe2;left:39%;bottom:20%;filter:blur(16px)}.product .art-word{top:30%;font-size:24px;letter-spacing:7px}.dream .art{background:linear-gradient(145deg,#e3edf7,#e8e4f5,#f5e7ee)}.dream .s1{width:230px;height:230px;left:35%;top:18%;border:40px solid #e6e6fa;border-radius:50%;box-shadow:inset 8px 8px 13px #fff,12px 18px 30px #a4b0d155;transform:rotateX(25deg) rotateY(25deg)}.dream .art-word{top:60%;font-size:22px}.frames .art{background:#e4ebf5}.frames .s1,.frames .s2,.frames .s3{width:180px;height:230px;border:10px solid #ffffffbb;border-bottom-width:38px;border-radius:5px;background:linear-gradient(150deg,#c7d9ea,#d7c9e3);top:15%;left:19%;transform:rotate(-15deg);box-shadow:10px 10px 20px #7385aa22}.frames .s2{left:40%;transform:rotate(0deg);background:linear-gradient(20deg,#e8d5db,#d5dbf0)}.frames .s3{left:59%;transform:rotate(15deg);background:linear-gradient(20deg,#ccdfec,#e3e3f7)}.frames .art-word{top:45%;font-size:24px;z-index:1}.type .art{background:radial-gradient(circle at 65% 40%,#d8d9f6,transparent 55%),#edf0fa}.type .art-word{font-size:58px;line-height:1;top:30%;padding:0 15%;font-weight:600;letter-spacing:-2px;color:#a0aad2}.type .s1{width:500px;height:160px;border:1px solid white;border-radius:50%;left:18%;top:30%;transform:rotate(-20deg)}.work-info{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.work-info h3{font-size:21px;font-weight:500;margin:0 0 7px}.work-info p{font-size:12px;color:var(--muted);margin:0}.round-link{background:none;border:1px solid #e1e0ec;color:#9b94b8;border-radius:50%;width:38px;height:38px;font-size:21px}.contact{text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#dfdef8,transparent 65%),#f6f7fc;padding:75px 20px 82px}.contact h2{font-size:39px;line-height:1.5}.contact p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.9;margin:20px 0 26px}footer{max-width:1192px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:35px 0}footer .logo{font-size:26px}footer>span,footer>a:last-child{font-size:11px;color:#9693a6}dialog{border:1px solid #ebe8f6;border-radius:24px;padding:55px 40px 35px;max-width:800px;width:90%;text-align:center;color:var(--ink);box-shadow:0 20px 100px #45426c22}dialog::backdrop{background:#36354f60;backdrop-filter:blur(7px)}dialog h2{font-size:27px}dialog p{color:var(--muted);line-height:1.9}dialog .close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:30px;color:#8c86a6}#player:empty{display:none}#player video,#player iframe{width:100%;aspect-ratio:16/9;border:0;margin-top:20px}dialog .button{margin-top:15px}@media(min-width:1450px){.hero{border-radius:24px}}@media(max-width:1250px){.hero-content,.collection{margin-left:6%;margin-right:6%}.hero-content{padding-top:75px}.floating-label{right:9%;font-size:42px}.glass-ribbon{right:-170px}.ribbon-two{right:0}.collection-layout{grid-template-columns:155px 1fr;gap:35px}footer{padding-left:6%;padding-right:6%}}@media(max-width:800px){header{padding:0 6%;height:80px}.logo{font-size:28px}nav{gap:15px}nav>a:first-child{display:none}.nav-contact{font-size:11px;padding:10px 15px}.hero{min-height:580px}.hero-content{padding-top:56px}.hero h1{font-size:42px;letter-spacing:-1.4px}.hero .intro{font-size:13px}.glass-ribbon{opacity:.5;right:-270px;top:180px}.ribbon-two{right:-200px;top:380px}.floating-label{display:none}.hero-bottom{margin-top:55px;max-width:100%;font-size:8px}.hero-content .eyebrow{font-size:9px}.collection{padding-top:55px}.section-head{display:block}.section-head h2{font-size:30px}.section-head p:not(.eyebrow){margin:15px 0}.collection-layout{display:block}aside{z-index:4;position:sticky;top:0;display:flex;justify-content:space-around;backdrop-filter:blur(16px);background:#fcfcffed;margin:0 -7% 24px;padding:8px 5%;border-bottom:1px solid var(--line)}aside .aside-label,aside .aside-bottom,aside a span{display:none}aside>a{border:0;border-radius:20px;padding:9px 15px;font-size:14px}aside>a.active{background:#eeeafa}h2{font-size:30px}.work{scroll-margin-top:75px;margin-bottom:36px}.work-top{font-size:8px}.visual{border-radius:12px}.visual-corner{font-size:6px;left:17px;top:16px}.visual-bottom{font-size:9px;padding:12px 17px}.play{width:48px;height:48px;font-size:25px}.art-word{font-size:21px;letter-spacing:1px}.product .s1{width:70px;height:105px;top:17%}.product .art-word,.dream .art-word,.frames .art-word{font-size:15px;letter-spacing:1px}.dream .s1{height:130px;width:130px;border-width:25px;left:34%;top:15%}.frames .s1,.frames .s2,.frames .s3{width:90px;height:135px;border-width:6px;border-bottom-width:22px}.type .art-word{font-size:34px}.type .s1{width:250px;height:90px}.work-info h3{font-size:18px}.work-info p{font-size:11px;max-width:270px}.contact{padding:60px 20px}.contact h2{font-size:31px}.contact .eyebrow{font-size:9px}footer{flex-wrap:wrap;gap:20px}footer>span{display:none}.draft-note{font-size:10px;line-height:1.7}dialog{padding:50px 20px 30px}dialog h2{font-size:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Supplied brand artwork: preserve full image and original proportions. */
.brand-logo{display:block;width:270px;flex-shrink:0;line-height:0}.brand-logo img{display:block;width:100%;height:auto}footer .brand-logo{width:230px}.hero.hero-banner{min-height:0;max-width:1440px;background:#fff;border-radius:0;overflow:hidden}.hero-banner-image{display:block;width:100%;height:auto;object-fit:contain}.banner-actions{display:flex;justify-content:center;padding:2px 20px 34px;background:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:800px){header{height:80px;padding-left:2%;padding-right:5%}.brand-logo{width:200px}footer .brand-logo{width:190px}.hero.hero-banner{min-height:0}.banner-actions{padding:12px 20px 25px}.banner-actions .button{font-size:12px;padding:12px 21px}.hero-banner+.collection{padding-top:35px}}@media(max-width:380px){.brand-logo{width:165px}.nav-contact{padding:9px 12px}.nav-contact span{margin-left:8px}}

.hero.hero-combined{min-height:620px;position:relative;background:#fff;display:flex;flex-direction:column;justify-content:center;padding:70px 4% 30px}.hero-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.restored-copy{position:relative;z-index:1;width:36%;padding:20px 0 60px}.restored-copy .eyebrow{font-size:9px;letter-spacing:1.7px}.restored-copy h1{font-size:clamp(30px,3.2vw,45px);letter-spacing:-1.5px;line-height:1.55;white-space:nowrap}.restored-copy .intro{font-size:12px;line-height:2}.restored-copy .button{font-size:12px;gap:20px;padding:14px 22px}.restored-bottom{position:relative;z-index:1;border-top:1px solid #dedeea;padding-top:20px;margin-top:auto;display:flex;justify-content:space-between;font:10px 'Outfit','Noto Sans Thai';letter-spacing:1px;color:#9290aa}.hero-combined+.collection{padding-top:70px}@media(max-width:1050px) and (min-width:801px){.hero.hero-combined{min-height:520px}.restored-copy h1{font-size:31px}.restored-copy .intro{font-size:11px}.restored-copy .intro br{display:none}}@media(max-width:800px){.hero.hero-combined{display:flex;min-height:0;padding:0;background:linear-gradient(#fff,#f5f2fc)}.hero-artwork{position:relative;order:1;width:100%;height:auto;object-fit:contain}.restored-copy{order:2;width:auto;padding:26px 7% 36px}.restored-copy h1{font-size:clamp(29px,7.6vw,44px);white-space:normal}.restored-copy .eyebrow{font-size:8px;letter-spacing:1.4px}.restored-copy .intro{font-size:12px}.restored-bottom{order:3;margin:0 7% 25px;font-size:8px;gap:15px;letter-spacing:.5px;padding-top:17px}.hero-combined+.collection{padding-top:45px}}

/* Vertical 9:16 Showcase Pattern */
.work.work-vertical{margin-bottom:64px;padding-bottom:52px;border-bottom:1px solid var(--line)}
.work.work-vertical:last-child{border-bottom:0;margin-bottom:20px;padding-bottom:0}
.work.work-vertical .work-body{display:grid;grid-template-columns:minmax(250px,310px) 1fr;gap:42px;align-items:center}
.visual.visual-vertical{aspect-ratio:9/16;max-width:310px;width:100%;border-radius:24px;border:1px solid #e6e7f4;box-shadow:0 18px 46px #636b9c14}
.visual.visual-vertical .visual-corner{left:20px;top:20px;font-size:8px;letter-spacing:1.8px;color:#fff;text-shadow:0 2px 10px #1e223880;opacity:.9}
.visual.visual-vertical .visual-bottom{padding:20px;font-size:11px;color:#2f354b;font-weight:500;background:linear-gradient(transparent,#ffffffeb)}
.visual.visual-vertical .art-word{top:42%;padding:0 12%;font-size:clamp(16px,1.8vw,22px);line-height:1.35;letter-spacing:2px}
.visual.visual-vertical.cinema .s1{width:70%;height:56%;left:15%;top:21%}
.visual.visual-vertical.cinema .s2{width:68%;height:55%;left:16%;top:22%}
.visual.visual-vertical.product .s1{width:110px;height:190px;left:32%;top:24%}
.visual.visual-vertical.product .s2{width:140px;height:40px;left:27%;bottom:22%}
.visual.visual-vertical.product .art-word{top:34%;font-size:17px;letter-spacing:4px}
.visual.visual-vertical.dream .s1{width:185px;height:185px;left:20%;top:22%;border-width:32px}
.visual.visual-vertical.dream .art-word{top:62%;font-size:18px}
.visual.visual-vertical.frames .s1,.visual.visual-vertical.frames .s2,.visual.visual-vertical.frames .s3{width:130px;height:180px;border-width:8px;border-bottom-width:28px;top:24%}
.visual.visual-vertical.frames .s1{left:12%;transform:rotate(-13deg)}
.visual.visual-vertical.frames .s2{left:29%;transform:rotate(0deg)}
.visual.visual-vertical.frames .s3{left:46%;transform:rotate(13deg)}
.visual.visual-vertical.frames .art-word{top:46%;font-size:18px}
.visual.visual-vertical.type .art-word{font-size:34px;top:35%;padding:0 10%;letter-spacing:-1px}
.visual.visual-vertical.type .s1{width:260px;height:120px;left:8%;top:38%}

.work.work-vertical .work-info{margin-top:0;align-items:flex-start;gap:20px}
.work-badge{display:inline-block;font:600 9px 'Outfit',sans-serif;letter-spacing:1.8px;color:#7a75a8;background:#f2effb;border:1px solid #e4dff5;padding:5px 11px;border-radius:20px;margin-bottom:14px}
.work.work-vertical .work-info h3{font-size:24px;margin:0 0 10px}
.work.work-vertical .work-info p{font-size:14px;line-height:1.85;max-width:420px;margin:0 0 22px}
.work-cta{display:inline-flex;align-items:center;gap:14px;background:#f7f8fd;border:1px solid #e2e4f2;color:#4a5070;padding:11px 18px;border-radius:30px;font-size:12px;transition:.2s}
.work-cta:hover{background:#eceefb;border-color:#cfd3ec;transform:translateY(-1px)}

dialog.dialog-vertical{max-width:460px;padding:44px 28px 28px}
#player.player-vertical video,#player.player-vertical iframe{aspect-ratio:9/16;max-width:300px;max-height:62vh;width:100%;margin:16px auto 0;display:block;border-radius:18px;background:#eef1fa;box-shadow:0 14px 36px #4e557e1c}
.modal-placeholder{aspect-ratio:9/16;max-width:250px;max-height:50vh;width:100%;margin:16px auto 8px;border-radius:18px;position:relative;overflow:hidden;border:1px solid #e5e6f4;box-shadow:0 12px 32px #58608e14}
.modal-placeholder .art-word{font-size:18px;padding:0 12%;top:42%}
.modal-ratio-tag{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:600 9px 'Outfit',sans-serif;letter-spacing:1.8px;color:#6c7296}

@media(max-width:800px){
 .work.work-vertical{margin-bottom:44px;padding-bottom:38px}
 .work.work-vertical .work-body{grid-template-columns:1fr;gap:20px;justify-items:center}
 .visual.visual-vertical{max-width:280px;border-radius:20px}
 .work.work-vertical .work-info{width:100%;max-width:320px;align-items:center}
 .work.work-vertical .work-info h3{font-size:20px}
 .work.work-vertical .work-info p{font-size:12px;max-width:100%;margin-bottom:16px}
 dialog.dialog-vertical{max-width:390px;padding:42px 20px 24px}
 #player.player-vertical video,#player.player-vertical iframe{max-width:250px;max-height:56vh}
 .modal-placeholder{max-width:210px;max-height:44vh}
}

/* Horizontal Program Demo Section (Before Contact) */
.demo-section{max-width:1192px;margin:0 auto;padding:24px 0 88px;border-top:1px solid var(--line)}
.demo-card{background:linear-gradient(145deg,#ffffff,#f7f8fe);border:1px solid #e5e6f4;border-radius:28px;padding:30px 34px 34px;box-shadow:0 20px 55px #5e669712}
.demo-player-wrap{width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#1a162b;border:1px solid #e1e2f2;box-shadow:0 14px 38px #3c42691f}
.demo-player-wrap video{display:block;width:100%;height:100%;object-fit:cover}
.demo-info{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-top:26px}
.demo-info h3{font-size:24px;font-weight:500;margin:0 0 8px}
.demo-info p{font-size:14px;color:var(--muted);line-height:1.85;margin:0;max-width:650px}
@media(max-width:1250px){
 .demo-section{margin-left:6%;margin-right:6%}
}
@media(max-width:800px){
 .demo-section{padding:20px 0 60px}
 .demo-card{padding:20px 18px 24px;border-radius:22px}
 .demo-player-wrap{border-radius:14px}
 .demo-info{flex-direction:column;align-items:flex-start;gap:18px;margin-top:20px}
 .demo-info h3{font-size:19px}
 .demo-info p{font-size:12px}
}