/* global React, LineIcon */
const { useEffect, useState } = React;

function useScrolled(threshold = 12) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);
  return scrolled;
}

function SiteHeader({ activeTop }) {
  const scrolled = useScrolled(8);
  const [open, setOpen] = useState(false);
  const [openMenu, setOpenMenu] = useState(null);

  const navItems = [
    {
      key: "palvelut", label: "Palvelut",
      items: [
        { label: "Vakuutusten kilpailutus", href: "Vakuutusten Kilpailutus.html" },
        { label: "Vakuutusten hoito", href: "Vakuutusten Hoito.html" },
        { label: "Vahinkojen hoito", href: "Vahinkojen Hoito.html" },
        { label: "Lakimiespalvelut", href: "Lakimiespalvelut.html" },
        { label: "Hinnoittelu", href: "Hinnoittelu.html" },
      ],
    },
    {
      key: "toimialat", label: "Toimialat",
      items: [
        { label: "Kuljetusala", href: "Kuljetusala.html" },
        { label: "Rakennusala", href: "Rakennusala.html" },
        { label: "Tuotanto", href: "Tuotanto.html" },
        { label: "ICT ja konsultointi", href: "ICT.html" },
        { label: "Suunnittelu ja arkkitehtuuri", href: "Suunnittelu.html" },
        { label: "Finanssi ja kiinteistö", href: "Finanssi.html" },
      ],
    },
    {
      key: "tarinat", label: "Tarinat",
      items: [
        { label: "Asiakastarinat", href: "Asiakastarinat.html" },
        { label: "UKK", href: "UKK.html" },
        { label: "Säästölaskuri", href: "Saastolaskuri.html" },
        { label: "Oppaat", href: "Oppaat.html" },
      ],
    },
  ];

  return (
    <header className={"hdr" + (scrolled ? " hdr-scrolled" : "")}>
      <div className="container hdr-inner">
        <a href="Etusivu.html" className="hdr-logo" aria-label="Arvomeklarit etusivu">
          <img src="assets/arvomeklarit-logo.png" alt="Arvomeklarit" className="hdr-logo-img" />
        </a>

        <nav className="hdr-nav" aria-label="Päänavigaatio">
          {navItems.map((nav) => (
            <div
              key={nav.key}
              className={"hdr-nav-item" + (activeTop === nav.key ? " is-active" : "")}
              onMouseEnter={() => setOpenMenu(nav.key)}
              onMouseLeave={() => setOpenMenu(null)}
            >
              <button
                className="hdr-nav-btn"
                aria-expanded={openMenu === nav.key}
                aria-haspopup="true"
                onClick={() => setOpenMenu(openMenu === nav.key ? null : nav.key)}
              >
                {nav.label}
                <LineIcon name="chevron" size={14} />
              </button>
              {openMenu === nav.key && (
                <div className="hdr-dropdown" role="menu">
                  {nav.items.map((it) => (
                    <a key={it.label} href={it.href} role="menuitem" className="hdr-dropdown-item">
                      {it.label}
                    </a>
                  ))}
                </div>
              )}
            </div>
          ))}
          <a href="Tietoa Meista.html" className="hdr-nav-link">Tietoa meistä</a>
          <a href="Yhteystiedot.html" className="hdr-nav-link">Yhteystiedot</a>
        </nav>

        <div className="hdr-actions">
          <a href="Yhteystiedot.html#kalenteri" className="btn btn-primary hdr-cta">Varaa tapaaminen</a>
          <button className="hdr-burger" aria-label={open ? "Sulje" : "Valikko"} onClick={() => setOpen(!open)}>
            <LineIcon name={open ? "close" : "menu"} size={24} />
          </button>
        </div>
      </div>

      {open && (
        <div className="hdr-mobile">
          <a href="Vakuutusten Kilpailutus.html">Vakuutusten kilpailutus</a>
          <a href="Vakuutusten Hoito.html">Vakuutusten hoito</a>
          <a href="Vahinkojen Hoito.html">Vahinkojen hoito</a>
          <a href="Lakimiespalvelut.html">Lakimiespalvelut</a>
          <a href="Kuljetusala.html">Kuljetusala</a>
          <a href="Rakennusala.html">Rakennusala</a>
          <a href="Tuotanto.html">Tuotanto</a>
          <a href="ICT.html">ICT ja konsultointi</a>
          <a href="Suunnittelu.html">Suunnittelu ja arkkitehtuuri</a>
          <a href="Finanssi.html">Finanssi ja kiinteistö</a>
          <a href="Saastolaskuri.html">Säästölaskuri</a>
          <a href="Oppaat.html">Oppaat</a>
          <a href="Yhteystiedot.html#kalenteri" className="btn btn-primary" style={{ marginTop: 8, alignSelf: "flex-start" }}>Varaa tapaaminen</a>
        </div>
      )}
    </header>
  );
}

