/* sections/faq.php */
.fq-section {
	box-sizing: border-box; width: 100%;
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	--fq-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	background: var(--c-bg); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.fq-section *, .fq-section *::before, .fq-section *::after { box-sizing: border-box; }
.fq-icon { flex: none; width: 1.375rem; height: 1.375rem; }
/* Phone: heading, questions, then the navy card; from 1024px the card sits under the heading, left of the questions */
.fq-inner { display: grid; grid-template-areas: "head" "list" "card"; gap: var(--space-6); max-width: var(--container); margin: 0 auto; }
.fq-head { grid-area: head; }
.fq-list { grid-area: list; }
.fq-card { grid-area: card; }
.fq-inner > * { min-width: 0; }

.fq-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.fq-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.fq-section .fq-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.fq-intro { margin: var(--space-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-lg); }

/* "Another question?": flat navy card with the phone and the quote link */
.fq-card {
	display: grid; gap: var(--space-3); align-self: start; padding: var(--space-5);
	border-radius: var(--radius-lg) 2.5rem var(--radius-lg) 2.5rem; background: var(--fq-blue); color: var(--c-on-dark); box-shadow: var(--shadow-lg);
}
.fq-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.fq-section .fq-card-title { margin: 0; color: var(--c-on-dark); font: 700 var(--fs-lg)/1.3 var(--f-heading); }
.fq-card-text { margin: 0; color: color-mix(in srgb, var(--c-on-dark) 82%, transparent); font-size: var(--fs-sm); }
.fq-section .fq-btn {
	display: inline-flex; align-items: center; gap: var(--space-4); justify-self: start; margin-top: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
	border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-primary);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none; transition: transform 0.25s;
}
.fq-section .fq-btn:hover, .fq-section .fq-btn:focus { background: var(--c-surface); color: var(--c-primary); transform: translateY(-2px); }
.fq-badge { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.fq-badge .fq-icon { width: 1.25rem; height: 1.25rem; transform: rotate(-45deg); transition: transform 0.25s; }
.fq-btn:hover .fq-badge .fq-icon { transform: rotate(0deg); }
.fq-section a:focus-visible, .fq-section summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.fq-card a:focus-visible { outline-color: var(--c-on-dark); }

/* Accordion: pale cards, navy border and white background when open, the chevron turns */
.fq-list { display: grid; gap: var(--space-3); }
.fq-item {
	border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-alt);
	transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.fq-item:hover { border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border)); }
.fq-item[open] { border-color: var(--c-primary); background: var(--c-surface); box-shadow: var(--shadow-md); }
/* Pale variant (the team section's background): the closed questions turn white to stand out */
.fq-section--alt { background: var(--c-bg-alt); }
.fq-section--alt .fq-item { background: var(--c-surface); }
.fq-section--alt .fq-toggle { background: var(--c-bg-alt); }
.fq-section .fq-q { margin: 0; font: inherit; }
.fq-section .fq-summary {
	display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	color: var(--c-heading); font: 700 var(--fs-base)/1.35 var(--f-heading); cursor: pointer; list-style: none;
}
.fq-summary::-webkit-details-marker { display: none; }
.fq-summary > .fq-q { flex: 1; min-width: 0; } /* the question takes the room; the round toggle keeps its size */
.fq-toggle {
	display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-sm);
	transition: background-color 0.25s, color 0.25s, transform 0.3s;
}
.fq-item:hover .fq-toggle { background: var(--c-primary); color: var(--c-on-primary); }
.fq-item[open] .fq-toggle { background: var(--c-accent); color: var(--c-on-accent); transform: rotate(180deg); }
.fq-a { margin: 0; padding: 0 var(--space-5) var(--space-5); color: var(--c-text-muted); font-size: var(--fs-sm); animation: fq-open 0.35s ease-out; }
@keyframes fq-open { from { opacity: 0; transform: translateY(-0.25rem); } }
.fq-section .fq-link { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.fq-section .fq-link:hover, .fq-section .fq-link:focus { color: var(--c-accent); }

@media (min-width: 1024px) {
	.fq-inner { grid-template-areas: "head list" "card list"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-5) var(--space-8); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
	.fq-section * { transition: none !important; animation: none !important; }
}