/* ==========================================================================
   Nuto — page layer

   The look comes from the Industry design system in `industry.css`, which is
   linked first and is the source of truth for colour, type, spacing and the
   component classes (.blueprint/.corner, .card, .tag, .btn, .field/.input).
   Never hard-code a hex or a font name here — take it from a token.

   This file adds only what a design system cannot know: page layout, the
   dark counterpart of the palette, the language switcher, Thai/Chinese
   typography, and the responsive rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dark counterpart

   The system ships one light theme. Dark mode keeps every component rule
   intact by re-pointing the same tokens: ground and ink swap, and both tonal
   ramps are reversed so step 700 stays "the readable one" in either theme.
   -------------------------------------------------------------------------- */
:root {
  --page-max: 1140px;
  --page-pad: clamp(18px, 4vw, 32px);
  --rule: var(--color-neutral-300);
  --rule-soft: var(--color-neutral-200);

  /* Ink roles.

     The system's ramp puts a lot of small text on neutral-500/600, which on the
     light ground measures 2.6:1 and 3.8:1 — under WCAG AA for anything below
     18px. These two roles pull every small size up to a step that passes, and
     hierarchy is carried by size, weight and case instead of by lightness.
       --ink-1  body copy            neutral-800  ~9.0:1
       --ink-2  secondary + labels   neutral-700  ~5.9:1                       */
  --ink-1: var(--color-neutral-800);
  --ink-2: var(--color-neutral-700);

  /* Graph-paper ground. The system's metaphor is a drawing sheet, so the page
     gets one — a fine minor grid inside a coarser major one, both far too faint
     to compete with type. */
  --grid-minor: color-mix(in srgb, var(--color-text) 2.5%, transparent);
  --grid-major: color-mix(in srgb, var(--color-text) 5.5%, transparent);

  /* Ink for anything sitting on the accent fill. The system paints it with
     --color-bg, which on the light ground is #f2f2f3 — a grey that reads as
     dulled rather than clean against the steel blue. Light gets pure white;
     dark keeps the system's dark ink on its pale blue accent. */
  --on-accent: #fff;
}

/* A primary button keeps its on-accent ink in every state, including inside
   the nav. Three rules in the system sheet were reaching it and winning:

     .nav a        { color: inherit }              (0,1,1) > .btn-primary
     .nav a:hover  { color: var(--color-accent) }  (0,2,1) — accent ink on an
                                                   accent fill, so the header
                                                   CTA's label vanished on hover
     a:hover       { color: var(--color-accent-900) }  paled the hero CTA too

   Countered here rather than edited there — industry.css stays the untouched
   source of truth — so the selectors below are deliberately specific enough to
   outrank each of them. */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible,
