/* Sally / Mer liv. A bright extension of the original blue identity.
   Scene animation, scroll color and all motion obey the existing pause control. */
:root { --accent-paper:#fffef8; --accent-mist:#dceefa; --accent-sky:#74b8e5; --accent-soft:#dceefa; --blue-air:#dceefa; }
.site-header::before { background:#18111f; }
.btn { border-radius:999px; padding-inline:1.6rem; }
.btn::before { background:var(--accent-paper); }
.header-cta { --btn-bg:var(--color-brand); }
.scroll-progress { height:4px; background:#74b8e5; }
.motion-hero { background:var(--blue-air); isolation:isolate; padding-top:3.6rem; }
.motion-hero .hero-grid,.hero-bottom { position:relative; z-index:1; }
.motion-hero .hero-title { font-size:clamp(4.3rem,7.5vw,7.7rem); letter-spacing:-.055em; }
.motion-hero .hero-title em { position:relative; isolation:isolate; }
.motion-hero .hero-title em::after { content:""; position:absolute; z-index:-1; left:-.02em; right:-.04em; bottom:.09em; height:.17em; border-radius:50%; background:var(--accent-paper); transform:rotate(-2deg); transform-origin:left; animation:highlight-draw 1.2s var(--ease-out) .6s both; }
.hero-copy .lead { color:#1c4a7c; }
.hero-enter { display:flex; align-items:center; gap:.7rem; }
.hero-details > span { color:#1c4a7c; }
.hero-bottom { color:#1c4a7c; border-color:#1c4a7c30; }
.hero-atmosphere { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.air-bubble { position:absolute; border:1px solid #fff8; border-radius:50%; background:linear-gradient(135deg,#fff5,#fff0 70%); animation:air-drift 9s ease-in-out infinite alternate; }
.air-one { width:280px; height:280px; left:-140px; top:8%; }
.air-two { width:420px; height:420px; right:-170px; bottom:-220px; animation-delay:-4s; }
.air-three { width:65px; height:65px; left:47%; top:15%; animation-delay:-7s; }
.air-spark { position:absolute; width:36px; left:41%; bottom:14%; color:#fffef8; animation:star-turn 8s ease-in-out infinite; }
.hero-visual { margin-block:1.6rem 2.5rem; }
.scene-panel { background:var(--accent-mist); color:var(--color-brand); border-radius:45% 45% 2rem 2rem; padding-top:2.8rem; box-shadow:10px 14px 0 #1c4a7c12; }
.scene-heading { align-items:center; justify-items:center; padding-left:0; }
.scene-heading .eyebrow,.scene-status,.scene-bottom { color:var(--color-brand); }
.scene-heading .eyebrow { font-size:.7rem; }
.scene-status i { background:#1c4a7c; box-shadow:0 0 0 4px #1c4a7c1a; animation:status-breathe 2.6s ease-in-out infinite; }
.scene-panel .room-scene { margin-top:.4rem; animation:room-breathe 7s ease-in-out infinite; }
.scene-watermark { width:350px; top:35px; right:-140px; opacity:.25; }
.scene-loop-meter { width:60px; height:3px; overflow:hidden; background:#1c4a7c22; }
.scene-loop-meter i { display:block; height:100%; background:var(--color-brand); transform-origin:left; animation:scene-meter 6s linear infinite; }
.floating-note { left:-1.3rem; bottom:-1.8rem; background:var(--accent-sky); border:0; border-radius:1rem; box-shadow:0 8px 0 #1c4a7c0a; animation:note-float 4.5s ease-in-out infinite; }
.floating-chip { position:absolute; right:-.7rem; bottom:17%; display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-radius:999px; background:var(--accent-paper); color:var(--color-brand); font:.76rem/1.2 var(--font-label); box-shadow:0 5px 0 #1c4a7c0a; animation:chip-float 5s ease-in-out -2s infinite; }
.floating-chip svg { width:21px; height:21px; animation:watermark-turn 12s linear infinite; }
.sun-seal { position:absolute; z-index:3; top:-2.3rem; right:-1.4rem; width:138px; height:138px; color:var(--color-brand); background:var(--accent-paper); border-radius:50%; box-shadow:4px 5px 0 #1c4a7c15; }
.seal-ring { width:100%; height:100%; animation:watermark-turn 24s linear infinite; }
.seal-ring text { fill:currentColor; font:12px var(--font-label); letter-spacing:2px; }
.sun-seal > span { position:absolute; inset:35%; animation:star-turn 6s ease-in-out infinite; }
.scene-panel .window-fog,.scene-panel .squeegee,.scene-panel .scene-dust,.scene-panel .scene-stars { animation-duration:6s; }
.scene-plant { animation-duration:4s; }
.room-sun { transform-box:fill-box; transform-origin:center; animation:watermark-turn 22s linear infinite; }
.coffee-steam { animation:steam-rise 3s ease-in-out infinite; }
.scene-soap { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.scene-soap i { position:absolute; bottom:15%; width:25px; height:25px; border-radius:50%; border:1.5px solid #fff9; box-shadow:inset 3px 3px 0 #fffb; background:#fff1; opacity:0; animation:soap-rise 6s ease-in-out infinite; }
.scene-soap i:nth-child(1) { left:8%; animation-delay:-1s; }
.scene-soap i:nth-child(2) { left:84%; animation-delay:-3s; width:38px; height:38px; }
.scene-soap i:nth-child(3) { left:18%; animation-delay:-4.5s; width:16px; height:16px; }
.scene-soap i:nth-child(4) { left:75%; animation-delay:-.3s; width:18px; height:18px; }
.marquee { background:var(--color-brand); border:0; padding-block:1.5rem; mask-image:none; -webkit-mask-image:none; }
.marquee-group { gap:2.5rem; padding-right:2.5rem; }
.marquee-group li { font-size:clamp(1.8rem,3vw,2.8rem); color:var(--accent-paper); gap:2.5rem; }
.marquee-group li::after { width:27px; height:27px; background:var(--accent-paper); border-radius:0; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); animation:watermark-turn 8s linear infinite; }
.marquee-track { animation-duration:28s; }
.services-section { background:var(--color-paper); }
.service-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.25rem; border:0; }
.service-list > li { grid-column:span 2; --tile:var(--accent-sky); }
.service-list > li:nth-child(2) { --tile:var(--accent-paper); }
.service-list > li:nth-child(3) { --tile:var(--accent-mist); }
.service-list > li:nth-child(4) { --tile:var(--blue-air); grid-column:span 3; }
.service-list > li:nth-child(5) { --tile:var(--accent-soft); grid-column:span 3; }
.service-row { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1.1rem; height:100%; min-height:290px; padding:2rem; background:var(--tile); border:0; border-radius:2rem; transition:transform .4s var(--ease-out),box-shadow .4s; }
.service-row:hover { padding:2rem; background:var(--tile); transform:translateY(-7px) rotate(-.7deg); box-shadow:0 14px 0 #1c4a7c0b; }
.service-row::after { content:""; position:absolute; width:135px; height:135px; top:-45px; right:-30px; border:1px solid #1c4a7c19; border-radius:50%; box-shadow:0 0 0 24px #ffffff24,0 0 0 48px #ffffff18; transition:transform .7s var(--ease-out); }
.service-row:hover::after { transform:scale(1.5); }
.service-icon { width:64px; height:64px; margin-bottom:1rem; animation:icon-bob 5s ease-in-out infinite; }
.service-list > li:nth-child(even) .service-icon { animation-delay:-2.5s; }
.service-row h3 { font-size:clamp(1.8rem,2.5vw,2.4rem); width:100%; }
.service-row p { color:#1c4a7c; max-width:28rem; }
.service-arrow { position:absolute; right:1.6rem; bottom:1.7rem; width:2.4rem; height:2.4rem; margin:0; background:var(--color-brand); transform:rotate(-40deg); }
.service-row:hover h3 { transform:none; }
.service-row:hover .service-arrow { transform:rotate(0); }
.joy-ribbon { overflow:hidden; background:var(--accent-paper); padding:clamp(2rem,5vw,4rem) 0; color:var(--color-brand); }
.joy-line { width:max-content; display:flex; align-items:center; gap:3vw; font:400 clamp(3.5rem,8.5vw,8.5rem)/1.1 var(--font-display); letter-spacing:-.04em; transform:translateX(var(--joy-x,4vw)); }
.joy-line > svg { width:clamp(50px,7vw,100px); height:auto; transform:rotate(var(--joy-turn,0deg)); }
.joy-line em { font-weight:400; }
.clean-story { background:#1c4a7c; color:var(--color-paper); transition:background .5s ease; }
.clean-story .eyebrow,.story-step h3,.story-number,.story-visual h2 { color:var(--color-paper); }
.story-visual h2 em { color:var(--accent-paper); }
.story-step p,.story-hint { color:#dceefa; }
.story-step .text-link { color:var(--accent-paper); }
.story-scene { background:var(--accent-sky); border-radius:2rem; box-shadow:10px 10px 0 #ffffff12; transition:background .5s; }
.clean-story[data-active-step="1"] .story-scene { background:var(--accent-mist); }
.clean-story[data-active-step="2"] .story-scene { background:var(--accent-paper); }
.clean-story[data-active-step="1"] { background:#18111f; }
.clean-story[data-active-step="2"] { background:#1c4a7c; }
.story-step { border-color:#ffffff30; }
.story-step::before { background:var(--accent-paper); height:3px; }
.story-number { width:max-content; background:#ffffff13; padding:.5rem .9rem; border-radius:999px; }
.story-step.is-active .story-number { background:var(--accent-paper); color:var(--color-brand); }
.story-step.is-active h3 { transform:translateX(.5rem); }
.story-step h3 { transition:transform .5s var(--ease-out); }
.story-meter { height:4px; border-radius:999px; }
.process-section { background:#fffef8; }
.steps { gap:2rem; }
.steps li { padding:1.5rem 0; }
.steps li::before { width:4rem; height:4rem; font-size:2rem; border:0; background:var(--accent-mist); border-radius:50%; }
.steps li:nth-child(2)::before { background:var(--accent-paper); }
.steps li:nth-child(3)::before { background:var(--accent-sky); }
.steps::before { top:3.5rem; background:var(--color-brand); opacity:.25; }
.values-section,.page-om-oss .section--mist { background:var(--accent-sky); }
.point-list li { border-color:#1c4a7c25; }
.rut-section { background:#74b8e5; color:var(--color-brand); }
.rut-copy h2,.rut-copy .eyebrow { color:var(--color-brand); }
.rut-copy p:not(.eyebrow) { color:#1c4a7c; }
.rut-art { max-width:400px; width:100%; }
.rut-art img { opacity:.7; }
.section--soap { background:var(--accent-paper); position:relative; overflow:hidden; }
.cta-band { position:relative; z-index:1; }
.section--soap::after { content:""; position:absolute; width:260px; height:260px; border:1px solid #1c4a7c22; border-radius:50%; right:18%; top:10%; box-shadow:0 0 0 35px #1c4a7c06,0 0 0 70px #1c4a7c03; animation:air-drift 8s ease-in-out infinite alternate; pointer-events:none; }
.site-footer { background:#18111f; }
.page-hero { background:var(--blue-air); border:0; min-height:360px; }
.page-hero::after { display:none; }
.page-hero > .container { padding-right:300px; }
.page-hero .lead,.page-hero .breadcrumb { color:#1c4a7c; }
.page-boka .page-hero { background:var(--accent-paper); }
.page-om-oss .page-hero { background:var(--accent-sky); }
.page-kontakt .page-hero { background:var(--accent-mist); }
.page-motion-art { position:absolute; top:50%; right:max(4vw,calc((100vw - 1240px)/2)); width:240px; height:240px; transform:translateY(-50%); pointer-events:none; }
.art-disc { position:absolute; inset:20%; display:grid; place-items:center; border-radius:36%; background:#fffef8d9; box-shadow:10px 12px 0 #1c4a7c12; animation:disc-float 6s ease-in-out infinite; }
.art-disc img { width:80px; height:80px; }
.art-orbit { position:absolute; inset:0; border:1px dashed #1c4a7c55; border-radius:50%; animation:watermark-turn 30s linear infinite; }
.art-orbit::after { content:""; position:absolute; width:25px; height:25px; left:26px; top:18px; border-radius:50%; background:var(--color-brand); }
.orbit-two { inset:-12%; animation-direction:reverse; border-style:solid; border-color:#1c4a7c22; }
.orbit-two::after { width:38px; height:38px; top:27px; left:27px; background:var(--accent-paper); border:1px solid #1c4a7c22; }
.page-boka .orbit-two::after { background:var(--accent-mist); }
.art-spark { position:absolute; width:55px; right:0; bottom:9px; color:var(--color-brand); animation:star-turn 7s ease-in-out infinite; }
.art-dot { position:absolute; width:20px; height:20px; background:#fffef8; left:0; top:40%; border-radius:50%; animation:note-float 4s ease-in-out infinite; }
.service-detail { margin-block:2rem; padding:clamp(2rem,4vw,3.5rem); border:0; border-radius:2rem; background:var(--accent-sky); }
.service-detail:nth-child(2) { background:var(--accent-paper); }
.service-detail:nth-child(3) { background:var(--accent-mist); }
.service-detail:nth-child(4) { background:var(--blue-air); }
.service-detail:nth-child(5) { background:var(--accent-soft); }
.service-detail .detail-icon { animation:icon-bob 6s ease-in-out infinite; }
.service-detail .checklist li { border-color:#1c4a7c22; }
.choice input:checked + span { background:var(--blue-air); color:var(--color-brand); border-color:var(--color-brand); }
.page-tack main { background:var(--accent-sky); }
.page-curtain,html.has-curtain body::after { background:var(--blue-air); }
.page-curtain { border-top:12px solid var(--accent-paper); }
.motion-toggle { border:1px solid #1c4a7c35; }
@keyframes highlight-draw { from { transform:scaleX(0) rotate(-2deg); } to { transform:scaleX(1) rotate(-2deg); } }
@keyframes air-drift { to { transform:translate(30px,-30px) scale(1.08); } }
@keyframes star-turn { 0%,100% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(90deg) scale(.7); } }
@keyframes status-breathe { 50% { box-shadow:0 0 0 7px #1c4a7c00; } }
@keyframes room-breathe { 0%,100% { transform:translateY(0) rotate(-.4deg); } 50% { transform:translateY(-5px) rotate(.4deg); } }
@keyframes scene-meter { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes chip-float { 0%,100% { transform:translateY(0) rotate(3deg); } 50% { transform:translateY(-12px) rotate(-2deg); } }
@keyframes steam-rise { 0% { opacity:0; transform:translateY(3px); } 40% { opacity:.7; } 100% { opacity:0; transform:translateY(-12px); } }
@keyframes soap-rise { 0% { opacity:0; transform:translate(0,0) scale(.6); } 20% { opacity:.9; } 80% { opacity:.7; } 100% { opacity:0; transform:translate(14px,-260px) scale(1.3); } }
@keyframes icon-bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-7px) rotate(4deg); } }
@keyframes disc-float { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(8deg) translateY(-8px); } }
@media(min-width:1000px) { .services-section .section-head { column-gap:4rem; } }
@media(max-width:1100px) and (min-width:861px) {
  .sun-seal { width:105px; height:105px; right:-.7rem; }
  .scene-heading { align-items:start; justify-items:start; padding-left:1rem; }
  .scene-heading .eyebrow { font-size:.58rem; }
  .scene-status { font-size:.58rem; }
  .service-row { padding:1.5rem; }.service-row:hover { padding:1.5rem; }
}
@media(max-width:900px) {
  .page-hero > .container { padding-right:220px; }
  .page-motion-art { width:170px; height:170px; right:4vw; }
  .art-disc img { width:62px; height:62px; }
  .service-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-list > li,.service-list > li:nth-child(4),.service-list > li:nth-child(5) { grid-column:auto; }
  .service-list > li:last-child { grid-column:1/-1; }
}
@media(max-width:860px) {
  .motion-hero { padding-top:2rem; }
  .motion-hero .hero-title { font-size:clamp(3.65rem,11.8vw,6.5rem); }
  .hero-visual { max-width:560px; margin-top:1.5rem; }
  .sun-seal { right:.3rem; top:-1.5rem; width:120px; height:120px; }
  .floating-chip { right:0; }
  .floating-note { left:0; }
  .scene-panel { padding-top:2.6rem; }
  .rut-art { display:grid; max-width:245px; margin-inline:auto; }
  .rut-layout { gap:2rem; }
  .joy-line { gap:1.5rem; font-size:clamp(3.2rem,8.5vw,6rem); }
  .story-step { min-height:0; }
  .story-step.is-active h3 { transform:none; }
}
@media(max-width:600px) {
  .hero-details { gap:.8rem; }
  .sun-seal { width:97px; height:97px; right:0; }
  .scene-heading { align-items:start; justify-items:start; padding-left:.6rem; }
  .scene-heading .eyebrow { font-size:.6rem; letter-spacing:.08em; }
  .scene-status { font-size:.6rem; }
  .scene-panel { padding-top:2.2rem; border-radius:35% 35% 1.6rem 1.6rem; }
  .scene-bottom { padding-inline:.4rem; }
  .floating-note { padding:.8rem; }
  .floating-chip { bottom:20%; font-size:.64rem; padding:.5rem .7rem; }
  .floating-chip svg { width:17px; height:17px; }
  .service-list { grid-template-columns:1fr; gap:1rem; }
  .service-list > li:last-child { grid-column:auto; }
  .service-row,.service-row:hover { padding:1.65rem; min-height:270px; border-radius:1.5rem; }
  .service-icon { width:58px; height:58px; margin-bottom:.4rem; }
  .service-row h3 { font-size:2.15rem; }
  .service-row p { font-size:.9rem; }
  .service-arrow { width:2.2rem; height:2.2rem; right:1.4rem; }
  .joy-line { font-size:3.5rem; }
  .joy-line > svg { width:43px; }
  .page-hero { min-height:0; padding-bottom:2.5rem; }
  .page-hero > .container { padding-right:0; }
  .page-hero h1 { font-size:clamp(2.8rem,11vw,3.8rem); }
  .page-motion-art { position:relative; top:auto; right:auto; transform:none; margin:2.8rem auto 0; width:140px; height:140px; }
  .art-disc img { width:48px; height:48px; }
  .art-spark { width:35px; }
  .service-detail { padding:1.5rem; border-radius:1.4rem; }
  .steps { gap:.6rem; }
}
/* A pause takes effect immediately, including scroll-driven decoration. */
html.motion-paused .joy-line,html.reduce-motion .joy-line { transform:translateX(1rem); }
html.motion-paused .joy-line > svg,html.reduce-motion .joy-line > svg { transform:none; }
html.motion-paused .joy-line,html.reduce-motion .joy-line { width:auto; flex-wrap:wrap; justify-content:center; transform:none; padding-inline:1rem; text-align:center; }
html.motion-paused .motion-hero .hero-title em::after { animation:none; }
.scene-is-offscreen,.scene-is-offscreen::before,.scene-is-offscreen::after,.scene-is-offscreen *::before,.scene-is-offscreen *::after { animation-play-state:paused !important; }
@media(prefers-reduced-motion:reduce) {
  .joy-line { transform:translateX(1rem); }
  .joy-line { width:auto; flex-wrap:wrap; justify-content:center; transform:none; padding-inline:1rem; text-align:center; font-size:clamp(2.5rem,7vw,7rem); }
  .joy-line > svg,.service-icon,.detail-icon,.art-disc,.room-scene { transform:none !important; }
  .hero-title em::after { animation:none !important; }
  .scene-soap { display:none; }
  .service-row:hover { transform:none; }
}