What Loc Size Will Look Best On Me?

<div id="lsq-s1" class="lsq-step active">
<p class="lsq-label">Visual preference</p>
<p class="lsq-title">How do you want your locs to read?</p>
<p class="lsq-sub">Think about the overall impression you want your locs to make.</p>
<div class="lsq-opts">
<button class="lsq-opt" data-q="look" data-v="tiny" onclick="lsqpk(this)"><span class="ot">Tiny + detailed</span><span class="os">Intricate, delicate, sisterlocks-inspired look</span></button>
<button class="lsq-opt" data-q="look" data-v="balanced" onclick="lsqpk(this)"><span class="ot">Balanced</span><span class="os">Not too small, not too big — versatile everyday look</span></button>
<button class="lsq-opt" data-q="look" data-v="bold" onclick="lsqpk(this)"><span class="ot">Bold + statement</span><span class="os">Larger locs that command attention</span></button>
</div>
<div class="lsq-nav lsq-nav-right"><button class="lsq-nxt" id="lsqn1" onclick="lsq_nx(1,2)" disabled>Next →</button></div>
</div>

<div id="lsq-s2" class="lsq-step">
<p class="lsq-label">Maintenance time</p>
<p class="lsq-title">How much time do you want to spend on maintenance?</p>
<div class="lsq-opts">
<button class="lsq-opt" data-q="maint" data-v="low" onclick="lsqpk(this)"><span class="ot">Low</span><span class="os">Minimal upkeep — I want to set it and forget it</span></button>
<button class="lsq-opt" data-q="maint" data-v="medium" onclick="lsqpk(this)"><span class="ot">Medium</span><span class="os">Some regular care is fine</span></button>
<button class="lsq-opt" data-q="maint" data-v="high" onclick="lsqpk(this)"><span class="ot">High</span><span class="os">I love caring for my locs — it's self-care</span></button>
</div>
<div class="lsq-nav"><button class="lsq-bck" onclick="lsq_nx(2,1)">← Back</button><button class="lsq-nxt" id="lsqn2" onclick="lsq_nx(2,3)" disabled>Next →</button></div>
</div>

<div id="lsq-s3" class="lsq-step">
<p class="lsq-label">Scalp visibility</p>
<p class="lsq-title">Do you prefer more scalp showing or more fullness?</p>
<div class="lsq-opts">
<button class="lsq-opt" data-q="scalp" data-v="show" onclick="lsqpk(this)"><span class="ot">More scalp showing</span><span class="os">Clean, defined parts are important to me</span></button>
<button class="lsq-opt" data-q="scalp" data-v="full" onclick="lsqpk(this)"><span class="ot">More fullness</span><span class="os">I want my locs to look lush and voluminous</span></button>
<button class="lsq-opt" data-q="scalp" data-v="either" onclick="lsqpk(this)"><span class="ot">Either is fine</span><span class="os">I'm flexible on this one</span></button>
</div>
<div class="lsq-nav"><button class="lsq-bck" onclick="lsq_nx(3,2)">← Back</button><button class="lsq-nxt" id="lsqn3" onclick="lsq_nx(3,4)" disabled>Next →</button></div>
</div>

<div id="lsq-s4" class="lsq-step">
<p class="lsq-label">Texture preference</p>
<p class="lsq-title">Do you prefer a sleek look or a soft/fluffy look?</p>
<div class="lsq-opts">
<button class="lsq-opt" data-q="finish" data-v="sleek" onclick="lsqpk(this)"><span class="ot">Sleek + polished</span><span class="os">Neat, uniform locs with defined edges</span></button>
<button class="lsq-opt" data-q="finish" data-v="fluffy" onclick="lsqpk(this)"><span class="ot">Soft + fluffy</span><span class="os">Natural texture, lived-in bohemian feel</span></button>
</div>
<div class="lsq-nav"><button class="lsq-bck" onclick="lsq_nx(4,3)">← Back</button><button class="lsq-nxt" id="lsqn4" onclick="lsq_nx(4,5)" disabled>Next →</button></div>
</div>

<div id="lsq-s5" class="lsq-step">
<p class="lsq-label">Current hair length</p>
<p class="lsq-title">How long is your natural hair right now?</p>
<div class="lsq-opts">
<button class="lsq-opt" data-q="length" data-v="short" onclick="lsqpk(this)"><span class="ot">Short</span><span class="os">TWA or under 4 inches</span></button>
<button class="lsq-opt" data-q="length" data-v="medium" onclick="lsqpk(this)"><span class="ot">Medium</span><span class="os">4–8 inches</span></button>
<button class="lsq-opt" data-q="length" data-v="long" onclick="lsqpk(this)"><span class="ot">Long</span><span class="os">8+ inches</span></button>
</div>
<div class="lsq-nav"><button class="lsq-bck" onclick="lsq_nx(5,4)">← Back</button><button class="lsq-nxt" id="lsqn5" onclick="lsq_nx(5,6)" disabled>Next →</button></div>
</div>

<div id="lsq-s6" class="lsq-step">
<p class="lsq-label">Thinning areas</p>
<p class="lsq-title">Do you have any thinning areas you want to minimize visually?</p>
<div class="lsq-opts">
<button class="lsq-opt" data-q="thinning" data-v="yes" onclick="lsqpk(this)"><span class="ot">Yes</span><span class="os">I have thinning edges or spots I'd like to cover</span></button>
<button class="lsq-opt" data-q="thinning" data-v="no" onclick="lsqpk(this)"><span class="ot">No</span><span class="os">My density is even throughout</span></button>
</div>
<div class="lsq-nav"><button class="lsq-bck" onclick="lsq_nx(6,5)">← Back</button><button class="lsq-nxt" id="lsqn6" onclick="lsq_result()" disabled>See my size →</button></div>
</div>

<div id="lsq-result" class="lsq-step">
<p class="lsq-label">Loctician recommendation</p>
<p class="lsq-title">Your perfect loc size</p>
<div class="lsq-size-card">
<span class="lsq-size-badge">Best match</span>
<p id="lsq-res-size" style="font-size:28px;font-weight:700;color:#111;margin:0 0 6px;"></p>
<p id="lsq-res-cm" style="font-size:14px;color:#da1984;font-weight:600;margin:0 0 10px;"></p>
<p id="lsq-res-why" style="font-size:13px;color:#555;margin:0;line-height:1.6;"></p>
</div>
<div id="lsq-alt-wrap"></div>
<div id="lsq-thin-note"></div>
<a id="lsq-shop-btn" href="/collections/handmade-locs" class="lsq-cta-btn">Shop this size →</a>
<a href="https://maconstyles.as.me/" class="lsq-cta-sec">Book a style consult</a>
<div style="text-align:center;margin-top:12px;">
<button onclick="lsq_reset()" style="background:none;border:none;font-size:12px;color:#aaa;cursor:pointer;text-decoration:underline;">Start over</button>
</div>
</div>

</div>
</div>
</div>