/* ==========================================================================
   Boulder Technology — site stylesheet ("Maison")

   Lifted from the design canvas the studio published for review, taking the
   light direction: ivory and stone grounds, Cormorant Garamond for display,
   DM Sans for text, brass as the one metal, ink as the dark anchor.

   The ground is light everywhere. Dark is now an accent rather than the
   default surface — a section reaches for it deliberately with .b-dark
   (the testimonial anchor, a pulled client quote, the sign-in panel, the
   footer), and the tokens flip underneath so the components below work
   unchanged on either ground.

   The b- prefix is the Boulder namespace. It keeps this system's short
   utility names (.b-p, .b-h1, .b-n) from colliding with anything generic.

   Bands alternate down a page:

     .b-sec            ivory ground   (the default)
     .b-sec--stone     stone ground
     .b-sec.b-dark     ink ground, ivory type

   Panels invert against their band, so a .b-fig or .b-concept is stone on an
   ivory band and ivory on a stone one.
   ========================================================================== */

:root {

	/* ── grounds ───────────────────────────────────────────────────── */
	--ivory: #f4f2ee;
	--stone: #eceae5;
	--stone2: #e1ded8;          /* stone, one step down — hover on a panel */
	--stone-deep: #e2ded6;      /* the third ground, a shade below stone */
	--line: #d2cec6;
	--line2: #e6e2da;

	/* ── ink & type ────────────────────────────────────────────────── */
	--ink: #1a1c24;
	--ink2: #4a4a42;            /* body copy */
	--mute: #72706a;            /* meta, captions, disabled */
	--faint: #8f8d86;           /* prompts, not content — see .b-field */

	/* ── metals ────────────────────────────────────────────────────── */
	--brass: #b8912a;
	--brass-lt: #d4b25a;        /* brass legible on the ink ground */
	--brass-dk: #a17f22;        /* brass, pressed */
	--peris: #5e6bad;           /* periwinkle, from the brand mark */
	--peris-lt: #a6aedc;        /* periwinkle legible on the ink ground —
	                               the value the hero schematic already uses.
	                               --peris itself is only 3.4:1 there. */

	/* ── state ─────────────────────────────────────────────────────── */
	--good: #4f8f62;
	--bad: #a8413e;

	/* ── type ──────────────────────────────────────────────────────── */
	--fd: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
	--fb: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

	/* ── metrics ───────────────────────────────────────────────────── */
	--gutter: 44px;
	--nav-h: 78px;
	--radius: 2px;              /* rectangles, near enough */
	--col-gap: 36px;
}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
	scroll-behavior: smooth;
	/* the sticky masthead must not cover the target of an in-page anchor */
	scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--fb);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* A `display` declaration on an element beats the UA stylesheet's rule for
   [hidden], so anything given a display value would ignore the attribute. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--brass); color: var(--ivory); }

:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 3px;
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}


/* ==========================================================================
   TYPE
   ========================================================================== */

.b-h1 {
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(46px, 5.4vw, 82px);
	line-height: 1.02;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.b-h2 {
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(36px, 3.7vw, 54px);
	line-height: 1.06;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.b-h3 {
	font-family: var(--fd);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.15;
	letter-spacing: -0.005em;
}

.b-h4 {
	font-family: var(--fd);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
}

/* A single word longer than the column would otherwise push the page
   sideways — the display sizes are large enough for that to happen. */
.b-h1, .b-h2, .b-h3, .b-h4 { overflow-wrap: break-word; }

.b-p {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink2);
	max-width: 64ch;
}

.b-lede  { font-size: 18.5px; line-height: 1.6; }
.b-small { font-size: 14.5px; line-height: 1.6; color: var(--ink2); }

/* Tracked small caps in brass — the one label treatment, used everywhere. */
.b-label {
	display: block;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
}
.b-label--mute { color: var(--mute); }

.b-accent { color: var(--brass); }

.b-num {
	font-family: var(--fd);
	font-weight: 500;
	font-variant-numeric: lining-nums tabular-nums;
}

/* The numeral that opens a column, row, or step. */
.b-n {
	font-family: var(--fd);
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	color: var(--brass);
	font-variant-numeric: lining-nums;
}

/* ── the dark anchor ───────────────────────────────────────────────── */

.b-dark { background: var(--ink); color: var(--ivory); }
.b-dark .b-p,
.b-dark .b-small       { color: rgba(244, 242, 238, 0.78); }
.b-dark .b-label       { color: var(--brass-lt); }
.b-dark .b-label--mute { color: rgba(244, 242, 238, 0.55); }
.b-dark .b-more        { color: var(--ivory); }


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.b-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.b-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
}

.b-sec { padding: 104px 0; }
.b-sec--stone { background: var(--stone); }
.b-sec--deepstone { background: var(--stone-deep); }
.b-sec--flush-top { padding-top: 0; }

/* Sections that carry the topographic ground behind their content. */
.b-sec--anchor { position: relative; overflow: hidden; }
.b-sec--anchor .b-wrap { position: relative; }

.b-stroke { display: block; width: 36px; height: 2px; background: var(--brass); }

/* ── section heads ─────────────────────────────────────────────────── */

.b-sechead { max-width: 760px; margin-bottom: 60px; }
.b-sechead .b-label { margin-bottom: 22px; }
.b-sechead .b-p     { margin-top: 22px; }

/* Headline left, supporting copy right. */
.b-sechead--split {
	max-width: none;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	align-items: end;
}
.b-sechead--split .b-label { grid-column: 1 / -1; }
.b-sechead--split .b-h2    { grid-column: 1 / 8; }
.b-sechead--split .b-p,
.b-sechead__aside          { grid-column: 8 / -1; margin-top: 0; padding-bottom: 6px; }
.b-sechead__aside .b-p     { margin-bottom: 26px; }

/* Panels invert against a stone band. */
.b-sec--stone .b-concept,
.b-sec--stone .b-cap,
.b-sec--stone .b-cstat,
.b-sec--stone .b-caplist,
.b-sec--stone .b-fig,
.b-sec--stone .b-dg,
.b-sec--stone .b-formpanel,
.b-sec--stone .b-folder,
.b-sec--stone .b-case-card,
.b-sec--stone .b-pillar { background: var(--ivory); }
.b-sec--stone .b-dg-node { background: var(--stone); }

/* Deep stone sits a shade below stone, so panels on it lift to ivory and
   take a slightly stronger edge to hold their shape. */
