/* ==========================================================================
   BGprod design system — WordPress build
   Ported from the Next.js site's Tailwind theme to plain CSS so it works
   under any WordPress theme. Every class is namespaced `bgp-` and every rule
   also targets the element Elementor renders inside the widget wrapper, so
   putting `bgp-h1` in a heading widget's CSS Classes field is enough.

   Brand DNA carried forward from bgprod.ca:
     mint  #71F9A7  — the signature Boisvert-Gayle green (hero field colour)
     acid  #F8F563  — the secondary yellow used as a punctuation accent
     ink   #000000  — the site has always been black-on-colour, high contrast
   ========================================================================== */

:root {
  --bgp-mint: #71f9a7;
  --bgp-mint-bright: #8dffbb;
  --bgp-mint-deep: #35d97a;
  --bgp-mint-shadow: #17a45c;
  --bgp-acid: #f8f563;

  --bgp-forest: #0e2a1b;
  --bgp-forest-deep: #071410;

  --bgp-ink: #000000;
  --bgp-offblack: #0a0b0a;
  --bgp-carbon: #131513;
  --bgp-graphite: #1d201d;
  --bgp-slate: #6b706c;
  --bgp-ash: #9ba09c;
  --bgp-line: #e3e2dc;
  --bgp-offwhite: #f2f1ec;
  --bgp-warmwhite: #faf9f5;

  --bgp-display: "Poppins", system-ui, sans-serif;
  --bgp-sans: "Inter", system-ui, sans-serif;
  --bgp-mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;

  --bgp-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --bgp-shell: 100rem;
  --bgp-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chinese has no Latin display faces to fall back on, and the tight negative
   tracking that makes the Latin headlines work would crush the characters. */
html[lang^="zh"] {
  --bgp-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bgp-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[lang^="zh"] .bgp-hero,
html[lang^="zh"] .bgp-hero .elementor-heading-title,
html[lang^="zh"] .bgp-h1,
html[lang^="zh"] .bgp-h1 .elementor-heading-title,
html[lang^="zh"] .bgp-h2,
html[lang^="zh"] .bgp-h2 .elementor-heading-title {
  letter-spacing: -0.01em;
  line-height: 1.12;
}
html[lang^="zh"] .bgp-h3,
html[lang^="zh"] .bgp-h3 .elementor-heading-title,
html[lang^="zh"] .bgp-h4,
html[lang^="zh"] .bgp-h4 .elementor-heading-title {
  letter-spacing: 0;
  line-height: 1.35;
}
html[lang^="zh"] .bgp-body,
html[lang^="zh"] .bgp-lede {
  letter-spacing: 0;
  line-height: 1.85;
}
html[lang^="zh"] .bgp-label {
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Typographic scale — display type is the primary design material here.
   ========================================================================== */

body .bgp-hero,
body .bgp-hero .elementor-heading-title {
  font-family: var(--bgp-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 8.2vw, 8.75rem);
  line-height: 0.9;
  letter-spacing: -0.042em;
  text-wrap: balance;
  margin: 0;
}

body .bgp-h1,
body .bgp-h1 .elementor-heading-title {
  font-family: var(--bgp-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.6vw, 5.5rem);
  line-height: 0.93;
  letter-spacing: -0.038em;
  text-wrap: balance;
  margin: 0;
}

body .bgp-h2,
body .bgp-h2 .elementor-heading-title {
  font-family: var(--bgp-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  text-wrap: balance;
  margin: 0;
}

body .bgp-h3,
body .bgp-h3 .elementor-heading-title {
  font-family: var(--bgp-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  margin: 0;
}

body .bgp-h4,
body .bgp-h4 .elementor-heading-title {
  font-family: var(--bgp-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.4vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0;
}

/* Oversized numerals for outcomes. */
body .bgp-metric,
body .bgp-metric .elementor-heading-title {
  font-family: var(--bgp-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* The technical layer: eyebrows, indices, taxonomy, diagram labels. */
body .bgp-label,
body .bgp-label .elementor-heading-title,
body .bgp-label p {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}

body .bgp-lede,
body .bgp-lede p {
  font-family: var(--bgp-sans);
  font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.011em;
}

body .bgp-body,
body .bgp-body p {
  font-family: var(--bgp-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.006em;
}
body .bgp-body p:last-child,
body .bgp-lede p:last-child {
  margin-bottom: 0;
}

body .bgp-muted,
body .bgp-muted p {
  color: var(--bgp-graphite);
}

/* ==========================================================================
   Section fields — the colour blocks the site is built out of
   ========================================================================== */

/* The gutter lives on the band itself rather than on Elementor's inner
   container: that way the padding survives whichever wrapper Elementor emits
   (classic .elementor-container, flexbox .e-con-inner, or neither). */
body .bgp-field {
  padding-block: clamp(4rem, 9vw, 9rem);
  padding-inline: var(--bgp-gutter);
}
body .bgp-field > .elementor-container,
body .bgp-field > .e-con-inner,
body .bgp-field > div {
  max-width: var(--bgp-shell);
  margin-inline: auto;
  width: 100%;
}
body .bgp-field--tight {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

body .bgp-field--mint {
  background: var(--bgp-mint);
  color: var(--bgp-ink);
}
body .bgp-field--acid {
  background: var(--bgp-acid);
  color: var(--bgp-ink);
}
body .bgp-field--warm {
  background: var(--bgp-warmwhite);
  color: var(--bgp-ink);
}
body .bgp-field--off {
  background: var(--bgp-offwhite);
  color: var(--bgp-ink);
}
body .bgp-field--ink {
  background: var(--bgp-ink);
  color: var(--bgp-warmwhite);
}
body .bgp-field--forest {
  background: var(--bgp-forest);
  color: var(--bgp-mint);
}

/* On a dark field the body copy must not stay graphite-on-black. */
body .bgp-field--ink .bgp-body,
body .bgp-field--ink .bgp-body p,
body .bgp-field--forest .bgp-body,
body .bgp-field--forest .bgp-body p,
body .bgp-field--ink .bgp-muted,
body .bgp-field--ink .bgp-muted p {
  color: var(--bgp-ash);
}
body .bgp-field--ink .bgp-label,
body .bgp-field--forest .bgp-label {
  color: var(--bgp-ash);
}
body .bgp-field--ink .bgp-rule,
body .bgp-field--forest .bgp-rule {
  border-color: #262a26;
}

/* ==========================================================================
   Buttons — every variant lands on acid-on-ink at hover, as on the live site
   ========================================================================== */

body .bgp-cta .elementor-button,
a.bgp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--bgp-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1.15rem 1.9rem;
  border: 1px solid var(--bgp-ink);
  border-radius: 0;
  background: var(--bgp-ink);
  color: var(--bgp-mint);
  text-decoration: none;
  transition: background-color 0.3s var(--bgp-expo), color 0.3s var(--bgp-expo);
}
body .bgp-cta .elementor-button:hover,
body .bgp-cta .elementor-button:focus-visible,
a.bgp-cta:hover,
a.bgp-cta:focus-visible {
  background: var(--bgp-acid);
  color: var(--bgp-ink);
  border-color: var(--bgp-ink);
}

body .bgp-cta--ghost .elementor-button,
a.bgp-cta--ghost {
  background: transparent;
  color: var(--bgp-ink);
}
body .bgp-field--ink .bgp-cta--ghost .elementor-button,
body .bgp-field--forest .bgp-cta--ghost .elementor-button {
  color: var(--bgp-warmwhite);
  border-color: var(--bgp-warmwhite);
}

body .bgp-cta--light .elementor-button {
  background: var(--bgp-warmwhite);
  color: var(--bgp-ink);
  border-color: var(--bgp-warmwhite);
}

/* ==========================================================================
   Rules, cards and grids
   ========================================================================== */

body .bgp-rule {
  border-top: 1px solid var(--bgp-line);
  height: 0;
  margin-block: 0;
}
body .bgp-rule .elementor-divider-separator {
  border-top-color: currentColor !important;
}

body .bgp-card {
  border: 1px solid var(--bgp-line);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: transparent;
  height: 100%;
}
body .bgp-card--ink {
  border-color: var(--bgp-ink);
}

body .bgp-index {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--bgp-slate);
}

/* Hairline grid used behind diagram sections. */
body .bgp-grid-field {
  background-image: linear-gradient(
      to right,
      color-mix(in srgb, currentColor 8%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px);
  background-size: 88px 88px;
}

/* Reviewer flags: content that still needs replacing before launch. */
body .bgp-flag {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--bgp-graphite);
  background: rgba(248, 245, 99, 0.18);
  border-left: 2px solid var(--bgp-acid);
  padding: 0.85rem 1.1rem;
}

/* ==========================================================================
   Client logo wall — [bgprod_logos]
   ========================================================================== */

body .bgp-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
body .bgp-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
body .bgp-logos img {
  max-width: 100%;
  height: auto;
  max-height: 54px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s var(--bgp-expo), opacity 0.3s var(--bgp-expo);
}
body .bgp-logos li:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ==========================================================================
   Team flip grid — [bgprod_team]
   Pure CSS: the card starts on a drawn lattice and turns to the portrait.
   ========================================================================== */

body .bgp-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
body .bgp-team li {
  margin: 0;
}
body .bgp-flip {
  perspective: 1200px;
  aspect-ratio: 3 / 4;
}
body .bgp-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--bgp-expo);
}
body .bgp-flip:hover .bgp-flip__inner,
body .bgp-flip:focus-within .bgp-flip__inner {
  transform: rotateY(180deg);
}
body .bgp-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
}
body .bgp-flip__face--front {
  background: var(--bgp-forest);
  color: var(--bgp-mint);
  background-image: linear-gradient(to right, rgba(113, 249, 167, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(113, 249, 167, 0.14) 1px, transparent 1px);
  background-size: 34px 34px;
}
body .bgp-flip__face--back {
  transform: rotateY(180deg);
  background: var(--bgp-carbon);
}
body .bgp-flip__face--back img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body .bgp-flip__name {
  font-family: var(--bgp-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
body .bgp-flip__role {
  font-family: var(--bgp-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.4rem;
}
body .bgp-team__meta {
  margin-top: 0.85rem;
}
body .bgp-team__meta .bgp-flip__name {
  color: var(--bgp-ink);
}
body .bgp-team__meta .bgp-flip__role {
  color: var(--bgp-slate);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body .bgp-flip__inner {
    transition: none;
  }
}

/* ==========================================================================
   Pipeline diagram — [bgprod_pipeline]
   ========================================================================== */

body .bgp-pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
body .bgp-pipeline__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 1px;
  background: linear-gradient(to right, var(--bgp-acid), var(--bgp-mint-deep));
}
body .bgp-pipeline li {
  margin: 0;
  position: relative;
  padding-top: 44px;
}
body .bgp-pipeline__dot {
  position: absolute;
  top: 18px;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1px solid var(--bgp-ink);
}
body .bgp-pipeline__no {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--bgp-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
@media (max-width: 780px) {
  body .bgp-pipeline {
    grid-template-columns: 1fr 1fr;
  }
  body .bgp-pipeline__line {
    display: none;
  }
}

/* ==========================================================================
   Wagwaan map drawer — [bgprod_map]
   ========================================================================== */

body .bgp-map-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 46px;
  height: 260px;
  background: var(--bgp-ink);
  color: var(--bgp-acid);
  border: 0;
  cursor: pointer;
  writing-mode: vertical-rl;
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--bgp-expo), color 0.3s var(--bgp-expo);
}
body .bgp-map-tab[data-ready="1"] {
  display: flex;
}
body .bgp-map-tab:hover {
  background: var(--bgp-acid);
  color: var(--bgp-ink);
}
body .bgp-map-tab__word {
  transform: rotate(180deg);
  animation: bgp-breathe 2.4s ease-in-out infinite;
}
body .bgp-map-tab svg {
  transform: rotate(180deg);
}
@keyframes bgp-breathe {
  0%,
  100% {
    transform: rotate(180deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.16);
  }
}
@media (max-width: 767px) {
  body .bgp-map-tab[data-ready="1"] {
    display: flex;
    writing-mode: horizontal-tb;
    top: auto;
    bottom: 1rem;
    left: 1rem;
    transform: none;
    width: auto;
    height: auto;
    padding: 1rem 1.25rem;
    gap: 0.6rem;
  }
  body .bgp-map-tab__word,
  body .bgp-map-tab svg {
    transform: none;
    animation: none;
  }
}

body .bgp-map-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9991;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--bgp-expo);
}
body .bgp-map-panel {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: min(96vw, 820px);
  background: var(--bgp-offwhite);
  color: var(--bgp-ink);
  z-index: 9992;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.55s var(--bgp-expo);
}
body .bgp-map[data-open="1"] .bgp-map-scrim {
  opacity: 1;
  pointer-events: auto;
}
body .bgp-map[data-open="1"] .bgp-map-panel {
  transform: translateX(0);
}

body .bgp-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
body .bgp-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
body .bgp-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
}
body .bgp-map-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: block;
}
body .bgp-map-body {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 1rem;
}
body .bgp-map-canvas {
  position: relative;
}
body .bgp-map-canvas svg.bgp-map-svg {
  width: 100%;
  height: auto;
  touch-action: none;
  user-select: none;
  outline: none;
}
body .bgp-map-zoom {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: var(--bgp-offwhite);
}
body .bgp-map-zoom button {
  width: 40px;
  height: 40px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  cursor: pointer;
  color: var(--bgp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
body .bgp-map-zoom button:first-child {
  border-top: 0;
}
body .bgp-map-zoom button:hover {
  background: var(--bgp-acid);
}
body .bgp-map-zoom button[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
body .bgp-map-hint,
body .bgp-map-count {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin: 1rem 0 0;
}
body .bgp-map-count {
  margin-top: 0.35rem;
}

body .bgp-map-city {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bgp-offwhite);
  display: none;
  flex-direction: column;
}
body .bgp-map[data-city="1"] .bgp-map-city {
  display: flex;
}
body .bgp-map-rail {
  display: flex;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* The animation lives here rather than in scrollTo's behavior option: a
     browser that ignores the option leaves the rail parked while the counter
     says it moved, whereas assigning scrollLeft always lands. */
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .bgp-map-rail::-webkit-scrollbar {
  display: none;
}
body .bgp-map-rail > li {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow-y: auto;
  padding: 1.5rem;
  margin: 0;
}
/* WordPress themes disagree about the box model, and a content-box panel is
   wider than the track it snaps inside — which leaves every snap point
   unreachable. The plugin's own components set it explicitly. */
body .bgp-field,
body .bgp-field *,
body .bgp-nav,
body .bgp-nav *,
body .bgp-map,
body .bgp-map *,
body .bgp-team,
body .bgp-team *,
body .bgp-logos,
body .bgp-logos *,
body .bgp-pipeline,
body .bgp-pipeline * {
  box-sizing: border-box;
}

/* A stretched section is already the full viewport width, so its own gutter
   has to sit inside that width or the page scrolls sideways by twice the
   gutter. Belt and braces alongside the border-box rule above. */
body .bgp-field {
  max-width: 100vw;
  overflow-x: clip;
}
body .bgp-map-steps {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
body .bgp-map-steps ol {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
body .bgp-map-steps ol button,
body .bgp-map-steps > button {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.2s;
}
body .bgp-map-steps ol button {
  width: 32px;
  height: 28px;
}
body .bgp-map-steps > button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
body .bgp-map-steps ol button[aria-current="true"] {
  background: var(--bgp-ink);
  border-color: var(--bgp-ink);
  color: var(--bgp-acid);
}
body .bgp-map-steps button:hover:not([disabled]) {
  border-color: var(--bgp-ink);
  color: var(--bgp-ink);
}
body .bgp-map-steps button[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

body .bgp-bts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
body .bgp-bts li {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bgp-forest);
  color: var(--bgp-mint);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  margin: 0;
  background-image: linear-gradient(to right, rgba(113, 249, 167, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(113, 249, 167, 0.16) 1px, transparent 1px);
  background-size: 40px 40px;
}
body .bgp-bts li img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body .bgp-bts__note {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
body .bgp-bts__name {
  font-family: var(--bgp-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

body .bgp-map-close {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--bgp-ink);
  background: transparent;
  color: var(--bgp-ink);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 0.2s;
}
body .bgp-map-close:hover {
  background: var(--bgp-acid);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

body .bgp-field :focus-visible,
body .bgp-map :focus-visible {
  outline: 3px solid var(--bgp-mint-shadow);
  outline-offset: 3px;
}
body .bgp-field--ink :focus-visible,
body .bgp-field--forest :focus-visible {
  outline-color: var(--bgp-mint);
}

@media (prefers-reduced-motion: reduce) {
  body .bgp-map-tab__word,
  body .bgp-map-panel,
  body .bgp-map-scrim,
  body .bgp-flip__inner {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  body .bgp-map-rail {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Cascade guard — keep last

   Elementor writes its Global Colours into every page's own stylesheet:
       .elementor-widget-heading .elementor-heading-title { color: ... }
   That is enqueued while the page renders, so it always loads after this file
   and no amount of ordering helps. The brand rule is that type takes the
   colour of the field it sits on, so each class states that explicitly and at
   a specificity Elementor's page CSS cannot outrank.
   ========================================================================== */

body .bgp-hero,
body .bgp-hero .elementor-heading-title,
body .bgp-h1,
body .bgp-h1 .elementor-heading-title,
body .bgp-h2,
body .bgp-h2 .elementor-heading-title,
body .bgp-h3,
body .bgp-h3 .elementor-heading-title,
body .bgp-h4,
body .bgp-h4 .elementor-heading-title,
body .bgp-metric,
body .bgp-metric .elementor-heading-title,
body .bgp-label,
body .bgp-label .elementor-heading-title,
body .bgp-label p,
body .bgp-lede,
body .bgp-lede p,
body .bgp-body,
body .bgp-body p {
  color: inherit;
}

/* Muted copy is a deliberate step down from the field colour, not inherited. */
body .bgp-muted,
body .bgp-muted p {
  color: var(--bgp-graphite);
}
body .bgp-field--ink .bgp-muted,
body .bgp-field--ink .bgp-muted p,
body .bgp-field--forest .bgp-muted,
body .bgp-field--forest .bgp-muted p,
body .bgp-field--ink .bgp-body,
body .bgp-field--ink .bgp-body p,
body .bgp-field--forest .bgp-body,
body .bgp-field--forest .bgp-body p,
body .bgp-field--ink .bgp-label,
body .bgp-field--forest .bgp-label {
  color: var(--bgp-ash);
}

/* Links follow the field but keep the underline that marks them as links. */
body .bgp-body a,
body .bgp-lede a,
body .bgp-label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
body .bgp-body a:hover,
body .bgp-lede a:hover {
  text-decoration-color: var(--bgp-mint-deep);
}

/* ==========================================================================
   Navigation

   Canvas pages carry no theme header, so this is the site's only chrome. It
   sits over the hero rather than pushing it down, matching the original.
   ========================================================================== */

body .bgp-nav {
  position: sticky;
  top: 0;
  z-index: 9980;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 1rem var(--bgp-gutter);
  background: transparent;
  mix-blend-mode: normal;
}
body .bgp-nav__skip {
  position: absolute;
  left: -9999px;
}
body .bgp-nav__skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--bgp-mint);
  color: var(--bgp-ink);
  padding: 0.75rem 1.25rem;
  font-family: var(--bgp-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body .bgp-nav__mark {
  font-family: var(--bgp-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--bgp-ink);
  text-decoration: none;
  margin-right: auto;
}
body .bgp-nav__lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body .bgp-nav__lang a {
  color: var(--bgp-ink);
  text-decoration: none;
  opacity: 0.45;
}
body .bgp-nav__lang a[aria-current="true"] {
  opacity: 1;
}
body .bgp-nav__lang a:hover {
  opacity: 1;
}
body .bgp-nav__lang span {
  opacity: 0.3;
}

/* The black tile sits between the language switcher and the CTA. */
body .bgp-nav__burger {
  width: 46px;
  height: 40px;
  border: 0;
  background: var(--bgp-ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  transition: background-color 0.3s var(--bgp-expo);
}
body .bgp-nav__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--bgp-mint);
  transition: transform 0.3s var(--bgp-expo), opacity 0.3s var(--bgp-expo);
}
body .bgp-nav__burger:hover {
  background: var(--bgp-acid);
}
body .bgp-nav__burger:hover span {
  background: var(--bgp-ink);
}
/* While the panel is open the burger has to sit above it, or the control that
   closes the menu is underneath the thing it closes. */
body .bgp-nav[data-open="1"] .bgp-nav__burger {
  position: relative;
  z-index: 9983;
  background: var(--bgp-acid);
}
body .bgp-nav[data-open="1"] .bgp-nav__burger span {
  background: var(--bgp-ink);
}
body .bgp-nav[data-open="1"] .bgp-nav__burger span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
body .bgp-nav[data-open="1"] .bgp-nav__burger span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

body .bgp-nav__cta {
  padding: 0.85rem 1.4rem;
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  body .bgp-nav__cta {
    display: none;
  }
}

/* `hidden` is a UA rule at specificity 0,1,0, so the `display: flex` below
   silently outranks it and the panel never hides — it just sits over the
   right-hand side of every page. Anything this file gives a display value to
   has to honour the attribute explicitly. */
body .bgp-nav__panel[hidden],
body .bgp-nav__scrim[hidden] {
  display: none;
}

body .bgp-nav__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9981;
}
body .bgp-nav__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 460px);
  background: var(--bgp-ink);
  color: var(--bgp-warmwhite);
  z-index: 9982;
  padding: clamp(4.5rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem) 3rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
body .bgp-nav__eyebrow {
  color: var(--bgp-ash);
}
body .bgp-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
body .bgp-nav__list a {
  display: block;
  font-family: var(--bgp-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--bgp-warmwhite);
  text-decoration: none;
  padding: 0.35rem 0;
  transition: color 0.25s var(--bgp-expo);
}
body .bgp-nav__list a:hover {
  color: var(--bgp-mint);
}
body .bgp-nav__list--minor {
  border-top: 1px solid #262a26;
  padding-top: 1.25rem;
}
body .bgp-nav__list--minor a {
  font-family: var(--bgp-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bgp-ash);
}

/* ==========================================================================
   Hero furniture — the 3D object and the strip beneath the rule
   ========================================================================== */

body .bgp-hero-object {
  position: absolute;
  right: calc(var(--bgp-gutter) * -0.3);
  bottom: 8%;
  width: clamp(220px, 34vw, 560px);
  pointer-events: none;
  z-index: 0;
}
body .bgp-hero-object img {
  width: 100%;
  height: auto;
  display: block;
}
body .bgp-field--mint {
  position: relative;
  overflow: hidden;
}
body .bgp-field--mint > * {
  position: relative;
  z-index: 1;
}

body .bgp-hero-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  justify-content: space-between;
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body .bgp-hero-strip__left {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
body .bgp-hero-strip b {
  font-family: var(--bgp-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* The word cycles the way it does on the original. */
body .bgp-rotator {
  display: inline-grid;
}
body .bgp-rotator > b {
  grid-area: 1 / 1;
  opacity: 0;
  animation: bgp-rotate 12.5s infinite;
}
@keyframes bgp-rotate {
  0%, 16% { opacity: 1; transform: translateY(0); }
  20%, 96% { opacity: 0; transform: translateY(-0.35em); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body .bgp-rotator > b {
    animation: none;
  }
  body .bgp-rotator > b:first-child {
    opacity: 1;
  }
}

/* ==========================================================================
   Client rail — a continuous scroll, as on the original, rather than a grid
   ========================================================================== */

body .bgp-rail {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body .bgp-rail__track {
  display: flex;
  width: max-content;
  animation: bgp-rail 64s linear infinite;
}
body .bgp-rail:hover .bgp-rail__track,
body .bgp-rail:focus-within .bgp-rail__track {
  animation-play-state: paused;
}
@keyframes bgp-rail {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* Inside the rail the logo list is a row, not the standalone grid. */
body .bgp-rail .bgp-logos {
  display: flex;
  grid-template-columns: none;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  padding-right: clamp(2.5rem, 5vw, 5.5rem);
  flex: 0 0 auto;
}
body .bgp-rail .bgp-logos li {
  flex: 0 0 auto;
}
body .bgp-rail .bgp-logos img {
  max-height: 46px;
}
@media (prefers-reduced-motion: reduce) {
  body .bgp-rail__track {
    animation: none;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Nav inversion over dark fields
   ========================================================================== */

body .bgp-nav[data-invert="1"] .bgp-nav__mark,
body .bgp-nav[data-invert="1"] .bgp-nav__lang a {
  color: var(--bgp-warmwhite);
}
body .bgp-nav[data-invert="1"] .bgp-nav__burger {
  background: var(--bgp-warmwhite);
}
body .bgp-nav[data-invert="1"] .bgp-nav__burger span {
  background: var(--bgp-ink);
}
body .bgp-nav[data-invert="1"] .bgp-nav__cta.bgp-cta {
  background: var(--bgp-warmwhite);
  color: var(--bgp-ink);
  border-color: var(--bgp-warmwhite);
}

/* ==========================================================================
   Section forms — matched to the reference build
   ========================================================================== */

/* The reference uses 96px bands, 80px on the two lighter listing sections,
   and opens the hero at 144 with a shorter tail. */
body .bgp-field {
  padding-block: 96px;
}
body .bgp-field--hero {
  padding-block: 144px 48px;
}
body .bgp-field--tight {
  padding-block: 40px;
}
@media (max-width: 780px) {
  body .bgp-field {
    padding-block: 64px;
  }
  body .bgp-field--hero {
    padding-block: 104px 40px;
  }
}

/* Near-black rather than pure black: the reference uses #0a0b0a for the two
   dark bands so they read as a field rather than a hole. */
body .bgp-field--offblack {
  background: var(--bgp-offblack);
  color: var(--bgp-warmwhite);
}
body .bgp-field--offblack .bgp-body,
body .bgp-field--offblack .bgp-body p,
body .bgp-field--offblack .bgp-lede,
body .bgp-field--offblack .bgp-lede p,
body .bgp-field--offblack .bgp-label,
body .bgp-field--offblack .bgp-muted,
body .bgp-field--offblack .bgp-muted p {
  color: var(--bgp-ash);
}
body .bgp-field--offblack .bgp-rows li {
  border-color: #262a26;
}

/* ---------------------------------------------------------- ruled rows ---
   01 / Name / supporting line — industries, the model, the ways in. */

body .bgp-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid currentColor;
  border-color: rgba(0, 0, 0, 0.18);
}
body .bgp-rows li {
  display: grid;
  grid-template-columns: 3.5rem minmax(9rem, 18rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  margin: 0;
}
body .bgp-rows__no {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  opacity: 0.45;
}
body .bgp-rows__name {
  font-family: var(--bgp-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
body .bgp-rows__line {
  font-family: var(--bgp-sans);
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.75;
}
@media (max-width: 780px) {
  body .bgp-rows li {
    grid-template-columns: 2.5rem 1fr;
  }
  body .bgp-rows__line {
    grid-column: 2;
  }
}

/* ------------------------------------------------------------ tag list ---
   The fourteen content formats, set as a dense typographic index. */

body .bgp-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
}
body .bgp-tags li {
  font-family: var(--bgp-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-color: rgba(0, 0, 0, 0.25);
  padding: 0.65rem 0.95rem;
  margin: 0;
}
body .bgp-field--offblack .bgp-tags li {
  border-color: #2f342f;
}

/* --------------------------------------------------------- practice grid */

body .bgp-card {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  padding: 1.75rem 0 0;
}