/* ══════════════════════════════════════════════════════════════
   D.O.F Tech Oy — Verkkosivumarkkinointikokonaisuus v3.0
   30.4.2026
   Yhdistää: v5.0 ekosysteemi + v4.0 presentaatio + teematyökalu + web-PNG-logo
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  /* Värimuuttujat — vaihdetaan teematyökalulla */
  --blue:#0072bc; --blue-dk:#1a3a5c; --blue-lt:#00a3ff;
  --blue-pale:#e8f4ff; --blue-mid:#c8dff5;
  --orange:#e07820; --orange-lt:#f5a24b;
  --green:#2da44e; --green-lt:#e6f9ec;
  --amber:#d4a017; --purple:#7c3aed;
  --bg:#f0f5fa; --bg2:#ffffff;
  --text-dk:#1a3a5c; --text-md:#2d5a8e; --text-lt:#5a89b8;
  --surface:#ffffff; --border:#c8dff5;
  --r:14px; --r-sm:8px;
  --shadow:0 6px 28px rgba(0,114,188,.12);
  --shadow-lg:0 16px 52px rgba(0,114,188,.18);
  --nav-h:58px;
  --logo-main-fill:#ffd966;
}

html{scroll-behavior:smooth}
body{
  font-family:'DM Sans','Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text-dk);
  min-height:100vh;
  overflow-x:hidden;
}

/* ── TOPNAV ─────────────────────────────────────────────── */
#topnav {
  position:sticky; top:0; z-index:200;
  height:var(--nav-h);
  background:linear-gradient(90deg,var(--blue-dk) 0%,var(--blue) 65%,var(--blue-lt) 100%);
  display:flex; align-items:center; gap:0;
  padding:0 28px;
  box-shadow:0 2px 20px rgba(0,0,0,.28);
}
.nav-brand {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-size:24px; color:#fff;
  letter-spacing:-.01em; margin-right:20px;
  white-space:nowrap; flex-shrink:0;
  text-decoration:none;
}
.nav-brand span{color:#ffd966}

/* D.O.F Tech Oy — teematyökaluun sopiva PNG-logo vasempaan yläkulmaan
   Logo on upotettu HTML-tiedostoon data-URI-muodossa, jolloin tiedosto toimii myös yksinään. */
.nav-brand.logo-brand{
  width:244px; min-width:244px; height:46px;
  padding:5px 12px 5px 8px; margin-right:18px;
  border:1px solid rgba(255,255,255,.46);
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.82) 58%,rgba(232,244,255,.74));
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:flex-start;
  cursor:pointer; flex-shrink:0;
  line-height:1; overflow:hidden;
  backdrop-filter:blur(8px);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.nav-brand.logo-brand:focus-visible{
  outline:2px solid #ffd966;
  outline-offset:4px; border-radius:18px;
}
.dof-logo{
  display:block;
  width:100%; height:36px;
  object-fit:contain; object-position:left center;
  filter:drop-shadow(0 2px 4px rgba(0,31,75,.18));
  transition:transform .18s ease, filter .18s ease;
}
.logo-brand:hover{
  transform:translateY(-1px);
  border-color:rgba(255,217,102,.8);
  background:
    linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,.88) 55%,rgba(232,244,255,.82));
  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,217,102,.22),
    inset 0 0 0 1px rgba(255,255,255,.34);
}
.logo-brand:hover .dof-logo{
  transform:scale(1.018);
  filter:drop-shadow(0 3px 6px rgba(0,31,75,.22));
}
@media(max-width:1100px){
  .nav-brand.logo-brand{width:210px;min-width:210px;margin-right:12px}
  .dof-logo{height:34px}
}
@media(max-width:900px){
  .nav-brand.logo-brand{width:172px;min-width:172px;margin-right:10px;padding-left:7px;padding-right:9px}
  .dof-logo{height:32px}
}
@media(max-width:560px){
  #topnav{padding-left:12px;padding-right:12px}
  .nav-brand.logo-brand{width:148px;min-width:148px;height:42px;margin-right:8px;padding:4px 8px 4px 6px;border-radius:14px}
  .dof-logo{height:30px}
}
.nav-links {
  display:flex; gap:0; flex:1;
  overflow-x:auto; scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-link {
  display:flex; align-items:center; gap:5px;
  padding:0 13px; height:var(--nav-h);
  font-size:11px; font-weight:600; color:rgba(255,255,255,.78);
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:3px solid transparent;
  transition:all .18s; white-space:nowrap;
  cursor:pointer; border-top:none; border-left:none; border-right:none;
  background:none; font-family:'DM Sans',sans-serif;
}
.nav-link:hover,.nav-link.active{
  color:#fff; border-bottom-color:#ffd966;
  background:rgba(255,255,255,.09);
}
.nav-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* Sivunumero */
.slide-ctr{
  position:fixed; bottom:10px; right:68px;
  font-size:11px; font-weight:700;
  color:rgba(255,255,255,.9);
  background:rgba(26,58,92,.8);
  padding:3px 11px; border-radius:999px;
  z-index:301; pointer-events:none;
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.06em; backdrop-filter:blur(6px);
}

/* Nuolinäppäimet */
.nav-arr{
  position:fixed; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(26,58,92,.72);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:150;
  transition:all .2s; opacity:.5;
  backdrop-filter:blur(6px);
}
.nav-arr:hover{background:var(--blue);opacity:1}
#navPrev{left:12px}
#navNext{right:12px}

/* ── SIVURAKENNE ─────────────────────────────────────────── */
.page{display:none}
.page.active{display:block}

/* Slide-pohja — koko näyttö */
.slide{
  min-height:calc(100vh - var(--nav-h));
  position:relative; overflow:hidden;
  display:grid; align-items:start;
  padding:0;
}

/* Yläkaista */
.slide-band{
  position:absolute; top:0; left:0; right:0; height:5px;
  z-index:2;
}

/* ── HERO-OSIO: otsikko + KPI-palkki ─────────────────────── */
.slide-hero{
  padding:36px 52px 24px;
  display:grid; grid-template-columns:1fr auto;
  gap:32px; align-items:end;
  position:relative; z-index:1;
}
.slide-label{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:10px;
}
.slide-h1{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(40px,5.5vw,72px);
  font-weight:900; line-height:.92;
  letter-spacing:-.02em;
}
.slide-tagline{
  font-size:clamp(13px,1.3vw,16px);
  color:var(--text-md); line-height:1.5;
  max-width:580px; margin-top:12px;
}

/* KPI-palkki */
.kpi-bar{
  display:flex; gap:0;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden; flex-shrink:0;
  align-self:start; margin-top:8px;
}
.kpi-item{
  padding:16px 22px; text-align:center;
  border-right:1px solid var(--border);
  min-width:100px;
}
.kpi-item:last-child{border-right:none}
.kpi-val{
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px; font-weight:900;
  letter-spacing:-.02em; line-height:1;
}
.kpi-lbl{
  font-size:9px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-lt);
  margin-top:4px;
}

