/* Sisältöalue */
.bg-container { border-top-right-radius: 20px; padding: 80px 0px 100px 0px; }
.bg-container.smaller_margin { padding: 40px 0px 60px 0px; }
@media (max-width: 960px){
    .bg-container { padding: 40px 0px 60px 0px; }
    .bg-container.smaller_margin { padding: 20px 0px 40px 0px; } 
}
.bg-container--white { background: transparent; }
.bg-container--violet{ background: var(--nv-primary-accent); }
.bg-container--orange{ background: var(--nv-secondary-accent); }
.bg-container--green { background: var(--nv-c-1); }
.bg-container--gray  { background: var(--nv-light-bg); }
.bg-container--dark  { background: var(--nv-dark-bg); }
.bg-container--black { background: var(--nv-text-color); }
.bg-container--dark *, .bg-container--black *  { color: var(--nv-text-dark-bg); }
body .editor-styles-wrapper .bg-container--dark p, body .editor-styles-wrapper .bg-container--black p { color: var(--nv-text-dark-bg); }





/* --- Content Area --- */
.content-area{
    position: relative;
  }
  
  /* oletus: 1/3 + 2/3 */
.content-area__grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--grid-gap);
    align-items: start;
  }

  .content-area__grid > div {
      padding-top: 2px;
  }
  
  /* alle 1200px: 1/4 + 3/4 */
  @media (max-width: 1200px){
  
    .content-area__grid{
      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
      column-gap: 3rem;
    }
  
  }
  
  /* vasen palsta */
  .content-area__left{
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
  }

  .content-area__left picture {
    max-width: 100%;
  }

  .content-area__left img {
    margin-left: calc((1 * var(--grid-unit)) + (1 * var(--grid-gap)));
    /*aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;*/
    max-width: 250px;
    margin-top: 3rem;
  }
  
  .content-area__title,
  .content-area__subtitle{
    margin: 0;
  }
  
  /* jos molemmat on, vähän väliä */
  .content-area__title + .content-area__subtitle{
    margin-top: 0.5rem;
  }

.content-area__title { color: var(--nv-text-color); }
.content-area__subtitle { color: var(--custom-2); }

.bg-container--black .content-area__title { color: var(--nv-text-dark-bg); }
.bg-container--black .content-area__subtitle { color: var(--custom-1); }

.bg-container--dark .content-area__title { color: var(--nv-text-dark-bg); }
.bg-container--dark .content-area__subtitle { color: var(--custom-1); }

.bg-container--gray .content-area__title { color: var(--nv-text-color); }
.bg-container--gray .content-area__subtitle { color: var(--nv-text-color); }

.bg-container--green .content-area__title { color: var(--nv-text-color); }
.bg-container--green .content-area__subtitle { color: var(--custom-3); }

.bg-container--orange .content-area__title { color: var(--nv-text-color); }
.bg-container--orange .content-area__subtitle { color: var(--custom-3); }

