/*
Theme Name: Soda Dogs
Theme URI: https://sodadogs.fi
Author: Soda Dogs
Author URI: https://sodadogs.fi
Description: Brändätyt juomat omalla etiketillä — Soda Dogs -markkinointisivun WordPress-teema. Sisältää suomenkielisen yksisivuisen etusivun graafikon vedoksen mukaisesti, sekä laajennettavat sivu-, sisältö- ja sivupalkkipohjat.
Version: 2.1.26
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sodadogs
Tags: one-page, business, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* =========================================================
   SODA DOGS — design tokens
   Fonts: Space Grotesk Medium (headings) / Light (body)
   Colors:
     red     #ff2b2b   (primary / CTAs)
     blue    #0000ff
     orange  #ff9d00
     purple  #d438ff
     brown   #cf7706   (lager)
     text    #0f0f0f
     bg      #fafafa
   ========================================================= */

:root {
  --sd-bg: #fafafa;
  --sd-text: #0f0f0f;
  --sd-red: #ff2b2b;
  --sd-blue: #0000ff;
  --sd-orange: #ff9d00;
  --sd-purple: #d438ff;
  --sd-brown: #cf7706;
  --sd-white: #ffffff;
  --sd-muted: #ececec;
  --sd-border: #e5e5e5;
  --sd-radius: 14px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
a { color: inherit; }

/* ---------- Base typography ---------- */
body {
  background: var(--sd-bg);
  color: var(--sd-text);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;       /* Light for body */
  font-size: 21px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .sd-heading {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;       /* Medium for headings */
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--sd-text);
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout ---------- */
.sd-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) {
  .sd-container { padding: 0 2rem; }
}

/* ---------- Buttons ---------- */
.sd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
  line-height: 1;
}
.sd-pill:hover { transform: translateY(-1px); filter: brightness(0.92); }
.sd-pill--red    { background: var(--sd-red); }
.sd-pill--blue   { background: var(--sd-blue); }
.sd-pill--orange { background: var(--sd-orange); color: var(--sd-text); }
.sd-pill--purple { background: var(--sd-purple); }
.sd-pill--brown  { background: var(--sd-brown); }

.sd-info {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--sd-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--sd-text);
  background: transparent;
  margin-left: 12px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.sd-info:hover { background: var(--sd-text); color: #fff; }

/* ---------- Eyebrow & general bits ---------- */
.sd-eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-red);
}
.sd-text-center { text-align: center; }

/* ---------- Header ---------- */
.sd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0 1rem;
}
.sd-header__logo img { height: 40px; width: auto; }

