.elementor-3162 .elementor-element.elementor-element-251f40fb > .elementor-element-populated{padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-fc3fcac */<style>
.mtt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0;max-width:1200px;margin:0 auto}
.mtt-card{position:relative;background:#fff;border:1px solid #e4e4e4;margin:-1px 0 0 -1px;cursor:pointer;overflow:hidden}
.mtt-card img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;display:block;transition:.2s}
.mtt-card:hover img{transform:scale(1.03)}
.mtt-info{padding:12px 14px 14px;border-top:1px solid #eee}
.mtt-name{font-size:.9rem;font-weight:700;color:#111}
.mtt-role{font-size:.78rem;color:#999;margin-top:2px}
.mtt-plus{position:absolute;bottom:54px;right:10px;width:32px;height:32px;background:#CC1B1B;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:.2s}
.mtt-card:hover .mtt-plus{opacity:1;transform:scale(1)}
.mtt-plus svg{width:14px;height:14px;fill:#fff}
.mtt-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:.2s}
.mtt-backdrop.open{opacity:1;pointer-events:all}
.mtt-modal{background:#fff;width:100%;max-width:400px;padding:32px;position:relative;transform:translateY(14px);transition:.2s;box-shadow:0 16px 48px rgba(0,0,0,.18)}
.mtt-backdrop.open .mtt-modal{transform:translateY(0)}
.mtt-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#777}
.mtt-line{width:32px;height:3px;background:#CC1B1B;margin:14px 0}
.mtt-bio{font-size:.87rem;line-height:1.75;color:#555}
</style>

<div class="mtt-grid">

  <div class="mtt-card" data-name="Darren Watson" data-role="Security" data-bio="Joining TP in 2020, Darren successfully developed the company's nationwide electronic security division. He brings over 30 years of industry experience.">
    <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Darren Watson" loading="lazy">
    <div class="mtt-info"><div class="mtt-name">Darren Watson</div><div class="mtt-role">Security</div></div>
    <div class="mtt-plus"><svg viewBox="0 0 24 24"><path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/></svg></div>
  </div>

  <div class="mtt-card" data-name="Sarah Mitchell" data-role="Marketing &amp; Social Value" data-bio="Sarah leads marketing strategy and social value initiatives, bringing 15 years of experience across B2B communications and community engagement.">
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Mitchell" loading="lazy">
    <div class="mtt-info"><div class="mtt-name">Sarah Mitchell</div><div class="mtt-role">Marketing &amp; Social Value</div></div>
    <div class="mtt-plus"><svg viewBox="0 0 24 24"><path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/></svg></div>
  </div>

  <div class="mtt-card" data-name="James Davis" data-role="Partnerships" data-bio="James oversees strategic partnerships and business development, building relationships with over 200 contractor and supplier partners across the UK.">
    <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="James Davis" loading="lazy">
    <div class="mtt-info"><div class="mtt-name">James Davis</div><div class="mtt-role">Partnerships</div></div>
    <div class="mtt-plus"><svg viewBox="0 0 24 24"><path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/></svg></div>
  </div>

  <div class="mtt-card" data-name="Priya Anand" data-role="Operations" data-bio="Priya manages day-to-day operations, ensuring delivery teams have the tools and processes they need. She joined the team in 2021.">
    <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Anand" loading="lazy">
    <div class="mtt-info"><div class="mtt-name">Priya Anand</div><div class="mtt-role">Operations</div></div>
    <div class="mtt-plus"><svg viewBox="0 0 24 24"><path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/></svg></div>
  </div>

  <div class="mtt-card" data-name="Tom Hargreaves" data-role="Finance" data-bio="Tom leads financial planning and reporting, with senior finance roles previously held across the construction and property sectors.">
    <img src="https://randomuser.me/api/portraits/men/61.jpg" alt="Tom Hargreaves" loading="lazy">
    <div class="mtt-info"><div class="mtt-name">Tom Hargreaves</div><div class="mtt-role">Finance</div></div>
    <div class="mtt-plus"><svg viewBox="0 0 24 24"><path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/></svg></div>
  </div>

  <div class="mtt-card" data-name="Claire Booth" data-role="HR &amp; Compliance" data-bio="Claire is responsible for people strategy, recruitment, and regulatory compliance. She holds a CIPD Level 7 qualification.">
    <img src="https://randomuser.me/api/portraits/women/23.jpg" alt="Claire Booth" loading="lazy">
    <div class="mtt-info"><div class="mtt-name">Claire Booth</div><div class="mtt-role">HR &amp; Compliance</div></div>
    <div class="mtt-plus"><svg viewBox="0 0 24 24"><path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/></svg></div>
  </div>

</div>

<div class="mtt-backdrop" id="mttBd">
  <div class="mtt-modal">
    <button class="mtt-close" onclick="document.getElementById('mttBd').classList.remove('open')">&times;</button>
    <div class="mtt-name" id="mttN"></div>
    <div class="mtt-role" id="mttR"></div>
    <div class="mtt-line"></div>
    <div class="mtt-bio" id="mttB"></div>
  </div>
</div>

<script>
document.querySelectorAll('.mtt-card').forEach(function(c){
  c.onclick=function(){
    document.getElementById('mttN').textContent=c.dataset.name;
    document.getElementById('mttR').textContent=c.dataset.role;
    document.getElementById('mttB').textContent=c.dataset.bio;
    document.getElementById('mttBd').classList.add('open');
  };
});
document.getElementById('mttBd').onclick=function(e){if(e.target===this)this.classList.remove('open');};
</script>/* End custom CSS */