:root{
  --tan:#E9BA81; --paper:#F6EBD9; --paper-2:#FCF5EA; --ink:#171311;
  --ink-soft:#6E5A44; --wine:#D81E1E; --wine-deep:#B01414; --gold:#A4835B;
  --line:rgba(23,19,17,.16); --stitch:rgba(164,131,91,.6); --r:14px; --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55}
h1,h2,h3,.display{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;line-height:1.08;margin:0}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.script{font-family:"Pinyon Script",cursive;font-weight:400}

header.site{position:sticky;top:0;z-index:40;background:rgba(252,245,234,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:18px}
.brand{font-family:"Bodoni Moda",serif;font-size:23px;font-weight:600;line-height:1.1}
.brand small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-top:3px}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:14.5px;font-weight:500}
.nav ul a{text-decoration:none;position:relative;padding:4px 0}
.nav ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--wine);transition:width .25s ease}
.nav ul a:hover::after{width:100%}
.logo-link{display:flex;align-items:center;text-decoration:none}
.logo-img{height:74px;width:auto;display:block}
.menu-btn{display:none;background:none;border:1px solid rgba(23,19,17,.3);border-radius:9px;padding:9px 12px;font-size:14px;cursor:pointer;color:var(--ink);font-family:inherit}

.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:"Hanken Grotesk",sans-serif;font-size:14.5px;font-weight:600;cursor:pointer;padding:12px 24px;border-radius:999px;border:1.5px solid var(--ink);transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease}
.btn-primary{background:var(--wine);color:#fff;border-color:var(--wine)}
.btn-primary:hover{background:var(--wine-deep);border-color:var(--wine-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper-2)}

.hero{position:relative;background:linear-gradient(150deg,var(--tan),var(--ink));color:var(--paper);padding:64px 0 70px;text-align:center;overflow:hidden}
.hero.small{padding:46px 0 50px}
.hero .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:rgba(246,235,217,.85)}
.hero h1{font-size:clamp(34px,6vw,58px);margin:14px 0 0;color:#fff}
.hero.small h1{font-size:clamp(30px,5vw,46px)}
.hero h1 .script{color:var(--tan);font-size:1.15em;display:inline-block}
.hero p{max-width:660px;margin:18px auto 26px;font-size:17px;color:rgba(246,235,217,.92)}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.hero .cta .btn-ghost:hover{background:#fff;color:var(--ink)}

section{padding:62px 0}
.section-head{text-align:center;max-width:700px;margin:0 auto 38px}
.section-head .num{font-family:"Bodoni Moda",serif;font-style:italic;font-size:15px;color:var(--gold)}
.section-head h2{font-size:clamp(28px,4vw,40px);margin:8px 0 12px}
.section-head p{color:var(--ink-soft);font-size:16px;margin:0}

.atelier{display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:start}
@media(max-width:920px){.atelier{grid-template-columns:1fr}}

.preview-wrap{position:sticky;top:90px}
.viewsel{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.viewsel button{flex:1;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:9px 8px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px}
.viewsel button:hover{border-color:var(--gold)}
.viewsel button.active{border-color:var(--wine);color:var(--wine)}
.viewsel button .vdot{width:6px;height:6px;border-radius:50%;background:var(--wine);opacity:0;transition:.15s}
.viewsel button.has .vdot{opacity:1}
.preview{position:relative;container-type:inline-size;aspect-ratio:1/1;width:100%;border-radius:var(--r);overflow:hidden;background:radial-gradient(circle at 50% 38%, #fff 0%, var(--paper-2) 70%);border:1px solid var(--line);box-shadow:0 18px 40px -22px rgba(23,19,17,.5)}
#garment{position:absolute;inset:0}
.preview svg.garment{position:absolute;inset:0;width:100%;height:100%}
.stitch{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);transform-origin:center;cursor:grab;user-select:none;touch-action:none;max-width:64%;text-align:center;z-index:3}
.stitch:active{cursor:grabbing}
.preview.static .stitch{cursor:default}
.stitch.dragging .hoop{opacity:1}
.hoop{position:absolute;left:50%;top:50%;width:155%;height:155%;min-width:120px;min-height:120px;transform:translate(-50%,-50%);border:1.5px dashed var(--wine);border-radius:50%;opacity:0;transition:opacity .15s;pointer-events:none}
.emb-text{font-size:42px;line-height:1.1;white-space:pre-wrap;word-break:break-word;color:var(--thread,#171311);text-shadow:.5px 1px 0 rgba(0,0,0,.30), -.4px -.4px 0 rgba(255,255,255,.16);-webkit-text-stroke:.35px rgba(0,0,0,.12)}
.stitch .holder{pointer-events:none}
.stitch img{-webkit-user-drag:none}
.stitch.is-logo{max-width:92%;text-align:center}
.logo-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 18px;border:1.5px dashed var(--wine);border-radius:12px;background:rgba(252,245,234,.82);color:var(--ink);font-family:"Hanken Grotesk",sans-serif;text-align:center;min-width:130px}
.logo-ph .i{font-size:24px;line-height:1}
.logo-ph .n{font-weight:700;font-size:12.5px;word-break:break-word;line-height:1.2}
.logo-ph small{font-size:10px;color:var(--ink-soft)}
.lg-blocks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.lg-block{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);cursor:pointer;font:inherit;font-size:13px;color:var(--ink)}
.lg-block.active{border-color:var(--wine);color:var(--wine);font-weight:600}
.lg-block .dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.preview-bar{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.preview-bar button{background:none;border:none;color:var(--wine);font-weight:600;cursor:pointer;font-family:inherit;font-size:13px}
.preview-bar button:hover{text-decoration:underline}
.drag-hint{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-style:italic}

.panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.panel .block+.block{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}

.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tab-btn{font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:9px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:.18s;display:inline-flex;align-items:center;gap:7px}
.tab-btn:hover{background:rgba(23,19,17,.07)}
.tab-btn.active{background:var(--wine);border-color:var(--wine);color:#fff}
.tab-btn .dot{width:7px;height:7px;border-radius:50%;background:transparent;border:1.5px solid currentColor;transition:.18s}
.tab-btn.on .dot{background:var(--wine);border-color:var(--wine)}
.tab-btn.active.on .dot{background:#fff;border-color:#fff}
.tab-pane{display:none}
.tab-pane.active{display:block}

label.fld{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px}
input[type=text],textarea,select{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;outline:none;transition:border-color .15s}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--wine)}
textarea{resize:vertical;min-height:80px}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.toggle-label{font-size:14px;font-weight:600}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none}
.switch input{display:none}
.switch span{position:absolute;inset:0;background:rgba(23,19,17,.22);border-radius:999px;transition:.2s;cursor:pointer}
.switch span::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked+span{background:var(--wine)}
.switch input:checked+span::before{transform:translateX(20px)}

.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatches.scroll{max-height:184px;overflow-y:auto;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff;align-content:flex-start}
.thr-label{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:8px}
.thr-label b{color:var(--ink)}
.txt-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.txt-chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 8px 6px 13px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.15s;max-width:170px}
.txt-chip>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txt-chip.active{border-color:var(--wine);color:var(--wine)}
.txt-chip .x{flex:none;display:inline-flex;width:17px;height:17px;align-items:center;justify-content:center;border-radius:50%;background:rgba(23,19,17,.1);color:var(--ink);font-size:10px}
.txt-chip .x:hover{background:var(--wine);color:#fff}
.addtxt{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px 15px;border-radius:999px;border:1.5px dashed var(--wine);background:transparent;color:var(--wine);transition:.15s}
.addtxt:hover{background:var(--wine);color:#fff}
.delbtn{margin-top:18px;width:100%;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:10px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);transition:.15s}
.delbtn:hover{border-color:var(--wine);color:var(--wine)}
.stitch.sel .holder{outline:1.5px dashed rgba(216,30,30,.55);outline-offset:7px}
.sw{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);transition:transform .12s, box-shadow .12s;position:relative}
.sw:hover{transform:scale(1.12)}
.sw.active{box-shadow:0 0 0 2px var(--wine);transform:scale(1.12)}
.sw[title]:hover::after{content:attr(title);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:5}
.sw-custom{background:conic-gradient(from 0deg,#ff0040,#ff8c00,#ffd500,#3ad900,#00d8c0,#0096ff,#7a4dff,#ff00c8,#ff0040);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.sw-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sw-custom .plus{font-size:17px;line-height:1;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.7);pointer-events:none;font-weight:700}
.sw-hex{font-size:12px;color:var(--ink-soft);font-weight:600;margin-left:4px;align-self:center}

.supports{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sup{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-soft);transition:.15s}
.sup svg{width:30px;height:30px;color:var(--ink-soft)}
.sup:hover{border-color:var(--gold)}
.sup.active{border-color:var(--wine);color:var(--wine)}
.sup.active svg{color:var(--wine)}

.range-row{display:flex;align-items:center;gap:12px}
input[type=range]{flex:1;accent-color:var(--wine)}
.range-row .val{font-size:13px;font-weight:600;color:var(--ink-soft);min-width:42px;text-align:right}

.motif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.motif-btn{aspect-ratio:1/1;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:9px;transition:.15s;color:var(--ink)}
.motif-btn svg{width:100%;height:100%}
.motif-btn:hover{border-color:var(--gold)}
.motif-btn.active{border-color:var(--wine);box-shadow:0 0 0 1px var(--wine) inset}

.upload{display:block;border:1.5px dashed var(--wine);border-radius:12px;background:transparent;color:var(--wine);padding:24px 14px;text-align:center;cursor:pointer;transition:.18s;font-weight:600}
.upload:hover{background:rgba(216,30,30,.06)}
.upload input{display:none}
.upload small{display:block;color:var(--ink-soft);font-weight:500;margin-top:6px;font-size:12px}
.hint{font-size:12.5px;color:var(--ink-soft);margin-top:10px}

.devis{background:var(--paper-2)}
.devis-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:780px){.devis-grid{grid-template-columns:1fr}}
.recap{background:var(--ink);color:var(--paper-2);border-radius:var(--r);padding:26px 28px;border-top:3px solid var(--wine)}
.recap h3{font-family:"Bodoni Moda",serif;font-size:21px;color:#fff;margin:0 0 16px;font-weight:500}
.recap .preview{box-shadow:none}
.view-block{margin-bottom:18px}
.view-block .vlabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.view-block .vlabel::after{content:"";flex:1;height:1px;background:rgba(252,245,234,.18)}
.recap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 16px;font-size:14px}
.recap dt{color:rgba(246,235,217,.6);font-weight:600;white-space:nowrap}
.recap dd{margin:0;text-align:right;color:#fff}
.recap-btns{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.recap-btn{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:9px 15px;border-radius:999px;border:1.5px solid rgba(252,245,234,.4);background:transparent;color:var(--paper-2);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.18s}
.recap-btn:hover{background:rgba(252,245,234,.13)}
.empty-note{background:rgba(216,30,30,.08);border:1px solid var(--wine);color:var(--wine-deep);border-radius:10px;padding:12px 16px;font-size:14px;margin-bottom:24px;font-weight:600}
.empty-note a{color:var(--wine-deep)}
.notice{display:flex;gap:11px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:14px 16px;font-size:14px;color:var(--ink-soft);max-width:720px;margin:0 auto 32px;line-height:1.5}
.notice .ic{font-size:18px;line-height:1.2;flex:none}
.notice strong{color:var(--ink)}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.form .row{margin-bottom:16px}
.form input[type=file]{width:100%;font-family:inherit;font-size:14px;color:var(--ink-soft);border:1.5px dashed var(--line);border-radius:10px;padding:11px 13px;background:#fff;cursor:pointer}
.form input[type=file]:hover{border-color:var(--gold)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn-primary{width:100%;justify-content:center;margin-top:6px}
.ok-msg{display:none;background:rgba(216,30,30,.08);border:1px solid var(--wine);color:var(--wine-deep);border-radius:10px;padding:12px 14px;font-size:14px;margin-top:14px;font-weight:600}
.ok-msg.show{display:block}

footer.site{background:var(--ink);color:var(--paper-2);padding:46px 0 30px;margin-top:10px}
footer.site .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px}
footer.site .brand{color:var(--paper-2)}
footer.site .brand small{color:rgba(252,245,234,.55)}
footer.site .fcontact{font-size:14px;color:rgba(252,245,234,.8);line-height:1.9}
footer.site .fcontact a{color:var(--tan);text-decoration:none}
footer.site .fnav{display:flex;flex-direction:column;gap:7px;font-size:14px}
footer.site .fnav a{color:rgba(252,245,234,.8);text-decoration:none}
footer.site .fnav a:hover{color:#fff}
footer.site .copy{margin-top:30px;text-align:center;font-size:12.5px;color:rgba(252,245,234,.45)}
@media(max-width:900px){
  .menu-btn{display:block}
  .nav nav{order:3;flex-basis:100%}
  .nav ul{display:none;flex-direction:column;gap:12px;padding:10px 0 4px}
  .nav ul.open{display:flex}
}