Client Case Studies Table Section

<section class="sm:px-6 lg:px-8 lg:py-10 max-w-6xl mt-24 mr-auto mb-24 ml-auto pt-6 pr-4 pb-10 pl-4">
  <style id="border-gradient-shared-style">
  [style*="--border-gradient"]::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: var(--border-radius-before, inherit);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: var(--border-gradient);
    pointer-events: none;
  }</style>
  <div class="flex flex-col gap-8">
    <!-- Header -->
    <div class="flex flex-col gap-2">
      <p class="text-xs font-medium uppercase tracking-[0.18em] text-slate-500">
        Client casebook
      </p>
      <h2 class="text-4xl sm:text-5xl lg:text-[40px] font-semibold tracking-tight text-slate-50">
        Success stories from brands that bet on narrative first.
      </h2>
      <p class="text-base sm:text-lg text-slate-400 max-w-2xl">
        A cross-section of teams that traded crowded feeds for considered stories—pairing disciplined production with
        measurable lift in the metrics that matter.
      </p>
    </div>

    <!-- Table-like layout -->
    <div class="overflow-hidden bg-gradient-to-br from-white/10 to-white/0 rounded-3xl"
      style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
      <!-- Header row -->
      <div
        class="hidden md:grid grid-cols-12 text-[11px] uppercase font-medium text-slate-500 tracking-[0.16em] bg-slate-950/80 border-slate-800/80 border-b pt-3 pr-4 pb-3 pl-4">
        <div class="col-span-3">Sector</div>
        <div class="col-span-4">Client</div>
        <div class="col-span-2">Challenge</div>
        <div class="col-span-2">Outcome</div>
        <div class="col-span-1 flex justify-end">
          <span class="sr-only">Link</span>
        </div>
      </div>

      <!-- Row 1 -->
      <article class="border-slate-800/80 border-b">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 md:py-5 pt-4 pr-4 pb-4 pl-4 gap-x-4 gap-y-4">
          <div class="md:col-span-3 flex flex-col gap-1 text-sm text-slate-400">
            <span class="font-medium text-slate-200 tracking-tight">
              Product &amp; furniture design
            </span>
            <span class="text-[11px]">
              18 launches documented
            </span>
          </div>

          <div class="md:col-span-4 flex items-start">
            <div class="flex flex-col gap-1">
              <span class="text-base sm:text-lg font-semibold tracking-tight text-slate-50">
                Meridian Objects Studio
              </span>
              <p class="text-sm text-slate-400 max-w-md">
                Multi-city studio reintroducing analog craft to modular lighting systems.
              </p>
            </div>
          </div>

          <div class="md:col-span-2 flex items-start">
            <p class="text-sm text-slate-400">
              Launch fatigue across channels, with static product shots underperforming video by 4x.
            </p>
          </div>

          <div class="md:col-span-2 flex flex-col gap-1 text-sm text-slate-300">
            <div class="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-emerald-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                style="color: rgb(110, 231, 183); width: 14px; height: 14px;" class="w-[14px] h-[14px]"
                data-solar="pie-chart-2-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
                <path fill="#6ee7b7"
                  d="M6.222 4.601a9.5 9.5 0 0 1 1.395-.771c1.372-.615 2.058-.922 2.97-.33c.913.59.913 1.56.913 3.5v1.5c0 1.886 0 2.828.586 3.414s1.528.586 3.414.586H17c1.94 0 2.91 0 3.5.912c.592.913.285 1.599-.33 2.97a9.5 9.5 0 0 1-10.523 5.435A9.5 9.5 0 0 1 6.222 4.601"
                  opacity=".5" class=""></path>
                <path fill="#6ee7b7"
                  d="M21.446 7.069a8.03 8.03 0 0 0-4.515-4.515C15.389 1.947 14 3.344 14 5v4a1 1 0 0 0 1 1h4c1.657 0 3.053-1.39 2.446-2.931"
                  class=""></path>
              </svg>
              Impact
            </div>
            <p class="text-sm text-slate-300">
              212% lift in launch-week saves and a 41% increase in DMs tagged with product names.
            </p>
          </div>

          <div class="md:col-span-1 flex items-start justify-end">
            <button class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-800/80 bg-slate-900/80 text-slate-300 hover:text-slate-50 hover:border-slate-700 transition">
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" style="width: 15px; height: 15px; color: rgb(248, 250, 252);" class="w-[15px] h-[15px]" data-solar="circle-top-up-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#f8fafc" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" class=""></path><path fill="#f8fafc" fill-rule="evenodd" d="M12.47 11.53a.75.75 0 0 1 0-1.06l7.72-7.72h-3.534a.75.75 0 0 1 0-1.5H22a.75.75 0 0 1 .75.75v5.344a.75.75 0 0 1-1.5 0V3.81l-7.72 7.72a.75.75 0 0 1-1.06 0" clip-rule="evenodd" class=""></path></svg>
            </button>
          </div>
        </div>
      </article>

      <!-- Row 2 -->
      <article class="border-b border-slate-800/80">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-4 py-4 md:py-5">
          <div class="md:col-span-3 flex flex-col gap-1 text-sm text-slate-400">
            <span class="font-medium text-slate-200 tracking-tight">
              Digital health platforms
            </span>
            <span class="text-[11px]">
              7 markets, 3 languages
            </span>
          </div>

          <div class="md:col-span-4 flex items-start">
            <div class="flex flex-col gap-1">
              <span class="text-base sm:text-lg font-semibold tracking-tight text-slate-50">
                HelioCare Collective
              </span>
              <p class="text-sm text-slate-400 max-w-md">
                Remote-first care provider simplifying long-term treatment plans for young professionals.
              </p>
            </div>
          </div>

          <div class="md:col-span-2 flex items-start">
            <p class="text-sm text-slate-400">
              Fragmented onboarding journey and low completion rate on first-session questionnaires.
            </p>
          </div>

          <div class="md:col-span-2 flex flex-col gap-1 text-sm text-slate-300">
            <div class="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-sky-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                style="color: rgb(125, 211, 252); width: 14px; height: 14px;" class="w-[14px] h-[14px]"
                data-solar="chart-2-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
                <path fill="#7dd3fc"
                  d="M3.293 9.293C3 9.586 3 10.057 3 11v6c0 .943 0 1.414.293 1.707S4.057 19 5 19s1.414 0 1.707-.293S7 17.943 7 17v-6c0-.943 0-1.414-.293-1.707S5.943 9 5 9s-1.414 0-1.707.293"
                  class=""></path>
                <path fill="#7dd3fc"
                  d="M17.293 2.293C17 2.586 17 3.057 17 4v13c0 .943 0 1.414.293 1.707S18.057 19 19 19s1.414 0 1.707-.293S21 17.943 21 17V4c0-.943 0-1.414-.293-1.707S19.943 2 19 2s-1.414 0-1.707.293"
                  opacity=".4" class=""></path>
                <path fill="#7dd3fc"
                  d="M10 7c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v10c0 .943 0 1.414-.293 1.707S12.943 19 12 19s-1.414 0-1.707-.293S10 17.943 10 17z"
                  opacity=".7" class=""></path>
                <path fill="#7dd3fc" d="M3 21.25a.75.75 0 0 0 0 1.5h18a.75.75 0 0 0 0-1.5z" class=""></path>
              </svg>
              Retention
            </div>
            <p class="text-sm text-slate-300">
              63% improvement in onboarding completion and a 27% rise in first-month session adherence.
            </p>
          </div>

          <div class="md:col-span-1 flex items-start justify-end">
            <button class="inline-flex hover:text-slate-50 hover:border-slate-700 transition text-slate-300 bg-slate-900/80 w-8 h-8 border-slate-800/80 border rounded-full items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" style="width: 15px; height: 15px; color: rgb(248, 250, 252)" class="w-[15px] h-[15px]" data-solar="circle-top-up-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#f8fafc" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" class=""></path><path fill="#f8fafc" fill-rule="evenodd" d="M12.47 11.53a.75.75 0 0 1 0-1.06l7.72-7.72h-3.534a.75.75 0 0 1 0-1.5H22a.75.75 0 0 1 .75.75v5.344a.75.75 0 0 1-1.5 0V3.81l-7.72 7.72a.75.75 0 0 1-1.06 0" clip-rule="evenodd" class=""></path></svg>
            </button>
          </div>
        </div>
      </article>

      <!-- Row 3 (highlighted, with expanded details on small screens) -->
      <article class="">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-4 py-5">
          <div class="md:col-span-3 flex flex-col gap-1 text-sm text-slate-400">
            <span class="font-medium text-slate-200 tracking-tight">
              E‑commerce &amp; DTC
            </span>
            <span class="text-[11px]">
              46 story-led campaigns
            </span>
          </div>

          <div class="md:col-span-4 flex flex-col gap-2">
            <span class="text-base sm:text-lg font-semibold tracking-tight text-slate-50">
              Northwind Supply Co.
            </span>
            <p class="text-sm text-slate-400 max-w-md">
              Minimal outdoor essentials label shifting from flash sales to seasonless, slow‑release drops.
            </p>

          </div>

          <div class="md:col-span-2 flex items-start">
            <div class="flex flex-col gap-2 text-sm text-slate-300">
              <div
                class="inline-flex items-center gap-2 rounded-2xl bg-slate-900/80 border border-slate-800/80 px-3 py-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                  class="w-[15px] h-[15px] text-amber-300" data-solar="clapperboard-play-bold-duotone"
                  data-icon-set="solar">
                  <g fill="currentColor" class="">
                    <path
                      d="M3 11.25C3 8.35 3 6.9 3.88 5.92S6.2 4.5 9 4.5h6c2.8 0 4.2 0 5.08.92C21 6.9 21 8.35 21 11.25V15c0 2.8 0 4.2-.92 5.1S17.8 21 15 21H9c-2.8 0-4.2 0-5.12-.9S3 17.8 3 15z"
                      opacity=".5" class=""></path>
                    <path
                      d="M3.3 6.21c.21-.5.51-.93.93-1.33c.82-.79 2.03-1.08 3.77-1.17l.59 1.7l-1.84 1.63zm6.24-.07l-1-2.82C9.29 3.3 9.93 3.25 10.7 3.25h.3l.78 2.2zm3.45-.24L12.25 3.25H15c.74 0 1.35.03 1.87.12l.73 2.07zM18.83 5l.55 1.58l-1.72 1.51l-1.05-2.96z"
                      opacity="1" class=""></path>
                    <path d="M11.44 11.47a.75.75 0 0 0-1.19.61v3.84a.75.75 0 0 0 1.19.61l2.77-1.92a.75.75 0 0 0 0-1.22z"
                      class=""></path>
                  </g>
                </svg>
                <span class="text-[11px] font-medium tracking-[0.14em] uppercase text-amber-100">
                  Launch series
                </span>
              </div>
              <p class="text-sm text-slate-400">
                19 short-form films scripted, shot and edited per year, each linked to a single measurable behavior.
              </p>
            </div>
          </div>

          <div class="md:col-span-1 flex items-start justify-end">
            <button class="inline-flex hover:text-slate-50 hover:border-slate-700 transition text-slate-300 bg-slate-900/80 w-8 h-8 border-slate-800/80 border rounded-full items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" style="width: 15px; height: 15px; color: rgb(248, 250, 252)" class="w-[15px] h-[15px]" data-solar="calendar-search-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#f8fafc" d="M6.96 2c.418 0 .756.31.756.692V4.09c.67-.012 1.422-.012 2.268-.012h4.032c.846 0 1.597 0 2.268.012V2.692c0-.382.338-.692.756-.692s.756.31.756.692V4.15c1.45.106 2.403.368 3.103 1.008c.7.641.985 1.513 1.101 2.842v1H2V8c.116-1.329.401-2.2 1.101-2.842c.7-.64 1.652-.902 3.103-1.008V2.692c0-.382.339-.692.756-.692" class=""></path><path fill="#f8fafc" d="M22 14v-2c0-.839-.013-2.335-.026-3H2.006c-.013.665 0 2.161 0 3v2c0 3.771 0 5.657 1.17 6.828C4.349 22 6.234 22 10.004 22h4c3.77 0 5.654 0 6.826-1.172S22 17.771 22 14" opacity=".5" class=""></path><path fill="#f8fafc" fill-rule="evenodd" d="M18.75 16.5a2.25 2.25 0 1 0 0 4.5a2.25 2.25 0 0 0 0-4.5M15 18.75a3.75 3.75 0 1 1 6.879 2.068l1.401 1.402a.75.75 0 1 1-1.06 1.06l-1.402-1.401A3.75 3.75 0 0 1 15 18.75" clip-rule="evenodd" class=""></path></svg>
            </button>
          </div>
        </div>
      </article>
    </div>

    <!-- Footer meta -->
    <div class="flex flex-wrap items-center gap-3 text-[11px] text-slate-500">
      <div class="inline-flex bg-slate-950/60 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center"
        style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" class="w-[13px] h-[13px]"
          data-solar="document-text-bold-duotone" data-icon-set="solar">
          <g fill="currentColor" class="">
            <path
              d="M5 4.25C5 3.01 6.007 2 7.25 2h6.086c.465 0 .91.185 1.238.514l2.912 2.912c.33.328.514.773.514 1.238V19.75A2.25 2.25 0 0 1 15.75 22H7.25A2.25 2.25 0 0 1 5 19.75z"
              opacity=".5" class=""></path>
            <path
              d="M9 11.25A.75.75 0 0 1 9.75 10.5h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 9 11.25m0 3A.75.75 0 0 1 9.75 13.5h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 9 14.25M14.5 2.25v2.75c0 .69.56 1.25 1.25 1.25h2.75z"
              class=""></path>
          </g>
        </svg>
        <span class="text-xs sm:text-sm">
          All metrics independently verified at project close; sampled across 39 client teams.
        </span>
      </div>
      <span class="text-xs sm:text-sm text-slate-600">
        Detailed case write‑ups available on request.
      </span>
    </div>
  </div>
</section>