* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button, a {
  -webkit-tap-highlight-color: transparent;
}
.eyebrow {
  margin: 0 0 14px;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.lead {
  margin: 28px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
}
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: radial-gradient(circle at 24% 28%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, var(--brand) 0%, #34756e 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10vw -25vw auto;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.product-visual {
  width: min(78%, 540px);
  aspect-ratio: .72;
  display: grid;
  place-items: center;
  position: relative;
}
.menu-toggle {
  display: none;
  position: absolute;
  z-index: 6;
  top: 18px;
  right: 18px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-toggle span:nth-child(1) {
  top: 17px;
}
.menu-toggle span:nth-child(2) {
  top: 23px;
}
.menu-toggle span:nth-child(3) {
  top: 29px;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 23px;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 23px;
  transform: rotate(-45deg);
}
.hero-nav {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(calc(100% - 40px), 1040px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero-nav a {
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-size: .92rem;
  font-weight: 750;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.hero-nav a:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.actual-product {
  width: min(88%, 430px);
  max-height: 72vh;
  object-fit: contain;
  filter: drop-shadow(0 34px 34px rgba(7, 42, 38, .28));
  transform: rotate(-3deg);
}
.product-detail-image {
  width: min(58%, 330px);
  max-height: 520px;
  margin-top: 0;
  transform: rotate(3deg);
}
.section-title {
  margin: 0;
  max-width: 780px;
  font-size: clamp(2.4rem, 5vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.freefrom-symbols {
  display: block;
  width: min(100%, 480px);
  height: auto;
  margin-top: 30px;
}
.product-photo {
  min-height: 580px;
  display: grid;
  place-items: start center;
  padding-top: 0;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.95), transparent 34%),
        var(--brand-light);
  overflow: hidden;
}
.feature-list span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
}
.curve-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  /* Without this, a row-spanning item (the photo) can make CSS Grid's
     track-sizing algorithm attribute its whole intrinsic height to
     just ONE of the auto rows it spans (observed: it inflated row 1 -
     the eyebrow's row - to ~500px, blowing the layout apart) instead
     of distributing it across the spanned rows as expected. Forcing
     every implicit row to size from its own single-row content only
     avoids that ambiguity entirely. */
  grid-auto-rows: min-content;
  column-gap: clamp(42px, 8vw, 100px);
  row-gap: 0;
}
/* Flattened: every text piece (eyebrow, heading, lead, ...) is now a
   direct grid child alongside the photo, rather than nested inside a
   wrapping <div> - this is what lets the photo sit in a different
   position in the stacked mobile order (see the ≤980px override
   below) than in the two-column desktop layout, without needing two
   copies of the markup. All text pieces go in column 1 and are
   auto-placed into consecutive rows; the photo takes column 2 and
   spans every one of those rows, centered within them. */
.curve-grid > :not(.reducose-photo) {
  grid-column: 1;
}
.curve-grid > .reducose-photo {
  grid-column: 2;
  /* "1 / -1" (span to the grid's last line) turned out NOT to resolve
     reliably against this grid's implicitly-created rows even with
     grid-auto-rows set above - it left row 1 sized to the photo's
     entire ~494px height instead of the eyebrow's own ~35px, wrecking
     the whole section's layout. An explicit span count resolves
     correctly. IMPORTANT: "8" must match the number of text-column
     children above (.eyebrow, .section-title, .lead, .carb-copy,
     .reducose-logo-block, .reducose-trademark, .curve-links,
     .product-footnote) - update this number if one is ever added or
     removed, or the photo will stop spanning the full column height. */
  grid-row: 1 / span 8;
  align-self: center;
}
/* Shared "card" surface used across the site wherever content sits on
   a rounded, shadowed panel - a photo card here, a padded white card
   for the Reducose chart on the ammattilaisille page, etc. Keeping the
   radius/shadow values in ONE place means every card-like surface
   stays visually consistent automatically. */
.content-card {
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(40,74,69,.10);
}
/* Modifier for the padded, white, bordered variant (as opposed to a
   full-bleed photo card, which only needs the base radius/shadow). */
.content-card--padded {
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(49,79,73,.10);
  background: #ffffff;
}
/* Reusable modifier for the "text + action, side by side, stacking on
   tablet/mobile" pattern - the exact same grid mechanics as the front
   page's #yhteystiedot .contact-card, factored out so any other card
   that needs a body+button layout can reuse it too. */
.content-card--split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}
@media (max-width: 980px) {
  .content-card--split {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
@media (max-width: 640px) {
  .content-card--padded {
    padding: 18px 14px;
  }
}
.reducose-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.reducose-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.curve-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
/* Same breakpoint as #kaytto .usage-intro-layout (the vegetable photo
   further down the page) - stays side by side down to a narrower
   width, only stacking at genuinely small mobile sizes, instead of
   switching to one column as early as tablet widths. */
@media (max-width: 820px) {
  .curve-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .curve-grid > .reducose-photo {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    /* Only needed here: on desktop the photo sits in its own column
       (see above) so it doesn't need margin to separate it from
       anything. Stacked into the text flow on mobile, it needs
       breathing room on both sides - 28px matches .lead's own
       top-margin convention used throughout the site. */
    margin: 28px 0;
  }
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.hero-nav a, .contact-link, summary {
  display: flex;
  align-items: center;
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid #111;
  outline-offset: 4px;
}
.video-section {
  background: #153d39;
  color: #fff;
}
.video-section .lead {
  color: rgba(255,255,255,.68);
}
.video-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 22px;
  margin-top: 56px;
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 25%),
        linear-gradient(135deg, #163f3b, #285e58);
}
.play {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 1.5rem;
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
.video-card h3 {
  margin: 18px 0 0;
  font-size: 1.25rem;
}
.video-card p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.62);
}
.faq-wrap {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: start;
}
summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 26px 54px 26px 0;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  font-weight: 780;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 1.45rem;
  transition: transform .2s ease;
}
details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.contact {
  background: var(--brand);
  color: #fff;
}
.contact-card p {
  margin: 20px 0 0;
  color: rgba(255,255,255,.78);
}
.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 850;
  white-space: nowrap;
}
/* .contact-link's white fill assumes a colored card behind it (as on
   the main page's #yhteystiedot, which sits on a dark section). On a
   white .content-card--padded, a white-on-white button would be
   invisible, so give it a solid brand fill there instead. */
.content-card--padded .contact-link {
  background: var(--brand-dark);
  color: #fff;
}
.content-card--padded .contact-link:hover {
  background: var(--brand);
}
/* Temporary "coming soon" state: a real <button disabled> (not a
   styled-to-look-disabled <a>) so it's genuinely non-interactive and
   announced correctly by screen readers. Resets native button chrome
   since .contact-link was designed for an <a>. Remove this class and
   the "Ei vielä auki" markup once the professional section is live
   again and the real link (commented out in the HTML) is restored. */
.contact-link--disabled, .content-card--padded .contact-link--disabled {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  background: rgba(49,79,73,.14);
  color: var(--muted);
  cursor: not-allowed;
  /* .contact-link (the base class) sets white-space:nowrap, which is
     fine for its normal short labels ("Jatka sisältöön") but this
     button's longer "coming soon" text doesn't fit that assumption -
     at narrow widths it silently pushed past the card's own edge
     instead of wrapping (confirmed: button right edge measured past
     the card's right edge, even though the card itself has no
     overflow:hidden to hide it). Let it wrap and never exceed its
     container instead. */
  white-space: normal;
  max-width: 100%;
  height: auto;
  text-align: center;
}
.contact-link--disabled:hover, .content-card--padded .contact-link--disabled:hover {
  background: rgba(49,79,73,.14);
}
/* Forces its own row below the text at EVERY width, including wide
   desktop - unlike .content-card--split, which keeps text+action side
   by side until 980px. Plain block flow (no grid needed) since this
   card no longer uses .content-card--split. */
.contact-link--own-row {
  display: inline-flex;
  margin-top: 24px;
}
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .product-visual {
    width: min(54vw, 360px);
  }
  .hero h1 {
    max-width: 780px;
  }
  .product-grid, .faq-wrap {
    grid-template-columns: 1fr !important;
  }
  .product-photo {
    min-height: 460px;
  }
  .video-grid {
    grid-template-columns: 1fr;
  }
  .contact-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
@media (min-width: 641px) and (max-width: 980px) {
  .hero-nav {
    bottom: 16px;
    width: min(calc(100% - 28px), 900px);
    gap: 2px;
    padding: 6px;
  }
  .hero-nav a {
    padding: 9px 10px;
    font-size: .78rem;
  }
}
@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 28px), var(--content));
  }
  .section {
    padding: 72px 0;
  }
  .product-visual {
    width: min(64vw, 300px);
  }
  .menu-toggle {
    display: block;
    position: fixed;
  }
  .hero-nav {
    position: fixed;
    inset: 0;
    z-index: 5;
    width: 100%;
    padding: 92px 28px 36px;
    border: 0;
    border-radius: 0;
    background: rgba(40, 74, 69, .98);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: translateY(-105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s ease, opacity .25s ease, visibility .3s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }
  .hero-nav a {
    width: 100%;
    padding: 18px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
    font-size: clamp(1.35rem, 7vw, 2rem);
    font-weight: 800;
  }
  .product-photo {
    min-height: 390px;
  }
  .contact-card {
    border-radius: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (max-width: 640px) {
  .menu-toggle {
    background: rgba(40, 74, 69, .96);
    border-color: rgba(40, 74, 69, .96);
    box-shadow: 0 4px 18px rgba(16, 46, 43, .18);
  }
  .menu-toggle span {
    background: #fff;
  }
}
@media (max-width: 640px) {
  .product-section .product-grid > div:last-child {
    padding: 12px 14px 0 !important;
  }
  .product-section .product-grid > div:last-child .section-title, .product-section .product-grid > div:last-child .lead, .product-section .product-grid > div:last-child .feature-list {
    max-width: 100%;
  }
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 11px 16px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.skip-link:focus {
  transform: translateY(0);
}
.product-note {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: .95rem;
}
.product-footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .88rem;
}
.feature-list p {
  margin: 8px 0 0;
}
@media (max-width: 980px) {
  .product-copy {
    padding: 20px 14px 0;
  }
}
@media (max-width: 640px) {
  .product-copy {
    padding: 22px 16px 0 !important;
  }
  .product-photo {
    min-height: 360px;
  }
}
.reducose-logo-block img {
  display: block;
  width: 60%;
  padding-top: 20px;
  height: auto;
}
.reg-mark {
  position: relative;
  top: -.15em;
  margin-left: .04em;
  font-family: inherit;
  font-size: .48em;
  font-weight: inherit;
  line-height: 0;
  vertical-align: super;
}
.tm-mark {
  position: relative;
  top: -.2em;
  margin-left: .03em;
  font-family: inherit;
  font-size: .62em;
  font-weight: inherit;
  line-height: 0;
  vertical-align: super;
}
.hero h1, .section-title, .contact-card h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  letter-spacing: -.035em;
  color: #314f49;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  max-width: 100%;
}
.section-title, .contact-card h2 {
  font-weight: 500;
}
html, body {
  max-width: 100%;
  overflow-x: clip;
}
main, section, .container, .product-grid, .curve-grid {
  min-width: 0;
  max-width: 100%;
}
.product-copy {
  min-width: 0;
  padding: 18px clamp(14px, 1.5vw, 22px);
}
img, svg, video, iframe {
  max-width: 100%;
}
@supports not (overflow: clip) {
  html, body {
    overflow-x: hidden;
  }
}
@media (max-width: 640px) {
  .hero h1, .section-title, .contact-card h2 {
    overflow-wrap: anywhere;
  }
}
.hero h1, .contact-card h2, .contact-card .eyebrow {
  color: #d7bd72;
}
.product-section .section-title, .curve-section .section-title {
  color: #314f49;
}
.video-section .section-title, .video-section .eyebrow, .contact .contact-card h2, .contact .contact-card .eyebrow {
  color: #ffffff;
}
.product-section .section-title, .curve-section .section-title, #ukk .section-title, .retail-section .section-title {
  color: #314f49;
}
.product-info-green h2, .product-info-green .eyebrow, .product-info-green p {
  color: #314f49;
}
.product-info-green a {
  color: #314f49;
  border-color: rgba(49,79,73,.35);
}
.product-info-green a:hover {
  background: #314f49;
  color: #ffffff;
}
.product-info-green .eyebrow, .product-info-green h2 {
  color: #314f49 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 {
    animation: gold-shimmer 9s ease-in-out infinite alternate;
  }
  @keyframes gold-shimmer {
        from { background-position: 0% 50%; }
        to { background-position: 100% 50%; }
      }
}
@media (forced-colors: active) {
  .hero h1 {
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
}
.footer-avainlippu svg, .footer-avainlippu > span {
  display: none;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
.section {
  padding: clamp(72px, 10vw, 136px) 0;
  scroll-margin-top: 20px;
  position: relative;
}
.product-section::after, .retail-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: min(38vw, 520px);
  aspect-ratio: 1.55;
  border: 1px solid rgba(56,104,96,.08);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.product-section::after {
  right: -12%;
  bottom: -6%;
}
.retail-section::after {
  right: -14%;
  top: 5%;
}
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 9vw, 120px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.feature-list {
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: 38px;
}
.feature-list li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: 23px 0;
  border-top: 1px solid rgba(49,79,73,.14);
}
.feature-list li:last-child {
  border-bottom: 1px solid rgba(49,79,73,.14);
}
.feature-list li > span {
  width: auto;
  height: auto;
  place-items: initial;
  align-self: start;
  padding-top: 2px;
  border-radius: 0;
  background: none;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 2.6vw, 2.45rem);
  font-weight: 400;
  line-height: 1;
}
.feature-list strong {
  color: var(--deep-green);
  font-size: 1.08rem;
}
.curve-section {
  background: var(--paper);
  overflow: hidden;
}
.reducose-logo-block {
  width: min(225px, 66vw);
  margin: 10px 0 22px;
  margin-bottom: 16px;
}
.video-card {
  min-width: 0;
}
.video-frame {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 24px;
  background: #2b2024;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
}
details {
  border-bottom: 1px solid var(--border);
  border-bottom-color: rgba(49,79,73,.14);
}
summary:hover {
  color: var(--brand-dark);
}
.retail-section {
  background: var(--brand-light);
  overflow: hidden;
}
.retail-section .container {
  position: relative;
  z-index: 1;
  max-width: 920px;
  text-align: center;
}
.retail-section .section-title, .retail-section .lead {
  margin-inline: auto;
}
.retail-section .lead {
  max-width: 680px;
}
.contact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  padding: clamp(34px, 6vw, 72px);
  border-radius: 32px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: none;
}
.product-info-green {
  background: #f2efe6 !important;
  color: #314f49;
  border-color: rgba(49,79,73,.14) !important;
}
.section-title, .lead, .product-copy, .curve-grid > *, .contact-card > * {
  min-width: 0;
}
@media (max-width: 640px) {
  .section {
    padding-block: 66px;
  }
  .feature-list li {
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .feature-list li > span {
    font-size: 1.55rem;
  }
  .product-section::after, .retail-section::after {
    opacity: .55;
  }
}
.footer-corporate-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.footer-corporate-link:hover {
  text-decoration-thickness: 2px;
}
.footer-corporate-link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  border-radius: 2px;
}
.footer-reducose-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.footer-reducose-links a {
  color: #ffffff;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.footer-reducose-links a:hover {
  text-decoration-thickness: 2px;
}
.footer-reducose-links a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  border-radius: 2px;
}
footer {
  padding: 42px 0 24px;
  background: #102e2b;
  color: rgba(255,255,255,.64);
  font-size: .92rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-vitabalans-logo {
  display: block;
  width: min(145px, 38vw);
  height: auto;
}
.footer-reducose-logo {
  display: block;
  width: min(125px, 34vw);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .94;
}
.footer-avainlippu {
  display: block;
  width: min(120px, 30vw);
  margin-top: 0;
  align-self: start;
  justify-self: end;
}
@media (max-width: 900px) {
  .footer-avainlippu {
    justify-self: start;
  }
}
@media (max-width: 640px) {
  footer {
    padding-top: 34px;
  }
  .footer-vitabalans-logo {
    width: 132px;
  }
  .footer-reducose-logo {
    width: 118px;
  }
  .footer-avainlippu {
    width: 108px;
  }
}
.footer-social a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 640px) {
  .footer-social {
    gap: 10px 16px;
  }
}
.footer-social a:nth-child(2) svg {
  fill: none;
}
@media (prefers-reduced-motion: reduce) {
  .footer-social a {
    transition: none;
  }
  .footer-social a:hover {
    transform: none;
  }
}
.footer-social a span {
  display: block;
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.footer-social a:nth-child(4) span {
  font-size: 12px;
  letter-spacing: -.06em;
}
.footer-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  display: none;
}
.footer-corporate-description {
  margin: 10px 0 0;
  max-width: 46ch;
  color: rgba(255,255,255,.76);
  font-size: .84rem;
  line-height: 1.55;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
  align-items: center;
}
.footer-social a {
  color: rgba(255,255,255,.82);
  font-size: .78rem;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.24);
  padding-bottom: 2px;
  display: inline;
  place-items: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  transform: none;
}
.footer-social a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
  background: transparent;
  border-color: rgba(255,255,255,.65);
  transform: none;
}
.footer-social a span, .footer-social svg {
  display: none;
}
.footer-avainlippu img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
  border-radius: 2px;
  object-fit: contain;
}
.footer-brand-marks {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-brand-marks .footer-vitabalans-logo {
  width: min(145px, 38vw);
  flex: 0 0 auto;
}
.footer-brand-marks .footer-avainlippu {
  width: min(92px, 24vw);
  margin: 0;
  justify-self: auto;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .footer-brand-marks {
    gap: 18px;
  }
  .footer-brand-marks .footer-vitabalans-logo {
    width: 132px;
  }
  .footer-brand-marks .footer-avainlippu {
    width: 82px;
  }
}
.site-footer {
  padding: 46px 0 24px;
  background: #102e2b;
  color: rgba(255,255,255,.78);
  border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .footer-content {
  display: grid;
  gap: 34px;
}
.site-footer .footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(40px, 7vw, 88px);
  align-items: start;
}
.site-footer .footer-company, .site-footer .footer-ingredient {
  min-width: 0;
}
.site-footer .footer-brand-marks {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.site-footer .footer-vitabalans-logo {
  display: block;
  width: min(132px, 34vw);
  height: auto;
}
.site-footer .footer-avainlippu {
  width: min(78px, 20vw);
  margin: 0;
  flex: 0 0 auto;
}
.site-footer .footer-avainlippu img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
  object-fit: contain;
}
.site-footer .footer-company-details {
  max-width: 560px;
}
.site-footer .footer-corporate-description {
  margin: 14px 0 0;
  max-width: 54ch;
  color: rgba(255,255,255,.70);
  font-size: .84rem;
  line-height: 1.6;
}
.site-footer .footer-corporate-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-footer .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 17px;
}
.site-footer .footer-social a {
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.20);
  padding-bottom: 2px;
}
.site-footer .footer-ingredient {
  padding-top: 4px;
}
.site-footer .footer-reducose-text {
  margin: 0 0 14px;
  max-width: none;
  white-space: nowrap;
  color: rgba(255,255,255,.68);
  font-size: .82rem;
  line-height: 1.5;
}
.site-footer .footer-reducose-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
}
.site-footer .footer-reducose-links a {
  color: rgba(255,255,255,.86);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-footer .footer-legal-nav a, .site-footer .footer-legal-nav span {
  color: rgba(255,255,255,.62);
  font-size: .78rem;
  line-height: 1.4;
}
.site-footer .footer-legal-nav a {
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
}
.site-footer a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 820px) {
  .site-footer .footer-top {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .site-footer .footer-ingredient {
    padding-top: 0;
  }
  .site-footer .footer-legal-nav {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding: 36px 0 22px;
  }
  .site-footer .footer-content {
    gap: 28px;
  }
  .site-footer .footer-brand-marks {
    gap: 15px;
  }
  .site-footer .footer-vitabalans-logo {
    width: 122px;
  }
  .site-footer .footer-avainlippu {
    width: 70px;
  }
  .site-footer .footer-legal-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
}
@media (max-width: 640px) {
  .site-footer .footer-legal {
    margin-top: -10px;
  }
}
@media (max-width: 820px) {
  .site-footer .footer-copyright-final {
    text-align: left;
  }
}
.cookie-settings-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  font: inherit;
  font-size: .78rem;
  line-height: 1.4;
  cursor: pointer;
}
.cookie-settings-button:hover {
  color: #fff;
}
.cookie-settings-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 2px;
}
@media (min-width: 821px) {
  .site-footer .footer-vitabalans-logo {
    justify-self: start;
  }
  .site-footer .footer-avainlippu {
    justify-self: end;
  }
}
@media (min-width: 641px) {
  #tuote::after, #reducose::after, #ukk::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(38px, 5vw, 72px);
    pointer-events: none;
    background: var(--wave-next, #fff);
    clip-path: polygon(
          0 68%,
          7% 62%,
          15% 49%,
          24% 38%,
          34% 35%,
          44% 42%,
          54% 55%,
          64% 64%,
          74% 66%,
          84% 58%,
          92% 46%,
          100% 39%,
          100% 100%,
          0 100%
        );
  }
  #reducose::after, #ukk::after {
    clip-path: polygon(
          0 43%,
          8% 48%,
          17% 60%,
          27% 67%,
          38% 63%,
          49% 50%,
          60% 38%,
          70% 34%,
          80% 40%,
          90% 53%,
          100% 60%,
          100% 100%,
          0 100%
        );
  }
  #tuote, #reducose, #ukk {
    position: relative;
    isolation: isolate;
    padding-bottom: calc(var(--section-pad, 72px) + 38px);
  }
}
@media (max-width: 640px) {
  #tuote, #reducose, #ukk {
    position: relative;
    isolation: isolate;
  }
  #tuote::after, #reducose::after, #ukk::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 26px;
    pointer-events: none;
    background: var(--wave-next, #fff);
    clip-path: polygon(
          0 55%, 14% 43%, 28% 48%, 43% 67%, 58% 63%,
          72% 42%, 86% 35%, 100% 50%, 100% 100%, 0 100%
        );
  }
}
@media (prefers-reduced-motion: reduce) {
  #tuote::after, #reducose::after, #ukk::after {
    transform: none;
  }
}
#tuote {
  padding-bottom: 0 !important;
  --wave-next: #eef3ef;
}
#reducose {
  --wave-next: #ffffff;
}
#ukk {
  --wave-next: #f7f5ed;
}
.site-footer .footer-reducose-logo {
  display: block;
  width: min(126px, 32vw);
  height: auto;
  filter: none !important;
  opacity: 1 !important;
  margin-bottom: 33px;
}
#tuote::after, #reducose::after, #ukk::after {
  box-shadow: 0 2px 0 var(--wave-next);
  content: none !important;
  display: none !important;
}
@media (min-width: 641px) {
  #tuote, #reducose, #ukk {
    padding-bottom: var(--section-pad, 72px);
  }
}
:focus-visible {
  outline: 3px solid #111;
  outline-offset: 4px;
  scroll-margin: 1rem;
}
a, button, summary, input, select, textarea {
  -webkit-tap-highlight-color: rgba(49,79,73,.12);
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #111;
  outline-offset: 4px;
}
.site-footer a:focus-visible, .site-footer button:focus-visible {
  outline-color: #fff;
}
.menu-toggle, .cookie-settings-button {
  min-height: 44px;
}
.lead, .footer-corporate-description {
  text-wrap: pretty;
}
main p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (forced-colors: active) {
  .menu-toggle {
    forced-color-adjust: auto;
  }
}
@media (max-width: 480px) {
  .footer-social, .footer-reducose-links, .footer-legal-nav {
    overflow-wrap: anywhere;
  }
}
.faq-aftertext {
  margin: 26px 0 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted);
  line-height: 1.7;
}
.faq-aftertext p {
  max-width: 68ch;
  margin: 0;
}
.faq-aftertext p + p, .faq-aftertext ul, .faq-aftertext ol {
  margin-top: 14px;
}
@media (max-width: 640px) {
  .faq-aftertext {
    margin-top: 22px;
  }
}
@media (min-width: 641px) {
  .hero-nav {
    position: absolute !important;
    z-index: 10;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    min-height: 64px;
    padding: 0 clamp(24px, 4vw, 64px) !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(4px, .7vw, 12px) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 0 !important;
    background: linear-gradient(to bottom, rgba(16,46,43,.30), rgba(16,46,43,.08)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .hero-nav a {
    padding: 20px 10px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff;
    font-size: clamp(.76rem, .8vw, .9rem) !important;
    font-weight: 700;
    letter-spacing: .015em;
  }
  .hero-nav a:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,.85);
  }
  .hero h1 {
    font-size: clamp(2.45rem, 4vw, 3rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    max-width: 13ch;
  }
  .section-title, .contact-card h2 {
    font-size: clamp(2.15rem, 3.5vw, 3rem) !important;
    line-height: 1.02 !important;
  }
}
.feature-list-wide {
  position: relative;
  z-index: 1;
  margin-top: clamp(34px, 5vw, 64px);
}
.feature-list-wide .feature-list li:first-child {
  padding-left: 0;
}
.curve-section .curve-links {
  margin-bottom: 18px;
}
.curve-section .reducose-logo-block {
  width: min(190px, 52vw);
  margin: 4px 0 12px;
  padding-top: 18px;
}
.curve-section .reducose-trademark {
  margin: 0 0 20px;
  max-width: none;
  white-space: nowrap;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .feature-list-wide .feature-list {
    grid-template-columns: 1fr;
  }
  .feature-list-wide .feature-list li, .feature-list-wide .feature-list li:first-child, .feature-list-wide .feature-list li:last-child {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(49,79,73,.14) !important;
  }
  .feature-list-wide .feature-list li:last-child {
    border-bottom: 0 !important;
  }
}
@media (min-width: 821px) {
  .hero h1 {
    font-size: clamp(3.15rem, 4.6vw, 3.65rem) !important;
    line-height: .96 !important;
    max-width: none !important;
    white-space: nowrap;
    letter-spacing: -.045em !important;
  }
}
@media (max-width: 820px) {
  .hero h1 {
    font-size: clamp(2.55rem, 8.7vw, 3.2rem) !important;
    line-height: .98 !important;
  }
}
.feature-list-wide .feature-list {
  margin-top: 0;
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(49,79,73,.14);
  border-bottom: 1px solid rgba(49,79,73,.14);
}
.feature-list-wide .feature-list li {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 25px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(49,79,73,.14) !important;
  border-right: 1px solid rgba(49,79,73,.14);
  display: grid;
  width: 100%;
  border: 0 !important;
}
.feature-list-wide .feature-list li:last-child {
  padding-right: 0;
  border-right: 0;
  border-bottom: 0 !important;
}
.feature-list-wide .feature-list li > span {
  font-size: clamp(1.65rem, 2.4vw, 2.2rem) !important;
}
.product-attributes-after {
  margin-top: clamp(30px, 4vw, 48px);
}
.product-attributes-after .product-note {
  max-width: 72ch;
  margin: 0;
}
.product-attributes-after .product-footnote {
  max-width: 72ch;
  margin-top: 20px;
}
#kaytto .faq-wrap {
  gap: clamp(34px, 5vw, 64px);
}
.usage-facts {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(49,79,73,.16);
}
.usage-fact {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px);
  padding: 24px 0;
  border-bottom: 1px solid rgba(49,79,73,.16);
}
.usage-fact dt {
  margin: 0;
  color: var(--brand-dark);
  font-size: .79rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.usage-fact dd {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}
.usage-fact dd p {
  margin: 0;
  max-width: 68ch;
}
.usage-fact-primary dd {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 500;
}
@media (max-width: 640px) {
  .usage-fact {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 21px 0;
  }
}
.contact-card .eyebrow {
  margin-bottom: 16px !important;
}
.contact-card h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem);
  line-height: .96;
  letter-spacing: -.055em;
  margin-top: 0;
  margin-bottom: 20px;
}
.contact-description {
  max-width: 62ch;
  margin: 0;
  line-height: 1.7;
}
.site-footer .footer-legal-nav {
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  width: 100%;
}
.site-footer .footer-copyright-final {
  margin: 14px 0 0;
  color: rgba(255,255,255,.56);
  font-size: .76rem;
  line-height: 1.4;
  text-align: left !important;
  margin-top: 0;
}
.hero h1 {
  margin: 0;
  max-width: 11.5ch !important;
  font-size: clamp(3.4rem, 6vw, 5.15rem) !important;
  line-height: .94 !important;
  letter-spacing: -.07em;
  text-wrap: balance;
  color: #e6c36f;
  font-weight: 500;
  text-shadow: none;
  background-image: linear-gradient(105deg,
        #b88a2f 0%, #e2bd62 18%, #fff0b2 38%,
        #c99b3f 55%, #f3d985 73%, #aa7927 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(26,46,42,.16));
  white-space: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
@media (max-width: 820px) {
  .hero h1 {
    font-size: clamp(2.8rem, 10.5vw, 4.2rem) !important;
    max-width: 10.5ch !important;
    line-height: .96 !important;
  }
}
#kaytto .usage-fact dd {
  max-width: none !important;
}
#kaytto .usage-fact dd p {
  max-width: 78ch;
}
#yhteystiedot .contact-description + .contact-link {
  display: inline-flex;
  margin-top: 18px;
  margin-left: 0 !important;
  justify-self: start;
  align-self: start;
  text-align: left;
}
.site-footer .footer-company-details > .footer-brand-marks .footer-vitabalans-logo {
  width: min(126px, 34vw);
  height: auto;
}
.site-footer .footer-company-details > .footer-brand-marks .footer-avainlippu {
  width: min(74px, 20vw);
  margin: 0;
}
.site-footer .footer-legal {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.13);
  margin-top: 0 !important;
  display: block;
  justify-items: start;
  gap: 16px;
}
#ukk .faq-wrap, #kaytto .faq-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: 1fr !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
#ukk > .container, #kaytto > .container {
  width: min(100% - 40px, var(--container, 1180px)) !important;
  margin-inline: auto !important;
}
@media (max-width: 640px) {
  #ukk > .container, #kaytto > .container {
    width: min(100% - 28px, var(--container, 1180px)) !important;
  }
}
#jalleenmyyjat.retail-section, #jalleenmyyjat {
  background: #173d38 !important;
  color: rgba(255,255,255,.86) !important;
}
#jalleenmyyjat .eyebrow {
  color: rgba(255,255,255,.72) !important;
}
#jalleenmyyjat .section-title {
  color: #ffffff !important;
}
#jalleenmyyjat .lead, #jalleenmyyjat p {
  color: rgba(255,255,255,.82) !important;
}
#jalleenmyyjat a {
  color: #ffffff !important;
}
#jalleenmyyjat::after, #jalleenmyyjat::before {
  opacity: .08;
}
.site-footer .footer-company-details > .footer-brand-marks {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px 20px;
  width: 100%;
  margin: 0 0 22px;
  column-gap: 20px;
}
#kaytto .usage-facts {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 34px !important;
}
#kaytto .usage-fact {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
  gap: clamp(18px, 2.5vw, 34px) !important;
  padding: 26px 0 !important;
}
#kaytto .usage-fact dt {
  font-size: .9rem !important;
  font-weight: 750 !important;
  letter-spacing: .055em !important;
  line-height: 1.45 !important;
  align-self: start;
  padding-top: 1px;
}
#kaytto .usage-fact dd, #kaytto .usage-fact-primary dd {
  color: var(--muted) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
}
#kaytto .usage-fact dd p, #kaytto .usage-fact-primary dd p {
  margin: 0 !important;
  font-weight: 400 !important;
}
#kaytto .faq-aftertext {
  margin-top: 34px !important;
  padding-top: 0 !important;
}
@media (max-width: 640px) {
  #kaytto .usage-facts {
    margin-top: 26px !important;
  }
  #kaytto .usage-fact {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 22px 0 !important;
  }
  #kaytto .usage-fact dt {
    font-size: .86rem !important;
  }
}
a.text-arrow-link {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--brand-dark) !important;
  font-weight: 700;
  text-decoration: none !important;
}
a.text-arrow-link .text-arrow-link-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a.text-arrow-link .text-arrow-link-arrow {
  display: inline-block;
  text-decoration: none !important;
  line-height: 1;
}
a.text-arrow-link:hover {
  background: transparent !important;
  color: var(--brand-dark) !important;
}
a.text-arrow-link:hover .text-arrow-link-label {
  text-decoration-thickness: 2px;
}
a.text-arrow-link:focus-visible {
  outline: 3px solid #111;
  outline-offset: 4px;
  border-radius: 2px;
}
.video-section a.text-arrow-link, #jalleenmyyjat a.text-arrow-link, .contact a.text-arrow-link {
  color: #fff !important;
}
@keyframes heroAtmosphere {
      0% {
        transform: translate3d(-2.5%, -1%, 0) scale(1.04);
      }
      50% {
        transform: translate3d(1.5%, 2%, 0) scale(1.075);
      }
      100% {
        transform: translate3d(3%, -1.5%, 0) scale(1.045);
      }
    }
