/* Base scrolling anti-jiggle fix */
        html { overflow-y: scroll; }

        .btn-swirl {
            position: relative;
            overflow: hidden;
            z-index: 0;
            border: none;
            color: white;
        }
        .btn-swirl::before {
            content: '';
            position: absolute;
            z-index: -2;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            background-color: transparent;
            background-image: conic-gradient(transparent, #FFC93C, transparent 30%);
            animation: swirl 4s linear infinite;
        }
        .btn-swirl::after {
            content: '';
            position: absolute;
            z-index: -1;
            left: 2px;
            top: 2px;
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            background: #010a35;
            border-radius: 0;
            transition: background-color 0.3s ease;
        }
        .btn-swirl:hover::after { background: #FFC93C; }
        .btn-swirl:hover { color: #010a35 !important; }
        .btn-swirl.btn-primary { background: transparent !important; }

        @keyframes swirl {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* ── SplitType Animations ────────────────────────────── */
        .industry-body-text .line { overflow: hidden; padding-bottom: 0.15em; margin-bottom: -0.15em; }
        .industry-body-text .word { display: inline-block; transform: translateY(110%); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
        .industry-card:hover .industry-body-text .line:nth-child(1) .word { transition-delay: 80ms; }
        .industry-card:hover .industry-body-text .line:nth-child(2) .word { transition-delay: 140ms; }
        .industry-card:hover .industry-body-text .line:nth-child(3) .word { transition-delay: 200ms; }
        .industry-card:hover .industry-body-text .line:nth-child(4) .word { transition-delay: 260ms; }
        .industry-card:hover .industry-body-text .line:nth-child(5) .word { transition-delay: 320ms; }
        .industry-card:hover .industry-body-text .line:nth-child(6) .word { transition-delay: 380ms; }
        .industry-card:hover .industry-body-text .word { transform: translateY(0); }

        .industry-card { transform: translateY(60px); opacity: 0; }
        .industry-card.revealed { transform: translateY(0); opacity: 1; }
        .industry-card .industry-image-container::after { content: ''; position: absolute; inset: 0; background: #010a35; z-index: 30; transform: scaleY(1); transform-origin: bottom; transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s; pointer-events: none; }
        .industry-card.revealed .industry-image-container::after { transform: scaleY(0); }

        /* ── Mobile Industry Cards ───────────────────────────────── */
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            #products-top-header { display: none !important; }
            #products-top > div { background: transparent; }
        }

        .mobile-product-cell { cursor: pointer; }
        .mobile-product-cell .product-selector-square { width: 100%; }

        /* ── Hero scroll sequence (Floema-style clip-path panels) ── */
        .hero-panel { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
        #hero-panel-0 { z-index: 1; }
        #hero-panel-1 { z-index: 2; clip-path: inset(100% 0 0 0); }
        .hero-panel-bg { position: absolute; inset: 0; background: #010a35; }
        .hero-panel-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .hero-bg-overlay { position: absolute; inset: 0; background: rgba(1, 10, 53, 0.52); }
        .hero-mobile-art,
        .hero-desktop-art {
            display: none;
            transform: scale(0.955);
            transform-origin: right center;
            transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .hero-mobile-art.is-ready,
        .hero-desktop-art.is-ready { transform: scale(1); }
        .hero-mobile-art.hero-art--static,
        .hero-desktop-art.hero-art--static {
            transform: none;
            transition: none;
        }

        /* Full-width colour fields now meet cleanly without inset depth. */
        .section-depth,
        .hero-panel-bg.section-depth {
            box-shadow: none;
        }

        /* Bot-trap fields remain outside the visual and keyboard flow. */
        .form-honeypot {
            position: absolute !important;
            left: -10000px !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        #custom-solutions.section-depth {
            z-index: 2;
            box-shadow: none;
        }
        .custom-solutions-art {
            position: absolute;
            z-index: 2;
            right: clamp(1.5rem, 5vw, 6rem);
            bottom: 0;
            width: min(14.8rem, 19.2vw);
            height: 73.6%;
            pointer-events: none;
            user-select: none;
        }
        .custom-solutions-art img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: right bottom;
        }
        .custom-solutions-art--box {
            right: auto;
            left: 0;
            width: min(19rem, 24vw);
            height: 78%;
        }
        .custom-solutions-art--box img {
            object-position: left bottom;
        }
        .section-divider-wrap {
            padding-top: 0;
            padding-bottom: 0;
        }
        .section-divider-line {
            width: 100%;
            height: 1px;
            background: rgba(84, 193, 191, 0.4);
        }
        /* The divider is the shared boundary between these two sections, so
           each side contributes one controlled half-gap instead of stacking
           two full section paddings (plus mobile divider padding). */
        #products-top { padding-bottom: 2rem; }
        #products-top + .section-divider-wrap {
            padding-top: 0;
            padding-bottom: 0;
        }
        #products { padding-top: 2rem; }
        @media (min-width: 768px) {
            #products-top { padding-bottom: 2.5rem; }
            #products { padding-top: 2.5rem; }
        }
        #cs-heading {
            font-size: 2rem;
            line-height: 1.12;
            letter-spacing: -0.03em;
        }
        #cs-heading .cs-line { display: block; }
        @media (min-width: 768px) {
            #cs-heading { font-size: clamp(3rem, 4.2vw, 3.5rem); }
            #cs-heading .cs-line:first-child { white-space: nowrap; }
        }
        #spotlight-pin-wrapper {
            z-index: 1;
            margin-top: -0.375rem;
            padding: clamp(3.5rem, 6vw, 5.5rem) 146px;
            background: #fafafa;
        }
        .project-feature {
            display: grid;
            grid-template-columns: minmax(0, 1.9fr) minmax(22rem, 1fr);
            gap: 1rem;
            height: clamp(32rem, 70vh, 46rem);
            width: 100%;
            margin: 0 auto;
            overflow: visible;
            background: transparent;
        }
        .project-feature-media {
            min-width: 0;
            min-height: 0;
            height: 100%;
            overflow: hidden;
            background: #010a35;
            border-radius: 4px;
            box-shadow: 0 12px 28px -22px rgba(1, 10, 53, 0.42);
        }
        .project-feature-media img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 0;
            object-fit: cover;
            object-position: center;
        }
        .project-feature-panel {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            gap: 3rem;
            padding: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 4.5vw, 5rem);
            color: #ffffff;
            background: #010a35;
            border-radius: 4px;
            box-shadow: 0 12px 28px -22px rgba(1, 10, 53, 0.42);
        }
        .project-feature-mobile-intro,
        .project-feature-mobile-outro {
            display: none;
        }
        .project-feature--motion-ready .project-feature-card {
            transform: scale(0.965);
            transform-origin: center;
            transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
        }
        .project-feature--motion-ready .project-feature-panel {
            transition-delay: 90ms;
        }
        .project-feature--motion-ready.project-feature--revealed .project-feature-card {
            transform: scale(1);
        }
        .project-feature-location {
            margin-top: 1rem;
            color: rgba(255, 255, 255, 0.72);
        }
        .project-feature-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            height: 3rem;
            padding: 0 2rem;
            color: #010a35;
            background: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 4px;
            transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
        }
        .project-feature-cta:hover {
            color: #010a35;
            background: #54c1bf;
            border-color: #54c1bf;
        }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            .section-divider-wrap {
                padding-top: 2.5rem;
                padding-bottom: 2.5rem;
            }
            #services {
                padding-top: 2.5rem;
            }
            #custom-solutions {
                width: 100%;
                margin: 2.5rem 0;
                border-radius: 0;
            }
            #custom-solutions.section-depth {
                box-shadow: none;
            }
            .custom-solutions--illustrated .custom-solutions-copy {
                min-height: 32rem;
                justify-content: flex-start;
                padding-top: 4rem;
                padding-bottom: 17rem;
            }
            .custom-solutions--illustrated .custom-solutions-art {
                display: block;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 15rem;
                overflow: hidden;
            }
            .custom-solutions--illustrated .custom-solutions-art img {
                position: absolute;
                top: -0.5rem;
                right: auto;
                left: 50%;
                width: min(17rem, 64.8vw);
                max-width: none;
                height: auto;
                transform: translateX(-50%);
            }
            .custom-solutions--illustrated .custom-solutions-art--box {
                display: none;
            }
            #spotlight-pin-wrapper {
                margin-top: 0;
                padding: 2.5rem 1.5rem;
                background: #ffffff;
            }
            .project-feature {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                height: auto;
            }
            .project-feature-mobile-intro,
            .project-feature-mobile-outro {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
            .project-feature-mobile-intro {
                order: 1;
                gap: 0.75rem;
            }
            .project-feature-summary {
                margin-top: 0.25rem;
                color: rgba(1, 10, 53, 0.72);
            }
            .project-feature-media {
                order: 2;
                min-height: 0;
                height: auto;
                aspect-ratio: 4 / 3;
            }
            .project-feature-media img { min-height: 0; }
            .project-feature-panel {
                display: none;
            }
            .project-feature-mobile-outro {
                order: 3;
                gap: 1.5rem;
            }
            .project-feature-client {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
                color: #010a35;
            }
            .project-feature-cta--mobile {
                color: #ffffff;
                background: #010a35;
                border-color: #010a35;
            }
            .project-feature--motion-ready .project-feature-card {
                transform: scale(0.975);
            }
            .project-feature--motion-ready.project-feature--revealed .project-feature-card {
                transform: scale(1);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .project-feature--motion-ready .project-feature-card {
                transform: none;
                transition: none;
            }
        }
        .hero-slide { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1.5rem 5.5rem; }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            /* Keep the opening composition inside the viewport that remains
               visible while mobile browser controls are expanded. The inline
               vh values remain as fallbacks for browsers without svh support. */
            #home { height: 400svh !important; }
            #hero-sticky { height: 100svh !important; }
            #home + main { margin-top: -100svh !important; }
            .hero-slide--mobile-bottom {
                justify-content: flex-end;
                padding: 0 1.5rem calc(clamp(3rem, 9.3vh, 5.5rem) + env(safe-area-inset-bottom, 0px));
                padding: 0 1.5rem calc(clamp(3rem, 9.3svh, 5.5rem) + env(safe-area-inset-bottom, 0px));
            }
            .hero-slide--mobile-top {
                justify-content: flex-start;
                padding: clamp(5.25rem, 10.5vh, 6.25rem) 1.5rem 0;
                padding: clamp(5.25rem, 10.5svh, 6.25rem) 1.5rem 0;
            }
            .hero-mobile-art {
                position: absolute;
                top: clamp(4.75rem, 10vh, 6rem);
                z-index: 4;
                display: block;
                width: 100vw;
                height: clamp(14rem, 39vh, 22rem);
                object-fit: contain;
                pointer-events: none;
            }
            .hero-mobile-art--right {
                right: 0;
                object-position: right top;
                transform-origin: right top;
            }
            .hero-mobile-art--top {
                top: 0;
                bottom: auto;
                object-position: right top;
                transform-origin: right top;
            }
            .hero-mobile-art--bottom {
                top: auto;
                bottom: 0;
                object-position: right bottom;
                transform-origin: right bottom;
            }
            .hero-mobile-art--fill-top {
                /* A little breathing room keeps the opening hand clear of the
                   persistent quote and menu controls on real phones. */
                top: clamp(0.625rem, 1.25svh, 0.875rem);
                right: 0;
                /* Preserve the full-width artwork on tall screens, but cap it
                   to 60% of the visible height on shorter real-phone
                   viewports so it cannot crowd the copy below. */
                width: auto;
                max-width: none;
                height: min(121.5vw, 56vh);
                height: min(121.5vw, 56svh);
                object-fit: contain;
                object-position: right top;
                -webkit-mask-image: none;
                mask-image: none;
            }
            .hero-mobile-art--fill-bottom {
                top: auto;
                right: -5vw;
                bottom: 0;
                width: 110vw;
                height: 55vh;
                height: 55svh;
                object-fit: contain;
                object-position: center bottom;
                transform-origin: center bottom;
            }
            .hero-mobile-art--viewport-height {
                top: 0;
                bottom: 0;
                width: auto;
                max-width: none;
                height: 100vh;
                object-fit: contain;
                object-position: right bottom;
            }
        }
        @media (min-width: 768px) { .hero-slide { justify-content: flex-start; padding: 28vh 3rem 0 146px; max-width: 65rem; } }
        @media (min-width: 768px) {
            .hero-desktop-art {
                position: absolute;
                top: 10vh;
                z-index: 4;
                display: block;
                width: 54vw;
                height: 80vh;
                object-fit: contain;
                pointer-events: none;
            }
            .hero-desktop-art--right {
                top: auto;
                right: 0;
                bottom: 0;
                height: 90vh;
                object-position: right bottom;
                transform-origin: right bottom;
            }
            .hero-desktop-art--full-height {
                top: 0;
                right: 0;
                bottom: 0;
                width: auto;
                max-width: none;
                height: 100vh;
                object-fit: contain;
                object-position: right bottom;
                transform-origin: right bottom;
            }
            .hero-desktop-art--companion {
                top: auto;
                right: 39vw;
                bottom: 0;
                width: min(34vw, 36rem);
                height: 55vh;
                object-position: right bottom;
                transform-origin: right bottom;
            }
        }
        /* Android browsers deliberately ignore the viewport meta tag when a
           phone requests "Desktop site", producing a ~980px-wide portrait
           canvas. The desktop hero is proportioned for landscape and leaves
           large empty areas in that canvas, so this compatibility state reuses
           the finished mobile composition instead of maintaining a third hero.
           The class is set before CSS loads in src/layout.html. */
        html.phone-desktop-mode #home { height: 400svh !important; }
        html.phone-desktop-mode #hero-sticky { height: 100svh !important; }
        html.phone-desktop-mode #home + main { margin-top: -100svh !important; }
        html.phone-desktop-mode .hero-desktop-art { display: none !important; }
        html.phone-desktop-mode .hero-mobile-art {
            position: absolute;
            top: clamp(4.75rem, 10svh, 6rem);
            z-index: 4;
            display: block !important;
            width: 100vw;
            height: clamp(14rem, 39svh, 22rem);
            object-fit: contain;
            pointer-events: none;
        }
        html.phone-desktop-mode .hero-mobile-art--right {
            right: 0;
            object-position: right top;
            transform-origin: right top;
        }
        html.phone-desktop-mode .hero-mobile-art--top {
            top: 0;
            bottom: auto;
            object-position: right top;
            transform-origin: right top;
        }
        html.phone-desktop-mode .hero-mobile-art--bottom {
            top: auto;
            bottom: 0;
            object-position: right bottom;
            transform-origin: right bottom;
        }
        html.phone-desktop-mode .hero-mobile-art--fill-top {
            top: clamp(0.625rem, 1.25svh, 0.875rem);
            right: 0;
            width: auto;
            max-width: none;
            height: min(121.5vw, 56svh);
            object-fit: contain;
            object-position: right top;
            -webkit-mask-image: none;
            mask-image: none;
        }
        html.phone-desktop-mode .hero-mobile-art--fill-bottom {
            top: auto;
            right: -5vw;
            bottom: 0;
            width: 110vw;
            height: 55svh;
            object-fit: contain;
            object-position: center bottom;
            transform-origin: center bottom;
        }
        html.phone-desktop-mode .hero-slide {
            max-width: none;
            justify-content: flex-end;
            padding: 0 1.5rem 5.5rem;
        }
        html.phone-desktop-mode .hero-slide--mobile-bottom {
            justify-content: flex-end;
            padding: 0 1.5rem calc(clamp(3rem, 9.3svh, 5.5rem) + env(safe-area-inset-bottom, 0px));
        }
        html.phone-desktop-mode .hero-slide--mobile-top {
            justify-content: flex-start;
            padding: clamp(5.25rem, 10.5svh, 6.25rem) 1.5rem 0;
        }
        html.phone-desktop-mode .hero-slide-heading {
            font-size: clamp(1.9rem, 8.4vw, 2.4rem);
        }
        html.phone-desktop-mode .hero-slide-body {
            font-size: clamp(0.875rem, 3.5vw, 1rem);
        }
        html.phone-desktop-mode .hero-dot-track {
            right: 1rem;
            top: auto;
            bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
            transform: none;
            flex-direction: row;
            gap: 5px;
        }
        html.phone-desktop-mode .hero-dot.active { height: 5px; width: 22px; }
        html.phone-desktop-mode #hero-scroll-hint {
            bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
        }

        /* The same compatibility state uses the mobile navigation controls;
           otherwise the 980px emulated width selects tiny desktop links. */
        html.phone-desktop-mode #nav-center,
        html.phone-desktop-mode #nav-right { display: none !important; }
        html.phone-desktop-mode #nav-mobile-actions { display: flex !important; }
        html.phone-desktop-mode #mobile-menu-overlay,
        html.phone-desktop-mode #mobile-menu-dropdown { display: block !important; }
        html.phone-desktop-mode #main-nav > div:last-child {
            height: 58px !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        html.phone-desktop-mode #nav-logo-link {
            width: 79px !important;
            height: 25px !important;
        }
        html.phone-desktop-mode #nav-logo-link > svg { width: 100%; height: 100%; }
        html.phone-desktop-mode #nav-logo-link { transform: none !important; }
        html.phone-desktop-mode #main-nav > div:last-child > div:first-child {
            transform: none !important;
        }
        html.phone-desktop-mode #main-nav {
            transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
        }
