/* ==========================================================================
   BGMC · site.css · v1.0 · August 2026
   Components for www.bgconsult.net. Every value references bgmc-tokens.css.
   No raw hex, no raw px sizes, no raw font names appear in this file.
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-canvas);
  background: color-mix(in srgb, var(--bgmc-white) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: var(--stroke-divider) solid var(--color-divider);
}
@supports not (backdrop-filter: blur(6px)) {
  .site-header { background: var(--color-canvas); }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-block: var(--space-4);
}
.site-header__logo img { height: 56px; width: auto; display: block; }

.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-nav a {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-brand);
  padding-block: var(--space-2);
}
.site-nav a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-rule);
  text-decoration-color: var(--color-rule-accent);
  text-underline-offset: 0.35em;
}
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-rule);
  text-decoration-color: var(--color-rule-accent);
  text-underline-offset: 0.35em;
}

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: var(--section-y); }
.hero .display {
  max-width: 20ch;
  margin: 0 0 var(--space-7);
  line-height: 1.05;
}
.hero__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6) clamp(2rem, 5vw, 5.5rem);
  align-items: start;
  border-top: var(--stroke-divider) solid var(--color-divider);
  padding-top: var(--space-7);
}
.hero__statement {
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: 1.45;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading-2);
  max-width: 34ch;
  margin: 0;
  text-wrap: pretty;
}
.hero__sub { margin-bottom: var(--space-6); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* --- Interior page header: full-width, large title --- */
.page-head { padding-block: var(--section-y-tight) var(--space-8); }
.page-head h1 {
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.1;
  max-width: 22ch;
}
.page-head .lead { max-width: var(--measure-wide); }

/* --- Alternating full-bleed blocks for sector and case content --- */
.block { padding-block: var(--section-y-tight); }
.block--tinted { background: var(--color-surface-tinted); }
.block h2 { margin-top: 0; }
.block .rule--sm { width: 40px; height: var(--stroke-rule); background: var(--color-rule-accent); border: 0; margin: 0 0 var(--space-5); }

/* --- Full-bleed dark bands ------------------------------------------------ */

.band { padding-block: var(--section-y-tight); }
.band .rule { margin-bottom: var(--space-6); }

.band--pull p {
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}

/* --- Credential figures --------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-7) var(--grid-gap);
}
.figures > div {
  border-left: var(--stroke-divider) solid var(--color-divider);
  padding-left: var(--space-5);
}
.figures .figure__number { white-space: nowrap; }
.figures__foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--stroke-divider) solid var(--color-divider);
  color: var(--color-ink-secondary);
  font-size: var(--text-caption);
  max-width: none;
}

/* --- Card grid ------------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
}
@media (min-width: 1000px) {
  .card-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card-grid--five .card { grid-column: span 2; }
  .card-grid--five .card:nth-child(4),
  .card-grid--five .card:nth-child(5) { grid-column: span 3; }
}
.card h3 { margin-bottom: var(--space-3); }
.card p { max-width: none; margin-bottom: var(--space-4); }
.card__link {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Utility must win inside articles */
.article .mt-0, .mt-0 { margin-top: 0; }

/* Primary button on dark bands: navy on navy is invisible, so it inverts */
.on-dark .btn--primary { background: var(--bgmc-white); color: var(--bgmc-navy-deep); }
.on-dark .btn--primary:hover { background: var(--bgmc-navy-mist); color: var(--bgmc-navy-deep); }
.on-dark .btn--primary:active { background: var(--bgmc-navy-pale); }

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: var(--space-2);
  z-index: var(--z-overlay);
  background: var(--bgmc-navy); color: var(--bgmc-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
}
.skip-link:focus { left: var(--space-2); }

/* Tighter nav rhythm on narrow screens */
@media (max-width: 600px) {
  .site-nav { gap: var(--space-1) var(--space-4); }
}

/* --- Engagement teaser rows (homepage) --- */
.teaser-rows { border-top: var(--stroke-divider) solid var(--color-divider); }
.teaser-rows__row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--stroke-divider) solid var(--color-divider);
  font-size: var(--text-lead);
  color: var(--color-heading);
  max-width: none;
  margin: 0;
}

/* --- Long-form article ---------------------------------------------------- */

.article { padding-block: var(--section-y); }
.article h2 { margin-top: var(--space-8); }
.article h2:first-child { margin-top: 0; }
.article h3 { margin-top: var(--space-6); }

/* --- Two-column deliverables ---------------------------------------------- */

.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6) var(--grid-gap);
}
.cols-2 ul { margin: 0; padding-left: 1.2em; }
.cols-2 li { margin-bottom: var(--space-3); }

/* --- Feature block: Sprint, standalone modelling -------------------------- */

.feature {
  background: var(--color-surface-tinted);
  border-radius: var(--radius-panel);
  padding: var(--space-7) var(--space-6);
  margin-block: var(--space-8);
}
.feature h2 { margin-top: 0; }
.feature ul { padding-left: 1.2em; }
.feature li { margin-bottom: var(--space-3); }

/* --- Delivered register --------------------------------------------------- */

.register { margin-top: var(--space-8); }
.register__legend {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ink-muted);
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  max-width: var(--measure);
}
.register ul { margin: 0; padding-left: 1.2em; }
.register li { margin-bottom: var(--space-4); max-width: var(--measure); }

/* --- Scoping close --------------------------------------------------------- */

.scoping {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--stroke-divider) solid var(--color-divider);
}
.scoping p { color: var(--color-ink-secondary); }

/* --- Service index blocks -------------------------------------------------- */

.svc-block { padding-block: var(--section-y-tight); }
.svc-block h2 { margin-bottom: var(--space-4); }
.svc-block .lead { margin-bottom: var(--space-5); }

/* --- Engagement case studies ----------------------------------------------- */

.case { margin-bottom: var(--space-9); }
.case:last-child { margin-bottom: 0; }
.case h3 { margin-top: var(--space-5); }

/* --- Contact -------------------------------------------------------------- */

.flow-step { margin-bottom: var(--space-6); }
.flow-step h3 { margin-top: 0; }
.contact-block {
  background: var(--color-surface);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
  margin-block: var(--space-7);
}
.contact-block p { max-width: none; }
.contact-block a { overflow-wrap: anywhere; }

/* --- Footer ---------------------------------------------------------------- */

.site-footer { padding-block: var(--space-9) var(--space-7); }
.site-footer__logo img { height: 48px; width: auto; margin-bottom: var(--space-5); }
.site-footer__slogan {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
  max-width: 18ch;
}
.site-footer__tagline {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-7);
  max-width: none;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6) var(--grid-gap);
  padding-top: var(--space-6);
  border-top: var(--stroke-divider) solid var(--color-divider);
}
.site-footer__grid h4 {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}
.site-footer__grid p { font-size: var(--text-caption); line-height: 1.7; max-width: none; margin-bottom: var(--space-2); }
.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--stroke-divider) solid var(--color-divider);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}
.site-footer__legal p { font-size: inherit; max-width: none; margin-bottom: var(--space-2); }
.site-footer__arabic { direction: rtl; font-family: var(--font-arabic); }

/* --- Utilities -------------------------------------------------------------- */

.center { text-align: center; }
.center p, .center .display { margin-inline: auto; }