/*
 * BLUG Shop — institutional pages (About, Commercial transparency). Self-contained so the
 * pages look the same in both site designs. Official colors: #035BC4, #FC650E, #1B56A2,
 * deep navy #0A2342. Titles in Archivo (condensed), text in Montserrat.
 */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 600 900;
	font-stretch: 62% 100%;
	font-display: swap;
	src: url("../fonts/archivo-latin-wdth-wght.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-wght.woff2") format("woff2");
}

.ab {
	--ab-blue: #035bc4;
	--ab-orange: #fc650e;
	--ab-ink: #0a2342;
	--ab-text: #0f1b2d;
	--ab-muted: #5b6678;
	--ab-line: #e3e8ef;
	--ab-soft: #f1f4f8;
	--ab-display: "Archivo", "Montserrat", system-ui, sans-serif;
	--ab-ease: cubic-bezier(.2, .7, .2, 1);

	background: #fff;
	color: var(--ab-text);
	font-family: var(--blug-font, "Montserrat", system-ui, sans-serif);
}

.ab-wrap {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
	box-sizing: border-box;
}

.ab-kicker {
	margin: 0 0 14px;
	color: var(--ab-orange);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ab-kicker--light {
	color: #ffb37f;
}

.ab-display {
	margin: 0;
	color: var(--ab-ink);
	font-family: var(--ab-display);
	font-size: clamp(2.8rem, 9vw, 6.4rem);
	font-stretch: 70%;
	font-weight: 850;
	line-height: .92;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.ab-display span {
	display: block;
	color: var(--ab-blue);
}

.ab-h2 {
	margin: 0 0 22px;
	color: var(--ab-ink);
	font-family: var(--ab-display);
	font-size: clamp(2.2rem, 5vw, 3.8rem);
	font-stretch: 72%;
	font-weight: 850;
	line-height: .95;
	text-transform: uppercase;
}

.ab-lead {
	max-width: 46ch;
	margin: 26px 0 0;
	color: var(--ab-ink);
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	font-weight: 600;
	line-height: 1.5;
}

.ab-text {
	max-width: 58ch;
	margin: 14px 0 0;
	color: #3b4757;
	font-size: 1.02rem;
	line-height: 1.75;
}

.ab-note {
	margin: 16px 0 0;
	padding: 10px 14px;
	background: var(--ab-soft);
	border-radius: 12px;
	color: var(--ab-ink);
	font-size: .9rem;
}

.ab-motto {
	margin: 30px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--ab-line);
	color: var(--ab-muted);
	font-size: .9rem;
	letter-spacing: .04em;
}

.ab-motto strong {
	color: var(--ab-ink);
	letter-spacing: .14em;
}

.ab-section {
	padding-block: clamp(64px, 9vw, 128px) 0;
}

.ab-section--last {
	padding-bottom: clamp(64px, 9vw, 120px);
}

.ab-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 32px;
}

/* Opening */
.ab-hero {
	padding-top: clamp(28px, 5vw, 64px);
}

.ab-hero__grid {
	display: grid;
	gap: 40px;
	align-items: center;
}

.ab-hero__art {
	position: relative;
	min-height: 360px;
}

.ab-collage {
	position: relative;
	height: 100%;
	min-height: 380px;
	overflow: hidden;
	background: var(--ab-ink);
	border-radius: 36px;
}

.ab-collage__disc {
	position: absolute;
	right: -18%;
	bottom: -26%;
	width: 70%;
	aspect-ratio: 1;
	background: var(--ab-orange);
	border-radius: 50%;
}

.ab-collage__tile {
	position: absolute;
	display: grid;
	place-items: center;
	background: #fff;
	border-radius: 26px;
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 60%);
	animation: ab-float 7s ease-in-out infinite;
}

.ab-collage__tile img {
	width: 78%;
	height: 78%;
	object-fit: contain;
}

