/* ============================================
   Luminous X Technologies — Stylesheet
   ============================================ */

@layer reset, tokens, base, layout, components, animations, utilities;

/* ============================================
   TOKENS
   ============================================ */
@layer tokens {
    :root {
        --copper-900: #3D2412;
        --copper-800: #5A3517;
        --copper-700: #7A4A1E;
        --copper-600: #A0642D;
        --copper-500: #C27A3F;
        --copper-400: #D69863;
        --copper-300: #E6BC94;
        --copper-200: #F2DCC4;
        --copper-100: #FAF0E4;
        --copper-50:  #FEFAF5;

        --ink-900: #0F0B08;
        --ink-800: #1A1512;
        --ink-700: #2A211A;
        --ink-600: #4A3F35;
        --ink-500: #6B5D4F;
        --ink-400: #8A7A6A;
        --ink-300: #B5A595;
        --ink-200: #D9D0C4;
        --ink-100: #EDE7DE;
        --ink-50:  #F8F5F0;
        --white:   #FFFFFF;

        --success: #2F7A3E;
        --success-bg: #EBF5ED;
        --error: #B23A3A;
        --error-bg: #FBEDED;

        --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-mono:    'JetBrains Mono', ui-monospace, monospace;

        --fs-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
        --fs-sm:   clamp(0.85rem, 0.8rem + 0.25vw, 0.92rem);
        --fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
        --fs-md:   clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
        --fs-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
        --fs-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
        --fs-2xl:  clamp(2rem, 1.6rem + 2vw, 2.85rem);
        --fs-3xl:  clamp(2.4rem, 1.8rem + 3vw, 3.75rem);

        --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
        --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
        --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;

        --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-xl: 32px; --r-full: 9999px;

        --sh-sm: 0 1px 2px rgba(15, 11, 8, 0.04), 0 1px 3px rgba(15, 11, 8, 0.03);
        --sh-md: 0 4px 12px rgba(15, 11, 8, 0.05), 0 2px 4px rgba(15, 11, 8, 0.03);
        --sh-lg: 0 20px 40px -12px rgba(15, 11, 8, 0.12), 0 8px 16px -8px rgba(15, 11, 8, 0.06);
        --sh-xl: 0 40px 80px -20px rgba(15, 11, 8, 0.18), 0 16px 32px -12px rgba(15, 11, 8, 0.08);

        --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

        --container: 1320px;
        --container-narrow: 960px;
        --container-wide: 1560px;
        --header-h: 76px;

        /* Floating action button sizing (chatbot + scroll-top) */
        --chatbot-size: 64px;
        --scroll-top-size: 48px;
        --fab-gap: 12px;
    }
}

/* ============================================
   RESET
   ============================================ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: var(--header-h);
    }
    body {
        font-family: var(--font-sans);
        font-size: var(--fs-base);
        line-height: 1.65;
        color: var(--ink-700);
        background: var(--white);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }
    body.nav-open { overflow: hidden; }
    img, svg, video { max-width: 100%; height: auto; display: block; }
    button { font: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; }
    input, textarea, select { font: inherit; }
    ul, ol { list-style: none; }
    a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
    a:hover { color: var(--copper-600); }
    ::selection { background: var(--copper-500); color: var(--white); }
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
@layer base {
    h1, .h1 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-900); margin-bottom: var(--s-5); font-style: normal; }
    h2, .h2 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-900); margin-bottom: var(--s-4); font-style: normal; }
    h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-900); margin-bottom: var(--s-3); font-style: normal; }
    h4, .h4 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--ink-900); margin-bottom: var(--s-2); font-style: normal; }
    h5, .h5 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; color: var(--ink-800); margin-bottom: var(--s-2); font-style: normal; }

    p { color: var(--ink-600); margin-bottom: var(--s-4); }
    .lead { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-600); }
    strong, b { color: var(--ink-900); font-weight: 600; }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--copper-600);
        margin-bottom: var(--s-4);
    }
    .eyebrow::before {
        content: '';
        width: 24px;
        height: 1px;
        background: var(--copper-500);
    }

    .text-muted { color: var(--ink-400); }
    .text-copper { color: var(--copper-600); }
    .text-center { text-align: center; }
}

/* ============================================
   LAYOUT
   ============================================ */
@layer layout {
    .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-6); }
    .container-narrow { max-width: var(--container-narrow); }
    .container-wide { max-width: var(--container-wide); }

    .section { padding-block: var(--s-20); }
    .section-lg { padding-block: var(--s-24); }
    .section-sm { padding-block: var(--s-16); }

    .bg-white { background: var(--white); }
    .bg-cream { background: var(--copper-50); }
    .bg-ink { background: var(--ink-900); color: var(--white); }
    .bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: var(--white); }
    .bg-ink p { color: rgba(255,255,255,0.7); }
    .bg-ink .eyebrow { color: var(--copper-300); }
    .bg-ink .eyebrow::before { background: var(--copper-300); }

    .grid { display: grid; gap: var(--s-6); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .justify-center { justify-content: center; }
    .gap-2 { gap: var(--s-2); }
    .gap-3 { gap: var(--s-3); }
    .gap-4 { gap: var(--s-4); }
    .gap-6 { gap: var(--s-6); }
    .gap-8 { gap: var(--s-8); }

    .section-head { max-width: 720px; margin-bottom: var(--s-16); }
    .section-head.center { margin-inline: auto; text-align: center; }
    .section-head.center .eyebrow { justify-content: center; }
    .section-head .lead { margin-top: var(--s-4); }

    .section-head-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--s-8);
        margin-bottom: var(--s-16);
        flex-wrap: wrap;
    }
    .section-head-row .section-head { margin-bottom: 0; }
}

/* ============================================
   BUTTONS — No black buttons anywhere
   ============================================ */
@layer components {
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-2);
        padding: 14px 26px;
        font-family: var(--font-sans);
        font-size: var(--fs-sm);
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;
        border: 1px solid transparent;
        border-radius: var(--r-md);
        cursor: pointer;
        transition: all 0.25s var(--ease-out);
        text-align: center;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px;
    }
    .btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
    .btn:hover svg { transform: translateX(3px); }

    /* PRIMARY — Copper gradient (was black) */
    .btn-primary {
        background: linear-gradient(135deg, var(--copper-500), var(--copper-600));
        color: var(--white);
        box-shadow: 0 2px 8px -2px rgba(194, 122, 63, 0.35);
    }
    .btn-primary:hover {
        background: linear-gradient(135deg, var(--copper-600), var(--copper-700));
        color: var(--white);
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -8px rgba(194, 122, 63, 0.55);
    }

    /* COPPER — Alias for primary with slightly warmer tone */
    .btn-copper {
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        color: var(--white);
        box-shadow: 0 4px 14px -4px rgba(194, 122, 63, 0.4);
    }
    .btn-copper:hover {
        background: linear-gradient(135deg, var(--copper-600), var(--copper-500));
        color: var(--white);
        transform: translateY(-1px);
        box-shadow: 0 12px 24px -8px rgba(194, 122, 63, 0.55);
    }

    /* OUTLINE — Copper border on light backgrounds */
    .btn-outline {
        background: transparent;
        color: var(--copper-700);
        border-color: var(--copper-300);
    }
    .btn-outline:hover {
        border-color: var(--copper-500);
        background: var(--copper-50);
        color: var(--copper-700);
    }

    /* OUTLINE LIGHT — For dark/hero backgrounds */
    .btn-outline-light {
        background: transparent;
        color: var(--white);
        border-color: rgba(255, 255, 255, 0.5);
    }
    .btn-outline-light:hover {
        background: var(--copper-500);
        color: var(--white);
        border-color: var(--copper-500);
    }

    .btn-lg { padding: 18px 34px; font-size: var(--fs-base); border-radius: var(--r-lg); min-height: 52px; }
    .btn-sm { padding: 10px 18px; font-size: var(--fs-xs); min-height: 40px; }

    .btn-arrow { gap: var(--s-3); }
    .btn-arrow::after { content: '→'; transition: transform 0.3s var(--ease-out); }
    .btn-arrow:hover::after { transform: translateX(4px); }
}

/* ============================================
   HEADER + NAVIGATION — Always white
   ============================================ */
@layer components {
    .site-header {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 1000;
        background: var(--white);
        border-bottom: 1px solid transparent;
        transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
        will-change: border-color, box-shadow;
    }
    .site-header.scrolled {
        border-bottom-color: var(--ink-100);
        box-shadow: 0 1px 12px rgba(15, 11, 8, 0.04);
    }
    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--header-h);
        max-width: var(--container-wide);
        margin-inline: auto;
        padding-inline: var(--s-6);
    }

    .logo { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--ink-900); }
    .logo-mark { width: 38px; height: 38px; background: linear-gradient(135deg, var(--copper-500), var(--copper-600)); color: var(--white); border-radius: var(--r-md); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; position: relative; overflow: hidden; box-shadow: 0 4px 12px -4px rgba(194, 122, 63, 0.4); }
    .logo-mark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%); opacity: 0.5; }
    .logo-mark span { position: relative; z-index: 1; }
    .logo-text em { font-style: normal; color: var(--copper-600); }

    /* Desktop nav */
    .nav { display: flex; align-items: center; gap: var(--s-8); }
    .nav-list { display: flex; align-items: center; gap: var(--s-1); }
    .nav-list > li > a { display: block; padding: 8px 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-700); border-radius: var(--r-sm); transition: all 0.2s var(--ease-out); }
    .nav-list > li > a:hover,
    .nav-list > li > a.active { color: var(--copper-700); background: var(--copper-50); }

    /* Dropdown (desktop) */
    .nav-dropdown { position: relative; }
    .nav-dropdown > a::after {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        margin-left: 6px;
        opacity: 0.5;
        transition: transform 0.2s var(--ease-out);
    }
    .nav-dropdown:hover > a::after { transform: rotate(-135deg) translateY(-2px); }

    .dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        width: 640px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        padding: var(--s-3);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-lg);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
        z-index: 100;
    }
    .nav-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .dropdown-menu a {
        display: flex;
        align-items: flex-start;
        gap: var(--s-3);
        padding: var(--s-3);
        border-radius: var(--r-md);
        transition: background 0.15s var(--ease-out);
        color: var(--ink-700);
        font-size: var(--fs-sm);
        line-height: 1.4;
    }
    .dropdown-menu a:hover { background: var(--copper-50); color: var(--copper-700); }
    .dropdown-menu .dd-icon {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-50), var(--copper-100));
        border: 1px solid var(--copper-100);
        border-radius: var(--r-sm);
        color: var(--copper-600);
        transition: all 0.2s var(--ease-out);
    }
    .dropdown-menu .dd-icon svg { width: 16px; height: 16px; stroke: currentColor; }
    .dropdown-menu a:hover .dd-icon { background: var(--copper-500); color: var(--white); border-color: var(--copper-500); }
    .dropdown-menu .dd-label { display: flex; flex-direction: column; gap: 2px; }
    .dropdown-menu .dd-label strong { font-weight: 600; color: var(--ink-900); font-size: var(--fs-sm); line-height: 1.25; }
    .dropdown-menu .dd-label span { font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.4; }
    .dropdown-menu a:hover .dd-label strong { color: var(--copper-700); }

    /* Mobile hamburger */
    .mobile-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: 12px;
        border-radius: var(--r-sm);
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1002;
    }
    .mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--ink-800); border-radius: 2px; transition: all 0.3s var(--ease-out); }
    .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* ============================================
       MOBILE NAV — Full height drawer
       ============================================ */
    @media (max-width: 900px) {
        .mobile-toggle { display: flex; }

        .nav {
            position: fixed;
            top: var(--header-h);
            left: 0;
            right: 0;
            bottom: 0;
            height: calc(100vh - var(--header-h));
            height: calc(100dvh - var(--header-h));
            background: var(--white);
            flex-direction: column;
            align-items: stretch;
            padding: var(--s-5) var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
            gap: var(--s-3);
            transform: translateX(100%);
            transition: transform 0.35s var(--ease-out);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            z-index: 1001;
            border-top: 1px solid var(--ink-100);
        }
        .nav.open { transform: translateX(0); }

        .nav-list {
            flex-direction: column;
            width: 100%;
            gap: 0;
        }
        .nav-list > li {
            width: 100%;
            border-bottom: 1px solid var(--ink-50);
        }
        .nav-list > li:last-child { border-bottom: none; }
        .nav-list > li > a {
            padding: 14px 4px;
            font-size: var(--fs-base);
            font-weight: 500;
            border-radius: 0;
            min-height: 52px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .nav-list > li > a:hover,
        .nav-list > li > a.active { background: transparent; color: var(--copper-700); }

        .nav-dropdown {
            width: 100%;
            position: static;
        }
        .nav-dropdown > a::after {
            width: 8px;
            height: 8px;
            border-right-width: 2px;
            border-bottom-width: 2px;
            margin-left: auto;
            opacity: 0.6;
        }
        .nav-dropdown.open > a::after {
            transform: rotate(-135deg) translateY(-2px);
        }
        .dropdown-menu {
            position: static;
            opacity: 1;
            visibility: visible;
            transform: none;
            width: 100%;
            grid-template-columns: 1fr;
            box-shadow: none;
            border: none;
            background: var(--copper-50);
            border-radius: var(--r-md);
            padding: var(--s-2);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s var(--ease-out), padding 0.35s var(--ease-out), margin 0.35s var(--ease-out);
            margin: 0;
        }
        .nav-dropdown.open .dropdown-menu {
            display: grid;
            max-height: 600px;
            padding: var(--s-3);
            margin: 4px 0 var(--s-3);
        }
        .dropdown-menu a {
            padding: var(--s-3);
            min-height: 44px;
            background: var(--white);
            border-radius: var(--r-sm);
            border: 1px solid transparent;
        }
        .dropdown-menu a:hover { border-color: var(--copper-200); }
        .dropdown-menu .dd-icon { width: 30px; height: 30px; }
        .dropdown-menu .dd-icon svg { width: 14px; height: 14px; }
        .dropdown-menu .dd-label span { display: none; }

        .nav > .btn {
            width: 100%;
            margin-top: var(--s-3);
            padding: 16px;
            font-size: var(--fs-base);
            min-height: 52px;
        }
    }
}

