/* Theme stylesheet — emitted by the CCMS convert step (Phase P). */
:root {
  --white: #ffffff;
  --dark: #414141;
  --black: #000000;
  --muted: #999997;
  --overlay: rgba(0,0,0,0.8);
  --sans: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;
  --site-width: 980px;
}

.site{font-family:var(--sans);color:var(--dark);background:var(--white);margin:0;}
.site-header{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,0.6);}
.header-inner{max-width:var(--site-width);margin:0 auto;display:flex;align-items:center;gap:32px;padding:14px 20px;}
.logo-link{display:inline-flex;}
.logo-icon{display:block;width:39px;height:40px;object-fit:cover;}
.main-nav{flex:1;display:flex;justify-content:center;}
.nav-list{list-style:none;display:flex;gap:20px;margin:0;padding:0;}
.nav-item a{color:var(--black);text-decoration:none;font-size:16px;transition:color .4s ease;}
.nav-item a:hover{color:#80b720;}
.page{max-width:var(--site-width);margin:0 auto;padding:0 20px;}
.section-title{font-size:40px;font-weight:700;letter-spacing:0.05em;color:var(--black);margin:48px 0 8px;}
.title-rule{height:3px;width:240px;background:var(--black);margin-bottom:24px;}
.hero{display:flex;justify-content:center;padding:60px 0;}
.hero-logo{max-width:374px;height:auto;}
.welcome{position:relative;background:rgba(255,255,255,0.8);padding:24px 0 48px;}
.welcome-body{max-width:820px;}
.welcome-text{font-size:15px;line-height:1.6em;color:var(--dark);white-space:pre-line;margin:0 0 24px;}
.welcome-claim{font-size:20px;font-weight:700;color:var(--dark);margin:0;}
.welcome-logo{display:block;width:192px;height:auto;margin:24px 0 0 auto;}
.projects{padding:24px 0 48px;}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.project-card{position:relative;overflow:hidden;aspect-ratio:314/209;cursor:pointer;}
.project-image{width:100%;height:100%;object-fit:cover;display:block;}
.project-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay);opacity:0;transition:opacity .3s ease;}
.project-card:hover .project-overlay{opacity:1;}
.project-name{color:var(--white);font-size:22px;letter-spacing:0.15em;text-align:center;margin:0;}
.team{padding:24px 0 48px;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.team-card{position:relative;overflow:hidden;aspect-ratio:280/365;}
.team-image{width:100%;height:100%;object-fit:cover;display:block;}
.team-overlay{position:absolute;left:0;right:0;bottom:0;background:#80b720;color:var(--white);padding:16px 28px 22px;transform:translateY(70%);transition:transform .3s ease;}
.team-card:hover .team-overlay{transform:translateY(0);}
.team-role{font-size:15px;margin:0 0 4px;}
.team-name{font-size:23px;margin:0 0 12px;}
.team-mail-btn{display:inline-flex;color:var(--white);}
.team-mail-icon{display:inline-block;width:40px;height:40px;}
.team-mail-icon svg{width:40px;height:40px;fill:var(--white);}
.contact{position:relative;background:rgba(255,255,255,0.8);padding:29px 38px 52px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.contact-col{min-width:0;}
.contact-lines{font-size:20px;line-height:1.3em;color:var(--black);font-weight:400;letter-spacing:0.05em;white-space:pre-line;margin:0;}
.contact-address{grid-column:1 / -1;font-size:20px;color:var(--black);letter-spacing:0.05em;white-space:pre-line;margin:0;}
.beforeafter{padding:24px 0 48px;}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.ba-slider{width:100%;aspect-ratio:340/476;overflow:hidden;}
.ba-frame{width:100%;height:100%;border:0;}
.site-footer{background:var(--white);border-top:1px solid #e8e6e6;margin-top:40px;}
.footer-inner{max-width:var(--site-width);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:23px 20px 28px;align-items:start;}
.footer-col{text-align:center;}
.footer-logo{width:169px;height:86px;object-fit:cover;}
.footer-text{font-size:15px;line-height:1.3em;color:var(--black);font-weight:400;letter-spacing:0.05em;white-space:pre-line;margin:0 0 12px;}
.footer-text a{color:var(--black);text-decoration:none;}