<!--
  DigiCard.pk — Business Pro (Tier 2, Rs 1,499) — Design 3: "Storytelling" (real-data wiring, 2026-07-11)
  Single-scroll narrative in numbered chapters (Work -> Rates -> Word of mouth
  -> Book). Photos come from the category-default manifest; the dotted-leader
  rate list shows Helpr.pk example starting prices (service_catalogue.json).

  ======================= SHARED TOKEN CONTRACT — v2 (2026-07-11) =======================
  Applies identically to all 12 DigiCard tier templates (tier1-*, tier2-*, tier3-*).

  DATA SOURCES (generator wiring):
  1. Category image defaults — assets/category-defaults/manifest.json
     - plumbing selects the image set. Allowed keys:
       electrician | plumbing | ac | auto | electronics | motor-pump
     - Files per key: {key}-hero.webp, {key}-work.webp, {key}-context.webp
     - assets/category-defaults/plumbing-hero.webp    -> {key}-hero.webp
       assets/category-defaults/plumbing-work.webp    -> {key}-work.webp
       assets/category-defaults/plumbing-context.webp -> {key}-context.webp
     -  defaults to [hero, work, context] from the manifest. Owner-supplied,
       explicitly approved photos may replace/extend (max 6). NEVER auto-import Google
       Places photos. Plumbing hero example must describe the trade generically and must NOT
       imply the image shows this provider.
     - Tier 1 note: tier1-* designs already render the manifest set via the fixed
       HERO/WORK/CONTEXT slots, so in Tier 1 the {{#PHOTOS}} loop carries owner-approved
       EXTRA photos only and may render zero items (generator must emit an empty,
       whitespace-free block so :empty CSS collapses the rail).
     - Every rendered page must keep its visible "category imagery for illustration"
       disclosure while default images are in use.
  2. Service pricing — service_catalogue.json  (TIER 2 / TIER 3 ONLY)
     - plumbing selects the price list. Per entry:
       "service" -> {{SERVICE_NAME}},  "label" -> {{SERVICE_PRICE}} (verbatim, e.g. "From Rs 600")
     - Curated non-zero Helpr.pk Islamabad examples only. NEVER invent a rate; never
       render Rs 0 / missing entries. Category "auto" has no authoritative Helpr
       catalogue yet — its only entry is "Price on inspection"; always show exactly
       that, never a number.
     - Helpr-derived values are example/starting prices, not provider-confirmed rates.
       Owner overrides live in business data, never edited into template HTML.
  3. Tier 1 service examples are editorial category content: {{SERVICE_NAME}} +
     {{SERVICE_DESC}} describe plausible work for the category, with NO prices.

  SCALAR TOKENS (all tiers unless noted):
    Bilal Plumbing Co — Plumbing Example | DigiCard Illustrative DigiCard example page for a plumbing business — not a real business. https://digicard.pk/example-business-pro-storytelling
    Bilal Plumbing Co Plumbing plumbing Same-day plumbing repairs, done right the first time.
    4.9 38 Islamabad, Pakistan (illustrative example) https://maps.google.com/
    923395260500 (digits only, e.g. 923001234567)
    0339 5260500 (human-readable, e.g. 0300 1234567)
    https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested. (https://wa.me/923395260500)
    Tier 2/3 only: https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested. — wa.me link with URL-encoded Request-a-Quote text
    Tier 2 "dashboard" only: B
    Tier 3 only: plumbing plus head/SEO extras Bilal Plumbing Co — DigiCard Example See what a tier2 DigiCard page looks like.
       summary  

  LOOP BLOCKS (generator repeats inner markup per item, strips {{#X}}/{{/X}} markers):
    {{#PHOTOS}} ... 
 defaults to [hero, work, context] from the manifest. Owner-supplied,
       explicitly approved photos may replace/extend (max 6). NEVER auto-import Google
       Places photos. Plumbing work example must describe the trade generically and must NOT
       imply the image shows this provider.
     - Tier 1 note: tier1-* designs already render the manifest set via the fixed
       HERO/WORK/CONTEXT slots, so in Tier 1 the {{#PHOTOS}} loop carries owner-approved
       EXTRA photos only and may render zero items (generator must emit an empty,
       whitespace-free block so :empty CSS collapses the rail).
     - Every rendered page must keep its visible "category imagery for illustration"
       disclosure while default images are in use.
  2. Service pricing — service_catalogue.json  (TIER 2 / TIER 3 ONLY)
     - plumbing selects the price list. Per entry:
       "service" -> {{SERVICE_NAME}},  "label" -> {{SERVICE_PRICE}} (verbatim, e.g. "From Rs 600")
     - Curated non-zero Helpr.pk Islamabad examples only. NEVER invent a rate; never
       render Rs 0 / missing entries. Category "auto" has no authoritative Helpr
       catalogue yet — its only entry is "Price on inspection"; always show exactly
       that, never a number.
     - Helpr-derived values are example/starting prices, not provider-confirmed rates.
       Owner overrides live in business data, never edited into template HTML.
  3. Tier 1 service examples are editorial category content: {{SERVICE_NAME}} +
     {{SERVICE_DESC}} describe plausible work for the category, with NO prices.

  SCALAR TOKENS (all tiers unless noted):
    Bilal Plumbing Co — Plumbing Example | DigiCard Illustrative DigiCard example page for a plumbing business — not a real business. https://digicard.pk/example-business-pro-storytelling
    Bilal Plumbing Co Plumbing plumbing Same-day plumbing repairs, done right the first time.
    4.9 38 Islamabad, Pakistan (illustrative example) https://maps.google.com/
    923395260500 (digits only, e.g. 923001234567)
    0339 5260500 (human-readable, e.g. 0300 1234567)
    https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested. (https://wa.me/923395260500)
    Tier 2/3 only: https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested. — wa.me link with URL-encoded Request-a-Quote text
    Tier 2 "dashboard" only: B
    Tier 3 only: plumbing plus head/SEO extras Bilal Plumbing Co — DigiCard Example See what a tier2 DigiCard page looks like.
       summary  

  LOOP BLOCKS (generator repeats inner markup per item, strips {{#X}}/{{/X}} markers):
    {{#PHOTOS}} ... 
 defaults to [hero, work, context] from the manifest. Owner-supplied,
       explicitly approved photos may replace/extend (max 6). NEVER auto-import Google
       Places photos. Plumbing context example must describe the trade generically and must NOT
       imply the image shows this provider.
     - Tier 1 note: tier1-* designs already render the manifest set via the fixed
       HERO/WORK/CONTEXT slots, so in Tier 1 the {{#PHOTOS}} loop carries owner-approved
       EXTRA photos only and may render zero items (generator must emit an empty,
       whitespace-free block so :empty CSS collapses the rail).
     - Every rendered page must keep its visible "category imagery for illustration"
       disclosure while default images are in use.
  2. Service pricing — service_catalogue.json  (TIER 2 / TIER 3 ONLY)
     - plumbing selects the price list. Per entry:
       "service" -> {{SERVICE_NAME}},  "label" -> {{SERVICE_PRICE}} (verbatim, e.g. "From Rs 600")
     - Curated non-zero Helpr.pk Islamabad examples only. NEVER invent a rate; never
       render Rs 0 / missing entries. Category "auto" has no authoritative Helpr
       catalogue yet — its only entry is "Price on inspection"; always show exactly
       that, never a number.
     - Helpr-derived values are example/starting prices, not provider-confirmed rates.
       Owner overrides live in business data, never edited into template HTML.
  3. Tier 1 service examples are editorial category content: {{SERVICE_NAME}} +
     {{SERVICE_DESC}} describe plausible work for the category, with NO prices.

  SCALAR TOKENS (all tiers unless noted):
    Bilal Plumbing Co — Plumbing Example | DigiCard Illustrative DigiCard example page for a plumbing business — not a real business. https://digicard.pk/example-business-pro-storytelling
    Bilal Plumbing Co Plumbing plumbing Same-day plumbing repairs, done right the first time.
    4.9 38 Islamabad, Pakistan (illustrative example) https://maps.google.com/
    923395260500 (digits only, e.g. 923001234567)
    0339 5260500 (human-readable, e.g. 0300 1234567)
    https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested. (https://wa.me/923395260500)
    Tier 2/3 only: https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested. — wa.me link with URL-encoded Request-a-Quote text
    Tier 2 "dashboard" only: B
    Tier 3 only: plumbing plus head/SEO extras Bilal Plumbing Co — DigiCard Example See what a tier2 DigiCard page looks like.
       summary  

  LOOP BLOCKS (generator repeats inner markup per item, strips {{#X}}/{{/X}} markers):
    {{#PHOTOS}} ...       1-6  -> {{PHOTO_URL}} {{PHOTO_ALT}}
     ... 
 ...   Tier 1: 2-6 -> {{SERVICE_NAME}} {{SERVICE_DESC}} (no prices)
                                     Tier 2/3: 1-6 -> {{SERVICE_NAME}} {{SERVICE_PRICE}}
     ... 
 ...     1-3  -> {{REVIEW_TEXT}} {{REVIEW_AUTHOR}}

  CONDITIONAL / SOCIAL BLOCKS (Tier 2/3 only — strip whole block when link absent):
    Tier 2 (icon style):  {{FACEBOOK_URL}}
                          {{INSTAGRAM_URL}}
                          {{TIKTOK_URL}}
    Tier 3 (pill style):  -> {{SOCIAL_URL}} {{SOCIAL_LABEL}}

  TIER BOUNDARIES (non-negotiable):
    - Tier 1 "Stand Out" (Rs 999): NO service pricing, NO social links, NO Request-a-Quote.
    - Paid-tier content must never leak into the free/unclaimed PREVIEW flow.
  =======================================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23185c49'/%3E%3Ccircle cx='46' cy='18' r='6' fill='%23d9972e'/%3E%3Ctext x='31' y='46' font-family='Georgia,serif' font-size='38' font-weight='700' fill='%23ffffff' text-anchor='middle'%3ED%3C/text%3E%3C/svg%3E" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bilal Plumbing Co — Plumbing Example | DigiCard</title>
<meta name="description" content="Illustrative DigiCard example page for a plumbing business — not a real business.">
<link rel="canonical" href="https://digicard.pk/example-business-pro-storytelling">
<style>
  :root{
    --green:#185c49; --green-deep:#0f3d30; --gold:#d9972e; --gold-soft:#f3d9ad;
    --paper:#f7f3ea; --card:#fffdf8; --ink:#151b18; --ink-soft:#4c554f; --line:#e8e0cd;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit}
  .wrap{max-width:640px;margin:0 auto;padding:0 22px}

  /* ---------- Centered hero ---------- */
  .hero{text-align:center;padding:56px 0 44px;position:relative}
  .hero .cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold);display:block}
  .hero h1{font-size:clamp(32px,9vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:12px 0 0}
  .hero .rating{margin-top:14px;font-size:14px;color:var(--ink-soft)}
  .hero .rating b{color:var(--ink);font-size:15px}
  .hero .rating .stars{color:var(--gold);letter-spacing:2px}
  .hero .tagline{margin:22px auto 0;font-size:18px;color:#33403a;max-width:34ch;font-weight:500}
  .hero .addr{margin-top:14px;font-size:13px;color:var(--ink-soft)}
  .hero .addr::before{content:"📍 "}
  /* Featured badge: wax-seal style circular stamp */
  .seal{position:absolute;top:26px;right:0;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#e8b158,var(--gold) 60%,#b8791a);color:#3a2604;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:9px;letter-spacing:.12em;text-transform:uppercase;transform:rotate(10deg);box-shadow:0 6px 16px rgba(184,121,26,.4);border:2px dashed rgba(58,38,4,.35)}
  .seal .star{font-size:18px;line-height:1}
  .hero .scrollhint{margin-top:34px;font-size:12px;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase}
  .hero .scrollhint::after{content:"↓";display:block;font-size:18px;color:var(--gold);margin-top:4px}

  /* ---------- Chapter framing ---------- */
  .chapter{padding:52px 0 8px}
  .ch-label{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:26px}
  .ch-label .num{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:10px;background:var(--card)}
  .ch-label h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
  .ch-label p{font-size:13.5px;color:var(--ink-soft);margin-top:4px;max-width:38ch}

  /* Chapter 1: stacked large photos, alternating tilt */
  .photoflow figure{margin:0 0 18px;position:relative}
  .photoflow img{width:100%;border-radius:22px;box-shadow:0 10px 28px rgba(21,27,24,.14);aspect-ratio:4/3;object-fit:cover}
  .photoflow figure:nth-child(odd) img{transform:rotate(-.6deg)}
  .photoflow figure:nth-child(even) img{transform:rotate(.6deg)}

  /* Chapter 2: dotted-leader price list (tier-exclusive) */
  .menu{background:var(--card);border-radius:24px;border:1px solid var(--line);padding:28px 24px;box-shadow:0 6px 20px rgba(21,27,24,.06)}
  .menu-row{display:flex;align-items:baseline;gap:8px;padding:12px 0;font-size:15.5px}
  .menu-row .nm{font-weight:600}
  .menu-row .dots{flex:1;border-bottom:2px dotted #d5c9a9;transform:translateY(-4px)}
  .menu-row .prc{font-weight:800;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}
  .menu-note{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:14px;font-style:italic}

  /* Chapter 3: centered testimonial cards */
  .testi{text-align:center;padding:26px 22px;background:var(--card);border-radius:22px;border:1px solid var(--line);margin-bottom:16px}
  .testi .stars{color:var(--gold);letter-spacing:3px;font-size:14px}
  .testi p{font-size:16px;font-style:italic;color:#2a332d;margin:10px auto 8px;max-width:42ch}
  .testi b{font-size:13px;color:var(--green)}
  .g-note{text-align:center;font-size:12px;color:var(--ink-soft)}

  /* Chapter 4: closing quote panel (tier signature CTA) */
  .closing{margin-top:56px;background:linear-gradient(160deg,var(--green) 0%,var(--green-deep) 85%);color:#f5f1e6;border-radius:28px 28px 0 0;padding:44px 0 40px;text-align:center;position:relative;overflow:hidden}
  .closing::before{content:"";position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:340px;height:220px;border-radius:50%;background:radial-gradient(ellipse,rgba(217,151,46,.25),transparent 70%)}
  .closing .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--gold-soft)}
  .closing h2{font-size:clamp(24px,6.5vw,32px);font-weight:800;margin:10px 0 8px;letter-spacing:-.02em}
  .closing p{font-size:14.5px;color:#cfd8d0;max-width:38ch;margin:0 auto}
  .btn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;border-radius:16px;padding:16px 22px;font-size:16.5px;transition:transform .12s}
  .btn:active{transform:scale(.98)}
  .btn-quote{background:linear-gradient(135deg,var(--gold),#c07f18);color:#241700;box-shadow:0 10px 26px rgba(0,0,0,.35);margin:24px auto 0;max-width:340px}
  .btn-wa{margin:12px auto 0;max-width:340px;background:transparent;border:1.5px solid rgba(233,227,210,.4);color:#e9e3d2;font-size:14px;font-weight:600;padding:12px 18px}
  .ico{width:20px;height:20px;flex:none}
  .socials{display:flex;justify-content:center;gap:14px;margin-top:30px}
  .socials a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(233,227,210,.3);display:flex;align-items:center;justify-content:center}
  .socials a:active{background:rgba(217,151,46,.3)}
  .socials svg{width:20px;height:20px;fill:#e9e3d2}
  .closing small{display:block;margin-top:26px;font-size:11px;color:#8fa398}
  .closing small a{color:var(--gold-soft);text-decoration:none}
  .img-note{font-size:11.5px;color:#8a948f;margin-top:8px;font-style:italic}
  .rate-note{font-size:11.5px;color:#8a948f;margin-top:8px;font-style:italic}
</style>
</head>
<body>

<header class="hero">
  <div class="wrap">
    <span class="seal"><span class="star">★</span>Featured</span>
    <span class="cat">Plumbing · Islamabad</span>
    <h1>Bilal Plumbing Co</h1>
    <div class="rating"><span class="stars">★★★★★</span> <b>4.9</b> · 38 Google reviews</div>
    <p class="tagline">“Same-day plumbing repairs, done right the first time.”</p>
    <p class="addr">Islamabad, Pakistan (illustrative example)</p>
    <div class="scrollhint">Dekhiye humara kaam</div>
  </div>
</header>

<main class="wrap">

  <!-- Chapter 1 — the work -->
  <section class="chapter">
    <div class="ch-label">
      <span class="num">1</span>
      <h2>The work</h2>
      <p>Is trade ke roz ke kaam ki jhalak.</p>
    </div>
    <div class="photoflow">
      
      <figure><img src="assets/category-defaults/plumbing-hero.webp" alt="Plumbing hero example" loading="lazy"></figure>
      

      <figure><img src="assets/category-defaults/plumbing-work.webp" alt="Plumbing work example" loading="lazy"></figure>
      

      <figure><img src="assets/category-defaults/plumbing-context.webp" alt="Plumbing context example" loading="lazy"></figure>
      
    </div>
    <p class="img-note" style="text-align:center">Category imagery for illustration — owner-approved photos may replace it.</p>
  </section>

  <!-- Chapter 2 — the rates (tier-exclusive price list) -->
  <section class="chapter">
    <div class="ch-label">
      <span class="num">2</span>
      <h2>The rates</h2>
      <p>Kaam bhi saaf, rate bhi theek — no surprises.</p>
    </div>
    <div class="menu">
      
      <div class="menu-row">
        <span class="nm">Flush tank repair</span>
        <span class="dots"></span>
        <span class="prc">From Rs 450</span>
      </div>
      

      <div class="menu-row">
        <span class="nm">Plumber hourly service - 4 hours</span>
        <span class="dots"></span>
        <span class="prc">From Rs 4,500</span>
      </div>
      
      <p class="menu-note">Example starting rates from Helpr.pk (Islamabad) — exact price depends on parts &amp; job size. Request a quote below.</p>
    </div>
  </section>

  <!-- Chapter 3 — word of mouth -->
  <section class="chapter">
    <div class="ch-label">
      <span class="num">3</span>
      <h2>Word of mouth</h2>
      <p>What neighbours in Islamabad say on Google.</p>
    </div>
    
    <article class="testi">
      <span class="stars">★★★★★</span>
      <p>“Fair rate and on time. Recommended.”</p>
      <b>Sample Reviewer</b>
    </article>
    

    <article class="testi">
      <span class="stars">★★★★★</span>
      <p>“Good work, clean finish.”</p>
      <b>Sample Reviewer</b>
    </article>
    
    <p class="g-note">Pulled from this business's public Google listing.</p>
  </section>

</main>

<!-- Chapter 4 — book the job (signature quote CTA) -->
<footer class="closing">
  <div class="wrap">
    <span class="k">Step 4 · Book the job</span>
    <h2>Apna kaam bata dein</h2>
    <p>One tap opens WhatsApp with a ready-made quote request — just fill in the service and your preferred time.</p>
    <a class="btn btn-quote" href="https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested.">
      <svg class="ico" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.4 14.1c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1.1-1.4-1.1-2.7s.7-1.9.9-2.2c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.4.2.5.7 1.8.8 1.9.1.1.1.3 0 .4-.1.2-.1.3-.3.5l-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1.2-.2.7-.8.9-1.1.2-.3.4-.2.6-.1.3.1 1.6.7 1.8.9.3.1.4.2.5.3 0 .2 0 .6-.2 1.2Z"/></svg>
      Request a Quote
    </a>
    <a class="btn btn-wa" href="https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier2%20example%20%28Bilal%20Plumbing%20Co%29%20%E2%80%94%20I%27m%20interested.">or message us directly on WhatsApp</a>
    <div class="socials">
      
      
      
    </div>
    <small>Digital card by <a href="https://digicard.pk">DigiCard.pk</a> · Verified provider on Helpr.pk</small>
  </div>
</footer>

</body>
</html>