/* Final public-site theme. This file must load after style.css. */
body:not(.blog-admin-page) {
    color: #243753;
    background: #f8fbff;
}

body:not(.blog-admin-page) .top {
    border-bottom: 1px solid #dce8f8;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 28px rgba(37, 79, 142, .07);
}

/* Display the supplied main logo cleanly at every header size. */
body:not(.blog-admin-page) .top .nav .logo {
    position: static;
    width: 240px;
    height: 56px;
    flex: 0 0 240px;
    overflow: visible;
    align-self: center;
}

body:not(.blog-admin-page) .top .nav .logo-img {
    position: static;
    display: block;
    width: 240px;
    height: auto;
    max-width: 100%;
    animation: none;
    transform: none;
}

@media (max-width: 1200px) {
    body:not(.blog-admin-page) .top .nav .logo {
        width: 210px;
        height: 50px;
        flex-basis: 210px;
    }

    body:not(.blog-admin-page) .top .nav .logo-img {
        width: 210px;
    }
}

@media (max-width: 600px) {
    body:not(.blog-admin-page) .top .nav .logo {
        width: 60px;
        height: 48px;
        flex-basis: 60px;
    }

    body:not(.blog-admin-page) .top .nav .logo-img {
        width: 60px;
        height: 48px;
        object-fit: contain;
        content: url("/images/brand/analyticroute-mobile-logo.png");
    }
}

@media (max-width: 380px) {
    body:not(.blog-admin-page) .top .nav .logo {
        width: 54px;
        height: 44px;
        flex-basis: 54px;
    }

    body:not(.blog-admin-page) .top .nav .logo-img {
        width: 54px;
        height: 44px;
    }
}

