/* Herttuala Biotech: vanhan WordPress-saitin (The7 14.5.0.2, WPBakery 9.0.1, Ultimate Addons 3.21.6) ulkoasu.
   Arvot on mitattu elävältä saitilta (getComputedStyle 25.10.2026) ja luettu tuontipaketin raa'asta CSS:stä:
   the7-css/css-vars.css (The7:n teema-asetukset), custom.css, media.css, js_composer.min.css ja Ultimaten
   headings.min.css. The7:n ja WPBakeryn koko CSS:ää (yli 1 Mt) ei tuoda, vaan vain sivun käyttämät säännöt.
   Puhdistus poisti sisällöstä style- ja id-attribuutit, joten inline-tyylit ovat tässä luokkien kautta. */

/* --- Fontit: Poppins ja Merriweather (SIL OFL), vanhalla saitilla Google Fontsista. Vain käytetyt leikkaukset:
   Poppins 400, 400 italic (About-osion em, The7 lihavoi sen synteettisesti kuten ennenkin) ja 600 (h4),
   Merriweather 400 (korostus) ja 700 (otsikot ja valikko). --- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/poppins-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
/* Merriweather on Google Fontsissa muuttuva fontti: yksi tiedosto kattaa painot 400–700. Lisenssit fonts/OFL-*.txt. */
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/merriweather.woff2") format("woff2"); }

:root {
  --sininen: #004873;      /* The7: otsikot, valikko, alapalkki, About-osion tausta */
  --turkoosi: #18becd;     /* linkit, h3, korostus, pystyviivat, hampurilainen */
  --aksentti: #148ba9;     /* valikon alleviivaus, mobiilivalikon aktiivinen, sulkunappi */
  --teksti: #090909;
  --leipa: "Poppins", Helvetica, Arial, Verdana, sans-serif;
  --otsikko: "Merriweather", Helvetica, Arial, Verdana, sans-serif;
  --palsta: 1210px;        /* The7: sisällön leveys 1300 px - 2 x 60 px reunat + WPBakeryn rivin -15 px marginaalit */
  --reuna: 45px;           /* 60 px sivureuna - 15 px rivin marginaali; 992 px:n alla 30 px - 15 px */
  --ylaosa: 140px;
  --kiinnitetty: 66px;
}
@media (max-width: 992px) {
  :root { --reuna: 15px; }
}

