/* ─────────────────────────────────────────────────────────────
   BEST∞ Design Tokens
   Colors + Typography. Source: best-investigation.com homepage.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;500;600;700&family=Jost:wght@100;200;300;400;500;600&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Raw palette ─────────────────────────────────────── */
  /* Sourced from the official BEST∞ logo: navy wordmark + teal infinity. */
  --ink:        #1a2b4a;          /* navy — primary dark from logo wordmark */
  --ink-2:      #11203c;          /* deeper navy for surfaces */
  --ink-3:      #0a1226;          /* near-black navy for footer */
  --teal:       #2d6a7a;          /* brand accent — taken from logo infinity */
  --teal-2:     #3d8696;          /* hover / lighter teal */
  --teal-pale:  #e8f0f2;          /* tinted light surface */
  --teal-soft:  rgba(95,160,176,0.9); /* italic-on-dark accent */
  --sand:       #f4f1e9;          /* warm light, primary light surface (logo paper) */
  --sand-2:     #e9e5da;          /* warm light, divider/secondary */
  --white:      #fbfaf5;          /* off-white, page background (logo paper) */
  --muted:      #7a8290;          /* cool grey for body copy */
  --gold:       #a8904a;          /* held in reserve, unused */
  --line:       rgba(10,15,13,0.1); /* default 1px hairline */
  --line-dark:  rgba(255,255,255,0.06); /* hairline on dark surfaces */
  --line-dark-2:rgba(255,255,255,0.12);

  /* ── Semantic surfaces ───────────────────────────────── */
  --bg:           var(--white);
  --bg-warm:      var(--sand);
  --bg-warm-2:    var(--sand-2);
  --bg-dark:      var(--ink);
  --bg-dark-2:    #050a07;        /* footer */

  /* ── Semantic text ───────────────────────────────────── */
  --fg:           var(--ink);
  --fg-on-dark:   #ffffff;
  --fg-muted:     var(--muted);
  --fg-muted-dark:rgba(255,255,255,0.4);
  --fg-faint:     rgba(10,15,13,0.45);
  --fg-faint-dark:rgba(255,255,255,0.22);
  --accent:       var(--teal);
  --accent-on-dark: var(--teal-soft);

  /* ── Type families ───────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
  --font-label:   'Jost', 'Helvetica Neue', sans-serif;

  /* ── Type scale ──────────────────────────────────────── */
  --fs-eyebrow:   0.58rem;        /* uppercase label, tracked 0.35em */
  --fs-label:     0.62rem;        /* form label, button */
  --fs-nav:       0.65rem;
  --fs-caption:   0.72rem;
  --fs-body:      0.95rem;
  --fs-body-lg:   0.97rem;
  --fs-h3:        1.2rem;
  --fs-h2:        clamp(2.2rem, 4vw, 3.5rem);
  --fs-h1:        clamp(3rem,   7vw, 6.5rem);

  --lh-tight:     1.02;
  --lh-snug:      1.1;
  --lh-body:      1.9;

  --ls-tight:     -0.01em;
  --ls-label:     0.10em;
  --ls-cta:       0.12em;
  --ls-nav:       0.15em;
  --ls-meta:      0.22em;
  --ls-eyebrow:   0.35em;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 7rem;            /* default section padding */

  /* ── Radii (architectural; nearly square) ───────────── */
  --radius-1: 1px;             /* buttons, hairline-feel */
  --radius-2: 2px;             /* cards, fields, modal */
  --radius-4: 4px;             /* contact icon squircle */
  --radius-pill: 20px;         /* pill chips only */

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-card:  0 1px 8px rgba(10,15,13,0.06);
  --shadow-toast: 0 8px 30px rgba(0,0,0,0.3);

  /* ── Motion ──────────────────────────────────────────── */
  --t-fast:   0.2s;
  --t-base:   0.4s;
  --t-slow:   0.7s;
  --t-image:  0.6s;
  --ease:     ease;

  /* ── Layout ──────────────────────────────────────────── */
  --wrap:        1260px;
  --wrap-pad:    4rem;
  --nav-h:       60px;
}

/* ─────────────────────────────────────────────────────────────
   Semantic typography classes
   ───────────────────────────────────────────────────────────── */

.t-eyebrow {
  font-family: var(--font-label);
  font-weight: 200;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.t-eyebrow::before {
  content:'';
  width:20px; height:1px;
  background: currentColor;
  display:inline-block;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-h2 em, .t-h1 em {
  font-style: italic;
  color: var(--accent);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--fg);
}

.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.t-body-strong {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--fg);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-label);
  font-weight: 300;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--fg);
}

.t-stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
}

.t-stat-label {
  font-family: var(--font-label);
  font-weight: 100;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}