/* global React, SiteHeader, Breadcrumbs, SectionHead, PageCTA, SiteFooter */

function PageMattiNotkola() {
  return (<>
    <SiteHeader activeTop="meista" />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Tietoa meistä",href:"Tietoa Meista.html"},{label:"Matti Notkola",href:"#"}]} />

    {/* Schema.org Person */}
    <script type="application/ld+json" dangerouslySetInnerHTML={{__html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Matti Notkola",
      "jobTitle": "Toimitusjohtaja ja perustaja",
      "worksFor": { "@type": "Organization", "name": "Arvomeklarit Oy" },
      "telephone": "+358 440 663 011",
      "email": "matti.notkola@arvomeklarit.fi",
      "sameAs": "https://linkedin.com/in/matti-notkola-a8188b12",
      "description": "Olen vakuutusmeklari pörssiyhtiöiden ja pk-yritysten talous- ja HR-johdolle. Yli 15 vuoden kokemus vakuutusalalta neljästä eri näkökulmasta.",
      "knowsAbout": ["Vastuuvakuutukset","Keskeytysvakuutukset","Kuljetusvakuutukset","Henkilöstövakuutukset","D&O"],
    })}} />

    <section className="profile-hero">
      <div className="container">
        <div className="profile-hero-grid">
          <div className="profile-photo">
            <img src="assets/matti-notkola.png" alt="Matti Notkola" />
            <p className="profile-photo-caption">Tähän tulee Matti Notkolan ammattikuva.</p>
          </div>
          <div>
            <p className="eyebrow">Johto</p>
            <h1>Matti Notkola</h1>
            <p className="profile-role">Toimitusjohtaja ja perustaja, Arvomeklarit Oy</p>
            <blockquote className="profile-lede">
              Vakuutus on bisneskysymys, ei vakuutuskysymys.
            </blockquote>
            <div className="profile-contact">
              <a href="tel:+358440663011" className="tnum">+358 (0) 440 663 011</a>
              <a href="mailto:matti.notkola@arvomeklarit.fi">matti.notkola@arvomeklarit.fi</a>
              <a href="https://linkedin.com/in/matti-notkola-a8188b12" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            </div>
            <a href="Yhteystiedot.html#kalenteri" className="btn-primary profile-cta">Varaa veloitukseton kartoitus kalenterista</a>
          </div>
        </div>
      </div>
    </section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Mitä teen" title="Vakuutusmeklari pk-yritysten johdolle" />
      <div className="story-prose">
        <p>Olen vakuutusmeklari pk-yritysten talous- ja HR-johdolle.</p>
        <p>Käytännössä työni on neljää asiaa: kilpailutan vakuutukset, hoidan ne vuoden mittaan, edustan asiakasta vahingoissa ja kartoitan riskit ennen kuin niistä tulee laskuja. Useimmiten en puhu vakuutuksista — puhun liikevoitosta, kassavirrasta ja siitä, mitä CFO joutuu hallitusraportoinnissa selittämään.</p>
      </div>
      <div className="work-grid">
        <article className="work-card">
          <h3><a href="Vakuutusten Kilpailutus.html">Vakuutusten kilpailutus →</a></h3>
          <p>Käyn läpi koko vakuutusturvasi, neuvottelen markkinoiden kanssa ja tuon eteesi vertailukelpoiset tarjoukset. Asiakkaiden tyypillinen säästö on 10–35 %.</p>
        </article>
        <article className="work-card">
          <h3><a href="Vakuutusten Hoito.html">Vakuutusten hoito →</a></h3>
          <p>Vuosipalaverit, muutosten päivitykset, ehtotulkinnat. Saat vastauksen saman päivän aikana — ja vakuutuksesi pysyvät ajan tasalla, vaikka liiketoimintasi muuttuu.</p>
        </article>
        <article className="work-card">
          <h3><a href="Vahinkojen Hoito.html">Vahinkokäsittely →</a></h3>
          <p>Kun jotain sattuu, edustan sinua suoraan vakuutusyhtiöön päin. Käymme korvauspäätökset läpi rivien välistä — useimmiten neuvottelen paremman lopputuloksen.</p>
        </article>
        <article className="work-card">
          <h3>Riskienhallinta</h3>
          <p>Ennaltaehkäisevä työ: mitä riskejä liiketoimintasi sisältää, mihin niistä vakuutus vastaa, ja mitä jää itsekantoon. Tarvittaessa kartoitukset paikan päällä.</p>
        </article>
      </div>
    </div></section>

    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Tausta" title="Kolme näkökulmaa vakuutusalaan" />
      <div className="story-prose">
        <p>Olen viettänyt yli 15 vuotta vakuutusalalla, ja olen nähnyt sen kolmesta täysin eri näkökulmasta:</p>
      </div>
      <div className="perspectives">
        <article className="persp-card">
          <h3>Vakuutusyhtiön puolelta</h3>
          <p>Aloitin urani suomalaisessa vakuutusyhtiössä yritysasiakkaiden parissa. Lyhyt mutta tärkeä vaihe — opin sisältä, miten vakuutusyhtiöt hinnoittelevat riskejä, mihin neuvotteluvaraa oikeasti jää, ja mitä rivien välissä lukee.</p>
        </article>
        <article className="persp-card">
          <h3>Meklarina</h3>
          <p>Sen jälkeen siirryin meklarialalle ja työskentelin kahdessa eri meklariyhtiössä. Opin näkemään saman tilanteen asiakkaan, ei yhtiön, näkökulmasta — mutta huomasin myös, että meklariyhtiöiden sisäiset rakenteet eivät aina mahdollistaneet sitä pitkäjänteistä asiakassuhdetta jota oikeasti tarvittiin.</p>
        </article>
        <article className="persp-card">
          <h3>Asianajopuolelta</h3>
          <p>Tein noin kaksi vuotta kansainvälisten yritysasiakkaiden parissa asianajotoimistossa. Opin, että vakuutus on aina sopimus — ja sopimuksen sanamuodot ratkaisevat kun joku menee pieleen.</p>
        </article>
      </div>
      <div className="story-prose" style={{marginTop:32}}>
        <p>Yli kymmenen vuotta sitten perustimme Arvomeklarit Oy:n yhdessä Jari Salmen kanssa. Yhdistämme nämä kolme näkökulmaa palvellaksemme yritysasiakkaita, jotka eivät tyydy yhteen vakuutusyhtiön tarjoukseen tai yleisluontoiseen meklaripalveluun.</p>
      </div>
    </div></section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Erikoisalueet" title="Mille toimialoille teen töitä" />
      <div className="story-prose">
        <p>Olen tehnyt urani aikana kaikkia mahdollisia vakuutuksia, mutta syvin osaamiseni on neljällä alueella:</p>
      </div>
      <div className="specialties">
        <article className="spec-card">
          <h3>Vastuuvakuutukset</h3>
          <p>Toiminnan vastuu, tuotevastuu, johdon vastuu (D&amp;O), hallinnon vastuu fuusioissa ja yritysjärjestelyissä. Vastuuvakuutusten ehdot ovat usein epäselviä — niiden tulkinta ratkaisee vahinkotilanteissa.</p>
        </article>
        <article className="spec-card">
          <h3>Keskeytysvakuutukset</h3>
          <p>Tuotannon ja liiketoiminnan keskeytys, riippuvuusvakuutukset, kyberkeskeytykset. Erityisen tärkeä alue tuotanto- ja logistiikkayrityksille.</p>
        </article>
        <article className="spec-card">
          <h3>Kuljetus ja logistiikka</h3>
          <p>Kalustovakuutukset, lastin kuljetusvakuutukset, kuljetussopimusten vastuukysymykset, kansainvälinen kuljetusvakuutus. Olen tehnyt töitä alalla yli kymmenen vuotta ja tunnen toimialan riskiprofiilin.</p>
        </article>
        <article className="spec-card">
          <h3>Henkilöstövakuutukset</h3>
          <p>Työtapaturmavakuutukset, ryhmäsairauskuluvakuutukset, matkustajavakuutukset, johdon henkilövakuutukset.</p>
        </article>
      </div>
    </div></section>

    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Asiakkaani" title="Tuotantoa, kuljetusta, ICT:tä ja suunnittelua" />
      <div className="story-prose">
        <p>Asiakkaani ovat 30 työntekijän rakennusliikkeitä, 500 hengen logistiikkayrityksiä, kasvavia ICT-taloja ja perheomistuksessa olevia tuotantoyrityksiä toiselta vuosikymmeneltä.</p>
        <p>Painopiste on neljällä toimialalla: tuotanto, kuljetus, ICT ja konsultointi sekä suunnittelu ja arkkitehtuuri. Yhteistä kaikille on, että he haluavat vakuutusten ohi keskustelua liikevoitosta, kassavirrasta ja hallitusraportoinnista.</p>
      </div>
    </div></section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Työtapa" title="Miten minun kanssani työskennellään" />
      <div className="story-prose">
        <p>Asiakkaani sanovat että minun kanssani työskentely on helppoa. Se ei ole sattumaa. Olen rakentanut työtapaani niin että:</p>
      </div>
      <ul className="ways-list">
        <li>Saat vastauksen saman päivän aikana arkisin</li>
        <li>Vahinko- tai kriisitilanteessa saat minut tai Jarin kiinni suoraan, et puhelinvaihteen tai vaihtuvan asianhoitajan kautta</li>
        <li>Käymme yrityksesi vakuutustilanteen läpi vuosittain ja päivitämme turvan vastaamaan muuttuneita olosuhteita</li>
        <li>Vakuutusyhtiön korvauspäätös ei ole lopullinen sana — käymme epäselvät kohdat aina läpi rivien välistä, ja useimmiten neuvottelemme paremman lopputuloksen. Lakimiestoimistovuoteni ja vakuutusyhtiötaustani auttavat täällä konkreettisesti</li>
      </ul>
    </div></section>

    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Pätevyys" title="Pätevyys ja taustat" />
      <ul className="creds-list">
        <li><strong>Broker</strong> — Vakuutusmeklaritutkinto, Finanssivalvonnan rekisterissä</li>
        <li><strong>M.Sc (Econ.)</strong> — Kauppatieteiden maisteri</li>
        <li>Yli 15 vuoden kokemus vakuutusalalta neljästä eri näkökulmasta</li>
        <li>Yli 10 vuotta meklariyrittäjänä (Arvomeklarit Oy)</li>
        <li>Helsingin seudun kauppakamarin jäsen</li>
      </ul>
    </div></section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Yhteys" title="Tavoitettavissa" />
      <dl className="facts">
        <div><dt>Puhelin</dt><dd><a href="tel:+358440663011" className="tnum">+358 (0) 440 663 011</a></dd></div>
        <div><dt>Sähköposti</dt><dd><a href="mailto:matti.notkola@arvomeklarit.fi">matti.notkola@arvomeklarit.fi</a></dd></div>
        <div><dt>LinkedIn</dt><dd><a href="https://linkedin.com/in/matti-notkola-a8188b12" target="_blank" rel="noopener noreferrer">linkedin.com/in/matti-notkola-a8188b12</a></dd></div>
        <div><dt>Toimisto</dt><dd>Vanha Turuntie 14 B 1, 02700 Kauniainen</dd></div>
      </dl>
    </div></section>

    <PageCTA title="Varaa 30 minuutin keskustelu kalenterista" body="Veloitukseton kartoitus — Helsingissä, Kauniaisissa tai etänä." />
    <SiteFooter />
    <style>{`
      .profile-hero{padding:72px 0 56px;background:var(--bg-2);border-bottom:1px solid var(--line)}
      .profile-hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
      @media(min-width:880px){.profile-hero-grid{grid-template-columns:340px 1fr;gap:64px}}
      .profile-photo{display:flex;flex-direction:column;align-items:center;gap:12px}
      .profile-photo img{width:280px;height:340px;object-fit:cover;object-position:center top;border-radius:6px;background:var(--bg-3)}
      @media(min-width:880px){.profile-photo img{width:100%;height:400px}}
      .profile-photo-caption{font-size:12px;color:var(--ink-2);text-align:center;font-style:italic;margin:0;max-width:240px}
      .profile-hero h1{font-size:clamp(40px,5.5vw,56px);margin:8px 0 6px;letter-spacing:-.02em}
      .profile-role{font-size:14px;color:var(--gold);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin:0 0 28px}
      .profile-lede{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.4vw,40px);line-height:1.25;color:var(--ink);margin:0 0 32px;max-width:640px;padding-left:24px;border-left:3px solid var(--gold);quotes:"\\201C" "\\201D"}
      .profile-lede::before{content:open-quote}.profile-lede::after{content:close-quote}
      .profile-contact{display:flex;flex-wrap:wrap;gap:14px 24px;font-size:15px;margin-bottom:24px}
      .profile-contact a{color:var(--ink);font-weight:500;transition:color var(--t)}
      .profile-contact a:hover{color:var(--gold)}
      .profile-cta{display:inline-block;margin-top:8px}
      .story-prose{max-width:680px}
      .story-prose p{margin:0 0 1.4em;font-size:18px;line-height:1.7;color:var(--ink)}
      .perspectives,.specialties{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px;max-width:1080px}
      @media(min-width:760px){.perspectives{grid-template-columns:repeat(3,1fr)}.specialties{grid-template-columns:repeat(2,1fr);gap:24px}}
      .work-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px;max-width:1080px}
      @media(min-width:760px){.work-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
      .work-card{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:28px}
      .work-card h3{font-size:20px;margin:0 0 12px;color:var(--ink);letter-spacing:-.01em}
      .work-card h3 a{color:var(--ink);text-decoration:none;transition:color var(--t)}
      .work-card h3 a:hover{color:var(--gold)}
      .work-card p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0}
      .persp-card,.spec-card{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:28px}
      .persp-card h3,.spec-card h3{font-size:20px;margin:0 0 12px;color:var(--ink);letter-spacing:-.01em}
      .persp-card p,.spec-card p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0}
      .ways-list,.creds-list{list-style:none;padding:0;margin:0;max-width:780px;display:flex;flex-direction:column;gap:14px}
      .ways-list li,.creds-list li{font-size:17px;line-height:1.6;color:var(--ink);padding-left:24px;position:relative}
      .ways-list li::before,.creds-list li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:1px;background:var(--gold)}
      .creds-list li strong{font-weight:600}
      .facts{display:grid;grid-template-columns:1fr;gap:0;max-width:780px;border-top:1px solid var(--line);margin:0}
      .facts>div{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
      @media(min-width:600px){.facts>div{grid-template-columns:160px 1fr;gap:32px}}
      .facts dt{font-size:13px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;margin:0;font-weight:500}
      .facts dd{font-size:16px;color:var(--ink);margin:0;line-height:1.5}
      .facts dd a{color:var(--ink);transition:color var(--t)}.facts dd a:hover{color:var(--gold)}
    `}</style>
  </>);
}