function Breadcrumbs({ items }) {
  return (
    <nav className="bcrumb container" aria-label="Murupolku">
      <ol>
        {items.map((it, i) => (
          <li key={i}>
            {i < items.length - 1 ? <a href={it.href}>{it.label}</a> : <span aria-current="page">{it.label}</span>}
            {i < items.length - 1 && <span className="bcrumb-sep" aria-hidden="true">/</span>}
          </li>
        ))}
      </ol>
    </nav>
  );
}

function PageHero({ eyebrow, title, intro, ctaLabel = "Varaa veloitukseton kartoitus", ctaHref = "#cta" }) {
  return (
    <section className="phero" aria-labelledby="phero-title">
      <div className="container phero-inner">
        <p className="eyebrow">{eyebrow}</p>
        <h1 id="phero-title">{title}</h1>
        <p className="lead phero-lead">{intro}</p>
        <a href={ctaHref} className="btn btn-primary phero-cta">
          {ctaLabel} <LineIcon name="arrow" size={16} />
        </a>
      </div>
      <div className="phero-shape" aria-hidden="true">
        <svg viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax slice">
          <defs>
            <radialGradient id="pg" cx="100%" cy="100%" r="80%">
              <stop offset="0%" stopColor="#C9A050" stopOpacity="0.16" />
              <stop offset="60%" stopColor="#C9A050" stopOpacity="0.05" />
              <stop offset="100%" stopColor="#C9A050" stopOpacity="0" />
            </radialGradient>
          </defs>
          <circle cx="600" cy="600" r="540" fill="url(#pg)" />
          <circle cx="600" cy="600" r="380" fill="none" stroke="#C9A050" strokeWidth="0.5" strokeOpacity="0.22" />
        </svg>
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, title, lead }) {
  return (
    <div className="sec-head">
      {eyebrow && <p className="eyebrow">{eyebrow}</p>}
      <h2>{title}</h2>
      {lead && <p className="lead">{lead}</p>}
    </div>
  );
}

function SituationCards({ items }) {
  return (
    <div className="sit-grid">
      {items.map((it, i) => (
        <article key={i} className="sit-card">
          <span className="sit-num tnum">{String(i + 1).padStart(2, "0")}</span>
          <h3>{it.title}</h3>
          <p>{it.body}</p>
        </article>
      ))}
    </div>
  );
}

function ProcessSteps({ steps }) {
  return (
    <ol className="proc">
      {steps.map((s, i) => (
        <li key={i} className="proc-step">
          <div className="proc-num"><span className="tnum">{String(i + 1).padStart(2, "0")}</span></div>
          <div className="proc-body">
            <h3>{s.title}{s.dur && <span className="proc-dur"> · {s.dur}</span>}</h3>
            <p>{s.body}</p>
          </div>
        </li>
      ))}
    </ol>
  );
}

function CheckList({ items }) {
  return (
    <ul className="checks" role="list">
      {items.map((it, i) => (
        <li key={i}>
          <span className="check-mark" aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
          <span>{it}</span>
        </li>
      ))}
    </ul>
  );
}

