/* I.T. Fusion Group — "Clean Minimal" homepage, itCraft direction
   Contrast (WCAG): ink/bg 16.6, muted/bg 7.3, subtle/bg 5.2, subtle/tint 4.8, gold-ink/bg 5.6, gold/ink 7.6,
   muted-dark/ink 6.9, muted-dark/dot tile 6.3. */

:root {
  --bg: #FAF9F6;
  --tint: #F2EFE9;
  --surface: #FFFFFF;
  --ink: #1C1917;
  --ink-2: #292524;
  --muted: #57534E;
  --subtle: #6F6862;    /* small labels; 4.8:1 on --tint, 5.2:1 on --bg */
  --line: #E7E5E4;
  --line-strong: #D6D3D1;
  --line-dark: #3A3532;
  --gold: #D4A32C;       /* brand gold: fills, rules, text on dark only */
  --gold-ink: #8A5A00;   /* gold for text on light */
  --gold-soft: #F3E3B3;
  --gold-display: #AD8318; /* gold for large text on light: 3.3:1, passes WCAG large-text */
  --on-dark: #FAF9F6;
  --muted-dark: #A8A29E;
  --deep: #0E0D0C;        /* photo and line-art tiles, scrims */
  --tile-dots: #26211E;
  --tile-caption: #BDB6B0; /* on --tile-dots: 5.4:1 */
  --danger: #B42318;
  --success: #166534;

  --font-head: "IBM Plex Sans", "Anuphan", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Anuphan", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Anuphan", ui-monospace, monospace;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(88px, 11vw, 160px);
  --radius: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html:lang(th) body { line-height: 1.75; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 500; color: inherit; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
::selection { background: var(--gold-soft); color: var(--ink); }
input, textarea { caret-color: var(--gold-ink); }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; border-radius: 8px; }
.section-dark :focus-visible { outline-color: var(--gold); }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--on-dark); padding: 12px 18px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */
.display { font-size: clamp(2.75rem, 1.6rem + 3.8vw, 5rem); line-height: 1.04; letter-spacing: -.015em; }
.display-2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.04; letter-spacing: -.015em; }
.display-3 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.022em; }
.dl { display: block; }
/* itCraft: words joined by a rule that stretches across the line */
.dl-split { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3em; }
/* Phrases never break; when the closing phrase does not fit it drops to its own line and the rule
   runs out the first line ("data the law protects." used to push past the container). */
