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

/* --- 4.1 Hero and trestle diagram ---------------------------------------- */
.mt-hero {
  min-height: 100dvh;
  padding: calc(var(--header-height) + 46px) 0 46px;
  background: var(--tank-blue-dark);
  color: var(--surface);
}

.mt-hero__grid { display: grid; gap: 42px; }
.mt-hero__copy { align-self: center; }
.mt-eyebrow, .mt-label { margin: 0 0 18px; color: var(--cyan); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-track); text-transform: uppercase; }
.mt-hero h1 { max-width: 780px; margin: 0; font-family: "Biennale", "Helvetica Neue", sans-serif; font-size: clamp(42px, 11vw, 80px); line-height: .98; letter-spacing: -.035em; }
.mt-hero__lead { max-width: 590px; margin: 24px 0 0; color: var(--placeholder); font-size: 18px; line-height: 1.55; }
.mt-hero__actions { display: grid; gap: 12px; margin-top: 30px; }
.mt-hero__actions .button-link { width: 100%; min-width: 0; }
.mt-button-ghost-light { border-color: var(--placeholder-deep); color: var(--surface); }
.mt-button-ghost-light:hover { border-color: var(--surface); background: var(--surface); color: var(--tank-blue-dark); }

/* The diagram reads left (shore) to right (sea): shore label, a cyan trestle
   line with its distance, then the two jetties stacked on the right. */
.mt-hero__axis { position: relative; min-height: 360px; margin: 0; overflow: hidden; border: var(--hairline) solid var(--placeholder-deep); background: var(--tank-blue); }
.mt-hero__axis::after { content: ""; position: absolute; z-index: 1; inset: 0; background: rgb(6 11 67 / .42); }
.mt-hero__axis > img,
.mt-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.mt-hero__axis > img { object-position: 50% center; }
.mt-axis { position: absolute; z-index: 2; inset: 0; }
.mt-axis__shore, .mt-axis__distance, .mt-axis__berth { position: absolute; font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.mt-axis__shore { inset: 22px auto auto 20px; max-width: 40%; padding: 8px 10px; background: rgb(6 11 67 / .72); }
.mt-axis__line { position: absolute; inset: 78px auto auto 30px; width: 58%; height: 2px; background: var(--cyan); transform: rotate(18deg); transform-origin: left; }
.mt-axis__distance { inset: 150px auto auto 20px; max-width: calc(100% - min(46%, 220px) - 56px); padding: 6px 10px; background: rgb(6 11 67 / .72); color: var(--cyan); }
.mt-axis__berth { right: 18px; width: min(46%, 220px); padding: 10px 12px; border: var(--hairline) solid var(--cyan); background: rgb(6 11 67 / .72); text-align: left; }
.mt-axis__berth--one { top: 140px; }
.mt-axis__berth--two { top: 200px; }

/* --- 4.2 Figures ---------------------------------------------------------- */
.mt-facts { padding: 54px 0; border-bottom: var(--hairline) solid var(--line); }
.mt-facts__grid { display: grid; gap: 30px; }
.mt-fact { min-width: 0; padding-top: 18px; border-top: var(--hairline) solid var(--line); }
/* The embedded Biennale face is a demo cut without the digit 4, so figures use the sans face. */
.mt-fact__value { margin: 0; color: var(--tank-blue); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(34px, 10vw, 50px); font-weight: 800; letter-spacing: -.02em; line-height: 1; overflow-wrap: anywhere; }
.mt-fact__value span { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .36em; font-weight: 800; white-space: nowrap; }
.mt-fact__label { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* --- Shared section rhythm ---------------------------------------------- */
.mt-intro, .mt-berths, .mt-route { padding-block: var(--section-space); }
.mt-intro h2, .mt-berths h2, .mt-route h2, .mt-operations h2, .mt-cta h2 { margin: 0; font-family: "Biennale", "Helvetica Neue", sans-serif; font-size: clamp(36px, 9.5vw, 68px); line-height: 1; letter-spacing: -.025em; }

/* --- 4.3 Intro ------------------------------------------------------------ */
.mt-intro__grid { display: grid; gap: 32px; }
.mt-intro__copy { padding-top: 4px; border-top: var(--hairline) solid var(--line); }
.mt-intro__copy p { max-width: 640px; margin: 20px 0 0; }

/* --- 4.4 Comparison table ------------------------------------------------- */
.mt-berths { background: var(--soft-blue); }
.mt-berths h2 { max-width: 860px; color: var(--tank-blue); }
.mt-berths__layout { display: grid; gap: 32px; margin-top: 46px; }
.mt-label { display: flex; gap: 13px; align-items: center; }
.mt-label__rule { width: var(--label-rule); height: var(--hairline); background: currentColor; }
.mt-placeholder { position: relative; min-height: 260px; overflow: hidden; border: var(--hairline) solid var(--placeholder-deep); background: var(--placeholder); }
.mt-placeholder--specs img { object-position: center; }

.mt-compare { width: 100%; border-collapse: collapse; background: var(--surface); table-layout: fixed; }
.mt-compare th, .mt-compare td { padding: 16px 14px; border-bottom: var(--hairline) solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.mt-compare thead th { padding-block: 20px; border-top: 5px solid var(--infra-blue); color: var(--tank-blue); font-family: "Biennale", "Helvetica Neue", sans-serif; font-size: 24px; line-height: 1.1; }
.mt-compare thead th + th { border-top-color: var(--tank-blue); }
.mt-compare__corner { border-top: 5px solid var(--line); }
.mt-compare tbody th { color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.4; }
.mt-compare tbody td { color: var(--tank-blue); font-size: 17px; font-weight: 800; line-height: 1.35; }

/* Phone: each row becomes a block, label on top, the two jetties side by side
   with their names taken from the column headers (data-label). */
@media (max-width: 719px) {
  .mt-compare, .mt-compare tbody, .mt-compare tr { display: block; }
  .mt-compare thead { display: none; }
  .mt-compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--hairline) solid var(--line); }
  .mt-compare tbody tr:first-child { border-top: 5px solid var(--infra-blue); }
  .mt-compare tbody th { grid-column: 1 / -1; padding: 16px 16px 4px; border-bottom: 0; }
  .mt-compare tbody td { display: block; padding: 8px 16px 16px; border-bottom: 0; }
  .mt-compare tbody td + td { border-left: var(--hairline) solid var(--line); }
  .mt-compare tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--infra-blue); font-size: 12px; font-weight: 800; line-height: 1.3; }
}

