{"id":10,"date":"2026-06-08T09:16:24","date_gmt":"2026-06-08T09:16:24","guid":{"rendered":"https:\/\/presentame.co.uk\/?page_id=10"},"modified":"2026-06-08T12:15:10","modified_gmt":"2026-06-08T12:15:10","slug":"home","status":"publish","type":"page","link":"https:\/\/presentame.co.uk\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9160cde e-flex e-con-boxed e-con e-parent\" data-id=\"9160cde\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddea2d3 elementor-widget elementor-widget-html\" data-id=\"ddea2d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 01: Nav + Global JS (Lenis, cursor,\r\n     trail, intro, reveal, magnetic, counters)\r\n     ============================================================ -->\r\n\r\n<!-- Lenis smooth scroll -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@studio-freight\/lenis@1.0.42\/dist\/lenis.min.js\"><\/script>\r\n<!-- GSAP for magnetic + animations -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n<!-- Swiper for mobile testimonials -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\/>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n\r\n<style>\r\n\/* \u2500\u2500 PAGE INTRO \u2500\u2500 *\/\r\n.pm-intro {\r\n  position: fixed; inset: 0;\r\n  background: var(--bg);\r\n  z-index: 9990;\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.pm-intro-logo {\r\n  font-family: var(--serif);\r\n  font-size: clamp(2rem, 6vw, 5rem);\r\n  font-weight: 400;\r\n  color: #fff;\r\n  letter-spacing: .06em;\r\n}\r\n.pm-intro-logo sup {\r\n  font-size: .4em;\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  letter-spacing: .3em;\r\n  color: var(--gold);\r\n  text-transform: uppercase;\r\n  vertical-align: super;\r\n}\r\n\r\n\/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n.pm-nav {\r\n  position: fixed; top: 0; left: 0; right: 0;\r\n  z-index: 500;\r\n  padding: 0 var(--pad-h); height: 72px;\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  transition: background .4s, box-shadow .4s;\r\n}\r\n.pm-nav::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(to bottom, rgba(19,18,14,.95) 0%, transparent 100%);\r\n  pointer-events: none; z-index: -1;\r\n  transition: opacity .4s;\r\n}\r\n.pm-nav.scrolled {\r\n  background: rgba(19,18,14,.97);\r\n  box-shadow: 0 1px 0 var(--gold-line);\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\r\n}\r\n.pm-nav.scrolled::before { opacity: 0; }\r\n\r\n.pm-nav-logo {\r\n  font-family: var(--serif); font-size: 1.5rem;\r\n  font-weight: 400; color: #fff; text-decoration: none;\r\n  letter-spacing: .04em; line-height: 1; position: relative; z-index: 1;\r\n}\r\n.pm-nav-logo sup {\r\n  font-size: .44rem; font-family: var(--sans); font-weight: 200;\r\n  letter-spacing: .3em; color: var(--gold); text-transform: uppercase;\r\n  vertical-align: super; margin-left: 1px;\r\n}\r\n.pm-nav-links {\r\n  display: flex; align-items: center; gap: 2.5rem;\r\n  list-style: none; position: relative; z-index: 1;\r\n}\r\n.pm-nav-links a {\r\n  font-family: var(--sans); font-size: .68rem; font-weight: 300;\r\n  letter-spacing: .18em; text-transform: uppercase;\r\n  color: var(--mid); text-decoration: none; transition: color .3s;\r\n}\r\n.pm-nav-links a:hover { color: var(--gold); }\r\n\r\n.pm-nav-cta {\r\n  font-family: var(--sans); font-weight: 400; font-size: .66rem;\r\n  letter-spacing: .16em; text-transform: uppercase;\r\n  color: var(--bg); background: var(--gold);\r\n  padding: .55rem 1.4rem; text-decoration: none;\r\n  transition: background .25s; position: relative; z-index: 1;\r\n  white-space: nowrap; display: inline-block;\r\n}\r\n.pm-nav-cta:hover { background: var(--gold-lt); }\r\n\r\n\/* burger *\/\r\n.pm-burger {\r\n  display: none; flex-direction: column; gap: 5px;\r\n  background: none; border: none; cursor: pointer; padding: 4px;\r\n  position: relative; z-index: 600;\r\n}\r\n.pm-burger span {\r\n  display: block; width: 22px; height: 2px;\r\n  background: var(--cream); border-radius: 2px;\r\n  transition: transform .3s, opacity .3s;\r\n}\r\nbody.pm-nav-open .pm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\nbody.pm-nav-open .pm-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }\r\nbody.pm-nav-open .pm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n\/* mobile drawer *\/\r\n.pm-nav-drawer {\r\n  display: none; position: fixed; inset: 0;\r\n  background: var(--bg); z-index: 550;\r\n  flex-direction: column; justify-content: center;\r\n  align-items: flex-start; padding: 6rem 2rem 3rem;\r\n}\r\nbody.pm-nav-open .pm-nav-drawer {\r\n  display: flex; animation: pmDrawerIn .25s ease forwards;\r\n}\r\n@keyframes pmDrawerIn { from { opacity:0; } to { opacity:1; } }\r\n\r\n.pm-nav-drawer-links {\r\n  list-style: none; width: 100%;\r\n  border-top: 1px solid var(--gold-line);\r\n}\r\n.pm-nav-drawer-links li { border-bottom: 1px solid var(--gold-line); }\r\n.pm-nav-drawer-links a {\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  padding: 1.4rem 0;\r\n  font-family: var(--serif); font-size: 1.8rem;\r\n  font-weight: 700; font-style: italic; color: var(--cream);\r\n  text-decoration: none; transition: color .2s, padding-left .2s;\r\n}\r\n.pm-nav-drawer-links a::after {\r\n  content: '\u2192'; font-family: var(--sans); font-style: normal;\r\n  font-size: 1rem; color: var(--gold); opacity: 0; transition: opacity .2s;\r\n}\r\n.pm-nav-drawer-links a:hover { color: var(--gold-lt); padding-left: .5rem; }\r\n.pm-nav-drawer-links a:hover::after { opacity: 1; }\r\n.pm-nav-drawer-cta { margin-top: 2.5rem; width: 100%; text-align: center; }\r\n.pm-nav-spacer { height: 72px; }\r\n\r\n@media (max-width: 768px) {\r\n  .pm-nav { padding: 0 var(--pad-h-mob); }\r\n  .pm-nav-links, .pm-nav-cta { display: none; }\r\n  .pm-burger { display: flex; }\r\n}\r\n<\/style>\r\n\r\n<!-- INTRO OVERLAY -->\r\n<div class=\"pm-intro\" id=\"pmIntro\" aria-hidden=\"true\">\r\n  <div class=\"pm-intro-logo\">presentame<sup>.<\/sup><\/div>\r\n<\/div>\r\n\r\n<!-- CURSOR -->\r\n<div class=\"pm-cursor\" id=\"pmCursor\"><\/div>\r\n<div class=\"pm-cursor-ring\" id=\"pmRing\"><\/div>\r\n\r\n<!-- NAV SPACER -->\r\n<div class=\"pm-nav-spacer\"><\/div>\r\n\r\n<!-- NAV -->\r\n<nav class=\"pm-nav\" id=\"pmNav\" aria-label=\"Main navigation\">\r\n  <a href=\"#\" class=\"pm-nav-logo\" aria-label=\"presentame. home\">presentame<sup>.<\/sup><\/a>\r\n  <ul class=\"pm-nav-links\">\r\n    <li><a href=\"#pm-services\">Services<\/a><\/li>\r\n    <li><a href=\"#pm-process\">How it works<\/a><\/li>\r\n    <li><a href=\"#pm-portfolio\">Our work<\/a><\/li>\r\n    <li><a href=\"#pm-pricing\">Pricing<\/a><\/li>\r\n    <li><a href=\"#pm-contact\">Contact<\/a><\/li>\r\n  <\/ul>\r\n  <a href=\"#pm-contact\" class=\"pm-nav-cta pm-magnetic\">Get started<\/a>\r\n  <button class=\"pm-burger\" id=\"pmBurger\" aria-label=\"Toggle navigation\" aria-expanded=\"false\">\r\n    <span><\/span><span><\/span><span><\/span>\r\n  <\/button>\r\n<\/nav>\r\n\r\n<!-- MOBILE DRAWER -->\r\n<div class=\"pm-nav-drawer\" id=\"pmDrawer\" aria-hidden=\"true\">\r\n  <ul class=\"pm-nav-drawer-links\">\r\n    <li><a href=\"#pm-services\">Services<\/a><\/li>\r\n    <li><a href=\"#pm-process\">How it works<\/a><\/li>\r\n    <li><a href=\"#pm-portfolio\">Our work<\/a><\/li>\r\n    <li><a href=\"#pm-pricing\">Pricing<\/a><\/li>\r\n    <li><a href=\"#pm-contact\">Contact<\/a><\/li>\r\n  <\/ul>\r\n  <div class=\"pm-nav-drawer-cta\">\r\n    <a href=\"#pm-contact\" class=\"pm-btn-gold\">Get started<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var isMob = window.matchMedia('(max-width:768px)').matches;\r\n\r\n  \/* \u2500\u2500 PAGE INTRO \u2500\u2500 *\/\r\n  var intro     = document.getElementById('pmIntro');\r\n  var introLogo = intro ? intro.querySelector('.pm-intro-logo') : null;\r\n  if(intro && introLogo){\r\n    \/\/ fade logo in\r\n    gsap.fromTo(introLogo,\r\n      { opacity:0, scale:.96 },\r\n      { opacity:1, scale:1, duration:.7, ease:'power2.out', delay:.1,\r\n        onComplete: function(){\r\n          \/\/ hold then fade out whole overlay\r\n          gsap.to(intro, { opacity:0, duration:.6, delay:.5, ease:'power2.in',\r\n            onComplete: function(){ intro.style.display='none'; }\r\n          });\r\n        }\r\n      }\r\n    );\r\n  }\r\n\r\n  \/* \u2500\u2500 LENIS SMOOTH SCROLL \u2500\u2500 *\/\r\n  if(!isMob && window.Lenis){\r\n    var lenis = new Lenis({ lerp:.08, smoothWheel:true });\r\n    function raf(t){ lenis.raf(t); requestAnimationFrame(raf); }\r\n    requestAnimationFrame(raf);\r\n    \/\/ make anchor links work with lenis\r\n    document.querySelectorAll('a[href^=\"#\"]').forEach(function(a){\r\n      a.addEventListener('click', function(e){\r\n        var id = a.getAttribute('href');\r\n        if(id === '#') return;\r\n        var target = document.querySelector(id);\r\n        if(target){ e.preventDefault(); lenis.scrollTo(target, { offset:-72 }); }\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* \u2500\u2500 CURSOR \u2500\u2500 *\/\r\n  if(!isMob){\r\n    var cur  = document.getElementById('pmCursor');\r\n    var ring = document.getElementById('pmRing');\r\n    var mx=0, my=0, rx=0, ry=0;\r\n    document.addEventListener('mousemove', function(e){ mx=e.clientX; my=e.clientY; });\r\n    (function loop(){\r\n      rx += (mx-rx)*.14; ry += (my-ry)*.14;\r\n      if(cur)  { cur.style.left=mx+'px';  cur.style.top=my+'px';  }\r\n      if(ring) { ring.style.left=rx+'px'; ring.style.top=ry+'px'; }\r\n      requestAnimationFrame(loop);\r\n    })();\r\n    \/\/ hover state\r\n    document.addEventListener('mouseover', function(e){\r\n      var el = e.target.closest('a, button, .pm-portfolio-card, .pm-faq-q, .pm-service-strip');\r\n      if(el){ cur.classList.add('hover'); ring.classList.add('hover'); }\r\n      else  { cur.classList.remove('hover'); ring.classList.remove('hover'); }\r\n    });\r\n\r\n    \/* \u2500\u2500 CURSOR TRAIL \u2500\u2500 *\/\r\n    var TRAIL = 8;\r\n    var dots = [];\r\n    for(var i=0;i<TRAIL;i++){\r\n      var d = document.createElement('div');\r\n      d.className = 'pm-trail-dot';\r\n      d.style.opacity = (1 - i\/TRAIL) * 0.35;\r\n      d.style.width = d.style.height = (4 - i*.3) + 'px';\r\n      document.body.appendChild(d);\r\n      dots.push({ el:d, x:0, y:0 });\r\n    }\r\n    var trailPositions = Array(TRAIL).fill({x:0,y:0}).map(function(){ return {x:0,y:0}; });\r\n    (function trailLoop(){\r\n      trailPositions[0].x = mx; trailPositions[0].y = my;\r\n      for(var j=1;j<TRAIL;j++){\r\n        trailPositions[j].x += (trailPositions[j-1].x - trailPositions[j].x) * .45;\r\n        trailPositions[j].y += (trailPositions[j-1].y - trailPositions[j].y) * .45;\r\n        dots[j].el.style.left = trailPositions[j].x + 'px';\r\n        dots[j].el.style.top  = trailPositions[j].y + 'px';\r\n      }\r\n      requestAnimationFrame(trailLoop);\r\n    })();\r\n  }\r\n\r\n  \/* \u2500\u2500 NAV SCROLL STATE \u2500\u2500 *\/\r\n  var nav = document.getElementById('pmNav');\r\n  window.addEventListener('scroll', function(){\r\n    nav.classList.toggle('scrolled', window.scrollY > 40);\r\n  }, {passive:true});\r\n\r\n  \/* \u2500\u2500 BURGER \u2500\u2500 *\/\r\n  var burger = document.getElementById('pmBurger');\r\n  var drawer = document.getElementById('pmDrawer');\r\n  burger.addEventListener('click', function(){\r\n    var open = document.body.classList.toggle('pm-nav-open');\r\n    burger.setAttribute('aria-expanded', String(open));\r\n    drawer.setAttribute('aria-hidden', String(!open));\r\n    document.body.style.overflow = open ? 'hidden' : '';\r\n  });\r\n  drawer.querySelectorAll('a').forEach(function(a){\r\n    a.addEventListener('click', function(){\r\n      document.body.classList.remove('pm-nav-open');\r\n      burger.setAttribute('aria-expanded','false');\r\n      drawer.setAttribute('aria-hidden','true');\r\n      document.body.style.overflow = '';\r\n    });\r\n  });\r\n\r\n  \/* \u2500\u2500 MAGNETIC BUTTONS \u2500\u2500 *\/\r\n  if(!isMob && window.gsap){\r\n    function initMagnetic(){\r\n      document.querySelectorAll('.pm-magnetic').forEach(function(el){\r\n        el.addEventListener('mousemove', function(e){\r\n          var rect = el.getBoundingClientRect();\r\n          var cx = rect.left + rect.width\/2;\r\n          var cy = rect.top  + rect.height\/2;\r\n          var dx = (e.clientX - cx) * .35;\r\n          var dy = (e.clientY - cy) * .35;\r\n          gsap.to(el, { x:dx, y:dy, duration:.4, ease:'power2.out' });\r\n        });\r\n        el.addEventListener('mouseleave', function(){\r\n          gsap.to(el, { x:0, y:0, duration:.6, ease:'elastic.out(1,.4)' });\r\n        });\r\n      });\r\n    }\r\n    if(document.readyState==='loading'){\r\n      document.addEventListener('DOMContentLoaded', initMagnetic);\r\n    } else { initMagnetic(); }\r\n  }\r\n\r\n  \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(e, i){\r\n      if(e.isIntersecting){\r\n        setTimeout(function(){ e.target.classList.add('visible'); }, i*110);\r\n        io.unobserve(e.target);\r\n      }\r\n    });\r\n  },{threshold:.1});\r\n  function initReveal(){\r\n    document.querySelectorAll('.pm-reveal').forEach(function(el){ io.observe(el); });\r\n  }\r\n  if(document.readyState==='loading'){\r\n    document.addEventListener('DOMContentLoaded', initReveal);\r\n  } else { initReveal(); }\r\n\r\n  \/* \u2500\u2500 NUMBER COUNTERS \u2500\u2500 *\/\r\n  function animateCount(el){\r\n    var target = parseFloat(el.dataset.target);\r\n    var prefix = el.dataset.prefix || '';\r\n    var suffix = el.dataset.suffix || '';\r\n    var duration = 1800;\r\n    var start = performance.now();\r\n    function step(now){\r\n      var progress = Math.min((now-start)\/duration, 1);\r\n      var ease = 1 - Math.pow(1-progress, 3); \/\/ ease out cubic\r\n      var val = Math.round(ease * target);\r\n      el.textContent = prefix + val + suffix;\r\n      if(progress < 1) requestAnimationFrame(step);\r\n      else el.textContent = prefix + target + suffix;\r\n    }\r\n    requestAnimationFrame(step);\r\n  }\r\n  var countIO = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(e){\r\n      if(e.isIntersecting){\r\n        animateCount(e.target);\r\n        countIO.unobserve(e.target);\r\n      }\r\n    });\r\n  },{threshold:.5});\r\n  function initCounters(){\r\n    document.querySelectorAll('.pm-count').forEach(function(el){ countIO.observe(el); });\r\n  }\r\n  if(document.readyState==='loading'){\r\n    document.addEventListener('DOMContentLoaded', initCounters);\r\n  } else { initCounters(); }\r\n\r\n  \/* \u2500\u2500 SWIPER (mobile testimonials) \u2500\u2500 *\/\r\n  function initSwiper(){\r\n    var el = document.querySelector('.pm-testi-swiper');\r\n    if(!el || !window.Swiper) return;\r\n    var mob = window.matchMedia('(max-width:768px)');\r\n    var sw = null;\r\n    function toggle(){\r\n      if(mob.matches){\r\n        if(!sw){\r\n          sw = new Swiper('.pm-testi-swiper', {\r\n            slidesPerView:1,\r\n            spaceBetween:16,\r\n            pagination:{ el:'.pm-swiper-pagination', clickable:true },\r\n          });\r\n        }\r\n      } else {\r\n        if(sw){ sw.destroy(true,true); sw=null; }\r\n      }\r\n    }\r\n    toggle();\r\n    mob.addEventListener('change', toggle);\r\n  }\r\n  if(document.readyState==='loading'){\r\n    document.addEventListener('DOMContentLoaded', initSwiper);\r\n  } else { initSwiper(); }\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-52520bf e-flex e-con-boxed e-con e-parent\" data-id=\"52520bf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a20ab65 elementor-widget elementor-widget-html\" data-id=\"a20ab65\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 02: Hero\r\n     Elementor: Full-width section \u2192 1 column \u2192 HTML widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n\/* \u2500\u2500 HERO WRAPPER \u2500\u2500 *\/\r\n.pm-hero {\r\n  min-height: 100vh;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  padding: 80px var(--pad-h) 0;\r\n  background: var(--bg);\r\n}\r\n\r\n\/* atmosphere *\/\r\n.pm-hero-atmos {\r\n  position: absolute; inset: 0;\r\n  background:\r\n    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(201,169,110,.07) 0%, transparent 55%),\r\n    radial-gradient(ellipse 40% 50% at 10% 85%, rgba(201,169,110,.04) 0%, transparent 50%);\r\n  pointer-events: none;\r\n}\r\n\r\n\/* eyebrow *\/\r\n.pm-hero-eyebrow {\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  font-size: .62rem;\r\n  letter-spacing: .44em;\r\n  text-transform: uppercase;\r\n  color: var(--gold);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1.2rem;\r\n  margin-bottom: 3rem;\r\n  position: relative;\r\n  z-index: 10;\r\n  opacity: 0;\r\n  animation: pmFadeUp .9s .2s ease forwards;\r\n}\r\n.pm-hero-eyebrow::before,\r\n.pm-hero-eyebrow::after {\r\n  content: '';\r\n  display: block;\r\n  width: 36px; height: 1px;\r\n  background: var(--gold);\r\n  opacity: .5;\r\n}\r\n\r\n\/* \u2500\u2500 DEVICE STAGE \u2500\u2500 *\/\r\n.pm-device-stage {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 1060px;\r\n  display: flex;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n  opacity: 0;\r\n  animation: pmDeviceReveal 1.3s .5s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n@keyframes pmDeviceReveal {\r\n  from { opacity: 0; transform: translateY(50px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* \u2500\u2500 LAPTOP \u2500\u2500 *\/\r\n.pm-laptop {\r\n  position: relative;\r\n  width: 78%;\r\n  flex-shrink: 0;\r\n  filter:\r\n    drop-shadow(0 40px 70px rgba(0,0,0,.75))\r\n    drop-shadow(0 0 50px rgba(201,169,110,.07));\r\n  transform: perspective(1600px) rotateX(3deg) rotateY(2deg);\r\n  transform-origin: center bottom;\r\n  z-index: 1;\r\n}\r\n.pm-laptop-lid {\r\n  background: linear-gradient(160deg,#2c2c2a 0%,#1e1e1c 40%,#141412 100%);\r\n  border-radius: 14px 14px 0 0;\r\n  padding: 10px 10px 0;\r\n  border: 1px solid rgba(255,255,255,.08);\r\n  border-bottom: none;\r\n  position: relative;\r\n}\r\n.pm-laptop-lid::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 6px; left: 50%; transform: translateX(-50%);\r\n  width: 6px; height: 6px;\r\n  border-radius: 50%;\r\n  background: #1a1a18;\r\n  border: 1px solid rgba(255,255,255,.07);\r\n}\r\n\r\n\/* browser chrome *\/\r\n.pm-chrome {\r\n  background: linear-gradient(180deg,#2e2e2c 0%,#262624 100%);\r\n  border-radius: 6px 6px 0 0;\r\n  padding: 8px 10px 0;\r\n  border-bottom: 1px solid rgba(0,0,0,.5);\r\n}\r\n.pm-chrome-bar {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 7px;\r\n  margin-bottom: 7px;\r\n}\r\n.pm-dots { display: flex; gap: 5px; flex-shrink: 0; }\r\n.pm-dot  { width: 10px; height: 10px; border-radius: 50%; }\r\n.pm-dot.r { background: #ff5f57; box-shadow: 0 0 4px rgba(255,95,87,.4); }\r\n.pm-dot.a { background: #febc2e; box-shadow: 0 0 4px rgba(254,188,46,.3); }\r\n.pm-dot.g { background: #28c840; box-shadow: 0 0 4px rgba(40,200,64,.3); }\r\n.pm-chrome-nav { display: flex; gap: 3px; flex-shrink: 0; }\r\n.pm-chrome-nav span {\r\n  width: 22px; height: 18px;\r\n  background: rgba(255,255,255,.05);\r\n  border-radius: 3px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 9px; color: rgba(255,255,255,.3);\r\n}\r\n.pm-chrome-url {\r\n  flex: 1;\r\n  background: rgba(255,255,255,.06);\r\n  border-radius: 4px;\r\n  padding: 4px 10px;\r\n  font-family: var(--sans);\r\n  font-size: 9.5px; font-weight: 300;\r\n  color: rgba(255,255,255,.55);\r\n  display: flex; align-items: center; gap: 5px;\r\n}\r\n.pm-chrome-url-lock { font-size: 8px; color: var(--gold); }\r\n.pm-chrome-url b { color: rgba(255,255,255,.9); font-weight: 400; }\r\n.pm-chrome-more {\r\n  width: 22px; height: 18px;\r\n  background: rgba(255,255,255,.05);\r\n  border-radius: 3px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 9px; color: rgba(255,255,255,.3);\r\n  flex-shrink: 0;\r\n}\r\n.pm-chrome-tabs { display: flex; align-items: flex-end; }\r\n.pm-chrome-tab {\r\n  background: linear-gradient(180deg,#1e1e1c 0%,#1a1a18 100%);\r\n  border-radius: 6px 6px 0 0;\r\n  padding: 5px 14px 5px 9px;\r\n  font-family: var(--sans); font-size: 9px; font-weight: 300;\r\n  color: rgba(255,255,255,.7);\r\n  display: flex; align-items: center; gap: 6px;\r\n  border: 1px solid rgba(255,255,255,.06); border-bottom: none;\r\n  min-width: 150px; max-width: 200px;\r\n}\r\n.pm-tab-fav {\r\n  width: 12px; height: 12px;\r\n  background: var(--gold);\r\n  border-radius: 2px;\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 7px; color: var(--bg);\r\n  font-family: var(--serif); font-weight: 700;\r\n  flex-shrink: 0;\r\n}\r\n.pm-tab-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n.pm-tab-x { color: rgba(255,255,255,.25); font-size: 10px; flex-shrink: 0; }\r\n\r\n\/* screen *\/\r\n.pm-screen {\r\n  background: #13120e;\r\n  overflow: hidden;\r\n  border-radius: 0 0 2px 2px;\r\n  aspect-ratio: 16\/9.5;\r\n}\r\n\r\n\/* \u2500\u2500 MINI SITE (laptop screen) \u2500\u2500 *\/\r\n.ms { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }\r\n.ms-nav {\r\n  background: rgba(19,18,14,.98);\r\n  padding: 0 3%; height: 7%;\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  border-bottom: 1px solid rgba(201,169,110,.1);\r\n  flex-shrink: 0;\r\n}\r\n.ms-logo { font-family: var(--serif); font-size: clamp(.5rem,.88vw,.88rem); font-weight: 400; color: #fff; }\r\n.ms-logo s { text-decoration: none; color: var(--gold); }\r\n.ms-cta { background: var(--gold); color: #13120e; font-family: var(--sans); font-size: clamp(.28rem,.5vw,.5rem); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; padding: .25em .8em; }\r\n.ms-hero { flex: 1; padding: 2.5% 4% 2%; display: grid; grid-template-columns: 1fr .6fr; gap: 4%; align-items: center; background: linear-gradient(135deg,#13120e 0%,#191812 60%,#13120e 100%); position: relative; overflow: hidden; }\r\n.ms-hero::before { content: 'P'; position: absolute; font-family: var(--serif); font-weight: 900; font-style: italic; font-size: clamp(3rem,12vw,11rem); color: rgba(201,169,110,.04); right: -1%; top: 50%; transform: translateY(-50%); line-height: 1; pointer-events: none; }\r\n.ms-tag { font-family: var(--sans); font-size: clamp(.22rem,.42vw,.42rem); font-weight: 200; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5%; display: flex; align-items: center; gap: 3%; }\r\n.ms-tag::before { content: ''; display: block; width: clamp(6px,1.5%,16px); height: 1px; background: var(--gold); flex-shrink: 0; }\r\n.ms-h { font-family: var(--serif); font-weight: 900; font-size: clamp(.6rem,2vw,2rem); line-height: .92; color: #fff; margin-bottom: 2%; letter-spacing: -.02em; }\r\n.ms-h em { font-style: italic; color: var(--gold-lt); display: block; }\r\n.ms-p { font-size: clamp(.25rem,.5vw,.5rem); color: var(--mid); line-height: 1.7; margin-bottom: 2.5%; max-width: 36ch; }\r\n.ms-p strong { color: var(--cream); font-weight: 400; }\r\n.ms-btn { display: inline-block; background: var(--gold); color: #13120e; font-family: var(--sans); font-size: clamp(.22rem,.42vw,.42rem); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; padding: .35em 1em; }\r\n.ms-card { background: rgba(26,25,20,.92); border: 1px solid rgba(201,169,110,.15); padding: 4% 5%; position: relative; }\r\n.ms-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); }\r\n.mc-lbl { font-family: var(--sans); font-size: clamp(.18rem,.36vw,.36rem); font-weight: 200; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5%; }\r\n.mc-pr { font-family: var(--serif); font-weight: 700; font-size: clamp(.55rem,1.8vw,1.8rem); color: #fff; line-height: 1; margin-bottom: .8%; }\r\n.mc-d { font-size: clamp(.18rem,.32vw,.32rem); color: var(--muted); margin-bottom: 2.5%; }\r\n.mc-ul { list-style: none; padding-top: 2.5%; border-top: 1px solid rgba(201,169,110,.12); margin-bottom: 2.5%; display: flex; flex-direction: column; gap: 1.5%; }\r\n.mc-ul li { font-size: clamp(.18rem,.32vw,.32rem); color: var(--mid); display: flex; align-items: center; gap: 3%; }\r\n.mc-ul li::before { content: ''; width: clamp(4px,1.2%,12px); height: 1px; background: var(--gold); flex-shrink: 0; }\r\n.mc-cta { display: block; text-align: center; background: var(--gold); color: #13120e; font-family: var(--sans); font-size: clamp(.18rem,.32vw,.32rem); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; padding: .35em; }\r\n.ms-bar { background: var(--bg2); padding: 1.2% 4%; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(201,169,110,.1); flex-shrink: 0; }\r\n.ms-bar-q { font-family: var(--serif); font-size: clamp(.22rem,.42vw,.42rem); color: var(--mid); font-style: italic; }\r\n.ms-stats { display: flex; gap: 4%; }\r\n.ms-sn { font-family: var(--serif); font-weight: 700; font-size: clamp(.35rem,.72vw,.72rem); color: var(--gold); line-height: 1; }\r\n.ms-sl { font-family: var(--sans); font-size: clamp(.15rem,.28vw,.28rem); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }\r\n\r\n\/* laptop base *\/\r\n.pm-laptop-base {\r\n  background: linear-gradient(180deg,#242422 0%,#1c1c1a 100%);\r\n  height: clamp(10px,1.6vw,16px);\r\n  border-radius: 0 0 6px 6px;\r\n  border: 1px solid rgba(255,255,255,.06);\r\n  border-top: none;\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n.pm-laptop-base::after {\r\n  content: '';\r\n  width: 16%; height: 50%;\r\n  background: rgba(255,255,255,.03);\r\n  border-radius: 2px;\r\n  border: 1px solid rgba(255,255,255,.04);\r\n}\r\n.pm-laptop-foot {\r\n  height: clamp(3px,.5vw,6px);\r\n  background: linear-gradient(180deg,#111110 0%,#0a0a09 100%);\r\n  border-radius: 0 0 30px 30px;\r\n  margin: 0 4%;\r\n  box-shadow: 0 6px 30px rgba(0,0,0,.5);\r\n}\r\n\r\n\/* \u2500\u2500 PHONE \u2500\u2500 *\/\r\n.pm-phone {\r\n  position: absolute;\r\n  right: -2%;\r\n  bottom: 0;\r\n  width: 19%;\r\n  filter:\r\n    drop-shadow(-20px 30px 50px rgba(0,0,0,.8))\r\n    drop-shadow(0 0 30px rgba(201,169,110,.08));\r\n  transform: perspective(800px) rotateY(-8deg) rotateX(2deg);\r\n  transform-origin: center bottom;\r\n  z-index: 5;\r\n  opacity: 0;\r\n  animation: pmPhoneReveal 1.3s .85s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n@keyframes pmPhoneReveal {\r\n  from { opacity: 0; transform: perspective(800px) rotateY(-8deg) rotateX(2deg) translateY(40px) translateX(20px); }\r\n  to   { opacity: 1; transform: perspective(800px) rotateY(-8deg) rotateX(2deg) translateY(0) translateX(0); }\r\n}\r\n.pm-phone-body {\r\n  background: linear-gradient(160deg,#2a2a28 0%,#1c1c1a 50%,#141412 100%);\r\n  border-radius: clamp(12px,2.5vw,22px);\r\n  padding: clamp(5px,1vw,10px);\r\n  border: 1px solid rgba(255,255,255,.09);\r\n  position: relative;\r\n}\r\n.pm-phone-body::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: clamp(4px,.7vw,7px); left: 50%; transform: translateX(-50%);\r\n  width: 25%; height: clamp(3px,.6vw,6px);\r\n  background: #111; border-radius: 20px;\r\n  border: 1px solid rgba(255,255,255,.06);\r\n  z-index: 2;\r\n}\r\n.pm-phone-screen {\r\n  background: #13120e;\r\n  border-radius: clamp(8px,1.8vw,16px);\r\n  overflow: hidden;\r\n  aspect-ratio: 9\/19.5;\r\n}\r\n\/* mini phone site *\/\r\n.ph { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }\r\n.ph-nav { background: rgba(19,18,14,.98); padding: 8% 6% 4%; padding-top: 12%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(201,169,110,.1); flex-shrink: 0; position: relative; }\r\n.ph-nav::before { content: '9:41'; position: absolute; top: 3%; left: 6%; font-family: var(--sans); font-size: clamp(.15rem,.6vw,.6rem); color: rgba(255,255,255,.5); font-weight: 400; }\r\n.ph-logo { font-family: var(--serif); font-size: clamp(.35rem,.9vw,.9rem); font-weight: 400; color: #fff; }\r\n.ph-logo s { text-decoration: none; color: var(--gold); }\r\n.ph-btn { background: var(--gold); color: #13120e; font-family: var(--sans); font-size: clamp(.2rem,.5vw,.5rem); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; padding: .2em .6em; }\r\n.ph-hero { flex: 1; padding: 6% 6% 4%; background: linear-gradient(160deg,#13120e 0%,#191812 100%); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }\r\n.ph-hero::before { content: 'P'; position: absolute; font-family: var(--serif); font-weight: 900; font-style: italic; font-size: clamp(3rem,8vw,8rem); color: rgba(201,169,110,.04); bottom: -5%; right: -5%; line-height: 1; pointer-events: none; }\r\n.ph-tag { font-family: var(--sans); font-size: clamp(.18rem,.46vw,.46rem); font-weight: 200; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 4%; display: flex; align-items: center; gap: 4%; }\r\n.ph-tag::before { content: ''; width: clamp(4px,2vw,14px); height: 1px; background: var(--gold); flex-shrink: 0; }\r\n.ph-h { font-family: var(--serif); font-weight: 900; font-size: clamp(.55rem,1.5vw,1.5rem); line-height: .94; color: #fff; margin-bottom: 4%; letter-spacing: -.02em; }\r\n.ph-h em { font-style: italic; color: var(--gold-lt); display: block; }\r\n.ph-p { font-size: clamp(.22rem,.52vw,.52rem); color: var(--mid); line-height: 1.65; margin-bottom: 5%; }\r\n.ph-p strong { color: var(--cream); font-weight: 400; }\r\n.ph-cta { display: block; background: var(--gold); color: #13120e; font-family: var(--sans); font-size: clamp(.18rem,.44vw,.44rem); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; padding: .4em 1.1em; text-align: center; }\r\n.ph-bar { background: var(--bg2); padding: 4% 6%; display: flex; justify-content: space-around; border-top: 1px solid rgba(201,169,110,.1); flex-shrink: 0; }\r\n.ph-stat { text-align: center; }\r\n.ph-sn { font-family: var(--serif); font-weight: 700; font-size: clamp(.35rem,.88vw,.88rem); color: var(--gold); line-height: 1; }\r\n.ph-sl { font-family: var(--sans); font-size: clamp(.14rem,.3vw,.3rem); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }\r\n.ph-indicator { height: clamp(3px,.6vw,6px); background: rgba(255,255,255,.12); border-radius: 20px; margin: clamp(3px,.5vw,5px) auto clamp(2px,.4vw,4px); width: 30%; }\r\n\r\n\/* \u2500\u2500 HERO BOTTOM \u2500\u2500 *\/\r\n.pm-hero-bottom {\r\n  position: relative;\r\n  z-index: 10;\r\n  width: 100%;\r\n  max-width: 1060px;\r\n  padding: 3rem 0 4.5rem;\r\n  display: grid;\r\n  grid-template-columns: 1fr auto;\r\n  gap: 3rem;\r\n  align-items: center;\r\n  opacity: 0;\r\n  animation: pmFadeUp .9s 1.4s ease forwards;\r\n}\r\n.pm-hero-bottom::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0;\r\n  height: 1px;\r\n  background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);\r\n}\r\n.pm-hero-hl { }\r\n.pm-hero-hl h1 {\r\n  font-family: var(--serif);\r\n  font-weight: 900;\r\n  font-size: clamp(1.8rem,3.8vw,3.6rem);\r\n  line-height: .92;\r\n  color: #fff;\r\n  letter-spacing: -.02em;\r\n  margin-bottom: .8rem;\r\n}\r\n.pm-hero-hl h1 em { font-style: italic; color: var(--gold-lt); }\r\n.pm-hero-hl p {\r\n  font-family: var(--sans);\r\n  font-size: .95rem;\r\n  font-weight: 300;\r\n  color: var(--mid);\r\n  max-width: 50ch;\r\n  line-height: 1.8;\r\n}\r\n.pm-hero-hl p strong { color: var(--cream); font-weight: 400; }\r\n.pm-hero-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2rem;\r\n  flex-shrink: 0;\r\n}\r\n\r\n@keyframes pmFadeUp {\r\n  from { opacity: 0; transform: translateY(20px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* \u2500\u2500 MOBILE HERO \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n  .pm-hero {\r\n    padding: 80px var(--pad-h-mob) 0;\r\n    min-height: 100svh;\r\n  }\r\n  .pm-hero-eyebrow { margin-bottom: 2rem; }\r\n  .pm-device-stage {\r\n    max-width: 100%;\r\n    justify-content: center;\r\n  }\r\n  \/* hide laptop on mobile *\/\r\n  .pm-laptop { display: none; }\r\n  \/* phone centred, larger *\/\r\n  .pm-phone {\r\n    position: relative;\r\n    right: auto;\r\n    bottom: auto;\r\n    width: min(240px, 62vw);\r\n    transform: none;\r\n    animation: pmPhoneRevealMob 1.1s .5s cubic-bezier(.22,1,.36,1) forwards;\r\n    opacity: 0;\r\n  }\r\n  @keyframes pmPhoneRevealMob {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .pm-hero-bottom {\r\n    grid-template-columns: 1fr;\r\n    padding: 2.5rem 0 3.5rem;\r\n    gap: 1.5rem;\r\n  }\r\n  .pm-hero-hl h1 { font-size: clamp(1.8rem,8vw,2.6rem); }\r\n  .pm-hero-actions { flex-wrap: wrap; gap: 1rem; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-hero pm-section\" id=\"pm-hero\" aria-label=\"Hero\">\r\n  <div class=\"pm-hero-atmos\" aria-hidden=\"true\"><\/div>\r\n\r\n  <p class=\"pm-hero-eyebrow\">Web design &amp; development<\/p>\r\n\r\n  <!-- DEVICE STAGE -->\r\n  <div class=\"pm-device-stage\" aria-hidden=\"true\">\r\n\r\n    <!-- LAPTOP -->\r\n    <div class=\"pm-laptop\">\r\n      <div class=\"pm-laptop-lid\">\r\n        <div class=\"pm-chrome\">\r\n          <div class=\"pm-chrome-bar\">\r\n            <div class=\"pm-dots\">\r\n              <div class=\"pm-dot r\"><\/div>\r\n              <div class=\"pm-dot a\"><\/div>\r\n              <div class=\"pm-dot g\"><\/div>\r\n            <\/div>\r\n            <div class=\"pm-chrome-nav\">\r\n              <span>\u2039<\/span><span>\u203a<\/span>\r\n            <\/div>\r\n            <div class=\"pm-chrome-url\">\r\n              <span class=\"pm-chrome-url-lock\">\ud83d\udd12<\/span>\r\n              presentame<b>.co.uk<\/b>\r\n            <\/div>\r\n            <div class=\"pm-chrome-more\">\u22ee<\/div>\r\n          <\/div>\r\n          <div class=\"pm-chrome-tabs\">\r\n            <div class=\"pm-chrome-tab\">\r\n              <div class=\"pm-tab-fav\">p<\/div>\r\n              <span class=\"pm-tab-title\">presentame. \u2014 Beautiful Websites from \u00a350<\/span>\r\n              <span class=\"pm-tab-x\">\u00d7<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"pm-screen\">\r\n          <div class=\"ms\">\r\n            <div class=\"ms-nav\">\r\n              <div class=\"ms-logo\">presentame<s>.<\/s><\/div>\r\n              <div class=\"ms-cta\">Get Started<\/div>\r\n            <\/div>\r\n            <div class=\"ms-hero\">\r\n              <div>\r\n                <div class=\"ms-tag\">Web design &amp; development<\/div>\r\n                <div class=\"ms-h\">Your business,<br><em>beautifully<\/em><br>presented.<\/div>\r\n                <div class=\"ms-p\">Professional websites \u2014 <strong>from as little as \u00a350.<\/strong> Custom domain. Live in 7 days.<\/div>\r\n                <div class=\"ms-btn\">Start your project<\/div>\r\n              <\/div>\r\n              <div class=\"ms-card\">\r\n                <div class=\"mc-lbl\">Simple Website<\/div>\r\n                <div class=\"mc-pr\">\u00a350<\/div>\r\n                <div class=\"mc-d\">One-time \u00b7 No hidden fees<\/div>\r\n                <ul class=\"mc-ul\">\r\n                  <li>Custom domain included<\/li>\r\n                  <li>Mobile-first design<\/li>\r\n                  <li>SEO optimised<\/li>\r\n                  <li>Live within 7 days<\/li>\r\n                <\/ul>\r\n                <div class=\"mc-cta\">Claim your site<\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"ms-bar\">\r\n              <div class=\"ms-bar-q\">\"A website should work as hard as you do.\"<\/div>\r\n              <div class=\"ms-stats\">\r\n                <div><div class=\"ms-sn\">\u00a350<\/div><div class=\"ms-sl\">Website<\/div><\/div>\r\n                <div><div class=\"ms-sn\">7<\/div><div class=\"ms-sl\">Days<\/div><\/div>\r\n                <div><div class=\"ms-sn\">\u00a310<\/div><div class=\"ms-sl\">Monthly<\/div><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pm-laptop-base\"><\/div>\r\n      <div class=\"pm-laptop-foot\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- PHONE -->\r\n    <div class=\"pm-phone\">\r\n      <div class=\"pm-phone-body\">\r\n        <div class=\"pm-phone-screen\">\r\n          <div class=\"ph\">\r\n            <div class=\"ph-nav\">\r\n              <div class=\"ph-logo\">presentame<s>.<\/s><\/div>\r\n              <div class=\"ph-btn\">Menu<\/div>\r\n            <\/div>\r\n            <div class=\"ph-hero\">\r\n              <div class=\"ph-tag\">Web design<\/div>\r\n              <div class=\"ph-h\">Your business,<br><em>beautifully<\/em><br>presented.<\/div>\r\n              <div class=\"ph-p\">Professional websites \u2014 <strong>from as little as \u00a350.<\/strong><\/div>\r\n              <div class=\"ph-cta\">Start your project<\/div>\r\n            <\/div>\r\n            <div class=\"ph-bar\">\r\n              <div class=\"ph-stat\"><div class=\"ph-sn\">\u00a350<\/div><div class=\"ph-sl\">Website<\/div><\/div>\r\n              <div class=\"ph-stat\"><div class=\"ph-sn\">7<\/div><div class=\"ph-sl\">Days<\/div><\/div>\r\n              <div class=\"ph-stat\"><div class=\"ph-sn\">\u00a310<\/div><div class=\"ph-sl\">Monthly<\/div><\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ph-indicator\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/device-stage -->\r\n\r\n  <!-- BOTTOM STRIP -->\r\n  <div class=\"pm-hero-bottom\">\r\n    <div class=\"pm-hero-hl\">\r\n      <h1>Your business, <em>beautifully<\/em> presented.<\/h1>\r\n      <p>From as little as \u00a350 \u2014 professional, Google-ready websites for small businesses. <strong>Custom domain included. Live within 7 days.<\/strong><\/p>\r\n    <\/div>\r\n    <div class=\"pm-hero-actions\">\r\n      <a href=\"#pm-contact\" class=\"pm-btn-gold pm-magnetic\">Start your project<\/a>\r\n      <a href=\"#pm-services\" class=\"pm-btn-text\">View packages<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-082d069 e-flex e-con-boxed e-con e-parent\" data-id=\"082d069\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f1070d elementor-widget elementor-widget-html\" data-id=\"4f1070d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 03: Social Proof Strip\r\n     Numbers animate up on scroll via global counter JS\r\n     ============================================================ -->\r\n<style>\r\n.pm-proof { background: var(--bg2); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }\r\n.pm-proof-inner {\r\n  max-width: var(--max); margin: 0 auto;\r\n  padding: 3.5rem var(--pad-h);\r\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;\r\n}\r\n.pm-proof-item {\r\n  padding: 0 2.5rem; border-right: 1px solid var(--gold-line);\r\n  text-align: center; display: flex; flex-direction: column;\r\n  align-items: center; justify-content: center;\r\n}\r\n.pm-proof-item:first-child { padding-left: 0; text-align: left; align-items: flex-start; }\r\n.pm-proof-item:last-child  { border-right: none; padding-right: 0; text-align: right; align-items: flex-end; }\r\n.pm-proof-num {\r\n  font-family: var(--serif); font-weight: 700;\r\n  font-size: clamp(2rem, 4vw, 3.5rem);\r\n  color: var(--gold); line-height: 1; margin-bottom: .3rem;\r\n  display: flex; align-items: baseline; gap: .1em;\r\n}\r\n.pm-proof-label {\r\n  font-family: var(--sans); font-weight: 200;\r\n  font-size: .6rem; letter-spacing: .25em;\r\n  text-transform: uppercase; color: var(--muted);\r\n}\r\n@media (max-width: 768px) {\r\n  .pm-proof-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 2.5rem var(--pad-h-mob); }\r\n  .pm-proof-item { padding: 0 !important; border-right: none !important; text-align: center !important; align-items: center !important; border-bottom: 1px solid var(--gold-line); padding-bottom: 1.5rem !important; }\r\n  .pm-proof-item:nth-child(3), .pm-proof-item:nth-child(4) { border-bottom: none; padding-bottom: 0 !important; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"pm-proof pm-section\">\r\n  <div class=\"pm-proof-inner\">\r\n    <div class=\"pm-proof-item pm-reveal\">\r\n      <div class=\"pm-proof-num\">\r\n        <span>\u00a3<\/span><span class=\"pm-count\" data-target=\"50\" data-suffix=\"\">0<\/span>\r\n      <\/div>\r\n      <div class=\"pm-proof-label\">Simple website<\/div>\r\n    <\/div>\r\n    <div class=\"pm-proof-item pm-reveal d1\">\r\n      <div class=\"pm-proof-num\">\r\n        <span class=\"pm-count\" data-target=\"7\" data-suffix=\"\">0<\/span>\r\n      <\/div>\r\n      <div class=\"pm-proof-label\">Days to go live<\/div>\r\n    <\/div>\r\n    <div class=\"pm-proof-item pm-reveal d2\">\r\n      <div class=\"pm-proof-num\">\r\n        <span class=\"pm-count\" data-target=\"100\" data-suffix=\"%\">0<\/span>\r\n      <\/div>\r\n      <div class=\"pm-proof-label\">Custom domain<\/div>\r\n    <\/div>\r\n    <div class=\"pm-proof-item pm-reveal d3\">\r\n      <div class=\"pm-proof-num\">\r\n        <span>\u00a3<\/span><span class=\"pm-count\" data-target=\"10\" data-suffix=\"\">0<\/span>\r\n      <\/div>\r\n      <div class=\"pm-proof-label\">Monthly hosting<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-61d8f39 e-flex e-con-boxed e-con e-parent\" data-id=\"61d8f39\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea6671e elementor-widget elementor-widget-html\" data-id=\"ea6671e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 04: Statement \/ About\r\n     ============================================================ -->\r\n<style>\r\n.pm-statement { background: var(--bg); }\r\n.pm-statement-grid {\r\n  display: grid;\r\n  grid-template-columns: 5fr 4fr;\r\n  gap: 8rem;\r\n  align-items: center;\r\n}\r\n.pm-statement-left h2 { margin-bottom: 2rem; }\r\n.pm-statement-right {\r\n  border-left: 1px solid var(--gold-line);\r\n  padding-left: 5rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 3rem;\r\n}\r\n.pm-stat-item {}\r\n.pm-stat-fig {\r\n  font-family: var(--serif);\r\n  font-weight: 700;\r\n  font-size: clamp(2.8rem, 5vw, 4.8rem);\r\n  color: var(--gold);\r\n  line-height: 1;\r\n  margin-bottom: .3rem;\r\n}\r\n.pm-stat-fig span {\r\n  font-family: var(--sans);\r\n  font-size: 1rem;\r\n  font-weight: 200;\r\n  color: var(--muted);\r\n}\r\n.pm-stat-text {\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  font-size: .62rem;\r\n  letter-spacing: .22em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .pm-statement-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 3rem;\r\n  }\r\n  .pm-statement-right {\r\n    border-left: none;\r\n    border-top: 1px solid var(--gold-line);\r\n    padding-left: 0;\r\n    padding-top: 3rem;\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: 2rem;\r\n  }\r\n  .pm-stat-item { flex: 1; min-width: 120px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-statement pm-section\">\r\n  <div class=\"pm-inner\">\r\n    <div class=\"pm-statement-grid\">\r\n      <div class=\"pm-statement-left\">\r\n        <p class=\"pm-label pm-reveal\">About<\/p>\r\n        <h2 class=\"pm-h2 pm-reveal\">A website should work as hard <em class=\"pm-italic pm-gold\">as you do.<\/em><\/h2>\r\n        <p class=\"pm-body pm-reveal\" style=\"margin-top:1.8rem\">\r\n          We build lean, fast, beautifully crafted websites that help small businesses get found online \u2014 and look the part when customers arrive. No bloated builders. No templates that look like everyone else's. Just clean code, real SEO, and a site you'll be proud to share.\r\n        <\/p>\r\n      <\/div>\r\n      <div class=\"pm-statement-right\">\r\n        <div class=\"pm-stat-item pm-reveal d1\">\r\n          <div class=\"pm-stat-fig\">\u00a350<\/div>\r\n          <div class=\"pm-stat-text\">Simple website, built properly<\/div>\r\n        <\/div>\r\n        <div class=\"pm-stat-item pm-reveal d2\">\r\n          <div class=\"pm-stat-fig\">\u00a310<span>\/mo<\/span><\/div>\r\n          <div class=\"pm-stat-text\">Hosting &amp; maintenance<\/div>\r\n        <\/div>\r\n        <div class=\"pm-stat-item pm-reveal d3\">\r\n          <div class=\"pm-stat-fig\">7<\/div>\r\n          <div class=\"pm-stat-text\">Days from payment to live<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ee882c3 e-flex e-con-boxed e-con e-parent\" data-id=\"ee882c3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8fe748 elementor-widget elementor-widget-html\" data-id=\"d8fe748\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 05: Services\r\n     ============================================================ -->\r\n<style>\r\n.pm-services { background: var(--bg2); position: relative; overflow: hidden; }\r\n.pm-services::before {\r\n  content: 'WEBSITES';\r\n  position: absolute;\r\n  font-family: var(--serif);\r\n  font-size: clamp(8rem, 18vw, 16rem);\r\n  font-weight: 900;\r\n  font-style: italic;\r\n  color: rgba(201,169,110,.022);\r\n  bottom: -2rem; left: -1rem;\r\n  line-height: 1;\r\n  pointer-events: none;\r\n  letter-spacing: -.05em;\r\n  white-space: nowrap;\r\n}\r\n.pm-services-header {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 4rem;\r\n  align-items: end;\r\n  margin-bottom: 5rem;\r\n}\r\n.pm-services-header p { font-size: .98rem; color: var(--mid); line-height: 1.9; max-width: 44ch; }\r\n.pm-services-list { border-top: 1px solid var(--gold-line); }\r\n\r\n.pm-service-strip {\r\n  display: grid;\r\n  grid-template-columns: 70px 1fr 1fr auto;\r\n  gap: 2rem;\r\n  align-items: center;\r\n  padding: 2.5rem 0;\r\n  border-bottom: 1px solid var(--gold-line);\r\n  position: relative;\r\n  transition: all .35s;\r\n  cursor: default;\r\n}\r\n.pm-service-strip::before {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; top: 0; bottom: 0;\r\n  width: 0;\r\n  background: var(--gold-dim);\r\n  transition: width .4s;\r\n}\r\n.pm-service-strip:hover::before { width: 100%; }\r\n.pm-service-strip:hover .pm-ss-name { color: var(--gold-lt); }\r\n\r\n.pm-ss-tag {\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  font-size: .54rem;\r\n  letter-spacing: .32em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n.pm-ss-name {\r\n  font-family: var(--serif);\r\n  font-size: clamp(1.5rem, 2.5vw, 2.2rem);\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  color: #fff;\r\n  position: relative;\r\n  z-index: 1;\r\n  transition: color .35s;\r\n}\r\n.pm-ss-desc {\r\n  font-size: .86rem;\r\n  color: var(--mid);\r\n  line-height: 1.7;\r\n  max-width: 34ch;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n.pm-ss-price {\r\n  font-family: var(--serif);\r\n  font-size: clamp(1.6rem, 2.8vw, 2.6rem);\r\n  font-weight: 700;\r\n  color: var(--gold);\r\n  text-align: right;\r\n  position: relative;\r\n  z-index: 1;\r\n  white-space: nowrap;\r\n}\r\n.pm-ss-price small {\r\n  font-family: var(--sans);\r\n  font-size: .6rem;\r\n  font-weight: 200;\r\n  color: var(--muted);\r\n  display: block;\r\n  text-align: right;\r\n  letter-spacing: .1em;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .pm-services::before { display: none; }\r\n  .pm-services-header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }\r\n  .pm-service-strip { grid-template-columns: 1fr auto; gap: 1rem; }\r\n  .pm-ss-tag, .pm-ss-desc { display: none; }\r\n  .pm-ss-price { text-align: right; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-services pm-section\" id=\"pm-services\">\r\n  <div class=\"pm-inner\">\r\n    <div class=\"pm-services-header\">\r\n      <div>\r\n        <p class=\"pm-label pm-reveal\">What we offer<\/p>\r\n        <h2 class=\"pm-h2 pm-reveal\">Simple packages.<br><em class=\"pm-italic pm-gold\">Real results.<\/em><\/h2>\r\n      <\/div>\r\n      <p class=\"pm-reveal\" style=\"align-self:end\">Every package is built around one idea \u2014 your business deserves to look as good online as it does in person. No compromise, no shortcuts.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"pm-services-list pm-reveal\">\r\n      <div class=\"pm-service-strip\">\r\n        <span class=\"pm-ss-tag\">01<\/span>\r\n        <h3 class=\"pm-ss-name\">Simple Website<\/h3>\r\n        <p class=\"pm-ss-desc\">Everything a small business needs to look credible and get found on Google. Built fast, built properly, built to last.<\/p>\r\n        <div class=\"pm-ss-price\">\u00a350<small>one-time<\/small><\/div>\r\n      <\/div>\r\n      <div class=\"pm-service-strip\">\r\n        <span class=\"pm-ss-tag\">02<\/span>\r\n        <h3 class=\"pm-ss-name\">Hosting &amp; Maintenance<\/h3>\r\n        <p class=\"pm-ss-desc\">We keep your site live, secure and up to date. Content updates on request. You never have to think about it.<\/p>\r\n        <div class=\"pm-ss-price\">\u00a310<small>per month<\/small><\/div>\r\n      <\/div>\r\n      <div class=\"pm-service-strip\">\r\n        <span class=\"pm-ss-tag\">03<\/span>\r\n        <h3 class=\"pm-ss-name\">Bespoke Build<\/h3>\r\n        <p class=\"pm-ss-desc\">Something more ambitious? E-commerce, bookings, full custom design. Let's talk about what you need.<\/p>\r\n        <div class=\"pm-ss-price\" style=\"color:var(--cream);font-size:clamp(1.2rem,2vw,1.8rem)\">Quote<small>on request<\/small><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-256e74b e-flex e-con-boxed e-con e-parent\" data-id=\"256e74b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d867cd1 elementor-widget elementor-widget-html\" data-id=\"d867cd1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 06: Process\r\n     ============================================================ -->\r\n<style>\r\n.pm-process { background: var(--bg3); }\r\n.pm-process-steps {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 0;\r\n  margin-top: 4rem;\r\n  border: 1px solid var(--gold-line);\r\n}\r\n.pm-process-step {\r\n  padding: 2.5rem 2rem;\r\n  border-right: 1px solid var(--gold-line);\r\n  transition: background .3s;\r\n}\r\n.pm-process-step:last-child { border-right: none; }\r\n.pm-process-step:hover { background: rgba(201,169,110,.04); }\r\n.pm-ps-n {\r\n  font-family: var(--serif);\r\n  font-size: 2.8rem;\r\n  font-weight: 700;\r\n  color: rgba(201,169,110,.2);\r\n  line-height: 1;\r\n  margin-bottom: 1.2rem;\r\n  transition: color .3s;\r\n}\r\n.pm-process-step:hover .pm-ps-n { color: rgba(201,169,110,.45); }\r\n.pm-ps-title {\r\n  font-family: var(--serif);\r\n  font-size: 1.15rem;\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  color: #fff;\r\n  margin-bottom: .6rem;\r\n}\r\n.pm-ps-desc { font-size: .84rem; color: var(--mid); line-height: 1.7; }\r\n\r\n@media (max-width: 768px) {\r\n  .pm-process-steps { grid-template-columns: 1fr 1fr; }\r\n  .pm-process-step { border-bottom: 1px solid var(--gold-line); }\r\n  .pm-process-step:nth-child(2n) { border-right: none; }\r\n  .pm-process-step:nth-child(3),\r\n  .pm-process-step:nth-child(4) { border-bottom: none; }\r\n}\r\n@media (max-width: 480px) {\r\n  .pm-process-steps { grid-template-columns: 1fr; }\r\n  .pm-process-step { border-right: none !important; }\r\n  .pm-process-step:last-child { border-bottom: none; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-process pm-section\" id=\"pm-process\">\r\n  <div class=\"pm-inner\">\r\n    <p class=\"pm-label pm-reveal\">How it works<\/p>\r\n    <h2 class=\"pm-h2 pm-reveal\">Four steps.<br><em class=\"pm-italic pm-gold\">One week.<\/em><\/h2>\r\n    <div class=\"pm-process-steps\">\r\n      <div class=\"pm-process-step pm-reveal\">\r\n        <div class=\"pm-ps-n\">01<\/div>\r\n        <h3 class=\"pm-ps-title\">Get in touch<\/h3>\r\n        <p class=\"pm-ps-desc\">Tell us about your business. Quick, no-faff conversation about what you need.<\/p>\r\n      <\/div>\r\n      <div class=\"pm-process-step pm-reveal d1\">\r\n        <div class=\"pm-ps-n\">02<\/div>\r\n        <h3 class=\"pm-ps-title\">We build it<\/h3>\r\n        <p class=\"pm-ps-desc\">Clean code, beautiful design, fully optimised for Google and AI discovery.<\/p>\r\n      <\/div>\r\n      <div class=\"pm-process-step pm-reveal d2\">\r\n        <div class=\"pm-ps-n\">03<\/div>\r\n        <h3 class=\"pm-ps-title\">Go live<\/h3>\r\n        <p class=\"pm-ps-desc\">Your site goes live on your own custom domain. Submitted to Google the same day.<\/p>\r\n      <\/div>\r\n      <div class=\"pm-process-step pm-reveal d3\">\r\n        <div class=\"pm-ps-n\">04<\/div>\r\n        <h3 class=\"pm-ps-title\">We handle the rest<\/h3>\r\n        <p class=\"pm-ps-desc\">Hosting, updates, maintenance. You focus on your business \u2014 we handle the site.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7cf99ce e-flex e-con-boxed e-con e-parent\" data-id=\"7cf99ce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5733339 elementor-widget elementor-widget-html\" data-id=\"5733339\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 07: Portfolio\r\n     ============================================================ -->\r\n<style>\r\n.pm-portfolio { background: var(--bg); }\r\n.pm-portfolio-intro {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 4rem;\r\n  align-items: end;\r\n  margin-bottom: 4rem;\r\n}\r\n.pm-portfolio-intro p { font-size: .98rem; color: var(--mid); line-height: 1.9; max-width: 44ch; }\r\n\r\n.pm-portfolio-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 2px;\r\n  background: var(--gold-line);\r\n}\r\n.pm-portfolio-card {\r\n  background: var(--bg);\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: background .3s;\r\n  display: block;\r\n  text-decoration: none;\r\n}\r\n.pm-portfolio-card:hover { background: var(--bg2); }\r\n\r\n\/* screenshot placeholder \u2014 will be replaced with real screenshots *\/\r\n.pm-portfolio-img {\r\n  width: 100%;\r\n  aspect-ratio: 16\/10;\r\n  background: var(--bg3);\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.pm-portfolio-img img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: top;\r\n  transition: transform .6s ease;\r\n}\r\n.pm-portfolio-card:hover .pm-portfolio-img img { transform: scale(1.03); }\r\n\r\n\/* placeholder for when no screenshot yet *\/\r\n.pm-portfolio-placeholder {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);\r\n}\r\n.pm-portfolio-placeholder span {\r\n  font-family: var(--serif);\r\n  font-size: 4rem;\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  color: rgba(201,169,110,.15);\r\n}\r\n\r\n\/* hover overlay *\/\r\n.pm-portfolio-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: rgba(19,18,14,.75);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  opacity: 0;\r\n  transition: opacity .3s;\r\n}\r\n.pm-portfolio-card:hover .pm-portfolio-overlay { opacity: 1; }\r\n.pm-portfolio-overlay span {\r\n  font-family: var(--sans);\r\n  font-size: .68rem;\r\n  font-weight: 400;\r\n  letter-spacing: .2em;\r\n  text-transform: uppercase;\r\n  color: var(--gold);\r\n  border: 1px solid var(--gold);\r\n  padding: .6rem 1.4rem;\r\n}\r\n\r\n.pm-portfolio-info {\r\n  padding: 1.8rem 2rem;\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: 1rem;\r\n  border-top: 1px solid var(--gold-line);\r\n}\r\n.pm-portfolio-name {\r\n  font-family: var(--serif);\r\n  font-size: 1.2rem;\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  color: #fff;\r\n  margin-bottom: .3rem;\r\n}\r\n.pm-portfolio-type {\r\n  font-family: var(--sans);\r\n  font-size: .62rem;\r\n  font-weight: 200;\r\n  letter-spacing: .2em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n.pm-portfolio-url {\r\n  font-family: var(--sans);\r\n  font-size: .62rem;\r\n  font-weight: 200;\r\n  letter-spacing: .12em;\r\n  color: var(--gold);\r\n  white-space: nowrap;\r\n  align-self: center;\r\n  border-bottom: 1px solid rgba(201,169,110,.3);\r\n  padding-bottom: 1px;\r\n  transition: border-color .3s;\r\n}\r\n.pm-portfolio-card:hover .pm-portfolio-url { border-color: var(--gold); }\r\n\r\n@media (max-width: 768px) {\r\n  .pm-portfolio-intro { grid-template-columns: 1fr; gap: 1.5rem; }\r\n  .pm-portfolio-grid { grid-template-columns: 1fr; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-portfolio pm-section\" id=\"pm-portfolio\">\r\n  <div class=\"pm-inner\">\r\n    <div class=\"pm-portfolio-intro\">\r\n      <div>\r\n        <p class=\"pm-label pm-reveal\">Our work<\/p>\r\n        <h2 class=\"pm-h2 pm-reveal\">Built by us.<br><em class=\"pm-italic pm-gold\">Owned by you.<\/em><\/h2>\r\n      <\/div>\r\n      <p class=\"pm-reveal\" style=\"align-self:end\">Every site we build is unique to the business it represents. Here's a selection of what we've built \u2014 each one started at \u00a350.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"pm-portfolio-grid pm-reveal\">\r\n\r\n      <a href=\"https:\/\/ekvanservices.co.uk\" target=\"_blank\" rel=\"noopener\" class=\"pm-portfolio-card\">\r\n        <div class=\"pm-portfolio-img\">\r\n          <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/ekvan.jpg\"\r\n               alt=\"EK Van Services website screenshot\"\r\n               width=\"1200\" height=\"750\"\r\n               style=\"width:100%;height:100%;object-fit:cover;object-position:top\">\r\n        <\/div>\r\n        <div class=\"pm-portfolio-overlay\"><span>View live site \u2192<\/span><\/div>\r\n        <div class=\"pm-portfolio-info\">\r\n          <div>\r\n            <div class=\"pm-portfolio-name\">EK Van Services<\/div>\r\n            <div class=\"pm-portfolio-type\">Van hire \u00b7 East Kilbride, Scotland<\/div>\r\n          <\/div>\r\n          <span class=\"pm-portfolio-url\">ekvanservices.co.uk<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/casamayis.com\" target=\"_blank\" rel=\"noopener\" class=\"pm-portfolio-card\">\r\n        <div class=\"pm-portfolio-img\">\r\n          <img decoding=\"async\" src=\"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/casamayis.jpg\"\r\n               alt=\"Casa Mayis website screenshot\"\r\n               width=\"1200\" height=\"750\"\r\n               style=\"width:100%;height:100%;object-fit:cover;object-position:top\">\r\n        <\/div>\r\n        <div class=\"pm-portfolio-overlay\"><span>View live site \u2192<\/span><\/div>\r\n        <div class=\"pm-portfolio-info\">\r\n          <div>\r\n            <div class=\"pm-portfolio-name\">Casa Mayis<\/div>\r\n            <div class=\"pm-portfolio-type\">Holistic wellness \u00b7 Campeche, M\u00e9xico<\/div>\r\n          <\/div>\r\n          <span class=\"pm-portfolio-url\">casamayis.com<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/criterionbids.com\" target=\"_blank\" rel=\"noopener\" class=\"pm-portfolio-card\">\r\n        <div class=\"pm-portfolio-img\">\r\n          <img decoding=\"async\" src=\"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/criterion.jpg\"\r\n               alt=\"Criterion Bids website screenshot\"\r\n               width=\"1200\" height=\"750\"\r\n               style=\"width:100%;height:100%;object-fit:cover;object-position:top\">\r\n        <\/div>\r\n        <div class=\"pm-portfolio-overlay\"><span>View live site \u2192<\/span><\/div>\r\n        <div class=\"pm-portfolio-info\">\r\n          <div>\r\n            <div class=\"pm-portfolio-name\">Criterion Bids<\/div>\r\n            <div class=\"pm-portfolio-type\">Tender drafting \u00b7 United Kingdom<\/div>\r\n          <\/div>\r\n          <span class=\"pm-portfolio-url\">criterionbids.com<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/mayatuya.com\" target=\"_blank\" rel=\"noopener\" class=\"pm-portfolio-card\">\r\n        <div class=\"pm-portfolio-img\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/mayatuya.jpg\"\r\n               alt=\"Maya Tuya website screenshot\"\r\n               width=\"1200\" height=\"750\"\r\n               style=\"width:100%;height:100%;object-fit:cover;object-position:top\">\r\n        <\/div>\r\n        <div class=\"pm-portfolio-overlay\"><span>View live site \u2192<\/span><\/div>\r\n        <div class=\"pm-portfolio-info\">\r\n          <div>\r\n            <div class=\"pm-portfolio-name\">Maya Tuya<\/div>\r\n            <div class=\"pm-portfolio-type\">Travel network \u00b7 Campeche, M\u00e9xico<\/div>\r\n          <\/div>\r\n          <span class=\"pm-portfolio-url\">mayatuya.com<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8d8ca1d e-flex e-con-boxed e-con e-parent\" data-id=\"8d8ca1d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5d0477 elementor-widget elementor-widget-html\" data-id=\"f5d0477\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 08: Testimonials\r\n     Desktop: asymmetric grid | Mobile: Swiper carousel\r\n     ============================================================ -->\r\n<style>\r\n.pm-testi { background: var(--bg2); }\r\n\r\n\/* \u2500\u2500 DESKTOP LAYOUT \u2500\u2500 *\/\r\n.pm-testi-desktop {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 2px;\r\n  background: var(--gold-line);\r\n  margin-top: 4rem;\r\n}\r\n.pm-testi-block {\r\n  background: var(--bg);\r\n  padding: 3.5rem;\r\n  transition: background .3s;\r\n  display: flex; flex-direction: column;\r\n}\r\n.pm-testi-block:hover { background: var(--bg3); }\r\n.pm-testi-block.large {\r\n  grid-row: 1 \/ 3;\r\n  padding: 4rem;\r\n  justify-content: space-between;\r\n}\r\n.pm-testi-mark {\r\n  font-family: var(--serif); font-size: 4rem; font-weight: 700;\r\n  color: var(--gold); opacity: .3; line-height: .8; margin-bottom: 1.5rem;\r\n}\r\n.pm-testi-quote {\r\n  font-family: var(--serif); font-size: 1.08rem;\r\n  font-style: italic; color: var(--cream); line-height: 1.8; flex: 1;\r\n}\r\n.pm-testi-block.large .pm-testi-quote { font-size: 1.28rem; }\r\n.pm-testi-who {\r\n  border-top: 1px solid var(--gold-line);\r\n  padding-top: 1.5rem; margin-top: 2rem;\r\n}\r\n.pm-testi-name { font-family: var(--sans); font-weight: 500; font-size: .88rem; color: #fff; }\r\n.pm-testi-co { font-family: var(--sans); font-weight: 200; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; }\r\n\r\n\/* \u2500\u2500 MOBILE SWIPER \u2500\u2500 *\/\r\n.pm-testi-swiper { display: none; margin-top: 3rem; }\r\n.pm-testi-swiper .pm-testi-slide {\r\n  background: var(--bg);\r\n  padding: 2.5rem;\r\n  height: auto !important;\r\n  display: flex; flex-direction: column;\r\n  border: 1px solid var(--gold-line);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .pm-testi-desktop { display: none; }\r\n  .pm-testi-swiper { display: block; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-testi pm-section\" id=\"pm-testimonials\">\r\n  <div class=\"pm-inner\">\r\n    <p class=\"pm-label pm-reveal\">What clients say<\/p>\r\n    <h2 class=\"pm-h2 pm-reveal\">Real businesses.<br><em class=\"pm-italic pm-gold\">Real results.<\/em><\/h2>\r\n\r\n    <!-- DESKTOP -->\r\n    <div class=\"pm-testi-desktop\">\r\n      <div class=\"pm-testi-block large pm-reveal\">\r\n        <div>\r\n          <div class=\"pm-testi-mark\">\"<\/div>\r\n          <p class=\"pm-testi-quote\">Had the site up within a few days. Already getting enquiries through it \u2014 more than I ever got from Facebook alone. Worth every single penny and then some.<\/p>\r\n        <\/div>\r\n        <div class=\"pm-testi-who\">\r\n          <p class=\"pm-testi-name\">Mark S.<\/p>\r\n          <p class=\"pm-testi-co\">EK Van Services \u00b7 East Kilbride<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pm-testi-block pm-reveal d1\">\r\n        <div class=\"pm-testi-mark\">\"<\/div>\r\n        <p class=\"pm-testi-quote\">I was sceptical at \u00a350 honestly. But the site looks incredible. My customers comment on it all the time. The enquiries have gone through the roof.<\/p>\r\n        <div class=\"pm-testi-who\" style=\"margin-top:2rem\">\r\n          <p class=\"pm-testi-name\">Mayis.<\/p>\r\n          <p class=\"pm-testi-co\">Casa Mayis \u00b7 Campeche<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pm-testi-block pm-reveal d2\">\r\n        <div class=\"pm-testi-mark\">\"<\/div>\r\n        <p class=\"pm-testi-quote\">Clean, professional, exactly what we needed. Tender enquiries started coming in within two weeks of going live. Couldn't ask for more.<\/p>\r\n        <div class=\"pm-testi-who\" style=\"margin-top:2rem\">\r\n          <p class=\"pm-testi-name\">James T.<\/p>\r\n          <p class=\"pm-testi-co\">Criterion Bids \u00b7 London<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- MOBILE SWIPER -->\r\n    <div class=\"pm-testi-swiper swiper\">\r\n      <div class=\"swiper-wrapper\">\r\n        <div class=\"swiper-slide\">\r\n          <div class=\"pm-testi-slide\">\r\n            <div class=\"pm-testi-mark\">\"<\/div>\r\n            <p class=\"pm-testi-quote\">Had the site up within a few days. Already getting enquiries through it \u2014 more than I ever got from Facebook alone. Worth every single penny.<\/p>\r\n            <div class=\"pm-testi-who\" style=\"margin-top:1.5rem\">\r\n              <p class=\"pm-testi-name\">Mark S.<\/p>\r\n              <p class=\"pm-testi-co\">EK Van Services \u00b7 East Kilbride<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"swiper-slide\">\r\n          <div class=\"pm-testi-slide\">\r\n            <div class=\"pm-testi-mark\">\"<\/div>\r\n            <p class=\"pm-testi-quote\">I was sceptical at \u00a350 honestly. But the site looks incredible. My customers comment on it all the time. Enquiries have gone through the roof.<\/p>\r\n            <div class=\"pm-testi-who\" style=\"margin-top:1.5rem\">\r\n              <p class=\"pm-testi-name\">Mayis.<\/p>\r\n              <p class=\"pm-testi-co\">Casa Mayis \u00b7 Campeche<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"swiper-slide\">\r\n          <div class=\"pm-testi-slide\">\r\n            <div class=\"pm-testi-mark\">\"<\/div>\r\n            <p class=\"pm-testi-quote\">Clean, professional, exactly what we needed. Tender enquiries started coming in within two weeks of going live. Couldn't ask for more.<\/p>\r\n            <div class=\"pm-testi-who\" style=\"margin-top:1.5rem\">\r\n              <p class=\"pm-testi-name\">James T.<\/p>\r\n              <p class=\"pm-testi-co\">Criterion Bids \u00b7 London<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pm-swiper-pagination swiper-pagination\"><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e34426 e-flex e-con-boxed e-con e-parent\" data-id=\"3e34426\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce3db26 elementor-widget elementor-widget-html\" data-id=\"ce3db26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 09: Pricing\r\n     ============================================================ -->\r\n<style>\r\n.pm-pricing { background: var(--bg); }\r\n.pm-pricing-intro { max-width: 52ch; margin-bottom: 4rem; }\r\n.pm-pricing-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 2px;\r\n  background: var(--gold-line);\r\n}\r\n.pm-pricing-card {\r\n  background: var(--bg2);\r\n  padding: 3rem 2.5rem;\r\n  position: relative;\r\n  transition: background .3s;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.pm-pricing-card:hover { background: var(--bg3); }\r\n.pm-pricing-card.featured {\r\n  background: var(--bg3);\r\n}\r\n.pm-pricing-card.featured::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0;\r\n  height: 2px;\r\n  background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n}\r\n.pm-pricing-badge {\r\n  display: inline-block;\r\n  font-family: var(--sans);\r\n  font-size: .55rem;\r\n  font-weight: 200;\r\n  letter-spacing: .3em;\r\n  text-transform: uppercase;\r\n  color: var(--gold);\r\n  border: 1px solid rgba(201,169,110,.35);\r\n  padding: .3rem .9rem;\r\n  margin-bottom: 1.5rem;\r\n  align-self: flex-start;\r\n}\r\n.pm-pricing-name {\r\n  font-family: var(--sans);\r\n  font-size: .65rem;\r\n  font-weight: 200;\r\n  letter-spacing: .25em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  margin-bottom: 1rem;\r\n}\r\n.pm-pricing-price {\r\n  font-family: var(--serif);\r\n  font-weight: 700;\r\n  font-size: clamp(3rem, 5vw, 5rem);\r\n  color: var(--gold);\r\n  line-height: 1;\r\n  margin-bottom: .3rem;\r\n}\r\n.pm-pricing-price sub {\r\n  font-family: var(--sans);\r\n  font-size: 1rem;\r\n  font-weight: 200;\r\n  color: var(--muted);\r\n}\r\n.pm-pricing-period {\r\n  font-family: var(--sans);\r\n  font-size: .7rem;\r\n  color: var(--muted);\r\n  margin-bottom: 2.5rem;\r\n  letter-spacing: .05em;\r\n}\r\n.pm-pricing-features {\r\n  list-style: none;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: .85rem;\r\n  padding-top: 2rem;\r\n  border-top: 1px solid var(--gold-line);\r\n  margin-bottom: 2.5rem;\r\n  flex: 1;\r\n}\r\n.pm-pricing-features li {\r\n  font-family: var(--sans);\r\n  font-size: .8rem;\r\n  font-weight: 300;\r\n  color: var(--mid);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: .85rem;\r\n}\r\n.pm-pricing-features li::before {\r\n  content: '';\r\n  width: 14px; height: 1px;\r\n  background: var(--gold);\r\n  flex-shrink: 0;\r\n  opacity: .6;\r\n}\r\n.pm-pricing-cta { margin-top: auto; }\r\n\r\n@media (max-width: 768px) {\r\n  .pm-pricing-grid { grid-template-columns: 1fr; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-pricing pm-section\" id=\"pm-pricing\">\r\n  <div class=\"pm-inner\">\r\n    <p class=\"pm-label pm-reveal\">Pricing<\/p>\r\n    <h2 class=\"pm-h2 pm-reveal\">No surprises.<br><em class=\"pm-italic pm-gold\">Ever.<\/em><\/h2>\r\n    <p class=\"pm-body pm-reveal pm-pricing-intro\" style=\"margin-top:1.5rem\">\r\n      What you see is what you pay. No setup fees, no hidden charges, no long-term lock-in. Build fee paid once. Hosting monthly, cancel any time.\r\n    <\/p>\r\n\r\n    <div class=\"pm-pricing-grid pm-reveal\">\r\n\r\n      <div class=\"pm-pricing-card featured\">\r\n        <span class=\"pm-pricing-badge\">Most popular<\/span>\r\n        <p class=\"pm-pricing-name\">Simple Website<\/p>\r\n        <div class=\"pm-pricing-price\">\u00a350<\/div>\r\n        <p class=\"pm-pricing-period\">One-time payment<\/p>\r\n        <ul class=\"pm-pricing-features\">\r\n          <li>SEO &amp; GEO optimised<\/li>\r\n          <li>Custom domain included<\/li>\r\n          <li>Mobile-first design<\/li>\r\n          <li>Contact form built in<\/li>\r\n          <li>Google-ready from day one<\/li>\r\n          <li>Live within 7 days<\/li>\r\n          <li>SSL certificate included<\/li>\r\n        <\/ul>\r\n        <div class=\"pm-pricing-cta\">\r\n          <a href=\"#pm-contact\" class=\"pm-btn-gold pm-magnetic\" style=\"display:block;text-align:center\">Get started<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"pm-pricing-card\">\r\n        <p class=\"pm-pricing-name\">Hosting &amp; Maintenance<\/p>\r\n        <div class=\"pm-pricing-price\">\u00a310<sub>\/mo<\/sub><\/div>\r\n        <p class=\"pm-pricing-period\">Rolling monthly \u00b7 Cancel any time<\/p>\r\n        <ul class=\"pm-pricing-features\">\r\n          <li>Reliable hosting included<\/li>\r\n          <li>Content updates on request<\/li>\r\n          <li>Performance monitoring<\/li>\r\n          <li>Security &amp; uptime checks<\/li>\r\n          <li>Domain management<\/li>\r\n          <li>Cancel any time<\/li>\r\n        <\/ul>\r\n        <div class=\"pm-pricing-cta\">\r\n          <a href=\"#pm-contact\" class=\"pm-btn-text\">Add to your build<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"pm-pricing-card\">\r\n        <p class=\"pm-pricing-name\">Bespoke Build<\/p>\r\n        <div class=\"pm-pricing-price\" style=\"font-size:clamp(2rem,3.5vw,3.5rem);color:var(--cream)\">Quote<\/div>\r\n        <p class=\"pm-pricing-period\">Scope-based \u00b7 Agreed upfront<\/p>\r\n        <ul class=\"pm-pricing-features\">\r\n          <li>Fully custom design<\/li>\r\n          <li>E-commerce &amp; bookings<\/li>\r\n          <li>API integrations<\/li>\r\n          <li>Multi-page builds<\/li>\r\n          <li>WordPress &amp; CMS<\/li>\r\n          <li>Ongoing partnership available<\/li>\r\n        <\/ul>\r\n        <div class=\"pm-pricing-cta\">\r\n          <a href=\"#pm-contact\" class=\"pm-btn-text\">Discuss your project<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ed1404a e-flex e-con-boxed e-con e-parent\" data-id=\"ed1404a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b3ba785 elementor-widget elementor-widget-html\" data-id=\"b3ba785\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 10: FAQ\r\n     ============================================================ -->\r\n<style>\r\n.pm-faq { background: var(--bg2); }\r\n.pm-faq-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 4rem;\r\n  margin-top: 4rem;\r\n}\r\n.pm-faq-col { display: flex; flex-direction: column; gap: 0; }\r\n.pm-faq-item {\r\n  border-bottom: 1px solid var(--gold-line);\r\n  padding: 2rem 0;\r\n}\r\n.pm-faq-item:first-child { border-top: 1px solid var(--gold-line); }\r\n\r\n.pm-faq-q {\r\n  font-family: var(--serif);\r\n  font-size: 1.1rem;\r\n  font-weight: 700;\r\n  color: #fff;\r\n  margin-bottom: .9rem;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: 1rem;\r\n  user-select: none;\r\n}\r\n.pm-faq-q::after {\r\n  content: '+';\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  font-size: 1.4rem;\r\n  color: var(--gold);\r\n  flex-shrink: 0;\r\n  line-height: 1.2;\r\n  transition: transform .3s;\r\n}\r\n.pm-faq-item.open .pm-faq-q::after { transform: rotate(45deg); }\r\n\r\n.pm-faq-a {\r\n  font-size: .9rem;\r\n  color: var(--mid);\r\n  line-height: 1.85;\r\n  max-height: 0;\r\n  overflow: hidden;\r\n  transition: max-height .4s ease, padding .3s;\r\n}\r\n.pm-faq-item.open .pm-faq-a {\r\n  max-height: 300px;\r\n  padding-bottom: .5rem;\r\n}\r\n.pm-faq-a a { color: var(--gold); border-bottom: 1px solid rgba(201,169,110,.35); padding-bottom: 1px; }\r\n\r\n@media (max-width: 768px) {\r\n  .pm-faq-grid { grid-template-columns: 1fr; gap: 0; }\r\n  .pm-faq-col:first-child .pm-faq-item:last-child { border-bottom: none; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-faq pm-section\" id=\"pm-faq\">\r\n  <div class=\"pm-inner\">\r\n    <p class=\"pm-label pm-reveal\">FAQ<\/p>\r\n    <h2 class=\"pm-h2 pm-reveal\">Good questions.<br><em class=\"pm-italic pm-gold\">Straight answers.<\/em><\/h2>\r\n\r\n    <div class=\"pm-faq-grid\">\r\n      <div class=\"pm-faq-col\">\r\n\r\n        <div class=\"pm-faq-item pm-reveal\">\r\n          <div class=\"pm-faq-q\">Will my site actually show up on Google?<\/div>\r\n          <div class=\"pm-faq-a\">Yes \u2014 every site we build is properly SEO-optimised and submitted to Google Search Console on the day it goes live. You won't appear overnight, but within a few days Google will start indexing your pages. We also include schema markup so Google understands your business, location and services clearly.<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pm-faq-item pm-reveal\">\r\n          <div class=\"pm-faq-q\">What if I want changes after the site is live?<\/div>\r\n          <div class=\"pm-faq-a\">Minor changes \u2014 updated prices, new services, different phone number \u2014 are included as part of the \u00a310\/month hosting plan. Just send us a message and we'll sort it, usually the same day. Larger structural changes (new sections, new pages) are quoted separately.<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pm-faq-item pm-reveal\">\r\n          <div class=\"pm-faq-q\">What happens if I stop paying the monthly fee?<\/div>\r\n          <div class=\"pm-faq-a\">Your site goes offline. We give you 7 days' notice before suspending. If you want to take your site elsewhere, we'll transfer your domain to you for a one-time \u00a317 fee \u2014 it's yours to keep. No data is deleted; if you come back, we can restore everything.<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n      <div class=\"pm-faq-col\">\r\n\r\n        <div class=\"pm-faq-item pm-reveal\">\r\n          <div class=\"pm-faq-q\">Do I own my domain name?<\/div>\r\n          <div class=\"pm-faq-a\">We purchase and manage the domain on your behalf as part of the service \u2014 it's included in your \u00a350 build fee. If you ever leave, the domain is transferred to you for a \u00a317 fee. It was built to receive traffic, so there's real value in it by then.<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pm-faq-item pm-reveal\">\r\n          <div class=\"pm-faq-q\">How do customers contact me through the site?<\/div>\r\n          <div class=\"pm-faq-a\">Every site includes a contact form that sends enquiries directly to your email address. We also add click-to-call and WhatsApp buttons where relevant \u2014 so customers can reach you however they prefer, with one tap from their phone.<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pm-faq-item pm-reveal\">\r\n          <div class=\"pm-faq-q\">Can I see examples of sites you've built?<\/div>\r\n          <div class=\"pm-faq-a\">Absolutely \u2014 check out our <a href=\"#pm-portfolio\">portfolio section<\/a> above. Every site there started at \u00a350 and was built using the same process we'll use for yours.<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  document.querySelectorAll('.pm-faq-q').forEach(function(q){\r\n    q.addEventListener('click', function(){\r\n      var item = q.parentElement;\r\n      var wasOpen = item.classList.contains('open');\r\n      document.querySelectorAll('.pm-faq-item.open').forEach(function(i){ i.classList.remove('open'); });\r\n      if(!wasOpen) item.classList.add('open');\r\n    });\r\n  });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-389a76e e-flex e-con-boxed e-con e-parent\" data-id=\"389a76e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd5bb8b elementor-widget elementor-widget-html\" data-id=\"cd5bb8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 11: Final CTA\r\n     ============================================================ -->\r\n<style>\r\n.pm-cta-section {\r\n  background: var(--bg2);\r\n  position: relative;\r\n  overflow: hidden;\r\n  text-align: center;\r\n}\r\n.pm-cta-section::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 800px; height: 800px;\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(201,169,110,.06) 0%, transparent 70%);\r\n  top: 50%; left: 50%;\r\n  transform: translate(-50%,-50%);\r\n  pointer-events: none;\r\n}\r\n.pm-cta-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 800px;\r\n  margin: 0 auto;\r\n}\r\n.pm-cta-h {\r\n  font-family: var(--serif);\r\n  font-weight: 900;\r\n  font-style: italic;\r\n  font-size: clamp(3rem, 7vw, 7rem);\r\n  color: #fff;\r\n  line-height: .9;\r\n  margin-bottom: 1.8rem;\r\n  letter-spacing: -.02em;\r\n}\r\n.pm-cta-h span { color: var(--gold-lt); }\r\n.pm-cta-sub {\r\n  font-size: 1.05rem;\r\n  color: var(--mid);\r\n  margin-bottom: 3rem;\r\n  line-height: 1.8;\r\n  max-width: 48ch;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n}\r\n.pm-cta-sub strong { color: var(--cream); font-weight: 400; }\r\n.pm-cta-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 2rem;\r\n  flex-wrap: wrap;\r\n}\r\n<\/style>\r\n\r\n<section class=\"pm-cta-section pm-section\" id=\"pm-contact\">\r\n  <div class=\"pm-inner\">\r\n    <div class=\"pm-cta-inner\">\r\n      <p class=\"pm-eyebrow centered decorated pm-reveal\" style=\"justify-content:center;margin-bottom:2rem\">Ready?<\/p>\r\n      <h2 class=\"pm-cta-h pm-reveal\">From as little<br>as <span>\u00a350.<\/span><\/h2>\r\n      <p class=\"pm-cta-sub pm-reveal\">Your business on Google, looking the part, within 7 days. <strong>No jargon. No faff.<\/strong> Just a site that works as hard as you do.<\/p>\r\n      <div class=\"pm-cta-actions pm-reveal\">\r\n        <a href=\"mailto:hello@presentame.online\" class=\"pm-btn-gold pm-magnetic\">Start your project today<\/a>\r\n        <a href=\"mailto:hello@presentame.online\" class=\"pm-btn-text\">hello@presentame.online<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c04bc2f e-flex e-con-boxed e-con e-parent\" data-id=\"c04bc2f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e985b3 elementor-widget elementor-widget-html\" data-id=\"3e985b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     presentame. \u2014 Section 12: Footer\r\n     ============================================================ -->\r\n<style>\r\n.pm-footer {\r\n  background: var(--bg);\r\n  padding: 3rem var(--pad-h);\r\n  border-top: 1px solid var(--gold-line);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 2rem;\r\n}\r\n.pm-footer-brand {\r\n  font-family: var(--serif);\r\n  font-size: 1.1rem;\r\n  font-weight: 400;\r\n  color: var(--mid);\r\n  text-decoration: none;\r\n}\r\n.pm-footer-brand sup {\r\n  font-size: .44rem;\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  letter-spacing: .28em;\r\n  color: var(--gold);\r\n  text-transform: uppercase;\r\n  vertical-align: super;\r\n  margin-left: 1px;\r\n}\r\n.pm-footer-links {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2rem;\r\n  list-style: none;\r\n}\r\n.pm-footer-links a {\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  font-size: .6rem;\r\n  letter-spacing: .18em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  text-decoration: none;\r\n  transition: color .3s;\r\n}\r\n.pm-footer-links a:hover { color: var(--gold); }\r\n.pm-footer-copy {\r\n  font-family: var(--sans);\r\n  font-weight: 200;\r\n  font-size: .58rem;\r\n  letter-spacing: .18em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .pm-footer {\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    padding: 2.5rem var(--pad-h-mob);\r\n    gap: 1.5rem;\r\n  }\r\n  .pm-footer-links { flex-wrap: wrap; justify-content: center; gap: 1.2rem; }\r\n}\r\n<\/style>\r\n\r\n<footer class=\"pm-footer\" role=\"contentinfo\">\r\n  <a href=\"#\" class=\"pm-footer-brand\" aria-label=\"presentame. home\">\r\n    presentame<sup>.<\/sup>\r\n  <\/a>\r\n  <ul class=\"pm-footer-links\">\r\n    <li><a href=\"#pm-services\">Services<\/a><\/li>\r\n    <li><a href=\"#pm-portfolio\">Work<\/a><\/li>\r\n    <li><a href=\"#pm-pricing\">Pricing<\/a><\/li>\r\n    <li><a href=\"#pm-faq\">FAQ<\/a><\/li>\r\n    <li><a href=\"\/privacy-policy\">Privacy Policy<\/a><\/li>\r\n    <li><a href=\"mailto:hello@presentame.online\">hello@presentame.online<\/a><\/li>\r\n  <\/ul>\r\n  <p class=\"pm-footer-copy\">\u00a9 <span id=\"pmYear\"><\/span> presentame.<\/p>\r\n<\/footer>\r\n\r\n<script>\r\ndocument.getElementById('pmYear').textContent = new Date().getFullYear();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>presentame. presentame. Services How it works Our work Pricing Contact Get started Services How it works Our work Pricing Contact Get started Web design &amp; development \u2039\u203a \ud83d\udd12 presentame.co.uk \u22ee p presentame. \u2014 Beautiful Websites from \u00a350 \u00d7 presentame. Get Started Web design &amp; development Your business,beautifullypresented. Professional websites \u2014 from as little as \u00a350. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - presentame.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/presentame.co.uk\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - presentame.\" \/>\n<meta property=\"og:description\" content=\"presentame. presentame. Services How it works Our work Pricing Contact Get started Services How it works Our work Pricing Contact Get started Web design &amp; development \u2039\u203a \ud83d\udd12 presentame.co.uk \u22ee p presentame. \u2014 Beautiful Websites from \u00a350 \u00d7 presentame. Get Started Web design &amp; development Your business,beautifullypresented. Professional websites \u2014 from as little as \u00a350. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/presentame.co.uk\/\" \/>\n<meta property=\"og:site_name\" content=\"presentame.\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-08T12:15:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/ekvan.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/\",\"url\":\"https:\\\/\\\/presentame.co.uk\\\/\",\"name\":\"Home - presentame.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/presentame.co.uk\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/ekvan.jpg\",\"datePublished\":\"2026-06-08T09:16:24+00:00\",\"dateModified\":\"2026-06-08T12:15:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/presentame.co.uk\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/#primaryimage\",\"url\":\"https:\\\/\\\/presentame.co.uk\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/ekvan.jpg\",\"contentUrl\":\"https:\\\/\\\/presentame.co.uk\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/ekvan.jpg\",\"width\":1200,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/presentame.co.uk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/presentame.co.uk\\\/#website\",\"url\":\"https:\\\/\\\/presentame.co.uk\\\/\",\"name\":\"presentame.\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/presentame.co.uk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - presentame.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/presentame.co.uk\/","og_locale":"en_US","og_type":"article","og_title":"Home - presentame.","og_description":"presentame. presentame. Services How it works Our work Pricing Contact Get started Services How it works Our work Pricing Contact Get started Web design &amp; development \u2039\u203a \ud83d\udd12 presentame.co.uk \u22ee p presentame. \u2014 Beautiful Websites from \u00a350 \u00d7 presentame. Get Started Web design &amp; development Your business,beautifullypresented. Professional websites \u2014 from as little as \u00a350. [&hellip;]","og_url":"https:\/\/presentame.co.uk\/","og_site_name":"presentame.","article_modified_time":"2026-06-08T12:15:10+00:00","og_image":[{"url":"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/ekvan.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/presentame.co.uk\/","url":"https:\/\/presentame.co.uk\/","name":"Home - presentame.","isPartOf":{"@id":"https:\/\/presentame.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/presentame.co.uk\/#primaryimage"},"image":{"@id":"https:\/\/presentame.co.uk\/#primaryimage"},"thumbnailUrl":"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/ekvan.jpg","datePublished":"2026-06-08T09:16:24+00:00","dateModified":"2026-06-08T12:15:10+00:00","breadcrumb":{"@id":"https:\/\/presentame.co.uk\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/presentame.co.uk\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/presentame.co.uk\/#primaryimage","url":"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/ekvan.jpg","contentUrl":"https:\/\/presentame.co.uk\/wp-content\/uploads\/2026\/06\/ekvan.jpg","width":1200,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/presentame.co.uk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/presentame.co.uk\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/presentame.co.uk\/#website","url":"https:\/\/presentame.co.uk\/","name":"presentame.","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/presentame.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/presentame.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/presentame.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/presentame.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/presentame.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/presentame.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":5,"href":"https:\/\/presentame.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/presentame.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/presentame.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}