@media (min-width: 641px) { .dl-split > span { white-space: nowrap; } }
.dl-rule { flex: 1 1 auto; min-width: .8em; height: max(2px, .035em); background: var(--gold); border-radius: 2px; transform: translateY(.06em); }
.sub { margin-top: 24px; max-width: 34ch; font: 400 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.35 var(--font-head); letter-spacing: -.015em; color: var(--muted); }
.section-dark .sub { color: var(--muted-dark); }
.mono-label { font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
.section-dark .mono-label { color: var(--muted-dark); }
.gold { color: var(--gold); }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 8px 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: 500 16px/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.pill-dot {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: var(--ink); transition: transform .25s var(--ease);
}
.pill-dot .icon { width: 18px; height: 18px; stroke-width: 2; }
.pill:hover .pill-dot { transform: rotate(45deg); }
.pill:active { transform: scale(.97); transition-duration: .1s; }
.pill-ink { background: var(--ink); color: var(--on-dark); }
.pill-ink:hover { background: #000; }
.pill-light { background: var(--on-dark); color: var(--ink); }
.pill-light:hover { background: #fff; }
.pill-line { padding: 0 24px; border-color: var(--line-strong); color: var(--ink); }
.pill-line:hover { border-color: var(--ink); }
.pill-line .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.pill-line:hover .icon { transform: translateX(3px); }
.pill-block { width: 100%; justify-content: space-between; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; border-radius: 4px; } /* the lockup is 16-30px tall; the link keeps a 44px hit area */
/* Horizontal lockup (option B, 9:1), sized by width; the round badge stays as the favicon. */
.brand img { width: 270px; height: auto; }
.primary-nav ul { display: flex; gap: 4px; }
.primary-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.primary-nav a:hover { color: var(--gold-ink); }
.primary-nav a[aria-current] { color: var(--gold-ink); box-shadow: inset 0 -2px 0 var(--gold); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-cta { min-height: 46px; padding-left: 20px; padding-right: 5px; font-size: 15px; }
.header-cta .pill-dot { width: 34px; height: 34px; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  background: none; border: 0; border-radius: 8px; cursor: pointer; font: 600 14px/1 var(--font-body); color: var(--ink-2); text-decoration: none;
}
.lang-toggle .icon { width: 18px; height: 18px; color: var(--subtle); }
.lang-toggle:hover { color: var(--gold-ink); }
.menu-toggle {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: var(--ink); color: var(--on-dark); border: 0; border-radius: 50%; cursor: pointer;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.mobile-nav { border-top: 1px solid var(--line); background: var(--bg); padding: 8px var(--gutter) 28px; max-height: calc(100dvh - 80px); overflow-y: auto; }
/* opens with a short drop (entry via @starting-style), closes faster; browsers without support just toggle */
.mobile-nav { transition: opacity .22s var(--ease), transform .22s var(--ease), display .22s allow-discrete; }
.mobile-nav[hidden] { opacity: 0; transform: translateY(-8px); transition-duration: .14s; }
@starting-style { .mobile-nav { opacity: 0; transform: translateY(-8px); } }
.mobile-nav ul { margin-bottom: 20px; }
.mobile-nav a:not(.pill) { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); font: 500 24px/1.2 var(--font-head); letter-spacing: -.02em; text-decoration: none; }

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section-tint { background: var(--tint); }
.section-dark { background: var(--ink); color: var(--on-dark); }

/* ---------- Statement (itCraft) ---------- */
.art { width: 100%; height: auto; overflow: visible; }

/* ---------- Services (itCraft dark) ---------- */
.service-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin: clamp(64px, 8vw, 112px) 0 64px; }
/* subgrid: art, title, lead and detail share rows, so a two-line title doesn't push one column's lead out of line */
.service { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.service .art { width: 150px; margin-bottom: 40px; }
.service h3 { font-size: clamp(1.35rem, 1.1rem + .6vw, 1.65rem); line-height: 1.2; letter-spacing: -.02em; }
.service p { margin-top: 16px; font-size: 16px; color: var(--muted-dark); }

/* ---------- Bands: Marks and Official Partners under the hero; Client Logos (hidden) after Services. As tall as one logo. ---------- */
.band { padding: 28px 0; border-top: 1px solid var(--line); }
.band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; text-align: center; }
.band-slots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
/* Placeholder slot: plainly a stand-in, never mistaken for a real logo or mark */
.band-ph { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 8px; background: var(--line); color: var(--muted); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.band-mark { display: inline-flex; align-items: center; gap: 12px; font: 600 15px/1.3 var(--font-head); color: var(--ink-2); }
.band-mark img { height: 64px; width: auto; mix-blend-mode: multiply; } /* the marks ship on white; multiply lets the page tone show through */
.band-mark img.logo { height: 40px; } /* Partner logos sit lower than the Marks so the badges keep the weight */
.band-mark img.wordmark { height: 26px; } /* a bare wordmark at badge height would dwarf the badges */
.section-dark + .band { border-top: 0; }
@media (max-width: 640px) { /* four slots share one row at 320px */
  .band-slots { gap: 12px; }
  .band-ph { width: 56px; height: 56px; }
  .band-mark img { height: 56px; }
  .band-mark img.logo { height: 32px; }
  .band-mark img.wordmark { height: 22px; }
}

/* ---------- Approach rows (itCraft FAQ list) ---------- */
#approach .sub { max-width: 40ch; }
.rows { margin-top: clamp(56px, 7vw, 96px); }
.rows-head, .rows li { display: grid; grid-template-columns: 112px 4fr 7fr; gap: 24px; padding-left: 24px; }
.rows-head { padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.rows-head span:first-child { grid-column: 1 / span 2; }
.rows li { align-items: center; padding-top: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line-strong); }
.rows li > h3 { min-width: 0; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); letter-spacing: -.02em; } /* min-width 0: lets fitPhrases see the real column width */
.rows-body { max-width: 52ch; color: var(--muted); }
/* Grid items that hold Thai body copy: min-width 0 so nowrap phrases (keepPhrases) can't widen their track */
.service, .service > *, .rows-body, .rows-proof > span, .case-body, .industries li, .about-body > * { min-width: 0; }
.rows-proof { display: flex; gap: 10px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.rows-proof .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--gold-ink); }
.circle-num { display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid var(--line-strong); border-radius: 50%; font: 400 22px/1 var(--font-head); }

/* ---------- Work ---------- */
.case { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; padding: clamp(56px, 7vw, 96px) 0; }
#work .display-2 + .case { margin-top: clamp(16px, 3vw, 40px); }
.tile {
  grid-column: 1 / span 5; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radius); padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tile b { position: relative; font: 600 clamp(4.5rem, 2.8rem + 6.5vw, 9rem)/.88 var(--font-head); letter-spacing: -.015em; }
.tile span { position: relative; margin-top: 14px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.tile-dots { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--gold) 25%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--tile-dots); color: var(--gold); }
.tile-dots span { color: var(--tile-caption); } /* lighter than --muted-dark: the gold dots lift the ground */
.tile-gold { background: var(--gold); color: var(--ink); }
.tile-gold span { color: var(--ink-2); }
.tile-art { background: var(--deep); color: var(--gold); }
.tile-art .art { position: absolute; right: -12%; top: -18%; width: 78%; opacity: .9; }
.tile-art span { color: var(--muted-dark); }
.case-body { grid-column: 7 / span 6; }
.case-flip .tile { grid-column: 8 / span 5; order: 2; }
.case-flip .case-body { grid-column: 1 / span 6; order: 1; }
/* Success Story: Sector label, System name, purpose h3, body, chips. Content only: no hover, shadow or link. */
.case-name { margin: 8px 0 20px; font: 600 17px/1.3 var(--font-head); letter-spacing: -.01em; }
.case h3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -.022em; text-wrap: balance; }
.case h3 + p { margin-top: 20px; font-size: 18px; color: var(--muted-dark); max-width: 54ch; }