/* ============================================
   PAGE HERO — Inner pages
   ============================================ */
@layer components {
    .page-hero {
        position: relative;
        padding: calc(var(--header-h) + var(--s-16)) 0 var(--s-16);
        background: linear-gradient(160deg, var(--white) 0%, var(--copper-50) 100%);
        text-align: center;
        overflow: hidden;
    }
    .page-hero > .container { position: relative; z-index: 1; }
    .page-hero h1 { margin-bottom: var(--s-4); }
    .page-hero p { max-width: 640px; margin: 0 auto; font-size: var(--fs-lg); color: var(--ink-600); }

    .breadcrumb { display: flex; justify-content: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--copper-600); margin-bottom: var(--s-5); flex-wrap: wrap; }
    .breadcrumb a { color: var(--ink-600); }
    .breadcrumb a:hover { color: var(--copper-600); }
    .breadcrumb .sep { color: var(--ink-300); }

    .page-hero--image { background: var(--ink-900); position: relative; isolation: isolate; }
    .page-hero--image::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../images/about_us_supporting_image.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        opacity: 0.45;
        z-index: 0;
    }
    .page-hero--image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 11, 8, 0.6) 0%, rgba(15, 11, 8, 0.4) 50%, rgba(15, 11, 8, 0.7) 100%);
        z-index: 1;
        pointer-events: none;
    }
    .page-hero--image > .container { position: relative; z-index: 2; }
    .page-hero--image .breadcrumb,
    .page-hero--image .breadcrumb a,
    .page-hero--image .breadcrumb .sep { color: rgba(255, 255, 255, 0.8); }
    .page-hero--image .breadcrumb a:hover { color: var(--copper-300); }
    .page-hero--image .eyebrow { color: var(--copper-300); }
    .page-hero--image .eyebrow::before { background: var(--copper-300); }
    .page-hero--image h1 { color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
    .page-hero--image .lead,
    .page-hero--image p { color: rgba(255, 255, 255, 0.9); }
    .page-hero--image .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
    .page-hero--image .btn-outline:hover { background: var(--copper-500); color: var(--white); border-color: var(--copper-500); }
}

/* ============================================
   HERO (Homepage)
   ============================================ */
@layer components {
    .hero { position: relative; padding-top: calc(var(--header-h) + var(--s-16)); padding-bottom: var(--s-20); overflow: hidden; background: var(--white); content-visibility: auto; contain-intrinsic-size: 800px; }
    .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
    .hero-bg::before { content: ''; position: absolute; top: -20%; right: -5%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(194, 122, 63, 0.10) 0%, transparent 65%); border-radius: 50%; animation: floaty 22s ease-in-out infinite; }
    .hero-bg::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(230, 188, 148, 0.14) 0%, transparent 65%); border-radius: 50%; animation: floaty 28s ease-in-out infinite reverse; }
    @keyframes floaty { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.06); } }

    .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-20); align-items: center; }

    .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px 6px 6px; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-700); margin-bottom: var(--s-6); box-shadow: var(--sh-sm); }
    .hero-eyebrow .pill { padding: 3px 10px; background: var(--copper-500); color: var(--white); border-radius: var(--r-full); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; }

    .hero h1 { margin-bottom: var(--s-6); }
    .hero h1 .accent { color: var(--copper-600); font-style: normal; font-weight: 700; }
    .hero .lead { font-size: var(--fs-md); max-width: 540px; margin-bottom: var(--s-8); }

    .hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
    .hero-trust { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-4); font-size: var(--fs-xs); color: var(--ink-500); }
    .hero-trust .avatars { display: flex; }
    .hero-trust .avatars span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--white); background: linear-gradient(135deg, var(--copper-400), var(--copper-600)); margin-left: -8px; display: grid; place-items: center; color: var(--white); font-size: 0.7rem; font-weight: 600; }
    .hero-trust .avatars span:first-child { margin-left: 0; }

    .hero-card { position: relative; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--sh-xl); }
    .hero-card::before { content: ''; position: absolute; inset: -1px; border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(194, 122, 63, 0.3), transparent 40%); z-index: -1; opacity: 0.6; }
    .hero-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink-100); margin-bottom: var(--s-4); }
    .hero-card-head h4 { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin: 0; }
    .hero-card-head .status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--success); font-weight: 500; }
    .hero-card-head .status::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(47, 122, 62, 0.15); animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(47, 122, 62, 0.15); } 50% { box-shadow: 0 0 0 6px rgba(47, 122, 62, 0.05); } }

    .hero-card-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
    .hero-stat { padding: var(--s-5); background: linear-gradient(180deg, var(--copper-50) 0%, var(--white) 100%); border: 1px solid var(--ink-100); border-radius: var(--r-md); transition: all 0.3s var(--ease-out); }
    .hero-stat:hover { border-color: var(--copper-300); transform: translateY(-2px); box-shadow: var(--sh-md); }
    .hero-stat .num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ink-900); display: block; margin-bottom: 6px; }
    .hero-stat .num .unit { font-size: 1.1rem; color: var(--copper-500); }
    .hero-stat .lbl { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

    .hero-card-img { margin-top: var(--s-4); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; }
    .hero-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
    .hero-card-img:hover img { transform: scale(1.05); }

    /* Hero slider — cross-fade */
    .hero-slider { margin-top: var(--s-4); background: var(--ink-900); border-radius: var(--r-md); color: var(--white); overflow: hidden; position: relative; }
    .hero-slider-track { position: relative; min-height: 100px; overflow: hidden; }
    .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease-out), visibility 0.6s; pointer-events: none; }
    .hero-slide.active { opacity: 1; visibility: visible; position: relative; pointer-events: auto; }
    .hero-slide-icon { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(194, 122, 63, 0.15); border: 1px solid rgba(194, 122, 63, 0.3); border-radius: var(--r-sm); color: var(--copper-300); transition: all 0.3s var(--ease-out); }
    .hero-slide.active .hero-slide-icon { background: rgba(194, 122, 63, 0.25); border-color: rgba(194, 122, 63, 0.5); }
    .hero-slide-content { flex: 1; min-width: 0; }
    .hero-slide-content h5 { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; color: var(--white); margin: 0 0 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hero-slide-content p { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .hero-slider-controls { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-5); border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); }
    .hero-slider-dots { display: flex; gap: 6px; }
    .hero-slider-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: all 0.3s var(--ease-out); cursor: pointer; border: none; padding: 0; }
    .hero-slider-dots button.active { background: var(--copper-400); width: 24px; border-radius: 4px; }
    .hero-slider-dots button:hover { background: rgba(255, 255, 255, 0.4); }
    .hero-slider-arrows { display: flex; gap: 6px; }
    .hero-slider-arrows button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); transition: all 0.2s var(--ease-out); cursor: pointer; border: none; }
    .hero-slider-arrows button:hover { background: var(--copper-500); color: var(--white); }
    .hero-slider-arrows button:focus-visible { outline: 2px solid var(--copper-400); outline-offset: 2px; }
    .hero-slider-arrows button svg { width: 14px; height: 14px; stroke: currentColor; }
}

/* ============================================
   IMAGERY SYSTEM
   ============================================ */
@layer components {
    .img-frame { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--copper-50); aspect-ratio: 4 / 3; box-shadow: var(--sh-lg); }
    .img-frame.tall { aspect-ratio: 4 / 5; }
    .img-frame.wide { aspect-ratio: 16 / 10; }
    .img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-out); }
    .img-frame:hover img { transform: scale(1.04); }

    .img-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xl); aspect-ratio: 21 / 9; }
    .img-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
    .img-hero:hover img { transform: scale(1.03); }

    .img-badge { position: absolute; bottom: var(--s-6); left: var(--s-6); right: var(--s-6); padding: var(--s-5) var(--s-6); background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--r-lg); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); box-shadow: var(--sh-lg); z-index: 3; flex-wrap: wrap; }
    .img-badge-title { font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 0.75vw, 1.5rem); font-weight: 700; color: var(--ink-900); line-height: 1.15; letter-spacing: -0.02em; }
    .img-badge-sub { font-size: var(--fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin-top: 6px; }

    .about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ============================================
   LOGO STRIP
   ============================================ */
@layer components {
    .logo-strip { padding-block: var(--s-10); background: var(--white); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
    .logo-strip-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); text-align: center; margin-bottom: var(--s-6); }
    .logo-strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: center; justify-items: center; max-width: 960px; margin-inline: auto; }
    .logo-strip-item { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-400); transition: color 0.3s var(--ease-out); }
    .logo-strip-item:hover { color: var(--ink-800); }
    .logo-strip-item strong { color: var(--ink-700); }
}

/* ============================================
   SERVICE CARDS
   ============================================ */
@layer components {
    .services-uniform,
    .services-bento {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s-5);
        align-items: stretch;
    }

    .services-uniform .svc-card,
    .services-bento .svc-card {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        overflow: visible;
        transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
        height: 100%;
        position: relative;
    }
    .services-uniform .svc-card:hover,
    .services-bento .svc-card:hover {
        border-color: var(--copper-300);
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
    }

    .services-uniform .svc-card .svc-img,
    .services-bento .svc-card .svc-img {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: var(--copper-50);
        flex-shrink: 0;
        border-top-left-radius: var(--r-lg);
        border-top-right-radius: var(--r-lg);
    }
    .services-uniform .svc-card .svc-img img,
    .services-bento .svc-card .svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-out); }
    .services-uniform .svc-card:hover .svc-img img,
    .services-bento .svc-card:hover .svc-img img { transform: scale(1.05); }
    .services-uniform .svc-card .svc-img::after,
    .services-bento .svc-card .svc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 11, 8, 0) 45%, rgba(15, 11, 8, 0.35) 100%); pointer-events: none; z-index: 1; }

    .services-uniform .svc-card .svc-body > .svc-icon-float,
    .services-bento .svc-card .svc-body > .svc-icon-float {
        position: absolute;
        top: -24px;
        left: var(--s-5);
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        background: var(--white);
        border: 1px solid var(--copper-200);
        border-radius: var(--r-md);
        color: var(--copper-600);
        z-index: 5;
        box-shadow: var(--sh-md);
        transition: all 0.3s var(--ease-spring);
    }
    .services-uniform .svc-card .svc-body > .svc-icon-float svg,
    .services-bento .svc-card .svc-body > .svc-icon-float svg { width: 22px; height: 22px; }
    .services-uniform .svc-card:hover .svc-body > .svc-icon-float,
    .services-bento .svc-card:hover .svc-body > .svc-icon-float { background: var(--copper-500); color: var(--white); border-color: var(--copper-500); transform: scale(1.08) rotate(-6deg); }

    .services-uniform .svc-card .svc-body,
    .services-bento .svc-card .svc-body {
        padding: var(--s-6);
        padding-top: calc(var(--s-6) + 28px);
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        background: var(--white);
        border-bottom-left-radius: var(--r-lg);
        border-bottom-right-radius: var(--r-lg);
        position: relative;
    }

    .services-uniform .svc-card h3,
    .services-bento .svc-card h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-md);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.02em;
        color: var(--ink-900);
        margin-bottom: var(--s-3);
        transition: color 0.2s var(--ease-out);
        min-height: 2.5em;
    }
    .services-uniform .svc-card:hover h3,
    .services-bento .svc-card:hover h3 { color: var(--copper-600); }

    .services-uniform .svc-card p,
    .services-bento .svc-card p { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; flex: 1 1 auto; margin-bottom: var(--s-5); }

    .services-uniform .svc-card .svc-arrow,
    .services-bento .svc-card .svc-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--copper-600); align-self: flex-start; margin-top: auto; }
    .services-uniform .svc-card .svc-arrow::after,
    .services-bento .svc-card .svc-arrow::after { content: '→'; transition: transform 0.3s var(--ease-out); }
    .services-uniform .svc-card:hover .svc-arrow::after,
    .services-bento .svc-card:hover .svc-arrow::after { transform: translateX(5px); }
}

/* ============================================
   STATS BAND
   ============================================ */
@layer components {
    .stats-band { padding-block: var(--s-16); background: var(--ink-900); color: var(--white); position: relative; overflow: hidden; }
    .stats-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 10% 50%, rgba(194, 122, 63, 0.12) 0%, transparent 45%), radial-gradient(circle at 90% 20%, rgba(230, 188, 148, 0.08) 0%, transparent 45%); pointer-events: none; }
    .stats-band .container { position: relative; z-index: 1; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
    .stat-item { padding: var(--s-5) 0; border-top: 1px solid rgba(255,255,255,0.1); position: relative; }
    .stat-item::before { content: ''; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--copper-400); }
    .stat-item .num { font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--white); margin-bottom: var(--s-3); display: block; }
    .stat-item .num .accent { color: var(--copper-400); }
    .stat-item .lbl { font-size: var(--fs-sm); color: rgba(255,255,255,0.55); line-height: 1.5; max-width: 220px; }
}

/* ============================================
   PROCESS
   ============================================ */
