/* Services page expression: image-led editorial service catalog. */

.services-page {
  background: var(--surface);
}

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

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

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

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

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

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

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

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

.services-section {
  padding-block: 82px;
}

.services-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;
}

.services-hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: #f4f6f7;
  color: var(--tank-blue);
}

.services-hero__grid {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  padding-block: calc(var(--header-height) + 68px) 52px;
}

.services-hero__copy {
  position: relative;
  width: min(100%, 520px);
}

.services-hero .services-kicker {
  color: var(--infra-blue);
}

.services-hero h1 {
  max-width: 11ch;
  margin: 0;
  padding-bottom: 5px;
  font-family: "Biennale", "Helvetica Neue", sans-serif;
  font-size: clamp(48px, 13vw, 68px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-wrap: balance;
}

.services-hero__copy > p:not(.services-kicker) {
  max-width: 39ch;
  margin: 22px 0 27px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.services-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--action-gap);
  min-width: min(100%, 242px);
  min-height: var(--action-min-h);
  padding: var(--action-pad-y) var(--action-pad-x);
  border: var(--action-border) solid var(--cyan);
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: var(--tank-blue-dark);
  font-size: var(--action-size);
  font-weight: var(--action-weight);
  line-height: 1.25;
  white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .15s ease;
}

.services-primary-action:hover {
  border-color: #fff;
  background: #fff;
}

.services-primary-action:active {
  transform: translateY(1px);
}

.services-primary-action > span:last-child {
  transition: transform .25s var(--ease);
}

.services-primary-action:hover > span:last-child {
  transform: translate(3px, -3px);
}

.services-hero__media {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  color: rgb(27 20 100 / .62);
  background:
    linear-gradient(135deg, transparent 49.8%, rgb(27 20 100 / .07) 49.9%, rgb(27 20 100 / .07) 50.1%, transparent 50.2%),
    linear-gradient(45deg, transparent 49.8%, rgb(27 20 100 / .07) 49.9%, rgb(27 20 100 / .07) 50.1%, transparent 50.2%),
    linear-gradient(145deg, #f8f9fa 0%, #e7eef1 48%, #c3d4dc 100%);
}

.services-hero__media::after {
  inset: 20px;
  border-color: rgb(27 20 100 / .10);
  border-radius: 0;
}



.services-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgb(247 249 250 / .98) 0%, rgb(247 249 250 / .66) 44%, rgb(247 249 250 / .08) 72%),
    linear-gradient(90deg, rgb(247 249 250 / .94) 0%, rgb(247 249 250 / .58) 54%, transparent 88%);
}

.services-section-heading {
  max-width: 790px;
  margin-bottom: 42px;
}

.services-section-heading h2,
.service-chapter h2,
.services-operation h2,
.services-contact h2,
.services-system h2 {
  margin: 0;
  color: var(--tank-blue);
  font-family: "Biennale", "Helvetica Neue", sans-serif;
  font-size: clamp(40px, 11.5vw, 58px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.services-section-heading > p {
  max-width: 56ch;
  margin: 22px 0 0;
  color: var(--muted);
}

.services-catalog__grid {
  display: grid;
  gap: 16px;
}

.service-catalog-item {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 410px;
  overflow: hidden;
  display: block;
  border-radius: var(--radius);
  background: #e5ecef;
  transition: transform .28s var(--ease);
}

.service-catalog-item:hover {
  transform: translateY(-4px);
}

.service-catalog-item > .media-placeholder {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, transparent 49.8%, rgb(27 20 100 / .08) 49.9%, rgb(27 20 100 / .08) 50.1%, transparent 50.2%),
    linear-gradient(45deg, transparent 49.8%, rgb(27 20 100 / .08) 49.9%, rgb(27 20 100 / .08) 50.1%, transparent 50.2%),
    linear-gradient(150deg, #f1f4f5 0%, #dce7eb 53%, #b7cbd6 100%);
  transition: transform .55s var(--ease);
}

.service-catalog-item > .media-placeholder::after {
  border-radius: var(--radius);
}

.service-catalog-item:hover > .media-placeholder {
  transform: scale(1.018);
}


.service-catalog-item__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgb(248 249 250 / .98) 0%, rgb(248 249 250 / .91) 31%, rgb(248 249 250 / .50) 50%, transparent 73%);
  pointer-events: none;
}

.service-catalog-item__copy {
  position: relative;
  z-index: 2;
  width: min(76%, 360px);
  padding: 30px 26px;
}

.service-catalog-item h3 {
  margin: 0;
  color: var(--tank-blue);
  font-size: 22px;
  line-height: 1.18;
}

