/* /web-design-sign-up-info/ (2026-10-15). Loaded only by that page. Colors: navy #0B1F3A, maroon #680000, yellow #F5B800, tan #fbf3e4, light blue #eaf2fb. Input borders #8a817a (3:1). */
body.ws-mod .wsm .su-page{max-width:none;margin:0;padding:clamp(28px,4vw,56px) 0;font-size:1.06rem;line-height:1.65;overflow-x:clip}
body.ws-mod .wsm .su-wrap{width:min(1370px,100% - 40px);margin:0 auto;display:grid;gap:clamp(24px,3.5vw,44px)}
body.ws-mod .wsm .su-box{border:2px solid #680000;border-radius:12px;box-sizing:border-box}
body.ws-mod .wsm .su-box h2{font-family:var(--f-display,'Bricolage Grotesque',sans-serif);font-weight:800;line-height:1.12;font-size:clamp(1.6rem,1.2rem + 1.7vw,2.3rem);margin:0 0 .45em;color:#0B1F3A}
body.ws-mod .wsm .su-lead{font-size:1.12rem;font-weight:600;margin:0 0 1.1em;max-width:70ch;color:#1b1b1b}

/* section 1: steps 3/4, picture 1/4 */
body.ws-mod .wsm .su-info{background:#fdf8ee;padding:clamp(22px,3.2vw,44px)}
body.ws-mod .wsm .su-info-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(22px,3.5vw,48px);align-items:stretch}
body.ws-mod .wsm .su-list{margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
body.ws-mod .wsm .su-step{display:flex;display:flex;gap:14px;align-items:flex-start;margin:0}
body.ws-mod .wsm .su-sn{flex:0 0 36px;height:36px;border-radius:50%;background:#680000;color:#fff;font-family:var(--f-display,sans-serif);font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;margin-top:2px}
body.ws-mod .wsm .su-list b{display:block;font-weight:800;color:#0B1F3A;font-size:1.08rem;line-height:1.3}
body.ws-mod .wsm .su-step>div>span{display:block;font-weight:500;color:#1b1b1b;line-height:1.5}
body.ws-mod .wsm .su-pic{margin:0;align-self:stretch;min-height:320px;position:relative}
body.ws-mod .wsm .su-pic picture{display:block;position:absolute;inset:0}
body.ws-mod .wsm .su-pic img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center 30%;border-radius:12px;border:2px solid #680000;background:#fff}

/* section 2: the form */
body.ws-mod .wsm .su-formbox{background:#eaf2fb;padding:clamp(18px,3.2vw,44px)}
body.ws-mod .wsm .su-formin{background:#fff;border:2px solid #0B1F3A;border-radius:12px;padding:clamp(18px,3vw,38px);box-shadow:0 8px 24px rgba(11,31,58,.12)}
body.ws-mod .wsm .su-form{display:grid;gap:26px}
body.ws-mod .wsm .su-form fieldset{border:0;margin:0;padding:0;min-width:0}
body.ws-mod .wsm .su-group{padding:0 0 24px!important;border-bottom:2px solid #eaf2fb!important}
body.ws-mod .wsm .su-group>legend{font-family:var(--f-display,sans-serif);font-weight:800;font-size:1.3rem;color:#680000;padding:0;margin:0 0 12px;float:left;width:100%}
body.ws-mod .wsm .su-group>legend+*{clear:both}
body.ws-mod .wsm .su-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
body.ws-mod .wsm .su-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.ws-mod .wsm .su-l{display:block;font-weight:800;color:#0B1F3A;margin:0 0 6px;font-size:1rem}
body.ws-mod .wsm .su-opt{font-weight:600;color:#4a4a4a;font-size:.9rem}
body.ws-mod .wsm .su-req{color:#a30000;font-weight:800}
body.ws-mod .wsm .su-hint{margin:0 0 8px;font-size:.95rem;color:#3a3a3a;font-weight:500;line-height:1.5}
body.ws-mod .wsm .su-form input[type=text],body.ws-mod .wsm .su-form input[type=email],body.ws-mod .wsm .su-form input[type=tel],body.ws-mod .wsm .su-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:#111;background:#fff;border:2px solid #8a817a;border-radius:10px;padding:12px 14px;min-height:48px;transition:border-color .15s,box-shadow .15s}
body.ws-mod .wsm .su-form textarea{resize:vertical;line-height:1.55}
body.ws-mod .wsm .su-form input::placeholder,body.ws-mod .wsm .su-form textarea::placeholder{color:#6b6b6b;opacity:1}
body.ws-mod .wsm .su-form input:focus,body.ws-mod .wsm .su-form textarea:focus{outline:none;border-color:#0B1F3A;box-shadow:0 0 0 4px rgba(245,184,0,.55)}
body.ws-mod .wsm .su-form .su-bad{border-color:#a30000!important;background:#fff6f6}
body.ws-mod .wsm .su-count{margin:6px 0 0;font-size:.9rem;font-weight:700;color:#3a3a3a;text-align:right}
body.ws-mod .wsm .su-count.su-over{color:#a30000}

/* colors */
body.ws-mod .wsm .su-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
body.ws-mod .wsm .su-color{background:#f6f9fd;border:2px solid #cfdceb;border-radius:12px;padding:14px}
body.ws-mod .wsm .su-cwrap{display:flex;align-items:center;gap:12px;margin-bottom:8px}
body.ws-mod .wsm .su-color input[type=color]{-webkit-appearance:none;appearance:none;width:64px;height:48px;padding:0;border:2px solid #8a817a;border-radius:10px;background:#fff;cursor:pointer;flex:0 0 64px}
body.ws-mod .wsm .su-color input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
body.ws-mod .wsm .su-color input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
body.ws-mod .wsm .su-color input[type=color]::-moz-color-swatch{border:0;border-radius:6px}
body.ws-mod .wsm .su-color input[type=color]:focus-visible{outline:none;border-color:#0B1F3A;box-shadow:0 0 0 4px rgba(245,184,0,.55)}
body.ws-mod .wsm .su-hex{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:.95rem;color:#0B1F3A;text-transform:uppercase}
body.ws-mod .wsm .su-color .su-hint{margin:0;font-size:.88rem}

/* uploads */
body.ws-mod .wsm fieldset.su-pg{border:2px solid #cfdceb!important;border-radius:12px;padding:16px 18px 18px!important;margin:0 0 16px!important;background:#fbfdff}
body.ws-mod .wsm fieldset.su-pg>legend{font-family:var(--f-display,sans-serif);font-weight:800;font-size:1.1rem;color:#0B1F3A;padding:0 8px}
body.ws-mod .wsm .su-uprow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px}
body.ws-mod .wsm .su-up{min-width:0}
body.ws-mod .wsm .su-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
body.ws-mod .wsm .su-upbtn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 20px;border:2px dashed #680000;border-radius:10px;background:#fff;color:#680000;font-weight:800;font-size:1rem;cursor:pointer;transition:background .15s,transform .15s}
body.ws-mod .wsm .su-upbtn:hover{background:#fdf1f1;transform:translateY(-1px)}
body.ws-mod .wsm .su-file:focus-visible+.su-upbtn{outline:none;box-shadow:0 0 0 4px rgba(245,184,0,.7);border-style:solid}
body.ws-mod .wsm .su-upbtn svg{width:22px;height:22px;flex:0 0 22px}
body.ws-mod .wsm .su-up .su-hint{margin:6px 0 0;font-size:.85rem}
body.ws-mod .wsm .su-files{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
body.ws-mod .wsm .su-files li{font-size:.9rem;font-weight:600;color:#17703d;word-break:break-all;margin:0;display:flex;gap:6px}
body.ws-mod .wsm .su-files li.su-bigfile{color:#a30000}

/* confirm + turnstile + submit */
body.ws-mod .wsm .su-confirm{background:#fff8e1;border:2px solid #F5B800;border-radius:12px;padding:16px 18px}
body.ws-mod .wsm .su-check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font-weight:700;color:#0B1F3A;line-height:1.45;margin:0}
body.ws-mod .wsm .su-check input[type=checkbox]{-webkit-appearance:checkbox!important;appearance:auto!important;opacity:1!important;position:static!important;visibility:visible!important;display:inline-block!important;flex:0 0 28px;width:28px!important;height:28px!important;min-height:0!important;margin:0!important;accent-color:#680000;cursor:pointer;border:0;background:none;box-shadow:none}
body.ws-mod .wsm .su-check input:focus-visible{outline:3px solid #0B1F3A;outline-offset:2px}
body.ws-mod .wsm .su-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.ws-mod .wsm .su-ts{min-height:70px}
body.ws-mod .wsm .su-submitrow{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body.ws-mod .wsm .su-submit{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:16px 40px;border:0;border-radius:14px;background:linear-gradient(180deg,#F8C21F 0%,#F5B800 100%);color:#0B1F3A;font-family:var(--f-display,sans-serif);font-weight:800;font-size:1.35rem;letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 0 #b98700,0 14px 28px rgba(11,31,58,.25);transition:transform .15s,box-shadow .15s,background .15s}
body.ws-mod .wsm .su-submit svg{width:26px;height:26px;transition:transform .2s}
body.ws-mod .wsm .su-submit:hover{background:#D9A000;transform:translateY(-2px);box-shadow:0 8px 0 #9b7000,0 18px 32px rgba(11,31,58,.3)}
body.ws-mod .wsm .su-submit:hover svg{transform:translateX(4px) rotate(-8deg)}
body.ws-mod .wsm .su-submit:active{transform:translateY(4px);box-shadow:0 2px 0 #b98700,0 6px 12px rgba(11,31,58,.25)}
body.ws-mod .wsm .su-submit:focus-visible{outline:4px solid #0B1F3A;outline-offset:3px}
body.ws-mod .wsm .su-submit[disabled]{opacity:.75;cursor:progress;transform:none}
body.ws-mod .wsm .su-spin{display:none;width:22px;height:22px;border:3px solid rgba(11,31,58,.3);border-top-color:#0B1F3A;border-radius:50%;animation:su-rot .8s linear infinite}
body.ws-mod .wsm .su-submit.su-busy .su-spin{display:inline-block}
body.ws-mod .wsm .su-submit.su-busy svg{display:none}
body.ws-mod .wsm .su-secure{margin:0;font-size:.92rem;font-weight:700;color:#17703d}
@keyframes su-rot{to{transform:rotate(360deg)}}
body.ws-mod .wsm .su-banner{border-radius:12px;padding:14px 18px;font-weight:700;margin:0 0 22px;border:2px solid}
body.ws-mod .wsm .su-banner.ok{background:#ecf7ef;border-color:#17703d;color:#0e4f2a}
body.ws-mod .wsm .su-banner.err{background:#fff0f0;border-color:#a30000;color:#7a0000}
body.ws-mod .wsm .su-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:1000px){body.ws-mod .wsm .su-colors{grid-template-columns:repeat(2,minmax(0,1fr))}body.ws-mod .wsm .su-grid3{grid-template-columns:1fr}}
@media (max-width:800px){
 body.ws-mod .wsm .su-info-grid{grid-template-columns:1fr}
 body.ws-mod .wsm .su-pic{min-height:0;max-width:340px;margin:0 auto;width:100%}
 body.ws-mod .wsm .su-pic picture{position:static;display:block}
 body.ws-mod .wsm .su-pic img{height:auto!important;aspect-ratio:2/3}
 body.ws-mod .wsm .su-grid2,body.ws-mod .wsm .su-uprow{grid-template-columns:1fr}
}
@media (max-width:480px){
 body.ws-mod .wsm .su-page{padding:22px 0}
 body.ws-mod .wsm .su-wrap{width:calc(100% - 24px)}
 body.ws-mod .wsm .su-colors{grid-template-columns:1fr}
 body.ws-mod .wsm .su-submit{width:100%;padding:16px 18px;font-size:1.2rem}
 body.ws-mod .wsm .su-formin{padding:16px 14px}
}
@media (prefers-reduced-motion:reduce){body.ws-mod .wsm .su-submit,body.ws-mod .wsm .su-upbtn,body.ws-mod .wsm .su-submit svg{transition:none}body.ws-mod .wsm .su-spin{animation-duration:2s}}
