/* ═══════════════════════════════════════════════
   ÄSSÄ INSINÖÖRIT · main.css
   Yhteinen tyylitiedosto kaikille sivuille (FI + EN)
═══════════════════════════════════════════════ */

/* ── FONTIT (paikallisesti, ei Google Fonts -kutsuja) ── */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/fraunces-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/fraunces-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:300; font-display:swap; src:url('../fonts/fraunces-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/outfit-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/outfit-latin-500-normal.woff2') format('woff2'); }

:root {
  --bg:#1A1A1A; --bg2:#202020; --bg3:#252525; --surface:#2A2A2A;
  --border:#303030; --faint:#2E2E2E;
  --accent:#FB601B; --accent2:#ff7a40;
  --text:#E8E4DC; --body:rgba(232,228,220,0.80); --muted:#9A958C;
  --nav-h:68px; --pad:4rem; --maxw:1200px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Outfit',system-ui,sans-serif; font-weight:300; line-height:1.7;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font-family:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.skip-link {
  position:absolute; left:1rem; top:-3rem; z-index:300;
  background:var(--accent); color:#fff; padding:0.6rem 1rem; font-size:0.85rem;
}
.skip-link:focus { top:1rem; }
[hidden] { display:none !important; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── YLEISET ─────────────────────────── */
.container { max-width:var(--maxw); margin:0 auto; }
.section { padding:6rem var(--pad); }
.section.alt { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.eyebrow {
  font-family:'DM Mono',monospace; font-size:0.7rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1.2rem; display:flex; align-items:center; gap:0.8rem;
}
.eyebrow::before { content:''; width:20px; height:1px; background:var(--accent); flex-shrink:0; }
.h-display, h1, h2 { font-family:'Fraunces',Georgia,serif; font-weight:300; line-height:1.12; }
h1 em, h2 em, .cta-text em { font-style:normal; color:var(--accent); }
.h2 { font-size:clamp(1.8rem,3.2vw,2.4rem); margin-bottom:1.2rem; }
.lead { font-size:1rem; color:var(--body); line-height:1.85; }
.grid-bg { position:relative; overflow:hidden; }
.grid-bg::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 79px,var(--faint) 79px,var(--faint) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,var(--faint) 79px,var(--faint) 80px);
  opacity:0.5;
}
.grid-bg > * { position:relative; z-index:1; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; }
.section-head .h2 { margin-bottom:0; max-width:620px; }

/* ── PAINIKKEET ──────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  font-size:0.78rem; font-weight:400; letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer; transition:background 0.2s,color 0.2s,border-color 0.2s;
  border:1px solid transparent; padding:0.85rem 2rem; min-height:46px; line-height:1.2;
}
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent2); border-color:var(--accent2); }
.btn-outline { background:none; color:var(--accent); border-color:var(--accent); }
.btn-outline:hover { background:var(--accent); color:#fff; }
.btn-row { display:flex; gap:1rem; flex-wrap:wrap; }
.text-link {
  font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:0.5rem; transition:gap 0.2s;
}
.text-link:hover { gap:0.9rem; }

/* ── NAVIGAATIO ──────────────────────── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  background:rgba(26,26,26,0.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:2rem; padding:0 var(--pad);
  transition:box-shadow 0.3s;
}
.site-nav.scrolled { box-shadow:0 4px 40px rgba(0,0,0,0.4); }
.nav-logo {
  font-family:'Fraunces',serif; font-size:1.05rem; font-weight:700; letter-spacing:0.04em;
  color:var(--text); white-space:nowrap; margin-right:auto;
}
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  transition:color 0.2s; white-space:nowrap;
}
.nav-links a:hover { color:var(--text); }
.nav-links a[aria-current="page"] { color:var(--accent); }
.nav-lang { display:flex; align-items:center; gap:0.45rem; font-family:'DM Mono',monospace; font-size:0.66rem; letter-spacing:0.14em; }
.nav-lang a { color:var(--muted); transition:color 0.2s; }
.nav-lang a:hover { color:var(--text); }
.nav-lang .current { color:var(--accent); }
.nav-lang .sep { color:var(--border); }
.nav-cta { padding:0.55rem 1.3rem; min-height:0; font-size:0.72rem; }
.nav-toggle {
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span { width:24px; height:1.5px; background:var(--text); transition:transform 0.3s,opacity 0.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0; z-index:199;
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:1.5rem 1.5rem 2rem; flex-direction:column;
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain;
}
.mobile-menu.open { display:flex; }
.mobile-menu > a {
  font-size:0.9rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
  padding:0.9rem 0; border-bottom:1px solid var(--border);
}
.mobile-menu > a[aria-current="page"], .mobile-menu > a:hover { color:var(--accent); }
.mobile-menu .nav-lang { margin-top:1.5rem; font-size:0.8rem; }
.mobile-menu .btn { margin-top:1.5rem; }

.page { padding-top:var(--nav-h); }

/* ── SIVUN HERO (alasivut) ───────────── */
.page-hero { padding:5rem var(--pad) 4rem; border-bottom:1px solid var(--border); }
.page-hero-inner {
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; align-items:end;
}
.page-hero h1 { font-size:clamp(2.4rem,5vw,3.8rem); }
.page-hero-text { font-size:0.98rem; color:var(--body); line-height:1.85; padding-bottom:0.4rem; }

