html{scroll-behavior:smooth}
html,body,body.jack-theme{background:#0C0C0C;overflow-x:clip}
body.jack-theme{font-family:'Kanit',sans-serif;margin:0}
:where(.jk,.jk *){box-sizing:border-box;margin:0;padding:0}
.jk{font-family:'Kanit',sans-serif;background:#0C0C0C;color:#D7E2EA}
.jk a{text-decoration:none;color:inherit}
.jk img{display:block;max-width:100%}
.hero-heading{background:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Elementor resets so sections are edge-to-edge */
.jack-theme .elementor-section .elementor-container{max-width:100%}
.jack-theme .elementor-column-gap-default>.elementor-column>.elementor-element-populated,
.jack-theme .elementor-element-populated{padding:0}
.jack-theme .elementor-widget:not(:last-child){margin-bottom:0}
.jack-theme [class*="elementor-widget-jack_"]>.elementor-widget-container{padding:0;overflow:visible}

/* fade-in (Framer Motion whileInView equivalent) */
.jk .jfade{opacity:0;transform:translate(var(--x,0),var(--y,30px));transition:opacity var(--t,.7s) cubic-bezier(.25,.1,.25,1) var(--d,0s),transform var(--t,.7s) cubic-bezier(.25,.1,.25,1) var(--d,0s)}
.jk .jfade.in{opacity:1;transform:none}

/* buttons */
.jk .jbtn{display:inline-block;border-radius:9999px;color:#fff;font-weight:500;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;text-align:center;padding:12px 32px;font-size:12px;background:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);box-shadow:0 4px 4px rgba(181,1,167,.25),4px 4px 12px #7721B1 inset;outline:2px solid #fff;outline-offset:-3px}
.jk .jghost{display:inline-block;border-radius:9999px;border:2px solid #D7E2EA;color:#D7E2EA;font-weight:500;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;padding:12px 32px;font-size:14px;transition:background .2s}
.jk .jghost:hover{background:rgba(215,226,234,.1)}
@media(min-width:640px){.jk .jbtn{padding:14px 40px;font-size:14px}.jk .jghost{padding:14px 40px;font-size:16px}}
@media(min-width:768px){.jk .jbtn{padding:16px 48px;font-size:16px}}

.jk .jhead{display:block;text-align:center;font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.025em;font-size:clamp(3rem,12vw,160px)}
.jk .jnum{font-weight:900;line-height:1;font-size:clamp(3rem,10vw,140px)}

/* HERO */
.jk.jh{height:100vh;min-height:520px;display:flex;flex-direction:column;overflow-x:clip;position:relative}
.jk .jh-in{display:flex;flex-direction:column;flex:1;padding:0 24px;position:relative}
.jk .jh-nav{display:flex;justify-content:space-between;padding-top:24px;position:relative;z-index:20}
.jk .jh-nav a{color:#D7E2EA;font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:14px;transition:opacity .2s}
.jk .jh-nav a:hover{opacity:.7}
.jk .jh-hw{overflow:hidden;margin-top:24px}
.jk .jh-heading{display:block;width:100%;white-space:nowrap;font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:1;font-size:14vw}
.jk .jh-bar{position:relative;z-index:20;margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:28px}
.jk .jh-tag{max-width:160px;color:#D7E2EA;font-weight:300;text-transform:uppercase;letter-spacing:.025em;line-height:1.375;font-size:clamp(.75rem,1.4vw,1.5rem)}
.jk .jh-pt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:280px}
.jk .jmagnet{display:block}
.jk .jmagnet>div{will-change:transform}
.jk .jmagnet img{width:100%;height:auto}
@media(min-width:640px){
 .jk .jh-heading{font-size:15vw}.jk .jh-hw{margin-top:16px}.jk .jh-bar{padding-bottom:32px}.jk .jh-tag{max-width:220px}
 .jk .jh-pt{top:auto;bottom:0;transform:translateX(-50%);width:360px}
}
@media(min-width:768px){
 .jk .jh-in{padding:0 40px}.jk .jh-nav{padding-top:32px}.jk .jh-nav a{font-size:18px}
 .jk .jh-heading{font-size:16vw}.jk .jh-hw{margin-top:-20px}.jk .jh-bar{padding-bottom:40px}.jk .jh-tag{max-width:260px}
 .jk .jh-pt{width:440px}
}
@media(min-width:1024px){.jk .jh-nav a{font-size:1.4rem}.jk .jh-heading{font-size:17.5vw}.jk .jh-pt{width:520px}}

/* MARQUEE */
.jk.jm{padding:96px 0 40px;overflow:hidden}
.jk .jm-row{display:flex;gap:12px;width:max-content;will-change:transform}
.jk .jm-row+.jm-row{margin-top:12px}
.jk .jm-row img{width:420px;height:270px;flex:none;object-fit:cover;border-radius:16px}
@media(min-width:640px){.jk.jm{padding-top:128px}}
@media(min-width:768px){.jk.jm{padding-top:160px}}

/* ABOUT */
.jk.ja{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:80px 20px;overflow:hidden}
.jk .ja-in{display:flex;flex-direction:column;align-items:center;gap:64px;position:relative;z-index:2}
.jk .ja-tx{display:flex;flex-direction:column;align-items:center;gap:40px}
.jk .jatext{max-width:560px;text-align:center;font-weight:500;line-height:1.625;font-size:clamp(1rem,2vw,1.35rem);color:#D7E2EA}
.jk .jatext .jw{display:inline-block;white-space:nowrap}
.jk .ja-d{position:absolute;z-index:1}
.jk .ja-d img{width:100%;height:auto}
.jk .d1{top:4%;left:1%;width:120px}.jk .d2{bottom:8%;left:3%;width:100px}
.jk .d3{top:4%;right:1%;width:120px}.jk .d4{bottom:8%;right:3%;width:130px}
@media(min-width:640px){
 .jk.ja{padding:80px 32px}.jk .ja-in{gap:80px}.jk .ja-tx{gap:56px}
 .jk .d1{left:2%;width:160px}.jk .d2{left:6%;width:140px}.jk .d3{right:2%;width:160px}.jk .d4{right:6%;width:170px}
}
@media(min-width:768px){
 .jk.ja{padding:80px 40px}.jk .ja-in{gap:96px}.jk .ja-tx{gap:64px}
 .jk .d1{left:4%;width:210px}.jk .d2{left:10%;width:180px}.jk .d3{right:4%;width:210px}.jk .d4{right:10%;width:220px}
}

/* SERVICES */
.jk.js{background:#fff;color:#0C0C0C;border-radius:40px 40px 0 0;padding:80px 20px}
.jk.js .jhead{color:#0C0C0C;margin-bottom:64px}
.jk .js-list{max-width:1024px;margin:0 auto}
.jk .js-item{display:flex;align-items:flex-start;gap:20px;padding:32px 0;border-top:1px solid rgba(12,12,12,.15)}
.jk .js-item:last-child{border-bottom:1px solid rgba(12,12,12,.15)}
.jk .js-item .jnum{flex:0 0 1.25em;color:#0C0C0C}
.jk .js-name{font-weight:500;text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);line-height:1.15}
.jk .js-desc{margin-top:8px;font-weight:300;line-height:1.625;max-width:42rem;opacity:.6;font-size:clamp(.85rem,1.6vw,1.25rem)}
@media(min-width:640px){.jk.js{border-radius:50px 50px 0 0;padding:96px 32px}.jk.js .jhead{margin-bottom:80px}.jk .js-item{padding:40px 0;gap:32px}}
@media(min-width:768px){.jk.js{border-radius:60px 60px 0 0;padding:128px 40px}.jk.js .jhead{margin-bottom:112px}.jk .js-item{padding:48px 0;gap:48px}}

/* PROJECTS */
.jk.jp{border-radius:40px 40px 0 0;margin-top:-40px;position:relative;z-index:10;padding:80px 20px}
.jk.jp .jhead{margin-bottom:64px}
.jk .jp-list{max-width:1280px;margin:0 auto}
.jk .jp-wrap{height:85vh}
.jk .jp-card{position:sticky;top:calc(6rem + var(--o,0px));transform-origin:top center;will-change:transform;border:2px solid #D7E2EA;background:#0C0C0C;border-radius:40px;padding:16px}
.jk .jp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.jk .jp-meta{display:flex;align-items:center;gap:16px}
.jk .jp-cat{display:block;font-size:12px;font-weight:300;text-transform:uppercase;letter-spacing:.1em;opacity:.6}
.jk .jp-name{font-weight:500;text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);line-height:1.1}
.jk .jp-grid{display:flex;gap:12px}
.jk .jp-c1{width:40%;display:flex;flex-direction:column;gap:12px}
.jk .jp-c2{width:60%;position:relative}
.jk .jp-grid img{width:100%;object-fit:cover;border-radius:40px}
.jk .jp-c1 img:first-child{height:clamp(130px,16vw,230px)}
.jk .jp-c1 img:last-child{height:clamp(160px,22vw,340px)}
.jk .jp-c2 img{position:absolute;inset:0;height:100%}
@media(min-width:640px){.jk.jp{border-radius:50px 50px 0 0;margin-top:-48px;padding:96px 32px}.jk.jp .jhead{margin-bottom:80px}.jk .jp-card{border-radius:50px;padding:24px}.jk .jp-grid img{border-radius:50px}.jk .jp-top{margin-bottom:24px}}
@media(min-width:768px){.jk.jp{border-radius:60px 60px 0 0;margin-top:-56px;padding:128px 40px}.jk.jp .jhead{margin-bottom:112px}.jk .jp-card{top:calc(8rem + var(--o,0px));border-radius:60px;padding:32px}.jk .jp-grid img{border-radius:60px}}