/* [aob_why_us] — Figma "why-us" (6007:10933): title + accordion over a full-bleed photo with a dark gradient from the left. */
:not(#_) .aob-why { position: relative; overflow: hidden; padding: 120px 1rem 80px; background: var(--aob-black-3); color: var(--aob-light-1); font-family: var(--aob-font-body); }
@media (min-width: 768px) { :not(#_) .aob-why { padding: 164px 2rem 110px; } }

:not(#_) .aob-why__bg { position: absolute; inset: 0; pointer-events: none; }
:not(#_) .aob-why__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 70%; }
:not(#_) .aob-why__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 16, 14, 0.94) 0%, rgba(17, 16, 14, 0.86) 55%, rgba(17, 16, 14, 0.6) 100%); }
@media (min-width: 1024px) {
	:not(#_) .aob-why__shade { background: linear-gradient(90deg, #11100e 25%, rgba(17, 16, 14, 0.97) 40.7%, rgba(17, 16, 14, 0.57) 60%, rgba(17, 16, 14, 0) 70%); }
}
:not(#_) .aob-why__curve { position: absolute; left: 0; top: -1px; width: 100%; height: auto; pointer-events: none; }

:not(#_) .aob-why__inner { position: relative; display: flex; flex-direction: column; gap: 32px; }
:not(#_) .aob-why__title { margin: 0; max-width: 560px; font-family: var(--aob-font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: var(--aob-white); }
:not(#_) .aob-why__accent { color: var(--aob-brand); }

:not(#_) .aob-why__list { width: 100%; max-width: 610px; }
:not(#_) .aob-why__item { border-bottom: 1px solid rgba(245, 242, 237, 0.15); }
:not(#_) .aob-why__heading { margin: 0; }
:not(#_) .aob-why__trigger { display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; margin: 0; padding: var(--aob-pad-y) 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
:not(#_) .aob-why__trigger:focus-visible { outline: 2px solid var(--aob-white); outline-offset: -2px; border-radius: var(--aob-radius); }
:not(#_) .aob-why__icon { display: flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 42px; height: 42px; border: 0.553px solid var(--aob-brand); border-radius: 900px; background: var(--aob-black-2); transition: background-color 0.3s, box-shadow 0.3s; }
:not(#_) .aob-why__icon img { display: block; width: 19.9px; height: 19.9px; }
:not(#_) .aob-why__label { flex: 1; min-width: 0; font-size: 24px; font-weight: 400; line-height: 31.2px; letter-spacing: -0.02em; color: var(--aob-white); transition: color 0.3s; }
:not(#_) .aob-why__chevron { display: flex; flex: none; width: 36px; height: 36px; transform: rotate(90deg); transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
:not(#_) .aob-why__chevron img { display: block; width: 36px; height: 36px; }
:not(#_) .aob-why__trigger:hover .aob-why__icon { box-shadow: 0 0 0 4px rgba(242, 106, 10, 0.12); }
:not(#_) .aob-why__item.aob-is-open .aob-why__chevron { transform: rotate(-90deg); }

/* Panel: height animates via grid-template-rows 0fr -> 1fr (no fixed heights, works for any text length). */
:not(#_) .aob-why__panel { display: grid; grid-template-rows: 1fr; }
:not(#_) .aob-why__panel-inner { min-height: 0; overflow: hidden; }
:not(#_) .aob-why__text { margin: 0; padding: 0 0 var(--aob-pad-y); max-width: 525px; font-size: 16px; line-height: 22.4px; color: var(--aob-light-3); }

/* JS on: collapsed by default, animated. (Without JS the panels simply stay open.) */
:not(#_) .aob-why__list.aob-is-ready .aob-why__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s linear 0.45s; }
:not(#_) .aob-why__list.aob-is-ready .aob-why__item.aob-is-open .aob-why__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
:not(#_) .aob-why__list.aob-is-ready .aob-why__text { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
:not(#_) .aob-why__list.aob-is-ready .aob-why__item.aob-is-open .aob-why__text { opacity: 1; transform: none; transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
	:not(#_) .aob-why__chevron, :not(#_) .aob-why__icon, :not(#_) .aob-why__label,
	:not(#_) .aob-why__list.aob-is-ready .aob-why__panel, :not(#_) .aob-why__list.aob-is-ready .aob-why__text { transition: none !important; }
}
@media (max-width: 767px) { :not(#_) .aob-why__label { font-size: 20px; line-height: 26px; } }

/* Phones: centered title. */
@media (max-width: 767px) {
	:not(#_) .aob-why__title { margin-inline: auto; text-align: center; text-wrap: balance; }
}