/* ── ETUSIVU: HERO ───────────────────── */
.hero { min-height:min(820px, calc(100vh - var(--nav-h))); display:flex; align-items:center; padding:0 var(--pad); border-bottom:1px solid var(--border); }
.hero-content > * { min-width:0; }
.hero-content {
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.15fr 1fr; gap:4rem; align-items:center; padding:6rem 0;
}
.hero h1 { font-size:clamp(2.6rem,4.8vw,4.2rem); line-height:1.06; margin-bottom:1.8rem; }
.hero .lead { font-size:1.06rem; max-width:540px; margin-bottom:2.5rem; }
.hero-anim { opacity:0; animation:fadeUp 0.8s ease forwards; }
.hero-anim.d1 { animation-delay:0.15s; } .hero-anim.d2 { animation-delay:0.3s; }
.hero-anim.d3 { animation-delay:0.45s; } .hero-anim.d4 { animation-delay:0.6s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

.hero-cards { position:relative; height:400px; }
.h-card {
  position:absolute; background:var(--bg2); border:1px solid var(--border); padding:1.8rem;
  transition:opacity 0.8s ease,transform 0.8s ease;
}
.h-card-back { width:300px; top:0; left:70px; background:var(--bg3); transform:rotate(2deg); }
.h-card-back i { display:block; height:10px; background:var(--faint); margin-bottom:9px; }
.h-card-main { width:340px; top:28px; left:20px; border-top:2px solid var(--accent); z-index:2; overflow:hidden; }
.h-card-main.is-hidden { opacity:0; transform:translateY(12px); pointer-events:none; }
.h-card-main .num { font-family:'DM Mono',monospace; font-size:0.64rem; color:var(--accent); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:0.9rem; }
.h-card-main h3 { font-family:'Fraunces',serif; font-size:1.3rem; font-weight:400; line-height:1.25; margin-bottom:0.6rem; }
.h-card-main p { font-size:0.84rem; color:var(--muted); line-height:1.6; }
.scan-bar {
  position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:scan 3s ease-in-out infinite; opacity:0.6;
}
@keyframes scan { 0% { top:0; opacity:0; } 5% { opacity:0.6; } 90% { top:100%; opacity:0.6; } 100% { top:100%; opacity:0; } }
.hero-dots { position:absolute; left:20px; top:330px; display:flex; gap:0.5rem; }
.hero-dots i { width:22px; height:2px; background:var(--border); transition:background 0.4s; }
.hero-dots i.on { background:var(--accent); }

/* Luvut */
.stats { border-bottom:1px solid var(--border); background:var(--bg2); padding:0 var(--pad); }
.stats-inner { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:2.2rem 1.5rem; border-right:1px solid var(--border); }
.stat:first-child { padding-left:0; }
.stat:last-child { border-right:0; }
.stat strong { display:block; font-family:'Fraunces',serif; font-size:2rem; font-weight:400; color:var(--accent); line-height:1.1; margin-bottom:0.4rem; }
.stat span { font-size:0.86rem; color:var(--body); line-height:1.5; display:block; }

/* Palvelukortit */
.svc-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--border); border:1px solid var(--border);
}
.svc-card-link {
  background:var(--bg2); padding:2.6rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column; transition:background 0.3s;
}
.svc-card-link:hover { background:var(--bg3); }
.svc-card-link::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s;
}
.svc-card-link:hover::before { transform:scaleX(1); }
.svc-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.6rem; }
.svc-num { font-family:'DM Mono',monospace; font-size:0.66rem; color:var(--accent); letter-spacing:0.15em; }
.svc-icon { width:48px; height:48px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:border-color 0.3s; }
.svc-card-link:hover .svc-icon { border-color:var(--accent); }
.svc-icon svg { width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.5; }
.svc-card-link h3 { font-family:'Fraunces',serif; font-size:1.45rem; font-weight:400; line-height:1.25; margin-bottom:0.9rem; }
.svc-card-link p { font-size:0.94rem; color:var(--body); line-height:1.75; flex:1; margin-bottom:1.8rem; }

