body.mesh-bg,body .font-heading,body button,body input,body textarea,body select,body h1,body h2,body h3,body h4{font-family:Sarabun,sans-serif}body.mesh-bg{font-size:17px;line-height:1.6}.studio-nav,.studio-hero,.studio-services{box-sizing:border-box}.studio-nav{background:#201e1a;color:white;display:flex;align-items:center;justify-content:space-between;padding:12px 4vw}.studio-nav nav{display:flex;gap:clamp(12px,3vw,48px)}.studio-nav a{display:inline-flex;align-items:center;min-height:44px;color:inherit}.studio-brand{font:600 clamp(19px,2vw,32px) Georgia,serif}.studio-hero{display:grid;grid-template-columns:44% 56%;background:#faf4e8;color:#201d19;align-items:center}.studio-hero>div{padding:32px 4vw}.studio-hero h1{font:500 clamp(28px,4.3vw,78px)/1.35 'Noto Serif Thai',Georgia,serif}.studio-hero img{width:100%;height:clamp(300px,30vw,520px);object-fit:cover}.studio-cta{display:inline-block;background:#285f5b;color:white;padding:12px 24px;border-radius:5px;margin-top:24px;font-weight:600}.studio-services{display:grid;grid-template-columns:repeat(3,1fr);background:#faf4e8;color:#201d19}.studio-services a{padding:12px;border:1px solid #ccc3b6;color:inherit}.studio-services img{width:100%;aspect-ratio:1.75;object-fit:cover}.studio-services strong,.studio-services span{display:block}.studio-services strong{font-size:clamp(19px,2vw,36px);font-weight:600;margin-top:10px}.studio-services a:hover strong,.studio-nav a:hover{text-decoration:underline}.studio-hero a:focus-visible,.studio-services a:focus-visible,.studio-nav a:focus-visible{outline:3px solid #73a7a0;outline-offset:-3px}@media(max-width:700px){.studio-nav{font-size:15px}.studio-hero{grid-template-columns:1fr}.studio-hero>div{padding:24px 5vw}.studio-hero h1{font-size:clamp(32px,8vw,50px)}.studio-hero img{height:150px;object-position:center 48%}.studio-services{grid-template-columns:1fr}.studio-services a{display:flex;align-items:center;gap:14px}.studio-services img{width:26%;aspect-ratio:1.4}.studio-services strong{margin:0}.studio-services span{font-size:16px}}
.studio-news,.studio-news-heading{background:#faf4e8;color:#231e18;padding:clamp(36px,5vw,80px) 4vw}.studio-news-heading h1,.studio-news h2{font:500 clamp(30px,4vw,56px)/1.4 'Noto Serif Thai',serif}.studio-news-heading{text-align:center}.studio-news a.glass{background:#fffcf6;color:#231e18;border:1px solid #d5cab8;border-radius:6px}.studio-news h3{line-height:1.55}.studio-news a:focus-visible{outline:3px solid #285f5b}

/* Shared public theme. Existing forms and content retain their own markup. */
.studio-site {
    --bg-main: #faf4e8;
    --bg-card: #fffcf6;
    --bg-glass: #fffcf6;
    --text-main: #25211c;
    --text-sub: #59534b;
    --text-muted: #70675d;
    --border-color: #d7ccbb;
    background: var(--bg-main);
    background-image: none;
    color: var(--text-main);
}
.studio-site h1, .studio-site .ws-contact-intro h1 {
    font-family: 'Noto Serif Thai', serif;
    font-weight: 500;
    line-height: 1.45;
}
.studio-site :is(h2,h3,h4,h5,h6,button,input,textarea,select,.font-heading) {
    font-family: Sarabun, sans-serif;
}
.studio-site :is(.text-deep-blue,.text-gray-700,.text-gray-600) { color: #49433b; }
.studio-site :is(.text-bright-blue,.ws-contact-eyebrow) { color: #285f5b; }
.studio-site .gradient-text {
    background: none;
    color: #285f5b;
    -webkit-text-fill-color: currentColor;
}
.studio-site :is(.glass,.bg-white,.bg-soft-cream,.ws-contact-form-card) {
    background: #fffcf6;
    color: #25211c;
    border-color: #d7ccbb;
}
.studio-site :is(.glass,.glass-dark) { backdrop-filter: none; box-shadow: none; }
.studio-site :is(.glass-dark,.ws-contact-channels,.ws-contact-summary,.studio-footer) {
    background: #25211c;
    color: #faf4e8;
}
.studio-site :is(.ws-contact-channels,.ws-contact-summary) p,
.studio-site .ws-contact-channel small { color: #e0d6c7; }
.studio-site .ws-contact-channel { border-color: #675c50; }
.studio-site :is(.rounded-3xl,.rounded-2xl,.ws-contact-channels,.ws-contact-form-card,.ws-service-next) {
    border-radius: 8px;
}
.studio-site :is(.ws-contact-submit,.ws-primary-link,.ws-contact-summary a,.wh-button) {
    background: #285f5b;
    color: #fff;
    border-radius: 5px;
}
.studio-site :is(.ws-contact-submit,.ws-primary-link,.wh-button):hover { background: #1b4946; }
.studio-site [class*="bg-gradient-to-"]:not(.text-transparent) {
    background-image: none;
    background-color: #285f5b;
}
.studio-site :is(.ws-order-section,.ws-service-next,.ws-order-summary,.ws-compare th) {
    background: #f0e7d8;
    border-color: #d7ccbb;
    color: #49433b;
}
.studio-site :is(.ws-order-intro h2,.ws-compare td,.ws-compare th,.ws-contact-form-card) { color: #25211c; }
.studio-site .ws-contact-form :is(input:not([type=checkbox]),select,textarea) {
    background: #fffdf9;
    color: #25211c;
    border-color: #a99c89;
    border-radius: 5px;
    font-size: 17px;
}
.studio-site :is(a,button,input,select,textarea,summary):focus-visible {
    outline: 3px solid #285f5b;
    outline-offset: 3px;
}
.studio-site .studio-nav :focus-visible,.studio-site .studio-footer :focus-visible { outline-color: #b6d6cf; }
.studio-site .ws-contact-page { padding-top: 64px; }
.studio-site #main-content > section.pt-40 { padding-top: 64px; padding-bottom: 48px; }
.studio-site #main-content > section > .absolute[class*="blur-"] { display: none; }
.studio-site .reveal { opacity: 1; transform: none; }
.studio-site .float-anim,.studio-site .float-anim-delay { animation: none; }
.studio-site .studio-footer { padding-bottom: 90px; }
.studio-site .studio-footer a { display: inline-block; padding: 4px 0; }
.studio-site .studio-footer a:hover { text-decoration: underline; }
.studio-site .article-content :is(h2,h3) { color: #25211c; }
.studio-site .article-content :is(img,video,iframe) { max-width: 100%; }
.studio-site .article-content { overflow-wrap: anywhere; }
.studio-site .article-content table { display: block; max-width: 100%; overflow-x: auto; }
.studio-site :is(.ws-contact-form-card,.ws-order-card,.studio-services a) { min-width: 0; }
@media (max-width: 640px) {
    .studio-site .studio-nav { flex-wrap: wrap; gap: 8px; }
    .studio-site .studio-nav nav { gap: 16px; }
    .studio-site .ws-contact-page { padding-top: 32px; }
    .studio-site #main-content > section.pt-40 { padding-top: 36px; }
    .studio-site h1 { font-size: clamp(28px,7vw,40px); }
    .studio-site .ws-contact-form-card { padding: 22px 16px; }
}
.studio-site #cookie-banner { background: #25211c; }
.studio-site #accept-cookies { background: #285f5b; color: white; }
.studio-site #cookie-banner a { color: #b6d6cf; }
.studio-site .ws-contact-form-card > p,.studio-site .ws-contact-note { color: #59534b; }
.studio-site [class*="bg-[#0b2545]"] { background-color: #25211c; }
.studio-site .studio-services strong { overflow-wrap: anywhere; }
.studio-site h1.font-heading { font-family: 'Noto Serif Thai', serif; font-weight: 500; }
.studio-site .bg-soft-gold { background-color: #e0ece8; color: #28534f; }
.studio-site a.bg-soft-gold,.studio-site button.bg-soft-gold { background-color: #285f5b; color: #fff; }
.studio-site ::-webkit-scrollbar-thumb { background: #8d7e6c; }

/* Portfolio previews show the entire source image, with space for readable context. */
.studio-site .wh-cases { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.studio-site .wh-case { border-radius: 10px; border-color: #cbd9d3; }
.studio-site .wh-case .ws-preview-link { display: grid; place-items: center; background: #e6ece8; padding: 12px; min-height: 240px; }
.studio-site .wh-case img { width: 100%; height: 340px; aspect-ratio: auto; object-fit: contain; object-position: center; }
.studio-site .wh-case > div:not(.wh-empty) { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.studio-site .wh-case h3 { font-size: 24px; }
.studio-site .ws-case-detail { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 600; color: #285f5b; }
.studio-site .ws-project-image { background: #e6ece8; padding: clamp(12px,3vw,32px); }
.studio-site .ws-project-full { width: 100%; height: auto; object-fit: contain; }
.studio-site .ws-image-caption { display: block; text-align: center; margin-top: 12px; color: #285f5b; font-weight: 600; }
.studio-site .ws-related-image { background: #e6ece8; padding: 10px; height: 240px; }
@media(max-width:640px) {
 .studio-site .wh-cases { grid-template-columns: 1fr; gap: 20px; }
 .studio-site .wh-case img { height: auto; max-height: 440px; }
 .studio-site .wh-case .ws-preview-link { min-height: 0; }
 .studio-site .wh-case h3 { font-size: 21px; }
}

.news-wrap { max-width: 1180px; margin: auto; }
.news-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.news-heading p { color: #645e54; margin-top: 12px; }
.news-heading > a,.news-read { color: #285f5b; font-weight: 600; padding: 10px 0; white-space: nowrap; }
.news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.news-card { display: flex; flex-direction: column; min-width: 0; background: #fffdf8; border: 1px solid #d8d8cd; border-radius: 10px; overflow: hidden; }
.news-image { display: grid; place-items: center; background: #e4ece7; aspect-ratio: 16/10; padding: 12px; }
.news-image img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.news-placeholder { color: #285f5b; font-size: 28px; font-weight: 600; text-align: center; }
.news-placeholder small { font-size: 16px; font-weight: 400; }
.news-copy { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.news-copy time { color: #6a7067; font-size: 14px; }
.news-copy h3 { font-size: 23px; line-height: 1.5; margin: 12px 0; overflow-wrap: anywhere; }
.news-copy p { font-size: 17px; line-height: 1.75; color: #595e55; margin-bottom: 16px; }
.news-read { margin-top: auto; }
.news-card a:hover { text-decoration: underline; }
@media(max-width:850px) { .news-grid { grid-template-columns: 1fr; } .news-card { display: grid; grid-template-columns: 35% 1fr; } .news-image { aspect-ratio: auto; } }
@media(max-width:550px) { .news-heading { align-items: start; flex-direction: column; gap: 8px; } .news-card { display: flex; } .news-image { aspect-ratio: 16/9; } .news-copy { padding: 20px; } }

/* Public footer */
.studio-site .ws-footer {
    background: #193d39;
    color: #f7f3e9;
    padding: 60px 5vw 28px;
}
.ws-footer-inner { max-width: 1180px; margin: auto; }
.ws-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid #54716a; }
.studio-site .ws-footer .ws-footer-brand { font-family: 'Noto Serif Thai', Georgia, serif; font-size: clamp(32px,4vw,48px); line-height: 1.3; color: #fffaf0; letter-spacing: -.03em; }
.ws-footer-top p { color: #c8d8d0; font-size: 19px; line-height: 1.65; margin-top: 12px; }
.studio-site .ws-footer .ws-footer-cta { display: inline-flex; justify-content: space-between; align-items: center; gap: 40px; background: #e7efe6; color: #193d39; padding: 16px 24px; border-radius: 5px; font-weight: 600; min-height: 52px; }
.studio-site .ws-footer .ws-footer-cta:hover { background: #fffaf0; text-decoration: none; }
.ws-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 48px; padding: 36px 0; }
.ws-footer-grid > * { min-width: 0; }
.studio-site .ws-footer h2 { color: #fffaf0; font: 600 18px/1.6 Sarabun,sans-serif; margin-bottom: 14px; }
.ws-footer ul { list-style: none; padding: 0; margin: 0; }
.studio-site .ws-footer li a { display: inline-flex; min-height: 40px; align-items: center; color: #d2dfd7; }
.studio-site .ws-footer-contact > a { display: block; margin-bottom: 12px; overflow-wrap: anywhere; }
.ws-footer-contact small { display: block; color: #b8d0c5; font-size: 14px; margin-bottom: 3px; }
.ws-footer-contact span { font-size: 19px; }
.ws-footer-hours { color: #c8d8d0; margin-top: 16px; }
.ws-footer-network { border-top: 1px solid #54716a; border-bottom: 1px solid #54716a; padding: 20px 0; display: flex; align-items: center; gap: 16px 30px; flex-wrap: wrap; font-size: 15px; }
.ws-footer-network > span { color: #b8d0c5; }
.ws-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; font-size: 14px; color: #c8d8d0; }
.studio-site .ws-footer a:focus-visible { outline: 3px solid #e7efe6; outline-offset: 5px; }
@media (max-width: 1023px) { .studio-site .ws-footer { padding-bottom: 100px; } }
@media (max-width: 700px) {
    .studio-site .ws-footer { padding-top: 36px; }
    .ws-footer-top { align-items: start; flex-direction: column; }
    .ws-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .ws-footer-contact { grid-column: 1 / -1; border-top: 1px solid #54716a; padding-top: 24px; }
    .ws-footer-bottom { align-items: start; flex-direction: column; }
    .ws-footer-network { align-items: start; flex-direction: column; gap: 10px; }
}
@media (max-width: 360px) { .ws-footer-grid { grid-template-columns: 1fr; } }

/* Consistent action groups across public services, articles and portfolios. */
.studio-site .ws-contact-actions {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    margin: 24px auto 0;
    max-width: 960px;
}
.studio-site .ws-contact-actions > a {
    display: inline-flex;
    flex: 1 1 220px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    max-width: 320px;
    margin: 0;
    padding: 14px 20px;
    border: 1px solid #a7c4b8;
    border-radius: 8px;
    background: #fffdf7;
    background-image: none;
    color: #234d45 !important;
    font: 600 17px/1.5 Sarabun,sans-serif;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    overflow-wrap: anywhere;
}
.studio-site .ws-contact-actions > a.ws-primary-link {
    background: #e0eee5;
    border-color: #e0eee5;
}
.studio-site .ws-contact-actions > a:hover {
    background: #d1e4d8;
    color: #183c33 !important;
    border-color: #91b29f;
}
.studio-site .ws-contact-actions > a:focus-visible {
    outline: 3px solid #80b59d;
    outline-offset: 4px;
}
@media(max-width:640px) {
    .studio-site .ws-contact-actions { flex-direction: column; gap: 12px; }
    .studio-site .ws-contact-actions > a {
        flex: none;
        width: 100%;
        max-width: none;
        min-height: 54px;
    }
}

/* Homepage editorial introduction */
.studio-site .hero-refined { grid-template-columns: 1.08fr 1fr; gap: 30px; padding: 48px max(5vw,calc((100vw - 1320px)/2)); }
.studio-site .hero-refined .hero-copy { padding: 0; }
.hero-kicker { font-size: 12px; letter-spacing: .13em; color: #476a5e; font-weight: 600; margin-bottom: 24px; }
.studio-site .hero-refined h1 { font-size: clamp(32px,3.2vw,54px); line-height: 1.5; letter-spacing: -.035em; margin: 0; }
.hero-refined h1 em { font-style: normal; color: #285f5b; }
.hero-services-label { color: #285f5b; font-weight: 600; font-size: 17px; margin: 22px 0 12px; }
.hero-description { color: #5b6258; font-size: 17px; line-height: 1.85; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 28px; }
.studio-site .hero-actions .studio-cta { margin: 0; display: inline-flex; align-items: center; gap: 28px; padding: 14px 22px; min-height: 54px; border-radius: 6px; }
.hero-work-link { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; color: #285f5b; font-weight: 600; }
.hero-work-link:hover { text-decoration: underline; }
.hero-response { color: #667366; font-size: 14px; margin-top: 14px; }
.hero-visual { margin: 0; position: relative; align-self: stretch; min-height: 440px; border-radius: 8px 8px 64px 8px; overflow: hidden; }
.studio-site .hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
.hero-visual figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 18px 22px; border-radius: 5px 5px 36px 5px; background: #173e37ed; color: #fffaf0; }
.hero-visual figcaption span { display: block; color: #c5dbce; font-size: 14px; }
.hero-visual figcaption strong { font-size: 21px; font-weight: 500; }
.studio-site .services-refined { gap: 22px; padding: 0 max(5vw,calc((100vw - 1320px)/2)) 48px; }
.studio-site .services-refined > a { display: flex; flex-direction: column; padding: 0; border: 1px solid #d5ded1; border-radius: 8px; overflow: hidden; background: #fffdf8; transition: border-color .2s; }
.studio-site .services-refined > a:hover { border-color: #285f5b; }
.studio-site .services-refined img { width: 100%; aspect-ratio: 2.1; object-fit: cover; height: auto; }
.services-refined > a > div { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.service-benefit { font-size: 14px; color: #587161; margin-bottom: 6px; }
.studio-site .services-refined strong { display: flex; align-items: start; justify-content: space-between; gap: 8px; font-size: clamp(19px,1.65vw,25px); line-height: 1.4; margin: 0 0 10px; }
.services-refined strong + span { color: #5b6258; font-size: 16px; line-height: 1.75; }
.service-more { color: #285f5b; font-size: 15px; font-weight: 600; margin-top: auto; padding-top: 18px; }
@media(max-width:950px) {
 .studio-site .hero-refined { grid-template-columns: 1fr; padding-top: 32px; }
 .hero-visual { min-height: 280px; }
 .studio-site .services-refined { gap: 14px; }
}
@media(max-width:700px) {
 .studio-site .hero-refined { gap: 24px; padding-bottom: 24px; }
 .hero-kicker { margin-bottom: 16px; font-size: 11px; }
 .hero-services-label { font-size: 15px; }
 .hero-desktop-break { display: none; }
 .hero-visual { min-height: 230px; border-bottom-right-radius: 40px; }
 .studio-site .services-refined { grid-template-columns: 1fr; }
 .studio-site .services-refined > a { display: flex; flex-direction: column; }
 .studio-site .services-refined img { width: 100%; aspect-ratio: 2.3; }
 .hero-actions { gap: 8px 18px; }
}

.ws-feature-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    border: 1px solid #c4d8cc;
    border-radius: 16px;
    background: #e7efe6;
    color: #285f5b;
}
.ws-feature-icon svg { display: block; width: 30px; height: 30px; }
.studio-site #device-benefits { background: #193d39; }
.studio-site #device-benefits .glass-dark { background: #20443e; border: 1px solid #527168; }
.studio-site #device-benefits .ws-feature-icon { background: #31584c; border-color: #638474; color: #d9ecd9; }
.studio-site #device-benefits .gradient-text { color: #cce4cc; -webkit-text-fill-color: currentColor; }
.studio-site #device-benefits p { color: #d0dfd6; }
.studio-site :is(#device-benefits,#features) .grid > div { transform: none; }
.studio-site #features .grid > div { padding: 28px 18px; border-color: #d5ded1; box-shadow: none; }
@media(max-width:550px) {
    .ws-feature-icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px; }
    .ws-feature-icon svg { width: 27px; height: 27px; }
}