/* About Us page.
   Visual language derived from ref/About-us.jpg: a light corporate page with soft
   shapes. Rounded image blocks and cards, pill buttons, headings carrying a short
   coloured rule, a dark photo hero with a dark credential bar overlapping it,
   alternating image / text blocks, a coloured panel pair, a dotted item list and a
   closing grid of overlaid image tiles. Everything is namespaced ab- and owned by this file.
   Mobile first: base rules describe the 360-430px composition. */

.ab-page {
  --ab-radius: var(--radius);
  --ab-radius-sm: var(--radius);
  --ab-veil: rgb(17 16 74 / .78);
}

/* ---------------------------------------------------------------- primitives */

.ab-kicker {
  margin: 0 0 14px;
  color: var(--infra-blue);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  line-height: 1.2;
  text-transform: uppercase;
}
.ab-kicker--light { color: #87d8f7; }

.ab-section h2,
.ab-band h2 {
  margin: 0;
  color: var(--tank-blue);
  font-family: "Biennale", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(31px, 8.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ab-rule {
  display: block;
  width: min(100%, 220px);
  height: 2px;
  margin: 15px 0 24px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--infra-blue), var(--cyan));
}

.ab-lede {
  max-width: 56ch;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}
.ab-lede--center { margin-inline: auto; text-align: left; }

.ab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--action-pad-y) var(--action-pad-x);
  border: var(--action-border) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--action-size);
  font-weight: var(--action-weight);
  line-height: 1.2;
  text-align: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  min-height: var(--action-min-h);
}
.ab-pill--ghost { border-color: rgb(255 255 255 / .7); color: #fff; }
.ab-pill--ghost:hover,
.ab-pill--ghost:focus-visible { background: #fff; color: var(--tank-blue); border-color: #fff; }
.ab-pill--solid { background: var(--infra-blue); color: #fff; }
.ab-pill--solid:hover,
.ab-pill--solid:focus-visible { background: var(--tank-blue); }
.ab-pill--small { padding: 9px 18px; font-size: 12px; }

/* ------------------------------------------------------------- placeholders */

.ab-ph {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ab-radius);
  background: linear-gradient(150deg, var(--placeholder), var(--placeholder-deep));
}
.ab-ph--fill { position: absolute; inset: 0; border-radius: 0; }
.ab-ph--dark { background: linear-gradient(150deg, #2b3f6b, #10123c); }

/* --------------------------------------------------------------------- hero */

.ab-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 560px;
  overflow: hidden;
  background: var(--tank-blue-dark);
  color: #fff;
}
.ab-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgb(17 16 74 / .92), rgb(17 16 74 / .3) 62%, rgb(17 16 74 / .55)),
    linear-gradient(90deg, rgb(17 16 74 / .6), transparent 78%);
}
.ab-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-height) + 98px) 74px;
}
.ab-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-family: "Biennale", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(38px, 11.5vw, 56px);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ab-hero__line {
  max-width: 34ch;
  margin: 20px 0 26px;
  color: rgb(255 255 255 / .8);
  font-size: 16px;
  line-height: 1.55;
}

/* --------------------------------------------------------- credential bar */