/* ── SISÄLTÖRUUDUKKO ─────────────────────────────────────── */
.slide-body{
  padding:0 52px 80px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:start;
}
.slide-body.full{grid-template-columns:1fr}
.slide-body.thirds{grid-template-columns:1fr 1fr 1fr}

/* ── OMINAISUUS-KORTIT ───────────────────────────────────── */
.feat-stack{display:flex;flex-direction:column;gap:10px}
.feat-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 20px;
  display:grid; grid-template-columns:40px 1fr;
  gap:12px; align-items:start;
  box-shadow:0 2px 8px rgba(0,114,188,.06);
  transition:box-shadow .2s, transform .18s;
  cursor:default;
}
.feat-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.feat-icon{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.feat-title{
  font-size:13px; font-weight:700;
  color:var(--text-dk); margin-bottom:4px;
}
.feat-desc{
  font-size:11.5px; color:var(--text-md);
  line-height:1.5;
}

/* ── ALAPALVELUT / OHJELMAT LISTA ────────────────────────── */
.sub-panel{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.sub-panel-hdr{
  padding:14px 18px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.sub-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  transition:background .14s; cursor:default;
}
.sub-item:last-child{border-bottom:none}
.sub-item:hover{background:var(--blue-pale)}
.sub-icon{font-size:18px;flex-shrink:0;width:26px;text-align:center}
.sub-name{font-size:12px;font-weight:600;color:var(--text-dk);flex:1}
.sub-desc{font-size:10.5px;color:var(--text-lt);line-height:1.35;margin-top:2px}
.sub-badge{
  font-size:9px; font-weight:700;
  padding:2px 8px; border-radius:999px;
  white-space:nowrap; flex-shrink:0;
}

/* ── QR-KORTTI ───────────────────────────────────────────── */
.qr-card{
  background:var(--blue-dk);
  border-radius:var(--r);
  padding:18px 20px;
  display:flex; align-items:center; gap:16px;
  margin-top:12px;
  box-shadow:var(--shadow);
}
.qr-card img{
  width:72px; height:72px; flex-shrink:0;
  border-radius:8px; background:#fff; padding:4px;
}
.qr-url{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px; font-weight:900; color:#fff;
}
.qr-sub{font-size:11px;color:rgba(255,255,255,.65);margin-top:3px}

/* ── PILL-RIVI ───────────────────────────────────────────── */
.pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill{
  padding:5px 12px; border-radius:999px;
  font-size:11px; font-weight:600;
  background:var(--blue-pale);
  color:var(--blue-dk);
  border:1px solid var(--blue-mid);
}

/* ── CTA-NAPPI ───────────────────────────────────────────── */
.cta-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 22px;
  background:var(--blue);
  color:#fff;
  border:none; border-radius:var(--r-sm);
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:700;
  letter-spacing:.04em;
  cursor:pointer; transition:all .18s;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,114,188,.35);
}
.cta-btn:hover{background:var(--blue-dk);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,114,188,.45)}
.cta-btn.secondary{background:transparent;color:var(--blue);border:2px solid var(--blue);box-shadow:none}
.cta-btn.secondary:hover{background:var(--blue-pale)}

/* ── SLIDE-FOOTER ────────────────────────────────────────── */
.slide-foot{
  position:absolute; bottom:14px; left:52px; right:52px;
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--text-lt);
  pointer-events:none; font-family:'DM Mono',monospace;
}

