/* SECU-tuotesivut (secu.fi/kuntotarkastus, /historiaselvitys, secuinspect.com).
   Sama asiakirjailme kuin secu.fi:n etusivulla: muste, paperi, messinkisinetti.
   Yksi teema tarkoituksella, kuten etusivullakin. */
:root{
  color-scheme:light;
  --muste:#0B1A24;--teras:#15303F;--paperi:#F4F2ED;--kortti:#FFFFFF;--viiva:#DFDAD0;
  --himmea:#5E6B75;--brandi:#004BAA;--sinetti:#A8661C;--sinetti-bg:#FAF2E4;
  --vihrea:#2E7D5B;--vihrea-bg:#EDF6F1;--puna:#A83E36;--puna-bg:#FAEFEE;
  --leveys:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paperi);color:var(--muste);
  font:400 16.5px/1.65 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Archivo,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;
  text-wrap:balance;margin:0;line-height:1.12}
h1{font-size:clamp(32px,5.2vw,56px);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(25px,3.4vw,38px);margin-bottom:14px}
h3{font-size:19px;letter-spacing:-.01em;margin-bottom:6px}
p{margin:0 0 16px;max-width:66ch}
a{color:var(--brandi);text-decoration-thickness:1.5px;text-underline-offset:2px}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--sinetti);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:var(--leveys);margin:0 auto;padding:0 16px}
@media(min-width:700px){.wrap{padding:0 24px}}
section{padding:clamp(48px,7vw,80px) 0}
.raita{border-top:1px solid var(--viiva)}
.silma{font:600 11.5px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sinetti);display:block;margin-bottom:14px}
.johdanto{font-size:18px;line-height:1.6;color:var(--himmea);max-width:60ch}

