/* Page-specific layout ─ hero, product, etc. */

/* ───────── HERO ─────────
   Full-bleed night canvas. The cursor is a "headlight" that sweeps across the
   entire hero, lifting the darkness and revealing reflector silhouettes in
   brand colours wherever the beam falls. Type stays fully lit at all times.
   Pointer logic in hero.js; all visual logic lives here. */
.hero {
  --mx: 55%;
  --my: 48%;
  --glow: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: clamp(var(--header-h), 10vw, 160px) clamp(88px, 10vw, 140px);
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px));
  color: #fff;
  background:
    radial-gradient(120% 85% at 70% 115%, #232b78 0%, #11174a 55%, #080d2c 100%),
    linear-gradient(180deg, #0a1136 0%, #080d2c 100%);
}
/* Compact variant — used on subpages where the hero should not dominate
   the viewport. Front-page hero stays 100vh; subpages use a fixed 700px. */
.hero--compact {
  min-height: 700px;
  padding-block: calc(var(--header-h) + clamp(32px, 5vw, 64px)) clamp(48px, 6vw, 80px);
}

.hero::after {
  /* subtle grain to keep the darkness organic */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Background layer — stars + reflectors + beam + vignette */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

.hero__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%,  rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px   1px   at 22% 8%,  rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 18%, rgba(255,255,255,.7),  transparent 60%),
    radial-gradient(1px   1px   at 52% 6%,  rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.4px 1.4px at 66% 14%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px   1px   at 80% 22%, rgba(255,255,255,.6),  transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px   1px   at 14% 34%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 46%, rgba(255,255,255,.8),  transparent 60%),
    radial-gradient(1px   1px   at 72% 52%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px   1px   at 4% 58%,  rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 74%, rgba(255,255,255,.7),  transparent 60%),
    radial-gradient(1px   1px   at 62% 82%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 86% 76%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px   1px   at 96% 92%, rgba(255,255,255,.5),  transparent 60%);
  animation: hero-twinkle 6s ease-in-out infinite;
}
@keyframes hero-twinkle {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1;  }
}

/* Photo layer — the wall-of-reflectors image, masked so it only appears
   inside the cursor spotlight. Outside the mask, only the dark hero shows. */
.hero__reflectors {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle 360px at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.85) 45%, rgba(0,0,0,.28) 78%, transparent 100%);
          mask-image: radial-gradient(circle 360px at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.85) 45%, rgba(0,0,0,.28) 78%, transparent 100%);
}
.hero__photo {
  position: absolute; inset: 0;
  background-image: url("../img/Saintex-uusi-ilme-etusivun-landeri-scaled.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.2) brightness(1.08) contrast(1.05);
}

/* Sparkle stars layered on top of the reflector photo — share the cursor
   mask of .hero__reflectors so they only appear inside the flashlight beam. */
.hero__spark {
  position: absolute;
  color: #fff;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, .85))
    drop-shadow(0 0 24px rgba(143, 155, 244, .55));
}
.hero__spark--a { width: 34px; height: 34px; top: 14%;  left: 12%; }
.hero__spark--b { width: 22px; height: 22px; top: 22%;  right: 18%; color: #C8CDFA;
  filter: drop-shadow(0 0 10px rgba(200,205,250,.9)) drop-shadow(0 0 20px rgba(143,155,244,.6)); }
.hero__spark--c { width: 18px; height: 18px; top: 52%;  left: 22%; }
.hero__spark--d { width: 28px; height: 28px; top: 44%;  right: 14%; color: #FFCBA8;
  filter: drop-shadow(0 0 10px rgba(255,203,168,.8)) drop-shadow(0 0 20px rgba(255,141,114,.5)); }
.hero__spark--e { width: 16px; height: 16px; bottom: 30%; left: 48%; }
.hero__spark--f { width: 26px; height: 26px; bottom: 14%; right: 32%; }

/* Soft warm "headlight" halo following the cursor */
.hero__beam {
  position: absolute; inset: 0;
  background: radial-gradient(circle 340px at var(--mx) var(--my),
    rgba(255, 234, 208, .30) 0%,
    rgba(255, 210, 180, .13) 40%,
    transparent 72%);
  mix-blend-mode: screen;
  opacity: calc(.78 + .22 * var(--glow));
}

/* Vignette to focus attention toward the centre */
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 75% at 50% 50%,
    transparent 55%, rgba(5, 2, 20, .55) 100%);
}

