:root{
      --mk-blue:#2F4A91;
      --mk-blue-700:#1E3268;
      --mk-blue-500:#4E73C2;
      --mk-accent:#8AA76A;

      --mk-canvas:#F7F8FB;
      --mk-surface:#FFFFFF;
      --mk-surface-2:#FAF8F3;
      --mk-surface-3:#E8EEF8;
      --mk-line:#D4D8E3;

      --mk-text:#1E2330;
      --mk-muted:#4B5563;

      --mk-r:16px;
      --mk-r-sm:12px;
      --mk-shadow:0 10px 30px rgba(15, 23, 42, .08);
      --mk-shadow-sm:0 6px 18px rgba(15, 23, 42, .06);

      --mk-font: Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    }

    *{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; font-family:var(--mk-font); color:var(--mk-text); background:var(--mk-canvas); line-height:1.65; }
    a{ color:var(--mk-blue); text-decoration:none; }
    a:hover{ color:var(--mk-blue-700); }

    .container{ max-width:1140px; margin:0 auto; padding:0 20px; }

    /* Header */
    .header{
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.92);
      backdrop-filter:saturate(160%) blur(10px);
      border-bottom:1px solid rgba(212,216,227,.75);
    }
    .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
    .brand{ display:flex; align-items:center; gap:12px; }
    .brand img{ width:44px; height:auto; border-radius:10px; }
    .brand .name{ font-weight:800; letter-spacing:.2px; color:var(--mk-blue-700); }
    nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
    nav a{ display:inline-block; padding:10px 12px; border-radius:12px; font-weight:650; color:var(--mk-blue-700); }
    nav a:hover{ background:var(--mk-surface-3); }

    /* Hero with media (image or video) */
    .hero{
      background:
        radial-gradient(900px 500px at 15% 15%, rgba(47,74,145,.16), transparent 65%),
        radial-gradient(800px 450px at 85% 10%, rgba(138,167,106,.16), transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, var(--mk-canvas) 100%);
      border-bottom:1px solid rgba(212,216,227,.65);
    }
    .hero-inner{ padding:56px 0 36px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center; }
    @media (max-width: 920px){ .hero-inner{ grid-template-columns:1fr; } }

    .kicker{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid rgba(212,216,227,.9); border-radius:999px; background:rgba(255,255,255,.7); color:var(--mk-blue-700); font-weight:650; font-size:.9rem; }
    h1{ margin:14px 0 10px; font-size:clamp(28px, 3.2vw, 42px); line-height:1.12; color:var(--mk-blue-700); }
    .lead{ margin:0 0 18px; font-size:1.05rem; color:var(--mk-muted); max-width:62ch; }

    .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 16px; border-radius:14px; font-weight:750;
      border:1px solid transparent; cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
      box-shadow: var(--mk-shadow-sm);
    }
    .btn:hover{ transform:translateY(-1px); box-shadow: var(--mk-shadow); }
    .btn-primary{ background:var(--mk-blue); color:white; }
    .btn-primary:hover{ background:var(--mk-blue-700); }
    .btn-ghost{ background:rgba(255,255,255,.85); border-color:rgba(212,216,227,.95); color:var(--mk-blue-700); }
    .btn-ghost:hover{ background:white; }

    /* Media frames */
    .mk-media-card{
      background:rgba(255,255,255,.85);
      border:1px solid rgba(212,216,227,.9);
      border-radius:var(--mk-r);
      box-shadow: var(--mk-shadow);
      padding:14px;
    }

    /* Image frame */
    .mk-image{
      border-radius:14px;
      overflow:hidden;
      box-shadow: 0 10px 26px rgba(15,23,42,.12);
      border:1px solid rgba(212,216,227,.75);
      background:#fff;
    }
    .mk-image img{ display:block; width:100%; height:auto; }
    .caption{ margin-top:10px; color:var(--mk-muted); font-size:.95rem; }

    /* Responsive video embed */
   /* OLD iframe helper – renamed to avoid conflict */
.mk-video-embed{
  position:relative;
  padding-top:56.25%;
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
  border:1px solid rgba(212,216,227,.75);
  background:#000;
}