.ab-collage__tile--1 { top: 8%; left: 7%; width: 38%; aspect-ratio: 1; }
.ab-collage__tile--2 { top: 12%; right: 8%; width: 30%; aspect-ratio: 1; animation-delay: -2s; }
.ab-collage__tile--3 { bottom: 9%; left: 14%; width: 30%; aspect-ratio: 1; animation-delay: -4s; }
.ab-collage__tile--4 { bottom: 14%; right: 12%; width: 34%; aspect-ratio: 1; animation-delay: -1s; }
.ab-collage__tile--5 { top: 41%; left: 41%; width: 22%; aspect-ratio: 1; border-radius: 50%; animation-delay: -3s; }

@keyframes ab-float {
	50% { transform: translateY(-10px); }
}

/* Who we are */
.ab-split {
	display: grid;
	gap: 40px;
	align-items: center;
}

.ab-split__media {
	min-height: 320px;
}

.ab-words {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: clamp(28px, 4vw, 48px);
	background: var(--ab-soft);
	border-radius: 32px;
}

.ab-words li {
	padding: 12px 20px;
	background: #fff;
	border-radius: 999px;
	color: var(--ab-ink);
	font-family: var(--ab-display);
	font-size: clamp(1.3rem, 2.4vw, 2rem);
	font-stretch: 75%;
	font-weight: 800;
	text-transform: uppercase;
}

.ab-words li:nth-child(3n + 2) {
	background: var(--ab-blue);
	color: #fff;
}

.ab-words li:nth-child(5n) {
	background: var(--ab-orange);
	color: var(--ab-ink);
}

/* How it works */
.ab-head {
	max-width: 760px;
	margin-bottom: 34px;
}

.ab-steps {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px 28px;
	background: var(--ab-soft);
	border-radius: 28px;
}

.ab-step__n {
	color: var(--ab-blue);
	font-family: var(--ab-display);
	font-size: 3.4rem;
	font-stretch: 70%;
	font-weight: 850;
	line-height: 1;
}

.ab-step h3 {
	margin: 0;
	color: var(--ab-ink);
	font-size: 1.35rem;
	font-weight: 800;
}

.ab-step p {
	margin: 0;
	color: #3b4757;
	line-height: 1.65;
}

.ab-step--accent {
	background: var(--ab-ink);
}

.ab-step--accent h3,
.ab-step--accent p {
	color: #fff;
}

.ab-step--accent .ab-step__n {
	color: var(--ab-orange);
}

.ab-footnote {
	margin: 20px 0 0;
	color: var(--ab-muted);
	font-size: .9rem;
}

/* Purpose band */
.ab-band {
	margin-top: clamp(64px, 9vw, 128px);
	padding-block: clamp(56px, 8vw, 110px);
	background: var(--ab-ink);
	color: #fff;
}

.ab-band__grid {
	display: grid;
	gap: 30px;
}

.ab-display--band {
	color: #fff;
	font-size: clamp(2.6rem, 7vw, 5.4rem);
}

.ab-display--band span {
	color: var(--ab-orange);
}

.ab-band__copy p {
	max-width: 54ch;
	margin: 0 0 14px;
	color: rgb(255 255 255 / 80%);
	font-size: 1.05rem;
	line-height: 1.75;
}

.ab-band__media {
	grid-column: 1 / -1;
	height: clamp(240px, 36vw, 460px);
}

.ab-strip {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ab-strip li {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: #fff;
	border-radius: 22px;
}

.ab-strip img {
	width: 74%;
	height: 74%;
	object-fit: contain;
}

/* Ecosystem */
.ab-eco {
	display: grid;
	gap: 36px;
	align-items: center;
}

.ab-eco__brand {
	display: grid;
	place-items: center;
	padding: clamp(32px, 6vw, 72px);
	background: var(--ab-soft);
	border-radius: 36px;
}

.ab-eco__brand img {
	width: min(70%, 280px);
	height: auto;
	border-radius: 22%;
	box-shadow: 0 40px 80px -40px rgb(3 91 196 / 60%);
}

.ab-company {
	display: grid;
	gap: 0;
	margin: 26px 0 0;
	border-top: 1px solid var(--ab-line);
}

.ab-company > div {
	display: grid;
	grid-template-columns: minmax(150px, .8fr) 1.2fr;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--ab-line);
	font-size: .95rem;
}