.service-catalog-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.service-catalog-item__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--tank-blue);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.service-catalog-item__link > span:last-child {
  transition: transform .25s var(--ease);
}

.service-catalog-item:hover .service-catalog-item__link > span:last-child {
  transform: translateX(4px);
}

.services-system {
  padding-block: 88px;
  overflow: hidden;
  background: var(--soft-blue);
}

.services-system h2 {
  max-width: 10ch;
}

.service-chapter__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.service-chapter__visual {
  min-width: 0;
}

.service-chapter__visual > .media-placeholder {
  min-height: 0;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
}

.service-chapter__visual > .media-placeholder::after {
  border-radius: var(--radius);
}

.service-chapter__number {
  display: block;
  margin-bottom: 18px;
  color: var(--infra-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.service-chapter__copy > p {
  max-width: 48ch;
  margin: 23px 0 28px;
  color: var(--muted);
}

.service-chapter--pipeline {
  position: relative;
  min-height: 760px;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 20px;
  background: var(--soft-blue);
}

.service-chapter--pipeline__media {
  position: absolute;
  inset: 20px;
  min-height: 0;
  border: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, transparent 49.8%, rgb(27 20 100 / .08) 49.9%, rgb(27 20 100 / .08) 50.1%, transparent 50.2%),
    linear-gradient(45deg, transparent 49.8%, rgb(27 20 100 / .08) 49.9%, rgb(27 20 100 / .08) 50.1%, transparent 50.2%),
    linear-gradient(140deg, #aac2ce, #3e687f);
}

.service-chapter--pipeline__media::after {
  border-color: rgb(255 255 255 / .25);
  border-radius: var(--radius);
}

.service-chapter--pipeline__veil {
  position: absolute;
  inset: 20px;
  border-radius: var(--radius);
  background: linear-gradient(0deg, rgb(17 16 74 / .72), transparent 75%);
}

.service-chapter--pipeline__content {
  position: relative;
  z-index: 2;
  width: calc(100% - 8px);
  margin-inline: auto;
  padding: 34px 26px;
  border-radius: var(--radius);
  background: rgb(255 255 255 / .95);
}

.service-chapter--pipeline__content > p {
  max-width: 47ch;
  margin: 22px 0 28px;
  color: var(--muted);
}

.service-chapter--marine .service-chapter__visual > .media-placeholder {
  aspect-ratio: 4 / 5;
}

.services-operation {
  background: #f5f8fa;
}

.services-operation__grid {
  display: grid;
  gap: 48px;
}

.services-operation h2 {
  max-width: 11ch;
}

.services-operation__principles {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--tank-blue);
}

.services-operation__principles article {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.services-operation__principles h3 {
  margin: 0;
  color: var(--tank-blue);
  font-size: 21px;
  line-height: 1.2;
}

.services-operation__principles p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.services-contact {
  padding-block: 84px;
  background: var(--tank-blue);
  color: #fff;
}

.services-contact__grid {
  display: grid;
  gap: 32px;
  align-items: end;
}

.services-contact h2 {
  max-width: 10ch;
  color: #fff;
}

.services-contact p {
  max-width: 42ch;
  margin: 20px 0 0;
  color: rgb(255 255 255 / .72);
}

.services-primary-action--light {
  border-color: #fff;
  background: #fff;
  color: var(--tank-blue);
}

.services-primary-action--light:hover {
  border-color: var(--cyan);
  background: var(--cyan);
}

html[data-language="th"] .services-hero h1,
html[data-language="th"] .services-section-heading h2,
html[data-language="th"] .service-chapter h2,
html[data-language="th"] .services-system h2,
html[data-language="th"] .services-operation h2,
html[data-language="th"] .services-contact h2,
html[data-language="th"] .service-catalog-item h3,
html[data-language="th"] .services-operation__principles h3 {
  font-family: "DB Helvethaica X", "Noto Sans Thai", Tahoma, sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.015em;
}

html[data-language="th"] .services-hero h1 {
  max-width: 10ch;
  font-size: clamp(54px, 15vw, 74px);
  line-height: .98;
}

html[data-language="th"] .services-section-heading h2,
html[data-language="th"] .service-chapter h2,
html[data-language="th"] .services-system h2,
html[data-language="th"] .services-operation h2,
html[data-language="th"] .services-contact h2 {
  font-size: clamp(46px, 12vw, 62px);
  line-height: 1;
}

html[data-language="th"] .services-kicker {
  font-family: "DB Helvethaica X", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: var(--th-meta);
  font-weight: 700;
  letter-spacing: .08em;
}

html[data-language="th"] .services-primary-action {
  font-family: "TH Sarabun New", Tahoma, sans-serif;
  font-size: var(--th-action);
}

html[data-language="th"] .service-catalog-item h3,
html[data-language="th"] .services-operation__principles h3 {
  font-size: var(--th-title);
  line-height: 1;
}

html[data-language="th"] .service-catalog-item p,
html[data-language="th"] .services-operation__principles p,
html[data-language="th"] .services-operation__intro,
html[data-language="th"] .services-system__body {
  font-family: "TH Sarabun New", Tahoma, sans-serif;
  font-size: var(--th-body-sm);
}

@media (min-width: 768px) {
  .services-section {
    padding-block: 112px;
  }

  .services-hero__grid {
    align-items: center;
    padding-block: calc(var(--header-height) + 44px) 48px;
  }

  .services-hero h1 {
    max-width: 11ch;
    font-size: clamp(62px, 5.4vw, 84px);
  }

  .services-hero__media {
    max-height: none;
  }


  .services-hero__veil {
    background: linear-gradient(90deg, rgb(247 249 250 / .98) 0%, rgb(247 249 250 / .92) 30%, rgb(247 249 250 / .54) 50%, transparent 76%);
  }

  .services-section-heading {
    margin-bottom: 58px;
  }

  .services-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .service-catalog-item--storage,
  .service-catalog-item--pipeline,
  .service-catalog-item--marine {
    min-height: 440px;
  }

  .service-catalog-item--marine {
    grid-column: 1 / -1;
    min-height: 360px;
  }

  .service-catalog-item__copy {
    padding: 36px 32px;
  }

  .services-system {
    padding-block: 110px;
  }

  .service-chapter__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    gap: clamp(64px, 9vw, 132px);
  }

  .service-chapter__grid--reverse .service-chapter__visual {
    order: 2;
  }

  .service-chapter__grid--reverse .service-chapter__copy {
    order: 1;
  }

  .service-chapter--pipeline {
    min-height: 820px;
    padding: 34px;
    align-items: end;
  }

  .service-chapter--pipeline__media,
  .service-chapter--pipeline__veil {
    inset: 34px;
  }

  .service-chapter--pipeline__content {
    width: min(100% - 68px, 610px);
    margin: 0 auto 34px max(34px, calc((100vw - 1280px) / 2));
    padding: 46px;
  }

  .services-operation__grid {
    grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr);
    gap: clamp(70px, 10vw, 150px);
  }

  .services-operation__principles {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-operation__principles article {
    padding: 26px 28px;
    border-right: 1px solid var(--line);
  }

  .services-operation__principles article:nth-child(2n) {
    border-right: 0;
  }

  .services-operation__principles article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .services-operation__principles article:nth-child(n + 3) {
    border-bottom: 0;
  }

  .services-contact {
    padding-block: 110px;
  }

  .services-contact__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 80px;
  }

  html[data-language="th"] .services-hero h1 {
    max-width: 11ch;
    font-size: clamp(70px, 6.5vw, 96px);
  }

  html[data-language="th"] .services-section-heading h2,
  html[data-language="th"] .service-chapter h2,
  html[data-language="th"] .services-system h2,
  html[data-language="th"] .services-operation h2,
  html[data-language="th"] .services-contact h2 {
    font-size: clamp(58px, 6vw, 82px);
  }
}

