/* KKhai site-wide styles. Page-specific styles live inside each template. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{background:#1C1B1A}
img{max-width:100%}
.nw{white-space:nowrap}
:focus-visible{outline:2px solid #F5A623;outline-offset:2px}

/* Desktop and mobile layouts: one is shown, depending on screen width */
.L-m{display:none}
@media (max-width:859px){.L-d{display:none}.L-m{display:block}}

/* Mobile menu (opens from the ☰ button) */
.kk-menu{position:fixed;inset:0;z-index:1000;overflow-y:auto;background:#1C1B1A;font-family:"Space Grotesk","IBM Plex Sans Thai",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.kk-menu[hidden]{display:none}
.kk-menu .scr{width:100%!important;height:auto!important;min-height:100%;border-radius:0!important}
html.kk-lock,html.kk-lock body{overflow:hidden}

/* About page photo slots: brand colour until a photo is set in site.config.json */
[data-photo]{background-size:cover;background-position:center}

/* Contact form */
form[data-kk-form] > [hidden]{display:none!important}
.kk-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden;opacity:0}
.kk-alert{background:#FBF6F2;border:1px solid #E8CFC2;border-radius:9px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kk-alert p{margin:0}
.kk-alert .kk-alert-title{color:#B2503A;font-size:16px;font-weight:500;line-height:1.35}
.kk-alert .kk-alert-body{color:#3A3833;font-size:15px;font-weight:300;line-height:1.55}
.kk-err{display:flex;gap:8px;align-items:flex-start;color:#B2503A;font-size:15px;font-weight:500;line-height:1.4;margin:0}
.kk-err::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:#B2503A;color:#FAFAF7;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.kk-bad input,.kk-bad select,input.kk-bad{border:2px solid #B2503A!important}
.kk-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:kk-spin .8s linear infinite;vertical-align:-3px}
@keyframes kk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kk-spin{animation:none}html{scroll-behavior:auto}}
form[aria-busy="true"] button[type="submit"]{cursor:progress;opacity:.85}
.kk-sent{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:8px 0}
.kk-sent img{height:96px;width:auto}
.kk-sent h2{margin:0;font-size:36px;line-height:1.1;font-weight:500;letter-spacing:-.03em;color:#1C1B1A}
.kk-sent p{margin:0;font-size:17px;line-height:1.55;font-weight:300;color:#3A3833;max-width:36ch}
html[lang="th"] .kk-sent h2{line-height:1.3;letter-spacing:0}
html[lang="th"] .kk-sent p,html[lang="th"] .kk-alert-body{line-height:1.75}
.kk-ghost{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:9px;border:1px solid #8C8272;background:transparent;color:#1C1B1A;font:500 16px "Space Grotesk","IBM Plex Sans Thai",system-ui,sans-serif;cursor:pointer}
.kk-ghost:hover{border-color:#1C1B1A}