// Home page — reimagined. Ambitious typography, fresh rhythm, same brand voice.

const { useState: useStateH, useEffect: useEffectH } = React;

// ─── Hero ──────────────────────────────────────────────
function Hero({ variant }) {
  // Three hero variants (tweakable)
  const V = variant || 'classic';

  const shared = {
    wrap: { position:'relative', overflow:'hidden' },
    bg: { position:'absolute', inset:0, background:'url(assets/hero-abstract.png) center/cover' },
    overlay: { position:'absolute', inset:0,
               background:'linear-gradient(180deg, rgba(14,14,15,0.35) 0%, rgba(14,14,15,0.95) 100%)',
               backdropFilter:'blur(2px)', WebkitBackdropFilter:'blur(2px)' },
    inner: { position:'relative', maxWidth:1440, margin:'0 auto',
             padding:'120px clamp(24px, 5vw, 96px) 120px' },
    eyebrow: { fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500,
               color:'var(--ldo-accent-live, #C9A86A)', marginBottom:32 },
    lead: { fontSize:20, lineHeight:1.55, color:'#B6B3AE', margin:'36px 0 44px' },
    ctas: { display:'flex', gap:14, flexWrap:'wrap', alignItems:'center' },
    primary: { background:'#F4F1EC', color:'#0E0E0F', borderRadius:999, padding:'14px 24px', fontSize:14,
               fontWeight:500, textDecoration:'none', display:'inline-flex', gap:10, alignItems:'center' },
    secondary: { color:'#F4F1EC', border:'1px solid rgba(244,241,236,0.22)',
                 borderRadius:999, padding:'13px 22px', fontSize:14, fontWeight:500, textDecoration:'none' },
    meta: { position:'absolute', left:'clamp(24px, 5vw, 96px)', right:'clamp(24px, 5vw, 96px)', bottom:40,
            display:'flex', gap:24, alignItems:'baseline', flexWrap:'wrap',
            fontSize:17, letterSpacing:'-0.005em',
            color:'#F4F1EC', fontWeight:500, lineHeight:1.4 },
    metaRight: { position:'absolute', right:'clamp(24px, 5vw, 96px)', bottom:32,
            fontSize:11, letterSpacing:'.14em', textTransform:'uppercase',
            color:'#7A7874', fontWeight:500 }
  };

  if (V === 'stacked') {
    // Stacked — giant type, each word its own line
    return (
      <section style={{...shared.wrap, minHeight:'88vh', display:'flex', alignItems:'center'}}>
        <div style={shared.bg}/><div style={shared.overlay}/>
        <div style={{...shared.inner, padding:'140px clamp(24px, 5vw, 96px) 140px'}}>
          <div style={shared.eyebrow}>— Strategic design & transformation</div>
          <h1 style={{fontSize:'clamp(80px, 13vw, 220px)', fontWeight:500, letterSpacing:'-0.05em',
                      lineHeight:0.86, margin:0, textTransform:'none'}}>
            Leading<br/>
            <span style={{color:'#B6B3AE'}}>through</span><br/>
            <span style={{fontStyle:'italic', fontWeight:400}}>the</span> Threshold.
          </h1>
          <p style={{...shared.lead, maxWidth:620}}>
            The hardest problems don't arrive with clear solutions. We work alongside senior leaders to find clarity in ambiguity, structure in complexity, and the capability to act on what matters with confidence.
          </p>
          <div style={shared.ctas}>
            <a href="https://calendly.com/liminaldesignoffice/liminal-introductions" style={shared.primary}>Book a call <span style={{fontFamily:"'JetBrains Mono', monospace"}}>→</span></a>
            <a href="services.html" style={shared.secondary}>Our services</a>
          </div>
        </div>
        <div style={shared.meta}>
          <span>Est. 2024</span><span>London / UK</span><span>Senior practitioners only</span>
        </div>
      </section>
    );
  }

  if (V === 'editorial') {
    // Editorial — two-column, display headline left, strapline right, imagery frames the composition
    return (
      <section style={{...shared.wrap, minHeight:'92vh'}}>
        <div style={shared.bg}/><div style={shared.overlay}/>
        <div style={{...shared.inner, padding:'120px clamp(24px, 5vw, 96px) 120px'}}>
          <div style={shared.eyebrow}>— Strategic design & transformation</div>
          <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:64, alignItems:'end'}}>
            <h1 style={{fontSize:'clamp(64px, 10vw, 168px)', fontWeight:500, letterSpacing:'-0.04em',
                        lineHeight:0.92, margin:0, textWrap:'balance'}}>
              Leading Through<br/>The Threshold.
            </h1>
            <div>
              <p style={{fontSize:17, lineHeight:1.55, color:'#B6B3AE', margin:'0 0 24px'}}>
                The hardest problems don't arrive with clear solutions. We work alongside senior leaders to find clarity in ambiguity, structure in complexity, and the capability to act on what matters with confidence.
              </p>
              <div style={shared.ctas}>
                <a href="https://calendly.com/liminaldesignoffice/liminal-introductions" style={shared.primary}>Book a call <span style={{fontFamily:"'JetBrains Mono', monospace"}}>→</span></a>
                <a href="services.html" style={shared.secondary}>Our services</a>
              </div>
            </div>
          </div>
        </div>
        <div style={shared.meta}>
          <span>— A strategic design consultancy</span>
        </div>
        <div style={shared.metaRight}>
          <span>Scroll ↓</span>
        </div>
      </section>
    );
  }

  // Classic (default) — faithful to the existing site, larger scale
  return (
    <section style={{...shared.wrap, minHeight:'92vh', display:'flex', alignItems:'center'}}>
      <div style={shared.bg}/><div style={shared.overlay}/>
      <div style={shared.inner}>
        <div style={shared.eyebrow}>— Strategic design & transformation</div>
        <h1 style={{fontSize:'clamp(72px, 10vw, 168px)', fontWeight:500, letterSpacing:'-0.04em',
                    lineHeight:0.92, margin:0, textWrap:'balance'}}>
          Leading Through<br/>The Threshold.
        </h1>
        <p style={{...shared.lead, maxWidth:620}}>
          The hardest problems don't arrive with clear solutions. We work alongside senior leaders to find clarity in ambiguity, structure in complexity, and the capability to act on what matters with confidence.
        </p>
        <div style={shared.ctas}>
          <a href="https://calendly.com/liminaldesignoffice/liminal-introductions" style={shared.primary}>Book a call <span style={{fontFamily:"'JetBrains Mono', monospace"}}>→</span></a>
          <a href="services.html" style={shared.secondary}>Our services</a>
        </div>
      </div>
      <div style={shared.meta}>
        <span style={{fontSize:22, fontWeight:500, letterSpacing:'-0.015em', color:'#F4F1EC'}}>A strategic design office</span>
        <span style={{color:'#4A4A50', fontSize:20}}>·</span>
        <span style={{fontSize:17, color:'#B6B3AE', fontWeight:400, letterSpacing:'-0.005em', maxWidth:'60ch'}}>Founded to fill the gap between strategic intent and operational execution.</span>
      </div>
    </section>
  );
}