html.phone-desktop-mode #main-nav[data-nav-state="hiding"] {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }

        /* The industry selector has separate desktop and mobile markup. Swap
           the wrappers explicitly because Tailwind's md display utilities are
           still evaluated against Android's artificial ~980px viewport. */
        html.phone-desktop-mode .industry-mobile-heading {
            display: flex !important;
        }
        html.phone-desktop-mode #mobile-industry-selection-wrapper {
            display: block !important;
        }
        html.phone-desktop-mode #industry-desktop-grid-wrapper {
            display: none !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-mobile-art,
            .hero-desktop-art {
                transform: none;
                transition: none;
            }
        }
        .hero-slide-label { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; color: white !important; margin-bottom: 0.875rem; }
        .hero-slide-heading { font-family: 'DM Sans', sans-serif; font-weight: 500; color: white; line-height: 1.15; font-size: 42px; margin: 0 0 1.25rem; letter-spacing: -0.02em; }
        @media (min-width: 768px) { .hero-slide-heading { font-size: clamp(2.4rem, 5.6vw, 4.4rem); } }
        .hero-slide-heading .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; display: block; }
        /* About pinned headline — line-mask wipe: .line clips, .inner slides up inside it */
        #about-pinned-text .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
        #about-pinned-text .line .inner { display: block; will-change: transform, opacity; }
        .hero-slide-body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(0.875rem, 1.4vw, 1rem); color: white !important; line-height: 1.75; max-width: 34rem; margin: 0 0 2rem; }
        
        .hero-btn-primary { display: inline-flex; align-items: center; background: #010a35; color: white; border: 1.5px solid rgba(255,255,255,0.25); padding: 0 2rem; height: 48px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.02em; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; border-radius: 4px; }
        .hero-btn-primary:hover { background: #FFC93C; border-color: #FFC93C; color: #010a35; }
        .hero-btn-outline { display: inline-flex; align-items: center; background: #010a35; color: white; border: 1.5px solid #010a35; padding: 0 2rem; height: 48px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.02em; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; border-radius: 4px; }
        .hero-btn-outline:hover { background: #FFC93C; color: #010a35; border-color: #FFC93C; }
        .hero-btn-teal { background: #54c1bf; color: #010a35; border-color: #010a35; }
        .hero-btn-teal:hover { background: #67cdcb; color: #010a35; border-color: #010a35; }
        
        .hero-dot-track { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 7px; align-items: center; }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) { .hero-dot-track { right: 1rem; top: auto; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: none; flex-direction: row; gap: 5px; } }
        .hero-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.28); border: none; cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.3s, height 0.3s, width 0.3s, border-radius 0.3s; }
        .hero-dot.active { background: white; height: 22px; border-radius: 3px; }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) { .hero-dot.active { height: 5px; width: 22px; } }

        #hero-scroll-hint { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 20; color: rgba(255,255,255,0.35); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 7px; transition: opacity 0.5s; white-space: nowrap; }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) { #hero-scroll-hint { bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); } }
        #hero-scroll-hint.faded { opacity: 0; pointer-events: none; }
        
        #hero-ticker-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; height: 48px; background: #010a35; border-top: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
        .htb-desktop { display: none; height: 100%; align-items: center; justify-content: space-between; padding: 0 2rem 0 6.5rem; color: rgba(255,255,255,0.5); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
        @media (min-width: 768px) { .htb-desktop { display: flex; } .htb-mobile { display: none; } }
        .htb-mobile { display: flex; height: 100%; align-items: center; overflow: hidden; }
        .htb-track { display: flex; align-items: center; animation: htb-scroll 14s linear infinite; white-space: nowrap; gap: 0; color: rgba(255,255,255,0.5); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
        .htb-track span { padding: 0 0.9rem; flex-shrink: 0; }
        .htb-sep { color: rgba(255,255,255,0.2) !important; padding: 0 !important; }
        @keyframes htb-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* Hero benefit progression — replaces the pre-launch project prompt. */
        .hero-benefits-prompt {
            position: relative;
            width: 100%;
            overflow: hidden;
            background: #ffffff;
            border-bottom: 1px solid #d9dee8;
        }
        .hero-benefits-inner {
            width: 100%;
            padding: 1.6rem 146px 1.85rem;
        }
        .hero-benefits-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            align-items: center;
            gap: clamp(1rem, 2vw, 2.5rem);
        }
        .hero-benefit-item {
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.7rem;
            text-align: center;
            color: rgba(1, 10, 53, 0.46);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.68rem;
            font-weight: 600;
            line-height: 1.35;
            letter-spacing: 0.055em;
            text-transform: uppercase;
            transition: color 0.28s ease, transform 0.28s ease;
        }
        .hero-benefit-icon {
            width: 2.25rem;
            height: 2.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border: 1px solid #d9dee8;
            border-radius: 4px;
            background: #f7f8fa;
            color: rgba(1, 10, 53, 0.42);
            font-size: 0.76rem;
            transition: color 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
        }
        .hero-benefit-item.is-active {
            color: #010a35;
            transform: translateY(-2px);
        }
        .hero-benefit-item.is-active .hero-benefit-icon {
            color: #010a35;
            background: #54c1bf;
            border-color: #54c1bf;
            transform: scale(1.04);
            animation: hero-benefit-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes hero-benefit-pop {
            0% { transform: scale(0.84); }
            62% { transform: scale(1.16); }
            100% { transform: scale(1.04); }
        }
        .hero-benefits-progress {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background: #eef0f4;
            overflow: hidden;
        }
        .hero-benefits-progress span {
            display: block;
            width: 100%;
            height: 100%;
            background: #54c1bf;
            transform: scaleX(0);
            transform-origin: left center;
            will-change: transform;
        }
        @media (max-width: 1100px) {
            .hero-benefits-inner { padding-left: 3rem; padding-right: 3rem; }
            .hero-benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
            .hero-benefit-item { flex-direction: row; align-items: center; }
        }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            .hero-benefits-inner {
                overflow: hidden;
                padding: 1.25rem 1.5rem 1.4rem;
            }
            .hero-benefits-grid {
                display: flex;
                width: max-content;
                gap: 1.65rem;
                will-change: transform;
            }
            .hero-benefit-item {
                min-height: 0;
                flex: 0 0 auto;
                display: block;
                padding: 0;
                border: 0;
                font-size: 0.62rem;
                color: rgba(1, 10, 53, 0.34);
                background: transparent;
                white-space: nowrap;
                transform: none;
            }
            .hero-benefit-item.is-active {
                color: #54c1bf;
                transform: none;
            }
            .hero-benefit-icon { display: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-benefit-item,
            .hero-benefit-icon { transition: none; }
            .hero-benefit-item.is-active .hero-benefit-icon { animation: none; }
        }

        /* Chameleon Nav Styles */
        #nav-logo-link { color: var(--nav-color, #ffffff); }

        /* ═══════════ Scroll-aware nav bar ═══════════
           Three states via [data-nav-state] on #main-nav:
           - "top"      : transparent, all elements visible, sits over hero
           - "hiding"   : nav-links-wrap fades out (logo remains visible)
           - "revealed" : solid navy backdrop slides in with the links restored
           The eyebrow text picks up its colour from --nav-color which is
           driven per-section by the existing chameleon scroll triggers. */

        /* Eyebrow-style nav item: small, uppercase, tracked, weight 500-600. */
        .nav-eyebrow {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--nav-color, #ffffff);
            background: transparent;
            border: 0;
            padding: 4px 0;
            cursor: pointer;
            transition: color 0.25s ease, opacity 0.25s ease;
            opacity: 0.85;
        }
        .nav-eyebrow:hover { opacity: 1; }
        /* Active route indicator: slightly heavier weight + full opacity. */
        .nav-eyebrow.is-active {
            font-weight: 600;
            opacity: 1;
        }

        /* Socials: small filled icons. */
        .nav-social {
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: var(--nav-color, #ffffff);
            opacity: 0.85;
            font-size: 14px;
            transition: opacity 0.25s ease;
        }
        .nav-social:hover { opacity: 1; }

        /* Backdrop default: translated up out of view. On revealed, slides
           down into place. Movement is the primary effect, opacity is
           secondary (backdrop still needs to fade because otherwise its
           translation would be masked by the backdrop-blur behind it). */
        #nav-backdrop {
            opacity: 0;
            transform: translateY(-100%);
            transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
        }

        /* Nav content groups: transitions include transform, driven by
           substantial translation to move them fully out of the visible bar
           area on scroll-down (Camper & Nicholsons pattern — the nav actually
           moves, not just fades). Opacity crossfades much shorter than the
           transform so movement is felt first. */
        #nav-center {
            transition: opacity 0.2s ease 0.05s, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        #nav-right {
            transition: opacity 0.2s ease 0.05s, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
        }

        /* State: hiding — links translate fully upward (100% of their own
           height + a little padding) so they leave the visible bar area, and
           the whole nav effectively appears to have no text. Logo stays put. */
        #main-nav[data-nav-state="hiding"] #nav-center,
        #main-nav[data-nav-state="hiding"] #nav-right {
            opacity: 0;
            pointer-events: none;
        }
        @media (min-width: 768px) {
            #main-nav[data-nav-state="hiding"] #nav-center {
                /* Composed with base centering translate to keep horizontal position. */
                transform: translate(-50%, calc(-50% - 80px));
            }
            #main-nav[data-nav-state="hiding"] #nav-right {
                /* Composed with base translate-x-[130px] so it stays horizontally aligned. */
                transform: translateX(130px) translateY(-80px);
            }
        }

        /* Mobile: the whole nav bar (logo included) hides on scroll-down. Uses
           the same movement-led fold effect as the desktop content groups. */
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            #main-nav {
                transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
            }
            #main-nav[data-nav-state="hiding"] {
                transform: translateY(-100%);
                opacity: 0;
                pointer-events: none;
            }
        }

        /* State: revealed — backdrop and content slide DOWN from above into
           their resting positions (fully in place), opacity fades in. */
        #main-nav[data-nav-state="revealed"] #nav-backdrop {
            opacity: 1;
            transform: translateY(0);
        }
        /* When revealed over a light section, force nav text to white for
           legibility against the navy backdrop (the chameleon --nav-color may
           have been set to navy for the underlying section). */
        #main-nav[data-nav-state="revealed"] .nav-eyebrow,
        #main-nav[data-nav-state="revealed"] .nav-social,
        #main-nav[data-nav-state="revealed"] #nav-logo-link {
            color: #ffffff !important;
        }

        /* Matching square controls for quote and mobile navigation. */
        .mobile-menu-square {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border: 1px solid currentColor;
            border-radius: 4px;
            color: var(--nav-color, #ffffff);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: transparent;
            transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
        }
        .mobile-menu-hamburger {
            display: flex;
            width: 17px;
            height: 14px;
            flex-direction: column;
            justify-content: space-between;
        }
        .mobile-menu-hamburger > span {
            display: block;
            width: 100%;
            background: currentColor;
            transform-origin: center;
            transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.2s ease, border-radius 0.2s ease;
        }
        .mobile-menu-hamburger > span:nth-child(1) {
            height: 4px;
            border-radius: 9px 9px 2px 2px;
        }
        .mobile-menu-hamburger > span:nth-child(2) {
            width: 15px;
            height: 2px;
            align-self: center;
            border-radius: 2px;
            background: currentColor;
        }
        .mobile-menu-hamburger > span:nth-child(3) {
            height: 4px;
            border-radius: 2px 2px 9px 9px;
        }
        body.mobile-menu-open .mobile-menu-hamburger > span:nth-child(1) {
            height: 1.5px;
            border-radius: 999px;
            transform: translateY(6.25px) rotate(45deg);
        }
        body.mobile-menu-open .mobile-menu-hamburger > span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        body.mobile-menu-open .mobile-menu-hamburger > span:nth-child(3) {
            height: 1.5px;
            border-radius: 999px;
            transform: translateY(-6.25px) rotate(-45deg);
        }

        .mobile-nav-quote {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border: 1px solid currentColor;
            border-radius: 4px;
            color: var(--nav-color, #ffffff);
            background: transparent;
            font-size: 13px;
            transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
        }
        .mobile-nav-quote-count {
            position: absolute;
            top: -3px;
            right: -3px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 0 0 1px rgba(1, 10, 53, 0.14);
        }
        #main-nav[data-nav-state="revealed"] .mobile-nav-quote,
        #main-nav.menu-open-override .mobile-nav-quote {
            color: #ffffff;
        }
        /* When mobile menu is open, force the nav into its revealed state
           (semi-transparent navy backdrop, visible content) so it stays
           anchored regardless of scroll position, without switching to a
           harsh white background. */
        #main-nav.menu-open-override { pointer-events: auto !important; }
        #main-nav.menu-open-override #nav-backdrop {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        /* Also force visibility even if the scroll state is "hiding". */
        #main-nav.menu-open-override[data-nav-state="hiding"] {
            transform: none !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        /* Shop uses the same transparent/hide/reveal behaviour as Home. Its
           light opening section needs navy controls while the nav is at the
           top or hiding; the shared revealed state above switches them to
           white against the navy backdrop. */
        body[data-page="shop"] #main-nav[data-nav-state="top"],
        body[data-page="shop"] #main-nav[data-nav-state="hiding"] {
            --nav-color: #010a35 !important;
        }
        #main-nav.menu-open-override .nav-eyebrow,
        #main-nav.menu-open-override .nav-social,
        #main-nav.menu-open-override #nav-logo-link {
            color: #ffffff !important;
        }

        /* Mobile menu dropdown: uses transform (GPU-accelerated) instead of
           max-height (janky) for a genuinely smooth reveal. Background matches
           the nav-open backdrop (semi-transparent navy with blur) so the whole
           navbar+menu reads as one unified surface. */
        .mobile-menu-dropdown {
            position: fixed; top: 58px; left: 0; right: 0;
            background: rgba(1, 10, 53, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 99;
            box-shadow: 0 8px 24px rgba(1,10,53,0.15);
            transform: translateY(-105%);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
            will-change: transform;
        }
        .mobile-menu-dropdown.open {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .mobile-menu-overlay { position: fixed; top: 58px; left: 0; right: 0; bottom: 0; background: rgba(1, 10, 53, 0.4); z-index: 98; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
        .mobile-menu-overlay.open { opacity: 1; pointer-events: all; }

        /* Section dividers between menu items — teal-tinted so they read as
           an intentional brand accent rather than a plain rule. */
        .mobile-menu-dropdown .border-b { border-bottom-color: rgba(84, 193, 191, 0.35) !important; }

        /* Mobile menu items: 13px eyebrow (uppercase, tracked). Top-level items
           get more weight than submenu items so hierarchy stays legible even
           now that both are white — bold vs. semi-opaque white. */
        .mobile-menu-item {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 13px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #ffffff;
            font-weight: 700;
        }
        .mobile-menu-subitem {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 13px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.65);
            font-weight: 500;
        }
        /* Chevron colours inside the mobile menu — off-white so they sit on
           the navy without disappearing or shouting. */
        .mobile-menu-dropdown .fa-chevron-right { color: rgba(255,255,255,0.4) !important; }

        #main-nav[data-nav-state="revealed"] .mobile-menu-square,
        #main-nav.menu-open-override .mobile-menu-square { color: #ffffff; }

        /* Teal "Get a quote" and "Talk to us" buttons inside the mobile menu
           overrides the site's default navy .btn-primary just for these two,
           so the site-wide primary style is untouched elsewhere. */
        .mobile-menu-dropdown .menu-cta-teal {
            background-color: #54c1bf !important;
            border-color: #54c1bf !important;
            color: #ffffff !important;
        }
        .mobile-menu-dropdown .menu-cta-teal-outline {
            background-color: transparent !important;
            border: 1px solid #54c1bf !important;
            color: #54c1bf !important;
        }

        /* ── Nav Button Hover: compress to navy square with yellow icon ── */
        .nav-icon-btn {
            position: relative;
            overflow: hidden;
            transition: background-color 0.3s ease, border-color 0.3s ease;
            border: 1px solid #010a35;
            box-shadow: none !important;
        }
        .nav-icon-btn .original-content,
        .nav-icon-btn .success-content {
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
        .nav-icon-btn .success-content {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.5);
            color: #FFC93C;
            pointer-events: none;
        }
        .nav-icon-btn.is-hovered {
            background-color: #010a35 !important;
            border-color: #010a35 !important;
        }
        .nav-icon-btn.is-hovered .original-content {
            opacity: 0;
            transform: scale(0.5);
        }
        .nav-icon-btn.is-hovered .success-content {
            opacity: 1;
            transform: scale(1);
        }
        /* Quote button: same look when JS toggles .is-adding (added-to-quote feedback) */
        .nav-quote-btn.is-adding {
            width: 40px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            background-color: #010a35 !important;
            border-color: #010a35 !important;
        }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            .nav-quote-btn.is-adding {
                width: 44px !important; /* Keep mobile icon square matching 44px height */
            }
        }
        .nav-quote-btn.is-adding .original-content { opacity: 0; transform: scale(0.5); }
        .nav-quote-btn.is-adding .success-content { opacity: 1 !important; transform: scale(1); }

        #core-range-track {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            -ms-overflow-style: none;
            scrollbar-width: none;
            cursor: grab;
        }
        #core-range-track.dragging {
            scroll-behavior: auto;
            scroll-snap-type: none;
            cursor: grabbing;
        }
        #core-range-track::-webkit-scrollbar { display: none; }
        #core-range-track-outer { overflow: visible; }
        
        .cr-card {
            scroll-snap-align: start;
            flex-shrink: 0;
            user-select: none;
            -webkit-user-select: none;
        }

        @media (min-width: 768px) {
            #core-range-track { gap: 16px; scroll-snap-type: none; }
            .cr-card { width: calc((100vw - 192px) / 4.5); scroll-snap-align: none; }
        }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            #core-range-track { gap: 16px; }
            /* Lead with one substantial product card while leaving enough of
               the next card visible to make the horizontal interaction clear. */
            .cr-card { width: 82%; }
        }

        .cr-arrow-circle { width: 36px !important; height: 36px !important; box-shadow: 0 2px 16px rgba(1,10,53,0.22), 0 0 0 3px white; }
        @media (min-width: 768px) { .cr-arrow-circle { width: 48px !important; height: 48px !important; } }
        .cr-dot { width: 6px; height: 6px; background: #d1d5db; transition: background 0.2s ease, width 0.2s ease; }
        .cr-dot.active { background: #010a35; width: 18px; }

        .sr-stat-number { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: #FFC93C; line-height: 1; }
        .sr-stat-label { font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.35rem; font-family: 'Plus Jakarta Sans', sans-serif; }

        #quote-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; }
        #quote-modal-overlay.active { display: flex !important; }
        #quote-modal-overlay.active #quote-modal-content { transform: scale(1); opacity: 1; }
        #quote-modal-content { transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275); transform: scale(0.9); opacity: 0; width: 100%; max-width: 64rem; background: white; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
        .quote-table { width: 100%; border-collapse: collapse; font-family: 'Plus Jakarta Sans', sans-serif; }
        .quote-table th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; text-align: left; }
        .quote-table td { padding: 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; font-size: 0.875rem; }
        .quote-table tr:last-child td { border-bottom: none; }
        .quote-table tr:hover td { background: #f8fafc; }
        .quote-thumb { width: 44px; height: 44px; overflow: hidden; background: #f8fafc; border: 1px solid #e5e7eb; }
        .quote-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .quote-spec-tag { font-size: 0.75rem; font-weight: 500; color: #374151; }
        .quote-na { color: #d1d5db; }
        .quote-mobile-list { display: none; }
        .idx-scrollbar::-webkit-scrollbar { width: 6px; }
        .idx-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .idx-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; }

        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            #quote-modal-overlay {
                align-items: stretch;
                padding: 0;
                background: #ffffff;
            }
            #quote-modal-content {
                height: 100dvh;
                max-height: 100dvh;
                border-radius: 0;
                box-shadow: none;
            }
            #quote-modal-content .quote-modal-header {
                padding: 1.25rem 1.5rem;
            }
            #quote-modal-content #close-quote-modal {
                width: 44px;
                height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 44px;
                border: 1px solid rgba(1, 10, 53, 0.1);
                border-radius: 4px;
            }
            #quote-modal-content #quote-items-list { padding: 1.25rem 1.5rem; }
            #quote-modal-content #quote-request-form {
                padding: 1.25rem 1.5rem 1.5rem;
                gap: 0.875rem;
            }
            #quote-modal-content #quote-request-form input {
                min-height: 44px;
                border-radius: 4px;
            }
            #quote-modal-content #quote-submit-btn { min-height: 48px; height: 48px; }
            .quote-desktop-list { display: none; }
            .quote-mobile-list { display: grid; gap: 0.75rem; }
            .quote-mobile-card {
                padding: 1rem;
                border: 1px solid rgba(1, 10, 53, 0.11);
                border-radius: 4px;
                background: #ffffff;
            }
            .quote-mobile-card-header {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 0.75rem;
                padding-bottom: 0.875rem;
                border-bottom: 1px solid rgba(1, 10, 53, 0.08);
            }
            .quote-mobile-product {
                min-width: 0;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }
            .quote-mobile-thumb {
                width: 56px;
                height: 56px;
                flex: 0 0 56px;
                overflow: hidden;
                border-radius: 4px;
                background: #f5f7f8;
            }
            .quote-mobile-thumb img { width: 100%; height: 100%; object-fit: cover; }
            .quote-mobile-kicker,
            .quote-mobile-specs dt {
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: 0.625rem;
                font-weight: 600;
                line-height: 1.35;
                letter-spacing: 0.09em;
                text-transform: uppercase;
                color: rgba(1, 10, 53, 0.48);
            }
            .quote-mobile-name {
                margin-top: 0.2rem;
                font-family: 'DM Sans', sans-serif;
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.25;
                color: #010a35;
            }
            .quote-mobile-actions { display: flex; flex-shrink: 0; gap: 0.25rem; }
            .quote-mobile-actions button {
                width: 44px;
                height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(1, 10, 53, 0.12);
                border-radius: 4px;
                color: rgba(1, 10, 53, 0.55);
                background: #ffffff;
                font-size: 0.75rem;
            }
            .quote-mobile-specs {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.75rem 1rem;
                padding-top: 0.875rem;
            }
            .quote-mobile-specs dd {
                margin-top: 0.2rem;
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: 0.75rem;
                font-weight: 500;
                line-height: 1.45;
                color: #010a35;
                overflow-wrap: anywhere;
            }
            .quote-mobile-artwork { grid-column: 1 / -1; }
            .quote-mobile-artwork dd { display: flex; align-items: center; gap: 0.4rem; }
        }
        
        .section-card { background: #ffffff; border: 1px solid #e8e8e8; border-radius: 4px; box-shadow: none; margin-left: 0; margin-right: 0; margin-top: 8px; margin-bottom: 8px; overflow: visible; }
        @media (min-width: 768px) { .section-card { margin-top: 12px; margin-bottom: 12px; } }

        section[id], div[id] { scroll-margin-top: 100px; }

        .quote-badge { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%) scale(0.5); min-width: 18px; height: 18px; background: #010a35; color: white; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid white; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; line-height: 1; z-index: 20; }
        .quote-badge.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

        body { font-family: 'Plus Jakarta Sans', 'sans-serif'; color: #010a35; background-color: #fafafa; padding-top: 0px; transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        body.submenu-open { padding-top: 48px; }

        @media (max-width: 768px) {
            h2.section-heading { font-size: 2rem; }
        }

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        #submenu-row { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; opacity: 0; }
        #submenu-row.open { max-height: 48px; opacity: 1; }

        .accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease; }
        .accordion-item.active .accordion-content { max-height: 1200px; opacity: 1; }
        .accordion-item { transition: border-color 0.4s ease; }
        .accordion-item.active { border-color: #54c1bf !important; }
        .accordion-icon { transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease; display: flex; align-items: center; justify-content: center; }
        .accordion-item.active .accordion-icon { transform: rotate(180deg); color: #54c1bf !important; }
        
        .industry-accordion-item { border: 1px solid rgba(1,10,53,0.1) !important; border-bottom-width: 1px !important; padding-bottom: 0 !important; margin-bottom: 8px; border-radius: 4px !important; overflow: hidden; }
        .industry-accordion-item.active { border-color: #54c1bf !important; }
        .industry-accordion-item .accordion-content { border-top: 1px solid rgba(1,10,53,0.08); }
        
        .industry-card, .product-card, .product-card-static, .project-card-full, section, div[id^="hero-container"], .technical-inset, .industry-expansion-item, .product-selector-square { border-radius: 0.375rem; }

        /* ═══ Industry card: new design (Jul 2026) ═══
           Cards are square, always-visible content sits over a background image.
           Rest state uses a navy overlay for tint (or a pre-tinted `image` from
           Supabase); hover cross-fades to `image_hover` (untinted, full color)
           if provided, otherwise fades out the CSS tint.

           Structure:
             - Top ~33% is text-free (visual breathing zone)
             - Content column: heading, description in the lower two-thirds
             - CTA sits in the bottom-right corner
             - All four card headings vertically align because content starts at
               a fixed offset from the top (not floated to bottom or top)
             - Subtle scale-up on hover (1.03), full card scales as one unit */

        .industry-card {
            position: relative;
            cursor: pointer;
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .industry-card:hover {
            transform: scale(1.03);
            z-index: 10;
        }

        .industry-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            aspect-ratio: 1 / 1;
            container-type: inline-size;
            container-name: industry-card;
            /* Solid white background while images are disabled so text has
               something to sit on. Also picks up the teal hover border below. */
            background: #ffffff;
            border: 1px solid transparent;
            transition: border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .industry-card:hover .industry-image-container {
            border-color: rgba(84, 193, 191, 0.55);
            box-shadow: 0 8px 24px rgba(1, 10, 53, 0.10);
        }

        /* Images are currently disabled so text layout can be established
           without visual distraction. When re-enabled, set display:block. */
        .ic-base-image,
        .ic-hover-image {
            display: none;
        }

        /* CSS tint overlay — retained for later when images return. Hidden
           for now since the container itself is navy. */
        .ic-tint-overlay {
            display: none;
        }

        /* Legibility gradient wash at the bottom of the card. Retained for
           when images return; currently invisible against the solid navy
           background but does no harm. */
        .ic-legibility-gradient {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 65%;
            background: linear-gradient(
                to top,
                rgba(1, 10, 53, 0.75) 0%,
                rgba(1, 10, 53, 0.45) 40%,
                rgba(1, 10, 53, 0) 100%
            );
            z-index: 4;
            pointer-events: none;
        }

        /* Content column: sits in the lower two-thirds of the card.
           padding-top: 33.33% pushes content down to the two-thirds line,
           guaranteeing all four card headings align to the same y-position
           regardless of description length. */
        .ic-content {
            position: absolute;
            inset: 0;
            z-index: 5;
            padding: 33.33% 24px 24px 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #ffffff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            pointer-events: none;
        }
        .ic-content > * { pointer-events: auto; }

        /* Heading and description now share the Plus Jakarta Sans stack
           used across product card labels, so industry cards read as a set
           with the product grid. Retains the previous sizing. */
        .ic-heading {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 500;
            font-size: 22px;
            line-height: 1.15;
            letter-spacing: -0.01em;
            margin-bottom: 8px;
            color: #010a35;
        }
        .ic-desc {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 12.5px;
            line-height: 1.55;
            font-weight: 400;
            color: rgba(1, 10, 53, 0.7);
            margin-bottom: 18px;
        }

        /* CTA sits in the bottom-right corner of the card. Text-only ("View
           Range >") so it doesn't compete with content — the whole card is
           the clickable region anyway. */
        .ic-cta {
            position: absolute;
            right: 24px;
            bottom: 24px;
            z-index: 6;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: transparent;
            color: #010a35;
            padding: 6px 0;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.02em;
            border: 0;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: color 0.2s ease, gap 0.25s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .industry-card:hover .ic-cta { color: #54c1bf; gap: 10px; }

        /* Resting-state label under the card (industry name below the image)
           is no longer needed — heading lives on the card itself now. Hide
           the leftover h4 tag if present. */
        .industry-card > h4 { display: none; }

        /* ═══ Container queries: shrink content when the card is squeezed at
           narrow viewports (below the md: breakpoint the grid may drop to
           2-per-row anyway, but this handles awkward in-between widths). */
        @container industry-card (max-width: 260px) {
            .ic-content  { padding: 33.33% 18px 18px 18px; }
            .ic-heading  { font-size: 18px; }
            .ic-desc     { font-size: 11.5px; margin-bottom: 14px; }
            .ic-cta      { right: 18px; bottom: 18px; font-size: 11px; }
        }
        @container industry-card (max-width: 210px) {
            .ic-content  { padding: 33.33% 14px 14px 14px; }
            .ic-heading  { font-size: 16px; margin-bottom: 6px; }
            .ic-desc     { font-size: 11px; line-height: 1.5; margin-bottom: 12px; }
        }

        .btn-primary { background-color: #010a35; color: #ffffff; border: 1px solid #010a35; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; }
        .btn-primary:hover:not(:disabled) { background-color: #FFC93C; color: #010a35; border-color: #FFC93C; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
        .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

        .yellow-arrow-btn { width: 44px; height: 44px; background: #010a35; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFC93C; transition: background 0.3s ease, color 0.3s ease; flex-shrink: 0; }
        .yellow-arrow-btn:hover { background: #54c1bf; color: white; }

        /* Industry kit modal (replaces the old inline expansion container).
           Backdrop with blur; content is white, centered, with 4px radius to
           match the site's border-radius pattern. */
        #industry-kit-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(1, 10, 53, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        #industry-kit-modal.open {
            opacity: 1;
            pointer-events: auto;
        }
        .ikm-panel {
            background: #ffffff;
            border-radius: 4px;
            width: 100%;
            max-width: 980px;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(1, 10, 53, 0.25);
            transform: translateY(12px) scale(0.98);
            transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        #industry-kit-modal.open .ikm-panel {
            transform: translateY(0) scale(1);
        }
        .ikm-header {
            padding: 24px 32px 20px;
            border-bottom: 1px solid rgba(1, 10, 53, 0.08);
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
            flex-shrink: 0;
        }
        .ikm-eyebrow {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #54c1bf;
            margin: 0 0 6px;
        }
        .ikm-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 500;
            font-size: 24px;
            letter-spacing: -0.01em;
            color: #010a35;
            margin: 0;
        }
        .ikm-close {
            background: transparent;
            border: 0;
            padding: 6px;
            cursor: pointer;
            color: rgba(1, 10, 53, 0.55);
            display: flex;
            transition: color 0.2s ease;
            margin-top: -4px;
        }
        .ikm-close:hover { color: #010a35; }
        .ikm-body {
            padding: 0;
            background: #ffffff;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* ═══ Two-panel walkthrough layout ═══
           Left: product image with an overlay tag (populated in Step 5).
           Right: product detail — name, price, description, features, sizes.
           Bottom: horizontal navigator of the six products in the kit. */
        .ikm-walkthrough {
            display: grid;
            grid-template-columns: 5fr 6fr;
            min-height: 380px;
            flex-shrink: 0;
        }
        .ikm-image-panel {
            position: relative;
            background: #f4f6f8;
            overflow: hidden;
            min-height: 320px;
        }
        .ikm-image-panel img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s ease;
        }
        /* Image tag — a small floating pill in the top-left. Renders only when
           the product has a tag (Step 5 data). Hidden by default. */
        .ikm-image-tag {
            position: absolute;
            top: 20px;
            left: 20px;
            background: #ffffff;
            color: #010a35;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 11px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 999px;
            box-shadow: 0 2px 8px rgba(1, 10, 53, 0.1);
        }
        .ikm-image-tag:empty { display: none; }

        .ikm-detail-panel {
            padding: 28px 32px 24px;
            display: flex;
            flex-direction: column;
            font-family: 'Plus Jakarta Sans', sans-serif;
            position: relative;
        }
        .ikm-detail-name {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 500;
            font-size: 24px;
            letter-spacing: -0.01em;
            color: #010a35;
            margin: 0 0 6px;
            line-height: 1.15;
        }
        .ikm-detail-price {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: #54c1bf;
            margin: 0 0 14px;
        }
        .ikm-detail-price:empty { display: none; }
        .ikm-detail-minorder {
            position: absolute;
            top: 28px;
            right: 32px;
            text-align: right;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .ikm-detail-minorder p {
            margin: 0;
            font-size: 10px;
            color: rgba(1, 10, 53, 0.55);
            font-weight: 500;
        }
        .ikm-detail-minorder strong {
            display: block;
            font-size: 14px;
            font-weight: 700;
            color: #010a35;
            margin-top: 2px;
        }
        .ikm-detail-minorder:empty { display: none; }

        .ikm-detail-desc {
            font-size: 13px;
            line-height: 1.55;
            color: rgba(1, 10, 53, 0.75);
            margin: 0 0 20px;
            font-weight: 400;
            max-width: 90%;
        }
        .ikm-detail-desc:empty { display: none; }

        /* Section label + content pattern used for Sizes and Features. */
        .ikm-detail-section {
            margin-bottom: 18px;
        }
        .ikm-detail-section-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(1, 10, 53, 0.45);
            margin: 0 0 10px;
        }
        .ikm-sizes {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 16px;
        }
        .ikm-size-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            color: rgba(1, 10, 53, 0.8);
            line-height: 1.4;
        }
        .ikm-size-item i {
            color: #54c1bf;
            font-size: 10px;
            margin-top: 4px;
        }
        .ikm-size-hint {
            font-size: 10px;
            color: rgba(1, 10, 53, 0.45);
            font-style: italic;
            margin: 8px 0 0;
        }
        .ikm-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 16px;
        }
        .ikm-feature {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            color: rgba(1, 10, 53, 0.8);
            line-height: 1.4;
        }
        .ikm-feature i {
            color: #54c1bf;
            font-size: 10px;
            margin-top: 4px;
        }

        .ikm-add-btn {
            align-self: flex-start;
            background: #54c1bf;
            color: #ffffff;
            border: 1px solid #54c1bf;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s ease, border-color 0.2s ease;
            margin-top: auto;
        }
        .ikm-add-btn:hover {
            background: #3fa8a6;
            border-color: #3fa8a6;
        }
        .ikm-add-btn.in-kit {
            background: transparent;
            color: #54c1bf;
        }

        /* Navigator row — horizontal strip of tiles for switching products. */
        .ikm-nav-row {
            display: flex;
            gap: 12px;
            padding: 20px 32px;
            background: #fafbfc;
            border-top: 1px solid rgba(1, 10, 53, 0.06);
            overflow-x: auto;
            flex-shrink: 0;
        }
        .ikm-nav-row::-webkit-scrollbar { height: 0; display: none; }
        .ikm-nav-tile {
            flex: 1 1 0;
            min-width: 0;
            max-width: 180px;
            border: 2px solid transparent;
            border-radius: 4px;
            background: #ffffff;
            padding: 8px;
            cursor: default; /* Step 3 will enable click */
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }
        .ikm-nav-tile.viewing {
            border-color: #54c1bf;
        }
        .ikm-nav-tile-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: #f4f6f8;
            border-radius: 2px;
            overflow: hidden;
        }
        .ikm-nav-tile-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .ikm-nav-tile-name {
            font-size: 11px;
            font-weight: 500;
            color: #010a35;
            line-height: 1.2;
            margin: 0;
        }

        .ikm-footer {
            padding: 18px 32px;
            border-top: 1px solid rgba(1, 10, 53, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-shrink: 0;
        }
        .ikm-count {
            font-size: 12px;
            color: rgba(1, 10, 53, 0.7);
            margin: 0;
        }
        .ikm-count strong {
            font-weight: 700;
            color: #010a35;
        }
        #ikm-count-hint {
            color: rgba(1, 10, 53, 0.5);
        }
        .ikm-actions {
            display: flex;
            gap: 10px;
        }
        .ikm-btn-secondary {
            background: transparent;
            color: #010a35;
            border: 1px solid rgba(1, 10, 53, 0.15);
            padding: 10px 18px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .ikm-btn-secondary:hover {
            border-color: #010a35;
        }
        .ikm-btn-primary {
            background: #010a35;
            color: #ffffff;
            border: 1px solid #010a35;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s ease;
        }
        .ikm-btn-primary:hover:not(:disabled) {
            background: #1a2450;
        }
        .ikm-btn-primary:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        @media (max-width: 760px) {
            .ikm-header, .ikm-footer { padding-left: 20px; padding-right: 20px; }
            .ikm-detail-panel { padding: 24px 20px; }
            .ikm-nav-row { padding: 16px 20px; }
            .ikm-walkthrough { grid-template-columns: 1fr; }
            .ikm-image-panel { min-height: 220px; aspect-ratio: 4/3; }
            .ikm-detail-minorder { position: static; text-align: left; margin: 0 0 12px; }
            .ikm-detail-desc { max-width: 100%; }
            .ikm-features { grid-template-columns: 1fr; }
            .ikm-title { font-size: 20px; }
            .ikm-detail-name { font-size: 20px; }
            .ikm-footer { flex-direction: column; align-items: stretch; }
            .ikm-actions { justify-content: space-between; }
        }

        .industry-card.active-industry { width: calc(50% - 0.5rem); }
        .industry-card.active-industry .industry-image-container { box-shadow: 0 0 0 3px #FFC93C; border-radius: 0.375rem; }
        .mobile-expansion-row { grid-column: 1 / -1; }
        
        .product-selector-square { position: relative; aspect-ratio: 1/1; cursor: pointer; overflow: hidden; border: 2px solid transparent; transition: all 0.3s ease; background: #f8fafc; border-radius: 4px; }
        .product-selector-square.selected { border-color: #54c1bf; background: white; box-shadow: 0 10px 25px -10px rgba(84, 193, 191, 0.3); }
        .product-selector-square img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; border-radius: 4px; }
        .product-selector-square.selected img { transform: scale(1.05); opacity: 0.7; }
        .selection-indicator { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; background: #54c1bf; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; transform: scale(0.5); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10; }
        .product-selector-square.selected .selection-indicator { opacity: 1; transform: scale(1); }
        
        .product-label { position: absolute; bottom: 0; left: 0; right: 0; background: #010a35; padding: 0.35rem 0.4rem; color: white; font-size: 0.65rem; font-weight: 300; z-index: 5; text-align: left; line-height: 1.2; display: flex; align-items: center; min-height: 1.6rem; }
        .project-nav-btn { padding: 0.75rem 1rem; text-align: left; border-bottom: 2px solid transparent; transition: all 0.3s ease; opacity: 0.6; }
        .project-nav-btn.active { opacity: 1; border-bottom-color: #54c1bf; font-weight: 700; }
        
        .outcome-pill { background: #f8fafc; border: 1px solid #e2e8f0; padding: 0.5rem 1rem; border-radius: 0; font-size: 0.75rem; font-weight: 700; color: #010a35; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; }
        #case-study-modal.active { display: flex !important; }
        #guidance-modal.active { display: flex !important; }
        .cs-service-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: #54c1bf; color: white; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; }

        .service-card { cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
        .service-card.active { border-color: #54c1bf !important; box-shadow: 0 0 0 1px #54c1bf; }
        .service-features { overflow: hidden; max-height: 0; transition: max-height 0.5s ease, opacity: 0.3s ease; opacity: 0; }
        .service-features.visible { max-height: 800px; opacity: 1; }
        
        @media (max-width: 1023px) { .service-card.active .service-card-mobile-features { display: block; } }
        @media (min-width: 1024px) { .service-card-mobile-features { display: none !important; } }
        
        @keyframes blob-breathe-1 {
            0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.15; }
            100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.25; }
        }
        .ambient-blob {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            filter: blur(65px);
            pointer-events: none;
            z-index: -1;
        }
        .blob-yellow {
            background-color: #FFC93C;
            animation: blob-breathe-1 7s ease-in-out infinite alternate;
            margin-left: -25px;
            margin-top: -15px;
        }

    
        /* ───── Shop-page styles (merged) ───── */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .logo-svg { width: 120px; height: auto; }
        .logo-path { 
            fill: transparent; 
            stroke: #010a35; 
            stroke-width: 1.5; 
            stroke-linecap: round; 
            stroke-linejoin: round;
            /* Hide stroke initially to prevent flash before JS loads */
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
        }
        .rollover-image-stage { position: relative; }
        .rollover-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            transition: opacity 0.38s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .rollover-image--primary { z-index: 0; opacity: 1; }
        .rollover-image--secondary { z-index: 1; opacity: 0; }
        .bundle-image-box img { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
        @media (hover: hover) and (pointer: fine) {
            .has-rollover:hover .rollover-image--primary,
            .has-rollover:focus-visible .rollover-image--primary {
                opacity: 0;
                transform: scale(1.02);
            }
            .has-rollover:hover .rollover-image--secondary,
            .has-rollover:focus-visible .rollover-image--secondary {
                opacity: 1;
                transform: scale(1.05);
            }
            .product-card-image:not(.has-rollover):hover .rollover-image--primary,
            .product-card-image:not(.has-rollover):focus-visible .rollover-image--primary,
            .bundle-image-box:hover img { transform: scale(1.05); }
        }
        /* Product cards use the shared component-heading and UI-label styles. */
        .pc-name  { font-family: 'DM Sans', sans-serif; font-weight: 500; color: #010a35; line-height: 1.25; letter-spacing: 0; font-size: 1rem; text-wrap: balance; }
        .pc-price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; color: #54c1bf; letter-spacing: 0.02em; font-size: 0.8125rem; line-height: 1.35; margin-top: 0.625rem; }
        .product-card-image { display: block; padding: 0; text-align: left; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
        .product-card-image:hover,
        .product-card-image:focus-visible { border-color: #54c1bf; box-shadow: 0 0 0 2px rgba(84,193,191,0.2); outline: none; }
        /* Category count + promo card text (also JS-injected → real CSS) */
        .pc-count { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; color: rgba(1,10,53,0.5); letter-spacing: 0.02em; font-size: 0.8125rem; line-height: 1.35; }
        .promo-kicker { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: 0.02em; font-size: 9px; }
        .promo-text   { font-family: 'DM Sans', sans-serif; font-weight: 500; line-height: 1.15; font-size: 15px; }
        .promo-url    { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: 0.02em; font-size: 10px; opacity: 0.8; }
        /* Nav-eyebrow style shop filters — Direction C (tag treatment).
           Small caps + tracked eyebrow text set the vocabulary, but each item
           sits in a hairline navy tag so it reads unambiguously as "clickable
           filter." Active industry fills teal; active "Shop All" fills navy
           (null-state affordance). 4px corners honor the site's radius token. */
        .shop-search-shell {
            position: relative;
            width: 100%;
            margin: 0 0 2rem;
        }
        #visual-filters-container {
            position: relative;
        }
        .shop-header-art {
            display: none;
        }
        @media (min-width: 1280px) {
            .shop-header-art {
                position: absolute;
                right: -146px;
                bottom: calc(100% + 0.5rem);
                display: flex;
                width: clamp(15rem, 18vw, 16rem);
                max-height: 16rem;
                align-items: center;
                justify-content: flex-end;
                overflow: hidden;
                pointer-events: none;
            }
            .shop-header-art img {
                display: block;
                width: 100%;
                height: auto;
                max-height: 16rem;
                object-fit: contain;
                object-position: right center;
            }
        }
        .shop-intro {
            padding-top: 5.5rem;
            padding-bottom: 4rem;
        }
        .shop-intro-copy {
            max-width: 42rem;
            margin: 1rem auto 0;
            color: rgba(1, 10, 53, 0.68);
        }
        .shop-desktop-filter-grid {
            grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
            gap: 2rem;
            align-items: start;
        }
        .shop-desktop-filter-group {
            min-width: 0;
        }
        .shop-desktop-filter-track {
            display: flex;
            width: 100%;
            min-width: 0;
            align-items: center;
            gap: 0.5rem;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 0.25rem;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .shop-desktop-filter-track::-webkit-scrollbar { display: none; }
        .shop-search-input {
            width: 100%;
            min-height: 52px;
            padding: 0.75rem 3rem 0.75rem 3rem;
            border: 1px solid rgba(1, 10, 53, 0.18);
            border-radius: 4px;
            background: #ffffff;
            color: #010a35;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.4;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        }
        .shop-search-input::placeholder { color: rgba(1, 10, 53, 0.42); }
        .shop-search-input:focus {
            border-color: #54c1bf;
            box-shadow: 0 0 0 3px rgba(84, 193, 191, 0.16);
            outline: none;
        }
        .shop-search-input.has-value { background: #f7fbfb; border-color: #54c1bf; }
        .shop-search-input::-webkit-search-cancel-button { display: none; }
        .shop-search-icon {
            position: absolute;
            left: 1.125rem;
            top: 50%;
            z-index: 1;
            transform: translateY(-50%);
            color: #54c1bf;
            font-size: 0.75rem;
            pointer-events: none;
        }
        .shop-search-clear {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-50%);
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: rgba(1, 10, 53, 0.55);
            cursor: pointer;
        }
        .shop-search-clear:hover { background: #eef8f7; color: #010a35; }
        .shop-search-clear.hidden { display: none; }

        .filter-group-label,
        .shop-filter-label {
            display: block;
            margin: 0 0 0.75rem 0.25rem;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.6875rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #54c1bf;
        }
        .filter-card {
            appearance: none;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(1, 10, 53, 0.75);
            cursor: pointer;
            padding: 8px 14px;
            border: 1px solid rgba(1, 10, 53, 0.12);
            border-radius: 4px;
            background: transparent;
            transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .filter-card:hover {
            color: #010a35;
            border-color: rgba(1, 10, 53, 0.35);
        }
        .filter-card.active {
            font-weight: 600;
            color: #ffffff;
            background: #54c1bf;
            border-color: #54c1bf;
        }
        /* "Shop All" active state — navy outline + navy text (reset / null
           affordance), distinct from teal-filled "chosen a filter" state. */
        .filter-card[data-filter-id="all"].active {
            color: #010a35;
            background: transparent;
            border-color: #010a35;
            font-weight: 600;
        }

        .filter-card:focus-visible,
        .filter-clear-all:focus-visible,
        .active-filter-chip:focus-visible,
        .floating-filter-trigger:focus-visible {
            outline: 2px solid #54c1bf;
            outline-offset: 2px;
        }

        .shop-filter-label { margin-left: 0; margin-bottom: 0.5rem; }
        .shop-filter-select {
            min-height: 44px;
            padding: 0.625rem 2.25rem 0.625rem 0.875rem;
            border: 1px solid rgba(1, 10, 53, 0.22);
            border-radius: 4px;
            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='%23010a35' d='M6 8 1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.9rem center;
            font-size: 0.8125rem;
            font-weight: 500;
            line-height: 1.35;
            transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        }
        .shop-filter-select:hover { border-color: rgba(1, 10, 53, 0.45); }
        .shop-filter-select:focus {
            border-color: #54c1bf;
            box-shadow: 0 0 0 2px rgba(84, 193, 191, 0.18);
            outline: none;
        }
        .shop-filter-select.is-active {
            border-color: #54c1bf;
            background-color: #eef8f7 !important;
            box-shadow: inset 3px 0 0 #54c1bf;
            font-weight: 600;
        }

        .filter-results-bar {
            min-height: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        .active-filter-summary,
        .active-filter-chips {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .active-filter-summary.hidden,
        .floating-filter-count.hidden { display: none; }
        .filter-summary-label {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.625rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(1, 10, 53, 0.5);
        }
        .active-filter-chip {
            appearance: none;
            min-height: 30px;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.4rem 0.625rem;
            border: 1px solid #54c1bf;
            border-radius: 4px;
            background: #eef8f7;
            color: #010a35;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.6875rem;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
        }
        .active-filter-chip i { color: #54c1bf; font-size: 0.5625rem; }
        .active-filter-chip:hover { background: #dff3f1; }
        .filter-clear-all {
            appearance: none;
            padding: 0.35rem 0;
            border: 0;
            border-bottom: 1px solid rgba(1, 10, 53, 0.35);
            background: transparent;
            color: rgba(1, 10, 53, 0.68);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.6875rem;
            font-weight: 600;
            cursor: pointer;
        }
        .filter-clear-all:hover { color: #010a35; border-color: #010a35; }
        .filter-product-count {
            flex: none;
            margin: 0;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.35;
            color: rgba(1, 10, 53, 0.55);
        }

        .filter-drawer-pill.active {
            border-color: #54c1bf !important;
            background: #54c1bf !important;
            color: #010a35 !important;
        }
        .filter-drawer-search-shell { position: relative; }
        .filter-drawer-search-shell > i {
            position: absolute;
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            color: #54c1bf;
            font-size: 0.6875rem;
            pointer-events: none;
        }
        .filter-drawer-search-shell input {
            width: 100%;
            min-height: 44px;
            padding: 0.625rem 0.875rem 0.625rem 2.5rem;
            border: 1px solid rgba(1, 10, 53, 0.18);
            border-radius: 4px;
            color: #010a35;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.8125rem;
            outline: none;
        }
        .filter-drawer-search-shell input:focus { border-color: #54c1bf; box-shadow: 0 0 0 2px rgba(84, 193, 191, 0.16); }

        /* Teal separator dividing the filter strip from the shop content. */
        .filter-separator {
            border: 0;
            border-top: 1px solid rgba(84, 193, 191, 0.55);
            margin: 28px 0 20px;
        }

        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            .shop-intro {
                padding-top: 4rem;
                padding-bottom: 2.5rem;
            }
            .shop-intro-copy {
                max-width: 30rem;
                margin-top: 0.875rem;
            }
            .shop-search-shell { margin-bottom: 1rem; }
            .shop-search-input { min-height: 48px; font-size: 0.8125rem; }
            .filter-separator { margin: 1.25rem 0 0.875rem; }
            .filter-results-bar {
                align-items: flex-start;
                flex-direction: column;
                gap: 0.75rem;
                margin-bottom: 1rem;
            }
            .active-filter-summary { align-items: flex-start; }
            .filter-summary-label { width: 100%; }
            .filter-product-count { order: -1; }
        }

        /* Keep the magnetic + goo effect fully out of the nav-style filters. */
        #industry-goo-layer, #product-goo-layer { display: none; }
        .filter-magnetic-item {
            cursor: pointer;
            will-change: transform;
            transform-origin: center center;
        }
        .goo-merge-layer {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            padding: 15px;
            margin: -15px;
            filter: url('#goo');
            pointer-events: none;
            z-index: 1;
        }
        .nav-goo-cluster .goo-merge-layer { gap: 4px; }
        .filter-goo-cluster .goo-merge-layer { gap: 16px; }
        .goo-blob {
            display: block;
            background: #ffffff;
            border-radius: 4px;
            flex: none;
            will-change: transform, width, height;
        }
        .option-btn {
            border: 1px solid #e5e7eb; padding: 0.5rem 1rem;
            border-radius: 4px; font-size: 0.875rem;
            transition: all 0.2s ease; background: #fff;
        }
        .option-btn.selected {
            border-color: #010a35; background-color: #010a35;
            color: #fff; font-weight: 600;
        }
        .artwork-choice-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.5rem;
        }
        .artwork-choice-card {
            min-width: 0;
            min-height: 4.5rem;
            display: grid;
            grid-template-columns: 1.25rem minmax(0, 1fr);
            align-content: center;
            align-items: center;
            column-gap: 0.625rem;
            row-gap: 0.2rem;
            padding: 0.75rem;
            text-align: left;
        }
        .artwork-choice-card > i {
            grid-row: 1 / span 2;
            color: #54c1bf;
            font-size: 0.75rem;
            text-align: center;
        }
        .artwork-choice-card > span {
            color: inherit;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1.25;
        }
        .artwork-choice-card > small {
            color: rgba(1, 10, 53, 0.5);
            font-size: 0.625rem;
            font-weight: 500;
            line-height: 1.3;
        }
        .artwork-choice-card.selected > i,
        .artwork-choice-card.selected > small { color: rgba(255, 255, 255, 0.72); }
        .artwork-choice-card[data-value="design"].selected {
            border-color: #54c1bf;
            background: #54c1bf;
            color: #010a35;
        }
        .artwork-choice-card[data-value="design"].selected > i,
        .artwork-choice-card[data-value="design"].selected > small { color: rgba(1, 10, 53, 0.68); }
        .artwork-support-note {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 1rem;
            border: 1px solid rgba(84, 193, 191, 0.3);
            border-radius: 4px;
            background: #eef8f7;
        }
        .artwork-support-note > i {
            flex: none;
            margin-top: 0.15rem;
            color: #54c1bf;
            font-size: 0.75rem;
        }
        .artwork-support-note p { margin: 0; }
        .artwork-support-note .ui-body { margin-top: 0.3rem; color: rgba(1, 10, 53, 0.68); }
        .artwork-support-note--design {
            border-color: rgba(84, 193, 191, 0.65);
            background: linear-gradient(135deg, #eef8f7 0%, #ffffff 100%);
        }
        @media (min-width: 520px) {
            .artwork-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .artwork-choice-card {
                min-height: 6rem;
                grid-template-columns: 1fr;
                justify-items: center;
                text-align: center;
            }
            .artwork-choice-card > i { grid-row: auto; }
        }
        .nav-light-mode #nav-logo-link { color: #ffffff !important; }
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px); z-index: 200; display: none;
            align-items: center; justify-content: center; padding: 1rem;
        }
        .modal-center-base {
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: scale(0.9); opacity: 0; width: 100%; max-width: 64rem;
            background: white; border-radius: 4px; max-height: 90vh;
            overflow: hidden; display: flex; flex-direction: column;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        .modal-overlay.active { display: flex !important; }
        .modal-overlay.active .modal-center-base { transform: scale(1); opacity: 1; }
        #booking-modal .modal-center-base {
            max-width: 72rem;
            height: min(94vh, 920px);
        }
        #booking-calendar-frame {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            background: #ffffff;
        }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            #booking-modal { padding: 0.5rem; }
            #booking-modal .modal-center-base { height: 96vh; }
        }
        #details-overlay, #filter-drawer-overlay {
            position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px); z-index: 200;
            opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
        }
        #details-overlay.active, #filter-drawer-overlay.active {
            opacity: 1; pointer-events: all;
        }
        .side-drawer-base {
            position: absolute; right: 0; top: 0; bottom: 0;
            width: 100%; max-width: 50rem; background: white;
            display: flex; flex-direction: column;
            box-shadow: -10px 0 40px rgba(0,0,0,0.1);
            transform: translateX(100%);
            transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }
        /* Filter drawer stays narrower — only the product details drawer widens */
        #filter-drawer-overlay .side-drawer-base { max-width: 42rem; }
        #details-overlay.active .side-drawer-base, #filter-drawer-overlay.active .side-drawer-base {
            transform: translateX(0);
        }
        .modal-thumb {
            width: 52px; height: 52px; border-radius: 4px;
            overflow: hidden; cursor: pointer; border: 2px solid transparent;
            flex-shrink: 0; transition: border-color 0.2s ease, opacity 0.2s ease; opacity: 0.55;
        }
        .modal-thumb:hover { opacity: 0.85; }
        .modal-thumb.active { border-color: #54c1bf; opacity: 1; }
        .modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .quote-quantity-entry {
            display: grid;
            gap: 0.625rem;
        }

        .quote-quantity-input-shell {
            display: flex;
            align-items: center;
            min-height: 48px;
            border: 1px solid #dfe3e8;
            border-radius: 4px;
            background: #fff;
            transition: border-color 180ms ease, box-shadow 180ms ease;
        }

        .quote-quantity-input-shell:focus-within {
            border-color: #54c1bf;
            box-shadow: 0 0 0 3px rgba(84, 193, 191, 0.12);
        }

        .quote-quantity-input-shell input {
            min-width: 0;
            flex: 1;
            border: 0;
            outline: 0;
            background: transparent;
            padding: 0.75rem 0.875rem;
            color: #010a35;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.875rem;
        }

        .quote-quantity-input-shell input::placeholder { color: #9ca3af; }

        .quote-quantity-input-shell span {
            padding: 0 0.875rem;
            border-left: 1px solid #eceff2;
            color: #6b7280;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .bundle-tier-btn {
            flex: 1; padding: 0.6rem 1rem; border-radius: 4px;
            border: 2px solid #e5e7eb; font-size: 0.75rem; font-weight: 700;
            color: #9ca3af; background: white; cursor: pointer;
            transition: all 0.2s ease; text-align: center;
        }
        .bundle-tier-btn:hover { border-color: #54c1bf; color: #010a35; }
        .bundle-tier-btn.active { border-color: #54c1bf; background: #54c1bf; color: white; }
        #bundle-modal-content .quote-thumb { width: 96px; height: 96px; }
        #bundle-modal-content .quote-table th { font-weight: 400; color: #6b7280; font-size: 0.7rem; }
        #bundle-modal-content .quote-table td { padding: 1rem; }
        #bundle-modal-content .quote-spec-tag { font-size: 0.8rem; font-weight: 300; }
        #floating-filter-btn {
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
        }
        #floating-filter-btn.hidden-float {
            transform: translateY(150px);
            opacity: 0;
            pointer-events: none;
        }
        .floating-filter-trigger {
            min-height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            padding: 0 1.25rem;
            border: 1px solid rgba(1, 10, 53, 0.18);
            border-radius: 4px;
            background: #ffffff;
            color: #010a35;
            box-shadow: 0 10px 30px rgba(1, 10, 53, 0.16);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
        }
        .floating-filter-trigger:hover {
            border-color: #54c1bf;
            background: #f8fcfc;
            transform: translateY(-1px);
        }
        .floating-filter-count {
            min-width: 1.25rem;
            height: 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.3rem;
            border-radius: 999px;
            background: #54c1bf;
            color: #010a35;
            font-size: 0.625rem;
            font-weight: 700;
        }

        /* ── About editorial split-text reveal (lines clip; words slide up) ── */
        .about-split-reveal .line {
            overflow: hidden;
            padding-bottom: 0.12em;
            margin-bottom: -0.12em;
            display: block;
        }

        /* ── Thematic value headers (ink gradient flow, structure blueprint) ── */
        .effect-ink {
            background: linear-gradient(45deg, #00B7EB 0%, #E30074 25%, #FFD700 50%, #010a35 75%, #00B7EB 100%);
            background-size: 300% 300%;
            color: transparent;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            animation: ink-flow 6s ease infinite;
            display: inline-block;
            padding-bottom: 0.1em;
        }
        @keyframes ink-flow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .effect-structure {
            color: transparent;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1.5px #54c1bf;
            background-image:
                linear-gradient(rgba(84, 193, 191, 0.4) 1px, transparent 1px),
                linear-gradient(90deg, rgba(84, 193, 191, 0.4) 1px, transparent 1px);
            background-size: 10px 10px;
            -webkit-background-clip: text;
            background-clip: text;
            animation: cad-pan 20s linear infinite;
            display: inline-block;
            padding-bottom: 0.1em;
        }
        @keyframes cad-pan {
            from { background-position: 0 0; }
            to { background-position: 100px 100px; }
        }


        /* ── About values section: four-column word-led layout ─────────
              Dividers sit between adjacent columns (rendered as a child of
              cols 2/3/4, offset left by half the gap-12). Animated states
              (scaleY 0→1 on dividers, y/opacity on text) are all driven from
              the pinned scroll timeline. ── */

        .values-divider {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -1.5rem; /* half of md:gap-12 (3rem) */
            width: 1px;
            background: rgba(1, 10, 53, 0.12);
            transform: scaleY(0);
            transform-origin: top;
            pointer-events: none;
            z-index: 1;
        }

        /* ── How It Works — Floema-style pinned stacked steps ───────────── */
        #how-it-works .hiw-head {
            cursor: pointer;
            background: none; border: none;
            position: relative;
            display: block;
            width: 100%;
            text-align: left;
            padding: 0;
            /* Active step indents to make room for the arrow that appears at left. */
            transition: padding-left 0.3s cubic-bezier(0.4,0,0.2,1);
        }
        #how-it-works .hiw-head.is-active { padding-left: 1.1em; }
        #how-it-works .hiw-head .hiw-arrow {
            position: absolute;
            left: 0; top: 50%;
            transform: translateY(-50%) translateX(-0.4em);
            color: #54c1bf;
            -webkit-text-fill-color: #54c1bf;
            font-size: 0.55em;
            line-height: 1;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;
        }
        #how-it-works .hiw-head.is-active .hiw-arrow {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
        /* The headings inherit a -webkit-text-fill-color from the site's
           text-effect styles, which overrides plain `color`. So we must set
           -webkit-text-fill-color (and color) to control the label colour. */
        #how-it-works .hiw-head .hiw-label {
            text-align: left;
            color: rgba(1, 10, 53, 0.35);
            -webkit-text-fill-color: rgba(1, 10, 53, 0.35);
            transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
        }
        #how-it-works .hiw-head:hover .hiw-label { color: rgba(1, 10, 53, 0.55); -webkit-text-fill-color: rgba(1, 10, 53, 0.55); }
        #how-it-works .hiw-head.is-active .hiw-label { color: #010a35; -webkit-text-fill-color: #010a35; }
        #how-it-works .hiw-head.is-active:hover .hiw-label { color: #010a35; -webkit-text-fill-color: #010a35; }
        .hiw-media-slide, .hiw-text-slide { will-change: opacity; }
        /* Mobile accordion: panels collapse/expand on tap */
        .hiw-acc-panel {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
        }
        .hiw-acc-item.is-open .hiw-acc-panel { max-height: 320px; opacity: 1; }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            #how-it-works .hiw-head .hiw-label { color: #010a35; -webkit-text-fill-color: #010a35; }
            #how-it-works .hiw-head { padding-left: 0; }
            #how-it-works .hiw-head .hiw-arrow { opacity: 0; }

            /* Normal portrait mobile experience: a compact sticky stage. The
               existing accordion remains untouched until JS confirms that the
               viewport can support the scroll-driven version. */
            #how-it-works.hiw-mobile-scroll #hiw-pin {
                min-height: 100svh;
                height: 100dvh;
                box-sizing: border-box;
                padding-top: 6rem;
                padding-bottom: 2rem;
                overflow: hidden;
            }
            #how-it-works.hiw-mobile-scroll #hiw-eyebrow { margin-bottom: 1.5rem; }
            #how-it-works.hiw-mobile-scroll #hiw-pin > div > .grid {
                row-gap: 1.35rem;
                min-height: 0;
            }
            #how-it-works.hiw-mobile-scroll .hiw-acc-panel { display: none; }
            #how-it-works.hiw-mobile-scroll .hiw-steps .flex.flex-col { gap: 0; }
            #how-it-works.hiw-mobile-scroll .hiw-acc-item { border-color: rgba(1, 10, 53, 0.07); }
            #how-it-works.hiw-mobile-scroll .hiw-head {
                padding-top: 0.42rem;
                padding-bottom: 0.42rem;
                font-size: clamp(1.65rem, 8vw, 2rem);
                line-height: 1.12;
            }
            #how-it-works.hiw-mobile-scroll .hiw-head .hiw-label {
                color: rgba(1, 10, 53, 0.3);
                -webkit-text-fill-color: rgba(1, 10, 53, 0.3);
            }
            #how-it-works.hiw-mobile-scroll .hiw-head.is-active {
                padding-left: 1.05em;
            }
            #how-it-works.hiw-mobile-scroll .hiw-head.is-active .hiw-label {
                color: #010a35;
                -webkit-text-fill-color: #010a35;
            }
            #how-it-works.hiw-mobile-scroll .hiw-head.is-active .hiw-arrow {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
            }
            #how-it-works.hiw-mobile-scroll .hiw-panel-text {
                display: block;
                position: relative;
                min-height: 13rem;
                height: 13rem;
                padding-top: 0;
                border-top: 0;
                overflow: hidden;
            }
            #how-it-works.hiw-mobile-scroll .hiw-text-slide {
                position: absolute;
                inset: 0;
                display: flex;
                justify-content: flex-start;
                padding-left: 0;
            }
            #how-it-works.hiw-mobile-scroll .hiw-text-slide .hiw-title { display: none; }
            #how-it-works.hiw-mobile-scroll .hiw-text-slide > div { margin-top: 0; }
            #how-it-works.hiw-mobile-scroll .hiw-text-slide .hiw-desc {
                font-size: 0.9rem;
                line-height: 1.58;
            }
            #how-it-works.hiw-mobile-scroll .hiw-text-slide .hiw-reassure {
                margin-top: 0.8rem;
                font-size: 0.7rem;
            }
            #how-it-works.hiw-mobile-scroll .hiw-panel {
                display: block;
                min-height: 0;
                height: 6.75rem;
            }
            #how-it-works.hiw-mobile-scroll .hiw-panel-media { height: 100%; }
            #how-it-works.hiw-mobile-scroll .hiw-media-slide i { font-size: 2.25rem; }
            #how-it-works.hiw-mobile-scroll .hiw-counter { display: block; }
        }

        @media (max-width: 767px) and (max-height: 700px), (min-width: 768px) and (max-width: 1100px) and (max-height: 700px) {
            #how-it-works.hiw-mobile-scroll #hiw-pin {
                padding-top: 4.75rem;
                padding-bottom: 1rem;
            }
            #how-it-works.hiw-mobile-scroll #hiw-eyebrow { margin-bottom: 0.85rem; }
            #how-it-works.hiw-mobile-scroll #hiw-pin > div > .grid { row-gap: 0.75rem; }
            #how-it-works.hiw-mobile-scroll .hiw-head {
                padding-top: 0.2rem;
                padding-bottom: 0.2rem;
            }
            #how-it-works.hiw-mobile-scroll .hiw-panel-text {
                min-height: 11.5rem;
                height: 11.5rem;
            }
            #how-it-works.hiw-mobile-scroll .hiw-panel { height: 5rem; }
        }

        /* ── §3 Company story timeline ─────────────────────────────────
              Centered spine (1.5px, matching the editorial divider) with a
              navy fill that scrubs down on scroll. Milestones alternate sides
              on desktop; collapse to a left-spine stack on mobile. Images use
              the same teal-curtain reveal as the homepage service cards. ── */
        .story-track { position: relative; }
        .story-spine-track {
            position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px;
            margin-left: -0.75px; background: rgba(1,10,53,0.13);
        }
        .story-spine-fill {
            position: absolute; top: 0; left: 50%; width: 1.5px; margin-left: -0.75px;
            height: 0; background: #54c1bf; transform-origin: top;
        }
        .story-milestone {
            position: relative; display: grid; grid-template-columns: 1fr 1fr;
            column-gap: 80px; align-items: center; margin-bottom: 14vh;
        }
        .story-milestone:last-child { margin-bottom: 0; }
        .story-milestone .story-img-wrap { justify-self: end; }
        .story-milestone .story-text { justify-self: start; }
        /* Alternate (tagged .alt in JS): image right, text left, text right-aligned */
        @media (min-width: 768px) {
            .story-milestone.alt .story-img-wrap { order: 2; justify-self: start; }
            .story-milestone.alt .story-text     { order: 1; justify-self: end; text-align: right; }
        }
        .story-node {
            position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
            width: 13px; height: 13px; border-radius: 50%;
            background: #010a35; border: 2px solid #54c1bf;
            z-index: 3; transition: background 0.4s ease;
        }
        .story-node.lit { background: #54c1bf; }
        /* Horizontal transition line — grows from the spine's base point out to
           full viewport width, becoming the top edge of the teal team section. */
        #story-to-team-line {
            position: absolute; left: 0; right: 0; bottom: 0;
            height: 2px; background: #54c1bf;
            transform: scaleX(0); transform-origin: center;
            z-index: 25;
        }
        /* Team section reveals (curtain wipe) from the line as it expands. */
        #about-team { --team-reveal: 1; }
        #about-team::before {
            content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
            background: #ffffff; z-index: 1; pointer-events: none;
            transform: scaleY(var(--team-reveal, 1)); transform-origin: bottom;
        }
        #about-team > * { position: relative; z-index: 2; }
        .story-phase {
            font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase; color: #54c1bf;
            margin-bottom: 0.6rem;
        }
        .story-title {
            font-family: 'DM Sans', sans-serif; font-weight: 500;
            font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15;
            letter-spacing: -0.01em; margin-bottom: 1rem; color: #010a35;
        }
        .story-body {
            font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem;
            line-height: 1.75; color: rgba(1,10,53,0.65); max-width: 30rem;
            margin: 0;
        }
        .story-milestone.alt .story-body { margin-left: auto; }
        .story-milestone.text-only .story-body { max-width: 34rem; font-size: 1.05rem; color: rgba(1,10,53,0.75); }
        .story-img-wrap {
            position: relative; overflow: hidden; border-radius: 4px;
            width: 100%; max-width: 460px; aspect-ratio: 3/2; background: #EBF4F6;
        }
        .story-img-wrap::before {
            content: ''; position: absolute; inset: 0; background: #54c1bf;
            z-index: 2; transform: scaleY(var(--curtain, 1)); transform-origin: bottom;
        }
        .story-img-wrap img {
            width: 100%; height: 100%; object-fit: cover;
            opacity: 0; transform: scale(1.04);
        }
        .story-milestone.text-only .story-img-wrap { display: none; }
        /* Mobile: single column, spine to the left, no alternation */
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            .story-spine-track, .story-spine-fill { left: 7px; margin-left: 0; width: 1.5px; }
            .story-milestone { grid-template-columns: 1fr; column-gap: 0; padding-left: 40px; margin-bottom: 10vh; }
            .story-milestone .story-img-wrap, .story-milestone .story-text { justify-self: start; }
            .story-milestone.alt .story-img-wrap { order: 0; justify-self: start; }
            .story-milestone.alt .story-text { order: 0; justify-self: start; text-align: left; }
            .story-milestone.alt .story-body { margin-left: 0; }
            .story-milestone .story-img-wrap { margin-bottom: 1.2rem; }
            .story-node { left: 7px; top: 8px; transform: translate(-50%, 0); }
        }


        /* ── §4 Team profiles ──────────────────────────────────────────
              Two members as horizontal profile rows: restrained portrait
              (350px desktop) beside a wider text column (name, role, bio,
              expertise chips). Photo side alternates per row, echoing the
              story timeline. Teal-curtain reveal ties it to the rest of the
              page. Collapses to a single column on mobile. ── */
        .team-profiles { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3rem; }
        .team-profile { display: flex; flex-direction: column; width: 350px; max-width: 100%; }
        .team-portrait {
            position: relative; overflow: hidden;
            width: 350px; max-width: 100%; aspect-ratio: 4/5; border-radius: 4px;
            background: #EBF4F6;
        }
        .team-portrait::before {
            content: ''; position: absolute; inset: 0; background: #010a35;
            z-index: 3; transform: scaleY(var(--curtain, 1)); transform-origin: bottom;
        }
        .team-portrait img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); }
        /* Hover overlay: bio + expertise slide up over the image */
        .team-overlay {
            position: absolute; inset: 0; z-index: 2;
            background: rgba(1, 10, 53, 0.92);
            padding: 1.75rem;
            display: flex; flex-direction: column; justify-content: center;
            opacity: 0; transition: opacity 0.45s ease;
            pointer-events: none;
        }
        .team-portrait:hover .team-overlay { opacity: 1; }
        /* Labels underneath the image */
        .team-label { margin-top: 1.1rem; text-align: center; }
        .team-name { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 1rem; color: #010a35; margin-bottom: 0.3rem; }
        .team-role { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #010a35; opacity: 0.65; }
        .team-bio { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.85); margin-bottom: 1.25rem; }
        .team-expertise-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 0.7rem; }
        .team-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
        .team-tags span { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; color: #ffffff; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 0.3rem 0.65rem; }
        @media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
            .team-profiles { gap: 2.5rem; }
            .team-portrait { width: 240px; }
            .team-profile { width: auto; }
            /* On mobile (no hover), show the overlay statically below isn't ideal;
               keep tap-to-reveal via :active and always-visible label. */
            .team-portrait:active .team-overlay { opacity: 1; }
        }

