/* ==========================================================================
   Contact page expression.

   Layout read from ref/contact.jpeg: an inset hero plate with the title set
   to one side, a centred row of small jump links, a wide image band with a
   white panel notched over its lower edge, centred section headings with a
   short rule under the title, and a repeated tinted label bar with the value
   set beneath it.

   Every surface value comes from the locked prototype layer, not from the
   reference:
     - radius 0 everywhere (var(--radius) family)
     - no shadow (var(--shadow))
     - structure from var(--hairline) rules in var(--line), whitespace
       and alignment
     - colour limited to the brand tokens; the reference green is not used
     - eyebrow ABOVE the headline, unlike the reference, matching the ESG page
   Actions are the shared .text-action geometry, never a page-local button.

   Written mobile-first: base rules are the 360-430px composition, then
   720px and 1024px.
   ========================================================================== */

.contact-page {
  --ct-space: 60px;
  --ct-gutter: 20px;
  --ct-rule: rgb(23 25 40 / .16);
  --ct-tint: #f4f7fa;
  background: var(--surface);
}


/* --------------------------------------------------------------------------
   Light header, following the Services pattern. The hero sits on a white
   page, so the shell flips to the colour logo and dark rules.
   -------------------------------------------------------------------------- */

.contact-page .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

.contact-page .site-header {
  color: var(--tank-blue);
  border-bottom-color: rgb(27 20 100 / .16);
}

.contact-page .brand { background-image: var(--pkg-logo-color); }

.contact-page .desktop-nav a::after { background: var(--tank-blue); }

.contact-page .header-contact { border-color: rgb(27 20 100 / .46); }

.contact-page .header-contact:hover { background: var(--tank-blue); color: #fff; }

.contact-page.menu-open .site-header { color: #fff; }

.contact-page.menu-open .brand { background-image: var(--pkg-logo-white); }


/* --------------------------------------------------------------------------
   Placeholder fields

   Flat tonal blocks, square corners, each carrying a small muted note
   describing the photograph a picture editor should source. The note is set
   in a corner so it stays clear of headlines and actions.
   -------------------------------------------------------------------------- */

.ct-ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #c3d2dd;
  color: rgb(23 25 40 / .62);
}

.ct-ph--fill { position: absolute; inset: 0; }

.ct-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .22) 0 2px, transparent 2px 13px);
}

.ct-ph__label {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 1;
  max-width: 28ch;
  padding: 13px 15px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}

