/* Alvora — commission composer: one question at a time on the left, live render stage on the right. */

.composer{position:relative;z-index:4;background:var(--ink);color:var(--on-dark);padding:clamp(100px,15vh,180px) 0 clamp(110px,16vh,190px);border-radius:clamp(22px,3vw,44px) clamp(22px,3vw,44px) 0 0;margin-top:calc(-1 * clamp(22px,3vw,44px))}
.composer-head{max-width:60em;margin-bottom:clamp(50px,9vh,96px)}
.composer-head h2{margin:clamp(18px,3vh,30px) 0 clamp(20px,4vh,34px);font-size:clamp(3rem,8vw,8.6rem);line-height:.9}
.composer-head h2 em{color:var(--rust)}
.composer-head>p:not(.kicker){max-width:32em;font-size:1.08rem;color:rgba(239,233,221,.74)}

.composer-grid{display:grid;gap:clamp(50px,7vh,70px)}
.composer-steps{min-width:0}
.composer-progress{display:flex;align-items:center;gap:18px;margin-bottom:clamp(30px,6vh,56px);font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--sand)}
.composer-progress i{flex:1;max-width:320px;height:1px;background:var(--line-dark)}
.composer-progress b{display:block;height:100%;width:100%;background:var(--rust);transform:scaleX(.1667);transform-origin:left;transition:transform .8s var(--ease)}
.composer-count{font-variant-numeric:tabular-nums}

.step{border:0;margin:0 0 clamp(50px,8vh,80px);padding:0;min-width:0}
html.js .composer .step{display:none;margin-bottom:0}
html.js .composer .step.is-on{display:block}
.step legend{padding:0;margin-bottom:clamp(20px,4vh,34px);font:300 clamp(2.2rem,4.2vw,4.4rem)/1 var(--serif);letter-spacing:-.02em}
.composer input,.composer textarea{width:100%;border:0;border-bottom:1px solid var(--line-dark);border-radius:0;background:transparent;color:var(--ivory);font:400 1.1rem/1.4 var(--serif);padding:10px 0 12px;resize:none;transition:border-color .4s}
.composer .big{font:300 clamp(1.5rem,2.3vw,2.2rem)/1.25 var(--serif);padding:14px 0 18px}
.composer input::placeholder,.composer textarea::placeholder{color:rgba(239,233,221,.3)}
.composer input:focus,.composer textarea:focus{outline:0;border-color:var(--ivory)}
.composer .is-invalid{border-color:var(--rust)!important}
.composer .chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.composer .chips button{padding:11px 17px;border:1px solid var(--line-dark);border-radius:999px;font:500 11px/1 var(--sans);letter-spacing:.08em;color:rgba(239,233,221,.86);transition:background-color .35s var(--ease),color .35s,border-color .35s,transform .35s var(--ease)}
.composer .chips button:hover{border-color:var(--ivory);transform:translateY(-2px)}
.composer .chips button.is-on{background:var(--ivory);border-color:var(--ivory);color:var(--ink)}
.pair{display:grid;gap:0 30px;margin-top:30px}
.pair label{display:block;margin-bottom:22px}
.pair span,.step-start{font:500 10px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)}
@media (min-width:640px){.pair{grid-template-columns:1fr 1fr}}
.step-start{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:10px 12px 10px 16px;border:1px solid var(--rust);border-radius:999px;color:var(--sand)}
.step-start[hidden]{display:none}
.step-start b{font-weight:500;color:var(--ivory);letter-spacing:.12em}
.step-start button{width:22px;height:22px;border-radius:50%;font-size:15px;line-height:1;color:var(--ivory)}

