.brand-slider-track {
            transition: transform 0.6s ease;
        }

        :root {
            --font: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

            /* HEIZDIENST screenshot palette */
            --teal-900: #184048;
            /* main dark teal background */
            --teal-800: #306070;
            /* slightly lighter teal */
            --teal-700: #35606e;
            /* hover/secondary teal */
            --teal-200: #d8eef4;

            --orange-600: #ee7c20;
            /* main CTA orange */
            --orange-700: #e06e00;
            /* hover orange */

            /* Keep these names (used across your desktop CSS),
       but make them follow the HEIZDIENST scheme */
            --red-600: var(--orange-600);
            --blue-700: var(--orange-600);

            --text: #16222b;
            --muted: #5c6b75;
            --bg: #ffffff;
            --line: #e6eaee;
            --shadow: 0 10px 26px rgba(16, 24, 40, .12);
            --radius: 14px;

            --container: 1180px;
            --mobilebar: 64px;
        }

        .m-iconbtn img {
            width: 40px;
            filter: brightness(1.05);
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
            font-family: var(--font);
            color: var(--text);
            background: linear-gradient(180deg, #f7f8fa 0%, #ffffff 40%);
            padding-top: 0;
            /* Remove padding as header is fixed */
        }

        img {
            max-width: 100%;
            display: block
        }

        a {
            color: inherit;
            text-decoration: none
        }

        .container {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 18px
        }

        /* ---------- FIXED HEADER CONTAINER ---------- */
        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99999;
            width: 100%;
            background: #fff;
        }

        /* ---------- Top bars (desktop) ---------- */
        .topstrip {
            background: var(--teal-900);
            color: #fff;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .2px;
            width: 100%;
        }

        .topstrip .container {
            display: flex;
            gap: 18px;
            align-items: center;
            justify-content: flex-end;
            padding: 8px 18px;
        }

        .topstrip .pill {
            display: flex;
            align-items: center;
            gap: 8px;
            opacity: .95;
        }

        .topstrip svg {
            width: 18px;
            height: 18px;
            fill: #fff
        }

        /* ---------- Main Header ---------- */
        .main-header {
            width: 100%;
            border-bottom: 1px solid var(--line);
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            gap: 14px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .brand img {
            height: 60px;
            width: 240px
        }

        nav {
            display: flex;
            align-items: center;
            gap: 22px
        }

        nav a {
            font-size: 14px;
            font-weight: 700;
            color: #24323c;
            padding: 10px 2px;
            position: relative;
        }

        nav a.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: var(--red-600);
            border-radius: 2px;
        }

        .burger {
            display: none;
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
        }

        .burger svg {
            width: 22px;
            height: 22px;
            fill: #22313a
        }

        /* ---------- Hero (desktop) ---------- */
        .hero {
            padding: 26px 0 18px;
            background: #fff;
            margin-top: 120px;
            /* Add margin to account for fixed header */
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 22px;
            align-items: stretch;
        }

        .hero-img {
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow);
            background: #0e2f3a;
        }

        .hero-img img {
            width: 100%;
            height: 100%;

        }

        .hero-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 14px;
        }

        .hero-copy h1 {
            margin: 0;
            font-size: 34px;
            line-height: 1.12;
            letter-spacing: -.2px;
        }

        .hero-copy p {
            margin: 0;
            /* color: var(--muted); */
            font-size: 15px;
            line-height: 1.6;
            max-width: 52ch;
        }

        .hero-bullets {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 18px;
            margin-top: 4px;
            padding: 0;
            list-style: none;
        }

        .hero-bullets li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            color: #25323b;
            font-size: 14px;
        }

        .hero-bullets svg {
            width: 18px;
            height: 18px;
            fill: var(--red-600)
        }

        .brand-row {
            padding: 18px 0 6px;
            background: #fff;
        }

        .logos {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 10px;
            align-items: center;
            opacity: .95;
        }

        .logos img {
            width: 100%;
            height: 40px;
            object-fit: contain;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 6px 10px;
        }

        /* ---------- Main 2-col: text + form ---------- */
        .intro {
            padding: 28px 0;
            background: #fff;
        }

        .intro-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 22px;
            align-items: start;
        }

        .intro h2 {
            margin: 0 0 10px;
            font-size: 28px;
            line-height: 1.2;
        }

        .intro h2+h3 {
            margin: 0 0 12px;
            font-size: 20px;
            font-weight: 800;
            color: #1f2b33;
        }

        .divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 12px 0 14px;
            color: #1f2b33;
        }

        .divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--line);
        }

        .divider .icon {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: 0 6px 16px rgba(16, 24, 40, .08);
        }

        .divider svg {
            width: 18px;
            height: 18px;
            fill: #22313a
        }

        .prose {
            color: var(--muted);
            line-height: 1.75;
            font-size: 15px;
        }

        .prose b {
            color: #1f2b33
        }

        .card {
            border: 1px solid var(--line);
            border-radius: 16px;
            box-shadow: var(--shadow);
            background: #fff;
            overflow: hidden;
        }

        .card-head {
            padding: 16px 16px 0;
        }

        .card-head .kicker {
            font-weight: 800;
            color: #1f2b33;
            font-size: 14px;
            margin: 0 0 10px;
        }

        .form {
            padding: 16px;
            display: grid;
            gap: 10px;
        }

        .field-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }

        .field-row.two {
            grid-template-columns: 1fr 1fr;
        }

        .input,
        textarea,
        select {
            width: 100%;
            border: 1px solid rgba(0, 0, 0, .22);
            border-radius: 8px;
            height: 44px;
            padding: 0 12px;
            font-family: var(--font);
            font-size: 14px;
            outline: none;
            background: #fff;
        }

        textarea {
            height: 110px;
            padding: 10px 12px;
            resize: vertical;
        }

        .btn {
            height: 44px;
            border: none;
            border-radius: 8px;
            background: var(--blue-700);
            color: #fff;
            font-weight: 800;
            font-family: var(--font);
            font-size: 15px;
            cursor: pointer;
            transition: transform .06s ease, filter .2s ease;
        }

        .btn:active {
            transform: translateY(1px)
        }

        .btn:hover {
            filter: brightness(1.06)
        }

        /* ---------- Steps ---------- */
        .steps {
            padding: 22px 0 10px;
            background: #fff;
        }

        .steps h2 {
            margin: 0 0 14px;
            font-size: 26px;
            text-align: center;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .step {
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 10px 22px rgba(16, 24, 40, .08);
        }

        .step-top {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 14px 10px;
        }

        .step-num {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            background: var(--red-600);
            color: #fff;
            font-weight: 900;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
        }

        .step-title {
            font-weight: 900;
            margin-top: 2px;
            line-height: 1.2;
            font-size: 15px;
        }

        .step img {
            width: 100%;
            height: 100%;

        }

        /* ---------- Why maintenance ---------- */
        .why {
            padding: 26px 0;
            background: #f6f7f9;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .why h3 {
            margin: 0 0 10px;
            font-size: 22px;
        }

        .why .block {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 10px 22px rgba(16, 24, 40, .06);
        }

        .why h4 {
            margin: 14px 0 8px;
            font-size: 16px;
        }

        .why p {
            margin: 0;
            color: var(--muted);
            line-height: 1.7;
            font-size: 14.5px
        }

        /* ---------- Brand spotlight (Vaillant / Junkers) ---------- */
        .spotlight {
            padding: 28px 0;
            background: #fff;
        }

        .spotlight+.spotlight {
            border-top: 1px solid var(--line)
        }

        .spot-head {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            align-items: center;
        }

        .spot-text h2 {
            margin: 0 0 10px;
            font-size: 26px;
        }

        .spot-text p {
            margin: 0 0 14px;
            /* color: var(--muted); */
            line-height: 1.75;
            font-size: 15px;
        }

        .spot-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0 12px;
        }

        .spot-brand img {
            height: 44px;
            width: auto
        }

        .cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            padding: 0 18px;
            border-radius: 10px;
            font-weight: 900;
            background: #0f6f4c;
            color: #fff;
            box-shadow: 0 12px 22px rgba(16, 24, 40, .10);
        }

        .cta.blue {
            background: #0c5aa6
        }

        .spot-img {
            width: 100%;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            background: #f3f6f8;
            height: 310px;
        }

        .spot-img img {
            width: 100%;
            height: 100%;
            /*  ; */
        }

        .features {
            margin-top: 18px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
        }

        .feat {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 12px 12px 14px;
            background: #fff;
            box-shadow: 0 10px 18px rgba(16, 24, 40, .06);
        }

        .feat .n {
            width: 28px;
            height: 28px;
            border-radius: 10px;
            border: 1px solid var(--line);
            display: grid;
            place-items: center;
            font-weight: 900;
            margin-bottom: 8px;
            background: #fff;
        }

        .feat h4 {
            margin: 0 0 6px;
            font-size: 14px;
        }

        .feat p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5
        }

        /* ---------- Mid banner ---------- */
        .midbanner {
            background: linear-gradient(90deg, #0f6f4c, #0d4d7a);
            color: #fff;
            padding: 18px 0;
        }

        .midbanner .container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-weight: 900;
            letter-spacing: .5px;
        }

        .midbanner svg {
            width: 22px;
            height: 22px;
            fill: #fff
        }

        /* ---------- Footer ---------- */
        footer {
            background: #114359;
            border-top: 1px solid rgba(255, 255, 255, .12);
        }

        /* make footer text white */
        footer,
        footer a,
        .footer p,
        .list li,
        .footer-title {
            color: rgba(255, 255, 255, .92) !important;
        }

        .footer-title svg,
        .list svg {
            fill: rgba(255, 255, 255, .92) !important;
        }

        /* copyright bar */
        .copyright {
            border-top: 1px solid rgba(255, 255, 255, .12);
            color: rgba(255, 255, 255, .75);
        }

        .footer-top {
            padding: 26px 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr .9fr;
            gap: 18px;
            align-items: start;
        }

        .footer-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 12px;
            font-size: 16px;
            font-weight: 900;
        }

        .footer-title svg {
            width: 18px;
            height: 18px;
            fill: #22313a
        }

        .footer p {
            margin: 0;
            color: var(--muted);
            line-height: 1.7;
            font-size: 14px
        }

        .list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 10px;
        }

        .list li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            color: #2a3943;
            font-weight: 600;
            font-size: 14px;
        }

        .list svg {
            width: 18px;
            height: 18px;
            fill: #22313a;
            margin-top: 2px
        }

        .copyright {
            border-top: 1px solid var(--line);
            padding: 14px 0;
            font-size: 13px;
            color: #ffffff;
        }

        @media (max-width:768px) {
             .copyright {
            border-top: 1px solid var(--line);
            padding: 14px 0 60px;
            font-size: 13px;
            color: #ffffff;
        }
        }

        .copyright .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* ---------- MOBILE FIXED HEADER ---------- */
        .mobile-fixed-header {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999999;
            width: 100%;
            background: rgba(20, 60, 75, .96);
            border-bottom: 1px solid rgba(255, 255, 255, .10);
        }

        .mobile-fixed-header .container {
            padding: 0 16px;
        }

        .mobile-fixed-header .header-inner {
            padding: 10px 0;
        }

        .mobile-fixed-header .brand img {
            height: 61px;
            width: 240px;
        }

        /* Mobile logo specific style */
        .mobile-logo {
            display: none;
        }

        .mobile-fixed-header nav {
            display: none;
        }

        .mobile-fixed-header .burger {
            display: inline-flex;
            border: 1px solid rgba(255, 255, 255, .18);
            background: rgba(255, 255, 255, .08);
        }

        .mobile-fixed-header .burger svg {
            fill: #fff;
        }

        .mobile-menu-panel {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(20, 60, 75, .98);
            border-top: 1px solid rgba(255, 255, 255, .10);
            display: none;
            z-index: 1001;
            padding: 30px;
        }

        .mobile-menu-panel .container {
            padding: 10px 16px 14px;
        }

        .mobile-menu-panel a {
            display: block;
            color: #fff;
            padding: 12px 0;
            font-weight: 700;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .mobile-menu-panel a:last-child {
            border-bottom: none;
        }

        /* ---------- MOBILE HERO ---------- */
        .m-hero {
            display: none;
            position: relative;
            background: none;
            overflow: hidden;
            padding-top: 149px !important;
            /* Space for fixed mobile header */
            padding-bottom: 96px;
        }

        /* background image */
        .m-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url("img/hero-scetion.webp");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 0;
            transform: scale(1.02);
        }

        /* dark overlay ONLY on left half (text side) */
        .m-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(90deg,
                    rgba(20, 60, 75, 0.90) 0%,
                    rgba(20, 60, 75, 0.78) 35%,
                    rgba(20, 60, 75, 0.25) 52%,
                    rgba(20, 60, 75, 0.00) 65%,
                    rgba(20, 60, 75, 0.00) 100%);
            pointer-events: none;
        }

        .m-hero .wrap,
        .m-hero .m-cta {
            position: relative;
            z-index: 2;
        }

        .m-hero .wrap {
            padding: 16px 16px 0;
        }

        .m-hero .grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 14px;
            align-items: center;
        }

        .m-hero h1 {
            margin: 0 0 8px;
            font-size: 26px;
            line-height: 1.12;
            color: #fff;
            letter-spacing: -.2px;
        }

        .m-hero h1 .hi {
            color: var(--orange-600)
        }

        .m-hero p {
            margin: 0;
            color: rgba(255, 255, 255, .86);
            line-height: 1.55;
            font-size: 13.5px;
        }

        .m-badge {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin-top: 14px;
            color: rgba(255, 255, 255, .92);
            font-weight: 700;
            font-size: 13px;
        }

        .m-badge .dot {
            width: 85px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .10);
            display: grid;
            place-items: center;
            border: 1px solid rgba(255, 255, 255, .18);
            margin-top: 2px;
        }

        .m-badge svg {
            width: 14px;
            height: 14px;
            fill: var(--orange-600)
        }

        .m-tech {
            display: none;
        }

        .m-cta {
            margin: 14px 16px 0;
            background: var(--orange-600);
            color: #fff;
            font-weight: 900;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 14px 26px rgba(242, 140, 26, .26);
        }

        .m-cta svg {
            width: 18px;
            height: 18px;
            fill: #fff
        }

        .m-services {
            display: none;
            padding: 16px 16px 18px;
            background: #fff;
        }

        .m-services p {
            margin: 0 0 14px;
            color: #2d3b44;
            line-height: 1.7;
            font-size: 14px;
        }

        .m-panel {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 14px;
            box-shadow: 0 14px 26px rgba(16, 24, 40, .10);
        }

        .m-panel h3 {
            margin: 0 0 10px;
            font-size: 18px;
        }

        .m-checks {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 8px;
            font-weight: 700;
            color: #2b3a44;
            font-size: 14px;
        }

        .m-checks li {
            display: flex;
            align-items: flex-start;
            gap: 10px
        }

        .m-checks svg {
            width: 18px;
            height: 18px;
            fill: var(--orange-600);
            margin-top: 2px
        }

        .m-benefit {
            display: none;
            padding: 16px;
            background: #fff;
        }

        .m-benefit .row {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 14px;
            box-shadow: 0 12px 20px rgba(16, 24, 40, .08);
        }

        .m-benefit .ico {
            width: 38px;
            height: 38px;
            border-radius: 14px;
            background: rgba(15, 111, 76, .10);
            border: 1px solid rgba(15, 111, 76, .18);
            display: grid;
            place-items: center;
            flex: 0 0 auto;
        }

        .m-benefit .ico svg {
            width: 20px;
            height: 20px;
            fill: #0f6f4c
        }

        .m-benefit h4 {
            margin: 0 0 4px;
            font-size: 18px
        }

        .m-benefit p {
            margin: 0;
            color: var(--muted);
            line-height: 1.65;
            font-size: 14px
        }

        .mobilebar {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: var(--mobilebar);
            background: rgba(20, 60, 75, .96);
            border-top: 1px solid rgba(255, 255, 255, .10);
            z-index: 80;
        }

        .mobilebar .inner {
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 2fr;
            gap: 8px;
            padding: 10px 12px;
            align-items: center;
        }

        .m-iconbtn {
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .10);
            border: 1px solid rgba(255, 255, 255, .14);
        }

        .m-iconbtn svg {
            width: 22px;
            height: 22px;
            fill: #fff
        }

        .m-callbtn {
            height: 44px;
            border-radius: 12px;
            white-space: nowrap;
            background: var(--orange-600);
            color: #fff;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 0 12px;
            box-shadow: 0 14px 24px rgba(242, 140, 26, .18);
        }

        .m-callbtn svg {
            width: 20px;
            height: 20px;
            fill: #fff
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 1024px) {
            .logos {
                grid-template-columns: repeat(5, 1fr)
            }

            .hero-grid,
            .intro-grid,
            .spot-head {
                grid-template-columns: 1fr
            }

            /* .spot-img img {
                height: 320px
            } */

            .features {
                grid-template-columns: repeat(3, 1fr)
            }

            .steps-grid {
                grid-template-columns: 1fr;
                max-width: 620px;
                margin: 0 auto
            }

            .fixed-header nav {
                display: none
            }

            .fixed-header .burger {
                display: inline-flex
            }

            .why-grid {
                grid-template-columns: 1fr
            }
        }

        /* Mobile-first "HEIZDIENST" look */
        @media (max-width: 640px) {
            body {
                background: #fff;
                padding-top: 81px;
                /* Space for fixed mobile header */
            }

            /* Hide desktop header on mobile */
            .fixed-header {
                display: none !important;
            }

            /* Show mobile fixed header */
            .mobile-fixed-header {
                display: block;
            }

            /* Show mobile logo, hide desktop logo */
            .mobile-logo {
                display: block;
            }

            .desktop-logo {
                display: none;
            }

            .topstrip,
            .hero,
            .brand-row {
                /* display: none */
            }

            .container {
                padding: 0 16px
            }

            .intro {
                padding-top: 18px
            }

            .intro-grid {
                gap: 14px
            }

            .card {
                box-shadow: 0 14px 26px rgba(16, 24, 40, .10)
            }

            .field-row {
                grid-template-columns: 1fr
            }

            /* .spot-img img {
                height: 260px
            } */

            .features {
                grid-template-columns: 1fr 1fr
            }

            .footer-grid {
                grid-template-columns: 1fr
            }

            /* Mobile sections */
            .m-hero,
            .m-services,
            .m-benefit,
            .mobilebar {
                display: block
            }
        }

        /* Color adjustments */
        .topstrip {
            background: #114359;
            color: #fff;
        }

        nav a.active::after {
            background: var(--orange-600);
        }

        .hero-bullets svg {
            fill: var(--orange-600);
        }

        .divider svg {
            fill: var(--orange-600);
        }

        .btn {
            background: var(--orange-600);
        }

        .btn:hover {
            filter: brightness(1.03);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .step-num {
            background: var(--orange-600);
        }

        .cta,
        .cta.blue {
            background: var(--orange-600);
        }

        .cta:hover,
        .cta.blue:hover {
            filter: brightness(1.03);
        }

        .midbanner {
            background: linear-gradient(90deg, var(--teal-900), var(--teal-800));
        }

        .main-header {
            background: #fff;
            border-bottom: 1px solid var(--line);
        }

        /* ---------- Brands / Gas Boilers Section ---------- */
        .brands-service {
            background: #114359;
            padding: 40px 0 46px;
            border-top: 1px solid var(--line);
        }

        .brands-kicker {
            display: block;
            text-align: center;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: .4px;
            color: white;
            margin-bottom: 6px;
        }

        .brands-title {
            text-align: center;
            color: white;
            font-size: 28px;
            margin: 0 0 26px;
        }

        .brands-logos {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
            align-items: center;
        }

        .brands-logos img {
            width: 100%;
            height: 58px;
            object-fit: contain;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 10px 14px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
        }

        .brands-note {
            margin-top: 18px;
            text-align: center;
            font-weight: 600;
            color: white;
            font-size: 14px;
        }

        /* Tablet */
        @media (max-width: 1024px) {
            .brands-logos {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Mobile */
        @media (max-width: 640px) {
            .brands-logos {
                grid-template-columns: repeat(2, 1fr);
            }

            .brands-title {
                font-size: 24px;
            }
        }

        /* Reusable brand spotlight tweaks */
        .spotlight .cta {
            background: var(--orange-600);
        }

        .spotlight .cta:hover {
            filter: brightness(1.03);
        }

        /* Alternate layout (image left, text right) */
        .spotlight.reverse .spot-head {
            direction: rtl;
        }

        .spotlight.reverse .spot-head>* {
            direction: ltr;
        }

        /* Brand logo row spacing */
        .spot-brand {
            margin: 8px 0 12px;
        }

        .brand-row {
            padding: 40px 0;
        }

        .brand-slider {
            position: relative;
            display: flex;
            align-items: center;
        }

        .brand-slider-viewport {
            overflow: hidden;
            width: 100%;
        }

        .brand-slider-track {
            display: flex;
            gap: 40px;
            transition: transform 0.4s ease;
            will-change: transform;
        }

        .brand-slider-track img {
            height: 60px;
            width: auto;
            flex-shrink: 0;
            opacity: 0.9;
        }

        /* Buttons */
        .brand-slider-btn {
            background: rgba(0, 0, 0, 0.6);
            border: none;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
        }

        .brand-slider-btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .brand-slider-prev {
            left: -20px;
        }

        .brand-slider-next {
            right: -20px;
        }

        /* Arrow icons */
        .brand-slider-btn::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            display: block;
            top: 15px;
            left: 14px !important;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
        }

        .brand-slider-prev::before {
            transform: rotate(-135deg);
        }

        .brand-slider-next::before {
            transform: rotate(45deg);
        }

        /* Mobile fix */
        @media (max-width: 768px) {
            .brand-slider-prev {
                left: 0;
            }

            .brand-slider-next {
                right: 0;
            }
        }

        /*
     MARKENÜBERSICHT DROPDOWN (UPDATED)
     - matches teal/orange scheme
     - smaller width
     - internal scroll when list is long
   */
        .nav-dropdown {
            position: relative;
        }

        .nav-dropdown>a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }

        .nav-dropdown>a .chev {
            font-size: 16px;
            transform: translateY(1px);
        }

        /* Panel */
        .nav-dropdown-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            left: auto;
            width: 260px;
            /* smaller */
            background: #114359;
            /* match your scheme */
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 14px;
            box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
            overflow: hidden;
            display: none;
            z-index: 9999;
        }

        /* show on hover (desktop) */
        .nav-dropdown:hover .nav-dropdown-panel,
        .nav-dropdown:focus-within .nav-dropdown-panel {
            display: block;
        }

        /* first child header */
        .nav-dropdown-panel .dd-title {
            padding: 12px 14px;
            font-weight: 900;
            font-size: 13px;
            letter-spacing: .6px;
            text-transform: uppercase;
            color: #fff;
            background: rgba(255, 255, 255, .06);
            border-bottom: 1px solid rgba(255, 255, 255, .10);
        }

        /* ✅ scroll wrapper (you already used .dd-scroll in HTML) */
        .nav-dropdown-panel .dd-scroll {
            max-height: 320px;
            /* long list => scroll inside */
            overflow-y: auto;
            padding: 6px;
        }

        /* scrollbar */
        .nav-dropdown-panel .dd-scroll::-webkit-scrollbar {
            width: 10px;
        }

        .nav-dropdown-panel .dd-scroll::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .18);
            border-radius: 999px;
            border: 2px solid rgba(0, 0, 0, 0);
            background-clip: padding-box;
        }

        .nav-dropdown-panel .dd-scroll::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, .06);
        }

        /* items */
        .nav-dropdown-panel a.dd-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 3px 10px;
            color: #fff;
            font-weight: 900;
            font-size: 13px;
            letter-spacing: .3px;
            text-transform: uppercase;
            border-radius: 12px;
        }

        .nav-dropdown-panel a.dd-item:hover {
            background: rgba(255, 255, 255, .08);
        }

        .nav-dropdown-panel .dd-logo {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: #fff;
            padding: 6px;
            object-fit: contain;
            flex: 0 0 auto;
            border: 2px solid rgba(238, 124, 32, .45);
            /* orange accent */
        }

        /* Mobile/Tablet dropdown inside panel */
        .dd-mobile-block {
            display: grid;
            gap: 8px;
            padding: 8px 0 2px;
        }

        /*
   HERO IMAGE BADGES (Trustpilot + Google)
 */

        /* desktop hero image wrapper must be relative */
        .hero-img {
            position: relative;
        }

        /* shared badge container (desktop) */
        .hero-badges {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 14px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            z-index: 5;
            pointer-events: none;
            min-width: none !important;
        }

        /* each badge */
        .hero-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            /* background: rgba(0, 0, 0, .55); */
            border: 1px solid rgba(255, 255, 255, .18);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
            color: #fff;
            min-height: 58px;
        }

        /* logo on the left */
        .hero-badge .badge-logo {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: #fff;
            padding: 6px;
            object-fit: contain;
            flex: 0 0 auto;
        }

        /* text */
        .hero-badge .badge-text {
            display: grid;
            gap: 3px;
            line-height: 1.1;
        }

        .hero-badge .badge-title {
            font-weight: 900;
            font-size: 12.5px;
            letter-spacing: .2px;
            opacity: .95;
        }

        .hero-badge .badge-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hero-badge .badge-stars {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .hero-badge .badge-score {
            font-weight: 900;
            font-size: 12.5px;
            opacity: .95;
        }

        /* star colors per brand */
        .hero-badge.tp .badge-stars {
            color: #00b67a;
        }

        /* Trustpilot green */
        .hero-badge.gg .badge-stars {
            color: #fbbc05;
        }

        /* Google yellow */

        /* MOBILE hero: place badges over the background image */
        .m-hero {
            position: relative;
        }

        .m-hero-badges {
            position: absolute;
            padding: 0 20px;
            left: 12px;
            right: 12px;
            bottom: 12px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            z-index: 3;
            /* above overlays */
            pointer-events: none;
        }

        /* slightly smaller on mobile */
        @media (max-width: 640px) {
            .hero-badges {
                left: 12px;
                right: 12px;
                bottom: 12px;
                gap: 10px;
            }

            .hero-badge {
                padding: 9px 10px;
                min-height: 54px;
                border-radius: 13px;
            }

            .hero-badge .badge-logo {
                width: 32px;
                height: 32px;
                border-radius: 10px;
            }

            .hero-badge .badge-title {
                font-size: 12px;
            }

            .hero-badge .badge-stars {
                font-size: 13px;
            }

            .hero-badge .badge-score {
                font-size: 12px;
            }
        }


        /*
   BEKANNT AUS (AS SEEN IN)
 */
 a{
    text-decoration: none !important;
 }
        .as-seen {
            background: #fff;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .as-seen-row {
            display: flex;
            align-items: center;
            /* justify-content: space-between; */
            gap: 18px;
            padding: 18px 0;
        }

        .as-seen-title {
            font-weight: 900;
            /* font-size:12.5px; */
            letter-spacing: .8px;
            color: #2a3943;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .as-seen-logos {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .as-seen-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            /* controls row height */
            padding: 0;
            opacity: .95;
        }

        .as-seen-logo img {
            height: 100%;
            width: auto;
            object-fit: contain;
            display: block;
        }

        /* Tablet */
        @media (max-width: 1024px) {
            .as-seen-row {
                flex-direction: column;
                /* align-items: flex-start; */
                gap: 12px;
            }

            .as-seen-logos {
                justify-content: space-around;
                gap: 18px;
            }
        }

        /* Mobile */
        @media (max-width: 640px) {
            .as-seen-logos {
                gap: 14px 16px;
            }

            .as-seen-logo {
                height: 30px;
            }
        }



        @media (max-width: 640px) {

            .as-seen-row {
                display: flex;
                gap: 14px;
                padding: 18px 0;
                justify-items: center;
                text-align: center;
                overflow: hidden;
            }

            .as-seen-title {
                text-align: center;
                margin-bottom: 6px;
            }

            .as-seen-logos {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-areas:
                    "orf kurier"
                    "standard standard"
                    "presse kleine"
                    "gewinn gewinn";
                gap: 12px 18px;
                align-items: center;
                justify-items: center;
                width: 100%;
            }

            /* map logos by order */
            .as-seen-logos .as-seen-logo:nth-child(1) {
                grid-area: orf;
            }

            .as-seen-logos .as-seen-logo:nth-child(2) {
                grid-area: kurier;
            }

            .as-seen-logos .as-seen-logo:nth-child(3) {
                grid-area: standard;
            }

            .as-seen-logos .as-seen-logo:nth-child(4) {
                grid-area: presse;
            }

            .as-seen-logos .as-seen-logo:nth-child(5) {
                grid-area: kleine;
            }

            .as-seen-logos .as-seen-logo:nth-child(6) {
                grid-area: gewinn;
            }

            .as-seen-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 30px;
                width: 100%;
            }

            .as-seen-logo img {
                height: 100%;
                width: auto;
                object-fit: contain;
            }

            /* slightly bigger for centered rows */
            .as-seen-logos .as-seen-logo:nth-child(3),
            .as-seen-logos .as-seen-logo:nth-child(6) {
                height: 34px;
            }
        }


        .m-hero-badges {
            display: flex;
            gap: 12px;
        }

        .hero-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            /* background: #2b2b2b; */
            color: #fff;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 13px;
        }

        /* .hero-badge.tp { background: #1f1f1f; } */
        /* .hero-badge.gg { background: #1f1f1f; } */

        .badge-icon {
            font-size: 22px;
            color: #00b67a;
            /* Trustpilot green */
        }

        .hero-badge.gg .badge-icon {
            color: #fbbc05;
            /* Google yellow */
        }

        .badge-title {
            font-weight: 600;
            line-height: 1.1;
        }

        .badge-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .badge-stars {
            color: #ffc107;
            font-size: 12px;
            line-height: 1;
        }

        .badge-score {
            font-size: 12px;
            opacity: 0.85;
        }


        /*
   DESKTOP HERO
 */
        .hero {
            padding: 26px 0 18px;
            background: #fff;
            margin-top: 120px;
            /* keep if fixed header */
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 22px;
            align-items: stretch;
        }

        .hero-img {
            position: relative;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow);
            background: #0e2f3a;
        }

        .hero-img img {
            width: 100%;
            height: 100%;
             ;
            display: block;
        }

        .hero-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 14px;
        }

        .hero-copy h1 {
            margin: 0;
            font-size: 33px;
            line-height: 1.12;
            letter-spacing: -.2px;
        }

        .hero-copy p {
            margin: 0;
            /* color: var(--muted); */
            font-size: 15px;
            line-height: 1.6;
            max-width: 52ch;
        }

        .hero-bullets {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 18px;
            margin-top: 4px;
            padding: 0;
            list-style: none;
        }

        .hero-bullets li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            color: black;
            font-size: 14px;
        }

        .hero-bullets svg {
            width: 18px;
            height: 18px;
            fill: var(--orange-600);
        }

        /*
   BADGES (shared desktop + mobile)
 */
        .hero-badges {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 14px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            z-index: 5;
            pointer-events: none;
        }

        .hero-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(0, 0, 0, .55);
            border: 1px solid rgba(255, 255, 255, .16);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
            color: #fff;
            min-height: 58px;
        }

        .badge-icon {
            font-size: 22px;
            line-height: 1;
            flex: 0 0 auto;
        }

        .badge-text {
            display: grid;
            gap: 3px;
            line-height: 1.1;
        }

        .badge-title {
            font-weight: 900;
            font-size: 12.5px;
            letter-spacing: .2px;
            opacity: .95;
        }

        .badge-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .badge-stars {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 14px;
            line-height: 1;
        }

        .badge-score {
            font-weight: 900;
            font-size: 12.5px;
            opacity: .95;
        }

        /* brand colors */
        .hero-badge.tp .badge-icon,
        .hero-badge.tp .badge-stars {
            color: #00b67a;
            /* Trustpilot green */
        }

        .hero-badge.gg .badge-icon,
        .hero-badge.gg .badge-stars {
            color: #fbbc05;
            /* Google yellow */
        }

        /*
   MOBILE HERO
 */
        .m-hero {
            display: none;
            position: relative;
            overflow: hidden;
            padding-top: 80px;
            padding-bottom: 96px;
        }

        /* background image */


        /* dark overlay */
       .m-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.75) 40%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.15) 75%,
        rgba(0, 0, 0, 0.00) 100%);
    pointer-events: none;
}


        .m-hero .wrap,
        .m-hero .m-cta,
        .m-hero .m-hero-badges {
            position: relative;
            z-index: 2;
        }

        .m-hero .wrap {
            padding: 16px 16px 0;
        }

        .m-hero .grid {
            display: grid;
            grid-template-columns: 3.05fr .95fr;
            gap: 14px;
            align-items: center;
        }

        .m-hero h1 {
            margin: 0 0 8px;
            font-size: 26px;
            line-height: 1.12;
            color: #fff;
            letter-spacing: -.2px;
        }

        .m-hero h1 .hi {
            color: var(--orange-600);
        }

        .m-hero p {
            margin: 0;
            color: rgba(255, 255, 255, .86);
            line-height: 1.55;
            font-size: 13.5px;
        }

        .m-badge {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin-top: 14px;
            color: rgba(255, 255, 255, .92);
            font-weight: 700;
            font-size: 13px;
        }

        .m-badge .dot {
            width: 85px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .10);
            display: grid;
            place-items: center;
            border: 1px solid rgba(255, 255, 255, .18);
            margin-top: 2px;
        }

        .m-badge .dot i {
            font-size: 18px;
            color: var(--orange-600);
        }

        .m-tech {
            display: none;
        }

        .m-cta {
            margin: 14px 16px 0;
            background: var(--orange-600);
            color: #fff;
            font-weight: 900;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 14px 26px rgba(242, 140, 26, .26);
        }

        .m-cta svg {
            width: 18px;
            height: 18px;
            fill: #fff;
        }

        /* Mobile badges overlay */
        .m-hero-badges {
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: -40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            z-index: 3;
            pointer-events: none;
        }

        /* Smaller badges on mobile */
        @media (max-width: 640px) {
            .m-hero-badges .hero-badge {
                padding: 9px 10px;
                min-height: 54px;
                border-radius: 10px;
            }

            .m-hero-badges .badge-icon {
                font-size: 20px;
            }

            .m-hero-badges .badge-title {
                font-size: 12px;
            }

            .m-hero-badges .badge-stars {
                font-size: 13px;
            }

            .m-hero-badges .badge-score {
                font-size: 12px;
            }
        }

        /*
   RESPONSIVE SWITCH
 */
        @media (max-width: 640px) {
            .stp-img{
                width: 100%;
                height: 180px;
            }
            .hero {
                display: none;
            }

            .m-hero {
                display: block;
            }
            .hero-bullets li{
                color: white;
            }
        }

        @media (max-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr;
            }
        }

        /* .service-media__img */
        /* my strat here */

  :root{
    --ink:#184048;
    --bg:#ffffff;
    --accent:#FB9A1B;
    --muted:#f4f7f7;
    --muted2:#e9f0f0;
    --text:#12373c;
    --line:rgba(24,64,72,.14);
    --shadow: 0 14px 40px rgba(0,0,0,.10);
    --radius: 18px;
    --radius2: 22px;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
  }

  a{color:inherit;text-decoration:none}
  .service-container{width:min(1120px, 92%); margin-inline:auto}

  .service-btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem;
    padding:12px 16px;
    border-radius:999px;
    font-weight:700;
    border:1px solid transparent;
    transition:.18s ease;
    white-space:nowrap;
  }
  .service-btn--primary{background:var(--ink); color:#fff;}
  .service-btn--primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
  .service-btn--accent{background:var(--accent); color:#1a1a1a;}
  .service-btn--accent:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
  .service-btn--ghost{background:#fff; border-color:var(--line);}
  .service-btn--ghost:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.08)}
  .service-btn--ghost-on-dark{
    background:transparent;
    border-color:rgba(255,255,255,.25);
    color:#fff;
  }
  .service-btn--ghost-on-dark:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.22)}
  .service-btn--full{width:100%}

  /* Quick tabs */
  .service-quicktabs{padding:10px 0 20px}
  .service-tabs{
    display:flex; gap:10px; flex-wrap:wrap;
    padding:10px;
    border:1px solid var(--line);
    border-radius:19px;
    background:#fff;
    justify-content: space-between;
  }
  .service-tab{
    padding:10px 12px;
    border-radius:999px;
    font-weight:800;
    color:var(--ink);
    border:1px solid transparent;
  }
  .service-tab:hover{border-color:var(--line); background:rgba(24,64,72,.05)}

  /* Sections */
  .service-section{padding:54px 0}
  .service-section--soft{background:linear-gradient(0deg, var(--muted), #fff)}
  .service-section__head{margin-bottom:18px;}
  .service-section__head h2{
    margin:0 0 6px;
    color:var(--ink);
    font-size: clamp(22px, 2.2vw, 32px);
    letter-spacing:-.02em;
  }
  .service-section__head p{margin:0; max-width:70ch}

  .service-grid{display:grid; gap:14px}
  .service-grid--2{grid-template-columns: repeat(2, 1fr)}

  .service-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding:16px;
  }

  .service-feature{
    display:flex; gap:12px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
  }
  .service-feature__icon{
    width:40px; height:40px;
    border-radius:14px;
    display:grid; place-items:center;
    background:rgba(251,154,27,.22);
    border:1px solid rgba(251,154,27,.35);
    font-size:18px;
    flex:0 0 auto;
  }
  .service-feature h3{margin:0 0 4px; color:var(--ink)}
  .service-feature p{margin:0}

  .service-checklist{margin:0; padding-left:18px}
  .service-checklist li{margin:8px 0}

  /* =====================================================
     ✅ IMAGES EQUAL HEIGHT AS CONTENT (CARD-SPLIT)
     ===================================================== */
  .card-split{
    display:grid;
    grid-template-columns: 1.12fr .88fr;
    gap:18px;
    align-items:stretch; /* ✅ equal height columns */
  }
  .card-split--reverse .card-split__text{order:2}
  .card-split--reverse .card-split__media{order:1}

  .card-split__text,
  .card-split__media{
    display:flex; /* ✅ allow child to stretch */
  }

  .card-box{
    width:100%;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius2);
    padding:18px;
  }
  .card-box h2{
    margin:0 0 8px;
    color:var(--ink);
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing:-.02em;
  }
  .card-box p{margin:0}
  .card-box p + p{margin-top:10px}

  /* Image box */
  .service-media{width:100%;}
  .service-media__box{
    width:100%;
    height:100%;       /* ✅ match text height */
    border-radius: var(--radius2);
    border:1px solid var(--line);
    box-shadow:0 18px 50px rgba(0,0,0,.12);
    overflow:hidden;
    margin: auto  !important;
    background: var(--muted);
  }
  .service-media__img{
    width:100%;
    height:100%;
    display:block;
    /* object-fit:cover;  ✅ fill nicely */
    object-position:center;
  }

  .service-stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
  .service-stat{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius:999px;
    background:rgba(24,64,72,.06);
    border:1px solid var(--line);
  }
  .service-stat__num{font-weight:900; color:var(--ink)}
  .service-stat__label{font-weight:800}

  /* Dark section */
  .service-section--dark{
    background:linear-gradient(135deg, var(--ink), rgba(24,64,72,.92));
    color:#fff;
  }
  .service-emergency{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:16px;
    align-items:stretch;
  }
  .service-emergency__text h2{color:#fff; margin:0 0 10px}
  .service-emergency__text p{margin:0 0 14px; color:rgba(255,255,255,.9)}
  .service-emergency__actions{display:flex; gap:10px; flex-wrap:wrap}
  .service-panel{
    height:100%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--radius);
    padding:16px;
  }
  .service-checklist--on-dark{color:rgba(255,255,255,.92)}
  .service-checklist--on-dark li{margin:10px 0}

  /* FAQ */
  .service-faq details{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 16px;
    background:#fff;
  }
  .service-faq details + details{margin-top:10px}
  .service-faq summary{
    cursor:pointer;
    font-weight:900;
    color:var(--ink);
  }
  .service-faq p{margin:10px 0 0}

  /* CTA */
  .service-cta{
    padding:54px 0;
    background:
      radial-gradient(900px 320px at 10% 10%, rgba(251,154,27,.22), transparent 60%),
      radial-gradient(800px 260px at 90% 20%, rgba(24,64,72,.16), transparent 60%),
      #fff;
  }
  .service-cta__inner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
    align-items:start;
    border:1px solid var(--line);
    border-radius:var(--radius2);
    padding:18px;
    background:#fff;
    box-shadow:0 12px 34px rgba(0,0,0,.08);
  }
  .service-cta h2{margin:0 0 6px; color:var(--ink)}
  .service-cta p{margin:0; max-width:60ch}

  .service-cta__form{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px;
    background:var(--muted);
  }
  label{display:block}
  label span{display:block; font-weight:800; color:var(--ink); margin:0 0 6px}
  input, textarea{
    width:100%;
    border-radius:14px;
    border:1px solid var(--line);
    padding:12px 12px;
    font:inherit;
    outline:none;
    background:#fff;
  }
  input:focus, textarea:focus{border-color:rgba(251,154,27,.7); box-shadow:0 0 0 4px rgba(251,154,27,.18)}
  .service-formrow{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
  textarea{resize:vertical}
  .service-fineprint{margin:10px 0 0; font-size:.9rem; opacity:.8}

  /* ===== HERO (wolf) ===== */
  .wolf-hero{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    padding:180px 16px 120px;
    background:#111;
  }
  .wolf-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("img/hero-scetion.webp");
    background-size:cover;
    background-position:left center;
    transform:scale(1.02);
    z-index:0;
  }
  .wolf-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1;
  }
  .wolf-hero__inner{
    position:relative;
    width: 100%;
    z-index:2;
    /* max-width:900px; */
    margin-top:40px;
  }

  @media (max-width: 768px) {

  /* Replace dark overlay with green gradient */
  .wolf-hero::after {
    background: linear-gradient(
      90deg,
      rgba(24,64,72,0.95) 0%,     /* strong green left */
      rgba(24,64,72,0.85) 25%,
      rgba(24,64,72,0.55) 45%,
      rgba(24,64,72,0.25) 65%,
      rgba(24,64,72,0.05) 80%,
      rgba(24,64,72,0) 100%      /* fully transparent right */
    );
  }

  /* Make background image align better for mobile */
  .wolf-hero::before {
    background-position: right center;
  }


}

  .wolf-hero__kicker{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    font-weight:800;
    color:#fff;
    margin:0 0 12px;
  }
  .wolf-hero h1{
    margin:0 0 10px;
    font-size: clamp(32px, 3.5vw, 54px);
    line-height:1.08;
    font-weight:800;
    color:#fff;
    letter-spacing:-.02em;
  }
  .wolf-hero h1 em{font-style:italic; font-weight:800;}
  .wolf-hero__sub{
    margin:0 auto 28px;
    text-align: center;
    /* max-width:780px; */
    font-size:16px;
    color:rgba(255,255,255,.9);
  }
  .wolf-hero__logo{margin:22px 0 20px; display:flex; justify-content:center;}
  .wolf-hero__logo img{width:170px; max-width:60vw; transform: rotate(-6deg);}
  .wolf-hero__bullets{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 0 6px;}
  .wolf-pill{
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.10);
    font-weight:800;
    font-size:.92rem;
    color:#fff;
  }

  .wolf-hero__actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .wolf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 28px;
    border-radius:6px;
    font-weight:700;
    font-size:14px;
    border:1px solid transparent;
    transition:.15s ease;
  }
  .wolf-btn--accent{background:var(--accent); color:#1a1a1a;}
  .wolf-btn--ghost{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff;}
  .wolf-btn--ghost:hover, .wolf-btn--accent:hover{transform:translateY(-1px);}

  .promo-banner__inner::after{
    content:"";
    position:absolute;
    inset:0;
    background:url("{{ asset('img/final.webp') }}") right center / cover no-repeat;
    z-index:0;
  }

  /* =========================
     ✅ TOC (AFTER HERO)
     ========================= */
  .toc-wrap{padding:16px 0 0; background:#fff;}
  .toc-card{
    width:100%;
    background:#fff;
    border:1px solid rgba(24,64,72,.18);
    border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.12);
    overflow:hidden;
  }
  .toc-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    background:linear-gradient(0deg, #f7fbfb, #fff);
    border-bottom:1px solid rgba(24,64,72,.12);
  }
  .toc-head h4{
    margin:0;
    font-size:15px;
    font-weight:900;
    color:var(--ink);
  }
  .toc-actions{display:flex; gap:8px; align-items:center;}
  .toc-iconbtn{
    width:34px; height:34px;
    border-radius:10px;
    border:1px solid rgba(24,64,72,.18);
    background:#fff;
    display:grid; place-items:center;
    cursor:pointer;
    transition:.15s ease;
  }
  .toc-iconbtn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.10)}
  .toc-iconbtn svg{width:16px; height:16px; fill:var(--ink); opacity:.9}

  .toc-body{
    padding:12px;
    transition:max-height .22s ease, padding .22s ease;

    overflow:auto;
  }
  .toc-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
  }
  .toc-item a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px;
    border-radius:14px;
    border:1px solid rgba(24,64,72,.12);
    background:#fff;
    transition:.15s ease;
  }
  .toc-item a:hover{background:#f2f7f7; border-color:rgba(24,64,72,.18);}
  .toc-badge{
    width:26px; height:26px;
    border-radius:999px;
    display:grid; place-items:center;
    background:rgba(251,154,27,.18);
    border:1px solid rgba(251,154,27,.35);
    font-size:12px;
    font-weight:900;
    color:#b76500;
    flex:0 0 auto;
  }
  .toc-text{font-weight:900; color:#0f3a40; font-size:14px; line-height:1.2;}
  .toc-card.is-collapsed .toc-body{
    max-height:0;
    padding:0 12px;
    overflow:hidden;
  }

  /* Mobile */
  @media (max-width: 980px){
    .service-grid--2{grid-template-columns:1fr}
    .service-emergency{grid-template-columns:1fr}
    .service-cta__inner{grid-template-columns:1fr}
    .service-formrow{grid-template-columns:1fr}
    .card-split{grid-template-columns:1fr}
    .card-split--reverse .card-split__text{order:1}
    .card-split--reverse .card-split__media{order:2}
    .wolf-hero{padding:120px 14px 90px; min-height:480px;}
    .wolf-hero__sub{font-size:14px}
  }


 h1, h2, h3, h4, h5, h6 {
  text-transform: capitalize !important;
}

.badges {
    color: white;
    white-space: nowrap;
}
  @media (max-width: 768px) {
 .wolf-hero h1{
    text-align: left !important;
    margin:0 0 10px;
    font-size: clamp(32px, 3.5vw, 54px);
    line-height:1.08;
    font-weight:800;
    color:#fff;
    letter-spacing:-.02em;
  }
  .wolf-hero__logo{
    text-align: left !important;
    justify-content: start !important;
  }
  .wolf-hero__sub{
    margin: 0 !important;
    text-align: left !important;
  }

  }

  @media (max-width: 768px) {
    .hero-trust {
        display: block !important;
        margin-top: 18px;
        color: #fff;
    }
    .wolf-hero__logo img {
        transform: rotate(0deg) !important;
    }
}

@media (max-width: 768px) {
    .hero-trust .rating {
        font-size: 14px;
        font-weight: 600;
    }
}
@media (max-width: 768px) {
    .hero-trust .rating {
        font-size: 14px;
        font-weight: 600;
    }
}

@media (max-width: 768px) {
    .hero-first-block {
        padding: 20px 0;
        border-bottom: 1px solid rgb(96 122 126 / 98%) !important;
        border-top: 1px solid rgb(96 122 126 / 98%)  !important;
        /* width: 70vw; */
        text-align: start;
    }
}

@media (max-width: 768px) {
    .hero-trust .badges {
        margin-top: 10px;
        font-size: 13px;
    }

    .hero-first-block {
        padding: 20px 0;
        border-bottom: 1px solid rgb(96 122 126 / 98%) !important;
        border-top: 1px solid rgb(96 122 126 / 98%) !important;
        width: 70vw !important;
        text-align: start;
    }

        .wolf-btn-outline {
            margin: auto !important;
        width: auto !important;
        border: 1px solid rgba(255, 255, 255, .5) !important;
        color: #fff !important;
        background: transparent !important;
        font-size: 14px !important;
        padding: 14px !important;
        border-radius: 6px !important;
    }
    /* .hero-first-block{

    } */
}

.wolf-hero .wolf-hero__inner::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120px;
    width: 303vw;
    height: 2100px;
    background: none !important;
    clip-path: none !important;
    z-index: -1;
    opacity: .9;
}
.wolf-hero h1 span{
font-size: 20px !important;
font-weight: normal !important;
}

@media (max-width: 700px) {
    .wolf-hero {
        padding: 75px 14px 86px !important;
        min-height: 480px;
    }
}

@media (max-width: 768px) {
    .wolf-hero__logo {
        margin: 22px 0 !important;
        justify-content: start;
    }
    .wolf-btn-outline{
    background-color: transparent !important;
}
.wolf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
    transition: .15s ease;
}
 .service-media__box{
    height:418px !important;       /* ✅ match text height */

  }
}

.service-emergency__text  p a{
    color:#EE7C20 !important;
}

.card-box  p a{
    color:#EE7C20 !important;
}

.service-split__text   p a{
    color:#EE7C20 !important;
}

.service-section__head   p a{
    color:#EE7C20 !important;
}

.inline-link  a{
    color:#EE7C20 !important;

}