/* Project 10: original variant 4 with the exact client-approved copy. */
.project10 .stage{height:640px;margin-top:25px;gap:40px}
.project10 .copy-new{padding-top:71px}
.project10 .stage h1{font-size:55px;line-height:1.08;letter-spacing:-2.9px;font-weight:800;margin:24px 0 29px;white-space:nowrap}
.project10 .new-lead{font-size:16px;line-height:1.8;max-width:600px;margin:0}
.project10 .new-actions{margin-top:28px;gap:25px}
.project10 .new-note{font-size:10px;margin-top:14px}
.project10 .review-strip>span{font-size:7px;font-weight:400;letter-spacing:1.2px;opacity:.6}
@media(max-width:1200px){.project10 .stage{height:625px;gap:30px}.project10 .copy-new{padding-top:82px}.project10 .stage h1{font-size:46px;letter-spacing:-2.7px}.project10 .new-lead{font-size:14px;max-width:424px}.project10 .new-actions{gap:19px}}
@media(max-width:900px){.project10 .stage{height:620px;gap:20px}.project10 .copy-new{padding-top:80px}.project10 .stage h1{font-size:34px;letter-spacing:-1.9px}.project10 .new-lead{font-size:13px;max-width:330px}.project10 .new-actions{gap:14px}.project10 .new-cta{font-size:11px;gap:19px}.project10 .new-secondary{font-size:10px}.project10 .new-note{font-size:9px;line-height:1.7;max-width:280px}}
@media(max-width:650px){.project10 .stage{height:auto;display:flex;gap:26px;margin-top:22px}.project10 .copy-new{padding-top:12px}.project10 .stage h1{font-size:clamp(32px,9.7vw,43px);line-height:1.12;letter-spacing:-1.7px;margin:24px 0}.project10 .new-lead{font-size:14px;line-height:1.8;max-width:100%}.project10 .new-actions{gap:15px;margin-top:25px;flex-wrap:wrap}.project10 .new-cta{font-size:11px;height:58px;gap:20px}.project10 .new-secondary{font-size:10px}.project10 .new-note{font-size:9px;max-width:100%;margin-top:12px}.project10 .visual4{height:450px;margin-top:0}.project10 .review-strip>span{display:none}}
@media(max-width:359px){.project10 .stage h1{font-size:clamp(28px,9.6vw,34px);letter-spacing:-1.4px}.project10 .new-lead{font-size:13px}}

.project10 .warranty-period{white-space:nowrap}
@media(max-width:650px){.project10 .stage h1{white-space:normal}}

.project10 .new-note{max-width:440px;line-height:1.8}
@media(max-width:900px){.project10 .new-kicker{font-size:8px;letter-spacing:1px;line-height:1.7}.project10 .new-actions{flex-wrap:wrap}}
@media(max-width:650px){.project10 .new-kicker{font-size:7px;letter-spacing:.7px}.project10 .stage h1{font-size:clamp(27px,8.5vw,37px);letter-spacing:-1.5px}.project10 .new-cta{gap:18px}.project10 .new-note{max-width:100%}}

/* Compact hero: height follows the content, not the viewport. */
.project10 .stage{height:auto;min-height:530px}
.project10 .copy-new{padding-top:100px;padding-bottom:20px}
.project10 .stage h1{margin-bottom:9px}
.project10 .new-actions{margin-top:15px}
.project10 .new-note{margin:14px 0 0}
.project10 .new-proof{margin-top:16px}
.project10 .new-footer{height:40px}
.project10 .visual4{height:auto}
.project10 .orbit-one{height:calc(100% - 70px)}
.project10 .orbit-two{height:calc(100% - 25px)}
.project10 .bottom-card{bottom:72px}
@media(max-width:1200px){.project10 .copy-new{padding-top:112px}}
@media(max-width:900px){.project10 .stage{min-height:0}.project10 .copy-new{padding-top:48px}.project10 .bottom-card{bottom:110px}}
@media(max-width:650px){
 .project10 .stage{min-height:0}
 .project10 .copy-new{padding-top:12px;padding-bottom:0}
 .project10 .stage h1{margin-bottom:9px}
 .project10 .new-actions{margin-top:12px}
 .project10 .new-note{margin-top:12px}
 .project10 .visual4{height:450px}
 .project10 .orbit-one,.project10 .orbit-two{height:425px}
 .project10 .bottom-card{bottom:55px}
 .project10 .new-footer{height:54px}
}
@media(max-width:359px){.project10 .bottom-card{width:190px;padding:14px;gap:12px}.project10 .visual4 .round-badge{width:80px;height:80px}}
/* Keep the floating caption clear of the rotated badge on narrow canvases. */
@media(min-width:651px) and (max-width:800px){.project10 .bottom-card{bottom:150px}}
@media(min-width:360px) and (max-width:389px){.project10 .bottom-card{width:calc(100% - 125px)}}
@media(max-width:359px){.project10 .bottom-card{width:180px}}

