/* HCM UI styles — consolidated from hcm-seo.php inline blocks for browser caching.
   Selectors are body-class / page-id scoped, so loading site-wide is inert off-target. */

/* ===== hcm-actionlab-cta ===== */
.hcm-header__cta--actionlab {
        border-color: #EA580C !important;
        color: #EA580C !important;
        margin-right: 12px;
    }
    .hcm-header__cta--actionlab::before {
        background: linear-gradient(135deg, #EA580C, #F97316) !important;
    }
    .hcm-header__cta--actionlab:hover {
        box-shadow: 0 0 30px rgba(234, 88, 12, 0.4) !important;
    }
    .hcm-header__cta--actionlab:hover span {
        color: #fff !important;
    }
    .hcm-header__mobile-cta--actionlab {
        background: transparent !important;
        border: 1px solid #EA580C !important;
        color: #EA580C !important;
        display: block;
        text-align: center;
        padding: 12px 20px;
        border-radius: 100px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }
    .hcm-header__mobile-cta--actionlab:hover {
        background: #EA580C !important;
        color: #fff !important;
    }
    /* Dropdown items: single line, no wrapping */
    .hcm-header__dropdown-link,
    .hcm-header__dropdown-link span {
        white-space: nowrap !important;
    }
    .hcm-header__nav-link,
    .hcm-header__nav-link span {
        white-space: nowrap !important;
    }
    /* Mobile nav responsive fixes */
    @media (max-width: 768px) {
        .hcm-header__mobile-dropdown-link {
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

/* ===== hcm-ai-agents-page ===== */
.page-id-8032 .entry-header,
    .page-id-8032 h1.entry-title { display: none !important; }
    .page-id-8032 #primary { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
    .page-id-8032 .ast-container { max-width: 100% !important; padding: 0 !important; }
    .page-id-8032 .site-content { background: #020810 !important; }
    .page-id-8032 .entry-content { margin: 0 !important; padding: 0 !important; }
    .page-id-8032 #content > .ast-container { padding: 0 !important; }
    /* Fix header: dark bg + constrained logo (same as pSEO pages) */
    .page-id-8032 .hcm-header {
        background: rgba(2,8,16,0.95) !important;
    }
    .page-id-8032 .hcm-header__logo img {
        height: 55px !important;
        width: auto !important;
        max-height: 55px !important;
        object-fit: contain !important;
    }
    .page-id-8032 .hcm-header--scrolled .hcm-header__logo img {
        height: 45px !important;
        max-height: 45px !important;
    }
    /* Matrix rain canvas */
    .page-id-8032 .hcm-matrix-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        opacity: 0.4;
    }
    /* Content above canvas */
    .page-id-8032 .hcm-service-page {
        position: relative;
        z-index: 1;
    }
    .page-id-8032 body,
    .page-id-8032 .site-content,
    .page-id-8032 #page {
        background: #020810 !important;
    }

/* ===== hcm-software-section ===== */
.hcm-software {
        position: relative;
        padding: 100px 20px;
        background: linear-gradient(180deg, #020810 0%, #041828 50%, #020810 100%);
        overflow: hidden;
    }
    .hcm-software__grid {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(20,255,236,0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(20,255,236,0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
    }
    .hcm-software__container {
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .hcm-software__header {
        text-align: center;
        margin-bottom: 50px;
    }
    .hcm-software__tag {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Barlow', sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #EA580C;
        margin-bottom: 16px;
    }
    .hcm-software__tag::before,
    .hcm-software__tag::after {
        content: '';
        width: 30px;
        height: 1px;
        background: #EA580C;
    }
    .hcm-software__title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(2.2rem, 5vw, 3rem);
        color: #ffffff;
        letter-spacing: 0.04em;
        line-height: 1.1;
        margin: 0;
    }
    .hcm-software__title .hcm-highlight {
        color: #EA580C;
    }
    .hcm-software__intro {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 50px;
        color: rgba(255,255,255,0.75);
        font-family: 'Barlow', sans-serif;
        font-size: 1.1rem;
        line-height: 1.7;
    }
    .hcm-software__card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        padding: 40px;
        margin-bottom: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }
    .hcm-software__card-text h3 {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 1.8rem;
        color: #ffffff;
        letter-spacing: 0.03em;
        margin: 0 0 16px;
    }
    .hcm-software__card-text p {
        color: rgba(255,255,255,0.7);
        font-family: 'Barlow', sans-serif;
        font-size: 0.95rem;
        line-height: 1.7;
        margin: 0;
    }
    .hcm-software__features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .hcm-software__feature {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 10px;
        padding: 24px;
        transition: border-color 0.3s ease, transform 0.3s ease;
    }
    .hcm-software__feature:hover {
        border-color: rgba(234,88,12,0.3);
        transform: translateY(-2px);
    }
    .hcm-software__feature h4 {
        font-family: 'Barlow', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        color: #ffffff;
        margin: 0 0 6px;
    }
    .hcm-software__feature p {
        color: rgba(255,255,255,0.55);
        font-family: 'Barlow', sans-serif;
        font-size: 0.85rem;
        line-height: 1.5;
        margin: 0;
    }
    .hcm-software__cta-row {
        text-align: center;
        margin-top: 10px;
    }
    .hcm-software__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 36px;
        background: transparent;
        border: 1px solid #EA580C;
        color: #EA580C;
        font-family: 'Barlow', sans-serif;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        border-radius: 100px;
        letter-spacing: 0.02em;
        position: relative;
        overflow: hidden;
        transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .hcm-software__cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #EA580C, #F97316);
        opacity: 0;
        transition: opacity 0.35s ease;
        border-radius: 100px;
    }
    .hcm-software__cta span {
        position: relative;
        z-index: 1;
    }
    .hcm-software__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(234,88,12,0.4);
    }
    .hcm-software__cta:hover::before { opacity: 1; }
    .hcm-software__cta:hover span { color: #fff; }
    .hcm-software__cta-arrow {
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
    }
    .hcm-software__cta:hover .hcm-software__cta-arrow { transform: translateX(4px); }

    @media (max-width: 768px) {
        .hcm-software { padding: 60px 15px; }
        .hcm-software__card { grid-template-columns: 1fr; padding: 24px; }
        .hcm-software__features { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hcm-software__feature,
        .hcm-software__cta,
        .hcm-software__cta::before,
        .hcm-software__cta-arrow { transition: none; }
        .hcm-software__feature:hover { transform: none; }
        .hcm-software__cta:hover { transform: none; }
    }

/* ===== hcm-agents-section ===== */
.hcm-agents {
        position: relative;
        padding: 100px 20px;
        background: linear-gradient(180deg, #020810 0%, #061828 50%, #020810 100%);
        overflow: hidden;
    }
    .hcm-agents__grid {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(20,255,236,0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(20,255,236,0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
    }
    .hcm-agents__container {
        position: relative;
        max-width: 900px;
        margin: 0 auto;
        z-index: 1;
    }
    .hcm-agents__header {
        text-align: center;
        margin-bottom: 32px;
    }
    .hcm-agents__tag {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #14ffec;
        padding: 6px 16px;
        border: 1px solid rgba(20,255,236,.25);
        border-radius: 100px;
        margin-bottom: 18px;
        position: relative;
    }
    .hcm-agents__tag::before,
    .hcm-agents__tag::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 1px;
        background: linear-gradient(90deg, rgba(20,255,236,.4), transparent);
        top: 50%;
    }
    .hcm-agents__tag::before { right: 100%; margin-right: 10px; }
    .hcm-agents__tag::after { left: 100%; margin-left: 10px; transform: rotate(180deg); }
    .hcm-agents__title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.8rem;
        color: #ffffff;
        margin: 0 0 8px;
        letter-spacing: 0.04em;
        line-height: 1.1;
    }
    .hcm-agents__title .hcm-highlight { color: #14ffec; }
    .hcm-agents__intro {
        color: rgba(255,255,255,.7);
        font-family: 'Barlow', sans-serif;
        font-size: 1.05rem;
        line-height: 1.7;
        max-width: 720px;
        margin: 0 auto 40px;
        text-align: center;
    }
    .hcm-agents__features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 36px;
    }
    .hcm-agents__feature {
        background: rgba(255,255,255,.04);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(20,255,236,.1);
        border-radius: 10px;
        padding: 24px;
        transition: transform .2s, border-color .2s;
    }
    .hcm-agents__feature:hover {
        transform: translateY(-2px);
        border-color: rgba(20,255,236,.3);
    }
    .hcm-agents__feature h4 {
        color: #14ffec;
        font-family: 'Barlow', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        margin: 0 0 8px;
        letter-spacing: 0.02em;
    }
    .hcm-agents__feature p {
        color: rgba(255,255,255,.65);
        font-family: 'Barlow', sans-serif;
        font-size: 0.92rem;
        line-height: 1.55;
        margin: 0;
    }
    .hcm-agents__cta-row {
        text-align: center;
        margin-top: 8px;
    }
    .hcm-agents__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 32px;
        border: 1px solid rgba(20,255,236,.35);
        border-radius: 100px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        position: relative;
        overflow: hidden;
        transition: transform .2s, box-shadow .2s;
    }
    .hcm-agents__cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #14ffec, #0abdc6);
        opacity: 0;
        transition: opacity .25s;
        border-radius: inherit;
    }
    .hcm-agents__cta span {
        position: relative;
        color: #14ffec;
        transition: color .25s;
    }
    .hcm-agents__cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 30px rgba(20,255,236,.3);
    }
    .hcm-agents__cta:hover::before { opacity: 1; }
    .hcm-agents__cta:hover span { color: #020810; }
    .hcm-agents__cta-arrow {
        position: relative;
        color: #14ffec;
        transition: transform .2s, color .25s;
    }
    .hcm-agents__cta:hover .hcm-agents__cta-arrow { transform: translateX(4px); color: #020810; }
    @media (max-width: 768px) {
        .hcm-agents { padding: 60px 15px; }
        .hcm-agents__features { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hcm-agents__feature,
        .hcm-agents__cta,
        .hcm-agents__cta::before,
        .hcm-agents__cta-arrow { transition: none; }
        .hcm-agents__feature:hover { transform: none; }
        .hcm-agents__cta:hover { transform: none; }
    }

/* ===== hcm-blog-styles ===== */
/* Dark background for blog pages */
    body.single-post,
    body.blog,
    body.category,
    body.archive {
        background-color: #020810 !important;
        background: linear-gradient(180deg, #020810 0%, #041220 40%, #062030 70%, #0a3040 100%) !important;
        background-attachment: fixed !important;
    }
    body.single-post #content.site-content,
    body.single-post .ast-container,
    body.blog #content.site-content,
    body.blog .ast-container,
    body.category #content.site-content,
    body.category .ast-container {
        background: transparent !important;
    }
    /* Header logo fix */
    body.single-post .hcm-header__logo img,
    body.blog .hcm-header__logo img,
    body.category .hcm-header__logo img {
        height: 55px !important;
        width: auto !important;
        max-height: 55px !important;
    }
    body.single-post .hcm-header--scrolled .hcm-header__logo img,
    body.blog .hcm-header--scrolled .hcm-header__logo img {
        height: 45px !important;
        max-height: 45px !important;
    }
    /* Top padding to clear fixed header */
    body.single-post .entry-header,
    body.single-post .ast-single-post-order {
        padding-top: 120px;
    }
    /* Title */
    body.single-post .entry-title,
    body.single-post .ast-blog-single-element .entry-title {
        color: #ffffff !important;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.8rem;
        letter-spacing: 0.02em;
        line-height: 1.15;
    }
    /* Post meta (date, category, etc.) */
    body.single-post .entry-meta,
    body.single-post .entry-meta a,
    body.single-post .cat-links a,
    body.single-post .posted-on a {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    body.single-post .cat-links a:hover,
    body.single-post .posted-on a:hover {
        color: #0abdc6 !important;
    }
    /* Body text */
    body.single-post .entry-content,
    body.single-post .entry-content p,
    body.single-post .entry-content li {
        color: rgba(255, 255, 255, 0.8) !important;
        font-family: 'Barlow', sans-serif;
        font-size: 1.05rem;
        line-height: 1.7;
    }
    /* Headings */
    body.single-post .entry-content h2 {
        color: #14ffec !important;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2rem;
        letter-spacing: 0.03em;
        margin-top: 2.5em;
        margin-bottom: 0.8em;
    }
    body.single-post .entry-content h3 {
        color: #ffffff !important;
        font-family: 'Barlow', sans-serif;
        font-weight: 700;
        font-size: 1.25rem;
        margin-top: 2em;
        margin-bottom: 0.5em;
    }
    /* Links */
    body.single-post .entry-content a {
        color: #0abdc6 !important;
        transition: color 0.15s;
    }
    body.single-post .entry-content a:hover {
        color: #14ffec !important;
    }
    /* Strong/bold */
    body.single-post .entry-content strong {
        color: #ffffff;
    }
    /* Lists */
    body.single-post .entry-content ul,
    body.single-post .entry-content ol {
        color: rgba(255, 255, 255, 0.8);
        padding-left: 1.5em;
    }
    /* Blockquotes */
    body.single-post .entry-content blockquote {
        border-left: 3px solid #14ffec;
        padding: 1em 1.5em;
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.7);
        font-style: italic;
    }
    /* Blog archive / category page titles */
    body.blog .page-title,
    body.category .page-title,
    body.archive .page-title,
    body.blog .ast-archive-title,
    body.category .ast-archive-title {
        color: #ffffff !important;
        padding-top: 120px;
    }
    body.blog .ast-archive-description p,
    body.category .ast-archive-description p {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    /* Blog post cards on archive pages */
    body.blog .ast-article-post,
    body.category .ast-article-post,
    body.archive .ast-article-post {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
    }
    body.blog .entry-title a,
    body.category .entry-title a,
    body.archive .entry-title a {
        color: #ffffff !important;
    }
    body.blog .entry-title a:hover,
    body.category .entry-title a:hover {
        color: #14ffec !important;
    }
    body.blog .entry-content p,
    body.category .entry-content p,
    body.blog .ast-excerpt-container p {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    /* Sidebar/widget text */
    body.single-post .widget,
    body.single-post .widget a,
    body.blog .widget,
    body.blog .widget a {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    /* Post navigation */
    body.single-post .post-navigation a,
    body.single-post .nav-links a {
        color: #0abdc6 !important;
    }
    body.single-post .post-navigation a:hover {
        color: #14ffec !important;
    }
    /* Comment section */
    body.single-post .comments-area,
    body.single-post .comment-respond label {
        color: rgba(255, 255, 255, 0.7);
    }
    body.single-post .ast-comment-list li {
        border-color: rgba(255, 255, 255, 0.1);
    }
    /* Table of Contents */
    .hcm-toc {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 1.5em 2em;
        margin: 2em 0 2.5em;
    }
    .hcm-toc__title {
        color: #ffffff !important;
        font-family: 'Barlow', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        margin: 0 0 0.8em 0 !important;
        letter-spacing: 0.02em;
    }
    .hcm-toc__list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .hcm-toc__list li {
        margin: 0 !important;
        padding: 0 !important;
    }
    .hcm-toc__list a {
        color: #0abdc6 !important;
        text-decoration: none !important;
        font-size: 0.95rem !important;
        display: block;
        padding: 0.3em 0;
        transition: color 0.15s, padding-left 0.15s;
        border: none !important;
    }
    .hcm-toc__list a:hover {
        color: #14ffec !important;
        padding-left: 6px;
    }
    .hcm-toc__list .hcm-toc__sub {
        padding-left: 1.2em !important;
    }
    .hcm-toc__list .hcm-toc__sub a {
        color: rgba(255, 255, 255, 0.55) !important;
        font-size: 0.88rem !important;
    }
    .hcm-toc__list .hcm-toc__sub a:hover {
        color: #0abdc6 !important;
    }
    /* In-article CTA block.
       Post content otherwise carries no classes at all, so this is the one hook a post
       can use to break the wall of prose with an offer. Deliberately quieter than the
       Related Resources panel below it: it sits mid-article and should read as an aside,
       not as the end of the piece. */
    .hcm-post-cta {
        margin: 2.5em 0;
        padding: 1.4em 1.6em;
        background: rgba(20, 255, 236, 0.06);
        border: 1px solid rgba(20, 255, 236, 0.28);
        border-left-width: 3px;
        border-radius: 8px;
    }
    .hcm-post-cta p {
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    .hcm-post-cta strong {
        color: #ffffff !important;
    }
    .hcm-post-cta a {
        color: #14ffec !important;
        font-weight: 600;
    }

    /* Blog Related Resources */
    .hcm-blog-related {
        margin: 3em 0 2em;
        padding: 2em;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
    }
    .hcm-blog-related__title {
        color: #14ffec !important;
        font-family: 'Bebas Neue', sans-serif !important;
        font-size: 1.6rem !important;
        letter-spacing: 0.03em;
        margin: 0 0 1.2em 0 !important;
    }
    .hcm-blog-related__group {
        margin-bottom: 1.4em;
    }
    .hcm-blog-related__group:last-child {
        margin-bottom: 0;
    }
    .hcm-blog-related__group-title {
        color: #ffffff !important;
        font-family: 'Barlow', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        margin: 0 0 0.6em 0 !important;
    }
    .hcm-blog-related__list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .hcm-blog-related__list li {
        margin: 0 !important;
        padding: 0 !important;
    }
    .hcm-blog-related__list a {
        display: inline-block;
        padding: 5px 14px;
        background: rgba(10, 189, 198, 0.08);
        border: 1px solid rgba(10, 189, 198, 0.25);
        border-radius: 20px;
        color: #0abdc6 !important;
        text-decoration: none !important;
        font-size: 0.88rem !important;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .hcm-blog-related__list a:hover {
        background: rgba(10, 189, 198, 0.18);
        border-color: rgba(20, 255, 236, 0.4);
        color: #14ffec !important;
    }


/* ===== Blog article tables + callouts (2026 content batch) ===== */
.single-post .entry-content table,
.hcm-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: 0.98rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    display: table;
}
.single-post .entry-content th,
.single-post .entry-content td,
.hcm-article th,
.hcm-article td {
    padding: 0.75em 1em;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    vertical-align: top;
    color: rgba(255,255,255,0.85) !important;
}
.single-post .entry-content thead th,
.hcm-article thead th {
    background: rgba(20,255,236,0.08);
    color: #14ffec !important;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.single-post .entry-content tbody tr:last-child td { border-bottom: none; }
.single-post .entry-content tbody tr:hover { background: rgba(255,255,255,0.02); }
.single-post .entry-content table a { color: #0abdc6 !important; }
.single-post .entry-content table strong { color: #ffffff !important; }
/* Responsive: let wide tables scroll instead of breaking layout */
@media (max-width: 640px) {
    .single-post .entry-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===== Booking modal + sticky contact bar (hcm-booking.php) ===== */
body.hcm-book-open{overflow:hidden}
.hcm-book{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}
.hcm-book[hidden]{display:none}
.hcm-book__backdrop{position:absolute;inset:0;background:rgba(2,8,16,.82);backdrop-filter:blur(4px)}
.hcm-book__dialog{position:relative;width:100%;max-width:920px;max-height:92vh;display:flex;flex-direction:column;
  background:#071420;border:1px solid rgba(20,255,236,.22);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.hcm-book__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.hcm-book__eyebrow{font-family:'Barlow',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#EA580C;margin:0 0 6px}
.hcm-book__title{font-family:'Bebas Neue',sans-serif;font-size:1.9rem;letter-spacing:.03em;color:#fff !important;margin:0;line-height:1}
.hcm-book__close{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;
  width:36px;height:36px;border-radius:8px;font-size:22px;line-height:1;cursor:pointer;flex:0 0 auto;transition:all .2s}
.hcm-book__close:hover{background:rgba(255,255,255,.1);border-color:rgba(20,255,236,.5)}
.hcm-book__body{position:relative;flex:1;min-height:520px;background:#fff}
.hcm-book__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow',sans-serif;color:#4A5768;font-size:.95rem}
.hcm-book__frame{position:relative;width:100%;height:100%;min-height:520px;border:0;display:block}
.hcm-book__foot{margin:0;padding:12px 22px;font-family:'Barlow',sans-serif;font-size:.88rem;
  color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.09);text-align:center}
.hcm-book__foot a{color:#14ffec;text-decoration:none;font-weight:600}
@media(max-width:640px){
  .hcm-book{padding:0}
  .hcm-book__dialog{max-height:100vh;height:100vh;border-radius:0;border:0}
  .hcm-book__title{font-size:1.6rem}
}
/* sticky mobile call/book bar */
.hcm-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:9998;display:none;gap:1px;
  background:rgba(255,255,255,.1);border-top:1px solid rgba(20,255,236,.2)}
.hcm-stickybar__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 8px;background:#071420;color:#fff;font-family:'Barlow',sans-serif;font-weight:700;
  font-size:.9rem;text-decoration:none;letter-spacing:.02em}
.hcm-stickybar__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.hcm-stickybar__btn--primary{background:linear-gradient(135deg,#14ffec,#0abdc6);color:#020810}
@media(max-width:768px){
  .hcm-stickybar{display:flex}
  body{padding-bottom:52px}
}

/* ===== Dark full-bleed page treatment (body.hcm-dark-page, set in hcm-seo.php) =====
   Astra's default page template ships a white body, which leaves the header
   white-on-white at scroll-top and the content floating as a card on white.
   This matches the treatment blog + pSEO pages already receive. */
/* Astra paints every heading with --ast-global-color-2, which the theme sets to
   #1a1a1a for its light background. On a dark page that is near-black on near-black:
   the /hubrig-crew-marketing-case-studies/ <h1> rendered effectively invisible.
   Any heading that doesn't carry its own colour hits this, so it is a whole class of
   bug rather than one page.
   Redefining the variable is deliberate, and better than setting `color` here.
   Astra's rule is a bare `h1,h2,…` selector (specificity 0,0,1), so a `color`
   override would only need to beat that — but it would then also outrank every
   hand-styled heading inside these pages (`.hcm-case-title`, the gradient
   `.hcm-highlight` text, section headings in brand colours) and flatten them all.
   Changing the variable leaves normal cascade order intact: headings with their own
   colour keep it, and only the ones falling back to the theme default change. */
body.hcm-dark-page{
  --ast-global-color-2:#ffffff;
  background-color:#020810 !important;
  background:linear-gradient(180deg,#020810 0%,#041220 40%,#062030 70%,#0a3040 100%) !important;
  background-attachment:fixed !important;
}
body.hcm-fullbleed #page,
body.hcm-fullbleed #content.site-content,
body.hcm-fullbleed .site-content,
body.hcm-fullbleed .ast-container,
body.hcm-fullbleed #primary,
body.hcm-fullbleed .entry-content,
body.hcm-fullbleed .ast-article-single{
  background:transparent !important;
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
/* Astra prints an entry header/title above page-builder content — not wanted here */
body.hcm-fullbleed .entry-header,
body.hcm-fullbleed .ast-single-post-order,
body.hcm-fullbleed .entry-title{display:none !important}
/* clear the fixed header */
body.hcm-fullbleed #primary{padding-top:96px !important}
@media(max-width:768px){body.hcm-fullbleed #primary{padding-top:74px !important}}
/* header must read as light-on-dark from the very top of these pages */
body.hcm-dark-page .hcm-header__nav-link,
body.hcm-dark-page .hcm-header__nav-link span,
body.hcm-dark-page .hcm-header__dropdown-link span,
body.hcm-dark-page .main-header-menu a,
body.hcm-dark-page .ast-builder-menu a{color:#fff !important}
body.hcm-dark-page .hcm-header{background:rgba(2,8,16,.95) !important}
body.hcm-dark-page .hcm-header__logo img{height:55px !important;width:auto !important;max-height:55px !important}
/* the reviews block should flow with the page, not sit as a card on it */
body.hcm-fullbleed .hcm-reviews{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  max-width:1120px;
  margin:0 auto !important;
  padding:1rem clamp(1rem,3vw,2rem) 3rem !important;
}

/* PANEL HEIGHT / FOLD: the panel carries four client results and runs ~430px tall.
   It clears the fold on a laptop viewport. A fifth item pushed it to ~505px, which
   dropped the last metric and the case-studies link below the fold on a short (~583px)
   viewport; that was accepted at the time, then the fifth metric was removed for
   editorial reasons, so the panel is comfortably within the fold again.
   Before adding another item, re-check the fold at 583px AND 871px. If height ever
   needs forcing, the options are: hide trailing rows under a max-height media query,
   or tighten .hcm-hero-proof__item padding and __value font-size. */
/* ===== Hero: results proof panel + review trust line =====
   Replaces the former compass graphic. The panel occupies the compass's old slot
   (absolute, right 8%, top-aligned to the headline) on desktop and stacks under the
   copy below 1024px. Metrics deep-link to their own case studies. */
.hcm-hero-proof{
  z-index:6;
  background:rgba(4,20,32,.72);
  backdrop-filter:blur(10px);
  border:1px solid rgba(20,255,236,.22);
  border-radius:14px;
  padding:1.4rem 1.5rem;
  font-family:'Barlow',sans-serif;
}
.hcm-hero-proof__title{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 .9rem;
}
.hcm-hero-proof__item{
  display:block;text-decoration:none;padding:.75rem 0;
  border-top:1px solid rgba(255,255,255,.09);transition:padding-left .2s ease;
}
.hcm-hero-proof__item:first-of-type{border-top:0;padding-top:0}
.hcm-hero-proof__item:hover{padding-left:6px}
.hcm-hero-proof__value{
  display:block;font-family:'Bebas Neue',sans-serif;font-size:2.1rem;line-height:1;
  letter-spacing:.02em;color:#14ffec;
}
.hcm-hero-proof__label{
  display:block;margin-top:2px;font-size:.86rem;line-height:1.35;color:rgba(255,255,255,.72);
}
.hcm-hero-proof__item:hover .hcm-hero-proof__label{color:#fff}
.hcm-hero-proof__all{
  display:inline-flex;align-items:center;gap:7px;margin-top:1rem;
  font-size:.85rem;font-weight:700;color:#14ffec;text-decoration:none;
}
.hcm-hero-proof__all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.hcm-hero-proof__all:hover svg{transform:translateX(3px)}

/* review trust line under the CTAs */
.hcm-hero-rating{
  display:inline-flex;align-items:center;gap:10px;margin-top:1.5rem;
  text-decoration:none;font-family:'Barlow',sans-serif;font-size:1.04rem;
  color:rgba(255,255,255,.75);
}
.hcm-hero-rating__stars{color:#ffc107;letter-spacing:2px;font-size:1.12rem}
.hcm-hero-rating__text strong{color:#fff;font-weight:700}
.hcm-hero-rating svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .2s ease}
.hcm-hero-rating:hover{color:#fff}
.hcm-hero-rating:hover svg{transform:translateX(3px);opacity:1}

@media (min-width:1025px){
  /* --- Hero vertical scale -------------------------------------------------
     The hero is a 100vh section, but its copy column ran 1164px tall — so on a
     laptop viewport both CTAs and the review trust line sat below the fold, i.e.
     the two things the hero exists to surface. The type scale therefore keys off
     viewport HEIGHT as well as width: min(10vw,12vh) keeps the headline as large
     as the shorter axis allows, and the rhythm clamps follow it down. A tall
     screen still gets the full 7rem headline and generous spacing; a short one
     gets a smaller headline and keeps the CTAs on screen.
     Measured with CTAs + review line above the fold at 583px, 815px and 995px. */
  .hcm-hero-wrapper{
    --hcm-hero-fs:clamp(3rem, min(10vw, 12vh), 7rem);
    --hcm-hero-pt:clamp(24px, 5vh, 72px);
    /* Side gutter. See the full-bleed note below for where the -66px comes from:
       it reproduces the inset the design was tuned against, now that the hero is
       the width it claims to be. Used by the copy column's padding and by the
       results panel's right offset, which share the hero as containing block. */
    --hcm-hero-gutter:calc(8% - 66px);
  }
  .hcm-hero-wrapper .hcm-hero-title{
    font-size:var(--hcm-hero-fs);
    margin-bottom:clamp(14px,2.5vh,28px);
  }
  .hcm-hero-wrapper .hcm-hero-subtitle{
    /* was capped at 520px inside a ~644px column, buying a needless extra line */
    max-width:600px;
    font-size:clamp(1rem,2.35vh,1.2rem);
    margin-bottom:clamp(20px,3.5vh,40px);
  }
  .hcm-hero-wrapper .hcm-hero-rating{margin-top:clamp(12px,2vh,24px)}

  /* --- Full-bleed geometry --------------------------------------------------
     The hero's Elementor widget is outdented with margin:-151px against a column
     that itself sits 10px inside the viewport, then re-inset with padding:62px —
     a net -89px per side. So the section rendered 158px WIDER than the viewport,
     its left edge pinned at -79 at every width, with body{overflow-x:hidden}
     quietly clipping the remainder (141px of phantom scrollWidth, no scrollbar).
     Invisible, but it made every percentage inside the hero resolve against a
     width that wasn't real: `8%` side padding came out as 8% of (W + 158), so the
     true text inset was 0.08W - 66px rather than 8%. That already cost us once —
     it is what squeezed the copy column to 342px.
     The rule below outdents by exactly the column's own 10px instead, so the hero
     spans the viewport and nothing overflows; the -66px in --hcm-hero-gutter and
     the -158px on these max-widths then subtract the phantom width back out, so
     the rendered result is pixel-identical to before.
     Deliberately desktop-only: tablet and mobile use different Elementor values
     (-151/62 against a 30px column inset; -76/70 against none) and neither
     reports any phantom scroll width, so they are left untouched. */
  body .elementor-1183 .elementor-element.elementor-element-4ff7db1 > .elementor-widget-container{
    margin-left:-10px;margin-right:-10px;padding-left:0;padding-right:0;
  }
  .hcm-hero-wrapper .hcm-hero-content{
    max-width:622px;                 /* was 780 against the 158px-inflated hero */
    padding-left:var(--hcm-hero-gutter);
    padding-right:var(--hcm-hero-gutter);
    padding-top:var(--hcm-hero-pt);
    /* justify-content:flex-start makes the headline's offset purely padding-derived,
       so the panel's top below can align to it deterministically at ANY viewport
       height. With centering, a viewport taller than the content pushed the headline
       down while the absolutely-positioned panel stayed put. */
    justify-content:flex-start;
  }
  .hcm-hero-proof{
    position:absolute;right:var(--hcm-hero-gutter);width:min(380px,30vw);
    /* Top-aligned to the headline's cap line: hero padding-top (120) + the content
       padding-top above + ~4.5% of the headline's size, that last being where Bebas
       Neue's caps begin inside its line box. Driving both off the same vars keeps the
       alignment exact as the type scales — change the scale, not this number.
       Replaced top:50%/translateY(-50%), which centred the short panel against a much
       taller copy column: it cut in mid-headline, left the upper right empty, and
       pushed the panel's last metric and its case-studies link under the chat widget. */
    top:calc(120px + var(--hcm-hero-pt) + var(--hcm-hero-fs) * 0.045);
  }
}
@media (min-width:1500px){
  .hcm-hero-wrapper .hcm-hero-content{max-width:762px}  /* was 920, less the 158px */
  .hcm-hero-proof{width:min(420px,27vw)}
}
@media (min-width:768px) and (max-width:1024px){
  /* Tablet only: at this breakpoint the hero section starts ~190px higher than it does
     on either side of it (hero top -214, vs -24 on desktop and -21 on phones), so the
     H1's first line rendered above the viewport, hidden behind the fixed header. Phones
     escape it because Elementor gives them their own, smaller negative margin (-76/0)
     instead of the -151/62 used from 768px up. Restores ~40px of air under the header.
     Checked at both edges of the range: below 768 this rule is off and the mobile values
     take over, so there's no width where neither applies. */
  .hcm-hero-wrapper .hcm-hero-content{padding-top:224px}
}
@media (max-width:1024px){
  .hcm-hero-proof{
    position:relative;margin:0 8% 90px;max-width:560px;
  }
}
@media (max-width:600px){
  .hcm-hero-proof{margin:0 20px 80px;padding:1.2rem 1.15rem}
  .hcm-hero-proof__value{font-size:1.8rem}
  .hcm-hero-rating{margin-top:1.25rem;font-size:.96rem}
}

/* ===== Lead forms (hcm-forms.php) =====
   Baseline only — deliberately NO !important. Each of the 17 pages that carried a
   Pipedrive embed already ships its own `.hcm-pipedrive-form input/label/button`
   overrides in that page's inline <style>, written to force Pipedrive's markup into
   that page's palette. Those rules are !important and still apply to this form,
   because the styled .hcm-pipedrive-form wrapper is left in place when the embed is
   swapped out. What follows is the layout those rules never covered, plus a safe
   fallback appearance for any page whose overrides are thinner than the rest. */
.hcm-form{display:flex;flex-direction:column;gap:1.05rem;font-family:'Barlow',sans-serif}
.hcm-field{display:flex;flex-direction:column;min-width:0}
.hcm-form label{display:block;margin-bottom:8px;font-size:.95rem;font-weight:500;color:rgba(255,255,255,.8)}
.hcm-req{color:#14ffec}
.hcm-form input,.hcm-form select,.hcm-form textarea{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;
  color:#fff;padding:14px 16px;font-family:'Barlow',sans-serif;font-size:1rem;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.hcm-form textarea{resize:vertical;min-height:130px;line-height:1.55}
/* Native dropdowns inherit the OS palette, which renders white-on-white here. */
.hcm-form select option{background:#041420;color:#fff}
.hcm-form input:focus,.hcm-form select:focus,.hcm-form textarea:focus{
  border-color:#14ffec;outline:none;box-shadow:0 0 0 3px rgba(20,255,236,.12);
}
.hcm-field.is-invalid input,.hcm-field.is-invalid select,.hcm-field.is-invalid textarea{
  border-color:#ff6b6b;
}
.hcm-field-error{display:block;min-height:0;margin-top:6px;font-size:.82rem;color:#ff8f8f}
.hcm-field-error:empty{margin-top:0}
.hcm-form-submit{
  align-self:flex-start;margin-top:.3rem;cursor:pointer;border:none;border-radius:6px;
  padding:16px 32px;font-family:'Barlow',sans-serif;font-weight:600;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.1em;color:#020810;
  background:linear-gradient(135deg,#14ffec,#0abdc6);transition:box-shadow .3s ease,transform .3s ease;
}
.hcm-form-submit:hover:not(:disabled){box-shadow:0 0 30px rgba(20,255,236,.45);transform:translateY(-2px)}
.hcm-form-submit:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.hcm-form-status{margin:0;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.75)}
.hcm-form-status:empty{display:none}
.hcm-form-status.is-error{color:#ff8f8f}
.hcm-form-status.is-success{color:#14ffec;font-size:1.02rem}
/* Honeypot. Off-screen rather than display:none — bots that read CSS skip hidden
   fields, but one that is merely positioned away still looks fillable to them. */
.hcm-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .hcm-form input,.hcm-form select,.hcm-form textarea,.hcm-form-submit{transition:none}
  .hcm-form-submit:hover:not(:disabled){transform:none}
}

/* ===== Shared page header block =====
   Mirrors the .hcm-reviews__head treatment (orange Barlow eyebrow -> Bebas Neue
   title -> muted centred intro) so standalone pages read as part of the same site
   instead of falling through to Astra's Poppins headings. Introduced for the case
   studies page, whose h1 was unstyled Poppins 64px sitting left of a centred intro
   paragraph — two different axes and a typeface used nowhere else on the site.
   Values are taken from the rendered /reviews/ header so the two actually match. */
.hcm-page-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 44px;
}
.hcm-page-head__tag{
  display:inline-block;
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:#EA580C;
  margin:0 0 10px;
}
.hcm-page-head__title{
  font-family:'Bebas Neue',sans-serif;font-weight:600;
  /* /reviews/ renders its title at 48px; this tops out just above it because this one
     is the page's h1 rather than a section heading. */
  font-size:clamp(2.4rem,5.5vw,3.25rem);
  line-height:1.05;letter-spacing:.02em;
  color:#fff;
  margin:0 0 14px;
}
.hcm-page-head__intro{
  font-family:'Barlow',sans-serif;
  font-size:1.05rem;line-height:1.7;
  color:#b0c4de;
  max-width:660px;margin:0 auto;
}
@media (max-width:600px){
  .hcm-page-head{margin-bottom:32px}
  .hcm-page-head__intro{font-size:1rem}
}

/* Friction-reducing line under the hero CTAs. Deliberately quiet — it should be
   readable at the moment of decision without competing with the buttons above it or
   the review proof below. Sits in the same vertical rhythm as the rating line, and
   its margins are tuned so adding it does not push the review line below the fold on
   short laptop viewports (see the hero vertical scale block). */
.hcm-hero-reassure{
  /* Height-aware like the rest of the hero scale: on a short laptop viewport this
     line costs ~8px instead of ~14px, which is the difference between the review
     trust line clearing the fold and sitting just under it. */
  margin:clamp(.5rem, 1.5vh, .9rem) 0 0;
  font-family:'Barlow',sans-serif;
  /* Raised from .86rem. max-width goes up with it: at 560px the extra 2px pushed this
     from two lines to three, which costs more fold clearance than the size increase
     itself. Widening the measure keeps it at two. */
  font-size:.98rem;line-height:1.5;
  color:rgba(255,255,255,.55);
  max-width:620px;
}
@media (max-width:600px){
  .hcm-hero-reassure{font-size:.9rem;margin-top:.7rem}
}

/* ===== Hero soft CTA =====
   The alternative path for a visitor who is not ready to book a call. Sits below the
   reassurance line so the block reads ask, de-risk, alternative, proof.

   Height-aware for the same reason the reassurance line is: at 1440x900 there was only
   26px of clearance under the review trust line, so anything added here has to be paid
   for. It is paid for by the CTA row, which wrapped to two rows at that width until the
   secondary button label got shorter. Keep this to ONE line at 560px; a second line
   spends clearance that does not exist. */
.hcm-hero-soft{
  margin:clamp(.4rem, 1.1vh, .75rem) 0 0;
  font-family:'Barlow',sans-serif;
  /* Raised from .86rem, with the measure widened to match the reassurance line above so
     the two read as one block and this stays on a single line. */
  font-size:.98rem;line-height:1.5;
  color:rgba(255,255,255,.55);
  max-width:620px;
}
.hcm-hero-soft a{
  color:#14ffec;text-decoration:none;
  border-bottom:1px solid rgba(20,255,236,.35);
  transition:border-color .2s ease;
}
.hcm-hero-soft a:hover,
.hcm-hero-soft a:focus-visible{border-bottom-color:#14ffec}
@media (max-width:600px){
  .hcm-hero-soft{font-size:.9rem;margin-top:.65rem}
}

/* ===== Header click-to-call =====
   The header runs out of room: at a 1718px viewport the nav ends exactly where the
   first CTA begins (zero gap) and the CTAs already overrun the 1400px inner container.
   So this is an icon at normal desktop widths — ~40px, the cheapest element that can
   carry the affordance — and only becomes a labelled button at >=1500px where there is
   measurably space for the number.
   Deliberately an outline rather than a filled pill: it is a utility, and "Get Started"
   should stay the only primary action in the header.
   Hidden below 1024px on purpose — the sticky bar already provides tap-to-call there,
   and two competing call affordances on a phone is worse than one. The mobile MENU
   gets its own link instead. */
.hcm-header__call{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:40px;height:40px;padding:0;margin-right:10px;
  flex-shrink:0;
  border:1px solid rgba(20,255,236,.45);border-radius:100px;
  color:#14ffec;text-decoration:none;
  transition:background .3s ease,border-color .3s ease;
}
.hcm-header__call svg{
  width:17px;height:17px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.hcm-header__call-num{
  display:none;
  font-family:'Barlow',sans-serif;font-weight:600;font-size:13px;
  white-space:nowrap;
}
.hcm-header__call:hover,
.hcm-header__call:focus-visible{background:rgba(20,255,236,.12);border-color:#14ffec;color:#14ffec}
.hcm-header__call:focus-visible{outline:2px solid #14ffec;outline-offset:2px}

/* The number stays icon-only at every desktop width, and that is a measured
   decision rather than a stylistic one. A labelled variant was built and tested: at a
   1718px viewport it pushed Get Started to 1731px — past the viewport edge, clipped by
   body{overflow-x:hidden} rather than visibly broken, which is the dangerous kind of
   wrong. The label costs 143px against the icon's 40px and the header has no such room
   at any width short of ~1800px. The number is still reachable: title on hover,
   aria-label for assistive tech, and in full in the contact block and footer. */
/* Burger takes over; the sticky bar covers calling from here down. */
@media (max-width:1024px){
  .hcm-header__call{display:none}
}
/* Mobile menu variant — quieter than the Get Started CTA beneath it. */
.hcm-header__mobile-cta--call{
  background:transparent !important;
  border:1px solid rgba(20,255,236,.45) !important;
  color:#14ffec !important;
}
.hcm-header__mobile-cta--call:hover{background:rgba(20,255,236,.12) !important;color:#14ffec !important}
@media (prefers-reduced-motion:reduce){
  .hcm-header__call{transition:none}
}

/* ===== Header fit =====
   Measured, not guessed. The header needs ~1469px of intrinsic width (logo + seven
   nav dropdowns + call + ActionLab + Get Started) but the burger only took over at
   1024px. So between roughly 1025px and 1450px the row overflowed and "Get Started"
   — the primary CTA — was clipped off the right edge, silently, because
   body{overflow-x:hidden} swallows it rather than showing a scrollbar. At 1366px it
   overran by 53px BEFORE the call button existed; the call button added 50px more.
   Two changes:
   1. Tighten the row so the full nav comfortably fits on a 1400px+ screen.
   2. Hand over to the burger at 1400px instead of 1024px, because below ~1370px the
      row cannot fit however it is tightened — seven dropdowns plus three actions is
      simply wider than the viewport. A working burger beats a clipped CTA.
   If the nav ever loses an item or a CTA, re-measure: the 1400px handover can come
   back down. */
/* .hcm-header prefix is required, not cosmetic: the base rules live in an inline
   <style> in the body, which beats an equally-specific rule from a head stylesheet on
   source order. Without the extra class these overrides silently do nothing. */
@media (min-width:1400px){
  .hcm-header .hcm-header__nav{gap:0}
  .hcm-header .hcm-header__nav-link{padding-left:8px;padding-right:8px}
  .hcm-header .hcm-header__cta{padding-left:16px;padding-right:16px}
  .hcm-header .hcm-header__cta--actionlab{margin-right:8px}
  .hcm-header .hcm-header__call{margin-right:8px}
}
/* Burger range extended upward. The mobile nav is full-featured, so these widths get
   a complete menu instead of a truncated row. */
@media (min-width:1025px) and (max-width:1399px){
  .hcm-header__nav,
  .hcm-header__cta,
  .hcm-header__call{display:none !important}
  .hcm-header__toggle{display:block !important}
}

/* Footer brand line. The brand column previously held only a logo, so this both fills
   it and repeats the "Hubrig Crew Marketing (HCM)" association on every page — which
   is the point: an entity alias is learned from repetition, not one declaration. */
.hcm-footer__blurb{
  margin:16px 0 0;
  max-width:320px;
  font-family:'Barlow',sans-serif;
  font-size:.88rem;line-height:1.65;
  color:rgba(255,255,255,.62);
}
.hcm-footer__blurb strong{color:rgba(255,255,255,.85);font-weight:600}
@media (max-width:768px){
  .hcm-footer__blurb{max-width:none;font-size:.85rem}
}