/* Backster — official website
 *
 * Brand values come from CI Backster_ok.pdf (PANTONE Reflex Blue U / PANTONE 124 U).
 * The CI has no RGB values because it is a print guide, so the hex below is measured
 * from the logo artwork itself — that keeps the page and the logo the same colour.
 *
 * The CI names MINION PRO as the brand typeface. Minion Pro is licensed and cannot be
 * served on the web, so headings use Source Serif 4 (also an Adobe design, the closest
 * free relative) with Noto Serif Thai alongside it for Thai. Body text is Sarabun,
 * the same family as the TH Sarabun used in the company's own documents.
 *
 * Brand colour is an accent here, never a surface: no gradients, no filled hero, no
 * pill buttons, no rounded cards, no shadows. Structure is carried by hairline rules
 * and whitespace, which is what Bain, BCG, PwC and McKinsey all do.
 */

:root{
  --blue:#19459C;          /* PANTONE Reflex Blue U */
  --blue-dark:#123072;
  --navy:#0A1E48;          /* Reflex Blue taken down for the dark band */
  --navy-2:#132A5C;
  --gold:#DC9515;          /* PANTONE 124 U */
  --gold-ink:#8A5C05;      /* gold dark enough for text on paper */

  --ink:#0F1728;
  --ink-2:#414D66;
  --ink-3:#6B7790;
  --paper:#FFFFFF;
  --paper-2:#F5F7FA;
  --rule:#D7DEE9;
  --rule-soft:#E8ECF3;
  --on-navy:#EAF0FA;
  --on-navy-2:#A9BBDC;
  --rule-navy:#274277;

  --wrap:1140px;
  --measure:64ch;

  --serif:"Source Serif 4","Noto Serif Thai",Georgia,"Times New Roman",serif;
  --sans:"Sarabun","Leelawadee UI","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);margin:0;font-weight:400;line-height:1.25;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.section{padding:92px 0;border-top:1px solid var(--rule)}
.section--alt{background:var(--paper-2)}
.section__head{max-width:var(--measure);display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.section h2{font-size:clamp(27px,3.4vw,38px);letter-spacing:-.005em}
.section__head p{color:var(--ink-2);font-size:18px}

.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-ink);
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule);
}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand__mark{width:36px;height:auto;flex:0 0 auto}
.brand__name{
  font-family:var(--serif);font-size:22px;font-weight:600;
  letter-spacing:.08em;color:var(--blue);
}
.nav{display:flex;gap:28px;margin-inline-start:auto;align-items:center}
/* The underline is always present but transparent, so gaining it on hover or on the
   active section does not shift the row by a pixel. */
.nav a{
  color:var(--ink-2);font-size:15px;font-weight:500;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--blue);text-decoration:none;border-bottom-color:var(--blue)}
.nav a.is-current{color:var(--blue);border-bottom-color:var(--gold)}
.header-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.lang{display:inline-flex;border:1px solid var(--rule);background:#fff}
.lang button{
  border:0;background:transparent;cursor:pointer;font:inherit;font-family:var(--mono);
  font-size:12px;padding:6px 11px;color:var(--ink-3);letter-spacing:.06em;
}
.lang button[aria-pressed="true"]{background:var(--blue);color:#fff}

/* Links, not buttons — a consultancy site sends people to a page, it does not
   ask them to press something. The one exception is the platform sign-in. */
.link-cta{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);border-bottom:1px solid var(--blue);
  padding-bottom:3px;align-self:flex-start;
}
.link-cta:hover{text-decoration:none;color:var(--blue-dark);border-color:var(--blue-dark)}
.link-cta--gold{color:var(--gold-ink);border-color:var(--gold)}
.link-cta--gold:hover{color:var(--gold-ink);border-color:var(--gold-ink)}

.menu-toggle{
  display:none;border:1px solid var(--rule);background:#fff;
  width:42px;height:40px;cursor:pointer;font-size:18px;color:var(--ink-2);
}

/* ---------- hero ---------- */
.hero{padding:96px 0 84px}
.hero .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:64px;align-items:start}
.hero h1{
  font-size:clamp(34px,5vw,58px);font-weight:300;line-height:1.14;
  letter-spacing:-.015em;margin-top:16px;
}
.hero__lead{margin-top:26px;font-size:19px;line-height:1.68;color:var(--ink-2);max-width:58ch}
.hero__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:28px;align-items:center}