/* Calmer hierarchy: one note, a lighter heading and a quieter photo caption. */
.project10 .stage{min-height:0}
.project10 .copy-new{padding-top:80px}
.project10 .stage h1{font-size:52.25px;line-height:1.06;margin-bottom:4px}
.project10 .new-note{max-width:100%;margin-top:14px}
.project10 .note-short{display:none}
.project10 .bottom-card{width:284.4px;padding:20.7px 23.4px;gap:14.4px}
.project10 .bottom-card strong{font-size:18.9px}
.project10 .bottom-card small{font-size:8.1px;margin-top:8.1px}
.project10 .bottom-card .tiny-plus{font-size:31.5px}
@media(max-width:1200px){.project10 .copy-new{padding-top:92px}.project10 .stage h1{font-size:43.7px}}
@media(max-width:900px){.project10 .copy-new{padding-top:28px}.project10 .stage h1{font-size:34px}.project10 .note-full{display:none}.project10 .note-short{display:inline}}
@media(max-width:650px){
 .project10 .copy-new{padding-top:0}
 .project10 .stage h1{font-size:clamp(27px,8.5vw,37px);line-height:1.12;margin-bottom:4px}
 .project10 .bottom-card{width:199.8px;padding:14.4px;gap:14.4px}
 .project10 .bottom-card strong{font-size:15.3px}
 .project10 .bottom-card small{font-size:7.2px}
 .project10 .bottom-card .tiny-plus{font-size:22.5px}
 /* Place the unchanged photo after the benefits in document flow. */
 .project10 main{display:flex;flex-direction:column}
 .project10 .stage{display:contents}
 .project10 .copy-new{order:0;margin-top:22px}
 .project10 .new-proof{order:1;margin-top:36px}
 .project10 .visual4{order:2;margin-top:26px;flex-shrink:0}
}
@media(max-width:359px){.project10 .stage h1{font-size:clamp(28px,9.6vw,34px);letter-spacing:-1.4px}.project10 .bottom-card{width:162px;padding:12.6px;gap:10.8px}}
@media(min-width:360px) and (max-width:389px){.project10 .bottom-card{width:calc((100% - 125px)*.9)}}

@media(min-width:901px) and (max-width:1200px){.project10 .bottom-card{width:247.5px;padding:16.2px}.project10 .bottom-card strong{font-size:16.2px}}
@media(min-width:651px) and (max-width:900px){.project10 .bottom-card{width:216px;padding:16.2px;gap:14.4px}.project10 .bottom-card strong{font-size:15.3px}}
@media(min-width:651px) and (max-width:800px){.project10 .bottom-card{bottom:140px}}
@media(max-width:650px){.project10 .bottom-card{padding:14.4px 12.6px;gap:12px}}

@media(max-width:650px){.project10 .visual4{overflow:clip;overflow-clip-margin:15px}}

@media(min-width:651px) and (max-width:900px){.project10 .bottom-card{padding:16.2px 13.5px;gap:12px}}
@media(min-width:390px) and (max-width:650px){.project10 .bottom-card{padding:14.4px 10px;gap:10px}}

/* Client benefits: retain the card treatment, emphasize only the saving. */
.project10 .service>div{flex:1;min-width:0}
.project10 .service h3{font-size:15px;font-weight:800;line-height:1.2}
.project10 .service p{line-height:1.2}
.project10 .benefit-accent{color:#d74b23;white-space:nowrap}
.project10 .service-no{flex-shrink:0}
@media(min-width:901px) and (max-width:1200px){.project10 .service h3{font-size:13px}}

@media(max-width:359px){.project10 .service p{font-size:10px}}