<!--
  DigiCard.pk — Business Pro (Tier 2, Rs 1,499) — Design 1: "Magazine" (real-data wiring, 2026-07-11)
  Editorial layout: masthead hero, drop-cap tagline, photo strip (category
  defaults from the manifest), pull-quote reviews, and a "Rate Card" module
  showing Helpr.pk example starting prices from 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
    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
    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
    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">
<style>
  :root{
    --green:#185c49; --green-deep:#0f3d30; --gold:#d9972e; --gold-soft:#f3d9ad;
    --paper:#f7f3ea; --card:#fffdf8; --ink:#151b18; --ink-soft:#4c554f;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit}

  .wrap{max-width:760px;margin:0 auto;padding:0 18px}

  /* ---------- Masthead hero ---------- */
  .masthead{background:var(--green-deep);color:#f5f1e6;position:relative;overflow:hidden;padding:26px 0 34px}
  .masthead::after{content:"";position:absolute;inset:auto -40px -90px auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(217,151,46,.28),transparent 70%)}
  .kicker-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
  .cat-badge{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-soft);border:1px solid rgba(217,151,46,.55);padding:5px 12px;border-radius:999px}
  /* Featured ribbon (tier-exclusive) */
  .featured{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#3a2604;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px 6px 10px;border-radius:4px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.25)}
  .featured::before{content:"★"}
  .featured::after{content:"";position:absolute;right:-8px;top:0;border:12px solid transparent;border-left:8px solid var(--gold);border-top-width:12.5px;border-bottom-width:12.5px}
  .masthead h1{font-size:clamp(30px,8vw,46px);line-height:1.06;font-weight:800;letter-spacing:-.02em;max-width:14ch}
  .rating-line{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:14px;color:#d8d2c2}
  .rating-line .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
  .rating-line strong{color:#fff;font-size:16px}
  .tagline{margin-top:20px;font-size:17px;color:#e9e3d2;max-width:46ch;border-left:3px solid var(--gold);padding-left:14px;font-style:italic}
  .tagline::first-letter{font-size:2.1em;font-weight:800;font-style:normal;color:var(--gold);float:left;line-height:.85;padding-right:7px;padding-top:3px}
  .addr{margin-top:16px;font-size:13px;color:#b9c4bd}
  .addr::before{content:"📍 "}

  /* Hero CTA pair — quote CTA is the hero, WhatsApp is secondary */
  .cta-pair{margin-top:24px;display:flex;flex-direction:column;gap:10px}
  .btn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;border-radius:14px;padding:15px 20px;font-size:16px;transition:transform .12s}
  .btn:active{transform:scale(.98)}
  .btn-quote{background:linear-gradient(135deg,var(--gold),#c07f18);color:#241700;box-shadow:0 8px 22px rgba(217,151,46,.4);font-size:17px;position:relative}
  .btn-quote small{display:block;font-weight:500;font-size:11.5px;opacity:.85;letter-spacing:.02em}
  .btn-quote .lbl{text-align:left}
  .btn-wa{background:transparent;color:#e9e3d2;border:1.5px solid rgba(233,227,210,.45);font-weight:600;font-size:14.5px}
  .ico{width:20px;height:20px;flex:none}

  /* ---------- Photo strip ---------- */
  .photostrip{max-width:760px;margin:-18px auto 0;padding:0 18px}
  .photostrip .rail{display:flex;justify-content:center;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .photostrip img{width:230px;height:160px;object-fit:cover;border-radius:16px;scroll-snap-align:start;flex:none;box-shadow:0 6px 18px rgba(21,27,24,.16);border:3px solid var(--card)}

  /* ---------- Section headings, editorial style ---------- */
  section{padding:34px 0 6px}
  .sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
  .sec-head h2{font-size:20px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
  .sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
  .sec-head .no{font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.1em}

  /* ---------- Rate card (tier-exclusive price list) ---------- */
  .ratecard{background:var(--card);border:1px solid #e8e0cd;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(21,27,24,.06)}
  .ratecard-head{background:var(--green);color:#f5f1e6;padding:13px 18px;display:flex;justify-content:space-between;align-items:center}
  .ratecard-head b{font-size:14px;letter-spacing:.06em;text-transform:uppercase}
  .ratecard-head span{font-size:11px;color:var(--gold-soft)}
  .ratecard table{width:100%;border-collapse:collapse}
  .ratecard td{padding:14px 18px;border-top:1px dashed #e3d9c2;font-size:15px;vertical-align:middle}
  .ratecard tr:first-child td{border-top:none}
  .ratecard .svc{font-weight:600}
  .ratecard .prc{text-align:right;font-weight:800;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums}
  .ratecard-foot{padding:11px 18px;font-size:12px;color:var(--ink-soft);background:#fbf7ec}

  /* ---------- Pull-quote reviews ---------- */
  .review{background:var(--card);border-radius:18px;padding:20px 20px 16px;margin-bottom:14px;border:1px solid #ece4d1;position:relative}
  .review::before{content:"“";position:absolute;top:-4px;left:14px;font-size:52px;color:var(--gold);font-family:Georgia,serif;line-height:1}
  .review p{font-size:15px;padding-left:26px;font-style:italic;color:#2a332d}
  .review footer{margin-top:10px;padding-left:26px;font-size:12.5px;font-weight:700;color:var(--green)}
  .review footer::before{content:"— "}
  .g-note{font-size:12px;color:var(--ink-soft);margin-top:4px}

  /* ---------- Footer: socials + repeat CTA ---------- */
  .foot{margin-top:36px;background:var(--green-deep);color:#e9e3d2;padding:30px 0 90px;text-align:center}
  .socials{display:flex;justify-content:center;gap:14px;margin:14px 0 22px}
  .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;transition:background .15s}
  .socials a:active{background:rgba(217,151,46,.3)}
  .socials svg{width:20px;height:20px;fill:#e9e3d2}
  .foot small{display:block;font-size:11px;color:#8fa398;margin-top:14px}
  .foot small a{color:var(--gold-soft);text-decoration:none}

  /* Sticky bottom quote bar on mobile */
  .stickybar{position:fixed;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,248,.96);backdrop-filter:blur(6px);border-top:1px solid #e8e0cd;display:flex;gap:10px;z-index:50}
  .stickybar .btn{flex:1;padding:13px 10px;font-size:14.5px;border-radius:12px}
  .stickybar .btn-wa{color:var(--green);border-color:var(--green)}

  @media(min-width:700px){
    .cta-pair{flex-direction:row}
    .btn-quote{flex:1.6}.btn-wa{flex:1}
    .stickybar{display:none}
    .foot{padding-bottom:30px}
  }
  .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="masthead">
  <div class="wrap">
    <div class="kicker-row">
      <span class="cat-badge">Plumbing</span>
      <span class="featured">Featured</span>
    </div>
    <h1>Bilal Plumbing Co</h1>
    <div class="rating-line">
      <span class="stars">★★★★★</span>
      <strong>4.9</strong>
      <span>· 38 Google reviews</span>
    </div>
    <p class="tagline">Same-day plumbing repairs, done right the first time.</p>
    <p class="addr">Islamabad, Pakistan (illustrative example)</p>
    <div class="cta-pair">
      <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>
        <span class="lbl">Request a Quote<small>Get a price for your job — reply in minutes</small></span>
      </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.">WhatsApp us directly</a>
    </div>
  </div>
</header>

<!-- Photo strip overlapping the hero -->
<div class="photostrip">
  <div class="rail">
    
    <img src="assets/category-defaults/plumbing-hero.webp" alt="Plumbing hero example" loading="lazy">
    

    <img src="assets/category-defaults/plumbing-work.webp" alt="Plumbing work example" loading="lazy">
    

    <img src="assets/category-defaults/plumbing-context.webp" alt="Plumbing context example" loading="lazy">
    
  </div>
  <p class="img-note">Category imagery for illustration — owner-approved photos may replace it.</p>
</div>

<main class="wrap">

  <section>
    <div class="sec-head"><span class="no">01</span><h2>Rate Card</h2><span class="rule"></span></div>
    <div class="ratecard">
      <div class="ratecard-head"><b>Services &amp; Prices</b><span>Helpr.pk example rates</span></div>
      <table>
        
        <tr><td class="svc">Flush tank repair</td><td class="prc">From Rs 450</td></tr>
        

        <tr><td class="svc">Plumber hourly service - 4 hours</td><td class="prc">From Rs 4,500</td></tr>
        
      </table>
      <div class="ratecard-foot">Example starting rates from the public Helpr.pk Islamabad catalogue — final price depends on parts &amp; job size. Request a quote for an exact figure.</div>
    </div>
  </section>

  <section>
    <div class="sec-head"><span class="no">02</span><h2>What customers say</h2><span class="rule"></span></div>
    
    <article class="review">
      <p>Fair rate and on time. Recommended.</p>
      <footer>Sample Reviewer</footer>
    </article>
    

    <article class="review">
      <p>Good work, clean finish.</p>
      <footer>Sample Reviewer</footer>
    </article>
    
    <p class="g-note">Real reviews from this business's Google listing.</p>
  </section>

</main>

<footer class="foot">
  <div class="wrap">
    <strong>Bilal Plumbing Co</strong>
    <div class="socials">
      
      
      
    </div>
    <small>Digital card by <a href="https://digicard.pk">DigiCard.pk</a> · Verified provider on Helpr.pk</small>
  </div>
</footer>

<!-- Mobile sticky action bar -->
<div class="stickybar">
  <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.">WhatsApp</a>
  <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."><span class="lbl">Request a Quote</span></a>
</div>

</body>
</html>