/* Four-question enquiry and responsive trust panels. */
.scope-open .brief-top{min-height:48px;padding:6px 16px}
.brief-content.scope-step{padding:10px 22px}
.scope-step h2{font-size:24px}
.scope-step .options{gap:2px;margin-top:8px}
.scope-step .option.option-photo{grid-template-columns:18px 81px minmax(0,1fr);min-height:83px;padding:1px 9px;gap:8px}
.scope-step .option.option-photo img{width:81px!important;height:79px!important;max-height:none!important}
.detail-open .brief-panel,.detail-open .brief-main{min-height:0}
.detail-open .progress{position:static}
.brief-content.detail-step{padding:24px 28px}
.detail-step h2{font-size:28px}
.detail-step .options{gap:8px;margin-top:20px}
.detail-step .option{min-height:52px}
.detail-step .brief-actions{margin-top:18px}
@media(max-width:768px){
 .brief-content.scope-step{padding:8px 14px}
 .scope-step h2{font-size:22px}
 .scope-step .option.option-photo{grid-template-columns:16px 70px minmax(0,1fr);min-height:74px;padding:1px 8px;gap:7px}
 .scope-step .option.option-photo img{width:70px!important;height:70px!important}
 .brief-content.detail-step{padding:20px 16px}
 .detail-step h2{font-size:24px}
}
@media(max-width:768px) and (max-height:700px){
 .scope-step .illustration-note{display:none}
 .scope-step .options{margin-top:6px}
 .scope-step h2{font-size:20px}
}
@media(max-width:768px) and (max-height:600px){
 .scope-open .brief-top{min-height:40px;padding:3px 12px}
 .brief-content.scope-step{padding:6px 12px}
 .scope-step h2{font-size:19px}
 .scope-step .option.option-photo{grid-template-columns:16px 60px minmax(0,1fr);min-height:64px}
 .scope-step .option.option-photo img{width:60px!important;height:60px!important}
}

/* Proof sits beside the questions on desktop and follows the actions on mobile. */
.has-proof .brief-main{grid-template-columns:minmax(230px,.52fr) minmax(0,1fr);min-height:0}
.brief-proof{padding:26px 22px;background:#253033;border:0}
.brief-proof h3{font-size:25px;line-height:1.2;letter-spacing:-.03em}
.brief-proof p{font-size:13px;line-height:1.55;margin-top:16px}
.trust-brand{display:flex;align-items:center;gap:12px;padding:10px;background:white;color:var(--ink);margin-bottom:28px}
.trust-brand img{width:58px;height:auto}
.trust-brand span{font:600 9px/1.5 var(--mono);letter-spacing:.04em}
.trust-person{display:flex;gap:12px;align-items:center}
.trust-person img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.trust-person b{font:500 10px/1.5 var(--mono);color:var(--yellow);display:block;margin-top:5px}
.sense-proof>.trust-project{display:block;width:100%;height:180px;object-fit:cover;margin:0 0 22px}
.trust-story .eyebrow{font-size:9px;line-height:1.5;margin:0 0 10px;color:var(--yellow)}
.brief-content:not(.scope-step){padding:24px 28px}
@media(max-width:768px){
 .has-proof .brief-main{display:flex;flex-direction:column}
 .has-proof .brief-content{order:1}
 .has-proof .brief-proof{order:2;padding:14px 16px}
 .brief-proof h3{font-size:18px}
 .brief-proof p{font-size:12px;line-height:1.45;margin-top:8px}
 .company-proof{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px 12px;align-items:center}
 .trust-brand{grid-row:span 2;display:flex;flex-direction:column;padding:8px;margin:0;gap:4px;text-align:center;align-self:stretch;justify-content:center}
 .trust-brand img{width:52px}
 .trust-brand span{font-size:7px}
 .trust-person img{width:38px;height:38px}
 .trust-person{gap:8px}
 .trust-person b{font-size:9px;margin-top:3px}
 .company-proof>p{grid-column:2;margin:0}
 .sense-proof{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center}
 .sense-proof>.trust-project{grid-column:1;grid-row:1;width:88px;height:116px;margin:0}
 .trust-story{grid-column:2;grid-row:1}
 .trust-story .eyebrow{font-size:8px;margin:0 0 6px}
 .trust-story p{margin-top:7px}
 .brief-content:not(.scope-step){padding:20px 16px}
}


/* Larger Q1 photos, with height fitted to the available screen. */
.scope-step{--quiz-photo-width:105px;--quiz-photo-height:min(103px,max(48px,calc((100svh - 310px)/5)))}
.scope-step .option.option-photo{grid-template-columns:18px var(--quiz-photo-width) minmax(0,1fr);min-height:calc(var(--quiz-photo-height) + 4px)}
.scope-step .option.option-photo img{width:var(--quiz-photo-width)!important;height:var(--quiz-photo-height)!important}
@media(max-width:768px){
 .scope-step{--quiz-photo-width:91px;--quiz-photo-height:min(91px,max(48px,calc((100svh - 257px)/5)))}
 .scope-step .option.option-photo{grid-template-columns:16px var(--quiz-photo-width) minmax(0,1fr)}
}
@media(max-width:768px) and (max-height:600px){
 .scope-step{--quiz-photo-width:78px;--quiz-photo-height:min(78px,max(48px,calc((100svh - 250px)/5)))}
}