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.0" /> 6 <style data-critical>/* Above-the-fold styles inlined by Vite. Keep this small and in sync with styles.css. */ 7@font-face { 8 font-family: "Anton"; 9 src: url("/assets/fonts/anton-latin.woff2") format("woff2"); 10 font-style: normal; 11 font-weight: 400; 12 font-display: swap; 13} 14 15@font-face { 16 font-family: "Bricolage Grotesque"; 17 src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2"); 18 font-style: normal; 19 font-weight: 200 800; 20 font-stretch: 75% 100%; 21 font-display: swap; 22} 23 24@font-face { 25 font-family: "Zalando Sans Expanded"; 26 src: url("/assets/fonts/zalando-sans-expanded-latin.woff2") format("woff2"); 27 font-style: normal; 28 font-weight: 200 900; 29 font-display: swap; 30} 31 32/* Stand-ins shown while the web fonts download: a local font scaled (size-adjust) to 33 the web font's width, so text wraps to the same lines and nothing moves when the real 34 font swaps in. Without them a phone's first visit reflowed the hero as each font 35 landed (a 0.27 layout shift on the small business page). Arial covers iOS, macOS and 36 Windows; Android has no Arial, so a Roboto-tuned face follows. Keep this block and 37 the font stacks in sync with critical.css. Each scale is the glyph-width ratio over 38 all of the site's own text in that face, letter-spacing excluded since size-adjust 39 leaves it alone. The ascent and descent overrides carry the web font's metrics, 40 divided by the scale because Chrome applies size-adjust to them as well. */ 41@font-face { 42 font-family: "Anton Fallback"; 43 src: local("Arial Bold"), local("Arial-BoldMT"); 44 font-weight: 400; 45 size-adjust: 69.0%; 46 ascent-override: 171.0%; 47 descent-override: 47.8%; 48 line-gap-override: 0%; 49} 50 51@font-face { 52 font-family: "Anton Fallback Roboto"; 53 src: local("Roboto"), local("Roboto-Regular"); 54 font-weight: 400; 55 size-adjust: 75.7%; 56 ascent-override: 155.9%; 57 descent-override: 43.6%; 58 line-gap-override: 0%; 59} 60 61@font-face { 62 font-family: "Zalando Fallback"; 63 src: local("Arial Bold"), local("Arial-BoldMT"); 64 font-weight: 200 900; 65 size-adjust: 127.1%; 66 ascent-override: 75.5%; 67 descent-override: 19.7%; 68 line-gap-override: 0%; 69} 70 71@font-face { 72 font-family: "Zalando Fallback Roboto"; 73 src: local("Roboto"), local("Roboto-Regular"); 74 font-weight: 200 900; 75 size-adjust: 136.9%; 76 ascent-override: 70.1%; 77 descent-override: 18.3%; 78 line-gap-override: 0%; 79} 80 81@font-face { 82 font-family: "Bricolage Fallback"; 83 src: local("Arial"), local("ArialMT"); 84 font-weight: 200 599; 85 size-adjust: 105.6%; 86 ascent-override: 88.1%; 87 descent-override: 25.6%; 88 line-gap-override: 0%; 89} 90 91@font-face { 92 font-family: "Bricolage Fallback"; 93 src: local("Arial Bold"), local("Arial-BoldMT"); 94 font-weight: 600 900; 95 size-adjust: 99.2%; 96 ascent-override: 93.8%; 97 descent-override: 27.2%; 98 line-gap-override: 0%; 99} 100 101@font-face { 102 font-family: "Bricolage Fallback Roboto"; 103 src: local("Roboto"), local("Roboto-Regular"); 104 font-weight: 200 900; 105 size-adjust: 105.7%; 106 ascent-override: 88.0%; 107 descent-override: 25.5%; 108 line-gap-override: 0%; 109} 110 111:root { 112 --royal: #001489; 113 --royal-bright: #0929b6; 114 --ink: #00112a; 115 --cyan: #00ccff; 116 --sky: #aeefff; 117 --lime: #a0ff55; 118 --paper: #fff; 119 --mist: #eef3f7; 120 --text-body: #26364b; 121 --radius-lg: 1.5rem; 122 --shadow-card: 0 1.2rem 2.6rem rgba(0, 20, 137, 0.1); 123 --focus-ring: var(--royal-bright); 124 --content: 1440px; 125 --gutter: clamp(1.25rem, 4vw, 4rem); 126 --display: "Anton", "Anton Fallback", "Anton Fallback Roboto", "Arial Narrow", Impact, sans-serif; 127 --sans: 128 "Bricolage Grotesque", "Bricolage Fallback", "Bricolage Fallback Roboto", system-ui, -apple-system, 129 BlinkMacSystemFont, "Segoe UI", sans-serif; 130 --expanded: 131 "Zalando Sans Expanded", "Zalando Fallback", "Zalando Fallback Roboto", "Bricolage Grotesque", system-ui, 132 sans-serif; 133 --text-xs: 0.8rem; 134 --text-sm: 0.9rem; 135 --radius-pill: 999px; 136 --ease-out: cubic-bezier(0.16, 1, 0.3, 1); 137} 138 139*, 140*::before, 141*::after { 142 box-sizing: border-box; 143} 144 145html { 146 scroll-padding-top: 5.5rem; 147} 148 149body { 150 margin: 0; 151 color: var(--ink); 152 background: var(--paper); 153 font-family: var(--sans); 154 font-size: 1rem; 155 font-optical-sizing: auto; 156 line-height: 1.55; 157 overflow-x: clip; 158 -webkit-font-smoothing: antialiased; 159 text-wrap: pretty; 160} 161 162img, 163svg { 164 display: block; 165} 166 167img, 168video { 169 max-width: 100%; 170} 171 172a { 173 color: inherit; 174 text-decoration: none; 175} 176 177button { 178 color: inherit; 179 border: 0; 180 font: inherit; 181} 182 183p, 184h1, 185h2 {
186 margin: 0; 187} 188 189/* Headings even out their lines; body text inherits `pretty` from body so no block 190 ends on one orphaned word. vite.config.js glues the last two words for browsers 191 without `pretty`. */ 192h1, 193h2, 194h3, 195h4 { 196 text-wrap: balance; 197} 198 199.shell { 200 width: min(calc(100% - (2 * var(--gutter))), var(--content)); 201 margin-inline: auto; 202} 203 204.section { 205 position: relative; 206 padding-block: clamp(5.5rem, 9vw, 9rem); 207} 208 209/* The cookie notice comes first in <body> so keyboard users reach it early. Pinned here and kept 210 invisible until styles.css arrives (it sets visibility), so a notice main.js shows before the 211 full sheet loads can neither push the page down nor flash unstyled. */ 212.cookie-notice { 213 position: fixed; 214 right: var(--gutter); 215 bottom: 1.25rem; 216 left: var(--gutter); 217 z-index: 400; 218 visibility: hidden; 219} 220 221.cookie-notice[hidden] { 222 display: none; 223} 224 225.skip-link { 226 position: fixed; 227 top: 0.75rem; 228 left: 0.75rem; 229 z-index: 1000; 230 padding: 0.7rem 1rem; 231 color: var(--royal); 232 background: var(--lime); 233 border-radius: var(--radius-pill); 234 font-size: 0.8rem; 235 font-weight: 800; 236 text-transform: uppercase; 237 transform: translateY(-180%); 238} 239 240.eyebrow { 241 color: var(--royal-bright); 242 font-family: var(--expanded); 243 font-size: clamp(var(--text-xs), 0.85vw, 0.82rem); 244 font-weight: 800; 245 letter-spacing: 0.13em; 246 line-height: 1.2; 247 text-transform: uppercase; 248} 249 250.eyebrow--light { 251 color: var(--paper); 252} 253 254.display-title { 255 color: var(--paper); 256 font-family: var(--display); 257 font-size: clamp(4.2rem, 6.6vw, 6.55rem); 258 font-weight: 400; 259 letter-spacing: -0.025em; 260 line-height: 0.96; 261 text-transform: uppercase; 262} 263 264.display-title em { 265 display: inline-block; 266 color: var(--cyan); 267 font-style: normal; 268} 269 270.display-title em > span { 271 display: inline-block; 272 transform: skewX(-7deg); 273 transform-origin: 50% 100%; 274} 275 276.title-line { 277 display: block; 278 width: max-content; 279 max-width: 100%; 280} 281 282.button { 283 position: relative; 284 display: inline-flex; 285 width: fit-content; 286 min-height: 3.55rem; 287 align-items: center; 288 justify-content: center; 289 gap: 1rem; 290 padding: 0.85rem 1.55rem 0.82rem 1.75rem; 291 overflow: hidden; 292 color: var(--royal); 293 background: var(--lime); 294 border: 2px solid var(--lime); 295 border-radius: var(--radius-pill); 296 font-family: var(--expanded); 297 font-size: clamp(0.8rem, 0.76rem + 0.12vw, var(--text-sm)); 298 font-weight: 800; 299 letter-spacing: 0.08em; 300 line-height: 1; 301 text-transform: uppercase; 302} 303 304.button span, 305.button svg { 306 position: relative; 307 z-index: 1; 308} 309 310.button svg { 311 width: 1.25rem; 312 fill: none; 313 stroke: currentColor; 314 stroke-linecap: round; 315 stroke-linejoin: round; 316 stroke-width: 2; 317} 318 319.scroll-progress { 320 position: fixed; 321 top: 0; 322 left: 0; 323 z-index: 200; 324 width: 100%; 325 height: 3px; 326 pointer-events: none; 327} 328 329.site-header { 330 position: fixed; 331 top: 0; 332 left: 0; 333 z-index: 100; 334 width: 100%; 335 color: var(--paper); 336} 337 338.site-header::before { 339 position: absolute; 340 inset: 0; 341 z-index: -1; 342 background: rgba(0, 17, 42, 0.92); 343 border-bottom: 1px solid rgba(174, 239, 255, 0.14); 344 content: ""; 345 opacity: 0.22; 346} 347 348/* Without a dark hero behind it, the header needs its own backdrop from the start. */ 349.page--no-hero .site-header::before { 350 opacity: 1; 351} 352 353.site-header__inner { 354 display: grid; 355 min-height: 5rem; 356 grid-template-columns: minmax(10rem, 0.55fr) auto minmax(20rem, 1.45fr); 357 align-items: center; 358 gap: clamp(1rem, 2.5vw, 2.5rem); 359} 360 361.brand { 362 display: block; 363 width: clamp(9.5rem, 13vw, 12rem); 364} 365 366.brand img { 367 width: 100%; 368 height: auto; 369} 370 371.primary-nav { 372 display: flex; 373 align-items: center; 374 gap: clamp(1.15rem, 2vw, 2.1rem); 375} 376 377.primary-nav > a, 378.nav-item__trigger { 379 display: inline-flex; 380 align-items: center; 381 gap: 0.4rem; 382 padding: 0.8rem 0; 383 background: none; 384 font-family: var(--expanded); 385 font-size: var(--text-xs); 386 font-weight: 750; 387 letter-spacing: 0.08em; 388 text-transform: uppercase; 389 white-space: nowrap; 390} 391 392.nav-item__chevron { 393 width: 0.6rem; 394 height: 0.6rem; 395 fill: none; 396 stroke: currentColor; 397 stroke-width: 2; 398} 399 400.services-menu { 401 position: absolute; 402 opacity: 0; 403 pointer-events: none; 404 visibility: hidden; 405} 406 407.header-actions { 408 display: flex; 409 justify-content: flex-end; 410 align-items: center; 411 gap: 0.65rem; 412} 413 414/* Only ever shown inside the <=900px menu panel (see styles.css). Needed here so 415 it does not flash into the desktop header row before the full sheet loads. */ 416.primary-nav__actions { 417 display: none; 418} 419 420.header-cta, 421.phone-link { 422 display: inline-flex; 423 min-height: 2.15rem; 424 align-items: center; 425 justify-content: center; 426 padding: 0.5rem 0.95rem; 427 border: 2px solid var(--lime); 428 border-radius: var(--radius-pill); 429 font-size: var(--text-xs); 430 font-weight: 800; 431 letter-spacing: 0.06em; 432 line-height: 1; 433 text-transform: uppercase; 434} 435 436.header-cta { 437 color: var(--royal); 438 background: var(--lime); 439} 440 441/* nowrap stands in for a non-breaking hyphen, which CallRail's number swap can't match. */ 442.phone-link { 443 color: var(--lime); 444 white-space: nowrap; 445} 446 447.nav-toggle { 448 display: none; 449 width: 2.9rem; 450 height: 2.9rem; 451 padding: 0; 452 color: var(--paper); 453 background: transparent; 454} 455 456.nav-toggle span { 457 display: block; 458 width: 1.7rem; 459 height: 2px; 460 margin: 0.4rem auto; 461 background: currentColor; 462} 463 464.hero { 465 position: relative; 466 z-index: 1; 467 min-height: min(51rem, 100svh); 468 overflow-x: clip; 469 color: var(--paper); 470 background: linear-gradient(90deg, var(--royal) 0 56%, var(--ink) 56% 100%); 471} 472 473.hero__inner { 474 display: grid; 475 width: min(100%, var(--content)); 476 min-height: min(51rem, 100svh); 477 margin-inline: auto; 478 grid-template-columns: 56% 44%; 479} 480 481.hero__copy { 482 position: relative; 483 z-index: 2; 484 display: flex; 485 min-height: 45rem; 486 align-items: center; 487 padding: clamp(7.5rem, 12vh, 10rem) var(--gutter) clamp(7rem, 10vh, 9rem); 488} 489 490.hero__copy-inner { 491 width: 100%; 492 max-width: 49rem; 493} 494 495.hero .display-title { 496 margin-top: 1.75rem; 497 line-height: 1.04; 498} 499 500.hero__lede { 501 max-width: 37rem; 502 margin-top: 1.6rem; 503 color: rgba(255, 255, 255, 0.86); 504 font-size: clamp(1rem, 1.35vw, 1.22rem); 505 line-height: 1.5; 506} 507 508.hero .button { 509 margin-top: 2.1rem; 510} 511 512.eyebrow__est {
513 color: var(--lime); 514} 515 516.eyebrow__est::before { 517 margin-inline: 0.55em; 518 color: rgba(255, 255, 255, 0.45); 519 content: "·"; 520} 521 522.hero__visual { 523 position: relative; 524 min-width: 0; 525 /* Bleed past the centred content column so the photo reaches the screen edge. */ 526 margin-right: calc(-1 * max(0px, (100vw - var(--content)) / 2)); 527 /* Visible so the pointer can hang below the hero; .hero clips the bleed. */ 528 overflow: visible; 529} 530 531/* Absolute so the 3:4 intrinsic ratio can't stretch the hero row past 100svh. */ 532.hero__visual > img, 533.hero__film { 534 position: absolute; 535 inset: 0; 536 width: 100%; 537 height: 100%; 538 object-fit: cover; 539 object-position: 52% 12%; 540} 541 542/* The still carries first paint. The timelapse of the same shot sits on top of it, 543 transparent until JavaScript has attached the source and playback has begun, so a 544 blocked autoplay or a no-JS visit simply leaves the photo showing. */ 545.hero__film { 546 opacity: 0; 547 transition: opacity 900ms var(--ease-out, ease); 548} 549 550.hero__film.is-playing { 551 opacity: 1; 552} 553 554.hero__image-shade { 555 position: absolute; 556 inset: 0; 557 background: linear-gradient(90deg, rgba(0, 20, 137, 0.27), transparent 30%); 558} 559 560.hero__pointer { 561 position: absolute; 562 z-index: 3; 563 --pointer-w: clamp(6rem, 10vw, 10rem); 564 right: clamp(2rem, 5vw, 5.5rem); 565 /* Art is 100x178; the extra height over the old 150-tall art hangs below the 566 hero so the head stays put. Keep in sync with styles.css. */ 567 bottom: calc(-1 * clamp(0.55rem, 1vw, 1.1rem) - 0.28 * var(--pointer-w)); 568 width: var(--pointer-w); 569 color: var(--paper); 570 transform: rotate(-8deg); 571} 572 573.hero--service, 574.hero--service .hero__inner { 575 min-height: min(44rem, 92svh); 576} 577 578.hero--service .hero__copy { 579 min-height: 36rem; 580 padding-block: clamp(8rem, 13vh, 9.5rem) clamp(4.5rem, 8vh, 6rem); 581} 582 583.hero--service .display-title { 584 margin-top: 0; 585 font-size: clamp(3.6rem, 5.9vw, 5.9rem); 586} 587 588.hero--service .hero__lede { 589 max-width: 30rem; 590} 591 592/* The studio shot (About, marketing services) is landscape, so it loses width rather than height. Anchor it left. */ 593.hero__visual > .hero__studio-photo { 594 object-position: 0% 12%; 595} 596 597/* Two short words over a two-line headline: the default 1.75rem read as a kicker 598 glued to the title, so this hero gives the eyebrow room to stand on its own. */ 599.hero--about .display-title { 600 margin-top: clamp(2rem, 3.6vw, 2.9rem); 601} 602 603/* Small business landing page: no navigation, so the header keeps its actions at every 604 width, and the hero carries a call line beside the button. */ 605.site-header--landing .site-header__inner { 606 grid-template-columns: 1fr auto; 607} 608 609.hero--landing .display-title { 610 margin-top: clamp(1.4rem, 2.4vw, 1.9rem); 611} 612 613.hero__actions { 614 display: flex; 615 flex-wrap: wrap; 616 align-items: center; 617 gap: 1rem 1.6rem; 618 margin-top: 2.1rem; 619} 620 621.hero .hero__actions .button { 622 margin-top: 0; 623} 624 625.hero__call { 626 color: rgba(255, 255, 255, 0.78); 627 font-size: clamp(1rem, 1.35vw, 1.22rem); 628 font-weight: 600; 629} 630 631.hero__call a { 632 color: var(--lime); 633 font-weight: 800; 634 white-space: nowrap; 635} 636 637/* Sits at the foot of a service hero, inside the first screen of a tablet in landscape. 638 The scroll animation waits for the full stylesheet. */ 639.service-ticker { 640 position: relative; 641 overflow: hidden; 642 color: var(--royal); 643 background: var(--cyan); 644 border-block: 1px solid rgba(0, 20, 137, 0.25); 645} 646 647.service-ticker__track { 648 display: flex; 649 width: max-content; 650 align-items: center; 651 gap: 1.15rem; 652 padding-block: 0.85rem; 653} 654 655.service-ticker span { 656 font-size: 0.8rem; 657 font-weight: 800; 658 letter-spacing: 0.12em; 659 text-transform: uppercase; 660 white-space: nowrap; 661} 662 663.service-ticker i { 664 flex-shrink: 0; 665 width: 0.42rem; 666 height: 0.42rem; 667 background: var(--royal); 668 border-radius: 50%; 669} 670 671/* The small business page's client results sit right under the hero ticker, inside the first 672 screen of a desktop. */ 673.proof-band { 674 padding-block: clamp(2.75rem, 5vw, 4.5rem); 675 background: var(--mist); 676} 677 678.proof-band__title { 679 text-align: center; 680} 681 682.proof-stats { 683 display: grid; 684 grid-template-columns: repeat(4, minmax(0, 1fr)); 685 gap: clamp(0.8rem, 1.5vw, 1.35rem); 686 margin: 1.4rem 0 0; 687 padding: 0; 688 list-style: none; 689} 690 691.proof-stat { 692 display: flex; 693 flex-direction: column; 694 padding: clamp(1.3rem, 2.2vw, 2rem); 695 background: var(--paper); 696 border: 2px solid rgba(0, 204, 255, 0.55); 697 border-radius: var(--radius-lg); 698 box-shadow: var(--shadow-card); 699} 700 701.proof-stat__figure {
702 color: var(--royal-bright); 703 font-family: var(--expanded); 704 font-size: clamp(2.2rem, 3.6vw, 3.4rem); 705 font-weight: 800; 706 letter-spacing: -0.02em; 707 line-height: 1; 708} 709 710.proof-stat__label { 711 margin-top: 0.7rem; 712 color: var(--text-body); 713 font-size: var(--text-sm); 714 font-weight: 700; 715 line-height: 1.35; 716} 717 718.proof-stat__client { 719 margin-top: auto; 720 padding-top: 1rem; 721 color: var(--royal); 722 font-family: var(--expanded); 723 font-size: 0.68rem; 724 font-weight: 800; 725 letter-spacing: 0.1em; 726 line-height: 1.3; 727 text-transform: uppercase; 728} 729 730.visually-hidden { 731 position: absolute; 732 width: 1px; 733 height: 1px; 734 margin: 0; 735 overflow: hidden; 736 clip: rect(0 0 0 0); 737 white-space: nowrap; 738} 739 740@media (max-width: 1180px) { 741 .proof-stats { 742 grid-template-columns: repeat(2, minmax(0, 1fr)); 743 } 744 745 .site-header__inner { 746 grid-template-columns: minmax(9rem, 0.55fr) auto minmax(13rem, 1.1fr); 747 } 748 749 .header-cta { 750 display: none; 751 } 752 753 .site-header--landing .header-cta { 754 display: inline-flex; 755 } 756 757 .hero, 758 .hero__inner { 759 min-height: 50rem; 760 } 761 762 .display-title { 763 font-size: clamp(3.8rem, 7vw, 5.35rem); 764 } 765 766 .hero--service, 767 .hero--service .hero__inner { 768 min-height: min(44rem, 92svh); 769 } 770 771 .hero--service .display-title { 772 font-size: clamp(3.2rem, 6vw, 4.8rem); 773 } 774} 775 776@media (max-width: 900px) { 777 :root { 778 --gutter: clamp(1.15rem, 4.5vw, 2.5rem); 779 } 780 781 .site-header__inner { 782 min-height: 4.6rem; 783 grid-template-columns: 1fr auto auto; 784 } 785 786 .brand { 787 position: relative; 788 z-index: 2; 789 width: 10.5rem; 790 } 791 792 .nav-toggle { 793 position: relative; 794 z-index: 2; 795 display: block; 796 } 797 798 .primary-nav { 799 position: fixed; 800 inset: 0; 801 height: 100svh; 802 flex-direction: column; 803 opacity: 0; 804 pointer-events: none; 805 visibility: hidden; 806 } 807 808 .header-actions { 809 order: 1; 810 } 811 812 .nav-toggle { 813 order: 2; 814 } 815 816 .hero { 817 min-height: auto; 818 background: var(--royal); 819 } 820 821 .hero__inner { 822 min-height: auto; 823 grid-template-columns: 1fr; 824 } 825 826 .hero__copy { 827 min-height: min(47rem, 86svh); 828 padding-top: 7.8rem; 829 padding-bottom: 6rem; 830 } 831 832 .display-title { 833 font-size: clamp(3.7rem, 12vw, 6rem); 834 } 835 836 .hero__visual { 837 min-height: min(44rem, 76svh); 838 } 839 840 .hero--service .hero__inner, 841 .hero--service .hero__copy { 842 min-height: 0; 843 } 844 845 .hero--service .hero__copy { 846 padding-top: 7.5rem; 847 padding-bottom: 4.75rem; 848 } 849 850 .hero--service .display-title { 851 font-size: clamp(3.1rem, 10vw, 4.6rem); 852 } 853 854 .hero--service .hero__visual { 855 min-height: min(30rem, 60svh); 856 } 857 858 .hero__visual > img, 859 .hero__film { 860 object-position: center 48%; 861 } 862 863 /* Short, wide frame on the landing page: keep the top so the whole wall logo shows. */ 864 .hero--landing .hero__visual > img, 865 .hero--landing .hero__film { 866 object-position: center 12%; 867 } 868 869 .hero__pointer { 870 right: 12%; 871 bottom: calc(18% - 0.28 * var(--pointer-w)); 872 } 873} 874 875@media (max-width: 620px) { 876 .proof-stat__label { 877 font-size: var(--text-xs); 878 } 879 880 .site-header:not(.site-header--landing) .phone-link { 881 width: 2.75rem; 882 height: 2.75rem; 883 padding: 0; 884 font-size: 0; 885 letter-spacing: 0; 886 } 887 888 .site-header:not(.site-header--landing) .phone-link::before { 889 width: 1.15rem; 890 height: 1.15rem; 891 background: currentColor; 892 content: ""; 893 -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1l-2.2 2.23Z'/></svg>") center / contain no-repeat; 894 mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1l-2.2 2.23Z'/></svg>") center / contain no-repeat; 895 } 896 897 .hero__copy { 898 min-height: 43rem; 899 } 900 901 .display-title { 902 margin-top: 1.3rem; 903 font-size: clamp(3.25rem, 16vw, 5.2rem); 904 } 905 906 .title-line { 907 width: auto; 908 } 909 910 .button { 911 line-height: 1.2; 912 text-align: center; 913 text-wrap: balance; 914 } 915 916 .hero__lede { 917 font-size: 0.98rem; 918 } 919 920 .hero__visual { 921 min-height: 32rem; 922 } 923 924 .hero--landing .hero__visual { 925 display: none; 926 } 927 928 .hero__pointer { 929 --pointer-w: 6.3rem; 930 } 931 932 .hero--service .display-title { 933 font-size: clamp(2.8rem, 14vw, 4.4rem); 934 } 935 936 .site-header--landing .header-cta { 937 display: none; 938 } 939 940 /* Two set lines on wider screens; on a phone the second line would strand a short word on a 941 line of its own ("the" on /small-business/, "and" on web design and development), so the 942 headline flows as one sentence instead. */ 943 .hero--landing .title-line, 944 .display-title--flow .title-line { 945 display: inline; 946 } 947} 948 949@media (max-width: 400px) { 950 .proof-stat { 951 padding: 1.1rem 0.9rem; 952 } 953 954 .proof-stat__figure {
955 font-size: clamp(1.6rem, 9vw, 2.2rem); 956 } 957 958 .proof-stat__client { 959 font-size: clamp(0.6rem, 3.1vw, 0.68rem); 960 } 961 962 .button { 963 gap: 0.75rem; 964 padding-inline: 1.35rem 1.2rem; 965 } 966 967 .site-header--landing .brand { 968 width: 8.5rem; 969 } 970} 971 972@media (pointer: coarse) { 973 .header-cta, 974 .phone-link { 975 min-height: 2.75rem; 976 } 977} 978</style> 979 <link rel="preload" href="/assets/main-CdwyYheU.css" as="style" data-deferred-style> 980 <noscript><link rel="stylesheet" href="/assets/main-CdwyYheU.css"></noscript> 981 <meta 982 name="description" 983 content="Goebel Media is a full-service digital agency with offices in Decatur and Milledgeville, Georgia. Strategy, design, development, marketing, and AI under one roof." 984 /> 985 <meta name="theme-color" content="#001489" /> 986 <meta property="og:title" content="About Us | Goebel Media, Atlanta Digital Marketing Agency" /> 987 <meta 988 property="og:description" 989 content="Goebel Media is a full-service digital agency with offices in Decatur and Milledgeville, Georgia. Strategy, design, development, marketing, and AI under one roof." 990 /> 991 <meta property="og:type" content="website" /> 992 <link rel="icon" href="/assets/favicon/favicon-32.png" sizes="32x32" type="image/png" /> 993 <link rel="icon" href="/assets/favicon/favicon-192.png" sizes="192x192" type="image/png" /> 994 <link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon.png" /> 995 <title>About Us | Goebel Media, Atlanta Digital Marketing Agency</title> 996 <link rel="canonical" href="https://goebelmedia.com/about/" /> 997 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1" /> 998 <meta property="og:url" content="https://goebelmedia.com/about/" /> 999 <meta property="og:site_name" content="Goebel Media" /> 1000 <meta property="og:locale" content="en_US" /> 1001 <meta property="og:image" content="https://goebelmedia.com/assets/images/share/about.jpg" /> 1002 <meta property="og:image:alt" content="Goebel Media: Small town roots, big capabilities." /> 1003 <meta property="og:image:width" content="1200" /> 1004 <meta property="og:image:height" content="630" /> 1005 <meta name="twitter:card" content="summary_large_image" /> 1006 <meta name="twitter:site" content="@goebelmedia" /> 1007 <meta name="twitter:title" content="About Us | Goebel Media, Atlanta Digital Marketing Agency" /> 1008 <meta name="twitter:description" content="Goebel Media is a full-service digital agency with offices in Decatur and Milledgeville, Georgia. Strategy, design, development, marketing, and AI under one roof." /> 1009 <meta name="twitter:image" content="https://goebelmedia.com/assets/images/share/about.jpg" /> 1010
1010<script type="application/ld+json"> 1011 { 1012 "@context": "https://schema.org", 1013 "@graph": [ 1014 { 1015 "@type": "BreadcrumbList", 1016 "@id": "https://goebelmedia.com/about/#breadcrumbs", 1017 "itemListElement": [ 1018 { 1019 "@type": "ListItem", 1020 "position": 1, 1021 "name": "Home", 1022 "item": "https://goebelmedia.com/" 1023 }, 1024 { 1025 "@type": "ListItem", 1026 "position": 2, 1027 "name": "About", 1028 "item": "https://goebelmedia.com/about/" 1029 } 1030 ] 1031 }, 1032 { 1033 "@type": "AboutPage", 1034 "@id": "https://goebelmedia.com/about/#webpage", 1035 "url": "https://goebelmedia.com/about/", 1036 "name": "About Us | Goebel Media, Atlanta Digital Marketing Agency", 1037 "description": "Goebel Media is a full-service digital agency with offices in Decatur and Milledgeville, Georgia. Strategy, design, development, marketing, and AI under one roof.", 1038 "isPartOf": { 1039 "@id": "https://goebelmedia.com/#website" 1040 }, 1041 "about": { 1042 "@id": "https://goebelmedia.com/#organization" 1043 }, 1044 "mainEntity": { 1045 "@id": "https://goebelmedia.com/#organization" 1046 }, 1047 "breadcrumb": { 1048 "@id": "https://goebelmedia.com/about/#breadcrumbs" 1049 }, 1050 "inLanguage": "en-US" 1051 } 1052 ] 1053 } 1054 </script>
1054 1055
1055<script type="module" crossorigin src="/assets/main-BI8FlkxG.js"></script>
1055 1056 1057 <link rel="alternate" type="text/markdown" href="/about/index.md" title="Markdown version" /> 1058 </head> 1059 1060 <body> 1061 <a class="skip-link" href="#main-content">Skip to content</a> 1062 <div 1063 class="cookie-notice" 1064 data-cookie-notice 1065 role="region" 1066 aria-label="Cookie consent" 1067 hidden 1068 > 1069 <div class="cookie-notice__inner"> 1070 <p> 1071 We use cookies and session recordings for analytics, advertising, and call tracking. You 1072 can opt out at any time. See our <a href="/privacy/">Privacy Policy</a> for details. 1073 </p> 1074 <div class="cookie-notice__actions"> 1075 <button class="cookie-notice__button cookie-notice__button--ghost" type="button" data-cookie-decline> 1076 Opt out 1077 </button> 1078 <button class="cookie-notice__button cookie-notice__button--accept" type="button" data-cookie-accept> 1079 Accept 1080 </button> 1081 </div> 1082 </div> 1083 </div> 1084 <div class="scroll-progress" aria-hidden="true"><span></span></div> 1085 1086 <header class="site-header" data-header> 1087 <div class="site-header__inner shell"> 1088 <a class="brand" href="/" aria-label="Goebel Media home"> 1089 <img src="/assets/images/goebel-media-white-220.png" srcset="/assets/images/goebel-media-white-220.png 220w, /assets/images/goebel-media-white-400.png 400w" sizes="(max-width: 900px) 168px, 192px" width="220" height="48" alt="Goebel Media" /> 1090 </a> 1091 1092 <button 1093 class="nav-toggle" 1094 type="button" 1095 aria-expanded="false" 1096 aria-controls="primary-navigation" 1097 aria-label="Open navigation" 1098 > 1099 <span></span><span></span> 1100 </button> 1101 1102 <nav class="primary-nav" id="primary-navigation" aria-label="Primary navigation"> 1103 <a href="/about/" class="is-active" aria-current="page">About</a> 1104 1105 <div class="nav-item has-dropdown" data-nav-dropdown> 1106 <button 1107 class="nav-item__trigger" 1108 type="button" 1109 aria-expanded="false" 1110 aria-controls="services-menu" 1111 > 1112 Services 1113 <svg class="nav-item__chevron" aria-hidden="true" viewBox="0 0 12 8"> 1114 <path d="M1 1l5 5 5-5" /> 1115 </svg> 1116 </button> 1117 1118 <div class="services-menu" id="services-menu"> 1119 <div class="services-menu__inner"> 1120 <div class="services-menu__col"> 1121 <p class="services-menu__heading">Strategy & Brand</p> 1122 <a class="services-menu__link" href="/services/brand-development/"> 1123 <span>Brand Development</span> 1124 <small>Positioning, identity, systems</small> 1125 </a> 1126 <a class="services-menu__link" href="/services/design-creative/"> 1127 <span>Design & Creative</span> 1128 <small>Campaign concepts & assets</small> 1129 </a> 1130 </div> 1131 1132 <div class="services-menu__col"> 1133 <p class="services-menu__heading">Technology</p> 1134 <a class="services-menu__link" href="/services/web-design-development/"> 1135 <span>Web Design & Development</span> 1136 <small>Fast, accessible, built to convert</small> 1137 </a> 1138 <a class="services-menu__link" href="/services/ai-strategy-audits/"> 1139 <span>AI Strategy & Audits</span> 1140 <small>Readiness, roadmap, training</small> 1141 </a> 1142 <a class="services-menu__link" href="/services/ai-systems-architecture/"> 1143 <span>AI Systems Architecture</span> 1144 <small>Workflows & integrations</small> 1145 </a> 1146 <a class="services-menu__link" href="/services/custom-assistants-agents/"> 1147 <span>Custom Assistants & Agents</span> 1148 <small>Chatbots, copilots, knowledgebases</small> 1149 </a> 1150 </div> 1151 1152 <div class="services-menu__col"> 1153 <p class="services-menu__heading">Marketing & Growth</p> 1154 <a class="services-menu__link" href="/services/performance-marketing/">
1155 <span>Performance Marketing</span> 1156 <small>Paid, optimized, accountable</small> 1157 </a> 1158 <a class="services-menu__link" href="/services/social-media-marketing/"> 1159 <span>Social Media Marketing</span> 1160 <small>Platform-smart strategy</small> 1161 </a> 1162 <a class="services-menu__link" href="/services/search-engine-optimization/"> 1163 <span>Search Engine Optimization</span> 1164 <small>Technical, content & AI answers</small> 1165 </a> 1166 <a class="services-menu__link" href="/services/email-marketing/"> 1167 <span>Email Marketing</span> 1168 <small>Lifecycle & retention</small> 1169 </a> 1170 </div> 1171 1172 <div class="services-menu__feature"> 1173 <p class="services-menu__feature-eyebrow">Integrated expertise</p> 1174 <p class="services-menu__feature-title">Everything you need to win more business</p> 1175 <p class="services-menu__feature-copy"> 1176 See how strategy, creative, and technology work together. 1177 </p> 1178 <a class="services-menu__feature-link" href="/#services"> 1179 <span>View all services</span> 1180 <svg aria-hidden="true" viewBox="0 0 28 16"> 1181 <path d="M1 8h24M19 2l6 6-6 6" /> 1182 </svg> 1183 </a> 1184 </div> 1185 </div> 1186 </div> 1187 </div> 1188 1189 <a href="/work/">Work</a> 1190 <a href="/contact/">Contact</a> 1191 <div class="primary-nav__actions"> 1192 <a class="primary-nav__cta" href="#contact">Start a project</a> 1193 <a class="primary-nav__phone" href="tel:+17707691515">(770) 769-1515</a> 1194 </div> 1195 </nav> 1196 1197 <div class="header-actions"> 1198 <a class="header-cta" href="#contact"><span>Start a project</span></a> 1199 <a class="phone-link" href="tel:+17707691515">(770) 769-1515</a> 1200 </div> 1201 </div> 1202 </header> 1203 1204 <main id="main-content"> 1205 <section class="hero hero--service hero--about" id="top" aria-labelledby="about-title"> 1206 <div class="hero__inner"> 1207 <div class="hero__copy"> 1208 <div class="hero__copy-inner"> 1209 <p class="eyebrow eyebrow--light" data-intro style="--intro-delay: 180ms">About us</p> 1210 <h1 id="about-title" class="display-title"> 1211 <span class="title-line" data-intro style="--intro-delay: 260ms">Small town roots,</span> 1212 <span class="title-line" data-intro style="--intro-delay: 340ms"> 1213 <em><span>big</span> <span>capabilities.</span></em> 1214 </span> 1215 </h1> 1216 <p class="hero__lede" data-intro style="--intro-delay: 440ms"> 1217 We are a digital agency with over 1218 <!-- Rolls over on its own every July 30. The number here is the no-JS fallback. --> 1219 <span data-years-since="2008-07-30">18</span> years of experience helping 1220 businesses grow. 1221 </p> 1222 </div> 1223 </div> 1224 1225 <div class="hero__visual"> 1226 <img 1227 class="hero__studio-photo" 1228 src="/assets/images/about-hero-720.webp" 1229 srcset="/assets/images/about-hero-720.webp 720w, /assets/images/about-hero-900.webp 900w, /assets/images/about-hero.webp 1500w" 1230 sizes="(max-width: 900px) 100vw, 46vw" 1231 width="1500" 1232 height="1200" 1233 alt="Goebel Media team members working together in the studio" 1234 fetchpriority="high" 1235 /> 1236 <div class="hero__image-shade" aria-hidden="true"></div> 1237 <svg class="hero__pointer" viewBox="0 0 100 178" aria-hidden="true"> 1238 <path 1239 d="M10.00 5.00 10.00 126.61 38.55 101.34 59.08 170.49 73.50 166.11 51.60 95.41 87.00 98.60Z" 1240 fill="currentColor" 1241 /> 1242 </svg> 1243 </div> 1244 </div> 1245 </section> 1246 1247 <section class="mission section" aria-labelledby="mission-title"> 1248 <div class="shell mission__inner reveal"> 1249 <p class="eyebrow">Our mission</p> 1250 <h2 id="mission-title" class="mission__statement"> 1251 We help businesses look good, stand out, and keep up online. 1252 </h2> 1253 </div> 1254 </section> 1255 1256 <section class="values" aria-labelledby="values-title"> 1257 <div class="shell values__intro values__intro--center reveal"> 1258 <!-- One line labels the band, so the eyebrow is the heading rather than sitting 1259 above an Anton title that repeated it. --> 1260 <h2 id="values-title" class="eyebrow values__eyebrow">Core Values</h2> 1261 </div> 1262 <div class="shell values__grid values__grid--six"> 1263 <article class="value reveal">
1264 <span class="value__icon value__icon--mark value__icon--cyan" aria-hidden="true"> 1265 <svg viewBox="0 0 100 100"> 1266 <mask id="about-mark-1" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> 1267 <rect width="100" height="100" fill="#fff" /> 1268 <path class="value__cursor" fill="#000" d="M41.97 27.13 41.97 89.93 56.36 77.05 63.11 98.19 70.47 95.51 63.33 74.15 81.68 75.66Z" /> 1269 </mask> 1270 <circle class="value__disc" cx="50" cy="50" r="50" mask="url(#about-mark-1)" /> 1271 </svg> 1272 </span> 1273 <div> 1274 <h3>Be a team player</h3> 1275 <p>We think and create together, combining our strengths to serve our clients.</p> 1276 </div> 1277 </article> 1278 1279 <article class="value reveal" style="--reveal-delay: 100ms"> 1280 <span class="value__icon value__icon--mark value__icon--blue" aria-hidden="true"> 1281 <svg viewBox="0 0 100 100"> 1282 <mask id="about-mark-2" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> 1283 <rect width="100" height="100" fill="#fff" /> 1284 <path class="value__cursor" fill="#000" d="M41.97 27.13 41.97 89.93 56.36 77.05 63.11 98.19 70.47 95.51 63.33 74.15 81.68 75.66Z" /> 1285 </mask> 1286 <circle class="value__disc" cx="50" cy="50" r="50" mask="url(#about-mark-2)" /> 1287 </svg> 1288 </span> 1289 <div> 1290 <h3>When they win, we win</h3> 1291 <p> 1292 We recognize that the only way for us to be successful is to be committed to the 1293 success of our clients. 1294 </p> 1295 </div> 1296 </article> 1297 1298 <article class="value reveal" style="--reveal-delay: 200ms"> 1299 <span class="value__icon value__icon--mark value__icon--lime" aria-hidden="true"> 1300 <svg viewBox="0 0 100 100"> 1301 <mask id="about-mark-3" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> 1302 <rect width="100" height="100" fill="#fff" /> 1303 <path class="value__cursor" fill="#000" d="M41.97 27.13 41.97 89.93 56.36 77.05 63.11 98.19 70.47 95.51 63.33 74.15 81.68 75.66Z" /> 1304 </mask> 1305 <circle class="value__disc" cx="50" cy="50" r="50" mask="url(#about-mark-3)" /> 1306 </svg> 1307 </span> 1308 <div> 1309 <h3>Set your standards high</h3> 1310 <p> 1311 We strive to exceed expectations and provide superior products, services, support, 1312 and communication. 1313 </p> 1314 </div> 1315 </article> 1316 1317 <article class="value reveal"> 1318 <span class="value__icon value__icon--mark value__icon--blue" aria-hidden="true"> 1319 <svg viewBox="0 0 100 100"> 1320 <mask id="about-mark-4" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> 1321 <rect width="100" height="100" fill="#fff" /> 1322 <path class="value__cursor" fill="#000" d="M41.97 27.13 41.97 89.93 56.36 77.05 63.11 98.19 70.47 95.51 63.33 74.15 81.68 75.66Z" /> 1323 </mask> 1324 <circle class="value__disc" cx="50" cy="50" r="50" mask="url(#about-mark-4)" /> 1325 </svg> 1326 </span> 1327 <div> 1328 <h3>Never stop learning</h3> 1329 <p> 1330 We constantly pursue knowledge and stay on the cutting edge of the industry. 1331 </p> 1332 </div> 1333 </article> 1334 1335 <article class="value reveal" style="--reveal-delay: 100ms"> 1336 <span class="value__icon value__icon--mark value__icon--lime" aria-hidden="true"> 1337 <svg viewBox="0 0 100 100"> 1338 <mask id="about-mark-5" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> 1339 <rect width="100" height="100" fill="#fff" /> 1340 <path class="value__cursor" fill="#000" d="M41.97 27.13 41.97 89.93 56.36 77.05 63.11 98.19 70.47 95.51 63.33 74.15 81.68 75.66Z" /> 1341 </mask> 1342 <circle class="value__disc" cx="50" cy="50" r="50" mask="url(#about-mark-5)" /> 1343 </svg> 1344 </span> 1345 <div> 1346 <h3>Focus on the outcome</h3> 1347 <p> 1348 We see beyond tasks and take the long view, making each decision based on what will 1349 best serve our clients. 1350 </p> 1351 </div> 1352 </article> 1353 1354 <article class="value reveal" style="--reveal-delay: 200ms">
1355 <span class="value__icon value__icon--mark value__icon--cyan" aria-hidden="true"> 1356 <svg viewBox="0 0 100 100"> 1357 <mask id="about-mark-6" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> 1358 <rect width="100" height="100" fill="#fff" /> 1359 <path class="value__cursor" fill="#000" d="M41.97 27.13 41.97 89.93 56.36 77.05 63.11 98.19 70.47 95.51 63.33 74.15 81.68 75.66Z" /> 1360 </mask> 1361 <circle class="value__disc" cx="50" cy="50" r="50" mask="url(#about-mark-6)" /> 1362 </svg> 1363 </span> 1364 <div> 1365 <h3>Be remarkable</h3> 1366 <p> 1367 We are creative <span class="nowrap">problem-solvers</span> and seek out innovative, <span class="nowrap">forward-thinking</span> 1368 solutions. 1369 </p> 1370 </div> 1371 </article> 1372 </div> 1373 </section> 1374 1375 <section class="why section why--reel" aria-labelledby="how-we-work-title"> 1376 <!-- Studio reel. The track holds the ten photos twice; the marquee travels exactly 1377 half its width, so the second set lands where the first started and the loop has 1378 no seam. The clone is hidden from assistive tech and carries no alt text. --> 1379 <div class="photo-reel" role="group" aria-label="Inside the Goebel Media studio"> 1380 <div class="photo-reel__track"> 1381 <ul class="photo-reel__set"> 1382 <li class="photo-reel__item"> 1383 <img 1384 src="/assets/images/about-pic-1-480.webp" 1385 srcset="/assets/images/about-pic-1-256.webp 256w, /assets/images/about-pic-1-480.webp 480w, /assets/images/about-pic-1.webp 800w" 1386 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1387 width="800" 1388 height="800" 1389 loading="lazy" 1390 decoding="async" 1391 alt="A Goebel Media mug on a studio desk beside a keyboard and a plant" 1392 /> 1393 </li> 1394 <li class="photo-reel__item"> 1395 <img 1396 src="/assets/images/about-pic-2-480.webp" 1397 srcset="/assets/images/about-pic-2-256.webp 256w, /assets/images/about-pic-2-480.webp 480w, /assets/images/about-pic-2.webp 800w" 1398 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1399 width="800" 1400 height="800" 1401 loading="lazy" 1402 decoding="async" 1403 alt="A team member at work, seen through the doorway of a studio office" 1404 /> 1405 </li> 1406 <li class="photo-reel__item"> 1407 <img 1408 src="/assets/images/about-pic-3-480.webp" 1409 srcset="/assets/images/about-pic-3-256.webp 256w, /assets/images/about-pic-3-480.webp 480w, /assets/images/about-pic-3.webp 800w" 1410 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1411 width="800" 1412 height="800" 1413 loading="lazy" 1414 decoding="async" 1415 alt="Team members at a shared desk working across laptops and monitors" 1416 /> 1417 </li> 1418 <li class="photo-reel__item"> 1419 <img 1420 src="/assets/images/about-pic-4-480.webp" 1421 srcset="/assets/images/about-pic-4-256.webp 256w, /assets/images/about-pic-4-480.webp 480w, /assets/images/about-pic-4.webp 800w" 1422 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1423 width="800" 1424 height="800" 1425 loading="lazy" 1426 decoding="async" 1427 alt="Three team members reviewing work on a laptop under the Goebel Media wall logo" 1428 /> 1429 </li> 1430 <li class="photo-reel__item"> 1431 <img 1432 src="/assets/images/about-pic-5-480.webp" 1433 srcset="/assets/images/about-pic-5-256.webp 256w, /assets/images/about-pic-5-480.webp 480w, /assets/images/about-pic-5.webp 800w" 1434 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1435 width="800" 1436 height="800" 1437 loading="lazy" 1438 decoding="async" 1439 alt="Four team members around a conference table with a laptop and an open magazine" 1440 /> 1441 </li> 1442 <li class="photo-reel__item"> 1443 <img 1444 src="/assets/images/about-pic-6-480.webp" 1445 srcset="/assets/images/about-pic-6-256.webp 256w, /assets/images/about-pic-6-480.webp 480w, /assets/images/about-pic-6.webp 800w" 1446 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1447 width="800" 1448 height="800" 1449 loading="lazy" 1450 decoding="async" 1451 alt="The studio coffee bar, lettered “This must be the place”" 1452 /> 1453 </li> 1454 <li class="photo-reel__item"> 1455 <img 1456 src="/assets/images/about-pic-7-480.webp" 1457 srcset="/assets/images/about-pic-7-256.webp 256w, /assets/images/about-pic-7-480.webp 480w, /assets/images/about-pic-7.webp 800w" 1458 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1459 width="800" 1460 height="800" 1461 loading="lazy" 1462 decoding="async" 1463 alt="Two team members looking over a laptop together on the studio couch" 1464 /> 1465 </li> 1466 <li class="photo-reel__item"> 1467 <img 1468 src="/assets/images/about-pic-8-480.webp" 1469 srcset="/assets/images/about-pic-8-256.webp 256w, /assets/images/about-pic-8-480.webp 480w, /assets/images/about-pic-8.webp 800w" 1470 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1471 width="800" 1472 height="800" 1473 loading="lazy" 1474 decoding="async" 1475 alt="A team member at an iMac beneath a row of framed prints" 1476 /> 1477 </li> 1478 <li class="photo-reel__item"> 1479 <img 1480 src="/assets/images/about-pic-9-480.webp" 1481 srcset="/assets/images/about-pic-9-256.webp 256w, /assets/images/about-pic-9-480.webp 480w, /assets/images/about-pic-9.webp 800w" 1482 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1483 width="800" 1484 height="800" 1485 loading="lazy" 1486 decoding="async" 1487 alt="A team member in a Goebel Media cap working at a keyboard" 1488 /> 1489 </li> 1490 <li class="photo-reel__item"> 1491 <img 1492 src="/assets/images/about-pic-10-480.webp" 1493 srcset="/assets/images/about-pic-10-256.webp 256w, /assets/images/about-pic-10-480.webp 480w, /assets/images/about-pic-10.webp 800w" 1494 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1495 width="800" 1496 height="800" 1497 loading="lazy" 1498 decoding="async" 1499 alt="The Goebel Media wall logo in the sunlit studio entry" 1500 /> 1501 </li> 1502 </ul> 1503 1504 <ul class="photo-reel__set" aria-hidden="true"> 1505 <li class="photo-reel__item"> 1506 <img 1507 src="/assets/images/about-pic-1-480.webp" 1508 srcset="/assets/images/about-pic-1-256.webp 256w, /assets/images/about-pic-1-480.webp 480w, /assets/images/about-pic-1.webp 800w" 1509 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1510 width="800" 1511 height="800" 1512 loading="lazy" 1513 decoding="async" 1514 alt="" 1515 /> 1516 </li> 1517 <li class="photo-reel__item"> 1518 <img 1519 src="/assets/images/about-pic-2-480.webp" 1520 srcset="/assets/images/about-pic-2-256.webp 256w, /assets/images/about-pic-2-480.webp 480w, /assets/images/about-pic-2.webp 800w" 1521 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1522 width="800" 1523 height="800" 1524 loading="lazy" 1525 decoding="async" 1526 alt="" 1527 /> 1528 </li> 1529 <li class="photo-reel__item"> 1530 <img 1531 src="/assets/images/about-pic-3-480.webp" 1532 srcset="/assets/images/about-pic-3-256.webp 256w, /assets/images/about-pic-3-480.webp 480w, /assets/images/about-pic-3.webp 800w" 1533 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1534 width="800" 1535 height="800" 1536 loading="lazy" 1537 decoding="async" 1538 alt="" 1539 /> 1540 </li> 1541 <li class="photo-reel__item"> 1542 <img 1543 src="/assets/images/about-pic-4-480.webp" 1544 srcset="/assets/images/about-pic-4-256.webp 256w, /assets/images/about-pic-4-480.webp 480w, /assets/images/about-pic-4.webp 800w" 1545 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1546 width="800" 1547 height="800" 1548 loading="lazy" 1549 decoding="async" 1550 alt="" 1551 /> 1552 </li> 1553 <li class="photo-reel__item"> 1554 <img 1555 src="/assets/images/about-pic-5-480.webp" 1556 srcset="/assets/images/about-pic-5-256.webp 256w, /assets/images/about-pic-5-480.webp 480w, /assets/images/about-pic-5.webp 800w" 1557 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1558 width="800" 1559 height="800" 1560 loading="lazy" 1561 decoding="async" 1562 alt="" 1563 /> 1564 </li> 1565 <li class="photo-reel__item"> 1566 <img 1567 src="/assets/images/about-pic-6-480.webp" 1568 srcset="/assets/images/about-pic-6-256.webp 256w, /assets/images/about-pic-6-480.webp 480w, /assets/images/about-pic-6.webp 800w" 1569 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1570 width="800" 1571 height="800" 1572 loading="lazy" 1573 decoding="async" 1574 alt="" 1575 /> 1576 </li> 1577 <li class="photo-reel__item"> 1578 <img 1579 src="/assets/images/about-pic-7-480.webp" 1580 srcset="/assets/images/about-pic-7-256.webp 256w, /assets/images/about-pic-7-480.webp 480w, /assets/images/about-pic-7.webp 800w" 1581 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1582 width="800" 1583 height="800" 1584 loading="lazy" 1585 decoding="async" 1586 alt="" 1587 /> 1588 </li> 1589 <li class="photo-reel__item"> 1590 <img 1591 src="/assets/images/about-pic-8-480.webp" 1592 srcset="/assets/images/about-pic-8-256.webp 256w, /assets/images/about-pic-8-480.webp 480w, /assets/images/about-pic-8.webp 800w" 1593 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1594 width="800" 1595 height="800" 1596 loading="lazy" 1597 decoding="async" 1598 alt="" 1599 /> 1600 </li> 1601 <li class="photo-reel__item"> 1602 <img 1603 src="/assets/images/about-pic-9-480.webp" 1604 srcset="/assets/images/about-pic-9-256.webp 256w, /assets/images/about-pic-9-480.webp 480w, /assets/images/about-pic-9.webp 800w" 1605 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1606 width="800" 1607 height="800" 1608 loading="lazy" 1609 decoding="async" 1610 alt="" 1611 /> 1612 </li> 1613 <li class="photo-reel__item"> 1614 <img 1615 src="/assets/images/about-pic-10-480.webp" 1616 srcset="/assets/images/about-pic-10-256.webp 256w, /assets/images/about-pic-10-480.webp 480w, /assets/images/about-pic-10.webp 800w" 1617 sizes="(max-width: 700px) 44vw, min(17vw, 250px)" 1618 width="800" 1619 height="800" 1620 loading="lazy" 1621 decoding="async" 1622 alt="" 1623 /> 1624 </li> 1625 </ul> 1626 </div> 1627 </div> 1628 1629 <div class="shell why__grid"> 1630 <div class="why__copy reveal"> 1631 <h2 id="how-we-work-title" class="section-title why__title"> 1632 Weâre <em><span>creative,</span> <span>technical,</span> <span>&</span> <span>strategic</span></em>
1633 <span class="why__title-aside">(so you donât have to be)</span> 1634 </h2> 1635 <p> 1636 Algorithms change, trends shift, and what worked last quarter is old news this one. 1637 We stay ahead of it so you donât have to: one team, one point of contact, and a 1638 shared view of what youâre trying to grow. 1639 </p> 1640 <p> 1641 We have services and packages for businesses of all sizes and industries, and weâve 1642 worked with clients all over the country. Every one gets paired with the approach 1643 that actually fits their challenges, their goals, and their budget. 1644 </p> 1645 <p class="why__closer"> 1646 Ready to grow? <a href="#contact">Letâs talk.</a> 1647 </p> 1648 </div> 1649 1650 <!-- Temporary evergreen card while Google Partner status is under review. Replace this 1651 block with the official badge and approved partner copy once it is issued. --> 1652 <aside class="proof-card reveal" style="--reveal-delay: 120ms" aria-label="Our approach to measurable growth"> 1653 <span class="proof-card__mark" aria-hidden="true"> 1654 <svg viewBox="0 0 48 48"> 1655 <circle class="proof-card__ring" cx="24" cy="24" r="20" /> 1656 <path class="proof-card__chart" d="M14.5 31.5l7.1-7.2 5.2 4.7 7.2-9.2" /> 1657 <path class="proof-card__arrow" d="M28.5 19.8H34v5.5" /> 1658 </svg> 1659 </span> 1660 <p class="proof-card__eyebrow">Built for results</p> 1661 <h3 class="proof-card__title">Strategy that earns its keep</h3> 1662 <p class="proof-card__copy"> 1663 We connect strategy, creative, media, and measurement. Then we keep improving what 1664 works. Every campaign is tied to clear goals, transparent reporting, and decisions 1665 you can act on. 1666 </p> 1667 </aside> 1668 </div> 1669 </section> 1670 1671 <aside class="testimonial testimonial--static" aria-label="Client testimonial"> 1672 <div class="testimonial__inner reveal"> 1673 <svg class="testimonial__quote-mark" viewBox="0 0 56 42" aria-hidden="true"> 1674 <path d="M0 42V25.3C0 8.8 8.5 1.3 23.8 0v8.2c-7.2 1.3-10.8 5.4-11 11.5H24V42H0Zm32 0V25.3C32 8.8 40.5 1.3 55.8 0v8.2c-7.2 1.3-10.8 5.4-11 11.5H56V42H32Z" /> 1675 </svg> 1676 <blockquote> 1677 “They make it a priority to understand my business, which allows us to create 1678 some really awesome projects.” 1679 </blockquote> 1680 <p><strong>Kelli Stewart</strong><span>L.E.A.D., Atlanta, GA</span></p> 1681 </div> 1682 </aside> 1683 </main> 1684 1685 <footer class="site-footer" id="contact"> 1686 <div class="footer-ticker" aria-hidden="true"> 1687 <div> 1688 <span>Digital Marketing</span><i></i><span>AI Strategy & Solutions</span><i></i><span>Brand Development</span><i></i><span>Graphic Design</span><i></i><span>Motion Design</span><i></i><span>Web Design</span><i></i><span>Web Development</span><i></i><span>Performance Marketing</span><i></i><span>Social Media</span><i></i><span>SEO</span><i></i><span>Email Marketing</span><i></i 1689 ><span>Digital Marketing</span><i></i><span>AI Strategy & Solutions</span><i></i><span>Brand Development</span><i></i><span>Graphic Design</span><i></i><span>Motion Design</span><i></i><span>Web Design</span><i></i><span>Web Development</span><i></i><span>Performance Marketing</span><i></i><span>Social Media</span><i></i><span>SEO</span><i></i><span>Email Marketing</span><i></i 1690 ><span>Digital Marketing</span><i></i><span>AI Strategy & Solutions</span><i></i><span>Brand Development</span><i></i><span>Graphic Design</span><i></i><span>Motion Design</span><i></i><span>Web Design</span><i></i><span>Web Development</span><i></i><span>Performance Marketing</span><i></i><span>Social Media</span><i></i><span>SEO</span><i></i><span>Email Marketing</span><i></i 1691 ><span>Digital Marketing</span><i></i><span>AI Strategy & Solutions</span><i></i><span>Brand Development</span><i></i><span>Graphic Design</span><i></i><span>Motion Design</span><i></i><span>Web Design</span><i></i><span>Web Development</span><i></i><span>Performance Marketing</span><i></i><span>Social Media</span><i></i><span>SEO</span><i></i><span>Email Marketing</span><i></i> 1692 </div> 1693 </div> 1694 1695 <div class="shell footer-cta reveal"> 1696 <div class="footer-cta__copy"> 1697 <p class="eyebrow eyebrow--light">Letâs get to work</p> 1698 <h2 id="footer-cta-title" class="section-title section-title--footer"> 1699 Ready to make something that <em><span>clicks?</span></em> 1700 </h2> 1701 <p> 1702 Tell us what youâre building, solving, or trying to grow. Weâll help you find the smartest 1703 way forward. 1704 </p> 1705 </div> 1706 1707 <form class="contact-form" method="post" data-contact-form aria-labelledby="footer-cta-title"> 1708 <div class="contact-form__honeypot" aria-hidden="true"> 1709 <label for="contact-website">Leave this field empty</label> 1710 <input type="text" id="contact-website" name="website" tabindex="-1" autocomplete="off" data-contact-honeypot /> 1711 </div> 1712 1713 <div class="contact-form__grid"> 1714 <div class="contact-form__field"> 1715 <label for="contact-name">Name<span aria-hidden="true">*</span></label> 1716 <input type="text" id="contact-name" name="name" autocomplete="name" required /> 1717 </div> 1718 1719 <div class="contact-form__field"> 1720 <label for="contact-email">Email<span aria-hidden="true">*</span></label> 1721 <input type="email" id="contact-email" name="email" autocomplete="email" required /> 1722 </div> 1723 1724 <div class="contact-form__field"> 1725 <label for="contact-phone">Phone</label> 1726 <input type="tel" id="contact-phone" name="phone" autocomplete="tel" /> 1727 </div> 1728 1729 <div class="contact-form__field"> 1730 <label for="contact-company">Company</label> 1731 <input type="text" id="contact-company" name="company" autocomplete="organization" /> 1732 </div> 1733 1734 <div class="contact-form__field contact-form__field--full">
1735 <span class="contact-form__label" id="contact-service-label">What can we help with?</span> 1736 <div class="multiselect" data-multiselect> 1737 <button 1738 type="button" 1739 class="multiselect__trigger" 1740 aria-expanded="false" 1741 aria-controls="contact-service-panel" 1742 aria-labelledby="contact-service-label contact-service-value" 1743 data-multiselect-trigger 1744 > 1745 <span 1746 class="multiselect__value" 1747 id="contact-service-value" 1748 data-multiselect-value 1749 data-placeholder="Select services" 1750 data-empty 1751 >Select services</span> 1752 <svg class="multiselect__chevron" aria-hidden="true" viewBox="0 0 12 8"><path d="M1 1.5 6 6.5 11 1.5" /></svg> 1753 </button> 1754 <div 1755 class="multiselect__panel" 1756 id="contact-service-panel" 1757 role="group" 1758 aria-labelledby="contact-service-label" 1759 data-multiselect-panel 1760 > 1761 <label class="multiselect__option"> 1762 <input type="checkbox" name="service" value="Web Design and Development" /> 1763 <span>Web Design and Development</span> 1764 </label> 1765 <label class="multiselect__option"> 1766 <input type="checkbox" name="service" value="Brand Development" /> 1767 <span>Brand Development</span> 1768 </label> 1769 <label class="multiselect__option"> 1770 <input type="checkbox" name="service" value="Performance Marketing" /> 1771 <span>Performance Marketing</span> 1772 </label> 1773 <label class="multiselect__option"> 1774 <input type="checkbox" name="service" value="Design and Creative" /> 1775 <span>Design and Creative</span> 1776 </label> 1777 <label class="multiselect__option"> 1778 <input type="checkbox" name="service" value="Social Media Marketing" /> 1779 <span>Social Media Marketing</span> 1780 </label> 1781 <label class="multiselect__option"> 1782 <input type="checkbox" name="service" value="Search Engine Optimization" /> 1783 <span>Search Engine Optimization</span> 1784 </label> 1785 <label class="multiselect__option"> 1786 <input type="checkbox" name="service" value="AI Systems Architecture" /> 1787 <span>AI Systems Architecture</span> 1788 </label> 1789 <label class="multiselect__option"> 1790 <input type="checkbox" name="service" value="AI Strategy and Audits" /> 1791 <span>AI Strategy and Audits</span> 1792 </label> 1793 <label class="multiselect__option"> 1794 <input type="checkbox" name="service" value="Custom Assistants and Agents" /> 1795 <span>Custom Assistants and Agents</span> 1796 </label> 1797 <label class="multiselect__option"> 1798 <input type="checkbox" name="service" value="Email Marketing" /> 1799 <span>Email Marketing</span> 1800 </label> 1801 <label class="multiselect__option"> 1802 <input type="checkbox" name="service" value="Something else" /> 1803 <span>Something else</span> 1804 </label> 1805 </div> 1806 </div> 1807 </div> 1808 1809 <div class="contact-form__field contact-form__field--full"> 1810 <label for="contact-message">Message<span aria-hidden="true">*</span></label> 1811 <textarea id="contact-message" name="message" rows="4" required></textarea> 1812 </div> 1813 </div> 1814 1815 <div class="contact-form__footer"> 1816 <button class="button button--lime" type="submit" data-contact-submit>
1817 <span>Send message</span> 1818 <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" /></svg> 1819 </button> 1820 <p class="contact-form__note"> 1821 Prefer email? Reach us directly at 1822 <a href="mailto:[email protected]">[email protected]</a>. 1823 </p> 1824 </div> 1825 1826 <p class="contact-form__status" data-contact-status role="status" aria-live="polite"></p> 1827 </form> 1828 </div> 1829 1830 <div class="shell footer-columns"> 1831 <div class="footer-col footer-col--brand"> 1832 <a class="brand brand--footer" href="/" aria-label="Goebel Media home"> 1833 <img src="/assets/images/goebel-media-white-220.png" srcset="/assets/images/goebel-media-white-220.png 220w, /assets/images/goebel-media-white-400.png 400w" sizes="192px" width="220" height="48" alt="Goebel Media" loading="lazy" /> 1834 </a> 1835 <ul class="footer-social" aria-label="Goebel Media on social media"> 1836 <li> 1837 <a href="https://www.facebook.com/goebelmediagroup/" target="_blank" rel="noopener noreferrer" aria-label="Facebook"> 1838 <svg aria-hidden="true" viewBox="0 0 24 24"> 1839 <path d="M15 8.5h2.5V5.2c-.43-.06-1.9-.2-3.6-.2-3.57 0-6 2.24-6 6.35v3.15H4.5V18h3.4v10h4.1V18h3.26l.52-3.5H12V11.8c0-1.01.3-1.7 1.73-1.7H15V8.5Z" /> 1840 </svg> 1841 </a> 1842 </li> 1843 <li> 1844 <a href="https://www.instagram.com/goebelmedia/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"> 1845 <svg aria-hidden="true" viewBox="0 0 24 24"> 1846 <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" fill="none" stroke="currentColor" stroke-width="1.7" /> 1847 <circle cx="12" cy="12" r="4.2" fill="none" stroke="currentColor" stroke-width="1.7" /> 1848 <circle cx="17.15" cy="6.85" r="1.15" /> 1849 </svg> 1850 </a> 1851 </li> 1852 <li> 1853 <a href="https://www.linkedin.com/company/goebel-media-group/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"> 1854 <svg aria-hidden="true" viewBox="0 0 24 24"> 1855 <rect x="3.5" y="3.5" width="17" height="17" rx="2.6" fill="none" stroke="currentColor" stroke-width="1.7" /> 1856 <path d="M7.9 10.2v6.4M7.9 7.5v.02M11.3 16.6v-3.7c0-1.5.9-2.3 2.1-2.3s1.9.8 1.9 2.3v3.7" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round" /> 1857 </svg> 1858 </a> 1859 </li> 1860 <li> 1861 <a href="https://x.com/goebelmedia" target="_blank" rel="noopener noreferrer" aria-label="X"> 1862 <svg aria-hidden="true" viewBox="0 0 24 24"> 1863 <path d="M5 5l5.6 7.4L5.3 19h1.9l4.6-5.4L15.6 19H19l-5.9-7.8L18 5h-1.9l-4.2 4.9L8.4 5H5Z" /> 1864 </svg> 1865 </a> 1866 </li> 1867 </ul> 1868 </div> 1869 1870 <div class="footer-col-group"> 1871 <div class="footer-col"> 1872 <p class="footer-col__title">Metro Atlanta</p> 1873 <a class="footer-phone" href="tel:+17707691515">(770) 769-1515</a> 1874 <address>312 Sycamore St Suite B<br />Decatur, GA 30030</address> 1875 </div> 1876 1877 <div class="footer-col"> 1878 <p class="footer-col__title">Middle Georgia</p> 1879 <a class="footer-phone" href="tel:+14783906770">(478) 390-6770</a> 1880 <address>361 S Wayne St<br />Milledgeville, GA 31061</address> 1881 </div> 1882 </div> 1883 </div> 1884 1885 <div class="shell footer-legal"> 1886 <p>© <span data-year>2026</span> Goebel Media. All rights reserved.</p> 1887 <p class="footer-legal__links"> 1888 <a href="/employment/">Employment</a> 1889 <span aria-hidden="true">·</span> 1890 <a href="/privacy/">Privacy Policy</a> 1891 </p> 1892 </div> 1893 </footer> 1894 1895 </body> 1896</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.