/* aurorasites.fi v3, lukitus _design/aurorasites/DESIGN-v3.md (7.9.2026) */
  :root{
    --kentta:#0b2545; --kentta-2:#13315c; --tausta:#f1f3f7; --pinta:#ffffff; --muste:#12161d; --muste-2:#586074;
    --kentalla:#f1f4f8; --kentalla-2:#a9bcd6; --aksentti:#1a5fd0; --aksentti-syva:#134aa3; --viiva:#e0e4ec;
    --sans:'Hanken Grotesk',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
    --ease:cubic-bezier(.32,.72,0,1);
    --r-kontti:18px; --r-syote:12px; --r-nappi:10px;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:5rem}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{font-family:var(--sans);background:var(--tausta);color:var(--muste);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
  h1,h2,h3{font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
  h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
  h3{font-size:1.2rem;font-weight:600}
  p{text-wrap:pretty}
  a{color:inherit}
  img{max-width:100%;display:block}
  ::selection{background:var(--aksentti);color:#fff}
  :focus-visible{outline:2px solid var(--aksentti);outline-offset:3px}
  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.8rem)}
  .mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--muste-2)}
  .muted{color:var(--muste-2)}
  .skip{position:absolute;left:-999px;top:0;background:var(--muste);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:var(--r-nappi)}
  .skip:focus{left:1rem;top:1rem}
  .rv{opacity:1;transform:none}
  @media (prefers-reduced-motion:no-preference){
    .rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
    .rv.in{opacity:1;transform:none}
  }

  /* napit */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--aksentti);color:#fff;text-decoration:none;font-weight:600;font-size:.98rem;
    padding:.9rem 1.5rem;min-height:48px;border-radius:var(--r-nappi);border:1.5px solid var(--aksentti);cursor:pointer;font-family:var(--sans);white-space:nowrap;
    transition:background .2s ease,border-color .2s ease,transform .2s var(--ease)}
  .btn:hover{background:var(--aksentti-syva);border-color:var(--aksentti-syva)}
  .btn:active{transform:translateY(1px)}
  .btn.toinen{background:transparent;color:var(--muste);border-color:rgba(18,22,29,.28)}
  .btn.toinen:hover{background:#fff;border-color:var(--muste)}
  .btn.kentalla{background:#fff;color:var(--kentta);border-color:#fff}
  .btn.kentalla:hover{background:var(--kentalla-2);border-color:var(--kentalla-2)}
  .btn.linja{background:transparent;color:var(--kentalla);border-color:rgba(242,243,240,.45)}
  .btn.linja:hover{background:rgba(255,255,255,.08);border-color:#fff}

  /* nav */
  .nav{position:sticky;top:0;z-index:100;background:var(--pinta);border-bottom:1px solid var(--viiva)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
  .merkki{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem;text-decoration:none;min-height:44px}
  .merkki i{width:12px;height:12px;border-radius:50%;background:var(--aksentti);display:inline-block}
  .nav .btn{padding:.7rem 1.2rem;min-height:44px;font-size:.92rem}

  /* hero */
  .hero{background:var(--kentta);color:var(--kentalla);position:relative;overflow:hidden}
  .hero .wrap{display:grid;gap:2.2rem;grid-template-columns:minmax(0,1fr);padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
  @media(min-width:960px){.hero .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:center;min-height:620px}}
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.8rem);max-width:15ch}
  .hero .lause{color:var(--kentalla-2);font-size:1.15rem;max-width:44ch;margin-top:1.1rem}
  .hero .lahde{margin-top:1rem;color:var(--kentalla-2);opacity:.85}

  /* paneeli */
  .paneeli{background:var(--pinta);color:var(--muste);border-radius:var(--r-kontti);padding:1.3rem;margin-top:1.8rem;max-width:34rem;
    box-shadow:0 24px 60px -30px rgba(11,37,69,.55);display:grid;gap:.8rem}
  @media (prefers-reduced-motion:no-preference){.paneeli{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s}body.on .paneeli{opacity:1;transform:none}}
  .paneeli h2{font-size:1.1rem;font-weight:600}
  .kentat{display:grid;gap:.7rem;grid-template-columns:1fr}
  @media(min-width:560px){.kentat{grid-template-columns:1.2fr 1fr 1fr}}
  .kentta-r{display:grid;gap:.3rem}
  label{font-size:.78rem;font-weight:600;color:var(--muste-2)}
  input,select,textarea{width:100%;font:inherit;color:var(--muste);background:var(--tausta);border:1px solid var(--viiva);border-radius:var(--r-syote);padding:.75rem .9rem;min-height:46px}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aksentti);box-shadow:0 0 0 3px rgba(26,95,208,.18)}
  select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muste-2) 50%),linear-gradient(135deg,var(--muste-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4rem}
  .paneeli .rivi{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;justify-content:space-between}
  .paneeli .pieni{font-size:.82rem;color:var(--muste-2)}

  /* kuva + puhelin */
  .kuvapuoli{position:relative}
  .kuvapuoli figure{border-radius:var(--r-kontti);overflow:hidden;aspect-ratio:4/5;background:var(--kentta-2)}
  @media(max-width:959px){.kuvapuoli figure{aspect-ratio:16/10}}
  .kuvapuoli img{width:100%;height:100%;object-fit:cover}
  .puhelin{position:absolute;left:-1rem;bottom:-1.2rem;width:min(240px,62%);aspect-ratio:9/18.5;background:#0b0b0b;border-radius:28px;padding:9px;box-shadow:0 30px 60px -28px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.14)}
  /* mobiili: puhelin ei kellu paneelin paalle vaan seisoo kuvan vieressa */
  @media(max-width:959px){.kuvapuoli{display:grid;grid-template-columns:200px minmax(0,1fr);gap:.9rem;align-items:stretch;padding-top:1.6rem}.puhelin{position:relative;left:auto;bottom:auto;width:200px;order:-1}.kuvapuoli figure{aspect-ratio:auto;height:100%}.puhelin .leima{top:-1.4rem;left:.2rem}}
  @media(max-width:400px){.kuvapuoli{grid-template-columns:172px minmax(0,1fr)}.puhelin{width:172px}}
  .naytto{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#fff}
  .malli{position:absolute;inset:0;display:flex;flex-direction:column;font-size:8px;line-height:1.35;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .malli.pois{opacity:0;transform:translateY(6px)}
  .malli .m-nav{display:flex;justify-content:space-between;align-items:center;padding:9px 10px 7px}
  .malli .m-logo{font-weight:700;font-size:8.5px;letter-spacing:.01em;max-width:70%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .malli .m-pill{font-size:6.5px;padding:3px 7px;border-radius:999px;font-weight:600}
  .malli .m-hero{padding:6px 10px 10px}
  .malli .m-eyebrow{font-size:6px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
  .malli .m-h1{font-weight:700;font-size:13.5px;line-height:1.12;letter-spacing:-.01em;margin-bottom:6px;text-wrap:balance}
  .malli .m-p{font-size:7px;opacity:.85;margin-bottom:8px}
  .malli .m-btn{display:inline-block;font-size:7px;font-weight:700;padding:5px 9px;border-radius:6px}
  .malli .m-kuva{margin:0 10px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#333}
  .malli .m-kuva img{width:100%;height:100%;object-fit:cover}
  .malli .m-list{padding:9px 10px 0}
  .malli .m-list b{display:block;font-size:7.5px;margin-bottom:4px}
  .malli .m-row{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid rgba(0,0,0,.08);font-size:7px}
  .malli .m-foot{margin-top:auto;padding:8px 10px;font-size:6.5px;opacity:.8}
  .puhelin .leima{position:absolute;top:-1.6rem;left:.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--kentalla-2)}

  /* luottamusrivi */
  .luotto{background:var(--pinta);border-bottom:1px solid var(--viiva)}
  .luotto .wrap{display:grid;gap:1.2rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr));padding:1.4rem clamp(1.2rem,4vw,2.8rem)}
  @media(min-width:900px){.luotto .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .luotto b{display:block;font-weight:600;font-size:1rem}
  .luotto .mono{display:block;margin-top:.15rem}

  .osio{padding:clamp(3.5rem,6vw,5.5rem) 0}
  .osio-h{max-width:60ch;margin-bottom:2rem}
  .osio-h p{color:var(--muste-2);margin-top:.6rem}

  /* asiakastyot */
  .tyot{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
  @media(min-width:760px){.tyot{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}}
  .tyo{background:var(--pinta);border-radius:var(--r-kontti);padding:1rem;text-decoration:none;display:grid;gap:.9rem;transition:transform .5s var(--ease),box-shadow .5s ease}
  .tyo:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(11,37,69,.45)}
  .tyo figure{border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--tausta);border:1px solid var(--viiva)}
  .tyo img{width:100%;height:100%;object-fit:cover;object-position:top}
  .tyo .t{padding:0 .3rem .3rem;display:grid;gap:.25rem}
  .tyo b{font-size:1.1rem;font-weight:600}
  .tyo span{color:var(--muste-2);font-size:.95rem}
  .tyo .linkki{color:var(--aksentti);font-weight:600;font-size:.92rem;margin-top:.2rem}
  .tyo:hover .linkki{text-decoration:underline}

  /* kuva + teksti */
  .kt{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);align-items:center}
  @media(min-width:900px){.kt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}.kt.kaanna figure{order:2}}
  .kt figure{border-radius:var(--r-kontti);overflow:hidden;aspect-ratio:4/3;background:var(--pinta)}
  .kt img{width:100%;height:100%;object-fit:cover}
  .kt p{color:var(--muste-2);margin-top:.9rem;max-width:50ch}
  .kt ol{margin-top:1.2rem;list-style:none;display:grid;gap:.6rem;max-width:50ch}
  .kt ol li{display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;color:var(--muste)}
  .kt ol li b{font-family:var(--mono);font-weight:500;color:var(--aksentti);font-size:.85rem;padding-top:.15rem}

  /* hinnat */
  .paketit{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
  @media(min-width:860px){.paketit{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;align-items:start}}
  .paketti{background:var(--pinta);border-radius:var(--r-kontti);padding:1.7rem 1.6rem;display:grid;gap:1rem;position:relative;border:1.5px solid transparent}
  .paketti.suosituin{border-color:var(--aksentti)}
  .paketti .lappu{position:absolute;top:-.85rem;left:1.4rem;background:var(--aksentti);color:#fff;font-size:.74rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}
  .paketti h3{font-size:1.15rem;font-weight:600}
  .paketti .hinta{font-size:clamp(2.6rem,3.6vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .paketti .hinta small{display:block;font-size:.82rem;font-weight:500;color:var(--muste-2);letter-spacing:0;margin-top:.4rem}
  .paketti .tunnus{color:var(--muste-2);font-size:.97rem;min-height:3em}
  .paketti ul{list-style:none;border-top:1px solid var(--viiva)}
  .paketti li{padding:.6rem 0;border-bottom:1px solid var(--viiva);font-size:.95rem;display:grid;grid-template-columns:1rem 1fr;gap:.6rem}
  .paketti li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--aksentti);margin-top:.55rem}
  .paketti li.aika{color:var(--muste-2)}
  .paketti li.aika::before{background:var(--viiva)}
  .paketti .btn{width:100%}
  .hinta-huom{color:var(--muste-2);font-size:.92rem;margin-top:1.4rem;max-width:64ch}
  .kontti{background:var(--pinta);border-radius:var(--r-kontti);padding:clamp(1.4rem,3vw,2.4rem);margin-top:2.4rem;display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
  @media(min-width:900px){.kontti{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:3rem}}
  .kontti p{color:var(--muste-2);margin-top:.6rem}
  .rivit{list-style:none}
  .rivit li{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--viiva);align-items:start}
  .rivit li:last-child{border-bottom:0}
  .rivit b{display:block;font-weight:600}
  .rivit span{color:var(--muste-2);font-size:.9rem}
  .tagi{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;background:var(--tausta);border:1px solid var(--viiva);border-radius:6px;padding:.3rem .5rem;color:var(--muste-2);justify-self:start}
  @media(max-width:600px){.rivit li{grid-template-columns:1fr}}

  /* tumma kaista */
  .kaista{background:var(--kentta);color:var(--kentalla)}
  .kaista .wrap{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem);align-items:center}
  @media(min-width:860px){.kaista .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:3rem}}
  .luku{font-size:clamp(3.4rem,7vw,6rem);font-weight:700;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .luku small{display:block;font-size:.95rem;font-weight:500;color:var(--kentalla-2);letter-spacing:0;margin-top:.6rem}
  .kaista p{color:var(--kentalla-2);max-width:40ch}
  .kaista .btn{margin-top:1.2rem}

  /* kysymykset */
  .kys{display:grid;gap:1.6rem 3rem;grid-template-columns:minmax(0,1fr)}
  @media(min-width:800px){.kys{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .kys div b{display:block;font-weight:600;margin-bottom:.3rem}
  .kys div p{color:var(--muste-2);font-size:.97rem}

  /* lomake */
  .lomake-osio .wrap{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
  @media(min-width:900px){.lomake-osio .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem;align-items:start}}
  .lomake-osio p{color:var(--muste-2);margin-top:.6rem;max-width:44ch}
  .kanavat{list-style:none;margin-top:1.4rem}
  .kanavat a{text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px;color:var(--aksentti)}
  form{background:var(--pinta);border-radius:var(--r-kontti);padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1rem}
  .f-row{display:grid;gap:1rem;grid-template-columns:1fr}
  @media(min-width:640px){.f-row{grid-template-columns:1fr 1fr}}
  .f-group{display:grid;gap:.35rem}
  textarea{min-height:120px;resize:vertical}
  .tila{font-size:.92rem;color:var(--muste-2);min-height:1.4em}

  footer{background:var(--kentta);color:var(--kentalla-2);padding:2.6rem 0 2.4rem}
  footer .wrap{display:grid;gap:1.6rem;grid-template-columns:1fr}
  @media(min-width:760px){footer .wrap{grid-template-columns:1.4fr 1fr 1fr 1fr}}
  footer b{display:block;color:var(--kentalla);font-weight:600;margin-bottom:.4rem}
  footer ul{list-style:none}
  footer a{text-decoration:none;display:inline-block;padding:.45rem 0}
  footer a:hover{color:#fff}
  .foot-ala{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem}

  /* toimialasivut */
  [hidden]{display:none!important}
  .hero .eyebrow{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--kentalla-2);margin-bottom:1rem}
  .kentat.kaksi{grid-template-columns:1fr}
  @media(min-width:560px){.kentat.kaksi{grid-template-columns:1.3fr 1fr}}
  .tyo .leima{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muste-2)}
  .paketit.yksi{grid-template-columns:minmax(0,1fr)}
  @media(min-width:860px){.paketit.yksi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}}
  .paketit.yksi .paketti{max-width:34rem}
  .vaihtoehto{display:grid;gap:.9rem;max-width:44ch;align-content:start}
  .vaihtoehto h3{font-size:1.2rem;font-weight:600}
  .vaihtoehto p{color:var(--muste-2)}
  .vaihtoehto .linkki{color:var(--aksentti);font-weight:600;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
  .vaihtoehto .linkki:hover{text-decoration:underline}
  .alat{margin-top:1.6rem;color:var(--muste-2);max-width:64ch}
  .alat a{color:var(--aksentti);font-weight:600;text-decoration:none}
  .alat a:hover{text-decoration:underline}