:root {
--sf-navy: #0b1f3b;
--sf-blue: #132b79;
--sf-sky: #02a9de;
--sf-sky-soft: #eaf8fd;
--sf-orange: #ff7900;
--sf-ink: #15253b;
--sf-muted: #5f6f82;
--sf-line: #dce5ed;
--sf-bg: #f5f8fb;
--sf-white: #fff;
--sf-success: #14805e;
--sf-shadow: 0 20px 50px rgba(11, 31, 59, .12);
--sf-radius: 22px;
--sf-container: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
margin: 0;
color: var(--sf-ink);
background: var(--sf-white);
font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
font-size: 17px;
line-height: 1.75;
text-rendering: optimizeLegibility;
}
body.admin-bar .site-header { top: 32px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--sf-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sf-sky); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .65em; color: var(--sf-navy); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; }
h1 { font-size: clamp(2.35rem, 6vw, 4.75rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.48rem); }
p { margin: 0 0 1.15em; }
ul, ol { padding-inline-start: 1.35em; }
::selection { color: var(--sf-white); background: var(--sf-blue); }
.container { width: min(calc(100% - 40px), var(--sf-container)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 820px); margin-inline: auto; }
.section { padding: clamp(68px, 9vw, 112px) 0; }
.section--soft { background: var(--sf-bg); }
.section--navy { color: #dbe8f5; background: var(--sf-navy); }
.section--navy h2, .section--navy h3 { color: var(--sf-white); }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; color: var(--sf-sky); font-size: .82rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow::before { width: 28px; height: 3px; border-radius: 2px; background: var(--sf-orange); content: ""; }
.lead { color: var(--sf-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.8; }
.section-heading { max-width: 760px; margin-bottom: 38px; }
.section-heading p { color: var(--sf-muted); font-size: 1.08rem; }
.center { margin-inline: auto; text-align: center; }
.center .eyebrow { justify-content: center; }
.center .eyebrow::before { display: none; }
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack > * + * { margin-top: 22px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus, .skip-link:focus { z-index: 100000; top: 10px; left: 10px; width: auto; height: auto; padding: 12px 18px; clip: auto; color: var(--sf-white); background: var(--sf-navy); }
.button, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 12px 22px;
border: 2px solid var(--sf-blue);
border-radius: 999px;
color: var(--sf-white);
background: var(--sf-blue);
box-shadow: 0 10px 25px rgba(19, 43, 121, .2);
font-weight: 800;
line-height: 1.2;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover, .button:focus-visible { color: var(--sf-white); background: var(--sf-sky); border-color: var(--sf-sky); box-shadow: 0 14px 30px rgba(2, 169, 222, .28); transform: translateY(-2px); }
.button--orange { background: var(--sf-orange); border-color: var(--sf-orange); box-shadow: 0 10px 25px rgba(255, 121, 0, .24); }
.button--ghost { color: var(--sf-navy); background: transparent; box-shadow: none; }
.button--ghost:hover { color: var(--sf-white); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.topbar { color: #dfeaf7; background: var(--sf-navy); font-size: .86rem; }
.topbar__inner { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 20px; }
.topbar a { color: var(--sf-white); text-decoration: none; }
.topbar__links { display: flex; align-items: center; gap: 20px; }
.site-header { position: sticky; z-index: 1000; top: 0; border-bottom: 1px solid rgba(11,31,59,.08); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.site-header > .container { width: min(calc(100% - 40px), 1320px); }
.header-inner { position: relative; display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 22px; }
.site-branding { display: flex; max-width: 170px; flex: 0 0 150px; align-items: center; overflow: hidden; }
.custom-logo-link, .brand-link { display: block; max-width: 150px; line-height: 0; text-decoration: none; }
.site-header .custom-logo-link img.custom-logo, .site-header .brand-logo { display: block; width: auto !important; max-width: 150px !important; height: 58px !important; max-height: 58px !important; object-fit: contain; }
.primary-nav { margin-left: auto; }
.primary-nav > ul { display: flex; align-items: center; gap: 3px; padding: 0; margin: 0; list-style: none; }
.primary-nav li { position: relative; margin: 0; list-style: none; }
.primary-nav a { display: block; padding: 10px 10px; border-radius: 10px; color: var(--sf-navy); font-size: .9rem; font-weight: 700; line-height: 1.45; text-decoration: none; white-space: nowrap; word-break: keep-all; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color: var(--sf-blue); background: var(--sf-sky-soft); }
.primary-nav .menu-item-has-children > a { padding-right: 25px; }
.primary-nav .menu-item-has-children > a::after { position: absolute; top: 50%; right: 9px; content: "▾"; font-size: .68rem; transform: translateY(-50%); }
.primary-nav .sub-menu {
position: absolute;
z-index: 1100;
top: calc(100% + 8px);
left: 0;
display: block;
width: 260px;
padding: 10px;
margin: 0;
border: 1px solid var(--sf-line);
border-radius: 14px;
visibility: hidden;
opacity: 0;
background: var(--sf-white);
box-shadow: var(--sf-shadow);
list-style: none;
transform: translateY(-8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.primary-nav .sub-menu::before { position: absolute; top: -10px; right: 0; left: 0; height: 10px; content: ""; }
.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.primary-nav .sub-menu a { padding: 10px 12px; border-radius: 8px; font-size: .88rem; white-space: normal; }
.primary-nav .sub-menu .sub-menu { top: 0; left: calc(100% + 8px); }
.header-cta { white-space: nowrap; }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 10px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-white); }
.nav-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--sf-navy); transition: transform .2s ease; }
.hero { position: relative; min-height: min(760px, calc(100vh - 116px)); display: grid; align-items: center; overflow: hidden; color: var(--sf-white); background: var(--sf-navy); }
.hero::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(7,25,48,.97) 0%, rgba(7,25,48,.92) 42%, rgba(7,25,48,.64) 70%, rgba(7,25,48,.3) 100%); content: ""; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__content { position: relative; z-index: 2; max-width: 900px; padding: 100px 0; }
.hero h1 { max-width: 880px; color: var(--sf-white); font-size: clamp(2.6rem, 4.5vw, 4.5rem); line-height: 1.18; word-break: keep-all; text-shadow: 0 3px 22px rgba(0,0,0,.28); }
.hero h1 span { color: #55d5ff; }
.hero .lead { max-width: 720px; color: #f2f7fb; font-weight: 500; text-shadow: 0 2px 12px rgba(0,0,0,.38); }
.hero__proof { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 0; margin: 28px 0; list-style: none; font-size: .95rem; font-weight: 700; }
.hero__proof li::before { margin-right: 8px; color: #55d5ff; content: "✓"; }
.hero-card { padding: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--sf-radius); background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.trust-bar { position: relative; z-index: 3; margin-top: -38px; }
.trust-bar__inner { display: grid; grid-template-columns: repeat(4, 1fr); padding: 28px; border-radius: var(--sf-radius); background: var(--sf-white); box-shadow: var(--sf-shadow); }
.trust-item { padding: 4px 24px; border-right: 1px solid var(--sf-line); }
.trust-item:last-child { border: 0; }
.trust-item strong { display: block; color: var(--sf-navy); font-size: 1.1rem; }
.trust-item span { color: var(--sf-muted); font-size: .9rem; }
.card { overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-white); box-shadow: 0 10px 30px rgba(11,31,59,.06); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { box-shadow: var(--sf-shadow); transform: translateY(-5px); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf-sky-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .card__media img { transform: scale(1.035); }
.card__body { padding: 25px; }
.card__body p { color: var(--sf-muted); }
.card__link { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; text-decoration: none; }
.service-icon { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 18px; border-radius: 15px; color: var(--sf-blue); background: var(--sf-sky-soft); font-size: 1.5rem; }
.tag { display: inline-flex; padding: 5px 10px; border-radius: 99px; color: var(--sf-blue); background: var(--sf-sky-soft); font-size: .78rem; font-weight: 800; }
.split { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(36px, 7vw, 88px); }
.split__media { position: relative; }
.split__media > img { width: 100%; aspect-ratio: 4/3; border-radius: 28px; object-fit: cover; box-shadow: var(--sf-shadow); }
.floating-note { position: absolute; right: -18px; bottom: 28px; max-width: 230px; padding: 18px; border-radius: 16px; color: var(--sf-white); background: var(--sf-blue); box-shadow: var(--sf-shadow); font-weight: 700; }
.check-list { padding: 0; margin: 25px 0; list-style: none; }
.check-list li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.check-list li::before { position: absolute; top: 4px; left: 0; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--sf-white); background: var(--sf-success); content: "✓"; font-size: .8rem; font-weight: 900; }
.process { counter-reset: step; }
.process-item { position: relative; padding: 28px; border-top: 3px solid var(--sf-sky); border-radius: 0 0 var(--sf-radius) var(--sf-radius); color: var(--sf-ink); background: var(--sf-white); box-shadow: 0 12px 30px rgba(11,31,59,.08); counter-increment: step; }
.process-item::before { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 18px; border-radius: 50%; color: var(--sf-white); background: var(--sf-blue); content: counter(step, decimal-leading-zero); font-weight: 900; }
.process-item h3, .section--navy .process-item h3 { color: var(--sf-navy); }
.process-item p, .section--navy .process-item p { color: var(--sf-muted); }
.faq-list { display: grid; gap: 14px; }
.faq-list details { border: 1px solid var(--sf-line); border-radius: 16px; background: var(--sf-white); }
.faq-list summary { padding: 20px 54px 20px 22px; color: var(--sf-navy); font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { float: right; margin-right: -32px; color: var(--sf-sky); content: "+"; font-size: 1.4rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-answer { padding: 0 22px 20px; color: var(--sf-muted); }
.page-hero { padding: clamp(72px, 10vw, 128px) 0; color: var(--sf-white); background: linear-gradient(135deg, var(--sf-navy), var(--sf-blue)); }
.page-hero h1 { max-width: 920px; color: var(--sf-white); font-size: clamp(2.2rem, 5vw, 4.2rem); }
.page-hero .lead { max-width: 780px; color: #dbe8f5; }
.breadcrumbs { margin-bottom: 22px; color: #b8cbe0; font-size: .86rem; }
.breadcrumbs a { color: var(--sf-white); }
.content-area { padding: 70px 0 100px; }
.entry-content { width: min(calc(100% - 40px), var(--sf-container)); margin-right: auto; margin-left: auto; }
.entry-content > * { max-width: 920px; margin-right: auto; margin-left: 0; }
.entry-content > .alignwide { width: 100%; max-width: var(--sf-container); }
.entry-content > .alignfull { width: 100%; max-width: none; }
.entry-content img { border-radius: 16px; }
.entry-content blockquote { padding: 20px 24px; border-left: 4px solid var(--sf-sky); border-radius: 0 12px 12px 0; background: var(--sf-sky-soft); }
.entry-meta { margin-bottom: 26px; color: var(--sf-muted); font-size: .9rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.post-card__meta { color: var(--sf-muted); font-size: .82rem; }
.pagination { margin-top: 42px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: grid; min-width: 42px; height: 42px; place-items: center; border: 1px solid var(--sf-line); border-radius: 10px; text-decoration: none; }
.pagination .current { color: var(--sf-white); background: var(--sf-blue); border-color: var(--sf-blue); }
.cta-band { padding: 42px; border-radius: 28px; color: var(--sf-white); background: linear-gradient(115deg, var(--sf-blue), #075e9b); box-shadow: var(--sf-shadow); }
.cta-band h2 { color: var(--sf-white); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.cta-band__copy { max-width: 720px; }
.site-footer { color: #c9d8e7; background: #07192f; }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 60px; padding: 70px 0 50px; }
.footer-logo { width: 200px; margin-bottom: 20px; }
.site-footer h2, .site-footer h3 { color: var(--sf-white); font-size: 1.1rem; }
.site-footer a { color: #dceafa; text-decoration: none; }
.site-footer a:hover { color: #55d5ff; }
.site-footer ul { padding: 0; margin: 0; list-style: none; }
.site-footer li { margin-bottom: 9px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.contact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-box { padding: 22px; border: 1px solid var(--sf-line); border-radius: 16px; background: var(--sf-white); }
.contact-box strong { display: block; color: var(--sf-navy); }
.about-principles { position: relative; overflow: hidden; }
.about-principles::before, .about-principles::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
.about-principles::before { top: -180px; right: -150px; width: 420px; height: 420px; border: 70px solid rgba(2,169,222,.055); }
.about-principles::after { bottom: -210px; left: -170px; width: 390px; height: 390px; border: 64px solid rgba(255,121,0,.045); }
.about-principles .container { position: relative; z-index: 1; }
.about-principles .section-heading { margin-bottom: 46px; }
.about-principles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-principle { position: relative; min-height: 285px; padding: 30px; overflow: hidden; border: 1px solid var(--sf-line); border-radius: 22px; background: var(--sf-white); box-shadow: 0 16px 38px rgba(11,31,59,.08); transition: transform .22s ease, box-shadow .22s ease; }
.about-principle::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: var(--principle-accent, var(--sf-sky)); content: ""; }
.about-principle::after { position: absolute; right: -46px; bottom: -55px; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--principle-accent, var(--sf-sky)) 9%, transparent); content: ""; }
.about-principle:hover { box-shadow: 0 24px 55px rgba(11,31,59,.14); transform: translateY(-6px); }
.about-principle--orange { --principle-accent: var(--sf-orange); }
.about-principle--sky { --principle-accent: var(--sf-sky); }
.about-principle--navy { --principle-accent: var(--sf-blue); }
.about-principle__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.about-principle__icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 17px; color: var(--sf-white); background: var(--principle-accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--principle-accent) 28%, transparent); font-size: 1.65rem; font-weight: 900; }
.about-principle__number { color: #d8e2eb; font-size: 2.25rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.about-principle h3 { margin-bottom: 12px; font-size: 1.35rem; }
.about-principle p { max-width: 330px; color: var(--sf-muted); }
.about-principle__label { position: absolute; z-index: 1; bottom: 24px; left: 30px; color: var(--principle-accent); font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.search-form { display: flex; gap: 8px; max-width: 600px; }
.search-field, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select {
width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #cdd9e4; border-radius: 10px; color: var(--sf-ink); background: var(--sf-white);
}
textarea { min-height: 140px; }
:focus-visible { outline: 3px solid rgba(2,169,222,.38); outline-offset: 2px; }
.woocommerce .products ul, .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; padding: 20px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-white); }
.woocommerce div.product { padding: 60px 0; }
@media (max-width: 1020px) {
.header-cta { display: none; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.trust-bar__inner { grid-template-columns: repeat(2, 1fr); }
.trust-item:nth-child(2) { border-right: 0; }
.trust-item:nth-child(-n+2) { padding-bottom: 18px; border-bottom: 1px solid var(--sf-line); }
.trust-item:nth-child(n+3) { padding-top: 18px; }
.post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
body.admin-bar .site-header { top: 46px; }
.topbar__inner > span { display: none; }
.topbar__inner { justify-content: center; }
.nav-toggle { display: block; }
.primary-nav { position: absolute; top: 100%; right: 20px; left: 20px; display: none; padding: 14px; border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-white); box-shadow: var(--sf-shadow); }
.primary-nav.is-open { display: block; }
.primary-nav > ul { align-items: stretch; flex-direction: column; }
.primary-nav a { padding: 12px 14px; }
.primary-nav .menu-item-has-children > a { padding-right: 34px; }
.primary-nav .sub-menu, .primary-nav .sub-menu .sub-menu { position: static; width: auto; padding: 3px 0 4px 14px; border: 0; visibility: visible; opacity: 1; background: transparent; box-shadow: none; transform: none; }
.primary-nav .sub-menu::before { display: none; }
.primary-nav .sub-menu a { padding: 9px 12px; color: var(--sf-muted); }
.split, .grid--3 { grid-template-columns: 1fr; }
.split__media { order: -1; }
.floating-note { right: 12px; }
.footer-main { grid-template-columns: 1fr 1fr; }
.about-principles__grid { grid-template-columns: 1fr; }
.about-principle { min-height: 245px; }
.footer-main > :first-child { grid-column: 1 / -1; }
.cta-band__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
.container, .narrow { width: min(calc(100% - 28px), var(--sf-container)); }
.entry-content { width: min(calc(100% - 28px), var(--sf-container)); }
.topbar__links { gap: 12px; }
.topbar__links a:first-child { display: none; }
.site-branding { max-width: 132px; flex-basis: 132px; }
.site-header .custom-logo-link img.custom-logo, .site-header .brand-logo { max-width: 132px !important; height: 48px !important; max-height: 48px !important; }
.header-inner { min-height: 68px; }
.hero { min-height: auto; }
.hero::before { background: linear-gradient(90deg, rgba(7,25,48,.94), rgba(7,25,48,.65)); }
.hero__content { padding: 78px 0 100px; }
.hero h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); word-break: normal; }
.hero h1 span { white-space: normal; }
.trust-bar { margin-top: -28px; }
.trust-bar__inner { grid-template-columns: 1fr; padding: 15px 22px; }
.trust-item { padding: 15px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--sf-line); }
.trust-item:last-child { border-bottom: 0; }
.grid--2, .grid--4, .post-grid, .contact-strip { grid-template-columns: 1fr; }
.section { padding: 60px 0; }
.page-hero { padding: 64px 0; }
.footer-main { grid-template-columns: 1fr; gap: 34px; }
.footer-main > :first-child { grid-column: auto; }
.footer-bottom { align-items: flex-start; flex-direction: column; }
.cta-band { padding: 28px 22px; }
.button-row .button { width: 100%; }
.woocommerce .products ul, .woocommerce ul.products { grid-template-columns: 1fr; }
.about-principle { min-height: 265px; padding: 26px 22px; }
.about-principle__label { left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}