/* Datakeskusnosto */
.dc-band { padding:5.5rem var(--pad); border-bottom:1px solid var(--border); }
.dc-band-inner { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.dc-band h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:1.2rem; }
.dc-band .lead { margin-bottom:2rem; }
.dc-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.dc-fact { background:var(--bg2); padding:1.6rem 1.5rem; }
.dc-fact b { display:block; font-family:'DM Mono',monospace; font-weight:400; font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.dc-fact span { font-size:0.92rem; color:var(--text); line-height:1.5; }

/* Meistä-nosto */
.about-preview { background:var(--bg2); border-bottom:1px solid var(--border); }
.about-preview-inner { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; }
.about-visual { position:relative; background:var(--bg3); display:flex; align-items:center; justify-content:center; min-height:460px; overflow:hidden; }
.bp-grid { position:absolute; inset:0; background-image:linear-gradient(var(--faint) 1px,transparent 1px),linear-gradient(90deg,var(--faint) 1px,transparent 1px); background-size:36px 36px; opacity:0.6; }
.corner { position:absolute; width:18px; height:18px; }
.corner::before, .corner::after { content:''; position:absolute; background:var(--accent); }
.corner::before { width:1px; height:100%; } .corner::after { height:1px; width:100%; }
.corner.tl { top:20px; left:20px; } .corner.tr { top:20px; right:20px; transform:scaleX(-1); }
.corner.bl { bottom:20px; left:20px; transform:scaleY(-1); } .corner.br { bottom:20px; right:20px; transform:scale(-1); }
.about-text { padding:5rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.about-text p { font-size:0.95rem; color:var(--body); line-height:1.85; margin-bottom:1rem; max-width:480px; }
.why-list { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.5rem; margin:1.5rem 0 2.2rem; }
.why-item { display:flex; gap:0.7rem; }
.why-item::before { content:''; width:5px; height:5px; background:var(--accent); border-radius:50%; margin-top:0.6rem; flex-shrink:0; }
.why-item strong { display:block; font-size:0.9rem; font-weight:500; }
.why-item span { font-size:0.86rem; color:var(--muted); line-height:1.55; display:block; }

/* Artikkelikortit */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); border-left:1px solid var(--border); }
.card-grid > * { border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.article-card {
  background:var(--bg2); padding:2.2rem; display:flex; flex-direction:column;
  position:relative; overflow:hidden; transition:background 0.3s;
}
.article-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s;
}
.article-card:hover { background:var(--bg3); }
.article-card:hover::before { transform:scaleX(1); }
.card-tag { font-family:'DM Mono',monospace; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:0.9rem; }
.card-title { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:400; line-height:1.35; margin-bottom:0.8rem; }
.card-excerpt { font-size:0.88rem; color:var(--muted); line-height:1.7; flex:1; margin-bottom:1.5rem; }
.card-meta { display:flex; justify-content:space-between; border-top:1px solid var(--border); padding-top:1rem; font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; }
.card-meta .go { color:var(--accent); }

/* CTA-kaista */
.cta-band { padding:6rem var(--pad); text-align:center; border-top:1px solid var(--border); }
.cta-band h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:1.2rem; }
.cta-band p { font-size:0.98rem; color:var(--body); max-width:540px; margin:0 auto 2.5rem; line-height:1.8; }
.cta-band .btn-row { justify-content:center; }