.partner { margin-top: clamp(40px, 6vw, 80px); padding-top: clamp(72px, 9vw, 128px); border-top: 1px solid var(--line-dark); }
.partner .display-2 { max-width: 16ch; }
.partner .pill { margin-top: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; }
/* Plain dotted labels, not outlined pills: the pills read as buttons (UX review 2026-11-02) */
.chips li { font-size: 14px; line-height: 1.4; color: var(--on-dark); }
/* inline dot, not a flex row: main.js wraps Thai text in phrase spans, which must stay in one inline flow */
.chips li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--gold); vertical-align: .2em; }
/* Word-length figures ("1 ล้าน+") stay on one line at a size that fits the tile */
.tile b { white-space: nowrap; }
html:lang(th) .tile-wide b { font-size: clamp(3.5rem, 2.2rem + 4vw, 6rem); }
/* Placeholder tile: bracketed text is far wider than a figure */
/* Photo tile: a swipeable strip of photos (scroll-snap), each with its caption on a dark scrim */
.tile-photo { padding: 0; background: var(--deep); color: var(--on-dark); }
.tile-slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: inherit; }
.tile-slides::-webkit-scrollbar { display: none; }
.tile-slides:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.tile-slides li { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: flex-end; padding: clamp(24px, 3vw, 36px); padding-right: calc(clamp(16px, 2vw, 24px) + 148px); } /* clear of the nav: 2 x 44px buttons + counter */
.tile-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-slides li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--deep) 88%, transparent), transparent 55%); }
.tile-slides span { z-index: 1; margin: 0; color: var(--on-dark); }
.tile-nav { position: absolute; z-index: 1; right: clamp(16px, 2vw, 24px); bottom: clamp(16px, 2vw, 24px); display: flex; align-items: center; gap: 4px; }
.tile-nav output { min-width: 4.5ch; text-align: center; font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--on-dark); }
.tile-nav button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--on-dark) 35%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--deep) 45%, transparent); color: var(--on-dark); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.tile-nav button:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tile-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tile-nav button:disabled { opacity: .35; cursor: default; background: color-mix(in srgb, var(--deep) 45%, transparent); border-color: color-mix(in srgb, var(--on-dark) 35%, transparent); color: var(--on-dark); }
.tile-nav button[data-dir="-1"] .icon { transform: rotate(180deg); }
.tile-nav .icon { width: 18px; height: 18px; }

