/* ==========================================================================
   Ordnungskommando — Main Stylesheet
   --------------------------------------------------------------------------
   All base (non-responsive) styles live here. Every @media query lives in
   responsive.css, which is loaded immediately after this file.

   Contents
     A.  Web fonts (@font-face, self-hosted)
     B.  Global design system (tokens, base, components, utilities)
     C.  Site header
     D.  Site footer
     E.  Home (front page)

   Page-specific stylesheet (single-service.css) is loaded conditionally
   and keeps its own styles + media queries.
   ========================================================================== */

/* ==========================================================================
   A. Web fonts — 100% self-hosted (no Google Fonts CDN)
   Paths are relative to this file (assets/css/ -> ../fonts/...).
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins/poppins-800.woff2") format("woff2");
}

/* ==========================================================================
   B. Global Design System
   ========================================================================== */

/* ---- 1. Design Tokens ---------------------------------------------------- */
:root {
  /* Brand (red) */
  --ord-primary: #c1272d;
  --ord-primary-hover: #a51f25;
  --ord-primary-dark: #8c1a1e;
  --ord-primary-soft: #fbeaea;
  --ord-primary-softer: #fdf3f3;
  --ord-cta-gradient: radial-gradient(120% 140% at 80% 0%, #b5282a 0%, #9a1c1e 55%, #7f1718 100%);
  --ord-hero-overlay: linear-gradient(90deg, rgba(18, 16, 16, 0.92) 0%, rgba(40, 22, 20, 0.62) 55%, rgba(60, 28, 24, 0.45) 100%);

  /* Dark surfaces */
  --ord-dark: #161616;
  --ord-dark-2: #1d1d1d;
  --ord-dark-card: #1b1b1b;
  --ord-border-dark: #2e2e2e;

  /* Text */
  --ord-heading: #14151a;
  --ord-text: #1f2127;
  --ord-muted: #6b7280;
  --ord-muted-2: #8b909a;
  --ord-on-dark: #ffffff;
  --ord-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* Surfaces */
  --ord-white: #ffffff;
  --ord-blush: #f8e9e8;
  --ord-gray: #f4f4f6;
  --ord-surface-soft: #f7f7f8;
  --ord-border: #e7e7ea;
  --ord-border-soft: #eef0f2;

  /* Accent / rating */
  --ord-star: #c1272d;

  /* Typography */
  --ord-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ord-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ord-fw-regular: 400;
  --ord-fw-medium: 500;
  --ord-fw-semibold: 600;
  --ord-fw-bold: 700;
  --ord-fw-extrabold: 800;

  /* Type scale (desktop) */
  --ord-fs-h1: 56px;
  --ord-fs-h2: 44px;
  --ord-fs-h3: 30px;
  --ord-fs-h4: 22px;
  --ord-fs-body: 16px;
  --ord-fs-lead: 18px;
  --ord-fs-small: 14px;
  --ord-fs-eyebrow: 14px;
  --ord-fs-btn: 16px;

  --ord-lh-heading: 1.18;
  --ord-lh-body: 1.7;

  /* Layout */
  --ord-container: 1362px;
  --ord-gutter: 24px;

  /* Section spacing (overridden responsively in responsive.css) */
  --ord-section-y: 80px;

  /* Radius */
  --ord-radius-sm: 10px;
  --ord-radius: 16px;
  --ord-radius-lg: 22px;
  --ord-radius-pill: 999px;

  /* Shadows */
  --ord-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --ord-shadow-sm: 0 4px 14px rgba(16, 24, 40, 0.05);
  --ord-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  --ord-shadow-md: 0 16px 40px rgba(16, 24, 40, 0.10);

  /* Motion */
  --ord-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ord-dur: 0.25s;
}

/* ---- 2. Reset & Base ---------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ord-font-body);
  font-size: var(--ord-fs-body);
  line-height: var(--ord-lh-body);
  color: var(--ord-text);
  background: var(--ord-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--ord-primary);
  color: #fff;
}

.ord-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---- 3. Typography ------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--ord-font-heading);
  color: var(--ord-heading);
  line-height: var(--ord-lh-heading);
  font-weight: var(--ord-fw-bold);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--ord-fs-h1); }
h2 { font-size: var(--ord-fs-h2); }
h3 { font-size: var(--ord-fs-h3); }
h4 { font-size: var(--ord-fs-h4); }

p {
  margin: 0 0 1rem;
  color: var(--ord-text);
}

p:last-child {
  margin-bottom: 0;
}

.ord-lead {
  font-size: var(--ord-fs-lead);
  line-height: 1.65;
  color: var(--ord-muted);
}

.ord-muted {
  color: var(--ord-muted);
}

.ord-small {
  font-size: var(--ord-fs-small);
}

/* Eyebrow — small red label with a short underline accent */
.ord-eyebrow {
  display: inline-block;
  font-family: var(--ord-font-body);
  font-size: var(--ord-fs-eyebrow);
  font-weight: var(--ord-fw-semibold);
  letter-spacing: 0.01em;
  color: var(--ord-primary);
  padding-bottom: 6px;
  border-bottom: 2px solid currentColor;
  margin-bottom: 18px;
}

.ord-eyebrow--plain {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---- 4. Links ----------------------------------------------------------- */
a {
  color: var(--ord-primary);
  text-decoration: none;
  transition: color var(--ord-dur) var(--ord-ease);
}

a:hover {
  color: var(--ord-primary-hover);
}

.ord-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--ord-fw-semibold);
  color: var(--ord-primary);
}

.ord-link-arrow .ord-icon {
  transition: transform var(--ord-dur) var(--ord-ease);
}

.ord-link-arrow:hover .ord-icon {
  transform: translate(2px, -2px);
}

/* ---- 5. Container — global inner width 1362px --------------------------- */
.ord-container {
  width: 100%;
  max-width: var(--ord-container);
  margin-inline: auto;
  padding-inline: var(--ord-gutter);
}

.ord-container--narrow {
  max-width: 820px;
}

/* ---- 6. Section Spacing System ------------------------------------------ */
.ord-section {
  position: relative;
  padding-top: var(--ord-section-y);
  padding-bottom: var(--ord-section-y);

}

.ord-section--hero {
  padding-top: 0;
  padding-bottom: 0;
}

.ord-section--flush-top,
.ord-section.is-connected-top {
  padding-top: 0;
}

.ord-section--flush-bottom {
  padding-bottom: 0;
}

