/**
 * Despre noi — v2 overrides (figma node 87:2797).
 *
 * Page-scoped on purpose: site-design.css is shared with the homepage work
 * happening in parallel. Values come from the frame, not from eyeballing.
 */

@media (min-width: 1100px) {
	.av-page--about .av-about-intro {
		padding: 84px 0 58px;
	}

	.av-page--about .av-about-intro__grid {
		align-items: end;
		gap: 36px 92px;
		grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.56fr);
	}

	.av-page--about .av-about-intro__title {
		font-size: clamp(4rem, 4.55vw, 5.25rem);
		line-height: 0.95;
		max-width: 930px;
	}

	.av-page--about .av-about-intro__lead {
		font-size: clamp(18px, 1.26vw, 20px);
		line-height: 30px;
		margin: 0 0 6px;
		max-width: 520px;
	}

	.av-page--about .av-about-split {
		gap: 24px;
	}

	.av-page--about .av-about-panel {
		border-radius: 28px;
		min-height: 540px;
		padding: 36px;
	}

	.av-page--about .av-about-panel h2 {
		font-size: clamp(30px, 2.1vw, 32px);
		line-height: 40px;
		margin-bottom: 22px;
		max-width: 660px;
	}

	.av-page--about .av-about-panel > p:not(.av-eyebrow),
	.av-page--about .av-about-panel .av-check-list {
		font-size: 18px;
		line-height: 29px;
	}

	.av-page--about .av-about-panel .av-check-list {
		gap: 12px;
	}

	.av-page--about .av-about-panel__ring {
		border-width: 30px;
		bottom: -68px;
		height: 388px;
		right: -68px;
		width: 388px;
	}

	.av-page--about .av-about-differentiators {
		padding-bottom: 28px;
		padding-top: 70px;
	}

	.av-page--about .av-about-differentiators__title {
		font-size: clamp(3.15rem, 3.95vw, 3.5rem);
		line-height: 1.05;
		margin-bottom: 44px;
		max-width: 690px;
	}

	.av-page--about .av-about-differentiator {
		align-items: center;
		column-gap: 56px;
		cursor: default;
		grid-template-columns: 100px minmax(280px, 0.95fr) minmax(380px, 1fr);
		min-height: 164px;
		padding: 42px 0;
		will-change: opacity, transform;
	}

	.av-page--about .av-about-differentiator.is-featured {
		border-bottom-color: rgba(2, 127, 54, 0.28);
	}

	.av-page--about .av-about-differentiator__number {
		font-size: clamp(58px, 4.75vw, 70px);
		line-height: 1;
		transform-origin: left center;
		transition: color 300ms ease, transform 300ms ease;
	}

	.av-page--about .av-about-differentiator h3 {
		font-size: clamp(24px, 1.8vw, 28px);
		line-height: 40px;
		margin: 0;
		transition: color 300ms ease;
	}

	.av-page--about .av-about-differentiator p {
		font-size: clamp(17px, 1.2vw, 19px);
		line-height: 30px;
		margin: 0;
		max-width: 620px;
		transition: color 300ms ease;
	}

	.av-page--about .av-about-differentiator:hover {
		border-bottom-color: #027f36 !important;
	}

	.av-page--about .av-about-differentiator:hover .av-about-differentiator__number {
		color: #027f36 !important;
		transform: scale(1.08);
	}

	.av-page--about .av-about-trust {
		padding-top: 6px;
	}

	.av-page--about .av-about-promise__primary {
		font-size: clamp(34px, 2.55vw, 42px);
		line-height: 48px;
		margin-bottom: 18px;
		max-width: 560px;
	}

	.av-page--about .av-about-promise__secondary {
		font-size: 18px !important;
		line-height: 29px;
		max-width: 520px;
	}

	.av-page--about .av-about-cta {
		padding-bottom: 94px;
	}

	.av-page--about .av-about-cta__inner {
		border-radius: 28px;
		gap: 56px;
		min-height: 176px;
		padding: 42px 48px;
	}

	.av-page--about .av-about-cta__inner h2 {
		font-size: clamp(34px, 2.8vw, 44px);
		line-height: 1.08;
		max-width: 620px;
	}

	.av-page--about .av-about-cta__actions {
		gap: 14px;
		flex-wrap: nowrap;
	}

	.av-page--about .av-about-cta__actions .av-button {
		min-height: 56px;
		padding-inline: 32px;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.av-site.av-page--about.has-reveal [data-av-reveal]:not(.av-about-differentiator) {
		opacity: 0 !important;
		transform: translateY(28px) !important;
		transition:
			opacity 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--av-about-delay, 0ms),
			transform 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--av-about-delay, 0ms) !important;
	}

	.av-site.av-page--about.has-reveal [data-av-reveal]:not(.av-about-differentiator).is-revealed {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}

	.av-page--about .av-about-panel__ring {
		animation: av-panel-ring-drift 13s ease-in-out infinite alternate;
		transform-origin: 72% 72%;
		will-change: transform, opacity;
	}

	.av-site.av-page--about.has-reveal .av-about-panel[data-av-reveal] {
		transform: translate3d(0, 36px, 0) scale(0.985) !important;
		transition:
			opacity 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--av-about-delay, 0ms),
			transform 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--av-about-delay, 0ms) !important;
	}

	.av-site.av-page--about.has-reveal .av-about-panel[data-av-reveal].is-revealed {
		transform: translate3d(0, 0, 0) scale(1) !important;
	}

	.av-page--about .av-about-panel.av-about-panel--light {
		--av-about-delay: 40ms;
	}

	.av-page--about .av-about-panel.av-about-panel--green {
		--av-about-delay: 170ms;
	}

	.av-site.av-page--about.has-reveal .av-about-panel[data-av-reveal] .av-check-list li {
		opacity: 0 !important;
		transform: translate3d(0, 16px, 0) !important;
		transition:
			opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--av-list-delay, 0ms),
			transform 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--av-list-delay, 0ms) !important;
	}

	.av-site.av-page--about.has-reveal .av-about-panel[data-av-reveal].is-revealed .av-check-list li {
		opacity: 1 !important;
		transform: translate3d(0, 0, 0) !important;
	}

	.av-page--about .av-about-panel .av-check-list li:nth-child(1) {
		--av-list-delay: calc(var(--av-about-delay, 0ms) + 140ms);
	}

	.av-page--about .av-about-panel .av-check-list li:nth-child(2) {
		--av-list-delay: calc(var(--av-about-delay, 0ms) + 200ms);
	}

	.av-page--about .av-about-panel .av-check-list li:nth-child(3) {
		--av-list-delay: calc(var(--av-about-delay, 0ms) + 260ms);
	}

	.av-page--about .av-about-panel .av-check-list li:nth-child(4) {
		--av-list-delay: calc(var(--av-about-delay, 0ms) + 320ms);
	}

	.av-site.av-page--about.has-reveal .av-about-differentiator {
		opacity: 0 !important;
		transform: translateY(32px) !important;
		transition:
			opacity 600ms ease var(--av-about-delay, 0ms),
			transform 600ms ease var(--av-about-delay, 0ms),
			border-color 300ms ease !important;
	}

	.av-site.av-page--about.has-reveal .av-about-differentiator.is-revealed {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}

	.av-page--about .av-about-intro__lead {
		--av-about-delay: 120ms;
	}

	.av-page--about .av-about-differentiators__title {
		--av-about-delay: 90ms;
	}

	.av-page--about .av-about-differentiator:nth-child(1) {
		--av-about-delay: 40ms;
	}

	.av-page--about .av-about-differentiator:nth-child(2) {
		--av-about-delay: 110ms;
	}

	.av-page--about .av-about-differentiator:nth-child(3) {
		--av-about-delay: 180ms;
	}

	.av-page--about .av-about-differentiator:nth-child(4) {
		--av-about-delay: 250ms;
	}

	.av-page--about .av-about-differentiator:nth-child(5) {
		--av-about-delay: 320ms;
	}

	.av-page--about .av-about-differentiator:nth-child(6) {
		--av-about-delay: 390ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.av-page--about .av-about-panel__ring {
		animation: none !important;
	}
}

