/*
Theme Name: ABAR
Theme URI: https://abarstudio.com/
Author: ABAR Studio
Author URI: https://abarstudio.com/
Description: Tema editorial, ligero y a medida para ABAR, agencia de marketing estratégico y creativo.
Version: 2.5.9
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: abar
*/

:root {
	--ink: #111111;
	--ink-soft: #30302e;
	--muted: #6f6f69;
	--line: #d8d6cf;
	--paper: #f7f6f3;
	--white: #ffffff;
	--orange: #ff6437;
	--blue: #a9c4c6;
	--green: #b6ca9d;
	--yellow: #f6e3a1;
	--pink: #e8a8b8;
	--whatsapp: #25d366;
	--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--shell: 1240px;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--space: clamp(5rem, 10vw, 10rem);
	--radius: 0;
	--shadow-soft: 0 14px 38px rgba(17, 17, 17, .055);
	--transition-fast: 250ms ease;
}

























































/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(247, 246, 242, .92);
	border-bottom: 1px solid transparent;
	backdrop-filter: blur(12px);
	transition: border-color .2s ease;
}



































.menu-service-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 26px;
	height: 26px;
	color: rgba(255, 255, 255, .62);
}

.menu-service-icon svg {
	width: 22px;
	height: 22px;
}

.primary-nav .sub-menu a:hover .menu-service-icon {
	color: var(--ink);
}











/* Homepage hero */
.hero {
	position: relative;
	min-height: min(860px, calc(100svh - 82px));
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: inherit;
	padding-top: clamp(2rem, 5vh, 4rem);
	padding-bottom: 1.75rem;
}



















.hero__mark {
	display: block;
	width: 18px;
	height: 18px;
	background: var(--orange);
}

.visual-placeholder {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 1px solid var(--ink);
	background: var(--blue);
}

.visual-placeholder::before,
.project-editorial__media::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 49.8%, rgba(17,17,17,.38) 50%, transparent 50.2%);
	content: "";
}

.visual-placeholder img,
.project-editorial__media img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.visual-placeholder span,
.project-editorial__media span {
	position: relative;
	z-index: 2;
	padding: .55rem .7rem;
	background: var(--paper);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Shared headings and statements */
















/* Work preview */






















/* Method */
















/* UGC bridge */








.ugc-panel__index {
	margin: clamp(3.5rem, 6vw, 6rem) 0 1.5rem;
	font-family: var(--font-serif);
	font-size: 1rem;
	font-style: italic;
}

.ugc-panel h2 {
	max-width: 680px;
	min-height: 4.8em;
	margin-bottom: 1.5rem;
	font-size: clamp(2.7rem, 5.4vw, 5.7rem);
}

.ugc-panel > p:not(.eyebrow):not(.ugc-panel__index):not(.ugc-panel__label) {
	max-width: 590px;
	min-height: 3.25em;
	margin-bottom: 2.25rem;
	font-size: 1.08rem;
}

.ugc-panel .button {
	align-self: flex-start;
	margin-top: auto;
}







.proof-strip {
	padding-block: 2rem;
	background: var(--blue);
	border-block: 1px solid var(--ink);
}

.proof-strip .section-shell {
	display: grid;
	grid-template-columns: .55fr 1fr;
	align-items: center;
	gap: 2rem;
}

.proof-strip p {
	margin-bottom: 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.proof-strip .section-shell > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}



/* Reviews */






.reviews__cards {
	display: grid;
	gap: 1rem;
}















/* FAQ */
























.faq-library__groups {
	display: grid;
	gap: clamp(4rem, 8vw, 8rem);
}

.faq-category-group {
	display: grid;
	grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
	gap: clamp(2rem, 7vw, 7rem);
}

.faq-category-group header h2 {
	font-size: clamp(2.4rem, 4.5vw, 4.8rem);
}

/* Blog preview */
.blog-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.2rem);
}

.blog-preview-grid article {
	min-width: 0;
	background: transparent;
}

.blog-preview-grid article a {
	display: block;
}

.blog-preview-grid article > a > span {
	display: block;
	margin-bottom: 1rem;
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.blog-preview-grid h3 {
	max-width: 560px;
	margin-bottom: 1rem;
	font-size: clamp(1.8rem, 2.7vw, 3rem);
}

.blog-preview-grid p {
	max-width: 550px;
	margin-bottom: 0;
	color: var(--ink-soft);
}

/* Experience and work */

































/* Interior page hero */














/* Service detail */
























/* UGC, creators and values */


























/* About */










/* Forms */






















.abar-form label small {
	display: block;
	margin-top: .55rem;
	color: var(--muted);
	font-size: .72rem;
}





































/* Blog and projects */








































.article-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding-bottom: var(--space);
}

.project-services,
.article-cta,
.related-posts {
	margin-bottom: var(--space);
}

.project-services {
	padding-block: 2rem;
	border-block: 1px solid var(--line);
}

.article-cta {
	padding: clamp(2rem, 5vw, 4.5rem);
	background: var(--yellow);
}

.article-cta h2 {
	max-width: 760px;
	font-size: clamp(2.8rem, 5vw, 5.4rem);
}

.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	padding-bottom: clamp(2rem, 4vw, 4rem);
}

.blog-filters a {
	padding: .55rem .75rem;
	border: 1px solid var(--ink);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.blog-filters a:hover,
.blog-filters a:focus-visible {
	background: var(--ink);
	color: var(--white);
}

.search-form {
	display: flex;
	gap: .6rem;
	margin-top: 2rem;
}

.search-form label {
	flex: 1 1 auto;
}

.search-field {
	width: 100%;
	min-height: 48px;
	padding: .7rem .8rem;
	border: 1px solid var(--ink);
	background: transparent;
}

.search-submit {
	min-height: 48px;
	padding: .7rem 1rem;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--white);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}













/* Footer */




























.whatsapp-float {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 950;
	display: flex;
	align-items: center;
	gap: .55rem;
	min-height: 56px;
	padding: .9rem 1.15rem;
	border: 1px solid rgba(17,17,17,.35);
	border-radius: 999px;
	background: var(--whatsapp);
	color: var(--ink);
	box-shadow: 0 12px 38px rgba(0,0,0,.24);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.whatsapp-float:hover {
	transform: translateY(-3px);
	background: #1ebe5d;
	color: var(--ink);
}



/* Responsive */
@media (max-width: 1080px) {
	.site-header__inner {
		grid-template-columns: 130px 1fr;
	}

	.primary-nav .menu {
		gap: 1rem;
	}

	.primary-nav .menu a {
		font-size: .72rem;
	}

	.primary-nav {
		gap: 1rem;
	}

	.project-editorial {
		grid-template-columns: 1fr 1fr;
	}

	.project-editorial__card:nth-child(2),
	.project-editorial__card:nth-child(3) {
		padding-top: 0;
	}

	.project-editorial__card:nth-child(3) {
		grid-column: 1 / -1;
		max-width: 52%;
		margin-left: auto;
	}

	.hero__content,
	.page-hero {
		grid-template-columns: 1fr;
	}

	.hero h1 {
		max-width: 980px;
	}

	.hero__intro,
	.page-hero__intro {
		max-width: 560px;
	}

	.page-hero h1 {
		align-self: end;
	}

	.page-hero__intro {
		align-self: start;
	}

	.method-grid,
	.need-grid,
	.principles-grid,
	.values-grid {
		grid-template-columns: 1fr 1fr;
	}

	.method-grid li:nth-child(2),
	.need-grid article:nth-child(2),
	.principles-grid article:nth-child(2),
	.values-grid article:nth-child(2) {
		border-right: 0;
	}

	.method-grid li,
	.need-grid article,
	.principles-grid article,
	.values-grid article {
		border-bottom: 1px solid var(--line);
	}

	.method-grid li:nth-child(3),
	.need-grid article:nth-child(3),
	.principles-grid article:nth-child(3),
	.values-grid article:nth-child(3) {
		padding-left: 0;
	}

	.footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr;
	}

	.footer-grid > div:last-child {
		grid-column: 2 / 3;
	}
}

@media (max-width: 820px) {
	:root {
		--space: clamp(4.5rem, 16vw, 7rem);
	}

	.site-header__inner {
		grid-template-columns: 1fr auto;
		min-height: 72px;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		gap: .75rem;
		padding: .5rem 0;
		border: 0;
		background: none;
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .07em;
		text-transform: uppercase;
	}

	.menu-toggle i,
	.menu-toggle i::before {
		display: block;
		width: 22px;
		height: 1px;
		background: var(--ink);
		content: "";
		transition: transform .2s ease;
	}

	.menu-toggle i::before {
		transform: translateY(-6px);
	}

	.menu-is-open .menu-toggle i {
		transform: rotate(45deg);
	}

	.menu-is-open .menu-toggle i::before {
		transform: rotate(-90deg);
	}

	.primary-nav {
		position: fixed;
		top: 72px;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 2rem var(--gutter) 3rem;
		background: var(--paper);
		overflow-y: auto;
	}

	.menu-is-open .primary-nav {
		display: flex;
	}

	.primary-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-nav .menu li {
		border-bottom: 1px solid var(--line);
	}

	.primary-nav .menu .menu-item-has-children {
		border-bottom: 0;
	}

	.primary-nav .menu a {
		display: block;
		padding: 1rem 0;
		font-size: clamp(1.7rem, 7vw, 2.8rem);
		font-weight: 500;
		letter-spacing: -.04em;
	}

	.primary-nav .menu a::after {
		display: none;
	}

	.primary-nav .sub-menu {
		position: static;
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		margin: 0;
		padding: 0 0 1rem;
		transform: none;
		background: var(--line);
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
	}

	.primary-nav .sub-menu a {
		min-height: 50px;
		padding: .65rem;
		background: var(--paper);
		color: var(--ink);
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: 0;
	}

	.header-cta {
		justify-content: space-between;
		margin-top: 1rem;
		padding: 1.1rem;
	}

	.hero {
		min-height: calc(100svh - 72px);
	}

	.hero__content {
		gap: 2.5rem;
	}

	.hero__footer p {
		max-width: 80%;
		line-height: 1.6;
	}

	.statement__grid,
	.section-heading--split,
	.experience,
	.home-contact,
	.custom-proposal,
	.service-detail,
		.form-section__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.section-heading--split > p,
	.experience__copy,
	.home-contact > div:last-child,
	.custom-proposal > div:last-child {
		max-width: 590px;
		padding-top: 0;
	}

	.ugc-bridge {
		grid-template-columns: 1fr;
	}

	.ugc-callout,
	.proof-strip .section-shell,
	.reviews,
	.faq__grid {
		grid-template-columns: 1fr;
	}

	.ugc-callout {
		align-items: start;
	}

	.proof-strip .section-shell > div {
		justify-content: flex-start;
		gap: .8rem 1.8rem;
	}

	.faq__intro {
		position: static;
	}

	.ugc-panel {
		min-height: 580px;
	}

	.project-grid,
	.journal-grid {
		grid-template-columns: 1fr 1fr;
	}

	.page-hero {
		min-height: 600px;
	}

	.service-detail {
		min-height: auto;
	}

	.service-detail__head {
		display: flex;
		align-items: baseline;
		gap: 1rem;
	}

	.service-detail__head span {
		margin-bottom: 0;
	}

	.process-list {
		grid-template-columns: 1fr 1fr;
	}

	.process-list li:nth-child(3n + 1) {
		padding-left: 1.5rem;
	}

	.process-list li:nth-child(3n) {
		border-right: 1px solid var(--line);
	}

	.process-list li:nth-child(odd) {
		padding-left: 0;
	}

	.process-list li:nth-child(even) {
		border-right: 0;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid > div:first-child {
		grid-column: 1 / -1;
	}

	.footer-grid > div:last-child {
		grid-column: auto;
	}
}

@media (max-width: 560px) {
	:root {
		--gutter: 1.2rem;
	}

	.hero h1,
	.page-hero h1 {
		font-size: clamp(3.1rem, 15vw, 5.2rem);
	}

	.hero__content {
		padding-block: 2.5rem;
	}

	.project-editorial,
	.blog-preview-grid {
		grid-template-columns: 1fr;
	}

	.project-editorial__card:nth-child(3) {
		grid-column: auto;
		max-width: none;
		margin-left: 0;
	}

	.project-editorial__media {
		aspect-ratio: 4 / 4.8;
	}

	.primary-nav .sub-menu {
		grid-template-columns: 1fr;
	}

	.hero__footer p {
		font-size: .6rem;
	}

	.section-heading h2,
	.statement h2,
	.experience h2,
	.home-contact h2,
	.custom-proposal h2 {
		font-size: clamp(2.6rem, 13vw, 4.3rem);
	}

	.method-grid,
	.need-grid,
	.principles-grid,
	.values-grid,
	.process-list,
	.project-grid,
	.journal-grid,
	.form-grid,
	.contact-routes {
		grid-template-columns: 1fr;
	}

	.method-grid li,
	.need-grid article,
	.principles-grid article,
	.values-grid article,
	.process-list li,
	.process-list li:nth-child(3n),
	.process-list li:nth-child(even) {
		min-height: 240px;
		padding: 1.35rem 0;
		border-right: 0;
	}

	.method-grid span,
	.process-list span,
	.need-grid span,
	.principles-grid span,
	.values-grid span {
		margin-bottom: 3rem;
	}

	.ugc-panel {
		min-height: 540px;
		padding: 2rem var(--gutter);
	}

	.ugc-panel h2 {
		font-size: clamp(2.6rem, 13vw, 4.3rem);
	}

	.page-hero {
		min-height: 540px;
		padding-top: 3.5rem;
	}

	.clean-list {
		grid-template-columns: 1fr;
	}

	.form-span-2 {
		grid-column: auto;
	}

	.contact-routes a {
		min-height: 300px;
	}

	.footer-title {
		font-size: clamp(3rem, 14vw, 4.8rem);
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-grid > div:first-child,
	.footer-grid > div:last-child {
		grid-column: auto;
	}

	.footer-bottom {
		flex-direction: column;
		gap: .5rem;
	}

	.whatsapp-float span {
		display: none;
	}

	.whatsapp-float {
		right: 1rem;
		bottom: 1rem;
		min-width: 56px;
		padding: .8rem;
	}

	.not-found {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-block: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

/* ABAR 2.1 · editable content system and approved responsive composition */
body { overflow-x: clip; }



.nav-utility,
.language-switch,
.footer-language { display: flex; align-items: center; }
.nav-utility { gap: 1rem; }
.language-switch,
.footer-language { gap: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; }
.language-switch a,
.footer-language a { opacity: .6; }
.submenu-toggle { display: none; }

.hero {
	min-height: min(860px, calc(100svh - 82px));
	background: var(--ink);
	color: var(--white);
}
.hero__content { grid-template-columns: minmax(0, 1fr) minmax(290px, .34fr); align-items: end; }
.hero__headline .eyebrow { margin-bottom: clamp(3rem, 8vh, 7rem); color: rgba(255, 255, 255, .68); }
.hero h1 { color: var(--white); }
.hero__intro > p { color: rgba(255, 255, 255, .86); }
.hero .text-link { color: var(--white); }
.hero__footer { border-color: rgba(255, 255, 255, .45); }
.hero-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; }
.hero-media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 17, 17, .96) 0%, rgba(17, 17, 17, .78) 52%, rgba(17, 17, 17, .52) 100%); content: ""; }
.hero-media img,
.hero-media video { width: 100%; height: 100%; object-fit: cover; }

.media-carousel,
.brand-marquee,
.proof-strip { overflow: hidden; }
.media-carousel { padding-block: clamp(3rem, 7vw, 6rem); background: var(--paper); }
.media-carousel__track,
.brand-marquee__track,
.proof-strip__track { display: flex; width: max-content; animation: abar-marquee var(--marquee-duration, 26s) linear infinite; }
.media-carousel:hover .media-carousel__track,
.brand-marquee:hover .brand-marquee__track,
.proof-strip:hover .proof-strip__track { animation-play-state: paused; }
.media-carousel__item { width: clamp(260px, 36vw, 560px); aspect-ratio: 4 / 3; margin: 0 1rem 0 0; overflow: hidden; background: var(--blue); }
.media-carousel__item:nth-child(3n + 2) { width: clamp(220px, 27vw, 420px); aspect-ratio: 3 / 4; background: var(--orange); }
.media-carousel__item:nth-child(3n + 3) { width: clamp(220px, 30vw, 460px); background: var(--green); }
.media-carousel__item img,
.media-carousel__item video { width: 100%; height: 100%; object-fit: cover; }
.media-carousel__item > a { position: relative; display: block; width: 100%; height: 100%; }
.media-carousel__item figcaption { position: absolute; right: .8rem; bottom: .8rem; left: .8rem; z-index: 2; padding: .55rem .7rem; background: rgba(247, 246, 242, .92); color: var(--ink); font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.media-carousel__placeholder { display: grid; place-items: center; border: 1px solid var(--ink); }
.media-carousel__placeholder span { padding: .55rem .7rem; background: var(--paper); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@keyframes abar-marquee { to { transform: translateX(-50%); } }

.services-preview { padding-bottom: var(--space); background: var(--white); }
.service-territories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2vw, 1.8rem); }
.service-territory { display: flex; flex-direction: column; min-height: 410px; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid rgba(17, 17, 17, .17); background: #fff2ed; border-radius: var(--radius); box-shadow: var(--shadow-soft); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.service-territory:hover { transform: translateY(-8px); box-shadow: 0 22px 55px rgba(17, 17, 17, .11); }
.service-territory--orange { background: #fff2ed; }
.service-territory--blue { background: #eff6f6; }
.service-territory--green { background: #f3f7ee; }
.service-territory--pink { background: #faf3f7; background: color-mix(in srgb, var(--pink) 28%, var(--white)); }
.service-territory--yellow { background: #fff8df; }
.service-territory--neutral { background: #f5f4f1; }
.service-territory__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: clamp(4rem, 7vw, 7rem); font-size: .68rem; font-weight: 700; }
.service-territory__icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; }
.service-territory__icon svg { width: 26px; height: 26px; }
.service-territory h3 { margin-bottom: 1rem; font-size: clamp(2.1rem, 3.6vw, 3.8rem); }
.service-territory > p { color: var(--ink-soft); }
.service-territory__links { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid rgba(17, 17, 17, .28); font-size: .69rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.diagnostic-cta,
.diagnostic-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.data-banner { padding-block: clamp(4rem, 8vw, 7rem); background: var(--ink); color: var(--white); }
.data-banner .eyebrow { margin-bottom: clamp(2rem, 4vw, 3.5rem); color: rgba(255, 255, 255, .62); }
.data-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid rgba(255, 255, 255, .58); }
.data-strip article { display: flex; flex-direction: column; min-height: 300px; padding: clamp(1.7rem, 3vw, 2.7rem); border-right: 1px solid rgba(255, 255, 255, .22); }
.data-strip article:last-child { border-right: 0; }
.data-strip strong { display: block; margin-bottom: 1.5rem; font-size: clamp(3.5rem, 6vw, 7rem); font-weight: 500; letter-spacing: -.065em; line-height: .9; }
.data-strip p { max-width: 260px; margin-bottom: 2rem; color: rgba(255, 255, 255, .78); }
.data-strip a { margin-top: auto; color: var(--white); font-size: .68rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

.diagnostic-cta { grid-template-columns: 1.2fr .8fr; gap: clamp(3rem, 8vw, 8rem); margin-bottom: var(--space); padding: clamp(2.5rem, 6vw, 5.5rem); background: var(--yellow); border: 1px solid var(--ink); }
.diagnostic-cta h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(3.2rem, 6.5vw, 6.9rem); }
.diagnostic-cta ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0; padding: 0; list-style: none; }
.diagnostic-cta li { padding: .55rem .75rem; border: 1px solid var(--ink); font-size: .66rem; font-weight: 700; text-transform: uppercase; }

.brand-marquee { padding-block: 2.3rem; background: var(--white); border-block: 1px solid var(--ink); }
.brand-marquee .eyebrow { margin-bottom: 1.5rem; }
.brand-logo { display: grid; place-items: center; width: clamp(180px, 20vw, 300px); height: 88px; padding: 1rem 2rem; border-right: 1px solid var(--line); font-size: 1rem; font-weight: 700; }
.brand-logo img { max-width: 150px; max-height: 54px; object-fit: contain; filter: grayscale(1); }

.ugc-bridge { align-items: stretch; }
.ugc-panel { position: relative; height: 100%; }
.ugc-panel__label { position: absolute; top: 2rem; right: clamp(2rem, 6vw, 6rem); margin: 0; font-size: clamp(1.15rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: .12em; }

.proof-strip { display: grid; grid-template-columns: minmax(190px, .25fr) 1fr; align-items: center; gap: 2rem; padding-inline: var(--gutter); background: var(--blue); }
.proof-strip > p { position: relative; z-index: 2; margin: 0; padding-block: 1.75rem; background: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.proof-strip__track { gap: clamp(3rem, 7vw, 7rem); padding-block: 1.3rem; }
.proof-strip__track span { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.8vw, 2.7rem); font-style: italic; }

.reviews__cards { position: relative; }
.reviews__cards .review-preview[hidden] { display: none; }
.carousel-controls { display: flex; gap: .6rem; margin-top: 2rem; }
.carousel-controls button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--ink); background: transparent; cursor: pointer; }

.blog-preview__image { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 1.4rem; overflow: hidden; background: var(--blue); border: 1px solid var(--ink); }
.blog-preview-grid article:nth-child(2) .blog-preview__image { background: #fff0ea; }
.blog-preview-grid article:nth-child(3) .blog-preview__image { background: #eef4e8; }
.blog-preview__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-preview__image span { padding: .5rem; background: var(--paper); }
.review-preview__logo { display: grid; place-items: start; min-height: 42px; margin-bottom: 1rem; }
.review-preview__logo img { width: auto; max-width: 130px; height: auto; max-height: 42px; object-fit: contain; filter: grayscale(1); }
.faq details > div { padding: 0 3rem 1.5rem 0; color: var(--ink-soft); }

.footer-socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.footer-socials a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; }
.footer-socials svg { width: 20px; height: 20px; }
.footer-language { margin-top: 1.25rem; }

.landing-content > *:not(.alignfull),
.abar-block { width: min(calc(100% - (2 * var(--gutter))), var(--shell)); margin-inline: auto; }
.landing-content { padding-bottom: var(--space); }
.abar-block { padding-block: clamp(4rem, 8vw, 8rem); }
.abar-block--hero h1 { font-size: clamp(3.5rem, 8vw, 8rem); }
.abar-block--cta { padding: clamp(2rem, 5vw, 4rem); background: var(--yellow); }

.thank-you { display: flex; flex-direction: column; justify-content: center; min-height: 72svh; padding-block: var(--space); }
.thank-you h1 { max-width: 1000px; font-size: clamp(3.5rem, 8vw, 8rem); }

.case-study { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: var(--space); background: var(--line); }
.case-study section { padding: clamp(2rem, 4vw, 4rem); background: var(--paper); }

.diagnostic-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ink); }
.diagnostic-benefits article { padding: clamp(2rem, 4vw, 4rem); background: #fff7df; }
.diagnostic-benefits span { font-size: .7rem; font-weight: 700; }
.diagnostic-benefits h2 { margin-top: 5rem; font-size: clamp(2rem, 4vw, 4rem); }
.diagnostic-definition { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink); }
.diagnostic-definition > div { padding: clamp(2rem, 5vw, 5rem); background: var(--paper); }
.diagnostic-definition h2 { max-width: 620px; font-size: clamp(2.4rem, 4.6vw, 5rem); }
.diagnostic-review { background: var(--white); }
.project-editorial__media img,
.project-cover img { width: 100%; height: 100%; object-fit: cover; }

.whatsapp-float { animation: whatsapp-breathe 2.8s ease-in-out infinite; }
@keyframes whatsapp-breathe { 50% { box-shadow: 0 0 0 9px rgba(37, 211, 102, .13), 0 12px 32px rgba(0, 0, 0, .18); } }

@media (max-width: 1080px) {
	.primary-nav { gap: .8rem; }
	.nav-utility { gap: .5rem; }
	.header-cta { padding-inline: .7rem; }
	.service-territories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.nav-utility { flex-direction: column; align-items: stretch; width: 100%; }
	.language-switch { justify-content: center; padding: 1rem; }
	.header-cta { justify-content: space-between; min-height: 52px; }
	.primary-nav .menu .menu-item-has-children { display: grid; grid-template-columns: 1fr auto; }
	.primary-nav .menu .menu-item-has-children > a { min-width: 0; }
	.submenu-toggle { display: grid; place-items: center; width: 50px; border: 0; background: transparent; font-size: 1.4rem; }
	.primary-nav .sub-menu { grid-column: 1 / -1; max-height: 0; overflow: hidden; padding: 0; opacity: 1; pointer-events: auto; }
	.primary-nav .submenu-is-open > .sub-menu { max-height: 720px; padding: .75rem; }
	.hero { min-height: auto; }
	.hero__content { grid-template-columns: 1fr; padding-top: 4rem; }
	.hero__headline .eyebrow { margin-bottom: 3rem; }
	.hero__intro { max-width: 620px; }
	.data-strip { grid-template-columns: repeat(2, 1fr); }
	.diagnostic-cta { grid-template-columns: 1fr; }
	.blog-preview-grid { grid-template-columns: 1fr 1fr; }
	.case-study { grid-template-columns: 1fr; }
	.diagnostic-definition { grid-template-columns: 1fr; }
	.faq-category-group { grid-template-columns: 1fr; }
	.ugc-panel h2,
	.ugc-panel > p:not(.eyebrow):not(.ugc-panel__index):not(.ugc-panel__label) { min-height: 0; }
	.data-strip article:nth-child(2) { border-right: 0; }
	.data-strip article:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, .22); }
}

