/* FAQ — native <details> accordion, so it works with JavaScript disabled. */

.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.02em;text-transform:uppercase}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--red)}

.faq-item__marker{position:relative;flex:none;width:18px;height:18px}
.faq-item__marker::before,.faq-item__marker::after{content:"";position:absolute;background:var(--red);
  transition:transform .2s ease,opacity .2s ease}
.faq-item__marker::before{top:8px;left:0;width:18px;height:2px}
.faq-item__marker::after{top:0;left:8px;width:2px;height:18px}
.faq-item[open] .faq-item__marker::after{transform:rotate(90deg);opacity:0}

.faq-item__answer{padding:0 0 26px;max-width:78ch;font-size:16.5px;color:var(--steel)}
.faq-item__answer > *:last-child{margin-bottom:0}
.faq-item__answer p{margin-bottom:1em}
.faq-item__answer ul{list-style:disc;margin:0 0 1em 1.3em}
.faq-item__answer li{margin-bottom:.4em}
.faq-item__answer a{color:var(--red);text-decoration:underline;text-underline-offset:2px}

.section--bg-navy .faq-list,.section--bg-asphalt .faq-list,
.section--bg-navy .faq-item,.section--bg-asphalt .faq-item{border-color:rgba(255,255,255,.13)}
.section--bg-navy .faq-item__answer,.section--bg-asphalt .faq-item__answer{color:rgba(255,255,255,.68)}
.section--bg-navy .faq-item__answer a,.section--bg-asphalt .faq-item__answer a{color:var(--sand)}

@media(max-width:720px){.faq-item summary{font-size:18px;padding:20px 0}}