/* ---- 7. Section Backgrounds --------------------------------------------- */
.ord-bg-white { background: var(--ord-white); }
.ord-bg-blush { background: var(--ord-blush); }
.ord-bg-gray { background: var(--ord-gray); }
.ord-bg-soft { background: var(--ord-surface-soft); }

.ord-bg-dark {
  background: var(--ord-dark);
  color: var(--ord-on-dark);
}
.ord-bg-dark h1,
.ord-bg-dark h2,
.ord-bg-dark h3,
.ord-bg-dark h4 { color: var(--ord-on-dark); }
.ord-bg-dark p { color: var(--ord-on-dark-muted); }

.ord-bg-red {
  background: var(--ord-cta-gradient);
  color: var(--ord-on-dark);
}
.ord-bg-red h1,
.ord-bg-red h2,
.ord-bg-red h3 { color: var(--ord-on-dark); }
.ord-bg-red p { color: rgba(255, 255, 255, 0.85); }

/* ---- 8. Section Head ---------------------------------------------------- */
.ord-section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.ord-section-head .ord-eyebrow {
  margin-bottom: 16px;
}

.ord-section-head h2 {
  margin-bottom: 16px;
}

.ord-section-head p {
  color: var(--ord-muted);
  font-size: var(--ord-fs-lead);
}

.ord-bg-dark .ord-section-head p,
.ord-bg-red .ord-section-head p {
  color: var(--ord-on-dark-muted);
}

/* ---- 9. Buttons --------------------------------------------------------- */
.ord-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ord-font-body);
  font-size: var(--ord-fs-btn);
  font-weight: var(--ord-fw-semibold);
  line-height: 1;
  padding: 16px 30px;
  border: 2px solid transparent;
  border-radius: var(--ord-radius-pill);
  cursor: pointer;
  transition: transform var(--ord-dur) var(--ord-ease),
    background-color var(--ord-dur) var(--ord-ease),
    color var(--ord-dur) var(--ord-ease),
    border-color var(--ord-dur) var(--ord-ease),
    box-shadow var(--ord-dur) var(--ord-ease);
  white-space: nowrap;
}

.ord-btn .ord-icon {
  font-size: 1.1em;
}

.ord-btn:hover {
  transform: translateY(-2px);
}

/* Primary — solid red */
.ord-btn--primary {
  background: var(--ord-primary);
  color: #fff;
  border-color: var(--ord-primary);
  box-shadow: 0 10px 24px rgba(193, 39, 45, 0.28);
}
.ord-btn--primary:hover {
  background: var(--ord-primary-hover);
  border-color: var(--ord-primary-hover);
  color: #fff;
}

/* White — solid white (used on dark / red backgrounds) */
.ord-btn--white {
  background: #fff;
  color: var(--ord-heading);
  border-color: #fff;
  box-shadow: var(--ord-shadow-sm);
}
.ord-btn--white:hover {
  background: #fff;
  color: var(--ord-primary);
}

/* Outline on light */
.ord-btn--outline {
  background: transparent;
  color: var(--ord-heading);
  border-color: var(--ord-border);
}
.ord-btn--outline:hover {
  border-color: var(--ord-primary);
  color: var(--ord-primary);
}

/* Outline white (on red/dark) */
.ord-btn--outline-white {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.ord-btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: #fff;
}

.ord-btn--lg {
  padding: 18px 36px;
  font-size: 17px;
}

.ord-btn--block {
  width: 100%;
}

/* ---- 10. Cards ---------------------------------------------------------- */
.ord-card {
  background: var(--ord-white);
  border: 1px solid var(--ord-border);
  border-radius: var(--ord-radius);
  padding: 28px;
  transition: transform var(--ord-dur) var(--ord-ease),
    box-shadow var(--ord-dur) var(--ord-ease),
    border-color var(--ord-dur) var(--ord-ease);
}

.ord-card--soft {
  background: var(--ord-surface-soft);
  border-color: transparent;
}

.ord-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--ord-shadow-md);
  border-color: var(--ord-border-soft);
}

.ord-card h3 {
  font-size: var(--ord-fs-h4);
  margin-bottom: 10px;
}

.ord-card p {
  color: var(--ord-muted);
  margin: 0;
}

/* ---- 11. Icon Chips ----------------------------------------------------- */
.ord-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 22px;
  color: var(--ord-primary);
  background: var(--ord-primary-soft);
  flex-shrink: 0;
}

.ord-icon-chip--round {
  border-radius: var(--ord-radius-pill);
}

.ord-icon-chip--outline {
  background: transparent;
  border: 1.5px solid var(--ord-border);
  color: var(--ord-primary);
}

.ord-icon-chip--ghost {
  background: transparent;
  color: var(--ord-primary);
}

.ord-icon-chip--lg {
  width: 56px;
  height: 56px;
  font-size: 26px;
}

.ord-icon-chip--sm {
  width: 38px;
  height: 38px;
  font-size: 18px;
}

/* ---- 12. Checklists / Feature Lists ------------------------------------- */
.ord-checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ord-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: var(--ord-fw-medium);
  color: var(--ord-heading);
}

.ord-checklist .ord-icon {
  color: var(--ord-primary);
  font-size: 20px;
}

.ord-bg-dark .ord-checklist li {
  color: var(--ord-on-dark);
}

.ord-checklist--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}

/* ---- 13. Split Layout (content + media) --------------------------------- */
.ord-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.ord-split--reverse .ord-split__media {
  order: -1;
}

.ord-split__media img {
  width: 100%;
  border-radius: var(--ord-radius);
  object-fit: cover;
}

.ord-split__content > * + * {
  margin-top: 20px;
}

/* ---- 14. Stars / Rating ------------------------------------------------- */
.ord-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--ord-star);
  font-size: 16px;
}

.ord-stars .ord-icon {
  fill: currentColor;
  stroke: none;
}

/* ---- 15. Rich Text ------------------------------------------------------ */
.ord-richtext > * + * {
  margin-top: 18px;
}
.ord-richtext h1,
.ord-richtext h2,
.ord-richtext h3 {
  margin-bottom: 8px;
}
.ord-richtext p {
  color: var(--ord-muted);
}

/* ---- 16. Utilities ------------------------------------------------------ */
.ord-text-center { text-align: center; }
.ord-mx-auto { margin-inline: auto; }
.ord-mt-0 { margin-top: 0 !important; }
.ord-flow > * + * { margin-top: 1rem; }

