/*
Theme Name: Mano Procurement Block Theme
Author: [Your Name]
Description: FSE Block Theme converted from Next.js
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
License: GPL-2.0-or-later
Text Domain: manoprocurement
Tags: full-site-editing, block-patterns, custom-colors, custom-logo
*/

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap");


:root {
            --brand-navy: #08194c;
            --brand-orange: #ff8a1f;
            --brand-orange-soft: #ffb06a;
            --brand-orange-wash: rgba(255, 138, 31, 0.18);
            --brand-orange-glow-1: rgba(255, 138, 31, 0.42);
            --brand-orange-glow-2: rgba(255, 138, 31, 0.5);
            --brand-orange-muted: rgba(255, 138, 31, 0.84);
            --brand-orange-muted-strong: rgba(255, 138, 31, 0.96);
            --font-inter: "Barlow";
            --font-space-grotesk: "Barlow";
        }

        body {
            font-family: var(--font-inter), sans-serif;
            background-color: #ffffff;
            color: #000000;
            overflow-x: hidden;
            min-width: 320px;
        }

        img {
            display: block;
            max-width: 100%;
        }
        h1, h2, h3 {
            font-family: var(--font-space-grotesk), sans-serif;
            text-transform: uppercase;
            letter-spacing: -0.02em;
        }

        .video-tab-container {
            position: relative;
            background: #2d3436;
            clip-path: polygon(
                0% 100%,
                0% 12%,
                18% 12%,
                20% 0%,
                100% 0%,
                100% 100%
            );
            border-radius: 0 2rem 2rem 2rem;
        }

        .chamfer-card {
            background: white;
            clip-path: polygon(
                0% 0%,
                88% 0%,
                100% 12%,
                100% 100%,
                12% 100%,
                0% 88%
            );
            transition: all 0.3s ease;
        }

        .reg-mark {
            position: absolute;
            color: var(--brand-orange);
            font-weight: 400;
            font-size: 1rem;
            opacity: 0.6;
        }

        .search-module {
            box-shadow: 0 10px 50px rgba(0,0,0,0.08);
            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }

        .orange-accent {
            color: var(--brand-orange);
        }
        .bg-orange-accent {
            background-color: var(--brand-orange);
        }

        .top-nav {
            height: 96px;
            max-width: 1720px;
            margin: 0 auto;
            padding: 0 36px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            column-gap: clamp(26px, 4vw, 76px);
        }

        .top-nav-left {
            display: flex;
            align-items: center;
            gap: 22px;
            min-width: 0;
        }

        .company-logo {
            height: clamp(30px, 2.5vw, 46px);
            width: auto;
            object-fit: contain;
        }

        .brand-wordmark {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(26px, 2.05vw, 35px);
            letter-spacing: -0.03em;
            line-height: 1;
            text-transform: uppercase;
            font-weight: 700;
            white-space: nowrap;
        }

        .brand-wordmark .light {
            font-weight: 500;
        }

        .lang-switch {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(18px, 1.2vw, 22px);
            letter-spacing: -0.01em;
            line-height: 1;
            color: #0f0f0f;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .top-nav-center {
            display: flex;
            align-items: center;
            gap: clamp(14px, 1.3vw, 26px);
            flex-wrap: wrap;
            justify-content: center;
            justify-self: stretch;
            white-space: nowrap;
        }

        .top-nav-center a {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(12px, 0.76vw, 15px);
            letter-spacing: 0.01em;
            line-height: 1.1;
            text-transform: uppercase;
            color: #111111;
            transition: opacity 0.2s ease;
        }

        .top-nav-center a.active-nav {
            color: var(--brand-orange);
            text-decoration: none;
        }

        .top-nav-center a:hover,
        .top-nav-right a:hover {
            opacity: 0.72;
        }

        .top-nav-right {
            justify-self: end;
            display: flex;
            align-items: center;
            gap: clamp(16px, 1.8vw, 34px);
            white-space: nowrap;
        }

        .top-nav-right .sign-up {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(14px, 0.95vw, 18px);
            letter-spacing: 0.01em;
            line-height: 1.1;
            text-transform: uppercase;
            color: #111;
        }

        .top-nav-right .sign-up.active-contact {
            color: var(--brand-orange);
            text-decoration: none;
        }

        .book-demo-btn {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(14px, 1vw, 18px);
            line-height: 1.1;
            text-transform: uppercase;
            color: var(--brand-orange);
            border: 1px solid var(--brand-orange);
            border-radius: 12px;
            padding: 14px 30px;
            background: var(--brand-navy);
            transition: background-color 0.25s ease;
        }

        .book-demo-btn:hover {
            background-color: #0d2468;
        }

        .hero-intro {
            max-width: 980px;
            margin: 0 auto 56px;
            padding: 10px 18px 0;
            text-align: center;
            position: relative;
        }

        .wp-block-post-content {
            margin-top: 0;
        }

        .wp-block-post-content > :first-child {
            margin-top: 0;
        }

        .hero-title {
            font-size: clamp(56px, 7.2vw, 102px);
            line-height: 0.92;
            letter-spacing: -0.03em;
            margin-bottom: 26px;
        }

        .hero-subtitle {
            font-size: clamp(14px, 1.15vw, 17px);
            max-width: 600px;
            margin: 0 auto;
            color: #4b4b4b;
            line-height: 1.45;
        }

        .hero-intro .reg-mark {
            display: none;
        }

        .hero-heading-wrap {
            width: min(1120px, 94vw);
            margin: 0;
            margin-left: clamp(20px, 3vw, 42px);
            position: relative;
            z-index: 3;
        }

        section.pt-12.pb-0 > .hero-heading-wrap {
            margin-top: 50px;
            margin-bottom: 0px;
        }

        .hero-heading-kicker {
            font-size: 11px;
            line-height: 1;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: #7b7b7b;
            margin-bottom: 8px;
        }

        .hero-heading-text {
            font-size: clamp(22px, 2.1vw, 34px);
            line-height: 1.1;
            color: #1f1f1f;
            font-family: var(--font-space-grotesk), sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .hero-image-full {
            --r: 34px;
            --s: 92px;
            --x: clamp(760px, 54vw, 1120px);
            --y: 0px;
            margin-top: 0;
            width: 100vw;
            margin-left: calc(50% - 50vw);
            height: clamp(620px, 64vw, 920px);
            overflow: hidden;
            background-color: var(--brand-navy);
            background-image:
                linear-gradient(120deg, rgba(8, 25, 76, 0.8), rgba(8, 25, 76, 0.25)),
                url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&q=80&w=2400');
            background-size: cover;
            background-position: 62% 45%;
            border-radius: var(--r);
            --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
            --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
            --_d: calc(var(--s) + var(--r));
            -webkit-mask:
                calc(var(--_d) + var(--x)) 0 var(--_m),
                0 calc(var(--_d) + var(--y)) var(--_m),
                radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px))
                calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
                var(--_g) calc(var(--_d) + var(--x)) 0,
                var(--_g) 0 calc(var(--_d) + var(--y));
            -webkit-mask-repeat: no-repeat;
            mask:
                calc(var(--_d) + var(--x)) 0 var(--_m),
                0 calc(var(--_d) + var(--y)) var(--_m),
                radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px))
                calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
                var(--_g) calc(var(--_d) + var(--x)) 0,
                var(--_g) 0 calc(var(--_d) + var(--y));
            mask-repeat: no-repeat;
        }

        .hero-image-full img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 62% 45%;
        }

        .hero-slider {
            position: relative;
        }

        .hero-slider-overlay {
            position: absolute;
            inset: 0;
            z-index: 5;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: clamp(14px, 2.2vw, 30px) clamp(22px, 4vw, 56px);
            pointer-events: none;
        }

        .hero-slider-overlay .hero-intro {
            max-width: min(980px, 92vw);
            margin: 0;
            padding: 0;
            text-align: center;
            z-index: 6;
        }

        .hero-slider-overlay .hero-title {
            color: #ffffff;
            text-shadow: 0 2px 14px rgba(8, 25, 76, 0.35);
        }

        .hero-slider-overlay .hero-subtitle {
            max-width: 700px;
            margin: 0;
            color: rgba(255, 255, 255, 0.92);
            text-shadow: 0 1px 10px rgba(8, 25, 76, 0.28);
        }

        .hero-slider-overlay .hero-heading-wrap {
            width: min(1120px, 92vw);
            margin: 0;
            margin-left: 0;
            z-index: 6;
        }

        .hero-slider-overlay .hero-heading-kicker {
            color: rgba(255, 255, 255, 0.9);
        }

        .hero-slider-overlay .hero-heading-text {
            color: #ffffff;
            text-shadow: 0 2px 12px rgba(8, 25, 76, 0.3);
        }

        .hero-slider-track {
            height: 100%;
            display: flex;
            transition: transform 0.45s ease;
            will-change: transform;
        }

        .hero-slide {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .hero-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 62% 45%;
        }

        .hero-slider::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.38) 50%, rgba(0, 0, 0, 0.12) 100%);
            z-index: 2;
            pointer-events: none;
        }

        .hero-slider-arrow {
            display: none;
        }

        .hero-slider .slider-spinner,
        .hero-slider .hero-slider-spinner,
        .hero-slider .loading-spinner,
        .hero-slider [class*="spinner"],
        .hero-slider .swiper-pagination,
        .hero-slider .slick-dots,
        .hero-slider .owl-dots {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

        /* ── Cinematic home hero ───────────────────────────────── */

        .mp-is-home header.wp-block-group {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 200;
            background: transparent !important;
        }

        .mp-is-home .company-logo {
            filter: brightness(0) invert(1);
        }

        .mp-is-home header.wp-block-group .top-nav-center a,
        .mp-is-home header.wp-block-group .top-nav-right a.sign-up {
            color: rgba(255, 255, 255, 0.9);
        }

        .mp-is-home header.wp-block-group .top-nav-center a:hover,
        .mp-is-home header.wp-block-group .top-nav-right a:hover {
            opacity: 0.75;
        }

        .home-hero-section {
            margin: 0;
            padding: 0;
            line-height: 0;
        }

        .home-hero-section .hero-image-full.hero-slider {
            height: 100vh;
            min-height: 600px;
            border-radius: 0;
            -webkit-mask: none !important;
            mask: none !important;
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-top: 0;
            background-image: none;
        }

        .hero-cinematic-overlay {
            position: absolute;
            inset: 0;
            z-index: 5;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0 clamp(28px, 5vw, 72px) clamp(48px, 7vh, 88px);
            gap: clamp(24px, 3vw, 56px);
            pointer-events: none;
        }

        .hero-cinematic-left {
            flex: 1 1 auto;
            max-width: 680px;
        }

        .hero-cinematic-headline {
            font-size: clamp(36px, 5vw, 86px);
            font-weight: 800;
            line-height: 0.96;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            color: #ffffff;
            margin: 0;
            text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
        }

        .hero-cinematic-right {
            flex: 0 0 auto;
            max-width: 360px;
            text-align: left;
            pointer-events: auto;
            padding-bottom: 4px;
        }

        .hero-cinematic-desc {
            color: rgba(255, 255, 255, 0.88);
            font-size: clamp(14px, 1vw, 16px);
            line-height: 1.6;
            margin: 0 0 24px;
        }

        .hero-cinematic-cta {
            display: inline-block;
            background: var(--brand-orange);
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 15px 30px;
            text-decoration: none;
            transition: background-color 0.2s ease;
            line-height: 1;
        }

        .hero-cinematic-cta:hover {
            background: #d97311;
            color: #ffffff;
        }

        @media (max-width: 768px) {
            .hero-cinematic-overlay {
                flex-direction: column;
                justify-content: flex-end;
                align-items: flex-start;
                padding: 0 24px 52px;
                gap: 20px;
            }

            .hero-cinematic-right {
                max-width: 100%;
            }

            .home-hero-section .hero-image-full.hero-slider {
                min-height: 520px;
            }
        }

        .how-section {
            max-width: 1760px;
            margin: 0 auto;
            padding: 132px clamp(20px, 3vw, 46px) 138px;
        }

        .how-top {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            column-gap: clamp(34px, 5vw, 96px);
            align-items: start;
            margin-bottom: 36px;
        }

        .how-title {
            font-size: clamp(62px, 6.5vw, 104px);
            line-height: 0.9;
            letter-spacing: -0.04em;
            margin: 0;
        }

        .how-copy-title {
            margin: 0 0 12px;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(17px, 1.15vw, 22px);
            line-height: 1.15;
            text-transform: uppercase;
            letter-spacing: -0.01em;
        }

        .how-copy-body {
            margin: 0;
            max-width: 560px;
            color: #2f2f2f;
            font-size: clamp(18px, 1.15vw, 22px);
            line-height: 1.55;
        }

        .watch-row {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            margin: 0 0 12px;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(15px, 0.95vw, 18px);
            text-transform: uppercase;
            letter-spacing: -0.01em;
        }

        .watch-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--brand-orange);
            box-shadow: 14px 0 0 var(--brand-orange-glow-1);
        }

        .how-video {
            --r: 34px;
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 7.2;
            max-height: 560px;
            overflow: hidden;
            background-color: var(--brand-navy);
            background-image: url('https://images.pexels.com/photos/236089/pexels-photo-236089.jpeg?auto=compress&cs=tinysrgb&w=2200');
            background-size: cover;
            background-position: center;
            border-radius: var(--r);
            clip-path: polygon(
                0% 100%,
                0% 12%,
                18% 12%,
                20% 0%,
                100% 0%,
                100% 100%
            );
        }

        .how-video img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .how-play {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
        }

        .how-play-btn {
            width: clamp(40px, 3.2vw, 56px);
            height: clamp(28px, 2.2vw, 38px);
            border: 0;
            border-radius: 7px;
            background: var(--brand-orange);
            color: #fff;
            font-size: clamp(15px, 1.2vw, 20px);
            line-height: 1;
            padding-left: 3px;
            cursor: pointer;
        }

        .benefits-section {
            max-width: 1760px;
            margin: 0 auto;
            padding: 126px clamp(20px, 3vw, 46px) 126px;
        }

        .benefits-title {
            margin: 0 0 34px;
            font-size: clamp(66px, 6.2vw, 102px);
            line-height: 0.92;
            letter-spacing: -0.03em;
        }

        .benefits-tabs {
            display: flex;
            gap: 24px;
            align-items: center;
            margin-bottom: 8px;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(18px, 1.05vw, 22px);
            text-transform: uppercase;
            letter-spacing: -0.01em;
            font-weight: 700;
        }

        .benefits-tabs .active {
            border-bottom: 3px solid var(--brand-orange);
            padding-bottom: 5px;
        }

        .benefits-tabs .muted {
            color: #6f6f6f;
        }

        .benefits-sub {
            margin: 0 0 48px;
            font-size: clamp(18px, 1.05vw, 22px);
            color: #2d2d2d;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 26px;
        }

        .benefit-card {
            position: relative;
            background: var(--brand-orange);
            border: 1px solid var(--brand-orange);
            border-radius: 40px;
            clip-path: polygon(0 0, 82% 0, 100% 28%, 100% 100%, 0 100%);
            padding: 54px 42px 48px;
            min-height: 352px;
        }

        .benefit-mark {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--brand-orange);
            box-shadow: 16px 0 0 var(--brand-orange-glow-2);
        }

        .benefit-mark.tl {
            left: -2px;
            top: -18px;
        }

        .benefit-mark.br {
            right: -14px;
            bottom: -14px;
        }

        .benefit-icon {
            width: 56px;
            height: 56px;
            color: #ffffff;
            margin-bottom: 28px;
        }

        .benefit-card h3 {
            margin: 0 0 16px;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(29px, 1.8vw, 38px);
            line-height: 1;
            letter-spacing: -0.01em;
            color: #ffffff;
        }

        .benefit-card p {
            margin: 0;
            font-size: clamp(18px, 1.05vw, 20px);
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.92);
        }

        .benefits-link {
            margin-top: 40px;
            text-align: center;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(18px, 1vw, 22px);
            text-transform: uppercase;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 6px;
        }

        .proof-section {
            max-width: 1760px;
            margin: 0 auto;
            padding: 32px clamp(20px, 3vw, 46px) 126px;
        }

        .proof-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
            gap: 30px;
            align-items: stretch;
        }

        .proof-panel {
            border: 1px solid #d8d8d8;
            border-radius: 34px;
            background: #fff;
            padding: 34px 36px;
            position: relative;
            overflow: hidden;
            clip-path: polygon(0 0, 86% 0, 100% 18%, 100% 100%, 0 100%, 0 14%);
        }

        .proof-panel::before,
        .proof-panel::after {
            content: "+";
            position: absolute;
            color: var(--brand-orange-muted);
            font-size: 16px;
            line-height: 1;
        }

        .proof-panel::before {
            left: 12px;
            top: 10px;
        }

        .proof-panel::after {
            right: 12px;
            bottom: 10px;
        }

        .proof-title {
            margin: 0 0 18px;
            font-size: clamp(42px, 4vw, 64px);
            line-height: 0.94;
            letter-spacing: -0.03em;
        }

        .proof-copy {
            margin: 0;
            max-width: 520px;
            font-size: clamp(16px, 1vw, 19px);
            line-height: 1.6;
            color: #333;
        }

        .stat-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .stat-card {
            border: 1px solid #e3e3e3;
            border-radius: 22px;
            padding: 22px 20px;
            background: #fcfcfc;
            clip-path: polygon(0 0, 84% 0, 100% 22%, 100% 100%, 0 100%);
        }

        .stat-value {
            display: block;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(30px, 2.1vw, 44px);
            line-height: 1;
            margin-bottom: 10px;
        }

        .stat-label {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6a6a6a;
        }

        .process-list {
            display: grid;
            gap: 14px;
        }

        .process-item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            align-items: start;
            border-top: 1px solid #ececec;
            padding-top: 16px;
        }

        .process-item:first-child {
            border-top: 0;
            padding-top: 0;
        }

        .process-num {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--brand-orange-soft);
            color: var(--brand-orange);
            display: grid;
            place-items: center;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: 18px;
            line-height: 1;
            flex: 0 0 auto;
        }

        .process-item h3 {
            margin: 0 0 8px;
            font-size: clamp(21px, 1.4vw, 28px);
            line-height: 1;
        }

        .process-item p {
            margin: 0;
            font-size: clamp(15px, 0.95vw, 18px);
            line-height: 1.55;
            color: #383838;
        }

        .cta-section {
            max-width: 1760px;
            margin: 0 auto;
            padding: 0 clamp(20px, 3vw, 46px) 112px;
        }

        .cta-shell {
            background: var(--brand-navy);
            color: #ffffff;
            border-radius: 40px;
            padding: 42px 42px 46px;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) auto;
            gap: 24px;
            align-items: center;
            position: relative;
            overflow: hidden;
            clip-path: polygon(0 0, 90% 0, 100% 24%, 100% 100%, 0 100%, 0 16%);
        }

        .cta-shell::before,
        .cta-shell::after {
            content: "+";
            position: absolute;
            color: var(--brand-orange-muted-strong);
            font-size: 16px;
            line-height: 1;
        }

        .cta-shell::before {
            left: 14px;
            top: 12px;
        }

        .cta-shell::after {
            right: 14px;
            bottom: 12px;
        }

        .cta-shell h2 {
            margin: 0 0 14px;
            font-size: clamp(46px, 4.4vw, 74px);
            line-height: 0.92;
            letter-spacing: -0.03em;
        }

        .cta-shell p {
            margin: 0;
            max-width: 620px;
            font-size: clamp(16px, 1vw, 19px);
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.78);
        }

        .cta-actions {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .cta-primary,
        .cta-secondary {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(14px, 0.95vw, 17px);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            border-radius: 12px;
            padding: 16px 22px;
            border: 1px solid transparent;
        }

        .cta-primary {
            background: var(--brand-navy);
            color: var(--brand-orange);
            border-color: var(--brand-orange);
        }

        .cta-secondary {
            border-color: var(--brand-orange);
            color: var(--brand-orange);
            background: var(--brand-navy);
        }

        .inner-hero {
            max-width: 1760px;
            margin: 0 auto;
            padding: 78px clamp(20px, 3vw, 46px) 34px;
        }

        .inner-kicker {
            margin: 0 0 12px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6f6f6f;
            font-weight: 600;
        }

        .inner-title {
            margin: 0 0 16px;
            font-size: clamp(56px, 6.5vw, 100px);
            line-height: 0.92;
            letter-spacing: -0.03em;
            color: var(--brand-navy);
        }

        .inner-subtitle {
            margin: 0;
            max-width: 760px;
            font-size: clamp(17px, 1.05vw, 20px);
            line-height: 1.6;
            color: #353535;
        }

        .inner-hero-media {
            margin: 30px 0 0;
            width: 100%;
            height: clamp(440px, 52vw, 760px);
            border-radius: 30px;
            overflow: hidden;
            clip-path: polygon(0 100%, 0 14%, 14% 14%, 16% 0, 100% 0, 100% 100%);
            position: relative;
            background: var(--brand-navy);
        }

        .inner-hero-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, rgba(8, 25, 76, 0.5), rgba(8, 25, 76, 0.12));
            pointer-events: none;
        }

        .inner-hero-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .about-hero-media img {
            object-position: center 38%;
        }

        .services-hero-media img {
            object-position: center 52%;
        }

        .services-hero-media {
            width: calc(100% + 20vw);
            margin-left: -10vw;
        }

        .about-hero-media,
        .projects-hero-media {
            width: calc(100% + 20vw);
            margin-left: -10vw;
        }

        .projects-hero-media img {
            object-position: center 58%;
        }

        .inner-section {
            max-width: 1760px;
            margin: 0 auto;
            padding: 16px clamp(20px, 3vw, 46px) 102px;
        }

        .inner-grid {
            display: grid;
            gap: 22px;
        }

        .inner-grid-two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-bottom: 22px;
        }

        .inner-grid-three {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .info-card {
            background: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 28px;
            clip-path: polygon(0 0, 86% 0, 100% 20%, 100% 100%, 0 100%);
            padding: 30px 26px;
        }

        .info-card h2 {
            margin: 0 0 12px;
            font-size: clamp(26px, 1.9vw, 36px);
            line-height: 0.98;
        }

        .info-card p {
            margin: 0;
            font-size: clamp(15px, 0.95vw, 18px);
            line-height: 1.6;
            color: #3c3c3c;
        }

        .info-card-wide {
            margin-bottom: 22px;
        }

        .kpi-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .kpi-item {
            border: 1px solid #e6e6e6;
            background: #fafafa;
            border-radius: 20px;
            padding: 22px 20px;
            text-align: center;
        }

        .kpi-value {
            display: block;
            font-family: var(--font-space-grotesk), sans-serif;
            color: var(--brand-navy);
            font-size: clamp(34px, 2.5vw, 46px);
            line-height: 1;
            margin-bottom: 8px;
        }

        .kpi-label {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6d6d6d;
        }

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

        .project-card {
            border: 1px solid #d8d8d8;
            border-radius: 30px;
            background: #fff;
            padding: 32px 28px;
            clip-path: polygon(0 0, 88% 0, 100% 18%, 100% 100%, 0 100%, 0 12%);
            position: relative;
            overflow: hidden;
        }

        .project-card::before {
            content: "+";
            position: absolute;
            right: 12px;
            top: 10px;
            color: var(--brand-orange-muted);
            font-size: 15px;
            line-height: 1;
        }

        .project-card h2 {
            margin: 0 0 12px;
            font-size: clamp(28px, 2vw, 38px);
            line-height: 0.98;
        }

        .project-card p {
            margin: 0 0 18px;
            font-size: clamp(15px, 0.95vw, 18px);
            line-height: 1.6;
            color: #363636;
        }

        .project-meta {
            display: inline-block;
            border: 1px solid var(--brand-orange-soft);
            color: var(--brand-navy);
            border-radius: 999px;
            padding: 7px 12px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            font-weight: 600;
        }

        .contact-section {
            padding-top: 8px;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
            gap: 24px;
        }

        .contact-card,
        .contact-form {
            background: #fff;
            border: 1px solid #d8d8d8;
            border-radius: 30px;
            padding: 30px 26px;
        }

        .contact-card {
            clip-path: polygon(0 0, 88% 0, 100% 16%, 100% 100%, 0 100%);
        }

        .contact-form {
            clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 0 100%);
        }

        .contact-card h2,
        .contact-form h2 {
            margin: 0 0 18px;
            font-size: clamp(28px, 2vw, 38px);
            line-height: 0.95;
        }

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

        .contact-list li {
            display: grid;
            gap: 4px;
            padding-bottom: 12px;
            border-bottom: 1px solid #ececec;
        }

        .contact-list li:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .contact-label {
            font-size: 11px;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: #7a7a7a;
            font-weight: 600;
        }

        .contact-list a,
        .contact-list span {
            font-size: clamp(16px, 1vw, 19px);
            line-height: 1.45;
            color: #202020;
        }

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

        .contact-form label {
            display: grid;
            gap: 8px;
        }

        .contact-form label span {
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #666;
            font-weight: 600;
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            border: 1px solid #d8d8d8;
            border-radius: 10px;
            background: #fff;
            color: #1f1f1f;
            padding: 12px 12px;
            font-size: 14px;
            line-height: 1.4;
        }

        .contact-form input:focus,
        .contact-form select:focus,
        .contact-form textarea:focus {
            outline: 2px solid rgba(255, 138, 31, 0.22);
            border-color: var(--brand-orange);
            outline-offset: 0;
        }

        .contact-full {
            grid-column: 1 / -1;
        }

        .contact-submit {
            margin-top: 16px;
            border: 1px solid var(--brand-orange);
            background: var(--brand-navy);
            color: var(--brand-orange);
            border-radius: 12px;
            padding: 12px 20px;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: 14px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .contact-overview-panel {
            margin-bottom: 24px;
        }

        .contact-overview-copy h2 {
            max-width: 18ch;
        }

        .contact-overview-subcopy {
            max-width: 70ch;
        }

        .contact-rating-pill {
            background: var(--brand-navy);
            border-color: var(--brand-navy);
            color: #ffffff;
        }

        .contact-pill-list {
            margin-top: 0;
        }

        .contact-layout-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
            gap: 20px;
            align-items: start;
        }

        .contact-direct-card,
        .contact-modern-form,
        .contact-map-card {
            border: 1px solid rgba(8, 25, 76, 0.1);
            border-radius: 26px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
            box-shadow: 0 18px 36px rgba(8, 25, 76, 0.05);
            clip-path: none;
            overflow: hidden;
        }

        .contact-map-card {
            grid-column: 1 / -1;
            padding: 30px 30px 0;
        }

        .contact-map-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 12px;
        }

        .contact-map-head h2 {
            margin: 0;
            font-size: clamp(48px, 4vw, 66px);
            line-height: 0.9;
            letter-spacing: -0.03em;
            color: var(--brand-navy);
        }

        .contact-map-link {
            border: 1px solid var(--brand-orange-soft);
            color: var(--brand-navy);
            border-radius: 999px;
            padding: 12px 24px;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 700;
            text-decoration: none;
        }

        .contact-map-copy {
            margin: 0 0 18px;
            color: #4c5467;
            font-size: 14px;
            line-height: 1.45;
        }

        .contact-map-frame {
            width: calc(100% + 60px);
            margin-left: -30px;
            margin-right: -30px;
            margin-top: 8px;
            overflow: hidden;
            border-top: 1px solid rgba(8, 25, 76, 0.12);
            background: #eef2fb;
        }

        .contact-map-frame iframe {
            width: 100%;
            height: 430px;
            border: 0;
            display: block;
        }

        /* Contact cards visual match */
        .contact-layout-grid {
            grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
            gap: 14px;
        }

        .contact-direct-card,
        .contact-modern-form {
            border: 1px solid #d9dde6;
            border-radius: 24px;
            background: #ffffff;
            box-shadow: none;
            padding: 16px 18px;
        }

        .contact-direct-card h2,
        .contact-modern-form h2 {
            margin: 0 0 12px;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(36px, 2.6vw, 46px);
            line-height: 0.96;
            letter-spacing: -0.015em;
            color: #101010;
        }

        .contact-list {
            gap: 10px;
        }

        .contact-list li {
            gap: 5px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e7eaf0;
        }

        .contact-label {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: 10px;
            letter-spacing: 0.07em;
            color: #4f5767;
            font-weight: 700;
        }

        .contact-list a,
        .contact-list span {
            font-family: var(--font-inter), sans-serif;
            font-size: clamp(15px, 0.95vw, 18px);
            line-height: 1.38;
            color: #1d2434;
        }

        .contact-form-grid {
            gap: 8px;
        }

        .contact-form label {
            gap: 5px;
        }

        .contact-form label span {
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: 9px;
            letter-spacing: 0.07em;
            color: #656c7c;
            font-weight: 700;
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            border: 1px solid #d0d5de;
            border-radius: 10px;
            background: #ffffff;
            color: #141a27;
            padding: 10px 11px;
            font-family: var(--font-inter), sans-serif;
            font-size: 13px;
            line-height: 1.35;
        }

        .contact-form textarea {
            min-height: 94px;
            resize: vertical;
        }

        .contact-submit {
            margin-top: 6px;
            border: 1px solid var(--brand-orange);
            background: var(--brand-navy);
            color: var(--brand-orange);
            border-radius: 10px;
            padding: 10px 15px;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: 11px;
            letter-spacing: 0.04em;
            font-weight: 700;
        }

        .about-overview-panel {
            display: grid;
            gap: 24px;
            margin-bottom: 28px;
            border: 1px solid #d9d9d9;
            border-radius: 30px;
            background: #ffffff;
            padding: 38px 34px 30px;
            box-shadow: 0 18px 42px rgba(8, 25, 76, 0.06);
        }

        .about-overview-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 28px;
            align-items: start;
        }

        .about-overview-copy {
            min-width: 0;
            max-width: 920px;
        }

        .about-overview-copy h2 {
            margin: 0;
            font-family: var(--font-inter), sans-serif;
            font-size: clamp(38px, 3.25vw, 62px);
            font-weight: 500;
            letter-spacing: -0.05em;
            line-height: 0.94;
            text-transform: none;
            color: var(--brand-navy);
        }

        .about-rating-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1px solid var(--brand-orange);
            background: var(--brand-orange);
            border-radius: 999px;
            padding: 11px 15px;
            white-space: nowrap;
            font-size: 13px;
            color: #ffffff;
            font-weight: 600;
            margin-top: 4px;
        }

        .about-stars {
            color: #ffffff;
            letter-spacing: 0.08em;
            font-size: 12px;
        }

        .about-overview-subcopy {
            max-width: 760px;
            margin: 0;
            font-size: clamp(15px, 0.98vw, 18px);
            line-height: 1.78;
            color: #5a5a5a;
        }

        .about-stats-row {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 22px;
            padding-top: 18px;
            border-top: 1px solid #efefef;
        }

        .about-stat-item {
            min-width: 0;
            padding-right: 10px;
            position: relative;
        }

        .about-stat-item:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 4px;
            right: 0;
            width: 1px;
            height: calc(100% - 8px);
            background: #efefef;
        }

        .about-stat-item strong {
            display: block;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(34px, 2.6vw, 50px);
            line-height: 1;
            color: var(--brand-navy);
            margin-bottom: 12px;
            font-weight: 700;
        }

        .about-stat-item span {
            display: block;
            font-size: 13px;
            line-height: 1.5;
            color: #7a7a7a;
            max-width: 180px;
        }

        .about-pill-list {
            margin-top: 2px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .about-pill {
            border: 1px solid var(--brand-orange);
            color: var(--brand-navy);
            background: #ffffff;
            border-radius: 999px;
            padding: 9px 14px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
        }

        .about-mv-grid {
            margin-bottom: 24px;
        }

        .about-mv-card,
        .about-values-card {
            min-height: 0;
        }

        .about-mv-card h3,
        .about-values-card h3 {
            font-size: clamp(24px, 1.7vw, 32px);
            line-height: 1;
            margin-bottom: 14px;
        }

        .about-mv-card p,
        .about-values-card p {
            font-size: clamp(15px, 0.96vw, 18px);
            line-height: 1.65;
        }

        .about-timeline {
            margin-top: 26px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
            position: relative;
            align-items: stretch;
        }

        .about-timeline::before {
            content: "";
            position: absolute;
            top: 22px;
            left: 28px;
            right: 28px;
            height: 1px;
            background: linear-gradient(90deg, rgba(241, 121, 11, 0.15) 0%, rgba(241, 121, 11, 0.45) 20%, rgba(8, 25, 76, 0.18) 50%, rgba(241, 121, 11, 0.45) 80%, rgba(241, 121, 11, 0.15) 100%);
        }

        .about-step {
            position: relative;
            display: grid;
            align-content: start;
            gap: 10px;
            min-height: 182px;
            border: 1px solid rgba(8, 25, 76, 0.1);
            border-radius: 26px;
            padding: 24px 24px 22px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
            box-shadow: 0 18px 36px rgba(8, 25, 76, 0.05);
            overflow: hidden;
        }

        .about-step::after {
            content: "";
            position: absolute;
            inset: auto 0 0 auto;
            width: 104px;
            height: 104px;
            border-top-left-radius: 999px;
            background: radial-gradient(circle at top left, rgba(241, 121, 11, 0.14), rgba(241, 121, 11, 0) 70%);
            pointer-events: none;
        }

        .about-step-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: var(--brand-orange);
            box-shadow: 0 0 0 7px rgba(241, 121, 11, 0.12);
        }

        .about-step-label {
            margin: 0;
            font-size: 11px;
            line-height: 1;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #7b7f8d;
            font-weight: 700;
        }

        .about-step h3 {
            margin: 0;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(28px, 2.1vw, 38px);
            line-height: 1;
            color: var(--brand-navy);
            letter-spacing: -0.05em;
        }

        .about-step-copy {
            margin: 0;
            max-width: 26ch;
            font-size: 15px;
            line-height: 1.6;
            color: #3f485f;
        }

        .about-mv-copy,
        .about-values-copy {
            max-width: 58ch;
        }

        .about-values-title {
            max-width: 15ch;
        }

        .services-overview-panel {
            margin-bottom: 24px;
        }

        .services-overview-copy h2 {
            max-width: 17ch;
        }

        .services-overview-subcopy {
            max-width: 70ch;
        }

        .services-rating-pill {
            background: var(--brand-navy);
            border-color: var(--brand-navy);
            color: #ffffff;
        }

        .services-pill-list {
            margin-top: 0;
        }

        .services-card-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .service-card {
            min-height: 0;
        }

        .service-card-copy {
            max-width: 30ch;
        }

        .service-proof-strip {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .service-proof-strip .about-overview-head {
            margin-bottom: 0;
        }

        .service-proof-strip .about-overview-copy h2 {
            max-width: none;
            font-size: clamp(34px, 2.6vw, 50px);
        }

        .service-proof-strip .about-stats-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .service-sectors {
            margin-top: 10px;
            margin-bottom: 18px;
        }

        .service-sectors .about-step-copy {
            max-width: 72ch;
        }

        .service-cta {
            margin-top: 0;
        }

        .service-cta .about-step-copy {
            max-width: 66ch;
            margin-bottom: 16px;
        }

        .service-cta .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .gallery-page-section {
            padding-top: 34px;
            padding-bottom: 44px;
            background: transparent;
            border-radius: 0;
        }

        .gallery-collage-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            grid-auto-rows: 84px;
            gap: 20px;
            width: min(1220px, 94vw);
            margin: 0 auto;
            padding: 12px;
        }

        .gallery-collage-item {
            grid-column: span 4;
            grid-row: span 3;
            border-radius: 16px;
            overflow: hidden;
            border: 0;
            background: #dbe2ec;
        }

        .gallery-collage-item:nth-child(6n + 1) {
            grid-column: span 5;
            grid-row: span 6;
        }

        .gallery-collage-item:nth-child(6n + 2) {
            grid-column: span 7;
            grid-row: span 4;
        }

        .gallery-collage-item:nth-child(6n + 3) {
            grid-column: span 4;
            grid-row: span 4;
        }

        .gallery-collage-item:nth-child(6n + 4) {
            grid-column: span 3;
            grid-row: span 4;
        }

        .gallery-collage-item:nth-child(6n + 5) {
            grid-column: span 5;
            grid-row: span 3;
        }

        .gallery-collage-item:nth-child(6n + 6) {
            grid-column: span 7;
            grid-row: span 3;
        }

        .gallery-collage-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .gallery-empty-note {
            border: 1px dashed rgba(8, 25, 76, 0.25);
            border-radius: 16px;
            padding: 18px;
            color: #4d5670;
            background: #f7f9ff;
            margin: 0;
        }

        @media (max-width: 960px) {
            .gallery-collage-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr));
                grid-auto-rows: 96px;
                gap: 14px;
            }

            .gallery-collage-item,
            .gallery-collage-item:nth-child(6n + 1),
            .gallery-collage-item:nth-child(6n + 2),
            .gallery-collage-item:nth-child(6n + 3),
            .gallery-collage-item:nth-child(6n + 4),
            .gallery-collage-item:nth-child(6n + 5),
            .gallery-collage-item:nth-child(6n + 6) {
                grid-column: span 3;
                grid-row: span 3;
            }
        }

        @media (max-width: 640px) {
            .gallery-collage-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: 132px;
                gap: 10px;
            }

            .gallery-collage-item,
            .gallery-collage-item:nth-child(6n + 1),
            .gallery-collage-item:nth-child(6n + 2),
            .gallery-collage-item:nth-child(6n + 3),
            .gallery-collage-item:nth-child(6n + 4),
            .gallery-collage-item:nth-child(6n + 5),
            .gallery-collage-item:nth-child(6n + 6) {
                grid-column: span 1;
                grid-row: span 2;
            }
        }

        .projects-overview-panel {
            margin-bottom: 24px;
        }

        .projects-overview-copy h2 {
            max-width: 18ch;
        }

        .projects-overview-subcopy {
            max-width: 68ch;
        }

        .projects-rating-pill {
            background: var(--brand-navy);
            border-color: var(--brand-navy);
            color: #ffffff;
        }

        .projects-pill-list {
            margin-top: 0;
        }

        .inner-section .projects-card-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-flow: row;
            gap: 18px;
        }

        .project-step-card {
            min-height: 0;
        }

        .project-step-copy {
            max-width: 30ch;
        }

        .site-footer {
            width: 100%;
            margin: 0;
            padding: 18px 0 0;
            background: #08194c !important;
            border-radius: 0;
        }

        .site-footer .footer-brand-name,
        .site-footer .footer-col h3,
        .site-footer .footer-social a {
            color: #ffffff;
        }

        .site-footer .footer-copy,
        .site-footer .footer-links a,
        .site-footer .footer-links span,
        .site-footer .footer-bottom {
            color: rgba(255, 255, 255, 0.78);
        }

        .footer-shell {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 78px;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 0.6fr));
            gap: 28px;
            align-items: start;
            max-width: 1760px;
            margin: 0 auto;
            padding-left: clamp(20px, 3vw, 46px);
            padding-right: clamp(20px, 3vw, 46px);
        }

        .footer-brand {
            max-width: 360px;
        }

        .footer-brand-logo {
            width: min(96px, 100%);
            height: auto;
            margin-bottom: 14px;
            filter: brightness(0) saturate(100%) invert(62%) sepia(73%) saturate(2475%) hue-rotate(350deg) brightness(104%) contrast(104%);
            opacity: 1;
        }

        .footer-brand-name {
            display: inline-block;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: clamp(24px, 1.8vw, 34px);
            line-height: 1;
            letter-spacing: -0.03em;
            text-transform: uppercase;
            margin-bottom: 12px;
            color: #ffffff;
        }

        .footer-copy {
            margin: 0 0 18px;
            font-size: clamp(14px, 0.95vw, 17px);
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.78);
        }

        .footer-social {
            display: flex;
            gap: 10px;
        }

        .footer-social a {
            width: 38px;
            height: 38px;
            border: 1px solid rgba(255, 255, 255, 0.34);
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-family: var(--font-space-grotesk), sans-serif;
            font-size: 13px;
            text-transform: uppercase;
            color: #ffffff;
        }

        .footer-col h3 {
            margin: 0 0 14px;
            font-size: clamp(17px, 1vw, 20px);
            line-height: 1;
            color: #ffffff;
        }

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

        .footer-links a,
        .footer-links span {
            font-size: clamp(14px, 0.95vw, 17px);
            color: rgba(255, 255, 255, 0.78);
            line-height: 1.5;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            margin-top: 68px;
            padding-top: 30px;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255, 255, 255, 0.68);
            max-width: 1760px;
            margin-left: auto;
            margin-right: auto;
            padding-left: clamp(20px, 3vw, 46px);
            padding-right: clamp(20px, 3vw, 46px);
        }

        @media (max-width: 1100px) {
            .hero-intro {
                margin-bottom: 42px;
                padding-top: 6px;
            }

            .hero-title {
                font-size: clamp(44px, 10.6vw, 76px);
                margin-bottom: 16px;
            }

            .hero-subtitle {
                font-size: 13px;
                line-height: 1.5;
            }

            .hero-heading-wrap {
                width: min(760px, 94vw);
                margin: 0 auto;
            }

            .hero-heading-text {
                font-size: 20px;
            }

            .hero-image-full {
                margin-top: -16px;
                height: 400px;
                clip-path: none;
                border-radius: 0;
                -webkit-mask: none;
                mask: none;
            }

            .how-section {
                padding-top: 84px;
                padding-bottom: 84px;
            }

            .how-top {
                grid-template-columns: 1fr;
                row-gap: 18px;
                margin-bottom: 22px;
            }

            .how-title {
                font-size: clamp(50px, 12vw, 82px);
            }

            .how-copy-title {
                font-size: 16px;
            }

            .how-copy-body {
                font-size: 15px;
                line-height: 1.55;
            }

            .how-video {
                aspect-ratio: auto;
                height: 360px;
                clip-path: none;
                border-radius: 24px;
            }

            .benefits-section {
                padding-top: 88px;
                padding-bottom: 88px;
            }

            .benefits-title {
                font-size: clamp(48px, 12vw, 78px);
                margin-bottom: 24px;
            }

            .benefits-tabs {
                font-size: 16px;
                gap: 16px;
            }

            .benefits-sub {
                font-size: 14px;
                margin-bottom: 28px;
            }

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

            .benefit-card {
                min-height: 260px;
                padding: 30px 24px;
                clip-path: none;
                border-radius: 24px;
            }

            .benefit-card h3 {
                font-size: 25px;
            }

            .benefit-card p,
            .benefits-link {
                font-size: 14px;
            }

            .proof-section {
                padding-top: 12px;
                padding-bottom: 84px;
            }

            .proof-grid,
            .stat-row,
            .cta-shell {
                grid-template-columns: 1fr;
            }

            .inner-grid-two,
            .inner-grid-three,
            .kpi-strip,
            .services-card-grid,
            .project-grid,
            .contact-grid,
            .contact-layout-grid {
                grid-template-columns: 1fr;
            }

            .services-card-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .inner-section .projects-card-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .about-overview-panel,
            .about-timeline {
                grid-template-columns: 1fr;
            }

            .about-timeline::before {
                left: 22px;
                right: auto;
                top: 22px;
                bottom: 22px;
                width: 1px;
                height: auto;
                background: linear-gradient(180deg, rgba(241, 121, 11, 0.2) 0%, rgba(8, 25, 76, 0.16) 100%);
            }

            .about-overview-head,
            .about-stats-row {
                grid-template-columns: 1fr;
            }

            .about-rating-pill {
                justify-self: start;
                margin-top: 0;
            }

            .about-stat-item {
                padding-right: 0;
                padding-bottom: 14px;
                border-bottom: 1px solid #efefef;
            }

            .about-stat-item:last-child {
                padding-bottom: 0;
                border-bottom: 0;
            }

            .about-stat-item:not(:last-child)::after {
                display: none;
            }

            .about-stat-item span {
                max-width: none;
            }

            .about-hero-media {
                width: 100%;
                margin-left: 0;
            }
            .inner-hero {
                padding-top: 58px;
            }

            .inner-hero-media {
                height: 460px;
                clip-path: none;
                border-radius: 24px;
            }

            .services-hero-media {
                width: 100%;
                margin-left: 0;
            }

            .about-hero-media,
            .projects-hero-media {
                width: 100%;
                margin-left: 0;
            }

            .inner-section {
                padding-bottom: 80px;
            }

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

            .contact-map-frame iframe {
                height: 300px;
            }

            .about-overview-panel,
            .about-mv-card {
                clip-path: none;
                border-radius: 24px;
            }

            .about-step {
                min-height: 0;
                padding-left: 36px;
            }
            .proof-panel,
            .cta-shell {
                border-radius: 24px;
                padding: 26px 22px;
                clip-path: none;
            }

            .stat-card {
                clip-path: none;
            }

            .proof-title {
                font-size: clamp(34px, 9vw, 54px);
            }

            .cta-section {
                padding-bottom: 84px;
            }

            .cta-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .cta-primary,
            .cta-secondary {
                text-align: center;
            }

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

            .site-footer {
                padding-bottom: 0;
            }

            .footer-bottom {
                flex-direction: column;
            }

            .top-nav {
                grid-template-columns: 1fr;
                height: auto;
                gap: 14px;
                padding: 20px 20px 16px;
            }

            .top-nav-left,
            .top-nav-center,
            .top-nav-right {
                justify-self: center;
            }

            .brand-wordmark {
                font-size: 24px;
            }

            .company-logo {
                height: 38px;
            }

            .lang-switch,
            .top-nav-center a,
            .top-nav-right .sign-up,
            .book-demo-btn {
                font-size: 18px;
            }

            .top-nav-center {
                gap: 26px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .book-demo-btn {
                border-radius: 8px;
                padding: 10px 18px;
            }
        }

        @media (max-width: 1600px) and (min-width: 1101px) {
            .top-nav {
                height: 90px;
                max-width: 1440px;
            }

            .brand-wordmark {
                font-size: 28px;
            }

            .lang-switch,
            .top-nav-center a,
            .top-nav-right .sign-up,
            .book-demo-btn {
                font-size: 15px;
            }

            .top-nav-center {
                gap: 16px;
                row-gap: 10px;
            }

            .book-demo-btn {
                padding: 12px 24px;
            }
        }

        @media (max-width: 1280px) {
            .top-nav {
                padding: 0 24px;
                column-gap: 28px;
            }

            .top-nav-center {
                gap: 12px;
                row-gap: 8px;
            }

            .top-nav-center a,
            .top-nav-right .sign-up {
                font-size: 12px;
            }

            .hero-heading-wrap {
                width: min(960px, 92vw);
                margin-left: 24px;
            }

            .hero-image-full {
                width: 100vw;
                margin-top: -28px;
                height: clamp(500px, 56vw, 700px);
                --s: 62px;
                --x: clamp(420px, 58vw, 720px);
            }

            .how-section,
            .benefits-section {
                padding-left: 24px;
                padding-right: 24px;
            }

            .proof-section,
            .cta-section {
                padding-left: 24px;
                padding-right: 24px;
            }

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

        @media (max-width: 768px) {
            .top-nav {
                padding: 18px 16px 12px;
                gap: 12px;
            }

            .top-nav-center {
                gap: 14px 18px;
            }

            .top-nav-right {
                gap: 12px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .hero-intro {
                margin-bottom: 28px;
                padding-inline: 12px;
            }

            .hero-heading-wrap {
                width: min(92vw, 560px);
                margin: 0 auto 8px;
            }

            .hero-image-full {
                margin-top: -8px;
                height: 360px;
            }

            .how-section,
            .benefits-section,
            .proof-section,
            .cta-section {
                padding-left: 18px;
                padding-right: 18px;
            }

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

            footer .max-w-7xl {
                padding-left: 18px;
                padding-right: 18px;
            }

            footer .space-x-8 {
                gap: 12px 18px;
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .top-nav {
                padding: 16px 12px 10px;
            }

            .brand-wordmark {
                font-size: 20px;
            }

            .company-logo {
                height: 30px;
            }

            .lang-switch,
            .top-nav-center a,
            .top-nav-right .sign-up,
            .book-demo-btn {
                font-size: 14px;
            }

            .hero-title {
                font-size: clamp(36px, 13vw, 58px);
                line-height: 0.95;
            }

            .hero-subtitle,
            .how-copy-body,
            .benefits-sub,
            .proof-copy,
            .cta-shell p {
                font-size: 14px;
            }

            .hero-image-full {
                height: 300px;
                border-radius: 18px;
            }

            .inner-hero-media {
                height: 360px;
                border-radius: 18px;
            }

            .contact-map-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .contact-map-frame iframe {
                height: 260px;
            }

            .how-title,
            .benefits-title,
            .proof-title,
            .cta-shell h2 {
                line-height: 0.96;
            }

            .how-video {
                height: 260px;
            }

            .benefit-card,
            .proof-panel,
            .cta-shell {
                padding: 20px 18px;
            }

            .info-card,
            .project-card {
                padding: 22px 18px;
                clip-path: none;
                border-radius: 20px;
            }

            .benefit-icon {
                width: 44px;
                height: 44px;
                margin-bottom: 18px;
            }

            .process-item {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .process-num {
                width: 34px;
                height: 34px;
            }
        }

        @media (max-height: 520px) and (orientation: landscape) {
            .top-nav {
                padding: 12px 18px 8px;
                gap: 10px;
            }

            .hero-intro {
                margin-bottom: 20px;
            }

            .hero-title {
                font-size: clamp(34px, 11vh, 56px);
                margin-bottom: 12px;
            }

            .hero-subtitle {
                font-size: 12px;
                max-width: 520px;
            }

            .hero-heading-wrap {
                margin-bottom: 8px;
            }

            .hero-image-full {
                margin-top: 4px;
                height: 250px;
                -webkit-mask: none;
                mask: none;
                border-radius: 24px;
                width: 100vw;
            }

            .how-section,
            .benefits-section,
            .proof-section,
            .cta-section {
                padding-top: 56px;
                padding-bottom: 64px;
            }

            .how-video {
                height: 260px;
            }
        }

.footer-legal-links {
  gap: 18px;
}

.footer-legal-link {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  display: inline;
}

.maintenance-banner {
    width: 100%;
    background: var(--brand-orange);
    color: #ffffff;
    text-align: center;
    font-family: var(--font-space-grotesk), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    padding: 8px 12px;
}

.hero-admin-badge {
    margin: 12px auto 0;
    width: fit-content;
    border-radius: 999px;
    background: rgba(8, 25, 76, 0.1);
    color: var(--brand-navy);
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

.home-posts-feed,
.home-comments {
    width: min(1320px, 92vw);
    margin: 0 auto;
    padding: 48px 0;
}

.home-posts-head,
.home-comments-head {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.home-posts-head h2,
.home-comments-head h2 {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 52px);
    color: var(--brand-navy);
}

.home-posts-head p,
.home-comments-head p {
    margin: 0;
    color: #5f6780;
}

.home-posts-grid,
.home-comments-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-taxonomy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.home-taxonomy-chip {
    border: 1px solid rgba(8, 25, 76, 0.2);
    background: #ffffff;
    color: #08194c;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
}

.home-taxonomy-chip-muted {
    border-color: rgba(255, 138, 31, 0.45);
    color: #a15200;
}

.home-post-card,
.home-comment-card {
    border: 1px solid rgba(8, 25, 76, 0.14);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(8, 25, 76, 0.06);
    padding: 16px;
    display: grid;
    gap: 8px;
}

.home-post-card h3 {
    margin: 0;
    font-size: 20px;
    color: var(--brand-navy);
}

.home-post-card p,
.home-comment-card p {
    margin: 0;
    color: #3f4864;
    line-height: 1.55;
}

.home-post-card span,
.home-comment-card span {
    color: #727a91;
    font-size: 13px;
}

.landing-theme-vivid .hero-image-full {
    filter: saturate(1.15) contrast(1.05);
}

.landing-theme-vivid .proof-panel,
.landing-theme-vivid .cta-shell {
    border-color: rgba(255, 138, 31, 0.26);
}

@media (max-width: 900px) {
    .home-posts-grid,
    .home-comments-grid {
        grid-template-columns: 1fr;
    }
}

.news-updates-query .news-updates-template {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.news-post-card {
    border: 1px solid rgba(8, 25, 76, 0.16);
    border-radius: 20px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(8, 25, 76, 0.08);
    display: grid;
    gap: 12px;
}

.news-post-card .wp-block-post-featured-image {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
}

.news-post-card .wp-block-post-featured-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.news-post-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: #67708b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.news-post-card .wp-block-post-title {
    margin: 0;
    font-size: clamp(20px, 1.5vw, 27px);
    line-height: 1.2;
}

.news-post-card .wp-block-post-title a {
    color: var(--brand-navy);
    text-decoration: none;
}

.news-post-card .wp-block-post-title a:hover {
    color: var(--brand-orange);
}

.news-post-card .wp-block-post-excerpt {
    margin: 0;
    color: #404965;
    line-height: 1.58;
}

.news-post-card .wp-block-post-excerpt__more-link {
    color: var(--brand-orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 12px;
}

.news-updates-query .wp-block-query-pagination {
    margin-top: 20px;
    border-top: 1px solid rgba(8, 25, 76, 0.12);
    padding-top: 14px;
}

.news-updates-query .wp-block-query-pagination a,
.news-updates-query .wp-block-query-pagination span {
    color: var(--brand-navy);
    font-weight: 600;
}

.news-updates-query .wp-block-query-pagination .is-layout-flex {
    gap: 12px;
}

.news-single-shell {
    width: min(960px, 92vw);
    margin: 24px auto 48px;
    display: grid;
    gap: 16px;
}

.news-single-meta {
    display: flex;
    gap: 12px;
    color: #67708b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.news-single-main .wp-block-post-title {
    margin: 0;
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.06;
    color: var(--brand-navy);
}

.news-single-main .wp-block-post-featured-image {
    margin: 8px 0 6px;
}

.news-single-main .wp-block-post-featured-image img {
    border-radius: 20px;
}

.news-single-main .wp-block-post-content {
    font-size: 18px;
    line-height: 1.72;
    color: #1e2946;
}

.news-single-main .wp-block-post-content h2,
.news-single-main .wp-block-post-content h3,
.news-single-main .wp-block-post-content h4 {
    color: var(--brand-navy);
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}

.news-single-main .wp-block-post-content a {
    color: var(--brand-orange);
}

@media (max-width: 1000px) {
    .news-updates-query .news-updates-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .news-updates-query .news-updates-template {
        grid-template-columns: 1fr;
    }

    .news-post-card .wp-block-post-featured-image img {
        height: 200px;
    }
}