/* Sticky social footer */
#social-footer {
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  pointer-events: none;
}
.social-icons {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #222;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.social-icons a:hover {
  opacity: 1;
}
.social-icons svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* Hide nav when .hidden is applied */
.hidden { display: none !important; }
*{box-sizing:border-box}
:root{--ink:#1d1d1f;--paper:#fcfbf7;--accent:#DADADA}
html,body{height:100%}
body{margin:0;font-family:'Nunito';color:var(--ink);background:#fff;font-size:1.15rem}

#progress-container{position:fixed;top:0;left:0;width:100%;height:6px;background:rgba(0,0,0,.06);z-index:9999}
#progress-bar{height:100%;width:0;background:var(--accent);transition:width .15s ease-out}

#belt-nav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:8px;background:rgba(255,255,255,.9);padding:8px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.12);backdrop-filter:saturate(140%) blur(6px);z-index:9999}
#belt-nav button{appearance:none;border:2px solid rgba(0,0,0,.08);border-radius:999px;padding:.35rem .5rem;cursor:pointer;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
#belt-nav button.active{outline:2px solid var(--accent); outline-offset:1px; transform:translateY(-1px); animation: beltBounce .4s ease}
#belt-nav button svg{width:32px;height:18px}
@keyframes beltBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.hero{padding:min(12vw,5rem) 1rem 1rem;text-align:center}
#wordmark{font-family:'Baloo 2';font-weight:800;letter-spacing:.02em;margin:0 0 .25rem;font-size:clamp(2.2rem,8vw,4.5rem)}
#wordmark span{color:var(--accent)}
.hero p{opacity:.85;margin:.25rem 0 0;font-size:clamp(1.1rem,3vw,1.25rem)}

.scrolly{display:grid;grid-template-columns:1fr min(54rem,94vw) 1fr}
.sticky{grid-column:2;position:sticky;top:6px;height:calc(100svh - 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;z-index:0}
.sticky img{max-width:min(86svw,900px);width:100%;height:auto}
.sticky figcaption{margin-top:.75rem;font-size:clamp(1.15rem,3vw,1.35rem);opacity:.9;transition:opacity .35s ease;padding:0 .5rem;text-align:center}

.steps{grid-column:2;margin:0 auto;padding-bottom:30vh;z-index:10}
  .step{margin:120vh 0;padding:1.25rem 1.15rem;border-left:4px solid #e5e3dc;background:rgba(255,255,255,0.25);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.10);border-radius:.75rem;border:1px solid rgba(255,255,255,0.35)}
.step:first-child { margin-top:24vh; }
.step h2{margin:.25rem 0 .25rem;font-size:clamp(1.45rem,4vw,2.1rem);font-family:'Baloo 2',system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:#fff;text-shadow:0 0 8px rgba(255,255,255,0.7), 0 0 2px #fff;}
.step p{margin:.25rem 0 .25rem;opacity:.85;font-size:clamp(1.15rem,3vw,1.25rem)}

.fade-out{opacity:0}
.fade-in{opacity:1;transition:opacity .45s ease}
@keyframes bounceOnce{0%{transform:scale(1)}50%{transform:scale(1.035)}100%{transform:scale(1)}}
.bounce{animation:bounceOnce .4s ease}

@media (max-width:560px){
  .step{margin:100vh 0;padding:1.05rem .95rem}
  .step:first-child { margin-top:12vh; }
  .step h2{font-size:clamp(1.15rem,5vw,1.45rem)}
  .step p{font-size:clamp(1rem,4vw,1.15rem)}
  .sticky{padding:.5rem}
  .sticky figcaption{font-size:clamp(1rem,4vw,1.15rem)}
  #progress-container{height:5px}
  #belt-nav{gap:5px;left:50%;right:auto;transform:translateX(-50%)}
  #belt-nav button svg{width:26px;height:15px}
}