// ─────────────────────────────────────────────────────────────
// about.jsx — the ComposerOS "Read the Story" / About page.
//
// Lives entirely in the HERO banner's landscape world (the brand-level
// banner from banners v2.jsx): teal sky → moss rolling hills → sage ground,
// wispy clouds, scattered trees. Every graphic on this page is that one
// landscape (or a tint/shade of its palette) — no borrowing suns from Home,
// mountains from Studio, or dusk from Quotes. Type + chrome reuse the site
// system (Inter Tight + JetBrains Mono, mono eyebrows, italic-ochre accents,
// the Orbit mark, and the shared dark SiteFooter from website.jsx).
// ─────────────────────────────────────────────────────────────

const A_BG    = '#faf8f5';
const A_INK   = '#1c1a17';
const A_SOFT  = 'rgba(28,26,23,0.64)';
const A_MUTE  = 'rgba(28,26,23,0.44)';
const A_LINE  = 'rgba(28,26,23,0.10)';
const A_MOSS  = '#6d8b7a';   // hero mid-hill — the page's single accent
const A_OCHRE = '#c9a876';   // warm italic accent (site-wide)
const A_SAGE  = '#a7a878';   // hero ground

const A_HOME  = 'index.html';
const A_IG    = 'https://instagram.com/composeros.studio';
const A_WAIT  = '/waitlist';
const A_MAIL  = 'mailto:info@nemmgroup.ltd';

// ── shared atoms ─────────────────────────────────────────────
function Eyebrow({ children, color = A_MOSS, style }) {
  return (
    <div style={{
      fontFamily:"'JetBrains Mono',ui-monospace,monospace",
      fontSize:11, letterSpacing:1.8, textTransform:'uppercase',
      color, fontWeight:600, ...style,
    }}>{children}</div>
  );
}

const SHELL = {
  maxWidth:1200, margin:'0 auto',
  padding:'0 clamp(20px, 4vw, 48px)',
};