.ord-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.ord-grid {
  display: grid;
  gap: 24px;
}
.ord-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ord-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ord-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ord-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   C. Site Header
   --------------------------------------------------------------------------
   Desktop / tablet : logo (left) · nav (center) · CTA button (right)
   Mobile           : logo only, centered — nav + CTA hidden (responsive.css)
   Inner max width pinned to 1350px.
   ========================================================================== */
.ord-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* Light frosted-glass overlay (#F0F0F0 @ 90%) — hero shows through, blurred. */
  background: #F0F0F0E5;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ord-border-soft);
  transition: box-shadow var(--ord-dur) var(--ord-ease),
              background var(--ord-dur) var(--ord-ease);
}

/* Stronger background + shadow once the page is scrolled. */
.ord-header.is-scrolled {
  background: #F0F0F0F2;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.ord-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 1350px;
  margin-inline: auto;
  padding-inline: var(--ord-gutter);
  min-height: 80px;
}

/* Push the nav + CTA group to the right, sitting next to each other. */
.ord-header__nav {
  margin-left: auto;
}

.ord-header__brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: 22px;
  color: var(--ord-heading);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.ord-header__brand span {
  color: var(--ord-primary);
}

/* Logo image height cap (theme asset or WP custom logo). */
.ord-header__brand img,
.ord-header__logo,
.ord-header__brand .custom-logo {
  height: 60px;
  width: auto;
  max-width: 100%;
}

.ord-header__nav {
  display: flex;
  align-items: center;
}

.ord-header__menu {
  display: flex;
  align-items: center;
  gap: 34px;
}

.ord-header__menu a {
  color: var(--ord-text);
  font-family: var(--ord-font-body);
  font-weight: var(--ord-fw-medium);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--ord-dur) var(--ord-ease);
}

.ord-header__menu a:hover {
  color: var(--ord-primary);
}

.ord-header__menu .current-menu-item > a,
.ord-header__menu .current_page_item > a,
.ord-header__menu .current-menu-ancestor > a {
  color: var(--ord-primary);
}

.ord-header__cta {
  flex-shrink: 0;
  padding: 13px 26px;
}

/* --------------------------------------------------------------------------
   Header mega menu (Entrümpelung locations)
   -------------------------------------------------------------------------- */
.ord-header__item--mega {
  position: relative;
}

.ord-header__mega-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ord-text);
  font-family: var(--ord-font-body);
  font-weight: var(--ord-fw-medium);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--ord-dur) var(--ord-ease);
}

.ord-header__mega-toggle:hover,
.ord-header__item--mega:hover .ord-header__mega-toggle,
.ord-header__mega-toggle[aria-expanded="true"] {
  color: var(--ord-primary);
}

.ord-header__mega-caret {
  width: 16px;
  height: 16px;
  transition: transform var(--ord-dur) var(--ord-ease);
}

.ord-header__item--mega:hover .ord-header__mega-caret,
.ord-header__mega-toggle[aria-expanded="true"] .ord-header__mega-caret {
  transform: rotate(180deg);
}

/* Panel — hidden by default, revealed on hover / when toggled open. */
.ord-megamenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(920px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--ord-border-soft);
  border-radius: var(--ord-radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ord-dur) var(--ord-ease),
              transform var(--ord-dur) var(--ord-ease),
              visibility var(--ord-dur) var(--ord-ease);
  z-index: 200;
}

/* Bridge the gap so the panel doesn't close while moving the cursor to it. */
.ord-megamenu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

.ord-header__item--mega:hover .ord-megamenu,
.ord-header__item--mega:focus-within .ord-megamenu,
.ord-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.ord-megamenu__inner {
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.ord-megamenu__list {
  columns: 4;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ord-megamenu__list li {
  break-inside: avoid;
  margin-bottom: 2px;
}

.ord-megamenu__list a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--ord-text);
  font-family: var(--ord-font-body);
  font-weight: var(--ord-fw-medium);
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  transition: color var(--ord-dur) var(--ord-ease),
              background var(--ord-dur) var(--ord-ease);
}

.ord-megamenu__list a:hover {
  color: var(--ord-primary);
  background: var(--ord-bg-blush, #faf1f1);
}

/* --------------------------------------------------------------------------
   Services mega menu — tabbed (category tabs left, links right)
   -------------------------------------------------------------------------- */
.ord-megamenu--services {
  width: min(880px, calc(100vw - 40px));
  padding: 0;
}

.ord-megamenu__inner--tabs {
  display: flex;
  align-items: stretch;
  max-height: min(74vh, 520px);
  overflow: hidden;
}

/* Left rail — vertical category tabs (German headings). */
.ord-megatabs {
  flex: 0 0 275px;
  margin: 0;
  padding: 14px;
  list-style: none;
  background: var(--ord-bg-blush, #faf1f1);
  border-right: 1px solid var(--ord-border-soft);
  border-radius: var(--ord-radius) 0 0 var(--ord-radius);
  overflow-y: auto;
}

.ord-megatabs li {
  margin: 0;
}

.ord-megatabs__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--ord-text);
  font-family: var(--ord-font-body);
  font-weight: var(--ord-fw-medium);
  font-size: 14.5px;
  line-height: 1.3;
  transition: color var(--ord-dur) var(--ord-ease),
              background var(--ord-dur) var(--ord-ease);
}

.ord-megatabs__btn::after {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--ord-dur) var(--ord-ease);
}

.ord-megatabs__btn:hover {
  color: var(--ord-primary);
  background: #fff;
}

.ord-megatabs__btn.is-active {
  color: var(--ord-primary);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.ord-megatabs__btn.is-active::after {
  opacity: 1;
}

/* Right side — panels. */
.ord-megatabs__panels {
  flex: 1 1 auto;
  padding: 22px 24px;
  overflow-y: auto;
}

.ord-megatabs__panel {
  margin: 0;
}

.ord-megatabs__panel[hidden] {
  display: none;
}

.ord-megatabs__heading {
  margin: 0 0 14px;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold, 700);
  font-size: 16px;
  line-height: 1.2;
  color: #c1272d;
}

.ord-megamenu__list--services {
  columns: 2;
  column-gap: 22px;
}

/* ==========================================================================
   D. Site Footer
   ========================================================================== */
.ord-footer {
  position: relative;
  overflow: hidden;
  background: #141414;
  color: var(--ord-on-dark-muted);
  border-top: 3px solid var(--ord-primary);
}

/* Footer container pinned to 1350px on every page. */
.ord-footer .ord-container {
  max-width: 1350px;
}

