/* FAQ shares the case-study type scale, gutters and art depth. */
.faq-page{--page-gutter:clamp(24px,6vw,112px);--small-accent:#9b341d}
.faq-page h1,.faq-page h2{text-wrap:balance}.faq-page p{text-wrap:pretty}
.faq-page .paper .kicker{color:var(--small-accent)}.faq-page .dark .kicker{color:#f1542a}
.faq-page .paper h1 span,.faq-page .paper h2 span{color:#e84b25}
.faq-page .kicker{font-size:12px;line-height:1.6;letter-spacing:.12em}
.faq-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4vw;padding-left:var(--page-gutter);align-items:stretch}
.faq-hero-copy{min-width:0;padding:clamp(48px,4.8vw,68px) 0;align-self:center}
.faq-hero h1{font-size:clamp(52px,5.7vw,92px);line-height:.98;letter-spacing:-.02em;margin-bottom:22px}
.faq-hero-copy>p{max-width:560px;font-size:16px;line-height:1.75}
.faq-hero-copy>.kicker{font-size:12px;line-height:1.6}
.faq-hero-copy>.faq-lead{font-size:19px;font-weight:700;line-height:1.5;margin-bottom:16px}
.faq-hero-copy .btn{margin-top:4px}
.faq-hero-art{position:relative;min-height:560px;isolation:isolate;box-shadow:0 24px 38px -24px #08253280}
.faq-hero-art .art-fill{background-image:url('assets/faq-hero.webp');background-position:67% 50%;inset:-64px -5%;height:calc(100% + 128px)}
.faq-hero-art::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px #08253230,inset 0 0 28px #08253245}

#questions{scroll-margin-top:72px}
.faq-questions{display:block;padding:0 var(--page-gutter) clamp(44px,4.5vw,64px);background-color:#e7ddca}
.faq-intro{position:static;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:center;margin-inline:calc(-1 * var(--page-gutter));padding:32px var(--page-gutter);background:var(--ink);color:var(--paper)}
.faq-page .faq-intro .kicker{color:#f1542a;margin:0 0 12px}
.faq-page .faq-intro h2{margin:0;color:var(--paper);font-size:clamp(42px,4.1vw,60px);line-height:1.04}
.faq-page .faq-intro h2 span{color:#f1542a}
.faq-intro-copy p{max-width:43ch;margin:0 0 12px;font-size:16px;line-height:1.65}
.faq-work-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:var(--paper);font:700 17px/1.4 'Barlow Condensed',Impact,sans-serif;letter-spacing:.035em;text-decoration-thickness:1px;text-underline-offset:5px}
.faq-work-link:hover{color:#f1542a}.faq-work-link:focus-visible{outline:3px solid #f1542a;outline-offset:5px}
.faq-list{min-width:0;max-width:1200px;margin:0 auto;padding:0 clamp(20px,2.8vw,40px);background:var(--paper);border-bottom:2px solid var(--ink)}
.faq-item{position:relative;border-bottom:1px solid #08253245}.faq-item:last-child{border-bottom:0}
.faq-item summary{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;gap:18px;align-items:center;min-height:82px;padding:21px 0;color:var(--ink);list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-number{font-size:12px;line-height:1.5;letter-spacing:.08em;font-weight:700;color:#546465;font-variant-numeric:tabular-nums}
.faq-question{font:700 clamp(27px,2.35vw,34px)/1.18 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.005em;text-wrap:pretty}
.faq-toggle{display:block;position:relative;width:22px;height:22px;justify-self:end;color:var(--ink)}
.faq-toggle::before,.faq-toggle::after{content:'';position:absolute;top:10px;left:2px;width:18px;height:2px;background:currentColor}
.faq-toggle::after{transform:rotate(90deg);transition:transform .22s ease}
.faq-item[open] .faq-toggle::after{transform:rotate(0)}
.faq-item[open] .faq-toggle,.faq-item[open] .faq-number{color:var(--small-accent)}
.faq-item[open]{border-bottom-color:#ad3a2080}
.faq-item[open]::before{content:'';position:absolute;left:-14px;top:22px;bottom:24px;width:3px;background:#ad3a20}
.faq-item summary:hover .faq-question{color:var(--small-accent)}.faq-item summary:focus-visible{outline:3px solid #e84b25;outline-offset:4px}
.faq-answer{max-width:78ch;padding:0 46px 26px}
.faq-answer p{margin:0 0 18px;font-size:16px;line-height:1.75}.faq-answer p:last-child{margin-bottom:0}
.faq-item[open] .faq-answer{animation:faq-answer-in .25s ease both}
@keyframes faq-answer-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Blue creates a distinct pause before the black contact section. */
.faq-capability{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);gap:6vw;align-items:center;padding:clamp(48px,5vw,76px) var(--page-gutter);background:var(--ink)}
.faq-capability h2{margin:0;font-size:clamp(42px,4.8vw,72px);line-height:1.04}
.faq-capability h2 span{color:#f1542a}.faq-page .faq-capability .kicker{color:#f1542a}
.faq-capability-copy>p{max-width:35ch;font-size:17px;line-height:1.75;margin-bottom:26px}
.faq-capability .btn{color:var(--cta-blue)!important;background:var(--paper)}.faq-capability .btn:hover{background:var(--orange-brand)}
.faq-capability .btn:focus-visible{outline:3px solid #f1542a;outline-offset:5px}
.faq-page .final{gap:clamp(32px,5vw,76px);padding-inline:var(--page-gutter)}
.faq-page .final h2{font-size:clamp(44px,4.4vw,66px);line-height:1.05}
.faq-page .final>div>p:not(.kicker){max-width:480px;font-size:17px;line-height:1.7}
.faq-page .contact-form label{font-size:12px;line-height:1.6}.faq-page .contact-form p.contact-email{font-size:14px}
@media(max-width:1050px){
 .faq-intro{gap:28px}
 .faq-capability{grid-template-columns:1fr;gap:24px}
 .faq-capability h2{max-width:20ch}.faq-capability-copy>p{max-width:60ch}
}
@media(max-width:900px){
 .faq-hero{grid-template-columns:1fr;padding:0;gap:0}.faq-hero-copy{padding:50px var(--page-gutter) 42px}
 .faq-hero h1{font-size:clamp(52px,8vw,72px);max-width:13ch}.faq-hero-art{min-height:0;height:clamp(300px,52vw,440px)}
}
@media(max-width:820px){#questions{scroll-margin-top:68px}}
@media(max-width:680px){
 .faq-intro{grid-template-columns:1fr;gap:20px;padding-block:28px}
 .faq-page .faq-intro h2{font-size:clamp(38px,9vw,50px)}
 .faq-intro-copy p{max-width:50ch;margin-bottom:6px}
}
@media(max-width:600px){
 .faq-hero h1{font-size:clamp(44px,12.5vw,66px)}.faq-hero-copy>.faq-lead{font-size:19px}.faq-hero-copy .faq-lead br{display:none}
 .faq-questions{padding-bottom:40px}
 .faq-list{padding-inline:18px}
 .faq-item summary{grid-template-columns:20px minmax(0,1fr) 22px;gap:10px;padding:20px 0;min-height:78px}
 .faq-question{font-size:26px;line-height:1.2}.faq-answer{padding:0 0 24px 30px}.faq-answer p{font-size:16px;line-height:1.75}
 .faq-item[open]::before{left:-10px}
 .faq-capability h2{font-size:clamp(39px,10.3vw,55px)}.faq-capability h2 br{display:none}.faq-capability-copy>p{font-size:16px}
 .faq-page .final h2{font-size:clamp(40px,10.7vw,56px)}
}
@media(max-width:420px){
 .faq-number{display:none}
 .faq-item summary{grid-template-columns:minmax(0,1fr) 22px;gap:12px}
 .faq-answer{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
 .faq-toggle::after{transition:none}.faq-item[open] .faq-answer{animation:none}.faq-hero-art .art-fill{transform:none;will-change:auto}
}