body:not(.blog-admin-page) .section { background-color: #fff; }

body:not(.blog-admin-page) .section.soft {
    background: radial-gradient(circle at 8% 0, rgba(96,165,250,.08), transparent 28%), linear-gradient(180deg, #f5f9ff 0%, #edf5ff 100%);
}

body:not(.blog-admin-page) .page-hero {
    border-bottom: 1px solid #c6dcf7;
    background: radial-gradient(circle at 78% 18%, rgba(96,165,250,.2), transparent 30%), radial-gradient(circle at 15% 90%, rgba(34,211,238,.1), transparent 26%), linear-gradient(120deg, #fbfdff 0%, #edf5ff 55%, #dcecff 100%);
    color: #10274c;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.85);
}

body:not(.blog-admin-page) .page-hero::before {
    opacity: .3;
    background-image: linear-gradient(rgba(37,99,235,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
}

body:not(.blog-admin-page) .page-hero::after {
    background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.75), transparent 44%);
}

body:not(.blog-admin-page) .page-hero > .site-hero-network { opacity: .15; }

body:not(.blog-admin-page) .page-hero h1 {
    color: #0d2857;
    text-shadow: none;
}

.ecommerce-page .ecommerce-hero-title > span {
    display: block;
}

.ecommerce-page .ecommerce-hero-title > span:first-child {
    white-space: nowrap;
}

body:not(.blog-admin-page) .page-hero p,
.services-page .page-hero p,
.case-studies-page .page-hero p {
    color: #526a8d;
}

.about-page .about-hero-label,
body:not(.blog-admin-page) .page-hero [class*="hero-label"] {
    border-color: #b8d2f1;
    color: #1766ba;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 24px rgba(48, 90, 150, .08);
}

body:not(.blog-admin-page) :is(.card, .info-box, .process-box, .step-card, .photo-card) {
    border-color: #dbe7f6;
    background-color: #fff;
    box-shadow: 0 16px 42px rgba(30,72,132,.07);
}

body:not(.blog-admin-page) :is(.card, .info-box, .process-box, .step-card, .photo-card):hover {
    border-color: #c5d9f4;
    box-shadow: 0 20px 48px rgba(30,72,132,.1);
}

body:not(.blog-admin-page) .cta,
.about-page .about-team-section .about-values-card,
.gtm-benefits-panel {
    border: 1px solid #c9ddf8;
    background: radial-gradient(circle at 90% 0, rgba(96,165,250,.16), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #e9f3ff 100%);
    color: #19345f;
    box-shadow: 0 18px 46px rgba(37,83,151,.09);
}

body:not(.blog-admin-page) .cta :is(h2, h3),
.about-page .about-team-section .about-values-card h3,
.gtm-benefits-panel h2 {
    color: #102b5a;
    text-shadow: none;
}

body:not(.blog-admin-page) .cta p,
.about-page .about-team-section .about-values-card p,
.gtm-benefits-panel p { color: #526984; }

body:not(.blog-admin-page) .footer {
    border-top: 1px solid #cbdff7;
    background: radial-gradient(circle at 88% 0, rgba(96,165,250,.15), transparent 30%), linear-gradient(180deg, #edf5ff 0%, #e3efff 100%);
    color: #324965;
    box-shadow: 0 -12px 38px rgba(44,83,138,.06);
}

body:not(.blog-admin-page) .footer::before {
    background: radial-gradient(circle, rgba(59,130,246,.12), transparent 68%);
}

body:not(.blog-admin-page) .footer :is(p, a, li, span, small) { color: #526985; }
body:not(.blog-admin-page) .footer :is(strong, h2, h3, h4) { color: #102b55; }
body:not(.blog-admin-page) .footer a:hover { color: #175fd1; }

.home-page .hero {
    background: radial-gradient(circle at 78% 38%, rgba(59,130,246,.15), transparent 34%), linear-gradient(135deg, #f9fcff 0%, #edf5ff 58%, #dbeaff 100%);
    color: #183252;
}

.home-page .home-hero-copy h1 { color: #102b55; text-shadow: none; }

.home-page .home-hero-copy h1 > span,
.home-page .home-hero-copy h1 > span + span {
    background: linear-gradient(100deg, #1558c9 0%, #287fe5 54%, #0891b2 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.home-page .home-hero-copy h1 .home-hero-agency {
    color: #1472ba;
    -webkit-text-fill-color: #1472ba;
}

.home-page .home-hero-copy > p,
.home-page .home-hero-proof li { color: #526986; }

.home-page .home-hero-secondary {
    border-color: #c2d7f2;
    background: rgba(255,255,255,.76);
    color: #174b96;
    box-shadow: 0 8px 24px rgba(37,84,150,.06);
}

.home-page .home-hero-secondary:hover {
    border-color: #72a8ef;
    background: #fff;
}

.home-page .tracking-background-tab {
    border-color: #c9dcf4;
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(220,235,255,.86));
    box-shadow: 0 18px 40px rgba(35,73,128,.12);
}

.home-page .home-live-dashboard { color: #17345d; }

.home-page :is(.home-pie-heading h3, .home-live-dashboard-head h3, .home-tracking-bars li > span) {
    color: #17345d;
    text-shadow: none;
}

.home-page .home-tracking-bars li small,
.home-page .home-bar-axis { color: #6b7f9b; }

@media (max-width: 1200px) {
    body:not(.blog-admin-page) .top .menu {
        border-color: #d8e5f5;
        background: linear-gradient(160deg, #fff 0%, #edf5ff 100%);
        box-shadow: 0 24px 56px rgba(28,67,123,.14);
    }

    body:not(.blog-admin-page) .top .menu :is(a, .dropbtn) { color: #27425f; }
    body:not(.blog-admin-page) .top .menu :is(a, .dropbtn):hover { color: #175fd1; background: #edf5ff; }
}

/* AnalyticRoute light-blue design system */
:root {
    --ar-ink: #082653;
    --ar-copy: #405c80;
    --ar-blue: #1262cf;
    --ar-cyan: #28bce6;
    --ar-mint: #58d8bd;
    --ar-line: #bcd5f0;
    --ar-soft: #e8f3ff;
    --ar-canvas: #f4f9ff;
    --ar-shadow: 0 22px 60px rgba(31, 73, 132, .14);
}

body:not(.blog-admin-page) {
    color: var(--ar-copy);
    background: var(--ar-canvas);
}

body:not(.blog-admin-page) :is(h1, h2, h3, h4, strong) { color: var(--ar-ink); }

body:not(.blog-admin-page) .top {
    position: relative;
    z-index: 100;
    border-bottom: 1px solid rgba(153, 190, 231, .8);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 34px rgba(25, 65, 124, .1);
    backdrop-filter: blur(18px);
}

body:not(.blog-admin-page) .menu > a,
body:not(.blog-admin-page) .menu .dropbtn { color: #243b62; }

body:not(.blog-admin-page) .menu > a:hover,
body:not(.blog-admin-page) .menu .dropbtn:hover,
body:not(.blog-admin-page) .menu > a.active { color: var(--ar-blue); }

body:not(.blog-admin-page) :is(.dropdown-content, .nested-content) {
    border: 1px solid #d9e7f7;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 54px rgba(30, 67, 123, .13);
}

body:not(.blog-admin-page) :is(.dropdown-content, .nested-content) a { color: #334b6c; }
body:not(.blog-admin-page) :is(.dropdown-content, .nested-content) a:hover { color: var(--ar-blue); background: #eff6ff; }

body:not(.blog-admin-page) :is(.btn, button[type="submit"]) {
    border-color: #1768d7;
    background: linear-gradient(135deg, #1768d7 0%, #2f8bea 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(23, 104, 215, .2);
}

body:not(.blog-admin-page) :is(.btn, button[type="submit"]):hover {
    border-color: #0d56ba;
    background: linear-gradient(135deg, #0d56ba 0%, #207bd8 100%);
    box-shadow: 0 16px 34px rgba(23, 104, 215, .26);
}

/* Shared split hero inspired by the selected dashboard design. */
body:not(.blog-admin-page) .page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 430px;
    padding: clamp(72px, 8vw, 108px) 0;
    border-bottom: 1px solid #bdd8f5;
    background:
        radial-gradient(circle at 83% 38%, rgba(40, 188, 230, .24), transparent 27%),
        radial-gradient(circle at 70% 105%, rgba(38, 111, 221, .18), transparent 36%),
        linear-gradient(112deg, #f8fbff 0%, #eaf4ff 50%, #d8eaff 100%);
}

body:not(.blog-admin-page) .page-hero::before {
    z-index: -2;
    opacity: .62;
    background-image:
        linear-gradient(rgba(35, 100, 188, .095) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 100, 188, .095) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 70%, transparent 100%);
}

body:not(.blog-admin-page) .page-hero::after {
    position: absolute;
    z-index: -1;
    inset: auto;
    top: 18%;
    right: max(5vw, calc((100vw - 1320px) / 2));
    bottom: auto;
    left: auto;
    width: min(39vw, 540px);
    height: 64%;
    border: 1px solid rgba(84, 143, 211, .5);
    border-radius: 24px;
    content: "";
    background:
        linear-gradient(90deg, transparent 7%, #4a88ed 7% 14%, transparent 14% 19%, #43bde8 19% 27%, transparent 27% 32%, #2c74e3 32% 42%, transparent 42% 47%, #55cfec 47% 59%, transparent 59%) 12% 51% / 58% 34% no-repeat,
        conic-gradient(#48cae8 0 34%, #3977e8 34% 70%, #dfeaf9 70%) 84% 38% / 104px 104px no-repeat,
        linear-gradient(145deg, #fff, #e1efff);
    box-shadow: 0 30px 70px rgba(29, 72, 132, .22), inset 0 1px 0 #fff;
}

body:not(.blog-admin-page) .page-hero > .container {
    width: min(calc(100% - 48px), 1280px);
    max-width: 1280px;
    padding-right: 0;
    text-align: left;
}

body:not(.blog-admin-page) .page-hero h1 {
    max-width: min(52%, 760px);
    margin: 0;
    color: var(--ar-ink);
    font-size: clamp(3rem, 5.6vw, 5rem);
    line-height: .98;
    letter-spacing: -.06em;
    text-wrap: balance;
}

body:not(.blog-admin-page) .page-hero p {
    max-width: min(52%, 670px);
    margin: 26px 0 0;
    padding-left: 20px;
    border-left: 3px solid #55a8f0;
    color: var(--ar-copy);
    font-size: clamp(1.02rem, 1.7vw, 1.24rem);
    line-height: 1.7;
    text-wrap: balance;
}

body:not(.blog-admin-page) .page-hero [class*="hero-label"] {
    margin-bottom: 24px;
    border: 0;
    color: #1767c9;
    background: transparent;
    box-shadow: none;
    letter-spacing: .13em;
}

body:not(.blog-admin-page) .page-hero [class*="hero-label"]::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border: 2px solid #1689c8;
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 5px rgba(22,137,200,.1);
}

.about-page .page-hero .about-hero-label {
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}

.about-page .page-hero .about-hero-label::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    margin-right: 0;
}

body:not(.blog-admin-page) .page-hero > .site-hero-network { opacity: .09; }

/* Consistent airy sections and cards. */
body:not(.blog-admin-page) .section {
    position: relative;
    background: #fff;
}

body:not(.blog-admin-page) .section.soft,
body:not(.blog-admin-page) main > .section:nth-child(even) {
    background:
        linear-gradient(rgba(48, 108, 190, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48, 108, 190, .055) 1px, transparent 1px),
        linear-gradient(180deg, #f2f8ff 0%, #e5f1ff 100%);
    background-size: 72px 72px, 72px 72px, auto;
}

body:not(.blog-admin-page) .title > span,
body:not(.blog-admin-page) :is(.home-problems-eyebrow, .home-insights-eyebrow, .contact-kicker, .about-card-kicker) {
    color: #1768d7;
    letter-spacing: .13em;
}

body:not(.blog-admin-page) .title h2 {
    color: var(--ar-ink);
    letter-spacing: -.045em;
}

body:not(.blog-admin-page) .title p { color: #536f94; }

body:not(.blog-admin-page) :is(
    .card,
    .info-box,
    .process-box,
    .step-card,
    .service-category-card,
    .home-service-card,
    .contact-form-card,
    .contact-info,
    .enhanced-list-box,
    .enhanced-overview-box,
    .gtm-setup-box,
    .gtm-problems-box,
    .tracking-audit-benefits-box,
    .tracking-audit-review-box,
    .conversion-document-block
) {
    border: 1px solid #c8dcf3;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff 0%, #fbfdff 100%);
    color: var(--ar-copy);
    box-shadow: var(--ar-shadow);
}

.enhanced-page .enhanced-challenges-box .enhanced-list-lead {
    margin-bottom: 8px;
}

.enhanced-page .enhanced-challenges-box .enhanced-challenges-list {
    border-top: 1px solid #dce7f5;
}

.enhanced-page .enhanced-challenges-box .enhanced-note {
    margin-top: 16px !important;
}

body:not(.blog-admin-page) :is(.service-category-card, .home-service-card, .card, .step-card) {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body:not(.blog-admin-page) :is(.service-category-card, .home-service-card, .card, .step-card):hover {
    border-color: #a9c9ef;
    box-shadow: 0 28px 64px rgba(42, 82, 140, .14);
    transform: translateY(-5px);
}

body:not(.blog-admin-page) :is(.service-category-icon, .home-service-icon, .icon, .step-number, .blog-issue-number) {
    border: 1px solid #c6ddf7;
    color: #1768d7;
    background: linear-gradient(145deg, #f4f9ff, #e5f2ff);
    box-shadow: 0 10px 26px rgba(40, 107, 193, .1);
}

body:not(.blog-admin-page) :is(.service-category-icon, .home-service-icon, .icon) svg {
    stroke: currentColor;
}

body:not(.blog-admin-page) .list li::before,
body:not(.blog-admin-page) .check::before { color: #27a99e; }

body:not(.blog-admin-page) :is(
    .ga4-overview-visual,
    .ga4-audit-visual,
    .ga4-google-ads-visual,
    .google-ads-tracking-visual,
    .ecommerce-tracking-visual,
    .enhanced-challenges-visual,
    .tracking-audit-visual,
    .gtm-overview-visual
) {
    border-color: #c9ddf5;
    background: #f4f9ff;
    box-shadow: 0 22px 54px rgba(35, 75, 132, .11);
}

body:not(.blog-admin-page) :is(
    .ga4-overview-visual,
    .ga4-audit-visual,
    .ga4-google-ads-visual,
    .google-ads-tracking-visual,
    .ecommerce-tracking-visual,
    .enhanced-challenges-visual,
    .tracking-audit-visual,
    .gtm-overview-visual
) img { border-radius: 16px; }

body:not(.blog-admin-page) :is(.cta, .service-content-cta, .blog-bottom-cta) {
    overflow: hidden;
    border: 1px solid #b2d0f1;
    border-radius: 24px;
    color: var(--ar-copy);
    background:
        radial-gradient(circle at 86% 12%, rgba(40, 188, 230, .24), transparent 28%),
        linear-gradient(135deg, #f9fcff 0%, #deedff 100%);
    box-shadow: var(--ar-shadow);
}

body:not(.blog-admin-page) :is(.cta, .service-content-cta, .blog-bottom-cta) :is(h2, h3) {
    color: var(--ar-ink);
    text-shadow: none;
}

body:not(.blog-admin-page) :is(.cta, .service-content-cta, .blog-bottom-cta) p { color: var(--ar-copy); }

body:not(.blog-admin-page) :is(.gtm-services-cta, .ga4-services-cta) {
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:not(.blog-admin-page) :is(.gtm-services-cta, .ga4-services-cta) .btn {
    max-width: 100%;
    line-height: 1.35;
    white-space: normal;
}

@media (max-width: 600px) {
    .ga4-page #ga4-implementation .ga4-process-steps .step-card h3,
    .ga4-page #ga4-implementation .ga4-process-steps .step-card p {
        min-width: 0;
        overflow-wrap: break-word;
    }
}

/* Homepage dashboard follows the same pale product-interface treatment. */
.home-page .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 650px;
    border-bottom: 1px solid #bdd8f5;
    background:
        radial-gradient(circle at 80% 34%, rgba(39, 184, 229, .24), transparent 27%),
        linear-gradient(rgba(37, 101, 188, .085) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 101, 188, .085) 1px, transparent 1px),
        linear-gradient(112deg, #f8fbff 0%, #eaf4ff 50%, #d7eaff 100%);
    background-size: auto, 72px 72px, 72px 72px, auto;
}

.home-page .hero::after {
    position: absolute;
    z-index: -1;
    inset: auto;
    top: 4%;
    right: 5%;
    bottom: auto;
    left: auto;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(70, 186, 232, .16);
    border-radius: 50%;
    content: "";
}

.home-page .home-hero-copy .badge {
    border-color: transparent;
    color: #1767c9;
    background: transparent;
    box-shadow: none;
}

.home-page .tracking-preview {
    border: 1px solid #93bbe6;
    background: #fbfdff;
    box-shadow: 0 30px 72px rgba(27, 69, 128, .24), inset 0 1px 0 #fff;
}

.home-page .tracking-background-tab {
    border-color: rgba(94, 150, 216, .42);
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(207,228,252,.92));
    box-shadow: 0 20px 48px rgba(31, 73, 132, .18);
}

.home-page .tracking-site-hero {
    background: linear-gradient(135deg, #e2f1ff, #cfe6ff);
    color: var(--ar-ink);
}

.home-page .tracking-site-hero small { color: #2586c7; }
.home-page .tracking-site-hero em { border: 1px solid #c8dcf3; color: #1768d7; }

/* Blog directory and articles use the same palette. */
.blog-listing-page .blog-listing-hero,
.blog-article-page .blog-article-hero {
    border-bottom-color: #bdd8f5;
    background:
        radial-gradient(circle at 82% 12%, rgba(40, 188, 230, .22), transparent 27%),
        linear-gradient(rgba(37, 101, 188, .085) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 101, 188, .085) 1px, transparent 1px),
        linear-gradient(112deg, #f8fbff 0%, #eaf4ff 50%, #d7eaff 100%);
    background-size: auto, 72px 72px, 72px 72px, auto;
}

.blog-listing-page .blog-hero-dashboard {
    border-color: #99bee8;
    background: linear-gradient(145deg, #fff, #dcecff);
    box-shadow: 0 30px 72px rgba(27, 69, 128, .22), inset 0 1px 0 #fff;
}

.blog-listing-page .blog-list-card,
.blog-article-page :is(.blog-summary, .blog-fix, .blog-checklist li) {
    border-color: #d5e4f5;
    background: #fff;
    box-shadow: 0 18px 46px rgba(42, 82, 140, .08);
}

.blog-listing-page .blog-list-card h2,
.blog-article-page .blog-article-body h2 { color: var(--ar-ink); }

.blog-article-page .blog-bottom-cta span { color: var(--ar-blue); }

body:not(.blog-admin-page) .footer {
    border-top: 1px solid #aecdec;
    background:
        linear-gradient(rgba(55, 118, 199, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55, 118, 199, .06) 1px, transparent 1px),
        linear-gradient(180deg, #eaf4ff 0%, #dbeaff 100%);
    background-size: 64px 64px, 64px 64px, auto;
}

@media (max-width: 1020px) {
    body:not(.blog-admin-page) .page-hero { min-height: 0; padding: 72px 0; }
    body:not(.blog-admin-page) .page-hero::after { display: none; }
    body:not(.blog-admin-page) .page-hero h1 { max-width: 800px; }
    body:not(.blog-admin-page) .page-hero p { max-width: 700px; }
    .home-page .hero { min-height: 0; }
}

@media (max-width: 680px) {
    body:not(.blog-admin-page) .page-hero { padding: 58px 0 62px; }
    body:not(.blog-admin-page) .page-hero::after { display: none; }
    body:not(.blog-admin-page) .page-hero > .container { width: min(calc(100% - 34px), 680px); padding-right: 0; }
    body:not(.blog-admin-page) .page-hero h1 { font-size: clamp(2.5rem, 13vw, 3.7rem); }
    body:not(.blog-admin-page) .page-hero p { padding-left: 15px; font-size: 1rem; }
    .home-page .hero { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.blog-admin-page) :is(.service-category-card, .home-service-card, .card, .step-card) { transition: none; }
}

/* Blog-style dashboard hero shared by every standard page except Home. */
body:not(.home-page):not(.blog-admin-page) .page-hero {
    min-height: 560px;
    padding: 82px 0;
}

body:not(.home-page):not(.blog-admin-page) .page-hero::after { display: none; }

body:not(.home-page):not(.blog-admin-page) .page-hero > .shared-page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
    align-items: center;
    gap: clamp(56px, 8vw, 120px);
    width: min(calc(100% - 40px), 1120px);
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
}

.shared-page-hero-copy {
    position: relative;
    text-align: left;
}

.shared-page-hero-copy::before {
    position: absolute;
    top: -30px;
    left: 0;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    content: "";
    background: linear-gradient(90deg, #2797ee, #45d1ec);
    box-shadow: 52px 0 0 rgba(69, 209, 236, .34);
}

body:not(.home-page) .shared-page-hero-copy h1 {
    max-width: none;
    margin: 0 0 24px;
    font-size: clamp(3rem, 5.3vw, 5rem);
    line-height: .98;
    text-align: left;
}

body:not(.home-page) .shared-page-hero-copy p {
    max-width: 570px;
    margin: 0;
    padding-left: 20px;
    border-left: 3px solid #55a8f0;
    color: var(--ar-copy);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.72;
    text-align: left;
}

body:not(.home-page) .shared-page-hero-copy [class*="hero-label"] {
    display: inline-flex;
    margin: 0 0 24px;
}

.shared-page-hero-art {
    position: relative;
    min-height: 350px;
    perspective: 1100px;
}

.shared-hero-dashboard {
    position: absolute;
    z-index: 3;
    inset: 36px 20px 14px 35px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #99bee8;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(220,236,255,.94));
    box-shadow: 0 34px 74px rgba(27, 69, 128, .22), inset 0 1px 0 #fff;
    backdrop-filter: blur(18px);
    transform: rotateY(-6deg) rotateX(2deg);
}

.shared-hero-dashboard::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.5), transparent 32%);
}

.shared-hero-dashboard-top {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(89, 142, 205, .18);
}

.shared-hero-dashboard-top i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d0e5fb;
}

.shared-hero-dashboard-top span {
    width: 60px;
    height: 5px;
    margin-left: auto;
    border-radius: 999px;
    background: #d6e7f9;
}

.shared-hero-dashboard-grid {
    display: grid;
    grid-template-columns: 1.5fr .85fr;
    grid-template-rows: 142px 90px;
    gap: 12px;
}

.shared-hero-dashboard-grid > div {
    border: 1px solid rgba(91, 145, 208, .24);
    border-radius: 13px;
    background: rgba(249, 252, 255, .9);
    box-shadow: inset 0 1px 0 #fff;
}

.shared-hero-chart {
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 25px 20px 17px;
    background-image: linear-gradient(rgba(66, 121, 192, .08) 1px, transparent 1px) !important;
    background-size: 100% 25% !important;
}

.shared-hero-chart span {
    flex: 1;
    min-width: 8px;
    height: var(--bar);
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(to top, #3273e8, #4fd3f0);
    box-shadow: 0 6px 16px rgba(46, 119, 225, .19);
}

.shared-hero-donut { position: relative; }

.shared-hero-donut::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    content: "";
    background: conic-gradient(#48cce9 0 36%, #3977e8 36% 74%, #dce8f7 74%);
    transform: translate(-50%, -50%);
    mask: radial-gradient(circle, transparent 47%, #000 49%);
}

.shared-hero-line { padding: 12px 14px 8px; }
.shared-hero-line svg { width: 100%; height: 100%; overflow: visible; }

.shared-hero-line path {
    fill: none;
    stroke: #46c7e8;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 4px 5px rgba(48, 139, 216, .2));
}

.shared-hero-line circle { fill: #fff; stroke: #46c7e8; stroke-width: 3; }

.shared-hero-metrics {
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 18px;
}

.shared-hero-metrics i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #43c5e8 62%, #dbe8f7 62%);
}

.shared-hero-metrics i:nth-child(2) { width: 82%; background: linear-gradient(90deg, #567ff0 74%, #dbe8f7 74%); }
.shared-hero-metrics i:nth-child(3) { width: 68%; background: linear-gradient(90deg, #48cdae 48%, #dbe8f7 48%); }

.shared-hero-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(55, 174, 226, .2);
    border-radius: 50%;
}

.shared-hero-orbit-one { top: -80px; right: -40px; width: 390px; height: 390px; }
.shared-hero-orbit-two { right: 80px; bottom: -120px; width: 310px; height: 310px; }

.shared-hero-float {
    position: absolute;
    z-index: 4;
    border: 1px solid #b2d0ee;
    border-radius: 13px;
    background: rgba(251, 253, 255, .96);
    box-shadow: 0 20px 38px rgba(27, 69, 128, .17), inset 0 1px 0 #fff;
    backdrop-filter: blur(12px);
}

.shared-hero-float-one { top: 8px; right: -10px; width: 118px; padding: 15px; }

.shared-hero-float-one span {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    border: 7px solid #43c9eb;
    border-right-color: #dcecf9;
    border-radius: 50%;
}

.shared-hero-float-one i {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: #d9e8f7;
}

.shared-hero-float-one i:nth-of-type(2) { width: 76%; }
.shared-hero-float-one i:nth-of-type(3) { width: 48%; }

.shared-hero-float-two {
    bottom: -8px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 145px;
    padding: 13px;
}

.shared-hero-float-two b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: #064d55;
    background: #5edbc1;
}

.shared-hero-float-two span { width: 70px; height: 6px; border-radius: 999px; background: #d8e8f7; }

@media (max-width: 900px) {
    body:not(.home-page):not(.blog-admin-page) .page-hero { min-height: 0; padding: 72px 0; }
    body:not(.home-page):not(.blog-admin-page) .page-hero > .shared-page-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .shared-page-hero-copy { max-width: 680px; }
    .shared-page-hero-art { width: min(100%, 580px); min-height: 330px; }
}

@media (max-width: 520px) {
    body:not(.home-page):not(.blog-admin-page) .page-hero { padding: 62px 0 54px; }
    body:not(.home-page) .shared-page-hero-copy h1 { font-size: clamp(2.45rem, 13vw, 3.7rem); }
    .shared-page-hero-art { min-height: 260px; }
    .shared-hero-dashboard { inset: 22px 4px 8px 12px; padding: 12px; border-radius: 16px; transform: none; }
    .shared-hero-dashboard-grid { grid-template-rows: 106px 68px; gap: 8px; }
    .shared-hero-chart { gap: 5px; padding: 18px 10px 12px; }
    .shared-hero-float-one { right: -6px; width: 86px; padding: 10px; }
    .shared-hero-float-two { bottom: -5px; left: -4px; width: 110px; padding: 9px; }
    .shared-hero-float-two span { width: 44px; }
}

/* Professional two-column treatment for the GA4 audit introduction. */
.ga4-page #ga4-overview > .container > .info-box:last-child {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: clamp(24px, 3vw, 38px);
    border-radius: 28px;
}

.ga4-page #ga4-overview > .container > .info-box:last-child > p:first-of-type {
    display: flex;
    align-items: center;
    padding: clamp(28px, 3.5vw, 44px);
    border: 1px solid #d7e4f6;
    border-left: 4px solid #2878f0;
    border-radius: 20px;
    background: linear-gradient(145deg, #f4f8ff 0%, #edf4ff 100%);
    box-shadow: 0 12px 30px rgba(34, 80, 145, .08);
    font-size: clamp(1rem, 1.25vw, 1.08rem);
    line-height: 1.72;
    text-align: left;
}

.ga4-page #ga4-overview .ga4-audit-visual {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 340px;
    aspect-ratio: auto;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}

.ga4-page #ga4-overview .ga4-audit-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 19px;
}

.ga4-page #ga4-overview > .container > .info-box:last-child > h3 {
    margin-top: clamp(32px, 4vw, 48px);
}

.ga4-page #ga4-overview > .container > .info-box:last-child > p:nth-of-type(n + 2) {
    text-align: left;
}

@media (max-width: 1024px) {
    .ga4-page #ga4-overview .ga4-audit-visual {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px) {
    .ga4-page #ga4-overview > .container > .info-box:last-child {
        border-radius: 20px;
    }

    .ga4-page #ga4-overview > .container > .info-box:last-child > p:first-of-type {
        padding: 24px 22px;
        border-radius: 16px;
    }

    .ga4-page #ga4-overview .ga4-audit-visual {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }
}

/* Contact panel spacing and responsive safeguards. */
.contact-page .contact-info {
    padding: clamp(28px, 3vw, 40px);
}

.contact-page .contact-info h2 {
    max-width: 520px;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
}

.contact-page .contact-info > p { max-width: 620px; }

.contact-page .contact-details {
    width: 100%;
    margin-top: 28px;
}

.contact-page .detail-email a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contact-page .contact-next-steps {
    width: 100%;
    margin-top: 26px;
}

@media (max-width: 760px) {
    .contact-page .contact-info { padding: 26px; }

    .contact-page .contact-info h2 {
        font-size: clamp(2rem, 8vw, 2.55rem);
        line-height: 1.08;
    }

    .contact-page .contact-next-steps ol {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
    }

    .contact-page .contact-next-steps ol::before {
        top: 14px;
        right: auto;
        bottom: 14px;
        left: 13px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, #93b4f2, #b8a2f2, #83d6bb);
    }

    .contact-page .contact-next-steps li {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 12px;
    }

    .contact-page .contact-next-steps li strong {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .contact-page .contact-next-steps li > span,
    .contact-page .contact-next-steps li small { grid-column: 2; }
}

@media (max-width: 420px) {
    .contact-page .contact-info { padding: 20px; border-radius: 16px; }
    .contact-page .contact-kicker { font-size: .68rem; }
    .contact-page .contact-info h2 { font-size: clamp(1.85rem, 10vw, 2.25rem); }
    .contact-page .detail-item { padding: 14px; }
    .contact-page .contact-next-steps { padding: 18px 16px; }
}

/* About hero: animated people-and-data collaboration graphic. */
.about-collaboration-art {
    position: relative;
    min-height: 350px;
}

.about-collaboration-card {
    position: absolute;
    z-index: 2;
    inset: 18px 8px 8px 24px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #99bee8;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(220,237,255,.95));
    box-shadow: 0 34px 74px rgba(27, 69, 128, .22), inset 0 1px 0 #fff;
    transform: rotateY(-4deg) rotateX(1deg);
}

.about-collaboration-top {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    border-bottom: 1px solid rgba(89, 142, 205, .18);
}

.about-collaboration-top i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cde3f9;
}

.about-collaboration-top span {
    width: 74px;
    height: 5px;
    margin-left: auto;
    border-radius: 999px;
    background: #d5e6f8;
}

.about-collaboration-stage {
    position: relative;
    height: calc(100% - 26px);
    min-height: 270px;
}

.about-collaboration-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.about-collaboration-lines path {
    fill: none;
    stroke: #72aee9;
    stroke-width: 2;
    stroke-dasharray: 7 8;
    vector-effect: non-scaling-stroke;
    animation: aboutDataFlow 4s linear infinite;
}

.about-collaboration-lines path:nth-child(2) { animation-delay: -.8s; }
.about-collaboration-lines path:nth-child(3) { animation-delay: -1.6s; }
.about-collaboration-lines path:nth-child(4) { animation-delay: -2.4s; }

.about-collaboration-core {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: flex;
    width: 116px;
    height: 116px;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    padding: 28px 24px;
    border: 1px solid rgba(70, 137, 218, .38);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #d5eaff);
    box-shadow: 0 18px 40px rgba(35, 88, 154, .2), 0 0 0 13px rgba(84, 166, 229, .08);
    transform: translate(-50%, -50%);
    animation: aboutCorePulse 3.2s ease-in-out infinite;
}

.about-collaboration-core span {
    width: 11px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #45d0ea, #2f73e5);
    transform-origin: bottom;
    animation: aboutBarRise 2.4s ease-in-out infinite alternate;
}

.about-collaboration-core span:nth-child(1) { height: 28%; animation-delay: -.3s; }
.about-collaboration-core span:nth-child(2) { height: 55%; animation-delay: -.8s; }
.about-collaboration-core span:nth-child(3) { height: 40%; animation-delay: -1.2s; }
.about-collaboration-core span:nth-child(4) { height: 76%; animation-delay: -1.7s; }

.about-person-node {
    position: absolute;
    z-index: 4;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 1px solid #b9d4ef;
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 28px rgba(32, 77, 137, .15);
    animation: aboutNodeFloat 4.6s ease-in-out infinite;
}

.about-person-node i {
    position: absolute;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3479e8;
}

.about-person-node b {
    position: absolute;
    bottom: 13px;
    width: 34px;
    height: 20px;
    border-radius: 18px 18px 8px 8px;
    background: #75a9ef;
}

.about-person-one { top: 23px; left: 26px; }
.about-person-two { top: 21px; right: 24px; animation-delay: -1.1s; }
.about-person-three { bottom: 20px; left: 34px; animation-delay: -2.2s; }
.about-person-four { right: 31px; bottom: 18px; animation-delay: -3.3s; }
.about-person-two i, .about-person-two b { background: #3bc7de; }
.about-person-three i, .about-person-three b { background: #5c7bea; }
.about-person-four i, .about-person-four b { background: #42c7a7; }

.about-collaboration-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(48, 164, 221, .2);
    border-radius: 50%;
    animation: aboutOrbitDrift 8s ease-in-out infinite;
}

.about-collaboration-orbit-one { top: -78px; right: -35px; width: 365px; height: 365px; }
.about-collaboration-orbit-two { right: 95px; bottom: -110px; width: 280px; height: 280px; animation-delay: -4s; }

.about-collaboration-signal {
    position: absolute;
    z-index: 5;
    border: 1px solid #afd0ee;
    border-radius: 14px;
    background: rgba(252,254,255,.97);
    box-shadow: 0 18px 36px rgba(28, 72, 131, .17);
    backdrop-filter: blur(10px);
    animation: aboutSignalFloat 4s ease-in-out infinite;
}

.about-collaboration-signal-one {
    top: 0;
    right: -8px;
    display: grid;
    width: 110px;
    gap: 7px;
    padding: 14px;
}

.about-collaboration-signal-one i {
    width: 30px;
    height: 30px;
    margin-bottom: 3px;
    border: 7px solid #45cae8;
    border-right-color: #dcecf8;
    border-radius: 50%;
}

.about-collaboration-signal-one span { width: 100%; height: 5px; border-radius: 99px; background: #d8e8f7; }
.about-collaboration-signal-one span:last-child { width: 64%; }

.about-collaboration-signal-two {
    bottom: -8px;
    left: 0;
    display: flex;
    width: 142px;
    align-items: center;
    gap: 12px;
    padding: 13px;
    animation-delay: -2s;
}

.about-collaboration-signal-two b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: #075f58;
    background: #61dcc1;
}

.about-collaboration-signal-two span { width: 72px; height: 6px; border-radius: 99px; background: #d7e8f7; }

@keyframes aboutDataFlow { to { stroke-dashoffset: -30; } }
@keyframes aboutCorePulse { 50% { box-shadow: 0 22px 46px rgba(35, 88, 154, .24), 0 0 0 19px rgba(84, 166, 229, .055); } }
@keyframes aboutBarRise { 50% { transform: scaleY(.68); } }
@keyframes aboutNodeFloat { 50% { transform: translateY(-7px); } }
@keyframes aboutOrbitDrift { 50% { transform: translate3d(-8px, 6px, 0) scale(1.025); } }
@keyframes aboutSignalFloat { 50% { transform: translateY(-6px); } }

@media (max-width: 520px) {
    .about-collaboration-card { inset: 20px 3px 8px 10px; padding: 12px; border-radius: 18px; transform: none; }
    .about-collaboration-stage { min-height: 205px; }
    .about-collaboration-core { width: 88px; height: 88px; padding: 22px 18px; }
    .about-person-node { width: 52px; height: 52px; border-radius: 15px; }
    .about-person-node i { top: 10px; width: 14px; height: 14px; }
    .about-person-node b { bottom: 9px; width: 27px; height: 16px; }
    .about-collaboration-signal-one { right: -5px; width: 82px; padding: 10px; }
    .about-collaboration-signal-two { left: -4px; width: 108px; padding: 9px; }
    .about-collaboration-signal-two span { width: 45px; }
}

@media (prefers-reduced-motion: reduce) {
    .about-collaboration-lines path,
    .about-collaboration-core,
    .about-collaboration-core span,
    .about-person-node,
    .about-collaboration-orbit,
    .about-collaboration-signal { animation: none; }
}

/* Services directory hero: animated connected service hub. */
.services-hub-art { position: relative; min-height: 350px; }

.services-hub-card {
    position: absolute;
    z-index: 2;
    inset: 18px 8px 8px 24px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #99bee8;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(219,236,255,.95));
    box-shadow: 0 34px 74px rgba(27, 69, 128, .22), inset 0 1px 0 #fff;
    transform: rotateY(-4deg) rotateX(1deg);
}

.services-hub-top {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    border-bottom: 1px solid rgba(89, 142, 205, .18);
}

.services-hub-top i { width: 7px; height: 7px; border-radius: 50%; background: #cde3f9; }
.services-hub-top span { width: 74px; height: 5px; margin-left: auto; border-radius: 999px; background: #d5e6f8; }

.services-hub-stage {
    position: relative;
    height: calc(100% - 26px);
    min-height: 270px;
}

.services-hub-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.services-hub-lines path {
    fill: none;
    stroke: #70aae7;
    stroke-width: 2;
    stroke-dasharray: 6 8;
    vector-effect: non-scaling-stroke;
    animation: aboutDataFlow 4s linear infinite;
}

.services-hub-lines path:nth-child(2) { animation-delay: -1s; }
.services-hub-lines path:nth-child(3) { animation-delay: -2s; }
.services-hub-lines path:nth-child(4) { animation-delay: -3s; }

.services-hub-core {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 118px;
    height: 118px;
    border: 1px solid rgba(63, 132, 215, .38);
    border-radius: 30px;
    background: linear-gradient(145deg, #fff, #cfe6ff);
    box-shadow: 0 20px 42px rgba(31, 82, 150, .22), 0 0 0 14px rgba(80, 161, 229, .07);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: servicesCorePulse 3.2s ease-in-out infinite;
}

.services-hub-core i,
.services-hub-core b,
.services-hub-core span {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    transform: rotate(-45deg);
}

.services-hub-core i { top: 19px; left: 19px; background: linear-gradient(145deg, #3178e8, #55cff0); }
.services-hub-core b { right: 19px; bottom: 19px; background: linear-gradient(145deg, #5b75e9, #36b9e2); }
.services-hub-core span { top: 19px; right: 19px; background: linear-gradient(145deg, #45cdb0, #25a9c7); }

.services-hub-node {
    position: absolute;
    z-index: 4;
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border: 1px solid #b7d2ee;
    border-radius: 20px;
    color: #2e73df;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 30px rgba(31, 76, 136, .16);
    animation: aboutNodeFloat 4.5s ease-in-out infinite;
}

.services-hub-node svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-hub-analytics { top: 20px; left: 24px; }
.services-hub-tag { top: 20px; right: 22px; color: #3a9cda; animation-delay: -1.1s; }
.services-hub-growth { bottom: 18px; left: 30px; color: #586fe2; animation-delay: -2.2s; }
.services-hub-commerce { right: 28px; bottom: 18px; color: #2daf91; animation-delay: -3.3s; }

.services-hub-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(48, 164, 221, .2);
    border-radius: 50%;
    animation: aboutOrbitDrift 8s ease-in-out infinite;
}

.services-hub-orbit-one { top: -75px; right: -35px; width: 365px; height: 365px; }
.services-hub-orbit-two { right: 92px; bottom: -112px; width: 282px; height: 282px; animation-delay: -4s; }

.services-hub-float {
    position: absolute;
    z-index: 5;
    border: 1px solid #afd0ee;
    border-radius: 14px;
    background: rgba(252,254,255,.97);
    box-shadow: 0 18px 36px rgba(28, 72, 131, .17);
    animation: aboutSignalFloat 4s ease-in-out infinite;
}

.services-hub-float-one { top: 0; right: -8px; display: grid; width: 110px; gap: 7px; padding: 14px; }
.services-hub-float-one i { width: 30px; height: 30px; margin-bottom: 3px; border: 7px solid #45cae8; border-right-color: #dcecf8; border-radius: 50%; }
.services-hub-float-one span { width: 100%; height: 5px; border-radius: 99px; background: #d8e8f7; }
.services-hub-float-one span:last-child { width: 64%; }

.services-hub-float-two { bottom: -8px; left: 0; display: flex; width: 142px; align-items: center; gap: 12px; padding: 13px; animation-delay: -2s; }
.services-hub-float-two b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #075f58; background: #61dcc1; }
.services-hub-float-two span { width: 72px; height: 6px; border-radius: 99px; background: #d7e8f7; }

@keyframes servicesCorePulse {
    50% { box-shadow: 0 24px 48px rgba(31, 82, 150, .26), 0 0 0 21px rgba(80, 161, 229, .045); transform: translate(-50%, -50%) rotate(52deg); }
}

@media (max-width: 520px) {
    .services-hub-card { inset: 20px 3px 8px 10px; padding: 12px; border-radius: 18px; transform: none; }
    .services-hub-stage { min-height: 205px; }
    .services-hub-core { width: 88px; height: 88px; border-radius: 24px; }
    .services-hub-core i, .services-hub-core b, .services-hub-core span { width: 21px; height: 21px; border-radius: 7px; }
    .services-hub-core i { top: 14px; left: 14px; }
    .services-hub-core b { right: 14px; bottom: 14px; }
    .services-hub-core span { top: 14px; right: 14px; }
    .services-hub-node { width: 52px; height: 52px; border-radius: 15px; }
    .services-hub-node svg { width: 25px; height: 25px; }
    .services-hub-float-one { right: -5px; width: 82px; padding: 10px; }
    .services-hub-float-two { left: -4px; width: 108px; padding: 9px; }
    .services-hub-float-two span { width: 45px; }
}

@media (prefers-reduced-motion: reduce) {
    .services-hub-lines path,
    .services-hub-core,
    .services-hub-node,
    .services-hub-orbit,
    .services-hub-float { animation: none; }
}

/* Contact hero: animated message-to-response workflow. */
.contact-flow-art { position: relative; min-height: 350px; }

.contact-flow-card {
    position: absolute;
    z-index: 2;
    inset: 18px 8px 8px 24px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #99bee8;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(219,236,255,.95));
    box-shadow: 0 34px 74px rgba(27, 69, 128, .22), inset 0 1px 0 #fff;
    transform: rotateY(-4deg) rotateX(1deg);
}

.contact-flow-top {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    border-bottom: 1px solid rgba(89, 142, 205, .18);
}

.contact-flow-top i { width: 7px; height: 7px; border-radius: 50%; background: #cde3f9; }
.contact-flow-top span { width: 74px; height: 5px; margin-left: auto; border-radius: 999px; background: #d5e6f8; }

.contact-flow-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, .9fr);
    align-items: center;
    gap: 12px;
    height: calc(100% - 26px);
    min-height: 270px;
    padding: 18px 5px 3px;
}

.contact-flow-form,
.contact-flow-response {
    position: relative;
    min-width: 0;
    height: 220px;
    padding: 20px;
    border: 1px solid #bfd8f1;
    border-radius: 18px;
    background: rgba(252,254,255,.94);
    box-shadow: inset 0 1px 0 #fff, 0 12px 25px rgba(36, 80, 138, .08);
}

.contact-flow-form > span {
    display: block;
    height: 9px;
    margin-top: 14px;
    border-radius: 999px;
    background: #dce9f7;
}

.contact-flow-form > span:nth-of-type(1) { width: 82%; }
.contact-flow-form > span:nth-of-type(2) { width: 100%; }
.contact-flow-form > span:nth-of-type(3) { width: 68%; }

.contact-flow-form > b {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    width: 52px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #2d75e5, #44c8e7);
    box-shadow: 0 9px 18px rgba(45,117,229,.2);
    animation: contactSendPulse 2.5s ease-in-out infinite;
}

.contact-flow-form > b i {
    width: 13px;
    height: 13px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translate(-2px, 2px);
}

.contact-flow-envelope {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #e3f1ff, #cce5ff);
    animation: contactEnvelopeFloat 3.6s ease-in-out infinite;
}

.contact-flow-envelope i {
    position: relative;
    width: 27px;
    height: 19px;
    border: 2px solid #3478e6;
    border-radius: 4px;
}

.contact-flow-envelope i::after {
    position: absolute;
    top: 1px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-right: 2px solid #3478e6;
    border-bottom: 2px solid #3478e6;
    content: "";
    transform: rotate(45deg) translate(-5px, 5px);
}

.contact-flow-transfer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-flow-transfer i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4aa9e8;
    box-shadow: 0 0 0 5px rgba(74,169,232,.1);
    animation: contactDataTravel 1.8s ease-in-out infinite;
}

.contact-flow-transfer i:nth-child(2) { animation-delay: -.45s; }
.contact-flow-transfer i:nth-child(3) { animation-delay: -.9s; }
.contact-flow-transfer i:nth-child(4) { animation-delay: -1.35s; }

.contact-flow-chat {
    position: relative;
    padding: 16px 15px;
    border-radius: 15px 15px 15px 5px;
    background: linear-gradient(145deg, #dff1ff, #cde7ff);
}

.contact-flow-chat i {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: 11px;
    border: 7px solid #42c9e7;
    border-right-color: #e4effa;
    border-radius: 50%;
    animation: contactRingTurn 4s linear infinite;
}

.contact-flow-chat span { display: block; width: 92%; height: 7px; margin-top: 7px; border-radius: 99px; background: rgba(68,119,183,.17); }
.contact-flow-chat span:last-child { width: 62%; }

.contact-flow-response ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.contact-flow-response li { display: flex; align-items: center; gap: 9px; }
.contact-flow-response li b { width: 9px; height: 9px; border: 2px solid #42c7a7; border-radius: 50%; animation: contactStatusPulse 2.2s ease-in-out infinite; }
.contact-flow-response li:nth-child(2) b { border-color: #4783e8; animation-delay: -.7s; }
.contact-flow-response li:nth-child(3) b { border-color: #47bedd; animation-delay: -1.4s; }
.contact-flow-response li span { width: 72%; height: 6px; border-radius: 99px; background: #dae8f6; }

.contact-flow-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(48,164,221,.2);
    border-radius: 50%;
    animation: aboutOrbitDrift 8s ease-in-out infinite;
}

.contact-flow-orbit-one { top: -75px; right: -35px; width: 365px; height: 365px; }
.contact-flow-orbit-two { right: 92px; bottom: -112px; width: 282px; height: 282px; animation-delay: -4s; }

.contact-flow-float {
    position: absolute;
    z-index: 5;
    border: 1px solid #afd0ee;
    border-radius: 14px;
    background: rgba(252,254,255,.97);
    box-shadow: 0 18px 36px rgba(28,72,131,.17);
    animation: aboutSignalFloat 4s ease-in-out infinite;
}

.contact-flow-float-one { top: 0; right: -8px; display: grid; width: 110px; gap: 7px; padding: 14px; }
.contact-flow-float-one i { width: 30px; height: 30px; margin-bottom: 3px; border: 6px solid #45cae8; border-top-color: #dcecf8; border-radius: 50%; }
.contact-flow-float-one span { width: 100%; height: 5px; border-radius: 99px; background: #d8e8f7; }
.contact-flow-float-one span:last-child { width: 64%; }
.contact-flow-float-two { bottom: -8px; left: 0; display: flex; width: 142px; align-items: center; gap: 12px; padding: 13px; animation-delay: -2s; }
.contact-flow-float-two b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #075f58; background: #61dcc1; }
.contact-flow-float-two span { width: 72px; height: 6px; border-radius: 99px; background: #d7e8f7; }

@keyframes contactEnvelopeFloat { 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes contactSendPulse { 50% { transform: translateX(4px); box-shadow: 0 12px 24px rgba(45,117,229,.3); } }
@keyframes contactDataTravel { 50% { transform: scale(1.55); background: #3dd0d9; } }
@keyframes contactRingTurn { to { transform: rotate(360deg); } }
@keyframes contactStatusPulse { 50% { box-shadow: 0 0 0 5px rgba(66,199,167,.12); } }

/* GTM service hero: page-specific animated symbol, leaving other heroes unchanged. */
.gtm-symbol-art {
    position: relative;
    display: grid;
    min-height: 410px;
    place-items: center;
    isolation: isolate;
}

.gtm-symbol-orbit {
    position: absolute;
    width: 370px;
    height: 370px;
    border: 1px solid rgba(41, 139, 235, .24);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 171, 246, .16), rgba(91, 171, 246, 0) 68%);
    animation: gtmOrbitPulse 5.5s ease-in-out infinite;
}

.gtm-symbol-logo {
    position: relative;
    z-index: 2;
    width: min(72%, 310px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 28px 30px rgba(34, 104, 202, .19));
    animation: gtmLogoFloat 4.6s ease-in-out infinite;
}

.gtm-symbol-float {
    position: absolute;
    z-index: 3;
    border: 1px solid #b9d4ef;
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 18px 38px rgba(29, 78, 139, .14);
    animation: gtmCardFloat 4s ease-in-out infinite;
}

.gtm-symbol-float-one {
    top: 30px;
    right: 2px;
    display: grid;
    width: 116px;
    gap: 7px;
    padding: 16px;
}

.gtm-symbol-float-one i {
    width: 31px;
    height: 31px;
    margin-bottom: 4px;
    border: 7px solid #40c8e8;
    border-right-color: #dcecf8;
    border-radius: 50%;
}

.gtm-symbol-float-one span,
.gtm-symbol-float-two span {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: #d8e7f7;
}

.gtm-symbol-float-one span:last-child { width: 66%; }

.gtm-symbol-float-two {
    bottom: 24px;
    left: 0;
    display: flex;
    width: 142px;
    align-items: center;
    gap: 12px;
    padding: 13px;
    animation-delay: -2s;
}

.gtm-symbol-float-two b {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 9px;
    color: #075f58;
    background: #61dcc1;
}

.gtm-symbol-float-two span { width: 70px; }

@keyframes gtmLogoFloat {
    50% { transform: translateY(-9px) rotate(1deg); }
}

@keyframes gtmOrbitPulse {
    50% { transform: scale(1.035); opacity: .76; }
}

@keyframes gtmCardFloat {
    50% { transform: translateY(-7px); }
}

/* Product-specific service hero graphics. */
:is(.ga4-symbol-art, .ads-symbol-art, .conversion-symbol-art, .audit-symbol-art, .enhanced-symbol-art, .commerce-symbol-art) {
    position: relative;
    display: grid;
    min-height: 410px;
    place-items: center;
    isolation: isolate;
}

.product-symbol-orbit {
    position: absolute;
    z-index: 0;
    width: 370px;
    height: 370px;
    border: 1px solid rgba(45, 151, 235, .24);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88,174,246,.14), transparent 68%);
    animation: gtmOrbitPulse 5.5s ease-in-out infinite;
}

.product-symbol-orbit-dashed { border-style: dashed; border-width: 2px; }

.product-symbol-card,
.commerce-float,
.enhanced-badge,
.conversion-badge {
    position: absolute;
    z-index: 5;
    border: 1px solid #b8d3ee;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 38px rgba(29,78,139,.14);
    animation: gtmCardFloat 4s ease-in-out infinite;
}

.product-symbol-card-top {
    top: 24px;
    right: 0;
    display: grid;
    width: 116px;
    gap: 7px;
    padding: 16px;
}

.product-symbol-card-top i {
    width: 31px;
    height: 31px;
    margin-bottom: 4px;
    border: 7px solid #40c8e8;
    border-right-color: #dcecf8;
    border-radius: 50%;
}

.product-symbol-card span,
.commerce-float span,
.enhanced-badge span {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: #d8e7f7;
}

.product-symbol-card-top span:last-child { width: 66%; }

.product-symbol-card-check {
    bottom: 22px;
    left: 0;
    display: flex;
    width: 142px;
    align-items: center;
    gap: 12px;
    padding: 13px;
    animation-delay: -2s;
}

.product-symbol-card-check b,
.commerce-cart b,
.commerce-purchase b {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 9px;
    color: #075f58;
    background: #61dcc1;
}

.product-symbol-card-check span { width: 70px; }

.ga4-symbol-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: min(62%, 260px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 26px 25px rgba(232,130,0,.16));
    animation: gtmLogoFloat 4.6s ease-in-out infinite;
}

.ads-symbol-logo {
    position: relative;
    z-index: 2;
    width: min(58%, 250px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 27px 28px rgba(36,103,198,.16));
    animation: gtmLogoFloat 4.6s ease-in-out infinite;
}

.enhanced-dashboard,
.audit-dashboard,
.commerce-store {
    position: relative;
    z-index: 2;
    width: 410px;
    height: 260px;
    padding: 18px;
    border: 1px solid #a9caec;
    border-radius: 24px;
    background: rgba(250,253,255,.93);
    box-shadow: 0 30px 58px rgba(36,85,148,.17);
    transform: perspective(900px) rotateY(-4deg) rotateX(1deg);
}

.enhanced-dashboard-top,
.audit-dashboard-top,
.commerce-store-top {
    display: flex;
    gap: 7px;
    height: 24px;
    border-bottom: 1px solid #dce9f6;
}

:is(.enhanced-dashboard-top, .audit-dashboard-top, .commerce-store-top) i { width: 7px; height: 7px; border-radius: 50%; background: #d0e3f6; }

.enhanced-chart,
.audit-bars {
    position: absolute;
    top: 55px;
    left: 22px;
    display: flex;
    width: 235px;
    height: 102px;
    align-items: flex-end;
    justify-content: space-around;
    padding: 15px 12px 10px;
    border: 1px solid #cfe1f3;
    border-radius: 14px;
    background: #f9fcff;
}

:is(.enhanced-chart, .audit-bars) i { width: 24px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg,#48cce8,#3678eb); }
:is(.enhanced-chart, .audit-bars) i:nth-child(1) { height: 42%; }
:is(.enhanced-chart, .audit-bars) i:nth-child(2) { height: 68%; }
:is(.enhanced-chart, .audit-bars) i:nth-child(3) { height: 51%; }
:is(.enhanced-chart, .audit-bars) i:nth-child(4) { height: 82%; }
:is(.enhanced-chart, .audit-bars) i:nth-child(5) { height: 70%; }
:is(.enhanced-chart, .audit-bars) i:nth-child(6) { height: 95%; }

.enhanced-donut,
.audit-donut {
    position: absolute;
    top: 55px;
    right: 22px;
    width: 103px;
    height: 103px;
    border: 18px solid #dce9f8;
    border-top-color: #3bc7df;
    border-right-color: #3a80e9;
    border-radius: 50%;
}

.enhanced-line,
.audit-line {
    position: absolute;
    right: 22px;
    bottom: 20px;
    left: 22px;
    height: 64px;
    border: 1px solid #d5e5f4;
    border-radius: 13px;
    background: #f9fcff;
}

:is(.enhanced-line, .audit-line) svg { width: 100%; height: 100%; }
:is(.enhanced-line, .audit-line) path { fill: none; stroke: #35bfe4; stroke-width: 4; }

.enhanced-badge {
    top: 82px;
    left: -12px;
    display: grid;
    width: 120px;
    padding: 14px;
    gap: 7px;
    color: #17345f;
    font-size: 13px;
    line-height: 1.05;
}

.ads-mini-icon { display: block; width: 48px; height: 48px; margin: 0 auto 4px; object-fit: contain; }

.conversion-dashboard { width: 420px; }

.conversion-badge {
    display: grid;
    place-items: center;
    gap: 8px;
    color: #244160;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
}

.conversion-badge-ads { top: 110px; left: -20px; width: 104px; padding: 13px; }
.conversion-badge-track { top: 16px; right: -12px; grid-template-columns: 34px 1fr; width: 145px; padding: 12px; text-align: left; }
.conversion-badge-track b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #075f58; background: #61dcc1; }

.conversion-channel { position: absolute; z-index: 4; right: -9px; width: 54px; height: 54px; border: 1px solid #cae0f4; border-radius: 50%; background: #fff; box-shadow: 0 12px 24px rgba(30,76,136,.12); }
.conversion-channel-one { top: 150px; }
.conversion-channel-two { top: 217px; }
.conversion-channel-three { top: 284px; }

.audit-checks {
    position: absolute;
    z-index: 3;
    top: 72px;
    left: -28px;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #bed7ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(32,77,136,.13);
}

.audit-checks span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #075f58; background: #61dcc1; }
.audit-bars { left: 70px; width: 205px; }

.audit-magnifier {
    position: absolute;
    z-index: 4;
    bottom: 4px;
    left: 58px;
    width: 118px;
    height: 118px;
    border: 15px solid #3379e9;
    border-radius: 50%;
    background: rgba(207,242,255,.8);
    box-shadow: 0 15px 28px rgba(35,94,187,.2);
}

.audit-magnifier::after { position: absolute; right: -35px; bottom: -24px; width: 56px; height: 15px; border-radius: 99px; content: ""; background: #2864c7; transform: rotate(45deg); }
.audit-magnifier i, .audit-magnifier span { position: absolute; bottom: 23px; width: 13px; border-radius: 4px 4px 0 0; background: #3a83ec; }
.audit-magnifier i { left: 24px; height: 30px; }
.audit-magnifier span:nth-child(2) { left: 45px; height: 48px; }
.audit-magnifier span:nth-child(3) { left: 66px; height: 65px; }

.commerce-store { width: 410px; height: 245px; }
.commerce-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 28px 12px 0; }
.commerce-products > div { display: grid; height: 165px; place-items: center; padding: 15px 10px; border-radius: 14px; background: linear-gradient(180deg,#eef7ff,#fff); }
.commerce-products span { justify-self: start; width: 78%; height: 7px; border-radius: 99px; background: #d9e8f7; }
.commerce-products span:last-child { width: 55%; }
.commerce-products b { position: relative; display: block; width: 68px; height: 72px; background: linear-gradient(145deg,#6bb6fa,#2e78ed); }
.commerce-shirt { clip-path: polygon(20% 12%,38% 0,62% 0,80% 12%,100% 28%,82% 48%,72% 38%,72% 100%,28% 100%,28% 38%,18% 48%,0 28%); }
.commerce-shoe { height: 43px !important; border-radius: 55% 12% 20% 25%; transform: skewX(-16deg); }
.commerce-bag { width: 55px !important; height: 62px !important; border-radius: 5px; }
.commerce-bag::before { position: absolute; top: -17px; left: 12px; width: 27px; height: 24px; border: 5px solid #5da7f5; border-bottom: 0; border-radius: 18px 18px 0 0; content: ""; }

.commerce-float { display: grid; gap: 7px; padding: 14px; color: #19365f; font-size: 12px; }
.commerce-revenue { bottom: 18px; left: 0; width: 112px; grid-template-columns: repeat(4,1fr); align-items: end; }
.commerce-revenue i { display: block; height: 20px; border-radius: 4px 4px 0 0; background: #4388ef; }
.commerce-revenue i:nth-child(2) { height: 28px; }.commerce-revenue i:nth-child(3) { height: 39px; }.commerce-revenue i:nth-child(4) { height: 52px; }
.commerce-revenue strong,.commerce-revenue span { grid-column: 1/-1; }
.commerce-purchase { top: 10px; right: -6px; width: 130px; grid-template-columns: 36px 1fr; align-items: center; }
.commerce-purchase span { grid-column: 1/-1; }
.commerce-cart { right: 0; bottom: 2px; width: 160px; grid-template-columns: 36px 1fr; align-items: center; }

@media (prefers-reduced-motion: reduce) {
    .product-symbol-orbit,
    .product-symbol-card,
    .ga4-symbol-logo,
    .ads-symbol-logo,
    .commerce-float,
    .enhanced-badge,
    .conversion-badge { animation: none; }
}

/* Service detail heroes use the page width efficiently on desktop. */
@media (min-width: 1025px) {
    body.ga4-page .page-hero > .shared-page-hero-inner {
        width: min(calc(100% - 96px), 1720px);
        max-width: 1720px;
        grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
        gap: clamp(44px, 5vw, 88px);
    }

    body.ga4-page .shared-page-hero-copy {
        padding-left: 0;
    }

    body.google-ads-page .shared-page-hero-copy h1 {
        justify-items: start;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gtm-symbol-orbit,
    .gtm-symbol-logo,
    .gtm-symbol-float { animation: none; }
}

@media (max-width: 520px) {
    .contact-flow-card { inset: 20px 3px 8px 10px; padding: 12px; border-radius: 18px; transform: none; }
    .contact-flow-stage { grid-template-columns: 1fr 34px .9fr; gap: 6px; min-height: 205px; padding: 10px 2px 0; }
    .contact-flow-form, .contact-flow-response { height: 180px; padding: 12px; border-radius: 14px; }
    .contact-flow-envelope { width: 42px; height: 42px; }
    .contact-flow-form > b { right: 11px; bottom: 11px; }
    .contact-flow-float-one { right: -5px; width: 82px; padding: 10px; }
    .contact-flow-float-two { left: -4px; width: 108px; padding: 9px; }
    .contact-flow-float-two span { width: 45px; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-flow-envelope,
    .contact-flow-form > b,
    .contact-flow-transfer i,
    .contact-flow-chat i,
    .contact-flow-response li b,
    .contact-flow-orbit,
    .contact-flow-float { animation: none; }
}

/* Mobile heroes: prioritize centered content and remove decorative graphics. */
@media (max-width: 680px) {
    body:not(.home-page):not(.blog-admin-page) .page-hero {
        min-height: 0;
        padding: 62px 0 66px;
    }

    body:not(.home-page):not(.blog-admin-page) .page-hero > .shared-page-hero-inner {
        display: block;
        width: min(calc(100% - 36px), 560px);
    }

    .shared-page-hero-art { display: none; }

    .shared-page-hero-copy {
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .shared-page-hero-copy::before {
        left: 50%;
        transform: translateX(-48px);
    }

    body:not(.home-page) .shared-page-hero-copy h1 {
        max-width: none;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    body:not(.home-page) .shared-page-hero-copy p {
        max-width: 34ch;
        margin-right: auto;
        margin-left: auto;
        padding-left: 0;
        border-left: 0;
        text-align: center;
    }

    body:not(.home-page) .shared-page-hero-copy [class*="hero-label"] {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet layout audit: shared breathing room and predictable single-column heroes. */
@media (min-width: 681px) and (max-width: 1024px) {
    html,
    body { overflow-x: clip; }

    body:not(.blog-admin-page) .container {
        width: min(calc(100% - 64px), 1120px);
    }

    body:not(.blog-admin-page) :is(img, svg, video, iframe) {
        max-width: 100%;
    }

    body:not(.blog-admin-page) :is(.grid, .split, .hero-grid, .blog-article-layout) > * {
        min-width: 0;
    }

    body:not(.blog-admin-page) :is(a, p, h1, h2, h3, h4) {
        overflow-wrap: break-word;
    }

    body:not(.blog-admin-page) .section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    body:not(.home-page):not(.blog-admin-page) .page-hero {
        min-height: 0;
        padding: 70px 0;
    }

    body:not(.home-page):not(.blog-admin-page) .page-hero > .shared-page-hero-inner {
        display: block;
        width: min(calc(100% - 64px), 760px);
    }

    .shared-page-hero-copy {
        width: 100%;
        max-width: 680px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .shared-page-hero-copy::before {
        left: 50%;
        transform: translateX(-48px);
    }

    body:not(.home-page) .shared-page-hero-copy h1 {
        max-width: none;
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(3.25rem, 8vw, 4.75rem);
        line-height: .96;
        text-align: center;
    }

    body:not(.home-page) .shared-page-hero-copy p {
        max-width: 38ch;
        margin-right: auto;
        margin-left: auto;
        padding-left: 0;
        border-left: 0;
        text-align: center;
    }

    body:not(.home-page) .shared-page-hero-copy [class*="hero-label"] {
        width: 100%;
        justify-content: center;
    }

    .shared-page-hero-art {
        display: none;
    }

    .home-page .hero {
        min-height: 0;
        padding: 68px 0 64px;
    }

    .home-page .hero-grid {
        display: block;
    }

    .home-page .home-hero-copy {
        width: 100%;
        max-width: 760px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .home-page .home-hero-copy > p {
        margin-right: auto;
        margin-left: auto;
    }

    .home-page :is(.home-hero-actions, .home-hero-proof) {
        justify-content: center;
    }

    .home-page .home-live-dashboard {
        display: none;
    }

    .home-page .home-core-services-grid {
        width: 100%;
        gap: 20px;
    }

    .home-page .home-tracking-problems .split {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    :is(.services-category-grid, .process-steps, .gtm-process-steps) {
        gap: 20px;
    }

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

    .service-category-card,
    .service-category-card:nth-child(7),
    .service-category-card:nth-child(8) {
        grid-column: auto;
        width: 100%;
        min-height: 0;
    }

    .process-steps,
    .gtm-process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-steps .step-card,
    .gtm-process-steps .step-card,
    .gtm-process-steps .step-card:nth-child(n) {
        grid-column: auto;
        min-width: 0;
    }

    .process-steps .step-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 10px);
        justify-self: center;
    }

    .blog-listing-hero {
        padding: 66px 0;
    }

    .blog-listing-hero-inner {
        display: block;
    }

    .blog-listing-hero-copy {
        width: 100%;
        max-width: 680px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .blog-listing-hero-copy::before {
        left: 50%;
        transform: translateX(-48px);
    }

    .blog-listing-eyebrow {
        justify-content: center;
    }

    .blog-listing-hero-copy p {
        max-width: 38ch;
        margin-right: auto;
        margin-left: auto;
    }

    .blog-listing-hero-art {
        display: none;
    }

    .blog-article-hero {
        padding: 64px 0 72px;
        text-align: center;
    }

    .blog-article-hero .container {
        width: min(calc(100% - 64px), 820px);
    }

    .blog-breadcrumbs,
    .blog-article-byline {
        justify-content: center;
    }

    .blog-article-hero h1 {
        max-width: 820px;
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(2.35rem, 6vw, 3.7rem);
    }

    .blog-listing-header {
        align-items: flex-end;
        gap: 24px;
    }

    .blog-list-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .blog-list-card-media {
        min-height: 300px;
    }

    .blog-list-card-content {
        padding: 32px;
    }

    .blog-article-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .blog-article-content {
        width: 100%;
        max-width: none;
    }

    .blog-inline-figure {
        max-width: 880px;
        margin: 36px auto;
    }

    .contact-page .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    body:not(.blog-admin-page) :is(.card, .info-box, .process-box, .contact-info, .contact-form-card) {
        max-width: 100%;
    }

    body:not(.blog-admin-page) :is(input, select, textarea) {
        width: 100%;
        max-width: 100%;
    }
}

/* Light branded footer: reference-inspired styling for the existing content. */
body:not(.blog-admin-page) .footer {
    isolation: isolate;
    padding: clamp(54px, 7vw, 86px) 0 clamp(38px, 5vw, 58px);
    border-top: 1px solid #c8dcf4;
    background:
        radial-gradient(circle at 92% 10%, rgba(82, 154, 245, .2), transparent 30%),
        linear-gradient(145deg, #fbfdff 0%, #edf5ff 55%, #dcecff 100%);
    box-shadow: 0 -12px 38px rgba(44, 83, 138, .06);
}

body:not(.blog-admin-page) .footer::before,
body:not(.blog-admin-page) .footer::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

body:not(.blog-admin-page) .footer::before {
    top: auto;
    right: -12%;
    bottom: -54%;
    width: 70%;
    height: 88%;
    border-radius: 50% 50% 0 0;
    background: rgba(128, 183, 250, .16);
    transform: rotate(-8deg);
}

body:not(.blog-admin-page) .footer::after {
    bottom: -66%;
    left: -10%;
    width: 76%;
    height: 92%;
    border-radius: 50% 50% 0 0;
    background: rgba(177, 211, 252, .25);
    transform: rotate(7deg);
}

body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom) {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 1.45fr) repeat(3, minmax(160px, 1fr));
    gap: clamp(16px, 2vw, 26px);
    width: min(calc(100% - 48px), 1180px);
    align-items: stretch;
    margin-inline: auto;
    padding: 0;
    text-align: left;
}

body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom)::before {
    content: "";
    display: block;
    min-height: 86px;
    align-self: center;
    background: url('/images/brand/analyticroute-logo-horizontal.png') left center / min(100%, 330px) auto no-repeat;
}

body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom) > p {
    display: flex;
    min-width: 0;
    min-height: 86px;
    align-items: center;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid rgba(174, 205, 239, .92);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    color: #405a7c;
    box-shadow: 0 14px 34px rgba(58, 105, 166, .08), inset 0 1px 0 #fff;
    font-size: clamp(.85rem, 1vw, .94rem);
    line-height: 1.55;
    overflow-wrap: anywhere;
    backdrop-filter: blur(10px);
}

body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom) > p strong {
    color: #102c59;
}

body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom) > p a {
    color: #155fc8;
    font-weight: 750;
    text-decoration: none;
}

body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom) > p a:hover {
    color: #0876e8;
}

body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom):not(:has(> p:nth-of-type(3))) {
    grid-template-columns: minmax(300px, 1.45fr) repeat(2, minmax(190px, 1fr));
}

@media (max-width: 900px) {
    body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom),
    body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom):not(:has(> p:nth-of-type(3))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom)::before {
        grid-column: 1 / -1;
        background-position: center;
        background-size: min(100%, 310px) auto;
    }
}

@media (max-width: 600px) {
    body:not(.blog-admin-page) .footer {
        padding: 42px 0 32px;
    }

    body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom),
    body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom):not(:has(> p:nth-of-type(3))) {
        grid-template-columns: minmax(0, 1fr);
        width: min(calc(100% - 32px), 520px);
        gap: 12px;
    }

    body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom)::before {
        grid-column: 1;
        min-height: 66px;
        background-size: min(100%, 270px) auto;
    }

    body:not(.blog-admin-page) .footer > .container:not(.footer-main):not(.footer-bottom) > p {
        min-height: 0;
        justify-content: center;
        padding: 15px 17px;
        border-radius: 14px;
        text-align: center;
    }
}

/* Footer CTA card only. */
body:not(.blog-admin-page) .footer:has(> .footer-main) {
    padding: 0;
}

body:not(.blog-admin-page) .footer > .footer-main {
    gap: clamp(24px, 2.6vw, 42px);
    padding-top: clamp(46px, 5vw, 66px);
    padding-bottom: clamp(38px, 4vw, 54px);
}

body:not(.blog-admin-page) .footer .footer-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-self: start;
    padding: clamp(22px, 2.2vw, 28px);
    border: 1px solid rgba(174, 205, 239, .95);
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 12%, rgba(67, 151, 255, .2), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(238, 246, 255, .92));
    box-shadow: 0 20px 48px rgba(38, 91, 160, .14), inset 0 1px 0 #fff;
}

body:not(.blog-admin-page) .footer .footer-contact::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -42px;
    bottom: -54px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(76, 151, 247, .1);
}

body:not(.blog-admin-page) .footer .footer-contact::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 22px;
    width: 58px;
    height: 44px;
    opacity: .88;
    background:
        linear-gradient(to top, #91c9ff 0 42%, transparent 42%) 0 100% / 12px 100% no-repeat,
        linear-gradient(to top, #439dff 0 68%, transparent 68%) 23px 100% / 12px 100% no-repeat,
        linear-gradient(to top, #0877eb 0 96%, transparent 96%) 46px 100% / 12px 100% no-repeat;
}

body:not(.blog-admin-page) .footer .footer-contact .footer-eyebrow {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 78px);
    margin-bottom: 11px;
    color: #1775df;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .14em;
}

body:not(.blog-admin-page) .footer .footer-contact h2 {
    position: relative;
    z-index: 1;
    max-width: 11ch;
    margin: 0 0 12px;
    color: #102c59;
    font-size: clamp(1.35rem, 1.9vw, 1.72rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

body:not(.blog-admin-page) .footer .footer-contact p {
    position: relative;
    z-index: 1;
    margin: 0 0 17px;
    color: #58708f;
    font-size: .92rem;
    line-height: 1.55;
}

body:not(.blog-admin-page) .footer .footer-contact .footer-cta {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #086be6 0%, #0988f5 100%);
    box-shadow: 0 13px 28px rgba(8, 107, 230, .25);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
}

body:not(.blog-admin-page) .footer .footer-contact .footer-cta span {
    color: #fff;
    font-size: 1.2rem;
}

body:not(.blog-admin-page) .footer .footer-contact .footer-cta:hover {
    color: #fff;
    background: linear-gradient(135deg, #075fcf 0%, #087ae0 100%);
    box-shadow: 0 17px 34px rgba(8, 107, 230, .32);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    body:not(.blog-admin-page) .footer .footer-contact {
        width: min(100%, 420px);
        margin-inline: auto;
        padding: 22px 19px 19px;
        border-radius: 20px;
        text-align: left;
    }

    body:not(.blog-admin-page) .footer .footer-contact::after {
        top: 28px;
        right: 22px;
        transform: scale(.86);
        transform-origin: top right;
    }
}

/* Keep the shared footer concise on tablet and mobile. */
@media (min-width: 601px) and (max-width: 1024px) {
    body:not(.blog-admin-page) .footer > .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 32px;
        padding-top: 38px;
        padding-bottom: 30px;
    }

    body:not(.blog-admin-page) .footer .footer-brand {
        grid-column: 1;
        grid-row: 1;
    }

    body:not(.blog-admin-page) .footer .footer-contact {
        grid-column: 2;
        grid-row: 1;
        justify-items: stretch;
        text-align: left;
    }

    body:not(.blog-admin-page) .footer .footer-contact .footer-cta {
        width: 100%;
    }

    body:not(.blog-admin-page) .footer .footer-services-directory,
    body:not(.blog-admin-page) .footer .footer-company {
        grid-column: 1 / -1;
    }

    body:not(.blog-admin-page) .footer .footer-service-groups {
        grid-template-columns: minmax(0, 3fr) minmax(150px, 1fr);
        gap: 28px;
    }

    body:not(.blog-admin-page) .footer .footer-service-group:first-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }

    body:not(.blog-admin-page) .footer .footer-service-group:first-child h3 {
        grid-column: 1 / -1;
    }

    body:not(.blog-admin-page) .footer .footer-company {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 20px;
    }

    body:not(.blog-admin-page) .footer .footer-company h2 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    body:not(.blog-admin-page) .footer > .footer-main {
        gap: 12px;
        padding-top: 28px;
        padding-bottom: 22px;
    }

    body:not(.blog-admin-page) .footer .footer-brand {
        padding-bottom: 18px;
    }

    body:not(.blog-admin-page) .footer .footer-services-directory,
    body:not(.blog-admin-page) .footer .footer-company {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    body:not(.blog-admin-page) .footer .footer-service-groups {
        grid-template-columns: minmax(0, 1.45fr) minmax(112px, .75fr);
        gap: 16px;
        align-items: start;
    }

    body:not(.blog-admin-page) .footer .footer-company {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    body:not(.blog-admin-page) .footer .footer-company h2 {
        grid-column: 1 / -1;
    }

    body:not(.blog-admin-page) .footer .footer-company > a:not(.footer-cta) {
        font-size: .8rem;
        line-height: 1.35;
    }

    body:not(.blog-admin-page) .footer .footer-contact {
        justify-items: stretch;
    }
}

@media (max-width: 380px) {
    body:not(.blog-admin-page) .footer .footer-service-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.blog-admin-page) .footer .footer-company {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Consistent strong primary titles across all public pages. */
body:not(.blog-admin-page):not(.home-page) h1,
body:not(.blog-admin-page):not(.home-page) .page-hero h1,
body.google-ads-page .google-ads-hero-secondary {
    font-weight: 900;
}

/* 404 page: align the error state with the public light-blue brand system. */
body.not-found-page .simple-not-found {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(620px, calc(100vh - 78px), 820px);
    overflow: hidden;
    padding: clamp(64px, 9vw, 112px) 0;
    place-items: center;
    border-bottom: 1px solid #c9def5;
    background:
        linear-gradient(rgba(59, 122, 200, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 122, 200, .075) 1px, transparent 1px),
        radial-gradient(circle at 82% 18%, rgba(52, 163, 235, .18), transparent 26%),
        radial-gradient(circle at 12% 88%, rgba(37, 99, 235, .1), transparent 28%),
        linear-gradient(135deg, #fbfdff 0%, #eef6ff 56%, #dfeeff 100%);
    background-size: 72px 72px, 72px 72px, auto, auto, auto;
    text-align: center;
}

body.not-found-page .simple-not-found::before,
body.not-found-page .simple-not-found::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

body.not-found-page .simple-not-found::before {
    top: -170px;
    right: -110px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(44, 129, 222, .18);
    box-shadow: inset 0 0 0 52px rgba(89, 174, 241, .045);
}

body.not-found-page .simple-not-found::after {
    bottom: -190px;
    left: -130px;
    width: 380px;
    height: 380px;
    background: rgba(118, 185, 246, .1);
}

body.not-found-page .simple-not-found > .container {
    width: min(calc(100% - 40px), 860px);
}

body.not-found-page .simple-not-found-box {
    position: relative;
    isolation: isolate;
    max-width: 760px;
    overflow: hidden;
    margin: 0 auto;
    padding: clamp(42px, 6vw, 68px);
    border: 1px solid rgba(157, 196, 235, .9);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(82, 164, 244, .14), transparent 34%),
        rgba(255, 255, 255, .88);
    box-shadow: 0 28px 75px rgba(37, 84, 145, .15), inset 0 1px 0 #fff;
    backdrop-filter: blur(14px);
}

body.not-found-page .simple-not-found-box::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 132px;
    height: 5px;
    border-radius: 0 0 999px 999px;
    content: "";
    background: linear-gradient(90deg, #2563eb, #38bdf8, #22c59a);
    transform: translateX(-50%);
}

body.not-found-page .simple-not-found-box::after {
    position: absolute;
    z-index: -1;
    right: -72px;
    bottom: -90px;
    width: 230px;
    height: 230px;
    border: 36px solid rgba(69, 146, 237, .07);
    border-radius: 50%;
    content: "";
}

body.not-found-page .simple-not-found-code {
    display: inline-block;
    margin: 0;
    color: #126dde;
    background: linear-gradient(120deg, #155ed2 0%, #0c91ed 55%, #21bda0 100%);
    font-size: clamp(5.4rem, 12vw, 8.4rem);
    font-weight: 900;
    letter-spacing: -.075em;
    line-height: .82;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.not-found-page .simple-not-found h1 {
    margin: clamp(24px, 4vw, 34px) 0 14px;
    color: #102c59;
    font-size: clamp(2.25rem, 5.2vw, 3.65rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.055em;
}

body.not-found-page .simple-not-found-box > p:last-of-type {
    max-width: 520px;
    margin: 0 auto;
    color: #566f90;
    font-size: clamp(1rem, 1.7vw, 1.12rem);
    line-height: 1.7;
    text-wrap: balance;
}

body.not-found-page .simple-not-found-actions {
    display: flex;
    margin-top: 30px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

body.not-found-page .simple-not-found-actions .btn,
body.not-found-page .simple-not-found-contact {
    display: inline-flex;
    min-width: 164px;
    min-height: 50px;
    padding: 12px 20px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}

body.not-found-page .simple-not-found-actions .btn {
    border: 1px solid rgba(255, 255, 255, .48);
    color: #fff;
    background: linear-gradient(135deg, #1268df, #0790ef);
    box-shadow: 0 13px 30px rgba(17, 105, 220, .24);
}

body.not-found-page .simple-not-found-actions .btn:hover {
    background: linear-gradient(135deg, #0e59c5, #087ed3);
    box-shadow: 0 17px 36px rgba(17, 105, 220, .3);
}

body.not-found-page .simple-not-found-contact {
    border: 1px solid #b5d2ef;
    color: #175fc4;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 24px rgba(49, 91, 145, .08);
}

body.not-found-page .simple-not-found-contact:hover {
    border-color: #72abe6;
    color: #104fa7;
    background: #fff;
    box-shadow: 0 14px 30px rgba(49, 91, 145, .13);
}

@media (max-width: 600px) {
    body.not-found-page .simple-not-found {
        min-height: 600px;
        padding: 50px 0 58px;
        background-size: 54px 54px, 54px 54px, auto, auto, auto;
    }

    body.not-found-page .simple-not-found > .container {
        width: min(calc(100% - 28px), 520px);
    }

    body.not-found-page .simple-not-found-box {
        padding: 38px 20px 24px;
        border-radius: 18px;
    }

    body.not-found-page .simple-not-found-code {
        font-size: clamp(5rem, 28vw, 6.6rem);
    }

    body.not-found-page .simple-not-found h1 {
        margin-top: 24px;
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

    body.not-found-page .simple-not-found-actions {
        align-items: stretch;
        margin-top: 24px;
        flex-direction: column;
    }

    body.not-found-page .simple-not-found-actions .btn,
    body.not-found-page .simple-not-found-contact {
        width: 100%;
        min-width: 0;
    }
}