:root{
  --ink:#2F4344;
  --dark: #212529;
  --sand:#E9E3D7;
  --cta:#DA2128;
  --cta-text:#ffffff;
}

body{
  color:#171a1b;
  font-size:1.125rem;
  line-height:1.7;
}
p{ font-size:1.125rem; }
.lead{ font-size:clamp(1.25rem, 1.1rem + .5vw, 1.45rem) !important; }
main h1{ font-size:clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
main h2, main .h2{ font-size:clamp(1.55rem, 1.3rem + .9vw, 2.1rem); }
main h3, main .h3, main .h4{ font-size:clamp(1.25rem, 1.1rem + .45vw, 1.5rem); }
.stat-label{ font-size:1.125rem !important; }

.text-primary-ink{ color:var(--ink) !important; }
.bg-ink{ background:var(--ink) !important; }
.bg-dark{ background:var(--dark) !important; }
.bg-sand{ background:var(--sand) !important; }

.btn-cta{
  background:var(--cta);
  color:var(--cta-text);
  border:none;
  border-radius:999px;
  padding:.65rem 1.25rem;
  font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* poista alleviivaus kaikissa tiloissa */
a.btn-cta,
a.btn-cta:link,
a.btn-cta:visited,
a.btn-cta:hover,
a.btn-cta:focus,
a.btn-cta:active{
  text-decoration:none !important;
  color:var(--cta-text) !important;
}

/* hover/active-värit */
a.btn-cta:hover{ background:#c61f25; }
a.btn-cta:active{ background:#b21b21; }

/* jos nappi on navbarissa tai sillä on nav-link-luokka */
.navbar .btn-cta,
.navbar .nav-link.btn-cta{
  text-decoration:none !important;
}
/* Hybrid dropdown: link navigates, caret opens submenu on mobile */
.nav-hybrid{ position:relative; display:flex; align-items:center; }
.nav-hybrid .nav-caret{
  border:0; background:transparent; padding:.5rem .25rem; margin-left:.25rem;
}
/* Desktop: open on hover/focus-within */
@media (min-width: 992px){
  .navbar .nav-hybrid:hover > .dropdown-menu,
  .navbar .nav-hybrid:focus-within > .dropdown-menu{ display:block; }
}

.card{ border-radius:1rem; }

.object-fit-cover{ object-fit:cover; }



/* CTA-nappien asettelu */
.cta-buttons { display:inline-flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

/* Perus "sand" nappi */
.btn-sand {
  --btn-bg: #efe3ce;          /* “hiekka” */
  --btn-text: #0b132b;        /* tumma teksti */
  --btn-hover-bg: #e6d4b8;
  --btn-active-bg: #dac39b;
  --btn-ring: rgba(239, 227, 206, .35);

  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; text-decoration:none; cursor:pointer;
  border:0; border-radius:9999px; padding:0.95rem 1.6rem;
  background:var(--btn-bg); color:var(--btn-text);
  font-weight:700; letter-spacing:.2px;
  font-size:clamp(1rem, .9rem + .5vw, 1.125rem);
  box-shadow: 0 10px 20px rgba(0,0,0,.22), inset 0 -2px rgba(0,0,0,.08);
  transform: translateY(0);
  transition:
    transform .18s ease, box-shadow .18s ease,
    background-color .18s ease, color .18s ease, filter .18s ease;
}

/* Hover: kevyt nosto ja tummempi varjo */
.btn-sand:hover {
  background:var(--btn-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(0,0,0,.26), inset 0 -2px rgba(0,0,0,.08);
  text-decoration:none;
}

/* Active: “painuu” hieman */
.btn-sand:active {
  background:var(--btn-active-bg);
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.3);
}

/* Näppäimistöfokus: selkeä rengas */
.btn-sand:focus { outline:none; }
.btn-sand:focus-visible {
  box-shadow:
    0 0 0 4px var(--btn-ring),
    0 10px 20px rgba(0,0,0,.22);
}

/* Disabled-variaatiot */
.btn-sand[disabled],
.btn-sand.disabled,
.btn-sand[aria-disabled="true"] {
  opacity:.6; filter:saturate(.7);
  pointer-events:none;
}

/* Outline-versio samaan palettiin (toinen CTA) */
.btn-sand.btn-sand--outline {
  background:transparent;
  color:#efe3ce;
  border:2px solid rgba(239, 227, 206, .8);
  box-shadow:none;
}
.btn-sand.btn-sand--outline:hover {
  background:rgba(239, 227, 206, .1);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.btn-sand.btn-sand--outline:active {
  background:rgba(239, 227, 206, .2);
  transform: translateY(0);
}

/* Vähennetty liike -tuki */
@media (prefers-reduced-motion: reduce) {
  .btn-sand { transition:none; }
  .btn-sand:hover, .btn-sand:active { transform:none; }
}

/* Full-bleed hero: pelkkä taustakuva, ei overlayta */
.hero-full{
  position: relative;
  min-height: 0;
  color: #fff;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center right;
}
.hero-full > .container{
  min-height: clamp(22rem, 52vh, 38rem);
  padding-top: clamp(5rem, 8vw, 6.5rem) !important;
  padding-bottom: clamp(8.5rem, 16vw, 12rem) !important;
}

/* Kevyt kontrasti teksteille ilman overlaytä */
.hero-full .text-glow { text-shadow: 0 2px 10px rgba(0,0,0,.35); }

/* Valkoinen tekstialue (kortti) heron vasemmalle */
.hero-card {
  background: #fff;
  color: var(--ink);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Valkoinen, täysin pyöreä nappi punaisella tekstillä */
.btn-white-red{
  background:#fff;
  color:#DA2128;
  border-radius:999px;
  padding:.7rem 1.25rem;
  border:2px solid #fff;
  font-weight:600;
}
.btn-white-red:hover{
  background:#fff;
  color:#b5151b;
  filter:brightness(0.97);
}

/* Hero-aalto (ylä- ja alareunan välipala) */
.hero-wave {
  position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(5.5rem, 12vw, 9rem);
  line-height:0; overflow:hidden; pointer-events:none;
}
.hero-wave svg { width:100%; height:100%; display:block; }
.hero-wave path { fill:#fff; } /* vaihda #E9E3D7 jos haluat hiekan */

/* Intro-boxi lähelle heron alakaarta */
.intro-section{
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(2.5rem, 6vw, 5rem));
  padding-top: 0;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}



.stat-box{
  background: var(--sand);
  color: var(--ink);
  border-radius: 1rem;
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.stat-value{
  font-weight: 800;
  line-height: 1;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--cta); /* #DA2128 */
}
.stat-label{
  margin-top: .25rem;
  font-size: 1rem;
}

/* Etusivun intro-”pihvi” */
.intro-panel{
  max-width:920px;
  padding:2rem 2.25rem;
  background:linear-gradient(135deg, #fff 0%, #faf8f5 100%);
  border:1px solid rgba(47,67,68,.08);
  border-left:4px solid var(--cta);
  border-radius:1.25rem;
  box-shadow:0 12px 40px rgba(47,67,68,.08);
}
.intro-eyebrow{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cta);
  margin:0;
}
.intro-lead{
  font-size:clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  line-height:1.75;
  color:var(--ink);
  font-weight:500;
  margin:0;
}
.intro-body{
  font-size:1.2rem;
  line-height:1.8;
  color:#3a4546;
  margin:0;
}
.intro-highlight{
  color:var(--cta);
  font-weight:700;
}
.intro-stat{
  color:var(--ink);
  font-weight:800;
}
.intro-stat-box{
  background:var(--sand);
  border-radius:1rem;
  padding:1.1rem 1rem;
  box-shadow:inset 0 0 0 1px rgba(47,67,68,.06);
}
.intro-stat-box__value{
  font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight:800;
  line-height:1.1;
  color:var(--cta);
}
.intro-stat-box__label{
  margin-top:.35rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
}
.intro-finland{
  padding:1.25rem 1.5rem;
  background:var(--sand);
  border-radius:1rem;
  border-left:3px solid var(--ink);
  font-size:1.2rem;
  line-height:1.75;
  color:#3a4546;
}
.ref-logo-grid{ max-width:920px; margin-left:auto; margin-right:auto; }
.ref-logo-tile{
  display:block;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:0;
  overflow:hidden;
  line-height:0;
}
.ref-logo-tile img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:240 / 120;
  object-fit:contain;
}
@media (max-width:575.98px){
  .intro-panel{ padding:1.5rem 1.25rem; }
}

.area-card{
  transition:transform .15s ease, box-shadow .15s ease;
  min-width:0;
}
.area-card .h4{
  font-size:clamp(1.05rem, 0.95rem + .4vw, 1.35rem);
  overflow-wrap:break-word;
  hyphens:auto;
}
.area-card:hover{
  transform:translateY(-3px);
  box-shadow:0 .5rem 1.25rem rgba(0,0,0,.12)!important;
}
.area-card__cta{
  display:block;
  margin-top:.75rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--cta);
}
.area-card:hover .area-card__cta{
  color:#c61f25;
}
.area-card .stretched-link::after{
  z-index:1;
}
.solution-card{
  transition: box-shadow .15s ease, transform .15s ease;
}
.solution-card:hover{
  box-shadow:0 .5rem 1.25rem rgba(0,0,0,.12)!important;
}
.solution-card__cta{
  margin-top:.75rem;
  font-size:.95rem;
  font-weight:600;
  color:var(--cta);
}
.solution-card:hover .solution-card__cta{
  color:#c61f25;
}
.solution-card .stretched-link::after{
  z-index:1;
}


/* --- Dropdownin oikea ankkurointi ja pieni offset --- */
.nav-hybrid { position: relative; display: flex; align-items: center; }
.navbar .nav-hybrid > .dropdown-menu{
  position: absolute;
  top: calc(100% + .5rem);  /* PAKOTETAAN alle, .5rem väli */
  left: 0;
  margin: 0;                /* ohitetaan Bootstrapin default margin */
}

/* Desktop: pidä hover-käytös */
@media (min-width: 992px){
  .navbar .nav-hybrid:hover > .dropdown-menu,
  .navbar .nav-hybrid:focus-within > .dropdown-menu{ display:block; }
}

/* Varmista ettei synny vaakavieritystä satunnaisista ylityksistä */
html, body { max-width: 100%; overflow-x: hidden; }
.hero-full { overflow: visible; }
.row > [class*="col-"]{ min-width: 0; }
.navbar .dropdown-menu{ min-width: 15rem; }
.faq-accordion .accordion-button:not(.collapsed){ background:var(--sand); color:var(--ink); box-shadow:none; }
.faq-accordion .accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(47,67,68,.15); }
.integration-logo-link{ transition:transform .15s ease, box-shadow .15s ease; text-decoration:none; }
.integration-logo-link:hover{ transform:translateY(-2px); box-shadow:0 .5rem 1rem rgba(0,0,0,.12)!important; }
.navbar .nav-link.active{
  color:var(--cta) !important;
  font-weight:600;
}
.navbar .dropdown-item.active,
.navbar .dropdown-item.active:hover,
.navbar .dropdown-item.active:focus{
  background:var(--sand) !important;
  color:var(--cta) !important;
  font-weight:600;
}
.content-prose p:last-child{ margin-bottom:0; }
.feature-card{
  background:var(--sand);
  border-radius:1rem;
  padding:1.5rem;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.contact-card{
  overflow:hidden;
}
.contact-card__details{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
  line-height:1.4;
}
.contact-card .contact-link,
.contact-card .contact-link:link,
.contact-card .contact-link:visited{
  color:var(--cta) !important;
  text-decoration:none;
  font-weight:600;
  word-break:normal;
  overflow-wrap:normal;
  white-space:nowrap;
  font-size:0.95rem;
  line-height:1.4;
  transition:color .15s ease;
}
@media (max-width:575.98px){
  .contact-card .contact-link{
    white-space:normal;
    overflow-wrap:anywhere;
    font-size:0.9rem;
  }
}
.contact-card .contact-link:hover,
.contact-card .contact-link:focus{
  color:#c61f25 !important;
  text-decoration:none;
}
.external-link,
.external-link:link,
.external-link:visited{
  color:var(--cta) !important;
  text-decoration:none;
  font-weight:600;
  transition:color .15s ease;
}
.external-link::after{
  content:" →";
  font-weight:600;
}
.external-link:hover,
.external-link:focus{
  color:#c61f25 !important;
  text-decoration:none;
}


/* --- Dropdown: sijoittelu ja hover-silta --- */
:root{ --dd-gap: .5rem; }             /* väli nav-linkin ja menun väliin */

.nav-hybrid{ position:relative; display:flex; align-items:center; }

/* Avaa valikko nav-linkin ALLE (pieni väli), ilman default-margineja */
.navbar .nav-hybrid > .dropdown-menu{
  position:absolute;
  top: calc(100% + var(--dd-gap));
  left: 0;
  margin: 0;
}

/* Hover-silta: täyttää gapin, jotta hover ei katkea matkalla menulle */
@media (min-width: 992px){
  .nav-hybrid::after{
    content:"";
    position:absolute; left:0; right:0;
    top:100%; height: var(--dd-gap);
    /* ei taustaa – näkymätön “silta” */
  }

  /* Desktopissa valikko näkyy, kun:
     - itemiä hoveroidaan TAI
     - menua itsessään hoveroidaan (kun hiiri on jo menun päällä) */
  .navbar .nav-hybrid:hover > .dropdown-menu,
  .navbar .nav-hybrid:focus-within > .dropdown-menu,
  .navbar .nav-hybrid > .dropdown-menu:hover{
    display:block;
  }
}


/* Fixed headerin kevyt varjo */
.site-header{ box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Dropdownin varjo ja asento (pysyy navin alla) */
.navbar .nav-hybrid > .dropdown-menu{
  position:absolute;
  top: calc(100% + .5rem);   /* pieni väli linkin alle */
  left: 0;
  margin: 0;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  z-index: 1050;              /* headerin yläpuolelle tarvittaessa */
}

/* (muista että sinulla on jo hover-silta:
   .nav-hybrid::after { top:100%; height:.5rem; } ja desktop-hover säännöt) */


   :root{
  --ink:#2F4344;
  --dark:#212529;
  --sand:#E9E3D7;
  --cta:#DA2128;
  --cta-text:#ffffff;
}

/* Käytä Bootstrapiin sisäänrakennettuja btn-muuttujia */
.btn-cta{
  /* Ulkoasu */
  --bs-btn-padding-y: .65rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 999px;

  /* Värit tiloittain */
  --bs-btn-color:            var(--cta-text);
  --bs-btn-bg:               var(--cta);
  --bs-btn-border-color:     var(--cta);

  /* Hover */
  --bs-btn-hover-color:      var(--cta-text);
  --bs-btn-hover-bg:         color-mix(in srgb, var(--cta) 90%, black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--cta) 90%, black 12%);

  /* Active */
  --bs-btn-active-color:     var(--cta-text);
  --bs-btn-active-bg:        color-mix(in srgb, var(--cta) 85%, black 15%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--cta) 85%, black 18%);

  /* Disabled & focus */
  --bs-btn-disabled-bg:      var(--cta);
  --bs-btn-disabled-border-color: var(--cta);
  --bs-btn-focus-shadow-rgb: 218,33,40; /* #DA2128 */
}
a.btn-cta, a.btn-cta:visited { color: var(--cta-text); }

/* Tekoäly: välilehti kiinni sisältöön, ei pyöristystä */
.ai-product-showcase{
  overflow: visible;
}
.ai-product-nav{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 0;
}
.ai-product-nav .nav-link{
  display: block;
  width: 100% !important;
  align-self: stretch;
  box-sizing: border-box;
  color: var(--ink) !important;
  text-align: left;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: .95rem 1.15rem;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  box-shadow: none !important;
}
.ai-product-nav .nav-link:hover,
.ai-product-nav .nav-link:focus{
  color: var(--ink) !important;
  background: rgba(233,227,215,.45) !important;
}
.ai-product-nav .nav-link:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.ai-product-nav .nav-link.active,
.ai-product-nav .nav-link.active:hover,
.ai-product-nav .nav-link.active:focus,
.ai-product-nav .nav-link[aria-selected="true"]{
  color: var(--cta) !important;
  background: #E9E3D7 !important;
  font-weight: 700;
  border-radius: 0 !important;
  border-top: 1px solid rgba(47,67,68,.22) !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(47,67,68,.22) !important;
  border-left: 1px solid rgba(47,67,68,.22) !important;
}
.ai-product-card{
  background: #E9E3D7;
  border-radius: 0 !important;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(47,67,68,.22);
  border-left: 0;
}
@media (min-width: 768px){
  .ai-product-showcase__nav{
    background: #fff;
  }
  .ai-product-nav .nav-link.active,
  .ai-product-nav .nav-link[aria-selected="true"]{
    position: relative;
    z-index: 1;
    margin-right: -1px;
  }
}
@media (max-width: 767.98px){
  .ai-product-nav .nav-link.active,
  .ai-product-nav .nav-link[aria-selected="true"]{
    border-right: 1px solid rgba(47,67,68,.22) !important;
    border-bottom: 0 !important;
    margin-bottom: -1px;
  }
  .ai-product-card{
    border-left: 1px solid rgba(47,67,68,.22);
    border-top: 0;
  }
}
.ai-product-card h3{
  color: var(--cta);
  font-weight: 800;
}
.ai-product-card__img{
  max-height: 220px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.ai-video-block{
  padding-top: 1rem;
}