PageSourceSearch

https://www.themailworks.com/contact

html themailworks.com collected 2026-10-08 10:02:02 UTC 30,139 bytes, 584 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>Contact Us - Print and Mail Specialists | The Mailworks</title>
7  <meta name="description" content="Get in touch with The Mailworks. Talk to sales, ask a general question, or get help with an existing order, and reach us by phone during business hours.">
8  <link rel="canonical" href="https://themailworks.com/contact">
9
10  <meta property="og:site_name" content="The Mailworks">
11  <meta property="og:title" content="Contact Us - Print and Mail Specialists | The Mailworks">
12  <meta property="og:description" content="Get in touch with The Mailworks. Talk to sales, ask a general question, or get help with an existing order, and reach us by phone during business hours.">
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">
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<section class="hero">
200  <div class="container">
201    <div class="section__head" data-reveal>
202      <span class="eyebrow">Contact US</span>
203      <h1>Let’s Talk Mail: We’re All Ears</h1>
204      <!-- Intro copy is being revised and will arrive with the content pass. -->
205      <p class="hero__body">Tell us what brings you here and we'll <strong class="pop">point you the right way</strong>. Pick the option that fits, and we'll take it from there.</p>
206    </div>
207  </div>
208</section>
209
210<section class="section section--tight">
211  <div class="container">
212    <!-- Intent router: no form fields render until someone picks a reason.
213         "Talk to sales" is a genuine navigation to Schedule A Call, not a
214         shorter form here, so sales leads all arrive through the same door with
215         the same information. The chosen intent is captured on the record. -->
216    <div class="contact-layout" data-contact>
217      <div class="contact-main">
218
219        <div class="intent" data-contact-step="choose" data-reveal>
220          <h2 class="contact-main__title">How can we help?</h2>
221          <div class="intent-cards">
222            <a class="intent-card" href="/schedule-a-call" data-intent="sales">
223              <span class="intent-card__title">I'd like to talk to sales</span>
224              <span class="intent-card__note">Book a call and see if we're a fit.</span>
225              <span class="intent-card__arrow" aria-hidden="true">&rarr;</span>
226            </a>
227            <button type="button" class="intent-card" data-intent="general">
228              <span class="intent-card__title">I have a general question</span>
229              <span class="intent-card__note">Anything that isn't sales or an existing order.</span>
230              <span class="intent-card__arrow" aria-hidden="true">&rarr;</span>
231            </button>
232            <button type="button" class="intent-card" data-intent="support">
233              <span class="intent-card__title">I need help with an existing order</span>
234              <span class="intent-card__note">Questions about a job already in motion.</span>
235              <span class="intent-card__arrow" aria-hidden="true">&rarr;</span>
236            </button>
237          </div>
238        </div>
239
240        <div class="contact-form-step" data-contact-step="form" hidden>
241          <button type="button" class="contact-back" data-contact-back>
242            <span aria-hidden="true">&larr;</span> Choose a different reason
243          </button>
244          <h2 class="contact-main__title" data-contact-form-title>Ask us anything</h2>
245
246          <form class="lead-form lead-form--contact" data-contact-form novalidate
247                aria-label="Send The Mailworks a message">
248
249            <div class="lead-form__row">
250              <div class="field">
251                <label class="field__label" for="c-first-name">First name</label>
252                <input class="field__input" id="c-first-name" name="first_name"
253                       type="text" autocomplete="given-name" required
254                       placeholder="Jane" aria-describedby="c-first-name-error"
255                       data-required-message="Enter your first name.">
256                <p class="field__error" id="c-first-name-error" data-error-for="first_name"></p>
257              </div>
258              <div class="field">
259                <label class="field__label" for="c-last-name">Last name</label>
260                <input class="field__input" id="c-last-name" name="last_name"
261                       type="text" autocomplete="family-name" required
262                       placeholder="Doe" aria-describedby="c-last-name-error"
263                       data-required-message="Enter your last name.">
264                <p class="field__error" id="c-last-name-error" data-error-for="last_name"></p>
265              </div>
266            </div>
267
268            <div class="field">
269              <label class="field__label" for="c-email">Email</label>
270              <input class="field__input" id="c-email" name="email"
271                     type="email" autocomplete="email" required
272                     placeholder="[email protected]" aria-describedby="c-email-error"
273                     data-required-message="Enter your email so we can reply.">
274              <p class="field__error" id="c-email-error" data-error-for="email"></p>
275            </div>
276
277            <div class="field">
278              <label class="field__label" for="c-company">Company <span class="field__optional">(optional)</span></label>
279              <input class="field__input" id="c-company" name="company"
280                     type="text" autocomplete="organization" placeholder="Acme Co.">
281            </div>
282
283            <div class="field">
284              <label class="field__label" for="c-phone">Phone <span class="field__optional">(optional)</span></label>
285              <input class="field__input" id="c-phone" name="phone"
286                     type="tel" autocomplete="tel" placeholder="(555) 123-4567">
287            </div>
288
289            <div class="field">
290              <label class="field__label" for="c-message">How can we help?</label>
291              <textarea class="field__input" id="c-message" name="message" rows="5" required
292                        placeholder="Tell us what you need." aria-describedby="c-message-error"
293                        data-required-message="Let us know how we can help."></textarea>
294              <p class="field__error" id="c-message-error" data-error-for="message"></p>
295            </div>
296
297            <input type="hidden" name="contact_intent" value="">
298
299            <!-- Honeypot. Off-screen and hidden from assistive tech. -->
300            <div class="hp-field" aria-hidden="true">
301              <label for="c-website">Website</label>
302              <input id="c-website" name="website" type="text" tabindex="-1" autocomplete="off">
303            </div>
304
305            <button class="btn" type="submit">Submit</button>
306          </form>
307        </div>
308
309      </div>
310
311      <aside class="contact-rail" aria-label="Other ways to reach us" data-reveal data-reveal-delay="120">
312        <div class="rail-item">
313          <span class="rail-item__icon" aria-hidden="true">
314            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
315          </span>
316          <div class="rail-item__body">
317            <h3 class="rail-item__title">Business Hours</h3>
318            <ul class="rail-hours">
319              <li><strong>Office</strong> 8:30am &ndash; 5pm M-F</li>
320              <li><strong>Shipping + Receiving</strong> 8am &ndash; 5pm M-F</li>
321            </ul>
322          </div>
323        </div>
324
325        <div class="rail-item">
326          <span class="rail-item__icon" aria-hidden="true">
327            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>
328          </span>
329          <div class="rail-item__body">
330            <h3 class="rail-item__title">Call Us</h3>
331            <p><a href="tel:+15184359300">518.435.9300</a></p>
332            <p><a href="tel:+18889461850">888.946.1850</a></p>
333          </div>
334        </div>
335
336        <div class="rail-item">
337          <span class="rail-item__icon" aria-hidden="true">
338            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h13v14H6a2 2 0 0 1-2-2z"/><path d="M17 8h3v9a2 2 0 0 1-2 2"/><path d="M7 8h7M7 11h7M7 14h4"/></svg>
339          </span>
340          <div class="rail-item__body">
341            <h3 class="rail-item__title">Media &amp; Press Inquiries</h3>
342            <p><a href="/contact/media-press">Fill out this form</a></p>
343          </div>
344        </div>
345
346        <div class="rail-item">
347          <span class="rail-item__icon" aria-hidden="true">
348            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>
349          </span>
350          <div class="rail-item__body">
351            <h3 class="rail-item__title">Career Opportunities</h3>
352            <p><a href="/careers">See open positions here</a></p>
353          </div>
354        </div>
355
356        <div class="rail-item">
357          <span class="rail-item__icon" aria-hidden="true">
358            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3c4 1 7 4 8 8-3 1-4 2-5 3s-2 2-3 5c-4-1-7-4-8-8 3-1 4-2 5-3s2-2 3-5z"/><circle cx="14" cy="10" r="1.6"/><path d="M7 15l-2 4 4-2"/></svg>
359          </span>
360          <div class="rail-item__body">
361            <h3 class="rail-item__title">Partner With Us</h3>
362            <p><a href="/schedule-a-call">Schedule a call today</a></p>
363          </div>
364        </div>
365      </aside>
366    </div>
367  </div>
368</section>
369
370  </main>
371
372  <!-- ===========================================================================
373     Site footer, single source for every page.
374
375     Two defects from the live footer are fixed here rather than reproduced:
376       1. "Follow Us:" was hyperlinked to a Google Maps short URL. It is a
377          plain heading now.
378       2. The copyright year was hardcoded to 2025. Rendered from the build.
379     A third: "We're hiring!" duplicated the Careers link in the same footer,
380     so it is dropped. Flag any of these if Meagan wants them back as-is.
381     =========================================================================== -->
382<footer class="site-footer">
383  <div class="container">
384    <div class="site-footer__top">
385
386      <div class="site-footer__brand">
387        <img src="/static/img/aszv1xX1t3FavAiIY_KpmA/312742/the_mailworks_logo_whitepink_rgb.png"
388             alt="The Mailworks" width="200" height="58">
389        <address class="site-footer__address">
390          <a href="https://maps.app.goo.gl/JN2hspGn2fBfcDnK6" target="_blank" rel="noopener">
391            236 Broadway<br>Menands, NY 12204
392          </a><br>
393          <a href="tel:+15184359300">518.435.9300</a><br>
394          <a href="tel:+18889461850">888.946.1850</a>
395        </address>
396
397        <p class="site-footer__follow">Follow Us:</p>
398        <div class="site-footer__social">
399          <a href="https://www.facebook.com/themailworks" target="_blank" rel="noopener" aria-label="The Mailworks on Facebook">
400            <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>
401          </a>
402          <a href="https://www.instagram.com/themailworks/" target="_blank" rel="noopener" aria-label="The Mailworks on Instagram">
403            <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>
404          </a>
405          <a href="https://www.linkedin.com/company/the-mailworks/" target="_blank" rel="noopener" aria-label="The Mailworks on LinkedIn">
406            <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>
407          </a>
408        </div>
409      </div>
410
411      <nav class="site-footer__col" aria-label="Solutions">
412        <h2>Solutions</h2>
413        <ul>
414          <li><a href="/services">Our Services</a></li>
415          <li><a href="/campaign-types">Campaign Types</a></li>
416          <li><a href="/industries">Industries</a></li>
417          <li><a href="/partner-program">Partner Program</a></li>
418        </ul>
419      </nav>
420
421      <nav class="site-footer__col" aria-label="Company">
422        <h2>Company</h2>
423        <ul>
424          <li><a href="/about">About Us</a></li>
425          <li><a href="/about/team">Meet the Team</a></li>
426          <li><a href="/careers">Careers</a></li>
427          <li><a href="/contact">Contact Us</a></li>
428        </ul>
429      </nav>
430
431      <nav class="site-footer__col" aria-label="Resources">
432        <h2>Resources</h2>
433        <ul>
434          <li><a href="/direct-mail-academy">Direct Mail Academy</a></li>
435          <li><a href="/hipaa-soc2">HIPAA + SOC2 Compliance</a></li>
436        </ul>
437      </nav>
438    </div>
439
440    <div class="site-footer__bottom">
441      <p class="mb-0">Copyright &copy; 2026 The Mailworks. All Rights Reserved.</p>
442      <div class="site-footer__legal">
443        <a href="/privacy-policy">Privacy Policy</a>
444      </div>
445    </div>
446  </div>
447</footer>
448
449
450  <!-- ===========================================================================
451     Page segue: the full-screen loading indicator shown only when a navigation
452     is genuinely slow.
453
454     A deep-navy screen that fades up over the page being left and plays a short
455     scene on it while the next page loads. Three scenes, rotating between the
456     navigations that are slow enough to show one:
457
458       plane    the pink paper airplane flies on the spot, wind streaming past
459       truck    a Mailworks van drives on the spot, bumping and smoking
460       letter   a sheet drops into an envelope and the flap seals
461
462     static/js/segue.js puts segue-plane, segue-truck or segue-letter on <html>
463     alongside segue-waiting once a load crosses the threshold. See .segue in
464     static/css/animations.css.
465
466     Three things about this markup:
467
468       - It is inert. aria-hidden plus pointer-events:none in the CSS, so it is
469         never announced and never intercepts a click.
470
471       - It is display:none until <html> carries segue-waiting, so on a fast
472         navigation, which is almost all of them, it is never rendered at all.
473
474       - Every scene is drawn inside a fixed coordinate box, scaled as a unit on
475         small screens, so its parts cannot drift apart.
476     =========================================================================== -->
477<div class="segue" data-segue aria-hidden="true">
478  <div class="segue__panel"></div>
479
480  <!-- ---- Plane: flying on the spot ------------------------------------ -->
481  <!-- The plane is cropped straight out of the site's own artwork
482       (shared/group_35.png, the /careers hero), which bakes the plane and a
483       dotted trail into one raster. scripts/extract_plane.py lifts just the pink
484       plane out of it into img/local/segue-plane.png so it can be animated on
485       its own. -->
486  <div class="segue__stage segue__stage--plane">
487    <div class="segue__scene segue__scene--plane">
488      <span class="segue__wind" aria-hidden="true">
489        <i></i><i></i><i></i><i></i><i></i>
490      </span>
491      <img class="segue__plane" src="/static/img/local/segue-plane.png"
492           alt="" width="304" height="112">
493    </div>
494  </div>
495
496  <!-- ---- Truck: driving on the spot ------------------------------------ -->
497  <!-- No road and no scenery: the bump, the turning wheels and the exhaust are
498       what say "driving", and on a bare navy screen they carry it on their own. -->
499  <div class="segue__stage segue__stage--truck">
500    <div class="segue__scene segue__scene--truck">
501      <div class="segue__van">
502        <span class="segue__smoke" aria-hidden="true">
503          <i></i><i></i><i></i>
504        </span>
505        <svg viewBox="0 0 150 92" role="presentation" focusable="false">
506          <!-- Cargo box, cab, then the wheels last so the tyres overlap the body. -->
507          <path class="segue__van-body" d="M6 12h90v60H6z" />
508          <path class="segue__van-stripe" d="M6 64h90v8H6z" />
509          <path class="segue__van-body" d="M96 30h23l17 20h7a3 3 0 0 1 3 3v19H96z" />
510          <path class="segue__van-glass" d="M101 35h17l13 15h-30z" />
511          <path class="segue__van-stripe" d="M142 64h7a2 2 0 0 1 2 2v6h-9z" />
512          <rect class="segue__van-lamp" x="143" y="54" width="6" height="5" rx="1.5" />
513          <image href="/static/img/d1dPZlM8V-UA5jaJA-7M9Q/shared/group_159.png"
514                 x="12" y="20" width="78" height="36" />
515          <g class="segue__wheel">
516            <circle class="segue__tyre" cx="32" cy="81" r="11" />
517            <circle class="segue__hub" cx="32" cy="81" r="4.5" />
518            <path class="segue__spoke" d="M32 76.5v9M27.5 81h9" />
519          </g>
520          <g class="segue__wheel">
521            <circle class="segue__tyre" cx="112" cy="81" r="11" />
522            <circle class="segue__hub" cx="112" cy="81" r="4.5" />
523            <path class="segue__spoke" d="M112 76.5v9M107.5 81h9" />
524          </g>
525        </svg>
526      </div>
527    </div>
528  </div>
529
530  <!-- ---- Letter: into the envelope, then sealed ------------------------- -->
531  <div class="segue__stage segue__stage--letter">
532    <div class="segue__scene segue__scene--letter">
533      <svg viewBox="0 0 520 360" role="presentation" focusable="false">
534        <!-- Painting order is the whole trick here, twice over.
535             1. The sheet is drawn BEFORE the envelope's front panel, so sliding
536                it down past y=150 tucks it behind the envelope, not over it.
537             2. The flap is TWO copies of the same triangle. A real flap is
538                hinged at the back: it sits behind the sheet while it is open and
539                comes in front once it folds shut, and SVG cannot reorder mid
540                animation. So the raised half is drawn back here and the folding
541                half is drawn over the front panel below. Each covers half the
542                fold and they hand over at scaleY(0), where both are edge-on and
543                invisible, so the swap cannot be seen. -->
544        <polygon class="segue__env-flap segue__env-flap--back" points="60,150 460,150 260,262" />
545
546        <g class="segue__sheet">
547          <rect class="segue__sheet-paper" x="118" y="-42" width="284" height="150" rx="4" />
548          <g class="segue__sheet-rule">
549            <rect x="146" y="-14" width="118" height="9" rx="4.5" />
550            <rect x="146" y="10" width="228" height="7" rx="3.5" />
551            <rect x="146" y="28" width="228" height="7" rx="3.5" />
552            <rect x="146" y="46" width="180" height="7" rx="3.5" />
553          </g>
554          <rect class="segue__sheet-accent" x="146" y="-14" width="118" height="9" rx="4.5" />
555        </g>
556
557        <rect class="segue__env-front" x="60" y="150" width="400" height="170" rx="6" />
558        <!-- The envelope's own creases, so the front does not read as a plain box. -->
559        <path class="segue__env-crease" d="M60 320 L260 208 L460 320" />
560
561        <!-- The folding half: starts edge-on and swings down over the front. -->
562        <polygon class="segue__env-flap segue__env-flap--front" points="60,150 460,150 260,262" />
563
564        <circle class="segue__env-seal" cx="260" cy="252" r="17" />
565      </svg>
566    </div>
567  </div>
568</div>
569
570
571  
571<script src="/static/js/nav.js?v=16a09b2ba6" defer></script>
571
572  
572<script src="/static/js/reveal.js?v=16a09b2ba6" defer></script>
572
573  
573<script src="/static/js/carousel.js?v=16a09b2ba6" defer></script>
573
574  
574<script src="/static/js/waterfall.js?v=16a09b2ba6" defer></script>
574
575  
575<script src="/static/js/tabs.js?v=16a09b2ba6" defer></script>
575
576  
576<script src="/static/js/attribution.js?v=16a09b2ba6" defer></script>
576
577  
577<script src="/static/js/lead-submit.js?v=16a09b2ba6" defer></script>
577
578  
578<script src="/static/js/lead-form.js?v=16a09b2ba6" defer></script>
578
579  
579<script src="/static/js/schedule-form.js?v=16a09b2ba6" defer></script>
579
580  
580<script src="/static/js/contact-form.js?v=16a09b2ba6" defer></script>
580
581  
581<script src="/static/js/animations.js?v=16a09b2ba6" defer></script>
581
582  
582<script src="/static/js/segue.js?v=16a09b2ba6" defer></script>
582
583</body>
584</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.