.ct-ph--hero { background: linear-gradient(180deg, #6f8a9a 0%, #3d5a6d 60%, #24384a 100%); color: rgb(255 255 255 / .6); }
.ct-ph--band { background: linear-gradient(180deg, #7c94a4 0%, #3a5b70 100%); color: rgb(255 255 255 / .6); }

.ct-ph--map {
  display: block;
  aspect-ratio: 4 / 3;
  border: var(--hairline) solid var(--line);
  background: linear-gradient(160deg, #e3ebf2, #c6d5e0);
  color: rgb(23 25 40 / .66);
}

.ct-ph--map::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: var(--hairline) solid rgb(27 20 100 / .16);
  border-radius: var(--radius);
}

.ct-ph--map .ct-ph__label {
  position: relative;
  inset: auto;
  max-width: 40ch;
  padding: 30px 26px;
}


/* --------------------------------------------------------------------------
   Shared marks: eyebrow, centred heading with a short rule, lede
   -------------------------------------------------------------------------- */

.ct-eyebrow {
  margin: 0 0 16px;
  color: var(--infra-blue);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: 1.3;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
}

.ct-eyebrow--light { color: #87d8f7; }

.ct-heading { text-align: center; }

.ct-heading h2 {
  margin: 0;
  color: var(--tank-blue);
  font-family: "Biennale", "Helvetica Neue", sans-serif;
  font-size: clamp(32px, 8vw, 54px);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.ct-heading__rule {
  display: block;
  width: var(--label-rule);
  height: var(--hairline);
  margin: 22px auto 0;
  background: var(--infra-blue);
}

.ct-lede {
  max-width: 62ch;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.ct-section { padding-block: var(--ct-space); }
.ct-section--tint { background: var(--ct-tint); }

/* Smooth scrolling is set site wide, so jump targets need breathing room. */
#enquiries,
#contact-form,
#access { scroll-margin-top: 24px; }


/* --------------------------------------------------------------------------
   Hero

   The reference runs a placed plate, not a full bleed field: white margin
   above it and down both sides. page-shell supplies the side margin and the
   header clearance supplies the margin above.
   -------------------------------------------------------------------------- */

.ct-hero { padding-top: calc(var(--header-height) + 18px); }

.ct-hero__plate {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--tank-blue);
  color: #fff;
}

.ct-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(17 16 74 / .82) 0%, rgb(17 16 74 / .34) 56%, rgb(17 16 74 / .08) 100%);
}

.ct-hero__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 22px 30px;
}

.ct-hero h1 {
  max-width: 15ch;
  margin: 0;
  font-family: "Biennale", "Helvetica Neue", sans-serif;
  font-size: clamp(38px, 10.5vw, 62px);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   Contact form

   The form is a technical working surface, not a card: one ruled field grid,
   square controls, no shadow and no invented backend behaviour.
   -------------------------------------------------------------------------- */

.ct-form-section { background: var(--soft-blue); }
.ct-form-layout { display: grid; gap: 44px; }
.ct-form-layout > .ct-heading { text-align: left; }
.ct-form-layout > .ct-heading .ct-heading__rule { margin-left: 0; }
.ct-form-layout > .ct-heading .ct-lede { margin-left: 0; }
.ct-form { display: grid; gap: 22px; padding: 28px 20px; border-top: 4px solid var(--infra-blue); background: var(--surface); }
.ct-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.ct-field label { color: var(--tank-blue); font-size: 13px; font-weight: 800; line-height: 1.35; }
.ct-field input,
.ct-field select,
.ct-field textarea { width: 100%; min-height: 52px; padding: 13px 14px; border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }
.ct-field textarea { min-height: 150px; resize: vertical; }
.ct-field input:hover,
.ct-field select:hover,
.ct-field textarea:hover { border-color: var(--infra-blue); }
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus { border-color: var(--tank-blue); outline: 3px solid rgb(0 174 239 / .24); outline-offset: 0; }
.ct-field [aria-invalid="true"] { border-width: 2px; border-color: var(--tank-blue); }
.ct-field__hint,
.ct-field__error { min-height: 1.4em; color: var(--muted); font-size: 12px; line-height: 1.4; }
.ct-field__error:empty { display: none; }
.ct-field__error:not(:empty) { color: var(--tank-blue); font-weight: 800; }
.ct-consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.ct-consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--infra-blue); }
.ct-form__submit { display: grid; gap: 18px; align-items: center; }
.ct-form__submit .button-link { width: 100%; min-width: 0; cursor: pointer; }
.ct-form__submit .text-action { justify-self: start; color: var(--infra-blue); }
.ct-form__result { padding: 20px; border-left: 4px solid var(--cyan); background: var(--soft-blue); }
.ct-form__result[hidden] { display: none; }
.ct-form__result strong { color: var(--tank-blue); }
.ct-form__result p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }


/* --------------------------------------------------------------------------
   Enquiry routes

   Structured rows separated by hairlines, no cards. Each route states what it
   is for and the address to use; the address is a shared .text-action.
   -------------------------------------------------------------------------- */

.ct-routes {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--line);
}

.ct-route {
  padding-block: 26px;
  border-bottom: var(--hairline) solid var(--line);
}

.ct-route__index {
  margin: 0 0 10px;
  color: var(--infra-blue);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--eyebrow-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
}

.ct-route h3 {
  margin: 0;
  color: var(--tank-blue);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}