@keyframes heroGoldShimmer {
      0%, 18% {
        background-position: 100% 50%;
      }
      52% {
        background-position: 0% 50%;
      }
      82%, 100% {
        background-position: -70% 50%;
      }
    }
@keyframes heroGoldShimmerSmooth {
      0%   { background-position:   0% 50%; }
      25%  { background-position:  70% 50%; }
      50%  { background-position: 140% 50%; }
      75%  { background-position: 210% 50%; }
      100% { background-position: 280% 50%; }
    }
@keyframes heroGoldTextShimmer {
      from { background-position: 0% 50%; }
      to   { background-position: 200% 50%; }
    }
@keyframes heroGoldFlowV77 {
      0%   { background-position: 15% 50%; }
      50%  { background-position: 85% 50%; }
      100% { background-position: 25% 50%; }
    }
#tuote .product-pack {
  display: flex !important;
  align-items: flex-start;
  justify-content: center !important;
  text-align: center;
  transform: none !important;
}
#tuote .product-pack img {
  display: block;
  margin-inline: auto !important;
  transform: none !important;
  rotate: 0deg !important;
  translate: none !important;
}
@media (max-width: 820px) {
  header {
    position: relative;
    z-index: 1000;
  }
}
#ukk .faq-accordion-panel-inner {
  padding: 0 76px 26px 26px;
  color: var(--muted);
  line-height: 1.72;
}
#ukk .faq-accordion-panel-inner::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 0 16px;
  background: rgba(212,177,93,.62);
}
#ukk .faq-accordion-panel-inner p {
  max-width: 76ch;
  margin: 0;
}
@media (max-width: 640px) {
  #ukk .faq-accordion-panel-inner {
    padding: 0 20px 22px;
  }
}
@media (max-width: 820px) {
  .hero {
    position: relative !important;
  }
  #alku .menu-toggle {
    display: block !important;
    position: fixed !important;
    z-index: 3002 !important;
    top: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 1px solid rgba(40,74,69,.95) !important;
    border-radius: 50% !important;
    background: rgba(40,74,69,.96) !important;
    box-shadow: 0 4px 18px rgba(16,46,43,.18) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  #alku .menu-toggle span {
    background: #fff !important;
  }
  #hero-menu.hero-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3001 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 88px 28px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(40,74,69,.985) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: translate3d(0,-105%,0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .3s cubic-bezier(.2,.7,.2,1),
          opacity .22s ease,
          visibility .3s ease !important;
  }
  #hero-menu.hero-nav a {
    display: block !important;
    width: 100% !important;
    padding: 17px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  #hero-menu.hero-nav a:hover, #hero-menu.hero-nav a:focus-visible {
    transform: none !important;
    background: rgba(255,255,255,.07) !important;
  }
  #hero-menu.hero-nav.is-open {
    transform: translate3d(0,0,0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.menu-open {
    overflow: hidden !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #hero-menu.hero-nav {
    transition: none !important;
  }
}
#tuote .feature-list-wide .feature-list li > span {
  font-size: clamp(2rem, 2.8vw, 2.55rem) !important;
  line-height: 1 !important;
}
#tuote .feature-list-wide .feature-list li strong, #tuote .feature-list-wide .feature-list li b {
  font-size: 1.12em !important;
  line-height: 1.3 !important;
}
.container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container, 1180px)) !important;
  margin-inline: auto !important;
}
@media (max-width: 820px) {
  :root {
    --page-gutter: clamp(20px, 5.5vw, 28px) !important;
  }
  #hero-menu.hero-nav {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }
}
@media (max-width: 420px) {
  :root {
    --page-gutter: 20px !important;
  }
}
:root {
  --brand: #386860;
  --brand-dark: #284a45;
  --brand-light: #f2f0e5;
  --ink: #171717;
  --muted: #676767;
  --paper: #f7f5e3;
  --white: #ffffff;
  --border: rgba(23, 23, 23, .12);
  --radius: 28px;
  --content: 1180px;
  --shadow: 0 24px 70px rgba(13, 65, 59, .12);
  /* Darkened from the original #d4b15d - that only reached 1.87:1
     contrast against the cream page background (--paper), well under
     WCAG AA's 3.0:1 minimum for large text. This value (used for the
     01/02/03 feature-list numbers) reaches ~3.35:1. */
  --gold: #a3803a;
  --gold-soft: #ead9a1;
  --sage: #eef3ef;
  --warm: #f7f5ed;
  --deep-green: #284a45;
  --page-gutter: clamp(24px, 3.4vw, 48px);
  --site-max: 1180px;
  --site-gutter: clamp(24px, 3.4vw, 48px);
  --section-y: clamp(72px, 8vw, 112px);
  --section-y-mobile: clamp(54px, 9vw, 76px);
}
.content-section > .section-container, .content-section > .container {
  width: min(
        calc(100% - (var(--site-gutter) * 2)),
        var(--site-max)
      ) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}
