Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Hero</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    #hero-root>div{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
    .font-display{font-family:'Cormorant Garamond',serif}
    @keyframes hero-spotlight{0%{opacity:0;transform:translate(-72%,-62%) scale(0.5) rotate(-10deg)}100%{opacity:1;transform:translate(-50%,-40%) scale(1) rotate(0deg)}}
    .hero-animate-spotlight{animation:hero-spotlight 1.8s cubic-bezier(.16,1,.3,1) .4s forwards;opacity:0}
    @keyframes hero-shimmer-slide{to{transform:translate(calc(100cqw - 100%),0)}}
    @keyframes hero-spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}100%{transform:translateZ(0) rotate(360deg)}}
    .hero-shimmer-btn{--spread:90deg;--shimmer-color:rgba(184,151,58,0.6);--radius:0px;--speed:3s;--cut:0.05em;--bg:transparent;position:relative;z-index:0;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;border:1px solid rgba(245,242,238,0.25);padding:16px 40px;color:#F5F2EE;background:var(--bg);border-radius:var(--radius);transform:translateZ(0);transition:all .4s cubic-bezier(.16,1,.3,1);text-decoration:none}
    .hero-shimmer-btn:hover{background:#F5F2EE;color:#1C1C1C;border-color:#F5F2EE}
    .hero-shimmer-btn:active{transform:translateY(1px)}
    .hero-shimmer-btn:hover .hero-spark{opacity:0}
    .hero-shimmer-btn:hover .hero-highlight{opacity:0}
    .hero-spark{position:absolute;inset:0;overflow:visible;z-index:-30;filter:blur(2px);transition:opacity .4s ease}
    .hero-spark-inner{position:absolute;inset:0;height:100%;aspect-ratio:1;animation:hero-shimmer-slide var(--speed) ease-in-out infinite alternate}
    .hero-spark-grad{position:absolute;inset:-100%;width:auto;rotate:0;background:conic-gradient(from calc(270deg - (var(--spread)*0.5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread));animation:hero-spin-around calc(var(--speed)*2) linear infinite}
    .hero-highlight{position:absolute;inset:0;width:100%;height:100%;box-shadow:inset 0 -8px 10px rgba(255,255,255,0.08);transition:all .4s ease}
    .hero-shimmer-btn:hover .hero-highlight{box-shadow:none}
    .hero-backdrop{position:absolute;z-index:-20;inset:var(--cut);background:var(--bg);border-radius:var(--radius)}
    .hero-label{position:relative;z-index:10;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em}
    @media(max-width:639px){.hero-shimmer-btn{padding:14px 28px;width:100%;justify-content:center}.hero-label{font-size:10px;letter-spacing:0.12em}.hero-cta-secondary{width:100%;justify-content:center}}
    .hero-cta-secondary{display:inline-flex;align-items:center;gap:6px;padding:14px 28px;border:1px solid rgba(184,151,58,0.3);color:#B8973A;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:pointer;text-decoration:none}
    .hero-cta-secondary:hover{background:#B8973A;color:#1C1C1C;border-color:#B8973A}
    .hero-cta-secondary:active{transform:translateY(1px)}
    .hero-cta-secondary .hero-arrow{transition:transform .3s cubic-bezier(.16,1,.3,1)}
    .hero-cta-secondary:hover .hero-arrow{transform:translateX(3px)}
    @keyframes hero-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    @keyframes hero-fade-in{from{opacity:0}to{opacity:1}}
    @keyframes hero-scale-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes hero-word-rise{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
    .hero-fade-up{animation:hero-fade-up .7s cubic-bezier(.16,1,.3,1) forwards;opacity:0}
    .hero-fade-in{animation:hero-fade-in .7s cubic-bezier(.16,1,.3,1) forwards;opacity:0}
    .hero-scale-x{animation:hero-scale-x .6s cubic-bezier(.16,1,.3,1) forwards;transform:scaleX(0);transform-origin:left}
    .hero-word-rise{animation:hero-word-rise .6s cubic-bezier(.16,1,.3,1) forwards;opacity:0;display:inline-block}
    .hd1{animation-delay:.1s}.hd2{animation-delay:.2s}.hd3{animation-delay:.3s}.hd4{animation-delay:.4s}.hd5{animation-delay:.5s}.hd6{animation-delay:.6s}.hd7{animation-delay:.7s}.hd8{animation-delay:.8s}.hd9{animation-delay:.9s}.hd10{animation-delay:1s}.hd11{animation-delay:1.1s}.hd12{animation-delay:1.2s}.hd13{animation-delay:1.3s}.hd16{animation-delay:1.6s}.hd18{animation-delay:1.8s}
    .hero-mouse-glow{transition:opacity .4s ease}
    .hero-dot-grid{background-image:radial-gradient(circle,rgba(245,242,238,0.04) 1px,transparent 1px);background-size:24px 24px}
    @keyframes hero-scroll-bounce{0%,100%{transform:translateY(0);opacity:0.4}50%{transform:translateY(6px);opacity:0.8}}
    .hero-scroll-indicator{animation:hero-scroll-bounce 2s ease-in-out infinite}
    .hero-borough{transition:opacity .3s ease}
    .hero-borough:hover{opacity:0.7 !important}
  </style>
</head>
<body>
  <div id="hero-root"></div>
  <script type="text/babel">
    const { useState, useRef, useCallback, useEffect } = React;

    function Spotlight({ className, fill }) {
      return (
        <svg className={`hero-animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-0 ${className||''}`}
             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3787 2842" fill="none">
          <g filter="url(#hsf)"><ellipse cx="1924.71" cy="273.501" rx="1924.71" ry="273.501" transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)" fill={fill||'white'} fillOpacity="0.21"/></g>
          <defs><filter id="hsf" x="0.86" y="0.84" width="3785.16" height="2840.26" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"><feFlood floodOpacity="0" result="bg"/><feBlend mode="normal" in="SourceGraphic" in2="bg" result="shape"/><feGaussianBlur stdDeviation="151" result="blur"/></filter></defs>
        </svg>
      );
    }

    function ShimmerBtn({ children, href }) {
      return (
        <a href={href} className="hero-shimmer-btn">
          <div className="hero-spark"><div className="hero-spark-inner"><div className="hero-spark-grad"/></div></div>
          <span className="hero-label">{children}</span>
          <div className="hero-highlight"/><div className="hero-backdrop"/>
        </a>
      );
    }

    function Hero() {
      const heroRef = useRef(null);
      const ghostRef = useRef(null);
      const [mouse, setMouse] = useState({ x: 0, y: 0 });
      const [isHovering, setIsHovering] = useState(false);

      const handleMouseMove = useCallback((e) => {
        if (!heroRef.current) return;
        const rect = heroRef.current.getBoundingClientRect();
        setMouse({ x: e.clientX - rect.left, y: e.clientY - rect.top });
      }, []);

      useEffect(() => {
        function onScroll() {
          if (!heroRef.current || !ghostRef.current) return;
          var rect = heroRef.current.getBoundingClientRect();
          var scrolled = -rect.top;
          var heroH = rect.height;
          var translateY = scrolled * 0.35;
          var progress = Math.max(0, Math.min(1, scrolled / heroH));
          var opacity = progress > 0.6 ? 1 - ((progress - 0.6) / 0.4) : 1;
          ghostRef.current.style.transform = 'translate(-50%, calc(-50% + ' + translateY + 'px))';
          ghostRef.current.style.opacity = Math.max(0, opacity);
        }
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll();
        return function() { window.removeEventListener('scroll', onScroll); };
      }, []);

      var line1 = ['Your', 'property'];
      var line2 = ['deserves'];
      var line3em = ['more'];
      var line3 = ['than', 'a'];
      var line4 = ['paint', 'job.'];
      var boroughs = ['Kensington', 'Chelsea', 'Mayfair', 'Belgravia', 'Notting Hill'];

      var wi = 0;
      function wd() { return 'hd' + (++wi + 1); }

      return (
        <div ref={heroRef} className="relative min-h-screen flex flex-col justify-end overflow-hidden" style={{ background: '#1C1C1C' }} onMouseMove={handleMouseMove} onMouseEnter={function(){setIsHovering(true)}} onMouseLeave={function(){setIsHovering(false)}}>

          <div className="hero-dot-grid absolute inset-0 pointer-events-none"/>
          <div className="absolute inset-0 pointer-events-none" style={{backgroundImage:'repeating-linear-gradient(90deg,rgba(245,242,238,0.015) 0,rgba(245,242,238,0.015) 1px,transparent 1px,transparent 140px),repeating-linear-gradient(0deg,rgba(245,242,238,0.008) 0,rgba(245,242,238,0.008) 1px,transparent 1px,transparent 140px)'}}/>
          <Spotlight className="-top-40 left-0 md:left-48 md:-top-20" fill="#B8973A"/>
          <Spotlight className="-top-20 right-0 md:right-20 md:-top-32" fill="#D4B85A"/>
          <div className="hero-mouse-glow absolute pointer-events-none" style={{width:'500px',height:'500px',borderRadius:'50%',background:'radial-gradient(circle,rgba(184,151,58,0.05) 0%,transparent 70%)',left:mouse.x-250,top:mouse.y-250,opacity:isHovering?1:0}}/>
          <div className="absolute top-0 left-0 right-0 h-[40%] pointer-events-none" style={{background:'linear-gradient(to bottom,rgba(184,151,58,0.03),transparent)'}}/>
          <div className="absolute bottom-0 left-0 right-0 h-[30%] pointer-events-none" style={{background:'linear-gradient(to top,rgba(28,28,28,0.4),transparent)'}}/>

          <div ref={ghostRef} className="hero-fade-in hd16 pointer-events-none select-none" style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',zIndex:0,transition:'opacity 0.3s ease'}}>
            <span style={{fontFamily:"'Cormorant Garamond',serif",fontSize:'clamp(3.5rem,13vw,15rem)',fontWeight:300,color:'rgba(245,242,238,0.035)',textTransform:'uppercase',letterSpacing:'0.04em',whiteSpace:'nowrap',lineHeight:1,display:'block',textAlign:'center'}}>AQD Group</span>
          </div>

          <div className="relative z-10 max-w-6xl mx-auto w-full px-5 sm:px-8 pb-12 sm:pb-16 lg:pb-20 pt-24 sm:pt-32">
            <p className="hero-fade-up hd1 text-[11px] sm:text-xs font-medium uppercase tracking-[0.18em] mb-8 sm:mb-10 text-center sm:text-left" style={{color:'#B8973A'}}>London's Premium Decorators</p>

            <h1 className="font-display font-light text-center sm:text-left" style={{fontSize:'clamp(2.6rem,7.5vw,6.5rem)',lineHeight:1.0,letterSpacing:'-0.03em',color:'#F5F2EE'}}>
              <span className="block">{line1.map(function(w){return <span key={w} className={'hero-word-rise '+wd()} style={{marginRight:'0.28em'}}>{w}</span>})}</span>
              <span className="block">{line2.map(function(w){return <span key={w} className={'hero-word-rise '+wd()} style={{marginRight:'0.28em'}}>{w}</span>})}</span>
              <span className="block">
                {line3em.map(function(w){return <span key={w} className={'hero-word-rise '+wd()} style={{color:'#B8973A',fontStyle:'italic',marginRight:'0.28em'}}>{w}</span>})}
                {line3.map(function(w){return <span key={w} className={'hero-word-rise '+wd()} style={{marginRight:'0.28em'}}>{w}</span>})}
              </span>
              <span className="block">{line4.map(function(w,i){return <span key={w} className={'hero-word-rise '+wd()} style={{marginRight:i<line4.length-1?'0.28em':0}}>{w}</span>})}</span>
            </h1>

            <div className="hero-scale-x hd11 h-px my-8 sm:my-10 mx-auto sm:mx-0" style={{background:'#B8973A',width:'60px'}}/>

            <p className="hero-fade-up hd12 text-[15px] sm:text-lg font-light max-w-[500px] mb-10 sm:mb-12 text-center sm:text-left mx-auto sm:mx-0" style={{color:'rgba(245,242,238,0.55)',lineHeight:1.7}}>Craftsmanship, discretion, and a standard of finish that matches London's finest addresses. Not a promise — a requirement we hold ourselves to.</p>

            <div className="hero-fade-up hd13 flex flex-col sm:flex-row items-center gap-3 sm:gap-5 mb-10 sm:mb-12">
              <ShimmerBtn href="#quote">Request Your Complimentary Quote</ShimmerBtn>
              <a href="#portfolio" className="hero-cta-secondary">View Our Work <span className="hero-arrow">→</span></a>
            </div>

            <div className="hero-fade-in hd16 text-center sm:text-left">
              <p className="text-[10px] font-medium uppercase tracking-[0.18em] mb-2" style={{color:'#FAFAFA',opacity:0.6}}>Serving</p>
              <div className="flex flex-wrap items-center justify-center sm:justify-start">
                {boroughs.map(function(b,i){return (
                  <span key={b} className="hero-borough text-[10px] font-normal uppercase tracking-[0.18em] py-1 px-2 sm:px-4" style={{color:'#FAFAFA',opacity:0.5,borderRight:i<boroughs.length-1?'1px solid rgba(250,250,250,0.15)':'none'}}>{b}</span>
                )})}
              </div>
            </div>
          </div>

          <div className="hero-fade-in hd18 absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 pointer-events-none z-10">
            <span className="text-[9px] font-medium uppercase tracking-[0.2em]" style={{color:'rgba(250,250,250,0.2)'}}>Scroll</span>
            <svg className="hero-scroll-indicator" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="rgba(250,250,250,0.25)" strokeWidth="1.5"><path d="M4 6l4 4 4-4" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        </div>
      );
    }

    function App() { return <Hero/>; }
    ReactDOM.render(<App/>, document.getElementById('hero-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Services</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%;
      overflow-x: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    #svc-root > div {
      position: relative;
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
    }
    .font-display { font-family: 'Cormorant Garamond', serif; }

    /* Scroll reveal */
    .svc-reveal {
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-reveal.is-visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Bento card */
    .svc-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .svc-card-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-card:hover .svc-card-img,
    .svc-card:active .svc-card-img {
      transform: scale(1.08);
    }

    /* Overlay — always visible gradient from bottom */
    .svc-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(28, 28, 28, 0.82) 0%,
        rgba(28, 28, 28, 0.35) 40%,
        rgba(28, 28, 28, 0.05) 70%,
        transparent 100%
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px;
      transition: background 0.5s ease;
    }
    .svc-card:hover .svc-overlay {
      background: linear-gradient(
        to top,
        rgba(28, 28, 28, 0.88) 0%,
        rgba(28, 28, 28, 0.5) 45%,
        rgba(28, 28, 28, 0.15) 75%,
        transparent 100%
      );
    }

    /* Gold accent line — animates width on hover */
    .svc-accent {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: #B8973A;
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-card:hover .svc-accent {
      width: 100%;
    }

    /* Title style */
    .svc-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      color: #F5F2EE;
      line-height: 1.15;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-card:hover .svc-title {
      transform: translateY(-4px);
    }

    /* Subtle tag */
    .svc-tag {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: #B8973A;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    }
    .svc-card:hover .svc-tag {
      opacity: 1;
      transform: translateY(0);
    }

    /* Mobile: always show tag */
    @media (max-width: 639px) {
      .svc-tag {
        opacity: 1;
        transform: translateY(0);
      }
      .svc-overlay {
        background: linear-gradient(
          to top,
          rgba(28, 28, 28, 0.85) 0%,
          rgba(28, 28, 28, 0.4) 45%,
          rgba(28, 28, 28, 0.08) 75%,
          transparent 100%
        );
      }
    }
  </style>
</head>
<body>
  <div id="svc-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    const services = [
      {
        title: 'Interior Painting & Decorating',
        tag: 'Residential Interiors',
        img: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1200&q=80&auto=format&fit=crop',
      },
      {
        title: 'Exterior Painting & Restoration',
        tag: 'Facades & Masonry',
        img: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&q=80&auto=format&fit=crop',
      },
      {
        title: 'Bespoke Wallpapering & Finishes',
        tag: 'Specialist Finishes',
        img: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=800&q=80&auto=format&fit=crop',
      },
      {
        title: 'Period Property Restoration',
        tag: 'Heritage & Conservation',
        img: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1200&q=80&auto=format&fit=crop',
      },
    ];

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.svc-reveal');
        if (!('IntersectionObserver' in window)) {
          els.forEach(el => el.classList.add('is-visible'));
          return;
        }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const siblings = entry.target.parentNode.querySelectorAll('.svc-reveal');
              const idx = Array.prototype.indexOf.call(siblings, entry.target);
              entry.target.style.transitionDelay = `${idx * 120}ms`;
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.06, rootMargin: '0px 0px -40px 0px' });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function ServiceCard({ title, tag, img, className, aspectClass }) {
      return (
        <div className={`svc-card svc-reveal ${className || ''}`}>
          <div className={`relative ${aspectClass}`}>
            <img
              src={img}
              alt={title}
              className="svc-card-img"
              loading="lazy"
            />
            <div className="svc-overlay">
              <p className="svc-tag mb-2">{tag}</p>
              <h3 className="svc-title text-2xl sm:text-3xl lg:text-4xl">{title}</h3>
            </div>
            <div className="svc-accent" />
          </div>
        </div>
      );
    }

    function Services() {
      const sectionRef = useRef(null);
      useReveal(sectionRef);

      return (
        <div ref={sectionRef} style={{ background: '#F5F2EE' }}>
          {/* Gold separator */}
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px'}}>
            <div className="svc-reveal" style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)'}}/>
          </div>
          <div className="max-w-6xl mx-auto px-5 sm:px-8 py-12 sm:py-16 lg:py-20">

            {/* ── Bento Grid ── */}
            {/* Mobile: stacked | Tablet: 2-col | Desktop: asymmetric bento */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">

              {/* Card 1 — LARGE: spans 2 cols on desktop, tall */}
              <ServiceCard
                title={services[0].title}
                tag={services[0].tag}
                img={services[0].img}
                className="sm:col-span-2 lg:col-span-2 lg:row-span-2"
                aspectClass="aspect-[4/3] sm:aspect-[16/9] lg:aspect-auto lg:h-full lg:min-h-[500px]"
              />

              {/* Card 2 — small square */}
              <ServiceCard
                title={services[1].title}
                tag={services[1].tag}
                img={services[1].img}
                className="lg:col-span-1"
                aspectClass="aspect-[4/3] sm:aspect-square"
              />

              {/* Card 3 — small square */}
              <ServiceCard
                title={services[2].title}
                tag={services[2].tag}
                img={services[2].img}
                className="lg:col-span-1"
                aspectClass="aspect-[4/3] sm:aspect-square"
              />

              {/* Card 4 — wide: spans full width on all breakpoints */}
              <ServiceCard
                title={services[3].title}
                tag={services[3].tag}
                img={services[3].img}
                className="sm:col-span-2 lg:col-span-3"
                aspectClass="aspect-[4/3] sm:aspect-[21/8]"
              />

            </div>

          </div>
        </div>
      );
    }

    function App() { return <Services />; }
    ReactDOM.render(<App />, document.getElementById('svc-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Services</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%;
      overflow-x: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    #svc-root > div {
      position: relative;
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
    }
    .font-display { font-family: 'Cormorant Garamond', serif; }

    /* Scroll reveal */
    .svc-reveal {
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-reveal.is-visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Bento card */
    .svc-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .svc-card-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-card:hover .svc-card-img,
    .svc-card:active .svc-card-img {
      transform: scale(1.08);
    }

    /* Overlay — always visible gradient from bottom */
    .svc-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(28, 28, 28, 0.82) 0%,
        rgba(28, 28, 28, 0.35) 40%,
        rgba(28, 28, 28, 0.05) 70%,
        transparent 100%
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px;
      transition: background 0.5s ease;
    }
    .svc-card:hover .svc-overlay {
      background: linear-gradient(
        to top,
        rgba(28, 28, 28, 0.88) 0%,
        rgba(28, 28, 28, 0.5) 45%,
        rgba(28, 28, 28, 0.15) 75%,
        transparent 100%
      );
    }

    /* Gold accent line — animates width on hover */
    .svc-accent {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: #B8973A;
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-card:hover .svc-accent {
      width: 100%;
    }

    /* Title style */
    .svc-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      color: #F5F2EE;
      line-height: 1.15;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .svc-card:hover .svc-title {
      transform: translateY(-4px);
    }

    /* Subtle tag */
    .svc-tag {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: #B8973A;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    }
    .svc-card:hover .svc-tag {
      opacity: 1;
      transform: translateY(0);
    }

    /* Mobile: always show tag */
    @media (max-width: 639px) {
      .svc-tag {
        opacity: 1;
        transform: translateY(0);
      }
      .svc-overlay {
        background: linear-gradient(
          to top,
          rgba(28, 28, 28, 0.85) 0%,
          rgba(28, 28, 28, 0.4) 45%,
          rgba(28, 28, 28, 0.08) 75%,
          transparent 100%
        );
      }
    }
  </style>
</head>
<body>
  <div id="svc-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    const services = [
      {
        title: 'Interior Painting & Decorating',
        tag: 'Residential Interiors',
        img: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1200&q=80&auto=format&fit=crop',
      },
      {
        title: 'Exterior Painting & Restoration',
        tag: 'Facades & Masonry',
        img: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&q=80&auto=format&fit=crop',
      },
      {
        title: 'Bespoke Wallpapering & Finishes',
        tag: 'Specialist Finishes',
        img: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=800&q=80&auto=format&fit=crop',
      },
      {
        title: 'Period Property Restoration',
        tag: 'Heritage & Conservation',
        img: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1200&q=80&auto=format&fit=crop',
      },
    ];

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.svc-reveal');
        if (!('IntersectionObserver' in window)) {
          els.forEach(el => el.classList.add('is-visible'));
          return;
        }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const siblings = entry.target.parentNode.querySelectorAll('.svc-reveal');
              const idx = Array.prototype.indexOf.call(siblings, entry.target);
              entry.target.style.transitionDelay = `${idx * 120}ms`;
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.06, rootMargin: '0px 0px -40px 0px' });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function ServiceCard({ title, tag, img, className, aspectClass }) {
      return (
        <div className={`svc-card svc-reveal ${className || ''}`}>
          <div className={`relative ${aspectClass}`}>
            <img
              src={img}
              alt={title}
              className="svc-card-img"
              loading="lazy"
            />
            <div className="svc-overlay">
              <p className="svc-tag mb-2">{tag}</p>
              <h3 className="svc-title text-2xl sm:text-3xl lg:text-4xl">{title}</h3>
            </div>
            <div className="svc-accent" />
          </div>
        </div>
      );
    }

    function Services() {
      const sectionRef = useRef(null);
      useReveal(sectionRef);

      return (
        <div ref={sectionRef} style={{ background: '#F5F2EE' }}>
          <div className="max-w-6xl mx-auto px-5 sm:px-8 py-12 sm:py-16 lg:py-20">

            {/* ── Bento Grid ── */}
            {/* Mobile: stacked | Tablet: 2-col | Desktop: asymmetric bento */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">

              {/* Card 1 — LARGE: spans 2 cols on desktop, tall */}
              <ServiceCard
                title={services[0].title}
                tag={services[0].tag}
                img={services[0].img}
                className="sm:col-span-2 lg:col-span-2 lg:row-span-2"
                aspectClass="aspect-[4/3] sm:aspect-[16/9] lg:aspect-auto lg:h-full lg:min-h-[500px]"
              />

              {/* Card 2 — small square */}
              <ServiceCard
                title={services[1].title}
                tag={services[1].tag}
                img={services[1].img}
                className="lg:col-span-1"
                aspectClass="aspect-[4/3] sm:aspect-square"
              />

              {/* Card 3 — small square */}
              <ServiceCard
                title={services[2].title}
                tag={services[2].tag}
                img={services[2].img}
                className="lg:col-span-1"
                aspectClass="aspect-[4/3] sm:aspect-square"
              />

              {/* Card 4 — wide: spans full width on all breakpoints */}
              <ServiceCard
                title={services[3].title}
                tag={services[3].tag}
                img={services[3].img}
                className="sm:col-span-2 lg:col-span-3"
                aspectClass="aspect-[4/3] sm:aspect-[21/8]"
              />

            </div>

          </div>
        </div>
      );
    }

    function App() { return <Services />; }
    ReactDOM.render(<App />, document.getElementById('svc-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Process</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%;
      overflow-x: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    #proc-root > div {
      position: relative;
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
    }
    .font-display { font-family: 'Cormorant Garamond', serif; }

    .proc-dot-grid {
      background-image: radial-gradient(circle, rgba(245,242,238,0.03) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* Scroll reveal */
    .proc-reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .proc-reveal.is-visible { opacity: 1; transform: translateY(0); }
    .proc-reveal.is-visible:hover,
    .proc-reveal.is-visible:active { transform: translateY(-3px); }
    .proc-reveal:nth-child(1) { transition-delay: 0s; }
    .proc-reveal:nth-child(2) { transition-delay: 0.08s; }
    .proc-reveal:nth-child(3) { transition-delay: 0.16s; }
    .proc-reveal:nth-child(4) { transition-delay: 0.24s; }

    .proc-eyebrow-reveal {
      opacity: 0; transform: translateY(12px);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .proc-eyebrow-reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* ===== CARD ===== */
    .proc-card {
      background: rgba(245,242,238,0.04);
      border: 1px solid rgba(245,242,238,0.08);
      padding: 32px 24px;
      cursor: default;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
    }
    .proc-card:hover, .proc-card:active {
      background: #F5F2EE;
      border-color: #F5F2EE;
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.2);
    }

    /* Number circle */
    .proc-num-circle {
      width: 48px; height: 48px; border-radius: 50%;
      border: 1px solid rgba(184,151,58,0.3);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      transition: all 0.4s ease;
    }
    .proc-num-circle span {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px; font-weight: 400; color: #B8973A;
      transition: color 0.4s ease;
    }
    .proc-card:hover .proc-num-circle,
    .proc-card:active .proc-num-circle {
      background: #B8973A; border-color: #B8973A;
    }
    .proc-card:hover .proc-num-circle span,
    .proc-card:active .proc-num-circle span { color: #1C1C1C; }

    /* Title */
    .proc-title {
      font-family: 'Inter', sans-serif;
      font-size: 13px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: #F5F2EE; margin-bottom: 10px; line-height: 1.3;
      transition: color 0.4s ease;
    }
    .proc-card:hover .proc-title,
    .proc-card:active .proc-title { color: #1C1C1C; }

    /* Desc */
    .proc-desc {
      font-size: 13px; font-weight: 300;
      color: rgba(245,242,238,0.45); line-height: 1.65;
      transition: color 0.4s ease;
    }
    .proc-card:hover .proc-desc,
    .proc-card:active .proc-desc { color: #6B6560; }

    /* Gold accent */
    .proc-card-accent {
      position: absolute; bottom: 0; left: 0;
      height: 2px; width: 0; background: #B8973A;
      transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
    }
    .proc-card:hover .proc-card-accent,
    .proc-card:active .proc-card-accent { width: 100%; }
  </style>
</head>
<body>
  <div id="proc-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    const steps = [
      { num: '01', title: 'Initial Consultation', desc: 'We visit your property at a time that suits you — no obligation, no pressure. We listen before we recommend.' },
      { num: '02', title: 'Bespoke Specification', desc: 'A detailed, itemised proposal tailored to your property, your materials, and your timeline. Never a generic quote.' },
      { num: '03', title: 'Precision Delivery', desc: 'Our team arrives on schedule, works with absolute care for your home, and maintains daily communication throughout.' },
      { num: '04', title: 'Final Inspection', desc: 'We do not consider a project complete until you do. Every finish reviewed against the original specification before sign-off.' },
    ];

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.proc-reveal, .proc-eyebrow-reveal');
        if (!('IntersectionObserver' in window)) {
          els.forEach(el => el.classList.add('is-visible'));
          return;
        }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function Process() {
      const sectionRef = useRef(null);
      useReveal(sectionRef);

      return (
        <div ref={sectionRef} style={{ background: '#1C1C1C' }} className="relative overflow-hidden">
          {/* Gold separator */}
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px',position:'relative',zIndex:10}}>
            <div className="proc-reveal" style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)'}}/>
          </div>
          <div className="proc-dot-grid absolute inset-0 pointer-events-none" />

          <div className="relative z-10 max-w-6xl mx-auto px-5 sm:px-8 py-16 sm:py-20 lg:py-28">

            {/* Eyebrow */}
            <p className="proc-eyebrow-reveal text-[11px] font-medium uppercase tracking-[0.18em] mb-12 sm:mb-16 text-center sm:text-left"
               style={{ color: '#B8973A' }}>
              Our Process
            </p>

            {/* Cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {steps.map((step) => (
                <div key={step.num} className="proc-card proc-reveal">
                  <div className="proc-num-circle"><span>{step.num}</span></div>
                  <h3 className="proc-title">{step.title}</h3>
                  <p className="proc-desc">{step.desc}</p>
                  <div className="proc-card-accent" />
                </div>
              ))}
            </div>

            {/* Connector strip — desktop */}
            <div className="hidden lg:flex items-center justify-center mt-10 gap-0">
              {[0,1,2,3].map((i) => (
                <React.Fragment key={i}>
                  <div style={{
                    width: '10px', height: '10px', borderRadius: '50%',
                    border: '1px solid rgba(184,151,58,0.3)',
                    background: i === 3 ? '#B8973A' : 'transparent',
                    flexShrink: 0,
                  }} />
                  {i < 3 && (
                    <div style={{
                      height: '1px', flex: 1, maxWidth: '200px',
                      background: 'linear-gradient(to right, rgba(184,151,58,0.25), rgba(184,151,58,0.08))',
                    }} />
                  )}
                </React.Fragment>
              ))}
            </div>

            {/* Tagline */}
            <div className="proc-eyebrow-reveal text-center mt-10 sm:mt-14">
              <p className="text-[13px] font-light" style={{ color: '#FAFAFA', lineHeight: 1.6 }}>
                Every project. The same standard. No exceptions.
              </p>
            </div>

          </div>
        </div>
      );
    }

    function App() { return <Process />; }
    ReactDOM.render(<App />, document.getElementById('proc-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Portfolio</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%;
      overflow-x: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    #port-root > div {
      position: relative;
      width: 100vw;
      left: 50%;
      transform: translateX(-50%);
    }
    .font-display { font-family: 'Cormorant Garamond', serif; }

    /* Scroll reveal */
    .port-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .port-reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .port-header-reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .port-header-reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Masonry column layout */
    .port-masonry {
      column-count: 1;
      column-gap: 16px;
    }
    @media (min-width: 640px) {
      .port-masonry { column-count: 2; }
    }
    @media (min-width: 1024px) {
      .port-masonry { column-count: 3; }
    }

    .port-masonry-item {
      break-inside: avoid;
      margin-bottom: 16px;
      display: inline-block;
      width: 100%;
    }

    /* Card */
    .port-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      display: block;
    }
    .port-card img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .port-card:hover img,
    .port-card:active img {
      transform: scale(1.06);
    }

    /* Overlay */
    .port-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(28, 28, 28, 0.8) 0%,
        rgba(28, 28, 28, 0.2) 40%,
        transparent 100%
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 24px;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .port-card:hover .port-overlay,
    .port-card:active .port-overlay {
      opacity: 1;
    }

    /* Tag */
    .port-tag {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: #B8973A;
      margin-bottom: 6px;
      transform: translateY(8px);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
    }
    .port-card:hover .port-tag,
    .port-card:active .port-tag {
      transform: translateY(0);
    }

    /* Location */
    .port-location {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 20px;
      font-weight: 300;
      color: #F5F2EE;
      line-height: 1.2;
      transform: translateY(8px);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    }
    .port-card:hover .port-location,
    .port-card:active .port-location {
      transform: translateY(0);
    }

    /* Gold accent line */
    .port-accent {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: #B8973A;
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .port-card:hover .port-accent,
    .port-card:active .port-accent {
      width: 100%;
    }

    /* Mobile: overlay always visible */
    @media (max-width: 639px) {
      .port-overlay {
        opacity: 1;
        background: linear-gradient(
          to top,
          rgba(28, 28, 28, 0.82) 0%,
          rgba(28, 28, 28, 0.25) 45%,
          transparent 100%
        );
      }
      .port-tag, .port-location {
        transform: translateY(0);
      }
    }

    /* CTA button */
    .port-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      border: 1px solid #1C1C1C;
      color: #1C1C1C;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .port-cta:hover {
      background: #1C1C1C;
      color: #F5F2EE;
    }
    .port-cta:active {
      transform: translateY(1px);
    }
    .port-cta .port-cta-arrow {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .port-cta:hover .port-cta-arrow {
      transform: translateX(3px);
    }
  </style>
</head>
<body>
  <div id="port-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    const projects = [
      {
        tag: 'Full Interior Restoration',
        location: 'Private Residence, Belgravia',
        img: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=800&q=80&auto=format&fit=crop',
        height: 'tall',
      },
      {
        tag: 'Exterior Repaint & Joinery',
        location: 'Townhouse, Kensington',
        img: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&q=80&auto=format&fit=crop',
        height: 'medium',
      },
      {
        tag: 'Bespoke Wallpapering',
        location: 'Private Residence, Chelsea',
        img: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=800&q=80&auto=format&fit=crop',
        height: 'short',
      },
      {
        tag: 'Period Cornicing & Ceiling Work',
        location: 'Garden Flat, Mayfair',
        img: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&q=80&auto=format&fit=crop',
        height: 'tall',
      },
      {
        tag: 'Complete Townhouse Renovation',
        location: 'Private Residence, Knightsbridge',
        img: 'https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=800&q=80&auto=format&fit=crop',
        height: 'medium',
      },
      {
        tag: 'Heritage Staircase Restoration',
        location: 'Listed Property, Hampstead',
        img: 'https://images.unsplash.com/photo-1600573472592-401b489a3cdc?w=800&q=80&auto=format&fit=crop',
        height: 'short',
      },
    ];

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.port-reveal, .port-header-reveal');
        if (!('IntersectionObserver' in window)) {
          els.forEach(el => el.classList.add('is-visible'));
          return;
        }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const siblings = entry.target.parentNode.querySelectorAll('.port-reveal');
              const idx = Array.prototype.indexOf.call(siblings, entry.target);
              const delay = idx >= 0 ? idx * 100 : 0;
              entry.target.style.transitionDelay = `${delay}ms`;
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.06, rootMargin: '0px 0px -40px 0px' });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function Portfolio() {
      const sectionRef = useRef(null);
      useReveal(sectionRef);

      return (
        <div ref={sectionRef} style={{ background: '#EFECE8' }}>
          {/* Gold separator */}
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px'}}>
            <div className="port-reveal" style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)'}}/>
          </div>
          <div className="max-w-6xl mx-auto px-5 sm:px-8 py-16 sm:py-20 lg:py-28">

            {/* Header */}
            <div className="port-header-reveal mb-12 sm:mb-16 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
              <div>
                <p className="text-[11px] font-medium uppercase tracking-[0.18em] mb-4"
                   style={{ color: '#B8973A' }}>
                  Selected Projects
                </p>
                <h2 className="font-display font-light"
                    style={{
                      fontSize: 'clamp(2rem, 5vw, 3.2rem)',
                      lineHeight: 1.1,
                      letterSpacing: '-0.02em',
                      color: '#1C1C1C',
                    }}>
                  Work that speaks for itself.
                </h2>
              </div>
              <a href="#" className="port-cta hidden sm:inline-flex">
                View Full Portfolio
                <span className="port-cta-arrow">→</span>
              </a>
            </div>

            {/* Masonry Grid */}
            <div className="port-masonry">
              {projects.map((project, i) => (
                <div key={i} className="port-masonry-item port-reveal">
                  <div className="port-card">
                    <img
                      src={project.img}
                      alt={project.tag}
                      loading="lazy"
                    />
                    <div className="port-overlay">
                      <p className="port-tag">{project.tag}</p>
                      <p className="port-location">{project.location}</p>
                    </div>
                    <div className="port-accent" />
                  </div>
                </div>
              ))}
            </div>

            {/* Mobile CTA — below grid */}
            <div className="sm:hidden text-center mt-10">
              <a href="#" className="port-cta">
                View Full Portfolio
                <span className="port-cta-arrow">→</span>
              </a>
            </div>

          </div>
        </div>
      );
    }

    function App() { return <Portfolio />; }
    ReactDOM.render(<App />, document.getElementById('port-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Why</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
    #why-root>div{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
    .font-display{font-family:'Cormorant Garamond',serif}
    .why-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
    .why-reveal.is-visible{opacity:1;transform:translateY(0)}
    .why-reveal-left{opacity:0;transform:translateX(-24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
    .why-reveal-left.is-visible{opacity:1;transform:translateX(0)}
    .why-item{padding:28px 0;border-bottom:1px solid #E0DDD8;transition:all .35s cubic-bezier(.25,.46,.45,.94);cursor:default}
    .why-item:first-child{padding-top:0}
    .why-item:last-child{border-bottom:none}
    .why-item:hover{padding-left:12px;background:rgba(239,236,232,0.6)}
    .why-item-title{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#1C1C1C;margin-bottom:6px;line-height:1.3;transition:color .3s ease}
    .why-item:hover .why-item-title{color:#B8973A}
    .why-item-desc{font-size:13px;font-weight:300;color:#6B6560;line-height:1.65}
    .why-gold-line{width:0;height:1px;background:#B8973A;transition:width .8s cubic-bezier(.16,1,.3,1)}
    .why-gold-line.is-visible{width:48px}
  </style>
</head>
<body>
  <div id="why-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    const diffs = [
      { title: 'Fully Project-Managed', desc: 'One dedicated contact from consultation to sign-off. You are never passed around.' },
      { title: 'Premium Materials Only', desc: 'Farrow & Ball, Little Greene, Zoffany. Never value-engineered without your consent.' },
      { title: 'Period Property Expertise', desc: 'Heritage surfaces, original cornicing, listed building constraints. We have done this before.' },
      { title: 'Complete Discretion', desc: 'Your property is your private space. We treat it accordingly.' },
    ];

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.why-reveal, .why-reveal-left, .why-gold-line');
        if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('is-visible')); return; }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const siblings = entry.target.parentNode.querySelectorAll('.why-reveal');
              const idx = Array.prototype.indexOf.call(siblings, entry.target);
              if (idx >= 0) entry.target.style.transitionDelay = `${idx * 100}ms`;
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function WhyAQD() {
      const ref = useRef(null);
      useReveal(ref);
      return (
        <div ref={ref} style={{ background: '#F5F2EE' }}>
          {/* Gold separator */}
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px'}}>
            <div className="why-reveal" style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)'}}/>
          </div>
          <div className="max-w-6xl mx-auto px-5 sm:px-8 py-16 sm:py-20 lg:py-28">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-20 items-start">
              <div className="why-reveal-left md:sticky md:top-24">
                <p className="text-[11px] font-medium uppercase tracking-[0.18em] mb-6" style={{ color: '#B8973A' }}>Why AQD</p>
                <p className="font-display font-light italic" style={{ fontSize: 'clamp(1.8rem, 4vw, 2.6rem)', lineHeight: 1.2, color: '#1C1C1C' }}>
                  We do not cut corners. We do not leave until the result is exactly right.
                </p>
                <div className="why-gold-line mt-8" />
              </div>
              <div>
                {diffs.map((d, i) => (
                  <div key={i} className="why-item why-reveal">
                    <h3 className="why-item-title">{d.title}</h3>
                    <p className="why-item-desc">{d.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      );
    }

    function App() { return <WhyAQD />; }
    ReactDOM.render(<App />, document.getElementById('why-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD Testimonials</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
    #test-root>div{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
    .font-display{font-family:'Cormorant Garamond',serif}

    @keyframes test-scroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
    .test-column-inner{animation:test-scroll var(--scroll-duration,20s) linear infinite}
    .test-column:hover .test-column-inner{animation-play-state:paused}
    .test-mask{-webkit-mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent)}

    .test-card{background:#232323;border:1px solid rgba(245,242,238,0.06);padding:28px 24px;margin-bottom:16px;transition:all .35s cubic-bezier(.25,.46,.45,.94);cursor:default;position:relative;overflow:hidden}
    .test-card:hover{background:#F5F2EE;border-color:#F5F2EE;transform:scale(1.02);box-shadow:0 16px 40px rgba(0,0,0,0.3)}

    .test-card-quote{font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:300;line-height:0.5;color:rgba(184,151,58,0.2);margin-bottom:14px;transition:color .35s ease}
    .test-card:hover .test-card-quote{color:rgba(184,151,58,0.5)}

    .test-card-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;font-weight:300;color:rgba(245,242,238,0.75);line-height:1.6;margin-bottom:20px;transition:color .35s ease}
    .test-card:hover .test-card-text{color:#1C1C1C}

    .test-card-accent{width:0;height:1px;background:#B8973A;margin-bottom:14px;transition:width .5s cubic-bezier(.16,1,.3,1)}
    .test-card:hover .test-card-accent{width:32px}

    .test-card-name{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:#FAFAFA;margin-bottom:4px;transition:color .35s ease}
    .test-card:hover .test-card-name{color:#1C1C1C}

    /* Location — BOLD, #FAFAFA, very noticeable */
    .test-card-detail{font-size:13px;font-weight:600;color:#FAFAFA;opacity:0.8;letter-spacing:0.02em;transition:all .35s ease}
    .test-card:hover .test-card-detail{color:#B8973A;opacity:1}

    .test-header-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
    .test-header-reveal.is-visible{opacity:1;transform:translateY(0)}

    .test-boroughs span{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:0.18em;color:#FAFAFA;opacity:0.3;padding:4px 12px;border-right:1px solid rgba(250,250,250,0.1);white-space:nowrap;transition:opacity .3s ease}
    .test-boroughs span:last-child{border-right:none}
    .test-boroughs span:hover{opacity:0.6}
  </style>
</head>
<body>
  <div id="test-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    const testimonials = [
      { text: 'The team treated our Victorian townhouse with a level of care we had not experienced from any previous decorator. The cornicing restoration alone was exceptional.', name: 'Mrs E. Harrington', detail: 'Private Residence, Belgravia' },
      { text: 'From the first site visit to the final inspection, every commitment was kept. Our Mayfair flat looks like a different property entirely.', name: 'Mr J. Whitmore', detail: 'Private Residence, Mayfair' },
      { text: 'AQD were recommended by our interior designer and I understand why entirely. Completely professional, completely discreet.', name: 'Ms C. Pemberton', detail: 'Private Residence, Chelsea' },
      { text: 'We had three quotes. AQD were not the cheapest. They were, however, the only firm who actually listened to what we wanted. The result justified every penny.', name: 'Mr R. Ashworth', detail: 'Townhouse, Kensington' },
      { text: 'Our listed property required extremely careful handling. AQD understood the constraints from day one and delivered a finish that exceeded our conservation officer\'s expectations.', name: 'Mrs A. Langford', detail: 'Listed Property, Hampstead' },
      { text: 'The wallpapering in our drawing room is flawless. Hand-printed de Gournay across four walls with not a single visible seam. That takes real skill.', name: 'Ms L. Drayton', detail: 'Private Residence, Notting Hill' },
      { text: 'What impressed me most was the communication. Daily updates, on schedule, no surprises. I have never experienced that with a trades firm before.', name: 'Mr D. Kavanagh', detail: 'Penthouse, Knightsbridge' },
      { text: 'They protected every surface, cleaned up meticulously each evening, and the final finish was immaculate. I would not hesitate to recommend them.', name: 'Mrs S. Chen', detail: 'Private Residence, Belgravia' },
      { text: 'AQD transformed our tired Edwardian hallway into something genuinely beautiful. The attention to detail on the original panelling was remarkable.', name: 'Mr T. Fitzgerald', detail: 'Private Residence, Chelsea' },
    ];

    const col1 = testimonials.slice(0, 3);
    const col2 = testimonials.slice(3, 6);
    const col3 = testimonials.slice(6, 9);

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.test-header-reveal');
        if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('is-visible')); return; }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); obs.unobserve(entry.target); } });
        }, { threshold: 0.1 });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function TestCard({ t }) {
      return (
        <div className="test-card">
          <div className="test-card-quote">&ldquo;</div>
          <p className="test-card-text">{t.text}</p>
          <div className="test-card-accent" />
          <p className="test-card-name">{t.name}</p>
          <p className="test-card-detail">{t.detail}</p>
        </div>
      );
    }

    function TestColumn({ testimonials, duration, className }) {
      return (
        <div className={`test-column overflow-hidden ${className || ''}`}>
          <div className="test-column-inner flex flex-col" style={{ '--scroll-duration': `${duration}s` }}>
            {[...testimonials, ...testimonials].map((t, i) => (<TestCard key={i} t={t} />))}
          </div>
        </div>
      );
    }

    function Testimonials() {
      const ref = useRef(null);
      useReveal(ref);
      const boroughs = ['Kensington', 'Chelsea', 'Mayfair', 'Belgravia', 'Notting Hill', 'Knightsbridge'];

      return (
        <div ref={ref} style={{ background: '#1C1C1C' }} className="relative overflow-hidden">
          {/* Gold separator */}
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px',position:'relative',zIndex:10}}>
            <div className="test-header-reveal" style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)'}}/>
          </div>
          <div className="absolute inset-0 pointer-events-none" style={{backgroundImage:'radial-gradient(circle,rgba(245,242,238,0.03) 1px,transparent 1px)',backgroundSize:'28px 28px'}}/>
          <div className="relative z-10 max-w-6xl mx-auto px-5 sm:px-8 py-16 sm:py-20 lg:py-28">
            <div className="test-header-reveal text-center mb-12 sm:mb-16">
              <p className="text-[11px] font-medium uppercase tracking-[0.18em] mb-4" style={{ color: '#B8973A' }}>Client Testimonials</p>
              <h2 className="font-display font-light" style={{fontSize:'clamp(2rem, 5vw, 3.2rem)',lineHeight:1.1,letterSpacing:'-0.02em',color:'#F5F2EE'}}>Trusted by London's Most Discerning Homeowners</h2>
            </div>
            <div className="test-mask flex justify-center gap-4 overflow-hidden" style={{ maxHeight: '700px' }}>
              <TestColumn testimonials={col1} duration={18} className="w-full max-w-xs" />
              <TestColumn testimonials={col2} duration={22} className="w-full max-w-xs hidden md:block" />
              <TestColumn testimonials={col3} duration={16} className="w-full max-w-xs hidden lg:block" />
            </div>
            <div className="test-header-reveal flex flex-wrap justify-center mt-12 sm:mt-16 test-boroughs">
              {boroughs.map((b) => (<span key={b}>{b}</span>))}
            </div>
          </div>
        </div>
      );
    }

    function App() { return <Testimonials />; }
    ReactDOM.render(<App />, document.getElementById('test-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD FAQ</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
    #faq-root>div{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
    .font-display{font-family:'Cormorant Garamond',serif}

    .faq-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
    .faq-reveal.is-visible{opacity:1;transform:translateY(0)}
    .faq-reveal-left{opacity:0;transform:translateX(-20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
    .faq-reveal-left.is-visible{opacity:1;transform:translateX(0)}

    .faq-item{border-bottom:1px solid #E0DDD8;overflow:hidden}
    .faq-label{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;font-size:15px;font-weight:400;color:#1C1C1C;line-height:1.4;transition:color .3s ease;user-select:none;-webkit-tap-highlight-color:transparent}
    .faq-label:hover{color:#B8973A}
    .faq-icon{position:relative;width:14px;height:14px;flex-shrink:0}
    .faq-icon::before,.faq-icon::after{content:'';position:absolute;background:#6B6560;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease}
    .faq-icon::before{width:14px;height:1px;top:50%;left:0;transform:translateY(-50%)}
    .faq-icon::after{width:1px;height:14px;left:50%;top:0;transform:translateX(-50%)}
    .faq-item.is-open .faq-icon::after{transform:translateX(-50%) rotate(90deg);opacity:0}
    .faq-item.is-open .faq-label{color:#B8973A}
    .faq-answer{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
    .faq-item.is-open .faq-answer{max-height:300px}
    .faq-answer-inner{padding:0 0 24px;font-size:14px;font-weight:300;color:#6B6560;line-height:1.7;max-width:560px}
  </style>
</head>
<body>
  <div id="faq-root"></div>
  <script type="text/babel">
    const { useEffect, useRef, useState } = React;

    const faqs = [
      { q: 'Do you work exclusively in prime London boroughs?', a: 'Our core area covers Kensington, Chelsea, Mayfair, Belgravia, Notting Hill, Knightsbridge, and Hampstead. We accept select projects in surrounding areas on a case-by-case basis.' },
      { q: 'How do you handle period and listed properties?', a: 'We have extensive experience within conservation area guidelines and listed building regulations. Our team understands the materials, techniques, and approvals required.' },
      { q: 'What paints and finishes do you specify?', a: 'Farrow & Ball, Little Greene, and Zoffany as standard. We never substitute without your explicit agreement.' },
      { q: 'How is a project managed day to day?', a: 'Every project has a dedicated client contact who provides daily updates and is available throughout. You will never need to chase for information.' },
      { q: 'Do you provide a written specification?', a: 'Every prospective client receives a detailed, itemised specification covering scope, materials, timeline, and cost. No vague estimates.' },
      { q: 'How do you price your work?', a: 'Fixed-price quotations based on detailed site assessment. No hidden charges. Our pricing reflects the quality of work and materials we deliver.' },
      { q: 'Can I see examples of completed projects?', a: 'We share a portfolio during your initial consultation, including work in properties similar to your own. References available on request.' },
    ];

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.faq-reveal, .faq-reveal-left');
        if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('is-visible')); return; }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const siblings = entry.target.parentNode.querySelectorAll('.faq-reveal');
              const idx = Array.prototype.indexOf.call(siblings, entry.target);
              if (idx >= 0) entry.target.style.transitionDelay = `${idx * 80}ms`;
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function FAQ() {
      const ref = useRef(null);
      const [openIdx, setOpenIdx] = useState(-1);
      useReveal(ref);

      function toggle(i) { setOpenIdx(openIdx === i ? -1 : i); }

      return (
        <div ref={ref} style={{ background: '#F5F2EE' }}>
          {/* Gold separator */}
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px'}}>
            <div className="faq-reveal" style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)'}}/>
          </div>
          <div className="max-w-6xl mx-auto px-5 sm:px-8 py-16 sm:py-20 lg:py-28">
            <div className="grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-12 lg:gap-16 items-start">
              <div className="faq-reveal-left md:sticky md:top-24">
                <h2 className="font-display font-light" style={{ fontSize: 'clamp(1.8rem, 4vw, 2.6rem)', lineHeight: 1.15, color: '#1C1C1C' }}>Common Questions</h2>
                <p className="text-sm font-light mt-4" style={{ color: '#6B6560', lineHeight: 1.7, maxWidth: '240px' }}>
                  If your question is not covered here, we are always happy to discuss your project directly.
                </p>
              </div>
              <div>
                {faqs.map((faq, i) => (
                  <div key={i} className={`faq-item faq-reveal ${openIdx === i ? 'is-open' : ''}`}>
                    <div className="faq-label" onClick={() => toggle(i)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(i); } }} tabIndex={0} role="button" aria-expanded={openIdx === i}>
                      {faq.q}
                      <span className="faq-icon" />
                    </div>
                    <div className="faq-answer">
                      <div className="faq-answer-inner">{faq.a}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      );
    }

    function App() { return <FAQ />; }
    ReactDOM.render(<App />, document.getElementById('faq-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD CTA</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
    #cta-root>div{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
    .font-display{font-family:'Cormorant Garamond',serif}

    .cta-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
    .cta-reveal.is-visible{opacity:1;transform:translateY(0)}

    /* Shimmer button */
    @keyframes cta-shimmer-slide{to{transform:translate(calc(100cqw - 100%),0)}}
    @keyframes cta-spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}100%{transform:translateZ(0) rotate(360deg)}}
    .cta-shimmer-btn{
      --spread:90deg;--shimmer-color:rgba(184,151,58,0.7);--radius:0px;--speed:3s;--cut:0.05em;--bg:#B8973A;
      position:relative;z-index:0;display:inline-flex;cursor:pointer;
      align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
      border:1px solid #B8973A;padding:18px 48px;color:#1C1C1C;
      background:var(--bg);border-radius:var(--radius);transform:translateZ(0);
      transition:all .4s cubic-bezier(.16,1,.3,1);text-decoration:none;
    }
    .cta-shimmer-btn:hover{background:#F5F2EE;color:#1C1C1C;border-color:#F5F2EE}
    .cta-shimmer-btn:active{transform:translateY(1px)}
    .cta-shimmer-btn:hover .cta-spark{opacity:0}
    .cta-spark{position:absolute;inset:0;overflow:visible;z-index:-30;filter:blur(2px);transition:opacity .4s ease}
    .cta-spark-inner{position:absolute;inset:0;height:100%;aspect-ratio:1;animation:cta-shimmer-slide var(--speed) ease-in-out infinite alternate}
    .cta-spark-grad{position:absolute;inset:-100%;width:auto;rotate:0;background:conic-gradient(from calc(270deg - (var(--spread)*0.5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread));animation:cta-spin-around calc(var(--speed)*2) linear infinite}
    .cta-btn-label{position:relative;z-index:10;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.14em}
    .cta-backdrop{position:absolute;z-index:-20;inset:var(--cut);background:var(--bg);border-radius:var(--radius)}

    .cta-dot-grid{background-image:radial-gradient(circle,rgba(245,242,238,0.03) 1px,transparent 1px);background-size:28px 28px}
  </style>
</head>
<body>
  <div id="cta-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.cta-reveal');
        if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('is-visible')); return; }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const siblings = entry.target.parentNode.querySelectorAll('.cta-reveal');
              const idx = Array.prototype.indexOf.call(siblings, entry.target);
              if (idx >= 0) entry.target.style.transitionDelay = `${idx * 120}ms`;
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.15 });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function FinalCTA() {
      const ref = useRef(null);
      useReveal(ref);

      return (
        <div ref={ref} style={{ background: '#1C1C1C' }} className="relative overflow-hidden">
          <div className="cta-dot-grid absolute inset-0 pointer-events-none" />

          {/* Ghost text */}
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none select-none">
            <span style={{
              fontFamily:"'Cormorant Garamond',serif",
              fontSize:'clamp(5rem,14vw,14rem)',fontWeight:300,
              color:'rgba(245,242,238,0.02)',textTransform:'uppercase',
              letterSpacing:'0.06em',whiteSpace:'nowrap',lineHeight:1,
            }}>Excellence</span>
          </div>

          <div className="relative z-10 max-w-6xl mx-auto px-5 sm:px-8 py-20 sm:py-28 lg:py-36 text-center">

            {/* Gold rule */}
            <div className="cta-reveal mx-auto mb-10 sm:mb-12" style={{ width: '60px', height: '1px', background: '#B8973A' }} />

            {/* Headline */}
            <h2 className="cta-reveal font-display font-light mx-auto" style={{
              fontSize: 'clamp(2rem, 5vw, 3.5rem)',
              lineHeight: 1.1, letterSpacing: '-0.02em', color: '#F5F2EE',
              maxWidth: '18ch',
            }}>
              Your property deserves the standard AQD delivers.
            </h2>

            {/* Subline */}
            <p className="cta-reveal text-base font-light mx-auto mt-5 mb-10 sm:mb-12" style={{
              color: 'rgba(245,242,238,0.5)', lineHeight: 1.7, maxWidth: '440px',
            }}>
              We offer a complimentary, no-obligation site visit to every prospective client. Let us visit your property.
            </p>

            {/* Shimmer CTA — gold filled */}
            <div className="cta-reveal">
              <a href="#quote" className="cta-shimmer-btn">
                <div className="cta-spark"><div className="cta-spark-inner"><div className="cta-spark-grad"/></div></div>
                <span className="cta-btn-label">Request Your Complimentary Quote</span>
                <div className="cta-backdrop" />
              </a>
            </div>

            {/* Reassurance */}
            <p className="cta-reveal text-xs font-light mt-5" style={{ color: '#FAFAFA' }}>
              No commitment required. We come to you.
            </p>

          </div>
        </div>
      );
    }

    function App() { return <FinalCTA />; }
    ReactDOM.render(<App />, document.getElementById('cta-root'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AQD CTA</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{width:100%;overflow-x:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
    #cta-root>div{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
    .font-display{font-family:'Cormorant Garamond',serif}

    .cta-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
    .cta-reveal.is-visible{opacity:1;transform:translateY(0)}

    /* Shimmer button — gold filled */
    @keyframes cta-shimmer-slide{to{transform:translate(calc(100cqw - 100%),0)}}
    @keyframes cta-spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}100%{transform:translateZ(0) rotate(360deg)}}
    .cta-shimmer-btn{
      --spread:90deg;--shimmer-color:rgba(245,242,238,0.5);--radius:0px;--speed:3s;--cut:0.05em;--bg:#B8973A;
      position:relative;z-index:0;display:inline-flex;cursor:pointer;
      align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
      border:1px solid #B8973A;padding:18px 48px;color:#1C1C1C;
      background:var(--bg);border-radius:var(--radius);transform:translateZ(0);
      transition:all .4s cubic-bezier(.16,1,.3,1);text-decoration:none;
    }
    .cta-shimmer-btn:hover{background:#F5F2EE;color:#1C1C1C;border-color:#F5F2EE}
    .cta-shimmer-btn:active{transform:translateY(1px)}
    .cta-shimmer-btn:hover .cta-spark{opacity:0}
    .cta-spark{position:absolute;inset:0;overflow:visible;z-index:-30;filter:blur(2px);transition:opacity .4s ease}
    .cta-spark-inner{position:absolute;inset:0;height:100%;aspect-ratio:1;animation:cta-shimmer-slide var(--speed) ease-in-out infinite alternate}
    .cta-spark-grad{position:absolute;inset:-100%;width:auto;rotate:0;background:conic-gradient(from calc(270deg - (var(--spread)*0.5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread));animation:cta-spin-around calc(var(--speed)*2) linear infinite}
    .cta-btn-label{position:relative;z-index:10;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.14em}
    .cta-backdrop{position:absolute;z-index:-20;inset:var(--cut);background:var(--bg);border-radius:var(--radius)}

    /* Mobile: full-width centered, smaller */
    @media (max-width: 639px) {
      .cta-shimmer-btn{padding:14px 28px;width:100%;max-width:340px}
      .cta-btn-label{font-size:10px;letter-spacing:0.12em}
    }

    .cta-dot-grid{background-image:radial-gradient(circle,rgba(245,242,238,0.03) 1px,transparent 1px);background-size:28px 28px}

    /* Gold line animation */
    .cta-gold-line{width:0;height:1px;background:#B8973A;transition:width .8s cubic-bezier(.16,1,.3,1)}
    .cta-gold-line.is-visible{width:60px}
  </style>
</head>
<body>
  <div id="cta-root"></div>
  <script type="text/babel">
    const { useEffect, useRef } = React;

    function useReveal(ref) {
      useEffect(() => {
        if (!ref.current) return;
        const els = ref.current.querySelectorAll('.cta-reveal, .cta-gold-line');
        if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('is-visible')); return; }
        const obs = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const siblings = entry.target.parentNode.querySelectorAll('.cta-reveal');
              const idx = Array.prototype.indexOf.call(siblings, entry.target);
              if (idx >= 0) entry.target.style.transitionDelay = `${idx * 120}ms`;
              entry.target.classList.add('is-visible');
              obs.unobserve(entry.target);
            }
          });
        }, { threshold: 0.15 });
        els.forEach(el => obs.observe(el));
        return () => obs.disconnect();
      }, [ref]);
    }

    function FinalCTA() {
      const ref = useRef(null);
      useReveal(ref);

      return (
        <div ref={ref} style={{ background: '#1C1C1C' }} className="relative overflow-hidden">
          {/* Gold separator */}
          <div style={{display:'flex',justifyContent:'center',paddingTop:'1px',position:'relative',zIndex:10}}>
            <div className="cta-reveal" style={{width:'120px',height:'1px',background:'linear-gradient(to right,transparent,#B8973A,transparent)'}}/>
          </div>
          <div className="cta-dot-grid absolute inset-0 pointer-events-none" />

          {/* Ghost text */}
          <div className="pointer-events-none select-none"
               style={{
                 position:'absolute',top:'50%',left:'50%',
                 transform:'translate(-50%,-50%)',zIndex:0,
               }}>
            <span style={{
              fontFamily:"'Cormorant Garamond',serif",
              fontSize:'clamp(5rem,14vw,14rem)',fontWeight:300,
              color:'rgba(245,242,238,0.02)',textTransform:'uppercase',
              letterSpacing:'0.06em',whiteSpace:'nowrap',lineHeight:1,
              display:'block',textAlign:'center',
            }}>Excellence</span>
          </div>

          <div className="relative z-10 max-w-6xl mx-auto px-5 sm:px-8 py-20 sm:py-28 lg:py-36 text-center">

            {/* Gold rule — animated */}
            <div className="cta-gold-line mx-auto mb-10 sm:mb-12" />

            {/* Headline */}
            <h2 className="cta-reveal font-display font-light mx-auto" style={{
              fontSize: 'clamp(2rem, 5vw, 3.5rem)',
              lineHeight: 1.1, letterSpacing: '-0.02em', color: '#F5F2EE',
              maxWidth: '18ch',
            }}>
              Your property deserves the standard AQD delivers.
            </h2>

            {/* Subline */}
            <p className="cta-reveal text-[15px] font-light mx-auto mt-5 mb-10 sm:mb-12" style={{
              color: 'rgba(245,242,238,0.5)', lineHeight: 1.7, maxWidth: '440px',
            }}>
              We offer a complimentary, no-obligation site visit to every prospective client. Let us visit your property.
            </p>

            {/* Shimmer CTA — centered on all breakpoints */}
            <div className="cta-reveal flex justify-center">
              <a href="#quote" className="cta-shimmer-btn">
                <div className="cta-spark"><div className="cta-spark-inner"><div className="cta-spark-grad"/></div></div>
                <span className="cta-btn-label">Request Your Complimentary Quote</span>
                <div className="cta-backdrop" />
              </a>
            </div>

            {/* Reassurance */}
            <p className="cta-reveal text-xs font-light mt-6" style={{ color: '#FAFAFA', opacity: 0.6 }}>
              No commitment required. We come to you.
            </p>

          </div>
        </div>
      );
    }

    function App() { return <FinalCTA />; }
    ReactDOM.render(<App />, document.getElementById('cta-root'));
  </script>
</body>
</html>

Handler 24

ProspectPilot provides a 24/7 AI sales agent that operates within email and, optionally, SMS or Messenger to handle sales interactions, and the business is just starting out in the United Kingdom.