/* ============================================================================
   web-10 · เข็มทิศ ที่ปรึกษาการเงินและบัญชี

   Concept: the client is not buying reports, they are buying a cash position
   that stops surprising them. So the argument is drawn rather than written: one
   continuous line runs the height of the page, jagged and vermilion at the top
   where the problem is, settling into a low sage wave by the bottom where the
   result is. Navy-and-amber with a stock photo of people shaking hands — the
   default for every advisory firm — is avoided entirely. There is not one
   photograph on this site.

   Signature: the cash-flow line (.flow). Home page only. Every other page gets
   a short fragment of it as a section mark, never the full run.

   The two accents are strictly divided: vermilion only ever means "before /
   the problem", sage only ever means "after / the result". Once that holds, the
   reader can tell which is which without a caption.
   ============================================================================ */

:root {
  --bone: #F3F1EC;
  --bone-2: #E7E4DC;
  --forest: #14312A;
  --sage: #4E7C6A;
  --vermilion: #E4572E;
  --grey: #6E756F;

  --container: 1120px;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(80px, 10vw, 136px);
}

body {
  background: var(--bone);
  color: var(--forest);
  font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
  line-height: 1.8;
}

.mono, .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: 'Pridi', Georgia, serif; font-weight: 600; line-height: 1.3; }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight: 500; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--gap); }
.section--alt { background: var(--bone-2); }
.section--dark { background: var(--forest); color: var(--bone); }
/* the content column never uses the full width — the right margin belongs to the line */
.col { max-width: 62ch; }
.lede { color: var(--grey); }
.section--dark .lede { color: rgba(243,241,236,.78); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* -- fragments of the line, used as section marks ------------------------------- */
.mark { display: block; height: 20px; width: 64px; margin-bottom: 18px; overflow: visible; }
.mark path { fill: none; stroke-width: 2; stroke-linecap: round; }
.mark--calm path { stroke: var(--sage); }
.mark--jag path { stroke: var(--vermilion); }

/* -- buttons ---------------------------------------------------------------- */
.btn { display: inline-block; padding: 15px 32px; border-radius: 2px; text-decoration: none; font-weight: 600; transition: background .2s, color .2s; }
.btn--primary { background: var(--forest); color: var(--bone); }
.btn--primary:hover { background: #1d443a; }
.btn--ghost { border: 1px solid var(--forest); }
.btn--ghost:hover { background: var(--forest); color: var(--bone); }
.section--dark .btn--primary { background: var(--bone); color: var(--forest); }
.section--dark .btn--ghost { border-color: var(--bone); color: var(--bone); }
.section--dark .btn--ghost:hover { background: var(--bone); color: var(--forest); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* -- header ------------------------------------------------------------------ */
.header { position: sticky; top: 0; z-index: 30; background: var(--bone); border-bottom: 1px solid transparent; transition: border-color .2s; }
.header.is-stuck { border-bottom-color: rgba(20,49,42,.14); }
.header__inner { max-width: var(--container); margin-inline: auto; padding: 12px var(--pad); display: flex; align-items: center; gap: 24px; }
.brand { font-family: 'Pridi', serif; font-weight: 600; font-size: 1.25rem; text-decoration: none; }
.header__cta { margin-left: auto; padding: 10px 20px; font-size: .9375rem; }
.nav { display: flex; gap: 20px; margin-left: 20px; }
.nav__link { text-decoration: none; font-size: .9375rem; padding-block: 3px; border-bottom: 2px solid transparent; }
.nav__link.is-active { color: var(--sage); border-bottom-color: var(--sage); }
.nav__link:hover { color: var(--sage); }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 22px; height: 2px; background: var(--forest); }
@media (max-width: 900px) {
  /* only the CTA gets the auto margin — with one on the burger too, the free space is
     split between them and the button ends up stranded mid-header. */
  .burger { display: flex; order: 3; margin-left: 0; } .header__cta { margin-left: auto; order: 2; }
  .nav { position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; align-items: center; gap: 26px; margin: 0; background: var(--bone); transform: translateY(-100%); transition: transform .3s; }
  .nav.is-open { transform: none; }
  .nav__link { font-size: 1.25rem; }
  body.nav-open { overflow: hidden; }
}

/* -- SIGNATURE: the cash-flow line ------------------------------------------------ */
/* One SVG behind the whole page, stretched to its full height. The stroke is a vertical
   gradient from vermilion to sage, so the colour changes as the shape settles — the two
   halves of the argument are the same line, which is the point. */
.flowwrap { position: relative; }
.flow {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: clamp(140px, 22vw, 320px); height: 100%;
  pointer-events: none; opacity: .28;
}
.flow path { fill: none; stroke: url(#flowgrad); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* --p is scroll progress 0→1, written by web-10.js */
.flow path { stroke-dasharray: 2400; stroke-dashoffset: calc(2400 - (2400 * var(--p, 1))); }
/* The stacking rule must skip the line and its tags — as a direct child, `.flow` was having
   its own position:absolute overwritten, dropping the SVG into normal flow and pushing every
   section off the page. */
.flowwrap > *:not(.flow):not(.flow__tag) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .flow path { stroke-dashoffset: 0; } }
@media (max-width: 900px) { .flow { width: 48px; opacity: .18; } }

.flow__tag {
  position: absolute; right: clamp(140px, 22vw, 320px); z-index: 1;
  font-family: 'IBM Plex Mono', monospace; font-size: .75rem;
  padding-right: 12px; white-space: nowrap;
}
.flow__tag--top { top: 22%; color: var(--vermilion); }
.flow__tag--mid { top: 52%; color: var(--sage); }
.flow__tag--end { top: 88%; color: var(--sage); }
@media (max-width: 900px) { .flow__tag { display: none; } }

/* -- hero ---------------------------------------------------------------------- */
/* Text left, the printed month right. The photograph is the same argument the .flow line makes
   in SVG — one line, traced by hand, over a real report — so it reinforces the signature rather
   than competing with it. The image column stops short of the flow line's zone on wide screens;
   below 1000px the line is already down to a 48px sliver at the edge. */
.hero { padding-block: clamp(72px,10vw,128px) var(--gap); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px,5vw,64px); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.hero h1 { max-width: 22ch; }

/* One vermilion rule above, a mono caption below. No frame, no shadow — this site's whole
   vocabulary is a line and a label. */
.shot img { display: block; width: 100%; }
.shot__rule { height: 3px; width: 56px; background: var(--vermilion); margin-bottom: 14px; }
.shot__cap { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--grey); }

.band-img { width: 100%; height: clamp(220px, 28vw, 400px); object-fit: cover; display: block; }

.duo { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px,3vw,36px); align-items: start; margin-top: 40px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.duo img { width: 100%; display: block; }
.duo figcaption { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--grey); }
.hero .lede { margin-top: 24px; max-width: 54ch; font-size: clamp(1.0625rem,1.6vw,1.1875rem); }
.hero__small { margin-top: 24px; color: var(--grey); font-size: .875rem; }

/* -- signal list ------------------------------------------------------------------- */
.signals { max-width: 720px; margin-top: 40px; }
.signal { padding: 22px 0; border-top: 1px solid rgba(20,49,42,.14); }
.signal:last-child { border-bottom: 1px solid rgba(20,49,42,.14); }
.signal h3 { display: flex; align-items: center; gap: 12px; }
.signal h3 svg { flex: none; width: 32px; height: 16px; overflow: visible; }
.signal h3 svg path { fill: none; stroke: var(--vermilion); stroke-width: 2; stroke-linecap: round; }
.signal p { color: var(--grey); margin-left: 44px; }

/* -- service rows --------------------------------------------------------------------- */
.svc { width: 100%; max-width: 880px; margin-top: 36px; }
.svc th, .svc td { padding: 18px 20px 18px 0; border-top: 1px solid rgba(20,49,42,.14); text-align: left; font-weight: 400; vertical-align: top; }
.svc tr:last-child td, .svc tr:last-child th { border-bottom: 1px solid rgba(20,49,42,.14); }
.svc tr:hover { background: var(--bone); }
.section--alt .svc tr:hover { background: var(--bone-2); filter: brightness(.985); }
.svc .is-name { font-family: 'Pridi', serif; font-weight: 500; font-size: 1.0625rem; }
.svc .is-what { color: var(--grey); }
.svc .is-when { font-family: 'IBM Plex Mono', monospace; color: var(--sage); white-space: nowrap; text-align: right; }
@media (max-width: 800px) {
  .svc, .svc tbody, .svc tr, .svc th, .svc td { display: block; width: auto; }
  .svc tr { padding: 16px 0; border-top: 1px solid rgba(20,49,42,.14); }
  .svc th, .svc td { padding: 0; border: 0; text-align: left; }
}

/* -- results strip ----------------------------------------------------------------------- */
.results { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 36px; }
@media (max-width: 860px) { .results { grid-template-columns: repeat(2,1fr); } }
.result { padding: 24px; border-right: 1px solid rgba(243,241,236,.18); }
.result:last-child { border-right: 0; }
.result__n { display: block; font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.75rem,4vw,2.75rem); line-height: 1.1; }
.result__label { font-weight: 600; margin-top: 6px; }
.result__base { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: rgba(243,241,236,.62); }

