/* =====================================================================
   THE RAMP  (motif derived from the official B icon)
   The ramp is the B's middle lane (band 2 of b-icon-official-*.svg, exact
   curves) with its flat run extended into a horizontal line. A thin lane line
   follows the centre of the B's lower slot.
   Colour: ramps are ink (white in dark mode); the thin lane line is neutral
   gray everywhere EXCEPT the hero ramp under the wordmark, where it is the
   site's one rust accent.
   Decorative only: CSS backgrounds and pseudo-elements, no DOM, nothing
   announced to assistive tech.
   ===================================================================== */

/* Pre-existing layout bug: section labels inside .section-header inherited
   max-width:480px + margin:auto from styles.css, so they sat centred while the
   heading below them is left-aligned. Pin them left. */
.section-header .section-label { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

:root { --ramp-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='26' viewBox='8.01 71.17 6907.38 74.83'%3E%3Cpath d='M8.01,108.91 L22.10,94.93 C37.55,79.61 58.03,71.17 79.78,71.17 H6915.3946153846155 V96.81 H85.60 C67.51,96.81 50.48,103.83 37.64,116.57 L8.01,145.98 Z' fill='%230E0E0E'/%3E%3Cpath d='M7.31,161.35 44.91,123.97 45.80,123.11 46.66,122.31 47.53,121.52 48.42,120.76 49.32,120.01 50.23,119.29 51.15,118.58 52.09,117.90 53.03,117.23 53.99,116.59 54.96,115.97 55.94,115.36 56.93,114.78 57.93,114.22 58.94,113.68 59.96,113.16 60.99,112.66 62.03,112.18 63.08,111.73 64.13,111.29 65.20,110.88 66.27,110.48 67.36,110.11 68.45,109.76 69.54,109.43 70.65,109.13 71.76,108.84 72.88,108.58 74.01,108.34 75.14,108.12 76.28,107.93 77.43,107.76 78.58,107.60 79.73,107.48 80.90,107.37 82.07,107.29 83.24,107.23 84.42,107.20 85.65,107.19 H6915.3946153846155' fill='none' stroke='%23B3B3B3' stroke-width='6'/%3E%3C/svg%3E"); --ramp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='13' viewBox='8.01 71.17 195.71 74.83'%3E%3Cpath d='M8.01,108.91 L22.10,94.93 C37.55,79.61 58.03,71.17 79.78,71.17 H203.71923076923076 V96.81 H85.60 C67.51,96.81 50.48,103.83 37.64,116.57 L8.01,145.98 Z' fill='%230E0E0E'/%3E%3Cpath d='M7.31,161.35 44.91,123.97 45.80,123.11 46.66,122.31 47.53,121.52 48.42,120.76 49.32,120.01 50.23,119.29 51.15,118.58 52.09,117.90 53.03,117.23 53.99,116.59 54.96,115.97 55.94,115.36 56.93,114.78 57.93,114.22 58.94,113.68 59.96,113.16 60.99,112.66 62.03,112.18 63.08,111.73 64.13,111.29 65.20,110.88 66.27,110.48 67.36,110.11 68.45,109.76 69.54,109.43 70.65,109.13 71.76,108.84 72.88,108.58 74.01,108.34 75.14,108.12 76.28,107.93 77.43,107.76 78.58,107.60 79.73,107.48 80.90,107.37 82.07,107.29 83.24,107.23 84.42,107.20 85.65,107.19 H203.71923076923076' fill='none' stroke='%23B3B3B3' stroke-width='9'/%3E%3C/svg%3E"); --ramp-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='40' viewBox='8.01 71.17 4489.80 74.83'%3E%3Cpath d='M8.01,108.91 L22.10,94.93 C37.55,79.61 58.03,71.17 79.78,71.17 H4497.81 V96.81 H85.60 C67.51,96.81 50.48,103.83 37.64,116.57 L8.01,145.98 Z' fill='%230E0E0E'/%3E%3Cpath d='M7.31,161.35 44.91,123.97 45.80,123.11 46.66,122.31 47.53,121.52 48.42,120.76 49.32,120.01 50.23,119.29 51.15,118.58 52.09,117.90 53.03,117.23 53.99,116.59 54.96,115.97 55.94,115.36 56.93,114.78 57.93,114.22 58.94,113.68 59.96,113.16 60.99,112.66 62.03,112.18 63.08,111.73 64.13,111.29 65.20,110.88 66.27,110.48 67.36,110.11 68.45,109.76 69.54,109.43 70.65,109.13 71.76,108.84 72.88,108.58 74.01,108.34 75.14,108.12 76.28,107.93 77.43,107.76 78.58,107.60 79.73,107.48 80.90,107.37 82.07,107.29 83.24,107.23 84.42,107.20 85.65,107.19 H4497.81' fill='none' stroke='%23C45C2A' stroke-width='5'/%3E%3C/svg%3E"); }
[data-theme="dark"] { --ramp-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='26' viewBox='8.01 71.17 6907.38 74.83'%3E%3Cpath d='M8.01,108.91 L22.10,94.93 C37.55,79.61 58.03,71.17 79.78,71.17 H6915.3946153846155 V96.81 H85.60 C67.51,96.81 50.48,103.83 37.64,116.57 L8.01,145.98 Z' fill='%23FFFFFF'/%3E%3Cpath d='M7.31,161.35 44.91,123.97 45.80,123.11 46.66,122.31 47.53,121.52 48.42,120.76 49.32,120.01 50.23,119.29 51.15,118.58 52.09,117.90 53.03,117.23 53.99,116.59 54.96,115.97 55.94,115.36 56.93,114.78 57.93,114.22 58.94,113.68 59.96,113.16 60.99,112.66 62.03,112.18 63.08,111.73 64.13,111.29 65.20,110.88 66.27,110.48 67.36,110.11 68.45,109.76 69.54,109.43 70.65,109.13 71.76,108.84 72.88,108.58 74.01,108.34 75.14,108.12 76.28,107.93 77.43,107.76 78.58,107.60 79.73,107.48 80.90,107.37 82.07,107.29 83.24,107.23 84.42,107.20 85.65,107.19 H6915.3946153846155' fill='none' stroke='%234D4D4D' stroke-width='6'/%3E%3C/svg%3E"); --ramp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='13' viewBox='8.01 71.17 195.71 74.83'%3E%3Cpath d='M8.01,108.91 L22.10,94.93 C37.55,79.61 58.03,71.17 79.78,71.17 H203.71923076923076 V96.81 H85.60 C67.51,96.81 50.48,103.83 37.64,116.57 L8.01,145.98 Z' fill='%23FFFFFF'/%3E%3Cpath d='M7.31,161.35 44.91,123.97 45.80,123.11 46.66,122.31 47.53,121.52 48.42,120.76 49.32,120.01 50.23,119.29 51.15,118.58 52.09,117.90 53.03,117.23 53.99,116.59 54.96,115.97 55.94,115.36 56.93,114.78 57.93,114.22 58.94,113.68 59.96,113.16 60.99,112.66 62.03,112.18 63.08,111.73 64.13,111.29 65.20,110.88 66.27,110.48 67.36,110.11 68.45,109.76 69.54,109.43 70.65,109.13 71.76,108.84 72.88,108.58 74.01,108.34 75.14,108.12 76.28,107.93 77.43,107.76 78.58,107.60 79.73,107.48 80.90,107.37 82.07,107.29 83.24,107.23 84.42,107.20 85.65,107.19 H203.71923076923076' fill='none' stroke='%234D4D4D' stroke-width='9'/%3E%3C/svg%3E"); --ramp-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='40' viewBox='8.01 71.17 4489.80 74.83'%3E%3Cpath d='M8.01,108.91 L22.10,94.93 C37.55,79.61 58.03,71.17 79.78,71.17 H4497.81 V96.81 H85.60 C67.51,96.81 50.48,103.83 37.64,116.57 L8.01,145.98 Z' fill='%23FFFFFF'/%3E%3Cpath d='M7.31,161.35 44.91,123.97 45.80,123.11 46.66,122.31 47.53,121.52 48.42,120.76 49.32,120.01 50.23,119.29 51.15,118.58 52.09,117.90 53.03,117.23 53.99,116.59 54.96,115.97 55.94,115.36 56.93,114.78 57.93,114.22 58.94,113.68 59.96,113.16 60.99,112.66 62.03,112.18 63.08,111.73 64.13,111.29 65.20,110.88 66.27,110.48 67.36,110.11 68.45,109.76 69.54,109.43 70.65,109.13 71.76,108.84 72.88,108.58 74.01,108.34 75.14,108.12 76.28,107.93 77.43,107.76 78.58,107.60 79.73,107.48 80.90,107.37 82.07,107.29 83.24,107.23 84.42,107.20 85.65,107.19 H4497.81' fill='none' stroke='%23C45C2A' stroke-width='5'/%3E%3C/svg%3E"); }

/* 1. Section breaks: the 2px ink border becomes the ramp, entering from the page edge */
#proof, #services, #how, #about, #record, #consulting, #contact { border-top: 0 !important; position: relative; }
#proof::before, #services::before, #how::before, #about::before, #record::before, #consulting::before, #contact::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; pointer-events: none;
  background: var(--ramp-rule) no-repeat left top;
}