/* ── ANIMAATIOT ──────────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.page.active .ain{animation:fadeUp .45s ease both}
.page.active .ain:nth-child(1){animation-delay:.04s}
.page.active .ain:nth-child(2){animation-delay:.11s}
.page.active .ain:nth-child(3){animation-delay:.19s}
.page.active .ain:nth-child(4){animation-delay:.27s}
.page.active .ain:nth-child(5){animation-delay:.35s}
.page.active .ain:nth-child(6){animation-delay:.43s}

/* ── ETUSIVU (intro) ─────────────────────────────────────── */
#p0{background:var(--bg2)}
#p0 .slide-band{background:linear-gradient(90deg,var(--blue-dk),var(--blue),var(--blue-lt))}
.intro-grid{
  padding:52px;
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:52px; align-items:center;
  min-height:calc(100vh - var(--nav-h));
}
.intro-eyebrow{
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--blue); margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.pulse{
  display:inline-block; width:7px; height:7px;
  border-radius:50%; background:var(--green);
  animation:pulseAnim 2s infinite;
}
@keyframes pulseAnim{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.85)}}
.intro-h1{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(48px,6vw,82px);
  font-weight:900; line-height:.9;
  letter-spacing:-.02em;
  color:var(--text-dk);
  margin-bottom:20px;
}
.intro-h1 span{color:var(--blue)}
.intro-p{
  font-size:clamp(14px,1.4vw,17px);
  color:var(--text-md); line-height:1.6;
  max-width:540px; margin-bottom:28px;
}
.intro-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}

/* KPI-ruudukko etusivulla */
.intro-kpis{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-bottom:28px;
}
.intro-kpi{
  background:var(--blue-pale);
  border:1px solid var(--blue-mid);
  border-radius:var(--r);
  padding:16px;
}
.intro-kpi-val{
  font-family:'Barlow Condensed',sans-serif;
  font-size:32px; font-weight:900;
  color:var(--blue); line-height:1;
}
.intro-kpi-lbl{font-size:10px;color:var(--text-lt);text-transform:uppercase;letter-spacing:.07em;margin-top:4px}

/* Palvelukorttihila etusivulla */
.svc-grid{
  display:flex; flex-direction:column; gap:8px;
}
.svc-card{
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  padding:14px 18px;
  display:flex; align-items:center; gap:14px;
  cursor:pointer;
  transition:all .18s;
  text-decoration:none;
}
.svc-card:hover{
  border-color:var(--blue);
  background:var(--blue-pale);
  transform:translateX(4px);
}
.svc-card-icon{font-size:24px;flex-shrink:0}
.svc-card-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px; font-weight:700;
  color:var(--text-dk); line-height:1.1;
}
.svc-card-url{font-size:10px;color:var(--blue);margin-top:2px;font-family:'DM Mono',monospace}
.svc-card-arr{margin-left:auto;color:var(--text-lt);font-size:18px;flex-shrink:0}

/* ── SIVUKOHTAISET TEEMAT ────────────────────────────────── */
/* p1 — energia sininen */
#p1{background:#fff}
#p1 .slide-band{background:linear-gradient(90deg,var(--blue-dk),var(--blue))}
#p1 .slide-label{background:#e8f4ff;color:var(--blue);border:1px solid rgba(0,114,188,.3)}
#p1 .feat-icon{background:#e8f4ff}
#p1 .kpi-val{color:var(--blue)}
#p1 .sub-panel-hdr{background:#e8f4ff;color:var(--blue-dk)}
#p1 .sub-badge{background:var(--blue);color:#fff}
#p1 .qr-card{background:var(--blue-dk)}

/* p2 — rakennekirjasto oranssi */
#p2{background:#fff8f3}
#p2 .slide-band{background:linear-gradient(90deg,#8b3a0f,var(--orange))}
#p2 .slide-label{background:#fff3e0;color:var(--orange);border:1px solid rgba(224,120,32,.3)}
#p2 .feat-icon{background:#fff3e0}
#p2 .kpi-val{color:var(--orange)}
#p2 .sub-panel-hdr{background:#fff3e0;color:#7c3300}
#p2 .sub-badge{background:var(--orange);color:#fff}
#p2 .qr-card{background:#7c3300}
#p2 .pill{background:#fff3e0;color:#7c3300;border-color:rgba(224,120,32,.25)}
#p2 .cta-btn{background:var(--orange)}
#p2 .cta-btn:hover{background:#7c3300}
#p2 .svc-card:hover{border-color:var(--orange);background:#fff3e0}

/* p3 — calculationtools sininen */
#p3{background:#f0f5ff}
#p3 .slide-band{background:linear-gradient(90deg,#1a3a5c,#0072bc,#00a3ff)}
#p3 .slide-label{background:#e8f4ff;color:var(--blue);border:1px solid rgba(0,114,188,.3)}
#p3 .feat-icon{background:#e8f4ff}
#p3 .kpi-val{color:var(--blue)}
#p3 .sub-panel-hdr{background:#e8f4ff;color:var(--blue-dk)}
#p3 .sub-badge{background:var(--blue);color:#fff}
#p3 .qr-card{background:var(--blue)}

/* p4 — talonhuoltokirja vihreä */
#p4{background:#f0fdf4}
#p4 .slide-band{background:linear-gradient(90deg,#155e30,var(--green))}
#p4 .slide-label{background:#e6f9ec;color:var(--green);border:1px solid rgba(45,164,78,.3)}
#p4 .feat-icon{background:#e6f9ec}
#p4 .kpi-val{color:var(--green)}
#p4 .sub-panel-hdr{background:#e6f9ec;color:#155e30}
#p4 .sub-badge{background:var(--green);color:#fff}
#p4 .qr-card{background:#155e30}
#p4 .pill{background:#e6f9ec;color:#155e30;border-color:rgba(45,164,78,.25)}
#p4 .cta-btn{background:var(--green)}
#p4 .cta-btn:hover{background:#155e30}
#p4 .svc-card:hover{border-color:var(--green);background:#e6f9ec}

