/* =========================================================
   Blue Bison base — design tokens + small utilities
   Direction: B2 "Light Range". Mirror these values in
   Elementor → Site Settings → Global Colors / Global Fonts
   so the client edits with the same palette.
   ========================================================= */

/* Brand fonts, self-hosted (OFL licensed, latin subset). The files live in
   the Media Library (/wp-content/uploads/2026/11/). Elementor's own Google
   Fonts loading is switched off (Elementor > Settings > Advanced) so nothing
   is fetched from Google. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/wp-content/uploads/2026/11/geist-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/wp-content/uploads/2026/11/geist-mono-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/wp-content/uploads/2026/11/instrument-serif-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/wp-content/uploads/2026/11/instrument-serif-400-italic-latin.woff2") format("woff2"); }

:root {
	/* Color */
	--bb-paper:      #FBFBFD; /* page background */
	--bb-surface:    #FFFFFF; /* cards, panels */
	--bb-mist:       #EEF2F7; /* tinted sections */
	--bb-line:       #E3E8EF; /* hairlines */
	--bb-ink:        #0B1220; /* headings, body */
	--bb-ink-2:      #2A3445; /* secondary text */
	--bb-muted:      #4A5568; /* labels (passes 4.5:1 on paper) */
	--bb-steel:      #32689A; /* brand blue (from the mark) */
	--bb-steel-ink:  #2F5F8C; /* italic accents, small blue text */
	--bb-action:     #1472A3; /* reserved for the primary action */

	/* Type */
	--bb-font-serif: "Instrument Serif", Georgia, serif;
	--bb-font-sans:  "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bb-font-mono:  "Geist Mono", ui-monospace, SFMono-Regular, monospace;

	/* Motion */
	--bb-ease: cubic-bezier(.2, .7, .2, 1);
	--bb-build-ms: 900ms;
}

/* Focus: always visible, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--bb-action);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: #CFE3F2; color: var(--bb-ink); }

/* ---------- Utilities (add in Elementor → Advanced → CSS Classes) ---------- */

/* Sticky header: put "bb-sticky" on the header template's outer container.
   The header plugin wraps that container in its own <header>, and sticky only
   works on the element whose parent is the full page, so the rule goes on the
   <header> that contains .bb-sticky (generic tag, not a plugin class). */
/* !important: the header plugin sets position:relative with an ID selector. */
header:has(.bb-sticky) {
	position: sticky !important;
	top: 0;
	z-index: 100;
}
.admin-bar header:has(.bb-sticky) { top: 32px; }
@media (max-width: 782px) { .admin-bar header:has(.bb-sticky) { top: 0; } }

.bb-sticky {
	background: rgba(251, 251, 253, .88);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--bb-line);
}

/* Small uppercase label above headings. */
.bb-eyebrow, .bb-eyebrow * {
	font-family: var(--bb-font-sans) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	color: var(--bb-muted);
}

/* Italic serif accent inside a heading: wrap words in <em> in the editor. */
.bb-accent em { color: var(--bb-steel-ink); font-style: italic; }


/* Headings wrap into even lines (no one-word last line). */
.bb-accent .elementor-heading-title, h1.bb-accent, h2.bb-accent, .bb-accent h1, .bb-accent h2 { text-wrap: balance; }
/* In the main (h1) headline the italic phrase gets its own balanced line. */
.bb-accent h1 em, h1.bb-accent em { display: block; text-wrap: balance; }

/* ---------- Layout helpers used on the homepage ----------
   All optional: remove the class in Elementor and the element falls back
   to its normal Elementor styling. */

/* Text-style button: no pill, lines up with the text above it. */
.bb-link a {
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: transparent !important;
	color: var(--bb-action) !important;
	font-weight: 500;
}
.bb-link a:hover, .bb-link a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Soft panel behind the hero logo. */
.bb-hero-mark {
	background: radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, var(--bb-mist) 75%) !important;
	border: 1px solid var(--bb-line);
	border-radius: 28px;
}
@media (max-width: 767px) {
	.bb-hero-mark { padding: 24px !important; border-radius: 22px; }
	.bb-hero-mark img { max-width: 170px !important; }
}