/* ---------- Hero ---------- */
.sd-hero {
  padding: 1.5rem 0 3rem;
}
.sd-hero__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 768px) {
  .sd-hero__top { grid-template-columns: 1fr 1fr; }
}
.sd-hero__title {
  font-size: 2.4rem;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .sd-hero__title { font-size: 3.2rem; }
}
.sd-hero__controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .sd-hero__controls { align-items: flex-end; padding-top: 0.5rem; }
}
.sd-hero__nums { display: flex; gap: 0.75rem; }
.sd-numpill {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1.5px solid var(--sd-red);
  color: var(--sd-red);
  font-weight: 500;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.sd-numpill[aria-pressed="true"],
.sd-numpill:hover { background: var(--sd-red); color: #fff; }

/* Card grids */
.sd-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .sd-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.sd-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 4rem;
}
@media (min-width: 768px) {
  .sd-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.sd-card {
  background: var(--sd-muted);
  border-radius: var(--sd-radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.sd-card--tall { aspect-ratio: 4 / 5; }
.sd-card img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Wave dividers ---------- */
.sd-wave { display: block; width: 100%; height: 60px; }
@media (min-width: 768px) { .sd-wave { height: 90px; } }
/* New SVG wave images (full-width, fixed height, no repeat) */
.sd-wave--img {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: cover;
  object-position: center top;
}
@media (min-width: 768px) { .sd-wave--img { height: 90px; } }
/* Flip wave vertically for bottom edge */
.sd-wave--flip { transform: scaleY(-1); }

/* ---------- Color band sections ---------- */
.sd-band-red   { background: var(--sd-red);   color: #fff; }
.sd-band-blue  { background: var(--sd-blue);  color: #fff; }
.sd-band-red h2,
.sd-band-blue h2 { color: #fff; }

/* Customer logos row */
.sd-customers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.sd-customer {
  width: 78px; height: 78px;
  border-radius: 999px;
  background: #fff;
  color: var(--sd-red);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  line-height: 1.1;
  overflow: hidden;
}

/* ---------- Mascot intro ---------- */
.sd-intro {
  text-align: center;
  padding: 0.5rem 0 3.5rem;
}
.sd-intro__mascot {
  width: 130px;
  height: auto;
  margin: -3rem auto 1.5rem;
  position: relative;
  z-index: 2;
}
.sd-intro__title {
  font-size: 1.9rem;
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sd-intro__title { font-size: 2.5rem; }
}

/* USP grid */
.sd-usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 920px;
  margin: 1.5rem auto 0;
}
@media (min-width: 768px) {
  .sd-usp-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.sd-usp { text-align: center; }
.sd-usp img { height: 36px; width: auto; margin: 0 auto; }
.sd-usp h3 { font-size: 1.15rem; margin-top: 0.75rem; }
.sd-usp p  { margin-top: 0.5rem; font-size: 0.95rem; color: #333; }

/* ---------- Product rows ---------- */
.sd-products { padding-bottom: 4rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .sd-products { gap: 3.5rem; padding-bottom: 6rem; } }

.sd-product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .sd-product { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.sd-product__title {
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .sd-product__title { font-size: 2rem; }
}
.sd-product__body { margin-top: 1rem; max-width: 420px; color: #222; }
.sd-product__cta { margin-top: 1.5rem; display: flex; align-items: center; }

/* Color modifiers for headings */
.sd-color-blue   { color: var(--sd-blue); }
.sd-color-orange { color: var(--sd-orange); }
.sd-color-purple { color: var(--sd-purple); }
.sd-color-red    { color: var(--sd-red); }
.sd-color-brown  { color: var(--sd-brown); }

/* ---------- Blue wave section (“Miten tilaan?”) ---------- */
.sd-blue-wave-section {
  position: relative;
  width: 100%;
  margin: 2rem 0;
  /* Tuned ratio so the band sits at roughly the same height as the dog head. */
  aspect-ratio: 1000 / 180;
  max-height: 280px;
}
.sd-blue-wave-section__bg {
  display: block;
  width: 100%;
  height: 100%;
  /* Use cover so the wave fills the section nicely without distortion. */
  object-fit: cover;
}
.sd-blue-wave-section__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
  z-index: 2;
}
/* Mascot head overflows the wave on top and bottom for visual punch */
.sd-blue-wave-section__mascot {
  width: 130px;
  height: auto;
  flex-shrink: 0;
  z-index: 3;
  margin-top: -30px;
  margin-bottom: -30px;
}
.sd-blue-wave-section__title {
  color: #fff;
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: -0.01em;
}
@media (min-width: 600px) {
  .sd-blue-wave-section { margin: 3rem 0; }
  .sd-blue-wave-section__mascot { width: 240px; margin-top: -30px; margin-bottom: -30px; }
  .sd-blue-wave-section__title { font-size: 2.6rem; }
  .sd-blue-wave-section__content { gap: 2rem; }
}
@media (min-width: 1024px) {
  .sd-blue-wave-section__mascot { width: 340px; margin-top: -40px; margin-bottom: -40px; }
  .sd-blue-wave-section__title { font-size: 3.4rem; }
  .sd-blue-wave-section__content { gap: 2.5rem; }
}

/* Force Raparperi-mustikkalimu pill to purple even if cached as red */
.sd-products .sd-pill--purple { background: var(--sd-purple) !important; color: #fff; }

/* Bigger eyebrow inside intro section ("MIKSI VALITA MEIDÄT?") */
.sd-intro .sd-eyebrow { font-size: 1.15rem; letter-spacing: 0.08em; }
@media (min-width: 768px) { .sd-intro .sd-eyebrow { font-size: 1.4rem; letter-spacing: 0.1em; } }

/* ---------- Process steps ---------- */
.sd-process {
  max-width: 480px; /* narrower per design PDF */
  margin: 0 auto;
  text-align: center;
  padding: 3rem 1rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) { .sd-process { padding: 4rem 0; max-width: 520px; } }
.sd-step img { height: 36px; width: auto; margin: 0 auto; display: block; }
.sd-step h3 { font-size: 1.4rem; margin-top: 0; }
@media (min-width: 768px) { .sd-step h3 { font-size: 1.6rem; } }
.sd-step p { margin-top: 0.75rem; color: #333; }
/* Step icon shown above the title for steps 2–4 — generous spacing both sides */
.sd-step__icon { margin: 1rem auto 2rem !important; height: 44px !important; }
@media (min-width: 768px) {
  .sd-step__icon { margin: 1.25rem auto 2.5rem !important; height: 48px !important; }
}
.sd-process__cta { display: flex; justify-content: center; }

/* ---------- Promo card ---------- */
.sd-promo {
  background: var(--sd-muted);
  border-left: 6px solid var(--sd-blue);
  border-radius: 18px;
  padding: 2.5rem 2rem 2.5rem 2.5rem;
  max-width: 820px;
  margin: 0 auto 4rem;
}
.sd-promo h3 {
  color: var(--sd-blue);
  font-size: 1.5rem;
}
@media (min-width: 768px) { .sd-promo h3 { font-size: 1.9rem; } }
.sd-promo p { margin-top: 0.75rem; color: var(--sd-text); }

/* ---------- FAQ ---------- */
.sd-faq {
  max-width: 760px;
  margin: 2rem auto 0;
}
.sd-faq h2 {
  text-align: center;
  color: var(--sd-red);
  font-size: 2rem;
}
@media (min-width: 768px) {
  .sd-faq h2 { font-size: 2.5rem; }
}
.sd-faq__list { margin-top: 2rem; }
.sd-faq__item {
  border-bottom: 1px solid #e0e0e0;
  padding: 1.25rem 0.5rem;
}
.sd-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.sd-faq__summary::-webkit-details-marker { display: none; }
.sd-faq__summary:hover { color: var(--sd-red); }
.sd-faq__summary .sd-plus { color: var(--sd-red); font-size: 1.5rem; }
.sd-faq__answer { margin-top: 0.75rem; font-size: 1rem; color: #444; }

/* ---------- Contacts ---------- */
.sd-contacts {
  padding-bottom: 4rem;
}
.sd-contacts h2 {
  text-align: center;
  color: var(--sd-red);
  font-size: 2rem;
}
@media (min-width: 768px) { .sd-contacts h2 { font-size: 2.5rem; } }
.sd-contacts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 860px;
  margin: 2rem auto 0;
}
@media (min-width: 768px) {
  .sd-contacts__grid { grid-template-columns: repeat(4, 1fr); }
}
.sd-contact { text-align: center; }
.sd-contact__avatar {
  width: 84px; height: 84px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--sd-red);
  margin: 0 auto;
  overflow: hidden;
}
.sd-contact__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-contact__name { margin-top: 0.75rem; font-weight: 500; }
.sd-contact__title,
.sd-contact__email,
.sd-contact__phone { font-size: 0.95rem; color: #444; }
.sd-contacts__cta { display: flex; justify-content: center; margin-top: 2.5rem; }
.sd-contacts__mascot {
  width: 280px; margin: 2.5rem auto 0;
}
@media (min-width: 768px) {
  .sd-contacts__mascot { width: 360px; }
}

/* ---------- Footer ---------- */
.sd-footer {
  background: var(--sd-red);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.sd-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 768px) {
  .sd-footer__top { grid-template-columns: 1fr 1fr; }
}
.sd-footer__nav a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
  font-size: 1.4rem;
}
.sd-footer__nav li { padding: 0.25rem 0; }
.sd-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .sd-footer__contact { align-items: flex-end; }
}
.sd-footer__social { display: flex; gap: 1rem; }
.sd-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sd-footer__social img {
  width: 28px; height: 28px;
  filter: brightness(0) invert(1); /* white */
}
.sd-footer__big {
  font-size: 1.4rem;
  font-weight: 500;
}
.sd-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
  text-align: center;
}
.sd-footer__brand img {
  width: 280px;
  filter: brightness(0) invert(1);
}
.sd-footer__brand p { margin-top: 1rem; font-size: 1.4rem; font-weight: 500; }
.sd-footer__legal {
  margin-top: 2rem;
  font-size: 0.95rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}
.sd-footer__legal a { color: #fff; text-decoration: underline; }

/* ---------- Scroll-in fade (handled by JS) ---------- */
.sd-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.sd-fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- WordPress utility classes ---------- */
.alignleft   { float: left; margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0;
  overflow: hidden; position: absolute; word-wrap: normal !important;
}
.sd-skip-link {
  position: absolute; left: -9999px;
  background: #fff; color: #000;
  padding: 0.75rem 1rem;
}
.sd-skip-link:focus { left: 1rem; top: 1rem; z-index: 999; }

/* ---------- Generic single/page content (for pages other than front) ---------- */
.sd-page {
  padding: 3rem 0 5rem;
}
.sd-page h1 { font-size: 2.5rem; margin-bottom: 1.5rem; }
.sd-page h2 { font-size: 1.8rem; margin: 2rem 0 1rem; }
.sd-page p  { margin-bottom: 1rem; }
.sd-page a  { color: var(--sd-blue); text-decoration: underline; }


/* ===================================================================
   LEAD FORM — modaali (yhteydenottolomake, 4 vaihetta)
   ================================================================ */
.lf-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(15,15,15,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
  animation: lfFade .15s ease-out;
}
@keyframes lfFade { from { opacity:0; } to { opacity:1; } }
.lf-modal {
  position: relative;
  width: 100%; max-width: 640px;
  background: var(--sd-bg);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(15,15,15,0.30);
  padding: 24px 24px 28px;
  animation: lfPop .25s cubic-bezier(.2,.8,.2,1.2);
}
@keyframes lfPop { from { transform: translateY(8px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.lf-close {
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border:0; background:#fff; border-radius:50%;
  font-size:22px; line-height:1; cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.lf-stepper {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  border-bottom:1px solid var(--sd-border);
  padding: 8px 36px 16px 4px; margin-bottom: 18px;
}
.lf-step { display:flex; align-items:center; gap:8px; font-weight:500; font-size:13px; color:#999; }
.lf-step.is-done { color: var(--sd-text); }
.lf-step-num { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:500; }
.lf-step-label { letter-spacing:.01em; }
@media (max-width: 520px) { .lf-step-label { display:none; } }

.lf-card { padding: 0 4px; }
.lf-card h2 { font-weight:500; font-size: clamp(1.4rem,3vw,1.9rem); margin: 4px 0 6px; line-height:1.15; letter-spacing:-.01em; }
.lf-eyebrow { font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; margin: 0 0 6px; }
.lf-sub { color:#444; margin: 0 0 18px; }
.lf-back { background:none; border:0; cursor:pointer; color:#666; font-size:13px; margin-bottom:10px; padding:0; }
.lf-back-btn { background:#fff; border:1px solid var(--sd-border); border-radius: 999px; padding: 10px 18px; cursor:pointer; font-size:14px; }

.lf-label { display:block; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin: 14px 0 6px; }
.lf-req { color: var(--sd-red); }
.lf-opt { color:#999; font-weight:300; text-transform:none; letter-spacing:0; font-size:11px; }
.lf-input {
  width:100%; border:1px solid var(--sd-border); background:#fff;
  border-radius: 12px; padding: 12px 14px; font: inherit; outline:none;
  transition: border-color .15s, box-shadow .15s;
}
.lf-input:focus { border-color: var(--sd-text); box-shadow: 0 0 0 3px rgba(15,15,15,.08); }
.lf-input.is-error { border-color: var(--sd-red); box-shadow: 0 0 0 3px rgba(255,43,43,.12); }
.lf-textarea { min-height: 96px; resize: vertical; }
.lf-err { color: var(--sd-red); font-size:12px; margin: 4px 0 0; }
.lf-micro { color:#777; font-size:12px; margin: 6px 0 0; }
.lf-or { text-align:center; color:#aaa; font-size:12px; margin: 18px 0 8px; letter-spacing:.1em; }

.lf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lf-chip {
  background:#fff; border:1px solid var(--sd-border); border-radius:999px;
  padding: 8px 14px; font-size:14px; cursor:pointer;
  transition: all .15s;
}
.lf-chip:hover { border-color: var(--sd-text); }
.lf-chip.is-active { background: var(--sd-blue); border-color: var(--sd-blue); color:#fff; }

.lf-tip {
  background:#fff; border:1px solid var(--sd-border); border-left: 3px solid var(--sd-orange);
  padding: 10px 12px; border-radius: 8px; font-size:13px; color:#444; margin-top:18px;
}
.lf-tip--blue { border-left-color: var(--sd-blue); }

.lf-upload {
  border: 2px dashed var(--sd-border); border-radius: 14px;
  padding: 22px; text-align:center; cursor:pointer; background:#fff;
  transition: border-color .15s, background .15s;
}
.lf-upload:hover { border-color: var(--sd-text); background:#fff; }
.lf-upload-icon {
  display:inline-grid; place-items:center; width:36px; height:36px;
  border-radius:50%; background: var(--sd-orange); color:#fff; font-weight:500; margin-bottom:6px;
}
.lf-upload p { margin: 4px 0 2px; }
.lf-upload small { color:#777; }

.lf-actions {
  display:flex; justify-content:space-between; align-items:center;
  gap: 10px; margin-top: 22px;
}
.lf-actions > * + * { flex-shrink: 0; }
.lf-actions span:empty { display:inline-block; min-width: 1px; }

.sd-pill {
  background: var(--sd-red); color:#fff; border:0; padding: 12px 22px;
  border-radius: 999px; font: inherit; font-weight:500; cursor:pointer;
  transition: transform .12s, box-shadow .12s, background .15s;
  box-shadow: 0 4px 14px rgba(255,43,43,.25);
}
.sd-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,43,43,.32); }
.sd-pill[disabled] { opacity:.6; cursor:not-allowed; }
.sd-pill--blue   { background: var(--sd-blue);   box-shadow: 0 4px 14px rgba(0,0,255,.25); }
.sd-pill--orange { background: var(--sd-orange); box-shadow: 0 4px 14px rgba(255,157,0,.25); }
.sd-pill--brown  { background: var(--sd-brown);  box-shadow: 0 4px 14px rgba(207,119,6,.25); }

.lf-cal {
  width: 100%; min-height: 600px; margin-top: 8px;
  border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--sd-border);
}
.lf-cal iframe {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 600px;
  border: none;
  border-radius: 14px;
}
.lf-thanks { text-align:center; padding: 8px 4px 4px; }
.lf-thanks h2 { font-size: clamp(1.6rem,3.5vw,2.2rem); }


/* ===================================================================
   LEAD FORM — UX-parannukset (spinner, toast, alert, skeleton)
   ================================================================ */

/* Submit button: align spinner + label */
.lf-submit {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; min-width: 11rem;
}
.lf-submit:disabled { cursor: progress; opacity: 0.85; }

/* Spinner */
.lf-spinner {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  animation: lfSpin 0.7s linear infinite;
  display: inline-block; flex-shrink: 0;
}
.lf-spinner--lg {
  width: 2.25rem; height: 2.25rem; border-width: 3px;
  border-color: rgba(15,15,15,0.12);
  border-top-color: var(--sd-red);
}
@keyframes lfSpin { to { transform: rotate(360deg); } }

/* Loading overlay over the busy card */
.lf-card.is-busy { position: relative; }
.lf-card.is-busy > *:not(.lf-loading-overlay) { pointer-events: none; user-select: none; }
.lf-loading-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(250, 250, 250, 0.82);
  backdrop-filter: blur(2px);
  border-radius: 28px; z-index: 5;
  animation: lfFadeIn 0.18s ease-out;
}
.lf-loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  text-align: center; padding: 1.5rem 1.75rem; background: #fff;
  border-radius: 18px; box-shadow: 0 12px 40px rgba(15,15,15,0.12); max-width: 320px;
}
.lf-loading-title { font-weight: 500; font-size: 1rem; margin: 0; color: var(--sd-text); }
.lf-loading-sub   { margin: 0; font-size: 0.85rem; color: #666; }
@keyframes lfFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Structured error alert with retry */
.lf-alert {
  display: flex; align-items: flex-start; gap: 0.75rem;
  border-radius: 14px; padding: 0.875rem 1rem;
  margin: 1rem 0 0; border: 1px solid;
  animation: lfShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
.lf-alert--error { background: #fff5f5; border-color: rgba(255,43,43,0.35); color: #5a0c0c; }
.lf-alert-icon {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--sd-red); color: #fff;
  font-weight: 600; display: grid; place-items: center;
  font-size: 0.9rem; margin-top: 0.1rem;
}
.lf-alert-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; line-height: 1.45; }
.lf-alert-body strong { font-weight: 500; color: #2b0202; }
.lf-alert-retry {
  flex-shrink: 0; background: #fff;
  border: 1.5px solid var(--sd-red); color: var(--sd-red);
  border-radius: 999px; padding: 0.4rem 0.9rem;
  font: inherit; font-weight: 500; font-size: 0.85rem; cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.lf-alert-retry:hover:not(:disabled) {
  background: var(--sd-red); color: #fff; transform: translateY(-1px);
}
.lf-alert-retry:disabled { opacity: 0.5; cursor: not-allowed; }
@keyframes lfShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Success toast (top of modal) */
.lf-toast {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.1rem; border-radius: 999px;
  background: #0f0f0f; color: #fff;
  font-size: 0.9rem; font-weight: 400;
  box-shadow: 0 8px 24px rgba(15,15,15,0.25);
  z-index: 10; animation: lfToastIn 0.35s cubic-bezier(.2,.8,.2,1.2) both;
}
.lf-toast-icon {
  display: grid; place-items: center;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: #2bd47a; color: #fff;
  font-size: 0.7rem; font-weight: 700;
}
@keyframes lfToastIn {
  from { transform: translate(-50%, -10px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

/* Cal.com loader / skeleton (Step 4) */
.lf-cal-wrap { position: relative; min-height: 600px; }
.lf-cal-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; background: #fff;
  border-radius: 14px; border: 1px solid var(--sd-border);
  text-align: center; padding: 1.5rem;
}
.lf-skeleton-row {
  display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem;
  width: min(360px, 80%);
}
.lf-skeleton {
  height: 0.75rem; border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(15,15,15,0.06) 0%,
    rgba(15,15,15,0.12) 50%,
    rgba(15,15,15,0.06) 100%);
  background-size: 200% 100%;
  animation: lfShimmer 1.4s linear infinite;
}
@keyframes lfShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lf-spinner, .lf-skeleton, .lf-alert, .lf-toast, .lf-loading-overlay {
    animation: none !important;
  }
  .lf-spinner { border-top-color: var(--sd-red); }
}


/* ===================================================================
   HERO — AI-tarjousteksti CTA:n alla
   ================================================================ */
.sd-hero-offer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.65rem 0 0;
  max-width: 22rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #2c2c2c;
  text-align: left;
}
.sd-hero-offer__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(95deg, var(--sd-purple) 0%, var(--sd-blue) 100%);
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .sd-hero-offer { text-align: right; justify-content: flex-end; }
}


/* =============================================================
   v1.3.0 — animated hero carousel, logo marquee, team grid,
            product extras, GDPR consent. AI badge removed.
   ============================================================= */

/* AI badge intentionally hidden (kept in markup for back-compat). */
.sd-hero-offer__badge { display: none !important; }
.sd-hero-offer { font-size: 0.95rem; max-width: 22rem; }

/* Hero carousel */
.sd-hero-carousel { position: relative; margin-top: 2.5rem; }
.sd-hero-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.sd-hero-slide {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}
@media (min-width: 768px) {
  .sd-hero-slide { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.sd-hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1;
}
.sd-hero-slide.is-active .sd-card { animation: sdHeroIn 700ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes sdHeroIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.sd-hero-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.sd-dot {
  appearance: none;
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 1.5px solid var(--sd-red);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: width .25s ease, background .2s ease, transform .2s ease;
}
.sd-dot:hover { transform: scale(1.15); }
.sd-dot.is-active {
  width: 26px;
  background: var(--sd-red);
}

/* Logo marquee */
.sd-logo-marquee {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.sd-logo-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: sdMarquee 40s linear infinite;
}
.sd-logo-marquee:hover .sd-logo-track,
.sd-logo-marquee:focus-within .sd-logo-track { animation-play-state: paused; }
.sd-logo-slot {
  flex: 0 0 auto;
  width: 160px;
  height: 90px;
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--sd-red);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  border: 2px dashed rgba(255,43,43,0.25);
  transition: transform .25s ease;
}
.sd-logo-slot:hover { transform: translateY(-2px); }
.sd-logo-placeholder { opacity: 0.55; text-transform: uppercase; }
@keyframes sdMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-logo-track { animation: none; }
  .sd-hero-slide { transition: opacity 200ms; }
  .sd-hero-slide.is-active .sd-card { animation: none; }
}

/* Hide the legacy customer pills if still rendered */
.sd-customers { display: none !important; }

/* Product info expandable placeholder */
.sd-product-extra {
  margin-top: 1rem;
  border-left: 3px solid var(--sd-red);
  padding: 0.65rem 0.9rem;
  background: rgba(15,15,15,0.03);
  border-radius: 0 10px 10px 0;
  animation: sdHeroIn 250ms ease both;
}
.sd-product-extra__placeholder {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #444;
}
.sd-product-extra__placeholder em {
  font-style: normal;
  font-weight: 500;
  color: var(--sd-text);
}

/* Team grid (3 centered cards) */
.sd-contacts__grid { display: none !important; }
.sd-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 880px;
  margin: 2.5rem auto 0;
}
@media (min-width: 720px) {
  .sd-team-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.sd-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem 1.5rem;
}
.sd-team-photo {
  width: 168px; height: 168px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid var(--sd-red);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,15,15,0.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sd-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-team-card:hover .sd-team-photo { transform: translateY(-4px) scale(1.02); }
.sd-team-name { margin: 1rem 0 0.15rem; font-size: 1.2rem; font-weight: 500; color: var(--sd-text); }
.sd-team-title { margin: 0 0 0.6rem; font-size: 0.95rem; color: #555; }
.sd-team-link {
  display: block;
  font-size: 0.95rem;
  color: var(--sd-text);
  text-decoration: none;
  margin-top: 0.15rem;
  transition: color .15s ease;
}
.sd-team-link:hover { color: var(--sd-red); text-decoration: underline; }

/* GDPR consent (lead form, step 2) */
.lf-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.75rem 0 0;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #e6e6e6;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--sd-text);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.lf-consent:hover { border-color: var(--sd-text); }
.lf-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--sd-red);
  cursor: pointer;
}
.lf-consent input[aria-invalid="true"] { outline: 2px solid var(--sd-red); border-radius: 4px; }
.lf-consent .lf-required { color: var(--sd-red); font-weight: 500; margin-left: 0.15rem; }
.lf-err.lf-err--inline { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--sd-red); }


/* ==============================================================
   v1.4.0 — Hero refresh + mobile product/process refinements
   Overrides earlier definitions intentionally.
   ============================================================== */

/* ---------- Hero: keskitetty, isompi otsikko, alaspäin tuotu CTA ---------- */
.sd-hero { padding: 1.5rem 0 3rem; }
.sd-hero__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}
@media (min-width: 768px) {
  .sd-hero__top { grid-template-columns: none; }
}
.sd-eyebrow.sd-eyebrow--lg,
.sd-hero__top .sd-eyebrow {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .sd-hero__top .sd-eyebrow { font-size: 1.15rem; margin-bottom: 1.75rem; }
}
.sd-hero__title {
  font-size: clamp(2.6rem, 7.5vw, 5.25rem);
  line-height: 1;
  margin: 0 0 2.25rem;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .sd-hero__title { font-size: clamp(3.4rem, 6.5vw, 5.25rem); }
}
.sd-hero__top .sd-hero__controls,
.sd-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.5rem;
  padding-top: 0;
}
.sd-hero__top .sd-hero-offer {
  max-width: 480px;
  text-align: center;
  margin: 0;
}

/* Bigger Suunnittele */
.sd-hero__top .sd-pill--red {
  padding: 1.05rem 2.6rem;
  font-size: 1.25rem;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(255, 43, 43, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.sd-hero__top .sd-pill--red:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(255, 43, 43, 0.34);
}

/* ---------- Tuoterivit: mobiilissa kuva otsikon yläpuolelle ---------- */
.sd-product-row { gap: 1rem; }

@media (max-width: 767px) {
  .sd-product-row {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .sd-product-row .sd-product-img {
    order: -1;
    max-width: 55%;          /* mobiilissa kuva ~50 % pienempi */
    margin-left: auto;
    margin-right: auto;
  }
  .sd-product-copy { display: flex; flex-direction: column; align-items: center; }
  .sd-product__body { margin-left: auto; margin-right: auto; }
  .sd-product__cta { justify-content: center; }
}

/* Desktop: salli vasemman/oikean vaihtelu image_left-perusteella */
@media (min-width: 768px) {
  .sd-product--img-right .sd-product-img { order: 2; }
  .sd-product--img-right .sd-product-copy { order: 1; }
}

/* ---------- Prosessi: referenssikuvat 3-sarakkeisina myös mobiilissa ---------- */
.sd-process-refs {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 3rem;
}
@media (min-width: 640px) { .sd-process-refs { gap: 0.75rem; } }
@media (min-width: 768px) { .sd-process-refs { gap: 1.25rem; margin-top: 4rem; } }

/* ---------- Tuoteinfo (i-painikkeen takana) paneeli ---------- */
.sd-product-extra {
  margin-top: 1.1rem;
  padding: 1.25rem 1.4rem;
  border-radius: 18px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.65);
  text-align: left;
}
.sd-product-extra h4 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.sd-product-extra__lead { margin: 0 0 0.85rem; color: var(--sd-text); }
.sd-product-extra__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1rem;
  margin: 0 0 0.85rem;
}
.sd-product-extra__grid > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(15, 15, 15, 0.18);
  padding: 0.25rem 0;
  font-size: 0.92rem;
}
.sd-product-extra__grid dt { color: rgba(15, 15, 15, 0.65); margin: 0; }
.sd-product-extra__grid dd { margin: 0; font-weight: 500; color: var(--sd-text); }
.sd-product-extra p { margin: 0 0 0.6rem; }
.sd-product-extra__small { font-size: 0.85rem; color: rgba(15, 15, 15, 0.7); }
.sd-product-extra__warn {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: rgba(255, 43, 43, 0.08);
  color: var(--sd-red);
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .sd-product-extra__grid { grid-template-columns: 1fr; }
}


/* =============================================================
   v1.5.0 — Sticky scroll-up header, mobile process refs, product nutrition table
   ============================================================= */

/* Sticky scroll-up header */
.sd-stickyhdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  transition: transform .28s ease, background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  will-change: transform;
}
.sd-stickyhdr__inner {
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-stickyhdr.is-top {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sd-stickyhdr.is-scrolled {
  background: rgba(250, 250, 250, 0.84);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 6px 28px -18px rgba(15,15,15,0.45);
  border-bottom: 1px solid rgba(15,15,15,0.06);
}
.sd-stickyhdr.is-scrolled .sd-stickyhdr__inner {
  padding-top: .8rem;
  padding-bottom: .7rem;
}
.sd-stickyhdr.is-hidden  { transform: translateY(-115%); }
.sd-stickyhdr.is-visible { transform: translateY(0); }
.sd-stickyhdr__spacer { height: 80px; }
@media (min-width: 768px) {
  .sd-stickyhdr__spacer { height: 92px; }
}
/* Sticky-headerin sisällä piilotetaan vanha .sd-header-padding */
.sd-stickyhdr.sd-header { padding: 0; }

/* Process-refs: full-width single row, all 3 cards always visible */
.sd-process-refs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 4rem;
  width: 100%;
}
@media (min-width: 768px) {
  .sd-process-refs { gap: 1.5rem; }
}
.sd-process-refs__card--hide-mobile { display: block !important; }
/* Reference cards: fully transparent background, no rounded card box */
.sd-process-refs .sd-card--ref,
.sd-card.sd-card--ref {
  background: transparent !important;
  background-color: transparent !important;
  aspect-ratio: 3 / 4;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.sd-process-refs .sd-card--ref img,
.sd-card.sd-card--ref img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Tuoteinfo: ravintoarvotaulukko */
.sd-product-extra__nutri {
  margin-top: 1rem;
  padding: 1rem 1.1rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(15,15,15,0.08);
  border-radius: 14px;
}
.sd-product-extra__nutri-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #0f0f0f;
  margin: 0 0 .55rem;
  text-transform: uppercase;
}
.sd-product-extra__nutri-title span {
  font-weight: 300;
  color: #6b6b6b;
  text-transform: none;
  letter-spacing: 0;
}
.sd-product-extra__nutri-list {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.sd-product-extra__nutri-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .42rem 0;
  border-bottom: 1px dashed rgba(15,15,15,0.10);
  font-size: 0.92rem;
}
.sd-product-extra__nutri-row:last-child { border-bottom: none; }
.sd-product-extra__nutri-row dt {
  font-weight: 300;
  color: #1a1a1a;
}
.sd-product-extra__nutri-fi { font-weight: 500; }
.sd-product-extra__nutri-sv { color: #7a7a7a; }
.sd-product-extra__nutri-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #0f0f0f;
  white-space: nowrap;
}
.sd-product-extra__sv {
  color: #555;
  font-size: 0.92rem;
  margin-top: -0.4rem;
}


/* Header nav layout (sticky-yhteensopiva) */
.sd-header__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sd-header__menu {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 1rem;
}
@media (min-width: 768px) {
  .sd-header__menu { display: flex; }
}
.sd-header__menu a {
  color: #0f0f0f;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}
.sd-header__menu a:hover { color: #ff2b2b; }

/* ===== v1.7.0 — WhatsApp hero link ===== */
.sd-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    color: #25d366;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.18s;
}
.sd-wa-link:hover { opacity: 0.7; }
.sd-wa-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ===== v1.8.0 — Language switcher + WPML ===== */
/* v2.1.25: mobile header — logo saa enemmän tilaa */
.sd-header__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* Mobile: tighter gap */
@media (max-width: 767px) {
    .sd-header__right {
        gap: 0.4rem;
    }
}

/* Desktop: show flat pills, hide mobile dropdown */
.sd-lang-switcher--desktop { display: flex; }
.sd-lang-switcher--mobile  { display: none; }
@media (max-width: 767px) {
    .sd-lang-switcher--desktop { display: none !important; }
    .sd-lang-switcher--mobile  { display: block; }
}

/* Logo: slightly larger on mobile */
@media (max-width: 767px) {
    .sd-header__logo img,
    .sd-header__logo .custom-logo {
        height: 32px;
        width: auto;
    }
}

/* CTA: smaller padding on mobile so it doesn't dominate */
@media (max-width: 767px) {
    .sd-header__cta.sd-pill {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

.sd-lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Flat list variant used when WPML API renders directly */
.sd-lang-switcher--wpml {
    position: static;
}
.sd-lang-switcher--wpml li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sd-lang-switcher--wpml .sd-lang-switcher__option {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border: 1.5px solid #0f0f0f;
    border-radius: 999px;
    background: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #0f0f0f;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    width: auto;
    border-radius: 999px;
}
.sd-lang-switcher--wpml .sd-lang-switcher__option:hover,
.sd-lang-switcher--wpml .sd-lang-switcher__option.is-active {
    background: #0f0f0f;
    color: #fafafa;
}
.sd-lang-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border: 1.5px solid #0f0f0f;
    border-radius: 999px;
    background: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #0f0f0f;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.sd-lang-switcher__btn:hover {
    background: #0f0f0f;
    color: #fafafa;
}
.sd-lang-switcher__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fafafa;
    border: 1.5px solid #0f0f0f;
    border-radius: 10px;
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    min-width: 72px;
    z-index: 300;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.sd-lang-switcher__option {
    display: block;
    width: 100%;
    padding: 0.35rem 0.75rem;
    border: none;
    background: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #0f0f0f;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    letter-spacing: 0.05em;
    transition: background 0.12s;
    text-decoration: none;
}
.sd-lang-switcher__option:hover {
    background: #f0f0f0;
}
.sd-lang-switcher__option.is-active {
    background: #0f0f0f;
    color: #fafafa;
}

/* ===== WPML language switcher overrides =====
   Goal: match our custom .sd-lang-switcher pill/dropdown design.
   WPML renders a <ul class="wpml-ls-statics-shortcode_actions"> or
   <ul class="wpml-ls-legacy-dropdown"> depending on the switcher type
   configured in WPML → Languages → Language Switcher.
   We hide all WPML chrome and show only the language-code pill.
   ===================================================== */

/* 1. Reset WPML wrapper — remove all default margins/padding/bg */
.wpml-ls,
.wpml-ls-statics-shortcode_actions,
.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-list-horizontal,
.wpml-ls-legacy-list-vertical {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-family: 'Space Grotesk', sans-serif !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2. Each language item — inline-flex, no extra decoration */
.wpml-ls-item,
.wpml-ls-slot {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 3. Hide the flag image and the full language name — show only code */
.wpml-ls-flag,
.wpml-ls-native,
.wpml-ls-display {
    display: none !important;
}

/* 4. The <a> link — pill style matching .sd-lang-switcher__btn */
.wpml-ls-item a,
.wpml-ls-item a:visited {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.28rem 0.65rem !important;
    border: 1.5px solid #0f0f0f !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #0f0f0f !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
    cursor: pointer !important;
}

/* 5. Show only the language code (2-letter abbreviation) in the link */
.wpml-ls-item a .wpml-ls-item-toggle,
.wpml-ls-item a .wpml-ls-item-toggle-close {
    display: none !important;
}

/* 6. Hover + active states */
.wpml-ls-item a:hover,
.wpml-ls-item-active a,
.wpml-ls-item-active a:visited {
    background: #0f0f0f !important;
    color: #fafafa !important;
    border-color: #0f0f0f !important;
}

/* 7. Hide any WPML dropdown sub-menus (we use flat list style) */
.wpml-ls-sub-menu {
    display: none !important;
}

/* 8. Remove any WPML-injected arrows / toggle icons */
.wpml-ls-item a::after,
.wpml-ls-item a::before {
    display: none !important;
}


/* =============================================================
   v2.1.9 / v2.1.10 — Hero card refinements + footer mascot overlap
   ============================================================= */

/* Hero cards: lighter background, contain the can fully with padding */
.sd-hero-slide .sd-card {
  background: #f7f7f7;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-hero-slide .sd-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Slight scale-down so the can has breathing room */
  transform: scale(0.92);
  transform-origin: center;
}
@media (min-width: 768px) {
  .sd-hero-slide .sd-card { padding: 1.25rem; }
  .sd-hero-slide .sd-card img { transform: scale(0.9); }
}

/* Process-end mascot: dog body sits above red footer, only legs/feet dip in.
   Goal: the can in dog's hand should align roughly with the red top edge. */
.sd-contacts { position: relative; z-index: 2; padding-bottom: 0; }
.sd-contacts__mascot {
  position: relative;
  z-index: 2;
  width: 280px;
  margin: 2rem auto -55px; /* only feet/legs cross the red edge */
  pointer-events: none;
  user-select: none;
  display: block;
}
@media (min-width: 768px) {
  .sd-contacts__mascot {
    width: 380px;
    margin-bottom: -75px;
  }
}
.sd-footer { position: relative; z-index: 1; }

/* Hide hero pagination dots (autoplay still works) */
.sd-hero-dots--hidden { display: none !important; }


/* ====================================================================
   MEISTÄ-sivu (page-meista.php) — tiimi, arvot, visio, yhteystiedot
   ==================================================================== */

.sd-page-meista {
  padding-bottom: 6rem;
}

/* ---------- Hero ---------- */
.sd-meista-hero {
  padding: 4rem 1rem 2rem;
  text-align: center;
  max-width: 880px;
}
.sd-meista-hero .sd-eyebrow {
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: var(--sd-text);
}
.sd-meista-hero__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}
.sd-meista-hero__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--sd-text);
  margin: 0 auto;
  max-width: 720px;
}
@media (min-width: 768px) {
  .sd-meista-hero { padding: 5rem 1rem 3rem; }
  .sd-meista-hero__title { font-size: 3.2rem; }
  .sd-meista-hero__lead  { font-size: 1.15rem; }
}

/* ---------- Tiimi-grid (Meistä-sivu) ---------- */
.sd-team-section {
  padding: 2rem 1rem 3rem;
}
.sd-meista-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sd-meista-team-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

.sd-meista-team-card {
  text-align: center;
}
.sd-meista-team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #f2f2f2;
  margin-bottom: 1rem;
  border: 2px solid var(--sd-border, #e0e0e0);
}
.sd-meista-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sd-meista-team-card__name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.sd-meista-team-card__role {
  font-size: 0.92rem;
  color: #555;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.sd-meista-team-card__email {
  display: block;
  font-size: 0.82rem;
  color: var(--sd-text);
  text-decoration: underline;
  word-break: break-word;
  line-height: 1.4;
}
.sd-meista-team-card__phone {
  display: block;
  font-size: 0.82rem;
  color: #555;
  text-decoration: none;
  margin-top: 0.15rem;
  line-height: 1.4;
}
.sd-meista-team-card__phone:hover { color: var(--sd-red); }
/* Placeholder: grey circle instead of photo */
.sd-meista-team-card--placeholder .sd-meista-team-card__photo {
  background: #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-meista-team-card--placeholder .sd-meista-team-card__photo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: 0.35;
}
@media (min-width: 768px) {
  .sd-meista-team-card__name { font-size: 1.05rem; }
  .sd-meista-team-card__role { font-size: 0.92rem; }
}
/* 5 columns on wide screens for 10 members */
@media (min-width: 1100px) {
  .sd-meista-team-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Arvot / Visio / Tavoitettavissa -tekstilohkot ---------- */
.sd-meista-block {
  padding: 2.5rem 1rem;
  max-width: 820px;
  text-align: center;
}
.sd-meista-block__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.sd-meista-block__body {
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 768px) {
  .sd-meista-block { padding: 3.5rem 1rem; }
  .sd-meista-block__title { font-size: 2.6rem; }
  .sd-meista-block__body  { font-size: 1.1rem; }
}

/* ---------- Yhteystiedot + kartta ---------- */
.sd-meista-contact {
  padding: 2rem 1rem 4rem;
  max-width: 980px;
  text-align: center;
}
.sd-meista-contact__actions {
  margin: 1.5rem 0 2rem;
}
.sd-meista-contact__address {
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.6;
}
.sd-meista-contact__address p { margin: 0; }
.sd-meista-contact__address a { color: var(--sd-text); text-decoration: underline; }
.sd-meista-map {
  margin-top: 2rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.sd-meista-map iframe {
  display: block;
  width: 100%;
}

/* Larger pill variant for CTA */
.sd-pill--lg {
  padding: 1.1rem 2.2rem;
  font-size: 1.05rem;
}


/* ====================================================================
   404-sivu (404.php) — Hups! Tämä koira karkasi.
   ==================================================================== */

.sd-404 {
  padding: 3rem 0 5rem;
  text-align: center;
  position: relative;
}
.sd-404__inner {
  max-width: 720px;
}

.sd-404__mascot {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
  /* gentle bobbing animation to make it feel alive */
  animation: sd-404-bob 4s ease-in-out infinite;
}

.sd-404__code {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 4.5rem;
  line-height: 1;
  margin: 0 0 0.5rem;
  color: var(--sd-red);
  letter-spacing: -0.02em;
}

.sd-404__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}

.sd-404__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 2rem;
  color: var(--sd-text);
}

.sd-404__actions {
  margin: 0 0 2.5rem;
}

.sd-404__links {
  font-size: 0.95rem;
  color: #666;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.sd-404__links a {
  color: var(--sd-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sd-404__links a:hover { color: var(--sd-red); }

@media (min-width: 768px) {
  .sd-404 { padding: 5rem 0 7rem; }
  .sd-404__mascot { max-width: 360px; }
  .sd-404__code   { font-size: 6rem; }
  .sd-404__title  { font-size: 2.8rem; }
  .sd-404__lead   { font-size: 1.15rem; }
}

@keyframes sd-404-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-404__mascot { animation: none; }
}

/* Footer "Ota yhteyttä" button styled as nav link */
.sd-footer__contact-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: inherit;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  line-height: inherit;
}
.sd-footer__contact-btn:hover {
  opacity: 0.8;
}

/* ==========================================================================
   BLOGI — archive.php & single.php
   v2.1.24
   ========================================================================== */

/* ---------- Hero ---------- */
.sd-blogi-hero {
  padding: 3.5rem 0 2.5rem;
  background: #fff;
}
.sd-blogi-hero--single {
  padding-bottom: 1.5rem;
}
.sd-blogi-hero .sd-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #e63329;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}
.sd-blogi-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 1rem;
  max-width: 780px;
}
.sd-blogi-hero__lead {
  font-size: 1.1rem;
  color: #444;
  max-width: 620px;
  line-height: 1.6;
  margin: 0;
}

/* Takaisin-linkki (single) */
.sd-blogi-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e63329;
  text-decoration: none;
  margin-bottom: 1.4rem;
  transition: gap 0.2s;
}
.sd-blogi-back:hover { gap: 0.6rem; }

/* ---------- Grid-osio ---------- */
.sd-blogi-grid-section {
  padding: 2.5rem 0 4rem;
}

/* ---------- Korttien grid ---------- */
.sd-blogi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.sd-blogi-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .sd-blogi-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .sd-blogi-grid,
  .sd-blogi-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Kortti ---------- */
.sd-blogi-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s;
}
.sd-blogi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Kuva */
.sd-blogi-card__thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f3f3f3;
}
.sd-blogi-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.sd-blogi-card:hover .sd-blogi-card__thumb img {
  transform: scale(1.04);
}
.sd-blogi-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef0ef;
}
.sd-blogi-card__thumb--placeholder img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Body */
.sd-blogi-card__body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Meta */
.sd-blogi-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.sd-blogi-card__cat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #e63329;
  border-radius: 20px;
  padding: 0.2rem 0.7rem;
  text-decoration: none;
  transition: background 0.2s;
}
.sd-blogi-card__cat:hover { background: #c22820; }
.sd-blogi-card__date {
  font-size: 0.82rem;
  color: #888;
}

/* Otsikko */
.sd-blogi-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  color: #1a1a1a;
}
.sd-blogi-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.sd-blogi-card__title a:hover { color: #e63329; }

/* Ingressi */
.sd-blogi-card__excerpt {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1;
}

/* CTA */
.sd-blogi-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #e63329;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s;
}
.sd-blogi-card__cta:hover { gap: 0.55rem; }

/* ---------- Sivutus ---------- */
.sd-blogi-pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.sd-blogi-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sd-blogi-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.75rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  background: #f3f3f3;
  transition: background 0.2s, color 0.2s;
}
.sd-blogi-pagination .page-numbers:hover,
.sd-blogi-pagination .page-numbers.current {
  background: #e63329;
  color: #fff;
}
.sd-blogi-pagination .page-numbers.dots {
  background: transparent;
  pointer-events: none;
}

/* ---------- Tyhjä tila ---------- */
.sd-blogi-empty {
  text-align: center;
  padding: 4rem 1rem;
}
.sd-blogi-empty__mascot {
  width: 80px;
  margin: 0 auto 1.5rem;
  display: block;
  opacity: 0.5;
}
.sd-blogi-empty__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.6rem;
}
.sd-blogi-empty__body {
  color: #666;
  margin-bottom: 1.8rem;
}

/* ---------- Single: cover image ---------- */
.sd-blogi-single__cover {
  padding: 0 0 2rem;
}
.sd-blogi-single__cover-img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* ---------- Single: kirjoittaja ---------- */
.sd-blogi-single__author {
  font-size: 0.9rem;
  color: #888;
  margin: 0.5rem 0 0;
}

/* ---------- Single: artikkelin sisältö ---------- */
.sd-blogi-single__content-wrap {
  padding-top: 0;
  padding-bottom: 3rem;
}
.sd-blogi-single__content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #222;
}
.sd-blogi-single__content h2,
.sd-blogi-single__content h3,
.sd-blogi-single__content h4 {
  font-weight: 800;
  margin-top: 2.2rem;
  margin-bottom: 0.6rem;
  color: #1a1a1a;
}
.sd-blogi-single__content h2 { font-size: 1.6rem; }
.sd-blogi-single__content h3 { font-size: 1.25rem; }
.sd-blogi-single__content p  { margin-bottom: 1.2rem; }
.sd-blogi-single__content img {
  max-width: 100%;
  border-radius: 12px;
  margin: 1.5rem 0;
}
.sd-blogi-single__content a {
  color: #e63329;
  text-underline-offset: 3px;
}
.sd-blogi-single__content blockquote {
  border-left: 4px solid #e63329;
  margin: 1.8rem 0;
  padding: 0.8rem 1.4rem;
  background: #fef0ef;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #444;
}
.sd-blogi-single__content ul,
.sd-blogi-single__content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
}
.sd-blogi-single__content li { margin-bottom: 0.4rem; }

/* Sivutus (<!--nextpage-->) */
.sd-blogi-single__pages {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  font-size: 0.9rem;
}
.sd-blogi-single__pages span { color: #888; }
.sd-blogi-single__pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  border-radius: 50px;
  background: #f3f3f3;
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.sd-blogi-single__pages a:hover { background: #e63329; color: #fff; }

/* ---------- Single: tagit ---------- */
.sd-blogi-single__tags {
  max-width: 720px;
  margin: 1.5rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sd-blogi-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  background: #f3f3f3;
  border-radius: 20px;
  padding: 0.25rem 0.8rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.sd-blogi-tag:hover { background: #1a1a1a; color: #fff; }

/* ---------- Related / Lue myös ---------- */
.sd-blogi-related {
  padding: 3rem 0 4rem;
  border-top: 1px solid #eee;
}
.sd-blogi-related__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 1.8rem;
}
.sd-blogi-related__empty {
  color: #888;
  font-size: 0.95rem;
}
.sd-blogi-related__back {
  margin-top: 2.5rem;
  text-align: center;
}

/* ---------- Kommentit ---------- */
.sd-blogi-comments {
  padding: 2rem 0 4rem;
  border-top: 1px solid #eee;
}
.sd-blogi-comments .comment-respond {
  max-width: 720px;
  margin: 0 auto;
}
.sd-blogi-comments .comment-form input,
.sd-blogi-comments .comment-form textarea {
  width: 100%;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 0.8rem;
  transition: border-color 0.2s;
}
.sd-blogi-comments .comment-form input:focus,
.sd-blogi-comments .comment-form textarea:focus {
  outline: none;
  border-color: #e63329;
}
.sd-blogi-comments .comment-form .submit {
  background: #e63329;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.7rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.sd-blogi-comments .comment-form .submit:hover { background: #c22820; }