<style>
  .bg-slate { background-color: #373f49; }
  .bg-ash { background-color: #f7f4ef; }
  .bg-bone { background-color: #fcfbf8; }

  .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;
  }

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

  .hero-reading {
    font-size: 1.1rem;
    line-height: 1.9;
    max-width: 820px;
    color: rgba(255,255,255,0.88);
  }

  .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;
  }

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

  .service-card h4 {
    letter-spacing: -0.01em;
  }

  .service-card ul li {
    margin-bottom: 0.5rem;
  }

  /* STATIC, GROUNDED HERO */
  .hero-static-image {
    position: relative;
    background-image: url('$apphome/theme/images/gabriela-tamara-cycman--ZrBwm3nbXI-unsplash.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .hero-static-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(34, 39, 44, 0.4),
      rgba(40, 46, 52, 0.6)
    );
    z-index: 1;
  }

  .hero-static-image > .container {
    position: relative;
    z-index: 2;
  }
</style>

<!-- HERO -->
<section class="py-5 hero-static-image text-white">
  <div class="container">
    <p class="eyebrow-light mb-3">Services</p>

    <h1 class="display-5 fw-semibold mb-4">
      Tending the Garden
    </h1>

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

    <p class="hero-reading mb-0">
      Much of what shapes a life happens beneath the surface.
      <br><br>
      Like roots, soil, and unseen weather, the most important conditions are often not the most visible ones.
      <br><br>
      This work is concerned with tending those conditions — so that what is trying to grow can do so with more clarity, more strength, and more reality.
    </p>
  </div>
</section>

<!-- INTRO -->
<section class="py-5 bg-bone">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">

        <p class="eyebrow mb-2">What this work is</p>
        <h2 class="fw-semibold mb-4">Not fixing. Not bypassing. Not performance.</h2>

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

        <div class="section-reading">
          <p>
            The work offered here is not about applying a spiritual identity, receiving a perfect answer, or being “healed” into some idealized version of yourself.
          </p>

          <p>
            It is about coming into more conscious relationship with what is actually happening — in attention, in the body, in the symbolic life, in the nervous system, in the deeper movements of psyche and spirit.
          </p>

          <p class="mb-0">
            Some of this work is clarifying. Some of it is restorative. Some of it is disruptive in the necessary sense — helping loosen what has become fixed, hidden, or unconsciously binding.
          </p>
        </div>

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

<!-- OFFERINGS INTRO -->
<section class="py-5 bg-white border-top">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">Offerings</p>
      <h2 class="fw-semibold">Different forms for different kinds of work.</h2>
      <p class="text-muted mx-auto" style="max-width: 760px;">
        Not every process asks for the same kind of support. These are different ways of working with what is active, obscured, or trying to come into form.
      </p>
    </div>

    <div class="row g-4">

      <!-- Shamanic Healing -->
      <div class="col-lg-6">
        <div class="soft-card p-4 p-md-5 h-100 service-card">
          <p class="eyebrow mb-2">01</p>
          <h4 class="fw-semibold mb-3">Shamanic Healing</h4>
          <p class="mb-3">
            Shamanic healing works directly with the deeper energetic and spiritual conditions shaping a person’s experience.
          </p>
          <p class="mb-3">
            This may involve clearing, restoration, retrieval, extraction, or other forms of intervention depending on what is present and appropriate.
          </p>
          <p class="mb-3">
            It is often most helpful when something feels persistently “off,” stuck, drained, fragmented, or difficult to fully explain through ordinary means.
          </p>
          <ul class="mb-0">
            <li>For energetic depletion, spiritual disruption, or loss of vitality</li>
            <li>For recurring patterns that feel deeper than surface psychology alone</li>
            <li>For restoration, reorganization, and clearing</li>
          </ul>
        </div>
      </div>

      <!-- Power Entrainment -->
      <div class="col-lg-6">
        <div class="soft-card p-4 p-md-5 h-100 service-card">
          <p class="eyebrow mb-2">02</p>
          <h4 class="fw-semibold mb-3">Power Entrainment</h4>
          <p class="mb-3">
            Power entrainment is concerned with helping a person come back into right relationship with their own energy, agency, and capacity.
          </p>
          <p class="mb-3">
            This is not about force, dominance, or amplification for its own sake. It is about coherence — recovering enough internal alignment to act, choose, and move with more integrity.
          </p>
          <p class="mb-3">
            It can be especially useful during times of fragmentation, collapse, passivity, or after long periods of over-adaptation.
          </p>
          <ul class="mb-0">
            <li>For reconnecting with will, vitality, and internal steadiness</li>
            <li>For recovering momentum after depletion or disorientation</li>
            <li>For strengthening the capacity to act from what is actually yours</li>
          </ul>
        </div>
      </div>

      <!-- Journey Counselling -->
      <div class="col-lg-6">
        <div class="soft-card p-4 p-md-5 h-100 service-card">
          <p class="eyebrow mb-2">03</p>
          <h4 class="fw-semibold mb-3">Journey Counselling</h4>
          <p class="mb-3">
            Journey counselling offers a place to work through what is unfolding in real time — especially when a person is in transition, confusion, threshold, grief, or symbolic intensity.
          </p>
          <p class="mb-3">
            It is conversational, but not merely advisory. The aim is not to provide canned answers, but to help clarify what is happening and what relationship to it is being asked for.
          </p>
          <p class="mb-3">
            This is often the best starting point when someone knows something important is happening, but does not yet know what kind of support fits.
          </p>
          <ul class="mb-0">
            <li>For transition, discernment, confusion, and deep process</li>
            <li>For those navigating a threshold or symbolic / spiritual intensity</li>
            <li>For making meaning without collapsing into abstraction</li>
          </ul>
        </div>
      </div>

      <!-- Divination -->
      <div class="col-lg-6">
        <div class="soft-card p-4 p-md-5 h-100 service-card">
          <p class="eyebrow mb-2">04</p>
          <h4 class="fw-semibold mb-3">Divination</h4>
          <p class="mb-3">
            Divination is a way of asking better questions and listening more carefully to what is present beneath immediate appearances.
          </p>
          <p class="mb-3">
            It can offer orientation when something is unclear, hidden, or difficult to grasp directly — not as fate, but as relationship with meaning, timing, and pattern.
          </p>
          <p class="mb-3">
            This work is especially useful when a person is at a crossroads, uncertain about direction, or trying to understand what is actually at play.
          </p>
          <ul class="mb-0">
            <li>For crossroads, uncertainty, and symbolic clarification</li>
            <li>For understanding the deeper shape of a situation</li>
            <li>For guidance without outsourcing responsibility</li>
          </ul>
        </div>
      </div>

      <!-- Group Work -->
      <div class="col-lg-12">
        <div class="soft-card p-4 p-md-5 service-card">
          <p class="eyebrow mb-2">05</p>
          <h4 class="fw-semibold mb-3">Group Work</h4>
          <p class="mb-3">
            Some work is best done in company.
          </p>
          <p class="mb-3">
            Group offerings may include guided journeys, circles, teachings, ritual process, or other containers designed for collective learning and shared encounter.
          </p>
          <p class="mb-0">
            These are not performances or identity spaces. They are intentional forms for practice, witness, and deeper contact.
          </p>
        </div>
      </div>

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

<!-- HOW IT WORKS -->
<section class="py-5 bg-ash border-top">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">

        <p class="eyebrow mb-2">How it works</p>
        <h2 class="fw-semibold mb-4">A practical frame.</h2>

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

        <div class="section-reading">
          <p>
            Some offerings are best approached directly. Others are best entered through conversation first.
          </p>

          <p>
            If you are not sure what is appropriate, that is normal. Often the first step is simply clarifying what is happening and what kind of work it is asking for.
          </p>

          <p>
            Sessions may be remote or, when appropriate, held in other forms depending on timing and context.
          </p>

          <p class="mb-0">
            This work is relational and responsive. It is not one-size-fits-all, and it is not designed to produce quick certainty where something deeper is actually required.
          </p>
        </div>

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

<!-- WHO THIS IS FOR -->
<section class="py-5 bg-white border-top">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow mb-2">Who this is for</p>
      <h2 class="fw-semibold">People tend to seek this work 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">
          <h5 class="fw-semibold mb-3">When something is active but unclear</h5>
          <p class="mb-0">A sense that something important is moving, but without a clear map for understanding or engaging it.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100">
          <h5 class="fw-semibold mb-3">When ordinary approaches are no longer enough</h5>
          <p class="mb-0">When what is happening does not fit neatly into familiar frameworks, but still requires real attention.</p>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="soft-card p-4 h-100">
          <h5 class="fw-semibold mb-3">When support is needed without being managed</h5>
          <p class="mb-0">For those who want real engagement, not passive reassurance or borrowed certainty.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA LINKS -->
<section class="py-5 bg-bone border-top">
  <div class="container text-center">
    <p class="eyebrow mb-2">Orientation</p>
    <h2 class="fw-semibold mb-4">If you need more context first, begin there.</h2>
    <p class="text-muted mx-auto mb-4" style="max-width: 720px;">
      The writing and About page provide a fuller sense of the worldview and framework behind the work.
    </p>

    <div class="d-flex justify-content-center gap-3 flex-wrap">
      <a href="/skyinside/views/blog/" class="btn btn-dark btn-lg">Read the Writings</a>
      <a href="/skyinside/about.html" class="btn btn-outline-dark btn-lg">About the Work</a>
    </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">Begin with a few clear words.</h2>
          <p class="text-muted mx-auto" style="max-width: 680px;">
            If you want to inquire about working together, describe what is happening or what feels relevant. That is enough to begin.
          </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">A simple beginning.</h5>
              <p class="text-muted mb-0">
                You do not need to know exactly what kind of work you need. A brief description is enough.
              </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 Services 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 kind of support are you looking for..."></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>