.studio-guide { margin:62px 4% 18px; position:relative; isolation:isolate; }
.guide-note { position:relative; background:repeating-linear-gradient(91deg,#ffffff03 0 1px,transparent 1px 5px),#1d1d1d; padding:32px 36px 18px; box-shadow:4px 7px 0 #080808; }
.guide-note:before { content:''; position:absolute; inset:8px; pointer-events:none; border:1px dashed #666; clip-path:polygon(0 0,100% 0,100% 97%,0 100%); }
.guide-note:after { content:''; position:absolute; left:22px; top:-13px; width:31px; height:31px; border-radius:50%; border:1px solid #b7b7b7; box-shadow:inset 0 0 0 3px #252525,inset 0 0 0 4px #aaa,1px 2px 4px #0008; background:radial-gradient(circle at 39% 39%,#eee 0 1.5px,transparent 1.8px),radial-gradient(circle at 61% 39%,#eee 0 1.5px,transparent 1.8px),radial-gradient(circle at 39% 61%,#eee 0 1.5px,transparent 1.8px),radial-gradient(circle at 61% 61%,#eee 0 1.5px,transparent 1.8px),#292929; }
.guide-intro { display:flex; align-items:center; justify-content:space-between; gap:32px; padding-bottom:6px; }
.guide-intro .overline { font-size:8px; margin-bottom:13px; color:#aaa; }
.guide-intro h2 { font-size:clamp(25px,3vw,38px); }
.guide-intro p:last-child { font-size:11px; line-height:1.8; color:#aaa; margin:12px 0 0; }
.guide-toggle { display:flex; align-items:center; gap:23px; flex-shrink:0; background:#e2e2de; color:#202020; border:0; padding:16px 20px; font-size:11px; transform:rotate(-.7deg); box-shadow:0 3px 0 #0005; }
.guide-toggle:hover { background:#f3f3ef; }
.guide-toggle:focus-visible { outline:2px solid #eee; outline-offset:5px; }
.guide-toggle-mark { display:grid; place-items:center; border:1px solid #333; border-radius:50%; width:23px; height:23px; font-size:19px; line-height:1; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.studio-guide.is-open .guide-toggle-mark { transform:rotate(45deg); }
.guide-panel { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .65s cubic-bezier(.2,.75,.25,1),visibility 0s .65s; }
.guide-panel[aria-hidden="false"] { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .65s cubic-bezier(.2,.75,.25,1),visibility 0s; }
.guide-panel-clip { min-height:0; overflow:hidden; }
.guide-content { padding-top:22px; opacity:0; transform:translateY(-12px); transition:opacity .35s,transform .5s; }
.is-open .guide-content { opacity:1; transform:translateY(0); transition-delay:.12s; }
.guide-stitching { display:block; width:100%; height:36px; overflow:visible; margin-bottom:26px; }
.guide-thread { fill:none; stroke:#aaa; stroke-width:1.3; stroke-dasharray:650; stroke-dashoffset:650; }
.guide-needle { opacity:0; }
.is-open .guide-thread { animation:guide-thread-draw 1.1s ease both .12s; }
.is-open .guide-needle { animation:guide-sew 1.1s ease both .12s; }
@keyframes guide-thread-draw { to { stroke-dashoffset:0; } }
@keyframes guide-sew { 0% { opacity:0; transform:translate(14px,23px) rotate(-6deg); } 8% { opacity:1; } 48% { transform:translate(290px,18px) rotate(8deg); } 92% { opacity:1; } 100% { opacity:0; transform:translate(586px,20px) rotate(-6deg); } }
.guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:0 0 34px; }
.guide-steps article { position:relative; padding-left:20px; }
.guide-steps article:before { content:''; position:absolute; top:0; bottom:7px; left:0; border-left:1px dashed #777; transform:rotate(-1deg); }
.guide-steps article:nth-child(2):before { transform:rotate(1.5deg); }
.guide-steps span,.guide-small-title { display:block; font-size:8px; letter-spacing:1.6px; color:#aaa; }
.guide-steps h3 { font-size:19px; margin:13px 0 10px; }
.guide-steps p,.guide-practical p { font-size:11px; line-height:1.9; color:#b0b0aa; margin:0; }
.studio-guide .pricing-guide,.studio-guide .ordering-guide { padding:30px 0; }
.studio-guide .section-heading { margin-bottom:22px; gap:20px; }
.studio-guide .section-heading h2 { font-size:25px; }
.studio-guide .price-options { margin-top:20px; gap:20px; }
.studio-guide .price-options article { background:#252525; padding:24px 17px 18px; }
.studio-guide .price-options article:nth-child(2) { transform:rotate(.5deg); }
.studio-guide .price-options h3 { font-size:27px; }
.studio-guide .price-options article:last-child h3 { font-size:21px; }
.studio-guide .price-note { margin-left:0; }
.studio-guide .service-grid { margin-top:24px; gap:25px; }
.studio-guide .service-grid article { padding:20px 0 5px; background:none; }
.studio-guide .service-grid h3 { font-size:18px; }
.guide-practical { display:grid; grid-template-columns:1fr 1fr; gap:34px; padding:24px 0; }
.guide-practical h3 { font-size:15px; margin:10px 0; }
.guide-end { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:20px 0 16px; border-top:1px dashed #5a5a54; }
.guide-end p { font-size:11px; color:#b0b0aa; max-width:480px; line-height:1.8; margin:0; }
.guide-end .button { font-size:11px; flex-shrink:0; }
@media(max-width:650px) {
  .studio-guide { margin:42px 5% 12px; }
  .guide-note { padding:29px 22px 17px; }
  .guide-intro { display:block; }
  .guide-intro h2 { font-size:28px; }
  .guide-toggle { margin:22px 0 3px; width:100%; justify-content:space-between; }
  .guide-steps,.guide-practical { grid-template-columns:1fr; gap:23px; }
  .guide-steps { padding-bottom:12px; }
  .studio-guide .section-heading { display:block; }
  .studio-guide .section-heading .subtle { display:block; margin-top:9px; }
  .studio-guide .price-options { grid-template-columns:1fr; gap:16px; }
  .studio-guide .pricing-guide,.studio-guide .ordering-guide { padding:24px 0; }
  .studio-guide .service-grid { grid-template-columns:1fr; gap:17px; }
  .guide-end { align-items:start; flex-direction:column; gap:18px; }
  .guide-end .button { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .guide-panel,.guide-content,.guide-toggle-mark { transition:none; }
  .is-open .guide-thread { animation:none; stroke-dashoffset:0; }
  .is-open .guide-needle { animation:none; }
}
