/* Distinct, image-free service hero visuals. Core layout comes from light-theme.css. */
.service-hero-art .visual-aura {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(62, 156, 226, .16);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 190, 246, .2), rgba(188, 226, 252, .06) 58%, transparent 74%);
    transform: translate(-50%, -50%);
}

.service-hero-art :is(small, strong, span) { box-sizing: border-box; }

/* Undo the legacy centered Google Ads title on the desktop two-column hero. */
body.google-ads-page .service-visual-google-ads .service-hero-copy h1 {
    width: 100%;
    justify-items: start;
    text-align: left;
}

body.google-ads-page .service-visual-google-ads .google-ads-hero-primary,
body.google-ads-page .service-visual-google-ads .google-ads-hero-secondary {
    width: 100%;
    text-align: left;
}

body.google-ads-page .service-visual-google-ads .google-ads-hero-secondary {
    max-width: 620px;
    font-size: .48em;
    line-height: 1.08;
    white-space: normal;
}

/* GA4: event stream to insight. */
.ga4-insight-line { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ga4-insight-line path { fill: none; stroke: #55b8e8; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ga4-insight-line circle { fill: #fff; stroke: #2d88da; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ga4-event-stack { position: absolute; z-index: 2; top: 34px; left: 0; display: grid; width: 152px; gap: 7px; }
.ga4-event-stack span { display: flex; min-height: 38px; padding: 8px 11px; align-items: center; gap: 9px; border: 1px solid #c5ddf2; border-radius: 12px; color: #526b88; background: rgba(255,255,255,.94); box-shadow: 0 10px 22px rgba(41,82,132,.09); font-size: .58rem; font-weight: 750; }
.ga4-event-stack i { width: 8px; height: 8px; border-radius: 50%; background: #55b9e8; box-shadow: 0 0 0 4px rgba(85,185,232,.1); }
.ga4-event-stack span:last-child i { background: #55bd8d; }
.ga4-insight-core { position: absolute; z-index: 3; top: 50%; left: 51%; display: grid; width: 188px; height: 188px; padding: 24px; place-items: center; align-content: center; border: 1px solid rgba(100,161,221,.52); border-radius: 50%; background: linear-gradient(145deg,#fff,#e0f0ff); box-shadow: 0 0 0 14px rgba(72,157,226,.07),0 24px 48px rgba(40,88,146,.17); text-align: center; transform: translate(-50%,-50%); }
.ga4-donut { width: 54px; height: 54px; margin-bottom: 9px; border-radius: 50%; background: conic-gradient(#35c6df 0 34%,#337ee9 34% 76%,#d8e8f7 76%); mask: radial-gradient(circle,transparent 45%,#000 47%); }
.ga4-insight-core small { color: #3c83c3; font-size: .55rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ga4-insight-core strong { margin-top: 4px; color: #18385f; font-size: .92rem; line-height: 1.2; }
.ga4-metric,.ga4-forecast { position: absolute; z-index: 4; border: 1px solid #bdd8ef; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 15px 32px rgba(38,79,132,.12); }
.ga4-metric { top: 35px; right: 0; display: grid; width: 142px; padding: 13px 15px; }
.ga4-metric b { color: #2083dc; font-size: 1.25rem; }
.ga4-metric span { color: #71849c; font-size: .55rem; font-weight: 700; }
.ga4-forecast { right: 0; bottom: 18px; display: flex; min-width: 175px; padding: 11px 13px; align-items: center; gap: 10px; }
.ga4-forecast i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg,#2b7ee2,#42c6dd); font-style: normal; }
.ga4-forecast small,.ga4-forecast strong { display: block; }
.ga4-forecast small { color: #6684a1; font-size: .51rem; }
.ga4-forecast strong { color: #234362; font-size: .65rem; }

/* GTM: controlled routing map. */
.gtm-routing-lines { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.gtm-routing-lines path { fill: none; stroke: #72afe8; stroke-width: 2; stroke-dasharray: 6 8; }
.gtm-routing-lines circle { fill: #fff; stroke: #347fd7; stroke-width: 3; }
.gtm-route-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 154px; height: 154px; padding: 24px; place-items: center; align-content: center; border: 1px solid #89b7e5; border-radius: 34px; background: linear-gradient(145deg,#fff,#dcecff); box-shadow: 0 0 0 13px rgba(72,151,222,.08),0 24px 48px rgba(36,82,140,.16); transform: translate(-50%,-50%) rotate(45deg); }
.gtm-route-core > * { transform: rotate(-45deg); }
.gtm-route-core span { color: #2378d9; font-size: 1.2rem; font-weight: 900; }
.gtm-route-core strong { margin: 2px -14px 0; color: #17355d; font-size: .8rem; white-space: nowrap; }
.gtm-route-core small { margin: 4px -20px 0; color: #7087a1; font-size: .5rem; white-space: nowrap; }
.gtm-route-node { position: absolute; z-index: 2; display: flex; width: 132px; min-height: 58px; padding: 10px; align-items: center; gap: 9px; border: 1px solid #c2daef; border-radius: 15px; color: #345574; background: rgba(255,255,255,.95); box-shadow: 0 13px 27px rgba(39,81,134,.11); font-size: .63rem; font-weight: 800; }
.gtm-route-node b { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: #2479d8; background: #e8f4ff; font-size: .58rem; }
.gtm-node-trigger { top: 28px; left: 5px; }.gtm-node-variable { top: 28px; right: 5px; }.gtm-node-layer { bottom: 28px; left: 5px; }.gtm-node-tag { right: 5px; bottom: 28px; }
.gtm-published { position: absolute; z-index: 4; bottom: -3px; left: 50%; display: flex; min-width: 174px; padding: 10px 13px; align-items: center; gap: 10px; border: 1px solid #b9d9ce; border-radius: 14px; background: rgba(253,255,254,.97); box-shadow: 0 15px 30px rgba(35,82,126,.12); transform: translateX(-50%); }
.gtm-published i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: #159568; background: #dff8ee; font-style: normal; font-weight: 900; }
.gtm-published small,.gtm-published strong { display: block; }.gtm-published small { color: #7890a6; font-size: .5rem; }.gtm-published strong { color: #244362; font-size: .64rem; }

/* Conversion tracking: visible customer journey. */
.conversion-journey-line { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.conversion-journey-line path { fill: none; stroke: #55afe6; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 9; vector-effect: non-scaling-stroke; }
.conversion-stage { position: absolute; z-index: 2; display: grid; width: 88px; height: 88px; place-items: center; align-content: center; border: 1px solid #bed9ef; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 15px 30px rgba(37,82,137,.12); }
.conversion-stage b { color: #2880da; font-size: .58rem; }.conversion-stage span { margin-top: 3px; color: #355674; font-size: .62rem; font-weight: 800; }
.stage-visit { top: 208px; left: 16px; }.stage-engage { top: 99px; left: 172px; }.stage-lead { right: 145px; bottom: 67px; }
.conversion-target { position: absolute; z-index: 3; top: 64px; right: 8px; display: grid; width: 150px; height: 150px; place-items: center; align-content: center; border: 1px solid #82b5e4; border-radius: 50%; background: linear-gradient(145deg,#fff,#dceeff); box-shadow: 0 0 0 14px rgba(65,151,225,.08),0 24px 48px rgba(35,83,143,.16); }
.conversion-target i { position: absolute; inset: 20px; border: 1px solid rgba(47,137,216,.2); border-radius: 50%; }.conversion-target b { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; color: #fff; background: #26aa78; }.conversion-target small { margin-top: 8px; color: #4e84b8; font-size: .52rem; text-transform: uppercase; }.conversion-target strong { color: #18385f; font-size: .86rem; }
.conversion-value { position: absolute; z-index: 4; right: 0; bottom: 7px; min-width: 174px; padding: 11px 14px; border: 1px solid #b8d9ce; border-radius: 14px; background: rgba(250,255,253,.97); box-shadow: 0 14px 30px rgba(36,80,130,.11); }.conversion-value small,.conversion-value strong { display: block; }.conversion-value small { color: #6b8a83; font-size: .51rem; }.conversion-value strong { color: #237250; font-size: .68rem; }

/* Google Ads: campaign click to revenue. */
.ads-campaign-card { position: absolute; z-index: 3; top: 52px; left: 5px; width: 202px; padding: 18px; border: 1px solid #b8d4ed; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 20px 42px rgba(38,79,132,.14); }
.ads-campaign-card small,.ads-campaign-card strong { display: block; }.ads-campaign-card small { color: #337bc4; font-size: .53rem; font-weight: 850; letter-spacing: .08em; }.ads-campaign-card strong { margin-top: 7px; color: #19395f; font-size: .9rem; }.ads-campaign-card > span { display: grid; margin: 12px 0; gap: 6px; }.ads-campaign-card > span i { height: 6px; border-radius: 99px; background: #dce9f6; }.ads-campaign-card > span i:nth-child(2) { width: 78%; }.ads-campaign-card > span i:nth-child(3) { width: 55%; }.ads-campaign-card button { padding: 7px 12px; border: 0; border-radius: 8px; color: #fff; background: #297de0; font: inherit; font-size: .56rem; font-weight: 800; }
.ads-performance-route { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }.ads-performance-route path { fill: none; stroke: #5db4e5; stroke-width: 3; stroke-dasharray: 7 9; vector-effect: non-scaling-stroke; }.ads-performance-route circle { fill: #fff; stroke: #3186d7; stroke-width: 3; }
.ads-conversion-core { position: absolute; z-index: 3; top: 205px; left: 245px; display: grid; width: 118px; height: 118px; place-items: center; align-content: center; border: 1px solid #8abbe6; border-radius: 50%; background: linear-gradient(145deg,#fff,#deefff); box-shadow: 0 18px 38px rgba(38,83,138,.15); }.ads-conversion-core b { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: #fff; background: #26a975; }.ads-conversion-core small { margin-top: 7px; color: #6282a2; font-size: .5rem; }.ads-conversion-core strong { color: #1d3d63; font-size: .72rem; }
.ads-roas-card { position: absolute; z-index: 3; top: 62px; right: 0; width: 158px; padding: 16px; border: 1px solid #bed8ee; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(37,80,133,.13); }.ads-roas-card small,.ads-roas-card strong,.ads-roas-card span { display: block; }.ads-roas-card small { color: #347cc3; font-size: .5rem; font-weight: 850; }.ads-roas-card strong { margin-top: 5px; color: #1d72cf; font-size: 1.65rem; }.ads-roas-card span { color: #7489a0; font-size: .55rem; }
.ads-bars { position: absolute; right: 20px; bottom: 22px; display: flex; height: 100px; align-items: end; gap: 10px; }.ads-bars i { width: 18px; border-radius: 6px 6px 2px 2px; background: linear-gradient(#48c7e0,#2b78df); box-shadow: 0 7px 14px rgba(42,120,222,.15); }.ads-bars i:nth-child(1){height:28%}.ads-bars i:nth-child(2){height:47%}.ads-bars i:nth-child(3){height:62%}.ads-bars i:nth-child(4){height:79%}.ads-bars i:nth-child(5){height:100%}

/* Enhanced conversions: secure signal matching. */
.enhanced-data-source { position: absolute; z-index: 3; top: 66px; left: 0; display: grid; width: 172px; padding: 15px; gap: 8px; border: 1px solid #c1dbee; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(36,80,132,.12); }.enhanced-data-source > small { color: #2778c6; font-size: .55rem; font-weight: 850; text-transform: uppercase; }.enhanced-data-source span { display: flex; align-items: center; gap: 8px; color: #5d738d; font-size: .56rem; font-weight: 750; }.enhanced-data-source i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: #247bd8; background: #e8f4ff; font-style: normal; }
.enhanced-match-route { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }.enhanced-match-route path { fill: none; stroke: #5aafe3; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 8; vector-effect: non-scaling-stroke; }
.enhanced-shield { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 176px; height: 190px; place-items: center; align-content: center; border: 1px solid rgba(58,159,128,.35); border-radius: 42% 42% 48% 48%; background: linear-gradient(145deg,#fff,#ddf5ed); box-shadow: 0 0 0 14px rgba(44,171,131,.06),0 23px 46px rgba(35,91,128,.15); transform: translate(-50%,-50%); }.enhanced-shield svg { width: 92px; fill: rgba(78,200,162,.08); stroke: #25a678; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }.enhanced-shield small { color: #2b8466; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.enhanced-match-result { position: absolute; z-index: 4; right: 0; bottom: 49px; display: flex; width: 184px; padding: 13px; align-items: center; gap: 11px; border: 1px solid #b8ddcf; border-radius: 15px; background: rgba(252,255,254,.97); box-shadow: 0 17px 35px rgba(35,82,129,.12); }.enhanced-match-result b { color: #1b9c6c; font-size: 1.35rem; }.enhanced-match-result small,.enhanced-match-result strong { display: block; }.enhanced-match-result small { color: #759087; font-size: .5rem; }.enhanced-match-result strong { color: #285f4d; font-size: .65rem; }
.enhanced-lock { position: absolute; z-index: 4; top: 50px; right: 9px; display: flex; align-items: center; gap: 8px; color: #497168; font-size: .57rem; font-weight: 800; }.enhanced-lock i { position: relative; display: block; width: 30px; height: 25px; border-radius: 8px; background: #dff6ee; }.enhanced-lock i::before { position: absolute; top: -9px; left: 8px; width: 12px; height: 14px; border: 3px solid #27a77b; border-bottom: 0; border-radius: 9px 9px 0 0; content:""; }

/* Ecommerce: product to purchase. */
.commerce-product { position: absolute; z-index: 3; top: 44px; left: 3px; width: 168px; padding: 15px; border: 1px solid #c1daee; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(36,80,132,.12); }.commerce-product > span { display: block; width: 64px; height: 72px; margin: 0 auto 10px; border-radius: 17px; background: linear-gradient(145deg,#6bb7f2,#3f7fe4); 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-product small,.commerce-product strong { display: block; text-align: center; }.commerce-product small { color: #6e859d; font-size: .52rem; }.commerce-product strong { margin-top: 3px; color: #244363; font-size: .68rem; }
.commerce-route { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }.commerce-route path { fill: none; stroke: #58b7df; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 9; vector-effect: non-scaling-stroke; }
.commerce-cart-core { position: absolute; z-index: 3; top: 198px; left: 235px; display: grid; width: 126px; height: 126px; place-items: center; align-content: center; border: 1px solid #89b9e5; border-radius: 50%; background: linear-gradient(145deg,#fff,#dff0ff); box-shadow: 0 20px 42px rgba(36,82,138,.15); }.commerce-cart-core svg { width: 58px; fill: none; stroke: #267add; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }.commerce-cart-core small { margin-top: 5px; color: #55789d; font-size: .55rem; font-weight: 800; }
.commerce-order { position: absolute; z-index: 4; top: 91px; right: 0; display: flex; min-width: 176px; padding: 13px; align-items: center; gap: 10px; border: 1px solid #b5ddce; border-radius: 15px; background: rgba(253,255,254,.97); box-shadow: 0 17px 35px rgba(34,81,129,.12); }.commerce-order b { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: #fff; background: #27aa78; }.commerce-order small,.commerce-order strong { display:block; }.commerce-order small { color:#769087;font-size:.5rem; }.commerce-order strong { color:#285f4d;font-size:.65rem; }
.commerce-revenue-card { position: absolute; z-index: 3; right: 0; bottom: 14px; width: 170px; padding: 15px; border: 1px solid #bdd7ed; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(36,80,132,.12); }.commerce-revenue-card small,.commerce-revenue-card strong { display:block; }.commerce-revenue-card small { color:#2d7dc6;font-size:.5rem;font-weight:850; }.commerce-revenue-card strong { margin-top:3px;color:#17385f;font-size:1.15rem; }.commerce-revenue-card span { display:flex;height:36px;margin-top:9px;align-items:end;gap:7px; }.commerce-revenue-card i { width:17px;border-radius:5px 5px 1px 1px;background:linear-gradient(#45cddd,#2d7ee0); }.commerce-revenue-card i:nth-child(1){height:28%}.commerce-revenue-card i:nth-child(2){height:48%}.commerce-revenue-card i:nth-child(3){height:70%}.commerce-revenue-card i:nth-child(4){height:100%}

/* Tracking audit: scanner and issue resolution. */
.audit-scan-list { position: absolute; z-index: 2; top: 53px; left: 5px; display: grid; width: 278px; padding: 17px; gap: 10px; border: 1px solid #bed8ed; border-radius: 19px; background: rgba(255,255,255,.96); box-shadow: 0 20px 42px rgba(37,80,132,.13); }.audit-scan-list > small { color:#2b7ec7;font-size:.54rem;font-weight:850;letter-spacing:.08em; }.audit-scan-list span { display:flex;min-height:34px;padding:7px 9px;align-items:center;gap:9px;border-radius:9px;color:#556d87;background:#f7fbff;font-size:.59rem;font-weight:750; }.audit-scan-list i { display:grid;width:23px;height:23px;place-items:center;border-radius:50%;color:#178f68;background:#ddf7ed;font-style:normal;font-size:.6rem;font-weight:900; }.audit-scan-list .has-issue { color:#87683e;background:#fff8e9; }.audit-scan-list .has-issue i { color:#b77816;background:#ffedc4; }
.audit-magnifier-core { position:absolute;z-index:4;top:113px;left:213px;width:176px;height:176px;border:15px solid #2c7dde;border-radius:50%;background:rgba(220,241,255,.75);box-shadow:0 20px 42px rgba(36,84,145,.2); }.audit-magnifier-core::after { position:absolute;right:-57px;bottom:-35px;width:82px;height:17px;border-radius:99px;background:#2367c4;content:"";transform:rotate(45deg); }.audit-magnifier-core span { position:absolute;top:21px;right:26px;bottom:21px;left:26px;border:1px dashed rgba(39,127,211,.35);border-radius:50%; }.audit-magnifier-core b { position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 0 0 9px rgba(63,159,225,.13);transform:translate(-50%,-50%); }.audit-magnifier-core b::after { position:absolute;top:50%;left:50%;width:20px;height:10px;border-bottom:4px solid #20a778;border-left:4px solid #20a778;content:"";transform:translate(-50%,-64%) rotate(-45deg); }
.audit-score { position:absolute;z-index:5;top:39px;right:0;width:135px;padding:13px;border:1px solid #bcd7ed;border-radius:15px;background:rgba(255,255,255,.97);box-shadow:0 15px 32px rgba(37,80,132,.12); }.audit-score small,.audit-score strong,.audit-score em { display:inline; }.audit-score small { display:block;color:#6282a2;font-size:.51rem; }.audit-score strong { color:#1c7bcf;font-size:1.55rem; }.audit-score em { color:#8293a8;font-size:.6rem;font-style:normal; }
.audit-resolved { position:absolute;z-index:5;right:0;bottom:17px;display:flex;min-width:183px;padding:12px 14px;align-items:center;gap:10px;border:1px solid #b7dccf;border-radius:15px;background:rgba(253,255,254,.97);box-shadow:0 16px 34px rgba(36,80,131,.12); }.audit-resolved b { display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:#fff;background:#28a978; }.audit-resolved small,.audit-resolved strong { display:block; }.audit-resolved small { color:#779087;font-size:.5rem; }.audit-resolved strong { color:#285f4d;font-size:.65rem; }
.audit-scan-beam { position:absolute;z-index:3;top:76px;left:10px;width:268px;height:4px;border-radius:99px;background:linear-gradient(90deg,transparent,#46bfe1,transparent);box-shadow:0 0 16px rgba(70,191,225,.52);animation:auditBeam 4s ease-in-out infinite; }

@keyframes auditBeam { 0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(178px);opacity:1} }
@keyframes heroSoftFloat { 50%{transform:translateY(-5px)} }
.ga4-metric,.gtm-published,.ads-roas-card,.enhanced-match-result,.commerce-order,.audit-score { animation:heroSoftFloat 6s ease-in-out infinite; }

@media (max-width: 1100px) and (min-width: 1025px) {
    .service-hero-art { transform: scale(.86); transform-origin:center right; }
}

@media (max-width: 1024px) {
    body.google-ads-page .service-visual-google-ads .service-hero-copy h1 {
        justify-items: center;
        text-align: center;
    }

    body.google-ads-page .service-visual-google-ads .google-ads-hero-primary,
    body.google-ads-page .service-visual-google-ads .google-ads-hero-secondary {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .audit-scan-beam,.ga4-metric,.gtm-published,.ads-roas-card,.enhanced-match-result,.commerce-order,.audit-score { animation:none; }
}