Less.
Better.

<section class="sly-orbit" aria-labelledby="sly-orbit-title">
  <header class="sly-orbit__heading">
    <p>Three ways forward</p>
    <h2 id="sly-orbit-title">Give the work a clearer signal.</h2>
  </header>

  <div class="sly-orbit__grid">
    <article class="sly-orbit__card" style="--accent:#ff5f3d">
      <div class="sly-orbit__mark" aria-hidden="true"><span>01</span><i></i><i></i></div>
      <p class="sly-orbit__kicker">Strategy</p>
      <h3>Find the sharp idea.</h3>
      <p>Clarify the audience, the promise, and the one action the page must earn.</p>
      <details>
        <summary>What this includes <b aria-hidden="true">+</b></summary>
        <p>Positioning, priorities, content hierarchy, and a practical path from first glance to next step.</p>
      </details>
    </article>

    <article class="sly-orbit__card" style="--accent:#5a7dff">
      <div class="sly-orbit__mark" aria-hidden="true"><span>02</span><i></i><i></i></div>
      <p class="sly-orbit__kicker">Design</p>
      <h3>Build a visual system.</h3>
      <p>Give type, color, spacing, and movement one recognizable point of view.</p>
      <details>
        <summary>What this includes <b aria-hidden="true">+</b></summary>
        <p>A responsive composition, reusable design tokens, visible focus, and motion that never blocks the message.</p>
      </details>
    </article>

    <article class="sly-orbit__card" style="--accent:#d8ff58">
      <div class="sly-orbit__mark" aria-hidden="true"><span>03</span><i></i><i></i></div>
      <p class="sly-orbit__kicker">Delivery</p>
      <h3>Make it hold up.</h3>
      <p>Test the experience where real visitors will read, tap, scroll, and decide.</p>
      <details>
        <summary>What this includes <b aria-hidden="true">+</b></summary>
        <p>Mobile behavior, accessibility, performance, metadata, and a clean handoff with no hidden dependency.</p>
      </details>
    </article>
  </div>
</section>

<style>
  .sly-orbit { --ink:#151513; --paper:#f3efe5; box-sizing:border-box; max-width:76rem; margin-inline:auto; padding:clamp(2rem,6vw,5rem); color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; }
  .sly-orbit *, .sly-orbit *::before, .sly-orbit *::after { box-sizing:border-box; }
  .sly-orbit__heading { display:grid; grid-template-columns:minmax(8rem,.5fr) 2fr; gap:1.5rem; align-items:end; margin-bottom:2rem; }
  .sly-orbit__heading p, .sly-orbit__kicker { margin:0; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
  .sly-orbit__heading h2 { max-width:14ch; margin:0; font:800 clamp(2.5rem,7vw,6.5rem)/.86 Arial,sans-serif; letter-spacing:-.075em; }
  .sly-orbit__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
  .sly-orbit__card { min-width:0; padding:clamp(1.35rem,3vw,2.5rem); border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:#fffdf7; }
  .sly-orbit__mark { position:relative; display:grid; place-items:center; width:5.75rem; aspect-ratio:1; margin-bottom:clamp(2rem,5vw,4.5rem); border:1px solid var(--ink); border-radius:50%; }
  .sly-orbit__mark span { font:800 1.15rem/1 Arial,sans-serif; }
  .sly-orbit__mark i { position:absolute; inset:-5px; border:1px solid transparent; border-radius:50%; animation:sly-orbit-spin 5s linear infinite; }
  .sly-orbit__mark i::before { content:""; position:absolute; top:-4px; left:50%; width:9px; aspect-ratio:1; border-radius:50%; background:var(--accent); transform:translateX(-50%); }
  .sly-orbit__mark i + i { inset:-12px; animation-duration:8s; animation-direction:reverse; }
  .sly-orbit__mark i + i::before { top:auto; bottom:-3px; width:6px; }
  .sly-orbit__card h3 { min-height:2.1em; margin:.7rem 0 1rem; font:700 clamp(1.6rem,3vw,2.6rem)/.95 Georgia,serif; letter-spacing:-.045em; }
  .sly-orbit__card > p:not(.sly-orbit__kicker) { min-height:4.7em; margin:0; font-size:1rem; line-height:1.55; }
  .sly-orbit__card details { margin-top:2rem; border-top:1px solid var(--ink); }
  .sly-orbit__card summary { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; cursor:pointer; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; list-style:none; }
  .sly-orbit__card summary::-webkit-details-marker { display:none; }
  .sly-orbit__card summary b { color:var(--accent); font-size:1.3rem; transition:transform .25s ease; }
  .sly-orbit__card details[open] summary b { transform:rotate(45deg); }
  .sly-orbit__card details p { margin:0 0 1rem; font-size:.92rem; line-height:1.55; }
  .sly-orbit__card:where(:hover,:focus-within) .sly-orbit__mark i { animation-play-state:paused; }
  .sly-orbit__card summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
  @keyframes sly-orbit-spin { to { transform:rotate(1turn); } }
  @media (max-width:760px) { .sly-orbit__heading { grid-template-columns:1fr; } .sly-orbit__grid { grid-template-columns:1fr; } .sly-orbit__card h3, .sly-orbit__card > p:not(.sly-orbit__kicker) { min-height:0; } }
  @media (prefers-reduced-motion:reduce) { .sly-orbit__mark i { animation:none; } .sly-orbit__card summary b { transition:none; } }
</style>