:root{--cream:#f5f1e8;--olive:#4d5945;--sage:#a8b09b;--ink:#292929;--line:rgba(41,41,41,.15);--paper:#fbfaf6}*{box-sizing:border-box}body{margin:0;background:var(--sage);color:var(--ink);font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.topbar{height:30px;background:var(--olive);color:#fff;display:grid;place-items:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}.contact-hero{min-height:calc(100vh - 108px);display:grid;align-items:center;background:linear-gradient(90deg,var(--olive) 0 50%,var(--sage) 50% 100%);padding:72px 0}.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(55px,9vw,125px);align-items:center}.contact-intro{color:var(--cream);padding-right:24px}.eyebrow,.card-label{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}.eyebrow{color:#c9d0bf}.contact-intro h1{font:600 clamp(4rem,8vw,7.6rem)/.88 Manrope;letter-spacing:-.07em;margin:18px 0 28px}.contact-intro p{max-width:430px;margin:0;color:rgba(255,255,255,.68);font-size:1rem;line-height:1.7}.contact-card{background:var(--cream);color:var(--ink);padding:clamp(38px,6vw,68px);position:relative;overflow:hidden;box-shadow:0 28px 70px rgba(41,41,41,.15)}.contact-card:after{content:"";position:absolute;width:235px;height:235px;border:1px solid rgba(77,89,69,.18);border-radius:50%;right:-70px;top:-78px}.line-mark{display:inline-grid;place-items:center;background:#06c755;color:#fff;width:58px;height:34px;border-radius:5px;font-weight:700;letter-spacing:.08em;font-size:.72rem;position:relative;z-index:1}.card-label{display:block;color:var(--olive);margin-top:30px}.contact-card h2{font:600 clamp(2.7rem,5vw,4.5rem)/1 Manrope;letter-spacing:-.055em;margin:10px 0 20px;position:relative;z-index:1}.contact-card p{color:#66645d;line-height:1.7;font-size:1rem;margin:0 0 34px;max-width:430px}.contact-card a{display:inline-flex;align-items:center;gap:18px;background:var(--olive);color:#fff;padding:16px 22px;border-radius:100px;font-weight:600;transition:transform .25s ease,background .25s ease}.contact-card a:hover{transform:translateY(-2px);background:#3f4939}.contact-card a i{font-style:normal}.contact-card small{display:block;color:#77746d;margin-top:22px;line-height:1.5}footer{padding:24px 0;background:var(--cream);border-top:1px solid var(--line);font-size:.78rem;color:#737069}footer .wrap{display:flex;justify-content:space-between}@media(max-width:800px){.wrap{width:min(100% - 28px,1180px)}.contact-hero{background:var(--olive);padding:58px 0 68px}.contact-grid{grid-template-columns:1fr;gap:32px}.contact-intro{padding-right:0}.contact-card{padding:38px 28px}.contact-intro h1{font-size:clamp(3.8rem,17vw,6rem)}}@media(max-width:520px){footer .wrap{gap:18px}}
:root{--header-surface:rgba(245,241,232,.96)}header{height:78px;border-bottom:1px solid var(--line);background:var(--header-surface);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.logo{font:700 1.08rem Manrope;letter-spacing:.17em}.logo small{display:block;font:500 .5rem "DM Sans";letter-spacing:.42em}.contact-stage{position:relative;padding:22px;border:1px solid rgba(77,89,69,.28);isolation:isolate}.contact-stage:before,.contact-stage:after{content:"";position:absolute;border:1px solid rgba(77,89,69,.22);border-radius:50%;pointer-events:none;z-index:-1}.contact-stage:before{width:210px;height:210px;right:-52px;top:-58px}.contact-stage:after{width:125px;height:125px;left:-38px;bottom:-42px}.contact-card{position:relative;z-index:1}.contact-card:after{display:none}@media(max-width:800px){.contact-stage{padding:14px}.contact-stage:before{right:-18px}.contact-stage:after{left:-14px}}

html[lang="th"] .contact-intro h1{font-size:clamp(3rem,6.4vw,6.2rem);line-height:1.08;margin:12px 0 14px;letter-spacing:-.025em}
html[lang="th"] .contact-intro .eyebrow{display:block}
html[lang="th"] .contact-card h2{left:-3px;line-height:1;letter-spacing:-.055em;margin:10px 0 20px}
html[lang="th"] .contact-card p{line-height:1.7}
html[lang="th"] .contact-card a{line-height:1.25}
html[lang="th"] .contact-card small{line-height:1.5}
@media(max-width:800px){html[lang="th"] .contact-intro h1{font-size:clamp(2.7rem,12vw,5.4rem)}html[lang="th"] .contact-grid{gap:30px}}
html[lang="th"] .contact-card .card-label{line-height:1rem}
html[lang="th"] .contact-card a{line-height:1.3125}

@media (max-width: 800px) {
  .contact-hero {
    align-items: start;
    background: var(--sage);
    overflow-x: clip;
    min-height: 0;
    padding: 0 0 52px;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-block: 0;
  }

  .contact-card h2 {
    font-size: clamp(1.9rem, 11vw, 2.7rem);
  }

  .contact-intro {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding-block: 48px 28px;
  }

  .contact-intro::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--site-gutter, 16px));
    z-index: -1;
    background: var(--olive);
    border-bottom: 1px solid rgba(245, 241, 232, .35);
  }
}