<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Communication Archive | Elementi</title>
	<atom:link href="https://www.elementi-design.com/tag/communication/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.elementi-design.com/tag/communication/</link>
	<description>Corporate Design, Web Design, Marketing Consulting</description>
	<lastBuildDate>Tue, 24 Mar 2026 08:34:42 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://www.elementi-design.com/wp-content/uploads/2017/04/cropped-elementi-sign-512-32x32.png</url>
	<title>Communication Archive | Elementi</title>
	<link>https://www.elementi-design.com/tag/communication/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Inside the Architecture</title>
		<link>https://www.elementi-design.com/headless-cms-architecture/</link>
					<comments>https://www.elementi-design.com/headless-cms-architecture/#respond</comments>
		
		<dc:creator><![CDATA[Stefan Seifert]]></dc:creator>
		<pubDate>Sat, 14 Feb 2026 09:58:08 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Biotech]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Website]]></category>
		<guid isPermaLink="false">https://www.elementi-design.com/?p=17377</guid>

					<description><![CDATA[<p>When people visit a website, they see pages. What they don’t see is the architecture that makes those pages possible. Every menu item, every tooltip, every contextual link is powered by a system. A system that decides whether a website can scale gracefully — or collapse under its own complexity.</p>
<p>Der Beitrag <a href="https://www.elementi-design.com/headless-cms-architecture/">Inside the Architecture</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="headless-backend" class="az-main-section-content az-module no-neg-margin h1-section az-padding-top-0 az-padding-bottom-0 az-section-full-screen no-animate-content az-module-bg-svg">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg">
            <div class="root">

  <div class="scene">

    <div class="elementi_pres">
      <div class="img-wrap top-150">
        <img decoding="async" class="base-img"
             src="https://www.elementi-design.com/wp-content/uploads/2026/02/services-branches-backend.png"
             alt="Screenshot of a headless CMS architecture showing backend pages with services and case studies connections, illustrating structured content management."
             title="Headless CMS Architecture – Services & Case Studies">
      </div>
    </div>

    <div class="elementi_pres">
      <div class="img-wrap">
        <img decoding="async" class="base-img"
             src="https://www.elementi-design.com/wp-content/uploads/2026/02/regulatory-case-studies-backend.png"
             alt="Backend interface screenshot of a headless CMS architecture highlighting relational content connections and dynamic menus for complex service structures."
             title="Headless CMS Architecture – Content Connections">
        <img decoding="async" class="only-img"
             src="https://www.elementi-design.com/wp-content/uploads/2026/02/prostate-cancer-illustration.png"
             alt="Illustration related to case study content; visual enhancement for the article."
             title="Case Study Illustration">
      </div>
    </div>

    <div class="elementi_pres">
      <div class="img-wrap top-300">
        <img decoding="async" class="base-img"
             src="https://www.elementi-design.com/wp-content/uploads/2026/02/gsap-story-slider-backend.png"
             alt="Admin dashboard view of a headless CMS architecture with custom fields and content modules for managing global services and regional variations efficiently."
             title="Headless CMS Architecture – Custom Fields & Dashboard">
        <img decoding="async" class="only-img only-img-2"
             src="https://www.elementi-design.com/wp-content/uploads/2026/02/south-korean-people.png"
             alt="Illustration of global team diversity; complements CMS backend content."
             title="Global Team Illustration">
      </div>
    </div>

  </div>

  <!-- Blend layer separated -->
  <div class="blend-overlay"></div>

</div>

<p class="dida-cms">
  <i class="az-icon az-icon-server" style="margin-right: 5px; top: 1px; font-size: 12px; position: relative;"></i>Custom-Designed CMS Interface
</p>

            </div>
        </div><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-col-pos-middle az-v-space-clm clm-border-active no-animate-content az-module-default" style="border-right: 30px solid #FFFFFF; border-bottom: 30px solid #FFFFFF; border-left: 30px solid #FFFFFF;"><div class="az-col az-clm-padding-75 az-clm-force-height" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 15vh;"></div>
<div data-font-min="35" data-font-max="55" data-font-buffer="50" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 no-animate-content" style="font-weight: 400; line-height: 140%; color: #FFFFFF; font-family:Playfair Display;">
    <h1 style="padding-left: 15px;">Inside the <em>Architecture</em>.</h1>

</div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
        <script>
    
    (function () {
      const minFont = 35;
      const maxFont = 50;
      const minLS = 0;
      const maxLS = -0.25;
    
      function updateLetterSpacing() {
        const h1 = document.querySelector("h1");
        if (!h1) return;
    
        const fontSize = parseFloat(getComputedStyle(h1).fontSize);
    
        const clamped = Math.min(Math.max(fontSize, minFont), maxFont);
    
        const letterSpacing =
          minLS + (clamped - minFont) * (maxLS - minLS) / (maxFont - minFont);
    
        h1.style.letterSpacing = letterSpacing + "px";
      }
    
      window.addEventListener("resize", updateLetterSpacing);
      window.addEventListener("DOMContentLoaded", updateLetterSpacing);
    })();  
    
</script>
    </div>
</div></div></div></div></div></div><a href="#chapter-1" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #FFFFFF"></i></a></div><div id="chapter-1" class="az-main-section-content az-module flex-shift-left az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div class="single-clms col-md-8 col-lg-6 col-lg-push-0 col-md-push-1 flex-padding-90 az-main-col-content az-module az-col-pos-middle no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 75px;"></div><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-10 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: left;">A Headless WordPress CMS.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: left;">When people visit a website, they see pages. What they don’t see is the architecture that makes those pages possible. Every menu item, every tooltip, every contextual link is powered by a system. A system that decides whether a website can scale gracefully — or collapse under its own complexity.</p>

</div></div></div></div><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div><div class="row row-inner magic-shift az-padding-top-50 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-10 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div id="xl-shift-y" class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 28px;"></div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">For one of our global clients, it wasn’t enough to think in pages. We had to build a headless CMS: a structured, flexible foundation that connects services, teams, projects, and regions — all in a way editors can manage easily. Their organization operates across continents, industries, and regulatory frameworks, where services differ between regions, case studies span domains, and teams collaborate across offices.</p>

</div></div></div></div></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 75px;"></div></div></div></div><div class="single-clms col-md-4 col-lg-pull-0 col-md-pull-1 az-main-col-content az-module az-col-pos-bottom no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block flex-margin shift az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 no-animate-content" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="text-align: right; padding: 0 30px;"><i class="az-icon az-icon-flow-tree" style="margin-right: 5px; top: 1px; font-size: 13px; position: relative;"></i>Content, API, Frontend Layers (simplified)</p>

</div></div></div></div></div></div></div><div id="diagram-section" class="az-main-section-content az-module flex-shift-left magic-shift-follow az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-default"><div class="container-fluid"><div class="row row-parent az-gutter-default"><div class="multi-clms col-md-2 col-lg-3 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="single-clms col-md-10 col-lg-8 col-lg-pull-0 col-md-pull-1 col-sm-12 col-xs-12 border-round flex-padding big-cards az-main-col-content az-module animate-content az-module-bg-color"><div class="az-col az-clm-padding-90" >
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #F9F9F9;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-single-svg-image az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-svg-img-wrapper">
        <div class="az-svg-embed-code" data-duration="1000" data-delay="200" data-easing="linear" data-reverse="false">
                    <div id="diagram-1" class="diagram">

            <!-- BASE SVG: lines -->
            <svg viewBox="0 0 800 520" style="position: relative;">
                <line class="line" x1="90" y1="130" x2="338" y2="254"></line>
                <line class="line" x1="327" y1="218" x2="375.7" y2="255.5"></line>
                <line class="line" x1="502.788" y1="111.961" x2="423.885" y2="253.997"></line>
                <line class="line" x1="710" y1="129" x2="482" y2="254"></line>
                <line class="line highlight highlight-1 moving-dash" x1="410" y1="300" x2="410" y2="344"></line>
                <line class="line" x1="349" y1="396.5" x2="251" y2="443"></line>
                <line class="line" x1="410" y1="396.5" x2="410" y2="443"></line>
                <line class="line" x1="471" y1="396.5" x2="568" y2="443"></line>

                <!-- CARDS blank -->
                <foreignObject x="120" y="444" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="320" y="444" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="520" y="444" width="180" height="50"><div class="card blank"></div></foreignObject>

                <!-- CMS COLUMNS -->
                <foreignObject x="0" y="34" width="180" height="50">
                    <div class="card">Branches</div>
                </foreignObject>

                <foreignObject x="0" y="104" width="180" height="50">
                    <div class="card">Services</div>
                </foreignObject>

                <foreignObject x="210" y="34" width="180" height="50">
                    <div class="card">Teams</div>
                </foreignObject>

                <foreignObject x="210" y="104" width="180" height="50">
                    <div class="card">Offices</div>
                </foreignObject>

                <foreignObject x="210" y="174" width="180" height="50">
                    <div class="card">Expertise</div>
                </foreignObject>

                <foreignObject x="420" y="74" width="180" height="50">
                    <div class="card">Case Studies</div>
                </foreignObject>

                <foreignObject x="620" y="34" width="180" height="50">
                    <div class="card">RI Platform</div>
                </foreignObject>

                <foreignObject x="620" y="104" width="180" height="50">
                    <div class="card">RI Domains</div>
                </foreignObject>

                <!-- API -->
                <foreignObject x="320" y="254" width="180" height="50">
                    <div class="card highlight highlight-1">REST API</div>
                </foreignObject>

                <!-- FRONTEND -->
                <foreignObject x="320" y="344" width="180" height="50">
                    <div class="card highlight highlight-1">Static Frontend</div>
                </foreignObject>
            </svg>

            <!-- OUTPUTS animated -->
            <svg id="output-left-1" viewBox="0 0 800 520">
                <foreignObject x="120" y="444" width="180" height="50">
                    <div class="card">Context Menus</div>
                </foreignObject>
            </svg>
            <svg id="output-left-2" viewBox="0 0 800 520">
                <foreignObject x="120" y="444" width="180" height="50">
                    <div class="card">Quotes</div>
                </foreignObject>
            </svg>
            <svg id="output-left-3" viewBox="0 0 800 520">
                <foreignObject x="120" y="444" width="180" height="50">
                    <div class="card">Branch Modals</div>
                </foreignObject>
            </svg>

            <svg id="output-middle-1" viewBox="0 0 800 520">
                <foreignObject x="320" y="444" width="180" height="50">
                    <div class="card">Story Sliders</div>
                </foreignObject>
            </svg>
            <svg id="output-middle-2" viewBox="0 0 800 520">
                <foreignObject x="320" y="444" width="180" height="50">
                    <div class="card">View More Blocks</div>
                </foreignObject>
            </svg>
            <svg id="output-middle-3" viewBox="0 0 800 520">
                <foreignObject x="320" y="444" width="180" height="50">
                    <div class="card">News Articles</div>
                </foreignObject>
            </svg>

            <svg id="output-right-1" viewBox="0 0 800 520">
                <foreignObject x="520" y="444" width="180" height="50">
                    <div class="card">Case Study Pages</div>
                </foreignObject>
            </svg>
            <svg id="output-right-2" viewBox="0 0 800 520">
                <foreignObject x="520" y="444" width="180" height="50">
                    <div class="card">Services Overview</div>
                </foreignObject>
            </svg>
            <svg id="output-right-3" viewBox="0 0 800 520">
                <foreignObject x="520" y="444" width="180" height="50">
                    <div class="card">Location Maps</div>
                </foreignObject>
            </svg>

        </div>
        </div>
</div>
</div></div></div></div><div class="multi-clms col-md-1 hidden-md hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div></div><div id="next-section-arrow" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 75px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 60px;"></div><div class="az-content-element-wrapper az-empty-divider" style="height: 15px;"></div></div></div></div></div></div><a href="#chapter-2" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div id="chapter-2" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div class="multi-clms col-md-7 col-lg-5 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 75px;"></div><div data-animation-type="ani-in" data-animation-in="fadeInLeft" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default animate-content"><div class="single-clms col-md-12 border-round small-cards min-padding az-main-col-content az-module az-v-space-clm no-animate-content az-module-bg-color"><div class="az-col az-clm-padding-0" >
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #F9F9F9;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-single-svg-image az-margin-top-0 az-margin-bottom-0 align-center no-animate-content">
<div class="az-svg-img-wrapper">
        <div class="az-svg-embed-code" data-duration="1000" data-delay="200" data-easing="linear" data-reverse="false">
                    <div id="diagram-2" class="diagram">

            <!-- BASE SVG: lines -->
            <svg viewBox="120 50 580 420" style="position: relative;">
                <line class="line" x1="410" y1="233.5" x2="410" y2="112.5"></line>
                <line class="line" x1="410" y1="285.75" x2="410" y2="404"></line>
                <line class="line" x1="316.5" y1="260" x2="270" y2="260"></line>
                <line class="line" x1="503.5" y1="260" x2="551" y2="260"></line>
                <line class="line highlight highlight-dimmed" x1="274.1" y1="173.9" x2="370.05" y2="234.76"></line>
                <line class="line highlight highlight-dimmed" x1="545.9" y1="346.1" x2="449.95" y2="285.24"></line>
         
                <!-- CARDS blank -->
                <foreignObject x="320" y="235" width="180" height="50"><div class="card highlight blank"></div></foreignObject>
                <foreignObject x="320" y="73" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="120" y="238" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="520" y="238" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="320" y="403" width="180" height="50"><div class="card blank"></div></foreignObject>
            </svg>

            <!-- Diagonal placed -->
            <svg viewBox="120 50 580 420">
                <foreignObject x="120" y="120" width="180" height="50">
                    <div class="card highlight highlight-dimmed"><div>Branch</div></div>
                </foreignObject>
            </svg>
            <svg viewBox="120 50 580 420">
                <foreignObject x="520" y="350" width="180" height="50">
                    <div class="card highlight highlight-dimmed"><div>RI Domain</div></div>
                </foreignObject>
            </svg>

            <!-- CARDS -->
            <!-- Team Member / Case Study -->
            <svg id="team-member-1" viewBox="120 50 580 420">
                <foreignObject x="320" y="235" width="180" height="50">
                    <div class="card highlight highlight-1"><div>Team Member</div></div>
                </foreignObject>
            </svg>
            <svg id="team-member-2" viewBox="120 50 580 420">
                <foreignObject x="320" y="235" width="180" height="50">
                    <div class="card highlight highlight-2"><div>Case Study</div></div>
                </foreignObject>
            </svg>

            <!-- Office / Country -->
            <svg id="office-1" viewBox="120 50 580 420">
                <foreignObject x="320" y="73" width="180" height="50">
                    <div class="card"><div>Office</div></div>
                </foreignObject>
            </svg>
            <svg id="office-2" viewBox="120 50 580 420">
                <foreignObject x="320" y="73" width="180" height="50">
                    <div class="card"><div>Country</div></div>
                </foreignObject>
            </svg>

            <!-- Expertise / Branch -->
            <svg id="expertise-1" viewBox="120 50 580 420">
                <foreignObject x="120" y="238" width="180" height="50">
                    <div class="card"><div>Expertise</div></div>
                </foreignObject>
            </svg>
            <svg id="expertise-2" viewBox="120 50 580 420">
                <foreignObject x="120" y="238" width="180" height="50">
                    <div class="card highlight-1"><div>Team</div></div>
                </foreignObject>
            </svg>

            <!-- Case Studies / Services -->
            <svg id="cases-1" viewBox="120 50 580 420">
                <foreignObject x="520" y="238" width="180" height="50">
                    <div class="card highlight-2"><div>Case Studies</div></div>
                </foreignObject>
            </svg>
            <svg id="cases-2" viewBox="120 50 580 420">
                <foreignObject x="520" y="238" width="180" height="50">
                    <div class="card"><div>Services</div></div>
                </foreignObject>
            </svg>

            <!-- Quotes / Expertise -->
            <svg id="quotes-1" viewBox="120 50 580 420">
                <foreignObject x="320" y="403" width="180" height="50">
                    <div class="card"><div>Quotes</div></div>
                </foreignObject>
            </svg>
            <svg id="quotes-2" viewBox="120 50 580 420">
                <foreignObject x="320" y="403" width="180" height="50">
                    <div class="card"><div>Expertise</div></div>
                </foreignObject>
            </svg>

        </div>
        </div>
</div>
</div></div></div></div></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block flex-margin min-padding-follow az-font-custom az-font-size-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="padding: 0px 30px; text-align: left;"><i class="az-icon az-icon-cycle" style="margin-right: 5px; top: 2px; font-size: 13px; position: relative;"></i>Content Relationships and Dependencies (detail)</p>

</div></div></div></div><div class="multi-clms col-md-5 col-lg-6 flex-padding-90 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 2.4vw;"></div><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-10 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: right;">Building Systems Instead of Pages.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">Each element needed to exist independently while staying connected. Editors maintain a single source of truth — avoiding duplication, inconsistencies, and mounting maintenance. With a relational system, content lives once, links naturally, and scales seamlessly as the organization grows.</p>

</div></div></div></div></div><div class="row row-inner az-padding-top-50 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-10 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Instead of managing pages, editors manage relationships. Services connect to offices, offices connect to teams, teams connect to projects. The website becomes the expression of this structure — not something maintained separately, but something generated from it.</p>

</div></div></div></div><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div></div></div></div></div></div><div id="next-section-arrow" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content hidden-sm hidden-xs az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 32px;"></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 75px;"></div></div></div></div></div></div><a href="#chapter-3" class="scroll-btn-page"><i class="az-icon az-icon-arrow-down animated-opacity" style="color: #000000"></i></a></div><div id="chapter-3" class="az-main-section-content az-module mirror-padding margin-10 az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div class="single-clms col-md-4 col-lg-push-0 flex-padding-90 mobile-no-top mobile-no-bottom az-main-col-content az-module az-col-pos-middle no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-10 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: left;">Structure Once, Display Everywhere.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Think of it like a supercharged category system. Content is defined once, connected to services, regions, teams, or regulatory types, and automatically distributed wherever it’s needed. Add a new office, update a service, or include a document, and the system keeps every page, menu, and tooltip in sync.</p>

</div></div></div></div><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div><div class="row row-inner az-padding-top-50 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-10 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">The effort shifts from maintaining countless touchpoints to maintaining the structure itself. Complexity doesn’t disappear — but it becomes organized, predictable, and manageable.</p>

</div></div></div></div></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 15vmax;"></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block next-section-shift az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 no-animate-content hidden-sm hidden-xs" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="padding-left: 30px;"><i class="glyphicon glyphicon-pencil" style="margin-right: 6px; top: 2px; font-size: 12px; position: relative;"></i>Editor Content Fields (excerpts) <span class="slide-counter"><span class="count">1</span>  /  2</span></p>

</div></div></div></div><div class="multi-clms col-md-8 col-lg-7 flex-diagram az-main-col-content az-module az-col-pos-middle az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div data-animation-type="ani-in" data-animation-in="fadeInRight" data-animation-out="none" data-animation-speed="default" data-animation-delay="0" data-offset-down="85" data-offset-up="none" class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default animate-content"><div class="single-clms col-md-12 border-round flex-padding big-cards az-main-col-content az-module az-v-space-clm no-animate-content az-module-bg-color"><div class="az-col az-clm-padding-60" >
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #F9F9F9;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper az-single-svg-image az-margin-top-0 az-margin-bottom-0 align-center no-animate-content hidden-sm hidden-xs">
<div class="az-svg-img-wrapper">
        <div class="az-svg-embed-code" data-duration="1000" data-delay="200" data-easing="linear" data-reverse="false">
                    <div id="diagram-3" class="diagram">

            <!-- BASE SVG: static elements -->
            <svg viewBox="0 0 800 460" style="position: relative;">
                
                <!-- Horizontal connecting lines between columns (neutral grey) -->
                <line class="line highlight" x1="192.75" y1="45" x2="310" y2="45"></line>
                <line class="line highlight" x1="492.75" y1="45" x2="610" y2="45"></line>
                
                <!-- Vertical connecting lines between row 5 and row 6 -->
                <line class="line" x1="100" y1="363.5" x2="100" y2="390"></line>
                <line class="line" x1="400" y1="363.5" x2="400" y2="390"></line>
                <line class="line" x1="700" y1="363.5" x2="700" y2="390"></line>
                
                <!-- Column blank placeholders -->
                <foreignObject x="10" y="20" width="180" height="50"><div class="card highlight blank"></div></foreignObject>
                <foreignObject x="310" y="20" width="180" height="50"><div class="card highlight blank"></div></foreignObject>
                <foreignObject x="610" y="20" width="180" height="50"><div class="card highlight blank"></div></foreignObject>

                <foreignObject x="10" y="90" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="10" y="150" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="10" y="210" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="10" y="270" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="10" y="330" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="10" y="390" width="180" height="50"><div class="card blank"></div></foreignObject>

                <foreignObject x="310" y="90" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="310" y="150" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="310" y="210" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="310" y="270" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="310" y="330" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="310" y="390" width="180" height="50"><div class="card blank"></div></foreignObject>

                <foreignObject x="610" y="90" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="610" y="150" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="610" y="210" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="610" y="270" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="610" y="330" width="180" height="50"><div class="card blank"></div></foreignObject>
                <foreignObject x="610" y="390" width="180" height="50"><div class="card blank"></div></foreignObject>

            </svg>

            <!-- LEFT COLUMN: Services / Teams -->
            <svg id="col-left-1" viewBox="0 0 800 460">
                <foreignObject x="10" y="20" width="180" height="50">
                    <div class="card highlight highlight-1">Services</div>
                </foreignObject>
            </svg>
            <svg id="col-left-1-field-1" viewBox="0 0 800 460">
                <foreignObject x="10" y="90" width="180" height="50"><div class="card">Summary</div></foreignObject>
            </svg>
            <svg id="col-left-1-field-2" viewBox="0 0 800 460">
                <foreignObject x="10" y="150" width="180" height="50"><div class="card">Body</div></foreignObject>
            </svg>
            <svg id="col-left-1-field-3" viewBox="0 0 800 460">
                <foreignObject x="10" y="210" width="180" height="50"><div class="card">Country</div></foreignObject>
            </svg>
            <svg id="col-left-1-field-4" viewBox="0 0 800 460">
                <foreignObject x="10" y="270" width="180" height="50"><div class="card">Branch</div></foreignObject>
            </svg>
            <svg id="col-left-1-field-5" viewBox="0 0 800 460">
                <foreignObject x="10" y="330" width="180" height="50"><div class="card highlight-3">Color Theme</div></foreignObject>
            </svg>
            <svg id="col-left-1-field-6" viewBox="0 0 800 460">
                <foreignObject x="10" y="390" width="180" height="50"><div class="card highlight-2">Location Key</div></foreignObject>
            </svg>

            <svg id="col-left-2" viewBox="0 0 800 460">
                <foreignObject x="10" y="20" width="180" height="50">
                    <div class="card highlight highlight-1">Teams</div>
                </foreignObject>
            </svg>
            <svg id="col-left-2-field-1" viewBox="0 0 800 460">
                <foreignObject x="10" y="90" width="180" height="50"><div class="card">Images</div></foreignObject>
            </svg>
            <svg id="col-left-2-field-2" viewBox="0 0 800 460">
                <foreignObject x="10" y="150" width="180" height="50"><div class="card">Related Offices</div></foreignObject>
            </svg>
            <svg id="col-left-2-field-3" viewBox="0 0 800 460">
                <foreignObject x="10" y="210" width="180" height="50"><div class="card">Members</div></foreignObject>
            </svg>
            <svg id="col-left-2-field-4" viewBox="0 0 800 460">
                <foreignObject x="10" y="270" width="180" height="50"><div class="card">Bio & Function</div></foreignObject>
            </svg>
            <svg id="col-left-2-field-5" viewBox="0 0 800 460">
                <foreignObject x="10" y="330" width="180" height="50"><div class="card">Expertise</div></foreignObject>
            </svg>

            <!-- MIDDLE COLUMN: Case Studies / Offices -->
            <svg id="col-middle-1" viewBox="0 0 800 460">
                <foreignObject x="310" y="20" width="180" height="50">
                    <div class="card highlight highlight-1">Case Studies</div>
                </foreignObject>
            </svg>
            <svg id="col-middle-1-field-1" viewBox="0 0 800 460">
                <foreignObject x="310" y="90" width="180" height="50"><div class="card">Header Image</div></foreignObject>
            </svg>
            <svg id="col-middle-1-field-2" viewBox="0 0 800 460">
                <foreignObject x="310" y="150" width="180" height="50"><div class="card">Summary</div></foreignObject>
            </svg>
            <svg id="col-middle-1-field-3" viewBox="0 0 800 460">
                <foreignObject x="310" y="210" width="180" height="50"><div class="card">Body</div></foreignObject>
            </svg>
            <svg id="col-middle-1-field-4" viewBox="0 0 800 460">
                <foreignObject x="310" y="270" width="180" height="50"><div class="card">Region</div></foreignObject>
            </svg>
            <svg id="col-middle-1-field-5" viewBox="0 0 800 460">
                <foreignObject x="310" y="330" width="180" height="50"><div class="card">Service Branch</div></foreignObject>
            </svg>
            <svg id="col-middle-1-field-6" viewBox="0 0 800 460">
                <foreignObject x="310" y="390" width="180" height="50"><div class="card highlight-2">Location Key</div></foreignObject>
            </svg>

            <svg id="col-middle-2" viewBox="0 0 800 460">
                <foreignObject x="310" y="20" width="180" height="50">
                    <div class="card highlight highlight-1">Offices</div>
                </foreignObject>
            </svg>
            <svg id="col-middle-2-field-1" viewBox="0 0 800 460">
                <foreignObject x="310" y="90" width="180" height="50"><div class="card">Description</div></foreignObject>
            </svg>
            <svg id="col-middle-2-field-2" viewBox="0 0 800 460">
                <foreignObject x="310" y="150" width="180" height="50"><div class="card">Address</div></foreignObject>
            </svg>
            <svg id="col-middle-2-field-3" viewBox="0 0 800 460">
                <foreignObject x="310" y="210" width="180" height="50"><div class="card">Map Link</div></foreignObject>
            </svg>
            <svg id="col-middle-2-field-4" viewBox="0 0 800 460">
                <foreignObject x="310" y="270" width="180" height="50"><div class="card">Related Teams</div></foreignObject>
            </svg>
            <svg id="col-middle-2-field-5" viewBox="0 0 800 460">
                <foreignObject x="310" y="330" width="180" height="50"><div class="card">Images</div></foreignObject>
            </svg>

            <!-- RIGHT COLUMN: RI Platform / Quotes -->
            <svg id="col-right-1" viewBox="0 0 800 460">
                <foreignObject x="610" y="20" width="180" height="50">
                    <div class="card highlight highlight-1">RI Platform</div>
                </foreignObject>
            </svg>
            <svg id="col-right-1-field-1" viewBox="0 0 800 460">
                <foreignObject x="610" y="90" width="180" height="50"><div class="card">RI Domains</div></foreignObject>
            </svg>
            <svg id="col-right-1-field-2" viewBox="0 0 800 460">
                <foreignObject x="610" y="150" width="180" height="50"><div class="card">Platform Link</div></foreignObject>
            </svg>
            <svg id="col-right-1-field-3" viewBox="0 0 800 460">
                <foreignObject x="610" y="210" width="180" height="50"><div class="card">Download Link</div></foreignObject>
            </svg>
            <svg id="col-right-1-field-4" viewBox="0 0 800 460">
                <foreignObject x="610" y="270" width="180" height="50"><div class="card highlight-3">Color Theme</div></foreignObject>
            </svg>
            <svg id="col-right-1-field-5" viewBox="0 0 800 460">
                <foreignObject x="610" y="330" width="180" height="50"><div class="card highlight-2">Menu Key</div></foreignObject>
            </svg>
            <svg id="col-right-1-field-6" viewBox="0 0 800 460">
                <foreignObject x="610" y="390" width="180" height="50"><div class="card highlight-2">Location Key</div></foreignObject>
            </svg>

            <svg id="col-right-2" viewBox="0 0 800 460">
                <foreignObject x="610" y="20" width="180" height="50">
                    <div class="card highlight highlight-1">Quotes</div>
                </foreignObject>
            </svg>
            <svg id="col-right-2-field-1" viewBox="0 0 800 460">
                <foreignObject x="610" y="90" width="180" height="50"><div class="card">Quote Text</div></foreignObject>
            </svg>
            <svg id="col-right-2-field-2" viewBox="0 0 800 460">
                <foreignObject x="610" y="150" width="180" height="50"><div class="card">Author</div></foreignObject>
            </svg>
            <svg id="col-right-2-field-3" viewBox="0 0 800 460">
                <foreignObject x="610" y="210" width="180" height="50"><div class="card">Role</div></foreignObject>
            </svg>
            <svg id="col-right-2-field-4" viewBox="0 0 800 460">
                <foreignObject x="610" y="270" width="180" height="50"><div class="card">Highlight Split</div></foreignObject>
            </svg>
            <svg id="col-right-2-field-5" viewBox="0 0 800 460">
                <foreignObject x="610" y="330" width="180" height="50"><div class="card">Expertise</div></foreignObject>
            </svg>

        </div>
        </div>
</div>
</div>
<div class="az-content-element-wrapper az-single-svg-image az-margin-top-0 az-margin-bottom-0 align-center no-animate-content hidden-lg hidden-md">
<div class="az-svg-img-wrapper">
        <div class="az-svg-embed-code" data-duration="1000" data-delay="200" data-easing="linear" data-reverse="false">
            <div id="diagram-3" class="diagram">

    <!-- BASE SVG: static elements -->
    <svg viewBox="18 0 682 480" style="position: relative;">
        
        <!-- Horizontal connecting lines between columns -->
        <line class="line highlight" x1="123" y1="45" x2="360" y2="45"></line>
        <line class="line highlight" x1="363" y1="45" x2="600" y2="45"></line>
        
        <!-- Vertical connecting lines between row 5 and row 6 -->
        <line class="line" x1="120" y1="400" x2="120" y2="420"></line>
        <line class="line" x1="360" y1="400" x2="360" y2="420"></line>
        <line class="line" x1="600" y1="400" x2="600" y2="420"></line>
        
        <!-- Column blank placeholders -->
        <foreignObject x="30" y="20" width="180" height="50"><div class="card highlight blank"></div></foreignObject>
        <foreignObject x="270" y="20" width="180" height="50"><div class="card highlight blank"></div></foreignObject>
        <foreignObject x="510" y="20" width="180" height="50"><div class="card highlight blank"></div></foreignObject>

        <foreignObject x="30" y="95" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="30" y="160" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="30" y="225" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="30" y="290" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="30" y="355" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="30" y="420" width="180" height="50"><div class="card blank"></div></foreignObject>

        <foreignObject x="270" y="95" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="270" y="160" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="270" y="225" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="270" y="290" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="270" y="355" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="270" y="420" width="180" height="50"><div class="card blank"></div></foreignObject>

        <foreignObject x="510" y="95" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="510" y="160" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="510" y="225" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="510" y="290" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="510" y="355" width="180" height="50"><div class="card blank"></div></foreignObject>
        <foreignObject x="510" y="420" width="180" height="50"><div class="card blank"></div></foreignObject>

    </svg>

    <!-- LEFT COLUMN: Services / Teams -->
    <svg id="col-left-1" viewBox="18 0 682 480">
        <foreignObject x="30" y="20" width="180" height="50">
            <div class="card highlight highlight-1">Services</div>
        </foreignObject>
    </svg>
    <svg id="col-left-1-field-1" viewBox="18 0 682 480">
        <foreignObject x="30" y="95" width="180" height="50"><div class="card">Summary</div></foreignObject>
    </svg>
    <svg id="col-left-1-field-2" viewBox="18 0 682 480">
        <foreignObject x="30" y="160" width="180" height="50"><div class="card">Body</div></foreignObject>
    </svg>
    <svg id="col-left-1-field-3" viewBox="18 0 682 480">
        <foreignObject x="30" y="225" width="180" height="50"><div class="card">Country</div></foreignObject>
    </svg>
    <svg id="col-left-1-field-4" viewBox="18 0 682 480">
        <foreignObject x="30" y="290" width="180" height="50"><div class="card">Branch</div></foreignObject>
    </svg>
    <svg id="col-left-1-field-5" viewBox="18 0 682 480">
        <foreignObject x="30" y="355" width="180" height="50"><div class="card highlight-3">Color Theme</div></foreignObject>
    </svg>
    <svg id="col-left-1-field-6" viewBox="18 0 682 480">
        <foreignObject x="30" y="420" width="180" height="50"><div class="card highlight-2">Location Key</div></foreignObject>
    </svg>

    <svg id="col-left-2" viewBox="18 0 682 480">
        <foreignObject x="30" y="20" width="180" height="50">
            <div class="card highlight highlight-1">Teams</div>
        </foreignObject>
    </svg>
    <svg id="col-left-2-field-1" viewBox="18 0 682 480">
        <foreignObject x="30" y="95" width="180" height="50"><div class="card">Images</div></foreignObject>
    </svg>
    <svg id="col-left-2-field-2" viewBox="18 0 682 480">
        <foreignObject x="30" y="160" width="180" height="50"><div class="card">Related Offices</div></foreignObject>
    </svg>
    <svg id="col-left-2-field-3" viewBox="18 0 682 480">
        <foreignObject x="30" y="225" width="180" height="50"><div class="card">Members</div></foreignObject>
    </svg>
    <svg id="col-left-2-field-4" viewBox="18 0 682 480">
        <foreignObject x="30" y="290" width="180" height="50"><div class="card">Bio & Function</div></foreignObject>
    </svg>
    <svg id="col-left-2-field-5" viewBox="18 0 682 480">
        <foreignObject x="30" y="355" width="180" height="50"><div class="card">Expertise</div></foreignObject>
    </svg>

    <!-- MIDDLE COLUMN: Case Studies / Offices -->
    <svg id="col-middle-1" viewBox="18 0 682 480">
        <foreignObject x="270" y="20" width="180" height="50">
            <div class="card highlight highlight-1">Case Studies</div>
        </foreignObject>
    </svg>
    <svg id="col-middle-1-field-1" viewBox="18 0 682 480">
        <foreignObject x="270" y="95" width="180" height="50"><div class="card">Header Image</div></foreignObject>
    </svg>
    <svg id="col-middle-1-field-2" viewBox="18 0 682 480">
        <foreignObject x="270" y="160" width="180" height="50"><div class="card">Summary</div></foreignObject>
    </svg>
    <svg id="col-middle-1-field-3" viewBox="18 0 682 480">
        <foreignObject x="270" y="225" width="180" height="50"><div class="card">Body</div></foreignObject>
    </svg>
    <svg id="col-middle-1-field-4" viewBox="18 0 682 480">
        <foreignObject x="270" y="290" width="180" height="50"><div class="card">Region</div></foreignObject>
    </svg>
    <svg id="col-middle-1-field-5" viewBox="18 0 682 480">
        <foreignObject x="270" y="355" width="180" height="50"><div class="card">Service Branch</div></foreignObject>
    </svg>
    <svg id="col-middle-1-field-6" viewBox="18 0 682 480">
        <foreignObject x="270" y="420" width="180" height="50"><div class="card highlight-2">Location Key</div></foreignObject>
    </svg>

    <svg id="col-middle-2" viewBox="18 0 682 480">
        <foreignObject x="270" y="20" width="180" height="50">
            <div class="card highlight highlight-1">Offices</div>
        </foreignObject>
    </svg>
    <svg id="col-middle-2-field-1" viewBox="18 0 682 480">
        <foreignObject x="270" y="95" width="180" height="50"><div class="card">Description</div></foreignObject>
    </svg>
    <svg id="col-middle-2-field-2" viewBox="18 0 682 480">
        <foreignObject x="270" y="160" width="180" height="50"><div class="card">Address</div></foreignObject>
    </svg>
    <svg id="col-middle-2-field-3" viewBox="18 0 682 480">
        <foreignObject x="270" y="225" width="180" height="50"><div class="card">Map Link</div></foreignObject>
    </svg>
    <svg id="col-middle-2-field-4" viewBox="18 0 682 480">
        <foreignObject x="270" y="290" width="180" height="50"><div class="card">Related Teams</div></foreignObject>
    </svg>
    <svg id="col-middle-2-field-5" viewBox="18 0 682 480">
        <foreignObject x="270" y="355" width="180" height="50"><div class="card">Images</div></foreignObject>
    </svg>

    <!-- RIGHT COLUMN: RI Platform / Quotes -->
    <svg id="col-right-1" viewBox="18 0 682 480">
        <foreignObject x="510" y="20" width="180" height="50">
            <div class="card highlight highlight-1">RI Platform</div>
        </foreignObject>
    </svg>
    <svg id="col-right-1-field-1" viewBox="18 0 682 480">
        <foreignObject x="510" y="95" width="180" height="50"><div class="card">RI Domains</div></foreignObject>
    </svg>
    <svg id="col-right-1-field-2" viewBox="18 0 682 480">
        <foreignObject x="510" y="160" width="180" height="50"><div class="card">Platform Link</div></foreignObject>
    </svg>
    <svg id="col-right-1-field-3" viewBox="18 0 682 480">
        <foreignObject x="510" y="225" width="180" height="50"><div class="card">Download Link</div></foreignObject>
    </svg>
    <svg id="col-right-1-field-4" viewBox="18 0 682 480">
        <foreignObject x="510" y="290" width="180" height="50"><div class="card highlight-3">Color Theme</div></foreignObject>
    </svg>
    <svg id="col-right-1-field-5" viewBox="18 0 682 480">
        <foreignObject x="510" y="355" width="180" height="50"><div class="card highlight-2">Menu Key</div></foreignObject>
    </svg>
    <svg id="col-right-1-field-6" viewBox="18 0 682 480">
        <foreignObject x="510" y="420" width="180" height="50"><div class="card highlight-2">Location Key</div></foreignObject>
    </svg>

    <svg id="col-right-2" viewBox="18 0 682 480">
        <foreignObject x="510" y="20" width="180" height="50">
            <div class="card highlight highlight-1">Quotes</div>
        </foreignObject>
    </svg>
    <svg id="col-right-2-field-1" viewBox="18 0 682 480">
        <foreignObject x="510" y="95" width="180" height="50"><div class="card">Quote Text</div></foreignObject>
    </svg>
    <svg id="col-right-2-field-2" viewBox="18 0 682 480">
        <foreignObject x="510" y="160" width="180" height="50"><div class="card">Author</div></foreignObject>
    </svg>
    <svg id="col-right-2-field-3" viewBox="18 0 682 480">
        <foreignObject x="510" y="225" width="180" height="50"><div class="card">Role</div></foreignObject>
    </svg>
    <svg id="col-right-2-field-4" viewBox="18 0 682 480">
        <foreignObject x="510" y="290" width="180" height="50"><div class="card">Highlight Split</div></foreignObject>
    </svg>
    <svg id="col-right-2-field-5" viewBox="18 0 682 480">
        <foreignObject x="510" y="355" width="180" height="50"><div class="card">Expertise</div></foreignObject>
    </svg>

</div>
        </div>
</div>
</div></div></div></div></div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block flex-margin az-font-custom az-font-size-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="text-align: right;"><i class="az-icon az-icon-flow-line" style="margin-right: 3px; top: 2px; font-size: 14px; position: relative;"></i>Content Fields, Styling, Placement Controls (simplified)</p>

</div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 90px;"></div></div></div></div></div></div></div><div id="chapter-4" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default az-section-with-equal no-animate-content az-module-default"><div class="container-fluid az-container-no-padding"><div class="row row-parent az-gutter-0 az-equal"><div id="acf-fields-wrap" class="single-clms col-md-6 col-lg-push-0 first-slide az-main-col-content az-module az-col-pos-middle no-animate-content az-module-bg-color"><div class="az-col az-clm-padding-0" >
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #F9F9F9;"></div>
            
        </div><div class="az-col-cont">
<div class="az-content-element-wrapper wpb_raw_html az-margin-top-0 az-margin-bottom-0">
    <div class="wpb_wrapper">
        <link rel="stylesheet" href="https://www.elementi-design.com/wp-content/css/acf-admin-polish.css" />   
 
  <!-- ACF 1 -->
  <div class="acf-slide">
    <div class="acf-container animate-content" data-animation-type="ani-in" data-animation-out="none" data-offset-down="75">
      <div class="meta-box-sortables ui-sortable">
        <div class="postbox acf-postbox seamless">
          <div class="inside acf-fields">
            <div class="acf-field acf-field-textarea acf-field-quote-text" data-name="quote_text" data-type="textarea" data-key="field_quote_text">
              <div class="acf-label">
                <label for="acf-field_quote_text">Quote Text</label>
              </div>
              <div class="acf-input">
                <textarea id="acf-field_quote_text" name="acf[field_quote_text]" rows="4">“Picture developing your breakthrough therapies and seeing them impact lives worldwide—without the weight of regulatory hurdles holding you back.”</textarea>
              </div>
            </div>
            <div class="acf-field acf-field-text acf-field-quote-author" data-name="quote_author" data-type="text" data-key="field_quote_author">
              <div class="acf-label">
                <label for="acf-field_quote_author">Author Name</label>
              </div>
              <div class="acf-input">
                <div class="acf-input-wrap">
                  <input type="text" id="acf-field_quote_author" name="acf[field_quote_author]" value="Xxxxx Xxxxx">
                </div>
              </div>
            </div>
            <div class="acf-field acf-field-text acf-field-quote-role" data-name="quote_role" data-type="text" data-key="field_quote_role">
              <div class="acf-label">
                <label for="acf-field_quote_role">Author Role/Title</label>
              </div>
              <div class="acf-input">
                <div class="acf-input-wrap">
                  <input type="text" id="acf-field_quote_role" name="acf[field_quote_role]" value="CEO and Founder, XXX">
                </div>
              </div>
            </div>
            <div class="acf-field acf-field-text acf-field-quote-split" data-name="split" data-type="text" data-key="field_quote_split">
              <div class="acf-label">
                <label for="acf-field_quote_split">Highlight Split Word</label><i class="fa fa-question"></i>
                <p class="description">Word where highlight begins (maps to data-split). Leave empty for no highlight.</p>
              </div>
              <div class="acf-input">
                <div class="acf-input-wrap">
                  <input type="text" id="acf-field_quote_split" name="acf[field_quote_split]" value="worldwide—without">
                </div>
              </div>
            </div>
            <div class="acf-field acf-field-text acf-field-quote-location-id is-required" data-name="location_id" data-type="text" data-key="field_quote_location_id" data-required="1">
              <div class="acf-label">
                <label for="acf-field_quote_location_id">Target Section ID <span class="acf-required">*</span></label><i class="fa fa-question"></i>
                <p class="description">Select the section ID(s) where this quote should appear.</p>
              </div>
              <div class="acf-input">
                <input type="hidden" id="acf-field_case_study_service_items-input" name="acf[field_case_study_service_items]" />
                <span class="select2 select2-container select2-container--default -acf" dir="ltr" data-select2-id="1" style="width: 100%;">
                  <span class="selection">
                    <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
                      <ul class="select2-selection__rendered ui-sortable">
                        <li class="select2-selection__choice ui-sortable-handle" title="" data-select2-id="4">
                          <span class="select2-selection__choice__remove" role="presentation">×</span>
                          <span class="acf-selection">quote-the-xxx-story</span>
                        </li>
                      </ul>
                    </span>
                  </span>
                  <span class="dropdown-wrapper" aria-hidden="true"></span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ACF 2 -->
  <div id="scene-1" class="acf-slide">
    <div class="acf-container animate-content" data-animation-type="ani-in" data-animation-out="none" data-offset-down="0">
      <div class="meta-box-sortables ui-sortable">
        <div class="postbox acf-postbox seamless">
          <div class="inside acf-fields">
            <div class="acf-field acf-field-image acf-field-case-study-header-image" data-name="header_image" data-type="image" data-key="field_case_study_header_image">
              <div class="acf-label">
                <label for="acf-field_case_study_header_image">Header Image</label>
                <p class="description">Primary visual for the case study card or header.</p>
              </div>
              <div class="acf-input">
                <div class="acf-image-uploader has-value" data-preview_size="medium" data-library="all" data-mime_types="" data-uploader="wp">
                  <input type="hidden" name="acf[field_case_study_header_image]" value="339" />
                  <div class="show-if-value image-wrap" style="max-width: 270px" tabindex="0" role="button" aria-label="Selected image. Press tab to access image options.">
                    <img decoding="async" src="https://company.globalregulatorypartners.com/wp-content/uploads/2026/02/methode-times-prodmigration-web-bin-7d3827de-e1a1-3c4a-9456-28edc25efbca.jpg" alt="" data-name="image" style="max-height: 300px;" />
                  </div>
                </div>
              </div>
            </div>
            <div class="acf-field acf-field-textarea acf-field-case-study-summary" data-name="summary" data-type="textarea" data-key="field_case_study_summary">
              <div class="acf-label">
                <label for="acf-field_case_study_summary">Summary</label><i class="fa fa-question"></i>
                <p class="description">Short description used in cards or previews.</p>
              </div>
              <div class="acf-input">
                <textarea id="acf-field_case_study_summary" name="acf[field_case_study_summary]" rows="2">A European mid-size pharmaceutical company that developed a new drug for the treatment of prostate cancer. The client wanted to register the NDA of the new drug with US FDA.</textarea>
              </div>
            </div>
            <div class="acf-field acf-field-select acf-field-case-study-color-theme color-select-palette" data-name="case_study_color_theme" data-type="select" data-key="field_case_study_color_theme">
              <div class="acf-label">
                <label for="acf-field_case_study_color_theme">Case Study - Color Theme</label><i class="fa fa-question"></i>
              </div>
              <div class="acf-input">
                <select id="acf-field_case_study_color_theme" name="acf[field_case_study_color_theme]" style="display: none;">
                  <option value="1">Theme 1</option>
                  <option value="2">Theme 2</option>
                  <option value="3">Theme 3</option>
                  <option value="4">Theme 4</option>
                  <option value="5" selected="selected" data-i="0">Theme 5</option>
                </select>
                <div class="color-select-dropdown">
                  <div class="color-option-wrapper">
                    <div class="color-option" data-value="1" style="background-color: rgb(0, 62, 177);"></div>
                    <div class="color-number">1</div>
                  </div>
                  <div class="color-option-wrapper">
                    <div class="color-option" data-value="2" style="background-color: rgb(0, 177, 153);"></div>
                    <div class="color-number">2</div>
                  </div>
                  <div class="color-option-wrapper">
                    <div class="color-option" data-value="3" style="background-color: rgb(102, 177, 0);"></div>
                    <div class="color-number">3</div>
                  </div>
                  <div class="color-option-wrapper">
                    <div class="color-option" data-value="4" style="background-color: rgb(218, 127, 0);"></div>
                    <div class="color-number">4</div>
                  </div>
                  <div class="color-option-wrapper">
                    <div class="color-option selected" data-value="5" style="background-color: rgb(153, 0, 177);"></div>
                    <div class="color-number">5</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="acf-field acf-field-post-object acf-field-case-study-service-items" data-name="service_items" data-type="post_object" data-key="field_case_study_service_items">
              <div class="acf-label">
                <label for="acf-field_case_study_service_items">Service Items</label><i class="fa fa-question"></i>
                <p class="description">Optional. Select related XXX Service Items.</p>
              </div>
              <div class="acf-input">
                <input type="hidden" id="acf-field_case_study_service_items-input" name="acf[field_case_study_service_items]" />
                <span class="select2 select2-container select2-container--default -acf" dir="ltr" data-select2-id="1" style="width: 100%;">
                  <span class="selection">
                    <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
                      <ul class="select2-selection__rendered ui-sortable">
                        <li class="select2-selection__choice ui-sortable-handle" title="Foreign Manufacture Accreditation (FMA)" data-select2-id="4">
                          <span class="select2-selection__choice__remove" role="presentation">×</span>
                          <span class="acf-selection">Foreign Manufacture Accreditation<span class="no-mobile"> (FMA)</span></span>
                        </li>
                        <li class="select2-selection__choice ui-sortable-handle no-mobile" title="Product Registration" data-select2-id="5">
                          <span class="select2-selection__choice__remove" role="presentation">×</span>
                          <span class="acf-selection">Product Registration</span>
                        </li>
                      </ul>
                    </span>
                  </span>
                  <span class="dropdown-wrapper" aria-hidden="true"></span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


    </div>
</div>
<div data-font-min="11" data-font-max="11" data-font-buffer="50" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-google-custom az-margin-top-0 az-margin-bottom-30 no-animate-content hidden-lg hidden-md" style="font-weight: 300; line-height: 100%; font-family:Poppins;">
    <p style="padding-left: 30px;"><i class="glyphicon glyphicon-pencil" style="margin-right: 6px; top: 2px; font-size: 12px; position: relative;"></i>Editor Content Fields (excerpts) <span class="slide-counter"><span class="count">1</span>  /  2</span></p>

</div>
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
        <script>
document.addEventListener("DOMContentLoaded", function() {

  const wrap = document.querySelector("#acf-fields-wrap");
  if (!wrap) return;

  const slides = wrap.querySelectorAll(".acf-slide");
  const slide1 = slides[0];
  const slide2 = slides[1];
  if (!slide1 || !slide2) return;

  // The first direct child with .animate-content
  const slide2Content = slide2.querySelector(".animate-content");
  const count = document.querySelectorAll('.count');

  let hasSwitched = false;

  // Stack slides
  gsap.set(slide1, { yPercent: 0 });
  gsap.set(slide2, { yPercent: 100 });

  wrap.addEventListener("click", function() {
    if (hasSwitched) return;
    hasSwitched = true;

    const tl = gsap.timeline();

    tl.to(slide1, {
      yPercent: -100,
      duration: 1,
      ease: "power3.inOut"
    }, 0)
    .to(slide2, {
      yPercent: 0,
      duration: 1,
      ease: "power3.inOut"
    }, 0)
    .add(() => {
      slide2Content.classList.add("animated");
      wrap.classList.remove("first-slide");
    }, "-=0.6");
    
    count.forEach(el => {
      el.textContent = '2';
    });

  });

});
</script>
    </div>
</div></div></div></div><div class="single-clms col-md-6 flex-padding-90 mobile-no-top mobile-no-bottom az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-90" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 8vmax;"></div><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 80px;"></div><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="single-clms col-md-10 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-20 az-text-uppercase no-animate-content">
    <h5 style="text-align: left;">Invisible Complexity, Visible Clarity.</h5>

</div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p>Visitors experience clarity. They see relevant services, accurate information, and meaningful connections. What they don’t see is the complexity behind it – the structure quietly ensuring everything appears where it should. Imagine a living knowledge base, where staff and designers determine the placement and connections of each piece.</p>

</div></div></div></div><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div><div class="row row-inner az-padding-top-50 az-padding-bottom-0 az-gutter-default no-animate-content"><div class="multi-clms col-md-2 hidden-sm hidden-xs az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-10 az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: right;">For editors, this changes everything. Instead of fighting the system, they work with it. And instead of maintaining pages, they maintain knowledge.</p>

</div></div></div></div></div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 75px;"></div></div></div></div></div></div></div><div id="result" class="az-main-section-content az-module az-padding-top-0 az-padding-bottom-0 az-section-default no-animate-content az-module-default"><div class="container-fluid"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content hidden-md hidden-sm hidden-xs"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 3vw;"></div></div></div></div></div><div class="row row-inner az-padding-top-50 az-padding-bottom-60 az-gutter-0 no-animate-content"><div class="single-clms col-md-2 col-md-push-8 az-main-col-content az-module az-v-space-clm align-right no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-lg hidden-md" style="height: 30px;"></div>
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 az-text-uppercase no-animate-content">
    <h5 style="text-align: right;">The Result.</h5>

</div></div></div></div><div class="single-clms col-md-8 flex-padding az-main-col-content az-module no-animate-content az-module-default"><div class="az-col az-clm-padding-50" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <p style="text-align: center;">What we built was more than a website. It was an infrastructure for communication — designed to support global scale, organizational complexity, and long-term growth. Even the backend was intentionally structured: custom-designed fields and editorial interfaces ensure that content is entered in the right way, from the very beginning. Because when the structure is right, everything else follows.</p>

</div></div></div></div></div><div class="row row-inner az-padding-top-0 az-padding-bottom-0 az-gutter-default no-animate-content hidden-md hidden-sm hidden-xs"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider" style="height: 3vw;"></div></div></div></div></div><div class="az-content-element-wrapper az-divider-wrapper"><span class="az-divider light-border az-d-solid az-d-center az-margin-top-0 az-margin-bottom-80 az-divider-simple no-animate-content" style="width: 70%; border-top-width: 1px;"></span></div><div class="row row-inner az-padding-top-75 az-padding-bottom-75 az-gutter-default no-animate-content hidden-lg"><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="600" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container" style="font-size: 21px;"><i class="az-icon az-icon-open"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Scalable Structure</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="750" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-server"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Single Source of Truth</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="900" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="fa fa-magic"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Future-Proof Frontend</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-3 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="1050" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container" style="font-size: 23px;"><i class="glyphicon glyphicon-pencil"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Editorial Freedom</h3></div></div>
</div>
</div></div></div></div><div class="row row-inner az-padding-top-75 az-padding-bottom-75 az-gutter-default no-animate-content hidden-md hidden-sm hidden-xs"><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="600" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container" style="font-size: 21px;"><i class="az-icon az-icon-open"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Scalable Structure</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="750" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="az-icon az-icon-server"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Single Source of Truth</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="900" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container"><i class="fa fa-magic"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Future-Proof Frontend</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-animation-type="ani-in" data-animation-in="bounceIn" data-animation-out="none" data-animation-speed="default" data-animation-delay="1050" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-box-icon-wrapper az-margin-top-0 az-margin-bottom-0 animate-content">
    <div class="az-box-icon az-box-icon-top">
            <div class="az-icon-container" style="font-size: 23px;"><i class="glyphicon glyphicon-pencil"></i>
            </div><div class="az-box-icon-content"><h3 class="az-box-icon-title">Editorial Freedom</h3></div></div>
</div>
</div></div></div><div class="single-clms col-md-2 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"></div></div></div></div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-75 az-padding-bottom-75 az-section-default no-animate-content az-module-bg-color">
        <div class="az-module-wrap-bg">
            <div class="az-module-wrapper-bg" style="background: #141618;"></div>
            
        </div><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont"><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 45px;"></div>
<div class="az-content-element-wrapper az-text-block az-font-custom az-font-color-custom az-margin-top-0 az-margin-bottom-0 az-text-uppercase no-animate-content" style="color: #ffffff;">
    <h5 style="font-size: 1.8rem;">What could the right structure unlock for your organization?</h5>

</div>
<div data-font-min="18.5" data-font-max="20" data-font-buffer="77" class="az-content-element-wrapper az-text-block az-font-custom az-font-size-custom az-font-color-custom az-font-google-custom az-margin-top-30 az-margin-bottom-0 no-animate-content" style="font-weight: 300; letter-spacing: 0.5px; line-height: 159%; color: rgba(255,255,255,0.75); font-family:Playfair Display;">
    <p style="text-align: left;"><em>Contact us or simply leave a comment below and we will get back to you.</em></p>

</div>
<div data-animation-type="ani-in" data-animation-in="fadeInUp" data-animation-out="none" data-animation-speed="default" data-animation-delay="750" data-offset-down="75" data-offset-up="none" class="az-content-element-wrapper az-button-wrapper az-margin-top-50 az-margin-bottom-0 align-left animate-content">
	<a class="az-btn az-btn-icon az-btn-normal az-btn-circle az-btn-custom-colors" href="https://www.elementi-design.com/contact/" title="Contact Us and Get Started" data-btn-bg="#ffffff" data-btn-text="#000000" style="background: #ffffff; color: #000000;"><i class="az-icon az-icon-speech-bubble"></i></a><span class="az-btn-icon-text" style="color: #ffffff;">Start a Conversation</span>
</div><div class="az-content-element-wrapper az-empty-divider hidden-sm hidden-xs" style="height: 45px;"></div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-70 az-padding-bottom-70 az-section-default az-section-divider no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper az-text-block az-margin-top-0 az-margin-bottom-0 no-animate-content">
    <h3>Related Articles</h3>

</div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-90 az-padding-bottom-90 az-section-default no-animate-content az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div data-isotope-filter="false" class="az-content-element-wrapper az-module-grid-wrapper az-related-post-shortcode az-margin-top-0 az-margin-bottom-0">
    <div class="az-module-wrapper az-isotope-wrapper az-gutter-0">
        <div id="related-post-9e3dcdd" class="az-module-grid az-module-container az-isotope-container az-isotope-general" data-animation-fx="yes" data-animation-in="fadeInRight" data-animation-speed="default" data-animation-delay="300" data-offset-down="85" data-cols="3" data-def-col="3" data-lg-col="3" data-md-col="3" data-sm-col="2" data-xs-col="1">
            <div class="grid-sizer"></div>
            <div class="az-module-grid-item az-grid-item animate-grid-content az-hover-fx-wrapper az-hover-fx-fade-in"><a class="az-grid-item-link" href="https://www.elementi-design.com/color-modules/" title="Color Modules"><div class="az-hover-fx-overlay-bg az-dark-type"><div class="az-grid-item-box-wrapper"><div class="az-grid-item-box-content az-item-l-t"></div></div></div><img fetchpriority="high" decoding="async" src="https://www.elementi-design.com/wp-content/uploads/2024/05/color-modules-preview-1500x1500.png" srcset="https://www.elementi-design.com/wp-content/uploads/2024/05/color-modules-preview-1500x1500-480x480.png 480w, https://www.elementi-design.com/wp-content/uploads/2024/05/color-modules-preview-1500x1500-960x960.png 960w, https://www.elementi-design.com/wp-content/uploads/2024/05/color-modules-preview-1500x1500.png 1280w" sizes="(min-width: 320px) 100vw, 100vw" width="1500" height="1500" alt="Color Modules" /></a><div class="az-grid-item-entry-meta align-left"><div class="az-grid-item-entry-title"><h2 class="az-grid-item-meta-title"><a href="https://www.elementi-design.com/color-modules/" title="Color Modules">Color Modules</a></h2></div><div class="az-grid-item-entry-attributes"><span class="az-grid-item-meta-subtitle"><a href="https://www.elementi-design.com/category/experimentation/" title="Experimentation">Experimentation</a>, <a href="https://www.elementi-design.com/category/programming/" title="Programming">Programming</a></span></div></div></div>
        </div>
    </div>
</div></div></div></div></div></div></div><div class="az-main-section-content az-module az-padding-top-75 az-padding-bottom-75 az-section-default no-animate-content hidden-lg hidden-md hidden-sm hidden-xs az-module-default"><div class="container"><div class="row row-parent az-gutter-default"><div class="single-clms col-md-12 az-main-col-content az-module az-v-space-clm no-animate-content az-module-default"><div class="az-col az-clm-padding-0" ><div class="az-col-cont">
<div class="az-content-element-wrapper wpb_raw_html az-margin-top- az-margin-bottom-">
    <div class="wpb_wrapper">
                <script type="text/javascript" src="https://www.elementi-design.com/wp-content/js/gsap.min.js"></script>
        <script>
            
            function animatePair(pair, delay = 0) {
                const slide = 0.42;
                const hold = 5;
                const overlap = 0.22;

                const easeOut = "back.out(1.5)";
                const easeIn = "cubic-bezier(0.4, 0, 1, 1)";

                gsap.set(pair.from, {
                    opacity: 1,
                    x: 0,
                    filter: "blur(0px)"
                });

                gsap.set(pair.to, {
                    opacity: 0,
                    x: 30,
                    filter: "blur(5px)"
                });

                const tl = gsap.timeline({
                    repeat: -1,
                    delay: delay
                });

                tl.to(pair.from, {
                    x: -30,
                    opacity: 0,
                    filter: "blur(5px)",
                    duration: slide,
                    ease: easeIn
                });

                tl.to(pair.to, {
                    x: 0,
                    opacity: 1,
                    filter: "blur(0px)",
                    duration: slide,
                    ease: easeOut
                }, 0);

                tl.to(pair.to, {
                    duration: hold
                });

                tl.set(pair.from, {
                    x: 30,
                    opacity: 0,
                    filter: "blur(5px)"
                });

                tl.to(pair.to, {
                    x: -30,
                    opacity: 0,
                    filter: "blur(5px)",
                    duration: slide,
                    ease: easeIn
                });

                tl.to(pair.from, {
                    x: 0,
                    opacity: 1,
                    filter: "blur(0px)",
                    duration: slide,
                    ease: easeOut
                }, "-=" + overlap);

                tl.to(pair.from, {
                    duration: hold
                });
            }

            function animateCycle(steps, delay = 0) {
                if (!Array.isArray(steps) || steps.length < 2) return;

                if (steps.length === 2) {
                    animatePair({ from: steps[0], to: steps[1] }, delay);
                    return;
                }

                const slide = 0.42;
                const hold = 5;

                const easeOut = "back.out(1.5)";
                const easeIn = "cubic-bezier(0.4, 0, 1, 1)";

                steps.forEach(function(step, index) {
                    gsap.set(step, {
                        opacity: index === 0 ? 1 : 0,
                        x: index === 0 ? 0 : 30,
                        filter: index === 0 ? "blur(0px)" : "blur(5px)"
                    });
                });

                const tl = gsap.timeline({
                    repeat: -1,
                    delay: delay
                });

                for (let i = 0; i < steps.length; i++) {
                    const current = steps[i];
                    const next = steps[(i + 1) % steps.length];

                    tl.to(current, {
                        x: -30,
                        opacity: 0,
                        filter: "blur(5px)",
                        duration: slide,
                        ease: easeIn
                    });

                    tl.to(next, {
                        x: 0,
                        opacity: 1,
                        filter: "blur(0px)",
                        duration: slide,
                        ease: easeOut
                    }, "<");

                    tl.set(current, {
                        x: 30,
                        opacity: 0,
                        filter: "blur(5px)"
                    });

                    tl.to(next, {
                        duration: hold
                    });
                }
            }

            // =============================
            // DIAGRAM 1 — OUTPUTS
            // =============================

            const diagram1Cycles = [
                ["#output-left-1", "#output-left-2" , "#output-left-3"],
                ["#output-middle-1", "#output-middle-2" , "#output-middle-3"],
                ["#output-right-1", "#output-right-2" , "#output-right-3"]
            ];

            diagram1Cycles.forEach(function(steps, index) {
                animateCycle(steps, index * 0.15);
            });
            
            const dashLength = 8; 
            const dashDuration = 0.6; 
            
            gsap.to(".moving-dash", {
                y: dashLength,
                duration: dashDuration,
                ease: "linear",
                repeat: -1,
                modifiers: {
                    y: gsap.utils.unitize(y => y % dashLength) 
                }
            });

            // =============================
            // DIAGRAM 2 — COLUMN STRUCTURE
            // =============================

            const columns = {
                left: [
                    { from: "#expertise-1", to: "#expertise-2" }
                ],
                middle: [
                    { from: "#team-member-1", to: "#team-member-2" },
                    { from: "#office-1", to: "#office-2" },

                    { from: "#quotes-1", to: "#quotes-2" }
                ],
                right: [
                    { from: "#cases-1", to: "#cases-2" }
                ]
            };

            const columnDelays = {
                left: 0.3,
                middle: 0.15,
                right: 0
            };

            Object.entries(columns).forEach(function([columnName, pairs]) {
                pairs.forEach(function(pair, index) {
                    const delay = columnDelays[columnName] + index * 0.15;
                    animatePair(pair, delay);
                });
            });

            // =============================
            // DIAGRAM 3 — STRUCTURE ONCE, DISPLAY EVERYWHERE
            // =============================

            function animateColumnWithStagger(headerPair, fieldPairs, baseDelay = 0) {
                const slide = 0.42;
                const hold = 5;
                const easeOut = "back.out(1.5)";
                const easeIn = "cubic-bezier(0.4, 0, 1, 1)";
                const fieldStagger = 0.05;

                // Set initial states for header (horizontal swap)
                gsap.set(headerPair.from, {
                    opacity: 1,
                    x: 0,
                    filter: "blur(0px)"
                });
                gsap.set(headerPair.to, {
                    opacity: 0,
                    x: 30,
                    filter: "blur(5px)"
                });

                // Set initial states for fields (vertical swap)
                fieldPairs.forEach(function(pair, index) {
                    gsap.set(pair.from, {
                        opacity: 1,
                        y: 0,
                        filter: "blur(0px)"
                    });
                    gsap.set(pair.to, {
                        opacity: 0,
                        y: -20,
                        filter: "blur(5px)"
                    });
                });

                const tl = gsap.timeline({
                    repeat: -1,
                    delay: baseDelay
                });

                // Animate header out (horizontal, left)
                tl.to(headerPair.from, {
                    x: -30,
                    opacity: 0,
                    filter: "blur(5px)",
                    duration: slide,
                    ease: easeIn
                });

                // Animate header in (horizontal, from right) - overlaps with header out
                tl.to(headerPair.to, {
                    x: 0,
                    opacity: 1,
                    filter: "blur(0px)",
                    duration: slide,
                    ease: easeOut
                }, "-=" + slide);

                // Animate fields out with stagger (vertical, down)
                fieldPairs.forEach(function(pair, index) {
                    tl.to(pair.from, {
                        y: 20,
                        opacity: 0,
                        filter: "blur(5px)",
                        duration: slide,
                        ease: easeIn
                    }, "-=" + (slide - fieldStagger * (index + 1)));
                });

                // Animate fields in with stagger (vertical, from top)
                fieldPairs.forEach(function(pair, index) {
                    tl.to(pair.to, {
                        y: 0,
                        opacity: 1,
                        filter: "blur(0px)",
                        duration: slide,
                        ease: easeOut
                    }, "-=" + (slide - fieldStagger * (index + 1)));
                });

                tl.to(headerPair.to, {
                    duration: hold
                });

                // Reset header position (horizontal)
                tl.set(headerPair.from, {
                    x: 30,
                    opacity: 0,
                    filter: "blur(5px)"
                });

                // Reset field positions (vertical)
                fieldPairs.forEach(function(pair) {
                    tl.set(pair.from, {
                        y: -20,
                        opacity: 0,
                        filter: "blur(5px)"
                    }, "<");
                });

                // Animate back - header out (horizontal, left)
                tl.to(headerPair.to, {
                    x: -30,
                    opacity: 0,
                    filter: "blur(5px)",
                    duration: slide,
                    ease: easeIn
                });

                // Animate header back in (horizontal, from right) - overlaps
                tl.to(headerPair.from, {
                    x: 0,
                    opacity: 1,
                    filter: "blur(0px)",
                    duration: slide,
                    ease: easeOut
                }, "-=" + slide);

                // Animate fields out with stagger (vertical, down)
                fieldPairs.forEach(function(pair, index) {
                    tl.to(pair.to, {
                        y: 20,
                        opacity: 0,
                        filter: "blur(5px)",
                        duration: slide,
                        ease: easeIn
                    }, "-=" + (slide - fieldStagger * (index + 1)));
                });

                // Animate fields back in with stagger (vertical, from top)
                fieldPairs.forEach(function(pair, index) {
                    tl.to(pair.from, {
                        y: 0,
                        opacity: 1,
                        filter: "blur(0px)",
                        duration: slide,
                        ease: easeOut
                    }, "-=" + (slide - fieldStagger * (index + 1)));
                });

                tl.to(headerPair.from, {
                    duration: hold
                });
            }

            // Left column
            animateColumnWithStagger(
                { from: "#col-left-1", to: "#col-left-2" },
                [
                    { from: "#col-left-1-field-1", to: "#col-left-2-field-1" },
                    { from: "#col-left-1-field-2", to: "#col-left-2-field-2" },
                    { from: "#col-left-1-field-3", to: "#col-left-2-field-3" },
                    { from: "#col-left-1-field-4", to: "#col-left-2-field-4" },
                    { from: "#col-left-1-field-5", to: "#col-left-2-field-5" }
                ],
                0.3
            );

            // Middle column
            animateColumnWithStagger(
                { from: "#col-middle-1", to: "#col-middle-2" },
                [
                    { from: "#col-middle-1-field-1", to: "#col-middle-2-field-1" },
                    { from: "#col-middle-1-field-2", to: "#col-middle-2-field-2" },
                    { from: "#col-middle-1-field-3", to: "#col-middle-2-field-3" },
                    { from: "#col-middle-1-field-4", to: "#col-middle-2-field-4" },
                    { from: "#col-middle-1-field-5", to: "#col-middle-2-field-5" }
                ],
                0.15
            );

            // Right column
            animateColumnWithStagger(
                { from: "#col-right-1", to: "#col-right-2" },
                [
                    { from: "#col-right-1-field-1", to: "#col-right-2-field-1" },
                    { from: "#col-right-1-field-2", to: "#col-right-2-field-2" },
                    { from: "#col-right-1-field-3", to: "#col-right-2-field-3" },
                    { from: "#col-right-1-field-4", to: "#col-right-2-field-4" },
                    { from: "#col-right-1-field-5", to: "#col-right-2-field-5" }
                ],
                0
            );

        </script>
    </div>
</div></div></div></div></div></div></div>
<p>Der Beitrag <a href="https://www.elementi-design.com/headless-cms-architecture/">Inside the Architecture</a> erschien zuerst auf <a href="https://www.elementi-design.com">Elementi</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.elementi-design.com/headless-cms-architecture/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