.hero__container {
  position: relative; z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
.hero__copy { max-width: 58ch; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 204, 152, .08);
  border: 1px solid rgba(255, 204, 152, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: #FFD9B0;
  margin-bottom: var(--sp-3);
  text-shadow: 0 1px 10px rgba(5, 2, 20, .45);
}
.hero__eyebrow .sparkle { color: var(--c-peach); }

/* Cycling-words variant — no pill chrome, white sparkle, animated word swap */
.hero__eyebrow--cycle {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  color: #fff;
}

/* Subpages (compact hero) get a slightly larger eyebrow + cycling word */
.hero--compact .hero__eyebrow {
  font-size: .88rem;
  letter-spacing: .12em;
  gap: 10px;
}

.hero__eyebrow--cycle .sparkle { color: #fff; }
.hero__cycle {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  text-align: left;
}
/* Invisible ghost word reserves baseline height so absolutely-positioned
   words don't collapse the container or clip ascenders/diacritics. */
.hero__cycle::before {
  content: var(--hero-cycle-ghost, "Sertifioitu");
  visibility: hidden;
}
.hero__cycle-word {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(35%);
  animation: hero-cycle 12.5s infinite cubic-bezier(.2, .7, .2, 1);
}
.hero__cycle-word:nth-child(1) { animation-delay: 0s; }
.hero__cycle-word:nth-child(2) { animation-delay: 2.5s; }
.hero__cycle-word:nth-child(3) { animation-delay: 5s; }
.hero__cycle-word:nth-child(4) { animation-delay: 7.5s; }
.hero__cycle-word:nth-child(5) { animation-delay: 10s; }

@keyframes hero-cycle {
  0%   { opacity: 0; transform: translateY(35%); }
  3%   { opacity: 1; transform: translateY(0); }
  16%  { opacity: 1; transform: translateY(0); }
  20%  { opacity: 0; transform: translateY(-35%); }
  100% { opacity: 0; transform: translateY(-35%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cycle-word { animation: none; opacity: 0; }
  .hero__cycle-word:first-child { opacity: 1; transform: none; }
}

.hero__title {
  font-size: var(--fs-display);
  line-height: .92;
  letter-spacing: -.045em;
  margin: 0 0 var(--sp-3);
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(5, 2, 20, .35);
}
.hero__title em {
  font-style: normal;
  display: inline-block; width: fit-content;
  /* Breathing room so the negative letter-spacing tail (right) and tight
     line-height descenders (bottom) aren't clipped by the hero overflow. */
  padding-right: .08em;
  padding-bottom: .08em;
  background: linear-gradient(95deg, #9CEFFB 0%, #FFA878 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 1px 8px rgba(156, 239, 251, .18))
    drop-shadow(0 1px 10px rgba(255, 168, 120, .18));
}
.hero__lead {
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  color: rgba(255,255,255,.92);
  max-width: 48ch; margin: 0 0 var(--sp-4);
  text-shadow: 0 1px 12px rgba(5, 2, 20, .45);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--sp-4); }
@media (max-width: 560px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: .9rem; color: rgba(255,255,255,.78);
  text-shadow: 0 1px 8px rgba(5, 2, 20, .4);
}
.hero__meta strong {
  color: var(--c-peach);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Buttons re-theme for the dark canvas */
.hero .btn--primary { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.hero .btn--ghost   { --btn-bg: transparent; --btn-fg: #fff; --btn-br: rgba(255,255,255,.45); }
.hero .btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-br: #fff; }

/* Hint pill — fades out once the user has moved the cursor */
.hero__hint {
  position: absolute;
  bottom: clamp(20px, 3vw, 36px);
  right: clamp(20px, 3vw, 36px);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.82);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.hero__hint svg { color: var(--c-peach); }
.hero[data-touched="true"] .hero__hint {
  opacity: 0; transform: translateY(8px);
}
@media (max-width: 720px) {
  .hero__hint { display: none; }
}

/* Scroll indicator — centred, sits slightly above the hero's bottom edge */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3.2vh, 40px);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 7px;
  background: transparent;
  padding: 4px 8px;
  color: rgba(255,255,255,.72);
  transition: color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.hero__scroll:hover { color: #fff; transform: translateX(-50%) translateY(-3px); text-decoration: none; }
.hero__scroll-label {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}
.hero__scroll-mouse {
  width: 18px; height: 28px;
  border: 1.5px solid currentColor;
  border-radius: var(--r-pill);
  display: flex; justify-content: center;
  padding-top: 5px;
}
.hero__scroll-wheel {
  display: block;
  width: 2px; height: 6px;
  background: currentColor;
  border-radius: 2px;
  animation: scroll-wheel 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes scroll-wheel {
  0%   { transform: translateY(0);  opacity: 1;   }
  60%  { transform: translateY(8px); opacity: .1; }
  100% { transform: translateY(0);  opacity: 1;   }
}

/* ───────── Hero entrance animation ───────── */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-photo-in {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes hero-pill-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.hero__photo,
.hero__vignette,
.hero__stars,
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__ctas,
.hero__meta,
.hero__scroll {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}

.hero__photo    { animation: hero-photo-in 1600ms 100ms both cubic-bezier(.2,.7,.2,1); }
.hero__vignette { animation: hero-fade     1200ms 200ms both; }
.hero__stars    {
  animation:
    hero-fade 1400ms 350ms both,
    hero-twinkle 6s ease-in-out 1.4s infinite;
}

.hero__eyebrow { animation: hero-pill-in 700ms 280ms both cubic-bezier(.2,.7,.2,1); }
.hero__title   { animation: hero-rise   900ms 420ms both cubic-bezier(.2,.7,.2,1); }
.hero__lead    { animation: hero-rise   800ms 720ms both cubic-bezier(.2,.7,.2,1); }
.hero__ctas    { animation: hero-rise   800ms 880ms both cubic-bezier(.2,.7,.2,1); }
.hero__meta    { animation: hero-rise   800ms 1020ms both cubic-bezier(.2,.7,.2,1); }
.hero__scroll  { animation: hero-fade  1000ms 1400ms both; }

@media (prefers-reduced-motion: reduce) {
  .hero__stars { animation: none; }
  .hero__scroll-wheel { animation: none; }
  .hero__photo,
  .hero__vignette,
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__ctas,
  .hero__meta,
  .hero__scroll { animation: none; }
}


/* ───────── Feature cards (categories) ─────────
   Full-bleed image cards mirroring the old "3 cards" pattern, but in
   the new brand language: gradient veils, sparkle motifs, white type. */
.feature-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 42vw, 460px);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--c-ink);
  box-shadow:
    0 1px 2px rgba(10,10,18,.06),
    0 22px 50px -28px rgba(10,10,18,.35);
  transition:
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}
.feature-card,
.feature-card:hover,
.feature-card:focus { text-decoration: none; }
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(10,10,18,.08),
    0 36px 70px -22px rgba(10,10,18,.45);
}
.feature-card:focus-visible {
  outline: 2px solid var(--c-blue-electric);
  outline-offset: 4px;
}

/* Media — full-bleed image (or gradient backdrop when no photo) */
.feature-card__media {
  position: absolute; inset: 0; z-index: 0;
}
.feature-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.feature-card:hover .feature-card__media img { transform: scale(1.04); }

/* Veil — readability gradient */
.feature-card__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,10,25,0)   0%,
    rgba(10,10,25,0)   38%,
    rgba(10,10,25,.55) 78%,
    rgba(10,10,25,.85) 100%);
  transition: opacity var(--t-med) var(--ease);
}
/* Tone-specific veils — each card gets a unique brand-color wash that
   fades to deep ink at the bottom for legible white type. */
.feature-card[data-tone="electric"] .feature-card__veil {
  background: linear-gradient(180deg,
    rgba(41,30,255,0)   0%,
    rgba(41,30,255,.10) 22%,
    rgba(41,30,255,.45) 62%,
    rgba(8,6,40,.92)    100%);
}
.feature-card[data-tone="coral"] .feature-card__veil {
  background: linear-gradient(180deg,
    rgba(255,141,114,0)  0%,
    rgba(255,141,114,.18) 22%,
    rgba(160,55,32,.55)  62%,
    rgba(30,12,8,.92)    100%);
}
.feature-card[data-tone="peach"] .feature-card__veil {
  background: linear-gradient(180deg,
    rgba(255,204,152,0)  0%,
    rgba(255,204,152,.22) 22%,
    rgba(150,90,30,.5)   62%,
    rgba(34,20,8,.92)    100%);
}

/* Sparkle composition — three glints clustered in the top 25% of the
   card so they never collide with the body content below. */
.feature-card__sparks {
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  z-index: 2;
  pointer-events: none;
  color: #fff;
}
.feature-card__spark {
  position: absolute;
  opacity: .9;
  transition:
    transform var(--t-slow) var(--ease),
    opacity   var(--t-slow) var(--ease);
}
.feature-card__spark--a { width: 42px; height: 42px; top: 8%;  right: 11%; }
.feature-card__spark--b { width: 22px; height: 22px; top: 24%; left: 13%; }
.feature-card__spark--c { width: 16px; height: 16px; top: 6%;  left: 38%; opacity: .7; }

.feature-card:hover .feature-card__spark--a { transform: translateY(-4px) rotate(8deg);  opacity: 1; }
.feature-card:hover .feature-card__spark--b { transform: translateY(-6px) rotate(-6deg); opacity: 1; }
.feature-card:hover .feature-card__spark--c { transform: translateY(-3px) rotate(4deg);  opacity: .92; }

/* Tone-tinted glow ties each glint to its card's color story. */
.feature-card[data-tone="electric"] .feature-card__spark {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.6))
    drop-shadow(0 0 22px rgba(143,155,244,.55));
}
.feature-card[data-tone="coral"] .feature-card__spark {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.6))
    drop-shadow(0 0 22px rgba(255,141,114,.65));
}
.feature-card[data-tone="peach"] .feature-card__spark {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.65))
    drop-shadow(0 0 22px rgba(255,204,152,.7));
}