.bg-container--violet .content-area__title { color: var(--nv-text-color); }
.bg-container--violet .content-area__subtitle { color: var(--nv-text-color); }





  
  /* oikea palsta: max 928px */
  .content-area__right{
    max-width: 928px;
    width: 100%;
    min-width: 0;
    justify-self: start;
  }

  .content-area--wide .content-area__right, .content-area--large_heading .content-area__right {
    max-width: 100%;
  }
  
  /* --- Kulmamerkit: perus (harmaa), vaihdetaan parentin .bg-container--* mukaan --- */
  .content-area__corner{
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  /* sijainti */
  .content-area__corner--right{
    right: 0;
    background-image: url(../img/kulma_oikea_vharmaa.svg);
  }
  .content-area__corner--left{
    left: 0;
    background-image: url(../img/kulma_vasen_vharmaa.svg);
  }
  
  /* Jos content-area on violet/orange/gray/green bg-containerin sisällä => musta kulma */
  .bg-container--violet .content-area__corner--right,
  .bg-container--orange .content-area__corner--right,
  .bg-container--gray   .content-area__corner--right,
  .bg-container--green  .content-area__corner--right{
    background-image: url(../img/kulma_oikea_musta.svg);
  }
  
  .bg-container--violet .content-area__corner--left,
  .bg-container--orange .content-area__corner--left,
  .bg-container--gray   .content-area__corner--left,
  .bg-container--green  .content-area__corner--left{
    background-image: url(../img/kulma_vasen_musta.svg);
  }
  
  /* Jos mustan taustan sisällä => oranssi kulma */
  .bg-container--black .content-area__corner--right{
    background-image: url(../img/kulma_oikea_oranssi.svg);
  }
  .bg-container--black .content-area__corner--left{
    background-image: url(../img/kulma_vasen_oranssi.svg);
  }


    /* Jos content-area on dark bg-containerin sisällä => harmaa kulma */
    .bg-container--dark .content-area__corner--right{
      background-image: url(../img/kulma_oikea_harmaa.svg);
    }
    
    .bg-container--dark .content-area__corner--left{
      background-image: url(../img/kulma_vasen_harmaa.svg);
    }
  
  /* Dark/white tai ei parenttia => harmaa (default) */

.content-area__nbrtitle {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-left: calc( ( 1 * var(--grid-unit) ) + ( 1 * var(--grid-gap) ) );
}



.content-area__nbrtitle > * {
    display: flex;
    align-items: baseline;
    font-size: var(--h4fontsize)!important;
    font-weight: var(--h4fontweight);
    line-height: var(--h4lineheight);
    letter-spacing: var(--h4letterspacing);
    text-transform: var(--h4texttransform);
}

.content-area__nbrtitle .content-area__nbr {
    color: var(--nv-secondary-accent);
}

@media (max-width: 1400px) {
    .content-area__nbrtitle {
      margin-left: calc( ( 0.5 * var(--grid-unit) ) + ( 0.5 * var(--grid-gap) ) );
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .content-area__nbrtitle > * {
        font-size: calc(0.85 * var(--h4fontsize) )!important;
    }

    .content-area__left img {
      margin-left: calc( ( 0.5 * var(--grid-unit) ) + ( 0.5 * var(--grid-gap) ) );
      max-width: 170px;
      margin-top: 2rem;
    }
}

@media (max-width: 960px) {
  .content-area__nbrtitle {
      margin-left: 1rem;
  }

  .content-area__left img {
    margin-left: 1rem;
    max-width: 130px;
      margin-top: 1rem;
  }

  .content-area__left{
    justify-content: start;
  }
}

@media (max-width: 450px) { 
  .content-area__left img {
    margin-left: 1rem;
    max-width: calc(100% - 2rem);
      margin-top: 1rem;
  }
}




/* ===== Editor: selkeytys sisältöalueelle ===== */

/* Placeholder otsikoille */
.editor-styles-wrapper .content-area__ph{
    color: rgba(0,0,0,0.45);
    font-weight: 400;
  }
  
  /* Poista vasemman palstan outline kokonaan */
  .editor-styles-wrapper .content-area__left{
    outline: none !important;
    padding: 0; /* ettei jää turhaa “laatikkoa” */
  }
  
  /* Jätä katkoviivarajaus vain oikeaan palstaan */
  .editor-styles-wrapper .content-area__right{
    outline: 2px dashed rgba(0,0,0,0.35);
    outline-offset: -4px;
    padding: 10px;
    position: relative;
  }
  
  /* Oikean palstan label: “Sisältöalue”, nostettuna niin ettei leikkaa katkoviivaa */
  .editor-styles-wrapper .content-area__right::before{
    content: "Sisältöalue";
    position: absolute;
    top: -12px;
    left: 10px;
    font-size: 11px;
    line-height: 1;
    background: #fff;
    padding: 0 6px;
    color: rgba(0,0,0,0.55);
  }

  /* Editor: nosta kulmamerkkiä, ettei osu tekstiin */
.editor-styles-wrapper .content-area__corner{
    top: -18px;     /* nosta ylöspäin */
    z-index: 2;
  }
  
  .editor-styles-wrapper .content-area__corner--right{
    right: -18px;   /* enemmän reunaan */
  }
  
  .editor-styles-wrapper .content-area__corner--left{
    left: -18px;    /* enemmän reunaan */
  }


  /* ===== Editor: aputyylit mustalla taustalla ===== */
.editor-styles-wrapper .bg-container--black .content-area__ph{
    color: rgba(255,255,255,0.65);
  }
  
  .editor-styles-wrapper .bg-container--black .content-area__right{
    outline-color: rgba(255,255,255,0.45);
  }
  
  .editor-styles-wrapper .bg-container--black .content-area__right::before{
    background: rgba(0,0,0,0.85);
    color: rgba(255,255,255,0.7);
  }
  
  /* (valinnainen) jos haluat myös oikean palstan sisäisen paddingin “korttimaiseksi” mustalla */
  .editor-styles-wrapper .bg-container--black .content-area__right{
    background: rgba(255,255,255,0.03);
  }


/* Jos sisältöalueen ensimmäinen elementti on h1 */
.content-area__right > h1:first-child{
    margin-top: -1rem;
  }

/* Jos useampi content-area peräkkäin, lisää väli */
.content-area + .content-area{
    margin-top: 2rem;
  }

  /* Jos bg-container -lohkoja on useita peräkkäin */
.bg-container + .bg-container{
    margin-top: -20px;
  }




  
  /* Header */
  .reference-list__header{
    position: relative;
  }
  
  .reference-list--large .reference-list__header-inner{
    margin-left: var(--indent);
  }
  
  .reference-list__smallheading--rail{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    max-width: calc(var(--indent) - 1rem);
    margin-top: 10px;
  }

  @media (max-width: 1200px) {
    .reference-list__header{
        display: grid;
      }
    .reference-list--large .reference-list__header-inner{
        margin-left: 0px;
        order: 1;
      }
    .reference-list__smallheading--rail{
        position: static;
        max-width: 100%;
        margin-bottom: 1rem;
        order: 2;
      }
  }
  
  /* Large card left text indent */
  .reference-card--large .reference-card__left{
    position: relative;
  }
  
  .reference-card--large .reference-card__left-inner{
    margin-left: var(--indent);
  }
  
  /* Small right corner */
  .reference-card--small{
    position: relative;
  }
  
  .reference-card__corner--right{
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url(../img/kulma_oikea_harmaa.svg);
    z-index:2;
  }

  @media (max-width: 960px){

    .content-area:not(.content-area--large_heading) .content-area__grid{
      grid-template-columns: 1fr;
      row-gap: 1.5rem;
    }
  
    .content-area__left{
      order: 1;
    }
  
    .content-area__right{
      order: 2;
      max-width: 100%;
    }

    .content-area + .content-area{
        margin-top: 1rem;
      }

      .content-area__right > h1:first-child{
        margin-top: 0rem;
      }
      .bg-container--gray .content-area__corner--left { display: none; }
  
  }





/* personnel */
.personnel-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
    gap:2rem;
  }
    
    /* yksittäinen henkilö */
    .personnel-card{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:1.5rem;
    align-items:stretch;
    }
    
    /* kuva */
    .personnel-image{
        width:160px;
        aspect-ratio:1/1;
        overflow:hidden;
      }
      
      .personnel-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
      }
    
    /* tekstipalsta */
    .personnel-text{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    }

    .personnel-top p {
      margin-top: 10px; margin-bottom: 10px;  
      line-height: 1.3;
    color: var(--custom-2);
    font-weight: 500;
    }

    
    /* otsikot */
    .personnel-text h5{ 
    margin:0;
    }
    
    .personnel-text h6{
    margin:0.25rem 0 0 0;
    }
    
    /* yhteystiedot */
    .personnel-bottom p.personnel-languages {
    margin:0;
    line-height: 1.3;
    color: var(--custom-2);
    font-weight: 500;
    text-transform: uppercase;
    }

    .personnel-bottom p.personnel-languages span.separator {
      color: var(--nv-secondary-accent);
    }
    
    /* mobiili */
    @media (max-width:700px){
    
    .personnel-list{
    grid-template-columns:1fr;
    }
    
    }