.ord-footer__watermark {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ord-footer__main {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  padding-bottom: 40px;
}

.ord-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 40px;
}

/* Brand column */
.ord-footer__logo img {
  height: 40px;
  width: auto;
}

.ord-footer__about {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.7;
  margin: 18px 0 0;
}

.ord-footer__quote {
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--ord-primary);
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.ord-footer__label {
  display: block;
  margin: 26px 0 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--ord-fw-semibold);
  color: rgba(255, 255, 255, 0.5);
}

.ord-footer__social {
  display: flex;
  gap: 10px;
}

.ord-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ord-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ord-dur) var(--ord-ease),
    transform var(--ord-dur) var(--ord-ease);
}

.ord-footer__social a svg {
  width: 17px;
  height: 17px;
}

.ord-footer__social a:hover {
  background: var(--ord-primary-hover);
  transform: translateY(-2px);
}

.ord-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.ord-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ord-radius-pill);
  padding: 7px 14px;
}

.ord-footer__badge .ord-icon {
  color: var(--ord-primary);
  font-size: 15px;
}

/* Column headings */
.ord-footer__heading {
  position: relative;
  color: #fff;
  font-size: 17px;
  margin-bottom: 22px;
  padding-left: 14px;
}

.ord-footer__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--ord-primary);
}

/* Link lists */
.ord-footer__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ord-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: color var(--ord-dur) var(--ord-ease);
}

.ord-footer__links a:hover {
  color: #fff;
}

.ord-footer__links:not(.ord-footer__links--icon) a::before {
  content: "\203A";
  color: var(--ord-primary);
  font-size: 16px;
  line-height: 1;
}

.ord-footer__links--icon a .ord-icon {
  color: var(--ord-primary);
  font-size: 16px;
  flex-shrink: 0;
}

/* Stat card */
.ord-footer__statcard {
  margin-top: 24px;
  background: var(--ord-cta-gradient);
  border-radius: var(--ord-radius);
  padding: 18px 20px;
  color: #fff;
}

.ord-footer__statcard strong {
  display: block;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: 24px;
  line-height: 1.1;
}

.ord-footer__statcard span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

/* Note card */
.ord-footer__notecard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ord-radius);
  padding: 16px 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.ord-footer__notecard .ord-icon {
  color: var(--ord-primary);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Contact list */
.ord-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ord-footer__contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--ord-radius-sm);
  padding: 12px 14px;
}

.ord-footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(193, 39, 45, 0.16);
  color: var(--ord-primary);
  font-size: 18px;
  flex-shrink: 0;
}

.ord-footer__contact-body {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.ord-footer__contact-body strong {
  color: #fff;
  font-size: 13px;
}

.ord-footer__contact-body a,
.ord-footer__contact-body span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.ord-footer__contact-body a:hover {
  color: #fff;
}

.ord-footer__cta {
  width: 100%;
  margin-top: 20px;
}

.ord-footer__ctanote {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

/* Trust row */
.ord-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ord-footer__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.ord-footer__trust-item .ord-icon {
  color: var(--ord-primary);
  font-size: 16px;
}

.ord-footer__trust-item--end {
  margin-left: auto;
}

/* Bottom bar */
.ord-footer__bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
}

.ord-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.ord-footer__copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.ord-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.ord-footer__legal a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.ord-footer__legal a:hover {
  color: #fff;
}

/* ==========================================================================
   E. Home (front page)
   ========================================================================== */

/* Home sections cap their inner width at 1350px (per spec). */
.home .ord-container {
  max-width: 1350px;
}

/* ---- Hero --------------------------------------------------------------- */
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  overflow: hidden;
  color: #fff;
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1350px;
  margin-inline: auto;
  padding-inline: var(--ord-gutter);
  /* Extra top padding clears the absolute (overlaid) header (~80px). */
  padding-top: 130px;
  padding-bottom: 70px;

  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 56px;
}

/* Left column : title + rating badges */
.home-hero__title {
  color: #fff;
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.12;
  font-weight: var(--ord-fw-bold);
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin: 0 0 32px;
}

.home-hero__title-thin {
  font-weight: var(--ord-fw-regular);
}

.home-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.home-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--ord-heading);
  border-radius: var(--ord-radius-sm);
  padding: 12px 18px;
  box-shadow: var(--ord-shadow-sm);
}

.home-badge__google {
  flex-shrink: 0;
}

.home-badge__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.home-badge__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-badge__top strong {
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: 17px;
  color: var(--ord-heading);
}

.home-badge__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
}

.home-badge__stars .ord-icon {
  fill: currentColor;
  stroke: none;
}

.home-badge__stars--gold {
  color: #fbbc04;
}

.home-badge__sub {
  font-size: 12px;
  color: var(--ord-muted);
  font-weight: var(--ord-fw-medium);
}

/* Trustpilot */
.home-badge__tp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-badge__tp-star {
  color: #00b67a;
  fill: #00b67a;
  stroke: none;
  font-size: 18px;
}

.home-badge__tp-name {
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: 16px;
  color: var(--ord-heading);
  letter-spacing: -0.01em;
}

.home-badge__stars--tp {
  gap: 3px;
}

.home-badge__tp-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #00b67a;
  color: #fff;
  font-size: 12px;
}

.home-badge__tp-box .ord-icon {
  fill: currentColor;
  stroke: none;
}

/* Right column : checklist + actions */
.home-hero__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

.home-hero__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
}

.home-hero__list .ord-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- Section 2 : About -------------------------------------------------- */
.home-s2 {
  overflow: hidden;
}

.home-s2__watermark {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: auto;
  height: 115%;
  max-width: none;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.home-s2 .ord-container {
  position: relative;
  z-index: 1;
}

.home-s2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.home-s2__title {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.3;
  font-weight: var(--ord-fw-bold);
  color: var(--ord-heading);
  margin: 0;
}

.home-s2__body > p {
  color: var(--ord-muted);
  font-size: var(--ord-fs-body);
  line-height: 1.7;
  margin: 0 0 18px;
}

.home-s2__cta {
  margin-top: 10px;
}

/* ---- Section 3 : Metrics ------------------------------------------------ */
.home-s3__grid {
  gap: 20px;
}

.home-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--ord-radius);
  padding: 26px 28px;
}

.home-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  color: var(--ord-primary);
  font-size: 20px;
  box-shadow: var(--ord-shadow-xs);
}

.home-metric__value {
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: 30px;
  line-height: 1;
  color: var(--ord-heading);
}