function PricingNote({ title, body, footnote }) {
  return (
    <aside className="pnote">
      <p className="eyebrow">{title}</p>
      <div className="pnote-body" dangerouslySetInnerHTML={{ __html: body }} />
      {footnote && <p className="pnote-foot">{footnote}</p>}
    </aside>
  );
}

function MiniStory({ quote, author, meta }) {
  return (
    <figure className="ministory">
      <span className="ministory-mark" aria-hidden="true">“</span>
      <blockquote>{quote}</blockquote>
      <figcaption>
        <strong>{author}</strong>
        {meta && <span className="ministory-meta"> · {meta}</span>}
      </figcaption>
    </figure>
  );
}

function FAQ({ items, schemaId = "faq-schema" }) {
  const [open, setOpen] = useState(0);
  return (
    <>
      <ul className="faq" role="list">
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <li key={i} className={"faq-item" + (isOpen ? " is-open" : "")}>
              <button className="faq-q" aria-expanded={isOpen} onClick={() => setOpen(isOpen ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon" aria-hidden="true">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M6 8l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </button>
              {isOpen && <div className="faq-a"><p>{it.a}</p></div>}
            </li>
          );
        })}
      </ul>

      <script type="application/ld+json" id={schemaId} dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": items.map((it) => ({
            "@type": "Question",
            "name": it.q,
            "acceptedAnswer": { "@type": "Answer", "text": it.a },
          })),
        }),
      }} />
    </>
  );
}

function ToimialaOppaatRivi() {
  return (
    <section className="tor" aria-label="Aiheeseen liittyvät oppaat">
      <div className="container">
        <p className="tor-eyebrow">Lue myös</p>
        <ul className="tor-list" role="list">
          <li><a href="Oppaat.html#valintaopas"><span className="tor-num tnum">01</span> <span className="tor-title">Vakuutusmeklarin valintaopas</span> <span className="tor-meta">PDF · 12 s.</span></a></li>
          <li><a href="Oppaat.html#vahinkochecklist"><span className="tor-num tnum">02</span> <span className="tor-title">Vahinkotilanteen tarkistuslista</span> <span className="tor-meta">PDF · A4</span></a></li>
          <li><a href="Oppaat.html#kartoitus"><span className="tor-num tnum">03</span> <span className="tor-title">Vakuutuskartoituksen 5-vaiheinen prosessi</span> <span className="tor-meta">Sähköpostisarja</span></a></li>
        </ul>
      </div>
    </section>
  );
}

function PageCTA({ title, body }) {
  return (
    <section className="cta" id="cta" aria-labelledby="pcta">
      <div className="container cta-grid">
        <div>
          <p className="eyebrow cta-eyebrow">Aloita</p>
          <h2 id="pcta">{title}</h2>
          <p className="cta-sub">30 minuuttia. Veloitukseton. Ei sitoumusta.</p>
          {body && <p className="cta-body">{body}</p>}
        </div>
        <div className="cta-actions">
          <a href="Yhteystiedot.html" className="btn btn-gold cta-primary">
            Varaa aika kalenterista <LineIcon name="arrow" size={16} />
          </a>
          <div className="cta-alts">
            <a href="tel:+358102742750" className="cta-alt">
              <LineIcon name="phone" size={18} />
              <span>
                <span className="cta-alt-label">Kauniainen</span>
                <span className="cta-alt-num">+358 (0) 10 274 2750</span>
              </span>
            </a>
            <a href="tel:+358102742754" className="cta-alt">
              <LineIcon name="phone" size={18} />
              <span>
                <span className="cta-alt-label">Helsinki</span>
                <span className="cta-alt-num">+358 (0) 10 274 2754</span>
              </span>
            </a>
            <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="cta-alt">
              <LineIcon name="phone" size={18} />
              <span>
                <span className="cta-alt-label">Sähköposti</span>
                <span className="cta-alt-num">asiakaspalvelu@arvomeklarit.fi</span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div className="cta-corner" aria-hidden="true">
        <svg viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax slice">
          <circle cx="600" cy="600" r="500" fill="none" stroke="#C9A050" strokeOpacity="0.18" strokeWidth="0.5" />
          <circle cx="600" cy="600" r="340" fill="none" stroke="#C9A050" strokeOpacity="0.14" strokeWidth="0.5" />
        </svg>
      </div>
    </section>
  );
}

