@font-face{font-family:'Often Martian Medium';font-style:normal;font-weight:500;font-display:swap;src:url('often-martian-medium-latin.woff2') format('woff2')}
.ofq{display:block;position:relative;isolation:isolate;overflow:hidden;background:var(--fq-bg);color:var(--fq-text);padding:var(--fq-space) 0 24px;min-height:700px}
.ofq::before,.ofq::after{content:'';position:absolute;left:0;width:100%;pointer-events:none;z-index:1}
.ofq::before{top:0;height:var(--fq-fade-top);background:linear-gradient(var(--fq-bg),transparent)}
.ofq::after{bottom:0;height:var(--fq-fade-bottom);background:linear-gradient(0deg,var(--fq-bg),transparent)}
.ofq-art{display:block;position:absolute;top:24px;right:max(-140px,calc((100% - var(--fq-width))/2 - 100px - var(--fq-image-shift,220px) - (var(--fq-image-width,1400px) - 1100px)*.25));width:var(--fq-image-width,1400px);aspect-ratio:1672/941;z-index:-1;mask-image:linear-gradient(#000 94%,transparent)}
/* Keep the artwork centered as either answers or the full question list expand.
   Percentage edge fades grow with that same section, as in the reference. */
@media(min-width:1024px){.ofq-art{top:50%;transform:translateY(-50%)}}
/* The glow follows the image's size, never the growing answer list.
   Transparent radial edges reveal the cream section above and below it. */
@media(min-width:1024px){.ofq{background-color:var(--fq-bg);background-image:radial-gradient(ellipse at 86% 50%,var(--fq-glow-lavender),var(--fq-glow-pink) 32%,transparent 70%);background-size:100% calc(var(--fq-image-width,1400px)*.5628 + 100px);background-position:center;background-repeat:no-repeat}.ofq-art{mask-image:linear-gradient(90deg,transparent,#000 18%,#000 85%,transparent),linear-gradient(transparent,#000 var(--fq-fade-top),#000 calc(100% - var(--fq-fade-bottom)),transparent);mask-composite:intersect}}
.r-site .ofq-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.ofq-inner{position:relative;z-index:2;width:100%;max-width:var(--fq-width);margin:auto;padding:0 20px}
.r-site .ofq h2{font-family:'Often Martian Medium',monospace!important;font-size:var(--fq-heading);font-weight:500!important;font-synthesis:none;line-height:1.15;letter-spacing:-.02em;text-align:center;margin:0 0 56px;color:var(--fq-text)}
.ofq-column{width:50%;max-width:669px}
.ofq-list{display:flex;flex-direction:column;gap:24px}
.r-site .ofq-item{margin:0;border:1px solid var(--fq-border);border-radius:var(--fq-radius);background:linear-gradient(135deg,color-mix(in srgb,var(--fq-glass) var(--fq-opacity),transparent),color-mix(in srgb,var(--fq-glass) 6%,transparent));box-shadow:inset 0 1px 0 #ffffff60;backdrop-filter:blur(var(--fq-blur));-webkit-backdrop-filter:blur(var(--fq-blur));overflow:hidden}
.r-site .ofq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 36px;margin:0;border:0;cursor:pointer;color:var(--fq-text);font-family:var(--often-font-offer),Arial,sans-serif!important;font-size:var(--fq-question);font-weight:500;line-height:1;text-transform:uppercase;background:transparent}
.ofq-item summary::-webkit-details-marker{display:none}.ofq-item summary::after{display:none!important}
.r-site .ofq-item summary span,.r-site .ofq-item[open] summary span{transform:none!important;transition:none}
.ofq-item summary svg{flex:0 0 16px;transition:transform .2s ease}.ofq-item[open] summary svg{transform:rotate(180deg)}
.r-site .ofq-answer{padding:0 36px 24px;font-size:var(--fq-answer-size);line-height:1.45;color:var(--fq-answer)}
.r-site .ofq-answer p{font:inherit;color:inherit;margin:0 0 12px}.r-site .ofq-answer p:last-child{margin-bottom:0}
.r-site .ofq-more{display:block;margin:24px auto 0;padding:8px 0;border:0;background:transparent;color:var(--fq-text);font-size:18px;line-height:1.2;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ofq [hidden]{display:none!important}
@media(max-width:1023px){.ofq{padding:0 0 24px;min-height:0}.ofq-art{position:relative;inset:auto;width:100%;aspect-ratio:auto;margin-bottom:-50px;z-index:0;mask-image:linear-gradient(transparent,#000 var(--fq-fade-top),#000 calc(100% - var(--fq-fade-bottom)),transparent)}.r-site .ofq-art img{height:auto;aspect-ratio:1;object-fit:contain;object-position:center}.ofq-column{width:100%;max-width:669px;margin:auto}.ofq-inner{z-index:2}.ofq::before,.ofq::after{display:none}}
@media(max-width:749px){.r-site .ofq h2{font-size:28px;margin-bottom:32px}.ofq-list{gap:12px}.r-site .ofq-item summary{padding:14px 16px;font-size:18px;min-height:48px}.r-site .ofq-answer{padding:0 16px 16px;font-size:16px}.r-site .ofq-more{font-size:16px;margin-top:18px}}
@media(prefers-reduced-motion:reduce){.ofq-item summary svg{transition:none}}