@media (min-width: 1700px) {
	/* Intro 87:2836 — heading block 874x149 (two lines of 72), lead 518x56
	   (two lines of 28). Ours rendered 80px/84.8 and 22px/36.3. */
	.av-page--about .av-about-intro__title {
		font-size: 70px;
		line-height: 72px;
		max-width: 874px;
	}

	.av-page--about .av-about-intro__lead {
		font-size: 19px;
		line-height: 28px;
		max-width: 518px;
	}

	/* Ring 87:2899 — 388.6px square, ~30.5px stroke, sitting at 480/252.6 in
	   the 800x572.7 green panel, so it overhangs the corner by ~69px.
	   Ours was 270px with a 38px stroke at -120/-60. */
	.av-page--about .av-about-panel__ring {
		border-width: 30px;
		bottom: -69px;
		height: 389px;
		right: -69px;
		width: 389px;
	}

	/* Differentiators 87:2901 — the heading (937x192, 3 lines at 56px/64) and
	   the list (six full-width 153.14px rows, one column) already match the
	   frame with no override. What didn't match: .av-section gives every
	   section 138px of top+bottom padding, and the differentiators rule here
	   only overrode the top (110px), leaving 138px under the list where the
	   frame has the section end flush with the last row — 112px too tall.
	   Measured against a real render before shipping this: an earlier version
	   of this rule added a 3-column grid and a max-width, neither backed by
	   the frame (which is a single column of full-width rows) — dropped. */
	.av-page--about .av-about-differentiators {
		padding-bottom: 26px;
	}

	/* Trust 87:3151 — the panel is 800x572.7 in the frame, same fixed height
	   as Identity; the right side just carries less copy (title + one short
	   paragraph, no checklist), so empty space at the bottom is the design,
	   not a bug. An earlier version of this rule set height:auto here, which
	   would have shrunk the panel below the frame's height — dropped before
	   it was ever deployed. */
}