/* Shared stylesheet for every /services/<slug>/ page.
   Previously inlined verbatim in all twelve. Edit here, not per page. */

        /* ── CSS Variables ─────────────────────────────────── */
        :root {
            --primary:   #293692;
            --secondary: #1e2a6b;
            --accent:    #d1a054;
            --cream:     #FAFAF9;
            --stone:     #64748B;
            --dark:      #0f172a;
            --slate-50:  #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-400: #94a3b8;
            --slate-500: #64748b;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            --white:     #ffffff;
        }

        /* ── Reset / Base ──────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { overflow-x: hidden; }
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: var(--slate-800);
            background: var(--white);
        }
        h1, h2, h3 { letter-spacing: -0.035em; line-height: 0.95; }
        img { display: block; max-width: 100%; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        address { font-style: normal; }

        /* ── Reveal animation ──────────────────────────────── */
        .reveal {
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 1s cubic-bezier(0.16,1,0.3,1),
                        transform 1s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* ── Layout helpers ────────────────────────────────── */
        .container {
            max-width: 80rem;
            margin-inline: auto;
            padding-inline: 1.5rem;
        }
        @media (min-width: 1024px) { .container { padding-inline: 2rem; } }

        /* ── Accent line ───────────────────────────────────── */
        .accent-line { width: 80px; height: 3px; background: var(--accent); flex-shrink: 0; }

        /* ═══════════════════════════════════════════════════ */
        /*  NAVIGATION                                         */
        /* ═══════════════════════════════════════════════════ */
        #navbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 50;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(226,232,240,0.5);
            transition: all 0.3s ease;
        }
        .nav-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 6rem;
        }
        .nav-logo { display: flex; align-items: center; gap: 0.75rem; }
        .nav-logo-img { width: 3rem; height: 3rem; object-fit: contain; }
        .nav-logo-text { display: none; }
        @media (min-width: 640px) { .nav-logo-text { display: block; } }
        .nav-logo-name {
            font-weight: 700;
            font-size: 1.125rem;
            letter-spacing: -0.025em;
            display: block;
            line-height: 1;
            color: var(--primary);
        }
        .nav-logo-sub {
            font-size: 0.625rem;
            color: var(--stone);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-weight: 600;
        }
        .nav-links {
            display: none;
            align-items: center;
            gap: 2.5rem;
        }
        @media (min-width: 1024px) { .nav-links { display: flex; } }
        .nav-link {
            position: relative;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--slate-600);
            transition: color 0.3s;
        }
        .nav-link:hover { color: var(--primary); }
        .nav-link.active { color: var(--primary); }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0;
            width: 0; height: 2px;
            background: var(--accent);
            transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
        }
        .nav-link:hover::after { width: 100%; }
        .nav-btn-wa {
            background: var(--primary);
            color: var(--white);
            padding: 0.75rem 2rem;
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: background 0.3s;
        }
        .nav-btn-wa:hover { background: var(--secondary); }
        .lang-toggle {
            padding: 0.5rem 1rem;
            border: 2px solid var(--primary);
            color: var(--primary);
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 700;
            background: var(--white);
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .lang-toggle:hover { background: var(--primary); color: var(--white); }
        .lang-toggle-mobile {
            display: flex;
            margin-right: 0.75rem;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        @media (min-width: 1024px) { .lang-toggle-mobile { display: none; } }
        .lang-toggle-desktop { margin-left: 0.5rem; }

        #mobile-menu-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            width: 3rem; height: 3rem;
            border-radius: 9999px;
            border: 1px solid var(--slate-200);
            background: var(--white);
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
            cursor: pointer;
            z-index: 60;
            transition: border-color 0.3s;
        }
        #mobile-menu-btn:hover { border-color: rgba(41,54,146,0.3); }
        @media (min-width: 1024px) { #mobile-menu-btn { display: none; } }
        #mobile-menu-btn span {
            display: block;
            width: 1.25rem; height: 2px;
            background: var(--primary);
            border-radius: 9999px;
            transition: transform 0.3s, opacity 0.3s, background 0.3s;
            transform-origin: center;
        }
        #mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); background: var(--white); }
        #mobile-menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        #mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); background: var(--white); }
        #mobile-menu-btn.active { background: var(--primary); border-color: var(--primary); }

        #mobile-menu-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(41,54,146,0.9);
            backdrop-filter: blur(12px);
            z-index: 40;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        @media (max-width: 1023px) { #mobile-menu-overlay { display: block; } }
        #mobile-menu-overlay.menu-visible { opacity: 1; visibility: visible; }

        #mobile-menu {
            position: fixed;
            inset: 0;
            z-index: 50;
            background: var(--white);
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
        }
        @media (min-width: 1024px) { #mobile-menu { display: none; } }
        #mobile-menu.menu-visible { transform: translateX(0); }

        .menu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem;
            border-bottom: 1px solid var(--slate-100);
        }
        .menu-header-logo { display: flex; align-items: center; gap: 0.75rem; }
        .menu-header-img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
        .menu-header-name { font-weight: 700; font-size: 1.125rem; line-height: 1; color: var(--primary); }
        .menu-header-sub { font-size: 0.625rem; color: var(--stone); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; }
        #mobile-menu-close {
            width: 2.5rem; height: 2.5rem;
            display: flex; align-items: center; justify-content: center;
            border-radius: 9999px;
            border: none;
            background: transparent;
            cursor: pointer;
            transition: background 0.2s;
            color: var(--primary);
            font-size: 1.25rem;
        }
        #mobile-menu-close:hover { background: var(--slate-100); }

        .menu-content {
            padding: 2rem 1.5rem;
            height: calc(100vh - 88px);
            overflow-y: auto;
        }
        .menu-nav { display: flex; flex-direction: column; gap: 0.5rem; }
        .mobile-menu-link {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--slate-700);
            border-radius: 0.75rem;
            transition: color 0.2s, background 0.2s;
        }
        .mobile-menu-link:hover { color: var(--primary); background: var(--slate-50); }
        .mobile-menu-link.active-page { color: var(--white); background: var(--primary); box-shadow: 0 8px 24px rgba(41,54,146,0.2); }
        .mobile-menu-link::after {
            content: '';
            position: absolute; left: 0; top: 0;
            height: 100%; width: 4px;
            background: var(--accent);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }
        .mobile-menu-link:hover::after { transform: scaleY(1); }
        .mobile-menu-link.active-page::after { display: none; }
        .menu-icon {
            width: 2.5rem; height: 2.5rem;
            border-radius: 0.5rem;
            background: rgba(41,54,146,0.05);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.875rem;
            flex-shrink: 0;
            transition: background 0.2s, color 0.2s;
        }
        .mobile-menu-link:hover .menu-icon { background: var(--primary); color: var(--white); }
        .mobile-menu-link.active-page .menu-icon { background: rgba(255,255,255,0.2); color: var(--white); }

        .menu-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--slate-100); }
        .menu-section-title { font-size: 0.75rem; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
        .menu-contact-item {
            display: flex; align-items: center; gap: 0.75rem;
            color: var(--slate-600);
            transition: color 0.2s;
            margin-bottom: 1rem;
        }
        .menu-contact-item:hover { color: var(--primary); }
        .menu-contact-icon {
            width: 2.5rem; height: 2.5rem;
            border-radius: 0.5rem;
            background: rgba(209,160,84,0.1);
            color: var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.875rem;
            flex-shrink: 0;
        }
        .menu-contact-label { font-size: 0.875rem; font-weight: 600; }
        .menu-contact-value { font-size: 0.75rem; color: var(--slate-400); }
        .menu-socials { display: flex; gap: 0.75rem; margin-top: 1rem; }
        .menu-social-btn {
            width: 3rem; height: 3rem;
            border-radius: 9999px;
            color: var(--white);
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.2s;
        }
        .menu-social-btn:hover { transform: scale(1.1); }
        .social-ig { background: linear-gradient(135deg, #7c3aed, #ec4899); }
        .social-fb { background: linear-gradient(135deg, #2563eb, #1e40af); }
        .social-li { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); }

        /* ═══════════════════════════════════════════════════ */
        /*  HERO                                               */
        /* ═══════════════════════════════════════════════════ */
        .hero {
            position: relative;
            padding: 8rem 0 12rem;
            background: var(--primary);
        }
        @media (min-width: 1024px) { .hero { padding: 12rem 0 14rem; } }
        .hero-inner { max-width: 48rem; }
        .hero-label {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            display: block;
            margin-bottom: 1.5rem;
        }
        .hero h1 {
            font-size: clamp(2.25rem, 6vw, 3.75rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: 2rem;
            line-height: 1.15;
            letter-spacing: -0.035em;
        }
        @media (min-width: 640px) { .hero h1 { line-height: 1.1; } }
        .hero p {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: rgba(255,255,255,0.8);
            font-weight: 300;
            line-height: 1.7;
            max-width: 42rem;
            margin-bottom: 2.5rem;
        }
        .btn-accent {
            display: inline-block;
            background: var(--accent);
            color: var(--white);
            padding: 1rem 2.5rem;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: background 0.3s;
            box-shadow: 0 8px 24px rgba(209,160,84,0.2);
        }
        .btn-accent:hover { background: rgba(209,160,84,0.9); }

        /* ═══════════════════════════════════════════════════ */
        /*  INTRO SPLIT                                        */
        /* ═══════════════════════════════════════════════════ */
        .intro-section {
            padding: 6rem 0 10rem;
            background: var(--white);
        }
        @media (min-width: 1024px) { .intro-section { padding: 10rem 0; } }
        .intro-grid {
            display: grid;
            gap: 4rem;
            align-items: start;
        }
        @media (min-width: 1024px) {
            .intro-grid { grid-template-columns: 4fr 8fr; }
        }
        .intro-sticky { position: sticky; top: 8rem; }
        .section-tag {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .section-tag span {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.2em;
        }
        .section-heading {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--primary);
            line-height: 1.1;
            letter-spacing: -0.035em;
        }
        .prose-xl p {
            font-weight: 300;
            line-height: 1.7;
            color: var(--slate-600);
        }
        .prose-xl p:first-child {
            font-size: clamp(1.125rem, 2vw, 1.5rem);
            margin-bottom: 2rem;
        }
        .prose-xl p:last-child { font-size: 1.125rem; }

        /* ═══════════════════════════════════════════════════ */
        /*  CORE SERVICES                                      */
        /* ═══════════════════════════════════════════════════ */
        .services-section {
            padding: 8rem 0;
            background: var(--slate-50);
        }
        .services-header { margin-bottom: 5rem; }
        .services-header h2:first-child {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.3em;
            margin-bottom: 1rem;
        }
        .services-header p {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--primary);
            letter-spacing: -0.035em;
        }

        .service-card {
            padding: 3rem 0;
            display: grid;
            gap: 2rem;
            align-items: start;
            border-top: 1px solid rgba(41,54,146,0.1);
            cursor: pointer;
            transition: background 0.6s cubic-bezier(0.16,1,0.3,1),
                        padding-left 0.6s cubic-bezier(0.16,1,0.3,1);
        }
        @media (min-width: 1024px) {
            .service-card {
                grid-template-columns: 1fr 4fr 7fr;
                padding: 4rem 0;
            }
        }
        .service-card:hover { background: var(--cream); padding-left: 2rem; }
        .service-number {
            font-size: clamp(3rem, 5vw, 3.75rem);
            font-weight: 300;
            color: var(--slate-200);
            display: block;
            transition: color 0.3s, transform 0.3s;
            line-height: 1;
        }
        .service-card:hover .service-number { color: var(--accent); transform: scale(1.1); }
        .service-title {
            font-size: clamp(1.25rem, 2vw, 1.875rem);
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        .service-subtitle {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .service-desc {
            color: var(--slate-600);
            line-height: 1.7;
            font-weight: 300;
            margin-bottom: 1rem;
        }
        .service-list { display: flex; flex-direction: column; gap: 0.5rem; }
        .service-list li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.875rem;
            color: var(--slate-600);
            font-weight: 300;
        }
        .service-list li::before {
            content: '';
            width: 0.375rem; height: 0.375rem;
            background: var(--accent);
            border-radius: 9999px;
            flex-shrink: 0;
        }
        .service-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);text-decoration:none}.service-link:hover{text-decoration:underline}
        .service-img-wrap {
            position: relative;
            overflow: hidden;
            aspect-ratio: 4/3;
        }
        .service-img-wrap img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        .service-card:hover .service-img-wrap img { transform: scale(1.05); }

        /* ═══════════════════════════════════════════════════ */
        /*  PROCESS                                            */
        /* ═══════════════════════════════════════════════════ */
        .process-section {
            padding: 6rem 0 8rem;
            background: var(--primary);
            color: var(--white);
        }
        @media (min-width: 1024px) { .process-section { padding: 8rem 0; } }
        .process-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .process-header .label {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.3em;
            display: block;
            margin-bottom: 1rem;
        }
        .process-header h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            margin-bottom: 1rem;
            letter-spacing: -0.035em;
        }
        .process-header-line {
            width: 5rem; height: 4px;
            background: var(--accent);
            margin: 0 auto;
        }
        .process-grid {
            display: grid;
            gap: 2rem;
        }
        @media (min-width: 768px)  { .process-grid { grid-template-columns: repeat(2,1fr); } }
        @media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4,1fr); } }
        .process-step { text-align: center; }
        .process-icon {
            width: 5rem; height: 5rem;
            margin: 0 auto 1.5rem;
            background: var(--accent);
            border-radius: 9999px;
            display: flex; align-items: center; justify-content: center;
            color: var(--primary);
            font-size: 1.5rem;
        }
        .process-step-label {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }
        .process-step h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            letter-spacing: -0.01em;
        }
        .process-step p {
            font-size: 0.875rem;
            color: rgba(255,255,255,0.7);
            line-height: 1.6;
        }
        .process-line-bar {
            display: none;
            margin: 3rem auto 0;
            position: relative;
            height: 1px;
            background: rgba(255,255,255,0.2);
            max-width: 56rem;
        }
        @media (min-width: 1024px) { .process-line-bar { display: block; } }
        .process-line-bar .dot {
            position: absolute;
            top: 50%; transform: translateY(-50%);
            width: 0.75rem; height: 0.75rem;
            background: var(--accent);
            border-radius: 9999px;
        }
        .process-cta { margin-top: 4rem; text-align: center; }
        .btn-accent-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--accent);
            color: var(--primary);
            padding: 1rem 2.5rem;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: background 0.3s;
        }
        .btn-accent-primary:hover { background: var(--white); }

        /* ═══════════════════════════════════════════════════ */
        /*  FEATURED PROJECTS                                  */
        /* ═══════════════════════════════════════════════════ */
        .projects-section {
            padding: 8rem 0 10rem;
            background: var(--white);
        }
        @media (min-width: 1024px) { .projects-section { padding: 10rem 0; } }
        .projects-header { margin-bottom: 5rem; }
        .projects-header h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1.5rem;
            letter-spacing: -0.035em;
        }
        .projects-header p {
            font-size: 1.25rem;
            color: var(--slate-600);
            font-weight: 300;
            max-width: 42rem;
        }
        .projects-grid {
            display: grid;
            gap: 2rem;
        }
        @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2,1fr); gap: 3rem; } }
        .project-card { display: block; }
        .project-img-wrap {
            position: relative;
            overflow: hidden;
            aspect-ratio: 4/3;
            margin-bottom: 1.5rem;
            background: var(--slate-100);
        }
        .project-img-wrap img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        .project-card:hover .project-img-wrap img { transform: scale(1.05); }
        .project-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(41,54,146,0.95) 0%, rgba(41,54,146,0.7) 50%, transparent 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2rem;
        }
        .project-card:hover .project-overlay { opacity: 1; }
        .project-overlay-inner {
            transform: translateY(1rem);
            transition: transform 0.5s ease;
        }
        .project-card:hover .project-overlay-inner { transform: translateY(0); }
        .project-overlay-tag {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            display: block;
            margin-bottom: 0.5rem;
        }