.home-metric__label {
  font-size: var(--ord-fs-small);
  color: var(--ord-muted);
}

/* ---- Section 4 : Services slider --------------------------------------- */
.home-s4__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.home-s4__intro {
  max-width: 720px;
}

.home-s4__intro h2 {
  margin: 14px 0 16px;
}

.home-s4__intro p {
  color: var(--ord-muted);
  margin: 0;
}

.home-s4__nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.home-s4__arrow {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--ord-gray);
  color: var(--ord-heading);
  transition: background-color var(--ord-dur) var(--ord-ease),
    color var(--ord-dur) var(--ord-ease),
    opacity var(--ord-dur) var(--ord-ease);
}

.home-s4__arrow--prev .ord-icon {
  transform: rotate(180deg);
}

.home-s4__arrow--next {
  background: var(--ord-primary);
  color: #fff;
}

.home-s4__arrow:hover {
  background: var(--ord-primary-hover);
  color: #fff;
}

.home-s4__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

.home-s4__arrow[disabled]:hover {
  background: var(--ord-gray);
  color: var(--ord-heading);
}

.home-s4__arrow--next[disabled]:hover {
  background: var(--ord-primary);
  color: #fff;
}

/* Slider: full-bleed Swiper. Left edge aligns to the 1350px container via
   slidesOffsetBefore (set in main.js); right edge bleeds off the viewport
   so the next card peeks. Swiper handles overflow, gap and looping. */
.home-s4__slider {
  width: 100%;
}

/* Equal-height cards regardless of content length. */
.home-s4__slider .swiper-slide {
  height: auto;
}

.home-s4__card {
  width: 319px !important;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ord-border);
  border-radius: var(--ord-radius);
  padding: 22px;
}

.home-s4__card-title {
  font-size: var(--ord-fs-h4);
  line-height: 1.25;
  margin-bottom: 8px;
  /* Reserve space for up to 2 lines so titles of different length
     keep the description (and image below it) aligned across cards. */
  min-height: 2.5em;
}

.home-s4__card-desc {
  color: var(--ord-muted);
  font-size: var(--ord-fs-small);
  line-height: 1.55;
  margin: 0 0 16px;
  /* Clamp to a fixed number of lines so every card's text block is the
     same height — this keeps the images and "Read More" buttons even. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 5);
}

.home-s4__card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.home-s4__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.home-s4__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ord-fs-small);
  color: var(--ord-text);
}

.home-s4__list .ord-icon {
  flex-shrink: 0;
  color: var(--ord-primary);
  font-size: 16px;
}

.home-s4__readmore {
  margin-top: auto;
  width: 100%;
}

.home-s4__viewall {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ---- Section 5 : Our Process (dark) ------------------------------------ */
.home-s5 {
  background: radial-gradient(120% 120% at 50% -10%, #1e1e1e 0%, #141414 55%, #101010 100%);
}

.home-s5__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.home-s5__card {
  background: var(--ord-dark-card);
  border: 1px solid var(--ord-border-dark);
  border-radius: var(--ord-radius);
  padding: 26px;
  transition: border-color var(--ord-dur) var(--ord-ease),
    transform var(--ord-dur) var(--ord-ease);
}

.home-s5__card:hover {
  transform: translateY(-4px);
  border-color: rgba(193, 39, 45, 0.55);
}

.home-s5__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.home-s5__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(193, 39, 45, 0.16);
  color: var(--ord-primary);
  font-size: 22px;
}

.home-s5__num {
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: 34px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
  line-height: 1;
}

.home-s5__title {
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}

.home-s5__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0;
}

.home-s5__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ---- Section 6 : Why You Choose ---------------------------------------- */
.home-s6__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.home-s6__title {
  margin-bottom: 20px;
}

.home-s6__hl {
  color: var(--ord-primary);
}

.home-s6__lead {
  color: var(--ord-muted);
  margin-bottom: 30px;
  max-width: 46ch;
}

/* Social-proof pill */
.home-proof {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--ord-surface-soft);
  border: 1px solid var(--ord-border-soft);
  border-radius: var(--ord-radius);
  padding: 16px 22px;
  max-width: 480px;
}

.home-proof__avatars {
  display: flex;
  flex-shrink: 0;
}

.home-proof__avatars span {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--ord-fw-semibold);
  color: #fff;
  border: 2px solid #fff;
  margin-left: -10px;
}

.home-proof__avatars span:first-child { margin-left: 0; }
.home-proof__avatars span:nth-child(1) { background: #c1272d; }
.home-proof__avatars span:nth-child(2) { background: #7f1718; }
.home-proof__avatars span:nth-child(3) { background: #3a1010; }
.home-proof__avatars span:nth-child(4) { background: #1b1b1b; }

.home-proof__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-proof__text {
  font-size: 14px;
}

.home-proof__text strong {
  color: var(--ord-heading);
}

.home-proof__region {
  color: var(--ord-muted);
}

/* Right column: 2×2 feature cards */
.home-s6__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-feature {
  padding: 26px;
}

.home-feature .ord-icon-chip {
  margin-bottom: 20px;
}

.home-feature h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.home-feature p {
  font-size: 14px;
}

/* ---- Divider ----------------------------------------------------------- */
.ord-hr {
  border: 0;
  height: 1px;
  background: var(--ord-border);
  margin: 0;
}

/* ---- Section 7 : Trusted & professional -------------------------------- */
.home-s7__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}

.home-s7__title {
  margin-bottom: 22px;
  max-width: 14ch;
}

.home-s7__content > p {
  color: var(--ord-muted);
  margin-bottom: 18px;
}

.home-s7__list {
  gap: 16px;
  margin-top: 28px;
}

.home-s7__list li {
  font-weight: var(--ord-fw-medium);
  color: var(--ord-heading);
}

/* Image collage: two stacked images on the left, one tall image on the right */
.home-s7__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.85fr 1.15fr;
  gap: 16px;
  min-height: 420px;
}

.home-s7__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ord-radius);
}

.home-s7__img--top {
  grid-column: 1;
  grid-row: 1;
}

.home-s7__img--bottom {
  grid-column: 1;
  grid-row: 2;
}

.home-s7__img--tall {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* ---- Section 8 : Quick Estimation Calculator --------------------------- */
.home-s8__card {
  border: 1px solid var(--ord-border);
  border-radius: var(--ord-radius-lg);
  padding: 44px;
}

.home-s8__title {
  margin-bottom: 14px;
}

.home-s8__lead {
  color: var(--ord-muted);
  max-width: 70ch;
  margin-bottom: 32px;
}

.home-s8__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 26px;
}