/* --------------------------------------------------------------------------
   Niche typography system
   Six semantic styles shared by every public page and component.
   -------------------------------------------------------------------------- */
:root {
    --space-text-xs: 0.5rem;
    --space-text-sm: 0.75rem;
    --space-text-md: 1rem;
    --space-text-lg: 1.5rem;
    --space-text-xl: 2rem;
    --space-text-2xl: 3rem;
}

.type-display,
.type-page-title,
.type-section-title,
.type-component-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    text-wrap: balance;
}

.type-display {
    font-size: clamp(3rem, 5.5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.type-page-title {
    font-size: clamp(2.5rem, 4.2vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.type-section-title {
    font-size: clamp(2rem, 3vw, 2.625rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.type-component-title {
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.type-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
}

.type-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.type-label--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Normalize legacy utility weights to the three approved design weights. */
.font-light,
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold,
.font-bold,
.font-extrabold { font-weight: 600; }

/* Form and primary-action text follows the same body/label pair. */
input,
textarea,
select { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.65; }
label,
.btn-primary,
.btn-secondary,
.option-btn { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.02em; }

.content-heading-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* `.content-heading-group` is declared after Tailwind and therefore needs an
   explicit desktop boundary when it is used for the mobile-only industry
   introduction. Without this, its display:flex overrides `md:hidden`. */
@media (min-width: 768px) {
    .industry-mobile-heading { display: none !important; }
}

.content-heading-group--center { align-items: center; text-align: center; }
.content-heading-group > * { margin-top: 0; margin-bottom: 0; }
.content-heading-group > .type-label + .type-page-title,
.content-heading-group > .type-label + .type-section-title { margin-top: 0.625rem; }
.content-heading-group > .type-label + .type-component-title { margin-top: 0.625rem; }
.content-heading-group > .type-page-title + .content-subheading { margin-top: 1.25rem; }
.content-heading-group > .type-section-title + .content-subheading { margin-top: 1rem; }
.content-heading-group > .type-component-title + .content-subheading { margin-top: 0.625rem; }

.content-subheading {
    max-width: 44rem;
    color: rgba(1, 10, 53, 0.7);
}

.content-subheading--light { color: rgba(255, 255, 255, 0.82); }
.content-body-group { display: flex; flex-direction: column; gap: 1rem; }
.content-body-group > * { margin-top: 0; margin-bottom: 0; }
.content-actions { margin-top: 1.5rem; }

/* Core Range always uses the standard left-aligned heading relationship.
   This also protects it from inherited alignment rules on narrow screens. */
#products .content-heading-group {
    align-items: flex-start;
    text-align: left;
}
#core-range-heading,
#core-range-subtext {
    width: 100%;
    text-align: left;
}
.content-heading-to-content { margin-top: 2rem; }

/* Existing data-driven components inherit the same six-style system. */
.hero-slide-heading { font-size: clamp(3rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.035em; }
@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    .hero-slide-heading { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
}
.hero-slide-body,
.ic-desc,
.story-body,
.ikm-detail-desc,
.team-bio { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.65; }
@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    .hero-slide-body { font-size: clamp(0.875rem, 3.5vw, 1rem); }
}
.ic-heading,
.story-title,
.ikm-detail-name,
.team-name { font-family: 'DM Sans', sans-serif; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.ikm-title { font-family: 'DM Sans', sans-serif; font-size: clamp(2rem, 3vw, 2.625rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; }
.ikm-eyebrow,
.ikm-detail-section-label,
.team-role,
.team-expertise-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; }

/* How We Work copy follows the same section/component/body/label hierarchy
   on both the desktop pinned layout and mobile accordion. */
#how-it-works .hiw-head {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(2rem, 3vw, 2.625rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
}
#how-it-works .hiw-title {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
}
#how-it-works .hiw-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
}
#how-it-works .hiw-reassure {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* How We Work — stable desktop selector and single-open mobile accordion. */
#how-it-works.hiw-accordion-ready #hiw-pin {
    min-height: 0 !important;
}
#how-it-works.hiw-accordion-ready .hiw-head {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: 5rem;
    padding: 1rem 1.125rem !important;
    border: 0;
    border-radius: 4px;
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
    color: #010a35;
    background: transparent;
    transition: color 0.3s ease, background-color 0.3s ease;
}
#how-it-works.hiw-accordion-ready .hiw-head::before {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.09em;
    color: rgba(1, 10, 53, 0.42);
}
#how-it-works.hiw-accordion-ready .hiw-head[data-step="0"]::before { content: '01'; }
#how-it-works.hiw-accordion-ready .hiw-head[data-step="1"]::before { content: '02'; }
#how-it-works.hiw-accordion-ready .hiw-head[data-step="2"]::before { content: '03'; }
#how-it-works.hiw-accordion-ready .hiw-head[data-step="3"]::before { content: '04'; }
#how-it-works.hiw-accordion-ready .hiw-head .hiw-label {
    min-width: 0;
    color: #010a35;
    -webkit-text-fill-color: #010a35;
}
#how-it-works.hiw-accordion-ready .hiw-head .hiw-arrow {
    position: static;
    display: inline-flex;
    order: 3;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(1, 10, 53, 0.12);
    border-radius: 4px;
    font-size: 0.6875rem;
    color: #010a35;
    opacity: 1;
    transform: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
