/* leen.work UI layer: floating navbar with mascot, liquid metal buttons, form stepper.
   Loaded after styles.css. */

.page-wrap{overflow:clip}
html{scroll-padding-top:122px}

/* ---------- Floating navbar ---------- */
.site-header{position:sticky;top:0;padding-top:28px;pointer-events:none}
.nav-pill{position:relative;pointer-events:auto;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(18,61,61,.06);transition:box-shadow .3s}
.site-header.is-stuck .nav-pill{box-shadow:0 0 0 1px rgba(18,61,61,.08),0 14px 34px -14px rgba(18,61,61,.35)}
.nav-links a{position:relative;z-index:1;min-height:44px;display:inline-flex;align-items:center;padding:10px 16px}
.nav-links a:hover{background:transparent;color:var(--teal)}
.nav-links a[aria-current=true]{color:var(--teal-deep)}
.nav-links a:focus-visible,.nav-cta:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* The glow that slides under the current section's link. */
.nav-lamp{position:absolute;top:0;left:0;z-index:0;border-radius:30px;background:rgba(142,212,98,.24);box-shadow:0 0 0 1px rgba(142,212,98,.35),0 0 22px rgba(142,212,98,.5);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.3,1.25,.4,1),width .5s cubic-bezier(.3,1.25,.4,1),opacity .25s}
.nav-lamp::before{content:'';position:absolute;top:-3px;left:50%;width:38%;height:4px;margin-left:-19%;border-radius:4px;background:var(--grass);box-shadow:0 0 12px 2px rgba(142,212,98,.75)}
.nav-lamp.is-on{opacity:1}

/* The mascot: the green dot from the hero drawing, perched on the current link. */
.nav-mascot{position:absolute;top:0;left:0;z-index:3;width:38px;height:38px;pointer-events:none;opacity:0;transition:transform .55s cubic-bezier(.3,1.35,.4,1),opacity .3s}
.nav-mascot.is-on{opacity:1}
.nav-mascot svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%;animation:mascot-bob 3.2s ease-in-out infinite}
.nav-mascot.is-hopping svg{animation:mascot-hop .55s cubic-bezier(.3,.7,.4,1)}
.m-body,.m-tail{fill:var(--grass);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.m-cheek{fill:var(--coral);opacity:.55}
.m-eye{fill:var(--ink);transform-box:fill-box;transform-origin:center;animation:mascot-blink 4.6s infinite}
.m-glint{fill:#fff}
.m-happy,.m-smile{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.m-happy,.m-open,.m-spark{opacity:0;transition:opacity .15s}
.m-open{fill:var(--teal-deep)}
.m-spark{fill:var(--gold);transform-box:fill-box;transform-origin:center}
.nav-mascot.is-happy .m-eye,.nav-mascot.is-happy .m-glint,.nav-mascot.is-happy .m-smile{opacity:0}
.nav-mascot.is-happy .m-happy,.nav-mascot.is-happy .m-open{opacity:1}
.nav-mascot.is-happy .m-spark{opacity:1;animation:mascot-spark .9s ease-in-out infinite alternate}
.nav-mascot.is-happy .m-spark + .m-spark{animation-delay:.3s}
@keyframes mascot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes mascot-hop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-15px) scale(.94,1.08)}70%{transform:translateY(0) scale(1.1,.88)}100%{transform:translateY(0) scale(1,1)}}
@keyframes mascot-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes mascot-spark{from{transform:scale(.6) rotate(0)}to{transform:scale(1.15) rotate(28deg)}}

/* ---------- Liquid metal button ---------- */
.lm,.lm:hover{position:relative;isolation:isolate;overflow:hidden;border:0;color:#fff;background:linear-gradient(115deg,#123d3d 0%,#c9ae77 30%,#fff8ea 48%,#c9ae77 66%,#123d3d 100%);background-size:220% 100%;-webkit-tap-highlight-color:transparent}
.lm{transition:transform .22s cubic-bezier(.3,1.3,.5,1),box-shadow .25s;box-shadow:0 10px 22px -12px rgba(18,61,61,.7)}
.lm:hover{transform:translateY(-3px);box-shadow:0 16px 28px -12px rgba(18,61,61,.75)}
.lm:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.lm:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.lm > .lm-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.lm::before{content:'';position:absolute;inset:3px;z-index:-1;border-radius:inherit;background:radial-gradient(130% 150% at 50% -30%,rgba(34,118,112,.93) 0%,rgba(14,85,85,.93) 48%,rgba(18,61,61,.95) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 18px rgba(0,0,0,.2);transition:inset .25s,background-color .25s}
.lm:hover::before{inset:4px}
.lm.lm-nogl{animation:lm-slide 5s linear infinite}
.lm[disabled]{opacity:.75;cursor:progress}
@keyframes lm-slide{to{background-position:-220% 0}}

.nav-cta.lm{border:0;padding-inline-start:19px}
.nav-cta.lm::before{inset:2.5px}
.nav-cta.lm .cta-dot{color:var(--teal-deep)}
.nav-cta.lm:hover{transform:translateY(-2px)}

/* ---------- Form stepper ---------- */
.step-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 30px;font-size:12.5px;counter-reset:step}
.step-labels span{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--muted);counter-increment:step;transition:color .25s}
.step-labels span::before{content:counter(step,arabic-indic);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--muted);font-size:13px;line-height:1;transition:background .25s,color .25s}
.step-labels .is-current{color:var(--teal)}
.step-labels .is-current::before{background:var(--teal);color:#fff}
.step-labels .is-done{color:var(--ink)}
.step-labels .is-done::before{content:'✓';background:var(--grass);color:var(--teal-deep)}

/* ---------- After a request is sent ---------- */
.reference-number{display:inline-block;margin:6px 0 4px;padding:8px 16px;border-radius:14px;background:var(--paper);color:var(--teal-deep)!important;font-weight:700;letter-spacing:.02em}
.reference-number:empty{display:none}
.next-steps{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:14px;counter-reset:next}
.next-steps li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;counter-increment:next}
.next-steps li::before{content:counter(next,arabic-indic);grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-size:14px;font-weight:700;line-height:1}
.next-steps strong{font-size:15px}
.next-steps span{color:var(--muted);font-size:14px;line-height:1.7}

/* ---------- Small screens ---------- */
@media (max-width:870px){
  html{scroll-padding-top:104px}
  .site-header{padding-top:22px}
  .nav-links{top:calc(100% + 10px);right:0;left:0;z-index:4;box-shadow:0 18px 34px -18px rgba(18,61,61,.4)}
  .nav-links a{min-height:46px}
  .nav-cta.lm{min-height:44px}
  .menu-toggle{width:44px;height:44px;flex:none}
  .nav-links a[aria-current=true]{background:rgba(142,212,98,.24)}
  .nav-lamp{display:none}
  .nav-mascot{width:30px;height:30px}
}
@media (max-width:600px){
  .nav-cta.lm{padding-inline:15px}
  .step-labels{font-size:11.5px;gap:4px}
  .step-labels span{gap:6px}
  .step-labels span::before{width:22px;height:22px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .nav-lamp,.nav-mascot{transition:opacity .2s}
  .nav-mascot svg,.m-eye,.m-spark,.lm.lm-nogl{animation:none!important}
  .lm,.lm:hover{transition:none;transform:none}
}