/* --- BRAND FONTS --- */
        @font-face {
            font-family: 'NewBlack Typeface';
            src: url('../NewBlack-SemiBold.woff2') format('woff2'),
                 url('../NewBlack-SemiBold.woff') format('woff');
            font-weight: 600;
            font-style: normal;
        }

        @font-face {
            font-family: 'Point';
            src: url('../Point-Light.woff2') format('woff2'),
                 url('../Point-Light.woff') format('woff');
            font-weight: 300;
            font-style: normal;
        }

        :root {
            --brand-red: #F43234;
            --main-black: #020202;
            --white: #FFFFFF;
            --font-primary: 'NewBlack Typeface', 'Inter', -apple-system, sans-serif;
            --font-secondary: 'Point', 'Inter', -apple-system, sans-serif;
            --transition-premium: cubic-bezier(0.16, 1, 0.3, 1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            min-height: 100vh;
            background-color: var(--main-black);
            color: var(--white);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* --- HERO CONTAINER & VIDEO UNDERLAY --- */
        .hero-container {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background-color: var(--main-black);
        }

        .hero-video-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover;
            z-index: 1;
            pointer-events: none;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, 
                rgba(2, 2, 2, 0.72) 0%, 
                rgba(2, 2, 2, 0.34) 48%, 
                rgba(2, 2, 2, 0.82) 100%);
            z-index: 2;
            pointer-events: none;
        }

        /* --- ULTRA-SLEEK FLOATING ISLAND NAVBAR --- */
        .hero-header {
            position: fixed; 
            top: 24px; 
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 80px);
            max-width: 1300px;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 74px; 
            padding: 0 45px;
            background: rgba(0, 0, 0, 0.22); 
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 100px; 
            transition: 
                background 0.4s var(--transition-premium), 
                height 0.4s var(--transition-premium), 
                top 0.4s var(--transition-premium),
                border-color 0.4s var(--transition-premium),
                box-shadow 0.4s var(--transition-premium);
        }

        .hero-header.scrolled {
            top: 16px;
            height: 64px; 
            background: rgba(255, 255, 255, 0.94); 
            border-color: rgba(0, 0, 0, 0.06);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        }

        .logo-link-wrapper {
            display: flex;
            align-items: center;
            text-decoration: none;
            height: 100%;
        }

        .nav-logo {
            height: 125px; 
            width: auto;
            object-fit: contain;
            display: block;
            transform: translateY(1px); 
            transition: height 0.4s var(--transition-premium);
        }

        .hero-header.scrolled .nav-logo {
            height: 105px; 
        }

        .nav-menu-center {
            display: flex;
            align-items: center;
            gap: 40px;
            list-style: none;
        }

        .nav-menu-center a {
            position: relative;
            font-family: var(--font-secondary);
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 300;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 6px 4px;
            transition: color 0.3s ease;
            display: inline-block;
        }

        .nav-menu-center a::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 5px;
            height: 5px;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
            transition: transform 0.2s ease;
        }

        .nav-menu-center a:hover {
            color: var(--white);
        }

        .nav-menu-center a:hover::after {
            transform: translate(2px, 2px); 
        }

        .hero-header.scrolled .nav-menu-center a {
            color: var(--main-black);
            font-weight: 500;
        }
        
        .hero-header.scrolled .nav-menu-center a:hover {
            color: var(--brand-red);
        }

        /* --- CTA BUTTONS WITH TECHNICAL CORNER ARROWS --- */
        .btn-tech-bracket {
            font-family: var(--font-secondary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.05);
            color: var(--white);
            text-decoration: none;
            text-transform: uppercase;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }

        .btn-tech-bracket::before {
            content: '';
            position: absolute;
            top: -2px; left: -2px;
            width: 8px; height: 8px;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
            transition: transform 0.3s var(--transition-premium);
        }

        .btn-tech-bracket::after {
            content: '';
            position: absolute;
            bottom: -2px; right: -2px;
            width: 8px; height: 8px;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
            transition: transform 0.3s var(--transition-premium);
        }

        .btn-tech-bracket:hover {
            background: var(--white);
            color: var(--main-black);
            border-color: var(--white);
        }

        .btn-tech-bracket:hover::before {
            transform: translate(-2px, -2px);
        }
        
        .btn-tech-bracket:hover::after {
            transform: translate(2px, 2px);
        }

        .btn-header-action {
            height: 38px;
            padding: 0 20px;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.12em;
            border-radius: 0px;
        }

        /* PERFECT GLASS OVERLAY SYNC ON SCROLL STATES */
        .hero-header.scrolled .btn-tech-bracket {
            background: rgba(2, 2, 2, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: var(--main-black);
            border-color: rgba(2, 2, 2, 0.14);
        }

        .hero-header.scrolled .btn-tech-bracket:hover {
            background: var(--main-black);
            border-color: var(--main-black);
            color: var(--white);
        }

        .btn-hero-action {
            height: 56px;
            padding: 0 40px;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.1em;
            border-radius: 0px; 
        }

        /* Homepage mobile nav — hidden on desktop */
        .nav-hamburger,
        .nav-mobile-backdrop,
        .nav-mobile-drawer {
            display: none;
        }

        .nav-hamburger {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 6px;
            width: 28px;
            height: 28px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            flex-shrink: 0;
        }

        .nav-hamburger-line {
            display: block;
            width: 22px;
            height: 1.5px;
            background: rgba(255, 255, 255, 0.92);
            transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
        }

        /* --- HERO CANVAS LAYER HEIGHT POSITIONING --- */
        .hero-content {
            position: relative;
            z-index: 4; 
            max-width: 1200px;
            width: 100%;
            margin: auto;
            padding: 180px 40px 60px 40px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.3em;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 24px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .hero-label::before, .hero-label::after {
            content: '';
            display: inline-block;
            width: 4px; height: 4px;
            background: var(--brand-red);
            transform: rotate(45deg);
        }

        .hero-headline {
            font-family: var(--font-primary);
            font-size: clamp(48px, 7.5vw, 86px);
            font-weight: 600;
            line-height: 1.1;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 28px;
            text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
        }

        .hero-headline span.elevated-red {
            color: var(--brand-red);
        }

        .hero-subheadline {
            font-family: var(--font-secondary);
            font-size: clamp(16px, 2vw, 19px);
            font-weight: 300;
            line-height: 1.6;
            letter-spacing: normal;
            word-spacing: normal;
            color: rgba(255, 255, 255, 0.86);
            max-width: 740px;
            margin-bottom: 48px;
            text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
        }

        /* =========================================
           SECTION 2: CAPABILITY SYSTEM SECTION
        ========================================= */
        .capability-section {
            position: relative;
            background-color: #FAFAFA;
            color: var(--main-black);
            padding: 160px 40px;
            z-index: 10;
        }

        .cap-container {
            max-width: 1300px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 80px;
            align-items: center;
        }

        .cap-section-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.25em;
            color: #777;
            margin-bottom: 20px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .cap-section-label::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--brand-red);
            border-radius: 50%;
        }

        .cap-heading {
            font-family: var(--font-primary);
            font-size: clamp(36px, 4vw, 50px);
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: var(--main-black);
            margin-bottom: 28px;
        }

        .cap-desc {
            font-family: var(--font-secondary);
            font-size: 16px;
            line-height: 1.6;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            color: #444;
            margin-bottom: 36px;
            max-width: 90%;
        }

        .cap-subdesc {
            font-family: var(--font-secondary);
            font-size: 13px;
            line-height: 1.6;
            letter-spacing: normal;
            word-spacing: normal;
            color: #888;
            padding-left: 20px;
            border-left: 1px solid rgba(0, 0, 0, 0.1);
        }

        .cap-illustration {
            position: relative;
            width: 100%;
            height: 620px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .diagram-grid {
            position: absolute;
            width: 100%; height: 100%;
            background-image: 
                linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: center center;
            mask-image: radial-gradient(circle at center, black 24%, transparent 82%);
            -webkit-mask-image: radial-gradient(circle at center, black 24%, transparent 82%);
            z-index: 1;
        }

        .diagram-core {
            position: absolute;
            width: 12px; height: 12px;
            background: var(--brand-red);
            border-radius: 50%;
            z-index: 2;
            box-shadow: 0 0 0 4px rgba(244, 50, 52, 0.12);
            animation: pulse-core 3s infinite;
        }

        @keyframes pulse-core {
            0%, 100% { box-shadow: 0 0 0 8px rgba(244, 50, 52, 0.08), 0 0 0 4px rgba(244, 50, 52, 0.12); transform: scale(1); }
            50% { box-shadow: 0 0 0 18px rgba(244, 50, 52, 0.06), 0 0 0 4px rgba(244, 50, 52, 0.16); transform: scale(1.05); }
        }

        .diagram-orbit {
            position: absolute;
            border: 1px dashed rgba(0, 0, 0, 0.14);
            border-radius: 50%;
            top: 50%; left: 50%;
            z-index: 1;
        }

        .orbit-inner { width: 300px; height: 300px; animation: spin-slow 40s linear infinite; }
        .orbit-outer { width: 500px; height: 500px; animation: spin-slow 60s linear infinite reverse; }

        @keyframes spin-slow {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .node-wrapper {
            position: absolute;
            z-index: 5;
        }

        .node-document { top: 5%; left: 0%; animation: float-node 6s ease-in-out infinite; }
        .node-market   { top: 18%; right: -2%; animation: float-node 7s ease-in-out infinite 1s; }
        .node-map      { bottom: 16%; left: 2%; animation: float-node 8s ease-in-out infinite 2s; }
        .node-showcase { bottom: 5%; right: 0%; animation: float-node 6.5s ease-in-out infinite 0.5s; }

        @keyframes float-node {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .system-node {
            position: relative;
            width: 280px;
            background: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.09);
            border-radius: 2px;
            padding: 26px 22px;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
            opacity: 1; 
            transition: transform 0.4s var(--transition-premium), box-shadow 0.4s ease, border-color 0.4s ease;
        }

        .system-node:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09);
            border-color: rgba(244, 50, 52, 0.22);
        }

        .system-node::before {
            content: '';
            position: absolute;
            top: -1px; left: -1px;
            width: 8px; height: 8px;
            border-top: 2px solid rgba(0, 0, 0, 0.12);
            border-left: 2px solid rgba(0, 0, 0, 0.12);
        }
        .system-node:hover::before {
            border-color: var(--brand-red);
        }

        .node-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .icon-doc,
        .icon-market,
        .icon-map,
        .icon-showcase {
            flex-shrink: 0;
            box-sizing: border-box;
            transition: border-color 0.35s var(--transition-premium);
        }

        .icon-doc {
            width: 10px;
            height: 10px;
            background: transparent;
            border: 1.5px solid #8E8A84;
        }

        .icon-market {
            width: 14px;
            height: 14px;
            border: 1.5px solid #8E8A84;
            border-radius: 50%;
        }

        .icon-map {
            width: 12px;
            height: 12px;
            border: 1.5px solid #8E8A84;
            transform: rotate(45deg);
        }

        .icon-showcase {
            width: 16px;
            height: 8px;
            border: 1.5px solid #8E8A84;
        }

        .system-node:hover .icon-doc,
        .system-node:hover .icon-market,
        .system-node:hover .icon-map,
        .system-node:hover .icon-showcase {
            border-color: var(--brand-red);
        }

        .node-title {
            font-family: var(--font-primary);
            font-size: 14px;
            font-weight: 600;
            color: var(--main-black);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .node-text {
            font-family: var(--font-secondary);
            font-size: 12.5px;
            line-height: 1.5;
            letter-spacing: normal;
            word-spacing: normal;
            color: #666;
            font-weight: 300;
        }

        /* =========================================
           SECTION 3: PREMIUM CAPABILITY SHOWCASE
        ========================================= */
        .showcase-premium-section {
            position: relative;
            background: linear-gradient(180deg, #E5E2DC 0%, #E3DFD8 100%);
            color: var(--main-black);
            padding: 140px 40px;
            z-index: 10;
            overflow: hidden;
            border-top: 1px solid rgba(0, 0, 0, 0.04);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.06);
        }

        .showcase-grid {
            max-width: 1300px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.25fr;
            gap: 80px;
            align-items: flex-start;
        }

        .showcase-left-panel {
            position: sticky;
            top: 140px;
        }

        .showcase-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.25em;
            color: #8C847A;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .showcase-heading {
            font-family: var(--font-primary);
            font-size: clamp(34px, 3.8vw, 46px);
            line-height: 1.2;
            letter-spacing: -0.01em;
            color: #1A1A1A;
            margin-bottom: 24px;
        }

        .showcase-copy {
            font-family: var(--font-secondary);
            font-size: 15.5px;
            line-height: 1.65;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            color: #4A4640;
            margin-bottom: 48px;
        }

        .showcase-selector {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .selector-item-btn {
            background: none;
            border: none;
            text-align: left;
            padding: 18px 24px 18px 28px;
            border-left: 2px solid rgba(2, 2, 2, 0.06);
            cursor: pointer;
            position: relative;
            transition: all 0.4s var(--transition-premium);
            width: 100%;
            border-radius: 0 4px 4px 0;
        }

        .selector-item-btn .item-num-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 6px;
        }

        .selector-item-btn .num {
            font-family: var(--font-primary);
            font-size: 13px;
            font-weight: 600;
            color: #A6A098;
            transition: color 0.4s ease;
        }

        .selector-item-btn .title {
            font-family: var(--font-primary);
            font-size: 17px;
            font-weight: 600;
            color: #55504A;
            letter-spacing: -0.01em;
            transition: color 0.4s ease;
        }

        .selector-item-btn .desc {
            font-family: var(--font-secondary);
            font-size: 13px;
            line-height: 1.5;
            letter-spacing: normal;
            word-spacing: normal;
            color: #7A756F;
            font-weight: 300;
            max-width: 95%;
            transition: color 0.4s ease;
        }

        .selector-item-btn:hover .title {
            color: #1A1A1A;
        }

        .selector-item-btn.active {
            border-left-color: var(--brand-red);
            background: rgba(255, 255, 255, 0.6);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
            padding-left: 32px;
        }

        .selector-item-btn.active .num { color: var(--brand-red); }
        .selector-item-btn.active .title { color: #1A1A1A; }
        .selector-item-btn.active .desc { color: #33302D; }

        .selector-item-btn::after {
            content: '';
            position: absolute;
            left: -4px;
            top: 50%;
            transform: translateY(-50%) scale(0);
            width: 6px;
            height: 6px;
            background: var(--brand-red);
            border-radius: 50%;
            transition: transform 0.3s var(--transition-premium);
        }
        .selector-item-btn.active::after {
            transform: translateY(-50%) scale(1);
        }

        .showcase-right-canvas {
            position: relative;
            width: 100%;
            overflow: visible;
        }

        .canvas-premium-backdrop {
            position: absolute;
            top: -15px; left: -15px; right: -15px; bottom: -15px;
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.92);
            border-radius: 0;
            z-index: 1;
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.07);
            overflow: visible;
        }

        .canvas-premium-backdrop::before,
        .canvas-premium-backdrop::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            pointer-events: none;
            z-index: 4;
        }

        .canvas-premium-backdrop::before {
            top: -2px;
            left: -2px;
            border-top: 2px solid rgba(244, 50, 52, 0.72);
            border-left: 2px solid rgba(244, 50, 52, 0.72);
        }

        .canvas-premium-backdrop::after {
            bottom: -2px;
            right: -2px;
            border-bottom: 2px solid rgba(244, 50, 52, 0.72);
            border-right: 2px solid rgba(244, 50, 52, 0.72);
        }

        .canvas-structural-grid {
            position: absolute;
            width: 100%; height: 100%;
            background-image: 
                linear-gradient(rgba(2, 2, 2, 0.015) 1px, transparent 1px),
                linear-gradient(90deg, rgba(2, 2, 2, 0.015) 1px, transparent 1px);
            background-size: 50px 50px;
            mask-image: linear-gradient(180deg, black, transparent);
            -webkit-mask-image: linear-gradient(180deg, black, transparent);
            opacity: 0.7;
            border-radius: 0;
            overflow: hidden;
        }

        .canvas-telemetry-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 2;
        }
        .canvas-telemetry-overlay::before {
            content: '+';
            position: absolute;
            top: 25px; left: 25px;
            font-family: monospace; font-size: 12px; color: rgba(244, 50, 52, 0.35);
        }
        .canvas-telemetry-overlay::after {
            content: 'SYS.LOC // DXB.UAE';
            position: absolute;
            bottom: 25px; right: 25px;
            font-family: monospace; font-size: 9px; letter-spacing: 0.1em; color: rgba(2,2,2,0.25);
        }

        .composition-viewport {
            position: relative;
            width: 100%;
            height: 560px;
            z-index: 3;
        }

        .composition-view {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.97) translateY(4px);
            transition: 
                opacity 0.5s var(--transition-premium), 
                transform 0.5s var(--transition-premium), 
                visibility 0.5s;
        }

        .composition-view.active {
            opacity: 1;
            visibility: visible;
            transform: scale(1) translateY(0);
        }

        .composition-view.active .main-large-visual {
            box-shadow: 0 28px 58px rgba(2, 2, 2, 0.13);
        }

        .composition-view.active .floating-card-1,
        .composition-view.active .floating-card-2 {
            opacity: 0.9;
        }

        .composition-view .floating-card-1,
        .composition-view .floating-card-2 {
            transition: opacity 0.5s var(--transition-premium), box-shadow 0.5s var(--transition-premium);
        }

        .img-panel-base {
            position: relative;
            overflow: hidden;
            border-radius: 0;
            box-shadow: 0 22px 50px rgba(2, 2, 2, 0.09);
            background: #E5E2DC;
            transition: transform 0.5s var(--transition-premium), box-shadow 0.5s var(--transition-premium);
        }

        .img-panel-base img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.8s var(--transition-premium);
        }

        .img-panel-base:hover img {
            transform: scale(1.03);
        }

        .main-large-visual {
            position: absolute;
            width: 72%;
            height: 82%;
            top: 40px;
            left: 20px;
            z-index: 10;
            overflow: visible;
            border: 1px solid rgba(255, 255, 255, 0.82);
        }

        .main-large-visual img {
            border-radius: 0;
        }

        .main-large-visual::before,
        .main-large-visual::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            pointer-events: none;
            z-index: 12;
        }

        .main-large-visual::before {
            top: -2px;
            left: -2px;
            border-top: 2px solid rgba(244, 50, 52, 0.78);
            border-left: 2px solid rgba(244, 50, 52, 0.78);
        }

        .main-large-visual::after {
            bottom: -2px;
            right: -2px;
            border-bottom: 2px solid rgba(244, 50, 52, 0.55);
            border-right: 2px solid rgba(244, 50, 52, 0.55);
        }

        .floating-card-1 {
            position: absolute;
            width: 44%;
            height: 46%;
            top: 0px;
            right: 0px;
            z-index: 4; 
            border: 1px solid rgba(255, 255, 255, 0.75);
        }

        .floating-card-2 {
            position: absolute;
            width: 38%;
            height: 42%;
            bottom: 0px;
            right: 40px;
            z-index: 3; 
            border: 1px solid rgba(255, 255, 255, 0.75);
        }

        .floating-pill-label {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(2, 2, 2, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: var(--white);
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: 0;
            border: 1px solid rgba(255, 255, 255, 0.1);
            pointer-events: none;
            z-index: 6;
        }

        .showcase-output-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 48px;
            border-top: 1px solid rgba(2, 2, 2, 0.05);
            padding-top: 28px;
            position: relative;
            z-index: 4;
        }

        .output-strip-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .output-strip-item .strip-dot {
            width: 4px;
            height: 4px;
            background: #AAB2B9;
            transform: rotate(45deg);
            transition: background-color 0.4s ease, box-shadow 0.4s ease;
        }

        .showcase-premium-section[data-active-index="0"] .strip-item-0 .strip-dot,
        .showcase-premium-section[data-active-index="1"] .strip-item-1 .strip-dot,
        .showcase-premium-section[data-active-index="2"] .strip-item-2 .strip-dot {
            background-color: var(--brand-red);
            box-shadow: 0 0 8px rgba(244, 50, 52, 0.6);
        }

        .output-strip-item .strip-text {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.05em;
            color: #5A6268;
            text-transform: uppercase;
            opacity: 0.52;
            transition: color 0.45s ease, opacity 0.45s ease;
        }

        .showcase-premium-section[data-active-index="0"] .strip-item-0 .strip-text,
        .showcase-premium-section[data-active-index="1"] .strip-item-1 .strip-text,
        .showcase-premium-section[data-active-index="2"] .strip-item-2 .strip-text {
            color: #1A1A1A;
            opacity: 1;
            font-weight: 600;
        }

        /* =========================================
           REBUILT SECTION 4: HALO360 IMMERSIVE (IMAGE BG)
        ========================================= */
        .halo360-immersive-section {
            position: relative;
            background-color: #0f0f11; /* Deep dark to blend seamlessly with the image */
            color: var(--white);
            padding: 160px 40px;
            min-height: 850px;
            display: flex;
            align-items: center;
            overflow: hidden;
            z-index: 10;
        }

        /* Full-bleed cinematic background — the spatial scan fills the whole
           section as one environment (not a boxed/right-side image) */
        .halo360-immersive-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('../assets/images/halo360-bg.jpg');
            background-size: cover;
            background-position: center right;
            background-repeat: no-repeat;
            opacity: 0.72;
            z-index: 1;
        }

        /* Overlay above the image, below the text:
           strong dark on the left for readability, gently fading to the right
           so the image stays visible — plus a soft top/bottom vignette */
        .h360-readability-mask {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background:
                linear-gradient(90deg,
                    rgba(8, 8, 10, 0.98) 0%,
                    rgba(10, 10, 12, 0.94) 30%,
                    rgba(12, 12, 14, 0.72) 52%,
                    rgba(12, 12, 14, 0.38) 74%,
                    rgba(12, 12, 14, 0.42) 100%
                ),
                linear-gradient(180deg,
                    rgba(8, 8, 10, 0.68) 0%,
                    rgba(12, 12, 14, 0.18) 26%,
                    rgba(12, 12, 14, 0.18) 74%,
                    rgba(8, 8, 10, 0.72) 100%
                );
        }

        /* Content sits above image + overlay */
        .h360-content-container {
            max-width: 1300px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 5;
            display: flex;
            align-items: center;
        }

        .h360-text-block {
            max-width: 660px;
            position: relative;
        }

        /* Premium Sub-Brand System Heading */
        .h360-identity-header {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }

        .h360-brand-icon {
            height: 28px;
            width: auto;
            margin-right: 14px;
            object-fit: contain;
            flex-shrink: 0;
            display: block;
        }

        .h360-logo-type {
            font-family: var(--font-primary);
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 0.04em;
        }

        .h360-logo-type .type-halo { color: var(--white); }
        .h360-logo-type .type-360 { color: var(--brand-red); }

        .h360-eyebrow {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.25em;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .h360-title {
            font-family: var(--font-primary);
            font-size: clamp(34px, 3.8vw, 46px);
            line-height: 1.15;
            letter-spacing: -0.01em;
            color: var(--white);
            margin-bottom: 24px;
            max-width: 480px;
            text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
        }

        .h360-paragraph {
            font-family: var(--font-secondary);
            font-size: 16px;
            line-height: 1.72;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            color: rgba(255, 255, 255, 0.88);
            margin-bottom: 40px;
            max-width: 580px;
            text-shadow: 0 1px 24px rgba(0, 0, 0, 0.65);
        }

        /* Structured Feature Matrix */
        .h360-feature-matrix {
            list-style: none;
            margin-bottom: 48px;
            display: flex;
            flex-direction: column;
            gap: 26px;
        }

        .h360-matrix-item {
            font-family: var(--font-secondary);
            font-size: 14.5px;
            line-height: 1.5;
            letter-spacing: normal;
            word-spacing: normal;
            color: rgba(255, 255, 255, 0.78);
            display: flex;
            align-items: center;
            gap: 14px;
            position: relative;
            max-width: 640px;
            text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
        }

        .h360-matrix-item::before {
            content: '';
            width: 5px; height: 5px;
            background: var(--brand-red);
            flex-shrink: 0;
            box-shadow: 0 0 10px rgba(244, 50, 52, 0.8);
        }

        .h360-matrix-item strong {
            color: var(--white);
            font-weight: 500;
            letter-spacing: 0.02em;
        }

        .h360-matrix-copy strong,
        .h360-matrix-copy .h360-matrix-desc {
            display: inline;
        }

        .h360-matrix-copy strong::after {
            content: ' — ';
            font-weight: 300;
            color: rgba(255, 255, 255, 0.78);
        }

        /* =========================================
           SECTION 5: INDUSTRIES + TRUST (COMMAND PANEL)
        ========================================= */
        .industries-section {
            position: relative;
            background-color: #F4F1EB;
            color: var(--main-black);
            padding: 120px 40px;
            z-index: 10;
        }

        .ind-inner {
            max-width: 1180px;
            margin: 0 auto;
        }

        .ind-heading-area {
            text-align: center;
            max-width: 760px;
            margin: 0 auto 64px auto;
        }

        .ind-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.25em;
            color: #8C847A;
            margin-bottom: 20px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .ind-label::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--brand-red);
            border-radius: 50%;
        }

        .ind-heading {
            font-family: var(--font-primary);
            font-size: clamp(30px, 3.4vw, 42px);
            line-height: 1.18;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 22px;
        }

        .ind-intro {
            font-family: var(--font-secondary);
            font-size: 15.5px;
            line-height: 1.65;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            color: #5A554E;
            max-width: 640px;
            margin: 0 auto;
        }

        /* Full-width command panel */
        .ind-panel {
            position: relative;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.08);
            box-shadow: 0 28px 64px rgba(2, 2, 2, 0.06);
        }

        /* Clear L-shaped red corner brackets at the panel corners (matches .btn-tech-bracket) */
        .ind-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 16px;
            height: 16px;
            border-top: 2px solid rgba(244, 50, 52, 0.85);
            border-left: 2px solid rgba(244, 50, 52, 0.85);
            z-index: 3;
            pointer-events: none;
        }

        .ind-panel::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 16px;
            height: 16px;
            border-bottom: 2px solid rgba(244, 50, 52, 0.85);
            border-right: 2px solid rgba(244, 50, 52, 0.85);
            z-index: 3;
            pointer-events: none;
        }

        .ind-panel-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 20px 30px;
            border-bottom: 1px solid rgba(2, 2, 2, 0.06);
            font-family: var(--font-secondary);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #9A938A;
        }

        .ind-panel-head .head-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--brand-red);
            box-shadow: 0 0 8px rgba(244, 50, 52, 0.5);
            flex-shrink: 0;
        }

        /* Industry chips grid */
        .ind-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            padding: 0;
        }

        .ind-chip {
            position: relative;
            padding: 30px 30px 30px 36px;
            border-right: 1px solid rgba(2, 2, 2, 0.05);
            border-bottom: 1px solid rgba(2, 2, 2, 0.05);
            transition: background 0.35s var(--transition-premium);
        }

        .ind-chip:nth-child(3n) { border-right: none; }
        .ind-chip:nth-last-child(-n+3) { border-bottom: none; }

        /* Grey guide line at the block's left edge — turns red on hover */
        .ind-chip::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(2, 2, 2, 0.10);
            transition: background 0.35s var(--transition-premium);
        }

        /* Red dot — hidden by default, appears on the line on hover */
        .ind-chip::after {
            content: '';
            position: absolute;
            left: -3px;
            top: 50%;
            transform: translateY(-50%) scale(0);
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--brand-red);
            transition: transform 0.3s var(--transition-premium);
        }

        .ind-chip:hover {
            background: #FAF8F4;
        }

        .ind-chip:hover::before { background: var(--brand-red); }
        .ind-chip:hover::after { transform: translateY(-50%) scale(1); }

        .ind-chip .chip-mark {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .ind-chip .chip-index {
            font-family: var(--font-primary);
            font-size: 11px;
            font-weight: 600;
            color: #BCB4A8;
            letter-spacing: 0.05em;
        }

        .ind-chip .chip-title {
            font-family: var(--font-primary);
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 8px;
        }

        .ind-chip .chip-desc {
            font-family: var(--font-secondary);
            font-size: 12.5px;
            line-height: 1.55;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            color: #847D74;
            max-width: 92%;
        }

        /* Trust / compliance strip */
        .ind-trust-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: #FAF9F6;
            border-top: 1px solid rgba(2, 2, 2, 0.08);
        }

        .ind-trust-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 20px 22px;
            border-right: 1px solid rgba(2, 2, 2, 0.06);
            font-family: var(--font-secondary);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.04em;
            color: #4A453F;
            text-align: center;
        }

        .ind-trust-item:last-child { border-right: none; }

        .ind-trust-item .trust-tick {
            width: 6px; height: 6px;
            background: var(--brand-red);
            transform: rotate(45deg);
            flex-shrink: 0;
        }

        /* =========================================
           SECTION 6: CONTACT / FOOTER (CLOSING)
        ========================================= */
        .contact-footer {
            position: relative;
            background: linear-gradient(180deg, #0E1014 0%, #0A0B0E 100%);
            color: var(--white);
            padding: 74px 40px 30px;
            overflow: hidden;
            z-index: 10;
        }

        /* Very subtle red glow on the far left */
        .contact-footer::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 46% 78% at -6% 16%,
                rgba(244, 50, 52, 0.13) 0%,
                rgba(244, 50, 52, 0.045) 32%,
                transparent 64%);
            z-index: 0;
            pointer-events: none;
        }

        /* Soft red-to-black glow on the lower-right */
        .contact-footer::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 50% 82% at 106% 86%,
                rgba(244, 50, 52, 0.15) 0%,
                rgba(244, 50, 52, 0.05) 34%,
                transparent 66%);
            z-index: 0;
            pointer-events: none;
        }

        .footer-inner {
            position: relative;
            z-index: 2;
            max-width: 1220px;
            margin: 0 auto;
        }

        /* --- BRAND INTRO (top): open dark layout, logo + description --- */
        .footer-brand-card {
            display: flex;
            align-items: center;
            gap: 36px;
            margin-bottom: 28px;
            background: none;
            border: none;
            box-shadow: none;
        }
        .footer-brand-card::before,
        .footer-brand-card::after {
            display: none;
        }

        .footer-logo-wrap {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            background: none;
        }
        .footer-logo-wrap picture {
            display: block;
            line-height: 0;
        }
        .footer-logo {
            height: 92px;
            width: auto;
            display: block;
        }

        .footer-brand-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0;
            max-width: 760px;
        }
        .footer-overview {
            font-family: var(--font-secondary);
            font-size: 14px;
            line-height: 1.68;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.74);
        }

        /* --- SLIM CTA PANEL (below brand card) --- */
        .footer-cta {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            padding: 24px 30px;
            margin-bottom: 32px;
            background:
                radial-gradient(ellipse 48% 130% at 100% 50%, rgba(237, 232, 223, 0.07) 0%, transparent 60%),
                linear-gradient(135deg, rgba(20, 20, 25, 0.9) 0%, rgba(13, 13, 17, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.09);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .footer-cta::before {
            content: '';
            position: absolute;
            top: -2px; left: -2px;
            width: 12px; height: 12px;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
        }
        .footer-cta::after {
            content: '';
            position: absolute;
            bottom: -2px; right: -2px;
            width: 12px; height: 12px;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
        }
        .footer-cta-text { max-width: 680px; }
        .footer-cta-eyebrow {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.42);
            margin-bottom: 10px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .footer-cta-eyebrow::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
        }
        .footer-cta-heading {
            font-family: var(--font-primary);
            font-size: clamp(24px, 2.6vw, 32px);
            line-height: 1.15;
            letter-spacing: -0.01em;
            color: var(--white);
            margin-bottom: 10px;
        }
        .footer-cta-copy {
            font-family: var(--font-secondary);
            font-size: 14px;
            line-height: 1.6;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.63);
        }
        .footer-cta-action { flex-shrink: 0; }

        /* --- FOOTER BODY (Explore + Contact) --- */
        .footer-body {
            display: grid;
            grid-template-columns: 0.6fr 1fr 0.5fr 1fr;
            gap: 0 40px;
            align-items: start;
            padding-bottom: 32px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        }
        .footer-columns {
            display: contents;
        }
        .footer-col-explore { grid-column: 2; grid-row: 1; }
        .footer-col-contact { grid-column: 4; grid-row: 1; }

        /* Social icons (small, no boxes) */
        .footer-social {
            grid-column: 4;
            grid-row: 2;
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 20px;
        }
        .footer-social a {
            color: rgba(255, 255, 255, 0.62);
            line-height: 0;
            transition: color 0.3s ease, transform 0.3s var(--transition-premium);
        }
        .footer-social a svg {
            width: 16px;
            height: 16px;
            display: block;
            fill: currentColor;
        }
        .footer-social a:hover {
            color: var(--brand-red);
            transform: translateY(-1px);
        }

        .footer-col-title {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.45);
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .footer-col-title::before {
            content: '';
            width: 5px; height: 5px;
            background: var(--brand-red);
            transform: rotate(45deg);
            flex-shrink: 0;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .footer-link {
            position: relative;
            font-family: var(--font-secondary);
            font-size: 13.5px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.3s ease, padding-left 0.3s var(--transition-premium);
            display: inline-block;
        }
        .footer-link::before {
            content: '';
            position: absolute;
            left: 0; top: 50%;
            width: 0; height: 1px;
            background: var(--brand-red);
            transform: translateY(-50%);
            transition: width 0.3s var(--transition-premium);
        }
        .footer-link:hover {
            color: var(--white);
            padding-left: 16px;
        }
        .footer-link:hover::before { width: 10px; }

        /* Contact column */
        .footer-contact-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .footer-contact-item {
            font-family: var(--font-secondary);
            font-size: 13.5px;
            line-height: 1.55;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.6);
        }
        .footer-contact-item a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer-contact-item a:hover { color: var(--brand-red); }
        .footer-contact-label {
            display: block;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.3);
            margin-bottom: 5px;
        }

        /* Legal bar */
        .footer-legal {
            padding-top: 20px;
        }
        .footer-legal-text {
            font-family: var(--font-secondary);
            font-size: 11.5px;
            font-weight: 300;
            letter-spacing: 0.02em;
            color: rgba(255, 255, 255, 0.4);
        }

        /* --- RESPONSIVE RE-OVERRIDE GRIDS --- */
        @media (max-width: 1024px) {
            .hero-header { width: calc(100% - 40px); padding: 0 30px; }
            .cap-container { grid-template-columns: 1fr; gap: 50px; }
            .cap-illustration { height: 700px; }

            .showcase-grid { grid-template-columns: 1fr; gap: 50px; }
            .showcase-left-panel { position: static; }
            .composition-viewport { height: 460px; }

            .ind-grid { grid-template-columns: repeat(2, 1fr); }
            .ind-chip:nth-child(3n) { border-right: 1px solid rgba(2, 2, 2, 0.05); }
            .ind-chip:nth-child(2n) { border-right: none; }
            .ind-chip:nth-last-child(-n+3) { border-bottom: 1px solid rgba(2, 2, 2, 0.05); }
            .ind-chip:nth-last-child(-n+2) { border-bottom: none; }
            .ind-trust-strip { grid-template-columns: repeat(2, 1fr); }
            .ind-trust-item:nth-child(2n) { border-right: none; }
            .ind-trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(2, 2, 2, 0.05); }

            .footer-logo { height: 82px; }
            .footer-brand-card { gap: 28px; margin-bottom: 24px; }
            .footer-cta { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 26px; }
            .footer-body {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
            .footer-col-explore { grid-column: 1; grid-row: 1; }
            .footer-col-contact { grid-column: 2; grid-row: 1; }
            .footer-social { grid-column: 2; grid-row: 2; }
        }

        @media (max-width: 880px) {
            .nav-menu-center { display: none; }
        }

        @media (max-width: 768px) {
            html {
                scroll-padding-top: 78px;
            }

            .hero-video-bg {
                max-width: none;
            }

            /* Inner pages — keep compact pill nav on mobile */
            .hero-header.inner-nav {
                top: 12px;
                width: calc(100% - 32px);
                max-width: none;
                height: 56px;
                padding: 0 14px;
            }

            .hero-header.inner-nav .nav-logo {
                max-height: 36px;
                max-width: 102px;
            }

            .hero-header.inner-nav .btn-header-action {
                height: 44px;
                padding: 0 18px;
                font-size: 11px;
            }

            /* --- Homepage mobile header + drawer --- */
            .home-page .hero-header:not(.inner-nav) {
                top: 0;
                left: 0;
                right: 0;
                transform: none;
                width: 100%;
                max-width: none;
                height: 58px;
                max-height: 58px;
                min-height: 0;
                margin: 0;
                padding: 0 24px;
                background: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border: none;
                border-radius: 0;
                box-shadow: none;
                align-items: center;
            }

            .home-page .hero-header:not(.inner-nav).scrolled {
                top: 0;
                height: 58px;
                max-height: 58px;
                background: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border: none;
                box-shadow: none;
            }

            .home-page .hero-header:not(.inner-nav) .nav-menu-center,
            .home-page .hero-header:not(.inner-nav) .btn-header-action {
                display: none !important;
            }

            .home-page .hero-header:not(.inner-nav) .logo-link-wrapper {
                transition: opacity 0.35s ease, transform 0.35s ease;
            }

            .home-page .hero-header:not(.inner-nav).scrolled .logo-link-wrapper {
                opacity: 0;
                transform: translateY(-8px);
                pointer-events: none;
            }

            .home-page .hero-header:not(.inner-nav) .nav-logo {
                height: auto;
                max-height: 45px;
                max-width: 120px;
                width: auto;
                object-fit: contain;
                transform: none;
            }

            .home-page .nav-hamburger {
                display: flex;
                width: 24px;
                height: 24px;
                gap: 5px;
            }

            .home-page .nav-hamburger-line {
                width: 20px;
                background: #000;
            }

            .home-page .nav-mobile-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                z-index: 1090;
                background: rgba(0, 0, 0, 0.45);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity 0.35s ease, visibility 0.35s ease;
            }

            .home-page .nav-mobile-drawer {
                display: flex;
                flex-direction: column;
                position: fixed;
                top: 0;
                right: 0;
                width: 40vw;
                min-width: 168px;
                max-width: 220px;
                height: 100vh;
                height: 100dvh;
                z-index: 1100;
                background-color: #ffffff;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border-left: 1px solid rgba(0, 0, 0, 0.08);
                box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
                transform: translateX(100%);
                transition: transform 0.38s var(--transition-premium);
                pointer-events: none;
            }

            .home-page .nav-mobile-drawer-inner {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                padding: 28px 28px 28px;
            }

            .home-page .nav-mobile-drawer-main {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                flex-shrink: 0;
            }

            .home-page .nav-mobile-drawer-logo-link {
                display: block;
                margin: 0;
                line-height: 0;
                align-self: flex-start;
            }

            .home-page .nav-mobile-drawer-logo {
                width: 100px;
                max-width: 100px;
                height: auto;
                object-fit: contain;
                display: block;
            }

            .home-page .nav-mobile-links {
                list-style: none;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                width: 100%;
                margin-top: 20px;
            }

            .home-page .nav-mobile-links li {
                margin-bottom: 26px;
            }

            .home-page .nav-mobile-links li:last-child {
                margin-bottom: 0;
            }

            .home-page .nav-mobile-links a {
                position: relative;
                display: inline-block;
                font-family: var(--font-secondary);
                font-size: 12px;
                font-weight: 400;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                text-decoration: none;
                color: rgba(0, 0, 0, 0.82);
                padding: 0 0 8px 0;
                transition: color 0.3s ease;
            }

            .home-page .nav-mobile-links a::after {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                width: 5px;
                height: 5px;
                border-bottom: 2px solid var(--brand-red);
                border-right: 2px solid var(--brand-red);
                transition: transform 0.2s ease;
            }

            .home-page .nav-mobile-links a:hover,
            .home-page .nav-mobile-links a:focus {
                color: var(--brand-red);
            }

            .home-page .nav-mobile-links a:hover::after,
            .home-page .nav-mobile-links a:focus::after {
                transform: translate(2px, 2px);
            }

            .home-page .nav-mobile-cta {
                width: 100%;
                height: 44px;
                padding: 0 16px;
                font-size: 11px;
                letter-spacing: 0.12em;
                justify-content: center;
                background: rgba(255, 255, 255, 0.5);
                color: var(--main-black);
                border-color: rgba(0, 0, 0, 0.22);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .home-page .nav-mobile-cta:hover {
                background: rgba(255, 255, 255, 0.95);
                color: var(--main-black);
                border-color: rgba(0, 0, 0, 0.35);
            }

            .home-page.nav-open {
                overflow: hidden;
            }

            .home-page.nav-open .nav-mobile-backdrop {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            .home-page.nav-open .nav-mobile-drawer {
                transform: translateX(0);
                pointer-events: auto;
            }

            .home-page.nav-open .nav-hamburger-line:nth-child(1) {
                transform: translateY(6.5px) rotate(45deg);
            }

            .home-page.nav-open .nav-hamburger-line:nth-child(2) {
                opacity: 0;
            }

            .home-page.nav-open .nav-hamburger-line:nth-child(3) {
                transform: translateY(-6.5px) rotate(-45deg);
            }

            /* --- Capabilities + Aerial Services + HALO360 + Industries + Get in Touch: same mobile nav as homepage --- */
            .capabilities-page .hero-header.inner-nav,
            .aerial-services-page .hero-header.inner-nav,
            .halo360-page .hero-header.inner-nav,
            .industries-page .hero-header.inner-nav,
            .git-page .hero-header.inner-nav {
                top: 0;
                left: 0;
                right: 0;
                transform: none;
                width: 100%;
                max-width: none;
                height: 58px;
                max-height: 58px;
                min-height: 0;
                margin: 0;
                padding: 0 24px;
                background: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border: none;
                border-radius: 0;
                box-shadow: none;
                align-items: center;
            }

            .capabilities-page .hero-header.inner-nav.scrolled,
            .aerial-services-page .hero-header.inner-nav.scrolled,
            .halo360-page .hero-header.inner-nav.scrolled,
            .industries-page .hero-header.inner-nav.scrolled,
            .git-page .hero-header.inner-nav.scrolled {
                top: 0;
                height: 58px;
                max-height: 58px;
                background: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border: none;
                box-shadow: none;
            }

            .capabilities-page .hero-header.inner-nav .nav-menu-center,
            .capabilities-page .hero-header.inner-nav .btn-header-action,
            .aerial-services-page .hero-header.inner-nav .nav-menu-center,
            .aerial-services-page .hero-header.inner-nav .btn-header-action,
            .halo360-page .hero-header.inner-nav .nav-menu-center,
            .halo360-page .hero-header.inner-nav .btn-header-action,
            .industries-page .hero-header.inner-nav .nav-menu-center,
            .industries-page .hero-header.inner-nav .btn-header-action,
            .git-page .hero-header.inner-nav .nav-menu-center,
            .git-page .hero-header.inner-nav .btn-header-action {
                display: none !important;
            }

            .capabilities-page .hero-header.inner-nav .logo-link-wrapper,
            .aerial-services-page .hero-header.inner-nav .logo-link-wrapper,
            .halo360-page .hero-header.inner-nav .logo-link-wrapper,
            .industries-page .hero-header.inner-nav .logo-link-wrapper,
            .git-page .hero-header.inner-nav .logo-link-wrapper {
                transition: opacity 0.35s ease, transform 0.35s ease;
            }

            .capabilities-page .hero-header.inner-nav.scrolled .logo-link-wrapper,
            .aerial-services-page .hero-header.inner-nav.scrolled .logo-link-wrapper,
            .halo360-page .hero-header.inner-nav.scrolled .logo-link-wrapper,
            .industries-page .hero-header.inner-nav.scrolled .logo-link-wrapper,
            .git-page .hero-header.inner-nav.scrolled .logo-link-wrapper {
                opacity: 0;
                transform: translateY(-8px);
                pointer-events: none;
            }

            .capabilities-page .hero-header.inner-nav .nav-logo,
            .aerial-services-page .hero-header.inner-nav .nav-logo,
            .halo360-page .hero-header.inner-nav .nav-logo,
            .industries-page .hero-header.inner-nav .nav-logo,
            .git-page .hero-header.inner-nav .nav-logo {
                height: auto;
                max-height: 45px;
                max-width: 120px;
                width: auto;
                object-fit: contain;
                transform: none;
            }

            .capabilities-page .nav-hamburger,
            .aerial-services-page .nav-hamburger,
            .halo360-page .nav-hamburger,
            .industries-page .nav-hamburger,
            .git-page .nav-hamburger {
                display: flex;
                width: 24px;
                height: 24px;
                gap: 5px;
            }

            .capabilities-page .nav-hamburger-line,
            .aerial-services-page .nav-hamburger-line,
            .halo360-page .nav-hamburger-line,
            .industries-page .nav-hamburger-line,
            .git-page .nav-hamburger-line {
                width: 20px;
                background: #000;
            }

            .capabilities-page .nav-mobile-backdrop,
            .aerial-services-page .nav-mobile-backdrop,
            .halo360-page .nav-mobile-backdrop,
            .industries-page .nav-mobile-backdrop,
            .git-page .nav-mobile-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                z-index: 1090;
                background: rgba(0, 0, 0, 0.45);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity 0.35s ease, visibility 0.35s ease;
            }

            .capabilities-page .nav-mobile-drawer,
            .aerial-services-page .nav-mobile-drawer,
            .halo360-page .nav-mobile-drawer,
            .industries-page .nav-mobile-drawer,
            .git-page .nav-mobile-drawer {
                display: flex;
                flex-direction: column;
                position: fixed;
                top: 0;
                right: 0;
                width: 40vw;
                min-width: 168px;
                max-width: 220px;
                height: 100vh;
                height: 100dvh;
                z-index: 1100;
                background-color: #ffffff;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border-left: 1px solid rgba(0, 0, 0, 0.08);
                box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
                transform: translateX(100%);
                transition: transform 0.38s var(--transition-premium);
                pointer-events: none;
            }

            .capabilities-page .nav-mobile-drawer-inner,
            .aerial-services-page .nav-mobile-drawer-inner,
            .halo360-page .nav-mobile-drawer-inner,
            .industries-page .nav-mobile-drawer-inner,
            .git-page .nav-mobile-drawer-inner {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;
                padding: 28px 28px 28px;
            }

            .capabilities-page .nav-mobile-drawer-main,
            .aerial-services-page .nav-mobile-drawer-main,
            .halo360-page .nav-mobile-drawer-main,
            .industries-page .nav-mobile-drawer-main,
            .git-page .nav-mobile-drawer-main {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                flex-shrink: 0;
            }

            .capabilities-page .nav-mobile-drawer-logo-link,
            .aerial-services-page .nav-mobile-drawer-logo-link,
            .halo360-page .nav-mobile-drawer-logo-link,
            .industries-page .nav-mobile-drawer-logo-link,
            .git-page .nav-mobile-drawer-logo-link {
                display: block;
                margin: 0;
                line-height: 0;
                align-self: flex-start;
            }

            .capabilities-page .nav-mobile-drawer-logo,
            .aerial-services-page .nav-mobile-drawer-logo,
            .halo360-page .nav-mobile-drawer-logo,
            .industries-page .nav-mobile-drawer-logo,
            .git-page .nav-mobile-drawer-logo {
                width: 100px;
                max-width: 100px;
                height: auto;
                object-fit: contain;
                display: block;
            }

            .capabilities-page .nav-mobile-links,
            .aerial-services-page .nav-mobile-links,
            .halo360-page .nav-mobile-links,
            .industries-page .nav-mobile-links,
            .git-page .nav-mobile-links {
                list-style: none;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                width: 100%;
                margin-top: 20px;
            }

            .capabilities-page .nav-mobile-links li,
            .aerial-services-page .nav-mobile-links li,
            .halo360-page .nav-mobile-links li,
            .industries-page .nav-mobile-links li,
            .git-page .nav-mobile-links li {
                margin-bottom: 26px;
            }

            .capabilities-page .nav-mobile-links li:last-child,
            .aerial-services-page .nav-mobile-links li:last-child,
            .halo360-page .nav-mobile-links li:last-child,
            .industries-page .nav-mobile-links li:last-child,
            .git-page .nav-mobile-links li:last-child {
                margin-bottom: 0;
            }

            .capabilities-page .nav-mobile-links a,
            .aerial-services-page .nav-mobile-links a,
            .halo360-page .nav-mobile-links a,
            .industries-page .nav-mobile-links a,
            .git-page .nav-mobile-links a {
                position: relative;
                display: inline-block;
                font-family: var(--font-secondary);
                font-size: 12px;
                font-weight: 400;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                text-decoration: none;
                color: rgba(0, 0, 0, 0.82);
                padding: 0 0 8px 0;
                transition: color 0.3s ease;
            }

            .capabilities-page .nav-mobile-links a::after,
            .aerial-services-page .nav-mobile-links a::after,
            .halo360-page .nav-mobile-links a::after,
            .industries-page .nav-mobile-links a::after,
            .git-page .nav-mobile-links a::after {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                width: 5px;
                height: 5px;
                border-bottom: 2px solid var(--brand-red);
                border-right: 2px solid var(--brand-red);
                transition: transform 0.2s ease;
            }

            .capabilities-page .nav-mobile-links a:hover,
            .capabilities-page .nav-mobile-links a:focus,
            .aerial-services-page .nav-mobile-links a:hover,
            .aerial-services-page .nav-mobile-links a:focus,
            .halo360-page .nav-mobile-links a:hover,
            .industries-page .nav-mobile-links a:hover,
            .industries-page .nav-mobile-links a:focus,
            .git-page .nav-mobile-links a:hover,
            .git-page .nav-mobile-links a:focus {
                color: var(--brand-red);
            }

            .capabilities-page .nav-mobile-links a:hover::after,
            .capabilities-page .nav-mobile-links a:focus::after,
            .aerial-services-page .nav-mobile-links a:hover::after,
            .aerial-services-page .nav-mobile-links a:focus::after,
            .halo360-page .nav-mobile-links a:hover::after,
            .industries-page .nav-mobile-links a:hover::after,
            .industries-page .nav-mobile-links a:focus::after,
            .git-page .nav-mobile-links a:hover::after,
            .git-page .nav-mobile-links a:focus::after {
                transform: translate(2px, 2px);
            }

            .capabilities-page .nav-mobile-cta,
            .aerial-services-page .nav-mobile-cta,
            .halo360-page .nav-mobile-cta,
            .industries-page .nav-mobile-cta,
            .git-page .nav-mobile-cta {
                width: 100%;
                height: 44px;
                padding: 0 16px;
                font-size: 11px;
                letter-spacing: 0.12em;
                justify-content: center;
                background: rgba(255, 255, 255, 0.5);
                color: var(--main-black);
                border-color: rgba(0, 0, 0, 0.22);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .capabilities-page .nav-mobile-cta:hover,
            .aerial-services-page .nav-mobile-cta:hover,
            .halo360-page .nav-mobile-cta:hover,
            .industries-page .nav-mobile-cta:hover,
            .git-page .nav-mobile-cta:hover {
                background: rgba(255, 255, 255, 0.95);
                color: var(--main-black);
                border-color: rgba(0, 0, 0, 0.35);
            }

            .capabilities-page.nav-open,
            .aerial-services-page.nav-open,
            .halo360-page.nav-open, .industries-page.nav-open, .git-page.nav-open {
                overflow: hidden;
            }

            .capabilities-page.nav-open .nav-mobile-backdrop,
            .aerial-services-page.nav-open .nav-mobile-backdrop,
            .halo360-page.nav-open .nav-mobile-backdrop, .industries-page.nav-open .nav-mobile-backdrop, .git-page.nav-open .nav-mobile-backdrop {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            .capabilities-page.nav-open .nav-mobile-drawer,
            .aerial-services-page.nav-open .nav-mobile-drawer,
            .halo360-page.nav-open .nav-mobile-drawer, .industries-page.nav-open .nav-mobile-drawer, .git-page.nav-open .nav-mobile-drawer {
                transform: translateX(0);
                pointer-events: auto;
            }

            .capabilities-page.nav-open .nav-hamburger-line:nth-child(1),
            .aerial-services-page.nav-open .nav-hamburger-line:nth-child(1),
            .halo360-page.nav-open .nav-hamburger-line:nth-child(1),
            .industries-page.nav-open .nav-hamburger-line:nth-child(1), .git-page.nav-open .nav-hamburger-line:nth-child(1) {
                transform: translateY(6.5px) rotate(45deg);
            }

            .capabilities-page.nav-open .nav-hamburger-line:nth-child(2),
            .aerial-services-page.nav-open .nav-hamburger-line:nth-child(2),
            .halo360-page.nav-open .nav-hamburger-line:nth-child(2),
            .industries-page.nav-open .nav-hamburger-line:nth-child(2), .git-page.nav-open .nav-hamburger-line:nth-child(2) {
                opacity: 0;
            }

            .capabilities-page.nav-open .nav-hamburger-line:nth-child(3),
            .aerial-services-page.nav-open .nav-hamburger-line:nth-child(3),
            .halo360-page.nav-open .nav-hamburger-line:nth-child(3),
            .industries-page.nav-open .nav-hamburger-line:nth-child(3),
            .git-page.nav-open .nav-hamburger-line:nth-child(3) {
                transform: translateY(-6.5px) rotate(-45deg);
            }

            /* --- Homepage hero --- */
            .home-page .hero-container {
                width: 100vw;
                max-width: 100vw;
                margin-left: calc(50% - 50vw);
                min-height: min(74vh, 620px);
                padding-bottom: 0;
            }

            .home-page .hero-video-bg {
                position: absolute;
                inset: 0;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
                object-position: center 75%;
                transform: scale(1.15);
                transform-origin: center 75%;
            }

            .home-page .hero-overlay {
                background: linear-gradient(180deg,
                    rgba(2, 2, 2, 0.58) 0%,
                    rgba(2, 2, 2, 0.36) 45%,
                    rgba(2, 2, 2, 0.76) 100%);
            }

            .home-page .hero-content {
                position: absolute;
                left: 50%;
                bottom: 10vh;
                transform: translateX(-50%);
                width: calc(100% - 48px);
                padding: 0;
                margin: 0;
                align-items: center;
                text-align: center;
            }

            .home-page .hero-label {
                font-size: 8px;
                letter-spacing: 0.08em;
                margin-bottom: 14px;
                white-space: nowrap;
                max-width: calc(100vw - 64px);
                text-align: center;
                gap: 7px;
            }

            .home-page .hero-label::before,
            .home-page .hero-label::after {
                width: 3px;
                height: 3px;
                flex-shrink: 0;
            }

            .home-page .hero-headline {
                font-size: clamp(30px, 7.8vw, 34px);
                line-height: 1.02;
                letter-spacing: -0.03em;
                margin-bottom: 18px;
            }

            .home-page .hero-subheadline {
                font-size: clamp(13px, 3.2vw, 14px);
                line-height: 1.45;
                margin-bottom: 22px;
                max-width: 310px;
            }

            .home-page .hero-content .btn-hero-action {
                width: auto;
                min-width: 150px;
                max-width: 170px;
                height: 40px;
                padding: 0 14px;
                font-size: clamp(8px, 2vw, 9px);
                letter-spacing: 0.07em;
                white-space: nowrap;
            }

            /* --- Capability system --- */
            .capability-section {
                padding: 48px 20px 52px;
            }

            .capability-section .cap-container {
                gap: 24px;
            }

            .capability-section .cap-section-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .capability-section .cap-section-label::before {
                width: 5px;
                height: 5px;
            }

            .capability-section .cap-heading {
                font-size: clamp(13.5px, 3.85vw, 18px);
                line-height: 1.15;
                letter-spacing: -0.03em;
                margin-bottom: 12px;
                white-space: nowrap;
            }

            .capability-section .cap-desc {
                font-size: 13px;
                line-height: 1.55;
                max-width: 100%;
                margin-bottom: 12px;
            }

            .capability-section .cap-subdesc {
                font-size: 11.5px;
                line-height: 1.5;
                padding-left: 12px;
            }

            .capability-section .cap-illustration {
                position: relative;
                width: 100vw;
                max-width: 100vw;
                margin-left: calc(50% - 50vw);
                height: 340px;
                min-height: 340px;
                margin-top: 0;
                overflow: hidden;
            }

            .capability-section .diagram-grid,
            .capability-section .diagram-core,
            .capability-section .diagram-orbit {
                display: block;
            }

            .capability-section .diagram-grid {
                background-size: 26px 26px;
                mask-image: radial-gradient(circle at center, black 22%, transparent 80%);
                -webkit-mask-image: radial-gradient(circle at center, black 22%, transparent 80%);
            }

            .capability-section .cap-illustration .orbit-inner,
            .capability-section .cap-illustration .orbit-outer {
                animation: none;
                transform: translate(-50%, -50%);
            }

            .capability-section .cap-illustration .orbit-inner {
                width: 168px;
                height: 168px;
            }

            .capability-section .cap-illustration .orbit-outer {
                width: 268px;
                height: 268px;
            }

            .capability-section .node-wrapper {
                position: absolute;
                width: 116px;
            }

            .capability-section .node-document {
                top: 4%;
                left: 3%;
                right: auto;
                bottom: auto;
                animation: float-cap-subtle 7s ease-in-out infinite;
            }

            .capability-section .node-market {
                top: 4%;
                right: 3%;
                left: auto;
                bottom: auto;
                animation: float-cap-subtle 8s ease-in-out infinite 1.2s;
            }

            .capability-section .node-map {
                bottom: 4%;
                left: 3%;
                top: auto;
                right: auto;
                animation: float-cap-subtle 7.5s ease-in-out infinite 2s;
            }

            .capability-section .node-showcase {
                bottom: 4%;
                right: 3%;
                top: auto;
                left: auto;
                animation: float-cap-subtle 8.5s ease-in-out infinite 0.6s;
            }

            @keyframes float-cap-subtle {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-2px); }
            }

            .capability-section .system-node {
                width: 116px;
                height: 104px;
                min-height: 104px;
                max-height: 104px;
                padding: 10px 9px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            }

            .capability-section .node-header {
                flex-shrink: 0;
                gap: 7px;
                margin-bottom: 6px;
            }

            .capability-section .node-title {
                font-size: 9.5px;
                letter-spacing: 0.05em;
                line-height: 1.2;
            }

            .capability-section .node-text {
                font-size: 8.5px;
                line-height: 1.34;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                flex: 1;
                min-height: 0;
            }

            .capability-section .icon-doc {
                width: 8px;
                height: 8px;
            }

            .capability-section .icon-market {
                width: 10px;
                height: 10px;
            }

            .capability-section .icon-map {
                width: 9px;
                height: 9px;
            }

            .capability-section .icon-showcase {
                width: 12px;
                height: 6px;
            }

            /* --- What We Do --- */
            .showcase-premium-section {
                padding: 48px 20px 52px;
            }

            .showcase-premium-section .showcase-grid {
                gap: 24px;
            }

            .showcase-premium-section .showcase-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
            }

            .showcase-premium-section .showcase-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.15;
                letter-spacing: -0.02em;
                margin-bottom: 12px;
            }

            .showcase-premium-section .showcase-copy {
                font-size: 13px;
                line-height: 1.55;
                margin-bottom: 16px;
                max-width: 100%;
            }

            .showcase-premium-section .showcase-selector {
                gap: 10px;
            }

            .showcase-premium-section .selector-item-btn {
                padding: 12px 14px 12px 18px;
            }

            .showcase-premium-section .selector-item-btn.active {
                padding-left: 22px;
            }

            .showcase-premium-section .selector-item-btn .num {
                font-size: 11px;
            }

            .showcase-premium-section .selector-item-btn .title {
                font-size: 13px;
            }

            .showcase-premium-section .selector-item-btn .desc {
                font-size: 11.5px;
                line-height: 1.45;
                max-width: 100%;
            }

            .showcase-premium-section .selector-item-btn .item-num-title {
                gap: 10px;
                margin-bottom: 4px;
            }

            /* --- Visual collage: scaled desktop composition --- */
            .showcase-premium-section .showcase-right-canvas {
                overflow: visible;
            }

            .showcase-premium-section .canvas-premium-backdrop {
                top: -8px;
                left: -8px;
                right: -8px;
                bottom: -8px;
            }

            .showcase-premium-section .canvas-premium-backdrop::before,
            .showcase-premium-section .canvas-premium-backdrop::after {
                width: 10px;
                height: 10px;
            }

            .showcase-premium-section .canvas-telemetry-overlay::before {
                top: 14px;
                left: 14px;
                font-size: 10px;
            }

            .showcase-premium-section .canvas-telemetry-overlay::after {
                bottom: 14px;
                right: 14px;
                font-size: 7px;
            }

            .showcase-premium-section .composition-viewport {
                height: 292px;
                min-height: 292px;
            }

            .showcase-premium-section .composition-view {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: visible;
            }

            .showcase-premium-section .composition-view.active {
                display: block;
                transform: scale(1) translateY(0);
            }

            .showcase-premium-section .composition-view .img-panel-base {
                position: absolute;
                overflow: hidden;
            }

            .showcase-premium-section .composition-view .main-large-visual {
                position: absolute;
                width: 68%;
                height: 78%;
                top: 22px;
                left: 10px;
                right: auto;
                bottom: auto;
                z-index: 10;
            }

            .showcase-premium-section .composition-view .floating-card-1 {
                position: absolute;
                width: 42%;
                height: 44%;
                top: 0;
                right: 0;
                left: auto;
                bottom: auto;
                z-index: 4;
            }

            .showcase-premium-section .composition-view .floating-card-2 {
                position: absolute;
                width: 36%;
                height: 40%;
                bottom: 0;
                right: 18px;
                top: auto;
                left: auto;
                z-index: 3;
            }

            .showcase-premium-section .composition-view .main-large-visual::before,
            .showcase-premium-section .composition-view .main-large-visual::after {
                display: block;
                width: 9px;
                height: 9px;
            }

            .showcase-premium-section .composition-view .img-panel-base img {
                position: static;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .showcase-premium-section .floating-pill-label {
                bottom: 8px;
                left: 8px;
                font-size: 7.5px;
                letter-spacing: 0.08em;
                padding: 4px 8px;
            }

            .showcase-premium-section .showcase-output-strip {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                margin-top: 18px;
                padding-top: 14px;
            }

            .showcase-premium-section .output-strip-item .strip-text {
                font-size: 8px;
                letter-spacing: 0.04em;
            }

            .showcase-premium-section .output-strip-item .strip-dot {
                width: 3px;
                height: 3px;
            }

            /* --- HALO360 section --- */
            .halo360-immersive-section {
                padding: 52px 20px 56px;
                min-height: min(72vh, 580px);
                align-items: center;
            }

            .halo360-immersive-section::before {
                background-position: center right;
                opacity: 0.68;
            }

            .halo360-immersive-section .h360-readability-mask {
                background:
                    linear-gradient(90deg,
                        rgba(8, 8, 10, 0.98) 0%,
                        rgba(10, 10, 12, 0.94) 40%,
                        rgba(12, 12, 14, 0.76) 64%,
                        rgba(12, 12, 14, 0.5) 100%
                    ),
                    linear-gradient(180deg,
                        rgba(8, 8, 10, 0.62) 0%,
                        rgba(12, 12, 14, 0.16) 28%,
                        rgba(12, 12, 14, 0.16) 72%,
                        rgba(8, 8, 10, 0.62) 100%
                    );
            }

            .halo360-immersive-section .h360-content-container {
                align-items: flex-start;
            }

            .halo360-immersive-section .h360-text-block {
                max-width: 100%;
                text-align: left;
            }

            .halo360-immersive-section .h360-identity-header {
                margin-bottom: 16px;
            }

            .halo360-immersive-section .h360-brand-icon {
                height: 18px;
                margin-right: 8px;
            }

            .halo360-immersive-section .h360-logo-type {
                font-size: clamp(14px, 3.8vw, 17px);
            }

            .halo360-immersive-section .h360-eyebrow {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 14px;
            }

            .halo360-immersive-section .h360-title {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.15;
                letter-spacing: -0.02em;
                margin-bottom: 18px;
                max-width: 92%;
            }

            .halo360-immersive-section .h360-paragraph {
                font-size: 13px;
                line-height: 1.62;
                margin-bottom: 24px;
                max-width: 90%;
            }

            .halo360-immersive-section .h360-feature-matrix {
                gap: 22px;
                margin-bottom: 28px;
            }

            .halo360-immersive-section .h360-matrix-item {
                font-size: 11.5px;
                line-height: 1.52;
                gap: 12px;
                align-items: flex-start;
                padding: 0;
                max-width: 92%;
            }

            .halo360-immersive-section .h360-matrix-copy {
                display: flex;
                flex-direction: column;
                gap: 6px;
                min-width: 0;
            }

            .halo360-immersive-section .h360-matrix-copy strong {
                display: block;
                font-size: 11.5px;
                line-height: 1.3;
                letter-spacing: 0.02em;
            }

            .halo360-immersive-section .h360-matrix-copy strong::after {
                content: none;
            }

            .halo360-immersive-section .h360-matrix-desc {
                display: block;
                font-size: 11px;
                line-height: 1.5;
                font-weight: 300;
                color: rgba(255, 255, 255, 0.72);
            }

            .halo360-immersive-section .h360-matrix-item::before {
                width: 4px;
                height: 4px;
                margin-top: 0.35em;
            }

            .halo360-immersive-section .h360-text-block .btn-hero-action {
                width: auto;
                min-width: 150px;
                max-width: 170px;
                height: 40px;
                padding: 0 14px;
                font-size: 8px;
                letter-spacing: 0.07em;
                margin-top: 4px;
            }

            /* --- Industries --- */
            .industries-section {
                padding: 48px 20px 52px;
            }

            .industries-section .ind-heading-area {
                margin: 0 auto 20px;
                max-width: 100%;
            }

            .industries-section .ind-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .industries-section .ind-label::before {
                width: 5px;
                height: 5px;
            }

            .industries-section .ind-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.15;
                letter-spacing: -0.02em;
                margin-bottom: 12px;
            }

            .industries-section .ind-intro {
                font-size: 13px;
                line-height: 1.55;
                max-width: 100%;
            }

            .industries-section .ind-panel-head {
                padding: 10px 14px;
                font-size: 8px;
                letter-spacing: 0.16em;
                gap: 8px;
            }

            .industries-section .ind-panel-head .head-dot {
                width: 4px;
                height: 4px;
            }

            .industries-section .ind-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: 1fr;
            }

            .industries-section .ind-chip {
                display: flex;
                flex-direction: column;
                height: 100%;
                min-height: 112px;
                padding: 14px 12px 14px 14px;
                border-right: 1px solid rgba(2, 2, 2, 0.05) !important;
                border-bottom: 1px solid rgba(2, 2, 2, 0.05) !important;
            }

            .industries-section .ind-chip:nth-child(2n) {
                border-right: none !important;
            }

            .industries-section .ind-chip:nth-last-child(-n+2) {
                border-bottom: none !important;
            }

            .industries-section .ind-chip .chip-mark {
                margin-bottom: 5px;
                gap: 6px;
            }

            .industries-section .ind-chip .chip-index {
                font-size: 9px;
                color: #B0A89C;
            }

            .industries-section .ind-chip .chip-title {
                font-size: 11.5px;
                font-weight: 600;
                margin-bottom: 5px;
                line-height: 1.28;
                color: #2A2A2A;
            }

            .industries-section .ind-chip .chip-desc {
                font-size: 10px;
                line-height: 1.5;
                font-weight: 300;
                color: #8A837A;
                max-width: 100%;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .industries-section .ind-trust-strip {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }

            .industries-section .ind-trust-item {
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 0;
                padding: 10px 6px;
                font-size: 7.5px;
                font-weight: 400;
                letter-spacing: 0.04em;
                line-height: 1.4;
                color: #6E6860;
                border-right: 1px solid rgba(2, 2, 2, 0.06);
                border-bottom: none;
            }

            .industries-section .ind-trust-item:last-child {
                border-right: none;
            }

            .industries-section .ind-trust-item .trust-tick {
                display: none;
            }

            /* --- Footer --- */
            .contact-footer {
                padding: 34px 20px 28px;
                overflow: visible;
            }

            .contact-footer .footer-brand-card {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
                margin-bottom: 14px;
                padding: 0;
                background: none;
                border: none;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .contact-footer .footer-brand-card::before,
            .contact-footer .footer-brand-card::after {
                display: none;
            }

            .contact-footer .footer-logo-wrap {
                align-self: flex-start;
                width: auto;
                max-width: 142px;
                height: auto;
                border-bottom: none;
                padding: 0;
                margin: 0;
                background: none;
                justify-content: flex-start;
                line-height: 0;
            }

            .contact-footer .footer-logo-wrap picture {
                display: block;
                line-height: 0;
            }

            .contact-footer .footer-logo {
                display: block;
                width: auto;
                height: auto;
                max-height: 58px;
                max-width: 142px;
                object-fit: contain;
                object-position: left top;
                filter: none;
                opacity: 1;
                margin: 0;
            }

            .contact-footer .footer-brand-text {
                padding: 0;
                justify-content: flex-start;
                width: 100%;
            }

            .contact-footer .footer-overview {
                font-size: 12px;
                line-height: 1.52;
                color: rgba(255, 255, 255, 0.62);
                margin: 0;
            }

            .contact-footer .footer-cta {
                flex-direction: column;
                align-items: flex-start;
                padding: 12px 14px;
                margin-bottom: 12px;
                gap: 10px;
            }

            .contact-footer .footer-cta-eyebrow {
                font-size: 8px;
                letter-spacing: 0.18em;
                margin-bottom: 6px;
            }

            .contact-footer .footer-cta-heading {
                font-size: clamp(16px, 4.2vw, 18px);
                line-height: 1.18;
                margin-bottom: 5px;
            }

            .contact-footer .footer-cta-copy {
                font-size: 12px;
                line-height: 1.48;
                color: rgba(255, 255, 255, 0.58);
            }

            .contact-footer .footer-cta-action {
                width: auto;
            }

            .contact-footer .footer-cta-action .btn-hero-action {
                width: auto;
                min-width: 180px;
                max-width: 220px;
                height: 50px;
                padding: 0 18px;
                font-size: 9px;
                letter-spacing: 0.08em;
            }

            .contact-footer .footer-body {
                grid-template-columns: 1fr 1fr;
                gap: 14px 10px;
                padding-bottom: 18px;
            }

            .contact-footer .footer-col-explore {
                grid-column: 1;
                grid-row: 1;
                min-width: 0;
            }

            .contact-footer .footer-col-contact {
                grid-column: 2;
                grid-row: 1;
                min-width: 0;
            }

            .contact-footer .footer-social {
                grid-column: 2;
                grid-row: 2;
                align-self: start;
                justify-content: flex-start;
                gap: 12px;
                margin-top: 10px;
                padding-bottom: 0;
            }

            .contact-footer .footer-col-title {
                margin-bottom: 10px;
                font-size: 9px;
                letter-spacing: 0.16em;
            }

            .contact-footer .footer-links {
                gap: 9px;
            }

            .contact-footer .footer-link {
                font-size: 12.5px;
                color: rgba(255, 255, 255, 0.72);
            }

            .contact-footer .footer-contact-list {
                gap: 10px;
            }

            .contact-footer .footer-contact-item {
                font-size: 12.5px;
                line-height: 1.42;
                color: rgba(255, 255, 255, 0.78);
            }

            .contact-footer .footer-contact-item a {
                color: rgba(255, 255, 255, 0.82);
            }

            .contact-footer .footer-contact-label {
                font-size: 8.5px;
                letter-spacing: 0.14em;
                color: rgba(255, 255, 255, 0.38);
                margin-bottom: 3px;
            }

            .contact-footer .footer-social a {
                color: rgba(255, 255, 255, 0.72);
            }

            .contact-footer .footer-social a svg {
                width: 17px;
                height: 17px;
            }

            .contact-footer .footer-legal {
                padding-top: 12px;
                padding-bottom: 4px;
            }

            .contact-footer .footer-legal-text {
                font-size: 10px;
                line-height: 1.4;
                color: rgba(255, 255, 255, 0.42);
            }
        }

        @media (max-width: 480px) {
            html {
                scroll-padding-top: 72px;
            }

            .home-page .hero-header:not(.inner-nav) {
                top: 0;
                padding: 0 20px;
            }

            .home-page .hero-header:not(.inner-nav) .nav-logo {
                max-width: 112px;
                max-height: 42px;
            }

            .home-page .nav-mobile-drawer {
                width: 44vw;
                min-width: 156px;
            }

            .capabilities-page .hero-header.inner-nav,
            .aerial-services-page .hero-header.inner-nav,
            .halo360-page .hero-header.inner-nav,
            .industries-page .hero-header.inner-nav,
            .git-page .hero-header.inner-nav {
                top: 0;
                padding: 0 20px;
                width: 100%;
                height: 58px;
                max-height: 58px;
            }

            .capabilities-page .hero-header.inner-nav .nav-logo,
            .aerial-services-page .hero-header.inner-nav .nav-logo,
            .halo360-page .hero-header.inner-nav .nav-logo,
            .industries-page .hero-header.inner-nav .nav-logo,
            .git-page .hero-header.inner-nav .nav-logo {
                max-width: 112px;
                max-height: 42px;
            }

            .capabilities-page .nav-mobile-drawer,
            .aerial-services-page .nav-mobile-drawer,
            .halo360-page .nav-mobile-drawer,
            .industries-page .nav-mobile-drawer,
            .git-page .nav-mobile-drawer {
                width: 44vw;
                min-width: 156px;
            }

            .capabilities-page .cp-hero {
                min-height: min(62vh, 500px);
            }

            .capabilities-page .cp-hero-inner {
                width: calc(100% - 48px);
                padding: 54px 0 32px;
            }

            .capabilities-page .cp-hero .cp-dark-label {
                font-size: 7.5px;
                letter-spacing: 0.07em;
            }

            .capabilities-page .cp-hero-title {
                font-size: clamp(20px, 5.4vw, 26px);
            }

            .capabilities-page .cp-hero-actions .btn-hero-action {
                height: 38px;
                font-size: 8px;
            }

            .capabilities-page .cp-system,
            .capabilities-page .cp-outputs {
                padding: 48px 18px 50px;
            }

            .capabilities-page .cp-workflow {
                padding: 34px 18px 38px;
            }

            .capabilities-page .cp-workflow .cp-head {
                margin-bottom: 12px;
            }

            .capabilities-page .cp-flow-map {
                margin-top: 12px;
            }

            .capabilities-page .cp-flow-steps {
                gap: 0;
            }

            .capabilities-page .cp-flow-step {
                grid-template-columns: 36px 1fr;
                column-gap: 8px;
            }

            .capabilities-page .cp-flow-node {
                width: 26px;
                height: 26px;
                font-size: 8.5px;
                margin-bottom: 12px;
            }

            .capabilities-page .cp-flow-step-card {
                margin-bottom: 12px;
                padding: 10px 11px 12px;
            }

            .capabilities-page .cp-flow-title {
                font-size: clamp(12.5px, 3.2vw, 14px);
            }

            .capabilities-page .cp-flow-text {
                font-size: 10.5px;
            }

            .home-page .hero-container {
                min-height: min(72vh, 580px);
            }

            .home-page .hero-content {
                width: calc(100% - 48px);
            }

            .home-page .hero-label {
                font-size: 7.5px;
                letter-spacing: 0.07em;
                max-width: calc(100vw - 64px);
            }

            .home-page .hero-headline {
                font-size: clamp(30px, 7.8vw, 34px);
            }

            .home-page .hero-subheadline {
                font-size: 13px;
                max-width: 310px;
            }

            .home-page .hero-content .btn-hero-action {
                height: 38px;
                font-size: 8px;
            }

            .hero-header.inner-nav {
                top: 10px;
                width: calc(100% - 24px);
                height: 52px;
                padding: 0 12px;
            }

            .hero-header.inner-nav .nav-logo {
                max-height: 32px;
                max-width: 92px;
            }

            .hero-header.inner-nav .btn-header-action {
                height: 42px;
                padding: 0 16px;
                font-size: 10px;
            }

            .capability-section,
            .showcase-premium-section,
            .industries-section {
                padding: 48px 20px;
            }

            .halo360-immersive-section {
                padding: 48px 20px 52px;
                min-height: min(68vh, 520px);
            }

            .halo360-immersive-section .h360-title {
                font-size: clamp(15px, 3.9vw, 18px);
                margin-bottom: 16px;
            }

            .halo360-immersive-section .h360-paragraph {
                line-height: 1.6;
                margin-bottom: 22px;
            }

            .halo360-immersive-section .h360-feature-matrix {
                gap: 20px;
                margin-bottom: 26px;
            }

            .halo360-immersive-section .h360-matrix-copy {
                gap: 5px;
            }

            .halo360-immersive-section .h360-matrix-desc {
                font-size: 10.5px;
                line-height: 1.48;
            }

            .halo360-immersive-section .h360-text-block .btn-hero-action {
                height: 38px;
                font-size: 7.5px;
                margin-top: 2px;
            }

            .cap-heading,
            .showcase-heading,
            .ind-heading {
                font-size: 32px;
            }

            .capability-section .cap-heading {
                font-size: clamp(12.5px, 3.65vw, 16.5px);
            }

            .industries-section .ind-heading {
                font-size: clamp(15px, 3.9vw, 18px);
            }

            .capability-section .cap-illustration {
                height: 320px;
                min-height: 320px;
            }

            .capability-section .cap-illustration .orbit-inner {
                width: 152px;
                height: 152px;
            }

            .capability-section .cap-illustration .orbit-outer {
                width: 248px;
                height: 248px;
            }

            .capability-section .node-wrapper {
                width: 108px;
            }

            .capability-section .node-document,
            .capability-section .node-market {
                top: 3%;
            }

            .capability-section .node-document,
            .capability-section .node-map {
                left: 2%;
            }

            .capability-section .node-market,
            .capability-section .node-showcase {
                right: 2%;
            }

            .capability-section .node-map,
            .capability-section .node-showcase {
                bottom: 3%;
            }

            .capability-section .system-node {
                width: 108px;
                height: 98px;
                min-height: 98px;
                max-height: 98px;
                padding: 9px 8px;
            }

            .capability-section .node-text {
                font-size: 8px;
                line-height: 1.32;
            }

            .showcase-premium-section .showcase-heading {
                font-size: clamp(15px, 3.9vw, 18px);
            }

            .showcase-premium-section .composition-viewport {
                height: 272px;
                min-height: 272px;
            }

            .showcase-premium-section .composition-view .main-large-visual {
                top: 18px;
                left: 8px;
            }

            .showcase-premium-section .composition-view .floating-card-2 {
                right: 12px;
            }

            .showcase-premium-section .floating-pill-label {
                font-size: 7px;
                padding: 3px 7px;
            }

            .showcase-premium-section .showcase-output-strip {
                gap: 8px;
            }

            .showcase-premium-section .output-strip-item .strip-text {
                font-size: 7px;
            }

            .system-node {
                padding: 18px 16px;
            }

            .industries-section .ind-chip {
                min-height: 108px;
                padding: 13px 11px 13px 12px;
            }

            .industries-section .ind-chip .chip-title {
                font-size: 11px;
            }

            .industries-section .ind-chip .chip-desc {
                font-size: 9.5px;
                line-height: 1.48;
                -webkit-line-clamp: 4;
            }

            .industries-section .ind-trust-item {
                padding: 9px 4px;
                font-size: 7px;
                letter-spacing: 0.03em;
            }

            .contact-footer {
                padding: 32px 18px 26px;
            }

            .contact-footer .footer-logo {
                max-height: 56px;
                max-width: 137px;
            }

            .contact-footer .footer-logo-wrap {
                max-width: 137px;
            }

            .contact-footer .footer-brand-card {
                gap: 18px;
                margin-bottom: 12px;
            }

            .contact-footer .footer-overview {
                font-size: 11.5px;
                line-height: 1.5;
            }

            .contact-footer .footer-cta {
                padding: 11px 12px;
            }

            .contact-footer .footer-cta-heading {
                font-size: clamp(15px, 3.9vw, 17px);
            }

            .contact-footer .footer-cta-action .btn-hero-action {
                min-width: 180px;
                height: 48px;
                font-size: 8.5px;
            }

            .contact-footer .footer-columns {
                gap: 0;
            }

            .contact-footer .footer-body {
                gap: 12px 8px;
            }

            .contact-footer .footer-link {
                font-size: 12px;
            }

            .contact-footer .footer-contact-item {
                font-size: 12px;
                line-height: 1.4;
            }
        }

        /* =========================================
           CAPABILITIES PAGE (pages/capabilities.html)
        ========================================= */

        /* --- Shared dark-section label / heading helpers --- */
        .cp-dark-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.25em;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 20px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }
        .cp-dark-label::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--brand-red);
            border-radius: 50%;
        }

        /* --- INNER-PAGE NAVBAR: permanent white (no transparent-on-scroll) --- */
        .hero-header.inner-nav {
            top: 16px;
            height: 64px;
            background: rgba(255, 255, 255, 0.94);
            border-color: rgba(0, 0, 0, 0.06);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        }
        .hero-header.inner-nav .nav-logo { height: 105px; }
        .hero-header.inner-nav .nav-menu-center a {
            color: var(--main-black);
            font-weight: 500;
        }
        .hero-header.inner-nav .nav-menu-center a:hover { color: var(--brand-red); }
        .hero-header.inner-nav .btn-tech-bracket {
            background: rgba(2, 2, 2, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: var(--main-black);
            border-color: rgba(2, 2, 2, 0.14);
        }
        .hero-header.inner-nav .btn-tech-bracket:hover {
            background: var(--main-black);
            border-color: var(--main-black);
            color: var(--white);
        }

        /* --- SECTION 1: HERO --- */
        .cp-hero {
            position: relative;
            background-color: #0A0B0E;
            background-image: url('../assets/images/capabilities-hero.jpg');
            background-size: cover;
            background-position: center right;
            background-repeat: no-repeat;
            color: var(--white);
            padding: 188px 48px 118px;
            min-height: min(520px, 58vh);
            overflow: hidden;
        }
        /* Heavy dark overlay keeps the aerial image subtle and the text readable */
        .cp-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(6, 6, 8, 0.9) 0%, rgba(6, 6, 8, 0.74) 42%, rgba(6, 6, 8, 0.93) 100%),
                linear-gradient(90deg, rgba(6, 6, 8, 0.5) 0%, rgba(6, 6, 8, 0.16) 60%, rgba(6, 6, 8, 0.46) 100%);
            z-index: 1;
            pointer-events: none;
        }
        /* Subtle on-brand red glow on top of the overlay */
        .cp-hero::after {
            content: '';
            position: absolute;
            top: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 760px;
            height: 300px;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.13) 0%, rgba(244, 50, 52, 0.03) 42%, transparent 72%);
            z-index: 1;
            pointer-events: none;
        }
        .cp-hero-inner {
            position: relative;
            z-index: 2;
            max-width: 960px;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }
        .cp-hero .cp-dark-label { margin-bottom: 28px; }
        .cp-hero-title {
            font-family: var(--font-primary);
            font-size: clamp(30px, 3.8vw, 46px);
            line-height: 1.18;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 28px;
            max-width: 820px;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
        }
        .cp-hero-copy {
            font-family: var(--font-secondary);
            font-size: clamp(15px, 1.6vw, 18px);
            line-height: 1.7;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.74);
            max-width: 720px;
            margin-bottom: 48px;
        }
        .cp-hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* --- SECTION 2: CAPABILITY SYSTEM (warm beige, refined cards) --- */
        .cp-system {
            position: relative;
            background: #F3EFE8;
            color: var(--main-black);
            padding: 110px 40px;
        }
        .cp-system-inner { max-width: 1300px; margin: 0 auto; }
        .cp-head { max-width: 760px; margin-bottom: 54px; }
        .cp-card-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .cp-card {
            position: relative;
            padding: 34px 28px 36px;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.07);
            overflow: hidden;
            transition:
                transform 0.45s var(--transition-premium),
                box-shadow 0.45s var(--transition-premium),
                border-color 0.35s ease;
        }
        .cp-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 2px;
            background: var(--brand-red);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.45s var(--transition-premium);
        }
        .cp-card:hover::before { transform: scaleX(1); }
        .cp-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(40, 30, 20, 0.1);
            border-color: rgba(2, 2, 2, 0.12);
        }
        .cp-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }
        .cp-card-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #2A2A2A;
            transition: color 0.35s ease;
        }
        .cp-card-icon svg {
            width: 28px;
            height: 28px;
            display: block;
        }
        .cp-card:hover .cp-card-icon { color: var(--brand-red); }
        .cp-card-num {
            font-family: var(--font-secondary);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.18em;
            color: #BBB;
            transition: color 0.35s ease;
        }
        .cp-card:hover .cp-card-num { color: var(--brand-red); }
        .cp-card-title {
            font-family: var(--font-primary);
            font-size: 21px;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 14px;
        }
        .cp-card-text {
            font-family: var(--font-secondary);
            font-size: 13.5px;
            line-height: 1.62;
            font-weight: 300;
            color: #555;
        }

        /* --- SECTION 3: OUTPUT TYPES (dark, compact chips) --- */
        .cp-outputs {
            position: relative;
            background: #0A0B0E;
            color: var(--white);
            padding: 100px 40px;
            overflow: hidden;
        }
        .cp-outputs::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 900px; height: 360px;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.06) 0%, transparent 70%);
            z-index: 0;
            pointer-events: none;
        }
        .cp-outputs-inner {
            position: relative;
            z-index: 2;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }
        .cp-outputs-inner .cp-dark-label { justify-content: center; }
        .cp-dark-heading {
            font-family: var(--font-primary);
            font-size: clamp(28px, 3.4vw, 42px);
            line-height: 1.16;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 20px;
        }
        .cp-dark-intro {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.66;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.66);
            max-width: 660px;
            margin: 0 auto 44px;
        }
        /* Grouped deliverables board */
        .cp-deliverables {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            text-align: left;
        }
        .cp-group {
            position: relative;
            padding: 26px 24px 28px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition:
                border-color 0.35s ease,
                background 0.35s ease,
                transform 0.45s var(--transition-premium);
        }
        .cp-group:hover {
            border-color: rgba(244, 50, 52, 0.4);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-3px);
        }
        .cp-group-title {
            font-family: var(--font-secondary);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            color: var(--white);
            display: flex;
            align-items: center;
            gap: 9px;
            padding-bottom: 15px;
            margin-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .cp-group-title::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--brand-red);
            border-radius: 50%;
            flex-shrink: 0;
        }
        .cp-group-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .cp-group-item {
            font-family: var(--font-secondary);
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.74);
            display: flex;
            align-items: flex-start;
            gap: 10px;
            transition: color 0.3s ease;
        }
        .cp-group-item::before {
            content: '';
            width: 5px; height: 5px;
            margin-top: 6px;
            background: rgba(244, 50, 52, 0.7);
            transform: rotate(45deg);
            flex-shrink: 0;
            transition: background 0.3s ease;
        }
        .cp-group:hover .cp-group-item { color: rgba(255, 255, 255, 0.9); }
        .cp-group:hover .cp-group-item::before { background: var(--brand-red); }

        /* --- SECTION 4: WORKFLOW (operations map, staggered) --- */
        .cp-workflow {
            position: relative;
            background: #F3EFE8;
            color: var(--main-black);
            padding: 110px 40px;
            overflow: hidden;
        }
        .cp-workflow::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(2, 2, 2, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(2, 2, 2, 0.025) 1px, transparent 1px);
            background-size: 48px 48px;
            -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 75%);
            pointer-events: none;
        }
        .cp-workflow-inner {
            position: relative;
            z-index: 1;
            max-width: 1240px;
            margin: 0 auto;
        }

        .cp-flow-map {
            position: relative;
            margin-top: 56px;
            padding-top: 8px;
        }

        /* SVG process line — grey base + red draw */
        .cp-flow-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 118px;
            pointer-events: none;
            z-index: 0;
        }
        .cp-flow-path-base,
        .cp-flow-path-draw {
            fill: none;
        }
        .cp-flow-path-base {
            stroke: rgba(2, 2, 2, 0.14);
        }
        .cp-flow-path-draw {
            stroke: var(--brand-red);
            stroke-dasharray: 1800;
            stroke-dashoffset: 1800;
            transition: stroke-dashoffset 2.5s var(--transition-premium);
        }
        .cp-flow-map.is-revealed .cp-flow-path-draw {
            stroke-dashoffset: 0;
        }

        .cp-flow-svg--mobile {
            display: none;
        }

        /* Capabilities + HALO360 — synced path draw + step reveals */
        .capabilities-page .cp-flow-path-draw,
        .capabilities-page .cp-flow-path-draw--mobile,
        .halo360-page .cp-flow-path-draw,
        .halo360-page .cp-flow-path-draw--mobile {
            transition: stroke-dashoffset var(--cp-flow-duration, 4.8s) var(--transition-premium);
        }

        .capabilities-page .cp-flow-path-draw,
        .capabilities-page .cp-flow-path-draw--mobile,
        .halo360-page .cp-flow-path-draw,
        .halo360-page .cp-flow-path-draw--mobile {
            stroke-dasharray: var(--cp-flow-path-length, 1800);
            stroke-dashoffset: var(--cp-flow-path-length, 1800);
        }

        .capabilities-page .cp-flow-map.is-revealed .cp-flow-path-draw,
        .capabilities-page .cp-flow-map.is-revealed .cp-flow-path-draw--mobile,
        .halo360-page .cp-flow-map.is-revealed .cp-flow-path-draw,
        .halo360-page .cp-flow-map.is-revealed .cp-flow-path-draw--mobile {
            stroke-dashoffset: 0;
        }

        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(1),
        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(2),
        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(3),
        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(4),
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(1),
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(2),
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(3),
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(4) {
            opacity: 1;
            transform: translateY(0);
            transition-delay: var(--cp-flow-step-delay, 0s);
        }

        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(1) .cp-flow-node,
        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(2) .cp-flow-node,
        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(3) .cp-flow-node,
        .capabilities-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(4) .cp-flow-node,
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(1) .cp-flow-node,
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(2) .cp-flow-node,
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(3) .cp-flow-node,
        .halo360-page .cp-flow-map.is-revealed .cp-flow-step:nth-child(4) .cp-flow-node {
            transition-delay: var(--cp-flow-step-delay, 0s);
        }

        .capabilities-page .cp-flow-path-base--mobile,
        .halo360-page .cp-flow-path-base--mobile {
            stroke: rgba(2, 2, 2, 0.12);
        }

        .capabilities-page .cp-flow-path-draw--mobile,
        .halo360-page .cp-flow-path-draw--mobile {
            stroke: var(--brand-red);
        }

        .cp-flow-steps {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
            align-items: start;
        }

        .cp-flow-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            opacity: 0;
            transform: translateY(16px);
            transition:
                opacity 0.65s ease,
                transform 0.65s var(--transition-premium);
        }
        .cp-flow-step--high { margin-top: 0; }
        .cp-flow-step--low { margin-top: 44px; }

        .cp-flow-map.is-revealed .cp-flow-step:nth-child(1) {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.55s;
        }
        .cp-flow-map.is-revealed .cp-flow-step:nth-child(2) {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.05s;
        }
        .cp-flow-map.is-revealed .cp-flow-step:nth-child(3) {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.55s;
        }
        .cp-flow-map.is-revealed .cp-flow-step:nth-child(4) {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 2.05s;
        }

        .cp-flow-node {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #F3EFE8;
            border: 1px solid rgba(2, 2, 2, 0.16);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-secondary);
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 0.04em;
            color: var(--brand-red);
            margin-bottom: 14px;
            flex-shrink: 0;
            transition: border-color 0.5s ease, box-shadow 0.5s ease;
        }
        .cp-flow-map.is-revealed .cp-flow-step:nth-child(1) .cp-flow-node { transition-delay: 0.55s; }
        .cp-flow-map.is-revealed .cp-flow-step:nth-child(2) .cp-flow-node { transition-delay: 1.05s; }
        .cp-flow-map.is-revealed .cp-flow-step:nth-child(3) .cp-flow-node { transition-delay: 1.55s; }
        .cp-flow-map.is-revealed .cp-flow-step:nth-child(4) .cp-flow-node { transition-delay: 2.05s; }
        .cp-flow-map.is-revealed .cp-flow-node {
            border-color: var(--brand-red);
            box-shadow: 0 0 0 4px rgba(244, 50, 52, 0.08);
        }

        .cp-flow-step-card {
            position: relative;
            width: 100%;
            padding: 22px 20px 24px;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.08);
            box-shadow: 0 10px 28px rgba(40, 30, 20, 0.07);
            text-align: left;
            transition: border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .cp-flow-step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--brand-red);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.45s var(--transition-premium);
        }
        .cp-flow-step:hover .cp-flow-step-card {
            border-color: rgba(2, 2, 2, 0.12);
            box-shadow: 0 14px 32px rgba(40, 30, 20, 0.1);
        }
        .cp-flow-step:hover .cp-flow-step-card::before { transform: scaleX(1); }

        .cp-flow-micro {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #888;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        .cp-flow-micro::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
            flex-shrink: 0;
        }
        .cp-flow-title {
            font-family: var(--font-primary);
            font-size: 18px;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 8px;
        }
        .cp-flow-text {
            font-family: var(--font-secondary);
            font-size: 13px;
            line-height: 1.58;
            font-weight: 300;
            color: #555;
        }

        @media (prefers-reduced-motion: reduce) {
            .cp-flow-path-draw,
            .cp-flow-path-draw--mobile,
            .cp-flow-steps::after { transition: none; }
            .cp-flow-step,
            .cp-flow-node { transition: none; }
            .cp-flow-map .cp-flow-step {
                opacity: 1;
                transform: none;
            }
            .cp-flow-map .cp-flow-path-draw,
            .cp-flow-map .cp-flow-path-draw--mobile {
                stroke-dashoffset: 0;
            }
            .cp-flow-map .cp-flow-steps::after {
                transform: scaleY(1);
            }
            .cp-flow-map .cp-flow-node {
                border-color: var(--brand-red);
                box-shadow: 0 0 0 4px rgba(244, 50, 52, 0.08);
            }
            .capabilities-page .cp-flow-map .cp-flow-step,
            .halo360-page .cp-flow-map .cp-flow-step {
                transition-delay: 0s !important;
            }
        }

        /* --- SECTION 5: CTA (dark, compact) --- */
        .cp-cta {
            position: relative;
            background: linear-gradient(180deg, #0E1014 0%, #0A0B0E 100%);
            color: var(--white);
            padding: 96px 40px;
            overflow: hidden;
        }
        .cp-cta::after {
            content: '';
            position: absolute;
            top: -80px; left: 50%;
            transform: translateX(-50%);
            width: 740px; height: 280px;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.1) 0%, rgba(244, 50, 52, 0.025) 40%, transparent 72%);
            z-index: 0;
            pointer-events: none;
        }
        .cp-cta-panel {
            position: relative;
            z-index: 2;
            max-width: 860px;
            margin: 0 auto;
            text-align: center;
            padding: 50px 44px;
            background: linear-gradient(135deg, rgba(20, 20, 25, 0.9) 0%, rgba(13, 13, 17, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.09);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .cp-cta-panel::before {
            content: '';
            position: absolute;
            top: -2px; left: -2px;
            width: 12px; height: 12px;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
        }
        .cp-cta-panel::after {
            content: '';
            position: absolute;
            bottom: -2px; right: -2px;
            width: 12px; height: 12px;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
        }
        .cp-cta-heading {
            font-family: var(--font-primary);
            font-size: clamp(26px, 3vw, 38px);
            line-height: 1.16;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 16px;
            max-width: 640px;
        }
        .cp-cta-copy {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.62;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.66);
            max-width: 600px;
            margin-bottom: 34px;
        }

        /* --- CAPABILITIES PAGE RESPONSIVE --- */
        @media (max-width: 1024px) {
            .cp-card-grid { grid-template-columns: repeat(2, 1fr); }
            .cp-deliverables { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            .cp-hero { padding: 168px 24px 96px; min-height: auto; }
            .cp-system { padding: 80px 24px; }
            .cp-outputs { padding: 80px 24px; }
            .cp-workflow { padding: 80px 24px; }
            .cp-card-grid { grid-template-columns: 1fr; }
            .cp-deliverables { grid-template-columns: 1fr; }

            /* Workflow: vertical process timeline */
            .cp-flow-map { margin-top: 40px; padding-top: 0; }
            .cp-flow-svg--desktop { display: none; }
            .cp-flow-steps {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 0;
                padding-left: 52px;
            }
            .cp-flow-steps::before {
                content: '';
                position: absolute;
                top: 22px;
                bottom: 22px;
                left: 21px;
                width: 2px;
                background: rgba(2, 2, 2, 0.12);
            }
            .cp-flow-steps::after {
                content: '';
                position: absolute;
                top: 22px;
                left: 21px;
                width: 2px;
                height: calc(100% - 44px);
                background: var(--brand-red);
                transform: scaleY(0);
                transform-origin: top center;
                transition: transform 2.5s var(--transition-premium);
            }
            .cp-flow-map.is-revealed .cp-flow-steps::after {
                transform: scaleY(1);
            }
            .cp-flow-step {
                flex-direction: row;
                align-items: flex-start;
                text-align: left;
                gap: 18px;
                margin-top: 0 !important;
                padding-bottom: 28px;
            }
            .cp-flow-step:last-child { padding-bottom: 0; }
            .cp-flow-node {
                margin-bottom: 0;
                flex-shrink: 0;
            }
            .cp-flow-step-card { flex: 1; }
        }

        @media (max-width: 768px) {
            /* Capabilities page — homepage mobile design system */
            .capabilities-page .cp-hero {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: min(64vh, 540px);
                padding: 0;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center top;
            }

            .capabilities-page .cp-hero::before {
                background:
                    linear-gradient(180deg,
                        rgba(2, 2, 2, 0.4) 0%,
                        rgba(2, 2, 2, 0.56) 36%,
                        rgba(2, 2, 2, 0.8) 68%,
                        rgba(2, 2, 2, 0.94) 100%),
                    linear-gradient(90deg,
                        rgba(2, 2, 2, 0.64) 0%,
                        rgba(2, 2, 2, 0.3) 55%,
                        rgba(2, 2, 2, 0.68) 100%);
            }

            .capabilities-page .cp-hero::after {
                opacity: 0.45;
            }

            .capabilities-page .cp-hero-inner {
                width: calc(100% - 48px);
                padding: 58px 0 36px;
                margin: 0 auto;
            }

            .capabilities-page .cp-hero .cp-dark-label {
                font-size: 8px;
                letter-spacing: 0.08em;
                margin-bottom: 14px;
                gap: 7px;
            }

            .capabilities-page .cp-hero .cp-dark-label::before {
                width: 3px;
                height: 3px;
            }

            .capabilities-page .cp-hero-title {
                font-size: clamp(22px, 5.8vw, 28px);
                line-height: 1.12;
                letter-spacing: -0.03em;
                margin-bottom: 14px;
                max-width: 100%;
            }

            .capabilities-page .cp-hero-copy {
                font-size: 13px;
                line-height: 1.55;
                margin-bottom: 22px;
                max-width: 310px;
            }

            .capabilities-page .cp-hero-actions .btn-hero-action {
                width: auto;
                min-width: 150px;
                max-width: 170px;
                height: 40px;
                padding: 0 14px;
                font-size: clamp(8px, 2vw, 9px);
                letter-spacing: 0.07em;
            }

            .capabilities-page .cp-system,
            .capabilities-page .cp-outputs {
                padding: 48px 20px 52px;
            }

            .capabilities-page .cp-workflow {
                padding: 38px 20px 42px;
            }

            .capabilities-page .cp-head {
                margin-bottom: 24px;
            }

            .capabilities-page .cp-workflow .cp-head {
                margin-bottom: 14px;
            }

            .capabilities-page .cp-system .cap-section-label,
            .capabilities-page .cp-workflow .cap-section-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .capabilities-page .cp-system .cap-section-label::before,
            .capabilities-page .cp-workflow .cap-section-label::before {
                width: 5px;
                height: 5px;
            }

            .capabilities-page .cp-system .cap-heading,
            .capabilities-page .cp-workflow .cap-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                letter-spacing: -0.02em;
                margin-bottom: 0;
            }

            .capabilities-page .cp-card-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .capabilities-page .cp-card {
                padding: 16px 14px 18px;
            }

            .capabilities-page .cp-card-top {
                margin-bottom: 12px;
            }

            .capabilities-page .cp-card-icon svg {
                width: 20px;
                height: 20px;
            }

            .capabilities-page .cp-card-num {
                font-size: 9px;
                letter-spacing: 0.14em;
            }

            .capabilities-page .cp-card-title {
                font-size: clamp(14px, 3.6vw, 16px);
                line-height: 1.2;
                margin-bottom: 8px;
            }

            .capabilities-page .cp-card-text {
                font-size: 11.5px;
                line-height: 1.48;
            }

            .capabilities-page .cp-outputs-inner .cp-dark-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .capabilities-page .cp-outputs-inner .cp-dark-label::before {
                width: 5px;
                height: 5px;
            }

            .capabilities-page .cp-dark-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                letter-spacing: -0.02em;
                margin-bottom: 12px;
            }

            .capabilities-page .cp-dark-intro {
                font-size: 13px;
                line-height: 1.55;
                margin-bottom: 24px;
            }

            .capabilities-page .cp-deliverables {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .capabilities-page .cp-group {
                padding: 14px 12px 16px;
            }

            .capabilities-page .cp-group-title {
                font-size: 9px;
                letter-spacing: 0.12em;
                padding-bottom: 10px;
                margin-bottom: 10px;
                gap: 7px;
            }

            .capabilities-page .cp-group-title::before {
                width: 5px;
                height: 5px;
            }

            .capabilities-page .cp-group-list {
                gap: 8px;
            }

            .capabilities-page .cp-group-item {
                font-size: 11.5px;
                line-height: 1.45;
                gap: 8px;
            }

            .capabilities-page .cp-group-item::before {
                width: 4px;
                height: 4px;
                margin-top: 5px;
            }

            .capabilities-page .cp-flow-map {
                margin-top: 14px;
                padding-top: 0;
            }

            .capabilities-page .cp-flow-svg--desktop {
                display: none !important;
            }

            .capabilities-page .cp-flow-svg--mobile {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 1;
            }

            .capabilities-page .cp-flow-steps {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 0;
                padding-left: 0;
            }

            .capabilities-page .cp-flow-steps::before,
            .capabilities-page .cp-flow-steps::after {
                content: none;
                display: none;
            }

            .capabilities-page .cp-flow-step {
                display: grid;
                grid-template-columns: 40px 1fr;
                column-gap: 10px;
                position: relative;
                padding-bottom: 0;
                margin-top: 0 !important;
            }

            .capabilities-page .cp-flow-step:not(:last-child)::before,
            .capabilities-page .cp-flow-step:not(:last-child)::after {
                content: none;
                display: none;
            }

            .capabilities-page .cp-flow-node {
                justify-self: center;
                align-self: start;
                width: 28px;
                height: 28px;
                font-size: 9px;
                letter-spacing: 0.03em;
                margin: 0 0 14px;
                position: relative;
                z-index: 3;
            }

            .capabilities-page .cp-flow-node:last-of-type::after {
                display: none;
            }

            .capabilities-page .cp-flow-map.is-revealed .cp-flow-node {
                box-shadow: 0 0 0 3px rgba(244, 50, 52, 0.08);
            }

            .capabilities-page .cp-flow-step:last-child .cp-flow-node {
                margin-bottom: 0;
            }

            .capabilities-page .cp-flow-step-card {
                align-self: start;
                flex: 1;
                min-width: 0;
                width: 100%;
                margin: 0 0 14px;
                padding: 11px 12px 13px;
                box-shadow: 0 6px 18px rgba(40, 30, 20, 0.06);
                position: relative;
                z-index: 2;
            }

            .capabilities-page .cp-flow-step:last-child .cp-flow-step-card {
                margin-bottom: 0;
            }

            .capabilities-page .cp-flow-micro {
                font-size: 7.5px;
                letter-spacing: 0.11em;
                margin-bottom: 4px;
                gap: 5px;
            }

            .capabilities-page .cp-flow-micro::before {
                width: 3px;
                height: 3px;
            }

            .capabilities-page .cp-flow-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.18;
                margin-bottom: 4px;
            }

            .capabilities-page .cp-flow-text {
                font-size: 11px;
                line-height: 1.45;
            }
        }

        /* =========================================
           AERIAL SERVICES PAGE (pages/aerial-services.html)
        ========================================= */

        /* --- SECTION 1: HERO (cinematic, image-forward) --- */
        .as-hero {
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            min-height: 75vh;
            padding: 132px 48px 64px;
            background-color: #0A0B0E;
            color: var(--white);
            overflow: hidden;
        }
        .as-hero-media {
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        .as-hero-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 45%;
            display: block;
        }
        /* Very light top fade for navbar legibility only */
        .as-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(4, 4, 6, 0.28) 0%, transparent 18%);
            z-index: 1;
            pointer-events: none;
        }
        /* Subtle lower vignette — keeps skyline visible */
        .as-hero::after {
            content: '';
            position: absolute;
            inset: auto 0 0 0;
            height: 42%;
            background: linear-gradient(
                180deg,
                transparent 0%,
                rgba(4, 4, 6, 0.08) 45%,
                rgba(4, 4, 6, 0.28) 100%
            );
            z-index: 1;
            pointer-events: none;
        }
        .as-hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .as-hero-copy-block {
            position: relative;
            max-width: 900px;
            width: 100%;
            text-align: center;
            padding: 36px 48px 40px;
        }
        /* Soft localized scrim behind copy only */
        .as-hero-copy-block::before {
            content: '';
            position: absolute;
            inset: -16px -32px;
            background:
                radial-gradient(
                    ellipse 88% 100% at center,
                    rgba(4, 4, 6, 0.5) 0%,
                    rgba(4, 4, 6, 0.22) 52%,
                    transparent 76%
                ),
                radial-gradient(
                    ellipse 60% 40% at center bottom,
                    rgba(244, 50, 52, 0.06) 0%,
                    transparent 70%
                );
            z-index: -1;
            pointer-events: none;
        }
        .as-hero-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.7);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 22px;
        }
        .as-hero-label::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
        }
        .as-hero-title {
            font-family: var(--font-primary);
            font-size: clamp(34px, 4.6vw, 54px);
            line-height: 1.12;
            letter-spacing: -0.03em;
            color: var(--white);
            margin-bottom: 22px;
            max-width: 880px;
            margin-left: auto;
            margin-right: auto;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.32);
        }
        .as-hero-copy {
            font-family: var(--font-secondary);
            font-size: clamp(15px, 1.65vw, 18px);
            line-height: 1.72;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.9);
            max-width: 740px;
            margin: 0 auto 36px;
            text-shadow: 0 1px 14px rgba(0, 0, 0, 0.24);
        }
        .as-hero-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 16px;
        }
        .as-hero-actions .btn-hero-action {
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }

        /* --- SECTION 2: INTRO / OVERVIEW (editorial + proof row) --- */
        .as-overview {
            position: relative;
            background: #FAFAFA;
            color: var(--main-black);
            padding: 80px 40px 84px;
            overflow: hidden;
        }
        /* Faint aerial grid / contour lines on the open right side */
        .as-overview::after {
            content: '';
            position: absolute;
            top: 72px;
            right: 0;
            width: min(42%, 520px);
            height: calc(100% - 144px);
            pointer-events: none;
            opacity: 1;
            background-image:
                linear-gradient(rgba(2, 2, 2, 0.065) 1px, transparent 1px),
                linear-gradient(90deg, rgba(2, 2, 2, 0.065) 1px, transparent 1px),
                repeating-linear-gradient(
                    -12deg,
                    transparent,
                    transparent 47px,
                    rgba(2, 2, 2, 0.04) 47px,
                    rgba(2, 2, 2, 0.04) 48px
                );
            background-size: 44px 44px, 44px 44px, auto;
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, rgba(0, 0, 0, 0.88) 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, rgba(0, 0, 0, 0.88) 100%);
        }
        .as-overview-texture {
            position: absolute;
            inset: 0;
            opacity: 0.28;
            background-image:
                linear-gradient(rgba(2, 2, 2, 0.022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(2, 2, 2, 0.022) 1px, transparent 1px);
            background-size: 56px 56px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 78%);
            -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 78%);
            pointer-events: none;
        }
        .as-overview-inner {
            position: relative;
            z-index: 1;
            max-width: 1180px;
            margin: 0 auto;
        }
        .as-editorial {
            display: flex;
            gap: 32px;
            align-items: stretch;
            margin-bottom: 36px;
        }
        .as-editorial-rule {
            flex-shrink: 0;
            width: 1px;
            margin-top: 4px;
            background: linear-gradient(
                180deg,
                rgba(244, 50, 52, 0.85) 0%,
                rgba(244, 50, 52, 0.22) 65%,
                transparent 100%
            );
        }
        .as-editorial-body {
            flex: 1;
            max-width: 920px;
            padding: 0;
        }
        .as-overview-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: #999;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        .as-overview-label::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
        }
        .as-editorial-heading {
            font-family: var(--font-primary);
            font-size: clamp(27px, 3.2vw, 40px);
            line-height: 1.18;
            letter-spacing: -0.025em;
            color: var(--main-black);
            margin-bottom: 18px;
            max-width: 860px;
        }
        .as-editorial-intro {
            font-family: var(--font-secondary);
            font-size: 15.5px;
            line-height: 1.72;
            font-weight: 300;
            color: #5A5A5A;
            max-width: 820px;
        }
        .as-proof-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border: 1px solid rgba(2, 2, 2, 0.07);
            background: rgba(255, 255, 255, 0.75);
        }
        .as-proof {
            position: relative;
            padding: 26px 28px 28px;
            border-right: 1px solid rgba(2, 2, 2, 0.06);
            transition: background 0.35s ease, border-color 0.35s ease;
        }
        .as-proof:last-child {
            border-right: none;
        }
        .as-proof:hover {
            background: #FFFFFF;
        }
        .as-proof-index {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.22em;
            color: var(--brand-red);
            display: block;
            margin-bottom: 12px;
        }
        .as-proof-title {
            font-family: var(--font-primary);
            font-size: 17px;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 8px;
        }
        .as-proof-text {
            font-family: var(--font-secondary);
            font-size: 13.5px;
            line-height: 1.6;
            font-weight: 300;
            color: #666;
            max-width: 300px;
        }

        /* --- SECTION 3: SERVICE PACKAGE — MEDIA & MARKETING --- */
        .as-service {
            position: relative;
            background: #0A0B0E;
            color: var(--white);
            padding: 92px 40px 100px;
            overflow: hidden;
        }
        .as-service::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: min(900px, 80%);
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(244, 50, 52, 0.35), transparent);
            pointer-events: none;
        }
        .as-service-inner {
            max-width: 1180px;
            margin: 0 auto;
        }
        .as-service-head {
            max-width: 680px;
            margin-bottom: 48px;
        }
        .as-service-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
        }
        .as-service-label::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
        }
        .as-service-title {
            font-family: var(--font-primary);
            font-size: clamp(28px, 3.5vw, 42px);
            line-height: 1.15;
            letter-spacing: -0.025em;
            color: var(--white);
            margin-bottom: 16px;
        }
        .as-service-desc {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.72;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.64);
            max-width: 580px;
        }
        .as-service-body {
            display: grid;
            grid-template-columns: 1fr 272px;
            align-items: stretch;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: #060608;
        }
        .as-service-frame {
            position: relative;
            grid-column: 1;
            grid-row: 1;
            border-right: 1px solid rgba(255, 255, 255, 0.06);
            background: #060608;
        }
        .as-service-media-wrap {
            position: relative;
            aspect-ratio: 2.1 / 1;
            min-height: 380px;
            max-height: 520px;
            overflow: hidden;
            background: #111216;
        }
        .as-service-video,
        .as-service-fallback {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .as-service-video {
            z-index: 1;
        }
        .as-service-video.is-hidden {
            display: none;
        }
        .as-service-fallback {
            z-index: 0;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .as-service-fallback.is-visible {
            z-index: 1;
            opacity: 1;
        }
        .as-service-media-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(
                180deg,
                rgba(6, 6, 8, 0.06) 0%,
                transparent 30%,
                transparent 62%,
                rgba(6, 6, 8, 0.28) 100%
            );
        }
        .as-service-chips {
            position: absolute;
            left: 24px;
            bottom: 24px;
            z-index: 3;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            max-width: calc(100% - 48px);
        }
        .as-service-chip {
            font-family: var(--font-secondary);
            font-size: 9.5px;
            font-weight: 500;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.82);
            padding: 7px 12px;
            background: rgba(4, 4, 6, 0.38);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            transition:
                border-color 0.3s ease,
                background 0.3s ease,
                color 0.3s ease,
                transform 0.3s var(--transition-premium);
        }
        .as-service-chip:hover {
            border-color: rgba(244, 50, 52, 0.45);
            background: rgba(244, 50, 52, 0.1);
            color: var(--white);
            transform: translateY(-1px);
        }
        .as-service-bracket {
            position: absolute;
            width: 12px;
            height: 12px;
            z-index: 4;
            pointer-events: none;
            opacity: 0.9;
        }
        .as-service-bracket--tl {
            top: -1px;
            left: -1px;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
        }
        .as-service-bracket--br {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
        }
        .as-service-uses {
            grid-column: 2;
            grid-row: 1;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 36px 28px;
            background: rgba(10, 10, 12, 0.92);
        }
        .as-service-uses::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(
                180deg,
                var(--brand-red) 0%,
                rgba(244, 50, 52, 0.25) 55%,
                transparent 100%
            );
            opacity: 0.7;
        }
        .as-service-uses-label {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.44);
            margin-bottom: 20px;
            padding-left: 2px;
        }
        .as-service-uses-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .as-service-use {
            font-family: var(--font-secondary);
            font-size: 13.5px;
            line-height: 1.55;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.74);
            padding-left: 14px;
            position: relative;
        }
        .as-service-use::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.62em;
            width: 4px;
            height: 1px;
            background: var(--brand-red);
        }

        /* --- AERIAL SERVICES PAGE RESPONSIVE --- */
        @media (max-width: 1024px) {
            .as-service-body {
                grid-template-columns: 1fr;
                border: 1px solid rgba(255, 255, 255, 0.08);
            }
            .as-service-frame {
                grid-column: 1;
                grid-row: 1;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .as-service-uses {
                grid-column: 1;
                grid-row: 2;
                padding: 28px 24px 32px;
            }
            .as-service-uses::before {
                width: 100%;
                height: 2px;
                background: linear-gradient(90deg, var(--brand-red), transparent 72%);
            }
            .as-service-media-wrap {
                max-height: none;
                min-height: 0;
                aspect-ratio: 16 / 9;
            }
        }
        @media (max-width: 900px) {
            .as-proof-row {
                grid-template-columns: 1fr;
            }
            .as-proof {
                border-right: none;
                border-bottom: 1px solid rgba(2, 2, 2, 0.06);
            }
            .as-proof:last-child {
                border-bottom: none;
            }
        }

        @media (max-width: 768px) {
            .as-hero {
                min-height: 75vh;
                align-items: flex-end;
                padding: 148px 24px 52px;
            }
            .as-hero-bg {
                object-position: center 42%;
            }
            .as-hero-copy-block {
                padding: 32px 16px 36px;
            }
            .as-hero-copy-block::before {
                inset: -10px -8px;
            }
            .as-overview { padding: 64px 24px 72px; }
            .as-overview::after { display: none; }
            .as-editorial {
                flex-direction: column;
                gap: 16px;
                margin-bottom: 28px;
            }
            .as-editorial-rule {
                width: 40px;
                height: 1px;
                margin-top: 0;
                background: linear-gradient(
                    90deg,
                    rgba(244, 50, 52, 0.85) 0%,
                    rgba(244, 50, 52, 0.22) 65%,
                    transparent 100%
                );
            }
            .as-proof { padding: 24px 22px 26px; }
            .as-service { padding: 72px 24px 80px; }
            .as-service-head { margin-bottom: 36px; }
            .as-service-body { border: 1px solid rgba(255, 255, 255, 0.08); }
            .as-service-chips {
                left: 14px;
                bottom: 14px;
                max-width: calc(100% - 28px);
                gap: 6px;
            }
            .as-service-chip {
                padding: 6px 10px;
                font-size: 8.5px;
                letter-spacing: 0.1em;
            }
            .as-service-uses { padding: 24px 20px 28px; }
            .as-service-use { font-size: 13px; }
        }

        /* --- SECTION 4: SERVICE PACKAGE — PROGRESS REPORTS --- */
        .as-report {
            position: relative;
            background: #F5F4F2;
            color: var(--main-black);
            padding: 80px 40px 88px;
        }
        .as-report-inner {
            max-width: 1180px;
            margin: 0 auto;
        }
        .as-report-head {
            max-width: 680px;
            margin-bottom: 36px;
        }
        .as-report-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: #888;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .as-report-label::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
        }
        .as-report-title {
            font-family: var(--font-primary);
            font-size: clamp(28px, 3.4vw, 40px);
            line-height: 1.16;
            letter-spacing: -0.025em;
            color: var(--main-black);
            margin-bottom: 14px;
        }
        .as-report-desc {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.72;
            font-weight: 300;
            color: #5A5A5A;
            max-width: 580px;
        }
        .as-report-dashboard {
            position: relative;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.08);
            box-shadow: 0 14px 36px rgba(40, 30, 20, 0.05);
            padding: 20px;
        }
        .as-report-bracket {
            position: absolute;
            width: 12px;
            height: 12px;
            z-index: 2;
            pointer-events: none;
        }
        .as-report-bracket--tl {
            top: -1px;
            left: -1px;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
        }
        .as-report-bracket--br {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
        }
        .as-report-main {
            display: grid;
            grid-template-columns: 1.9fr 1fr;
            gap: 18px;
            align-items: stretch;
        }
        .as-report-visual {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(2, 2, 2, 0.07);
            background: #ECEAE6;
            aspect-ratio: 16 / 10;
            min-height: 300px;
        }
        .as-report-visual-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .as-report-visual-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(
                180deg,
                transparent 62%,
                rgba(2, 2, 2, 0.1) 100%
            );
        }
        .as-report-visual-tags {
            position: absolute;
            left: 14px;
            bottom: 14px;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .as-report-visual-tag {
            font-family: var(--font-secondary);
            font-size: 8.5px;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #444;
            padding: 5px 9px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(2, 2, 2, 0.08);
        }
        .as-report-cards {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .as-report-card {
            flex: 1;
            padding: 16px 18px;
            background: #FAFAFA;
            border: 1px solid rgba(2, 2, 2, 0.07);
            border-left: 2px solid transparent;
            transition:
                border-color 0.3s ease,
                box-shadow 0.3s ease;
        }
        .as-report-card:hover {
            border-left-color: var(--brand-red);
            border-color: rgba(244, 50, 52, 0.15);
            box-shadow: 0 6px 16px rgba(40, 30, 20, 0.04);
        }
        .as-report-card-num {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.18em;
            color: var(--brand-red);
            display: block;
            margin-bottom: 8px;
        }
        .as-report-card-title {
            font-family: var(--font-primary);
            font-size: 15px;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 6px;
        }
        .as-report-card-text {
            font-family: var(--font-secondary);
            font-size: 12.5px;
            line-height: 1.6;
            font-weight: 300;
            color: #666;
        }
        .as-report-timeline {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(2, 2, 2, 0.08);
        }
        .as-report-timeline-head {
            font-family: var(--font-secondary);
            font-size: 9.5px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 10px;
        }
        .as-report-timeline-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 14px 18px;
        }
        .as-report-stage {
            flex: 0 0 auto;
            width: 196px;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .as-report-stage-frame {
            width: 100%;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            border: 1px solid rgba(2, 2, 2, 0.08);
            background: #ECEAE6;
            box-shadow: 0 2px 8px rgba(40, 30, 20, 0.04);
        }
        .as-report-stage-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .as-report-stage-label {
            font-family: var(--font-secondary);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: #777;
            line-height: 1.4;
        }
        .as-report-deliverables {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px 12px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(2, 2, 2, 0.08);
        }
        .as-report-deliv-label {
            font-family: var(--font-secondary);
            font-size: 9.5px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #999;
            flex-shrink: 0;
            margin-right: 2px;
        }
        .as-report-deliv-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            flex: 1;
        }
        .as-report-deliv {
            font-family: var(--font-secondary);
            font-size: 9.5px;
            font-weight: 500;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: #3D3D3D;
            padding: 6px 12px;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.14);
            box-shadow: 0 1px 2px rgba(40, 30, 20, 0.03);
            transition:
                border-color 0.3s ease,
                color 0.3s ease,
                background 0.3s ease,
                box-shadow 0.3s ease;
        }
        .as-report-deliv:hover {
            border-color: rgba(244, 50, 52, 0.32);
            color: var(--main-black);
            background: #FFFFFF;
            box-shadow: 0 2px 6px rgba(40, 30, 20, 0.06);
        }

        @media (max-width: 1024px) {
            .as-report-main {
                grid-template-columns: 1fr;
            }
            .as-report-visual {
                min-height: 280px;
            }
        }

        @media (max-width: 768px) {
            .as-report {
                padding: 64px 24px 72px;
            }
            .as-report-head {
                margin-bottom: 28px;
            }
            .as-report-dashboard {
                padding: 16px;
            }
            .as-report-visual {
                min-height: 220px;
            }
            .as-report-timeline-strip {
                gap: 12px;
            }
            .as-report-stage {
                width: calc(50% - 6px);
                min-width: 140px;
            }
            .as-report-deliverables {
                align-items: flex-start;
                flex-direction: column;
                gap: 8px;
            }
            .as-report-deliv-row {
                gap: 6px;
            }
            .as-report-deliv {
                font-size: 9px;
                padding: 6px 10px;
            }
        }

        /* --- SECTION 5: SERVICE PACKAGE — 3D MAPPING & SPATIAL OUTPUTS --- */
        .as-map {
            position: relative;
            background: #0A0B0E;
            color: var(--white);
            padding: 80px 40px 88px;
            overflow: hidden;
        }
        .as-map-bg {
            position: absolute;
            inset: 0;
            background-image: url('../assets/images/AS-mappingbg.png');
            background-size: cover;
            background-position: center;
            pointer-events: none;
        }
        .as-map-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(6, 6, 8, 0.78) 0%, rgba(6, 6, 8, 0.62) 45%, rgba(6, 6, 8, 0.82) 100%),
                linear-gradient(90deg, rgba(6, 6, 8, 0.82) 0%, rgba(6, 6, 8, 0.48) 42%, rgba(6, 6, 8, 0.72) 100%);
        }
        .as-map-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 90%);
            -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 90%);
        }
        .as-map-coords {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 18px;
            pointer-events: none;
        }
        .as-map-coords span {
            font-family: var(--font-secondary);
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.14);
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }
        .as-map-inner {
            position: relative;
            z-index: 2;
            max-width: 960px;
            margin: 0 auto;
        }
        .as-map-inner::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 0;
            width: 480px;
            height: 480px;
            border-radius: 50%;
            background: radial-gradient(
                circle at center,
                rgba(244, 50, 52, 0.09) 0%,
                rgba(244, 50, 52, 0.038) 28%,
                rgba(244, 50, 52, 0.012) 50%,
                transparent 70%
            );
            pointer-events: none;
            z-index: 0;
        }
        .as-map-head {
            position: relative;
            z-index: 1;
            max-width: 660px;
            margin-bottom: 32px;
        }
        .as-map-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.55);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .as-map-label::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
        }
        .as-map-title {
            font-family: var(--font-primary);
            font-size: clamp(28px, 3.4vw, 40px);
            line-height: 1.16;
            letter-spacing: -0.025em;
            color: var(--white);
            margin-bottom: 14px;
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
        }
        .as-map-desc {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.72;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.72);
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
        }
        .as-map-panel {
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(6, 6, 8, 0.55);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 18px 20px 20px;
        }
        .as-map-stack-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px 16px;
            padding-bottom: 14px;
            margin-bottom: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .as-map-stack-label {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.62);
        }
        .as-map-stack-meta {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.52);
        }
        .as-map-layers {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .as-map-layers::before {
            content: '';
            position: absolute;
            left: 27px;
            top: 24px;
            bottom: 24px;
            width: 1px;
            background: linear-gradient(
                180deg,
                rgba(244, 50, 52, 0.65) 0%,
                rgba(244, 50, 52, 0.35) 35%,
                rgba(244, 50, 52, 0.35) 65%,
                rgba(244, 50, 52, 0.55) 100%
            );
            box-shadow: 0 0 12px rgba(244, 50, 52, 0.15);
            pointer-events: none;
        }
        .as-map-layer {
            position: relative;
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 18px;
            align-items: start;
            padding: 20px 22px 20px 18px;
            background: rgba(8, 8, 10, 0.78);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
            transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
        }
        .as-map-layer:hover {
            border-color: rgba(244, 50, 52, 0.28);
            background: rgba(10, 10, 12, 0.88);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        }
        .as-map-layer-num {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.2em;
            color: var(--brand-red);
            padding-top: 4px;
            position: relative;
            z-index: 1;
        }
        .as-map-layer-num::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 24px;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background: var(--brand-red);
            border: 2px solid rgba(8, 8, 10, 0.9);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(244, 50, 52, 0.45);
        }
        .as-map-layer-body {
            min-width: 0;
        }
        .as-map-layer-type {
            font-family: var(--font-secondary);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(244, 50, 52, 0.75);
            display: block;
            margin-bottom: 6px;
        }
        .as-map-layer-title {
            font-family: var(--font-primary);
            font-size: 17px;
            letter-spacing: -0.01em;
            color: var(--white);
            margin-bottom: 8px;
        }
        .as-map-layer-text {
            font-family: var(--font-secondary);
            font-size: 13px;
            line-height: 1.65;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.72);
            margin-bottom: 14px;
            max-width: 580px;
        }
        .as-map-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .as-map-tag {
            font-family: var(--font-secondary);
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.72);
            padding: 5px 10px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(0, 0, 0, 0.32);
        }
        .as-map-layer-corner {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-top: 1px solid rgba(244, 50, 52, 0.6);
            border-right: 1px solid rgba(244, 50, 52, 0.6);
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .as-map {
                padding: 64px 24px 72px;
            }
            .as-map-coords {
                display: none;
            }
            .as-map-grid {
                opacity: 0.4;
            }
            .as-map-head {
                margin-bottom: 24px;
            }
            .as-map-inner::before {
                width: 340px;
                height: 340px;
                top: 0;
                left: 50%;
                transform: translateX(-58%);
            }
            .as-map-panel {
                padding: 14px 14px 16px;
            }
            .as-map-stack-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }
            .as-map-layers::before {
                left: 23px;
            }
            .as-map-layer {
                grid-template-columns: 46px 1fr;
                gap: 14px;
                padding: 16px 16px 16px 14px;
            }
            .as-map-layer-text {
                font-size: 12.5px;
            }
            .as-map-tags {
                gap: 6px;
            }
            .as-map-tag {
                font-size: 8.5px;
                padding: 4px 8px;
            }
        }

        /* --- SECTION 6: SERVICE PACKAGE — ARCHITECTURE & PROPERTY VISUALS --- */
        .as-arch {
            background: #F6F5F3;
            color: var(--main-black);
            padding: 96px 40px 88px;
            scroll-margin-top: 108px;
        }
        .as-arch-inner {
            max-width: 1180px;
            margin: 0 auto;
            letter-spacing: normal;
        }
        .as-arch-head {
            max-width: 620px;
            margin-bottom: 40px;
            letter-spacing: normal;
        }
        .as-arch-label {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: #888;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .as-arch-label::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--brand-red);
            border-radius: 50%;
        }
        .as-arch-title {
            font-family: var(--font-primary);
            font-size: clamp(28px, 3.4vw, 40px);
            line-height: 1.16;
            letter-spacing: -0.025em;
            color: var(--main-black);
            margin-bottom: 14px;
        }
        .as-arch-desc {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.72;
            font-weight: 300;
            color: #5A5A5A;
            letter-spacing: normal;
            word-spacing: normal;
            text-align: left;
            word-break: normal;
            overflow-wrap: normal;
            hyphens: manual;
        }
        .as-arch-composition {
            display: grid;
            grid-template-columns: 62fr 38fr;
            grid-template-rows: minmax(0, 0.82fr) minmax(0, 1.18fr);
            gap: 12px;
            height: min(500px, 44vw);
            min-height: 390px;
            max-height: 520px;
            margin-bottom: 32px;
        }
        .as-arch-main,
        .as-arch-sub {
            position: relative;
            margin: 0;
            overflow: hidden;
            border: 1px solid rgba(2, 2, 2, 0.08);
            background: #E8E6E2;
            min-height: 0;
            height: 100%;
        }
        .as-arch-main {
            grid-row: 1 / 3;
            grid-column: 1;
        }
        .as-arch-sub {
            grid-column: 2;
        }
        .as-arch-composition > .as-arch-sub:nth-child(2) {
            grid-row: 1;
        }
        .as-arch-composition > .as-arch-sub:nth-child(3) {
            grid-row: 2;
        }
        .as-arch-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .as-arch-main .as-arch-img {
            object-position: center 90%;
        }
        .as-arch-composition > .as-arch-sub:nth-child(2) .as-arch-img {
            object-position: center 38%;
        }
        .as-arch-composition > .as-arch-sub:nth-child(3) .as-arch-img {
            object-position: center 12%;
        }
        .as-arch-img-label {
            position: absolute;
            left: 14px;
            bottom: 14px;
            font-family: var(--font-secondary);
            font-size: 8.5px;
            font-weight: 600;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            color: #444;
            padding: 5px 9px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(2, 2, 2, 0.07);
        }
        .as-arch-main .as-arch-img-label {
            color: #222;
        }
        .as-arch-bracket {
            position: absolute;
            width: 12px;
            height: 12px;
            pointer-events: none;
            z-index: 1;
        }
        .as-arch-bracket--tl {
            top: 0;
            left: 0;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
        }
        .as-arch-bracket--br {
            bottom: 0;
            right: 0;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
        }
        .as-arch-services {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 28px;
            padding-top: 28px;
            border-top: 1px solid rgba(2, 2, 2, 0.08);
            align-items: stretch;
        }
        .as-arch-service {
            display: flex;
            flex-direction: column;
            padding: 22px 22px 24px;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.07);
            transition: border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .as-arch-service:hover {
            border-color: rgba(244, 50, 52, 0.18);
            box-shadow: 0 10px 28px rgba(40, 30, 20, 0.06);
        }
        .as-arch-service-num {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.18em;
            color: var(--brand-red);
            display: block;
            margin-bottom: 12px;
        }
        .as-arch-service-title {
            font-family: var(--font-primary);
            font-size: 16px;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 10px;
        }
        .as-arch-service-text {
            font-family: var(--font-secondary);
            font-size: 13px;
            line-height: 1.62;
            font-weight: 300;
            color: #666;
            letter-spacing: normal;
            word-spacing: normal;
            text-align: left;
            word-break: normal;
            overflow-wrap: normal;
            hyphens: manual;
        }
        .as-arch-deliverables {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .as-arch-deliv {
            font-family: var(--font-secondary);
            font-size: 9.5px;
            font-weight: 500;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: #3D3D3D;
            padding: 6px 12px;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.12);
            box-shadow: 0 1px 2px rgba(40, 30, 20, 0.03);
            transition: border-color 0.3s ease, color 0.3s ease;
        }
        .as-arch-deliv:hover {
            border-color: rgba(244, 50, 52, 0.32);
            color: var(--main-black);
        }

        @media (max-width: 1024px) {
            .as-arch-composition {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto;
                height: auto;
                min-height: 0;
                max-height: none;
            }
            .as-arch-main {
                grid-column: 1 / 3;
                grid-row: 1;
                height: min(440px, 54vw);
                min-height: 330px;
            }
            .as-arch-composition > .as-arch-sub:nth-child(2) {
                grid-column: 1;
                grid-row: 2;
                height: min(180px, 26vw);
                min-height: 160px;
            }
            .as-arch-composition > .as-arch-sub:nth-child(3) {
                grid-column: 2;
                grid-row: 2;
                height: min(290px, 36vw);
                min-height: 230px;
            }
            .as-arch-services {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .as-arch {
                padding: 76px 24px 72px;
                scroll-margin-top: 96px;
            }
            .as-arch-head {
                margin-bottom: 28px;
            }
            .as-arch-composition {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                height: auto;
            }
            .as-arch-main {
                grid-column: 1;
                grid-row: auto;
                height: min(340px, 70vw);
                min-height: 280px;
            }
            .as-arch-composition > .as-arch-sub:nth-child(2) {
                grid-column: 1;
                grid-row: auto;
                height: min(180px, 46vw);
                min-height: 165px;
            }
            .as-arch-composition > .as-arch-sub:nth-child(3) {
                grid-column: 1;
                grid-row: auto;
                height: min(280px, 62vw);
                min-height: 230px;
            }
            .as-arch-services {
                padding-top: 24px;
                margin-bottom: 24px;
            }
            .as-arch-service {
                padding: 18px 18px 20px;
            }
        }

        @media (max-width: 768px) {
            /* Aerial Services page — homepage / Capabilities mobile design system */
            .aerial-services-page .as-hero {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: min(64vh, 540px);
                padding: 0;
            }

            .aerial-services-page .as-hero-media {
                inset: 0;
            }

            .aerial-services-page .as-hero-bg {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }

            .aerial-services-page .as-hero::before {
                background:
                    linear-gradient(180deg,
                        rgba(2, 2, 2, 0.06) 0%,
                        rgba(2, 2, 2, 0.1) 45%,
                        rgba(2, 2, 2, 0.14) 100%);
            }

            .aerial-services-page .as-hero::after {
                inset: 0;
                height: auto;
                opacity: 0.22;
                background: radial-gradient(ellipse 70% 55% at 50% 88%,
                    rgba(244, 50, 52, 0.1) 0%,
                    transparent 68%);
            }

            .aerial-services-page .as-hero-inner {
                width: calc(100% - 48px);
                max-width: none;
                padding: 58px 0 36px;
                margin: 0 auto;
                justify-content: center;
            }

            .aerial-services-page .as-hero-copy-block {
                max-width: 100%;
                padding: 0;
                text-align: center;
            }

            .aerial-services-page .as-hero-copy-block::before {
                display: none;
            }

            .aerial-services-page .as-hero-label {
                font-size: 8px;
                letter-spacing: 0.08em;
                margin-bottom: 14px;
                gap: 7px;
            }

            .aerial-services-page .as-hero-label::before {
                width: 3px;
                height: 3px;
            }

            .aerial-services-page .as-hero-title {
                font-size: clamp(22px, 5.8vw, 28px);
                line-height: 1.12;
                letter-spacing: -0.03em;
                margin-bottom: 14px;
                max-width: 100%;
                text-shadow: none;
            }

            .aerial-services-page .as-hero-copy {
                font-size: 13px;
                line-height: 1.55;
                margin: 0 auto 22px;
                max-width: 310px;
                text-shadow: none;
            }

            .aerial-services-page .as-hero-actions .btn-hero-action {
                width: auto;
                min-width: 150px;
                max-width: 170px;
                height: 40px;
                padding: 0 14px;
                font-size: clamp(8px, 2vw, 9px);
                letter-spacing: 0.07em;
            }

            .aerial-services-page .as-overview {
                padding: 48px 20px 52px;
            }

            .aerial-services-page .as-editorial {
                gap: 12px;
                margin-bottom: 20px;
            }

            .aerial-services-page .as-overview-label,
            .aerial-services-page .as-service-label,
            .aerial-services-page .as-report-label,
            .aerial-services-page .as-map-label,
            .aerial-services-page .as-arch-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .aerial-services-page .as-overview-label::before,
            .aerial-services-page .as-service-label::before,
            .aerial-services-page .as-report-label::before,
            .aerial-services-page .as-map-label::before,
            .aerial-services-page .as-arch-label::before {
                width: 5px;
                height: 5px;
            }

            .aerial-services-page .as-editorial-heading,
            .aerial-services-page .as-service-title,
            .aerial-services-page .as-report-title,
            .aerial-services-page .as-map-title,
            .aerial-services-page .as-arch-title {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                letter-spacing: -0.02em;
                margin-bottom: 12px;
            }

            .aerial-services-page .as-editorial-intro,
            .aerial-services-page .as-service-desc,
            .aerial-services-page .as-report-desc,
            .aerial-services-page .as-map-desc,
            .aerial-services-page .as-arch-desc {
                font-size: 13px;
                line-height: 1.55;
            }

            .aerial-services-page .as-proof-row {
                border: 1px solid rgba(2, 2, 2, 0.07);
            }

            .aerial-services-page .as-proof {
                padding: 14px 12px 16px;
            }

            .aerial-services-page .as-proof-index {
                font-size: 8px;
                letter-spacing: 0.14em;
                margin-bottom: 8px;
            }

            .aerial-services-page .as-proof-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.18;
                margin-bottom: 6px;
            }

            .aerial-services-page .as-proof-text {
                font-size: 11.5px;
                line-height: 1.48;
                max-width: none;
            }

            .aerial-services-page .as-service {
                padding: 48px 20px 52px;
            }

            .aerial-services-page .as-service-head {
                margin-bottom: 20px;
            }

            .aerial-services-page .as-service-frame {
                width: 100%;
            }

            .aerial-services-page .as-service-media-wrap {
                width: 100%;
                aspect-ratio: unset;
                height: clamp(168px, 52vw, 220px);
                max-height: none;
                min-height: 0;
                overflow: hidden;
            }

            .aerial-services-page .as-service-video,
            .aerial-services-page .as-service-fallback {
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }

            .aerial-services-page .as-service-media-overlay {
                inset: 0;
                width: 100%;
                height: 100%;
            }

            .aerial-services-page .as-service-chips {
                left: 10px;
                bottom: 10px;
                max-width: calc(100% - 20px);
                gap: 5px;
            }

            .aerial-services-page .as-service-chip {
                padding: 5px 8px;
                font-size: 7.5px;
                letter-spacing: 0.1em;
            }

            .aerial-services-page .as-service-uses {
                padding: 14px 12px 16px;
            }

            .aerial-services-page .as-service-uses-label {
                font-size: 9px;
                letter-spacing: 0.12em;
                margin-bottom: 10px;
            }

            .aerial-services-page .as-service-uses-list {
                gap: 8px;
            }

            .aerial-services-page .as-service-use {
                font-size: 11.5px;
                line-height: 1.45;
            }

            .aerial-services-page .as-report {
                padding: 48px 20px 52px;
            }

            .aerial-services-page .as-report-head {
                margin-bottom: 18px;
            }

            .aerial-services-page .as-report-dashboard {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-areas:
                    "visual"
                    "timeline"
                    "cards"
                    "deliverables";
                padding: 12px;
            }

            .aerial-services-page .as-report-main {
                display: contents;
            }

            .aerial-services-page .as-report-visual {
                grid-area: visual;
                min-height: 180px;
                max-height: 220px;
            }

            .aerial-services-page .as-report-visual-tag {
                font-size: 7.5px;
                letter-spacing: 0.1em;
                padding: 5px 8px;
            }

            .aerial-services-page .as-report-cards {
                grid-area: cards;
                gap: 10px;
                margin-top: 12px;
            }

            .aerial-services-page .as-report-card {
                padding: 14px 12px 16px;
            }

            .aerial-services-page .as-report-card-num {
                font-size: 8px;
                letter-spacing: 0.14em;
                margin-bottom: 8px;
            }

            .aerial-services-page .as-report-card-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.18;
                margin-bottom: 6px;
            }

            .aerial-services-page .as-report-card-text {
                font-size: 11.5px;
                line-height: 1.48;
            }

            .aerial-services-page .as-report-timeline {
                grid-area: timeline;
                justify-self: end;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: max-content;
                max-width: 100%;
                margin-top: 8px;
                margin-bottom: 0;
                padding-top: 0;
                border-top: none;
            }

            .aerial-services-page .as-report-timeline-head {
                font-size: 8px;
                letter-spacing: 0.12em;
                margin-bottom: 8px;
                color: #aaa;
                text-align: left;
                align-self: stretch;
            }

            .aerial-services-page .as-report-timeline-strip {
                display: flex;
                flex-wrap: nowrap;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 10px;
                width: max-content;
                max-width: 100%;
            }

            .aerial-services-page .as-report-stage {
                flex: 0 0 128px;
                width: 128px;
                min-width: 128px;
                max-width: 128px;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .aerial-services-page .as-report-stage-frame {
                width: 100%;
                aspect-ratio: unset;
                height: clamp(48px, 14vw, 58px);
                max-height: none;
                overflow: hidden;
                border: 1px solid rgba(2, 2, 2, 0.06);
                background: #EFEDEA;
                box-shadow: none;
            }

            .aerial-services-page .as-report-stage-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                opacity: 0.86;
                filter: contrast(0.92) saturate(0.88);
            }

            .aerial-services-page .as-report-stage-label {
                font-size: 7px;
                letter-spacing: 0.07em;
                line-height: 1.35;
                color: #9a9a9a;
                margin-top: 0;
                text-align: left;
            }

            .aerial-services-page .as-report-deliverables {
                grid-area: deliverables;
                margin-top: 14px;
                padding-top: 14px;
            }

            .aerial-services-page .as-report-deliv-label {
                font-size: 9px;
                letter-spacing: 0.12em;
            }

            .aerial-services-page .as-report-deliv {
                font-size: 8px;
                letter-spacing: 0.1em;
                padding: 5px 8px;
            }

            .aerial-services-page .as-map {
                padding: 48px 20px 52px;
                min-height: min(88vh, 720px);
            }

            .aerial-services-page .as-map-bg {
                overflow: hidden;
                background-image: none;
                background-color: #0A0B0E;
            }

            .aerial-services-page .as-map-bg::before {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                width: 100vh;
                height: 100vw;
                transform: translate(-50%, -50%) rotate(90deg) scale(1.18);
                transform-origin: center center;
                background-image: url('../assets/images/AS-mappingbg.png');
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }

            .aerial-services-page .as-map-overlay {
                background:
                    linear-gradient(180deg,
                        rgba(6, 6, 8, 0.58) 0%,
                        rgba(6, 6, 8, 0.5) 42%,
                        rgba(6, 6, 8, 0.64) 100%),
                    linear-gradient(90deg,
                        rgba(6, 6, 8, 0.62) 0%,
                        rgba(6, 6, 8, 0.4) 50%,
                        rgba(6, 6, 8, 0.56) 100%);
            }

            .aerial-services-page .as-map-grid {
                opacity: 0.48;
                mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 94%);
                -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 94%);
            }

            .aerial-services-page .as-map-coords {
                display: flex;
                right: 10px;
                opacity: 0.28;
                transform: translateY(-46%) scale(0.82);
            }

            .aerial-services-page .as-map-coords span {
                font-size: 7px;
                letter-spacing: 0.14em;
            }

            .aerial-services-page .as-map-inner::before {
                width: min(280px, 72vw);
                height: min(280px, 72vw);
                top: -20px;
                left: auto;
                right: -8%;
                transform: none;
                opacity: 0.85;
                z-index: 0;
            }

            .aerial-services-page .as-map-inner::after {
                content: none;
                display: none;
            }

            .aerial-services-page .as-map-head {
                margin-bottom: 16px;
                position: relative;
                z-index: 1;
            }

            .aerial-services-page .as-map-title,
            .aerial-services-page .as-map-desc {
                text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
            }

            .aerial-services-page .as-map-panel {
                position: relative;
                z-index: 1;
                padding: 10px 10px 12px;
                background: rgba(6, 6, 8, 0.22);
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: none;
            }

            .aerial-services-page .as-map-stack-head {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 6px 10px;
                padding-bottom: 10px;
                margin-bottom: 10px;
            }

            .aerial-services-page .as-map-layers {
                gap: 8px;
            }

            .aerial-services-page .as-map-layers::before {
                left: 19px;
                top: 16px;
                bottom: 16px;
            }

            .aerial-services-page .as-map-layer {
                grid-template-columns: 40px 1fr;
                gap: 10px;
                padding: 11px 11px 11px 10px;
                background: rgba(8, 8, 10, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: none;
            }

            .aerial-services-page .as-map-layer-num {
                font-size: 9px;
                padding-top: 2px;
            }

            .aerial-services-page .as-map-layer-num::after {
                top: 20px;
                width: 5px;
                height: 5px;
            }

            .aerial-services-page .as-map-stack-label {
                font-size: 9px;
                letter-spacing: 0.12em;
            }

            .aerial-services-page .as-map-stack-meta {
                font-size: 10px;
                line-height: 1.45;
                text-align: right;
            }

            .aerial-services-page .as-map-layer-type {
                font-size: 8px;
                letter-spacing: 0.12em;
                margin-bottom: 6px;
            }

            .aerial-services-page .as-map-layer-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.18;
                margin-bottom: 6px;
            }

            .aerial-services-page .as-map-layer-text {
                font-size: 11.5px;
                line-height: 1.48;
                margin-bottom: 10px;
            }

            .aerial-services-page .as-map-tag {
                font-size: 7.5px;
                letter-spacing: 0.1em;
                padding: 4px 7px;
            }

            .aerial-services-page .as-map-tags {
                gap: 6px;
            }

            .aerial-services-page .as-arch {
                padding: 48px 20px 52px;
                scroll-margin-top: 78px;
            }

            .aerial-services-page .as-arch-head {
                margin-bottom: 18px;
            }

            .aerial-services-page .as-arch-composition {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto;
                gap: 10px;
                height: auto;
                min-height: 0;
                max-height: none;
            }

            .aerial-services-page .as-arch-main {
                grid-column: 1 / -1;
                grid-row: 1;
                height: min(220px, 56vw);
                min-height: 200px;
            }

            .aerial-services-page .as-arch-composition > .as-arch-sub:nth-child(2),
            .aerial-services-page .as-arch-composition > .as-arch-sub:nth-child(3) {
                grid-row: 2;
                height: min(108px, 30vw);
                min-height: 96px;
            }

            .aerial-services-page .as-arch-composition > .as-arch-sub:nth-child(2) {
                grid-column: 1;
            }

            .aerial-services-page .as-arch-composition > .as-arch-sub:nth-child(3) {
                grid-column: 2;
            }

            .aerial-services-page .as-arch-img-label {
                left: 0;
                bottom: 0;
                right: auto;
                top: auto;
                margin: 0;
                font-size: 6.5px;
                letter-spacing: 0.07em;
                line-height: 1.15;
                padding: 2px 5px;
                border-radius: 0;
                z-index: 2;
            }

            .aerial-services-page .as-arch-main .as-arch-img-label {
                left: 0;
                bottom: 0;
                font-size: 7px;
                letter-spacing: 0.08em;
                padding: 3px 6px;
            }

            .aerial-services-page .as-arch-services {
                padding-top: 16px;
                margin-bottom: 16px;
                gap: 10px;
            }

            .aerial-services-page .as-arch-service {
                padding: 14px 12px 16px;
            }

            .aerial-services-page .as-arch-service-num {
                font-size: 8px;
                letter-spacing: 0.14em;
                margin-bottom: 8px;
            }

            .aerial-services-page .as-arch-service-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.18;
                margin-bottom: 6px;
            }

            .aerial-services-page .as-arch-service-text {
                font-size: 11.5px;
                line-height: 1.48;
            }

            .aerial-services-page .as-arch-deliverables {
                gap: 6px;
            }

            .aerial-services-page .as-arch-deliv {
                font-size: 8px;
                letter-spacing: 0.1em;
                padding: 5px 8px;
            }
        }

        @media (max-width: 480px) {
            .aerial-services-page .as-hero {
                min-height: min(62vh, 500px);
            }

            .aerial-services-page .as-hero-inner {
                width: calc(100% - 48px);
                padding: 54px 0 32px;
            }

            .aerial-services-page .as-hero-label {
                font-size: 7.5px;
                letter-spacing: 0.07em;
            }

            .aerial-services-page .as-hero-title {
                font-size: clamp(20px, 5.4vw, 26px);
            }

            .aerial-services-page .as-hero-actions .btn-hero-action {
                height: 38px;
                font-size: 8px;
            }

            .aerial-services-page .as-overview,
            .aerial-services-page .as-service,
            .aerial-services-page .as-report,
            .aerial-services-page .as-map,
            .aerial-services-page .as-arch {
                padding: 48px 18px 50px;
            }

            .aerial-services-page .as-map {
                min-height: min(92vh, 680px);
            }

            .aerial-services-page .as-map-bg::before {
                transform: translate(-50%, -50%) rotate(90deg) scale(1.22);
            }

            .aerial-services-page .as-map-coords {
                display: none;
            }

            .aerial-services-page .as-map-stack-meta {
                text-align: left;
            }

            .aerial-services-page .as-service-media-wrap {
                height: clamp(160px, 50vw, 200px);
            }

            .aerial-services-page .as-report-stage {
                flex: 0 0 122px;
                width: 122px;
                min-width: 122px;
                max-width: 122px;
            }

            .aerial-services-page .as-report-stage-frame {
                height: clamp(44px, 13vw, 52px);
            }

            .aerial-services-page .as-report-stage-label {
                font-size: 6.5px;
            }

            .aerial-services-page .as-arch-main {
                height: min(200px, 54vw);
                min-height: 180px;
            }

            .aerial-services-page .as-arch-composition > .as-arch-sub:nth-child(2),
            .aerial-services-page .as-arch-composition > .as-arch-sub:nth-child(3) {
                height: min(96px, 28vw);
                min-height: 88px;
            }

            .aerial-services-page .as-arch-img-label {
                left: 0;
                bottom: 0;
                font-size: 6px;
                padding: 2px 4px;
            }

            .aerial-services-page .as-arch-main .as-arch-img-label {
                left: 0;
                bottom: 0;
                font-size: 6.5px;
                padding: 2px 5px;
            }
        }

        /* =========================================
           HALO360 PAGE (pages/halo360.html)
        ========================================= */

        /* --- SECTION 1: HERO --- */
        .h360-hero {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 72vh;
            padding: 128px 48px 80px;
            background-color: #0A0B0E;
            color: var(--white);
            overflow: hidden;
        }
        .h360-hero-media {
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        .h360-hero-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .h360-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(4, 4, 6, 0.82) 0%, rgba(4, 4, 6, 0.68) 46%, rgba(4, 4, 6, 0.86) 100%),
                linear-gradient(90deg, rgba(4, 4, 6, 0.58) 0%, rgba(4, 4, 6, 0.32) 52%, rgba(4, 4, 6, 0.52) 100%),
                rgba(4, 4, 6, 0.22);
            z-index: 1;
            pointer-events: none;
        }
        .h360-hero::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -58%);
            width: min(820px, 90vw);
            height: 340px;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.08) 0%, rgba(244, 50, 52, 0.02) 45%, transparent 72%);
            z-index: 1;
            pointer-events: none;
        }
        .h360-hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 980px;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .h360-hero .cp-dark-label {
            margin-bottom: 32px;
            color: rgba(255, 255, 255, 0.62);
        }
        .h360-hero-title {
            font-family: var(--font-primary);
            font-size: clamp(32px, 3.8vw, 46px);
            line-height: 1.18;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 32px;
            max-width: 860px;
            text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
        }
        .h360-hero-copy {
            font-family: var(--font-secondary);
            font-size: clamp(15px, 1.55vw, 18px);
            line-height: 1.72;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.86);
            max-width: 720px;
            margin-bottom: 48px;
            letter-spacing: normal;
            word-spacing: normal;
            text-align: center;
            text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
        }
        .h360-hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* --- SECTION 2: WHAT IS HALO360 --- */
        .h360-intro {
            background: #FAFAFA;
            color: var(--main-black);
            padding: 48px 40px 52px;
        }
        .h360-intro-inner {
            max-width: 1180px;
            margin: 0 auto;
            width: 100%;
        }
        .h360-intro-content {
            max-width: 900px;
            padding-left: 24px;
            border-left: 2px solid rgba(244, 50, 52, 0.32);
            text-align: left;
            letter-spacing: normal;
        }
        .h360-intro-brand {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 28px;
        }
        .h360-intro-mark {
            width: 28px;
            height: 28px;
            object-fit: contain;
            flex-shrink: 0;
            display: block;
            border-radius: 5px;
        }
        .h360-intro-wordmark {
            font-family: var(--font-primary);
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.015em;
            line-height: 1;
            margin: 0;
        }
        .h360-intro-halo {
            color: var(--main-black);
        }
        .h360-intro-360 {
            color: var(--brand-red);
        }
        .h360-intro-content .cap-section-label {
            margin-bottom: 16px;
        }
        .h360-intro-heading {
            font-size: clamp(28px, 3.2vw, 40px);
            margin-bottom: 16px;
        }
        .h360-intro-desc {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.72;
            font-weight: 300;
            color: #555;
            letter-spacing: normal;
            word-spacing: normal;
            word-break: normal;
            text-align: left;
        }

        /* --- SECTION 3: OUTPUTS + BEST FOR --- */
        .h360-outputs {
            position: relative;
            background: #0A0B0E;
            color: var(--white);
            padding: 112px 40px 104px;
            overflow: hidden;
            scroll-margin-top: 108px;
        }
        .h360-outputs::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(
                ellipse 70% 55% at 50% 42%,
                rgba(244, 50, 52, 0.035) 0%,
                transparent 62%
            );
        }
        .h360-outputs::after {
            content: '';
            position: absolute;
            bottom: 8%;
            left: 50%;
            transform: translateX(-50%);
            width: min(720px, 80vw);
            height: 280px;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.045) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }
        .h360-outputs-glow {
            position: absolute;
            top: 4%;
            left: 50%;
            transform: translateX(-50%);
            width: min(960px, 92vw);
            height: 420px;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.07) 0%, transparent 68%);
            pointer-events: none;
            z-index: 0;
        }
        .h360-outputs-texture {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.42;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
            background-size: 52px 52px;
            mask-image: radial-gradient(ellipse 88% 72% at 50% 44%, black 8%, transparent 74%);
            -webkit-mask-image: radial-gradient(ellipse 88% 72% at 50% 44%, black 8%, transparent 74%);
        }
        .h360-outputs-inner {
            position: relative;
            z-index: 1;
            max-width: 1180px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 0;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
        .h360-outputs-inner h2,
        .h360-outputs-inner h3,
        .h360-outputs-inner h4,
        .h360-usecase-label {
            text-wrap: balance;
            word-break: normal;
            overflow-wrap: normal;
            hyphens: none;
        }
        .h360-outputs-head {
            max-width: 820px;
            margin-bottom: 64px;
        }
        .h360-outputs-head .cp-dark-label {
            margin-bottom: 22px;
            font-size: 11px;
            letter-spacing: 0.22em;
            color: rgba(255, 255, 255, 0.55);
        }
        .h360-outputs-title {
            font-family: var(--font-primary);
            font-size: clamp(30px, 3.6vw, 44px);
            line-height: 1.14;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 22px;
        }
        .h360-outputs-desc {
            font-family: var(--font-secondary);
            font-size: 16px;
            line-height: 1.72;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.68);
            letter-spacing: normal;
            word-spacing: normal;
            max-width: 720px;
        }

        /* Panels — open showcase flow (de-boxed) */
        .h360-panel {
            position: relative;
            margin-bottom: 0;
            padding: 0 0 52px;
            background: transparent;
            border: none;
            box-shadow: none;
        }
        .h360-panel::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 20%,
                rgba(244, 50, 52, 0.09) 50%,
                rgba(255, 255, 255, 0.05) 80%,
                transparent 100%
            );
        }
        .h360-panel--primary {
            padding: 0 0 56px;
        }
        .h360-panel--secondary {
            padding-bottom: 56px;
        }
        .h360-panel--secondary .h360-panel-media {
            padding-top: 28px;
        }
        .h360-panel--stills {
            padding-bottom: 56px;
        }
        .h360-panel--stills .h360-panel-eyebrow {
            color: rgba(255, 255, 255, 0.45);
        }
        .h360-panel-split {
            display: grid;
            grid-template-columns: 1.14fr 1fr;
            gap: 48px;
            align-items: center;
        }
        .h360-panel-split--reverse {
            grid-template-columns: 1fr 1.08fr;
        }
        .h360-panel-media--compact {
            display: flex;
            justify-content: flex-end;
        }
        .h360-panel-copy {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .h360-panel-eyebrow {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.52);
        }
        .h360-panel--primary .h360-panel-eyebrow {
            color: rgba(244, 50, 52, 0.88);
        }
        .h360-panel-title {
            font-family: var(--font-primary);
            font-size: clamp(24px, 2.6vw, 30px);
            line-height: 1.16;
            letter-spacing: -0.018em;
            color: var(--white);
            margin: 0;
        }
        .h360-panel--primary .h360-panel-title {
            font-size: clamp(28px, 3vw, 36px);
        }
        .h360-panel-title--sm {
            font-size: clamp(22px, 2.4vw, 28px);
        }
        .h360-panel-text,
        .h360-support-text,
        .h360-included-text,
        .h360-usecase-text {
            font-family: var(--font-secondary);
            font-size: 16px;
            line-height: 1.72;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
        }
        .h360-panel-text {
            color: rgba(255, 255, 255, 0.68);
            margin: 0;
        }
        .h360-panel-extra,
        .h360-support-extra {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.68;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.52);
            letter-spacing: normal;
            word-spacing: normal;
            margin: 0;
            padding: 14px 0 0 18px;
            border-left: 1px solid rgba(244, 50, 52, 0.28);
        }
        .h360-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            list-style: none;
            margin: 10px 0 0;
            padding: 0;
        }
        .h360-tags li,
        .h360-best-pill {
            font-family: var(--font-secondary);
            font-size: 11.5px;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.8);
            padding: 10px 17px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.12);
            transition:
                border-color 0.3s ease,
                background 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
        }
        .h360-tags li:hover,
        .h360-best-pill:hover {
            border-color: rgba(244, 50, 52, 0.3);
            background: rgba(255, 255, 255, 0.065);
            color: var(--white);
            box-shadow: 0 0 20px rgba(244, 50, 52, 0.06);
        }

        /* Visual frames */
        .h360-frame {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            width: 100%;
            background: #0A0B0E;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            box-shadow:
                0 10px 36px rgba(0, 0, 0, 0.32),
                inset 0 0 0 1px rgba(255, 255, 255, 0.03);
            transition:
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                transform 0.45s ease;
        }
        .h360-frame--support {
            aspect-ratio: 16 / 9;
        }
        .h360-frame--feature {
            aspect-ratio: 16 / 9;
        }
        .h360-frame:hover {
            border-color: rgba(255, 255, 255, 0.16);
            box-shadow:
                0 14px 44px rgba(0, 0, 0, 0.36),
                0 0 48px rgba(244, 50, 52, 0.05),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        }
        .h360-panel--primary .h360-frame {
            border-color: rgba(255, 255, 255, 0.13);
            box-shadow:
                0 16px 48px rgba(0, 0, 0, 0.38),
                0 0 64px rgba(244, 50, 52, 0.04),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        }
        .h360-panel--primary .h360-frame--hero {
            overflow: visible;
        }
        .h360-panel--primary .h360-frame--hero::before,
        .h360-panel--primary .h360-frame--hero::after {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            z-index: 7;
            pointer-events: none;
        }
        .h360-panel--primary .h360-frame--hero::before {
            top: -1px;
            left: -1px;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
        }
        .h360-panel--primary .h360-frame--hero::after {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
        }
        .h360-panel--secondary .h360-frame {
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow:
                0 12px 40px rgba(0, 0, 0, 0.34),
                inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        }
        .h360-panel--stills .h360-frame {
            border-color: rgba(255, 255, 255, 0.09);
            box-shadow:
                0 8px 28px rgba(0, 0, 0, 0.28),
                inset 0 0 0 1px rgba(255, 255, 255, 0.03);
        }
        .h360-frame--stills {
            max-width: 480px;
            width: 100%;
        }
        .h360-frame > .h360-carousel,
        .h360-frame > .h360-video-wrap,
        .h360-frame > .h360-hotspot-stage {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
        .h360-panel-media {
            position: relative;
        }
        .h360-panel--primary .h360-panel-media::before {
            content: '';
            position: absolute;
            inset: -10% -6%;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.07) 0%, transparent 68%);
        }
        .h360-frame-label {
            position: absolute;
            left: 14px;
            bottom: 14px;
            z-index: 4;
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.9);
            padding: 7px 11px;
            background: rgba(10, 11, 14, 0.84);
            border: 1px solid rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        /* Supporting feature row — open layout */
        .h360-support-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 48px;
            padding: 0 0 52px;
            margin-bottom: 0;
            position: relative;
        }
        .h360-support-row::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 20%,
                rgba(244, 50, 52, 0.09) 50%,
                rgba(255, 255, 255, 0.05) 80%,
                transparent 100%
            );
        }
        .h360-support-card {
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .h360-support-copy {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .h360-support-title {
            font-family: var(--font-primary);
            font-size: clamp(22px, 2.4vw, 28px);
            line-height: 1.18;
            letter-spacing: -0.015em;
            color: var(--white);
            margin: 0;
        }
        .h360-support-text {
            color: rgba(255, 255, 255, 0.64);
            margin: 0;
        }
        .h360-support-extra {
            margin: 0;
        }

        .h360-part--included,
        .h360-part--usecases {
            position: relative;
            padding-top: 56px;
            margin-bottom: 48px;
            border-top: none;
        }
        .h360-part--included::before,
        .h360-part--usecases::before,
        .h360-best-for::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.05) 20%,
                rgba(244, 50, 52, 0.11) 50%,
                rgba(255, 255, 255, 0.05) 80%,
                transparent 100%
            );
        }
        .h360-section-heading {
            font-family: var(--font-primary);
            font-size: clamp(28px, 3.2vw, 38px);
            line-height: 1.16;
            letter-spacing: -0.02em;
            color: var(--white);
            margin: 0 0 32px;
        }
        .h360-section-heading--sm {
            font-size: clamp(24px, 2.6vw, 30px);
            margin-bottom: 24px;
        }
        .h360-usecases-head .cp-dark-label {
            margin-bottom: 16px;
            font-size: 11px;
            letter-spacing: 0.22em;
            color: rgba(255, 255, 255, 0.55);
        }
        .h360-media-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.32;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        .h360-media-scan {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.22;
            background: repeating-linear-gradient(
                180deg,
                transparent 0,
                transparent 3px,
                rgba(255, 255, 255, 0.022) 3px,
                rgba(255, 255, 255, 0.022) 4px
            );
        }
        .h360-carousel-slide.is-empty .h360-media-grid,
        .h360-hotspot-stage.is-empty .h360-media-grid,
        .h360-video-wrap.is-fallback .h360-media-grid {
            opacity: 0.62;
        }
        .h360-carousel-slide.is-empty .h360-media-scan,
        .h360-hotspot-stage.is-empty .h360-media-scan,
        .h360-video-wrap.is-fallback .h360-media-scan {
            opacity: 0.38;
        }
        .h360-carousel-slide.is-empty .h360-media-floorplan,
        .h360-hotspot-stage.is-empty .h360-media-floorplan {
            opacity: 1;
        }
        .h360-carousel-slide:not(.is-empty) .h360-media-floorplan,
        .h360-hotspot-stage:not(.is-empty) .h360-media-floorplan {
            opacity: 0.35;
        }
        .h360-media-floorplan {
            position: absolute;
            inset: 14% 12% 18% 14%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.55;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background:
                linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.07) 49.5%, rgba(255, 255, 255, 0.07) 50.5%, transparent 50.5%),
                linear-gradient(0deg, transparent 62%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0.06) 63%, transparent 63%);
        }
        .h360-media-floorplan::before {
            content: '';
            position: absolute;
            top: 22%;
            left: 8%;
            right: 28%;
            bottom: 18%;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .h360-media-floorplan::after {
            content: '';
            position: absolute;
            top: 38%;
            right: 10%;
            width: 28%;
            height: 34%;
            border: 1px solid rgba(244, 50, 52, 0.18);
        }
        .h360-media-pano {
            position: absolute;
            inset: 22% 8%;
            z-index: 0;
            pointer-events: none;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: linear-gradient(90deg, rgba(244, 50, 52, 0.06) 0%, transparent 18%, transparent 82%, rgba(244, 50, 52, 0.06) 100%);
            opacity: 0.7;
        }
        .h360-media-points {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }
        .h360-media-points i {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--brand-red);
            box-shadow: 0 0 0 3px rgba(244, 50, 52, 0.15);
        }
        .h360-media-points i:nth-child(1) { top: 28%; left: 24%; }
        .h360-media-points i:nth-child(2) { top: 46%; left: 58%; }
        .h360-media-points i:nth-child(3) { top: 62%; left: 36%; }
        .h360-media-points i:nth-child(4) { top: 34%; left: 72%; }
        .h360-carousel-slide.is-empty .h360-media-points {
            opacity: 1;
        }
        .h360-carousel-slide:not(.is-empty) .h360-media-points {
            opacity: 0.35;
        }

        /* Dollhouse carousel */
        .h360-carousel {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: inherit;
        }
        .h360-carousel-track {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: inherit;
        }
        .h360-carousel-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.65s ease;
            background: #0A0B0E;
        }
        .h360-carousel-slide.is-active {
            opacity: 1;
            z-index: 1;
        }
        .h360-carousel-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-position: center;
            display: block;
            z-index: 1;
        }
        .h360-fit-contain {
            object-fit: contain;
            object-position: center center;
            padding: 0;
            box-sizing: border-box;
        }
        .h360-panel--secondary .h360-carousel-img.h360-fit-contain {
            object-fit: contain;
            object-position: center center;
        }
        .h360-support-card:first-child .h360-carousel-img.h360-fit-contain {
            object-fit: cover;
            object-position: center center;
        }
        .h360-hotspot-stage .h360-hotspot-img {
            object-fit: contain;
            object-position: center center;
            padding: 16px 20px;
            box-sizing: border-box;
        }
        .h360-fit-cover {
            object-fit: cover;
            object-position: center center;
        }
        .h360-carousel-slide.is-empty .h360-carousel-img {
            display: none;
        }
        .h360-carousel-slide.is-empty .h360-media-grid {
            opacity: 0.55;
        }

        .h360-carousel-nav {
            position: absolute;
            right: 14px;
            bottom: 14px;
            z-index: 5;
            display: flex;
            gap: 6px;
        }
        .h360-carousel-dot {
            width: 18px;
            height: 2px;
            padding: 0;
            border: none;
            background: rgba(255, 255, 255, 0.22);
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
        }
        .h360-carousel-dot.is-active {
            background: var(--brand-red);
            transform: scaleX(1.15);
        }
        .h360-carousel-dot:hover {
            background: rgba(255, 255, 255, 0.45);
        }
        .h360-carousel-dot.is-active:hover {
            background: var(--brand-red);
        }

        /* Walkthrough video */
        .h360-video-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 0;
            background: #0A0B0E;
        }
        .h360-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 2;
        }
        .h360-video::-webkit-media-controls {
            display: none !important;
        }
        .h360-video::-webkit-media-controls-enclosure {
            display: none !important;
        }
        .h360-video.is-hidden {
            display: none;
        }
        .h360-video-fallback {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        .h360-video-fallback.is-visible {
            opacity: 1;
        }
        .h360-video-state {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            background: rgba(6, 6, 8, 0.28);
            transition: opacity 0.35s ease;
        }
        .h360-video-wrap.is-playing .h360-video-state {
            opacity: 0;
        }
        .h360-video-play {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.28);
            background: rgba(10, 11, 14, 0.55);
            position: relative;
            box-shadow: 0 0 0 6px rgba(244, 50, 52, 0.08);
        }
        .h360-video-play::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 54%;
            transform: translate(-50%, -50%);
            border-style: solid;
            border-width: 9px 0 9px 14px;
            border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
        }

        /* Hotspot stage */
        .h360-hotspot-stage {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 0;
            background: #0A0B0E;
        }
        .h360-hotspot-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-position: center;
            z-index: 1;
            background: #0A0B0E;
        }
        .h360-hotspot-stage.is-empty .h360-hotspot-img {
            display: none;
        }
        .h360-hotspot-stage.is-empty .h360-media-grid {
            opacity: 0.55;
            z-index: 1;
        }
        .h360-hotspot-pin {
            position: absolute;
            left: var(--x);
            top: var(--y);
            transform: translate(-50%, -50%);
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .h360-hotspot-pin::before {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--brand-red);
            box-shadow: 0 0 0 4px rgba(244, 50, 52, 0.18);
            flex-shrink: 0;
        }
        .h360-hotspot-tag {
            position: absolute;
            left: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            font-family: var(--font-secondary);
            font-size: 8px;
            font-weight: 600;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.88);
            padding: 4px 7px;
            background: rgba(10, 11, 14, 0.82);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .h360-hotspot-pin--flip .h360-hotspot-tag {
            left: auto;
            right: calc(100% + 8px);
        }

        /* Included with HALO360 — hairline grid, not boxed cards */
        .h360-included-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: rgba(255, 255, 255, 0.05);
        }
        .h360-included-card {
            padding: 28px 30px 30px;
            background: #0A0B0E;
            border: none;
            transition: background 0.35s ease;
        }
        .h360-included-card:hover {
            background: rgba(255, 255, 255, 0.018);
        }
        .h360-included-num {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.16em;
            color: var(--brand-red);
            display: block;
            margin-bottom: 14px;
        }
        .h360-included-card .h360-included-title {
            font-family: var(--font-primary);
            font-size: clamp(18px, 2vw, 22px);
            line-height: 1.24;
            letter-spacing: -0.01em;
            color: var(--white);
            margin: 0 0 12px;
        }
        .h360-included-text {
            color: rgba(255, 255, 255, 0.6);
            margin: 0;
        }

        /* Use cases — open columns */
        .h360-usecases-head {
            max-width: 720px;
            margin-bottom: 28px;
        }
        .h360-usecases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }
        .h360-usecase-card {
            padding: 0 0 0 22px;
            background: transparent;
            border: none;
            border-left: 1px solid rgba(244, 50, 52, 0.28);
            box-shadow: none;
            transition: border-color 0.35s ease;
        }
        .h360-usecase-card:hover {
            border-left-color: rgba(244, 50, 52, 0.48);
        }
        .h360-usecase-label {
            font-family: var(--font-primary);
            font-size: clamp(18px, 2vw, 22px);
            line-height: 1.2;
            letter-spacing: -0.012em;
            color: var(--white);
            display: block;
            margin-bottom: 12px;
        }
        .h360-usecase-text {
            color: rgba(255, 255, 255, 0.62);
        }

        .h360-best-for {
            margin-bottom: 0;
            padding-top: 56px;
            position: relative;
            border-top: none;
        }
        .h360-best-for .h360-section-heading--sm {
            max-width: 620px;
            margin-bottom: 24px;
        }
        .h360-best-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* --- SECTION 4: WORKFLOW (compact override) --- */
        .h360-workflow {
            padding: 88px 40px 92px;
        }
        .h360-workflow .cp-head {
            max-width: 680px;
            margin-bottom: 0;
        }
        .h360-workflow .cap-heading {
            font-size: clamp(30px, 3.6vw, 44px);
            margin-bottom: 0;
        }

        /* --- HALO360 PAGE RESPONSIVE --- */
        @media (max-width: 1024px) {
            .h360-panel-split,
            .h360-panel-split--reverse {
                grid-template-columns: 1fr;
                gap: 24px;
            }
            .h360-panel-split--reverse .h360-panel-media {
                order: -1;
            }
            .h360-panel-media--compact {
                justify-content: flex-start;
            }
            .h360-frame--stills {
                max-width: 100%;
            }
            .h360-support-row {
                grid-template-columns: 1fr;
            }
            .h360-included-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .h360-usecases-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            /* HALO360 page — homepage / Capabilities mobile design system */
            .halo360-page .h360-hero {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: min(64vh, 540px);
                padding: 0;
            }

            .halo360-page .h360-hero-media {
                inset: 0;
            }

            .halo360-page .h360-hero-bg {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }

            .halo360-page .h360-hero::before {
                background:
                    linear-gradient(180deg,
                        rgba(2, 2, 2, 0.4) 0%,
                        rgba(2, 2, 2, 0.56) 36%,
                        rgba(2, 2, 2, 0.8) 68%,
                        rgba(2, 2, 2, 0.94) 100%),
                    linear-gradient(90deg,
                        rgba(2, 2, 2, 0.64) 0%,
                        rgba(2, 2, 2, 0.3) 55%,
                        rgba(2, 2, 2, 0.68) 100%);
            }

            .halo360-page .h360-hero::after {
                top: auto;
                left: 0;
                right: 0;
                bottom: 0;
                transform: none;
                width: 100%;
                height: 100%;
                opacity: 0.45;
                background: radial-gradient(ellipse 70% 55% at 50% 88%,
                    rgba(244, 50, 52, 0.1) 0%,
                    transparent 68%);
            }

            .halo360-page .h360-hero-inner {
                width: calc(100% - 48px);
                max-width: none;
                padding: 58px 0 36px;
                margin: 0 auto;
            }

            .halo360-page .h360-hero .cp-dark-label {
                font-size: 8px;
                letter-spacing: 0.08em;
                margin-bottom: 14px;
                gap: 7px;
            }

            .halo360-page .h360-hero .cp-dark-label::before {
                width: 3px;
                height: 3px;
            }

            .halo360-page .h360-hero-title {
                font-size: clamp(22px, 5.8vw, 28px);
                line-height: 1.12;
                letter-spacing: -0.03em;
                margin-bottom: 14px;
                max-width: 100%;
                text-shadow: none;
            }

            .halo360-page .h360-hero-copy {
                font-size: 13px;
                line-height: 1.55;
                margin-bottom: 22px;
                max-width: 310px;
                text-shadow: none;
            }

            .halo360-page .h360-hero-actions .btn-hero-action {
                width: auto;
                min-width: 150px;
                max-width: 170px;
                height: 40px;
                padding: 0 14px;
                font-size: clamp(8px, 2vw, 9px);
                letter-spacing: 0.07em;
            }

            .halo360-page .h360-intro {
                padding: 48px 20px 52px;
            }

            .halo360-page .h360-intro-content {
                max-width: none;
                padding-left: 16px;
            }

            .halo360-page .h360-intro-content .cap-section-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 16px;
                gap: 8px;
            }

            .halo360-page .h360-intro-content .cap-section-label::before {
                width: 5px;
                height: 5px;
            }

            .halo360-page .h360-intro-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                letter-spacing: -0.02em;
                margin-bottom: 12px;
            }

            .halo360-page .h360-intro-desc {
                font-size: 13px;
                line-height: 1.55;
            }

            .halo360-page .h360-outputs {
                padding: 48px 20px 52px;
                scroll-margin-top: 72px;
            }

            .halo360-page .h360-outputs-glow,
            .halo360-page .h360-outputs-texture {
                opacity: 0.28;
            }

            .halo360-page .h360-outputs-head {
                margin-bottom: 24px;
            }

            .halo360-page .h360-outputs-head .cp-dark-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .halo360-page .h360-outputs-head .cp-dark-label::before {
                width: 5px;
                height: 5px;
            }

            .halo360-page .h360-outputs-title {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                letter-spacing: -0.02em;
                margin-bottom: 12px;
            }

            .halo360-page .h360-outputs-desc {
                font-size: 13px;
                line-height: 1.55;
            }

            .halo360-page .h360-panel {
                padding: 0 0 28px;
            }

            .halo360-page .h360-panel--primary {
                padding: 0 0 32px;
            }

            .halo360-page .h360-panel--secondary .h360-panel-media {
                padding-top: 0;
            }

            .halo360-page .h360-panel-split,
            .halo360-page .h360-panel-split--reverse {
                gap: 20px;
            }

            .halo360-page .h360-panel-copy {
                gap: 10px;
            }

            .halo360-page .h360-panel-eyebrow {
                font-size: 8px;
                letter-spacing: 0.18em;
            }

            .halo360-page .h360-panel-title,
            .halo360-page .h360-panel--primary .h360-panel-title {
                font-size: clamp(15px, 4vw, 18px);
                line-height: 1.2;
            }

            .halo360-page .h360-panel-title--sm {
                font-size: clamp(14px, 3.6vw, 16px);
            }

            .halo360-page .h360-panel-text,
            .halo360-page .h360-support-text,
            .halo360-page .h360-usecase-text {
                font-size: 13px;
                line-height: 1.55;
            }

            .halo360-page .h360-panel-extra,
            .halo360-page .h360-support-extra {
                font-size: 11.5px;
                line-height: 1.48;
                padding: 10px 0 0 14px;
            }

            .halo360-page .h360-frame {
                aspect-ratio: auto;
                height: clamp(168px, 48vw, 210px);
                border-radius: 2px;
            }

            .halo360-page .h360-frame--stills {
                max-width: 100%;
                height: clamp(160px, 46vw, 200px);
            }

            .halo360-page .h360-panel--primary .h360-frame--hero::before,
            .halo360-page .h360-panel--primary .h360-frame--hero::after {
                width: 12px;
                height: 12px;
            }

            .halo360-page .h360-frame-label {
                left: 0;
                bottom: 0;
                font-size: 6.5px;
                letter-spacing: 0.08em;
                padding: 5px 8px;
            }

            .halo360-page .h360-carousel-nav {
                right: 8px;
                bottom: 8px;
                gap: 4px;
            }

            .halo360-page .h360-carousel-dot {
                width: 14px;
                height: 2px;
            }

            .halo360-page .h360-hotspot-tag {
                font-size: 7px;
                letter-spacing: 0.06em;
                padding: 4px 7px;
            }

            .halo360-page .h360-support-row {
                gap: 28px;
                padding: 0 0 28px;
            }

            .halo360-page .h360-support-card {
                gap: 14px;
            }

            .halo360-page .h360-support-title {
                font-size: clamp(14px, 3.6vw, 16px);
                line-height: 1.2;
            }

            .halo360-page .h360-tags {
                gap: 6px;
                margin-top: 6px;
            }

            .halo360-page .h360-tags li,
            .halo360-page .h360-best-pill {
                font-size: 8px;
                letter-spacing: 0.08em;
                padding: 6px 10px;
            }

            .halo360-page .h360-part--included {
                padding-top: 28px;
                margin-bottom: 22px;
            }

            .halo360-page .h360-part--included::before {
                display: none;
            }

            .halo360-page .h360-part--included .h360-section-heading {
                margin-bottom: 14px;
            }

            .halo360-page .h360-part--usecases {
                padding-top: 24px;
                margin-bottom: 22px;
            }

            .halo360-page .h360-section-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                margin-bottom: 18px;
            }

            .halo360-page .h360-section-heading--sm {
                font-size: clamp(15px, 4vw, 18px);
                margin-bottom: 14px;
            }

            .halo360-page .h360-included-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: repeat(3, minmax(0, 1fr));
                gap: 8px;
                background: transparent;
            }

            .halo360-page .h360-included-card {
                display: flex;
                flex-direction: column;
                height: 100%;
                min-height: 0;
                padding: 10px 9px 11px;
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 2px;
                background: rgba(255, 255, 255, 0.015);
            }

            .halo360-page .h360-included-card:hover {
                background: rgba(255, 255, 255, 0.028);
                border-color: rgba(255, 255, 255, 0.11);
            }

            .halo360-page .h360-included-num {
                font-size: 8px;
                letter-spacing: 0.12em;
                margin-bottom: 4px;
            }

            .halo360-page .h360-included-card .h360-included-title {
                font-size: clamp(11px, 2.9vw, 12.5px);
                line-height: 1.22;
                margin-bottom: 4px;
            }

            .halo360-page .h360-included-text {
                font-size: 10.5px;
                line-height: 1.42;
            }

            .halo360-page .h360-usecases-head {
                margin-bottom: 14px;
            }

            .halo360-page .h360-usecases-head .cp-dark-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 8px;
            }

            .halo360-page .h360-usecases-grid {
                gap: 14px;
            }

            .halo360-page .h360-usecase-card {
                padding: 0 0 0 12px;
            }

            .halo360-page .h360-usecase-label {
                font-size: clamp(12px, 3.2vw, 14px);
                line-height: 1.2;
                margin-bottom: 5px;
            }

            .halo360-page .h360-usecase-text {
                font-size: 11.5px;
                line-height: 1.48;
            }

            .halo360-page .h360-best-for {
                padding-top: 24px;
            }

            .halo360-page .h360-best-for .h360-section-heading--sm {
                margin-bottom: 10px;
            }

            .halo360-page .h360-best-grid {
                gap: 6px 5px;
            }

            .halo360-page .h360-workflow {
                padding: 38px 20px 42px;
            }

            .halo360-page .h360-workflow .cp-head {
                margin-bottom: 14px;
            }

            .halo360-page .h360-workflow .cap-section-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .halo360-page .h360-workflow .cap-section-label::before {
                width: 5px;
                height: 5px;
            }

            .halo360-page .h360-workflow .cap-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                letter-spacing: -0.02em;
                margin-bottom: 0;
            }

            .halo360-page .cp-flow-map {
                margin-top: 14px;
                padding-top: 0;
            }

            .halo360-page .cp-flow-svg--desktop {
                display: none !important;
            }

            .halo360-page .cp-flow-svg--mobile {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 1;
            }

            .halo360-page .cp-flow-steps {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 0;
                padding-left: 0;
            }

            .halo360-page .cp-flow-steps::before,
            .halo360-page .cp-flow-steps::after,
            .halo360-page .cp-flow-map.is-revealed .cp-flow-steps::before,
            .halo360-page .cp-flow-map.is-revealed .cp-flow-steps::after {
                content: none !important;
                display: none !important;
            }

            .halo360-page .cp-flow-step {
                display: grid;
                grid-template-columns: 40px 1fr;
                column-gap: 10px;
                position: relative;
                padding-bottom: 0;
                margin-top: 0 !important;
            }

            .halo360-page .cp-flow-step:not(:last-child)::before,
            .halo360-page .cp-flow-step:not(:last-child)::after {
                content: none;
                display: none;
            }

            .halo360-page .cp-flow-node {
                justify-self: center;
                align-self: start;
                width: 28px;
                height: 28px;
                font-size: 9px;
                letter-spacing: 0.03em;
                margin: 0 0 14px;
                position: relative;
                z-index: 3;
            }

            .halo360-page .cp-flow-node:last-of-type::after {
                display: none;
            }

            .halo360-page .cp-flow-map.is-revealed .cp-flow-node {
                box-shadow: 0 0 0 3px rgba(244, 50, 52, 0.08);
            }

            .halo360-page .cp-flow-step:last-child .cp-flow-node {
                margin-bottom: 0;
            }

            .halo360-page .cp-flow-step-card {
                align-self: start;
                flex: 1;
                min-width: 0;
                width: 100%;
                margin: 0 0 14px;
                padding: 11px 12px 13px;
                box-shadow: 0 6px 18px rgba(40, 30, 20, 0.06);
                position: relative;
                z-index: 2;
            }

            .halo360-page .cp-flow-step:last-child .cp-flow-step-card {
                margin-bottom: 0;
            }

            .halo360-page .cp-flow-micro {
                font-size: 7.5px;
                letter-spacing: 0.11em;
                margin-bottom: 4px;
                gap: 5px;
            }

            .halo360-page .cp-flow-micro::before {
                width: 3px;
                height: 3px;
            }

            .halo360-page .cp-flow-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.18;
                margin-bottom: 4px;
            }

            .halo360-page .cp-flow-text {
                font-size: 11px;
                line-height: 1.45;
            }
        }

        @media (max-width: 480px) {
            .halo360-page .h360-hero {
                min-height: min(62vh, 500px);
            }

            .halo360-page .h360-hero-inner {
                width: calc(100% - 48px);
                padding: 54px 0 32px;
            }

            .halo360-page .h360-hero .cp-dark-label {
                font-size: 7.5px;
                letter-spacing: 0.07em;
            }

            .halo360-page .h360-hero-title {
                font-size: clamp(20px, 5.4vw, 26px);
            }

            .halo360-page .h360-hero-actions .btn-hero-action {
                height: 38px;
                font-size: 8px;
            }

            .halo360-page .h360-intro,
            .halo360-page .h360-outputs,
            .halo360-page .h360-workflow {
                padding: 48px 18px 50px;
            }

            .halo360-page .h360-frame {
                height: clamp(152px, 46vw, 188px);
            }

            .halo360-page .h360-frame--stills {
                height: clamp(148px, 44vw, 180px);
            }

            .halo360-page .h360-workflow {
                padding: 34px 18px 38px;
            }

            .halo360-page .h360-workflow .cp-head {
                margin-bottom: 12px;
            }

            .halo360-page .cp-flow-map {
                margin-top: 12px;
            }

            .halo360-page .cp-flow-steps {
                gap: 0;
            }

            .halo360-page .cp-flow-step {
                grid-template-columns: 36px 1fr;
                column-gap: 8px;
            }

            .halo360-page .cp-flow-node {
                width: 26px;
                height: 26px;
                font-size: 8.5px;
                margin-bottom: 12px;
            }

            .halo360-page .cp-flow-step-card {
                margin-bottom: 12px;
                padding: 10px 11px 12px;
            }

            .halo360-page .cp-flow-title {
                font-size: clamp(12.5px, 3.2vw, 14px);
            }

            .halo360-page .cp-flow-text {
                font-size: 10.5px;
            }
        }

        /* =========================================
           INDUSTRIES PAGE (pages/industries.html)
        ========================================= */

        /* --- Shared typography (Industries page) --- */
        .ind-hero-copy,
        .ind-industries .cap-desc,
        .ind-compliance .cap-desc,
        .ind-card-text,
        .ind-compliance-text {
            letter-spacing: normal;
            word-spacing: normal;
            font-variant-ligatures: normal;
        }
        .ind-industries .cap-heading,
        .ind-compliance .cap-heading,
        .ind-card-title,
        .ind-compliance-title {
            letter-spacing: -0.01em;
        }

        /* --- SECTION 1: HERO --- */
        .ind-hero {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 66vh;
            padding: 140px 48px 88px;
            background-color: #0A0B0E;
            color: var(--white);
            overflow: hidden;
        }
        .ind-hero-media {
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        .ind-hero-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 42%;
            display: block;
        }
        .ind-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(4, 4, 6, 0.58) 0%, rgba(4, 4, 6, 0.32) 46%, rgba(4, 4, 6, 0.65) 100%),
                linear-gradient(90deg, rgba(4, 4, 6, 0.34) 0%, rgba(4, 4, 6, 0.14) 55%, rgba(4, 4, 6, 0.3) 100%);
            z-index: 1;
            pointer-events: none;
        }
        .ind-hero::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -55%);
            width: min(820px, 90vw);
            height: 320px;
            background: radial-gradient(ellipse at center, rgba(244, 50, 52, 0.08) 0%, transparent 68%);
            z-index: 1;
            pointer-events: none;
        }
        .ind-hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 920px;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ind-hero .cp-dark-label {
            margin-bottom: 28px;
            color: rgba(255, 255, 255, 0.62);
        }
        .ind-hero-title {
            font-family: var(--font-primary);
            font-size: clamp(32px, 3.8vw, 46px);
            line-height: 1.16;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 28px;
            max-width: 860px;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
            text-wrap: balance;
            word-break: normal;
            hyphens: none;
        }
        .ind-hero-copy {
            font-family: var(--font-secondary);
            font-size: clamp(15px, 1.6vw, 18px);
            line-height: 1.72;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            color: rgba(255, 255, 255, 0.76);
            max-width: 740px;
            margin-bottom: 44px;
        }
        .ind-hero-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        /* --- SECTION 2: INDUSTRIES --- */
        .ind-industries {
            background: #F8F6F2;
            color: var(--main-black);
            padding: 110px 40px 72px;
        }
        .ind-industries-inner,
        .ind-compliance-inner {
            max-width: 1300px;
            margin: 0 auto;
        }
        .ind-head {
            max-width: 760px;
            margin-bottom: 54px;
        }
        .ind-head .cap-heading,
        .ind-compliance-title,
        .ind-card-title {
            text-wrap: balance;
            word-break: normal;
            hyphens: none;
        }
        .ind-head .cap-desc,
        .ind-card-text,
        .ind-compliance-text {
            letter-spacing: normal;
            word-spacing: normal;
        }
        .ind-card-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .ind-card {
            position: relative;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.07);
            padding: 30px 30px 32px;
            transition:
                border-color 0.35s ease,
                box-shadow 0.35s ease;
        }
        .ind-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--brand-red);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.35s ease;
        }
        .ind-card:hover {
            border-color: rgba(244, 50, 52, 0.16);
            box-shadow: 0 8px 24px rgba(2, 2, 2, 0.04);
        }
        .ind-card:hover::before {
            transform: scaleX(1);
        }
        .ind-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 22px;
        }
        .ind-card-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            color: #666;
            transition: color 0.35s ease;
        }
        .ind-card-icon svg {
            width: 24px;
            height: 24px;
        }
        .ind-card:hover .ind-card-icon {
            color: var(--brand-red);
        }
        .ind-card-num {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: #AAA;
            transition: color 0.35s ease;
        }
        .ind-card:hover .ind-card-num {
            color: var(--brand-red);
        }
        .ind-card-title {
            font-family: var(--font-primary);
            font-size: clamp(18px, 1.8vw, 22px);
            line-height: 1.22;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 12px;
        }
        .ind-card-text {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.68;
            font-weight: 300;
            color: #555;
            margin: 0;
        }

        /* --- SECTION 3: COMPLIANCE --- */
        .ind-compliance {
            position: relative;
            background: #F8F6F2;
            color: var(--main-black);
            padding: 72px 40px 110px;
        }
        .ind-compliance::before {
            content: '';
            position: absolute;
            top: 0;
            left: max(40px, calc((100% - 1300px) / 2 + 40px));
            width: min(880px, calc(100% - 80px));
            height: 1px;
            background: linear-gradient(
                90deg,
                rgba(244, 50, 52, 0.42) 0,
                rgba(244, 50, 52, 0.42) 28px,
                rgba(2, 2, 2, 0.1) 28px,
                rgba(2, 2, 2, 0.1) 100%
            );
        }
        .ind-compliance .ind-head {
            margin-bottom: 28px;
        }
        .ind-authority-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 44px;
        }
        .ind-authority-badge {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #555;
            padding: 8px 14px 8px 12px;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.08);
            border-left: 2px solid rgba(244, 50, 52, 0.38);
        }
        .ind-compliance-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .ind-compliance-card {
            position: relative;
            background: #FFFFFF;
            border: 1px solid rgba(2, 2, 2, 0.07);
            border-left: 2px solid rgba(244, 50, 52, 0.24);
            padding: 30px 30px 32px 28px;
            transition:
                border-color 0.35s ease,
                box-shadow 0.35s ease;
        }
        .ind-compliance-card::before {
            display: none;
        }
        .ind-compliance-card:hover {
            border-color: rgba(244, 50, 52, 0.16);
            border-left-color: rgba(244, 50, 52, 0.5);
            box-shadow: 0 8px 24px rgba(2, 2, 2, 0.04);
        }
        .ind-compliance-num {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--brand-red);
            display: block;
            margin-bottom: 16px;
        }
        .ind-compliance-title {
            font-family: var(--font-primary);
            font-size: clamp(18px, 1.9vw, 22px);
            line-height: 1.22;
            letter-spacing: -0.01em;
            color: var(--main-black);
            margin-bottom: 12px;
        }
        .ind-compliance-text {
            font-family: var(--font-secondary);
            font-size: 15px;
            line-height: 1.68;
            font-weight: 300;
            color: #555;
            margin: 0;
        }

        @media (max-width: 1024px) {
            .ind-card-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            /* Industries page — homepage / Capabilities mobile design system */
            .industries-page .ind-hero {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: min(64vh, 540px);
                padding: 0;
            }

            .industries-page .ind-hero-media {
                inset: 0;
            }

            .industries-page .ind-hero-bg {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }

            .industries-page .ind-hero::before {
                background:
                    linear-gradient(180deg,
                        rgba(2, 2, 2, 0.4) 0%,
                        rgba(2, 2, 2, 0.56) 36%,
                        rgba(2, 2, 2, 0.8) 68%,
                        rgba(2, 2, 2, 0.94) 100%),
                    linear-gradient(90deg,
                        rgba(2, 2, 2, 0.64) 0%,
                        rgba(2, 2, 2, 0.3) 55%,
                        rgba(2, 2, 2, 0.68) 100%);
            }

            .industries-page .ind-hero::after {
                top: auto;
                left: 0;
                right: 0;
                bottom: 0;
                transform: none;
                width: 100%;
                height: 100%;
                opacity: 0.45;
                background: radial-gradient(ellipse 70% 55% at 50% 88%,
                    rgba(244, 50, 52, 0.1) 0%,
                    transparent 68%);
            }

            .industries-page .ind-hero-inner {
                width: calc(100% - 48px);
                max-width: none;
                padding: 58px 0 36px;
                margin: 0 auto;
            }

            .industries-page .ind-hero .cp-dark-label {
                font-size: 8px;
                letter-spacing: 0.08em;
                margin-bottom: 14px;
                gap: 7px;
            }

            .industries-page .ind-hero .cp-dark-label::before {
                width: 3px;
                height: 3px;
            }

            .industries-page .ind-hero-title {
                font-size: clamp(22px, 5.8vw, 28px);
                line-height: 1.12;
                letter-spacing: -0.03em;
                margin-bottom: 14px;
                max-width: 100%;
                text-shadow: none;
            }

            .industries-page .ind-hero-copy {
                font-size: 13px;
                line-height: 1.55;
                margin-bottom: 22px;
                max-width: 310px;
            }

            .industries-page .ind-hero-actions .btn-hero-action {
                width: auto;
                min-width: 150px;
                max-width: 170px;
                height: 40px;
                padding: 0 14px;
                font-size: clamp(8px, 2vw, 9px);
                letter-spacing: 0.07em;
            }

            .industries-page .ind-industries {
                padding: 48px 20px 52px;
                scroll-margin-top: 72px;
            }

            .industries-page .ind-compliance {
                padding: 48px 20px 52px;
            }

            .industries-page .ind-compliance::before {
                left: 20px;
                width: calc(100% - 40px);
            }

            .industries-page .ind-head {
                margin-bottom: 24px;
            }

            .industries-page .ind-head .cap-section-label {
                font-size: 9px;
                letter-spacing: 0.22em;
                margin-bottom: 10px;
                gap: 8px;
            }

            .industries-page .ind-head .cap-section-label::before {
                width: 5px;
                height: 5px;
            }

            .industries-page .ind-head .cap-heading {
                font-size: clamp(16px, 4.2vw, 20px);
                line-height: 1.18;
                letter-spacing: -0.02em;
                margin-bottom: 12px;
            }

            .industries-page .ind-head .cap-desc {
                font-size: 13px;
                line-height: 1.55;
            }

            .industries-page .ind-compliance .ind-head {
                margin-bottom: 18px;
            }

            .industries-page .ind-authority-badges {
                gap: 6px;
                margin-bottom: 22px;
            }

            .industries-page .ind-authority-badge {
                font-size: 8px;
                letter-spacing: 0.08em;
                padding: 6px 10px 6px 8px;
            }

            .industries-page .ind-card-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .industries-page .ind-card {
                padding: 16px 14px 18px;
            }

            .industries-page .ind-card-top {
                margin-bottom: 12px;
            }

            .industries-page .ind-card-icon {
                width: 28px;
                height: 28px;
            }

            .industries-page .ind-card-icon svg {
                width: 18px;
                height: 18px;
            }

            .industries-page .ind-card-num {
                font-size: 9px;
                letter-spacing: 0.14em;
            }

            .industries-page .ind-card-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.2;
                margin-bottom: 8px;
            }

            .industries-page .ind-card-text {
                font-size: 11.5px;
                line-height: 1.48;
            }

            .industries-page .ind-compliance-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .industries-page .ind-compliance-card {
                padding: 14px 12px 16px 12px;
            }

            .industries-page .ind-compliance-num {
                font-size: 9px;
                letter-spacing: 0.14em;
                margin-bottom: 8px;
            }

            .industries-page .ind-compliance-title {
                font-size: clamp(13px, 3.4vw, 15px);
                line-height: 1.2;
                margin-bottom: 6px;
            }

            .industries-page .ind-compliance-text {
                font-size: 11.5px;
                line-height: 1.48;
            }
        }

        @media (max-width: 480px) {
            .industries-page .ind-hero {
                min-height: min(62vh, 500px);
            }

            .industries-page .ind-hero-inner {
                width: calc(100% - 48px);
                padding: 54px 0 32px;
            }

            .industries-page .ind-hero .cp-dark-label {
                font-size: 7.5px;
                letter-spacing: 0.07em;
            }

            .industries-page .ind-hero-title {
                font-size: clamp(20px, 5.4vw, 26px);
            }

            .industries-page .ind-hero-actions .btn-hero-action {
                height: 38px;
                font-size: 8px;
            }

            .industries-page .ind-industries,
            .industries-page .ind-compliance {
                padding: 48px 18px 50px;
            }

            .industries-page .ind-compliance::before {
                left: 18px;
                width: calc(100% - 36px);
            }
        }

        /* =========================================
           GET IN TOUCH PAGE (pages/get-in-touch.html)
        ========================================= */

        .git-page {
            background: #0A0B0E;
        }
        .git-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .git-bg-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        .git-bg-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(4, 4, 6, 0.68) 0%, rgba(4, 4, 6, 0.58) 50%, rgba(4, 4, 6, 0.72) 100%),
                rgba(4, 4, 6, 0.28);
        }
        .git-page > .hero-header,
        .git-main,
        .git-page > .contact-footer {
            position: relative;
            z-index: 1;
        }
        .git-form-section {
            padding: 148px 48px 112px;
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }
        .git-layout {
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 45fr 40fr;
            gap: clamp(48px, 7vw, 88px);
            align-items: center;
        }
        .git-intro {
            max-width: 560px;
        }
        .git-intro .cp-dark-label {
            margin-bottom: 24px;
            color: rgba(255, 255, 255, 0.55);
        }
        .git-form-title {
            font-family: var(--font-primary);
            font-size: clamp(32px, 3.8vw, 46px);
            line-height: 1.14;
            letter-spacing: -0.02em;
            color: var(--white);
            margin-bottom: 22px;
            text-wrap: balance;
            word-break: normal;
            hyphens: none;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
        }
        .git-form-desc {
            font-family: var(--font-secondary);
            font-size: 16px;
            line-height: 1.72;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            color: rgba(255, 255, 255, 0.72);
            margin: 0 0 18px;
            max-width: 540px;
        }
        .git-form-desc--secondary {
            color: rgba(255, 255, 255, 0.58);
            margin-bottom: 32px;
        }
        .git-services {
            margin-bottom: 36px;
        }
        .git-services-label {
            display: block;
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.45);
            margin-bottom: 12px;
        }
        .git-service-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .git-service-chips li {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: normal;
            color: rgba(255, 255, 255, 0.78);
            padding: 8px 14px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.11);
        }
        .git-contact-block {
            display: flex;
            flex-direction: column;
            gap: 18px;
            margin-bottom: 32px;
            padding-bottom: 32px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .git-contact-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .git-contact-label {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.42);
        }
        .git-contact-item a,
        .git-contact-value {
            font-family: var(--font-secondary);
            font-size: 15px;
            font-weight: 400;
            letter-spacing: normal;
            word-spacing: normal;
            color: rgba(255, 255, 255, 0.88);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .git-contact-item a:hover {
            color: var(--brand-red);
        }
        .git-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }
        .git-action--primary {
            flex-shrink: 0;
        }
        .git-action--secondary {
            font-family: var(--font-secondary);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.78);
            padding: 10px 18px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            transition:
                border-color 0.3s ease,
                color 0.3s ease,
                background 0.3s ease;
        }
        .git-action--secondary:hover {
            color: var(--white);
            border-color: rgba(244, 50, 52, 0.35);
            background: rgba(244, 50, 52, 0.08);
        }
        .git-form-card {
            position: relative;
            width: 100%;
            max-width: 520px;
            justify-self: end;
            padding: 48px 48px 44px;
            background: rgba(10, 11, 14, 0.58);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .git-form-bracket {
            position: absolute;
            width: 16px;
            height: 16px;
            pointer-events: none;
            z-index: 2;
        }
        .git-form-bracket--tl {
            top: 0;
            left: 0;
            border-top: 2px solid var(--brand-red);
            border-left: 2px solid var(--brand-red);
        }
        .git-form-bracket--br {
            bottom: 0;
            right: 0;
            border-bottom: 2px solid var(--brand-red);
            border-right: 2px solid var(--brand-red);
        }
        .git-form {
            display: flex;
            flex-direction: column;
            gap: 22px;
        }
        .git-field {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .git-label {
            font-family: var(--font-secondary);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
        }
        .git-field input[type="text"],
        .git-field input[type="email"],
        .git-field input[type="tel"],
        .git-field select,
        .git-field textarea {
            width: 100%;
            font-family: var(--font-secondary);
            font-size: 15px;
            font-weight: 300;
            letter-spacing: normal;
            word-spacing: normal;
            line-height: 1.5;
            color: var(--white);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.13);
            padding: 13px 16px;
            transition: border-color 0.3s ease, background 0.3s ease;
            box-sizing: border-box;
        }
        .git-field input[type="text"],
        .git-field input[type="email"],
        .git-field input[type="tel"],
        .git-field select {
            min-height: 48px;
        }
        .git-field select {
            cursor: pointer;
            appearance: none;
            background-color: rgba(255, 255, 255, 0.05);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='0.45' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
        }
        .git-field select option {
            background: #0A0B0E;
            color: var(--white);
        }
        .git-field textarea {
            resize: vertical;
            min-height: 160px;
            padding: 14px 16px;
            line-height: 1.6;
        }
        .git-field input::placeholder,
        .git-field textarea::placeholder {
            color: rgba(255, 255, 255, 0.32);
        }
        .git-field input:focus,
        .git-field select:focus,
        .git-field textarea:focus {
            outline: none;
            border-color: rgba(244, 50, 52, 0.45);
            background: rgba(255, 255, 255, 0.07);
        }
        .git-form-actions {
            padding-top: 8px;
        }
        .git-submit {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
        .git-form-notice {
            font-family: var(--font-secondary);
            font-size: 13px;
            line-height: 1.65;
            font-weight: 300;
            letter-spacing: normal;
            color: rgba(255, 255, 255, 0.78);
            margin: 0;
            padding: 12px 14px;
            background: rgba(244, 50, 52, 0.08);
            border: 1px solid rgba(244, 50, 52, 0.22);
        }

        @media (max-width: 1024px) {
            .git-layout {
                grid-template-columns: 1fr;
                gap: 48px;
            }
            .git-intro {
                max-width: none;
            }
            .git-form-card {
                max-width: 540px;
                justify-self: stretch;
            }
        }

        @media (max-width: 768px) {
            /* Get in Touch page — homepage mobile design system */
            .git-page .git-bg {
                position: fixed;
                inset: 0;
                width: 100%;
                height: 100%;
                height: 100dvh;
            }

            .git-page .git-bg-video {
                width: 100%;
                height: 100%;
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .git-page .git-bg-overlay {
                background:
                    linear-gradient(180deg,
                        rgba(2, 2, 2, 0.52) 0%,
                        rgba(2, 2, 2, 0.48) 45%,
                        rgba(2, 2, 2, 0.62) 100%),
                    rgba(2, 2, 2, 0.24);
            }

            .git-page .git-main,
            .git-page > .contact-footer {
                position: relative;
                z-index: 1;
            }

            .git-page .git-form-section {
                min-height: auto;
                padding: 72px 20px 48px;
                display: block;
                align-items: stretch;
                justify-content: flex-start;
            }

            .git-page .git-layout {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .git-page .git-intro {
                max-width: none;
            }

            .git-page .git-intro .cp-dark-label {
                font-size: 8px;
                letter-spacing: 0.08em;
                margin-bottom: 14px;
                gap: 7px;
            }

            .git-page .git-intro .cp-dark-label::before {
                width: 3px;
                height: 3px;
            }

            .git-page .git-form-title {
                font-size: clamp(22px, 5.8vw, 28px);
                line-height: 1.12;
                letter-spacing: -0.03em;
                margin-bottom: 14px;
                text-shadow: none;
            }

            .git-page .git-form-desc {
                font-size: 13px;
                line-height: 1.55;
                margin-bottom: 12px;
                max-width: none;
            }

            .git-page .git-form-desc--secondary {
                margin-bottom: 20px;
            }

            .git-page .git-services {
                margin-bottom: 22px;
            }

            .git-page .git-services-label {
                font-size: 9px;
                letter-spacing: 0.12em;
                margin-bottom: 8px;
            }

            .git-page .git-service-chips {
                gap: 6px;
            }

            .git-page .git-service-chips li {
                font-size: 8px;
                letter-spacing: 0.08em;
                padding: 6px 10px;
            }

            .git-page .git-contact-block {
                gap: 12px;
                margin-bottom: 22px;
                padding-bottom: 22px;
            }

            .git-page .git-contact-label {
                font-size: 9px;
                letter-spacing: 0.1em;
            }

            .git-page .git-contact-item a,
            .git-page .git-contact-value {
                font-size: 13px;
                line-height: 1.55;
            }

            .git-page .git-actions {
                gap: 8px;
            }

            .git-page .git-action--primary .btn-hero-action {
                width: 100%;
                min-width: 0;
                max-width: none;
                height: 40px;
                padding: 0 14px;
                font-size: clamp(8px, 2vw, 9px);
                letter-spacing: 0.07em;
                justify-content: center;
            }

            .git-page .git-action--secondary {
                font-size: 8px;
                letter-spacing: 0.08em;
                padding: 8px 12px;
                text-align: center;
            }

            .git-page .git-form-card {
                max-width: none;
                padding: 22px 18px 20px;
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
            }

            .git-page .git-form-bracket {
                width: 12px;
                height: 12px;
            }

            .git-page .git-form {
                gap: 16px;
            }

            .git-page .git-field {
                gap: 6px;
            }

            .git-page .git-label {
                font-size: 9px;
                letter-spacing: 0.1em;
            }

            .git-page .git-field input[type="text"],
            .git-page .git-field input[type="email"],
            .git-page .git-field input[type="tel"],
            .git-page .git-field select,
            .git-page .git-field textarea {
                font-size: 13px;
                padding: 10px 12px;
            }

            .git-page .git-field input[type="text"],
            .git-page .git-field input[type="email"],
            .git-page .git-field input[type="tel"],
            .git-page .git-field select {
                min-height: 42px;
            }

            .git-page .git-field select {
                padding-right: 32px;
                background-position: right 10px center;
            }

            .git-page .git-field textarea {
                min-height: 108px;
                padding: 10px 12px;
            }

            .git-page .git-form-actions {
                padding-top: 4px;
            }

            .git-page .git-submit {
                height: 40px;
                font-size: clamp(8px, 2vw, 9px);
                letter-spacing: 0.07em;
            }

            .git-page .git-form-notice {
                font-size: 11.5px;
                line-height: 1.48;
                padding: 10px 12px;
            }
        }

        @media (max-width: 480px) {
            .git-page .git-form-section {
                padding: 68px 18px 44px;
            }

            .git-page .git-form-title {
                font-size: clamp(20px, 5.4vw, 26px);
            }

            .git-page .git-action--primary .btn-hero-action,
            .git-page .git-submit {
                height: 38px;
                font-size: 8px;
            }

            .git-page .git-form-card {
                padding: 20px 16px 18px;
            }
        }