/* --- Perusta (The7 main.min.css ja css-vars) --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--teksti); font: 400 16px/28px var(--leipa); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; vertical-align: top; }
a { color: var(--turkoosi); }
p { margin: 0 0 10px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; color: var(--sininen); }
h1 { font: 700 60px/70px var(--otsikko); }
h2 { font: 700 34px/40px var(--otsikko); }
h3 { font: 700 24px/30px var(--otsikko); color: var(--turkoosi) !important; } /* The7:n custom CSS: h3 { color: #18BECD!important } */
h4 { font: 600 20px/30px var(--leipa); }
h5 { font: 600 16px/26px var(--leipa); }
h6 { font: 500 14px/24px var(--leipa); }
.vain-ruudunlukija { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ohita { position: absolute; left: 5px; top: -100px; z-index: 100000; padding: 15px 23px 14px; background: #ddd; color: #444; text-decoration: none; }
.ohita:focus { top: 5px; }

/* --- The7:n oma custom CSS (teema-asetukset, raa'an sivun headissa) --- */
.dt-highlight { padding: 1px 4px; font-size: 130% !important; line-height: 130% !important; color: var(--turkoosi) !important; background-color: #fff !important; font-family: var(--otsikko); }
.white { color: #fff !important; }
/* WordPressin lohkotyylit, joita sisältö käyttää (puhdistus muutti style="text-align" näiksi luokiksi) */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }

/* --- Yläpalkki: läpinäkyvä sisällön päällä (The7 "transparent"), vierittäessä kiinteä puoliläpinäkyvä
   (phantom-slide: rgba(255,255,255,.9), 66 px, liukuu ylhäältä). herttuala.js lisää kiinnitetty-luokan. --- */
.ylaosa { position: absolute; top: 0; left: 0; right: 0; z-index: 500; }
.ylaosa-sisa { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; height: var(--ylaosa); margin: 0 auto; padding: 0 60px; }
.logo { flex: none; display: block; line-height: 0; }
.logo img { width: 255px; height: 66px; }
.ylaosa.kiinnitetty { position: fixed; background: rgba(255, 255, 255, .9); animation: ylaosa-esiin .4s ease; }
.ylaosa.kiinnitetty .ylaosa-sisa { height: var(--kiinnitetty); }
@keyframes ylaosa-esiin { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ylaosa.kiinnitetty { animation: none; } }

/* Päävalikko: Merriweather 17/21 700, kohteiden väli 2 x 14 px, alleviivaus vasemmalta oikealle
   (The7 underline-decoration l-to-r-line: 3 px, #148ba9, opacity .85, 7 px tekstin alla). */
.paavalikko { padding-left: 30px; }
.paavalikko .valikko-lista { display: flex; margin: 0; padding: 0; list-style: none; }
.paavalikko li { margin: 18px 14px; }
.paavalikko li:first-child { margin-left: 0; }
.paavalikko li:last-child { margin-right: 0; }
.paavalikko a { display: block; padding: 4px; color: var(--sininen); font: 700 17px/21px var(--otsikko); text-decoration: none; }
.paavalikko a span { position: relative; display: block; }
.paavalikko a span::after { content: ""; position: absolute; left: 1px; bottom: -7px; width: 0; height: 3px; background: var(--aksentti); opacity: .85; transition: width .3s cubic-bezier(.175, .885, .32, 1.275); }
.paavalikko a:hover span::after, .paavalikko a:focus-visible span::after, .paavalikko li.act a span::after { width: 100%; }

/* Hampurilainen ja mobiilivalikko näkyvät vain 992 px:n alla (The7 first-switch). */
.hampurilainen, .sulje-valikko { display: none; }
.mobiilivalikko { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9602; width: 300px; max-width: 100%; padding: 45px 15px 30px 30px; overflow-y: auto; background: #fff; transform: translateX(100%); visibility: hidden; transition: transform .5s ease, visibility 0s .5s; }
.valikon-peite { position: fixed; inset: 0; z-index: 9601; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.valikko-auki .mobiilivalikko { transform: none; visibility: visible; transition: transform .5s ease; }
.valikko-auki .valikon-peite { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.mobiilivalikko .valikko-lista { margin: 0; padding: 0; list-style: none; }
.mobiilivalikko li { position: relative; }
.mobiilivalikko li + li::before { content: ""; position: absolute; top: -.5px; left: 0; width: 100%; border-bottom: 1px solid rgba(34, 34, 34, .12); }
.mobiilivalikko a { display: block; padding: 16.15px 25px 16.15px 0; color: #222; font: 700 17px/21px var(--leipa); text-decoration: none; }
.mobiilivalikko a:hover, .mobiilivalikko li.act a { color: var(--aksentti); }

@media (max-width: 992px) {
  .ylaosa { background: rgba(255, 255, 255, .7); }
  .ylaosa-sisa { gap: 15px; height: auto; min-height: 60px; padding: 0 30px; }
  /* Logo (255 px) + hampurilainen (40 px) + reunat (60 px) = 355 px: kapeammalla ruudulla logo kutistuu,
     kuten The7:n mobiililogossa (max-width: 100%; height: auto), eikä palkki levitä sivua. */
  .logo { flex: 0 1 auto; min-width: 0; }
  .logo img { max-width: 100%; height: auto; }
  .ylaosa.kiinnitetty { position: absolute; background: rgba(255, 255, 255, .7); animation: none; }
  .ylaosa.kiinnitetty .ylaosa-sisa { height: auto; }
  .paavalikko { display: none; }
  /* The7 medium-mobile-menu-icon: turkoosi tausta, kolme valkoista 24 x 3 px viivaa 7 px välein */
  .hampurilainen { display: block; flex: none; margin: 0; padding: 11px 8px; border: 0; border-radius: 0; background: var(--turkoosi); cursor: pointer; }
  .hampurilainen .viivat { position: relative; display: block; width: 24px; height: 17px; }
  .hampurilainen .viivat span { position: absolute; left: 0; width: 24px; height: 3px; background: #fff; transition: transform .2s linear; }
  .hampurilainen .viivat span:nth-child(1) { top: 0; }
  .hampurilainen .viivat span:nth-child(2) { top: 7px; }
  .hampurilainen .viivat span:nth-child(3) { top: 14px; }
  .hampurilainen:hover .viivat span:nth-child(1) { transform: translateY(2px); }
  .hampurilainen:hover .viivat span:nth-child(3) { transform: translateY(-2px); }
  /* Sulkunappi valikon vasemmalla puolella (The7 ouside-menu-close-icon), aksenttitausta, valkoinen rasti */
  .sulje-valikko { display: block; position: fixed; top: 15px; right: 300px; z-index: 9603; width: 40px; height: 40px; padding: 5px; border: 0; background: var(--aksentti); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
  .sulje-valikko::before, .sulje-valikko::after { content: ""; position: absolute; top: 19px; left: 8px; width: 24px; height: 2px; background: #fff; transform: rotate(45deg); }
  .sulje-valikko::after { transform: rotate(-45deg); }
  .valikko-auki .sulje-valikko { opacity: 1; visibility: visible; transition: opacity .5s ease; }
}
@media (max-width: 340px) {
  /* Kapealla ruudulla valikko täyttää ruudun ja sulkunappi siirtyy sen oikeaan yläkulmaan (The7 max-width: 300px). */
  .sulje-valikko { right: 0; }
  /* 60 px:n "Herttuala" (282 px) ei mahdu alle 340 px:n palstaan ja levittäisi sivua; vanhalla saitilla sama
     vaakavieritys oli. Koko skaalautuu ruudun mukaan vain tällä alueella, joten 340 px:stä ylöspäin h1 on ennallaan. */
  h1 { font-size: 16vw; line-height: 1.15; }
}

/* --- Sisältö: osiot ja WPBakeryn ruudukko (js_composer.min.css:n osajoukko) --- */
.osio { padding: 0 var(--reuna); scroll-margin-top: var(--kiinnitetty); }
.osio > .vc_row { max-width: var(--palsta); margin-left: auto; margin-right: auto; }
.osio-leve, .osio-venytetty { padding: 0; }
.osio-leve > .vc_row, .osio-venytetty > .vc_row { max-width: none; }
.osio-leve > .vc_row { padding-left: max(var(--reuna), (100% - var(--palsta)) / 2); padding-right: max(var(--reuna), (100% - var(--palsta)) / 2); }
@media (max-width: 992px) { .osio { scroll-margin-top: 0; } }

.vc_row { position: relative; margin-left: -15px; margin-right: -15px; }
.vc_row::before, .vc_row::after, .vc_column-inner::before, .vc_column-inner::after { content: " "; display: table; }
.vc_row::after, .vc_column-inner::after { clear: both; }
.vc_column_container { position: relative; width: 100%; min-height: 1px; padding-left: 0; padding-right: 0; }
.vc_column_container > .vc_column-inner { width: 100%; padding-left: 15px; padding-right: 15px; }
.vc_col-xs-6 { float: left; width: 50%; }
.vc_col-xs-12 { float: left; width: 100%; }
@media (min-width: 768px) {
  .vc_col-sm-2, .vc_col-sm-4, .vc_col-sm-6, .vc_col-sm-8, .vc_col-sm-12 { float: left; }
  .vc_col-sm-2 { width: 16.66666667%; }
  .vc_col-sm-4 { width: 33.33333333%; }
  .vc_col-sm-6 { width: 50%; }
  .vc_col-sm-8 { width: 66.66666667%; }
  .vc_col-sm-12 { width: 100%; }
}
.vc_row.vc_row-flex { display: flex; flex-wrap: wrap; }
.vc_row.vc_row-flex::before, .vc_row.vc_row-flex::after { display: none; }
.vc_row.vc_row-flex > .vc_column_container { display: flex; }
.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner { display: flex; flex-direction: column; flex-grow: 1; z-index: 1; }
.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner > * { min-height: 1em; }
.vc_row.vc_row-o-equal-height > .vc_column_container { align-items: stretch; }
.vc_row.vc_row-o-content-middle > .vc_column_container > .vc_column-inner { justify-content: center; }
.vc_row.vc_column-gap-30 { margin-left: -30px; margin-right: -30px; }
.vc_row.vc_column-gap-30 > .vc_column_container { padding: 15px; }
.vc_row.vc_row-no-padding .vc_column-inner { padding-left: 0; padding-right: 0; }
.vc_row-no-padding .vc_inner { margin-left: 0; margin-right: 0; }
/* Täytetyn rivin sarakkeet ja sitä seuraavan rivin sarakkeet saavat 35 px yläreunaan. Vanhalla sivulla rivit
   olivat sisaruksia (.vc_row-has-fill + .vc_row); nyt jokainen rivi on omassa osiossaan. */
.vc_col-has-fill > .vc_column-inner,
.vc_row-has-fill > .vc_column_container > .vc_column-inner,
.osio:has(> .vc_row-has-fill) + .osio > .vc_row > .vc_column_container > .vc_column-inner { padding-top: 35px; }
.wpb_content_element { margin-bottom: 35px; }
.wpb_text_column :last-child { margin-bottom: 0; }
.wpb_single_image.vc_align_center { text-align: center; }
.wpb_single_image .vc_figure { display: inline-block; max-width: 100%; margin: 0; vertical-align: top; }
.wpb_single_image .vc_single_image-wrapper { display: inline-block; max-width: 100%; line-height: 0; vertical-align: top; }
.wpb_single_image img { max-width: 100%; height: auto; vertical-align: top; }
.vc_empty_space { height: 32px; } /* sivun ainoa tyhjä tila (Herttuala-osio), korkeus oli style-attribuutissa */

/* WPBakeryn rivien ja sarakkeiden asetukset (_wpb_shortcodes_custom_css, wp_meta.json) sellaisinaan; vain
   osio_4:n taustakuva on teeman assets/images-kansiossa. Pystyviivat osioiden yläpuolella ovat tyhjiä
   puolikkaan levyisiä sarakkeita, joilla on 5 px oikea reuna (vc_custom_1585135598143 / 603865 / 610925). */
.vc_custom_1585135895153{padding-top: 60px !important;padding-bottom: 30px !important;}.vc_custom_1585135828205{padding-top: 70px !important;padding-bottom: 60px !important;background-color: #004873 !important;}.vc_custom_1575461767578{padding-top: 60px !important;padding-bottom: 70px !important;}.vc_custom_1585135164547{padding-top: 80px !important;padding-bottom: 60px !important;background-image: url(images/mudassir-ali-NZ0HxSy55hY-unsplash-scaled.jpg) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1585135864403{padding-top: 60px !important;}.vc_custom_1575457735920{padding-bottom: 70px !important;}.vc_custom_1585135598143{margin-bottom: 45px !important;border-right-width: 5px !important;padding-top: 30px !important;padding-bottom: 30px !important;border-right-color: #18becd !important;border-right-style: solid !important;}.vc_custom_1575401232692{padding-right: 25px !important;padding-bottom: 60px !important;padding-left: 25px !important;}.vc_custom_1585135603865{margin-bottom: 45px !important;border-right-width: 5px !important;padding-top: 30px !important;padding-bottom: 30px !important;border-right-color: #18becd !important;border-right-style: solid !important;}.vc_custom_1585127515633{padding-top: 50px !important;padding-right: 10% !important;padding-bottom: 50px !important;padding-left: 10% !important;}.vc_custom_1585133737071{padding-top: 50px !important;padding-right: 5% !important;padding-bottom: 50px !important;padding-left: 5% !important;background-color: #ffffff !important;}.vc_custom_1585133742367{padding-top: 50px !important;padding-right: 5% !important;padding-bottom: 50px !important;padding-left: 5% !important;background-color: #ffffff !important;}.vc_custom_1575458048778{padding-bottom: 55px !important;}.vc_custom_1585127683078{padding-bottom: 20px !important;}.vc_custom_1575403932354{padding-bottom: 70px !important;}.vc_custom_1585135610925{margin-bottom: 45px !important;border-right-width: 5px !important;padding-top: 30px !important;padding-bottom: 30px !important;border-right-color: #18becd !important;border-right-style: solid !important;}

/* --- Ultimate Addons: otsikot (headings.min.css) ja otsikoiden inline-tyylit otsikkokohtaisilla luokilla --- */
.uvc-heading, .uvc-heading * { box-sizing: border-box; }
.uvc-heading-spacer { position: relative; margin: 0 auto; padding: 0; overflow: hidden; }
.uvc-sub-heading { margin: 0 auto; }
.uvc-sub-heading p { font: inherit; color: inherit; }
.uvc-sub-heading h1, .uvc-sub-heading h2, .uvc-sub-heading h3, .uvc-sub-heading h4 { color: inherit !important; }
.uvc-heading .uvc-main-heading h2, .uvc-heading .uvc-main-heading h3 { padding: 0; }
/* Herttuala-osion kolme palstaotsikkoa: font-weight:bold; color:#148ba9 (h3:n !important-väri voittaa); margin-bottom:20px */
.ultimate-heading-84286addd9cc8f202 h3, .ultimate-heading-27336addd9cc8f517 h3, .ultimate-heading-73476addd9cc8f80f h3 { font-weight: bold; color: #148ba9; margin: 0 0 20px; }
/* Have a Project for Us?: otsikko valkoinen ilman alamarginaalia, alaotsikko valkoinen normaali */
.ultimate-heading-99446addd9cc931fb h2 { font-weight: bold; color: #fff; margin: 0; }
.ultimate-heading-99446addd9cc931fb .uvc-sub-heading { font-weight: normal; color: #fff; }

/* --- The7: ikoni ja teksti (layout-5: keskitetty otsikko ja teksti Mission- ja Vision-korteissa) --- */
.icon-with-text-shortcode.layout-5 { text-align: center; }
.icon-with-text-shortcode .dt-text-title { margin-bottom: 15px; }
.icon-with-text-shortcode .dt-text-desc { margin-bottom: 20px; }

/* --- Alapalkki (The7 bottom-bar, logo-center) --- */
.alaosa { background: var(--sininen); color: #fff; font: 400 12px/22px var(--leipa); }
.alaosa-sisa { max-width: 1300px; margin: 0 auto; padding: 20px 60px; text-align: center; }
@media (max-width: 992px) { .alaosa-sisa { padding: 20px 30px; } }

/* --- Go to Top (The7 scroll-top): näkyy, kun sivua on vieritetty; mobiilissa piilossa kuten ennenkin --- */
.ylos { position: fixed; right: -45px; bottom: 10px; z-index: -1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(0, 0, 0, .2); opacity: 0; text-decoration: none; transition: all .4s ease; }
.ylos.nakyy { right: 10px; z-index: 109; opacity: 1; }
.ylos:hover { background: rgba(0, 0, 0, .5); }
.ylos svg { width: 24px; fill: #fff; }
@media (max-width: 992px) { .ylos, .ylos.nakyy { display: none; } }

/* --- Haku- ja 404-sivu (perusteeman sisältö yläpalkin alla) --- */
.sivuton { max-width: 1300px; min-height: calc(100vh - 62px); margin: 0 auto; padding: calc(var(--ylaosa) + 20px) 60px 70px; } /* 62 px = alapalkki */
@media (max-width: 992px) { .sivuton { padding: 100px 30px 60px; } }