.b-sec--deepstone .b-pull,
.b-sec--deepstone .b-statpanel,
.b-sec--deepstone .b-demo,
.b-sec--deepstone .b-search { background: var(--ivory); border-color: #cfcac0; }


/* ==========================================================================
   BUTTONS & LINKS

   Rectangles, tracked small caps. A metal and an ink, plus a ghost.
   ========================================================================== */

.b-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--ivory);
	font-family: var(--fb);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.b-btn:hover { background: #2c2f3b; border-color: #2c2f3b; color: var(--ivory); }

.b-btn--brass { background: var(--brass); border-color: var(--brass); color: var(--ivory); }
.b-btn--brass:hover { background: var(--brass-dk); border-color: var(--brass-dk); }

.b-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.b-btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.b-dark .b-btn--ghost { color: var(--ivory); border-color: rgba(244, 242, 238, 0.5); }
.b-dark .b-btn--ghost:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

.b-btn--sm    { padding: 12px 18px; font-size: 11.5px; }
.b-btn--block { width: 100%; }

.b-btn:disabled { opacity: 0.55; cursor: default; }

/* Text link with a brass rule that grows on hover. */
.b-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}
/* The rule grows on hover. Scaled rather than widened so the hover does not
   relayout its row every frame; the 28px box stays put and the bar overflows
   into the trailing space, which reads the same as the 44px the comp draws. */
.b-more::after {
	content: "";
	width: 28px; height: 1px;
	background: var(--brass);
	transform-origin: left center;
	transition: transform .2s;
}
.b-more:hover::after { transform: scaleX(1.571); }


/* ==========================================================================
   MASTHEAD

   A solid ivory bar with a hairline and small-caps navigation. Below the
   toggle breakpoint the links collapse behind a control; site.js opens it.
   ========================================================================== */

.b-mast {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ivory);
	border-bottom: 1px solid var(--line);
}
.b-mast .b-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--nav-h);
}

.b-mast-nav { display: flex; align-items: center; gap: 24px; }

.b-mast-nav a {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink2);
	white-space: nowrap;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}
.b-mast-nav a:hover { color: var(--ink); border-color: var(--brass); }
.b-mast-nav a.is-current { color: var(--ink); border-color: var(--brass); }

/* The Client Portal control: outlined, not a solid button. */
.b-mast-portal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius);
	padding: 12px 15px!important;
	font-size: 11px;
	letter-spacing: 0.12em;
}
.b-mast-portal:hover { border-color: var(--ink) !important; }

.b-mast-nav a.b-btn {
	padding: 13px 18px;
	font-size: 11px;
	letter-spacing: 0.12em;
	border-color: var(--brass);
	color: var(--ivory);
}
.b-mast-nav a.b-btn:hover { background: var(--brass-dk); border-color: var(--brass-dk); }

/* Signed-in session controls. */
.b-mast-form { display: flex; }

/* ── the mobile control ────────────────────────────────────────────── */

.b-mast-toggle {
	display: none;
	flex: none;
	width: 42px; height: 42px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
}
.b-mast-toggle span,
.b-mast-toggle span::before,
.b-mast-toggle span::after {
	display: block;
	width: 17px; height: 1px;
	background: var(--ink);
}
.b-mast-toggle span { position: relative; }
.b-mast-toggle span::before,
.b-mast-toggle span::after { content: ""; position: absolute; left: 0; }
.b-mast-toggle span::before { top: -5px; }
.b-mast-toggle span::after  { top: 5px; }


/* ==========================================================================
   HERO
   ========================================================================== */

.b-hero { position: relative; overflow: hidden; padding: 96px 0 84px; }
.b-hero .b-wrap { position: relative; }
.b-hero .b-grid { align-items: center; }

.b-hero--page { padding: 88px 0 72px; }
.b-hero--form { padding: 80px 0 48px; }

.b-hero-copy { grid-column: 1 / 7; }
.b-hero-copy .b-label { margin-bottom: 30px; }
.b-hero-copy .b-p     { margin-top: 32px; }

.b-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.b-hero-tag {
	margin-top: 36px;
	font-family: var(--fd);
	font-style: italic;
	font-size: 19px;
	color: var(--mute);
}

.b-hero-art { grid-column: 7 / -1; }

/* Contour lines behind a hero or an anchor band — the Boulder foothills,
   abstracted. Decorative, and purely a background: the shape comes from
   /img/topo.svg used as a mask, so the colour follows the tokens and the
   markup stays a single empty element.

   It has to be a mask rather than inlined SVG. Inlining put 15KB ahead of
   the contact form, which committed the response buffer before Thymeleaf
   reached th:action — and Spring then could not open the session it needs
   to mint the CSRF token. */
.b-topo {
	position: absolute;
	inset: -10% -5%;
	width: 110%;
	height: 120%;
	pointer-events: none;
	opacity: 0.9;
	background-color: var(--brass);
	-webkit-mask: url('/img/topo.svg') center / cover no-repeat;
	mask: url('/img/topo.svg') center / cover no-repeat;
}
.b-dark .b-topo { background-color: var(--ivory); opacity: 0.34; }

/* The ink frame holding the hero schematic. */
.b-frame {
	background: var(--ink);
	color: var(--ivory);
	padding: 34px 34px 26px;
	border-radius: var(--radius);
	box-shadow: 0 30px 60px -30px rgba(26, 28, 36, 0.45);
}
.b-frame .b-fig { border: 0; padding: 0; background: transparent; }
.b-frame .b-figcap { border-color: rgba(244, 242, 238, 0.16); color: rgba(244, 242, 238, 0.72); }
.b-frame .b-figcap b { color: var(--brass-lt); }

.b-frame-kicker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass-lt);
}
.b-frame-kicker span:last-child { color: rgba(244, 242, 238, 0.55); }


/* ==========================================================================
   FIGURES
   ========================================================================== */

.b-fig {
	padding: 26px;
	background: var(--stone);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.b-fig svg { width: 100%; height: auto; font-family: var(--fb); }

.b-figcap {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mute);
}
.b-figcap b {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
}


/* ==========================================================================
   PILLARS — three quiet stone panels under the hero
   ========================================================================== */