/* ── PALVELUT ────────────────────────── */
.svc-jump { border-bottom:1px solid var(--border); background:var(--bg2); padding:0 var(--pad); position:sticky; top:var(--nav-h); z-index:50; }
.svc-jump-inner { max-width:var(--maxw); margin:0 auto; display:flex; overflow-x:auto; scrollbar-width:none; }
.svc-jump-inner::-webkit-scrollbar { display:none; }
.svc-jump a {
  font-family:'DM Mono',monospace; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); padding:1.1rem 1.4rem; border-right:1px solid var(--border); white-space:nowrap; transition:color 0.2s;
}
.svc-jump a:first-child { padding-left:0; }
.svc-jump a:last-child { border-right:0; }
.svc-jump a:hover, .svc-jump a.on { color:var(--accent); }
.svc-jump a b { color:var(--accent); font-weight:400; margin-right:0.5rem; }
.svc-section { border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--nav-h) + 56px); }
.svc-section:nth-of-type(even) { background:var(--bg2); }
.svc-inner {
  max-width:calc(var(--maxw) + 2 * var(--pad)); margin:0 auto; position:relative;
  display:grid; grid-template-columns:1fr 360px; gap:4rem; padding:5.5rem var(--pad); align-items:start;
}
.svc-bg-num {
  position:absolute; right:2rem; top:1rem; font-family:'Fraunces',serif; font-size:12rem; font-weight:700;
  color:rgba(251,96,27,0.045); line-height:1; pointer-events:none; user-select:none;
}
.svc-inner h2 { font-size:clamp(2rem,3.4vw,2.6rem); margin-bottom:1.4rem; }
.svc-inner .lead { max-width:580px; margin-bottom:1.3rem; font-size:0.98rem; }
.svc-quote {
  font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; color:rgba(232,228,220,0.55);
  border-left:2px solid var(--accent); padding-left:1.1rem; margin-top:2rem; max-width:540px;
}
.svc-more { margin-top:1.8rem; }
.inc-card { background:var(--bg); border:1px solid var(--border); border-top:2px solid var(--accent); padding:2rem; position:sticky; top:calc(var(--nav-h) + 80px); }
.svc-section:nth-of-type(even) .inc-card { background:var(--bg3); }
.inc-card h3 { font-family:'DM Mono',monospace; font-size:0.68rem; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.dot-list { list-style:none; }
.dot-list li {
  font-size:0.9rem; color:var(--body); padding:0.62rem 0; border-bottom:1px solid var(--border);
  display:flex; gap:0.75rem; line-height:1.45;
}
.dot-list li:last-child { border-bottom:0; }
.dot-list li::before { content:''; width:4px; height:4px; background:var(--accent); border-radius:50%; flex-shrink:0; margin-top:0.55rem; }
.inc-card .btn { width:100%; margin-top:1.6rem; }

.cta-strip { padding:4.5rem var(--pad); border-top:1px solid var(--border); }
.cta-strip-inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.cta-text { font-family:'Fraunces',serif; font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:300; line-height:1.35; max-width:640px; }

/* ── DATAKESKUKSET ───────────────────── */
.exp-strip { background:var(--bg2); border-bottom:1px solid var(--border); padding:3rem var(--pad); }
.exp-strip-inner { max-width:var(--maxw); margin:0 auto; display:flex; gap:3rem; align-items:center; }
.exp-badge { flex-shrink:0; width:300px; background:var(--bg3); border:1px solid var(--border); border-left:3px solid var(--accent); padding:1.6rem 1.8rem; }
.exp-badge .eyebrow { margin-bottom:0.7rem; font-size:0.62rem; }
.exp-badge .eyebrow::before { display:none; }
.exp-badge strong { display:block; font-family:'Fraunces',serif; font-size:1.15rem; font-weight:400; line-height:1.35; }
.exp-badge span { display:block; font-size:0.82rem; color:var(--muted); margin-top:0.5rem; }
.exp-strip p { font-size:0.96rem; color:var(--body); line-height:1.85; }
.fidic { background:var(--bg3); border-bottom:1px solid var(--border); padding:4.5rem var(--pad); }
.fidic-inner { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 2fr; gap:4rem; align-items:center; }
.fidic .fidic-word { font-family:'Fraunces',serif; font-size:clamp(3rem,7vw,5.5rem); font-weight:700; color:rgba(251,96,27,0.16); line-height:1; letter-spacing:-0.01em; }
.fidic h2 { font-size:clamp(1.5rem,2.6vw,1.9rem); margin-bottom:1rem; }
.fidic p { font-size:0.96rem; color:var(--body); line-height:1.85; max-width:640px; }
.aud-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.aud-card { background:var(--bg2); border:1px solid var(--border); padding:2.6rem; }
.aud-card h3 { font-family:'Fraunces',serif; font-size:1.5rem; font-weight:300; line-height:1.25; margin-bottom:1rem; }
.aud-card > p { font-size:0.94rem; color:var(--body); line-height:1.8; margin-bottom:1.4rem; }

/* ── HINNASTO ────────────────────────── */
.price-layout { max-width:calc(var(--maxw) + 2 * var(--pad)); margin:0 auto; padding:5rem var(--pad); display:grid; grid-template-columns:1fr 330px; gap:4rem; align-items:start; }
.price-block { margin-bottom:4rem; scroll-margin-top:calc(var(--nav-h) + 2rem); }
.price-block:last-child { margin-bottom:0; }
.price-head { display:flex; align-items:baseline; gap:1rem; padding-bottom:1rem; margin-bottom:0.5rem; border-bottom:1px solid var(--border); }
.price-head .svc-num { flex-shrink:0; }
.price-head h2 { font-size:1.6rem; }
.price-table { width:100%; border-collapse:collapse; }
.price-table tr { border-bottom:1px solid var(--border); }
.price-table tr:last-child { border-bottom:0; }
.price-table th, .price-table td { padding:1.05rem 0; vertical-align:top; text-align:left; font-weight:400; }
.price-table th { font-size:0.94rem; color:var(--text); width:60%; padding-right:1.5rem; }
.price-table th small { display:block; font-size:0.8rem; font-weight:300; color:var(--muted); margin-top:0.25rem; line-height:1.5; }
.price-table td { text-align:right; white-space:nowrap; font-family:'Fraunces',serif; font-size:1.15rem; color:var(--text); }
.price-table td small { display:block; font-family:'DM Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.price-table td .vat { margin-top:0.2rem; text-transform:none; letter-spacing:0.02em; font-size:0.7rem; }
.price-table td.quote { font-family:'Outfit',sans-serif; font-size:0.9rem; color:var(--muted); }
.note-box { background:var(--bg2); border:1px solid var(--border); border-left:2px solid var(--accent); padding:1.2rem 1.5rem; margin-top:1.4rem; }
.note-box p { font-size:0.88rem; color:var(--body); line-height:1.7; }
.note-box strong { color:var(--text); font-weight:500; }
.side { position:sticky; top:calc(var(--nav-h) + 2rem); display:flex; flex-direction:column; gap:1rem; }
.side-card { background:var(--bg2); border:1px solid var(--border); border-top:2px solid var(--accent); padding:1.8rem; }
.side-card h2, .side-card h3 { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:400; margin-bottom:0.9rem; }
.side-card > p { font-size:0.88rem; color:var(--body); line-height:1.7; margin-bottom:1.3rem; }
.side-card .btn { width:100%; }
.faq { list-style:none; }
.faq li { padding:0.85rem 0; border-bottom:1px solid var(--border); font-size:0.86rem; color:var(--body); line-height:1.6; }
.faq li:last-child { border-bottom:0; padding-bottom:0; }
.faq strong { display:block; color:var(--text); font-weight:500; margin-bottom:0.2rem; }
.disclaimer { background:var(--bg2); border-top:1px solid var(--border); padding:3rem var(--pad); }
.disclaimer-inner { max-width:var(--maxw); margin:0 auto; }
.disclaimer h2 { font-size:1.2rem; margin-bottom:0.8rem; }
.disclaimer p { font-size:0.88rem; color:var(--muted); line-height:1.8; max-width:760px; }

/* ── ARTIKKELILISTAUS ────────────────── */
.filter-bar { background:var(--bg2); border-bottom:1px solid var(--border); padding:1rem var(--pad); }
.filter-inner { max-width:var(--maxw); margin:0 auto; display:flex; gap:0.5rem; flex-wrap:wrap; }
.filter-btn {
  font-family:'DM Mono',monospace; font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.5rem 1rem; border:1px solid var(--border); background:none; color:var(--muted); cursor:pointer; transition:color 0.2s,border-color 0.2s; min-height:38px;
}
.filter-btn:hover, .filter-btn[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
.articles-wrap { padding:4rem var(--pad) 5rem; }
.featured { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-top:2px solid var(--accent); margin-bottom:2rem; }
.featured .article-card { padding:2.8rem; }
.featured .card-title { font-size:1.6rem; font-weight:300; }
.empty-note { display:none; padding:2rem 0; color:var(--muted); font-size:0.9rem; }

/* ── ARTIKKELISIVU ───────────────────── */
.article-hero { padding:5rem var(--pad) 3rem; border-bottom:1px solid var(--border); }
.article-hero-inner { max-width:800px; margin:0 auto; }
.crumbs { font-family:'DM Mono',monospace; font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1.6rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.crumbs a:hover { color:var(--accent); }
.crumbs span[aria-hidden] { color:var(--accent); }
.article-hero h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.15; margin-bottom:1.5rem; }
.article-meta { font-family:'DM Mono',monospace; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); display:flex; gap:0.8rem; flex-wrap:wrap; }
.article-meta i { color:var(--accent); font-style:normal; }
.article-layout { max-width:calc(var(--maxw) + 2 * var(--pad)); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:4rem; padding:4rem var(--pad) 5rem; align-items:start; }
.prose { max-width:720px; }
.prose > p:first-child { font-size:1.08rem; color:var(--text); }
.prose h2 { font-size:1.6rem; font-weight:400; margin:2.6rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border); }
.prose h3 { font-family:'Outfit',sans-serif; font-size:1.02rem; font-weight:500; margin:1.8rem 0 0.6rem; }
.prose p, .prose li { font-size:0.98rem; color:var(--body); line-height:1.85; }
.prose p { margin-bottom:1.1rem; }
.prose ul, .prose ol { margin:0.4rem 0 1.3rem 1.3rem; }
.prose li { margin-bottom:0.4rem; padding-left:0.2rem; }
.prose li::marker { color:var(--accent); }
.prose strong { color:var(--text); font-weight:500; }
.prose a { color:var(--accent); border-bottom:1px solid rgba(251,96,27,0.35); }
.prose blockquote {
  border-left:2px solid var(--accent); background:rgba(251,96,27,0.04); padding:1.1rem 1.5rem; margin:2rem 0;
  font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; color:rgba(232,228,220,0.85); line-height:1.55;
}
.box { background:var(--bg2); border:1px solid var(--border); border-left:2px solid var(--accent); padding:1.4rem 1.6rem; margin:2rem 0; }
.box h4 { font-family:'DM Mono',monospace; font-size:0.64rem; font-weight:400; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem; }
.box p { margin-bottom:0; font-size:0.92rem; }
.related { border-top:1px solid var(--border); padding:4.5rem var(--pad); }

/* ── MEISTÄ ──────────────────────────── */
.about-hero { padding:5rem var(--pad); border-bottom:1px solid var(--border); }
.about-hero-inner { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-hero h1 { font-size:clamp(2.4rem,5vw,3.8rem); margin-bottom:1.5rem; }
.about-vis { position:relative; height:380px; display:flex; align-items:center; justify-content:center; }
.about-vis .bp-grid { border:1px solid var(--border); opacity:0.7; }
.vis-building { position:relative; z-index:1; width:220px; }
.vis-roof { width:0; height:0; margin:0 auto 2px; border-left:86px solid transparent; border-right:86px solid transparent; border-bottom:40px solid var(--surface); }
.vis-row { display:flex; gap:2px; margin-bottom:2px; }
.vis-cell { flex:1; height:32px; border:1px solid var(--faint); background:var(--surface); }
.vis-cell.on { background:rgba(251,96,27,0.1); border-color:rgba(251,96,27,0.25); }
.vis-cell.hi { background:rgba(251,96,27,0.22); border-color:rgba(251,96,27,0.5); }
.vis-chip { position:absolute; z-index:2; background:var(--surface); border:1px solid var(--border); border-left:2px solid var(--accent); padding:0.55rem 0.95rem; }
.vis-chip strong { display:block; font-family:'Fraunces',serif; font-size:1.5rem; font-weight:700; color:var(--accent); line-height:1.05; }
.vis-chip span { font-size:0.68rem; color:var(--muted); letter-spacing:0.06em; }
.vis-chip.a { bottom:30px; left:-6px; } .vis-chip.b { top:30px; right:0; } .vis-chip.c { bottom:96px; right:12px; }
.person { display:grid; grid-template-columns:280px 1fr; gap:4rem; align-items:start; }
.portrait { aspect-ratio:4/5; background:var(--bg2); border:1px solid var(--border); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.portrait .initials { position:relative; z-index:1; font-family:'Fraunces',serif; font-size:4.5rem; font-weight:300; color:var(--accent); letter-spacing:0.04em; }
.person-role { font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:-0.6rem 0 1.8rem; }
.person-text p { font-size:0.98rem; color:var(--body); line-height:1.85; margin-bottom:1.3rem; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.fact { background:var(--bg2); border:1px solid var(--border); border-left:2px solid var(--accent); padding:1.2rem 1.5rem; }
.fact b { display:block; font-family:'DM Mono',monospace; font-weight:400; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); margin-bottom:0.4rem; }
.fact span { font-size:0.92rem; color:var(--text); line-height:1.5; }
.tile-grid { display:grid; gap:1px; background:var(--border); border:1px solid var(--border); }
.tile-grid.c4 { grid-template-columns:repeat(4,1fr); }
.tile-grid.c3 { grid-template-columns:repeat(3,1fr); }
.tile { background:var(--bg2); padding:2.3rem 2rem; position:relative; transition:background 0.3s; }
.section.alt .tile { background:var(--bg); }
.tile:hover { background:var(--bg3); }
.tile .svc-num { display:block; margin-bottom:1rem; }
.tile h3 { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:400; margin-bottom:0.7rem; line-height:1.3; }
.tile p { font-size:0.9rem; color:var(--muted); line-height:1.7; }

/* ── YHTEYSTIEDOT ────────────────────── */
.contact-section { padding:4rem var(--pad) 5rem; }
.contact-wrap { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; border:1px solid var(--border); }
.contact-left { padding:4rem; border-right:1px solid var(--border); }
.contact-left h1 { font-size:clamp(2.2rem,4vw,3.2rem); margin-bottom:1.2rem; }
.contact-left .lead { margin-bottom:2.8rem; max-width:420px; font-size:0.98rem; }
.info { padding:1.4rem 0; border-top:1px solid var(--border); }
.info .eyebrow { margin-bottom:0.5rem; font-size:0.62rem; }
.info .eyebrow::before { display:none; }
.info a, .info p:not(.eyebrow) { display:block; font-size:0.98rem; color:var(--text); line-height:1.7; }
.info a:hover { color:var(--accent); }
.info small { display:block; font-size:0.84rem; color:var(--muted); margin-top:0.2rem; }
.contact-right { padding:4rem; background:var(--bg2); }
.contact-right h2 { font-size:1.7rem; margin-bottom:0.5rem; }
.contact-right .sub { font-size:0.9rem; color:var(--muted); margin-bottom:2.2rem; }
.form-row { margin-bottom:1.3rem; }
.form-two { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row label { display:block; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem; }
.form-row input, .form-row select, .form-row textarea {
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-size:1rem; font-weight:300; padding:0.8rem 1rem; outline:none; transition:border-color 0.2s;
  appearance:none; -webkit-appearance:none; border-radius:0;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color:var(--accent); }
.form-row ::placeholder { color:#6f6b64; }
.form-row textarea { resize:vertical; min-height:150px; }
.form-row select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A958C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; cursor:pointer;
}
.form-row select option { background:var(--bg2); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-consent { font-size:0.82rem; color:var(--muted); line-height:1.6; margin:0.4rem 0 1.6rem; }
.form-consent a { color:var(--accent); }
.contact-right .btn { width:100%; padding:1rem; }
.form-status { margin-top:1rem; font-size:0.9rem; line-height:1.6; display:none; }
.form-status.ok, .form-status.err { display:block; padding:1rem 1.2rem; border:1px solid var(--border); border-left:2px solid var(--accent); background:var(--bg); }
.form-status.err { border-left-color:#d9534f; }

/* ── TIETOSUOJA / TEKSTISIVU ─────────── */
.text-page { max-width:calc(820px + 2 * var(--pad)); margin:0 auto; padding:4rem var(--pad) 5rem; }

/* ── ALATUNNISTE ─────────────────────── */
.site-footer { background:var(--bg2); border-top:1px solid var(--border); padding:4rem var(--pad) 2rem; }
.footer-grid { max-width:var(--maxw); margin:0 auto 3rem; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:3rem; }
.footer-brand .nav-logo { display:inline-block; margin-bottom:1rem; }
.footer-brand p { font-size:0.9rem; color:var(--body); line-height:1.7; max-width:300px; }
.footer-col h2 { font-family:'Outfit',sans-serif; font-size:0.72rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--text); margin-bottom:1.2rem; }
.footer-col ul { list-style:none; }
.footer-col li { font-size:0.9rem; color:rgba(232,228,220,0.72); margin-bottom:0.6rem; line-height:1.5; }
.footer-col a { transition:color 0.2s; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--border); padding-top:1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-bottom p, .footer-bottom a { font-size:0.8rem; color:rgba(232,228,220,0.62); }
.footer-bottom a:hover { color:var(--accent); }

/* ── ANIMAATIOT ──────────────────────── */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease; }
.fade-up.visible { opacity:1; transform:none; }
.d1 { transition-delay:0.1s; } .d2 { transition-delay:0.2s; } .d3 { transition-delay:0.3s; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .fade-up, .hero-anim { opacity:1; transform:none; animation:none; transition:none; }
  .scan-bar { display:none; }
}

/* ══════════════ RESPONSIIVISUUS ══════════════ */
@media (max-width:1180px) {
  :root { --pad:2.5rem; }
  .nav-links { gap:1.4rem; }
  .nav-links a { font-size:0.7rem; }
}
@media (max-width:1023px) {
  :root { --nav-h:62px; --pad:2rem; }
  .nav-links, .site-nav > .nav-lang, .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .hero-content { grid-template-columns:1fr; padding:4.5rem 0; }
  .hero h1 { font-size:clamp(2rem,8.6vw,4.6rem); }
  .hero { min-height:0; }
  .hero-visual { display:none; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .stat { padding:1.8rem 1.2rem; border-bottom:1px solid var(--border); }
  .stat:nth-child(2n) { border-right:0; }
  .stat:nth-child(2n+1) { padding-left:0; }
  .stat:nth-child(n+3) { border-bottom:0; }
  .dc-band-inner, .about-preview-inner, .about-hero-inner, .fidic-inner { grid-template-columns:1fr; gap:2.5rem; }
  .about-visual { min-height:280px; }
  .about-text { padding:3.5rem var(--pad); }
  .card-grid { grid-template-columns:1fr 1fr; }
  .svc-inner { grid-template-columns:1fr; gap:2.5rem; padding:4rem var(--pad); }
  .inc-card, .side { position:static; }
  .svc-bg-num { font-size:8rem; }
  .price-layout, .article-layout { grid-template-columns:1fr; gap:3rem; }
  .tile-grid.c4 { grid-template-columns:1fr 1fr; }
  .contact-wrap { grid-template-columns:1fr; }
  .contact-left { border-right:0; border-bottom:1px solid var(--border); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:767px) {
  :root { --nav-h:58px; --pad:1.25rem; }
  .section { padding:4rem var(--pad); }
  .page-hero { padding:3.5rem var(--pad) 3rem; }
  .page-hero-inner { grid-template-columns:1fr; gap:1.5rem; }
  .hero-content { padding:3.5rem 0; }
  .hero h1 { font-size:clamp(1.9rem,9.4vw,3rem); }
  .hero .btn-row .btn { flex:1 1 100%; }
  .svc-grid, .card-grid, .featured, .aud-grid, .dc-facts, .why-list, .facts, .tile-grid.c3, .tile-grid.c4, .form-two { grid-template-columns:1fr; }
  .svc-card-link, .article-card, .featured .article-card, .aud-card { padding:2rem 1.5rem; }
  .dc-band, .cta-band { padding:4rem var(--pad); }
  .about-text { padding:3rem var(--pad); }
  .cta-strip-inner { flex-direction:column; align-items:flex-start; }
  .exp-strip-inner { flex-direction:column; align-items:stretch; gap:1.5rem; }
  .exp-badge { width:auto; }
  .fidic { padding:3.5rem var(--pad); }
  .svc-bg-num { display:none; }
  .svc-inner { padding:3.5rem var(--pad); }
  .person { grid-template-columns:1fr; gap:2rem; }
  .portrait { max-width:240px; }
  .about-hero { padding:3.5rem var(--pad); }
  .about-vis { height:280px; }
  .vis-chip { display:none; }
  .contact-section { padding:2rem 0 3rem; }
  .contact-wrap { border-left:0; border-right:0; }
  .contact-left, .contact-right { padding:2.5rem var(--pad); }
  .price-layout { padding:3rem var(--pad); }
  .price-table tr { display:block; padding:1rem 0; }
  .price-table th, .price-table td { display:block; width:auto; text-align:left; padding:0; white-space:normal; }
  .price-table td { margin-top:0.6rem; }
  .price-table td small { display:inline; margin-right:0.4rem; }
  .price-table td .vat { display:block; margin-top:0.2rem; }
  .page-hero h1, .about-hero h1 { font-size:clamp(2rem,8.6vw,2.6rem); }
  .article-hero { padding:3.5rem var(--pad) 2.5rem; }
  .article-layout { padding:2.5rem var(--pad) 3.5rem; }
  .articles-wrap { padding:2.5rem var(--pad) 3.5rem; }
  .related { padding:3.5rem var(--pad); }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; }
}
@media (max-width:479px) {
  .stats-inner { grid-template-columns:1fr; }
  .stat, .stat:nth-child(2n+1) { padding:1.3rem 0; border-right:0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:center; }
  .stat:last-child { border-bottom:0; }
  .stat strong { font-size:1.6rem; margin:0; }
  .eyebrow { letter-spacing:0.14em; }
  .article-hero h1 { font-size:clamp(1.55rem,7.6vw,2rem); }
}
@media (hover:none) {
  .svc-card-link:hover, .article-card:hover, .tile:hover { background:var(--bg2); }
  .svc-card-link:hover::before, .article-card:hover::before { transform:scaleX(0); }
}
@supports (padding:max(0px)) {
  .site-nav { padding-left:max(var(--pad),env(safe-area-inset-left)); padding-right:max(var(--pad),env(safe-area-inset-right)); }
}