/* =========================================================
           VARIABLES
        ========================================================= */

        :root {
            --orange: #f2660d;
            --orange-text: #b64c0a;
            --orange-button: #c6530b;
            --orange-button-hover: #b84d0a;

            --slate-900: #17202a;
            --slate-800: #202b36;
            --slate-700: #2d3a46;
            --slate-600: #43515d;
            --slate-500: #64727e;
            --slate-400: #8b98a3;
            --slate-300: #b8c1c8;
            --slate-200: #dce1e5;
            --slate-100: #eef1f3;

            --background: #ffffff;
            --card: #eef1f3;
            --photo-background: #dce1e5;
            --text: #17202a;
            --text-muted: #5f6d79;
            --border: #dce1e5;
            --input-border: #7d8a95;

            --shadow: 0 10px 30px rgba(23, 32, 42, 0.08);

            --radius: 12px;
            --card-padding: 32px;
            --grid-gap: 24px;
            --nav-height: 76px;
            --transition: 0.25s ease;
        }


        /* =========================================================
           DARK MODE
        ========================================================= */


    [data-theme="dark"] {
        --background: #17202a;
        --card: #202b36;
        --photo-background: #2b3946;
        --text: #eef1f3;
        --text-muted: #b8c1c8;
        --border: #43515d;
        --input-border: #6b7a87;
        --orange-text: #f2660d;

        --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }


        /* =========================================================
           RESET
        ========================================================= */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


        html {
            scroll-behavior: smooth;
            scroll-padding-top: var(--nav-height);
        }


        body {
            min-height: 100vh;
            font-family: Arial, Helvetica, sans-serif;
            background: var(--background);
            color: var(--text);
            line-height: 1.6;
            transition:
                background var(--transition),
                color var(--transition);
        }


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


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


        button,
        input,
        textarea,
        select {
            font: inherit;
        }


        button,
        a {
            -webkit-tap-highlight-color: transparent;
        }


        html.theme-transition *,
        html.theme-transition *::before,
        html.theme-transition *::after {
            transition:
                background-color var(--transition),
                color var(--transition),
                border-color var(--transition),
                box-shadow var(--transition),
                fill var(--transition),
                stroke var(--transition) !important;
        }


        :focus-visible {
            outline: 3px solid var(--orange-text);
            outline-offset: 3px;
        }


        /* =========================================================
           ACCESSIBILITY
        ========================================================= */

        .skip-link {
            position: fixed;
            top: -100px;
            left: 24px;
            z-index: 2000;
            padding: 12px 16px;
            background: var(--orange-button);
            color: #ffffff;
            border-radius: 0 0 8px 8px;
            font-weight: 700;
            transition: top 0.2s ease;
        }


        .skip-link:focus {
            top: 0;
        }


        /* =========================================================
           GLOBAL LAYOUT
        ========================================================= */

        .container {
            width: min(1180px, 92%);
            margin: 0 auto;
        }


        section {
            padding: 72px 0;
        }


        .section-heading {
            max-width: 720px;
            margin: 0 auto 48px;
            text-align: center;
        }


        .section-heading h1,
        .section-heading h2 {
            margin-bottom: 16px;
            color: var(--orange-text);
            font-size: clamp(2rem, 4vw, 3rem);
            line-height: 1.15;
        }


        .section-heading p {
            color: var(--text-muted);
            font-size: 1.05rem;
        }


        /* =========================================================
           HEADER
        ========================================================= */

        header {
            position: sticky;
            top: 0;
            z-index: 1000;
            width: 100%;
            height: var(--nav-height);
            background: var(--background);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 4px 15px rgba(23, 32, 42, 0.08);
            transition:
                background var(--transition),
                border-color var(--transition);
        }


        .nav-container {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: 0 24px;
            gap: 32px;
        }


        /* =========================================================
           LOGO
        ========================================================= */

        .logo {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            gap: 12px;
        }


        .logo img {
            width: 52px;
            height: 52px;
            object-fit: contain;
        }


        .logo-text {
            color: var(--text);
            font-size: 1.15rem;
            font-weight: 700;
            line-height: 1.25;
            white-space: nowrap;
        }


        .logo-text span {
            display: block;
        }


        /* =========================================================
           NAVIGATION
        ========================================================= */

        .nav-content {
            display: flex;
            align-items: center;
            margin-left: auto;
        }


        .nav-links {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 24px;
            list-style: none;
        }


        .nav-links a:not(.nav-contact) {
            position: relative;
            padding: 8px 0;
            color: var(--text);
            font-weight: 600;
            transition: color 0.2s ease;
        }


        .nav-links a:not(.nav-contact)::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: var(--orange);
            transition: width 0.2s ease;
        }


        .nav-links a:not(.nav-contact):hover {
            color: var(--orange-text);
        }


        .nav-links a:not(.nav-contact):hover::after {
            width: 100%;
        }


        /* =========================================================
           BUTTONS
        ========================================================= */

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            transition:
                background 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
        }


        .btn-primary {
            background: var(--orange-button);
            color: #ffffff;
            border: 1px solid var(--orange-button);
        }


        .btn-primary:hover {
            background: var(--orange-button-hover);
            border-color: var(--orange-button-hover);
        }


        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(5px);
        }


        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
        }


        .nav-phone {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            color: var(--text-muted) !important;
            font-weight: 400 !important;
        }

        .nav-phone svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }


        .nav-contact {
            color: #ffffff !important;
            padding: 11px 18px !important;
            white-space: nowrap;
        }


        /* =========================================================
           THEME TOGGLE
        ========================================================= */

        .theme-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1.1rem;
            cursor: pointer;
            transition:
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;
        }


        .theme-toggle:hover {
            background: var(--orange-button);
            color: #ffffff;
            border-color: var(--orange-button);
        }


        /* =========================================================
           MOBILE MENU
        ========================================================= */

        .menu-toggle {
            display: none;
            margin-left: auto;
            background: transparent;
            border: 0;
            color: var(--text);
            font-size: 1.8rem;
            line-height: 1;
            cursor: pointer;
        }


        /* =========================================================
           HERO
        ========================================================= */

        .hero {
            position: relative;
            display: flex;
            align-items: center;
            min-height: calc(100vh - var(--nav-height));
            overflow: hidden;
        }


        .slides {
            position: absolute;
            inset: 0;
        }


        .slide {
            position: absolute;
            inset: 0;
            background-position: center;
            background-size: cover;
            background-image: var(--bg);
            opacity: 0;
            transition: opacity 1s ease;
        }


        /* Light theme: light illustrations (falls back to the dark one until loaded). */
        [data-theme="light"] .slide {
            background-image: var(--bg-light, var(--bg));
        }


        .slide:nth-child(1) {
            --bg: url("../assets/images/hero-remote.svg?v=2");
            --bg-light: url("../assets/images/hero-remote-light.svg");
        }


        .slide.active {
            opacity: 1;
        }


        /* The illustrations sit centre-right; keep them in view on narrow screens. */
        @media (max-width: 768px) {
            .slide {
                background-position: 75% center;
            }
        }


        .slide::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    90deg,
                    rgba(23, 32, 42, 0.9),
                    rgba(23, 32, 42, 0.6),
                    rgba(23, 32, 42, 0.3)
                );
        }


        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 750px;
            color: #ffffff;
        }


        .hero-content h1 {
            margin-bottom: 24px;
            font-size: clamp(2.2rem, 5vw, 4.4rem);
            line-height: 1;
        }


        .hero-content h1 span {
            display: inline-block;
            color: var(--orange);
            text-wrap: balance;
        }


        .hero-content p {
            max-width: 750px;
            margin-bottom: 32px;
            color: #eef1f3;
            font-size: clamp(1.05rem, 2vw, 1.3rem);
        }


        .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }


        /* =========================================================
           SLIDESHOW CONTROLS
        ========================================================= */

        .slide-controls {
            position: absolute;
            bottom: 32px;
            left: 50%;
            z-index: 5;
            display: flex;
            gap: 16px;
            transform: translateX(-50%);
        }


        .slide-dot {
            width: 11px;
            height: 11px;
            padding: 0;
            background: transparent;
            border: 1px solid #ffffff;
            border-radius: 50%;
            cursor: pointer;
        }


        .slide-dot.active {
            background: var(--orange);
            border-color: var(--orange);
        }


        .slideshow-control {
            position: absolute;
            right: 24px;
            bottom: 24px;
            z-index: 5;
            width: 42px;
            height: 42px;
        }


        .slideshow-progress {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }


        .slideshow-progress-track,
        .slideshow-progress-value {
            fill: none;
            stroke-width: 4;
        }


        .slideshow-progress-track {
            stroke: rgba(255, 255, 255, 0.35);
        }


        .slideshow-progress-value {
            stroke: var(--orange);
            stroke-linecap: round;
            stroke-dasharray: 106.81;
            stroke-dashoffset: 106.81;
            transition: stroke-dashoffset 0.1s linear;
        }


        .slideshow-action {
            position: absolute;
            inset: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: transparent;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            font-size: 0.7rem;
            font-weight: 700;
            opacity: 0;
            cursor: pointer;
            transition: opacity 0.2s ease, background 0.2s ease;
        }


        .slideshow-control:hover .slideshow-action {
            opacity: 1;
        }


        .slideshow-action:hover {
            background: transparent;
        }


        @media (prefers-reduced-motion: reduce) {

            .slideshow-control {
                display: none;
            }

        }


        /* =========================================================
           CARDS / GRIDS
        ========================================================= */

        .services,
        .why,
        .reviews,
        .contact {
            background: var(--card);
        }


        /* While the reviews section is hidden, the founder and FAQ sections
           sit next to each other with the same background; keep them apart. */
        .reviews[hidden] + .faq {
            background: var(--card);
        }

        .reviews[hidden] + .faq .faq-item {
            background: var(--background);
        }

        .reviews[hidden] ~ .contact {
            background: var(--background);
        }

        .reviews[hidden] ~ .contact .contact-form {
            background: var(--card);
        }


        .services-grid,
        .pricing-grid,
        .why-grid,
        .reviews-grid {
            display: grid;
            gap: var(--grid-gap);
        }


        .pricing-grid {
            grid-template-columns: repeat(3, 1fr);
            max-width: 1000px;
            margin: 0 auto;
        }


        .services-grid,
        .why-grid,
        .reviews-grid {
            grid-template-columns: repeat(3, 1fr);
        }


        .service-card,
        .pricing-card,
        .why-card,
        .review-card {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }


        /* =========================================================
           SERVICES
        ========================================================= */

        .service-card {
            padding: var(--card-padding);
            background: var(--background);
        }


        .service-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            margin-bottom: 24px;
            background: rgba(242, 102, 13, 0.12);
            border-radius: 10px;
            color: var(--orange-text);
        }


        .service-icon svg,
        .why-card-icon svg {
            width: 28px;
            height: 28px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.75;
            stroke-linecap: round;
            stroke-linejoin: round;
        }


        .service-card h3 {
            margin-bottom: 16px;
            font-size: 1.3rem;
        }


        .service-card ul {
            list-style: none;
        }


        .service-card li {
            position: relative;
            margin-bottom: 8px;
            padding-left: 24px;
            color: var(--text-muted);
        }


        .service-card li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--orange-text);
            font-weight: 700;
        }


        /* =========================================================
           PRICING
        ========================================================= */

        .pricing-card {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: var(--card-padding) 24px;
            background: var(--card);
        }


        .pricing-card.popular-card {
            border: 2px solid var(--orange);
        }


        .pricing-card .btn {
            width: 100%;
            min-height: 56px;
            margin-top: auto;
            text-align: center;
        }


        .popular-banner {
            position: absolute;
            top: -14px;
            left: 50%;
            padding: 4px 16px;
            background: var(--orange-button);
            color: #ffffff;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            white-space: nowrap;
            transform: translateX(-50%);
        }


        .pricing-card h3 {
            margin-bottom: 10px;
            font-size: 1.4rem;
            line-height: 1.2;
        }


        .price {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 8px;
            min-height: 3.1rem;
            margin-bottom: 24px;
            font-size: 2.4rem;
            font-weight: 800;
            line-height: 1.1;
        }


        .price span {
            white-space: nowrap;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 400;
        }


        .pricing-minimum-note {
            display: inline-block;
            margin-bottom: 12px;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-style: italic;
        }


        .pricing-card ul {
            margin-bottom: 24px;
            list-style: none;
        }


        .pricing-description {
            min-height: 4.8rem;
            margin-bottom: 24px;
            color: var(--text-muted);
        }


        .pricing-card li {
            margin-bottom: 10px;
            color: var(--text-muted);
        }


        .pricing-card li::before {
            content: "✓";
            margin-right: 8px;
            color: var(--orange-text);
            font-weight: 700;
        }


        .pricing-note {
            max-width: 760px;
            margin: 28px auto 0;
            color: var(--text-muted);
            text-align: center;
        }


        .pricing-note strong {
            display: block;
            margin-bottom: 8px;
            color: var(--text);
            font-size: 1.15rem;
        }


        .pricing-disclaimer {
            max-width: 960px;
            margin: 40px auto 0;
            text-wrap: balance;
            color: var(--text-muted);
            font-size: 0.9rem;
            text-align: center;
        }


        /* =========================================================
           WHY WORK WITH US
        ========================================================= */

        .why-card {
            padding: var(--card-padding);
            background: var(--background);
            text-align: center;
        }


        .why-card-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            margin: 0 auto 16px;
            background: rgba(242, 102, 13, 0.12);
            border-radius: 10px;
            color: var(--orange-text);
        }


        .why-card h3 {
            margin-bottom: 12px;
        }


        .why-card p {
            color: var(--text-muted);
        }


        /* =========================================================
           TEAM
        ========================================================= */

        .team {
            background: var(--background);
        }


        .team-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            max-width: 950px;
            margin: 0 auto;
            gap: var(--grid-gap);
        }


        .team-card {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            overflow: hidden;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }


        .team-card:only-child {
            grid-column: 1 / -1;
            width: 100%;
            max-width: 620px;
            justify-self: center;
        }


        .team-photo {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            aspect-ratio: 3 / 4;
            padding: 12px;
            background: var(--card);
        }


        .team-photo img {
            width: 100%;
            height: 100%;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: linear-gradient(160deg, rgba(242, 102, 13, 0.45), var(--photo-background) 65%);
            object-fit: cover;
        }


        .team-info {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            aspect-ratio: 3 / 4;
            padding: var(--card-padding);
            text-align: left;
        }


        .team-info h3 {
            margin-bottom: 8px;
            font-size: 1.8rem;
            line-height: 1.15;
        }


        .team-role {
            display: block;
            margin-bottom: 16px;
            color: var(--orange-text);
            font-weight: 700;
        }


        .team-info p {
            max-width: 34ch;
            color: var(--text-muted);
        }


        /* =========================================================
           REVIEWS
        ========================================================= */

        .review-card {
            padding: var(--card-padding);
            background: var(--background);
        }


        .stars {
            margin-bottom: 16px;
            color: var(--orange-text);
            font-size: 1.2rem;
        }


        .review-author {
            margin-bottom: 8px;
            font-weight: 700;
        }


        .review-card p {
            margin-bottom: 16px;
            color: var(--text-muted);
        }


        .reviews-empty {
            max-width: 480px;
            margin: 0 auto;
            padding: 40px var(--card-padding);
            text-align: center;
            background: var(--card);
            border: 1px dashed var(--border);
            border-radius: var(--radius);
        }


        .reviews-empty p {
            margin: 0;
            color: var(--text-muted);
        }


        /* =========================================================
           FAQ
        ========================================================= */

        .faq-list {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
            max-width: 820px;
            margin: 0 auto;
        }


        .faq-item {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 4px 24px;
        }


        .faq-item summary {
            padding: 16px 0;
            font-weight: 700;
            font-size: 1.05rem;
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }


        .faq-item summary::-webkit-details-marker {
            display: none;
        }


        .faq-item summary::after {
            content: "+";
            font-size: 1.4rem;
            font-weight: 400;
            color: var(--orange-text);
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }


        .faq-item[open] summary::after {
            transform: rotate(45deg);
        }


        .faq-item p {
            padding-bottom: 16px;
            margin: 0;
            color: var(--text-muted);
        }


        /* =========================================================
           CONTACT
        ========================================================= */

        .contact-grid {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            align-items: start;
            gap: 48px;
        }


        .contact-info h3 {
            margin-bottom: 16px;
            font-size: 1.5rem;
        }


        .contact-info > p {
            margin-bottom: 24px;
            color: var(--text-muted);
        }


        .contact-details {
            display: grid;
            gap: 16px;
        }


        .contact-detail {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }


        .contact-detail-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 1.75rem;
            height: 1.75rem;
            color: var(--orange-text);
        }


        .contact-detail-icon svg {
            width: 1.25rem;
            height: 1.25rem;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }


        .contact-detail strong {
            display: block;
        }


        .contact-detail span {
            color: var(--text-muted);
        }


        .contact-detail a {
            color: var(--text-muted);
            transition: color 0.2s ease;
        }


        .contact-detail a:hover {
            color: var(--orange-text);
        }


        .contact-form {
            padding: var(--card-padding);
            background: var(--background);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }


        .form-group {
            margin-bottom: 24px;
        }


        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
        }


        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 16px;
        }


        .form-optional {
            color: var(--text-muted);
            font-weight: 400;
        }


        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px 16px;
            background: var(--card);
            color: var(--text);
            border: 1px solid var(--input-border);
            border-radius: 8px;
            outline: none;
            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background var(--transition),
                color var(--transition);
        }


        .form-group ::placeholder {
            color: var(--text-muted);
            opacity: 1;
        }


        .form-group textarea {
            min-height: 140px;
            resize: vertical;
        }


        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--orange-text);
            box-shadow: 0 0 0 3px rgba(242, 102, 13, 0.15);
        }


        .form-note {
            margin-bottom: 16px;
            color: var(--text-muted);
            font-size: 0.85rem;
        }


        .form-note a {
            color: var(--orange-text);
            font-weight: 700;
        }


        .form-note a:hover {
            text-decoration: underline;
        }


        .form-submit {
            border: 0;
        }


        /* Cloudflare Turnstile: full width like the fields, room reserved so the button doesn't jump */
        .form-turnstile {
            width: 100%;
            min-height: 65px;
            margin: 0 0 20px;
        }


        .form-message {
            display: none;
            margin-top: 16px;
            padding: 12px 16px;
            background: rgba(242, 102, 13, 0.12);
            color: var(--text);
            border-left: 4px solid var(--orange);
            border-radius: 6px;
        }


        .form-message.show {
            display: block;
        }


        .form-message.form-message--error {
            background: rgba(200, 45, 45, 0.12);
            border-left-color: #c82d2d;
        }


        /* =========================================================
           POLICY / LEGAL PAGES
        ========================================================= */

        .policy-nav {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-left: auto;
        }


        .policy-back-link {
            font-weight: 600;
            white-space: nowrap;
            transition: color 0.2s ease;
        }


        .policy-back-link:hover {
            color: var(--orange-text);
        }


        .policy-content h2,
        .policy-content h3 {
            margin: 40px 0 12px;
            color: var(--orange-text);
            font-size: 1.25rem;
        }


        .policy-content p {
            margin-bottom: 16px;
            color: var(--text-muted);
        }


        .policy-content ul {
            margin: 0 0 16px;
            padding-left: 24px;
            color: var(--text-muted);
        }


        .policy-content li {
            margin-bottom: 8px;
        }


        .policy-content a {
            color: var(--orange-text);
            font-weight: 700;
        }


        .policy-content a:hover {
            text-decoration: underline;
        }


        /* 404 page */
        .not-found {
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 60px 20px;
        }


        .not-found h1 {
            font-size: 5rem;
            color: var(--orange);
            margin-bottom: 10px;
        }


        .not-found p {
            color: var(--text-muted);
            margin-bottom: 25px;
            max-width: 40ch;
        }


        .policy-container {
            max-width: 820px;
        }


        .policy-heading {
            margin-bottom: 30px;
        }


        .form-honeypot {
            display: none;
        }


        .policy-content .cancellation-form {
            margin: 0 0 16px;
            padding: 20px 24px;
            border-left: 4px solid var(--orange);
            border-radius: var(--radius);
            background: var(--card);
            color: var(--text-muted);
        }


        /* =========================================================
           FOOTER
        ========================================================= */

        footer {
            width: 100%;
            padding: 24px;
            background: var(--background);
            color: var(--text-muted);
            border-top: 1px solid var(--border);
        }


        .footer-container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }


        .footer-text {
            color: var(--text-muted);
            font-size: 0.9rem;
            text-align: center;
        }


        .company-number {
            display: block;
            margin-top: 4px;
            font-size: 0.8rem;
        }


        .privacy-link {
            display: inline-block;
            margin-top: 12px;
            color: var(--orange-text);
            font-weight: 700;
        }


        .privacy-link + .privacy-link {
            margin-left: 16px;
        }


        .privacy-link:hover {
            text-decoration: underline;
        }


        /* =========================================================
           NARROW DESKTOP
        ========================================================= */

        @media (min-width: 1001px) and (max-width: 1180px) {

            .pricing-card {
                padding: var(--card-padding) 16px;
            }


            .price {
                font-size: 1.8rem;
            }


            .pricing-card .btn {
                padding-left: 12px;
                padding-right: 12px;
            }

        }


        /* =========================================================
           TABLET
        ========================================================= */

        @media (max-width: 1000px) {

            .nav-links {
                gap: 16px;
            }


            .faq-list {
                grid-template-columns: 1fr;
                max-width: 760px;
            }


            .services-grid,
            .why-grid,
            .reviews-grid {
                grid-template-columns: repeat(2, 1fr);
            }


            .reviews-grid .review-card:last-child {
                grid-column: 1 / -1;
                width: min(100%, calc((100% - var(--grid-gap)) / 2));
                justify-self: center;
            }


            .pricing-grid {
                grid-template-columns: repeat(2, 1fr);
            }


            .contact-grid {
                grid-template-columns: 1fr;
            }


            .team-grid {
                grid-template-columns: 1fr;
            }

        }


        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 900px) {

            .nav-container {
                padding: 0 16px;
            }


            .menu-toggle {
                display: block;
            }


            .nav-content {
                position: absolute;
                top: var(--nav-height);
                left: 0;
                right: 0;
                display: none;
                margin: 0;
                background: var(--background);
                border-bottom: 1px solid var(--border);
                box-shadow: 0 10px 20px rgba(23, 32, 42, 0.12);
            }


            .nav-content.open {
                display: block;
            }


            .nav-links {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                width: 100%;
            }


            .nav-links li {
                width: 100%;
            }


            .nav-links a:not(.nav-contact) {
                display: block;
                padding: 16px 5%;
                border-bottom: 1px solid var(--border);
            }


            .nav-links a:not(.nav-contact)::after {
                display: none;
            }


            .theme-toggle {
                width: calc(100% - 10%);
                height: 44px;
                margin: 12px 5%;
            }


            .nav-contact {
                display: block;
                margin: 12px 5% 16px;
                text-align: center;
                border-radius: 8px;
            }

        }


        @media (max-width: 768px) {

            :root {
                --nav-height: 68px;
            }


            section {
                padding: 48px 0;
            }


            .logo img {
                width: 46px;
                height: 46px;
            }


            .logo-text {
                font-size: 1rem;
            }


            .services-grid,
            .pricing-grid,
            .why-grid,
            .reviews-grid {
                grid-template-columns: 1fr;
            }


            .reviews-grid .review-card:last-child {
                grid-column: auto;
                width: 100%;
            }


            .hero-content {
                padding: 32px 0;
            }


            /* The text covers the whole width on phones, so darken the
               illustration more to keep the text easy to read. */
            .slide::after {
                background: rgba(23, 32, 42, 0.82);
            }


            .hero-buttons {
                gap: 12px;
            }


            .team-card {
                grid-template-columns: 1fr;
            }


            .team-photo {
                width: 100%;
                min-width: 0;
                min-height: 0;
            }


            .team-info {
                width: 100%;
                aspect-ratio: auto;
                min-height: 260px;
            }


            .team-info p {
                max-width: none;
            }


            footer {
                padding: 24px 16px;
            }

        }


        /* =========================================================
           SMALL MOBILE
        ========================================================= */

        @media (max-width: 500px) {

            .hero-buttons {
                flex-direction: column;
            }


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


            .hero-buttons .btn {
                width: 100%;
            }


            .contact-form {
                padding: 24px;
            }


            .logo-text {
                font-size: 0.9rem;
            }

        }


        /* =========================================================
           REDUCED MOTION
        ========================================================= */

        @media (prefers-reduced-motion: reduce) {

            html {
                scroll-behavior: auto;
            }


            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

        }