/* -- process weeks ------------------------------------------------------------------------ */
.weeks { max-width: 820px; margin-top: 40px; border-left: 1px solid rgba(20,49,42,.18); }
.week { position: relative; padding: 22px 0 22px 28px; }
.week + .week { border-top: 1px solid rgba(20,49,42,.12); }
.week::before { content: ''; position: absolute; left: -4.5px; top: 32px; width: 9px; height: 9px; border-radius: 50%; background: var(--sage); }
.week__n { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--grey); }
.week p { color: var(--grey); max-width: 56ch; }

/* -- fit / not fit ---------------------------------------------------------------------------- */
.fit { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 clamp(28px,4vw,52px); margin-top: 40px; }
.fit__rule { background: rgba(20,49,42,.16); }
@media (max-width: 820px) { .fit { grid-template-columns: 1fr; } .fit__rule { height: 1px; margin-block: 28px; } }
.fit h3 { font-size: 1.25rem; margin-bottom: 14px; }
.fit--yes h3 { color: var(--sage); }
.fit--no h3 { color: var(--vermilion); }
.fit li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: var(--grey); }
.fit li svg { flex: none; width: 20px; height: 10px; margin-top: .5em; overflow: visible; }
.fit li svg path { fill: none; stroke-width: 2; stroke-linecap: round; }
.fit--yes li svg path { stroke: var(--sage); }
.fit--no li svg path { stroke: var(--vermilion); }