.mk-video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
    .mk-video iframe{
      position:absolute; inset:0;
      width:100%; height:100%;
      border:0;
    }
    .mk-video-note{
      margin-top:10px; color:var(--mk-muted); font-size:.95rem;
    }

    /* Sections */
    section{ padding:52px 0; }
    .section-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
    .section-title h2{ margin:0; color:var(--mk-blue-700); font-size:clamp(22px, 2vw, 30px); }
    .section-title p{ margin:0; color:var(--mk-muted); max-width:70ch; }

    .grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
    .grid-2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
    @media (max-width: 920px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

    .card{
      background:var(--mk-surface);
      border:1px solid rgba(212,216,227,.9);
      border-radius:var(--mk-r);
      box-shadow: var(--mk-shadow-sm);
      padding:18px;
    }
    .card h3{ margin:0 0 8px; color:var(--mk-blue-700); }
    .meta{ color:var(--mk-muted); font-size:.95rem; margin:0 0 10px; }

    /* Gallery */
    .gallery{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:12px;
    }
    .gallery .g1{ grid-column: span 7; }
    .gallery .g2{ grid-column: span 5; }
    .gallery .g3{ grid-column: span 4; }
    .gallery .g4{ grid-column: span 8; }
    @media (max-width: 920px){
      .gallery{ grid-template-columns:1fr; }
      .gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4{ grid-column:auto; }
    }

    .gallery .mk-image{ height:100%; }
    .gallery .mk-image img{ height:100%; object-fit:cover; }

    /* Quote / testimonial strip */
    .quote{
      background: linear-gradient(180deg, rgba(250,248,243,.95), rgba(247,248,251,.7));
      border-top:1px solid rgba(212,216,227,.75);
      border-bottom:1px solid rgba(212,216,227,.75);
      padding:28px 0;
    }
    .quote-inner{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:center; }
    @media (max-width: 920px){ .quote-inner{ grid-template-columns:1fr; } }
    .quote-card{
      background:rgba(255,255,255,.85);
      border:1px solid rgba(212,216,227,.9);
      border-radius:var(--mk-r);
      box-shadow: var(--mk-shadow-sm);
      padding:16px 18px;
    }
    .quote-card b{ color:var(--mk-blue-700); }
    .quote-card small{ color:var(--mk-muted); }

    /* Footer */
    .footer{
      background:linear-gradient(180deg, var(--mk-blue-700), #0F1B3B);
      color:#EAF0FF;
      padding:34px 0;
      border-top:1px solid rgba(255,255,255,.12);
    }
    .footer a{ color:#EAF0FF; text-decoration:underline; text-underline-offset:3px; }
    .footer a:hover{ color:var(--mk-accent); }
    .footer-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; }
    @media (max-width: 920px){ .footer-grid{ grid-template-columns:1fr; } }
    .fine{ opacity:.9; font-size:.95rem; }

    /* Helper pills */
    .pillrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .pill{ font-size:.85rem; padding:6px 10px; border-radius:999px; border:1px solid rgba(212,216,227,.85); background:rgba(232,238,248,.65); color:var(--mk-blue-700); }


/* ---- Content / "prose" styles (Admin Markdown safe defaults) ---- */
.prose{color:var(--mk-text); font-size:1rem}
.prose > :first-child{margin-top:0}
.prose p{margin:.9em 0; color:var(--mk-muted)}
.prose a{color:var(--mk-accent); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{opacity:.9}
.prose h1,.prose h2,.prose h3{color:var(--mk-text); line-height:1.2}
.prose h1{font-size:2rem; margin:1.1em 0 .6em}
.prose h2{font-size:1.6rem; margin:1.2em 0 .6em}
.prose h3{font-size:1.25rem; margin:1.0em 0 .5em}
.prose ul,.prose ol{margin:.8em 0 .8em 1.2em; color:var(--mk-muted)}
.prose li{margin:.25em 0}
.prose blockquote{margin:1.2em 0; padding:.8em 1em; border-left:4px solid rgba(27,95,174,.35); background:rgba(27,95,174,.06); border-radius:12px}
.prose hr{border:0; border-top:1px solid var(--mk-border); margin:1.4em 0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.95em; background:rgba(15,23,42,.06); padding:.1em .35em; border-radius:6px}
.prose pre{background:rgba(15,23,42,.06); padding:14px 16px; border-radius:14px; overflow:auto}
.prose img{max-width:100%; height:auto; border-radius:var(--mk-radius); border:1px solid var(--mk-border); box-shadow:var(--mk-shadow); display:block; margin:1em 0}
.prose figure{margin:1em 0}
.prose figcaption{color:var(--mk-muted); font-size:.9rem; margin-top:.35em}
.prose table{width:100%; border-collapse:separate; border-spacing:0; margin:1.2em 0; overflow:hidden; border:1px solid var(--mk-border); border-radius:14px}
.prose th,.prose td{padding:10px 12px; border-bottom:1px solid var(--mk-border); text-align:left}
.prose th{background:rgba(15,23,42,.03)}
.prose tr:last-child td{border-bottom:0}

/* Page layout */
.page-hero{padding:34px 0 6px; background:linear-gradient(180deg, rgba(27,95,174,.06), transparent)}
.page-hero h1{margin:0 0 10px}
.page-shell{padding:26px 0 54px}
.page-grid{display:grid; grid-template-columns: 1fr; gap:22px}
@media (min-width: 980px){
  .page-grid{grid-template-columns: 1.2fr .8fr}
}
.aside-card{border:1px solid var(--mk-border); border-radius:var(--mk-radius); box-shadow:var(--mk-shadow); background:#fff; padding:18px}
.aside-card h3{margin:0 0 8px}
.aside-list{margin:0; padding-left:18px; color:var(--mk-muted)}
/* Header nav: keep one line on desktop */
@media (min-width: 980px){
  .nav ul{flex-wrap:nowrap}
  .nav ul{gap:14px}
  .nav a{white-space:nowrap; font-size:.98rem}
}
/* ===== MK Modern: production header + hamburger ===== */

.nav a.is-active { opacity: 1; }
.nav a.is-active::after { content:""; display:block; height:2px; margin-top:6px; background: var(--mk-accent); border-radius:999px; }

/* Desktop: keep on one line */
@media (min-width: 980px){
  .nav ul{flex-wrap:nowrap; gap:14px}
  .nav a{white-space:nowrap; font-size:.98rem}
}

/* Toggle button */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--mk-border);
  border-radius:14px;
  background:#fff;
  box-shadow: var(--mk-shadow);
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav-toggle-bar{
  display:block;
  width:18px;
  height:2px;
  background: var(--mk-text);
  border-radius:999px;
}

/* Mobile behavior */
@media (max-width: 979px){
  .header-inner{gap:12px}
  .header-cta-desktop{display:none}
  .nav-toggle{display:flex}

  /* nav becomes slide-down panel */
  .nav{
    position: fixed;
    top: 76px; /* header height-ish */
    left: 12px;
    right: 12px;
    background:#fff;
    border:1px solid var(--mk-border);
    border-radius: 18px;
    box-shadow: var(--mk-shadow);
    padding: 14px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 60;
  }

  .nav ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .nav a{
    display:block;
    padding:10px 12px;
    border-radius: 14px;
    background: rgba(15,23,42,.03);
  }
  .nav a.is-active{
    background: rgba(27,95,174,.10);
  }
  .nav a.is-active::after{display:none}

  .nav-mobile-cta{
    margin-top:10px;
    display:flex;
  }
  .nav-mobile-cta .btn{width:100%; justify-content:center}

  .nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 50;
  }

  /* open state */
  .header.nav-open .nav{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .header.nav-open .nav-overlay{
    opacity: 1;
    pointer-events: auto;
  }
}

/* Prevent scroll when menu open */
.mk-lock{ overflow:hidden; }
/* === Fix: mobile CTA should not show on desktop === */
.nav-mobile-cta{ display:none; }

/* Font Awesome icons inside toggle */
.nav-toggle i{ font-size:18px; line-height:1; }
.nav-toggle [data-mk-icon-close]{ display:none; }

/* open state: swap icons */
.header.nav-open .nav-toggle [data-mk-icon-open]{ display:none; }
.header.nav-open .nav-toggle [data-mk-icon-close]{ display:inline-block; }

/* show mobile cta only on mobile */
@media (max-width: 979px){
  .nav-mobile-cta{ display:flex; margin-top:10px; }
}
/* ===== Layout rhythm: consistent side padding ===== */

/* Default container padding for all sections */
.container{
  padding-left: 20px;
  padding-right: 20px;
}

/* On larger screens, keep the same padding but limit width if your CSS already does */
@media (min-width: 1200px){
  .container{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Hero should never touch edges */
.hero, .section, .cta, .page-hero, .page-shell{
  width: 100%;
}
/* ===== Typography: headings and text always block-level ===== */

h1,h2,h3,h4,h5,h6{
  display:block;
  width:100%;
  clear:both;
}

.lead, .muted, p{
  display:block;
  width:100%;
}

.section-title h2,
.section-title p,
.hero .kicker,
.hero h1,
.hero .lead{
  display:block;
  width:100%;
}

/* Prevent flex children from forcing weird inline wrapping */
.hero-inner > *{
  min-width: 0;
}

/* Better heading wrapping on mobile */
@media (max-width: 979px){
  .hero h1{ font-size: clamp(1.6rem, 4.8vw, 2.2rem); }
  h2{ font-size: clamp(1.3rem, 4.0vw, 1.8rem); }
}
/* ===== Brand logo sizing ===== */
.brand-logo{
  height: 40px;
  width: auto;
  display:block;
}
@media (max-width: 979px){
  .brand-logo{ height: 34px; }
}
/* ===== FIX: Section titles vertical layout ===== */

.section-title{
  display: block !important;
}

.section-title h2{
  margin: 0 0 10px 0;
}

.section-title p{
  margin: 0;
}
/* ================================
   MK Modern – Premium Design Polish
   ================================ */

/* Layout rhythm */
:root{
  --mk-container: 1180px;
  --mk-content: 760px;
  --mk-gap: 18px;
}

/* Ensure container behaves consistently */
.container{
  max-width: var(--mk-container);
  margin-left:auto;
  margin-right:auto;
}

/* More breathing room on mobile */
@media (max-width: 979px){
  .container{ padding-left: 18px; padding-right: 18px; }
}

/* Typography system */
body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep readable line lengths */
.prose,
.section-title,
.hero-copy,
.page-grid > article{
  max-width: var(--mk-content);
}

/* Headings: strong and clean */
h1,h2,h3{
  letter-spacing: -0.02em;
}

.hero h1{
  margin: 0 0 10px;
  line-height: 1.08;
  font-weight: 900;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
}

.section-title h2,
.page-hero h1{
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
}

.lead{
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  margin: 0;
}

.muted{
  line-height: 1.6;
}

/* Spacing polish */
.section{ padding: 54px 0; }
@media (max-width: 979px){
  .section{ padding: 40px 0; }
}
.cta{ padding: 44px 0; }
@media (max-width: 979px){
  .cta{ padding: 36px 0; }
}

/* Header: sticky + scroll state */
.header{
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.header.is-scrolled{
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

/* Brand logo */
.brand{ display:flex; align-items:center; }
.brand-logo{
  height: 40px;
  width: auto;
  display:block;
}
@media (max-width: 979px){
  .brand-logo{ height: 34px; }
}

/* Nav: stronger but minimal */
.nav a{
  color: var(--mk-text);
  opacity: .9;
}
.nav a:hover{ opacity: 1; }
.nav a.is-active{
  opacity: 1;
}

/* Buttons: consistent sizing */
.btn{
  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 800;
}

/* HERO: more premium look */
.hero{
  padding: 40px 0 18px;
  background:
    radial-gradient(900px 300px at 15% 10%, rgba(27,95,174,.12), transparent 60%),
    linear-gradient(180deg, rgba(27,95,174,.06), transparent 60%);
}
@media (max-width: 979px){
  .hero{ padding: 28px 0 14px; }
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 979px){
  .hero-inner{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight: 800;
  font-size: .92rem;
  color: rgba(15,23,42,.78);
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* CTA row spacing */
.cta-row{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }

/* Media card polish */
.mk-media-card{
  border: 1px solid var(--mk-border);
  border-radius: 22px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--mk-shadow);
}
.mk-image{ min-height: 260px; }
@media (max-width: 979px){
  .mk-image{ min-height: 200px; }
}
.mk-media-card .caption{
  padding: 12px 14px;
  color: var(--mk-muted);
  font-size: .95rem;
}

/* Cards: premium hover */
.card{
  border-radius: 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  border-color: rgba(27,95,174,.22);
}
.card .link{
  display:inline-flex;
  margin-top: 8px;
  font-weight: 800;
}

/* Grid: nicer spacing */
.grid-3{
  gap: 16px;
}
@media (max-width: 979px){
  .grid-3{ gap: 12px; }
}

/* CTA: standout panel */
.cta{
  background: linear-gradient(180deg, rgba(27,95,174,.08), rgba(27,95,174,.04));
  border-top: 1px solid rgba(27,95,174,.14);
  border-bottom: 1px solid rgba(27,95,174,.14);
}
.cta-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
@media (max-width: 979px){
  .cta-inner{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Footer polish */
.footer{
  padding: 34px 0;
}
.footer a{ text-decoration: underline; text-underline-offset: 3px; }

/* Keep section-title vertical (your fix, but ensure it stays) */
.section-title{
  display:block !important;
}
.section-title h2{ margin: 0 0 10px 0; }
.section-title p{ margin: 0; }
/* =========================
   Grav Form – MK Modern skin
   ========================= */

form{ margin: 0; }

/* Form wrapper */
.form,
form.form,
form.grav-form{
  max-width: var(--mk-content, 760px);
}

/* Field blocks */
.form-field{
  margin: 0 0 14px;
}

.form-label,
label{
  display:block;
  font-weight: 850;
  margin: 0 0 6px;
  color: var(--mk-text);
}

.form-data,
.form-input-wrapper{
  display:block;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select{
  width: 100%;
  appearance: none;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: var(--mk-text);
  border-radius: 16px;
  padding: 12px 14px;
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

textarea{ min-height: 140px; resize: vertical; }

select{
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Focus */
input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: rgba(27,95,174,.55);
  box-shadow: 0 0 0 4px rgba(27,95,174,.14);
}

/* Placeholder */
::placeholder{
  color: rgba(15,23,42,.45);
}

/* Help text / notes */
.form-extra-wrapper,
.form-field .form-description,
.form-field .hint,
.help-text{
  color: var(--mk-muted);
  font-size: .95rem;
  margin-top: 6px;
}

/* Checkboxes & radios */
input[type="checkbox"],
input[type="radio"]{
  width: 18px;
  height: 18px;
  margin: 0;
}

.form-field.checkbox,
.form-field.radio{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.form-field.checkbox label,
.form-field.radio label{
  margin: 0;
  font-weight: 700;
}

/* Buttons row */
.buttons,
.form-actions,
.form-buttons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Submit buttons – match mk buttons */
button,
input[type="submit"],
input[type="button"],
.btn-submit{
  border: 0;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* Primary submit (common Grav classes) */
button[type="submit"],
input[type="submit"],
.btn.primary,
.button.primary{
  background: var(--mk-accent);
  color: #fff;
  box-shadow: 0 10px 22px rgba(27,95,174,.18);
}

button[type="submit"]:hover,
input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(27,95,174,.22);
}

/* Secondary buttons */
.btn.secondary,
.button.secondary,
button[type="reset"],
input[type="reset"]{
  background: rgba(15,23,42,.04);
  color: var(--mk-text);
  border: 1px solid rgba(15,23,42,.14);
}

/* Disabled */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Messages */
.notices,
.alert,
.form-message{
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
}

.notices.green,
.alert-success{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.08);
}

.notices.red,
.alert-error{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
}

/* Field errors */
.form-field.error input,
.form-field.error textarea,
.form-field.error select{
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}

.form-errors,
.inline-errors,
.form-error{
  color: rgba(185,28,28,.95);
  font-size: .95rem;
  margin-top: 6px;
}

/* Honeypot field often hidden by Grav, but ensure it never breaks layout */
input[name="website"],
input[name="honeypot"]{
  display:none !important;
}
/* ===== Ajankohtaista ===== */
.news-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 979px){
  .news-grid{ grid-template-columns: 1fr; gap: 12px; }
}

.news-card{
  overflow:hidden;
}

.news-media{
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: rgba(15,23,42,.04);
}

.news-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.news-body{
  padding: 14px;
}

.news-meta{
  display:flex;
  gap:10px;
  align-items:center;
  font-size: .9rem;
  color: var(--mk-muted);
  margin-bottom: 8px;
}

.news-tag{
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.10);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  text-transform: none;
}

.news-title{
  margin: 0 0 8px;
  line-height: 1.2;
}
@media (max-width: 980px){
  .grid-3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .grid-3{
    grid-template-columns: 1fr;
  }
}
/* ======================================================
   ARKI MODULE
   Full-width text + optional right image
   ====================================================== */

/* Base layout */
.mk-arki{
  position: relative;
}

.mk-arki .mk-arki-grid{
  display: grid;
  grid-template-columns: 1fr;   /* default: full width */
  gap: 24px;
  align-items: start;
}

/* Make sure text always takes full width unless media exists */
.mk-arki .mk-arki-copy{
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Prevent prose width restrictions inside Arki */
.mk-arki .prose,
.mk-arki .mk-prose-wide{
  max-width: none;
}

/* Two-column layout only when media is present */
@media (min-width: 900px){
  .mk-arki .mk-arki-grid.has-media{
    grid-template-columns: 1.2fr 0.8fr;
    gap: 36px;
  }
}

/* Media column */
.mk-arki .mk-arki-media{
  width: 100%;
}

.mk-arki .mk-arki-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Caption */
.mk-arki .mk-arki-caption{
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* Optional visual polish */
@media (min-width: 900px){
  .mk-arki .mk-arki-media{
    position: relative;
  }
}
/* Arki: prose täydeksi leveydeksi (ei "text column" -rajoitusta) */
.mk-arki .prose,
.mk-arki .mk-prose-wide{
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* ===== UKK teaser/page ===== */
.mk-ukk-list{
  display: grid;
  gap: 14px;
}

.mk-ukk-item{
  border: 1px solid rgba(100,116,139,.2);
  border-radius: 14px;
  padding: 14px 16px;
}

.mk-ukk-q{
  margin: 0 0 6px 0;
  font-size: 1.05rem;
}

.mk-ukk-a{
  margin: 0;
  line-height: 1.55;
}
/* ===== FIX: CTA primary button hover text disappears ===== */

.btn.btn-primary{
  color: #fff;              /* varmistetaan lähtötila */
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible{
  color: #fff;              /* pidä teksti näkyvänä hover/focus */
  text-decoration: none;
}
/* FIX: Primary button hover keeps text visible */
a.btn-primary:hover,
a.btn-primary:focus-visible,
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible{
  color: #fff !important;
}
/* ===== CTA module (contact-cta) – production polish ===== */

.cta{
  padding: 56px 0;
}

.cta .cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,102,194,.08), rgba(10,102,194,.03));
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: var(--mk-shadow-sm);
}

.cta .cta-text{
  margin: 10px 0 0 0;
  max-width: 62ch;
}

.cta .cta-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

@media (max-width: 860px){
  .cta .cta-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .cta .cta-actions{
    width: 100%;
    justify-content:flex-start;
  }
}

/* Ensure button text never disappears on hover (global safety) */
.btn,
.btn:hover,
.btn:focus,
.btn:active{
  text-decoration:none;
}

.btn-primary:hover,
.btn-primary:focus{
  color:#fff;
}

.btn-ghost:hover,
.btn-ghost:focus{
  color: var(--mk-blue-700);
}
/* ===== UKK page ===== */

.mk-ukk-list{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.mk-ukk-item{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: var(--mk-shadow-sm);
}

.mk-ukk-q{
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0 0 8px 0;
}

.mk-ukk-a.prose{
  margin: 0;
}

.mk-ukk-a.prose p{
  margin: 0;
}
/* ===== UKK Accordion ===== */

.mk-accordion{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.mk-acc-item{
  border: 1px solid rgba(212,216,227,.95);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--mk-shadow-sm);
  overflow: clip;
}

.mk-acc-summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  font-weight: 800;
  color: var(--mk-text);
}

.mk-acc-summary::-webkit-details-marker{
  display: none;
}

.mk-acc-q{
  font-size: 1.05rem;
  line-height: 1.25;
}

.mk-acc-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .05);
  color: var(--mk-blue-700);
  flex: 0 0 auto;
  transition: transform .18s ease;
}

/* rotate icon when open */
.mk-acc-item[open] .mk-acc-icon{
  transform: rotate(180deg);
}

.mk-acc-body{
  padding: 0 16px 16px 16px;
  border-top: 1px solid rgba(212,216,227,.65);
}

.mk-acc-body.prose{
  max-width: none;
}

/* subtle hover */
.mk-acc-item:hover{
  box-shadow: var(--mk-shadow);
}
/* =========================================================
   Ajankohtaista (news) — cards + list
   ========================================================= */

.news-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}

@media (min-width: 680px){
  .news-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 1020px){
  .news-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Card wrapper (reuse existing .card look, but ensure layout) */
.news-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
}

/* Optional media at top */
.news-media{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  margin-bottom: 12px;
}

.news-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body */
.news-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Meta row */
.news-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.2;
}

.news-date{
  font-size: .92rem;
  opacity: .85;
}

/* Tag pill */
.news-tag{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 750;
  letter-spacing: .01em;
  background: rgba(16, 84, 161, 0.10); /* mk-blue tint */
  color: var(--mk-blue-700);
  border: 1px solid rgba(16, 84, 161, 0.18);
}

/* Title + lead clamp */
.news-title{
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
}

.news-card .muted{
  margin: 0;
}

/* Clamp lead (fallback safe) */
.news-lead{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* CTA text in card */
.news-card .link{
  margin-top: auto;
  font-weight: 750;
}

/* Hover: subtle, consistent */
.news-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--mk-shadow);
}

.news-card{
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* If no image, keep spacing consistent */
.news-card.no-media .news-media{
  display: none;
}

/* News list page: wrapper spacing (optional) */
.news-list{
  margin-top: 12px;
}
/* ===== Video embed (default pages) ===== */
.mk-video{ margin-top:16px; }
.mk-video-title{ font-weight:850; margin:0 0 10px 0; }
.mk-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--mk-shadow-sm);
  background: rgba(0,0,0,.04);
}
.mk-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.mk-video-note{ margin-top:10px; }
/* ===== Video split module (Asuminen ja arki) ===== */

.mk-video .mk-video-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items:start;
}

@media (min-width: 900px){
  .mk-video .mk-video-grid.has-media{
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
  }
}

/* keep text full width when no media */
.mk-video .mk-prose-wide{ max-width:none; }

.mk-video .mk-video-frame{
  width:100%;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--mk-shadow-sm);
  background: rgba(0,0,0,.04);
}

.mk-video .mk-video-frame iframe{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  display:block;
}

.mk-video .mk-video-frame video{
  width:100%;
  height:auto;
  display:block;
}
/* ===== Video split module (safe defaults) ===== */
.mk-video .mk-video-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items:start;
}

@media (min-width: 900px){
  .mk-video .mk-video-grid{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
  }
}

.mk-video .mk-prose-wide{ max-width:none; }

.mk-video .mk-video-frame{
  width:100%;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--mk-shadow-sm);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(212,216,227,.95);
}

.mk-video .mk-video-frame iframe,
.mk-video .mk-video-frame video{
  width:100%;
  display:block;
  aspect-ratio: 16 / 9;
  height:auto;
  background: #000;
}

.mk-video .mk-video-placeholder{
  border-radius:14px;
  border:1px dashed rgba(212,216,227,.95);
  background: rgba(255,255,255,.55);
  padding: 18px;
}

.mk-video .mk-video-ph-inner{
  display:flex;
  gap: 14px;
  align-items:center;
}

.mk-video .mk-video-ph-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(15, 79, 171, .10);
  color: var(--mk-blue);
}

