/* Kit Studio */
.studio{background:var(--bg-section,#f5f3ec);padding-top:clamp(28px,4vw,56px)!important}
.studio-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.studio-stage{position:sticky;top:96px;background:#fff;border:1px solid rgba(12,31,48,.1);border-radius:10px;padding:18px 18px 22px;box-shadow:0 24px 60px rgba(12,31,48,.10)}
.stage-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.view-tog,.seg{display:inline-flex;border:1.5px solid rgba(12,31,48,.18);border-radius:6px;overflow:hidden;background:#fff}
.view-tog button,.seg button{border:0;background:none;padding:9px 16px;font:600 13px/1 var(--font-body,Inter,sans-serif);color:#163551;cursor:pointer;transition:background .2s,color .2s}
.view-tog button.on,.seg button.on{background:#163551;color:#fff}
.kit-shuffle{border:1.5px dashed #163551;background:none;border-radius:6px;padding:9px 14px;font:600 13px/1 var(--font-body,Inter,sans-serif);color:#163551;cursor:pointer}
.kit-shuffle:hover{background:var(--bg-section,#f5f3ec);border-color:#e9b23c}
#kitStage{aspect-ratio:600/760;max-height:74vh;margin:0 auto;transition:transform .17s ease,opacity .17s ease}
#kitStage.flip{transform:scaleX(.04);opacity:.2}
.kit-svg{width:100%;height:100%;display:block;overflow:visible}
.kit-svg *{transition:fill .9s ease,stroke .9s ease,stop-color .9s ease}
.stage-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.stage-actions .btn{flex:1 1 auto;justify-content:center}
.stage-note{margin:12px 2px 0;font-size:12.5px;color:var(--text-secondary,#56677a);line-height:1.5}
.studio-panel{display:grid;gap:14px}
.ctl{background:#fff;border:1px solid rgba(12,31,48,.1);border-radius:10px;padding:16px 18px}
.ctl-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font:700 13px/1 var(--font-body,Inter,sans-serif);color:#0c1f30}
.ctl-h output{font:600 11px/1 var(--font-body,Inter,sans-serif);letter-spacing:.06em;color:var(--text-secondary,#56677a)}
.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.preset{display:flex;align-items:center;gap:4px;padding:9px 10px;border:1.5px solid rgba(12,31,48,.14);border-radius:8px;background:#fff;cursor:pointer;text-align:left;transition:border-color .2s,transform .2s}
.preset:hover{border-color:#e9b23c;transform:translateY(-1px)}
.preset i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);flex:none}
.preset b{margin-left:4px;font:600 11.5px/1.15 var(--font-body,Inter,sans-serif);color:#163551}
.swrow{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(12,31,48,.2);cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}
.sw:hover{transform:scale(1.12)}
.sw.on{box-shadow:0 0 0 3px #e9b23c}
.sw.custom{position:relative;overflow:hidden;background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.sw.custom input{position:absolute;inset:-6px;width:44px;height:44px;opacity:0;cursor:pointer}
.pats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pat-btn{border:1.5px solid rgba(12,31,48,.14);border-radius:8px;background:#f7f8fa;padding:6px 4px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .2s}
.pat-btn:hover{border-color:#e9b23c}.pat-btn.on{border-color:#163551;box-shadow:0 0 0 2px rgba(22,53,81,.15);background:#fff}
.pat-btn .pv{display:block;width:100%;aspect-ratio:480/372}
.pat-btn .pv .kit-svg *{transition:none}
.pat-btn em{font:600 11px/1 var(--font-body,Inter,sans-serif);font-style:normal;color:#163551}
.fields{display:grid;grid-template-columns:1fr 92px;gap:12px}
.fields label{display:grid;gap:6px;font:600 12px/1 var(--font-body,Inter,sans-serif);color:#163551}
.fields .wide{grid-column:1/-1}
.fields input{padding:12px 13px;border:1.5px solid rgba(12,31,48,.2);border-radius:6px;font:600 15px var(--font-body,Inter,sans-serif);color:#0c1f30;text-transform:uppercase;letter-spacing:.04em;width:100%}
.fields input:focus{outline:3px solid rgba(233,178,60,.5);border-color:#e9b23c}
.studio-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,4vw,48px)}
.studio-steps>div{background:#fff;border:1px solid rgba(12,31,48,.1);border-radius:10px;padding:20px}
.studio-steps b{display:block;font:400 40px/1 var(--font-headline,'Bebas Neue',sans-serif);color:transparent;-webkit-text-stroke:1.5px #163551;margin-bottom:6px}
.studio-steps p{margin:0;font-size:14px;color:var(--text-secondary,#56677a)}
/* Home band */
.kit-band{background:linear-gradient(160deg,#163551,#0c1f30);color:#fff;overflow:hidden}
.kit-band-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,5vw,72px);align-items:center}
.kit-band .section-title{color:#fff}.kit-band .eyebrow{color:#e9b23c}
.kit-band p{color:rgba(255,255,255,.78);max-width:46ch;font-size:17px}
.kit-band-stage{aspect-ratio:600/760;max-height:520px;margin:0 auto;width:min(100%,410px);background:#fff;border-radius:10px;padding:14px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.dd-feature{color:#163551!important;font-weight:700!important;background:rgba(233,178,60,.16)}
@media(max-width:900px){.studio-grid,.kit-band-grid{grid-template-columns:1fr}.studio-stage{position:static}.studio-steps{grid-template-columns:1fr}#kitStage{max-height:none;width:min(100%,420px)}}
@media(max-width:480px){.presets{grid-template-columns:repeat(2,1fr)}.pats{grid-template-columns:repeat(4,1fr);gap:6px}.pat-btn em{font-size:10px}}
@media(prefers-reduced-motion:reduce){.kit-svg *,#kitStage{transition:none}}
#kitStage{background:radial-gradient(120% 90% at 50% 35%,#f4f6f8 0%,#e3e8ee 100%);border-radius:8px;padding:2% 4% 0}
.kit-band-stage{background:radial-gradient(120% 90% at 50% 35%,#f4f6f8 0%,#e3e8ee 100%)}
.studio-side{display:grid;gap:14px;min-width:0}
.studio-actions-m{display:none}
.kit-band-copy>*+*{margin-top:18px}.kit-band-copy .btn{margin-top:26px}
@media(max-width:900px){
  .studio-stage{position:sticky;top:58px;z-index:20;padding:10px 12px 12px}
  .stage-actions--d{display:none}
  #kitStage{max-height:36vh;width:auto;aspect-ratio:600/760;margin:6px auto 0}
  .studio-actions-m{display:block}
  .studio-actions-m .stage-actions{margin-top:0}
}
@media(max-width:900px){.studio-panel .ctl,.studio-panel button,.studio-panel input,.studio-actions-m{scroll-margin-top:calc(58px + 36vh + 96px)}}
.studio-grid>*{min-width:0}.stage-bar{flex-wrap:wrap}
@media(max-width:380px){.view-tog button{padding:9px 11px}.kit-shuffle{padding:9px 10px}.fields{grid-template-columns:1fr 78px}.ctl{padding:14px}}
/* v12 photo-real engine */
#kitStage{aspect-ratio:600/780}.kit-svg *{transition:none!important}
.kit-band-stage{position:relative;aspect-ratio:600/780}.kb{position:absolute;inset:14px;opacity:0;transition:opacity .9s ease}.kb.on{opacity:1}
.pat-btn .pv{aspect-ratio:880/900}
.seg{flex-wrap:wrap;max-width:100%}.seg button{flex:1 1 auto}
@media(max-width:380px){.seg button{padding:9px 10px;font-size:12.5px}}