function PageJariSalmi() {
  const cv = [
    { y: "2014–", t: "Hallituksen puheenjohtaja & perustaja, Arvomeklarit Oy", b: "Vastaan strategisesta suunnasta, hallituksen vastuukysymyksistä sekä rakennus- ja ICT-toimialoista. Asiakassuhteissa erikoistunut hallinnollisesti monimutkaisiin järjestelyihin." },
    { y: "Aiempi ura", t: "Vakuutusala, sekä yhtiössä että meklarina", b: "Yli 30 vuoden kokemus alalta. Aiempi taustani vakuutusyhtiössä antaa saman näkökulman kuin Matilla — tunnen sen, miten yritysasiakkaita oikeasti palvellaan." },
    { y: "Koulutus", t: "Vakuutusmeklaritutkinto (Broker, YVTS), TVEAT 2025, JET", b: "Vakuutusmeklarin tutkintojen lisäksi Turvallisuusalan erikoisammattitutkinto (TVEAT 2025) ja Johtamisen erikoisammattitutkinto (JET). Jatkuva ammatillinen kehittyminen — erityisesti rakennusalan vastuukysymykset ja hallinnon vastuuvakuutukset." },
  ];
  const facts = [
    { l: "Tutkinto", v: "Vakuutusmeklaritutkinto (Broker, YVTS), TVEAT 2025, JET" },
    { l: "Rekisteröinti", v: "Finanssivalvonnan vakuutusedustajarekisteri" },
    { l: "Erikoisalueet", v: "Rakennusala, ICT, hallinnon vastuu" },
    { l: "Kieliasiat", v: "Suomi (äidinkieli), englanti" },
    { l: "Sijainti", v: "Pääkonttori Kauniainen, asiakastapaamiset ympäri Suomen" },
  ];
  const quotes = [
    "Hyvä vakuutuspäätös tehdään hyvällä tiedolla — ei kiireellä.",
    "Rakennusalalla rivien välit ratkaisevat. Ne on luettava ennen allekirjoitusta.",
    "ICT-alalla hyvä kybervakuutus ei ole tuote — se on prosessi.",
  ];
  return (<>
    <SiteHeader activeTop="meista" />
    <Breadcrumbs items={[{label:"Etusivu",href:"Etusivu.html"},{label:"Tietoa meistä",href:"Tietoa Meista.html"},{label:"Jari Salmi",href:"#"}]} />

    <section className="profile-hero">
      <div className="container">
        <div className="profile-hero-grid">
          <div className="profile-photo">
            <img src="assets/jari-salmi.png" alt="Jari Salmi, hallituksen puheenjohtaja" />
          </div>
          <div>
            <p className="eyebrow">Johto</p>
            <h1>Jari Salmi</h1>
            <p className="profile-role">COB & Partner — Arvomeklarit Oy</p>
            <blockquote className="profile-lede">{quotes[0]}</blockquote>
            <div className="profile-contact">
              <a href="tel:+358505669160" className="tnum">+358 (0) 505 669 160</a>
              <a href="mailto:jari.salmi@arvomeklarit.fi">jari.salmi@arvomeklarit.fi</a>
              <a href="https://www.linkedin.com/in/jari-salmi-4b449443/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            </div>
            <a href="Yhteystiedot.html#kalenteri" className="btn-primary profile-cta">Varaa veloitukseton kartoitus kalenterista</a>
          </div>
        </div>
      </div>
    </section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Tausta" title="Yli 30 vuotta vakuutusalalla" />
      <div className="story-prose">
        <p>Aloitin vakuutusalalla yli kolme vuosikymmentä sitten. Olen ehtinyt nähdä alan eri puolilta — vakuutusyhtiön sisältä yritysasiakaspuolella, sekä meklariyrittäjänä Arvomeklareilla.</p>
        <p>Tämä tarjoaa harvinaisen näkökulman. Tiedän, miten yhtiöiden hinnoittelu syntyy. Tiedän, mitä neuvottelija voi luvata ja mitä ei. Tiedän, milloin ehtoteksti on kirjoitettu vakuutuksenottajan eduksi ja milloin sitä vastaan.</p>
        <p className="story-emphasis">Hyvä vakuutuspäätös tehdään hyvällä tiedolla — ei kiireellä.</p>
        <p>Erikoistumiseni on rakennusala, ICT ja hallituksen vastuukysymykset (D&amp;O). Nämä ovat aloja, joilla virhe vakuutusehdoissa voi tulla todella kalliiksi vasta vuosien päästä — ja silloin sopimusta on usein liian myöhäistä korjata.</p>
        <p>Asiakkaitamme on rakennusliikkeistä, jotka käsittelevät kymmeniä urakkasopimuksia kuukaudessa, ICT-yrityksistä, joilla on miljoonien arvon SaaS-asiakaskanta, sekä pörssiyhtiöistä, joiden hallituksen vastuukysymykset ovat monimutkaisia.</p>
      </div>
    </div></section>

    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Vaiheet" title="Ura ja koulutus" />
      <ol className="cv-list">{cv.map((c,i)=>(
        <li key={i}>
          <span className="cv-year tnum">{c.y}</span>
          <div><h3>{c.t}</h3><p>{c.b}</p></div>
        </li>
      ))}</ol>
    </div></section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Pikatiedot" title="Faktat" />
      <dl className="facts">{facts.map((f,i)=>(
        <div key={i}><dt>{f.l}</dt><dd>{f.v}</dd></div>
      ))}</dl>
    </div></section>

    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Sanontoja" title="Mistä Jari puhuu, kun puhuu vakuutuksista" />
      <ul className="quotes">{quotes.map((q,i)=>(
        <li key={i}>&ldquo;{q}&rdquo;</li>
      ))}</ul>
    </div></section>

    <PageCTA title="Haluatko keskustella Jarin kanssa?" body="Veloitukseton 30 minuutin kartoitus — Helsingissä, Kauniaisissa tai etänä." />
    <SiteFooter />
    <style>{`
      .profile-hero{padding:64px 0 32px;background:var(--bg-2);border-bottom:1px solid var(--line)}
      .profile-hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
      @media(min-width:760px){.profile-hero-grid{grid-template-columns:280px 1fr;gap:48px}}
      .profile-photo{border-radius:50%;overflow:hidden;width:200px;height:200px;background:var(--bg-3)}
      @media(min-width:760px){.profile-photo{width:260px;height:260px}}
      .profile-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
      .profile-hero h1{font-size:clamp(36px,5vw,52px);margin:8px 0 6px}
      .profile-role{font-size:14px;color:var(--gold);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin:0 0 24px}
      .profile-lede{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;color:var(--ink);margin:0 0 28px;max-width:580px;padding-left:20px;border-left:3px solid var(--gold);quotes:"\\201C" "\\201D"}
      .profile-lede::before{content:open-quote}.profile-lede::after{content:close-quote}
      .profile-contact{display:flex;flex-wrap:wrap;gap:16px 24px;font-size:15px}
      .profile-contact a{color:var(--ink);font-weight:500;transition:color var(--t)}
      .profile-contact a:hover{color:var(--gold)}
      .story-prose{max-width:680px}
      .story-prose p{margin:0 0 1.4em;font-size:18px;line-height:1.7;color:var(--ink)}
      .story-prose p.story-emphasis{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;padding:8px 0 8px 24px;border-left:3px solid var(--gold);margin:24px 0 32px}
      .cv-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:24px;max-width:880px}
      .cv-list li{display:grid;grid-template-columns:1fr;gap:8px;padding:24px 28px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px}
      @media(min-width:680px){.cv-list li{grid-template-columns:140px 1fr;gap:32px}}
      .cv-year{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--gold);letter-spacing:.02em}
      .cv-list h3{font-size:18px;margin:0 0 6px}
      .cv-list p{font-size:15px;color:var(--ink-2);line-height:1.65;margin:0}
      .facts{display:grid;grid-template-columns:1fr;gap:0;max-width:780px;border-top:1px solid var(--line)}
      .facts>div{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
      @media(min-width:600px){.facts>div{grid-template-columns:200px 1fr;gap:32px}}
      .facts dt{font-size:13px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;margin:0;font-weight:500}
      .facts dd{font-size:16px;color:var(--ink);margin:0;line-height:1.5}
      .quotes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:20px;max-width:860px}
      @media(min-width:760px){.quotes{grid-template-columns:1fr 1fr}}
      .quotes li{padding:28px 32px;background:var(--bg);border:1px solid var(--line);border-radius:10px;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.45;color:var(--ink)}
    `}</style>
  </>);
}

window.PageMattiNotkola = PageMattiNotkola;
window.PageJariSalmi = PageJariSalmi;