/* ---------- Industries ---------- */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-strong); }
.industries li { padding: 32px 24px 8px; border-left: 1px solid var(--line-strong); }
.industries li:first-child { border-left: 0; padding-left: 0; }
.industries .icon { width: 26px; height: 26px; stroke-width: 1.5; color: var(--gold-ink); margin-bottom: 48px; }
.industries h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.015em; }
.industries p { margin-top: 10px; font-size: 15px; color: var(--muted); }

/* ---------- Contact (closing CTA) ---------- */
.contact-grid { display: grid; grid-template-columns: 5fr 6fr; grid-template-rows: auto 1fr; gap: 0 clamp(40px, 7vw, 104px); align-items: start; }
/* DOM order is intro, form, details: on one column the form comes before the details list. */
.contact-info { grid-column: 1; grid-row: 1; }
.contact-form { grid-column: 2; grid-row: 1 / span 2; }
.contact-dl { grid-column: 1; grid-row: 2; }
.contact-sub { margin-top: 28px; font: 500 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.3 var(--font-head); letter-spacing: -.02em; }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: clamp(28px, 4vw, 44px); background: var(--surface); color: var(--ink); border-radius: var(--radius); }
.contact-form :focus-visible { outline-color: var(--gold-ink); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 400 16px/1.4 var(--font-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--gold-soft); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { font-size: 13px; color: var(--danger); }
.field-error:empty { display: none; }
.field-hint { font-size: 13px; color: var(--muted); }
.field-hint.is-over { color: var(--danger); }
.field-hint:empty { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.form-notes { flex: 1 1 240px; display: grid; gap: 8px; }
.form-next, .privacy-note { font-size: 13px; color: var(--muted); }
.form-next a, .privacy-note a, .form-status a { color: var(--gold-ink); text-underline-offset: 3px; }
/* Touch: inline links get a ~44px tall hit area without moving the text */
@media (pointer: coarse) { .form-next a, .privacy-note a, .form-status a, .contact-dl a { padding-block: 13px; } }
a[href^="tel:"] { white-space: nowrap; }
/* Neutral, not green: a mailto handoff is not a confirmed send. */
.form-status { padding: 14px 16px; font-size: 15px; font-weight: 500; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; }
/* Empty but still rendered: a live region that is display:none when filled is often not announced. */
.form-status .pill { display: flex; width: fit-content; margin-top: 12px; padding: 0 24px; background: none; }
.form-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Footer (light) ---------- */
.site-footer { padding: clamp(64px, 8vw, 104px) 0 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin-top: 16px; max-width: 30ch; color: var(--muted); }
.footer-h { margin-bottom: 16px; }
.site-footer ul a { display: inline-flex; min-height: 36px; padding-block: 6px; align-items: center; text-decoration: none; color: var(--ink-2); }
.site-footer ul a:hover { color: var(--gold-ink); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--subtle); }
.footer-bottom a { color: var(--subtle); }

/* ---------- Floating CTA (itCraft) ---------- */
.float-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--on-dark) 18%, transparent);
  opacity: 0; transform: translateY(16px); pointer-events: none;
}
.float-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* Where the header shows its own Contact Us, a second one would only repeat it (and sat over the About intro) */
@media (min-width: 1101px) { .float-cta { display: none; } }

/* ---------- Back to top: above the floating CTA on phones and tablets, in its corner on desktop ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 88px; z-index: 40; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 18%, transparent);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.to-top .icon { transform: rotate(-90deg); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1101px) { .to-top { bottom: 24px; } }

/* ---------- Thai: no negative tracking, taller lines ---------- */
html:lang(th) .display { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); line-height: 1.3; letter-spacing: 0; }
html:lang(th) .hero-title { font-size: clamp(2rem, 1rem + 2.6vw, 3.4rem); line-height: 1.3; letter-spacing: 0; }
html:lang(th) .display-2 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem); line-height: 1.3; letter-spacing: 0; }
html:lang(th) .display-3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); }
html:lang(th) .display-3, html:lang(th) .case h3 { line-height: 1.32; letter-spacing: 0; }
/* Thai phrases run wider than their ch-based Latin caps; these caps stranded a short last line */
html:lang(th) .about-top .display-3 { max-width: none; }
html:lang(th) .partner .display-2 { max-width: 22ch; }
html:lang(th) .sub, html:lang(th) .hero-sub, html:lang(th) .contact-sub { line-height: 1.5; letter-spacing: 0; }
html:lang(th) h3 { letter-spacing: 0; line-height: 1.4; }
html:lang(th) :is(.about-intro, .mobile-nav a, .case-name, .dpath-steps li, .tile b) { letter-spacing: 0; }
/* the mono face has no Thai, so Anuphan stands in; at 12px Thai is unreadable */
html:lang(th) .mono-label, html:lang(th) .tile span { font-size: 14px; letter-spacing: .02em; text-transform: none; }