/* Body — content stacked at the bottom; lead has a uniform min-height so
   eyebrow/title/cta sit on the same baseline across cards. */
.feature-card__body {
  position: relative; z-index: 3;
  margin-top: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.feature-card__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28);
  font-family: var(--ff-body);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}
.feature-card__eyebrow .sparkle { width: 12px; height: 12px; }

.feature-card__title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.feature-card__lead {
  color: rgba(255,255,255,.86);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
  min-height: calc(1.55em * 4);
}
.feature-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-ink);
  font-weight: 600;
  font-size: .92rem;
  transition:
    gap       var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
  box-shadow: 0 6px 18px rgba(10,10,18,.18);
}
.feature-card:hover .feature-card__cta { gap: 14px; box-shadow: 0 14px 30px rgba(10,10,18,.28); }
.feature-card__cta svg { transition: transform var(--t-med) var(--ease); }
.feature-card:hover .feature-card__cta svg { transform: translateX(2px); }

/* ───────── Story / split section ───────── */
.split {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.split__art {
  aspect-ratio: 4/5; border-radius: var(--r-xl);
  background: var(--c-ink-soft);
  position: relative; overflow: hidden;
  isolation: isolate;
}
.split__art > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.split__art--prism { background: var(--g-prism); filter: saturate(.9); }
.split__art::after {
  content: ""; position: absolute; inset: 0;
  background: var(--g-aurora-deep);
  mix-blend-mode: multiply;
  opacity: .9;
  z-index: 1;
  pointer-events: none;
}
.split__art::before {
  content: ""; position: absolute; inset: 8% 8% auto 8%; height: 55%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.45), transparent 70%);
  filter: blur(6px);
  z-index: 2;
  pointer-events: none;
}
.split__stats {
  display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin-top: var(--sp-4);
}
.split__stat {
  border-left: 2px solid var(--c-blue-electric);
  padding: 6px 0 6px var(--sp-2);
}
.split__stat strong {
  font-family: var(--ff-display); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.02em; display: block; line-height: 1;
}
.split__stat span { font-size: .9rem; color: var(--c-ink-soft); }

