Home
AdviceHub
Consultations
Projects
Example Drawings
About Us
Services
Why Us
Process
Project Rescue
Contact Us
9 – Why Choose an ARB and RIBA Registered Architect’s Practice?
// ── DATA ────────────────────────────────────────────────────────────────── const ZONES = { loft:{ eyebrow:'Loft Conversion', title:'Unlock the<br><em>Space Above</em>', desc:'Your roof space is one of the most underused square metres in your home. A well-designed loft conversion — Velux, dormer, hip-to-gable, or mansard — can add a master bedroom, home office, or self-contained suite without touching your garden. In most cases, permitted development rights mean no full planning application is needed.', facts:[{n:'+20%',l:'Avg. added value'},{n:'6–10',l:'Weeks on site'},{n:'PD',l:'Often no planning'}], color:'#4a9b8e', services:['planning','bim','visualisations','drawings','walkthroughs'], svgType:'loft' }, rear:{ eyebrow:'Rear & Wraparound Extension', title:'Extend into<br><em>Open Living</em>', desc:'The rear extension is the most popular transformation in UK residential architecture — and a wraparound combines rear and side into one fluid space. From single-storey glazed garden rooms and bifold kitchen extensions to full two-storey additions, the options are genuinely exciting. A wraparound gives you the complete open-plan ground floor most families dream of.', facts:[{n:'+15%',l:'Avg. added value'},{n:'3–8m',l:'Typical depth'},{n:'6–16',l:'Weeks on site'}], color:'#c8a96e', services:['planning','drawings','visualisations','bim','submission','walkthroughs'], svgType:'rear' }, garage:{ eyebrow:'Garage Conversion', title:'Transform a<br><em>Forgotten Space</em>', desc:'Most UK garages store everything except a car. Converting your integral or attached garage is the quickest route to extra living space — typically permitted development with no planning application required. A ground-floor bedroom with ensuite, home gym, playroom, studio — the cost per square metre is the lowest of any extension type.', facts:[{n:'£20k',l:'Typical cost'},{n:'PD',l:'Usually no planning'},{n:'4–6',l:'Weeks on site'}], color:'#c8896e', services:['drawings','bim','visualisations','walkthroughs'], svgType:'garage' }, basement:{ eyebrow:'Basement / Lower Ground', title:'Go<br><em>Underground</em>', desc:'Creating below-ground space is the ultimate transformation — increasingly common in urban areas where extending up or out is restricted. A full basement conversion or new excavation can deliver cinema rooms, cellars, gyms, or entire guest floors. Complex to engineer, extraordinary in result, and often the only route to significantly more space in a conservation area.', facts:[{n:'+25%',l:'Avg. added value'},{n:'Full',l:'Planning required'},{n:'16–24',l:'Weeks on site'}], color:'#6e8ec8', services:['planning','submission','drawings','bim','visualisations','walkthroughs'], svgType:'basement' }, newbuild:{ eyebrow:'New Build', title:'Build from<br><em>Blank Canvas</em>', desc:'Starting from scratch is a rare privilege. Whether it\'s a plot you\'ve found, a property to demolish and replace, or a self-build dream, a new build is total architectural freedom. We take you from the very first sketch through planning, structural design, and full construction documentation — your vision, precisely realised.', facts:[{n:'∞',l:'Design freedom'},{n:'Full',l:'Planning required'},{n:'Bespoke',l:'Programme'}], color:'#9bc84a', services:['planning','submission','drawings','bim','visualisations','walkthroughs'], svgType:'newbuild' } }; const SERVICES = { planning:{name:'Planning Drawings',desc:'Precisely prepared drawings for your Local Planning Authority — location plans, existing and proposed floor plans, elevations, site plans and all supporting documentation, giving your application the best chance of approval first time.'}, submission:{name:'Planning Submission',desc:'We manage the entire application process on your behalf. From pre-application discussions with the council to responding to neighbour consultations and planning officer queries — we navigate the system so you don\'t have to.'}, drawings:{name:'Building Regs Drawings',desc:'Full Building Regulations drawings required before work begins. Detailed technical drawings covering structure, insulation, drainage, fire strategy and Part L energy compliance. Essential for every project.'}, bim:{name:'3D BIM Models',desc:'Intelligent 3D models of your project — not just visuals, but data-rich models that contractors, engineers and quantity surveyors all work from. Fewer on-site errors, faster programmes, significant cost savings.'}, visualisations:{name:'Visualisations',desc:'Photorealistic or illustrative 3D renders before anything is built. Understand exactly how your new space will look and feel, make confident decisions on materials and finishes, and use the images to support planning and funding.'}, walkthroughs:{name:'3D Fly-Throughs & Walkthroughs',desc:'Animated fly-throughs and interactive walkthroughs bring your project to life before a brick is laid. Walk through your future home room by room, experience the light and proportions. Outstanding for planning committees and for committing to a design with full confidence.'} }; // ── PANEL ILLUSTRATIONS ─────────────────────────────────────────────────── function getIllustration(type, c) { const I = { loft:`<svg viewBox="0 0 300 290" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto"> <rect x="30" y="140" width="240" height="90" fill="#1a1e18" stroke="${c}" stroke-width="0.8" opacity="0.5"/> <!-- Hip-to-gable roof matching main house: left side square, right side pitched --> <rect x="30" y="50" width="120" height="90" fill="#252c22"/> <polygon points="150,50 280,140 150,140" fill="#1e2520"/> <line x1="30" y1="50" x2="30" y2="140" stroke="${c}" stroke-width="1.8" opacity="0.75"/> <line x1="30" y1="50" x2="150" y2="50" stroke="${c}" stroke-width="1.5" opacity="0.65"/> <line x1="150" y1="50" x2="280" y2="140" stroke="${c}" stroke-width="1.5" opacity="0.55"/> <line x1="30" y1="140" x2="280" y2="140" stroke="${c}" stroke-width="1.1" opacity="0.45"/> <circle cx="150" cy="50" r="3.5" fill="${c}" opacity="0.8"/> <!-- Gable window on left face --> <rect x="58" y="68" width="58" height="52" fill="#1e3020" stroke="${c}" stroke-width="1" opacity="0.9"/> <line x1="87" y1="68" x2="87" y2="120" stroke="${c}" stroke-width="0.7" opacity="0.4"/> <line x1="58" y1="94" x2="116" y2="94" stroke="${c}" stroke-width="0.6" opacity="0.35"/> <!-- Dormer on right slope --> <rect x="178" y="108" width="44" height="32" fill="#1e2318" stroke="${c}" stroke-width="0.9"/> <polygon points="171,110 200,94 229,110" fill="#242a20" stroke="${c}" stroke-width="0.9"/> <rect x="184" y="114" width="32" height="20" fill="#1a2818" stroke="${c}" stroke-width="0.8"/> <line x1="200" y1="114" x2="200" y2="134" stroke="${c}" stroke-width="0.6" opacity="0.3"/> <text x="150" y="246" text-anchor="middle" fill="${c}" font-size="10" opacity="0.45" font-family="DM Sans,sans-serif" letter-spacing="2.5">DORMER · HIP-TO-GABLE · MANSARD</text> </svg>`, rear:`<svg viewBox="0 0 300 290" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto"> <!-- Main house --> <rect x="20" y="88" width="155" height="142" fill="#1a1e18" stroke="${c}" stroke-width="0.8" opacity="0.6"/> <polygon points="97,50 10,88 185,88" fill="#222820" stroke="${c}" stroke-width="1" opacity="0.7"/> <!-- Rear extension flat roof --> <rect x="175" y="130" width="100" height="100" fill="#20261e" stroke="${c}" stroke-width="1.2"/> <rect x="175" y="118" width="100" height="14" fill="#2a3228" stroke="${c}" stroke-width="1.1"/> <!-- Bifold glazing --> <rect x="183" y="142" width="84" height="80" fill="#1e3822" stroke="${c}" stroke-width="1.1"/> <line x1="211" y1="142" x2="211" y2="222" stroke="${c}" stroke-width="0.7" opacity="0.5"/> <line x1="239" y1="142" x2="239" y2="222" stroke="${c}" stroke-width="0.7" opacity="0.5"/> <line x1="183" y1="180" x2="267" y2="180" stroke="${c}" stroke-width="0.7" opacity="0.4"/> <!-- Wraparound dashed indicator (no label) --> <rect x="20" y="188" width="55" height="42" fill="rgba(200,169,110,0.04)" stroke="${c}" stroke-width="0.8" stroke-dasharray="4,3"/> <text x="155" y="268" text-anchor="middle" fill="${c}" font-size="10" opacity="0.4" font-family="DM Sans,sans-serif" letter-spacing="2">REAR · WRAPAROUND</text> </svg>`, garage:`<svg viewBox="0 0 300 290" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto"> <!-- Main house --> <rect x="140" y="96" width="140" height="148" fill="#1a1e18" stroke="${c}" stroke-width="0.8" opacity="0.5"/> <polygon points="210,58 130,96 290,96" fill="#222820" stroke="${c}" stroke-width="0.9" opacity="0.6"/> <!-- Attached garage --> <rect x="20" y="162" width="120" height="82" fill="#20281e" stroke="${c}" stroke-width="1.2"/> <rect x="20" y="148" width="120" height="16" fill="#2a3228" stroke="${c}" stroke-width="1.1"/> <!-- Garage door --> <rect x="30" y="170" width="100" height="66" fill="#181e16" stroke="${c}" stroke-width="1.1"/> <line x1="30" y1="184" x2="130" y2="184" stroke="${c}" stroke-width="0.6" opacity="0.3"/> <line x1="30" y1="198" x2="130" y2="198" stroke="${c}" stroke-width="0.6" opacity="0.3"/> <line x1="30" y1="212" x2="130" y2="212" stroke="${c}" stroke-width="0.6" opacity="0.3"/> <line x1="30" y1="226" x2="130" y2="226" stroke="${c}" stroke-width="0.6" opacity="0.3"/> <rect x="30" y="170" width="100" height="12" fill="#1e2e1a" stroke="${c}" stroke-width="0.7"/> <line x1="140" y1="148" x2="140" y2="244" stroke="${c}" stroke-width="1.3" opacity="0.6"/> <text x="150" y="268" text-anchor="middle" fill="${c}" font-size="10" opacity="0.4" font-family="DM Sans,sans-serif" letter-spacing="2">INTEGRAL GARAGE</text> </svg>`, basement:`<svg viewBox="0 0 300 290" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto"> <!-- Ghost house above ground --> <polygon points="150,18 30,58 270,58" fill="none" stroke="${c}" stroke-width="0.6" opacity="0.3" stroke-dasharray="5,3"/> <rect x="40" y="58" width="220" height="78" fill="#161a14" stroke="${c}" stroke-width="0.6" opacity="0.4" stroke-dasharray="5,3"/> <!-- Ground line --> <line x1="10" y1="138" x2="290" y2="138" stroke="${c}" stroke-width="1.4" opacity="0.55"/> <text x="150" y="130" text-anchor="middle" fill="${c}" font-size="9" opacity="0.45" font-family="DM Sans,sans-serif" letter-spacing="3">GROUND LEVEL</text> <!-- Basement --> <rect x="40" y="142" width="220" height="88" fill="#121510" stroke="${c}" stroke-width="1.2"/> <rect x="55" y="152" width="42" height="18" fill="#1a2618" stroke="${c}" stroke-width="0.9"/> <line x1="76" y1="152" x2="76" y2="170" stroke="${c}" stroke-width="0.6" opacity="0.4"/> <rect x="129" y="152" width="42" height="18" fill="#1a2618" stroke="${c}" stroke-width="0.9"/> <line x1="150" y1="152" x2="150" y2="170" stroke="${c}" stroke-width="0.6" opacity="0.4"/> <rect x="203" y="152" width="42" height="18" fill="#1a2618" stroke="${c}" stroke-width="0.9"/> <line x1="224" y1="152" x2="224" y2="170" stroke="${c}" stroke-width="0.6" opacity="0.4"/> <text x="150" y="216" text-anchor="middle" fill="${c}" font-size="10" opacity="0.38" font-family="DM Sans,sans-serif" letter-spacing="2">CINEMA · CELLAR · GYM</text> <text x="150" y="268" text-anchor="middle" fill="${c}" font-size="10" opacity="0.35" font-family="DM Sans,sans-serif" letter-spacing="3">LOWER GROUND FLOOR</text> </svg>`, newbuild:`<svg viewBox="0 0 300 290" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto"> <!-- Ghost house --> <polygon points="150,36 45,76 255,76" fill="none" stroke="${c}" stroke-width="0.8" stroke-dasharray="5,3"/> <rect x="60" y="76" width="180" height="82" fill="rgba(155,200,74,0.04)" stroke="${c}" stroke-width="0.8" stroke-dasharray="5,3"/> <!-- Plot outline --> <rect x="30" y="158" width="240" height="76" fill="rgba(155,200,74,0.04)" stroke="${c}" stroke-width="1" stroke-dasharray="6,4"/> <!-- Corner pegs --> <circle cx="30" cy="158" r="4" fill="${c}" opacity="0.7"/> <circle cx="270" cy="158" r="4" fill="${c}" opacity="0.7"/> <circle cx="30" cy="234" r="4" fill="${c}" opacity="0.7"/> <circle cx="270" cy="234" r="4" fill="${c}" opacity="0.7"/> <!-- Ridge marker --> <circle cx="150" cy="36" r="3" fill="${c}" opacity="0.5"/> <text x="150" y="20" text-anchor="middle" fill="${c}" font-size="10" opacity="0.45" font-family="DM Sans,sans-serif" letter-spacing="2.5">YOUR DESIGN</text> <text x="150" y="268" text-anchor="middle" fill="${c}" font-size="10" opacity="0.45" font-family="DM Sans,sans-serif" letter-spacing="3">YOUR PLOT · YOUR VISION</text> </svg>` }; return I[type]||''; } // ── CURSOR ──────────────────────────────────────────────────────────────── let mx=0,my=0,rx=0,ry=0; const curEl=document.getElementById('cur'), ringEl=document.getElementById('cur-ring'); document.addEventListener('mousemove',e=>{ mx=e.clientX; my=e.clientY; curEl.style.left=mx+'px'; curEl.style.top=my+'px'; }); (function R(){rx+=(mx-rx)*.1;ry+=(my-ry)*.1;ringEl.style.left=rx+'px';ringEl.style.top=ry+'px';requestAnimationFrame(R);})(); function bigCur(on){curEl.classList.toggle('big',on);} // ── ENTER ───────────────────────────────────────────────────────────────── document.getElementById('enter-btn').addEventListener('click',enterStage); function enterStage(){ document.getElementById('home').classList.add('gone'); document.getElementById('stage').classList.add('on'); document.getElementById('zone-nav').classList.add('on'); // Spawn particles const st=document.getElementById('stage'); for(let i=0;i<18;i++){ const p=document.createElement('div'); p.className='amb'; const s=1+Math.random()*2; p.style.cssText=`width:${s}px;height:${s}px;left:${Math.random()*100}%;top:${20+Math.random()*65}%;animation-duration:${5+Math.random()*9}s;animation-delay:${Math.random()*9}s;position:absolute;`; st.appendChild(p); } } // ── ZONE INTERACTIONS ───────────────────────────────────────────────────── const TAG_MAP={ loft:'tl-loft', rear:'tl-rear', garage:'tl-garage', basement:'tl-basement', newbuild:'tl-newbuild' }; document.querySelectorAll('.zone-group').forEach(g=>{ const zone=g.dataset.zone; const tagEl=document.getElementById(TAG_MAP[zone]); g.addEventListener('mouseenter',()=>{ bigCur(true); if(tagEl){tagEl.style.opacity='1';tagEl.style.transform='translateY(0)';} }); g.addEventListener('mouseleave',()=>{ bigCur(false); if(tagEl){tagEl.style.opacity='0';tagEl.style.transform='translateY(5px)';} }); g.addEventListener('click',()=>openPanel(zone)); }); // Nav dots document.querySelectorAll('.zdot').forEach(b=>{ b.addEventListener('click',()=>openPanel(b.dataset.zone)); b.addEventListener('mouseenter',()=>bigCur(true)); b.addEventListener('mouseleave',()=>bigCur(false)); }); // ── OPEN PANEL ──────────────────────────────────────────────────────────── function openPanel(zone){ const d=ZONES[zone]; if(!d)return; document.querySelectorAll('.zdot').forEach(b=>b.classList.toggle('lit',b.dataset.zone===zone)); document.getElementById('p-eyebrow').textContent=d.eyebrow; document.getElementById('p-title').innerHTML=d.title; document.getElementById('p-desc').textContent=d.desc; document.getElementById('p-facts').innerHTML=d.facts.map(f=>`<div class="pfact"><span>${f.n}</span><small>${f.l}</small></div>`).join(''); document.getElementById('p-svcs').innerHTML=d.services.map(s=>`<div class="svc-pill" data-svc="${s}"><div class="svc-dot"></div>${SERVICES[s].name}</div>`).join(''); document.getElementById('vis-glow').style.background=d.color; document.getElementById('panel-vis-svg').innerHTML=getIllustration(d.svgType,d.color); // Always reset scroll to top before opening document.getElementById('panel-inner').scrollTop=0; document.getElementById('panel').classList.add('open'); document.querySelectorAll('.svc-pill').forEach(pill=>{ pill.addEventListener('mouseenter',e=>showTip(e,pill.dataset.svc)); pill.addEventListener('mousemove',e=>moveTip(e)); pill.addEventListener('mouseleave',hideTip); pill.addEventListener('mouseenter',()=>bigCur(true)); pill.addEventListener('mouseleave',()=>bigCur(false)); }); } function closePanel(){ hideTip(); document.getElementById('panel').classList.remove('open'); document.getElementById('panel-inner').scrollTop=0; document.querySelectorAll('.zdot').forEach(b=>b.classList.remove('lit')); } document.getElementById('panel-close').addEventListener('click',closePanel); document.getElementById('panel-bd').addEventListener('click',closePanel); document.addEventListener('keydown',e=>{if(e.key==='Escape')closePanel();}); document.getElementById('panel-close').addEventListener('mouseenter',()=>bigCur(true)); document.getElementById('panel-close').addEventListener('mouseleave',()=>bigCur(false)); // ── TOOLTIP ─────────────────────────────────────────────────────────────── const tip=document.getElementById('tip'); function showTip(e,k){ document.getElementById('tip-title').textContent=SERVICES[k].name; document.getElementById('tip-body').textContent=SERVICES[k].desc; tip.style.left='-9999px'; tip.style.top='-9999px'; tip.classList.add('on'); moveTip(e); } function moveTip(e){ const W=tip.offsetWidth||310, H=tip.offsetHeight||180; const vw=window.innerWidth, vh=window.innerHeight, pad=14; let x=e.clientX+18; if(x+W+pad>vw) x=e.clientX-W-14; x=Math.max(pad,Math.min(x,vw-W-pad)); let y=e.clientY-H-14; if(y<pad) y=e.clientY+18; y=Math.max(pad,Math.min(y,vh-H-pad)); tip.style.left=x+'px'; tip.style.top=y+'px'; } function hideTip(){tip.classList.remove('on');} </script> </body> </html>">
