/* ═════════════════════════════════════════════════════════════════
   COMPONENT — FAQ + Final CTA
   ═════════════════════════════════════════════════════════════════
   Shared accordion + orange CTA band. Used by front-page, BAO, and
   CAO. Markup comes from the reusable
   /template-parts/components/faq-section.php partial — same DOM on
   every page. Includes the optional briefing/contact form within the
   CTA.
   ───────────────────────────────────────────────────────────────── */

/* ── FAQ ── */
.faq {
	background: transparent;
	padding-bottom: 0;
	position: relative;
	/* `clip` (not `hidden`) lets `position: sticky` children still stick —
	   `overflow: hidden` would create a scroll container and break it. */
	overflow: clip;
}
/* Make sure the FAQ content sits above the sticky background video. */
.faq .section-wrap {
	position: relative;
	z-index: 2;
	padding: 150px var(--container-x);
}

/* ── FAQ sticky video background (shared across all pages) ──
   The `.section-bg-wrap` pins a muted video while the question list
   scrolls past. Previously these rules only loaded with the home cascade
   (pages/home/section-backgrounds.css); moved here so BAO and CAO get
   the same treatment automatically. Self-contained — does not depend on
   the generic `.section-bg-wrap` base rule in the home-only file.

   Use longhand top/right/bottom/left (not `inset`) — the negative
   `margin-bottom: -100vh` collapses the wrap out of the block flow so
   FAQ content starts at the top of the section instead of below the
   sticky element. */
.faq .section-bg-wrap {
	position: sticky;
	top: 0;
	right: auto;
	bottom: auto;
	left: auto;
	width: 100%;
	height: 100vh;
	margin-bottom: -100vh;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.faq .section-bg-inner {
	position: absolute;
	inset: -80px 0;
	will-change: transform;
}
.faq .section-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}
.faq .section-bg-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(245, 243, 239, 0.55);
	pointer-events: none;
	z-index: 1;
}
.faq-head { max-width: 100%; margin-bottom: clamp(48px, 6vw, 96px); }
.faq-head .display { font-size: clamp(48px, 6.8vw, 98px); }
.faq-head .display .hl-line { text-transform: uppercase; }
.faq-head .display .it-tail { font-size: clamp(48px, 7.4vw, 106px); 
	/* padding-top: 25px; */
}

.faq-list { max-width: none; display: flex; flex-direction: column; gap: 20px; }
.faq-item {
	border-radius: 14px;
	background: rgba(245, 243, 239, 0.60);
	backdrop-filter: blur(10px);
	padding: 0 clamp(20px, 2vw, 32px);
	transition: background .3s;
}

.faq-q {
	width: 100%;
	display: flex; justify-content: space-between; align-items: center;
	padding: clamp(20px, 2vw, 28px) 0;
	font-size: clamp(20px, 2vw, 30px);
	font-weight: 500;
	color: var(--ink);
	text-align: left;
	line-height: 1.3;
	cursor: pointer;
}
.faq-ico {
	display: inline-grid; place-items: center;
	flex-shrink: 0; margin-left: 1rem;
	color: var(--ink);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-ico { transform: rotate(180deg); }

.faq-a {
	max-height: 0; overflow: hidden;
	transition: max-height .5s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-a { max-height: 500px; }
.faq-a-inner {
	padding: 0 0 clamp(20px, 2vw, 28px);
	color: var(--ink-soft);
	font-size: var(--fs-body);
	line-height: 1.6;
	max-width: 78ch;
}

/* ── Final CTA — orange band (standalone, outside .faq section) ── */
.finalcta {
	background: var(--orange);
	color: var(--cream);
	margin-top: 0;
	padding: clamp(72px, 10vw, 160px) 0;
	position: relative;
	overflow: hidden;
}
.finalcta-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--container-x); }
.finalcta h2 {
	font-size: clamp(48px, 7.8vw, 112px);
	font-weight: 500;
	text-transform: uppercase;
	line-height: clamp(46px, 6.94vw, 100px);
	letter-spacing: -.01em;
	color: var(--cream);
	margin: 0 0 1.5rem;
	white-space: pre-line;
}
.finalcta h2 .it-tail { font-size: clamp(48px, 8.3vw, 120px); display: inline; color: var(--cream); }
.finalcta p {
	font-size: var(--fs-lead);
	color: var(--cream);
	max-width: 78ch;
	margin: 1.5rem 0 2.5rem;
	line-height: 1.5;
}
.finalcta .btn { background: var(--green); color: var(--cream); }
/* .finalcta .btn:hover { background: #084d1a; } */

/* ── Briefing / contact form (shown on user activation via JS) ── */
.briefing-form {
	margin-top: 2rem;
	display: none;
}
.briefing-form.open { display: grid; gap: 1rem; max-width: 540px; }
.briefing-form input,
.briefing-form textarea {
	width: 100%; padding: 14px 18px;
	border: 1px solid rgba(245,243,239,.35);
	border-radius: 12px;
	background: rgba(255,255,255,.1);
	color: var(--cream);
	font: inherit;
}
.briefing-form input::placeholder,
.briefing-form textarea::placeholder { color: rgba(245,243,239,.6); }
.briefing-form textarea { min-height: 110px; resize: vertical; }
.briefing-msg { font-size: 15px; min-height: 1.2em; }