.home-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-field label {
  font-size: var(--ord-fs-small);
  font-weight: var(--ord-fw-semibold);
  color: var(--ord-heading);
}

.home-field input,
.home-field select {
  width: 100%;
  font-family: var(--ord-font-body);
  font-size: var(--ord-fs-body);
  color: var(--ord-text);
  background: var(--ord-gray);
  border: 1px solid transparent;
  border-radius: var(--ord-radius-sm);
  padding: 14px 16px;
  transition: border-color var(--ord-dur) var(--ord-ease),
    background-color var(--ord-dur) var(--ord-ease);
}

.home-field input::placeholder {
  color: var(--ord-muted-2);
}

.home-field input:focus,
.home-field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--ord-primary);
}

/* Native select arrow + custom chevron */
.home-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}

.home-s8__subhead {
  display: block;
  font-size: var(--ord-fs-small);
  font-weight: var(--ord-fw-semibold);
  color: var(--ord-heading);
  margin-bottom: 14px;
}

.home-s8__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 30px;
}

.home-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ord-fs-body);
  color: var(--ord-text);
  cursor: pointer;
}

.home-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ord-primary);
  cursor: pointer;
}

/* ---- Section 9 : Customer Reviews -------------------------------------- */
.home-s9__grid {
  gap: 24px;
}

.home-review {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--ord-radius);
  box-shadow: var(--ord-shadow-sm);
  padding: 28px;
}

.home-review__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.home-review__top .ord-stars {
  font-size: 15px;
}

.home-review__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 0.8;
  color: var(--ord-border);
}

.home-review__quote {
  color: var(--ord-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 24px;
}

.home-review__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.home-review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.home-review__author strong {
  display: block;
  font-size: 15px;
  color: var(--ord-heading);
}

.home-review__role {
  font-size: 13px;
  color: var(--ord-muted);
}

/* ---- Section 10 : Transformations (before / after) --------------------- */
.home-compare {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  border-radius: var(--ord-radius);
  overflow: hidden;
  box-shadow: var(--ord-shadow-md);
  aspect-ratio: 16 / 8;
  user-select: none;
  touch-action: none;
  container-type: inline-size;
}

.home-compare__img {
  position: absolute;
  inset: 0;
}

.home-compare__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Before layer sits on top, clipped to a width set by JS (default 50%). The
   inner image is sized to the whole compare (100cqw) so it stays aligned
   with the after image at any screen width. */
.home-compare__img--before {
  width: 50%;
  overflow: hidden;
  border-right: 2px solid #fff;
}

.home-compare__img--before img {
  width: 100cqw;
  max-width: none;
}

.home-compare__tag {
  position: absolute;
  top: 16px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: var(--ord-fw-semibold);
  color: var(--ord-heading);
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--ord-shadow-sm);
}

.home-compare__tag--before { left: 16px; }
.home-compare__tag--after { right: 16px; }

.home-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 2;
}

.home-compare__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
}

.home-compare__grip {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--ord-shadow);
  display: inline-flex;
}

.home-compare__grip::before,
.home-compare__grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.home-compare__grip::before {
  left: 11px;
  transform: translateY(-50%);
  border-right: 7px solid var(--ord-primary);
}

.home-compare__grip::after {
  right: 11px;
  transform: translateY(-50%);
  border-left: 7px solid var(--ord-primary);
}

/* ---- Section 11 : Service detail (alternating rows) -------------------- */
.home-s11__row + .home-s11__row {
  margin-top: 72px;
}

/* Row 2: image on the right (desktop). DOM keeps media first so it stacks
   on top on mobile; the reset lives in responsive.css. */
.home-s11__row--rev .ord-split__media {
  order: 1;
}

/* Rose photo frame */
.home-s11 .ord-split__media {
  background: #eccccd;
  padding: 12px;
  border-radius: 20px;
}

.home-s11 .ord-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.home-s11 .ord-split__content > h3 {
  margin-bottom: 16px;
}

.home-s11 .ord-split__content > p {
  color: var(--ord-muted);
  font-size: 15px;
}

.home-s11 .ord-checklist {
  margin-top: 24px;
  gap: 14px;
}

.home-s11 .ord-checklist li {
  font-weight: var(--ord-fw-medium);
  color: var(--ord-heading);
}

/* ---- Section 12 : Reliable Moving (single image + content) ------------- */
.home-s12__grid {
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
}

.home-s12__media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: var(--ord-radius);
}

.home-s12__title {
  margin-bottom: 20px;
}

.home-s12__content,
.home-s12 .ord-split__content > p {
  color: var(--ord-muted);
}

.home-s12 .ord-split__content > p {
  margin-bottom: 18px;
}

.home-s12__list {
  margin: 26px 0 30px;
  gap: 14px;
}

.home-s12__list li {
  font-weight: var(--ord-fw-medium);
  color: var(--ord-heading);
}

/* ---- Section 13 : Service Areas (dark) --------------------------------- */
.home-s13 {
  position: relative;
  overflow: hidden;
}

.home-s13__watermark {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: auto;
  height: 118%;
  max-width: none;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.home-s13 .ord-container {
  position: relative;
  z-index: 1;
}

.home-s13__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}

/* Left: image + overlay card */
.home-s13__media {
  position: relative;
}

.home-s13__photo {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: var(--ord-radius);
}

.home-s13__card {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: 300px;
  background: #fff;
  border-radius: var(--ord-radius);
  padding: 20px 22px;
  box-shadow: var(--ord-shadow-md);
}

.home-s13__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.home-s13__card-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ord-primary);
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.home-s13__card-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.home-s13__card-titles strong {
  color: var(--ord-heading);
  font-size: 16px;
}

.home-s13__card-sub {
  font-size: 13px;
  color: var(--ord-muted);
}

.home-s13__card p {
  margin: 0;
  font-size: 13px;
  color: var(--ord-muted);
  line-height: 1.6;
}

/* Right: content + districts */
.home-s13__title {
  color: #fff;
  margin-bottom: 18px;
}

.home-s13__lead {
  color: var(--ord-on-dark-muted);
  margin-bottom: 28px;
  max-width: 52ch;
}

.home-s13__areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.home-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ord-heading);
  font-size: 14px;
  font-weight: var(--ord-fw-medium);
  padding: 12px 16px;
  border-radius: var(--ord-radius-sm);
}

