/* Mud Season Care: plörts heros + popup (05.11.2026) */
.msc-splat {
  position: absolute; z-index: 6; right: clamp(1.5rem, 7vw, 8rem); top: clamp(6.5rem, 21vh, 13rem);
  width: clamp(230px, 19vw, 320px); aspect-ratio: 900 / 720; padding: 0; color: #f6ecd8;
  transform-origin: 50% 46%; animation: msc-plorts .75s cubic-bezier(.2, 1.6, .4, 1) 1s both;
  -webkit-tap-highlight-color: transparent;
}
.msc-splat img { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; max-width: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); transition: transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.msc-splat-text { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-4deg); width: 84%; display: flex; flex-direction: column; align-items: center; gap: .15em; text-align: center; transition: transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.msc-splat-eyebrow { font-size: clamp(.5rem, .62vw, .62rem); letter-spacing: .18em; text-transform: uppercase; color: #fff; font-weight: 800; }
.msc-splat-title { font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; font-size: clamp(1.02rem, 1.5vw, 1.42rem); line-height: 1; color: #fac82e; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.msc-splat-more { font-size: clamp(.54rem, .66vw, .68rem); color: #fff; font-weight: 700; margin-top: .3em; letter-spacing: .04em; }
.msc-splat:hover img, .msc-splat:focus-visible img { transform: scale(1.06) rotate(-1.5deg); }
.msc-splat:hover .msc-splat-text, .msc-splat:focus-visible .msc-splat-text { transform: translate(-50%, -50%) rotate(-4deg) scale(1.06); }
.msc-splat:focus-visible { outline: 2px solid #e7ce9c; outline-offset: 2px; border-radius: 50%; }
/* Arvutivaates vasakul, pealkirja kõrval. Pealkiri on 827 px lai ja keskel: plörts mahutatakse selle kõrvale. */
@media (min-width: 1280px) and (min-height: 640px) {
  .msc-splat {
    --w: min(320px, calc((100vw - 827px) / 2 - 28px));
    right: auto; top: auto; width: var(--w);
    left: max(1rem, calc((100vw - 827px) / 2 - var(--w) - 40px));
    bottom: clamp(5.5rem, 12.5vh, 8.5rem);
  }
  .msc-splat-title { font-size: calc(var(--w) / 12.6); }
  .msc-splat-eyebrow { font-size: calc(var(--w) / 24); }
  .msc-splat-more { font-size: calc(var(--w) / 21); }
}
@keyframes msc-plorts { 0% { transform: scale(.15) rotate(-14deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (max-width: 720px) {
  .msc-splat { right: 50%; margin-right: -100px; top: clamp(5.2rem, 13svh, 7.5rem); width: 200px; }
  .msc-splat-title { font-size: 1rem; }
}
/* Telefon külili: nurka, pealkirjast eemale */
@media (max-height: 560px) and (min-width: 560px) { .msc-splat { width: 132px; right: .5rem; margin-right: 0; top: 3.9rem; } .msc-splat-title { font-size: .66rem; } .msc-splat-eyebrow, .msc-splat-more { font-size: .46rem; } }

.msc-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: clamp(.75rem, 2.5vw, 2rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.msc-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.msc-backdrop { position: absolute; inset: 0; background: rgba(8, 5, 2, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.msc-card { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #12100d; border: 1px solid rgba(214, 182, 122, .5); border-radius: 10px; box-shadow: 0 0 0 1px rgba(214,182,122,.12), 0 30px 90px -20px #000; color: var(--color-text); transform: translateY(24px) scale(.96); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.msc-modal.is-open .msc-card { transform: none; }
.msc-close { position: sticky; float: right; top: .75rem; margin: .75rem .75rem 0 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; z-index: 3; transition: transform .3s ease, border-color .3s ease; }
.msc-close svg { width: 18px; height: 18px; }
.msc-close:hover { transform: rotate(90deg); border-color: #e7ce9c; }
.msc-head { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 5vw, 2.5rem) .25rem; overflow: hidden; }
.msc-head-splat { position: absolute; left: -90px; top: -120px; width: 400px; opacity: .85; pointer-events: none; }
.msc-eyebrow { position: relative; margin: 0 0 .35rem; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: #fff; font-weight: 800; }
.msc-title { position: relative; margin: 0; font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; font-size: min(2.75rem, calc((100vw - 126px) / 9.3)); line-height: 1.02; color: #fac82e; }
.msc-lead { position: relative; margin: .8rem 0 0; color: #ececec; font-weight: 600; font-size: 1rem; line-height: 1.55; }
.msc-body { padding: 1.1rem clamp(1.25rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2rem); }
.msc-steps { list-style: none; margin: 0 0 1.15rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; position: relative; }
.msc-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 25px; height: 2px; background: linear-gradient(90deg, #4a3322, #d6b67a); }
.msc-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: #ececec; text-align: center; }
.msc-steps b { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.msc-steps li:nth-child(1) b { background: #4a3322; } .msc-steps li:nth-child(2) b { background: #6f5230; } .msc-steps li:nth-child(3) b { background: #9d7c46; } .msc-steps li:nth-child(4) b { background: #d6b67a; color: #1a130a; }
.msc-prices { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.1rem; }
.msc-price { padding: .75rem .9rem; border: 1px solid rgba(214,182,122,.35); border-radius: 8px; background: rgba(214,182,122,.06); }
.msc-price span { display: block; font-size: .8rem; font-weight: 700; color: #ececec; }
.msc-price strong { display: block; font-family: var(--font-serif); font-size: 2.1rem; line-height: 1.1; color: #e7ce9c; font-weight: 700; }
.msc-price em { font-style: normal; font-size: .76rem; font-weight: 600; color: #c9c9c9; }
.msc-list { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .5rem; font-size: .93rem; font-weight: 600; line-height: 1.45; color: #f0f0f0; }
.msc-list li { position: relative; padding-left: 1.5rem; }
.msc-list li::before { content: ""; position: absolute; left: .15rem; top: .46em; width: .6rem; height: .6rem; border-radius: 50% 50% 50% 0; transform: rotate(135deg); background: #d6b67a; }
.msc-cta { position: sticky; bottom: .75rem; z-index: 2; box-shadow: 0 0 0 .8rem #12100d, 0 -16px 18px 10px #12100d; display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 1.25rem; border-radius: 8px; background: #fac82e; color: #14100a; font-weight: 800; font-size: 1.08rem; letter-spacing: .02em; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.msc-cta:hover { background: #ffd95c; transform: translateY(-2px); }
body.msc-open { overflow: hidden; }
@media (max-width: 420px) { .msc-steps li { font-size: .68rem; } .msc-steps b { width: 44px; height: 44px; font-size: 1.3rem; } .msc-steps::before { top: 21px; } }
@media (prefers-reduced-motion: reduce) { .msc-splat { animation: none; } .msc-splat img, .msc-splat-text, .msc-card, .msc-close, .msc-cta { transition: none; } }