.composer .drop{position:relative;display:grid;place-items:center;min-height:128px;margin-top:8px;padding:22px;border:1px dashed rgba(239,233,221,.3);border-radius:14px;text-align:center;cursor:pointer;overflow:hidden;transition:border-color .4s,background-color .4s}
.composer .drop:hover,.composer .drop.is-over{border-color:var(--rust);background:rgba(196,112,63,.08)}
.composer .drop input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0}
.composer .drop b{display:block;font:400 1.3rem/1.2 var(--serif)}
.composer .drop small{display:block;margin-top:8px;font-size:.8rem;color:var(--on-dark-mute)}
.composer .drop img{max-height:150px;width:auto;border-radius:8px}
.composer .drop.has-file span{display:none}
.composer .drop-clear{margin-top:12px;font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--on-dark-mute)}
.composer .check{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;margin:8px 0 30px;font-size:.92rem;line-height:1.55;color:rgba(239,233,221,.74);cursor:pointer}
.composer .check input{width:20px;height:20px;margin:2px 0 0;padding:0;border:0;accent-color:var(--rust)}
.send{display:flex;flex-wrap:wrap;gap:14px}
.step-nav{display:flex;align-items:center;gap:30px;margin-top:clamp(34px,6vh,54px)}
.step-nav [hidden]{display:none}
html:not(.js) .step-nav,html:not(.js) .composer-progress{display:none}
.composer-status{min-height:1.5em;margin-top:22px;font-size:.92rem;color:var(--sand)}
.composer-status.is-error{color:#e39a6f}

/* ----- stage ----- */
.stage{position:relative;border-radius:clamp(18px,2vw,28px);background:var(--moss);padding:clamp(22px,2.6vw,38px);overflow:hidden}
.stage-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.stage-top .kicker{color:var(--sand)}
.stage-state{display:inline-flex;align-items:center;gap:9px;font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,233,221,.7)}
.stage-state b{font-weight:500}
.stage-state i{width:7px;height:7px;border-radius:50%;background:var(--on-dark-mute)}
.stage-state.is-ready i{background:#7fd18b;box-shadow:0 0 0 0 rgba(127,209,139,.6);animation:pulse 2.2s infinite}
.stage-state.is-off i{background:#e0a44a}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(127,209,139,0)}100%{box-shadow:0 0 0 0 rgba(127,209,139,0)}}
.stage-frame{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#12201a;display:grid;place-items:center}
.stage-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stage-frame p{position:relative;margin-top:36%;font:300 1.15rem/1.2 var(--serif);color:rgba(239,233,221,.5)}
.stage-arch{position:absolute;inset:8% 0 auto;margin:auto;width:46%;height:auto}
.stage-arch path{fill:none;stroke:rgba(205,191,166,.5);stroke-width:1;stroke-dasharray:.02 .02;animation:arch 26s linear infinite}
@keyframes arch{to{stroke-dashoffset:-1}}
.stage-frame.is-working::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(239,233,221,.16) 50%,transparent 70%);background-size:220% 100%;animation:sweep 1.5s linear infinite}
@keyframes sweep{from{background-position:120% 0}to{background-position:-120% 0}}
.stage-frame.is-working .stage-arch path{stroke:var(--rust);animation-duration:5s}
html.rm .stage-arch path,html.rm .stage-frame.is-working::after{animation:none}
.stage-tabs{display:none;gap:8px;margin-top:14px}
.stage-tabs.is-on{display:flex}
.stage-tabs button{padding:9px 14px;border:1px solid var(--line-dark);border-radius:999px;font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.stage-tabs button.is-on{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn-render{width:100%;justify-content:space-between;margin-top:16px;background:var(--rust);color:#fff}
.btn-render::before{background:var(--ivory)}
.btn-render:hover{color:var(--ink)}
.btn-render[disabled]{opacity:.45;cursor:not-allowed}
.btn-render[disabled]::before{display:none}
.btn-render[hidden]{display:none}
.stage-title{margin-top:26px;font:300 clamp(1.4rem,1.9vw,1.9rem)/1.14 var(--serif)}
.stage-list{margin-top:16px;border-top:1px solid var(--line-dark)}
.stage-list div{display:grid;grid-template-columns:minmax(96px,.36fr) 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-dark);font-size:.9rem}
.stage-list dt{font:500 10px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
.stage-list dd{margin:0;color:rgba(239,233,221,.9);overflow-wrap:anywhere}
.stage-list dd.is-empty{color:rgba(239,233,221,.3)}
.stage-fine{margin-top:16px;font-size:.76rem;line-height:1.6;color:rgba(239,233,221,.56)}

.composer-contacts{display:grid;margin-top:clamp(70px,11vh,120px);border-top:1px solid var(--line-dark)}
.composer-contacts a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-dark);font:400 clamp(1.2rem,1.7vw,1.6rem)/1.1 var(--serif);transition:padding .6s var(--ease),color .4s}
.composer-contacts a:hover{padding-inline:12px;color:var(--sand)}
.composer-contacts small{font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mute)}
.composer-fine{margin-top:26px;max-width:64em;font-size:.82rem;line-height:1.65;color:rgba(239,233,221,.56)}
.composer-fine a{text-decoration:underline;text-underline-offset:3px}
.composer+.footer{margin-top:0;border-radius:0;border-top:1px solid var(--line-dark)}

@media (min-width:1000px){
  .composer-grid{grid-template-columns:1.06fr .94fr;gap:clamp(50px,6vw,110px);align-items:start}
  .stage{position:sticky;top:clamp(84px,11vh,120px)}
  .composer-steps{min-height:520px}
  .composer-contacts{grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,3vw,48px);border-top:0}
  .composer-contacts a{flex-direction:column;gap:12px;border-top:1px solid var(--line-dark);border-bottom:0}
  .composer-contacts a:hover{padding-inline:0;padding-top:26px}
}
@media (max-width:480px){.send .btn,.step-nav .btn{width:100%;justify-content:space-between}.step-nav{flex-direction:column-reverse;align-items:stretch;gap:16px}}