#how-it-works.hiw-accordion-ready .hiw-head.is-active {
    color: #ffffff;
    background: #010a35;
}
#how-it-works.hiw-accordion-ready .hiw-head.is-active::before {
    color: #54c1bf;
}
#how-it-works.hiw-accordion-ready .hiw-head.is-active .hiw-label,
#how-it-works.hiw-accordion-ready .hiw-head.is-active:hover .hiw-label {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
#how-it-works.hiw-accordion-ready .hiw-head.is-active .hiw-arrow {
    color: #010a35;
    -webkit-text-fill-color: #010a35;
    background: #54c1bf;
    border-color: #54c1bf;
    opacity: 1;
    transform: none;
}
#how-it-works.hiw-accordion-ready .hiw-steps > .flex:first-child {
    gap: 0.625rem;
}
#how-it-works.hiw-accordion-ready .hiw-acc-item {
    border: 1px solid rgba(1, 10, 53, 0.1);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}

@media (min-width: 768px) {
    #how-it-works.hiw-accordion-ready #hiw-pin > div > .grid {
        display: grid;
        grid-template-columns: minmax(18rem, 5fr) minmax(0, 7fr);
        gap: clamp(2rem, 4vw, 4rem);
        min-height: 34rem;
        align-items: stretch;
    }
    #how-it-works.hiw-accordion-ready .hiw-steps {
        grid-column: 1;
        grid-row: 1;
        display: block;
    }
    #how-it-works.hiw-accordion-ready .hiw-steps > .hidden {
        display: none !important;
    }
    #how-it-works.hiw-accordion-ready .hiw-acc-panel {
        display: none !important;
    }
    #how-it-works.hiw-accordion-ready .hiw-panel {
        display: block !important;
        grid-column: 2;
        grid-row: 1;
        min-height: 34rem;
        height: 100%;
    }
    #how-it-works.hiw-accordion-ready .hiw-panel-media {
        height: 100%;
        min-height: 34rem;
        background: #eaf7f6;
        box-shadow: 0 18px 36px -30px rgba(1, 10, 53, 0.42);
    }
    #how-it-works.hiw-accordion-ready .hiw-media-slide {
        padding-bottom: 11rem;
        opacity: 0 !important;
        transform: scale(0.985);
        transition: opacity 0.38s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #how-it-works.hiw-accordion-ready .hiw-media-slide.is-active {
        z-index: 1;
        opacity: 1 !important;
        transform: scale(1);
    }
    #how-it-works.hiw-accordion-ready .hiw-media-slide i {
        font-size: clamp(4rem, 6vw, 6.5rem);
    }
    #how-it-works.hiw-accordion-ready .hiw-media-slide::before {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        color: rgba(1, 10, 53, 0.52);
    }
    #how-it-works.hiw-accordion-ready .hiw-media-slide[data-step="0"]::before { content: '01 / 04'; }
    #how-it-works.hiw-accordion-ready .hiw-media-slide[data-step="1"]::before { content: '02 / 04'; }
    #how-it-works.hiw-accordion-ready .hiw-media-slide[data-step="2"]::before { content: '03 / 04'; }
    #how-it-works.hiw-accordion-ready .hiw-media-slide[data-step="3"]::before { content: '04 / 04'; }
    #how-it-works.hiw-accordion-ready .hiw-panel-text {
        display: block !important;
        grid-column: 2;
        grid-row: 1;
        z-index: 3;
        min-height: 0;
        height: 100%;
        padding: 0;
        border: 0;
        pointer-events: none;
    }
    #how-it-works.hiw-accordion-ready .hiw-text-slide {
        inset: auto 1.5rem 1.5rem !important;
        min-height: 12.5rem;
        padding: 1.75rem 2rem !important;
        border: 1px solid rgba(1, 10, 53, 0.08);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 16px 38px -28px rgba(1, 10, 53, 0.5);
        opacity: 0 !important;
        transform: translateY(0.75rem);
        transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #how-it-works.hiw-accordion-ready .hiw-text-slide.is-active {
        opacity: 1 !important;
        transform: translateY(0);
    }
    #how-it-works.hiw-accordion-ready .hiw-text-slide .hiw-title {
        margin: 0 0 1rem;
    }
    #how-it-works.hiw-accordion-ready .hiw-text-slide > div {
        margin-top: 0;
    }
    #how-it-works.hiw-accordion-ready .hiw-text-slide .hiw-reassure {
        margin-top: 1.25rem;
    }
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    #how-it-works.hiw-accordion-ready #hiw-pin {
        display: block;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    #how-it-works.hiw-accordion-ready #hiw-pin > div > .grid {
        display: block;
        min-height: 0;
    }
    #how-it-works.hiw-accordion-ready .hiw-head {
        grid-template-columns: 1.75rem minmax(0, 1fr) 2.75rem;
        min-height: 4.5rem;
        padding: 0.75rem 1rem !important;
        font-size: 1.5rem;
        line-height: 1.2;
    }
    #how-it-works.hiw-accordion-ready .hiw-head.is-active .hiw-arrow {
        transform: rotate(90deg);
    }
    #how-it-works.hiw-accordion-ready .hiw-acc-panel {
        display: block;
        max-height: 0;
        padding: 0 1rem;
        opacity: 0;
        background: #f4faf9;
        transition: max-height 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, padding 0.38s ease;
    }
    #how-it-works.hiw-accordion-ready .hiw-acc-item.is-open .hiw-acc-panel {
        max-height: 32rem;
        padding: 1.25rem 1rem 1rem;
        opacity: 1;
    }
    #how-it-works.hiw-accordion-ready .hiw-acc-panel .hiw-reassure {
        padding-top: 0.875rem;
        padding-bottom: 1rem;
    }
    #how-it-works.hiw-accordion-ready .hiw-acc-media {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 6.5rem;
        border-radius: 4px;
        color: #54c1bf;
        background: #e6f5f4;
        font-size: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #how-it-works.hiw-accordion-ready *,
    #how-it-works.hiw-accordion-ready *::before,
    #how-it-works.hiw-accordion-ready *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Supporting route beneath the service cards. */