.b-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.b-pillar {
	padding: 38px 36px 40px;
	background: var(--stone);
	border-radius: var(--radius);
}
.b-pillar .b-stroke { margin-bottom: 26px; }
.b-pillar .b-val {
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(30px, 2.7vw, 38px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.b-pillar .b-label { margin: 14px 0 18px; }
.b-pillar .b-small { font-size: 15px; }


/* ==========================================================================
   REAL VALUE
   ========================================================================== */

.b-rv-copy { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 24px; }
.b-rv-side { grid-column: 9 / -1; }

/* Pulled line with a brass edge. */
.b-pull {
	margin-top: 14px;
	padding: 34px 36px 32px 40px;
	border-left: 2px solid var(--brass);
	background: var(--ivory);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.b-pull p {
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.3;
	color: var(--ink);
}

/* The two figures beside the argument. Contained panels rather than ruled
   rows, so they read as objects against the deep-stone ground. */
.b-statpanel {
	background: var(--ivory);
	border-radius: var(--radius);
	padding: 30px 32px 28px;
}
.b-statpanel + .b-statpanel { margin-top: 16px; }
.b-statpanel .b-big {
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(56px, 5.6vw, 80px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--brass);
	font-variant-numeric: lining-nums;
}
.b-statpanel .b-bigtext {
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(26px, 2.2vw, 32px);
	line-height: 1.1;
	color: var(--ink);
}
.b-statpanel .b-p { margin-top: 14px; font-size: 15px; }

.b-sources { padding-top: 18px; font-size: 12.5px; color: var(--mute); }
.b-sources a { color: var(--ink2); border-bottom: 1px solid var(--line); }
.b-sources a:hover { color: var(--brass); border-color: var(--brass); }


/* ==========================================================================
   NUMBERED TILES — "three ways", "tailored systems"

   Three contained panels rather than ruled columns or rows. The tile-head
   variant puts the numeral and its label above a divider; the plain one
   leads with the numeral alone.
   ========================================================================== */

.b-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.b-tile {
	background: var(--ivory);
	border-radius: var(--radius);
	padding: 34px 32px 36px;
	transition: transform .25s, box-shadow .25s;
}
.b-tile:hover { transform: translateY(-3px); }
.b-tile .b-n  { font-size: 30px; margin-bottom: 18px; }
.b-tile .b-h3 { font-size: 25px; margin-bottom: 12px; }
.b-tile .b-p  { font-size: 15px; }

.b-tile-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}
.b-tile-head .b-n     { margin: 0; }
.b-tile-head .b-label { color: var(--mute); }

.b-tiles--ways .b-tile .b-h3 { font-size: 26px; }


/* ==========================================================================
   THE SUITE
   ========================================================================== */

/* "In development" — periwinkle, so it reads as status rather than brand. */
.b-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: 14px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--peris);
}
.b-badge::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--peris);
}

.b-concepts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 22px 0 72px;
}
.b-concept {
	padding: 30px 28px 32px;
	background: var(--stone);
	border-radius: var(--radius);
}
.b-concept .b-stroke { width: 24px; margin-bottom: 20px; }
.b-concept .b-h4     { margin-bottom: 12px; font-size: 21px; }
.b-concept .b-small  { font-size: 14px; }

/* ── tabs ──────────────────────────────────────────────────────────────
   A row of controls above the panel rather than a list beside it, so the
   selected one reads as pressed and the panel gets the full width.
   -------------------------------------------------------------------- */

.b-tabs {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}
.b-tab {
	display: inline-flex;
	align-items: center;
	padding: 14px 22px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--fb);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink2);
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.b-tab:hover { border-color: var(--ink); color: var(--ink); }
.b-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

.b-panel {
	grid-column: 1 / -1;
	display: none;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	padding: 40px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 14px 34px -26px rgba(26, 28, 36, 0.25);
}
.b-panel.is-on { display: grid; }

.b-panel-copy { grid-column: 1 / 7; }
.b-panel-copy .b-h3 { margin: 16px 0 18px; }
.b-panel-copy .b-p  { font-size: 15.5px; }
.b-panel-fig { grid-column: 7 / -1; }

/* ── rotated-square bullets ────────────────────────────────────────── */

.b-bullets { display: flex; flex-direction: column; gap: 13px; margin-top: 24px; }
.b-bullets li {
	position: relative;
	padding-left: 24px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink2);
}
.b-bullets li::before {
	content: "";
	position: absolute;
	left: 2px; top: 9px;
	width: 7px; height: 7px;
	background: var(--brass);
	transform: rotate(45deg);
}
.b-dark .b-bullets li { color: rgba(244, 242, 238, 0.82); }
.b-dark .b-bullets li::before { background: var(--brass-lt); }

/* ── underlying capabilities ───────────────────────────────────────── */

.b-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.b-cap {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 22px 24px;
	background: var(--stone);
	border-radius: var(--radius);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink2);
}
.b-cap::before {
	content: "";
	flex: none;
	width: 7px; height: 7px;
	margin-top: 7px;
	background: var(--brass);
	transform: rotate(45deg);
}

/* ── the stacked schematic inside a tab panel ──────────────────────── */

.b-dg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 30px 24px;
	background: var(--stone);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.b-dg-node {
	padding: 10px 14px;
	border: 1px solid var(--line);
	background: var(--ivory);
	font-size: 12.5px;
	color: var(--ink2);
	text-align: center;
	border-radius: var(--radius);
}
.b-dg-core {
	padding: 16px 24px;
	background: var(--ink);
	color: var(--ivory);
	text-align: center;
	border-radius: var(--radius);
}
.b-dg-core b { display: block; font-family: var(--fd); font-weight: 600; font-size: 19px; }
.b-dg-core span {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brass-lt);
}
.b-dg-core--wide { width: 100%; max-width: 340px; }

.b-dg-v { width: 1px; height: 22px; background: var(--brass); }
.b-dg-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.b-dg-row--chips { margin-top: 12px; }
.b-dg-foot {
	margin-top: 6px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	text-align: center;
}
.b-dg-chip {
	padding: 6px 11px;
	border: 1px solid rgba(244, 242, 238, 0.3);
	border-radius: var(--radius);
	font-size: 11px;
	color: var(--ivory);
}
.b-dg-mid {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}


/* ==========================================================================
   CASE STUDY TEASERS — four panels on the home page
   ========================================================================== */

