book.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Request tech support — ohgeeceee</title>
  <meta name="description" content="Request remote tech help or an on-site visit in Montana. Tell me what is happening and I’ll follow up to confirm a time.">
  <meta name="theme-color" content="#FAF7F2">
  <link rel="canonical" href="https://ohgeec.com/book.html">
  <link rel="preload" href="/fonts/fraunces-var.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="/fonts.css">
  <link rel="stylesheet" href="/portfolio.css">
  <script src="/intake.js" defer></script>
</head>
<body class="booking-page">
  <header class="topbar">
    <a class="brand" href="/" aria-label="ohgeeceee network home">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="5" r="2.4" fill="#14110E"></circle>
        <circle cx="5" cy="17" r="2.4" fill="#14110E"></circle>
        <circle cx="19" cy="17" r="2.4" fill="#14110E"></circle>
        <path d="M12 6.6 5.6 15.4M12 6.6l6.4 8.8M6.6 17.6h10.8" stroke="#14110E" stroke-width="1.3" stroke-linecap="round"></path>
      </svg>
      <b>ohgeec.com</b>
    </a>
    <span class="coords">46.8797&deg; N, 110.3626&deg; W &mdash; Montana</span>
    <nav aria-label="Main navigation">
      <a href="/">Home</a>
      <a href="/tech-support/">Guides</a>
      <a href="/support.html" class="nav-support">Support</a>
    </nav>
  </header>

  <main class="booking-main">
    <section class="booking-hero" aria-labelledby="booking-hero-title">
      <div class="booking-hero__inner">
        <div class="booking-hero__copy">
          <p class="eyebrow">Tech support / Montana &amp; beyond</p>
          <h1 id="booking-hero-title">When tech gets in the way,<br><em>we’ll work through it.</em></h1>
          <p class="booking-lede" id="booking-hero-copy">Remote help for computers, Wi-Fi, and the devices around your home. On-site visits are available across Montana. Tell me what’s going on and I’ll follow up to confirm a time.</p>
          <a class="hero-link" id="booking-hero-cta" href="#book"><span id="booking-hero-cta-label">Make a service request</span><span aria-hidden="true">&rarr;</span></a>
        </div>
        <aside class="booking-promise" aria-label="A few things to know">
          <p class="booking-promise__label">A few things to know</p>
          <p class="booking-promise__lead">A request starts a conversation. It isn’t a confirmed appointment.</p>
          <ul>
            <li>Remote or on-site support</li>
            <li>Plain-English answers, no jargon</li>
            <li>No passwords or payment details in the form</li>
          </ul>
        </aside>
      </div>
    </section>

    <section class="booking-services" id="service-overview" aria-labelledby="services-title">
      <div class="booking-section-head">
        <p class="eyebrow">How it works</p>
        <h2 id="services-title">A useful next step,<br><em>without the runaround.</em></h2>
      </div>
      <div class="booking-steps">
        <article class="booking-step">
          <span class="booking-step__number">01</span>
          <h3>Tell me what’s up</h3>
          <p>Share a short description and the best way to reach you. A town or county is enough for on-site planning.</p>
        </article>
        <article class="booking-step">
          <span class="booking-step__number">02</span>
          <h3>We’ll pick a time</h3>
          <p>I’ll reply to confirm availability, the right service, and what it will cost before work begins.</p>
        </article>
        <article class="booking-step">
          <span class="booking-step__number">03</span>
          <h3>Get back to your day</h3>
          <p>We’ll work through the issue remotely or plan an on-site visit anywhere in Montana.</p>
        </article>
      </div>
    </section>

    <section class="booking-pricing" id="remote-pricing" aria-labelledby="pricing-title">
      <div class="booking-section-head booking-section-head--row">
        <div>
          <p class="eyebrow">Remote support</p>
          <h2 id="pricing-title">Straightforward<br><em>starting points.</em></h2>
        </div>
        <p>We’ll confirm the right session and total before I start. No surprise add-ons.</p>
      </div>
      <div class="booking-price-grid">
        <article class="booking-price">
          <p class="booking-price__label">Quick fix</p>
          <p class="booking-price__amount">$39 <span>/ 30 min</span></p>
          <p>One issue, a quick question, or a small setup task.</p>
        </article>
        <article class="booking-price booking-price--featured">
          <p class="booking-price__label">Most requested</p>
          <p class="booking-price__amount">$69 <span>/ 60 min</span></p>
          <p>Time for most troubleshooting, cleanup, and setup work.</p>
        </article>
        <article class="booking-price">
          <p class="booking-price__label">Extended session</p>
          <p class="booking-price__amount">$119 <span>/ 2 hrs</span></p>
          <p>For multi-device help, data moves, or more involved issues.</p>
        </article>
      </div>
    </section>

    <section class="booking-request" id="book" aria-labelledby="request-heading">
      <div class="booking-request__inner">
        <div class="booking-request__intro">
          <p class="eyebrow">Service request / 01</p>
          <h2 id="request-heading">What can I<br><em>help with?</em></h2>
          <p>Share only what’s needed to plan support. I’ll reply using your preferred contact method and confirm a time with you.</p>
          <p class="booking-request__privacy">Please don’t include passwords, Wi-Fi credentials, payment details, or account recovery codes. <a href="/privacy.html">Read the privacy note</a>.</p>
          <a class="booking-back" href="/tech-support/">Back to the Montana tech guides <span aria-hidden="true">&rarr;</span></a>
        </div>

        <form class="request-form" id="service-request" data-intake-form data-intake-enabled="true" data-intake-endpoint="https://parrot.tail60dba7.ts.net:8443/v1/intake">
          <input type="hidden" id="request-type" name="requestType" value="website_request">
          <input type="hidden" id="source-page" name="sourcePage" value="/book.html">
          <div class="request-form__honeypot" aria-hidden="true">
            <label for="website">Leave this field empty</label>
            <input id="website" name="website" type="text" tabindex="-1" autocomplete="off">
          </div>

          <div class="form-field">
            <label for="name">Your name <span aria-hidden="true">*</span></label>
            <input id="name" name="name" type="text" maxlength="120" autocomplete="name" required>
          </div>
          <div class="form-field">
            <label for="preferred-contact">Best way to reach you <span aria-hidden="true">*</span></label>
            <select id="preferred-contact" name="preferredContact" required>
              <option value="">Choose one</option>
              <option value="phone">Phone call</option>
              <option value="sms">Text message</option>
              <option value="email">Email</option>
            </select>
          </div>
          <div class="form-field">
            <label for="email">Email</label>
            <input id="email" name="email" type="email" maxlength="254" autocomplete="email">
          </div>
          <div class="form-field">
            <label for="phone">Phone</label>
            <input id="phone" name="phone" type="tel" maxlength="32" autocomplete="tel">
          </div>
          <div class="form-field">
            <label for="location">Town or county <span class="form-field__hint">required for on-site</span></label>
            <input id="location" name="location" type="text" maxlength="120" placeholder="No street address needed" autocomplete="address-level2">
          </div>
          <div class="form-field">
            <label for="service-mode">How should we help? <span aria-hidden="true">*</span></label>
            <select id="service-mode" name="serviceMode" required>
              <option value="undecided">Not sure yet</option>
              <option value="remote">Remote</option>
              <option value="onsite">On-site in Montana</option>
            </select>
          </div>
          <div class="form-field">
            <label for="service">What do you need? <span aria-hidden="true">*</span></label>
            <select id="service" name="service" required>
              <option value="">Choose a service</option>
              <option value="virus_malware">Virus &amp; malware removal</option>
              <option value="setup_optimization">Setup &amp; optimization</option>
              <option value="data_recovery">Data backup &amp; recovery</option>
              <option value="software_help">Software &amp; app help</option>
              <option value="network_wifi">Network &amp; Wi-Fi</option>
              <option value="starlink_setup">Starlink setup</option>
              <option value="tutoring">One-on-one tutoring</option>
              <option value="other">Something else</option>
            </select>
          </div>
          <div class="form-field">
            <label for="device-type">Device or equipment</label>
            <input id="device-type" name="deviceType" type="text" maxlength="120" placeholder="Starlink, router, laptop…">
          </div>
          <div class="form-field">
            <label for="date">Preferred date <span class="form-field__hint">optional</span></label>
            <input id="date" name="date" type="date">
          </div>
          <div class="form-field">
            <label for="time">Preferred time <span class="form-field__hint">optional</span></label>
            <input id="time" name="time" type="time">
          </div>
          <div class="form-field form-field--full">
            <label for="message">A little about what’s happening <span aria-hidden="true">*</span></label>
            <textarea id="message" name="message" maxlength="2000" placeholder="What is the device doing? What have you already tried? Please leave out passwords and account details." required></textarea>
          </div>
          <div class="form-field form-field--full">
            <label class="form-consent"><input id="consent" name="consentToContact" type="checkbox" required> <span>I agree to be contacted about this service request.</span></label>
            <p class="form-note">Your request is sent over HTTPS to the private service system. A date or time here is a preference, not a confirmed booking.</p>
            <p id="intake-status" class="form-status" role="status" aria-live="polite"></p>
            <button class="request-submit" id="intake-submit" type="submit" disabled>Send request <span aria-hidden="true">&rarr;</span></button>
            <noscript><p class="form-note">This form needs JavaScript. Please use the contact details on the <a href="/tech-support/">support page</a>. Do not email passwords.</p></noscript>
          </div>
        </form>
      </div>
    </section>
  </main>

  <footer class="site">
    <span>ohgeeceee &mdash; built by hand in Montana.</span>
    <span><a href="/privacy.html">Service request privacy</a></span>
    <span>&copy; <span id="yr">2026</span> the ohgeeceee network &mdash; <a href="https://github.com/ohgeeceee" rel="noopener">GitHub</a></span>
  </footer>
</body>
</html>