.services-editorial-footer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.25rem;
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding-top: 2rem;
    border-top: 1px solid #54c1bf;
}

.services-editorial-footer > p {
    max-width: 40rem;
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    .services-editorial-footer {
        gap: 1.25rem;
        margin-top: 3rem;
        padding-top: 1.75rem;
    }
}

/* Our Services — image-led columns with expandable mobile detail. */
.service-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.service-reveal-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.service-card-title {
    min-height: 3.125rem;
    margin: 0 0 1rem;
}

.service-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #f7f7f5;
}

.service-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-image-curtain {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: #54c1bf;
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: bottom;
}

.service-card-copy {
    flex: 1;
    margin-top: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(1, 10, 53, 0.1);
    border-radius: 4px;
    background: #f7f7f5;
}

.service-card-intro,
.service-card-details p:not(.type-label),
.service-card-list {
    color: rgba(1, 10, 53, 0.68);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
}

.service-card-intro {
    margin: 0;
}

.service-card-details .type-label {
    margin-bottom: 0.875rem;
}

.service-card-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-card-list li {
    position: relative;
    padding-left: 1.25rem;
}

.service-card-list li::before {
    content: '';
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 0.45rem;
    height: 1px;
    background: #54c1bf;
}

.service-card-details {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(1, 10, 53, 0.12);
}