/* Recent-work row: two browser shots and a phone shot, same height, tops aligned. */
.bb-work-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, .8fr);
	gap: 28px !important;
	padding: 10px 0 !important;  /* space for the lift shadow */
	align-items: start;
}
.bb-work-row > * {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 12px 20px !important;  /* room around the shot so the hover lift reads as a card */
	background: #FFFFFF;
	border: 1px solid var(--bb-line);
	border-radius: 22px;
}
.bb-work-row > * > * { padding-left: 8px; padding-right: 8px; }   /* text inset; image overrides below */
.bb-work-row .bb-work-shot { padding: 0 !important; margin-bottom: 10px !important; }
.bb-work-shot img {
	display: block;
	width: 100% !important;
	height: clamp(240px, 24vw, 380px) !important;
	object-fit: cover;
	object-position: top center;
	border-radius: 12px;
	border: 1px solid var(--bb-line);
	background: var(--bb-mist);
}
@media (max-width: 767px) {
	.bb-work-row { grid-template-columns: 1fr; gap: 40px !important; }
	.bb-work-shot img { height: auto !important; aspect-ratio: 16 / 11; }
	.bb-work-phone .bb-work-shot img { aspect-ratio: 9 / 14; max-width: 260px; }
}

/* White card holding a stacked list (No lock-in section). */
.bb-list-card {
	background: #FFFFFF;
	border: 1px solid var(--bb-line);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 18px 40px -28px rgba(11, 18, 32, .25);
}

/* Pricing card. */
.bb-price-card {
	background: #FFFFFF !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: 20px !important;
}

/* Header menu: keep every item on one line on desktop; on tablet/phone
   (where it becomes a menu button) give it just the button's width. */
@media (min-width: 1025px) {
	.bb-nav { flex: none !important; }
	.bb-nav ul { flex-wrap: nowrap !important; }
	.bb-nav li { white-space: nowrap; }
}
@media (max-width: 1024px) {
	.bb-nav { width: 44px !important; flex: 0 0 44px !important; }
}

/* Button text never wraps onto two lines (header button). */
.bb-nowrap a { white-space: nowrap; }

/* ---------- Inner-page layout helpers ----------
   Put the class on an Elementor container; its children become the grid items.
   Remove the class and the container falls back to Elementor's own layout. */

.bb-grid {
	display: grid !important;
	gap: 24px !important;
	align-items: stretch;
}
.bb-grid > * { width: auto !important; max-width: none !important; margin: 0 !important; }
.bb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
	.bb-cols-3, .bb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.bb-cols-2, .bb-cols-3 { grid-template-columns: 1fr; }
	.bb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; }
}

/* Heading on the left, content on the right. */
.bb-split {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 24px 64px !important;
	align-items: start;
}
.bb-split > * { width: auto !important; max-width: none !important; margin: 0 !important; }
@media (max-width: 767px) { .bb-split { grid-template-columns: 1fr; } }

/* Cards. */
.bb-card {
	background: #FFFFFF !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: 20px !important;
	padding: 28px !important;
}
.bb-card-mist { background: var(--bb-mist) !important; border-color: transparent !important; }
.bb-card-feature { border-color: var(--bb-steel) !important; box-shadow: 0 0 0 1px var(--bb-steel), 0 22px 40px -28px rgba(11, 18, 32, .35); }

/* Check-mark list: on a Text Editor widget containing a bulleted list. */
.bb-checks ul { list-style: none; margin: 0; padding: 0; }
.bb-checks li { position: relative; padding: 6px 0 6px 30px; border-top: 1px solid var(--bb-line); }
.bb-checks li:first-child { border-top: 0; }
.bb-checks li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .85em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--bb-action);
	border-bottom: 2px solid var(--bb-action);
	transform: rotate(-45deg);
}
/* Same list, crossed out (things not included). */
.bb-crosses li::before {
	border: 0;
	width: 14px;
	height: 2px;
	top: 1.05em;
	background: var(--bb-muted);
	transform: none;
}

/* Large serif step number ("01"). */
.bb-num, .bb-num * {
	font-family: var(--bb-font-serif) !important;
	font-style: italic;
	font-size: 44px !important;
	line-height: 1 !important;
	color: var(--bb-steel) !important;
}

/* Small label above a fact ("My role"). */
.bb-label, .bb-label * {
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	color: var(--bb-muted) !important;
	margin-bottom: 2px !important;
}

/* Framed screenshot. */
.bb-shot img {
	display: block;
	width: 100% !important;
	height: auto !important;
	border-radius: 18px;
	border: 1px solid var(--bb-line);
	box-shadow: 0 1px 2px rgba(11, 18, 32, .05), 0 30px 60px -36px rgba(11, 18, 32, .35);
	background: var(--bb-mist);
}
.bb-shot-tile img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 12px; box-shadow: none; }
.bb-shot-phone img { max-width: 320px; margin: 0 auto; }

/* Big price line in a pricing card. */
.bb-price, .bb-price * {
	font-family: var(--bb-font-serif) !important;
	font-size: 40px !important;
	line-height: 1.05 !important;
	color: var(--bb-ink) !important;
}
.bb-price em, .bb-price small { font-family: var(--bb-font-sans) !important; font-style: normal; font-size: 15px !important; color: var(--bb-muted) !important; }