@layer components {
    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); position: relative; }
    .process-grid::before { content: ''; position: absolute; top: 36px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, var(--ink-200), transparent); z-index: 0; }
    .process-step { position: relative; z-index: 1; text-align: center; }
    .process-num { width: 72px; height: 72px; margin: 0 auto var(--s-5); display: grid; place-items: center; background: var(--white); border: 1px solid var(--ink-200); border-radius: 50%; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink-900); transition: all 0.3s var(--ease-spring); }
    .process-step:hover .process-num { background: var(--copper-500); color: var(--white); border-color: var(--copper-500); transform: scale(1.08); }
    .process-step h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
    .process-step p { font-size: var(--fs-sm); color: var(--ink-500); max-width: 240px; margin-inline: auto; }
}

/* ============================================
   WHY LUMINOUS X
   ============================================ */
@layer components {
    .why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
    .why-card { padding: var(--s-6); background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg); transition: all 0.3s var(--ease-out); display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; min-height: 200px; }
    .why-card::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--copper-500); transition: width 0.3s var(--ease-out); }
    .why-card:hover { border-color: var(--copper-300); transform: translateY(-4px); box-shadow: var(--sh-md); }
    .why-card:hover::before { width: 100%; }
    .why-card .why-num { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-400); letter-spacing: 0.08em; margin-bottom: var(--s-4); display: block; }
    .why-card h4 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; margin-bottom: var(--s-2); line-height: 1.3; font-style: normal; }
    .why-card p { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; margin: 0; }
}

/* ============================================
   OUR VALUES
   ============================================ */
@layer components {
    .values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
    .value-card { padding: var(--s-6); background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg); transition: all 0.3s var(--ease-out); display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; min-height: 220px; }
    .value-card::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--copper-500); transition: width 0.3s var(--ease-out); }
    .value-card:hover { border-color: var(--copper-300); transform: translateY(-4px); box-shadow: var(--sh-md); }
    .value-card:hover::before { width: 100%; }
    .value-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--copper-50); border: 1px solid var(--copper-200); border-radius: var(--r-md); color: var(--copper-600); margin-bottom: var(--s-5); transition: all 0.3s var(--ease-spring); flex-shrink: 0; }
    .value-icon svg { width: 22px; height: 22px; }
    .value-card:hover .value-icon { background: var(--copper-500); color: var(--white); border-color: var(--copper-500); transform: rotate(-6deg) scale(1.05); }
    .value-card h4 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; margin-bottom: var(--s-2); line-height: 1.3; font-style: normal; }
    .value-card p { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; margin: 0; flex: 1; }
}

/* ============================================
   INDUSTRIES MARQUEE
   ============================================ */
@layer components {
    .industries-wrapper { overflow: hidden; position: relative; }
    .industries-wrapper::before,
    .industries-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
    .industries-wrapper::before { left: 0; background: linear-gradient(90deg, var(--copper-50), transparent); }
    .industries-wrapper::after { right: 0; background: linear-gradient(270deg, var(--copper-50), transparent); }
    .industries-track { display: flex; gap: var(--s-5); padding-block: var(--s-4); animation: scroll-x 40s linear infinite; width: max-content; }
    .industries-track:hover { animation-play-state: paused; }
    @keyframes scroll-x { to { transform: translateX(-50%); } }
    .ind-card { flex-shrink: 0; width: 280px; padding: var(--s-6); background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg); transition: all 0.3s var(--ease-out); }
    .ind-card:hover { border-color: var(--copper-300); transform: translateY(-4px); box-shadow: var(--sh-md); }
    .ind-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--copper-50); border-radius: var(--r-md); color: var(--copper-600); margin-bottom: var(--s-4); }
    .ind-icon svg { width: 20px; height: 20px; }
    .ind-card h4 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
    .ind-card p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
}

/* ============================================
   ABOUT — Editorial Two-Column Layout
   ============================================ */
@layer components {
    .about-hero {
        padding-block: var(--s-20);
        background: var(--white);
        position: relative;
        overflow: hidden;
    }

    .about-hero::before {
        content: '';
        position: absolute;
        top: 20%;
        right: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(194, 122, 63, 0.06) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .about-hero .container { position: relative; z-index: 1; }

    .about-intro {
        max-width: 720px;
        margin-bottom: var(--s-16);
    }

    .about-intro h2 {
        font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin-bottom: var(--s-4);
        color: var(--ink-900);
    }

    .about-intro h2::after {
        content: '.';
        color: var(--copper-500);
        display: inline-block;
        animation: dotPulse 3s ease-in-out infinite;
    }

    @keyframes dotPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    .about-intro .lead {
        font-size: var(--fs-lg);
        color: var(--ink-600);
        line-height: 1.5;
        max-width: 560px;
    }

    .about-editorial {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--s-12);
        align-items: start;
        margin-bottom: var(--s-16);
    }

    .about-visual {
        position: relative;
        padding: 0 var(--s-6) var(--s-12) 0;
    }

    .about-image {
        position: relative;
        aspect-ratio: 4 / 5;
        border-radius: var(--r-xl);
        overflow: hidden;
        box-shadow: 0 40px 80px -30px rgba(15, 11, 8, 0.25);
        background: var(--copper-50);
    }

    .about-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 55%, rgba(15, 11, 8, 0.25) 100%);
        pointer-events: none;
        z-index: 1;
    }

    .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1.2s var(--ease-out);
    }

    .about-visual:hover .about-image img {
        transform: scale(1.04);
    }

    .hover-cards {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 3;
    }

    .hover-card {
        position: absolute;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-md);
        padding: var(--s-4) var(--s-5);
        box-shadow: 0 20px 40px -12px rgba(15, 11, 8, 0.18);
        pointer-events: auto;
        transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
        min-width: 130px;
        text-align: center;
    }

    .hover-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 56px -16px rgba(194, 122, 63, 0.35);
    }

    .hover-card .hc-num {
        display: block;
        font-family: var(--font-display);
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--copper-600);
        margin-bottom: 4px;
    }

    .hover-card .hc-lbl {
        display: block;
        font-size: var(--fs-xs);
        color: var(--ink-500);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
    }

    .hover-card--top {
        top: 15%;
        left: -30px;
        animation: floatCard 6s ease-in-out infinite;
    }

    .hover-card--bottom {
        bottom: 15%;
        right: -30px;
        animation: floatCard 6s ease-in-out infinite reverse;
        animation-delay: 1s;
    }

    @keyframes floatCard {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    .about-year-badge {
        position: absolute;
        bottom: 0;
        left: -20px;
        background: linear-gradient(135deg, var(--copper-600), var(--copper-500));
        color: var(--white);
        padding: var(--s-4) var(--s-5);
        border-radius: var(--r-lg);
        box-shadow: 0 24px 48px -16px rgba(194, 122, 63, 0.4);
        text-align: center;
        z-index: 4;
        border: 4px solid var(--white);
        min-width: 100px;
    }

    .about-year-badge .year-num {
        display: block;
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--white);
    }

    .about-year-badge .year-lbl {
        display: block;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        opacity: 0.85;
        margin-top: 4px;
        font-weight: 600;
    }

    .about-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-5);
        align-self: stretch;
    }

    .about-card {
        padding: var(--s-6);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 220px;
    }

    .about-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--copper-500), var(--copper-300));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s var(--ease-out);
    }

    .about-card:hover {
        transform: translateY(-6px);
        border-color: var(--copper-300);
        box-shadow: 0 24px 48px -16px rgba(15, 11, 8, 0.12);
    }

    .about-card:hover::before {
        transform: scaleX(1);
    }

    .card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--s-4);
    }

    .card-num {
        font-family: var(--font-display);
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--copper-200);
        transition: color 0.3s var(--ease-out);
    }

    .about-card:hover .card-num {
        color: var(--copper-500);
    }

    .card-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-50), var(--copper-100));
        border: 1px solid var(--copper-200);
        border-radius: var(--r-sm);
        color: var(--copper-600);
        transition: all 0.4s var(--ease-spring);
        flex-shrink: 0;
    }

    .about-card:hover .card-icon {
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        color: var(--white);
        border-color: var(--copper-500);
        transform: rotate(-8deg) scale(1.05);
        box-shadow: 0 8px 20px -6px rgba(194, 122, 63, 0.4);
    }

    .about-card h3 {
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--ink-900);
        margin-bottom: var(--s-2);
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    .about-card p {
        font-size: var(--fs-sm);
        line-height: 1.65;
        color: var(--ink-600);
        margin: 0;
        flex: 1;
    }

    .about-card--quote {
        background: linear-gradient(135deg, var(--copper-800) 0%, var(--copper-700) 100%);
        border-color: var(--copper-800);
        color: var(--white);
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        min-height: 220px;
    }

    .about-card--quote::before {
        background: linear-gradient(90deg, var(--copper-400), var(--copper-500));
    }

    .about-card--quote:hover {
        border-color: var(--copper-500);
        box-shadow: 0 24px 48px -16px rgba(194, 122, 63, 0.35);
    }

    .about-card--quote .quote-mark {
        color: var(--copper-400);
        opacity: 0.6;
        flex-shrink: 0;
    }

    .about-card--quote blockquote {
        font-family: var(--font-display);
        font-size: var(--fs-base);
        line-height: 1.45;
        letter-spacing: -0.01em;
        font-weight: 500;
        color: var(--white);
        margin: 0;
        font-style: normal;
        flex: 1;
    }

    .quote-author {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        padding-top: var(--s-3);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin-top: auto;
    }

    .quote-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        color: var(--white);
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.8rem;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .quote-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }

    .quote-info strong {
        font-size: var(--fs-xs);
        color: var(--white);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quote-info span {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.7);
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .about-cta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--s-6);
        padding: var(--s-6) var(--s-8);
        background: var(--copper-50);
        border: 1px solid var(--copper-100);
        border-radius: var(--r-lg);
        flex-wrap: wrap;
    }

    .about-cta p {
        margin: 0;
        font-size: var(--fs-base);
        color: var(--ink-700);
        font-weight: 500;
    }

    .about-link {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        font-weight: 600;
        font-size: var(--fs-sm);
        color: var(--copper-600);
        padding-bottom: 3px;
        border-bottom: 1.5px solid transparent;
        white-space: nowrap;
        transition: all 0.3s var(--ease-out);
    }

    .about-link:hover {
        color: var(--copper-700);
        border-bottom-color: var(--copper-500);
    }

    .about-link svg {
        transition: transform 0.3s var(--ease-out);
    }

    .about-link:hover svg {
        transform: translateX(4px);
    }
}

/* ============================================
   SHOWCASE CAROUSEL
   ============================================ */
@layer components {
    .showcase-carousel-section {
        padding-block: var(--s-20) 0;
        background: var(--ink-900);
        position: relative;
        overflow: hidden;
    }

    .showcase-carousel-section .section-head h2 { color: var(--white); }
    .showcase-carousel-section .section-head .lead { color: rgba(255, 255, 255, 0.7); }
    .showcase-carousel-section .eyebrow { color: var(--copper-300); }
    .showcase-carousel-section .eyebrow::before { background: var(--copper-300); }

    .showcase-carousel {
        position: relative;
        width: 100%;
        max-width: var(--container-wide);
        margin-inline: auto;
        border-radius: 0;
        overflow: hidden;
        box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
        isolation: isolate;
    }

    .showcase-progress {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        z-index: 10;
    }

    .showcase-progress-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--copper-500), var(--copper-300));
        transition: width 0.1s linear;
        border-radius: 0 2px 2px 0;
    }

    .showcase-track {
        position: relative;
        aspect-ratio: 16 / 9;
        min-height: 500px;
    }

    .showcase-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s var(--ease-out), visibility 0.8s;
        pointer-events: none;
    }

    .showcase-slide.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .showcase-image {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .showcase-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.08);
        transition: transform 8s var(--ease-out);
    }

    .showcase-slide.active .showcase-image img {
        transform: scale(1);
    }

    .showcase-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            105deg,
            rgba(15, 11, 8, 0.92) 0%,
            rgba(15, 11, 8, 0.78) 35%,
            rgba(15, 11, 8, 0.45) 60%,
            rgba(15, 11, 8, 0.15) 100%
        );
        z-index: 1;
    }

    .showcase-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        align-items: center;
        padding: var(--s-16) var(--s-12);
    }

    .showcase-inner {
        max-width: 620px;
    }

    .showcase-tag {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        padding: 6px 14px;
        background: rgba(194, 122, 63, 0.2);
        border: 1px solid rgba(194, 122, 63, 0.4);
        border-radius: var(--r-full);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--copper-300);
        margin-bottom: var(--s-5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .showcase-tag::before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--copper-400);
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(194, 122, 63, 0.25);
        animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {
        0%, 100% { box-shadow: 0 0 0 3px rgba(194, 122, 63, 0.25); }
        50% { box-shadow: 0 0 0 6px rgba(194, 122, 63, 0.1); }
    }

    .showcase-inner h3 {
        font-family: var(--font-display);
        font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--white);
        margin-bottom: var(--s-5);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .showcase-inner p {
        font-size: var(--fs-md);
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: var(--s-6);
        max-width: 540px;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    }

    .showcase-stats {
        display: flex;
        gap: var(--s-8);
        margin-bottom: var(--s-8);
        flex-wrap: wrap;
    }

    .showcase-stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .showcase-stat .stat-value {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--copper-300);
        display: block;
    }

    .showcase-stat .stat-label {
        font-size: var(--fs-xs);
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 500;
    }

    .showcase-inner .btn {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .showcase-nav {
        position: absolute;
        bottom: var(--s-8);
        right: var(--s-8);
        display: flex;
        gap: var(--s-2);
        z-index: 5;
    }

    .showcase-nav-btn {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        color: var(--white);
        cursor: pointer;
        transition: all 0.3s var(--ease-out);
    }

    .showcase-nav-btn:hover {
        background: var(--copper-500);
        border-color: var(--copper-500);
        transform: scale(1.08);
        box-shadow: 0 8px 24px -8px rgba(194, 122, 63, 0.5);
    }

    .showcase-nav-btn:active { transform: scale(0.96); }
    .showcase-nav-btn:focus-visible { outline: 2px solid var(--copper-400); outline-offset: 3px; }
    .showcase-nav-btn svg { width: 18px; height: 18px; }

    .showcase-dots {
        position: absolute;
        bottom: var(--s-8);
        left: var(--s-12);
        display: flex;
        gap: var(--s-3);
        z-index: 5;
    }

    .showcase-dots button {
        position: relative;
        width: 32px;
        height: 4px;
        background: rgba(255, 255, 255, 0.25);
        border: none;
        border-radius: 2px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s var(--ease-out);
        padding: 0;
    }

    .showcase-dots button:hover { background: rgba(255, 255, 255, 0.45); }
    .showcase-dots button.active { width: 64px; background: rgba(255, 255, 255, 0.15); }

    .showcase-dots button .dot-progress {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--copper-400), var(--copper-300));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.1s linear;
        border-radius: 2px;
    }

    .showcase-dots button.active .dot-progress { transform: scaleX(1); }

    .showcase-counter {
        position: absolute;
        top: var(--s-8);
        right: var(--s-8);
        display: flex;
        align-items: baseline;
        gap: var(--s-2);
        font-family: var(--font-display);
        color: var(--white);
        z-index: 5;
    }

    .showcase-counter .current {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--copper-300);
    }

    .showcase-counter .separator { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.4); }
    .showcase-counter .total { font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, 0.5); }
}

