:root{--blue:#07538b;--yellow:#f1ca22;--sky:#8dcaf7;--ink:#092f49;--muted:#526b7b;--soft:#f5faff;--line:#d9e6ee;--white:#fff}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:"IBM Plex Sans Thai",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.eyebrow{display:flex;align-items:center;gap:.75rem;color:var(--blue);font:700 .75rem/1.2 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase}.eyebrow:before{content:"";width:36px;height:3px;background:var(--yellow)}.section{padding:110px 0}.section-head{display:grid;grid-template-columns:1fr .8fr;gap:5rem;align-items:end;margin-bottom:56px}.section-head h2{margin:14px 0 0;font-size:clamp(2.2rem,4vw,4rem);line-height:1.14;letter-spacing:-.04em}.section-head p{margin:0;color:var(--muted);font-size:1.08rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;background:var(--blue);color:white;border:1px solid var(--blue);font-weight:600;transition:.2s}.button:hover{background:#053d66;transform:translateY(-2px)}.button.alt{background:white;color:var(--blue)}.button.alt:hover{background:var(--soft)}
    header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(7,83,139,.12)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.brand img{width:192px;height:auto}.nav-links{display:flex;align-items:center;gap:2rem;font-weight:500}.nav-links a{position:relative}.nav-links a:not(.button):after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:var(--yellow);transition:.2s}.nav-links a:hover:after{right:0}.nav-links .button{min-height:42px;padding:0 18px}.menu{display:none;background:none;border:0;color:var(--blue);font-size:1.6rem}
    .hero{padding:78px 0 64px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:18px;min-height:640px}.hero-copy{position:relative;z-index:2;padding-right:1rem}.hero h1{margin:22px 0 24px;font-size:clamp(3rem,5.7vw,5.6rem);line-height:1.02;letter-spacing:-.065em}.hero h1 span{color:var(--blue);position:relative;display:inline-block}.hero h1 span:after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.16em;background:var(--yellow);z-index:-1}.hero-lead{max-width:590px;margin:0 0 32px;color:var(--muted);font-size:1.14rem;line-height:1.8}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-image{position:relative;margin-right:-8vw}.hero-image:before{content:"";position:absolute;width:240px;height:240px;background:var(--sky);border-radius:50%;right:10%;top:4%;opacity:.28}.hero-image img{position:relative;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;border-bottom:7px solid var(--yellow)}.hero-note{position:absolute;left:3%;bottom:4%;background:var(--blue);color:white;padding:16px 20px;font-weight:600;box-shadow:14px 14px 0 var(--sky)}.hero-note b{display:block;color:var(--yellow);font:800 1.7rem/1 Manrope,sans-serif}.service-strip{border-block:1px solid var(--line)}.service-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}.strip-item{padding:24px 22px;border-right:1px solid var(--line)}.strip-item:first-child{border-left:1px solid var(--line)}.strip-item b{display:block;color:var(--blue);font:800 .72rem/1.2 Manrope,sans-serif;letter-spacing:.12em;margin-bottom:5px}.strip-item span{font-weight:600}
    .services{background:linear-gradient(180deg,#fff 0,#fff 55%,var(--soft) 55%,var(--soft) 100%)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--blue);border-left:1px solid var(--line)}.service-card{min-height:270px;padding:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:white;display:flex;flex-direction:column;transition:.25s}.service-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(7,83,139,.1);border-bottom-color:var(--yellow)}.service-num{display:flex;align-items:center;justify-content:space-between;color:var(--blue);font:700 .8rem/1 Manrope,sans-serif}.service-icon{width:46px;height:46px;border-radius:50%;background:var(--sky);display:grid;place-items:center;font-size:1.35rem}.service-card h3{margin:auto 0 10px;font-size:1.55rem;line-height:1.25}.service-card p{margin:0;color:var(--muted);line-height:1.65}
    .portfolio{padding-top:120px}.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}.work-card,.work-card.featured,.work-card.small,.work-card.corporate{position:relative;grid-column:auto;grid-row:auto;min-height:360px;overflow:hidden;background:var(--soft);margin:0}.work-card img{width:100%;height:100%;object-fit:cover;transition:.55s}.work-card:hover img{transform:scale(1.025)}.work-info{position:absolute;left:0;right:0;bottom:0;padding:70px 28px 26px;background:linear-gradient(transparent,rgba(1,40,67,.88));color:white}.work-info small{color:var(--yellow);font:700 .72rem/1.2 Manrope,sans-serif;letter-spacing:.13em}.work-info h3{margin:8px 0 0;font-size:1.65rem;line-height:1.25}.work-card.corporate img{object-position:center 48%}
    .process{background:var(--blue);color:white}.process .section-head p{color:#cde7f9}.process .eyebrow{color:white}.process-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.35)}.step{padding:36px 26px 22px;border-right:1px solid rgba(255,255,255,.22)}.step:last-child{border:0}.step b{font:800 2rem/1 Manrope,sans-serif;color:var(--yellow)}.step h3{font-size:1.35rem;margin:28px 0 8px}.step p{color:#cde7f9;margin:0}.promise{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.promise-mark{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat{padding:30px;background:var(--soft);border-top:6px solid var(--sky)}.stat.yellow{border-color:var(--yellow)}.stat b{display:block;color:var(--blue);font:800 clamp(2.8rem,5vw,4.8rem)/1 Manrope,sans-serif}.stat span{display:block;margin-top:10px;color:var(--muted)}.promise h2{font-size:clamp(2.4rem,4.2vw,4.5rem);line-height:1.12;letter-spacing:-.045em;margin:18px 0 24px}.promise p{color:var(--muted);font-size:1.08rem}.checklist{list-style:none;padding:0;margin:28px 0 0}.checklist li{padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}.checklist li:before{content:"✓";color:var(--blue);font-weight:800;margin-right:12px;background:var(--yellow);width:25px;height:25px;display:inline-grid;place-items:center;border-radius:50%}
    .contact{background:var(--soft);padding:100px 0}.contact-box{display:grid;grid-template-columns:1fr .9fr;background:white;border-top:8px solid var(--yellow)}.contact-copy{padding:58px}.contact-copy h2{margin:14px 0 20px;font-size:clamp(2.4rem,4.5vw,4.6rem);line-height:1.12;letter-spacing:-.045em}.contact-copy p{color:var(--muted);max-width:570px}.contact-links{margin-top:34px;border-top:1px solid var(--line)}.contact-links a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-weight:600}.contact-links a span:first-child{color:var(--muted);font-weight:500}.contact-form{background:var(--blue);color:white;padding:58px}.contact-form h3{font-size:1.5rem;margin:0 0 24px}.field{display:block;margin-bottom:16px}.field span{display:block;font-size:.82rem;margin-bottom:6px;color:#cde7f9}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:white;padding:13px 14px;outline:none}.field select option{color:var(--ink)}.field textarea{min-height:110px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--yellow)}.contact-form .button{width:100%;background:var(--yellow);border-color:var(--yellow);color:var(--ink);margin-top:8px}.contact-form .button:hover{background:#ffe25b}.footer{padding:30px 0;border-top:1px solid var(--line)}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:.86rem}.footer img{width:150px}.social{display:flex;gap:20px}.social a:hover{color:var(--blue)}
    .reveal{opacity:0;transform:translateY(20px);transition:.7s}.reveal.visible{opacity:1;transform:none}
    @media(max-width:900px){.wrap{width:min(100% - 36px,1180px)}.menu{display:block}.nav-links{display:none;position:absolute;top:78px;left:18px;right:18px;background:white;border:1px solid var(--line);padding:22px;flex-direction:column;align-items:stretch;box-shadow:0 20px 50px rgba(7,83,139,.12)}.nav-links.open{display:flex}.hero-grid{grid-template-columns:1fr;min-height:auto;gap:40px}.hero-copy{max-width:720px}.hero-image{margin:0}.service-strip .wrap{grid-template-columns:1fr 1fr}.strip-item:nth-child(3){border-left:1px solid var(--line)}.section-head,.promise,.contact-box{grid-template-columns:1fr;gap:36px}.service-grid{grid-template-columns:1fr 1fr}.work-grid{grid-template-columns:1fr}.work-card.featured,.work-card.small,.work-card.corporate{grid-column:auto;grid-row:auto;min-height:480px}.process-list{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.22)}}
    @media(max-width:580px){.wrap{width:min(100% - 28px,1180px)}.brand img{width:154px}.hero{padding:58px 0 46px}.hero h1{font-size:clamp(2.8rem,14vw,4rem)}.hero-image img{aspect-ratio:1/1;object-position:58% center}.hero-note{left:8px;bottom:0;padding:12px 14px;box-shadow:8px 8px 0 var(--sky)}.service-strip .wrap,.service-grid,.process-list,.promise-mark{grid-template-columns:1fr}.strip-item,.strip-item:nth-child(3){border-left:1px solid var(--line)}.section{padding:78px 0}.section-head{margin-bottom:36px}.service-card{min-height:225px}.work-card.featured,.work-card.small,.work-card.corporate{min-height:380px}.step{border-right:0;border-bottom:1px solid rgba(255,255,255,.22)}.contact-copy,.contact-form{padding:36px 24px}.footer-row{align-items:flex-start;flex-direction:column}.social{flex-wrap:wrap}.reveal{opacity:1;transform:none}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.work-card img,.button,.service-card{transition:none}}
    #work-samples{scroll-margin-top:100px}.sample-list{border-top:1px solid var(--line)}.sample-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}.sample-pages{display:flex;gap:16px;align-items:center;justify-content:center;background:var(--soft);padding:24px}.sample-pages a{flex:1;max-width:190px}.sample-pages img{width:100%;height:auto;box-shadow:0 6px 18px rgba(7,83,139,.1)}.sample-copy small{color:var(--blue);font:700 .75rem/1.2 Manrope,sans-serif;letter-spacing:.1em}.sample-copy h3{font-size:1.7rem;line-height:1.3;margin:12px 0}.sample-copy p{color:var(--muted);margin:0 0 20px}.sample-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.sample-note{color:var(--muted);font-size:.9rem}.sample-collection{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:32px}.sample-collection p{margin:0;color:var(--muted)}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}@media(max-width:850px){.sample-row{grid-template-columns:1fr;gap:24px;padding:26px 0}.sample-pages{padding:18px;gap:12px}.sample-copy h3{font-size:1.4rem}.sample-collection{align-items:flex-start;flex-direction:column}.sample-collection .button{width:100%}}
.sample-mockup{position:relative;display:block;overflow:hidden;background:var(--soft)}.sample-mockup img{display:block;width:100%;height:auto;transition:transform .35s}.sample-mockup:hover img{transform:scale(1.02)}.sample-open{position:absolute;right:16px;bottom:16px;background:var(--blue);color:white;padding:10px 16px;font-weight:600;box-shadow:0 4px 16px #07334f20}.sample-row{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}@media(max-width:850px){.sample-row{grid-template-columns:1fr}}
   .category-head{padding:56px 0 28px}.category-back{font-weight:600;color:var(--blue);min-height:44px;display:inline-flex;align-items:center}.category-head h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.2;margin:18px 0}.category-head p{color:var(--muted);max-width:640px}.category-list{padding-bottom:64px}.sample-row h3{font-size:1.5rem}.work-info p{margin-bottom:0}.sample-copy h2{font-size:clamp(1.3rem,2.7vw,1.8rem);line-height:1.4;margin:12px 0}.sample-row[hidden]{display:none}.catalog-tools{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:0 0 24px}.catalog-tools label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;color:var(--muted)}.catalog-tools input,.catalog-tools select{min-height:46px;border:1px solid var(--line);padding:8px 12px;background:white;color:var(--ink);border-radius:0}.catalog-tools input{width:min(100%,340px)}.catalog-status{font-size:.9rem;color:var(--muted);margin:0 0 16px}#no-results{color:var(--muted);padding:36px 0}.sample-row{gap:32px}.sample-mockup img{max-height:510px;object-fit:contain}.sample-mockup{background:var(--soft)}@media(max-width:580px){.catalog-tools{gap:12px}.catalog-tools label:first-child{flex:1 1 180px}.catalog-tools input{width:100%}.sample-row{gap:18px}.sample-open{right:12px;bottom:12px;font-size:.9rem;padding:8px 12px}}.sample-copy h2{font-size:clamp(1.3rem,2.7vw,1.8rem);line-height:1.4;margin:12px 0}.sample-row[hidden]{display:none}.catalog-tools{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:0 0 24px}.catalog-tools label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;color:var(--muted)}.catalog-tools input,.catalog-tools select{min-height:46px;border:1px solid var(--line);padding:8px 12px;background:white;color:var(--ink);border-radius:0}.catalog-tools input{width:min(100%,340px)}.catalog-status{font-size:.9rem;color:var(--muted);margin:0 0 16px}#no-results{color:var(--muted);padding:36px 0}.sample-row{gap:32px}.sample-mockup img{max-height:510px;object-fit:contain}.sample-mockup{background:var(--soft)}@media(max-width:580px){.catalog-tools{gap:12px}.catalog-tools label:first-child{flex:1 1 180px}.catalog-tools input{width:100%}.sample-row{gap:18px}.sample-open{right:12px;bottom:12px;font-size:.9rem;padding:8px 12px}}.collection-nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 24px}.collection-nav a{padding:8px 0;color:var(--brand,#07558b);text-decoration:none;min-height:44px}.collection-nav a[aria-current="page"]{font-weight:700;border-bottom:2px solid #e8c529}.sample-row{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:42px;align-items:center}.sample-row>.sample-copy{display:block;min-width:0}.sample-copy h2{margin:12px 0 16px;line-height:1.35}.sample-copy .work-summary{font-size:1rem;line-height:1.85;color:var(--muted);margin:0 0 16px;max-width:42em}.sample-row>.sample-mockup{min-width:0}.sample-row>.sample-mockup>img{height:auto;max-height:none;object-fit:contain;transform:none}.service-intro{padding-top:16px;border-top:1px solid var(--line);font-size:.96rem;line-height:1.8;max-width:880px!important}.service-intro a{white-space:nowrap;font-weight:600;color:var(--blue)}@media(max-width:760px){.sample-row{grid-template-columns:minmax(0,1fr);gap:20px}.sample-copy .work-summary{margin-bottom:12px}}.sample-copy h2 .work-edition{display:block;font-size:.69em;font-weight:600;line-height:1.55;letter-spacing:0;margin-top:6px}.sample-copy .client-meta{font-size:.96rem;line-height:1.7;color:var(--muted);margin:14px 0 0}.client-meta strong{font-weight:700}.client-meta span{font-weight:400}
