/* Städ Time – professionell design (2026-11-04). Laddas efter theme-b.css och skriver över den.
   Ta bort <link ... theme-pro.css> för att återgå till tidigare utseende. */
body.theme-b {
  --navy: #0b1f3a; --navy-2: #13305a; --navy-3: #1d4373;
  --ink: #0f1f33; --muted: #52637a; --line: #e2e8f0;
  --green: #15803d; --green-dark: #166534; --green-tint: #e8f7ee; --accent: #22c55e;
  --bg: #ffffff; --bg-soft: #f5f8fb; --cream: #ffffff;
  --radius: 18px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(11,31,58,.08);
  --display: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff; color: var(--ink);
}
.theme-b h1, .theme-b h2, .theme-b h3, .theme-b h4, .theme-b .brand-name { font-family: var(--display); color: var(--navy); }
.theme-b h1, .theme-b h2 { font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.theme-b h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem); }
.theme-b .lead { color: var(--muted); }
.theme-b a { color: var(--green); }
.theme-b :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* Buttons */
.theme-b .btn { border-radius: 10px; font-weight: 700; min-height: 50px; border-width: 2px; transition: background .15s, transform .15s, box-shadow .15s; }
.theme-b .btn-primary, .theme-b .hero .btn-primary, .theme-b .cta-band .btn-primary, .theme-b .b-band .btn-primary, .theme-b .b-tile .btn-primary {
  background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(21,128,61,.25); }
.theme-b .btn-primary:hover, .theme-b .hero .btn-primary:hover, .theme-b .cta-band .btn-primary:hover, .theme-b .b-band .btn-primary:hover, .theme-b .b-tile .btn-primary:hover {
  background: var(--green-dark); border-color: var(--green-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(21,128,61,.3); }
.theme-b .btn-outline { background: #fff; color: var(--navy); border-color: #cbd5e1; }
.theme-b .btn-outline:hover { background: #f1f5f9; color: var(--navy); border-color: var(--navy); }
.theme-b .btn-primary, .theme-b .btn-primary:hover, .theme-b .b-tile .btn-primary, .theme-b .b-tile .btn-primary:hover { color: #fff; }

/* Header */
.theme-b .site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(11,31,58,.05); backdrop-filter: saturate(1.4) blur(6px); }
.theme-b .nav-link, .theme-b .brand { color: var(--navy); }
.theme-b .nav-link:hover { background: #f1f5f9; color: var(--navy); }
.theme-b .nav-link[aria-current="page"] { color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }
.theme-b .sub { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px; }
.theme-b .nav-toggle { border: 1px solid #cbd5e1; border-radius: 10px; color: var(--navy); }
@media (max-width: 1119.98px) { .theme-b.theme-b .nav { background: #fff; } }

/* Home hero */
.b-hero { background: radial-gradient(900px 420px at 85% -10%, #1f4a85 0%, transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); }
.b-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .b-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.b-hero h1 { color: #fff; font-size: clamp(2.3rem, 1.3rem + 4vw, 4.1rem); line-height: 1.05; margin-bottom: 20px; }
.b-hero h1 .seo { color: var(--accent); font: 700 .875rem/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.b-hero h1 .mark { background: none; padding: 0; transform: none; color: var(--accent); }
.b-hero .b-lead { color: #cfdced; font-size: 1.1875rem; margin-bottom: 28px; }
.b-hero .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.b-hero .btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.b-hero a:not(.btn) { color: #fff; }
.b-promise li { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #e6eef8; font-size: .9rem; }
.b-promise li::before { content: "✓ "; color: var(--accent); font-weight: 800; }
.b-rating { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff !important; text-decoration: none; font-weight: 600; font-size: .95rem; }
.b-rating:hover { background: rgba(255,255,255,.14); }
.b-rating .stars { color: #fbbf24; letter-spacing: 2px; font-size: 1.05rem; }
.b-hero-media { margin: 0; position: relative; }
.b-hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.b-hero-badge { position: absolute; left: -18px; bottom: 22px; background: #fff; color: var(--navy); border-radius: 14px; padding: 12px 16px; box-shadow: 0 14px 30px rgba(0,0,0,.25); font-weight: 700; font-size: .95rem; line-height: 1.3; }
.b-hero-badge small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
@media (max-width: 999.98px) { .b-hero-media { display: none; } }

/* Service tiles */
.b-tiles { gap: 20px; padding: 56px 0 72px; margin-top: 0; }
.b-tile { background: #fff !important; border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: var(--radius); box-shadow: var(--shadow); min-height: 0; padding: 28px; transition: transform .2s, box-shadow .2s; }
.b-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(11,31,58,.12); }
.b-c2 { border-top-color: #0ea5e9; } .b-c3 { border-top-color: var(--navy-3); } .b-c4 { border-top-color: #f59e0b; }
.b-tile h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.b-tile h3 a { color: var(--navy); }
.b-tile p { color: var(--muted); }
.b-tile strong { font: 700 1.6rem/1.1 var(--display); color: var(--navy); }
.b-tile small { color: var(--muted); }
@media (min-width: 1000px) { .b-tiles { grid-template-columns: repeat(4, 1fr); } .b-c1, .b-c2, .b-c3, .b-c4 { grid-column: auto; } }
.b-tile .btn-row { flex-wrap: wrap; }

/* Bands and sections */
.b-band { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #e6eef8; }
.b-band h2 { color: #fff; } .b-band h2 em { color: var(--accent); }
.b-band a:not(.btn) { color: #fff; }
.b-chips li { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.b-chips a, .b-chips li { color: #fff; }
.b-photo img { border-radius: 18px; box-shadow: 0 24px 50px rgba(0,0,0,.3); }
.theme-b .section-soft { background: var(--bg-soft); border: 0; }
.theme-b .card, .theme-b .bookform, .theme-b .expect li, .theme-b .callback, .theme-b .toc, .theme-b .facts-box, .theme-b .rating, .theme-b .steps > li, .theme-b .included, .theme-b .partner {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.theme-b .card h3 a, .theme-b .blog-card h2 a, .theme-b .blog-card h3 a { color: var(--navy); }
.theme-b .eyebrow, .theme-b .hero .eyebrow, .theme-b .section-soft .eyebrow { color: var(--green); letter-spacing: .06em; }
.theme-b .link-list a { border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 10px; }
.theme-b .link-list a:hover { border-color: var(--green); background: var(--green-tint); }
.b-rows { border-top: 1px solid var(--line); }
.b-rows li { border-bottom: 1px solid var(--line); }
.b-rows b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-tint); color: var(--green); font: 700 1.25rem/1 var(--display); }
.b-rows h3 { font-size: 1.2rem; font-weight: 700; }
.theme-b .faq-item { border-color: var(--line); }
.theme-b .faq-item h3, .theme-b .faq-item h2 { font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.theme-b .checklist li::before { border-color: var(--green); }
.theme-b .answer-box, .theme-b blockquote { background: var(--green-tint); border-left: 4px solid var(--green); }
.theme-b .media img, .theme-b .media-pair img, .theme-b .hero-media img { border: 0; border-radius: 16px; box-shadow: var(--shadow); }
.theme-b .card-media .card-img img { border-bottom: 1px solid var(--line); }
.theme-b .tick-list li, .theme-b .summary div, .theme-b .calc-table th, .theme-b .calc-table td { border-color: var(--line); }

/* Forms and calculator */
.theme-b .calc-result { background: var(--green-tint); border: 1px solid #bbe5c9; border-radius: 14px; }
.theme-b .calc-value { color: var(--navy); font-family: var(--display); font-weight: 700; }
.theme-b .stepper-btn, .theme-b input[type="text"], .theme-b input[type="tel"], .theme-b input[type="email"], .theme-b input[type="date"], .theme-b input[type="number"], .theme-b select, .theme-b textarea, .theme-b .choice-box { border: 1.5px solid #cbd5e1; border-radius: 10px; }
.theme-b input:focus, .theme-b select:focus, .theme-b textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.theme-b .choice input:checked + .choice-box { border-color: var(--green); background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--green); }
.theme-b .form-section { background: var(--bg-soft); }
.theme-b .form-title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.theme-b .step-title { font-size: 1.35rem; font-weight: 700; }
.theme-b .prefill-note { border: 1px solid var(--line); background: #fff; }

/* Inner page hero */
.theme-b .hero { background: radial-gradient(800px 360px at 90% -20%, #1f4a85 0%, transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #e6eef8; border: 0; }
.theme-b .hero h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
.theme-b .hero-wide h1, .theme-b .has-media h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
.theme-b .hero p, .theme-b .hero .lead { color: #cfdced; }
.theme-b .hero a:not(.btn), .theme-b .breadcrumb, .theme-b .breadcrumb a { color: #cfdced; }
.theme-b .hero .eyebrow { color: var(--accent); }
.theme-b .hero .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.theme-b .hero .btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.theme-b .trust, .theme-b .trust li { color: #e6eef8; }
.theme-b .trust li { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); }
.theme-b .truststrip { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.theme-b .truststrip-list { color: var(--navy); }
.theme-b .truststrip-list li::before { border-color: var(--green); }
.theme-b .steps > li::before { background: var(--green-tint); color: var(--green); }
.theme-b .card .price { background: var(--green-tint); border: 1px solid #bbe5c9; color: var(--navy); }
.theme-b .price { color: var(--navy); }

/* Reviews on home */
.b-reviews .grid { gap: 20px; }
.b-review { display: flex; flex-direction: column; }
.b-review .stars { color: #f59e0b; letter-spacing: 2px; margin-bottom: 8px; }
.b-review blockquote { background: none; border: 0; padding: 0; margin: 0 0 14px; color: var(--ink); font-size: 1.02rem; }
.b-review .who { margin-top: auto; font-weight: 700; color: var(--navy); }
.b-review .who small { display: block; font-weight: 500; color: var(--muted); }
.b-score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 28px; }
.b-score strong { font: 700 2.4rem/1 var(--display); color: var(--navy); }
.b-score .stars { color: #f59e0b; font-size: 1.3rem; letter-spacing: 3px; }

/* Area list */
.b-areas { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.b-areas li { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .92rem; color: var(--navy); }

/* Offer callout */
.b-offer { background: linear-gradient(135deg, var(--green-tint), #fff); border: 1px solid #bbe5c9; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.b-offer h2 { margin-top: 0; }

/* CTA band and footer */
.theme-b .cta-band { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #e6eef8; border: 0; }
.theme-b .cta-band h2 { color: #fff; }
.theme-b .cta-band p { color: #cfdced; }
.theme-b .cta-band a:not(.btn) { color: #fff; }
.theme-b .cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.theme-b .cta-band .btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.theme-b .site-footer { background: #081629; color: #b8c7da; }
.theme-b .site-footer .footer-title { color: #fff; font-weight: 700; }
.theme-b .site-footer a { color: #dbe7f5; }

/* Mobile bar */
@media (max-width: 767.98px) {
  .theme-b .mbar { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(11,31,58,.1); }
  .theme-b .mbar .btn { box-shadow: none; min-height: 46px; }
  .theme-b .mbar .btn-outline { border-color: #cbd5e1; }
  .theme-b .mbar a[href^="https://wa.me"] { background: #25d366; border-color: #25d366; color: #0b2e17; }
}
@media print { .b-hero, .theme-b .hero, .theme-b .cta-band { background: #fff !important; color: #000 !important; } .b-hero h1, .theme-b .hero h1 { color: #000 !important; } }

/* Infofält överst: vecka, datum, tid och antal besök (2026-11-04) */
.topbar-info { background: #081629; color: #b8c7da; font-size: .78rem; line-height: 1.3; }
.topbar-info[hidden], .topbar-info [hidden] { display: none !important; }
.topbar-info .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-top: 6px; padding-bottom: 6px; }
.topbar-info #tb-date::first-letter { text-transform: uppercase; }
.topbar-info #tb-visits::before { content: "\25CF"; color: #22c55e; margin-right: 6px; font-size: .7em; vertical-align: 1px; }
@media (max-width: 479.98px) { .topbar-info { font-size: .72rem; } .topbar-info .container { justify-content: center; text-align: center; } }

/* Stadsdelar i sidfoten (2026-11-04) */
.footer-areas { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; padding-bottom: 6px; }
.footer-areas .footer-title { font-size: 1rem; margin-bottom: 10px; }
.footer-area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .85rem; line-height: 1.6; color: #8ea6c4; }
.footer-area-list li { margin: 0; }
.footer-area-list li:not(:last-child)::after { content: "·"; margin: 0 8px; color: #4b6283; }
.theme-b .footer-area-list a { color: #dbe7f5; text-decoration: none; }
.theme-b .footer-area-list a:hover { text-decoration: underline; }

/* ===== Lyx, teknik och lite gulligt (2026-11-04) ===== */
body.theme-b { --gold: #e7c873; --gold-2: #f5e3a8; --radius: 22px; }

/* Hero: dot grid (tech) + floating soap bubbles (sweet) */
.b-hero, .theme-b .hero { position: relative; overflow: hidden; isolation: isolate; }
.b-hero::before, .theme-b .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
.b-hero::after, .theme-b .hero::after {
  content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.45) 0 6%, rgba(255,255,255,.06) 7% 52%, rgba(255,255,255,.35) 54%, rgba(255,255,255,0) 57%) 8% 78% / 92px 92px no-repeat,
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.45) 0 6%, rgba(255,255,255,.05) 7% 52%, rgba(255,255,255,.3) 54%, rgba(255,255,255,0) 57%) 56% 14% / 46px 46px no-repeat,
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.4) 0 6%, rgba(126,232,196,.07) 7% 52%, rgba(126,232,196,.35) 54%, rgba(126,232,196,0) 57%) 92% 70% / 150px 150px no-repeat,
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.45) 0 6%, rgba(255,255,255,.05) 7% 52%, rgba(231,200,115,.4) 54%, rgba(231,200,115,0) 57%) 38% 92% / 34px 34px no-repeat,
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.4) 0 6%, rgba(255,255,255,.04) 7% 52%, rgba(255,255,255,.28) 54%, rgba(255,255,255,0) 57%) 78% 8% / 64px 64px no-repeat;
  animation: stFloat 14s ease-in-out infinite alternate;
}
@keyframes stFloat { from { transform: translateY(12px); } to { transform: translateY(-22px); } }

/* Luxury accents */
.b-hero h1 .seo, .theme-b .hero .eyebrow { color: var(--gold); }
.b-hero h1 .seo::before, .theme-b .hero .eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; margin-right: 10px; vertical-align: middle; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 2px; }
.b-hero h1 .mark { background: linear-gradient(90deg, #22c55e 0%, #7ee8c4 55%, #c8f7e4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b-rating { border-color: rgba(231,200,115,.45); background: linear-gradient(135deg, rgba(231,200,115,.12), rgba(255,255,255,.04)); }
.b-hero-badge { border-top: 3px solid var(--gold); }
.b-hero-badge::before { content: "✦ "; color: #c9a227; }
.b-hero-media img { outline: 1px solid rgba(231,200,115,.35); outline-offset: 6px; }
.theme-b .site-footer { border-top: 3px solid transparent; border-image: linear-gradient(90deg, #22c55e, var(--gold), #22c55e) 1; }

/* Tech: light sweep on primary buttons */
body.theme-b .btn-primary, body.theme-b .btn-primary:hover {
  background-color: var(--green);
  background-image: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 65%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 130% 0;
  transition: background-position .7s ease, transform .15s, box-shadow .15s, background-color .15s;
}
body.theme-b .btn-primary:hover { background-color: var(--green-dark); background-position: -30% 0; }
.b-tile:hover, .theme-b .card:hover { box-shadow: 0 18px 40px rgba(11,31,58,.12), 0 0 0 1px rgba(34,197,94,.22) !important; }

/* Sweet: softer shapes */
.theme-b .card, .b-tile, .theme-b .callback, .theme-b .bookform { border-radius: 22px; }
.theme-b .btn { border-radius: 12px; }
.b-promise li, .b-areas li { border-radius: 999px; }

/* Tap effect */
.st-tap { position: fixed; z-index: 2147483000; width: 0; height: 0; pointer-events: none; }
.st-tap img { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(11,31,58,.28), 0 0 0 2px rgba(231,200,115,.7); animation: stScrub 1.05s cubic-bezier(.3,.7,.3,1) forwards; }
.st-tap-ring { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(34,197,94,.6); animation: stRing .8s ease-out forwards; }
.st-tap i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 25%, rgba(190,230,255,.75) 26% 60%, rgba(255,255,255,.2) 61%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); animation: stBubble .95s ease-out forwards; }
.st-tap i:nth-of-type(1) { --x: -38px; --y: -34px; }
.st-tap i:nth-of-type(2) { --x: 40px; --y: -26px; width: 7px; height: 7px; }
.st-tap i:nth-of-type(3) { --x: -30px; --y: 30px; width: 12px; height: 12px; }
.st-tap i:nth-of-type(4) { --x: 34px; --y: 34px; }
.st-tap i:nth-of-type(5) { --x: 4px; --y: -48px; width: 8px; height: 8px; }
.st-tap b { position: absolute; left: 14px; top: -34px; color: var(--gold, #e7c873); font-size: 16px; text-shadow: 0 0 6px rgba(231,200,115,.8); animation: stSpark .9s ease-out forwards; }
@keyframes stScrub {
  0% { transform: scale(.2) rotate(0); opacity: 0; }
  14% { transform: scale(1.08) rotate(-16deg); opacity: 1; }
  28% { transform: scale(1) rotate(14deg); }
  42% { transform: rotate(-12deg); }
  56% { transform: rotate(10deg); }
  70% { transform: rotate(0) translateY(-4px); opacity: 1; }
  100% { transform: scale(.55) translateY(-30px); opacity: 0; }
}
@keyframes stRing { from { transform: scale(.25); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes stBubble { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.25); opacity: 0; } }
@keyframes stSpark { 0% { transform: scale(0) rotate(0); opacity: 0; } 40% { transform: scale(1.2) rotate(45deg); opacity: 1; } 100% { transform: scale(.6) rotate(90deg) translateY(-10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .b-hero::after, .theme-b .hero::after { animation: none; }
  body.theme-b .btn-primary { transition: none; }
  .st-tap { display: none; }
}

/* Tap effect med maskoten (transparent bild) */
.st-tap img { left: -32px; top: -40px; width: 64px; height: 64px; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 8px 10px rgba(11,31,58,.35)); transform-origin: 50% 85%; }
.st-tap img, .theme-b .st-tap img { max-width: none !important; min-width: 64px; height: 64px !important; }

/* Realistiska, genomskinliga såpbubblor (2026-11-04) */
.b-hero::after, .theme-b .hero::after { content: none; display: none; animation: none; }
.st-bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.st-bubble {
  position: absolute; bottom: -110px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 0 62%, rgba(255,255,255,.03) 72%, rgba(150,220,255,.10) 84%, rgba(255,170,225,.14) 91%, rgba(255,240,170,.12) 95%, rgba(255,255,255,.30) 98.5%, rgba(255,255,255,0) 100%);
  box-shadow: inset 2px -3px 7px rgba(255,160,220,.10), inset -3px 3px 8px rgba(120,215,255,.12), 0 0 6px rgba(255,255,255,.04);
  animation: stRise var(--d, 18s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.st-bubble::before {
  content: ""; position: absolute; left: 20%; top: 13%; width: 26%; height: 15%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.75) 0%, rgba(255,255,255,.25) 55%, rgba(255,255,255,0) 72%);
  transform: rotate(-38deg);
}
.st-bubble::after {
  content: ""; position: absolute; right: 18%; bottom: 16%; width: 12%; height: 8%; border-radius: 50%;
  background: rgba(255,255,255,.22); transform: rotate(-38deg); filter: blur(.4px);
}
@keyframes stRise {
  0%   { transform: translate3d(0, 0, 0) scale(.85); opacity: 0; }
  8%   { opacity: .9; }
  35%  { transform: translate3d(var(--sway, 20px), -38vh, 0) scale(.95, 1); }
  60%  { transform: translate3d(calc(var(--sway, 20px) * -.6), -66vh, 0) scale(1, .96); }
  85%  { opacity: .75; }
  100% { transform: translate3d(var(--sway, 20px), -105vh, 0) scale(1.04); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .st-bubbles { display: none; } }

/* Fix 2026-11-04: backdrop-filter gjorde headern till containing block och klämde mobilmenyn. Ingen filter på headern. */
.theme-b .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #fff; }

/* ===== Ljus och luftig design + realistiska bubblor (2026-11-04) ===== */
/* Mobile menu: hide the info bar while the menu is open so the panel lines up with the header */
.menu-open .topbar-info { display: none !important; }

/* Light, airy hero areas */
.b-hero, .theme-b .hero, .theme-b .cta-band {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(126,232,196,.35) 0%, rgba(126,232,196,0) 60%),
    radial-gradient(700px 380px at -5% 110%, rgba(147,197,253,.30) 0%, rgba(147,197,253,0) 60%),
    linear-gradient(180deg, #f7fbff 0%, #eef8f5 100%);
  color: var(--ink);
}
.b-hero::before, .theme-b .hero::before {
  background-image: radial-gradient(rgba(11,31,58,.07) 1px, transparent 1.5px);
}
.b-hero h1, .theme-b .hero h1, .theme-b .cta-band h2 { color: var(--navy); }
.b-hero h1 .mark { background: linear-gradient(90deg, #15803d 0%, #0d9488 60%, #0ea5a4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b-hero h1 .seo, .theme-b .hero .eyebrow { color: #a07c1c; }
.b-hero .b-lead, .theme-b .hero p, .theme-b .hero .lead, .theme-b .cta-band p { color: #43546a; }
.theme-b .hero a:not(.btn), .theme-b .breadcrumb, .theme-b .breadcrumb a, .theme-b .cta-band a:not(.btn) { color: #43546a; }
.b-hero a:not(.btn) { color: var(--navy); }
.b-hero .btn-outline, .theme-b .hero .btn-outline, .theme-b .cta-band .btn-outline { background: rgba(255,255,255,.7); color: var(--navy); border-color: #cbd5e1; }
.b-hero .btn-outline:hover, .theme-b .hero .btn-outline:hover, .theme-b .cta-band .btn-outline:hover { background: #fff; color: var(--navy); border-color: var(--navy); }
.b-promise li, .theme-b .trust li { background: rgba(255,255,255,.75); border: 1px solid #dbe6f0; color: var(--navy); }
.theme-b .trust, .theme-b .trust li { color: var(--navy); }
.b-rating { color: var(--navy) !important; background: rgba(255,255,255,.8); border-color: rgba(201,162,39,.45); }
.b-rating:hover { background: #fff; }
.b-hero-badge { border: 1px solid #e6edf4; border-top: 3px solid var(--gold); }
.b-hero-media img { box-shadow: 0 24px 50px rgba(11,31,58,.16); outline-color: rgba(201,162,39,.35); }
.theme-b .site-header { border-bottom-color: #e6edf4; }
.theme-b .section-soft { background: #f6fafc; }

/* Realistic soap bubbles: clear inside, iridescent thin film at the rim that slowly swirls, soft highlight */
.st-bubble {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 0 70%, rgba(255,255,255,.10) 86%, rgba(255,255,255,0) 100%);
  box-shadow: 0 6px 14px rgba(11,31,58,.06), inset 0 0 0 1px rgba(255,255,255,.55);
  opacity: .95;
}
.st-bubble::after {
  content: ""; position: absolute; inset: 0; right: auto; bottom: auto; width: 100%; height: 100%; border-radius: 50%; filter: none;
  background: conic-gradient(from 200deg, rgba(255,140,205,.55), rgba(140,205,255,.55), rgba(150,245,205,.45), rgba(255,230,140,.50), rgba(200,160,255,.45), rgba(255,140,205,.55));
  -webkit-mask: radial-gradient(circle, transparent 0 68%, #000 84% 96%, transparent 99%);
          mask: radial-gradient(circle, transparent 0 68%, #000 84% 96%, transparent 99%);
  transform: none; opacity: .55;
  animation: stSwirl 9s linear infinite;
}
.st-bubble::before {
  content: ""; position: absolute; left: 18%; top: 12%; width: 30%; height: 18%; border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 72%);
  transform: rotate(-38deg);
}
@keyframes stSwirl { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st-bubble::after { animation: none; } }

/* Bubblor: tydligare tunn hinna och regnbågsskimmer mot ljus bakgrund */
.st-bubble {
  box-shadow: inset 0 0 0 1px rgba(100,140,185,.28), inset -7px -9px 16px rgba(130,195,255,.16), inset 7px 9px 16px rgba(255,165,215,.14), 0 8px 18px rgba(11,31,58,.07);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 0 64%, rgba(255,255,255,.18) 84%, rgba(255,255,255,.45) 97%, rgba(255,255,255,0) 100%);
}
.st-bubble::after { opacity: .9; -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 80% 97%, transparent 100%); mask: radial-gradient(circle, transparent 0 62%, #000 80% 97%, transparent 100%); }
.st-bubble::before { background: radial-gradient(ellipse at center, #fff 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 72%); }

/* ===== Läsbarhet (2026-11-04) ===== */
body.theme-b { --muted: #3a4b61; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.theme-b main p, .theme-b main li { line-height: 1.7; }
.theme-b .lead { color: #33455c; }
.b-hero .b-lead, .theme-b .hero p { color: #2f4157; }
.b-tile p, .b-rows p, .theme-b .callback-lead { font-size: 1.0625rem; color: var(--muted); }
.b-tile small, .theme-b .calc .note, .b-review .who small { font-size: .95rem; color: var(--muted); }
.b-promise li { font-size: 1rem; padding: 6px 14px; }
.b-areas li { font-size: 1rem; }
.b-review blockquote { font-size: 1.0625rem; line-height: 1.7; }
.topbar-info { font-size: .84rem; color: #cbd8e8; }
.footer-area-list { font-size: .95rem; color: #b8c8dc; }
.theme-b .site-footer, .theme-b .footer-bottom p { color: #c3d1e2; }
.st-bubble { opacity: .7; }
@media (max-width: 479.98px) { .topbar-info { font-size: .8rem; } }

/* Sidan Alla tjänster och områden (2026-11-04) */
.omr-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 24px; }
.omr-card { padding: 20px 22px; display: flex; flex-direction: column; }
.omr-card h3 { font-size: 1.25rem; margin: 0 0 2px; color: var(--navy); }
.omr-type { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.omr-services { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.omr-services li { margin: 0; }
.theme-b .omr-services a { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--green-tint); border: 1px solid #bbe5c9; color: var(--green-dark); font-size: .875rem; font-weight: 600; text-decoration: none; }
.theme-b .omr-services a:hover { background: #d5f2df; }
.omr-card .more { margin-top: auto; font-weight: 600; }
.theme-b .footer-title a { color: #fff; text-decoration: none; }
.theme-b .footer-title a:hover { text-decoration: underline; }

/* Fix: logotypen fick inte plats bredvid menyn på 1120–1400 px */
.theme-b .brand { flex-shrink: 0; }
@media (min-width: 1120px) and (max-width: 1399.98px) {
  .theme-b .nav-phone { display: none; }
  .theme-b .nav-list .nav-link { padding-left: 9px; padding-right: 9px; }
}

/* ===== Inga bubblor eller tryck-effekt. Städprodukter i hörnen som en ram (2026-11-04) ===== */
.st-bubbles, .st-tap { display: none !important; }
.b-hero::after, .theme-b .hero::after {
  content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; animation: none; transform: none;
  background:
    url("/assets/img/decor/cloth.svg") left -34px top -36px / 112px auto no-repeat,
    url("/assets/img/decor/spray.svg") right -26px top -40px / 96px auto no-repeat,
    url("/assets/img/decor/bucket.svg") left -36px bottom -58px / 128px auto no-repeat,
    url("/assets/img/decor/sponge.svg") right -30px bottom -40px / 118px auto no-repeat;
}
@media (max-width: 899.98px) { .b-hero::after, .theme-b .hero::after { display: none; } }

/* Hörnprodukter: helt synliga och placerade i de tomma kanterna (inga texter under) */
.theme-b .hero::after {
  background:
    url("/assets/img/decor/cloth.svg") left 10px top -4px / 72px auto no-repeat,
    url("/assets/img/decor/spray.svg") right 14px top -12px / 60px auto no-repeat,
    url("/assets/img/decor/bucket.svg") left 10px bottom -6px / 72px auto no-repeat,
    url("/assets/img/decor/sponge.svg") right 12px bottom -4px / 78px auto no-repeat;
}
.b-hero::after {
  background:
    url("/assets/img/decor/cloth.svg") left 14px top 2px / 96px auto no-repeat,
    url("/assets/img/decor/spray.svg") right 18px top -8px / 78px auto no-repeat,
    url("/assets/img/decor/bucket.svg") left 14px bottom 0 / 100px auto no-repeat,
    url("/assets/img/decor/sponge.svg") right 16px bottom 0 / 104px auto no-repeat;
}