/* ---------- the section ---------- */
.fq{position:relative;background:#000;overflow:hidden}
.fq-in{max-width:1480px;margin:0 auto;padding:96px 44px 104px}

/* Full-width header, matching the routes map section above it.
   It has to be full width: "QUESTIONS" alone measures 460px at 64px/118%, so in
   the 380px column this first sat in, the glyphs overflowed the box and ran into
   the answers. getBoundingClientRect() hid it — the BOX stayed 380px while the
   painted text did not. Measure scrollWidth, or a Range over the text, not the box. */
.fq-top{margin:0 0 54px}
.fq-eyebrow{color:#FF7038;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:2.4px;text-transform:uppercase;margin-bottom:18px}
.fq-h2{margin:0 0 14px;color:#F7F3F0;font-family:Archivo,sans-serif;font-size:64px;
  font-weight:600;font-variation-settings:'wdth' 118;line-height:1.1;
  text-transform:uppercase;text-wrap:balance}
.fq-lede{margin:0;color:#A2938A;font-size:15px;line-height:1.62;max-width:62ch}

.fq-body{display:grid;grid-template-columns:1fr minmax(300px,360px);
  gap:34px 72px;align-items:start}

/* ---------- accordion ---------- */
.fq-list{border-top:1px solid #2C231E}
.fq-item{border-bottom:1px solid #2C231E}
.fq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;background:none;border:0;cursor:pointer;text-align:left;
  padding:22px 4px 22px 0;color:#F7F3F0;font-family:Archivo,sans-serif;
  font-size:18px;font-weight:700;font-variation-settings:'wdth' 110;line-height:1.35}
.fq-q:hover{color:#FF7038}
.fq-q:focus-visible{outline:2px solid #FF7038;outline-offset:3px;border-radius:2px}
/* the sign is the only affordance, so make it unmistakable */
.fq-sign{flex:0 0 auto;width:22px;height:22px;position:relative;margin-top:3px}
.fq-sign::before,.fq-sign::after{content:"";position:absolute;background:#FF7038;
  left:50%;top:50%;transition:transform .22s cubic-bezier(.22,.75,.28,1)}
.fq-sign::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.fq-sign::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.fq-item.on .fq-sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq-a{overflow:hidden;height:0}
.fq-a-in{padding:0 0 24px;color:#D8CCC4;font-size:14.5px;line-height:1.68;max-width:74ch}
.fq-a-in p{margin:0 0 12px}
.fq-a-in p:last-child{margin:0}
.fq-a-in strong{color:#F7F3F0;font-weight:600}

/* ---------- the ask ---------- */
.fq-aside{background:#100D0B;border:1px solid #2C231E;border-radius:2px;padding:26px 26px 28px}
.fq-aside-t{color:#F7F3F0;font-family:Archivo,sans-serif;font-size:19px;font-weight:700;
  font-variation-settings:'wdth' 112;line-height:1.25;margin:0 0 9px}
.fq-aside-p{color:#A2938A;font-size:13.5px;line-height:1.6;margin:0 0 20px}
.fq-cta{display:inline-block;background:#C94510;color:#fff;
  font-family:Archivo,sans-serif;font-size:16px;font-weight:700;letter-spacing:1.6px;
  font-variation-settings:'wdth' 118;text-transform:uppercase;text-decoration:none;
  border-radius:5px;padding:12px 24px;min-height:44px;
  transition:transform .18s cubic-bezier(.22,.75,.28,1)}
.fq-cta:hover{transform:translateY(-2px)}
.fq-tel{display:block;margin-top:15px;color:#A2938A;font-family:'IBM Plex Mono',monospace;
  font-size:13px;text-decoration:none}
.fq-tel:hover{color:#FF7038}

@media (max-width:1100px){ .fq-in{padding:80px 32px 88px} .fq-h2{font-size:48px} .fq-body{gap:30px 48px} }
@media (max-width:900px){
  .fq-in{padding:72px 38px 80px}
  .fq-top{margin-bottom:40px}
  /* stacked: heading, then the questions, then the ask - never the ask first */
  .fq-body{grid-template-columns:1fr;gap:32px}
  .fq-aside{order:2}
}
@media (max-width:767px){
  .fq-in{padding:56px 20px 64px}
  .fq-h2{font-size:36px}
  .fq-q{font-size:16px;padding:18px 2px 18px 0;gap:16px}
  .fq-a-in{font-size:14px}
  .fq-cta{width:100%;text-align:center}
}
@media (max-width:479px){ .fq-h2{font-size:32px} }
@media (prefers-reduced-motion:reduce){
  .fq-a,.fq-sign::before,.fq-sign::after,.fq-cta{transition:none}
}