// Leviyet Studio — the design & art direction practice inside Leviyet.
// Dark editorial register (ink canvas, cream type, terracotta accent) so it
// reads as a studio, not a consultancy. Selected work is anonymised on purpose:
// client names are shared on request.

const Studio = () => {
  const disciplines = [
    { n: '01', t: 'Brand identity', d: 'Positioning, naming, verbal identity, visual system, brand book. The whole world, not just a logo.' },
    { n: '02', t: 'Packaging & objects', d: 'Structure, materials, print. Packs and vessels designed to be left out on the counter, not hidden in a cupboard.' },
    { n: '03', t: 'Campaigns & art direction', d: 'Concept, casting, shoot direction, OOH, social. One idea carried cleanly across every surface.' },
    { n: '04', t: 'Retail & spatial', d: 'Showrooms, pop-ups, event spaces, window programs. Drawn in 3D, built with the trades, opened on time.' },
    { n: '05', t: 'Merch & apparel', d: 'Apparel, vinyl, box sets, objects. Merch that works as marketing because people actually want to wear it.' },
    { n: '06', t: 'Digital & web', d: 'Sites and product experiences that carry the brand all the way to checkout. Built with the AI practice next door.' },
  ];

  const work = [
    {
      n: '01', sector: 'Fitness technology', kind: 'Retail · Campaigns · Product launches',
      title: 'A 3,400 sq ft flagship that turns a single product into a world.',
      d: "Showroom concept, retail design library and a run of athlete-led campaigns for a wall-mounted strength-training system. The space moves from a futuristic entry to an at-home demo, with a bar-style cash wrap built for a 20-minute sale.",
      stats: [['3,400', 'sq ft flagship'], ['1', 'SKU, one whole world'], ['3D', 'drawn, then built']],
      mark: 'space',
    },
    {
      n: '02', sector: 'Global sportswear · Canada', kind: 'Identity · Events · Out-of-home',
      title: 'One modular identity, from the in-store activation to the parade truck.',
      d: "A festival identity that tied a dozen partners together under one system, an adaptable event space for a pro league's first games in the country, an athlete homecoming, and a national program of window displays tuned to local moments.",
      stats: [['12+', 'partners, one system'], ['National', 'window program'], ['4', 'campaigns']],
      mark: 'festival',
    },
    {
      n: '03', sector: 'Music', kind: 'Merch · Packaging · Art direction',
      title: 'Vinyl, box sets and apparel for a fifth studio album.',
      d: 'Fifty-plus designs delivered to the creative lead, with the core collection finalised for a global release. Packaging that had to feel like the record, and apparel that had to survive the tour.',
      stats: [['50+', 'designs delivered'], ['1.2M', 'units sold worldwide'], ['Vinyl', 'to box set']],
      mark: 'record',
    },
    {
      n: '04', sector: 'Premium pet health', kind: 'Identity · Verbal · Packaging',
      title: 'An end-to-end identity that works on the vet\'s shelf and the owner\'s counter.',
      d: 'Name, tagline, mark, type, colour and packaging for a premium pet food and medicine brand that had to earn trust with clinicians and affection with owners at the same time.',
      stats: [['B2B + B2C', 'one system'], ['Name', 'to packaging'], ['Verbal', 'and visual']],
      mark: 'bond',
    },
    {
      n: '05', sector: 'Creative agency · Toronto', kind: 'Rebrand',
      title: 'A subtle shift, carried across everything.',
      d: 'A refresh rather than a reinvention: updated mark, brand guidelines, presentation system, in-house and external apparel, and web. The kind of rebrand nobody has to apologise for.',
      stats: [['Guidelines', 'deck, apparel, web'], ['Mark', 'refreshed, not replaced']],
      mark: 'chevron',
    },
  ];

  const steps = [
    { n: '01', t: 'Immerse', d: 'We read the brief, then ignore it for a week. Category, customer, shelf, home. What the brand has to live next to.' },
    { n: '02', t: 'Position', d: 'One point of view, written down. A voice with rules. The idea everything else has to answer to.' },
    { n: '03', t: 'Design', d: 'Identity, packaging, campaign, space. Two or three directions, then one, resolved all the way down to the dieline.' },
    { n: '04', t: 'Produce', d: 'Print specs, manufacturer handoff, shoot, build. We stay on until it exists in the world, not just on a slide.' },
  ];

  const css = `
    body { background: #1a1612; color: #f4efe6; }
    .we-nav { background: rgba(26,22,18,0.85); border-bottom-color: rgba(244,239,230,0.1); }
    .we-navlinks a { color: rgba(244,239,230,0.65); }
    .we-navlinks a.on, .we-navlinks a:hover { color: #f4efe6; }
    .we-navlinks a::after { background: #e8a77f; }
    .we-cta { background: #f4efe6; color: #1a1612; }
    .we-cta:hover { background: #e8a77f; color: #1a1612; }
    .we-burger span { background: #f4efe6; }
    .we-mmenu { background: rgba(26,22,18,0.96); }
    .we-mmenu-inner > a { color: #f4efe6; border-bottom-color: rgba(244,239,230,0.12); }
    .we-mmenu-inner > a.on, .we-mmenu-inner > a:hover { color: #e8a77f; }
    .we-mm-cta { background: #f4efe6; color: #1a1612 !important; }
    .we-mm-social a, .we-mm-foot { color: rgba(244,239,230,0.6); }
    .we-shead { color: #e8a77f; }
    .we-shead-line { background: #e8a77f; }
    .we-page-h1 em, .we-stitle em { color: #e8a77f; }
    .we-page-sub { color: rgba(244,239,230,0.72); }
    .we-foot, .we-foot-bot { border-top-color: rgba(244,239,230,0.12); }
    .we-foot-col a { color: #f4efe6; }
    .we-foot-col a:hover, .we-foot-bot-links a:hover { color: #e8a77f; }
    .we-foot-mark em { color: #e8a77f; }
    .we-foot-tag, .we-foot-col-h, .we-foot-bot, .we-foot-bot-links a { color: rgba(244,239,230,0.55); }

    .st-hero { padding-bottom: 40px; }
    .st-hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; }
    .st-hero-side { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.8; color: rgba(244,239,230,0.6); letter-spacing: 0.04em; }
    .st-hero-side b { color: #f4efe6; font-weight: 500; }

    .st-marquee { border-top: 1px solid rgba(244,239,230,0.12); border-bottom: 1px solid rgba(244,239,230,0.12); overflow: hidden; white-space: nowrap; padding: 18px 0; }
    .st-marquee-track { display: inline-block; animation: stmarq 40s linear infinite; }
    .st-marquee span { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 28px; letter-spacing: -0.01em; color: rgba(244,239,230,0.85); padding: 0 28px; }
    .st-marquee span::after { content: '·'; color: #e8a77f; margin-left: 56px; }
    @keyframes stmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    .st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(244,239,230,0.12); border: 1px solid rgba(244,239,230,0.12); }
    .st-cell { background: #1a1612; padding: 36px 32px 40px; transition: background 0.3s; }
    .st-cell:hover { background: #221d18; }
    .st-cell-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #e8a77f; letter-spacing: 0.15em; margin-bottom: 40px; }
    .st-cell-t { font-family: 'Instrument Serif', serif; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 400; }
    .st-cell-d { font-size: 14px; line-height: 1.6; color: rgba(244,239,230,0.65); margin: 0; }

    .st-work { display: flex; flex-direction: column; gap: 1px; background: rgba(244,239,230,0.12); border-top: 1px solid rgba(244,239,230,0.12); border-bottom: 1px solid rgba(244,239,230,0.12); }
    .st-case { background: #1a1612; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; padding: 56px 0; align-items: center; }
    .st-case:nth-child(even) .st-vis { order: 2; }
    .st-vis { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; position: relative; background: #ede5d6; }
    .st-vis svg { width: 100%; height: 100%; display: block; }
    .st-case-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #e8a77f; display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
    .st-case-meta span:not(:first-child) { color: rgba(244,239,230,0.5); }
    .st-case-t { font-family: 'Instrument Serif', serif; font-size: 44px; line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 20px; font-weight: 400; }
    .st-case-d { font-size: 15px; line-height: 1.65; color: rgba(244,239,230,0.68); margin: 0 0 28px; max-width: 540px; }
    .st-stats { display: flex; gap: 36px; flex-wrap: wrap; border-top: 1px solid rgba(244,239,230,0.12); padding-top: 20px; }
    .st-stat b { display: block; font-family: 'Instrument Serif', serif; font-size: 30px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
    .st-stat span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(244,239,230,0.5); letter-spacing: 0.06em; }
    .st-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(244,239,230,0.5); margin-top: 28px; letter-spacing: 0.04em; }

    .st-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .st-step-n { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 64px; color: #e8a77f; line-height: 1; margin-bottom: 18px; }
    .st-step-t { font-family: 'Instrument Serif', serif; font-size: 30px; margin: 0 0 10px; font-weight: 400; letter-spacing: -0.02em; }
    .st-step-d { font-size: 14px; line-height: 1.6; color: rgba(244,239,230,0.65); margin: 0; }

    .st-princ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 32px; border-top: 1px solid rgba(244,239,230,0.12); }
    .st-princ-k { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #e8a77f; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; }
    .st-princ h3 { font-family: 'Instrument Serif', serif; font-size: 26px; line-height: 1.12; font-weight: 400; margin: 0 0 8px; }
    .st-princ p { font-size: 14px; line-height: 1.6; color: rgba(244,239,230,0.65); margin: 0; }

    .st-cross { background: #f4efe6; color: #1a1612; border-radius: 24px; padding: 64px 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
    .st-cross .we-shead { color: #c8542a; } .st-cross .we-shead-line { background: #c8542a; }
    .st-cross h2 { font-family: 'Instrument Serif', serif; font-size: 52px; line-height: 1; letter-spacing: -0.025em; margin: 0 0 16px; font-weight: 400; }
    .st-cross h2 em { color: #c8542a; font-style: italic; }
    .st-cross p { font-size: 16px; line-height: 1.6; color: #4a3f33; margin: 0; }
    .st-cross ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(26,22,18,0.12); }
    .st-cross li { padding: 14px 0; border-bottom: 1px solid rgba(26,22,18,0.12); display: flex; gap: 16px; font-size: 15px; }
    .st-cross li span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c8542a; letter-spacing: 0.1em; min-width: 32px; padding-top: 4px; }

    .st-cta { padding: 40px 56px 0; max-width: 1400px; margin: 0 auto; }
    .st-cta-card { border: 1px solid rgba(244,239,230,0.18); border-radius: 24px; padding: 80px 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
    .st-cta-card::before { content: ''; position: absolute; bottom: -260px; left: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(232,167,127,0.22) 0%, transparent 70%); border-radius: 50%; }
    .st-cta-h { font-family: 'Instrument Serif', serif; font-size: 64px; line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 16px; font-weight: 400; position: relative; }
    .st-cta-h em { color: #e8a77f; font-style: italic; }
    .st-cta-p { font-size: 17px; line-height: 1.5; color: rgba(244,239,230,0.7); margin: 0; max-width: 480px; position: relative; }
    .st-cta-btn { font-size: 16px; padding: 18px 32px; background: #e8a77f; color: #1a1612; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.3s, background 0.3s; justify-self: end; position: relative; }
    .st-cta-btn:hover { transform: translateY(-3px); background: #f4efe6; }

    @media (max-width: 1024px) {
      .st-hero-row { grid-template-columns: 1fr; gap: 28px; }
      .st-grid { grid-template-columns: repeat(2, 1fr); }
      .st-case { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
      .st-case:nth-child(even) .st-vis { order: 0; }
      .st-case-t { font-size: 36px; }
      .st-steps { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
      .st-princ { grid-template-columns: 1fr; gap: 28px; }
      .st-cross { grid-template-columns: 1fr; padding: 48px 36px; gap: 32px; }
      .st-cross h2 { font-size: 42px; }
      .st-cta { padding: 24px 32px 0; }
      .st-cta-card { grid-template-columns: 1fr; padding: 56px 40px; }
      .st-cta-h { font-size: 48px; }
      .st-cta-btn { justify-self: start; }
    }
    @media (max-width: 720px) {
      .st-marquee span { font-size: 22px; padding: 0 18px; }
      .st-marquee span::after { margin-left: 36px; }
      .st-grid { grid-template-columns: 1fr; }
      .st-cell { padding: 28px 22px 32px; }
      .st-cell-t { font-size: 28px; }
      .st-case-t { font-size: 30px; }
      .st-stats { gap: 22px; }
      .st-stat b { font-size: 24px; }
      .st-steps { grid-template-columns: 1fr; }
      .st-cross { padding: 36px 24px; border-radius: 18px; }
      .st-cross h2 { font-size: 34px; }
      .st-cta { padding: 16px 20px 0; }
      .st-cta-card { padding: 40px 28px; border-radius: 18px; }
      .st-cta-h { font-size: 36px; }
      .st-cta-p { font-size: 15px; }
      .st-cta-btn { padding: 14px 24px; font-size: 14px; }
    }
  `;

  const marqueeItems = ['Identity', 'Packaging', 'Campaigns', 'Retail & spatial', 'Merch & apparel', 'Digital', 'Art direction', 'Naming', 'Brand books'];

  return (
    <>
      <window.WeNav active="studio" />
      <window.WeSEO page="studio" />
      <style>{css}</style>

      <section className="we-page-hero st-hero">
        <div className="we-shead"><div className="we-shead-line"></div>Leviyet Studio</div>
        <div className="st-hero-row">
          <div>
            <h1 className="we-page-h1">Brands, packs and spaces <em>built to be kept.</em></h1>
            <p className="we-page-sub">The design and art direction practice inside Leviyet. Identity, packaging, campaigns, retail and merch for brands that want to be displayed, not just bought.</p>
          </div>
          <div className="st-hero-side">
            <div><b>Toronto</b> · 43.6532° N, 79.3832° W</div>
            <div>Lead designer on every job. <b>No handoffs.</b></div>
            <div>Identity → packaging → campaign → space</div>
            <div>Production-ready, <b>not just presentation-ready.</b></div>
          </div>
        </div>
      </section>

      <div className="st-marquee" aria-hidden="true">
        <div className="st-marquee-track">
          {[...marqueeItems, ...marqueeItems].map((m, i) => <span key={i}>{m}</span>)}
        </div>
      </div>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>What we make</div>
        <h2 className="we-stitle">Six disciplines. <em>One lead designer</em> across all of them.</h2>
        <div className="st-grid">
          {disciplines.map(s => (
            <div className="st-cell" key={s.n}>
              <div className="st-cell-n">— {s.n}</div>
              <h3 className="st-cell-t">{s.t}</h3>
              <p className="st-cell-d">{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>Selected work</div>
        <h2 className="we-stitle">Retail floors, parade trucks, record sleeves, <em>vet shelves.</em></h2>
        <div className="st-work">
          {work.map(w => (
            <article className="st-case" key={w.n}>
              <div className="st-vis"><window.StudioMark kind={w.mark} /></div>
              <div>
                <div className="st-case-meta"><span>— {w.n}</span><span>{w.sector}</span><span>{w.kind}</span></div>
                <h3 className="st-case-t">{w.title}</h3>
                <p className="st-case-d">{w.d}</p>
                <div className="st-stats">
                  {w.stats.map(([v, l]) => <div className="st-stat" key={l}><b>{v}</b><span>{l}</span></div>)}
                </div>
              </div>
            </article>
          ))}
        </div>
        <div className="st-note">// Client names, full case studies and process files are shared on request.</div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>How the studio works</div>
        <h2 className="we-stitle">Four moves. <em>Immerse, position, design, produce.</em></h2>
        <div className="st-steps">
          {steps.map(s => (
            <div key={s.n}>
              <div className="st-step-n">{s.n}</div>
              <h3 className="st-step-t">{s.t}</h3>
              <p className="st-step-d">{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="we-section">
        <div className="we-shead"><div className="we-shead-line"></div>// what we believe</div>
        <h2 className="we-stitle">Quiet on the outside. <em>Generous on the inside.</em></h2>
        <div className="st-princ">
          <div>
            <div className="st-princ-k">// designed to be kept</div>
            <h3>The pack that stays on the counter.</h3>
            <p>People decant ugly packaging into nice containers and the brand disappears. We design the thing they'd rather leave out.</p>
          </div>
          <div>
            <div className="st-princ-k">// one wink, never two</div>
            <h3>A voice with rules.</h3>
            <p>Copy and art are the two tools. Confident and dry beats cute. Every piece gets one idea, resolved properly.</p>
          </div>
          <div>
            <div className="st-princ-k">// production is design</div>
            <h3>If it can't be made, it isn't finished.</h3>
            <p>Dielines, materials, print runs, manufacturer lead times. We design to the deadline the factory sets, not the one the deck sets.</p>
          </div>
        </div>
      </section>

      <section className="we-section">
        <div className="st-cross">
          <div>
            <div className="we-shead"><div className="we-shead-line"></div>Studio × Leviyet</div>
            <h2>Design and growth, <em>under one roof.</em></h2>
            <p>The studio builds the brand. The rest of Leviyet builds what runs it: the site, the content engine, the ads, the support agent. Same people, one conversation, no agency relay.</p>
          </div>
          <ul>
            <li><span>01</span>Identity and packaging from the studio</li>
            <li><span>02</span>Web, DTC and subscription flows from the build team</li>
            <li><span>03</span>Launch content, paid and SEO that keep the voice</li>
            <li><span>04</span>One retainer after launch. <a href="/services" style={{color:'#c8542a',textDecoration:'underline',textUnderlineOffset:'3px'}}>See services →</a></li>
          </ul>
        </div>
      </section>

      <section className="st-cta">
        <div className="st-cta-card">
          <div>
            <h2 className="st-cta-h">Have a brand <em>to build?</em></h2>
            <p className="st-cta-p">Tell us the launch date and what it has to live next to. 30 minutes, no deck. We'll bring the questions.</p>
          </div>
          <a className="st-cta-btn" href="/contact">Talk to the studio →</a>
        </div>
      </section>

      <window.WeFooter />
    </>
  );
};

// Abstract visuals for anonymised work. Cream card, ink + terracotta shapes.
const StudioMark = ({ kind }) => {
  const ink = '#1a1612', terra = '#c8542a', peach = '#e8a77f', cream = '#f4efe6';
  if (kind === 'space') return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill="#ede5d6" />
      <g fill="none" stroke={ink} strokeWidth="1.5">
        <path d="M70 200 L200 130 L330 200 L200 270 Z" />
        <path d="M70 200 L70 150 L200 80 L330 150 L330 200" />
        <path d="M200 130 L200 80" /><path d="M200 270 L200 230" strokeDasharray="3 4" />
      </g>
      <rect x="150" y="150" width="100" height="44" fill={ink} transform="skewY(-28) translate(0,110)" />
      <circle cx="320" cy="70" r="26" fill={terra} />
      <text x="24" y="40" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={ink} letterSpacing="2">FLAGSHIP · 3,400 SQ FT</text>
    </svg>
  );
  if (kind === 'festival') return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill="#ede5d6" />
      <g>
        <rect x="40" y="60" width="70" height="70" rx="6" fill={terra} />
        <circle cx="180" cy="95" r="35" fill={ink} />
        <path d="M230 130 L300 60 L330 130 Z" fill={peach} />
        <rect x="60" y="170" width="200" height="54" rx="27" fill={ink} />
        <circle cx="330" cy="200" r="30" fill="none" stroke={ink} strokeWidth="2" />
        <circle cx="330" cy="200" r="12" fill={terra} />
      </g>
      <text x="24" y="270" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={ink} letterSpacing="2">ONE SYSTEM · TWELVE PARTNERS</text>
    </svg>
  );
  if (kind === 'record') return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill={ink} />
      <circle cx="200" cy="150" r="112" fill="#2a241e" />
      <circle cx="200" cy="150" r="104" fill="none" stroke="#3a322a" strokeWidth="1" />
      <circle cx="200" cy="150" r="88" fill="none" stroke="#3a322a" strokeWidth="1" />
      <circle cx="200" cy="150" r="72" fill="none" stroke="#3a322a" strokeWidth="1" />
      <circle cx="200" cy="150" r="40" fill={terra} />
      <circle cx="200" cy="150" r="5" fill={ink} />
      <rect x="60" y="40" width="40" height="40" fill={cream} />
      <text x="24" y="276" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={cream} letterSpacing="2">1.2M UNITS · CORE COLLECTION</text>
    </svg>
  );
  if (kind === 'bond') return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill="#ede5d6" />
      <circle cx="150" cy="150" r="70" fill="none" stroke={ink} strokeWidth="2" />
      <circle cx="235" cy="150" r="70" fill={terra} fillOpacity="0.92" />
      <circle cx="235" cy="150" r="70" fill="none" stroke={ink} strokeWidth="1" />
      <rect x="40" y="250" width="120" height="8" fill={ink} />
      <rect x="170" y="250" width="40" height="8" fill={terra} />
      <text x="24" y="40" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={ink} letterSpacing="2">CLINIC + HOME · ONE IDENTITY</text>
    </svg>
  );
  return (
    <svg viewBox="0 0 400 300">
      <rect width="400" height="300" fill="#ede5d6" />
      <path d="M90 60 L170 150 L90 240" fill="none" stroke={ink} strokeWidth="26" strokeLinejoin="miter" />
      <path d="M190 60 L270 150 L190 240" fill="none" stroke={terra} strokeWidth="26" />
      <path d="M290 60 L370 150 L290 240" fill="none" stroke={ink} strokeWidth="2" strokeDasharray="4 5" />
      <text x="24" y="40" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={ink} letterSpacing="2">REFRESH · NOT REINVENTION</text>
    </svg>
  );
};

window.Studio = Studio;
window.StudioMark = StudioMark;