.facts{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.fact{padding:18px 0;border-bottom:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:3px}
.fact__n{
  font-family:var(--serif);font-size:31px;font-weight:400;color:var(--blue);
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.fact__t{font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ---------- services ---------- */
.services{border-top:1px solid var(--ink)}
.service{
  display:grid;grid-template-columns:15rem 1fr;gap:32px;
  padding:30px 0;border-bottom:1px solid var(--rule);
  position:relative;transition:background-color .2s ease;
}
/* A hairline in the brand colour grows along the row on hover. It reads as the row
   being picked up rather than as a card lighting up, which is the effect a filled
   hover state would give. */
.service::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline-start:0;
  height:1px;width:0;background:var(--blue);transition:width .3s ease;
}
.service:hover::after{width:100%}
.service__label{display:flex;flex-direction:column;gap:7px}
.service h3{font-size:21px;font-weight:600;line-height:1.3}
.service__en{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.02em}
.service__body{display:flex;flex-direction:column;gap:14px}
.service__body p{color:var(--ink-2);max-width:var(--measure)}
.service__list{display:flex;flex-wrap:wrap;gap:8px 22px}
.service__list li{
  font-size:14.5px;color:var(--ink-2);position:relative;padding-inline-start:15px;
}
.service__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:11px;
  width:6px;height:1px;background:var(--gold);
}

/* ---------- modules (a real sequence, so it is numbered) ---------- */
.modules{border-top:1px solid var(--ink)}
.module{
  display:grid;grid-template-columns:4rem 16rem 1fr;gap:26px;
  padding:19px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline;
}
.module__n{font-family:var(--mono);font-size:13px;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.module h3{font-size:17px;font-weight:600}
.module p{font-size:15px;color:var(--ink-3);line-height:1.6}

/* ---------- methodology ---------- */
.method{border-top:1px solid var(--ink)}
.method__row{
  display:grid;grid-template-columns:16rem 1fr;gap:32px;
  padding:26px 0;border-bottom:1px solid var(--rule);
}
.method__row dt{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--blue)}
.method__row dd{margin:0;color:var(--ink-2);max-width:var(--measure)}

/* ---------- platforms ---------- */
.platforms{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink)}
.platform{
  padding:30px 34px 30px 0;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:14px;
}
.platform + .platform{padding-inline-start:34px;border-inline-start:1px solid var(--rule)}
.platform h3{font-size:20px;font-weight:600}
.platform p{color:var(--ink-2);font-size:16px}
.platform ul{display:flex;flex-direction:column;gap:8px}
.platform li{font-size:15px;color:var(--ink-2);position:relative;padding-inline-start:15px}
.platform li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:6px;height:1px;background:var(--gold)}
.platform__foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:8px}
.platform__url{font-family:var(--mono);font-size:12px;color:var(--ink-3);word-break:break-all}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.about p + p{margin-top:18px}
.about p{color:var(--ink-2)}
.credentials{border-top:1px solid var(--ink)}
.credential{padding:18px 0;border-bottom:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:4px}
.credential dt{font-size:14px;color:var(--ink-3);font-family:var(--mono);letter-spacing:.02em}
.credential dd{margin:0;font-size:16px;color:var(--ink);line-height:1.6}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact__list{border-top:1px solid var(--ink);margin:0}
.contact__list > div{
  display:grid;grid-template-columns:9rem 1fr;gap:20px;
  padding:17px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline;
}
.contact__list dt{color:var(--ink-3);font-size:14px;font-family:var(--mono);letter-spacing:.02em}
.contact__list dd{margin:0;font-size:16px;color:var(--ink)}
/* Addresses carry real line breaks in i18n.js so they read as an address block. */
.contact__addr{white-space:pre-line;line-height:1.6}

/* ---------- funding ladder ----------
   The one dark band on the page. It carries the diagram because the ladder is the
   argument the firm actually makes — it advises across the whole climb, not one rung
   — and a dark ground is what stops that from reading as another list.
   Figures and funding sources come from Backster Short Profile page 3. */