.ab-creds { position: relative; z-index: 3; margin-top: -30px; }
.ab-creds__bar {
  display: grid;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--ab-radius);
  background: var(--tank-blue-dark);
  color: #fff;
  box-shadow: var(--shadow);
}
.ab-cred {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 15px 20px;
  border-bottom: 1px solid rgb(255 255 255 / .13);
}
.ab-cred:last-child { border-bottom: 0; }
.ab-cred__num {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.ab-cred__text {
  color: rgb(255 255 255 / .9);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- sections */

.ab-section { padding-block: var(--section-space); }
.ab-band { padding-block: var(--section-space); background: var(--soft-blue); }
.ab-band--plain { background: #f5f8fa; }

/* 3. About: image block, then copy. */
.ab-split { display: grid; gap: 30px; }
.ab-split__media .ab-ph { aspect-ratio: 4 / 3; }
.ab-split__copy p {
  max-width: 54ch;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}
.ab-split__copy .ab-pill { margin-top: 10px; }

/* 4. Coloured panel pair. */
.ab-panels { display: grid; gap: 16px; margin-top: 6px; }
.ab-panel {
  padding: 26px 24px 28px;
  border-radius: var(--ab-radius);
  color: #fff;
}
.ab-panel--one { background: linear-gradient(145deg, var(--tank-blue), var(--infra-blue)); }
.ab-panel--two { background: linear-gradient(145deg, var(--infra-blue), var(--tank-blue-dark)); }
.ab-panel h3 {
  margin: 0 0 12px;
  font-family: "Biennale", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.ab-panel p { margin: 0; color: rgb(255 255 255 / .84); font-size: 15px; line-height: 1.6; }

/* 5. Commitment. */
.ab-commit { display: grid; gap: 34px; }
.ab-commit__copy p {
  max-width: 56ch;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}
.ab-commit__media { display: grid; gap: 16px; }
.ab-ph--commit { aspect-ratio: 16 / 10; }

/* 6. Company information rows. */
.ab-info { margin: 0; border-top: 1px solid var(--line); }
.ab-info__row {
  display: grid;
  gap: 5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.ab-info__row dt {
  color: var(--infra-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ab-info__row dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.ab-info__pending { color: var(--muted); font-weight: 400; }

/* 7. Closing tile grid. */
.ab-tiles__head { margin-bottom: 26px; }
.ab-tiles { display: grid; gap: 16px; }
.ab-tile {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 250px;
  overflow: hidden;
  border-radius: var(--ab-radius);
  color: #fff;
}
.ab-tile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--ab-veil), rgb(17 16 74 / .22) 72%);
}
.ab-tile__copy { position: relative; z-index: 2; padding: 22px; }
.ab-tile h3 {
  margin: 0 0 16px;
  font-family: "Biennale", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -.015em;
}
/* ------------------------------------------------------------------ tablet */

@media (min-width: 720px) {
  .ab-hero { min-height: 640px; }
  .ab-hero__inner { padding-block: calc(var(--header-height) + 108px) 96px; }
  .ab-hero h1 { font-size: clamp(50px, 6.4vw, 68px); }
  .ab-hero__line { font-size: 18px; }

  /* Four cells become a 2 x 2 field: vertical rule between the pair,
     horizontal rule between the rows. */
  .ab-creds { margin-top: -46px; }
  .ab-creds__bar { grid-template-columns: 1fr 1fr; padding: 6px 4px; }
  .ab-cred { padding: 20px 26px; border-bottom: 0; }
  .ab-cred:nth-child(odd) { border-right: 1px solid rgb(255 255 255 / .16); }
  .ab-cred:nth-child(-n+2) { border-bottom: 1px solid rgb(255 255 255 / .16); }

  .ab-panels { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ab-panel { padding: 32px 30px 34px; }
  .ab-panel h3 { font-size: 28px; }

  .ab-commit__media { grid-template-columns: 1fr 1fr; }
  .ab-ph--commit { aspect-ratio: 4 / 3; }

  .ab-info__row {
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
    gap: 24px;
    align-items: baseline;
    padding: 18px 0;
  }

  .ab-tiles__head { max-width: 620px; margin-inline: auto; margin-bottom: 40px; text-align: center; }
  .ab-rule--center { margin-inline: auto; }
  .ab-lede--center { text-align: center; }
  .ab-tiles { grid-template-columns: 1fr 1fr; }
  .ab-tile { min-height: 300px; }

}

/* ----------------------------------------------------------------- desktop */

@media (min-width: 1024px) {
  .ab-section h2,
  .ab-band h2 { font-size: clamp(42px, 3.9vw, 56px); }

  .ab-hero { min-height: 720px; }
  .ab-hero__inner { padding-block: calc(var(--header-height) + 120px) 140px; }
  .ab-hero h1 { max-width: 15ch; font-size: clamp(66px, 5.6vw, 88px); }
  .ab-hero__line { max-width: 44ch; font-size: 19px; }

  /* Ref composition: one dark bar across the shell, four cells, thin vertical rules. */
  .ab-creds { margin-top: -58px; }
  .ab-creds__bar { grid-template-columns: repeat(4, 1fr); padding: 8px 4px; }
  .ab-cred {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px 30px;
    border-bottom: 0;
  }
  .ab-cred:nth-child(-n+2) { border-bottom: 0; }
  .ab-cred:nth-child(odd) { border-right: 0; }
  .ab-cred:not(:last-child) { border-right: 1px solid rgb(255 255 255 / .16); }
  .ab-cred__text { font-size: 15px; }

  .ab-rule { width: min(100%, 300px); margin-bottom: 30px; }

  .ab-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 92px); align-items: center; }
  .ab-split__media .ab-ph { aspect-ratio: 5 / 4; }
  .ab-split__copy p { font-size: 17px; }

  .ab-commit { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(48px, 6vw, 92px); align-items: start; }
  .ab-commit__copy p { font-size: 17px; }
  .ab-commit__media { grid-template-columns: 1fr; gap: 20px; }
  .ab-ph--commit { aspect-ratio: 16 / 10; }

  .ab-tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ab-tile { min-height: 360px; }
  .ab-tile h3 { font-size: 24px; }
  .ab-tile__copy { padding: 26px; }
}

/* ------------------------------------------- v6: 2.4 / 2.5 new components */

/* 2.4 Vision panel: one statement, set large. Mission panel: numbered list. */
.ab-panel h3 { margin-bottom: 18px; }
/* Biennale has no apostrophe or slash glyph, and the EN vision (company
   wording, not to be edited) contains both. */
.ab-panel .ab-panel__statement {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 22px;
  line-height: 1.3;
  color: #fff;
}
.ab-mission { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ab-mission li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid rgb(255 255 255 / .2);
}
.ab-mission li:last-child { padding-bottom: 0; }
.ab-mission__num { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; }

/* 2.5 Approach: four items, title over body, cyan dot. */
.ab-approach { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ab-approach li {
  position: relative;
  padding: 18px 0 18px 22px;
  border-bottom: 1px solid var(--line);
}
.ab-approach li::before {
  content: "";
  position: absolute;
  inset: 1.6em auto auto 0;
  width: 7px;
  height: 7px;
  background: var(--cyan);
}
.ab-approach__title {
  margin: 0 0 6px;
  color: var(--tank-blue);
  font-size: 17px;
  line-height: 1.3;
}
.ab-approach__title:empty { display: none; }
.ab-commit__copy .ab-approach p { margin: 0; font-size: 15px; }

@media (min-width: 720px) {
  .ab-panels { align-items: stretch; }
  .ab-panel .ab-panel__statement { font-size: 26px; }
}
@media (min-width: 1024px) {
  .ab-panels { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ab-panel { padding: 40px 40px 42px; }
  .ab-panel .ab-panel__statement { font-size: 30px; }
  .ab-commit__copy .ab-approach p { font-size: 16px; }
  .ab-info__row { grid-template-columns: minmax(0, .32fr) minmax(0, .68fr); }
}

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

html[data-language="th"] .ab-hero h1,
html[data-language="th"] .ab-section h2,
html[data-language="th"] .ab-band h2,
html[data-language="th"] .ab-panel h3,
html[data-language="th"] .ab-tile h3,
html[data-language="th"] .ab-approach__title,
html[data-language="th"] .ab-panel__statement {
  font-family: "DB Helvethaica X", Tahoma, sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.06;
}
/* The Thai H1 is a long two-phrase line; it needs a wider measure than EN. */
html[data-language="th"] .ab-hero h1 { max-width: none; font-size: clamp(40px, 11vw, 56px); line-height: 1.08; }
html[data-language="th"] .ab-section h2,
html[data-language="th"] .ab-band h2 { font-size: clamp(36px, 9.4vw, 48px); }
html[data-language="th"] .ab-panel h3 { font-size: var(--th-title); }
html[data-language="th"] .ab-tile h3 { font-size: var(--th-title-sm); }
html[data-language="th"] .ab-approach__title { font-size: var(--th-lead); line-height: 1.15; }
html[data-language="th"] .ab-panel .ab-panel__statement { font-size: clamp(28px, 7.4vw, 34px); line-height: 1.22; font-weight: 400; }

/* Small Latin labels carry wide tracking. Thai must not inherit it. */
html[data-language="th"] .ab-kicker,
html[data-language="th"] .ab-info__row dt {
  font-family: "TH Sarabun New", Tahoma, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
html[data-language="th"] .ab-kicker { font-size: var(--eyebrow-size-th); line-height: 1.35; }
html[data-language="th"] .ab-info__row dt { font-size: var(--th-body-sm); line-height: 1.4; }

html[data-language="th"] .ab-hero__line,
html[data-language="th"] .ab-split__copy p,
html[data-language="th"] .ab-commit__copy p,
html[data-language="th"] .ab-panel p,
html[data-language="th"] .ab-lede,
html[data-language="th"] .ab-info__row dd,
html[data-language="th"] .ab-cred__text,
html[data-language="th"] .ab-pill {
  font-family: "TH Sarabun New", Tahoma, sans-serif;
  font-size: var(--th-action);
  line-height: 1.45;
}
html[data-language="th"] .ab-split__copy p,
html[data-language="th"] .ab-commit__copy > p,
html[data-language="th"] .ab-lede { font-size: var(--th-body); }
html[data-language="th"] .ab-commit__copy .ab-approach p,
html[data-language="th"] .ab-mission p { font-size: var(--th-body-sm); line-height: 1.4; }
html[data-language="th"] .ab-approach li::before { inset: 1.3em auto auto 0; }
html[data-language="th"] .ab-cred__text { font-size: var(--th-body-sm); line-height: 1.35; }
html[data-language="th"] .ab-pill { font-size: var(--th-body-sm); line-height: 1.2; }
html[data-language="th"] .ab-pill--small { font-size: var(--th-meta); }
@media (min-width: 1024px) {
  html[data-language="th"] .ab-hero h1 { font-size: clamp(56px, 5vw, 76px); }
  html[data-language="th"] .ab-section h2,
  html[data-language="th"] .ab-band h2 { font-size: clamp(44px, 3.9vw, 56px); }
  html[data-language="th"] .ab-panel .ab-panel__statement { font-size: 38px; }
}