/*
 * 2026 reskin: tier grid, comparison table and full-width image sections, the house colour schemes
 * for landing pages, the homepage Studio panel, and the About page on the Team template. Loaded after style.css. Colours come from custom
 * properties so the Studio and Contract schemes only redefine the palette.
 */

body {
	--bbi-ink: #353b3f;
	--bbi-mute: #6b665f;
	--bbi-line: hsla(0, 0%, 44%, 0.35);
	--bbi-surface: #fff;
	--bbi-page: #f9f9f9;
}

/* ---------------------------------------------------------------- Utilities */

/* A heading for search engines and screen readers where the design shows none. */
.bbi-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Tier grid */

.landing-tiers {
	margin: 60px 0 100px;
}

.landing-tiers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--bbi-ink);
	padding: 0 15px;
}

.landing-tiers-item {
	display: flex;
	flex-direction: column;
	padding: 28px 32px 34px;
	border-right: 1px solid var(--bbi-line);
}

.landing-tiers-item:first-child {
	padding-left: 0;
}

.landing-tiers-item:last-child {
	padding-right: 0;
	border-right: 0;
}

.landing-tiers-item-number,
.landing-tiers-item-lead,
.landing-tiers-item-investment span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.landing-tiers-item-number,
.landing-tiers-item-investment span {
	color: var(--bbi-mute);
}

.landing-tiers .landing-tiers-item-name {
	margin: 14px 0 8px;
	padding: 0;
	font-family: minerva-modern, serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
}

.landing-tiers-item-intro {
	margin: 18px 0 20px;
	line-height: 1.9;
}

.landing-tiers-item-list {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	border-top: 1px solid var(--bbi-line);
}

.landing-tiers-item-list li {
	position: relative;
	padding: 11px 0 11px 20px;
	border-bottom: 1px solid var(--bbi-line);
	font-size: 13px;
	line-height: 1.7;
}

.landing-tiers-item-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 19px;
	width: 6px;
	height: 6px;
	border: 1px solid var(--bbi-ink);
	border-radius: 50%;
}

.landing-tiers-item-investment {
	margin-top: auto;
}

.landing-tiers-item-investment strong {
	display: block;
	margin-top: 6px;
	font-family: minerva-modern, serif;
	font-size: 36px;
	font-weight: 400;
}

@media (max-width: 900px) {
	.landing-tiers-grid {
		grid-template-columns: 1fr;
	}

	.landing-tiers-item,
	.landing-tiers-item:first-child,
	.landing-tiers-item:last-child {
		padding: 28px 0;
		border-right: 0;
		border-bottom: 1px solid var(--bbi-line);
	}
}

/* ---------------------------------------------------------------- Comparison table */

.landing-comparison {
	margin: 60px 0 100px;
}

.landing-comparison-scroll {
	overflow-x: auto;
	padding: 0 15px;
}

.landing-comparison-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 13px;
	line-height: 1.6;
}

.landing-comparison-table th,
.landing-comparison-table td {
	padding: 14px 18px 14px 0;
	border-bottom: 1px solid var(--bbi-line);
	text-align: left;
	vertical-align: top;
}

.landing-comparison-table thead th {
	border-bottom-color: var(--bbi-ink);
	font-family: minerva-modern, serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
}

.landing-comparison-table tbody th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.landing-comparison-table tbody tr:last-child td {
	font-family: minerva-modern, serif;
	font-size: 22px;
	line-height: 1.3;
}

/* ---------------------------------------------------------------- Full-width image section */

/* The text + image section with its image placed behind the text. The photo is shaded from the left
   so the text reads in light ink on any page, and fades into the page colour at the top and bottom. */
.landing-feature {
	--bbi-ink: #efe7da;
	--bbi-mute: #b9a796;
	--bbi-line: rgba(239, 231, 218, 0.18);
	position: relative;
	display: flex;
	align-items: center;
	min-height: 900px;
	padding: 120px 0 130px;
	background-color: #2a1c17;
	color: var(--bbi-ink);
}

.landing-feature-image {
	position: absolute;
	inset: 0;
	background-position: 72% 30%;
	background-repeat: no-repeat;
	background-size: cover;
}

.landing-feature-image:before,
.landing-feature-image:after {
	content: "";
	position: absolute;
	inset: 0;
}

.landing-feature-image:before {
	background: linear-gradient(to right, rgba(15, 12, 9, 0.82), rgba(15, 12, 9, 0.55) 45%, rgba(15, 12, 9, 0.1) 75%);
}

.landing-feature-image:after {
	background: linear-gradient(to bottom, var(--bbi-page) 0, transparent 14%, transparent 86%, var(--bbi-page));
}

.landing-feature .container {
	position: relative;
	z-index: 2;
}

.landing-feature a:link,
.landing-feature a:visited {
	color: var(--bbi-ink);
}

.landing-feature .lead-content:before {
	border-bottom-color: var(--bbi-ink);
}