// ── The Hero landscape — reproduced faithfully from HeroBanner ──
// `sky` toggles the teal sky + clouds (on for the hero, off for hill-only
// footer strips). `deep` swaps the hill/tree palette to a dusk shade of the
// SAME colours — used to close the page without importing a foreign palette.
function HeroLandscape({ sky = true, deep = false }) {
  const p = deep ? {
    ridge:'rgb(96,110,104)', hill1:'rgb(74,92,82)', hill2:'rgb(54,70,61)',
    gTop:'rgb(58,66,52)', gBot:'rgb(42,48,36)',
    tree:'rgb(38,50,44)', trunk:'rgb(30,40,35)',
    midTree:'rgb(34,45,40)', midTrunk:'rgb(26,34,30)', plines:'rgb(30,34,24)',
  } : {
    ridge:'rgb(189,203,195)', hill1:'rgb(146,168,155)', hill2:'rgb(109,139,122)',
    gTop:'rgb(185,185,147)', gBot:'rgb(134,134,96)',
    tree:'rgb(82,104,92)', trunk:'rgb(65,83,73)',
    midTree:'rgb(71,90,79)', midTrunk:'rgb(54,70,61)', plines:'rgb(109,109,78)',
  };
  return (
    <svg viewBox="0 0 1920 800" preserveAspectRatio="xMidYMax slice"
      width="100%" height="100%" aria-hidden="true"
      style={{position:'absolute', inset:0, display:'block', overflow:'hidden'}}>
      <defs>
        <linearGradient id="ab-hero-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="rgb(214,222,225)"/>
          <stop offset="0.65" stopColor="rgb(238,241,242)"/>
          <stop offset="1" stopColor="rgb(243,246,246)"/>
        </linearGradient>
        <linearGradient id={`ab-hero-ground-${deep?'d':'l'}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={p.gTop}/>
          <stop offset="1" stopColor={p.gBot}/>
        </linearGradient>
      </defs>

      {sky && <rect width="1920" height="800" fill="url(#ab-hero-sky)"/>}
      {sky && (
        <g opacity="0.55" fill="rgb(248,249,250)">
          <ellipse cx="220" cy="260" rx="180" ry="10"/>
          <ellipse cx="540" cy="210" rx="260" ry="8"/>
          <ellipse cx="960" cy="285" rx="300" ry="9"/>
          <ellipse cx="1460" cy="230" rx="240" ry="7"/>
          <ellipse cx="1760" cy="280" rx="160" ry="9"/>
        </g>
      )}

      {/* far distant horizon — faint ridge */}
      <path d="M0,540 Q320,525 640,535 Q960,545 1280,530 Q1600,520 1920,535 L1920,560 L0,560 Z"
        fill={p.ridge} opacity="0.8"/>
      {/* mid gentle hills — two soft rolling layers */}
      <path d="M0,600 Q240,565 500,590 Q760,615 1020,580 Q1280,550 1560,595 Q1760,620 1920,600 L1920,800 L0,800 Z"
        fill={p.hill1}/>
      <path d="M0,650 Q280,625 580,650 Q880,675 1180,640 Q1480,610 1760,645 Q1880,660 1920,655 L1920,800 L0,800 Z"
        fill={p.hill2}/>
      {/* near plain — open ground */}
      <path d="M0,720 Q480,708 960,715 Q1440,722 1920,712 L1920,800 L0,800 Z"
        fill={`url(#ab-hero-ground-${deep?'d':'l'})`}/>
      {/* ground perspective lines */}
      <g stroke={p.plines} strokeWidth="1" opacity="0.15">
        <line x1="0" y1="740" x2="1920" y2="738"/>
        <line x1="0" y1="765" x2="1920" y2="762"/>
        <line x1="0" y1="790" x2="1920" y2="787"/>
      </g>
      {/* scattered distant trees — silhouettes, tiny, sparse */}
      <g fill={p.tree} opacity="0.75">
        {[140,310,420,690,880,1170,1380,1580,1820].map((x,i)=>(
          <g key={i} transform={`translate(${x},${640+((i*7)%10)})`}>
            <rect x="-0.5" y="0" width="1" height="8" fill={p.trunk}/>
            <ellipse cx="0" cy="-2" rx={3+(i%3)} ry={4+(i%2)}/>
          </g>
        ))}
      </g>
      {/* a few mid-ground small trees */}
      <g fill={p.midTree}>
        {[{x:200,s:1},{x:520,s:1.4},{x:1400,s:1.1},{x:1720,s:0.9}].map((t,i)=>(
          <g key={i} transform={`translate(${t.x},682) scale(${t.s})`}>
            <rect x="-1" y="0" width="2" height="14" fill={p.midTrunk}/>
            <ellipse cx="0" cy="-3" rx="8" ry="11"/>
          </g>
        ))}
      </g>
    </svg>
  );
}

// Hill-only band — the same landscape, sky off, anchored to a band's base.
function HillsBand({ height = 280, deep = false }) {
  return (
    <div aria-hidden="true" style={{position:'absolute', left:0, right:0, bottom:0, height, lineHeight:0, pointerEvents:'none'}}>
      <HeroLandscape sky={false} deep={deep}/>
    </div>
  );
}

// The Stawamus Chief, as seen from Squamish marina — a single broad granite
// massif filling the frame: forested left shoulder, a rounded main dome, a
// small saddle, a second granite summit, a steep right drop into the trees,
// with a distant snowy peak peeking far right. Drawn from the reference photo.
function AlpineBand({ height = 380 }) {
  return (
    <div aria-hidden="true" style={{position:'absolute', left:0, right:0, bottom:0, height, lineHeight:0, pointerEvents:'none'}}>
      <svg viewBox="0 0 1920 460" width="100%" height="100%" preserveAspectRatio="xMidYMax slice"
        style={{display:'block', overflow:'hidden'}}>
        {/* distant snowy peak, far right */}
        <path d="M1726,300 L1812,244 L1900,300 Z" fill="rgb(208,211,222)" opacity="0.5"/>
        <path d="M1788,278 L1812,244 L1838,279 L1818,272 L1806,282 Z" fill="rgb(244,245,248)" opacity="0.6"/>
        {/* the massif — granite body, full width */}
        <path d="M0,330 L140,308 Q300,288 400,210 Q480,150 580,124 Q690,108 800,122 Q852,130 886,164 Q910,188 954,172 Q1022,142 1132,138 Q1226,138 1292,174 L1412,234 Q1558,320 1708,384 L1862,420 L1920,404 L1920,460 L0,460 Z"
          fill="rgb(150,155,170)"/>
        {/* granite faces — subtle darker planes below the summits */}
        <path d="M800,122 Q852,130 886,164 Q910,188 954,172 L1012,384 L826,384 Z" fill="rgb(132,137,154)" opacity="0.55"/>
        <path d="M1292,174 L1412,234 Q1558,320 1708,384 L1556,384 L1356,258 Z" fill="rgb(132,137,154)" opacity="0.55"/>
        {/* central shaded wedge — the gully between the two domes, draining to the ground */}
        <path d="M954,172 Q1022,142 1132,138 L1066,384 L912,384 Z" fill="rgb(120,125,143)" opacity="0.5"/>
        {/* forested base — a single darker conifer band that bridges into the dusk contact */}
        <path d="M0,384 Q300,370 620,380 Q960,392 1300,380 Q1620,370 1920,382 L1920,460 L0,460 Z"
          fill="rgb(64,78,84)"/>
        {/* a few pine tops along the tree line */}
        <g fill="rgb(56,70,74)">
          <g transform="translate(240,380) scale(0.95)"><polygon points="0,-26 -9,0 9,0"/></g>
          <g transform="translate(700,378) scale(1.05)"><polygon points="0,-26 -9,0 9,0"/></g>
          <g transform="translate(1080,382) scale(0.98)"><polygon points="0,-26 -9,0 9,0"/></g>
          <g transform="translate(1520,380) scale(1.05)"><polygon points="0,-26 -9,0 9,0"/></g>
        </g>
      </svg>
    </div>
  );
}

// Morning sun — the exact Home-banner sun (squared rays + flat disc).
// Position / size / opacity are driven by the live adjust panel (SunTweak).
function MorningSun() {
  const p = { x:-39, y:22, size:1160, opacity:0.1 };
  const CX = 800, CY = 800, R = 110;
  return (
    <svg aria-hidden="true" viewBox="0 0 1600 1600" className="about-why-sun"
      style={{position:'absolute', left:`${p.x}%`, top:`${p.y}%`, width:`${p.size}px`, height:'auto', opacity:p.opacity, pointerEvents:'none'}}>
      <circle cx={CX} cy={CY} r={R+220} fill="#f7c948" opacity="0.10"/>
      <circle cx={CX} cy={CY} r={R+60} fill="#f7c948" opacity="0.20"/>
      <g transform={`translate(${CX} ${CY})`}>
        {Array.from({length:12}).map((_,i)=>{const a=(i/12)*360;const len=780,w=22,gap=R+22;return <rect key={'o'+i} transform={`rotate(${a})`} x={gap} y={-w/2} width={len-gap} height={w} fill="#e88c3a" opacity="0.55"/>;})}
      </g>
      <g transform={`translate(${CX} ${CY})`}>
        {Array.from({length:12}).map((_,i)=>{const a=(i/12)*360+15;const len=540,w=16,gap=R+14;return <rect key={'y'+i} transform={`rotate(${a})`} x={gap} y={-w/2} width={len-gap} height={w} fill="#f2b23a"/>;})}
      </g>
      <g transform={`translate(${CX} ${CY})`}>
        {Array.from({length:12}).map((_,i)=>{const a=(i/12)*360+7.5;const len=320,w=10,gap=R+10;return <rect key={'s'+i} transform={`rotate(${a})`} x={gap} y={-w/2} width={len-gap} height={w} fill="#f7c948"/>;})}
      </g>
      <circle cx={CX} cy={CY} r={R} fill="#f7c948"/>
    </svg>
  );
}

// Aria glow — concentric light rings + soft radial light (Aria "air and light").
function AriaGlow() {
  return (
    <svg aria-hidden="true" viewBox="0 0 600 600"
      style={{position:'absolute', left:'50%', top:'clamp(-60px, -4vw, -30px)', transform:'translateX(-50%)', width:'min(720px, 96vw)', height:'auto', opacity:0.9, pointerEvents:'none'}}>
      <defs>
        <radialGradient id="ab-aria-core" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="#f3e6c4" stopOpacity="0.5"/>
          <stop offset="1" stopColor="#f3e6c4" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="300" cy="300" r="280" fill="url(#ab-aria-core)"/>
      <g fill="none" stroke="#c0922f">
        <circle cx="300" cy="300" r="118" opacity="0.16"/>
        <circle cx="300" cy="300" r="176" opacity="0.11"/>
        <circle cx="300" cy="300" r="234" opacity="0.07"/>
        <circle cx="300" cy="300" r="292" opacity="0.045"/>
      </g>
    </svg>
  );
}

// Coast scene — a calm cool sea with a low warm sun, a distant headland,
// reflection shimmer and swell lines (Library "coast, cool" archive world).
function CoastBand({ height = 300, sun }) {
  const cs = sun || { x:1360, y:165, size:130, opacity:0.3 };
  return (
    <div aria-hidden="true" style={{position:'absolute', left:0, right:0, bottom:0, height, lineHeight:0, pointerEvents:'none'}}>
      <svg viewBox="0 -300 1920 660" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" style={{display:'block', overflow:'hidden'}}>
        <defs>
          <linearGradient id="ab-coast-water" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="rgb(201,203,195)"/>
            <stop offset="1" stopColor="rgb(177,181,179)"/>
          </linearGradient>
        </defs>
        {/* low warm sun above the horizon (adjustable) */}
        <circle cx={cs.x} cy={cs.y} r={cs.size*1.83} fill="#e6b86a" opacity={cs.opacity*0.24}/>
        <circle cx={cs.x} cy={cs.y} r={cs.size} fill="#e3b066" opacity={cs.opacity}/>
        {/* distant headland — a low rounded coastal hill */}
        <path d="M0,196 Q170,148 380,167 Q560,184 700,196 L700,360 L0,360 Z" fill="rgb(150,134,110)" opacity="0.5"/>
        {/* the sea */}
        <rect x="0" y="196" width="1920" height="164" fill="url(#ab-coast-water)"/>
        {/* horizon line */}
        <line x1="0" y1="196" x2="1920" y2="196" stroke="rgb(150,156,150)" strokeWidth="1.5" opacity="0.5"/>
        {/* sun reflection shimmer (follows the sun) */}
        <g fill="#ecd3a0" opacity={cs.opacity}>
          <rect x={cs.x-40} y="208" width="80" height="8" rx="4"/>
          <rect x={cs.x-30} y="230" width="60" height="7" rx="3.5"/>
          <rect x={cs.x-48} y="254" width="96" height="7" rx="3.5"/>
          <rect x={cs.x-24} y="278" width="48" height="6" rx="3"/>
          <rect x={cs.x-36} y="300" width="72" height="6" rx="3"/>
        </g>
        {/* calm horizontal swell lines */}
        <g stroke="rgb(191,195,191)" strokeWidth="1.5" strokeLinecap="round" opacity="0.55">
          <line x1="120" y1="232" x2="900" y2="232"/>
          <line x1="80" y1="262" x2="760" y2="262"/>
          <line x1="200" y1="292" x2="1010" y2="292"/>
          <line x1="120" y1="322" x2="860" y2="322"/>
        </g>
        {/* two distant birds */}
        <g stroke="rgb(120,110,96)" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.45">
          <path d="M980,118 q12,-10 24,0 q12,-10 24,0"/>
          <path d="M1058,138 q9,-7 18,0 q9,-7 18,0"/>
        </g>
      </svg>
    </div>
  );
}

// Studio night — stars, crescent moon, layered dark mountain silhouettes that
// descend toward ink (Studio "alpine, dusk"). Closes the page into the footer.
function StudioNight() {
  return (
    <svg aria-hidden="true" viewBox="0 0 1920 760" preserveAspectRatio="xMidYMax slice"
      style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none', overflow:'hidden'}}>
      {/* stars */}
      <g fill="#f2efe8">
        {[[120,80,1.3],[260,150,0.9],[380,70,1.1],[520,130,0.8],[660,100,1.2],
          [820,180,0.9],[980,90,1.1],[1140,160,0.9],[1300,110,0.8],[1460,70,1.3],
          [1600,150,1.0],[1760,100,0.9],[1850,200,1.1],[200,240,0.8],[560,260,0.9],
          [1040,250,0.8],[1500,250,0.9]].map(([x,y,r],i)=>(
          <circle key={i} cx={x} cy={y} r={r} opacity={0.35+(i%3)*0.12}/>
        ))}
      </g>
      {/* crescent moon removed */}
      {/* layered silhouettes — indigo, darkening downward toward the footer */}
      <path d="M0,440 L200,330 L360,440 L520,310 L700,440 L880,340 L1080,440 L1280,320 L1480,440 L1660,350 L1840,440 L1920,400 L1920,760 L0,760 Z"
        fill="rgb(58,55,82)" opacity="0.7"/>
      <path d="M0,540 L180,430 L380,545 L580,410 L800,545 L1020,440 L1260,545 L1480,430 L1700,545 L1880,470 L1920,520 L1920,760 L0,760 Z"
        fill="rgb(44,42,62)"/>
      <path d="M0,640 L260,560 L520,635 L800,545 L1080,640 L1360,560 L1620,640 L1860,575 L1920,625 L1920,760 L0,760 Z"
        fill="rgb(31,29,42)"/>
    </svg>
  );
}

// ── Header — matches SiteHeader; links resolve back to the main site ──
function AboutHeader() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = [
    { l:'Home', h:`${A_HOME}#home` },
    { l:'Studio', h:`${A_HOME}#studio` },
    { l:'Library', h:`${A_HOME}#library` },
    { l:'Projects', h:`${A_HOME}#projects` },
    { l:'Health', h:`${A_HOME}#health` },
    { l:'Aria', h:`${A_HOME}#aria` },
  ];
  const tone = (typeof ORBIT_PALETTE !== 'undefined') ? ORBIT_PALETTE.moss : null;
  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50, height:64,
      background: scrolled ? 'rgba(250,248,245,0.88)' : 'rgba(250,248,245,0.62)',
      backdropFilter:'blur(14px)', WebkitBackdropFilter:'blur(14px)',
      borderBottom: scrolled ? `1px solid ${A_LINE}` : '1px solid transparent',
      boxShadow: scrolled ? '0 4px 20px -10px rgba(0,0,0,0.08)' : 'none',
      transition:'border-color 300ms, box-shadow 300ms, background 600ms',
    }}>
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background:A_MOSS, opacity:0.10, mixBlendMode:'multiply',
      }}/>
      <div style={{
        maxWidth:1600, margin:'0 auto', height:'100%',
        padding:'0 clamp(20px, 4vw, 48px)',
        display:'flex', alignItems:'center', justifyContent:'space-between', gap:20,
      }}>
        <a href={A_HOME} style={{display:'flex',alignItems:'center',gap:10,textDecoration:'none',color:A_INK}}>
          <div style={{width:28,height:28,display:'flex',alignItems:'center',justifyContent:'center'}}>
            {tone
              ? <OrbitIcon size={28} tone={tone}/>
              : <div style={{width:22,height:22,borderRadius:11,background:`conic-gradient(from 0deg, ${A_INK}, ${A_MOSS}, ${A_INK})`}}/>}
          </div>
          <div style={{fontSize:17,fontWeight:500,letterSpacing:-0.3}}>
            Composer<span style={{opacity:0.55}}>OS</span>
          </div>
        </a>
        <nav className="site-nav-desktop" style={{display:'flex',gap:30,fontSize:14,color:A_SOFT,fontWeight:450}}>
          {items.map(i => (
            <a key={i.l} href={i.h} style={{color:'inherit',textDecoration:'none',transition:'color 150ms'}}
               onMouseOver={e=>e.currentTarget.style.color=A_INK}
               onMouseOut={e=>e.currentTarget.style.color=A_SOFT}>{i.l}</a>
          ))}
          <span style={{color:A_INK,fontWeight:500}}>Story</span>
        </nav>
        <div className="site-cta-desktop" style={{display:'flex',alignItems:'center',gap:18}}>
          <a href={A_WAIT} style={{
            padding:'9px 18px',borderRadius:999,fontSize:14,fontWeight:500,whiteSpace:'nowrap',
            background:A_INK,color:A_BG,textDecoration:'none',transition:'transform 150ms',
          }}
          onMouseOver={e=>e.currentTarget.style.transform='scale(1.04)'}
          onMouseOut={e=>e.currentTarget.style.transform='scale(1)'}>Join the waitlist</a>
        </div>
        <button className="site-nav-mobile-btn" onClick={()=>setOpen(v=>!v)}
          style={{display:'none',background:'transparent',border:'none',cursor:'pointer',padding:8,color:A_INK}}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            {open
              ? <g stroke="currentColor" strokeWidth="1.8"><line x1="5" y1="5" x2="17" y2="17"/><line x1="17" y1="5" x2="5" y2="17"/></g>
              : <g stroke="currentColor" strokeWidth="1.8"><line x1="4" y1="7" x2="18" y2="7"/><line x1="4" y1="11" x2="18" y2="11"/><line x1="4" y1="15" x2="18" y2="15"/></g>}
          </svg>
        </button>
      </div>
      {open && (
        <div className="site-mobile-panel" style={{
          background:A_BG, borderTop:`1px solid ${A_LINE}`,
          padding:'12px 20px 20px', display:'flex', flexDirection:'column', gap:4,
        }}>
          {items.map(i=>(
            <a key={i.l} href={i.h} onClick={()=>setOpen(false)}
              style={{padding:'10px 4px',fontSize:16,color:A_INK,textDecoration:'none',borderBottom:`1px solid ${A_LINE}`}}>{i.l}</a>
          ))}
          <a href={A_WAIT} onClick={()=>setOpen(false)} style={{marginTop:14,padding:'12px 0',textAlign:'center',borderRadius:999,
            background:A_INK,color:A_BG,fontSize:14,fontWeight:500,textDecoration:'none'}}>Join the waitlist</a>
        </div>
      )}
    </header>
  );
}