/* --- 4.5 Jetty care -------------------------------------------------------- */
.mt-operations { padding-block: var(--section-space); background: var(--tank-blue); color: var(--surface); }
.mt-label--light { color: var(--cyan); }
.mt-operations h2 { max-width: 900px; }
.mt-operations__sequence { display: grid; gap: 0; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: operations; }
.mt-operations__sequence li { position: relative; min-width: 0; padding: 24px 0 24px 50px; border-top: var(--hairline) solid var(--placeholder-deep); counter-increment: operations; }
.mt-operations__sequence li::before { content: counter(operations, decimal-leading-zero); position: absolute; left: 0; top: 26px; color: var(--cyan); font-size: 12px; font-weight: 800; }
.mt-operations__sequence h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.mt-operations__sequence p { margin: 10px 0 0; color: var(--placeholder); font-size: 15px; line-height: 1.55; }
.mt-placeholder--operations { min-height: 320px; margin-top: 46px; border-color: var(--placeholder-deep); background: var(--tank-blue-dark); }
.mt-placeholder--operations img { object-position: 54% center; }

/* --- 4.6 One route ---------------------------------------------------------- */
.mt-route { overflow: hidden; }
.mt-route h2 { max-width: 780px; color: var(--tank-blue); }
.mt-route__lead { max-width: 700px; margin: 24px 0 0; }
.mt-route__links { display: grid; margin-top: 50px; border-top: var(--hairline) solid var(--line); }
.mt-route__links a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; border-bottom: var(--hairline) solid var(--line); color: var(--tank-blue); }
.mt-route__links a:hover { color: var(--infra-blue); }
.mt-route__links strong { font-family: "Biennale", "Helvetica Neue", sans-serif; font-size: 28px; line-height: 1.15; }
.mt-route__links a > span { color: var(--infra-blue); font-size: 22px; }

/* --- 4.7 Enquiry ------------------------------------------------------------ */
.mt-cta { padding-block: 80px; background: var(--tank-blue-dark); color: var(--surface); }
.mt-cta__grid { display: grid; gap: 44px; }
.mt-cta h2 { font-size: clamp(36px, 9vw, 62px); }
.mt-cta p { max-width: 620px; margin: 20px 0 30px; color: var(--placeholder); }
.mt-cta .button-link { width: 100%; min-width: 0; }
.mt-cta__docs { align-self: start; }
.mt-cta__docs ul { margin: 0; padding: 0; list-style: none; border-top: 5px solid var(--cyan); }
.mt-cta__docs li { padding: 18px 0; border-bottom: var(--hairline) solid var(--placeholder-deep); font-weight: 700; }