.mk-video .mk-video-caption{
  margin-top: 10px;
  font-size: .95rem;
  opacity: .85;
}
/* ===== Video module (mk-video) ===== */

.mk-video .mk-video-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

@media (min-width: 900px){
  .mk-video .mk-video-grid{
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
  }
}

.mk-video .mk-video-media{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Embed wrapper (renamed earlier) */
.mk-video-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(212,216,227,.85);
  box-shadow: var(--mk-shadow-sm);
  background: #000; /* ok for iframe area only */
}

.mk-video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* MP4 player */
.mk-video-player{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(212,216,227,.85);
  box-shadow: var(--mk-shadow-sm);
  background: #0b1220;
}

.mk-video-el{
  width:100%;
  height:auto;
  display:block;
  background:#000;
}

/* Overlay play button */
.mk-video-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.18));
  border:0;
  cursor:pointer;
  color: #fff;
}

.mk-video-play{
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}

.mk-video-overlay-text{
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.mk-video-player.is-playing .mk-video-overlay{
  display:none;
}

/* Placeholder */
.mk-video-placeholder{
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,.7);
  background: rgba(241,245,249,.6);
  box-shadow: var(--mk-shadow-sm);
  padding: 18px;
}

.mk-video-ph-inner{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

.mk-video-ph-icon{
  width:44px;
  height:44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(59,130,246,.12);
  color: var(--mk-blue-700);
}

.mk-video-caption{
  font-size: .95rem;
  opacity: .85;
}

/* Make prose not narrow inside this module */
.mk-video .mk-prose-wide{
  max-width: none;
}
/* ===== Video module (mk-video) ===== */
.mk-video .mk-video-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

@media (min-width: 900px){
  .mk-video .mk-video-grid{
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
  }
}

.mk-video .mk-video-media{
  background: var(--mk-card);
  border: 1px solid rgba(212,216,227,.95);
  border-radius: 18px;
  box-shadow: var(--mk-shadow-sm);
  overflow: hidden;
}

.mk-video .mk-video-media iframe,
.mk-video .mk-video-media video{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  background: transparent; /* ei mustaa reunoille */
}

.mk-video .mk-video-placeholder{
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(180deg, rgba(15,81,145,.06), rgba(15,81,145,.02));
}

.mk-video .mk-video-ph-inner{
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  text-align: left;
}

.mk-video .mk-video-ph-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,81,145,.10);
  color: var(--mk-blue-700);
  font-weight: 900;
}

