/* Rólunk v17. Shared tokens and existing components, no framework or new fonts. */
.about-main { padding-top: var(--header-height); }
.about-hero { position: relative; isolation: isolate; background: var(--ink); overflow: clip; }
.about-hero-photo { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 70%; }
.about-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.about-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,var(--ink),rgb(6 16 21 / 78%) 17%,rgb(6 16 21 / 24%) 42%,rgb(6 16 21 / 6%) 75%),linear-gradient(180deg,rgb(6 16 21 / 8%),transparent 65%,rgb(6 16 21 / 38%)); }
.about-hero-inner { position: relative; padding-top: var(--space-5); padding-bottom: var(--section-space); }
.about-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; font-size: var(--text-small); color: var(--muted); }
.about-breadcrumb li + li::before { content: "/"; margin-right: var(--space-3); color: var(--accent); }
.about-breadcrumb a { text-decoration: none; }
.about-breadcrumb a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.about-hero-copy { width: 48%; max-width: 40rem; margin-top: var(--space-7); }
.about-hero-copy .eyebrow { margin-bottom: var(--space-5); color: var(--accent); }
.about-hero-copy .eyebrow span { margin-inline: var(--space-2); color: var(--muted); }
.about-hero-copy h1 { text-shadow: 0 3px 22px rgb(0 0 0 / 20%); }
.about-hero-copy .lead { margin-top: var(--space-5); max-width: 42ch; color: var(--white); }
.about-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
.about-text-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--button-height); color: var(--white); font-size: var(--text-button); font-weight: 800; text-decoration: none; }
.about-text-link:hover { color: var(--accent); }
.about-text-link .arrow { color: var(--accent); }
.about-hero-caption { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-7); color: var(--muted); font-size: var(--text-small); }
.about-hero-caption span { width: var(--space-6); height: 1px; flex: 0 0 auto; background: linear-gradient(90deg,var(--accent),var(--amber)); }
.about-next { color: var(--white); background: var(--ink); border-bottom: 1px solid rgb(var(--accent-rgb) / 12%); }
.about-next-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: var(--space-7); }
.about-next-copy .eyebrow { margin-bottom: var(--space-5); color: var(--accent); }
.about-next-copy .lead { max-width: 50ch; margin-top: var(--space-5); color: var(--muted); }
.about-next-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); justify-self: end; }
.about-next-actions .button { width: 100%; justify-content: space-between; }
@media (max-width: 899px) {
 .about-hero-copy { width: 100%; max-width: 38rem; margin-top: var(--space-6); }
 .about-hero-inner { padding-bottom: 310px; }
 .about-hero-photo { inset: auto 0 0; width: 100%; height: 370px; }
 .about-hero-photo img { object-position: center 70%; }
 .about-hero-photo::after { background: linear-gradient(180deg,var(--ink),rgb(6 16 21 / 55%) 20%,rgb(6 16 21 / 3%) 50%,rgb(6 16 21 / 12%)); }
 .about-hero-caption { margin-top: var(--space-6); }
 .about-next-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
 .about-next-actions { justify-self: start; }
}
@media (max-width: 767px) {
 .about-hero-inner { padding-top: var(--space-4); padding-bottom: 240px; }
 .about-hero-photo { height: 275px; }
 .about-hero-actions { gap: var(--space-4); margin-top: var(--space-5); }
 .about-hero-caption { margin-top: var(--space-5); }
}