/* ============================================
   CTA FINAL
   ============================================ */
@layer components {
    .cta-final { padding: var(--s-20) 0; background: var(--copper-800); position: relative; overflow: hidden; text-align: center; }
    .cta-final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%); z-index: 1; pointer-events: none; }
    .cta-final-inner { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
    .cta-final h2 { color: var(--white); font-size: var(--fs-2xl); margin-bottom: var(--s-5); }
    .cta-final p { color: rgba(255,255,255,0.85); font-size: var(--fs-md); margin-bottom: var(--s-8); }
    .cta-final-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

    .cta-final--image { position: relative; isolation: isolate; }
    .cta-final--image::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../images/managed_it_services.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        z-index: 0;
    }
    .cta-final--image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(61, 36, 18, 0.8) 0%, rgba(61, 36, 18, 0.65) 50%, rgba(61, 36, 18, 0.8) 100%);
        z-index: 1;
        pointer-events: none;
    }
    .cta-final--image > .container { position: relative; z-index: 2; }
}

/* ============================================
   FOOTER
   ============================================ */
@layer components {
    .site-footer { background: var(--ink-900); color: rgba(255,255,255,0.65); padding-top: var(--s-16); position: relative; }
    .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--copper-500), transparent); opacity: 0.4; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: var(--s-10); padding-bottom: var(--s-10); border-bottom: 1px solid rgba(255,255,255,0.08); }
    .footer-brand .logo { color: var(--white); margin-bottom: var(--s-5); }
    .footer-brand p { color: rgba(255,255,255,0.55); font-size: var(--fs-sm); line-height: 1.7; max-width: 340px; margin-bottom: var(--s-5); }
    .footer-brand-social { display: flex; gap: var(--s-2); }
    .footer-brand-social a { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-md); color: rgba(255,255,255,0.7); transition: all 0.25s var(--ease-out); }
    .footer-brand-social a:hover { background: var(--copper-500); border-color: var(--copper-500); color: var(--white); transform: translateY(-2px); }
    .footer-brand-social svg { width: 16px; height: 16px; }
    .footer-col h5 { color: var(--white); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--s-5); font-family: var(--font-mono); }
    .footer-col ul { display: grid; gap: var(--s-3); }
    .footer-col ul li { margin: 0; }
    .footer-col ul a { color: rgba(255,255,255,0.6); font-size: var(--fs-sm); transition: color 0.2s var(--ease-out); display: inline-block; }
    .footer-col ul a:hover { color: var(--copper-300); transform: translateX(3px); }
    .footer-contact p { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--s-4); line-height: 1.6; align-items: flex-start; }
    .footer-contact p:last-child { margin-bottom: 0; }
    .footer-contact .icon { width: 18px; height: 18px; color: var(--copper-400); flex-shrink: 0; margin-top: 3px; display: inline-flex; align-items: center; justify-content: center; }
    .footer-contact .icon svg { width: 16px; height: 16px; stroke: currentColor; }
    .footer-contact a { color: rgba(255,255,255,0.6); }
    .footer-contact a:hover { color: var(--copper-300); }
    .footer-bottom { padding: var(--s-6) 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-xs); color: rgba(255,255,255,0.4); }
    .footer-bottom p { margin: 0; color: inherit; }
    .footer-bottom-links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
    .footer-bottom a { color: rgba(255,255,255,0.5); }
    .footer-bottom a:hover { color: var(--copper-300); }
}

/* ============================================
   FORMS
   ============================================ */
@layer components {
    .form-group { margin-bottom: var(--s-5); position: relative; }
    .form-group label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s-2); color: var(--ink-800); }
    .form-group label .required { color: var(--error); margin-left: 2px; }
    .form-control { width: 100%; padding: var(--s-3) var(--s-4); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--ink-900); background: var(--white); border: 1.5px solid var(--ink-100); border-radius: var(--r-sm); transition: all 0.2s var(--ease-out); outline: none; min-height: 48px; }
    .form-control:hover { border-color: var(--ink-200); }
    .form-control:focus { border-color: var(--copper-500); box-shadow: 0 0 0 4px rgba(194, 122, 63, 0.12); }
    .form-control.error { border-color: var(--error); background-color: var(--error-bg); }
    .form-control::placeholder { color: var(--ink-300); }
    textarea.form-control { min-height: 150px; resize: vertical; line-height: 1.6; }
    select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B5D4F' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-4) center; padding-right: var(--s-10); cursor: pointer; }
    .error-message { display: none; font-size: var(--fs-xs); color: var(--error); margin-top: var(--s-1); font-weight: 500; }
    .error-message.visible { display: block; animation: shake 0.3s var(--ease-out); }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
    .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none; }
}

/* ============================================
   ALERTS
   ============================================ */