.project-overlay h4, .project-overlay h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 0.75rem;
            line-height: 1.2;
        }
        .project-overlay-link {
            font-size: 0.875rem;
            font-weight: 500;
            color: rgba(255,255,255,0.9);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.05em;
        }
        .project-overlay-link i { color: var(--accent); }
        .project-meta {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }
        .project-meta h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
            letter-spacing: -0.025em;
            transition: color 0.3s;
        }
        .project-card:hover .project-meta h3 { color: var(--accent); }
        .project-meta p { color: var(--slate-600); font-weight: 300; }
        .project-meta span { font-size: 0.875rem; font-weight: 600; color: var(--slate-400); white-space: nowrap; }
        .projects-cta { margin-top: 4rem; text-align: center; }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--primary);
            color: var(--white);
            padding: 1rem 2.5rem;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: background 0.3s;
        }
        .btn-primary:hover { background: var(--secondary); }

        /* ═══════════════════════════════════════════════════ */
        /*  CTA SECTION                                        */
        /* ═══════════════════════════════════════════════════ */
        .cta-section {
            padding: 6rem 0 8rem;
            background: var(--primary);
            position: relative;
            overflow: hidden;
        }
        @media (min-width: 1024px) { .cta-section { padding: 8rem 0; } }
        .cta-bg-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.1;
            background-image: url('/assets/images/pattern-cubes.svg');
        }
        .cta-bg-grad {
            position: absolute;
            top: 0; right: 0;
            width: 50%; height: 100%;
            background: linear-gradient(to left, var(--secondary), transparent);
            opacity: 0.5;
        }
        .cta-inner {
            max-width: 56rem;
            margin-inline: auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .cta-inner h2 {
            font-size: clamp(2rem, 6vw, 3.75rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: 1.5rem;
            letter-spacing: -0.035em;
        }
        .cta-inner p {
            font-size: 1.25rem;
            color: rgba(255,255,255,0.8);
            margin-bottom: 2.5rem;
            max-width: 48rem;
            margin-inline: auto;
            font-weight: 300;
            line-height: 1.7;
        }
        .cta-btns {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
        }
        @media (min-width: 640px) { .cta-btns { flex-direction: row; } }
        .btn-cta-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            background: var(--accent);
            color: var(--white);
            padding: 1rem 2.5rem;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            box-shadow: 0 8px 24px rgba(209,160,84,0.2);
            transition: background 0.3s;
        }
        .btn-cta-primary:hover { background: rgba(209,160,84,0.9); }
        .btn-cta-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(4px);
            border: 2px solid rgba(255,255,255,0.3);
            color: var(--white);
            padding: 1rem 2.5rem;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: background 0.3s, color 0.3s;
        }
        .btn-cta-secondary:hover { background: var(--white); color: var(--primary); }

        /* ═══════════════════════════════════════════════════ */
        /*  CONTACT                                            */
        /* ═══════════════════════════════════════════════════ */
        .contact-section {
            padding: 6rem 0 8rem;
            background: var(--white);
        }
        @media (min-width: 1024px) { .contact-section { padding: 8rem 0; } }
        .contact-grid {
            display: grid;
            gap: 4rem;
        }
        @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
        .contact-heading {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1.5rem;
            letter-spacing: -0.035em;
            line-height: 1.1;
        }
        .contact-intro {
            font-size: 1.125rem;
            color: var(--slate-600);
            font-weight: 300;
            margin-bottom: 2.5rem;
            line-height: 1.7;
        }
        .contact-items { display: flex; flex-direction: column; gap: 1.5rem; }
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1.25rem;
        }
        .contact-item-icon {
            width: 3.5rem; height: 3.5rem;
            background: rgba(41,54,146,0.05);
            border-radius: 0.5rem;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            color: var(--primary);
            font-size: 1.25rem;
            transition: background 0.3s, color 0.3s;
        }
        .contact-item:hover .contact-item-icon { background: var(--primary); color: var(--white); }