/* Yläpalkki */
.top{background:var(--muste);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.09)}
.top-in{max-width:var(--leveys);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.top .logo img{height:30px;width:auto}
.top nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.top nav a{color:#C3CDD4;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.top nav a:hover{color:#fff}
.top .puh{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:#fff}
.kielet{display:inline-flex;gap:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:3px}
.kielet a{padding:4px 11px;border-radius:99px;font:700 12px Inter,sans-serif;letter-spacing:.04em;color:#AEBCC6}
.kielet a.on{background:#fff;color:var(--muste)}
@media(max-width:860px){.top nav a.piilo{display:none}}
@media(max-width:520px){.top .puh{display:none}}

/* Hero */
.hero{background:var(--muste);color:#EDF1F3;padding:clamp(48px,7vw,84px) 0 clamp(44px,6vw,72px)}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:#7FB2F0}
.hero .johdanto{color:#AEBCC6;font-size:19px;margin-top:20px;max-width:58ch}
.merkki{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(168,102,28,.55);
  background:rgba(168,102,28,.14);color:#E0B071;border-radius:99px;padding:6px 14px;margin-bottom:22px;
  font:500 12px/1.3 'IBM Plex Mono',monospace;letter-spacing:.06em}
.napit{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--sinetti);color:#fff;text-decoration:none;
  padding:14px 26px;border-radius:8px;border:none;cursor:pointer;font:700 16px Archivo,sans-serif;
  letter-spacing:-.01em;transition:background .15s}
.btn:hover{background:#8E5415}
.btn.aave{background:transparent;color:#EDF1F3;border:1.5px solid rgba(255,255,255,.28)}
.btn.aave:hover{background:rgba(255,255,255,.08)}
.btn.tumma{background:var(--muste)}
.btn.tumma:hover{background:#16303F}
.faktat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:40px;
  border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden}
.faktat div{padding:16px 20px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.faktat b{display:block;font:800 clamp(21px,5vw,26px)/1.1 Archivo,sans-serif;color:#fff;letter-spacing:-.02em}
.faktat span{font-size:13.5px;color:#9FB0BC}

/* Kortit */
.ruudukko{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:28px}
.kortti{background:var(--kortti);border:1px solid var(--viiva);border-radius:12px;padding:22px 22px 18px}
.kortti p{font-size:15.5px;color:var(--himmea);margin-bottom:8px}
.kortti .nro{font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--sinetti);
  display:block;margin-bottom:10px}
.kortti.korostus{border-color:var(--sinetti);box-shadow:0 0 0 1px var(--sinetti)}
.hinta{font:800 30px/1 Archivo,sans-serif;letter-spacing:-.02em;margin:6px 0 4px}
.hinta small{font:500 13px Inter,sans-serif;color:var(--himmea);letter-spacing:0}

/* Vaiheet */
.vaiheet{list-style:none;padding:0;margin:28px 0 0;counter-reset:v}
.vaiheet li{display:grid;grid-template-columns:52px 1fr auto;gap:4px 16px;padding:18px 0;border-top:1px solid var(--viiva)}
.vaiheet li::before{counter-increment:v;content:counter(v,decimal-leading-zero);
  font:600 13px 'IBM Plex Mono',monospace;color:var(--sinetti);padding-top:3px}
.vaiheet h3{grid-column:2}
.vaiheet p{grid-column:2;color:var(--himmea);margin:0;font-size:15.5px}
.vaiheet .aika{grid-column:3;grid-row:1;font:500 12.5px 'IBM Plex Mono',monospace;color:var(--himmea);white-space:nowrap}
@media(max-width:560px){.vaiheet li{grid-template-columns:40px 1fr}.vaiheet .aika{grid-column:2;grid-row:auto}}

/* Taulukko */
.taulu{width:100%;border-collapse:collapse;margin-top:24px;background:var(--kortti);border:1px solid var(--viiva);
  border-radius:12px;overflow:hidden;font-size:15.5px}
.taulu td{padding:13px 18px;border-top:1px solid var(--viiva);vertical-align:top}
.taulu tr:first-child td{border-top:none}
.taulu td:last-child{text-align:right;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.taulu tr.paa td{background:var(--sinetti-bg);font-weight:700}

/* Listat */
.tarkka{list-style:none;padding:0;margin:18px 0 0}
.tarkka li{padding:9px 0 9px 28px;position:relative;border-top:1px solid var(--viiva);font-size:15.5px}
.tarkka li::before{content:'';position:absolute;left:4px;top:17px;width:10px;height:6px;
  border-left:2px solid var(--vihrea);border-bottom:2px solid var(--vihrea);transform:rotate(-45deg)}
.maat{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.maat span{background:var(--kortti);border:1px solid var(--viiva);border-radius:99px;padding:5px 13px;font-size:14.5px}

.huom{background:var(--sinetti-bg);border-left:3px solid var(--sinetti);padding:14px 18px;border-radius:0 8px 8px 0;
  font-size:15.5px;margin:22px 0;max-width:72ch}
.kaksi{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:860px){.kaksi{grid-template-columns:1fr 1fr}}

/* UKK */
.ukk details{border-top:1px solid var(--viiva);padding:4px 0}
.ukk summary{cursor:pointer;padding:14px 0;font:700 17px Archivo,sans-serif;letter-spacing:-.01em;list-style:none;
  display:flex;justify-content:space-between;gap:16px}
.ukk summary::-webkit-details-marker{display:none}
.ukk summary::after{content:'+';font:400 22px/1 Inter,sans-serif;color:var(--sinetti)}
.ukk details[open] summary::after{content:'–'}
.ukk details p{color:var(--himmea);font-size:15.5px}

/* Lomake */
.tumma-osio{background:var(--teras);color:#E4EAEE}
.tumma-osio h2{color:#fff}
.tumma-osio .johdanto{color:#AEBCC6}
form.pyynto{display:grid;gap:14px;grid-template-columns:1fr;margin-top:26px;max-width:760px}
@media(min-width:700px){form.pyynto{grid-template-columns:1fr 1fr}form.pyynto .leve{grid-column:1/-1}}
form.pyynto label{display:block;font-size:13.5px;font-weight:600;color:#C9D3DA;margin-bottom:5px}
form.pyynto input,form.pyynto select,form.pyynto textarea{width:100%;font:16px Inter,sans-serif;padding:12px 14px;
  border-radius:8px;border:1px solid #3A5566;background:#0F2532;color:#fff}
form.pyynto textarea{min-height:96px;resize:vertical}
form.pyynto .valinta{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#DCE3E8}
form.pyynto .valinta input{width:20px;height:20px;margin-top:2px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tila{min-height:24px;font-size:15px}
.tila.ok{color:#8FD6B2}.tila.virhe{color:#F2A49C}
.pieni{font-size:13.5px;color:#8FA2AF}
.pieni a{color:#B9D3F2}

/* Alatunniste */
footer{background:var(--muste);color:#9FB0BC;font-size:14px;padding:40px 0}
footer a{color:#C3CDD4}
footer .rivit{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer b{color:#fff;font-weight:600}
footer .abco{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}

/* Teksti-sivut (tietosuoja) */
.teksti h2{font-size:22px;margin:30px 0 8px}
.teksti p,.teksti li{color:#2C3A44}