@layer components {
    .alert { padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); margin-bottom: var(--s-6); font-size: var(--fs-sm); font-weight: 500; display: none; border-left: 4px solid; }
    .alert.visible { display: block; animation: slideDown 0.4s var(--ease-out); }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    .alert-success { background: var(--success-bg); color: #1B5E20; border-color: var(--success); }
    .alert-error { background: var(--error-bg); color: #B71C1C; border-color: var(--error); }
}

/* ============================================
   SERVICE DETAIL PAGE — v2 Enhanced
   ============================================ */
@layer components {
    .svc-hero-split {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: var(--s-12);
        align-items: center;
    }
    .svc-hero-content { text-align: left; }
    .svc-hero-content .breadcrumb {
        justify-content: flex-start;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: var(--s-4);
    }
    .svc-hero-content .breadcrumb a { color: rgba(255, 255, 255, 0.75); }
    .svc-hero-content .breadcrumb a:hover { color: var(--copper-300); }
    .svc-hero-content .breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }

    .svc-hero-tag {
        display: inline-flex;
        align-items: center;
        gap: var(--s-3);
        padding: 8px 16px 8px 8px;
        background: rgba(194, 122, 63, 0.15);
        border: 1px solid rgba(194, 122, 63, 0.35);
        border-radius: var(--r-full);
        margin-bottom: var(--s-5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .svc-hero-tag .svc-hero-tag-icon {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        background: var(--copper-500);
        border-radius: 50%;
        color: var(--white);
        flex-shrink: 0;
        box-shadow: 0 4px 12px -4px rgba(194, 122, 63, 0.5);
    }
    .svc-hero-tag .svc-hero-tag-icon svg { width: 18px; height: 18px; }
    .svc-hero-tag .svc-hero-tag-label {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--copper-300);
    }

    .svc-hero-content h1 {
        color: var(--white);
        font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin-bottom: var(--s-5);
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    }
    .svc-hero-content .lead {
        color: rgba(255, 255, 255, 0.88);
        font-size: var(--fs-md);
        max-width: 560px;
        margin-bottom: var(--s-8);
    }

    .svc-hero-card {
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-xl);
        padding: var(--s-6);
        box-shadow: 0 32px 64px -20px rgba(0, 0, 0, 0.5);
    }
    .svc-hero-card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: var(--s-4);
        margin-bottom: var(--s-4);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .svc-hero-card-head .label {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }
    .svc-hero-card-head .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-xs);
        color: var(--copper-300);
        font-weight: 600;
    }
    .svc-hero-card-head .status::before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--copper-400);
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(194, 122, 63, 0.25);
        animation: pulse 2s infinite;
    }

    .svc-hero-facts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-4);
    }
    .svc-hero-fact {
        padding: var(--s-3);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--r-md);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .svc-hero-fact .fact-value {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--copper-300);
    }
    .svc-hero-fact .fact-label {
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.55);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 500;
    }

    .svc-stats-band {
        background: var(--copper-800);
        color: var(--white);
        padding-block: var(--s-10);
        position: relative;
        overflow: hidden;
    }
    .svc-stats-band::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
        pointer-events: none;
    }
    .svc-stats-band .container { position: relative; z-index: 1; }
    .svc-stats-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--s-6);
    }
    .svc-stat {
        text-align: center;
        padding: var(--s-4) var(--s-3);
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }
    .svc-stat:last-child { border-right: none; }
    .svc-stat .num {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--white);
        margin-bottom: var(--s-2);
    }
    .svc-stat .num .accent { color: var(--copper-300); }
    .svc-stat .lbl {
        font-size: var(--fs-xs);
        color: rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 500;
    }

    .svc-section { margin-top: var(--s-16); }
    .svc-section:first-child { margin-top: 0; }

    .svc-deliverables {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-3);
        margin-top: var(--s-5);
    }
    .svc-deliverable {
        display: flex;
        align-items: flex-start;
        gap: var(--s-3);
        padding: var(--s-4) var(--s-5);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-md);
        transition: all 0.3s var(--ease-out);
        font-size: var(--fs-sm);
        line-height: 1.5;
        color: var(--ink-700);
    }
    .svc-deliverable:hover {
        border-color: var(--copper-300);
        background: var(--copper-50);
        transform: translateX(4px);
        box-shadow: var(--sh-sm);
    }
    .svc-deliverable .check {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        background: var(--copper-500);
        border-radius: 50%;
        color: var(--white);
        margin-top: 1px;
        box-shadow: 0 4px 10px -3px rgba(194, 122, 63, 0.4);
    }
    .svc-deliverable .check svg { width: 12px; height: 12px; }

    .svc-timeline {
        display: grid;
        gap: var(--s-4);
        margin-top: var(--s-6);
        position: relative;
    }
    .svc-timeline-step {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: var(--s-5);
        padding: var(--s-5);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        transition: all 0.3s var(--ease-out);
        align-items: start;
        position: relative;
    }
    .svc-timeline-step:hover {
        border-color: var(--copper-300);
        transform: translateX(6px);
        box-shadow: var(--sh-md);
    }
    .svc-timeline-step .step-badge {
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-50), var(--copper-100));
        border: 1px solid var(--copper-200);
        border-radius: var(--r-md);
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--copper-600);
        letter-spacing: -0.03em;
        flex-shrink: 0;
        transition: all 0.3s var(--ease-spring);
    }
    .svc-timeline-step:hover .step-badge {
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        color: var(--white);
        border-color: var(--copper-500);
        transform: rotate(-6deg) scale(1.06);
        box-shadow: 0 8px 20px -6px rgba(194, 122, 63, 0.45);
    }
    .svc-timeline-step h4 {
        font-size: var(--fs-base);
        font-weight: 600;
        color: var(--ink-900);
        margin-bottom: 4px;
        letter-spacing: -0.01em;
    }
    .svc-timeline-step p {
        font-size: var(--fs-sm);
        color: var(--ink-500);
        margin: 0;
        line-height: 1.6;
    }

    .svc-benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-4);
        margin-top: var(--s-6);
    }
    .svc-benefit {
        padding: var(--s-5);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        transition: all 0.3s var(--ease-out);
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        position: relative;
        overflow: hidden;
    }
    .svc-benefit::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--copper-500), var(--copper-300));
        transition: width 0.4s var(--ease-out);
    }
    .svc-benefit:hover {
        border-color: var(--copper-300);
        transform: translateY(-4px);
        box-shadow: var(--sh-md);
    }
    .svc-benefit:hover::before { width: 100%; }
    .svc-benefit-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-50), var(--copper-100));
        border: 1px solid var(--copper-200);
        border-radius: var(--r-sm);
        color: var(--copper-600);
        flex-shrink: 0;
        transition: all 0.3s var(--ease-spring);
    }
    .svc-benefit:hover .svc-benefit-icon {
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        color: var(--white);
        border-color: var(--copper-500);
        transform: rotate(-6deg) scale(1.05);
    }
    .svc-benefit h4 {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--ink-900);
        margin: 0;
        letter-spacing: -0.01em;
        line-height: 1.3;
    }
    .svc-benefit p {
        font-size: var(--fs-xs);
        color: var(--ink-500);
        margin: 0;
        line-height: 1.55;
    }

    .svc-stack-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-4);
        margin-top: var(--s-5);
    }
    .svc-stack-card {
        padding: var(--s-5);
        background: linear-gradient(180deg, var(--copper-50) 0%, var(--white) 100%);
        border: 1px solid var(--copper-100);
        border-radius: var(--r-lg);
        transition: all 0.3s var(--ease-out);
    }
    .svc-stack-card:hover {
        border-color: var(--copper-300);
        transform: translateY(-3px);
        box-shadow: var(--sh-md);
        background: var(--white);
    }
    .svc-stack-label {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--copper-600);
        font-weight: 600;
        margin-bottom: var(--s-3);
        padding-bottom: var(--s-3);
        border-bottom: 1px dashed var(--copper-200);
    }
    .svc-stack-values {
        font-size: var(--fs-sm);
        color: var(--ink-800);
        line-height: 1.55;
        font-weight: 500;
    }

    .svc-faq {
        display: grid;
        gap: var(--s-3);
        margin-top: var(--s-6);
    }
    .svc-faq details {
        padding: var(--s-5) var(--s-6);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        transition: all 0.3s var(--ease-out);
    }
    .svc-faq details[open] {
        border-color: var(--copper-300);
        box-shadow: var(--sh-md);
        background: var(--copper-50);
    }
    .svc-faq summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--s-4);
        cursor: pointer;
        font-weight: 600;
        font-size: var(--fs-base);
        color: var(--ink-900);
        list-style: none;
        padding-right: var(--s-2);
        position: relative;
        line-height: 1.4;
    }
    .svc-faq summary::-webkit-details-marker { display: none; }
    .svc-faq summary::after {
        content: '+';
        font-size: 1.4rem;
        font-weight: 400;
        color: var(--copper-500);
        line-height: 1;
        flex-shrink: 0;
        transition: transform 0.3s var(--ease-out);
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        background: var(--copper-50);
        border: 1px solid var(--copper-200);
        border-radius: 50%;
    }
    .svc-faq details[open] summary { color: var(--copper-700); }
    .svc-faq details[open] summary::after {
        transform: rotate(45deg);
        background: var(--copper-500);
        color: var(--white);
        border-color: var(--copper-500);
    }
    .svc-faq details p {
        font-size: var(--fs-sm);
        color: var(--ink-600);
        margin: var(--s-4) 0 0;
        line-height: 1.7;
        padding-right: var(--s-8);
    }

    .service-sidebar {
        position: sticky;
        top: calc(var(--header-h) + var(--s-6));
        display: flex;
        flex-direction: column;
        gap: var(--s-5);
    }

    .svc-related-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-5);
    }
    .svc-related-card {
        padding: var(--s-6);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        transition: all 0.3s var(--ease-out);
        position: relative;
        overflow: hidden;
        height: 100%;
    }
    .svc-related-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--copper-500), var(--copper-300));
        transition: width 0.4s var(--ease-out);
    }
    .svc-related-card:hover {
        border-color: var(--copper-300);
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
    }
    .svc-related-card:hover::before { width: 100%; }
    .svc-related-card .svc-icon {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-50), var(--copper-100));
        border: 1px solid var(--copper-200);
        border-radius: var(--r-md);
        color: var(--copper-600);
        margin-bottom: var(--s-2);
        transition: all 0.3s var(--ease-spring);
    }
    .svc-related-card:hover .svc-icon {
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        color: var(--white);
        border-color: var(--copper-500);
        transform: rotate(-6deg) scale(1.06);
    }
    .svc-related-card h3 {
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--ink-900);
        margin: 0;
        letter-spacing: -0.01em;
        line-height: 1.3;
        transition: color 0.2s var(--ease-out);
    }
    .svc-related-card:hover h3 { color: var(--copper-600); }
    .svc-related-card p {
        font-size: var(--fs-sm);
        color: var(--ink-500);
        line-height: 1.55;
        margin: 0;
        flex: 1;
    }
    .svc-related-card .svc-arrow {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--copper-600);
        align-self: flex-start;
        margin-top: auto;
    }
    .svc-related-card .svc-arrow::after {
        content: '→';
        transition: transform 0.3s var(--ease-out);
    }
    .svc-related-card:hover .svc-arrow::after {
        transform: translateX(5px);
    }

    /* Legacy service detail classes (kept for compatibility) */
    .service-detail-content h2 { font-size: var(--fs-xl); margin-bottom: var(--s-4); margin-top: var(--s-8); letter-spacing: -0.02em; font-style: normal; }
    .service-detail-content h2:first-child { margin-top: 0; }
    .service-detail-content p { font-size: var(--fs-base); line-height: 1.75; color: var(--ink-600); margin-bottom: var(--s-4); }
    .service-detail-content .eyebrow { margin-bottom: var(--s-2); }
    .deliverable-list { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin: var(--s-5) 0 var(--s-8); }
    .deliverable-list li { position: relative; padding-left: var(--s-8); color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.6; padding-top: 4px; }
    .deliverable-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--copper-500) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
    .stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
    .stack-item { padding: var(--s-5); background: var(--copper-50); border: 1px solid var(--copper-100); border-radius: var(--r-md); transition: all 0.25s var(--ease-out); }
    .stack-item:hover { border-color: var(--copper-300); transform: translateY(-2px); box-shadow: var(--sh-sm); }
    .stack-label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--copper-600); font-weight: 600; margin-bottom: var(--s-2); }
    .stack-values { font-size: var(--fs-sm); color: var(--ink-800); line-height: 1.5; font-weight: 500; }
    .service-process { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
    .service-process-step { display: grid; grid-template-columns: 60px 1fr; gap: var(--s-5); padding: var(--s-5); background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg); transition: all 0.3s var(--ease-out); align-items: start; }
    .service-process-step:hover { border-color: var(--copper-300); transform: translateX(4px); box-shadow: var(--sh-sm); }
    .step-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--copper-500); line-height: 1; letter-spacing: -0.03em; }
    .service-process-step h4 { font-size: var(--fs-base); margin-bottom: 4px; font-weight: 600; color: var(--ink-900); }
    .service-process-step p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; line-height: 1.6; }
    .faq-list { margin-top: var(--s-6); border-top: 1px solid var(--ink-100); }
    .faq-list details { border-bottom: 1px solid var(--ink-100); padding: var(--s-5) 0; }
    .faq-list summary { cursor: pointer; font-weight: 600; font-size: var(--fs-base); color: var(--ink-900); list-style: none; padding-right: var(--s-8); position: relative; transition: color 0.2s var(--ease-out); }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--copper-500); line-height: 1; transition: transform 0.3s var(--ease-out); }
    .faq-list details[open] summary { color: var(--copper-700); }
    .faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
    .faq-list details p { font-size: var(--fs-sm); color: var(--ink-600); margin: var(--s-3) 0 0; line-height: 1.7; padding-right: var(--s-8); }
    .sidebar-cta { background: linear-gradient(135deg, var(--copper-700), var(--copper-600)); color: var(--white); padding: var(--s-8); border-radius: var(--r-xl); margin-bottom: var(--s-6); position: relative; overflow: hidden; }
    .sidebar-cta::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
    .sidebar-cta h3 { color: var(--white); font-size: var(--fs-lg); margin: var(--s-3) 0 var(--s-3); position: relative; z-index: 1; }
    .sidebar-cta p { color: rgba(255,255,255,0.85); font-size: var(--fs-sm); margin-bottom: var(--s-5); position: relative; z-index: 1; line-height: 1.6; }
    .sidebar-cta .btn { position: relative; z-index: 1; }
    .contact-mini { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; font-size: var(--fs-sm); color: var(--ink-700); border-top: 1px solid var(--ink-100); transition: color 0.2s var(--ease-out); }
    .contact-mini:first-of-type { border-top: none; }
    .contact-mini:hover { color: var(--copper-600); }
    .sidebar-card { background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: var(--s-6); margin-bottom: var(--s-6); box-shadow: var(--sh-sm); }
    .sidebar-card h3 { font-size: var(--fs-base); margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink-100); }
    .sidebar-card ul { display: grid; gap: var(--s-2); }
    .sidebar-card ul a { display: block; padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); color: var(--ink-700); border-radius: var(--r-sm); transition: all 0.2s var(--ease-out); border-left: 3px solid transparent; }
    .sidebar-card ul a:hover,
    .sidebar-card ul a.active { background: var(--copper-50); color: var(--copper-600); border-left-color: var(--copper-500); padding-left: var(--s-5); }
}

/* ============================================
   BENEFITS GRID (legacy compatibility)
   ============================================ */
@layer components {
    .benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
    .benefit-item { display: flex; gap: var(--s-4); padding: var(--s-5); background: var(--copper-50); border: 1px solid var(--copper-100); border-radius: var(--r-md); transition: all 0.25s var(--ease-out); align-items: flex-start; }
    .benefit-item:hover { border-color: var(--copper-300); transform: translateY(-2px); box-shadow: var(--sh-sm); background: var(--white); }
    .benefit-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--copper-500); color: var(--white); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(194, 122, 63, 0.4); }
    .benefit-item h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); margin-bottom: 4px; letter-spacing: -0.01em; font-style: normal; }
    .benefit-item p { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.6; margin: 0; }
}

/* ============================================
   CONTACT PAGE
   ============================================ */
@layer components {
    .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-16); align-items: start; }
    .contact-sidebar { display: flex; flex-direction: column; gap: var(--s-6); position: sticky; top: calc(var(--header-h) + var(--s-6)); }
    .contact-panel { background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-xl); padding: var(--s-8); box-shadow: var(--sh-sm); }
    .contact-method { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--ink-100); }
    .contact-method:first-of-type { border-top: none; padding-top: 0; }
    .contact-method:last-of-type { padding-bottom: 0; }
    .contact-method-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--copper-50); border: 1px solid var(--copper-200); border-radius: var(--r-md); color: var(--copper-600); flex-shrink: 0; }
    .contact-method-label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); margin-bottom: 4px; font-weight: 500; }
    .contact-method-value { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6; }
    .contact-method-value a { color: var(--ink-700); font-weight: 500; }
    .contact-method-value a:hover { color: var(--copper-600); }
    .contact-trust { background: linear-gradient(135deg, var(--copper-700), var(--copper-600)); color: var(--white); padding: var(--s-6); border-radius: var(--r-lg); position: relative; overflow: hidden; }
    .contact-trust::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
    .contact-trust h4 { color: var(--white); font-size: var(--fs-base); margin: var(--s-3) 0 var(--s-2); position: relative; z-index: 1; }
    .contact-trust p { color: rgba(255,255,255,0.85); font-size: var(--fs-sm); line-height: 1.6; margin: 0; position: relative; z-index: 1; }
    .contact-faq details { border-bottom: 1px solid var(--ink-100); padding: var(--s-4) 0; }
    .contact-faq details:first-of-type { border-top: 1px solid var(--ink-100); }
    .contact-faq summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-800); list-style: none; padding-right: var(--s-4); position: relative; }
    .contact-faq summary::-webkit-details-marker { display: none; }
    .contact-faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--copper-500); transition: transform 0.25s var(--ease-out); }
    .contact-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
    .contact-faq details[open] summary { color: var(--copper-600); }
    .contact-faq details p { font-size: var(--fs-sm); color: var(--ink-500); margin: var(--s-3) 0 0; line-height: 1.65; }
    .contact-form-wrapper { background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-xl); padding: var(--s-10); box-shadow: var(--sh-md); position: relative; }
    .contact-form-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--copper-500), var(--copper-300)); border-radius: var(--r-xl) var(--r-xl) 0 0; }
    .contact-form-head { margin-bottom: var(--s-8); padding-bottom: var(--s-6); border-bottom: 1px solid var(--ink-100); }
    .contact-form-head h2 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
    .contact-form-head p { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); }
    .char-counter { float: right; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-400); font-weight: 400; letter-spacing: 0.04em; }
    .char-counter.near-limit { color: var(--copper-600); }
    .char-counter.at-limit { color: var(--error); }
    .form-disclaimer { font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--s-5); text-align: center; line-height: 1.6; }
    .contact-form-wrapper .form-control { padding: 14px 16px; font-size: var(--fs-sm); border-radius: var(--r-md); }
    .contact-form-wrapper textarea.form-control { min-height: 160px; }
}

/* ============================================
   CONTACT FORM — ENHANCED ELEMENTS
   ============================================ */
