{"id":28,"date":"2026-01-15T16:07:54","date_gmt":"2026-01-15T16:07:54","guid":{"rendered":"https:\/\/olah-agency.com\/?page_id=28"},"modified":"2026-10-15T19:14:53","modified_gmt":"2026-10-15T19:14:53","slug":"accueil","status":"publish","type":"page","link":"https:\/\/olah-agency.com\/fr\/","title":{"rendered":"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"28\" class=\"elementor elementor-28\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8d3ace e-con-full e-flex e-con e-parent\" data-id=\"f8d3ace\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a8b074b elementor-widget elementor-widget-html\" data-id=\"a8b074b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n <head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Olah Agency Navigation<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;700;800;900&family=Manrope:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body { box-sizing: border-box; margin: 0; padding: 0; }\r\n    *, *::before, *::after { box-sizing: inherit; }\r\n    html, body { height: 100%; width: 100%; }\r\n\r\n    \/* \u2500\u2500\u2500 NAVBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-nav-header {\r\n      position: fixed;\r\n      top: 0; left: 0; right: 0;\r\n      width: 100%;\r\n      background: #000000;\r\n      z-index: 9999;\r\n      padding: 20px 40px;\r\n      font-family: 'League Spartan', sans-serif;\r\n    }\r\n\r\n    .olah-nav-container {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      gap: 40px;\r\n      height: 46px;\r\n    }\r\n\r\n    .olah-nav-section {\r\n      display: flex;\r\n      gap: 30px;\r\n      align-items: center;\r\n      flex: 1;\r\n    }\r\n    .olah-nav-section.left { justify-content: flex-start; }\r\n    .olah-nav-section.right { justify-content: flex-end; }\r\n\r\n    .olah-logo-section {\r\n      flex-shrink: 0;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 LOGO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-logo-wrapper {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      cursor: pointer;\r\n      text-decoration: none;\r\n      flex-direction: column;\r\n      gap: 0;\r\n    }\r\n\r\n    \/* OLAH logo image: forced white at rest, true colors on hover *\/\r\n    .olah-logo-wordmark-img {\r\n      height: 34px !important;\r\n      width: auto !important;\r\n      max-width: none !important;\r\n      max-height: 34px !important;\r\n      display: block !important;\r\n      margin: 0 !important;\r\n      align-self: flex-start;\r\n      filter: brightness(0) invert(1);\r\n      transition: filter 300ms ease, transform 350ms cubic-bezier(0.4, 0.0, 0.2, 1);\r\n    }\r\n\r\n    .olah-logo-wrapper:hover .olah-logo-wordmark-img {\r\n      filter: none;\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n    \/* AGENCY logo image reveal row (replaces the old bar + text) *\/\r\n    .olah-logo-agency-row {\r\n      display: flex;\r\n      justify-content: flex-start;\r\n      align-items: center;\r\n      align-self: flex-start;\r\n      max-height: 0;\r\n      opacity: 0;\r\n      overflow: hidden;\r\n      transition:\r\n        max-height 0ms ease 300ms,\r\n        opacity 250ms ease 40ms;\r\n    }\r\n\r\n    .olah-logo-wrapper:hover .olah-logo-agency-row {\r\n      max-height: 24px;\r\n      opacity: 1;\r\n      transition:\r\n        max-height 0ms ease 0ms,\r\n        opacity 250ms ease 40ms;\r\n    }\r\n\r\n    .olah-logo-agency-img {\r\n      height: 9px !important;\r\n      width: auto !important;\r\n      max-width: none !important;\r\n      max-height: 9px !important;\r\n      display: block !important;\r\n      margin: 4px 0 0 0 !important;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 NAV LINKS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-nav-link {\r\n      display: flex;\r\n      align-items: center;\r\n      text-decoration: none;\r\n      color: #ffffff;\r\n      position: relative;\r\n      min-height: 30px;\r\n    }\r\n\r\n    .olah-nav-link-inner {\r\n      overflow: hidden;\r\n      height: 28px;\r\n      position: relative;\r\n    }\r\n\r\n    .olah-nav-text-stack {\r\n      display: flex;\r\n      flex-direction: column;\r\n      transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);\r\n      will-change: transform;\r\n    }\r\n\r\n    .olah-nav-text {\r\n      font-size: 18px;\r\n      font-weight: 700;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.08em;\r\n      line-height: 28px;\r\n      white-space: nowrap;\r\n      height: 28px;\r\n      display: block;\r\n      color: #ffffff;\r\n      transition: color 300ms ease;\r\n    }\r\n\r\n    .olah-nav-text.hover-text { color: #fe6f5e; }\r\n\r\n    .olah-nav-link:hover .olah-nav-text-stack,\r\n    .olah-nav-link:focus .olah-nav-text-stack { transform: translateY(-28px); }\r\n\r\n    .olah-nav-link:hover .olah-nav-text,\r\n    .olah-nav-link:focus .olah-nav-text { color: #fe6f5e; }\r\n\r\n    .olah-nav-link.always-orange .olah-nav-text { color: #fe6f5e; }\r\n\r\n    .olah-nav-link:focus { outline: 2px solid #ffffff; outline-offset: 4px; }\r\n\r\n    \/* \u2500\u2500\u2500 SHIMMER (LET'S TALK + IMPACT) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-nav-link.always-orange .olah-nav-text:not(.hover-text) {\r\n      background: linear-gradient(\r\n        105deg,\r\n        #fe6f5e 0%, #fe6f5e 30%,\r\n        #ffcec7 44%, #ffffff 50%,\r\n        #ffcec7 56%, #fe6f5e 70%, #fe6f5e 100%\r\n      );\r\n      background-size: 250% 100%;\r\n      background-clip: text;\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      color: transparent;\r\n      animation: letstalk-shimmer 3.2s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes letstalk-shimmer {\r\n      0%   { background-position: 150% center; }\r\n      100% { background-position: -50% center; }\r\n    }\r\n\r\n    .olah-nav-link.always-orange:hover .olah-nav-text:not(.hover-text) {\r\n      animation-play-state: paused;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 MOBILE ELEMENTS (cach\u00e9s sur desktop) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-mobile-logo    { display: none; }\r\n    .olah-menu-btn       { display: none; }\r\n    .olah-mobile-spacer  { display: none; }\r\n\r\n    \/* \u2500\u2500\u2500 FIX ELEMENTOR \u2014 reset complet des boutons \u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-close-btn,\r\n    .olah-menu-btn {\r\n      background: none !important;\r\n      background-color: transparent !important;\r\n      background-image: none !important;\r\n      border: none !important;\r\n      border-radius: 0 !important;\r\n      box-shadow: none !important;\r\n      -webkit-appearance: none !important;\r\n      appearance: none !important;\r\n      padding: 0 !important;\r\n      margin: 0 !important;\r\n      outline: none !important;\r\n      text-shadow: none !important;\r\n    }\r\n\r\n    \/* \u2500\u2500\u2500 FULLSCREEN MENU \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    .olah-fullscreen-menu {\r\n      position: fixed;\r\n      inset: 0;\r\n      background: #000000;\r\n      z-index: 99999;\r\n      display: flex;\r\n      flex-direction: column;\r\n      padding: 24px 24px 48px;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      transform: translateY(-10px);\r\n      transition: opacity 350ms ease, transform 350ms ease;\r\n    }\r\n\r\n    .olah-fullscreen-menu.open {\r\n      opacity: 1;\r\n      pointer-events: all;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    .olah-menu-top {\r\n      display: flex;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .olah-close-btn {\r\n      color: #ffffff !important;\r\n      font-family: 'League Spartan', sans-serif !important;\r\n      font-weight: 700 !important;\r\n      font-size: 18px !important;\r\n      letter-spacing: 0.08em !important;\r\n      text-transform: uppercase !important;\r\n      cursor: pointer !important;\r\n      opacity: 0.9;\r\n      transition: opacity 200ms ease;\r\n    }\r\n\r\n    .olah-close-btn:hover { opacity: 1; }\r\n\r\n    .olah-menu-links {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 16px;\r\n      margin-top: auto;\r\n    }\r\n\r\n    .olah-menu-item {\r\n      text-decoration: none;\r\n      font-family: 'League Spartan', sans-serif;\r\n      font-weight: 900;\r\n      font-size: clamp(42px, 10vw, 72px);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.02em;\r\n      color: #fe6f5e;\r\n      line-height: 1;\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n      transition: opacity 300ms ease, transform 300ms ease, color 200ms ease;\r\n    }\r\n\r\n    .olah-menu-item:hover { color: #ffffff; }\r\n\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 260ms; }\r\n    .olah-fullscreen-menu.open .olah-menu-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }\r\n\r\n    \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .olah-nav-text-stack { transition: none; }\r\n      .olah-logo-wordmark-img { transition: none; }\r\n      .olah-nav-link.always-orange .olah-nav-text:not(.hover-text) { animation: none; }\r\n      .olah-menu-btn { animation: none !important; }\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n      .olah-nav-container { gap: 20px; }\r\n      .olah-nav-section { gap: 20px; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .olah-nav-section.left,\r\n      .olah-nav-section.right,\r\n      .olah-logo-section { display: none; }\r\n\r\n      .olah-nav-header { padding: 16px 24px; }\r\n\r\n      .olah-nav-container {\r\n        display: grid;\r\n        grid-template-columns: 1fr auto 1fr;\r\n        align-items: center;\r\n        gap: 0;\r\n        height: auto;\r\n      }\r\n\r\n      .olah-mobile-spacer {\r\n        display: block;\r\n        justify-self: start;\r\n      }\r\n\r\n      .olah-mobile-logo {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        text-decoration: none;\r\n        justify-self: center;\r\n        flex-direction: column;\r\n        gap: 0;\r\n      }\r\n\r\n      .olah-mobile-logo .olah-logo-wordmark-img {\r\n        height: 20px !important;\r\n        max-height: 20px !important;\r\n      }\r\n\r\n      .olah-mobile-logo .olah-logo-agency-img {\r\n        height: 6px !important;\r\n        max-height: 6px !important;\r\n        margin-top: 3px !important;\r\n      }\r\n\r\n      .olah-menu-btn {\r\n        display: flex !important;\r\n        align-items: center;\r\n        justify-self: end;\r\n        cursor: pointer !important;\r\n        font-family: 'League Spartan', sans-serif !important;\r\n        font-weight: 700 !important;\r\n        font-size: 18px !important;\r\n        letter-spacing: 0.08em !important;\r\n        text-transform: uppercase !important;\r\n        background: linear-gradient(\r\n          105deg,\r\n          #fe6f5e 0%, #fe6f5e 30%,\r\n          #ffcec7 44%, #ffffff 50%,\r\n          #ffcec7 56%, #fe6f5e 70%, #fe6f5e 100%\r\n        ) !important;\r\n        background-size: 250% 100% !important;\r\n        background-clip: text !important;\r\n        -webkit-background-clip: text !important;\r\n        -webkit-text-fill-color: transparent !important;\r\n        animation: letstalk-shimmer 3.2s ease-in-out infinite !important;\r\n      }\r\n\r\n      .olah-menu-btn:hover { animation-play-state: paused !important; }\r\n    }\r\n  <\/style>\r\n <\/head>\r\n <body>\r\n\r\n  <!-- \u2500\u2500\u2500 NAVBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <header class=\"olah-nav-header\">\r\n   <nav class=\"olah-nav-container\">\r\n\r\n    <!-- Desktop gauche : WORKS \u2014 ABOUT \u2014 JOURNAL -->\r\n    <div class=\"olah-nav-section left\">\r\n      <a href=\"https:\/\/olah-agency.com\/works\/\" class=\"olah-nav-link\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">WORKS<\/span>\r\n            <span class=\"olah-nav-text hover-text\">WORKS<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/about\/\" class=\"olah-nav-link\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">ABOUT<\/span>\r\n            <span class=\"olah-nav-text hover-text\">ABOUT<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/journal-logbook-guestbook\/\" class=\"olah-nav-link\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">JOURNAL<\/span>\r\n            <span class=\"olah-nav-text hover-text\">JOURNAL<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Logo desktop centr\u00e9 \u2014 image OLAH forc\u00e9e en blanc, AGENCY en reveal au survol -->\r\n    <div class=\"olah-logo-section\">\r\n      <a href=\"https:\/\/olah-agency.com\/\" class=\"olah-logo-wrapper\" id=\"olahLogoWrapper\" aria-label=\"Olah Agency \u2014 Home\">\r\n        <img decoding=\"async\" class=\"olah-logo-wordmark-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/OLAH-scaled.png\" alt=\"OLAH\" width=\"120\" height=\"34\">\r\n        <div class=\"olah-logo-agency-row\">\r\n          <img decoding=\"async\" class=\"olah-logo-agency-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/AGENCY-scaled.png\" alt=\"AGENCY\" width=\"80\" height=\"12\">\r\n        <\/div>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Desktop droite : IMPACT \u2014 LET'S TALK -->\r\n    <div class=\"olah-nav-section right\">\r\n      <a href=\"https:\/\/olah-agency.com\/impact\/\" class=\"olah-nav-link always-orange\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">IMPACT<\/span>\r\n            <span class=\"olah-nav-text hover-text\">IMPACT<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" class=\"olah-nav-link always-orange\">\r\n        <div class=\"olah-nav-link-inner\">\r\n          <div class=\"olah-nav-text-stack\">\r\n            <span class=\"olah-nav-text\">LET'S TALK<\/span>\r\n            <span class=\"olah-nav-text hover-text\">LET'S TALK<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Spacer invisible mobile (colonne gauche) -->\r\n    <div class=\"olah-mobile-spacer\" aria-hidden=\"true\"><\/div>\r\n\r\n    <!-- Logo mobile centr\u00e9 \u2014 m\u00eame structure image -->\r\n    <a href=\"https:\/\/olah-agency.com\/\" class=\"olah-mobile-logo olah-logo-wrapper\" id=\"olahMobileLogo\" aria-label=\"Olah Agency \u2014 Home\">\r\n      <img decoding=\"async\" class=\"olah-logo-wordmark-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/OLAH-scaled.png\" alt=\"OLAH\" width=\"120\" height=\"34\">\r\n      <div class=\"olah-logo-agency-row\">\r\n        <img decoding=\"async\" class=\"olah-logo-agency-img\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/AGENCY-scaled.png\" alt=\"AGENCY\" width=\"80\" height=\"12\">\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <!-- Bouton MENU mobile (colonne droite) -->\r\n    <button class=\"olah-menu-btn\" id=\"menuBtn\" aria-label=\"Ouvrir le menu\" aria-expanded=\"false\" aria-controls=\"fullMenu\">\r\n      MENU\r\n    <\/button>\r\n\r\n   <\/nav>\r\n  <\/header>\r\n\r\n  <!-- \u2500\u2500\u2500 MENU PLEIN \u00c9CRAN MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"olah-fullscreen-menu\" id=\"fullMenu\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Menu de navigation\">\r\n    <div class=\"olah-menu-top\">\r\n      <button class=\"olah-close-btn\" id=\"closeBtn\" aria-label=\"Fermer le menu\">CLOSE<\/button>\r\n    <\/div>\r\n    <nav class=\"olah-menu-links\">\r\n      <a href=\"https:\/\/olah-agency.com\/works\/\" class=\"olah-menu-item\">WORKS<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/about\/\" class=\"olah-menu-item\">ABOUT<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/journal-logbook-guestbook\/\" class=\"olah-menu-item\">JOURNAL<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/impact\/\" class=\"olah-menu-item\">IMPACT<\/a>\r\n      <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" class=\"olah-menu-item\">LET'S TALK<\/a>\r\n    <\/nav>\r\n  <\/div>\r\n\r\n  <script>\r\n    \/* \u2500\u2500\u2500 MENU MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n    const menu     = document.getElementById('fullMenu');\r\n    const menuBtn  = document.getElementById('menuBtn');\r\n    const closeBtn = document.getElementById('closeBtn');\r\n\r\n    function openMenu() {\r\n      menu.classList.add('open');\r\n      menuBtn.setAttribute('aria-expanded', 'true');\r\n      document.body.style.overflow = 'hidden';\r\n      closeBtn.focus();\r\n    }\r\n\r\n    function closeMenu() {\r\n      menu.classList.remove('open');\r\n      menuBtn.setAttribute('aria-expanded', 'false');\r\n      document.body.style.overflow = '';\r\n      menuBtn.focus();\r\n    }\r\n\r\n    menuBtn.addEventListener('click', openMenu);\r\n    closeBtn.addEventListener('click', closeMenu);\r\n    document.addEventListener('keydown', e => {\r\n      if (e.key === 'Escape' && menu.classList.contains('open')) closeMenu();\r\n    });\r\n  <\/script>\r\n\r\n <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-01b3985 e-con-full e-flex e-con e-parent\" data-id=\"01b3985\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93c8e1b elementor-widget elementor-widget-html\" data-id=\"93c8e1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\n<html lang=\"en\" class=\"h-full\">\n <head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>OLAH AGENCY<\/title>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Be+Vietnam+Pro:wght@400;600&family=Manrope:wght@300;400&display=swap\" rel=\"stylesheet\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { height: 100%; background-color: #000000; }\n\n    .hero-container {\n      position: relative;\n      width: 100%;\n      min-height: 60vh;\n      background-color: #000000;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 4rem 3rem 1.5rem;\n      overflow: hidden;\n    }\n\n    .hero-inner {\n      width: 100%;\n      max-width: 1200px;\n    }\n\n    .hero-title-wrap {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    \/* \u2500\u2500\u2500 Stroke \u2192 Fill animation \u2500\u2500\u2500 *\/\n    .hero-title {\n      font-family: 'Be Vietnam Pro', sans-serif;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      line-height: 1.1;\n      text-align: center;\n      font-size: clamp(2.5rem, 11vw, 9rem);\n      display: block;\n      width: 100%;\n      padding-bottom: 0.12em;\n      color: transparent;\n      -webkit-text-stroke: 2px #fe6f5e;\n      background: linear-gradient(90deg, #fe6f5e 50%, transparent 50%);\n      background-size: 200% 100%;\n      background-position: 100%;\n      -webkit-background-clip: text;\n      background-clip: text;\n      opacity: 0;\n      animation:\n        fadeIn      600ms ease                        300ms forwards,\n        stroke-fill 2.6s  cubic-bezier(0.77, 0, 0.18, 1) 900ms infinite alternate;\n    }\n\n    @keyframes fadeIn {\n      to { opacity: 1; }\n    }\n\n    @keyframes stroke-fill {\n      0% {\n        background-position: 100%;\n        color: transparent;\n        -webkit-text-stroke: 2px #fe6f5e;\n      }\n      65%, 100% {\n        background-position: 0%;\n        color: #fe6f5e;\n        -webkit-text-stroke: 0px transparent;\n      }\n    }\n\n    \/* \u2500\u2500\u2500 Taglines \u2500\u2500\u2500 *\/\n    .tagline-row {\n      margin-top: 2.5rem;\n      display: flex;\n      justify-content: center;\n      gap: 16rem;\n      align-items: flex-start;\n      width: 100%;\n    }\n\n    .tagline-col {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 0.25rem;\n      opacity: 0;\n      transform: translateY(80px);\n    }\n\n    .tagline-col.left {\n      animation: slideUpFade 900ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms forwards;\n    }\n\n    .tagline-col.right {\n      animation: slideUpFade 900ms cubic-bezier(0.16, 1, 0.3, 1) 1650ms forwards;\n    }\n\n    .tagline-text {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 400;\n      color: #888;\n      text-transform: uppercase;\n      letter-spacing: 0.18em;\n      font-size: clamp(0.75rem, 1.2vw, 1rem);\n      line-height: 1.6;\n    }\n\n    @keyframes slideUpFade {\n      from { opacity: 0; transform: translateY(80px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .hero-title { animation: none; opacity: 1; color: #fe6f5e; -webkit-text-stroke: 0; background-position: 0%; }\n      .tagline-col { animation: none; opacity: 1; transform: none; }\n    }\n\n    @media (max-width: 640px) {\n      .tagline-row {\n        gap: 0;\n        flex-direction: column;\n        align-items: center;\n        margin-top: 1.5rem;\n      }\n      .tagline-col.right { display: none; }\n    }\n  <\/style>\n <\/head>\n <body class=\"bg-black\">\n  <section class=\"hero-container\">\n   <div class=\"hero-inner\">\n\n    <div class=\"hero-title-wrap\">\n      <h1 class=\"hero-title\">Olah Agency<\/h1>\n    <\/div>\n\n    <div class=\"tagline-row\">\n      <div class=\"tagline-col left\">\n        <p class=\"tagline-text\">Creative &amp; Digital Agency<\/p>\n        <p class=\"tagline-text\">Based in Belgium<\/p>\n      <\/div>\n      <div class=\"tagline-col right\">\n        <p class=\"tagline-text\">We Build What Makes You Grow<\/p>\n        <p class=\"tagline-text\">Working Worldwide<\/p>\n      <\/div>\n    <\/div>\n\n   <\/div>\n  <\/section>\n <\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8464c14 e-con-full e-flex e-con e-parent\" data-id=\"8464c14\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf9a9d7 elementor-widget elementor-widget-html\" data-id=\"cf9a9d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>OLAH Agency \u2014 Selected Projects<\/title>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@700;900&family=Manrope:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    :root {\r\n      --black:        #000000;\r\n      --card-bg:      #080808;\r\n      --accent:       #fe6f5e;\r\n      --text-primary: #f5f5f5;\r\n      --text-muted:   #bdbdbd;\r\n      --border:       rgba(255,255,255,0.08);\r\n      --border-hover: rgba(254,111,94,0.6);\r\n    }\r\n\r\n    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n    html, body {\r\n      background: var(--black);\r\n      color: var(--text-primary);\r\n      font-family: 'Manrope', sans-serif;\r\n      -webkit-font-smoothing: antialiased;\r\n      overflow-x: hidden;\r\n    }\r\n\r\n    .projects-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 16px;\r\n      padding: 48px 48px 80px;\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      .projects-grid { grid-template-columns: repeat(3, 1fr); }\r\n    }\r\n    @media (max-width: 860px) {\r\n      .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 24px 24px 60px; }\r\n    }\r\n\r\n    @media (max-width: 520px) {\r\n      .projects-grid { display: none; }\r\n\r\n      .carousel-wrapper {\r\n        display: block;\r\n        position: relative;\r\n        overflow: hidden;\r\n        padding: 32px 0 56px;\r\n      }\r\n\r\n      .carousel-track {\r\n        display: flex;\r\n        gap: 14px;\r\n        will-change: transform;\r\n      }\r\n    }\r\n\r\n    @media (min-width: 521px) {\r\n      .carousel-wrapper { display: none; }\r\n    }\r\n\r\n    .project-card {\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n      text-decoration: none;\r\n      color: inherit;\r\n      border: 1px solid var(--border);\r\n      border-radius: 3px;\r\n      background: var(--card-bg);\r\n      overflow: hidden;\r\n      cursor: pointer;\r\n      transition: border-color 0.35s ease;\r\n    }\r\n\r\n    .projects-grid .project-card {\r\n      opacity: 0;\r\n      transform: translateY(80px);\r\n      animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n    }\r\n\r\n    .projects-grid .project-card:hover { border-color: var(--accent); }\r\n\r\n    .projects-grid .project-card:nth-child(1) { animation-delay: 0ms; }\r\n    .projects-grid .project-card:nth-child(2) { animation-delay: 150ms; }\r\n    .projects-grid .project-card:nth-child(3) { animation-delay: 300ms; }\r\n    .projects-grid .project-card:nth-child(4) { animation-delay: 450ms; }\r\n    .projects-grid .project-card:nth-child(5) { animation-delay: 600ms; }\r\n    .projects-grid .project-card:nth-child(6) { animation-delay: 750ms; }\r\n    .projects-grid .project-card:nth-child(7) { animation-delay: 900ms; }\r\n    .projects-grid .project-card:nth-child(8) { animation-delay: 1050ms; }\r\n\r\n    .carousel-track .project-card {\r\n      flex: 0 0 72vw;\r\n      width: 72vw;\r\n      max-width: 320px;\r\n      transition: border-color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;\r\n      opacity: 0.45;\r\n      transform: scale(0.95);\r\n    }\r\n\r\n    .carousel-track .project-card.is-active {\r\n      opacity: 1;\r\n      transform: scale(1);\r\n      border-color: var(--accent);\r\n    }\r\n\r\n    @keyframes cardReveal {\r\n      to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .video-wrap {\r\n      position: relative;\r\n      width: 100%;\r\n      aspect-ratio: 9 \/ 16;\r\n      overflow: hidden;\r\n      background: #111;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .video-wrap video,\r\n    .video-wrap img {\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      display: block;\r\n      transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);\r\n    }\r\n\r\n    .projects-grid .project-card:hover .video-wrap video,\r\n    .projects-grid .project-card:hover .video-wrap img { transform: scale(1.04); }\r\n\r\n    .card-info {\r\n      position: relative;\r\n      padding: 16px 18px 18px;\r\n      border-top: 1px solid var(--border);\r\n      background: var(--card-bg);\r\n      display: flex;\r\n      align-items: baseline;\r\n      justify-content: space-between;\r\n      gap: 12px;\r\n      transition: background 0.35s ease, border-color 0.35s ease;\r\n    }\r\n\r\n    .projects-grid .project-card:hover .card-info {\r\n      background: var(--accent);\r\n      border-color: var(--accent);\r\n    }\r\n\r\n    .carousel-track .project-card.is-active .card-info {\r\n      background: var(--accent);\r\n      border-color: var(--accent);\r\n    }\r\n\r\n    .card-name {\r\n      font-family: 'League Spartan', sans-serif;\r\n      font-weight: 700;\r\n      font-size: 13px;\r\n      letter-spacing: 0.12em;\r\n      text-transform: uppercase;\r\n      color: var(--text-primary);\r\n      transition: color 0.35s ease;\r\n    }\r\n\r\n    .projects-grid .project-card:hover .card-name { color: #000; }\r\n    .carousel-track .project-card.is-active .card-name { color: #000; }\r\n\r\n    .card-category {\r\n      font-family: 'Manrope', sans-serif;\r\n      font-weight: 300;\r\n      font-size: 10px;\r\n      letter-spacing: 0.18em;\r\n      text-transform: uppercase;\r\n      color: var(--text-muted);\r\n      transition: color 0.35s ease;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .projects-grid .project-card:hover .card-category { color: rgba(0,0,0,0.5); }\r\n    .carousel-track .project-card.is-active .card-category { color: rgba(0,0,0,0.5); }\r\n\r\n    .card-category[data-cycle] {\r\n      display: inline-block;\r\n      transition: opacity 0.3s ease, transform 0.3s ease, color 0.35s ease;\r\n    }\r\n    .card-category[data-cycle].is-swapping {\r\n      opacity: 0;\r\n      transform: translateY(6px);\r\n    }\r\n\r\n    .card-index {\r\n      position: absolute;\r\n      top: 12px;\r\n      left: 14px;\r\n      z-index: 2;\r\n      font-family: 'Manrope', sans-serif;\r\n      font-size: 10px;\r\n      font-weight: 400;\r\n      letter-spacing: 0.1em;\r\n      color: rgba(255,255,255,0.2);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .project-card:focus-visible {\r\n      outline: 2px solid var(--accent);\r\n      outline-offset: 2px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- \u2500\u2500\u2500 DESKTOP GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <section class=\"projects-grid\" aria-label=\"Selected projects\">\r\n\r\n    <a href=\"#\" class=\"project-card\" aria-label=\"View 1480 \u2014 Web &amp; SEO\">\r\n      <span class=\"card-index\">01<\/span>\r\n      <div class=\"video-wrap\">\r\n        <video autoplay muted loop playsinline preload=\"metadata\">\r\n        <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/copy_A740F26E-C79B-478C-A524-FBC9844D58BE.mov\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">1480<\/span>\r\n        <span class=\"card-category\">Visual Production<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"project-card\" aria-label=\"View Intercontinental \u2014 Social Media\">\r\n      <span class=\"card-index\">02<\/span>\r\n      <div class=\"video-wrap\">\r\n        <video autoplay muted loop playsinline preload=\"metadata\">\r\n        <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/03\/copy_C78F0EFE-A46F-4D5A-8FC3-52C4D67C22AD.mov\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">Intercontinental<\/span>\r\n        <span class=\"card-category\">Visual Production<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"project-card\" aria-label=\"View Protection Unit \u2014 Visual Production\">\r\n      <span class=\"card-index\">03<\/span>\r\n      <div class=\"video-wrap\">\r\n        <video autoplay muted loop playsinline preload=\"metadata\">\r\n        <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/Mehdi-x-suricate-Vertical-V10.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">Protection Unit<\/span>\r\n        <span class=\"card-category\">Visual Production<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"project-card\" aria-label=\"View Atomium \u2014 Video Production\">\r\n      <span class=\"card-index\">04<\/span>\r\n      <div class=\"video-wrap\">\r\n        <video autoplay muted loop playsinline preload=\"metadata\">\r\n        <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/Teaser-Atomium.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">Atomium<\/span>\r\n        <span class=\"card-category\">Video Production<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/olah-agency.com\/msc-cruises\/\" class=\"project-card\" aria-label=\"View MSC Cruises \u2014 Photo Event\">\r\n      <span class=\"card-index\">05<\/span>\r\n      <div class=\"video-wrap\">\r\n        <img decoding=\"async\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/270926_MSC_Cruises_037.jpg\" alt=\"MSC Cruises \u2014 Photo Event\" loading=\"lazy\">\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">MSC Cruises<\/span>\r\n        <span class=\"card-category\">Photo Event<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"project-card\" aria-label=\"View Gabylou \u2014 Video Production\">\r\n      <span class=\"card-index\">06<\/span>\r\n      <div class=\"video-wrap\">\r\n        <video autoplay muted loop playsinline preload=\"metadata\">\r\n        <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/Teaser-SS25-Gabylou-n\u00b01.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">Gabylou<\/span>\r\n        <span class=\"card-category\">Video Production<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/olah-agency.com\/mercedes-benz-monnier\/\" class=\"project-card\" aria-label=\"View Mercedes-Benz \u2014 Photo\">\r\n      <span class=\"card-index\">07<\/span>\r\n      <div class=\"video-wrap\">\r\n        <img decoding=\"async\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/DSC00449.jpg\" alt=\"Mercedes-Benz \u2014 Photo\" loading=\"lazy\">\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">Mercedes-Benz<\/span>\r\n        <span class=\"card-category\">Photo<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"project-card\" aria-label=\"View RAS Santoise \u2014 Visual Production\">\r\n      <span class=\"card-index\">08<\/span>\r\n      <div class=\"video-wrap\">\r\n        <video autoplay muted loop playsinline preload=\"metadata\">\r\n        <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/23E7931B-B1C1-47EE-A2E4-DEAD08D08601.mov\" type=\"video\/mp4\">\r\n      <\/video>\r\n      <\/div>\r\n      <div class=\"card-info\">\r\n        <span class=\"card-name\">RAS Santoise<\/span>\r\n        <span class=\"card-category\" data-cycle=\"Visual Production|Social Media|Web &amp; SEO|Photo Event\">Visual Production<\/span>\r\n      <\/div>\r\n    <\/a>\r\n\r\n  <\/section>\r\n\r\n  <!-- \u2500\u2500\u2500 MOBILE CAROUSEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"carousel-wrapper\" aria-label=\"Selected projects carousel\" role=\"region\">\r\n    <div class=\"carousel-track\" id=\"carouselTrack\">\r\n\r\n      <a href=\"#\" class=\"project-card\" aria-label=\"View 1480 \u2014 Web &amp; SEO\">\r\n        <span class=\"card-index\">01<\/span>\r\n        <div class=\"video-wrap\">\r\n          <video muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/copy_A740F26E-C79B-478C-A524-FBC9844D58BE.mov\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">1480<\/span>\r\n          <span class=\"card-category\">Visual Production<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"project-card\" aria-label=\"View Intercontinental \u2014 Social Media\">\r\n        <span class=\"card-index\">02<\/span>\r\n        <div class=\"video-wrap\">\r\n          <video muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/03\/copy_C78F0EFE-A46F-4D5A-8FC3-52C4D67C22AD.mov\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">Intercontinental<\/span>\r\n          <span class=\"card-category\">Visual Production<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"project-card\" aria-label=\"View Protection Unit \u2014 Visual Production\">\r\n        <span class=\"card-index\">03<\/span>\r\n        <div class=\"video-wrap\">\r\n          <video muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/06\/Mehdi-x-suricate-Vertical-V10.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">Protection Unit<\/span>\r\n          <span class=\"card-category\">Visual Production<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"project-card\" aria-label=\"View Atomium \u2014 Video Production\">\r\n        <span class=\"card-index\">04<\/span>\r\n        <div class=\"video-wrap\">\r\n          <video muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/Teaser-Atomium.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">Atomium<\/span>\r\n          <span class=\"card-category\">Video Production<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/olah-agency.com\/msc-cruises\/\" class=\"project-card\" aria-label=\"View MSC Cruises \u2014 Photo Event\">\r\n        <span class=\"card-index\">05<\/span>\r\n        <div class=\"video-wrap\">\r\n          <img decoding=\"async\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/270926_MSC_Cruises_037.jpg\" alt=\"MSC Cruises \u2014 Photo Event\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">MSC Cruises<\/span>\r\n          <span class=\"card-category\">Photo Event<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"project-card\" aria-label=\"View Gabylou \u2014 Video Production\">\r\n        <span class=\"card-index\">06<\/span>\r\n        <div class=\"video-wrap\">\r\n          <video muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/Teaser-SS25-Gabylou-n\u00b01.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">Gabylou<\/span>\r\n          <span class=\"card-category\">Video Production<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/olah-agency.com\/mercedes-benz-monnier\/\" class=\"project-card\" aria-label=\"View Mercedes-Benz \u2014 Photo\">\r\n        <span class=\"card-index\">07<\/span>\r\n        <div class=\"video-wrap\">\r\n          <img decoding=\"async\" src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/10\/DSC00449.jpg\" alt=\"Mercedes-Benz \u2014 Photo\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">Mercedes-Benz<\/span>\r\n          <span class=\"card-category\">Photo<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"#\" class=\"project-card\" aria-label=\"View RAS Santoise \u2014 Visual Production\">\r\n        <span class=\"card-index\">08<\/span>\r\n        <div class=\"video-wrap\">\r\n          <video muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/02\/23E7931B-B1C1-47EE-A2E4-DEAD08D08601.mov\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <\/div>\r\n        <div class=\"card-info\">\r\n          <span class=\"card-name\">RAS Santoise<\/span>\r\n          <span class=\"card-category\" data-cycle=\"Visual Production|Social Media|Web &amp; SEO|Photo Event\">Visual Production<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <script>\r\n    \/* \u2500\u2500 Desktop: autoplay all videos \u2500\u2500 *\/\r\n    document.querySelectorAll('.projects-grid video').forEach(v => {\r\n      v.muted = true;\r\n      v.play().catch(() => {});\r\n    });\r\n\r\n    document.querySelectorAll('.projects-grid .project-card').forEach(card => {\r\n      const video = card.querySelector('video');\r\n      if (!video) return;\r\n      card.addEventListener('mouseenter', () => video.play().catch(() => {}));\r\n    });\r\n\r\n    \/* \u2500\u2500 Rotating category label \u2500\u2500 *\/\r\n    (function () {\r\n      const els = document.querySelectorAll('.card-category[data-cycle]');\r\n      if (!els.length) return;\r\n      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\r\n      els.forEach(function (el) {\r\n        const labels = el.dataset.cycle.split('|').map(function (l) {\r\n          const t = document.createElement('textarea');\r\n          t.innerHTML = l;\r\n          return t.value;\r\n        });\r\n        let i = 0;\r\n        setInterval(function () {\r\n          el.classList.add('is-swapping');\r\n          setTimeout(function () {\r\n            i = (i + 1) % labels.length;\r\n            el.textContent = labels[i];\r\n            el.classList.remove('is-swapping');\r\n          }, 300);\r\n        }, 2200);\r\n      });\r\n    })();\r\n\r\n    \/* \u2500\u2500 Mobile Carousel \u2500\u2500 *\/\r\n    (function () {\r\n      const track = document.getElementById('carouselTrack');\r\n      if (!track) return;\r\n\r\n      const GAP      = 14;\r\n      const INTERVAL = 3200;\r\n      const DURATION = 900;\r\n\r\n      const cards = Array.from(track.querySelectorAll('.project-card'));\r\n      const total  = cards.length;\r\n\r\n      let current     = 0;\r\n      let animId      = null;\r\n      let autoTimer   = null;\r\n      let isAnimating = false;\r\n\r\n      let touchStartX = 0;\r\n      let touchDeltaX = 0;\r\n      let isTouching  = false;\r\n      let baseOffset  = 0;\r\n\r\n      function easeOutExpo(t) {\r\n        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);\r\n      }\r\n\r\n      function cardWidth() {\r\n        return cards[0].getBoundingClientRect().width;\r\n      }\r\n\r\n      function centreOffset(index) {\r\n        const cw   = cardWidth();\r\n        const vw   = track.parentElement.getBoundingClientRect().width;\r\n        return (vw - cw) \/ 2 - index * (cw + GAP);\r\n      }\r\n\r\n      function setOffset(x) {\r\n        track.style.transition = 'none';\r\n        track.style.transform  = `translateX(${x}px)`;\r\n      }\r\n\r\n      function animateTo(target, onDone) {\r\n        if (animId) cancelAnimationFrame(animId);\r\n        const start    = performance.now();\r\n        const from     = currentRawOffset();\r\n        isAnimating    = true;\r\n\r\n        function step(now) {\r\n          const elapsed = now - start;\r\n          const t       = Math.min(elapsed \/ DURATION, 1);\r\n          const eased   = easeOutExpo(t);\r\n          track.style.transition = 'none';\r\n          track.style.transform  = `translateX(${from + (target - from) * eased}px)`;\r\n\r\n          if (t < 1) {\r\n            animId = requestAnimationFrame(step);\r\n          } else {\r\n            isAnimating = false;\r\n            if (onDone) onDone();\r\n          }\r\n        }\r\n        animId = requestAnimationFrame(step);\r\n      }\r\n\r\n      function currentRawOffset() {\r\n        const mat = new DOMMatrix(getComputedStyle(track).transform);\r\n        return mat.m41;\r\n      }\r\n\r\n      function updateActive(index) {\r\n        cards.forEach((c, i) => {\r\n          const active = i === index;\r\n          c.classList.toggle('is-active', active);\r\n          const v = c.querySelector('video');\r\n          if (!v) return;\r\n          if (active) v.play().catch(() => {});\r\n          else        v.pause();\r\n        });\r\n      }\r\n\r\n      function goTo(index) {\r\n        if (isAnimating) return;\r\n        current = ((index % total) + total) % total;\r\n        updateActive(current);\r\n        animateTo(centreOffset(current));\r\n      }\r\n\r\n      function startAuto() {\r\n        clearInterval(autoTimer);\r\n        autoTimer = setInterval(() => goTo(current + 1), INTERVAL);\r\n      }\r\n\r\n      function stopAuto() { clearInterval(autoTimer); }\r\n\r\n      track.addEventListener('touchstart', e => {\r\n        isTouching  = true;\r\n        touchStartX = e.touches[0].clientX;\r\n        touchDeltaX = 0;\r\n        baseOffset  = currentRawOffset();\r\n        stopAuto();\r\n        if (animId) cancelAnimationFrame(animId);\r\n        isAnimating = false;\r\n      }, { passive: true });\r\n\r\n      track.addEventListener('touchmove', e => {\r\n        if (!isTouching) return;\r\n        touchDeltaX = e.touches[0].clientX - touchStartX;\r\n        setOffset(baseOffset + touchDeltaX);\r\n      }, { passive: true });\r\n\r\n      track.addEventListener('touchend', () => {\r\n        isTouching = false;\r\n        const threshold = cardWidth() * 0.25;\r\n        if (Math.abs(touchDeltaX) > threshold) {\r\n          goTo(touchDeltaX < 0 ? current + 1 : current - 1);\r\n        } else {\r\n          animateTo(centreOffset(current));\r\n        }\r\n        startAuto();\r\n      });\r\n\r\n      window.addEventListener('resize', () => {\r\n        setOffset(centreOffset(current));\r\n      });\r\n\r\n      function init() {\r\n        setOffset(centreOffset(0));\r\n        updateActive(0);\r\n        startAuto();\r\n      }\r\n\r\n      const mq = window.matchMedia('(max-width: 520px)');\r\n      if (mq.matches) init();\r\n      mq.addEventListener('change', e => {\r\n        if (e.matches) init();\r\n        else { stopAuto(); if (animId) cancelAnimationFrame(animId); }\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-04cd6e6 e-flex e-con-boxed e-con e-parent\" data-id=\"04cd6e6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c01cf5c elementor-widget elementor-widget-html\" data-id=\"c01cf5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>OLAH AGENCY \u2014 Services<\/title>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@700;800;900&family=Manrope:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\n\n  <style>\n    *, *::before, *::after {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    :root {\n      --bg:        #000000;\n      --text:      #f5f5f5;\n      --secondary: #bdbdbd;\n      --muted:     #8f8f8f;\n      --accent:    #fe6f5e;\n      --sep:       rgba(255,255,255,0.08);\n      --ease:      cubic-bezier(0.25,0.46,0.45,0.94);\n      --dur:       380ms;\n    }\n\n    html { font-size: 16px; }\n\n    body {\n      background: var(--bg);\n      color: var(--text);\n      font-family: 'Manrope', sans-serif;\n      font-weight: 400;\n      -webkit-font-smoothing: antialiased;\n    }\n\n    .services-section {\n      max-width: 1280px;\n      margin: 0 auto;\n      padding: 120px 48px;\n    }\n\n    .services-header {\n      margin-bottom: 80px;\n    }\n\n    .services-eyebrow {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 500;\n      font-size: 0.6875rem;\n      letter-spacing: 0.22em;\n      text-transform: uppercase;\n      color: var(--accent);\n      margin-bottom: 20px;\n    }\n\n    .services-title {\n      font-family: 'League Spartan', sans-serif;\n      font-weight: 800;\n      font-size: clamp(2.5rem, 6vw, 5rem);\n      letter-spacing: -0.02em;\n      text-transform: uppercase;\n      color: var(--text);\n      line-height: 1;\n    }\n\n    .services-body {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0 80px;\n      align-items: start;\n    }\n\n    .services-list {\n      list-style: none;\n    }\n\n    .services-list__item {\n      position: relative;\n      border-top: 1px solid var(--sep);\n      cursor: pointer;\n      background: transparent !important;\n      background-color: transparent !important;\n      background-image: none !important;\n      box-shadow: none !important;\n    }\n\n    .services-list__item:last-child {\n      border-bottom: 1px solid var(--sep);\n    }\n\n    .services-list__item,\n    .services-list__item:link,\n    .services-list__item:visited,\n    .services-list__item:hover,\n    .services-list__item:focus,\n    .services-list__item:focus-within,\n    .services-list__item:active,\n    .services-list__item.is-active,\n    .services-list__item.elementor-repeater-item-active,\n    .services-list__btn,\n    .services-list__btn:link,\n    .services-list__btn:visited,\n    .services-list__btn:hover,\n    .services-list__btn:focus,\n    .services-list__btn:focus-within,\n    .services-list__btn:active {\n      background: transparent !important;\n      background-color: transparent !important;\n      background-image: none !important;\n      box-shadow: none !important;\n      -webkit-tap-highlight-color: transparent !important;\n    }\n\n    [class*=\"services-list__item\"],\n    [class*=\"services-list__btn\"] {\n      background: transparent !important;\n      background-color: transparent !important;\n    }\n\n    .services-list__item::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 2px;\n      height: 0;\n      background: var(--accent);\n      transition: height var(--dur) var(--ease);\n    }\n\n    .services-list__item.is-active::before {\n      height: 60%;\n    }\n\n    .services-list__btn {\n      all: unset;\n      display: block;\n      width: 100%;\n      text-align: left;\n      padding: 28px 0 28px 20px;\n      cursor: pointer;\n      outline: none;\n      position: relative;\n      background: transparent !important;\n      background-color: transparent !important;\n      background-image: none !important;\n      overflow: visible !important;\n    }\n\n    .services-list__btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: -2px;\n    }\n\n    .services-list__label-wrap {\n      overflow: hidden;\n      position: relative;\n    }\n\n    .services-list__label-inner {\n      display: flex;\n      flex-direction: column;\n      transition: transform var(--dur) var(--ease);\n      will-change: transform;\n    }\n\n    .services-list__name-row {\n      display: flex;\n      align-items: center;\n      gap: 0;\n    }\n\n    .services-list__name {\n      font-family: 'League Spartan', sans-serif;\n      font-weight: 800;\n      font-size: clamp(1.35rem, 2.5vw, 1.75rem);\n      text-transform: uppercase;\n      letter-spacing: -0.01em;\n      line-height: 1.3;\n      color: var(--muted);\n      transition: color var(--dur) var(--ease);\n      display: block;\n      white-space: nowrap;\n    }\n\n    \/* \u2500\u2500\u2500 MODIF : le doublon anim\u00e9 est orange \u2500\u2500\u2500 *\/\n    .services-list__name-dup {\n      font-family: 'League Spartan', sans-serif;\n      font-weight: 800;\n      font-size: clamp(1.35rem, 2.5vw, 1.75rem);\n      text-transform: uppercase;\n      letter-spacing: -0.01em;\n      line-height: 1.3;\n      color: var(--accent); \/* \u00e9tait var(--text) *\/\n      display: block;\n      white-space: nowrap;\n    }\n\n    .services-list__badge {\n      display: inline-block;\n      font-family: 'Manrope', sans-serif;\n      font-weight: 500;\n      font-size: 0.5625rem;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n      color: var(--accent) !important;\n      border: 1px solid var(--accent) !important;\n      background: transparent !important;\n      padding: 2px 7px;\n      opacity: 0.75;\n      position: absolute;\n      left: var(--badge-left, 300px);\n      top: 28px;\n      transform: translateY(0);\n      line-height: 1.3;\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    \/* \u2500\u2500\u2500 MODIF : titre actif en orange \u2500\u2500\u2500 *\/\n    .services-list__item.is-active .services-list__name {\n      color: var(--accent); \/* \u00e9tait var(--text) *\/\n    }\n\n    .services-list__item.is-active .services-list__label-inner {\n      transform: translateY(-50%);\n    }\n\n    .services-list__meta {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-top: 4px;\n    }\n\n    .services-list__num {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 300;\n      font-size: 0.6875rem;\n      letter-spacing: 0.1em;\n      color: var(--muted);\n      transition: color var(--dur) var(--ease);\n    }\n\n    .services-list__desc-inline {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 300;\n      font-size: 0.8125rem;\n      color: var(--muted);\n      transition: color var(--dur) var(--ease);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .services-list__item.is-active .services-list__num,\n    .services-list__item.is-active .services-list__desc-inline {\n      color: var(--secondary);\n    }\n\n    \/* \u2500\u2500\u2500 Progress bar \u2500\u2500 *\/\n    .services-list__progress {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 0%;\n      height: 1px;\n      background: var(--accent);\n      opacity: 0;\n      transition: none;\n    }\n\n    .services-list__item.is-active .services-list__progress {\n      opacity: 1;\n    }\n\n    .services-list__item.is-active .services-list__progress.animating {\n      transition: width linear;\n    }\n\n    \/* \u2500\u2500\u2500 Detail panel \u2500\u2500 *\/\n    .services-panel {\n      position: sticky;\n      top: 80px;\n      min-height: 300px;\n    }\n\n    .services-panel__pane {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      transform: translateY(12px);\n      transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    .services-panel__pane.is-visible {\n      opacity: 1;\n      transform: translateY(0);\n      pointer-events: auto;\n      visibility: visible;\n    }\n\n    .services-panel__index {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 300;\n      font-size: 0.6875rem;\n      letter-spacing: 0.22em;\n      text-transform: uppercase;\n      color: var(--accent);\n      margin-bottom: 32px;\n    }\n\n    .services-panel__name {\n      font-family: 'League Spartan', sans-serif;\n      font-weight: 900;\n      font-size: clamp(2rem, 4vw, 3.25rem);\n      text-transform: uppercase;\n      letter-spacing: -0.02em;\n      color: var(--text);\n      line-height: 1;\n      margin-bottom: 20px;\n    }\n\n    .services-panel__badge {\n      display: inline-block;\n      font-family: 'Manrope', sans-serif;\n      font-weight: 500;\n      font-size: 0.625rem;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n      color: var(--accent);\n      border: 1px solid var(--accent);\n      padding: 3px 10px;\n      vertical-align: middle;\n      margin-left: 14px;\n      opacity: 0.75;\n      position: relative;\n      top: -6px;\n    }\n\n    .services-panel__desc {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 300;\n      font-size: 1rem;\n      color: var(--secondary);\n      line-height: 1.6;\n      margin-bottom: 40px;\n    }\n\n    .services-panel__deliverables-label {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 500;\n      font-size: 0.625rem;\n      letter-spacing: 0.2em;\n      text-transform: uppercase;\n      color: var(--muted);\n      margin-bottom: 16px;\n    }\n\n    .services-panel__deliverables {\n      list-style: none;\n    }\n\n    .services-panel__deliverables li {\n      font-family: 'Manrope', sans-serif;\n      font-weight: 300;\n      font-size: 0.9375rem;\n      color: var(--secondary);\n      padding: 12px 0;\n      border-top: 1px solid var(--sep);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .services-panel__deliverables li::before {\n      content: '';\n      display: inline-block;\n      width: 14px;\n      height: 1px;\n      background: var(--accent);\n      flex-shrink: 0;\n    }\n\n    \/* \u2500\u2500\u2500 Mobile inline detail \u2500\u2500 *\/\n    .services-list__inline-detail {\n      display: none;\n    }\n\n    \/* \u2500\u2500\u2500 CTA \u2500\u2500 *\/\n    .services-cta {\n      margin-top: 120px;\n      padding-top: 64px;\n      border-top: 1px solid var(--sep);\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 40px;\n      flex-wrap: wrap;\n    }\n\n    .services-cta__text {\n      font-family: 'League Spartan', sans-serif;\n      font-weight: 700;\n      font-size: clamp(1.5rem, 3vw, 2.5rem);\n      text-transform: uppercase;\n      letter-spacing: -0.01em;\n      color: var(--text);\n    }\n\n    .services-cta__btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-family: 'Manrope', sans-serif;\n      font-weight: 500;\n      font-size: 0.8125rem;\n      letter-spacing: 0.18em;\n      text-transform: uppercase;\n      text-decoration: none;\n      color: var(--text);\n      border: 1px solid rgba(255,255,255,0.3);\n      padding: 0 36px;\n      height: 52px;\n      min-width: 160px;\n      background: transparent;\n      transition:\n        background var(--dur) var(--ease),\n        color var(--dur) var(--ease),\n        border-color var(--dur) var(--ease);\n      white-space: nowrap;\n    }\n\n    .services-cta__btn:hover,\n    .services-cta__btn:focus-visible {\n      background: var(--accent);\n      color: #000;\n      border-color: var(--accent);\n      outline: none;\n    }\n\n    .services-cta__sub {\n      display: block;\n      font-family: 'Manrope', sans-serif;\n      font-weight: 300;\n      font-size: 0.8125rem;\n      letter-spacing: 0.03em;\n      text-transform: none;\n      color: var(--muted);\n      margin-top: 10px;\n    }\n\n    \/* \u2500\u2500\u2500 Responsive \u2500\u2500 *\/\n    @media (max-width: 860px) {\n      .services-section {\n        padding: 80px 24px;\n      }\n\n      .services-body {\n        grid-template-columns: 1fr;\n        gap: 0;\n      }\n\n      .services-panel {\n        display: none;\n      }\n\n      .services-list__inline-detail {\n        display: block;\n        overflow: hidden;\n        max-height: 0;\n        transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);\n        opacity: 0;\n      }\n\n      .services-list__item.is-active .services-list__inline-detail {\n        max-height: 400px;\n        opacity: 1;\n      }\n\n      .services-list__inline-detail-inner {\n        padding: 0 0 28px 20px;\n      }\n\n      .services-list__inline-name {\n        font-family: 'League Spartan', sans-serif;\n        font-weight: 900;\n        font-size: 1.75rem;\n        text-transform: uppercase;\n        color: var(--text);\n        margin-bottom: 8px;\n      }\n\n      .services-list__inline-desc {\n        font-family: 'Manrope', sans-serif;\n        font-weight: 300;\n        font-size: 0.875rem;\n        color: var(--secondary);\n        margin-bottom: 20px;\n      }\n\n      .services-list__inline-deliverables {\n        list-style: none;\n      }\n\n      .services-list__inline-deliverables li {\n        font-family: 'Manrope', sans-serif;\n        font-weight: 300;\n        font-size: 0.8125rem;\n        color: var(--secondary);\n        padding: 9px 0;\n        border-top: 1px solid var(--sep);\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n\n      .services-list__inline-deliverables li::before {\n        content: '';\n        display: inline-block;\n        width: 10px;\n        height: 1px;\n        background: var(--accent);\n        flex-shrink: 0;\n      }\n\n      .services-cta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 28px;\n      }\n\n      \/* Mobile : badge remis dans le flux *\/\n      .services-list__badge {\n        position: static;\n        transform: none;\n        margin-left: 10px;\n        vertical-align: middle;\n        top: auto;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      *, *::before, *::after {\n        transition-duration: 0.01ms !important;\n        animation-duration: 0.01ms !important;\n      }\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0,0,0,0);\n      white-space: nowrap;\n      border: 0;\n    }\n  <\/style>\n\n  <style id=\"olah-elementor-override\">\n    .elementor-widget-html .services-list__item,\n    .elementor-widget-html .services-list__item:hover,\n    .elementor-widget-html .services-list__item:focus,\n    .elementor-widget-html .services-list__item:active,\n    .elementor-widget-html .services-list__item.is-active,\n    .elementor-widget-html .services-list__btn,\n    .elementor-widget-html .services-list__btn:hover,\n    .elementor-widget-html .services-list__btn:focus,\n    .elementor-widget-html .services-list__btn:active,\n    .elementor-section .services-list__item,\n    .elementor-section .services-list__item:hover,\n    .elementor-section .services-list__btn,\n    .elementor-section .services-list__btn:hover,\n    .e-container .services-list__item,\n    .e-container .services-list__item:hover,\n    .e-container .services-list__btn,\n    .e-container .services-list__btn:hover,\n    .elementor-container .services-list__item,\n    .elementor-container .services-list__item:hover,\n    .elementor-container .services-list__btn,\n    .elementor-container .services-list__btn:hover {\n      background: transparent !important;\n      background-color: transparent !important;\n      background-image: none !important;\n      box-shadow: none !important;\n      color: inherit !important;\n      text-decoration: none !important;\n      border-color: transparent !important;\n    }\n  <\/style>\n<\/head>\n<body>\n\n<section class=\"services-section\" aria-labelledby=\"services-heading\">\n\n  <header class=\"services-header\">\n    <p class=\"services-eyebrow\" aria-hidden=\"true\">What we offer<\/p>\n    <h2 class=\"services-title\" id=\"services-heading\">What we build<\/h2>\n  <\/header>\n\n  <div class=\"services-body\">\n\n    <ul class=\"services-list\" role=\"list\">\n\n      <!-- 01 \u2014 Visual Production -->\n      <li class=\"services-list__item\" data-index=\"0\">\n        <button class=\"services-list__btn\" aria-expanded=\"false\" aria-controls=\"panel-visual\" id=\"btn-visual\">\n          <div class=\"services-list__label-wrap\" aria-hidden=\"true\">\n            <div class=\"services-list__label-inner\">\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name\">Visual Production<\/span>\n              <\/div>\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name-dup\">Visual Production<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"sr-only\">Visual Production<\/span>\n          <div class=\"services-list__meta\">\n            <span class=\"services-list__num\">01<\/span>\n            <span class=\"services-list__desc-inline\">Photography &amp; video storytelling<\/span>\n          <\/div>\n        <\/button>\n        <div class=\"services-list__progress\"><\/div>\n        <div class=\"services-list__inline-detail\" id=\"panel-visual-mobile\" aria-hidden=\"true\">\n          <div class=\"services-list__inline-detail-inner\">\n            <p class=\"services-list__inline-name\">Visual Production<\/p>\n            <p class=\"services-list__inline-desc\">Photography and video crafted to shape how your story is seen.<\/p>\n            <ul class=\"services-list__inline-deliverables\">\n              <li>Editorial &amp; campaign photography<\/li>\n              <li>Brand films &amp; video storytelling<\/li>\n              <li>Product &amp; commercial visuals<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/li>\n\n      <!-- 02 \u2014 Branding -->\n      <li class=\"services-list__item\" data-index=\"1\">\n        <button class=\"services-list__btn\" aria-expanded=\"false\" aria-controls=\"panel-branding\" id=\"btn-branding\">\n          <div class=\"services-list__label-wrap\" aria-hidden=\"true\">\n            <div class=\"services-list__label-inner\">\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name\">Branding<\/span>\n              <\/div>\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name-dup\">Branding<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"sr-only\">Branding<\/span>\n          <div class=\"services-list__meta\">\n            <span class=\"services-list__num\">02<\/span>\n            <span class=\"services-list__desc-inline\">Identity systems designed to last<\/span>\n          <\/div>\n        <\/button>\n        <div class=\"services-list__progress\"><\/div>\n        <div class=\"services-list__inline-detail\" id=\"panel-branding-mobile\" aria-hidden=\"true\">\n          <div class=\"services-list__inline-detail-inner\">\n            <p class=\"services-list__inline-name\">Branding<\/p>\n            <p class=\"services-list__inline-desc\">Identity systems designed to last and evolve.<\/p>\n            <ul class=\"services-list__inline-deliverables\">\n              <li>Visual identity design<\/li>\n              <li>Art direction<\/li>\n              <li>Brand guidelines<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/li>\n\n      <!-- 03 \u2014 Web Design -->\n      <li class=\"services-list__item\" data-index=\"2\">\n        <button class=\"services-list__btn\" aria-expanded=\"false\" aria-controls=\"panel-web\" id=\"btn-web\">\n          <div class=\"services-list__label-wrap\" aria-hidden=\"true\">\n            <div class=\"services-list__label-inner\">\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name\">Web Design<\/span>\n              <\/div>\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name-dup\">Web Design<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"sr-only\">Web Design<\/span>\n          <div class=\"services-list__meta\">\n            <span class=\"services-list__num\">03<\/span>\n            <span class=\"services-list__desc-inline\">Minimal, fast, SEO-ready<\/span>\n          <\/div>\n        <\/button>\n        <div class=\"services-list__progress\"><\/div>\n        <div class=\"services-list__inline-detail\" id=\"panel-web-mobile\" aria-hidden=\"true\">\n          <div class=\"services-list__inline-detail-inner\">\n            <p class=\"services-list__inline-name\">Web Design<\/p>\n            <p class=\"services-list__inline-desc\">Web experiences designed to present brands clearly and effectively.<\/p>\n            <ul class=\"services-list__inline-deliverables\">\n              <li>Website design &amp; development<\/li>\n              <li>UX structure &amp; interface design<\/li>\n              <li>Landing pages &amp; digital presence<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/li>\n\n      <!-- 04 \u2014 Social Media -->\n      <li class=\"services-list__item\" data-index=\"3\">\n        <button class=\"services-list__btn\" aria-expanded=\"false\" aria-controls=\"panel-social\" id=\"btn-social\">\n          <div class=\"services-list__label-wrap\" aria-hidden=\"true\">\n            <div class=\"services-list__label-inner\">\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name\">Social Media<\/span>\n              <\/div>\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name-dup\">Social Media<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"sr-only\">Social Media<\/span>\n          <div class=\"services-list__meta\">\n            <span class=\"services-list__num\">04<\/span>\n            <span class=\"services-list__desc-inline\">Visibility, consistency, formats<\/span>\n          <\/div>\n        <\/button>\n        <div class=\"services-list__progress\"><\/div>\n        <div class=\"services-list__inline-detail\" id=\"panel-social-mobile\" aria-hidden=\"true\">\n          <div class=\"services-list__inline-detail-inner\">\n            <p class=\"services-list__inline-name\">Social Media<\/p>\n            <p class=\"services-list__inline-desc\">Content systems built for visibility and consistency.<\/p>\n            <ul class=\"services-list__inline-deliverables\">\n              <li>Content strategy<\/li>\n              <li>Platform formats<\/li>\n              <li>Visual consistency<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/li>\n\n      <!-- 05 \u2014 E-Commerce -->\n      <li class=\"services-list__item\" data-index=\"4\">\n        <button class=\"services-list__btn\" aria-expanded=\"false\" aria-controls=\"panel-ecommerce\" id=\"btn-ecommerce\">\n          <div class=\"services-list__label-wrap\" aria-hidden=\"true\">\n            <div class=\"services-list__label-inner\">\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name\">E-Commerce<\/span>\n              <\/div>\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name-dup\">E-Commerce<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"sr-only\">E-Commerce<\/span>\n          <div class=\"services-list__meta\">\n            <span class=\"services-list__num\">05<\/span>\n            <span class=\"services-list__desc-inline\">Launch, scale &amp; optimise online sales<\/span>\n          <\/div>\n        <\/button>\n        <div class=\"services-list__progress\"><\/div>\n        <div class=\"services-list__inline-detail\" id=\"panel-ecommerce-mobile\" aria-hidden=\"true\">\n          <div class=\"services-list__inline-detail-inner\">\n            <p class=\"services-list__inline-name\">E-Commerce<\/p>\n            <p class=\"services-list__inline-desc\">Digital commerce systems designed to launch, scale and optimise online sales.<\/p>\n            <ul class=\"services-list__inline-deliverables\">\n              <li>Online store creation &amp; optimisation<\/li>\n              <li>Marketplace integration (Amazon, Bol, etc.)<\/li>\n              <li>Logistics, cost control &amp; strategic consulting<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/li>\n\n      <!-- 06 \u2014 Motion Design -->\n      <li class=\"services-list__item\" data-index=\"5\">\n        <button class=\"services-list__btn\" aria-expanded=\"false\" aria-controls=\"panel-motion\" id=\"btn-motion\">\n          <div class=\"services-list__label-wrap\" aria-hidden=\"true\">\n            <div class=\"services-list__label-inner\">\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name\">Motion Design<\/span>\n              <\/div>\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name-dup\">Motion Design<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"services-list__badge\" aria-hidden=\"true\">Incoming<\/span>\n          <span class=\"sr-only\">Motion Design (Incoming)<\/span>\n          <div class=\"services-list__meta\">\n            <span class=\"services-list__num\">06<\/span>\n            <span class=\"services-list__desc-inline\">Animation with intention<\/span>\n          <\/div>\n        <\/button>\n        <div class=\"services-list__progress\"><\/div>\n        <div class=\"services-list__inline-detail\" id=\"panel-motion-mobile\" aria-hidden=\"true\">\n          <div class=\"services-list__inline-detail-inner\">\n            <p class=\"services-list__inline-name\">Motion Design<\/p>\n            <p class=\"services-list__inline-desc\">Animation that brings movement and rhythm to brands.<\/p>\n            <ul class=\"services-list__inline-deliverables\">\n              <li>Motion identity<\/li>\n              <li>Social media animations<\/li>\n              <li>Visual transitions<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/li>\n\n      <!-- 07 \u2014 Consulting -->\n      <li class=\"services-list__item\" data-index=\"6\">\n        <button class=\"services-list__btn\" aria-expanded=\"false\" aria-controls=\"panel-consulting\" id=\"btn-consulting\">\n          <div class=\"services-list__label-wrap\" aria-hidden=\"true\">\n            <div class=\"services-list__label-inner\">\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name\">Consulting<\/span>\n              <\/div>\n              <div class=\"services-list__name-row\">\n                <span class=\"services-list__name-dup\">Consulting<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <span class=\"services-list__badge\" aria-hidden=\"true\">Incoming<\/span>\n          <span class=\"sr-only\">Consulting (Incoming)<\/span>\n          <div class=\"services-list__meta\">\n            <span class=\"services-list__num\">07<\/span>\n            <span class=\"services-list__desc-inline\">Sharing knowledge, empowering creators<\/span>\n          <\/div>\n        <\/button>\n        <div class=\"services-list__progress\"><\/div>\n        <div class=\"services-list__inline-detail\" id=\"panel-consulting-mobile\" aria-hidden=\"true\">\n          <div class=\"services-list__inline-detail-inner\">\n            <p class=\"services-list__inline-name\">Consulting<\/p>\n            <p class=\"services-list__inline-desc\">Sharing knowledge to empower creators and businesses.<\/p>\n            <ul class=\"services-list__inline-deliverables\">\n              <li>Workshops<\/li>\n              <li>Strategy sessions<\/li>\n              <li>Creative training<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/li>\n\n    <\/ul>\n\n    <!-- \u2500\u2500 Detail panel (desktop) \u2500\u2500 -->\n    <div class=\"services-panel\" aria-live=\"polite\">\n\n      <!-- Visual Production -->\n      <div class=\"services-panel__pane\" id=\"panel-visual\" role=\"region\" aria-labelledby=\"btn-visual\">\n        <p class=\"services-panel__index\">01 \/ 07<\/p>\n        <h3 class=\"services-panel__name\">Visual Production<\/h3>\n        <p class=\"services-panel__desc\">Photography and video crafted to shape how your story is seen.<\/p>\n        <p class=\"services-panel__deliverables-label\">Deliverables<\/p>\n        <ul class=\"services-panel__deliverables\">\n          <li>Editorial &amp; campaign photography<\/li>\n          <li>Brand films &amp; video storytelling<\/li>\n          <li>Product &amp; commercial visuals<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Branding -->\n      <div class=\"services-panel__pane\" id=\"panel-branding\" role=\"region\" aria-labelledby=\"btn-branding\">\n        <p class=\"services-panel__index\">02 \/ 07<\/p>\n        <h3 class=\"services-panel__name\">Branding<\/h3>\n        <p class=\"services-panel__desc\">Identity systems designed to last and evolve.<\/p>\n        <p class=\"services-panel__deliverables-label\">Deliverables<\/p>\n        <ul class=\"services-panel__deliverables\">\n          <li>Visual identity design<\/li>\n          <li>Art direction<\/li>\n          <li>Brand guidelines<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Web Design -->\n      <div class=\"services-panel__pane\" id=\"panel-web\" role=\"region\" aria-labelledby=\"btn-web\">\n        <p class=\"services-panel__index\">03 \/ 07<\/p>\n        <h3 class=\"services-panel__name\">Web Design<\/h3>\n        <p class=\"services-panel__desc\">Web experiences designed to present brands clearly and effectively.<\/p>\n        <p class=\"services-panel__deliverables-label\">Deliverables<\/p>\n        <ul class=\"services-panel__deliverables\">\n          <li>Website design &amp; development<\/li>\n          <li>UX structure &amp; interface design<\/li>\n          <li>Landing pages &amp; digital presence<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Social Media -->\n      <div class=\"services-panel__pane\" id=\"panel-social\" role=\"region\" aria-labelledby=\"btn-social\">\n        <p class=\"services-panel__index\">04 \/ 07<\/p>\n        <h3 class=\"services-panel__name\">Social Media<\/h3>\n        <p class=\"services-panel__desc\">Content systems built for visibility and consistency.<\/p>\n        <p class=\"services-panel__deliverables-label\">Deliverables<\/p>\n        <ul class=\"services-panel__deliverables\">\n          <li>Content strategy<\/li>\n          <li>Platform formats<\/li>\n          <li>Visual consistency<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- E-Commerce -->\n      <div class=\"services-panel__pane\" id=\"panel-ecommerce\" role=\"region\" aria-labelledby=\"btn-ecommerce\">\n        <p class=\"services-panel__index\">05 \/ 07<\/p>\n        <h3 class=\"services-panel__name\">E-Commerce<\/h3>\n        <p class=\"services-panel__desc\">Digital commerce systems designed to launch, scale and optimise online sales.<\/p>\n        <p class=\"services-panel__deliverables-label\">Deliverables<\/p>\n        <ul class=\"services-panel__deliverables\">\n          <li>Online store creation &amp; optimisation<\/li>\n          <li>Marketplace integration (Amazon, Bol, etc.)<\/li>\n          <li>Logistics, cost control &amp; strategic consulting<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Motion Design -->\n      <div class=\"services-panel__pane\" id=\"panel-motion\" role=\"region\" aria-labelledby=\"btn-motion\">\n        <p class=\"services-panel__index\">06 \/ 07<\/p>\n        <h3 class=\"services-panel__name\">Motion Design<span class=\"services-panel__badge\">Incoming<\/span><\/h3>\n        <p class=\"services-panel__desc\">Animation that brings movement and rhythm to brands.<\/p>\n        <p class=\"services-panel__deliverables-label\">Deliverables<\/p>\n        <ul class=\"services-panel__deliverables\">\n          <li>Motion identity<\/li>\n          <li>Social media animations<\/li>\n          <li>Visual transitions<\/li>\n        <\/ul>\n      <\/div>\n\n      <!-- Consulting -->\n      <div class=\"services-panel__pane\" id=\"panel-consulting\" role=\"region\" aria-labelledby=\"btn-consulting\">\n        <p class=\"services-panel__index\">07 \/ 07<\/p>\n        <h3 class=\"services-panel__name\">Consulting<span class=\"services-panel__badge\">Incoming<\/span><\/h3>\n        <p class=\"services-panel__desc\">Sharing knowledge to empower creators and businesses.<\/p>\n        <p class=\"services-panel__deliverables-label\">Deliverables<\/p>\n        <ul class=\"services-panel__deliverables\">\n          <li>Workshops<\/li>\n          <li>Strategy sessions<\/li>\n          <li>Creative training<\/li>\n        <\/ul>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n  <div class=\"services-cta\">\n    <p class=\"services-cta__text\">Let's build something together<br><span class=\"services-cta__sub\">OLAH is a Belgium-based creative studio building visual and digital systems for brands, businesses and creators.<\/span><\/p>\n    <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" class=\"services-cta__btn\" rel=\"noopener noreferrer\">Let's Talk<\/a>\n  <\/div>\n\n<\/section>\n\n<script>\n(function () {\n  'use strict';\n\n  const AUTOPLAY_DURATION = 3000;\n\n  const items   = document.querySelectorAll('.services-list__item');\n  const panels  = document.querySelectorAll('.services-panel__pane');\n\n  let currentIndex = -1;\n  let isMobile = false;\n  let autoplayTimer = null;\n  let userPaused = false;\n\n  \/* \u2500\u2500\u2500 Badge alignment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function alignBadges () {\n    if (isMobile) return;\n    const badges = document.querySelectorAll('.services-list .services-list__badge');\n    if (!badges.length) return;\n\n    let maxRight = 0;\n    items.forEach(item => {\n      const nameEl = item.querySelector('.services-list__name');\n      if (!nameEl) return;\n      const rect = nameEl.getBoundingClientRect();\n      const btnRect = nameEl.closest('.services-list__btn').getBoundingClientRect();\n      const relRight = rect.right - btnRect.left;\n      if (relRight > maxRight) maxRight = relRight;\n    });\n\n    const badgeLeft = maxRight + 14;\n    badges.forEach(badge => {\n      badge.style.left = badgeLeft + 'px';\n    });\n  }\n\n  \/* \u2500\u2500\u2500 Badge vertical centering on the title row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function alignBadgesVertical () {\n    if (isMobile) return;\n    const badges = document.querySelectorAll('.services-list .services-list__badge');\n    badges.forEach(badge => {\n      const btn = badge.closest('.services-list__btn');\n      if (!btn) return;\n      const nameRow = btn.querySelector('.services-list__name-row');\n      if (!nameRow) return;\n      const btnRect  = btn.getBoundingClientRect();\n      const rowRect  = nameRow.getBoundingClientRect();\n      const rowCenter = rowRect.top - btnRect.top + rowRect.height \/ 2;\n      badge.style.top       = rowCenter + 'px';\n      badge.style.transform = 'translateY(-50%)';\n    });\n  }\n\n  \/* \u2500\u2500\u2500 Label heights \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function setLabelHeights () {\n    document.querySelectorAll('.services-list__label-wrap').forEach(wrap => {\n      const firstRow = wrap.querySelector('.services-list__name-row');\n      if (!firstRow) return;\n      wrap.style.overflow = 'visible';\n      wrap.style.height   = 'auto';\n      const h = firstRow.getBoundingClientRect().height;\n      wrap.style.overflow = 'hidden';\n      wrap.style.height   = (h + 4) + 'px';\n      const inner = wrap.querySelector('.services-list__label-inner');\n      if (inner) inner.dataset.lineH = h + 4;\n    });\n  }\n\n  function checkMobile () {\n    isMobile = window.matchMedia('(max-width: 860px)').matches;\n  }\n\n  \/* \u2500\u2500\u2500 Panel switching \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function showPanel (index) {\n    panels.forEach(p => p.classList.remove('is-visible'));\n    const pane = panels[index];\n    if (pane) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          pane.classList.add('is-visible');\n        });\n      });\n    }\n  }\n\n  \/* \u2500\u2500\u2500 Progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function startProgress (index, duration) {\n    const bar = items[index].querySelector('.services-list__progress');\n    if (!bar) return;\n    bar.style.transition = 'none';\n    bar.style.width = '0%';\n    bar.classList.remove('animating');\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        bar.classList.add('animating');\n        bar.style.transition = `width ${duration}ms linear`;\n        bar.style.width = '100%';\n      });\n    });\n  }\n\n  function stopProgress (index) {\n    const bar = items[index] && items[index].querySelector('.services-list__progress');\n    if (!bar) return;\n    bar.style.transition = 'none';\n    bar.style.width = '0%';\n    bar.classList.remove('animating');\n  }\n\n  \/* \u2500\u2500\u2500 Activate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function activate (index, fromAutoplay) {\n    if (index === currentIndex && !fromAutoplay) return;\n\n    if (currentIndex >= 0) {\n      items[currentIndex].classList.remove('is-active');\n      items[currentIndex].querySelector('.services-list__btn').setAttribute('aria-expanded', 'false');\n      const prevInline = items[currentIndex].querySelector('.services-list__inline-detail');\n      if (prevInline) prevInline.setAttribute('aria-hidden', 'true');\n      stopProgress(currentIndex);\n    }\n\n    currentIndex = index;\n    items[index].classList.add('is-active');\n    items[index].querySelector('.services-list__btn').setAttribute('aria-expanded', 'true');\n\n    const inlineDetail = items[index].querySelector('.services-list__inline-detail');\n    if (inlineDetail) inlineDetail.setAttribute('aria-hidden', 'false');\n\n    if (!isMobile) {\n      showPanel(index);\n    }\n\n    if (!userPaused) {\n      startProgress(index, AUTOPLAY_DURATION);\n    }\n  }\n\n  \/* \u2500\u2500\u2500 Autoplay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function scheduleNext () {\n    clearTimeout(autoplayTimer);\n    autoplayTimer = setTimeout(() => {\n      if (!userPaused) {\n        const next = (currentIndex + 1) % items.length;\n        activate(next, true);\n        scheduleNext();\n      }\n    }, AUTOPLAY_DURATION);\n  }\n\n  function pauseAutoplay () {\n    userPaused = true;\n    clearTimeout(autoplayTimer);\n    if (currentIndex >= 0) {\n      const bar = items[currentIndex].querySelector('.services-list__progress');\n      if (bar) {\n        const computed = window.getComputedStyle(bar).width;\n        const parentW  = bar.parentElement.getBoundingClientRect().width;\n        const pct = (parseFloat(computed) \/ parentW * 100).toFixed(2);\n        bar.style.transition = 'none';\n        bar.style.width = pct + '%';\n        bar.classList.remove('animating');\n      }\n    }\n  }\n\n  function resumeAutoplay () {\n    userPaused = false;\n    startProgress(currentIndex, AUTOPLAY_DURATION);\n    scheduleNext();\n  }\n\n  \/* \u2500\u2500\u2500 Events \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  items.forEach((item, i) => {\n    const btn = item.querySelector('.services-list__btn');\n\n    item.addEventListener('mouseenter', () => {\n      pauseAutoplay();\n      activate(i);\n    });\n\n    item.addEventListener('mouseleave', () => {\n      resumeAutoplay();\n    });\n\n    btn.addEventListener('click', () => {\n      if (isMobile) {\n        if (currentIndex === i) {\n          items[i].classList.remove('is-active');\n          btn.setAttribute('aria-expanded', 'false');\n          const inlineDetail = item.querySelector('.services-list__inline-detail');\n          if (inlineDetail) inlineDetail.setAttribute('aria-hidden', 'true');\n          stopProgress(i);\n          currentIndex = -1;\n        } else {\n          activate(i);\n        }\n      } else {\n        activate(i);\n      }\n    });\n\n    btn.addEventListener('focus', () => {\n      pauseAutoplay();\n      activate(i);\n    });\n\n    btn.addEventListener('blur', () => {\n      setTimeout(() => {\n        if (!document.querySelector('.services-list__btn:focus')) {\n          resumeAutoplay();\n        }\n      }, 100);\n    });\n  });\n\n  \/* \u2500\u2500\u2500 Keyboard nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  document.querySelector('.services-list').addEventListener('keydown', (e) => {\n    const active = document.querySelector('.services-list__btn:focus');\n    if (!active) return;\n    const btns = [...document.querySelectorAll('.services-list__btn')];\n    const idx  = btns.indexOf(active);\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      btns[(idx + 1) % btns.length].focus();\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      btns[(idx - 1 + btns.length) % btns.length].focus();\n    }\n  });\n\n  \/* \u2500\u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  checkMobile();\n\n  function init () {\n    setLabelHeights();\n    alignBadges();\n    alignBadgesVertical();\n    if (!isMobile) {\n      activate(0);\n      scheduleNext();\n    }\n  }\n\n  if (document.fonts && document.fonts.ready) {\n    document.fonts.ready.then(init);\n  } else {\n    window.addEventListener('load', init);\n  }\n\n  window.addEventListener('resize', () => {\n    checkMobile();\n    setLabelHeights();\n    alignBadges();\n    alignBadgesVertical();\n  });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0c3562 e-con-full e-flex e-con e-parent\" data-id=\"c0c3562\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d899fe elementor-widget elementor-widget-html\" data-id=\"6d899fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Footer \u2014 Olah Agency<\/title>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;500&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n    html, body { background: transparent; }\r\n\r\n    \/* \u2500\u2500 COMMUN \u2500\u2500 *\/\r\n    .footer {\r\n      width: 100%;\r\n      background: #000;\r\n      padding: 5rem 5vw 3rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 2rem;\r\n    }\r\n    .footer-bottom a {\r\n      font-family: 'Manrope', sans-serif;\r\n      font-weight: 300;\r\n      font-size: 0.62rem;\r\n      color: #2e2e2e;\r\n      letter-spacing: 0.12em;\r\n      text-transform: uppercase;\r\n      text-decoration: none;\r\n      transition: color 300ms ease;\r\n    }\r\n    .footer-bottom a:hover { color: #fe6f5e; }\r\n\r\n    \/* \u2500\u2500 DESKTOP \u2500\u2500 *\/\r\n    .footer-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      justify-content: center;\r\n      gap: 1.2rem;\r\n      flex-wrap: wrap;\r\n    }\r\n    .row-title {\r\n      font-family: 'Manrope', sans-serif;\r\n      font-weight: 500;\r\n      font-size: 1.64rem;\r\n      color: #f5f5f5;\r\n      letter-spacing: 0.06em;\r\n    }\r\n    .footer-row a {\r\n      font-family: 'Manrope', sans-serif;\r\n      font-weight: 300;\r\n      font-size: 1.56rem;\r\n      color: #555;\r\n      text-decoration: none;\r\n      letter-spacing: 0.04em;\r\n      transition: color 300ms ease;\r\n    }\r\n    .footer-row a:hover { color: #fe6f5e; }\r\n    .dot {\r\n      color: #222;\r\n      font-size: 0.5rem;\r\n      line-height: 1;\r\n      align-self: center;\r\n    }\r\n    .footer-bottom {\r\n      margin-top: 2rem;\r\n      border-top: 1px solid #111;\r\n      padding-top: 2rem;\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n    }\r\n\r\n    \/* \u2500\u2500 MOBILE : masqu\u00e9 par d\u00e9faut \u2500\u2500 *\/\r\n    .mobile-section,\r\n    .mobile-double,\r\n    .mobile-divider,\r\n    .mobile-bottom { display: none; }\r\n\r\n    \/* \u2500\u2500 MOBILE \u2500\u2500 *\/\r\n    @media (max-width: 640px) {\r\n\r\n      .footer {\r\n        padding: 3rem 6vw 2.5rem;\r\n        align-items: center;\r\n      }\r\n\r\n      \/* Masquer desktop *\/\r\n      .footer-row { display: none; }\r\n      .footer-bottom { display: none; }\r\n\r\n      \/* Afficher mobile *\/\r\n      .mobile-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        width: 100%;\r\n      }\r\n      .mobile-double {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 1.5rem;\r\n        width: 100%;\r\n      }\r\n      .mobile-divider {\r\n        display: block;\r\n        border: none;\r\n        border-top: 1px solid #111;\r\n        width: 100%;\r\n      }\r\n      .mobile-bottom {\r\n        display: flex;\r\n        justify-content: center;\r\n        width: 100%;\r\n      }\r\n      .mobile-bottom a {\r\n        font-family: 'Manrope', sans-serif !important;\r\n        font-weight: 300 !important;\r\n        font-size: 0.62rem !important;\r\n        color: #2e2e2e !important;\r\n        letter-spacing: 0.12em !important;\r\n        text-transform: uppercase !important;\r\n        text-decoration: none !important;\r\n        transition: color 300ms ease !important;\r\n      }\r\n      .mobile-bottom a:hover { color: #fe6f5e !important; }\r\n\r\n      .mobile-title {\r\n        font-family: 'Manrope', sans-serif;\r\n        font-weight: 500;\r\n        font-size: 1.1rem;\r\n        color: #f5f5f5;\r\n        letter-spacing: 0.08em;\r\n        margin-bottom: 0.75rem;\r\n        text-align: center;\r\n      }\r\n      .mobile-links {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 0.4rem 1rem;\r\n        align-items: center;\r\n      }\r\n      .mobile-links a {\r\n        font-family: 'Manrope', sans-serif;\r\n        font-weight: 300;\r\n        font-size: 1rem;\r\n        color: #555;\r\n        text-decoration: none;\r\n        letter-spacing: 0.04em;\r\n        transition: color 300ms ease;\r\n      }\r\n      .mobile-links a:hover { color: #fe6f5e; }\r\n      .mobile-dot {\r\n        color: #2a2a2a;\r\n        font-size: 0.4rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<footer class=\"footer\">\r\n\r\n  <!-- \u2500\u2500 DESKTOP \u2500\u2500 -->\r\n  <div class=\"footer-row\">\r\n    <span class=\"row-title\">Social<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.linkedin.com\/company\/olah-agency\/home\/?viewAsMember=true\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.instagram.com\/olah_agency?igsh=MTlkdmhndHZzZTdmeg%3D%3D\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.tiktok.com\/@olah.agency?_r=1&amp;_t=ZG-9AY7KJCEkOe\" target=\"_blank\" rel=\"noopener\">TikTok<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/www.facebook.com\/profile.php?id=61590574315090\" target=\"_blank\" rel=\"noopener\">Facebook<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <span class=\"row-title\">Works<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/olah-agency.com\/works\/\">All Projects<\/a>\r\n  <\/div>\r\n  <div class=\"footer-row\">\r\n    <span class=\"row-title\">Let's Talk<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"mailto:contact@olah-agency.com\">Mail<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" target=\"_blank\" rel=\"noopener\">Booking<\/a>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <span class=\"row-title\">About<\/span>\r\n    <span class=\"dot\">\u25cf<\/span>\r\n    <a href=\"https:\/\/olah-agency.com\/about\/\">About us<\/a>\r\n  <\/div>\r\n  <div class=\"footer-bottom\">\r\n    <a href=\"https:\/\/olah-agency.com\/\">Website made with passion<\/a>\r\n  <\/div>\r\n\r\n  <!-- \u2500\u2500 MOBILE \u2500\u2500 -->\r\n  <div class=\"mobile-section\">\r\n    <p class=\"mobile-title\">Social<\/p>\r\n    <div class=\"mobile-links\">\r\n      <a href=\"https:\/\/www.linkedin.com\/company\/olah-agency\/home\/?viewAsMember=true\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/www.instagram.com\/olah_agency?igsh=MTlkdmhndHZzZTdmeg%3D%3D\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/www.tiktok.com\/@olah.agency?_r=1&amp;_t=ZG-9AY7KJCEkOe\" target=\"_blank\" rel=\"noopener\">TikTok<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/www.facebook.com\/profile.php?id=61590574315090\" target=\"_blank\" rel=\"noopener\">Facebook<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"mobile-double\">\r\n    <div class=\"mobile-section\">\r\n      <p class=\"mobile-title\">Works<\/p>\r\n      <div class=\"mobile-links\">\r\n        <a href=\"https:\/\/olah-agency.com\/works\/\">All Projects<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"mobile-section\">\r\n      <p class=\"mobile-title\">About<\/p>\r\n      <div class=\"mobile-links\">\r\n        <a href=\"https:\/\/olah-agency.com\/about\/\">About us<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"mobile-section\">\r\n    <p class=\"mobile-title\">Let's Talk<\/p>\r\n    <div class=\"mobile-links\">\r\n      <a href=\"mailto:contact@olah-agency.com\">Mail<\/a>\r\n      <span class=\"mobile-dot\">\u25cf<\/span>\r\n      <a href=\"https:\/\/olah-agency.com\/lets-talk-book-a-stay\/\" target=\"_blank\" rel=\"noopener\">Booking<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <hr class=\"mobile-divider\">\r\n\r\n  <div class=\"mobile-bottom\">\r\n    <a href=\"https:\/\/olah-agency.com\/\">Website made with passion<\/a>\r\n  <\/div>\r\n\r\n<\/footer>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Olah Agency Navigation WORKS WORKS ABOUT ABOUT JOURNAL JOURNAL IMPACT IMPACT LET&#8217;S TALK LET&#8217;S TALK MENU CLOSE WORKS ABOUT JOURNAL IMPACT LET&#8217;S TALK OLAH AGENCY Olah Agency Creative &amp; Digital Agency Based in Belgium We Build What Makes You Grow Working Worldwide OLAH Agency \u2014 Selected Projects 01 1480 Visual Production 02 Intercontinental Visual Production [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1514,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency - olah-agency.com<\/title>\n<meta name=\"description\" content=\"OLAH Agency is a creative agency based in Belgium specializing in video production, branding, photography, websites, social media...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/olah-agency.com\/fr\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency - olah-agency.com\" \/>\n<meta property=\"og:description\" content=\"OLAH Agency is a creative agency based in Belgium specializing in video production, branding, photography, websites, social media...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/olah-agency.com\/fr\/\" \/>\n<meta property=\"og:site_name\" content=\"olah-agency.com\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-15T19:14:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-9-sept.-2026-17_32_48.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1881\" \/>\n\t<meta property=\"og:image:height\" content=\"836\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/\",\"url\":\"https:\\\/\\\/olah-agency.com\\\/\",\"name\":\"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency - olah-agency.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/olah-agency.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/ChatGPT-Image-9-sept.-2026-17_32_48.png\",\"datePublished\":\"2026-01-15T16:07:54+00:00\",\"dateModified\":\"2026-10-15T19:14:53+00:00\",\"description\":\"OLAH Agency is a creative agency based in Belgium specializing in video production, branding, photography, websites, social media...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/olah-agency.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/olah-agency.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/ChatGPT-Image-9-sept.-2026-17_32_48.png\",\"contentUrl\":\"https:\\\/\\\/olah-agency.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/ChatGPT-Image-9-sept.-2026-17_32_48.png\",\"width\":1881,\"height\":836},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/olah-agency.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/olah-agency.com\\\/#website\",\"url\":\"https:\\\/\\\/olah-agency.com\\\/\",\"name\":\"olah-agency.com\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/olah-agency.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency - olah-agency.com","description":"OLAH Agency is a creative agency based in Belgium specializing in video production, branding, photography, websites, social media...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/olah-agency.com\/fr\/","og_locale":"fr_FR","og_type":"article","og_title":"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency - olah-agency.com","og_description":"OLAH Agency is a creative agency based in Belgium specializing in video production, branding, photography, websites, social media...","og_url":"https:\/\/olah-agency.com\/fr\/","og_site_name":"olah-agency.com","article_modified_time":"2026-10-15T19:14:53+00:00","og_image":[{"width":1881,"height":836,"url":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-9-sept.-2026-17_32_48.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/olah-agency.com\/","url":"https:\/\/olah-agency.com\/","name":"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency - olah-agency.com","isPartOf":{"@id":"https:\/\/olah-agency.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/olah-agency.com\/#primaryimage"},"image":{"@id":"https:\/\/olah-agency.com\/#primaryimage"},"thumbnailUrl":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-9-sept.-2026-17_32_48.png","datePublished":"2026-01-15T16:07:54+00:00","dateModified":"2026-10-15T19:14:53+00:00","description":"OLAH Agency is a creative agency based in Belgium specializing in video production, branding, photography, websites, social media...","breadcrumb":{"@id":"https:\/\/olah-agency.com\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/olah-agency.com\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/olah-agency.com\/#primaryimage","url":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-9-sept.-2026-17_32_48.png","contentUrl":"https:\/\/olah-agency.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-9-sept.-2026-17_32_48.png","width":1881,"height":836},{"@type":"BreadcrumbList","@id":"https:\/\/olah-agency.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/olah-agency.com\/"},{"@type":"ListItem","position":2,"name":"Creative Agency in Belgium | Video Production, Branding &amp; Web Design | OLAH Agency"}]},{"@type":"WebSite","@id":"https:\/\/olah-agency.com\/#website","url":"https:\/\/olah-agency.com\/","name":"olah-agency.com","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/olah-agency.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":336,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":2002,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/pages\/28\/revisions\/2002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/media\/1514"}],"wp:attachment":[{"href":"https:\/\/olah-agency.com\/fr\/wp-json\/wp\/v2\/media?parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}