:root{
  --cream:#f3f4ee;--bone:#f8f8f8;--ink:#231f20;--head:#383435;--gray:#9a9a9a;--muted:#6b6768;
  --cobalt:#245dc5;--peach:#ffc6a6;--red:#f04736;--marigold:#feee71;--terra:#b45e42;
  --sans:"Inter","Neue Haas Grotesk","Söhne",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4","Times Now","Tiempos",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.3;font-feature-settings:"liga"}
b,strong,h1,h2,h3,h4,th,label,button{font-weight:400}
a{color:var(--cobalt);text-underline-offset:3px;text-decoration-thickness:1px}
img{max-width:100%;display:block}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
@media (max-width:700px){.wrap{padding:0 20px}body{font-size:17px}}
/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 19px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:44px;height:44px}
.brand span{font-family:var(--serif);font-weight:300;font-size:29px;line-height:1;letter-spacing:-.01em}
.nav{display:flex;gap:21px;align-items:center;font-size:16px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--cobalt);text-decoration:underline}
@media (max-width:700px){.brand span{font-size:22px}.brand img{width:36px;height:36px}.nav{gap:12px;font-size:15px}.nav .opt{display:none}}
.rule{border:0;border-top:1px solid var(--ink);margin:0}
footer{margin-top:72px;padding:20px 0 43px;font-size:16px;color:var(--muted);display:flex;gap:21px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--ink)}
main{min-height:60vh}
/* type */
.display{font-size:clamp(46px,7vw,99px);line-height:.85;letter-spacing:-.025em;color:var(--head);margin:0}
.h-lg{font-size:clamp(40px,5vw,72px);line-height:.88;letter-spacing:-.02em;color:var(--head);margin:0}
.h{font-size:clamp(32px,3.6vw,47px);line-height:.94;letter-spacing:-.015em;color:var(--head);margin:0}
.h-sm{font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.01em;margin:0}
.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
.sub{font-size:clamp(22px,2vw,29px);line-height:1.15}
.lead{font-size:clamp(19px,1.7vw,22px);line-height:1.3}
.cap{font-size:16px;line-height:1.3}
.muted{color:var(--muted)}
.eyebrow{font-size:16px;color:var(--cobalt);margin:0 0 10px}
/* actions */
.oval{display:inline-block;font:inherit;font-size:clamp(26px,2.8vw,38px);line-height:.94;letter-spacing:-.01em;color:var(--cobalt);background:transparent;border:2px solid var(--cobalt);border-radius:81px;padding:18px 58px;text-decoration:none;cursor:pointer;text-align:center}
.oval:hover{background:rgba(36,93,197,.06)}
.oval:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}
.btn{display:inline-block;font:inherit;font-size:17px;line-height:1.1;color:var(--cobalt);background:transparent;border:1.5px solid var(--cobalt);border-radius:50px;padding:10px 21px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:rgba(36,93,197,.06)}
.btn.quiet{border-color:var(--ink);color:var(--ink)}
.btn.warn{border-color:var(--red);color:var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link{font:inherit;color:var(--cobalt);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* forms */
.field{display:grid;gap:6px;margin:0 0 19px}
.field>span:first-child,.legend{font-size:16px;color:var(--ink)}
.field small,.hint{font-size:15px;color:var(--muted);line-height:1.3}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input:not([type]),textarea,select{font:inherit;font-size:19px;color:var(--ink);background:var(--bone);border:1px solid var(--ink);border-radius:0;padding:12px 14px;width:100%}
textarea{resize:vertical;min-height:90px}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--red);border-width:2px}
.err{color:#b8281a;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;border:1px solid var(--ink);padding:8px 14px;font-size:16px;line-height:1.1;cursor:pointer;background:transparent}
.chip input:checked+span{border-color:var(--cobalt);color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt);background:rgba(36,93,197,.06)}
.chip input:focus-visible+span{outline:2px solid var(--marigold);outline-offset:2px}
.tag{display:inline-block;border:1px solid currentColor;padding:3px 8px;font-size:14px;line-height:1.15;border-radius:0}
.tag.cobalt{color:var(--cobalt)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.callout{border:1.5px solid var(--terra);padding:16px 20px}
.callout.red{border-color:var(--red)}
.callout.cobalt{border-color:var(--cobalt)}
.callout.peach{border-color:var(--peach);border-width:2px}
/* ---------- builder (first screen) ---------- */
.builder{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:58px;padding:21px 0 60px;align-items:start}
@media (max-width:960px){.builder{grid-template-columns:1fr;gap:40px}}
.builder h1{margin-bottom:20px}
.steps{display:flex;gap:6px;margin:0 0 21px;padding:0;list-style:none;flex-wrap:wrap}
.steps li{font-size:15px;border:1px solid var(--gray);color:var(--muted);padding:5px 10px}
.steps li[aria-current=step]{border-color:var(--cobalt);color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt)}
.steps li.done{border-color:var(--ink);color:var(--ink)}
.steps button{all:unset;cursor:pointer}
fieldset.step{border:0;padding:0;margin:0;min-width:0}
fieldset.step legend{padding:0;margin:0 0 15px}
.js fieldset.step{display:none}
.js fieldset.step.on{display:block}
.stepnav{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.pieces .chip span{display:block;padding:12px 14px;font-size:17px}
.pieces .chip small{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 19px}
@media (max-width:560px){.two-col{grid-template-columns:1fr}}
.budget-row{display:flex;gap:14px;align-items:center}
.budget-row input{max-width:170px}
.preview-col{position:sticky;top:20px}
@media (max-width:960px){.preview-col{position:static}}
.preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
/* brief card — exactly as on the board */
.brief{background:var(--bone);border-radius:10px;padding:20px;display:grid;gap:12px;color:var(--ink);text-decoration:none;position:relative}
a.brief:hover{outline:1.5px solid var(--cobalt)}
.brief .kind{font-size:15px;color:var(--cobalt)}
.brief .title{font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.01em;margin:0;color:var(--head);overflow-wrap:anywhere}
.brief .purpose{margin:0;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.brief dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;margin:6px 0 0;border-top:1px solid var(--ink);padding-top:12px}
.brief dt{font-size:13px;color:var(--muted);margin:0}
.brief dd{margin:2px 0 0;font-size:17px;line-height:1.15;overflow-wrap:break-word}
@media (max-width:560px){.brief dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brief .foot{display:flex;justify-content:space-between;gap:10px;font-size:15px;color:var(--muted);flex-wrap:wrap}
.brief.big .title{font-size:clamp(34px,3.6vw,47px);line-height:.94}
.brief .stamp{position:absolute;top:14px;right:14px;font-size:13px;color:var(--terra);border:1px solid var(--terra);padding:2px 7px}
.brief .empty{color:var(--gray)}
.guide{margin-top:15px;font-size:16px;line-height:1.35}
.guide .range{color:var(--cobalt)}
.reviewbox{display:grid;gap:15px}
/* sections */
section.band{padding:60px 0;border-top:1px solid var(--ink)}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:21px;margin-top:21px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:30px}}
.art{border-radius:10px;overflow:hidden;background:var(--bone)}
.art img{width:100%;height:auto}
.people{display:flex;flex-wrap:wrap;gap:21px;margin-top:20px}
.person{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none}
.person img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.person:hover span{color:var(--cobalt)}
/* board */
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:end;margin:21px 0}
.filters label{display:grid;gap:5px;font-size:15px}
.filters select{font-size:17px;padding:9px 12px;width:auto;min-width:170px}
.count{font-size:16px;color:var(--muted)}
/* illustrators */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.gallery figure{margin:0}
.gallery img{border-radius:10px;width:100%;aspect-ratio:1;object-fit:cover;background:var(--bone)}
.gallery figcaption{font-size:15px;color:var(--muted);margin-top:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:21px}
.card{display:grid;gap:8px;color:var(--ink);text-decoration:none}
.card img{border-radius:10px;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bone)}
.card:hover .name{color:var(--cobalt)}
.card .name{font-size:22px;line-height:1.15}
/* project page */
.panel{border:1.5px solid var(--cobalt);border-radius:10px;padding:20px;display:grid;gap:12px;margin-bottom:21px}
.panel h2{margin:0}
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.prop{background:var(--bone);border-radius:10px;padding:20px;display:grid;gap:10px;align-content:start}
.prop.short{outline:1.5px solid var(--marigold)}
.prop .price{font-size:34px;line-height:1;letter-spacing:-.01em;color:var(--head)}
.prop .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prop .thumbs img{aspect-ratio:1;object-fit:cover;border-radius:6px;width:100%}
.prop dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:16px}
.prop dt{color:var(--muted)}.prop dd{margin:0}
.sketch{position:relative;display:inline-block;max-width:100%;border-radius:10px;overflow:hidden;background:var(--bone)}
.sketch img{max-height:70vh;width:auto;max-width:100%}
.sketch.pinnable{cursor:crosshair}
.pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--cream);border:2px solid var(--red);color:var(--ink);font-size:13px;line-height:22px;text-align:center;pointer-events:none}
.pins{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px;font-size:16px}
.pins li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:start}
.pins .n{width:22px;height:22px;border-radius:50%;border:2px solid var(--red);font-size:12px;line-height:18px;text-align:center}
.pins input{font-size:16px;padding:6px 8px}
.round{font-size:15px;color:var(--cobalt)}
.thread .note{border-left:2px solid var(--gray);padding:3px 0 3px 12px;margin:10px 0;font-size:17px}
.thread .note.you{border-color:var(--cobalt)}
.stars{display:flex;gap:6px}
.stars .chip span{min-width:42px;text-align:center}
.wm{position:relative}
/* kit overrides: single weight, outlined actions, print-flat */
body .kit{max-width:1320px}
body .kit h1{font-size:clamp(34px,4vw,60px);line-height:.92;letter-spacing:-.02em;color:var(--head);font-weight:400;margin:6px 0 10px}
body .kit h2{font-size:clamp(24px,2.2vw,29px);line-height:1.15;font-weight:400;margin:30px 0 12px}
body .kit label,body .kit button,body .kit .kit-btn,body .kit .pill,body .kit .timeline li.now,body .kit strong{font-weight:400}
body .kit .muted{opacity:1;color:var(--muted)}
body .kit button,body .kit .kit-btn{border:1.5px solid var(--cobalt);color:var(--cobalt);border-radius:50px;padding:10px 21px;background:transparent}
body .kit button.primary,body .kit .kit-btn.primary{background:transparent;color:var(--cobalt);border:2px solid var(--cobalt)}
body .kit input,body .kit textarea,body .kit select{border:1px solid var(--ink);border-radius:0;background:var(--bone)}
body .kit .kit-card{border:0;background:var(--bone);border-radius:10px;padding:20px}
body .kit .kit-card:hover{outline:1.5px solid var(--cobalt)}
body .kit .pill{border-radius:0;font-size:14px;color:var(--cobalt)}
body .kit .notice{border:1.5px solid var(--terra);border-radius:0}
body .kit .timeline li .dot{border-color:var(--cobalt)}
body .kit .timeline li.done .dot,body .kit .timeline li.now .dot{background:var(--cobalt)}
body .kit .timeline li.now{color:var(--cobalt)}
body .kit .two{gap:43px}
body .kit .two>div:first-child{display:flex;flex-direction:column;gap:6px}
body .kit .two>div:first-child>.ic-action{order:-1}
body .kit .msg.business{border-color:var(--cobalt)}
body .kit nav.muted{font-size:16px}
body .kit nav.muted button{border:0;padding:0;color:var(--cobalt)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* project page inside the customer area */
body .kit .brief dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
body .kit .brief dt{opacity:1}
@media (max-width:560px){body .kit .brief dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
body .kit button.link{border:0;padding:0;border-radius:0;color:var(--cobalt)}
body .kit .panel h2{margin:0}
body .kit .prop dl{grid-template-columns:auto 1fr;gap:3px 10px}
body .kit .oval{border:2px solid var(--cobalt);border-radius:81px}