.service-card-detail-pair {
    display: grid;
    gap: 1.5rem;
}

.service-details-toggle {
    display: none;
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    .service-card-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .service-card-copy {
        margin-top: 1rem;
        padding: 1.25rem;
    }

    .service-card-title {
        min-height: 0;
        margin-bottom: 1rem;
    }

    .service-details-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        margin-top: 1.25rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: #010a35;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
    }

    .service-details-toggle i {
        color: #54c1bf;
        font-size: 0.625rem;
        transition: transform 0.3s ease;
    }

    .service-details-toggle:focus-visible {
        outline: 2px solid #54c1bf;
        outline-offset: 5px;
        border-radius: 2px;
    }

    .service-card-details {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-top: 0;
        padding-top: 0;
        border-top-color: transparent;
        transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.3s ease,
                    margin-top 0.45s ease,
                    padding-top 0.45s ease,
                    border-color 0.3s ease;
    }

    .service-reveal-card.is-details-open .service-card-details {
        max-height: 48rem;
        opacity: 1;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top-color: rgba(1, 10, 53, 0.12);
    }

    .service-reveal-card.is-details-open .service-details-toggle i {
        transform: rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-card-details,
    .service-details-toggle i {
        transition: none;
    }
}

/* A restrained content entrance used for static body copy and mobile content
   blocks. Existing bespoke section animations opt out in JavaScript. */
.viewport-pop-ready {
    opacity: 0;
    transform: translateY(0.9rem) scale(0.985);
    transform-origin: center bottom;
    transition:
        opacity 0.58s ease,
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.viewport-pop-ready.viewport-pop-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .viewport-pop-ready {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

#contact {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    background: #f7f7f5;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

#contact .content-heading-to-content {
    margin-top: 2rem;
}

@media (min-width: 768px) {
    #contact {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .contact-enquiry-card {
        padding: 2.25rem;
    }
}

#services {
    background: #ffffff;
}

.contact-enquiry-card {
    position: relative;
    isolation: isolate;
    background: #ffffff;
}

.contact-booking-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #010a35;
    border-radius: 4px;
    color: #010a35;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.contact-booking-button:hover {
    color: #ffffff;
    background: #010a35;
}

#how-it-works {
    position: relative;
    z-index: 2;
}

/* How We Work — open editorial process field. The generous stagger and fine
   rules borrow the rhythm of a process diagram without turning steps into
   cards or intercepting the visitor's scroll. */
#how-it-works.hiw-process-section {
    overflow: hidden;
    background: #f7f7f5;
}

/* On desktop the services panel begins inside the process field's open lower
   space, then naturally rises over it with the document scroll. */
@media (min-width: 1024px) {
    #how-it-works + #services {
        position: relative;
        z-index: 3;
        margin-top: clamp(-20rem, -28vh, -12rem);
        border-radius: 4px 4px 0 0;
    }
}

.hiw-process-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(5rem, 7vw, 7.5rem) 1.5rem 0;
}

@media (min-width: 768px) {
    .hiw-process-shell {
        padding-right: 146px;
        padding-left: 146px;
    }
}

.hiw-process-header {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr);
    align-items: end;
    gap: clamp(2rem, 6vw, 7rem);
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.65s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-process-header.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hiw-process-header > .type-body {
    max-width: 28rem;
    margin-bottom: 0.35rem;
    line-height: 1.75;
}

.hiw-process-art {
    display: none;
}

@media (min-width: 1280px) {
    .hiw-process-shell {
        position: relative;
    }

    .hiw-process-art {
        display: flex;
        position: absolute;
        top: clamp(5rem, 7vw, 7.5rem);
        right: 0;
        width: clamp(22.5rem, 33vw, 33rem);
        max-height: 24rem;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;
        pointer-events: none;
    }

    .hiw-process-art img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 24rem;
        object-fit: contain;
        object-position: right center;
    }
}

.hiw-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 48rem;
    margin-top: clamp(2.5rem, 4vw, 4.5rem);
    border-left: 1px solid rgba(1, 10, 53, 0.09);
}

.hiw-process-step {
    --hiw-step-offset: 7rem;
    align-self: stretch;
    padding: 0 clamp(1rem, 1.55vw, 1.75rem) 4rem;
    border-right: 1px solid rgba(1, 10, 53, 0.09);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hiw-process-step[data-step="1"] { --hiw-step-offset: 12rem; }
.hiw-process-step[data-step="2"] { --hiw-step-offset: 17rem; }
.hiw-process-step[data-step="3"] { --hiw-step-offset: 22rem; }
.hiw-process-step[data-step="4"] { --hiw-step-offset: 27rem; }

.hiw-process-step-inner {
    transform: translateY(var(--hiw-step-offset));
    will-change: transform;
}

.hiw-process-step.is-visible {
    opacity: 1;
}

.hiw-process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.75rem;
    border-radius: 4px;
    color: #010a35;
    background: rgba(84, 193, 191, 0.24);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hiw-process-step h3 {
    margin-bottom: 1rem;
}

.hiw-process-copy {
    max-width: 19rem;
    color: rgba(1, 10, 53, 0.66);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
}

.hiw-process-note {
    margin-top: 1.5rem;
    color: #54c1bf;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (max-width: 1023px) {
    .hiw-process-shell {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .hiw-process-header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hiw-process-header > .type-body {
        max-width: 36rem;
        margin: 0;
    }

    .hiw-process-grid {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-top: 3.5rem;
        margin-left: 0.35rem;
        border-left-color: rgba(1, 10, 53, 0.13);
    }

    .hiw-process-step,
    .hiw-process-step[data-step] {
        position: relative;
        padding: 0 0 3.75rem 1.75rem;
        border-right: 0;
        transform: translateY(1.25rem);
    }

    .hiw-process-step.is-visible { transform: translateY(0); }

    .hiw-process-step-inner {
        transform: none;
        will-change: auto;
    }

    .hiw-process-step:last-child { padding-bottom: 0; }

    .hiw-process-step::before {
        content: '';
        position: absolute;
        top: 1.5rem;
        left: -0.28rem;
        width: 0.5rem;
        height: 1px;
        background: rgba(1, 10, 53, 0.22);
    }

    .hiw-process-number {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 1.25rem;
    }

    .hiw-process-copy { max-width: 34rem; }
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    .hiw-process-shell {
        position: relative;
        padding: 4.5rem 1.5rem 4.75rem;
    }

    .hiw-process-header {
        position: relative;
        z-index: 1;
        gap: 1.25rem;
    }

    .hiw-process-art {
        position: absolute;
        top: 14rem;
        right: -1.5rem;
        z-index: 0;
        display: flex;
        width: min(20rem, 78vw);
        max-height: 16rem;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;
        pointer-events: none;
    }

    .hiw-process-art img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 16rem;
        object-fit: contain;
        object-position: right center;
    }

    .hiw-process-grid {
        position: relative;
        z-index: 1;
        gap: 1px;
        margin-top: 9rem;
        margin-left: 0;
        overflow: hidden;
        border: 1px solid rgba(1, 10, 53, 0.1);
        border-radius: 4px;
        background: rgba(1, 10, 53, 0.1);
    }

    .hiw-process-step,
    .hiw-process-step[data-step] {
        min-height: 12.25rem;
        padding: 1.65rem 1.5rem 1.75rem;
        border: 0;
        background: #ffffff;
        opacity: 0;
        transform: translateY(1.25rem);
        transition:
            opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
            transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
    }

    .hiw-process-step.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .hiw-process-step::before {
        display: none;
    }

    .hiw-process-number {
        width: auto;
        height: auto;
        margin-bottom: 1rem;
        border-radius: 0;
        color: #54c1bf;
        background: transparent;
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
    }

    .hiw-process-step h3 {
        margin-bottom: 0.75rem;
    }

    .hiw-process-copy {
        max-width: none;
        font-size: 0.8125rem;
        line-height: 1.65;
    }

    .hiw-process-note {
        margin-top: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hiw-process-header,
    .hiw-process-step {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hiw-process-step-inner {
        transform: none !important;
        will-change: auto;
    }
}

.contact-hand-visual {
    position: absolute;
    z-index: 2;
    top: 39rem;
    right: 0;
    width: clamp(18.9rem, 21.7vw, 21rem);
    aspect-ratio: 954 / 553;
    pointer-events: none;
}

.contact-hand-visual--left {
    top: 7rem;
    right: auto;
    left: 0;
    width: clamp(15.4rem, 18.2vw, 17.5rem);
    aspect-ratio: 1280 / 807;
}

.contact-hand-image {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 84% 54%;
    mix-blend-mode: multiply;
}

.contact-hand-visual--left .contact-hand-image {
    transform-origin: 16% 54%;
}

.contact-hand-flash {
    position: absolute;
    z-index: 3;
    display: block;
    width: clamp(0.75rem, 1.4vw, 1.25rem);
    height: clamp(0.3rem, 0.55vw, 0.5rem);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background: #010a35;
    opacity: 0;
    scale: 0;
    transform-origin: left center;
}

.contact-hand-flash-1 { top: 19%; left: 16%; }
.contact-hand-flash-2 {
    top: 5%;
    left: 23%;
    width: clamp(1.2rem, 2vw, 1.75rem);
    height: clamp(0.5rem, 0.8vw, 0.75rem);
}
.contact-hand-flash-3 { top: 0; left: 34%; }
.contact-hand-flash-4 { top: 7%; left: 46%; }

.contact-hand-visual--left .contact-hand-flash { background: #FFC93C; }

.contact-hand-visual--left .contact-hand-flash-1 { top: 14%; left: 49%; }
.contact-hand-visual--left .contact-hand-flash-2 {
    top: 4%;
    left: 55%;
}
.contact-hand-visual--left .contact-hand-flash-3 { top: 1%; left: 65%; }
.contact-hand-visual--left .contact-hand-flash-4 { top: 5%; left: 75%; }

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    #contact {
        border-top: 1px solid rgba(84, 193, 191, 0.32);
        border-bottom: 1px solid rgba(84, 193, 191, 0.32);
        background: #f7f7f5;
    }

    .contact-enquiry-card {
        border-color: rgba(1, 10, 53, 0.1);
    }

    .contact-hand-visual {
        position: relative;
        top: auto;
        right: auto;
        width: min(18.9rem, 78vw);
        max-width: none;
        margin: 0.75rem -1.5rem -1.5rem auto;
    }

    .contact-hand-visual--left {
        display: block;
        width: min(15.4rem, 64vw);
        margin: 1.5rem auto -1.5rem -1.5rem;
    }
}

@media (min-width: 768px) {
    .content-actions { margin-top: 1.75rem; }
    .content-heading-to-content { margin-top: 3rem; }
}

/* --------------------------------------------------------------------------
   Shared site footer
   -------------------------------------------------------------------------- */
.site-footer {
    width: 100%;
    padding: 3rem 1.75rem 2rem;
    background: #f5f6f6;
    color: #010a35;
}

.site-footer-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px dotted rgba(1, 10, 53, 0.28);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2rem;
}

.site-footer-newsletter {
    grid-column: 1 / -1;
    max-width: 35rem;
}

.site-footer-logo {
    display: block;
    width: auto;
    height: 2rem;
    margin-bottom: 2rem;
}

.site-footer-eyebrow {
    margin: 0 0 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #54c1bf;
}

.site-footer-newsletter-title,
.site-footer-column-title {
    margin: 0;
}

.site-footer-newsletter-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(1, 10, 53, 0.6);
}

.site-footer-copy,
.site-footer-consent,
.site-footer-links,
.site-footer-bottom {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.site-footer-copy {
    max-width: 31rem;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(1, 10, 53, 0.6);
}

.site-footer-form {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
    max-width: 34rem;
    margin-top: 1.25rem;
}

.site-footer-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.site-footer-input-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    z-index: 1;
    font-size: 0.875rem;
    color: rgba(1, 10, 53, 0.52);
    transform: translateY(-50%);
    pointer-events: none;
}