/* ───────── Values (sustainability) ───────── */
.values { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value {
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  position: relative;
}
.value__icon {
  display: block;
  width: 56px; height: 56px;
  margin-bottom: var(--sp-3);
}
.value__title { margin: 0 0 var(--sp-1); font-size: 1.15rem; }
.value__body  { margin: 0; color: var(--c-ink-soft); }

/* ───────── Facts (2×2 educational grid — used on /heijastinpalvelu) ───────── */
.facts {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .facts { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); }
}
.fact {
  position: relative;
  padding: 0;
  isolation: isolate;
}
.fact__icon {
  position: absolute;
  top: -22px;
  left: -64px;
  width: clamp(56px, 6vw, 76px);
  height: clamp(56px, 6vw, 76px);
  color: var(--c-ink);
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}
.fact__title,
.fact__body { position: relative; z-index: 1; }
.fact__title {
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, 1rem + .55vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.18;
  margin: 0 0 var(--sp-2);
  background: linear-gradient(95deg, #4F5BF0 0%, #7B6BF2 50%, #FF9E82 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  width: fit-content;
}
.fact__body {
  margin: 0;
  color: var(--c-ink-soft);
  line-height: 1.65;
}

/* ───────── Lineup grid (product families — used on /brandituotteet) ───────── */
.lineup-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .lineup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lineup-grid { grid-template-columns: repeat(3, 1fr); } }
.lineup {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column;
}
.lineup__title {
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 1rem + .55vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.18;
  margin: 0 0 var(--sp-2);
  background: linear-gradient(95deg, #4F5BF0 0%, #7B6BF2 50%, #FF9E82 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.lineup__body {
  margin: 0 0 var(--sp-3);
  color: var(--c-ink-soft);
  line-height: 1.55;
}
.lineup__list {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lineup__list li {
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  letter-spacing: -.005em;
}
.lineup__more {
  margin: var(--sp-2) 0 0;
  font-size: .8rem;
  color: var(--c-muted);
  font-style: italic;
}

/* ───────── Reference cards ───────── */
.refs { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .refs { grid-template-columns: repeat(3, 1fr); } }
.ref { display: flex; flex-direction: column; }
.ref__art {
  aspect-ratio: 4/3; border-radius: var(--r-lg);
  background: var(--g-aurora);
  margin-bottom: var(--sp-2);
  position: relative; overflow: hidden;
}
.ref--a .ref__art { background: linear-gradient(155deg,#A9B2F6,#291EFF); }
.ref--b .ref__art { background: linear-gradient(155deg,#FFE3CF,#FF8D72); }
.ref--c .ref__art { background: linear-gradient(155deg,#D9DDF9,#8F9BF4); }
.ref__client {
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--ff-display); color: #fff; font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.01em;
}
.ref__title { margin: 0; font-size: 1.15rem; }
.ref__body { color: var(--c-ink-soft); margin: 8px 0 0; }

/* ───────── Product page ───────── */
.breadcrumbs {
  padding: var(--sp-3) 0 0;
  font-size: .85rem;
  color: var(--c-ink-soft);
}
.breadcrumbs a { color: inherit; }
.breadcrumbs__sep { margin: 0 8px; color: var(--c-muted); }

.product {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: start;
  padding-top: var(--sp-4);
}
@media (min-width: 960px) { .product { grid-template-columns: 1.1fr 1fr; gap: var(--sp-6); } }

.product__gallery {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(4, 1fr);
}
.product__main {
  grid-column: 1 / -1;
  aspect-ratio: 5/4;
  border-radius: var(--r-xl);
  background:
    radial-gradient(140% 100% at 30% 10%, rgba(255,255,255,.65), transparent 60%),
    linear-gradient(155deg,#C9CFFA,#8F9BF4 60%,#291EFF);
  position: relative; overflow: hidden;
}
.product__main::after {
  content: ""; position: absolute; inset: 20% 30% 50% 15%;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), transparent 70%);
  filter: blur(12px);
}
.product__thumb {
  aspect-ratio: 1/1; border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--g-aurora);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.product__thumb:hover { transform: translateY(-2px); }
.product__thumb[aria-current="true"] { border-color: var(--c-blue-electric); }
.product__thumb--1 { background: linear-gradient(155deg,#C9CFFA,#8F9BF4); }
.product__thumb--2 { background: linear-gradient(155deg,#FFE3CF,#FFCC98); }
.product__thumb--3 { background: linear-gradient(155deg,#F9E6E3,#FF8D72); }
.product__thumb--4 { background: var(--g-prism); }

.product__info { padding-top: var(--sp-2); }
.product__tags { margin-bottom: var(--sp-2); display: flex; flex-wrap: wrap; gap: 6px; }
.product__title {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  margin: 0 0 var(--sp-2);
}
.product__price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: var(--sp-3);
}
.product__price strong {
  font-family: var(--ff-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.01em;
}
.product__price span { color: var(--c-muted); font-size: .88rem; }

.product__lead { color: var(--c-ink-soft); margin-bottom: var(--sp-4); }

.product__form { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 600; font-size: .88rem; }
.field__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-line);
  cursor: pointer;
  position: relative;
}
.swatch[aria-pressed="true"] { outline: 2px solid var(--c-blue-electric); outline-offset: 2px; }
.swatch--electric { background: var(--c-blue-electric); }
.swatch--soft     { background: var(--c-blue-soft); }
.swatch--peach    { background: var(--c-peach); }
.swatch--coral    { background: var(--c-coral); }
.swatch--white    { background: #fff; }

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden;
  width: max-content;
}
.qty button {
  width: 40px; height: 40px; font-size: 1.1rem;
}
.qty input {
  width: 48px; height: 40px; text-align: center;
  border: 0; background: transparent; font: inherit;
}

.product__buy { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-4); }
.product__note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-bg-soft);
  font-size: .9rem; color: var(--c-ink-soft);
}

.product-specs {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-line);
}
.product-specs__row {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: var(--sp-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .95rem;
}
.product-specs__row dt { color: var(--c-ink-soft); margin: 0; }
.product-specs__row dd { margin: 0; font-weight: 500; }

.story-blocks {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .story-blocks { grid-template-columns: repeat(2, 1fr); } }
.story-block {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.story-block h3 { margin: 0 0 var(--sp-2); }
.story-block p { margin: 0; color: var(--c-ink-soft); }

.related {
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .related { grid-template-columns: repeat(4, 1fr); } }

/* ───────── Closing card (yhteys) ─────────
   A premium dark "card" floating on the page bg.
   Mirrors the hero's night canvas to bookend the page. */
.closing { padding-block: clamp(48px, 6vw, 96px); }

.closing__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(24px, 2.6vw, 40px);
  padding: clamp(36px, 5vw, 80px);
  color: #fff;
  background:
    url("../img/contact.jpg") center/cover no-repeat,
    #14093a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 30px 80px rgba(5, 2, 20, .25);
}
.closing__card::before {
  /* deeper blue brand overlay */
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(8, 10, 50, .85) 0%, rgba(18, 20, 110, .65) 55%, rgba(30, 40, 140, .50) 100%),
    radial-gradient(60% 80% at 0% 0%,    rgba(60, 75, 200, .35), transparent 65%),
    radial-gradient(55% 70% at 100% 100%, rgba(2, 60, 200, .35), transparent 65%);
}
.closing__card::after {
  /* faint grain to match hero */
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.closing__bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.closing__spark {
  position: absolute; color: #fff;
  filter: drop-shadow(0 0 12px rgba(255, 204, 152, .55));
}
.closing__spark--a { width: 24px; height: 24px; top: 10%;  right: 8%;  opacity: .8; }
.closing__spark--b { width: 14px; height: 14px; top: 38%;  left: 4%;  opacity: .55; color: #C8CDFA; filter: drop-shadow(0 0 10px rgba(143,155,244,.6)); }
.closing__spark--c { width: 18px; height: 18px; bottom: 16%; right: 36%; opacity: .55; }

.closing__grid {
  position: relative; z-index: 2;
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .closing__grid { grid-template-columns: 1.25fr .75fr; gap: var(--sp-6); }
}

.closing__overline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin-bottom: var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 204, 152, .1);
  border: 1px solid rgba(255, 204, 152, .35);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: #FFD9B0;
}
.closing__overline .sparkle { width: 12px; height: 12px; color: var(--c-peach); }

.closing__title {
  color: #fff;
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  line-height: 1.02; letter-spacing: -.035em;
  margin: 0 0 var(--sp-3); text-wrap: balance;
}
.closing__title em {
  font-style: normal;
  display: inline-block; width: fit-content;
  background: linear-gradient(95deg, #9CEFFB 0%, #FFA878 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 2px 18px rgba(156, 239, 251, .32))
    drop-shadow(0 2px 24px rgba(255, 168, 120, .32));
}

.closing__lead {
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-lead);
  max-width: 50ch; margin: 0 0 var(--sp-4);
  line-height: 1.55;
}
.closing__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.closing__details {
  margin: 0; padding: 0;
  display: grid; gap: 0;
}
.closing__detail {
  display: grid; grid-template-columns: minmax(110px, .35fr) 1fr;
  align-items: baseline; gap: var(--sp-3);
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.closing__detail:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.closing__detail dt {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); font-weight: 700;
}
.closing__detail dd {
  margin: 0; color: #fff; font-weight: 500; line-height: 1.4;
}
.closing__detail a {
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.closing__detail a:hover {
  color: var(--c-peach); border-bottom-color: var(--c-peach);
  text-decoration: none;
}

/* re-theme buttons inside the dark card */
.closing .btn--accent {
  --btn-bg: var(--c-coral); --btn-fg: #fff;
}
.closing .btn--onInk {
  --btn-bg: transparent; --btn-fg: #fff; --btn-br: rgba(255, 255, 255, .45);
}
.closing .btn--onInk:hover { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-br: #fff; }

/* ───────── Ideoi & teetä — workshop CTA ─────────
   Asymmetric editorial split: copy left, hero photo right with a floating
   speed-promise badge and a few brand-sparkle accents. */
.ideoi-section {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}
.ideoi-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px circle at 8% 18%, rgba(143, 155, 244, .14), transparent 60%),
    radial-gradient(520px circle at 96% 88%, rgba(255, 141, 114, .12), transparent 60%);
  z-index: 0;
}

.ideoi {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .ideoi { grid-template-columns: 1.05fr 1fr; gap: var(--sp-7); }
}

.ideoi__overline {
  color: var(--c-blue-electric);
  margin-bottom: var(--sp-3);
}
.ideoi__overline .sparkle { color: var(--c-blue-electric); }

.ideoi__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
  color: var(--c-ink);
  margin: 0 0 var(--sp-2);
}
.ideoi__title em { font-style: normal; }
.ideoi__subtitle {
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
  font-weight: 600; color: var(--c-ink);
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-3); max-width: 36ch;
}
.ideoi__body {
  color: var(--c-ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin: 0 0 var(--sp-4);
  max-width: 50ch;
}

/* Numbered process list */
.ideoi__steps {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  display: grid; gap: 14px;
  max-width: 44ch;
}
.ideoi__steps li {
  display: grid; grid-template-columns: 36px 1fr;
  align-items: start; gap: 12px;
  font-weight: 500; color: var(--c-ink);
}
.ideoi__step-num {
  font-family: var(--ff-display);
  font-size: 1.4rem; font-weight: 700;
  line-height: 1.5; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #4F5BF0 0%, #7B6BF2 50%, #FF9E82 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ideoi__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Media column — photo + speed badge + scattered sparkles */
.ideoi__media {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 520px;
  justify-self: center;
}
@media (min-width: 900px) {
  .ideoi__media { justify-self: end; aspect-ratio: 4/5; }
}

.ideoi__photo-wrap {
  position: relative;
  width: 100%; height: 100%;
  border-radius: clamp(20px, 2vw, 32px);
  overflow: hidden;
  box-shadow:
    0 24px 60px -18px rgba(30, 24, 70, .35),
    0 6px 18px -6px rgba(30, 24, 70, .15);
}
.ideoi__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.ideoi__photo-wrap:hover .ideoi__photo { transform: scale(1.03); }

/* Floating speed-promise badge */
.ideoi__badge {
  position: absolute;
  left: -8%; bottom: 6%;
  display: grid; gap: 2px;
  padding: 16px 22px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid rgba(10, 10, 18, .06);
  box-shadow:
    0 22px 50px -22px rgba(30, 24, 70, .4),
    0 4px 14px -4px rgba(30, 24, 70, .12);
  max-width: 220px;
}
.ideoi__badge strong {
  font-family: var(--ff-display);
  font-size: 1.75rem; line-height: 1;
  font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(95deg, #4F5BF0 0%, #7B6BF2 50%, #FF9E82 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ideoi__badge span {
  color: var(--c-ink-soft);
  font-size: .82rem; line-height: 1.3;
}
@media (max-width: 540px) {
  .ideoi__badge { left: 4%; bottom: 4%; padding: 12px 16px; }
  .ideoi__badge strong { font-size: 1.4rem; }
}

/* Brand sparkle accents floating around the photo */
.ideoi__spark {
  position: absolute; pointer-events: none;
  filter: drop-shadow(0 4px 18px rgba(143, 155, 244, .55));
}
.ideoi__spark--a { width: 38px; height: 38px; top: -16px; right: 12%; color: var(--c-blue-electric); }
.ideoi__spark--b { width: 22px; height: 22px; top: 28%; right: -14px; color: var(--c-coral);
  filter: drop-shadow(0 4px 18px rgba(255, 141, 114, .55)); }
.ideoi__spark--c { width: 16px; height: 16px; top: 14%; left: -10px; color: var(--c-peach); opacity: .85; }


/* ───────── News archive (uutiset.html) ───────── */
.news-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.news-card__media {
  aspect-ratio: 4 / 3;
  background: var(--c-bg-soft);
  overflow: hidden;
}
.news-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-card__date {
  font-size: var(--fs-overline);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-blue-mid);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}
.news-card__title {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
  color: var(--c-ink);
  text-wrap: balance;
}
.news-card__excerpt {
  margin: 0 0 var(--sp-3);
  color: var(--c-ink-soft);
  line-height: 1.55;
  font-size: .94rem;
}
.news-card__cta {
  margin-top: auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-blue-mid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.news-card:hover .news-card__cta { color: var(--c-blue-electric); }


/* ───────── Article single (uutiset/<slug>.html) ───────── */
.article-page { padding-block: clamp(48px, 7vw, 96px); }

.article {
  max-width: var(--max-w-rd);
  margin: 0 auto;
}
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-blue-mid);
  text-decoration: none;
  margin-bottom: var(--sp-4);
  transition: color var(--t-fast) var(--ease);
}
.article__back:hover { color: var(--c-blue-electric); }
.article__back::before {
  content: "←";
  font-size: 1.1em;
  line-height: 1;
}

.article__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-overline);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
}
.article__date { color: var(--c-blue-mid); }

.article__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}

.article__hero {
  margin: 0 0 var(--sp-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-bg-soft);
}
.article__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.article__caption {
  margin: var(--sp-1) 0 var(--sp-5);
  font-size: .85rem;
  color: var(--c-muted);
  font-style: italic;
  text-align: center;
}

.article__body p {
  margin-block: var(--sp-3);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--c-ink-soft);
}
.article__body p:first-child { margin-top: 0; }
.article__body strong { color: var(--c-ink); }
.article__body a {
  color: var(--c-blue-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article__body a:hover { color: var(--c-blue-electric); }
.article__body h2,
.article__body h3 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  font-family: var(--ff-display);
  letter-spacing: -.015em;
  color: var(--c-ink);
}
.article__body h2 { font-size: 1.75rem; }
.article__body h3 { font-size: 1.35rem; }
.article__body blockquote {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-blue-electric);
  font-style: italic;
  color: var(--c-ink);
}

.article__footer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}