// ─── Manifesto — pull-quote section ──────────────────────
function Manifesto() {
  return (
    <section style={{maxWidth:1440, margin:'0 auto', padding:'160px clamp(24px, 5vw, 96px) 96px'}}>
      <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500,
                   color:'var(--ldo-accent-live, #C9A86A)', marginBottom:48}}>— Why we exist</div>
      <h2 style={{fontSize:'clamp(36px, 4.8vw, 76px)', fontWeight:500, letterSpacing:'-0.03em',
                   lineHeight:1.08, margin:0, maxWidth:'22ch', textWrap:'balance'}}>
        Liminal Design Office was founded to fill the critical gap between <em style={{fontStyle:'italic', color:'#B6B3AE', fontWeight:400}}>strategic intent</em> and <em style={{fontStyle:'italic', color:'#B6B3AE', fontWeight:400}}>operational execution.</em>
      </h2>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, marginTop:80, maxWidth:1080}}>
        <p style={{fontSize:17, lineHeight:1.55, color:'#B6B3AE', margin:0}}>
          We exist to help senior leaders navigate the ambiguity of transformation with confidence, clarity, and capability.
        </p>
        <p style={{fontSize:17, lineHeight:1.55, color:'#B6B3AE', margin:0}}>
          We work alongside boards and C-suites at UK enterprises facing their most consequential decisions — where strategy meets delivery, and where getting it wrong costs years.
        </p>
      </div>
    </section>
  );
}