.nav .btn-primary,
.nav .btn-primary:hover,
.nav .btn-primary:active,
.nav .btn-primary:focus-visible { color: var(--on-accent); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #17191a;
    --color-surface: #202325;
    --color-text: #ececed;
    --color-accent: #94bce3;
    --color-divider: color-mix(in srgb, #ececed 20%, transparent);

    --color-neutral-100: #232426;
    --color-neutral-200: #303133;
    --color-neutral-300: #45464a;
    --color-neutral-400: #5d5d60;
    --color-neutral-500: #85858a;
    --color-neutral-600: #a6a6ab;
    --color-neutral-700: #c6c6ca;
    --color-neutral-800: #e0e0e3;
    --color-neutral-900: #f5f5f8;

    --color-accent-100: #1d2d3d;
    --color-accent-200: #2c455d;
    --color-accent-300: #416180;
    --color-accent-400: #597ea3;
    --color-accent-500: #749dc4;
    --color-accent-600: #94bce3;
    --color-accent-700: #b5d9fd;
    --color-accent-800: #d6ebff;
    --color-accent-900: #eef6ff;

    --on-accent: var(--color-bg);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, .55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --color-bg: #17191a;
  --color-surface: #202325;
  --color-text: #ececed;
  --color-accent: #94bce3;
  --color-divider: color-mix(in srgb, #ececed 20%, transparent);

  --color-neutral-100: #232426;
  --color-neutral-200: #303133;
  --color-neutral-300: #45464a;
  --color-neutral-400: #5d5d60;
  --color-neutral-500: #85858a;
  --color-neutral-600: #a6a6ab;
  --color-neutral-700: #c6c6ca;
  --color-neutral-800: #e0e0e3;
  --color-neutral-900: #f5f5f8;

  --color-accent-100: #1d2d3d;
  --color-accent-200: #2c455d;
  --color-accent-300: #416180;
  --color-accent-400: #597ea3;
  --color-accent-500: #749dc4;
  --color-accent-600: #94bce3;
  --color-accent-700: #b5d9fd;
  --color-accent-800: #d6ebff;
  --color-accent-900: #eef6ff;

  --on-accent: var(--color-bg);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, .55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { overflow-x: hidden; }

/* Graph paper that stays put while the page scrolls.

   A fixed layer rather than `background-attachment: fixed` on the body: iOS
   Safari does not honour that reliably, and a fixed background repaints on
   every scroll frame. This composites as its own layer instead, so it is both
   genuinely stationary and cheap.

   z-index -1 keeps it painted above the body's background colour but below all
   content — which also keeps it inside every card's backdrop, so the frosted
   panels still blur it exactly as before. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  background-position: -1px -1px;
}
/* Tracking is optical, not one value for every size: display sizes need to be
   pulled tight, interface-sized headings need none. */
h1, h2, h3, h4 { line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { letter-spacing: -.022em; }
h2 { letter-spacing: -.016em; }
h3 { letter-spacing: -.008em; }
h4 { letter-spacing: -.004em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }
button, input, textarea { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 999;
  background: var(--color-accent); color: var(--on-accent); padding: 10px 16px;
  transform: translateY(-120%);
}
.skip-link:focus { transform: none; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* Shared section furniture ------------------------------------------------ */
/* Pacing: the two sections that carry the argument get room to breathe, the
   dense reference sections stay tight. A page where every band is the same
   height reads like a spreadsheet. */
.sec { padding: clamp(38px, 5vw, 56px) 0; position: relative; }
.sec-roomy { padding: clamp(52px, 7vw, 84px) 0; }

/* A divider belongs to the sheet, not to the window: it runs exactly as wide as
   the cards above and below it, never edge to edge. */
.sec-rule-top::before,
.sec-rule-bottom::after,
.hero::after,
.site-footer::before {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(100% - (var(--page-pad) * 2), var(--page-max) - (var(--page-pad) * 2));
  height: 1px; background: var(--rule);
}
.sec-rule-top::before { top: 0; }
.sec-rule-bottom::after { bottom: 0; }

.kicker {
  font: 600 11px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.kicker-accent { color: var(--color-accent-700); }

.sec-h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.02em; margin-top: 10px; }
.sec-h2-sm { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.016em; margin-top: 10px; }
.sec-sub {
  font: 400 15px/1.6 var(--font-body);
  color: var(--ink-2);
  max-width: 620px; margin-top: 10px; text-wrap: pretty;
}

/* Two-column "label left, content right" split used by several sections */
.split { display: grid; grid-template-columns: 340px 1fr; gap: 36px; }
.split-narrow { grid-template-columns: 280px 1fr; gap: 32px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.brand:hover { color: var(--color-text); }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  background: var(--color-text); color: var(--color-bg);
  font: 700 14px var(--font-heading);
  display: grid; place-items: center;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font: 600 17px var(--font-heading); letter-spacing: .02em; }
.brand-text em { font: 400 11px var(--font-body); font-style: normal; color: var(--ink-2); }

.nav { display: flex; align-items: center; gap: 22px; }
.nav > a:not(.btn) {
  font: 500 13px var(--font-body);
  color: var(--ink-1);
}
.nav > a:not(.btn):hover,
.nav > a.is-active { color: var(--color-accent-700); }
.nav .btn { font-family: var(--font-heading); }

.header-tools { display: flex; align-items: center; gap: 8px; }

/* Square icon buttons in the system's idiom */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: 0;
  color: var(--ink-2); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.icon-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: none; }
  :root:not([data-theme="light"]) .i-moon { display: block; }
  :root[data-theme="light"] .i-sun { display: block; }
  :root[data-theme="light"] .i-moon { display: none; }
}

/* Language dropdown ------------------------------------------------------- */
.lang-menu { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; padding: 0 9px;
  font: 600 12px var(--font-body); letter-spacing: .02em;
}
.lang-trigger[aria-expanded="true"] { color: var(--color-accent); border-color: var(--color-accent); }
.lang-caret { transition: transform .18s ease; }
.lang-trigger[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 176px; padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.lang-list[hidden] { display: none; }
.lang-list button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 10px;
  background: transparent; border: 0; border-radius: 0; cursor: pointer;
  font: 400 14px var(--font-body); color: var(--ink-1); text-align: left;
}
.lang-list button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.lang-list button.is-active { background: var(--color-accent); color: var(--on-accent); }
.lang-code { font: 600 10px var(--font-body); letter-spacing: .1em; opacity: .7; }

/* Mobile menu button ------------------------------------------------------ */
.menu-btn { display: none; }
.burger, .burger::before, .burger::after {
  display: block; width: 16px; height: 1.5px; background: currentColor;
  transition: transform .2s ease, opacity .15s ease;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after { top: 5px; }
.menu-btn[aria-expanded="true"] .burger { background: transparent; }
.menu-btn[aria-expanded="true"] .burger::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-btn { display: inline-grid; }
  .nav {
    position: fixed; inset: 61px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--page-pad) 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    max-height: calc(100dvh - 61px); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav > a:not(.btn) { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--rule-soft); }
  .nav .btn { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   Hero — centred, no illustration; the stat band below carries the proof
   -------------------------------------------------------------------------- */
.hero {
  padding: clamp(40px, 6vw, 64px) 0 clamp(28px, 4vw, 40px);
  text-align: center;
  position: relative;
}
.hero::after { bottom: 0; }
.hero h1 {
  font-size: clamp(36px, 6.4vw, 62px);
  letter-spacing: -.028em;
  margin: 18px auto 0; max-width: 780px;
}
.hero h1 .hl { color: var(--color-accent-700); }
.hero-lead {
  font: 400 17px/1.6 var(--font-body);
  color: var(--ink-1);
  max-width: 620px; margin: 18px auto 0; text-wrap: pretty;
}
.hero-core {
  display: inline-block;
  border-left: 3px solid var(--color-accent);
  padding-left: 12px; margin-top: 22px;
  font: 600 18px var(--font-heading); color: var(--color-text);
  text-align: left;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.hero-cta .btn { font-family: var(--font-heading); font-size: 17px; padding: 13px 26px; }

/* Stat band --------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 4px 20px; }
.stat:first-of-type { padding-left: 0; }
.stat:last-of-type { padding-right: 0; }
.stat + .stat { border-left: 1px dashed var(--rule); }
.stat-v { font: 600 clamp(26px, 3.2vw, 34px) var(--font-heading); letter-spacing: -.018em; color: var(--color-accent-700); }
.stat-d { font: 400 13px/1.45 var(--font-body); color: var(--ink-2); margin-top: 4px; }

@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-of-type(odd) { border-left: 0; }
  .stat:nth-of-type(n+3) { border-top: 1px dashed var(--rule); }
}

/* --------------------------------------------------------------------------
   Projects
   -------------------------------------------------------------------------- */
.proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.proj { gap: 0; padding: 18px; }
.proj-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proj-fact {
  font: 600 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-700); text-align: right;
}
.proj h3 { font-size: 24px; margin: 12px 0 14px; }
.proj-rows { display: grid; grid-template-columns: 84px 1fr; gap: 8px 14px; }
.proj-rows dt {
  font: 600 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.proj-rows dd { font: 400 14px/1.55 var(--font-body); color: var(--ink-1); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* --------------------------------------------------------------------------
   Problems — a dense list, not a card wall
   -------------------------------------------------------------------------- */
.prob-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; align-content: start;
}
.prob-item {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  border-top: 1px solid var(--rule-soft); padding-top: 10px;
}
.prob-item p { font: 400 15px/1.5 var(--font-body); color: var(--ink-1); }
.prob-icon {
  width: 18px; height: 18px; margin-top: 2px;
  fill: none; stroke: var(--color-accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.prob-item.is-accent { border-top-color: var(--color-accent-300); }
.prob-item.is-accent p { color: var(--color-accent-700); }

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.svc { border-top: 2px solid var(--rule); padding-top: 12px; }
.svc:first-of-type { border-top-color: var(--color-accent); }
.svc-no { font: 600 12px var(--font-body); letter-spacing: .12em; color: var(--color-accent-700); }
.svc h3 { font-size: 21px; letter-spacing: -.004em; margin: 6px 0 8px; }
.svc-lead { font: 400 13px/1.5 var(--font-body); color: var(--ink-2); }
.svc ul { display: grid; gap: 5px; margin-top: 12px; }
.svc li { font: 400 13px var(--font-body); color: var(--ink-1); }

.stack-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--rule);
}
.stack-label {
  font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin-right: 6px;
}
.sec-note {
  font: 400 13px/1.6 var(--font-body); color: var(--ink-2);
  margin-top: 14px; max-width: 700px;
}

/* --------------------------------------------------------------------------
   ERP background
   -------------------------------------------------------------------------- */
.mod-label {
  font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
}
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.mod { border: 1px solid var(--color-divider); padding: 14px 14px 16px; }
.mod-no { font: 600 11px var(--font-body); color: var(--color-accent-700); }
.mod h3 { font-size: 19px; letter-spacing: 0; margin: 5px 0 6px; }
.mod p { font: 400 13px/1.45 var(--font-body); color: var(--ink-2); }
.also-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.also-label {
  font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin-right: 4px;
}
.erp-copy p + p { margin-top: 10px; }
.erp-statement { font: 400 15px/1.6 var(--font-body); color: var(--ink-1); }
.erp-note { font: 400 13px/1.6 var(--font-body); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 24px; }
.step { border-top: 2px solid var(--rule); padding-top: 10px; }
.step:first-of-type { border-top-color: var(--color-accent); }
.step-no { font: 600 12px var(--font-body); color: var(--color-accent-700); }
.step h3 { font-size: 19px; letter-spacing: 0; margin: 4px 0 5px; }
.step p { font: 400 12.5px/1.45 var(--font-body); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Trust + capacity
   -------------------------------------------------------------------------- */
.trust-lines { display: grid; gap: 10px; }
.trust-lines p { font: 400 15px/1.6 var(--font-body); color: var(--ink-1); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.tier { border: 1px solid var(--color-divider); padding: 12px 14px; }
.tier-label {
  font: 600 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.tier h3 { font-size: 18px; letter-spacing: 0; margin-top: 6px; }
.tier-desc { font: 400 12.5px/1.5 var(--font-body); color: var(--ink-2); margin-top: 7px; }
.tier-note { font: 500 13px/1.6 var(--font-body); color: var(--color-accent-700); margin-top: 12px; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-copy { display: grid; gap: 10px; }
.about-copy p { font: 400 15px/1.6 var(--font-body); color: var(--ink-1); }
.about-sign { font: 600 13px var(--font-body); color: var(--ink-2); margin-top: 4px; }
.about-portrait {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border: 1px solid var(--color-divider);
  font: 700 40px var(--font-heading); color: var(--color-accent-700);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   FAQ — open by default, two columns
   -------------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin-top: 22px; }
.faq-item { border-top: 1px solid var(--rule-soft); padding: 12px 0; }
.faq-item:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.faq-item h3 { font-size: 18px; letter-spacing: 0; }
.faq-item p { font: 400 14px/1.55 var(--font-body); color: var(--ink-2); margin-top: 5px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-lead { font: 400 16px/1.6 var(--font-body); color: var(--ink-1); margin-top: 12px; }
.contact-steps { display: grid; gap: 10px; margin-top: 22px; }
.contact-steps > div {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px;
  border-top: 1px solid var(--rule-soft); padding-top: 10px;
}
.contact-steps span { font: 600 13px var(--font-body); color: var(--color-accent-700); }
.contact-steps p { font: 400 14px/1.5 var(--font-body); color: var(--ink-1); }
/* Availability — the first thing a client worries about once they know
   this is one person with a day job, so it gets its own framed block. */
/* The two questions a client asks once they know this is one person with a day
   job: when can we talk, and what does it cost. They sit side by side. */
.fact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.avail { border: 1px solid var(--color-divider); padding: 15px 16px 16px; }
.avail-text { font: 400 14px/1.6 var(--font-body); color: var(--ink-1); margin-top: 7px; }
.price-line { font: 400 14px/1.5 var(--font-body); color: var(--ink-1); margin-top: 7px; }
.price-line b { font: 700 20px var(--font-heading); letter-spacing: -.01em; color: var(--color-accent-700); }
.price-note { font: 400 12.5px/1.5 var(--font-body); color: var(--ink-2); margin-top: 7px; }
@media (max-width: 640px) { .fact-pair { grid-template-columns: 1fr; } }

/* Optional half of the form, folded away so the ask is three fields */
.form-more { margin-top: 16px; border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.form-more > summary {
  cursor: pointer; list-style: none;
  font: 600 13px var(--font-body); color: var(--color-accent-700);
  display: inline-flex; align-items: center; gap: 7px;
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::before {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s ease;
}
.form-more[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.form-more > summary:hover { color: var(--color-accent-900); }
.form-more > .form-row, .form-more > .field { margin-top: 14px; }

.proj-role { font-weight: 600; color: var(--color-accent-700) !important; }

.contact-direct { font: 400 13px var(--font-body); color: var(--ink-2); margin-top: 22px; }
.contact-link { font: 600 20px var(--font-heading); color: var(--color-accent-700); }

.contact-form { border: 1px solid var(--color-divider); padding: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Rhythm between stacked fields — direct children only. The two fields
   inside a .form-row are adjacent siblings of each other, so an unscoped
   `.field + .field` drops the right-hand column 14px and the pair no longer
   lines up. The grid's own `gap` already spaces the columns. */
.contact-form > .field + .field,
.contact-form > .form-row + .field { margin-top: 14px; }
.contact-form .field > label { color: var(--ink-2); }
.field .req { color: var(--color-accent-700); }
.field .hint { color: var(--ink-2); }
.field.has-error .input { border-color: #b4443f; }
.error { font: 400 11px var(--font-body); color: #b4443f; margin-top: 4px; }
.contact-form .btn-block { font-family: var(--font-heading); margin-top: 18px; font-size: 17px; padding: 13px 26px; }
.form-note { font: 400 12.5px var(--font-body); color: var(--ink-2); text-align: center; margin-top: 10px; }
.form-status { font: 500 13px var(--font-body); text-align: center; margin-top: 8px; min-height: 1.2em; }
.form-status.ok { color: var(--color-accent-700); }
.form-status.err { color: #b4443f; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding: 26px 0 36px;
  position: relative;
}
.site-footer::before { top: 0; }
.footer-brand { max-width: 420px; }
.footer-brand > div { display: flex; align-items: center; gap: 10px; }
.footer-mark {
  width: 26px; height: 26px; flex: none;
  background: var(--color-text); color: var(--color-bg);
  font: 700 12px var(--font-heading); display: grid; place-items: center;
}
.footer-brand strong { font: 600 16px var(--font-heading); }
.footer-brand p { font: 400 13px/1.55 var(--font-body); color: var(--ink-2); margin-top: 10px; }
.footer-nav { display: flex; gap: 44px; }
.footer-nav > div { display: grid; gap: 6px; align-content: start; }
.footer-nav p.kicker { margin-bottom: 2px; }
.footer-nav a { font: 400 13px var(--font-body); color: var(--ink-1); }
.footer-nav a:hover { color: var(--color-accent-700); }
.footer-nav .footer-slogan { font: 400 13px var(--font-body); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Panels

   Body copy never sits straight on the graph paper — small text over a ruled
   ground is what makes a page feel noisy. Every content group therefore gets
   the same frame the cards wear. Grouped, not per item: framing each service
   column, step and FAQ row individually would turn the sheet into a wall of
   boxes, which is the opposite of the problem being solved.
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  border: 1px solid var(--color-divider);
  padding: clamp(18px, 2.4vw, 26px);
}

/* The frame now draws the group's edge, so the first row inside it drops the
   rule it used to carry — otherwise the two sit a padding apart and read as a
   doubled line. */
.prob-list.panel > .prob-item:nth-of-type(-n+2),
.faq-grid.panel > .faq-item:nth-of-type(-n+2),
.contact-steps.panel > div:first-of-type { border-top: 0; padding-top: 0; }
.faq-grid.panel > .faq-item:last-of-type { border-bottom: 0; }

@media (max-width: 900px) {
  /* one column — only the very first row loses its rule */
  .prob-list.panel > .prob-item:nth-of-type(2),
  .faq-grid.panel > .faq-item:nth-of-type(2) { border-top: 1px solid var(--rule-soft); padding-top: 10px; }
}

/* --------------------------------------------------------------------------
   Frosted objects

   Every framed box blurs what is behind it. The grid still reads through — that
   is the point — but as a soft wash rather than ruling under the copy. No
   surface tint is added: the system's cards are line drawings, and a scrim
   would turn them into panels.
   -------------------------------------------------------------------------- */
.proj, .mod, .tier, .avail, .contact-form, .card, .panel {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

@supports not (backdrop-filter: blur(1px)) {
  /* Without backdrop-filter the grid would sit sharp under card text, so the
     card takes the page colour instead. */
  .proj, .mod, .tier, .avail, .contact-form, .card, .panel { background: var(--color-bg); }
}

/* --------------------------------------------------------------------------
   Hover

   Every framed object answers the cursor, in the system's own language: the
   hairline border and the registration marks take the accent. No lifting, no
   shadow growth — those belong to the rounded-card idiom this system rejects.
   -------------------------------------------------------------------------- */
.proj, .mod, .tier, .avail, .contact-form,
.svc, .step, .faq-item, .stat {
  transition: border-color .2s ease, background-color .2s ease;
}
.blueprint > .corner { transition: color .2s ease; }

.proj:hover, .mod:hover, .tier:hover, .avail:hover { border-color: var(--color-accent); }
.panel { transition: border-color .2s ease; }
.proj:hover > .corner,
.mod:hover > .corner,
.avail:hover > .corner { color: var(--color-accent); }

.svc:hover { border-top-color: var(--color-accent); }
.step:hover { border-top-color: var(--color-accent); }

.faq-item { transition: border-top-color .2s ease; }
.faq-item:hover { border-top-color: var(--color-accent); }
.faq-item h3 { transition: color .2s ease; }
.faq-item:hover h3 { color: var(--color-accent-700); }

.stat:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }

.contact-link { transition: color .2s ease; border-bottom: 1px solid transparent; }
.contact-link:hover { border-bottom-color: var(--color-accent); }

@media (hover: none) {
  /* Touch devices get the resting state — a sticky :hover reads as a bug. */
  .proj:hover, .mod:hover, .tier:hover, .avail:hover { border-color: var(--color-divider); }
  .stat:hover { background: transparent; }
}

/* --------------------------------------------------------------------------
   Reveal on scroll — restrained, this is a technical drawing not a slideshow
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .split, .split-narrow { grid-template-columns: 1fr; gap: 22px; }
  .proj-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .site-footer { flex-direction: column; gap: 28px; }
}

@media (max-width: 640px) {
  .prob-list { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .mod-grid { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .proj-rows { grid-template-columns: 1fr; gap: 4px 0; }
  .proj-rows dd { margin-bottom: 6px; }
  .footer-nav { flex-direction: column; gap: 22px; }
  .brand-text em { display: none; }
}

@media (max-width: 420px) {
  .mod-grid { grid-template-columns: 1fr; }
  .proj-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .proj-fact { text-align: left; }
}

/* --------------------------------------------------------------------------
   Thai and Chinese

   Barlow carries no Thai or CJK glyphs, so the Noto families sit behind it in
   the stack and pick up those runs per glyph. Condensed headings and Latin
   letter-spacing both read badly in these scripts, so they are relaxed.
   -------------------------------------------------------------------------- */
html[lang="th"] {
  --font-heading: "Barlow Condensed", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Barlow", "Noto Sans Thai", system-ui, sans-serif;
}

/* Thai has no condensed cut, so a Thai heading would otherwise lose the tall,
   narrow character the whole system is built on. Noto Sans Thai is a variable
   font with a real width axis (62.5–100%), requested as such in index.html.
   Barlow Condensed measures 0.85x the width of Barlow, and Noto Sans Thai hits
   that same 0.85 ratio at font-stretch 68% — so Thai headings are narrowed by
   exactly the proportion the Latin condensed face is. Body copy stays at full
   width, where condensing would only cost legibility. */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] .stat-v,
html[lang="th"] .hero-core,
html[lang="th"] .contact-link {
  font-stretch: 68%;
  font-weight: 700;
}
/* Thai wants no Latin tracking at all — the marks above and below need the room. */
html[lang="th"] .hero h1 { letter-spacing: 0; }
html[lang="zh-CN"] {
  --font-heading: "Barlow Condensed", "Noto Sans SC", system-ui, sans-serif;
  --font-body: "Barlow", "Noto Sans SC", system-ui, sans-serif;
}

html[lang="th"] body { line-height: 1.75; }
html[lang="zh-CN"] body { line-height: 1.7; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4,
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4 {
  line-height: 1.34; letter-spacing: 0;
}
html[lang="th"] .hero h1 { font-size: clamp(30px, 5.2vw, 50px); }
html[lang="zh-CN"] .hero h1 { font-size: clamp(30px, 5.4vw, 52px); }

html[lang="th"] .kicker,       html[lang="zh-CN"] .kicker,
html[lang="th"] .proj-fact,    html[lang="zh-CN"] .proj-fact,
html[lang="th"] .proj-rows dt, html[lang="zh-CN"] .proj-rows dt,
html[lang="th"] .stack-label,  html[lang="zh-CN"] .stack-label,
html[lang="th"] .mod-label,    html[lang="zh-CN"] .mod-label,
html[lang="th"] .also-label,   html[lang="zh-CN"] .also-label,
html[lang="th"] .tier-label,   html[lang="zh-CN"] .tier-label,
html[lang="th"] .brand-text em, html[lang="zh-CN"] .brand-text em {
  letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .hero-cta, .contact-form, .lang-menu, .icon-btn { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}