/**
 * Bridge Engineering Design System v2 foundation.
 * Tokens are deliberately isolated from legacy page styles so existing pages
 * remain stable while new sections migrate component by component.
 */
:root {
  --be-colour-ink: #111111;
  --be-colour-ink-soft: #353535;
  --be-colour-muted: #626262;
  --be-colour-line: #d9d9d9;
  --be-colour-surface: #ffffff;
  --be-colour-surface-alt: #f4f4f4;
  --be-colour-focus: #005fcc;
  --be-font-sans: Aptos, Calibri, Arial, sans-serif;
  --be-size-xs: .75rem;
  --be-size-sm: .875rem;
  --be-size-md: 1rem;
  --be-size-lg: 1.25rem;
  --be-size-xl: clamp(1.5rem, 2.5vw, 2rem);
  --be-size-2xl: clamp(2rem, 4vw, 3.5rem);
  --be-space-1: .5rem;
  --be-space-2: 1rem;
  --be-space-3: 1.5rem;
  --be-space-4: 2rem;
  --be-space-5: 3rem;
  --be-space-6: 4rem;
  --be-radius-sm: 4px;
  --be-radius-md: 10px;
  --be-shadow-card: 0 10px 30px rgba(0,0,0,.08);
  --be-content-width: 1180px;
  --be-transition: 180ms ease;
}

.be-container { width: min(calc(100% - 2rem), var(--be-content-width)); margin-inline: auto; }
.be-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.be-section--alt { background: var(--be-colour-surface-alt); }
.be-stack > * + * { margin-top: var(--be-stack-space, var(--be-space-2)); }
.be-cluster { display: flex; flex-wrap: wrap; gap: var(--be-cluster-gap, var(--be-space-2)); align-items: center; }
.be-grid { display: grid; gap: var(--be-grid-gap, var(--be-space-3)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.be-eyebrow { margin: 0 0 .65rem; font-size: var(--be-size-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.be-lead { max-width: 70ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--be-colour-ink-soft); }
.be-heading { margin: 0; font-family: var(--be-font-sans); line-height: 1.08; letter-spacing: -.025em; }
.be-heading--display { font-size: var(--be-size-2xl); }
.be-heading--section { font-size: var(--be-size-xl); }
.be-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid var(--be-colour-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }