/* ============================================================================
   CAPICLEAN-mall — frontend i stil med CapiClean (fri Bootstrap 4-mall, ThemeWagon).
   Allt scopat under [data-template="capiclean"] så den bara gäller när mallen är vald.
   Egen CSS som återger CapiCleans visuella system (palett/typsnitt/hero/kort/footer)
   + färg-/typografi-override för innersidorna. Innehåll/struktur kommer från Sanity.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Rajdhani:wght@400;500;600;700&display=swap');

[data-template="capiclean"] {
  --cc-blue: #89cbeb;
  --cc-blue-2: #addaed;
  --cc-deep: #367d99;
  --cc-ink: #282828;
  --cc-ink-2: #181919;
  --cc-grey: #6f6f6f;
  --cc-line: #e4eef4;
  --cc-soft: #f0faff;
  --cc-soft-2: #f8fdfe;
  --brand: #367d99;
  --brand-strong: #2b6a7f;
  --brand-ink: #0f3a49;
  /* Accent = loggans röd. Endast knappar (CTA) använder den – resten av
     paletten (rubriker, ikoner, länkar) förblir den blå/turkosa. */
  --cc-accent: #e0121c;
  --cc-accent-strong: #b40e17;
}

[data-template="capiclean"] body,
[data-template="capiclean"] .cc {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--cc-ink);
  background: #ffffff;
}
[data-template="capiclean"] h1,
[data-template="capiclean"] h2,
[data-template="capiclean"] h3,
[data-template="capiclean"] h4,
[data-template="capiclean"] .cc-head__title,
[data-template="capiclean"] .cc-banner__title {
  font-family: 'Rajdhani', 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--cc-ink);
  letter-spacing: .2px;
}
[data-template="capiclean"] .cc-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
[data-template="capiclean"] .cc-section { padding: 74px 0; }

/* ---- Knappar ---- */
[data-template="capiclean"] .cc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 30px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 2px solid var(--cc-accent); transition: all .2s ease; cursor: pointer;
}
[data-template="capiclean"] .cc-btn--primary { background: var(--cc-accent); border-color: var(--cc-accent); color: #fff; }
[data-template="capiclean"] .cc-btn--primary:hover { background: #fff; color: var(--cc-accent); border-color: var(--cc-accent); }
[data-template="capiclean"] .cc-btn--ghost { background: transparent; color: var(--cc-accent); border-color: var(--cc-accent); }
[data-template="capiclean"] .cc-btn--ghost:hover { background: var(--cc-accent); color: #fff; }

/* Delade CTA-knappar (CtaButton, postnummer-koll, bokningswizard, CTA-strip)
   renderas med .btn--primary. Matcha loggans röd inom CapiClean-mallen. */
[data-template="capiclean"] .btn--primary {
  background: var(--cc-accent);
  border-color: var(--cc-accent-strong);
}
[data-template="capiclean"] .btn--primary:hover {
  box-shadow: 0 10px 26px rgba(224, 18, 28, .4), inset 0 4px 4px rgba(255, 255, 255, .45);
}
[data-template="capiclean"] .btn--primary .btn__arrow { color: var(--cc-accent); }

/* "Så går det till"-checklistan — loggans orangea accent (samma som Begär offert)
   i stället för grönt, med hover-interaktion. */
[data-template="capiclean"] .process__check {
  background: linear-gradient(135deg, var(--cc-accent) 0%, var(--cc-accent-strong) 100%);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--cc-accent) 12%, transparent),
    0 8px 22px color-mix(in srgb, var(--cc-accent-strong) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .25s ease;
}
[data-template="capiclean"] .process__step::before { background: linear-gradient(180deg, var(--cc-accent) 0%, var(--cc-accent-strong) 100%); }
/* Snappy transition (slår [data-reveal]s 0.7s) + tydlig hover-interaktion */
[data-template="capiclean"] .process__step { transition: opacity .5s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
[data-template="capiclean"] .process__step:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--cc-accent) 40%, transparent); box-shadow: 0 18px 40px rgba(10, 23, 41, .10); }
[data-template="capiclean"] .process__step:hover .process__check { transform: scale(1.07); }
[data-template="capiclean"] .process__step:not(:last-of-type)::after { background: linear-gradient(180deg, color-mix(in srgb, var(--cc-accent) 55%, transparent), transparent); }

/* ============ HEADER ============ */
[data-template="capiclean"] .cc-header { position: relative; z-index: 30; }
[data-template="capiclean"] .cc-topbar { background: var(--cc-deep); color: #eaf6fb; font-size: 13.5px; }
[data-template="capiclean"] .cc-topbar__inner { display: flex; gap: 26px; align-items: center; height: 42px; flex-wrap: wrap; }
[data-template="capiclean"] .cc-topbar__item { display: inline-flex; align-items: center; gap: 7px; }
[data-template="capiclean"] .cc-topbar a { color: #eaf6fb; text-decoration: none; }
[data-template="capiclean"] .cc-topbar__hours { margin-left: auto; }

[data-template="capiclean"] .cc-nav { background: #fff; box-shadow: 0 2px 18px rgba(20,60,80,.07); transition: background .28s ease, box-shadow .28s ease; }

/* Startsidan: navigationen transparent ovanpå heron tills man scrollar ner */
[data-template="capiclean"] .cc-header--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
[data-template="capiclean"] .cc-header--overlay:not(.cc-header--scrolled) .cc-nav { background: transparent; box-shadow: none; }
[data-template="capiclean"] .cc-header--overlay:not(.cc-header--scrolled) .cc-menu a { color: #ffffff; }
[data-template="capiclean"] .cc-header--overlay:not(.cc-header--scrolled) .cc-menu a:hover { color: var(--cc-blue-2); border-color: var(--cc-blue-2); }
[data-template="capiclean"] .cc-header--overlay:not(.cc-header--scrolled) .cc-nav__phone { color: #ffffff; }
[data-template="capiclean"] .cc-header--overlay:not(.cc-header--scrolled) .cc-burger { color: #ffffff; }
[data-template="capiclean"] .cc-nav__inner { display: flex; align-items: center; gap: 24px; height: 116px; }
[data-template="capiclean"] .cc-logo { display: flex; align-items: center; text-decoration: none; }
[data-template="capiclean"] .cc-logo .cc-logo__img,
[data-template="capiclean"] .cc-logo img { height: 90px; width: auto; max-width: 260px; object-fit: contain; display: block; }
[data-template="capiclean"] .cc-logo__name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 26px; color: var(--cc-deep); }
[data-template="capiclean"] .cc-menu { display: flex; gap: 26px; margin-left: 56px; }
[data-template="capiclean"] .cc-menu a { color: var(--cc-ink); text-decoration: none; font-weight: 500; font-size: 15.5px; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
[data-template="capiclean"] .cc-menu a:hover { color: var(--cc-deep); border-color: var(--cc-blue); }
[data-template="capiclean"] .cc-nav__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
[data-template="capiclean"] .cc-nav__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--cc-deep); font-weight: 700; text-decoration: none; white-space: nowrap; }
[data-template="capiclean"] .cc-burger { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-right: -10px; background: none; border: 0; color: var(--cc-deep); cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-template="capiclean"] .cc-mobile { display: flex; flex-direction: column; padding: 8px 20px 18px; background: #fff; border-top: 1px solid var(--cc-line); }
[data-template="capiclean"] .cc-mobile a { min-height: 44px; }
[data-template="capiclean"] .cc-mobile a { padding: 12px 0; color: var(--cc-ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--cc-line); }
[data-template="capiclean"] .cc-mobile__phone { color: var(--cc-deep) !important; }
[data-template="capiclean"] .cc-mobile .cc-mobile__cta { border-bottom: 0; justify-content: center; text-align: center; margin-top: 12px; color: #fff !important; min-height: 46px; }

/* ---- Tjänster-dropdown (desktop + mobil) ---- */
[data-template="capiclean"] .cc-dd { position: relative; display: inline-flex; align-items: center; }
/* Osynlig brygga över gapet mellan trigger och meny — annars tappas hover när
   musen förs nedåt mot dropdownen (och den stängs innan man når den). */
[data-template="capiclean"] .cc-dd::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
[data-template="capiclean"] .cc-dd__trigger { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 6px 0; font-family: inherit; font-weight: 500; font-size: 15.5px; color: var(--cc-ink); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
[data-template="capiclean"] .cc-dd__trigger:hover { color: var(--cc-deep); }
[data-template="capiclean"] .cc-dd__trigger svg { transition: transform .2s ease; }
[data-template="capiclean"] .cc-dd.is-open .cc-dd__trigger svg { transform: rotate(180deg); }
[data-template="capiclean"] .cc-dd__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; max-width: min(320px, 92vw); max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--cc-line); border-radius: 14px; box-shadow: 0 20px 48px rgba(20,60,80,.16); padding: 8px; display: none; flex-direction: column; z-index: 1200; }
[data-template="capiclean"] .cc-dd.is-open .cc-dd__menu { display: flex; }
/* Dropdown-texten ligger på vit panel → alltid mörk (svart), oavsett att den
   ligger inuti .cc-menu (som blir vit ovanpå heron). !important slår över
   overlay-reglerna .cc-menu a { color:#fff } / :hover { color:blue }. */
[data-template="capiclean"] .cc-dd__menu a { display: flex; align-items: center; min-height: 44px; padding: 9px 14px; border-radius: 9px; color: var(--cc-ink) !important; text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; border-bottom: 0; }
[data-template="capiclean"] .cc-dd__menu a:hover,
[data-template="capiclean"] .cc-dd__menu a:focus-visible { background: var(--cc-soft); color: var(--cc-ink) !important; border-color: transparent; }
[data-template="capiclean"] .cc-dd__menu .cc-dd__all { font-weight: 700; color: var(--cc-deep) !important; border-bottom: 1px solid var(--cc-line); border-radius: 9px 9px 0 0; margin-bottom: 4px; }
[data-template="capiclean"] .cc-dd__menu .cc-dd__all:hover { color: var(--cc-deep) !important; }
@media (hover: hover) and (min-width: 981px) {
  [data-template="capiclean"] .cc-dd:hover .cc-dd__menu { display: flex; }
  [data-template="capiclean"] .cc-dd:hover .cc-dd__trigger svg { transform: rotate(180deg); }
}

/* ---- Mobil-snabbmeny (Tjänster + Om oss) — dold på desktop, visas ≤980 ---- */
[data-template="capiclean"] .cc-navm { display: none; align-items: center; gap: 16px; }
[data-template="capiclean"] .cc-navm__link { color: var(--cc-ink); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; padding: 6px 0; }
[data-template="capiclean"] .cc-navm .cc-dd__trigger { font-weight: 600; }
[data-template="capiclean"] .cc-navm .cc-dd__menu { left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 16px); }

/* Transparent header ovanpå hero (startsidan) — vit text på triggers */
[data-template="capiclean"] .cc-header--overlay:not(.cc-header--scrolled) .cc-dd__trigger,
[data-template="capiclean"] .cc-header--overlay:not(.cc-header--scrolled) .cc-navm__link { color: #ffffff; }

/* ============ BANNER / HERO ============ */
[data-template="capiclean"] .cc-banner {
  position: relative; color: #fff;
  background: linear-gradient(rgba(18,60,78,.72), rgba(18,60,78,.72)), url('/assets/img/services/Hero.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
[data-template="capiclean"] .cc-banner__grid { display: grid; grid-template-columns: 165px 1fr; gap: 36px; align-items: stretch; padding: 132px 0 40px; }
[data-template="capiclean"] .cc-banner__text { max-width: 720px; align-self: center; }
[data-template="capiclean"] .cc-banner__eyebrow { display: inline-block; text-transform: none; letter-spacing: .3px; font-size: 16px; font-style: italic; font-weight: 500; color: var(--cc-blue-2); margin-bottom: 14px; }
[data-template="capiclean"] .cc-banner__title { font-size: clamp(38px, 6vw, 62px); line-height: 1.05; color: #fff; margin: 0 0 18px; }
[data-template="capiclean"] .cc-banner__title em { font-style: normal; color: var(--cc-blue); }
[data-template="capiclean"] .cc-banner__sub { font-size: 18px; line-height: 1.6; color: #dff1f8; margin: 0 0 26px; }
[data-template="capiclean"] .cc-banner__cta { display: flex; gap: 14px; flex-wrap: wrap; }
[data-template="capiclean"] .cc-banner__cta .btn,
[data-template="capiclean"] .cc-banner__cta a { border-radius: 30px; }
[data-template="capiclean"] .cc-banner__rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: #eaf6fb; font-weight: 500; }
[data-template="capiclean"] .cc-banner__postal { margin-top: 26px; max-width: 460px; }
/* Postnummer-kollen ska BARA finnas i heron på startsidan — dölj övriga förekomster */
[data-template="capiclean"] .areas__postal { display: none !important; }
[data-template="capiclean"] .section--tight:has(> .container > .areas__postal) { display: none !important; }
/* Hero-rutan anpassad till hero-bakgrunden (glasig mörk i stället för vitt kort) */
[data-template="capiclean"] .cc-banner__postal .postal-check {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 18px 18px; box-shadow: none; backdrop-filter: blur(4px);
}
[data-template="capiclean"] .cc-banner__postal .postal-check__title { color: #ffffff; }
[data-template="capiclean"] .cc-banner__postal .postal-check__sub { color: #cfe3ec; }
[data-template="capiclean"] .cc-banner__postal .postal-check__pin { color: #ffffff; }
[data-template="capiclean"] .cc-banner__postal .postal-check__msg { color: #eaf6fb; }
/* Mildare övergång: heron tonar ut mot nästa sektions ljusa bakgrund */
[data-template="capiclean"] .cc-banner { padding-bottom: 40px; }
[data-template="capiclean"] .cc-banner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1;
  background: linear-gradient(to bottom, rgba(35,86,108,0) 0%, rgba(240,250,255,.35) 60%, var(--cc-soft-2) 100%);
  pointer-events: none;
}
[data-template="capiclean"] .cc-banner__grid { position: relative; z-index: 2; }

/* Lodrät recensions-karusell i heron */
[data-template="capiclean"] .cc-banner__reviews { position: relative; min-height: 420px; }
[data-template="capiclean"] .cc-vrev { position: absolute; inset: 0; display: flex; flex-direction: column; }
[data-template="capiclean"] .cc-vrev__viewport { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 260px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); }
[data-template="capiclean"] .cc-vrev__track { display: flex; flex-direction: column; gap: 12px; animation: cc-vrev-scroll 46s linear infinite; }
[data-template="capiclean"] .cc-vrev:hover .cc-vrev__track { animation-play-state: paused; }
[data-template="capiclean"] .cc-vrev__card { background: #fff; border-radius: 12px; padding: 12px 13px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
[data-template="capiclean"] .cc-vrev__name { display: block; font-weight: 700; color: var(--cc-ink); font-size: 14px; }
[data-template="capiclean"] .cc-vrev__stars { color: #fbbc05; letter-spacing: 1px; font-size: 13px; margin: 3px 0 5px; }
[data-template="capiclean"] .cc-vrev__body { color: var(--cc-grey); font-size: 13px; line-height: 1.45; margin: 0; }
@keyframes cc-vrev-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { [data-template="capiclean"] .cc-vrev__track { animation: none; } }

/* ============ SEKTIONSRUBRIK ============ */
[data-template="capiclean"] .cc-head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
[data-template="capiclean"] .cc-head__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px; font-weight: 600; color: var(--cc-deep); margin-bottom: 10px; }
/* Förena ALLA eyebrows till "Om oss"-stilen (ren blå versaltext) — ingen pill-
   bakgrund och ingen skin-kantlinje. html-prefixet höjer specificiteten så den
   slår Konsult-temats [data-skin="swiss-grid"] .section-head .eyebrow (kant + padding). */
[data-template="capiclean"] .eyebrow,
html[data-template="capiclean"] .section-head .eyebrow {
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 12.5px;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cc-deep);
}
[data-template="capiclean"] .cc-head__title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; }
[data-template="capiclean"] .cc-head__intro { color: var(--cc-grey); font-size: 16.5px; line-height: 1.7; margin: 0; }

/* ============ TRUST-BAND ============ */
[data-template="capiclean"] .cc-trust { background: var(--cc-soft-2); border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); padding: 22px 0; }

/* ============ TVÅKOLUMN (text vänster, kort/aside höger) ============ */
[data-template="capiclean"] .cc-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: start; }
[data-template="capiclean"] .cc-split__text { text-align: left; }
[data-template="capiclean"] .cc-split__text .cc-head__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px; font-weight: 600; color: var(--cc-deep); margin-bottom: 10px; }
[data-template="capiclean"] .cc-split__text .cc-head__title { text-align: left; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 18px; }
[data-template="capiclean"] .cc-split__cards { display: flex; flex-direction: column; gap: 16px; }

/* ============ TJÄNSTER (box-kort, horisontella i högerkolumnen) ============ */
[data-template="capiclean"] .cc-services { background: #fff; }
[data-template="capiclean"] .cc-box {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--cc-line); border-radius: 14px; padding: 20px 22px;
  text-decoration: none; color: var(--cc-ink); transition: all .22s ease; box-shadow: 0 8px 26px rgba(20,60,80,.05);
}
[data-template="capiclean"] .cc-box:hover { background: var(--cc-blue); border-color: var(--cc-blue); transform: translateX(6px); box-shadow: 0 18px 40px rgba(54,125,153,.22); }
[data-template="capiclean"] .cc-box__icon { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; background: var(--cc-soft); display: flex; align-items: center; justify-content: center; color: var(--cc-deep); }
[data-template="capiclean"] .cc-box:hover .cc-box__icon { background: #fff; }
[data-template="capiclean"] .cc-box__icon img { width: 36px; height: 36px; object-fit: contain; }
[data-template="capiclean"] .cc-box__icon .cc-box__ico { width: 40px; height: 40px; object-fit: contain; }
/* Kategori-ikon i delade tjänstekort (Om oss, /tjanster m.fl.) */
[data-template="capiclean"] .card__icon .card__icon-img { width: 54px; height: 54px; object-fit: contain; display: block; margin: 0 auto; }
[data-template="capiclean"] .cc-box__body { display: flex; flex-direction: column; gap: 4px; }
[data-template="capiclean"] .cc-box__title { font-size: 20px; margin: 0; }
[data-template="capiclean"] .cc-box__text { color: var(--cc-grey); font-size: 14.5px; line-height: 1.55; margin: 0; }
[data-template="capiclean"] .cc-box:hover .cc-box__text,
[data-template="capiclean"] .cc-box:hover .cc-box__title,
[data-template="capiclean"] .cc-box:hover .cc-box__more { color: #fff; }
[data-template="capiclean"] .cc-box__price { font-weight: 700; color: var(--cc-deep); }
[data-template="capiclean"] .cc-box:hover .cc-box__price { color: #fff; }
[data-template="capiclean"] .cc-box__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cc-deep); font-size: 14.5px; }

/* ============ LÄS MER / VISA MINDRE ============ */
[data-template="capiclean"] .cc-readmore__p { color: var(--cc-grey); font-size: 16px; line-height: 1.75; margin: 0 0 14px; }
[data-template="capiclean"] .cc-readmore__btn {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--cc-deep); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid var(--cc-blue);
}
[data-template="capiclean"] .cc-readmore__btn:hover { color: var(--cc-ink); }

/* ============ OM OSS ============ */
[data-template="capiclean"] .cc-about { background: var(--cc-soft); }
[data-template="capiclean"] .cc-split--about { grid-template-columns: 1.4fr 0.6fr; align-items: center; }
[data-template="capiclean"] .cc-split__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
@media (max-width: 900px) { [data-template="capiclean"] .cc-split__aside { align-items: flex-start; } }

/* ============ VARFÖR OSS + STATS ============ */
[data-template="capiclean"] .cc-usp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 44px; }
[data-template="capiclean"] .cc-usp__item {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--cc-line); border-radius: 14px; padding: 22px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; cursor: default; outline: none;
  will-change: transform;
}
[data-template="capiclean"] .cc-usp__item:hover,
[data-template="capiclean"] .cc-usp__item:focus-visible { transform: translateY(-6px) scale(1.015); border-color: var(--cc-blue); box-shadow: 0 18px 38px rgba(54,125,153,.16); animation-play-state: paused; }
[data-template="capiclean"] .cc-usp__item:hover .cc-usp__icon,
[data-template="capiclean"] .cc-usp__item:focus-visible .cc-usp__icon { background: var(--cc-deep); color: #fff; }
[data-template="capiclean"] .cc-usp__icon { transition: background .25s ease, color .25s ease; }
/* Mild gungning */
@keyframes cc-sway { 0%,100% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-5px) rotate(0.5deg); } }
[data-template="capiclean"] .cc-sway { animation: cc-sway 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { [data-template="capiclean"] .cc-sway { animation: none; } }
[data-template="capiclean"] .cc-usp__icon { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 12px; background: var(--cc-soft); color: var(--cc-deep); display: flex; align-items: center; justify-content: center; }
[data-template="capiclean"] .cc-usp__item h3 { font-size: 19px; margin: 0 0 6px; }
[data-template="capiclean"] .cc-usp__item p { color: var(--cc-grey); font-size: 14.5px; line-height: 1.6; margin: 0; }
[data-template="capiclean"] .cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: var(--cc-deep); border-radius: 16px; padding: 40px 24px; }
[data-template="capiclean"] .cc-stat { text-align: center; color: #fff; }
[data-template="capiclean"] .cc-stat__num { font-family: 'Rajdhani', sans-serif; font-size: 42px; font-weight: 700; line-height: 1; }
[data-template="capiclean"] .cc-stat__lab { margin-top: 8px; color: #dff1f8; font-size: 14.5px; }

/* ============ PROCESS + BOKNING (tvåkolumn) ============ */
[data-template="capiclean"] .cc-process { background: var(--cc-soft-2); }
[data-template="capiclean"] .cc-procwrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: start; }
[data-template="capiclean"] .cc-procwrap__left { text-align: left; }
[data-template="capiclean"] .cc-procwrap__left .cc-head__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px; font-weight: 600; color: var(--cc-deep); margin-bottom: 10px; }
[data-template="capiclean"] .cc-procwrap__left .cc-head__title { text-align: left; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 14px; }
[data-template="capiclean"] .cc-procwrap__intro { color: var(--cc-grey); font-size: 16px; line-height: 1.7; margin: 0 0 26px; }
[data-template="capiclean"] .cc-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
[data-template="capiclean"] .cc-step { background: #fff; border: 1px solid var(--cc-line); border-radius: 14px; padding: 24px 20px; text-align: left; }
[data-template="capiclean"] .cc-step__num { width: 44px; height: 44px; border-radius: 50%; background: var(--cc-deep); color: #fff; font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; margin: 0 0 12px; }
[data-template="capiclean"] .cc-step h3 { font-size: 18px; margin: 0 0 8px; }
[data-template="capiclean"] .cc-step p { color: var(--cc-grey); font-size: 14.5px; line-height: 1.6; margin: 0; }
[data-template="capiclean"] .cc-bookpanel { background: #fff; border: 1px solid var(--cc-line); border-radius: 18px; padding: 30px 28px; box-shadow: 0 18px 44px rgba(20,60,80,.10); position: sticky; top: 24px; }
[data-template="capiclean"] .cc-bookpanel__title { font-family: 'Rajdhani', sans-serif; font-size: 26px; margin: 0 0 18px; color: var(--cc-ink); }

/* Aside-formulär (AsideForm) — samma panel-look som bok-panelen på ALLA innersidor
   (tjänst/geo/hubb/om-oss/priser): rundad ram, matchande skugga + rubrik. */
[data-template="capiclean"] .aside-card { background: #fff; border: 1px solid var(--cc-line); border-radius: 18px; padding: 28px 26px; box-shadow: 0 18px 44px rgba(20,60,80,.10); }
[data-template="capiclean"] .aside-card h4 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.2; margin: 0 0 16px; color: var(--cc-ink); }
[data-template="capiclean"] .aside-card .btn { border-radius: 30px !important; font-weight: 600; }

/* ============ RECENSIONER / OMRÅDEN / BILDER / BOOKING ============ */
[data-template="capiclean"] .cc-reviews { background: #fff; }
[data-template="capiclean"] .cc-reviews__google { text-align: center; margin-top: 26px; }
[data-template="capiclean"] .cc-areas { background: var(--cc-soft); }
[data-template="capiclean"] .cc-areas__postal { max-width: 520px; margin: 0 auto 30px; }
[data-template="capiclean"] .cc-booking { background: var(--cc-soft-2); }
[data-template="capiclean"] .cc-photos { background: #fff; }

/* ============ FOOTER ============ */
[data-template="capiclean"] .cc-footer { background: var(--cc-ink-2); color: #c8d3d8; }
[data-template="capiclean"] .cc-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding: 66px 20px 46px; }
[data-template="capiclean"] .cc-footer__brand { font-family: 'Rajdhani', sans-serif; font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 14px; }
[data-template="capiclean"] .cc-footer__logo { display: inline-block; margin-bottom: 16px; }
[data-template="capiclean"] .cc-footer__logo img { height: 72px; width: auto; max-width: 240px; object-fit: contain; display: block; }
[data-template="capiclean"] .cc-footer__wordmark { display: inline-flex; flex-direction: column; text-decoration: none; margin-bottom: 18px; }
[data-template="capiclean"] .cc-footer__wordmark-main { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 36px; line-height: 1; color: #ffffff; }
[data-template="capiclean"] .cc-footer__wordmark-sub { text-transform: uppercase; letter-spacing: 3px; font-size: 12.5px; font-weight: 500; color: #dbeaf1; margin-top: 5px; }
[data-template="capiclean"] .cc-footer__tag { color: #9fb0b7; line-height: 1.7; font-size: 14.5px; max-width: 320px; }
[data-template="capiclean"] .cc-footer__contact { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
[data-template="capiclean"] .cc-footer__contact li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #c8d3d8; }
[data-template="capiclean"] .cc-footer__contact a { color: #c8d3d8; text-decoration: none; }
[data-template="capiclean"] .cc-footer__contact a:hover { color: var(--cc-blue); }
[data-template="capiclean"] .cc-footer__social { display: flex; gap: 10px; margin-top: 20px; }
[data-template="capiclean"] .cc-footer__social-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: background .2s ease, transform .2s ease, color .2s ease; }
[data-template="capiclean"] .cc-footer__social-btn:hover { background: #1877F2; color: #fff; transform: translateY(-2px); }
[data-template="capiclean"] .cc-footer__heading { color: #fff; font-size: 17px; margin: 0 0 16px; font-family: 'Rajdhani', sans-serif; }
[data-template="capiclean"] .cc-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
[data-template="capiclean"] .cc-footer__links a { color: #9fb0b7; text-decoration: none; font-size: 14.5px; }
[data-template="capiclean"] .cc-footer__links a:hover { color: var(--cc-blue); }
[data-template="capiclean"] .cc-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
[data-template="capiclean"] .cc-footer__bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px; font-size: 13.5px; color: #8fa0a7; }
[data-template="capiclean"] .cc-footer__bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
[data-template="capiclean"] .cc-footer__bottom-links a { color: #8fa0a7; text-decoration: none; }

/* ============ INNERSIDOR (FlatPageRich m.fl.) — palett/typografi-override ============
   Innersidorna renderas av delad markup; här tar de CapiClean-utseendet:
   rubriker i Rajdhani, deep-blå accenter, ljusblå sektionsband, rundade knappar. */
[data-template="capiclean"] main h1,
[data-template="capiclean"] main h2,
[data-template="capiclean"] main h3 { font-family: 'Rajdhani', 'Poppins', sans-serif; }
[data-template="capiclean"] :root,
[data-template="capiclean"] main { --brand: #367d99; }
[data-template="capiclean"] a { color: var(--cc-deep); }
[data-template="capiclean"] .btn,
[data-template="capiclean"] .cta-button,
[data-template="capiclean"] button.btn { border-radius: 30px !important; }
/* mjuka ljusblå sektionsband + snabbsvar/faq-accenter ärver via --brand ovan */

/* ============ RESPONSIVT ============ */
@media (max-width: 980px) {
  [data-template="capiclean"] .cc-banner__grid { grid-template-columns: 1fr; padding-top: 118px; }
  [data-template="capiclean"] .cc-banner__reviews { display: none; }
  [data-template="capiclean"] .cc-split,
  [data-template="capiclean"] .cc-split--about,
  [data-template="capiclean"] .cc-procwrap { grid-template-columns: 1fr; gap: 30px; }
  [data-template="capiclean"] .cc-bookpanel { position: static; }
  [data-template="capiclean"] .cc-usp { grid-template-columns: 1fr; }
  [data-template="capiclean"] .cc-stats { grid-template-columns: repeat(2, 1fr); }
  [data-template="capiclean"] .cc-steps { grid-template-columns: repeat(2, 1fr); }
  [data-template="capiclean"] .cc-footer__inner { grid-template-columns: 1fr 1fr; }
  [data-template="capiclean"] .cc-menu, [data-template="capiclean"] .cc-nav__phone, [data-template="capiclean"] .cc-cta-desktop { display: none; }
  [data-template="capiclean"] .cc-burger { display: inline-flex; }
  [data-template="capiclean"] .cc-navm { display: flex; }
}
@media (max-width: 620px) {
  [data-template="capiclean"] .cc-boxes { grid-template-columns: 1fr; }
  [data-template="capiclean"] .cc-stats, [data-template="capiclean"] .cc-steps { grid-template-columns: 1fr; }
  [data-template="capiclean"] .cc-footer__inner { grid-template-columns: 1fr; }
  [data-template="capiclean"] .cc-topbar__hours { display: none; }
  [data-template="capiclean"] .cc-section { padding: 52px 0; }
}