/* Contact Us — Figma 229:17983 (1440 × 2211) */

/* ---- banner hero: the Figma banner has its text baked into the image.
   ≥900px: show the image as designed, real text kept for screen readers/SEO.
   <900px: image becomes a cropped background (right side, no baked text) and the real text is shown. ---- */
.banner-hero { position: relative; background: #1a0820; color: #fff; isolation: isolate; overflow: hidden; }
.banner-hero__img { width: 100%; height: auto; aspect-ratio: 1440 / 638; object-fit: cover; }
.banner-hero__text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.banner-hero__eyebrow { font: 500 15px/1.3 var(--font-th); text-transform: uppercase; margin: 0 0 8px; }
.banner-hero__title { font: 700 clamp(30px, 8vw, 44px)/1.05 var(--font-en); text-transform: uppercase; }
.banner-hero__title > span { display: block; }
.banner-hero__lead { font: 300 16px/1.5 var(--font-th); margin: 14px 0 0; max-width: 34em; }
@media (max-width: 899px) {
  .banner-hero { min-height: 100vw; display: flex; align-items: flex-end; }
  .banner-hero__img { position: absolute; inset: 0; z-index: -2; height: 100%; aspect-ratio: auto; object-position: 100% 50%; }
  .banner-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,6,26,.05) 0%, rgba(20,6,26,.55) 40%, rgba(20,6,26,.93) 100%); }
  .banner-hero__text { position: relative !important; width: 100%; height: auto; overflow: visible; clip: auto; white-space: normal; padding-top: 56px; padding-bottom: 36px; }
}

/* ---- layout ---- */
.ct-main { padding: 43px 0 49px; }
.ct-main > .container { max-width: calc(1296px + 2 * var(--gutter)); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 723fr) minmax(0, 547fr); gap: 32px; align-items: start; }