/* aseteltu sisältö */ 
/* --- Featured split --- */
.featured-split{
    position: relative;
  }
  
  /* kulmamerkki: oletus harmaa, vaihdetaan bg-containerin mukaan */
  .featured-split__corner{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/kulma_vasen_harmaa.svg);
  }
  
  /* Violet / Orange / Gray / Green => musta */
  .bg-container--violet .featured-split__corner,
  .bg-container--orange .featured-split__corner,
  .bg-container--gray   .featured-split__corner,
  .bg-container--green  .featured-split__corner{
    background-image: url(../img/kulma_vasen_musta.svg);
  }
  
  /* Black => oranssi */
  .bg-container--black .featured-split__corner{
    background-image: url(../img/kulma_vasen_oranssi.svg);
  }
  
  /* 2 palstaa: vasen ~2/3 */
  .featured-split__grid{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: stretch; /* tekee palstoista samankorkuiset */
  }
  
  /* vasen tekstipalsta yhtä korkea kuin kuva */
  .featured-split__text{
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* top ylös, bottom alas */
    min-width: 0;
  }
  
  .featured-split__top h6,
  .featured-split__top h3{
    margin: 0;
  }
  
  .featured-split__top h6 + h3{
    margin-top: 0.5rem;
  }
  
  .featured-split__bottom{
    margin-top: 1.5rem;
  }
  
  .featured-split__desc{
    margin: 0;
  }
  
  .featured-split__button{
    margin-top: 2.5rem;
  }

  
  /* oikea kuva */
  .featured-split__media{
    min-width: 0;
  }
  
  .featured-split__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* responsiivinen */
  @media (max-width: 960px){
    .featured-split__grid{
      grid-template-columns: 1fr;
      row-gap: 2rem;
    }
  
    .featured-split__media img{
      height: auto;
    }
  }

