/* Hero: tummansininen tekstipuoli ja kuva (split), pelkkä teksti (plain) tai taustakuva (cover). Mobiilissa kuva tekstin alla. */
.mt-hero{display:grid;background:var(--mt-navy);color:var(--mt-white)}
.mt-hero__copy{display:flex;flex-direction:column;justify-content:center;gap:1.25rem;padding:2.5rem var(--mt-pad) 3rem}
.mt-hero__crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;list-style:none;font-size:var(--mt-fs-sm)}
.mt-hero__crumbs li{display:inline-flex;align-items:center;gap:.5rem}
.mt-hero__crumbs a{display:inline-block;padding-block:.25rem;color:var(--mt-on-navy-muted);text-decoration:none}
.mt-hero__crumbs a:hover{color:var(--mt-white);text-decoration:underline}
.mt-hero__crumbs .mt-icon{color:var(--mt-on-navy-border)}
.mt-hero__crumbs+.mt-eyebrow{margin-block-start:.75rem}
.mt-hero__title{margin:0;max-inline-size:41rem;overflow-wrap:break-word;hyphens:manual;font:400 var(--mt-fs-h1)/1.15 var(--mt-font-display);letter-spacing:-.025em;text-wrap:balance}
.mt-hero__lead{margin:0;max-inline-size:41rem;font-size:var(--mt-fs-xl);line-height:1.5;color:var(--mt-on-navy-soft)}
.mt-hero__actions{display:flex;flex-wrap:wrap;gap:.875rem;margin:.375rem 0 0}
.mt-hero__media{position:relative;min-block-size:14rem;overflow:clip}
.mt-hero__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
@media (min-width:64rem){
  .mt-hero{grid-template-columns:minmax(0,5fr) minmax(0,4fr);min-block-size:31.25rem}
  .mt-hero__copy{padding-block:4rem;padding-inline:max(var(--mt-pad),calc((100vw - var(--mt-max)) / 2)) 3.5rem}
  .mt-hero__media::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:30%;background:linear-gradient(90deg,var(--mt-navy),var(--mt-navy-0))}
}

/* Pelkkä teksti ja taustakuva: yksi sarake. Isommat otsikkokoot: tarve --mt-fs-display (52 px) ja --mt-fs-display-xl (60 px), kunnes tokenit on lisätty. */
.mt-hero__bg{position:absolute;inset:0;z-index:-1;overflow:clip}
.mt-hero__bg img{inline-size:100%;block-size:100%;object-fit:cover}
.mt-hero__bg::after{content:"";position:absolute;inset:0;background:color-mix(in oklch,var(--mt-navy) 82%,transparent)}
.mt-hero--plain,.mt-hero--cover{grid-template-columns:minmax(0,1fr)}
.mt-hero--plain .mt-hero__title,.mt-hero--cover .mt-hero__title{overflow-wrap:break-word;hyphens:manual}
.mt-hero--cover{position:relative;isolation:isolate;align-items:center;min-block-size:32rem}
.mt-hero--plain .mt-hero__title{max-inline-size:62.5rem;font-size:var(--mt-fs-display,var(--mt-fs-h1))}
.mt-hero--plain .mt-hero__lead{max-inline-size:47.5rem}
.mt-hero--cover .mt-hero__title{max-inline-size:64rem;font-size:var(--mt-fs-display-xl,var(--mt-fs-h1))}
.mt-hero--cover .mt-hero__copy{gap:1.375rem;padding-block:4rem}
/* Ankkurilinkit */
.mt-hero__anchors ul{display:flex;flex-wrap:wrap;gap:.625rem;margin:0;padding:0;list-style:none}
.mt-hero__anchors a{display:inline-flex;align-items:center;min-block-size:2.5625rem;padding:.625rem 1rem;border:.0625rem solid color-mix(in oklch,var(--mt-white) 30%,transparent);border-radius:var(--mt-radius-pill);color:var(--mt-white);font:500 var(--mt-fs-md)/1.5 var(--mt-font-body);text-decoration:none;transition:background-color var(--mt-transition),color var(--mt-transition)}
.mt-hero__anchors a:hover{background:var(--mt-white);color:var(--mt-navy)}
.mt-hero__copy .mt-hero__anchors{margin-block-start:.625rem}
.mt-hero__anchors--below{grid-column:1/-1;padding:1.5rem var(--mt-pad) 0;background:var(--mt-white)}
.mt-hero__anchors--below a{border-color:var(--mt-line);color:var(--mt-ink)}
.mt-hero__anchors--below a:hover{border-color:var(--mt-navy);background:var(--mt-navy);color:var(--mt-white)}
@media (min-width:64rem){
  .mt-hero--plain{min-block-size:0}
  .mt-hero--cover{min-block-size:37.5rem}
  .mt-hero--plain .mt-hero__copy{gap:1.125rem;padding-block:4.5rem 3.5rem;padding-inline:max(var(--mt-pad),calc((100vw - var(--mt-max)) / 2))}
  .mt-hero--cover .mt-hero__copy{padding-block:var(--mt-space-section-lg);padding-inline:max(var(--mt-pad),calc((100vw - var(--mt-max)) / 2))}
  .mt-hero__bg::after{background:linear-gradient(90deg,color-mix(in oklch,var(--mt-navy) 95%,transparent),color-mix(in oklch,var(--mt-navy) 65%,transparent) 50%,color-mix(in oklch,var(--mt-navy) 20%,transparent))}
  .mt-hero--anchors-below{min-block-size:0;grid-template-rows:auto auto}
  .mt-hero--split.mt-hero--anchors-below{grid-template-rows:minmax(31.25rem,auto) auto}
  .mt-hero__anchors--below{padding-inline:max(var(--mt-pad),calc((100vw - var(--mt-max)) / 2))}
}
@media (prefers-reduced-motion:reduce){.mt-hero__anchors a{transition:none}}