/* Kevin Brown brand tokens — Kosei Designs 2026 brand guidelines.
 *
 * Source of truth for colour and type on kevinbrownspeaks.com. Ships to the
 * live site as the first half of uploads/kosei-kb/custom.css (see
 * scripts/build-css.sh). Do not restate these values anywhere else; import or
 * concatenate this file instead.
 *
 * Brand colours are a permanent decision — never adjust them to fix a
 * contrast or layout problem. Change the layout instead.
 */
:root {
	/* Palette */
	--kb-steel-blue: #1a437e;
	--kb-dark-azure: #00162a;
	--kb-teal: #1e9078;
	--kb-soft-apricot: #fff5ed;
	--kb-warm-brown: #ae7244;
	--kb-body-black: #0b0b09;
	/* body copy, per guidelines p.19 — not #000 */
	--kb-white: #fff;
	/* Roles */
	--kb-bg: var(--kb-white);
	--kb-bg-alt: var(--kb-soft-apricot);
	--kb-bg-deep: var(--kb-dark-azure);
	--kb-ink: var(--kb-body-black);
	--kb-ink-inverse: var(--kb-white);
	--kb-accent: var(--kb-steel-blue);
	--kb-accent-secondary: var(--kb-teal);
	--kb-accent-warm: var(--kb-warm-brown);
	/* Type. Avenir weights install as SEPARATE families on Sadie's machine, so
	 * each weight is named explicitly rather than set with font-weight alone.
	 * Web fallbacks are listed because neither Futura LT nor Avenir is a
	 * web-safe font — confirm what is actually licensed and loaded on the site
	 * before trusting the first name in a stack. */
	--kb-font-heading: "Futura LT Bold", "Futura LT", "Futura PT Bold", Futura, "Trebuchet MS", sans-serif;
	--kb-font-body: "Avenir Regular", Avenir, "Avenir Next", "Nunito Sans", "Segoe UI", sans-serif;
	--kb-font-body-strong: "Avenir Heavy", "Avenir Next Demi Bold", Avenir, "Nunito Sans", sans-serif;
	--kb-font-script: "Feeling Passionate", cursive;
}

/* ------------------------------------------------------------------
   Media kit hero
   ------------------------------------------------------------------
   The banner was a 586 KB electric-blue JPG that matched neither the
   Steel Blue the page body already uses nor the Dark Azure band
   directly beneath it, which is what made it read as off-brand.

   Two layers, not one image. The gradient covers; the kb. mark is its
   own layer pinned to the right edge at a constant size. Baked into a
   single flat image the mark cannot survive, because background-size
   cover crops the sides on narrow screens - at 1280 it came out as a
   sliver. As a layer it holds one size at every width.

   Oxygen cannot express a layered background from its own UI, which is
   the one reason this lives here rather than on the element.
   (assets/chevron.svg is kept for reuse but deliberately not used
   here: the hero reads cleaner without a device at its foot.)
   ------------------------------------------------------------------ */
#section-3-707 {
	background-color: #00162a !important;
	background-image: url("https://kevinbrownspeaks.com/nitropack_static/IHsWSwoyYUMAkhnKkEWXzlRQctyceuqN/assets/images/optimized/rev-a4b0183/kevinbrownspeaks.com/wp-content/uploads/kosei-kb/kb-watermark.svg"), linear-gradient(170deg, #00162a 0%, #1a437e 70%) !important;
	background-position: right 4% bottom 15%, center center !important;
	background-size: 360px auto, cover !important;
	background-repeat: no-repeat !important;
}

#section-3-707.nitro-lazy {
	background-image: none !important;
}

@media (max-width: 900px) {
	#section-3-707 {
		background-size: 190px auto, cover !important;
		background-position: right 6% bottom 12%, center center !important;
	}
}