.mk-video .mk-video-caption{
  padding: 12px 14px;
  font-size: .95rem;
  opacity: .85;
  border-top: 1px solid rgba(212,216,227,.95);
}
/* ===== Prose baseline ===== */
.prose h2, .prose h3{
  margin: 0 0 10px 0;
}
.prose p{
  margin: 0 0 12px 0;
}
.prose ul{
  margin: 0 0 12px 0;
  padding-left: 1.2rem;
}
.container{
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 700px){
  .container{ padding-left: 20px; padding-right: 20px; }
}
/* ===== Steps module (mk-steps) ===== */

.mk-steps .mk-steps-list{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 900px){
  .mk-steps .mk-steps-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.mk-steps .mk-step{
  padding: 16px;
}

.mk-steps .mk-step-top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.mk-steps .mk-step-num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  background: rgba(15, 92, 182, .10); /* käyttää teeman sinistä henkeä */
  color: var(--mk-blue-700, #0a4aa6);
  border: 1px solid rgba(15, 92, 182, .18);
  flex: 0 0 auto;
}

.mk-steps .mk-step-title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.mk-steps .mk-step-text{
  margin: 0;
}

.mk-steps .mk-steps-cta{
  margin-top: 16px;
}
/* ===== Arjen kulku (mk-flow) ===== */

.mk-flow .mk-flow-list{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* Desktop: 2 columns */
@media (min-width: 900px){
  .mk-flow .mk-flow-list{
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
  }
}

.mk-flow .mk-flow-item{
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
}

/* Vertical timeline line (mobile) */
.mk-flow .mk-flow-item::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: -18px;
  width: 2px;
  background: rgba(15, 23, 42, 0.10);
}
.mk-flow .mk-flow-item:last-child::before{ display: none; }

.mk-flow .mk-flow-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(15, 23, 42, 0.20);
  margin-top: 12px;
}