@layer components {
    .form-consent {
        margin-top: var(--s-2);
        margin-bottom: var(--s-5);
    }
    .checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: var(--s-3);
        font-size: var(--fs-sm);
        color: var(--ink-700);
        line-height: 1.6;
        cursor: pointer;
        user-select: none;
        position: relative;
    }
    .checkbox-label input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
    }
    .checkbox-custom {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border: 2px solid var(--ink-200);
        border-radius: var(--r-sm);
        background: var(--white);
        display: grid;
        place-items: center;
        transition: all 0.2s var(--ease-out);
        margin-top: 2px;
        position: relative;
    }
    .checkbox-custom::after {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 2px;
        background: var(--white);
        transform: scale(0);
        transition: transform 0.2s var(--ease-spring);
    }
    .checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
        background: var(--copper-500);
        border-color: var(--copper-500);
    }
    .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
        transform: scale(1);
    }
    .checkbox-label input[type="checkbox"]:focus-visible + .checkbox-custom {
        outline: 2px solid var(--copper-400);
        outline-offset: 2px;
    }
    .checkbox-label input[type="checkbox"].error + .checkbox-custom {
        border-color: var(--error);
        background: var(--error-bg);
    }
    .checkbox-label a {
        color: var(--copper-600);
        text-decoration: underline;
        text-decoration-color: var(--copper-300);
        text-underline-offset: 2px;
    }
    .checkbox-label a:hover {
        color: var(--copper-700);
        text-decoration-color: var(--copper-500);
    }
    .checkbox-label .required { color: var(--error); }

    #submitBtn { position: relative; transition: all 0.25s var(--ease-out); }
    #submitBtn .btn-text {
        display: inline-flex;
        align-items: center;
        gap: var(--s-3);
        transition: opacity 0.2s var(--ease-out);
    }
    #submitBtn .btn-text::after {
        content: '→';
        transition: transform 0.3s var(--ease-out);
    }
    #submitBtn:hover:not(:disabled) .btn-text::after {
        transform: translateX(4px);
    }
    #submitBtn .btn-spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: 2.5px solid rgba(255, 255, 255, 0.3);
        border-top-color: var(--white);
        border-radius: 50%;
        animation: btnSpin 0.7s linear infinite;
        opacity: 0;
        pointer-events: none;
    }
    @keyframes btnSpin {
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    #submitBtn.loading .btn-text { opacity: 0; }
    #submitBtn.loading .btn-spinner { opacity: 1; }
    #submitBtn:disabled { cursor: not-allowed; opacity: 0.9; }

    /* Success Modal */
    .success-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: var(--s-5);
        opacity: 0;
        transition: opacity 0.3s var(--ease-out);
    }
    .success-modal.visible {
        display: flex;
        opacity: 1;
        animation: modalFadeIn 0.3s var(--ease-out);
    }
    @keyframes modalFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .success-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 11, 8, 0.7);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        cursor: pointer;
    }
    .success-modal-content {
        position: relative;
        background: var(--white);
        border-radius: var(--r-xl);
        padding: var(--s-10) var(--s-8);
        max-width: 520px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 40px 80px -20px rgba(15, 11, 8, 0.4);
        text-align: center;
        z-index: 1;
        animation: modalSlideUp 0.4s var(--ease-spring);
    }
    @keyframes modalSlideUp {
        from { opacity: 0; transform: translateY(20px) scale(0.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .success-modal-close {
        position: absolute;
        top: var(--s-4);
        right: var(--s-4);
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--ink-50);
        color: var(--ink-600);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        transition: all 0.2s var(--ease-out);
        border: none;
        padding: 0;
        font-family: inherit;
    }
    .success-modal-close:hover {
        background: var(--copper-500);
        color: var(--white);
        transform: rotate(90deg);
    }
    .success-modal-close:focus-visible {
        outline: 2px solid var(--copper-500);
        outline-offset: 2px;
    }
    .success-modal-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto var(--s-5);
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        border-radius: 50%;
        color: var(--white);
        box-shadow: 0 16px 40px -12px rgba(194, 122, 63, 0.5);
        animation: modalIconPop 0.5s var(--ease-spring) 0.15s both;
    }
    .success-modal-icon svg { width: 36px; height: 36px; }
    @keyframes modalIconPop {
        from { transform: scale(0); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .success-modal-content h2 {
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
        font-weight: 700;
        color: var(--ink-900);
        letter-spacing: -0.02em;
        margin-bottom: var(--s-4);
        line-height: 1.2;
    }
    .success-modal-content > p {
        font-size: var(--fs-base);
        color: var(--ink-600);
        line-height: 1.6;
        margin-bottom: var(--s-6);
    }
    .success-modal-content > p strong {
        color: var(--ink-900);
        font-weight: 600;
        word-break: break-word;
    }
    .success-modal-info {
        display: flex;
        gap: var(--s-4);
        align-items: flex-start;
        text-align: left;
        padding: var(--s-4) var(--s-5);
        background: var(--copper-50);
        border: 1px solid var(--copper-100);
        border-radius: var(--r-md);
        margin-bottom: var(--s-6);
    }
    .success-modal-info-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        background: var(--white);
        border: 1px solid var(--copper-200);
        border-radius: 50%;
        color: var(--copper-600);
    }
    .success-modal-info strong {
        display: block;
        color: var(--ink-900);
        font-size: var(--fs-sm);
        margin-bottom: 4px;
        font-weight: 600;
    }
    .success-modal-info p {
        margin: 0;
        font-size: var(--fs-sm);
        color: var(--ink-600);
        line-height: 1.55;
    }
    .success-modal-info p strong {
        display: inline;
        color: var(--copper-600);
        margin: 0;
    }
    .success-modal-info p a {
        color: var(--copper-600);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .success-modal-actions {
        display: flex;
        gap: var(--s-3);
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ============================================
   SCROLL TO TOP
   Positioned LEFT of the chatbot bubble
   ============================================ */
@layer components {
    .scroll-top {
        position: fixed;
        bottom: var(--s-6);
        right: calc(var(--chatbot-size) + var(--s-6) + var(--fab-gap));
        width: var(--scroll-top-size);
        height: var(--scroll-top-size);
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-500), var(--copper-600));
        color: var(--white);
        border-radius: 50%;
        box-shadow: 0 8px 24px -8px rgba(194, 122, 63, 0.5);
        z-index: 900;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s var(--ease-out);
    }
    .scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    .scroll-top:hover {
        background: linear-gradient(135deg, var(--copper-600), var(--copper-700));
        transform: translateY(-3px);
        box-shadow: 0 12px 28px -8px rgba(194, 122, 63, 0.6);
    }
    .scroll-top svg { width: 18px; height: 18px; }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@layer animations {
    [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
    [data-reveal].revealed { opacity: 1; transform: translateY(0); }
    [data-reveal="left"] { transform: translateX(-40px); }
    [data-reveal="right"] { transform: translateX(40px); }
    [data-reveal="scale"] { transform: scale(0.94); }
    [data-reveal].revealed[data-reveal="left"],
    [data-reveal].revealed[data-reveal="right"] { transform: translateX(0); }
    [data-reveal].revealed[data-reveal="scale"] { transform: scale(1); }
    [data-reveal-delay="1"] { transition-delay: 0.08s; }
    [data-reveal-delay="2"] { transition-delay: 0.16s; }
    [data-reveal-delay="3"] { transition-delay: 0.24s; }
    [data-reveal-delay="4"] { transition-delay: 0.32s; }
}

/* ============================================
   MISSION, VISION & VALUES
   ============================================ */
@layer components {
    .mvv-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-5);
        align-items: stretch;
    }
    .mvv-card {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: var(--s-6);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        transition: all 0.35s var(--ease-out);
        overflow: hidden;
        min-height: 260px;
    }
    .mvv-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, var(--copper-500), var(--copper-300));
        border-radius: 0 2px 2px 0;
        transition: width 0.4s var(--ease-out);
    }
    .mvv-card:hover {
        border-color: var(--copper-300);
        transform: translateY(-4px);
        box-shadow: var(--sh-md);
    }
    .mvv-card:hover::before { width: 100%; }
    .mvv-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--copper-50), var(--copper-100));
        border: 1px solid var(--copper-200);
        border-radius: var(--r-sm);
        color: var(--copper-600);
        margin-bottom: var(--s-4);
        transition: all 0.35s var(--ease-spring);
        flex-shrink: 0;
    }
    .mvv-card:hover .mvv-icon {
        background: linear-gradient(135deg, var(--copper-500), var(--copper-400));
        color: var(--white);
        border-color: var(--copper-500);
        transform: rotate(-6deg) scale(1.06);
    }
    .mvv-label {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--copper-600);
        margin-bottom: var(--s-2);
    }
    .mvv-card h3 {
        font-family: var(--font-display);
        font-size: var(--fs-md);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.02em;
        color: var(--ink-900);
        margin-bottom: var(--s-3);
    }
    .mvv-card p {
        font-size: var(--fs-sm);
        line-height: 1.6;
        color: var(--ink-600);
        margin: 0 0 var(--s-4);
        flex: 1;
    }
    .mvv-link {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        font-size: var(--fs-xs);
        font-weight: 600;
        color: var(--copper-600);
        letter-spacing: 0.02em;
        margin-top: auto;
        align-self: flex-start;
        transition: gap 0.25s var(--ease-out);
    }
    .mvv-link::after {
        content: '→';
        transition: transform 0.25s var(--ease-out);
    }
    .mvv-link:hover { color: var(--copper-700); gap: var(--s-3); }
    .mvv-link:hover::after { transform: translateX(2px); }
    .mvv-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2);
        margin: 0 0 var(--s-4);
        padding: 0;
        list-style: none;
        flex: 1;
        align-content: flex-start;
    }
    .mvv-list li {
        font-size: var(--fs-xs);
        font-weight: 600;
        color: var(--ink-700);
        padding: 5px 11px;
        background: var(--copper-50);
        border: 1px solid var(--copper-100);
        border-radius: var(--r-full);
        letter-spacing: 0.01em;
        transition: all 0.25s var(--ease-out);
    }
    .mvv-list li:hover {
        background: var(--copper-100);
        border-color: var(--copper-300);
        color: var(--copper-700);
    }
    .mvv-list li strong { color: inherit; font-weight: 600; }
    .mvv-card--dark {
        background: linear-gradient(135deg, var(--copper-800) 0%, var(--copper-700) 100%);
        border-color: var(--copper-800);
    }
    .mvv-card--dark::before {
        background: linear-gradient(90deg, var(--copper-400), var(--copper-500));
    }
    .mvv-card--dark:hover { border-color: var(--copper-500); }
    .mvv-card--dark .mvv-icon {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--copper-300);
    }
    .mvv-card--dark:hover .mvv-icon {
        background: var(--copper-500);
        color: var(--white);
        border-color: var(--copper-500);
    }
    .mvv-card--dark .mvv-label { color: var(--copper-300); }
    .mvv-card--dark h3 { color: var(--white); }
    .mvv-card--dark p { color: rgba(255, 255, 255, 0.85); }
    .mvv-card--dark .mvv-link { color: var(--copper-300); }
    .mvv-card--dark .mvv-link:hover { color: var(--copper-200); }

    /* Cinematic Image Band */
    .img-hero--cinematic { position: relative; isolation: isolate; }
    .img-hero--cinematic .img-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 11, 8, 0.15) 0%, rgba(15, 11, 8, 0.55) 100%);
        z-index: 1;
        pointer-events: none;
    }
    .img-hero-tag {
        position: absolute;
        top: var(--s-6);
        left: var(--s-6);
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        padding: 8px 14px;
        background: rgba(15, 11, 8, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--r-full);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--white);
        z-index: 3;
    }
    .img-hero-tag .tag-dot {
        width: 6px;
        height: 6px;
        background: var(--copper-400);
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(194, 122, 63, 0.3);
        animation: pulse 2s infinite;
    }
    .img-hero-stats {
        position: absolute;
        top: var(--s-6);
        right: var(--s-6);
        display: flex;
        align-items: center;
        gap: var(--s-5);
        padding: var(--s-3) var(--s-5);
        background: rgba(15, 11, 8, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--r-lg);
        z-index: 3;
    }
    .ihs-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .ihs-num {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--white);
    }
    .ihs-accent { color: var(--copper-400); }
    .ihs-lbl {
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.65);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 500;
    }
    .ihs-divider {
        width: 1px;
        height: 28px;
        background: rgba(255, 255, 255, 0.2);
    }
}

/* ============================================
   HERO SPLIT (About, Services, Contact)
   ============================================ */
@layer components {
    .about-hero-custom {
        padding: calc(var(--header-h) + var(--s-16)) 0 var(--s-16);
    }
    .hero-split {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
        gap: var(--s-12);
        align-items: center;
    }
    .hero-split-content { text-align: left; }
    .hero-split-content .breadcrumb {
        justify-content: flex-start;
        color: rgba(255, 255, 255, 0.75);
    }
    .hero-split-content .breadcrumb a { color: rgba(255, 255, 255, 0.75); }
    .hero-split-content .breadcrumb a:hover { color: var(--copper-300); }
    .hero-split-content .breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }
    .hero-split-content .eyebrow {
        color: var(--copper-300);
        justify-content: flex-start;
    }
    .hero-split-content .eyebrow::before { background: var(--copper-300); }
    .hero-split-content h1 {
        color: var(--white);
        font-size: clamp(2.25rem, 1.8rem + 2.5vw, 3.75rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin-bottom: var(--s-5);
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    }
    .hero-split-content .lead {
        color: rgba(255, 255, 255, 0.85);
        font-size: var(--fs-md);
        max-width: 540px;
        margin-bottom: var(--s-8);
    }

    .hero-quick-stats {
        display: flex;
        gap: var(--s-6);
        flex-wrap: wrap;
        padding-top: var(--s-6);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .hqs-item { display: flex; flex-direction: column; gap: 2px; }
    .hqs-num {
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--copper-300);
    }
    .hqs-accent { color: var(--copper-400); }
    .hqs-lbl {
        font-size: var(--fs-xs);
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 500;
    }

    .hero-visual-card {
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r-xl);
        padding: var(--s-6);
        box-shadow: 0 32px 64px -20px rgba(0, 0, 0, 0.5);
    }
    .hvc-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: var(--s-4);
        margin-bottom: var(--s-4);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .hvc-label {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }
    .hero-visual-card .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-xs);
        color: var(--copper-300);
        font-weight: 600;
    }
    .hero-visual-card .status::before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--copper-400);
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(194, 122, 63, 0.25);
        animation: pulse 2s infinite;
    }
    .hvc-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--s-3);
        padding: var(--s-3) 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
        font-size: var(--fs-sm);
    }
    .hvc-row:last-child { border-bottom: none; }
    .hvc-row span {
        color: rgba(255, 255, 255, 0.55);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .hvc-row strong {
        color: var(--white);
        font-weight: 600;
        font-size: var(--fs-sm);
        text-align: right;
        line-height: 1.3;
    }

    .hvc-category-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .hvc-cat {
        display: grid;
        grid-template-columns: 32px 1fr auto;
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-3) var(--s-3);
        border-radius: var(--r-sm);
        color: rgba(255, 255, 255, 0.85);
        font-size: var(--fs-sm);
        font-weight: 500;
        transition: all 0.25s var(--ease-out);
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    }
    .hvc-cat:last-child { border-bottom: none; }
    .hvc-cat:hover {
        background: rgba(194, 122, 63, 0.12);
        color: var(--white);
        padding-left: var(--s-4);
    }
    .hvc-cat-icon {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        background: rgba(194, 122, 63, 0.15);
        border: 1px solid rgba(194, 122, 63, 0.3);
        border-radius: var(--r-sm);
        color: var(--copper-300);
        flex-shrink: 0;
        transition: all 0.25s var(--ease-out);
    }
    .hvc-cat:hover .hvc-cat-icon {
        background: var(--copper-500);
        border-color: var(--copper-500);
        color: var(--white);
    }
    .hvc-cat-name {
        text-align: left;
        letter-spacing: -0.01em;
    }
    .hvc-cat-count {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        font-weight: 500;
        color: var(--copper-300);
        letter-spacing: 0.05em;
        background: rgba(194, 122, 63, 0.15);
        padding: 3px 8px;
        border-radius: var(--r-full);
        transition: all 0.25s var(--ease-out);
    }
    .hvc-cat:hover .hvc-cat-count {
        background: var(--copper-500);
        color: var(--white);
    }
}