/* ---- form ---- */
.ct-kicker { font: 700 15px/1.4 var(--font-th); color: var(--red-dark); margin: 0; }
.ct-title { font: 700 clamp(28px, 3.15vw, 45px)/1.25 var(--font-en); margin: 2px 0 22px; }
.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.ct-field { display: flex; flex-direction: column; min-width: 0; }
.ct-field--full { grid-column: 1 / -1; }
.ct-field label { font: 600 15px/1.4 var(--font-th); color: var(--ink); margin-bottom: 3px; }
.ct-req { color: var(--red); }
.ct-field input, .ct-field textarea {
  width: 100%; min-height: 47px; padding: 10px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--bg); color: #000; font: 300 16px/1.45 var(--font-th); -webkit-appearance: none; appearance: none;
}
.ct-field textarea { height: 240px; resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--muted); font-size: 15px; opacity: 1; }
.ct-field input:focus, .ct-field textarea:focus { outline: 2px solid var(--purple); outline-offset: 0; border-color: var(--purple); }
.ct-field [aria-invalid="true"] { border-color: var(--red); background: #fff6f6; }
.ct-err { font: 400 14px/1.4 var(--font-th); color: var(--red-dark); margin: 5px 0 0; }
.ct-submit {
  grid-column: 1 / -1; min-height: 48px; margin: 5px 0 0; border: 0; border-radius: 0; cursor: pointer;
  background: var(--red); color: #fff; font: 600 15px/1.4 var(--font-th); transition: filter .15s;
}
.ct-submit:hover { filter: brightness(1.1); }
.ct-submit[disabled] { opacity: .7; cursor: progress; }
.ct-status { grid-column: 1 / -1; padding: 14px 16px; border-left: 4px solid #1f8a4c; background: #eef8f1; font: 400 16px/1.55 var(--font-th); color: #12391f; }
.ct-status.is-error { border-left-color: var(--red); background: #fff1f1; color: #5b0b0b; }
.ct-status a { color: inherit; font-weight: 600; }
.ct-status:focus { outline: none; }

/* ---- contact information panel ---- */
.ct-info { background: #000; color: #fff; padding: 24px 18px 17px; }
.ct-info__title { font: 700 clamp(26px, 2.45vw, 35px)/1.25 var(--font-en); padding: 0 32px; }
.ct-rule { width: 50px; height: 3px; background: var(--red); border: 0; margin: 10px 32px 24px; }
.ct-list { list-style: none; margin: 0; padding: 0 32px; display: flex; flex-direction: column; gap: 25px; }
.ct-list li { display: flex; align-items: flex-start; gap: 22px; min-height: 70px; }
.ct-ring { flex: none; width: 70px; height: 70px; border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center; }
.ct-ring img { width: 55px; height: 55px; object-fit: contain; }
.ct-ring--line img { width: 51px; height: 51px; }
.ct-list div { min-width: 0; padding-top: 4px; }
.ct-list h3 { font: 700 20px/1.3 var(--font-th); }
.ct-list a, .ct-list p { font: 400 clamp(17px, 1.4vw, 20px)/1.45 var(--font-th); color: #fff; text-decoration: none; overflow-wrap: anywhere; margin: 0; }
.ct-list a:hover { text-decoration: underline; }
.ct-map { position: relative; display: block; margin-top: 40px; }
.ct-map img { width: 100%; aspect-ratio: 510 / 376; object-fit: cover; }
.ct-map__cta { position: absolute; right: 10px; bottom: 10px; background: rgba(18,18,18,.85); color: #fff; font: 500 14px/1 var(--font-th); padding: 9px 12px; }
.ct-map:hover .ct-map__cta { background: var(--red); }

@media (max-width: 1000px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-info { max-width: 620px; }
}
@media (max-width: 600px) {
  .ct-main { padding-top: 36px; }
  .ct-form { grid-template-columns: 1fr; gap: 16px; }
  .ct-info { padding: 24px 0 16px; }
  .ct-info__title, .ct-list { padding: 0 18px; }
  .ct-rule { margin-left: 18px; }
  .ct-map { margin: 32px 16px 0; }
  .ct-list li { gap: 16px; }
  .ct-ring { width: 58px; height: 58px; }
  .ct-ring img { width: 44px; height: 44px; }
  .ct-ring--line img { width: 42px; height: 42px; }
}
.ct-nowrap { white-space: nowrap; }
.ct-status, .ct-err { word-break: keep-all; overflow-wrap: break-word; }

/* ---- English page (html[lang="en"]): the banner's baked lead text is Thai, so the real text is shown at every
   width. <900px already uses the phone treatment above; >=900px the image stays full-bleed and a solid left-hand
   panel (fading out to the right) hides the baked text behind the real headline. Thai pages are unaffected. ---- */
@media (min-width: 900px) {
  html[lang="en"] .banner-hero { display: flex; align-items: center; min-height: clamp(440px, 44.3vw, 720px); }
  html[lang="en"] .banner-hero__img { position: absolute; inset: 0; z-index: -2; height: 100%; aspect-ratio: auto; object-position: 100% 50%; }
  html[lang="en"] .banner-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(26,8,32) 0%, rgb(26,8,32) 54%, rgba(26,8,32,.85) 61%, rgba(26,8,32,0) 78%); }
  html[lang="en"] .banner-hero__text { position: relative !important; width: 100%; height: auto; overflow: visible; clip: auto; white-space: normal; padding-top: 72px; padding-bottom: 72px; }
  html[lang="en"] .banner-hero__text > * { max-width: min(600px, 52vw); }
  html[lang="en"] .banner-hero__text > .banner-hero__title { max-width: 780px; }
  html[lang="en"] .banner-hero__eyebrow { font-size: 16px; margin-bottom: 14px; }
  html[lang="en"] .banner-hero__title { font-size: clamp(38px, 4vw, 58px); }
  html[lang="en"] .banner-hero__lead { font-size: clamp(17px, 1.4vw, 20px); margin-top: 20px; }
}