*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0C0C0C}
body{font-family:'Kanit',sans-serif;color:#D7E2EA;-webkit-font-smoothing:antialiased;overflow-x:clip}
.td-banner{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.1);padding:8px 16px;text-align:center;font-size:11px;color:rgba(255,255,255,0.8);letter-spacing:0.05em}

.td-grad{background:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* 1. HERO */
.td-hero{position:relative;height:100vh;display:flex;flex-direction:column;overflow-x:clip;padding-top:32px}
.td-nav{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 0;color:#D7E2EA;text-transform:uppercase;letter-spacing:0.05em;font-weight:500}
@media(min-width:768px){.td-nav{padding:32px 40px 0}}
.td-nav a{font-size:14px;cursor:pointer;transition:opacity .2s}
@media(min-width:768px){.td-nav a{font-size:18px}}
@media(min-width:1024px){.td-nav a{font-size:22px}}
.td-nav a:hover{opacity:0.7}

.td-h1{font-size:14vw;font-weight:900;text-transform:uppercase;letter-spacing:-0.03em;line-height:1;white-space:nowrap;width:100%;margin-top:24px;text-align:center}
@media(min-width:640px){.td-h1{font-size:15vw}}
@media(min-width:768px){.td-h1{font-size:16vw;margin-top:-20px}}
@media(min-width:1024px){.td-h1{font-size:17.5vw}}

.td-portrait-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);z-index:10;pointer-events:none}
@media(min-width:640px){.td-portrait-wrap{top:auto;bottom:0;transform:translate(-50%,0)}}
.td-portrait{display:block;width:280px;height:auto;object-fit:contain}
@media(min-width:640px){.td-portrait{width:360px}}
@media(min-width:768px){.td-portrait{width:440px}}
@media(min-width:1024px){.td-portrait{width:520px}}