/* Placeholder text that still needs real content (search the site for "bb-todo" before launch). */
.bb-todo, .bb-todo * { color: #9A5B00 !important; }
.bb-todo { background: #FFF7E6 !important; border: 1px dashed #E3B35C !important; border-radius: 12px; padding: 14px 18px !important; }

/* Closing call-to-action row: logo mark + text. */
.bb-cta-row { display: grid !important; grid-template-columns: 160px minmax(0, 1fr); gap: 40px !important; align-items: center !important; }
.bb-cta-row > * { width: auto !important; margin: 0 !important; }
@media (max-width: 767px) { .bb-cta-row { grid-template-columns: 1fr; gap: 24px !important; } .bb-cta-row > :first-child { max-width: 110px; } }

/* Intro paragraph under a page heading: comfortable line length. */
.bb-lead { max-width: 680px; }

/* Work page: three equal cards (phone shot cropped like the others). */
.bb-work-row.bb-work-even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .bb-work-row.bb-work-even { grid-template-columns: 1fr; } }

/* Grid items fill the row height (equal-height cards). */
.bb-grid > * { align-self: stretch !important; }

/* FAQ accordion (Elementor Accordion widget with "bb-faq"): readable question titles. */
.bb-faq h3, .bb-faq h3 a {
	font-family: var(--bb-font-sans) !important;
	font-size: 19px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
}

/* ---------- Contact page ---------- */
.bb-contact-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 40px 72px !important;
	align-items: start;
}
.bb-contact-grid > * { width: auto !important; max-width: none !important; margin: 0 !important; }
@media (max-width: 900px) { .bb-contact-grid { grid-template-columns: 1fr; } }

/* Numbered "what happens next" list (Text Editor with an ordered list). */
.bb-next ol { list-style: none; counter-reset: bbnext; margin: 0; padding: 0; }
.bb-next li { counter-increment: bbnext; position: relative; padding: 4px 0 18px 52px; }
.bb-next li::before {
	content: counter(bbnext);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bb-mist);
	color: var(--bb-steel-ink);
	font: italic 400 20px/36px var(--bb-font-serif);
	text-align: center;
}