/* ============================================
   RESPONSIVE — Tablet (max 1100px)
   ============================================ */
@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--s-12); text-align: center; }
    .hero .lead { margin-inline: auto; }
    .hero-cta { justify-content: center; }
    .hero-card { max-width: 480px; margin-inline: auto; }

    .services-uniform,
    .services-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-10); }
    .process-grid::before { display: none; }
    .logo-strip-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
    .contact-grid { grid-template-columns: 1fr; gap: var(--s-10); }
    .contact-sidebar { position: static; }
    .contact-form-wrapper { padding: var(--s-8); }
    .service-detail-grid { grid-template-columns: 1fr !important; gap: var(--s-12) !important; }
    .service-sidebar { position: static; }

    .about-editorial { grid-template-columns: 1fr; gap: var(--s-16); }
    .about-visual { max-width: 560px; margin-inline: auto; padding: 0 var(--s-8) var(--s-12) var(--s-8); }

    .showcase-content { padding: var(--s-12) var(--s-8); }
    .showcase-inner { max-width: 540px; }
    .showcase-stats { gap: var(--s-6); }
    .showcase-dots { left: var(--s-8); }

    .mvv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mvv-grid .mvv-card:last-child { grid-column: 1 / -1; }

    .hero-split { grid-template-columns: 1fr; gap: var(--s-10); }
    .hero-split-content .lead { max-width: 100%; }
    .hero-visual-card { max-width: 480px; }

    .svc-hero-split { grid-template-columns: 1fr; gap: var(--s-8); }
    .svc-hero-card { max-width: 480px; }
    .svc-stats-row { grid-template-columns: repeat(2, 1fr); }
    .svc-stat:nth-child(2) { border-right: none; }
    .svc-stat:nth-child(1),
    .svc-stat:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: var(--s-5); }
    .svc-stat:nth-child(3),
    .svc-stat:nth-child(4) { padding-top: var(--s-5); }
    .svc-benefits { grid-template-columns: repeat(2, 1fr); }
    .svc-related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   RESPONSIVE — Mobile (max 768px)
   ============================================ */
@media (max-width: 768px) {
    :root {
        --header-h: 64px;
        --chatbot-size: 56px;
        --scroll-top-size: 44px;
        --fab-gap: 10px;
    }

    .container { padding-inline: var(--s-5); }
    .section { padding-block: var(--s-16); }

    .hero { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-12); }
    .hero-card { padding: var(--s-5); }
    .hero-card-body { grid-template-columns: 1fr 1fr; }
    .hero-stat { padding: var(--s-4); }
    .hero-stat .num { font-size: 1.5rem; }
    .hero-trust { display: none; }
    .hero h1 { font-size: clamp(1.85rem, 1.5rem + 2vw, 2.5rem); }

    .services-uniform,
    .services-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
    .services-uniform .svc-card .svc-body,
    .services-bento .svc-card .svc-body { padding: var(--s-5); padding-top: calc(var(--s-6) + 24px); }
    .services-uniform .svc-card h3,
    .services-bento .svc-card h3 { font-size: var(--fs-base); min-height: 2.6em; }
    .services-uniform .svc-card .svc-body > .svc-icon-float,
    .services-bento .svc-card .svc-body > .svc-icon-float { width: 42px; height: 42px; top: -21px; left: var(--s-4); }
    .services-uniform .svc-card .svc-body > .svc-icon-float svg,
    .services-bento .svc-card .svc-body > .svc-icon-float svg { width: 20px; height: 20px; }

    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .page-hero--image::before { background-attachment: scroll; }
    .cta-final--image::before { background-attachment: scroll; }

    .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
    .process-grid { grid-template-columns: 1fr; }
    .logo-strip-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; }
    .cta-final-actions { flex-direction: column; align-items: stretch; }
    .cta-final-actions .btn { width: 100%; }

    .img-frame { border-radius: var(--r-lg); }
    .img-hero { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
    .img-badge { padding: var(--s-4); bottom: var(--s-4); left: var(--s-4); right: var(--s-4); flex-direction: column; align-items: flex-start; }
    .img-badge .btn { width: 100%; }

    .about-hero { padding-block: var(--s-16); }
    .about-editorial { gap: var(--s-12); }
    .about-visual { max-width: 100%; padding: 0 var(--s-4) var(--s-10) var(--s-4); }
    .about-image { aspect-ratio: 4 / 5; }
    .hover-card--top { left: -10px; top: 10%; padding: var(--s-3) var(--s-4); min-width: 110px; }
    .hover-card--bottom { right: -10px; bottom: 10%; padding: var(--s-3) var(--s-4); min-width: 110px; }
    .hover-card .hc-num { font-size: 1.4rem; }
    .hover-card .hc-lbl { font-size: 0.65rem; }
    .about-year-badge { left: -10px; padding: var(--s-3) var(--s-4); min-width: 90px; }
    .about-year-badge .year-num { font-size: 1.15rem; }
    .about-year-badge .year-lbl { font-size: 0.6rem; }
    .about-cards { grid-template-columns: 1fr; gap: var(--s-4); }
    .about-card { min-height: auto; padding: var(--s-5); }
    .about-card--quote { min-height: auto; }

    .showcase-carousel-section { padding-block: var(--s-16) 0; }
    .showcase-track { aspect-ratio: 4 / 5; min-height: 560px; }
    .showcase-content { padding: var(--s-10) var(--s-6); align-items: center; padding-bottom: var(--s-24); }
    .showcase-inner { max-width: 100%; }
    .showcase-inner h3 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); }
    .showcase-inner p { font-size: var(--fs-sm); margin-bottom: var(--s-6); }
    .showcase-stats { gap: var(--s-5); margin-bottom: var(--s-6); }
    .showcase-stat .stat-value { font-size: 1.35rem; }
    .showcase-stat .stat-label { font-size: 0.65rem; }
    .showcase-nav { bottom: var(--s-5); right: var(--s-5); }
    .showcase-nav-btn { width: 44px; height: 44px; }
    .showcase-dots { bottom: var(--s-5); left: var(--s-5); gap: var(--s-2); }
    .showcase-dots button { width: 24px; }
    .showcase-dots button.active { width: 48px; }
    .showcase-counter { top: var(--s-5); right: var(--s-5); }
    .showcase-counter .current { font-size: 1.25rem; }
    .showcase-overlay {
        background: linear-gradient(
            180deg,
            rgba(15, 11, 8, 0.3) 0%,
            rgba(15, 11, 8, 0.5) 40%,
            rgba(15, 11, 8, 0.92) 75%,
            rgba(15, 11, 8, 0.98) 100%
        );
    }
    .showcase-inner .btn { width: 100%; justify-content: center; }

    .mvv-grid { grid-template-columns: 1fr; gap: var(--s-5); }
    .mvv-grid .mvv-card:last-child { grid-column: auto; }
    .mvv-grid .mvv-card:last-child .mvv-list { grid-template-columns: 1fr; }
    .mvv-card { padding: var(--s-6); min-height: auto; }
    .mvv-icon { width: 46px; height: 46px; margin-bottom: var(--s-4); }
    .mvv-card h3 { font-size: var(--fs-md); }
    .img-hero-stats { display: none; }
    .img-hero-tag { top: var(--s-4); left: var(--s-4); padding: 6px 12px; font-size: 0.65rem; }

    .about-hero-custom { padding: calc(var(--header-h) + var(--s-10)) 0 var(--s-12); }
    .hero-split-content h1 { font-size: clamp(1.85rem, 1.5rem + 2vw, 2.5rem); }
    .hero-quick-stats { gap: var(--s-4); padding-top: var(--s-5); }
    .hqs-num { font-size: 1.25rem; }
    .hero-visual-card { padding: var(--s-5); }
    .hvc-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .hvc-row strong { text-align: left; }

    .svc-hero-content h1 { font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); }
    .svc-hero-content .lead { font-size: var(--fs-base); }
    .svc-hero-facts { grid-template-columns: 1fr 1fr; }
    .svc-hero-fact .fact-value { font-size: 1.15rem; }
    .svc-stats-row { grid-template-columns: 1fr; }
    .svc-stat { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: var(--s-4) 0; }
    .svc-stat:last-child { border-bottom: none; }
    .svc-deliverables { grid-template-columns: 1fr; }
    .svc-benefits { grid-template-columns: 1fr; }
    .svc-stack-grid { grid-template-columns: 1fr; }
    .svc-related-grid { grid-template-columns: 1fr; }
    .svc-timeline-step { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5); }
    .svc-timeline-step .step-badge { width: 48px; height: 48px; font-size: 1.1rem; }
    .svc-faq details { padding: var(--s-4) var(--s-5); }
    .svc-faq summary { font-size: var(--fs-sm); }
    .svc-faq details p { padding-right: 0; }
    .service-sidebar { position: static; }

    .success-modal-content { padding: var(--s-8) var(--s-5); }
    .success-modal-actions { flex-direction: column; }
    .success-modal-actions .btn { width: 100%; }
    .success-modal-info { flex-direction: column; text-align: center; align-items: center; }
}

/* ============================================
   RESPONSIVE — Small mobile (max 480px)
   ============================================ */
@media (max-width: 480px) {
    :root {
        --chatbot-size: 52px;
        --scroll-top-size: 40px;
        --fab-gap: 8px;
    }

    .container { padding-inline: var(--s-4); }
    .section { padding-block: var(--s-12); }

    .footer-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: var(--s-4); }
    .contact-form-wrapper { padding: var(--s-6); }
    .contact-panel { padding: var(--s-6); }

    .values-grid,
    .why-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .logo-strip-grid { grid-template-columns: 1fr; }

    .services-uniform,
    .services-bento { grid-template-columns: 1fr; }
    .services-uniform .svc-card h3,
    .services-bento .svc-card h3 { min-height: auto; }

    .process-num { width: 56px; height: 56px; font-size: 1.1rem; }

    .showcase-track { aspect-ratio: 3 / 4; min-height: 520px; }
    .showcase-content { padding: var(--s-8) var(--s-5); padding-bottom: var(--s-24); }
    .showcase-tag { font-size: 0.65rem; padding: 5px 12px; margin-bottom: var(--s-4); }
    .showcase-inner h3 { font-size: 1.35rem; margin-bottom: var(--s-4); }
    .showcase-inner p { font-size: 0.85rem; line-height: 1.55; margin-bottom: var(--s-5); }
    .showcase-stats { gap: var(--s-4); margin-bottom: var(--s-5); }
    .showcase-stat .stat-value { font-size: 1.2rem; }
    .showcase-stat .stat-label { font-size: 0.6rem; }
    .showcase-nav-btn { width: 40px; height: 40px; }
    .showcase-nav-btn svg { width: 16px; height: 16px; }
    .showcase-counter .current { font-size: 1.1rem; }
    .showcase-counter .separator,
    .showcase-counter .total { font-size: 0.7rem; }
    .process-grid { grid-template-columns: 1fr; }

    .mvv-card { padding: var(--s-5); }
    .mvv-card h3 { font-size: var(--fs-base); }
    .mvv-list li { font-size: var(--fs-xs); }

    .hero-quick-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }

    .svc-hero-facts { grid-template-columns: 1fr; }
    .svc-hero-tag { padding: 6px 12px 6px 6px; }
    .svc-hero-tag .svc-hero-tag-icon { width: 28px; height: 28px; }
    .svc-hero-tag .svc-hero-tag-icon svg { width: 14px; height: 14px; }
    .svc-hero-tag .svc-hero-tag-label { font-size: 0.65rem; }
}

/* ============================================
   RESPONSIVE — Tiny (max 360px)
   ============================================ */