.b-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.b-case-card {
	display: flex;
	flex-direction: column;
	padding: 40px 40px 36px;
	background: var(--stone);
	border-radius: var(--radius);
	color: inherit;
}
.b-case-card:hover { background: var(--stone2); }
.b-case-card .b-label { margin-bottom: 22px; }
.b-case-card .b-h3    { font-size: 29px; margin-bottom: 14px; }
.b-case-card .b-p     { font-size: 15px; flex: 1; }
.b-case-card .b-more  { margin-top: 28px; }


/* ==========================================================================
   PROCESS — a sequence, so a rule and four points along it
   ========================================================================== */

.b-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--col-gap);
	border-top: 1px solid var(--line);
}
.b-step { position: relative; padding-top: 32px; }
.b-step::before {
	content: "";
	position: absolute;
	top: -4px; left: 0;
	width: 7px; height: 7px;
	background: var(--brass);
	transform: rotate(45deg);
}
.b-step .b-n  { font-size: 26px; margin-bottom: 16px; }
.b-step .b-h3 { font-size: 24px; margin-bottom: 12px; }
.b-step .b-p  { font-size: 15px; }


/* ==========================================================================
   TESTIMONIALS — the dark anchor
   ========================================================================== */

.b-tlead { grid-column: 1 / 10; }
.b-tlead .b-mark {
	font-family: var(--fd);
	font-size: 96px;
	line-height: 0.6;
	color: var(--brass-lt);
	margin-bottom: 6px;
}
.b-tlead p {
	font-family: var(--fd);
	font-weight: 500;
	font-size: clamp(26px, 2.7vw, 38px);
	line-height: 1.24;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}

.b-attr {
	display: block;
	margin-top: 22px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass-lt);
}

.b-quotes {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--col-gap);
	margin-top: 72px;
	padding-top: 44px;
	border-top: 1px solid rgba(244, 242, 238, 0.18);
}
.b-q p {
	font-family: var(--fd);
	font-size: 20px;
	line-height: 1.4;
	color: rgba(244, 242, 238, 0.9);
}
.b-q .b-attr { margin-top: 18px; }


/* ==========================================================================
   CTA
   ========================================================================== */

.b-cta .b-h2 { grid-column: 1 / 9; font-size: clamp(38px, 4.2vw, 62px); }
.b-cta .b-p  { grid-column: 1 / 8; margin-top: 26px; }

.b-cta-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	margin-top: 42px;
}

.b-contactline {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-size: 15px;
	color: var(--ink2);
}
.b-contactline span {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass);
}
.b-contactline:hover { color: var(--brass); }
.b-dark .b-contactline { color: rgba(244, 242, 238, 0.85); }


/* ==========================================================================
   FOOTER
   ========================================================================== */

.b-foot { background: var(--ink); color: var(--ivory); padding: 52px 0 40px; }
.b-foot .b-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
}
.b-foot-nav { display: flex; flex-wrap: wrap; gap: 26px; }
.b-foot-nav a {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(244, 242, 238, 0.7);
}
.b-foot-nav a:hover { color: var(--brass-lt); }

.b-foot .b-copy {
	width: 100%;
	margin-top: 8px;
	padding-top: 22px;
	border-top: 1px solid rgba(244, 242, 238, 0.16);
	font-size: 12.5px;
	color: rgba(244, 242, 238, 0.5);
}
.b-foot .b-small { color: rgba(244, 242, 238, 0.6); }

/* The mark is dark-cored, so it needs a touch more light on the ink ground. */
.b-foot .logo { filter: brightness(1.12); }


/* ==========================================================================
   THE BRAND MARK
   ========================================================================== */

.logo {
	display: block;
	flex: none;
	background-image: url('/img/boulder-logo.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
.logo--nav    { width: 214px; height: 34px; }
.logo--footer { width: 176px; height: 28px; }


/* ==========================================================================
   CASE STUDIES PAGE
   ========================================================================== */

/* ── the jump index ────────────────────────────────────────────────── */

.b-index { margin-top: 26px; border-top: 1px solid var(--line); }
.b-irow {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
	align-items: baseline;
	color: inherit;
}
.b-irow .b-label { grid-column: 1 / 4; color: var(--mute); }
.b-irow .b-h4    { grid-column: 4 / 9; transition: color .2s; }
.b-irow .b-small { grid-column: 9 / 12; color: var(--mute); }
.b-irow .b-more  { grid-column: 12 / -1; justify-self: end; }
.b-irow:hover .b-h4,
.b-irow.is-current .b-h4 { color: var(--brass); }

/* ── one study ─────────────────────────────────────────────────────── */

.b-case { padding: 104px 0; }

.b-case-head { max-width: 820px; margin-bottom: 60px; }
.b-case-head .b-label { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.b-case-head .b-h2 { font-size: clamp(34px, 3.6vw, 50px); }

/* "Featured case study" — outlined, ahead of the study's own label. */
.b-feat {
	padding: 5px 10px;
	border: 1px solid var(--brass);
	color: var(--brass);
	font-size: 10.5px;
}

.b-case-copy { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 40px; }
.b-case-copy .b-label { margin-bottom: 14px; }
.b-case-copy .b-p     { font-size: 16px; }

.b-case-side { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 26px; }

/* The client quote, pulled onto ink. */
.b-cq { padding: 34px 34px 30px; border-radius: var(--radius); }
.b-cq p {
	font-family: var(--fd);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.4;
}
.b-cq p + p { margin-top: 14px; }

.b-cstats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.b-cstat {
	padding: 22px 22px 20px;
	background: var(--stone);
	border-radius: var(--radius);
}
.b-cstat b {
	display: block;
	font-family: var(--fd);
	font-weight: 500;
	font-size: 40px;
	line-height: 1;
	color: var(--brass);
}
.b-cstat span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink2); }

.b-caplist { padding: 26px 28px 24px; background: var(--stone); border-radius: var(--radius); }
.b-caplist .b-label { margin-bottom: 8px; }
.b-caplist .b-bullets { gap: 0; margin-top: 6px; }
.b-caplist .b-bullets li { padding: 10px 0 10px 24px; border-bottom: 1px solid var(--line); }
.b-caplist .b-bullets li:last-child { border-bottom: 0; }
.b-caplist .b-bullets li::before { top: 18px; }

.b-industry { display: flex; gap: 18px; align-items: baseline; font-size: 15px; color: var(--ink2); }

.b-case-fig {
	grid-column: 1 / -1;
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
}
.b-case-fig .b-fig { grid-column: 1 / 9; }
.b-fignote {
	grid-column: 9 / -1;
	align-self: end;
	font-family: var(--fd);
	font-style: italic;
	font-size: 17px;
	line-height: 1.5;
	color: var(--mute);
}


/* ==========================================================================
   CONTACT
   ========================================================================== */

.b-form-col { grid-column: 1 / 8; }
.b-side-col { grid-column: 9 / -1; }

.b-formpanel { background: var(--stone); border-radius: var(--radius); padding: 40px; }

.b-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }

.b-field { display: flex; flex-direction: column; gap: 9px; }
.b-field--full { grid-column: 1 / -1; }

.b-field label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink2);
}
.b-field label i { color: var(--brass); font-style: normal; }

.b-field input,
.b-field select,
.b-field textarea {
	width: 100%;
	padding: 13px 14px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--fb);
	font-size: 15.5px;
	color: var(--ink);
	transition: border-color .15s, box-shadow .15s;
}
.b-field select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ink2) 50%),
		linear-gradient(135deg, var(--ink2) 50%, transparent 50%);
	background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
}
.b-field textarea { resize: vertical; line-height: 1.55; }
/* A placeholder is a prompt, not a value. At --mute it sat at 4.4:1 against
   the field, near enough to body copy that the examples read as if the form
   had already been filled in. --faint is ~3:1: still legible, plainly a hint.
   An unchosen select carries its prompt as a real option rather than a
   placeholder, so it needs the same treatment applied to the control. */
.b-field input::placeholder,
.b-field textarea::placeholder,
.b-search::placeholder { color: var(--faint); }

.b-field select:has(option[value=""]:checked) { color: var(--faint); }
.b-field select option { color: var(--ink); }
.b-field input:focus,
.b-field select:focus,
.b-field textarea:focus {
	outline: none;
	border-color: var(--brass);
	box-shadow: 0 0 0 3px rgba(184, 145, 42, 0.14);
}
.b-field [aria-invalid="true"] { border-color: var(--bad); }

.b-form-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin-top: 8px;
}
.b-form-actions .b-small { font-size: 13px; color: var(--mute); }
.b-form-actions .b-small b { font-weight: 500; color: var(--ink2); }

/* Revealed by contact.js, or rendered server side on a failed post. */
.b-err {
	grid-column: 1 / -1;
	display: none;
	padding: 14px 18px;
	background: var(--ivory);
	border-left: 2px solid var(--bad);
	font-size: 14.5px;
	color: var(--ink);
}
.b-err.is-shown { display: block; }

.b-legal { grid-column: 1 / -1; font-size: 12px; line-height: 1.55; color: var(--mute); }
.b-legal a { color: var(--ink2); border-bottom: 1px solid var(--line); }
.b-legal a:hover { color: var(--brass); border-color: var(--brass); }

/* The reCAPTCHA script is loaded site-wide, so its floating badge would sit
   on every page. Google allow hiding it where the attribution is shown in
   text instead — which .b-legal above does, on the contact page only. That
   page carries body.with-captcha; everywhere else the badge stays hidden. */
body:not(.with-captcha) .grecaptcha-badge { opacity: 0; }

/* ── the sent panel ────────────────────────────────────────────────── */

.b-sent { display: none; text-align: center; padding: 20px 10px 10px; }
.b-sent.is-shown { display: block; }
.b-sent .b-check {
	width: 52px; height: 52px;
	margin: 0 auto;
	border: 1px solid var(--brass);
	border-radius: 50%;
	color: var(--brass);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.b-sent .b-h3 { font-size: 32px; margin: 24px 0 14px; }
.b-sent .b-p  { margin: 0 auto; text-align: center; }
.b-sent .b-small { margin-top: 16px; }
.b-sent .b-small a { color: var(--ink); border-bottom: 1px solid var(--brass); }

/* ── what to expect ───────────────────────────────────────────────── */

.b-expect { border-top: 1px solid var(--line); margin-top: 18px; }
.b-exp {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 6px 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}
.b-exp .b-n     { font-size: 24px; padding-top: 2px; }
.b-exp .b-h4    { font-size: 20px; }
.b-exp .b-small { grid-column: 2; font-size: 14px; }

.b-direct { padding: 30px 30px 28px; border-radius: var(--radius); margin-top: 40px; }
.b-direct .b-label { margin-bottom: 16px; }
.b-direct a {
	display: block;
	font-family: var(--fd);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 8px;
}
.b-direct a:hover { color: var(--brass-lt); }
.b-direct a.b-em {
	font-family: var(--fb);
	font-weight: 400;
	font-size: 15px;
	color: rgba(244, 242, 238, 0.85);
	word-break: break-all;
	margin: 0;
}


/* ==========================================================================
   SIGN IN
   ========================================================================== */

.b-split {
	display: grid;
	grid-template-columns: minmax(44px, 1fr) minmax(0, 560px) minmax(0, 640px) minmax(44px, 1fr);
	min-height: 76vh;
}
.b-split-dark { grid-column: 1 / 3; display: flex; justify-content: flex-end; }
.b-split-dark-inner {
	position: relative;
	width: 100%;
	max-width: 560px;
	padding: 88px 64px 88px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.b-split-dark .b-h2 { margin-top: 24px; font-size: clamp(34px, 3.4vw, 48px); }
.b-split-dark .b-p  { margin-top: 24px; }
.b-split-dark .b-bullets { margin-top: 36px; }

.b-split-form {
	grid-column: 3;
	padding: 88px 44px 88px 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 600px;
}
.b-split-form .b-h3 { font-size: 36px; }
.b-split-form .b-small { margin-top: 10px; }
.b-split-form form { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; }
.b-split-form .b-err { grid-column: auto; margin-top: 24px; }

.b-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.b-field-row a { font-size: 12px; color: var(--peris); }
.b-field-row a:hover { color: var(--brass); }

.b-check-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink2); cursor: pointer; }
.b-check-row input { width: 16px; height: 16px; accent-color: var(--brass); }

.b-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0 20px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}
.b-or::before, .b-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Standing note under the form — portal availability, trouble signing in. */
.b-proto {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mute);
}
.b-proto b {
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--peris);
	font-size: 11px;
}
.b-proto a { color: var(--ink2); border-bottom: 1px solid var(--line); }
.b-proto a:hover { color: var(--brass); border-color: var(--brass); }


/* ==========================================================================
   CLIENT PORTAL
   ========================================================================== */

.b-pmast .b-wrap { min-height: 70px; }

.b-pmast-brand { display: flex; align-items: center; gap: 18px; }
.b-pmast-brand .b-sep { width: 1px; height: 24px; background: var(--line); }
.b-pmast-brand .b-label { color: var(--mute); }

.b-pmast-user { display: flex; align-items: center; gap: 20px; }

.b-signed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--peris);
}
.b-signed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

.b-user { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.b-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--ivory);
	font-family: var(--fd);
	font-weight: 600;
	font-size: 14px;
}

/* ── the client band ──────────────────────────────────────────────── */

/* The summary cells (.b-ident-cells / .b-cell / .b-meta), the activity rows
   (.b-arow / .b-when / .b-chip) and the sign-in extras (.b-field-row,
   .b-check-row, .b-or) are carried from the design but not yet rendered:
   the app exposes no account lead, signature state, activity feed, password
   reset or SSO. They are kept so those features arrive already styled. */

/* The band runs on ink, so the client's own mark and name open the page
   against the darkest ground on the site. */
.b-ident { background: var(--stone); border-bottom: 1px solid var(--line); }
.b-ident.b-dark { background: var(--ink); color: var(--ivory); border-bottom: 0; }
.b-ident.b-dark .b-label { color: var(--brass-lt); }
.b-ident.b-dark .client-logo {
	border-color: rgba(244, 242, 238, 0.2);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
}
.b-ident.b-dark .b-meta { color: rgba(244, 242, 238, 0.6); }
.b-ident.b-dark .b-meta b { color: var(--ivory); }
.b-ident.b-dark .b-cell {
	background: rgba(244, 242, 238, 0.045);
	border: 1px solid rgba(244, 242, 238, 0.14);
	border-top: 3px solid var(--brass-lt);
	box-shadow: none;
	color: var(--ivory);
}
.b-ident.b-dark .b-cell .b-label { color: rgba(244, 242, 238, 0.5); }
.b-ident.b-dark .b-cell b { color: var(--ivory); }
.b-ident.b-dark .b-cell b.b-accent { color: var(--brass-lt); }
.b-ident.b-dark .b-cell span { color: rgba(244, 242, 238, 0.7); }
.b-ident.b-dark .b-cell a { color: var(--peris-lt); }
.b-ident.b-dark .b-cell a:hover { color: var(--brass-lt); }
.b-ident .b-wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	align-items: center;
	padding-top: 52px;
	padding-bottom: 52px;
}
.b-ident-main { grid-column: 1 / 8; display: flex; align-items: center; gap: 34px; }
/* No summary cells to show, so the band gives the whole row to the client. */
.b-ident--solo .b-ident-main { grid-column: 1 / -1; }
.b-ident-main .b-h1 { font-size: clamp(44px, 4.8vw, 66px); margin-top: 8px; }
.b-ident-main .b-meta { margin-top: 14px; font-size: 13.5px; color: var(--mute); }
.b-ident-main .b-meta b { font-weight: 500; color: var(--ink); }

/* A white tile, so any client's mark keeps its own colours. */
.client-logo {
	flex: none;
	width: 168px;
	height: 92px;
	padding: 14px 18px;
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	object-fit: contain;
}

.b-ident-cells { grid-column: 8 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.b-cell { padding: 22px 24px; background: var(--ivory); border-radius: var(--radius); }
.b-cell .b-label { margin-bottom: 12px; color: var(--mute); }
.b-cell b { display: block; font-family: var(--fd); font-weight: 600; font-size: 22px; }
.b-cell b.b-accent { color: var(--brass); }
.b-cell span, .b-cell a { display: block; margin-top: 6px; font-size: 13px; color: var(--ink2); }
.b-cell a { color: var(--peris); }
.b-cell a:hover { color: var(--brass); }

/* ── folders ──────────────────────────────────────────────────────── */

.b-folders-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}
.b-folders-head .b-h2 { font-size: 38px; }
.b-folders-head .b-small { margin-top: 8px; }

.b-search {
	width: 300px;
	padding: 12px 14px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--fb);
	font-size: 14.5px;
	color: var(--ink);
}
.b-search:focus { outline: none; border-color: var(--brass); }

.b-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.b-folder {
	display: flex;
	flex-direction: column;
	padding: 28px 32px 30px;
	background: var(--ivory);
	border-top: 3px solid var(--brass);
	border-radius: var(--radius);
	color: inherit;
}
.b-folder:hover { background: var(--stone); }
.b-folder .b-h3 { margin-bottom: 8px; }
.b-folder-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.b-folder-top .b-label { color: var(--mute); }
.b-folder .b-h3    { font-size: 26px; }
.b-folder .b-small { margin-top: 8px; font-size: 14px; }

/* A bordered tile holding the folder's glyph, so each document type is
   recognisable before its name is read. */
.b-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px; height: 46px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--stone);
	color: var(--brass);
}
.b-folder-title { display: flex; align-items: center; gap: 12px; }

.b-folder-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
}
.b-folder-foot .b-small { font-size: 12.5px; color: var(--mute); }

/* A folder's preview lines, and the document rows on the folder page. */
.b-items { margin-top: 22px; border-top: 1px solid var(--line); }
.b-item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	color: var(--ink);
}
.b-item .b-lead {
	flex: 1;
	border-bottom: 1px dotted var(--line);
	transform: translateY(-4px);
	min-width: 12px;
}
.b-item .b-st { font-size: 11.5px; color: var(--mute); white-space: nowrap; }

/* ── recent activity ──────────────────────────────────────────────── */

.b-act { border-top: 1px solid var(--line); margin-top: 26px; }

/* Rows gathered into one contained panel rather than running loose on the
   ground. Used for the document list and any activity feed. */
.b-actpanel {
	margin-top: 26px;
	padding: 6px 28px;
	background: var(--ivory);
	border: 1px solid #cfcac0;
	border-top: 1px solid #cfcac0;
	border-radius: var(--radius);
	box-shadow: 0 14px 34px -26px rgba(26, 28, 36, 0.25);
}
.b-actpanel .b-arow:last-child,
.b-actpanel .b-doc:last-child { border-bottom: 0; }

