@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root { --navy:#0d2447; --blue:#153b68; --accent:#1874bb; --ink:#24344a; --secondary:#5c6878; --line:#dce2e9; --surface:#f3f6f9; --font:'Noto Sans Thai','Noto Sans JP',Tahoma,Arial,sans-serif; --bs-body-font-family:var(--font); --bs-body-color:var(--ink); --bs-body-line-height:1.85; --bs-border-radius:3px; --bs-link-color:var(--blue); --bs-link-hover-color:var(--accent); }
html { scroll-behavior:smooth; scroll-padding-top:128px; }
html[lang=ja] { --font:'Noto Sans JP','Noto Sans Thai',Arial,sans-serif; }
body { margin:0; background:#fff; color:var(--ink); font:15px/1.85 var(--font); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { text-decoration:none; }
a,button,input,textarea { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #2c8bd1; outline-offset:4px; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { color:var(--navy); font-weight:600; line-height:1.55; }
h2 { font-size:31px; } h3 { font-size:22px; }
.container { max-width:1240px; padding-inline:32px; }
.section { padding-block:78px; }
.text-secondary { color:var(--secondary) !important; }
.skip { position:absolute; top:-90px; left:20px; background:var(--navy); color:white; padding:10px 18px; z-index:100; }
.skip:focus { top:8px; }
.btn { font:500 14px/1.7 var(--font); border-radius:2px; padding:12px 21px; transition:background-color .15s,border-color .15s; }
.btn-primary { --bs-btn-bg:var(--blue); --bs-btn-border-color:var(--blue); --bs-btn-hover-bg:#0e2e56; --bs-btn-hover-border-color:#0e2e56; --bs-btn-active-bg:var(--navy); --bs-btn-active-border-color:var(--navy); --bs-btn-disabled-bg:var(--blue); --bs-btn-disabled-border-color:var(--blue); }
.btn-outline-primary { --bs-btn-color:var(--blue); --bs-btn-border-color:#9aadc3; --bs-btn-hover-color:var(--blue); --bs-btn-hover-bg:#eaf1f8; --bs-btn-hover-border-color:var(--blue); --bs-btn-active-color:white; --bs-btn-active-bg:var(--blue); --bs-btn-active-border-color:var(--blue); }
.section-eyebrow { font:600 13px/1.5 Arial,sans-serif; color:var(--accent); margin-bottom:9px; }
.heading-rule { width:44px; height:3px; background:var(--accent); margin-top:24px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:34px; }
.section-heading>p { max-width:480px; color:var(--secondary); font-size:14px; }
.section-heading>p br { display:none; }
/* A conventional company masthead with a compact utility row. */
.site-header { position:sticky; top:0; z-index:30; background:white; border-top:4px solid var(--navy); border-bottom:1px solid var(--line); }
.header-inner { min-height:106px; display:flex; align-items:center; gap:35px; }
.wordmark { display:flex; gap:14px; align-items:center; color:var(--navy); flex-shrink:0; }
.wordmark:hover { color:var(--blue); }
.wordmark>strong { font:700 38px/1 Arial,sans-serif; letter-spacing:-2px; }
.wordmark>strong>span { font-weight:400; }
.wordmark-detail { border-left:1px solid #bac7d6; padding:5px 0 4px 14px; font:600 10px/1.5 Arial,sans-serif; letter-spacing:.3px; }
.wordmark-detail small { display:block; color:#62748b; font-size:9px; margin-top:4px; letter-spacing:.7px; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; gap:9px; }
.header-utility { display:flex; align-items:center; gap:22px; }
.utility-company { font:11px/1.5 Arial,sans-serif; color:#778393; }
.languages { align-items:center; gap:1px; }
.languages .nav-link { padding:4px 9px; color:#657386; font:12px/1.5 Arial,sans-serif; }
.languages .nav-link[aria-current=page] { font-weight:700; color:var(--navy); background:#edf2f7; }
.header-main { display:flex; align-items:center; gap:26px; }
.desktop-nav { gap:25px; }
.desktop-nav .nav-link { padding:7px 0; font-size:14px; font-weight:500; color:#233a57; border-bottom:2px solid transparent; }
.desktop-nav .nav-link:hover { border-color:var(--accent); }
.header-contact { display:flex; gap:10px; align-items:center; padding:9px 18px; font-size:13px; }
.menu-button { display:none; }
.mobile-nav { padding:9px 24px 19px; border-top:1px solid var(--line); background:#fff; }
.mobile-nav a { display:block; color:var(--navy); padding:13px 5px; border-bottom:1px solid #e4e9ef; font-size:14px; }
/* Business context first: solid navy messaging and a real Bangkok panorama. */
.hero { display:grid; grid-template-columns:43% 57%; max-width:1920px; margin-inline:auto; background:var(--navy); min-height:500px; }
.hero-copy { display:flex; align-items:center; }
.hero-copy-inner { width:530px; max-width:100%; margin-left:auto; padding:54px 48px 58px 32px; }
.hero-company { color:#a7c6e4; font:600 13px/1.5 Arial,sans-serif; margin-bottom:21px; }
.hero h1 { color:#fff; font-size:40px; line-height:1.55; font-weight:600; }
.hero h1 span { display:block; }
.hero-description { color:#d0dbe7; font-size:14px; line-height:1.95; margin-top:25px; max-width:430px; }
.hero-button { display:flex; align-items:center; justify-content:space-between; gap:32px; width:fit-content; min-width:205px; margin-top:29px; color:white; border:1px solid #7994b5; background:transparent; }
.hero-button:hover { color:white; background:#1c3a61; border-color:white; }
.hero-button>span:last-child { font-size:18px; }
.hero-photo { position:relative; min-width:0; background:#233d5c; overflow:hidden; }
.hero-photo img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; object-position:55% center; }
.hero-location { position:absolute; right:27px; bottom:22px; color:white; text-shadow:0 1px 5px #0d2447; font:11px/1.5 Arial,sans-serif; }
.quick-links { background:#fff; border-bottom:1px solid var(--line); }
.quick-link { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 29px; border-left:1px solid var(--line); color:var(--navy); }
.quick-link:last-child { border-right:1px solid var(--line); }
.quick-link small { display:block; color:var(--secondary); font-size:12px; margin-bottom:5px; }
.quick-link strong { display:block; font-size:15px; font-weight:500; line-height:1.6; }
.quick-arrow { color:var(--accent); font-size:20px; }
.quick-link:hover { color:var(--blue); background:#f4f7fa; }
.about-copy h3 { font-size:25px; line-height:1.7; margin:0 0 19px; }
.about-copy h3 br { display:none; }
.about-copy>p { max-width:720px; }
.about-copy>p+p { margin-top:13px; }
.business { background:var(--surface); }
.business-card { border:1px solid #d7e0e9; border-radius:0; color:var(--ink); box-shadow:none; }
.business-card-heading { min-height:126px; display:flex; align-items:center; gap:23px; padding:26px 30px; background:var(--blue); color:#fff; }
.business-card-heading>svg { flex-shrink:0; color:#b7d4ee; }
.business-category { font:13px/1.5 Arial,sans-serif; color:#bbd2e9; margin-bottom:7px; }
.business-card-heading h3 { font-size:25px; line-height:1.5; color:#fff; }
.mono-card .business-card-heading { align-items:flex-start; justify-content:center; flex-direction:column; gap:4px; background:var(--navy); }
.business-card-heading .mono-name { font:700 28px/1.3 Arial,sans-serif; letter-spacing:.1px; color:#fff; }
.mono-card .business-card-heading>p { font-size:14px; color:#c5d7e9; }
.business-card .card-body { display:flex; flex-direction:column; padding:29px 30px 30px; }
.business-card .card-body>p { font-size:14px; line-height:1.95; color:#536175; }
.service-list { margin-block:24px 29px; flex:1; }
.service-list .list-group-item { position:relative; padding:13px 5px 13px 22px; border-color:#e3e8ee; font-size:14px; color:#233e5d; background:transparent; }
.service-list .list-group-item:before { content:''; position:absolute; width:5px; height:5px; top:24px; left:2px; background:var(--accent); }
.inquiry-link { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:12px 17px; font-size:13px; text-align:left; }
.inquiry-link>span:last-child { flex-shrink:0; font-size:18px; }
.principles h3 { padding-bottom:16px; margin-bottom:16px; border-bottom:2px solid #bdd0e3; font-size:20px; }
.principles p { color:var(--secondary); font-size:14px; }
.process { margin-top:40px; padding:25px 29px; background:var(--surface); border:1px solid #e2e8ee; }
.process>h3 { font-size:17px; margin-bottom:24px; }
.process ol { padding-left:0; margin-bottom:0; list-style:none; }
.process li { display:flex; align-items:flex-start; gap:13px; padding-inline:22px; border-left:1px solid #d5dfe8; }
.process li:first-child { padding-left:0; border-left:0; }
.process li:last-child { padding-right:0; }
.step-number { color:var(--accent); font:600 20px/1.5 Arial,sans-serif; }
.process strong { display:block; font-size:14px; font-weight:500; line-height:1.7; }
.process li p { color:var(--secondary); font-size:12px; margin-top:6px; }
.company { border-top:1px solid var(--line); }
.company-intro { max-width:300px; margin-top:22px; color:var(--secondary); font-size:14px; }
.company-details { margin:0; border-top:2px solid var(--blue); }
.company-details>div { display:grid; grid-template-columns:185px 1fr; border-bottom:1px solid var(--line); }
.company-details dt { padding:22px 21px; margin:0; font-size:13px; font-weight:500; background:#f3f6f9; color:#344d69; }
.company-details dd { margin:0; padding:22px 25px; font-size:14px; min-width:0; overflow-wrap:anywhere; }
.company-details a { text-decoration:underline; text-underline-offset:3px; }
.contact { background:#f0f4f8; border-top:1px solid var(--line); }
.contact-copy { color:#586b80; margin-top:23px; font-size:14px; line-height:2; }
.contact-copy br { display:none; }
.contact-detail { display:flex; flex-direction:column; gap:8px; border-top:1px solid #cad6e3; padding-top:23px; margin-top:29px; }
.contact-detail>span { color:var(--secondary); font-size:12px; }
.contact-detail a { color:var(--navy); font-size:22px; font-weight:500; overflow-wrap:anywhere; }
.contact-detail a:hover { text-decoration:underline; text-underline-offset:4px; }
.form-panel { background:#fff; border:1px solid #d7e0ea; padding:33px 35px; }
.form-panel>h3 { font-size:23px; margin-bottom:10px; }
.contact-fields { padding:0; margin:0; border:0; min-width:0; }
.required-note { font-size:12px; color:var(--secondary); margin-bottom:22px; }
.inquiry-options { display:flex; flex-wrap:wrap; gap:13px 24px; border:0; padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.form-check { margin-bottom:0; font-size:13px; cursor:pointer; }
.form-check-input { margin-top:.4em; border-color:#a0adbd; }
.form-check-input:checked { background-color:var(--blue); border-color:var(--blue); }
.form-check-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #1874bb25; }
.form-label { font-size:13px; color:#344a63; margin-bottom:7px; }
.form-control { border-color:#c4ceda; color:var(--ink); background:#fff; border-radius:3px; padding:10px 12px; font:14px/1.75 var(--font); }
.form-control:focus { border-color:#4693ca; box-shadow:0 0 0 3px #1874bb1c; }
.form-control::placeholder { color:#8b96a4; }
textarea.form-control { resize:vertical; min-height:120px; }
.form-notice { color:var(--secondary); font-size:12px; line-height:1.85; margin-top:22px; }
.form-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.form-submit { display:flex; justify-content:space-between; gap:30px; min-width:220px; }
.form-actions .btn { font-size:13px; }
.copy-help { margin-top:15px; font-size:11px; color:#68788c; }
.form-status { margin-top:20px; padding:13px 16px; font-size:13px; color:var(--blue); background:#edf4fb; border-left:3px solid var(--accent); }
#copy-fallback { margin-top:20px; }
.privacy-details { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--secondary); }
.privacy-details summary { cursor:pointer; }
.privacy-details p { margin-top:13px; }
.site-footer { background:var(--navy); color:#d1deeb; padding-block:32px 21px; }
.footer-top { display:flex; align-items:center; gap:35px; padding-bottom:28px; }
.footer-wordmark { color:#fff; font:700 27px/1 Arial,sans-serif; white-space:nowrap; letter-spacing:-.8px; }
.footer-wordmark>span { display:block; font:11px/1.5 Arial,sans-serif; letter-spacing:.1px; margin-top:8px; color:#aabed5; }
.footer-nav { margin-left:auto; gap:7px; }
.footer-nav .nav-link { color:#d1deeb; font-size:12px; padding:7px 12px; }
.footer-nav .nav-link:hover { text-decoration:underline; text-underline-offset:4px; }
.back-top { width:38px; height:38px; display:grid; place-items:center; color:#d1deeb; border:1px solid #49617e; font-size:18px; }
.back-top:hover { background:#1c3a5e; color:#fff; }
.footer-bottom { display:flex; gap:12px 25px; align-items:center; justify-content:space-between; border-top:1px solid #2b4361; padding-top:19px; }
.footer-bottom small { font-size:10px; color:#9eb1c8; }
.photo-credit a { color:#9eb1c8; text-decoration:underline; text-underline-offset:2px; }
html[lang=en] h1 { font-size:41px; line-height:1.22; }
html[lang=ja] h1 { font-size:36px; line-height:1.65; }
html[lang=en] h2 { font-size:31px; line-height:1.35; }
html[lang=ja] h2 { font-size:29px; }
html[lang=en] .about-copy h3 { line-height:1.45; }
html[lang=ja] .about-copy h3 { font-size:23px; }
@media (min-width:821px) { .mobile-nav { display:none; } }
@media (max-width:1100px) {
 .wordmark-detail { display:none; } .header-inner { gap:25px; } .desktop-nav { gap:22px; }
 .hero-copy-inner { padding:43px 32px; } .hero h1 { font-size:34px; } .hero-description { font-size:13px; }
 html[lang=en] h1 { font-size:34px; } html[lang=ja] h1 { font-size:30px; }
 .company-details>div { grid-template-columns:150px 1fr; } .contact-detail a { font-size:19px; } .form-panel { padding:28px; } .footer-nav { gap:0; }
}
@media (max-width:991px) {
 .section { padding-block:62px; } .heading-rule { margin-top:15px; } .about-copy h3 { font-size:24px; }
 .company-intro { max-width:none; } .company-intro br { display:none; } .company-details>div { grid-template-columns:190px 1fr; }
 .contact-intro { display:grid; grid-template-columns:1fr 1fr; gap:0 45px; } .contact-intro>.section-eyebrow,.contact-intro>h2 { grid-column:1; }
 .contact-copy { margin-top:16px; grid-column:1; } .contact-detail { grid-column:2; grid-row:2/4; margin-top:0; align-self:start; padding-top:0; border:0; } .contact-detail a { font-size:23px; }
 .footer-top { flex-wrap:wrap; gap:22px; } .footer-nav { margin-left:auto; }
}
@media (max-width:820px) {
 html { scroll-padding-top:90px; } .header-inner { min-height:77px; gap:20px; } .wordmark>strong { font-size:33px; } .header-right { gap:0; }
 .header-main,.utility-company { display:none; } .languages .nav-link { padding:7px 9px; }
 .menu-button { display:flex; flex-direction:column; justify-content:center; gap:5px; flex-shrink:0; width:32px; height:40px; padding:4px; border:0; background:transparent; }
 .menu-button span { width:24px; height:2px; background:var(--navy); }
 .menu-button[aria-expanded=true] span:first-child { transform:translateY(7px) rotate(45deg); } .menu-button[aria-expanded=true] span:nth-child(2) { opacity:0; } .menu-button[aria-expanded=true] span:last-child { transform:translateY(-7px) rotate(-45deg); }
 .hero { grid-template-columns:1fr; min-height:0; } .hero-copy-inner { width:100%; margin:0; padding:40px 32px 43px; }
 .hero-company { margin-bottom:15px; } .hero h1 { font-size:37px; } .hero-description { max-width:590px; margin-top:18px; font-size:14px; }
 .hero-button { margin-top:23px; } .hero-photo { height:285px; } .hero-photo img { object-position:center 56%; }
 .quick-link { padding:21px 18px; gap:13px; } .quick-link strong { font-size:13px; } .quick-link small { font-size:11px; } .quick-arrow { font-size:17px; }
 .section-heading { gap:25px; } .section-heading>p { max-width:350px; font-size:13px; } .principles h3 { font-size:19px; }
 .process { padding:25px; } .process li { padding-inline:16px; } .process strong { font-size:13px; }
 html[lang=en] h1 { font-size:38px; max-width:590px; } html[lang=ja] h1 { font-size:34px; }
}
@media (max-width:767px) {
 .quick-link { border-left:0; border-bottom:1px solid var(--line); padding:16px 0; } .quick-link:last-child { border-right:0; border-bottom:0; }
 .quick-link>span:first-child { display:flex; gap:20px; align-items:baseline; } .quick-link small { margin:0; min-width:93px; } .quick-link strong { font-size:14px; }
 .principles h3 { margin-bottom:10px; padding-bottom:12px; }
 .process li,.process li:first-child,.process li:last-child { padding:17px 0; border-left:0; border-top:1px solid #d5dfe8; } .process li:last-child { padding-bottom:0; }
 .process>h3 { margin-bottom:16px; } .process li p { margin-top:3px; }
 .footer-nav { width:100%; margin:0; gap:10px 20px; order:3; } .footer-nav .nav-link { padding:0; } .back-top { margin-left:auto; }
}
@media (max-width:575px) {
 .container { padding-inline:22px; } .section { padding-block:49px; } .header-inner { min-height:72px; gap:14px; } .wordmark>strong { font-size:30px; }
 .languages .nav-link { padding:7px; font-size:11px; } .hero-copy-inner { padding:32px 24px 35px; } .hero-company { font-size:12px; margin-bottom:15px; }
 .hero h1 { font-size:31px; line-height:1.6; } .hero-description { font-size:13px; line-height:1.9; margin-top:17px; }
 .hero-button { min-width:196px; padding:10px 17px; font-size:13px; margin-top:22px; } .hero-photo { height:220px; } .hero-location { bottom:14px; right:18px; font-size:10px; }
 .quick-link>span:first-child { display:block; } .quick-link small { font-size:11px; margin-bottom:3px; } .quick-link strong { font-size:14px; } .quick-link { padding-block:13px; }
 h2 { font-size:26px; } .section-eyebrow { font-size:12px; margin-bottom:6px; } .heading-rule { margin-top:13px; width:34px; }
 .about-copy h3 { font-size:21px; line-height:1.65; margin-bottom:15px; } .about-copy p { font-size:14px; } .section-heading { display:block; margin-bottom:26px; } .section-heading>p { margin-top:14px; max-width:none; }
 .business-card-heading { min-height:112px; padding:23px; gap:18px; } .business-card-heading>svg { width:34px; height:34px; } .business-card-heading h3 { font-size:22px; } .business-category { font-size:12px; }
 .business-card-heading .mono-name { font-size:25px; } .mono-card .business-card-heading>p { font-size:13px; }
 .business-card .card-body { padding:24px 23px; } .business-card .card-body>p,.service-list .list-group-item { font-size:13px; } .service-list { margin-block:17px 24px; }
 .service-list .list-group-item { padding-block:12px; } .service-list .list-group-item:before { top:22px; } .inquiry-link { font-size:12px; padding-inline:13px; }
 .principles h3 { font-size:20px; } .principles p { font-size:13px; } .process { margin-top:29px; padding:22px; }
 .company-details>div { grid-template-columns:110px 1fr; } .company-details dt { font-size:12px; padding:18px 13px; } .company-details dd { font-size:12px; padding:18px 15px; } .company-intro { margin-top:17px; }
 .contact-intro { display:block; } .contact-copy { font-size:13px; margin-top:17px; } .contact-detail { margin-top:21px; padding-top:20px; border-top:1px solid #cad6e3; gap:6px; } .contact-detail a { font-size:22px; }
 .form-panel { padding:25px 21px; } .form-panel>h3 { font-size:20px; } .required-note { font-size:11px; margin-bottom:17px; } .inquiry-options { gap:10px 17px; padding-bottom:18px; margin-bottom:20px; }
 .form-check { font-size:12px; } .form-label { font-size:12px; } .form-control { padding:10px 11px; font-size:16px; } .form-actions { flex-direction:column; gap:10px; } .form-submit { min-width:0; }
 .form-notice { font-size:11px; } .copy-help { font-size:10px; } .privacy-details { font-size:11px; }
 .site-footer { padding-block:29px 22px; } .footer-top { gap:22px 20px; padding-bottom:24px; } .footer-nav { gap:13px 20px; } .footer-nav .nav-link { font-size:11px; }
 .footer-bottom { flex-direction:column; align-items:flex-start; gap:8px; } .footer-bottom small { font-size:9px; }
 html[lang=en] h1 { font-size:32px; line-height:1.25; } html[lang=ja] h1 { font-size:28px; line-height:1.65; } html[lang=en] h2,html[lang=ja] h2 { font-size:26px; } html[lang=ja] .about-copy h3 { font-size:20px; }
}
@media (max-width:365px) {
 .container { padding-inline:18px; } .header-inner { gap:10px; } .wordmark>strong { font-size:27px; } .languages .nav-link { padding-inline:6px; }
 .hero-copy-inner { padding-inline:21px; } .hero h1 { font-size:27px; } .hero-photo { height:190px; }
 .company-details>div { grid-template-columns:96px 1fr; } .company-details dt,.company-details dd { padding-inline:11px; font-size:11px; } .form-panel { padding:23px 17px; }
 html[lang=en] h1 { font-size:30px; } html[lang=ja] h1 { font-size:25px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }
@media print { .site-header,.quick-links,.form-actions,.back-top { display:none !important; } .section { padding-block:25px; } .hero { min-height:0; } .hero-copy-inner { padding-block:25px; } .business-card,.company-details>div,.form-panel { break-inside:avoid; } body { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }