PageSourceSearch

https://www.themailworks.com/services

html themailworks.com collected 2026-10-08 10:02:03 UTC 54,116 bytes, 1,036 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>Our Services | The Mailworks</title>
7  <meta name="description" content="Your one-stop-shop for direct mail marketing. Campaign consultation, creative development, market analysis, data cleansing, printing and mailing, all under one roof.">
8  <link rel="canonical" href="https://themailworks.com/services">
9
10  <meta property="og:site_name" content="The Mailworks">
11  <meta property="og:title" content="Our Services | The Mailworks">
12  <meta property="og:description" content="Your one-stop-shop for direct mail marketing. Campaign consultation, creative development, market analysis, data cleansing, printing and mailing, all under one roof.">
13  <meta property="og:type" content="website">
14  <meta property="og:image" content="https://themailworks.com/static/img/h4_GY-QE1BuVMTEKvGowvw/shared/mchinery-1_2.jpg">
15  <meta name="twitter:card" content="summary_large_image">
16
17  <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
18
19  <!-- Proxima Nova has no variable cut, so the two faces that paint above the
20       fold on every page are preloaded by hand: Regular for body copy and the
21       nav, Extrabold for the h1. Bold (700) is left to load normally; it is
22       never the first thing you read. Self-hosted, so no third-party request. -->
23  <link rel="preload" href="/static/fonts/proximanova-reg-webfont.woff" as="font" type="font/woff" crossorigin>
24  <link rel="preload" href="/static/fonts/proximanova-xbold_copy-webfont.woff" as="font" type="font/woff" crossorigin>
25
26  <!-- Opt in to scroll-reveal only when JS is available, so content is never
27       gated behind an animation that might not run. This runs in the head,
28       before the body paints, so reveal targets start hidden rather than
29       flashing in before the observer catches them.
30
31       The page segue no longer touches the arriving page: it is a delayed
32       loading indicator that segue.js arms on the page being left, so there is
33       nothing to set up here. See static/js/segue.js. -->
34  
34<script>
35    (function () {
36      var root = document.documentElement;
37      if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
38      if ('IntersectionObserver' in window) root.className += ' js-reveal';
39    })();
40  </script>
40
41  <link rel="stylesheet" href="/static/css/tokens.css?v=16a09b2ba6">
42  <link rel="stylesheet" href="/static/css/base.css?v=16a09b2ba6">
43  <link rel="stylesheet" href="/static/css/nav.css?v=16a09b2ba6">
44  <link rel="stylesheet" href="/static/css/components.css?v=16a09b2ba6">
45  <link rel="stylesheet" href="/static/css/animations.css?v=16a09b2ba6">
46</head>
47<body class="">
48  <a class="skip-link" href="#main">Skip to main content</a>
49
50  <!-- ===========================================================================
51     Site header. ONE source for desktop and mobile.
52
53     The live site ships two independent Showit blocks (`header` and
54     `mobile-nav`) which have drifted apart: mobile says "HIPPA + SOC2
55     Compliance" and "Built For Franchises" and "Your future begins here" where
56     desktop says "HIPAA", "Built for", "starts here". Rendering both from this
57     one markup block makes that impossible.
58
59     Dropdown behaviour (Owen's request):
60       - opens on HOVER, no click needed
61       - once open, stays open; moving the mouse away does NOT close it
62       - closes only by clicking the trigger again, pressing Escape, or
63         opening a different menu
64     See site/static/js/nav.js. Triggers are real <button> elements with
65     aria-expanded, not the href="#/" anchors the current site uses.
66     =========================================================================== -->
67<header class="site-header" data-header>
68  <div class="site-header__inner">
69    <a class="site-header__logo" href="/" aria-label="The Mailworks, home">
70      <!-- group_159.png is the navy/pink lockup the live header uses. The
71           other file in the export (the_mailworks_logo_whitepink_rgb.png) is
72           the reversed version for dark backgrounds, so it belongs in the
73           footer only; on a white header it renders as pink fragments. -->
74      <img src="/static/img/d1dPZlM8V-UA5jaJA-7M9Q/shared/group_159.png"
75           alt="The Mailworks, Direct Mail Experts" width="185" height="80">
76    </a>
77
78    <button class="site-header__burger" type="button"
79            data-menu-toggle aria-expanded="false" aria-controls="primary-nav">
80      <span class="sr-only">Menu</span>
81      <span class="burger-bars" aria-hidden="true"><i></i><i></i><i></i></span>
82    </button>
83
84    <nav class="primary-nav" id="primary-nav" aria-label="Main">
85      <ul class="primary-nav__list">
86
87        <!-- data-accent now colours the caret and nothing else. It used to also
88             tint the panel's left edge and its item titles; both are gone at
89             Owen's request, so the attribute stays only on the <li> that holds
90             the caret and is not repeated on the panel. -->
91        <li class="primary-nav__item has-menu" data-dropdown data-accent="pink">
92          <button class="primary-nav__trigger" type="button"
93                  aria-expanded="false" aria-controls="menu-solutions">
94            Solutions <span class="caret" aria-hidden="true"></span>
95          </button>
96          <div class="mega" id="menu-solutions" hidden>
97            <ul class="mega__list">
98              <li>
99                <a href="/services" data-nav="services" aria-current="page">
100                  <span class="mega__label">Our Services</span>
101                  <span class="mega__caption">See what we can do</span>
102                </a>
103              </li>
104              <li>
105                <a href="/campaign-types" data-nav="campaign-types">
106                  <span class="mega__label">Campaign Types</span>
107                  <span class="mega__caption">Learn more about our campaign types</span>
108                </a>
109              </li>
110              <li>
111                <a href="/industries/franchises" data-nav="franchises">
112                  <span class="mega__label">Built For Franchises</span>
113                  <span class="mega__caption">See how we help your franchise grow</span>
114                </a>
115              </li>
116              <li>
117                <a href="/industries" data-nav="industries">
118                  <span class="mega__label">Industries We Serve</span>
119                  <span class="mega__caption">The industries we serve most</span>
120                </a>
121              </li>
122              <!-- "NEW: The Portal" removed with all other Portal content. -->
123              <li>
124                <a href="/partner-program" data-nav="partner-program">
125                  <span class="mega__label">Partner Program</span>
126                  <span class="mega__caption">Your large-scale mailing solution</span>
127                </a>
128              </li>
129            </ul>
130          </div>
131        </li>
132
133        <li class="primary-nav__item has-menu" data-dropdown data-accent="teal">
134          <button class="primary-nav__trigger" type="button"
135                  aria-expanded="false" aria-controls="menu-about">
136            About <span class="caret" aria-hidden="true"></span>
137          </button>
138          <div class="mega" id="menu-about" hidden>
139            <ul class="mega__list mega__list--2col">
140              <li>
141                <a href="/about" data-nav="about">
142                  <span class="mega__label">Who We Are</span>
143                  <span class="mega__caption">Learn about us and our history</span>
144                </a>
145              </li>
146              <li>
147                <a href="/about/team" data-nav="team">
148                  <span class="mega__label">Meet The Team</span>
149                  <span class="mega__caption">Your direct mail experts</span>
150                </a>
151              </li>
152              <li>
153                <a href="/direct-mail-academy" data-nav="academy">
154                  <span class="mega__label">Direct Mail Academy</span>
155                  <span class="mega__caption">Learn about direct mail, step by step</span>
156                </a>
157              </li>
158              <li>
159                <a href="/hipaa-soc2" data-nav="hipaa">
160                  <span class="mega__label">HIPAA + SOC2 Compliance</span>
161                  <span class="mega__caption">Your data, our highest priority</span>
162                </a>
163              </li>
164              <li>
165                <a href="/careers" data-nav="careers">
166                  <span class="mega__label">Careers</span>
167                  <span class="mega__caption">
167Your future starts here</span>
168                </a>
169              </li>
170            </ul>
171          </div>
172        </li>
173
174        <!-- The Pricing menu (Pro & Premier Memberships) is removed with all
175             other membership-pricing content. Partner Program, its only
176             non-membership child, has moved into Solutions above. -->
177      </ul>
178
179      <div class="site-header__actions">
180        <!-- HEADS UP, one line to restore.
181             The "Portal Login" button is removed because the instruction was to
182             strip everything mentioning the Portal. Worth knowing what that
183             costs: portal.themailworks.com still works, but existing customers
184             lose the only signposted way in from the marketing site, so anyone
185             without a bookmark has nowhere to click. If that is not what you
186             wanted, put this back:
187
188             <a class="site-header__login" href="https://portal.themailworks.com/login"
189                target="_blank" rel="noopener">Portal Login</a>
190        -->
191        <a class="btn site-header__cta" href="/schedule-a-call" data-nav="schedule">Schedule A Call</a>
192      </div>
193    </nav>
194  </div>
195</header>
196
197
198  <main id="main">
199<!-- =========================================================================
200     HERO
201     Live renders a full-bleed navy band 677px tall over rectangle_106.jpg,
202     centred, with a two-tone headline. The pink second line is a <strike> on
203     the live site (Showit's styled-span tag), which is why a screen reader
204     currently announces the headline as deleted text. Here it is one <h1>
205     with a span.
206     ========================================================================= -->
207<section class="hero hero--dark section--photo">
208  <img class="section__bg" src="/static/img/Gx8yZ6YcVSxtQ67EVrKv5A/shared/rectangle_106.jpg"
209       alt="" aria-hidden="true" width="1740" height="677" fetchpriority="high">
210  <div class="container">
211    <div class="section__head section__head--center" data-reveal>
212      <span class="eyebrow">Our Services</span>
213      <h1>Your One-Stop-Shop For<br><span class="accent">Direct Mail Marketing.</span></h1>
214      <p class="hero__body">
215        Whether you're launching a one-time campaign or managing a complex, nationwide
216        marketing program, our services meet you where you are, everything you
217        need, nothing you don't.
218      </p>
219      <p class="hero__body">
220        We do everything under one roof, from strategy to production. The result:
221        seamless campaigns with fewer moving parts and direct mail that's easier and
222        more effective than ever.
223      </p>
224      <p class="hero__body"><strong>We don't just get mail into mailboxes. We deliver results.</strong></p>
225      <div class="btn-row" style="justify-content:center">
226        <a class="btn" href="/schedule-a-call">Get Started</a>
227      </div>
228    </div>
229  </div>
230</section>
231
232<!-- =========================================================================
233     HOW CAN WE HELP + the six service cards
234     group_35.png is the pink paper plane with its dotted trail. Live pins it to
235     the top-left corner of the band; Owen asked for it beside the heading
236     instead, so it now sits inline to the left of the h2 and floats gently once
237     the heading scrolls into view (animations.css, .heading-deco--plane).
238
239     Live closes the intro paragraph with "Choose the level of support you need
240     with our memberships!" That sentence is dropped along with the rest of the
241     membership content.
242     ========================================================================= -->
243<section class="section">
244  <div class="container">
245    <div class="section__head section__head--center" data-reveal>
246      <div class="heading-deco-row">
247        <img class="heading-deco heading-deco--plane" data-plane-float
248             src="/static/img/KztIvu6rtqRyVhHNgOZNPA/shared/group_35.png"
249             alt="" aria-hidden="true" width="258" height="133">
250        <h2 class="mb-0">How Can We <span class="accent">Help?</span></h2>
251      </div>
252      <p>The Mailworks offers a wide range of direct mail services to support your
253         success, from campaign consultation and creative development to production
254         and delivery.</p>
255      <p class="subheading subheading--plain" style="margin-top:var(--space-xl)">Here's what we can do:</p>
256    </div>
257
258    <div class="grid grid--3" data-reveal-group data-reveal-step="90">
259      <div class="card card--soft card--pink" data-reveal>
260        <img class="card__icon" src="/static/img/Q64DqpqPu91KnhOwGDEnpQ/shared/bullhorn_icon.svg"
261             alt="" aria-hidden="true" width="50" height="74">
262        <h3>Campaign Consultation</h3>
263        <p>Complete direct mail strategy, from budgeting and targeting to messaging,
264           design, and format.</p>
265      </div>
266
267      <div class="card card--soft card--navy" data-reveal>
268        <img class="card__icon" src="/static/img/KPzczQeuzBH4qHUoyspg0A/312742/service_icon_-_creative.svg"
269             alt="" aria-hidden="true" width="84" height="83">
270        <h3>Creative Development</h3>
271        <p>Our in-house team can design and write a dynamic mail piece that screams
272           'open me now!'</p>
273      </div>
274
275      <div class="card card--soft card--navy" data-reveal>
276        <span class="card__icon card__icon--tint" style="--icon:url('/static/img/d2Hl3hUMYBhfenzvWrqlsg/shared/chart_icon.svg')" aria-hidden="true"></span>
277        <h3>Market Analysis</h3>
278        <p>We'll build a laser-targeted list to help you reach the right audience with
279           the right message.</p>
280      </div>
281
282      <div class="card card--soft card--navy" data-reveal>
283        <span class="card__icon card__icon--tint" style="--icon:url('/static/img/QFQtAf4XGmdUkZvHkofWEw/312742/service_icon_-_lightbulb.svg')" aria-hidden="true"></span>
284        <h3>Direct Mail Automation</h3>
285        <!-- Live continues "...Set it once, and let our portal handle the rest."
286             Trimmed rather than rewritten, since the Portal is gone. -->
287        <p>Trigger campaigns based on customer behavior or timelines.</p>
288      </div>
289
290      <div class="card card--soft card--pink" data-reveal>
291        <img class="card__icon" src="/static/img/OTCoJLRXSBiXKEfso6S6dw/shared/table_icon.svg"
292             alt="" aria-hidden="true" width="50" height="74">
293        <h3>Data Cleansing</h3>
294        <p>Get your targeted mailing lists campaign-ready with expert formatting,
295           list merging, &amp; more.</p>
296      </div>
297
298      <div class="card card--soft card--navy" data-reveal>
299        <img class="card__icon" src="/static/img/H1BMI1T-12u68FRYB9QL1g/shared/envelope_icon_1.svg"
300             alt="" aria-hidden="true" width="50" height="74">
301        <h3>Printing &amp; Mailing</h3>
302        <p>Our in-house process ensures your mail gets out quickly, accurately, and at
303           the best postal rates, with no handoffs and no delays.</p>
304      </div>
305    </div>
306  </div>
307</section>
308
309<!-- The Mailworks Memberships block (Pro and Premier, with the rocket and the
310     star field) sat here on the live site. Removed with all other
311     membership-pricing content. -->
312
313<!-- =========================================================================
314     STANDARDIZED PRODUCTS
315     The live desktop render leaves the right half of this band empty. Its
316     init_data holds two postcard photos pinned to the same coordinates in that
317     column (8.5x5.5 and 6x11, both vendored), so the slot was meant to carry
318     product shots and the slideshow simply never paints.
319
320     Owen asked for a click-through gallery here in place of the two static
321     shots, so the slot now runs the same carousel component the testimonials
322     use, loaded with twelve of the standardized products the copy is about.
323     Autoplay is off: this one is meant to be driven, not watched.
324     ========================================================================= -->
325<section class="section">
326  <div class="container">
327    <!-- The heading spans the full width, as it does live, rather than wrapping
328         to four lines inside a half column. -->
329    <div class="section__head" style="max-width:none" data-reveal>
330      <h2>How Standardized Products <span class="accent">Power Our Process</span></h2>
331    </div>
332    <div class="split">
333      <div data-reveal>
334        <p>At The Mailworks, we don't treat every job like a custom one-off. Instead,
335           we've built our entire production workflow around 30+ standardized product
336           types.</p>
337        <p class="lead"><strong>That means:</strong></p>
338        <ul class="checklist">
339          <li>Faster setup, fewer delays &amp; reliable outcomes</li>
340          <li>Lower costs thanks to bulk efficiencies</li>
341          <li>Full color variable data personalization</li>
342        </ul>
343        <p><strong>Handled 100% in-house</strong> by a team that moves mail with precision
344           and purpose, we ensure your campaign lands in mailboxes on time, every time.
345           We deliver consistency at scale.</p>
346      </div>
347
348      <div class="carousel gallery" data-carousel data-carousel-autoplay="off"
349           data-carousel-noun="product"
350           role="group" aria-roledescription="carousel" aria-label="Standardized mail products"
351           tabindex="0" data-reveal data-reveal-delay="120">
352        <div class="carousel__viewport">
353          <div class="carousel__track" data-carousel-track>
354            <figure class="carousel__slide gallery__slide" data-sli
354de>
355              <img src="/static/img/4GqDeE23PZAkEDr-uYSObw/312742/8_5x5_5_postcard.jpg"
356                   alt="An 8.5 by 5.5 inch direct mail postcard" width="1200" height="840">
357              <figcaption>8.5&#8243; &times; 5.5&#8243; postcard</figcaption>
358            </figure>
359            <figure class="carousel__slide gallery__slide" data-slide>
360              <img src="/static/img/p6QynolySgPU_BCrA0AYOw/312742/6x11_postcard.jpg"
361                   alt="A 6 by 11 inch direct mail postcard" width="800" height="560" loading="lazy">
362              <figcaption>6&#8243; &times; 11&#8243; postcard</figcaption>
363            </figure>
364            <figure class="carousel__slide gallery__slide" data-slide>
365              <img src="/static/img/-k7-QLb-q0gE3JJjaTZ4eA/312742/6x9_postcard.jpg"
366                   alt="A 6 by 9 inch direct mail postcard" width="1200" height="840" loading="lazy">
367              <figcaption>6&#8243; &times; 9&#8243; postcard</figcaption>
368            </figure>
369            <figure class="carousel__slide gallery__slide" data-slide>
370              <img src="/static/img/mv5YcOg132MBu-EhvalZDg/312742/letter_window.jpg"
371                   alt="A window envelope letter package" width="1200" height="840" loading="lazy">
372              <figcaption>Window envelope letter</figcaption>
373            </figure>
374            <figure class="carousel__slide gallery__slide" data-slide>
375              <img src="/static/img/Zf4G2i2gCyewYEOaiZM1qQ/312742/letter_selfmailer.jpg"
376                   alt="A letter-size self-mailer" width="1200" height="840" loading="lazy">
377              <figcaption>Letter self-mailer</figcaption>
378            </figure>
379            <figure class="carousel__slide gallery__slide" data-slide>
380              <img src="/static/img/erG99IygvPM5PfIqn8ab5g/312742/newsletter_selfmailer.jpg"
381                   alt="A newsletter self-mailer" width="800" height="560" loading="lazy">
382              <figcaption>Newsletter self-mailer</figcaption>
383            </figure>
384            <figure class="carousel__slide gallery__slide" data-slide>
385              <img src="/static/img/rEz2U2YJFhibxVu0LB5nsA/312742/lg_perf_self_mailer.jpg"
386                   alt="A large perforated self-mailer" width="800" height="560" loading="lazy">
387              <figcaption>Large perforated self-mailer</figcaption>
388            </figure>
389            <figure class="carousel__slide gallery__slide" data-slide>
390              <img src="/static/img/S1anbgUndKS-X9qrXBfEPw/312742/modgate_self_mailer.jpg"
391                   alt="A modified gatefold self-mailer" width="800" height="560" loading="lazy">
392              <figcaption>Modified gatefold self-mailer</figcaption>
393            </figure>
394            <figure class="carousel__slide gallery__slide" data-slide>
395              <img src="/static/img/h9iJzn3fj9rX9xyLSAxMGw/312742/snap_pack_self_mailer.jpg"
396                   alt="A snap-pack self-mailer" width="1200" height="840" loading="lazy">
397              <figcaption>Snap pack</figcaption>
398            </figure>
399            <figure class="carousel__slide gallery__slide" data-slide>
400              <img src="/static/img/hqYMRZx_xqvv5juvK-CbQg/312742/giftcard_self_mailer.jpg"
401                   alt="A gift-card self-mailer" width="1200" height="840" loading="lazy">
402              <figcaption>Gift-card mailer</figcaption>
403            </figure>
404            <figure class="carousel__slide gallery__slide" data-slide>
405              <img src="/static/img/ILX3FfzZeOk1A7ZIG7W4pQ/312742/3_card.jpg"
406                   alt="A three-card mailer" width="1200" height="840" loading="lazy">
407              <figcaption>Three-card mailer</figcaption>
408            </figure>
409            <figure class="carousel__slide gallery__slide" data-slide>
410              <img src="/static/img/DcLwLNJJxl__qxOfFkc7Rg/312742/nested_3p.jpg"
411                   alt="A nested three-panel mailer" width="1200" height="840" loading="lazy">
412              <figcaption>Nested three-panel mailer</figcaption>
413            </figure>
414          </div>
415        </div>
416
417        <div class="carousel__controls">
418          <button class="carousel__arrow" type="button" data-carousel-prev aria-label="Previous product">
419            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.4 3.6L7 12l8.4 8.4 1.4-1.4L9.8 12l7-7z"/></svg>
420          </button>
421          <div class="carousel__dots" data-carousel-dots role="tablist" aria-label="Cho
421ose a product"></div>
422          <button class="carousel__arrow" type="button" data-carousel-next aria-label="Next product">
423            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.6 3.6L7.2 5l7 7-7 7 1.4 1.4L17 12z"/></svg>
424          </button>
425        </div>
426      </div>
427    </div>
428  </div>
429</section>
430
431<!-- =========================================================================
432     WILDLY EFFICIENT MAILING & TRACKING
433     Same four cards as /campaign-types. That copy of the block carries icons
434     and this one does not, which is one of the 11 shared blocks AUDIT.md
435     records as drifted. Reconciled on the icons, since they exist and the two
436     blocks are otherwise identical.
437
438     card--hover-icon adds the pointer-triggered icon animation Owen asked for.
439     Hover-only by design, so nothing moves for a keyboard or touch user who
440     never produces a hover, and prefers-reduced-motion neutralises it.
441     ========================================================================= -->
442<section class="section section--light">
443  <div class="container">
444    <div class="section__head section__head--center" data-reveal>
445      <h2><span class="accent">Wildly Efficient</span> Mailing &amp; Tracking</h2>
446    </div>
447
448    <div class="grid grid--4" data-reveal-group data-reveal-step="90">
449      <div class="card card--soft card--hover-icon card--pink" data-reveal>
450        <img class="card__icon" src="/static/img/pwaX_3njWzFQ-BcB5oE8dg/shared/clock_icon.svg"
451             alt="" aria-hidden="true" width="39" height="52">
452        <h3>Around-The-Clock Team</h3>
453        <p>Our team is on the job around the clock to get your mail out faster.</p>
454      </div>
455      <div class="card card--soft card--hover-icon card--navy" data-reveal>
456        <span class="card__icon card__icon--tint" style="--icon:url('/static/img/A-42YnmYIsqs9I8LRE3PsQ/shared/truck_icon.svg')" aria-hidden="true"></span>
457        <h3>Drop Shipping</h3>
458        <p>Get there right on time and spend less! With direct-to-SCF entry.</p>
459      </div>
460      <div class="card card--soft card--hover-icon card--navy" data-reveal>
461        <img class="card__icon" src="/static/img/3Wgn-Z1Sd77LftvLw9Zzmg/shared/person_icon.svg"
462             alt="" aria-hidden="true" width="33" height="43">
463        <h3>On-Site USPS&reg; Office</h3>
464        <p>We achieve peak efficiency with a postal service clerk in-house.</p>
465      </div>
466      <div class="card card--soft card--hover-icon card--pink" data-reveal>
467        <img class="card__icon" src="/static/img/SaVQIddreylEkaY5_EdEpw/shared/envelope_icon.svg"
468             alt="" aria-hidden="true" width="43" height="60">
469        <h3>Full USPS&reg; Integration</h3>
470        <p>Delivery tracking, presorting, and CASS/NCOA verification are baked into
471           our service.</p>
472      </div>
473    </div>
474  </div>
475</section>
476
477<!-- =========================================================================
478     VIDEO
479     Live floats this over the seam between the grey band above and the navy
480     band below. Kept in its own tight band so it cannot overlap either.
481     ========================================================================= -->
482<section class="section section--tight">
483  <div class="container">
484    <div class="embed" data-reveal>
485      <iframe src="https://www.youtube-nocookie.com/embed/bPXT4nW59Ro?rel=0"
486              title="Inside The Mailworks: direct mail from design to USPS handoff"
487              loading="lazy" allowfullscreen
488              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
489    </div>
490  </div>
491</section>
492
493<!-- =========================================================================
494     ALWAYS IN YOUR CORNER
495     Navy band over machinery-10.png, with three cards straddling its lower
496     edge, which is the layout signature the live design repeats sitewide.
497     ========================================================================= -->
498<section class="section section--navy section--photo">
499  <img class="section__bg" src="/static/img/H40MoNF4qDIO-07xQJHiqA/shared/machinery-10.png"
500       alt="" aria-hidden="true" width="800" height="1261" loading="lazy">
501  <div class="container">
502    <div class="section__head section__head--center" data-reveal>
503      <span class="eyebrow eyebrow--muted">Always In Your Corner</span>
504      <h2>We're Not Just Printers.<br><span class="accent">We're Your Direct Mail&nbsp;Partners.</span></h2>
505      <p>Our 100% digital workflow means no offset, no outsourcing, and no delays.
506         Every campaign is purpose-built around the results that matter most to you.
507         With USPS&reg; integration, expert delivery timing, and reporting, we turn
508         every mailing into a measurable moment. Here's what sets us apart:</p>
509    </div>
510  </div>
511</section>
512
513<div class="overlap">
514  <div class="container">
515    <div class="grid grid--3" data-reveal-group data-reveal-step="90">
516      <div class="card card--pink" data-reveal>
517        <h3>Everything In-House</h3>
518        <p>Fully digital &amp; all under one roof. No outsourcing, no offset,
519           no compromises.</p>
520      </div>
521      <div class="card card--navy" data-reveal>
522        <h3>Built For YOU</h3>
523        <p>We've built campaign types tailored to the goals you told us were most
524           important.</p>
525      </div>
526      <div class="card card--teal" data-reveal>
527        <h3>Precision Delivery</h3>
528        <p>Full USPS&reg; integration, science-backed timing, and real-time reporting.</p>
529      </div>
530    </div>
531  </div>
532</div>
533
534<!-- "Campaign Types That Fit Your Marketing Strategy" teaser: the four-card
535     grid that points at /campaign-types. Shared by /services and
536     /partner-program, which carried identical card copy and intro in two
537     places. One copy now, so a wording change is one edit, not two.
538
539     This is the ribboned (promo) treatment: /partner-program already had it and
540     /services adopted it here, so the two pages match. The four cards, the
541     intro, and the accent heading are all authoritative here.
542
543     One-time and Rush both live on the One-time page (Rush is an option, not a
544     separate type), so only those two are links; Always On and BirthdayMail are
545     coming soon and carry a "Coming soon" badge. -->
546<section class="section">
547  <div class="container">
548    <div class="section__head section__head--center" data-reveal>
549      <h2><span class="accent">Campaign Types</span><br>That Fit Your Marketing&nbsp;Strategy</h2>
550      <p>Our direct mail solutions align your marketing goals with the right campaign
551         types, products, and delivery timelines, delivering the outcomes you need,
552         on your budget.</p>
553    </div>
554
555    <div class="grid grid--4" data-reveal-group data-reveal-step="90">
556      <a class="card card--soft card--pink promo" href="/campaign-types/one-time" data-reveal>
557        <span class="ribbon ribbon--sm" aria-hidden="true">
558          <img src="/static/img/VFyj77BwEQK5_WYB-w_EsA/shared/banner_icon.svg" alt="" width="49" height="114">
559          <img class="ribbon__glyph" src="/static/img/TGtmEf4izMg2p8EosHiKtw/shared/checkmark_icon.svg"
560               alt="" width="17" height="20">
561        </span>
562        <h3>One-time</h3>
563        <p>Pick your Wednesday and land nationwide in a three-day window</p>
564      </a>
565
566      <a class="card card--soft card--navy promo" href="/campaign-types/one-time" data-reveal>
567        <span class="ribbon ribbon--sm" aria-hidden="true">
568          <img src="/static/img/aqYib5btimDgQUblfd_HPQ/shared/banner_icon_1.svg" alt="" width="49" height="114">
569          <img class="ribbon__glyph" src="/static/img/fdTQTEWU9y3CDAHWkegBmw/shared/timer_icon.svg"
570               alt="" width="17" height="20">
571        </span>
572        <h3>Rush</h3>
573        <p>The fast option on a one-time campaign, out the door in 1 to 2 business days</p>
574      </a>
575
576      <div class="card card--soft card--navy promo" data-reveal>
577        <span class="badge-soon">Coming soon</span>
578        <span class="ribbon ribbon--sm" aria-hidden="true">
579          <img src="/static/img/Yvq_CVKWLx1p4NUSg3h1HA/shared/banner_icon_2.svg" alt="" width="49" height="114">
580          <img class="ribbon__glyph" src="/static/img/Uvf__3-IpOe7dQ8ZvM2jkg/shared/leaf_icon.svg"
581               alt="" width="17" height="20">
582        </span>
583        <h3>Always On</h3>
584        <p>Scheduled or triggered mail that follows up so you don't have to</p>
585      </div>
586
587      <div class="card card--soft card--navy promo" data-reveal>
588        <span class="badge-soon">Coming soon</span>
589        <span class="ribbon ribbon--sm" aria-hidden="true">
590          <img src="/static/img/ZmCCrSSOKPooGIAIu7t4IA/shared/banner_icon_3.svg" alt="" width="49" height="114">
591          <img class="ribbon__glyph" src="/static/img/mGAYC7NYx4gPO7txkMISqw/shared/birthday_candle_icon.svg"
592               alt="" width="17" height="20">
593        </span>
594        <h3>BirthdayMail&reg;</h3>
595        <p>Customer celebrations that build loyalty, a program within Always On</p>
596      </div>
597    </div>
598
599    <div class="btn-row" style="justify-content:center">
600      <a class="btn" href="/campaign-types">Explore Campaign Types</a>
601    </div>
602  </div>
603</section>
604
605
606<!-- =========================================================================
607     TESTIMONIALS: the waterfall.
608
609     One partial, included by the eleven pages that carry this band. It used to
610     be copy-pasted per page, which is exactly how two of the quotes drifted
611     apart on the live Showit site (see content-audit/seed/testimonials.json,
612     `text_drift`). There is now one copy of the text in the repo.
613
614     The quotes and attributions here are the authoritative ones from that seed
615     file, which was extracted from the live site. Note that the hand-written
616     homepage had the attributions shuffled: Jorge's quote was credited to
617     Diana, Patrick's to Ellen, and Ellen's to Jorge. Corrected here.
618
619     Layout: intro copy on the left, two columns of quotes to its right that
620     scroll continuously in opposite directions and stop when the pointer lands
621     on them. Cards are split across the columns by length so the two tracks
622     come out roughly the same height.
623
624     Per-page overrides, set in a page's front matter:
625
626       t_section    classes on the <section>   default: section section--light
627       t_eyebrow    extra class on the eyebrow default: (none)
628
629     The scrolling itself is set up by static/js/waterfall.js, which clones each
630     track for the seamless loop and normalises the speed. Without JS, or with
631     prefers-reduced-motion, the columns render as two plain static lists.
632     ========================================================================= -->
633<section class="section section--deep">
634  <div class="container">
635    <div class="wf">
636
637      <div class="wf__intro" data-reveal>
638        <span class="eyebrow eyebrow--muted">Testimonials</span>
639        <h2>Your Success Is Our Goal.</h2>
640        <p>Don't just take our word for it. Hear from people like YOU who have
641           experienced real success with our solutions.</p>
642        <!-- ===========================================================================
643     TrustPilot rating.
644
645     Figures verified against Trustpilot's own structured data on the profile
646     for themailworks.com: ratingValue 5, reviewCount 744, businessUnitId
647     608849bc0a55d400018d11fa.
648
649     These are HARDCODED and will go stale as reviews come in. Two options when
650     that matters: drop in Trustpilot's official TrustBox widget (the business
651     already has a paid subscription, so it is available), or have the build
652     fetch the figure. Left static for now because a widget adds a third-party
653     script to every page and the count moves slowly.
654     =========================================================================== -->
655<a class="trustpilot" href="https://www.trustpilot.com/review/themailworks.com"
656   target="_blank" rel="noopener">
657  <span class="trustpilot__stars" aria-hidden="true">
658    <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.8-5 4.7 1.3 6.8L12 17.4 5.9 20.6 7.2 13.8l-5-4.7 6.9-.8z"/></svg>
659    <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.8-5 4.7 1.3 6.8L12 17.4 5.9 20.6 7.2 13.8l-5-4.7 6.9-.8z"/></svg>
660    <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.8-5 4.7 1.3 6.8L12 17.4 5.9 20.6 7.2 13.8l-5-4.7 6.9-.8z"/></svg>
661    <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.8-5 4.7 1.3 6.8L12 17.4 5.9 20.6 7.2 13.8l-5-4.7 6.9-.8z"/></svg>
662    <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.9.8-5 4.7 1.3 6.8L12 17.4 5.9 20.6 7.2 13.8l-5-4.7 6.9-.8z"/></svg>
663  </span>
664  <span class="trustpilot__text">
665    <strong>5.0</strong> out of 5 from <strong>
665744</strong> reviews on TrustPilot
666  </span>
667</a>
668
669      </div>
670
671      <!-- aria-label rather than a heading, because the h2 above already names
672           this region and the cards are quotes, not a list of controls. -->
673      <div class="wf__cols" data-waterfall role="region" aria-label="Client testimonials">
674
675        <div class="wf__col" data-waterfall-col>
676          <ul class="wf__track" data-waterfall-track>
677            <li class="wf-card">
678              <blockquote>
679                <p>I had actually stopped doing direct mail altogether until someone
680                   recommended them to me, and I'm so glad they did. The results I got
681                   were better than expected, and since then I've made direct mail a
682                   consistent part of my marketing again. Everyone I've worked with on
683                   their team has been professional, proactive, and genuinely helpful.
684                   They make the process easy and effective. Highly recommend!</p>
685                <footer>Jorge</footer>
686              </blockquote>
687            </li>
688            <li class="wf-card">
689              <blockquote>
690                <p>Mailworks is my secret weapon. They are my trusted development
691                   partner. Their fast expert service makes all of our fundraising
692                   direct mail pieces super simple and effective.</p>
693                <footer>Ellen</footer>
694              </blockquote>
695            </li>
696            <li class="wf-card">
697              <blockquote>
698                <p>Great results! We have used Mailworks for years. They are
699                   responsive, have great reporting, and get us consistent results
700                   and positive ROI.</p>
701                <footer>Diana</footer>
702              </blockquote>
703            </li>
704          </ul>
705        </div>
706
707        <div class="wf__col wf__col--down" data-waterfall-col>
708          <ul class="wf__track" data-waterfall-track>
709            <li class="wf-card">
710              <blockquote>
711                <p>This is the 3rd mail appeal that we have done through The Mailworks,
712                   and I couldn't be happier. Everyone is extremely helpful (and I
713                   definitely needed some hand-holding through the process), and
714                   everything is done in a timely manner. They make you feel that your
715                   mailing is as important to them as it is to you.</p>
716                <footer>Lori</footer>
717              </blockquote>
718            </li>
719            <li class="wf-card">
720              <blockquote>
721                <p>Reliable, results-driven direct mail partner that delivers real
722                   leads. The Mailworks is efficient, professional, and truly
723                   full-service. From helping us refine demographic targeting and
724                   purchasing accurate mailing lists, to designing eye-catching
725                   mailpieces that actually convert, they've been an invaluable part
726                   of our marketing process.</p>
727                <footer>Patrick</footer>
728              </blockquote>
729            </li>
730          </ul>
731        </div>
732
733      </div>
734    </div>
735  </div>
736</section>
737
738
739<!-- =========================================================================
740     OUR PEOPLE
741     Live fills each of the four cards with a brand colour and sets the copy in
742     white. The fourth card's live text reads "Powering our proprietary portal &
743     digital workflow"; trimmed to drop the Portal.
744
745     Two additions Owen asked for. The photo strip is the same four team
746     photographs /campaign-types carries in its copy of this block, which is
747     where the images come from rather than anything new. And each card now
748     carries an icon: these are drawn as masks (.card__icon--tint) so they take
749     the card's colour, because the source SVGs are navy or pink line art and
750     would vanish on a filled navy or pink card.
751     ========================================================================= -->
752<section class="section">
753  <div class="container">
754    <div class="section__head section__head--center" data-reveal>
755      <h2>Our People <span class="accent">Make The Difference.</span></h2>
756      <p>Working hand in hand with our behind-the-scenes tech, our super-human direct
757         mail pros help you execute campaigns that really deliver.</p>
758    </div>
759
760    <div class="photo-strip" data-reveal>
761      <img src="/static/img/4EeRebMhMlumTBl253z6Cg/shared/dscn0191_1.jpg"
762           alt="Two Mailworks team members collaborating on a campaign" width="400" height="400" loading="lazy">
763      <img src="/static/img/2AHFGDGUrIVPwydYFr1jYQ/shared/the_mailworks_2.jpg"
764           alt="An account manager reviewing a campaign proof" width="400" height="400" loading="lazy">
765      <img src="/static/img/gdNqROZm5Cfy4rPzCUqAXQ/shared/mailworks_2.jpg"
766           alt="A production specialist on the mailing floor" width="400" height="400" loading="lazy">
767      <img src="/static/img/EBmckB7ToebfEBXsMrQqkA/shared/img_5255-2.png"
768           alt="A technician setting up an inserting machine on the production floor" width="400" height="400" loading="lazy">
769    </div>
770
771    <div class="grid grid--4" style="margin-top:clamp(24px,3vw,40px)"
772         data-reveal-group data-reveal-step="90">
773      <div class="card card--solid card--fill-deep" data-reveal>
774        <span class="card__icon card__icon--tint" aria-hidden="true"
775              style="--icon:url('/static/img/aSl2ENWfZGYqJZCBpzCfsA/shared/gears_icon.svg')"></span>
776        <h3>Production Specialists</h3>
777        <p>Masters of printing, mailing and delivery</p>
778      </div>
779      <div class="card card--solid card--fill-deep" data-reveal>
780        <span class="card__icon card__icon--tint" aria-hidden="true"
781              style="--icon:url('/static/img/wcyigP93KtDKCbF6-l0d0Q/shared/user_headset_icon.svg')"></span>
782        <h3>Account Managers</h3>
783        <p>Supporting you in all things direct mail</p>
784      </div>
785      <div class="card card--solid card--fill-deep" data-reveal>
786        <span class="card__icon card__icon--tint" aria-hidden="true"
787              style="--icon:url('/static/img/iZRjNv3vMZvQUsfNoYaHSg/shared/paint_brush_icon.svg')"></span>
788        <h3>Graphic Designers</h3>
789        <p>Crafting custom creative &amp; optimizing design templates</p>
790      </div>
791      <div class="card card--solid card--fill-deep" data-reveal>
792        <span class="card__icon card__icon--tint" aria-hidden="true"
793              style="--icon:url('/static/img/kQxd8kl73ATePi6OMA7Ssg/shared/code_icon.svg')"></span>
794        <h3>In-House Developers</h3>
795        <p>Powering our digital workflow</p>
796      </div>
797    </div>
798
799    <div class="btn-row" style="justify-content:center">
800      <a class="btn btn--secondary" href="/about">About Us</a>
801    </div>
802  </div>
803</section>
804
805<!-- =========================================================================
806     CLOSING CTA
807     The photo behind it is the submarine shot the live site uses here, which is
808     what "take the plunge" and "make a splash" are playing off.
809     ========================================================================= -->
810<section class="cta-band section--photo">
811  <img class="section__bg" src="/static/img/nUkGamXkHjiKrGjqnNm42A/312742/screenshot_2025-08-28_at_11_52_42_am.png"
812       alt="" aria-hidden="true" width="1280" height="719" loading="lazy">
813  <div class="container container--narrow">
814    <h2>Ready To Take The Plunge?</h2>
815    <p>Let's make a splash with your next campaign.</p>
816    <div class="btn-row">
817      <a class="btn btn--on-navy" href="/schedule-a-call">Schedule A Call</a>
818    </div>
819  </div>
820</section>
821
822  </main>
823
824  <!-- ===========================================================================
825     Site footer, single source for every page.
826
827     Two defects from the live footer are fixed here rather than reproduced:
828       1. "Follow Us:" was hyperlinked to a Google Maps short URL. It is a
829          plain heading now.
830       2. The copyright year was hardcoded to 2025. Rendered from the build.
831     A third: "We're hiring!" duplicated the Careers link in the same footer,
832     so it is dropped. Flag any of these if Meagan wants them back as-is.
833     =========================================================================== -->
834<footer class="site-footer">
835  <div class="container">
836    <div class="site-footer__top">
837
838      <div class="site-footer__brand">
839        <img src="/static/img/aszv1xX1t3FavAiIY_KpmA/312742/the_mailworks_logo_whitepink_rgb.png"
840             alt="The Mailworks" width="200" height="58">
841        <address class="site-footer__address">
842          <a href="https://maps.app.goo.gl/JN2hspGn2fBfcDnK6" target="_blank" rel="noopener">
843            236 Broadway<br>Menands, NY 12204
844          </a><br>
845          <a href="tel:+15184359300">518.435.9300</a><br>
846          <a href="tel:+18889461850">888.946.1850</a>
847        </address>
848
849        <p class="site-footer__follow">Follow Us:</p>
850        <div class="site-footer__social">
851          <a href="https://www.facebook.com/themailworks" target="_blank" rel="noopener" aria-label="The Mailworks on Facebook">
852            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 9h3V6h-3c-2.2 0-4 1.8-4 4v2H8v3h2v7h3v-7h3l1-3h-4v-2c0-.6.4-1 1-1z"/></svg>
853          </a>
854          <a href="https://www.instagram.com/themailworks/" target="_blank" rel="noopener" aria-label="The Mailworks on Instagram">
855            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2c2.7 0 3 0 4.1.1 1.1 0 1.7.2 2.1.4.5.2.9.5 1.3.9.4.4.7.8.9 1.3.2.4.4 1 .4 2.1C21 7.9 21 8.2 21 12s0 4.1-.1 5.2c0 1.1-.2 1.7-.4 2.1-.2.5-.5.9-.9 1.3-.4.4-.8.7-1.3.9-.4.2-1 .4-2.1.4-1.1.1-1.4.1-4.2.1s-3.1 0-4.2-.1c-1.1 0-1.7-.2-2.1-.4-.5-.2-.9-.5-1.3-.9-.4-.4-.7-.8-.9-1.3-.2-.4-.4-1-.4-2.1C3 16.1 3 15.8 3 12s0-4.1.1-5.2c0-1.1.2-1.7.4-2.1.2-.5.5-.9.9-1.3.4-.4.8-.7 1.3-.9.4-.2 1-.4 2.1-.4C8.9 2 9.2 2 12 2zm0 5a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-3.3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z"/></svg>
856          </a>
857          <a href="https://www.linkedin.com/company/the-mailworks/" target="_blank" rel="noopener" aria-label="The Mailworks on LinkedIn">
858            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.9 8.5H4V20h2.9V8.5zM5.4 4a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM20 13.4c0-3-1.6-4.4-3.8-4.4-1.7 0-2.5.9-2.9 1.6V8.5H10.4V20h2.9v-6.1c0-1.3.6-2.1 1.7-2.1s1.6.8 1.6 2.1V20H20v-6.6z"/></svg>
859          </a>
860        </div>
861      </div>
862
863      <nav class="site-footer__col" aria-label="Solutions">
864        <h2>Solutions</h2>
865        <ul>
866          <li><a href="/services">Our Services</a></li>
867          <li><a href="/campaign-types">Campaign Types</a></li>
868          <li><a href="/industries">Industries</a></li>
869          <li><a href="/partner-program">Partner Program</a></li>
870        </ul>
871      </nav>
872
873      <nav class="site-footer__col" aria-label="Company">
874        <h2>Company</h2>
875        <ul>
876          <li><a href="/about">About Us</a></li>
877          <li><a href="/about/team">Meet the Team</a></li>
878          <li><a href="/careers">Careers</a></li>
879          <li><a href="/contact">Contact Us</a></li>
880        </ul>
881      </nav>
882
883      <nav class="site-footer__col" aria-label="Resources">
884        <h2>Resources</h2>
885        <ul>
886          <li><a href="/direct-mail-academy">Direct Mail Academy</a></li>
887          <li><a href="/hipaa-soc2">HIPAA + SOC2 Compliance</a></li>
888        </ul>
889      </nav>
890    </div>
891
892    <div class="site-footer__bottom">
893      <p class="mb-0">Copyright &copy; 2026 The Mailworks. All Rights Reserved.</p>
894      <div class="site-footer__legal">
895        <a href="/privacy-policy">Privacy Policy</a>
896      </div>
897    </div>
898  </div>
899</footer>
900
901
902  <!-- ===========================================================================
903     Page segue: the full-screen loading indicator shown only when a navigation
904     is genuinely slow.
905
906     A deep-navy screen that fades up over the page being left and plays a short
907     scene on it while the next page loads. Three scenes, rotating between the
908     navigations that are slow enough to show one:
909
910       plane    the pink paper airplane flies on the spot, wind streaming past
911       truck    a Mailworks van drives on the spot, bumping and smoking
912       letter   a sheet drops into an envelope and the flap seals
913
914     static/js/segue.js puts segue-plane, segue-truck or segue-letter on <html>
915     alongside segue-waiting once a load crosses the threshold. See .segue in
916     static/css/animations.css.
917
918     Three things about this markup:
919
920       - It is inert. aria-hidden plus pointer-events:none in the CSS, so it is
921         never announced and never intercepts a click.
922
923       - It is display:none until <html> carries segue-waiting, so on a fast
924         navigation, which is almost all of them, it is never rendered at all.
925
926       - Every scene is drawn inside a fixed coordinate box, scaled as a unit on
927         small screens, so its parts cannot drift apart.
928     =========================================================================== -->
929<div class="segue" data-segue aria-hidden="true">
930  <div class="segue__panel"></div>
931
932  <!-- ---- Plane: flying on the spot ------------------------------------ -->
933  <!-- The plane is cropped straight out of the site's own artwork
934       (shared/group_35.png, the /careers hero), which bakes the plane and a
935       dotted trail into one raster. scripts/extract_plane.py lifts just the pink
936       plane out of it into img/local/segue-plane.png so it can be animated on
937       its own. -->
938  <div class="segue__stage segue__stage--plane">
939    <div class="segue__scene segue__scene--plane">
940      <span class="segue__wind" aria-hidden="true">
941        <i></i><i></i><i></i><i></i><i></i>
942      </span>
943      <img class="segue__plane" src="/static/img/local/segue-plane.png"
944           alt="" width="304" height="112">
945    </div>
946  </div>
947
948  <!-- ---- Truck: driving on the spot ------------------------------------ -->
949  <!-- No road and no scenery: the bump, the turning wheels and the exhaust are
950       what say "driving", and on a bare navy screen they carry it on their own. -->
951  <div class="segue__stage segue__stage--truck">
952    <div class="segue__scene segue__scene--truck">
953      <div class="segue__van">
954        <span class="segue__smoke" aria-hidden="true">
955          <i></i><i></i><i></i>
956        </span>
957        <svg viewBox="0 0 150 92" role="presentation" focusable="false">
958          <!-- Cargo box, cab, then the wheels last so the tyres overlap the body. -->
959          <path class="segue__van-body" d="M6 12h90v60H6z" />
960          <path class="segue__van-stripe" d="M6 64h90v8H6z" />
961          <path class="segue__van-body" d="M96 30h23l17 20h7a3 3 0 0 1 3 3v19H96z" />
962          <path class="segue__van-glass" d="M101 35h17l13 15h-30z" />
963          <path class="segue__van-stripe" d="M142 64h7a2 2 0 0 1 2 2v6h-9z" />
964          <rect class="segue__van-lamp" x="143" y="54" width="6" height="5" rx="1.5" />
965          <image href="/static/img/d1dPZlM8V-UA5jaJA-7M9Q/shared/group_159.png"
966                 x="12" y="20" width="78" height="36" />
967          <g class="segue__wheel">
968            <circle class="segue__tyre" cx="32" cy="81" r="11" />
969            <circle class="segue__hub" cx="32" cy="81" r="4.5" />
970            <path class="segue__spoke" d="M32 76.5v9M27.5 81h9" />
971          </g>
972          <g class="segue__wheel">
973            <circle class="segue__tyre" cx="112" cy="81" r="11" />
974            <circle class="segue__hub" cx="112" cy="81" r="4.5" />
975            <path class="segue__spoke" d="M112 76.5v9M107.5 81h9" />
976          </g>
977        </svg>
978      </div>
979    </div>
980  </div>
981
982  <!-- ---- Letter: into the envelope, then sealed ------------------------- -->
983  <div class="segue__stage segue__stage--letter">
984    <div class="segue__scene segue__scene--letter">
985      <svg viewBox="0 0 520 360" role="presentation" focusable="false">
986        <!-- Painting order is the whole trick here, twice over.
987             1. The sheet is drawn BEFORE the envelope's front panel, so sliding
988                it down past y=150 tucks it behind the envelope, not over it.
989             2. The flap is TWO copies of the same triangle. A real flap is
990                hinged at the back: it sits behind the sheet while it is open and
991                comes in front once it folds shut, and SVG cannot reorder mid
992                animation. So the raised half is drawn back here and the folding
993                half is drawn over the front panel below. Each covers half the
994                fold and they hand over at scaleY(0), where both are edge-on and
995                invisible, so the swap cannot be seen. -->
996        <polygon class="segue__env-flap segue__env-flap--back" points="60,150 460,150 260,262" />
997
998        <g class="segue__sheet">
999          <rect class="segue__sheet-paper" x="118" y="-42" width="284" height="150" rx="4" />
1000          <g class="segue__sheet-rule">
1001            <rect x="146" y="-14" width="118" height="9" rx="4.5" />
1002            <rect x="146" y="10" width="228" height="7" rx="3.5" />
1003            <rect x="146" y="28" width="228" height="7" rx="3.5" />
1004            <rect x="146" y="46" width="180" height="7" rx="3.5" />
1005          </g>
1006          <rect class="segue__sheet-accent" x="146" y="-14" width="118" height="9" rx="4.5" />
1007        </g>
1008
1009        <rect class="segue__env-front" x="60" y="150" width="400" height="170" rx="6" />
1010        <!-- The envelope's own creases, so the front does not read as a plain box. -->
1011        <path class="segue__env-crease" d="M60 320 L260 208 L460 320" />
1012
1013        <!-- The folding half: starts edge-on and swings down over the front. -->
1014        <polygon class="segue__env-flap segue__env-flap--front" points="60,150 460,150 260,262" />
1015
1016        <circle class="segue__env-seal" cx="260" cy="252" r="17" />
1017      </svg>
1018    </div>
1019  </div>
1020</div>
1021
1022
1023  
1023<script src="/static/js/nav.js?v=16a09b2ba6" defer></script>
1023
1024  
1024<script src="/static/js/reveal.js?v=16a09b2ba6" defer></script>
1024
1025  
1025<script src="/static/js/carousel.js?v=16a09b2ba6" defer></script>
1025
1026  
1026<script src="/static/js/waterfall.js?v=16a09b2ba6" defer></script>
1026
1027  
1027<script src="/static/js/tabs.js?v=16a09b2ba6" defer></script>
1027
1028  
1028<script src="/static/js/attribution.js?v=16a09b2ba6" defer></script>
1028
1029  
1029<script src="/static/js/lead-submit.js?v=16a09b2ba6" defer></script>
1029
1030  
1030<script src="/static/js/lead-form.js?v=16a09b2ba6" defer></script>
1030
1031  
1031<script src="/static/js/schedule-form.js?v=16a09b2ba6" defer></script>
1031
1032  
1032<script src="/static/js/contact-form.js?v=16a09b2ba6" defer></script>
1032
1033  
1033<script src="/static/js/animations.js?v=16a09b2ba6" defer></script>
1033
1034  
1034<script src="/static/js/segue.js?v=16a09b2ba6" defer></script>
1034
1035</body>
1036</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.