/* BMA Studio – theme styles.
   Design tokens come from theme.json; this file adds layout and components. */

/* ---------- Tokens ---------- */

/* Accent colours come from the settings (--bma-accent); html:root outranks
   the palette that theme.json prints on :root. */
html:root {
	--wp--preset--color--accent: var(--bma-accent, #ff4a3d);
	--wp--preset--color--accent-2: var(--bma-accent-2, #5b8cff);
	--shadow: rgb(0 0 0 / 0.7);
	--ok: #4ade80;
	color-scheme: dark;
}

/* Light appearance: same roles, other values. */
html:root[data-theme="light"] {
	--wp--preset--color--base: #f6f5f1;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--line: #dcdad3;
	--wp--preset--color--muted: #5c5c66;
	--wp--preset--color--contrast: #0b0b0d;
	--wp--preset--color--accent: color-mix(in srgb, var(--bma-accent, #ff4a3d) 84%, #000);
	--wp--preset--color--accent-2: color-mix(in srgb, var(--bma-accent-2, #5b8cff) 78%, #000);
	--shadow: rgb(20 20 30 / 0.28);
	--ok: #15803d;
	color-scheme: light;
}

/* Short names used throughout this file. They are declared wherever the
   palette changes, because a custom property keeps the value it had where
   it was declared. */
:root,
.bma-event {
	--bg: var(--wp--preset--color--base);
	--surface: var(--wp--preset--color--surface);
	--line: var(--wp--preset--color--line);
	--muted: var(--wp--preset--color--muted);
	--fg: var(--wp--preset--color--contrast);
	--accent: var(--wp--preset--color--accent);
	--em-fill: var(--bg);
}

:root {
	--mono: var(--wp--preset--font-family--mono);

	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--wide: 1240px;
	--section: clamp(4.5rem, 10vw, 9rem);
	--radius: 20px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */

html {
	scroll-padding-top: 5.5rem;
	overflow-x: clip;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection {
	background: var(--accent);
	color: var(--bg);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

img {
	max-width: 100%;
	height: auto;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Grid and flex containers manage their own spacing. */
body :is(
	.bma-header__inner,
	.bma-hero,
	.bma-devices,
	.bma-cards,
	.bma-event,
	.bma-features,
	.bma-section__head,
	.bma-steps,
	.bma-contact__grid,
	.bma-meta,
	.bma-footer__inner
) > * {
	margin-block: 0;
}

/* ---------- Type primitives ---------- */

.bma-eyebrow {
	margin: 0 0 1.25rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.bma-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 2px;
	margin-right: 0.75em;
	vertical-align: middle;
	background: currentColor;
}

.bma-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.bma-eyebrow .wp-block-post-terms__separator {
	color: var(--muted);
}

.bma-title {
	max-width: 18ch;
	margin: 0;
	text-wrap: balance;
}

/* Signature: outlined italic, echoing the BMA Studio wordmark.
   Stroke is painted under a background-coloured fill, which hides the
   overlapping contours of the variable font. */
:is(.bma-title, .bma-hero__title) em {
	font-style: italic;
	font-weight: 400;
	color: var(--em-fill);
	-webkit-text-stroke: 2.5px var(--fg);
	paint-order: stroke fill;
	letter-spacing: -0.005em;
}

.bma-lead {
	max-width: 46ch;
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.45;
	color: var(--muted);
	text-wrap: pretty;
}

/* ---------- Buttons ---------- */

.wp-block-buttons {
	gap: 0.75rem;
	margin-top: 2.25rem;
}

.wp-element-button {
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, translate 0.2s var(--ease);
	cursor: pointer;
}

.wp-element-button:active {
	translate: 0 1px;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.9em 1.5em;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--fg);
}

.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--fg);
	background: transparent;
	color: var(--fg);
}

/* ---------- Header ---------- */

.bma-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	view-transition-name: bma-header;
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   would trap the fixed mobile menu overlay inside the header box. */
.bma-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.admin-bar .bma-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .bma-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .bma-header {
		top: 0;
	}
}

.bma-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: var(--wide);
	margin-inline: auto;
	padding: 1rem var(--gutter);
	box-sizing: content-box;
}

.bma-logo {
	flex: none;
	margin: 0;
	line-height: 0;
}

.bma-logo,
.bma-logo img {
	width: 126px;
	height: auto;
}

.bma-nav {
	--wp--style--block-gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.bma-nav .wp-block-navigation-item__content {
	color: var(--muted);
	transition: color 0.2s;
}

.bma-nav .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	color: var(--fg);
}

.bma-nav .bma-nav__cta .wp-block-navigation-item__content {
	padding: 0.6em 1.15em;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--fg);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.bma-nav .bma-nav__cta .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	border-color: var(--fg);
	background: var(--fg);
	color: var(--bg);
}

/* The logo is a white image: turn it dark on the light appearance. */
html[data-theme="light"] .bma-logo img {
	filter: invert(1);
}

.bma-nav {
	margin-left: auto;
}

/* Dark / light switch */
.bma-theme-switch {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.bma-theme-switch:is(:hover, :focus-visible) {
	border-color: var(--fg);
	color: var(--fg);
}

.bma-theme-switch span {
	display: grid;
}

html[data-theme="light"] .bma-theme-switch__to-light,
html:not([data-theme="light"]) .bma-theme-switch__to-dark {
	display: none;
}

.bma-theme-switch .screen-reader-text,
.bma-dock .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Language switcher */
.bma-lang {
	display: flex;
	flex: none;
	gap: 0.15rem;
	margin: 0;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.bma-lang a {
	padding: 0.35em 0.5em;
	border-radius: 6px;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s;
}

.bma-lang a:is(:hover, :focus-visible) {
	color: var(--fg);
}

.bma-lang a[aria-current] {
	color: var(--fg);
	background: var(--line);
}

/* The menu, the button, the languages and the switch do not fit side by
   side below 900px (German runs out first), so tablets get the menu button
   too. Core switches at 600px; these two rules carry it up to 899px. */
@media (min-width: 600px) and (max-width: 899px) {
	.bma-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.bma-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

@media (max-width: 899px) {
	.bma-header__inner {
		gap: 0.75rem;
	}

	.bma-lang {
		order: 2;
	}

	.bma-nav {
		order: 3;
		margin-left: 0;
	}

	.bma-lang {
		margin-left: auto;
	}

	.bma-theme-switch {
		order: 2;
	}
}

.bma-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem var(--gutter);
}

.bma-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
}

.bma-nav .is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) {
	align-items: flex-start !important;
}

.bma-nav .is-menu-open .wp-block-navigation__container {
	gap: 1.5rem;
	font-size: var(--wp--preset--font-size--xl);
}

.bma-nav .is-menu-open .wp-block-navigation-item__content {
	color: var(--fg);
}

.bma-nav .is-menu-open .bma-nav__cta .wp-block-navigation-item__content {
	padding: 0.5em 1em !important;
}

/* ---------- Sections ---------- */

.bma-section,
.bma-hero {
	max-width: var(--wide);
	margin-inline: auto;
	padding: var(--section) var(--gutter);
	box-sizing: content-box;
}

.bma-section--top {
	padding-top: clamp(3rem, 7vw, 6rem);
}

.bma-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
}

.bma-more a {
	display: inline-flex;
	gap: 0.5em;
	font-weight: 500;
	text-decoration: none;
}

.bma-more a::after {
	content: "→";
	transition: translate 0.25s var(--ease);
}

.bma-more a:hover::after {
	translate: 0.3em 0;
}

/* ---------- Hero ---------- */

.bma-hero {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-top: clamp(3rem, 8vw, 6.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 960px) {
	.bma-hero {
		grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
		column-gap: 2.5rem;
	}

	.bma-facts {
		grid-column: 1 / -1;
	}
}

.bma-hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 4.8vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* The wordmark ends in an underscore – so does the headline. */
.bma-hero__title em::after {
	content: "_";
	font-style: normal;
	color: var(--accent);
	-webkit-text-stroke: 0;
}

/* ---------- Device frames ---------- */

.bma-devices {
	position: relative;
	padding: 0 0 9% 14%;
	isolation: isolate;
}

.bma-devices::before {
	content: "";
	position: absolute;
	inset: -12% 0 -4%;
	z-index: -1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
	filter: blur(30px);
	opacity: 0.75;
}

.bma-devices figure {
	margin: 0;
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 30px 60px -20px var(--shadow);
}

.bma-devices img {
	display: block;
	width: 100%;
}

.bma-browser {
	padding-top: 1.75rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background:
		radial-gradient(circle at 1rem 0.875rem, #ff5f57 0.25rem, transparent 0.28rem),
		radial-gradient(circle at 1.9rem 0.875rem, #febc2e 0.25rem, transparent 0.28rem),
		radial-gradient(circle at 2.8rem 0.875rem, #28c840 0.25rem, transparent 0.28rem),
		var(--surface) !important;
}

/* Laptop: an empty frame with the screenshot fitted into its screen. */
.bma-devices .bma-laptop {
	position: relative;
	aspect-ratio: 1613 / 960;
	overflow: visible;
	background: url("../img/laptop-frame.webp") center / contain no-repeat;
	box-shadow: none;
}

.bma-devices .bma-laptop img {
	position: absolute;
	top: 10.6%;
	left: 13.55%;
	width: 72.9%;
	height: 79%;
	object-fit: cover;
	object-position: top;
}

.bma-devices--hero {
	padding: 0 0 6% 5%;
}

.bma-devices--hero .bma-phone {
	width: 23%;
}

.bma-devices--solo {
	padding-left: 0;
}

/* On wide screens the laptop runs out towards the edge of the window:
   it uses the free space beside the content column, up to 12rem. */
@media (min-width: 960px) {
	.bma-slides {
		margin-right: clamp(-12rem, calc((var(--wide) - 100vw) / 2 - 1rem), -1.5rem);
	}
}

/* ---------- Hero slider ---------- */

.bma-slides {
	display: grid;
	position: relative;
}

body .bma-slides > *,
body .bma-slide > * {
	margin-block: 0;
}

.bma-slide {
	grid-area: 1 / 1;
	align-self: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s var(--ease), visibility 0s 0.7s;
}

.bma-slide.is-active,
.bma-slides:not(.is-ready) > .bma-slide:first-child {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.bma-slide__caption {
	padding: 1.1rem 14% 0 5%;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	text-align: right;
}

.bma-slide__caption a {
	color: var(--muted);
	text-decoration: none;
}

.bma-slide__caption a::after {
	content: " →";
}

.bma-slide__caption a:is(:hover, :focus-visible) {
	color: var(--fg);
}

.bma-slides__dots {
	display: flex;
	grid-area: 2 / 1;
	gap: 0.4rem;
	justify-content: flex-end;
	padding: 0.9rem 14% 0 5%;
}

.bma-slides__dots button {
	width: 1.75rem;
	height: 1.25rem;
	padding: 0;
	border: 0;
	background: linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat;
	cursor: pointer;
	transition: background-color 0.2s;
}

.bma-slides__dots button[aria-current="true"] {
	background-image: linear-gradient(var(--accent), var(--accent));
}

.bma-slides__dots button:hover {
	background-image: linear-gradient(var(--fg), var(--fg));
}

@media (max-width: 959px) {
	.bma-slide__caption,
	.bma-slides__dots {
		padding-inline: 0;
	}
}

/* ---------- App mockups (BMA Event) ---------- */

/* --size is the width of one mockup, --step the distance between two
   neighbours; both are shares of the row. The pictures have a wide empty
   margin, so they overlap. */
.bma-apps {
	--size: 64%;
	--step: 29%;
	display: flex;
	justify-content: center;
	max-width: 42rem;
	margin-inline: auto;
}

@media (min-width: 960px) {
	.bma-apps {
		--size: 68%;
		--step: 33.3%;
		max-width: none;
	}
}

body .bma-apps > * {
	margin-block: 0;
}

.bma-apps__item {
	flex: none;
	width: var(--size);
	margin: 0 calc((var(--step) - var(--size)) / 2);
}

.bma-apps__item img {
	display: block;
	width: 100%;
	/* The mockups carry a soft translucent backdrop; fade its edges out. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 9%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent);
	mask-composite: intersect;
}

.bma-apps__item:nth-child(2) {
	z-index: 1;
	translate: 0 -6%;
}

.bma-phone {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 31%;
	border: 5px solid #23232b;
	border-radius: clamp(1rem, 2.4vw, 1.75rem);
	outline: 1px solid #3a3a45;
}

/* ---------- Facts ---------- */

.bma-facts {
	display: grid;
	gap: 1.25rem 2rem;
	margin: 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

@media (min-width: 700px) {
	.bma-facts {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.bma-facts strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 560;
	letter-spacing: -0.01em;
	color: var(--fg);
}

/* ---------- Service cards ---------- */

.bma-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	counter-reset: card;
}

.bma-card {
	display: flex;
	flex-direction: column;
	min-height: 17rem;
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	counter-increment: card;
	transition: border-color 0.3s, translate 0.3s var(--ease);
}

.bma-card:hover {
	border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
	translate: 0 -4px;
}

.bma-card::before {
	content: "0" counter(card);
	margin-bottom: auto;
	padding-bottom: 2.5rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--accent);
}

.bma-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.01em;
}

.bma-card p {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--muted);
}

.bma-card .bma-card__tags {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

/* ---------- BMA Event band ---------- */

/* The band stays dark in both appearances: it sets its own palette. */
html:root .bma-event {
	--wp--preset--color--base: #0f1322;
	--wp--preset--color--surface: #161b2e;
	--wp--preset--color--line: #262d47;
	--wp--preset--color--muted: #a3a3ad;
	--wp--preset--color--contrast: #f4f3ef;
	--wp--preset--color--accent: var(--bma-accent-2, #5b8cff);
	--band: #0f1322;
	color: var(--fg);
}

.bma-event {

	display: grid;
	gap: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	background: var(--band);
	box-shadow: 0 0 0 100vmax var(--band);
	clip-path: inset(0 -100vmax);
}

@media (min-width: 960px) {
	.bma-event {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.bma-event__trust {
		grid-column: 1 / -1;
	}
}

.bma-features {
	display: grid;
	margin-top: 2.25rem;
}

.bma-feature {
	padding: 1rem 0;
	border-top: 1px solid var(--line);
}

.bma-feature:last-child {
	border-bottom: 1px solid var(--line);
}

@media (min-width: 560px) {
	.bma-feature {
		display: grid;
		grid-template-columns: 13rem 1fr;
		gap: 1.5rem;
		align-items: baseline;
	}
}

.bma-feature__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.bma-feature p {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

.bma-event__price {
	max-width: 52ch;
	margin: 1.75rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

.bma-event__price strong {
	color: var(--fg);
}

.bma-event__trust {
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.03em;
	color: var(--muted);
}

.bma-event__trust strong {
	font-weight: 500;
	color: var(--fg);
}

/* ---------- Project grid ---------- */

.bma-work {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.bma-work .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
	gap: clamp(2rem, 4vw, 3rem) 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bma-work--archive .wp-block-post-template {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.bma-work .wp-block-post {
	position: relative;
	margin: 0;
}

.bma-work .wp-block-post > * {
	margin-block: 0;
}

.bma-work .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	margin-bottom: 1.25rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.bma-work .wp-block-post-featured-image :is(a, img) {
	display: block;
	width: 100%;
	height: 100%;
}

.bma-work .wp-block-post-featured-image img {
	object-fit: cover;
	object-position: top;
	transition: scale 0.6s var(--ease);
}

.bma-work .wp-block-post:hover .wp-block-post-featured-image img {
	scale: 1.04;
}

.bma-work .bma-eyebrow {
	margin-bottom: 0.4rem;
	color: var(--muted);
}

.bma-work .bma-eyebrow::before {
	display: none;
}

.bma-work .wp-block-post-title {
	font-weight: 560;
	letter-spacing: -0.01em;
}

/* Whole card is the link target. */
.bma-work .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bma-work .bma-eyebrow a {
	position: relative;
	z-index: 1;
}

/* ---------- Category filter ---------- */

.bma-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

body .bma-filterbar > * {
	margin-block: 0;
}

.bma-filter {
	display: contents;
	list-style: none;
}

.bma-filterbar a {
	display: block;
	padding: 0.5em 1em;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.3;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.bma-filterbar a:is(:hover, :focus-visible) {
	border-color: var(--fg);
	color: var(--fg);
}

.bma-filterbar .current-cat > a,
.post-type-archive-bma_project .bma-filter__all a {
	border-color: var(--fg);
	background: var(--fg);
	color: var(--bg);
}

/* ---------- Client logos ---------- */

.bma-logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: 0.75rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

body .bma-logos > * {
	margin-block: 0;
}

/* Light tiles keep any logo readable in both appearances. Every tile has
   the same shape; the logo is fitted inside whatever its proportions. */
.bma-logos__item {
	position: relative;
	aspect-ratio: 3 / 2;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
}

.bma-logos__item--dark {
	background: #17171c;
}

.bma-logos__item img {
	position: absolute;
	inset: 20% 14%;
	width: 72%;
	height: 60%;
	object-fit: contain;
	filter: grayscale(1);
	transition: filter 0.3s;
}

.bma-logos__item:hover img {
	filter: none;
}

/* ---------- Client wall ---------- */

.bma-clients {
	padding-block: 0;
}

.bma-wall {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(1.375rem, 3.1vw, 2.625rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.bma-wall li:not(:last-child)::after {
	content: "/";
	margin-inline: 0.4em;
	font-weight: 300;
	color: var(--accent);
}

/* ---------- Testimonials ---------- */

.bma-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

body .bma-quotes > * {
	margin-block: 0;
}

.bma-quote {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.bma-quote::before {
	content: "“";
	height: 2.25rem;
	font-size: 3.5rem;
	line-height: 1;
	color: var(--accent);
}

.bma-quote p {
	margin: 0 0 1.5rem;
	line-height: 1.55;
}

.bma-quote cite {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	color: var(--muted);
}

.bma-quote cite strong {
	font-weight: 600;
	color: var(--fg);
}

/* ---------- FAQ ---------- */

.bma-faq {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

body .bma-faq > * {
	margin-block: 0;
}

@media (min-width: 960px) {
	.bma-faq {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}
}

.bma-faq__item {
	margin: 0;
	border-top: 1px solid var(--line);
}

.bma-faq__item:last-child {
	border-bottom: 1px solid var(--line);
}

.bma-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
}

.bma-faq__item summary::-webkit-details-marker {
	display: none;
}

.bma-faq__item summary::after {
	content: "+";
	flex: none;
	font-weight: 300;
	font-size: 1.5em;
	line-height: 1;
	color: var(--accent);
	transition: rotate 0.25s var(--ease);
}

.bma-faq__item[open] summary::after {
	rotate: 45deg;
}

.bma-faq__item p {
	max-width: 60ch;
	margin: 0 0 1.5rem;
	color: var(--muted);
}

/* ---------- About ---------- */

.bma-about {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 0;
}

body .bma-about > * {
	margin-block: 0;
}

@media (min-width: 960px) {
	.bma-about {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: end;
	}
}

.bma-about__text p {
	margin: 0 0 1.1rem;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
}

.bma-team {
	padding-bottom: 0;
}

.bma-team .bma-steps {
	margin-top: 0;
	counter-reset: none;
}

.bma-member {
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.bma-member p {
	margin: 0.4rem 0 0;
	color: var(--muted);
}

.bma-company {
	padding-top: 0;
}

.bma-company__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.5rem 2.5rem;
	margin: 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.bma-company__list strong {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---------- Process ---------- */

.bma-statement {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	font-weight: 500;
	line-height: 1.12;
	text-wrap: balance;
}

.bma-statement em {
	font-style: normal;
	color: var(--muted);
}

.bma-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 2rem 2.5rem;
	margin-top: clamp(3rem, 6vw, 5rem);
	counter-reset: step;
}

.bma-step {
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	counter-increment: step;
}

.bma-step::before {
	content: "0" counter(step);
	display: block;
	margin-bottom: 1.25rem;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--accent);
}

.bma-step__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.01em;
}

.bma-step p {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

.bma-stack {
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	font-family: var(--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	color: var(--muted);
}

/* ---------- Contact ---------- */

/* Wrappers that only exist so a settings switch can remove their content. */
.wp-block-group[class*="bma-if-"]:not(.bma-meta, .bma-pager) {
	display: contents;
}

/* Hairline aligned with the content column, only between sections. */
.bma-section + .bma-contact,
[class*="bma-if-"] > .bma-contact {
	background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

.bma-contact__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 960px) {
	.bma-contact__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

.bma-contact__details {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
}

.bma-contact__details li + li {
	margin-top: 0.35rem;
}

.bma-contact__details a {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--accent);
}

.bma-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.bma-form p {
	margin: 0;
}

.bma-form__trap {
	position: absolute;
	left: -9999px;
}

.bma-form__field--wide,
.bma-form__actions,
.bma-form__status {
	grid-column: 1 / -1;
}

@media (max-width: 520px) {
	.bma-form__field {
		grid-column: 1 / -1;
	}
}

.bma-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--muted);
}

.bma-form label span {
	font-weight: 400;
	opacity: 0.7;
}

.bma-form :is(input, textarea) {
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	color: var(--fg);
	font: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.bma-form select {
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	color: var(--fg);
	font: inherit;
	box-sizing: border-box;
}

.bma-form select:focus {
	border-color: var(--accent);
	outline: none;
}

.bma-contact__intro .wp-block-buttons {
	margin-top: 1.75rem;
}

.bma-footer__legal a {
	color: inherit;
}

.bma-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.bma-form :is(input, textarea):focus {
	border-color: var(--accent);
	outline: none;
}

.bma-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.bma-form button {
	padding: 0.9em 1.5em;
	border: 0;
	border-radius: 999px;
}

.bma-form button:disabled {
	opacity: 0.6;
	cursor: progress;
}

.bma-form__note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--muted);
}

.bma-form__status:empty {
	display: none;
}

.bma-form__status {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.bma-form__status[data-state="ok"] {
	color: var(--ok);
}

.bma-form__status[data-state="error"] {
	color: var(--accent);
}

/* ---------- Footer ---------- */

.bma-footer {
	border-top: 1px solid var(--line);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
}

.bma-footer__inner {
	display: grid;
	gap: 2rem;
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
	box-sizing: content-box;
}

@media (min-width: 760px) {
	.bma-footer__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.bma-footer__legal {
		grid-column: 1 / -1;
	}
}

.bma-footer__brand p {
	max-width: 28ch;
	margin: 1rem 0 0;
}

.bma-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bma-footer__links li + li {
	margin-top: 0.5rem;
}

.bma-footer__links a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s;
}

.bma-footer__links a:hover {
	color: var(--fg);
}

.bma-footer__legal {
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 0.75rem;
}

/* ---------- Mobile quick-contact bar ---------- */

/* Phones only. See inc/mobile.php. */
.bma-dock {
	display: none;
}

@media (max-width: 599px) {
	.bma-dock {
		display: flex;
		position: fixed;
		right: var(--gutter);
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		left: var(--gutter);
		z-index: 40;
		gap: 0.4rem;
		align-items: center;
		padding: 0.4rem;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: color-mix(in srgb, var(--surface) 82%, transparent);
		box-shadow: 0 18px 40px -14px var(--shadow);
		backdrop-filter: blur(14px) saturate(1.4);
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		view-transition-name: bma-dock;
		transition: translate 0.45s var(--ease), opacity 0.3s, visibility 0s;
	}

	/* Out of the way: top of the page, contact section, footer, open menu,
	   or while the visitor is typing. */
	.bma-dock.is-away,
	.has-modal-open .bma-dock,
	body:has(:is(input, textarea, select):focus) .bma-dock {
		translate: 0 calc(100% + 2rem);
		opacity: 0;
		visibility: hidden;
		transition: translate 0.45s var(--ease), opacity 0.3s, visibility 0s 0.45s;
	}

	.bma-dock a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		border-radius: 999px;
		color: var(--fg);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.2s, color 0.2s, scale 0.2s var(--ease);
	}

	.bma-dock a:active {
		scale: 0.96;
	}

	.bma-dock__icon {
		flex: none;
		width: 2.75rem;
		border: 1px solid var(--line);
	}

	.bma-dock .bma-dock__cta {
		flex: 1;
		padding-inline: 1rem;
		background: var(--fg);
		color: var(--bg);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
	}

	.bma-dock__cta::after {
		content: "→";
		margin-left: 0.5em;
	}
}

@media print {
	.bma-dock {
		display: none;
	}
}

/* ---------- Articles, pages, news ---------- */

.bma-article {
	padding-block: clamp(3rem, 7vw, 6rem) var(--section);
}

.bma-article > .bma-title {
	max-width: var(--wp--style--global--content-size);
	margin-bottom: 2.5rem;
}

.bma-article__image img,
.bma-project__image img {
	display: block;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.wp-block-post-content {
	color: color-mix(in srgb, var(--fg) 86%, var(--bg));
}

.wp-block-post-content a {
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.wp-block-post-content :is(h2, h3, h4) {
	margin-top: 2.5em;
	color: var(--fg);
}

.wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--xl);
}

.wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--lg);
}

.bma-posts .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bma-posts .wp-block-post {
	padding-block: 2rem;
	border-top: 1px solid var(--line);
}

.bma-posts .wp-block-post > * {
	margin-block: 0;
}

.bma-posts .wp-block-post-excerpt {
	margin-top: 0.75rem;
	color: var(--muted);
}

.bma-pager {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-weight: 500;
}

.bma-pager a {
	text-decoration: none;
}

/* ---------- Single project ---------- */

.bma-project__head {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.bma-project .bma-title {
	max-width: 20ch;
}

.bma-project .bma-lead {
	max-width: 60ch;
}

.bma-project .bma-lead p {
	margin: 0;
}

.bma-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.bma-meta__item:has(.bma-meta__value:empty) {
	display: none;
}

.bma-meta p {
	margin: 0;
}

.bma-meta__label {
	margin-bottom: 0.25rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.bma-project__image {
	margin: 0;
}

.bma-project__image img {
	max-height: 80vh;
	object-fit: cover;
	object-position: top;
}

.bma-project__content {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Project page extras ---------- */

.bma-project__visit {
	margin-top: 2rem;
}

.bma-related {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--line);
}

.bma-related__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.bma-related .bma-work {
	margin-top: 2rem;
}

.bma-related .wp-block-post-featured-image {
	margin: 0 0 1.25rem;
}

/* ---------- Generic sections for new pages ---------- */

.bma-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

body .bma-split > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.bma-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.bma-split__media {
	margin: 0;
}

.bma-split__media img {
	display: block;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.bma-cta {
	text-align: center;
}

.bma-cta .bma-title {
	max-width: none;
}

.bma-cta .wp-block-buttons {
	justify-content: center;
}

.wp-block-post-content > .bma-section:first-child {
	padding-top: clamp(3rem, 7vw, 6rem);
}

/* ---------- Motion ---------- */

@keyframes bma-rise {
	from {
		opacity: 0;
		translate: 0 2.5rem;
	}
}

@keyframes bma-header-solid {
	to {
		border-bottom-color: var(--line);
	}
}

@keyframes bma-blink {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Cross-page transitions, no JavaScript. */
	@view-transition {
		navigation: auto;
	}

	.bma-hero__title em::after {
		animation: bma-blink 1.1s steps(1) infinite;
	}

	.bma-hero__copy > *,
	.bma-hero .bma-slides {
		animation: bma-rise 0.9s var(--ease) both;
	}

	.bma-hero__copy > :nth-child(2) { animation-delay: 0.06s; }
	.bma-hero__copy > :nth-child(3) { animation-delay: 0.12s; }
	.bma-hero__copy > :nth-child(4) { animation-delay: 0.18s; }
	.bma-hero .bma-slides { animation-delay: 0.2s; }

	/* Scroll-driven reveals and header hairline where supported. */
	@supports (animation-timeline: view()) {
		.bma-section > *,
		.bma-work .wp-block-post {
			animation: bma-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}

		.bma-header {
			animation: bma-header-solid linear both;
			animation-timeline: scroll(root);
			animation-range: 0 8rem;
		}
	}
}

@supports not (animation-timeline: view()) {
	.bma-header {
		border-bottom-color: var(--line);
	}
}