*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}html,body,#root{background:#0c0c0c}body{font-family:Kanit,sans-serif;color:#d7e2ea;overflow-x:clip}.hero-heading{background:linear-gradient(180deg,#646973,#bbccd7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.btn-contact{border:none;cursor:pointer;color:#fff;font-family:inherit;font-weight:500;text-transform:uppercase;letter-spacing:.18em;border-radius:9999px;padding:14px 40px;font-size:clamp(.72rem,1vw,1rem);background:linear-gradient(123deg,#3d0a24 5%,#c2186f 38%,#ff2e88 72%,#ff7eb3);box-shadow:0 4px 4px #ff2e8840,4px 4px 12px #c2186f inset;outline:2px solid #fff;outline-offset:-3px;transition:transform .2s ease,filter .2s ease}.btn-contact:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn-ghost{cursor:pointer;background:transparent;font-family:inherit;font-weight:500;text-transform:uppercase;letter-spacing:.18em;border-radius:9999px;border:2px solid #D7E2EA;color:#d7e2ea;padding:12px 34px;font-size:clamp(.72rem,1vw,1rem);transition:background .2s ease;display:inline-flex;align-items:center;gap:.4em}.btn-ghost:hover{background:#d7e2ea1a}a{text-decoration:none}.fade{opacity:0;transition:opacity .7s cubic-bezier(.25,.1,.25,1),transform .7s cubic-bezier(.25,.1,.25,1)}.fade.in{opacity:1;transform:none!important}.ph{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#d7e2ea0f,#c2186f1f),repeating-linear-gradient(45deg,rgba(215,226,234,.03) 0 12px,transparent 12px 24px);border:1px dashed rgba(215,226,234,.22);color:#d7e2ea8c;font-weight:400;letter-spacing:.05em;text-align:center;padding:12px;overflow:hidden}.ph span{font-size:clamp(.62rem,1vw,.85rem);line-height:1.4}.ph img{width:100%;height:100%;object-fit:cover;display:block}.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0;gap:16px}.nav-logo{display:flex;align-items:center;transition:opacity .2s}.nav-logo img{height:42px;width:auto;display:block}.nav-logo:hover{opacity:.85}.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,44px)}.nav-links a{color:#d7e2ea;font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.72rem,1.1vw,1.3rem);transition:opacity .2s}.nav-links a:hover{opacity:.7}@media (max-width:640px){.nav{padding:14px 16px 0;gap:8px}.nav-logo img{height:30px}.nav-links{gap:11px}.nav-links a{font-size:.66rem;letter-spacing:.03em}}.hero-title{font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:1.08;white-space:nowrap;width:100%;font-size:clamp(2.4rem,13.5vw,230px);margin:0;padding-top:.06em}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:40px;position:relative;z-index:20;gap:20px}@media (max-width:640px){.hero-bottom{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:26px}}.mq-section{background:#0c0c0c;padding:120px 0 40px;overflow:hidden}@media (max-width:640px){.mq-section{padding:56px 0 20px}}.mq-row{display:flex;gap:12px;will-change:transform}.mq-tile{flex:0 0 auto;width:420px;height:270px;border-radius:16px;overflow:hidden}@media (max-width:640px){.mq-tile{width:230px;height:150px}}.svc{background:#fff;border-top-left-radius:56px;border-top-right-radius:56px}.svc-item{display:flex;gap:clamp(16px,3vw,48px);align-items:flex-start;border-top:1px solid rgba(12,12,12,.15);padding:clamp(28px,4vw,48px) 0}.svc-num{font-weight:900;color:#0c0c0c;line-height:.85;font-size:clamp(2.6rem,9vw,140px)}.svc-name{font-weight:500;text-transform:uppercase;color:#0c0c0c;font-size:clamp(1rem,2.2vw,2.1rem);line-height:1.15}.svc-desc{font-weight:300;color:#0c0c0c;opacity:.6;line-height:1.6;max-width:640px;margin-top:8px;font-size:clamp(.85rem,1.6vw,1.25rem)}.proj-card{border:2px solid #D7E2EA;background:#0c0c0c;border-radius:48px;padding:clamp(16px,2.4vw,32px);will-change:transform;transform-origin:top center}.proj-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-bottom:clamp(16px,2vw,28px)}.proj-grid{display:grid;grid-template-columns:40% 60%;gap:12px}@media (max-width:640px){.proj-grid{grid-template-columns:1fr}}.eyebrow{font-size:clamp(.66rem,1vw,.85rem);letter-spacing:.22em;text-transform:uppercase;color:#8a929b}.corner{position:absolute;pointer-events:none}@media (max-width:640px){.corner{opacity:.5}}.to-top{position:fixed;right:20px;bottom:20px;z-index:900;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(123deg,#c2186f,#ff2e88);box-shadow:0 6px 20px #ff2e8866;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}.to-top.show{opacity:1;transform:none;pointer-events:auto}.to-top:hover{filter:brightness(1.1)}.mq2-section{background:#0c0c0c;padding:34px 0;overflow:hidden;display:flex;flex-direction:column;gap:16px}.mq2-row{display:flex;gap:16px;width:max-content;will-change:transform}.mq2-left{animation:mq-left 48s linear infinite}.mq2-right{animation:mq-right 48s linear infinite}.mq2-row:hover{animation-play-state:paused}@keyframes mq-left{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes mq-right{0%{transform:translate(-50%)}to{transform:translate(0)}}.mq2-tile{position:relative;flex:0 0 auto;width:420px;height:270px;border-radius:16px;overflow:hidden;border:none;padding:0;cursor:pointer;background:#141418;transition:transform .3s ease,box-shadow .3s ease;transform-origin:center}.mq2-tile img{width:100%;height:100%;object-fit:cover;display:block}.mq2-tile:hover{transform:scale(1.07);z-index:5;box-shadow:0 20px 50px #0000008c}.mq2-cap{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;color:#fff;font-weight:500;font-size:.95rem;text-align:left;text-transform:uppercase;letter-spacing:.03em;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));opacity:0;transition:opacity .3s ease;pointer-events:none}.mq2-tile:hover .mq2-cap{opacity:1}.mq2-empty{display:flex;align-items:center;justify-content:center;cursor:default;border:1px dashed rgba(215,226,234,.22);color:#d7e2ea80;padding:16px;text-align:center;font-size:.8rem;line-height:1.4}.mq2-empty:hover{transform:none;box-shadow:none}@media (max-width:640px){.mq2-section{padding:22px 0;gap:12px}.mq2-row{gap:12px}.mq2-tile{width:230px;height:150px}.mq2-left,.mq2-right{animation-duration:32s}.mq2-cap{font-size:.78rem;padding:9px 12px}}