@media (max-width: 560px) {
	.hero__footer p { display: block; }
	.hero h1 { font-size: clamp(3.25rem, 17vw, 5.2rem); }
	.media-carousel__item { width: 78vw; }
	.service-territories,
	.blog-preview-grid,
	.data-strip,
	.diagnostic-benefits { grid-template-columns: 1fr; }
	.service-territory { min-height: 360px; }
	.data-strip article { min-height: 230px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
	.data-strip article:last-child { border-bottom: 0; }
	.proof-strip { grid-template-columns: 1fr; gap: 0; padding-inline: 0; }
	.proof-strip > p { padding-inline: var(--gutter); }
	.diagnostic-cta { padding: 2rem 1.4rem; }
	.diagnostic-cta h2 { font-size: clamp(3rem, 15vw, 4.5rem); }
	.article-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.media-carousel__track,
	.brand-marquee__track,
	.proof-strip__track,
	.whatsapp-float { animation: none !important; }
}

/* ========================================================================== 
   ABAR 2.1.1 · visual parity pass
   Restores the approved visual preview while preserving WordPress editing.
   ========================================================================== */

/* Keep the approved warm editorial canvas. */
.home .site-main {
	background: var(--paper);
}

/* Header: same quiet white strip as the approved preview. */
.site-header {
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
}
.site-header__inner {
	min-height: 82px;
}
.site-brand img,
.site-brand .custom-logo {
	width: 104px;
}
.header-cta {
	min-height: 48px;
	padding: .8rem 1rem;
}

/* Hero */
.hero {
	min-height: min(820px, calc(100svh - 82px));
	background:
		radial-gradient(circle at 88% 38%, rgba(117, 132, 130, .34), transparent 34%),
		linear-gradient(104deg, #101010 0%, #101010 56%, #313938 100%);
}
.hero__inner {
	padding-top: clamp(2rem, 4.8vh, 4rem);
	padding-bottom: 1.55rem;
}
.hero__content {
	grid-template-columns: minmax(0, 1fr) minmax(280px, .30fr);
	gap: clamp(3rem, 7.5vw, 7.5rem);
	padding-block: clamp(3rem, 6vh, 5rem);
}
.hero__headline .eyebrow {
	margin-bottom: clamp(5rem, 12vh, 9rem);
}
.hero h1 {
	max-width: 900px;
	font-size: clamp(4rem, 7.7vw, 7.8rem);
	line-height: .91;
	letter-spacing: -.062em;
}
.hero h1 em {
	margin-top: .06em;
	font-size: .78em;
	line-height: .92;
	letter-spacing: -.045em;
}
.hero__intro {
	max-width: 360px;
	padding-bottom: .35rem;
}
.hero__intro > p {
	margin-bottom: 2rem;
	font-size: clamp(1rem, 1.35vw, 1.18rem);
	line-height: 1.48;
}
.hero-meta-note {
	position: absolute;
	top: 2.1rem;
	right: max(var(--gutter), calc((100vw - var(--shell)) / 2));
	z-index: 2;
	color: rgba(255,255,255,.36);
	font-size: .67rem;
	letter-spacing: .04em;
}
.hero-media-prompt {
	position: absolute;
	top: 7.4rem;
	right: max(var(--gutter), calc((100vw - var(--shell)) / 2));
	z-index: 2;
	padding: .72rem 1rem;
	border: 1px solid rgba(255,255,255,.45);
	color: rgba(255,255,255,.72);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.hero__footer {
	padding-top: 1.1rem;
}

/* Preview carousel fallback. Real uploaded media keeps the same visual rhythm. */
.media-carousel--preview {
	padding: 0 0 clamp(5rem, 8vw, 8rem);
	background: linear-gradient(to bottom, var(--ink) 0 24%, var(--paper) 24% 100%);
}
.media-preview-track {
	display: flex;
	align-items: flex-start;
	width: max-content;
	gap: clamp(1.6rem, 2.2vw, 2.6rem);
	animation: abar-marquee var(--marquee-duration, 34s) linear infinite;
}
.media-carousel--preview:hover .media-preview-track {
	animation-play-state: paused;
}
.media-preview-card {
	flex: 0 0 auto;
	width: clamp(310px, 31vw, 470px);
	margin: 0;
}
.media-preview-card:nth-child(4n + 1) {
	width: clamp(260px, 22vw, 370px);
	transform: translateY(4.8rem);
}
.media-preview-card:nth-child(4n + 2) {
	width: clamp(330px, 29vw, 500px);
	transform: translateY(8rem);
}
.media-preview-card:nth-child(4n + 3) {
	width: clamp(360px, 31vw, 520px);
	transform: translateY(12rem);
}
.media-preview-card:nth-child(4n + 4) {
	width: clamp(270px, 25vw, 420px);
	transform: translateY(10rem);
}
.media-preview-card__visual {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ink);
	overflow: hidden;
}
.media-preview-card:nth-child(4n + 1) .media-preview-card__visual,
.media-preview-card:nth-child(4n + 2) .media-preview-card__visual {
	aspect-ratio: 4 / 5;
}
.media-preview-card__visual::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 49.8%, rgba(17,17,17,.28) 50%, transparent 50.2%);
	content: "";
}
.media-preview-card__visual span {
	position: relative;
	z-index: 1;
	padding: .62rem .82rem;
	background: var(--paper);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.media-preview-card figcaption {
	margin-top: .7rem;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.media-preview-card--blue .media-preview-card__visual { background: var(--blue); }
.media-preview-card--green .media-preview-card__visual { background: var(--green); }
.media-preview-card--pink .media-preview-card__visual { background: var(--pink); }
.media-preview-card--orange .media-preview-card__visual { background: var(--orange); }

/* Point of view / statement */
.statement {
	padding-top: clamp(7rem, 11vw, 11rem);
	padding-bottom: clamp(8rem, 12vw, 12rem);
	border-top: 0;
}
.statement__grid {
	grid-template-columns: minmax(0, .92fr) minmax(300px, .54fr);
	align-items: start;
}
.statement h2 {
	max-width: 690px;
	font-size: clamp(3.8rem, 6.6vw, 6.4rem);
	line-height: .98;
}
.statement__grid .lead {
	font-size: clamp(1.5rem, 2.3vw, 2.25rem);
	line-height: 1.25;
}
.statement__grid > div p:last-child {
	max-width: 540px;
	font-size: 1rem;
	line-height: 1.55;
}

/* Services: white editorial cards with coloured hairlines and real rows. */
.services-preview {
	padding-top: clamp(6rem, 10vw, 9rem);
	padding-bottom: clamp(7rem, 11vw, 11rem);
	background: var(--white);
}
.services-preview .section-heading {
	margin-bottom: clamp(4rem, 7vw, 6.5rem);
}
.services-preview .section-heading h2 {
	max-width: 650px;
	font-size: clamp(3.8rem, 6vw, 6rem);
	line-height: .96;
}
.service-territories {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.6rem, 2.6vw, 2.4rem);
}
.service-territory {
	position: relative;
	min-height: 560px;
	padding: clamp(2rem, 3.4vw, 3rem);
	border: 1px solid var(--line);
	background: var(--white) !important;
	box-shadow: 0 18px 44px rgba(17,17,17,.045);
	transition: transform .25s ease, box-shadow .25s ease;
}
.service-territory::before {
	position: absolute;
	top: -1px;
	right: -1px;
	left: -1px;
	height: 4px;
	background: var(--line);
	content: "";
}
.service-territory--orange::before { background: var(--orange); }
.service-territory--blue::before { background: var(--blue); }
.service-territory--green::before { background: var(--green); }
.service-territory--pink::before { background: var(--pink); }
.service-territory--yellow::before { background: var(--yellow); }
.service-territory--neutral::before { background: var(--orange); }
.service-territory:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 54px rgba(17,17,17,.075);
}
.service-territory__top {
	margin-bottom: clamp(5rem, 8vw, 8rem);
}
.service-territory__icon {
	width: 48px;
	height: 48px;
}
.service-territory--orange .service-territory__icon { background: #fff1ec; border-color: #db7656; }
.service-territory--blue .service-territory__icon { background: #eff6f6; border-color: #86a5a7; }
.service-territory--green .service-territory__icon { background: #f2f6ec; border-color: #8fa16e; }
.service-territory--pink .service-territory__icon { background: #fbf0f4; border-color: #bd8698; }
.service-territory--yellow .service-territory__icon { background: #fff8e4; border-color: #b7a068; }
.service-territory--neutral .service-territory__icon { background: #fff1ec; border-color: var(--orange); }
.service-territory h3 {
	max-width: 360px;
	margin-bottom: 1.45rem;
	font-size: clamp(2.45rem, 3.35vw, 3.55rem);
	line-height: .97;
}
.service-territory > p {
	max-width: 400px;
	font-size: 1rem;
	line-height: 1.5;
}
.service-territory__links {
	display: block;
	margin-top: auto;
	padding-top: 0;
	border-top: 1px solid var(--ink);
}
.service-territory__links a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1rem;
	min-height: 54px;
	border-bottom: 1px solid var(--line);
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
}
.service-territory__links i {
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	transition: transform .2s ease;
}
.service-territory__links a:hover i {
	transform: translate(3px,-3px);
}

/* Method */
.method {
	padding-top: clamp(7rem, 11vw, 11rem);
	padding-bottom: clamp(7rem, 10vw, 10rem);
}
.method .section-heading {
	margin-bottom: clamp(4rem, 7vw, 6rem);
}
.method .section-heading h2 {
	max-width: 700px;
	font-size: clamp(4rem, 6.5vw, 6.5rem);
	line-height: .95;
}
.method .section-heading--split > p {
	max-width: 360px;
	justify-self: end;
	font-size: 1rem;
}
.method-grid li {
	min-height: 250px;
}
.method-grid h3 {
	font-size: clamp(1.85rem, 2.45vw, 2.5rem);
}

/* Diagnostic block */
.diagnostic-cta {
	grid-template-columns: 1.25fr .75fr;
	align-items: center;
	gap: clamp(3rem, 8vw, 8rem);
	margin-bottom: 0;
	padding: clamp(3rem, 5vw, 5rem);
	background: #f7df99;
}
.diagnostic-cta h2 {
	font-size: clamp(4rem, 6.8vw, 6.8rem);
	line-height: .93;
}
.diagnostic-cta > div:last-child > p {
	font-size: 1.08rem;
	line-height: 1.5;
}

/* Projects should retain the approved black editorial block even before real cases are loaded. */
.projects-showcase {
	padding-top: clamp(7rem, 11vw, 10rem);
	padding-bottom: clamp(7rem, 10vw, 10rem);
}
.projects-showcase .section-heading h2 {
	max-width: 850px;
	font-size: clamp(4rem, 6.8vw, 6.8rem);
	line-height: .94;
}
.projects-showcase .section-heading--split > p {
	max-width: 350px;
	justify-self: end;
	font-size: 1rem;
	line-height: 1.55;
}
.project-editorial {
	grid-template-columns: 1.12fr .83fr .83fr;
	gap: clamp(2rem, 3vw, 2.7rem);
}
.project-editorial__card:nth-child(2) { padding-top: 5.8rem; }
.project-editorial__card:nth-child(3) { padding-top: 11.5rem; }
.project-editorial__media {
	aspect-ratio: 4 / 3.25;
}
.project-editorial__card:nth-child(2) .project-editorial__media,
.project-editorial__card:nth-child(3) .project-editorial__media {
	aspect-ratio: 4 / 3.05;
}
.project-editorial__card h3 {
	font-size: clamp(1.8rem, 2.5vw, 2.7rem);
	line-height: 1.04;
}
.project-editorial__card--placeholder .project-editorial__media span {
	background: var(--paper);
	color: var(--ink);
}

/* UGC panels */
.ugc-panel {
	min-height: 700px;
	padding: clamp(3rem, 6vw, 6rem);
}
.ugc-panel__label {
	position: static;
	margin: 0 0 4.5rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
}
.ugc-panel__index {
	margin: 0 0 2.2rem;
	font-size: 1rem;
}
.ugc-panel h2 {
	min-height: 0;
	font-size: clamp(4rem, 5.7vw, 6rem);
	line-height: .93;
}
.ugc-panel > p:not(.eyebrow):not(.ugc-panel__index):not(.ugc-panel__label) {
	min-height: 0;
	font-size: 1.02rem;
}
.ugc-callout {
	margin-block: clamp(4rem, 7vw, 7rem);
	padding: clamp(2.2rem, 4vw, 3.8rem);
}
.ugc-callout h2 {
	font-size: clamp(2.8rem, 4.8vw, 5.2rem);
}

/* Reviews */
.reviews {
	grid-template-columns: minmax(0, .7fr) minmax(420px, .95fr);
	align-items: stretch;
}
.reviews__intro h2 {
	font-size: clamp(3.7rem, 5.5vw, 5.8rem);
	line-height: .95;
}
.review-preview {
	min-height: 520px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--orange);
}
.review-preview blockquote {
	font-size: clamp(2rem, 3.5vw, 3.45rem);
}
.review-preview--placeholder blockquote {
	max-width: 620px;
}

/* FAQ */
.faq__intro h2 {
	font-size: clamp(3.7rem, 5.2vw, 5.5rem);
	line-height: .96;
}
.faq summary {
	min-height: 82px;
}

/* Blog placeholder mirrors the preview but never invents article titles. */
.blog-teaser .section-heading h2 {
	max-width: 760px;
	font-size: clamp(3.8rem, 5.8vw, 6rem);
	line-height: .95;
}
.blog-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.blog-preview-grid--placeholder {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}
.blog-preview-placeholder .blog-preview__image {
	aspect-ratio: 16 / 8;
	margin-bottom: 0;
	border: 0;
}
.blog-preview-placeholder--green .blog-preview__image { background: var(--green); }
.blog-preview-placeholder--blue .blog-preview__image { background: var(--blue); }
.blog-preview-placeholder .blog-preview__image span {
	background: transparent;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Contact: pale blue section with a white form panel, as in the approved preview. */
.home .form-section--blue {
	background: #e5eff0;
}
.home .form-section__grid {
	grid-template-columns: minmax(280px, .68fr) minmax(0, 1fr);
	gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}
.home .form-section__intro h2 {
	max-width: 500px;
	font-size: clamp(3.7rem, 5.5vw, 5.7rem);
	line-height: .95;
}
.home .abar-form {
	padding: clamp(2rem, 4vw, 3.5rem);
	border: 1px solid var(--line);
	background: var(--white);
}

/* WhatsApp button in the preview is bright green with white content. */
.whatsapp-float {
	min-height: 54px;
	padding: .85rem 1.15rem;
	border: 2px solid var(--white);
	background: #22d465;
	color: var(--white);
	box-shadow: 0 0 0 10px rgba(34,212,101,.10), 0 14px 36px rgba(0,0,0,.14);
}
.whatsapp-float:hover {
	background: #1fc85f;
	color: var(--white);
}

/* Responsive parity */
@media (max-width: 1080px) {
	.service-territories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.service-territory { min-height: 520px; }
	.project-editorial__card:nth-child(2),
	.project-editorial__card:nth-child(3) { padding-top: 0; }
}

@media (max-width: 820px) {
	.hero-media-prompt {
		top: 2rem;
		right: var(--gutter);
	}
	.hero__headline .eyebrow { margin-bottom: 3rem; }
	.media-carousel--preview { background: var(--paper); padding-top: 2rem; }
	.media-preview-card:nth-child(n) { transform: none; width: 76vw; }
	.media-preview-card:nth-child(n) .media-preview-card__visual { aspect-ratio: 4 / 3; }
	.statement__grid,
	.home .form-section__grid { grid-template-columns: 1fr; }
	.statement h2 { max-width: 760px; }
	.service-territory { min-height: 500px; }
	.project-editorial { grid-template-columns: 1fr 1fr; }
	.project-editorial__card:nth-child(3) { grid-column: 1 / -1; max-width: 52%; margin-left: auto; }
	.ugc-panel { min-height: 560px; }
	.blog-preview-grid--placeholder { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.hero h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
	.hero-media-prompt,
	.hero-meta-note { display: none; }
	.service-territories { grid-template-columns: 1fr; }
	.service-territory { min-height: 450px; }
	.service-territory__top { margin-bottom: 4rem; }
	.project-editorial { grid-template-columns: 1fr; }
	.project-editorial__card:nth-child(3) { grid-column: auto; max-width: none; margin-left: 0; }
	.ugc-bridge { grid-template-columns: 1fr; }
	.ugc-panel { min-height: 520px; }
	.reviews { grid-template-columns: 1fr; }
	.blog-preview-grid,
	.blog-preview-grid--placeholder { grid-template-columns: 1fr; }
	.home .abar-form { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
	.media-preview-track { animation: none !important; }
}


/* =========================================================
   ABAR 2.1.2 — visual parity layer
   Restores the approved abar-visual-preview composition.
   ========================================================= */


:root {
	--ink: #111111;
	--ink-soft: #30302e;
	--muted: #6f6f69;
	--line: #d8d6cf;
	--paper: #f7f6f2;
	--white: #ffffff;
	--orange: #ff6437;
	--blue: #a8c4c5;
	--green: #b6c99d;
	--pink: #e7a8b8;
	--yellow: #f6e3a1;
	--whatsapp: #25d366;
	--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--shell: 1240px;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--space: clamp(5rem, 10vw, 10rem);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

body.menu-is-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

h1 em,
h2 em {
	font-family: var(--font-serif);
	font-weight: 400;
}

::selection {
	background: var(--orange);
	color: var(--ink);
}

.section-shell {
	width: min(calc(100% - (2 * var(--gutter))), var(--shell));
	margin-inline: auto;
}

.section-space {
	padding-block: var(--space);
}

.skip-link {
	position: fixed;
	top: 0;
	left: 1rem;
	z-index: 9999;
	transform: translateY(-120%);
	background: var(--ink);
	color: var(--white);
	padding: .75rem 1rem;
}

.skip-link:focus {
	transform: translateY(0);
}

.eyebrow {
	margin-bottom: 1.5rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.2;
	text-transform: uppercase;
}

.eyebrow--light {
	color: rgba(255, 255, 255, .58);
}

.lead {
	font-size: clamp(1.25rem, 2.1vw, 1.8rem);
	letter-spacing: -0.025em;
	line-height: 1.32;
}

.button-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
}

.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	padding: .9rem 1.35rem;
	border: 1px solid currentColor;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .055em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.button:hover {
	transform: translateY(-2px);
}

.button--dark {
	background: var(--ink);
	color: var(--white);
}

.button--dark:hover {
	background: var(--orange);
	color: var(--ink);
}

.button--light {
	background: var(--paper);
	color: var(--ink);
}

.button--light:hover {
	background: var(--white);
}

.button--orange {
	background: var(--orange);
	color: var(--ink);
}

.button--orange:hover {
	background: var(--white);
}

.button--whatsapp {
	background: var(--whatsapp);
	color: var(--white);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding-bottom: .2rem;
	border-bottom: 1px solid currentColor;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.text-link span {
	transition: transform .2s ease;
}

.text-link:hover span {
	transform: translate(3px, -3px);
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(12px);
	transition: border-color .2s ease;
}

.site-header.is-scrolled {
	border-color: var(--line);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 190px 1fr;
	align-items: center;
	width: min(calc(100% - (2 * var(--gutter))), var(--shell));
	min-height: 82px;
	margin-inline: auto;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	width: fit-content;
}

.site-brand img,
.site-brand .custom-logo {
	width: 102px;
	height: auto;
}

.custom-logo-link {
	display: flex;
}

.primary-nav,
.primary-nav .menu {
	display: flex;
	align-items: center;
}

.primary-nav {
	justify-content: flex-end;
	gap: clamp(1rem, 2.3vw, 2.25rem);
}

.primary-nav .menu {
	gap: clamp(.85rem, 1.7vw, 1.65rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav .menu a {
	position: relative;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .025em;
}

.primary-nav .menu a::after {
	position: absolute;
	right: 0;
	bottom: -.35rem;
	left: 0;
	height: 1px;
	transform: scaleX(0);
	transform-origin: right;
	background: var(--ink);
	content: "";
	transition: transform .2s ease;
}

.primary-nav .menu a:hover::after,
.primary-nav .current-menu-item a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.menu-item-has-children {
	position: relative;
}

.nav-plus {
	display: inline-block;
	margin-left: .2rem;
	font-size: .85rem;
	transition: transform .2s ease;
}

.menu-item-has-children:hover .nav-plus,
.menu-item-has-children:focus-within .nav-plus {
	transform: rotate(45deg);
}

.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + 1.2rem);
	left: -1.4rem;
	z-index: 20;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(620px, 72vw);
	margin: 0;
	padding: 1.35rem;
	transform: translateY(-8px);
	background: var(--ink);
	box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.primary-nav .sub-menu::before {
	position: absolute;
	top: -1.25rem;
	right: 0;
	left: 0;
	height: 1.25rem;
	content: "";
}

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.primary-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 52px;
	padding: .7rem .85rem;
	border: 1px solid rgba(255, 255, 255, .13);
	color: var(--white);
	font-size: .78rem;
	transition: background-color .2s ease, color .2s ease;
}

.service-menu-icon {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: rgba(255,255,255,.46);
}

.primary-nav .sub-menu a:hover .service-menu-icon { color: currentColor; }

.primary-nav .sub-menu a:hover {
	background: var(--orange);
	color: var(--ink);
}

.primary-nav .sub-menu a::after {
	display: none;
}

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .7rem .9rem;
	background: var(--ink);
	color: var(--white);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}

.header-cta:hover {
	background: var(--orange);
	color: var(--ink);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.language-switcher {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.site-footer .language-switcher {
	margin-top: 1.5rem;
	color: rgba(255, 255, 255, .72);
}

.menu-toggle {
	display: none;
}

/* Homepage hero */
.hero {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: min(860px, calc(100svh - 82px));
	padding-top: clamp(2rem, 5vh, 4rem);
	padding-bottom: 1.75rem;
}

.hero--dark {
	position: relative;
	isolation: isolate;
	color: var(--white);
}

.hero--dark::before {
	position: absolute;
	top: 0;
	right: 50%;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	margin-inline: -50vw;
	background: var(--ink);
	content: "";
}

.hero__media {
	position: absolute;
	top: 0;
	right: 50%;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	margin-inline: -50vw;
	overflow: hidden;
}

.hero__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.66) 58%, rgba(17,17,17,.74) 100%);
	content: "";
}

.hero__media img,
.hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero--dark .hero__index {
	color: rgba(255, 255, 255, .55);
}

.hero--dark .hero__footer {
	border-color: rgba(255, 255, 255, .35);
}

.hero__meta,
.hero__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hero__index {
	color: var(--muted);
	font-size: .72rem;
	letter-spacing: .08em;
}

.hero__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, .32fr);
	align-items: end;
	gap: clamp(2rem, 7vw, 7rem);
	padding-block: clamp(3rem, 6.5vh, 5.5rem);
}

.hero h1 {
	max-width: 920px;
	margin-bottom: 0;
	font-size: clamp(3.75rem, 8.4vw, 8.4rem);
}

.hero h1 em {
	display: block;
	color: var(--orange);
	font-size: .86em;
}

.hero__intro {
	padding-bottom: .7rem;
}

.hero__intro > p {
	margin-bottom: 2.25rem;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.45;
}

.hero__footer {
	padding-top: 1.35rem;
	border-top: 1px solid var(--ink);
}

.hero__footer p {
	margin-bottom: 0;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Moving media gallery */
.media-showcase {
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 6rem) clamp(5rem, 10vw, 9rem);
	background: linear-gradient(to bottom, var(--ink) 0 16%, var(--paper) 16% 100%);
}

.media-showcase__track {
	display: flex;
	width: max-content;
	animation: media-showcase-scroll 42s linear infinite;
}

.media-showcase:hover .media-showcase__track,
.media-showcase:focus-within .media-showcase__track {
	animation-play-state: paused;
}

.media-showcase__group {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	padding-right: clamp(1rem, 2vw, 2rem);
}

.media-showcase__item {
	flex: 0 0 auto;
	width: clamp(260px, 27vw, 430px);
	margin: 0;
}

.media-showcase__item > div {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: var(--orange);
	border: 1px solid var(--ink);
}

.media-showcase__item--2 > div { aspect-ratio: 4 / 5; background: var(--blue); }
.media-showcase__item--3 > div { aspect-ratio: 1; background: var(--green); }
.media-showcase__item--4 > div { aspect-ratio: 16 / 10; background: var(--pink); }

.media-showcase__item img,
.media-showcase__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media-showcase__item figcaption {
	margin-top: .7rem;
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

@keyframes media-showcase-scroll {
	to { transform: translateX(-50%); }
}

.project-editorial__media::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 49.8%, rgba(17,17,17,.38) 50%, transparent 50.2%);
	content: "";
}

.project-editorial__media img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-editorial__media span {
	position: relative;
	z-index: 2;
	padding: .55rem .7rem;
	background: var(--paper);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Shared headings and statements */
.section-heading {
	margin-bottom: clamp(3rem, 7vw, 6rem);
}

.section-heading h2,
.statement h2,
.experience h2,
.home-contact h2,
.custom-proposal h2 {
	max-width: 930px;
	margin-bottom: 0;
	font-size: clamp(2.8rem, 6vw, 6.4rem);
}

.section-heading--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
	align-items: end;
	gap: 4rem;
}

.section-heading--split > p {
	margin-bottom: .25rem;
	color: var(--ink-soft);
}

.statement {
	border-top: 1px solid var(--line);
}

.statement__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(300px, .55fr);
	gap: clamp(3rem, 9vw, 9rem);
}

.statement__grid > div {
	padding-top: .35rem;
}

.statement__grid > div p:last-child {
	margin-bottom: 0;
	color: var(--ink-soft);
}

/* Service groups */
.services-preview { background: var(--white); }

.service-box-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.2rem, 2.4vw, 2rem);
}

.service-box {
	--service-accent: var(--orange);
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 390px;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	border: 1px solid var(--line);
	background: color-mix(in srgb, var(--paper) 32%, var(--white));
	box-shadow: 0 14px 34px rgba(17,17,17,.055);
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.service-box::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--service-accent);
	content: "";
}

.service-box:hover,
.service-box:focus-within {
	z-index: 1;
	transform: translateY(-7px);
	background: var(--white);
	box-shadow: 0 22px 52px rgba(17,17,17,.1);
}