.contact-item h4, .contact-item h3 { font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; }
        .contact-item p, .contact-item a { color: var(--slate-600); font-weight: 300; }
        .contact-item a.map-link { color: var(--accent); font-size: 0.875rem; font-weight: 600; display: inline-block; margin-top: 0.5rem; }
        .contact-item a.map-link:hover { text-decoration: underline; }
        .contact-item p.tel { font-size: 1.125rem; }
        .contact-whatsapp {
            color: #16a34a;
            font-size: 0.875rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .contact-whatsapp:hover { text-decoration: underline; }
        /* .contact-item a (0,1,1) was overriding the green; match its specificity + class. */
        .contact-item a.contact-whatsapp { color: #16a34a; font-weight: 600; display: inline-flex; }
        .contact-social { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--slate-100); }
.contact-social h4, .contact-social h3 { font-weight: 700; color: var(--primary); margin-bottom: 1rem; }
        .social-row { display: flex; gap: 1rem; }
        .social-btn {
            width: 3rem; height: 3rem;
            border-radius: 9999px;
            color: var(--white);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.125rem;
            transition: transform 0.2s;
        }
        .social-btn:hover { transform: scale(1.1); }

        .contact-form-box {
            background: var(--slate-50);
            padding: 2.5rem;
            border-radius: 1rem;
            box-shadow: 0 20px 40px rgba(148,163,184,0.15);
            border: 1px solid var(--slate-100);
        }
        .contact-form-box h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1.5rem;
            letter-spacing: -0.025em;
        }
        .form-row {
            display: grid;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }
        .form-group { margin-bottom: 1.5rem; }
        .form-group:last-of-type { margin-bottom: 0; }
        .form-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }
        .form-input {
            width: 100%;
            background: var(--white);
            border: 1px solid var(--slate-200);
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            color: var(--slate-700);
            font-family: inherit;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41,54,146,0.1); }
        textarea.form-input { resize: none; }
        .form-submit {
            width: 100%;
            background: var(--primary);
            color: var(--white);
            padding: 1rem;
            border: none;
            border-radius: 0.5rem;
            font-family: inherit;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            box-shadow: 0 8px 24px rgba(41,54,146,0.2);
            transition: background 0.3s;
            margin-top: 1.5rem;
        }
        .form-submit:hover { background: var(--secondary); }
        .form-submit i { transition: transform 0.3s; }
        .form-submit:hover i { transform: translateX(4px); }
        .hidden-field { display: none; }

        /* ═══════════════════════════════════════════════════ */
        /*  FOOTER                                             */
        /* ═══════════════════════════════════════════════════ */
        .footer {
            background: var(--slate-900);
            color: var(--white);
            padding: 4rem 0;
            border-top: 1px solid #1e293b;
        }
        .footer-grid {
            display: grid;
            gap: 3rem;
            margin-bottom: 3rem;
        }
        @media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2,1fr); } }
        @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 2fr; } }
        .footer-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
        .footer-logo img { width: 3rem; height: 3rem; object-fit: contain; }
        .footer-logo span { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.025em; }
        .footer-desc { color: #94a3b8; font-size: 0.875rem; line-height: 1.7; font-weight: 300; margin-bottom: 1.5rem; }
        .footer-nav-title {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent);
            margin-bottom: 1.5rem;
        }
        .footer-nav-list { display: flex; flex-direction: column; gap: 0.75rem; }
        .footer-nav-list a { font-size: 0.875rem; color: #94a3b8; transition: color 0.2s; }
        .footer-nav-list a:hover { color: var(--white); }
        .footer-nav-list a.active-page { color: var(--white); }
        .footer-nav-list a.active-page:hover { color: var(--accent); }
        .footer-contact { display: flex; flex-direction: column; gap: 1rem; }
        .footer-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: #94a3b8; }
        .footer-contact-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
        .footer-contact-item a { color: #94a3b8; transition: color 0.2s; }
        .footer-contact-item a:hover { color: var(--white); }
        .footer-bottom {
            padding-top: 2rem;
            border-top: 1px solid #1e293b;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
            font-size: 0.75rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-align: center;
        }
        @media (min-width: 768px) {
            .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
        }
        .footer-bottom a { color: var(--accent); font-weight: 500; transition: color 0.2s; }
        .footer-bottom a:hover { color: var(--white); }
        .footer-policy-links { display: flex; gap: 1.5rem; }
        .footer-policy-links a { color: #64748b; transition: color 0.2s; }
        .footer-policy-links a:hover { color: var(--white); }

        body.menu-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
            top: 0; left: 0;
            touch-action: none;
        }
    

      /* ── Hero: background photo, brand-blue veil, title + CTAs ── */
      .svc-hero { position:relative; min-height:clamp(24rem,60vh,32rem); display:flex; align-items:center;
                  overflow:hidden; background:var(--primary); }
      .svc-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
      .svc-hero-veil { position:absolute; inset:0;
        background:linear-gradient(90deg, rgba(41,54,146,.94) 0%, rgba(41,54,146,.80) 45%, rgba(41,54,146,.45) 100%); }
      .svc-hero-in { position:relative; z-index:2; width:100%; max-width:78rem; margin:auto;
                     padding:8rem 1.5rem 4rem; color:var(--white); }
      .svc-eyebrow { display:inline-flex; align-items:center; gap:.75rem; font-size:.6875rem; font-weight:700;
        letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1.25rem; }
      .svc-eyebrow::before { content:''; width:2rem; height:2px; background:var(--accent); }
      .svc-hero h1 { font-size:clamp(2.25rem,6vw,3.75rem); font-weight:700; line-height:1.15;
        letter-spacing:-.035em; color:var(--white); margin:0 0 1.5rem; max-width:20ch; }
      .svc-hero-sub { font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.65; font-weight:300;
        color:rgba(255,255,255,.85); max-width:48ch; margin:0 0 2rem; }
      .svc-cta { display:flex; flex-wrap:wrap; gap:.75rem; }
      /* Buttons match the site's .btn-cta-* exactly: square, no radius. */
      .svc-b { display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
        padding:1rem 2.5rem; font-size:.875rem; font-weight:700; letter-spacing:.1em;
        text-transform:uppercase; text-decoration:none; transition:background .3s, color .3s; }
      .svc-b1 { background:var(--accent); color:var(--white); box-shadow:0 8px 24px rgba(209,160,84,.2); }
      .svc-b1:hover { background:rgba(209,160,84,.9); }
      .svc-b2 { background:rgba(255,255,255,.1); backdrop-filter:blur(4px);
        border:2px solid rgba(255,255,255,.3); color:var(--white); }
      .svc-b2:hover { background:var(--white); color:var(--primary); }

      /* ── Intro ── */
      .svc-intro { background:var(--white); padding:4.5rem 0; }
      .svc-w { max-width:78rem; margin:auto; padding:0 1.5rem; }
      .svc-intro-g { display:grid; gap:2rem; }
      @media (min-width:900px){ .svc-intro-g { grid-template-columns:1fr 1.6fr; gap:4rem; } }
      .svc-tag { font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
        color:var(--accent); }
      .svc-intro h2 { font-weight:700; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--primary);
        letter-spacing:-.02em; margin:.5rem 0 0; line-height:1.2; }
      .svc-intro p { color:var(--slate-600); line-height:1.75; font-size:1rem; margin:0 0 1rem; }
      .svc-intro p:last-child { margin-bottom:0; }
      .svc-faq h3 { font-weight:700; font-size:1.0625rem; color:var(--primary); line-height:1.35;
        margin:1.75rem 0 .5rem; }
      .svc-faq h3:first-child { margin-top:0; }

      /* ── Scope cards ── */
      .svc-scope { background:var(--cream); padding:5rem 0; }
      .svc-h { font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
        color:var(--stone); margin:0 0 2rem; display:flex; align-items:center; gap:1rem; }
      .svc-h::after { content:''; flex:1; height:1px; background:var(--slate-200); }
      .svc-cards { display:grid; gap:1.25rem; }
      @media (min-width:760px){ .svc-cards { grid-template-columns:repeat(2,1fr); } }
      @media (min-width:1100px){ .svc-cards { grid-template-columns:repeat(3,1fr); } }
      .svc-card { background:var(--white); border:1px solid var(--slate-200); border-top:3px solid var(--accent);
        padding:1.75rem 1.5rem; display:flex; flex-direction:column; transition:.28s; }
      .svc-card:hover { border-color:var(--primary); border-top-color:var(--accent);
        transform:translateY(-4px); box-shadow:0 20px 34px -22px rgba(41,54,146,.5); }
      .svc-card-n { font-size:.6875rem; font-weight:700; letter-spacing:.14em; color:var(--accent);
        font-variant-numeric:tabular-nums; margin-bottom:.6rem; }
      .svc-card h3 { font-weight:700; font-size:1.0625rem; color:var(--primary); letter-spacing:-.01em; margin:0 0 .6rem; }
      .svc-card p { font-size:.875rem; line-height:1.65; color:var(--slate-600); margin:0 0 1rem; }
      .svc-card ul { list-style:none; padding:0; margin:auto 0 0; border-top:1px solid var(--slate-100); }
      .svc-card li { position:relative; padding:.45rem 0 .45rem 1rem; font-size:.8125rem; color:var(--slate-500);
        border-bottom:1px solid var(--slate-100); }
      .svc-card li:last-child { border-bottom:0; }
      .svc-card li::before { content:''; position:absolute; left:0; top:.95rem; width:.3rem; height:.3rem;
        background:var(--accent); border-radius:50%; }

      /* ── Work gallery: real project photography ── */
      .svc-gal { background:var(--white); padding:5rem 0; }
      .svc-gal-grid { display:grid; gap:1.25rem; }
      @media (min-width:760px){ .svc-gal-grid { grid-template-columns:repeat(3,1fr); } }
      .svc-shot { margin:0; }
      .svc-shot img { width:100%; height:15rem; object-fit:cover; display:block; background:var(--slate-200); }
      .svc-shot figcaption { margin-top:.75rem; font-size:.75rem; line-height:1.5; color:var(--slate-500);
        border-left:2px solid var(--accent); padding-left:.75rem; }

      /* ── Location + map ── */
      .svc-loc { background:var(--primary); color:var(--white); padding:4.5rem 0; }
      .svc-loc-g { display:grid; gap:2.5rem; align-items:center; }
      @media (min-width:900px){ .svc-loc-g { grid-template-columns:.9fr 1.1fr; } }
      .svc-loc h2 { font-weight:800; letter-spacing:-.025em; font-size:clamp(1.5rem,2.6vw,2.125rem);
        line-height:1.12; color:var(--white); margin:0 0 1rem; }
      .svc-loc p { color:rgba(255,255,255,.75); line-height:1.7; font-size:.9375rem; margin:0 0 1.5rem; max-width:42ch; }
      .svc-nap { list-style:none; padding:0; margin:0; font-size:.875rem; color:rgba(255,255,255,.72); line-height:2; }
      .svc-nap b { color:var(--accent); font-weight:700; }
      .svc-nap a { color:var(--white); }
      .svc-map { border:1px solid rgba(255,255,255,.22); line-height:0; }
      .svc-map iframe { width:100%; height:21rem; border:0; display:block; }
      /* ── Service pager: prev / all / next ── */
      .svc-pager { background:var(--cream); border-top:1px solid var(--slate-200); padding:2.5rem 0; }
      .svc-pager-g { max-width:78rem; margin:auto; padding:0 1.5rem; display:grid; gap:1rem;
        grid-template-columns:1fr; align-items:stretch; }
      @media (min-width:820px){ .svc-pager-g { grid-template-columns:1fr auto 1fr; gap:1.5rem; align-items:center; } }
      .svc-pg { display:flex; flex-direction:column; gap:.35rem; padding:1.25rem 1.5rem; text-decoration:none;
        border:1px solid var(--slate-200); background:var(--white); transition:border-color .25s, transform .25s; }
      .svc-pg:hover { border-color:var(--primary); transform:translateY(-2px); }
      .svc-pg-k { font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
      .svc-pg-n { font-size:1rem; font-weight:700; color:var(--primary); line-height:1.3; }
      .svc-pg-next { text-align:right; }
      .svc-pg-all { display:inline-flex; align-items:center; justify-content:center; text-align:center;
        padding:1rem 2rem; background:var(--primary); color:var(--white); text-decoration:none;
        font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:background .25s; }
      .svc-pg-all:hover { background:var(--secondary); }
    
/* Skip link: off-screen until focused, then pinned top-left. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:#293692;color:#fff;
  padding:.75rem 1.25rem;font-weight:600;font-size:.875rem;text-decoration:none;border-radius:0 0 4px 0}
.skip-link:focus{left:0;top:0;outline:3px solid #d1a054;outline-offset:2px}

/* Touch targets (WCAG 2.2 AA, 24x24 CSS px minimum).
   These are short inline text links whose line box is only 16-20px tall. The
   padding grows the hit area and the equal negative margin cancels it, so the
   layout does not move. */
footer a,
.footer a,
.contact-item a,
.contact-details a,
.footer-contact a,
.footer-policy-links a,
.map-link,
.contact-whatsapp,
.read-more {
  display: inline-block;
  padding-block: 0.3rem;
  margin-block: -0.3rem;
  min-height: 24px;
}
footer .footer-logo,
.footer .footer-logo,
footer a img,
.footer a img { margin-block: 0; }

/* Remaining short inline controls: same padding/negative-margin trick. */
main a.inline-block,
main a.text-accent,
main a.text-green-600,
button.text-accent,
.team-bio-toggle,
.read-more-btn,
.svc-loc a,
.location-note a {
  display: inline-block;
  padding-block: 0.3rem;
  margin-block: -0.3rem;
  min-height: 24px;
}

/* Self-hosted Inter. One variable file covers every weight the site uses (300-800),
   subset to Latin + Latin-1 + the punctuation actually present in the copy.
   Replaces the render-blocking Google Fonts stylesheet. */
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter-latin-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}