/* ═══════════════════════════════════════════
   ROYSEN · «Про нас» (Figma: About us)
   ═══════════════════════════════════════════ */

/* ─── Хіро + колаж (Figma 190:149 + 190:157) ───
   Бежева панель 625px на всю ширину; колаж 2×2 фото 294×340:
   колонки стартують вище панелі (-71/-40, ховаються за хедером),
   нижнє фото правої колонки наповзає на 23px на наступну секцію. */
.ab-hero{
	position:relative;
	background:var(--beige);
	min-height:625px;
	display:flex; align-items:flex-start;
}
.ab-hero__inner{ position:relative; z-index:2; }
/* «scroll →» як у Figma: горизонтальний текст, повернутий на 90°
   навколо верхнього лівого кута → стрілка після слова (внизу),
   візуальний лівий край = 63-15 = 48px (колона контенту) */
.ab-hero__scroll{
	left:63px; right:auto; top:505px;
	writing-mode:horizontal-tb;
	white-space:nowrap;
	transform:rotate(90deg);
	transform-origin:top left;
}
.ab-hero__content{ max-width:680px; padding:129px 0 80px; }
.ab-hero__title{
	position:relative;
	font-size:clamp(72px, 6.2vw, 96px);
	font-weight:500; line-height:1.16; text-transform:uppercase;
	margin-top:6px;
}
/* жовтий акцент 48×17 на початку другого рядка (Figma Rectangle 684) */
.ab-hero__title::before{
	content:""; position:absolute;
	left:-.02em; top:2em;
	width:.5em; height:.177em;
	background:var(--yellow);
	z-index:-1;
}
.ab-hero__title em{ font-style:normal; box-shadow:inset 0 -17px 0 var(--yellow); }
.ab-hero__text{ margin-top:20px; font-size:14px; color:var(--muted); max-width:680px; }
.ab-hero__collage{
	position:absolute; top:0; z-index:1;
	right:max(8px, calc((100% - var(--container-max) - var(--pad) * 2) / 2 + 8px));
	width:min(595px, calc(100vw - 790px));
	display:flex; gap:7px;
	pointer-events:none;
	/* зрізаємо верх фото по краю панелі (не лізуть під хедер);
	   нижній наплив лишається в межах бокса */
	clip-path:inset(0 -2px -2px -2px);
}
.ab-hero__col{ display:flex; flex-direction:column; gap:8px; flex:1; margin-top:-71px; }
.ab-hero__col--2{ margin-top:-40px; }
.ab-hero__col span{
	display:block; width:100%; aspect-ratio:294/340; flex:none;
	background:var(--beige-50); overflow:hidden; position:relative;
}
.ab-hero__col img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ─── Майстерність ─── */
.ab-master{ padding:115px 0 0; } /* 115 = зазор від панелі хіро в макеті (фото наповзає в нього) */
.ab-master__grid{
	display:grid;
	grid-template-columns:326px minmax(0,1fr) 330px;
	gap:48px;
	align-items:stretch; /* тіло по висоті фото — кнопка притиснута донизу */
}
.ab-master__photo{ position:relative; aspect-ratio:326/416; align-self:start; }
.ab-master__photo img{
	position:absolute; inset:8px; /* 8px внутрішня рамка, як у макеті */
	width:calc(100% - 16px); height:calc(100% - 16px);
	object-fit:cover;
}
.ab-master__body{ display:flex; flex-direction:column; align-items:flex-start; }
.ab-master__body .h-section{ margin-top:9px; max-width:517px; }
.ab-master__text{ margin-top:24px; font-size:14px; color:var(--muted); max-width:517px; }
.ab-master__body .r-btn{ margin-top:auto; }
.ab-master__aside .label-caps{ display:block; line-height:1.35; }
.ab-master__list{ margin-top:24px; }
.ab-master__list li{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 0;
	border-top:1px solid var(--line);
	font-size:14px;
}
.ab-master__list li span{ font-weight:500; }
.ab-master__list li:last-child{ border-bottom:1px solid var(--line); }
.ab-master__list em{
	font-style:normal; font-size:12px;
	color:var(--ink); opacity:.6; letter-spacing:1.2px;
}
.ab-master__note{ margin-top:24px; font-size:14px; color:var(--muted); }