.service-box--orange { --service-accent: var(--orange); }
.service-box--blue { --service-accent: var(--blue); }
.service-box--green { --service-accent: var(--green); }
.service-box--pink { --service-accent: var(--pink); }
.service-box--yellow { --service-accent: var(--yellow); }
.service-box--dark {
	--service-accent: var(--orange);
	background: color-mix(in srgb, var(--paper) 32%, var(--white));
	color: var(--ink);
}

.service-box--dark:hover,
.service-box--dark:focus-within { background: var(--white); }

.service-box__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: clamp(2.8rem, 5vw, 4.6rem);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .1em;
}

.service-box__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid color-mix(in srgb, var(--service-accent) 68%, var(--ink));
	border-radius: 50%;
	background: color-mix(in srgb, var(--service-accent) 18%, var(--white));
}

.service-box--dark .service-box__icon { background: color-mix(in srgb, var(--orange) 12%, var(--white)); border-color: var(--orange); }

.service-box__icon svg {
	width: 23px;
	height: 23px;
	stroke: currentColor;
}

.service-box h3 {
	margin-bottom: 1rem;
	font-size: clamp(2rem, 3.2vw, 3.25rem);
}

.service-box > p {
	max-width: 420px;
	margin-bottom: 2rem;
	color: var(--ink-soft);
}

.service-box--dark > p { color: var(--ink-soft); }

.service-box__links {
	display: grid;
	margin-top: auto;
	border-top: 1px solid currentColor;
}

.service-box__links a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 48px;
	padding-block: .7rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.service-box__links a span { transition: transform .2s ease; }
.service-box__links a:hover span { transform: translate(3px, -3px); }

/* Work preview */
.projects-showcase {
	background: var(--ink);
	color: var(--white);
}

.projects-showcase .section-heading--split > p {
	color: rgba(255, 255, 255, .65);
}

.project-editorial {
	display: grid;
	grid-template-columns: 1.15fr .85fr .85fr;
	gap: clamp(1rem, 2.3vw, 2rem);
}

.project-editorial__card {
	margin: 0;
}

.project-editorial__card:nth-child(2) {
	padding-top: 5rem;
}

.project-editorial__card:nth-child(3) {
	padding-top: 10rem;
}

.project-editorial__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	margin-bottom: 1.35rem;
	overflow: hidden;
	background: var(--orange);
	color: var(--ink);
}

.project-editorial__card--blue .project-editorial__media {
	background: var(--blue);
}

.project-editorial__card--green .project-editorial__media {
	background: var(--green);
}

.project-editorial__card > p,
.project-editorial__card > a > p {
	margin-bottom: .65rem;
	color: rgba(255, 255, 255, .56);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.project-editorial__card h3 {
	margin-bottom: 0;
	font-size: clamp(1.55rem, 2.4vw, 2.6rem);
	line-height: 1.05;
}

/* Method */
.method {
	padding-top: calc(var(--space) * 1.15);
}

.method-grid,
.process-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ink);
	list-style: none;
}

.method-grid li {
	min-height: 290px;
	padding: 1.4rem 1.4rem 2rem 0;
	border-right: 1px solid var(--line);
}

.method-grid li:not(:first-child) {
	padding-left: 1.4rem;
}

.method-grid li:last-child {
	border-right: 0;
}

.method-grid span,
.process-list span,
.need-grid span,
.principles-grid span,
.values-grid span {
	display: block;
	margin-bottom: clamp(3rem, 7vw, 6rem);
	font-size: .7rem;
	font-weight: 700;
}

.method-grid h3,
.process-list h3,
.need-grid h3,
.principles-grid h2,
.values-grid h3 {
	margin-bottom: 1rem;
	font-size: clamp(1.6rem, 2.4vw, 2.5rem);
}

.method-grid p,
.process-list p,
.need-grid p,
.principles-grid p,
.values-grid p {
	margin-bottom: 0;
	color: var(--ink-soft);
}

/* UGC bridge */
.ugc-bridge {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-bottom: 0;
}

.ugc-panel {
	display: flex;
	flex-direction: column;
	min-height: 640px;
	padding: clamp(2rem, 6vw, 6rem);
}

.ugc-panel--brand {
	background: var(--orange);
}

.ugc-panel--creator {
	background: var(--blue);
}

.ugc-panel__index {
	margin: auto 0 1.5rem;
	font-family: var(--font-serif);
	font-size: 1rem;
	font-style: italic;
}

.ugc-panel h2 {
	max-width: 680px;
	margin-bottom: 1.5rem;
	font-size: clamp(2.7rem, 5.4vw, 5.7rem);
}

.ugc-panel > p:not(.eyebrow):not(.ugc-panel__index) {
	max-width: 590px;
	margin-bottom: 2.25rem;
	font-size: 1.08rem;
}

.ugc-panel .button {
	align-self: flex-start;
}

.ugc-callout {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 3rem;
	margin-block: clamp(4rem, 8vw, 8rem);
	padding: clamp(2rem, 4.5vw, 4rem);
	background: var(--green);
}

.ugc-callout .eyebrow {
	margin-bottom: 1rem;
}

.ugc-callout h2 {
	max-width: 850px;
	margin-bottom: 0;
	font-size: clamp(2.7rem, 5.3vw, 5.8rem);
}

.proof-strip {
	display: grid;
	grid-template-columns: minmax(230px, .34fr) 1fr;
	background: var(--blue);
	border-block: 1px solid var(--ink);
	overflow: hidden;
}

.proof-strip__label {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 1.5rem var(--gutter);
	margin-bottom: 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.proof-strip__viewport {
	overflow: hidden;
	border-left: 1px solid var(--ink);
}

.proof-strip__track {
	display: flex;
	width: max-content;
	animation: proof-scroll 24s linear infinite;
}

.proof-strip__track > div {
	display: flex;
	gap: clamp(2.5rem, 5vw, 6rem);
	padding: 1.45rem clamp(2.5rem, 5vw, 6rem) 1.45rem 0;
}

.proof-strip span {
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 2.3vw, 2.1rem);
	font-style: italic;
}

@keyframes proof-scroll {
	to { transform: translateX(-50%); }
}

/* Lead magnet */
.diagnostic-banner {
	display: grid;
	grid-template-columns: 1fr .75fr;
	gap: clamp(3rem, 9vw, 9rem);
	margin-bottom: var(--space);
	padding: clamp(2.5rem, 5vw, 5rem);
	background: var(--yellow);
	border: 1px solid var(--ink);
}

.diagnostic-banner h2 {
	max-width: 720px;
	margin-bottom: 0;
	font-size: clamp(2.8rem, 5.5vw, 5.8rem);
}

.diagnostic-banner ul {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.diagnostic-banner li {
	padding: .45rem .7rem;
	border: 1px solid var(--ink);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Reviews */
.reviews {
	display: grid;
	grid-template-columns: minmax(0, .65fr) minmax(420px, 1fr);
	gap: clamp(3rem, 9vw, 9rem);
}

.reviews__intro h2 {
	max-width: 680px;
	margin-bottom: 2rem;
	font-size: clamp(2.8rem, 5.5vw, 5.7rem);
}

.reviews__intro > p:last-child {
	max-width: 590px;
	color: var(--ink-soft);
}

.review-carousel { align-self: center; }
.review-slides { min-height: 440px; }
.review-preview[hidden] { display: none; }

.review-controls {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}

.review-controls > div {
	display: flex;
	justify-content: center;
	gap: .5rem;
}

.review-controls button {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.review-controls [data-review-go] {
	width: 10px;
	height: 10px;
	border: 0;
	background: var(--line);
}

.review-controls [data-review-go].is-active { background: var(--ink); }

.review-preview {
	align-self: center;
	padding: clamp(2rem, 4.5vw, 4rem);
	border: 1px solid var(--ink);
	background: var(--orange);
}

.review-preview:nth-child(2) {
	background: var(--blue);
}

.review-preview:nth-child(3) {
	background: var(--green);
}

.review-preview__rating {
	margin-bottom: clamp(3rem, 7vw, 6rem);
	font-size: .9rem;
	letter-spacing: .18em;
}

.review-preview blockquote {
	margin: 0 0 2.5rem;
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 3.3vw, 3.25rem);
	font-style: italic;
	line-height: 1.12;
}

.review-preview p {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	font-size: .76rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.review-preview p span {
	margin-top: .3rem;
	opacity: .7;
}

/* FAQ */
.faq {
	background: var(--white);
}

.faq__grid {
	display: grid;
	grid-template-columns: minmax(260px, .52fr) minmax(0, 1fr);
	gap: clamp(3rem, 9vw, 9rem);
}

.faq__intro {
	align-self: start;
	position: sticky;
	top: 120px;
}

.faq__intro h2 {
	max-width: 570px;
	margin-bottom: 2rem;
	font-size: clamp(2.8rem, 5.2vw, 5.4rem);
}

.faq__intro > p:not(.eyebrow) {
	max-width: 470px;
	margin-bottom: 2rem;
	color: var(--ink-soft);
}

.faq__list {
	border-top: 1px solid var(--ink);
}

.faq details {
	border-bottom: 1px solid var(--ink);
}

.faq summary {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.5rem;
	min-height: 92px;
	padding: 1.25rem 0;
	cursor: pointer;
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -.025em;
	list-style: none;
}

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

.faq summary i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--blue);
	font-size: 1.25rem;
	font-style: normal;
	transition: transform .2s ease, background-color .2s ease;
}

.faq details[open] summary i {
	transform: rotate(45deg);
	background: var(--orange);
}

.faq details > p {
	max-width: 720px;
	margin: -.25rem 4rem 1.6rem 0;
	color: var(--ink-soft);
}

/* Blog preview */
.blog-preview-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--ink);
	border: 1px solid var(--ink);
}

.blog-preview-grid article {
	min-height: 330px;
	background: var(--paper);
}

.blog-preview-grid article > a {
	display: block;
	height: 100%;
}

.blog-preview__media {
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--green);
	border-bottom: 1px solid var(--ink);
}

.blog-preview-grid article:last-child .blog-preview__media { background: var(--blue); }

.blog-preview__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-preview__media span { margin: 0; }

.blog-preview__content { padding: clamp(1.6rem, 3vw, 2.5rem); }

.blog-preview-grid article:first-child {
	background: color-mix(in srgb, var(--green) 38%, var(--paper));
}

.blog-preview-grid article:last-child {
	background: color-mix(in srgb, var(--blue) 42%, var(--paper));
}

.blog-preview-grid span {
	display: block;
	margin-bottom: 3rem;
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.blog-preview-grid h3 {
	max-width: 560px;
	margin-bottom: 1.2rem;
	font-size: clamp(2rem, 3.7vw, 3.8rem);
}

.blog-preview-grid p {
	max-width: 550px;
	margin-bottom: 0;
}

/* Experience and work */
.experience,
.home-contact,
.custom-proposal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
	gap: clamp(3rem, 9vw, 9rem);
	border-bottom: 1px solid var(--line);
}

.experience__copy,
.home-contact > div:last-child,
.custom-proposal > div:last-child {
	padding-top: 2.2rem;
}

.experience__copy .text-link {
	margin-top: 1rem;
}

.selected-work {
	background: var(--ink);
	color: var(--white);
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.35rem;
}

.project-card a {
	display: block;
}

.project-card__image {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	margin-bottom: 1.35rem;
	overflow: hidden;
	background: var(--blue);
}

.project-card:nth-child(2n) .project-card__image { background: var(--orange); }
.project-card:nth-child(3n) .project-card__image { background: var(--green); }

.project-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.project-card:hover img {
	transform: scale(1.025);
}

.project-card__image span {
	color: var(--ink);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
}

.project-card h2,
.project-card h3 {
	margin-bottom: .55rem;
	font-size: 1.45rem;
}

.project-card p {
	color: rgba(255,255,255,.68);
}

.projects-archive .project-card p {
	color: var(--muted);
}

.home-contact {
	border-bottom: 0;
}

.home-contact > div:last-child > p,
.custom-proposal > div:last-child > p {
	margin-bottom: 2rem;
	font-size: 1.1rem;
}

/* Interior page hero */
.page-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(290px, .36fr);
	grid-template-rows: auto 1fr;
	gap: 1rem clamp(3rem, 8vw, 8rem);
	min-height: 650px;
	padding-top: clamp(4rem, 9vw, 8rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
	border-bottom: 1px solid var(--ink);
}

.page-hero > .eyebrow {
	grid-column: 1 / -1;
}

.page-hero h1 {
	align-self: end;
	max-width: 940px;
	margin-bottom: 0;
	font-size: clamp(3.6rem, 7.8vw, 8rem);
}

.page-hero__intro {
	align-self: end;
	padding-bottom: .45rem;
}

.page-hero__intro p {
	margin-bottom: 2rem;
	font-size: clamp(1.1rem, 1.55vw, 1.35rem);
}

.page-featured-media {
	max-height: 720px;
	margin-top: clamp(2rem, 5vw, 5rem);
	margin-bottom: 0;
	overflow: hidden;
	border: 1px solid var(--ink);
}

.page-featured-media img {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}

.page-hero--orange h1 em { color: var(--orange); }
.page-hero--blue h1 em { color: #769c9e; }
.page-hero--contact h1 em { color: var(--orange); }

/* Service hub and individual service landings */
.service-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--ink);
	border: 1px solid var(--ink);
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 410px;
	padding: clamp(1.7rem, 3.5vw, 3rem);
	background: var(--paper);
	transition: transform .2s ease, background-color .2s ease;
}

.service-card--1:hover { background: var(--orange); }
.service-card--2:hover { background: var(--blue); }
.service-card--3:hover { background: var(--green); }
.service-card--4:hover { background: var(--pink); }
.service-card--5:hover { background: var(--yellow); }
.service-card__icon {
	position: absolute;
	top: 1.5rem;
	right: 1.7rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
}
.service-card__icon svg { width: 30px; height: 30px; }
.service-card--1 .service-card__icon { color: var(--orange); }
.service-card--2 .service-card__icon { color: #6f9a9c; }
.service-card--3 .service-card__icon { color: #6f8758; }
.service-card--4 .service-card__icon { color: #a55870; }
.service-card--5 .service-card__icon { color: #957000; }
.service-card:hover .service-card__icon { color: var(--ink); }
.service-card__number { font-size: .7rem; font-weight: 700; }
.service-card h2 { max-width: 530px; margin: auto 0 1.25rem; font-size: clamp(2rem, 4vw, 4rem); }
.service-card p { max-width: 530px; color: var(--ink-soft); }
.service-card strong { margin-top: 1rem; font-size: .75rem; text-transform: uppercase; }

.service-landing__hero,
.diagnostic-hero {
	padding-block: clamp(5rem, 10vw, 9rem);
	background: var(--ink);
	color: var(--white);
}

.service-landing__hero h1,
.diagnostic-hero h1,
.thank-you h1 {
	max-width: 1050px;
	margin-bottom: 2rem;
	font-size: clamp(3.6rem, 8vw, 8rem);
}

.service-landing__hero .lead,
.diagnostic-hero .lead { max-width: 760px; color: rgba(255,255,255,.72); }
.diagnostic-hero { background: var(--yellow); color: var(--ink); }
.diagnostic-hero .lead { color: var(--ink-soft); }

.service-landing__body,
.diagnostic-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr);
	gap: clamp(3rem, 9vw, 9rem);
}

.service-landing__media {
	display: grid;
	place-items: center;
	min-height: 520px;
	margin: 0;
	background: var(--blue);
	border: 1px solid var(--ink);
}

.service-landing__media img { width: 100%; height: 100%; object-fit: cover; }
.service-landing__media span { max-width: 240px; text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; }

.service-landing__cta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 3rem;
	margin-bottom: var(--space);
	padding: clamp(2.5rem, 5vw, 5rem);
	background: var(--pink);
	border: 1px solid var(--ink);
}

.service-landing__cta h2,
.diagnostic-details h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(2.5rem, 5vw, 5rem); }
.diagnostic-details .clean-list { margin-top: 0; }
.diagnostic-details .clean-list li { display: flex; flex-direction: column; gap: .35rem; }
.diagnostic-details .clean-list span { color: var(--ink-soft); }

/* Service detail */
.service-detail-list {
	padding-bottom: 0;
}

.service-detail {
	display: grid;
	grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
	gap: clamp(3rem, 10vw, 11rem);
	min-height: 500px;
	padding-block: clamp(3.5rem, 8vw, 7rem);
	border-bottom: 1px solid var(--ink);
}

.service-detail__head span {
	display: block;
	margin-bottom: 2rem;
	font-family: var(--font-serif);
	font-size: 3rem;
	font-style: italic;
}

.service-detail__head p {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.service-detail__body h2 {
	max-width: 780px;
	margin-bottom: 2rem;
	font-size: clamp(2.8rem, 5.7vw, 6rem);
}

.service-detail__body .lead {
	max-width: 760px;
}

.clean-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
	max-width: 760px;
	margin: 3rem 0 0;
	padding: 0;
	border-top: 1px solid currentColor;
	list-style: none;
}

.clean-list li {
	padding: 1rem 0;
	border-bottom: 1px solid currentColor;
	font-size: .9rem;
}

.service-detail__body .text-link {
	margin-top: 2rem;
}

.service-detail--orange { background: color-mix(in srgb, var(--orange) 14%, var(--paper)); }
.service-detail--blue { background: color-mix(in srgb, var(--blue) 28%, var(--paper)); }
.service-detail--green { background: color-mix(in srgb, var(--green) 24%, var(--paper)); }
.service-detail--dark { background: var(--ink); color: var(--white); }
.service-detail--dark .lead { color: rgba(255,255,255,.78); }

/* UGC, creators and values */
.ugc-definition {
	border-bottom: 1px solid var(--line);
}

.ugc-definition .eyebrow {
	grid-column: 1 / -1;
}

.need-grid,
.principles-grid,
.values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--ink);
}

.need-grid article,
.principles-grid article,
.values-grid article {
	min-height: 320px;
	padding: 1.5rem;
	border-right: 1px solid var(--line);
}

.need-grid article:first-child,
.principles-grid article:first-child,
.values-grid article:first-child {
	padding-left: 0;
}

.need-grid article:last-child,
.principles-grid article:last-child,
.values-grid article:last-child {
	border-right: 0;
}

.ugc-process {
	border-top: 1px solid var(--line);
}

.process-list {
	grid-template-columns: repeat(3, 1fr);
}

.process-list li {
	min-height: 270px;
	padding: 1.5rem;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.process-list li:nth-child(3n + 1) {
	padding-left: 0;
}

.process-list li:nth-child(3n) {
	border-right: 0;
}

.creator-flow {
	background: var(--white);
}

.creator-flow .process-list {
	margin-top: 4rem;
}

/* About */
.about-manifesto {
	background: var(--ink);
	color: var(--white);
}

.about-manifesto .statement__grid > div p:last-child {
	color: rgba(255,255,255,.68);
}

.about-manifesto h2 {
	font-size: clamp(3rem, 6vw, 6.2rem);
}

.founder {
	display: grid;
	grid-template-columns: minmax(300px, .7fr) minmax(0, 1fr);
	gap: clamp(3rem, 9vw, 9rem);
}

.founder__visual {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 590px;
	padding: 2rem;
	background: var(--orange);
}

.founder__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.founder__visual span {
	font-family: var(--font-serif);
	font-size: clamp(9rem, 22vw, 20rem);
	font-style: italic;
	line-height: .75;
}

.founder__visual p {
	margin-bottom: 0;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.founder__copy {
	align-self: center;
}

.founder__copy h2 {
	margin-bottom: 2rem;
	font-size: clamp(3rem, 6vw, 6rem);
}

.founder__copy p:not(.eyebrow) {
	max-width: 690px;
}

.values {
	background: var(--blue);
}

.values-grid article {
	border-color: rgba(17,17,17,.35);
}

/* Forms */
.form-section {
	background: var(--white);
}

.form-section--blue {
	background: color-mix(in srgb, var(--blue) 35%, var(--white));
}

.form-section__grid {
	display: grid;
	grid-template-columns: minmax(270px, .7fr) minmax(0, 1fr);
	gap: clamp(3rem, 9vw, 9rem);
}

.form-section__intro h2 {
	margin-bottom: 2rem;
	font-size: clamp(3rem, 5.4vw, 5.8rem);
}

.form-section .abar-form {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--white);
	border: 1px solid var(--ink);
}

.form-section__intro > p:not(.eyebrow) {
	max-width: 510px;
	font-size: 1.05rem;
}

.direct-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .65rem;
	margin-top: 2.5rem;
}

.direct-contact a {
	border-bottom: 1px solid currentColor;
	font-size: .9rem;
	font-weight: 600;
}

.abar-form {
	padding-top: .4rem;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 1.25rem;
}

.form-grid label,
.form-consent {
	display: block;
}

.form-grid label > span {
	display: block;
	margin-bottom: .55rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.form-span-2 {
	grid-column: 1 / -1;
}

.abar-form input,
.abar-form select,
.abar-form textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--ink);
}

.abar-form input,
.abar-form select {
	height: 52px;
}

.abar-form textarea {
	padding-top: .8rem;
	resize: vertical;
}

.abar-form input:focus,
.abar-form select:focus,
.abar-form textarea:focus {
	border-color: var(--orange);
	box-shadow: 0 1px 0 var(--orange);
}

.form-consent {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: .7rem;
	align-items: start;
	margin: 1.5rem 0;
	font-size: .75rem;
}

.form-consent input {
	width: 16px;
	height: 16px;
	margin-top: .15rem;
}

.form-consent a {
	text-decoration: underline;
}

.hp-field {
	position: absolute;
	left: -9999px;
}

.form-notice {
	margin-bottom: 1.5rem;
	padding: 1rem;
	border: 1px solid currentColor;
	font-size: .9rem;
}

.form-notice--success { background: var(--green); }
.form-notice--error { background: #ffd9cf; }

.thank-you { max-width: 980px; min-height: 70svh; }
.thank-you .lead { max-width: 760px; }
.thank-you .button-row { margin-top: 2.5rem; }

.contact-routes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--ink);
	border: 1px solid var(--ink);
}

.contact-routes a {
	position: relative;
	min-height: 360px;
	padding: 2rem;
	background: var(--paper);
	transition: background-color .25s ease;
}

.contact-routes a:first-child:hover { background: var(--orange); }
.contact-routes a:last-child:hover { background: var(--blue); }

.contact-routes span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.contact-routes h2 {
	max-width: 520px;
	margin-top: 7rem;
	font-size: clamp(2.2rem, 4vw, 4rem);
}

.contact-routes i {
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	font-size: 1.5rem;
	font-style: normal;
}

/* Blog and projects */
.journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4rem 1.4rem;
}

.journal-card__image {
	aspect-ratio: 4 / 3;
	margin-bottom: 1.2rem;
	overflow: hidden;
	background: var(--blue);
}

.journal-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.journal-card:hover img {
	transform: scale(1.025);
}

.journal-card__meta {
	margin-bottom: 1rem;
	color: var(--muted);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.journal-card h2 {
	margin-bottom: 1rem;
	font-size: clamp(1.7rem, 2.7vw, 2.8rem);
	line-height: 1.05;
}

.journal-card > a > p:last-child {
	color: var(--ink-soft);
}

.nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 5rem;
	font-weight: 700;
}