/* ---------- Scroll reveal (JS-only, motion-safe) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* The page's one material idea, carried from the hero's delivery path: gold lines draw themselves.
   Heading rules extend from the left; service line art traces stroke by stroke. */
.js [data-reveal] .dl-rule { transform: translateY(.06em) scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.16, 1, .3, 1) .2s; }
.js [data-reveal].is-in .dl-rule { transform: translateY(.06em); }
.js [data-reveal] .art g > * { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.1s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--d, 0s)); }
.js [data-reveal].is-in .art g > * { stroke-dashoffset: 0; }
/* Numbered steps and the industry list arrive as lists: the block stays put, its items follow in order. */
.js .rows[data-reveal], .js .industries[data-reveal] { transform: none; }
.js .rows li, .js .industries li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .rows.is-in li, .js .industries.is-in li { opacity: 1; transform: none; }
.rows li:nth-child(2), .industries li:nth-child(2) { transition-delay: .08s; }
.rows li:nth-child(3), .industries li:nth-child(3) { transition-delay: .16s; }
.rows li:nth-child(4), .industries li:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-reveal] .dl-rule { transform: translateY(.06em); }
  .js [data-reveal] .art g > * { stroke-dashoffset: 0; }
  .js .rows li, .js .industries li { opacity: 1; transform: none; }
  /* Moves become fades: state changes (menu, floating CTA, hover) still show, nothing slides or turns. */
  .pill:active, .pill:hover .pill-dot, .pill-line:hover .icon, .float-cta, .to-top, .mobile-nav[hidden] { transform: none; }
  @starting-style { .mobile-nav { transform: none; } }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* The full nav (five links, TH toggle, CTA) needs ~1100px in Thai; below that the menu takes over. */
  .primary-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .service-cols { grid-template-columns: repeat(2, 1fr); row-gap: 64px; }
}
@media (max-width: 900px) {
  .header-inner .brand img { width: 216px; }
  .rows-head { display: none; }
  .rows li { grid-template-columns: 64px 1fr; row-gap: 12px; padding-left: 0; }
  .rows-body { grid-column: 2; }
  .circle-num { width: 60px; height: 60px; font-size: 18px; }
  .tile, .case-body, .case-flip .tile, .case-flip .case-body { grid-column: 1 / -1; order: 0; }
  .tile { aspect-ratio: 16 / 10; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-inner .brand img { width: 192px; }
  .dl-split { display: block; }
  .dl-rule { display: none; }
  .cta-row .pill { width: 100%; justify-content: space-between; }
  .cta-row .pill-line { justify-content: center; }
  .service-cols { grid-template-columns: 1fr; }
  .service { display: block; grid-row: auto; } /* one column: subgrid rows only stretched one-line titles */
  .service .art { width: 120px; margin-bottom: 28px; }
  .tile-art span { max-width: 50%; } /* keeps the caption left of the line art on narrow tiles */
  .industries { grid-template-columns: 1fr; }
  .industries li { border-left: 0; padding: 28px 0 8px; }
  .industries li + li { border-top: 1px solid var(--line-strong); }
  .industries .icon { margin-bottom: 20px; }
  .contact-form { grid-template-columns: 1fr; }
  .form-foot > .pill { width: 100%; justify-content: space-between; }
  /* compact icon-only button; the label stays as its accessible name. JS also hides it while scrolling down. */
  .float-cta { right: 16px; bottom: 16px; width: 52px; padding: 0; gap: 0; }
  .float-cta > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js body { padding-bottom: 84px; }
}

/* ---------- Restored old-site content blocks ---------- */
.service .service-lead { margin-top: 16px; font-size: 17px; color: var(--on-dark); }
.service-quals { display: grid; grid-template-columns: 220px 1fr; gap: 16px 40px; align-items: start; margin-bottom: 64px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.service-quals .mono-label { padding-top: 7px; }
.service-quals .chips { margin-top: 0; }
.service-quals .chips li { color: var(--muted-dark); }
@media (max-width: 900px) { .service-quals { grid-template-columns: 1fr; } .service-quals .mono-label { padding-top: 0; } }

.about-top { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.about-top > * { min-width: 0; }
.about-top .display-3 { max-width: 18ch; }
.about-intro { font: 400 clamp(1.2rem, 1rem + .7vw, 1.55rem)/1.4 var(--font-head); letter-spacing: -.015em; color: var(--muted); }
.about-body { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-strong); }
.about-body > * { min-width: 0; }
.ethics { max-width: 60ch; }
.ethics-icon { width: 32px; height: 32px; stroke-width: 1.5; color: var(--gold-ink); margin-bottom: 28px; }
.ethics h3 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.ethics-date { margin-top: 14px; font-weight: 600; color: var(--gold-ink); }
.ethics-date + p { margin-top: 16px; color: var(--muted); }
.ethics .pill { margin-top: 32px; }
.values-block h3 { font-size: 22px; letter-spacing: -.02em; }
.values { margin-top: 20px; border-top: 1px solid var(--line-strong); color: var(--muted); }
.values li { padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.values strong { color: var(--ink); font-weight: 600; }
.values + h3 { margin-top: 40px; }

.contact-dl { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--line-dark); }
.contact-dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.contact-dl dt { padding-top: 3px; }
.contact-dl dd { font-size: 15px; color: var(--on-dark); }
.contact-dl a { color: var(--on-dark); text-decoration: none; }
.contact-dl a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .about-top, .about-body, .contact-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-rows: none; row-gap: 40px; }
  .contact-info, .contact-form, .contact-dl { grid-column: 1; grid-row: auto; }
  .contact-dl { margin-top: 0; }
}
@media (max-width: 640px) {
  .contact-dl > div { grid-template-columns: 1fr; gap: 4px; }
  }