/* h6 ja h3 ensimmäisen rivin sisennys */
.featured-split__theme,
.featured-split__title{
  text-indent: 17rem;
}

/* alle 1600px */
@media (max-width: 1600px){
    .featured-split__theme,
    .featured-split__title{
      text-indent: 10rem;
    }
  }

/* alle 1400px */
@media (max-width: 1400px){
  .featured-split__theme,
  .featured-split__title{
    text-indent: 8rem;
  }
}

/* alle 1200px */
@media (max-width: 1200px){
  .featured-split__theme,
  .featured-split__title{
    text-indent: 5rem;
  }
  .featured-split__theme{
    margin-top: 2rem!important;
  }
}


@media (max-width: 960px){
    .featured-split__theme,
    .featured-split__title{
      text-indent: 2rem;
    }
    .featured-split__theme{
        margin-top: 2rem!important;
      }

  }

  @media (max-width: 600px){
    .featured-split__theme { 
      text-indent: 1rem;
    }

    .featured-split__theme{
      margin-top: 1rem!important;
    }

    .featured-split__title{
        text-indent: 0rem;
        margin-top: 1.5rem!important;
      }
  }

.featured-split__desc{
    margin: 0;
    max-width: 612px;
  }


  /* desc + link sisennys */
.featured-split__bottom{
    margin-top: 1.5rem;
    padding-left: 17rem;
  }
  
  /* alle 1600px */
  @media (max-width: 1600px){
    .featured-split__bottom{
      padding-left: 10rem;
    }
  }

  /* alle 1400px */
  @media (max-width: 1400px){
    .featured-split__bottom{
      padding-left: 8rem;
    }
  }
  
  /* alle 1200px */
  @media (max-width: 1200px){
    .featured-split__bottom{
      padding-left: 0rem;
    }
  }








  /* --- three_custom_cols --- */