.article-header {
	max-width: 1040px;
	padding-top: clamp(5rem, 10vw, 9rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

.article-header h1 {
	margin-bottom: 2rem;
	font-size: clamp(3.5rem, 7vw, 7.2rem);
}

.article-deck {
	max-width: 760px;
	font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.article-image,
.project-cover {
	max-height: 820px;
	overflow: hidden;
}

.article-image img,
.project-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-content {
	width: min(calc(100% - (2 * var(--gutter))), 760px);
	margin-inline: auto;
	padding-block: clamp(4rem, 8vw, 8rem);
}

.prose {
	font-size: 1.08rem;
}

.prose h2 {
	margin: 3.5rem 0 1.25rem;
	font-size: clamp(2rem, 4vw, 3.5rem);
}

.prose h3 {
	margin: 2.5rem 0 1rem;
	font-size: 1.6rem;
}

.prose p,
.prose ul,
.prose ol {
	margin-bottom: 1.5rem;
}

.prose a {
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-underline-offset: .2em;
}

.prose blockquote {
	margin: 3rem 0;
	padding-left: 1.5rem;
	border-left: 4px solid var(--orange);
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-style: italic;
}

.article-footer {
	padding-bottom: var(--space);
}

.empty-state {
	max-width: 820px;
	padding: clamp(3rem, 7vw, 6rem);
	background: var(--white);
}

.empty-state h2 {
	margin-bottom: 1.5rem;
	font-size: clamp(2.8rem, 5vw, 5rem);
}

.empty-state .button {
	margin-top: 1rem;
}

.not-found {
	display: grid;
	grid-template-columns: .8fr 1fr;
	align-items: center;
	min-height: 75svh;
	gap: 4rem;
}

.not-found__code {
	margin-bottom: 0;
	color: var(--orange);
	font-family: var(--font-serif);
	font-size: clamp(8rem, 23vw, 22rem);
	font-style: italic;
	line-height: .7;
}

.not-found h1 {
	margin-bottom: 2rem;
	font-size: clamp(3rem, 5vw, 5rem);
}

/* Footer */
.site-footer {
	background: var(--ink);
	color: var(--white);
}

.footer-lead {
	padding-top: clamp(5rem, 10vw, 9rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
	border-bottom: 1px solid rgba(255,255,255,.24);
}

.footer-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: clamp(3.3rem, 8vw, 8rem);
	font-weight: 500;
	letter-spacing: -.055em;
	line-height: .95;
}

.footer-title span {
	font-size: .45em;
	transition: transform .25s ease;
}

.footer-title:hover span {
	transform: translate(8px, -8px);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.9fr repeat(3, 1fr);
	gap: 3rem;
	padding-block: 4rem;
}

.footer-grid > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
}

.footer-logo {
	width: 106px;
	margin-bottom: 1.35rem;
}

.footer-grid p:not(.footer-label) {
	color: rgba(255,255,255,.55);
	font-size: .83rem;
}

.footer-label {
	margin-bottom: .8rem;
	color: rgba(255,255,255,.42);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.footer-grid a {
	font-size: .84rem;
	transition: color .2s ease;
}

.footer-grid a:hover {
	color: var(--orange);
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin-top: 1rem;
}

.footer-grid .social-links a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 50%;
	font-size: .65rem;
	font-weight: 700;
}

.social-links svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.footer-grid .social-links a:hover {
	background: var(--orange);
	border-color: var(--orange);
	color: var(--ink);
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	padding-block: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.24);
}

.footer-bottom p {
	margin-bottom: 0;
	color: rgba(255,255,255,.5);
	font-size: .66rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.whatsapp-float {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 950;
	display: flex;
	align-items: center;
	gap: .55rem;
	min-height: 56px;
	padding: .9rem 1.15rem;
	border: 2px solid var(--white);
	border-radius: 999px;
	background: var(--whatsapp);
	color: var(--white);
	box-shadow: 0 14px 42px rgba(37, 211, 102, .38);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.whatsapp-float::before {
	position: absolute;
	inset: -7px;
	border: 2px solid rgba(37, 211, 102, .48);
	border-radius: inherit;
	pointer-events: none;
	content: "";
	animation: whatsapp-pulse 3.2s ease-out infinite;
}

@keyframes whatsapp-pulse {
	0%, 55%, 100% { transform: scale(1); opacity: 0; }
	62% { opacity: .55; }
	88% { transform: scale(1.12); opacity: 0; }
}

.whatsapp-float:hover {
	transform: translateY(-3px);
	background: #20bd5a;
	color: var(--white);
}

.whatsapp-float svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Responsive */
@media (max-width: 1080px) {
	.site-header__inner {
		grid-template-columns: 130px 1fr;
	}

	.primary-nav .menu {
		gap: 1rem;
	}

	.primary-nav .menu a {
		font-size: .72rem;
	}

	.primary-nav {
		gap: 1rem;
	}

	.project-editorial {
		grid-template-columns: 1fr 1fr;
	}

	.project-editorial__card:nth-child(2),
	.project-editorial__card:nth-child(3) {
		padding-top: 0;
	}

	.project-editorial__card:nth-child(3) {
		grid-column: 1 / -1;
		max-width: 52%;
		margin-left: auto;
	}

	.hero__content,
	.page-hero {
		grid-template-columns: 1fr;
	}

	.hero h1 {
		max-width: 980px;
	}

	.hero__intro,
	.page-hero__intro {
		max-width: 560px;
	}

	.page-hero h1 {
		align-self: end;
	}

	.page-hero__intro {
		align-self: start;
	}

	.service-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.method-grid,
	.need-grid,
	.principles-grid,
	.values-grid {
		grid-template-columns: 1fr 1fr;
	}

	.method-grid li:nth-child(2),
	.need-grid article:nth-child(2),
	.principles-grid article:nth-child(2),
	.values-grid article:nth-child(2) {
		border-right: 0;
	}

	.method-grid li,
	.need-grid article,
	.principles-grid article,
	.values-grid article {
		border-bottom: 1px solid var(--line);
	}

	.method-grid li:nth-child(3),
	.need-grid article:nth-child(3),
	.principles-grid article:nth-child(3),
	.values-grid article:nth-child(3) {
		padding-left: 0;
	}

	.footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr;
	}

	.footer-grid > div:last-child {
		grid-column: 2 / 3;
	}

	.service-card-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
	:root {
		--space: clamp(4.5rem, 16vw, 7rem);
	}

	.site-header__inner {
		grid-template-columns: 1fr auto;
		min-height: 72px;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		gap: .75rem;
		padding: .5rem 0;
		border: 0;
		background: none;
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .07em;
		text-transform: uppercase;
	}

	.menu-toggle i,
	.menu-toggle i::before {
		display: block;
		width: 22px;
		height: 1px;
		background: var(--ink);
		content: "";
		transition: transform .2s ease;
	}

	.menu-toggle i::before {
		transform: translateY(-6px);
	}

	.menu-is-open .menu-toggle i {
		transform: rotate(45deg);
	}

	.menu-is-open .menu-toggle i::before {
		transform: rotate(-90deg);
	}

	.primary-nav {
		position: fixed;
		top: 72px;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 2rem var(--gutter) 3rem;
		background: var(--white);
		overflow-y: auto;
	}

	.menu-is-open .primary-nav {
		display: flex;
	}

	.primary-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-nav .menu li {
		border-bottom: 1px solid var(--line);
	}

	.primary-nav .menu .menu-item-has-children {
		border-bottom: 0;
	}

	.primary-nav .menu a {
		display: block;
		padding: 1rem 0;
		font-size: clamp(1.7rem, 7vw, 2.8rem);
		font-weight: 500;
		letter-spacing: -.04em;
	}

	.primary-nav .menu a::after {
		display: none;
	}

	.primary-nav .sub-menu {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
		margin: 0;
		padding: 0 0 1rem;
		transform: none;
		background: var(--line);
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
	}

	.primary-nav .sub-menu a {
		min-height: 50px;
		padding: .65rem;
		background: var(--paper);
		color: var(--ink);
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: 0;
	}

	.header-cta {
		justify-content: space-between;
		margin-top: 1rem;
		padding: 1.1rem;
	}

	.header-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.hero {
		min-height: calc(100svh - 72px);
	}

	.hero__content {
		gap: 2.5rem;
	}

	.hero__footer p {
		max-width: 80%;
		line-height: 1.6;
	}

	.media-showcase__item { width: clamp(230px, 58vw, 380px); }

	.statement__grid,
	.section-heading--split,
	.experience,
	.home-contact,
	.custom-proposal,
	.service-detail,
	.form-section__grid,
	.founder {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}


	.section-heading--split > p,
	.experience__copy,
	.home-contact > div:last-child,
	.custom-proposal > div:last-child {
		max-width: 590px;
		padding-top: 0;
	}

	.ugc-bridge {
		grid-template-columns: 1fr;
	}

	.ugc-callout,
	.reviews,
	.faq__grid,
	.diagnostic-banner,
	.service-landing__body,
	.diagnostic-details,
	.service-landing__cta {
		grid-template-columns: 1fr;
	}

	.ugc-callout {
		align-items: start;
	}

	.proof-strip { grid-template-columns: 1fr; }
	.proof-strip__label { border-bottom: 1px solid var(--ink); }
	.proof-strip__viewport { border-left: 0; }

	.faq__intro {
		position: static;
	}

	.ugc-panel {
		min-height: 580px;
	}

	.project-grid,
	.journal-grid {
		grid-template-columns: 1fr 1fr;
	}

	.page-hero {
		min-height: 600px;
	}

	.service-detail {
		min-height: auto;
	}

	.service-detail__head {
		display: flex;
		align-items: baseline;
		gap: 1rem;
	}

	.service-detail__head span {
		margin-bottom: 0;
	}

	.process-list {
		grid-template-columns: 1fr 1fr;
	}

	.process-list li:nth-child(3n + 1) {
		padding-left: 1.5rem;
	}

	.process-list li:nth-child(3n) {
		border-right: 1px solid var(--line);
	}

	.process-list li:nth-child(odd) {
		padding-left: 0;
	}

	.process-list li:nth-child(even) {
		border-right: 0;
	}

	.founder__visual {
		min-height: 500px;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid > div:first-child {
		grid-column: 1 / -1;
	}

	.footer-grid > div:last-child {
		grid-column: auto;
	}

	.service-card { min-height: 350px; }
}

@media (max-width: 560px) {
	:root {
		--gutter: 1.2rem;
	}

	.hero h1,
	.page-hero h1 {
		font-size: clamp(3.1rem, 15vw, 5.2rem);
	}

	.hero__content {
		padding-block: 2.5rem;
	}

	.project-editorial,
	.blog-preview-grid,
	.service-card-grid {
		grid-template-columns: 1fr;
	}

	.media-showcase { padding-top: 2rem; }
	.media-showcase__item { width: 78vw; }

	.project-editorial__card:nth-child(3) {
		grid-column: auto;
		max-width: none;
		margin-left: 0;
	}

	.project-editorial__media {
		aspect-ratio: 4 / 4.8;
	}

	.primary-nav .sub-menu {
		grid-template-columns: 1fr;
	}

	.hero__footer p {
		font-size: .6rem;
	}

	.section-heading h2,
	.statement h2,
	.experience h2,
	.home-contact h2,
	.custom-proposal h2 {
		font-size: clamp(2.6rem, 13vw, 4.3rem);
	}

	.service-box-grid { grid-template-columns: 1fr; }
	.service-box { min-height: 350px; }

	.method-grid,
	.need-grid,
	.principles-grid,
	.values-grid,
	.process-list,
	.project-grid,
	.journal-grid,
	.form-grid,
	.contact-routes {
		grid-template-columns: 1fr;
	}

	.method-grid li,
	.need-grid article,
	.principles-grid article,
	.values-grid article,
	.process-list li,
	.process-list li:nth-child(3n),
	.process-list li:nth-child(even) {
		min-height: 240px;
		padding: 1.35rem 0;
		border-right: 0;
	}

	.method-grid span,
	.process-list span,
	.need-grid span,
	.principles-grid span,
	.values-grid span {
		margin-bottom: 3rem;
	}

	.ugc-panel {
		min-height: 540px;
		padding: 2rem var(--gutter);
	}

	.ugc-panel h2 {
		font-size: clamp(2.6rem, 13vw, 4.3rem);
	}

	.page-hero {
		min-height: 540px;
		padding-top: 3.5rem;
	}

	.service-landing__hero h1,
	.diagnostic-hero h1,
	.thank-you h1 {
		font-size: clamp(3.1rem, 15vw, 5.2rem);
	}

	.service-landing__media { min-height: 380px; }

	.clean-list {
		grid-template-columns: 1fr;
	}

	.form-span-2 {
		grid-column: auto;
	}

	.contact-routes a {
		min-height: 300px;
	}

	.footer-title {
		font-size: clamp(3rem, 14vw, 4.8rem);
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-grid > div:first-child,
	.footer-grid > div:last-child {
		grid-column: auto;
	}

	.footer-bottom {
		flex-direction: column;
		gap: .5rem;
	}

	.whatsapp-float span {
		display: none;
	}

	.whatsapp-float {
		right: 1rem;
		bottom: 1rem;
		min-width: 56px;
		padding: .8rem;
	}

	.not-found {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-block: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.media-showcase__track,
	.proof-strip__track {
		animation: none;
	}

	.whatsapp-float::before { animation: none; }

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}


/* Exact-preview refinements that also keep WordPress content editable. */
.hero--dark:not(.hero--has-media)::before {
  background: linear-gradient(90deg, #111 0%, #111 54%, #2f3736 100%);
}
.media-showcase__item--placeholder > div {
  display: grid; place-items: center;
}
.media-showcase__item--placeholder > div > span {
  padding: .52rem .7rem; background: var(--paper); border: 1px solid var(--ink);
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.brand-marquee-preview {
  overflow: hidden; padding: 1.25rem 0 1.6rem; background: var(--white); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.brand-marquee-preview > .eyebrow { margin-bottom: 1rem; }
.brand-marquee-preview__viewport { overflow: hidden; }
.brand-marquee-preview__track { display: flex; width: max-content; animation: abar-brand-right 30s linear infinite; }
.brand-marquee-preview:hover .brand-marquee-preview__track { animation-play-state: paused; }
.brand-marquee-preview__group { display: flex; align-items: center; flex: 0 0 auto; }
.brand-marquee-preview__item {
  display: grid; place-items: center; min-width: clamp(190px, 18vw, 300px); min-height: 84px; padding: 1rem 2rem;
  border-right: 1px solid var(--line); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.brand-marquee-preview__item img { max-width: 135px; max-height: 46px; object-fit: contain; }
.brand-marquee-preview__item--placeholder { color: #6f6f69; }
@keyframes abar-brand-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.review-preview__note { display:block; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid rgba(17,17,17,.28); font-size: .66rem; line-height: 1.35; }
.blog-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-preview-grid article:nth-child(2) .blog-preview__media, .blog-preview-card--blue .blog-preview__media { background: var(--blue); }
.blog-preview-grid article:nth-child(3) .blog-preview__media, .blog-preview-card--pink .blog-preview__media { background: var(--pink); }
.blog-preview-grid article:nth-child(2) { background: color-mix(in srgb, var(--blue) 42%, var(--paper)); }
.blog-preview-grid article:nth-child(3) { background: color-mix(in srgb, var(--pink) 34%, var(--paper)); }
.primary-nav .sub-menu { z-index: 1200; }
.primary-nav .sub-menu a { pointer-events: auto; }
@media (max-width: 1100px) { .blog-preview-grid { grid-template-columns: 1fr 1fr; } .blog-preview-grid article:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 700px) { .blog-preview-grid { grid-template-columns: 1fr; } .blog-preview-grid article:nth-child(3) { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .brand-marquee-preview__track { animation: none; } }


/* =========================================================
   ABAR 2.1.3 — final parity fixes requested after WP QA
   ========================================================= */

/* Hero: full-bleed black/gradient background while content stays in the shell. */
.home .hero {
	min-height: min(760px, calc(100svh - 82px));
	overflow: visible;
	background: transparent;
}
.home .hero--dark::before {
	background: linear-gradient(90deg, #111111 0%, #111111 54%, #303837 100%);
}
.home .hero__media::after {
	background: linear-gradient(90deg, rgba(17,17,17,.91) 0%, rgba(17,17,17,.78) 54%, rgba(39,48,47,.64) 100%);
}
.home .hero__media-prompt {
	position: absolute;
	top: clamp(6.2rem, 13vh, 9rem);
	right: 0;
	z-index: 2;
	margin: 0;
	padding: .75rem 1rem;
	border: 1px solid rgba(255,255,255,.42);
	color: rgba(255,255,255,.72);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Service symbols: make the SVG strokes visible and consistent with the approved cards. */
.home .service-box__icon svg {
	display: block;
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
}

/* Data panel restored between Method and Diagnostic. */
.home .data-banner {
	padding-block: clamp(4rem, 7vw, 6.5rem);
	background: var(--ink);
	color: var(--white);
}
.home .data-banner .eyebrow {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	color: rgba(255,255,255,.64);
}
.home .data-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block: 1px solid rgba(255,255,255,.5);
}
.home .data-strip article {
	display: flex;
	flex-direction: column;
	min-height: 290px;
	padding: clamp(1.6rem, 3vw, 2.6rem);
	border-right: 1px solid rgba(255,255,255,.2);
}
.home .data-strip article:last-child { border-right: 0; }
.home .data-strip strong {
	display: block;
	margin-bottom: 1.6rem;
	font-size: clamp(3.7rem, 6vw, 6.8rem);
	font-weight: 500;
	letter-spacing: -.065em;
	line-height: .9;
}
.home .data-strip p { max-width: 250px; margin-bottom: 2rem; color: rgba(255,255,255,.78); }
.home .data-strip span,
.home .data-strip a {
	margin-top: auto;
	color: rgba(255,255,255,.64);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .055em;
	text-transform: uppercase;
}

/* Marquee connects directly to the Marcas / Creadores split. */
.home .brand-marquee-preview { margin: 0; padding-bottom: 1.25rem; }


/* Three testimonial states, same approved orange card. */
.home .review-preview,
.home .review-preview:nth-child(2),
.home .review-preview:nth-child(3) { background: var(--orange) !important; }
.home .review-slides { min-height: 440px; }
.home .review-preview__note { color: rgba(17,17,17,.68); }

/* Blog: three equal editorial cards; only the image area carries the pastel color. */
.home .blog-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.3rem, 2.6vw, 2.6rem);
	background: transparent;
	border: 0;
}
.home .blog-preview-grid article,
.home .blog-preview-grid article:nth-child(2),
.home .blog-preview-grid article:nth-child(3) {
	min-width: 0;
	min-height: 0;
	background: transparent !important;
}
.home .blog-preview-grid article > a { display: block; height: auto; }
.home .blog-preview__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	margin-bottom: 1.45rem;
	overflow: hidden;
	border: 1px solid var(--ink);
	background: var(--blue);
}
.home .blog-preview-grid article:nth-child(2) .blog-preview__media { background: #fff0ea; }
.home .blog-preview-grid article:nth-child(3) .blog-preview__media { background: #eef4e8; }
.home .blog-preview__media img { width: 100%; height: 100%; object-fit: cover; }
.home .blog-preview__media span {
	margin: 0;
	padding: .55rem .75rem;
	background: var(--paper);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.home .blog-preview__content { padding: 0; }
.home .blog-preview__content > span {
	display: block;
	margin-bottom: 1.25rem;
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.home .blog-preview-grid h3 {
	max-width: none;
	margin-bottom: 1.15rem;
	font-size: clamp(2rem, 3.15vw, 3.7rem);
	line-height: 1.02;
}
.home .blog-preview-grid p { max-width: none; color: var(--ink-soft); }

/* Services hub: 04 and 05 no longer share the same beige background. */
.service-detail--pink { background: color-mix(in srgb, var(--pink) 28%, var(--paper)); }
.service-detail--yellow { background: color-mix(in srgb, var(--yellow) 48%, var(--paper)); }

@media (max-width: 900px) {
	.home .data-strip { grid-template-columns: 1fr 1fr; }
	.home .data-strip article:nth-child(2) { border-right: 0; }
	.home .data-strip article { border-bottom: 1px solid rgba(255,255,255,.2); }
	.home .blog-preview-grid { grid-template-columns: 1fr 1fr; }
	.home .blog-preview-grid article:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	.home .hero { min-height: auto; overflow: visible; }
	.home .hero__media-prompt { position: static; justify-self: start; margin-top: 1rem; }
	.home .data-strip,
	.home .blog-preview-grid { grid-template-columns: 1fr; }
	.home .data-strip article,
	.home .data-strip article:nth-child(2) { border-right: 0; }
	.home .blog-preview-grid article:nth-child(3) { grid-column: auto; }
}


/* =========================================================
   ABAR 2.1.4 — micro QA: hero/gallery seam + diagnostic flow
   ========================================================= */

/* Remove the empty black band between the hero and the moving visual gallery.
   The gallery now begins almost immediately while keeping black behind the
   upper edge of the cards, as in the approved composition. */
.home .media-showcase {
	margin-top: -1px;
	padding-top: clamp(1rem, 1.8vw, 2rem);
	background: linear-gradient(to bottom, var(--ink) 0 clamp(9rem, 13vw, 12rem), var(--paper) clamp(9rem, 13vw, 12rem) 100%);
}

/* Make the yellow diagnostic block a deliberate full-width colour transition.
   This avoids the black → white → yellow → white → black "sandwich" that
   appeared after restoring the data panel. Content remains aligned to the
   same editorial shell. */
.home .diagnostic-banner {
	position: relative;
	isolation: isolate;
	margin-bottom: 0;
	border: 0;
	background: transparent;
}
.home .diagnostic-banner::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--yellow);
	content: "";
}

@media (max-width: 820px) {
	.home .media-showcase {
		padding-top: 1rem;
		background: linear-gradient(to bottom, var(--ink) 0 7rem, var(--paper) 7rem 100%);
	}
}


/* =========================================================
   ABAR 2.1.5 — cohesion pass
   Hero/gallery seam, compact data rail and floating Services hub.
   ========================================================= */

/* 1) Hero → gallery: remove the visible black "step".
   A very shallow dark lip remains behind the first pixels of the cards so
   the transition feels connected, not like a separate black section. */
.home .media-showcase {
	margin-top: 0;
	padding-top: .55rem;
	padding-bottom: clamp(4.5rem, 8vw, 7rem);
	background: linear-gradient(
		to bottom,
		var(--ink) 0,
		var(--ink) clamp(2.25rem, 3vw, 3.25rem),
		var(--paper) clamp(2.25rem, 3vw, 3.25rem),
		var(--paper) 100%
	);
}
.home .media-showcase__group {
	align-items: flex-start;
}

/* 2) Data panel: retain the useful technical proof, but turn it into a
   secondary editorial rail instead of a dominant full screen section. */
.home .data-banner {
	padding-block: clamp(2rem, 3.6vw, 3rem);
}
.home .data-banner .eyebrow {
	margin-bottom: clamp(.9rem, 1.8vw, 1.35rem);
	font-size: .62rem;
	letter-spacing: .12em;
}
.home .data-strip article {
	min-height: 150px;
	padding: clamp(1.05rem, 1.8vw, 1.55rem);
}
.home .data-strip strong {
	margin-bottom: .7rem;
	font-size: clamp(2.65rem, 4.1vw, 4.25rem);
	line-height: .88;
}
.home .data-strip p {
	max-width: 230px;
	margin-bottom: .8rem;
	font-size: clamp(.82rem, 1vw, .95rem);
	line-height: 1.35;
}
.home .data-strip span,
.home .data-strip a {
	font-size: .56rem;
	letter-spacing: .075em;
}

/* 3) Services hub: floating editorial cards instead of six oversized
   full-width colour slabs. The palette is used as an accent, so the page
   remains connected with the rest of ABAR and feels lighter. */
.service-detail-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.1rem, 2.2vw, 1.8rem);
	width: min(var(--shell), calc(100% - (2 * var(--gutter))));
	max-width: var(--shell);
	margin-inline: auto;
	padding: 0 0 var(--space);
	background: transparent;
}
.service-detail-list .service-detail {
	--detail-accent: var(--orange);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: auto;
	max-width: none;
	min-height: 430px;
	margin: 0;
	padding: clamp(1.65rem, 2.8vw, 2.35rem);
	overflow: hidden;
	border: 1px solid var(--line);
	background: color-mix(in srgb, var(--paper) 35%, var(--white)) !important;
	color: var(--ink) !important;
	box-shadow: 0 12px 34px rgba(17,17,17,.045);
	transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.service-detail-list .service-detail::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: var(--detail-accent);
	content: "";
}
.service-detail-list .service-detail:hover,
.service-detail-list .service-detail:focus-within {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--detail-accent) 45%, var(--line));
	box-shadow: 0 20px 48px rgba(17,17,17,.085);
}
.service-detail-list .service-detail--orange { --detail-accent: var(--orange); }
.service-detail-list .service-detail--blue { --detail-accent: var(--blue); }
.service-detail-list .service-detail--green { --detail-accent: var(--green); }
.service-detail-list .service-detail--pink { --detail-accent: var(--pink); }
.service-detail-list .service-detail--yellow { --detail-accent: #d9be62; }
.service-detail-list .service-detail--dark { --detail-accent: var(--ink); }

.service-detail-list .service-detail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(2.3rem, 4vw, 3.8rem);
}
.service-detail-list .service-detail__head span {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--detail-accent) 62%, var(--ink));
	border-radius: 50%;
	background: color-mix(in srgb, var(--detail-accent) 16%, var(--white));
	font-size: 1.25rem;
	line-height: 1;
}
.service-detail-list .service-detail__head p {
	margin: 0;
	font-size: .64rem;
	letter-spacing: .1em;
	text-align: right;
}
.service-detail-list .service-detail__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.service-detail-list .service-detail__body h2 {
	max-width: 520px;
	margin-bottom: 1.15rem;
	font-size: clamp(2rem, 3.2vw, 3.45rem);
	line-height: 1.02;
}
.service-detail-list .service-detail__body .lead {
	max-width: 540px;
	margin-bottom: 1.65rem;
	color: var(--ink-soft) !important;
	font-size: clamp(.98rem, 1.2vw, 1.08rem);
}
.service-detail-list .clean-list {
	grid-template-columns: 1fr 1fr;
	gap: 0 1.4rem;
	max-width: none;
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--ink);
}
.service-detail-list .clean-list li {
	padding: .72rem 0;
	font-size: .78rem;
	line-height: 1.3;
}
.service-detail-list .service-detail__body .text-link {
	align-self: flex-start;
	margin-top: 1.35rem;
	font-size: .68rem;
}

/* Let the Services intro flow into the floating grid without a hard cut. */
.page-hero + .service-detail-list {
	margin-top: clamp(-1.2rem, -1vw, -.4rem);
}

/* Each individual service landing can now receive independent design rules
   through its slug class without changing the other service pages. */
.landing-content[class*="landing-content--"] {
	--landing-accent: var(--orange);
}
.landing-content--social-media { --landing-accent: var(--blue); }
.landing-content--creacion-contenido { --landing-accent: var(--green); }
.landing-content--branding { --landing-accent: var(--pink); }
.landing-content--seo,
.landing-content--seo-local { --landing-accent: var(--yellow); }
.landing-content--publicidad-digital { --landing-accent: var(--orange); }
.landing-content--email-marketing-automatizacion { --landing-accent: var(--blue); }
.landing-content--influencer-marketing-ugc { --landing-accent: var(--green); }
.landing-content--eventos-activaciones { --landing-accent: var(--pink); }

@media (max-width: 900px) {
	.home .data-strip article { min-height: 135px; }
	.service-detail-list { grid-template-columns: 1fr; }
	.service-detail-list .service-detail { min-height: 0; }
}

@media (max-width: 700px) {
	.home .media-showcase {
		padding-top: .35rem;
		background: linear-gradient(to bottom, var(--ink) 0 1.8rem, var(--paper) 1.8rem 100%);
	}
	.home .data-banner { padding-block: 1.7rem; }
	.home .data-strip article { min-height: 120px; padding: 1rem; }
	.home .data-strip strong { font-size: 2.75rem; }
	.service-detail-list .clean-list { grid-template-columns: 1fr; }
}

/* ================================================================
   ABAR 2.2.0 — cohesion, editable section colours and responsive
   ================================================================ */

:root {
	--page-accent: var(--orange);
	--page-secondary: var(--blue);
	--page-heading-color: var(--abar-heading-color, var(--ink));
	--page-body-color: var(--abar-body-color, var(--ink-soft));
	--page-heading-weight: var(--abar-heading-weight, 600);
	--page-body-weight: var(--abar-body-weight, 400);
}

html,
body { overflow-x: clip; }
body { font-weight: var(--abar-body-weight, 400); }
h1, h2, h3, h4, h5, h6 { font-weight: var(--abar-heading-weight, 600); }
.eyebrow { font-weight: var(--abar-label-weight, 700); }
.button,
.wp-block-button__link,
.text-link { font-weight: var(--abar-button-weight, 700); }

/* HOME — shorter hero, no service footer strip and no black step before media. */
.home .hero {
	min-height: clamp(600px, 76vh, 790px);
	padding-top: clamp(2.3rem, 4.2vw, 4rem);
	padding-bottom: clamp(2.5rem, 4vw, 4rem);
	background: var(--abar-home-hero-bg, var(--ink));
	color: var(--abar-home-hero-text, var(--white));
}
.home .hero::before {
	background: linear-gradient(90deg, color-mix(in srgb, var(--abar-home-hero-bg, var(--ink)) 98%, transparent) 0%, color-mix(in srgb, var(--abar-home-hero-bg, var(--ink)) 90%, transparent) 48%, color-mix(in srgb, var(--abar-home-hero-bg, var(--ink)) 72%, transparent) 100%);
}
.home .hero__media::after {
	background: linear-gradient(90deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.82) 48%, rgba(17,17,17,.54) 100%);
}
.home .hero__meta { margin-bottom: clamp(1.4rem, 3vw, 2.6rem); }
.home .hero__content {
	align-items: end;
	gap: clamp(2rem, 5vw, 6rem);
}
.home .hero h1 {
	max-width: 1000px;
	font-size: clamp(4rem, 7.7vw, 8.7rem);
	line-height: .82;
	color: var(--abar-home-hero-text, var(--white));
}
.home .hero__intro { padding-bottom: .35rem; }
.home .hero__intro > p {
	max-width: 520px;
	font-size: clamp(1rem, 1.45vw, 1.35rem);
	line-height: 1.42;
}
.home .hero__media-prompt { top: 18%; }


.home .media-showcase {
	margin: 0 !important;
	padding: clamp(.7rem, 1.5vw, 1.4rem) 0 clamp(1.8rem, 4vw, 3.7rem) !important;
	background: var(--abar-home-media-bg, var(--paper)) !important;
}

.home .media-showcase__item > div { box-shadow: 0 12px 38px rgba(17,17,17,.055); }

.home .statement { background: var(--abar-home-statement-bg, var(--paper)); }
.home .services-preview { background: var(--abar-home-services-bg, var(--white)); }
.home .method { background: var(--abar-home-method-bg, var(--paper)); }
.home .reviews { background: var(--abar-home-reviews-bg, var(--paper)); }
.home .review-preview { background: var(--abar-home-review-card-bg, var(--orange)) !important; }
.home .faq { background: var(--abar-home-faq-bg, var(--white)); }
.home .blog-teaser { background: var(--abar-home-blog-bg, var(--paper)); }
.home .form-section { background: var(--abar-home-contact-bg, var(--blue)); }

/* HOME — data ribbon: only the useful content between the two rules. */
.home .data-banner {
	padding: 0 !important;
	background: var(--abar-home-data-bg, var(--ink));
	color: var(--abar-home-data-text, var(--white));
}
.home .data-banner > .section-shell {
	padding-top: 0;
	padding-bottom: 0;
}
.home .data-banner .eyebrow { display: none !important; }
.home .data-strip {
	border-top: 1px solid color-mix(in srgb, var(--abar-home-data-text, #fff) 58%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--abar-home-data-text, #fff) 58%, transparent);
}
.home .data-strip article {
	min-height: 112px !important;
	padding: clamp(.9rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.45rem) !important;
	justify-content: center;
}
.home .data-strip strong {
	margin: 0 0 .35rem !important;
	font-size: clamp(2rem, 3vw, 3.2rem) !important;
	line-height: .9;
}
.home .data-strip p {
	margin: 0 !important;
	max-width: 260px;
	font-size: clamp(.73rem, .8vw, .86rem) !important;
	line-height: 1.28 !important;
	color: color-mix(in srgb, var(--abar-home-data-text, #fff) 76%, transparent) !important;
}
.home .data-strip span,
.home .data-strip a { display: none !important; }

/* HOME — diagnostic as a compact editorial card, not another full-width hero. */
.home .diagnostic-banner {
	width: min(1120px, calc(100% - (2 * var(--gutter))));
	max-width: 1120px;
	margin: clamp(2.4rem, 5vw, 5rem) auto;
	padding: clamp(2rem, 3.5vw, 3.25rem) !important;
	gap: clamp(2rem, 4vw, 4.5rem);
	background: var(--abar-home-diagnostic-bg, var(--yellow));
	border: 1px solid var(--ink);
}
.home .diagnostic-banner h2 {
	font-size: clamp(2.4rem, 4.3vw, 4.8rem);
	line-height: .95;
}
.home .diagnostic-banner > div:last-child { max-width: 460px; }
.home .diagnostic-banner > div:last-child > p { font-size: clamp(.98rem, 1.25vw, 1.12rem); }
.home .diagnostic-banner ul { margin-block: 1.2rem; }

/* SERVICES HUB — subtle floating cards, three per row on wide screens. */
body.page-template-page-servicios { background: var(--abar-services-page-bg, var(--paper)); }
.page-template-page-servicios .page-hero { padding-bottom: clamp(2.5rem, 5vw, 5rem); }
.page-template-page-servicios .service-detail-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.7vw, 1.45rem);
	padding-bottom: clamp(4rem, 7vw, 7rem);
}
.page-template-page-servicios .service-detail-list .service-detail {
	min-height: 330px;
	padding: clamp(1.4rem, 2vw, 1.9rem);
	border-radius: 2px;
	box-shadow: 0 12px 38px rgba(17,17,17,.045);
}
.page-template-page-servicios .service-detail-list .service-detail:nth-child(1) { background: var(--abar-services-card-1, #FFF5F0) !important; }
.page-template-page-servicios .service-detail-list .service-detail:nth-child(2) { background: var(--abar-services-card-2, #F1F7F7) !important; }
.page-template-page-servicios .service-detail-list .service-detail:nth-child(3) { background: var(--abar-services-card-3, #F3F7EE) !important; }
.page-template-page-servicios .service-detail-list .service-detail:nth-child(4) { background: var(--abar-services-card-4, #F9EEF1) !important; }
.page-template-page-servicios .service-detail-list .service-detail:nth-child(5) { background: var(--abar-services-card-5, #FFF8E1) !important; }
.page-template-page-servicios .service-detail-list .service-detail:nth-child(6) { background: var(--abar-services-card-6, #F3F2EF) !important; }
.page-template-page-servicios .service-detail-list .service-detail__head {
	align-items: center;
	justify-content: flex-start;
	margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem);
}
.page-template-page-servicios .service-detail__icon {
	display: grid !important;
	place-items: center;
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	border: 1px solid color-mix(in srgb, var(--detail-accent) 70%, var(--ink));
	border-radius: 50%;
	background: color-mix(in srgb, var(--detail-accent) 15%, #fff);
}
.page-template-page-servicios .service-detail__icon svg { width: 20px; height: 20px; }
.page-template-page-servicios .service-detail__number {
	width: auto !important;
	height: auto !important;
	margin-left: auto !important;
	border: 0 !important;
	background: transparent !important;
	font-size: .62rem !important;
	font-weight: 700;
}
.page-template-page-servicios .service-detail__head p { display: none; }
.page-template-page-servicios .service-detail__body h2 {
	font-size: clamp(1.7rem, 2.25vw, 2.55rem);
	line-height: 1.02;
}
.page-template-page-servicios .service-detail__body .lead {
	font-size: .94rem;
	line-height: 1.45;
	margin-bottom: 1rem;
}
.page-template-page-servicios .clean-list {
	grid-template-columns: 1fr;
	margin-top: auto;
	padding-top: .55rem;
}
.page-template-page-servicios .clean-list li {
	padding: .45rem 0;
	font-size: .72rem;
}
.page-template-page-servicios .service-detail__body .text-link { margin-top: .9rem; }
.page-template-page-servicios .custom-proposal {
	margin-top: 0;
	margin-bottom: clamp(3rem, 6vw, 6rem);
	padding: clamp(2rem, 4vw, 3.5rem);
	background: var(--white);
	border: 1px solid var(--line);
}

/* Reusable page media slots. */
.abar-page-media { margin: 0; min-width: 0; }
.abar-page-media > div {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 220px;
	overflow: hidden;
	background: color-mix(in srgb, var(--page-accent) 16%, var(--paper));
	border: 1px solid color-mix(in srgb, var(--page-accent) 42%, var(--line));
}
.abar-page-media img,
.abar-page-media video { width: 100%; height: 100%; object-fit: cover; }
.abar-page-media--placeholder span {
	max-width: 220px;
	padding: .65rem .85rem;
	background: rgba(247,246,243,.9);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
}

/* BRAND LANDING — varied visual rhythm instead of one beige sheet. */
.brands-page {
	--page-accent: var(--abar-brands-page-accent, var(--orange));
	--page-secondary: var(--abar-brands-visual-bg, var(--blue));
	background: var(--page-background, var(--abar-brands-page-bg, var(--paper)));
	color: var(--page-body-color, var(--ink-soft));
}
.brands-page h1,
.brands-page h2,
.brands-page h3 { color: var(--page-heading-color, var(--ink)); font-weight: var(--page-heading-weight, var(--abar-heading-weight, 600)); }
.brands-page p { font-weight: var(--page-body-weight, var(--abar-body-weight, 400)); }
.brands-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
	gap: clamp(2.5rem, 6vw, 7rem);
	align-items: center;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
}
.brands-hero h1 { max-width: 900px; margin: 0 0 1.6rem; font-size: clamp(3.8rem, 7vw, 8rem); line-height: .86; letter-spacing: -.055em; }
.brands-hero h1 em { display: block; color: var(--page-accent); font-family: var(--serif); font-weight: 400; }
.brands-hero .lead { max-width: 640px; margin-bottom: 1.7rem; font-size: clamp(1rem, 1.35vw, 1.3rem); }
.brands-hero__media > div { min-height: clamp(420px, 48vw, 650px); background: var(--page-secondary); }
.brands-collage {
	display: grid;
	grid-template-columns: 1.25fr .72fr .72fr;
	gap: clamp(.8rem, 1.5vw, 1.25rem);
	padding-bottom: clamp(4rem, 8vw, 8rem);
}
.brands-collage__wide > div { min-height: 460px; }
.brands-collage__small > div,
.brands-collage__video > div { min-height: 460px; }
.brands-collage__small > div { background: color-mix(in srgb, var(--green) 48%, var(--paper)); }
.brands-collage__video > div { background: color-mix(in srgb, var(--pink) 52%, var(--paper)); }
.brands-definition {
	padding-top: clamp(3rem, 6vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
}
.brands-definition > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);
	gap: clamp(2rem, 6vw, 7rem);
	align-items: start;
}
.brands-definition h2 { max-width: 850px; font-size: clamp(2.8rem, 5.5vw, 6rem); line-height: .92; }
.brands-definition .lead { font-size: clamp(1.15rem, 1.5vw, 1.45rem); }
.brands-needs { padding-block: clamp(4rem, 8vw, 8rem); background: color-mix(in srgb, var(--page-accent) 7%, var(--white)); }
.brands-needs__head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; margin-bottom: 2.5rem; }
.brands-needs__head h2 { font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .92; }
.brands-needs__head h2 em { color: var(--page-accent); font-family: var(--serif); font-weight: 400; }
.brands-needs__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); }
.brands-needs__grid article { min-height: 260px; padding: clamp(1.3rem, 2.3vw, 2rem); background: var(--white); }



.brands-needs__grid span { font-size: .62rem; font-weight: 700; }
.brands-needs__grid h3 { margin-top: clamp(4rem, 7vw, 6rem); font-size: clamp(1.4rem, 2vw, 2rem); }
.brands-process { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
.brands-process ol { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); margin: 2.5rem 0 0; padding: 0; border-block: 1px solid var(--ink); list-style: none; }
.brands-process li { min-height: 180px; padding: 1.2rem; border-right: 1px solid var(--line); }
.brands-process li:last-child { border-right: 0; }
.brands-process li span,
.brands-process li small { display: block; }
.brands-process li strong { display: block; margin: 2.7rem 0 .6rem; font-size: 1rem; }
.brands-process li small { color: var(--muted); font-size: .7rem; }
.brands-form-zone { padding-block: clamp(4rem, 8vw, 7rem); background: color-mix(in srgb, var(--page-secondary) 24%, var(--paper)); }

/* FAQ — editorial category navigation and coloured groups. */
.faq-page {
	--page-accent: var(--abar-faq-page-accent, var(--green));
	background: var(--page-background, var(--abar-faq-page-bg, var(--paper)));
	color: var(--page-body-color, var(--ink-soft));
}
.faq-page h1,
.faq-page h2 { color: var(--page-heading-color, var(--ink)); font-weight: var(--page-heading-weight, var(--abar-heading-weight, 600)); }
.faq-page__hero {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: clamp(2rem, 7vw, 8rem);
	align-items: end;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.faq-page__hero h1 { max-width: 850px; font-size: clamp(4rem, 7.4vw, 8.5rem); line-height: .83; letter-spacing: -.06em; }
.faq-page__hero h1 em { color: color-mix(in srgb, var(--page-accent) 72%, var(--ink)); font-family: var(--serif); font-weight: 400; }
.faq-page__hero-card { padding: clamp(1.7rem, 3vw, 2.5rem); background: var(--page-accent); border: 1px solid var(--ink); }
.faq-page__hero-card p { margin-bottom: 2rem; font-size: 1.05rem; }
.faq-page__nav { display: flex; gap: .6rem; flex-wrap: wrap; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.faq-page__nav a { padding: .65rem .9rem; border: 1px solid var(--line); background: var(--white); font-size: .67rem; font-weight: 700; text-transform: uppercase; }
.faq-page__nav a:hover { border-color: var(--ink); transform: translateY(-2px); }
.faq-page__library { padding-bottom: clamp(4rem, 8vw, 8rem); }
.faq-page__group {
	display: grid;
	grid-template-columns: .35fr 1.65fr;
	gap: clamp(2rem, 5vw, 6rem);
	padding: clamp(2rem, 4vw, 3.4rem);
	margin-bottom: 1rem;
	border: 1px solid var(--line);
	background: var(--white);
}
.faq-page__group--2 { background: color-mix(in srgb, var(--page-accent) 12%, var(--white)); }
.faq-page__group--3 { background: color-mix(in srgb, var(--blue) 12%, var(--white)); }
.faq-page__group header span { display: block; margin-bottom: 2rem; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.8rem); font-style: italic; }
.faq-page__group header h2 { font-size: clamp(1.5rem, 2.4vw, 2.8rem); }
.faq-page__group .faq__list { border-top: 1px solid var(--ink); }
.faq-page__group details { background: transparent; }
.faq-page__cta { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: clamp(4rem, 8vw, 8rem); background: var(--page-accent); border: 1px solid var(--ink); }
.faq-page__cta h2 { max-width: 850px; font-size: clamp(2.4rem, 4.3vw, 4.7rem); }

/* DIAGNOSTIC — intentionally short: message + CTA/form only. */
.diagnostic-direct {
	background: var(--page-background, var(--abar-diagnostic-page-bg, var(--paper)));
	color: var(--page-body-color, var(--ink-soft));
	padding-block: clamp(3rem, 7vw, 7rem);
}
.diagnostic-direct__wrap {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(420px, 1.05fr);
	gap: clamp(2rem, 6vw, 7rem);
	align-items: start;
}
.diagnostic-direct__intro { padding-top: clamp(1rem, 3vw, 2.5rem); }
.diagnostic-direct h1 { max-width: 760px; margin: 0 0 1.5rem; font-size: clamp(3.6rem, 6.5vw, 7rem); line-height: .86; letter-spacing: -.055em; color: var(--page-heading-color, var(--ink)); }
.diagnostic-direct h1 em { display: block; color: var(--page-accent, var(--yellow)); font-family: var(--serif); font-weight: 400; }
.diagnostic-direct__intro > p:not(.eyebrow) { max-width: 590px; font-size: clamp(1rem, 1.25vw, 1.18rem); }
.diagnostic-direct__badges { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.diagnostic-direct__badges li { padding: .58rem .8rem; border: 1px solid var(--ink); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.diagnostic-direct__form { padding: clamp(1.7rem, 3.5vw, 3rem); background: var(--abar-diagnostic-form-bg, var(--yellow)); border: 1px solid var(--ink); }
.diagnostic-direct__form-head h2 { margin-bottom: .55rem; font-size: clamp(2rem, 3.2vw, 3.4rem); }
.diagnostic-direct__form-head p:last-child { margin-bottom: 1.4rem; }
.diagnostic-direct__note { margin-top: 1.5rem; font-size: .78rem; color: var(--muted); }

/* SERVICE LANDINGS — visual first, service-specific rhythm and reusable media. */
.service-landing {
	--page-accent: var(--orange);
	background: var(--page-background, var(--paper));
	color: var(--page-body-color, var(--ink-soft));
}
.service-landing h1,
.service-landing h2,
.service-landing h3 { color: var(--page-heading-color, var(--ink)); font-weight: var(--page-heading-weight, var(--abar-heading-weight, 600)); }
.service-landing p,
.service-landing li { font-weight: var(--page-body-weight, var(--abar-body-weight, 400)); }
.service-landing__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
	gap: clamp(2.5rem, 6vw, 7rem);
	align-items: center;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}
.service-landing__hero h1 { max-width: 900px; margin: 0 0 1.3rem; font-size: clamp(3.6rem, 6.2vw, 7rem); line-height: .88; letter-spacing: -.055em; }
.service-landing__hero .lead { max-width: 650px; margin-bottom: 1.3rem; font-size: clamp(1rem, 1.35vw, 1.25rem); }
.service-landing__hero-media > div { min-height: clamp(390px, 43vw, 600px); background: color-mix(in srgb, var(--page-accent) 26%, var(--paper)); }
.service-landing__collage {
	display: grid;
	grid-template-columns: 1.2fr .8fr .8fr;
	gap: clamp(.7rem, 1.3vw, 1rem);
	padding-bottom: clamp(4rem, 8vw, 8rem);
}
.service-landing__collage-a > div { min-height: 420px; }
.service-landing__collage-b > div,
.service-landing__collage-c > div { min-height: 420px; }
.service-landing__collage-b > div { background: color-mix(in srgb, var(--page-accent) 14%, var(--white)); }
.service-landing__collage-c > div { background: color-mix(in srgb, var(--page-accent) 30%, var(--paper)); }
.service-landing__focus {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
	gap: clamp(2rem, 6vw, 8rem);
	padding-top: clamp(3rem, 6vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
	border-block: 1px solid var(--ink);
}
.service-landing__focus h2 { max-width: 760px; font-size: clamp(2.8rem, 5vw, 5.6rem); line-height: .92; }
.service-landing__focus ul { margin: 0; padding: 0; list-style: none; }
.service-landing__focus li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: clamp(.95rem, 1.15vw, 1.1rem); }
.service-landing__focus li span { order: 2; }
.service-landing__visual-break { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.service-landing__video > div { min-height: min(62vw, 720px); }
.service-landing__editor { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.service-landing__process { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.service-landing__process ol { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 1.8rem 0 0; padding: 0; border-block: 1px solid var(--ink); list-style: none; }
.service-landing__process li { min-height: 145px; padding: 1rem; border-right: 1px solid var(--line); }
.service-landing__process li:last-child { border-right: 0; }
.service-landing__process span,
.service-landing__process small { display: block; }
.service-landing__process strong { display: block; margin: 2rem 0 .4rem; }
.service-landing__process small { color: var(--muted); }
.service-landing__cta { display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding: clamp(2.2rem, 4.5vw, 4rem); margin-bottom: clamp(4rem, 8vw, 8rem); background: var(--page-accent); border: 1px solid var(--ink); }
.service-landing__cta h2 { max-width: 780px; font-size: clamp(2.5rem, 4.5vw, 5rem); line-height: .93; }

/* Give each service a recognisable but connected visual cadence. */
.service-landing--social-media .service-landing__collage { grid-template-columns: .78fr 1.25fr .78fr; }
.service-landing--creacion-contenido .service-landing__hero-media > div,
.service-landing--influencer-marketing-ugc .service-landing__hero-media > div,
.service-landing--eventos-activaciones .service-landing__hero-media > div { min-height: clamp(460px, 55vw, 720px); }
.service-landing--branding .service-landing__collage,
.service-landing--diseno-web .service-landing__collage { grid-template-columns: 1.35fr .65fr .65fr; }
.service-landing--seo .service-landing__collage,
.service-landing--seo-local .service-landing__collage,
.service-landing--publicidad-digital .service-landing__collage { grid-template-columns: 1fr 1fr 1fr; }
.service-landing--email-marketing-automatizacion .service-landing__collage { grid-template-columns: .7fr 1.3fr .7fr; }

/* Per-section text colours and weights from Customizer/page controls. */
.home .statement h2,
.home .services-preview h2,
.home .method h2,
.home .diagnostic-banner h2,
.home .reviews h2,
.home .faq h2,
.home .blog-teaser h2,
.home .form-section h2 { color: var(--abar-heading-color, var(--ink)); font-weight: var(--abar-heading-weight, 600); }
.home .statement p,
.home .services-preview p,
.home .method p,
.home .diagnostic-banner p,
.home .faq p,
.home .blog-teaser p,
.home .form-section p { font-weight: var(--abar-body-weight, 400); }
.home .eyebrow { font-weight: var(--abar-label-weight, 700); }
.home .hero .eyebrow,
.home .hero h1,
.home .hero p { color: var(--abar-home-hero-text, var(--white)); }
.home .review-preview h2,
.home .review-preview blockquote,
.home .review-preview p { color: var(--ink); }

/* Tablet / mobile: priority is no overflow, readable rhythm and touch targets. */
@media (max-width: 1100px) {
	.home .hero { min-height: auto; }
	.home .hero__content { grid-template-columns: 1fr .55fr; gap: 2.5rem; }
	.page-template-page-servicios .service-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brands-needs__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.brands-process ol { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.brands-process li:nth-child(3) { border-right: 0; }
	.brands-process li:nth-child(-n/**/+3) { border-bottom: 1px solid var(--line); }
	.service-landing__collage { grid-template-columns: 1.15fr .85fr; }
	.service-landing__collage-c { grid-column: 1 / -1; }
	.service-landing__collage-c > div { min-height: 320px; }
}

@media (max-width: 900px) {
	.home .hero { padding-top: 2.4rem; padding-bottom: 2.8rem; }
	.home .hero__meta { margin-bottom: 1.6rem; }
	.home .hero__content { grid-template-columns: 1fr; gap: 1.5rem; }
	.home .hero h1 { max-width: 780px; font-size: clamp(3.65rem, 11vw, 6.3rem); }
	.home .hero__intro { max-width: 620px; }
	.home .hero__media-prompt { display: none; }
	.home .data-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.home .data-strip article:nth-child(2) { border-right: 0; }
	.home .data-strip article:nth-child(-n/**/+2) { border-bottom: 1px solid rgba(255,255,255,.22); }
	.home .diagnostic-banner { grid-template-columns: 1fr; }
	.page-template-page-servicios .service-detail-list { grid-template-columns: 1fr 1fr; }
	.brands-hero,
	.faq-page__hero,
	.diagnostic-direct__wrap,
	.service-landing__hero,
	.service-landing__focus { grid-template-columns: 1fr; }
	.brands-hero__media > div,
	.service-landing__hero-media > div { min-height: 420px; }
	.brands-collage { grid-template-columns: 1.2fr .8fr; }
	.brands-collage__video { grid-column: 1 / -1; }
	.brands-collage__video > div { min-height: 300px; }
	.brands-definition > div,
	.brands-needs__head { grid-template-columns: 1fr; }
	.faq-page__group { grid-template-columns: .45fr 1.55fr; gap: 2rem; }
	.diagnostic-direct__form { max-width: 720px; }
	.service-landing__process ol { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.service-landing__process li:nth-child(2) { border-right: 0; }
	.service-landing__process li:nth-child(-n/**/+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
	:root { --gutter: 1rem; }
	.home .hero {
		min-height: 0;
		padding: 1.8rem var(--gutter) 2.2rem;
	}
	.home .hero__meta { display: block; margin-bottom: 1.25rem; }
	.home .hero__index { display: none; }
	.home .hero h1 { font-size: clamp(3.2rem, 16vw, 5rem); line-height: .84; }
	.home .hero h1 em { margin-top: .18em; }
	.home .hero__intro > p { font-size: 1rem; }
	.home .hero .button-row { align-items: stretch; }
	.home .hero .button,
	.home .hero .text-link { width: 100%; }
	.home .media-showcase {
		padding-top: .7rem !important;
		background: var(--abar-home-media-bg, var(--paper)) !important;
	}
	.home .media-showcase__item { width: min(76vw, 320px); }
	.home .data-strip { grid-template-columns: 1fr 1fr; }
	.home .data-strip article { min-height: 100px !important; padding: .8rem !important; }
	.home .data-strip strong { font-size: 2rem !important; }
	.home .data-strip p { font-size: .68rem !important; }
	.home .diagnostic-banner { width: calc(100% - 2rem); margin: 2rem auto; padding: 1.5rem !important; }
	.home .diagnostic-banner h2 { font-size: clamp(2.2rem, 11vw, 3.5rem); }
	.home .diagnostic-banner ul { display: flex; flex-wrap: wrap; }

	.page-template-page-servicios .service-detail-list { grid-template-columns: 1fr; gap: .8rem; }
	.page-template-page-servicios .service-detail-list .service-detail { min-height: 0; padding: 1.3rem; }
	.page-template-page-servicios .service-detail__body h2 { font-size: 1.85rem; }
	.page-template-page-servicios .clean-list { margin-top: 1rem; }

	.brands-hero,
	.faq-page__hero,
	.service-landing__hero { padding-top: 3rem; padding-bottom: 2.5rem; }
	.brands-hero h1,
	.faq-page__hero h1,
	.service-landing__hero h1,
	.diagnostic-direct h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
	.brands-hero__media > div,
	.service-landing__hero-media > div { min-height: 340px; }
	.brands-collage,
	.service-landing__collage,
	.service-landing--social-media .service-landing__collage,
	.service-landing--branding .service-landing__collage,
	.service-landing--diseno-web .service-landing__collage,
	.service-landing--seo .service-landing__collage,
	.service-landing--seo-local .service-landing__collage,
	.service-landing--publicidad-digital .service-landing__collage,
	.service-landing--email-marketing-automatizacion .service-landing__collage {
		grid-template-columns: 1fr;
	}
	.brands-collage__wide > div,
	.brands-collage__small > div,
	.brands-collage__video > div,
	.service-landing__collage-a > div,
	.service-landing__collage-b > div,
	.service-landing__collage-c > div { min-height: 280px; }
	.brands-collage__video,
	.service-landing__collage-c { grid-column: auto; }
	.brands-needs__grid { grid-template-columns: 1fr; gap: .7rem; background: transparent; }
	.brands-needs__grid article { min-height: 210px; border: 1px solid var(--line); }
	.brands-process ol { grid-template-columns: 1fr 1fr; }
	.brands-process li:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
	.brands-process li:nth-child(even) { border-right: 0; }
	.brands-process li:nth-last-child(-n/**/+2) { border-bottom: 0; }
	.faq-page__hero-card { padding: 1.4rem; }
	.faq-page__nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2rem; scrollbar-width: none; }
	.faq-page__nav::-webkit-scrollbar { display: none; }
	.faq-page__nav a { flex: 0 0 auto; }
	.faq-page__group { grid-template-columns: 1fr; gap: 1rem; padding: 1.3rem; }
	.faq-page__group header { display: flex; align-items: baseline; gap: 1rem; }
	.faq-page__group header span { margin: 0; font-size: 2.2rem; }
	.faq-page__cta { grid-template-columns: 1fr; align-items: start; padding: 1.5rem; }
	.diagnostic-direct { padding-block: 2rem 4rem; }
	.diagnostic-direct__wrap { gap: 1.6rem; }
	.diagnostic-direct__intro { padding-top: 0; }
	.diagnostic-direct__form { padding: 1.35rem; }
	.service-landing__focus { gap: 1.5rem; padding-block: 2.5rem; }
	.service-landing__focus h2 { font-size: clamp(2.4rem, 12vw, 4rem); }
	.service-landing__process ol { grid-template-columns: 1fr 1fr; }
	.service-landing__process li { min-height: 120px; }
	.service-landing__cta { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
	.service-landing__cta h2 { font-size: clamp(2.2rem, 11vw, 3.6rem); }
}

@media (max-width: 480px) {
	.home .hero h1 { font-size: clamp(2.85rem, 15vw, 4rem); }
	.home .data-strip { grid-template-columns: 1fr; }
	.home .data-strip article { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.22); }
	.home .data-strip article:last-child { border-bottom: 0; }
	.brands-process ol,
	.service-landing__process ol { grid-template-columns: 1fr; }
	.brands-process li:nth-child(n),
	.service-landing__process li:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
	.brands-process li:last-child,
	.service-landing__process li:last-child { border-bottom: 0; }
	.diagnostic-direct__badges { gap: .4rem; }
	.diagnostic-direct__badges li { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
	.page-template-page-servicios .service-detail-list .service-detail,
	.faq-page__nav a { transition: none !important; transform: none !important; }
}
.home .projects-showcase { background: var(--abar-home-projects-bg, var(--paper)); }
.home .brand-marquee-preview { background: var(--abar-home-brand-marquee-bg, var(--white)); }
.home .ugc-panel--brand { background: var(--abar-home-ugc-brand-bg, var(--orange)); }
.home .ugc-panel--creator { background: var(--abar-home-ugc-creator-bg, var(--blue)); }
.home .proof-strip { background: var(--abar-home-proof-bg, var(--ink)); }

/* Gutenberg visual patterns available on any landing. */
.abar-visual-break,
.abar-editorial-collage,
.abar-text-media-editorial { margin-block: clamp(2.5rem, 6vw, 6rem); }
.abar-visual-break--full { width: 100%; max-width: none; }
.abar-visual-break--full .wp-block-image,
.abar-visual-break--video .wp-block-video { margin: 0; }
.abar-visual-break--full img,
.abar-visual-break--video video { display: block; width: 100%; max-height: 76vh; object-fit: cover; }
.abar-editorial-collage .wp-block-columns { gap: clamp(.7rem, 1.3vw, 1rem); }
.abar-editorial-collage .wp-block-image { height: 100%; min-height: 260px; margin: 0 0 clamp(.7rem, 1.3vw, 1rem); overflow: hidden; background: color-mix(in srgb, var(--page-accent, var(--orange)) 15%, var(--paper)); }
.abar-editorial-collage .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.abar-text-media-editorial { padding-block: clamp(1rem, 3vw, 3rem); }
.abar-text-media-editorial .wp-block-columns { gap: clamp(2rem, 6vw, 7rem); }
.abar-text-media-editorial h2 { font-size: clamp(2.4rem, 4.5vw, 5rem); line-height: .94; }
@media (max-width: 700px) {
	.abar-visual-break,
	.abar-editorial-collage,
	.abar-text-media-editorial { margin-block: 2rem; }
	.abar-editorial-collage .wp-block-columns,
	.abar-text-media-editorial .wp-block-columns { display: block; }
	.abar-editorial-collage .wp-block-image { min-height: 230px; margin-bottom: .75rem; }
}
/* Final hero tightening: no oversized vertical void between eyebrow and claim. */
.home .hero {
	grid-template-rows: auto auto;
	min-height: 0;
	align-content: start;
}
.home .hero__content { padding: clamp(1.8rem, 3.5vw, 3.2rem) 0 0; }

/* CREATORS — same system as brands, but cooler and more human. */
.creators-page { background: var(--paper); color: var(--page-body-color, var(--ink-soft)); }
.creators-page h1,
.creators-page h2,
.creators-page h3 { color: var(--page-heading-color, var(--ink)); font-weight: var(--page-heading-weight, var(--abar-heading-weight, 600)); }
.creators-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
	gap: clamp(2.5rem, 6vw, 7rem);
	align-items: center;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.creators-hero h1 { max-width: 900px; margin: 0 0 1.5rem; font-size: clamp(3.8rem, 7vw, 8rem); line-height: .86; letter-spacing: -.055em; }
.creators-hero h1 em { display: block; color: color-mix(in srgb, var(--page-accent, var(--blue)) 72%, var(--ink)); font-family: var(--serif); font-weight: 400; }
.creators-hero .lead { max-width: 620px; margin-bottom: 1.6rem; font-size: clamp(1rem,1.3vw,1.25rem); }
.creators-hero__media > div { min-height: clamp(430px, 50vw, 670px); background: color-mix(in srgb, var(--page-accent, var(--blue)) 58%, var(--paper)); }
.creators-collage { display: grid; grid-template-columns: .8fr 1.2fr .8fr; gap: clamp(.7rem, 1.3vw, 1rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
.creators-collage .abar-page-media > div { min-height: 390px; }
.creators-collage__b > div { background: color-mix(in srgb, var(--page-secondary, var(--green)) 58%, var(--paper)); }
.creators-collage__c > div { background: color-mix(in srgb, var(--pink) 45%, var(--paper)); }
.creators-page .creator-principles { border-top: 1px solid var(--ink); }
.creators-page .creator-flow { background: color-mix(in srgb, var(--page-accent, var(--blue)) 14%, var(--paper)); }
@media (max-width: 900px) {
	.creators-hero { grid-template-columns: 1fr; }
	.creators-collage { grid-template-columns: 1fr 1fr; }
	.creators-collage__c { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	.creators-hero { padding-top: 3rem; padding-bottom: 2.5rem; }
	.creators-hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
	.creators-hero__media > div { min-height: 330px; }
	.creators-collage { grid-template-columns: 1fr; }
	.creators-collage__c { grid-column: auto; }
	.creators-collage .abar-page-media > div { min-height: 260px; }
}

/* ================================================================
   ABAR 2.2.0 FINAL — connected rhythm + mobile-first finishing pass
   ================================================================ */

/* HERO: compact, editorial and connected to the visual carousel. */
.home .hero {
	min-height: 0 !important;
	padding-top: clamp(1.6rem, 2.8vw, 2.8rem) !important;
	padding-bottom: clamp(1.8rem, 3.2vw, 3rem) !important;
	grid-template-rows: auto auto !important;
	align-content: start !important;
}
.home .hero__meta { margin-bottom: 0 !important; }
.home .hero__content {
	padding: clamp(.8rem, 1.7vw, 1.5rem) 0 0 !important;
	gap: clamp(1.8rem, 4vw, 4.5rem) !important;
}
.home .hero h1 {
	font-size: clamp(3.8rem, 7vw, 7.6rem) !important;
	line-height: .84 !important;
}
.home .hero__intro > p { margin-bottom: 1.5rem !important; }
.home .hero__media-prompt {
	top: clamp(5.4rem, 9vw, 8rem) !important;
	right: var(--gutter) !important;
}
.home .hero__footer { display: none !important; }

/* The warm paper starts immediately after the hero: no black step. */
.home .media-showcase {
	margin-top: 0 !important;
	padding-top: clamp(.5rem, 1vw, .9rem) !important;
	background: var(--abar-home-media-bg, var(--paper)) !important;
}
.home .media-showcase__track { margin-top: 0 !important; }

/* Optional visual pause between Services and Methodology. */
.home-visual-break {
	padding: clamp(1.3rem, 3vw, 2.8rem) 0 clamp(3rem, 6vw, 5.5rem);
	background: var(--abar-home-visual-break-bg, var(--paper));
	overflow: hidden;
}
.home-visual-break__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
	gap: clamp(.7rem, 1.4vw, 1rem);
	align-items: end;
}
.home-visual-break__item {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	background: color-mix(in srgb, var(--blue) 42%, var(--paper));
}
.home-visual-break__item--wide { min-height: clamp(300px, 38vw, 560px); }
.home-visual-break__item--portrait {
	min-height: clamp(360px, 46vw, 650px);
	background: color-mix(in srgb, var(--pink) 42%, var(--paper));
}
.home-visual-break__item img,
.home-visual-break__item video { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; }
.home-visual-break__item > span {
	display: grid;
	place-items: center;
	min-height: inherit;
	padding: 1rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* DATA: only the rail itself is black. Everything outside the rules disappears. */
.home .data-banner {
	padding: 0 !important;
	background: var(--abar-home-method-bg, var(--paper)) !important;
	color: var(--abar-home-data-text, var(--white));
}
.home .data-banner > .section-shell { padding-block: 0 !important; }
.home .data-strip {
	background: var(--abar-home-data-bg, var(--ink));
	border-top: 1px solid color-mix(in srgb, var(--abar-home-data-text, #fff) 58%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--abar-home-data-text, #fff) 58%, transparent);
}
.home .data-strip article {
	min-height: 92px !important;
	padding: .75rem clamp(.85rem, 1.5vw, 1.25rem) !important;
	justify-content: center;
	background: transparent !important;
}
.home .data-strip strong {
	margin: 0 0 .25rem !important;
	font-size: clamp(1.8rem, 2.65vw, 2.85rem) !important;
}
.home .data-strip p {
	font-size: clamp(.68rem, .75vw, .8rem) !important;
	line-height: 1.25 !important;
}

/* DIAGNOSTIC CTA: compact card with space around it, not a second hero. */
.home .diagnostic-banner {
	width: min(940px, calc(100% - (2 * var(--gutter)))) !important;
	max-width: 940px !important;
	margin: clamp(2.2rem, 4.5vw, 4.2rem) auto !important;
	padding: clamp(1.7rem, 2.8vw, 2.5rem) !important;
	gap: clamp(1.7rem, 3vw, 3rem) !important;
}
.home .diagnostic-banner h2 {
	font-size: clamp(2.1rem, 3.7vw, 4rem) !important;
	line-height: .96 !important;
}
.home .diagnostic-banner > div:last-child { max-width: 390px !important; }
.home .diagnostic-banner > div:last-child > p { font-size: .98rem !important; }
.home .diagnostic-banner ul { margin-block: .85rem !important; }

/* Services hub: quieter floating cards and a continuous page rhythm. */
.page-template-page-servicios .page-hero {
	padding-top: clamp(3rem, 6vw, 5.8rem);
	padding-bottom: clamp(1.8rem, 3.8vw, 3.5rem) !important;
}
.page-template-page-servicios .service-detail-list {
	gap: clamp(.85rem, 1.45vw, 1.25rem) !important;
}
.page-template-page-servicios .service-detail-list .service-detail {
	min-height: 305px !important;
	padding: clamp(1.25rem, 1.8vw, 1.65rem) !important;
	box-shadow: 0 10px 32px rgba(17,17,17,.04) !important;
}
.page-template-page-servicios .service-detail__body h2 { font-size: clamp(1.6rem, 2vw, 2.25rem) !important; }
.page-template-page-servicios .service-detail__body .lead { font-size: .9rem !important; }

/* Brands: more visual, less beige, with alternating surfaces. */
.brands-page { background: var(--page-background, var(--abar-brands-page-bg, var(--paper))); }
.brands-hero { padding-top: clamp(3.2rem, 6vw, 6rem) !important; }
.brands-hero__media > div { background: var(--page-secondary, var(--abar-brands-visual-bg, var(--blue))) !important; }
.brands-collage { padding-top: .8rem; }
.brands-collage__wide > div { background: color-mix(in srgb, var(--page-accent, var(--orange)) 68%, var(--paper)) !important; }
.brands-collage__small > div { background: color-mix(in srgb, var(--green) 58%, var(--paper)) !important; }
.brands-collage__video > div { background: color-mix(in srgb, var(--pink) 55%, var(--paper)) !important; }
.brands-definition {
	margin-top: clamp(1.2rem, 2vw, 2rem);
	padding-top: clamp(3rem, 6vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
	border-top: 1px solid var(--line);
}
.brands-needs { background: color-mix(in srgb, var(--page-secondary, var(--blue)) 16%, var(--paper)); }
.brands-needs__grid article:nth-child(1) { background: color-mix(in srgb, var(--orange) 15%, #fff); }
.brands-needs__grid article:nth-child(2) { background: color-mix(in srgb, var(--blue) 18%, #fff); }
.brands-needs__grid article:nth-child(3) { background: color-mix(in srgb, var(--green) 18%, #fff); }
.brands-needs__grid article:nth-child(4) { background: color-mix(in srgb, var(--pink) 18%, #fff); }
.brands-process { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.brands-form-zone { background: color-mix(in srgb, var(--page-accent, var(--orange)) 13%, var(--paper)); }

/* FAQ: concise but not flat. */
.faq-page__hero { padding-top: clamp(3rem, 6vw, 5.5rem) !important; padding-bottom: clamp(2rem, 4vw, 3.6rem) !important; }
.faq-page__hero-card { box-shadow: 0 14px 40px rgba(17,17,17,.05); }
.faq-page__group { margin-bottom: .8rem; }
.faq-page__group:nth-child(3n/**/+1) { background: color-mix(in srgb, var(--page-accent, var(--green)) 11%, #fff); }
.faq-page__group:nth-child(3n/**/+2) { background: color-mix(in srgb, var(--blue) 12%, #fff); }
.faq-page__group:nth-child(3n) { background: color-mix(in srgb, var(--pink) 11%, #fff); }

/* Diagnostic landing: direct CTA + minimal form, intentionally short. */
.diagnostic-direct {
	padding: clamp(2.6rem, 5vw, 5rem) 0 clamp(3.2rem, 6vw, 6rem) !important;
	background: var(--page-background, var(--abar-diagnostic-page-bg, var(--paper)));
}
.diagnostic-direct__wrap {
	grid-template-columns: minmax(0, .82fr) minmax(360px, .7fr) !important;
	gap: clamp(2rem, 5vw, 6rem) !important;
	align-items: start;
}
.diagnostic-direct__intro h1 { font-size: clamp(3.4rem, 6vw, 6.6rem) !important; }
.diagnostic-direct__intro > p { max-width: 620px; }
.diagnostic-direct__form {
	padding: clamp(1.5rem, 2.6vw, 2.25rem) !important;
	background: var(--page-accent, var(--abar-diagnostic-form-bg, var(--yellow))) !important;
	border: 1px solid var(--ink);
}
.diagnostic-direct__form .form-grid { gap: .85rem !important; }
.diagnostic-direct__form textarea { min-height: 120px; }
.diagnostic-direct__note { margin-top: 1.1rem !important; font-size: .72rem !important; color: var(--muted); }

/* Service landings: same ABAR system, different visual personalities. */
.service-landing { overflow: clip; }
.service-landing__hero { padding-top: clamp(3rem, 6vw, 6rem) !important; padding-bottom: clamp(2.2rem, 4vw, 4rem) !important; }
.service-landing__collage { padding-top: .6rem; padding-bottom: clamp(3rem, 6vw, 6rem); }
.service-landing--estrategia-consultoria .service-landing__focus { background: color-mix(in srgb, var(--page-accent) 10%, var(--paper)); }
.service-landing--social-media .service-landing__collage-a > div,
.service-landing--social-media .service-landing__collage-c > div { min-height: 520px; }
.service-landing--social-media .service-landing__collage-b { transform: translateY(clamp(1rem, 3vw, 2.5rem)); }
.service-landing--creacion-contenido .service-landing__collage { grid-template-columns: 1.25fr .75fr .75fr; }
.service-landing--creacion-contenido .service-landing__collage-a > div { min-height: 560px; }
.service-landing--branding .service-landing__focus,
.service-landing--diseno-web .service-landing__focus { border-block: 0; background: color-mix(in srgb, var(--page-accent) 12%, var(--paper)); }
.service-landing--seo .service-landing__focus,
.service-landing--seo-local .service-landing__focus,
.service-landing--publicidad-digital .service-landing__focus { background: #fff; border: 1px solid var(--line); padding-inline: clamp(1.5rem, 3vw, 3rem); }
.service-landing--email-marketing-automatizacion .service-landing__collage-b { transform: translateY(clamp(1rem, 2.5vw, 2rem)); }
.service-landing--influencer-marketing-ugc .service-landing__hero-media > div,
.service-landing--eventos-activaciones .service-landing__hero-media > div { min-height: clamp(500px, 58vw, 760px) !important; }
.service-landing--influencer-marketing-ugc .service-landing__collage,
.service-landing--eventos-activaciones .service-landing__collage { grid-template-columns: .75fr 1.35fr .75fr; }

/* Gutenberg blocks inserted between text sections keep the same editorial system. */
.service-landing .entry-content .wp-block-image,
.service-landing .entry-content .wp-block-video { overflow: hidden; }
.service-landing .entry-content .wp-block-image img,
.service-landing .entry-content .wp-block-video video { width: 100%; object-fit: cover; }

/* Mobile-first QA: no horizontal scroll, readable typography, stacked media. */
@media (max-width: 900px) {
	.home-visual-break__grid { grid-template-columns: 1.2fr .8fr; }
	.home .diagnostic-banner { width: min(760px, calc(100% - 2rem)) !important; }
	.diagnostic-direct__wrap { grid-template-columns: 1fr !important; }
	.diagnostic-direct__form { max-width: 720px; }
	.service-landing--social-media .service-landing__collage-b,
	.service-landing--email-marketing-automatizacion .service-landing__collage-b { transform: none; }
}

@media (max-width: 700px) {
	.home .hero { padding: 1.35rem 1rem 1.7rem !important; }
	.home .hero__content { padding-top: .7rem !important; }
	.home .hero h1 { font-size: clamp(2.9rem, 14.5vw, 4.5rem) !important; }
	.home .hero__intro > p { margin-bottom: 1rem !important; font-size: .96rem !important; }
	.home .media-showcase { padding-top: .45rem !important; }
	.home-visual-break { padding: 1rem 0 2.5rem; }
	.home-visual-break__grid { grid-template-columns: 1fr; }
	.home-visual-break__item--wide,
	.home-visual-break__item--portrait { min-height: min(78vw, 360px); }
	.home .data-strip { grid-template-columns: 1fr 1fr !important; }
	.home .data-strip article { min-height: 84px !important; padding: .65rem .75rem !important; }
	.home .data-strip strong { font-size: 1.75rem !important; }
	.home .data-strip p { font-size: .64rem !important; }
	.home .diagnostic-banner { width: calc(100% - 2rem) !important; padding: 1.35rem !important; margin: 1.8rem auto !important; }
	.home .diagnostic-banner h2 { font-size: clamp(2rem, 10vw, 3.25rem) !important; }
	.page-template-page-servicios .service-detail-list .service-detail { padding: 1.15rem !important; }
	.brands-definition { padding-block: 2.5rem; }
	.brands-needs { padding-block: 2.5rem; }
	.faq-page__group { margin-bottom: .65rem; }
	.diagnostic-direct { padding: 2rem 0 3.5rem !important; }
	.diagnostic-direct__intro h1 { font-size: clamp(2.8rem, 14vw, 4.3rem) !important; }
	.diagnostic-direct__badges { display: flex; flex-wrap: wrap; }
	.diagnostic-direct__form { padding: 1.2rem !important; }
	.service-landing__collage,
	.service-landing--creacion-contenido .service-landing__collage,
	.service-landing--influencer-marketing-ugc .service-landing__collage,
	.service-landing--eventos-activaciones .service-landing__collage { grid-template-columns: 1fr !important; }
	.service-landing--social-media .service-landing__collage-a > div,
	.service-landing--social-media .service-landing__collage-c > div,
	.service-landing--creacion-contenido .service-landing__collage-a > div { min-height: 280px; }
	.service-landing__focus { padding-inline: 0; }
}

@media (max-width: 480px) {
	.home .data-strip { grid-template-columns: 1fr !important; }
	.home .data-strip article { min-height: 76px !important; border-right: 0 !important; }
	.home .data-strip strong { font-size: 1.6rem !important; }
	.home .diagnostic-banner .button { width: 100%; text-align: center; }
	.diagnostic-direct__form .form-grid { grid-template-columns: 1fr !important; }
	.diagnostic-direct__form .form-span-2 { grid-column: auto !important; }
}

/* Gutenberg horizontal visual strip: swipeable on mobile, grid-like on desktop. */
.abar-horizontal-strip { margin-block: clamp(2.5rem, 6vw, 6rem); }
.abar-horizontal-strip__track { gap: clamp(.7rem, 1.2vw, 1rem); }
.abar-horizontal-strip__track .wp-block-image {
	min-height: 300px;
	margin: 0;
	overflow: hidden;
	background: color-mix(in srgb, var(--page-accent, var(--blue)) 15%, var(--paper));
}
.abar-horizontal-strip__track .wp-block-image img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
@media (max-width: 700px) {
	.abar-horizontal-strip { width: 100%; max-width: none; overflow: hidden; }
	.abar-horizontal-strip__track {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 0 1rem .5rem;
	}
	.abar-horizontal-strip__track::-webkit-scrollbar { display: none; }
	.abar-horizontal-strip__track > .wp-block-column { flex: 0 0 min(78vw, 330px) !important; scroll-snap-align: start; }
	.abar-horizontal-strip__track .wp-block-image,
	.abar-horizontal-strip__track .wp-block-image img { min-height: 280px; }
}

/* ================================================================
   ABAR 2.2.1 — QA polish requested after real WordPress review
   ================================================================ */

/* HERO — recover a little breathing room without returning to the oversized version. */
.home .hero {
	padding-top: clamp(2rem, 3.25vw, 3.35rem) !important;
	padding-bottom: clamp(2.25rem, 3.7vw, 3.7rem) !important;
}
.home .hero__content {
	padding-top: clamp(1rem, 2vw, 1.8rem) !important;
	gap: clamp(2.1rem, 4.4vw, 5rem) !important;
}
.home .hero h1 {
	font-size: clamp(4rem, 7.35vw, 8rem) !important;
}
/* When there is no real hero media yet, keep the editable-media cue clear of the copy. */
.home .hero:not(.hero--has-media) .hero__media-prompt {
	top: clamp(4.8rem, 7.5vw, 6.8rem) !important;
	right: var(--gutter) !important;
	max-width: 390px;
}
.home .hero:not(.hero--has-media) .hero__intro {
	padding-top: clamp(3.35rem, 4.8vw, 4.8rem);
}

/* SINGLE VISUAL TRANSITION — one image/video spanning the whole editorial plane. */
.home-visual-break {
	padding-top: clamp(1.1rem, 2.2vw, 2rem);
	padding-bottom: clamp(3rem, 5.5vw, 5rem);
}
.home-visual-break__grid {
	display: block !important;
}
.home-visual-break__item--full {
	width: 100%;
	min-height: clamp(340px, 43vw, 650px);
	margin: 0;
}
.home-visual-break__item--full img,
.home-visual-break__item--full video,
.home-visual-break__item--full > span {
	width: 100%;
	min-height: inherit;
}

/* DATA RAIL — full bleed, compact, and directly connected to neighbouring sections. */
.home .method {
	padding-bottom: clamp(2rem, 3.4vw, 3.2rem) !important;
}
.home .data-banner {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--abar-home-data-bg, var(--ink)) !important;
	color: var(--abar-home-data-text, var(--white));
}
.home .data-banner > .section-shell {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.home .data-strip {
	width: 100%;
	margin: 0;
	background: var(--abar-home-data-bg, var(--ink)) !important;
	border-block: 1px solid color-mix(in srgb, var(--abar-home-data-text, #fff) 42%, transparent) !important;
}
.home .data-strip article {
	min-height: 102px !important;
	padding: .8rem clamp(1rem, 2vw, 2rem) !important;
}
.home .data-strip strong {
	font-size: clamp(2rem, 2.8vw, 3rem) !important;
}
.home .data-strip p {
	font-size: clamp(.7rem, .78vw, .84rem) !important;
}

/* HOME DIAGNOSTIC — compact yellow card hangs directly from the data rail: no white band. */
.home .diagnostic-banner::before { display: none !important; }
.home .diagnostic-banner {
	width: min(980px, calc(100% - (2 * var(--gutter)))) !important;
	max-width: 980px !important;
	margin: 0 auto clamp(3rem, 5.5vw, 5rem) !important;
	padding: clamp(1.7rem, 2.7vw, 2.4rem) !important;
	background: var(--abar-home-diagnostic-bg, var(--yellow)) !important;
	border-top: 0 !important;
}
.home .diagnostic-banner h2 {
	font-size: clamp(2.15rem, 3.55vw, 3.85rem) !important;
}

/* PROJECTS — restore the approved black editorial territory and keep its text editable. */
.home .projects-showcase {
	background: var(--abar-home-projects-bg, var(--ink)) !important;
	color: var(--abar-home-projects-text, var(--white)) !important;
}
.home .projects-showcase .eyebrow,
.home .projects-showcase h2,
.home .projects-showcase h3 {
	color: var(--abar-home-projects-text, var(--white)) !important;
}
.home .projects-showcase .section-heading--split > p,
.home .project-editorial__card > p,
.home .project-editorial__card > a > p {
	color: color-mix(in srgb, var(--abar-home-projects-text, #fff) 65%, transparent) !important;
}
.home .project-editorial__card a { color: inherit; }

/* “LO QUE CONECTAMOS” — blue-grey again, text readable, motion to the right. */
.home .proof-strip {
	background: var(--abar-home-proof-bg, var(--blue)) !important;
	color: var(--abar-home-proof-text, var(--ink)) !important;
}
.home .proof-strip__label,
.home .proof-strip span { color: var(--abar-home-proof-text, var(--ink)) !important; }
@keyframes proof-scroll {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

/* SERVICES HUB — icons stay; numerical labels are removed for a quieter composition. */
.page-template-page-servicios .service-detail__number { display: none !important; }
.page-template-page-servicios .service-detail__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: .85rem;
}
.page-template-page-servicios .service-detail__head p { margin: 0; }

/* DIAGNOSTIC LANDING — stronger contrast and conversion hierarchy. */
.diagnostic-direct {
	background: var(--page-background, var(--abar-diagnostic-page-bg, #fff)) !important;
}
.diagnostic-direct h1 em {
	color: var(--page-accent, var(--abar-diagnostic-accent, var(--orange))) !important;
}
.diagnostic-direct__intro > p:not(.eyebrow) {
	color: var(--page-body-color, var(--ink-soft));
}
.diagnostic-direct__badges {
	gap: .55rem !important;
	margin-top: 1.55rem !important;
}
.diagnostic-direct__badges li {
	padding: .68rem .88rem !important;
	border: 1px solid var(--ink) !important;
	font-size: .68rem !important;
	font-weight: 800 !important;
	letter-spacing: .025em;
}
.diagnostic-direct__badges li:nth-child(1) {
	background: var(--abar-diagnostic-accent, var(--orange));
	color: var(--ink);
}
.diagnostic-direct__badges li:nth-child(2) {
	background: var(--ink);
	color: var(--white);
}
.diagnostic-direct__badges li:nth-child(3) {
	background: var(--white);
	color: var(--ink);
}
.diagnostic-direct__form {
	box-shadow: 0 14px 36px rgba(17,17,17,.055);
}

/* DESKTOP MEGA MENU — invisible submenu links must never catch the pointer.
   This fixes the menu opening while the cursor is in the middle of the page. */
@media (min-width: 901px) {
	.primary-nav .sub-menu {
		visibility: hidden;
		pointer-events: none !important;
	}
	.primary-nav .sub-menu a { pointer-events: none !important; }
	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu,
	.menu-item-has-children.submenu-is-open > .sub-menu {
		visibility: visible;
		pointer-events: auto !important;
	}
	.menu-item-has-children:hover > .sub-menu a,
	.menu-item-has-children:focus-within > .sub-menu a,
	.menu-item-has-children.submenu-is-open > .sub-menu a {
		pointer-events: auto !important;
	}
	.primary-nav .menu > .menu-item-has-children > a .nav-plus {
		display: inline-block;
		margin-left: .2rem;
		font-family: var(--font-sans);
		font-size: .9em;
		font-style: normal;
		font-weight: 500;
		line-height: 1;
	}
}

/* Responsive QA for the final changes. */
@media (max-width: 900px) {
	.primary-nav .menu > .menu-item-has-children > a .nav-plus { display: none; }
	.home-visual-break__item--full { min-height: clamp(300px, 58vw, 500px); }
	.home .data-strip { grid-template-columns: 1fr 1fr !important; }
	.home .data-strip article:nth-child(2n) { border-right: 0 !important; }
	.home .data-strip article:nth-child(-n/**/+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
	.home .diagnostic-banner { width: min(760px, calc(100% - 2rem)) !important; }
}

@media (max-width: 700px) {
	.home .hero {
		padding: 1.55rem 1rem 2rem !important;
	}
	.home .hero:not(.hero--has-media) .hero__intro { padding-top: .7rem; }
	.home .hero:not(.hero--has-media) .hero__media-prompt {
		position: static;
		max-width: none;
		margin-top: 1rem;
	}
	.home-visual-break { padding: .9rem 0 2.6rem; }
	.home-visual-break__item--full { min-height: min(62vw, 360px); }
	.home .method { padding-bottom: 2rem !important; }
	.home .data-strip article { min-height: 88px !important; padding: .7rem .8rem !important; }
	.home .diagnostic-banner {
		width: calc(100% - 2rem) !important;
		margin: 0 auto 2.4rem !important;
		padding: 1.35rem !important;
	}
	.diagnostic-direct__badges li { font-size: .62rem !important; }
}

@media (max-width: 480px) {
	.home .data-strip { grid-template-columns: 1fr !important; }
	.home .data-strip article,
	.home .data-strip article:nth-child(-n/**/+2) {
		border-right: 0 !important;
		border-bottom: 1px solid rgba(255,255,255,.18) !important;
	}
	.home .data-strip article:last-child { border-bottom: 0 !important; }
	.home-visual-break__item--full { min-height: 58vw; }
}

/* ================================================================
   ABAR 2.2.2 — visual cleanup + full-width continuity
   Requested after desktop QA review.
   ================================================================ */

/* HOME HERO — restore the approved desktop footprint: wide, not boxed, no grey side bars. */
.home .hero.section-shell {
	width: calc(100% - (2 * var(--gutter))) !important;
	max-width: none !important;
	margin-inline: auto !important;
	min-height: clamp(680px, 82vh, 840px) !important;
	padding: clamp(2.4rem, 3.8vw, 4rem) clamp(1.3rem, 2.2vw, 2.4rem) clamp(2.7rem, 4vw, 4.2rem) !important;
	background:
		radial-gradient(circle at 88% 36%, rgba(117,132,130,.34), transparent 35%),
		linear-gradient(104deg, #101010 0%, #101010 57%, #313938 100%) !important;
}
.home .hero__content {
	padding-top: clamp(2rem, 4vw, 4rem) !important;
	gap: clamp(3rem, 6vw, 7rem) !important;
}
.home .hero h1 {
	font-size: clamp(4.2rem, 7.55vw, 8.3rem) !important;
	line-height: .86 !important;
}
.home .hero:not(.hero--has-media) .hero__intro { padding-top: 0 !important; }
.home .hero:not(.hero--has-media) .hero__media-prompt {
	top: clamp(7.2rem, 10vw, 9.5rem) !important;
	right: clamp(1.3rem, 2.2vw, 2.4rem) !important;
}

/* Decorative separators: remove the long "wireframe" rules. Keep only functional
   dividers inside forms, FAQ accordions, menus and actual list rows. */
.page-hero,
.statement,
.brands-definition,
.custom-proposal,
.service-landing__focus,
.service-landing__cta,
.ugc-callout,
.faq-page__cta,
.values,
.values-grid,
.home-visual-break,
.service-landing__visual-break {
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-block: 0 !important;
}
.brands-process ol,
.service-landing__process ol {
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-block: 0 !important;
}
.values-grid article,
.brands-process li,
.service-landing__process li {
	border-right: 0 !important;
}

/* HOME DATA + DIAGNOSTIC — continuous, no white separator. */
.home .method { padding-bottom: clamp(1.2rem, 2vw, 2rem) !important; }
.home .data-banner { margin: 0 !important; }
.home .diagnostic-banner {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(2.2rem, 4vw, 4rem) max(var(--gutter), calc((100vw - var(--shell)) / 2)) !important;
	border: 0 !important;
	background: var(--abar-home-diagnostic-bg, var(--yellow)) !important;
}
.home .diagnostic-banner + .projects-showcase { margin-top: 0 !important; }

/* Full-width visual transition: media fills the whole editorial plane instead of
   sitting as a smaller rectangle inside beige. */
.home-visual-break,
.service-landing__visual-break {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.home-visual-break__grid,
.service-landing__visual-break .abar-page-media {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}
.home-visual-break__item--full,
.service-landing__video,
.service-landing__video > div {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	min-height: clamp(420px, 50vw, 760px) !important;
}
.home-visual-break__item--full > div,
.home-visual-break__item--full img,
.home-visual-break__item--full video,
.service-landing__video img,
.service-landing__video video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* FAQ CTA — full-width green band, centered and connected to the page. */
.faq-page__cta.section-shell {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(3.2rem, 6vw, 6rem) max(var(--gutter), calc((100vw - var(--shell)) / 2)) !important;
	display: flex !important;
	flex-direction: column;
	align-items: center !important;
	justify-content: center;
	gap: 1.7rem !important;
	text-align: center;
	background: var(--page-accent, var(--green)) !important;
	border: 0 !important;
}
.faq-page__cta .eyebrow { margin-bottom: 0; }
.faq-page__cta h2 {
	max-width: 920px !important;
	margin: 0 auto !important;
}
.faq-page__cta .button { margin-inline: auto; }

/* ABAR values — lighter, cleaner and less grid-like. */
.values {
	background: color-mix(in srgb, var(--blue) 66%, #fff) !important;
	color: var(--ink) !important;
}
.values .section-heading { padding-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.values-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.8rem, 1.4vw, 1.2rem) !important;
}
.values-grid article {
	min-height: 270px;
	padding: clamp(1.5rem, 2.4vw, 2.25rem) !important;
	background: rgba(255,255,255,.54);
	border: 0 !important;
}
.values-grid article span { color: rgba(17,17,17,.62); }
.values-grid article h3,
.values-grid article p { color: var(--ink) !important; }

/* Diagnostic landing — white form for maximum contrast, warm background for the CTA area. */
.diagnostic-direct {
	background: var(--abar-diagnostic-page-bg, #fcf7e5) !important;
}
.diagnostic-direct__form {
	background: #fff !important;
	border: 0 !important;
	box-shadow: 0 20px 60px rgba(17,17,17,.10) !important;
}
.diagnostic-direct__form input,
.diagnostic-direct__form textarea,
.diagnostic-direct__form select {
	background: #fff !important;
}
.diagnostic-direct__form-head .eyebrow { color: var(--orange); }
.diagnostic-direct__badges li:nth-child(1) { background: var(--orange) !important; }

/* Service/process cards: use spacing and surfaces instead of long separator lines. */
.service-landing__process ol,
.brands-process ol {
	gap: .8rem;
	background: transparent !important;
}
.service-landing__process li,
.brands-process li {
	background: color-mix(in srgb, var(--page-accent, var(--blue)) 8%, #fff);
}

@media (max-width: 900px) {
	.home .hero.section-shell {
		width: calc(100% - 2rem) !important;
		min-height: auto !important;
	}
	.values-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.home .diagnostic-banner {
		padding-inline: 1.5rem !important;
	}
}

@media (max-width: 700px) {
	.home .hero.section-shell {
		width: calc(100% - 1.5rem) !important;
		padding: 1.65rem 1rem 2.1rem !important;
	}
	.home .hero__content { padding-top: 1rem !important; gap: 1.5rem !important; }
	.home .hero h1 { font-size: clamp(3.15rem, 15vw, 5rem) !important; }
	.home .hero:not(.hero--has-media) .hero__media-prompt { position: static !important; margin-top: 1rem; }
	.values-grid { grid-template-columns: 1fr; }
	.values-grid article { min-height: 0; }
	.faq-page__cta.section-shell { padding: 3rem 1.25rem !important; }
	.home-visual-break__item--full,
	.service-landing__video,
	.service-landing__video > div { min-height: 62vw !important; }
	.home .diagnostic-banner { padding: 2rem 1.25rem !important; }
}

/* ================================================================
   ABAR 2.2.3 — exact hero + seamless media + mobile navigation QA
   ================================================================ */

/* Highlight colour: global in Customizer, overridable on each page. */
.hero h1 em,
.page-hero h1 em,
.brands-hero h1 em,
.creators-hero h1 em,
.about-page h1 em,
.diagnostic-direct h1 em,
.brands-needs__head h2 em,
.service-landing h1 em,
.service-landing h2 em {
	color: var(--page-highlight-color, var(--abar-highlight-color, var(--orange))) !important;
}
.home .hero h1 em {
	color: var(--abar-home-hero-highlight, var(--abar-highlight-color, var(--orange))) !important;
}

/* HOME HERO — restore the approved composition exactly: no grey side rails,
   no secondary top-right label, broad black-to-blue-grey glow and generous scale. */
.home .hero.section-shell {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	min-height: clamp(690px, 78vh, 830px) !important;
	margin: 0 !important;
	padding: clamp(4.4rem, 6vw, 7rem) clamp(2rem, 7.2vw, 8.5rem) clamp(3.4rem, 5vw, 5.2rem) !important;
	overflow: hidden !important;
	background:
		radial-gradient(circle at 96% 43%, rgba(126,143,141,.42) 0, rgba(100,116,114,.24) 20%, rgba(48,57,56,.08) 39%, transparent 56%),
		linear-gradient(104deg, #101010 0%, #101010 55%, #202726 73%, #303837 100%) !important;
	color: #fff;
}
.home .hero.section-shell::before {
	display: none !important;
}
.home .hero__meta {
	position: relative;
	z-index: 3;
	display: block !important;
	margin: 0 !important;
}
.home .hero__meta .eyebrow {
	margin: 0 !important;
	color: rgba(255,255,255,.64) !important;
	font-size: .72rem;
	letter-spacing: .13em;
}
.home .hero__index { display: none !important; }
.home .hero__content {
	position: relative;
	z-index: 3;
	display: grid !important;
	grid-template-columns: minmax(0, 1.65fr) minmax(310px, .66fr) !important;
	align-items: end !important;
	gap: clamp(4rem, 8vw, 10rem) !important;
	padding: clamp(5.7rem, 8.2vw, 8.6rem) 0 0 !important;
}
.home .hero h1 {
	max-width: 1080px !important;
	margin: 0 !important;
	font-size: clamp(5rem, 7.45vw, 8.7rem) !important;
	line-height: .84 !important;
	letter-spacing: -.065em !important;
}
.home .hero h1 em {
	display: block;
	margin-top: .12em;
	font-family: var(--font-serif);
	font-size: .73em !important;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.055em;
	line-height: .94;
}
.home .hero__intro {
	max-width: 430px !important;
	padding: 0 0 .25rem !important;
}
.home .hero__intro > p {
	margin: 0 0 2rem !important;
	color: rgba(255,255,255,.82) !important;
	font-size: clamp(1rem, 1.3vw, 1.3rem) !important;
	line-height: 1.48 !important;
}
.home .hero__media-prompt {
	position: absolute !important;
	top: clamp(6.5rem, 8.5vw, 8.6rem) !important;
	right: clamp(2rem, 7.2vw, 8.5rem) !important;
	z-index: 4 !important;
	max-width: 390px;
	margin: 0 !important;
	padding: .9rem 1.2rem !important;
	border: 1px solid rgba(255,255,255,.42) !important;
	background: rgba(255,255,255,.015) !important;
	color: rgba(255,255,255,.72) !important;
}
.home .hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.home .hero__media::after {
	background:
		radial-gradient(circle at 96% 43%, rgba(117,132,130,.28), transparent 42%),
		linear-gradient(90deg, rgba(16,16,16,.94) 0%, rgba(16,16,16,.86) 50%, rgba(34,42,41,.72) 100%) !important;
}

/* Initial moving gallery — cards touch each other. No beige gutters between media. */
.home .media-showcase {
	margin: 0 !important;
	padding: 0 0 clamp(4rem, 7vw, 6.5rem) !important;
	background: var(--abar-home-media-bg, var(--paper)) !important;
}
.home .media-showcase__track,
.home .media-showcase__group {
	gap: 0 !important;
}
.home .media-showcase__group {
	align-items: flex-start !important;
	padding-right: 0 !important;
}
.home .media-showcase__item {
	position: relative;
	margin: 0 !important;
}
.home .media-showcase__item > div {
	border: 0 !important;
	box-shadow: none !important;
}
.home .media-showcase__item figcaption {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	left: .75rem;
	z-index: 3;
	width: fit-content;
	max-width: calc(100% - 1.5rem);
	margin: 0;
	padding: .45rem .6rem;
	background: rgba(247,246,243,.9);
}

/* ABAR page: the three campaign/branding/making-of media bands are true full width.
   Each one can now be hidden from the page edit screen. */
.about-page .about-collage.section-shell {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.about-page .about-collage .abar-page-media > div {
	min-height: clamp(300px, 28vw, 520px) !important;
}

/* Service landings: media can be removed, remaining blocks reflow without empty holes. */
.service-landing__collage {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}
.service-landing__collage .abar-page-media { min-width: 0; }
.abar-page-media > div { border: 0 !important; }

/* Decorative rules clean-up: section changes are made with spacing, colour and media,
   not long wireframe lines. Functional form/FAQ/menu/list separators remain untouched. */
.statement,
.page-hero,
.about-manifesto,
.brands-definition,
.custom-proposal,
.ugc-callout,
.service-landing__focus,
.service-landing__cta,
.values,
.home-visual-break,
.service-landing__visual-break {
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-block: 0 !important;
}
.method-grid,
.values-grid,
.principles-grid,
.need-grid {
	border: 0 !important;
	background: transparent !important;
	gap: clamp(.7rem, 1.2vw, 1rem) !important;
}
.method-grid > *,
.values-grid > *,
.principles-grid > *,
.need-grid > * {
	border: 0 !important;
}

/* Mobile cards: keep the icon, number and copy together; never leave an orphan "01". */
@media (max-width: 700px) {
	.home .service-box-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: .9rem !important;
	}
	.home .service-box {
		display: flex !important;
		min-height: 0 !important;
		padding: 1.25rem !important;
	}
	.home .service-box__head {
		align-items: center !important;
		margin-bottom: 1.3rem !important;
	}
	.home .service-box__icon {
		flex: 0 0 42px;
		width: 42px !important;
		height: 42px !important;
	}
	.home .service-box__head > span:not(.service-box__icon) {
		width: auto !important;
		height: auto !important;
		margin-left: auto !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: var(--font-sans) !important;
		font-size: .62rem !important;
		font-style: normal !important;
	}
	.home .service-box h3 {
		font-size: clamp(2rem, 10vw, 3rem) !important;
	}
}

/* MOBILE NAV — clean full-screen panel; submenu is closed until + is tapped. */
@media (max-width: 820px) {
	.site-header { z-index: 9998 !important; }
	.site-header__inner { min-height: 72px !important; }
	.primary-nav {
		position: fixed !important;
		top: 72px !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 9997 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		width: 100% !important;
		max-width: none !important;
		padding: 1rem 1.25rem 2rem !important;
		transform: translateY(-8px);
		background: #fff !important;
		color: var(--ink) !important;
		overflow-y: auto !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	}
	.menu-is-open .primary-nav {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.primary-nav .menu {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.primary-nav .menu > li {
		width: 100% !important;
		margin: 0 !important;
		border-bottom: 1px solid #e4e2dc !important;
	}
	.primary-nav .menu > li.menu-item-has-children {
		display: grid !important;
		grid-template-columns: minmax(0,1fr) 50px !important;
		align-items: center !important;
	}
	.primary-nav .menu > li > a {
		display: block !important;
		padding: .9rem 0 !important;
		color: var(--ink) !important;
		font-size: clamp(1.45rem, 7vw, 2.25rem) !important;
		font-weight: 600 !important;
		line-height: 1.05 !important;
		letter-spacing: -.035em !important;
	}
	.primary-nav .menu > li > a::after { display: none !important; }
	.submenu-toggle {
		display: grid !important;
		place-items: center !important;
		width: 50px !important;
		height: 50px !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: var(--ink) !important;
		font-size: 1.6rem !important;
		cursor: pointer;
	}
	.submenu-toggle span { transition: transform .18s ease; }
	.submenu-is-open > .submenu-toggle span { transform: rotate(45deg); }
	.primary-nav .sub-menu {
		position: static !important;
		grid-column: 1 / -1 !important;
		display: none !important;
		grid-template-columns: 1fr !important;
		gap: 1px !important;
		width: 100% !important;
		max-height: none !important;
		margin: 0 0 .85rem !important;
		padding: 1px !important;
		transform: none !important;
		background: #292929 !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
	.primary-nav .submenu-is-open > .sub-menu { display: grid !important; }
	.primary-nav .sub-menu li { border: 0 !important; }
	.primary-nav .sub-menu a {
		display: flex !important;
		min-height: 48px !important;
		padding: .75rem .85rem !important;
		border: 0 !important;
		background: #111 !important;
		color: #fff !important;
		font-size: .82rem !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		letter-spacing: 0 !important;
	}
	.primary-nav .sub-menu a:hover,
	.primary-nav .sub-menu a:focus { background: var(--orange) !important; color: var(--ink) !important; }
	.nav-utility { width: 100% !important; margin-top: 1rem !important; }
	.header-cta { width: 100% !important; min-height: 54px !important; padding: 1rem !important; }
}

/* Responsive hero: maintain the same composition without overflow. */
@media (max-width: 900px) {
	.home .hero.section-shell {
		min-height: auto !important;
		padding: 2.4rem 1.5rem 3rem !important;
	}
	.home .hero__content {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
		padding-top: 4rem !important;
	}
	.home .hero h1 { max-width: 820px !important; font-size: clamp(4rem, 11vw, 6.5rem) !important; }
	.home .hero__intro { max-width: 620px !important; }
	.home .hero__media-prompt {
		top: 2.2rem !important;
		right: 1.5rem !important;
	}
}
@media (max-width: 600px) {
	.home .hero.section-shell { padding: 1.65rem 1rem 2.2rem !important; }
	.home .hero__meta .eyebrow { max-width: 72%; font-size: .62rem; }
	.home .hero__content { gap: 1.4rem !important; padding-top: 3rem !important; }
	.home .hero h1 { font-size: clamp(3.25rem, 15.5vw, 4.9rem) !important; line-height: .86 !important; }
	.home .hero h1 em { font-size: .76em !important; }
	.home .hero__intro > p { font-size: .98rem !important; }
	.home .hero__media-prompt {
		position: static !important;
		display: inline-block !important;
		width: fit-content;
		margin-top: 1rem !important;
		font-size: .56rem !important;
	}
	.home .media-showcase__item { width: min(76vw, 310px) !important; }
	.about-page .about-collage .abar-page-media > div { min-height: 58vw !important; }
}

/* ==========================================================
   ABAR 2.3.1 · Editorial cohesion pass
   - tighter transition from opening gallery to point of view
   - refined Brands challenges section
   ========================================================== */

/* Home: the moving gallery should hand off directly to the statement.
   Avoid a large empty paper band between both sections. */
.home .media-showcase {
	padding-bottom: clamp(.5rem, 1.2vw, 1rem) !important;
}
.home .statement.section-space {
	padding-top: clamp(2.2rem, 4vw, 4rem) !important;
}
.home .statement .eyebrow {
	margin-bottom: clamp(1.4rem, 2.4vw, 2.2rem) !important;
}

/* Brands · “Distintos retos”: editorial cards instead of a rigid wireframe grid. */
.brands-needs--editorial {
	position: relative;
	padding-block: clamp(4.5rem, 7vw, 7rem) !important;
	background: color-mix(in srgb, var(--page-secondary, var(--blue)) 8%, var(--paper)) !important;
	overflow: hidden;
}
.brands-needs--editorial::before {
	content: "";
	position: absolute;
	width: clamp(260px, 31vw, 520px);
	aspect-ratio: 1;
	right: -12%;
	top: -35%;
	border-radius: 50%;
	background: color-mix(in srgb, var(--page-accent, var(--orange)) 10%, transparent);
	filter: blur(2px);
	pointer-events: none;
}
.brands-needs--editorial .brands-needs__head {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr) !important;
	align-items: end;
	gap: clamp(2rem, 5vw, 6rem) !important;
	margin-bottom: clamp(2.2rem, 4vw, 3.8rem) !important;
}
.brands-needs--editorial .brands-needs__head h2 {
	max-width: 920px;
	margin: 0;
	font-size: clamp(3rem, 5.7vw, 6.4rem) !important;
	line-height: .91 !important;
	letter-spacing: -.055em;
}
.brands-needs--editorial .brands-needs__grid {
	position: relative;
	z-index: 1;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0,1fr)) !important;
	align-items: stretch;
	gap: clamp(.8rem, 1.4vw, 1.25rem) !important;
	background: transparent !important;
}
.brands-needs--editorial .brands-needs__grid article {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(225px, 20vw, 310px) !important;
	padding: clamp(1.3rem, 2vw, 1.8rem) !important;
	border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent) !important;
	background: rgba(255,255,255,.72) !important;
	box-shadow: 0 18px 55px rgba(17,17,17,.055);
	backdrop-filter: blur(2px);
	transition: transform .2s ease, box-shadow .2s ease;
}
.brands-needs--editorial .brands-needs__grid article:nth-child(2) {
	background: color-mix(in srgb, var(--blue) 13%, #fff) !important;
	transform: translateY(clamp(12px, 1.6vw, 24px));
}
.brands-needs--editorial .brands-needs__grid article:nth-child(3) {
	background: color-mix(in srgb, var(--green) 14%, #fff) !important;
}
.brands-needs--editorial .brands-needs__grid article:nth-child(4) {
	background: color-mix(in srgb, var(--pink) 14%, #fff) !important;
	transform: translateY(clamp(12px, 1.6vw, 24px));
}
.brands-needs--editorial .brands-needs__grid article:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 60px rgba(17,17,17,.08);
}
.brands-needs--editorial .brands-needs__grid article:nth-child(2):hover,
.brands-needs--editorial .brands-needs__grid article:nth-child(4):hover {
	transform: translateY(7px);
}
.brands-needs--editorial .brands-needs__grid span {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: .62rem !important;
	font-weight: 700;
	letter-spacing: .04em;
}
.brands-needs--editorial .brands-needs__grid h3 {
	margin: auto 0 .7rem !important;
	padding-top: clamp(2.5rem, 5vw, 5rem);
	font-size: clamp(1.55rem, 2.25vw, 2.25rem) !important;
	line-height: 1.02;
	letter-spacing: -.035em;
}
.brands-needs--editorial .brands-needs__grid p {
	max-width: 30ch;
	margin: 0;
	font-size: clamp(.92rem, 1.05vw, 1.05rem);
	line-height: 1.48;
	color: color-mix(in srgb, var(--ink) 78%, transparent);
}

@media (max-width: 980px) {
	.brands-needs--editorial .brands-needs__grid {
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	}
	.brands-needs--editorial .brands-needs__grid article:nth-child(n) {
		transform: none;
	}
}
@media (max-width: 700px) {
	.home .media-showcase { padding-bottom: 0 !important; }
	.home .statement.section-space { padding-top: 2rem !important; }
	.brands-needs--editorial { padding-block: 3.4rem !important; }
	.brands-needs--editorial .brands-needs__head {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		margin-bottom: 1.8rem !important;
	}
	.brands-needs--editorial .brands-needs__grid {
		grid-template-columns: 1fr !important;
		gap: .75rem !important;
	}
	.brands-needs--editorial .brands-needs__grid article {
		min-height: 190px !important;
	}
}

/* ==========================================================
   ABAR 2.4.0 · SEO/CRO polish
   ========================================================== */

/* Remove the decorative half-circle that read as an accidental artefact. */
.brands-needs--editorial::before {
	display: none !important;
	content: none !important;
}

/* Real brand logos: keep the marquee clean and legible. */
.brand-marquee-preview__item a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.brand-marquee-preview__item img {
	max-width: min(180px, 72%);
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ==========================================================
   ABAR 2.4.1 · rhythm, media and form journeys
   ========================================================== */

:root {
	--abar-section-gap: clamp(3.4rem, 5.4vw, 5.7rem);
	--space: var(--abar-section-gap);
}

/* One consistent editorial rhythm across the site. */
.section-space {
	padding-block: var(--abar-section-gap) !important;
}
.services-preview,
.projects-showcase,
.reviews,
.faq,
.blog-teaser,
.creator-flow,
.creator-principles,
.brands-needs,
.brands-process,
.brands-form-zone,
.form-section,
.about-manifesto,
.values,
.home-contact {
	padding-top: var(--abar-section-gap) !important;
	padding-bottom: var(--abar-section-gap) !important;
}
.page-hero,
.brands-hero,
.creators-hero,
.faq-page__hero {
	padding-top: clamp(3.6rem, 5.5vw, 5.8rem) !important;
	padding-bottom: clamp(2.8rem, 4.5vw, 4.8rem) !important;
}
.section-heading { margin-bottom: clamp(2rem, 3.4vw, 3.25rem) !important; }
.creator-flow .process-list { margin-top: clamp(2rem, 3.3vw, 3.2rem) !important; }
.faq-page__library { padding-bottom: var(--abar-section-gap) !important; }
.faq-page__cta { margin-bottom: var(--abar-section-gap) !important; }
.brands-collage { padding-bottom: var(--abar-section-gap) !important; }
.brands-needs--editorial { padding-block: var(--abar-section-gap) !important; }

/* Home brand marquee: never reserve an empty band when there are no logos,
   and when it exists it connects directly to Brands / Creators. */
.home .brand-marquee-preview {
	margin: 0 !important;
	padding: 1.35rem 0 !important;
	background: var(--white) !important;
}
.home .brand-marquee-preview > .eyebrow { margin-bottom: .85rem !important; }
.home .brand-marquee-preview + .ugc-bridge { padding-top: 0 !important; }
.home .projects-showcase + .ugc-bridge { padding-top: 0 !important; }
.home .ugc-bridge { padding-bottom: var(--abar-section-gap) !important; }

/* ABAR manifesto: optional image OR video on the left. When hidden, copy reflows
   and no empty black hole remains. */
.about-manifesto__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 6rem);
	align-items: stretch;
}
.about-manifesto__grid--media {
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr);
}
.about-manifesto__copy {
	align-self: center;
	max-width: 690px;
}
.about-manifesto__grid:not(.about-manifesto__grid--media) .about-manifesto__copy {
	margin-left: auto;
}
.about-manifesto__media,
.about-manifesto__media > div {
	width: 100%;
	height: 100%;
	margin: 0;
}
.about-manifesto__media > div {
	min-height: clamp(420px, 44vw, 640px);
	background: #232827;
}
.about-manifesto__media img,
.about-manifesto__media video {
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
}

/* The three ABAR visual bands now live after Método ABAR and remain full bleed. */
.about-page .about-collage {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.about-page .about-collage .abar-page-media,
.about-page .about-collage .abar-page-media > div {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
}
.about-page .about-collage .abar-page-media > div {
	min-height: clamp(300px, 27vw, 500px) !important;
}

/* Creator values: no decorative line above “Lo que valoramos”. */
.creator-principles .principles-grid {
	border-top: 0 !important;
}

/* Contact choice panel: one continuous background, no black slab with beige sides. */
.contact-routes.section-shell {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 var(--gutter) var(--abar-section-gap) !important;
	gap: clamp(.75rem, 1.4vw, 1rem) !important;
	border: 0 !important;
	background: var(--white) !important;
}
.contact-routes a {
	min-height: clamp(260px, 25vw, 330px) !important;
	border: 1px solid var(--line) !important;
	background: var(--white) !important;
}
.contact-routes h2 { margin-top: clamp(4rem, 7vw, 6rem) !important; }

/* Media slots accept both image and video and should behave identically. */
.abar-page-media img,
.abar-page-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Thanks page is brief and readable for every form journey. */
.thank-you {
	min-height: 58svh !important;
	padding-block: var(--abar-section-gap) !important;
}
.thank-you h1 {
	max-width: 950px;
	font-size: clamp(3.3rem, 6.8vw, 7rem) !important;
}
.thank-you .lead {
	max-width: 780px;
	font-size: clamp(1.1rem, 1.7vw, 1.45rem);
}

@media (max-width: 900px) {
	:root { --abar-section-gap: clamp(3rem, 8vw, 4.4rem); }
	.about-manifesto__grid--media { grid-template-columns: 1fr; }
	.about-manifesto__copy,
	.about-manifesto__grid:not(.about-manifesto__grid--media) .about-manifesto__copy { margin-left: 0; }
	.about-manifesto__media > div { min-height: min(70vw, 520px); }
}

@media (max-width: 700px) {
	:root { --abar-section-gap: 3rem; }
	.section-heading { margin-bottom: 1.8rem !important; }
	.contact-routes.section-shell {
		grid-template-columns: 1fr !important;
		padding-inline: 1rem !important;
	}
	.contact-routes a { min-height: 240px !important; }
	.about-page .about-collage .abar-page-media > div { min-height: 58vw !important; }
}

/* =========================================================
   ABAR 2.4.3 · targeted visual corrections only
   ========================================================= */

/* Home: keep the three blog cards in one row on desktop/laptop widths. */
@media (min-width: 901px) {
	.home .blog-preview-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.home .blog-preview-grid article:nth-child(3) {
		grid-column: auto !important;
	}

	/* Home projects: the third card must stay beside the first two. */
	.home .project-editorial {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.home .project-editorial__card:nth-child(3) {
		grid-column: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
	}

	/* Creators: compact four-column values block, as in the earlier layout. */
	.creators-page .creator-principles .principles-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
	.creators-page .creator-principles .principles-grid article {
		min-height: 230px !important;
		padding: 1.35rem !important;
		border-bottom: 0 !important;
	}
	.creators-page .creator-principles .principles-grid article:first-child {
		padding-left: 1.35rem !important;
	}
	.creators-page .creator-principles .principles-grid article:nth-child(2),
	.creators-page .creator-principles .principles-grid article:nth-child(3) {
		padding-left: 1.35rem !important;
	}
	.creators-page .creator-principles .principles-grid span {
		margin-bottom: 2rem !important;
	}
	.creators-page .creator-principles .principles-grid h2 {
		font-size: clamp(1.45rem, 1.8vw, 2rem) !important;
	}
}

/* Brand application: preserve the coral territory, but make it lighter and keep the form white. */
.brands-page .brands-form-zone {
	background: color-mix(in srgb, var(--page-accent, var(--orange)) 9%, var(--white)) !important;
}
.brands-page .brands-form-zone .abar-form {
	padding: clamp(1.5rem, 3vw, 2.5rem) !important;
	border: 1px solid var(--ink) !important;
	background: var(--white) !important;
}

/* Creator application: retain the blue section and force the actual form panel to white. */
.creators-page .form-section--blue .abar-form {
	padding: clamp(1.5rem, 3vw, 2.5rem) !important;
	border: 1px solid var(--ink) !important;
	background: var(--white) !important;
}


/* =========================================================
   ABAR 2.4.3 · mobile navigation QA + final code hygiene
   ========================================================= */

/* FAQ closing CTA: separate it from the green/blue section above with the
   approved pastel yellow rather than repeating the same colour family. */
.faq-page__cta.section-shell {
	background: var(--yellow) !important;
	color: var(--ink) !important;
}

/* Mobile navigation: a true viewport panel. Removing backdrop-filter on the
   sticky parent avoids browsers treating the fixed drawer as a contained box. */
@media (max-width: 820px) {
	.site-header {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		overflow: visible !important;
	}
	.primary-nav {
		top: 72px !important;
		height: calc(100dvh - 72px) !important;
		max-height: calc(100dvh - 72px) !important;
		padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.menu-is-open .primary-nav {
		scroll-behavior: auto !important;
	}
}


/* =========================================================
   ABAR 2.5.0 · SEO/CRO consolidation + responsive media QA
   ========================================================= */

/* Brand brief: clear conversion break from the coral process cards. */
.brands-page .brands-form-zone {
	background: var(--abar-brands-form-bg, #fcf7e5) !important;
}
.brands-page .brands-form-zone .abar-form {
	background: var(--white) !important;
}

/* The secondary UGC CTA remains useful, but no longer competes with the
   Marcas/Creadores split as another oversized hero. */
.home .ugc-callout--compact {
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-block: clamp(2rem, 4vw, 3.5rem) !important;
	padding: clamp(1.35rem, 2.8vw, 2.2rem) !important;
}
.home .ugc-callout--compact .eyebrow {
	margin-bottom: .55rem;
}
.home .ugc-callout--compact h2 {
	max-width: 760px;
	font-size: clamp(2rem, 3.8vw, 3.7rem) !important;
	line-height: .94;
}

/* Moving content can always be paused by pointer or keyboard focus. */
.brand-marquee-preview:focus-within .brand-marquee-preview__track,
.proof-strip:focus-within .proof-strip__track {
	animation-play-state: paused !important;
}

/* Mobile media should read as intentional cards, not tall cropped slabs.
   Full-bleed editorial bands (Home/ABAR) are intentionally excluded. */
@media (max-width: 700px) {
	.service-landing__hero-media > div,
	.service-landing__collage .abar-page-media > div,
	.brands-hero__media > div,
	.brands-collage .abar-page-media > div,
	.creators-hero__media > div,
	.creators-collage .abar-page-media > div {
		width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}
	.service-landing__hero-media img,
	.service-landing__hero-media video,
	.service-landing__collage .abar-page-media img,
	.service-landing__collage .abar-page-media video,
	.brands-hero__media img,
	.brands-hero__media video,
	.brands-collage .abar-page-media img,
	.brands-collage .abar-page-media video,
	.creators-hero__media img,
	.creators-hero__media video,
	.creators-collage .abar-page-media img,
	.creators-collage .abar-page-media video {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}
	.abar-page-media--placeholder span {
		max-width: 76%;
		font-size: .62rem;
		line-height: 1.25;
	}

	/* Keep the approved continuous marquees moving on touch screens too.
	   prefers-reduced-motion still disables them below. */
	.home .media-showcase,
	.brand-marquee-preview__viewport,
	.proof-strip__viewport {
		overflow: hidden !important;
	}
	.home .ugc-callout--compact {
		grid-template-columns: 1fr !important;
		align-items: start;
	}
}


/* =========================================================
   ABAR 2.5.1 · palette consistency only
   - One canonical orange (#FF6437).
   - Brands form-zone pastel is independently editable and defaults to the
     same visual pastel used by the diagnostic page (#FCF7E5).
   No layout or responsive rules changed in this release.
   ========================================================= */


/* =========================================================
   ABAR 2.5.2 · requested visual micro-adjustments only
   ========================================================= */

/* Creator flow: pastel section with four clean white cards. */
.creators-page .creator-flow {
    background: #FCF7E5 !important;
}
.creators-page .creator-flow .process-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}
.creators-page .creator-flow .process-list li {
    min-height: 250px !important;
    padding: clamp(1.4rem, 2.2vw, 2rem) !important;
    background: var(--white) !important;
    border: 0 !important;
}
.creators-page .creator-flow .process-list li:nth-child(3n + 1) {
    padding-left: clamp(1.4rem, 2.2vw, 2rem) !important;
}

/* Home UGC CTA: keep the green panel perfectly centered in its shell. */
.home .ugc-callout--compact {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Brands / creators split: matching vertical rhythm and aligned micro-labels. */
.home .ugc-bridge {
    align-items: stretch !important;
}
.home .ugc-panel {
    height: 100% !important;
}
.home .ugc-panel__index {
    margin: clamp(2.6rem, 4vw, 4rem) 0 1.5rem !important;
}

@media (max-width: 900px) {
    .creators-page .creator-flow .process-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .creators-page .creator-flow .process-list {
        grid-template-columns: 1fr !important;
    }
    .creators-page .creator-flow .process-list li {
        min-height: 0 !important;
    }
}

/* =========================================================
   ABAR 2.5.3 · forms + anchors + mobile QA only
   - No visual redesign.
   - Stable section anchors for direct links.
   - Continuous moving strips on mobile (unless reduced motion is requested).
   - Mobile cards keep all text inside their grid.
   ========================================================= */

#inicio,
#galeria,
#enfoque,
#servicios,
#visual,
#metodo,
#datos,
#diagnostico,
#proyectos,
#marcas,
#marcas-creadores,
#campanas-ugc,
#conectamos,
#resenas,
#faq,
#blog,
#contacto,
#formulario {
	scroll-margin-top: 92px;
}

.form-required { font: inherit; color: currentColor; }

@media (max-width: 700px) {
	/* All grid/flex children may shrink instead of forcing horizontal overflow. */
	.home .service-box-grid > *,
	.home .method-grid > *,
	.page-template-page-servicios .service-detail-list > *,
	.service-landing__collage > *,
	.process-list > *,
	.values-grid > *,
	.principles-grid > *,
	.need-grid > * {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Keep long headings fully readable inside the card/column. */
	.home .service-box h3,
	.page-template-page-servicios .service-detail__body h2,
	.service-landing h1,
	.service-landing h2,
	.service-landing h3,
	.home .method-grid h3,
	.process-list h3,
	.values-grid h3,
	.principles-grid h2,
	.need-grid h3 {
		max-width: 100% !important;
		overflow: visible !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
		hyphens: none !important;
	}

	.home .service-box h3 {
		font-size: clamp(1.95rem, 9vw, 2.75rem) !important;
		line-height: .98 !important;
	}
	.page-template-page-servicios .service-detail__body h2 {
		font-size: clamp(1.7rem, 8vw, 2.25rem) !important;
		line-height: 1 !important;
	}

	/* Method: one clean, self-contained card per step on phones. */
	.home .method-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: .8rem !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.home .method-grid li,
	.home .method-grid li:not(:first-child),
	.home .method-grid li:nth-child(2),
	.home .method-grid li:nth-child(3) {
		display: block !important;
		width: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 1.25rem !important;
		background: rgba(255,255,255,.72) !important;
		border: 0 !important;
	}
	.home .method-grid span {
		display: block !important;
		margin: 0 0 1.35rem !important;
		padding: 0 !important;
		font-size: .68rem !important;
	}
	.home .method-grid h3 {
		margin: 0 0 .7rem !important;
		font-size: clamp(1.7rem, 8vw, 2.25rem) !important;
		line-height: 1 !important;
	}
	.home .method-grid p {
		margin: 0 !important;
		font-size: 1rem !important;
		line-height: 1.45 !important;
	}

}

@media (max-width: 480px) {
	.home .service-box { padding: 1.1rem !important; }
	.home .service-box h3 { font-size: clamp(1.85rem, 9.2vw, 2.45rem) !important; }
	.page-template-page-servicios .service-detail-list .service-detail { padding: 1.1rem !important; }
	.page-template-page-servicios .service-detail__body h2 { font-size: clamp(1.6rem, 8.3vw, 2rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.home .media-showcase__track,
	.brand-marquee-preview__track,
	.proof-strip__track {
		animation: none !important;
		transform: none !important;
	}
}

/* Page-level direct-link anchors (no visual effect). */
#servicios-listado,
#propuesta,
#que-hacemos,
#retos,
#proceso,
#criterios,
#como-funciona,
#manifiesto,
#valores,
#preguntas,
#rutas,
#que-trabajamos {
	scroll-margin-top: 92px;
}

/* =========================================================
   ABAR 2.5.4 · ajustes solicitados
   - Galería interactiva SOLO en Marcas y Creadores.
   - Marquesina de marcas reutilizada en ambas landings.
   - Animaciones de entrada sutiles sin alterar el layout.
   - Portada Home: imagen/vídeo completo, sin recorte.
   ========================================================= */

/* Home hero media: show the whole uploaded image/video instead of cropping it. */
.home .hero__media {
	background: var(--abar-home-hero-bg, #111111);
}
.home .hero__media img,
.home .hero__media video {
	object-fit: contain !important;
	object-position: center center !important;
}

/* Interactive visual strip used only by the Brands and Creators page templates. */
.abar-interactive-gallery__panel {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: 22px;
	outline: none;
}
.abar-interactive-gallery__panel .abar-page-media,
.abar-interactive-gallery__panel .abar-page-media > div {
	width: 100%;
	height: 100%;
}
.abar-interactive-gallery__panel .abar-page-media > div {
	border-radius: inherit;
}
.abar-interactive-gallery__label {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 3;
	max-width: calc(100% - 28px);
	padding: .58rem .8rem;
	border-radius: 999px;
	background: rgba(247, 246, 243, .94);
	color: var(--ink);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.15;
	text-transform: uppercase;
	pointer-events: none;
	transition: transform 360ms ease, background-color 360ms ease;
}
.abar-interactive-gallery__panel:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
	.brands-collage.abar-interactive-gallery,
	.creators-collage.abar-interactive-gallery {
		display: flex !important;
		align-items: stretch;
		gap: .55rem !important;
	}
	.abar-interactive-gallery__panel {
		flex: 1 1 0;
		transition: flex-grow 680ms cubic-bezier(.2,.7,.2,1), transform 420ms ease;
	}
	.brands-collage .abar-interactive-gallery__panel--wide { flex-grow: 1.35; }
	.creators-collage .abar-interactive-gallery__panel--wide { flex-grow: 1.25; }
	.abar-interactive-gallery__panel .abar-page-media > div {
		min-height: clamp(410px, 43vw, 540px) !important;
	}
	.abar-interactive-gallery:hover .abar-interactive-gallery__panel,
	.abar-interactive-gallery:focus-within .abar-interactive-gallery__panel {
		flex-grow: .78;
	}
	.abar-interactive-gallery .abar-interactive-gallery__panel:hover,
	.abar-interactive-gallery .abar-interactive-gallery__panel:focus {
		flex-grow: 2.15;
	}
	.abar-interactive-gallery__panel:hover .abar-page-media img,
	.abar-interactive-gallery__panel:hover .abar-page-media video,
	.abar-interactive-gallery__panel:focus .abar-page-media img,
	.abar-interactive-gallery__panel:focus .abar-page-media video {
		transform: scale(1.018);
	}
	.abar-interactive-gallery__panel .abar-page-media img,
	.abar-interactive-gallery__panel .abar-page-media video {
		transition: transform 680ms cubic-bezier(.2,.7,.2,1);
	}
	.abar-interactive-gallery__panel:hover .abar-interactive-gallery__label,
	.abar-interactive-gallery__panel:focus .abar-interactive-gallery__label {
		transform: translateY(-2px);
		background: rgba(255, 255, 255, .97);
	}
}

/* On touch screens the same block becomes a natural swipe carousel. */
@media (max-width: 820px) {
	.brands-collage.abar-interactive-gallery,
	.creators-collage.abar-interactive-gallery {
		display: flex !important;
		grid-template-columns: none !important;
		gap: .75rem !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.brands-collage.abar-interactive-gallery::-webkit-scrollbar,
	.creators-collage.abar-interactive-gallery::-webkit-scrollbar { display: none; }
	.abar-interactive-gallery__panel {
		flex: 0 0 min(82vw, 520px);
		scroll-snap-align: start;
		border-radius: 18px;
	}
	.abar-interactive-gallery__panel .abar-page-media > div {
		min-height: 0 !important;
		aspect-ratio: 4 / 5 !important;
	}
}

/* Landing marquee keeps the existing ABAR marquee component and data source. */
.abar-landing-brand-marquee {
	margin-inline: 0;
}

/* Subtle site-wide entrance animation. JS only adds the class when supported,
   so the site remains fully visible if JavaScript is disabled. */
.abar-reveal {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 620ms ease, transform 720ms cubic-bezier(.2,.7,.2,1);
	will-change: opacity, transform;
}
.abar-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.abar-reveal,
	.abar-reveal.is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.abar-interactive-gallery__panel,
	.abar-interactive-gallery__panel .abar-page-media img,
	.abar-interactive-gallery__panel .abar-page-media video,
	.abar-interactive-gallery__label {
		transition: none !important;
	}
}

/* Hero/cover media on editable landing pages: keep the complete asset visible. */
.brands-hero__media img,
.brands-hero__media video,
.creators-hero__media img,
.creators-hero__media video,
.service-landing__hero-media img,
.service-landing__hero-media video {
	object-fit: contain !important;
	object-position: center center !important;
}

/* =========================================================
   Surgical QA fixes · 2026-08-30
   Only: editorial italic consistency, mobile menu close access,
   and mobile Method heading/copy containment.
   ========================================================= */

/* Marcas / Creadores: use the same editorial italic as the approved Home hero. */
.brands-hero h1 em,
.brands-needs__head h2 em,
.creators-hero h1 em {
	font-family: Georgia, "Times New Roman", serif !important;
	font-style: italic !important;
	font-weight: 400 !important;
}

@media (max-width: 820px) {
	/* Keep the mobile header and its close control permanently reachable while
	   the menu panel is open, even when the page was opened from a scrolled state. */
	body.menu-is-open {
		overflow: hidden !important;
	}
	body.menu-is-open .site-header {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 10000 !important;
		width: 100% !important;
		background: #fff !important;
	}
	body.menu-is-open .site-header__inner {
		position: relative;
		z-index: 10001;
	}
	body.menu-is-open .menu-toggle {
		position: relative;
		z-index: 10002;
	}
	body.menu-is-open .primary-nav {
		top: 72px !important;
		z-index: 9999 !important;
		height: calc(100dvh - 72px) !important;
		max-height: calc(100dvh - 72px) !important;
	}
}

@media (max-width: 700px) {
	/* Home · Método: force both columns to stay inside the phone viewport. */
	.home .method .section-heading--split {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.4rem !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.home .method .section-heading--split > * {
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.home .method .section-heading h2 {
		width: 100% !important;
		max-width: 100% !important;
		font-size: clamp(2.65rem, 13.5vw, 3.6rem) !important;
		line-height: .94 !important;
		letter-spacing: -.045em !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
	}
	.home .method .section-heading--split > p {
		width: 100% !important;
		max-width: 100% !important;
		justify-self: stretch !important;
		margin-right: 0 !important;
		padding-right: 0 !important;
		overflow-wrap: break-word !important;
	}
}

/* =========================================================
   ABAR 2.5.7 · Home hero media full-width fix
   Keep the uploaded image/video complete while ensuring the media layer
   actually spans the entire hero. Previous full-bleed margins were still
   shifting this absolutely positioned layer half a viewport to the left.
   ========================================================= */
.home .hero__media {
	inset: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}
.home .hero__media img,
.home .hero__media video {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}


/* =========================================================
   ABAR 2.5.8 · Hero media ratio fix
   Only the Home hero media is affected.
   - Images: preserve the complete photo while a softened copy fills any
     spare area, so there are no black letterbox bands on desktop and the
     image does not become an extreme crop on phones.
   - Videos: fill the hero cleanly (cover), because a single moving layer
     cannot be both fully contained and full-bleed at arbitrary ratios.
   ========================================================= */
.home .hero__media {
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background: var(--abar-home-hero-bg, var(--ink));
	overflow: hidden;
}
.home .hero__media--image::before {
	position: absolute;
	inset: -3%;
	z-index: 0;
	background-image: var(--abar-hero-image);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	filter: blur(16px);
	transform: scale(1.05);
	opacity: .92;
	content: "";
}
.home .hero__media--image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}
.home .hero__media--video video {
	position: relative;
	z-index: 1;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}
.home .hero__media::after {
	z-index: 2;
}

@media (max-width: 700px) {
	.home .hero__media--image::before {
		inset: -7%;
		filter: blur(20px);
		transform: scale(1.09);
		opacity: .96;
	}
	.home .hero__media--image img {
		object-fit: contain !important;
		object-position: center center !important;
	}
	.home .hero__media--video video {
		object-fit: cover !important;
		object-position: center center !important;
	}
}