function SiteFooter() {
  const year = new Date().getFullYear();
  return (
    <footer className="ftr">
      <div className="container ftr-grid-simple">
        <div>
          <a href="Etusivu.html" className="ftr-logo">
            <img src="assets/arvomeklarit-logo.png" alt="Arvomeklarit" className="ftr-logo-img" />
          </a>
          <p className="ftr-tag">Suomalainen vakuutusmeklari yrityksille — pörssiyhtiöistä perheyrityksiin.</p>
        </div>
        <div className="ftr-cols">
          <div>
            <h4 className="ftr-h">Kauniainen</h4>
            <p className="ftr-addr">Vanha Turuntie 14 B 1<br />02700 Kauniainen</p>
            <a href="tel:+358102742750" className="ftr-tel tnum">+358 (0) 10 274 2750</a>
          </div>
          <div>
            <h4 className="ftr-h">Helsinki</h4>
            <p className="ftr-addr">Lampputie 12 C<br />00750 Helsinki</p>
            <a href="tel:+358102742754" className="ftr-tel tnum">+358 (0) 10 274 2754</a>
          </div>
          <div>
            <h4 className="ftr-h">Yhteys</h4>
            <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="ftr-mail">asiakaspalvelu@arvomeklarit.fi</a>
          </div>
        </div>
      </div>
      <div className="container ftr-base">
        <div className="ftr-legal">
          <a href="Tietoa Meista.html">Tietoa meistä</a>
          <a href="Hinnoittelu.html">Hinnoittelu</a>
          <a href="UKK.html">UKK</a>
          <a href="Asiakastarinat.html">Asiakastarinat</a>
          <a href="Saastolaskuri.html">Säästölaskuri</a>
          <a href="Oppaat.html">Oppaat</a>
          <a href="Yhteystiedot.html">Yhteystiedot</a>
          <a href="Tietosuoja.html">Tietosuoja</a>
          <a href="Kayttoehdot.html">Käyttöehdot</a>
        </div>
        <p className="ftr-copy">© {year} Arvomeklarit Oy</p>
      </div>
    </footer>
  );
}

window.SiteHeader = SiteHeader;
window.Breadcrumbs = Breadcrumbs;
window.PageHero = PageHero;
window.SectionHead = SectionHead;
window.SituationCards = SituationCards;
window.ProcessSteps = ProcessSteps;
window.CheckList = CheckList;
window.PricingNote = PricingNote;
window.MiniStory = MiniStory;
window.FAQ = FAQ;
window.PageCTA = PageCTA;
window.ToimialaOppaatRivi = ToimialaOppaatRivi;
window.SiteFooter = SiteFooter;