/* 2. Hero: the rule under the big wordmark is the ramp; its lane line is the rust accent */
.hero-brand { border-bottom: 0 !important; position: relative; }
.hero-brand::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -38px; height: 40px; pointer-events: none;
  background: var(--ramp-hero) no-repeat left top;
}
.hero-grid { padding-top: calc(clamp(2.5rem, 5vw, 5rem) + 38px) !important; }

/* 3. Section eyebrows: a mini ramp in ink leads into the label */
.section-header .section-label, .consulting-header .section-label, .proof-lead .section-label, .about-text .section-label,
.consulting-cta-row .section-label, .focus-section-header .section-label, .process-header .section-label {
  display: flex !important; align-items: center; gap: .6rem;
}
.section-header .section-label::before, .consulting-header .section-label::before, .proof-lead .section-label::before, .about-text .section-label::before,
.consulting-cta-row .section-label::before, .focus-section-header .section-label::before, .process-header .section-label::before {
  content: ""; flex: 0 0 34px; height: 13px; background: var(--ramp-glyph) no-repeat left center;
}

/* 4. How it works: the steps sit on the ramp instead of the 4px bar and tabs */
.steps-grid { border-top: 0 !important; position: relative; padding-top: 26px !important; }
.steps-grid::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; pointer-events: none; background: var(--ramp-rule) no-repeat left top; }
.step-card::before { display: none !important; }

/* 5. Footer: the B's lanes, cropped huge, as a 6% white watermark bleeding off the right edge */
footer { position: relative; overflow: hidden; }
footer > .container { position: relative; z-index: 1; }
footer::before {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  width: 760px; height: 760px; right: -40px; top: -290px;
  background: url("../images/b-icon-official-white.svg") no-repeat center / contain; opacity: .06;
}
@media (max-width: 640px) {
  .hero-brand::after { height: 28px; bottom: -26px; background-size: auto 28px; }
  .hero-grid { padding-top: calc(clamp(2.5rem, 5vw, 5rem) + 26px) !important; }
  footer::before { width: 560px; height: 560px; right: -30px; top: auto; bottom: -330px; }
}