.three-custom-cols__grid{
    display: grid;
    /* 1. palsta = 2/3 keskimmäisestä => jos keskimmäinen on 1fr, eka on 0.666fr */
    grid-template-columns: minmax(0, 0.666fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: stretch;
  }

  .three-custom-cols__factsinner h6 {
    margin-bottom: 1rem;
    color: var(--custom-2);
  }
  
  
  .three-custom-cols__factslist{
    list-style: none;
    margin: 0!important;
    padding: 0;
    border-top: 2px solid #707070;
    border-bottom: 2px solid #707070;
    width: 100%;
  }

  .three-custom-cols__facts{
    display: flex;
    align-items: flex-end;
  }
  
  .three-custom-cols__facts > *{
    width: 100%;
  }
  
  .three-custom-cols__fact{
    font-size: 0.89rem;
    font-weight: 500;
    padding: 5px 0;
    margin-top: 5px!important;
    border-top: 2px solid #707070;
  }
  
  .three-custom-cols__fact:first-child{
    border-top: none; /* top border already on list */
  }
  
  /* Col 2: square image */
  .three-custom-cols__media{
    min-width: 0;
    background: var(--custom-2); 
    aspect-ratio: 1 / 1; 
    position: relative;
    overflow: hidden;
  }
  
  .three-custom-cols__media img,
  .three-custom-cols__media picture,
  .three-custom-cols__media picture img{
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
  }

  
  /* Col 3: content */
  .three-custom-cols__content{
    min-width: 0;
  }

  .three-custom-cols__contentinner > :last-child {
    margin-bottom: 0px!important;
  }

  .three-custom-cols__contentinner{ 
      margin-right: 0.5rem;
  }

  .content-area--large_heading .content-area__grid:not(:first-child) {
    margin-top: 3rem;

  }
  
  @media (min-width: 1650px){
    .three-custom-cols__contentinner{
      max-width: calc(100% * 0.666); 
      margin-right: 0px;
    }
  }

  @media (max-width: 1400px){

    .three-custom-cols__grid{
      grid-template-columns: 1fr 1fr; /* kuva + sisältö */
      row-gap: 2rem;
    }
  
    /* faktapalsta alle */
    .three-custom-cols__facts{
      grid-column: 1 / -1; /* täysleveä */
      grid-row: 2;
    }
  
  }
  
 
  @media (max-width: 960px){
    .content-area--large_heading .content-area__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        column-gap: 3rem;
    }
    .content-area--large_heading .content-area__grid > * {
        padding-top: 0.5rem;
    }
    .three-custom-cols__grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
    .three-custom-cols__grid > * {
        margin-right: 2rem;
    }
    .three-custom-cols__facts {
        display: block;
    }
  } 

  @media (max-width: 600px) {
    .content-area--large_heading .content-area__grid {
        column-gap: 1.5rem;
    }

    .three-custom-cols__grid > * {
        margin-right: 0.5rem;
    }

  }

  @media (max-width: 450px) {
    .content-area--large_heading .content-area__grid {
        display: block;
    }

  }

