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">→</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">→</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">→</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">←</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 – 5pm M-F</li> 320 <li><strong>Shipping + Receiving</strong> 8am – 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 & 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 © 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.