{"id":37,"date":"2026-03-31T16:00:00","date_gmt":"2026-03-31T16:00:00","guid":{"rendered":"https:\/\/calmedia.co.za\/?page_id=37"},"modified":"2026-04-07T15:53:27","modified_gmt":"2026-04-07T15:53:27","slug":"home-2","status":"publish","type":"page","link":"https:\/\/calmedia.co.za\/","title":{"rendered":"home"},"content":{"rendered":"\n<div style=\"position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw;overflow-x:hidden;\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=5.0\">\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.cal-footer ul,\n.cal-footer ol,\n.cal-footer li,\n.cal-footer h4,\n.cal-footer p {\n  margin: 0 !important;\n  padding: 0 !important;\n  list-style: none !important;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: 'Poppins', sans-serif !important;\n  overflow-x: hidden;\n  max-width: 100%;\n  position: relative;\n}\n\na {\n  text-decoration: none !important;\n  cursor: pointer;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.hero-btn,\n.about-btn,\n.services-btn,\n.portfolio-btn,\n.testimonials-btn,\n.process-btn,\n.contact-btn,\n.nav-cta {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  width: 200px !important;\n  height: 56px !important;\n  padding: 0 20px !important;\n  font-size: 1.05rem !important;\n  font-weight: 600 !important;\n  border-radius: 10px !important;\n  transition: all 0.3s ease !important;\n  cursor: pointer;\n  text-align: center;\n  border: none;\n  white-space: nowrap;\n  line-height: 1 !important;\n  box-sizing: border-box !important;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  position: relative;\n  z-index: 1;\n}\n\n.hero-btn-primary,\n.about-btn,\n.services-btn,\n.portfolio-btn,\n.testimonials-btn,\n.process-btn,\n.contact-btn {\n  background: #1a1f2e !important;\n  color: #FFFFFF !important;\n  text-shadow: none !important;\n  box-shadow: none !important;\n  border-radius: 50px !important;\n}\n\n.nav-cta {\n  background: #1a1f2e !important;\n  color: #FFFFFF !important;\n  text-shadow: none !important;\n  box-shadow: none !important;\n  border-radius: 50px !important;\n  width: auto !important;\n  padding: 0 28px !important;\n}\n\n.nav-cta:hover {\n  background: #2C3E5A !important;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .hero-btn-primary:hover,\n  .about-btn:hover,\n  .services-btn:hover,\n  .portfolio-btn:hover,\n  .testimonials-btn:hover,\n  .process-btn:hover,\n  .contact-btn:hover {\n    transform: translateY(-3px) !important;\n    box-shadow: 0 0 30px rgba(91, 127, 166, 0.9), 0 0 60px rgba(91, 127, 166, 0.6) !important;\n    filter: brightness(1.2) !important;\n  }\n\n  .nav-cta:hover {\n    transform: translateY(-3px) !important;\n  }\n\n  .hero-btn-secondary:hover {\n    background: rgba(255, 255, 255, 0.1) !important;\n    transform: translateY(-3px) !important;\n    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7), 0 0 50px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.5) !important;\n  }\n}\n\n.hero-btn-secondary {\n  color: #FFFFFF !important;\n}\n\n.hero-btn:active,\n.about-btn:active,\n.services-btn:active,\n.portfolio-btn:active,\n.testimonials-btn:active,\n.process-btn:active,\n.contact-btn:active,\n.nav-cta:active {\n  transform: scale(0.96) !important;\n  filter: brightness(0.9) !important;\n  transition: transform 0.08s ease, filter 0.08s ease !important;\n}\n\n.hero-btn-secondary:active {\n  transform: scale(0.96) !important;\n  opacity: 0.8 !important;\n  transition: transform 0.08s ease !important;\n}\n\n.hero-btn-secondary {\n  background: transparent !important;\n  color: #FFFFFF !important;\n  border: 2px solid #FFFFFF !important;\n  width: 200px !important;\n  height: 56px !important;\n  padding: 0 18px !important;\n  border-radius: 50px !important;\n}\n\n\/* ===== NAV ===== *\/\n.cal-nav {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: transparent;\n  z-index: 100;\n}\n\n.nav-container {\n  max-width: 100%;\n  padding: 20px 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 100px;\n}\n\n.nav-inner-card {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  background: transparent;\n  padding: 0;\n}\n\n.nav-logo {\n  margin-right: auto;\n  flex-shrink: 0;\n  line-height: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.logo-blend {\n  height: 55px;\n  width: auto;\n  object-fit: contain;\n  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));\n  transition: all 0.3s ease;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.nav-menu {\n  display: flex;\n  list-style: none;\n  gap: 15px;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  height: 100%;\n}\n\n.nav-menu li {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.nav-menu a {\n  font-weight: 600;\n  font-size: 0.9rem;\n  padding: 12px 16px;\n  border-radius: 8px;\n  transition: all 0.3s ease;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  cursor: pointer;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.nav-menu a:not(.nav-cta) {\n  color: #FFFFFF;\n  text-shadow: 0 1px 4px rgba(0,0,0,0.4);\n  background: transparent;\n  border-radius: 8px;\n  outline: none;\n}\n\n.nav-menu a:not(.nav-cta):focus {\n  outline: none;\n  background: transparent;\n  box-shadow: none;\n}\n\n.nav-menu a:not(.nav-cta):hover {\n  background: rgba(255,255,255,0.12);\n}\n\n\/* ===== HAMBURGER \u2014 FIXED FOR IOS ===== *\/\n.hamburger {\n  display: none;\n  flex-direction: column;\n  justify-content: space-around;\n  width: 30px;\n  height: 25px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  z-index: 101;\n  position: relative;\n  \/* Enlarged tap target without changing visual size *\/\n  min-width: 48px;\n  min-height: 48px;\n  align-items: center;\n  \/* Remove all tap delay on iOS *\/\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  \/* Prevent iOS from treating as form element *\/\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.hamburger-line {\n  width: 30px;\n  height: 3px;\n  background: #FFFFFF;\n  border-radius: 2px;\n  transition: all 0.3s ease;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.3);\n  pointer-events: none;\n}\n\n.hamburger.active .hamburger-line:nth-child(1) {\n  transform: rotate(45deg) translate(8px, 8px);\n}\n\n.hamburger.active .hamburger-line:nth-child(2) {\n  opacity: 0;\n}\n\n.hamburger.active .hamburger-line:nth-child(3) {\n  transform: rotate(-45deg) translate(7px, -7px);\n}\n\n\/* ===== MOBILE MENU ===== *\/\n.mobile-menu {\n  display: none;\n  position: fixed;\n  top: 0;\n  right: -100%;\n  width: 280px;\n  height: 100vh;\n  background: linear-gradient(135deg, #1a1f2e 0%, #13161c 100%);\n  z-index: 200;\n  transition: right 0.3s ease;\n  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.mobile-menu.active {\n  right: 0;\n}\n\n.mobile-menu-header {\n  padding: 25px 20px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.mobile-menu-logo {\n  height: 50px;\n  width: auto;\n  object-fit: contain;\n  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));\n}\n\n.mobile-menu-items {\n  list-style: none;\n  padding: 20px 0;\n  margin: 0;\n}\n\n.mobile-menu-items li {\n  margin: 0;\n}\n\n.mobile-menu-items a {\n  display: block;\n  color: #FFFFFF;\n  padding: 15px 25px;\n  font-size: 1rem;\n  font-weight: 600;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  border-left: 3px solid transparent;\n  cursor: pointer;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: rgba(91, 127, 166, 0.3);\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n}\n\n.mobile-menu-items a:hover,\n.mobile-menu-items a:active {\n  background: rgba(255, 255, 255, 0.1);\n  border-left-color: #C9A96E;\n  padding-left: 30px;\n}\n\n.mobile-menu-items .nav-cta {\n  margin: 20px 25px;\n  width: calc(100% - 50px) !important;\n  height: 50px !important;\n  font-size: 1rem !important;\n  padding: 0 20px !important;\n  border-radius: 10px !important;\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border-left: none !important;\n}\n\n.mobile-menu-items .nav-cta:hover {\n  padding-left: 20px !important;\n}\n\n.mobile-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 199;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n\n.mobile-overlay.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n@media (max-width: 1024px) {\n  .nav-container {\n    padding: 15px 30px;\n    height: 85px;\n  }\n  .logo-blend {\n    height: 65px;\n  }\n  .nav-menu {\n    gap: 10px;\n  }\n  .nav-menu a {\n    font-size: 0.8rem;\n    padding: 10px 12px;\n  }\n}\n\n@media (max-width: 768px) {\n  .nav-container {\n    padding: 15px 20px;\n    height: 70px;\n  }\n  .logo-blend {\n    height: 50px;\n  }\n  .nav-menu {\n    display: none !important;\n  }\n  .hamburger {\n    display: flex !important;\n  }\n  .mobile-menu,\n  .mobile-overlay {\n    display: block !important;\n  }\n  .hero-btn,\n  .about-btn,\n  .services-btn,\n  .portfolio-btn,\n  .testimonials-btn,\n  .process-btn,\n  .contact-btn {\n    width: 100% !important;\n    max-width: 250px !important;\n    min-height: 48px !important;\n    min-width: 48px !important;\n  }\n}\n\n\/* ===== HERO ===== *\/\n.cal-hero {\n  position: relative;\n  height: 56.25vw;\n  min-height: 500px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.hero-yt-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.hero-yt-container iframe {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 177.78vh;\n  height: 100vh;\n  min-width: 100%;\n  min-height: 56.25vw;\n  transform: translate(-50%, -50%) scale(1.05, 1.35);\n  border: none;\n  pointer-events: none;\n}\n\n.hero-poster-bg {\n  display: none !important;\n}\n\n@media (max-width: 768px) {\n  .hero-yt-container {\n    display: none !important;\n  }\n  .hero-poster-bg {\n    display: block !important;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: url('https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/Make_the_background_like_a_little_darker_white_2k_delpmaspu-scaled.jpg') center\/cover no-repeat;\n    z-index: 1;\n  }\n}\n\n.hero-overlay {\n  display: none;\n}\n\n.hero-content {\n  position: relative;\n  z-index: 3;\n  text-align: center;\n  color: #FFFFFF;\n  max-width: 900px;\n  padding: 40px 50px;\n  border-radius: 20px;\n  animation: heroFadeIn 1.2s ease-out;\n  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, transparent 75%);\n}\n\n@keyframes heroFadeIn {\n  from { opacity: 0; transform: translateY(40px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.hero-title {\n  font-size: 4rem;\n  font-weight: 700;\n  margin-bottom: 25px;\n  line-height: 1.2;\n  text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 4px 40px rgba(0,0,0,0.7);\n  letter-spacing: -1px;\n  color: #FFFFFF;\n}\n\n.hero-subtitle {\n  font-size: 1.4rem;\n  margin-bottom: 40px;\n  line-height: 1.6;\n  text-shadow: 0 2px 15px rgba(0,0,0,0.9), 0 4px 30px rgba(0,0,0,0.7);\n}\n\n.hero-cta-group {\n  display: flex;\n  gap: 20px;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n\n@media (max-width: 768px) {\n  .cal-hero {\n    height: 100vh;\n    min-height: 100vh;\n  }\n  .hero-title {\n    font-size: 2.2rem;\n  }\n  .hero-subtitle {\n    font-size: 1.1rem;\n  }\n  .hero-cta-group {\n    flex-direction: column;\n    align-items: center;\n  }\n}\n\n\/* ===== ABOUT ===== *\/\n.cal-about {\n  padding: 100px 0;\n  background: #1a1f2e;\n}\n\n.about-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 30px;\n}\n\n.about-title {\n  font-size: 2.6rem;\n  font-weight: 700;\n  color: #FFFFFF;\n  text-align: center;\n  margin-bottom: 50px;\n  position: relative;\n  padding-bottom: 20px;\n}\n\n.about-title::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80px;\n  height: 4px;\n  background: linear-gradient(90deg, #FFFFFF, #C9A96E);\n  border-radius: 2px;\n}\n\n.about-content {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n  margin-bottom: 40px;\n}\n\n.about-text {\n  font-size: 1.05rem;\n  line-height: 1.8;\n  color: rgba(255,255,255,0.88);\n}\n\n.about-text p {\n  margin-bottom: 20px;\n}\n\n.about-highlight {\n  color: #FFFFFF;\n  font-weight: 700;\n}\n\n.about-gold {\n  color: #C9A96E;\n  font-weight: 600;\n}\n\n.about-image-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(2, 1fr);\n  gap: 16px;\n  aspect-ratio: 1;\n}\n\n.about-image-item {\n  position: relative;\n  border-radius: 15px;\n  overflow: hidden;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .about-image-item:hover {\n    transform: translateY(-8px);\n  }\n}\n\n.about-image-item img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: top center;\n  display: block;\n}\n\n.about-stats {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 40px;\n  margin-top: 60px;\n  text-align: center;\n}\n\n.stat-item {\n  padding: 30px 20px;\n  border-radius: 0;\n  background: transparent;\n  border-top: 2px solid #C9A96E;\n  transition: all 0.3s ease;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .stat-item:hover {\n    transform: translateY(-3px);\n  }\n}\n\n.stat-number {\n  font-size: 3rem;\n  font-weight: 700;\n  color: #C9A96E;\n  margin-bottom: 10px;\n}\n\n.stat-label {\n  font-size: 1rem;\n  color: #666;\n  font-weight: 500;\n}\n\n.about-cta {\n  text-align: center;\n  margin-top: 50px;\n}\n\n@media (max-width: 968px) {\n  .about-content {\n    grid-template-columns: 1fr;\n  }\n  .about-image-grid {\n    aspect-ratio: auto;\n    grid-template-rows: repeat(2, 200px);\n  }\n  .about-stats {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 768px) {\n  .cal-about {\n    padding: 70px 0;\n  }\n  .about-container {\n    padding: 0 20px;\n  }\n  .about-title {\n    font-size: 2rem;\n  }\n  .about-image-grid {\n    grid-template-rows: repeat(2, 160px);\n    gap: 12px;\n  }\n}\n\n\/* ===== SERVICES ===== *\/\n.cal-services {\n  padding: 100px 0;\n  background: #FFFFFF;\n}\n\n.services-container,\n.portfolio-container,\n.testimonials-container,\n.process-container,\n.contact-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 30px;\n}\n\n.services-title,\n.portfolio-title,\n.testimonials-title,\n.process-title,\n.contact-title {\n  font-size: 2.6rem;\n  font-weight: 700;\n  color: #2C3E5A;\n  text-align: center;\n  margin-bottom: 20px;\n  position: relative;\n  display: inline-block;\n}\n\n.services-title::after,\n.portfolio-title::after,\n.testimonials-title::after,\n.process-title::after,\n.contact-title::after {\n  content: '';\n  position: absolute;\n  bottom: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80px;\n  height: 4px;\n  background: linear-gradient(90deg, #2C3E5A, #C9A96E);\n  border-radius: 2px;\n}\n\n.testimonials-title {\n  color: #FFFFFF;\n}\n\n.services-header,\n.portfolio-header,\n.testimonials-header,\n.process-header,\n.contact-header {\n  text-align: center;\n  margin-bottom: 70px;\n}\n\n.services-intro,\n.portfolio-subtitle,\n.contact-subtitle {\n  font-size: 1.1rem;\n  color: #666;\n  max-width: 700px;\n  margin: 30px auto 0;\n}\n\n.services-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 40px;\n  margin-top: 60px;\n}\n\n.service-card {\n  background: #FFFFFF;\n  border-radius: 16px;\n  padding: 50px 35px;\n  text-align: center;\n  box-shadow: 0 2px 16px rgba(0,0,0,0.06);\n  transition: all 0.4s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.service-card::before {\n  display: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .service-card:hover {\n    transform: translateY(-8px);\n    box-shadow: 0 12px 40px rgba(0,0,0,0.1);\n  }\n  .service-card:hover .service-icon {\n    background: #b8924f;\n    transform: scale(1.08);\n  }\n}\n\n.service-icon {\n  width: 90px;\n  height: 90px;\n  margin: 0 auto 30px;\n  background: #C9A96E;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.4s ease;\n}\n\n.service-icon svg {\n  width: 45px;\n  height: 45px;\n  fill: #FFFFFF;\n}\n\n.service-title {\n  font-size: 1.6rem;\n  font-weight: 700;\n  color: #2C3E5A;\n  margin-bottom: 20px;\n}\n\n.service-description {\n  font-size: 1rem;\n  color: #666;\n  line-height: 1.7;\n  margin-bottom: 30px;\n}\n\n.service-features {\n  list-style: none;\n  padding: 0;\n  margin-bottom: 30px;\n  text-align: left;\n}\n\n.service-features li {\n  padding: 10px 0;\n  color: #333;\n  font-size: 0.95rem;\n  position: relative;\n  padding-left: 30px;\n}\n\n.service-features li::before {\n  content: '\\2713';\n  position: absolute;\n  left: 0;\n  color: #C9A96E;\n  font-weight: 700;\n  font-size: 1.2rem;\n}\n\n.services-cta,\n.portfolio-cta,\n.testimonials-cta,\n.process-cta {\n  text-align: center;\n  margin-top: 70px;\n}\n\n\/* ===== PORTFOLIO ===== *\/\n.cal-portfolio {\n  padding: 100px 0;\n  background: #f7f7f7;\n}\n\n.portfolio-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 30px;\n  margin-bottom: 50px;\n}\n\n.portfolio-item {\n  position: relative;\n  border-radius: 15px;\n  overflow: hidden;\n  aspect-ratio: 4\/3;\n  cursor: pointer;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n  transition: transform 0.4s ease, box-shadow 0.4s ease;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .portfolio-item:hover {\n    transform: translateY(-10px);\n    box-shadow: 0 20px 50px rgba(91, 127, 166, 0.2);\n  }\n  .portfolio-item:hover img,\n  .portfolio-item:hover video {\n    transform: scale(1.1);\n  }\n}\n\n.portfolio-item img,\n.portfolio-item video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.4s ease;\n  display: block;\n}\n\n.portfolio-overlay {\n  display: none !important;\n}\n\n.portfolio-item-label {\n  display: none !important;\n}\n\n\/* ===== MOBILE PORTFOLIO \u2014 lazy video via IntersectionObserver ===== *\/\n@media (max-width: 768px) {\n  .cal-portfolio {\n    padding: 60px 0;\n  }\n\n  .portfolio-grid {\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 12px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-snap-type: x mandatory;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    padding: 10px 20px 20px;\n    margin-left: -20px;\n    margin-right: -20px;\n    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\n    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\n  }\n\n  .portfolio-grid::-webkit-scrollbar {\n    display: none;\n  }\n\n  .portfolio-item {\n    flex: 0 0 60vw;\n    scroll-snap-align: center;\n    aspect-ratio: unset;\n    border-radius: 12px;\n    background: #f7f7f7;\n    box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .portfolio-item img,\n  .portfolio-item video {\n    width: 100%;\n    aspect-ratio: 1\/1;\n    object-fit: cover;\n    display: block;\n    transition: none;\n  }\n\n  .portfolio-item-label {\n    display: block !important;\n    padding: 10px 12px 12px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #2C3E5A;\n    text-align: center;\n  }\n\n  .portfolio-cta {\n    margin-top: 30px;\n  }\n}\n\n@media (max-width: 1024px) and (min-width: 769px) {\n  .portfolio-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n\/* ===== TESTIMONIALS ===== *\/\n.cal-testimonials {\n  padding: 100px 0;\n  background: linear-gradient(135deg, #1a1f2e 0%, #13161c 100%);\n  position: relative;\n  overflow: hidden;\n}\n\n\/* ===== BRANDS ===== *\/\n.cal-brands {\n  padding: 100px 0;\n  background: #f7f7f7;\n}\n\n.brands-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 30px;\n}\n\n.brands-header {\n  text-align: center;\n  margin-bottom: 70px;\n}\n\n.brands-title {\n  font-size: 2.6rem;\n  font-weight: 700;\n  color: #2C3E5A;\n  text-align: center;\n  margin-bottom: 20px;\n  position: relative;\n  display: inline-block;\n}\n\n.brands-title::after {\n  content: '';\n  position: absolute;\n  bottom: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80px;\n  height: 4px;\n  background: linear-gradient(90deg, #2C3E5A, #2C3E5A);\n  border-radius: 2px;\n}\n\n.brands-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 30px 40px;\n  align-items: center;\n  justify-items: center;\n}\n\n.brand-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.brand-logo {\n  height: 60px;\n  width: auto;\n  max-width: 130px;\n  object-fit: contain;\n  filter: none;\n  opacity: 1;\n  transition: transform 0.3s ease;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .brand-logo:hover {\n    transform: scale(1.05);\n  }\n}\n\n@media (max-width: 1024px) {\n  .brands-grid {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n\n@media (max-width: 768px) {\n  .brands-grid {\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px 20px;\n  }\n  .brand-logo {\n    height: 45px;\n    max-width: 100px;\n  }\n  .brands-title {\n    font-size: 2rem;\n  }\n  .cal-brands {\n    padding: 70px 0;\n  }\n  .brands-container {\n    padding: 0 20px;\n  }\n}\n\n\/* ===== TESTIMONIALS SLIDER ===== *\/\n.testimonials-slider {\n  position: relative;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.testimonials-track-wrapper {\n  overflow: hidden;\n}\n\n.testimonial-track {\n  display: flex;\n  gap: 24px;\n  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.testimonial-card {\n  flex: 0 0 calc((100% - 48px) \/ 3);\n  padding: 40px 35px;\n  background: rgba(232, 233, 236, 0.97);\n  border-radius: 20px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.2);\n  text-align: center;\n}\n\n.slider-arrow {\n  display: none;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 42px;\n  height: 42px;\n  background: transparent;\n  border: 1.5px solid rgba(255,255,255,0.5);\n  border-radius: 50%;\n  color: #fff;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.2s ease, background 0.2s ease;\n  z-index: 10;\n  padding: 0;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.slider-arrow svg {\n  width: 18px;\n  height: 18px;\n  stroke: #fff;\n  stroke-width: 2;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex-shrink: 0;\n}\n\n.slider-arrow:hover {\n  background: rgba(255,255,255,0.12);\n  border-color: #fff;\n}\n\n.slider-arrow-prev { left: -60px; }\n.slider-arrow-next { right: -60px; }\n\n@media (max-width: 768px) {\n  .testimonials-track-wrapper {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-snap-type: x mandatory;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\n    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);\n  }\n  .testimonials-track-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n  .testimonial-track {\n    transform: none !important;\n    transition: none;\n    padding: 10px 20px 20px;\n  }\n  .testimonial-card {\n    flex: 0 0 85vw;\n    scroll-snap-align: center;\n    padding: 30px 25px;\n  }\n  .slider-arrow {\n    display: none !important;\n  }\n}\n\n@media (min-width: 769px) {\n  .slider-arrow {\n    display: flex;\n  }\n}\n\n.quote-icon {\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 20px;\n}\n\n.quote-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.testimonial-stars {\n  display: flex;\n  justify-content: center;\n  gap: 5px;\n  margin-bottom: 20px;\n}\n\n.star {\n  color: #C9A96E;\n  font-size: 1.5rem;\n}\n\n.testimonial-text {\n  font-size: 0.95rem;\n  line-height: 1.6;\n  color: #333;\n  margin-bottom: 25px;\n  font-style: italic;\n}\n\n.author-name {\n  font-weight: 700;\n  color: #C9A96E;\n  font-size: 1.1rem;\n  margin-bottom: 5px;\n}\n\n.author-role {\n  color: #666;\n  font-size: 0.9rem;\n}\n\n\/* ===== PROCESS ===== *\/\n.cal-process {\n  padding: 120px 0;\n  background: #FFFFFF;\n}\n\n.process-timeline-wrapper {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 80px 30px;\n  position: relative;\n}\n\n.timeline-line {\n  position: absolute;\n  top: 140px;\n  left: 15%;\n  right: 15%;\n  height: 3px;\n  background: linear-gradient(90deg, #1a1f2e 0%, #2C3E5A 50%, #1a1f2e 100%);\n  z-index: 1;\n}\n\n.timeline-line::before,\n.timeline-line::after {\n  content: '';\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: #2C3E5A;\n  border-radius: 50%;\n  top: 50%;\n  transform: translateY(-50%);\n  box-shadow: 0 0 20px rgba(91, 127, 166, 0.6);\n}\n\n.timeline-line::before { left: 0; }\n.timeline-line::after { right: 0; }\n\n.process-steps {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  position: relative;\n  z-index: 2;\n  gap: 40px;\n}\n\n.process-step {\n  flex: 1;\n  text-align: center;\n  position: relative;\n  max-width: 320px;\n}\n\n.step-number {\n  width: 90px;\n  height: 90px;\n  background: #C9A96E;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 2.2rem;\n  font-weight: 700;\n  color: #FFFFFF;\n  margin: 0 auto 40px;\n  transition: all 0.5s ease;\n  position: relative;\n  z-index: 3;\n  box-shadow: 0 15px 40px rgba(201, 169, 110, 0.3);\n  border: 5px solid #FFFFFF;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .process-step:hover .step-number {\n    background: linear-gradient(135deg, #2C3E5A 0%, #1a1f2e 100%);\n    transform: scale(1.15) rotate(360deg);\n    box-shadow: 0 20px 50px rgba(91, 127, 166, 0.6);\n  }\n  .process-step:hover .step-content {\n    transform: translateY(-8px);\n    box-shadow: 0 20px 60px rgba(91, 127, 166, 0.15);\n    border-top-color: #2C3E5A;\n  }\n}\n\n.step-content {\n  background: #FFFFFF;\n  border-radius: 12px;\n  padding: 35px 30px;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.05);\n  transition: all 0.3s ease;\n  border-top: 3px solid #C9A96E;\n  min-height: 220px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.step-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: #2C3E5A;\n  margin-bottom: 15px;\n  line-height: 1.3;\n}\n\n.step-description {\n  font-size: 0.98rem;\n  color: #555;\n  line-height: 1.8;\n}\n\n.step-connector {\n  position: absolute;\n  width: 2px;\n  height: 40px;\n  background: linear-gradient(180deg, #2C3E5A 0%, rgba(91, 127, 166, 0.3) 100%);\n  left: 50%;\n  top: 90px;\n  transform: translateX(-50%);\n  z-index: 1;\n}\n\n@media (max-width: 1024px) {\n  .cal-process { padding: 80px 0; }\n  .process-timeline-wrapper { padding: 60px 20px; }\n  .timeline-line {\n    left: 50%;\n    top: 0;\n    bottom: 0;\n    right: auto;\n    width: 3px;\n    height: auto;\n    transform: translateX(-50%);\n    background: linear-gradient(180deg, #2C3E5A 0%, #2C3E5A 50%, #2C3E5A 100%);\n  }\n  .timeline-line::before {\n    left: 50%;\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n  .timeline-line::after {\n    right: auto;\n    left: 50%;\n    bottom: 0;\n    top: auto;\n    transform: translate(-50%, 50%);\n  }\n  .process-steps {\n    flex-direction: column;\n    gap: 80px;\n    align-items: center;\n  }\n  .process-step {\n    max-width: 500px;\n    width: 100%;\n    display: grid;\n    grid-template-columns: 120px 1fr;\n    gap: 30px;\n    text-align: left;\n    align-items: center;\n  }\n  .step-number { margin: 0; grid-column: 1; }\n  .step-connector { display: none; }\n  .step-content {\n    grid-column: 2;\n    min-height: auto;\n    border-top: none;\n    border-left: 4px solid transparent;\n  }\n  .process-step:hover .step-content {\n    border-left-color: #2C3E5A;\n  }\n}\n\n@media (max-width: 640px) {\n  .process-step {\n    grid-template-columns: 1fr;\n    text-align: center;\n  }\n  .step-number { margin: 0 auto; }\n  .step-content {\n    grid-column: 1;\n    border-left: none;\n    border-top: 4px solid transparent;\n  }\n  .process-step:hover .step-content {\n    border-left-color: transparent;\n    border-top-color: #2C3E5A;\n  }\n}\n\n\/* ===== CONTACT ===== *\/\n.cal-contact {\n  padding: 100px 0;\n  background: #f7f7f7;\n}\n\n.contact-content {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: start;\n}\n\n.contact-info {\n  background: transparent;\n  padding: 20px 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.contact-info-title {\n  font-size: 1.8rem;\n  font-weight: 700;\n  color: #2C3E5A;\n  margin-bottom: 30px;\n}\n\n.contact-info-items {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.contact-card-btn {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 14px 8px;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid rgba(0,0,0,0.07);\n  border-radius: 0;\n  text-decoration: none !important;\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n.contact-card-static {\n  cursor: default;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .contact-card-btn:hover {\n    background: transparent;\n    border-color: rgba(0,0,0,0.07);\n    transform: translateX(4px);\n    box-shadow: none;\n  }\n  .contact-card-btn:hover .contact-icon {\n    background: #b8924f;\n    box-shadow: none;\n  }\n  .contact-instagram-btn:hover .contact-icon {\n    background: linear-gradient(135deg, #E1306C, #C13584, #833AB4) !important;\n    box-shadow: none !important;\n  }\n}\n\n.contact-icon {\n  width: 55px;\n  height: 55px;\n  background: #C9A96E;\n  border-radius: 15px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: all 0.3s ease;\n}\n\n.contact-icon svg {\n  width: 28px;\n  height: 28px;\n  fill: #FFFFFF;\n}\n\n.contact-info-text h4 {\n  font-weight: 700;\n  color: #2C3E5A;\n  font-size: 1rem;\n  margin-bottom: 3px;\n}\n\n.contact-info-text p {\n  color: #2C3E5A;\n  font-weight: 600;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n\n.contact-instagram-btn-wrap {\n  margin-top: 5px;\n}\n\n.contact-form-wrapper {\n  background: transparent;\n  padding: 20px 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n\/* ===== FOOTER ===== *\/\n.cal-footer {\n  background: linear-gradient(135deg, #13161c 0%, #1a1f2e 55%, #13161c 100%);\n  color: #FFFFFF;\n  padding: 80px 0 40px;\n}\n\n.footer-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 30px;\n}\n\n.footer-content {\n  display: grid;\n  grid-template-columns: 1.5fr repeat(3, 1fr);\n  gap: 40px;\n  padding-bottom: 40px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.12);\n}\n\n.footer-logo-text {\n  font-size: 1.3rem;\n  font-weight: 700;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n}\n\n.footer-description {\n  color: rgba(255, 255, 255, 0.8);\n  font-size: 0.95rem;\n  line-height: 1.7;\n  margin: 20px 0 25px;\n}\n\n.footer-column {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.footer-column h4 {\n  font-size: 1.1rem !important;\n  margin: 0 0 18px 0 !important;\n  padding: 0 !important;\n  color: #C9A96E !important;\n  width: 100%;\n}\n\n.footer-links {\n  list-style: none !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.footer-links li {\n  padding: 0 !important;\n  margin: 0 !important;\n  list-style: none !important;\n}\n\n.footer-links a,\n.footer-links li span {\n  color: rgba(255, 255, 255, 0.82);\n  font-size: 0.95rem;\n  padding: 0 !important;\n  margin: 0 !important;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  display: block;\n}\n\n.footer-links a:hover {\n  color: #2C3E5A;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .footer-links a:hover {\n    transform: translateX(4px);\n  }\n  .footer-social-icon:hover {\n    background: #2C3E5A;\n    transform: translateY(-4px);\n    box-shadow: 0 0 20px rgba(91, 127, 166, 0.6);\n  }\n  .footer-legal a:hover {\n    color: #2C3E5A;\n  }\n  .footer-credit a:hover {\n    color: #FFFFFF;\n    text-shadow: 0 0 10px rgba(91, 127, 166, 0.8);\n  }\n}\n\n.footer-social {\n  display: flex;\n  gap: 12px;\n}\n\n.footer-social-icon {\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.08);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s ease;\n  border: 1px solid rgba(91, 127, 166, 0.35);\n  cursor: pointer;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.footer-social-icon svg {\n  width: 20px;\n  height: 20px;\n  fill: #FFFFFF;\n}\n\n.footer-bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 30px;\n  color: rgba(255, 255, 255, 0.7);\n  font-size: 0.95rem;\n}\n\n.footer-legal {\n  display: flex;\n  gap: 20px;\n}\n\n.footer-legal a {\n  color: rgba(255, 255, 255, 0.7);\n  transition: color 0.3s ease;\n}\n\n.footer-credit {\n  text-align: center;\n  padding-top: 25px;\n  margin-top: 20px;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  color: rgba(255, 255, 255, 0.6);\n  font-size: 0.9rem;\n}\n\n.footer-credit p {\n  margin: 0;\n}\n\n.footer-credit a {\n  color: #C9A96E;\n  font-weight: 600;\n  transition: all 0.3s ease;\n  text-decoration: none;\n}\n\n@media (max-width: 968px) {\n  .services-grid { grid-template-columns: 1fr; }\n  .contact-content,\n  .footer-content { grid-template-columns: 1fr; }\n}\n\n@media (max-width: 768px) {\n  .cal-services,\n  .cal-portfolio,\n  .cal-testimonials,\n  .cal-process,\n  .cal-contact { padding: 70px 0; }\n\n  .services-container,\n  .portfolio-container,\n  .testimonials-container,\n  .process-container,\n  .contact-container,\n  .footer-container { padding: 0 20px; }\n\n  .services-title,\n  .portfolio-title,\n  .testimonials-title,\n  .process-title,\n  .contact-title { font-size: 2rem; }\n\n  .portfolio-grid { grid-template-columns: 1fr; }\n  .contact-info,\n  .contact-form-wrapper { padding: 40px 30px; }\n\n  .footer-bottom {\n    flex-direction: column;\n    gap: 20px;\n    align-items: flex-start;\n  }\n  .footer-legal {\n    flex-direction: column;\n    gap: 10px;\n  }\n  .footer-credit {\n    padding-top: 20px;\n    margin-top: 15px;\n    font-size: 0.85rem;\n  }\n}\n<\/style>\n\n<!-- NAV -->\n<nav class=\"cal-nav\" id=\"calNav\">\n  <div class=\"nav-container\">\n    <div class=\"nav-inner-card\">\n      <a href=\"#home\" class=\"nav-logo\">\n        <img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media Logo\" class=\"logo-blend\" loading=\"eager\">\n      <\/a>\n      <ul class=\"nav-menu\" id=\"navMenu\">\n        <li><a href=\"#home\">Home<\/a><\/li>\n        <li><a href=\"#about\">About Us<\/a><\/li>\n        <li><a href=\"#services\">What We Do<\/a><\/li>\n        <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\n        <li><a href=\"#contact\" class=\"nav-cta\">Contact Us<\/a><\/li>\n      <\/ul>\n      <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Toggle menu\" type=\"button\">\n        <span class=\"hamburger-line\"><\/span>\n        <span class=\"hamburger-line\"><\/span>\n        <span class=\"hamburger-line\"><\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/nav>\n\n<div class=\"mobile-overlay\" id=\"mobileOverlay\"><\/div>\n\n<div class=\"mobile-menu\" id=\"mobileMenu\">\n  <div class=\"mobile-menu-header\">\n    <img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media Logo\" class=\"mobile-menu-logo\" loading=\"lazy\">\n  <\/div>\n  <ul class=\"mobile-menu-items\">\n    <li><a href=\"#home\" class=\"mobile-menu-link\">Home<\/a><\/li>\n    <li><a href=\"#about\" class=\"mobile-menu-link\">About Us<\/a><\/li>\n    <li><a href=\"#services\" class=\"mobile-menu-link\">What We Do<\/a><\/li>\n    <li><a href=\"#portfolio\" class=\"mobile-menu-link\">Portfolio<\/a><\/li>\n    <li><a href=\"#contact\" class=\"nav-cta\">Contact Us<\/a><\/li>\n  <\/ul>\n<\/div>\n\n<!-- HERO with YouTube Background -->\n<section class=\"cal-hero\" id=\"home\">\n  <div class=\"hero-yt-container\" id=\"ytBgContainer\">\n    <iframe\n      id=\"ytBgPlayer\"\n      src=\"https:\/\/www.youtube.com\/embed\/x9NJ664hi_Y?autoplay=1&#038;mute=1&#038;loop=1&#038;playlist=x9NJ664hi_Y&#038;controls=0&#038;showinfo=0&#038;rel=0&#038;modestbranding=1&#038;playsinline=1&#038;disablekb=1&#038;fs=0&#038;iv_load_policy=3\"\n      title=\"Background Video\"\n      allow=\"autoplay; encrypted-media; fullscreen\"\n      frameborder=\"0\"\n    ><\/iframe>\n  <\/div>\n  <div class=\"hero-poster-bg\"><\/div>\n  <div class=\"hero-overlay\"><\/div>\n  <div class=\"hero-content\">\n    <h1 class=\"hero-title\">Where Moments Become Stories<\/h1>\n    <p class=\"hero-subtitle\">Premium photography &amp; videography solutions crafted to elevate your vision.<\/p>\n    <div class=\"hero-cta-group\">\n      <a href=\"#contact\" class=\"hero-btn hero-btn-primary\">Book Your Session<\/a>\n      <a href=\"#portfolio\" class=\"hero-btn hero-btn-secondary\">View Our Work<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ABOUT -->\n<section class=\"cal-about\" id=\"about\">\n  <div class=\"about-container\">\n    <h2 class=\"about-title\">Crafting Visual Stories for Every Occasion<\/h2>\n    <div class=\"about-content\">\n      <div class=\"about-text\">\n        <p>At <span class=\"about-highlight\">Cal Media<\/span>, we believe every moment has a story worth telling. With over <span class=\"about-gold\">13 years of combined experience<\/span>, our team delivers professional photography &amp; videography that connects, inspires, and elevates your brand or event.<\/p>\n        <p>We&#8217;ve had the privilege of working with prestigious brands including <strong>Unilever, Sharks Rugby, Thekweni Motor Group, Glenwood High, Puma, Umgeni Waters, and Neon Dreams<\/strong> \u2014 delivering exceptional visual content that drives results.<\/p>\n        <p>Whether you&#8217;re a school, startup, corporate, creative influencer, or planning your big day \u2014 we bring your vision to life through expert storytelling behind the lens.<\/p>\n      <\/div>\n      <div class=\"about-image-grid\">\n        <div class=\"about-image-item\">\n          <img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2152.png\" alt=\"Cal Media Photography\" loading=\"lazy\">\n        <\/div>\n        <div class=\"about-image-item\">\n          <img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_1649.jpg\" alt=\"Cal Media Videography\" loading=\"lazy\">\n        <\/div>\n        <div class=\"about-image-item\">\n          <img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/DSC01176-scaled.png\" alt=\"Cal Media Production\" loading=\"lazy\">\n        <\/div>\n        <div class=\"about-image-item\">\n          <img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/MG_8055.jpg\" alt=\"Cal Media Behind the Scenes\" loading=\"lazy\">\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"about-stats\">\n      <div class=\"stat-item\">\n        <div class=\"stat-number\" data-target=\"13\">0<\/div>\n        <div class=\"stat-label\">Years Experience<\/div>\n      <\/div>\n      <div class=\"stat-item\">\n        <div class=\"stat-number\" data-target=\"500\">0<\/div>\n        <div class=\"stat-label\">Projects Completed<\/div>\n      <\/div>\n      <div class=\"stat-item\">\n        <div class=\"stat-number\" data-target=\"100\">0<\/div>\n        <div class=\"stat-label\">Client Satisfaction<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"about-cta\">\n      <a href=\"#contact\" class=\"about-btn\">Contact Us<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- SERVICES -->\n<section class=\"cal-services\" id=\"services\">\n  <div class=\"services-container\">\n    <div class=\"services-header\">\n      <h2 class=\"services-title\">Our Expertise<\/h2>\n      <p class=\"services-intro\">From concept to capture, every service we offer is tailored for impact, clarity and visual excellence.<\/p>\n    <\/div>\n    <div class=\"services-grid\">\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"\/>\n            <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"service-title\">Photography Services<\/h3>\n        <p class=\"service-description\">Capturing polished, professional images for events, branding, portraits, campaigns, and more.<\/p>\n        <ul class=\"service-features\">\n          <li>Event &amp; Corporate Photography<\/li>\n          <li>Product Photography &amp; Showcases<\/li>\n          <li>Professional Portraits<\/li>\n          <li>Brand Campaign Shoots<\/li>\n          <li>School &amp; Educational Events<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"service-title\">Videography Services<\/h3>\n        <p class=\"service-description\">Cinematic storytelling for weddings, corporate films, social content, and short features.<\/p>\n        <ul class=\"service-features\">\n          <li>Short Form Video Content<\/li>\n          <li>Long Form Documentary<\/li>\n          <li>Wedding Cinematography<\/li>\n          <li>Corporate Videos &amp; Films<\/li>\n          <li>Social Media Content Creation<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"service-title\">Full Production Support<\/h3>\n        <p class=\"service-description\">Concept, shoot, edit \u2014 a full suite of media solutions under one roof.<\/p>\n        <ul class=\"service-features\">\n          <li>Lifestyle &amp; Event Coverage<\/li>\n          <li>Product Launches &amp; Showcases<\/li>\n          <li>Creative Concept Development<\/li>\n          <li>Professional Multi-Cam Shooting<\/li>\n          <li>Advanced Post-Production<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n    <div class=\"services-cta\">\n      <a href=\"#contact\" class=\"services-btn\">Contact Us<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- PORTFOLIO -->\n<section class=\"cal-portfolio\" id=\"portfolio\">\n  <div class=\"portfolio-container\">\n    <div class=\"portfolio-header\">\n      <h2 class=\"portfolio-title\">Our Visual Showcase<\/h2>\n      <p class=\"portfolio-subtitle\">Take a look at some of our latest work \u2014 each piece crafted with precision and heart.<\/p>\n    <\/div>\n    <div class=\"portfolio-grid\">\n      <div class=\"portfolio-item\">\n        <video src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2204.mp4\" autoplay muted loop playsinline preload=\"none\" data-src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2204.mp4\"><\/video>\n        <div class=\"portfolio-item-label\">Photography<\/div>\n      <\/div>\n      <div class=\"portfolio-item\">\n        <video src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2217-1.mp4\" autoplay muted loop playsinline preload=\"none\" data-src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2217-1.mp4\"><\/video>\n        <div class=\"portfolio-item-label\">Videography<\/div>\n      <\/div>\n      <div class=\"portfolio-item\">\n        <video src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2218.mp4\" autoplay muted loop playsinline preload=\"none\" data-src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2218.mp4\"><\/video>\n        <div class=\"portfolio-item-label\">Corporate<\/div>\n      <\/div>\n      <div class=\"portfolio-item\">\n        <video src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2215.mp4\" autoplay muted loop playsinline preload=\"none\" data-src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2215.mp4\"><\/video>\n        <div class=\"portfolio-item-label\">Events<\/div>\n      <\/div>\n      <div class=\"portfolio-item\">\n        <video src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2216.mp4\" autoplay muted loop playsinline preload=\"none\" data-src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2216.mp4\"><\/video>\n        <div class=\"portfolio-item-label\">Production<\/div>\n      <\/div>\n      <div class=\"portfolio-item\">\n        <video src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2203.mp4\" autoplay muted loop playsinline preload=\"none\" data-src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG_2203.mp4\"><\/video>\n        <div class=\"portfolio-item-label\">Lifestyle<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"portfolio-cta\">\n      <a href=\"#contact\" class=\"portfolio-btn\">Contact Us<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- TESTIMONIALS -->\n<section class=\"cal-testimonials\" id=\"testimonials\">\n  <div class=\"testimonials-container\">\n    <div class=\"testimonials-header\">\n      <h2 class=\"testimonials-title\">What Our Clients Say<\/h2>\n    <\/div>\n    <div class=\"testimonials-slider\">\n      <button class=\"slider-arrow slider-arrow-prev\" id=\"prevBtn\" aria-label=\"Previous\" type=\"button\">\n        <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n      <\/button>\n      <div class=\"testimonials-track-wrapper\" id=\"testimonialWrapper\">\n        <div class=\"testimonial-track\" id=\"testimonialTrack\">\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;As an owner of a marketing agency, I can HIGHLY RECOMMEND CAL Photography &amp; Media &#8211; Their passion shines through in every photo and don&#8217;t even get me started on their extremely fast turnaround time. We took Cam and Dyl to 9 of our clients&#8217; stores and we were blown away from the get-go! Thank you for all your efforts!&#8221;<\/p>\n            <div class=\"author-name\">Michael Dolby<\/div>\n            <div class=\"author-role\">Marketing Agency Owner<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;CAL media were the videographers for my pre-wedding events. Cameron and his team were fun to work with while maintaining their professionalism. The finished products exuded talent and exceeded my expectations. Highly recommend this team!&#8221;<\/p>\n            <div class=\"author-name\">RishavMira Juglall<\/div>\n            <div class=\"author-role\">Wedding Client<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;On behalf of Riverview Manor, Choose Life and Ultranasium that have received your expertise! You are the epitome of future photography! Our media pages have blown up with not only the quality you produce with videos to acute angles on the shots.&#8221;<\/p>\n            <div class=\"author-name\">Jared Elliott<\/div>\n            <div class=\"author-role\">Riverview Manor, Choose Life &amp; Ultranasium<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;Cameron knows his way around a camera. Always professional high-quality photos and footage. He&#8217;s a true master of the craft, and a great guy to work with!&#8221;<\/p>\n            <div class=\"author-name\">Travis Muller<\/div>\n            <div class=\"author-role\">Professional Client<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;Cam is incredibly hardworking, talented, and passionate and he is amazing at his job. He always does such amazing work and I highly recommend him if you need a photographer or videographer!&#8221;<\/p>\n            <div class=\"author-name\">Gordon van den Berg<\/div>\n            <div class=\"author-role\">Client<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;Cam, honestly the greatest photographer I&#8217;ve come across, you made me feel so comfortable and made me feel like I was unstoppable. Thank you for taking the time to get me out my shell, you are so kind, patient and honest such a gem to work with.&#8221;<\/p>\n            <div class=\"author-name\">Paige Hackmack<\/div>\n            <div class=\"author-role\">Portrait Client<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;Cameron put a video together for my company! He is professional and passionate about his business. Will definitely recommend his services.&#8221;<\/p>\n            <div class=\"author-name\">Michelle Kriese<\/div>\n            <div class=\"author-role\">Corporate Client<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;I&#8217;ve used CAL media on multiple occasions and have never been left disappointed. The quality of the work for the price that you pay is excellent, and it&#8217;s very easy to work with the team. Highly recommend!&#8221;<\/p>\n            <div class=\"author-name\">Cameron Badenhorst<\/div>\n            <div class=\"author-role\">Repeat Client<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;Photos came out amazing and super high quality. Felt really comfortable with the photographer who made it a really fun session.&#8221;<\/p>\n            <div class=\"author-name\">Tayne Muil<\/div>\n            <div class=\"author-role\">Photography Client<\/div>\n          <\/div>\n          <div class=\"testimonial-card\">\n            <div class=\"quote-icon\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/CAL-Media-logo-designs-1.png\" alt=\"Cal Media\" loading=\"lazy\"><\/div>\n            <div class=\"testimonial-stars\"><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><span class=\"star\">\u2605<\/span><\/div>\n            <p class=\"testimonial-text\">&#8220;Have had the pleasure of working with them on a few occasions. Cameron is very professional, creative and all round good guy.&#8221;<\/p>\n            <div class=\"author-name\">Buan Stanley<\/div>\n            <div class=\"author-role\">Professional Client<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <button class=\"slider-arrow slider-arrow-next\" id=\"nextBtn\" aria-label=\"Next\" type=\"button\">\n        <svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n      <\/button>\n    <\/div>\n    <div class=\"testimonials-cta\">\n      <a href=\"#contact\" class=\"testimonials-btn\">Contact Us<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- BRANDS -->\n<section class=\"cal-brands\" id=\"brands\">\n  <div class=\"brands-container\">\n    <div class=\"brands-header\">\n      <h2 class=\"brands-title\">Brands Who Trust Us<\/h2>\n    <\/div>\n    <div class=\"brands-grid\">\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0002.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0003.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0004.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0005.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0001.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0006.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0007.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0008.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/03\/IMG-20260331-WA0009.jpg\" alt=\"Brand\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/04\/32Gi-Logo-1.jpg\" alt=\"32Gi\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/04\/OLOF-Vector-Logo-1.16.jpg\" alt=\"OLOF\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/04\/NNDT-logo-Vec-1-scaled.jpg\" alt=\"NNDT\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n      <div class=\"brand-item\"><img decoding=\"async\" src=\"https:\/\/calmedia.co.za\/wp-content\/uploads\/2026\/04\/BananaSkinz-NewYellow-Website-logo-design-option-2-1-scaled.jpg\" alt=\"BananaSkinz\" class=\"brand-logo\" loading=\"lazy\"><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- PROCESS -->\n<section class=\"cal-process\" id=\"process\">\n  <div class=\"process-container\">\n    <div class=\"process-header\">\n      <h2 class=\"process-title\">Our Approach<\/h2>\n    <\/div>\n    <div class=\"process-timeline-wrapper\">\n      <div class=\"timeline-line\"><\/div>\n      <div class=\"process-steps\">\n        <div class=\"process-step\">\n          <div class=\"step-number\">1<\/div>\n          <div class=\"step-connector\"><\/div>\n          <div class=\"step-content\">\n            <h3 class=\"step-title\">Connect &amp; Explore<\/h3>\n            <p class=\"step-description\">We begin with a conversation about your vision, goals, and creative needs.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"process-step\">\n          <div class=\"step-number\">2<\/div>\n          <div class=\"step-connector\"><\/div>\n          <div class=\"step-content\">\n            <h3 class=\"step-title\">Capture with Precision<\/h3>\n            <p class=\"step-description\">Our team works with top-tier equipment and creative insight. Every shot is carefully composed to ensure your story is captured authentically and beautifully.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"process-step\">\n          <div class=\"step-number\">3<\/div>\n          <div class=\"step-connector\"><\/div>\n          <div class=\"step-content\">\n            <h3 class=\"step-title\">Create Your Story<\/h3>\n            <p class=\"step-description\">Your final media is delivered polished, purposeful, and ready to impress. We handle all post-production to ensure every detail meets our high standards.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"process-cta\">\n      <a href=\"#contact\" class=\"process-btn\">Contact Us<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- CONTACT -->\n<section class=\"cal-contact\" id=\"contact\">\n  <div class=\"contact-container\">\n    <div class=\"contact-header\">\n      <h2 class=\"contact-title\">Ready To Work Together?<\/h2>\n      <p class=\"contact-subtitle\">Get in touch \u2014 whether it&#8217;s a booking, enquiry, or to discuss your next project, we&#8217;re here to help.<\/p>\n    <\/div>\n    <div class=\"contact-content\">\n      <div class=\"contact-info\">\n        <h3 class=\"contact-info-title\">Get In Touch<\/h3>\n        <div class=\"contact-info-items\">\n          <a href=\"mailto:hello@calmedia.co.za\" class=\"contact-card-btn\">\n            <div class=\"contact-icon\">\n              <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\n            <\/div>\n            <div class=\"contact-info-text\">\n              <h4>Email Us<\/h4>\n              <p>hello@calmedia.co.za<\/p>\n            <\/div>\n          <\/a>\n          <a href=\"tel:+27679524170\" class=\"contact-card-btn\">\n            <div class=\"contact-icon\">\n              <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\/><\/svg>\n            <\/div>\n            <div class=\"contact-info-text\">\n              <h4>Call Us<\/h4>\n              <p>+27 67 952 4170<\/p>\n            <\/div>\n          <\/a>\n          <div class=\"contact-card-btn contact-card-static\">\n            <div class=\"contact-icon\">\n              <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\n            <\/div>\n            <div class=\"contact-info-text\">\n              <h4>Location<\/h4>\n              <p>Durban, South Africa<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"contact-info-item contact-instagram-btn-wrap\">\n          <a href=\"https:\/\/www.instagram.com\/cal_media_official\" class=\"contact-card-btn contact-instagram-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <div class=\"contact-icon\">\n              <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\n            <\/div>\n            <div class=\"contact-info-text\">\n              <h4>Instagram<\/h4>\n              <p>Connect With Us<\/p>\n            <\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n      <div class=\"contact-form-wrapper\">\n        \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f60-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"60\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php\/wp-json\/wp\/v2\/pages\/37#wpcf7-f60-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"60\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f60-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"redirect_nonce\" value=\"02459213af\" \/><input type=\"hidden\" name=\"wpcf7cfpdf_hidden_name\" value=\"document-pdf\" \/><input type=\"hidden\" name=\"wpcf7cfpdf_hidden_reference\" value=\"6ff79fd0\" \/><input type=\"hidden\" name=\"wpcf7cfpdf_hidden_date\" value=\"May31,2026\" \/>\n<\/fieldset>\n<div class=\"cf7-row\">\n\t<p><label>Your Name *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"e.g. John Smith\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"cf7-row\">\n\t<p><label>Email Address *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"e.g. hello@example.com\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"cf7-row\">\n\t<p><label>Phone Number<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"e.g. +27 82 000 0000\" value=\"\" type=\"tel\" name=\"your-phone\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"cf7-row\">\n\t<p><label>Project Date<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"project-date\"><input class=\"wpcf7-form-control wpcf7-date wpcf7-validates-as-date\" aria-invalid=\"false\" value=\"\" type=\"date\" name=\"project-date\" \/><\/span>\n\t<\/p>\n<\/div>\n<div class=\"cf7-row\">\n\t<p><label>Project Type *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"project-type\"><select class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" name=\"project-type\"><option value=\"Select a service...\">Select a service...<\/option><option value=\"Photography\">Photography<\/option><option value=\"Videography\">Videography<\/option><option value=\"Full Production\">Full Production<\/option><option value=\"Wedding\">Wedding<\/option><option value=\"Corporate\">Corporate<\/option><option value=\"Event Coverage\">Event Coverage<\/option><option value=\"Other\">Other<\/option><\/select><\/span>\n\t<\/p>\n<\/div>\n<div class=\"cf7-row\">\n\t<p><label>Message *<\/label><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tell us about your project...\" name=\"your-message\"><\/textarea><\/span>\n\t<\/p>\n<\/div>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Send Enquiry\" \/><br \/>\n```\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer class=\"cal-footer\">\n  <div class=\"footer-container\">\n    <div class=\"footer-content\">\n      <div class=\"footer-brand\">\n        <div class=\"footer-logo-text\">CAL MEDIA<\/div>\n        <p class=\"footer-description\">Premium photography &amp; videography solutions that transform moments into stories. Serving clients across South Africa with 25+ years of combined experience.<\/p>\n      <\/div>\n      <div class=\"footer-column\">\n        <h4>Quick Links<\/h4>\n        <ul class=\"footer-links\">\n          <li><a href=\"#home\">Home<\/a><\/li>\n          <li><a href=\"#about\">About<\/a><\/li>\n          <li><a href=\"#services\">Services<\/a><\/li>\n          <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\n          <li><a href=\"#contact\">Contact<\/a><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"footer-column\">\n        <h4>Services<\/h4>\n        <ul class=\"footer-links\">\n          <li><a href=\"#services\">Photography<\/a><\/li>\n          <li><a href=\"#services\">Videography<\/a><\/li>\n          <li><a href=\"#services\">Production<\/a><\/li>\n          <li><a href=\"#services\">Event Coverage<\/a><\/li>\n          <li><a href=\"#services\">Corporate<\/a><\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"footer-column\">\n        <h4>Contact<\/h4>\n        <ul class=\"footer-links\">\n          <li><a href=\"mailto:hello@calmedia.co.za\">hello@calmedia.co.za<\/a><\/li>\n          <li><a href=\"tel:+27679524170\">+27 67 952 4170<\/a><\/li>\n          <li><span style=\"color: rgba(255, 255, 255, 0.8);\">Durban, South Africa<\/span><\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n    <div class=\"footer-bottom\">\n      <p>&copy; 2026 Cal Media. All rights reserved.<\/p>\n    <\/div>\n    <div class=\"footer-credit\">\n      <p>Powered by <a href=\"https:\/\/automait.co.za\/\" target=\"_blank\" rel=\"noopener noreferrer\">Automait<\/a><\/p>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<script>\n\/\/ ===== YOUTUBE RESUME ON TAB VISIBILITY =====\ndocument.addEventListener('visibilitychange', function() {\n  if (!document.hidden) {\n    var iframe = document.getElementById('ytBgPlayer');\n    if (iframe) {\n      var src = iframe.src;\n      iframe.src = '';\n      iframe.src = src;\n    }\n  }\n});\n\n\/\/ ===== HAMBURGER MENU \u2014 iOS-SAFE FIX =====\n\/\/ Root cause: iOS Safari fires both touchstart AND click on buttons.\n\/\/ The previous code used sourceCapabilities to deduplicate \u2014 but iOS Safari\n\/\/ does NOT support sourceCapabilities, so both events fired and toggled twice (open \u2192 immediately close).\n\/\/ Fix: Use a single 'click' listener only. On iOS, buttons inside <button type=\"button\">\n\/\/ reliably fire click from touch without any 300ms delay when touch-action: manipulation is set.\n\/\/ We no longer need touchstart at all on the hamburger.\n(function() {\n  var hamburger = document.getElementById('hamburger');\n  var mobileMenu = document.getElementById('mobileMenu');\n  var mobileOverlay = document.getElementById('mobileOverlay');\n  var mobileMenuLinks = document.querySelectorAll('.mobile-menu-link, .mobile-menu-items .nav-cta');\n  var isOpen = false;\n\n  function openMenu() {\n    isOpen = true;\n    hamburger.classList.add('active');\n    mobileMenu.classList.add('active');\n    mobileOverlay.classList.add('active');\n    document.body.style.overflow = 'hidden';\n  }\n\n  function closeMenu() {\n    isOpen = false;\n    hamburger.classList.remove('active');\n    mobileMenu.classList.remove('active');\n    mobileOverlay.classList.remove('active');\n    document.body.style.overflow = '';\n  }\n\n  function toggleMenu() {\n    if (isOpen) {\n      closeMenu();\n    } else {\n      openMenu();\n    }\n  }\n\n  \/\/ Single click listener \u2014 works correctly on iOS Safari, Android, and desktop.\n  \/\/ touch-action: manipulation on the button eliminates the 300ms delay on mobile.\n  if (hamburger) {\n    hamburger.addEventListener('click', toggleMenu);\n  }\n\n  \/\/ Close on overlay click\/touch\n  if (mobileOverlay) {\n    mobileOverlay.addEventListener('click', closeMenu);\n  }\n\n  \/\/ Close when a menu link is tapped\n  mobileMenuLinks.forEach(function(link) {\n    link.addEventListener('click', closeMenu);\n  });\n})();\n\n\/\/ ===== SMOOTH SCROLL =====\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(function(anchor) {\n  anchor.addEventListener('click', function(e) {\n    var href = this.getAttribute('href');\n    var target = document.querySelector(href);\n    if (target) {\n      e.preventDefault();\n      window.scrollTo({ top: target.offsetTop, behavior: 'smooth' });\n    }\n    this.blur();\n  });\n});\n\n\/\/ ===== COUNTER ANIMATION =====\nfunction animateCounter(element, target, suffix) {\n  suffix = suffix || '';\n  var current = 0;\n  var increment = target \/ 50;\n  var stepTime = 2000 \/ 50;\n  var timer = setInterval(function() {\n    current += increment;\n    if (current >= target) {\n      element.textContent = target + suffix;\n      clearInterval(timer);\n    } else {\n      element.textContent = Math.floor(current) + suffix;\n    }\n  }, stepTime);\n}\n\nvar statsObserver = new IntersectionObserver(function(entries) {\n  entries.forEach(function(entry) {\n    if (entry.isIntersecting) {\n      entry.target.querySelectorAll('.stat-number').forEach(function(stat) {\n        var target = parseInt(stat.getAttribute('data-target'));\n        var label = stat.nextElementSibling.textContent;\n        animateCounter(stat, target, label.indexOf('Satisfaction') !== -1 ? '%' : '+');\n      });\n      statsObserver.unobserve(entry.target);\n    }\n  });\n}, { threshold: 0.5 });\n\nvar statsSection = document.querySelector('.about-stats');\nif (statsSection) statsObserver.observe(statsSection);\n\n\/\/ ===== MOBILE VIDEO LAZY LOADING =====\n\/\/ On mobile, videos use preload=\"none\". We use IntersectionObserver to\n\/\/ load and play them only when they scroll into view \u2014 dramatically reducing\n\/\/ initial page load bandwidth and improving performance.\n(function() {\n  var isMobileDevice = window.innerWidth <= 768;\n  if (!isMobileDevice) return; \/\/ Desktop: videos autoplay normally with src already set\n\n  var videos = document.querySelectorAll('.portfolio-item video');\n  if (!('IntersectionObserver' in window)) {\n    \/\/ Fallback: just play all videos if IntersectionObserver not supported\n    videos.forEach(function(v) { v.play().catch(function(){}); });\n    return;\n  }\n\n  var videoObserver = new IntersectionObserver(function(entries) {\n    entries.forEach(function(entry) {\n      var video = entry.target;\n      if (entry.isIntersecting) {\n        \/\/ Load and play when in view\n        if (video.readyState === 0) {\n          video.load();\n        }\n        video.play().catch(function(){});\n      } else {\n        \/\/ Pause when out of view to save resources\n        video.pause();\n      }\n    });\n  }, { threshold: 0.25 });\n\n  videos.forEach(function(video) {\n    videoObserver.observe(video);\n  });\n})();\n\n\/\/ ===== TESTIMONIALS SLIDER =====\n(function() {\n  var track = document.getElementById('testimonialTrack');\n  var wrapper = document.getElementById('testimonialWrapper');\n  var prevBtn = document.getElementById('prevBtn');\n  var nextBtn = document.getElementById('nextBtn');\n  if (!track || !wrapper) return;\n\n  var cards = track.querySelectorAll('.testimonial-card');\n  if (!cards.length) return;\n\n  var GAP = 24;\n  var currentIndex = 0;\n  var autoPlay;\n\n  function isMobile() { return window.innerWidth <= 768; }\n\n  function getCardWidth() { return cards[0].offsetWidth; }\n\n  function clamp(val, min, max) { return Math.max(min, Math.min(max, val)); }\n\n  function goTo(index) {\n    if (isMobile()) return;\n    var maxIndex = cards.length - 3;\n    currentIndex = clamp(index, 0, maxIndex);\n    var offset = currentIndex * (getCardWidth() + GAP);\n    track.style.transform = 'translateX(-' + offset + 'px)';\n  }\n\n  function next() { goTo(currentIndex + 1); }\n  function prev() { goTo(currentIndex - 1); }\n\n  function startAutoPlay() {\n    clearInterval(autoPlay);\n    autoPlay = setInterval(function() {\n      if (isMobile()) return;\n      var maxIndex = cards.length - 3;\n      if (currentIndex >= maxIndex) { goTo(0); } else { next(); }\n    }, 5000);\n  }\n\n  function resetAutoPlay() { startAutoPlay(); }\n\n  if (nextBtn) nextBtn.addEventListener('click', function() { next(); resetAutoPlay(); });\n  if (prevBtn) prevBtn.addEventListener('click', function() { prev(); resetAutoPlay(); });\n\n  wrapper.addEventListener('mouseenter', function() { clearInterval(autoPlay); });\n  wrapper.addEventListener('mouseleave', startAutoPlay);\n\n  window.addEventListener('resize', function() {\n    if (!isMobile()) {\n      track.style.transform = 'translateX(-' + (currentIndex * (getCardWidth() + GAP)) + 'px)';\n    } else {\n      track.style.transform = '';\n    }\n  });\n\n  goTo(0);\n  startAutoPlay();\n})();\n<\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Home About Us What We Do Portfolio Contact Us Home About Us What We Do Portfolio Contact Us Where Moments [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":12,"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/pages\/37\/revisions\/105"}],"wp:attachment":[{"href":"https:\/\/calmedia.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}