/* Each request form and planner carries the visual language of its demo. */
.demo-form{min-width:0}.demo-form :is(input,select,textarea){max-width:100%}.demo-form :is(input,select,textarea):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.project-planner .feature-workspace{align-items:start}.project-planner .feature-controls{min-width:0}
.identity-01 .request-section{border-top:2px solid}.identity-01 .demo-form{border:0;border-top:5px solid var(--accent);padding:28px 0}.identity-01 .project-planner>summary{border-width:2px 0}
.identity-02 .demo-form{border:4px solid;box-shadow:10px 10px 0 var(--accent)}.identity-02 .project-planner>summary{border:3px solid;box-shadow:6px 6px 0 var(--accent)}
.identity-04 .request-section{border-top:8px solid var(--accent)}.identity-04 .demo-form{border:3px solid var(--accent)}.identity-04 .form-note{color:var(--accent);font-weight:700}.identity-04 .project-planner>summary{border-left:9px solid var(--accent)}
.identity-05 .demo-form{border:5px double;padding:34px}.identity-05 .project-planner>summary{border:4px double}
.identity-06 .demo-form{border:2px solid;border-radius:28px;box-shadow:7px 7px 0 var(--accent)}.identity-06 .demo-form :is(input,select,textarea){border-radius:12px}.identity-06 .project-planner>summary{border-radius:24px;box-shadow:5px 5px 0 var(--accent)}
.identity-07 .request-copy h2{font-style:italic}.identity-07 .demo-form{border:0;border-top:1px solid;padding:25px 0}.identity-07 .project-planner>summary{border-width:1px 0}
.identity-08 .demo-form{border:0;border-left:1px solid;padding:0 0 0 30px}.identity-08 .project-planner>summary{border-width:1px 0}
.identity-09 .demo-form{border:4px solid;box-shadow:10px 10px 0 var(--accent)}.identity-09 .project-planner>summary{border:4px solid;box-shadow:7px 7px 0 var(--accent)}
.identity-12 .demo-form{border:2px dashed var(--accent);outline:1px solid var(--ink);outline-offset:7px}.identity-12 .project-planner>summary{border-style:dashed}
.identity-13 .request-section{border-top:5px double}.identity-13 .demo-form{border:5px double;padding:32px}.identity-13 .form-note{border-bottom:4px double;letter-spacing:.14em}.identity-13 .project-planner>summary{border-block:4px double;border-inline:0}
.identity-14 .demo-form{border-radius:55px 8px 55px 8px;border:2px solid}.identity-14 .project-planner>summary{border-radius:38px 4px 38px 4px}
.identity-17 .demo-form{border:0;border-radius:28px;box-shadow:0 12px 35px #0002}.identity-17 .demo-form :is(input,select,textarea){border-radius:12px}.identity-17 .project-planner>summary{border-radius:22px}
.identity-18 .demo-form{border:5px double}.identity-18 .form-note{font-weight:700;letter-spacing:.15em}.identity-18 .project-planner>summary{border-top:6px double var(--accent)}
.identity-19 .demo-form{border:1px solid;border-radius:65px 65px 0 0;padding:42px 30px}.identity-19 .request-copy h2{font-style:italic}.identity-19 .project-planner>summary{border-radius:35px 35px 0 0}
.identity-21 .demo-form{border:3px solid;box-shadow:9px 9px 0 var(--accent);border-radius:25px 0 25px 0}.identity-21 .project-planner>summary{border:3px solid;box-shadow:7px 7px 0 var(--accent)}
.identity-22 .demo-form{border:5px double;box-shadow:6px 6px 0 var(--accent)}.identity-22 .project-planner>summary{border:4px double}
.identity-23 .demo-form{border:1px solid var(--accent);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 22%,transparent)}.identity-23 .form-note{color:var(--accent)}.identity-23 .project-planner>summary{border-color:var(--accent)}
.identity-24 .demo-form{border:0;border-top:1px solid;padding:25px 0}.identity-24 .project-planner>summary{border-width:1px 0}
.identity-25 .demo-form{border:2px solid;background-image:repeating-linear-gradient(transparent 0 31px,#70997515 31px 32px)}.identity-25 .form-note{border-left:3px solid var(--accent);padding-left:12px}.identity-25 .project-planner>summary{border-left:4px solid var(--accent)}
.identity-28 .demo-form{border:1px solid;box-shadow:7px 7px 0 var(--accent)}.identity-28 .project-planner>summary{box-shadow:5px 5px 0 var(--accent)}
@media(max-width:700px){.identity-08 .demo-form{padding-left:18px}.identity-05 .demo-form,.identity-13 .demo-form{padding:24px}.identity-19 .demo-form{padding:35px 22px}.identity-02 .demo-form,.identity-09 .demo-form,.identity-21 .demo-form,.identity-22 .demo-form,.identity-28 .demo-form{box-shadow:5px 5px 0 var(--accent)}}
@media(forced-colors:active){.demo-form,.project-planner>summary{border:2px solid CanvasText;box-shadow:none}}
/* Service actions follow the same visual vocabulary as their neighboring cards. */
.identity-13 .work-list article{border-bottom:3px double}.identity-13 .work-num{font-weight:700;letter-spacing:.15em}
.identity-06 .service-pick{border:1px solid!important;border-radius:30px;padding:10px 16px}
.identity-02 .service-pick,.identity-09 .service-pick,.identity-21 .service-pick{border:2px solid!important;padding:10px 12px}
.identity-12 .service-pick{border:1px dashed!important;padding:10px 12px}
.identity-18 .service-pick{border:2px solid!important;padding:10px 12px}
.identity-23 .service-pick{border:1px solid var(--accent)!important;padding:10px 12px}
body.sample:is(.identity-02,.identity-06,.identity-09,.identity-12,.identity-18,.identity-21,.identity-23) .service-pick{border-bottom-width:1px!important;border-bottom-style:solid!important}
/* The ledger demo keeps its calm palette without distracting red rules. */
body.identity-25{background:#f6f1df}
body.identity-25 :is(.hero,.project-guide,.photo-story-step,.project-planner>summary,.form-note){border-left:0}
body.identity-25 :is(.work-num,.guide-number){color:var(--ink)}
body.identity-25 .demo-form{background:#fffae9;background-image:none}
body.identity-25 .form-note{padding-left:0}
body.identity-25 .demo-form :is(input,select,textarea){background:#fffdf5;border:1px solid #779a7e;padding:12px}
/* A sticky photo must fit in the visible viewport, even on short screens. */
@media (min-width:701px) and (prefers-reduced-motion:no-preference){
 body.sample .photo-story-stage{top:clamp(16px,4vh,40px);width:100%;max-width:min(100%,calc(150svh - 120px));max-height:calc(100svh - 80px);justify-self:center}
 body.sample:is(.identity-07,.identity-08,.identity-24) .photo-story-stage{max-width:min(100%,calc(80svh - 64px))}
 body.sample.identity-19 .photo-story-stage{aspect-ratio:3/2}
}
/* Keep request text inside the section and give every form comfortable padding. */
body.sample .request-section{padding-inline:clamp(24px,6vw,100px)}
body.sample .request-copy,body.sample .demo-form{min-width:0}
body.sample .request-copy h2{padding-inline-start:4px;overflow-wrap:break-word}
body.sample .demo-form{padding:clamp(24px,3vw,40px)}