/* [aob_faq] — Figma "faq" (6007:11023): title + CTA, accordion cards on the left, photos + contact note on the right. */
:not(#_) .aob-faq { background: var(--aob-black-3); color: var(--aob-light-1); font-family: var(--aob-font-body); padding-bottom: 82px; }

:not(#_) .aob-faq__head { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: var(--aob-section-gap); text-align: center; }
:not(#_) .aob-faq__title { margin: 0; font-family: var(--aob-font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; color: var(--aob-white); }
:not(#_) .aob-faq__accent { color: var(--aob-brand); }

/* Two buttons, one visible at a time: next to the title on desktop, centered at the very bottom on tablet/phone. */
:not(#_) .aob-faq__cta { box-sizing: border-box; flex: none; }
:not(#_) .aob-faq__cta--desktop { display: none; }
:not(#_) .aob-faq__cta--mobile { display: flex; width: fit-content; margin: var(--aob-section-gap) auto 0; }

:not(#_) .aob-faq__body { display: flex; flex-direction: column; gap: 48px; }

/* Accordion cards */
:not(#_) .aob-faq__list { display: flex; flex-direction: column; gap: var(--aob-cards-gap); min-width: 0; }
:not(#_) .aob-faq__item { border: 1px solid var(--aob-glass-border); border-radius: var(--aob-radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05)); transition: border-color 0.3s, background-color 0.3s; }
:not(#_) .aob-faq__item.aob-is-open { border-color: rgba(200, 138, 74, 0.25); }
:not(#_) .aob-faq__heading { margin: 0; }
:not(#_) .aob-faq__trigger { display: flex; align-items: center; gap: 33px; width: 100%; box-sizing: border-box; margin: 0; padding: var(--aob-pad-y) var(--aob-pad-x); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--aob-radius); }
:not(#_) .aob-faq__trigger:focus-visible { outline: 2px solid var(--aob-white); outline-offset: -2px; }
:not(#_) .aob-faq__question { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; line-height: 23.4px; color: var(--aob-light-1); }
:not(#_) .aob-faq__chevron { display: flex; flex: none; width: 13.4px; height: 13.4px; transform: rotate(-90deg); transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
:not(#_) .aob-faq__chevron img { display: block; width: 13.4px; height: 13.4px; }
:not(#_) .aob-faq__trigger:hover .aob-faq__question { color: #fff; }
:not(#_) .aob-faq__item.aob-is-open .aob-faq__chevron { transform: rotate(90deg); }

/* Panel height animates via grid-template-rows (0fr -> 1fr), so any answer length works. */
:not(#_) .aob-faq__panel { display: grid; grid-template-rows: 1fr; }
:not(#_) .aob-faq__panel-inner { min-height: 0; overflow: hidden; }
:not(#_) .aob-faq__answer { margin: 0; padding: 0 var(--aob-pad-x) var(--aob-pad-y); font-size: 16px; line-height: 22.4px; color: var(--aob-light-3); }
@media (min-width: 1024px) { :not(#_) .aob-faq__answer { padding-right: calc(var(--aob-pad-x) + 57px); } }

/* JS on: collapsed by default and animated; without JS every answer stays visible. */
:not(#_) .aob-faq__list.aob-is-ready .aob-faq__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-faq__list.aob-is-ready .aob-faq__item.aob-is-open .aob-faq__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
:not(#_) .aob-faq__list.aob-is-ready .aob-faq__answer { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
:not(#_) .aob-faq__list.aob-is-ready .aob-faq__item.aob-is-open .aob-faq__answer { opacity: 1; transform: none; transition-delay: 0.12s; }

/* Aside: photos + contact note */
:not(#_) .aob-faq__aside { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
:not(#_) .aob-faq__gallery { display: flex; flex-direction: column; gap: 16px; }
:not(#_) .aob-faq__frame { padding: 8px; border: 1px solid var(--aob-gold-soft); border-radius: 16px; }
:not(#_) .aob-faq__main { position: relative; overflow: hidden; border-radius: var(--aob-radius); aspect-ratio: 566 / 434; }
:not(#_) .aob-faq__main-img { position: absolute; left: -4.93%; top: -0.11%; width: 109.87%; height: 107.35%; max-width: none; }
:not(#_) .aob-faq__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
:not(#_) .aob-faq__thumb { position: relative; overflow: hidden; border-radius: var(--aob-radius); aspect-ratio: 170 / 116; }
:not(#_) .aob-faq__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:not(#_) .aob-faq__thumb--crop img { inset: auto; left: -37.9%; top: -42.24%; width: 155.07%; height: 184.48%; max-width: none; }

:not(#_) .aob-faq__contact { position: relative; display: flex; flex-direction: column; gap: 12px; padding-bottom: 131px; }
:not(#_) .aob-faq__contact-title { margin: 0; font-size: 24px; font-weight: 400; line-height: 31.2px; letter-spacing: -0.02em; color: var(--aob-white); }
:not(#_) .aob-faq__contact-text { margin: 0; font-size: 16px; line-height: 22.4px; color: var(--aob-light-3); }
/* Watermark logo: Figma stretches the 1024×812 logo into 424×99; the 12% opacity is already baked into the exported PNG's alpha, so no extra opacity here. */
:not(#_) .aob-faq__watermark { position: absolute; left: 0; bottom: 0; width: min(424px, 100%); height: 99px; max-width: none; pointer-events: none; }

@media (min-width: 1024px) {
	:not(#_) .aob-faq__head { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
	:not(#_) .aob-faq__cta--desktop { display: inline-flex; }
	:not(#_) .aob-faq__cta--mobile { display: none; }
	:not(#_) .aob-faq__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 566px); gap: 64px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
	:not(#_) .aob-faq__chevron, :not(#_) .aob-faq__item,
	:not(#_) .aob-faq__list.aob-is-ready .aob-faq__panel, :not(#_) .aob-faq__list.aob-is-ready .aob-faq__answer { transition: none !important; }
}
@media (max-width: 767px) {
	:not(#_) .aob-faq__trigger { gap: 16px; }
	:not(#_) .aob-faq__question { font-size: 17px; }
	:not(#_) .aob-faq__thumbs { gap: 8px; }
}

/* Phones: centered contact note. */
@media (max-width: 767px) {
	:not(#_) .aob-faq__contact { align-items: center; text-align: center; }
	:not(#_) .aob-faq__watermark { left: 50%; transform: translateX(-50%); }
}