/* Small bordered label — a folder name beside a row. */
.b-chip {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--stone);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink2);
	white-space: nowrap;
}
.b-arow {
	display: grid;
	grid-template-columns: 14px 1fr auto 120px;
	column-gap: 18px;
	align-items: center;
	padding: 17px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
}
.b-arow i { width: 7px; height: 7px; background: var(--brass); transform: rotate(45deg); }
.b-arow i.p { background: var(--peris); }
.b-arow i.g { background: var(--good); }
.b-arow .b-label { color: var(--mute); font-size: 10.5px; }
.b-arow .b-when { text-align: right; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ── the folder page ──────────────────────────────────────────────── */

.b-back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500;
          letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.b-back:hover { color: var(--brass); }

.b-folder-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin: 26px 0 28px;
}
.b-folder-head .b-h2 { font-size: 38px; }
.b-folder-head .b-small { margin-top: 8px; }
.b-folder-head-aside { display: flex; align-items: center; gap: 16px; }

.b-docs { border-top: 1px solid var(--line); }
.b-doc {
	display: grid;
	grid-template-columns: 20px 1fr auto 132px 92px;
	column-gap: 18px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	color: var(--ink);
	transition: color .2s;
}
.b-doc:hover { color: var(--brass); }
.b-doc__icon { width: 18px; height: 18px; color: var(--mute); }
.b-doc:hover .b-doc__icon { color: var(--brass); }
.b-doc__name { min-width: 0; overflow-wrap: anywhere; }
.b-doc__meta { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.b-doc__meta--date { text-align: right; }
.b-doc__action {
	justify-self: end;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}
.b-doc:hover .b-doc__action { color: var(--brass); }

/* ── standing notes & empty states ────────────────────────────────── */

/* Periwinkle edge: this is a note about the system, not about the content. */
.b-demo {
	margin-top: 34px;
	padding: 20px 24px;
	background: var(--stone);
	border-left: 2px solid var(--peris);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink2);
}
.b-demo--flush { margin-top: 0; }
.b-demo b {
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--peris);
	font-size: 11px;
}
.b-demo a { color: var(--ink); border-bottom: 1px solid var(--line); }
.b-demo a:hover { color: var(--brass); border-color: var(--brass); }
.b-demo code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	padding: 1px 5px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.b-empty {
	margin-top: 26px;
	padding: 44px 40px;
	background: var(--stone);
	border-radius: var(--radius);
	text-align: center;
}
.b-empty .b-h4 { margin-bottom: 10px; }
.b-empty .b-small { margin: 0 auto; max-width: 56ch; }
.b-empty code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	padding: 1px 5px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* "clear it", inside the no-matches copy */
.b-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	color: var(--brass);
	border-bottom: 1px solid var(--brass);
	cursor: pointer;
}


/* ==========================================================================
   CONTAINMENT

   Panels read as objects rather than tinted areas: a hairline edge and a
   soft lift on every one, and a brass top edge on the three that open a
   section. That top edge replaces the loose .b-stroke rule those panels
   used to carry, so the rule is hidden where the edge appears.
   ========================================================================== */

.b-pillar, .b-concept, .b-case-card, .b-folder, .b-cstat, .b-caplist,
.b-cell, .b-formpanel, .b-pull, .b-fig, .b-dg, .b-statpanel, .b-tile {
	border: 1px solid var(--line);
	box-shadow: 0 1px 0 rgba(26, 28, 36, 0.03),
	            0 14px 34px -26px rgba(26, 28, 36, 0.25);
}

.b-pillar, .b-concept, .b-tile { border-top: 3px solid var(--brass); }
.b-pillar .b-stroke, .b-concept .b-stroke { display: none; }
.b-pillar { padding-top: 34px; }
.b-concept { padding-top: 28px; }

/* The pull quote keeps its brass edge on the left instead. */
.b-pull { border-left: 2px solid var(--brass); }


/* ==========================================================================
   THE DARK BANDS

   Design C moves two of the marketing sections onto ink, so every panel
   component needs an ink counterpart: a barely-lifted translucent ground,
   a lighter hairline, and brass stepped up to --brass-lt to stay legible.
   ========================================================================== */

.b-dark .b-h1, .b-dark .b-h2, .b-dark .b-h3, .b-dark .b-h4 { color: var(--ivory); }
.b-dark .b-accent { color: var(--brass-lt); }
.b-dark .b-n { color: var(--brass-lt); }
.b-dark .b-tiles, .b-dark .b-steps { border-top-color: rgba(244, 242, 238, 0.18); }

.b-dark .b-concept, .b-dark .b-tile, .b-dark .b-tab, .b-dark .b-panel,
.b-dark .b-cap, .b-dark .b-fig, .b-dark .b-dg, .b-dark .b-dg-node,
.b-dark .b-case-card {
	background: rgba(244, 242, 238, 0.045);
	border-color: rgba(244, 242, 238, 0.14);
	box-shadow: none;
	color: var(--ivory);
}
.b-dark .b-concept, .b-dark .b-tile { border-top: 3px solid var(--brass-lt); }
.b-dark .b-concept .b-small, .b-dark .b-cap, .b-dark .b-tile .b-p,
.b-dark .b-dg-node, .b-dark .b-figcap,
.b-dark .b-case-card .b-p { color: rgba(244, 242, 238, 0.78); }
.b-dark .b-cap::before { background: var(--brass-lt); }

.b-dark .b-tile-head { border-bottom-color: rgba(244, 242, 238, 0.14); }
/* 0.5 as drawn lands at 4.2:1 against the translucent panel it sits in,
   so it is nudged up just far enough to clear 4.5:1. */
.b-dark .b-tile-head .b-label { color: rgba(244, 242, 238, 0.56); }