.site-footer-input-wrap input {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.875rem 0 2.35rem;
    border: 1px solid rgba(1, 10, 53, 0.16);
    border-radius: 4px;
    outline: none;
    background: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    color: #010a35;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.site-footer-input-wrap input::placeholder {
    color: rgba(1, 10, 53, 0.48);
}

.site-footer-input-wrap input:focus {
    border-color: #54c1bf;
    box-shadow: 0 0 0 3px rgba(84, 193, 191, 0.15);
}

.site-footer-subscribe {
    flex: 0 0 auto;
    height: 2.75rem;
    padding: 0 1.25rem;
    border: 1px solid #010a35;
    border-radius: 4px;
    background: #010a35;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.site-footer-subscribe:hover,
.site-footer-subscribe:focus-visible {
    border-color: #54c1bf;
    background: #54c1bf;
    color: #010a35;
}

.site-footer-consent {
    max-width: 34rem;
    margin: 0.875rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.6;
    color: rgba(1, 10, 53, 0.48);
}

.site-footer-consent a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer-success {
    margin: 0.625rem 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #2d8785;
}

.site-footer-error {
    margin: 0.625rem 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #b42318;
}

.site-footer-socials {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.site-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(1, 10, 53, 0.16);
    border-radius: 4px;
    font-size: 0.875rem;
    color: rgba(1, 10, 53, 0.62);
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.site-footer-socials a:hover,
.site-footer-socials a:focus-visible {
    border-color: #54c1bf;
    background: #54c1bf;
    color: #010a35;
}

.site-footer-column-title {
    margin-bottom: 1.125rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #54c1bf;
}

.site-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(1, 10, 53, 0.6);
}

.site-footer-links a {
    color: inherit;
    transition: color 180ms ease;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: #010a35;
}

.site-footer-contact {
    grid-column: 1 / -1;
}

.site-footer-address {
    line-height: 1.7;
}

.site-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px dotted rgba(1, 10, 53, 0.22);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: rgba(1, 10, 53, 0.46);
}

.site-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-footer-legal a {
    color: inherit;
    transition: color 180ms ease;
}

.site-footer-legal a:hover,
.site-footer-legal a:focus-visible {
    color: #010a35;
}

@media (min-width: 1024px) {
    .site-footer {
        padding: 4rem 9.125rem 2rem;
    }

    .site-footer-inner {
        padding-top: 2.5rem;
    }

    .site-footer-grid {
        grid-template-columns: minmax(22rem, 1.6fr) repeat(3, minmax(0, 0.65fr));
        gap: 4rem;
    }

    .site-footer-newsletter,
    .site-footer-contact {
        grid-column: auto;
    }

    .site-footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 3.5rem;
    }
}

