:root{
  --brand:#0a92d3;
  --brand-dark:#0676a9;
  --ink:#1a1f2b;
  --muted:#475569;
  --bg:#ffffff;
  --surface:#f1f5f9;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1080px;margin-inline:auto;padding:clamp(16px,3vw,28px)}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e2e8f0;z-index:10}
header .row{display:flex;align-items:center;gap:16px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:36px}
nav{display:flex;gap:18px}
nav a{font-weight:600;color:var(--ink)}
.masthead{min-height:45vh;height:45vh;min-height:320px;background-image:url('../assets/vilja-tausta-36-1.png');background-size:cover;background-position:center;background-repeat:no-repeat}
.section{padding-block:42px}
.intro{text-align:center}
.intro h1{margin-top:0}
.intro p{max-width:70ch;margin-inline:auto;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.columns-3 > *{grid-column:span 4}
.columns-2 > *{grid-column:span 6}
.card{background:#fff;border:0;border-radius:16px;padding:18px}
.card h3,.card h4{text-align:center}
.small{font-size:14px;color:#64748b}
@media (max-width:900px){
  .columns-3 > *, .columns-2 > *{grid-column:1 / -1}
  nav{display:none}
}
/* Section headings */
.section > h2{text-align:center;font-size:clamp(22px,3.5vw,32px);margin:0 0 12px}
/* Subheadings */
h3{font-size:clamp(18px,2.2vw,20px);margin:0 0 8px}
h4{margin:8px 0 6px;font-size:clamp(20px,2.6vw,22px)}
/* Icons */
.icon{color:var(--brand);margin-bottom:8px}
.icon svg{width:50px;height:50px;display:block;margin-inline:auto}
/* Parallax quote section */
.parallax{position:relative;background-image:url('../assets/blue-concrete-wall-textures-background-1600x900.jpg');background-size:cover;background-position:center;background-attachment:fixed;padding-block:64px}
@media (max-width:900px){.parallax{background-attachment:scroll}}
.parallax .scrim{background:rgba(255,255,255,.65);backdrop-filter:saturate(1.1) blur(2px);border-radius:16px;padding:24px;position:relative;z-index:1;margin-top:12px}
.quote-icon{width:80px;height:80px;display:block;margin:0 auto 12px;color:var(--brand);overflow:visible;position:relative;z-index:2}
blockquote{margin:0}
footer{background:#0b1220;color:#cbd5e1;margin-top:48px}
footer a{color:#e2e8f0}
footer .grid{align-items:start}

/* === Responsive, always-visible Menu button & dropdown === */
.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.site-header { position: sticky; top: 0; background:#fff; border-bottom:1px solid #e2e8f0; z-index: 10; }
.site-header .logo img { height:36px; }
.header-inner { position: relative; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--brand);
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 6px 10px; cursor: pointer; line-height: 1;
}
.menu-toggle:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.menu-label { font-weight: 700; letter-spacing: .02em; }

.menu-panel {
  position: absolute; top: 100%; right: 0;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; width: min(320px, 86vw); display: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
header.menu-open .menu-panel { display: block; }

.menu-root { list-style: none; margin: 0; padding: 0; }
.menu-root > li { margin: 0; padding: 6px 4px; }
.menu-root a { color: var(--ink); font-weight: 600; display: inline-block; }

.menu-group { padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0; margin-bottom: 6px; }
.menu-parent { color: var(--brand-dark); font-weight: 800; }

.submenu { list-style: none; margin: 6px 0 0 0; padding: 0 0 0 10px; border-left: 3px solid rgba(10,146,211,.15); }
.submenu li { padding: 4px 0; }
.submenu a { font-weight: 600; }

@media (max-width: 900px) {
  .menu-panel { left: 16px; right: 16px; width: auto; }
}

/* Smooth-ish reveal when allowed */
@media (prefers-reduced-motion: no-preference) {
  .menu-panel { transform-origin: top right; transform: scale(.98); opacity: 0; transition: .16s ease; }
  header.menu-open .menu-panel { transform: scale(1); opacity: 1; }
}

/* Normalize header thickness across the site */
.site-header .row,
.site-header .header-inner {
  padding-block: 8px;
}

/* Keep header elements from adding extra space */
.site-header .logo,
.site-header .menu-toggle,
.site-header .nav-links,
.site-header .menu-panel {
  margin: 0;
}