<section class="post-hero">
  <div class="wrap">
    <div class="hero-with-media<%= division.portrait ? '' : ' no-media' %>">
      <div class="hero-text-col">
        <p class="eyebrow">
          <%= division.tag %> division
          <% if (typeof parentDivision !== 'undefined' && parentDivision) { %>
            &middot; part of <a href="/<%= parentDivision.slug %>" style="color:inherit; text-decoration:underline;"><%= parentDivision.name %></a>
          <% } %>
        </p>
        <h1><%= division.name %></h1>
        <% if (division.tagline) { %><p class="post-date"><%= division.tagline %></p><% } %>
        <div class="pill-row" style="margin-top: 1rem;">
          <a href="/contact" class="button button-primary">Get in touch</a>
        </div>
      </div>
      <% if (division.portrait) { %>
        <div class="hero-media-col">
          <div class="hero-media-box">
            <img src="<%= division.portrait %>" alt="<%= division.name %>" loading="lazy">
          </div>
        </div>
      <% } %>
    </div>
  </div>
  <div class="post-hero-pattern"></div>
</section>

<section class="block">
  <% var introParas = division.intro && division.intro.length ? division.intro : [division.description]; %>
  <% if (introParas.length) { %>
    <p class="lede-paragraph"><%= introParas[0] %></p>
    <% introParas.slice(1).forEach(function(p) { %><p><%= p %></p><% }) %>
  <% } %>

  <% if (division.whatWeDo && division.whatWeDo.length) { %>
    <div class="section-head" style="margin-top: 2.5rem;">
      <h2>What We Do</h2>
      <p>We support:</p>
    </div>
    <ul class="service-list">
      <% division.whatWeDo.forEach(function(item) { %><li><%= item %></li><% }) %>
    </ul>
  <% } %>

  <% if (division.meansForYou && division.meansForYou.length) { %>
    <div class="section-head" style="margin-top: 2.5rem;">
      <h2><%= division.meansForYouHeading || 'What This Means for You' %></h2>
    </div>
    <div class="quote-callout">
      <% division.meansForYou.forEach(function(p) { %><p><%= p %></p><% }) %>
    </div>
  <% } %>

  <% if (typeof childDivisions !== 'undefined' && childDivisions && childDivisions.length) { %>
    <div class="section-head" style="margin-top: 2.5rem;">
      <p class="eyebrow">Related services</p>
      <h2>Under <%= division.name %></h2>
    </div>
    <div class="where-we-work-strip">
      <% childDivisions.forEach(function(child) { %>
        <a class="country-chip" href="/<%= child.slug %>">
          <span class="country-chip-name"><%= child.name %></span>
          <span class="country-chip-arrow">&rarr;</span>
        </a>
      <% }) %>
    </div>
  <% } %>
</section>

<section class="block alt">
  <div class="inner">
    <div class="where-we-work-block">
      <div class="section-head">
        <p class="eyebrow">Where we work</p>
        <h2>Delivered across East Africa</h2>
        <p>The same <%= division.name.toLowerCase() %> team travels with the brief, wherever the work is. Pick a market to see what we deliver there:</p>
      </div>
      <div class="where-we-work-strip">
        <% (countries || []).forEach(function(c) { %>
          <a class="country-chip" href="/<%= c.slug %>">
            <span class="country-chip-name"><%= c.name %></span>
            <span class="country-chip-arrow">&rarr;</span>
          </a>
        <% }) %>
      </div>
    </div>

    <% if (division.howWeWork && division.howWeWork.length) { %>
      <div class="section-head">
        <p class="eyebrow">Our approach</p>
        <h2>How We Work</h2>
      </div>
      <ol class="process-steps">
        <% division.howWeWork.forEach(function(p) { %><li><p><%= p %></p></li><% }) %>
      </ol>
    <% } %>
  </div>
</section>

<div class="cta-band">
  <h2><%= division.closingLine || ('Ready to talk about ' + division.name + '?') %></h2>
  <a href="/contact" class="button button-primary">Get in touch</a>
</div>