.mk-flow .mk-flow-card{
  padding: 16px;
}

.mk-flow .mk-flow-head{
  display: flex;
  gap: 10px;
  align-items: center;
}

.mk-flow .mk-flow-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 132, 199, 0.10); /* sinisen sävy (hallittu) */
}

.mk-flow .mk-flow-title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.mk-flow .mk-flow-text{
  margin: 10px 0 0;
}
/* Arjen kulku – loppukorostus */

.mk-flow-closing{
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(2, 132, 199, 0.06);
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
}
/* Näin etenemme – hienosäätö */

.mk-steps-list{
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

@media (min-width: 900px){
  .mk-steps-list{
    grid-template-columns: repeat(2, 1fr);
  }
}

.mk-step{
  padding: 20px;
  position: relative;
}

.mk-step-num{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(2,132,199,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

/* =========================================================
   MK Modern — SAFE CLEANUP PATCH (non-breaking)
   Place at END of CSS to:
   - define missing CSS variables used elsewhere
   - remove edge-case visual bugs
   - choose one consistent "final" rule where duplicates exist
   ========================================================= */

/* 1) Define variables that are referenced but not defined earlier */
:root{
  /* aliases used later in the file */
  --mk-border: var(--mk-line);
  --mk-radius: var(--mk-r);
  --mk-card: var(--mk-surface);
}

/* 2) Container padding: keep ONE system (avoid flip-flop between 16/20/24) */
.container{
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 1200px){
  .container{
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 979px){
  .container{
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 3) Prose: keep comfortable paragraph spacing (your later "baseline" set to 0) */
.prose p{ margin: .9em 0; }

/* 4) mk-video: pick ONE final definition (use your latest "no black edges" intent) */
.mk-video .mk-video-media{
  background: var(--mk-card);
  border: 1px solid rgba(212,216,227,.95);
  border-radius: 18px;
  box-shadow: var(--mk-shadow-sm);
  overflow: hidden;
}
.mk-video .mk-video-media iframe,
.mk-video .mk-video-media video{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  background: transparent;
}

/* 5) Buttons: ensure primary text never disappears */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus-visible{
  color:#fff !important;
  text-decoration:none;
}

/* 6) Steps: avoid double styling conflicts by scoping the last rules */
.mk-steps .mk-steps-list{ gap: 16px; margin-top: 18px; }
.mk-steps .mk-step{ padding: 16px; }
.mk-steps .mk-step-num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(2,132,199,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}
/* --- Contact cards (Yhteystiedot) --- */
.mk-contact-card-inner{display:flex;gap:28px;align-items:center;flex-wrap:wrap;}
.mk-contact-photo img{width:180px;height:180px;object-fit:cover;border-radius:999px;border:1px solid var(--mk-line);}
.mk-contact-name{margin:0 0 4px 0;}
.mk-contact-role{margin:0 0 10px 0;}
.mk-contact-line{margin:6px 0;display:flex;gap:10px;align-items:center;}
.mk-contact-line i{width:18px;text-align:center;color:var(--mk-blue-700);}
.mk-billing-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width: 860px){.mk-billing-grid{grid-template-columns:1.2fr .8fr;}}
/* Contact cards */
.mk-contact .container { max-width: 980px; } /* optional: keeps it nice */

.mk-contact-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
}

.mk-contact-media img{
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 14px; /* not round, but soft */
  display: block;
}

.mk-contact-name{
  margin: 0.2rem 0 0;
}

.mk-contact-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
}

.mk-contact-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.mk-contact-link i{
  width: 1.1em;
  text-align: center;
  opacity: .85;
}

.mk-contact-details{
  margin-top: 10px;
}

.mk-contact-details ul{
  margin-top: 0.5rem;
}

/* Reduce vertical spacing between contact sections (cards) */
.section.mk-contact{
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Mobile: stack image above content */
@media (max-width: 700px){
  .mk-contact-card{
    grid-template-columns: 1fr;
  }
  .mk-contact-media img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}
/* Contact cards */
.mk-contact-card{
  display: grid;
  gap: 14px;
  align-items: start;
  padding: 16px;
}

/* Default: with media -> 2 columns */
.mk-contact-card.has-media{
  grid-template-columns: 132px 1fr;
}

/* No media -> single column (no empty left gutter) */
.mk-contact-card.no-media{
  grid-template-columns: 1fr;
}

.mk-contact-media img{
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.mk-contact-name{ margin: 0.2rem 0 0; }

.mk-contact-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
}

.mk-contact-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.mk-contact-link i{
  width: 1.1em;
  text-align: center;
  opacity: .85;
}

.mk-contact-details{ margin-top: 10px; }
.mk-contact-details ul{ margin-top: .5rem; }

/* Reduce vertical spacing between contact cards */
.section.mk-contact{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Mobile stack */
@media (max-width: 700px){
  .mk-contact-card.has-media{ grid-template-columns: 1fr; }
  .mk-contact-media img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}
/* Contact card: jos kuva puuttuu, älä varaa tyhjää mediasaraketta */
.mk-contact-card{
  display: grid;
  gap: 14px;
  align-items: start;
  padding: 16px;
  grid-template-columns: 132px 1fr; /* default: kuvan kanssa */
}

/* Toimii moderneissa selaimissa */
.mk-contact-card:not(:has(.mk-contact-media)){
  grid-template-columns: 1fr;
}

/* Fallback jos :has ei jostain syystä toimi:
   - pidä tämä mukana, ja lisää twigissä luokka "no-media" (alla kohta A2) */
.mk-contact-card.no-media{
  grid-template-columns: 1fr;
}

.mk-contact-media img{
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 14px; /* ei pyöreä */
  display: block;
}

/* tiiviimpi väli korttien väliin */
.section.mk-contact{
  padding-top: 18px;
  padding-bottom: 18px;
}
/* Sticky form in right column */
.page-grid .aside-card {
  position: sticky;
  top: 88px;            /* säädä: headerin korkeus + pieni marginaali */
  align-self: start;    /* varmistaa että sticky toimii gridissä */
}
/* External link icon (UKK page + teaser) */
.prose a[target="_blank"]::after,
.mk-ukk-a a[target="_blank"]::after {
  content: "↗" !important;
  display: inline-block;
  margin-left: .35em;
  font-size: .9em;
  opacity: .85;
  vertical-align: text-top;
}
.mk-media-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 900px){
  .mk-media-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px){
  .mk-media-grid{ grid-template-columns:1fr; }
}
.mk-media-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}
/* Pajatoiminta / media-galleria */
.mk-media-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px; /* vähän tiiviimpi */
}

@media (max-width: 900px){
  .mk-media-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .mk-media-grid{ grid-template-columns:1fr; }
}

.mk-media-item{
  margin:0;
  overflow:hidden;
  border-radius:14px; /* kulmat ok, ei pyöreä */
}

.mk-media-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 4 / 3;   /* tekee rivit tasaisiksi */
  transform: translateZ(0);
}

