.studio-faq{position:relative;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr);gap:6%;padding:80px 7%;background-color:#fff;background-image:radial-gradient(#f7620025 .8px,transparent .8px);background-size:8px 8px;color:#29231f}
.faq-intro{position:relative;min-height:610px;isolation:isolate}
.faq-kicker{font-size:10px;letter-spacing:2px;color:#f76200;margin:0 0 28px}
.faq-intro h2{display:flex;gap:14px;margin:0;position:relative;z-index:2;justify-content:flex-end;font-weight:500}
.faq-intro h2 span{writing-mode:vertical-rl;font-size:clamp(30px,3.1vw,54px);line-height:1.3;letter-spacing:5px;padding:12px 6px;background:#f76200;color:#fff;height:fit-content}
.faq-intro h2 span+span{background:#fff;color:#f76200;margin-top:48px;font-size:clamp(25px,2.4vw,40px)}
.faq-portrait{position:absolute;bottom:0;left:0;width:75%;max-width:330px;aspect-ratio:1/2;background:url('/assets/faq-florist.png') 50% center/300% 100% no-repeat;border-radius:160px 160px 4px 4px;z-index:1}
.faq-star{position:absolute;bottom:15px;right:0;font-size:180px;line-height:1;color:#ffd43c;z-index:0}
.faq-content{align-self:center;min-width:0}.faq-lead{font-size:15px;letter-spacing:1px;margin:0 0 24px;color:#a64c12}
.faq-item{background:white;margin-bottom:12px;border:1px solid #f762001a}
.faq-item summary{display:flex;align-items:center;gap:20px;list-style:none;cursor:pointer;min-height:94px;padding:20px 24px}
.faq-item summary::-webkit-details-marker{display:none}.faq-number{font-size:13px;color:#f76200;flex:none}.faq-item h3{font-size:clamp(17px,1.3vw,23px);line-height:1.6;font-weight:500;margin:0;flex:1}
.faq-toggle{height:36px;width:36px;background:#f76200;position:relative;flex:none}.faq-toggle:before,.faq-toggle:after{content:'';position:absolute;left:10px;right:10px;top:17px;height:1px;background:#fff}.faq-toggle:after{transform:rotate(90deg);transition:transform .25s}.faq-item[open] .faq-toggle:after{transform:rotate(0)}
.faq-answer{padding:0 80px 26px 75px}.faq-answer p{font-size:14px;line-height:2;margin:0;color:#75675e}.faq-item summary:hover h3{color:#f76200}
.faq-contact{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 0 auto;padding:14px 0;background:transparent;color:#f76200;border:0;border-bottom:1px solid #f76200;font-size:14px;cursor:pointer}.faq-contact span{font-size:24px}
.studio-faq :is(summary,button):focus-visible{outline:2px solid #f76200;outline-offset:4px}
@media(max-width:900px){.studio-faq{padding:48px 6%;grid-template-columns:1fr;gap:32px}.faq-intro{min-height:400px;max-width:520px;width:100%;margin:auto}.faq-portrait{height:370px;width:185px}.faq-intro h2{padding-right:16px}.faq-intro h2 span{font-size:36px}.faq-intro h2 span+span{font-size:27px}.faq-star{right:20px;font-size:150px}.faq-item summary{gap:12px;padding:18px 16px;min-height:84px}.faq-answer{padding:0 20px 24px}.faq-item h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.faq-toggle:after{transition:none}}

/* Frame the florist from the waist up at the lower-left edge. */
.studio-faq{overflow:hidden}
.faq-portrait{left:-7vw;bottom:-80px;width:clamp(340px,30vw,520px);height:clamp(340px,31vw,480px);max-width:none;aspect-ratio:auto;border-radius:0;background-size:300% auto;background-position:50% -35px}
@media(max-width:900px){.faq-intro{min-height:510px}.faq-portrait{left:-6vw;bottom:0;width:300px;height:320px;background-position:50% -25px}.faq-intro h2{padding-right:0}.faq-intro h2 span{font-size:30px}.faq-intro h2 span+span{font-size:23px}}
@media(max-width:480px){.faq-portrait{width:260px;height:290px}.faq-intro{min-height:490px}}

/* Plain background without the dotted texture. */
.studio-faq{background-image:none}

/* Two smaller professions sit behind the foreground florist. */
.faq-support{position:absolute;z-index:0;width:clamp(190px,17vw,290px);height:clamp(240px,22vw,350px);background-size:300% auto;background-position:50% top;background-repeat:no-repeat;pointer-events:none}
.faq-support-chef{background-image:url('/assets/people/plate-chef.png');left:-4vw;bottom:170px}
.faq-support-farmer{background-image:url('/assets/people/crate-farmer.png');left:9vw;bottom:60px}
.faq-portrait{z-index:1}
@media(max-width:900px){.faq-support{width:190px;height:230px}.faq-support-chef{left:-4vw;bottom:170px}.faq-support-farmer{left:100px;bottom:60px}}

/* Hold the FAQ in place while the orange service panel scrolls over it. */
.faq-service-stack{position:relative;isolation:isolate}
.faq-service-stack>.studio-faq{position:sticky;top:min(0px,calc(100svh - var(--faq-height,770px)));z-index:0}
.faq-service-stack>.service-deck{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.faq-service-stack>.studio-faq{position:relative;top:auto}}

/* Keep the cooperation questions after removing the portrait introduction. */
.studio-faq{grid-template-columns:minmax(0,1fr)}

/* Centered FAQ with fine dividers and open line toggles. */
.studio-faq>.faq-content{width:100%;max-width:1100px;margin-inline:auto}
.faq-item{border:0;border-bottom:1px solid #f7620055;background:transparent;margin-bottom:0}
.faq-item:first-child{border-top:1px solid #f7620055}
.faq-item summary{padding-inline:24px}
.faq-toggle{background:transparent}
.faq-toggle:before,.faq-toggle:after{background:#f76200}
@media(max-width:600px){.faq-item summary{padding-inline:8px}}

/* Leave a landing area for the interactive falling stickers. */
.studio-faq{isolation:isolate;padding-bottom:240px}
.studio-faq>.faq-content{position:relative;z-index:1}
@media(max-width:600px){.studio-faq{padding-bottom:190px}}

.faq-section-title{text-align:center;font-size:clamp(26px,3vw,42px);font-weight:600;line-height:1.5;color:#171815;margin:0 0 48px}
.faq-section-title+.faq-item{border-top:1px solid #f7620055}