/*
 * Renoskam service pages (first: /dachreinigung/).
 * Helio Header/Content/How-it-works/Feature/Project/FAQ patterns adapted to
 * the Renoskam system. Depends on blog-index.css for tokens, resets, eyebrow,
 * buttons, section headings, cards, CTA, theme-chrome hiding, and Themify
 * hardening. Scoped to `.renoskam-service-page` and the
 * `renoskam-service-page-active` body class.
 */

.renoskam-sp-section-lead {
  color: var(--renoskam-bi-muted);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
  margin-block-start: 22px;
  max-inline-size: 620px;
}

.renoskam-sp-inline-link {
  color: var(--renoskam-bi-dark);
  display: inline-block;
  font-weight: 700;
  margin-block-start: 10px;
  text-decoration: underline;
  text-decoration-color: var(--renoskam-bi-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Hero with before/after proof. */
.renoskam-sp-hero {
  background: var(--renoskam-bi-dark);
  color: var(--renoskam-bi-white);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 7vw, 120px) 0 clamp(80px, 7.4vw, 124px);
  position: relative;
}

.renoskam-sp-hero::before {
  background-image:
    linear-gradient(90deg, rgba(4, 12, 16, 0.96) 0%, rgba(4, 12, 16, 0.86) 48%, rgba(4, 12, 16, 0.6) 100%),
    linear-gradient(180deg, rgba(4, 12, 16, 0.1) 0%, rgba(4, 12, 16, 0.7) 100%),
    var(--renoskam-sp-hero-image);
  background-position: center, center, 70% 45%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: 0;
  position: absolute;
  z-index: -2;
}

.renoskam-sp-hero .renoskam-bi-hero__texture i:nth-child(2) {
  display: none;
}

.renoskam-sp-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(48px, 5.6vw, 96px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
}

.renoskam-sp-hero h1 {
  color: var(--renoskam-bi-white);
  font-size: clamp(46px, 4.6vw, 76px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.99;
  text-wrap: balance;
}

.renoskam-sp-hero h1 em,
.renoskam-service-page :is(h2, h3) em {
  color: var(--renoskam-bi-orange);
  font-style: normal;
}

.renoskam-sp-hero__lead {
  color: rgba(255, 255, 255, 0.77);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  margin-block-start: 30px;
  max-inline-size: 640px;
}

.renoskam-sp-rating {
  align-items: center;
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px 14px;
  margin-block-start: 36px;
  padding-block-start: 22px;
}

.renoskam-sp-rating strong {
  color: var(--renoskam-bi-white);
  font-weight: 600;
  margin-inline-end: 6px;
}

.renoskam-sp-rating__stars {
  color: #ffb400;
  display: inline-flex;
  gap: 2px;
}

.renoskam-sp-rating__stars .renoskam-icon {
  fill: currentColor;
  font-size: 16px;
}

.renoskam-sp-rating:hover span:last-child,
.renoskam-sp-rating:focus-visible span:last-child {
  color: var(--renoskam-bi-white);
}

/* Before/after comparison. */
.renoskam-sp-compare {
  position: relative;
}

.renoskam-sp-compare::before {
  border: 1px solid rgba(255, 255, 255, 0.24);
  content: "";
  inset: -16px 16px 46px -16px;
  pointer-events: none;
  position: absolute;
}

.renoskam-sp-compare__frame {
  aspect-ratio: 4 / 3;
  background: #1d292f;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.renoskam-sp-compare__image {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  user-select: none;
}

.renoskam-sp-compare__before {
  clip-path: inset(0 calc(100% - var(--renoskam-sp-position, 50%)) 0 0);
  inset: 0;
  position: absolute;
}

.renoskam-sp-compare__handle {
  background: var(--renoskam-bi-white);
  inline-size: 2px;
  inset: 0 auto 0 var(--renoskam-sp-position, 50%);
  pointer-events: none;
  position: absolute;
  translate: -1px 0;
}

.renoskam-sp-compare__handle > span {
  align-items: center;
  background: var(--renoskam-bi-orange);
  block-size: 46px;
  border: 2px solid var(--renoskam-bi-white);
  border-radius: 50%;
  color: var(--renoskam-bi-white);
  display: flex;
  font-size: 20px;
  inline-size: 46px;
  inset: 50% auto auto 50%;
  justify-content: center;
  position: absolute;
  translate: -50% -50%;
}

.renoskam-sp-compare__label {
  background: rgba(7, 16, 22, 0.78);
  color: var(--renoskam-bi-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: 16px;
}

.renoskam-sp-compare__label--before {
  left: 16px;
}

.renoskam-sp-compare__label--after {
  right: 16px;
}

.renoskam-sp-compare__range {
  appearance: none;
  background: transparent;
  block-size: 100%;
  cursor: ew-resize;
  inline-size: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  z-index: 3;
}

.renoskam-sp-compare__range[hidden] {
  display: none;
}

.renoskam-sp-compare:has(.renoskam-sp-compare__range:focus-visible) .renoskam-sp-compare__frame {
  outline: 3px solid var(--renoskam-bi-orange);
  outline-offset: 4px;
}

.renoskam-sp-compare figcaption {
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  font-size: 13px;
  gap: 10px;
  margin-block-start: 18px;
}

.renoskam-sp-compare figcaption .renoskam-icon {
  color: var(--renoskam-bi-orange);
  font-size: 18px;
}

/* Facts strip. */
.renoskam-sp-facts {
  background: var(--renoskam-bi-grey-strong);
  border-block-end: 1px solid #d9dcdd;
}

.renoskam-sp-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.renoskam-sp-facts__grid li {
  border-inline-start: 1px solid #d5d9da;
  display: grid;
  gap: 4px;
  padding: 34px clamp(18px, 2.4vw, 36px);
}

.renoskam-sp-facts__grid li:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.renoskam-sp-facts__grid strong {
  color: var(--renoskam-bi-dark);
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.renoskam-sp-facts__grid span {
  color: var(--renoskam-bi-dark);
  font-size: 16px;
  font-weight: 600;
  margin-block-start: 8px;
}

.renoskam-sp-facts__grid small {
  color: #6b7479;
  font-size: 13px;
}

/* Problem. */
.renoskam-sp-problem {
  background: var(--renoskam-bi-white);
  padding: clamp(96px, 9.5vw, 148px) 0;
}

.renoskam-sp-problem__grid {
  align-items: center;
  display: grid;
  gap: clamp(56px, 6vw, 96px) clamp(48px, 6vw, 104px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.renoskam-sp-problem__media {
  position: relative;
}

.renoskam-sp-problem__media img {
  aspect-ratio: 4 / 3;
  block-size: auto;
  inline-size: 100%;
  object-fit: cover;
}

.renoskam-sp-problem__media figcaption {
  background: var(--renoskam-bi-white);
  box-shadow: 0 20px 50px rgba(7, 19, 30, 0.14);
  display: grid;
  gap: 3px;
  inset: auto -24px 32px auto;
  max-inline-size: 300px;
  padding: 18px 22px;
  position: absolute;
}

.renoskam-sp-problem__media figcaption strong {
  color: var(--renoskam-bi-dark);
  font-size: 15px;
}

.renoskam-sp-problem__media figcaption span {
  color: var(--renoskam-bi-muted);
  font-size: 13px;
  line-height: 1.45;
}

.renoskam-service-page :where(h2) {
  color: var(--renoskam-bi-dark);
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.renoskam-sp-problem__list {
  border-block-start: 1px solid var(--renoskam-bi-line);
  border-inline-start: 1px solid var(--renoskam-bi-line);
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.renoskam-sp-problem__list li {
  align-items: start;
  border-block-end: 1px solid var(--renoskam-bi-line);
  border-inline-end: 1px solid var(--renoskam-bi-line);
  display: grid;
  gap: 18px;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: clamp(24px, 2.6vw, 36px);
}

.renoskam-sp-problem__list li > span {
  align-items: center;
  background: var(--renoskam-bi-orange-soft);
  block-size: 44px;
  color: var(--renoskam-bi-orange);
  display: inline-flex;
  font-size: 20px;
  inline-size: 44px;
  justify-content: center;
}

.renoskam-sp-problem__list h3 {
  color: var(--renoskam-bi-dark);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.renoskam-sp-problem__list p {
  color: var(--renoskam-bi-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-block-start: 6px;
}

/* Process. */
.renoskam-sp-process {
  background: var(--renoskam-bi-grey);
  padding: clamp(96px, 9.5vw, 148px) 0;
}

.renoskam-sp-process__grid {
  align-items: stretch;
  display: grid;
  gap: clamp(40px, 5vw, 88px);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.renoskam-sp-process__media {
  display: flex;
  flex-direction: column;
}

.renoskam-sp-process__media img {
  block-size: 100%;
  flex: 1 1 auto;
  inline-size: 100%;
  min-block-size: 0;
  object-fit: cover;
}

.renoskam-sp-process__media figcaption {
  align-items: center;
  background: var(--renoskam-bi-dark);
  color: var(--renoskam-bi-white);
  display: flex;
  gap: 14px;
  padding: 18px 22px;
}

.renoskam-sp-process__media figcaption > span {
  align-items: center;
  background: var(--renoskam-bi-orange);
  block-size: 42px;
  color: var(--renoskam-bi-dark);
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 20px;
  justify-content: center;
}

.renoskam-sp-process__media figcaption strong {
  display: block;
  font-size: 16px;
}

.renoskam-sp-process__media figcaption small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.renoskam-sp-steps {
  counter-reset: none;
  display: grid;
  gap: 16px;
}

.renoskam-sp-steps li {
  background: var(--renoskam-bi-white);
  border: 1px solid #dde1e2;
  display: grid;
  gap: 22px;
  grid-template-columns: 64px minmax(0, 1fr);
  padding: 28px 30px;
}

.renoskam-sp-steps__number {
  color: rgba(243, 84, 5, 0.32);
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.renoskam-sp-steps h3 {
  color: var(--renoskam-bi-dark);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.renoskam-sp-steps p {
  color: var(--renoskam-bi-muted);
  font-size: 16px;
  line-height: 1.65;
  margin-block-start: 8px;
}

/* Options. */
.renoskam-sp-options {
  background: var(--renoskam-bi-white);
  padding: clamp(96px, 9.5vw, 148px) 0;
}

.renoskam-sp-options__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.renoskam-sp-option {
  background: var(--renoskam-bi-white);
  border: 1px solid #dde1e2;
  display: flex;
  flex-direction: column;
  padding: 12px;
  transition: border-color 220ms ease;
}

.renoskam-sp-option:hover {
  border-color: rgba(243, 84, 5, 0.55);
}

.renoskam-sp-option__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.renoskam-sp-option__media img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  transition: scale 700ms var(--renoskam-bi-ease);
}

.renoskam-sp-option:hover .renoskam-sp-option__media img {
  scale: 1.045;
}

.renoskam-sp-option__label {
  background: var(--renoskam-bi-dark);
  color: var(--renoskam-bi-white);
  font-size: 12px;
  font-weight: 700;
  inset: 14px auto auto 14px;
  letter-spacing: 0.05em;
  padding: 7px 11px;
  position: absolute;
  text-transform: uppercase;
}

.renoskam-sp-option:nth-child(2) .renoskam-sp-option__label {
  background: var(--renoskam-bi-orange-dark);
}

.renoskam-sp-option__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 24px 12px 12px;
}

.renoskam-sp-option h3 {
  color: var(--renoskam-bi-dark);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.renoskam-sp-option p {
  color: var(--renoskam-bi-muted);
  font-size: 15px;
  line-height: 1.6;
}

.renoskam-sp-option ul {
  border-block-start: 1px solid #e6e9ea;
  display: grid;
  gap: 10px;
  padding-block-start: 16px;
}

.renoskam-sp-option li {
  align-items: start;
  color: #2d3439;
  display: grid;
  font-size: 15px;
  gap: 10px;
  grid-template-columns: 18px minmax(0, 1fr);
  line-height: 1.45;
}

.renoskam-sp-option li .renoskam-icon {
  color: var(--renoskam-bi-orange);
  font-size: 18px;
}

.renoskam-sp-option__link {
  align-items: center;
  background: var(--renoskam-bi-button-dark);
  color: var(--renoskam-bi-white);
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  gap: 10px;
  justify-content: center;
  margin-block-start: auto;
  min-block-size: 48px;
  padding: 0 20px;
  transition: background-color 180ms ease;
}

.renoskam-sp-option__link .renoskam-icon {
  font-size: 17px;
  transition: translate 180ms ease;
}

.renoskam-sp-option__link:hover,
.renoskam-sp-option__link:focus-visible {
  background: var(--renoskam-bi-orange-dark);
}

.renoskam-sp-option__link:hover .renoskam-icon {
  translate: 3px 0;
}

/* Campaign band. */
.renoskam-sp-campaign {
  background-color: #0b151c;
  background-image:
    linear-gradient(90deg, rgba(7, 19, 30, 0.97) 0%, rgba(7, 19, 30, 0.9) 55%, rgba(7, 19, 30, 0.7) 100%),
    var(--renoskam-sp-campaign-image);
  background-position: center;
  background-size: cover;
  border-block-start: 4px solid var(--renoskam-bi-orange);
  color: var(--renoskam-bi-white);
  padding: clamp(56px, 5.6vw, 84px) 0;
}

.renoskam-sp-campaign__inner {
  align-items: center;
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.renoskam-sp-campaign__price {
  background: var(--renoskam-bi-orange);
  color: var(--renoskam-bi-white);
  display: grid;
  gap: 2px;
  padding: 22px 28px;
}

.renoskam-sp-campaign__price small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.renoskam-sp-campaign__price strong {
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.renoskam-sp-campaign__price span {
  font-size: 14px;
  font-weight: 600;
}

/* Focus variant (Fassadenreinigung): a word instead of a price. */
.renoskam-sp-campaign__price--focus strong {
  font-size: clamp(30px, 2.6vw, 40px);
  letter-spacing: -0.04em;
}

.renoskam-sp-campaign .renoskam-bi-eyebrow {
  margin-block-end: 14px;
}

.renoskam-service-page .renoskam-sp-campaign h2 {
  color: var(--renoskam-bi-white);
  font-size: clamp(32px, 3vw, 48px);
}

.renoskam-sp-campaign__copy > p:not(.renoskam-bi-eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.6;
  margin-block-start: 12px;
}

/* Benefits. */
.renoskam-sp-benefits {
  background: var(--renoskam-bi-navy);
  color: var(--renoskam-bi-white);
  padding: clamp(96px, 9.5vw, 148px) 0;
}

.renoskam-service-page .renoskam-sp-heading--dark h2 {
  color: var(--renoskam-bi-white);
}

.renoskam-sp-heading--dark > p {
  color: rgba(255, 255, 255, 0.72);
}

.renoskam-sp-benefits__grid {
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.renoskam-sp-benefits__grid li {
  border-block-end: 1px solid rgba(255, 255, 255, 0.14);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.14);
  padding: clamp(28px, 3vw, 44px);
  transition: background-color 240ms ease;
}

.renoskam-sp-benefits__grid li:hover {
  background: rgba(255, 255, 255, 0.04);
}

.renoskam-sp-benefits__grid li > span {
  align-items: center;
  background: var(--renoskam-bi-orange);
  block-size: 50px;
  color: var(--renoskam-bi-white);
  display: inline-flex;
  font-size: 22px;
  inline-size: 50px;
  justify-content: center;
  margin-block-end: 26px;
}

.renoskam-sp-benefits__grid h3 {
  color: var(--renoskam-bi-white);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.renoskam-sp-benefits__grid p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.65;
  margin-block-start: 10px;
}

/* Realizations. */
.renoskam-sp-projects {
  background: var(--renoskam-bi-white);
  padding: clamp(96px, 9.5vw, 148px) 0;
}

.renoskam-sp-projects__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.renoskam-sp-project {
  background: var(--renoskam-bi-white);
  border: 1px solid #dde1e2;
  color: var(--renoskam-bi-dark);
  display: flex;
  flex-direction: column;
  padding: 12px;
  transition: border-color 220ms ease;
}

.renoskam-sp-project:hover,
.renoskam-sp-project:focus-visible {
  border-color: rgba(243, 84, 5, 0.55);
}

.renoskam-sp-project:focus-visible {
  outline: 3px solid var(--renoskam-bi-orange);
  outline-offset: 4px;
}

.renoskam-sp-project__media {
  aspect-ratio: 5.88 / 3.45;
  background: #e9eae7;
  display: block;
  overflow: hidden;
  position: relative;
}

.renoskam-sp-project__media img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  transition: scale 700ms var(--renoskam-bi-ease);
}

.renoskam-sp-project:hover .renoskam-sp-project__media img,
.renoskam-sp-project:focus-visible .renoskam-sp-project__media img {
  scale: 1.045;
}

.renoskam-sp-project:hover .renoskam-sp-project__arrow,
.renoskam-sp-project:focus-visible .renoskam-sp-project__arrow {
  background: var(--renoskam-bi-orange);
  border-color: var(--renoskam-bi-orange);
  opacity: 1;
  translate: 0 0;
}

.renoskam-sp-project__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 10px 8px;
}

.renoskam-sp-project__body small {
  align-items: center;
  color: var(--renoskam-bi-muted);
  display: inline-flex;
  font-size: 13px;
  gap: 8px;
}

.renoskam-sp-project__body small .renoskam-icon {
  font-size: 15px;
}

.renoskam-sp-project__body strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.renoskam-sp-project__cta {
  align-items: center;
  border-block-start: 1px solid #e3e6e7;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: space-between;
  margin-block-start: auto;
  padding-block-start: 14px;
}

.renoskam-sp-project__cta .renoskam-icon {
  font-size: 17px;
  transition: translate 180ms ease;
}

.renoskam-sp-project:hover .renoskam-sp-project__cta {
  color: var(--renoskam-bi-orange-dark);
}

.renoskam-sp-project:hover .renoskam-sp-project__cta .renoskam-icon {
  translate: 3px 0;
}

/* Guides. */
.renoskam-sp-guides {
  background: var(--renoskam-bi-grey);
  padding: clamp(96px, 9.5vw, 148px) 0;
}

/* FAQ. */
.renoskam-sp-faq {
  background: var(--renoskam-bi-white);
  padding: clamp(96px, 9.5vw, 148px) 0;
}

.renoskam-sp-faq__grid {
  align-items: start;
  display: grid;
  gap: clamp(40px, 6vw, 112px);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.renoskam-sp-faq__heading {
  position: sticky;
  top: 112px;
}

.renoskam-sp-faq__heading > p:not(.renoskam-bi-eyebrow) {
  color: var(--renoskam-bi-muted);
  font-size: 17px;
  line-height: 1.6;
  margin-block: 22px 26px;
}

.renoskam-sp-faq__contact {
  background: var(--renoskam-bi-button-dark);
  border: 1px solid var(--renoskam-bi-button-dark);
  color: var(--renoskam-bi-white);
  padding: 0 22px;
}

.renoskam-sp-faq__media {
  margin-block-start: 44px;
  max-inline-size: 460px;
  position: relative;
}

.renoskam-sp-faq__media img {
  aspect-ratio: 600 / 338;
  block-size: auto;
  inline-size: 100%;
  object-fit: cover;
}

.renoskam-sp-faq__media figcaption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  inset: 12px 12px auto;
  pointer-events: none;
  position: absolute;
}

.renoskam-sp-faq__media figcaption span {
  background: rgba(7, 16, 22, 0.78);
  color: var(--renoskam-bi-white);
  font-size: 11px;
  font-weight: 700;
  justify-self: start;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  text-transform: uppercase;
}

.renoskam-sp-faq__media figcaption span:last-child {
  justify-self: end;
}

.renoskam-sp-faq__contact:hover,
.renoskam-sp-faq__contact:focus-visible {
  background: var(--renoskam-bi-orange-dark);
  border-color: var(--renoskam-bi-orange-dark);
}

.renoskam-sp-faq__list {
  border-block-start: 1px solid var(--renoskam-bi-line);
}

.renoskam-sp-faq__item {
  border-block-end: 1px solid var(--renoskam-bi-line);
}

.renoskam-sp-faq__item summary {
  align-items: center;
  color: var(--renoskam-bi-dark);
  cursor: pointer;
  display: flex;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  gap: 24px;
  justify-content: space-between;
  letter-spacing: -0.015em;
  line-height: 1.35;
  list-style: none;
  padding: 26px 0;
  transition: color 180ms ease;
}

.renoskam-sp-faq__item summary::-webkit-details-marker {
  display: none;
}

.renoskam-sp-faq__item summary:hover {
  color: var(--renoskam-bi-orange-dark);
}

.renoskam-sp-faq__item summary:focus-visible {
  outline: 3px solid var(--renoskam-bi-orange);
  outline-offset: 4px;
}

.renoskam-sp-faq__icon {
  block-size: 40px;
  border: 1px solid #cdd2d4;
  flex: 0 0 40px;
  inline-size: 40px;
  position: relative;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.renoskam-sp-faq__icon::before,
.renoskam-sp-faq__icon::after {
  background: currentColor;
  block-size: 2px;
  content: "";
  inline-size: 14px;
  inset: 50% auto auto 50%;
  position: absolute;
  transition: rotate 220ms ease;
  translate: -50% -50%;
}

.renoskam-sp-faq__icon::after {
  rotate: 90deg;
}

.renoskam-sp-faq__item[open] .renoskam-sp-faq__icon {
  background: var(--renoskam-bi-orange);
  border-color: var(--renoskam-bi-orange);
  color: var(--renoskam-bi-white);
}

.renoskam-sp-faq__item[open] .renoskam-sp-faq__icon::after {
  rotate: 0deg;
}

.renoskam-sp-faq__answer {
  color: var(--renoskam-bi-muted);
  font-size: 16px;
  line-height: 1.7;
  max-inline-size: 760px;
  padding: 0 64px 28px 0;
}

.renoskam-sp-faq__answer a {
  align-items: center;
  color: var(--renoskam-bi-dark);
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  margin-block-start: 12px;
  text-decoration: underline;
  text-decoration-color: var(--renoskam-bi-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.renoskam-sp-faq__answer a .renoskam-icon {
  font-size: 16px;
}

/* Theme hardening for native controls and links that Themify restyles. */
body.renoskam-service-page-active .renoskam-service-page :is(.renoskam-sp-option__link, .renoskam-sp-project, .renoskam-sp-rating, .renoskam-sp-faq__contact, .renoskam-sp-inline-link, .renoskam-sp-faq__answer a) {
  box-shadow: none !important;
  text-transform: none !important;
  transform: none !important;
}

body.renoskam-service-page-active .renoskam-service-page .renoskam-sp-option__link,
body.renoskam-service-page-active .renoskam-service-page .renoskam-sp-faq__contact {
  background: var(--renoskam-bi-button-dark) !important;
  border-radius: 0 !important;
  color: var(--renoskam-bi-white) !important;
  text-decoration: none !important;
}

body.renoskam-service-page-active .renoskam-service-page :is(.renoskam-sp-option__link, .renoskam-sp-faq__contact):is(:hover, :focus-visible) {
  background: var(--renoskam-bi-orange-dark) !important;
  color: var(--renoskam-bi-white) !important;
}

body.renoskam-service-page-active .renoskam-service-page .renoskam-sp-project,
body.renoskam-service-page-active .renoskam-service-page .renoskam-sp-project:is(:hover, :focus, :active) {
  background: var(--renoskam-bi-white) !important;
  color: var(--renoskam-bi-dark) !important;
  text-decoration: none !important;
}

body.renoskam-service-page-active .renoskam-service-page .renoskam-sp-rating {
  color: rgba(255, 255, 255, 0.72) !important;
  text-decoration: none !important;
}

body.renoskam-service-page-active .renoskam-service-page :is(.renoskam-sp-inline-link, .renoskam-sp-faq__answer a) {
  color: var(--renoskam-bi-dark) !important;
}

body.renoskam-service-page-active .renoskam-service-page .renoskam-sp-faq__item summary {
  background: transparent !important;
}

/* Themify styles every input (`input:read-write { width: 17em; margin: ... }`),
   which shrank this full-frame control to 272px on staging, so pointer and
   handle drifted apart. */
body.renoskam-service-page-active .renoskam-service-page .renoskam-sp-compare__range {
  appearance: none !important;
  background: transparent !important;
  block-size: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  inline-size: 100% !important;
  inset: 0 !important;
  margin: 0 !important;
  max-block-size: none !important;
  max-inline-size: none !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  touch-action: pan-y;
  width: 100% !important;
}

/* A 2px thumb keeps the native value aligned with the pointer at the edges. */
.renoskam-sp-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  block-size: 100vh;
  inline-size: 2px;
}

.renoskam-sp-compare__range::-moz-range-thumb {
  block-size: 100vh;
  border: 0;
  inline-size: 2px;
}

/* Responsive. */
@media (max-width: 1180px) {
  .renoskam-sp-options__grid,
  .renoskam-sp-projects__grid {
    gap: 22px;
  }

  .renoskam-sp-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .renoskam-sp-campaign__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .renoskam-sp-campaign__button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 1100px) {
  .renoskam-sp-options__grid,
  .renoskam-sp-projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .renoskam-sp-options__grid > :last-child {
    grid-column: 1 / -1;
  }

  .renoskam-sp-options__grid > :last-child .renoskam-sp-option__media {
    aspect-ratio: 16 / 7;
  }

  .renoskam-sp-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .renoskam-sp-facts__grid li:nth-child(odd) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .renoskam-sp-facts__grid li:nth-child(n + 3) {
    border-block-start: 1px solid #d5d9da;
  }
}

@media (max-width: 900px) {
  .renoskam-sp-hero__grid,
  .renoskam-sp-problem__grid,
  .renoskam-sp-process__grid,
  .renoskam-sp-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .renoskam-sp-compare {
    margin-inline-start: 16px;
  }

  .renoskam-sp-problem__media img {
    aspect-ratio: 4 / 3;
  }

  .renoskam-sp-problem__media figcaption {
    inset: auto 16px -24px auto;
  }

  .renoskam-sp-process__media,
  .renoskam-sp-faq__heading {
    position: static;
  }

  .renoskam-sp-process__media img {
    aspect-ratio: 4 / 3;
    block-size: auto;
    flex: none;
  }

  .renoskam-sp-faq__media {
    display: none;
  }
}

@media (max-width: 679px) {
  .renoskam-sp-hero {
    padding-block: 52px 72px;
  }

  .renoskam-sp-hero h1 {
    font-size: clamp(36px, 10.4vw, 46px);
    line-height: 1.02;
  }

  .renoskam-service-page h2 {
    font-size: clamp(34px, 9.6vw, 44px);
  }

  .renoskam-sp-hero__lead {
    font-size: 16px;
    margin-block-start: 22px;
  }

  .renoskam-sp-hero .renoskam-bi-hero__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .renoskam-sp-hero .renoskam-bi-button--text {
    align-self: flex-start;
  }

  .renoskam-sp-compare::before {
    inset: -10px 10px 40px -10px;
  }

  .renoskam-sp-compare__label {
    font-size: 11px;
    top: 10px;
  }

  .renoskam-sp-compare__label--before {
    left: 10px;
  }

  .renoskam-sp-compare__label--after {
    right: 10px;
  }

  .renoskam-sp-facts__grid li {
    padding: 24px 14px;
  }

  .renoskam-sp-facts__grid strong {
    font-size: 30px;
  }

  .renoskam-sp-facts__grid span {
    font-size: 14px;
  }

  .renoskam-sp-problem__media figcaption {
    inset: auto 10px -28px 10px;
    max-inline-size: none;
  }

  .renoskam-sp-problem__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .renoskam-sp-problem__list li {
    padding: 22px 18px;
  }

  .renoskam-sp-steps li {
    gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 22px 18px;
  }

  .renoskam-sp-steps__number {
    font-size: 38px;
  }

  .renoskam-sp-steps h3 {
    font-size: 19px;
  }

  .renoskam-sp-options__grid,
  .renoskam-sp-projects__grid,
  .renoskam-sp-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .renoskam-sp-options__grid > :last-child .renoskam-sp-option__media {
    aspect-ratio: 4 / 3;
  }

  .renoskam-sp-campaign__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .renoskam-sp-campaign__price {
    justify-self: start;
  }

  .renoskam-sp-campaign__button {
    grid-column: auto;
    inline-size: 100%;
  }

  .renoskam-sp-faq__answer {
    padding-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .renoskam-service-page :is(.renoskam-sp-option__media img, .renoskam-sp-project__media img) {
    transition: none;
  }

  .renoskam-sp-option:hover .renoskam-sp-option__media img,
  .renoskam-sp-project:hover .renoskam-sp-project__media img {
    scale: 1;
  }
}