.ct-route__note {
  max-width: 54ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.ct-route__action { margin-top: 18px; }

.ct-route__action .text-action {
  color: var(--infra-blue);
  word-break: break-word;
}


/* Sub rows inside a value, and the access facts list. Same flat pattern. */

.ct-sub { display: grid; gap: 16px; margin: 0; }

.ct-sub--access { margin-top: 34px; border-top: var(--hairline) solid var(--line); padding-top: 26px; }

.ct-sub__row { display: grid; gap: 5px; }

.ct-sub dt {
  color: var(--muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ct-sub dd {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

/* Unverified values are held back by colour only. Weight is left alone so the
   site wide Thai body weight is never overridden. */
.ct-sub__pending { color: var(--muted); }

.ct-mail {
  color: var(--infra-blue);
  border-bottom: var(--hairline) solid currentColor;
  padding-bottom: 2px;
}

.ct-mail:hover { color: var(--tank-blue); }


/* --------------------------------------------------------------------------
   Access
   -------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------
   Content v2.1 additions: hero sub, channel contacts, form messages, location
   -------------------------------------------------------------------------- */

.ct-hero__sub {
  max-width: 46ch;
  margin: 18px 0 0;
  color: rgb(255 255 255 / .86);
  font-size: 16px;
  line-height: 1.55;
}

.ct-section--channels { padding-bottom: calc(var(--ct-space) * .6); }
.ct-section--channels .ct-routes { margin-top: 0; }

p.ct-route__action {
  margin: 14px 0 0;
  color: var(--infra-blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ct-consent-wrap { display: grid; gap: 8px; }
.ct-consent__text { color: var(--muted); font-size: 13px; line-height: 1.5; cursor: pointer; }
.ct-consent__text a { white-space: nowrap; color: var(--infra-blue); border-bottom: var(--hairline) solid currentColor; }
.ct-consent__text a:hover { color: var(--tank-blue); }
.ct-form__result p { margin: 0; color: var(--tank-blue); font-size: 15px; font-weight: 700; line-height: 1.5; }
.ct-form__result--error { border-left-color: var(--tank-blue); background: #fff; outline: var(--hairline) solid var(--line); }

.ct-location { display: grid; gap: 40px; margin-top: 40px; }
.ct-location__company { margin: 0 0 24px; color: var(--tank-blue); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.25; }
.ct-sub--location { grid-template-columns: 1fr; padding-top: 22px; border-top: var(--hairline) solid var(--line); }
.ct-sub--location dd { font-weight: 400; }
.ct-location__access { margin: 26px 0 0; padding: 18px 20px; border-left: 4px solid var(--cyan); background: var(--soft-blue); color: var(--ink); font-size: 15px; line-height: 1.55; }
.ct-location__map { margin: 0; }
.ct-map-embed { display:block; width:100%; height:clamp(260px,30vw,400px); border:0; background:var(--soft-blue); }
.ct-map-link { display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; margin-top:14px; color:var(--infra-blue); font-family:var(--type-action-family); font-size:var(--type-functional-action); font-weight:var(--type-action-weight); line-height:var(--type-action-leading); text-decoration:underline; text-underline-offset:4px; }
.ct-location .ct-ph--map { aspect-ratio: 1400 / 692; }
.ct-location__map figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }

@media (min-width: 720px) {
  .ct-hero__sub { font-size: 18px; }
  .ct-section--channels .ct-route { grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); }
  p.ct-route__action { margin-top: 4px; }
  .ct-location .ct-sub--location { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  .ct-location { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 96px); align-items: start; margin-top: 62px; }
}

html[data-language="th"] .ct-hero__sub { font-size: var(--th-lead); line-height: 1.45; }
html[data-language="th"] .ct-route__action { color: var(--infra-blue); }
html[data-language="th"] .ct-form__result p { font-family: "TH Sarabun New", "Noto Sans Thai", Tahoma, sans-serif; font-size: var(--th-body-sm); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Thai

   Every tracked label resets letter-spacing and text-transform, and every
   size comes from the Thai scale tokens. No raw px value is set here.
   Thai body weight stays at the site wide bold.
   -------------------------------------------------------------------------- */

html[data-language="th"] .ct-eyebrow,
html[data-language="th"] .ct-route__index,
html[data-language="th"] .ct-sub dt {
  font-family: "TH Sarabun New", "Noto Sans Thai", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

html[data-language="th"] .ct-eyebrow { font-size: var(--eyebrow-size-th); }
html[data-language="th"] .ct-route__index { font-size: var(--th-micro); }
html[data-language="th"] .ct-sub dt { font-size: var(--th-note); }

html[data-language="th"] .ct-hero h1,
html[data-language="th"] .ct-heading h2 {
  font-family: "DB Helvethaica X", "Noto Sans Thai", Tahoma, sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.04;
}

html[data-language="th"] .ct-hero h1 { font-size: var(--th-h1); max-width: none; }
/* Keep the company name together; the authored wbr allows a break after ติดต่อ. */
.ct-hero__brand { display: inline-block; white-space: nowrap; }
html[data-language="th"] .ct-heading h2 { font-size: var(--th-h2-sm); }

html[data-language="th"] .ct-route h3 {
  font-family: "DB Helvethaica X", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: var(--th-title-sm);
  font-style: normal;
  line-height: 1.2;
}

html[data-language="th"] .ct-lede,
html[data-language="th"] .ct-hero__sub,
html[data-language="th"] .ct-route__action,
html[data-language="th"] .ct-location__access,
html[data-language="th"] .ct-sub dd {
  font-family: "TH Sarabun New", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: var(--th-body);
  line-height: var(--th-lh);
}

html[data-language="th"] .ct-route__note,
html[data-language="th"] .ct-location__map figcaption {
  font-family: "TH Sarabun New", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: var(--th-body-sm);
  line-height: var(--th-lh);
}

html[data-language="th"] .ct-field__error,
html[data-language="th"] .ct-consent__text {
  font-family: "TH Sarabun New", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: var(--th-meta);
  line-height: 1.45;
}

html[data-language="th"] .ct-field label,
html[data-language="th"] .ct-location__company { font-family: "DB Helvethaica X", sans-serif; font-size: var(--th-title-sm); line-height: 1.15; }
html[data-language="th"] .ct-field input,
html[data-language="th"] .ct-field select,
html[data-language="th"] .ct-field textarea { font-size: var(--th-body); }



/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {
  .contact-page { --ct-space: 88px; }

  .ct-hero { padding-top: calc(var(--header-height) + 26px); }
  .ct-hero__plate { min-height: 480px; }
  .ct-hero__copy { padding: 0 40px 44px; }




  .ct-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px; }
  .ct-field--full { grid-column: 1 / -1; }
  .ct-form__submit { grid-template-columns: auto 1fr; }
  .ct-form__submit .button-link { width: auto; min-width: 220px; }

  .ct-lede { font-size: 17px; }

  /* Route: copy left, address right, on one baseline. */
  .ct-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
    align-items: start;
    gap: 32px;
    padding-block: 32px;
  }
  .ct-route__action { margin-top: 4px; justify-self: end; }


  .ct-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }

  .ct-ph--map { aspect-ratio: 16 / 7; }

}


/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .contact-page { --ct-space: 120px; }

  .ct-hero { padding-top: calc(var(--header-height) + 34px); }
  .ct-hero__plate { min-height: 560px; }
  .ct-hero__copy { padding: 0 64px 62px; }
  .ct-hero h1 { font-size: clamp(56px, 5.4vw, 82px); }
  .ct-eyebrow { margin-bottom: 22px; }


  .ct-form-layout { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(64px, 8vw, 124px); align-items: start; }
  .ct-form-layout > .ct-heading { position: sticky; top: 32px; }
  .ct-form { padding: 48px; }

  .ct-heading h2 { font-size: clamp(44px, 4vw, 60px); }

  .ct-routes { margin-top: 62px; }
  .ct-route { grid-template-columns: minmax(0, 1fr) minmax(280px, auto); gap: 48px; padding-block: 38px; }

  /* The route number moves out into its own hanging column. */
  .ct-route__copy { position: relative; padding-left: 64px; }
  .ct-route__index { position: absolute; inset: 5px auto auto 0; margin: 0; }
  .ct-route h3 { font-size: 22px; }
  .ct-route__action { margin-top: 3px; }


  .ct-ph--map { aspect-ratio: 21 / 8; }

}


@media (prefers-reduced-motion: reduce) {
  .ct-route__action .text-action { transition: none; }
}