.content-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
#tuote > .container, #reducose > .container, #kaytto > .container, #videot > .container, #ukk > .container, #jalleenmyyjat > .container, #yhteystiedot > .container {
  width: min(
        calc(100% - (var(--site-gutter) * 2)),
        var(--site-max)
      ) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
.content-section .faq-wrap, .content-section .feature-list-wide, .content-section .video-grid, .content-section .contact-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.content-section, .content-section * {
  min-width: 0;
}
.content-section img, .content-section svg, .content-section video, .content-section iframe {
  max-width: 100%;
}
.feature-list-wide, .video-grid, .reducose-photo, .contact-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 820px) {
  :root {
    --site-gutter: clamp(20px, 5.5vw, 28px);
    --section-y: var(--section-y-mobile);
  }
}
@media (max-width: 420px) {
  :root {
    --site-gutter: 20px;
  }
}
.site-footer > .container, .site-footer .footer-content {
  width: min(
        calc(100% - (var(--site-gutter) * 2)),
        var(--site-max)
      ) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}
.hero .hero-nav {
  box-sizing: border-box;
}
@media (max-width: 820px) {
  #hero-menu.hero-nav {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }
}
#kaytto .usage-intro-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: clamp(38px, 6vw, 82px);
  align-items: center;
  width: 100%;
}
#kaytto .usage-intro-image {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  background: #e7ece8;
}
#kaytto .usage-intro-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
#kaytto .usage-intro-copy {
  min-width: 0;
}
#kaytto .usage-intro-copy > :first-child {
  margin-top: 0;
}
#kaytto .usage-facts-full {
  width: 100% !important;
  max-width: none !important;
  margin-top: clamp(44px, 6vw, 72px) !important;
}
#kaytto .usage-aftertext-full {
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 820px) {
  #kaytto .usage-intro-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  #kaytto .usage-intro-image {
    order: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }
  #kaytto .usage-intro-copy {
    order: 1;
  }
  #kaytto .usage-facts-full {
    margin-top: 36px !important;
  }
}
@keyframes heroGoldBrightV83 {
      0%   { background-position: 10% 50%; }
      50%  { background-position: 90% 50%; }
      100% { background-position: 20% 50%; }
    }