.landing-feature .landing-icons-block-content-icon img {
	filter: invert(1) brightness(0.94);
}

.landing-feature .landing-icons-block {
	border-top-color: var(--bbi-line);
}

.landing-feature .landing-icons-block-subtitle {
	color: var(--bbi-mute);
}

/* Below tablet width the text sits above the photo, shaded from the top instead. */
@media (max-width: 991px) {
	.landing-feature {
		display: block;
		min-height: 0;
		padding: 80px 0 420px;
	}

	/* 85% keeps Lauren whole and roughly centred on phones. */
	.landing-feature-image {
		background-position: 85% 100%;
		background-size: auto 520px;
	}

	.landing-feature-image:before {
		background: linear-gradient(to bottom, rgba(15, 12, 9, 0.7), rgba(15, 12, 9, 0.2) 70%);
	}

	/* The photo is the bottom 520px: fade its top edge into the section, its bottom into the page. */
	.landing-feature-image:after {
		background: linear-gradient(to top, var(--bbi-page) 0, transparent 60px, transparent 340px, #2a1c17 520px);
	}
}

/* ---------------------------------------------------------------- Homepage Studio panel */

/* Lighter, warmer shading than the original black so more of the portrait shows, with the text kept
   to the shaded side. The copy keeps the panel's existing heading and paragraph styles. */
.home-black-content:after {
	background: linear-gradient(to right, rgba(15, 12, 9, 0.72), rgba(15, 12, 9, 0.25) 60%, rgba(15, 12, 9, 0.1));
}

.home-black-content-text {
	max-width: 560px;
}

/* Below tablet width the portrait sits under the text, as on the Studio page, instead of a centre
   crop of it filling the tall panel. Its top edge fades into the panel colour. */
@media (max-width: 991px) {
	.home-black-content {
		padding-bottom: 420px;
		background-color: #2a1c17;
		background-position: 85% 100%;
		background-size: auto 520px;
	}

	.home-black-content:after {
		background:
			linear-gradient(to top, transparent 340px, #2a1c17 520px),
			linear-gradient(to bottom, rgba(15, 12, 9, 0.7), rgba(15, 12, 9, 0.2) 70%);
	}
}

/* Use the original portrait without stretching it across the text or baking a wider canvas. */
.home-black-content.portrait-background,
.landing-feature-image.portrait-background {
	background-color: #2a1c17;
	overflow: hidden;
}

.portrait-background-photo {
	position: absolute;
	right: 0;
	bottom: -80px;
	height: 140%;
	width: auto;
	max-width: none;
	mask-image: linear-gradient(to right, transparent, #000 25%);
}

.home-black-content.portrait-background:after,
.landing-feature-image.portrait-background:before {
	z-index: 1;
	background: linear-gradient(to right, #2a1c17 15%, rgba(15, 12, 9, 0.55) 45%, rgba(15, 12, 9, 0.1) 75%);
}

.landing-feature-image.portrait-background:after {
	z-index: 1;
}

@media (max-width: 991px) {
	.portrait-background-photo {
		left: 70%;
		right: auto;
		bottom: 0;
		height: 660px;
		transform: translateX(-70%);
		mask-image: linear-gradient(to right, transparent, #000 15%, #000 90%, transparent);
	}

	.landing-feature-image.portrait-background:before {
		background: linear-gradient(to bottom, rgba(15, 12, 9, 0.7), rgba(15, 12, 9, 0.2) 70%);
	}

	.home-black-content.portrait-background:after {
		background:
			linear-gradient(to top, transparent 340px, #2a1c17 520px),
			linear-gradient(to bottom, rgba(15, 12, 9, 0.7), rgba(15, 12, 9, 0.2) 70%);
	}
}

/* Project CTA headings use CMS-selected heading tags; keep long words inside phone gutters. */
@media (max-width: 767px) {
	.case-studies-single-content-contact-title > :is(h1, h2, h3, h4, h5, h6) {
		font-size: 40px;
		overflow-wrap: anywhere;
	}
}

/* Landing hero headings are 65px on phones, at which words such as "remembered," run past the edge
   of narrower phones. Scale them with the screen below about 430px. */
@media (max-width: 767px) {
	.landing-hero-title > :is(h1, h2) {
		font-size: min(65px, 15vw);
	}
}

/* ---------------------------------------------------------------- Older templates on phones */

/* FAQ questions leave room for the absolutely positioned plus on their right. */
.faq-tab-title {
	padding-right: 32px;
}

/* Video embeds in project and post copy keep their 16:9 shape within the column instead of a fixed
   width. */
:is(.case-studies-single-content-intro-wrap, .editor) iframe:is([src*="youtube.com/embed"], [src*="player.vimeo.com"]) {
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------- Newsletter signup */

/* The signup heading is an h2 at the site's large h2 size, at which "BOWERBIRD" is wider than a
   phone's signup box. */
@media (max-width: 767px) {
	.subscribe-title h2,
	.home-blog-subscribe-title h2 {
		font-size: 40px;
	}
}

/* ---------------------------------------------------------------- About (Team template) */

/* The founders quote sits under the intro, set in the serif used for the page's headings. */
.team-hero-text blockquote {
	margin: 50px 0 0;
	padding: 0;
}

.team-hero-text blockquote p {
	font-family: minerva-modern, serif;
	font-size: 24px;
	line-height: 1.4;
}

.team-hero-text blockquote cite {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Name and role under each portrait in the people carousel. */
.team-slider-caption {
	width: 350px;
	padding-top: 16px;
}

.team-slider-caption-name {
	font-family: minerva-modern, serif;
	font-size: 20px;
}

.team-slider-caption-role {
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.team-join-list-single {
	column-count: 1;
}

.team-join-list-single .team-join-list-item {
	max-width: 640px;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- House colour schemes */

body.theme-studio {
	--bbi-ink: #efe7da;
	--bbi-mute: #b9a796;
	--bbi-line: rgba(239, 231, 218, 0.18);
	--bbi-surface: #33231d;
	--bbi-page: #2a1c17;
	background-color: var(--bbi-page);
	color: var(--bbi-ink);
}

body.theme-contract {
	--bbi-mute: #6f8b99;
	--bbi-page: #e8ecec;
	background-color: var(--bbi-page);
}

body.theme-studio .footer {
	background-color: #1e1411;
}

/* Studio: reverse the light-page elements of the shared header, sections and form. Links in the menu
   overlay keep their dark ink, as its panels stay light; :where adds no specificity. */

body.theme-studio a:where(:not(.navigation a)):link,
body.theme-studio a:where(:not(.navigation a)):visited,
body.theme-studio .hero-header-navigation .menu li a,
body.theme-studio .header-navigation .menu li a {
	color: var(--bbi-ink);
}

body.theme-studio .hero-header-logo,
body.theme-studio .header-logo {
	background-image: url(../images/logo-white.svg);
}

body.theme-studio .hero-header-navigation-hamburger,
body.theme-studio .header-navigation-hamburger {
	background-image: url(../images/menu.svg);
}

body.theme-studio .header {
	background-color: rgba(42, 28, 23, 0.9);
}

/* Black line icons (social links, slider arrows, checklist ticks) become light. */
body.theme-studio .hero-header-social-list li a,
body.theme-studio .lead-nav,
body.theme-studio .landing-icons-block-content-icon img {
	filter: invert(1) brightness(0.94);
}

body.theme-studio .lead-content:before {
	border-bottom-color: var(--bbi-ink);
}

body.theme-studio .hero-scroller {
	color: rgba(239, 231, 218, 0.06);
}

body.theme-studio .landing-icons-block {
	border-top-color: var(--bbi-line);
}

body.theme-studio .landing-icons-block-subtitle {
	color: var(--bbi-mute);
}

body.theme-studio .contact-form input[type="email"],
body.theme-studio .contact-form input[type="text"],
body.theme-studio .contact-form select {
	border-bottom-color: rgba(239, 231, 218, 0.25);
	color: var(--bbi-ink) !important;
}

body.theme-studio .contact-form select option {
	color: #2a1c17;
}

body.theme-studio .contact-form input::placeholder {
	color: #8e7d6e;
}

body.theme-studio .contact-form input[type="submit"] {
	background-color: var(--bbi-ink);
	background-image: url(../images/arrow-right-black.svg);
	color: #2a1c17;
}

body.theme-studio .contact-form {
	background-color: var(--bbi-surface);
	border-color: rgba(239, 231, 218, 0.12);
}

body.theme-studio .footer-social li a {
	filter: invert(1) brightness(0.94);
}

/* Equal tracks also apply to tables in legacy landing sections and editorial content. */
.landing-single-process-item-table,
.services-single-pricing-wrap-content-table,
.editor table {
	width: 100%;
	table-layout: fixed;
}
:is(.landing-comparison-table, .landing-single-process-item-table, .services-single-pricing-wrap-content-table, .editor table) :is(th, td) {
	overflow-wrap: anywhere;
}

/* Keep the check beside long labels instead of wrapping it onto a separate row. */
.landing-icons-block-content {
	flex-wrap: nowrap;
}
.landing-icons-block-content-icon {
	flex: 0 0 30px;
}
.landing-icons-block-content-title {
	min-width: 0;
	flex: 1;
}
.case-studies-featured-content > .more {
	display: inline-block;
	margin-top: 24px;
}

/* Whole-pixel line heights keep the small tier bullets consistently rasterised between rows. */
.landing-tiers-item-list li {
	line-height: 22px;
}
@media (max-width: 767px) {
	.theme-contract .landing-hero-title > :is(h1, h2) {
		font-size: clamp(34px, 10.7vw, 44px);
	}
}

@media (min-width: 768px) {
	.landing-icons-block-content { align-items: flex-start; }
	.landing-icons-block-content-icon { margin-top: 9px; }
}