/*
  Loek Luijbregts brand system
  Visually aligned with the Gratis MKB Scan / ScoreApp experience.
  Loaded last so one system can unify newer shared templates and older inline pages.
*/

:root {
  --brand-blue: #0b63e5;
  --brand-blue-hover: #084fb8;
  --brand-electric: #1c78fe;
  --brand-navy: #152042;
  --brand-navy-deep: #0f1730;
  --brand-ink: #152042;
  --brand-body: #4f5b70;
  --brand-muted: #7a8497;
  --brand-white: #ffffff;
  --brand-surface: #f7f9fc;
  --brand-blue-pale: #eaf2ff;
  --brand-border: #e2e8f0;
  --brand-shadow: 0 18px 54px rgba(21, 32, 66, .09);

  /* Compatibility with the existing page generations. */
  --cream: var(--brand-white);
  --paper: var(--brand-white);
  --white: var(--brand-white);
  --ink: var(--brand-ink);
  --ink-mid: var(--brand-body);
  --ink-light: var(--brand-body);
  --ink-soft: var(--brand-muted);
  --mid: var(--brand-body);
  --soft: var(--brand-muted);
  --orange: var(--brand-blue);
  --orange-dark: var(--brand-blue-hover);
  --orange-pale: var(--brand-blue-pale);
  --sand: var(--brand-surface);
  --border: var(--brand-border);
}

html { background: var(--brand-white); }