.home-area .ord-icon {
  color: var(--ord-primary);
  font-size: 16px;
  flex-shrink: 0;
}

/* ---- Section 14 : For Businesses --------------------------------------- */
.home-s14__head {
  max-width: 640px;
  margin-bottom: 40px;
}

.home-s14__head h2 {
  margin-bottom: 16px;
}

.home-s14__head p {
  color: var(--ord-muted);
}

.home-s14__grid {
  gap: 24px;
}

.home-biz {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--ord-radius);
  box-shadow: var(--ord-shadow-sm);
  padding: 30px 28px;
}

.home-biz__icon {
  margin-bottom: 22px;
}

.home-biz__title {
  font-size: 18px;
  margin-bottom: 12px;
}

.home-biz__desc {
  color: var(--ord-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

.home-biz__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 12px;
  font-weight: var(--ord-fw-semibold);
  letter-spacing: 0.04em;
  color: var(--ord-primary);
}

.home-biz__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ord-primary);
  flex-shrink: 0;
}

/* Footer trust row */
.home-s14__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--ord-border);
}

.home-s14__foot-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ord-text);
}

.home-s14__foot-item .ord-icon {
  color: var(--ord-primary);
  font-size: 18px;
  flex-shrink: 0;
}

/* ---- Section 15 : Our Commitment (content + single image) -------------- */
.home-s15__grid {
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
}

.home-s15__title {
  margin-bottom: 22px;
}

.home-s15 .ord-split__content > p {
  color: var(--ord-muted);
}

.home-s15__media img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  border-radius: var(--ord-radius);
}

/* ==========================================================================
   F. Shared component — CTA banner (red)
   Used by template-parts/cta.php across page types (home, single service…).
   ========================================================================== */
.ss-cta {
  overflow: hidden;
}

.ss-cta__inner {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.ss-cta__eyebrow {
  color: #fff;
  margin-bottom: 20px;
}

.ss-cta__title {
  color: #fff;
  margin-bottom: 18px;
}

.ss-cta__lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  margin-bottom: 32px;
  max-width: 56ch;
  margin-inline: auto;
}

.ss-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ==========================================================================
   G. Shared component — FAQ accordion
   Driven by initAccordions() in main.js (data-accordion attributes).
   ========================================================================== */
.ss-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-faq__item {
  background: #fff;
  border: 1px solid var(--ord-border-soft);
  border-radius: var(--ord-radius);
  box-shadow: var(--ord-shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--ord-dur) var(--ord-ease);
}

.ss-faq__item.is-open {
  box-shadow: var(--ord-shadow-sm);
}

.ss-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 22px 26px;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-semibold);
  font-size: 17px;
  color: var(--ord-heading);
}

.ss-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ord-primary);
  font-size: 22px;
  flex-shrink: 0;
}

.ss-faq__minus { display: none; }
.ss-faq__item.is-open .ss-faq__plus { display: none; }
.ss-faq__item.is-open .ss-faq__minus { display: inline-block; }

.ss-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ord-dur) var(--ord-ease);
}

.ss-faq__item.is-open .ss-faq__a {
  grid-template-rows: 1fr;
}

.ss-faq__a > p {
  overflow: hidden;
  margin: 0;
  padding: 0 26px;
  color: var(--ord-muted);
  font-size: 15px;
  line-height: 1.7;
}

.ss-faq__item.is-open .ss-faq__a > p {
  padding-bottom: 24px;
}

/* ==========================================================================
   E. Mobile / tablet bottom action bar + menu sheet
   --------------------------------------------------------------------------
   Native-app style quick-action footer. Hidden on desktop, shown <= 991px.
   ========================================================================== */
.ord-mobilebar {
  display: none; /* desktop: hidden — shown in the <=991px media query below */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 300;
  background: var(--ord-primary);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ord-mobilebar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
  font-family: var(--ord-font-body);
  font-weight: var(--ord-fw-medium);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.ord-mobilebar__item + .ord-mobilebar__item {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.ord-mobilebar__item .ord-icon {
  width: 22px;
  height: 22px;
}

.ord-mobilebar__item:hover,
.ord-mobilebar__item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* Center "Angebot" action — white chip with the primary-coloured icon. */
.ord-mobilebar__accent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
  color: var(--ord-primary);
}

.ord-mobilebar__accent-icon .ord-icon {
  width: 18px;
  height: 18px;
}

/* ---- Menu sheet (opened by the "Menü" button) ---- */
.ord-mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 400;
}

.ord-mobilemenu[hidden] {
  display: none;
}

.ord-mobilemenu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--ord-dur) var(--ord-ease);
}

.ord-mobilemenu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0;
  padding: 20px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%);
  transition: transform var(--ord-dur) var(--ord-ease);
  overflow-y: auto;
}

.ord-mobilemenu.is-open .ord-mobilemenu__backdrop {
  opacity: 1;
}

.ord-mobilemenu.is-open .ord-mobilemenu__panel {
  transform: translateX(0);
}

.ord-mobilemenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ord-mobilemenu__logo {
  display: inline-flex;
  align-items: center;
}

.ord-mobilemenu__logo img {
  height: 40px;
  width: auto;
}

.ord-mobilemenu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--ord-primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--ord-dur) var(--ord-ease);
}

.ord-mobilemenu__close:hover {
  background: var(--ord-primary-hover);
}

.ord-mobilemenu__links {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.ord-mobilemenu__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px dashed var(--ord-border);
  color: var(--ord-heading);
  font-weight: var(--ord-fw-medium);
  font-size: 16px;
}

.ord-mobilemenu__links a::before {
  content: "\203A";
  color: var(--ord-primary);
  font-size: 18px;
  font-weight: var(--ord-fw-bold);
  line-height: 1;
}

.ord-mobilemenu__links a:hover {
  color: var(--ord-primary);
}

/* Contact block pinned to the bottom of the sheet. */
.ord-mobilemenu__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 24px;
}

.ord-mobilemenu__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ord-primary);
  color: #fff;
  flex-shrink: 0;
}

.ord-mobilemenu__contact-icon .ord-icon {
  width: 22px;
  height: 22px;
}

.ord-mobilemenu__contact-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.ord-mobilemenu__contact-body a {
  color: var(--ord-text);
  font-size: 15px;
}

.ord-mobilemenu__contact-body a:hover {
  color: var(--ord-primary);
}

.ord-mobilemenu__label {
  display: block;
  margin: 18px 0 10px;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-semibold);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ord-muted);
}