/* ---------- Hero: positioning headline and delivery path (Thai sizing lives in the Thai block) ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: clamp(80px, 10vw, 152px) 0 clamp(64px, 7vw, 104px); }
.hero-title { margin: 0 auto; font-weight: 400; font-size: clamp(2.25rem, 1.1rem + 3.2vw, 4rem); line-height: 1.08; letter-spacing: -.022em; }
.hero-title .dl { text-wrap: balance; }
.accent { color: var(--gold-display); }
.hero-sub { margin: 28px auto 0; max-width: 46ch; font: 400 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.45 var(--font-head); letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* Delivery path. One authored moment: the gold line draws left to right and each stage lights as it is reached.
   Labels are never animated, so the content reads at once; nodes start dimmed, not hidden. */
.dpath { margin: clamp(64px, 8vw, 104px) auto 0; max-width: 1040px; }
.dpath-steps { --node: 22px; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dpath-steps::before, .dpath-steps::after { content: ""; position: absolute; top: calc(var(--node) / 2); height: 1px; pointer-events: none; }
/* ghost track: runs to the viewport edges and fades, so the path reads as part of a longer line */
.dpath-steps::before { left: calc(50% - 50vw); right: calc(50% - 50vw); background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); }
.dpath-steps::after {
  left: calc(100% / 12); right: calc(100% / 12); background: linear-gradient(90deg, var(--gold), var(--gold-ink));
  transform-origin: left center; animation: dpath-draw-x 1.5s cubic-bezier(.45, 0, .2, 1) .3s both;
}
.dpath-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 6px; font: 500 15px/1.35 var(--font-head); letter-spacing: -.005em; color: var(--ink-2); }
.dpath-node { width: var(--node, 22px); height: var(--node, 22px); flex: none; overflow: visible; }
.dpath-node circle { fill: var(--gold-soft); stroke: var(--gold-ink); stroke-width: 1.5; } /* gold-ink on bg 5.6:1 */
.dpath-node .dot { fill: var(--gold-ink); stroke: none; }
/* plain stages: a small neutral hollow dot, so the ringed evidence stages read as the stronger ones */
.dpath-steps li:not(.is-ai):not(.is-live) circle { fill: var(--bg); stroke: var(--subtle); }
.dpath-steps .is-live circle { fill: var(--ink); stroke: none; }
.dpath-steps .is-live { color: var(--ink); font-weight: 600; }
.dpath-steps .is-ai { color: var(--ink); }
.dpath-node { transform-origin: center; animation: dpath-node .7s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i, 0) * .27s) both; }
@keyframes dpath-draw-x { from { transform: scaleX(0); } }
@keyframes dpath-draw-y { from { transform: scaleY(0); } }
@keyframes dpath-node { from { opacity: .25; transform: scale(.6); } }
/* AI stages: as the line reaches a ringed node, its ring echoes outward once, marking where AI is designed and tested. */
.dpath-node .pulse { fill: none; stroke: var(--gold); opacity: 0; transform-box: fill-box; transform-origin: center; animation: dpath-pulse 1s cubic-bezier(.16, 1, .3, 1) calc(.55s + var(--i, 0) * .27s) both; }
@keyframes dpath-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) {
  .dpath-steps::after, .dpath-node, .dpath-node .pulse { animation: none; }
}
@media (max-width: 900px) {
  .dpath-steps li { font-size: 14px; padding: 0 4px; }
}
@media (max-width: 640px) {
  /* the path turns vertical: six labels cannot share a 350px row */
  .dpath-steps { grid-template-columns: 1fr; row-gap: 14px; width: fit-content; margin-inline: auto; }
  .dpath-steps::before { display: none; }
  .dpath-steps::after {
    top: calc(var(--node) / 2); bottom: calc(var(--node) / 2); left: calc(var(--node) / 2); right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--gold), var(--gold-ink)); transform-origin: center top; animation-name: dpath-draw-y;
  }
  .dpath-steps li { flex-direction: row; gap: 14px; min-height: var(--node); padding: 0; text-align: left; font-size: 15px; }
}

