/* [aob_about] — Figma "about-us" (6007:10838). Light section: text + CTA on the left, photo mosaic on the right. */
:not(#_) .aob-about {
	position: relative;
	overflow: hidden;
	background: var(--aob-light-1);
	color: var(--aob-black-3);
	font-family: var(--aob-font-body);
}

/* Decorative pattern + orange line on the right edge (desktop only). */
:not(#_) .aob-about__deco { display: none; position: absolute; top: 0; right: 0; width: 540px; height: 817px; pointer-events: none; }
:not(#_) .aob-about__pattern { position: absolute; top: 0; right: -90px; width: 630px; height: 817px; max-width: none; }
:not(#_) .aob-about__line { position: absolute; top: 0; right: 140px; width: 399px; height: 817px; max-width: none; }
@media (min-width: 1100px) { :not(#_) .aob-about__deco { display: block; } }

:not(#_) .aob-about__inner { position: relative; display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 1024px) {
	:not(#_) .aob-about__inner { flex-direction: row; align-items: center; gap: 64px; }
	:not(#_) .aob-about__content { flex: 0 1 521px; }
	:not(#_) .aob-about__gallery { flex: 1 1 0; min-width: 0; }
}

/* Text column */
:not(#_) .aob-about__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
:not(#_) .aob-about__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
:not(#_) .aob-about__badge {
	padding: 6px 8px;
	border: 1px solid var(--aob-gold-soft);
	border-radius: 44px;
	background: rgba(242, 106, 10, 0.05);
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aob-black-3);
}
:not(#_) .aob-about__title { margin: 0; font-family: var(--aob-font-display); font-size: clamp(32px, 4.4vw, 48px); font-weight: 400; line-height: 1.2; color: var(--aob-black-3); }
:not(#_) .aob-about__accent { color: var(--aob-brand); }
:not(#_) .aob-about__body { display: flex; flex-direction: column; gap: 22.4px; }
:not(#_) .aob-about__text { margin: 0; font-size: 16px; line-height: 22.4px; color: var(--aob-black-1); }
:not(#_) .aob-about .aob-btn { box-sizing: border-box; }
/* Two buttons, one visible at a time: in the text column on desktop, centered under the photos on tablet/phone. */
:not(#_) .aob-about__cta--mobile { display: flex; align-self: center; }
:not(#_) .aob-about__cta--desktop { display: none; }
@media (min-width: 1024px) {
	:not(#_) .aob-about__cta--desktop { display: flex; }
	:not(#_) .aob-about__cta--mobile { display: none; }
}

/* Photo mosaic: two small on top, one wide below (left block 461fr) + one tall (194fr); same proportions as Figma (671 × 574). */
:not(#_) .aob-about__gallery {
	display: grid;
	grid-template-columns: 461fr 194fr;
	grid-template-rows: minmax(0, 192fr) minmax(0, 366fr);
	min-height: 0;
	gap: 16px;
	aspect-ratio: 671 / 574;
	width: 100%;
	max-width: 671px;
	margin-inline: auto;
}
@media (max-width: 1023px) {
	:not(#_) .aob-about__gallery { max-width: none; }
}
:not(#_) .aob-about__photo { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; border-radius: var(--aob-radius); }
:not(#_) .aob-about__photo--1 { grid-column: 1; grid-row: 1; width: calc(50% - 7.5px); }
:not(#_) .aob-about__photo--2 { grid-column: 1; grid-row: 1; width: calc(50% - 7.5px); justify-self: end; }
:not(#_) .aob-about__photo--3 { grid-column: 1; grid-row: 2; }
:not(#_) .aob-about__photo--4 { grid-column: 2; grid-row: 1 / span 2; object-position: 56% 50%; }

@media (max-width: 599px) {
	:not(#_) .aob-about__gallery { aspect-ratio: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 150px 220px; gap: 12px; }
	:not(#_) .aob-about__photo--1,
	:not(#_) .aob-about__photo--2 { width: 100%; grid-row: 1; justify-self: stretch; }
	:not(#_) .aob-about__photo--1 { grid-column: 1; }
	:not(#_) .aob-about__photo--2 { grid-column: 2; }
	:not(#_) .aob-about__photo--3 { grid-column: 1 / span 2; grid-row: 2; }
	:not(#_) .aob-about__photo--4 { display: none; }
}