/* ----- dropdowns: native selects, so they open as the phone's own picker ----- */
.composer select{width:100%;border:0;border-bottom:1px solid var(--line-dark);border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23efe9dd' stroke-width='1.4'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center;color:var(--ivory);font:400 1.1rem/1.4 var(--serif);padding:10px 30px 12px 0;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .4s}
.composer select.big{font:300 clamp(1.35rem,2vw,1.9rem)/1.25 var(--serif);padding:14px 34px 18px 0}
.composer select:focus{outline:0;border-color:var(--ivory)}
.composer select option{background:#171a17;color:var(--ivory);font:400 16px var(--sans)}
.pick{display:block}
.pick>span,.dims span{display:block;font:500 10px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)}
.place-pick{display:grid;gap:26px 30px}
@media (min-width:640px){.place-pick{grid-template-columns:1fr 1fr}}
.exact{margin-top:26px}
.exact summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.exact summary::-webkit-details-marker{display:none}
.exact summary::after{content:"+";font:300 1.3rem/1 var(--serif);transition:transform .5s var(--ease)}
.exact[open] summary::after{transform:rotate(45deg)}
.dims{display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px;margin-top:22px}
.step-nav [data-prev] span::after{content:none}
.step-nav [data-prev] span::before{content:"←";display:inline-block;margin-right:12px;letter-spacing:0;transition:transform .5s var(--ease)}
.step-nav [data-prev]:hover span::before{transform:translateX(-6px)}

/* ----- final step: email leads, render sits directly under the send buttons ----- */
.pick>span b{font-weight:500;color:var(--rust);margin-left:6px}
.email-note{min-height:1.5em;margin:10px 0 0;font-size:.88rem;color:var(--on-dark-mute)}
.email-note.is-ok{color:#8fd49a}
.email-note.is-bad{color:#e39a6f}
.email-note button{text-decoration:underline;text-underline-offset:3px;color:var(--ivory)}
.step .btn-render{margin-top:14px}
.render-hint{margin-top:12px;font-size:.84rem;color:var(--on-dark-mute)}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.composer-sent{margin-top:clamp(40px,7vh,70px);padding:clamp(28px,4vw,54px);border:1px solid var(--rust);border-radius:clamp(18px,2vw,28px)}
.composer-sent[hidden]{display:none}
.composer-sent h3{margin:16px 0 14px;font:300 clamp(2rem,4vw,4rem)/1 var(--serif)}
.composer-sent em{color:var(--sand)}
.composer-sent p:not(.kicker){color:rgba(239,233,221,.8)}
.composer-sent b{font-weight:500;color:var(--ivory)}
.composer.is-sent .composer-grid{display:none}