@media (max-width: 360px) {
    :root {
        --chatbot-size: 48px;
        --scroll-top-size: 38px;
        --fab-gap: 6px;
    }
    .container { padding-inline: var(--s-3); }
    .hero h1 { font-size: 1.65rem; }
    .btn { padding: 12px 20px; font-size: var(--fs-xs); }
    .btn-lg { padding: 14px 24px; font-size: var(--fs-sm); }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .showcase-image img,
    .showcase-slide,
    .showcase-progress-bar,
    .showcase-dots button .dot-progress { transition: none !important; animation: none !important; }
    .showcase-slide.active .showcase-image img { transform: none; }
    .industries-track { animation: none !important; }
    .hero-bg::before, .hero-bg::after, .hover-card--top, .hover-card--bottom { animation: none !important; }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    .site-header, .site-footer, .scroll-top, .showcase-nav, .showcase-dots,
    .showcase-progress, .showcase-counter, .mobile-toggle { display: none !important; }
    body { background: white; color: black; }
    .showcase-slide { position: static; opacity: 1; visibility: visible; page-break-inside: avoid; }
    .showcase-track { aspect-ratio: auto; min-height: auto; }
}

/* ============================================
   TIMELINE — Horizontal Milestone
   ============================================ */
@layer components {
    .timeline-h-wrapper {
        position: relative;
        padding-bottom: var(--s-4);
    }

    /* Horizontal scroll track on smaller screens */
    .timeline-h {
        display: grid;
        grid-template-columns: repeat(4, minmax(260px, 1fr));
        gap: var(--s-6);
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* Continuous line behind the markers */
    .timeline-h::before {
        content: '';
        position: absolute;
        top: 34px; /* Aligns with the center of the year badge */
        left: 24px;
        right: 24px;
        height: 2px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--copper-300) 10%,
            var(--copper-300) 90%,
            transparent 100%
        );
        z-index: 0;
    }

    .timeline-h-item {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Year + dot marker */
    .timeline-h-year {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s-3);
        margin-bottom: var(--s-5);
        position: relative;
        z-index: 2;
    }

    .timeline-h-year > span:first-child {
        display: grid;
        place-items: center;
        width: 68px;
        height: 68px;
        background: var(--white);
        border: 2px solid var(--copper-300);
        border-radius: 50%;
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--copper-600);
        line-height: 1;
        box-shadow:
            0 8px 20px -8px rgba(194, 122, 63, 0.35),
            0 0 0 6px var(--copper-50);
        transition: all 0.35s var(--ease-spring);
    }

    .timeline-h-item:hover .timeline-h-year > span:first-child {
        border-color: var(--copper-500);
        color: var(--copper-700);
        box-shadow:
            0 12px 28px -8px rgba(194, 122, 63, 0.5),
            0 0 0 10px var(--copper-100);
        transform: scale(1.06);
    }

    .timeline-h-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--copper-500);
        box-shadow: 0 0 0 4px var(--copper-50);
        flex-shrink: 0;
    }

    .timeline-h-dot--pulse {
        animation: timelinePulse 2s ease-in-out infinite;
    }

    @keyframes timelinePulse {
        0%, 100% { box-shadow: 0 0 0 4px var(--copper-50); }
        50% { box-shadow: 0 0 0 10px rgba(194, 122, 63, 0.15); }
    }

    /* Card */
    .timeline-h-card {
        position: relative;
        padding: var(--s-6);
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-sm);
        transition: all 0.35s var(--ease-out);
        width: 100%;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        text-align: left;
    }

    /* Small connector arrow from card up to dot */
    .timeline-h-card::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        width: 14px;
        height: 14px;
        background: var(--white);
        border: 1px solid var(--ink-100);
        border-right: none;
        border-bottom: none;
        transform: translateX(-50%) rotate(45deg);
        transition: border-color 0.35s var(--ease-out);
    }

    .timeline-h-item:hover .timeline-h-card {
        border-color: var(--copper-300);
        box-shadow: var(--sh-md);
        transform: translateY(-4px);
    }

    .timeline-h-item:hover .timeline-h-card::before {
        border-color: var(--copper-300);
    }

    .timeline-h-tag {
        display: inline-block;
        align-self: flex-start;
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--copper-600);
        background: var(--copper-50);
        padding: 3px 10px;
        border-radius: var(--r-full);
    }

    .timeline-h-card h3 {
        font-family: var(--font-display);
        font-size: var(--fs-md);
        font-weight: 700;
        color: var(--ink-900);
        margin: 0;
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

    .timeline-h-card p {
        font-size: var(--fs-sm);
        line-height: 1.65;
        color: var(--ink-600);
        margin: 0;
        flex: 1;
    }

    /* Ghost / future variant */
    .timeline-h-card--ghost {
        background: linear-gradient(135deg, var(--copper-50), var(--white));
        border-style: dashed;
        border-color: var(--copper-200);
    }
    .timeline-h-card--ghost .timeline-h-tag {
        background: rgba(194, 122, 63, 0.15);
    }
}

/* ============================================
   TIMELINE — Tablet
   ============================================ */
@media (max-width: 1100px) {
    .timeline-h {
        grid-template-columns: repeat(4, minmax(240px, 1fr));
        gap: var(--s-5);
    }
    .timeline-h-card {
        padding: var(--s-5);
        min-height: 160px;
    }
    .timeline-h-card h3 {
        font-size: var(--fs-base);
    }
    .timeline-h-year > span:first-child {
        width: 60px;
        height: 60px;
        font-size: 0.95rem;
    }
}

/* ============================================
   TIMELINE — Mobile: horizontal scroll-snap
   ============================================ */
@media (max-width: 768px) {
    .timeline-h-wrapper {
        position: relative;
        margin-top: var(--s-6);
    }

    /* Bleed the container out to full width for edge-to-edge scroll */
    .timeline-h-wrapper > .container {
        padding-inline: 0;
        max-width: 100%;
    }

    .timeline-h {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--s-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 var(--s-6) var(--s-4);
        margin: 0;
    }

    .timeline-h::-webkit-scrollbar {
        display: none;
    }

    /* Disable the continuous horizontal line on mobile */
    .timeline-h::before {
        display: none;
    }

    .timeline-h-item {
        flex: 0 0 82%;
        max-width: 320px;
        scroll-snap-align: center;
        padding-top: var(--s-2);
    }

    /* Compact marker for mobile */
    .timeline-h-year > span:first-child {
        width: 56px;
        height: 56px;
        font-size: 0.9rem;
        box-shadow:
            0 4px 12px -4px rgba(194, 122, 63, 0.35),
            0 0 0 5px var(--copper-50);
    }

    .timeline-h-item:hover .timeline-h-year > span:first-child {
        box-shadow:
            0 6px 16px -4px rgba(194, 122, 63, 0.5),
            0 0 0 8px var(--copper-100);
    }

    .timeline-h-card {
        padding: var(--s-5);
        min-height: auto;
    }

    .timeline-h-card h3 {
        font-size: var(--fs-base);
    }

    .timeline-h-card p {
        font-size: var(--fs-sm);
    }

    .timeline-h-tag {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    /* Soft visual hint that it scrolls — fade at right edge */
    .timeline-h-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: var(--s-4);
        right: 0;
        width: 40px;
        background: linear-gradient(270deg, var(--copper-50) 0%, transparent 100%);
        pointer-events: none;
        z-index: 3;
    }
}

@media (max-width: 480px) {
    .timeline-h-item {
        flex: 0 0 88%;
    }

    .timeline-h {
        padding-inline: var(--s-5);
        gap: var(--s-3);
    }

    .timeline-h-year > span:first-child {
        width: 48px;
        height: 48px;
        font-size: 0.78rem;
        border-width: 1.5px;
    }

    .timeline-h-card {
        padding: var(--s-4);
        border-radius: var(--r-md);
    }

    .timeline-h-card h3 {
        font-size: var(--fs-sm);
    }

    .timeline-h-card p {
        font-size: var(--fs-xs);
        line-height: 1.6;
    }
}
/* Official company branding */
.logo .official-logo { display:block; width:220px; height:auto; max-width:100%; object-fit:contain; background:#fff; border-radius:6px; padding:6px 10px; }
.site-header .logo { flex-shrink:0; }
.footer-brand .logo { width:240px; max-width:100%; }
@media(max-width:600px) { .site-header .logo .official-logo {width:166px;} }

/* Keep the official navigation logo within the fixed header. */
.site-header .header-inner { gap:20px; }
.site-header .logo { flex:0 1 auto; min-width:0; max-width:180px; height:100%; }
.site-header .logo .official-logo { width:168px; height:auto; max-width:100%; max-height:calc(var(--header-h) - 20px); object-fit:contain; padding:0; flex-shrink:1; }
.site-header .nav { flex-shrink:0; }
.site-header .mobile-toggle { flex-shrink:0; }
@media(max-width:900px) {
 .site-header .logo { max-width:150px; }
 .site-header .logo .official-logo { width:140px; max-height:calc(var(--header-h) - 20px); }
}


/* A dedicated row keeps story statistics independent of floating offsets. */
:is(#about, #story) .about-stats-row { display:contents; }
@media (max-width:900px) {
 :is(#about, #story) .about-visual { display:block; width:100%; max-width:100%; padding:0; }
 :is(#about, #story) .about-stats-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; margin-top:20px; }
 :is(#about, #story) .about-stats-row > div { position:static; inset:auto; transform:none; animation:none; min-width:0; width:auto; min-height:92px; padding:14px 5px; margin:0; border:1px solid var(--ink-100); border-radius:var(--r-md); display:flex; flex-direction:column; justify-content:center; align-items:center; box-sizing:border-box; box-shadow:var(--sh-sm); }
 :is(#about, #story) .about-stats-row .about-year-badge { border-color:var(--copper-500); }
 :is(#about, #story) .about-stats-row .hc-num, :is(#about, #story) .about-stats-row .year-num { font-size:1.35rem; line-height:1.2; }
 :is(#about, #story) .about-stats-row .hc-lbl, :is(#about, #story) .about-stats-row .year-lbl { font-size:9px; line-height:1.4; letter-spacing:.02em; max-width:100%; }
}

/* Homepage-only illustrative imagery. */
.homepage-imagery .cta-final--image::before { background-image:url('../images/home-workspace.jpg'); }

/* Increase contrast on the homepage closing invitation. */
.homepage-imagery .cta-final--image::after { background:linear-gradient(135deg,rgba(20,14,10,.88) 0%,rgba(20,14,10,.8) 50%,rgba(20,14,10,.88) 100%); }

/* Match service detail banners to their homepage and overview card. */
.service-imagery .page-hero--image::before { background-image:var(--service-image); }

/* Partner logos keep their supplied brand artwork and natural proportions. */
.partner-section { padding:var(--s-16) 0; background:var(--white); border-top:1px solid var(--ink-100); overflow:hidden; }
.partner-heading { text-align:center; margin-bottom:var(--s-8); }
.partner-heading h2 { font-family:var(--font-display); font-size:var(--fs-2xl); letter-spacing:-.03em; line-height:1.15; margin:0; }
.partner-heading .eyebrow { justify-content:center; margin-bottom:var(--s-3); }
.partner-marquee { overflow-x:auto; padding:var(--s-2) 0; }
.partner-track { display:flex; width:max-content; }
.partner-group { display:flex; align-items:center; gap:24px; padding-right:24px; flex:0 0 auto; }
.partner-logo { display:flex; justify-content:center; align-items:center; flex:0 0 252px; width:252px; height:160px; padding:20px; background:var(--white); border:1px solid var(--ink-100); border-radius:var(--r-md); box-sizing:border-box; }
.partner-logo img { display:block; max-width:100%; width:auto; max-height:120px; height:auto; object-fit:contain; }
.partner-logo--hp img { clip-path:inset(1.7% 1%); }
.partner-logo--asus img { width:190px; }
.partner-logo--dell img { width:212px; }
.partner-duplicate { display:none; }
.partner-section.is-animated .partner-marquee { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent); }
.partner-section.is-animated .partner-duplicate { display:flex; }
.partner-section.is-animated .partner-track { animation:partner-scroll 48s linear infinite; }
@media (hover:hover) { .partner-section .partner-marquee:hover .partner-track { animation-play-state:paused; } }
@keyframes partner-scroll { to { transform:translateX(-50%); } }
@media (max-width:600px) {
 .partner-section { padding:var(--s-12) 0; }
 .partner-heading h2 { font-size:var(--fs-xl); }
 .partner-logo { flex-basis:212px; width:212px; height:148px; padding:18px; }
 .partner-logo img { max-height:110px; }
 .partner-group { gap:16px; padding-right:16px; }
}
@media (prefers-reduced-motion:reduce) {
 .partner-section.is-animated .partner-track { animation:none; transform:none; width:100%; }
 .partner-section.is-animated .partner-duplicate { display:none; }
 .partner-section.is-animated .partner-marquee { mask-image:none; overflow:visible; }
 .partner-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; padding:0; }
 .partner-logo { width:100%; min-width:0; }
}
@media (prefers-reduced-motion:reduce) and (max-width:900px) { .partner-group { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Clear, accessible contact availability and acknowledgement states. */
#contactFields { border:0; padding:0; margin:0; min-width:0; }
#contactFields[hidden] { display:none; }
.contact-status { padding:18px 20px; border:1px solid var(--ink-200); border-radius:var(--r-md); background:var(--copper-50); color:var(--ink-700); line-height:1.7; margin-bottom:24px; }
.contact-status a,.contact-acknowledgement a,.contact-trust a { text-decoration:underline; text-underline-offset:3px; }
.contact-acknowledgement label { display:block; font-size:var(--fs-sm); line-height:1.7; }
.contact-acknowledgement input { width:18px; height:18px; margin:0 8px 0 0; accent-color:var(--copper-600); vertical-align:middle; }
.form-disclaimer { color:var(--ink-600); }