// ── Hero — the brand landscape, headline over the open sky ──
function AboutHero() {
  return (
    <section style={{position:'relative', overflow:'hidden', minHeight:'clamp(640px, 88vh, 900px)', display:'flex'}}>
      <HeroLandscape sky={true}/>
      <div style={{...SHELL, position:'relative', zIndex:2, width:'100%',
        paddingTop:'clamp(128px, 19vh, 200px)'}}>
        <Eyebrow style={{marginBottom:'clamp(12px, 1.09vw, 21px)'}}>00 · Read the Story</Eyebrow>
        <h1 className="about-hero-title" style={{
          margin:0, fontWeight:450, letterSpacing:'-0.044em', lineHeight:0.92,
          fontSize:'clamp(44px, 5.21vw, 100px)', color:A_INK,
        }}>
          Composer-first,<br/>
          <span style={{fontStyle:'italic',fontWeight:350,color:'#4f6a5b'}}>
            from the ground<span className="about-hero-mobile-break"><br/></span> up.
          </span>
        </h1>
        <p style={{
          marginTop:'clamp(22px, 1.6vw, 32px)', maxWidth:640, fontSize:'clamp(15px, 1.04vw, 20px)',
          lineHeight:1.5, color:A_INK, opacity:0.78,
        }}>
          ComposerOS exists because the working life of a composer has quietly grown
          more complex than any single tool was ever designed to hold. We built the
          operating system we needed for ourselves, then opened it up.
        </p>
      </div>
    </section>
  );
}