/* ───────── Contact page (yhteys.html) ───────── */
/* Compact trust strip — uniform smaller kicker for contact info */
.trust--compact .trust__kicker {
  font-size: clamp(1.15rem, .9rem + .65vw, 1.6rem);
}

/* Section with subtle warm aurora background */
.contact-section {
  position: relative;
  isolation: isolate;
}
.contact-section__bg {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(255, 204, 152, .25), transparent 60%),
    radial-gradient(700px 600px at -10% 50%, rgba(143, 155, 244, .18), transparent 65%),
    radial-gradient(600px 400px at 50% 110%, rgba(255, 141, 114, .12), transparent 60%);
  pointer-events: none;
}

.contact-split {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .contact-split { grid-template-columns: .9fr 1.4fr; gap: var(--sp-5); }
}

/* Contact form */
.contact-form {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 36px);
  position: relative;
  box-shadow: 0 1px 2px rgba(10, 10, 18, .04), 0 14px 40px rgba(10, 10, 18, .07);
  overflow: hidden;
}
.contact-form__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(95deg, #9CEFFB 0%, #C99FDD 50%, #FFA878 100%);
  pointer-events: none;
}
.form-grid {
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field--full { grid-column: 1 / -1; }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: var(--fs-overline);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-ink);
}
.form-input,
.form-textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--c-blue-mid);
  box-shadow: 0 0 0 3px rgba(2, 110, 252, .15);
}
.form-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}
.form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: var(--sp-3);
  font-size: .88rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.form-consent input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--c-blue-electric);
  flex-shrink: 0;
}
.form-actions {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: flex-end;
}