/* ---- Leistungen accordion (mirrors the header services dropdown) ---- */
.ord-mobilemenu__acc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ord-macc__item {
  border-radius: 12px;
  overflow: hidden;
  background: var(--ord-gray);
}

.ord-macc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--ord-font-body);
  font-weight: var(--ord-fw-semibold);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ord-heading);
  transition: background var(--ord-dur) var(--ord-ease),
              color var(--ord-dur) var(--ord-ease);
}

.ord-macc__caret {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--ord-dur) var(--ord-ease);
}

.ord-macc__item.is-open .ord-macc__head {
  background: var(--ord-primary);
  color: #fff;
}

.ord-macc__item.is-open .ord-macc__caret {
  transform: rotate(180deg);
}

/* Collapsible panel (0fr -> 1fr height animation). */
.ord-macc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ord-dur) var(--ord-ease);
}

.ord-macc__item.is-open .ord-macc__panel {
  grid-template-rows: 1fr;
}

.ord-macc__list {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
}

.ord-macc__item.is-open .ord-macc__list {
  padding-top: 2px;
  padding-bottom: 10px;
}

.ord-macc__list li + li {
  border-top: 1px dashed var(--ord-border);
}

.ord-macc__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  color: var(--ord-heading);
  font-size: 14.5px;
  font-weight: var(--ord-fw-medium);
  line-height: 1.35;
}

.ord-macc__list a::before {
  content: "\203A";
  color: var(--ord-primary);
  font-weight: var(--ord-fw-bold);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.ord-macc__list a:hover {
  color: var(--ord-primary);
}

/* Show the bar on tablet + mobile, reserve space so the footer clears it. */
@media (max-width: 991px) {
  .ord-mobilebar {
    display: flex;
  }
  /* Reserve space so the fixed mobile bar never covers the last page content. */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* Hide the desktop footer on mobile/tablet — the mobile bar replaces it. */
  .ord-footer {
    display: none;
  }
}


/*--lokesh-new-code--*/

/* =====================================================================
   Single-service page fixes (Abrissarbeiten etc.)
   Targets the shortcode markup: .page-section / .pfaq-*
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HERO BANNER — title + text were dark/unreadable on the dark image
      because the shortcode <h1> has no .ss-hero__title class.
   ------------------------------------------------------------------- */
.ord-single-service .ss-hero__content .page-section h1 {
  color: #fff;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.12;
  max-width: 16ch;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); /* keeps it legible on any photo */
}

.ord-single-service .ss-hero__list .page-section p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------------
   2. CHECKLIST ICONS — shortcode <ul><li> have no icon (other pages do).
      Add the red circle-check icon like the rest of the site.
      Scoped to .page-section so the hard-coded pricing lists are untouched.
   ------------------------------------------------------------------- */
.ord-single-service .page-section ul {
  list-style: none;
  display: block;
  margin: 16px 0 0;
  padding: 0;
}

.ord-single-service .page-section ul li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 34px;
  font-weight: var(--ord-fw-medium);
  color: var(--ord-heading);
  line-height: 1.6;
}

.ord-single-service .page-section ul li:last-child {
  margin-bottom: 0;
}

.ord-single-service .page-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1272d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8.5 12 11 14.5 15.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   3. FAQ — restyle the plugin accordion (.pfaq-*) to match the theme.
      3-class prefix beats the plugin's own inline <style> (.pfaq-NN ...).
      JS toggles the ".open" class — visuals keyed off it; the open/close
      max-height animation from the plugin is preserved.
   ------------------------------------------------------------------- */
.ss-faq .ss-faq__list .page-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-faq .ss-faq__list .pfaq-item {
  margin: 0;
  background: #fff;
  border: 1px solid var(--ord-border-soft);
  border-radius: var(--ord-radius);
  box-shadow: var(--ord-shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--ord-dur) var(--ord-ease);
}

.ss-faq .ss-faq__list .pfaq-item.open {
  box-shadow: var(--ord-shadow-sm);
}

.ss-faq .ss-faq__list .pfaq-question {
  position: relative;
  margin: 0;
  padding: 22px 64px 22px 26px;
  background: transparent;
  cursor: pointer;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-semibold);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ord-heading);
}

/* round +/− toggle on the right */
.ss-faq .ss-faq__list .pfaq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ord-bg-blush, #faf1f1);
  color: var(--ord-primary);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: background var(--ord-dur) var(--ord-ease),
              color var(--ord-dur) var(--ord-ease);
}

.ss-faq .ss-faq__list .pfaq-item.open .pfaq-question::after {
  content: "\2212"; /* minus */
  background: var(--ord-primary);
  color: #fff;
}

.ss-faq .ss-faq__list .pfaq-answer {
  padding: 0 26px;
}

.ss-faq .ss-faq__list .pfaq-item.open .pfaq-answer {
  padding: 4px 26px 24px;
}

.ss-faq .ss-faq__list .pfaq-answer p {
  margin: 0;
  color: var(--ord-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* =====================================================================
   Single-CITY page fixes (Entrümpelung Mitte etc.)
   Shortcode markup: .page-section / .pfaq-*  (same issue as service pages)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HERO BANNER — shortcode <h1> + lead text were dark on the dark band
      (the .cs-hero__title styles sit on the wrapper div, not the <h1>).
   ------------------------------------------------------------------- */
.ord-single-city .cs-hero__title .page-section h1 {
  color: #fff;
  font-family: var(--ord-font-heading);
  font-weight: var(--ord-fw-bold);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.14;
  max-width: 18ch;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.ord-single-city .cs-hero__list .page-section p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------------
   2. CHECKLIST ICONS — add the red circle-check to shortcode <ul><li>.
      Scoped to .page-section so hard-coded lists keep their own icons.
   ------------------------------------------------------------------- */
.ord-single-city .page-section ul {
  list-style: none;
  display: block;
  margin: 16px 0 0;
  padding: 0;
}

.ord-single-city .page-section ul li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 34px;
  font-weight: var(--ord-fw-medium);
  color: var(--ord-heading);
  line-height: 1.6;
}

.ord-single-city .page-section ul li:last-child {
  margin-bottom: 0;
}

.ord-single-city .page-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1272d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8.5 12 11 14.5 15.5 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* On the dark "Why choose us" section, the list text must be light
   (the red check icon stays as-is and reads fine on dark). */
.ord-single-city .ord-bg-dark .page-section ul li {
  color: var(--ord-on-dark);
}

.page-template-page-contact .ct-container{
	    margin-top: 4rem;
}