/* --- Promo cards common --- */
.promo-cards__grid{
    display:grid;
    gap: 1rem;
    align-items: stretch; /* rivin kortit yhtä korkeita */
  }
  
  /* small: 300–460px */
  .promo-cards--small .promo-cards__grid{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .promo-card--small{
    max-width: 460px;
  }
  
  /* medium: 300–720px */
  .promo-cards--medium .promo-cards__grid{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: start;
  }
  
  .promo-card--medium{
    max-width: 720px;
  }
  
  /* card base */
  .promo-card{
    display:flex;              /* mahdollistaa tasakorkeuden */
    flex-direction: column;
    height: 100%;
    text-decoration:none;
  }
  
  .promo-card h2,
  .promo-card h5,
  .promo-card p,
  .promo-card:hover h2,
  .promo-card:hover h5,
  .promo-card:hover p{
    color: var(--nv-text-color);
  }
  
  /* =========================
     MEDIA (aspect ratios + fallback bg if no img)
     ========================= */
  .promo-card__media{
    position: relative;
    background: var(--nv-dark-bg); /* jos kuva puuttuu */
    overflow: hidden;
    width: 100%;
  }
  
  /* small kuvasuhde 454/303 */
  .promo-card--small .promo-card__media{
    aspect-ratio: 454 / 303;
  }
  
  /* medium kuvasuhde neliö */
  .promo-card--medium .promo-card__media{
    aspect-ratio: 1 / 1;
  }
  
  /* kuva täyttää alueen (ei tyhjää reunoihin) */
  .promo-card__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* NEW (mustabox + fade) */
  .promo-card__new{
    position:absolute;
    top:0;
    left:0;
    background:#000;
    color:#fff;
    padding: 0.9rem 1.4rem;
    font-size: 0.89rem;
    font-weight: 500;
    z-index:3;
    letter-spacing: .05em;
  }
  .promo-card__new::after{
    content:"";
    position:absolute;
    top:0;
    left:100%;
    height:100%;
    width:220px;
    background:linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 100%);
  }
  
  /* =========================
     SMALL: tasakorkeus + nuoli 1.5rem baselineen
     ========================= */
  .promo-card--small .promo-card__body{
    background:#fff;
    display:flex;
    align-items: baseline;        /* nuoli title 1. rivin kanssa */
    justify-content:space-between;
    gap: 1rem;
    padding: 2rem 1.05rem;
    flex: 1;                      /* venyy -> tasakorkeus */
  }
  
  .promo-card--small .promo-card__title{
    margin:0;
    min-width: 0;
  }
  
  .promo-card__arrow{
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    display:flex;
    align-items: baseline;
  }
  
  .promo-card__arrow img{
    width: 1.5rem;
    height: 1.5rem;
    display:block;
  }
  
  /* =========================
     MEDIUM: nuoli title-riville + desc alas
     ========================= */
  .promo-card--medium{
    background: var(--nv-light-bg);
    display: flex;
    flex-direction: column;
  }
  
  .promo-card--medium .promo-card__body{
    padding: 2rem 1.05rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  /* title + arrow samalle riville, nuoli baselineen */
  .promo-card--medium .promo-card__head{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
  }
  
  .promo-card--medium .promo-card__title{
    margin: 0;
    min-width: 0;
  }
  
  .promo-card--medium .promo-card__arrow{
    position: static;
    margin-top: 0.1em;
  }
  
  /* description aina alas */
  .promo-card--medium .promo-card__desc{
    margin: 0;
    margin-top: auto;
    padding-top: 3rem;
  }
  
  /* =========================
     THEME STRIP (solid + fade)
     ========================= */
  .promo-card--medium .promo-card__theme{
    position:absolute;
    left:0;
    bottom:0;
    padding: 0.65rem 1rem;
    font-size: 0.89rem;
    font-weight: 500;
    z-index:2;
    color:#000;
    background: var(--theme-solid, var(--nv-light-bg));
  }
  
  .promo-card--medium .promo-card__theme::after{
    content:"";
    position:absolute;
    top:0;
    left:100%;
    height:100%;
    width:220px;
    background: linear-gradient(
      to right,
      var(--theme-fade-1, rgba(230,230,230,1)) 0%,
      var(--theme-fade-2, rgba(230,230,230,0.55)) 45%,
      var(--theme-fade-3, rgba(230,230,230,0)) 100%
    );
  }
  
  /* color variants: asetetaan solid + fade-värit */
  .promo-card--medium.promo-card--violet{
    --theme-solid: var(--nv-primary-accent);
    --theme-fade-1: var(--nv-primary-accent);
    --theme-fade-2: rgba(185,116,255,0.55);
    --theme-fade-3: rgba(185,116,255,0);
  }
  
  .promo-card--medium.promo-card--orange{
    --theme-solid: var(--nv-secondary-accent);
    --theme-fade-1: var(--nv-secondary-accent);
    --theme-fade-2: rgba(255,153,0,0.55);
    --theme-fade-3: rgba(255,153,0,0);
  }
  
  .promo-card--medium.promo-card--green{
    --theme-solid: var(--nv-c-1);
    --theme-fade-1: var(--nv-c-1);
    --theme-fade-2: rgba(119,161,147,0.55);
    --theme-fade-3: rgba(119,161,147,0);
  }
  
  .promo-card--medium.promo-card--gray{
    --theme-solid: var(--nv-light-bg);
    --theme-fade-1: var(--nv-light-bg);
    --theme-fade-2: rgba(230,230,230,0.55);
    --theme-fade-3: rgba(230,230,230,0);
  }
  
  /* hover: nuoli liikkuu */
  .promo-card:hover .promo-card__arrow img{
    transform: translate(5px, -5px);
    transition: transform .2s ease;
  }
  
  /* medium hover background by color */
  .promo-card--medium.promo-card--violet:hover{ background: var(--nv-primary-accent); }
  .promo-card--medium.promo-card--orange:hover{ background: var(--nv-secondary-accent); }
  .promo-card--medium.promo-card--green:hover{  background: var(--nv-c-1); }
  .promo-card--medium.promo-card--gray:hover{   background: var(--nv-light-bg); } /* ei muutu */








  /* referenssit */
  /* --- Reference list --- */
.reference-list__grid{
    display:grid;
    gap: 1rem;
  }
  
  /* large: yksi per rivi */
  .reference-list--large .reference-list__grid{
    grid-template-columns: 1fr;
  }
  
  /* small: noin puolet rivistä (responsiivinen) */
  .reference-list--small .reference-list__grid{
    grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));
  }
  
  .reference-list--small .reference-list__grid > *{
    max-width: 900px;
  }

  @media (max-width: 1500px) {
    .reference-list--small .reference-list__grid{
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
      }
      
      .reference-list--small .reference-list__grid > *{
        max-width: 960px;
      }
  }


  @media (max-width: 600px) {
    .reference-list--small .reference-list__grid{
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      }
      
  }



  
  /* card base */
  .reference-card{
    display:block;
    text-decoration:none;
    color: inherit;
  }
  
  /* LARGE layout */
  .reference-card--large{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
  }
  
  .reference-card__left{
    position: relative;
  }
  
  .reference-card__corner{
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:40px;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url(../img/kulma_vasen_harmaa.svg); 
  }
  
  .reference-card__right{
    overflow:hidden;
  }
  
  .reference-card__img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  /* SMALL layout */
  .reference-card--small .reference-card__small-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
  }



  .reference-card--small .reference-card__media{
    overflow:hidden;
  }
  
  .reference-card--small .reference-card__content{
    padding: 1.5rem 1.25rem;
  }
  
  .reference-card__cat{
    margin:0;
  }
  
  .reference-card__text{
    margin: 0.75rem 0 0 0;
  }

  .reference-list__header{
    position: relative;
    margin-bottom: 7rem;
  }

  .reference-list--small .reference-list__header{
    margin-bottom: 3rem;
    margin-top: 3rem;
  }
  
  .reference-list__corner{
    position:absolute;
    top:0;
    width:40px;
    height:40px;
    background-repeat:no-repeat;
    background-size:contain;
    z-index:2;
  }
  
  .reference-list__corner--left{
    left:0;
    background-image:url(../img/kulma_vasen_harmaa.svg);
  }
  
  .reference-list__corner--right{
    right:0;
    background-image:url(../img/kulma_oikea_harmaa.svg);
  }

  
  /* responsiivinen */

  @media (max-width: 1500px){
      h1.reference-list__heading {
        padding-top: 1rem;
      }
    .reference-card--large .reference-card__left-inner {
        margin-top: 1rem;
    }
  }


  @media (max-width: 860px){
    .reference-card--large{
      grid-template-columns: 1fr;
    }

  }

  @media (max-width: 600px){

    .reference-card--small .reference-card__small-grid{
      grid-template-columns: 1fr;
    }
    
  }










  /* --- Image / content split --- */