/* Contact side info cards — stack of three accented blocks */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-side__block {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 4px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 10, 18, .04);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.contact-side__block:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(10, 10, 18, .04), 0 12px 28px rgba(10, 10, 18, .07);
}
/* Colored left-edge strip */
.contact-side__block::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--c-blue-electric);
}
.contact-side__block--blue::before  { background: linear-gradient(180deg, #5BC8FF, #291EFF); }
.contact-side__block--coral::before { background: linear-gradient(180deg, #FFCEA0, #FF7A5A); }
.contact-side__block--peach::before { background: linear-gradient(180deg, #B8A0E5, #FF9E82); }

.contact-side__title {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-side__block--blue  .contact-side__title .sparkle { color: var(--c-blue-mid); }
.contact-side__block--coral .contact-side__title .sparkle { color: var(--c-coral); }
.contact-side__block--peach .contact-side__title .sparkle { color: var(--c-peach); }

.contact-side__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .95rem;
  color: var(--c-ink-soft);
}
.contact-side__list a { color: var(--c-blue-mid); text-decoration: none; }
.contact-side__list a:hover { color: var(--c-blue-electric); text-decoration: underline; }

/* Copy-to-clipboard row (e.g. Y-tunnus) */
.copy-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.copy-row__value {
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -.01em;
  background: none;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-muted);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.copy-btn:hover {
  color: var(--c-blue-electric);
  border-color: var(--c-blue-soft);
  background: rgba(143, 155, 244, .1);
}
.copy-btn:active { transform: scale(.94); }
.copy-btn__check { display: none; }
.copy-btn.is-copied {
  color: #fff;
  background: var(--c-blue-mid);
  border-color: var(--c-blue-mid);
}
.copy-btn.is-copied .copy-btn__icon { display: none; }
.copy-btn.is-copied .copy-btn__check { display: inline-flex; }

.contact-side__body {
  margin: 0 0 var(--sp-2);
  color: var(--c-ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}
.contact-side__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--sp-3);
  margin: 0;
  font-size: .9rem;
}
.contact-side__dl dt { color: var(--c-muted); font-weight: 600; }
.contact-side__dl dd { margin: 0; color: var(--c-ink); }
.contact-side__dl a { color: var(--c-blue-mid); text-decoration: none; word-break: break-all; }
.contact-side__dl a:hover { color: var(--c-blue-electric); text-decoration: underline; }


/* Team grid */
.team-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

.team-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.team-card__portrait {
  aspect-ratio: 1 / 1;
  background: var(--g-aurora-deep);
  position: relative;
  overflow: hidden;
}
.team-card__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.team-card__portrait::after {
  /* Initials shown only when no image — overridden when <img> is present */
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(10,10,18,.18);
  pointer-events: none;
}
.team-card__portrait:has(img)::after { display: none; }
.team-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.team-card__name {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
}
.team-card__role {
  font-size: .82rem;
  color: var(--c-blue-mid);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 var(--sp-2);
}
.team-card__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .92rem;
  margin-top: auto;
}
.team-card__contact a {
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.team-card__contact a:hover { color: var(--c-blue-electric); }
.team-card__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-blue-mid);
}


/* Map embed */
.map-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  margin-top: var(--sp-4);
}
.map-frame iframe {
  width: 100%; height: 100%; border: 0;
  display: block;
}