/* MELOUAR — Manuscript site
   Single long vertical scroll. The real practice, real projects.
   Mobile-friendly. */

const PROJECTS = [
{ ref: "PA/001", name: "Agios Ioannis Historical Centre Regeneration", type: "Urban regeneration", loc: "Larnaca, CY", year: "2012 — ongoing", scale: "Historic core", role: "Lead designers · supervising construction", group: "regen", tone: "wide" },
{ ref: "PA/002", name: "Ayia Napa Urban Centre Regeneration", type: "Urban regeneration", loc: "Famagusta District, CY", year: "2016 — ongoing", scale: "Town centre", role: "Lead designers · supervising construction", group: "regen", tone: "square" },
{ ref: "PA/003", name: "Xylofagou Historical Centre Regeneration", type: "Urban regeneration", loc: "Larnaca District, CY", year: "2018 — ongoing", scale: "Historic core", role: "Lead designers", group: "regen", tone: "default" },
{ ref: "PA/004", name: "Pyrga Historical Centre Regeneration", type: "Urban regeneration", loc: "Larnaca District, CY", year: "2018 — 2026", scale: "Historic core", role: "Lead designers", group: "regen", tone: "default" },
{ ref: "PA/005", name: "Voroklini Historical Centre Regeneration", type: "Urban regeneration", loc: "Larnaca District, CY", year: "2025 — ongoing", scale: "Historic core", role: "Lead designers", group: "regen", tone: "default" },
{ ref: "ML/004", name: "Limassol Multimodal Sustainable Transport & Mobility Hub", type: "Mobility & infrastructure", loc: "Limassol, CY", year: "2026 — ongoing", scale: "Urban interchange", role: "Design team", group: "mob", tone: "wide" },
{ ref: "ML/005", name: "NDLGO (EOA) Alambra Service Center Renovation", type: "Buildings", loc: "Nicosia District, CY", year: "2026 — ongoing", scale: "Service hub", role: "Consulting designers · NDLGO — Nicosia District Local Government Organisation (EOA)", group: "bldg", tone: "default" },
{ ref: "PA/006", name: "Military Buildings", type: "Buildings", loc: "Classified", year: "2024 — ongoing", scale: "Multiple buildings", role: "Design team", group: "bldg", tone: "default" },
{ ref: "PA/007", name: "Ayia Napa Parks Complex Upgrade", type: "Landscape", loc: "Famagusta District, CY", year: "2018 — ongoing", scale: "Sculpture · Botanical · Palaeontological", role: "Lead designers", group: "land", tone: "wide" },
{ ref: "PA/008", name: "Xylofagou Panagia Forest Renewal", type: "Landscape", loc: "Larnaca District, CY", year: "2018 — ongoing", scale: "Forest park", role: "Lead designers", group: "land", tone: "default" },
{ ref: "ML/001", name: "Larnaca Pilot Land-Readjustment Studies", type: "Masterplanning", loc: "Larnaca District, CY", year: "2025 — 2026", scale: "Three different sites", role: "Expert advisors", group: "plan", tone: "square" },
{ ref: "ML/002", name: "Limassol Pilot Land-Readjustment Studies", type: "Masterplanning", loc: "Limassol District, CY", year: "2025 — 2026", scale: "Three different sites", role: "Expert advisors", group: "plan", tone: "default" },
{ ref: "ML/003", name: "Nicosia & Paphos Pilot Land-Readjustment Studies", type: "Masterplanning", loc: "Nicosia & Paphos Districts, CY", year: "2025 — 2026", scale: "Three different sites", role: "Expert advisors", group: "plan", tone: "default" },
{ ref: "ML/006", name: "Askas Listed Building Restoration", type: "Restoration", loc: "Pitsilia, CY", year: "2024 — ongoing", scale: "Agrotourism", role: "Lead designers", group: "rest", tone: "default" },
{ ref: "ML/007", name: "Askas Ancient Monument Restoration", type: "Restoration", loc: "Pitsilia, CY", year: "2024 — ongoing", scale: "Agrotourism", role: "Lead designers", group: "rest", tone: "default" },
{ ref: "ML/008", name: "Old Nicosia Listed Shop Restoration", type: "Restoration", loc: "Nicosia, CY", year: "2024 — ongoing", scale: "Shop", role: "Lead designers", group: "rest", tone: "default" },
{ ref: "ML/009", name: "Old Nicosia Listed Building Restoration", type: "Restoration", loc: "Nicosia, CY", year: "2024 — ongoing", scale: "Student house", role: "Lead designers", group: "rest", tone: "default" }];