body {
  background: var(--brand-white);
  color: var(--brand-ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body :where(h1, h2, h3, h4, h5, h6, blockquote),
body :where(.item-title, .proof-stat strong, .transformation-item strong, .resource-link strong),
body :where(.signal-list li, .why-card p, .review blockquote) {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body :where(h1, h2, h3, h4, h5, h6) {
  color: var(--brand-navy);
  font-style: normal;
  letter-spacing: -.035em;
}

body h1 { font-weight: 700; }
body h2 { font-weight: 700; }
body h3 { font-weight: 600; }

body :where(em, h1 em, h2 em, h3 em) {
  color: var(--brand-electric);
  font-style: normal;
  font-weight: inherit;
}

body :where(p, li) { color: var(--brand-body); }
body strong { color: var(--brand-navy); font-weight: 650; }

body :where(.mono, .eyebrow, .label, .box-label, .seo-label, .byline, .back, .back-link,
  .nav-name, .nav-link, .brand, .group-title, .item-desc, figcaption, footer p) {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body :where(.mono, .eyebrow, .label, .box-label, .seo-label, .group-title) {
  color: var(--brand-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

body a { text-underline-offset: 4px; }
body :where(.content a, .text-link, .case-link, .about-links a, .author-note a, .related-reading a) {
  color: var(--brand-blue);
}

/* Shared navigation */
body nav {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--brand-border);
  box-shadow: 0 1px 0 rgba(21, 32, 66, .02);
  backdrop-filter: blur(16px);
}

body :where(.brand, .nav-name) {
  color: var(--brand-navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  opacity: 1;
  text-transform: none;
}

body :where(.nav-links, .nav-link, .nav-links a) {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body :where(.nav-link, .nav-links a:not(.btn):not(.nav-cta)) {
  color: var(--brand-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body :where(.nav-link, .nav-links a):hover { color: var(--brand-blue); }

body :where(.btn, .button, .nav-cta, .nav-links .nav-cta, .nav-links .btn, a.button) {
  background: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(11, 99, 229, .18);
  color: var(--brand-white);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  min-height: 46px;
  padding: 12px 22px;
  text-transform: none;
}

body :where(.btn, .button, .nav-cta, .nav-links .nav-cta, .nav-links .btn, a.button):hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  color: var(--brand-white);
  transform: translateY(-1px);
}

body .btn-secondary {
  background: var(--brand-white);
  border-color: var(--brand-border);
  box-shadow: none;
  color: var(--brand-navy);
}

body .btn-secondary:hover {
  background: var(--brand-surface);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

/* Homepage */
body:has(.hero-grid) .hero {
  background:
    radial-gradient(circle at 7% 8%, rgba(28, 120, 254, .08), transparent 31%),
    var(--brand-white);
  border-bottom: 1px solid var(--brand-border);
  color: var(--brand-navy);
  padding: 88px 0 82px;
}

body:has(.hero-grid) .hero-grid { display: block; }
body:has(.hero-grid) .hero-copy { max-width: 850px; }
body:has(.hero-grid) .hero h1,
body:has(.hero-grid) .hero h2,
body:has(.hero-grid) .hero strong { color: var(--brand-navy); }
body:has(.hero-grid) .hero h1 {
  font-size: clamp(48px, 5.6vw, 68px);
  line-height: 1.03;
  margin-top: 18px;
  max-width: 800px;
}
body:has(.hero-grid) .hero p { color: var(--brand-body); }
body:has(.hero-grid) .hero-copy > p {
  color: var(--brand-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  margin-top: 24px;
  max-width: 720px;
}
body:has(.hero-grid) .hero .eyebrow,
body:has(.hero-grid) .hero .mono,
body:has(.hero-grid) .hero .label { color: var(--brand-muted); }
body:has(.hero-grid) .hero .hero-tag { color: var(--brand-electric); }
body:has(.hero-grid) .hero-actions { align-items: center; gap: 22px; margin-top: 30px; }
body:has(.hero-grid) .hero-link {
  color: var(--brand-navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
body:has(.hero-grid) .hero-link:hover { color: var(--brand-blue); }

body .signal-panel {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  box-shadow: none;
}

body .signal-panel::after { background: var(--brand-electric); opacity: .18; }
body .signal-panel .mono { color: #d8e2f1; }
body .signal-list li { color: #d8e2f1; font-size: 17px; }
body .signal-list li::before { color: var(--brand-electric); }
body .signal-result {
  background: rgba(255, 255, 255, .07);
  border-left-color: var(--brand-electric);
  color: var(--brand-white);
}

body .transformation-strip { background: var(--brand-navy); border-color: rgba(255, 255, 255, .10); }
body .transformation-item { border-color: rgba(255, 255, 255, .12); }
body .transformation-item strong { color: var(--brand-white); }
body .transformation-item span { color: #aebbd0; }
body .proof-nav { background: var(--brand-navy); color: var(--brand-white); }
body .proof-nav p { color: var(--brand-white); }
body .proof-nav .mono { color: #aebbd0; }

body section { background: var(--brand-white); }
body :where(.recognition, .paths, .orchestration, .resources) { background: var(--brand-white); }
body :where(.method, .about) { background: var(--brand-surface); }

body :where(.recognition-card, .method-card, .role-card, .path-card, .resource-link) {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(21, 32, 66, .025);
}

body :where(.recognition-card, .method-card, .role-card, .path-card, .resource-link):hover {
  border-color: rgba(11, 99, 229, .38);
}

body .recognition-grid { gap: 18px; }
body .method-line {
  background: var(--brand-blue-pale);
  border-color: rgba(11, 99, 229, .18);
  border-radius: 12px;
}

body :where(.role-card.primary, .path-card.featured) {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}

body :where(.role-card.primary, .path-card.featured) :where(h2, h3, strong) { color: var(--brand-white); }
body :where(.role-card.primary, .path-card.featured) p { color: #cbd5e1; }

body .work { background: var(--brand-navy); color: var(--brand-white); }
body .work :where(h1, h2, h3) { color: var(--brand-white); }
body .work .section-head p { color: #cbd5e1; }
body .case-card { background: #1c294d; border-color: rgba(255, 255, 255, .11); border-radius: 12px; }
body .case-type { color: #9fc3ff; }
body .case-desc { color: #aebbd0; }
body .case-shift { color: var(--brand-white); }
body .case-media.words,
body .proof-field { background: linear-gradient(145deg, var(--brand-blue-pale), #d8e8ff); }
body .case-media.words strong,
body .proof-field strong { color: var(--brand-blue); }

body .review { background: var(--brand-blue); color: var(--brand-white); }
body .review blockquote,
body .review strong { color: var(--brand-white); }
body .review cite { color: #e5efff; }

body :where(.work, .review, .final, .proof-nav, .testimonials) :where(p, li) { color: #cbd5e1; }
body :where(.work, .review, .final, .proof-nav, .testimonials) :where(h1, h2, h3, h4, strong) { color: var(--brand-white); }

body .final { background: var(--brand-navy); color: var(--brand-white); }
body .final :where(h1, h2, h3) { color: var(--brand-white); }
body .final p { color: #cbd5e1; }
body footer { background: var(--brand-navy-deep); color: #aebbd0; }
body footer a { color: #d8e2f1; }

/* Writing library */
body:has(.group) main {
  max-width: 1040px;
  padding-top: 72px;
}

body:has(.group) h1 {
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.02;
}

body:has(.group) .lede { color: var(--brand-body); font-size: 19px; line-height: 1.7; }
body:has(.group) .group { margin-top: 68px; }
body:has(.group) .group-title { border-color: var(--brand-border); color: var(--brand-muted); }

body:has(.group) .list {
  display: grid;
  gap: 14px;
}

body:has(.group) .item {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 24px 26px;
}

body:has(.group) .item:hover {
  border-color: rgba(11, 99, 229, .42);
  box-shadow: 0 12px 36px rgba(21, 32, 66, .07);
  transform: translateY(-2px);
}

body:has(.group) .item-title { color: var(--brand-navy); font-size: 22px; font-weight: 600; }
body:has(.group) .item:hover .item-title { color: var(--brand-blue); }
body:has(.group) .item-desc { color: var(--brand-muted); font-size: 13px; letter-spacing: 0; }

/* Shared and legacy article templates */
body:has(.content) { background: var(--brand-white); }

body :where(.article-shell, main:has(.back-link)) {
  max-width: 760px;
  width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 72px;
}

body:has(.content) :where(h1) {
  font-size: clamp(42px, 6vw, 62px);
  font-weight: 700;
  line-height: 1.04;
}

body:has(.content) :where(.dek, .seo-dek) {
  color: var(--brand-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
}

body:has(.content) :where(.byline) {
  border-color: var(--brand-border);
  color: var(--brand-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: none;
}

body:has(.content) :where(.content h2) {
  color: var(--brand-navy);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.13;
  margin-top: 64px;
}

body:has(.content) :where(.content h3) {
  color: var(--brand-navy);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

body:has(.content) :where(.content p, .content li) {
  color: var(--brand-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.78;
}

body:has(.content) .content strong { color: var(--brand-navy); font-weight: 700; }
body:has(.content) .content a { color: var(--brand-blue); text-decoration: underline; }

body:has(.content) :where(.article-hero img) {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
}

body:has(.content) :where(.article-hero figcaption) {
  color: var(--brand-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

body:has(.content) :where(.content blockquote, .tool-box, .source-box, .author-note, .related-reading) {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--brand-electric);
  border-radius: 12px;
}

body:has(.content) .content blockquote {
  color: var(--brand-navy);
  font-size: 24px;
  font-weight: 650;
  line-height: 1.45;
}

body:has(.content) .proof-box {
  background: var(--brand-navy);
  border-radius: 12px;
  color: var(--brand-white);
}

body:has(.content) .proof-box p,
body:has(.content) .proof-box li { color: #d8e2f1; }
body:has(.content) .proof-box strong { color: var(--brand-white); }
body:has(.content) :where(.box-label, .seo-label) { color: var(--brand-blue); }

body:has(.content) :where(.article-cta, .cta-block) {
  background: var(--brand-blue-pale);
  border: 1px solid rgba(11, 99, 229, .18);
  border-radius: 14px;
}

body:has(.content) :where(.article-cta h2, .cta-block h2) {
  color: var(--brand-navy);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
}

/* Standalone offer, work and guidance pages */
body :where(.intro, .proof-nav, .cases, .programme, .fit, .pricing) { border-color: var(--brand-border); }
body :where(.case, .proof-card, .price-card, .programme-card) {
  border-color: var(--brand-border);
  border-radius: 12px;
}

body :where(.facts span, .capability-list li) {
  background: var(--brand-blue-pale);
  color: var(--brand-navy);
}

@media (max-width: 700px) {
  body :where(.brand, .nav-name) { font-size: 14px; }
  body :where(.btn, .button, .nav-cta, .nav-links .nav-cta, .nav-links .btn, a.button) {
    font-size: 13px;
    min-height: 42px;
    padding: 10px 16px;
  }

  body:has(.hero-grid) .hero { padding: 46px 0 44px; }
  body:has(.hero-grid) .hero h1 {
    font-size: clamp(38px, 11.2vw, 44px);
    line-height: 1.04;
    margin-top: 14px;
  }
  body:has(.hero-grid) .hero .eyebrow { font-size: 9px; line-height: 1.55; max-width: 310px; }
  body:has(.hero-grid) .hero-copy > p { font-size: 17px; line-height: 1.6; margin-top: 20px; }
  body:has(.hero-grid) .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
  }
  body:has(.hero-grid) .hero-actions .btn { width: 100%; }
  body:has(.hero-grid) .hero-link { padding: 8px 2px 0; text-align: center; }

  body :where(.article-shell, main:has(.back-link)) {
    padding-top: 48px;
    width: calc(100% - 34px);
  }

  body:has(.content) :where(.content p, .content li) { font-size: 17px; }
  body:has(.content) :where(.dek, .seo-dek) { font-size: 18px; }
  body:has(.content) :where(.content blockquote) { font-size: 21px; }
}