if (!document.getElementById("inner-css")) {
  const s = document.createElement("style");
  s.id = "inner-css";
  s.textContent = `
    /* Header (matches etusivu) */
    .hdr { position: sticky; top: 0; z-index: 50; background: transparent; transition: background var(--t), border-color var(--t), backdrop-filter var(--t); border-bottom: 1px solid transparent; }
    .hdr-scrolled { background: rgba(250,247,242,.85); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom-color: var(--line); }
    .hdr-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 24px; }
    .hdr-logo { display: inline-flex; align-items: center; }
    .hdr-logo-img { height: 44px; width: auto; }
    @media (min-width: 720px) { .hdr-logo-img { height: 52px; } }
    .hdr-nav { display: none; align-items: center; gap: 6px; }
    @media (min-width: 960px) { .hdr-nav { display: inline-flex; } }
    .hdr-nav-item { position: relative; }
    .hdr-nav-item.is-active .hdr-nav-btn { color: var(--gold); }
    .hdr-nav-btn, .hdr-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--ink); border-radius: 6px; transition: background var(--t), color var(--t); }
    .hdr-nav-btn:hover, .hdr-nav-link:hover { background: rgba(31,41,55,.04); }
    .hdr-dropdown { position: absolute; top: calc(100% - 4px); left: 0; min-width: 240px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px -16px rgba(31,41,55,.25); }
    .hdr-dropdown-item { display: block; padding: 10px 12px; font-size: 14px; color: var(--ink); border-radius: 6px; }
    .hdr-dropdown-item:hover { background: var(--bg-2); }
    .hdr-actions { display: inline-flex; align-items: center; gap: 12px; }
    .hdr-cta { padding: 12px 22px; font-size: 15px; }
    .hdr-burger { display: inline-flex; padding: 10px; border-radius: 6px; }
    @media (min-width: 960px) { .hdr-burger { display: none; } }
    @media (max-width: 720px) { .hdr-cta { display: none; } }
    .hdr-mobile { display: flex; flex-direction: column; gap: 4px; padding: 8px 24px 24px; border-top: 1px solid var(--line); background: var(--bg); }
    .hdr-mobile a { padding: 14px 4px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }

    /* Breadcrumbs */
    .bcrumb { padding-top: 24px; padding-bottom: 8px; }
    .bcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); letter-spacing: 0.02em; }
    .bcrumb li { display: inline-flex; align-items: center; gap: 8px; }
    .bcrumb a { color: var(--ink-2); transition: color var(--t); }
    .bcrumb a:hover { color: var(--gold); }
    .bcrumb [aria-current] { color: var(--ink); }
    .bcrumb-sep { color: var(--line); }

    /* Page hero */
    .phero { position: relative; padding: 56px 0 96px; overflow: hidden; }
    @media (min-width: 720px) { .phero { padding: 80px 0 120px; } }
    .phero-inner { position: relative; z-index: 2; max-width: 800px; }
    .phero h1 { margin-top: 8px; font-size: clamp(36px, 4.8vw, 56px); }
    .phero-lead { margin-top: 40px; max-width: 660px; color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); }
    .phero-cta { margin-top: 36px; }
    .phero-shape { position: absolute; right: -120px; bottom: -120px; width: min(640px, 55vw); height: min(640px, 55vw); pointer-events: none; opacity: .85; }

    /* Sections */
    .sec-head { max-width: 720px; margin-bottom: 56px; }
    .sec-head h2 { margin-top: 8px; }
    .sec-head .lead { margin-top: 16px; color: var(--ink-2); }
    .alt-bg { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

    /* Situation cards */
    .sit-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
    @media (min-width: 800px) { .sit-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
    .sit-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 32px 28px; transition: border-color var(--t); }
    .sit-card:hover { border-color: rgba(201,160,80,.45); }
    .sit-num { display: inline-block; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--gold); letter-spacing: -0.01em; margin-bottom: 16px; }
    .sit-card h3 { font-size: 22px; margin-bottom: 12px; }
    .sit-card p { color: var(--ink-2); font-size: 15px; line-height: 1.65; margin: 0; }

    /* Process */
    .proc { list-style: none; padding: 0; margin: 0; counter-reset: step; max-width: 880px; }
    .proc-step { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--line); position: relative; }
    .proc-step:first-child { border-top: 0; padding-top: 8px; }
    .proc-step:last-child { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
    .proc-num { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--gold); font-family: var(--serif); font-weight: 600; font-size: 18px; flex-shrink: 0; }
    .proc-body h3 { font-size: 22px; margin-bottom: 10px; }
    .proc-dur { color: var(--ink-2); font-weight: 400; font-family: var(--serif); }
    .proc-body p { color: var(--ink-2); font-size: 16px; line-height: 1.65; margin: 0; max-width: 640px; }
    @media (max-width: 720px) { .proc-step { grid-template-columns: 44px 1fr; gap: 16px; } .proc-num { width: 40px; height: 40px; font-size: 14px; } }

    /* Check list */
    .checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 720px; }
    @media (min-width: 720px) { .checks { grid-template-columns: 1fr 1fr; gap: 14px 32px; max-width: none; } }
    .checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
    .check-mark { width: 24px; height: 24px; border-radius: 50%; background: rgba(4, 120, 87, .1); color: var(--green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }

    /* Pricing note */
    .pnote { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; padding: 32px 36px; max-width: 880px; }
    .pnote .eyebrow { color: var(--gold); margin-bottom: 16px; }
    .pnote-body p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 12px; }
    .pnote-body strong { color: var(--ink); font-weight: 600; }
    .pnote-foot { margin-top: 16px; font-size: 14px; color: var(--ink-2); font-style: italic; }

    /* Mini story */
    .ministory { position: relative; max-width: 880px; margin: 0; padding: 24px 24px 24px 56px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
    .ministory-mark { position: absolute; left: 24px; top: 12px; font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--gold); opacity: .7; }
    .ministory blockquote { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
    .ministory figcaption { font-size: 14px; color: var(--ink-2); }
    .ministory figcaption strong { color: var(--ink); font-weight: 600; }
    .ministory-meta { color: var(--ink-2); }

    /* FAQ */
    .faq { list-style: none; padding: 0; margin: 0; max-width: 880px; border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; text-align: left; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
    .faq-q:hover { color: var(--gold); }
    .faq-icon { color: var(--ink-2); transition: transform var(--t); flex-shrink: 0; }
    .faq-item.is-open .faq-icon { transform: rotate(180deg); color: var(--gold); }
    .faq-a { padding: 0 0 24px; max-width: 760px; }
    .faq-a p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; }

    /* Industry-specific blocks */
    .stats3 { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 880px; }
    @media (min-width: 720px) { .stats3 { grid-template-columns: repeat(3, 1fr); gap: 0; } }
    .stat3 { padding: 24px 28px; background: var(--bg); border: 1px solid var(--line); }
    @media (min-width: 720px) { .stat3 { border-right-width: 0; } .stat3:last-child { border-right-width: 1px; } }
    .stat3-num { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3vw, 36px); color: var(--gold); letter-spacing: -0.02em; }
    .stat3-label { margin-top: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

    .intro-prose { max-width: 760px; }
    .intro-prose p { margin: 0 0 1.2em; font-size: 17px; line-height: 1.75; color: var(--ink); }
    .intro-prose p:last-child { margin-bottom: 0; }

    .errlist { list-style: none; padding: 0; margin: 0; counter-reset: err; max-width: 880px; }
    .err-item { padding: 36px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 64px 1fr; gap: 28px; }
    .err-item:first-child { border-top: 0; }
    .err-num { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--gold); line-height: 1; }
    .err-item h3 { font-size: 24px; margin-bottom: 16px; line-height: 1.25; }
    .err-item p { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
    .err-item p:last-child { margin: 0; }
    @media (max-width: 720px) { .err-item { grid-template-columns: 44px 1fr; gap: 16px; padding: 28px 0; } .err-num { font-size: 22px; } }

    .case-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1080px; }
    @media (min-width: 880px) { .case-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
    .case-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 32px 28px; }
    .case-card .case-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 12px; }
    .case-card h3 { font-size: 18px; margin-bottom: 16px; }
    .case-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .case-card li { font-size: 15px; color: var(--ink-2); line-height: 1.5; padding-left: 16px; position: relative; }
    .case-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--gold); }
    .case-result { background: var(--blue); color: #fff; border: 0; }
    .case-result .case-label { color: rgba(255,255,255,.6); }
    .case-result h3 { color: #fff; }
    .case-result li { color: rgba(255,255,255,.8); }
    .case-result li::before { background: var(--gold); }

    .vakuutus-list { columns: 1; column-gap: 40px; max-width: 880px; padding: 0; margin: 0; list-style: none; }
    @media (min-width: 720px) { .vakuutus-list { columns: 2; } }
    .vakuutus-list li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: 16px; color: var(--ink); position: relative; }
    .vakuutus-list li::before { content: ""; position: absolute; left: 0; top: 22px; width: 16px; height: 1px; background: var(--gold); }

    /* Toimialaoppaat-rivi (Lue myös) */
    .tor { padding: 56px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
    .tor-eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 24px; }
    .tor-list { list-style: none; padding: 0; margin: 0; max-width: 980px; }
    .tor-list li + li { border-top: 1px solid var(--line); }
    .tor-list a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; padding: 18px 0; transition: padding var(--t), background var(--t); }
    .tor-list a:hover { padding-left: 12px; padding-right: 12px; background: linear-gradient(90deg, rgba(201,160,80,.04), transparent); }
    .tor-num { font-family: var(--serif); font-size: 18px; color: var(--gold); font-weight: 600; }
    .tor-title { font-weight: 500; }
    .tor-meta { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
    @media (max-width: 640px) {
      .tor-meta { display: none; }
      .tor-list a { grid-template-columns: 32px 1fr; }
    }

    /* CTA + footer carry over from etusivu — repeat needed bits */
    .cta { position: relative; background: var(--blue); color: #fff; padding: clamp(72px, 10vw, 120px) 0; overflow: hidden; }
    .cta-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
    @media (min-width: 960px) { .cta-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
    .cta-eyebrow { color: rgba(255,255,255,.55); }
    .cta h2 { color: #fff; font-size: clamp(32px, 3.8vw, 44px); max-width: 22ch; margin-top: 8px; line-height: 1.15; }
    .cta-sub { margin: 24px 0 20px; font-size: 19px; font-weight: 500; color: #fff; }
    .cta-body { color: rgba(255,255,255,.7); max-width: 560px; font-size: 16px; line-height: 1.65; }
    .cta-actions { display: flex; flex-direction: column; gap: 24px; }
    .cta-primary { align-self: flex-start; padding: 18px 32px; font-size: 17px; }
    .cta-alts { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
    .cta-alt { display: inline-flex; align-items: center; gap: 14px; color: rgba(255,255,255,.85); transition: color var(--t); }
    .cta-alt:hover { color: #fff; }
    .cta-alt-label { display: block; font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: 0.04em; text-transform: uppercase; }
    .cta-alt-num { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; margin-top: 2px; white-space: nowrap; letter-spacing: -0.01em; }
    .cta-corner { position: absolute; right: -120px; bottom: -120px; width: min(600px,55vw); height: min(600px,55vw); pointer-events: none; opacity: .8; }

    .ftr { background: var(--bg); padding: 72px 0 32px; border-top: 1px solid var(--line); }
    .ftr-grid-simple { display: grid; grid-template-columns: 1fr; gap: 40px; }
    @media (min-width: 720px) { .ftr-grid-simple { grid-template-columns: 1fr 2fr; gap: 56px; } }
    .ftr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
    .ftr-logo-img { height: 48px; width: auto; }
    .ftr-tag { color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 320px; margin-top: 16px; }
    .ftr-h { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
    .ftr-addr { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 8px; font-style: normal; }
    .ftr-tel, .ftr-mail { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--ink); transition: color var(--t); }
    .ftr-tel:hover, .ftr-mail:hover { color: var(--gold); }
    .ftr-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
    .ftr-legal { display: flex; gap: 24px; flex-wrap: wrap; }
    .ftr-legal a { font-size: 13px; color: var(--ink-2); }
    .ftr-legal a:hover { color: var(--ink); }
    .ftr-copy { font-size: 13px; color: var(--ink-2); margin: 0; }
  `;
  document.head.appendChild(s);
}