@media (min-width: 1100px) {
  .services-section {
    padding-block: 138px;
  }

  .services-catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-catalog-item--storage,
  .service-catalog-item--pipeline,
  .service-catalog-item--marine {
    grid-column: auto;
    min-height: 520px;
  }

  .services-section-heading h2,
  .service-chapter h2,
  .services-operation h2,
  .services-contact h2,
  .services-system h2 {
    font-size: clamp(58px, 5.2vw, 78px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-catalog-item,
  .service-catalog-item > .media-placeholder,
  .service-catalog-item__link > span:last-child,
  .services-primary-action,
  .services-primary-action > span:last-child {
    transition: none;
  }
}

/* ---------------------------------------------- v6: content v2.1 blocks */

/* 5.3 Receive · Store · Dispatch: heading and body side by side, then
   three labelled points joined by a rule. */
.services-system__head { display: grid; gap: 22px; }
.services-system h2 { max-width: none; }
.services-system__body { max-width: 58ch; margin: 0; color: var(--muted); }

.services-system__flow {
  display: grid;
  grid-template-columns: 1fr;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
.services-system__point {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid rgb(27 20 100 / .18);
  background: rgb(255 255 255 / .7);
}
.services-system__num {
  grid-row: span 2;
  color: var(--infra-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.services-system__name {
  color: var(--tank-blue);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}
.services-system__value { color: var(--ink); font-size: 15px; line-height: 1.45; }
.services-system__link { display: flex; justify-content: flex-start; height: 24px; padding-left: 38px; }
.services-system__link i { width: 1px; height: 100%; background: var(--infra-blue); }

/* 5.4 chapters: the action sits under the body copy. */
.service-chapter__copy > .text-action,
.service-chapter--pipeline__content > .text-action { color: var(--infra-blue); }

/* 5.5 intro under the heading */
.services-operation__intro { max-width: 40ch; margin: 22px 0 0; color: var(--muted); }

@media (min-width: 768px) {
  .services-system__flow {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: stretch;
    margin-top: 58px;
  }
  .services-system__point { grid-template-columns: 1fr; padding: 24px 22px 26px; }
  .services-system__num { grid-row: auto; margin-bottom: 8px; }
  .services-system__link { align-items: center; justify-content: stretch; height: auto; padding: 0; }
  .services-system__link i { width: 100%; height: 1px; }
}

@media (min-width: 1100px) {
  .services-system__head { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 120px); align-items: end; }
  .services-system__name { font-size: 22px; }
}

html[data-language="th"] .services-system__name {
  font-family: "DB Helvethaica X", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: var(--th-title);
  font-weight: 700;
  line-height: 1.05;
}
html[data-language="th"] .services-system__value {
  font-family: "TH Sarabun New", Tahoma, sans-serif;
  font-size: var(--th-body-sm);
  line-height: 1.35;
}
html[data-language="th"] .service-catalog-item__link {
  font-family: "TH Sarabun New", Tahoma, sans-serif;
  font-size: var(--th-meta);
}

/* Thai heading measure (content v2.1). Thai headings are single long phrases
   that must fit their column, so the narrow Latin ch measures are dropped and
   the scale is set so the longest phrase in each heading fits. */
.services-operation__principles { grid-template-columns: minmax(0, 1fr); }
html[data-language="th"] .services-hero h1,
html[data-language="th"] .services-system h2,
html[data-language="th"] .services-operation h2,
html[data-language="th"] .services-contact h2 { max-width: none; }
html[data-language="th"] .services-hero h1 { font-size: clamp(46px, 13vw, 64px); line-height: 1.02; }
html[data-language="th"] .services-section-heading h2,
html[data-language="th"] .service-chapter h2,
html[data-language="th"] .services-system h2,
html[data-language="th"] .services-operation h2,
html[data-language="th"] .services-contact h2 { font-size: clamp(32px, 9vw, 44px); line-height: 1.06; }
/* one 38-character phrase: sized to the column on phones */
html[data-language="th"] .services-contact h2 { font-size: min(44px, calc((100vw - 40px) / 11.8)); }

@media (min-width: 768px) {
  .services-operation__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-language="th"] .services-hero h1 { font-size: clamp(64px, 6.4vw, 92px); }
  html[data-language="th"] .services-section-heading h2,
  html[data-language="th"] .service-chapter h2,
  html[data-language="th"] .services-system h2,
  html[data-language="th"] .services-operation h2,
  html[data-language="th"] .services-contact h2 { font-size: clamp(42px, 5vw, 60px); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  html[data-language="th"] .services-operation__grid,
  html[data-language="th"] .services-contact__grid { grid-template-columns: 1fr; gap: 40px; }
  html[data-language="th"] .services-contact__grid > a { justify-self: start; }
}
@media (min-width: 1100px) {
  html[data-language="th"] .services-section-heading h2,
  html[data-language="th"] .service-chapter h2,
  html[data-language="th"] .services-system h2,
  html[data-language="th"] .services-operation h2,
  html[data-language="th"] .services-contact h2 { font-size: clamp(50px, 4.2vw, 60px); }
}
@media (min-width: 1100px) {
  html[data-language="th"] .services-operation__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(56px, 7vw, 110px); }
}
html[data-language="th"] .services-operation__principles h3 { font-size: var(--th-title-sm); line-height: 1.08; }

/* Card copy over the photo: on phones the Thai body runs four lines, so the
   veil covers the full top half of the card and the copy uses the full width. */
@media (max-width: 1099px) {
  .service-catalog-item__veil { background: linear-gradient(180deg, rgb(248 249 250 / .98) 0%, rgb(248 249 250 / .93) 48%, rgb(248 249 250 / .45) 68%, transparent 86%); }
  .service-catalog-item__copy { width: 100%; }
}
html[data-language="th"] .services-hero__copy > p:not(.services-kicker) { max-width: none; }
@media (min-width: 1100px) {
  html[data-language="th"] .services-hero__copy { width: min(100%, 600px); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .services-hero__veil { background: linear-gradient(90deg, rgb(247 249 250 / .98) 0%, rgb(247 249 250 / .93) 46%, rgb(247 249 250 / .72) 64%, transparent 88%); }
}