/* ─── Цифри (стрічка з рамками, все по центру) ─── */
.ab-stats{ padding:115px 0; }
.ab-stats__row{
	display:flex; justify-content:space-between; align-items:center;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	padding:24px 0;
}
.ab-stats__item{ flex:1; text-align:center; }
.ab-stats__item + .ab-stats__item{ border-left:1px solid var(--line); }
.ab-stats__item strong{
	display:inline-block; position:relative;
	font-size:40px; font-weight:500; text-transform:uppercase; line-height:1.2;
	z-index:1;
}
.ab-stats__item strong::after{
	content:""; position:absolute; left:0; bottom:2px;
	width:48px; height:17px; background:var(--yellow);
	z-index:-1;
}
.ab-stats__item span{ display:block; margin-top:8px; font-size:14px; }

/* ─── Мінімалізм (чорна) ───
   Нижній падінг 115 + 184 — зона, на яку наповзає фото .ab-full */
.ab-min{
	background:var(--ink); color:var(--cream);
	padding:115px 0 299px;
	border-top:1px solid rgba(255,250,238,.1);
}
.ab-min__label{ color:var(--cream); opacity:.6; }
.ab-min .h-section{ margin-top:9px; }
.ab-min__cols{
	display:grid; grid-template-columns:repeat(4, 1fr);
	gap:48px;
	margin-top:48px;
}
.ab-min__num{ display:flex; align-items:center; gap:48px; margin-bottom:24px; }
.ab-min__num hr{ flex:1; border:none; border-top:1px solid var(--yellow); }
.ab-min__num em{ font-style:normal; font-size:12px; opacity:.6; letter-spacing:1.2px; }
.ab-min__col h3{ font-size:14px; font-weight:400; text-transform:uppercase; margin-bottom:12px; }
.ab-min__col p{ font-size:14px; opacity:.7; line-height:1.55; }

/* ─── Фото (майже вся ширина, наповзає на чорну секцію) ─── */
.ab-full{
	width:calc(100% - 48px); /* правий зріз 48px — за ним видно чорну секцію */
	aspect-ratio:1392/513;
	margin-top:-184px;
	overflow:hidden; position:relative;
}
.ab-full img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; }

/* ─── Для кого ми ─── */
.ab-quote{ padding:115px 0; text-align:center; }
.ab-quote__inner{ max-width:828px; }
.ab-quote .h-section{ margin-top:9px; max-width:511px; margin-inline:auto; }
.ab-quote__text{ margin-top:24px; font-size:14px; color:var(--muted); }
.ab-quote .r-btn{ margin-top:48px; }

/* ─── Відповідальність ─── */
.ab-resp{ padding:0 0 115px; }
.ab-resp__grid{
	display:grid; grid-template-columns:minmax(0,1fr) 370px;
	gap:8px;
	align-items:end;        /* низи рівні — фото 532 виступає над карткою */
	padding-right:8px;      /* блок ширший за контейнер: край за 8px від межі, як у макеті */
}
.ab-resp__card{
	background:var(--beige);
	padding:81px;
}
.ab-resp__card .h-section{ margin-top:9px; max-width:570px; }
.ab-resp__text{ margin-top:24px; font-size:14px; color:var(--muted); max-width:844px; }
.ab-resp__card .r-btn{ margin-top:48px; }
.ab-resp__photo{ position:relative; aspect-ratio:370/532; }
.ab-resp__photo img{
	position:absolute; inset:8px 8px 0; /* рамка 8px, низ урівень з карткою */
	width:calc(100% - 16px); height:calc(100% - 8px);
	object-fit:cover;
}

/* ─── 1200–1920 ─── */
@media (max-width: 1440px){
	.ab-master__grid{ grid-template-columns:280px minmax(0,1fr) 300px; gap:36px; }
}