/* Questions, below the night screen: quiet, the same type and colours as the film above. */
.fq { position: relative; z-index: 8; background: #0a0908; color: #f5f3ee; padding: clamp(96px, 16vh, 180px) var(--edge) clamp(80px, 12vh, 140px); }
.fq__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.fq__h { margin: 0; font-weight: 400; font-size: clamp(2.4rem, 4.85vw, 4.7rem); line-height: 0.98; letter-spacing: -0.038em; }
.fq__h span { display: block; color: rgba(245, 243, 238, 0.5); }
.fq__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(245, 243, 238, 0.14); }
.fq__item { border-bottom: 1px solid rgba(245, 243, 238, 0.14); }
.fq__q { margin: 0; font: inherit; }
.fq__btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 26px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -0.02em; transition: color 0.3s ease; }
.fq__list.has-open .fq__item:not(.is-open) .fq__btn { color: rgba(245, 243, 238, 0.5); }
.fq__btn:focus-visible { outline: 2px solid #19c26a; outline-offset: 4px; border-radius: 4px; }
/* the mark: a plus that turns into a minus, green when open */
.fq__mark { position: relative; flex: none; width: 14px; height: 14px; }
.fq__mark::before, .fq__mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; }
.fq__mark::after { transform: rotate(90deg); }
.fq__item.is-open .fq__mark::after { transform: rotate(0deg); }
.fq__item.is-open .fq__mark::before, .fq__item.is-open .fq__mark::after { background: #19c26a; }
/* the answer opens by height, smoothly */
.fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.fq__a > div { overflow: hidden; }
.fq__item.is-open .fq__a { grid-template-rows: 1fr; }
.fq__a p { margin: 0; padding: 0 48px 28px 0; max-width: 38rem; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; color: rgba(245, 243, 238, 0.74); opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.fq__item.is-open .fq__a p { opacity: 1; transform: none; transition-delay: 0.12s; }
/* the footer: one quiet row */
.ft { position: relative; z-index: 8; background: #0a0908; color: rgba(245, 243, 238, 0.6); padding: 0 var(--edge) 44px; font-size: 14px; }
.ft__in { max-width: 1180px; margin: 0 auto; padding-top: 30px; border-top: 1px solid rgba(245, 243, 238, 0.14); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.ft a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.ft a:hover { color: #f5f3ee; }
.ft__logo { justify-self: start; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: #f5f3ee !important; }
.ft__mark { display: inline-grid; line-height: 1; }
.ft__sub { justify-self: end; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 243, 238, 0.58); }
.ft__sub i { width: 5px; height: 5px; margin-left: 1px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 8px rgba(255, 176, 32, 0.7); }
.ft__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.ft__note { justify-self: end; margin: 0; text-align: right; }
.ft__note span { display: block; margin-top: 4px; color: rgba(245, 243, 238, 0.42); }
@media (max-width: 820px) { .fq__in { grid-template-columns: 1fr; } .ft__in { grid-template-columns: 1fr; justify-items: start; } .ft__note { justify-self: start; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .fq__a, .fq__a p, .fq__mark::before, .fq__mark::after { transition: none; } }
/* phones: the questions and the footer fit one screen, so the page ends with the heading clear of the logo; if an open
   answer makes it longer and the heading reaches the logo, the logo gets a solid bar behind it (how.js adds .nav--solid) */
@media (max-width: 819.98px) {
  .fq { padding: 108px var(--edge) 34px; }
  .fq__in { gap: 26px; }
  .fq__btn { padding: 20px 0; }
  .fq__a p { padding: 0 28px 22px 0; }
  .ft { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
  .ft__in { padding-top: 24px; gap: 16px; }
  .nav.nav--solid { background: linear-gradient(180deg, #0a0908 74%, rgba(10, 9, 8, 0)); }
}