/* =========================================================
   Pricing badges, FAQ groups, small print, form hint, footer contacts
========================================================= */

        .pricing-card {
            position: relative;
        }

        .pricing-when {
            display: block;
            margin: 0 0 10px;
            white-space: nowrap;
            color: var(--orange-text);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .faq-group {
            grid-column: 1 / -1;
        }

        .urgent-hint {
            margin: -12px 0 24px;
        }

        .pricing-small {
            max-width: 760px;
            margin: 32px auto 0;
            color: var(--text-muted);
            font-size: 0.9rem;
            text-align: center;
        }

        .faq-group {
            margin: 24px 0 0;
            font-size: 1rem;
            color: var(--orange);
            letter-spacing: 0.02em;
        }

        .faq-group:first-child {
            margin-top: 0;
        }

        .form-hint {
            display: block;
            margin-top: 6px;
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        /* A tick box with its label beside it (the contact form's "sorted today"). */
        .form-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 24px;
        }

        .form-check input {
            flex: none;
            width: 18px;
            height: 18px;
            margin-top: 2px;
            accent-color: var(--orange-text);
        }

        .form-check label {
            font-weight: 700;
            cursor: pointer;
        }

        .form-check .form-hint {
            margin-top: 2px;
            font-weight: 400;
        }

        .footer-contact {
            display: block;
            margin-bottom: 8px;
        }

        .footer-contact a {
            color: inherit;
        }

        .service-note {
            margin-top: 12px;
            color: var(--orange-text);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .form-noscript {
            margin: 0 0 16px;
            padding: 12px 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
        }

        /* =========================================================
           REMOTE SUPPORT PAGE
        ========================================================= */

        .rs-hero {
            padding: 72px 0;
        }

        .rs-container {
            max-width: 980px;
        }

        .rs-heading {
            margin-bottom: 40px;
        }

        .rs-download {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 20px 32px;
            max-width: 820px;
            margin: 0 auto;
            padding: var(--card-padding);
            background: var(--card);
            border: 2px solid var(--orange);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .rs-download-main {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .rs-icon {
            flex-shrink: 0;
            margin-bottom: 0;
        }

        .rs-download h2 {
            font-size: 1.5rem;
            line-height: 1.2;
        }

        .rs-meta {
            margin-top: 4px;
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .rs-button {
            min-height: 56px;
            padding: 14px 32px;
            font-size: 1.1rem;
        }

        .rs-alt {
            grid-column: 1 / -1;
            list-style: none;
            padding-top: 18px;
            border-top: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .rs-alt li + li {
            margin-top: 6px;
        }

        .rs-alt a,
        .rs-section .section-heading a {
            color: var(--orange-text);
            font-weight: 700;
        }

        .rs-alt a:hover,
        .rs-section .section-heading a:hover {
            text-decoration: underline;
        }

        .rs-warning {
            max-width: 820px;
            margin: 40px auto 0;
            padding: 16px 20px;
            background: rgba(242, 102, 13, 0.12);
            border-left: 4px solid var(--orange);
            border-radius: 6px;
            color: var(--text);
        }

        .rs-section {
            padding: 56px 0;
        }

        .rs-alt-bg {
            background: var(--card);
        }

        .rs-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--grid-gap);
            list-style: none;
        }

        .rs-step {
            padding: 24px;
            background: var(--background);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .rs-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin-bottom: 16px;
            background: var(--orange-button);
            color: #ffffff;
            border-radius: 50%;
            font-weight: 800;
        }

        .rs-step h3 {
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .rs-step p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .rs-checks {
            max-width: 820px;
            margin: 0 auto;
        }

        .rs-checks li {
            margin-bottom: 12px;
        }

        .rs-checks li strong {
            color: var(--text);
        }

        .rs-help {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            max-width: 820px;
            margin: 0 auto;
            padding: var(--card-padding);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .rs-help h2 {
            margin-bottom: 4px;
            font-size: 1.4rem;
        }

        .rs-help p {
            color: var(--text-muted);
        }

        .rs-help-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .rs-btn-outline {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
        }

        .rs-btn-outline:hover {
            border-color: var(--orange);
            color: var(--orange-text);
        }

        @media (max-width: 900px) {
            .rs-steps {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .rs-hero {
                padding: 48px 0;
            }

            .rs-download {
                grid-template-columns: 1fr;
                padding: 24px 20px;
            }

            .rs-button {
                width: 100%;
            }

            .rs-steps {
                grid-template-columns: 1fr;
            }

            .rs-help {
                flex-direction: column;
                align-items: flex-start;
            }

            .rs-help-buttons,
            .rs-help-buttons .btn {
                width: 100%;
            }
        }

        /* =========================================================
           SERVICES: FIXED-PRICE LISTS ON THE CARDS
        ========================================================= */

        .svc-intro {
            margin: -8px 0 14px;
            color: var(--text-muted);
            font-size: 0.92rem;
        }

        .service-card .svc-list li {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 12px;
            padding: 7px 0 7px 24px;
            margin-bottom: 0;
            border-bottom: 1px solid var(--border);
        }

        .service-card .svc-list li:last-child {
            border-bottom: none;
        }

        .service-card .svc-list li::before {
            top: 7px;
        }

        .svc-name {
            color: var(--text);
        }

        .svc-note {
            display: block;
            color: var(--text-muted);
            font-size: 0.8rem;
        }

        .svc-price {
            flex-shrink: 0;
            color: var(--orange-text);
            font-weight: 800;
            white-space: nowrap;
        }

        .section-heading a {
            color: var(--orange-text);
            font-weight: 700;
        }

        .service-card {
            display: flex;
            flex-direction: column;
        }

        .service-card .svc-list {
            margin-bottom: 24px;
        }

        .service-card .btn {
            width: 100%;
            min-height: 56px;
            margin-top: auto;
            text-align: center;
        }

        /* =========================================================
           FIXED-COST PACKAGES AND PRICE LIST
        ========================================================= */

        .pkg-price {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: -4px 0 10px;
            color: var(--orange-text);
            font-size: 1.9rem;
            font-weight: 800;
        }

        .pkg-from {
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 400;
        }

        .pkg-save {
            padding: 3px 10px;
            border-radius: 999px;
            background: rgba(26, 127, 55, 0.14);
            color: #1a7f37;
            font-size: 0.8rem;
            font-weight: 700;
        }

        [data-theme="dark"] .pkg-save {
            background: rgba(74, 194, 107, 0.16);
            color: #4ac26b;
        }

        .service-card .pkg-list {
            margin-bottom: 24px;
        }

        .service-card .pkg-list li {
            margin-bottom: 6px;
            font-size: 0.95rem;
        }

        .pkg-more {
            max-width: 820px;
            margin: 36px auto 0;
            text-align: center;
            color: var(--text-muted);
        }

        .pkg-more p + p {
            margin-top: 10px;
        }

        .pkg-more a {
            color: var(--orange-text);
            font-weight: 700;
        }

        .pkg-more strong {
            color: var(--text);
        }

        .pkg-business {
            font-size: 0.92rem;
        }

        .pl-group {
            max-width: 820px;
            margin: 40px auto 0;
            padding: 0;
        }

        .pl-group h2 {
            margin-bottom: 12px;
            color: var(--orange-text);
            font-size: 1.35rem;
        }

        .pl-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .pl-table th,
        .pl-table td {
            padding: 11px 16px;
            border-bottom: 1px solid var(--border);
            text-align: left;
            vertical-align: top;
        }

        .pl-table tr:last-child th,
        .pl-table tr:last-child td {
            border-bottom: none;
        }

        .pl-table th {
            font-weight: 600;
        }

        .pl-table td {
            width: 9.5rem;
            color: var(--orange-text);
            font-weight: 800;
            text-align: right;
            white-space: nowrap;
        }

        .pl-parts {
            display: block;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 400;
        }

        .pl-save {
            display: block;
            color: #1a7f37;
            font-size: 0.8rem;
            font-weight: 700;
        }

        [data-theme="dark"] .pl-save {
            color: #4ac26b;
        }

        .pl-text {
            color: var(--text-muted);
        }

        .pl-text a,
        .rs-warning a {
            color: var(--orange-text);
            font-weight: 700;
        }

        .pl-cta {
            margin-top: 40px;
        }

        @media (max-width: 640px) {
            .pl-table th,
            .pl-table td {
                padding: 10px 12px;
            }

            .pl-table td {
                width: auto;
            }
        }

        /* price list: collapsible groups */

        .pl-fold summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 18px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            cursor: pointer;
            list-style: none;
        }

        .pl-fold summary::-webkit-details-marker {
            display: none;
        }

        .pl-fold summary h2 {
            margin: 0;
        }

        .pl-fold summary::after {
            content: "+";
            color: var(--orange-text);
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
        }

        .pl-fold[open] summary::after {
            content: "\2212";
        }

        .pl-count {
            margin-left: auto;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .pl-fold[open] summary {
            margin-bottom: 12px;
        }

        .pl-fold + .pl-fold {
            margin-top: 14px;
        }

        /* packages: price list call-out */

        .pkg-more {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px 24px;
            max-width: 820px;
            margin: 40px auto 0;
            padding: 22px 26px;
            background: var(--card);
            border: 2px solid var(--orange);
            border-radius: var(--radius);
            text-align: left;
        }

        .pkg-more strong {
            display: block;
            margin-bottom: 4px;
            color: var(--text);
            font-size: 1.15rem;
        }

        .pkg-more span {
            color: var(--text-muted);
        }

        .pkg-more .btn {
            flex-shrink: 0;
            color: #ffffff;
        }

        @media (max-width: 640px) {
            .pkg-more {
                flex-direction: column;
                align-items: stretch;
                text-align: center;
            }
        }

        /* =========================================================
           SPACING: one width for 3-card rows, one rhythm inside cards
        ========================================================= */

        .pricing-grid {
            max-width: none;
        }

        .pricing-disclaimer {
            max-width: 820px;
        }

        .pricing-card .price {
            margin-bottom: 10px;
        }

        .pricing-minimum-note {
            display: block;
            margin: 0 0 12px;
        }

        .pkg-price {
            margin: 0 0 12px;
        }

        .service-card .svc-intro {
            margin: 0 0 12px;
        }

        .service-card .pkg-list,
        .pricing-description {
            margin-bottom: 24px;
        }

        /* price list call-out: same space above as the section has below */

        .pkg-more {
            margin-top: 72px;
        }

        @media (max-width: 768px) {
            .pkg-more {
                margin-top: 48px;
            }
        }

        /* headings: trim the empty space above the letters so the visible gap
           at the top of a section matches the gap at the bottom */

        .section-heading h2,
        .rs-heading h1,
        .policy-heading h1 {
            margin-top: -0.22em;
        }

        /* the hourly section ends in a line of small text: remove the space
           under its last line so the bottom gap matches the other sections */

        .pricing-disclaimer {
            margin-bottom: -0.5em;
        }

        /* =========================================================
           ONE GAP BETWEEN MAJOR ELEMENTS
           Section edge -> heading -> content -> section edge are all
           the same distance, on every page.
        ========================================================= */

        :root {
            --gap: 72px;
        }

        @media (max-width: 768px) {
            :root {
                --gap: 48px;
            }
        }

        section,
        .rs-hero,
        .rs-section {
            padding-top: var(--gap);
            padding-bottom: var(--gap);
        }

        .section-heading,
        .rs-heading,
        .policy-heading {
            margin-bottom: var(--gap);
        }

        /* the description's line spacing would add a few pixels under it */
        .section-heading p:last-child {
            margin-bottom: -0.48em;
        }

        /* same for the line spacing above the hourly small print */
        .pricing-disclaimer {
            margin-top: calc(var(--gap) - 0.42em);
        }

        .pkg-more,
        .rs-warning,
        .pl-cta {
            margin-top: var(--gap);
        }

        .pl-group:not(.pl-fold + .pl-fold) {
            margin-top: var(--gap);
        }

        .rs-container > .pl-group:first-of-type,
        .pl-group.pl-fold:first-of-type {
            margin-top: var(--gap);
        }

        .pl-group {
            padding: 0;
        }

        /* the first FAQ group label: trim the space above its letters */
        .faq-list > .faq-group:first-child {
            margin-top: -0.38em;
        }

        /* price list: same trimming for group headings and closing text */
        .pl-group > h2 {
            margin-top: -0.4em;
        }

        .pl-group > .pl-text:last-child {
            margin-bottom: -0.48em;
        }

        .pl-group {
            display: flow-root;
        }

        /* =========================================================
           FOUR-LEVEL PRICING: wide build card, promises, levels
        ========================================================= */

        .pkg-wide {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1.2fr 1fr auto;
            align-items: center;
            gap: 32px;
        }

        .pkg-wide .pkg-list {
            margin-bottom: 0;
        }

        .pkg-wide .btn {
            width: auto;
            margin-top: 0;
            padding: 12px 28px;
        }

        .pkg-tiers {
            display: grid;
            gap: 10px;
            list-style: none;
        }

        .pkg-tiers li {
            display: grid;
            grid-template-columns: 1fr auto;
            column-gap: 12px;
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
        }

        .pkg-tiers span {
            grid-column: 1;
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        .pkg-tiers b {
            grid-column: 2;
            grid-row: 1 / span 2;
            align-self: center;
            color: var(--orange-text);
            font-size: 1.35rem;
        }

        .pl-container .services-grid {
            margin-top: 24px;
        }

        .pl-promises {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            list-style: none;
        }

        .pl-promises li {
            padding: 18px 20px;
            background: var(--card);
            border: 1px solid var(--border);
            border-top: 3px solid var(--orange);
            border-radius: var(--radius);
            text-align: center;
        }

        .pl-promises strong {
            display: block;
            margin-bottom: 4px;
        }

        .pl-promises span {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .pl-container .pl-group {
            max-width: none;
        }

        .pl-levels {
            display: grid;
            gap: 24px;
            margin-top: 24px;
        }

        .pl-level {
            padding: 0;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .pl-level-head {
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 16px;
            align-items: center;
            padding: 18px 22px;
            border-bottom: 1px solid var(--border);
        }

        .pl-level-price {
            grid-row: 1 / span 2;
            color: var(--orange-text);
            font-size: 2.2rem;
            font-weight: 800;
            line-height: 1;
        }

        .pl-level-name {
            font-size: 1.15rem;
            font-weight: 700;
        }

        .pl-level-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .pl-jobs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            list-style: none;
        }

        .pl-jobs li:nth-child(odd) {
            border-right: 1px solid var(--border);
        }

        .pl-jobs li {
            padding: 11px 22px;
            border-bottom: 1px solid var(--border);
        }

        .pl-jobs li:last-child,
        .pl-jobs li:nth-last-child(2):nth-child(odd) {
            border-bottom: none;
        }

        .pl-job {
            display: block;
            font-weight: 600;
        }

        .pl-jobs .svc-note {
            display: block;
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        .pl-extra {
            margin-left: 8px;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 400;
            white-space: nowrap;
        }

        .pl-extras {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-top: var(--gap);
        }

        .pl-extra-card {
            padding: 22px 24px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .pl-extra-card h2 {
            margin-bottom: 8px;
            color: var(--orange-text);
            font-size: 1.2rem;
        }

        .pl-extra-card p {
            color: var(--text-muted);
        }

        .pl-extra-card a {
            color: var(--orange-text);
            font-weight: 700;
        }

        @media (max-width: 1000px) {
            .pkg-wide {
                grid-template-columns: 1fr 1fr;
            }

            .pkg-wide .btn {
                grid-column: 1 / -1;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .pkg-wide,
            .pl-promises,
            .pl-jobs,
            .pl-extras {
                grid-template-columns: 1fr;
            }

            .pl-jobs li:nth-child(odd) {
                border-right: none;
            }

            .pl-jobs li:nth-last-child(2):nth-child(odd) {
                border-bottom: 1px solid var(--border);
            }
        }

        .service-card .pkg-tiers li {
            margin-bottom: 0;
            padding-left: 14px;
        }

        .service-card .pkg-tiers li::before {
            content: none;
        }

        .pkg-tiers strong {
            color: var(--text);
        }

        /* price list: category blocks with a price on each row */

        .pl-cat-head {
            grid-template-columns: 1fr;
        }

        .pl-priced li {
            display: grid;
            grid-template-columns: 1fr auto;
            column-gap: 12px;
        }

        .pl-priced .pl-price {
            color: var(--orange-text);
            font-weight: 800;
            white-space: nowrap;
        }

        .pl-priced .svc-note {
            grid-column: 1 / -1;
        }


        /* =========================================================
           PRICE LIST: jump links, wide build card, fact lists
        ========================================================= */

        .pl-jump {
            position: sticky;
            top: 72px;
            z-index: 5;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: var(--gap);
            padding: 10px;
            background: var(--background);
            border: 1px solid var(--border);
            border-radius: 999px;
        }

        .pl-jump a {
            padding: 6px 14px;
            border-radius: 999px;
            color: var(--text);
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
        }

        .pl-jump a:hover,
        .pl-jump a:focus-visible {
            background: var(--orange);
            color: #fff;
        }

        .pl-container [id^="pl-"] {
            scroll-margin-top: 150px;
        }

        .pkg-card.pkg-wide {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) 1.4fr auto;
            grid-template-areas:
                "title list btn"
                "price list btn"
                "intro list btn";
            align-items: center;
            column-gap: 40px;
            row-gap: 6px;
        }

        .pkg-wide h3 { grid-area: title; margin: 0; }
        .pkg-wide .pkg-price { grid-area: price; margin: 0; }
        .pkg-wide .svc-intro { grid-area: intro; margin: 0; }

        .pkg-wide .pkg-list {
            grid-area: list;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 24px;
            margin: 0;
        }

        .pkg-wide .btn {
            grid-area: btn;
            white-space: nowrap;
        }

        .pl-facts {
            display: grid;
            margin: 12px 0 14px;
            list-style: none;
        }

        .pl-facts li {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 9px 0;
            border-bottom: 1px solid var(--border);
        }

        .pl-facts li:last-child {
            border-bottom: 0;
        }

        .pl-facts span {
            color: var(--text-muted);
        }

        .pl-facts b {
            color: var(--orange-text);
            white-space: nowrap;
        }

        .pl-small {
            font-size: 0.85rem;
        }

        .pl-cta {
            max-width: none;
        }

        @media (max-width: 1000px) {
            .pkg-card.pkg-wide {
                grid-template-columns: 1fr 1fr;
                grid-template-areas:
                    "title list"
                    "price list"
                    "intro list"
                    "btn btn";
            }

            .pkg-wide .pkg-list {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .pl-jump {
                position: static;
                border-radius: var(--radius);
            }

            .pkg-card.pkg-wide {
                grid-template-columns: 1fr;
                grid-template-areas: "title" "price" "intro" "list" "btn";
                row-gap: 12px;
            }
        }

        .pl-cat-head .pl-level-name {
            color: var(--orange-text);
        }


        /* =========================================================
           HERO: LIGHT THEME
        ========================================================= */

        [data-theme="light"] .slide::after {
            background:
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.92),
                    rgba(255, 255, 255, 0.55),
                    rgba(255, 255, 255, 0)
                );
        }

        [data-theme="light"] .hero-content {
            color: var(--text);
        }

        [data-theme="light"] .hero-content h1 span {
            color: var(--orange-text);
        }

        [data-theme="light"] .hero-content p {
            color: var(--text-muted);
        }

        [data-theme="light"] .hero .btn-secondary {
            background: rgba(255, 255, 255, 0.6);
            color: var(--text);
            border-color: var(--input-border);
        }

        [data-theme="light"] .hero .btn-secondary:hover {
            background: #ffffff;
        }

        [data-theme="light"] .slide-dot {
            border-color: var(--text);
        }

        [data-theme="light"] .slide-dot.active {
            border-color: var(--orange);
        }

        [data-theme="light"] .slideshow-progress-track {
            stroke: rgba(23, 32, 42, 0.25);
        }

        [data-theme="light"] .slideshow-action {
            color: var(--text);
            border-color: rgba(23, 32, 42, 0.4);
        }

        @media (max-width: 768px) {
            [data-theme="light"] .slide::after {
                background: rgba(255, 255, 255, 0.85);
            }
        }