const GROUPS = [
{ key: "plan", title: "Masterplanning" },
{ key: "mob", title: "Mobility & infrastructure" },
{ key: "regen", title: "Urban regeneration" },
{ key: "land", title: "Landscape" },
{ key: "bldg", title: "Buildings" },
{ key: "rest", title: "Restoration" }];


const Mark = () =>
<span className="ml"><span>M</span><span className="plus">+</span><span>L</span></span>;


const ProjectCard = ({ p }) =>
<div className="project-card">
    <div className={`ph ${p.tone}`}>
      <div className="num">{p.ref}</div>
      <div className="tag">{p.loc} · {p.type}</div>
    </div>
    <div className="ref">{p.ref}{p.note ? ` · ${p.note}` : ''}</div>
    <div className="name">{p.name}</div>
    <div className="meta">
      <div className="k">Type</div><div className="v">{p.type}</div>
      <div className="k">Location</div><div className="v">{p.loc}</div>
      <div className="k">Scale</div><div className="v">{p.scale}</div>
      <div className="k">Year</div><div className="v">{p.year}</div>
    </div>
  </div>;


const MarginNote = ({ cite, title, children }) =>
<div className="margin-note">
    {cite && <span className="ref">{cite}</span>}
    {title && <strong>{title}</strong>}
    {children}
  </div>;


const Folio = ({ time, edition }) =>
<div className="folio">
    <div className="left">
      <span><Mark /></span>
    </div>
    <div className="center">MELOUAR</div>
    <div className="right">
      <span className="hide-mobile">{time}</span>
      <span className="muted hide-mobile">·</span>
      <span className="hide-mobile">{edition}</span>
      <span className="muted hide-mobile">·</span>
      <ThemeToggle />
    </div>
  </div>;


const ThemeToggle = () => {
  const [theme, setTheme] = React.useState(() =>
  document.documentElement.getAttribute('data-theme') || 'light'
  );
  const apply = (t) => {
    setTheme(t);
    document.documentElement.setAttribute('data-theme', t);
    try {localStorage.setItem('melouar-theme', t);} catch (e) {}
  };
  return (
    <span className="theme-toggle" role="group" aria-label="Theme">
      <button
        type="button"
        className={theme === 'light' ? 'on' : 'off'}
        onClick={() => apply('light')}
        aria-pressed={theme === 'light'}>
        Light</button>
      <span className="sep">·</span>
      <button
        type="button"
        className={theme === 'dark' ? 'on' : 'off'}
        onClick={() => apply('dark')}
        aria-pressed={theme === 'dark'}>
        Dark</button>
    </span>);

};


