about.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About — Markmix Digital</title>
<meta name="description" content="Markmix Digital is a small, senior digital agency covering web development and social media growth for ambitious brands.">
<meta name="theme-color" content="#0E1116">
<link rel="icon" href="https://cdn.jsdelivr.net/gh/Markmix-Studios/msl-favicons/favicon-144.png">

<!-- Open Graph -->
<meta property="og:title" content="About — Markmix Digital">
<meta property="og:description" content="A small, senior digital agency covering web development and social media growth.">
<meta property="og:type" content="website">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
  <nav class="wrap">
    <a href="index.html" class="logo">
      <span class="mark" aria-hidden="true"></span>
      Markmix Digital
    </a>
    <ul class="navlinks" id="navlinks">
      <li><a href="index.html">Home</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="about.html" aria-current="page">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="contact.html" class="cta-btn">Start a project</a></li>
    </ul>
    <button class="navtoggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="navlinks">
      <span></span><span></span><span></span>
    </button>
  </nav>
</header>

<main id="top">

  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="wrap">
      <p class="eyebrow">ABOUT THE AGENCY</p>
      <h1>Technology, made accessible.</h1>
      <p class="lead">Markmix Digital was built on a simple idea: turning ideas into practical, impactful online experiences shouldn't require a huge budget or a technical background.</p>
    </div>
  </section>

  <div class="wrap"><div class="divider"></div></div>

  <!-- ABOUT CONTENT -->
  <section class="pad" id="about">
    <div class="wrap">
      <div class="strip reveal">
        <div>
          <p class="eyebrow">HOW WE'RE BUILT</p>
          <h2>One dedicated team, every service.</h2>
          <p>We work across web development and social media growth, so clients can get every piece of their digital presence from one dedicated team instead of stitching together freelancers and vendors.</p>
          <p>We're a small agency by design — big enough to cover a full stack of digital services, small enough that every project gets senior attention from start to finish.</p>
        </div>
        <div class="strip-stats">
          <div class="stat"><b>2</b><span>Core service lines under one roof</span></div>
          <div class="stat"><b>1</b><span>Dedicated team, start to finish</span></div>
          <div class="stat"><b>0</b><span>Templates — every build is custom</span></div>
          <div class="stat"><b>24/7</b><span>Support &amp; uptime monitoring</span></div>
        </div>
      </div>
    </div>
  </section>

  <div class="wrap"><div class="divider"></div></div>

  <!-- VALUES -->
  <section class="pad">
    <div class="wrap">
      <div class="sec-head reveal">
        <p class="eyebrow">HOW WE WORK</p>
        <h2>What matters to us on every project.</h2>
        <p>These aren't slogans — they're the standards we hold each engagement to.</p>
      </div>

      <div class="values-grid">
        <div class="value reveal">
          <h3>Craft over templates</h3>
          <p>Every build starts from a blank canvas. If it looks like everyone else's site, we haven't done our job.</p>
        </div>
        <div class="value reveal">
          <h3>Senior attention, always</h3>
          <p>No junior handoffs. The people who scope your project are the people who build it.</p>
        </div>
        <div class="value reveal">
          <h3>Built to perform</h3>
          <p>Speed, clarity and reliability aren't add-ons — they're part of the brief from day one.</p>
        </div>
      </div>
    </div>
  </section>

  <div class="wrap"><div class="divider"></div></div>

  <!-- CTA BAND -->
  <section class="pad">
    <div class="wrap">
      <div class="cta-band reveal">
        <p class="eyebrow">GET STARTED</p>
        <h2>Want to work with us?</h2>
        <p>Tell us what you're working on and we'll get back to you with next steps.</p>
        <div class="hero-actions">
          <a href="contact.html" class="cta-btn">Start a project →</a>
        </div>
      </div>
    </div>
  </section>

</main>

<footer>
  <div class="wrap footer-row">
    <p>© 2026 Markmix Digital. All rights reserved.</p>
    <div class="footer-links">
      <a href="index.html">Home</a>
      <a href="services.html">Services</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </div>
  </div>
</footer>

<script src="script.js" defer></script>

</body>
</html>