// ─── Services section — two variants ─────────────────────
const homeSvcStyles = {
  head: { padding:'96px 0 48px' },
  eyebrow: { fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500,
             color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28 },
  title: { fontSize:'clamp(48px, 7vw, 112px)', fontWeight:500, letterSpacing:'-0.035em',
           lineHeight:0.96, margin:0, maxWidth:'16ch', textWrap:'balance' },
  subtitle: { fontSize:17, lineHeight:1.55, color:'#B6B3AE', margin:'32px 0 0', maxWidth:560 }
};

function ServicesSection({ variant }) {
  const V = variant || 'alternating';

  if (V === 'index') {
    // Index — typographic list, like a book's table of contents
    return (
      <section id="services" className="ldo-section">
        <div style={homeSvcStyles.head}>
          <div style={homeSvcStyles.eyebrow}>— What we offer</div>
          <h2 style={homeSvcStyles.title}>Four practices.<br/>One discipline.</h2>
          <p style={homeSvcStyles.subtitle}>Each of our services is a different way of applying design rigour to the problems senior leaders actually face — not the problems a generic playbook assumes.</p>
        </div>
        <div style={{borderTop:'1px solid rgba(244,241,236,0.14)', marginTop:64}}>
          {SERVICES.map((s) => (
            <a key={s.slug} href={`service-${s.slug}.html`}
               style={{display:'grid', gridTemplateColumns:'80px 1fr 1.4fr 40px',
                       gap:48, padding:'44px 0',
                       borderBottom:'1px solid rgba(244,241,236,0.08)',
                       alignItems:'center', textDecoration:'none', color:'inherit',
                       transition:'opacity .28s'}}
               onMouseOver={e => e.currentTarget.style.opacity = '1'}
               onMouseOut={e => e.currentTarget.style.opacity = '0.55'}>
              <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ldo-accent-live, #C9A86A)', fontWeight:500}}>— {s.num}</div>
              <h3 style={{fontSize:'clamp(24px, 2.6vw, 40px)', fontWeight:500, letterSpacing:'-0.025em', margin:0, color:'#F4F1EC', lineHeight:1.05}}>
                {s.title}
              </h3>
              <p style={{fontSize:15, lineHeight:1.55, color:'#B6B3AE', margin:0, maxWidth:520}}>{s.lede}</p>
              <div style={{color:'var(--ldo-accent-live, #C9A86A)', fontFamily:"'JetBrains Mono', monospace", fontSize:20, textAlign:'right'}}>↗</div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  // Alternating — text+image pairs
  return (
    <section id="services" className="ldo-section svc-alt">
      <div style={homeSvcStyles.head}>
        <div style={homeSvcStyles.eyebrow}>— What we offer</div>
        <h2 style={homeSvcStyles.title}>Four practices.<br/>One discipline.</h2>
        <p style={homeSvcStyles.subtitle}>Each of our services is a different way of applying design rigour to the problems senior leaders actually face — not the problems a generic playbook assumes.</p>
      </div>
      <div className="svc-alt-list" style={{paddingBottom:96}}>
        {SERVICES.map((s, i) => {
          const flip = i % 2 === 1;
          return (
            <a key={s.slug} href={`service-${s.slug}.html`}
               className="svc-alt-row"
               style={{display:'grid',
                       gridTemplateColumns:'1fr 1fr', gap:72,
                       padding:'80px 0',
                       borderTop:'1px solid rgba(244,241,236,0.08)',
                       alignItems:'center', textDecoration:'none', color:'inherit',
                       transition:'opacity .3s ease'}}>

              <div style={{order: flip ? 2 : 1, display:'flex', flexDirection:'column', gap:24}}>
                <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'#7A7874', fontWeight:500}}>— Service {s.num}</div>
                <h3 style={{fontSize:'clamp(32px, 3.6vw, 56px)', fontWeight:500, letterSpacing:'-0.03em', margin:0, color:'#F4F1EC', lineHeight:1.02}}>
                  {s.title} <span style={{color:'var(--ldo-accent-live, #C9A86A)', fontFamily:"'JetBrains Mono', monospace"}}>↗</span>
                </h3>
                <p style={{fontSize:16, lineHeight:1.6, color:'#B6B3AE', margin:0, maxWidth:520}}>{s.body}</p>
                <span style={{fontSize:12, letterSpacing:'.14em', textTransform:'uppercase',
                              fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginTop:8}}>Explore service →</span>
              </div>
              <div style={{order: flip ? 1 : 2, aspectRatio:'4/3', borderRadius:4, overflow:'hidden'}}>
                <img src={s.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

// ─── Approach / Process ──────────────────────────────────
function Approach() {
  return (
    <section id="approach" style={{background:'#141416', borderTop:'1px solid rgba(244,241,236,0.06)',
                                    borderBottom:'1px solid rgba(244,241,236,0.06)'}}>
      <div className="ldo-section" style={{padding:'128px clamp(24px, 5vw, 96px)'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:64, alignItems:'end', marginBottom:96}}>
          <div>
            <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28}}>— How we work</div>
            <h2 style={{fontSize:'clamp(48px, 6.5vw, 104px)', fontWeight:500, letterSpacing:'-0.035em', lineHeight:0.96, margin:0, textWrap:'balance'}}>
              Frame. Explore.<br/>Design. Deliver.
            </h2>
          </div>
          <p style={{fontSize:17, lineHeight:1.6, color:'#B6B3AE', margin:0, maxWidth:520}}>
            A four-step process, built from decades of work inside enterprise. Not a linear waterfall — a disciplined way of moving from ambiguity to confident action, with each phase earning the right to the next.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32}}>
          {PROCESS.map(p => (
            <div key={p.num} style={{padding:'40px 0 0', borderTop:'1px solid rgba(244,241,236,0.22)'}}>
              <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)'}}>— {p.num}</div>
              <h4 style={{fontSize:32, fontWeight:500, letterSpacing:'-0.02em', margin:'20px 0 16px', color:'#F4F1EC'}}>{p.title}</h4>
              <p style={{fontSize:14.5, lineHeight:1.6, color:'#B6B3AE', margin:0}}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Work — three variants ───────────────────────────────
function WorkSection({ variant }) {
  const V = variant || 'feature';

  const header = (
    <div className="ldo-sec-head" style={{paddingTop:128}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'end'}}>
        <div>
          <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28}}>— Selected work</div>
          <h2 className="ldo-sec-title">The work behind the numbers.</h2>
        </div>
        <a href="work.html" style={{justifySelf:'end', fontSize:13, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#B6B3AE', textDecoration:'none'}}>All work →</a>
      </div>
    </div>
  );

  if (V === 'magazine') {
    // Magazine — one feature full width, three below
    const [lead, ...rest] = WORKS;
    return (
      <section id="work" className="ldo-section work-hover-group">
        {header}
        <a href={`case-${lead.slug}.html`} className="work-hover-item" style={{display:'block', textDecoration:'none', color:'inherit', marginBottom:24,
               borderRadius:12, overflow:'hidden', border:'1px solid rgba(244,241,236,0.08)', background:'#141416', transition:'opacity .3s ease'}}>
          <div style={{position:'relative', aspectRatio:'21/9'}}>
            <img src={lead.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
            <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(14,14,15,0) 40%, rgba(14,14,15,0.85) 100%)'}}/>
            <div style={{position:'absolute', left:40, right:40, bottom:40, display:'grid', gridTemplateColumns:'1fr auto', gap:48, alignItems:'end'}}>
              <div>
                <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ldo-accent-live, #C9A86A)', fontWeight:500, marginBottom:16}}>— Featured · {lead.client}</div>
                <h3 style={{fontSize:'clamp(32px, 4.5vw, 64px)', fontWeight:500, letterSpacing:'-0.03em', lineHeight:1, margin:0, color:'#F4F1EC', maxWidth:'16ch'}}>{lead.title}</h3>
              </div>
              <div style={{display:'flex', gap:32}}>
                {lead.stats.map(s => (
                  <div key={s.big}>
                    <div style={{fontSize:40, fontWeight:500, letterSpacing:'-0.03em', color:'#F4F1EC', lineHeight:1}}>{s.big}</div>
                    <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'#7A7874', fontWeight:500, marginTop:8}}>{s.small}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </a>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, paddingBottom:96}}>
          {rest.map(w => <WorkTile key={w.slug} work={w} compact hoverGroup/>)}
        </div>
      </section>
    );
  }

  if (V === 'index') {
    // Index — full-width rows, typographic
    return (
      <section id="work" className="ldo-section work-hover-group">
        {header}
        <div style={{borderTop:'1px solid rgba(244,241,236,0.14)', paddingBottom:96}}>
          {WORKS.map(w => (
            <a key={w.slug} href={`case-${w.slug}.html`}
               className="work-hover-item"
               style={{display:'grid', gridTemplateColumns:'180px 1.1fr 1fr 120px 40px',
                       gap:48, padding:'36px 0',
                       borderBottom:'1px solid rgba(244,241,236,0.08)',
                       alignItems:'center', textDecoration:'none', color:'inherit',
                       transition:'opacity .3s ease'}}>
              <div style={{aspectRatio:'4/3', borderRadius:4, overflow:'hidden'}}>
                <img src={w.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
              </div>
              <div>
                <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'#7A7874', fontWeight:500, marginBottom:10}}>
                  {w.client} · {w.year}
                </div>
                <h3 style={{fontSize:'clamp(22px, 2.4vw, 34px)', fontWeight:500, letterSpacing:'-0.02em', margin:0, color:'#F4F1EC', lineHeight:1.1}}>{w.title}</h3>
              </div>
              <p style={{fontSize:14, lineHeight:1.55, color:'#B6B3AE', margin:0}}>{w.stats.map(s => `${s.big} ${s.small.toLowerCase()}`).join(' · ')}</p>
              <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ldo-accent-live, #C9A86A)', fontWeight:500}}>{w.service}</div>
              <div style={{color:'var(--ldo-accent-live, #C9A86A)', fontFamily:"'JetBrains Mono', monospace", fontSize:20, textAlign:'right'}}>↗</div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  // Feature (default) — 2x2 grid, first tile spans two
  return (
    <section id="work" className="ldo-section work-hover-group">
      {header}
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:24, paddingBottom:96}}>
        {WORKS.map((w, i) => <WorkTile key={w.slug} work={w} large={i === 0} hoverGroup/>)}
      </div>
    </section>
  );
}

function WorkTile({ work, large, compact, hoverGroup }) {
  return (
    <a href={`case-${work.slug}.html`}
       className={hoverGroup ? "work-hover-item" : ""}
       style={{display:'block', borderRadius:8, overflow:'hidden', background:'#141416',
               border:'1px solid rgba(244,241,236,0.08)', textDecoration:'none', color:'inherit',
               gridColumn: large ? 'span 2' : 'span 1',
               transition:'opacity .3s ease, border-color .28s'}}>
      <div style={{position:'relative', aspectRatio: large ? '21/9' : (compact ? '4/3' : '16/9')}}>
        <img src={work.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(14,14,15,0) 50%, rgba(14,14,15,0.7) 100%)'}}/>
      </div>
      <div style={{padding: compact ? '20px 22px 24px' : '24px 28px 32px'}}>
        <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'#7A7874', fontWeight:500, marginBottom:12, display:'flex', gap:14, flexWrap:'wrap'}}>
          <span>{work.client}</span>
          <span style={{color:'#4A4A50'}}>·</span>
          <span>{work.service}</span>
        </div>
        <h4 style={{fontSize: compact ? 20 : (large ? 30 : 24), fontWeight:500, letterSpacing:'-0.02em', margin:'0 0 12px', color:'#F4F1EC', lineHeight:1.1}}>{work.title}</h4>
        <p style={{fontSize: compact ? 13.5 : 14.5, lineHeight:1.55, color:'#B6B3AE', margin:0, maxWidth:600}}>{work.lede}</p>
      </div>
    </a>
  );
}

// ─── Testimonials ───────────────────────────────────────
function Testimonials() {
  return (
    <section id="testimonials" className="ldo-section">
      <div className="ldo-sec-head">
        <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28}}>— How clients feel</div>
        <h2 className="ldo-sec-title">Calm in complexity.</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20, paddingBottom:128}}>
        {TESTIMONIALS.map((t, i) => (
          <figure key={i} style={{background:'#141416', border:'1px solid rgba(244,241,236,0.08)',
                                  borderRadius:12, padding:'40px 36px 36px', margin:0,
                                  display:'flex', flexDirection:'column', gap:28, height:'100%'}}>
            <div style={{fontSize:36, fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', lineHeight:0.5, marginBottom:-8, fontFamily:'Georgia, serif'}}>"</div>
            <blockquote style={{fontSize:17, lineHeight:1.6, color:'#F4F1EC', margin:0, flex:1, letterSpacing:'-0.005em'}}>
              {t.quote}
            </blockquote>
            <figcaption style={{display:'flex', gap:18, alignItems:'center', paddingTop:24, borderTop:'1px solid rgba(244,241,236,0.12)'}}>
              <img src={t.portrait} alt="" style={{width:64, height:64, borderRadius:999, objectFit:'cover', flexShrink:0}}/>
              <div>
                <div style={{fontSize:20, fontWeight:500, color:'#F4F1EC', letterSpacing:'-0.015em', lineHeight:1.15}}>{t.name}</div>
                <div style={{fontSize:13, color:'var(--ldo-accent-live, #C9A86A)', fontWeight:500, marginTop:6, letterSpacing:'-0.005em'}}>{t.role}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

// ─── About teaser ───────────────────────────────────────
function AboutTeaser() {
  return (
    <section id="about" className="ldo-section" style={{paddingTop:128, paddingBottom:128, borderTop:'1px solid rgba(244,241,236,0.08)'}}>
      <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:64, alignItems:'center'}}>
        <div>
          <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28}}>— About us</div>
          <h3 style={{fontSize:'clamp(36px, 4.5vw, 64px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.04, margin:0, color:'#F4F1EC', textWrap:'balance'}}>
            A small, senior team working at the seams of strategy and delivery.
          </h3>
          <p style={{color:'#B6B3AE', fontSize:17, lineHeight:1.6, margin:'32px 0 0', maxWidth:520}}>
            Liminal Design Office was founded by practitioners who have led design and transformation at Lloyds Banking Group, BP, Virgin Media, and across UK enterprise. We bring that experience — concentrated into a small team, kept close to the work.
          </p>
          <a href="about.html" style={{display:'inline-flex', marginTop:40, fontSize:13, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', textDecoration:'none', alignItems:'center', gap:10}}>
            More about us <span style={{fontFamily:"'JetBrains Mono', monospace"}}>→</span>
          </a>
        </div>
        <img src="assets/about-photo.jpeg" alt="" style={{width:'100%', borderRadius:4, aspectRatio:'4/5', objectFit:'cover'}}/>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────
function FAQ() {
  return (
    <section id="faq" className="ldo-section">
      <div className="ldo-sec-head">
        <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:28}}>— Frequently asked</div>
        <h2 className="ldo-sec-title">Before we talk.</h2>
      </div>
      <div style={{maxWidth:920, paddingBottom:128}}>
        {FAQS.map((f, i) => <FAQRow key={i} {...f}/>)}
      </div>
    </section>
  );
}

function FAQRow({ q, a, defaultOpen }) {
  const [open, setOpen] = useStateH(!!defaultOpen);
  return (
    <div style={{borderBottom:'1px solid rgba(244,241,236,0.08)'}}>
      <button onClick={() => setOpen(o => !o)}
              style={{display:'flex', alignItems:'center', justifyContent:'space-between', width:'100%',
                      padding:'28px 0', background:'transparent', border:0, cursor:'pointer',
                      textAlign:'left', color:'#F4F1EC', fontFamily:'inherit'}}>
        <h5 style={{fontSize:19, fontWeight:500, letterSpacing:'-0.01em', margin:0}}>{q}</h5>
        <span style={{fontSize:22, fontWeight:400, color:'#B6B3AE', transition:'transform .28s cubic-bezier(.22,1,.36,1)',
                      transform: open ? 'rotate(45deg)' : 'none'}}>+</span>
      </button>
      {open && <div style={{padding:'0 0 28px', color:'#B6B3AE', fontSize:16, lineHeight:1.6, maxWidth:720}}>{a}</div>}
    </div>
  );
}

Object.assign(window, { Hero, Manifesto, ServicesSection, Approach, WorkSection, WorkTile, Testimonials, AboutTeaser, FAQ });