// ── Why we built this ────────────────────────────────────────
function WhySection() {
  return (
    <section style={{padding:'clamp(64px, 9vw, 110px) 0', background:'linear-gradient(180deg, rgb(242,234,215) 0%, rgb(239,229,206) 100%)', position:'relative', overflow:'hidden'}}>
      <MorningSun/>
      <div style={{...SHELL, position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1fr 2fr', gap:'clamp(30px, 6vw, 80px)', alignItems:'start'}}
        className="about-2col">
        <div className="about-rail">
          <Eyebrow color="#b07c44" style={{marginBottom:14}}>01 · Origin</Eyebrow>
          <h2 style={{margin:0, fontSize:'clamp(28px, 3.6vw, 44px)', fontWeight:500, letterSpacing:-0.9, lineHeight:1.04, color:A_INK}}>
            Why we<br/>built this.
          </h2>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:22, maxWidth:680}}>
          <p style={{margin:0, fontSize:'clamp(16px, 1.25vw, 18px)', lineHeight:1.68, color:A_SOFT}}>
            I've spent years building a studio workflow, working with every tool I could find:
            SoundMiner, Notion, Sheets, Daylite, iWork, Excel, Google Workspace, QuickBooks&mdash;and
            dozens of others. Piece by piece, trying to make one system out of many. At one point, I
            even built my own FileMaker Pro system. Each tool was designed for something else:
            SoundMiner for sound effects, not music stems&mdash;but I used it anyway. Notion for general
            projects, Sheets for invoicing. And more recently, every AI and LLM that's come out. None
            of them were built for <em style={{fontStyle:'italic',color:A_INK}}>composers</em>. None of
            them knew what a spotting note was, or why a cue needs a timecode, or how revisions spiral
            across a deadline. And the ones that did exist for composers felt incomplete&mdash;each one
            tackling just a single task.
          </p>
          <p style={{margin:0, fontSize:'clamp(16px, 1.25vw, 18px)', lineHeight:1.68, color:A_SOFT}}>
            The pain wasn't one crisis moment. It was the slow accumulation across dozens of
            projects. Everything was scattered&mdash;different drives, servers, folders. Losing
            revision notes because they were buried in email, forgetting which cues still needed
            work, building new spreadsheets for each production, explaining the same workflow to
            assistants who then had to learn it from scratch. I'd spend 30&ndash;40% of my time
            on project management when I could have spent it composing.
          </p>

          <blockquote style={{margin:'14px 0', padding:'4px 0 4px 28px', borderLeft:`3px solid #b07c44`}}>
            <div style={{
              fontSize:'clamp(22px, 2.6vw, 32px)', fontWeight:400, fontStyle:'italic',
              letterSpacing:-0.6, lineHeight:1.25, color:A_INK,
            }}>
              None of them were built for composers.<br/>
              So I built the one that was.
            </div>
          </blockquote>

          <p style={{margin:0, fontSize:'clamp(16px, 1.25vw, 18px)', lineHeight:1.68, color:A_SOFT}}>
            I showed an early version of ComposerOS to a composer friend whose work I've always
            respected. &ldquo;Ambitious,&rdquo; he said. But it didn't feel that way to me. I'd built
            all these pieces before &mdash; cue tracking, spotting workflows, revision cycles. Modern
            AI just gave me the infrastructure to put them all in one place.
          </p>
          <p style={{margin:0, fontSize:'clamp(16px, 1.25vw, 18px)', lineHeight:1.68, color:A_SOFT}}>
            So I built the tool that holds all of it: spotting notes, cues, revisions, sessions,
            deliverables, invoicing, project contacts &mdash; in one place, designed end-to-end for
            how composers actually work.
          </p>
          <div style={{marginTop:10, fontFamily:"'Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif", fontStyle:'italic', fontWeight:400,
            fontSize:'clamp(17px, 1.5vw, 19px)', letterSpacing:-0.2, color:A_SOFT, lineHeight:1}}>
            &mdash; Marcelo
          </div>
        </div>
      </div>
    </section>
  );
}