/* --- Thai ------------------------------------------------------------------- */
html[data-language="th"] .mt-eyebrow,
html[data-language="th"] .mt-label,
html[data-language="th"] .mt-axis__shore,
html[data-language="th"] .mt-axis__distance,
html[data-language="th"] .mt-axis__berth { font-family: "DB Helvethaica X", sans-serif; font-size: var(--th-meta); letter-spacing: 0; line-height: 1.2; text-transform: none; }
html[data-language="th"] .mt-hero h1 { font-family: "DB Helvethaica X", sans-serif; font-size: var(--th-h1); line-height: .98; letter-spacing: 0; }
html[data-language="th"] .mt-intro h2,
html[data-language="th"] .mt-berths h2,
html[data-language="th"] .mt-route h2,
html[data-language="th"] .mt-operations h2,
html[data-language="th"] .mt-cta h2 { font-family: "DB Helvethaica X", sans-serif; font-size: var(--th-h2); line-height: 1.04; letter-spacing: 0; }
html[data-language="th"] .mt-fact__value { font-family: "DB Helvethaica X", sans-serif; }
html[data-language="th"] .mt-fact__value span { font-family: "DB Helvethaica X", sans-serif; font-size: .45em; }
html[data-language="th"] .mt-fact__label { font-size: var(--th-body-sm); line-height: 1.35; }
html[data-language="th"] .mt-compare thead th,
html[data-language="th"] .mt-route__links strong { font-family: "DB Helvethaica X", sans-serif; font-size: var(--th-title); }
html[data-language="th"] .mt-operations__sequence h3 { font-family: "DB Helvethaica X", sans-serif; font-size: var(--th-title-sm); line-height: 1.1; }
html[data-language="th"] .mt-compare tbody th { font-size: var(--th-body-sm); line-height: 1.3; }
html[data-language="th"] .mt-compare tbody td,
html[data-language="th"] .mt-cta__docs li { font-size: var(--th-body); line-height: 1.35; }
html[data-language="th"] .mt-compare tbody td::before { font-family: "DB Helvethaica X", sans-serif; font-size: var(--th-micro); }
html[data-language="th"] .mt-hero__lead,
html[data-language="th"] .mt-intro__copy,
html[data-language="th"] .mt-route__lead,
html[data-language="th"] .mt-cta p { font-size: var(--th-lead); }
html[data-language="th"] .mt-operations__sequence p { font-size: var(--th-body-sm); }

@media (max-width: 719px) {
  /* long single-word Thai phrases in the hero and table headings */
  html[data-language="th"] .mt-berths h2,
  html[data-language="th"] .mt-operations h2 { font-size: clamp(28px, 8.2vw, 34px); }
}

@media (min-width: 720px) {
  .mt-hero { padding-block: calc(var(--header-height) + 58px) 58px; }
  .mt-hero__actions { display: flex; flex-wrap: wrap; }
  .mt-hero__actions .button-link,
  .mt-cta .button-link { width: auto; min-width: 220px; }
  .mt-hero__axis { min-height: 440px; }
  .mt-axis__line { top: 100px; width: 60%; }
  .mt-axis__distance { top: 196px; }
  .mt-axis__berth--one { top: 170px; }
  .mt-axis__berth--two { top: 244px; }
  .mt-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; }
  .mt-intro__grid { grid-template-columns: .82fr 1.18fr; gap: 8vw; }
  .mt-operations__sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-operations__sequence li { padding: 58px 24px 28px 0; border-right: var(--hairline) solid var(--placeholder-deep); }
  .mt-operations__sequence li:nth-child(even) { padding-left: 24px; border-right: 0; }
  .mt-operations__sequence li::before { top: 24px; }
  .mt-operations__sequence li:nth-child(even)::before { left: 24px; }
  .mt-route__links { grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .mt-cta__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 8vw; }
}

@media (min-width: 1024px) {
  .mt-hero__grid { grid-template-columns: 1.04fr .96fr; align-items: center; min-height: calc(100dvh - var(--header-height) - 116px); }
  .mt-hero__axis { min-height: 540px; }
  .mt-axis__line { top: 120px; width: 62%; }
  .mt-axis__distance { top: 230px; }
  .mt-axis__berth--one { top: 210px; }
  .mt-axis__berth--two { top: 290px; }
  .mt-facts__grid { grid-template-columns: .7fr 1.1fr 1.3fr 1.2fr; }
  .mt-fact__value { font-size: clamp(34px, 3.3vw, 50px); }
  .mt-berths__layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: stretch; }
  .mt-placeholder--specs { min-height: 100%; }
  html[data-language="th"] .mt-hero h1 { font-size: clamp(56px, 6vw, 96px); }
}

@media (min-width: 1280px) {
  .mt-operations__sequence { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mt-operations__sequence li,
  .mt-operations__sequence li:nth-child(even) { min-height: 280px; padding: 58px 22px 28px; border-right: var(--hairline) solid var(--placeholder-deep); }
  .mt-operations__sequence li:first-child { padding-left: 0; }
  .mt-operations__sequence li:last-child { border-right: 0; }
  .mt-operations__sequence li::before,
  .mt-operations__sequence li:nth-child(even)::before { left: 22px; }
  .mt-operations__sequence li:first-child::before { left: 0; }
}

@media (min-width: 720px) and (max-width: 1023px) {
  html[data-language="th"] .mt-intro h2,
  html[data-language="th"] .mt-berths h2,
  html[data-language="th"] .mt-route h2,
  html[data-language="th"] .mt-operations h2,
  html[data-language="th"] .mt-cta h2 { font-size: 5.6vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}