.ab-company dt {
	color: var(--ab-muted);
	font-weight: 600;
}

.ab-company dd {
	margin: 0;
	color: var(--ab-ink);
	font-weight: 700;
}

/* Transparency */
.ab-transp {
	display: grid;
	gap: 18px 48px;
	padding: clamp(28px, 5vw, 56px);
	border: 1px solid var(--ab-line);
	border-radius: 32px;
}

.ab-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--ab-blue);
	font-weight: 700;
	text-decoration: none;
}

.ab-link .icon {
	width: 18px;
	height: 18px;
	transition: transform .2s var(--ab-ease);
}

.ab-link:hover .icon {
	transform: translateX(4px);
}

/* Final call */
.ab-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px);
	background: var(--ab-blue);
	border-radius: 36px;
	color: #fff;
	text-align: center;
}

.ab-cta::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -120px;
	width: 320px;
	height: 320px;
	background: var(--ab-orange);
	border-radius: 50%;
	opacity: .9;
}

.ab-display--cta {
	position: relative;
	z-index: 1;
	max-width: 14ch;
	margin: 0 auto;
	color: #fff;
	font-size: clamp(2.6rem, 7vw, 5.2rem);
}

.ab-cta p {
	position: relative;
	z-index: 1;
	max-width: 46ch;
	margin: 20px auto 0;
	color: rgb(255 255 255 / 88%);
	font-size: 1.08rem;
	line-height: 1.6;
}

.ab-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	margin-top: 30px;
	padding: 0 30px;
	background: var(--ab-orange);
	border-radius: 999px;
	color: var(--ab-ink);
	font-weight: 800;
	text-decoration: none;
	transition: transform .2s var(--ab-ease), box-shadow .2s var(--ab-ease);
}

.ab-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -14px rgb(0 0 0 / 50%);
	color: var(--ab-ink);
}

.ab-btn .icon {
	width: 18px;
	height: 18px;
}

/* Legal / transparency text page */
.ab-legal-hero {
	padding-block: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 40px);
	background: var(--ab-soft);
}

.ab-display--legal {
	font-size: clamp(2.6rem, 7vw, 5rem);
}

.ab-updated {
	margin: 18px 0 0;
	color: var(--ab-muted);
	font-size: .85rem;
}

.ab-legal {
	display: grid;
	gap: 32px;
}

.ab-legal__body {
	max-width: 70ch;
	color: #3b4757;
	font-size: 1.04rem;
	line-height: 1.8;
}

.ab-legal__body h2 {
	margin: 2em 0 .5em;
	color: var(--ab-ink);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.ab-legal__body h2:first-child {
	margin-top: 0;
}

.ab-legal__body p {
	margin: 0 0 1em;
}

.ab-legal__body ul {
	margin: 0 0 1em;
	padding-left: 1.2em;
	list-style: disc;
}

.ab-legal__company {
	align-self: start;
	padding: 24px;
	background: var(--ab-soft);
	border-radius: 24px;
	font-size: .92rem;
	line-height: 1.6;
}

.ab-legal__company p {
	margin: 0;
}

/* Reveal on scroll */
.ab [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s var(--ab-ease), transform .8s var(--ab-ease);
}

.ab [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

.ab:not(.ab--js) [data-reveal] {
	opacity: 1;
	transform: none;
}

@media (min-width: 768px) {
	.ab-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ab-band__grid {
		grid-template-columns: 1.1fr 1fr;
		align-items: end;
	}

	.ab-strip {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ab-transp {
		grid-template-columns: .9fr 1.1fr;
	}

	.ab-legal {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

@media (min-width: 960px) {
	.ab-hero__grid {
		grid-template-columns: 1.05fr .95fr;
	}

	.ab-hero__art,
	.ab-collage {
		min-height: 560px;
	}

	.ab-split {
		grid-template-columns: .95fr 1.05fr;
		gap: 72px;
	}

	.ab-eco {
		grid-template-columns: .8fr 1.2fr;
		gap: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-collage__tile {
		animation: none;
	}

	.ab [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}