#ukk .faq-list {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 32px;
}
#ukk .faq-item {
  overflow: hidden;
  border: 1px solid rgba(49,79,73,.15);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}
#ukk .faq-button {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 74px;
  padding: 22px 24px 22px 26px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
#ukk .faq-button:hover {
  background: rgba(56,104,96,.035);
}
#ukk .faq-button:focus-visible {
  outline: 3px solid #111;
  outline-offset: -4px;
  border-radius: 14px;
}
#ukk .faq-label {
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}
#ukk .faq-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  justify-self: end;
  border: 1px solid rgba(49,79,73,.23);
  border-radius: 50%;
  color: var(--brand-dark);
  transition: background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
  pointer-events: none;
}
#ukk .faq-icon-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
#ukk .faq-icon-line-1 {
  transform: translate(-50%, -50%);
}
#ukk .faq-icon-line-2 {
  transform: translate(-50%, -50%) rotate(90deg);
}
#ukk .faq-panel-inner p {
  max-width: 76ch;
  margin: 0;
}
@media (max-width: 640px) {
  #ukk .faq-button {
    grid-template-columns: minmax(0,1fr) 32px;
    gap: 14px;
    min-height: 66px;
    padding: 18px 18px 18px 20px;
  }
  #ukk .faq-icon {
    width: 31px;
    height: 31px;
  }
  #ukk .faq-panel-inner {
    padding: 0 20px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ukk .faq-item, #ukk .faq-icon, #ukk .faq-icon-line {
    transition: none !important;
  }
}
#tuote .product-visual, #tuote .product-photo {
  align-self: stretch;
}
#tuote .product-visual > img, #tuote .product-photo > img {
  margin-inline: auto !important;
  transform: none !important;
}
@media (max-width: 640px) {
  #ukk .faq-panel-inner {
    padding: 18px 20px 22px !important;
  }
}
#ukk .faq-panel-inner::before {
  content: none !important;
  display: none !important;
  width: 40px;
  height: 1px;
  margin: 0 0 16px;
  background: rgba(212,177,93,.62);
}
@media (max-width: 640px) {
  #ukk .faq-panel-inner {
    padding-top: 0 !important;
  }
}
#tuote .product-visual {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#tuote .product-visual > img {
  display: block;
  margin-inline: auto !important;
}
h1, h2, h3, h4, h5, h6, .eyebrow, .section-title {
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
h1, h2, h3, h4, h5, h6 {
  white-space: normal !important;
}
.site-footer a .footer-link-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-footer a .footer-link-arrow {
  display: inline-block;
  margin-left: .38em;
  text-decoration: none !important;
}
.site-footer a:hover .footer-link-label {
  text-decoration-thickness: 2px;
}
.site-footer a.footer-arrow-link, .site-footer a:has(> .footer-link-arrow) {
  display: inline-flex !important;
  align-items: baseline;
  gap: .38em;
  width: fit-content;
  text-decoration: none !important;
}
.site-footer a.footer-arrow-link > .footer-link-label, .site-footer a:has(> .footer-link-arrow) > .footer-link-label {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}
.site-footer a.footer-arrow-link > .footer-link-arrow, .site-footer a:has(> .footer-link-arrow) > .footer-link-arrow {
  display: inline-block !important;
  margin-left: 0 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  line-height: 1;
}
.site-footer a.footer-arrow-link:hover > .footer-link-label, .site-footer a:has(> .footer-link-arrow):hover > .footer-link-label {
  text-decoration-thickness: 2px !important;
}
@media (max-width: 820px) {
  .site-footer .footer-company, .site-footer .footer-company-details {
    margin-bottom: 32px !important;
  }
  .site-footer .footer-legal-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-footer .footer-legal-nav::-webkit-scrollbar {
    display: none;
  }
  .site-footer .footer-legal-nav a, .site-footer .footer-legal-nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
#ukk .faq-panel-inner::before, #ukk .faq-panel-inner::after {
  display: none !important;
  content: none !important;
}
#ukk .faq-panel {
  height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(49,79,73,.12) !important;
}
#ukk .faq-panel-inner p, #ukk .faq-panel-inner ul, #ukk .faq-panel-inner ol {
  margin-top: 0;
}
#ukk .faq-panel-inner p + p, #ukk .faq-panel-inner p + ul, #ukk .faq-panel-inner p + ol {
  margin-top: 12px;
}
@media (max-width: 640px) {
  #ukk .faq-panel-inner {
    padding: 16px 20px 20px !important;
  }
}
@media (max-width: 820px) {
  .site-footer .footer-company, .site-footer .footer-company-details {
    margin-bottom: 10px !important;
  }
  .site-footer .footer-legal-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-footer .footer-legal-nav::-webkit-scrollbar {
    display: none;
  }
  .site-footer .footer-legal-nav a, .site-footer .footer-legal-nav button {
    flex: 0 0 auto !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
}
#ukk .faq-panel-inner {
  padding: 20px !important;
  color: var(--muted);
  line-height: 1.72;
  padding-top: 0 !important;
}
@media (max-width: 640px) {
  #ukk .faq-panel-inner {
    padding: 20px !important;
  }
}
.hero-photo-bg {
  position: relative !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  background: url("../assets/img-1-706eb31f98.webp") center center / cover no-repeat !important;
  isolation: isolate;
}
.hero-photo-bg::before, .hero-photo-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.hero-photo-bg > * {
  position: relative;
  z-index: 1;
}
.footer-photo-bg, .footer-photo-bg p, .footer-photo-bg span, .footer-photo-bg li, .footer-photo-bg .footer-copyright-final {
  color: rgba(255,255,255,.90) !important;
}
.footer-photo-bg h2, .footer-photo-bg h3, .footer-photo-bg strong, .footer-photo-bg a {
  color: #fff !important;
}
.footer-photo-bg .footer-legal-nav a {
  color: rgba(255,255,255,.62) !important;
}
.footer-photo-bg .footer-legal-nav a:hover {
  color: #fff !important;
}
.footer-photo-bg a:focus-visible, .footer-photo-bg button:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 4px !important;
}
@media (max-width: 820px) {
  .hero-photo-bg {
    background-position: 46% center !important;
  }
  .footer-photo-bg::before {
    background-position: 54% center;
  }
}
.footer-photo-bg::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 !important;
  background: url("../assets/img-1-706eb31f98.webp") center center / cover no-repeat;
  transform: rotate(180deg) !important;
  transform-origin: center;
  pointer-events: none;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.footer-photo-bg::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(16,52,48,0) 0%,
      rgba(16,52,48,0) 30%,
      rgba(16,52,48,.10) 48%,
      rgba(16,52,48,.38) 70%,
      rgba(12,43,40,.66) 100%
    ) !important;
  pointer-events: none;
}
@media (max-width: 820px) {
  .footer-photo-bg {
    min-height: 112vw !important;
    margin-top: -90px !important;
    padding-top: 190px !important;
  }
  .footer-photo-bg::before {
    background-size: auto 100% !important;
    background-position: center center !important;
  }
}
main, #yhteystiedot, #yhteystiedot > .container, #yhteystiedot > .section-container, #yhteystiedot .contact-card {
  position: relative !important;
  overflow: visible !important;
}
.footer-photo-bg::before, .footer-photo-bg::after {
  z-index: 0 !important;
}
.footer-photo-bg > * {
  position: relative !important;
  z-index: 2 !important;
}
.footer-photo-bg {
  position: relative !important;
  overflow: visible !important;
  margin-top: 0 !important;
  background: none !important;
  color: #fff !important;
  isolation: isolate;
  min-height: min(1000px, 62.5vw) !important;
  /* source artwork is 1536x960 */
  margin-top: clamp(-190px, -12vw, -90px) !important;
  padding-top: clamp(300px, 22vw, 390px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  z-index: 1 !important;
}
@media (max-width: 820px) {
  #yhteystiedot .contact-card {
    margin-bottom: -36px !important;
  }
  .footer-photo-bg {
    padding-top: 220px !important;
  }
}
#yhteystiedot, #yhteystiedot > .container, #yhteystiedot > .section-container, #yhteystiedot .contact-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 4 !important;
}
#yhteystiedot > .container, #yhteystiedot > .section-container, #yhteystiedot .contact-card {
  z-index: 4 !important;
  background: #103430 !important;
  background-color: #103430 !important;
  background-image: none !important;
  position: relative !important;
  border-radius: 22px !important;
  color: #ffffff !important;
}
#yhteystiedot .contact-card h1, #yhteystiedot .contact-card h2, #yhteystiedot .contact-card h3, #yhteystiedot .contact-card h4, #yhteystiedot .contact-card p, #yhteystiedot .contact-card li, #yhteystiedot .contact-card strong, #yhteystiedot .contact-card span, #yhteystiedot .contact-card address {
  color: #ffffff !important;
}
#yhteystiedot .contact-card a[class*="btn"], #yhteystiedot .contact-card a[class*="button"] {
  background: #f6f5e3 !important;
  background-color: #f6f5e3 !important;
  color: #103430 !important;
  border-color: #f6f5e3 !important;
}
#yhteystiedot .contact-card a[class*="btn"]:hover, #yhteystiedot .contact-card a[class*="button"]:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #103430 !important;
  border-color: #ffffff !important;
}
#yhteystiedot .contact-card {
  margin-bottom: clamp(-70px, -5vw, -38px) !important;
  overflow: hidden !important;
}
#yhteystiedot .contact-card a, #yhteystiedot .contact-card button, #yhteystiedot .contact-card input[type="button"], #yhteystiedot .contact-card input[type="submit"] {
  position: relative !important;
  z-index: 6 !important;
}
#yhteystiedot .contact-card a:not([class*="btn"]):not([class*="button"]) {
  color: #ffffff !important;
}
#yhteystiedot .contact-card a[class*="btn"], #yhteystiedot .contact-card a[class*="button"], #yhteystiedot .contact-card button, #yhteystiedot .contact-card input[type="button"], #yhteystiedot .contact-card input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
  background: #f6f5e3 !important;
  background-color: #f6f5e3 !important;
  color: #103430 !important;
  border: 2px solid #f6f5e3 !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#yhteystiedot .contact-card p > a:only-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
  background: #f6f5e3 !important;
  color: #103430 !important;
  border: 2px solid #f6f5e3 !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
}
#yhteystiedot .contact-card a[class*="btn"]:hover, #yhteystiedot .contact-card a[class*="button"]:hover, #yhteystiedot .contact-card button:hover, #yhteystiedot .contact-card p > a:only-child:hover {
  background: #ffffff !important;
  color: #103430 !important;
  border-color: #ffffff !important;
}
#yhteystiedot .contact-card .contact-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  margin-top: 22px !important;
  padding: 13px 22px !important;
  background: #4f8f5b !important;
  background-color: #4f8f5b !important;
  color: #ffffff !important;
  border: 2px solid #4f8f5b !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#yhteystiedot .contact-card .contact-link:visited {
  color: #ffffff !important;
}
#yhteystiedot .contact-card .contact-link, #yhteystiedot .contact-card .contact-link:visited {
  background: #386860 !important;
  background-color: #386860 !important;
  color: #ffffff !important;
  border: 2px solid #386860 !important;
  text-decoration: none !important;
}
#yhteystiedot .contact-card .contact-link:hover, #yhteystiedot .contact-card .contact-link:focus-visible {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #103430 !important;
  border-color: #ffffff !important;
  text-decoration: none !important;
}
#yhteystiedot .contact-card .contact-link:hover, #yhteystiedot .contact-card .contact-link:hover *, #yhteystiedot .contact-card .contact-link:focus-visible, #yhteystiedot .contact-card .contact-link:focus-visible * {
  background-color: #ffffff !important;
  color: #103430 !important;
  -webkit-text-fill-color: #103430 !important;
  border-color: #ffffff !important;
  opacity: 1 !important;
}
.hero-clean {
  position: relative !important;
  width: 100% !important;
  min-height: 100svh !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.hero-clean > .menu-toggle, .hero-clean > .hero-nav {
  position: absolute !important;
  z-index: 20 !important;
}
.hero-clean .hero-main {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.hero-clean .hero-logo, .hero-clean .hero-product, .hero-clean .hero-claim {
  min-width: 0 !important;
  justify-self: center !important;
}
.hero-brand {
  display: contents;
}
.hero-foot {
  display: none;
}
.hero-clean .hero-logo, .hero-clean .hero-product, .hero-clean .hero-product .product-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hero-clean .hero-product .product-visual {
  width: 100% !important;
  background: transparent !important;
}
.hero-clean .hero-product svg, .hero-clean .hero-product::before, .hero-clean .hero-product::after, .hero-clean .hero-product .product-visual::before, .hero-clean .hero-product .product-visual::after {
  display: none !important;
  content: none !important;
}
.hero-clean .hero-brand-claim {
  margin: 0 auto !important;
  color: #103430 !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.hero-clean .hero-brand-footnote {
  margin-left: auto !important;
  margin-right: auto !important;
  color: #103430 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-weight: 650 !important;
  line-height: 1.32 !important;
  text-align: center !important;
}
@media (max-width: 767px) {
  .hero-clean {
    padding: max(64px, env(safe-area-inset-top)) clamp(28px, 8vw, 44px)
             max(64px, env(safe-area-inset-bottom)) !important;
  }
  .hero-clean .hero-main {
    max-width: 500px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "logo" "product" "claim" !important;
    justify-items: center !important;
    align-items: center !important;
    align-content: center !important;
    row-gap: 15px !important;
  }
  .hero-clean .hero-logo {
    grid-area: logo !important;
  }
  .hero-clean .hero-product {
    grid-area: product !important;
  }
  .hero-clean .hero-claim {
    grid-area: claim !important;
    margin-top: 10px !important;
  }
  .hero-clean .hero-logo img {
    display: block !important;
    width: min(52vw, 250px) !important;
    max-height: 17svh !important;
    object-fit: contain !important;
  }
  .hero-clean .hero-product .actual-product {
    display: block !important;
    width: min(42vw, 205px) !important;
    max-width: 205px !important;
    max-height: 29svh !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
  .hero-clean .hero-brand-claim {
    max-width: 350px !important;
    font-size: clamp(15px, 4.4vw, 21px) !important;
  }
  .hero-clean .hero-brand-footnote {
    max-width: 330px !important;
    margin-top: 8px !important;
    font-size: clamp(7.2px, 1.9vw, 8.6px) !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-clean {
    padding: max(72px, env(safe-area-inset-top)) clamp(52px, 8vw, 88px)
             max(72px, env(safe-area-inset-bottom)) !important;
  }
  .hero-clean .hero-main {
    max-width: 650px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "logo" "product" "claim" !important;
    justify-items: center !important;
    align-items: center !important;
    align-content: center !important;
    row-gap: 16px !important;
  }
  .hero-clean .hero-logo {
    grid-area: logo !important;
  }
  .hero-clean .hero-product {
    grid-area: product !important;
  }
  .hero-clean .hero-claim {
    grid-area: claim !important;
    margin-top: 10px !important;
  }
  .hero-clean .hero-logo img {
    display: block !important;
    width: min(46vw, 320px) !important;
    max-height: 18svh !important;
    object-fit: contain !important;
  }
  .hero-clean .hero-product .actual-product {
    display: block !important;
    width: min(35vw, 245px) !important;
    max-width: 245px !important;
    max-height: 32svh !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
  .hero-clean .hero-brand-claim {
    max-width: 450px !important;
    font-size: clamp(18px, 3.1vw, 26px) !important;
  }
  .hero-clean .hero-brand-footnote {
    max-width: 425px !important;
    margin-top: 8px !important;
    font-size: clamp(8px, 1vw, 9.5px) !important;
  }
}
@media (min-width: 1024px) {
  .hero-clean {
    padding: 0 !important;
  }
  .hero-clean .hero-main {
    width: min(1280px, calc(100vw - 96px)) !important;
    max-width: 1280px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(340px, .88fr) minmax(560px, 1.12fr) !important;
    grid-template-areas: "product brand" !important;
    grid-template-rows: 1fr !important;
    column-gap: clamp(42px, 4vw, 76px) !important;
    align-content: center !important;
    justify-content: center !important;
    align-items: center !important;
    justify-items: center !important;
  }
  .hero-clean .hero-product {
    grid-area: product !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .hero-clean .hero-product .actual-product {
    display: block !important;
    width: min(31vw, 390px) !important;
    max-width: 390px !important;
    max-height: 66svh !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
  .hero-clean .hero-brand {
    grid-area: brand !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(46px, 5.2vw, 68px) !important;
    width: 100% !important;
  }
  .hero-clean .hero-logo {
    align-self: center !important;
    justify-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  .hero-clean .hero-logo img {
    display: block !important;
    width: min(36vw, 450px) !important;
    max-width: 450px !important;
    max-height: 26svh !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  .hero-clean .hero-claim {
    align-self: center !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-clean .hero-brand-claim {
    width: 100% !important;
    max-width: 680px !important;
    font-size: clamp(22px, 1.85vw, 33px) !important;
  }
  .hero-clean .hero-brand-footnote {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin-top: clamp(10px, 1.2vw, 16px) !important;
    font-size: clamp(9px, .72vw, 12px) !important;
  }
  .hero-clean .hero-foot {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    max-width: 1280px !important;
    flex: 0 0 auto !important;
    z-index: 5 !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    padding: 0 clamp(44px, 6vw, 96px) !important;
    margin: clamp(24px, 4vw, 48px) 0 clamp(28px, 5vw, 56px) !important;
    gap: 24px !important;
  }
  .hero-clean .hero-foot-left {
    display: flex !important;
    align-items: center !important;
    gap: clamp(20px, 2.6vw, 36px) !important;
  }
  .hero-clean .hero-foot-reducose {
    display: flex !important;
    flex: 0 0 auto !important;
  }
  .hero-clean .hero-foot-reducose-logo {
    display: block !important;
    width: clamp(118px, 9.6vw, 156px) !important;
    height: auto !important;
  }
  .hero-clean .hero-foot-right {
    display: flex !important;
    align-items: center !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
  }
  .hero-clean .hero-foot-seal {
    display: block !important;
    width: clamp(120px, 10vw, 160px) !important;
    height: auto !important;
    filter: drop-shadow(0 10px 18px rgba(7, 42, 38, .22));
  }
  .hero-clean .hero-foot-fin {
    display: block !important;
    width: clamp(62px, 5.2vw, 80px) !important;
    height: auto !important;
    filter: drop-shadow(0 6px 12px rgba(7, 42, 38, .28));
  }
  .hero-clean .hero-ingredient-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .hero-clean .hero-ingredient-list li {
    color: var(--brand-dark) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    font-size: clamp(12.5px, 1vw, 14.5px) !important;
    line-height: 1.4 !important;
    padding-bottom: 7px !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid rgba(40, 74, 69, .3) !important;
  }
  .hero-clean .hero-ingredient-list li:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
}
.curve-section .carb-copy {
  margin: 22px 0 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}
#reducose.curve-section {
  padding-top: clamp(56px, 8vw, 96px);
}
.carb-gallery-wrap {
  margin-top: 0;
  margin-bottom: clamp(56px, 8vw, 88px);
}
.carb-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 14px);
  width: 100%;
}
.carb-gallery .carb-visual {
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #f6efe0;
}
.carb-gallery .carb-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 480px) {
  .carb-gallery .carb-visual {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
  }
}
#yhteystiedot {
  z-index: 3 !important;
  background: #f6f5e3 !important;
  background-color: #f6f5e3 !important;
  background-image: none !important;
  position: relative !important;
  margin-bottom: clamp(-96px, -6vw, -48px) !important;
}
@media (max-width: 820px) {
  #yhteystiedot {
    margin-bottom: -40px !important;
  }
}

/* --------------------------------------------------------------------
   Legal pages (tietosuojaseloste.html): a plain, single-column reading
   layout that reuses the site's type/colour tokens instead of the
   marketing sections above. Kept in its own scope (.legal-*) so it
   never leaks into or is affected by the main page's rules.
   -------------------------------------------------------------------- */
/* Themed to match the REAL, visible desktop .hero-nav treatment on
   the front page (the one inside "@media (min-width:641px) { .hero-nav
   a {...} }") - not the unrelated pill/lift hover further up in that
   same file, which turns out to never actually be visible in practice
   (the hamburger-menu override wins at every width narrow enough to
   reach it). Real desktop nav links use a transparent background at
   rest and an underline (inset box-shadow) on hover, at a small,
   letter-spaced font size - matched here exactly. Background stays a
   solid brand-dark fill layered under the same gradient wash, rather
   than the hero-nav's translucent blur-over-photo effect, since this
   bar isn't sitting over a hero image. */
.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 clamp(20px, 4vw, 64px);
  background: linear-gradient(to bottom, rgba(16,46,43,.30), rgba(16,46,43,.08)), var(--brand-dark);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.legal-topbar a {
  padding: 20px 10px;
  color: #fff;
  text-decoration: none;
  font-size: clamp(.76rem, .8vw, .9rem);
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
}
.legal-topbar a:hover {
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.85);
}
.legal-topbar a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}
.legal-topbar > a:first-child {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.legal-topbar .legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Shared narrow-column "prose" block: for longer, text-only reading
   content (e.g. an article-style write-up) as opposed to the wider
   two-column .curve-grid layout. Currently used on the ammattilaisille
   page, but written generically so any future page/section can reuse
   it instead of rolling its own narrow-column article styles. */
.prose {
  width: min(calc(100% - 40px), 720px);
  margin: 0 auto;
}
/* Deliberately NOT a blanket ".prose > * + * { margin-top: X }" rule -
   that used to flatten every gap to the same 18px, which fought with
   (and overrode) the main page's own already-tuned spacing for shared
   components like .eyebrow (14px below) and .lead (28px above) -
   .prose p's extra specificity beat their single-class rules and made
   the whole block feel cramped compared to the equivalent main-page
   sections. Instead: let .eyebrow/.section-title/.lead's own margins
   do their job untouched (same as everywhere else on the site), and
   only add spacing here for the pieces that are unique to this
   layout and have no shared margin already. */
.prose h2 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  letter-spacing: -.015em;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--brand-dark);
}
/* Targets only PLAIN, unclassed paragraphs (e.g. the article-example
   body text) - anything with its own class (.eyebrow, .lead,
   .contact-description, .product-footnote...) already carries its own
   margin/color/line-height from that class and is deliberately left
   alone here, so this can never re-trigger the same specificity
   collision again as more special paragraph types get added. */
.prose p:not([class]) {
  margin: 0;
  line-height: 1.7;
}
.prose p:not([class]) + p:not([class]) {
  margin-top: 18px;
}
.prose .content-card {
  margin-top: 32px;
}
.prose > .product-footnote {
  margin-top: 24px;
}

/* Ammattilaisille pages: the footer right after the last section pulls
   itself upward with a large negative margin-top to reveal its
   background photo earlier (.footer-photo-bg, same trick used for
   #yhteystiedot on the main page). Without a higher stacking context,
   that overlap silently paints over that section's own content -
   confirmed with document.elementFromPoint() landing on the footer
   instead of the paragraph text hidden beneath it. Targets the LAST
   .content-section specifically (not just "any section after another
   section") so it works whether the page has one section (the
   password gateway) or several (the protected content page). Scoped
   to .pro-main (set on these pages' <main>) so it can never affect the
   main page, which reuses .content-section throughout too. */
.pro-main .content-section:last-of-type {
  position: relative;
  z-index: 4;
}
.pro-main .content-section + .content-section {
  padding-top: 0;
}

/* Nav link to the password-protected professional page: small padlock
   icon (currentColor, inherits the nav's white/hover styling for free)
   plus a bit of gap since this is the only nav link with an icon.
   It sits LAST in the HTML (after "Yhteystiedot") so it is also last
   in the stacked mobile menu - on desktop it's pulled to the opposite
   (left) edge purely with CSS (order + auto margin), without needing
   a different DOM position for that view.

   IMPORTANT: the real hamburger/full-screen-overlay menu is active up
   to 820px wide (see "#hero-menu.hero-nav" and "#alku .menu-toggle"
   above, both scoped to max-width:820px) - NOT 640px. The rules below
   must use the same 820px boundary, or there's a gap between 641-820px
   where the "desktop" rules (order:-1 etc.) would wrongly apply while
   the nav is still the stacked mobile overlay. */
.nav-lock-link {
  gap: 6px;
}
.nav-lock-icon {
  flex: 0 0 auto;
  display: block;
}
@media (min-width: 821px) {
  /* Visually move it to the front of the row and push it to the far
     left; the other links stay grouped together on the right via the
     nav's own justify-content:flex-end. order/margin only affect
     visual position, not the underlying (mobile-relevant) DOM order. */
  .nav-lock-link {
    order: -1;
    margin-right: auto;
  }
}
@media (max-width: 820px) {
  /* The mobile nav forces every link to display:block for the
     stacked layout - restore flex just for this link so the icon
     and label stay on one line instead of wrapping. */
  #hero-menu.hero-nav a.nav-lock-link {
    display: flex !important;
    align-items: center !important;
  }
  /* #hero-menu.hero-nav is a fixed, full-screen flex column (see
     above), so margin-top:auto pins this link to the very bottom of
     the screen instead of just trailing the list - a much clearer,
     screen-anchored separation than extra spacing alone could give. */
  .hero-nav a.nav-lock-link {
    margin-top: auto !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
    padding-top: 17px !important;
  }
}