/*
 * B2B Engine design tokens.
 * Source of truth for colour and spacing values used in custom blocks and inline styles.
 * Brand colours: Brand Guidelines PDF page 1, 2026.
 * Primary font: Open Sans (matches current b2b-engine.com).
 */

/* Self-hosted variable fonts (one woff2 each covers all weights). Preloaded in
   the head, so Outfit is ready at first paint and always renders. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback for Outfit, so any pre-load moment does not shift
   layout. Overrides computed from Outfit's real metrics (1000 upm, ascent
   1000, descent -260, avgCharWidth 561) against Arial. */
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial');
  ascent-override: 78.68%;
  descent-override: 20.46%;
  line-gap-override: 0%;
  size-adjust: 127.09%;
}

html, body {
  background-color: #2D3142;
  /* Warm fixed ambience: a soft orange glow top-right and a cool slate glow
     left, pinned to the viewport. The bg canvas (now transparent) drifts its
     flares over this. Reduced-motion users keep this static glow as the bg. */
  background-image:
    radial-gradient(820px 520px at 78% -8%, rgba(239, 131, 84, 0.20), transparent 60%),
    radial-gradient(720px 600px at 6% 16%, rgba(79, 93, 117, 0.22), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 300;
}

/* Site-wide weight rule: orange text is bold, everything else regular or lighter. */
/* Site-wide: everything light by default. Orange is the only thing that is bold. */
h1, h2, h3, h4, h5, h6, p, li, span, a, div { font-weight: 300 !important; }

/* Orange wins (rule appears last so equal-specificity selectors prefer this one). */
[style*="#EF8354"],
[style*="#ef8354"],
strong[style*="#EF8354"],
strong[style*="#ef8354"],
.has-orange-color {
  font-weight: 700 !important;
}

/* Buttons are always bold for legibility. */
.wp-block-button__link,
.wp-element-button,
button,
a.wp-block-button__link {
  font-weight: 700 !important;
}

/* Case-study logo card: hero navy->orange gradient with the client logo in white. */
.b2b-logo-card {
  border-radius: 2rem;
  background: linear-gradient(120deg, #2D3142 0%, #2D3142 24%, #514455 46%, #8a553f 68%, #c4623a 87%, #EF8354 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  overflow: hidden;
}
.b2b-logo-card img {
  width: 64%;
  max-height: 46%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* The header is a nowrap flex row, so when the nav outgrows the space the logo
   is what gets compressed, silently and all the way to zero width. Measured
   2026-09-02: between 980px and 1180px the wordmark was already being crushed,
   and the longer nav labels agreed that day widened that band to 1250px. The
   breakpoint below now matches the width the row actually needs. This rule is
   the belt to that braces: whatever happens to the nav, the logo keeps its
   size and the overflow shows up somewhere visible instead. */
.wp-block-site-logo { flex: 0 0 auto; }

/* Primary nav with Services / Use Cases hover dropdowns. */
.b2b-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.b2b-nav a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500 !important;
  white-space: nowrap;
}
.b2b-nav > .b2b-nav-item > a:hover { color: #EF8354; }
.b2b-nav-item { position: relative; }
.b2b-nav-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
.b2b-nav-trigger::after {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid #EF8354;
  border-bottom: 2px solid #EF8354;
  transform: rotate(45deg);
  margin-top: -0.18rem;
}
.b2b-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 50;
}
.b2b-nav-item:hover .b2b-dropdown,
.b2b-nav-item:focus-within .b2b-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.b2b-dropdown-panel {
  background: #2D3142;
  border: 1px solid rgba(239, 131, 84, 0.3);
  border-radius: 14px;
  padding: 0.5rem;
  min-width: 264px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
.b2b-dropdown-panel a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-weight: 400 !important;
}
.b2b-dropdown-panel a:hover { background: rgba(255, 255, 255, 0.06); color: #EF8354; }
.b2b-nav-featured {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
}
.b2b-nav-featured a strong { color: #EF8354; font-weight: 700 !important; }
.b2b-nav-featured .d-sub {
  display: block;
  font-size: 0.78rem;
  color: #BFC0C0;
  font-weight: 400 !important;
  margin-top: 0.15rem;
}
.b2b-nav-cta {
  background: #EF8354;
  color: #2D3142 !important;
  font-weight: 700 !important;
  border-radius: 9999px;
  padding: 0.7rem 1.5rem;
  transition: background 200ms ease;
}
.b2b-nav-cta:hover { background: #D87149; }

/* Hamburger toggle, hidden on desktop. */
.b2b-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1200;
}
.b2b-burger span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 220ms ease, opacity 180ms ease, background 180ms ease;
}
.b2b-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.b2b-burger.is-active span:nth-child(2) { opacity: 0; }
.b2b-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.b2b-nav-locked { overflow: hidden; }

.b2b-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 24, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
  z-index: 1050;
}
.b2b-nav-scrim.is-visible { opacity: 1; visibility: visible; }
@media (min-width: 1251px) { .b2b-nav-scrim { display: none; } }

@media (max-width: 1250px) {
  .b2b-burger { display: flex; }

  /* Desktop inline nav becomes a full-screen navy overlay panel. */
  .b2b-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: min(86vw, 380px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5.5rem 1.6rem 2.4rem;
    background: #2D3142;
    box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1100;
  }
  .b2b-nav.is-open { transform: translateX(0); }

  .b2b-nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .b2b-nav-item > a,
  .b2b-nav-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0.25rem;
    font-size: 1.05rem;
  }
  .b2b-nav-trigger::after {
    margin-top: 0;
    transition: transform 220ms ease;
  }
  .b2b-nav-item.is-expanded .b2b-nav-trigger::after { transform: rotate(225deg); }

  /* Dropdowns become inline accordions, collapsed until tapped. */
  .b2b-dropdown {
    position: static;
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
  }
  .b2b-nav-item.is-expanded .b2b-dropdown { display: block; }
  .b2b-dropdown-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 0.6rem;
  }
  .b2b-dropdown-panel a { padding: 0.65rem 0.9rem; font-size: 0.98rem; }
  .b2b-nav-featured { padding-bottom: 0.6rem; margin-bottom: 0.5rem; }

  .b2b-nav-cta {
    margin-top: 1.6rem;
    text-align: center;
    padding: 0.95rem 1.5rem;
    font-size: 1.05rem;
  }
}

/* Pixel replica of the live b2b-engine.com services-page hero.
   Values taken from computed styles on /b2b-demand-generation-agency/ (2026-06-11). */
