/* Duoco Studio brief form. Brand: green #152120 / ivory #eeebe3, Logo Green headings, one tan accent run, Label Green eyebrows. */
:root{--green:#152120;--logo:#192e2c;--ivory:#eeebe3;--card:#fbfaf7;--tan:#e5c496;--accent:#c98a4b;--label:#7e8270;--brown:#605b54;--ink:#22201d;
  --rule:#d9d4c8;--rule2:#c9c2b3;--bad:#a33b2c;--badbg:#f7e4df;--warn:#8a5a14;--warnbg:#f6ead2;--ok:#3f6b4e;--focus:#2d6cdf}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ivory);color:var(--ink);font:16px/1.55 "Gill Sans","Gill Sans MT",Calibri,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--logo)}
h1{font:400 clamp(34px,5vw,52px)/1.08 Georgia,"Times New Roman",serif;color:var(--logo);margin:0 0 14px;letter-spacing:-.01em}
h1 em{color:var(--accent);font-style:italic}
.eb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin:0 0 10px}
.lede{font-size:18px;color:var(--brown);max-width:640px;margin:0 0 8px}
.muted{color:var(--brown)} .small{font-size:14px}
.sr,.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{left:-9999px}

.bar{background:var(--green);padding:14px 24px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{display:block;height:28px;width:auto}
.brand span{color:#a0a19a;font-size:14px;letter-spacing:.18em;text-transform:uppercase;padding-top:3px}

main{max-width:1080px;margin:0 auto;padding:48px 24px 120px}
.intro{margin-bottom:32px}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.type{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px 20px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.type:hover{border-color:var(--logo);transform:translateY(-1px)}
.type:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tname{font:400 22px/1.2 Georgia,serif;color:var(--logo)}
.tblurb{color:var(--brown);font-size:15px;flex:1}
.tlead{font-size:13px;color:var(--label);letter-spacing:.02em;margin-top:6px}
.tlead b{color:var(--accent);font-weight:600}
.foot{margin-top:28px}

.formtop{margin-bottom:28px}
.back{display:inline-block;font-size:14px;color:var(--brown);text-decoration:none;margin-bottom:22px}
.back:hover{color:var(--logo)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start}
fieldset{border:0;margin:0 0 18px;padding:24px 24px 8px;background:var(--card);border:1px solid var(--rule);border-radius:12px;scroll-margin-top:20px}
legend{font:400 22px/1 Georgia,serif;color:var(--logo);padding:0;float:left;width:100%;margin-bottom:18px}
legend+*{clear:both}
.field{margin-bottom:22px}
.lab{display:block;font-weight:600;color:var(--logo);margin-bottom:6px}
.opt{font-weight:400;color:var(--label);font-size:13px;margin-left:4px}
.help{margin:-2px 0 8px;font-size:14px;color:var(--brown)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=url],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--rule2);border-radius:8px;padding:11px 12px;min-height:46px}
textarea{resize:vertical;line-height:1.5}
.note{margin:8px 0 0;font-size:14px;color:var(--ok)}
.note:empty{display:none}
.gap{margin-top:10px}
.fee{margin-top:10px;background:var(--warnbg);border-radius:8px;padding:10px 12px}
.fee p{margin:0 0 8px;color:var(--warn);font-size:14px}
.dt{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--logo);box-shadow:0 0 0 3px rgba(45,108,223,.25)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts.col{flex-direction:column;align-items:stretch}
.pill{position:relative;display:inline-flex;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill span{display:block;border:1px solid var(--rule2);background:#fff;border-radius:8px;padding:10px 14px;font-size:15px;line-height:1.3;transition:background .12s,border-color .12s}
.opts.col .pill span{padding:11px 14px 11px 40px;position:relative;width:100%}
.opts.col .pill span::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-8px;border-radius:50%;border:1.5px solid var(--rule2);background:#fff}
.pill input:checked+span{background:var(--green);border-color:var(--green);color:#eeebe3}
.opts.col .pill input:checked+span::before{border-color:var(--tan);background:var(--tan);box-shadow:inset 0 0 0 3px var(--green)}
.pill input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.pill:hover span{border-color:var(--logo)}
.more{margin-top:10px;padding-left:14px;border-left:2px solid var(--tan)}
.drop{border:1.5px dashed var(--rule2);border-radius:10px;padding:16px;background:#fff}
.drop.over{border-color:var(--logo);background:#f3f1ea}
.dropbtn{display:inline-block;background:var(--logo);color:#eeebe3;border-radius:8px;padding:9px 16px;cursor:pointer;font-size:15px}
.drop input:focus-visible+.dropbtn{outline:3px solid var(--focus);outline-offset:2px}
.files{list-style:none;margin:14px 0 0;padding:0}
.files li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #eee9de;font-size:14px}
.fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmeta{color:var(--label);white-space:nowrap}
.ferr .fmeta{color:var(--bad)}
.prog{display:inline-block;width:90px;height:6px;background:#ece8de;border-radius:3px;overflow:hidden;vertical-align:middle}
.prog i{display:block;height:100%;background:var(--logo);transition:width .3s}
.x{border:0;background:none;font-size:20px;line-height:1;color:var(--brown);cursor:pointer;padding:2px 6px;border-radius:4px}
.x:hover{color:var(--bad)}
.tick{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15px}
.tick input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green);flex:none}
.err{color:var(--bad);font-size:14px;margin:6px 0 0}
.err:empty{display:none}
.err.big{font-size:15px;margin-top:12px}
.warn{background:var(--warnbg);color:var(--warn);font-size:14px;border-radius:8px;padding:9px 12px;margin:10px 0 0}
.warn:empty{display:none}
.field.bad input:not([type=radio]):not([type=checkbox]),.field.bad select,.field.bad textarea,.field.bad .drop{border-color:var(--bad)}
.field.bad .pill span{border-color:#d9a79e}

.sendrow{display:flex;align-items:center;gap:18px;margin-top:8px}
.send{font:inherit;font-size:17px;border:0;border-radius:10px;padding:14px 26px;background:#8f958b;color:#fff;cursor:pointer;min-height:50px}
.send.ready{background:var(--green);color:var(--tan)}
.send:disabled{opacity:.6;cursor:progress}
.send:focus-visible,.link:focus-visible,.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.link{background:none;border:0;font:inherit;color:var(--brown);text-decoration:underline;cursor:pointer}
.btn{display:inline-block;margin-top:14px;background:var(--green);color:var(--tan);text-decoration:none;border-radius:10px;padding:13px 24px}

.side{position:sticky;top:24px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px}
.side ol{list-style:none;margin:0 0 12px;padding:0}
.side li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #eee9de;font-size:15px}
.side li:first-child{border-top:0}
.side li a{text-decoration:none;color:var(--logo)}
.side li span{color:var(--bad);font-size:13px;white-space:nowrap}
.side li.ok span{color:var(--ok)}
.side li.ok a{color:var(--brown)}
.side p{margin:6px 0 0}
.mbar{display:none}
.done{max-width:640px;padding-top:30px}

@media (max-width:860px){
  main{padding:28px 16px 110px}
  .layout{grid-template-columns:1fr}
  .side{display:none}
  fieldset{padding:20px 16px 4px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border-top:1px solid var(--rule);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:10}
  .mbar span{font-size:14px;color:var(--brown)}
  .mbar .send{padding:12px 20px;font-size:16px}
  .sendrow .send{display:none}
}
.order{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px 22px;margin:22px 0 4px}
.order h2{font:400 22px/1.2 Georgia,serif;color:var(--logo);margin:0 0 12px}
.order table{width:100%;border-collapse:collapse;font-size:16px}
.order td{padding:8px 0;border-top:1px solid #eee9de;vertical-align:top}
.order tr:first-child td{border-top:0}
.order td:last-child{text-align:right;white-space:nowrap;padding-left:16px;font-variant-numeric:tabular-nums}
.order tr.sum td{border-top:1px solid var(--rule2)}
.order tr.total td{font-weight:700;color:var(--logo);border-top:1px solid var(--rule2);font-size:17px}
.order p{margin:12px 0 0}
.pkg .pill span b{font-weight:600}
.pkg .pill span small{display:block;font-size:14px;opacity:.8;margin-top:2px}