@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../Be_Vietnam_Pro/BeVietnamPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../Be_Vietnam_Pro/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../Be_Vietnam_Pro/BeVietnamPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../Be_Vietnam_Pro/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../Be_Vietnam_Pro/BeVietnamPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../Be_Vietnam_Pro/BeVietnamPro-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Vertical brand colors — overridden per vertical in style.css */
  --primary: #0B1F5E;
  --accent: #C9A84C;

  /* NiCE blue-grey neutral palette (P-scale) */
  --bg: #F2F5FA;           /* P50  — cool blue-tinted page background */
  --surface: #FFFFFF;      /* P0   — card and panel surfaces */
  --tint: #EAF0FA;         /* P100 — light blue wash for icons, badges, section fills */
  --border: rgba(11, 31, 94, 0.09);
  --text: #0D1B2E;         /* P900 — deep navy body text */
  --text-muted: #4E6080;   /* P600 — blue-grey secondary text */
  --text-subtle: #8096B4;  /* P400 — placeholder and tertiary text */

  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(11, 31, 94, 0.05), 0 1px 2px rgba(11, 31, 94, 0.03);
  --shadow: 0 2px 12px rgba(11, 31, 94, 0.07), 0 1px 3px rgba(11, 31, 94, 0.04);
  --shadow-lg: 0 8px 28px rgba(11, 31, 94, 0.10);
  --transition: 0.18s ease;
  --header-height: 72px;
  --chat-bar-height: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  padding-bottom: var(--chat-bar-height);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
summary {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent 40%);
  outline-offset: 2px;
}

.container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.section {
  padding: 80px 0;
}

/* Alternate section backgrounds for visual rhythm */
.section:nth-of-type(even) {
  background: var(--surface);
}

.section-header {
  margin-bottom: 40px;
}

.section-header h2 {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.section-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eyebrow {
  display: inline-block;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 32px);
  }

  .section {
    padding: 56px 0;
  }

  .section-header h2 {
    font-size: 1.7rem;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}