.faq { padding: 90px 0; background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,6vw,80px); align-items: start; }
.faq-intro .eyebrow { color: var(--clay-deep); }
.faq-intro h2 { font-size: clamp(2.2rem,3.4vw,3.125rem); }
.faq-intro > p:not(.eyebrow) { max-width: 440px; margin-top: 20px; color: #526270; }
.faq-photo { display: block; width: 100%; aspect-ratio: 4/3; margin-top: 30px; border-radius: 22px; object-fit: cover; object-position: 70% center; }
.faq details { margin-bottom: 12px; overflow: hidden; border: 1px solid #d3e4ed; border-left: 4px solid #285878; border-radius: 16px; background: #fff; transition: background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.faq details[open] { border-color: rgba(40,88,120,.36); background: #f7fbfd; box-shadow: 0 8px 22px rgba(40,88,120,.07); }
.faq summary { position: relative; padding: 24px 58px 24px 20px; list-style: none; cursor: pointer; color: var(--ink); font: 500 1.28rem/1.3 "DM Sans",Arial,sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 20px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8f2f7; color: #285878; font-size: 1.35rem; }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 3px solid #89bfdc; outline-offset: -3px; }
.faq details p { margin: 0; padding: 0 58px 24px 20px; color: #526270; font-size: .98rem; line-height: 1.6; }
.faq details a { color: var(--blue); text-underline-offset: 3px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 620px) { .faq { padding: 70px 0; } .faq summary { padding: 21px 52px 21px 18px; font-size: 1.08rem; } .faq summary::after { right: 18px; top: 18px; } .faq details p { padding: 0 24px 22px 18px; } }