/* img-left: 1/3 kuva + 2/3 teksti */
.image-content-split--img-left .image-content-split__grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--grid-gap);
    align-items: stretch;
  }
  
  /* img-right: 2/3 teksti + 1/3 kuva */
  .image-content-split--img-right .image-content-split__grid{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--grid-gap);
    align-items: stretch;
  }
  
  /* järjestys */
  .image-content-split--img-left .image-content-split__media{ order: 1; }
  .image-content-split--img-left .image-content-split__content{ order: 2; }
  
  .image-content-split--img-right .image-content-split__content{ order: 1; }
  .image-content-split--img-right .image-content-split__media{ order: 2; }
  
  .image-content-split__media,
  .image-content-split__content{
    min-width: 0;
  }
  
  .image-content-split__content{
    position: relative;
    height: 100%;
  }
  
  /* kuva normaalina */
  .image-content-split--default .image-content-split__media{
    display: flex;
    align-items: flex-start;
  }
  
  .image-content-split--default .image-content-split__img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  /* cover-kuva täyttää koko palstan korkeuden */
  .image-content-split--cover .image-content-split__media{
    overflow: hidden;
    height: 100%;
  }
  
  .image-content-split--cover .image-content-split__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* kulmamerkki tekstipalstaan */
  .image-content-split__corner{
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .image-content-split__corner--left{
    left: 0;
    background-image: url(../img/kulma_vasen_harmaa.svg);
  }
  
  .image-content-split__corner--right{
    right: 0;
    background-image: url(../img/kulma_oikea_harmaa.svg);
  }
  
  /* responsiivinen */
  @media (max-width: 960px){
    .image-content-split--img-left .image-content-split__grid,
    .image-content-split--img-right .image-content-split__grid{
      grid-template-columns: 1fr;
    }
  
    .image-content-split--img-left .image-content-split__media,
    .image-content-split--img-left .image-content-split__content,
    .image-content-split--img-right .image-content-split__media,
    .image-content-split--img-right .image-content-split__content{
      order: initial;
    }
  
    .image-content-split--cover .image-content-split__img{
      height: auto;
    }
  }