/* Base styles */
*,*::before,*::after{box-sizing:border-box}*{margin:0}html:focus-within{scroll-behavior:smooth}
:root{--brand:#005EB8;--brand-600:#004080;--accent:#FFD700;--bg:#fff;--text:#1b1b1f;--muted:#5c6670;--surface:#f4f6f8;--border:#e1e6eb;--radius:12px;--container:1100px;--space-1:.5rem;--space-2:.75rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--space-6:3rem;--space-7:4.5rem}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6}
.container{width:min(100% - 2rem,var(--container));margin-inline:auto}
.section{padding-block:var(--space-6)}
.header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding-block:.75rem;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.75rem;font-weight:800}.brand img{height:36px;width:auto}
.navlinks{display:flex;align-items:center;gap:1rem}
.navlinks a{text-decoration:none;color:inherit;padding:.5rem .75rem;border-radius:8px}
.navlinks a[aria-current="page"]{background:var(--surface)}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);padding:.5rem .75rem;border-radius:8px}
@media (max-width:800px){.nav-toggle{display:inline-flex}.navlinks{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;padding:.75rem;display:none}.navlinks.open{display:flex}}
.navlinks a:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}

h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em}h1{font-size:2rem}h2{font-size:1.6rem;margin-bottom:var(--space-3)}h3{font-size:1.25rem;margin-bottom:var(--space-2)}p+p{margin-top:var(--space-2)}
.grid{display:grid;gap:var(--space-4)}.grid.auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.08);padding:var(--space-4)}
.hero{display:grid;gap:var(--space-5);align-items:center;grid-template-columns:1.1fr .9fr;padding-block:var(--space-7)}

@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr; /* Teksti ja kuva allekkain */
        text-align: center;
    }

    .hero .image {
        margin-top: var(--space-4);
    }
}



.hero .actions{display:flex;gap:.75rem;flex-wrap:wrap}

/*
.hero .image{border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.12)}
*/


.hero .image {
  overflow: visible; /* Poistaa leikkauksen */
}
.hero .image img {
border-radius:var(--radius);
  width: 100%;
  height: auto;
  object-fit: contain;
}







.embed-wrap{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000}
.embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.table th{background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.table tr:hover td{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.table-section th{background:color-mix(in srgb,var(--brand) 14%,var(--surface));font-size:1.05em}
.footer{border-top:1px solid var(--border);padding-block:var(--space-4);color:var(--muted);font-size:.95rem}
.tag{display:inline-block;font-size:.9rem;padding:.15rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.tag.warn{background:color-mix(in srgb,#ff6b6b 18%,transparent);color:#b00020}
.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:#fff;border:none;padding:.75rem 1rem;border-radius:999px;cursor:pointer;text-decoration:none;font-weight:600}
.btn:hover{background:var(--brand-600)}.btn.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand)}.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Hero brand (final) */
.hero-brand{display:flex;align-items:center;gap:.85rem;margin-bottom:var(--space-2);padding:.35rem .75rem;border-radius:999px}
.hero-brand img{height:clamp(44px,7.5vw,90px);width:auto;display:block}
.hero-brand-name{font-weight:800;letter-spacing:-.01em;font-size:clamp(1.05rem,1.4vw + .6rem,1.6rem)}
.hero-brand--solid{background:var(--brand);color:#fff}
.hero-brand--solid .hero-brand-name{color:#fff}
@media (max-width:640px){.hero-brand{gap:.7rem;padding:.3rem .6rem}.hero-brand img{height:40px}}

/* Pinned look (keeps solid pill on left brand link) */
.brand-pinned .header .hero-brand{padding:.25rem .6rem; background: var(--brand); color:#fff}
.brand-pinned .header .hero-brand .hero-brand-name{color:#fff}
.brand-pinned .header .hero-brand img{height:clamp(28px,4vw,52px)}