// ── What we believe ──────────────────────────────────────────
const BELIEFS = [
  { n:'01', t:'The work comes first.',
    b:"ComposerOS handles the studio so you can handle the composition. Every hour you spend in admin is an hour you're not scoring. We optimize for composition time, not for feature lists." },
  { n:'02', t:'Your workflow, integrated.',
    b:"Your spotting process, your cue tracking, your session management — ComposerOS simply connects what you're already doing. Same logic, same thinking, one place." },
  { n:'03', t:'Health is measurable.',
    b:"Sleep, hearing, stress, energy — ComposerOS tracks them alongside your workload so you see the real connection. Because the link between your health and your composition isn't theoretical. It's measurable." },
  { n:'04', t:'Quiet by design.',
    b:"The interface is a workspace, not a stage. Peaceful, focused, helpful. No notifications you didn't ask for, no animations that distract, no friction between you and the work. Design serves function. Function serves composition." },
];

function BeliefsSection() {
  return (
    <section style={{background:'linear-gradient(180deg, rgb(245,241,231) 0%, rgb(241,236,224) 100%)', padding:'clamp(64px, 9vw, 112px) 0', position:'relative', overflow:'hidden'}}>
      <div style={{...SHELL, position:'relative'}}>
        <div style={{position:'relative', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', marginBottom:'clamp(40px, 6vw, 72px)'}}>
          <AriaGlow/>
          <Eyebrow color="#b58f33" style={{marginBottom:16, position:'relative'}}>Principles</Eyebrow>
          <h2 style={{margin:0, position:'relative', fontSize:'clamp(28px, 3.8vw, 46px)', fontWeight:500, letterSpacing:-1, lineHeight:1.02, color:A_INK}}>
            What we believe.
          </h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(28px, 4vw, 56px)'}} className="about-beliefs">
          {BELIEFS.map(b => (
            <div key={b.n} style={{paddingTop:26, borderTop:`2px solid #b58f33`}}>
              <div style={{
                fontFamily:"'JetBrains Mono',ui-monospace,monospace",
                fontSize:13, fontWeight:600, color:'#b58f33', letterSpacing:1, marginBottom:18,
              }}>{b.n}</div>
              <h3 style={{margin:'0 0 12px', fontSize:'clamp(20px, 2vw, 26px)', fontWeight:500, letterSpacing:-0.5, color:A_INK, lineHeight:1.1}}>
                {b.t}
              </h3>
              <p style={{margin:0, fontSize:'clamp(15px, 1.15vw, 16.5px)', lineHeight:1.62, color:A_SOFT}}>
                {b.b}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Built by ─────────────────────────────────────────────────
const CREDITS = ['Disney','Netflix','Amazon','Nickelodeon','National Geographic'];

function BuiltBySection() {
  const tone = (typeof ORBIT_PALETTE !== 'undefined') ? ORBIT_PALETTE.bronze : null;
  return (
    <section style={{padding:'clamp(64px, 9vw, 112px) 0 clamp(220px, 26vw, 320px)', background:'rgb(234,230,221)', position:'relative', overflow:'hidden'}}>
      <CoastBand height={520}/>
      <div style={{...SHELL, position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1fr 2fr', gap:'clamp(30px, 6vw, 80px)', alignItems:'start'}}
        className="about-2col">
        <div className="about-rail">
          <Eyebrow color="#8a5a34" style={{marginBottom:14}}>02 · Built by</Eyebrow>
          <div style={{display:'flex', alignItems:'center', gap:16, marginTop:8}}>
            {tone && <OrbitIcon size={56} tone={tone}/>}
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:12, letterSpacing:1.4, textTransform:'uppercase', color:A_MUTE, lineHeight:1.5}}>
              NEMM<br/>Software Ltd
            </div>
          </div>
        </div>
        <div style={{maxWidth:720}}>
          <h2 style={{margin:'0 0 22px', fontSize:'clamp(22px, 2.6vw, 34px)', fontWeight:500, letterSpacing:-1, lineHeight:1.0, color:A_INK}}>
            Marcelo Trevino
          </h2>
          <p style={{margin:0, fontSize:'clamp(16px, 1.3vw, 19px)', lineHeight:1.62, color:A_SOFT, maxWidth:620}}>
            Marcelo is a composer with credits on Disney, Netflix, Amazon, Nickelodeon,
            National Geographic, and more. He founded NEMM Software Ltd to build the tool he kept
            wishing he had: an OS designed end-to-end for the way composers actually work.
            <span style={{color:A_INK}}> ComposerOS is the result.</span>
          </p>
        </div>
      </div>
    </section>
  );
}

// ── Where we are ─────────────────────────────────────────────
function WhereBlock({ head, children }) {
  return (
    <div style={{paddingTop:24, borderTop:`1px solid ${A_LINE}`}}>
      <h3 style={{margin:'0 0 12px', fontSize:'clamp(18px, 1.7vw, 22px)', fontWeight:500, letterSpacing:-0.4, color:A_INK, lineHeight:1.15}}>
        {head}
      </h3>
      <p style={{margin:0, fontSize:'clamp(15px, 1.1vw, 16px)', lineHeight:1.62, color:A_SOFT}}>
        {children}
      </p>
    </div>
  );
}

function WhereSection() {
  const link = { color:A_INK, textDecoration:'none', borderBottom:`1px solid #6f82a0`, paddingBottom:1 };
  return (
    <section style={{
      background:'linear-gradient(180deg, rgb(232,232,239) 0%, rgb(224,227,233) 55%, rgb(212,217,224) 100%)',
      padding:'clamp(64px, 9vw, 112px) 0 clamp(240px, 28vw, 360px)',
      position:'relative', overflow:'hidden',
    }}>
      <div style={{...SHELL, position:'relative', zIndex:2}}>
        <div style={{maxWidth:760, marginBottom:'clamp(40px, 6vw, 64px)'}}>
          <Eyebrow color="#5f7290" style={{marginBottom:16}}>03 · Where we are</Eyebrow>
          <h2 style={{margin:0, fontSize:'clamp(28px, 3.8vw, 46px)', fontWeight:500, letterSpacing:-1, lineHeight:1.04, color:A_INK}}>
            Based in Squamish, BC.
          </h2>
          <p style={{marginTop:18, fontSize:'clamp(16px, 1.3vw, 18px)', lineHeight:1.6, color:A_SOFT, maxWidth:560}}>
            NEMM Software Ltd is the studio and company behind ComposerOS.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'clamp(28px, 4vw, 52px)'}} className="about-where">
          <WhereBlock head="We're building community.">
            Find us on <a href={A_IG} target="_blank" rel="noopener" style={link}>Instagram</a>. Building:
            ComposerOS Podcast, newsletter, live community events, and the #composerlife series.{' '}
            <a href={A_WAIT} style={link}>Join the waitlist</a> to stay
            in the loop and get notified when these launch.
          </WhereBlock>
          <WhereBlock head="We're open to partnerships.">
            ComposerOS is designed to be a hub: integrations with the tools you already use,
            partnerships with instrument and sample library creators, courses, books, and resources
            that help composers work better. If you're building for composers, let's talk.
          </WhereBlock>
          <WhereBlock head="What's next.">
            V1.5 brings cloud sync and integrated Aria, an iOS companion app, and a PRO tier with
            Aria unlimited, Library ecosystem integrations, and deeper studio features. The vision
            is bigger &mdash; a whole ecosystem of tools for composers, all connected through
            ComposerOS.
          </WhereBlock>
        </div>
      </div>
      <AlpineBand height={360}/>
    </section>
  );
}

// ── Contact modal — a small form popup (no backend; composes an email) ──
function ContactModal({ open, onClose }) {
  const ivory = '#f2efe8';
  const [form, setForm] = React.useState({ name:'', email:'', role:'Composer', message:'' });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const dialogRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    setTimeout(() => { dialogRef.current && dialogRef.current.querySelector('input')?.focus(); }, 60);
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [open, onClose]);

  React.useEffect(() => { if (open) setSent(false); }, [open]);

  if (!open) return null;

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const valid = form.name.trim() && /\S+@\S+\.\S+/.test(form.email) && form.message.trim();

  const submit = async e => {
    e.preventDefault();
    if (!valid || sending) return;
    setSending(true);
    try {
      if (typeof window.submitToWeb3Forms !== 'function') throw new Error('helper unavailable');
      await window.submitToWeb3Forms({
        subject: `Contact — ${form.name} (${form.role})`,
        from_name: form.name,
        email: form.email,
        role: form.role,
        message: form.message,
      });
      setSent(true);
    } catch (_) {
      const subject = encodeURIComponent(`[${form.role}] ComposerOS — ${form.name}`);
      const body = encodeURIComponent(
        `Name: ${form.name}\nEmail: ${form.email}\nRole: ${form.role}\n\n${form.message}`
      );
      window.location.href = `mailto:info@nemmgroup.ltd?subject=${subject}&body=${body}`;
      setSent(true);
    }
    setSending(false);
  };

  const field = {
    width:'100%', padding:'12px 14px', borderRadius:10, boxSizing:'border-box',
    background:'rgba(255,255,255,0.06)', border:'1px solid rgba(242,239,232,0.18)',
    color:ivory, fontSize:15, fontFamily:"'Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif", outline:'none',
    transition:'border-color 150ms, background 150ms',
  };
  const label = { fontSize:11, fontFamily:"'JetBrains Mono',monospace", letterSpacing:1, textTransform:'uppercase', color:'rgba(242,239,232,0.6)', marginBottom:7, display:'block' };
  const onFoc = e => { e.target.style.borderColor = A_OCHRE; e.target.style.background = 'rgba(255,255,255,0.09)'; };
  const onBlur = e => { e.target.style.borderColor = 'rgba(242,239,232,0.18)'; e.target.style.background = 'rgba(255,255,255,0.06)'; };

  return (
    <div onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}
      style={{
        position:'fixed', inset:0, zIndex:300, display:'flex', alignItems:'center', justifyContent:'center',
        padding:20, background:'rgba(20,18,28,0.66)', backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)',
        animation:'ab-fade 180ms ease',
      }}>
      <div ref={dialogRef} role="dialog" aria-modal="true" aria-label="Contact ComposerOS"
        style={{
          position:'relative', width:'min(520px, 100%)', maxHeight:'90vh', overflowY:'auto',
          background:'linear-gradient(180deg, rgb(60,57,86) 0%, rgb(43,41,58) 100%)',
          border:'1px solid rgba(242,239,232,0.14)', borderRadius:18,
          padding:'clamp(26px, 4vw, 40px)', boxShadow:'0 30px 80px -24px rgba(0,0,0,0.6)',
          animation:'ab-rise 220ms cubic-bezier(0.16,1,0.3,1)', fontFamily:"'Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif",
        }}>
        <button onClick={onClose} aria-label="Close"
          style={{position:'absolute', top:16, right:16, width:34, height:34, borderRadius:999,
            background:'rgba(255,255,255,0.07)', border:'1px solid rgba(242,239,232,0.16)', cursor:'pointer',
            display:'flex', alignItems:'center', justifyContent:'center', color:ivory}}>
          <svg width="14" height="14" viewBox="0 0 14 14"><g stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><line x1="3" y1="3" x2="11" y2="11"/><line x1="11" y1="3" x2="3" y2="11"/></g></svg>
        </button>

        {sent ? (
          <div style={{textAlign:'center', padding:'18px 0'}}>
            <div style={{width:54, height:54, borderRadius:999, margin:'0 auto 18px', display:'flex', alignItems:'center', justifyContent:'center', background:'rgba(201,168,118,0.18)', border:`1px solid ${A_OCHRE}`}}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="5,12.5 10,17.5 19,7" stroke={A_OCHRE} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <h3 style={{margin:'0 0 10px', fontSize:24, fontWeight:500, color:ivory, letterSpacing:-0.5}}>Message sent.</h3>
            <p style={{margin:'0 auto', maxWidth:360, fontSize:15, lineHeight:1.6, color:'rgba(242,239,232,0.66)'}}>
              Thanks &mdash; we've received your message and will be in touch. Prefer email? Reach us
              at <a href={A_MAIL} style={{color:ivory, borderBottom:`1px solid ${A_OCHRE}`, textDecoration:'none'}}>info@nemmgroup.ltd</a>.
            </p>
            <button onClick={onClose} style={{marginTop:24, padding:'12px 26px', borderRadius:999, background:ivory, color:'rgb(33,31,44)', border:'none', cursor:'pointer', fontSize:15, fontWeight:500}}>Done</button>
          </div>
        ) : (
          <form onSubmit={submit}>
            <div style={{fontSize:11, fontFamily:"'JetBrains Mono',monospace", letterSpacing:1.6, textTransform:'uppercase', color:A_OCHRE, fontWeight:600, marginBottom:10}}>Contact</div>
            <h3 style={{margin:'0 0 8px', fontSize:'clamp(24px, 3.4vw, 30px)', fontWeight:450, letterSpacing:-0.8, color:ivory}}>
              Write to us.
            </h3>
            <p style={{margin:'0 0 24px', fontSize:14.5, lineHeight:1.55, color:'rgba(242,239,232,0.6)'}}>
              Tell us a little about you and what's on your mind. We read every message.
            </p>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:16}} className="ab-form-row">
              <div>
                <label style={label} htmlFor="ab-name">Name</label>
                <input id="ab-name" style={field} value={form.name} onChange={set('name')} onFocus={onFoc} onBlur={onBlur} placeholder="Your name"/>
              </div>
              <div>
                <label style={label} htmlFor="ab-email">Email</label>
                <input id="ab-email" type="email" style={field} value={form.email} onChange={set('email')} onFocus={onFoc} onBlur={onBlur} placeholder="you@studio.com"/>
              </div>
            </div>

            <div style={{marginBottom:16}}>
              <label style={label} htmlFor="ab-role">I'm a&hellip;</label>
              <select id="ab-role" style={{...field, appearance:'none', WebkitAppearance:'none', cursor:'pointer',
                backgroundImage:`url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c9a876' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")`,
                backgroundRepeat:'no-repeat', backgroundPosition:'right 14px center'}}
                value={form.role} onChange={set('role')} onFocus={onFoc} onBlur={onBlur}>
                <option style={{color:'#1c1a17'}}>Composer</option>
                <option style={{color:'#1c1a17'}}>Studio</option>
                <option style={{color:'#1c1a17'}}>Publisher</option>
                <option style={{color:'#1c1a17'}}>Potential partner</option>
                <option style={{color:'#1c1a17'}}>Press</option>
                <option style={{color:'#1c1a17'}}>Just curious</option>
              </select>
            </div>

            <div style={{marginBottom:22}}>
              <label style={label} htmlFor="ab-msg">Message</label>
              <textarea id="ab-msg" rows={4} style={{...field, resize:'vertical', minHeight:96, lineHeight:1.5}} value={form.message} onChange={set('message')} onFocus={onFoc} onBlur={onBlur} placeholder="What's on your mind?"/>
            </div>

            <button type="submit" disabled={!valid}
              style={{width:'100%', padding:'15px 24px', borderRadius:999, border:'none',
                background: valid ? ivory : 'rgba(242,239,232,0.22)',
                color: valid ? 'rgb(33,31,44)' : 'rgba(242,239,232,0.5)',
                fontSize:16, fontWeight:500, cursor: valid ? 'pointer' : 'not-allowed',
                fontFamily:"'Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif", transition:'transform 150ms, background 150ms'}}
              onMouseOver={e => { if (valid) e.currentTarget.style.transform = 'scale(1.02)'; }}
              onMouseOut={e => e.currentTarget.style.transform = 'scale(1)'}>
              {sending ? 'Sending…' : 'Send message'}
            </button>
            <div style={{marginTop:14, fontSize:12.5, textAlign:'center', color:'rgba(242,239,232,0.45)'}}>
              Prefer email? <a href={A_MAIL} style={{color:'rgba(242,239,232,0.7)', textDecoration:'none', borderBottom:`1px solid ${A_OCHRE}`}}>info@nemmgroup.ltd</a>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

// ── Contact — the same landscape, deepened, as the closing band ──
function ContactSection() {
  const ivory = '#f2efe8';
  const ivorySoft = 'rgba(242,239,232,0.66)';
  const [modal, setModal] = React.useState(false);
  return (
    <section style={{
      position:'relative', overflow:'hidden',
      background:'linear-gradient(180deg, rgb(74,72,104) 0%, rgb(54,51,78) 52%, rgb(33,31,44) 100%)',
      padding:'clamp(88px, 13vw, 160px) 0 clamp(170px, 21vw, 250px)',
    }}>
      <StudioNight/>
      <div style={{...SHELL, position:'relative', zIndex:2, display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center'}}>
        <Eyebrow color={A_OCHRE} style={{marginBottom:18}}>Contact</Eyebrow>
        <h2 style={{margin:0, fontSize:'clamp(34px, 5.5vw, 68px)', fontWeight:450, letterSpacing:-1.8, lineHeight:1.0, color:ivory}}>
          Want to <span style={{fontStyle:'italic',fontWeight:350,color:A_OCHRE}}>talk?</span>
        </h2>
        <p style={{marginTop:24, maxWidth:560, fontSize:'clamp(16px, 1.3vw, 18px)', lineHeight:1.62, color:ivorySoft}}>
          We read every message. Whether you're a composer, a studio, a publisher, a potential
          partner, or just curious &mdash; write to us.
        </p>
        <button onClick={() => setModal(true)} style={{
          marginTop:36, display:'inline-flex', alignItems:'center', gap:12,
          padding:'18px 30px', borderRadius:999, background:ivory, color:'rgb(33,31,44)', border:'none',
          cursor:'pointer', fontSize:'clamp(16px, 1.4vw, 19px)', fontWeight:500,
          fontFamily:"'Inter Tight',system-ui,-apple-system,BlinkMacSystemFont,sans-serif", transition:'transform 150ms',
        }}
        onMouseOver={e=>e.currentTarget.style.transform='scale(1.03)'}
        onMouseOut={e=>e.currentTarget.style.transform='scale(1)'}>
          Send us a message
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <line x1="2" y1="8" x2="12" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            <polyline points="8.5,4.5 12,8 8.5,11.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{marginTop:26, fontSize:14, color:ivorySoft}}>
          Follow along on{' '}
          <a href={A_IG} target="_blank" rel="noopener" style={{color:ivory, textDecoration:'none', borderBottom:`1px solid ${A_OCHRE}`}}>@composeros.studio</a>
        </div>
      </div>
      <ContactModal open={modal} onClose={() => setModal(false)}/>
    </section>
  );
}

// ── Page ─────────────────────────────────────────────────────
function AboutPage() {
  return (
    <div style={{background:A_BG, color:A_INK, fontFamily:"'Inter Tight',system-ui,sans-serif"}}>
      <AboutHeader/>
      <AboutHero/>
      <WhySection/>
      <BeliefsSection/>
      <BuiltBySection/>
      <WhereSection/>
      <ContactSection/>
      {typeof SiteFooter !== 'undefined' ? <SiteFooter/> : null}
    </div>
  );
}

Object.assign(window, { AboutPage });