/* -- service detail blocks ----------------------------------------------------------------- */
.detail { max-width: 900px; }
.detail + .detail { margin-top: 56px; }
.detail__problem { background: var(--bone-2); padding: 20px 24px; border-left: 3px solid var(--vermilion); margin-top: 16px; }
.section--alt .detail__problem { background: var(--bone); }
.detail__gain { padding: 20px 24px; border-left: 3px solid var(--sage); margin-top: 12px; }
.detail__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; max-width: 640px; }
@media (max-width: 640px) { .detail__meta { grid-template-columns: 1fr; } }
.detail__meta dt { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--grey); }
.detail__meta dd { margin: 2px 0 0; font-family: 'IBM Plex Mono', monospace; }
.detail__when { color: var(--grey); font-size: .9375rem; margin-top: 14px; }

/* -- fee table ----------------------------------------------------------------------------- */
.fees { width: 100%; max-width: 900px; margin-top: 36px; }
.fees th, .fees td { padding: 18px 20px 18px 0; border-top: 1px solid rgba(243,241,236,.18); text-align: left; font-weight: 400; vertical-align: top; }
.fees tr:last-child td, .fees tr:last-child th { border-bottom: 1px solid rgba(243,241,236,.18); }
.fees .is-kind { font-family: 'Pridi', serif; font-weight: 500; white-space: nowrap; }
.fees .is-range { font-family: 'IBM Plex Mono', monospace; font-size: 1.125rem; }
.fees .is-note { color: rgba(243,241,236,.78); font-size: .9375rem; }
.fees__bar { height: 4px; background: var(--sage); filter: brightness(1.35); margin-top: 8px; width: var(--w); }
@media (max-width: 780px) {
  .fees, .fees tbody, .fees tr, .fees th, .fees td { display: block; width: auto; }
  .fees tr { padding: 16px 0; border-top: 1px solid rgba(243,241,236,.18); }
  .fees th, .fees td { padding: 0; border: 0; }
}