.td-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;padding:0 24px 28px;position:relative;z-index:5}
@media(min-width:768px){.td-bottom{padding:0 40px 40px}}
.td-subline{font-size:clamp(0.75rem,1.4vw,1.5rem);color:#D7E2EA;font-weight:300;text-transform:uppercase;letter-spacing:0.05em;line-height:1.3;max-width:160px}
@media(min-width:640px){.td-subline{max-width:220px}}
@media(min-width:768px){.td-subline{max-width:260px}}
.td-contact{display:inline-flex;align-items:center;gap:10px;background:#D7E2EA;color:#0C0C0C;border:none;border-radius:9999px;padding:14px 24px;font-family:inherit;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;cursor:pointer;transition:transform .2s}
.td-contact:hover{transform:scale(1.04)}
.td-arr{font-size:14px}

/* 2. MARQUEE */
.td-mq{padding:96px 0 40px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
@media(min-width:768px){.td-mq{padding:144px 0 40px}}
.td-mq-row{overflow:hidden}
.td-mq-track{display:flex;gap:14px;will-change:transform;transition:transform 0s}
.td-mq-track img{width:280px;height:180px;border-radius:18px;object-fit:cover;flex-shrink:0;background:#1f2937}
@media(min-width:768px){.td-mq-track img{width:420px;height:270px}}

/* 3. ABOUT */
.td-about{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;gap:32px;text-align:center;overflow:hidden}
.td-corner{position:absolute;width:120px;height:auto}
@media(min-width:640px){.td-corner{width:160px}}
@media(min-width:768px){.td-corner{width:210px}}
.td-c-tl{top:4%;left:1%}
@media(min-width:640px){.td-c-tl{left:2%}}
@media(min-width:768px){.td-c-tl{left:4%}}
.td-c-tr{top:4%;right:1%}
@media(min-width:640px){.td-c-tr{right:2%}}
@media(min-width:768px){.td-c-tr{right:4%}}
.td-c-bl{bottom:8%;left:3%;width:100px}
@media(min-width:640px){.td-c-bl{left:6%;width:140px}}
@media(min-width:768px){.td-c-bl{left:10%;width:180px}}
.td-c-br{bottom:8%;right:3%;width:130px}
@media(min-width:640px){.td-c-br{right:6%;width:170px}}
@media(min-width:768px){.td-c-br{right:10%;width:220px}}
.td-h2{font-size:clamp(3rem,12vw,160px);font-weight:900;text-transform:uppercase;letter-spacing:-0.03em;line-height:1;text-align:center}
.td-about-p{font-size:clamp(1rem,2vw,1.35rem);color:#D7E2EA;line-height:1.6;font-weight:500;max-width:560px}

/* 4. SERVICES */
.td-svc{background:#fff;border-radius:40px 40px 0 0;padding:80px 24px}
@media(min-width:640px){.td-svc{border-radius:50px 50px 0 0;padding:96px 32px}}
@media(min-width:768px){.td-svc{border-radius:60px 60px 0 0;padding:128px 40px}}
.td-svc-h{font-size:clamp(3rem,12vw,160px);font-weight:900;text-transform:uppercase;color:#0C0C0C;text-align:center;line-height:1;letter-spacing:-0.03em;margin-bottom:64px}
@media(min-width:768px){.td-svc-h{margin-bottom:96px}}
.td-svc-list{max-width:1100px;margin:0 auto;display:flex;flex-direction:column}
.td-svc-row{display:flex;align-items:flex-start;gap:24px;padding:32px 0;border-bottom:1px solid rgba(12,12,12,0.15)}
@media(min-width:768px){.td-svc-row{padding:48px 0;gap:48px}}
.td-svc-row:last-child{border-bottom:none}
.td-svc-num{font-size:clamp(3rem,10vw,140px);font-weight:900;color:#0C0C0C;line-height:0.9;flex-shrink:0;letter-spacing:-0.04em}
.td-svc-info{flex:1;display:flex;flex-direction:column;gap:14px;color:#0C0C0C;padding-top:8px}
.td-svc-info h3{font-size:clamp(1rem,2.2vw,2.1rem);font-weight:500;text-transform:uppercase;color:#0C0C0C;letter-spacing:-0.01em}
.td-svc-info p{font-size:clamp(0.85rem,1.6vw,1.25rem);font-weight:300;color:rgba(12,12,12,0.6);line-height:1.55;max-width:42rem}

/* 5. PROJECTS */
.td-proj{background:#0C0C0C;border-radius:40px 40px 0 0;margin-top:-32px;padding:80px 24px;position:relative;z-index:10}
@media(min-width:640px){.td-proj{border-radius:50px 50px 0 0;padding:96px 32px;margin-top:-40px}}
@media(min-width:768px){.td-proj{border-radius:60px 60px 0 0;padding:128px 40px;margin-top:-56px}}
.td-proj > .td-h2{margin-bottom:48px}
.td-proj-stack{display:flex;flex-direction:column;gap:18px;max-width:1280px;margin:0 auto}
.td-proj-card{border-radius:40px;border:2px solid #D7E2EA;background:#0C0C0C;padding:18px;display:flex;flex-direction:column;gap:14px}
@media(min-width:640px){.td-proj-card{border-radius:50px;padding:24px}}
@media(min-width:768px){.td-proj-card{border-radius:60px;padding:32px;gap:20px}}
.td-proj-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.td-proj-num{font-size:48px;font-weight:900;color:#D7E2EA;letter-spacing:-0.04em;line-height:1}
@media(min-width:768px){.td-proj-num{font-size:80px}}
.td-proj-cat{font-size:11px;color:rgba(215,226,234,0.5);text-transform:uppercase;letter-spacing:0.15em}
.td-proj-name{flex:1;font-size:18px;font-weight:500;color:#D7E2EA;text-transform:uppercase;letter-spacing:-0.01em}
@media(min-width:768px){.td-proj-name{font-size:24px}}
.td-proj-btn{background:transparent;color:#D7E2EA;border:2px solid #D7E2EA;border-radius:9999px;padding:10px 22px;font-family:inherit;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;cursor:pointer;transition:all .2s;flex-shrink:0}
.td-proj-btn:hover{background:#D7E2EA;color:#0C0C0C}
.td-proj-grid{display:flex;gap:14px;flex-wrap:wrap}
@media(min-width:768px){.td-proj-grid{flex-wrap:nowrap}}
.td-proj-l{flex:1 1 100%;display:flex;flex-direction:column;gap:14px;min-width:280px}
@media(min-width:768px){.td-proj-l{flex:0 0 40%}}
.td-proj-r{flex:1 1 100%;border-radius:30px;background-size:cover;background-position:center;min-height:280px}
@media(min-width:640px){.td-proj-r{border-radius:40px}}
@media(min-width:768px){.td-proj-r{flex:0 0 60%;border-radius:50px;min-height:auto}}
.td-proj-img{border-radius:30px;background-size:cover;background-position:center;height:clamp(130px,16vw,230px)}
@media(min-width:640px){.td-proj-img{border-radius:40px}}
@media(min-width:768px){.td-proj-img{border-radius:50px}}
.td-proj-img-tall{height:clamp(160px,22vw,340px)}