@media (max-width: 370px) { /* 320px phones: lockup, TH toggle and menu share one row */
  .header-inner { gap: 12px; }
  .header-inner .brand img { width: 146px; }
}

/* ---------- Privacy notice page ---------- */
.legal-header .header-inner { height: 80px; }
.legal { padding: clamp(56px, 8vw, 112px) 0 clamp(72px, 9vw, 128px); }
.legal-doc { max-width: 60ch; } /* ~75-80 characters per line in Plex at this size */
.legal-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 32px; font-size: 15px; font-weight: 500; color: var(--gold-ink); text-decoration: none; }
.legal-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-back .icon { width: 18px; height: 18px; transform: scaleX(-1); }
.legal-doc .display-3 { text-wrap: balance; }
.legal-lead { margin-top: 24px; font: 400 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.5 var(--font-head); color: var(--muted); }
.legal-meta { margin-top: 20px; }
.legal-doc h2 { margin-top: 56px; font-size: clamp(1.3rem, 1.1rem + .5vw, 1.6rem); line-height: 1.25; letter-spacing: -.02em; }
.legal-doc p, .legal-doc ul, .legal-doc address { margin-top: 14px; color: var(--ink-2); font-style: normal; }
.legal-doc ul { padding-left: 1.2em; list-style: disc; }
.legal-doc li + li { margin-top: 8px; }
.legal-doc li::marker { color: var(--gold-ink); }
.legal-doc a { color: var(--gold-ink); text-underline-offset: 3px; }
.legal-doc + .legal-doc { margin-top: clamp(72px, 9vw, 120px); padding-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line-strong); }
.legal-doc:lang(th) { line-height: 1.75; }
.legal-doc:lang(th) .display-3, .legal-doc:lang(th) h2 { line-height: 1.4; letter-spacing: 0; }
.legal-doc:lang(th) .mono-label { letter-spacing: .02em; }
.legal-doc[hidden] { display: none; }
/* With JS only one language shows, so drop the divider meant for the stacked no-JS layout. */
.legal-one-lang .legal-doc + .legal-doc { margin-top: 0; padding-top: 0; border-top: 0; }