/* -- case blocks ------------------------------------------------------------------------------ */
.case { max-width: 880px; }
.case + .case { margin-top: 48px; }
.case__meta { font-family: 'IBM Plex Mono', monospace; font-size: .875rem; color: var(--grey); }
.case__before, .case__after { background: var(--bone-2); padding: 18px 22px; margin-top: 12px; }
.case__before { border-left: 3px solid var(--vermilion); }
.case__after { border-left: 3px solid var(--sage); }
.case__after .num { color: var(--sage); }
.case__do { padding: 18px 22px; margin-top: 12px; color: var(--grey); }

/* -- confidentiality / contact tables ------------------------------------------------------------ */
.dl { width: 100%; max-width: 880px; margin-top: 36px; }
.dl th, .dl td { padding: 16px 20px 16px 0; border-top: 1px solid rgba(20,49,42,.14); text-align: left; font-weight: 400; vertical-align: top; }
.dl tr:last-child td, .dl tr:last-child th { border-bottom: 1px solid rgba(20,49,42,.14); }
.dl .is-k { font-family: 'Pridi', serif; font-weight: 500; white-space: nowrap; width: 30%; }
.dl .is-v { color: var(--grey); }
.dl a.is-v, .dl .is-v.mono { color: var(--forest); }
.dl tr:hover { background: var(--bone-2); }
.section--alt .dl tr:hover { background: var(--bone); }
@media (max-width: 780px) {
  .dl, .dl tbody, .dl tr, .dl th, .dl td { display: block; width: auto; }
  .dl tr { padding: 14px 0; border-top: 1px solid rgba(20,49,42,.14); }
  .dl th, .dl td { padding: 0; border: 0; width: auto; }
}

/* -- prep steps ------------------------------------------------------------------------------------ */
.steps { max-width: 780px; margin-top: 36px; border-left: 1px solid rgba(20,49,42,.18); }
.step { position: relative; padding: 20px 0 20px 28px; }
.step + .step { border-top: 1px solid rgba(20,49,42,.12); }
.step__n { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--grey); }
.step p { color: var(--grey); }
.callout { background: var(--forest); color: var(--bone); padding: 26px; margin-top: 28px; max-width: 780px; }
.callout p { color: rgba(243,241,236,.9); }

.hours { max-width: 620px; margin-top: 24px; }
.hours tr { border-top: 1px solid rgba(20,49,42,.14); }
.hours tr:last-child { border-bottom: 1px solid rgba(20,49,42,.14); }
.hours th, .hours td { padding: 12px 0; font-weight: 400; text-align: left; }
.hours td { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.hours tr.is-today th { font-weight: 600; }
.hours tr.is-close th, .hours tr.is-close td { background: var(--bone-2); }

.locator { width: 100%; display: block; border: 1px solid rgba(20,49,42,.14); border-radius: 2px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,52px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .two-col > .is-map { order: -1; } }

/* -- closing band ----------------------------------------------------------------------------------- */
.band { background: var(--bone-2); padding-block: clamp(56px,7vw,88px); }
.band p { color: var(--grey); max-width: 60ch; }

/* -- footer -------------------------------------------------------------------------------------------- */
.footer { background: var(--forest); color: var(--bone); padding-block: 56px 28px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr .7fr 1fr; gap: 32px; font-size: .9375rem; color: rgba(243,241,236,.72); }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-family: 'Pridi', serif; font-weight: 600; color: var(--bone); margin-bottom: 8px; }
.footer__label { font-size: .8125rem; color: var(--sage); filter: brightness(1.4); margin-bottom: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(243,241,236,.18); font-size: .8125rem; }

/* No fixed mobile action bar: the audience is company owners, and a bar that follows them down
   the page reads as pressure — the opposite of how this firm sells. */