index.html

---
layout: base
title: "Sensory Safety: The Blueprint for Neuro-Affirming Workplaces"
hide_site_header: true
---
<style>
.wrapper { max-width: 900px; margin: 2rem auto; padding: 1rem; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#111; }
.hero { text-align:center; padding:4rem 1rem; border:1px solid #eee; border-radius:8px; background:linear-gradient(180deg,#ffffff,#f9fafb); }
.hero h1{ font-size:clamp(1.5rem,3vw,2.25rem); margin:0 0 .5rem; }
.lead{ font-size:1.05rem; color:#333; margin:0 0 .5rem; }
.status{ margin-top:.75rem; color:#b45309; font-weight:600; }
.example{ display:flex; justify-content:center; }
.example img{ max-width:100%; height:auto; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,23,0.08); margin:1rem 0; }
.caption{ font-size:0.95rem; color:#555; margin-top:0.5rem; }
</style>

<div class="wrapper">
    
    <main>
      <section class="hero" role="main" aria-labelledby="hero-title">
        <h1 id="hero-title">Sensory Safety: The Blueprint for Neuro-Affirming Workplaces</h1>
        <p class="status">Status: Under construction — coming soon.</p>
        <div class="example" aria-hidden="false">
          <img src="{{ site.baseurl }}/assets/images/Screenshot.jpg" alt="Example app mockup: an interactive assistant where you can ask how to improve your professional environment for neurodiverse individuals.">
        </div>
      </section>
    </main>
</div>