<style>
  .cta-overlap-wrapper {
    position: relative;
    z-index: 10;
    margin-bottom: -140px;
  }

  .cta-floating-card {
    position: absolute;
    top: 72px;
    right: 0;
    z-index: 50;
    width: 100%;
    max-width: 360px;
  }

  @media (max-width: 991px) {
    .cta-overlap-wrapper {
      margin-bottom: 0;
    }

    .cta-floating-card {
      position: static;
      max-width: 100%;
      margin-top: 2rem;
    }
  }

  .bg-slate {
    background-color: #373f49;
  }

  .bg-ash {
    background-color: #f7f4ef;
  }

  .bg-bone {
    background-color: #fcfbf8;
  }

  .text-soft {
    color: rgba(255,255,255,0.82);
  }

  .text-deep {
    color: #2e343b;
  }

  /* HERO IMAGE VERSION */
  .hero-bg-image {
    position: relative;
    background-image: url('$apphome/theme/images/bg-3.jpeg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: visible;
    min-height: 620px;
  }

  .hero-bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to bottom,
        rgba(28, 33, 39, 0.62), /* original .82 */
        rgba(33, 39, 46, 0.32)  /* original .72 */
      );
    z-index: 1;
  }

  .hero-bg-image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(
      to bottom,
      rgba(28, 33, 39, 0),
      rgba(28, 33, 39, 0.12)
    );
    z-index: 1;
    pointer-events: none;
  }

  .hero-bg-image > .container {
    position: relative;
    z-index: 2;
  }

  @media (max-width: 991px) {
    .hero-bg-image {
      background-attachment: scroll;
      min-height: auto;
    }
  }

  .eyebrow {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: #8b7d6d;
    font-weight: 600;
  }

  .eyebrow-light {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    font-weight: 600;
  }

  .soft-card {
    background: #fff;
    border-radius: 1.15rem;
    box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.08);
  }

  .stone-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.15rem;
    backdrop-filter: blur(2px);
  }

  .quiet-rule {
    width: 72px;
    height: 1px;
    background: rgba(255,255,255,0.18);
    margin: 1.5rem 0;
  }

  .quiet-rule-dark {
    width: 72px;
    height: 1px;
    background: rgba(55,63,73,0.18);
    margin: 1.25rem 0;
  }

  .symbol-mark {
    font-size: 1.2rem;
    opacity: 0.75;
  }

  .terrain-card h5,
  .threshold-card h5,
  .path-card h5 {
    letter-spacing: -0.01em;
  }

  .hero-reading {
    font-size: 1.08rem;
    line-height: 1.85;
    max-width: 780px;
  }

  .section-reading {
    font-size: 1.03rem;
    line-height: 1.9;
  }

  .big-quote {
    font-size: 1.35rem;
    line-height: 1.7;
  }

  .cta-card-list li {
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .cta-card-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .sky-mountain-title {
    font-size: 2.2rem;
    letter-spacing: -0.03em;
  }

  /* KEY FIX: intro accommodates overlap instead of covering it */
  .intro-overlap-fix {
    position: relative;
    z-index: 1;
    padding-top: 180px;
  }

  @media (max-width: 991px) {
    .intro-overlap-fix {
      padding-top: 3rem;
    }
  }

  @media (max-width: 767px) {
    .sky-mountain-title {
      font-size: 1.8rem;
    }
  }
</style>

<div class="cta-overlap-wrapper">

  <!-- HERO -->
  <section class="py-5 hero-bg-image text-white">
    <div class="container position-relative">
      <div class="row">
        
        <!-- LEFT -->
        <div class="col-lg-8">
          <p class="eyebrow-light mb-3">Sky Inside the Mountain</p>

          <h1 class="display-4 fw-semibold mb-4" style="max-width: 900px;">
            Work on attention, will,<br>
            and the reality we are inside of.
          </h1>

          <div class="quiet-rule"></div>

          <p class="hero-reading text-soft mb-4">
            This is a body of work concerned with <strong class="text-white">attention, sovereignty, symbolic life, and the conditions of becoming conscious within them</strong>.
            <br><br>
            It is for those in threshold, disorientation, grief, or transition — or for those who have begun to recognize that something in their experience is asking for a more serious relationship.
          </p>

          <div class="d-flex gap-5 mt-4 flex-wrap">
            <div>
              <div class="symbol-mark mb-2">✦</div>
              <h6 class="fw-bold mb-1">Sky</h6>
              <small class="text-light">Attention, perception, symbolic life</small>
            </div>
            <div>
              <div class="symbol-mark mb-2">⛰</div>
              <h6 class="fw-bold mb-1">Mountain</h6>
              <small class="text-light">Embodiment, reality, consequence</small>
            </div>
            <div>
              <div class="symbol-mark mb-2">◉</div>
              <h6 class="fw-bold mb-1">The Work</h6>
              <small class="text-light">Writings, guidance, practice</small>
            </div>
          </div>
        </div>

        <!-- RIGHT CTA CARD -->
        <div class="col-lg-4 d-none d-lg-block">
          <div class="cta-floating-card">
            <div class="bg-white text-dark p-4 rounded shadow">
              <img src="$apphome/theme/images/shaman-field.jpg" class="img-fluid rounded mb-3" alt="Sky Inside the Mountain">
              
              <p class="eyebrow mb-2">Begin Here</p>
              <h5 class="fw-semibold mb-3">Choose the nearest doorway.</h5>

              <p class="small text-muted mb-3">
                There is no correct sequence. Only the path that is active for you now.
              </p>

              <ul class="list-unstyled small mb-4 cta-card-list">
                <li>Read the writings</li>
                <li>Learn the framework</li>
                <li>Explore the offerings</li>
                <li>Make contact</li>
              </ul>

              <a href="/skyinside/views/blog/index.html" class="btn btn-dark w-100 mb-2">Read First</a>
              <a href="/skyinside/about.html" class="btn btn-outline-dark w-100 mb-2">Learn More</a>
              <a href="/skyinside/services.html" class="btn btn-outline-dark w-100">Explore Offerings</a>

              <small class="d-block text-muted mt-3 text-center">
                Begin where the thread feels strongest.
              </small>
            </div>
          </div>
        </div>

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

<!-- INTRO -->
<section class="py-5 bg-ash intro-overlap-fix">
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <p class="eyebrow mb-2">Orientation</p>
        <h2 class="fw-semibold mb-4">A working relationship with what is already here.</h2>
        <div class="quiet-rule-dark"></div>

        <div class="section-reading">
          <p>
            <strong>Sky Inside the Mountain</strong> gathers writing, symbolic and spiritual work, and one-to-one guidance around a central concern:
            how we come into conscious relationship with attention, will, and the reality we are already participating in.
          </p>
          <p>
            Much of what shapes our lives operates beneath awareness. We feel its effects, but do not always see clearly what is moving us, what we are repeating, or what is actually ours to choose.
          </p>
          <p class="mb-0">
            This work is concerned with that gap — developing the capacity to see, to discern, and to participate more consciously in what is already happening within and around us.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- MOBILE CTA -->
<section class="py-3 bg-bone d-block d-lg-none">
  <div class="container">
    <div class="bg-white text-dark p-4 rounded shadow">
      <img src="$apphome/theme/images/forest-path.jpg" class="img-fluid rounded mb-3" alt="Sky Inside the Mountain">
      <p class="eyebrow mb-2">Begin Here</p>
      <h5 class="fw-semibold mb-3">Choose the nearest doorway.</h5>
      <ul class="list-unstyled small mb-3 cta-card-list">
        <li>Read the writings</li>
        <li>Learn the framework</li>
        <li>Explore the offerings</li>
        <li>Make contact</li>
      </ul>
      <a href="/skyinside/views/blog/" class="btn btn-dark w-100 mb-2">Read First</a>
      <a href="/skyinside/about.html" class="btn btn-outline-dark w-100 mb-2">Learn More</a>
      <a href="/skyinside/services.html" class="btn btn-outline-dark w-100">Explore Offerings</a>
    </div>
  </div>
</section>

<!-- THE HOUSE AND ITS ROOMS -->
<section class="py-5 bg-bone">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">The house and its rooms</p>
      <h2 class="fw-semibold">Different forms for different kinds of knowing.</h2>
    </div>

    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100 path-card">
          <p class="eyebrow mb-2">01</p>
          <h5 class="fw-semibold mb-3">Writings</h5>
          <p class="mb-0">Essays and longer pieces exploring attention, will, symbolic life, and the structures shaping experience.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100 path-card">
          <p class="eyebrow mb-2">02</p>
          <h5 class="fw-semibold mb-3">Offerings</h5>
          <p class="mb-0">One-to-one work focused on discernment, restoration, and navigating periods of transition or inner complexity.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100 path-card">
          <p class="eyebrow mb-2">03</p>
          <h5 class="fw-semibold mb-3">Framework</h5>
          <p class="mb-0">A way of understanding attention, will, descent, and reality that can actually be worked with over time.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SKY / MOUNTAIN -->
<section class="py-5 bg-white border-top">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">The central movement</p>
      <h2 class="fw-semibold sky-mountain-title">Sky and Mountain</h2>
      <p class="text-muted">A working relationship, not a metaphor.</p>
    </div>

    <div class="row g-4 align-items-stretch">
      <div class="col-lg-6">
        <div class="soft-card p-5 h-100">
          <p class="eyebrow mb-2">Sky</p>
          <h4 class="fw-semibold mb-4">Attention, perception, and the symbolic field.</h4>
          <p class="section-reading">
            Sky refers to the quality of attention — how we perceive, interpret, and orient within experience.
          </p>
          <p class="section-reading mb-0">
            When attention is unclear, distorted, or borrowed, we misread both ourselves and the world. When it is clear, we begin to see what is actually present.
          </p>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="soft-card p-5 h-100">
          <p class="eyebrow mb-2">Mountain</p>
          <h4 class="fw-semibold mb-4">Embodiment, reality, and consequence.</h4>
          <p class="section-reading">
            Mountain refers to the density of lived reality — body, circumstance, relationship, consequence, and the conditions we are inside of.
          </p>
          <p class="section-reading mb-0">
            It is not something we escape. It is what we learn to meet, work within, and take responsibility for.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- THE TERRAIN -->
<section class="py-5 bg-ash border-top">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">The terrain</p>
      <h2 class="fw-semibold">Some of the places this work tends to meet people.</h2>
    </div>

    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="bg-white rounded shadow-sm p-4 h-100 terrain-card">
          <h5 class="fw-semibold mb-3">Threshold</h5>
          <p class="mb-0">When a way of living is ending, and what comes next is not yet clear.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="bg-white rounded shadow-sm p-4 h-100 terrain-card">
          <h5 class="fw-semibold mb-3">Grief</h5>
          <p class="mb-0">When loss alters perception and requires a deeper reorganization of meaning.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="bg-white rounded shadow-sm p-4 h-100 terrain-card">
          <h5 class="fw-semibold mb-3">Discernment</h5>
          <p class="mb-0">Learning to distinguish between impulse, influence, and what is actually yours to act on.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="bg-white rounded shadow-sm p-4 h-100 terrain-card">
          <h5 class="fw-semibold mb-3">Symbol</h5>
          <p class="mb-0">When experience begins presenting itself through image, pattern, and layered meaning rather than direct explanation.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="bg-white rounded shadow-sm p-4 h-100 terrain-card">
          <h5 class="fw-semibold mb-3">Embodiment</h5>
          <p class="mb-0">Bringing insight into behavior, speech, rhythm, and actual lived form.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="bg-white rounded shadow-sm p-4 h-100 terrain-card">
          <h5 class="fw-semibold mb-3">Return</h5>
          <p class="mb-0">Reclaiming parts of self or direction that were set aside, lost, or avoided.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- THREE DOORWAYS -->
<section class="py-5 bg-slate text-white border-top">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow-light mb-2">Three doorways</p>
      <h2 class="fw-semibold">Different entry points depending on how you work.</h2>
      <p class="text-soft">Not everyone begins in the same place.</p>
    </div>

    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="stone-card p-4 h-100">
          <p class="eyebrow-light mb-2">Read</p>
          <h5 class="fw-semibold mb-3">For those who work through language.</h5>
          <p class="mb-0 text-soft">
            Essays and writing that help articulate what is already being encountered.
          </p>
          <a href="/skyinside/views/blog/" class="btn btn-outline-light btn-sm mt-4">Go to Writings</a>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="stone-card p-4 h-100">
          <p class="eyebrow-light mb-2">Understand</p>
          <h5 class="fw-semibold mb-3">For those who need orientation.</h5>
          <p class="mb-0 text-soft">
            Learn the framework behind the work: attention, will, descent, sovereignty, and symbolic life.
          </p>
          <a href="/skyinside/about.html" class="btn btn-outline-light btn-sm mt-4">Read About</a>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="stone-card p-4 h-100">
          <p class="eyebrow-light mb-2">Work</p>
          <h5 class="fw-semibold mb-3">For those ready to engage directly.</h5>
          <p class="mb-0 text-soft">
            One-to-one work, spiritual process, and practical forms of guided engagement.
          </p>
          <a href="/skyinside/services.html" class="btn btn-outline-light btn-sm mt-4">View Offerings</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SEASONS OF ARRIVAL -->
<section class="py-5 bg-bone border-top">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">Seasons of arrival</p>
      <h2 class="fw-semibold">People tend to arrive here under particular conditions.</h2>
    </div>

    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100 threshold-card">
          <h5 class="fw-semibold mb-3">When what worked no longer works</h5>
          <p class="mb-0">A transition that cannot be resolved by continuing the same patterns.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100 threshold-card">
          <h5 class="fw-semibold mb-3">When something deeper is insisting</h5>
          <p class="mb-0">Experience, perception, or inner pressure that does not fit existing frameworks.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100 threshold-card">
          <h5 class="fw-semibold mb-3">When there is insight without direction</h5>
          <p class="mb-0">Understanding is present, but there is no structure for acting on it.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIALS -->
<section class="py-5 bg-white border-top">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">Witness</p>
      <h2 class="fw-semibold">A few words from those who have worked here.</h2>
    </div>

    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="bg-ash p-4 rounded shadow-sm h-100">
          <p class="big-quote mb-3">“This gave shape to something I had felt for years but could never quite name.”</p>
          <small class="text-muted d-block">— Client</small>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="bg-ash p-4 rounded shadow-sm h-100">
          <p class="big-quote mb-3">“Deeply grounded, symbolically intelligent, and free of spiritual theatre.”</p>
          <small class="text-muted d-block">— Reader</small>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="bg-ash p-4 rounded shadow-sm h-100">
          <p class="big-quote mb-3">“It helped me stop circling and begin practicing.”</p>
          <small class="text-muted d-block">— Participant</small>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="py-5 bg-ash border-top" id="faq">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">Questions</p>
      <h2 class="fw-semibold">A few things people often want to know.</h2>
    </div>

    <div class="row g-5">
      <div class="col-md-6">
        <div class="mb-4">
          <h5 class="fw-semibold mb-2">Is this therapy?</h5>
          <p class="text-muted">No. This work may be psychologically deep and personally significant, but it is not a substitute for licensed mental health care.</p>
        </div>

        <div class="mb-4">
          <h5 class="fw-semibold mb-2">Do I need prior spiritual or ritual experience?</h5>
          <p class="text-muted">No. Many people arrive without a formal framework for what they are already living.</p>
        </div>

        <div class="mb-4">
          <h5 class="fw-semibold mb-2">Where should I begin?</h5>
          <p class="text-muted">Usually with the writings. If you need more orientation first, begin with the About page. If something active is happening, the offerings may be the clearer doorway.</p>
        </div>
      </div>

      <div class="col-md-6">
        <div class="mb-4">
          <h5 class="fw-semibold mb-2">Is this religious?</h5>
          <p class="text-muted">No. It is spiritually serious work, but not dogmatic, institutional, or belief-enforced.</p>
        </div>

        <div class="mb-4">
          <h5 class="fw-semibold mb-2">Do you work online or in person?</h5>
          <p class="text-muted">That depends on the form. Some work translates well online. Some is better held in person or seasonally.</p>
        </div>

        <div class="mb-4">
          <h5 class="fw-semibold mb-2">What if I don’t know what I need yet?</h5>
          <p class="text-muted">That is a normal place to begin. Start with what feels most relevant and let the next step clarify from there.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section class="py-5 bg-bone border-top" id="contact">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10 col-xl-9">
        
        <div class="text-center mb-5">
          <p class="eyebrow mb-2">Contact</p>
          <h2 class="fw-semibold mb-3">Make contact.</h2>
          <p class="text-muted mx-auto" style="max-width: 680px;">
            If something here is relevant to you, you can reach out. A few clear sentences is enough.
          </p>
        </div>

        <div id="contactrequest" class="soft-card p-4 p-md-5">
          <div class="row g-4">
            
            <!-- Left -->
            <div class="col-lg-5">
              <p class="eyebrow mb-2">First contact</p>
              <h5 class="fw-semibold mb-3">Start simply.</h5>
              <p class="text-muted mb-0">
                Describe what is happening, or what is unclear. The rest can be worked out from there.
              </p>
            </div>

            <!-- Form -->
            <div class="col-lg-7">
              <form 
                data-ajax-post=""
                data-target="#contactrequest"
                action="/skyinside/submitcontact.html?oemaxlevel=1"
                method="post"
              >
                
                <div class="row g-3">
                  
                  <div class="col-md-6">
                    <label class="form-label">First Name</label>
                    <input type="hidden" name="field" value="firstname">
                    <input class="form-control form-control-lg" name="firstname.value">
                  </div>

                  <div class="col-md-6">
                    <label class="form-label">Last Name</label>
                    <input type="hidden" name="field" value="lastname">
                    <input class="form-control form-control-lg" name="lastname.value">
                  </div>

                  <div class="col-12">
                    <label class="form-label">Email</label>
                    <input type="hidden" name="field" value="email">
                    <input class="form-control form-control-lg" type="email" name="email.value">
                  </div>

                  <div class="col-12">
                    <label class="form-label">Phone <span class="text-muted">(optional)</span></label>
                    <input type="hidden" name="field" value="phone">
                    <input class="form-control form-control-lg" name="phone.value">
                  </div>

                  <div class="col-12">
                    <label class="form-label">Subject</label>
                    <input type="hidden" name="field" value="subject">
                    <input class="form-control form-control-lg" name="subject.value" value="Sky Inside the Mountain Inquiry">
                  </div>

                  <div class="col-12">
                    <label class="form-label">Message</label>
                    <input type="hidden" name="field" value="comment">
                    <textarea class="form-control" name="comment.value" rows="6" placeholder="What is happening, or what brings you here..."></textarea>
                  </div>

                  <div class="col-12 pt-2">
                    <input type="hidden" name="to" value="$content.defaultrecipient">
                    <button type="submit" class="btn btn-dark btn-lg px-4">
                      Send Message
                    </button>
                  </div>

                </div>

              </form>
            </div>

          </div>
        </div>

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