@media (max-width: 420px) {
    .site-footer {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .site-footer-grid {
        gap: 2.75rem 1.5rem;
    }

    .site-footer-subscribe {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* Editorial industry selector tiles. */
.industry-card {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: #010a35;
    font: inherit;
    border-radius: 4px;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.industry-card:hover { transform: translateY(-6px); }
.industry-card:focus-visible { outline: 2px solid #54c1bf; outline-offset: 4px; }
.industry-card .industry-image-container {
    aspect-ratio: 1 / 1;
    background: #f3f7f6;
    border: 1px solid rgba(1, 10, 53, 0.16);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(1, 10, 53, 0.05);
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.industry-card:hover .industry-image-container {
    background: #e8f5f4;
    border-color: #54c1bf;
    box-shadow: 0 16px 36px rgba(1, 10, 53, 0.12);
}
.ic-legibility-gradient,
.ic-tint-overlay,
.ic-base-image,
.ic-hover-image,
.ic-cta { display: none; }
.ic-topline {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    color: rgba(1, 10, 53, 0.55);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ic-graphic {
    position: absolute;
    top: 45px;
    left: 18px;
    right: 18px;
    height: 128px;
    z-index: 3;
    color: #010a35;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.industry-card:hover .ic-graphic { transform: translateY(-4px); }
.ic-graphic svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ic-graphic .ic-line { fill: none; stroke: #010a35; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic-graphic .ic-fill-teal { fill: #bfe8e5; }
.ic-graphic .ic-fill-yellow { fill: #ffe39a; }
.ic-feature-image {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.industry-card:hover .ic-feature-image { transform: scale(1.01); }
.industry-card .ic-content {
    position: absolute;
    left: 20px;
    right: 58px;
    bottom: 20px;
    top: auto;
    padding: 0;
    display: block;
    text-align: left;
    color: #010a35;
    pointer-events: none;
    z-index: 5;
}
.industry-card .ic-heading {
    margin: 0;
    color: #010a35;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.ic-products {
    margin: 8px 0 0;
    color: rgba(1, 10, 53, 0.62);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
}
.ic-arrow {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 6;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #010a35;
    color: #ffffff;
    font-size: 11px;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
}
.industry-card:hover .ic-arrow { background: #FFC93C; color: #010a35; transform: translateX(2px); }

@container industry-card (max-width: 230px) {
    .ic-topline { left: 16px; right: 16px; top: 15px; font-size: 9px; }
    .ic-graphic { left: 12px; right: 12px; top: 40px; height: 112px; }
    .industry-card .ic-content { left: 16px; right: 52px; bottom: 16px; padding: 0; }
    .industry-card .ic-heading { font-size: 17px; }
    .ic-products { font-size: 9px; }
    .ic-arrow { right: 14px; bottom: 14px; width: 32px; height: 32px; }
}

.graphic-wizard-card {
    position: relative;
    padding: 0;
    border: 1px solid rgba(1, 10, 53, 0.16);
    border-radius: 4px;
    background: #f3f7f6;
    color: #010a35;
    text-align: left;
    box-shadow: 0 6px 18px rgba(1, 10, 53, 0.06);
}
.mobile-industry-card { aspect-ratio: 4 / 3; }
.graphic-wizard-card:active { background: #e8f5f4; border-color: #54c1bf; }
.gwc-number {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(1, 10, 53, 0.5);
    z-index: 3;
}
.gwc-graphic { position: absolute; top: 24px; left: 8px; right: 8px; height: 78px; }
.gwc-graphic svg { width: 100%; height: 100%; }
.gwc-graphic .ic-line { fill: none; stroke: #010a35; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gwc-graphic .ic-fill-teal { fill: #bfe8e5; }
.gwc-graphic .ic-fill-yellow { fill: #ffe39a; }
.gwc-feature-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.gwc-copy { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.gwc-copy strong { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 500; line-height: 1.15; }
.gwc-copy small { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 9px; font-weight: 600; line-height: 1.3; color: rgba(1, 10, 53, 0.6); }

.mobile-expansion-back {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(1, 10, 53, 0.12);
    border-radius: 4px;
    background: #ffffff;
    color: #010a35;
    font-size: 0.75rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mobile-expansion-back:active {
    background: #e8f5f4;
    border-color: #54c1bf;
}
.mobile-expansion-back:focus-visible {
    outline: 2px solid #54c1bf;
    outline-offset: 2px;
}

/* Refined industry-kit modal. */
.ikm-panel { max-width: 1040px; max-height: 90vh; }
.ikm-header { padding: 20px 28px 18px; }
.ikm-eyebrow {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.08em;
}
.ikm-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.ikm-walkthrough { grid-template-columns: 44% 56%; min-height: 390px; }
.ikm-image-panel { min-height: 390px; }
.ikm-detail-panel { padding: 26px 30px 24px; overflow-y: auto; }
.ikm-detail-name {
    margin: 0 0 8px;
    padding-right: 5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.ikm-detail-price {
    margin: 0 0 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
}
.ikm-overview-section { margin-bottom: 20px; }
.ikm-detail-desc {
    max-width: 100%;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(1, 10, 53, 0.72);
}
.ikm-detail-section-label {
    margin: 0 0 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(1, 10, 53, 0.62);
}
.ikm-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.ikm-detail-section { margin: 0; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.ikm-sizes { display: flex; flex-wrap: wrap; gap: 7px; }
.ikm-size-item {
    padding: 7px 10px;
    border: 1px solid rgba(1, 10, 53, 0.14);
    border-radius: 4px;
    background: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
}
.ikm-size-item i { display: none; }
.ikm-size-hint { margin: 9px 0 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.6875rem; font-weight: 400; line-height: 1.45; font-style: normal; }
.ikm-features { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ikm-feature {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
}
.ikm-feature i { margin-top: 3px; }
.ikm-add-btn {
    margin-top: auto;
    padding: 11px 18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
}
.ikm-nav-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 28px;
}
.ikm-nav-tile {
    position: relative;
    max-width: none;
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(1, 10, 53, 0.12);
    border-radius: 4px;
    cursor: pointer;
    gap: 7px;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ikm-nav-tile:hover { transform: translateY(-2px); border-color: #54c1bf; }
.ikm-nav-tile.viewing { border-color: #54c1bf; box-shadow: 0 0 0 1px #54c1bf; }
.ikm-nav-tile.selected { background: #eef8f7; border-color: #010a35; }
.ikm-nav-tile-img { position: relative; border-radius: 3px; }
.ikm-nav-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #010a35;
    color: #ffffff;
    font-size: 10px;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ikm-nav-tile.selected .ikm-nav-check { opacity: 1; transform: scale(1); }
.ikm-nav-tile-name {
    min-height: 2.4em;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}
.ikm-footer { padding: 16px 28px; }
.ikm-count,
.ikm-btn-secondary,
.ikm-btn-primary {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .ikm-title { font-size: 1.75rem; }
    .ikm-walkthrough { grid-template-columns: 1fr; }
    .ikm-image-panel { min-height: 240px; aspect-ratio: 4 / 3; }
    .ikm-detail-panel { padding: 22px 20px; }
    .ikm-spec-grid { grid-template-columns: 1fr; }
    .ikm-nav-row { display: flex; padding: 14px 20px; }
    .ikm-nav-tile { flex: 0 0 112px; }
}

/* Interface typography
   A compact five-role scale for modals, drawers, forms and configuration UI.
   Marketing pages continue to use the six .type-* content styles above. */
.ui-surface {
    --ui-title-size: 1.75rem;
    --ui-heading-size: 1.125rem;
    --ui-body-size: 0.875rem;
    --ui-label-size: 0.75rem;
    --ui-meta-size: 0.6875rem;
}

.ui-title,
.ui-heading {
    margin-top: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: #010a35;
}

.ui-title {
    font-size: var(--ui-title-size, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ui-heading {
    font-size: var(--ui-heading-size, 1.125rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ui-body,
.ui-label,
.ui-meta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0;
}

.ui-body {
    font-size: var(--ui-body-size, 0.875rem);
    font-weight: 400;
    line-height: 1.55;
}

.ui-label {
    font-size: var(--ui-label-size, 0.75rem);
    font-weight: 600;
    line-height: 1.35;
}

.ui-meta {
    font-size: var(--ui-meta-size, 0.6875rem);
    font-weight: 500;
    line-height: 1.4;
}

.ui-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ui-surface input,
.ui-surface textarea,
.ui-surface select {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-body-size);
    font-weight: 400;
    line-height: 1.55;
}

/* Industry-kit modal hierarchy: title > product > description > labels > meta. */
.ikm-panel { --ui-body-size: 0.75rem; }

.ui-surface .ikm-title {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--ui-title-size);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ui-surface .ikm-detail-name {
    margin-bottom: 0.375rem;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--ui-heading-size);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ui-surface .ikm-detail-desc,
.ui-surface .ikm-feature {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-body-size);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
}

.ui-surface .ikm-eyebrow,
.ui-surface .ikm-size-hint,
.ui-surface .ikm-nav-tile-name,
.ui-surface .ikm-count {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-meta-size);
    line-height: 1.4;
}

.ui-surface .ikm-detail-price,
.ui-surface .ikm-detail-section-label,
.ui-surface .ikm-size-item,
.ui-surface .ikm-add-btn,
.ui-surface .ikm-btn-secondary,
.ui-surface .ikm-btn-primary {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-label-size);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

.ui-surface .ikm-overview-section { margin-bottom: 1.125rem; }
.ui-surface .ikm-detail-price { margin-bottom: 1rem; }
.ui-surface .ikm-detail-section-label { margin-bottom: 0.5rem; }
.ui-surface .ikm-spec-grid { margin-bottom: 1.125rem; }

/* Sizes are informational, so present them as the same checked list used for
   technical details rather than as button-like selectable controls. */
.ui-surface .ikm-sizes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.ui-surface .ikm-size-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(1, 10, 53, 0.78);
    font-size: var(--ui-body-size);
    font-weight: 400;
    line-height: 1.55;
}

.ui-surface .ikm-size-item i {
    display: block;
    margin-top: 0.25rem;
    color: #54c1bf;
    font-size: 0.625rem;
}

/* A chosen product uses brand teal for both its tile highlight and check. */
.ui-surface .ikm-nav-tile.selected {
    border-color: #54c1bf;
    background: #eef8f7;
    box-shadow: 0 0 0 1px #54c1bf;
}

.ui-surface .ikm-nav-check { background: #54c1bf; }

/* Product and filter drawers use the same scale, including generated controls. */
#details-sidebar {
    --ui-body-size: 0.75rem;
    max-width: 65rem;
}

.product-drawer-header {
    min-height: 5.75rem;
    padding: 1.125rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #eef0f3;
    background: #ffffff;
    flex: none;
}

.product-drawer-header .ui-title { font-size: 1.5rem; }

.product-drawer-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: #ffffff;
}

.product-drawer-layout { min-height: 100%; display: flex; flex-direction: column; }
.product-drawer-media { display: contents; }

.product-drawer-image {
    width: 100%;
    background: #f5f7f8;
    flex: none;
    order: 1;
}

.product-drawer-image-stage {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f5f7f8;
}

.product-drawer-image-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }

.product-drawer-thumbs {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    border-top: 1px solid rgba(1, 10, 53, 0.06);
    background: #ffffff;
}

.product-drawer-thumbs.hidden { display: none; }
.product-drawer-thumbs .modal-thumb { width: 4rem; height: 4rem; }

.product-drawer-content { padding: 1.5rem 1.25rem 2rem; order: 2; }
.product-drawer-intro > * { margin-top: 0; margin-bottom: 0; }
.product-drawer-intro > #modal-starting-price-mobile { margin-top: 0.375rem; }
.product-drawer-section-label { margin-top: 1.25rem; color: rgba(1, 10, 53, 0.62); }
#details-sidebar .product-drawer-intro > #modal-description { margin-top: 0.5rem; max-width: none; }

.product-drawer-config {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.product-drawer-features,
.product-drawer-quantity {
    margin-top: 1.25rem;
    padding-top: 1.125rem;
    border-top: 1px solid #e5e7eb;
}

.product-drawer-features { margin: 0 1.25rem 1.5rem; order: 3; }

#details-sidebar #modal-description,
#details-sidebar #modal-features li {
    font-size: var(--ui-body-size);
    line-height: 1.55;
}

#details-sidebar .option-btn,
#filter-drawer-content .filter-drawer-pill {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-label-size);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    .product-drawer-header .ui-title { font-size: 1.75rem; }
    .product-drawer-scroll { overflow: hidden; }
    .product-drawer-layout {
        height: 100%;
        display: grid;
        grid-template-columns: 44% minmax(0, 1fr);
        align-items: stretch;
    }
    .product-drawer-media {
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        border-right: 1px solid #eef0f3;
        background: #f5f7f8;
    }
    .product-drawer-image {
        min-width: 0;
        order: initial;
    }
    .product-drawer-content {
        min-width: 0;
        padding: 1.75rem 1.875rem 2rem;
        overflow-y: auto;
        order: initial;
    }
    .product-drawer-features {
        margin: 0 1.5rem 1.5rem;
        order: initial;
        background: #f5f7f8;
    }
}

/* Quote and case-study content is generated at runtime, so scope its type here. */
#quote-modal-content .quote-table,
#quote-modal-content .quote-table td,
#quote-modal-content .quote-spec-tag,
#quote-modal-content .quote-table td p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-body-size);
    font-weight: 400;
    line-height: 1.55;
}

#quote-modal-content .quote-table th {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-meta-size);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

#cs-panel .cs-service-tag,
#cs-panel .cs-gallery-item > p,
#cs-panel .cs-gallery-item div p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--ui-meta-size);
    line-height: 1.4;
}

/* Mobile industry product overview: retain the quick 2x2 selector, then reveal
   desktop-equivalent product information in a phone-native bottom sheet. */
.mobile-product-cell {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.mobile-product-cell:focus-visible {
    outline: 2px solid #54c1bf;
    outline-offset: 3px;
}

.mobile-product-review-label {
    margin-top: 0.125rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #54c1bf;
}

.mobile-expansion-header h3,
.mobile-expansion-header p,
.mobile-expansion-grid span {
    margin-bottom: 0;
}

.mobile-product-overview {
    --ui-body-size: 0.75rem;
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(1, 10, 53, 0);
    pointer-events: none;
    transition: background-color 0.25s ease;
}

.mobile-product-overview.open {
    background: rgba(1, 10, 53, 0.58);
    pointer-events: auto;
}

.mobile-product-overview-panel {
    width: 100%;
    max-height: min(82vh, 720px);
    max-height: min(82svh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #ffffff;
    box-shadow: 0 -18px 50px rgba(1, 10, 53, 0.2);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-product-overview.open .mobile-product-overview-panel { transform: translateY(0); }

.mobile-overview-handle {
    width: 2.5rem;
    height: 0.25rem;
    margin: 0.625rem auto 0;
    border-radius: 999px;
    background: rgba(1, 10, 53, 0.18);
    flex: none;
}

.mobile-overview-header {
    min-height: 3.25rem;
    padding: 0.5rem 1.25rem 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eef0f3;
    flex: none;
}

.mobile-overview-close {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f7f8f9;
    color: rgba(1, 10, 53, 0.55);
}

.mobile-overview-scroll {
    padding: 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-overview-intro {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.mobile-overview-image {
    width: 6.75rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    background: #f5f7f8;
}

.mobile-overview-image img { width: 100%; height: 100%; object-fit: cover; }
.mobile-overview-title-group { display: flex; flex-direction: column; gap: 0.375rem; }
.mobile-overview-description { margin: 1rem 0 0; color: rgba(1, 10, 53, 0.72); }

.mobile-overview-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.125rem;
}

.mobile-overview-spec-section {
    padding-top: 0.875rem;
    border-top: 1px solid #e5e7eb;
}

.mobile-overview-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.mobile-overview-list span {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(1, 10, 53, 0.78);
}

.mobile-overview-list i {
    margin-top: 0.2rem;
    color: #54c1bf;
    font-size: 0.625rem;
}

.mobile-overview-action-bar {
    padding: 0.875rem 1.25rem max(0.875rem, env(safe-area-inset-bottom));
    border-top: 1px solid #eef0f3;
    background: #ffffff;
    flex: none;
}

.mobile-overview-action {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid #54c1bf;
    border-radius: 4px;
    background: #54c1bf;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
}

.mobile-overview-action.is-selected {
    background: #eef8f7;
    color: #010a35;
}

/* Shop context shown only when arriving with a curated industry selection. */
.kit-mode-disabled { display: none !important; }

.kit-selection-context {
    margin-bottom: 2rem;
    padding: 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    border: 1px solid rgba(84, 193, 191, 0.45);
    border-radius: 4px;
    background: #eef8f7;
}

.kit-selection-summary { min-width: 0; }
.kit-selection-title-row { margin-top: 0.375rem; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.kit-selection-title-row .ui-title { font-size: 1.5rem; }

.kit-selection-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex: none;
}

.kit-selection-edit,
.kit-selection-clear {
    min-height: 2.625rem;
    padding: 0.625rem 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.kit-selection-edit {
    border: 1px solid #010a35;
    background: #010a35;
    color: #ffffff;
}

.kit-selection-clear {
    border: 1px solid rgba(1, 10, 53, 0.18);
    background: #ffffff;
    color: #010a35;
}

.kit-selection-edit:hover { background: #54c1bf; border-color: #54c1bf; }
.kit-selection-clear:hover { border-color: #010a35; }

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    .kit-selection-context { align-items: stretch; flex-direction: column; gap: 1rem; }
    .kit-selection-title-row { align-items: flex-start; flex-direction: column; gap: 0.375rem; }
    .kit-selection-title-row .ui-title { font-size: 1.25rem; }
    .kit-selection-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
    .kit-selection-edit, .kit-selection-clear { width: 100%; padding-left: 0.625rem; padding-right: 0.625rem; }
}

@media (max-width: 640px) {
    .ui-surface { --ui-title-size: 1.5rem; }
}

/* ===========================================================================
   Shared card system
   Browse cards support choosing a category or product. Explain cards support
   services and process content. Both use the same restrained surface tokens.
   ========================================================================== */
:root {
    --card-radius: 4px;
    --card-border: rgba(1, 10, 53, 0.12);
    --card-border-active: #54c1bf;
    --card-surface: #ffffff;
    --card-media-surface: #f7f7f5;
    --card-gap: 1rem;
}

.browse-card,
.explain-card {
    min-width: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: none;
    color: #010a35;
}

.browse-card-mini {
    border-color: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: none;
}

.browse-card-mini:focus-visible {
    outline: 2px solid #54c1bf;
    outline-offset: 3px;
}

button.browse-card {
    appearance: none;
    padding: 0;
    overflow: hidden;
    font: inherit;
    text-align: left;
}

.browse-card {
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.browse-card:hover {
    border-color: var(--card-border-active);
    transform: translateY(-2px);
}

.browse-card:focus-visible {
    outline: 2px solid #54c1bf;
    outline-offset: 3px;
}

.browse-card-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--card-media-surface);
    box-shadow: none;
}

.browse-card-content {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 5.25rem;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    background: var(--card-surface);
    text-align: left;
}

.browse-card-title {
    display: block;
    margin: 0;
    color: #010a35;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.browse-card-meta {
    display: block;
    margin: 0.5rem 0 0;
    color: #54c1bf;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.browse-card-eyebrow {
    position: absolute;
    z-index: 5;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: flex;
    justify-content: space-between;
    color: rgba(1, 10, 53, 0.55);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Category cards retain their commissioned imagery but now share the same
   discrete media and information regions as the product cards. */
.browse-card--category.industry-card {
    overflow: hidden;
    border: 1px solid var(--card-border);
    background: var(--card-surface);
    box-shadow: none;
}

.browse-card--category.industry-card.revealed:hover {
    transform: translateY(-2px);
}

.browse-card--category .industry-image-container {
    border: 0;
    border-radius: 0;
    background: var(--card-media-surface);
    box-shadow: none;
}

.browse-card--category:hover .industry-image-container {
    border-color: transparent;
    background: var(--card-media-surface);
    box-shadow: none;
}

.browse-card--category .ic-content {
    position: relative;
    inset: auto;
    display: flex;
    min-height: 5.25rem;
    padding: 1rem 3.75rem 1rem 1rem;
    flex-direction: column;
    justify-content: center;
    background: var(--card-surface);
}

.browse-card--category .ic-heading {
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.browse-card--category .ic-products {
    margin-top: 0.5rem;
    color: rgba(1, 10, 53, 0.58);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.browse-card--category .ic-arrow {
    right: 1rem;
    bottom: 50%;
    width: 2.125rem;
    height: 2.125rem;
    transform: translateY(50%);
}

.browse-card--category:hover .ic-arrow {
    background: #54c1bf;
    color: #010a35;
    transform: translateY(50%) translateX(2px);
}

/* Core-range and Shop cards use identical title/price footers. */
.browse-card--product.cr-card {
    align-self: flex-start;
    background: var(--card-surface);
}

.browse-card--product .product-image-box,
.browse-card--product .product-card-image {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--card-media-surface);
    box-shadow: none;
}

.browse-card--product .product-card-image:hover,
.browse-card--product .product-card-image:focus-visible {
    border-color: transparent;
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(84, 193, 191, 0.55);
}

.browse-card--product .pc-name,
.browse-card--product .pc-price {
    margin-right: 0;
    margin-left: 0;
}

.browse-card--product .pc-price {
    margin-top: 0.5rem;
}

/* Mobile industry browsing uses the same browse card in a compact horizontal
   rail, reducing the section length while preserving the mobile-specific art. */
.browse-card-rail {
    display: flex;
    width: 100%;
    gap: 0.75rem;
    padding: 0 1.5rem 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.browse-card-rail::-webkit-scrollbar { display: none; }

.browse-card--mobile-industry {
    width: 84%;
    min-width: 84%;
    flex: 0 0 84%;
    scroll-snap-align: start;
    aspect-ratio: auto;
}

.browse-card--mobile-industry .browse-card-media {
    aspect-ratio: 4 / 3;
}

.browse-card--mobile-industry .gwc-feature-image,
.browse-card--mobile-industry .gwc-graphic {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.browse-card--mobile-industry .gwc-feature-image {
    object-fit: cover;
}

.browse-card--mobile-industry .gwc-copy {
    position: relative;
    inset: auto;
    display: flex;
    min-height: 5.25rem;
    padding: 1rem 3.75rem 1rem 1rem;
    background: var(--card-surface);
}

.browse-card--mobile-industry .gwc-copy strong,
.browse-card--mobile-industry .gwc-copy small {
    color: inherit;
}

.browse-card-mini.ikm-nav-tile {
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: none;
}

.browse-card-mini.ikm-nav-tile:hover,
.browse-card-mini.ikm-nav-tile.viewing,
.browse-card-mini.ikm-nav-tile.selected {
    border-color: var(--card-border-active);
    box-shadow: none;
}

.browse-card-mini.ikm-nav-tile.selected {
    background: #eef8f7;
}

.browse-card-mini .product-selector-square {
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: none;
}

.browse-card-mini .product-selector-square.selected {
    border-color: var(--card-border-active);
    background: #eef8f7;
    box-shadow: none;
}

/* Explain cards: a shared information surface for services and process steps. */
.explain-card {
    padding: 1.5rem;
}

.explain-card--service.service-reveal-card {
    align-self: start;
    overflow: hidden;
}

.explain-card--service .service-card-title {
    min-height: 3.125rem;
    margin: 0 0 1rem;
}

.explain-card--service .service-img-wrap {
    border: 0;
    border-radius: var(--card-radius);
    background: var(--card-media-surface);
}

.explain-card--service .service-card-copy {
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.explain-card--service .service-card-intro,
.explain-card--service .service-card-details p:not(.type-label),
.explain-card--service .service-card-list {
    font-size: 0.9375rem;
    line-height: 1.65;
}

.explain-card--service .service-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #010a35;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.explain-card--service .service-details-toggle i {
    color: #54c1bf;
    font-size: 0.625rem;
    transition: transform 0.3s ease;
}

.explain-card--service .service-card-details {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
    border-top-color: transparent;
    opacity: 0;
    transition:
        max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease,
        margin-top 0.45s ease,
        padding-top 0.45s ease,
        border-color 0.3s ease;
}

.explain-card--service.is-details-open .service-card-details {
    max-height: 48rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top-color: rgba(1, 10, 53, 0.12);
    opacity: 1;
}

.explain-card--service.is-details-open .service-details-toggle i {
    transform: rotate(45deg);
}

.hiw-process-grid {
    gap: var(--card-gap);
    min-height: 24rem;
    border-left: 0;
}

.hiw-process-step {
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
}

.explain-card--process {
    box-sizing: border-box;
    min-height: 24rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.explain-card--process .hiw-process-note {
    margin-top: auto;
    padding-top: 1.5rem;
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    :root { --card-gap: 0.75rem; }

    .browse-card-content,
    .browse-card--category .ic-content,
    .browse-card--mobile-industry .gwc-copy {
        min-height: 4.75rem;
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }

    .browse-card--product .browse-card-content {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .browse-card-title,
    .browse-card--category .ic-heading {
        font-size: 0.9375rem;
    }

    .browse-card-meta,
    .browse-card--category .ic-products {
        font-size: 0.6875rem;
    }

    .service-card-grid {
        gap: 1rem;
    }

    .explain-card {
        padding: 1.25rem;
    }

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

    .hiw-process-grid {
        min-height: 0;
        gap: 0.75rem;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .hiw-process-step,
    .hiw-process-step[data-step] {
        min-height: 0;
        padding: 0;
        background: transparent;
    }

    .hiw-process-step-inner.explain-card--process {
        min-height: 15.5rem;
        padding: 1.25rem;
    }

    .explain-card--process .hiw-process-note {
        padding-top: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .browse-card,
    .explain-card--service .service-card-details,
    .explain-card--service .service-details-toggle i {
        transition: none;
    }
}

/* ===========================================================================
   Homepage section rhythm and hierarchy
   ========================================================================== */
:root {
    --home-section-space: 6rem;
    --home-browse-space: 4.5rem;
    --home-browse-boundary-space: 2.75rem;
    --home-header-to-content: 3rem;
}

.home-explain-flow {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.home-explain-flow > #services { order: 1; }
.home-explain-flow > #how-it-works { order: 2; }

/* The overlap belonged to the former process-first sequence. */
@media (min-width: 1024px) {
    .home-explain-flow #how-it-works + #services {
        margin-top: 0;
        border-radius: 0;
    }
}

.site-section-header.content-heading-group {
    width: 100%;
    max-width: 48rem;
    margin-top: 0;
    margin-bottom: var(--home-header-to-content);
    align-items: flex-start;
    text-align: left;
}

/* This header also owns the page gutters, so constraining the wrapper itself
   would subtract those gutters from its readable line length. */
#products-top-header.site-section-header {
    max-width: none;
}

#products-top-header.site-section-header > * {
    max-width: 48rem;
}

.site-section-header--center.content-heading-group {
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    text-align: center;
}

#products-top {
    padding-top: var(--home-browse-space);
    padding-bottom: var(--home-browse-boundary-space);
}

#products {
    padding-top: var(--home-browse-boundary-space);
    padding-bottom: var(--home-browse-space);
}

#products-top + .section-divider-wrap,
.section-divider-wrap {
    padding-top: 0;
    padding-bottom: 0;
}

#services {
    padding-top: var(--home-section-space);
    padding-bottom: var(--home-section-space);
}

.home-explain-flow .hiw-process-shell {
    padding-top: var(--home-section-space);
    padding-bottom: var(--home-section-space);
}

.home-explain-flow .hiw-process-header {
    width: 100%;
    max-width: 48rem;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
}

.home-explain-flow .hiw-process-header > .type-body {
    max-width: 44rem;
    margin: 0;
}

body[data-page="home"] #contact {
    background: #54c1bf;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

body[data-page="home"] #contact .content-heading-to-content {
    margin-top: 0;
}

body[data-page="home"] #contact .site-section-header > .type-label,
body[data-page="home"] #contact .site-section-header > .type-section-title {
    color: #010a35;
}

body[data-page="home"] #contact .site-section-header > .content-subheading {
    color: rgba(1, 10, 53, 0.72);
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    :root {
        --home-section-space: 4rem;
        --home-browse-space: 3.5rem;
        --home-browse-boundary-space: 2.5rem;
        --home-header-to-content: 2rem;
    }

    .industry-mobile-heading.site-section-header {
        margin-top: 0;
    }

    body[data-page="home"] #contact {
        border-top: 0;
        border-bottom: 0;
        background: #54c1bf;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* ===========================================================================
   Compact desktop compatibility

   Android's "Desktop site" mode reports a portrait layout viewport of roughly
   980px. The hero needs its purpose-built portrait composition at that width,
   but the content below it has enough CSS space for the real desktop card
   families. Keep only the hero/navigation adaptive and restore desktop rows
   for the browse, service and process sections.
   ========================================================================== */
html.phone-desktop-mode .hero-mobile-art--fill-top {
    top: 3svh;
    height: min(151.875vw, 70svh);
}

html.phone-desktop-mode .industry-mobile-heading,
html.phone-desktop-mode #mobile-industry-selection-wrapper {
    display: none !important;
}

html.phone-desktop-mode #products-top-header {
    display: flex !important;
    padding-right: 4rem !important;
    padding-left: 4rem !important;
}

html.phone-desktop-mode #industry-desktop-grid-wrapper {
    display: flex !important;
    padding-right: 4rem !important;
    padding-left: 4rem !important;
}

html.phone-desktop-mode #industry-grid {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

html.phone-desktop-mode #industry-grid .industry-card {
    width: calc((100% - 3rem) / 4);
    min-width: 0;
    flex: 1 1 0;
}

/* Three commissioned images retain a little more empty canvas above their
   subjects than the coffee artwork. Pull that canvas under the card crop so
   the compact row has one continuous image edge across all four tiles. */
html.phone-desktop-mode #industry-grid .industry-card[data-industry="dessert"] .ic-feature-image,
html.phone-desktop-mode #industry-grid .industry-card[data-industry="fastfood"] .ic-feature-image,
html.phone-desktop-mode #industry-grid .industry-card[data-industry="restaurant"] .ic-feature-image {
    top: 0;
    bottom: 0;
    height: 100%;
    object-position: center top;
    transform: scale(1.08) translateY(-3%);
    transform-origin: center;
}

html.phone-desktop-mode #industry-grid .industry-card .industry-image-container::after {
    display: none;
}

html.phone-desktop-mode .browse-card--category .ic-heading,
html.phone-desktop-mode .browse-card-title {
    font-size: 1.125rem;
}

html.phone-desktop-mode #products > div,
html.phone-desktop-mode #services > div,
html.phone-desktop-mode .section-divider-wrap {
    padding-right: 4rem !important;
    padding-left: 4rem !important;
}

html.phone-desktop-mode #core-range-track {
    gap: 1rem;
    scroll-snap-type: none;
}

html.phone-desktop-mode #core-range-track .cr-card {
    width: calc((100% - 3rem) / 4);
    flex: 0 0 calc((100% - 3rem) / 4);
    scroll-snap-align: none;
}

html.phone-desktop-mode .service-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

html.phone-desktop-mode .explain-card--service {
    padding: 1.5rem;
}

html.phone-desktop-mode .explain-card--service .service-card-title {
    min-height: 3.125rem;
}

html.phone-desktop-mode .hiw-process-shell {
    position: relative;
    padding-right: 4rem;
    padding-left: 4rem;
}

html.phone-desktop-mode .hiw-process-art {
    position: absolute;
    top: 4rem;
    right: 0;
    z-index: 0;
    display: flex;
    width: min(21rem, 34vw);
    max-height: 17rem;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    pointer-events: none;
}

html.phone-desktop-mode .hiw-process-art img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 17rem;
    object-fit: contain;
    object-position: right center;
}

html.phone-desktop-mode .home-explain-flow .hiw-process-header {
    position: relative;
    z-index: 1;
    max-width: 34rem;
}

html.phone-desktop-mode .hiw-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 48rem;
    margin-top: clamp(2.5rem, 4vw, 4.5rem);
    margin-left: 0;
    gap: 1rem;
    overflow: visible;
    border: 0;
    background: transparent;
}

html.phone-desktop-mode .hiw-process-step,
html.phone-desktop-mode .hiw-process-step[data-step] {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform: none;
}

html.phone-desktop-mode .hiw-process-step::before {
    display: none;
}

html.phone-desktop-mode .hiw-process-step-inner.explain-card--process {
    min-height: 32rem;
    padding: 1.5rem;
}

html.phone-desktop-mode .hiw-process-number {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.75rem;
    border-radius: 4px;
    color: #010a35;
    background: rgba(84, 193, 191, 0.24);
}

html.phone-desktop-mode .hiw-process-step h3 {
    margin-bottom: 1rem;
}

html.phone-desktop-mode .hiw-process-copy {
    max-width: 19rem;
    font-size: 0.875rem;
    line-height: 1.7;
}

html.phone-desktop-mode .hiw-process-note {
    margin-top: auto;
    padding-top: 1.5rem;
}

html.phone-desktop-mode #contact > div {
    max-width: none;
}

html.phone-desktop-mode .contact-hand-visual {
    position: absolute;
    top: 39rem;
    right: 0;
    width: clamp(18.9rem, 21.7vw, 21rem);
    max-width: none;
    margin: 0;
}

html.phone-desktop-mode .contact-hand-visual--left {
    top: 7rem;
    right: auto;
    left: 0;
    width: clamp(15.4rem, 18.2vw, 17.5rem);
    margin: 0;
}

/* Range Builder acquisition card in the Shop by industry section. */
.range-builder-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    margin: 1.5rem 146px 0;
    padding: 1.75rem 2.25rem;
    border-radius: 4px;
    border: 1px solid rgba(1, 10, 53, 0.12);
    color: #010a35;
    background: #ffffff;
}

.range-builder-promo-copy {
    max-width: 45rem;
}

.range-builder-promo-kicker {
    margin: 0 0 0.65rem;
    color: #54c1bf;
}

.range-builder-promo h3 {
    margin: 0;
}

.range-builder-promo-copy > p:last-child {
    max-width: 42rem;
    margin: 0.85rem 0 0;
    color: rgba(1, 10, 53, 0.7);
}

.range-builder-promo-cta {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.75rem 1.3rem;
    border: 1px solid #54c1bf;
    border-radius: 4px;
    color: #010a35;
    background: #54c1bf;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.range-builder-promo-cta:hover {
    border-color: #ffc93c;
    background: #ffc93c;
    transform: translateY(-1px);
}

.range-builder-promo-cta:focus-visible {
    outline: 3px solid #ffc93c;
    outline-offset: 3px;
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) {
    .range-builder-promo {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1.15rem 1.5rem 0;
        padding: 1.25rem 1.35rem;
    }

    .range-builder-promo-cta {
        width: 100%;
        white-space: normal;
    }

    .range-builder-promo-copy > p:last-child {
        margin-top: 0.65rem;
    }
}