@font-face {
  font-family:Sinkin Sans;
  src:url('fonts/SinkinSans-400Regular-webfont.woff') format('woff');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Sinkin Sans;
  src:url('fonts/SinkinSans-500Medium-webfont.woff') format('woff');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Sinkin Sans;
  src:url('fonts/SinkinSans-600SemiBold-webfont.woff') format('woff');
  font-weight:600;
  font-display:swap
}
@font-face {
  font-family:Sinkin Sans;
  src:url('fonts/SinkinSans-700Bold-webfont.woff') format('woff');
  font-weight:700;
  font-display:swap
}
:root {
  --orange:#dc4d28;
  --navy:#1d223c;
  --ink:#161929;
  --pale:#f2f2f9;
  --white:#fff;
  --width:1170px;
  --header-inset:96px;
  --content-left:calc(max(30px,(100vw - 1366px)/2) + var(--header-inset));
  --space:clamp(64px,7vw,110px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:130px
}
body {
  margin:0;
  font-family:Sinkin Sans,Arial,Helvetica,sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.8;
  color:var(--ink)
}
img {
  display:block;
  max-width:100%;
  height:auto
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
p {
  margin:0 0 22px
}
h1,h2,h3,h4 {
  font-weight:600;
  line-height:1.35;
  margin:0 0 26px;
  overflow-wrap:break-word
}
h1 {
  font-size:clamp(36px,4.4vw,65px)
}
h2 {
  font-size:clamp(28px,3vw,42px)
}
h3 {
  font-size:clamp(21px,2vw,25px)
}
h4 {
  font-size:18px
}
ul {
  padding-left:22px;
  margin:0 0 24px
}
li+li {
  margin-top:8px
}
:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px
}
.container {
  width:min(var(--width),calc(100% - var(--content-left) * 2));
  margin-left:var(--content-left);
  margin-right:auto
}
.section {
  padding-block:var(--space)
}
.pale {
  background:var(--pale)
}
#ratkaisut {
  background-image:url('images/nuoli-tausta.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center
}
.eyebrow {
  display:inline-block;
  color:var(--orange);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:20px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:var(--orange);
  color:white;
  padding:17px 26px;
  border:0;
  border-radius:9px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#bd3d1c;
  transform:translateY(-2px)
}
.button .arrow {
  font-size:24px;
  line-height:1
}
.button.outline {
  background:transparent;
  border:1px solid currentColor
}
.button.outline:hover {
  background:rgba(255,255,255,.12)
}
.text-link {
  display:flex;
  align-items:center;
  gap:22px;
  color:var(--orange);
  font-size:13px;
  font-weight:600;
  padding:13px 0;
  line-height:1.55
}
.text-link .arrow {
  font-size:25px;
  color:var(--ink);
  transition:transform .2s
}
.text-link:hover .arrow {
  transform:translateX(7px)
}
.links {
  border-top:1px solid #e8e8ee;
  padding-top:12px;
  margin-top:30px
}
.skip-link {
  position:fixed;
  top:-100px;
  left:24px;
  z-index:100;
  background:white;
  padding:12px
}
.skip-link:focus {
  top:10px
}
/* Shared header and two-level navigation. */
.site-header {
  position:absolute;
  top:40px;
  left:50%;
  transform:translateX(-50%);
  width:min(1366px,calc(100% - 60px));
  z-index:30;
  border-radius:15px;
  background:white;
  box-shadow:0 8px 35px #1619290a
}
.header-inner {
  display:flex;
  align-items:center;
  gap:40px;
  padding:16px 40px 16px var(--header-inset);
  min-height:80px
}
.brand {
  flex-shrink:0
}
.brand img {
  width:120px
}
.site-nav {
  display:flex;
  align-items:center;
  gap:35px;
  margin-left:0
}
.nav-group {
  position:relative
}
.nav-trigger {
  display:flex;
  gap:12px;
  align-items:center;
  border:0;
  background:none;
  padding:15px 0;
  font-size:15px;
  font-weight:600;
  color:var(--ink)
}
.chevron {
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  width:6px;
  height:6px;
  transform:rotate(45deg);
  margin-top:-4px
}
.dropdown {
  position:absolute;
  top:100%;
  left:-24px;
  min-width:295px;
  background:white;
  box-shadow:0 12px 32px #16192917;
  padding:15px 24px;
  border-radius:0 0 12px 12px;
  visibility:hidden;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s
}
.dropdown a {
  display:block;
  padding:10px 0;
  font-size:13px;
  line-height:1.6
}
.dropdown a:hover,.dropdown a[aria-current=page] {
  color:var(--orange)
}
.nav-group:hover .dropdown,.nav-group.is-open .dropdown {
  visibility:visible;
  opacity:1;
  transform:translateY(0)
}
.menu-toggle {
  display:none
}
.header-contact {
  white-space:nowrap;
  margin-left:auto
}
.site-header.is-scrolled {
  position:fixed;
  top:16px;
  box-shadow:0 6px 25px #16192915
}
/* Reference-inspired hero: gradient and curved diagonal image mask. */
.hero {
  position:relative;
  isolation:isolate;
  min-height:790px;
  background:linear-gradient(113deg,var(--navy),var(--orange));
  color:white;
  overflow:hidden;
  display:flex;
  align-items:center
}
.hero-photo {
  position:absolute;
  z-index:-1;
  inset:0 0 0 auto;
  width:62%;
  height:100%;
  object-fit:cover;
  clip-path:url(#hero-clip)
}
.hero-content {
  width:min(570px,calc(52vw - var(--content-left)));
  margin:210px 0 110px var(--content-left);
  position:relative
}
.hero p {
  max-width:590px;
  font-size:17px;
  line-height:1.75
}
.hero h1 {
  font-size:clamp(36px,3.4vw,48px);
  margin-bottom:26px
}
.hero .button {
  margin-top:15px
}
.hero-mask {
  position:absolute;
  width:0;
  height:0
}
.hero.loyalty h1 {
  font-size:clamp(34px,3.2vw,44px)
}
.hero.loyalty .hero-content {
  width:min(570px,calc(52vw - var(--content-left)))
}
.hero .hero-kicker {
  font-size:17px;
  font-weight:600;
  margin-bottom:25px
}
.hero.loyalty p {
  font-size:15px
}
.intro-copy {
  max-width:850px
}
.intro-copy h2 {
  max-width:800px
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center
}
.split+.split {
  margin-top:110px
}
.split.reverse .media {
  order:2
}
.media {
  position:relative
}
.media.framed:before {
  content:'';
  position:absolute;
  inset:-24px 24px 24px -24px;
  background:var(--pale);
  z-index:-1
}
.media.framed {
  isolation:isolate
}
.media img {
  width:100%;
  object-fit:cover
}
#tekoaly .media img {
  aspect-ratio:668 / 485;
  object-position:left top
}
.ai-hero .hero-photo {
  object-position:left top
}
.hero .hero-photo[src$="/brand.jpg"] {
  object-position:25% center
}
.hero .hero-photo[src$="/solutions.jpg"] {
  object-position:left center
}
.split.reverse .media.framed:before {
  inset:24px -24px -24px 24px
}
.split .eyebrow {
  margin-bottom:15px
}
.split .copy h2 {
  font-size:clamp(28px,2.6vw,37px)
}
.industries {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
  margin-top:35px
}
.industry {
  border-top:1px solid #d4d4df;
  padding-top:25px
}
.industry span {
  color:var(--orange);
  font-size:12px;
  font-weight:600
}
.industry h3 {
  font-size:18px;
  margin:12px 0
}
.quote {
  border-left:3px solid var(--orange);
  padding:12px 0 12px 26px;
  margin:32px 0 0;
  font-size:17px
}
.center-copy {
  max-width:900px;
  margin:0 auto 65px;
  text-align:center
}
.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:35px
}
.benefit-card {
  background:white;
  padding:32px
}
.benefit-card h3 {
  font-size:18px;
  margin-bottom:20px
}
.benefit-card ul {
  font-size:13px;
  margin:0
}
.benefit-card .number {
  color:var(--orange);
  font-size:12px;
  display:block;
  margin-bottom:24px
}
.benefit-card.statement {
  background:var(--navy);
  color:white;
  display:flex;
  align-items:center
}
.benefit-card.statement p {
  font-size:18px;
  font-weight:600;
  margin:0
}
.photo-banner {
  position:relative;
  padding:70px 0;
  background:var(--navy);
  isolation:isolate
}
.photo-banner>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1
}
.photo-banner .banner-copy {
  background:var(--navy);
  color:white;
  width:min(480px,100%);
  padding:40px
}
.banner-copy h2 {
  font-size:25px
}
.banner-copy p {
  font-size:14px
}
.contact-panel {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center;
  background:var(--navy);
  color:white;
  padding:55px
}
.contact-panel h2 {
  font-size:30px
}
.contact-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px
}
.contact-actions a:not(.button) {
  border-bottom:1px solid #ffffff50
}
.expert {
  display:flex;
  gap:30px;
  align-items:center;
  margin-top:28px
}
.expert img {
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover
}
.expert p {
  font-size:13px;
  margin:0
}
.expert strong {
  font-size:16px
}
.contact-note {
  font-size:13px;
  color:#dddded
}
/* Shared blue footer. Static newsletter callout intentionally has no form. */
.site-footer {
  background:var(--navy);
  color:white;
  padding:0 0 30px
}
.newsletter {
  display:flex;
  gap:50px;
  justify-content:space-between;
  align-items:center;
  padding:55px 0;
  border-bottom:1px solid #ffffff30
}
.newsletter h2 {
  font-size:20px;
  margin-bottom:12px
}
.newsletter p {
  max-width:590px;
  font-size:13px;
  margin:0
}
.footer-main {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:70px;
  padding:60px 0
}
.footer-brand {
  width:150px;
  filter:brightness(0) invert(1);
  margin-bottom:26px
}
.footer-main p {
  font-size:13px;
  line-height:1.9;
  max-width:460px
}
.footer-main h3 {
  font-size:17px;
  margin:0 0 22px
}
.footer-main a {
  display:block;
  font-size:13px;
  padding:6px 0
}
.footer-main a:hover {
  text-decoration:underline
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff30;
  padding-top:26px;
  font-size:12px;
  color:#c5c7d3
}
.footer-bottom a {
  color:white
}
.reveal {
  opacity:1
}
.motion-ready .reveal {
  opacity:0;
  transform:translateY(25px);
  transition:opacity .65s ease,transform .65s ease
}
.motion-ready .reveal.is-visible {
  opacity:1;
  transform:none
}
.hero h1 {
  max-width:570px
}
.hero-photo {
  width:58%
}
#ratkaisut {
  padding-top:35px
}
.split>* ,.contact-panel>* {
  min-width:0
}
.contact-actions a {
  max-width:100%;
  overflow-wrap:anywhere
}
.expert img {
  flex-shrink:0
}
.expert p {
  min-width:0;
  overflow-wrap:anywhere
}
@media(min-width:1600px) {
  .hero {
    min-height:850px
  }
  .hero-content {
    margin-top:220px
  }
}
@media(max-width:1199px) {
  :root {
    --header-inset:64px
  }
  .header-inner {
    padding:16px 28px 16px var(--header-inset);
    gap:25px
  }
  .site-nav {
    gap:24px
  }
  .nav-trigger {
    font-size:13px
  }
  .brand img {
    width:115px
  }
  .hero {
    min-height:710px
  }
  .hero-content {
    margin-left:var(--content-left)
  }
  .hero h1 {
    font-size:40px
  }
  .split {
    gap:50px
  }
  .contact-panel {
    gap:40px
  }
}
@media(max-width:959px) {
  :root {
    --content-left:32px
  }
  .site-header {
    position:absolute;
    top:0;
    width:100%;
    border-radius:0
  }
  .header-inner {
    min-height:80px;
    padding:20px 32px
  }
  .site-header.is-scrolled {
    top:0;
    border-radius:0
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    border:0;
    background:none;
    margin-left:auto;
    padding:10px
  }
  .menu-toggle span {
    width:26px;
    height:2px;
    background:var(--orange);
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity:0
  }
  .menu-toggle[aria-expanded=true] span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
  }
  .site-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:white;
    padding:15px 32px 30px;
    max-height:calc(100dvh - 80px);
    overflow:auto
  }
  .site-nav.is-open {
    display:block
  }
  .nav-trigger {
    font-size:17px;
    justify-content:space-between;
    width:100%;
    padding:18px 0
  }
  .dropdown {
    position:static;
    display:none;
    visibility:visible;
    opacity:1;
    transform:none;
    box-shadow:none;
    border-radius:0;
    min-width:0;
    padding:0 0 12px 18px
  }
  .nav-group:hover .dropdown {
    display:none
  }
  .nav-group.is-open .dropdown {
    display:block
  }
  .nav-group {
    border-bottom:1px solid #eee
  }
  .header-contact {
    display:none
  }
  .site-nav .mobile-contact {
    display:inline-flex;
    margin-top:22px
  }
  .hero {
    min-height:690px
  }
  .hero-content {
    margin:150px 0 75px 32px
  }
  .hero h1 {
    font-size:40px
  }
  .hero p {
    font-size:15px
  }
  .hero-photo {
    width:60%;
    opacity:.85
  }
  .split {
    gap:38px
  }
  .benefit-grid {
    grid-template-columns:1fr 1fr
  }
  .footer-main {
    gap:35px
  }
  .contact-panel {
    padding:40px
  }
  .industries {
    gap:20px
  }
}
@media(min-width:960px) {
  .mobile-contact {
    display:none
  }
}
@media(min-width:768px) and (max-width:959px) {
  .hero h1 {
    font-size:34px
  }
  .hero-photo {
    width:55%
  }
}
@media(max-width:767px) {
  body {
    font-size:14px
  }
  .container {
    width:calc(100% - var(--content-left) * 2)
  }
  html {
    scroll-padding-top:100px
  }
  .hero {
    display:flex;
    flex-direction:column;
    padding-top:80px;
    min-height:0;
    overflow:visible
  }
  .hero-photo {
    position:relative;
    inset:auto;
    z-index:0;
    width:100%;
    height:300px;
    clip-path:none;
    opacity:1;
    object-position:center
  }
  .hero-content,.hero.loyalty .hero-content {
    width:100%;
    margin:0;
    padding:35px var(--content-left) 45px
  }
  .hero h1,.hero.loyalty h1 {
    font-size:28px;
    line-height:1.4
  }
  .hero p,.hero.loyalty p {
    font-size:14px;
    max-width:none
  }
  .hero .hero-kicker {
    font-size:15px
  }
  .hero-content .button {
    font-size:13px
  }
  .split {
    grid-template-columns:1fr;
    gap:40px
  }
  .split.reverse .media {
    order:0
  }
  .split+.split {
    margin-top:85px
  }
  .split .copy h2 {
    font-size:28px
  }
  .media.framed {
    margin:12px 0 0 12px
  }
  .media.framed:before {
    inset:-12px 12px 12px -12px
  }
  .split.reverse .media.framed:before {
    inset:12px -12px -12px 12px
  }
  .industries {
    grid-template-columns:1fr;
    gap:15px
  }
  .benefit-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .benefit-card {
    padding:28px
  }
  .center-copy {
    text-align:left;
    margin-bottom:45px
  }
  .quote {
    font-size:15px;
    padding-left:20px
  }
  .photo-banner {
    padding:45px 0
  }
  .photo-banner .banner-copy {
    padding:30px
  }
  .contact-panel {
    grid-template-columns:1fr;
    gap:25px;
    padding:30px
  }
  .contact-panel h2 {
    font-size:26px
  }
  .expert {
    gap:16px
  }
  .newsletter {
    flex-direction:column;
    align-items:flex-start;
    gap:25px;
    padding-block:40px
  }
  .footer-main {
    grid-template-columns:1fr;
    gap:30px;
    padding:40px 0
  }
  .footer-bottom {
    gap:20px;
    flex-wrap:wrap
  }
  .text-link {
    font-size:12px
  }
  .hero-photo.loyalty-image {
    object-position:center 35%
  }
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  margin-top:45px
}
.service-card {
  background:white;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.service-card>img {
  width:100%;
  height:220px;
  object-fit:cover
}
.service-card-copy {
  padding:28px;
  display:flex;
  flex-direction:column;
  flex:1
}
.service-card-copy h3 {
  font-size:19px
}
.service-card-copy .text-link {
  margin-top:auto;
  padding-top:12px
}
.channel-heading {
  margin-top:48px
}
.channel-list {
  display:grid;
  grid-template-columns:repeat(4,max-content);
  gap:20px 45px;
  margin-top:25px
}
.channel-list li {
  margin-top:0
}
@media(max-width:767px) {
  .channel-heading {
    margin-top:36px
  }
  .channel-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 28px
  }
}
address {
  font-style:normal;
  line-height:1.8
}
.contact-form-section {
  background:var(--navy);
  color:#fff
}
.contact-person .media {
  width:33.333%;
  justify-self:center
}
.contact-form-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:start
}
.contact-form-copy h2 {
  color:#fff
}
.contact-form-copy p {
  max-width:460px
}
.contact-form-frame {
  min-width:0;
  padding:24px;
  background:var(--navy);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px
}
.contact-form-frame iframe {
  display:block;
  width:100%;
  height:300px;
  border:0;
  background:var(--navy)
}
@media(max-width:767px) {
  .contact-form-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .contact-form-frame {
    padding:12px
  }
  .contact-form-frame iframe {
    height:320px
  }
}
@media(max-width:1199px) {
  .service-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:767px) {
  .service-grid {
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
  .motion-ready .reveal {
    opacity:1;
    transform:none
  }
}