PageSourceSearch

https://goebelmedia.com/about/

html goebelmedia.com collected 2026-10-05 07:55:38 UTC 66,794 bytes, 1,896 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.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&nbsp;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 &amp;&nbsp;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 &amp; Creative</span>
1128                    <small>Campaign concepts &amp; 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 &amp; 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 &amp; 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 &amp; integrations</small>
1145                  </a>
1146                  <a class="services-menu__link" href="/services/custom-assistants-agents/">
1147                    <span>Custom Assistants &amp; 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 &amp;&nbsp;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 &amp; AI answers</small>
1165                  </a>
1166                  <a class="services-menu__link" href="/services/email-marketing/">
1167                    <span>Email Marketing</span>
1168                    <small>Lifecycle &amp; retention</small>
1169                  </a>
1170                </div>
1171
1172                <div class="services-menu__feature">
1173                  <p class="services-menu__feature-eyebrow">Integrated&nbsp;expertise</p>
1174                  <p class="services-menu__feature-title">Everything you need to win more&nbsp;business</p>
1175                  <p class="services-menu__feature-copy">
1176                    See how strategy, creative, and technology work&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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 &ldquo;This must be the place&rdquo;"
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>&amp;</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&nbsp;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&nbsp;budget.
1644            </p>
1645            <p class="why__closer">
1646              Ready to grow? <a href="#contact">Let’s&nbsp;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&nbsp;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&nbsp;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            &ldquo;They make it a priority to understand my business, which allows us to create
1678            some really awesome&nbsp;projects.&rdquo;
1679          </blockquote>
1680          <p><strong>Kelli Stewart</strong><span>L.E.A.D., Atlanta,&nbsp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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.