.mk-media-item img:hover{
  transform: scale(1.02);
  transition: transform .2s ease;
}
/* Video-moduuli: tasaa otsikko+teksti ja video samalle ylälinjalle */
.mk-video .mk-video-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start; /* tärkein */
}

/* Poista “section-title” ylämarginaali vain video-osiossa */
.mk-video .mk-video-copy .section-title{
  margin-top: 0;
}

/* Varmista ettei media-palstalla ole “ylimääräistä” ylätilaa */
.mk-video .mk-video-media{
  margin-top: 0;
  align-self: start;
}

/* Responsiivisuus */
@media (max-width: 900px){
  .mk-video .mk-video-grid{
    grid-template-columns: 1fr;
  }
}
/* Video-moduuli: tasaa palstat paremmin keskenään */
.mk-video .mk-video-grid{
  align-items: center; /* oli start */
}

/* varmistus desktopissa */
@media (min-width: 900px){
  .mk-video .mk-video-grid{
    align-items: center;
  }
}
/* Video-moduuli: poista ylimääräinen yläväli tekstiblokin ensimmäiseltä otsikolta */
.mk-video .mk-video-copy .prose h2:first-child {
  margin-top: 0;
}

/* varmistetaan että molemmat palstat alkavat samalta tasolta */
.mk-video .mk-video-grid {
  align-items: start;
}
/* Muokkaukset ja säädöt */
/* ===== Logo – larger balanced version ===== */

.brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* Desktop */
.brand-logo,
.brand img{
  height: 88px;     /* isompi ja selkeä */
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 16px; /* yhtenäinen korttien kanssa */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
  transition: transform .2s ease;
}

/* Hover hyvin kevyt */
.brand:hover img{
  transform: scale(1.04);
}

/* Header tasapainoon */
.header-inner{
  align-items: center;
  min-height: 96px;
}

/* Mobile */
@media (max-width: 920px){
  .brand-logo,
  .brand img{
    height: 64px;
  }

  .header-inner{
    min-height: 76px;
  }
}

/* === Navigation – yhtenäinen muotokieli === */

/* Nav-linkit kuten muutkin elementit (korttimainen, ei pilleri) */
.nav a{
  padding: 10px 14px;
  border-radius: 12px; /* sama henki kuin korteissa */
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* Hover – lämmin, pehmeä sävy */
.nav a:hover{
  background: rgba(90, 80, 60, .08); /* lämmin harmaa-beige */
}

/* Active – selkeä mutta lämmin */
.nav a.is-active{
  background: rgba(90, 80, 60, .14);
  box-shadow: inset 0 0 0 1px rgba(90, 80, 60, .20);
  border-bottom: 0 !important;
}

/* Focus */
.nav a:focus-visible{
  outline: 2px solid rgba(17, 27, 60, .35);
  outline-offset: 3px;
}
/* Sivuston lämmitys */
/* === Warm theme override === */

:root{

  /* Tausta – ei enää kylmä siniharmaa */
  --mk-canvas: #f7f5f2;       /* lämmin vaalea beige-harmaa */

  /* Kortit */
  --mk-surface: #ffffff;
  --mk-surface-2: #f2eee8;    /* kevyt lämmin sävy */

  /* Rajaviivat */
  --mk-line: #e4ddd4;

  /* Pääteksti */
  --mk-text: #1f1f1f;

  /* Himmeä teksti */
  --mk-muted: #6f665d;

  /* Korostus (hillitty metsänvihreä) */
  --mk-accent: #6f8f5b;

  /* Sininen hieman syvemmäksi ja vähemmän kylmäksi */
  --mk-blue: #2f4a91;
}
/* Paperimainen */
body{
  background-color: var(--mk-canvas);
}
/* === Warm theme polish (subtle) === */

/* Korttien varjot pehmeämmiksi (vähemmän “kylmä laatikko”) */
.card,
.aside-card{
  box-shadow: 0 10px 30px rgba(24, 18, 10, .06);
  border: 1px solid var(--mk-line);
}

/* Otsikoihin aavistus lämpöä (ei ruskeaksi, vain vähemmän sinertävä) */
h1,h2,h3{
  color: #1e1b16;
}

/* Linkit: hieman lämpimämpi sininen + parempi hover */
a{
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover{
  text-decoration-thickness: .12em;
}

/* CTA:t: aavistus lämpöä taustaan */
.cta{
  background: var(--mk-surface-2);
  border: 1px solid var(--mk-line);
}

/* Hero-alue: hyvin kevyt “paperigradient” */
.page-hero{
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0)),
              linear-gradient(180deg, rgba(242,238,232,.55), rgba(247,245,242,0));
}