.band{background:var(--navy);color:var(--on-navy);padding:96px 0;border-top:0}
.band h2{color:#fff}
.band .eyebrow{color:var(--gold)}
.band .section__head p{color:var(--on-navy-2)}

/* The diagram is 1000 units wide. Letting it shrink to a phone's width would take the
   19px stage labels down to about 6px, so below that it keeps a legible minimum and
   scrolls inside its own box instead — the page body never scrolls sideways. */
.ladder{margin:12px 0 0;overflow-x:auto}
.ladder svg{width:100%;height:auto;display:block;overflow:visible}
.ladder-step{fill:var(--navy-2);stroke:var(--rule-navy);stroke-width:1}
.ladder-step-top{fill:none;stroke:var(--gold);stroke-width:2}
.ladder-axis{stroke:var(--rule-navy);stroke-width:1}
.ladder-stage{fill:#fff;font-family:var(--serif);font-size:19px;font-weight:600}
.ladder-rev{fill:var(--gold);font-family:var(--mono);font-size:14px}
.ladder-fund{fill:var(--on-navy-2);font-family:var(--sans);font-size:13.5px}
.ladder-scale{fill:#7D93BE;font-family:var(--mono);font-size:12px}
.ladder-span{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:3 4}
.ladder-span-label{fill:var(--gold);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em}

.band-note{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--rule-navy);
  color:var(--on-navy-2);max-width:var(--measure);font-size:15.5px;
}

/* ---------- entrance motion ----------
   Sections fade up once as they arrive. It is deliberately small — the point is that
   the page feels alive when scrolled, not that anything performs. Anyone who has asked
   their system to reduce motion gets the finished state immediately, and so does anyone
   whose browser has no IntersectionObserver, because .reveal is only added by script. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- skip link ----------
   Every professional-services site checked carries one; PwC labels its own
   "SKIP TO MAIN CONTENT". It stays off-screen until focused by the keyboard. */
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  background:var(--blue);color:#fff;padding:12px 20px;font-size:15px;font-weight:600;
}
.skip:focus{inset-inline-start:0;text-decoration:none}

/* ---------- footer ----------
   Four columns rather than one line, which is what Grant Thornton, Kroll, PwC and
   McKinsey all do: the footer is where a company states plainly who and where it is. */
.site-footer{border-top:1px solid var(--ink);padding:56px 0 32px;background:var(--paper-2)}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:36px;border-bottom:1px solid var(--rule);
}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-brand .brand{margin-bottom:2px}
.footer-brand p{font-size:14.5px;color:var(--ink-2);max-width:34ch;line-height:1.65}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h3{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.footer-col address{font-style:normal;font-size:14px;color:var(--ink-2);line-height:1.6;white-space:pre-line}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:14.5px;color:var(--ink-2)}
.footer-col a:hover{color:var(--blue)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
  justify-content:space-between;padding-top:22px;
}
.footer-bottom p{font-size:13.5px;color:var(--ink-3)}
.footer-bottom .legal{font-size:13.5px;color:var(--ink-3)}

/* ---------- 404 ----------
   Kept here rather than inline on 404.html: the CSP in _headers has no
   'unsafe-inline', so a style attribute on that page would be dropped. */
.notfound{min-height:70vh;display:grid;place-content:center;text-align:center;gap:20px;padding:60px 28px}
.notfound img{margin:0 auto 8px;width:190px;height:auto}
.notfound h1{font-size:30px;font-weight:300}
.notfound p{color:var(--ink-2)}

/* ---------- language visibility ----------
   Elements marked data-lang-only show only under the matching <html lang>.
   Text that merely translates uses data-i18n instead (see a/i18n.js). */
[data-lang-only]{display:none}
html[lang="th"] [data-lang-only="th"],
html[lang="en"] [data-lang-only="en"]{display:revert}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .about,.contact{grid-template-columns:1fr;gap:40px}
  .module{grid-template-columns:3.5rem 1fr;gap:8px 20px}
  .module p{grid-column:2}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .section{padding:64px 0}
  .hero{padding:64px 0 56px}
  .nav{
    display:none;position:absolute;top:76px;inset-inline:0;background:#fff;
    border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:6px 28px 18px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;border-top:1px solid var(--rule-soft);width:100%}
  .nav a:first-child{border-top:0}
  .nav a:hover{border-bottom:0}
  .menu-toggle{display:block}
  .band{padding:64px 0}
  .ladder svg{min-width:700px}
  .service,.method__row{grid-template-columns:1fr;gap:12px}
  .platforms{grid-template-columns:1fr}
  .platform + .platform{padding-inline-start:0;border-inline-start:0}
  .platform{padding-inline-end:0}
  .contact__list > div{grid-template-columns:1fr;gap:2px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
}
/* Bounded at both ends on purpose. Written as a plain max-width it would sit after
   the 760px block and win there too, putting the footer back into two columns on a
   phone — which is exactly what happened the first time. */
@media (min-width:761px) and (max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}