/*
Theme Name: JL-Carcenter
Theme URI: https://jlcarcenter.fi/
Author: JL-Carcenter Oy
Description: JL-Carcenter Oy:n räätälöity WordPress-teema.
Version: 1.3.3
Text Domain: jlcarcenter
*/

:root{
      --bg:#000000;
      --bg-soft:#0b0b0b;
      --card:#111111;
      --text:#FFFFFF;
      --muted:#c8c8c8;
      --line:#2a2a2a;
      --accent:#3DFC16;
      --accent-hover:#64ff45;
      --white:#ffffff;
      --max:1180px;
      --radius:14px;
      --shadow:0 16px 44px rgba(0,0,0,.20);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, "Segoe UI", Arial, Helvetica, sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}

    .container{
      width:min(calc(100% - 36px), var(--max));
      margin:auto;
    }

    /* HEADER */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(13,15,18,.94);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
    }
    .nav{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      font-size:1.35rem;
      font-weight:700;
      font-style:italic;
      letter-spacing:.035em;
      white-space:nowrap;
    }
    .brand span{
      color:var(--accent);
      font-weight:600;
    }
    nav{
      display:flex;
      align-items:center;
      gap:24px;
      font-size:.96rem;
    }
    nav a{color:#e7e9ed}
    nav a:hover{color:#fff}
    .nav-call{
      background:var(--accent);
      color:#000000;
      padding:11px 16px;
      border-radius:10px;
      font-weight:700;
    }
    .menu-toggle{
      display:none;
      border:1px solid var(--line);
      background:transparent;
      color:#fff;
      padding:9px 12px;
      border-radius:9px;
      font-size:1rem;
    }

    /* HERO */
    .hero{
      position:relative;
      min-height:680px;
      display:flex;
      align-items:center;
      overflow:hidden;
      background:
        linear-gradient(90deg, rgba(6,8,10,.95) 0%, rgba(6,8,10,.78) 45%, rgba(6,8,10,.28) 100%),
        url("images/hero.jpg") center/cover no-repeat;
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:160px;
      background:linear-gradient(transparent,var(--bg));
    }
    .hero-content{
      position:relative;
      z-index:2;
      max-width:720px;
      padding:90px 0 120px;
    }
    .eyebrow{
      color:#3DFC16;
      text-transform:uppercase;
      font-size:.84rem;
      font-weight:800;
      letter-spacing:.13em;
      margin-bottom:12px;
    }
    h1{
      margin:0;
      font-size:clamp(2.8rem,7vw,5.5rem);
      line-height:.98;
      letter-spacing:-.045em;
      max-width:850px;
    }
    .hero p{
      margin:24px 0 30px;
      max-width:650px;
      font-size:1.18rem;
      color:#d4d8de;
    }
    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:50px;
      padding:0 21px;
      border-radius:11px;
      font-weight:800;
      transition:.2s ease;
      border:1px solid transparent;
    }
    .btn-primary{
      background:var(--accent);
      color:#000000;
    }
    .btn-primary:hover{
      background:var(--accent-hover);
      transform:translateY(-1px);
    }
    .btn-secondary{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.24);
      color:#fff;
    }
    .btn-secondary:hover{
      background:rgba(255,255,255,.13);
    }
    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:18px 30px;
      margin-top:34px;
      font-size:.93rem;
      color:#d6dae0;
    }
    .hero-points span:before{
      content:"✓";
      color:#3DFC16;
      margin-right:8px;
      font-weight:800;
    }

    /* SECTIONS */
    section{padding:90px 0}
    .section-head{
      max-width:740px;
      margin-bottom:40px;
    }
    .section-head h2{
      margin:0 0 12px;
      font-size:clamp(2rem,4vw,3rem);
      line-height:1.08;
      letter-spacing:-.03em;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:1.05rem;
    }

    /* CARS */
    .cars{background:var(--bg)}
    .car-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .car-card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .car-card img{
      aspect-ratio:16/10;
      width:100%;
      object-fit:cover;
      background:#252a31;
    }
    .car-body{padding:18px}
    .car-body h3{
      margin:0 0 4px;
      font-size:1.08rem;
    }
    .car-body p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .cars-note{
      margin:26px 0 0;
      color:var(--muted);
      font-size:.9rem;
    }

    /* BENEFITS */
    .benefits{
      background:var(--bg-soft);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .benefits.light-section{
      background:#FFFFFF;
      border-color:#e5e5e5;
    }
    .benefits.light-section .benefit{
      color:#000000;
    }
    .benefits.light-section .benefit p{
      color:#555555;
    }
    .benefit-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .benefit{
      padding:28px;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
    }
    .benefit-number{
      color:var(--accent);
      font-weight:900;
      font-size:.86rem;
      letter-spacing:.12em;
      margin-bottom:12px;
    }
    .benefit h3{margin:0 0 8px}
    .benefit p{margin:0;color:var(--muted);font-size:.95rem}

    /* SELL CAR */
    .sell-box{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:30px;
      align-items:center;
      border:1px solid var(--line);
      background:
        radial-gradient(circle at 90% 20%, rgba(217,39,46,.18), transparent 35%),
        var(--card);
      border-radius:24px;
      padding:clamp(30px,5vw,60px);
    }
    .sell-box h2{
      margin:0 0 14px;
      font-size:clamp(2rem,4vw,3.2rem);
      line-height:1.05;
    }
    .sell-box p{
      color:var(--muted);
      max-width:650px;
      margin:0 0 24px;
    }
    .sell-list{
      display:grid;
      gap:12px;
      padding:0;
      margin:0;
      list-style:none;
    }
    .sell-list li{
      padding:14px 16px;
      border:1px solid var(--line);
      border-radius:12px;
      background:rgba(255,255,255,.03);
    }

    /* TRUST */
    .trust-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:30px;
      align-items:center;
    }
    .trust-copy h2{
      font-size:clamp(2rem,4vw,3rem);
      margin:0 0 16px;
      line-height:1.08;
    }
    .trust-copy p{color:var(--muted)}
    .badges{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:15px;
    }
    .badge{
      min-height:150px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--card);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:12px 16px;
      color:#dfe3e8;
      font-weight:800;
      overflow:hidden;
    }
    .badge img{
      max-height:120px;
      max-width:92%;
      width:auto;
      object-fit:contain;
    }
    .badge-aaa img{
      max-width:78%;
      max-height:124px;
    }
    .badge-platina img{
      max-width:72%;
      max-height:118px;
    }

    /* FINANCE */
    .finance{
      background:var(--bg-soft);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .finance-logos{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .logo-box{
      min-height:120px;
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#222;
      font-weight:800;
      text-align:center;
    }
    .logo-box img{
      max-width:150px;
      max-height:70px;
      object-fit:contain;
    }

    /* CONTACT */
    .contact-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:28px;
    }
    .contact-card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:30px;
    }
    .contact-card h2{margin-top:0}
    .light-section .contact-card{color:#161616}
    .light-section .contact-row{border-color:#e9e9e9}
    .light-section .contact-row small{color:#777970}
    .contact-row{
      padding:13px 0;
      border-bottom:1px solid var(--line);
    }
    .contact-row:last-child{border-bottom:none}
    .contact-row small{
      display:block;
      color:var(--muted);
      margin-bottom:3px;
    }
    .contact-row strong{font-size:1.04rem}
    .map{
      min-height:420px;
      border-radius:var(--radius);
      overflow:hidden;
      border:1px solid var(--line);
      background:#222;
    }
    .map iframe{
      width:100%;
      height:100%;
      min-height:420px;
      border:0;
      display:block;
    }

    /* FOOTER */
    footer{
      border-top:1px solid var(--line);
      padding:34px 0 100px;
      color:var(--muted);
      font-size:.9rem;
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
    }

    /* MOBILE BAR */
    .mobile-bar{display:none}

    @media (max-width:900px){
      nav{
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:#101318;
        border-bottom:1px solid var(--line);
        padding:12px 18px 18px;
      }
      nav.open{display:flex}
      nav a{padding:13px 6px}
      .nav-call{text-align:center;margin-top:8px}
      .menu-toggle{display:block}
      .car-grid{grid-template-columns:repeat(2,1fr)}
      .benefit-grid{grid-template-columns:repeat(2,1fr)}
      .sell-box,.trust-grid,.contact-grid{grid-template-columns:1fr}
      .finance-logos{grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:620px){
      .container{width:min(calc(100% - 24px), var(--max))}
      .hero{
        min-height:620px;
        background:
          linear-gradient(180deg, rgba(6,8,10,.66), rgba(6,8,10,.96)),
          url("images/hero.jpg") center/cover no-repeat;
      }
      .hero-content{padding:70px 0 100px}
      .hero p{font-size:1.05rem}
      section{padding:65px 0}
      .actions .btn{width:100%}
      .car-grid{grid-template-columns:1fr}
      .benefit-grid{grid-template-columns:1fr}
      .badges{grid-template-columns:1fr 1fr}
      .finance-logos{grid-template-columns:1fr 1fr}
      footer{padding-bottom:88px}
      .mobile-bar{
        position:fixed;
        z-index:80;
        left:0;
        right:0;
        bottom:0;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        background:#111419;
        border-top:1px solid var(--line);
      }
      .mobile-bar a{
        min-height:64px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:8px 4px;
        font-size:.8rem;
        font-weight:800;
      }
      .mobile-bar a:nth-child(2){background:#1f8f3c}
      .mobile-bar a:nth-child(3){background:var(--accent)}
    }
  
    /* JL-Carcenterin nykyisestä ilmeestä tuotu vaalea osio */
    .light-section{
      background:#FFFFFF;
      color:#000000;
    }
    .light-section .section-head p,
    .light-section .trust-copy p{
      color:#555555;
    }
    .light-section .eyebrow{
      color:#159900;
    }
    .light-section .benefit,
    .light-section .contact-card{
      background:#FFFFFF;
      border-color:#e5e5e5;
      box-shadow:0 14px 35px rgba(0,0,0,.07);
    }

  
    /* viimeistelty yritysilme */
    body{
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    header{
      box-shadow:0 1px 0 rgba(255,255,255,.02);
    }
    .nav{
      min-height:82px;
    }
    .brand{
      letter-spacing:.02em;
    }
    .hero{
      min-height:720px;
    }
    .hero-content{
      max-width:760px;
    }
    .hero h1{
      max-width:760px;
    }
    .hero p{
      max-width:610px;
      line-height:1.75;
    }
    .eyebrow{
      font-size:.78rem;
      letter-spacing:.16em;
    }
    .btn{
      min-height:52px;
      border-radius:8px;
      padding:0 22px;
      letter-spacing:.01em;
    }
    .section-head{
      max-width:780px;
      margin-bottom:46px;
    }
    .section-head h2{
      font-weight:700;
    }
    .car-grid{
      gap:22px;
    }
    .car-card{
      border-radius:12px;
      box-shadow:0 12px 30px rgba(0,0,0,.18);
      transition:transform .2s ease, border-color .2s ease;
    }
    .car-card:hover{
      transform:translateY(-3px);
      border-color:#474747;
    }
    .car-body{
      padding:19px 20px 21px;
    }
    .car-body h3{
      font-size:1.02rem;
      font-weight:700;
    }
    .benefit-grid{
      gap:20px;
    }
    .benefit{
      border-radius:12px;
      min-height:210px;
      padding:30px 28px;
    }
    .benefit-number{
      font-size:.75rem;
      margin-bottom:22px;
    }
    .benefit h3{
      font-size:1.08rem;
      font-weight:700;
    }
    .benefit p{
      line-height:1.7;
    }
    .sell-box{
      border-radius:18px;
      padding:clamp(34px,5vw,62px);
    }
    .sell-list li{
      border-radius:9px;
      padding:15px 17px;
    }
    .trust-grid{
      gap:56px;
    }
    .badge{
      border-radius:12px;
      min-height:165px;
    }
    .logo-box{
      border-radius:10px;
      min-height:126px;
    }
    .contact-card{
      border-radius:14px;
      padding:34px;
    }
    .map{
      border-radius:14px;
    }
    footer{
      font-size:.86rem;
    }
    @media (max-width:620px){
      .hero + section > .container{
        grid-template-columns:1fr !important;
      }
      .hero + section > .container > div{
        border-right:none !important;
        border-bottom:1px solid #e5e5e5;
      }
      .hero + section > .container > div:last-child{
        border-bottom:none;
      }
      .hero{
        min-height:650px;
      }
      .hero-points{
        gap:12px 20px;
      }
      .benefit{
        min-height:auto;
      }
    }

  
    /* JL-Carcenter brand colors + device compatibility */
    :focus-visible{
      outline:3px solid #3DFC16;
      outline-offset:3px;
    }

    a, button{
      -webkit-tap-highlight-color:transparent;
    }

    .btn-primary,
    .nav-call{
      background:#3DFC16;
      color:#000000;
    }

    .btn-primary:hover,
    .nav-call:hover{
      background:#64ff45;
      color:#000000;
    }

    .eyebrow,
    .benefit-number{
      color:#3DFC16;
    }

    .light-section .eyebrow{
      color:#159900;
    }

    .hero-points span:before{
      color:#3DFC16;
    }

    .light-section .btn-primary{
      color:#000000;
    }

    img{
      height:auto;
    }

    @media (max-width:1100px){
      .container{
        width:min(calc(100% - 32px), var(--max));
      }
      nav{
        gap:18px;
      }
    }

    @media (max-width:760px){
      h1{
        font-size:clamp(2.45rem,11vw,4rem);
      }
      .section-head h2,
      .sell-box h2,
      .trust-copy h2{
        font-size:clamp(1.85rem,8vw,2.6rem);
      }
      .hero{
        min-height:620px;
      }
      .hero-content{
        padding-top:58px;
        padding-bottom:92px;
      }
      .car-grid,
      .benefit-grid,
      .finance-logos,
      .badges{
        grid-template-columns:1fr;
      }
      .sell-box{
        padding:30px 22px;
      }
      .contact-card{
        padding:26px 22px;
      }
      .badge{
        min-height:140px;
        padding:12px;
      }
      .badge img{
        max-height:112px;
        max-width:88%;
      }
      .badge-aaa img{
        max-width:74%;
      }
      .badge-platina img{
        max-width:70%;
      }
    }

    @media (max-width:420px){
      .container{
        width:calc(100% - 20px);
      }
      .brand{
        font-size:1.08rem;
      }
      .menu-toggle{
        padding:8px 10px;
      }
      .hero{
        min-height:590px;
      }
      .hero p{
        font-size:1rem;
      }
      section{
        padding:56px 0;
      }
      .btn{
        min-height:50px;
        padding:0 16px;
        font-size:.94rem;
      }
      .mobile-bar a{
        font-size:.76rem;
      }
      .map,
      .map iframe{
        min-height:340px;
      }
    }

    @supports(padding:max(0px)){
      .mobile-bar{
        padding-bottom:env(safe-area-inset-bottom);
      }
    }

  
    /* V4 hero: teksti + näyttävä autokuva */
    .hero{
      min-height:680px;
      display:flex;
      align-items:center;
      background:#000000;
      overflow:hidden;
      position:relative;
    }

    .hero:before{
      content:"";
      position:absolute;
      width:520px;
      height:520px;
      left:-220px;
      top:110px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(61,252,22,.10), rgba(61,252,22,0) 68%);
      pointer-events:none;
    }

    .hero:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:100px;
      background:linear-gradient(transparent,#000000);
      pointer-events:none;
    }

    .hero-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
      align-items:center;
      gap:64px;
      padding-top:62px;
      padding-bottom:82px;
    }

    .hero-content{
      max-width:700px;
      padding:0;
      margin-top:-20px;
    }

    .hero h1{
      margin-top:0;
      max-width:720px;
    }

    .hero-visual{
      position:relative;
      min-height:470px;
      border-radius:18px;
      overflow:hidden;
      border:1px solid #252525;
      box-shadow:0 32px 80px rgba(0,0,0,.55);
      background:#101010;
    }

    .hero-visual:before{
      content:"";
      position:absolute;
      z-index:2;
      inset:0;
      border-radius:inherit;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
      pointer-events:none;
    }

    .hero-visual img{
      width:100%;
      height:100%;
      min-height:470px;
      object-fit:cover;
      object-position:center;
      transition:transform .6s ease;
    }

    .hero-visual:hover img{
      transform:scale(1.018);
    }

    .hero-visual-shade{
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 46%),
        linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0) 42%);
      pointer-events:none;
    }

    .hero-visual-label{
      position:absolute;
      z-index:3;
      left:26px;
      bottom:24px;
      display:flex;
      flex-direction:column;
      gap:2px;
      color:#fff;
    }

    .hero-visual-label strong{
      font-size:1.06rem;
      letter-spacing:.01em;
    }

    .hero-visual-label span{
      color:#3DFC16;
      font-size:.82rem;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.12em;
    }

    @media (max-width:980px){
      .hero{
        min-height:auto;
      }

      .hero-grid{
        grid-template-columns:1fr;
        gap:34px;
        padding-top:62px;
        padding-bottom:72px;
      }

      .hero-content{
        max-width:760px;
        margin-top:0;
      }

      .hero-visual{
        min-height:400px;
      }

      .hero-visual img{
        min-height:400px;
      }
    }

    @media (max-width:620px){
      .hero-grid{
        gap:28px;
        padding-top:44px;
        padding-bottom:56px;
      }

      .hero-visual{
        min-height:280px;
        border-radius:13px;
      }

      .hero-visual img{
        min-height:280px;
      }

      .hero-visual-label{
        left:18px;
        bottom:16px;
      }
    }

    @media (max-width:420px){
      .hero-grid{
        padding-top:36px;
      }

      .hero-visual{
        min-height:235px;
      }

      .hero-visual img{
        min-height:235px;
      }
    }


/* V1.1.0: sisäsivut ja laajennettu alatunniste */
.site-footer{
  border-top:1px solid var(--line);
  padding:40px 0 100px;
  color:var(--muted);
  font-size:.9rem;
  background:#070707;
}
.footer-layout{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:34px;
  flex-wrap:wrap;
}
.footer-company{
  display:grid;
  gap:4px;
}
.footer-company strong{
  color:#fff;
  font-size:1rem;
}
.footer-company a:hover,
.footer-links a:hover{
  color:var(--accent);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  position:static;
  background:transparent;
  border:0;
  padding:0;
  font-size:.9rem;
}
.footer-links a{
  color:#d6d6d6;
  padding:0;
}
.footer-bottom{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:#8e8e8e;
  font-size:.82rem;
}
.standard-page{
  min-height:60vh;
  background:#fff;
  color:#111;
}
.page-hero{
  padding:72px 0 62px;
  background:#0a0a0a;
  color:#fff;
  border-bottom:1px solid #202020;
}
.page-hero h1{
  font-size:clamp(2.35rem,6vw,4.4rem);
  max-width:900px;
}
.page-content-section{
  padding:70px 0 90px;
  background:#fff;
}
.page-content{
  max-width:880px;
  font-size:1.04rem;
  line-height:1.8;
}
.page-content h2,
.page-content h3{
  line-height:1.2;
  margin-top:2em;
  margin-bottom:.65em;
}
.page-content h2{font-size:clamp(1.65rem,4vw,2.35rem)}
.page-content h3{font-size:1.35rem}
.page-content p{margin:0 0 1.25em}
.page-content a{
  color:#117a00;
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-content ul,
.page-content ol{
  padding-left:1.3em;
  margin:0 0 1.4em;
}
.page-content table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
}
.page-content th,
.page-content td{
  padding:12px 14px;
  border:1px solid #dedede;
  text-align:left;
  vertical-align:top;
}
.page-content blockquote{
  margin:26px 0;
  padding:18px 22px;
  border-left:4px solid var(--accent);
  background:#f4f4f4;
}
@media (max-width:900px){
  .footer-links{
    display:flex;
    position:static;
    flex-direction:row;
    align-items:flex-start;
    gap:10px 18px;
    background:transparent;
    border:0;
    padding:0;
  }
}
@media (max-width:620px){
  .site-footer{padding-bottom:92px}
  .footer-layout{display:grid;grid-template-columns:1fr;gap:26px}
  .footer-links{display:grid;grid-template-columns:1fr;gap:12px}
  .page-hero{padding:54px 0 46px}
  .page-content-section{padding:48px 0 70px}
  .page-content{font-size:1rem}
}

/* V1.2.0: valmiit Meistä-, Yhteystiedot-, Tietosuoja- ja Ehdot-sivut */
.page-lead{max-width:800px;margin:18px 0 0;color:#c8c8c8;font-size:clamp(1rem,2vw,1.18rem);line-height:1.7}
.updated-badge{display:inline-flex;margin-top:22px;padding:8px 12px;border:1px solid #2d2d2d;border-radius:999px;background:#111;color:#d8d8d8;font-size:.84rem}
.legal-wrap,.about-wrap{max-width:1040px}
.legal-intro,.about-opening{max-width:880px;margin-bottom:42px;font-size:1.07rem;line-height:1.8;color:#333}
.legal-intro{padding:28px 30px;border:1px solid #e5e5e5;border-left:4px solid var(--accent);border-radius:14px;background:#fafafa}
.legal-intro p:last-child,.about-opening p:last-child{margin-bottom:0}
.legal-sections{display:grid;gap:18px}
.legal-card{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px;border:1px solid #e6e6e6;border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.035)}
.section-number{font-size:1.02rem;font-weight:800;color:#1fa600;letter-spacing:.08em;padding-top:5px}
.legal-card h2{margin:0 0 14px;font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.25}
.legal-card p{margin:0 0 1em;color:#3d3d3d;line-height:1.75}
.legal-card p:last-child{margin-bottom:0}
.legal-card ul,.legal-card ol{margin:10px 0 18px;padding-left:1.25rem;color:#333;line-height:1.75}
.legal-card a{color:#117a00;text-decoration:underline;text-underline-offset:3px}
.legal-note{padding:14px 16px;background:#f5f5f5;border-radius:10px;border-left:3px solid var(--accent)}
.lifespan-list{columns:2;column-gap:42px}
.example-box{padding:18px 20px;margin:18px 0;background:#0b0b0b;color:#fff;border-radius:12px;line-height:1.65}
.contact-cta{margin-top:42px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:18px;background:#0b0b0b;color:#fff;border:1px solid #222}
.contact-cta h2{max-width:680px;margin:5px 0 8px;font-size:clamp(1.55rem,3.5vw,2.25rem);line-height:1.2}
.contact-cta p{margin:0;color:#bbb}
.contact-cta .btn{flex:0 0 auto}
.big-copy{font-size:clamp(1.35rem,3vw,2rem);font-weight:650;line-height:1.45;color:#111}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:46px 0 58px}
.value-card{padding:30px;border:1px solid #e6e6e6;border-radius:16px;background:#fafafa}
.value-card>span{display:block;color:#1fa600;font-weight:800;letter-spacing:.08em;margin-bottom:16px}
.value-card h2{font-size:1.45rem;line-height:1.25;margin:0 0 14px}
.value-card p,.value-card li{color:#444;line-height:1.7}
.value-card ul{padding-left:1.15rem}
.owner-story{display:grid;grid-template-columns:minmax(220px,.65fr) 1.35fr;gap:48px;padding:44px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.owner-story-label h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;margin:8px 0 0}
.owner-story-copy p{color:#3f3f3f;line-height:1.8;margin:0 0 1.2em}
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.person-card{padding:34px;border:1px solid #e4e4e4;border-radius:18px;background:#fff;box-shadow:0 10px 34px rgba(0,0,0,.045)}
.person-kicker{display:inline-block;margin-bottom:15px;color:#137d00;font-weight:800;text-transform:uppercase;letter-spacing:.13em;font-size:.78rem}
.person-card h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 4px;line-height:1.1}
.person-role{font-weight:700;color:#444;margin-top:0}
.person-card>p:not(.person-role){color:#555;min-height:52px}
.person-links{display:grid;gap:10px;margin-top:28px}
.person-links a{display:flex;flex-direction:column;gap:2px;padding:15px 16px;border:1px solid #e7e7e7;border-radius:11px;background:#fafafa;transition:.2s ease}
.person-links a:hover{border-color:#a9a9a9;transform:translateY(-1px)}
.person-links span{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:#777}
.person-links strong{font-size:1rem;color:#111;word-break:break-word}

.person-links a.whatsapp-link{background:#f4fff1;border-color:#cfeac7}
.person-links a.whatsapp-link:hover{border-color:var(--accent)}
.person-links a.whatsapp-link strong{color:#137d00}
.contact-info-panel{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;padding:34px;border-radius:18px;background:#0b0b0b;color:#fff}
.contact-info-panel h2{margin:7px 0 12px;font-size:1.8rem}.contact-info-panel p{color:#c5c5c5}
.social-buttons{display:grid;gap:10px;margin-top:18px}
.social-btn{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border:1px solid #333;border-radius:11px;background:#151515;color:#fff;font-weight:700}
.social-btn:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:850px){.value-grid{grid-template-columns:1fr}.owner-story{grid-template-columns:1fr;gap:22px}.people-grid{grid-template-columns:1fr}.contact-info-panel{grid-template-columns:1fr}.lifespan-list{columns:1}}
@media (max-width:620px){.legal-card{grid-template-columns:1fr;gap:8px;padding:22px}.section-number{padding:0}.legal-intro{padding:22px}.contact-cta{align-items:flex-start;flex-direction:column;padding:26px}.contact-cta .btn{width:100%;text-align:center}.person-card{padding:24px}.contact-info-panel{padding:24px}.value-card{padding:24px}}

.finance-wrap .finance-highlight{font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.35;color:#111;margin:0 0 16px}
.finance-partner-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;padding-left:1.2rem;margin:18px 0 0}
.finance-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:26px 0 34px}
.finance-logos .logo-box{display:flex;align-items:center;justify-content:center;min-height:112px;padding:18px;border:1px solid #e6e6e6;border-radius:16px;background:#fff}
.finance-logos .logo-box img{max-width:100%;max-height:56px;object-fit:contain}
.finance-grid{grid-template-columns:repeat(2,1fr);margin-top:8px}
.finance-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:850px){.finance-logos{grid-template-columns:repeat(2,1fr)}.finance-grid{grid-template-columns:1fr}}
@media (max-width:620px){.finance-partner-list{grid-template-columns:1fr}.finance-logos{grid-template-columns:1fr}.finance-cta-actions{width:100%}.finance-cta-actions .btn{width:100%;text-align:center}}


/* V1.3.1: Etusivun hero vaaleaksi vain puhelinnäkymässä */
@media (max-width:620px){
  .hero{
    background:#FFFFFF;
    color:#000000;
  }
  .hero:before{
    background:radial-gradient(circle, rgba(61,252,22,.12), rgba(61,252,22,0) 68%);
  }
  .hero:after{
    background:linear-gradient(transparent,#FFFFFF);
  }
  .hero h1{
    color:#000000;
  }
  .hero p{
    color:#4d4d4d;
  }
  .hero-points{
    color:#222222;
  }
  .hero .btn-secondary{
    background:#FFFFFF;
    border-color:#cfcfcf;
    color:#000000;
  }
  .hero .btn-secondary:hover{
    background:#f5f5f5;
  }
}