/* FAQs — reference: 10 - FAQs.png (763px mockup ≈ 1440px desktop, ×1.89) */

/* ---------- Hero ---------- */
.hero--faq { --media-w: 56%; --fade: 22%; --hero-h: clamp(470px, 49vw, 720px); --copy-w: 50%; }
.hero--faq .hero__media img { object-position: 35% 70%; }
.hero--faq .display { font-size: clamp(3rem, 1rem + 7.4vw, 8rem); }
.faq-hero__lede { max-width: none; font-size: clamp(1.1rem, .7rem + 1.6vw, 2.15rem); line-height: 1.2; }
/* Lancaster overlay: pixel-aligned with the hero photo (crop 418x292 src px, object-position 35% 70%) so the
   nose, which sits left of the photo crop in the mockup, is restored over the sky. Uses container query units. */
.faq-hero__frame { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.faq-hero__lancaster {
  --s: max(100cqw / 418, 100cqh / 292);
  position: absolute; width: calc(310 * var(--s)); aspect-ratio: 310 / 87;
  left: calc((100cqw - 418 * var(--s)) * .35 - 55 * var(--s));
  top: calc((100cqh - 292 * var(--s)) * .7);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.hero__media .faq-hero__lancaster img { width: 100%; height: 100%; object-fit: fill; -webkit-mask-image: none; mask-image: none; }
.hero--faq .hero__note { --tilt: -12deg; right: 3%; top: 7%; font-size: clamp(1.3rem, .8rem + 1.2vw, 2.3rem); } }
@media (max-width: 900px) {
  .hero--faq { --copy-w: 100%; }
  .faq-hero__lancaster { display: none; } /* the hero photo already carries the aircraft on small screens */
}

/* ---------- Intro + collage ---------- */
.faq-intro { background: var(--paper-tex) 0 0 / 512px, var(--paper-warm); padding-block: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem); overflow: hidden; }
.faq-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: center; }
.faq-intro__text { position: relative; z-index: 3; }
.faq-intro .h-serif { font-size: clamp(2.3rem, 1rem + 3.9vw, 4.8rem); line-height: .96; margin-bottom: 1.2rem; white-space: nowrap; text-shadow: 0 0 18px rgb(255 255 255 / .9), 0 0 4px #fff; }
.faq-intro__prose { font-size: clamp(1.05rem, .8rem + .85vw, 1.6rem); line-height: 1.3; color: var(--text); max-width: 31em; }
.faq-collage { position: relative; aspect-ratio: 388 / 225; margin-right: calc(-1 * var(--gutter)); }
.faq-collage > * { position: absolute; margin: 0; }
.faq-collage__piper { left: 1%; top: 6%; width: 31%; height: 30%; z-index: 2; }
.faq-collage__drummer { left: 32%; top: 0; width: 33%; height: 92%; z-index: 3; }
.faq-collage__skyline { left: 2%; top: 52%; width: 28%; opacity: .6; z-index: 1; }
.faq-collage__card { left: 67%; top: 6%; width: 30%; height: 40%; padding: 3%; z-index: 1; transform: rotate(3deg); background: var(--paper-tex) 0 0 / 300px, #efe6d2; box-shadow: var(--shadow-sm); }
.faq-collage__card img { width: 100%; height: 100%; object-fit: contain; opacity: .7; filter: sepia(.8) saturate(.5); }
.faq-collage__thistle { left: 82%; top: 36%; width: 22%; opacity: .7; z-index: 0; }
.faq-collage__note { left: 66%; top: 52%; z-index: 4; --tilt: -12deg; font-size: clamp(1.2rem, .8rem + 1.2vw, 2.2rem); }
@media (max-width: 900px) {
  .faq-intro__grid { grid-template-columns: 1fr; }
  .faq-intro .h-serif { white-space: normal; }
  .faq-collage { margin-inline: 0; }
}

/* ---------- FAQ groups ---------- */
.faq-groups {
  position: relative;
  background:
    radial-gradient(ellipse 40% 12% at 80% 4%, rgb(255 255 255 / .7), transparent 70%),
    radial-gradient(ellipse 50% 10% at 20% 50%, rgb(255 255 255 / .55), transparent 70%),
    linear-gradient(180deg, #dcefff, #e8f4fd 40%, #e3f1fc);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}
.faq-group { position: relative; padding-top: clamp(1.4rem, 2.4vw, 2.4rem); overflow: hidden; }
.faq-group__head { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 0 clamp(.3rem, .8vw, .8rem); margin-bottom: clamp(.8rem, 1.2vw, 1.2rem); position: relative; z-index: 1; }
.faq-group__num { font-family: var(--font-serif); font-size: clamp(3.4rem, 1rem + 7.4vw, 8rem); line-height: .78; color: #7fb2e0; letter-spacing: -.04em; }
.faq-group__thistle { width: clamp(50px, 1rem + 5vw, 110px); margin-bottom: -.4rem; opacity: .9; }
.faq-group__thistle img { width: 100%; }
.faq-group .h-display--3 { font-size: clamp(1.7rem, 1rem + 2.8vw, 3.6rem); line-height: 1; }
.faq-group__sub { font-family: var(--font-body); font-size: clamp(1.05rem, .8rem + .9vw, 1.7rem); line-height: 1.2; color: var(--navy-800); margin-top: .2rem; }
.faq-group__art { right: 1%; top: clamp(.4rem, 1vw, 1rem); z-index: 0; }
.faq-group__art--skyline { width: clamp(220px, 32vw, 470px); opacity: .7; right: 4%; }
.faq-group__art--pipers { width: clamp(220px, 30vw, 430px); opacity: .9; right: 0; }
.faq-group__art--pipers img { mix-blend-mode: multiply; }
.faq-group__art--plane { width: clamp(220px, 32vw, 460px); opacity: .55; right: 3%; top: 0; }

.faq-groups .accordion { position: relative; z-index: 1; gap: clamp(.35rem, .5vw, .5rem); }
.faq-groups .accordion details { background: #f6f5f1; border-color: #d9e5f0; box-shadow: 0 1px 3px rgb(0 30 63 / .08); }
.faq-groups .accordion summary { font-size: clamp(1.02rem, .85rem + .55vw, 1.5rem); padding: clamp(.65rem, .9vw, .95rem) clamp(1rem, 1.6vw, 1.6rem); gap: clamp(.9rem, 1.6vw, 1.8rem); }
.faq-groups .accordion summary .acc-icon { width: clamp(1.6rem, 1.2rem + .8vw, 2.3rem); height: clamp(1.6rem, 1.2rem + .8vw, 2.3rem); }
.faq-groups .accordion details[open] summary { background: linear-gradient(180deg, #0a2c5e, var(--navy-900)); }
.faq-answer { padding: clamp(.9rem, 1.4vw, 1.4rem) clamp(1rem, 2vw, 2rem) clamp(1rem, 1.4vw, 1.4rem) clamp(3.4rem, 2.4rem + 3.4vw, 7.2rem); font-size: clamp(.98rem, .8rem + .5vw, 1.32rem); line-height: 1.42; }
.faq-answer a { color: var(--navy-700); font-weight: 600; }
.faq-answer--art { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: center; padding-block: clamp(.5rem, .7vw, .7rem); padding-right: clamp(.6rem, 1vw, 1rem); }
.faq-answer__art { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: clamp(.6rem, 1.2vw, 1.2rem); min-height: 100%; }
.faq-answer__art img { flex: 0 1 auto; min-width: 0; width: auto; max-width: 62%; max-height: clamp(80px, 7.6vw, 125px); object-fit: contain; mix-blend-mode: multiply; }
.faq-answer__art--plane img { max-width: 100%; max-height: clamp(100px, 10vw, 165px); opacity: .75; }
.faq-answer__note { --tilt: -10deg; font-size: clamp(1.1rem, .8rem + .9vw, 1.9rem); transform-origin: center; flex: none; }
@media (max-width: 760px) {
  .faq-group__head { grid-template-columns: auto 1fr; }
  .faq-group__thistle { display: none; }
  .faq-group__art { opacity: .25; }
  .faq-answer { padding-left: 1.2rem; }
  .faq-answer--art { grid-template-columns: 1fr; }
  .faq-answer__art { justify-content: flex-start; }
  .faq-answer__art--plane { display: none; }
}

/* ---------- Neurodivergent-friendly band ---------- */
.faq-inclusive {
  overflow: hidden; text-align: center; padding-block: clamp(2rem, 3.4vw, 3.4rem);
  background:
    radial-gradient(ellipse 30% 50% at 85% 30%, rgb(255 255 255 / .6), transparent 70%),
    radial-gradient(ellipse 30% 40% at 15% 80%, rgb(255 255 255 / .5), transparent 70%),
    linear-gradient(180deg, #cfe8fb, #dff0fd 60%, #e9f5fd);
}
.faq-inclusive__inner { max-width: 62rem; }
.faq-inclusive .h-serif { font-size: clamp(1.8rem, 1rem + 2.6vw, 3.6rem); }
.faq-inclusive__lede { font-family: var(--font-body); font-size: clamp(1rem, .9rem + .45vw, 1.4rem); line-height: 1.3; color: var(--navy-800); margin: .5rem auto clamp(1.2rem, 2vw, 2rem); max-width: 34em; }
.faq-inclusive__features { --cols: 4; }
.faq-inclusive__features h3 { max-width: 12em; }
.faq-inclusive__thistle { left: -2%; top: -8%; width: clamp(140px, 19vw, 300px); opacity: .85; }
.faq-inclusive__plane { right: 2%; bottom: 8%; width: clamp(110px, 13vw, 220px); opacity: .55; }
.faq-inclusive__note { position: absolute; right: 2.5%; top: 9%; --tilt: -14deg; font-size: clamp(1.1rem, .7rem + 1.1vw, 2rem); z-index: 2; text-align: left; }
@media (max-width: 1080px) { .faq-inclusive__note { display: none; } .faq-inclusive__thistle { opacity: .35; } }

/* ---------- Get in touch band ---------- */
.faq-contact { position: relative; overflow: hidden; background: var(--paper-tex) 0 0 / 512px, var(--paper-warm); padding-bottom: calc(var(--wave-h) * .5); }
.faq-contact__media { position: absolute; inset: 0 0 0 auto; width: 48%; }
.faq-contact__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.faq-contact__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: clamp(150px, 11.5vw, 175px); padding-block: 1.2rem; }
.faq-contact .h-serif { font-size: clamp(1.7rem, 1rem + 2.3vw, 3.4rem); margin-bottom: .6rem; }
.faq-contact__links { display: flex; flex-wrap: wrap; gap: .6rem clamp(1.4rem, 3vw, 3rem); font-family: var(--font-ui); font-weight: 600; font-size: clamp(1rem, .8rem + .75vw, 1.55rem); }
.faq-contact__links a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--navy-800); }
.faq-contact__links a:hover span { text-decoration: underline; }
.faq-contact__links .icon { width: 1.3em; height: 1.3em; }
.faq-contact__btn { font-size: clamp(.95rem, .85rem + .35vw, 1.2rem); padding-inline: clamp(1.2rem, .8rem + 1.2vw, 2rem); box-shadow: 0 0 0 3px rgb(255 255 255 / .85), 0 4px 14px rgb(0 30 63 / .3); --h: clamp(46px, 2.6rem + .6vw, 58px); }
@media (max-width: 860px) {
  .faq-contact__media { position: relative; width: 100%; height: 160px; inset: auto; }
  .faq-contact__media img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
  .faq-contact { display: flex; flex-direction: column-reverse; }
  .faq-contact__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) { .br-wide { display: none; } }
@media (max-width: 640px) { .hero--faq .hero__note { display: none; } }
@media (max-width: 1240px) {
  .faq-intro .h-serif { white-space: normal; }
  .faq-group__art--pipers, .faq-group__art--skyline, .faq-group__art--plane { width: clamp(180px, 24vw, 300px); opacity: .45; }
}
@media (max-width: 760px) { .faq-inclusive__plane { display: none; } }
.faq-contact .h-serif, .faq-contact__links { text-shadow: 0 0 12px rgb(248 247 242 / .95), 0 0 3px rgb(248 247 242 / .9); }