/* Reference-inspired storefront; isolated from administration. */
.front-body{--brand-primary:#0065ef;--brand-hover:#004bb8;--brand-ink:#0c1c36;--bs-link-color:#005bd4;--bs-link-hover-color:#00459f;background:#f7faff;color:#0c1c36}
.front-body .front-header{background:#030d1b;border-bottom:1px solid #204674;color:#fff}
.front-body .front-nav-wrap{min-height:86px;gap:24px}.front-body .front-brand{color:#fff;gap:10px;font-size:22px;white-space:nowrap}.front-body .front-brand b{color:#ff7a18}.front-body .front-brand small{color:#fff;letter-spacing:3px;font-size:9px}.front-body .brand-nav-logo{width:54px;height:54px;border-radius:8px}.front-body .front-nav{gap:22px;flex-wrap:wrap;justify-content:flex-end}.front-body .front-nav a:not(.btn){color:#edf5ff;font-size:12px}.front-body .front-nav a.active,.front-body .front-nav a:hover{color:#70bbff}.front-body .front-nav .btn{font-size:12px}.front-body .front-user{color:#fff}.front-body .front-menu-button{color:#fff;border-color:#52749e}
.front-body.home-page .front-main{max-width:none;padding:0}.home-page .studio-hero{background:#020d1d url('images/studio-hero.png') center 46%/cover no-repeat;color:#fff;position:relative;padding:50px 0 24px}.studio-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#020b19 0%,#020b19eb 22%,#020b1980 48%,#020b1900 75%)}.studio-hero>.container{position:relative}.studio-hero-copy{min-height:338px;max-width:720px}.studio-kicker{font-size:15px;font-weight:700;color:#0794ff;margin:0 0 10px;letter-spacing:.35px}.studio-hero h1{font-size:clamp(32px,3.7vw,52px);font-weight:800;line-height:1.25;letter-spacing:-1px;margin:0 0 18px;color:#fff}.studio-hero h1 span{font-size:.86em}.studio-hero h1 em{font-style:normal;color:#087cff}.studio-intro{font-size:15px;line-height:1.7;color:#eff5ff;margin-bottom:24px}.studio-actions{display:flex;gap:18px;flex-wrap:wrap}.studio-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 25px;border-radius:5px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid transparent;transition:background .2s,transform .2s;color:#fff}.studio-button svg{width:22px;height:22px}.studio-button:hover{color:#fff;transform:translateY(-2px)}.studio-button.orange{background:#ff7300;box-shadow:0 5px 22px #ff730028}.studio-button.orange:hover{background:#df6000}.studio-button.outline{border-color:#cbdcf3;background:#04101d7a}.studio-button.navy{background:linear-gradient(#123779,#031530);border-color:#29569c;padding:9px 30px}
.studio-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;border:1px solid #194c90;border-radius:9px;padding:24px 15px;background:linear-gradient(130deg,#051326e8,#041226d9);box-shadow:inset 0 8px 32px #0069ff15}.studio-benefit{display:flex;align-items:center;gap:18px;padding:0 20px;border-right:1px solid #173352}.studio-benefit:last-child{border:0}.studio-benefit>svg{width:50px;min-width:50px;height:50px;color:#b3dcff;filter:drop-shadow(0 0 4px #0077ff) drop-shadow(0 0 7px #0077ff)}.studio-benefit h2{font-size:14px;font-weight:700;color:#fff;margin:0 0 5px}.studio-benefit span{font-size:12px}.studio-benefit p{font-size:11px;line-height:1.7;margin:5px 0 0;color:#d9e4f5}
.studio-section{padding-top:28px;padding-bottom:8px}.studio-heading{display:flex;align-items:center;justify-content:center;gap:20px;font-size:30px;font-weight:750;margin:0 0 20px;color:#0a1b37;line-height:1.4}.studio-heading:before,.studio-heading:after{content:'';width:46px;height:5px;border-top:1px solid #2265b9;border-bottom:1px solid #a8c1e6}.studio-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.studio-service{border:1px solid #d8e2ef;border-radius:9px;overflow:hidden;background:linear-gradient(#fff,#f7faff);display:flex;flex-direction:column;transition:box-shadow .2s}.studio-service:hover{box-shadow:0 8px 26px #0f387918}.studio-service-image{display:block;overflow:hidden;background:#0d1c2b}.studio-service-image img{width:100%;height:auto;aspect-ratio:1.9;object-fit:cover;display:block;transition:transform .3s}.studio-service:hover img{transform:scale(1.035)}.studio-service-copy{position:relative;padding:25px 17px 18px;flex:1;display:flex;flex-direction:column}.studio-service-icon{position:absolute;top:-27px;left:16px;display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#0063d9;color:#fff;border:2px solid #ffffff50}.studio-service-icon svg{width:28px;height:28px}.studio-service-icon.tone-1{background:#07894d}.studio-service-icon.tone-2{background:#ea8a00}.studio-service-icon.tone-3{background:#713bad}.studio-service h3{font-size:16px;line-height:1.45;font-weight:750;margin:0 0 10px}.studio-service p{font-size:13px;line-height:1.7;flex:1;margin:0 0 15px}.studio-service-copy>a{font-size:13px;color:#005bea;text-decoration:none;font-weight:600}.studio-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-4px 0 14px}.studio-filters button{border:1px solid #d4dfed;border-radius:22px;padding:7px 23px;background:#fff;color:#12294b;font-size:12px}.studio-filters button.active{color:#fff;background:linear-gradient(#004bc2,#087cfa);border-color:#1765c7}.studio-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.studio-work{position:relative;overflow:hidden;border-radius:6px;background:#0b1a28;aspect-ratio:1.12;display:block}.studio-work img{height:100%;width:100%;object-fit:cover;transition:transform .3s}.studio-work span{position:absolute;inset:auto 0 0;padding:24px 8px 8px;background:linear-gradient(transparent,#020b19e8);color:#fff;font-size:11px;line-height:1.4}.studio-work:hover img{transform:scale(1.06)}.studio-center{text-align:center;margin:15px 0 4px}.studio-empty{text-align:center;padding:24px;color:#57667c}.studio-placeholder{height:100%;min-height:140px;display:grid;place-items:center;color:#70b5ff;background:#0d223f}.studio-placeholder svg{width:55px;height:55px}
.studio-process{background:linear-gradient(110deg,#f0f5fc,#fff,#f0f5fc);margin-top:14px;padding:26px 0 22px}.studio-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:50px;padding:0;margin:0}.studio-steps li{text-align:center;position:relative}.studio-steps li:not(:last-child):after{content:'⟶';position:absolute;right:-44px;top:18px;font-size:42px;line-height:1;color:#0759c8}.studio-step-icon{width:100px;height:84px;border:1px solid #d6e0ed;border-radius:17px;display:grid;place-items:center;margin:0 auto 10px;background:#ffffff6b;box-shadow:0 3px 9px #193a6610}.studio-step-icon svg{width:57px;height:57px;color:#102a50}.studio-steps h3{font-size:15px;font-weight:700;margin-bottom:8px}.studio-steps h3 b{display:inline-grid;place-items:center;width:24px;height:24px;background:#0060db;color:white;border-radius:50%;font-size:14px}.studio-steps p{font-size:12px;line-height:1.7;max-width:215px;margin:auto}.studio-reviews{padding-bottom:32px}.studio-reviews .studio-heading{margin-bottom:5px}.studio-demo-note{text-align:center;font-size:11px;color:#66788f;margin:0 0 16px}.studio-review-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.studio-review{border:1px solid #d2deee;border-radius:8px;background:#fff;padding:14px 15px}.studio-stars{color:#f8a000;text-align:center;letter-spacing:2px;font-size:20px}.studio-review>p{font-size:12px;text-align:center;line-height:1.65;margin:8px 0 14px}.studio-review-person{display:flex;gap:9px;align-items:center}.studio-review-person>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#dceafb;color:#0b59bd}.studio-review-person strong{font-size:12px}.studio-review-person small{display:block;font-size:10px;color:#6a7890;font-weight:400;margin-top:3px}
.front-body .front-footer{background:#020f22;color:#dce8fa;padding:30px 0 14px;border:0}.studio-footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:32px}.studio-footer-grid>div+div{border-left:1px solid #203048;padding-left:30px}.studio-footer-grid h2{font-size:16px;color:white;font-weight:700;margin:4px 0 15px}.studio-footer-grid p,.studio-footer-grid a:not(.front-brand){font-size:12px;line-height:1.9;color:#dce8fa}.studio-footer-grid nav{display:flex;flex-direction:column;gap:4px}.studio-footer-grid .brand-nav-logo{width:46px;height:46px}.studio-footer-grid .front-brand{margin-bottom:14px}.front-body .front-footer-bottom{border-color:#203048;font-size:11px;margin-top:24px;color:#c9d9ef}.studio-footer-note{font-size:11px;color:#9cb6d8}.studio-floating{position:fixed;right:18px;bottom:20px;display:grid;gap:10px;z-index:20}.studio-floating a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:white;background:#0069f5;box-shadow:0 3px 14px #001c4d40;text-decoration:none;font-size:21px}.studio-floating a:last-child{background:#ff7600}.front-body :focus-visible{outline:3px solid #3ca3ff;outline-offset:4px}[hidden]{display:none!important}
@media(min-width:1400px){.front-body .container{max-width:1240px}}
@media(max-width:1199px){.front-body .front-nav{gap:12px}.studio-benefit{padding:0 10px;gap:10px}.studio-benefit>svg{min-width:40px;width:40px}.studio-services{gap:16px}.studio-hero-copy{min-height:320px}.studio-service h3{font-size:15px}}
@media(max-width:991px){.front-body .front-nav-wrap{min-height:76px}.front-body .front-nav{justify-content:flex-start}.studio-hero-copy{min-height:330px;max-width:630px}.studio-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.studio-benefit:nth-child(2){border:0}.studio-services{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-steps{gap:25px}.studio-steps li:not(:last-child):after{right:-29px;font-size:30px}.studio-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-footer-grid>div:nth-child(3){border:0;padding-left:0}}
@media(max-width:575px){.home-page .studio-hero{padding-top:32px;background-position:62% center}.studio-hero:before{background:linear-gradient(90deg,#020b19f5,#020b19a8)}.studio-kicker{font-size:11px}.studio-hero h1{font-size:32px;letter-spacing:-.5px}.studio-intro{font-size:12px;max-width:310px}.studio-intro br{display:none}.studio-hero-copy{min-height:310px}.studio-actions{gap:10px}.studio-button{font-size:12px;padding:11px 14px}.studio-benefits{padding:18px 8px;gap:20px 4px;margin-top:16px}.studio-benefit{display:block;padding:0 9px}.studio-benefit>svg{height:35px;width:35px;min-width:35px;margin-bottom:10px}.studio-benefit h2{font-size:12px}.studio-benefit span{font-size:10px}.studio-benefit p{font-size:10px}.studio-heading{font-size:24px;gap:12px;margin-bottom:16px}.studio-heading:before,.studio-heading:after{width:26px}.studio-section{padding-top:24px}.studio-services{gap:12px}.studio-service-image img{aspect-ratio:1.35}.studio-service-copy{padding:22px 12px 14px}.studio-service h3{font-size:14px}.studio-service p{font-size:11px}.studio-service-copy>a{font-size:12px}.studio-service-icon{width:36px;height:36px;top:-22px;left:12px;border-radius:10px}.studio-service-icon svg{width:23px;height:23px}.studio-filters{gap:7px;justify-content:flex-start}.studio-filters button{font-size:10px;padding:6px 12px}.studio-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.studio-steps li:not(:last-child):after{display:none}.studio-steps p{font-size:11px}.studio-steps h3{font-size:13px}.studio-review{padding:12px 10px}.studio-review>p{font-size:11px}.studio-review-person{gap:6px}.studio-review-person small{font-size:9px}.studio-footer-grid{gap:25px 16px}.studio-footer-grid>div+div{padding-left:15px}.studio-footer-grid>div:first-child{grid-column:1/-1}.studio-footer-grid>div:nth-child(2){padding-left:0;border:0}.studio-footer-grid>div:nth-child(3){padding-left:15px;border-left:1px solid #203048}.studio-footer-grid>div:last-child{grid-column:1/-1;padding:0;border:0}.studio-floating{right:10px;bottom:12px}.studio-floating a{width:40px;height:40px}.studio-demo-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.studio-button,.studio-work img,.studio-service-image img{transition:none}}
@font-face{font-family:'Noto Sans Thai';src:url('fonts/NotoSansThai.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
.front-body{font-family:'Noto Sans Thai',system-ui,sans-serif}.studio-filters button{font-family:inherit}