@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

  :root{
    --bg:#0b0a09;
    --surface:#151310;
    --surface-2:#1d1a16;
    --ink:#f4eee3;
    --ink-soft:#b6ada0;
    --ink-faint:#8a8175;
    --navy:#c9975c;
    --navy-strong:#f7f2ea;
    --blue:#c9975c;
    --steel:#3a352c;
    --steel-line:rgba(255,255,255,.1);
    --amber:#c9975c;
    --amber-ink:#17130c;
    --danger:#d97757;
    --ok:#8aa876;
    --shadow: 0 16px 36px -26px rgba(0,0,0,.7);
  }

  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#faf7f2;
      --surface:#ffffff;
      --surface-2:#f2ece0;
      --ink:#22190f;
      --ink-soft:#5c5245;
      --ink-faint:#8c8171;
      --navy:#a9762e;
      --navy-strong:#1c1610;
      --blue:#a9762e;
      --steel:#ddd3c2;
      --steel-line:rgba(20,15,5,.12);
      --amber:#c9975c;
      --amber-ink:#17130c;
      --danger:#b9502f;
      --ok:#5f7a4a;
      --shadow: 0 16px 36px -28px rgba(30,20,5,.25);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0b0a09;
    --surface:#151310;
    --surface-2:#1d1a16;
    --ink:#f4eee3;
    --ink-soft:#b6ada0;
    --ink-faint:#8a8175;
    --navy:#c9975c;
    --navy-strong:#f7f2ea;
    --blue:#c9975c;
    --steel:#3a352c;
    --steel-line:rgba(255,255,255,.1);
    --amber:#c9975c;
    --amber-ink:#17130c;
    --danger:#d97757;
    --ok:#8aa876;
    --shadow: 0 16px 36px -26px rgba(0,0,0,.7);
  }
  :root[data-theme="light"]{
    --bg:#faf7f2;
    --surface:#ffffff;
    --surface-2:#f2ece0;
    --ink:#22190f;
    --ink-soft:#5c5245;
    --ink-faint:#8c8171;
    --navy:#a9762e;
    --navy-strong:#1c1610;
    --blue:#a9762e;
    --steel:#ddd3c2;
    --steel-line:rgba(20,15,5,.12);
    --amber:#c9975c;
    --amber-ink:#17130c;
    --danger:#b9502f;
    --ok:#5f7a4a;
    --shadow: 0 16px 36px -28px rgba(30,20,5,.25);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Barlow', ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; }

  h1,h2,h3{
    font-family:'Barlow', sans-serif;
    font-weight:700;
    color:var(--navy-strong);
    text-wrap:balance;
    margin:0;
    line-height:1.08;
    letter-spacing:-.01em;
  }

  .mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
  .tnum{ font-variant-numeric: tabular-nums; }

  a{ color:inherit; }

  .wrap{
    max-width:1120px;
    margin-inline:auto;
    padding-inline:20px;
  }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--blue);
    display:inline-flex;
    align-items:center;
    gap:.6em;
    margin:0 0 .9rem;
  }
  .eyebrow::before{
    content:"";
    width:1.4em;
    height:2px;
    background:var(--amber);
    display:inline-block;
  }

  /* ---------- header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--steel-line);
  }
  .headbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:.75rem 1.5rem;
    padding-block:.85rem;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:.65rem;
    text-decoration:none;
  }
  .brand svg{ width:34px; height:34px; flex:none; }
  .brand img{
    width:38px; height:38px; flex:none;
    object-fit:cover; border-radius:7px;
    border:1px solid var(--steel-line);
    background:#f4f7fa;
  }
  .brand-text{ display:flex; flex-direction:column; line-height:1; }
  .brand-text .name{
    font-family:'Barlow', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--navy-strong);
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .brand-text .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.16em;
    color:var(--ink-faint);
    text-transform:uppercase;
    margin-top:.15rem;
  }
  nav.mainnav{
    display:flex;
    flex-wrap:wrap;
    gap:1.4rem;
    font-size:.8rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  nav.mainnav a{
    text-decoration:none;
    color:var(--ink-soft);
    padding-block:.25rem;
    border-bottom:2px solid transparent;
  }
  nav.mainnav a:hover, nav.mainnav a:focus-visible{
    color:var(--navy-strong);
    border-color:var(--amber);
  }
  .header-controls{
    display:flex;
    align-items:center;
    gap:.7rem;
  }
  .nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:2.4rem;
    height:2.4rem;
    border-radius:8px;
    border:1px solid var(--steel-line);
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    flex:none;
  }
  .nav-toggle svg{ width:1.3rem; height:1.3rem; }
  .nav-toggle .icon-close{ display:none; }
  .nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
  .nav-toggle[aria-expanded="true"] .icon-close{ display:inline-flex; }
  @media (max-width:1160px){
    .nav-toggle{ display:inline-flex; }
    nav.mainnav{
      display:none;
      flex-basis:100%;
      order:5;
      flex-direction:column;
      gap:0;
      padding-top:.4rem;
      margin-top:.4rem;
      border-top:1px solid var(--steel-line);
    }
    nav.mainnav.is-open{ display:flex; }
    nav.mainnav a{
      padding-block:.75rem;
      border-bottom:1px solid var(--steel-line);
    }
  }
  .lang-toggle{
    display:inline-flex;
    border:1px solid var(--steel-line);
    border-radius:999px;
    padding:.2rem;
    gap:.15rem;
  }
  .lang-btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.05em;
    background:transparent;
    border:none;
    color:var(--ink-faint);
    padding:.32rem .6rem;
    border-radius:999px;
    cursor:pointer;
  }
  .lang-btn.is-active{
    background:var(--amber);
    color:var(--amber-ink);
  }
  .theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.2rem;
    height:2.2rem;
    border-radius:50%;
    border:1px solid var(--steel-line);
    background:transparent;
    color:var(--ink-soft);
    cursor:pointer;
    flex:none;
  }
  .theme-toggle:hover{ border-color:var(--amber); color:var(--amber); }
  .theme-toggle svg{ width:1.1rem; height:1.1rem; }
  .icon-sun, .icon-moon{ display:none; align-items:center; justify-content:center; }
  :root:not([data-theme="light"]) .icon-sun{ display:inline-flex; }
  :root[data-theme="light"] .icon-moon{ display:inline-flex; }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]):not([data-theme="light"]) .icon-sun{ display:none; }
    :root:not([data-theme="dark"]):not([data-theme="light"]) .icon-moon{ display:inline-flex; }
  }
  .call-btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:var(--amber);
    color:var(--amber-ink);
    text-decoration:none;
    font-weight:600;
    font-size:.85rem;
    padding:.6rem 1.15rem;
    border-radius:999px;
    white-space:nowrap;
  }
  .call-btn:hover, .call-btn:focus-visible{ filter:brightness(1.08); }

  /* ---------- nav dropdown panels ---------- */
  .nav-drop-btn{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    font:inherit;
    text-transform:inherit;
    letter-spacing:inherit;
    color:var(--ink-soft);
    padding-block:.25rem;
    cursor:pointer;
  }
  .nav-drop-btn:hover, .nav-drop-btn:focus-visible{
    color:var(--navy-strong);
    border-color:var(--amber);
  }
  .nav-drop-btn .chev{ width:11px; height:11px; flex:none; transition:transform .15s ease; }
  .nav-drop-btn[aria-expanded="true"]{ color:var(--navy-strong); border-color:var(--amber); }
  .nav-drop-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .nav-panel-backdrop{
    position:fixed; inset:0; z-index:55;
    background:rgba(0,0,0,.45);
  }
  .nav-panel-backdrop[hidden]{ display:none; }
  body.panel-open{ overflow:hidden; }
  section.nav-panel{
    position:fixed;
    left:0; right:0;
    z-index:60;
    background:var(--bg);
    border-bottom:1px solid var(--steel-line);
    box-shadow:var(--shadow);
    overflow-y:auto;
    padding-block:clamp(2rem, 5vw, 3.5rem);
  }
  section.nav-panel[hidden]{ display:none; }
  .nav-panel-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.2rem; height:2.2rem;
    border-radius:50%;
    border:1px solid var(--steel-line);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
    float:right;
    margin:-.4rem 0 1rem 1rem;
  }
  .nav-panel-close:hover{ border-color:var(--amber); color:var(--amber); }
  .nav-panel-close svg{ width:1.1rem; height:1.1rem; }
  @media (max-width:860px){
    .nav-drop-btn{ width:100%; justify-content:space-between; padding-inline:0; padding-block:.75rem; border-bottom:1px solid var(--steel-line); border-radius:0; }
    .nav-drop-btn[aria-expanded="true"]{ border-color:var(--steel-line); }
  }

  section{ padding-block:clamp(3rem, 6vw, 5.5rem); }
  section + section{ border-top:1px solid var(--steel-line); }

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; }
  .hero .wrap{ position:relative; z-index:1; }
  .hero-bg{
    position:absolute; inset:0;
    color:var(--steel);
    opacity:.6;
    pointer-events:none;
  }
  @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .hero-bg{ opacity:.35; } }
  :root[data-theme="light"] .hero-bg{ opacity:.35; }

  .hero-grid{
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap:2.8rem;
    align-items:center;
  }
  .hero-plate img{
    width:100%;
    height:auto;
    max-width:280px;
    display:block;
    margin-inline:auto;
    border-radius:10px;
    box-shadow:var(--shadow);
  }
  @media (max-width:820px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-plate img{ max-width:160px; }
  }
  .hero h1{
    font-size:clamp(2.1rem, 4.6vw, 3.6rem);
    font-weight:700;
    max-width:18ch;
  }
  .hero .lede-en{
    margin:.7rem 0 0;
    max-width:58ch;
    font-size:.95rem;
    font-style:italic;
    color:var(--ink-faint);
  }
  .hero .lede{
    margin:1.25rem 0 0;
    max-width:62ch;
    font-size:1.08rem;
    color:var(--ink-soft);
  }
  .cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:.9rem;
    margin-top:1.9rem;
  }
  .highlight-row{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.6rem;
  }
  .highlight-bar{
    display:flex;
    align-items:center;
    gap:.6rem;
    background:var(--surface-2);
    border:1px solid var(--steel-line);
    border-left:3px solid var(--amber);
    border-radius:10px;
    padding:.65rem .95rem;
    font-size:.9rem;
    color:var(--ink-soft);
    flex:1 1 260px;
  }
  .highlight-bar svg{ flex:none; width:1.15rem; height:1.15rem; color:var(--amber); }
  .highlight-bar strong{ color:var(--ink); font-weight:600; }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    text-decoration:none;
    font-weight:600;
    font-size:.95rem;
    padding:.8rem 1.5rem;
    border-radius:999px;
    border:1.5px solid transparent;
  }
  .btn-primary{ background:var(--amber); color:var(--amber-ink); }
  .btn-primary:hover, .btn-primary:focus-visible{ filter:brightness(1.06); }
  .btn-outline{ background:transparent; border-color:var(--steel); color:var(--navy-strong); font-family:inherit; cursor:pointer; }
  .btn-outline:hover, .btn-outline:focus-visible{ border-color:var(--blue); background:var(--surface-2); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }

  .stat-strip{
    margin-top:3rem;
    display:flex;
    flex-wrap:wrap;
    gap:1.6rem 0;
    border-top:1px solid var(--steel-line);
    padding-top:1.6rem;
  }
  .stat{
    flex:1 1 200px;
    padding-inline:1.6rem;
    border-left:2px solid var(--steel-line);
  }
  .stat:first-child{ border-left:none; padding-left:0; }
  .stat .k{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .stat .v{
    margin-top:.35rem;
    font-family:'Barlow', sans-serif;
    font-weight:700;
    font-size:1.55rem;
    color:var(--navy-strong);
  }

  /* ---------- section headings ---------- */
  .sec-head{ max-width:60ch; margin-bottom:2.6rem; }
  .about-head{ display:flex; align-items:center; gap:1.5rem; max-width:none; }
  .about-head > div{ max-width:60ch; }
  .about-head .eyebrow{ margin-bottom:.6rem; }
  .portrait{
    width:88px; height:88px; flex:none;
    object-fit:cover; border-radius:10px;
    box-shadow:var(--shadow);
  }
  @media (max-width:520px){ .about-head{ flex-direction:column; align-items:flex-start; } }
  .sec-head h2{ font-size:clamp(1.7rem, 3vw, 2.35rem); font-weight:700; }
  .sec-head p{ margin:.9rem 0 0; color:var(--ink-soft); font-size:1.02rem; }

  /* ---------- services ---------- */
  .grid-services{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
    gap:1.1rem;
  }
  .plate{
    background:var(--surface-2);
    border:1px solid var(--steel-line);
    border-radius:14px;
    padding:1.5rem 1.4rem;
    display:flex;
    flex-direction:column;
    gap:.6rem;
  }
  .plate-icon{
    width:2.5rem;
    height:2.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--steel-line);
    color:var(--amber);
    flex-shrink:0;
  }
  .plate-icon svg{ width:1.3rem; height:1.3rem; }
  .plate-icon.sub{ width:2.1rem; height:2.1rem; margin-bottom:.1rem; }
  .plate-icon.sub svg{ width:1.1rem; height:1.1rem; }
  .plate .code{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--amber);
    padding-bottom:.5rem;
    border-bottom:1px solid var(--steel-line);
  }
  .plate h3{
    font-family:'Barlow', sans-serif;
    font-weight:700;
    font-size:1.12rem;
    color:var(--navy-strong);
  }
  .plate p{ margin:0; color:var(--ink-soft); font-size:.94rem; }
  .plate.wide{ grid-column:1 / -1; }
  .wide-split{
    display:flex;
    flex-wrap:wrap;
    gap:1.6rem 2.4rem;
  }
  .wide-split > div{
    flex:1 1 240px;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .wide-split h3{
    font-family:'Barlow', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--navy-strong);
  }
  .wide-split p{ margin:0; color:var(--ink-soft); font-size:.94rem; }

  /* ---------- products ---------- */
  .grid-products{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
    gap:1.4rem;
  }
  .product-card{
    background:var(--surface);
    border:1px solid var(--steel-line);
    border-radius:16px;
    padding:1.8rem 1.6rem;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:.7rem;
  }
  .product-card .lede-en{ margin:0; font-size:.88rem; }
  .product-card h3{ font-size:1.15rem; }
  .product-card > p:not(.lede-en){ margin:0; color:var(--ink-soft); font-size:.94rem; }
  .product-card .btn{ align-self:flex-start; margin-top:.3rem; }
  .products-more{
    margin:1.8rem 0 0;
    font-family:'IBM Plex Mono', monospace;
    font-size:.82rem;
    letter-spacing:.05em;
    color:var(--ink-faint);
  }

  /* ---------- about ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:2.6rem;
    align-items:start;
  }
  @media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }
  .bio p{ color:var(--ink-soft); margin:0 0 1.05rem; max-width:60ch; }
  .bio p:last-child{ margin-bottom:0; }

  .credential-panel{
    background:var(--surface);
    border:1px solid var(--steel-line);
    border-radius:16px;
    padding:1.6rem;
    box-shadow:var(--shadow);
  }
  .credential-panel h3{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
    font-weight:600;
    margin-bottom:1rem;
    padding-bottom:.7rem;
    border-bottom:2px solid var(--amber);
  }
  .cred-list{ list-style:none; margin:0 0 1.3rem; padding:0; display:flex; flex-direction:column; gap:.6rem; }
  .cred-list li{
    display:flex; gap:.6rem; align-items:flex-start;
    font-size:.92rem; color:var(--ink);
  }
  .cred-list svg{ flex:none; width:1.05rem; height:1.05rem; margin-top:.15rem; color:var(--blue); }

  .badge-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
  .badge{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    padding:.3rem .75rem;
    border:1px solid var(--steel-line);
    border-radius:999px;
    color:var(--ink-soft);
    background:var(--surface-2);
  }
  .lang-row{ display:flex; flex-wrap:wrap; gap:.9rem; font-size:.88rem; color:var(--ink-soft); }
  .lang-row b{ color:var(--ink); }
  .panel-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin:0 0 .5rem;
  }

  /* ---------- organisation ---------- */
  .grid-org{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:1.2rem;
  }
  .org-card{
    background:var(--surface);
    border:1px solid var(--steel-line);
    border-radius:16px;
    padding:1.6rem;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:.2rem;
  }
  .org-card img{
    width:64px; height:64px;
    object-fit:cover; border-radius:10px;
    margin-bottom:.9rem;
  }
  .org-card .org-name{ font-family:'Barlow', sans-serif; font-weight:700; font-size:1.05rem; color:var(--navy-strong); }
  .org-card .org-role{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--amber);
    margin:.3rem 0 .8rem;
  }
  .org-card p{ margin:0; color:var(--ink-soft); font-size:.9rem; }
  .org-card.open{
    align-items:center;
    justify-content:center;
    text-align:center;
    border-style:dashed;
    background:transparent;
    box-shadow:none;
    gap:.6rem;
    min-height:180px;
  }
  .org-card.open .plate-icon{ margin-bottom:.2rem; }
  .org-card.open .org-name{ font-size:.98rem; }
  .org-card.open p{ max-width:26ch; }

  /* ---------- pricing ---------- */
  .pricing-panel{
    border:1px dashed var(--steel-line);
    border-radius:18px;
    padding:2rem 1.8rem;
    background:var(--surface-2);
  }
  .wip-badge{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--amber-ink);
    background:var(--amber);
    border-radius:999px;
    padding:.35rem .85rem;
    margin-bottom:1.3rem;
  }
  .pricing-cols{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:1.3rem;
    margin-bottom:1.8rem;
  }
  .pricing-col{
    border-left:2px solid var(--steel-line);
    padding-left:1.1rem;
  }
  .pricing-col h3{ font-size:1.02rem; font-weight:700; margin-bottom:.35rem; }
  .pricing-col p{ margin:0; color:var(--ink-soft); font-size:.9rem; }

  /* ---------- contact ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:2.6rem;
    align-items:start;
  }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-intro h2{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:700; }
  .contact-intro p{ color:var(--ink-soft); margin:1rem 0 0; max-width:46ch; }
  .contact-note{
    display:flex; align-items:center; gap:.55rem;
    margin:1.1rem 0 0; max-width:46ch;
    color:var(--amber); font-weight:600; font-size:.92rem;
  }
  .contact-note svg{ width:18px; height:18px; flex:none; }

  .quote-panel{
    margin-top:2.4rem;
    background:var(--surface);
    border:1px solid var(--steel-line);
    border-radius:16px;
    padding:1.8rem;
    box-shadow:var(--shadow);
  }
  .quote-panel h3{
    font-family:'Barlow', sans-serif;
    font-weight:700;
    font-size:1.2rem;
    color:var(--navy-strong);
    margin:0 0 .5rem;
  }
  .quote-panel .panel-sub{ margin:0 0 1.5rem; color:var(--ink-soft); font-size:.94rem; max-width:65ch; }
  .qform-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.3rem; }
  .field{ display:flex; flex-direction:column; gap:.4rem; }
  .field.full{ grid-column:1 / -1; }
  .field label{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .field input[type="text"], .field textarea{
    font-family:'Barlow', sans-serif;
    font-size:.96rem;
    padding:.65rem .85rem;
    border:1px solid var(--steel-line);
    border-radius:10px;
    background:var(--bg);
    color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:5.5rem; font-family:inherit; }
  .field input[type="file"]{ font-size:.85rem; color:var(--ink-soft); }
  .field-hint{ margin:.3rem 0 0; font-size:.8rem; color:var(--ink-faint); max-width:60ch; }
  .q-preview{ margin-top:.7rem; max-width:160px; border-radius:6px; border:1px solid var(--steel-line); }
  .q-status{ margin:.8rem 0 0; font-size:.85rem; color:var(--ink-soft); }
  .identify-box{
    margin-top:1rem; padding-top:1rem;
    border-top:1px dashed var(--steel-line);
    display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  }
  .identify-box .btn{ font-size:.85rem; padding:.55rem 1.1rem; }
  .identify-box .btn:disabled{ opacity:.5; cursor:not-allowed; }
  .identify-result{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; margin-top:.2rem; }
  .identify-result p{ margin:0; color:var(--ink-soft); font-size:.9rem; max-width:60ch; }
  .q-status.is-error{ color:#d97757; }
  .q-status.is-ok{ color:var(--amber); }
  @media (max-width:560px){ .qform-grid{ grid-template-columns:1fr; } }

  .contact-panel{
    background:var(--surface);
    border:1px solid var(--steel-line);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .contact-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:.3rem 1rem;
    padding:1.05rem 1.4rem;
    border-bottom:1px solid var(--steel-line);
    text-decoration:none;
    color:var(--ink);
  }
  .contact-row:last-child{ border-bottom:none; }
  .contact-row .cl{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .contact-row .cv{
    font-weight:600;
    font-size:1rem;
    text-align:right;
    overflow-wrap:anywhere;
    max-width:100%;
  }
  @media (max-width:480px){
    .contact-row{ flex-direction:column; align-items:flex-start; }
    .contact-row .cv{ text-align:left; }
  }
  a.contact-row:hover, a.contact-row:focus-visible{ background:var(--surface-2); }

  /* ---------- privacy ---------- */
  #tietosuoja{ padding-block:1.4rem; }
  .privacy summary{
    cursor:pointer;
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    padding:.4rem 0;
  }
  .privacy summary:hover, .privacy summary:focus-visible{ color:var(--blue); }
  .privacy-body{
    margin-top:1.2rem;
    max-width:70ch;
    font-size:.88rem;
    color:var(--ink-soft);
    display:flex;
    flex-direction:column;
    gap:.9rem;
  }
  .privacy-body strong{ color:var(--ink); font-weight:600; }

  /* ---------- per-section mini FAQ ---------- */
  .sec-faq{
    margin-top:2.4rem;
    padding-top:1.6rem;
    border-top:1px solid var(--steel-line);
  }
  .mini-faq-title{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    font-weight:600;
    margin:0 0 .6rem;
  }
  .nav-panel .sec-faq{ border-top-color:var(--steel-line); }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--steel-line);
    padding-block:1.8rem;
  }
  .foot-wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:.8rem 1.5rem;
    align-items:center;
  }
  .foot-main{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    color:var(--ink-soft);
  }
  .foot-main a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
  .foot-main a:hover, .foot-main a:focus-visible{ color:var(--navy-strong); }
  .foot-scope{
    font-size:.78rem;
    color:var(--ink-faint);
    max-width:56ch;
  }

  :focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
  /* ================= MIKA VIKA - diagnostiikkatyokalu ================= */
  .diag-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    gap:.9rem;
    margin-bottom:1.6rem;
  }
  .diag-card{
    background:var(--surface-2);
    border:1.5px solid var(--steel-line);
    border-radius:14px;
    padding:1.3rem 1.1rem;
    text-align:left;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
    font-family:inherit;
    color:var(--ink);
  }
  .diag-card:hover, .diag-card:focus-visible{ border-color:var(--amber); transform:translateY(-2px); }
  .diag-card.is-active{ border-color:var(--amber); background:var(--surface); box-shadow:var(--shadow); }
  .diag-card .ic{
    width:2.4rem; height:2.4rem; border-radius:50%;
    background:var(--surface); border:1px solid var(--steel-line);
    display:flex; align-items:center; justify-content:center; color:var(--amber);
    flex:none;
  }
  .diag-card.is-active .ic{ background:var(--amber); color:var(--amber-ink); border-color:var(--amber); }
  .diag-card .ic svg{ width:1.2rem; height:1.2rem; }
  .diag-card h3{ font-size:1rem; font-family:'Barlow', sans-serif; font-weight:700; color:var(--navy-strong); }
  .diag-card p{ margin:0; font-size:.84rem; color:var(--ink-faint); }

  .diag-detail{
    background:var(--surface);
    border:1px solid var(--steel-line);
    border-left:3px solid var(--amber);
    border-radius:14px;
    padding:1.8rem 1.7rem;
    box-shadow:var(--shadow);
    display:none;
  }
  .diag-detail.is-visible{ display:block; animation:sakfadein .2s ease; }
  @keyframes sakfadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
  .diag-detail h3{ font-size:1.2rem; margin-bottom:.9rem; font-family:'Barlow', sans-serif; font-weight:700; color:var(--navy-strong); }
  .diag-detail ul{ margin:0 0 1.1rem; padding-left:1.2rem; color:var(--ink-soft); font-size:.94rem; display:flex; flex-direction:column; gap:.35rem; }
  .diag-meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.2rem; }
  .diag-badge{
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.06em;
    padding:.35rem .8rem; border-radius:999px; border:1px solid var(--steel-line);
    color:var(--ink-soft); background:var(--surface-2);
  }
  .diag-badge.urgent{ border-color:var(--danger); color:var(--danger); }
  .diag-badge.ok{ border-color:var(--ok); color:var(--ok); }
  .diag-empty{ color:var(--ink-faint); font-size:.94rem; padding:1.6rem 1.7rem; border:1px dashed var(--steel-line); border-radius:14px; }
  .diag-cta{ display:flex; flex-wrap:wrap; gap:.8rem; }
  .diag-detail-inner{ animation:sakfadein .2s ease; }
  .diag-form{ margin:1.2rem 0 1.35rem; padding-top:1.15rem; border-top:1px dashed var(--steel-line); }
  .diag-form-title{
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-faint); margin:0 0 .9rem;
  }
  .diag-field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.85rem; }
  .diag-field label{ font-size:.84rem; color:var(--ink-soft); font-weight:500; }
  .diag-field select, .diag-field input[type="text"], .diag-field textarea{
    font-family:inherit; font-size:.92rem; color:var(--ink);
    background:var(--surface); border:1px solid var(--steel-line); border-radius:9px;
    padding:.58rem .75rem;
  }
  .diag-field select:focus-visible, .diag-field input:focus-visible, .diag-field textarea:focus-visible{
    outline:2px solid var(--amber); outline-offset:1px;
  }
  .diag-field textarea{ resize:vertical; min-height:3.8rem; }
  .copy-row{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:.3rem; }
  .copy-feedback{ font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--ok); }
  .copy-fallback{
    width:100%; margin-top:.7rem; min-height:4.8rem; font-family:'IBM Plex Mono',monospace; font-size:.8rem;
    padding:.6rem .7rem; border-radius:10px; border:1px solid var(--steel-line); background:var(--surface-2); color:var(--ink);
  }
  .wizard-progress{ height:4px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:0 0 .7rem; }
  .wizard-progress-bar{ height:100%; background:var(--amber); transition:width .25s ease; }
  .wizard-step-label{
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); margin:0 0 1.05rem;
  }
  .wizard-nav{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; margin-top:.3rem; }
  .wizard-nav .btn{ min-width:8.5rem; justify-content:center; }
  .wizard-edit{
    background:none; border:none; color:var(--ink-faint); font-family:inherit; font-size:.8rem;
    text-decoration:underline; cursor:pointer; padding:.2rem 0; margin-top:.2rem;
  }
  .summary-row{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--steel-line); font-size:.89rem; }
  .summary-row:last-child{ border-bottom:none; }
  .summary-row .sl{ color:var(--ink-faint); flex:1 1 45%; }
  .summary-row .sv{ color:var(--ink); font-weight:600; text-align:right; flex:1 1 50%; }

  /* ================= KUVA-ARVIO - puhelinnakyma ================= */
  .phone-section .wrap{ display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:center; }
  @media (max-width:820px){ .phone-section .wrap{ grid-template-columns:1fr; } }
  .phone-copy .badge-demo{
    display:inline-flex; align-items:center; gap:.4rem;
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--amber-ink); background:var(--amber); padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem;
  }
  .phone-copy p{ color:var(--ink-soft); margin:0 0 1rem; max-width:50ch; }
  .phone-copy .tech-note{
    margin-top:1.5rem; padding:1rem 1.1rem; border:1px dashed var(--steel-line); border-radius:12px;
    font-size:.82rem; color:var(--ink-faint);
  }
  .phone-copy .tech-note b{ color:var(--ink-soft); }

  .phone-shell{
    width:290px; min-height:580px; margin-inline:auto;
    background:#050505; border-radius:42px; padding:12px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
    position:relative;
  }
  .phone-screen{
    width:100%; height:100%; min-height:556px; background:var(--surface);
    border-radius:32px; overflow:hidden; position:relative;
    display:flex; flex-direction:column;
  }
  .phone-notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120px; height:22px; background:#050505; border-radius:0 0 16px 16px; z-index:5;
  }
  .phone-status{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.6rem 1.2rem .5rem; font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-faint);
  }
  .phone-brand{ display:flex; align-items:center; gap:.4rem; padding:.2rem 1.2rem .8rem; }
  .phone-brand img{ width:22px; height:22px; border-radius:5px; }
  .phone-brand span{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.12em; color:var(--ink-faint); }
  .phone-body{ flex:1; padding:.4rem 1.2rem 1.3rem; display:flex; flex-direction:column; overflow-y:auto; }

  .phone-state{ display:none; flex:1; flex-direction:column; }
  .phone-state.is-active{ display:flex; animation:sakfadein .25s ease; }

  .phone-idle{ align-items:center; justify-content:center; text-align:center; gap:.6rem; }
  .phone-idle .camera-ic{
    width:60px; height:60px; border-radius:50%; background:var(--surface-2);
    border:1px solid var(--steel-line); display:flex; align-items:center; justify-content:center; color:var(--amber);
    margin-bottom:.2rem;
  }
  .phone-idle .camera-ic svg{ width:26px; height:26px; }
  .phone-idle h4{ font-size:1rem; color:var(--navy-strong); margin:0; font-family:'Barlow', sans-serif; font-weight:700; }
  .phone-idle p{ font-size:.8rem; color:var(--ink-faint); margin:.2rem 0 .8rem; max-width:24ch; }
  .phone-upload-label{
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--amber); color:var(--amber-ink); font-weight:600; font-size:.85rem;
    padding:.7rem 1.2rem; border-radius:999px; cursor:pointer;
  }
  .phone-upload-label input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
  .phone-preview{ width:100%; max-width:180px; border-radius:10px; margin:.6rem 0; border:1px solid var(--steel-line); }
  .phone-idle .btn{ width:100%; justify-content:center; margin-top:.5rem; }

  .phone-analyzing{ align-items:center; justify-content:center; text-align:center; gap:1rem; }
  .sak-spinner{
    width:38px; height:38px; border-radius:50%;
    border:3px solid var(--steel-line); border-top-color:var(--amber);
    animation:sakspin .8s linear infinite;
  }
  @keyframes sakspin{ to{ transform:rotate(360deg); } }
  .phone-analyzing p{ font-size:.86rem; color:var(--ink-soft); margin:0; }
  .phone-analyzing .an-sub{ font-size:.78rem; color:var(--ink-faint); }

  .phone-result{ gap:.8rem; }
  .result-tag{
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--amber); margin-bottom:.1rem;
  }
  .phone-result h4{ font-size:.98rem; color:var(--navy-strong); margin:0 0 .6rem; font-family:'Barlow', sans-serif; font-weight:700; }
  .result-badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
  .rbadge{
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; padding:.28rem .6rem; border-radius:999px;
    border:1px solid var(--steel-line); color:var(--ink-soft);
  }
  .rbadge.urgent{ border-color:var(--danger); color:var(--danger); }
  .rbadge.ok{ border-color:var(--ok); color:var(--ok); }
  .result-rows{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.8rem; }
  .result-row{
    display:flex; justify-content:space-between; gap:.6rem;
    background:var(--surface-2); border:1px solid var(--steel-line); border-radius:10px;
    padding:.55rem .75rem; font-size:.78rem;
  }
  .result-row .rl{ color:var(--ink-faint); }
  .result-row .rv{ color:var(--ink); font-weight:600; font-family:'IBM Plex Mono',monospace; text-align:right; }
  .result-note{ font-size:.78rem; color:var(--ink-soft); margin:0 0 .6rem; }
  .result-disclaimer{ font-size:.78rem; color:var(--ink-faint); margin:0 0 .9rem; }
  .result-cta{ display:flex; flex-direction:column; gap:.5rem; margin-top:auto; }
  .result-cta .btn{ width:100%; justify-content:center; padding:.6rem 1rem; font-size:.82rem; }
  .phone-reset-link{
    background:none; border:none; color:var(--ink-faint); font-family:inherit; font-size:.78rem;
    text-decoration:underline; cursor:pointer; padding:.2rem; align-self:center;
  }
  .phone-error{ color:var(--danger); font-size:.84rem; margin:0 0 .8rem; }

  /* ================= ESIKATSELU / DEMO-OSIO ================= */
  .demo-preview-section{ background:var(--surface-2); }
  .preview-strip{ margin-bottom:1.8rem; }
  .preview-card{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem;
    background:var(--surface); border:1px solid var(--steel-line); border-radius:14px;
    padding:1rem 1.3rem;
  }
  .preview-card .left{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; min-width:0; }
  .preview-card .left p{ flex:1 1 220px; min-width:0; }
  .preview-chip{
    font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.1em;
    text-transform:uppercase; background:var(--amber); color:var(--amber-ink);
    padding:.3rem .7rem; border-radius:999px; font-weight:700; flex:none;
  }
  .preview-card p{ margin:0; font-size:.86rem; color:var(--ink-soft); }
  .demo-chips{ display:flex; flex-direction:column; gap:.5rem; width:100%; }
  .demo-chip{
    display:flex; align-items:center; gap:.6rem;
    background:var(--surface-2); border:1px solid var(--steel-line); border-radius:12px;
    padding:.6rem .75rem; font-size:.8rem; color:var(--ink); cursor:pointer; text-align:left;
    font-family:inherit; transition:border-color .15s ease, transform .15s ease;
  }
  .demo-chip:hover, .demo-chip:focus-visible{ border-color:var(--amber); transform:translateY(-1px); }
  .demo-chip .ic-sm{ width:1.5rem; height:1.5rem; flex:none; color:var(--amber); }
  .legal-note{
    max-width:1080px; margin:1.6rem auto 0; padding:1.1rem 1.3rem;
    border:1px solid var(--steel-line); border-radius:12px; background:var(--surface);
  }
  .legal-note summary{
    cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-soft); font-weight:600;
  }
  .legal-note summary::marker{ color:var(--amber); }
  .legal-note ul{ margin:.9rem 0 0; padding-left:1.15rem; color:var(--ink-soft); font-size:.86rem; display:flex; flex-direction:column; gap:.45rem; }

  .diag-safety{
    display:flex; align-items:flex-start; gap:.6rem;
    background:rgba(185,80,47,.1); border:1px solid var(--danger); border-radius:12px;
    padding:.85rem 1rem; margin-bottom:1.1rem; font-size:.88rem; color:var(--ink);
  }
  .diag-safety svg{ width:1.2rem; height:1.2rem; flex:none; color:var(--danger); margin-top:.1rem; }
  .diag-safety strong{ color:var(--danger); }
  /* ---------- Nuotion kipinät -taustakuva (koko sivun tausta) ---------- */
  .ember-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-color:#05070d;
    background-image:url('ember-bg.svg');
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:cover;
    opacity:.85;
    overflow:hidden;
    transition:opacity .3s ease;
  }
  /* Näytetään molemmissa teemoissa - vaaleassa huomattavasti himmeämpänä */
  /* Vaalea teema: oma koivumetsätausta, samat kipinät */
  :root[data-theme="light"] .ember-bg{
    background-color:#f7f3ec; background-image:radial-gradient(ellipse at 50% 110%, rgba(232,180,120,.22), transparent 60%), linear-gradient(180deg, #faf8f4 0%, #f4eee4 100%); background-size:cover; opacity:1;
  }
  :root[data-theme="light"] .ember-particle{
    background:radial-gradient(circle, #ffe2b8 0%, #f07a1e 55%, rgba(220,90,20,0) 100%);
    box-shadow:0 0 8px 2px rgba(235,110,30,.75);
  }
  @media (prefers-color-scheme:light){
    :root:not([data-theme="dark"]) .ember-bg{
      background-color:#f7f3ec; background-image:radial-gradient(ellipse at 50% 110%, rgba(232,180,120,.22), transparent 60%), linear-gradient(180deg, #faf8f4 0%, #f4eee4 100%); background-size:cover; opacity:1;
    }
    :root:not([data-theme="dark"]) .ember-particle{
      background:radial-gradient(circle, #ffe2b8 0%, #f07a1e 55%, rgba(220,90,20,0) 100%);
      box-shadow:0 0 8px 2px rgba(235,110,30,.75);
    }
  }
  @media (max-width:640px){
    :root[data-theme="dark"] .ember-bg{ opacity:.65; }
  }
  @media (max-width:640px) and (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .ember-bg{ opacity:.65; }
  }

  /* ---------- Oikeasti liikkuvat, ylöspäin nousevat kipinät ---------- */
  .ember-particle{
    position:absolute;
    bottom:-10px;
    width:3px;
    height:3px;
    border-radius:50%;
    background:radial-gradient(circle, #fff1d6 0%, #ffb257 50%, rgba(255,150,60,0) 100%);
    box-shadow:0 0 10px 2.5px rgba(255,170,80,.9);
    opacity:0;
    animation-name:ember-rise;
    animation-timing-function:cubic-bezier(.25,.65,.4,1);
    animation-iteration-count:infinite;
    will-change:transform,opacity;
  }
  @keyframes ember-rise{
    0%{   transform:translate(0,0) scale(1);   opacity:0; }
    6%{   opacity:1; }
    55%{  opacity:.95; }
    100%{ transform:translate(var(--drift,18px), var(--rise,-360px)) scale(.25); opacity:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .ember-particle{ animation:none; opacity:0; }
  }
  /* Kapeat puhelimet (esim. 360 px) – yläpalkki ei saa levitä yli ruudun */
  @media (max-width:400px){
    .header-controls{ gap:.4rem; }
    .call-btn{ padding:.55rem .8rem; font-size:.8rem; gap:.35rem; }
    .preview-chip{ flex:0 1 auto; white-space:normal; }
  }
  @media (max-width:340px){
    .header-controls{ gap:.3rem; }
    .call-btn{ padding:.5rem .6rem; font-size:.78rem; }
    .call-btn svg{ display:none; }
  }
  /* ---------- hinnoittelu & hintalaskuri ---------- */
  .price-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1.2rem; margin-bottom:1.2rem; }
  .price-card{ background:var(--surface); border:1px solid var(--steel-line); border-radius:16px; padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.35rem; box-shadow:var(--shadow); }
  .price-card.is-featured{ border-color:var(--amber); }
  .price-kicker{ margin:0; font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
  .price-card h3{ font-size:1.08rem; margin:0 0 .4rem; }
  .price-big{ margin:0; font-size:2rem; font-weight:700; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums; }
  .price-big small{ font-size:1rem; font-weight:500; color:var(--ink-soft); }
  .price-big--text{ font-size:1.45rem; }
  .price-sub{ margin:0 0 .6rem; font-size:.85rem; color:var(--ink-faint); }
  .price-fine{ margin:.6rem 0 0; font-size:.78rem; color:var(--ink-faint); line-height:1.5; }
  .price-card ul{ margin:0; padding-left:1.1rem; color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
  .price-extras{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; padding:1rem 1.2rem; border:1px dashed var(--steel-line); border-radius:12px; margin-bottom:2rem; font-size:.9rem; color:var(--ink-soft); }
  .price-extras strong{ color:var(--ink); margin-right:.3rem; }
  .calc{ background:var(--surface-2); border:1px solid var(--steel-line); border-radius:18px; padding:1.8rem 1.6rem; margin-bottom:2rem; }
  .calc-head h3{ font-size:1.3rem; margin:0 0 .4rem; }
  .calc-head p{ margin:0 0 1.4rem; color:var(--ink-soft); font-size:.94rem; max-width:62ch; }
  .calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
  .calc-inputs{ display:flex; flex-direction:column; gap:1.1rem; }
  .calc-field{ display:flex; flex-direction:column; gap:.45rem; border:0; padding:0; margin:0; min-width:0; }
  .calc-field legend, .calc-field > label{ font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding:0; margin-bottom:.45rem; }
  .calc-field select, .calc-field input[type="number"]{ font:inherit; font-size:.96rem; padding:.65rem .8rem; border:1px solid var(--steel-line); border-radius:10px; background:var(--bg); color:var(--ink); width:100%; }
  .calc-field input[type="range"]{ width:100%; accent-color:var(--amber); }
  .calc-field output{ color:var(--ink); font-weight:600; }
  .seg{ display:flex; gap:.5rem; flex-wrap:wrap; }
  .seg label{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border:1px solid var(--steel-line); border-radius:999px; cursor:pointer; font-size:.92rem; color:var(--ink); }
  .seg label:has(input:checked){ border-color:var(--amber); background:rgba(201,151,92,.14); }
  .seg input{ accent-color:var(--amber); margin:0; }
  .calc-result{ background:var(--surface); border:1px solid var(--steel-line); border-radius:14px; padding:1.3rem 1.2rem; display:flex; flex-direction:column; gap:.9rem; }
  .calc-rows{ margin:0; display:flex; flex-direction:column; gap:.45rem; }
  .calc-rows div{ display:flex; justify-content:space-between; gap:1rem; font-size:.93rem; color:var(--ink-soft); }
  .calc-rows dt{ margin:0; } .calc-rows dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--ink); }
  .calc-rows .calc-total{ border-top:1px solid var(--steel-line); padding-top:.6rem; margin-top:.2rem; font-size:1.15rem; font-weight:700; }
  .calc-rows .calc-total dt, .calc-rows .calc-total dd{ color:var(--ink); }
  .calc-rows .calc-total dd{ color:var(--amber); }
  .calc-note{ margin:0; font-size:.84rem; color:var(--ink-faint); }
  .calc-quote p{ margin:0; color:var(--ink); }
  .calc-result .btn{ align-self:flex-start; }
  .price-models h3{ font-size:1.2rem; margin:0 0 1rem; }
  .price-models h4{ font-size:1rem; margin:0 0 .35rem; }
  .price-models .pricing-col p{ margin:0; color:var(--ink-soft); font-size:.9rem; }
  @media (max-width:760px){
    .calc-grid{ grid-template-columns:1fr; }
    .calc{ padding:1.3rem 1.1rem; }
    .price-big{ font-size:1.75rem; }
  }
  /* ---------- Meistä-alavalikko ---------- */
  nav.mainnav{ align-items:center; }
  .nav-sub{ position:relative; }
  .nav-sub-btn{ display:inline-flex; align-items:center; gap:.3rem; background:none; border:none; padding-inline:0; border-bottom:2px solid transparent; font:inherit; text-transform:inherit; letter-spacing:inherit; color:var(--ink-soft); padding-block:.25rem; cursor:pointer; }
  .nav-sub-btn:hover, .nav-sub-btn:focus-visible, .nav-sub-btn[aria-expanded="true"]{ color:var(--navy-strong); border-color:var(--amber); }
  .nav-sub-btn .chev{ width:11px; height:11px; transition:transform .15s ease; }
  .nav-sub-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .nav-sub-menu{ position:absolute; top:calc(100% + .6rem); left:-.9rem; min-width:13rem; background:var(--surface); border:1px solid var(--steel-line); border-radius:12px; box-shadow:var(--shadow); padding:.4rem; display:flex; flex-direction:column; z-index:70; }
  .nav-sub-menu[hidden]{ display:none; }
  .nav-sub-menu a, .nav-sub-menu button{ display:block; width:100%; text-align:left; background:none; border:0; border-radius:8px; font:inherit; text-transform:none; letter-spacing:0; font-size:.92rem; color:var(--ink); padding:.6rem .8rem; cursor:pointer; text-decoration:none; }
  nav.mainnav .nav-sub-menu a{ border-bottom:0; padding-block:.6rem; }
  .nav-sub-menu a:hover, .nav-sub-menu button:hover, .nav-sub-menu a:focus-visible, .nav-sub-menu button:focus-visible{ background:var(--surface-2); color:var(--navy-strong); }
  @media (max-width:860px){
    nav.mainnav{ align-items:stretch; }
    .nav-sub-btn{ width:100%; justify-content:space-between; padding-inline:0; padding-block:.75rem; border-bottom:1px solid var(--steel-line); }
    .nav-sub-btn[aria-expanded="true"]{ border-color:var(--steel-line); }
    .nav-sub-menu{ position:static; box-shadow:none; border:0; border-bottom:1px solid var(--steel-line); border-radius:0; background:transparent; padding:.2rem 0 .4rem .8rem; min-width:0; }
  }
  .hero-plate{ min-width:0; }
  .hero-grid{ grid-template-columns:minmax(0, 780px); }
  .hero-punch{ margin:.9rem 0 1.6rem; font-size:clamp(1.35rem,2.4vw,1.8rem); font-weight:700; line-height:1.25; color:var(--amber); }

  /* ---- tiivis etusivu ---- */
  section{ padding-block:clamp(2.4rem, 5vw, 4rem); }
  .sec-head{ margin-bottom:1.8rem; }
  .grid-services .plate p{ margin-bottom:0; }
  .about-compact{ display:flex; gap:1.8rem; align-items:flex-start; }
  .about-compact h2{ margin:0 0 .2rem; }
  .about-compact .about-role{ color:var(--amber); font-weight:600; margin:0 0 .8rem; }
  .about-compact p{ max-width:62ch; }
  .about-compact .badge-row{ margin:1rem 0 1.2rem; }
  @media (max-width:560px){ .about-compact{ flex-direction:column; gap:1rem; } }
  section.strip{ padding-block:1.2rem; border-block:1px solid var(--steel-line); }
  .strip-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .strip-row p{ margin:0; color:var(--ink-soft); }
  .strip-row strong{ color:var(--navy-strong); margin-right:.4rem; }
  .snake-line{ margin-top:1.4rem; color:var(--ink-soft); font-size:.9rem; }
  .snake-line a{ color:var(--amber); text-decoration:underline; }
  .nav-panel .quote-panel{ margin-top:0; }
  .stat-strip{ margin-top:2rem; }
  .stat{ flex:1 1 0; min-width:0; }
  @media (max-width:560px){
    .stat-strip{ flex-wrap:nowrap; padding-top:1.1rem; }
    .stat{ padding-inline:.8rem; }
    .stat .k{ font-size:.78rem; letter-spacing:.08em; }
    .stat .v, .stat .v[style]{ font-size:1rem !important; }
    .grid-services{ gap:.7rem; }
    .grid-services .plate:not(.wide){ display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; row-gap:.15rem; padding:1rem; }
    .grid-services .plate:not(.wide) .plate-icon{ grid-row:span 2; }
    .grid-services .plate:not(.wide) .code{ display:none; }
    .grid-services .plate:not(.wide) h3{ margin:0; }
    .grid-services .plate.wide{ padding:1rem; }
  }
  /* ===== Tausta ja animaatiot (uusi) ===== */
  :root{ --grid:rgba(255,255,255,.035); --pulse:#e3a55a; --ph1:#b07a45; --ph2:#d9d2c7; --ph3:#7d776e; }
  :root[data-theme="light"]{ --grid:rgba(110,80,30,.07); --pulse:#c0782a; --ph1:#8b5a2b; --ph2:#2f2a24; --ph3:#a39c92; }
  body.bg-grid{
    background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:32px 32px; background-attachment:fixed;
  }
  .hero{ position:relative; overflow:hidden;
    background:radial-gradient(ellipse 60% 75% at 85% 35%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 70%); }
  .hero .wrap{ position:relative; z-index:1; }
  .hero-bg{ position:absolute; inset:0; width:100%; height:100%; color:var(--steel); opacity:1; pointer-events:none; }
  .hero-bg .trace, .hero-bg .node{ opacity:.6; }
  :root[data-theme="light"] .hero-bg .trace, :root[data-theme="light"] .hero-bg .node{ opacity:.75; }
  .hero-bg .pulse path{ stroke:var(--pulse); stroke-dasharray:4 96; stroke-dashoffset:100; opacity:.9;
    animation:sak-flow var(--t,6s) linear infinite; animation-delay:var(--d,0s); filter:drop-shadow(0 0 3px var(--pulse)); }
  .hero-bg .led circle{ fill:var(--pulse); opacity:0; animation:sak-blink 5s ease-in-out infinite; animation-delay:var(--d,0s); }
  @keyframes sak-flow{ to{ stroke-dashoffset:0; } }
  @keyframes sak-blink{ 0%,100%{ opacity:0; } 45%,55%{ opacity:.85; } }

  .phase-bg{ position:absolute; left:0; right:0; bottom:0; width:100%; height:90px; pointer-events:none; opacity:.5;
    -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 60%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent 30%, #000 60%, #000 90%, transparent); }
  .phases{ animation:sak-phase 10s linear infinite; }
  .ph1{ stroke:var(--ph1); } .ph2{ stroke:var(--ph2); } .ph3{ stroke:var(--ph3); }
  @keyframes sak-phase{ to{ transform:translateX(-200px); } }

  .plate, .product-card{ transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .plate:hover, .product-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--amber) 55%, var(--steel-line)); }

  @media (prefers-reduced-motion:no-preference){
    .hero-copy > *{ animation:sak-rise .7s cubic-bezier(.2,.7,.2,1) both; }
    .hero-copy > :nth-child(2){ animation-delay:.08s; } .hero-copy > :nth-child(3){ animation-delay:.16s; }
    .hero-copy > :nth-child(4){ animation-delay:.24s; } .hero-copy > :nth-child(5){ animation-delay:.32s; }
    .hero-copy > :nth-child(6){ animation-delay:.42s; }
    .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rd,0s); }
    .reveal.in{ opacity:1; transform:none; }
  }
  @keyframes sak-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .hero-bg .pulse, .hero-bg .led{ display:none; } .phases{ animation:none; } }
  /* D: tikapuulogiikka */
  .lad .rail{ stroke:var(--steel); stroke-width:3; fill:none; opacity:.9; }
  .lad .lw{ stroke:var(--steel); stroke-width:1.6; fill:none; }
  .lad .shut{ stroke:var(--pulse); stroke-width:2.4; opacity:0; animation:lad-shut 5.6s infinite; animation-delay:var(--d); }
  .lad .flow{ stroke:var(--pulse); stroke-width:2.6; fill:none; stroke-dasharray:100; stroke-dashoffset:100; opacity:.95; filter:drop-shadow(0 0 3px var(--pulse)); animation:lad-flow 5.6s infinite; animation-delay:var(--d); }
  .lad .coil{ fill:var(--pulse); opacity:0; animation:lad-coil 5.6s infinite; animation-delay:var(--d); filter:drop-shadow(0 0 6px var(--pulse)); }
  @keyframes lad-shut{ 0%,12%{ opacity:0; } 16%,82%{ opacity:1; } 88%,100%{ opacity:0; } }
  @keyframes lad-flow{ 0%,16%{ stroke-dashoffset:100; opacity:.95; } 40%,82%{ stroke-dashoffset:0; opacity:.95; } 90%,100%{ stroke-dashoffset:0; opacity:0; } }
  @keyframes lad-coil{ 0%,40%{ opacity:0; } 44%,82%{ opacity:.9; } 90%,100%{ opacity:0; } }

  :root[data-theme] .hero-bg.lad{ opacity:1; }
  .lad .rail{ stroke:color-mix(in srgb, var(--ink) 20%, transparent); }
  .lad .lw{ stroke:color-mix(in srgb, var(--ink) 20%, transparent); }
  @media (max-width:820px){ :root[data-theme] .hero-bg.lad{ opacity:.16; } }
  @media (min-width:821px){ .hero-copy{ max-width:620px; } .hero .stat-strip{ max-width:620px; } }
  @media (prefers-reduced-motion:reduce){ .lad .shut,.lad .flow,.lad .coil{ animation:none !important; } }
  .about-btns{ display:flex; flex-wrap:wrap; gap:.7rem; }
  .li-btn svg{ color:#0a66c2; flex:none; }
  :root[data-theme="dark"] .li-btn svg{ color:#70b5f9; }
  .cv-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:2.2rem; margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--steel-line); }
  @media (max-width:820px){ .cv-grid{ grid-template-columns:1fr; gap:1.6rem; } }
  .cv-h{ margin:0 0 1rem; font-size:1.15rem; color:var(--navy-strong); }
  .timeline{ list-style:none; margin:0; padding:0 0 0 1.1rem; border-left:2px solid var(--steel-line); }
  .timeline li{ position:relative; display:grid; grid-template-columns:5.6rem minmax(0,1fr); gap:.8rem; padding:0 0 1rem; }
  .timeline li::before{ content:""; position:absolute; left:calc(-1.1rem - 6px); top:.35rem; width:10px; height:10px; border-radius:50%; background:var(--bg); border:2px solid var(--amber); }
  .timeline li:first-child::before{ background:var(--amber); }
  .tl-year{ font:600 .78rem 'IBM Plex Mono', monospace; color:var(--amber); padding-top:.15rem; }
  .timeline b{ display:block; color:var(--navy-strong); }
  .tl-role{ color:var(--ink); }
  .tl-loc{ color:var(--ink-faint); font-size:.88rem; }
  .timeline p{ margin:.3rem 0 0; color:var(--ink-soft); font-size:.9rem; }
  @media (max-width:520px){ .timeline li{ grid-template-columns:1fr; gap:.1rem; } }
  .cv-src{ font-size:.78rem; color:var(--ink-faint); margin-top:.4rem; }

  /* Vaalea teema: ei animaatioita. Tumma teema: nuotiometsä ja kipinät. */
  :root[data-theme="light"] .ember-bg{ display:none !important; }
  :root[data-theme="light"] .hero-copy > *{ animation:none !important; }
  :root[data-theme="light"] .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  :root[data-theme="light"] .plate:hover, :root[data-theme="light"] .product-card:hover{ transform:none; }
  :root[data-theme="dark"] body.bg-grid{ background-image:none; }

  /* Referenssirivi hero:n alla */
  .refs-strip{ padding:1.1rem 0; border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line); background:var(--surface); position:relative; z-index:1; }
  .refs-h{ margin:0 0 .5rem; font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
  .refs-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
  .refs-list li{ border:1px solid var(--steel-line); border-radius:999px; padding:.3rem .8rem; font-size:.88rem; color:var(--ink-soft); }
  .btn-wa{ border-color:#25a244; color:#25a244; }
  .btn-wa:hover, .btn-wa:focus-visible{ background:#25a244; color:#fff; border-color:#25a244; }

  /* ===== Valittu ilme: vaalea Pehmeä tausta, keskitetty hero, Teollinen kirjasin, sähkösininen ===== */
  body{ font-size:17px; }
  h1,h2,h3,.hero-punch,.hero-tel{ font-family:'Barlow Condensed','Barlow',ui-sans-serif,system-ui,sans-serif !important; letter-spacing:.005em; }
  .hero h1{ font-size:clamp(2.6rem, 6.2vw, 4.6rem); max-width:16ch; margin-inline:auto; line-height:1.02; }
  .hero-grid{ grid-template-columns:minmax(0,820px); justify-content:center; }
  .hero-copy, .hero-copy[class]{ text-align:center; margin-inline:auto; max-width:760px; }
  .hero .eyebrow{ justify-content:center; }
  .hero .lede{ margin-inline:auto; }
  .hero-punch{ margin:.9rem 0 .4rem; }
  .hero-tel{ display:block; font-weight:700; font-size:clamp(2.6rem,8vw,4.4rem); line-height:1.05; letter-spacing:.01em; color:var(--navy-strong); text-decoration:none; margin:0 0 1.2rem; }
  .hero-tel:hover, .hero-tel:focus-visible{ color:var(--amber); }
  .hero .cta-row{ justify-content:center; }
  .hero .stat-strip{ max-width:680px; margin-inline:auto; align-items:center; }
  .hero .stat{ text-align:center; }
  .hero .stat:first-child{ padding-left:1.6rem; }
  @media (max-width:560px){ .hero .stat:first-child{ padding-left:.8rem; } .hero .stat:last-child .v, .hero .stat:last-child .v[style]{ font-size:.85rem !important; line-height:1.25; } }

  /* Vaalea teema: metsänvihreä ja viileä pohja */
  :root[data-theme="light"]{
    --bg:#f4f6f4; --surface:#ffffff; --surface-2:#e9eeea; --ink:#1b1f26; --ink-soft:#4b5360; --ink-faint:#737b88;
    --navy:#2c6e4f; --navy-strong:#141a24; --blue:#2c6e4f; --steel:#d3d9e0; --steel-line:rgba(20,30,50,.12);
    --amber:#2c6e4f; --amber-ink:#ffffff; --pulse:#2c6e4f; --shadow:0 16px 36px -28px rgba(20,30,60,.3);
  }
  /* Pehmeä tausta vain vaaleassa hero:ssa */
  :root[data-theme="light"] .hero{ background:none; }
  :root[data-theme="light"] .hero-bg, :root[data-theme="light"] .phase-bg{ display:none; }
  :root[data-theme="light"] .hero::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(rgba(30,40,60,.13) 1.2px, transparent 1.5px); background-size:26px 26px; }
  :root[data-theme="light"] .hero::after{ content:''; position:absolute; inset:-20%; z-index:0; pointer-events:none;
    background:radial-gradient(40% 50% at 20% 30%, rgba(44,110,79,.17), transparent 70%), radial-gradient(35% 45% at 80% 70%, rgba(44,110,79,.12), transparent 70%);
    animation:sak-soft 26s ease-in-out infinite alternate; }
  @keyframes sak-soft{ from{ transform:translate(-3%,-2%); } to{ transform:translate(3%,2%); } }
  @media (prefers-reduced-motion:reduce){ :root[data-theme="light"] .hero::after{ animation:none; } }

  /* Lappeenrannan maisema vaalean teeman hero:n taustalla (hahmoteltu: satama ja höyrylaivat, vesitorni, suihkulähde, Linnoituksen rinne, Kaukaan piiput) */
  .lpr-bg{ display:none; position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(150px,25vw,560px); z-index:0; pointer-events:none; opacity:.75; }
  :root[data-theme="light"] .lpr-bg{ display:block; }
  :root[data-theme="light"] .hero{ padding-bottom:clamp(120px,15vw,300px); }
  .lpr-bg .s{ fill:var(--bg); stroke:var(--navy); stroke-width:1.4; vector-effect:non-scaling-stroke; }
  .lpr-bg .pw{ fill:url(#lprw); stroke:none; opacity:.55; }
  .lpr-bg .lt{ fill:#e0a24a; stroke:none; animation:lpr-tw 3.4s ease-in-out infinite; }
  .lpr-bg .rf{ stroke:#e0a24a; stroke-width:1.8; stroke-dasharray:3 4; opacity:.7; animation:lpr-rf 4.2s ease-in-out infinite; }
  .lpr-bg .jet{ stroke-dasharray:7 9; animation:lpr-jet 1.6s linear infinite; }
  .lpr-bg .j2{ animation-duration:2.1s; } .lpr-bg .j3{ animation-duration:2.6s; }
  .lpr-bg .shipA{ animation:lpr-bob 6s ease-in-out infinite; } .lpr-bg .shipB{ animation:lpr-bob 7s ease-in-out -2s infinite; } .lpr-bg .shipC{ animation:lpr-bob 8s ease-in-out -1s infinite; } .lpr-bg .shipD{ animation:lpr-bob 7.5s ease-in-out -4s infinite; }
  .lpr-bg .l{ fill:none; stroke:var(--navy); stroke-width:1.2; vector-effect:non-scaling-stroke; }
  .lpr-bg .w{ stroke-dasharray:14 22; animation:lpr-w 16s linear infinite; }
  .lpr-bg .w2{ animation-duration:22s; animation-direction:reverse; }
  .lpr-bg .w3{ animation-duration:28s; }
  .lpr-bg .boat{ animation:lpr-b 30s ease-in-out infinite alternate; }
  .lpr-bg .sail{ animation:lpr-b 24s ease-in-out infinite alternate-reverse; }
  .lpr-bg .beacon{ fill:#c8453b; stroke:none; animation:lpr-blink 3.2s ease-in-out infinite; }
  .lpr-bg .steam{ animation:lpr-steam 7s ease-out infinite; transform-box:fill-box; transform-origin:center; opacity:0; }
  .lpr-bg .st2{ animation-delay:2.2s; animation-duration:8s; } .lpr-bg .st3{ animation-delay:4.4s; animation-duration:9s; }
  .lpr-bg .eye{ fill:var(--navy); animation:none; opacity:1; }
  @keyframes lpr-steam{ 0%{ opacity:0; transform:translate(0,6px) scale(.7); } 25%{ opacity:.9; } 100%{ opacity:0; transform:translate(14px,-34px) scale(1.5); } }
  .lpr-bg .wv{ animation:lpr-wave 6s linear infinite; }
  .lpr-bg .wv2{ animation-duration:8s; animation-direction:reverse; } .lpr-bg .wv3{ animation-duration:10s; } .lpr-bg .wv4{ animation-duration:13s; animation-direction:reverse; }
  @keyframes lpr-wave{ to{ transform:translateX(-60px); } }
  @media (max-width:700px){
    .lpr-bg{ width:760px; height:190px; left:-133px; right:auto; }
    :root[data-theme="light"] .hero{ padding-bottom:170px; }
  }
  @keyframes lpr-tw{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
  @keyframes lpr-rf{ 0%,100%{ opacity:.25; transform:translateX(-1.5px); } 50%{ opacity:.8; transform:translateX(1.5px); } }
  @keyframes lpr-jet{ to{ stroke-dashoffset:-32; } }
  @keyframes lpr-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(1.6px); } }
  @keyframes lpr-w{ to{ stroke-dashoffset:-72; } }
  @keyframes lpr-b{ to{ transform:translateX(28px); } }
  @keyframes lpr-blink{ 0%,100%{ opacity:.15; } 50%{ opacity:1; } }
  @media (prefers-reduced-motion:reduce){ .lpr-bg .w, .lpr-bg .boat, .lpr-bg .sail,  }

  /* audit fixes */
  .lang-btn{min-width:40px;min-height:40px}
  .foot-main a{display:inline-block;padding:.7rem .4rem;margin:-.7rem -.4rem}
  .file-native{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
  .file-native:focus-visible + .file-btn{outline:3px solid var(--blue);outline-offset:2px}
  .file-btn{text-transform:none;letter-spacing:0;font-family:'Barlow',system-ui,sans-serif;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
  .file-name{display:inline-block;margin-left:.6rem;vertical-align:middle}
  .field.consent .check{text-transform:none;letter-spacing:0;font-family:'Barlow',system-ui,sans-serif;color:var(--text,inherit);display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.45;cursor:pointer}
  .field.consent input[type=checkbox]{width:22px;height:22px;flex:none;margin-top:.1rem}
  .field.consent a{text-decoration:underline}


  /* ===== Päivystysvisualisointi ja alatunniste ===== */
  :root{ --duty:#b3352b; --duty-bg:rgba(200,69,59,.1); --duty-line:rgba(200,69,59,.38); --duty-dot:#c8453b; --duty-solid:#b3352b; }
  :root[data-theme="dark"]{ --duty:#ff9d92; --duty-bg:rgba(255,90,70,.12); --duty-line:rgba(255,120,105,.4); --duty-dot:#ff6b5d; --duty-solid:#c8453b; }
  .duty-dot{ position:relative; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--duty-dot); flex:none; }
  .duty-pill{ display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem; padding:.45rem .95rem; border-radius:999px; border:1px solid var(--duty-line); background:var(--duty-bg); color:var(--duty); font-weight:600; font-size:.92rem; text-decoration:none; }
  .duty-pill:hover, .duty-pill:focus-visible{ background:var(--duty-solid); border-color:var(--duty-solid); color:#fff; }
  .duty-pill:hover .duty-dot, .duty-pill:focus-visible .duty-dot{ background:#fff; }
  .hero h1{ max-width:22ch; }
  /* Yläpalkki: päivystysmerkki oikeaan yläkulmaan, yhteystiedot (kieli, teema, puhelin) sen alle samalle oikealle reunalle */
  .headbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand duty" "nav controls"; align-items:center; gap:.35rem 1.5rem; padding-block:.6rem; }
  .headbar .brand{ grid-area:brand; }
  .headbar .header-duty{ grid-area:duty; justify-self:end; margin:0; padding:.28rem .85rem; font-size:.8rem; }
  .headbar nav.mainnav{ grid-area:nav; }
  .headbar .header-controls{ grid-area:controls; justify-self:end; }
  @media (min-width:1161px) and (max-width:1320px){ nav.mainnav{ gap:1.05rem; } }
  @media (max-width:1160px){
    .headbar{ grid-template-areas:"brand duty" "brand controls" "nav nav"; }
  }
  @media (max-width:640px){
    .headbar{ grid-template-areas:"brand duty" "controls controls" "nav nav"; gap:.5rem .8rem; }
  }
  @media (prefers-reduced-motion:no-preference){
    .duty-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--duty-dot); animation:duty-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
    @keyframes duty-ping{ 0%{ transform:scale(1); opacity:.7; } 75%,100%{ transform:scale(2.7); opacity:0; } }
  }
  .duty{ padding:2.2rem 0 1rem; position:relative; z-index:1; }
  .duty-card{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.6rem 2.4rem; align-items:center; padding:2rem 2.2rem; border:1px solid var(--duty-line); border-radius:18px; background:var(--surface) linear-gradient(115deg,transparent 55%,var(--duty-bg)); box-shadow:var(--shadow); overflow:hidden; }
  .duty-tab{ position:absolute; top:0; right:0; padding:.3rem 1rem; border-bottom-left-radius:10px; background:var(--duty-solid); color:#fff; font:600 .74rem 'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
  .duty-main h2{ margin:0 0 .5rem; font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.1; color:var(--navy-strong); }
  .duty-main p{ margin:0 0 1.2rem; color:var(--ink-soft); max-width:50ch; text-wrap:pretty; }
  .duty-call{ display:inline-flex; align-items:center; gap:.7rem; min-height:48px; padding:.8rem 1.5rem; border-radius:12px; background:var(--duty-solid); color:#fff; font-weight:700; font-size:1.05rem; text-decoration:none; }
  .duty-call:hover, .duty-call:focus-visible{ filter:brightness(1.1); }
  .duty-main .duty-note{ margin:.9rem 0 0; font:500 .8rem 'IBM Plex Mono',monospace; color:var(--ink-faint); }
  .duty-steps{ list-style:none; margin:0; padding:0 0 0 1.4rem; border-left:2px solid var(--duty-line); display:grid; gap:1rem; counter-reset:ds; }
  .duty-steps li{ position:relative; display:grid; gap:.15rem; counter-increment:ds; }
  .duty-steps li::before{ content:counter(ds); position:absolute; left:calc(-1.4rem - 13px); top:.05rem; width:24px; height:24px; border-radius:50%; background:var(--surface); border:2px solid var(--duty-dot); color:var(--duty); font:600 .75rem 'IBM Plex Mono',monospace; display:grid; place-items:center; }
  .duty-steps b{ color:var(--navy-strong); font-size:1.02rem; }
  .duty-steps span{ color:var(--ink-soft); font-size:.92rem; }
  @media (max-width:820px){ .duty-card{ grid-template-columns:1fr; padding:2.4rem 1.3rem 1.5rem; } .duty-call{ width:100%; justify-content:center; } }

  footer{ padding-block:2.6rem 1.6rem; background:var(--surface); }
  .foot-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:2rem 2.5rem; }
  .foot-col h3{ margin:0 0 .9rem; font:600 .78rem 'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-strong); }
  .foot-col p{ margin:0 0 .8rem; color:var(--ink-soft); font-size:.92rem; line-height:1.5; max-width:46ch; }
  .foot-logo{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
  .foot-mark{ display:grid; place-items:center; width:38px; height:38px; border-radius:8px; background:var(--amber); color:var(--amber-ink); font:700 .8rem 'Barlow Condensed',sans-serif; letter-spacing:.05em; }
  .foot-name{ font:700 1.35rem 'Barlow Condensed',sans-serif; letter-spacing:.02em; color:var(--navy-strong); }
  .foot-col .foot-bid{ font:500 .85rem 'IBM Plex Mono',monospace; color:var(--ink); }
  .foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.92rem; color:var(--ink-soft); }
  .foot-list a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--steel-line); text-underline-offset:3px; }
  .foot-list a:hover, .foot-list a:focus-visible{ color:var(--amber); text-decoration-color:currentColor; }
  .foot-dutybtn{ display:inline-flex; align-items:center; gap:.6rem; padding:.55rem 1rem; border-radius:8px; border:1px solid var(--duty-line); background:var(--duty-bg); color:var(--duty); font:600 .95rem 'IBM Plex Mono',monospace; text-decoration:none; }
  .foot-dutybtn:hover, .foot-dutybtn:focus-visible{ background:var(--duty-solid); border-color:var(--duty-solid); color:#fff; }
  .foot-dutybtn:hover .duty-dot, .foot-dutybtn:focus-visible .duty-dot{ background:#fff; }
  .foot-col .foot-112{ margin:.8rem 0 0; font-size:.8rem; color:var(--ink-faint); }
  footer .foot-scope{ margin:1.8rem 0 0; padding-top:1.2rem; border-top:1px solid var(--steel-line); max-width:none; font-size:.8rem; color:var(--ink-faint); }
  .foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; margin-top:1rem; font:400 .76rem 'IBM Plex Mono',monospace; color:var(--ink-faint); }
  .foot-bottom p{ margin:0; }
  .foot-bottom a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
  @media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; gap:1.6rem; } }