/* On ink the pressed tab goes brass rather than inverting to ivory. */
.b-dark .b-tab { color: rgba(244, 242, 238, 0.72); }
.b-dark .b-tab:hover { border-color: var(--ivory); color: var(--ivory); }
.b-dark .b-tab[aria-selected="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.b-dark .b-dg-v { background: var(--brass-lt); }
.b-dark .b-dg-core { background: var(--ivory); color: var(--ink); }
.b-dark .b-dg-core span { color: var(--brass); }
.b-dark .b-dg-chip { border-color: rgba(26, 28, 36, 0.25); color: var(--ink); }
.b-dark .b-dg-foot, .b-dark .b-dg-mid { color: rgba(244, 242, 238, 0.55); }
.b-dark .b-figcap { border-color: rgba(244, 242, 238, 0.16); }
.b-dark .b-figcap b { color: var(--brass-lt); }
.b-dark .b-badge { border-color: rgba(244, 242, 238, 0.25); color: var(--peris-lt); }
.b-dark .b-badge::before { background: var(--peris-lt); }
.b-dark .b-case-card:hover { background: rgba(244, 242, 238, 0.08); }
.b-dark .b-case-card .b-label { color: var(--brass-lt); }


/* ==========================================================================
   ENGAGEMENT & MOTION
   ========================================================================== */

.b-pillar, .b-concept, .b-case-card, .b-folder, .b-cap, .b-cstat {
	transition: background .2s, transform .25s, box-shadow .25s;
}
.b-pillar:hover, .b-concept:hover, .b-case-card:hover,
.b-folder:hover, .b-tile:hover {
	box-shadow: 0 1px 0 rgba(26, 28, 36, 0.03),
	            0 26px 44px -26px rgba(26, 28, 36, 0.35);
}
.b-pillar:hover, .b-concept:hover, .b-case-card:hover, .b-folder:hover {
	transform: translateY(-3px);
}

.b-hero-copy > * { animation: bRise .8s cubic-bezier(.2, .7, .2, 1) both; }
.b-hero-copy > *:nth-child(2) { animation-delay: .06s; }
.b-hero-copy > *:nth-child(3) { animation-delay: .12s; }
.b-hero-copy > *:nth-child(4) { animation-delay: .18s; }
.b-hero-copy > *:nth-child(5) { animation-delay: .24s; }

@keyframes bRise {
	from { transform: translateY(12px); }
	to   { transform: translateY(0); }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {

	:root { --gutter: 24px; }

	.b-sec, .b-case { padding: 72px 0; }
	.b-hero { padding: 56px 0 64px; }
	.b-hero--page, .b-hero--form { padding: 48px 0 40px; }

	.b-hero-copy, .b-hero-art { grid-column: 1 / -1; }
	.b-hero-art { margin-top: 48px; }

	.b-sechead--split .b-h2,
	.b-sechead--split .b-p,
	.b-sechead__aside { grid-column: 1 / -1; }
	.b-sechead--split .b-p, .b-sechead__aside { margin-top: 22px; }

	.b-pillars, .b-tiles, .b-concepts, .b-caps, .b-steps,
	.b-quotes, .b-cases, .b-folders { grid-template-columns: 1fr; }
	.b-panel { padding: 24px; }

	.b-rv-copy, .b-rv-side, .b-panel-copy, .b-panel-fig,
	.b-tlead, .b-cta .b-h2, .b-cta .b-p, .b-form-col, .b-side-col,
	.b-case-copy, .b-case-side, .b-case-fig .b-fig, .b-fignote,
	.b-ident-main, .b-ident-cells { grid-column: 1 / -1; }

	.b-rv-side, .b-case-side, .b-side-col,
	.b-ident-cells, .b-fignote { margin-top: 40px; }

	.b-panel { grid-template-columns: 1fr; }
	.b-panel-fig { margin-top: 28px; }

	.b-irow { grid-template-columns: 1fr; row-gap: 10px; }
	.b-irow > * { grid-column: 1 / -1 !important; justify-self: start !important; }

	.b-steps { row-gap: 40px; }

	.b-split { grid-template-columns: 1fr; }
	.b-split-dark { grid-column: 1; }
	.b-split-dark-inner, .b-split-form { padding: 56px 24px; max-width: none; grid-column: 1; }

	.b-form { grid-template-columns: 1fr; }
	.b-formpanel { padding: 28px 22px; }

	.b-arow { grid-template-columns: 14px 1fr; row-gap: 6px; }
	.b-arow .b-label, .b-arow .b-when { grid-column: 2; text-align: left; }

	.b-search { width: 100%; }
	.b-ident-main { flex-wrap: wrap; gap: 22px; }
}

/* The home masthead carries five section links plus the portal control and
   the call CTA, which together need about 1170px alongside the mark. Below
   that the links collapse behind the toggle rather than wrap or overflow —
   so this breakpoint is set by the widest nav, not by device size. */
@media (max-width: 1180px) {

	.b-mast .b-wrap { flex-wrap: wrap; }
	.b-mast-toggle { display: flex; }

	.b-mast-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 14px;
		border-top: 1px solid var(--line);
		margin-top: 4px;
	}
	.b-mast-nav.is-open { display: flex; }
	.b-mast-nav > a,
	.b-mast-nav > form {
		padding: 15px 0;
		border-bottom: 1px solid var(--line);
	}
	.b-mast-nav > a { border-top: 0; }
	.b-mast-nav a.b-btn,
	.b-mast-portal { justify-content: flex-start; margin-top: 14px; border-bottom-width: 1px !important; }
	.b-mast-nav a.b-btn { margin-bottom: 0; }
	.b-mast-form { padding-top: 14px; }
}

@media (max-width: 860px) {

	.b-doc { grid-template-columns: 20px 1fr auto; row-gap: 4px; }
	.b-doc__meta--date { grid-column: 2; text-align: left; }
	.b-doc__action { grid-column: 3; }

	.b-folders-head, .b-folder-head { flex-direction: column; align-items: stretch; }
	.b-folder-head-aside { flex-wrap: wrap; }

	.b-pmast .b-wrap { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
	.b-pmast-user { flex-wrap: wrap; gap: 14px; }
}

@media (max-width: 560px) {

	/* The display sizes are floored for desktop; on a phone the floor is
	   wider than the column, so step it down again here. */
	.b-h1 { font-size: clamp(32px, 9.4vw, 46px); }
	.b-h2 { font-size: clamp(27px, 7.6vw, 36px); }
	.b-h3 { font-size: 23px; }
	.b-hero .b-h1, .b-ident-main .b-h1 { font-size: clamp(32px, 9.4vw, 46px); }
	.b-split-form .b-h3, .b-sent .b-h3,
	.b-folders-head .b-h2, .b-folder-head .b-h2 { font-size: 28px; }

	.b-cstats { grid-template-columns: 1fr; }
	.b-ident-cells { grid-template-columns: 1fr; }
	.client-logo { width: 132px; height: 74px; }
	.b-tlead .b-mark { font-size: 72px; }
	.b-case-card { padding: 28px 26px 26px; }
	.b-pillar { padding: 30px 26px 32px; }
}