.guide-wrap{max-width:820px;margin:0 auto;padding:64px 24px 80px}.guide-wrap h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.4;margin:16px 0 24px;letter-spacing:-.025em}.guide-wrap h2{font-size:clamp(1.35rem,2.5vw,1.65rem);line-height:1.5;margin:0 0 16px}.guide-wrap p{margin:0 0 18px}.guide-lead{font-size:1.1rem;color:var(--muted)}.guide-byline{font-size:.85rem;color:var(--muted);margin:0 0 36px}.guide-body{font-size:1.05rem;line-height:1.95}.guide-body section{margin:38px 0}.guide-body ul,.guide-body ol{padding-left:1.5em}.guide-body li{margin:12px 0}.guide-body strong{font-weight:600}.guide-toc{border-block:1px solid var(--line);padding:20px 0;margin:30px 0}.guide-toc ol{margin:10px 0 0;padding-left:1.5em}.guide-wrap a:not(.button){color:var(--blue);text-decoration:underline;text-underline-offset:4px}.guide-table-wrap{overflow-x:auto;margin:16px 0 24px}.guide-body table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.7}.guide-body caption{text-align:left;font-weight:600;padding:0 0 12px}.guide-body th,.guide-body td{text-align:left;vertical-align:top;padding:12px;border:1px solid var(--line)}.guide-body thead th{background:var(--soft)}.guide-body th:first-child{width:22%}.guide-related,.guide-start{border-top:1px solid var(--line);padding-top:26px;margin-top:36px}.guide-related li{margin:10px 0}.guide-actions{display:flex;gap:12px;flex-wrap:wrap}.guide-actions .button{white-space:normal;text-align:center}.guide-index-item{padding:26px 0;border-top:1px solid var(--line)}.guide-index-item h2{margin:0 0 12px}.guide-index-item p{margin:0;color:var(--muted)}.guide-footer{border-top:1px solid var(--line);padding:26px 24px;text-align:center;font-size:.85rem;color:var(--muted)}.guide-wrap a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}@media(max-width:550px){.guide-wrap{padding:38px 18px 56px}.guide-body{font-size:1rem}.guide-body th,.guide-body td{padding:9px;font-size:.88rem}.guide-actions .button{width:100%}}