.bre-hero {
  background: transparent;
  padding: 72px 2rem 50px;
}
.bre-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
}
.bre-hero-text { flex: 0 0 624px; max-width: 624px; }
.bre-eyebrow {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #EF8354;
  margin: 0 0 10px;
}
.bre-h1 {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: clamp(2.3rem, 4.24vw, 61px);
  font-weight: 400 !important;
  line-height: 1.0;
  color: #FFFFFF;
  margin: 0 0 1.6rem;
  letter-spacing: normal;
}
.bre-h1 span { color: #EF8354; font-weight: 400 !important; }
.bre-body {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 300 !important;
  line-height: 1.7;
  color: #FFFFFF;
  margin: 0 0 1.5rem;
  max-width: 560px;
}
.bre-price {
  font-size: 1rem;
  font-weight: 600 !important;
  color: #FFFFFF;
  margin: 0 0 2rem;
}
.bre-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.bre-btn {
  background: #EF8354;
  color: #2D3142 !important;
  font-weight: 500 !important;
  font-size: 20px;
  line-height: 34px;
  padding: 6px 24px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: background 200ms ease;
}
.bre-btn:hover { background: #D87149; }
.bre-btn-outline {
  background: transparent;
  color: #FFFFFF !important;
  border: 1.5px solid #FFFFFF;
  font-weight: 500 !important;
  font-size: 20px;
  line-height: 34px;
  padding: 4.5px 24px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
}
.bre-btn-outline:hover { background: rgba(255,255,255,0.1); }
/* Use-case visual band: large branded icon in a gradient panel. */
.uc-visual {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 2rem;
  background: linear-gradient(120deg, #2D3142 0%, #2D3142 18%, #514455 48%, #b85a37 82%, #EF8354 100%);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  padding: 3.5rem 2rem;
}
.uc-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}
.uc-visual-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: clamp(4.5rem, 13vw, 10rem);
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.uc-visual svg {
  width: 300px;
  height: 210px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
}

/* The full-width band as a rendered card (2026-08-25).
   The .uc-visual rules above draw the gradient, the dot grid and the ghost word
   in CSS, with a hand-written SVG icon on top. On demand-generation-strategy
   that whole construction is replaced by one image, because the card rendered
   by render_page_header_v1.py already carries the gradient, the frame, the grid
   and the corner registration marks, and it matches the hero exactly.
   Rendered at 3240x1140, three times the 1080x380 the band occupies. */
.uc-band {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 0 auto;
  border-radius: 0.9rem;   /* same as .bre-hero-img.is-plate img */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

/* Use-case hero, centred variants (no portrait). */
.uc-hero-c { padding: 5.5rem 2rem 4rem; text-align: center; }
.uc-hero-c.is-gradient {
  background: linear-gradient(120deg, #2D3142 0%, #2D3142 22%, #514455 46%, #8a553f 68%, #c4623a 87%, #EF8354 100%);
}
.uc-hero-c-inner { max-width: 860px; margin: 0 auto; }
.uc-badge {
  display: inline-block;
  border: 1px solid #EF8354;
  color: #EF8354;
  border-radius: 9999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 700 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.uc-hero-c.is-gradient .uc-badge { border-color: rgba(255,255,255,0.65); color: #FFFFFF; }
/* Use-case name in the hero (2026-08-25).
   Rene, on the demand generation strategy page: "when I'm on the page, I don't
   know that I'm in the demand generation strategy part, so it needs to be a
   large component of the header here." The hero carried only a generic
   "Use Case" pill, so nothing on the page said which use case.

   The offer pages already solve this with a coloured eyebrow naming the page,
   the "B2B SEO AGENCY" line above the headline. This is the same device, set
   larger because it is the thing being missed, and deliberately kept well below
   the h1's clamp(2.3rem, 4.6vw, 3.4rem) so it labels the headline rather than
   competing with it. */
.uc-c-name {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #EF8354;
  margin: 0 0 1rem;
  line-height: 1.25;
}
/* The pill sits directly above the name now, so it needs far less air. */
.uc-hero-c .uc-badge { margin-bottom: 0.9rem; }
.uc-hero-c.is-gradient .uc-c-name { color: #FFFFFF; }

.uc-c-h1 {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  font-weight: 400 !important;
  line-height: 1.08;
  color: #FFFFFF;
  margin: 0 0 1.5rem;
}
.uc-c-h1 span { color: #EF8354; font-weight: 400 !important; }
.uc-hero-c.is-gradient .uc-c-h1 span { color: #FFFFFF; font-weight: 700 !important; }
.uc-c-body {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 300 !important;
  line-height: 1.7;
  color: #FFFFFF;
  max-width: 620px;
  margin: 0 auto 1.5rem;
}
.uc-c-price { font-size: 1rem; font-weight: 600 !important; color: #FFFFFF; margin: 0 0 2rem; }
.uc-c-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.uc-btn-light {
  background: #FFFFFF;
  color: #2D3142 !important;
  font-weight: 700 !important;
  font-size: 20px;
  line-height: 34px;
  padding: 6px 24px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
}

/* Use-case hero: gradient oval panel in place of the portrait. */
.uc-hero-panel {
  flex: 0 0 396px;
  width: 396px;
  max-width: 100%;
  height: 509px;
  border-radius: 486px;
  background: linear-gradient(135deg, #2D3142 0%, #514455 44%, #c4623a 80%, #EF8354 100%);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem;
}
.uc-hero-panel .uc-panel-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin: 0 0 0.9rem;
}
.uc-hero-panel .uc-panel-name {
  color: #FFFFFF;
  font-size: 1.85rem;
  font-weight: 700 !important;
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 1100px) { .uc-hero-panel { flex-basis: 100%; margin: 0 auto; } }

.bre-hero-img { flex: 0 0 396px; }
.bre-hero-img img {
  width: 396px;
  max-width: 100%;
  height: 509px;
  object-fit: cover;
  border-radius: 486px;
  box-shadow: 0 2px 18px rgba(0,0,0,0.3);
  display: block;
}
@media (max-width: 1100px) {
  .bre-hero-inner { flex-wrap: wrap; gap: 2.5rem; }
  .bre-hero-text { flex-basis: 100%; max-width: 100%; }
  .bre-hero-img { flex-basis: 100%; }
  .bre-hero-img img { margin: 0 auto; }
}

/* About page: principle cards. */
.b2b-principle {
  border: 1px solid rgba(239, 131, 84, 0.5);
  border-radius: 1.5rem;
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.b2b-principle:last-child { margin-bottom: 0; }
.b2b-principle h3 { color: #EF8354; margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 700 !important; }
.b2b-principle p { color: #BFC0C0; margin: 0; font-size: 1rem; line-height: 1.7; }

/* Enquiry page (2026-08-25), rebuilt from research rather than restyled.

   Rene rejected two proof-led concepts. The teardowns of Refine Labs,
   Directive, Kalungi, Gripped and Velocity Partners changed the structure
   rather than the styling:

   ONE COLUMN. Both rejected versions split copy left and form right, which made
   the proof and the form compete for the same attention.

   THE BUDGET BAND IS THE ONLY WHITE LABEL on the page. Four of the five firms
   ask a qualifying question and the current form asked none. Making that one
   label white and its rule orange marks it as the real gate without adding a
   word of instruction.

   PROOF SITS BELOW, not above. Four of five carry proof on the enquiry page, so
   the direction was right; leading with it was not. */
.enq { padding: 4.5rem 2rem 4rem; }
.enq-inner { max-width: 620px; margin: 0 auto; }
.enq-eyebrow {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #EF8354;
  margin: 0 0 1.1rem;
}
.enq-h1 {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 400 !important;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 0 1rem;
}
.enq-h1 span { color: #EF8354; }
.enq-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #BFC0C0;
  margin: 0 0 2.6rem;
}
.enq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 0.9rem; }
.enq-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.enq-field.full { grid-column: span 2; }
.enq-field label {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EF8354;
}
.enq-req { color: #FFFFFF; }
.enq-form input,
.enq-form select,
.enq-form textarea {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  color: #FFFFFF;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(200, 210, 235, 0.55);
  padding: 0.5rem 0.1rem 0.55rem;
  transition: border-color 140ms ease;
}
.enq-form input::placeholder,
.enq-form textarea::placeholder { color: #8b93a8; }
/* outline:none above kills the browser ring, so this replaces it. */
.enq-form input:focus,
.enq-form select:focus,
.enq-form textarea:focus {
  border-bottom-color: #EF8354;
  border-bottom-width: 2px;
}
.enq-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.8rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23EF8354' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
}
.enq-form select option { color: #2D3142; }
.enq-form textarea {
  border: 1px solid rgba(200, 210, 235, 0.4);
  padding: 0.65rem 0.75rem;
  min-height: 96px;
  resize: vertical;
}
.enq-field.is-qualifier label { color: #FFFFFF; }
.enq-field.is-qualifier select {
  border-bottom-color: #EF8354;
  border-bottom-width: 2px;
}
.enq-form button {
  grid-column: span 2;
  margin-top: 0.7rem;
  padding: 0.95rem 1.4rem;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  background: #EF8354;
  color: #2D3142;
  cursor: pointer;
  transition: background 180ms ease;
}
.enq-form button:hover { background: #D87149; }
.enq-form button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.enq-next {
  grid-column: span 2;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #BFC0C0;
  margin: 0.4rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid #EF8354;
}
@media (max-width: 560px) {
  .enq-form { grid-template-columns: 1fr; }
  .enq-field.full,
  .enq-form button,
  .enq-next { grid-column: span 1; }
}

/* Cookie consent banner, put on brand 2026-09-02.

   The b2be-consent must-use plugin ships neutral placeholder tokens on
   purpose, so a shared component never carries one client's palette. Its own
   stylesheet says so at the top: "Override the custom properties in the
   theme's own stylesheet to put it on brand." Nobody had, so the banner ran
   on the defaults: a near-black #16161d bar and a #1b3cf5 blue Accept button,
   on a site with no blue in it anywhere. Rene spotted it on the live site.

   Palette per feedback_b2b_engine_brand_sacred: navy #2D3142, grey #BFC0C0,
   white #FFFFFF, orange #EF8354. Accept is navy text on orange and a pill,
   which is exactly the site's own primary button. Reject matches the site's
   outline button rather than the plugin's fainter default. The buttons already
   inherit the page font, so Outfit needs no override. */
:root {
  --cc-bg: #2D3142;
  --cc-text: #FFFFFF;
  --cc-muted: #BFC0C0;
  --cc-accent: #EF8354;
  --cc-accent-text: #2D3142;
  --cc-radius: 9999px;
}
.cc-banner__btn--reject { border: 1.5px solid #FFFFFF; }
.cc-banner__btn { padding: 0.7rem 1.5rem; font-weight: 700; }

/* Homepage client logo band (recovered 2026-09-02).
   The markup is a wp:html block in the homepage content. Its styles used to
   live in an inline <style> in templates/front-page.html, and the 2026-06-17
   commit that converted all fifteen pages to on-page Gutenberg carried the
   markup into the page and left the styles behind. The band has rendered as
   the eyebrow "Trusted by B2B leaders" with four zero-height boxes under it
   ever since. Rene found it on the live site on 2026-09-02.

   These rules are the last good version verbatim, from templates/front-page.html
   at c142f33, the commit before the conversion. I first rebuilt them from the
   contact page's copy and Rene said it looked very different, which it did:
   the real band is 1080 wide with an orange hairline top and bottom, equal
   cells spaced with space-around, and every mask a uniform 140x60.

   The travelling sweep animation is deliberately NOT here. Rene removed it on
   2026-06-11 in "Remove sweep animation", so restoring it would undo his own
   decision. Only Opascope keeps a per-cell override, because its mark is wide.

   .proof-logos below is the same device on the contact page, which sits in a
   column rather than across the full width. If either changes, check both. */
.combustion-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem;
  border-top: 1px solid #EF8354;
  border-bottom: 1px solid #EF8354;
}
.combustion-eyebrow {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #BFC0C0;
  margin: 1rem 0 2.5rem;
}
.combustion-track {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  padding-bottom: 1.25rem;
}
.combustion-cell {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
}
/* Logos rendered as orange via CSS mask. Background colour is exact brand orange. */
.combustion-mask {
  width: 140px;
  height: 60px;
  background-color: #EF8354;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
/* Opascope's mark is wide, 111 by 24, so it needs a horizontal container to
   read at the same visual weight as the others. */
.combustion-cell-5 .combustion-mask {
  width: 180px;
  height: 60px;
}
.combustion-text {
  font-size: 1.3rem;
  font-weight: 700 !important;
  color: #EF8354;
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .combustion-section { padding: 2rem 1rem 2.25rem; }
  .combustion-track { flex-wrap: wrap; gap: 1.25rem 1rem; padding-bottom: 1rem; }
  .combustion-cell { flex: 0 0 calc(50% - 0.5rem); min-height: 50px; }
  .combustion-cell img { max-width: 110px; }
  .combustion-text { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .combustion-track { flex-direction: column; gap: 1rem; }
  .combustion-cell { flex: 0 0 auto; width: 100%; }
}

/* Contact hero, proof-led (2026-08-25).
   Rene: lead with proof rather than a headline, then "maybe numbers down,
   proof up", then "use the style you've used on the main website... in that
   lovely orange".

   THE LOGO TREATMENT IS COPIED FROM THE HOMEPAGE, not reinvented. Each mark is
   a div filled with brand orange carrying the logo file as a CSS mask, which
   fills every logo in one colour whatever colour the source file happens to be.
   That is what makes the row read as a set instead of a pile of mismatched
   brand assets. The homepage calls the same thing .combustion-mask; the class
   is renamed here because the contact band does not marquee.

   Mask widths are set per logo in the markup, matching what the homepage does
   with its combustion-cell-N overrides. One width across marks of different
   proportions lets the wide ones dominate. */
.proof-logos {
  margin: 0 0 2rem;
  padding: 1.6rem 0 1.8rem;
  border-top: 1px solid #EF8354;
  border-bottom: 1px solid #EF8354;
}
.proof-logos-eyebrow {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #BFC0C0;
  margin: 0 0 1.5rem;
}
.proof-logo-row {
  display: flex;
  align-items: center;
  gap: 1.6rem 2.4rem;
  flex-wrap: wrap;
}
.proof-logo-mask {
  height: 40px;
  background-color: #EF8354;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: contain;
}
.proof-review { margin: 0 0 1.6rem; }
.proof-review .proof-review-quote {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
  max-width: 34em;
}
.proof-review .proof-review-by {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  color: #8b93a8;
  margin: 0;
}
/* The empty state is deliberately visible. This slot goes live on Thursday,
   and a blank space would not tell anyone that something is missing. */
.proof-review.is-empty .proof-review-note {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8b93a8;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px dashed rgba(191, 192, 192, 0.35);
  max-width: 30em;
}
.proof-rule {
  height: 1px;
  background: rgba(191, 192, 192, 0.22);
  margin: 0 0 1.5rem;
}
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.7rem 2.4rem;
  margin: 0;
}
/* White at 3.2rem read as flat, so the figures take brand orange with a short
   rule above each. The rule ties them back to the logo band directly above and
   adds weight without making the numerals bigger. */
.p-stat { border-top: 2px solid #EF8354; padding-top: 0.85rem; }
.p-num {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #EF8354;
  margin: 0;
}
.p-lab {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #BFC0C0;
  margin: 0.4rem 0 0;
}
@media (max-width: 560px) {
  .proof-grid { grid-template-columns: 1fr; gap: 1.3rem; }
  .proof-logos { gap: 1.3rem 1.5rem; }
}

/* Contact page form, embedded (2026-08-25).
   The plate-card version was built first and Rene rejected it: "forget about
   the whole design, and we just need something more laid back that is actually
   embedded on the website". He is right about why. The contact hero already
   puts copy on the left and the form on the right, so a second bordered,
   gradient-filled panel next to the headline made two competing cards on one
   screen.

   So the container goes entirely. No gradient, no frame, no grid, no corner
   marks. The form sits directly on the page's own ground and is nothing but
   labels, ruled slots and a button. The field treatment survives from the card
   version because it was never the problem: a value entered on a rule reads as
   quiet, and it belongs to the drawing language without shouting about it. */
.contact-form-wrap {
  flex: 0 0 460px;
  box-sizing: border-box;
}
.contact-form {
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.85rem;
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.cf-field label {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EF8354;
}
.cf-req { color: #FFFFFF; }
.cf-opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.66rem;
  color: #a8b0c4;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  color: #FFFFFF;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(200, 210, 235, 0.55);
  padding: 0.45rem 0.1rem 0.5rem;
  transition: border-color 140ms ease, border-width 140ms ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #8b93a8; }
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover { border-bottom-color: rgba(255, 255, 255, 0.85); }
/* outline:none above removes the browser ring, so this replaces it. Without a
   replacement there is no visible keyboard focus anywhere in the form. */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: #EF8354;
  border-bottom-width: 2px;
}
.contact-form input:user-invalid,
.contact-form select:user-invalid { border-bottom-color: #ff9b7a; }
/* A multi-line field needs a container to read as one field, so the message box
   keeps a full border while every single-line field is a ruled slot. */
.contact-form textarea {
  border: 1px solid rgba(200, 210, 235, 0.4);
  padding: 0.6rem 0.7rem;
  min-height: 96px;
  resize: vertical;
}
.contact-form textarea:focus {
  border-color: #EF8354;
  border-bottom-width: 1px;
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23EF8354' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
}
.contact-form select option { color: #2D3142; }
.contact-form .full { grid-column: span 2; }
.contact-form button {
  grid-column: span 2;
  margin-top: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid #EF8354;
  border-radius: 0;
  background: #2D3142;
  color: #EF8354;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.contact-form button:hover { background: #EF8354; color: #2D3142; }
.contact-form button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.cf-privacy {
  margin: 0.85rem 0 0;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #b6bccb;
  text-align: center;
}
.cf-privacy a { color: #FFFFFF; text-decoration: underline; }
.cf-privacy a:hover { color: #EF8354; }
/* Two columns inside a 278px card is unusable on a phone. */
@media (max-width: 560px) {
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .full,
  .contact-form button { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form button { transition: none; }
}

.contact-stars { color: #EF8354; font-size: 1.1rem; letter-spacing: 0.15em; margin: 0.5rem 0 0; }
@media (max-width: 1100px) { .contact-form-wrap { flex-basis: 100%; } }

/* Contact hero width fix (2026-08-25).
   The contact page uses the slim page-contact.html template, so its hero sits
   inside .entry-content and the nested has-global-padding rule capped it at the
   720px content measure. Inside that 720px, .bre-hero-text (624px) plus the
   60px gap plus .contact-form-wrap (460px) came to 1144px, and both were
   flex:0 0, so the form could not shrink and pushed 64px past the viewport at
   1280px and 1440px. See reference_wp_nested_global_padding_trap. */
main .entry-content > .bre-hero { width: 100%; max-width: 100%; box-sizing: border-box; }
/* Let the copy column absorb the remaining space so the form keeps its
   designed 460px. Page-id scoped, matching the existing .page-id-* rules, so
   the 624px service-page hero replica is untouched. */
.page-id-185 .bre-hero-text { flex: 1 1 auto; max-width: none; min-width: 0; }
.page-id-185 .contact-form-wrap { min-width: 0; }

/* Form submission states (shared by the contact form and the CTA forms). */
.b2b-form-status.is-success {
  max-width: 680px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.b2b-form-status-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #EF8354;
  color: #2D3142;
  font-size: 1.6rem;
  font-weight: 700;
}
.b2b-form-status-title {
  color: #2D3142;
  font-size: 1.25rem;
  font-weight: 700 !important;
  margin: 0 0 0.4rem;
}
.b2b-form-status-sub { color: #4F5D75; font-size: 1rem; margin: 0; }
.b2b-form-status.is-error {
  grid-column: span 2;
  margin: 0.6rem 0 0;
  color: #c0392b;
  font-size: 0.9rem;
  font-weight: 500;
}
.contact-form button[disabled],
.b2b-form-status ~ button[disabled] { opacity: 0.7; cursor: default; }

/* Full-bleed coloured bands butt together. The theme's default block gap adds
   a ~19px top margin between top-level sections and before the footer, which
   shows as a navy seam wherever a band edge is not navy (e.g. the gradient CTA
   meeting the footer). Remove it so the bands meet cleanly. */
main.wp-block-group > section,
main.wp-block-group + footer.wp-block-template-part,
footer.wp-block-template-part {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Knowledge Base: style the core query loop output as cards. */
.kb-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kb-query .wp-block-post {
  border: 1px solid rgba(191, 192, 192, 0.2);
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.kb-query .wp-block-post-featured-image {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.kb-query .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kb-query .wp-block-post-title {
  margin: 1.3rem 1.4rem 0.4rem;
  font-size: 1.05rem;
  font-weight: 700 !important;
  line-height: 1.3;
}
.kb-query .wp-block-post-title a { color: #FFFFFF; text-decoration: none; }
.kb-query .wp-block-post-title a:hover { color: #EF8354; }
.kb-query .wp-block-post-date {
  margin: 0 1.4rem 0.75rem;
  color: #8a8d99;
  font-size: 0.78rem;
}
.kb-query .wp-block-post-excerpt {
  margin: 0 1.4rem 1.4rem;
}
.kb-query .wp-block-post-excerpt p {
  color: #BFC0C0;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 0.75rem;
}
.kb-query .wp-block-post-excerpt__more-link {
  color: #EF8354;
  font-weight: 700 !important;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
@media (max-width: 900px) { .kb-query .wp-block-post-template { grid-template-columns: 1fr; } }

/* ---- Single blog post: meta row, table-of-contents left, article right ---- */
.post-meta { align-items: center; }
.post-meta .wp-block-post-author-name,
.post-meta .wp-block-post-author-name a { color: #FFFFFF; text-decoration: none; font-weight: 600; }
.post-meta .wp-block-post-date,
.post-meta .wp-block-post-date a { color: #BFC0C0; text-decoration: none; }
.post-meta .post-avatar { display: flex; margin: 0 0.15rem 0 0; }
.post-meta .post-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.post-updated { color: #BFC0C0; font-size: 0.95rem; }
.post-updated .post-meta-dot { margin-right: 0.75rem; }
.post-updated[hidden] { display: none; }
.post-meta-dot { color: rgba(255, 255, 255, 0.4); }
.post-rt { color: #BFC0C0; font-size: 0.95rem; }

.post-hero + section .wp-block-post-featured-image { margin: 0; }
.post-hero + section .wp-block-post-featured-image img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 1.25rem;
}

.post-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.post-toc-wrap { position: sticky; top: 5.5rem; align-self: start; }
.post-toc-label {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8C8F9A;
}
.post-toc { display: flex; flex-direction: column; }
.post-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.95rem;
  color: #BFC0C0;
  font-size: 0.9rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}
.post-toc a:hover { color: #FFFFFF; }
.post-toc a.is-active { color: #EF8354; font-weight: 600; }
.post-toc a.toc-h3 { padding-left: 1.7rem; font-size: 0.84rem; }

.post-content-wrap { color: #C8CAD0; font-size: 1.05rem; line-height: 1.85; }
.post-content-wrap > * { margin-top: 0; }
.post-content-wrap h2 {
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700 !important;
  line-height: 1.25;
  margin: 2.6rem 0 1rem;
  scroll-margin-top: 2rem;
}
.post-content-wrap h3 {
  color: #FFFFFF;
  font-size: 1.25rem;
  font-weight: 600 !important;
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 2rem;
}
.post-content-wrap p { margin: 0 0 1.25rem; }
.post-content-wrap ul,
.post-content-wrap ol { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.post-content-wrap li { margin-bottom: 0.55rem; }
.post-content-wrap a { color: #EF8354; text-decoration: underline; }
.post-content-wrap strong { color: #FFFFFF; }
.post-content-wrap img { max-width: 100%; height: auto; border-radius: 12px; }
.post-content-wrap blockquote {
  margin: 1.75rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 3px solid #EF8354;
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; gap: 1.75rem; }
  .post-toc-wrap { position: static; }
  .post-toc { border-left: 0; }
  .post-toc a { padding-left: 0; border-left: 0; }
  .post-toc a.is-active { border-left: 0; }
}

/* Search form (404 and search templates). */
.b2b-search .wp-block-search__inside-wrapper { max-width: 480px; margin: 1.6rem auto 0; gap: 0.5rem; }
.b2b-search .wp-block-search__input {
  background: #FFFFFF;
  color: #2D3142;
  border: none;
  border-radius: 9999px;
  padding: 0.85rem 1.25rem;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 0.95rem;
}
.b2b-search .wp-block-search__button {
  background: #EF8354;
  color: #2D3142;
  border: none;
  border-radius: 9999px;
  padding: 0.85rem 1.5rem;
  font-weight: 700;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  cursor: pointer;
  transition: background 200ms ease;
}
.b2b-search .wp-block-search__button:hover { background: #D87149; }

/* Query pagination (archive, search, index templates). */
.b2b-pagination { margin-top: 2.75rem; gap: 0.35rem; flex-wrap: wrap; }
.b2b-pagination .page-numbers,
.b2b-pagination a {
  color: #BFC0C0;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
}
.b2b-pagination a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
.b2b-pagination .page-numbers.current { color: #EF8354; font-weight: 700; }

/* Case study body: standfirst intro and the results stats row. */
.post-content-wrap .cs-standfirst { font-size: 1.2rem; line-height: 1.6; color: #FFFFFF; }
.cs-stats { margin: 2.5rem 0; }
.cs-stat-num { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: #EF8354; line-height: 1; }
.cs-stat-label { color: #BFC0C0; font-size: 0.95rem; margin-top: 0.4rem; }

/* ---- /case-studies/ listing page ----
   Cards for the case study index. One case study today, so each card renders
   as a feature: copy on the left, stats panel on the right. When a second
   lands, switch .cs-index-grid to two columns and the inner split can stay.
   Every column carries min-width:0 and border-box, which is the fix that
   stopped 18 pages pinning to a 466px document on 2026-08-24. */
.cs-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.cs-index-card {
  border: 1px solid rgba(191, 192, 192, 0.2);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  padding: 2.25rem 2.25rem 2rem;
  margin: 0;
  align-items: center;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.cs-index-card:hover {
  border-color: rgba(239, 131, 84, 0.45);
  background: rgba(255, 255, 255, 0.04);
}
.cs-index-card > .wp-block-column {
  min-width: 0;
  box-sizing: border-box;
}
/* WordPress's own .wp-block-columns > .wp-block-column rule sets flex:1 1 0 and
   outranks a single class, so both columns need the same specificity here or the
   copy column collapses to 131px. */
.cs-index-card > .wp-block-column.cs-index-card-body { flex: 1 1 auto; }
.cs-index-card > .wp-block-column.cs-index-card-stats { flex: 0 0 280px; }
.cs-index-eyebrow {
  color: #EF8354;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.cs-index-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.9rem;
}
.cs-index-title a { color: #FFFFFF; text-decoration: none; }
.cs-index-title a:hover { color: #EF8354; }
.cs-index-standfirst {
  color: #BFC0C0;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
}
.cs-index-more { margin: 0; }
.cs-index-more a {
  color: #EF8354;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.cs-index-more a:hover { text-decoration: underline; }
.cs-index-card > .wp-block-column.cs-index-card-stats { border-left: 1px solid rgba(191, 192, 192, 0.18); padding-left: 2.25rem; }
.cs-index-stat-num {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #EF8354;
  line-height: 1;
  margin: 0;
}
.cs-index-stat-label {
  color: #BFC0C0;
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0.3rem 0 1.4rem;
}
.cs-index-card-stats .cs-index-stat-label:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .cs-index-card { padding: 1.75rem 1.5rem; }
  .cs-index-card > .wp-block-column.cs-index-card-stats {
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid rgba(191, 192, 192, 0.18);
    padding-left: 0;
    padding-top: 1.5rem;
    margin-top: 1.75rem;
  }
}

/* Product page: numbered how-it-works steps. */
.b2b-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.b2b-step:last-child { margin-bottom: 0; }
.b2b-step-num {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 1px solid #EF8354;
  color: #EF8354;
  font-size: 1.25rem;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b2b-step-body h3 {
  color: #FFFFFF;
  margin: 0.35rem 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 700 !important;
}
.b2b-step-body p {
  color: #BFC0C0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

/* Product page: pricing cards. */
.b2b-pricing-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
  align-items: stretch;
}
.b2b-price-card {
  border-radius: 1.75rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}
.b2b-price-card-main {
  background: linear-gradient(135deg, #2D3142 0%, #363b50 55%, #3f3a44 100%);
  border: 1.5px solid #EF8354;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.b2b-price-card-alt {
  border: 1px solid rgba(191, 192, 192, 0.3);
}
.b2b-price-name {
  color: #BFC0C0;
  font-size: 0.95rem;
  font-weight: 600 !important;
  margin: 0 0 0.75rem;
}
.b2b-price-figure {
  color: #FFFFFF;
  font-size: 2.6rem;
  font-weight: 700 !important;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.b2b-price-figure span { color: #BFC0C0; font-size: 1.1rem; font-weight: 400 !important; }
.b2b-price-figure-sm {
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700 !important;
  margin: 0 0 0.75rem;
}
.b2b-price-sub {
  color: #BFC0C0;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.b2b-price-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.b2b-price-list li {
  color: #FFFFFF;
  font-size: 0.98rem;
  padding: 0.45rem 0 0.45rem 1.6rem;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.b2b-price-list li:first-child { border-top: none; }
.b2b-price-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #EF8354;
}
.b2b-price-cta {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  background: #EF8354;
  color: #2D3142 !important;
  font-weight: 700 !important;
  border-radius: 9999px;
  padding: 0.9rem 1.5rem;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 200ms ease;
}
.b2b-price-cta:hover { background: #D87149; }
.b2b-price-cta-outline {
  background: transparent;
  color: #FFFFFF !important;
  border: 1.5px solid #FFFFFF;
}
.b2b-price-cta-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* Product page: FAQ. */
.b2b-faq { max-width: 760px; margin: 0 auto; }
.b2b-faq-item {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(191, 192, 192, 0.18);
}
.b2b-faq-item:first-child { border-top: none; padding-top: 0; }
.b2b-faq-item h3 {
  color: #FFFFFF;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700 !important;
}
.b2b-faq-item p {
  color: #BFC0C0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

@media (max-width: 781px) {
  .b2b-pricing-grid { grid-template-columns: 1fr; }
}

/* Thin orange section divider, constrained to content width. */
.b2b-divider {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2rem;
}
.b2b-divider::after {
  content: '';
  display: block;
  height: 1px;
  /* Hairline that fades out at both ends, softer than a hard rule. */
  background: linear-gradient(90deg, transparent, rgba(239, 131, 84, 0.6), transparent);
}

/* Eight-layer grid: equal tile heights via flex. */
#layers .wp-block-columns {
  align-items: stretch;
}
#layers .wp-block-column {
  display: flex;
}
#layers .wp-block-column > .wp-block-group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#c {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

#page, main, header, footer, .wp-block-group, section {
  position: relative;
  z-index: 1;
}

/* Header (and its nav dropdowns) must stack above the page content below it.
   The template-part wrapper is the outer <header>; the inner group is wp-block-group. */
header.wp-block-template-part,
header.wp-block-group { z-index: 100; }

/* Let the canvas animation show through. Sections become transparent;
   the body navy stays as a no-JS fallback. */
main section.has-navy-background-color,
main .wp-block-group.has-navy-background-color {
  background-color: transparent !important;
}

:root {
  --b2b-navy: #2D3142;
  --b2b-slate: #4F5D75;
  --b2b-grey: #BFC0C0;
  --b2b-white: #FFFFFF;
  --b2b-orange: #EF8354;

  --b2b-font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --b2b-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  --b2b-radius-pill: 9999px;
  --b2b-radius-md: 0.5rem;
  --b2b-radius-lg: 1rem;

  --b2b-shadow-md: 0 4px 12px rgba(45, 49, 66, 0.08);
  --b2b-shadow-lg: 0 12px 32px rgba(45, 49, 66, 0.12);

  --b2b-transition: 200ms ease-in-out;
}

/* About page: native-block conversion helpers (2026-06-16) */
.b2b-card { border: 1px solid #EF8354; border-radius: 1.5rem; padding: 1.75rem; }
.b2b-card h3 { color: #FFFFFF; margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 700; }
.b2b-card p { color: #BFC0C0; margin: 0; font-size: 0.95rem; line-height: 1.6; }
.b2b-sec h2 { font-weight: 300; }
.b2b-sec h2 strong { color: #EF8354; font-weight: 700; }
.b2b-cta-grad { background: linear-gradient(120deg, #2D3142 0%, #2D3142 24%, #514455 46%, #8a553f 68%, #c4623a 87%, #EF8354 100%); }
.bre-cta-btn .wp-block-button__link { background:#EF8354; color:#2D3142; font-weight:500; font-size:20px; line-height:34px; padding:6px 24px; border-radius:999px; }
.bre-cta-btn .wp-block-button__link:hover { background:#D87149; color:#2D3142; }
.bre-cta-btn-outline .wp-block-button__link { background:transparent; color:#FFFFFF; font-weight:500; font-size:20px; line-height:34px; padding:6px 24px; border-radius:999px; border:1.5px solid #FFFFFF; }
.bre-cta-btn-outline .wp-block-button__link:hover { background:rgba(255,255,255,0.1); color:#FFFFFF; }

/* Hero proof row: One retainer / Senior only / Built to ship. Each item sits
   under a thin orange rule, white value over a grey line of support. */
.bre-proof-item {
  border-top: 2px solid rgba(239, 131, 84, 0.45);
  padding-top: 1.25rem;
}
.bre-proof-v {
  letter-spacing: -0.01em;
}

/* Brand-to-revenue flow: four steps, each under an orange rule with an orange
   number. Matches the on-page card language without the busy borders. */
.bre-flow-step {
  border-top: 2px solid rgba(239, 131, 84, 0.22);
  padding-top: 1.25rem;
  height: 100%;
}
.bre-flow-step.is-active {
  border-top-color: #EF8354;
}
.bre-flow-num {
  letter-spacing: 0.02em;
}
.bre-flow .wp-block-columns { align-items: stretch; }
.bre-flow .wp-block-column { display: flex; }
.bre-flow .wp-block-column > .wp-block-group { flex: 1 1 auto; }

/* ============================================================
   ELEVATION PASS (2026-06-21): depth + motion on existing
   elements. Core layout unchanged; this only adds richness.
   ============================================================ */

/* 1. Tactile cards. The orange-outlined cards (Eight layers, the benefit
   strip, etc.) gain a faint fill and shadow, then lift and glow on hover. */
main .wp-block-group.has-border-color {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

/* Custom spring cursor: an orange ring that trails the mouse and swells over
   interactive elements. The native cursor stays for usability. */
/* Removed 2026-08-04. The ring read as a stray glow sitting over the CTAs.
   signature.js is no longer enqueued; this rule is kept out to match. */
.b2b-cursor { display: none !important; }

/* Hero H1: the strong span carries the differentiator, so it takes brand orange
   at full weight, matching the h2 treatment in .b2b-sec. Added 2026-08-04. */
.bre-hero h1 strong,
.bre-hero .wp-block-heading strong {
  color: #EF8354;
  font-weight: 700;
}
main .wp-block-group.has-border-color:hover {
  transform: translateY(-5px);
  border-color: #EF8354 !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.32);
}
/* The flow steps lift too, on their top rule. */
main .bre-flow-step { transition: transform 0.25s ease, border-color 0.25s ease; }
main .bre-flow-step:hover { transform: translateY(-4px); border-top-color: #EF8354; }

/* 2. Scroll-reveal. JS adds .b2b-anim to <html> and .b2b-reveal to blocks,
   then .b2b-in when they enter the viewport. No JS or reduced-motion = no hide. */
.b2b-anim .b2b-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.b2b-anim .b2b-reveal.b2b-in {
  opacity: 1;
  transform: none;
}

/* 3. Hero richness. Glow ring behind the portrait, a slow float, gentle pulse.
   Scoped to .bre-hero so the second portrait further down is untouched. */
.bre-hero .wp-block-image { position: relative; animation: bre-float 7s ease-in-out infinite; }
.bre-hero .wp-block-image::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 48%;
  width: 92%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(239, 131, 84, 0.50), transparent 60%);
  filter: blur(28px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: bre-glow-pulse 6s ease-in-out infinite;
}
.bre-hero .wp-block-image img { position: relative; z-index: 1; }
@keyframes bre-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bre-glow-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bre-hero .wp-block-image,
  .bre-hero .wp-block-image::before { animation: none; }
}

/* 4. Button polish: a small lift and glow on the primary and outline CTAs. */
.bre-cta-btn .wp-block-button__link,
.bre-cta-btn-outline .wp-block-button__link { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; }
.bre-cta-btn .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(239, 131, 84, 0.32); }
.bre-cta-btn-outline .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 255, 255, 0.12); }

/* ============================================================
   ELEVATION ROUND 2 (2026-06-21): variety, type scale, icons,
   credibility. Breaks the uniform-navy feel.
   ============================================================ */

/* Bigger, bolder section titles. Centred section H2s scale up the most;
   the two-column section H2s scale a touch less so they do not overflow. */
main section > h2.wp-block-heading {
  font-size: clamp(2.1rem, 3.6vw, 3.3rem) !important;
  letter-spacing: -0.025em;
}
main section .wp-block-column h2.wp-block-heading {
  font-size: clamp(1.85rem, 2.9vw, 2.7rem) !important;
  letter-spacing: -0.02em;
}

/* Faint tonal band on the Eight Layers centrepiece, to break the flat navy. */
main section#layers.has-navy-background-color {
  background: rgba(255, 255, 255, 0.025) !important;
}

/* Custom layer icons: an orange line icon in a soft rounded square per card. */
.bre-ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(239, 131, 84, 0.12);
  display: flex; align-items: center; justify-content: center;
  color: #EF8354; margin-bottom: 1rem;
}
.bre-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Centred variant for centre-aligned cards (benefit pills). */
.bre-ico.is-center { width: 40px; height: 40px; margin: 0 auto 0.75rem; }
.bre-ico.is-center svg { width: 21px; height: 21px; }

/* Lighter inset panel, used for the stats band, for tonal variety. */
.bre-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
}

/* Stats band: oversized orange numbers over a grey label. */
.bre-stat .v { font-size: clamp(1.9rem, 3.2vw, 2.85rem); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }

/* ------------------------------------------------------------
   STATS BAND REBUILD (2026-08-24)
   Rene: "this design is flat and boring... the left side is
   missing parts, since there is not a lot there."
   Two separate causes, both measured at 1440px before changing
   anything.

   1. The columns were capped at 154px each and spanned 710px
      inside a 1064px panel, leaving 177px of dead panel on each
      side. .bre-panel is a constrained-layout group, so the
      columns block inside it was being held to the 720px content
      measure while the panel itself is 1080px. Same trap as the
      Knowledge Base card grid. Releasing it takes each cell from
      154px to about 222px, which is what puts content where the
      empty space was.

   2. The labels run 1, 1, 2 and 3 lines, so the bottoms were
      ragged by 50px. Centred text on top of that gave every cell
      a different silhouette and the short left-hand cells read as
      unfinished.

   The fix follows the design system rather than inventing a
   treatment. Body copy is left-aligned, never centred. Body text
   on a dark surface is pure white, not the mute grey, which is
   specified for light surfaces. The number takes the extra-bold
   800 of a highlight phrase against the medium-weight label, so
   the weight contrast does the work that size alone was doing.

   A hairline rule sits between the number and the label. Every
   number is a single line, so the rule falls at the same height
   in all four cells and gives the sparse left-hand cells a
   structure the long right-hand one already had. Ragged bottoms
   are left alone: an uneven bottom edge reads as copy of
   different lengths, an uneven top edge reads as broken.
   Gaps above and below the rule are equal, per the stat-card
   symmetry rule.

   No vertical dividers between cells. A side rule is banned on
   every B2B Engine surface.
   ------------------------------------------------------------ */
.bre-stats .bre-panel .wp-block-columns {
  max-width: 100%;
  width: 100%;
}

.bre-stat {
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bre-stat .v {
  /* The block markup sets font-weight inline, so this needs the override. */
  font-weight: 800 !important;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 0.8rem !important;
}

.bre-stat .k {
  color: #FFFFFF;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0 !important;
}

/* Stacked two-up on tablet and one-up on phones, where four cells of this
   type would each be too narrow to keep a label on two lines.
   The two-up boundary is 1000px, not 900px. Measured 2026-08-24: at 901px the
   four-across row gave each cell 162px, against 356px one pixel below the
   breakpoint, so the labels went from two lines to four across a single pixel
   of viewport. Holding two-up to 1000px keeps the narrowest four-across cell
   at about 190px. */
@media (max-width: 1000px) {
  .bre-stats .bre-panel .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 2rem;
  }
  .bre-stats .bre-panel .wp-block-column {
    flex-basis: calc(50% - 1rem) !important;
  }
}

@media (max-width: 560px) {
  .bre-stats .bre-panel .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Testimonial cards: scaffold now, real quotes drop in later. */
.bre-quote {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bre-quote:hover { transform: translateY(-5px); border-color: rgba(239, 131, 84, 0.5); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3); }
.bre-quote .mark { color: #EF8354; font-size: 2.6rem; line-height: 0.5; display: block; margin-bottom: 0.5rem; }
.bre-testi .wp-block-columns { align-items: stretch; }
.bre-testi .wp-block-column { display: flex; }
.bre-testi .wp-block-column > .wp-block-group { flex: 1 1 auto; }

/* ============================================================
   TECHY PASS (2026-06-21): ambient, alive, not drawn. A faint
   dot-grid that fades behind the hero, glass on the stats panel,
   and counting numbers. No rules or rails. Brand untouched.
   ============================================================ */

/* Ambient dot-grid: data texture, strongest near the top, faded out below. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 85% 50% at 50% 2%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 85% 50% at 50% 2%, #000 0%, transparent 70%);
}

/* Frosted-glass stats panel: blurs the dot-grid and glow behind it. */
.bre-panel {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 24px 60px rgba(0, 0, 0, 0.30);
}

/* ============================================================
   MOTION LAYER (2026-06-21): noticeably more animation, kept
   cheap. Only transform/opacity/filter (GPU-composited), all
   one-shot reveals unobserve, continuous bits are few and small,
   and everything stops under prefers-reduced-motion. No CLS:
   nothing animates layout properties, so PageSpeed/SEO are safe.
   ============================================================ */

/* 1. Stronger scroll-reveal: more travel and a slight scale, so the motion
   actually registers as you scroll. Still transform/opacity only. */
.b2b-anim .b2b-reveal {
  transform: translateY(34px) scale(0.985);
  transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.16, 0.8, 0.3, 1);
}
.b2b-anim .b2b-reveal.b2b-in { transform: none; }

/* 2. Icon line-draw: the card icons draw themselves in when the card reveals.
   The reveal class is added by reveal.js, and it lands on whichever element
   that script decided to observe. On the homepage service cards that is the
   wp-block-column, NOT the .has-border-color card inside it, so the old
   selector .has-border-color.b2b-in never matched. The dash still applied,
   which pushed a 50-unit path 600 units out of view, so every icon on the
   homepage rendered as an empty box. Found live 2026-09-02 by reading the
   computed stroke-dashoffset rather than the stylesheet.

   Matching on any revealed ancestor fixes it and cannot regress the same way:
   whatever element reveal.js chooses, the icon inside it draws. */
.b2b-anim .bre-ico svg { stroke-dasharray: 600; stroke-dashoffset: 600; }
.b2b-anim .b2b-in .bre-ico svg { animation: bre-draw 1s ease 0.2s forwards; }

/* Fail safe. If nothing ever reveals, the icons must still be visible: an
   invisible icon is worse than an un-animated one. */
.b2b-anim .bre-ico svg { animation: bre-draw 1s ease 1.5s forwards; }
@keyframes bre-draw { to { stroke-dashoffset: 0; } }
/* Icon reacts to hover too. */
.bre-ico { transition: transform 0.25s ease; }
.wp-block-group.has-border-color:hover .bre-ico { transform: rotate(-6deg) scale(1.06); }

/* Honour reduced-motion: disable the icon draw. One-shot reveals are already
   disabled by reveal.js when reduced-motion is set. */
@media (prefers-reduced-motion: reduce) {
  .b2b-anim .b2b-in .bre-ico svg { animation: none; }
  .b2b-anim .bre-ico svg { animation: none; stroke-dashoffset: 0; }
}
/* ---------------------------------------------------------------------------
   Knowledge Base article figures, added 2026-08-20.

   The drawing plates placed inside the ten posts.

   The caption was the real defect: it inherited rgb(85, 85, 85), which is
   near black on the navy and effectively invisible. Measured on the live
   staging page, not guessed. It now uses the grey token.

   The plate renders at 720px, which is the article measure set by
   contentSize in theme.json. It is not widened here. The wrapper around it is
   794px, so 74px is the entire available gain, and taking it needs a negative
   margin that fights the constrained layout on every breakpoint. Not worth it.
   If the plates need to be read larger, the answer is fewer elements and
   bigger type in the render, or a click through to the full 1600px file.
   --------------------------------------------------------------------------- */
.post-content-wrap .kb-figure {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.post-content-wrap .kb-figure img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  display: block;
}

/* ---------------------------------------------------------------------------
   Knowledge Base cover aspect, 2026-08-20.

   The post hero slot is 1080x440 with object-fit cover. The listing card was
   16/10. One master could not satisfy both, so the covers were losing their
   top and bottom on the post and keeping them on the listing, which read as an
   image cut off rather than as a drawing plate.

   Covers are now drawn at 1600x652, which is 1080x440 exactly. This puts the
   card on the same ratio so neither slot crops anything.
   --------------------------------------------------------------------------- */
.kb-query .wp-block-post-featured-image {
  aspect-ratio: 1600 / 652;
}

/* ---------------------------------------------------------------------------
   Offer-page hero plate, 2026-08-20. ONE PAGE ONLY.

   The duotone photograph trial was rejected on sight, Rene: "looks like an
   obituary", and the renderer stays at render_hero_duotone_v1.py only as the
   record of what was tried. This is the other route: the photograph is
   replaced by a patent plate carrying the same gradient as the blog covers.

   Scoped to page 238847, B2B Database Activation. The other twelve pages keep
   their photographs until Rene rules on the swap. The ellipse has to go here,
   because the plate carries its own frame and corner registration marks and a
   486px radius cuts them off.
   --------------------------------------------------------------------------- */
/* 2026-08-24: 238798, Marketing Operations, is the second page to carry a
   plate instead of a photograph. Its hero had no image column at all, which is
   why Rene flagged it as looking unlike any other page.
   This list grows by one page id per swap. If the plate goes across every offer
   page, replace the id list with a class on the figure, because a rule carrying
   seventeen page ids is a rule nobody will maintain. */
/* 2026-08-25: the page-id list is retired, as the note above asked for. The
   plate now sits on thirteen pages, so the figure carries an `is-plate` class
   and the rule keys off that. 238847 and 238798 were converted to the class at
   the same time, so nothing depends on a page id any more. */
.bre-hero-img.is-plate img {
  border-radius: 0.9rem;   /* not the 486px oval, which cuts the plate's frame */
  object-fit: contain;
  height: auto;
  max-height: 509px;
}

/* The card grid sat 180px in from the page headline, because the .kb-query
   group is a constrained layout and its children were being capped at the
   720px content measure while the group itself is 1080px. The grid now takes
   the group's full width, so its left edge lines up with the h1, and each card
   goes from 222px to about 344px, which is what enlarges the cover on it. */
.kb-query > .wp-block-query,
.kb-query .wp-block-post-template {
  max-width: 100%;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Article body, 2026-08-20. Rene's two calls after reading a post on staging.

   Headings are orange. Level two only; level three stays white, so the two
   levels still read as different things.

   No scroll-reveal inside the article. reveal.js selects `main section
   .wp-block-heading` and `main section figure.wp-block-image`, which catches
   every heading and every figure in the body, so the piece animated itself in
   as you read it. The script is shared with the rest of the site and is left
   alone; this overrides the hidden start state for the article column only,
   which is where the reading happens.
   --------------------------------------------------------------------------- */
.post-content-wrap h2 {
  color: var(--b2b-orange, #EF8354);
  font-size: 2rem;   /* was 1.6rem, up 25% on Rene's call */
}

.b2b-anim .post-content-wrap .b2b-reveal,
.b2b-anim .post-content-wrap .b2b-reveal.b2b-in {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

.post-content-wrap .kb-figure figcaption,
.post-content-wrap .kb-figure .wp-block-caption {
  color: var(--b2b-grey, #BFC0C0);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  margin-top: 0.85rem;
  opacity: 0.85;
}
/* ---------------------------------------------------------------------------
   Full-width plate header, 2026-08-20. ONE PAGE ONLY (238847).

   The alternative Rene asked for: take the plate card that sat in the right
   column and extrapolate it to the whole hero band.

   Built in CSS rather than rendered as one image on purpose. Baking the band
   would burn the headline, the body copy and both buttons into a picture,
   which kills the links, the text selection, the screen reader and every
   breakpoint. So the ground, the grid, the frame and the corner registration
   marks are CSS, and only the drawing is a file, as a transparent cutout.

   The ground is the site's own 120 degree ramp, stopped at 62% of its length,
   which is exactly where plate_gradient.GROUND_STRENGTH stops it on the
   covers. #7A5045 is ramp_at(0.62) computed from the same stops, so the band
   and the Knowledge Base covers end on the same colour rather than one being
   eyeballed against the other.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Blog-shaped offer header, 2026-08-20. The route Rene chose over restyling
   the whole site: copy first, then one rectangular plate with rounded corners,
   exactly as a Knowledge Base post presents its cover. The band no longer
   bleeds, so there is no hard edge against the sections below.
   1.25rem is the radius the post hero already uses.
   --------------------------------------------------------------------------- */
/* The copy came out of a 624px column into a constrained layout, which centres
   any child narrower than the container. The body paragraph keeps its 560px
   measure and goes back to flush left. The headline is capped so it wraps to
   two lines rather than running the full 1080px.

   WordPress core's constrained layout sets margin-left and margin-right to
   auto with !important, so both overrides need the same weight to win.

   A plain margin-left of 0 is wrong here: it pins the block to the group's
   padding box, which is wider than the 1080px content column every other block
   is centred in, so the headline ended up 240px left of the eyebrow. The offset
   below is exactly where that column starts, and it collapses to 0 once the
   viewport is narrower than the column.

   Scoped to .bre-hero-blogshape. Rene chose the card on the right as the
   element to carry forward, so the single-column hero is not in use. These
   rules stay for the day it comes back, and the class keeps them off the
   twelve offer pages that still run the two-column hero, where an 860px cap on
   the headline would be a silent change nobody asked for. */
.bre-hero-blogshape .bre-body,
.bre-hero-blogshape .bre-h1 {
  margin-left: max(0px, calc((100% - 1080px) / 2)) !important;
  margin-right: auto !important;
}

.bre-hero-blogshape .bre-h1 {
  max-width: 860px;
}

.bre-hero .bre-hero-plate {
  margin: 2.5rem 0 0;
}

.bre-hero .bre-hero-plate img {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  display: block;
  box-shadow: none;
}

/* The theme's glow ring and float belong to the portrait that used to sit
   here. Neither suits a plate that carries its own frame. */
.bre-hero .bre-hero-plate,
.bre-hero .bre-hero-plate::before {
  animation: none;
}

.bre-hero .bre-hero-plate::before {
  display: none;
}

.bre-hero.bre-plate {
  position: relative;
  isolation: isolate;
  /* main carries 24px of global padding and this band was not breaking out of
     it, so the plate stopped 24px short on each side. Same negative margin
     WordPress core uses for a full-width block, read from the same custom
     property, rather than 100vw, which counts the scrollbar and would push a
     horizontal scroll onto the page. */
  margin-left: calc(var(--wp--style--root--padding-left, 24px) * -1);
  margin-right: calc(var(--wp--style--root--padding-right, 24px) * -1);
  background:
    /* four corner registration marks, one per corner of the frame */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 11h22M11 0v22' stroke='%23EF8354' stroke-width='1'/%3E%3C/svg%3E") 21px 21px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 11h22M11 0v22' stroke='%23EF8354' stroke-width='1'/%3E%3C/svg%3E") right 21px top 21px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 11h22M11 0v22' stroke='%23EF8354' stroke-width='1'/%3E%3C/svg%3E") left 21px bottom 21px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 11h22M11 0v22' stroke='%23EF8354' stroke-width='1'/%3E%3C/svg%3E") right 21px bottom 21px no-repeat,
    /* the faint merged grid, at the same 42px pitch the plates use */
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 42px),
    /* the ground */
    linear-gradient(120deg, #2D3142 0%, #2D3142 39%, #514455 74%, #7A5045 100%);
  background-color: #2D3142;
}

/* The band has to butt against the header above and the next section below.
   Two separate causes, both measured: main carries a 19.2px top margin, which
   shows as a navy strip between the nav and the plate, and a 1px .b2b-divider
   sits directly after the band, which reads as a line floating under it. The
   top margin is cleared on this page only, so the site's rhythm elsewhere is
   untouched. */
.page-id-238847 main {
  margin-top: 0;
}

.bre-hero.bre-plate + .b2b-divider {
  display: none;
}

/* The frame and its inner rule. Inset so the corner marks sit on the outer
   line, exactly as they do on a rendered plate. */
.bre-hero.bre-plate::before {
  content: "";
  position: absolute;
  inset: 32px;
  border: 1px solid rgba(150, 159, 182, 0.38);
  pointer-events: none;
  z-index: 0;
}

.bre-hero.bre-plate::after {
  content: "";
  position: absolute;
  inset: 45px;
  border: 1px solid rgba(58, 65, 87, 0.9);
  pointer-events: none;
  z-index: 0;
}

.bre-hero.bre-plate > * {
  position: relative;
  z-index: 1;
}

/* The theme puts a blurred, pulsing orange glow ring behind the hero image and
   floats it up and down. An opaque photograph covered both. A transparent
   drawing shows the glow straight through, as a warm rectangle the size of the
   image box, and floats inside a frame that does not move. Both come off. */
.bre-hero.bre-plate .wp-block-image {
  animation: none;
}

.bre-hero.bre-plate .wp-block-image::before {
  display: none;
}

/* The drawing is a cutout with its own alpha, so the ground shows through it.
   No frame and no shadow of its own, because the band now carries the frame
   and a cutout has no edge for a shadow to fall from. */
.bre-hero.bre-plate .bre-hero-img img {
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  width: auto;
  max-width: 100%;
  max-height: 460px;
  margin-left: auto;
  display: block;
}

@media (max-width: 900px) {
  .bre-hero.bre-plate::before { inset: 18px; }
  .bre-hero.bre-plate::after { inset: 28px; }
  .bre-hero.bre-plate .bre-hero-img img { max-height: 300px; margin: 0 auto; }
}
/* ============================================================
   MOBILE OVERFLOW FIX (2026-08-23)
   The final-CTA section's form is inline-styled in page content
   (a 2-column grid, generated by the site-rebuild scripts). Its
   inputs declare padding but no width, min-width or box-sizing,
   so two defaults compounded:
     - grid items default to min-width:auto, so an input cannot
       shrink below its intrinsic size (default size=20, ~177px);
     - box-sizing defaults to content-box, so the 1rem side
       padding added another 32px on top.
   Two such columns plus the section's 2rem padding pinned the
   document to 466px on every page carrying this section, which
   is 18 of 22. The page then scrolled sideways and the alignfull
   coloured sections stopped short of the document width, leaving
   dark gutters down both edges.
   Fixed here rather than in the page content so one rule covers
   every page and survives the next content regeneration.
   .contact-form (the Contact page) is excluded: it is class-based,
   already styled above, and already renders correctly.
   ============================================================ */
form[action="/contact"]:not(.contact-form) {
  width: 100%;
  box-sizing: border-box;
}
form[action="/contact"]:not(.contact-form) input,
form[action="/contact"]:not(.contact-form) button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
form[action="/contact"]:not(.contact-form) input {
  width: 100%;
}

/* Below 600px two name columns leave ~148px each, which crowds the
   placeholders, so stack the form. The inline grid declarations need
   !important to be overridden. */
@media (max-width: 600px) {
  form[action="/contact"]:not(.contact-form) {
    grid-template-columns: 1fr !important;
  }
  form[action="/contact"]:not(.contact-form) input,
  form[action="/contact"]:not(.contact-form) button {
    grid-column: span 1 !important;
  }
}

/* ------------------------------------------------------------
   ALIGNFULL BREAKOUT (2026-08-23, unscoped 2026-08-24)
   The page templates nest two global-padding groups: the <main>
   wp:group and the wp:post-content inside it. WordPress handles
   that nesting by zeroing the inner element's padding AND zeroing
   the negative margins on its alignfull children, on the
   assumption that the outer element supplies the gutter. The
   result is that no alignfull section can escape <main>'s 24px,
   so "full width" sections stop 24px short on both edges.
   Mostly invisible, because nearly every section is navy on a
   navy body. It shows on the one or two sections per page that
   carry their own background, above all the gradient final
   call-to-action band, which sits directly above a footer that
   IS edge to edge.
   First shipped 2026-08-23 scoped to max-width 980px, because
   lifting the inset at desktop widths restyles every page and
   that was Rene's call to make. He called it on 2026-08-24 off
   a desktop screenshot of the band still sitting inside its
   gutters, so the media query is gone and this now applies at
   every width.
   ------------------------------------------------------------ */
main .entry-content > .alignfull {
  margin-left: calc(var(--wp--style--root--padding-left, 24px) * -1);
  margin-right: calc(var(--wp--style--root--padding-right, 24px) * -1);
}

/* Footer link columns. Converted from br-separated paragraphs on 2026-08-26:
   a long label wrapped and read as two separate links, which got worse once
   the Use Cases column was added. List items with real spacing keep a wrapped
   label readable as one entry whatever it is later renamed to. */
.b2b-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.b2b-footer-links li {
  margin: 0 0 0.55rem;
  line-height: 1.35;
}
.b2b-footer-links li:last-child { margin-bottom: 0; }

/* Closing call-to-action form, rebuilt 2026-08-26.
   The old version carried three faults on all 27 pages using it: fields
   labelled only by a placeholder, which disappears the moment anyone types
   and is invisible to a screen reader; outline:none with nothing replacing
   it, so keyboard users could not see where they were; and every rule
   written inline, so a change meant editing 27 pages.

   Modelled on .enq-form from the enquiry page, adapted for the gradient
   ground the closing block sits on: solid white fields rather than the
   underline treatment, because a hairline underline disappears against the
   orange half of the gradient. */
.b2b-cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 0.9rem;
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}
.b2b-cta-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.b2b-cta-field.full { grid-column: span 2; }
.b2b-cta-field label {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}
/* The required mark has to read on both halves of the gradient. Navy vanishes
   on the navy end and orange vanishes on the orange end, so neither brand
   colour works here. A translucent white sits below the label without
   disappearing at either end. */
.b2b-cta-req { color: rgba(255, 255, 255, 0.8); }
.b2b-cta-form input {
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  color: #2D3142;
  background: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 50px;
  padding: 0.9rem 1rem;
  transition: border-color 140ms ease;
}
.b2b-cta-form input::placeholder { color: #6B7280; }
.b2b-cta-form input:focus-visible {
  outline: 3px solid #2D3142;
  outline-offset: 2px;
  border-color: #2D3142;
}
.b2b-cta-form button {
  grid-column: span 2;
  justify-self: center;
  margin-top: 0.75rem;
  padding: 0.95rem 2.5rem;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid #FFFFFF;
  border-radius: 50px;
  background: #2D3142;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 180ms ease;
}
.b2b-cta-form button:hover { background: #1f2231; }
.b2b-cta-form button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 560px) {
  .b2b-cta-form { grid-template-columns: 1fr; }
  .b2b-cta-field.full,
  .b2b-cta-form button { grid-column: span 1; }
}