/* poistettu näkymä */
#p5{background:#f5f0ff}
#p5 .slide-band{background:linear-gradient(90deg,#4c1d95,var(--purple))}
#p5 .slide-label{background:#f0ebff;color:var(--purple);border:1px solid rgba(124,58,237,.3)}
#p5 .feat-icon{background:#f0ebff}
#p5 .kpi-val{color:var(--purple)}
#p5 .sub-panel-hdr{background:#f0ebff;color:#4c1d95}
#p5 .sub-badge{background:var(--purple);color:#fff}
#p5 .qr-card{background:#4c1d95}
#p5 .pill{background:#f0ebff;color:#4c1d95;border-color:rgba(124,58,237,.2)}
#p5 .cta-btn{background:var(--purple)}
#p5 .cta-btn:hover{background:#4c1d95}
#p5 .svc-card:hover{border-color:var(--purple);background:#f0ebff}

/* p6 — Finnwood tummanvihreä */
#p6{background:#f0faf5}
#p6 .slide-band{background:linear-gradient(90deg,#1a4d2e,#2da44e,#4ade80)}
#p6 .slide-label{background:#d1fae5;color:#065f46;border:1px solid rgba(6,95,70,.3)}
#p6 .feat-icon{background:#d1fae5}
#p6 .kpi-val{color:#065f46}
#p6 .sub-panel-hdr{background:#d1fae5;color:#065f46}
#p6 .sub-badge{background:#065f46;color:#fff}
#p6 .qr-card{background:#065f46}
#p6 .pill{background:#d1fae5;color:#065f46;border-color:rgba(6,95,70,.2)}
#p6 .cta-btn{background:#065f46}
#p6 .cta-btn:hover{background:#1a4d2e}
#p6 .svc-card:hover{border-color:#065f46;background:#d1fae5}

/* p7 — betoniohjelmat harmaa */
#p7{background:#fafaf8}
#p7 .slide-band{background:linear-gradient(90deg,#44403c,#78716c,#a8a29e)}
#p7 .slide-label{background:#f5f5f4;color:#44403c;border:1px solid rgba(68,64,60,.3)}
#p7 .feat-icon{background:#f5f5f4}
#p7 .kpi-val{color:#44403c}
#p7 .sub-panel-hdr{background:#f5f5f4;color:#1c1917}
#p7 .sub-badge{background:#44403c;color:#fff}
#p7 .qr-card{background:#44403c}
#p7 .pill{background:#f5f5f4;color:#44403c;border-color:rgba(68,64,60,.2)}
#p7 .cta-btn{background:#44403c}
#p7 .cta-btn:hover{background:#1c1917}
#p7 .svc-card:hover{border-color:#78716c;background:#f5f5f4}

/* ── YHTEYSTIEDOT-SIVU ────────────────────────────────────── */
#p8{background:#fff}
#p8 .slide-band{background:linear-gradient(90deg,var(--blue-dk),var(--blue))}
.contact-layout{
  padding:40px 52px 80px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
}
.contact-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px;
  box-shadow:var(--shadow);
}
.contact-card h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-lt); margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.contact-row{display:flex;gap:10px;margin-bottom:10px}
.contact-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-lt);min-width:68px;padding-top:2px;flex-shrink:0}
.contact-val{font-size:12px;color:var(--text-dk);line-height:1.5}
.contact-val a{color:var(--blue);text-decoration:none}
.contact-val a:hover{text-decoration:underline}

.plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.plat{
  padding:10px 12px;
  background:var(--blue-pale);
  border:1px solid var(--blue-mid);
  border-radius:var(--r-sm);
  cursor:pointer; transition:all .16s;
}
.plat:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.plat:hover strong,.plat:hover span{color:#fff}
.plat strong{display:block;font-size:11px;color:var(--blue-dk);margin-bottom:2px}
.plat span{font-size:9px;color:var(--text-lt)}

.cta-block-big{
  background:var(--blue-dk);
  border-radius:var(--r);
  padding:28px 32px;
  display:flex; align-items:center;
  justify-content:space-between; gap:24px;
  flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}
.cta-block-big h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px; font-weight:900; color:#fff;
  margin-bottom:6px;
}
.cta-block-big p{font-size:13px;color:rgba(255,255,255,.7);max-width:480px}
.cta-block-big .cta-btn{background:#ffd966;color:var(--blue-dk)}
.cta-block-big .cta-btn:hover{background:#fff}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1100px){
  .slide-body{grid-template-columns:1fr!important}
  .intro-grid{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .slide-hero,.slide-body,.contact-layout,.intro-grid{padding-left:20px;padding-right:20px}
  .slide-body{padding-bottom:60px}
  .nav-arr{display:none}
  .contact-layout{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   ALISIVUPANEELIT — Talonhuoltokirja.fi & Sensorimaailma
   Versio 2.0 · 29.4.2026
   ═══════════════════════════════════════════════════════════ */

/* Lue lisää -nappi slide-sisällöissä */
.sub-more-btn {
  display:inline-flex; align-items:center; gap:7px;
  margin-top:14px; padding:10px 20px;
  border-radius:var(--r-sm);
  font-size:12px; font-weight:700;
  cursor:pointer; transition:all .18s;
  border:1.5px solid; font-family:'DM Sans',sans-serif;
  letter-spacing:.02em;
}
.sub-more-btn.green {
  background:rgba(45,164,78,.1); color:#155e30;
  border-color:rgba(45,164,78,.4);
}
.sub-more-btn.green:hover { background:#155e30; color:#fff; }
.sub-more-btn.blue {
  background:rgba(0,212,255,.08); color:#0066aa;
  border-color:rgba(0,114,188,.35);
}
.sub-more-btn.blue:hover { background:var(--blue); color:#fff; }

/* Overlay-tausta */
.panel-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  animation:overlayIn .22s ease;
}
.panel-overlay.open { display:block; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }

/* Slideout-paneeli */
.sub-panel-drawer {
  position:fixed; top:0; right:-100%; bottom:0;
  width:min(860px,96vw); z-index:501;
  background:#fff; overflow-y:auto; overflow-x:hidden;
  box-shadow:-8px 0 48px rgba(0,0,0,.28);
  transition:right .3s cubic-bezier(.22,1,.36,1);
  scrollbar-width:thin;
}
.sub-panel-drawer.open { right:0; }

/* Paneelin yläpalkki */
.drawer-topbar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  border-bottom:1px solid rgba(0,0,0,.09);
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
}
.drawer-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px; font-weight:900; letter-spacing:-.01em;
}
.drawer-tabs {
  display:flex; gap:0; margin-left:16px; flex:1;
  overflow-x:auto; scrollbar-width:none;
}
.drawer-tabs::-webkit-scrollbar { display:none; }
.drawer-tab {
  padding:6px 16px;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  background:none; border-top:none; border-left:none; border-right:none;
  font-family:'DM Sans',sans-serif; transition:all .15s;
  color:#7a9ab8;
}
.drawer-tab.active,.drawer-tab:hover { color:#155e30; border-bottom-color:#2da44e; }
.drawer-tab.blue-tab.active,.drawer-tab.blue-tab:hover { color:#0066aa; border-bottom-color:#0072bc; }
.drawer-close {
  width:32px; height:32px; border-radius:8px;
  border:1px solid #e2ecf5; background:transparent;
  font-size:16px; cursor:pointer; color:#7a9ab8;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0; margin-left:12px;
}
.drawer-close:hover { background:#ffe4e4; border-color:#f87171; color:#dc2626; }

/* Tab-sisällöt */
.drawer-content { display:none; }
.drawer-content.active { display:block; }

/* ── THK CLAUDE 2 sisältö ─── */
/* Vihreä hero paneelissa */
.dp-hero {
  padding:36px 32px 28px;
  background:linear-gradient(150deg, #155e30 0%, #2da44e 60%, #4ade80 100%);
  position:relative; overflow:hidden; color:#fff;
}
.dp-hero::after {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#ffd966,#fff,#ffd966);
}
.dp-hero-h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(32px,4vw,52px); font-weight:900;
  line-height:.9; letter-spacing:-.02em; margin-bottom:10px;
}
.dp-hero-h1 em { font-style:normal; color:#ffd966; }
.dp-hero-p { font-size:13px; color:rgba(255,255,255,.8); line-height:1.55; max-width:560px; margin-bottom:18px; }
.dp-kpis { display:flex; gap:1px; background:rgba(255,255,255,.2); border-radius:10px; overflow:hidden; margin-top:14px; }
.dp-kpi { flex:1; background:rgba(255,255,255,.1); padding:12px; text-align:center; }
.dp-kpi-v { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:900; color:#ffd966; line-height:1; }
.dp-kpi-l { font-size:9px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }

/* Paneelin section */
.dp-section { padding:28px 32px; border-bottom:1px solid #e8f4e8; }
.dp-section:last-child { border-bottom:none; }
.dp-eyebrow {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:#2da44e; margin-bottom:6px;
  display:flex; align-items:center; gap:7px;
}
.dp-eyebrow::before { content:'//'; color:#bbf7d0; }
.dp-h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(20px,2.5vw,28px); font-weight:900;
  color:#14532d; margin-bottom:6px; letter-spacing:-.01em;
}
.dp-desc { font-size:12px; color:#4d7a5a; line-height:1.65; margin-bottom:18px; }

/* Elinkaari-grid paneelissa */
.dp-lc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media(max-width:600px){.dp-lc-grid{grid-template-columns:1fr 1fr;}}
.dp-lc-card {
  background:#f0fdf4; border:1px solid #bbf7d0;
  border-radius:10px; padding:14px;
  transition:all .18s;
}
.dp-lc-card:hover { border-color:#2da44e; transform:translateY(-2px); }
.dp-lc-num { font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:900; color:#bbf7d0; line-height:1; }
.dp-lc-icon { font-size:18px; margin:4px 0; }
.dp-lc-title { font-size:12px; font-weight:700; color:#14532d; margin-bottom:3px; }
.dp-lc-desc { font-size:10px; color:#4d7a5a; line-height:1.45; }

/* Ominaisuus-kortit paneelissa */
.dp-feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:560px){.dp-feat-grid{grid-template-columns:1fr;}}
.dp-feat {
  background:#f0fdf4; border:1.5px solid #bbf7d0;
  border-radius:10px; padding:14px;
  display:flex; gap:12px; align-items:flex-start;
  transition:border-color .18s;
}
.dp-feat:hover { border-color:#2da44e; }
.dp-feat-ico {
  width:38px; height:38px; border-radius:9px;
  background:#e6f9ec; border:1px solid #bbf7d0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.dp-feat-title { font-size:12px; font-weight:700; color:#14532d; margin-bottom:4px; }
.dp-feat-desc { font-size:10.5px; color:#4d7a5a; line-height:1.5; }
.dp-feat-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.dp-feat-tag {
  font-size:9px; padding:2px 7px; border-radius:999px;
  background:#e6f9ec; color:#155e30; border:1px solid #bbf7d0;
}

/* IoT live-panel (THK) */
.dp-iot-panel {
  background:#155e30; border-radius:12px; padding:18px;
  color:#fff; margin-bottom:14px;
}
.dp-iot-hdr {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.5);
  margin-bottom:12px; display:flex; align-items:center; gap:7px;
}
.dp-live-dot { width:6px; height:6px; border-radius:50%; background:#4ade80; animation:pls 1.8s infinite; }
@keyframes pls { 0%,100%{opacity:1} 50%{opacity:.3} }
.dp-sensor-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin-bottom:6px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:7px;
}
.dp-s-ico { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.dp-s-name { font-size:10px; color:rgba(255,255,255,.6); flex:1; font-family:'DM Mono',monospace; }
.dp-s-val { font-family:'DM Mono',monospace; font-size:13px; font-weight:500; }
.dp-s-val.ok { color:#4ade80; }
.dp-s-val.warn { color:#fbbf24; }
.dp-s-val.info { color:#60a5fa; }

/* Raportit-grid paneelissa */
.dp-rep-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:560px){.dp-rep-grid{grid-template-columns:1fr 1fr;}}
.dp-rep {
  background:#f0fdf4; border:1.5px solid #bbf7d0;
  border-radius:10px; padding:14px;
  transition:all .18s; position:relative; overflow:hidden;
}
.dp-rep::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:#2da44e; transform:scaleX(0); transform-origin:left; transition:transform .22s;
}
.dp-rep:hover { border-color:#2da44e; }
.dp-rep:hover::after { transform:scaleX(1); }
.dp-rep-n { font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:900; color:#bbf7d0; line-height:1; }
.dp-rep-ico { font-size:16px; margin:3px 0; }
.dp-rep-title { font-size:12px; font-weight:700; color:#14532d; margin-bottom:3px; }
.dp-rep-short { font-size:10px; color:#4d7a5a; margin-bottom:6px; }
.dp-rep-who { font-size:9px; font-weight:700; color:#2da44e; text-transform:uppercase; letter-spacing:.06em; padding-top:6px; border-top:1px solid #bbf7d0; }

/* Integraatiot paneelissa */
.dp-int-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:560px){.dp-int-grid{grid-template-columns:1fr;}}
.dp-int {
  background:#f0fdf4; border:1px solid #bbf7d0;
  border-radius:10px; padding:14px;
  display:flex; gap:10px; align-items:flex-start; transition:all .18s;
}
.dp-int:hover { border-color:#2da44e; transform:translateX(2px); }
.dp-int-ico { font-size:20px; flex-shrink:0; }
.dp-int-title { font-size:12px; font-weight:700; color:#14532d; margin-bottom:3px; }
.dp-int-desc { font-size:10px; color:#4d7a5a; line-height:1.5; }
.dp-int-badge {
  display:inline-block; margin-top:5px;
  font-size:9px; padding:2px 7px; border-radius:999px;
  background:#e6f9ec; color:#155e30; border:1px solid #bbf7d0;
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}

/* ── GPT v3 moduuli-tyyli paneelissa ─── */
.dp-gpt-modules { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:560px){.dp-gpt-modules{grid-template-columns:1fr;}}
.dp-gpt-mod {
  background:#f0fdf4; border:1.5px solid #bbf7d0;
  border-radius:10px; padding:14px; transition:all .18s;
}
.dp-gpt-mod:hover { border-color:#2da44e; }
.dp-gpt-mod-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dp-gpt-mod h3 { font-size:13px; font-weight:700; color:#14532d; }
.dp-gpt-badge {
  font-size:9px; padding:2px 7px; border-radius:999px;
  background:#e6f9ec; color:#155e30; border:1px solid #bbf7d0;
  font-weight:700; letter-spacing:.04em;
}
.dp-gpt-mini { font-size:10px; font-weight:600; color:#4d7a5a; margin-bottom:4px; font-style:italic; }
.dp-gpt-desc { font-size:10px; color:#4d7a5a; line-height:1.5; margin-bottom:6px; }
.dp-gpt-footer { font-size:9px; color:#2da44e; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-top:1px solid #bbf7d0; padding-top:5px; }

/* Flow-steps */
.dp-flow { display:flex; flex-direction:column; gap:10px; }
.dp-flow-step {
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 16px; background:#f0fdf4;
  border:1px solid #bbf7d0; border-radius:10px; transition:all .18s;
}
.dp-flow-step:hover { border-color:#2da44e; }
.dp-flow-num {
  width:28px; height:28px; border-radius:50%;
  background:#2da44e; color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:900;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dp-flow-title { font-size:12px; font-weight:700; color:#14532d; margin-bottom:3px; }
.dp-flow-desc { font-size:10px; color:#4d7a5a; line-height:1.5; }

/* ── SENSORIMAAILMA dark paneel ─── */
.dp-sensor-hero {
  padding:32px; position:relative; overflow:hidden;
  background:radial-gradient(ellipse 120% 80% at 65% 50%, rgba(0,212,255,.1), transparent 55%),
    #04080f;
  color:#e0f0ff;
}
.dp-sensor-hero::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#00d4ff,#ff4da6,#00d4ff);
  animation:scanLine 4s ease-in-out infinite;
}
@keyframes scanLine { 0%,100%{opacity:.5} 50%{opacity:1} }
.dp-sensor-h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(28px,4vw,48px); font-weight:900;
  line-height:.9; letter-spacing:-.02em; margin-bottom:10px;
}
.dp-sensor-h1 em {
  font-style:normal;
  background:linear-gradient(135deg,#00d4ff,#ff4da6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.dp-sensor-sub {
  font-family:'DM Mono',monospace;
  font-size:11px; color:rgba(224,240,255,.6); line-height:1.65; margin-bottom:14px;
}
.dp-sensor-kpis { display:flex; gap:1px; background:rgba(0,212,255,.15); border-radius:9px; overflow:hidden; }
.dp-sensor-kpi { flex:1; background:rgba(0,212,255,.07); padding:10px; text-align:center; }
.dp-sensor-kpi-v { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:900; color:#00d4ff; line-height:1; }
.dp-sensor-kpi-l { font-family:'DM Mono',monospace; font-size:8px; color:rgba(224,240,255,.5); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }

/* Sensor dark section */
.dp-s-section { padding:24px 32px; border-bottom:1px solid rgba(0,212,255,.1); background:#04080f; }
.dp-s-section:last-child { border-bottom:none; }
.dp-s-eyebrow {
  font-family:'DM Mono',monospace;
  font-size:9px; text-transform:uppercase; letter-spacing:.14em;
  color:#00d4ff; margin-bottom:6px;
  display:flex; align-items:center; gap:6px;
}
.dp-s-eyebrow::before { content:'//'; color:rgba(0,212,255,.3); }
.dp-s-h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,2.2vw,24px); font-weight:900;
  color:#e0f0ff; margin-bottom:6px;
}
.dp-s-desc { font-family:'DM Mono',monospace; font-size:11px; color:#4a6a8a; line-height:1.6; margin-bottom:16px; }

/* Sensor cards */
.dp-sc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:600px){.dp-sc-grid{grid-template-columns:1fr 1fr;}}
.dp-sc {
  background:rgba(255,255,255,.03); border:1px solid rgba(0,212,255,.12);
  border-radius:9px; padding:14px; transition:all .2s; position:relative; overflow:hidden;
}
.dp-sc::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity .2s; }
.dp-sc.cyan::before { background:linear-gradient(90deg,#00d4ff,#ff4da6); }
.dp-sc.mag::before { background:linear-gradient(90deg,#ff4da6,#00d4ff); }
.dp-sc.grn::before { background:#00ffa3; }
.dp-sc.amb::before { background:#ffd700; }
.dp-sc:hover { border-color:rgba(0,212,255,.35); transform:translateY(-2px); }
.dp-sc:hover::before { opacity:1; }
.dp-sc-ico { font-size:20px; margin-bottom:6px; }
.dp-sc-unit { font-family:'DM Mono',monospace; font-size:9px; color:#4a6a8a; letter-spacing:.06em; }
.dp-sc-name { font-size:12px; font-weight:700; color:#e0f0ff; margin-bottom:4px; }
.dp-sc-desc { font-size:10px; color:#4a6a8a; line-height:1.5; }
.dp-sc-sample {
  margin-top:9px; padding-top:8px; border-top:1px solid rgba(0,212,255,.1);
  display:flex; justify-content:space-between;
  font-family:'DM Mono',monospace; font-size:9px; color:#4a6a8a;
}
.dp-sc-sample .ok  { color:#00ffa3; font-weight:700; }
.dp-sc-sample .warn{ color:#ffd700; font-weight:700; }
.dp-sc-sample .info{ color:#00d4ff; font-weight:700; }

/* Use-cases */
.dp-uc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:560px){.dp-uc-grid{grid-template-columns:1fr;}}
.dp-uc {
  background:rgba(255,255,255,.03); border:1px solid rgba(0,212,255,.12);
  border-radius:9px; padding:14px; display:flex; gap:10px; transition:all .18s;
}
.dp-uc:hover { border-color:rgba(0,212,255,.3); transform:translateX(2px); }
.dp-uc-ico { font-size:22px; flex-shrink:0; width:26px; text-align:center; }
.dp-uc-title { font-size:12px; font-weight:700; color:#e0f0ff; margin-bottom:4px; }
.dp-uc-desc { font-size:10px; color:#4a6a8a; line-height:1.5; }

/* Arch layers */
.dp-arch-layer {
  background:rgba(255,255,255,.03); border:1px solid rgba(0,212,255,.12);
  border-radius:0; padding:14px 18px; border-bottom:none;
  transition:border-color .2s;
}
.dp-arch-layer:hover { border-color:rgba(0,212,255,.3); }
.dp-arch-layer:first-child { border-radius:10px 10px 0 0; }
.dp-arch-layer:last-child { border-radius:0 0 10px 10px; border-bottom:1px solid rgba(0,212,255,.12); }
.dp-arch-lyr-hdr { font-family:'DM Mono',monospace; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#4a6a8a; margin-bottom:5px; }
.dp-arch-lyr-title { font-size:12px; font-weight:700; color:#e0f0ff; margin-bottom:4px; }
.dp-arch-lyr-desc { font-size:10px; color:#4a6a8a; line-height:1.5; margin-bottom:7px; }
.dp-arch-items { display:flex; flex-wrap:wrap; gap:4px; }
.dp-arch-item {
  font-family:'DM Mono',monospace; font-size:9px; padding:2px 7px; border-radius:4px;
  background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.15); color:#00d4ff;
}
.dp-arch-item.mag { background:rgba(255,77,166,.07); border-color:rgba(255,77,166,.15); color:#ff4da6; }
.dp-arch-item.grn { background:rgba(0,255,163,.07); border-color:rgba(0,255,163,.15); color:#00ffa3; }
.dp-arch-item.amb { background:rgba(255,215,0,.07);  border-color:rgba(255,215,0,.15);  color:#ffd700; }
.dp-arch-connector {
  display:flex; align-items:center; justify-content:center;
  height:22px; background:#04080f;
}
.dp-arch-arr {
  font-family:'DM Mono',monospace; font-size:8px; color:#4a6a8a;
  display:flex; align-items:center; gap:4px;
}
.dp-arch-arr::before,.dp-arch-arr::after {
  content:''; flex:1; min-width:30px; height:1px;
  background:linear-gradient(90deg, transparent, #00d4ff, transparent);
}

body:not([data-mode="presentation"]) .sub-panel-drawer{display:none!important}
body[data-mode="catalog"] .page,body[data-mode="detail"] .page,body:not([data-mode="presentation"]) #topnav,body:not([data-mode="presentation"]) .nav-arr,body:not([data-mode="presentation"]) .slide-ctr{display:none!important}
#serviceNav{position:sticky;top:0;z-index:210;background:var(--blue-dk);color:white;display:flex;align-items:center;gap:12px;padding:14px 4%;flex-wrap:wrap}#serviceNav strong{margin-right:auto}#serviceNav button{background:transparent;border:1px solid #7e9eb9;border-radius:8px;color:white;padding:10px 14px;cursor:pointer;font:inherit}#serviceNav button:hover,#serviceNav button[aria-current="page"]{background:#0072bc}#serviceNav input{padding:11px;border:0;border-radius:8px;max-width:190px;font:inherit}
#serviceApp{overflow-wrap:anywhere;max-width:1240px;margin:auto;padding:45px 26px 70px}#serviceApp h1{font-family:'Barlow Condensed','Segoe UI',sans-serif;font-size:clamp(32px,5vw,58px);line-height:1.08;margin:12px 0 18px}#serviceApp h2{font-size:23px;margin:20px 0 12px}#serviceApp p{line-height:1.65;margin:12px 0}#serviceApp .eyebrow{text-transform:uppercase;letter-spacing:.13em;color:var(--blue);font-weight:700;font-size:13px}.searchbox{background:white;border:1px solid var(--border);border-radius:16px;padding:22px;margin:26px 0}.searchbox label{display:block;font-weight:700;margin-bottom:9px}.searchbox input{width:100%;font:inherit;font-size:19px;padding:16px;border:2px solid var(--blue);border-radius:8px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.filters select{font:inherit;border:1px solid var(--border);border-radius:8px;padding:10px;max-width:100%}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}#serviceApp .svc-card{border:1px solid var(--border);border-radius:16px;background:white;padding:25px;display:flex;flex-direction:column;box-shadow:0 5px 18px #153f6510}#serviceApp .svc-card h2{font-size:23px!important;margin-top:10px!important}#serviceApp .svc-card p{font-size:15px}#serviceApp .svc-card a{margin-top:auto}.svc-tag{font-size:12px;color:var(--blue);font-weight:700}.svc-link{display:inline-block;padding:11px 16px;border-radius:8px;background:var(--blue);color:white!important;text-decoration:none;font-weight:600}.svc-back{color:var(--blue);text-decoration:none}.svc-price{background:#fff4e8;padding:19px;border-radius:12px;border-left:4px solid var(--orange);margin:25px 0}.svc-price strong{display:block;font-size:23px;margin:8px 0}.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.detailgrid section{padding:24px;background:white;border:1px solid var(--border);border-radius:14px}#serviceApp ul{padding-left:22px}#serviceApp li{line-height:1.65;margin:10px 0}#serviceApp details{background:white;border:1px solid var(--border);border-radius:12px;padding:20px;margin:20px 0}#serviceApp summary{cursor:pointer;font-weight:700}#serviceApp details p{white-space:pre-line}.svc-downloads{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.svc-downloads a{border:1px solid var(--blue);border-radius:8px;padding:10px;color:var(--blue);overflow-wrap:anywhere}.svc-footer{margin-top:35px;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--text-md)}mark{background:#ffedab;color:#1a3a5c}*:focus-visible{outline:3px solid #e07820;outline-offset:4px}.presentation-links{padding:10px 4%;background:white;display:flex;gap:12px;flex-wrap:wrap}.presentation-links a{color:var(--blue)}body:not([data-mode="presentation"]) .presentation-links{display:none}
@media(max-width:800px){.cards,.detailgrid{grid-template-columns:1fr 1fr}#serviceNav strong{width:100%}#serviceNav{position:relative}#serviceNav input{max-width:100%}#serviceApp{padding:25px 18px}#serviceApp .svc-card{padding:19px}}
@media(max-width:540px){.cards,.detailgrid{grid-template-columns:1fr}#serviceNav button{font-size:13px;padding:8px}#serviceNav{gap:7px}}
@media print{#serviceNav,#topnav,.nav-arr{display:none!important}#serviceApp{padding:0}.detailgrid{display:block}.detailgrid section{break-inside:avoid}.svc-link{color:black!important;background:none}}

#manufacturerMenu{position:relative;font-size:14px}#manufacturerMenu summary{cursor:pointer;padding:10px 13px;border:1px solid #7e9eb9;border-radius:8px}#manufacturerMenu>div{position:absolute;top:calc(100% + 8px);right:0;width:310px;max-width:85vw;padding:10px;background:white;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg)}#manufacturerMenu a{display:block;padding:11px;color:var(--text-dk);text-decoration:none;line-height:1.4}#manufacturerMenu a:hover{background:var(--blue-pale)}@media(max-width:800px){#manufacturerMenu>div{left:0;right:auto}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}