/* ============================================================
           RESET & BASE
           ============================================================ */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

        /* FIX: horizontal-scroll safety net — clips any element that
           slips past the viewport edge instead of adding a scrollbar */
        html, body { max-width: 100%; overflow-x: hidden; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-950);
            color: var(--text-primary);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; height: auto; display: block; }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* ============================================================
           TOKENS — DARK MODE, YELLOW & BLACK
           ============================================================ */
        :root {
            --bg-950: #0d0d0e;
            --bg-900: #161617;
            --bg-800: #1e1e20;
            --bg-750: #232325;
            --border: #2b2b2e;
            --border-light: #38383b;

            --yellow-500: #f9a800;
            --yellow-400: #ffbe3d;
            --yellow-300: #ffd873;
            --yellow-a10: rgba(249, 168, 0, 0.10);
            --yellow-a20: rgba(249, 168, 0, 0.20);

            --text-primary: #f5f3ee;
            --text-secondary: #a8a7a1;
            --text-muted: #706f6b;

            --white: #ffffff;

            --shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
            --shadow-hover: 0 16px 46px rgba(0, 0, 0, 0.55);
            --shadow-yellow: 0 10px 30px rgba(249, 168, 0, 0.22);

            --radius: 18px;
            --radius-sm: 12px;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            --font-display: 'Space Grotesk', 'Inter', sans-serif;
            --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
        }

        /* ============================================================
           SIGNATURE — HAZARD STRIPE DIVIDER
           ============================================================ */
        .stripe-divider {
            height: 10px;
            width: 100%;
            background: repeating-linear-gradient(
                135deg,
                var(--yellow-500) 0 22px,
                var(--bg-950) 22px 44px
            );
        }
        .stripe-divider.thin { height: 6px; }

        /* ============================================================
           UTILITY
           ============================================================ */
        .text-center { text-align: center; }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-mono);
            background: var(--yellow-a10);
            color: var(--yellow-300);
            font-weight: 600;
            font-size: 0.72rem;
            padding: 6px 16px;
            border-radius: 50px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 14px;
            border: 1px solid var(--yellow-a20);
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(1.6rem, 4vw, 2.7rem);
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 12px;
            letter-spacing: -0.01em;
            line-height: 1.15;
        }

        .section-sub {
            font-size: 1rem;
            color: var(--text-secondary);
            max-width: 620px;
            margin-bottom: 32px;
        }
        .text-center .section-sub { margin-left: auto; margin-right: auto; }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.98rem;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            line-height: 1.2;
            text-align: center;
            min-height: 54px;
        }

        .btn-primary {
            background: var(--yellow-500);
            color: #17130a;
            box-shadow: var(--shadow-yellow);
        }
        .btn-primary:hover {
            background: var(--yellow-400);
            transform: translateY(-2px);
            box-shadow: 0 14px 36px rgba(249, 168, 0, 0.32);
        }

        .btn-outline {
            background: transparent;
            color: var(--text-primary);
            border: 2px solid var(--border-light);
        }
        .btn-outline:hover { border-color: var(--yellow-500); background: var(--yellow-a10); }

        .btn-whatsapp {
            background: #25d366;
            color: #06210f;
            box-shadow: 0 10px 26px rgba(37, 211, 102, 0.28);
        }
        .btn-whatsapp:hover { background: #2fe375; transform: translateY(-2px); }

        .btn-phone {
            background: var(--bg-750);
            color: var(--text-primary);
            border: 1px solid var(--border-light);
        }
        .btn-phone:hover { background: var(--bg-800); border-color: var(--yellow-500); transform: translateY(-2px); }

        /* FIX: on very narrow screens, stack hero/contact CTA buttons
           full-width instead of squeezing two side by side */
        @media (max-width: 380px) {
            .btn { padding: 12px 20px; font-size: 0.92rem; min-height: 50px; }
        }

        /* ============================================================
           HEADER
           ============================================================ */
        .site-header {
            background: rgba(13, 13, 14, 0.92);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            padding: 10px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            gap: 10px;
            position: relative; /* anchors the mobile nav drawer */
        }

        /* ---- Logo: chip + wordmark, sized responsively ---- */
        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;    /* FIX: allows the text to truncate instead
                                 of forcing the header wider than the screen */
            flex-shrink: 1;
        }

        /* FIX: rounded "chip" around the logo image so it reads as an
           intentional badge against the dark nav, rather than a stray
           light rectangle. Page background and logo file are untouched. */
        .logo-chip {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-800);
            border: 1px solid var(--yellow-a20);
            border-radius: 9px;
            padding: 3px 6px;
            line-height: 0;
        }

        .logo-img {
            height: 28px;
            width: auto;
            display: block;
            border-radius: 3px;
        }

        .logo-text-wrapper {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
            min-width: 0;
        }
        .logo-text {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .logo-text .accent { color: var(--yellow-400); }
        .logo-sub {
            font-family: var(--font-mono);
            font-weight: 400;
            font-size: 0.52rem;
            color: var(--text-muted);
            letter-spacing: 0.03em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Logo scales up gradually as there's more room */
        @media (min-width: 400px) {
            .logo-img { height: 32px; }
            .logo-text { font-size: 0.98rem; }
            .logo-sub { font-size: 0.58rem; }
            .logo-chip { padding: 4px 7px; }
        }
        @media (min-width: 600px) {
            .logo-img { height: 38px; }
            .logo-text { font-size: 1.06rem; }
            .logo-sub { font-size: 0.62rem; }
        }
        @media (min-width: 860px) {
            .logo-img { height: 45px; }
            .logo-text { font-size: 1.12rem; }
            .logo-chip { padding: 5px 8px; }
        }

        /* ---- Mobile nav toggle (hamburger) ---- */
        .nav-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            border-radius: 10px;
            border: 1px solid var(--border-light);
            background: var(--bg-900);
            color: var(--text-primary);
            font-size: 1.05rem;
            cursor: pointer;
            transition: var(--transition);
        }
        .nav-toggle:hover { border-color: var(--yellow-500); }

        /* ---- Nav links: mobile-first = slide-down drawer ---- */
        .nav-links {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            background: var(--bg-900);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 6px 18px;
            font-weight: 600;
            font-size: 0.95rem;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
        }
        .nav-links.open {
            max-height: 480px;
            opacity: 1;
            padding: 10px 18px 18px;
            pointer-events: auto;
            box-shadow: var(--shadow);
        }
        .nav-links a {
            color: var(--text-secondary);
            padding: 13px 4px;
            min-height: 44px;         /* FIX: touch-friendly tap target */
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }
        .nav-links a:last-of-type { border-bottom: none; }
        .nav-links a:hover { color: var(--text-primary); }

        .nav-cta-mobile {
            display: flex !important;
            width: 100%;
            margin-top: 6px;
            /* box-shadow: none;  */
        }

        @media (min-width: 860px) {
            .nav-toggle { display: none; }
            .nav-links {
                position: static;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 6px 18px;
                background: transparent;
                border: none;
                padding: 0;
                max-height: none;
                opacity: 1;
                overflow: visible;
                pointer-events: auto;
                box-shadow: none;
            }
            .nav-links a {
                padding: 4px 0;
                min-height: auto;
                border-bottom: 2px solid transparent;
                white-space: nowrap;
            }
            .nav-links a:hover { border-color: var(--yellow-500); }
            .nav-cta-mobile {
                width: auto;
                margin-top: 0;
                padding: 6px 16px;
                font-size: 0.78rem;
                min-height: auto;
            }
        }

        /* ============================================================
           HERO — full-bleed team photo, dark overlay
           ============================================================ */
        .hero {
            position: relative;
            min-height: 78vh;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            background-color: var(--bg-950);
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-image:
                linear-gradient(180deg, rgba(13,13,14,0.35) 0%, rgba(13,13,14,0.55) 45%, rgba(13,13,14,0.96) 100%),
                url('images/team-hero.webp');
            background-size: cover;
            background-position: center 18%;
            background-repeat: no-repeat;
        }

        .hero-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 15% 20%, rgba(249,168,0,0.12), transparent 45%),
                radial-gradient(circle at 85% 0%, rgba(249,168,0,0.08), transparent 40%);
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 56px 0 40px;
        }

        .hero-content .eyebrow { background: rgba(13,13,14,0.55); backdrop-filter: blur(4px); }

        .hero-content h1 {
            font-family: var(--font-display);
            font-size: clamp(1.6rem, 7vw, 3.6rem); /* FIX: lower floor so long
                                                        headline fits small screens */
            font-weight: 700;
            line-height: 1.12;
            color: var(--white);
            margin-bottom: 14px;
            max-width: 720px;
            text-shadow: 0 4px 24px rgba(0,0,0,0.35);
        }
        .hero-content h1 .highlight { color: var(--yellow-400); }

        .hero-content p {
            font-size: 1rem;
            color: rgba(245, 243, 238, 0.86);
            margin-bottom: 26px;
            max-width: 540px;
        }

        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .hero-actions .btn { flex: 1 1 auto; min-width: 190px; }

        .hero-strip { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
        .hero-strip-item { display: flex; align-items: center; gap: 10px; }
        .hero-strip-item .num { font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; color: var(--yellow-400); }
        .hero-strip-item .label { font-size: 0.76rem; color: rgba(245,243,238,0.7); }

        @media (max-width: 600px) {
            .hero { min-height: 58vh; }
            .hero-bg { background-position: center 6%; } /* FIX: keeps faces/torso
                framed and crops feet out on short mobile hero heights */
            .hero-inner { padding: 36px 0 26px; }
            .hero-content { text-align: center; } /* FIX: centers eyebrow, headline,
                paragraph and stat strip on mobile */
            .hero-content h1 {
                font-size: clamp(1.35rem, 8vw, 1.9rem);
                margin-left: auto;
                margin-right: auto;
            }
            .hero-content p {
                font-size: 0.88rem;
                margin: 0 auto 18px;
            }
            .hero-actions { justify-content: center; }
            .hero-actions .btn { min-width: 100%; }
            .hero-strip { justify-content: center; gap: 14px; margin-top: 18px; }
            .hero-strip-item .num { font-size: 1.05rem; }
            .hero-strip-item .label { font-size: 0.68rem; }
        }

        @media (min-width: 860px) {
            .hero-inner { padding: 100px 0 64px; }
            .hero { min-height: 84vh; }
            .hero-content p { font-size: 1.08rem; margin-bottom: 28px; }
            .hero-strip { gap: 28px; margin-top: 40px; }
            .hero-strip-item .num { font-size: 1.3rem; }
            .hero-strip-item .label { font-size: 0.8rem; }
        }

        /* ============================================================
           SECTIONS
           ============================================================ */
        section { padding: 56px 0; }
        .bg-alt { background: var(--bg-900); }

        @media (max-width: 480px) {
            section { padding: 42px 0; }
        }

        @media (min-width: 860px) {
            section { padding: 88px 0; }
        }

        /* ============================================================
           SERVICES
           ============================================================ */
        .services-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }

        .service-card {
            background: var(--bg-900);
            border-radius: var(--radius-sm);
            overflow: hidden;
            border: 1px solid var(--border);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }
        .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--yellow-a20); }

        .service-card .service-img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            background: var(--bg-800);
        }

        .service-card .service-body { padding: 16px 16px 18px; flex: 1; display: flex; flex-direction: column; }
        .service-card .service-body h3 { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.25; }
        .service-card .service-body p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; flex: 1; }
        .service-card .service-body .badge {
            margin-top: 10px;
            font-family: var(--font-mono);
            font-size: 0.66rem;
            font-weight: 600;
            color: var(--yellow-300);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: var(--yellow-a10);
            padding: 3px 12px;
            border-radius: 50px;
            align-self: flex-start;
            border: 1px solid var(--yellow-a20);
        }

        /* ============================================================
           PORTFOLIO / GALLERY
           ============================================================ */
        /* FIX: mobile-first is a horizontal swipeable strip — three full-height
           stacked photos was adding a lot of scroll for not much content */
        .portfolio-grid {
            display: flex;
            gap: 14px;
            margin: 8px -20px 0;
            padding: 0 20px 6px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .portfolio-grid::-webkit-scrollbar { display: none; }

        .portfolio-item {
            position: relative;
            border-radius: var(--radius-sm);
            overflow: hidden;
            border: 1px solid var(--border);
            background: var(--bg-800);
            flex: 0 0 76%;
            scroll-snap-align: start;
            aspect-ratio: 4 / 3;
        }

        .portfolio-swipe-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 14px;
        }
        .testimonial-swipe-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 14px;
        }
        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s var(--transition);
        }
        .portfolio-item:hover img { transform: scale(1.06); }

        .portfolio-item .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(13,13,14,0.92) 0%, rgba(13,13,14,0.15) 55%, transparent 100%);
            display: flex;
            align-items: flex-end;
            padding: 16px;
        }
        .portfolio-item .overlay-text { color: var(--white); }
        .portfolio-item .overlay-text .tag {
            font-family: var(--font-mono);
            font-size: 0.64rem;
            color: var(--yellow-300);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: block;
            margin-bottom: 4px;
        }
        .portfolio-item .overlay-text .name {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 0.95rem;
        }

        @media (max-width: 600px) {
            .portfolio-item { aspect-ratio: 16 / 11; }
        }

        /* ============================================================
           WHY CHOOSE US — "blueprint" node chain
           Construction-site motif: a dimension/measurement line (the
           dashed thread you'd see on a site drawing) strings together
           numbered, stamped nodes — reads as a mind-map/flow rather
           than a stacked list, and stays a single horizontal lane at
           any screen size so it never adds page height.
           ============================================================ */
        .why-swipe-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .why-flow-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            margin: 8px -20px 0;
            padding: 44px 20px 18px;
        }
        .why-flow-scroll::-webkit-scrollbar { display: none; }

        .why-flow-track {
            position: relative;
            display: inline-flex;
            gap: 28px;
            min-width: max-content;
            padding: 0 4px;
        }
        /* the dashed dimension line threading through every node */
        .why-flow-track::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 58px;
            height: 0;
            border-top: 2px dashed var(--yellow-a20);
            z-index: 0;
        }

        .why-node {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 112px;
            flex: 0 0 112px;
            text-align: center;
        }
        .why-node .node-num {
            font-family: var(--font-mono);
            font-size: 0.58rem;
            font-weight: 700;
            color: var(--yellow-300);
            background: var(--bg-900);
            border: 1px solid var(--yellow-a20);
            padding: 2px 9px;
            border-radius: 20px;
            margin-bottom: 8px;
        }
        .why-node .node-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--yellow-500);
            color: #17130a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            border: 4px solid var(--bg-950);
            box-shadow: 0 0 0 2px var(--yellow-a20);
            margin-bottom: 10px;
            transition: var(--transition);
        }
        .why-node:hover .node-icon {
            transform: translateY(-3px);
            box-shadow: 0 0 0 2px var(--yellow-400), var(--shadow-yellow);
        }
        .why-node .node-label {
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.3;
        }

        @media (min-width: 700px) {
            .why-flow-track { gap: 38px; }
            .why-node { width: 128px; flex-basis: 128px; }
            .why-node .node-icon { width: 58px; height: 58px; font-size: 1.25rem; }
            .why-node .node-label { font-size: 0.83rem; }
            .why-flow-track::before { top: 64px; }
        }

        /* ============================================================
           TESTIMONIALS — mobile-first horizontal swipe strip
           (same pattern as the portfolio section)
           ============================================================ */
        .testimonial-grid {
            display: flex;
            gap: 16px;
            margin: 8px -20px 0;
            padding: 0 20px 6px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .testimonial-grid::-webkit-scrollbar { display: none; }

        .testimonial-card {
            background: var(--bg-900);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 24px 22px;
            position: relative;
            flex: 0 0 82%;
            scroll-snap-align: start;
        }
        .testimonial-card .stars { color: var(--yellow-500); font-size: 0.85rem; margin-bottom: 14px; letter-spacing: 2px; }
        .testimonial-card p.quote { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 18px; word-break: break-word; }
        .testimonial-card .author { display: flex; align-items: center; gap: 12px; }
        .testimonial-card .avatar {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--yellow-a10);
            border: 1px solid var(--yellow-a20);
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-display); font-weight: 700; color: var(--yellow-400);
            flex-shrink: 0;
        }
        .testimonial-card .author-name { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); }
        .testimonial-card .author-loc { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }

        /* ============================================================
           PRODUCTS — image + price + name, with WhatsApp order button
           Mobile: two side-by-side, third spans the combined width below.
           Desktop: three equal columns, centered as one row.
           ============================================================ */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            margin-top: 8px;
        }

        .product-card {
            background: var(--bg-900);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }
        .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--yellow-a20); }

        /* FIX: third card spans both columns on mobile (combined width of
           the two above) and lays itself out sideways to use the extra room */
        .product-card:nth-child(3) {
            grid-column: 1 / -1;
            flex-direction: row;
        }
        .product-card:nth-child(3) .product-img { width: 42%; height: auto; aspect-ratio: unset; }
        .product-card:nth-child(3) .product-body { width: 58%; }

        .product-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            background: var(--bg-800);
            flex-shrink: 0;
        }

        .product-body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

        .product-tag {
            font-family: var(--font-mono);
            font-size: 0.6rem;
            font-weight: 600;
            color: var(--yellow-300);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: var(--yellow-a10);
            border: 1px solid var(--yellow-a20);
            padding: 2px 10px;
            border-radius: 50px;
            align-self: flex-start;
        }
        .product-name { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--text-primary); line-height: 1.3; }
        .product-price { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--yellow-400); margin-top: 2px; }
        .product-price small { font-size: 0.68rem; font-weight: 500; color: var(--text-muted); }

        .product-order {
            margin-top: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            background: #25d366;
            color: #06210f;
            font-weight: 700;
            font-size: 0.76rem;
            padding: 9px 12px;
            border-radius: 50px;
            transition: var(--transition);
        }
        .product-order:hover { background: #2fe375; transform: translateY(-2px); }

        @media (min-width: 420px) {
            .product-body { padding: 14px 14px 16px; }
            .product-name { font-size: 0.9rem; }
            .product-price { font-size: 1.1rem; }
        }

        @media (min-width: 760px) {
            .product-grid {
                grid-template-columns: repeat(3, 1fr);
                max-width: 900px;
                margin-left: auto;
                margin-right: auto;
                gap: 22px;
            }
            .product-card:nth-child(3) {
                grid-column: auto;
                flex-direction: column;
            }
            .product-card:nth-child(3) .product-img { width: 100%; aspect-ratio: 1 / 1; }
            .product-card:nth-child(3) .product-body { width: 100%; }
            .product-name { font-size: 0.95rem; }
            .product-price { font-size: 1.2rem; }
            .product-order { font-size: 0.82rem; padding: 10px 14px; }
        }

        .quote-note {
            margin-top: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.88rem;
            color: var(--text-secondary);
            background: var(--yellow-a10);
            border: 1px solid var(--yellow-a20);
            padding: 14px 18px;
            border-radius: var(--radius-sm);
        }
        .quote-note i { color: var(--yellow-500); flex-shrink: 0; }

        /* ============================================================
           CONTACT
           ============================================================ */
        .contact { background: var(--bg-950); border-top: 1px solid var(--border); }

        .contact-details { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 24px; }

        .contact-row {
            display: flex; align-items: center; gap: 14px;
            background: var(--bg-900);
            padding: 12px 20px;
            border-radius: 50px;
            border: 1px solid var(--border);
            font-weight: 500; font-size: 0.98rem;
            width: 100%; max-width: 440px;
            transition: background 0.2s, border-color 0.2s;
        }
        .contact-row:hover { background: var(--bg-800); border-color: var(--yellow-a20); }
        .contact-row i { font-size: 1.15rem; color: var(--yellow-400); width: 24px; text-align: center; flex-shrink: 0; }
        .contact-row a { color: var(--text-primary); word-break: break-word; }
        .contact-row a:hover { text-decoration: underline; }

        .contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; }
        .contact-actions .btn { min-width: 190px; flex: 1 1 auto; }

        @media (max-width: 380px) {
            .contact-actions .btn { min-width: 100%; }
        }

        .contact-address {
            margin-top: 18px; font-size: 0.9rem; color: var(--text-secondary);
            display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
            padding: 10px 18px; background: var(--bg-900); border-radius: 50px; border: 1px solid var(--border);
            max-width: 500px; margin-left: auto; margin-right: auto;
        }
        .contact-address i { color: var(--yellow-400); }

        .contact-social { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 0.9rem; }
        .contact-social a {
            color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 14px; border-radius: 50px; background: var(--bg-900); border: 1px solid var(--border);
            transition: background 0.2s, color 0.2s;
        }
        .contact-social a:hover { background: var(--bg-800); color: var(--text-primary); }
        .contact-social i { color: var(--yellow-400); }

        /* ============================================================
           FOOTER
           ============================================================ */
        .site-footer { background: var(--bg-950); padding: 22px 0; color: var(--text-muted); font-size: 0.78rem; text-align: center; }
        .site-footer span.brand { color: var(--text-secondary); font-weight: 600; }
        .site-footer .footer-tagline { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.8; }

        /* ============================================================
           RESPONSIVE — GRID BREAKPOINTS
           FIX: lowered from 560px to 420px for the lighter grids so
           mobile phones (not just tablets) get 2 columns sooner,
           shortening the overall scroll length.
           ============================================================ */
        @media (min-width: 420px) {
            .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
        }

        @media (min-width: 560px) {
            .services-grid { gap: 20px; }
        }

        /* FIX: portfolio and testimonials switch from mobile swipe-strips
           to real grids once there's enough width for two columns */
        @media (min-width: 600px) {
            .portfolio-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                margin: 8px 0 0;
                padding: 0;
                overflow-x: visible;
            }
            .portfolio-item { flex: unset; }
            .portfolio-swipe-hint { display: none; }

            .testimonial-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                margin: 8px 0 0;
                padding: 0;
                overflow-x: visible;
            }
            .testimonial-card { flex: unset; }
            .testimonial-swipe-hint { display: none; }
        }

        @media (min-width: 860px) {
            .services-grid { grid-template-columns: repeat(3, 1fr); }
            .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
            .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
            .service-card .service-img { height: 170px; }
        }