const App = () => {
  const [progress, setProgress] = React.useState(0);
  const [time, setTime] = React.useState('');
  const [edition, setEdition] = React.useState('');

  React.useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      const p = max > 0 ? window.scrollY / max : 0;
      setProgress(Math.min(1, Math.max(0, p)));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getHours()).padStart(2, '0');
      const mm = String(d.getMinutes()).padStart(2, '0');
      setTime(`${hh}:${mm}`);
      const yy = d.getFullYear();
      const mo = String(d.getMonth() + 1).padStart(2, '0');
      setEdition(`Edition ${yy} / ${mo}`);
    };
    tick();
    const id = setInterval(tick, 30000);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  // featured projects for the side-column cards (one card per slot, pinned by ref)
  const featRegen  = PROJECTS.find((p) => p.ref === 'PA/001'); // Ch I left  — Agios Ioannis (flagship regen)
  const featPlan   = PROJECTS.find((p) => p.ref === 'ML/001'); // Ch I right — Larnaca Pilot (planning anchor)
  const featMob    = PROJECTS.find((p) => p.ref === 'ML/002'); // Ch II left — Limassol Pilot (territorial scale)
  const featBldg   = PROJECTS.find((p) => p.ref === 'ML/007'); // Ch II right — Askas Ancient Monument (building scale)
  const featRegen2 = PROJECTS.find((p) => p.ref === 'PA/002'); // Ch V left  — Ayia Napa (flagship regen)
  const featPlan3  = PROJECTS.find((p) => p.ref === 'ML/003'); // Ch V right — Nicosia & Paphos Pilot

  return (
    <>
      <Folio time={time} edition={edition} />
      <div className="progress-rail"><div className="fill" style={{ width: `${progress * 100}%` }} /></div>
      <div className="side-rail left">MELOUAR · {edition}</div>
      <div className="side-rail right">A Single Manuscript</div>

      {/* ─────── COVER ─────── */}
      <header className="page cover" data-screen-label="01 Cover">
        <div className="meta-top">
          <div>FOLIO 01</div>
          <div className="meta-top__primary">Mesaritis &amp; Loizou Associates LLC<br />TWO PARTNERS. ONE PRACTICE.</div>
          <div className="meta-top__right">Read end-to-end</div>
        </div>
        <h1>
          Urbanism<br />
          <span className="plus">+</span>architecture.
        </h1>
        <p className="lede">
          Twenty years of practice. Urban design and architecture, treated as a single discipline. Trusted across the public and private sector, on projects from the masterplan to the building.
        </p>
        <div className="meta-bot">
          <div><div className="label">Practice</div><div>George &amp; Georgia</div></div>
          <div><div className="label">Studio</div><div>Nicosia · CY</div></div>
          <div><div className="label">Working</div><div>Cyprus &amp; abroad</div></div>
          <div><div className="label">Recognition</div><div>Awarded in national<br />&amp; international competitions</div></div>
        </div>
      </header>

      <main className="page">

        {/* PULL QUOTE */}
        <section className="section">
          <div className="pull-quote reveal">
            What we build is a <em>long</em> obligation.<br />
            <span style={{ display: 'inline-block', marginTop: '0.4em', letterSpacing: '-0.02em' }}>We are entrusted with a piece of <em>life</em>.</span>
            <span className="attr">— Studio Position, Article I</span>
          </div>
        </section>

        {/* ─────── CHAPTER I — POSITION ─────── */}
        <section className="section" data-screen-label="02 Position">
          <div className="col-bleed chapter reveal">
            <div className="num">Chapter I</div>
            <h2>The <em>position</em>.</h2>
            <div className="rule" />
          </div>
        </section>

        <section className="section reveal" data-screen-label="03 Position essay">
          <aside className="col-left" style={{ paddingTop: '8px' }}>
            <MarginNote cite="§ 1.1" title="On the practice">
              The studio is what we have built to take on the projects we want — cities and the buildings inside them, from the strategic question to the construction detail. Twenty years of judgement, two partners, one continuous body of work.
            </MarginNote>
            <div style={{ height: 32 }} />
            {featRegen && <ProjectCard p={featRegen} />}
          </aside>

          <div className="col-main">
            <div className="text-block dropcap">
              <p>
                <span className="leadin">We practise architecture</span> as one discipline with urban design. The masterplan and the building are the same question at different scales: what should be here, for whom, and how should it work with what is already around it.
              </p>
              <p>
                Every project starts with the brief, the site and the people involved. We read all three carefully, set the strategy early, and stay with the project from the first decision to the last detail.
              </p>
              <p>
                We work directly with our clients, we move quickly where speed matters and slowly where care matters, and we measure ourselves on the result: a project that performs, for everyone with a stake in it.
              </p>
              <p>What we build has consequences that outlast us. A building, a square, a part of the city, once made, shapes the lives of the people who use it for decades. We take that as the measure of seriousness — not the size of the project, not the visibility of the commission, but whether what we build deserves to be there.

              </p>
            </div>
          </div>

          <aside className="col-right" style={{ paddingTop: '8px' }}>
            {featPlan && <ProjectCard p={featPlan} />}
            <div style={{ height: 32 }} />
            <MarginNote cite="§ 1.2" title="Geography">
              Based in Nicosia, practising across Cyprus and the wider region. This island has formed us. Geography is not the limit; the brief is.
            </MarginNote>
          </aside>
        </section>

        {/* PULL QUOTE — the breadth defense, placed before The Work */}
        <section className="section">
          <div className="pull-quote reveal">
            Working at <em>every</em> scale<br />
            is not a strategy.<br />
            It is what <em>twenty years</em> of doing this job seriously looks like.
            <span className="attr">— Studio Position, Article II</span>
          </div>
        </section>

        {/* ─────── CHAPTER II — METHOD ─────── */}
        <section className="section" data-screen-label="04 Method">
          <div className="col-bleed chapter reveal">
            <div className="num">Chapter II</div>
            <h2>The <em>method</em>.</h2>
            <div className="rule" />
          </div>
        </section>

        <section className="section reveal" data-screen-label="05 Method essay">
          <aside className="col-left">
            <MarginNote cite="§ 2.1" title="Every scale">
              The studio works from the regional plan to the joint detail. It is the same discipline, applied at different scales.
            </MarginNote>
            <div style={{ height: 32 }} />
            {featMob && <ProjectCard p={featMob} />}
            <div style={{ height: 32 }} />
            <MarginNote cite="§ 2.2" title="Design">
              Design is a proposition, not a menu. A position is reached through long argument — with the brief, the site, and our own habits — and once reached, we make its case and defend it.
            </MarginNote>
          </aside>

          <div className="col-main">
            <div className="text-block dropcap">
              <p>
                <span className="leadin">Every project begins</span> with the place. The plan of a town, the way a road meets a square, the way a building meets the ground. All these can be read, and most of them already contain the answer to what should happen next. Our task is to find it, test it, and put it on the table.
              </p>
              <p>We carry the strategic and the building level with the same rigour, by the same people. A masterplan that no one can build is not a masterplan; a building that ignores its surroundings is rarely a good building. The two questions are one question, and we answer them as one.

              </p>
              <p>
                The form, the section, the way light enters and people move through, the order of solid and opening, the relationship to the street — these are the design questions, and they are answered drawing by drawing.
              </p>
              <p>
                A building is also where the strategic question is tested. The brief, the site, the use, the cost, the construction, the experience of being inside it — all have to resolve into one object. We carry it from the first sketch to the last detail, with the same partners holding the project throughout.
              </p>
              <p>
                We are sincere with clients about what is possible and what is worth doing. The end result is the test, and we are willing to be measured by it.
              </p>
              <p>
                Every drawing that leaves the studio has been made or checked by a partner. There is no team behind the team — the people you brief are the people who deliver.
              </p>
            </div>
          </div>

          <aside className="col-right">
            <MarginNote cite="§ 2.3" title="Sincerity">
              We try to understand what a client actually needs the project to deliver, not only what they first ask for. The two are rarely the same. Honesty about scope, programme and budget at the outset saves months at the end.
            </MarginNote>
            <div style={{ height: 32 }} />
            {featBldg && <ProjectCard p={featBldg} />}
            <div style={{ height: 32 }} />
            <MarginNote cite="§ 2.4" title="Relationships">
              We build long relationships, not single transactions. The same clients, consultants and associates stay with us over years, because the result is better when relationships are real.
            </MarginNote>
          </aside>
        </section>

        {/* PULL QUOTE 2 */}
        <section className="section">
          <div className="pull-quote reveal">
            What <em>belongs</em> here.<br />
            For <em>whom</em>.<br />
            On what <em>terms</em>.
            <span className="attr">— Studio Position, Article III</span>
          </div>
        </section>

        {/* ─────── CHAPTER III — WORK ─────── */}
        <section className="section" data-screen-label="06 Work">
          <div className="col-bleed chapter reveal">
            <div className="num">Chapter III</div>
            <h2>The <em>work</em>.</h2>
            <div className="rule" />
          </div>
        </section>

        <section className="section reveal">
          <div className="col-bleed">
            <div className="text-block" style={{ marginBottom: 32, maxWidth: 720 }}>
              <p>Current projects, grouped by type. Ordered from urban to architectural scale. Projects marked PA originate with our long-running partnership, Polytia Armos.</p>
            </div>

            {GROUPS.map((g) => {
              const rows = PROJECTS.filter((p) => p.group === g.key);
              return (
                <div key={g.key} style={{ marginBottom: 56 }}>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: '60px 1fr auto',
                    gap: 24,
                    alignItems: 'baseline',
                    padding: '14px 0',
                    borderTop: '2px solid #000',
                    borderBottom: '0.5px solid #000',
                    fontSize: 11,
                    letterSpacing: '0.22em',
                    textTransform: 'uppercase',
                    fontWeight: 500
                  }}>
                    <div style={{ color: '#6a6a6a' }}>§ 3.{GROUPS.findIndex((x) => x.key === g.key) + 1}</div>
                    <div>{g.title}</div>
                    <div style={{ color: '#6a6a6a' }}>{rows.length || '—'} {rows.length === 1 ? 'project' : 'projects'}</div>
                  </div>
                  {rows.length > 0 ?
                  <div className="index-table" style={{ borderTop: 0 }}>
                      {rows.map((p) =>
                    <div className="index-row" key={p.ref}>
                          <div className="ref">{p.ref}</div>
                          <div className="t">{p.name}{p.note && <span style={{ color: '#6a6a6a', fontWeight: 300, fontSize: '0.42em', letterSpacing: '0.2em', textTransform: 'uppercase', marginLeft: 12 }}>{p.note}</span>}</div>
                          <div className="meta-cell">{p.loc}</div>
                          <div className="meta-cell">{p.scale}</div>
                          <div className="y">{p.year}</div>
                        </div>
                    )}
                    </div> :

                  <div style={{
                    padding: '32px 0 16px',
                    fontFamily: 'Times New Roman, serif',
                    fontSize: 18,
                    lineHeight: 1.55,
                    color: '#6a6a6a',
                    maxWidth: 560
                  }}>
                      <em>{g.empty}</em>
                    </div>
                  }
                </div>);

            })}
          </div>
        </section>

        {/* PULL QUOTE — Article IV, placed before Partners */}
        <section className="section">
          <div className="pull-quote reveal">
            We arrive <em>prepared</em>.<br />
            We stay through the <em>hard parts</em>.<br />
            We <em>finish</em> what we start.
            <span className="attr">— Studio Position, Article IV</span>
          </div>
        </section>

        {/* ─────── CHAPTER IV — PARTNERS ─────── */}
        <section className="section" data-screen-label="07 Partners">
          <div className="col-bleed chapter reveal">
            <div className="num">Chapter IV</div>
            <h2>The <em>partners</em>.</h2>
            <div className="rule" />
          </div>
        </section>

        <section className="section reveal">
          <div className="people">
            <article className="partner-card">
              <div className="portrait" style={{ display: 'none' }}><div className="tag">Portrait — G. Mesaritis</div></div>
              <h3>George Mesaritis</h3>
              <div className="role">FOUNDING PARTNER · CIVIL ENGINEER, URBANIST</div>
              <div className="bio">
                Civil engineer and multidisciplinary urbanist (NTUA, Athens). Twenty years across urban regeneration, masterplanning, urban design, sustainable mobility, planning policy, heritage, construction supervision and project management — synthesising strategy and detail into spatial decisions. Sustainable mobility and masterplanning have been a continuous focus. Team member on award-winning national and international competition entries. Member of ETEK, the Cyprus Association of Transportation Engineers, and the Cyprus Association of Civil Engineers.
              </div>
            </article>
            <article className="partner-card">
              <div className="portrait" style={{ display: 'none' }}><div className="tag">Portrait — G. Loizou</div></div>
              <h3>Georgia Loizou</h3>
              <div className="role">Founding Partner · Architect, Urban Designer</div>
              <div className="bio">
                Architect and urban designer (NTUA, Athens · MArch, UCL). Twenty years across architecture, urban design, public realm and landscape, heritage and team management — across every scale from the masterplan to the building detail. Public realm and architectural restoration have been a continuous focus. Awarded in national and international architectural competitions. Visiting studio tutor and lecturer in architecture and urbanism. Member of ETEK and the Cyprus Architects Association.
              </div>
            </article>
          </div>
          <div className="col-bleed" style={{ borderTop: '0.5px solid #000', paddingTop: 18, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#6a6a6a', textAlign: 'center', marginTop: -8 }}>
            George and Georgia are partners in life. They have practised together since the beginning of their careers.
          </div>
        </section>

        {/* PULL QUOTE — the name decoded, between Partners and Background */}
        <section className="section">
          <div className="pull-quote reveal name-decode">
            <div className="line"><strong>ME</strong>saritis</div>
            <div className="line"><strong>LO</strong>izou</div>
            <div className="line"><strong>U</strong>rbanism</div>
            <div className="line"><strong>AR</strong>chitecture</div>
            <span className="attr">— The name, decoded</span>
          </div>
        </section>

        {/* ─────── CHAPTER V — BACKGROUND ─────── */}
        <section className="section" data-screen-label="08 Background">
          <div className="col-bleed chapter reveal">
            <div className="num">Chapter V</div>
            <h2>The <em>background</em>.</h2>
            <div className="rule" />
          </div>
        </section>

        <section className="section reveal">
          <aside className="col-left">
            <MarginNote cite="§ 5.1" title="Polytia Armos">
              Founded by architect Nicos Mesaritis. The partnership in which George and Georgia have practised for the last two decades. Several projects shown here originate with Polytia Armos and are credited accordingly.
            </MarginNote>
            <div style={{ height: 32 }} />
            {featRegen2 && <ProjectCard p={featRegen2} />}
            <div style={{ height: 32 }} />
            <MarginNote cite="§ 5.2" title="NTUA">
              National Technical University of Athens. Where both partners trained — Georgia as an architect (graduating 2005), George as a civil engineer who defended his 2004 diploma in the Department of Urban and Regional Planning, on the role of the public realm in a reunified Nicosia. A continuous reference for the practice.
            </MarginNote>
          </aside>

          <div className="col-main">
            <div className="text-block dropcap">
              <p>
                <span className="leadin">George and Georgia</span> have practised together for over twenty years, most of it within <em>Polytia Armos</em>. MELOUAR is the natural next step — a limited company under their two names, formed to focus the practice and the way they want to run it. Between them they have led, co-led or contributed to projects across architecture, urban regeneration, masterplanning, public realm, sustainable mobility, built heritage, construction supervision, research and teaching — for private clients, public bodies and institutions, in Cyprus and beyond.
              </p>
              <p>Two partners, two starting disciplines, both refusing the boundaries of their original training. The questions opened in their theses — what a divided city should become, what role the public realm plays in holding a place together, how the contemporary city is remade by what cannot be drawn — still drive the practice, and are why it has so consistently centred on the public realm, on the small and medium-sized city, and on the territory beyond the single building.

              </p>
              <p>Throughout their careers, George and Georgia have collaborated closely with senior architecture and planning figures on urban centre masterplans, regeneration studies, traditional settlement plans, high-rise buildings and large-scale housing. Those collaborations shaped the practice's approach to both public and private commissions alike - where holding a clear position through many voices, and across a wide range of building types, has been the discipline.

              </p>
              <p>Twenty years of hard-won experience, earned together, is what MELOUAR is now built to carry forward.

              </p>
            </div>
          </div>

          <aside className="col-right">
            <MarginNote cite="§ 5.3" title="MELOUAR">
              Mesaritis · Loizou · Urbanism · Architecture. The two partners' surnames combined with the two disciplines they practice as one.
            </MarginNote>
            <div style={{ height: 32 }} />
            {featPlan3 && <ProjectCard p={featPlan3} />}
            <div style={{ height: 32 }} />
            <MarginNote cite="§ 5.4" title="The Bartlett">
              UCL's school of architecture, in London. Where Georgia continued after NTUA. Her MArch thesis examined how information and communication technology was reshaping the form of the city — a question that has stayed with the practice.
            </MarginNote>
          </aside>
        </section>

        {/* PULL QUOTE — Article V, placed before Disciplines */}
        <section className="section">
          <div className="pull-quote reveal">
            Space is shaped by<br />
            sustained <em>practice</em> and the<br />
            <em>knowledge</em> that derives from it.
            <span className="attr">— Studio Position, Article V</span>
          </div>
        </section>

        {/* ─────── CHAPTER VI — DISCIPLINES ─────── */}
        <section className="section" data-screen-label="09 Disciplines">
          <div className="col-bleed chapter reveal">
            <div className="num">Chapter VI</div>
            <h2>The <em>disciplines</em>.</h2>
            <div className="rule" />
          </div>
        </section>

        <section className="section reveal">
          <div className="col-bleed">
            <div className="text-block" style={{ marginBottom: 40, maxWidth: 720 }}>
              <p>The full range of disciplines the practice covers, in plain language. Some are central to most projects; others come in where a brief requires them.</p>
            </div>

            {(() => {
              const DISCIPLINES = [
              { t: 'Architectural design', d: 'Buildings for public, institutional, residential, commercial, educational, cultural, recreational, industrial and mixed use, treated as part of their urban setting — not as isolated objects.' },
              { t: 'Public realm & landscape', d: 'Streets, squares, parks, plazas, pedestrianised zones, street furniture, paving, green infrastructure, and the landscape that holds them — designed for daily public use.' },
              { t: 'Built heritage & restoration', d: 'Listed buildings, vernacular architecture, monuments, traditional construction techniques, heritage impact assessments — preservation, conservation, renovation, adaptive reuse.' },
              { t: 'Masterplanning & urban design', d: 'Territorial framework, city and town masterplans, district and neighbourhood structure plans, historic-core and traditional settlements, urban design framework & codes, phasing strategy.' },
              { t: 'Spatial planning & policy', d: 'Spatial frameworks, planning policy, regulatory and planning advisory at municipal, regional and European level — the rules and frameworks within which places are made.' },
              { t: 'Urban regeneration', d: 'Town-centre revitalisation, post-industrial sites, public-space upgrades, infill, adaptive reuse, mixed-use intensification — acting on existing fabric, adding without erasing.' },
              { t: 'Sustainable mobility', d: 'Pedestrianisation, cycling infrastructure, public transport, traffic calming, accessibility, parking strategies, mobility hubs, and the planning frameworks that support them.' },
              { t: 'Urban analysis & diagnostics', d: 'Reading the city — land-use, mobility, public-realm audits, urban morphology, heritage surveys, built form & spatial structure, social & cultural, environmental, economic.' },
              { t: 'Feasibility & site studies', d: 'Site selection, highest-and-best-use (HBU) analysis, capacity and yield, pre-acquisition advisory, site analysis, briefing, programming, feasibility, scenario studies, due-diligence.' },
              { t: 'Stakeholder engagement', d: 'Public consultation, workshops, charrettes, community planning, coordination with public bodies, regulators, owners and other organisations involved in a project.' },
              { t: 'Multidisciplinary coordination', d: 'Holding and steering the consultant teams — civil, structural, MEP, landscape, transport, environmental, lighting — that complex projects require.' },
              { t: 'Construction supervision & delivery', d: 'Tender preparation, contract administration, site supervision & instructions, material & design approvals, payment certifications, technical control, snagging and completion.' },
              { t: 'Project & team management', d: 'Programme & milestone planning, budget & cost control, risk & quality management, team leadership & resource allocation, decision-making & accountability, monitoring & reporting.' },
              { t: 'Research & expert advisory', d: 'Policy, European projects, comparative & benchmarking studies, standards & guidelines development, evaluations and technical advisory for public and private bodies.' }];

              return (
                <div className="disciplines-grid">
                  {DISCIPLINES.map((d, i) =>
                  <div className="discipline" key={d.t}>
                      <div className="disc-num">§ 6.{String(i + 1).padStart(2, '0')}</div>
                      <div className="disc-title">{d.t}</div>
                      <div className="disc-desc">{d.d}</div>
                    </div>
                  )}
                </div>);

            })()}
          </div>
        </section>

        {/* CONTACT BAND */}
        <section className="section" data-screen-label="10 Contact">
          <div className="contact-band reveal">
            <div>
              <h3>Write<br />to us.</h3>
              <p className="lede">
                For new projects, a short paragraph is enough — the site, the brief, and what you are trying to achieve. We respond within five working days.
              </p>
            </div>
            <div className="blocks">
              <div className="block"><div className="k">Studio</div><div className="v">08 Kosta Ourani St.<br />1076 Nicosia<br />Cyprus</div></div>
              <div className="block"><div className="k">General</div><div className="v">studio@melouar.com</div></div>
              <div className="block"><div className="k">Press</div><div className="v">press@melouar.com</div></div>
              <div className="block"><div className="k">Telephone</div><div className="v">+357 22 262763</div></div>
            </div>
          </div>
        </section>

        {/* COLOPHON */}
        <section className="section" data-screen-label="11 End">
          <div className="colophon">
            <div className="end">M+L<br />At Work.</div>
            <div className="meta">
              <div><div className="k">Document</div><div>{edition}</div></div>
              <div><div className="k">Set in</div><div>Helvetica Neue 200—500<br />Times New Roman 400</div></div>
              <div><div className="k">Palette</div><div>Black &amp; White</div></div>
              <div><div className="k">Copyright</div><div>Mesaritis &amp; Loizou<br />Associates LLC</div></div>
            </div>
          </div>
        </section>
      </main>
    </>);

};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);