/* Form card: styles the form plugin's fields by element, inside our own class. */
.bb-form { padding: 36px !important; box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 30px 60px -40px rgba(11, 18, 32, .35); }
@media (max-width: 767px) { .bb-form { padding: 24px !important; } }
.bb-form label { font: 500 15px/1.4 var(--bb-font-sans) !important; color: var(--bb-ink) !important; margin-bottom: 6px !important; }
.bb-form input[type="text"],
.bb-form input[type="email"],
.bb-form input[type="url"],
.bb-form textarea {
	width: 100% !important;
	min-height: 52px;
	box-sizing: border-box;
	padding: 12px 16px !important;
	border: 1px solid #C9D3DF !important;
	border-radius: 12px !important;
	background: #FFFFFF !important;
	font: 400 17px/1.4 var(--bb-font-sans) !important; /* 16px+ stops phones zooming in */
	color: var(--bb-ink) !important;
	box-shadow: none !important;
	transition: border-color 150ms linear, box-shadow 150ms linear;
}
.bb-form input:focus, .bb-form textarea:focus {
	border-color: var(--bb-action) !important;
	box-shadow: 0 0 0 4px rgba(20, 114, 163, .15) !important;
	outline: none !important;
}
.bb-form button[type="submit"] {
	width: 100%;
	min-height: 54px;
	margin-top: 8px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--bb-action) !important;
	color: #FFFFFF !important;
	font: 600 17px/1 var(--bb-font-sans) !important;
	cursor: pointer;
	transition: background 150ms linear, transform 150ms var(--bb-ease);
}
.bb-form button[type="submit"]:hover { background: #0F5F89 !important; }
.bb-form button[type="submit"]:focus-visible { outline: 3px solid var(--bb-ink) !important; outline-offset: 3px; }
.bb-form .error, .bb-form .text-danger { color: #B42318 !important; font-size: 14px !important; margin-top: 6px; }
.bb-form .ff-message-success {
	border: 0 !important;
	border-radius: 14px;
	background: #EAF6EF !important;
	color: #1E5B3A !important;
	padding: 20px 22px !important;
	font-size: 18px;
	box-shadow: none !important;
}

/* ---------- Services page ---------- */

/* Bento grid: tiles of different sizes. Children: bb-tile (+ bb-tile-wide / bb-tile-big / bb-tile-mist / bb-tile-ink). */
.bb-bento {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 16px !important;
}
.bb-bento > * { width: auto !important; max-width: none !important; margin: 0 !important; }
.bb-tile {
	position: relative;
	overflow: hidden;
	padding: 26px !important;
	border-radius: 22px;
	background: #FFFFFF;
	border: 1px solid var(--bb-line);
	justify-content: flex-start !important;
}
.bb-tile-wide { grid-column: span 2; }
.bb-tile-big { grid-column: span 2; grid-row: span 2; }
.bb-tile-mist { background: var(--bb-mist); border-color: transparent; }
.bb-tile-ink { background: var(--bb-ink); border-color: transparent; }
.bb-tile-ink, .bb-tile-ink * { color: #FFFFFF !important; }
.bb-tile-ink .bb-stat, .bb-tile-ink .bb-stat * { color: #9CC9E6 !important; }
.bb-stat, .bb-stat * {
	font-family: var(--bb-font-serif) !important;
	font-size: clamp(52px, 6vw, 84px) !important;
	line-height: .95 !important;
	letter-spacing: -.02em;
	color: var(--bb-steel) !important;
	margin: 0 0 6px !important;
}
/* "Phones first" tile: text on top, a laptop and phone showing a real site
   below. Put two Image widgets in a container with .bb-devices; give them
   .bb-dev-laptop and .bb-dev-phone. Swap the images in the editor anytime. */
.bb-tile-phone { gap: 10px !important; }
.bb-devices {
	position: relative;
	width: 100% !important;
	height: clamp(230px, 22vw, 300px);
	margin-top: auto !important;
	flex: none;
}
.bb-dev-laptop, .bb-dev-phone { position: absolute !important; margin: 0 !important; }
.bb-dev-laptop { left: 6%; bottom: 14px; width: 70% !important; }
.bb-dev-laptop img {
	display: block;
	width: 100% !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
	border: 7px solid #1F2329;
	border-bottom-width: 9px;
	border-radius: 12px 12px 0 0;
	background: #FFFFFF;
}
.bb-dev-laptop::after {
	content: "";
	position: absolute;
	left: -7%;
	right: -7%;
	bottom: -12px;
	height: 12px;
	border-radius: 0 0 14px 14px;
	background: linear-gradient(#D5DCE5, #AEB8C5);
	box-shadow: 0 18px 30px -18px rgba(11, 18, 32, .5);
}
.bb-dev-phone { right: 3%; bottom: 0; width: 25% !important; max-width: 150px; z-index: 2; }
.bb-dev-phone img {
	display: block;
	width: 100% !important;
	aspect-ratio: 9 / 18.5;
	object-fit: cover;
	object-position: top center;
	border: 6px solid #0B1220;
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 0 24px 40px -18px rgba(11, 18, 32, .55);
}
@media (max-width: 1024px) {
	.bb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bb-bento { grid-template-columns: 1fr; }
	.bb-tile-wide, .bb-tile-big { grid-column: auto; grid-row: auto; }
	.bb-devices { height: 220px; }
}

/* Menu-style list with dotted leaders. Each item: bb-menu-item containing
   a heading (name), a bb-menu-price text, and a description. */
.bb-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 56px !important; }
.bb-menu > * { width: auto !important; margin: 0 !important; }
@media (max-width: 767px) { .bb-menu { grid-template-columns: 1fr; } }
.bb-menu-item { padding: 22px 0 !important; border-top: 1px solid var(--bb-line); display: grid !important; grid-template-columns: auto 1fr auto; column-gap: 12px; align-items: baseline; }
.bb-menu-item > * { margin: 0 !important; width: auto !important; }
.bb-menu-item::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin-bottom: 7px;
	border-bottom: 2px dotted #B8C3D0;
}
.bb-menu-item > :nth-child(1) { grid-column: 1; grid-row: 1; }
.bb-menu-item > :nth-child(2) { grid-column: 3; grid-row: 1; }
.bb-menu-item > :nth-child(n+3) { grid-column: 1 / -1; margin-top: 6px !important; }
.bb-menu-price, .bb-menu-price * { font: 500 13px/1.2 var(--bb-font-mono) !important; letter-spacing: .04em; color: var(--bb-steel-ink) !important; text-transform: uppercase; }

/* "Owner: You" account cards. */
.bb-own { text-align: left; }
.bb-own .bb-label { margin-bottom: 18px !important; }
.bb-own-who, .bb-own-who * { font: italic 400 34px/1 var(--bb-font-serif) !important; color: var(--bb-action) !important; margin: 0 !important; }

/* ---------- About & FAQ ---------- */

/* Image placeholder (swap for a real Image widget later). Text Editor with "bb-ph". */
.bb-ph {
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 24px !important;
	border: 2px dashed #B8C3D0;
	border-radius: 22px;
	background:
		radial-gradient(120% 90% at 20% 10%, #FFFFFF 0%, var(--bb-mist) 70%);
	text-align: center;
}
.bb-ph, .bb-ph * { font: 500 13px/1.4 var(--bb-font-mono) !important; color: var(--bb-muted) !important; letter-spacing: .03em; }
.bb-ph-tall { aspect-ratio: 4 / 5; }
.bb-ph-wide { aspect-ratio: 16 / 10; }
.bb-ph-square { aspect-ratio: 1 / 1; }

/* Hero with copy on the left and a portrait on the right. */
.bb-hero-split {
	display: grid !important;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px 72px !important;
	align-items: center !important;
}
.bb-hero-split > * { width: auto !important; margin: 0 !important; }
@media (max-width: 900px) { .bb-hero-split { grid-template-columns: 1fr; } }

/* Small floating caption chip over a photo. Put "bb-float" on a Text Editor
   right after the image (inside the same container with "bb-float-wrap"). */
.bb-float-wrap { position: relative; }
.bb-float {
	position: absolute !important;
	left: -18px;
	bottom: 28px;
	width: auto !important;
	max-width: 240px;
	padding: 12px 16px !important;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 2px 6px rgba(11, 18, 32, .14), 0 22px 44px -14px rgba(11, 18, 32, .5);
	transform: rotate(-3deg);
}
.bb-float, .bb-float * { font-size: 15px !important; line-height: 1.35 !important; margin: 0 !important; }
@media (max-width: 900px) { .bb-float { left: 12px; bottom: 12px; } }

/* Dark section (set the section's own background to Ink in Elementor too). */
.bb-on-ink, .bb-on-ink * { color: #FFFFFF; }
.bb-on-ink .bb-eyebrow, .bb-on-ink .bb-eyebrow *, .bb-on-ink .bb-label, .bb-on-ink .bb-label * { color: #9AA8BA !important; }
.bb-on-ink .bb-stat, .bb-on-ink .bb-stat * { color: #9CC9E6 !important; }
.bb-on-ink h1, .bb-on-ink h2, .bb-on-ink h3, .bb-on-ink h4 { color: #FFFFFF !important; }
.bb-on-ink .bb-accent em { color: #9CC9E6 !important; }

/* Zigzag rows: image and text side by side, alternating. */
.bb-zig {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px 72px !important;
	align-items: center !important;
}
.bb-zig > * { width: auto !important; margin: 0 !important; }
.bb-zig-rev > :first-child { order: 2; }
@media (max-width: 767px) {
	.bb-zig { grid-template-columns: 1fr; }
	.bb-zig-rev > :first-child { order: 0; }
}

/* Pill links (FAQ categories). Button widgets with "bb-pill". */
.bb-pill a {
	background: #FFFFFF !important;
	color: var(--bb-ink) !important;
	border: 1px solid var(--bb-line) !important;
	border-radius: 999px !important;
	padding: 12px 20px !important;
	min-height: 44px;
	font-weight: 500 !important;
}
.bb-pill a:hover, .bb-pill a:focus-visible { border-color: var(--bb-action) !important; color: var(--bb-action) !important; }

/* FAQ group card: number + heading on the left, questions on the right. */
.bb-faq-group {
	display: grid !important;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 24px 56px !important;
	align-items: start !important;
	padding: 40px !important;
	border-radius: 28px;
	background: #FFFFFF;
	border: 1px solid var(--bb-line);
	scroll-margin-top: 96px;
}
.bb-faq-group > * { width: auto !important; margin: 0 !important; }
@media (max-width: 900px) { .bb-faq-group { grid-template-columns: 1fr; padding: 24px !important; } }

/* Footer links: bigger tap targets on phones (44px guideline). Add .bb-foot-links to a footer widget. */
@media (max-width: 767px) {
  .bb-foot-links a { display: inline-block; padding-block: 10px; }
  .bb-foot-links li { margin: 0; }
}

/* ==========================================================================
   Home: "What I do" (intro on the left, three pillars on the right)
   Container .bb-what > two containers; right one is .bb-pillars holding
   .bb-pillar containers (label, heading, text).
   ========================================================================== */
.bb-what {
	display: grid !important;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 6vw, 96px) !important;
	align-items: start !important;
}
.bb-what > * { width: auto !important; max-width: none !important; }
.bb-what-note, .bb-what-note * { font-size: 16px !important; color: var(--bb-muted) !important; }
.bb-pillars { gap: 0 !important; }
.bb-pillar {
	position: relative;
	display: grid !important;
	grid-template-columns: 88px minmax(0, 1fr);
	column-gap: 8px !important;
	row-gap: 8px !important;
	padding: 34px 0 !important;
	border-top: 1px solid var(--bb-line);
}
.bb-pillar:last-child { border-bottom: 1px solid var(--bb-line); }
.bb-pillar > * { grid-column: 2; width: auto !important; }
.bb-pillar > .bb-pillar-num { grid-column: 1; grid-row: 1 / span 2; }
.bb-pillar-num, .bb-pillar-num * {
	font: italic 400 64px/.9 var(--bb-font-serif) !important;
	color: var(--bb-steel) !important;
	margin: 0 !important;
}
.bb-pillar h3 { font-size: clamp(26px, 2.6vw, 34px) !important; margin: 0 !important; }
.bb-pillar p { font-size: 17px; line-height: 1.6; }
.bb-pillar::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 0;
	height: 2px;
	background: var(--bb-action);
	transition: width 600ms var(--bb-ease);
}
.bb-pillar:hover::before, .bb-pillar.is-in::before { width: 88px; }
@media (max-width: 900px) {
	.bb-what { grid-template-columns: minmax(0, 1fr); }
	.bb-pillar { grid-template-columns: 56px minmax(0, 1fr); padding: 26px 0 !important; }
	.bb-pillar-num, .bb-pillar-num * { font-size: 44px !important; }
}

/* ==========================================================================
   Home: the ownership story (three demo sections read as one timeline).
   Put .bb-story on each section and .bb-story-step on its eyebrow. A dotted
   thread runs up from each eyebrow into the section above.
   ========================================================================== */
.bb-story-step { position: relative; }
.bb-story-step p {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.bb-story-step p::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bb-action);
	box-shadow: 0 0 0 5px rgba(20, 114, 163, .14);
	flex: none;
}
.bb-story + .bb-story .bb-story-step::before {
	content: "";
	position: absolute;
	left: 5px;
	bottom: calc(100% + 4px);
	width: 2px;
	height: 120px;
	background: repeating-linear-gradient(to bottom, rgba(20, 114, 163, .45) 0 6px, transparent 6px 12px);
	-webkit-mask: linear-gradient(transparent, #000 40%);
	mask: linear-gradient(transparent, #000 40%);
	pointer-events: none;
}
.bb-story-end, .bb-story-end * { font-size: 17px !important; color: var(--bb-muted) !important; }

/* ==========================================================================
   Home: slim full-width CTA banner. Section .bb-banner (ink), with a row
   container .bb-banner-row holding a heading and a button. Button colors
   are set on the widget itself (white button, ink text).
   ========================================================================== */
.bb-banner-row { justify-content: space-between !important; }
.bb-banner-row h2 { font-size: clamp(30px, 3.6vw, 46px) !important; margin: 0 !important; }
.bb-banner .bb-accent em { color: #FFFFFF !important; } /* light blue fails contrast on the action-blue banner */
.bb-banner .bb-banner-btn, .bb-banner .bb-banner-btn * { color: var(--bb-ink) !important; } /* beats .bb-on-ink white text */
@media (max-width: 767px) {
	.bb-banner-row { flex-direction: column !important; align-items: flex-start !important; }
}

/* In-text links: blue and underlined so they stand out from body copy.
   Only plain links inside paragraphs (buttons and menus have classes). */
.bb-live p a:not([class]) {
	color: var(--bb-action) !important;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
}
.bb-live p a:not([class]):hover, .bb-live p a:not([class]):focus-visible { color: var(--bb-ink) !important; text-decoration-thickness: 2px; }
.bb-live .bb-on-ink p a:not([class]), .bb-live .bb-tile-ink p a:not([class]) { color: #9CC9E6 !important; }
.bb-live .bb-on-ink p a:not([class]):hover, .bb-live .bb-tile-ink p a:not([class]):hover { color: #FFFFFF !important; }
.bb-live .bb-foot-links p a:not([class]) { text-decoration: none; font-weight: inherit; }

/* ==========================================================================
   Work: project showcase rows. Section (tint it in Elementor) > container
   .bb-show (add .bb-show-rev to flip sides) holding .bb-show-text and a
   .bb-devices container (.bb-devices-lg for the big size). Device options:
   .bb-dev-laptop, .bb-dev-phone, .bb-dev-phone2 (second phone), .bb-dev-card.
   ========================================================================== */
.bb-show {
	display: grid !important;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 6vw, 88px) !important;
	align-items: center !important;
}
.bb-show > * { width: auto !important; max-width: none !important; }
.bb-show-rev > .bb-devices { order: -1; }
.bb-show h2 { font-size: clamp(40px, 5vw, 68px) !important; line-height: 1 !important; }
.bb-show-facts { gap: 10px !important; padding-top: 18px !important; border-top: 1px solid rgba(11, 18, 32, .14); }
.bb-on-ink .bb-show-facts { border-top-color: rgba(255, 255, 255, .18); }
.bb-show-facts p { font-size: 16px; line-height: 1.55; }
.bb-show-facts strong { font-weight: 600; }
.bb-devices-lg { height: auto !important; aspect-ratio: 16 / 9.6; } /* height follows width so the laptop always fits */
.bb-devices-duo.bb-devices-lg { aspect-ratio: 16 / 11; }
.bb-dev-laptop img, .bb-dev-phone img, .bb-dev-phone2 img, .bb-dev-card img { transition: transform 500ms var(--bb-ease); }
.bb-devices:hover .bb-dev-phone img, .bb-devices:hover .bb-dev-card img { transform: translateY(-8px); }
.bb-dev-phone2 { position: absolute !important; margin: 0 !important; left: 12%; bottom: 34px; width: 30% !important; max-width: 210px; z-index: 1; }
.bb-dev-phone2 img {
	display: block;
	width: 100% !important;
	aspect-ratio: 9 / 18.5;
	object-fit: cover;
	object-position: top center;
	border: 6px solid #0B1220;
	border-radius: 24px;
	background: #FFFFFF;
	box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55);
	rotate: -6deg;
}
.bb-dev-card { position: absolute !important; margin: 0 !important; right: 0; bottom: 0; width: 44% !important; z-index: 2; }
.bb-dev-card img {
	display: block;
	width: 100% !important;
	border: 6px solid #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 24px 44px -18px rgba(11, 18, 32, .5);
	rotate: 3deg;
}
.bb-show-rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.bb-devices-lg .bb-dev-laptop { left: 0; width: 82% !important; }
.bb-devices-lg .bb-dev-phone { width: 24% !important; max-width: 190px; }
.bb-devices-duo .bb-dev-phone { right: 18%; width: 31% !important; max-width: 220px; }
.bb-devices-duo .bb-dev-phone2 { left: 16%; }
.bb-devices-duo img { aspect-ratio: auto !important; }
.bb-on-ink .bb-dev-phone img, .bb-on-ink .bb-dev-phone2 img { border-color: #2A3445; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 50px -20px rgba(0, 0, 0, .8); }
.bb-on-ink .bb-show-facts p, .bb-on-ink .bb-show-facts p * { color: #C9D3E0 !important; }
.bb-on-ink .bb-show-facts strong { color: #FFFFFF !important; }
@media (max-width: 900px) {
	.bb-show, .bb-show-rev { grid-template-columns: minmax(0, 1fr); }
	.bb-show-rev > .bb-devices { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bb-devices:hover .bb-dev-phone img, .bb-devices:hover .bb-dev-card img { transform: none; }
}

/* Image elements dropped straight into our layouts (Elementor's newer
   "Image" element renders a bare <img> with no size cap). Keep them inside
   their column, and give photo grids a tidy, even crop. */
.bb-zig > img, .bb-float-wrap > img, .bb-hero-split img { max-width: 100% !important; height: auto; }
.bb-zig > img { width: 100% !important; max-height: 560px; object-fit: cover; border-radius: 18px; }
.bb-grid > img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 18px 36px -24px rgba(11, 18, 32, .45);
	transition: transform 500ms var(--bb-ease), box-shadow 500ms var(--bb-ease);
}
@media (min-width: 768px) {
	.bb-cols-4 > img:nth-child(even) { margin-top: 28px; } /* gentle stagger */
}
.bb-grid > img:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -22px rgba(11, 18, 32, .5); }
@media (prefers-reduced-motion: reduce) { .bb-grid > img:hover { transform: none; } }

.bb-main:focus { outline: none; } /* skip-link target */

/* 404 page (404.php in this theme). */
.bb-404 { max-width: 760px; margin: 0 auto; padding: clamp(72px, 12vw, 160px) 24px; }
.bb-404:focus { outline: none; }
.bb-404-code { margin: 0; font: italic 400 clamp(96px, 16vw, 180px)/.9 var(--bb-font-serif); color: var(--bb-steel); }
.bb-404 h1 { margin: 12px 0 16px; font-family: var(--bb-font-serif); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; color: var(--bb-ink); }
.bb-404-lead { font-size: 19px; color: var(--bb-muted); max-width: 34em; }
.bb-404-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.bb-404-links a { display: inline-block; padding: 12px 20px; border: 1px solid var(--bb-line); border-radius: 999px; background: #FFFFFF; color: var(--bb-ink); text-decoration: none; font-weight: 500; }
.bb-404-links a:hover, .bb-404-links a:focus-visible { border-color: var(--bb-action); color: var(--bb-action); }

/* Long-form text pages (Accessibility, Privacy). */
.bb-prose { max-width: 720px; }
.bb-prose ul { padding-left: 1.2em; }
.bb-prose li { margin: 6px 0; font-size: 17px; line-height: 1.6; }
.bb-prose h2 { margin-top: 18px !important; }

.bb-devices a { display: block; } /* linked images: keep the frame sized before the image loads */

/* ==========================================================================
   Case studies. Content section gets .bb-cs; each story row (.bb-split)
   gets .bb-cs-step, which adds a big number (01, 02, 03) automatically.
   The signature row also gets .bb-cs-signature (dark highlight panel).
   The "Next:" button gets .bb-next-big.
   ========================================================================== */
.bb-cs { counter-reset: bbcs; }
.bb-cs-step { counter-increment: bbcs; position: relative; padding-top: 44px !important; border-top: 1px solid var(--bb-line); }
.bb-cs-step:first-child { border-top: 0; padding-top: 0 !important; }
.bb-cs-step > :first-child::before {
	content: counter(bbcs, decimal-leading-zero);
	display: block;
	/* Elementor uses a container's ::before for background overlays (absolutely
	   positioned). Put ours back in the normal flow so it sits above the text. */
	position: static !important;
	inset: auto !important;
	width: auto !important;
	height: auto !important;
	opacity: 1 !important;
	mix-blend-mode: normal !important;
	background: none !important;
	border: 0 !important;
	margin-bottom: 14px;
	font: italic 400 clamp(56px, 6vw, 84px)/.9 var(--bb-font-serif);
	color: var(--bb-steel);
}
.bb-cs-signature {
	margin-top: 12px !important;
	padding: clamp(28px, 4vw, 56px) !important;
	border-top: 0 !important;
	border-radius: 24px;
	background: var(--bb-ink);
	box-shadow: 0 40px 70px -40px rgba(11, 18, 32, .6);
}
.bb-cs-signature, .bb-cs-signature * { color: #FFFFFF !important; }
.bb-cs-signature .bb-eyebrow, .bb-cs-signature .bb-eyebrow * { color: #9AA8BA !important; }
.bb-cs-signature .bb-accent em, .bb-cs-signature > :first-child::before { color: #9CC9E6 !important; }
.bb-cs-signature .bb-checks li::before { color: #9CC9E6 !important; }
.bb-cs-media { padding-top: 24px !important; }
.bb-cs-media .bb-devices { width: 100% !important; max-width: 900px !important; margin-inline: auto !important; }
.bb-next-big a { font: 400 clamp(26px, 3vw, 38px)/1.1 var(--bb-font-serif) !important; }

/* ==========================================================================
   Home hero: a real client site on a laptop and phone. The laptop screen
   slowly scrolls through a tall full-page screenshot (.bb-dev-scroll), pauses
   on hover, and stays still for reduced-motion visitors. Swap either image in
   the editor; any tall screenshot works.
   ========================================================================== */
.bb-hero-show { gap: 14px !important; }
.bb-devices-hero { width: 100% !important; align-self: stretch !important; height: auto !important; aspect-ratio: 16 / 11; margin-top: 0 !important; }
.bb-devices-hero .bb-dev-laptop { left: 0; bottom: 14px; width: 86% !important; }
.bb-devices-hero .bb-dev-phone { right: 0; width: 26% !important; max-width: 170px; }
.bb-dev-scroll img { object-position: 50% 0%; animation: bb-scrollshot 26s ease-in-out infinite; }
@keyframes bb-scrollshot {
	0%, 10% { object-position: 50% 0%; }
	45%, 55% { object-position: 50% 100%; }
	90%, 100% { object-position: 50% 0%; }
}
.bb-devices-hero:hover .bb-dev-scroll img { animation-play-state: paused; }
.bb-hero-cap, .bb-hero-cap * { font-size: 14px !important; color: var(--bb-muted) !important; text-align: center; }
.bb-live .bb-hero-cap p a:not([class]) { color: var(--bb-action) !important; }
@media (prefers-reduced-motion: reduce) { .bb-dev-scroll img { animation: none; } }

/* ==========================================================================
   "Signature piece" badge. One look everywhere the idea shows up (Home,
   Work, case studies, Services). Use it two ways:
   - inside text:   <span class="bb-sig-badge">Signature piece</span>
   - on a widget:   add bb-sig-badge to a short Text Editor widget
   Warm clay is reserved for this badge so it reads as its own thing.
   ========================================================================== */
span.bb-sig-badge,
.bb-sig-badge p {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 5px 11px;
	border-radius: 999px;
	background: #FBF1E8;
	color: #9A4524 !important;
	font: 600 12px/1.2 var(--bb-font-mono) !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
}
span.bb-sig-badge::before,
.bb-sig-badge p::before {
	content: "✦";
	font-size: 11px;
}
.bb-on-ink span.bb-sig-badge,
.bb-on-ink .bb-sig-badge p,
.bb-cs-signature span.bb-sig-badge,
.bb-cs-signature .bb-sig-badge p {
	background: rgba(242, 180, 138, .14);
	color: #F2B48A !important;
}