/* Blue version: changes on top of the main site's styles. Loaded last on every page in blue/. */

/* Home product family: the same light "background" gradient as the hero, with the heading in navy and blue so it
   reads on the light side; the cards keep their own navy glass, so their white text still reads */
html[data-blue] .pillars-zone { background: url('images/background.jpg') center / cover no-repeat, #D6E6F0; }
html[data-blue] .pillars-zone .blog-oversize-heading { color: #02263F; }
html[data-blue] .pillars-zone .blog-oversize-heading em { color: #2F78A8 !important; }
html[data-blue] .pillars-zone .pillar-card { background: rgba(2, 38, 63, .78); }

/* Home "Go deeper": each card gets its own picture (Watch 48, Download Blue1, Read Blue2), shown straight, not flipped or zoomed */
/* The picture fills only the top half of the card with a clean edge (no fade), so the text below sits on its own;
   on hover the picture brightens a little instead of zooming, so it never spills over the text */
html[data-blue] .resource-grid a::before { transform: none; inset: -2px -2px auto; height: 170px; transition: filter .4s ease; }
html[data-blue] .resource-grid .resource-icon { margin-bottom: 92px; }
html[data-blue] .resource-grid a:hover::before { transform: none; filter: brightness(1.12) saturate(1.1); }
html[data-blue] .resource-grid a:nth-child(1)::before {
    background: linear-gradient(165deg, rgba(2,38,63,0.16), rgba(1,20,36,0.20)), url('images/48.jpg') 70% center / cover no-repeat;
}
html[data-blue] .resource-grid a:nth-child(2)::before {
    background: linear-gradient(165deg, rgba(2,38,63,0.16), rgba(1,20,36,0.20)), url('images/Blue1.jpeg') center / cover no-repeat;
}
html[data-blue] .resource-grid a:nth-child(3)::before {
    background: linear-gradient(165deg, rgba(2,38,63,0.16), rgba(1,20,36,0.20)), url('images/Blue2.jpeg') center / cover no-repeat;
}
/* Home closing "See your network": the neutral version's panel. Flat navy, text on the left, and the
   networked globe (drawn by blue/blue-fx.js) turning slowly behind it on the right */
html[data-blue] .final-cta { background: #02263F; border-color: transparent; position: relative; overflow: hidden; }
html[data-blue] .final-cta::before, html[data-blue] .final-cta::after { display: none; }
html[data-blue] .final-cta > *:not(.c-globe) { position: relative; z-index: 1; }
html[data-blue] .final-cta .fancy-word { color: #3FC1C9 !important; background-image: linear-gradient(100deg, #3FC1C9 5%, #B4E2E8 95%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
html[data-blue] .c-globe { position: absolute; right: -4%; top: 50%; width: min(58%, 640px); aspect-ratio: 1; transform: translateY(-50%);
    opacity: .5; pointer-events: none; z-index: 0;
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
html[data-blue] .c-globe canvas { width: 100%; height: 100%; display: block; }
@media (min-width: 1001px) {
    html[data-blue] .final-cta { text-align: left; }
    html[data-blue] .final-cta > *:not(.c-globe) { max-width: 54%; margin-left: 0; }
    html[data-blue] .final-cta .final-cta-btns { justify-content: flex-start; }
}
@media (max-width: 1000px) { html[data-blue] .c-globe { opacity: .3; width: 90%; right: -30%; } }
/* "Explore the Platform" on the navy panel: the teal gradient of the Contact Us buttons */
html[data-blue] .final-cta .hero-cta-ghost { background: linear-gradient(110deg, #1AA3AC 0%, #138E96 50%, #0B5E66 100%); background-size: 160% 100%;
    color: #fff; border-color: transparent; transition: background-position .5s ease, transform .3s ease; }
html[data-blue] .final-cta .hero-cta-ghost:hover { background-position: 100% 0; color: #fff; }
html[data-blue] .final-cta .hero-cta-ghost .ti { color: #fff; }
/* Home hero: copy on the left, the product video in a tilted screen on the right that leans toward
   the pointer and eases back (ported from the reference site's video page hero) */
.b-hero .hero-bottom { gap: clamp(32px, 5vw, 72px); }
/* the copy starts close under the menu bar instead of sitting in the middle of a full-screen-high hero */
html[data-blue] .b-hero { align-items: flex-start; min-height: 0; padding: 56px 0 96px; }
.b-hero .hero-heading { font-size: clamp(1.9rem, 2.8vw, 44px); line-height: 1.12; }
.b-hero .hero-sub { max-width: 720px; font-size: 0.98rem; }
/* The screen: the reference video page's hero-screen block, value for value (16:9, 10px navy bezel,
   rotateY -12deg / rotateX 4deg plus up to 8deg / 5deg toward the pointer, eased over 1s) */
.b-hero .hero-bottom { grid-template-columns: minmax(0, 1fr) min(50%, 660px); }
.b-scr { display: flex; align-items: center; justify-content: center; perspective: 1800px; }
.b-scr-in { position: relative; width: 100%; transform-style: preserve-3d;
    transform: rotateY(calc(-12deg + var(--rx, 0) * 8deg)) rotateX(calc(4deg - var(--ry, 0) * 5deg));
    transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
/* the bezel looks like brushed navy metal: lighter catch-light on the top-left and bottom-right edges, a bright
   rim along the top, a dark rim along the bottom, and a soft drop shadow, so it reads as a real device */
.b-scr-f { position: relative; border-radius: 22px; padding: 10px;
    background: linear-gradient(145deg, #4A6A86 0%, #133F61 14%, #04243D 42%, #021A2E 62%, #0E3557 84%, #3D5F7C 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .45), inset 1px 0 0 rgba(255, 255, 255, .12),
        inset -1px 0 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(2, 20, 34, .55), 0 2px 4px rgba(2, 20, 34, .25),
        0 22px 40px -18px rgba(2, 20, 34, .55), 0 50px 90px -40px rgba(0, 0, 0, .7); }
/* the screen sits recessed in the bezel, with a faint glass sheen across the top-left */
.b-scr-v::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 2px 6px rgba(0, 0, 0, .45);
    background: linear-gradient(125deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 28%, transparent 42%); }
.b-scr-f::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -38px; height: 40px;
    background: radial-gradient(50% 50% at 50% 0, rgba(0, 0, 0, .5), transparent 70%); filter: blur(6px); transform: translateZ(-40px); }
.b-scr-v { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #02263F center / cover no-repeat; }
/* the Home product preview plays on a loop; it is wider than 16:9, so it fills the screen with its sides trimmed */
.b-scr-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #02141f; }
@media (max-width: 1024px) {
    .b-hero .hero-bottom { grid-template-columns: 1fr; }
    .b-scr { max-width: 620px; margin: 10px auto 0; width: 100%; }
    .b-scr-in { transform: rotateX(3deg); }
}
@media (max-width: 560px) { .b-scr-f { padding: 6px; border-radius: 16px; } .b-scr-v { border-radius: 11px; } }

/* Every "Book a Demo" button on every page gets the VC4 orange gradient (text links in menus and footers stay as they are) */
html[data-blue] :is(button[onclick*="book-a-demo"], a[href*="book-a-demo"][class]:not(.mega-link, .skip-link, .article-card, .err-route, .ev-link)) {
    background: linear-gradient(120deg, #EF6A3C 0%, #E6532B 50%, #CC4320 100%) !important;
    background-size: 140% 100% !important; background-position: 0 50% !important;
    border-color: transparent !important; color: #fff !important;
    transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease;
}
html[data-blue] :is(button[onclick*="book-a-demo"], a[href*="book-a-demo"][class]:not(.mega-link, .skip-link, .article-card, .err-route, .ev-link)):hover {
    background-position: 100% 50% !important; box-shadow: 0 12px 30px -10px rgba(230, 83, 43, .7);
}

/* Every "Contact Us" button on every page gets a VC4 teal gradient (text links in menus and footers stay as they are) */
html[data-blue] :is(button[onclick*="contact.html"], a[href*="contact.html"][class]:not(.mega-link, .mega-footer-link, .skip-link, .ql-card)) {
    background: linear-gradient(120deg, #3FC1C9 0%, #138E96 50%, #0B5E66 100%) !important;
    background-size: 160% 100% !important; background-position: 0 50% !important;
    border-color: transparent !important; color: #fff !important;
    transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease;
}
html[data-blue] :is(button[onclick*="contact.html"], a[href*="contact.html"][class]:not(.mega-link, .mega-footer-link, .skip-link, .ql-card)):hover {
    background-position: 100% 50% !important; box-shadow: 0 12px 30px -10px rgba(19, 142, 150, .7);
}
html[data-blue] :is(button[onclick*="contact.html"], a[href*="contact.html"][class]:not(.mega-link, .mega-footer-link, .skip-link, .ql-card)) :is(i, svg) { color: #fff !important; }

/* Module tiles (Home, S2C Platform, ENE and the module-page carousel): the neutral version's treatment. White cards
   with a hairline border; the header holds a small isometric scene (blue/blue-modtiles.js) on a soft wash in the
   tile's tone, the icon takes the same tone, and the blocks lift on hover while the card tilts toward the pointer.
   Tones by position: teal, orange, light blue, navy */
html[data-blue] .b-tone-0 { --tone: #138E96; --tone-bg: #E3F1F2; --tone-shot: linear-gradient(180deg, #F0F8F8, #DDF0F1); }
html[data-blue] .b-tone-1 { --tone: #C9441F; --tone-bg: #FDEEE9; --tone-shot: linear-gradient(180deg, #FEF6F2, #FBE4DA); }
html[data-blue] .b-tone-2 { --tone: #5F99BB; --tone-bg: #DDF0FB; --tone-shot: linear-gradient(180deg, #EEF8FD, #D3ECFA); }
html[data-blue] .b-tone-3 { --tone: #02263F; --tone-bg: #DCE7E9; --tone-shot: linear-gradient(180deg, #EEF3F5, #D6E2E7); }
html[data-blue] .b-isotile { background: #fff !important; border: 1px solid #E3E7EE !important; box-shadow: 0 2px 10px rgba(2, 38, 63, .04) !important; }
html[data-blue] .b-isotile:hover { border-color: var(--tone) !important; }
html[data-blue] .b-isotile .b-scened { position: relative; overflow: hidden; background: var(--tone-shot) !important; border-color: #E3E7EE !important; }
html[data-blue] .b-isotile .b-scened::before, html[data-blue] .b-isotile .b-scened::after { content: none !important; }
html[data-blue] .b-isoscene { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-blue] .b-blk { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
html[data-blue] .b-isotile:hover .b-blk { transform: translateY(-3px); }
html[data-blue] .b-isotile:hover .b-acc { transform: translateY(-9px); }
html[data-blue] .b-isotile :is(.mod-icon, .module-icon, .mod-tile-icon) { color: var(--tone) !important; background: var(--tone-bg) !important; border-color: transparent !important; }
html[data-blue] .b-isotile :is(.mod-body h3, .module-body h3, .mod-tile-name) { color: #02263F !important; }
html[data-blue] .b-isotile :is(.mod-body p, .module-body p, .mod-tile-desc) { color: #3B5160 !important; }
html[data-blue] .b-isotile :is(.mod-go, .mod-arrow, .mod-tile-go) { color: #138E96 !important; background: transparent !important; }
html[data-blue] .b-isotile :is(.mod-go, .mod-arrow, .mod-tile-go) .ti { color: #138E96 !important; background-color: currentColor !important; }
html[data-blue] .b-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease, border-color .3s ease !important; }
html[data-blue] .b-tilt:hover { box-shadow: 0 30px 60px -20px rgba(2, 38, 63, .18) !important; }
/* the carousel's header was a photo: the scene takes its place in the same 16:9 box, the icon drops onto the
   header's lower edge as on the grid tiles */
html[data-blue] .mod-tile-head.b-scened { aspect-ratio: 16 / 9; overflow: visible; border-bottom: 1px solid #E3E7EE; }
html[data-blue] .mod-tile-head.b-scened .b-isoscene { overflow: hidden; }
html[data-blue] .mod-tile-head.b-scened .mod-tile-thumb { display: none; }
html[data-blue] .mod-tile-head.b-scened .mod-tile-icon { top: auto; bottom: -18px; left: 22px; z-index: 1; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-blue] .b-isotile .mod-tile-head.b-scened + .mod-tile-name { margin-top: 30px; }

/* Light top menu bar on every page: VC4 airforce blue (#5F99BB) lightened, at all times (the main site's is
   navy), navy text and icons, and the logos in their colour versions for a light background */
html[data-blue]:not([data-theme="dark"]) .site-nav .nav-bar::before { opacity: 1 !important; background: #D6E6F0 !important; }
html[data-blue]:not([data-theme="dark"]) .nav-bar { box-shadow: 0 1px 0 rgba(2, 38, 63, .08), 0 8px 30px rgba(2, 38, 63, .10); }
html[data-blue]:not([data-theme="dark"]) .site-nav.scrolled .nav-bar { box-shadow: 0 1px 0 rgba(2, 38, 63, .10), 0 10px 34px rgba(2, 38, 63, .16); }
html[data-blue]:not([data-theme="dark"]) .nav-item { color: #02263F; }
html[data-blue]:not([data-theme="dark"]) .nav-item:hover,
html[data-blue]:not([data-theme="dark"]) .nav-item.on { color: #02263F; background: rgba(19, 142, 150, .10); }
html[data-blue]:not([data-theme="dark"]) .nav-divider { background: rgba(2, 38, 63, .15); }
html[data-blue]:not([data-theme="dark"]) :is(.icon-btn, .theme-btn) { color: #02263F; }
html[data-blue]:not([data-theme="dark"]) :is(.icon-btn, .theme-btn):hover { background: rgba(19, 142, 150, .10); color: #02263F; }
html[data-blue]:not([data-theme="dark"]) .lang-btn { color: #02263F; border-color: rgba(95, 153, 187, .5); }
html[data-blue]:not([data-theme="dark"]) .lang-btn:hover,
html[data-blue]:not([data-theme="dark"]) .lang-btn.on { color: #02263F; background: rgba(19, 142, 150, .08); border-color: rgba(19, 142, 150, .45); }
html[data-blue]:not([data-theme="dark"]) .nav-search-input { color: #02263F; border-color: rgba(95, 153, 187, .5); background: rgba(255, 255, 255, .55); }
html[data-blue]:not([data-theme="dark"]) .nav-search-input::placeholder { color: rgba(2, 38, 63, .6); }
html[data-blue]:not([data-theme="dark"]) .nav-search-input:focus { border-color: rgba(19, 142, 150, .55); background: #fff; }
html[data-blue]:not([data-theme="dark"]) .nav-search-wrap .ti-search { color: rgba(2, 38, 63, .5); }
html[data-blue]:not([data-theme="dark"]) .nav-mobile-toggle span { background: #02263F; }
/* The menu bar's VC4 logo is blue/images/vc4-logo-prussian.png, the official prussian blue logo from the VC4
   brand kit, so it shows on the light bar; in dark mode the bar is navy again, so the logo turns back to white */
html[data-blue][data-theme="dark"] .nav-logo img:not(.nav-logo-s2c) { filter: brightness(0) invert(1); }

/* Home hero on the light "background" gradient (white top left to navy bottom right): the picture fills the
   hero edge to edge with no navy fade or tint, and the copy turns navy so it reads on the light side */
html[data-blue] .b-hero > .hero-media { -webkit-mask-image: none; mask-image: none; }
html[data-blue] .b-hero::after { background: none; }
html[data-blue] .b-hero .hero-heading .h-word,
html[data-blue] .b-hero .hero-heading .s2c-mark { color: #02263F; }
html[data-blue] .b-hero .hero-kinetic { color: #02263F; }
html[data-blue] .b-hero .hero-sub { color: rgba(2, 38, 63, .86); }
html[data-blue] .b-hero .hero-sub strong { color: #0B5E66; }
/* Explore Service2Create: the teal-to-blue gradient of the "See every ___" word above it, white text, no outline */
html[data-blue] .b-hero .hero-cta-ghost { color: #fff; border: 0;
    background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); background-size: 140% 100%; background-position: 0 50%;
    box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease; }
html[data-blue] .b-hero .hero-cta-ghost:hover { color: #fff; border: 0; background-position: 100% 50%;
    box-shadow: 0 14px 32px -12px rgba(31, 134, 166, .75); }
html[data-blue] .b-hero .hero-cta-ghost .ti { color: #fff; }
html[data-blue] .b-hero :is(.hero-heading, .hero-heading *, .hero-kinetic, .hero-sub, .hero-eyebrow) { text-shadow: none; }

/* Menu bar logos side by side: the VC4 logo, a thin divider, then a large Service2Create wordmark */
html[data-blue] .site-nav .nav-logo { flex-direction: row; align-items: center; gap: 14px; margin-right: 20px; }
html[data-blue] .site-nav .nav-logo img:not(.nav-logo-s2c) { height: 30px; }
html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 22px; margin-top: 0; padding-left: 14px; border-left: 1px solid rgba(2, 38, 63, .2); box-sizing: content-box; }
@media (max-width: 1360px) {
    html[data-blue] .site-nav .nav-logo { gap: 10px; margin-right: 8px; }
    html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 15px; padding-left: 10px; }
    html[data-blue] .site-nav .nav-logo img:not(.nav-logo-s2c) { height: 24px; }
    html[data-blue] .site-nav .nav-item { padding: 8px 6px; }
}
@media (max-width: 1100px) { html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { display: block; height: 20px; } }
@media (max-width: 480px) { html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 14px; padding-left: 10px; } html[data-blue] .site-nav .nav-logo { gap: 10px; } }
/* small laptops (1101-1279px): not enough room beside the full menu, so the wordmark sits under the VC4 logo as on the main site */
@media (min-width: 1101px) and (max-width: 1279px) {
    html[data-blue] .site-nav .nav-logo { flex-direction: column; align-items: flex-start; gap: 3px; }
    html[data-blue] .site-nav .nav-logo img:not(.nav-logo-s2c) { height: 26px; }
    html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 10px; margin-top: 4px; padding-left: 0; border-left: 0; }
}

/* Home "Discover S2C Designer" and "See the ENE replacement": the teal gradient of the Contact Us buttons, with no outline */
html[data-blue] .hero-cta-main:is([onclick*="s2c-designer.html"], [onclick*="ericsson-network-engineer-replacement.html"]) { background: linear-gradient(120deg, #3FC1C9 0%, #138E96 50%, #0B5E66 100%);
    background-size: 140% 100%; background-position: 0 50%; border: 0; color: #fff;
    box-shadow: 0 12px 28px -12px rgba(19, 142, 150, .6); transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease; }
html[data-blue] .hero-cta-main:is([onclick*="s2c-designer.html"], [onclick*="ericsson-network-engineer-replacement.html"]):hover { background-position: 100% 50%; color: #fff; box-shadow: 0 14px 32px -12px rgba(19, 142, 150, .75); }

/* Home "See it working for operators like you": the heading and intro stay; the four use-case videos make way
   for the reference site's layer story ("How it works"), so the section turns light like the reference.
   The story's styles below are the reference's own, scoped to .b-story, with its colour tokens written out. */
html[data-blue] .usecase-zone { background: radial-gradient(60% 50% at 25% 60%, rgba(220, 231, 233, .75), transparent 70%), #fff; padding-bottom: 40px; }
html[data-blue] .usecase-zone .blog-oversize-heading { color: #02263F; }
html[data-blue] .usecase-zone .blog-oversize-heading em { color: #2F78A8 !important; }
html[data-blue] .usecase-zone .uc-intro { color: #3B5160; }
.b-story { --mist: #DCE7E9; --paper: #F0F6FA; --line: #E3E7EE; --ink-soft: #3B5160; --teal: #138E96; --teal-bright: #3FC1C9; --navy: #02263F; --orange: #EB552C;
    --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
.b-story .story-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
.b-story .stage { position: sticky; top: calc(var(--nav-h, 80px) + 3vh); height: calc(100vh - var(--nav-h, 80px) - 9vh); display: grid; place-items: center; perspective: 1800px; }
.b-story .stage-glow { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(19, 142, 150, .16), transparent); filter: blur(24px); transition: background .8s; }
.b-story .scene { position: relative; width: min(380px, 70vw); aspect-ratio: 1; transform-style: preserve-3d;
    transform: rotateX(var(--rx, 60deg)) rotateZ(var(--rz, -42deg)); transition: transform 1s var(--ease-out); }
.b-story .plate { position: absolute; inset: 0; border-radius: 24px; transform-style: preserve-3d;
    transform: translateZ(calc(var(--i) * 34px + var(--lift, 0px)));
    transition: transform 1.2s var(--spring), background .6s ease, border-color .6s ease, box-shadow .6s ease, opacity .6s ease;
    background: rgba(255, 255, 255, .94); border: 1px solid #D6E0E8;
    box-shadow: 0 1px 0 #E9EFF3, 0 34px 60px -24px rgba(2, 38, 63, .28); }
.b-story .scene.dim .plate { opacity: .62; }
.b-story .scene .plate.hot { opacity: 1; background: linear-gradient(150deg, #17A2AB, var(--teal)); border-color: var(--teal-bright);
    box-shadow: 0 0 0 1px rgba(63, 193, 201, .6), 0 0 60px rgba(19, 142, 150, .35), 0 34px 60px -24px rgba(2, 38, 63, .35); }
.b-story .plate .lbl { position: absolute; left: 20px; bottom: 16px; font: 700 16px/1.1 'Lato', sans-serif; color: var(--navy); }
.b-story .plate .lbl small { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--teal); text-transform: uppercase; margin-bottom: 6px; }
.b-story .plate.hot .lbl, .b-story .plate.hot .lbl small { color: #fff; }
.b-story .plate-in { position: absolute; inset: 20px 20px 62px; display: grid; gap: 8px; }
.b-story .p-net .plate-in { grid-template-columns: repeat(6, 1fr); align-content: center; }
.b-story .p-net .n { aspect-ratio: 1; border-radius: 50%; background: var(--mist); border: 1px solid #BFD2DB; }
.b-story .p-net .n.on { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 10px rgba(19, 142, 150, .6); animation: bBlinkN 2.6s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes bBlinkN { 50% { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 12px rgba(235, 85, 44, .7); } }
.b-story .plate.hot .n { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }
.b-story .plate.hot .n.on { background: #fff; }
.b-story .p-rec .plate-in { grid-template-columns: 1fr; align-content: center; }
.b-story .p-rec .bar { height: 10px; border-radius: 5px; background: #E5EDF2; overflow: hidden; position: relative; }
.b-story .p-rec .bar::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(var(--w));
    animation: bScan 3.2s var(--ease-out) infinite; animation-delay: var(--dl); }
.b-story .plate.hot .bar { background: rgba(255, 255, 255, .22); }
.b-story .plate.hot .bar::after { background: #fff; }
@keyframes bScan { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(var(--w)); } }
.b-story .p-inv .plate-in { grid-template-columns: 1fr 1fr; }
.b-story .p-inv .q { border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font: 500 10px/1 var(--f-mono); color: var(--ink-soft);
    letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: flex-end; padding: 9px; }
.b-story .plate.hot .q { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.b-story .p-mod .plate-in { grid-template-columns: repeat(5, 1fr); align-content: center; }
.b-story .p-mod .m { aspect-ratio: 1; border-radius: 9px; background: var(--mist); border: 1px solid #C6D6DE; }
.b-story .p-mod .m.o { background: var(--orange); border-color: var(--orange); }
.b-story .plate.hot .m:not(.o) { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); }
.b-story .p-bss .plate-in { grid-template-columns: repeat(3, 1fr); align-content: center; }
.b-story .p-bss .b { height: 34px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font: 500 10px/34px var(--f-mono);
    text-align: center; color: var(--ink-soft); letter-spacing: .08em; }
.b-story .plate.hot .b { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #fff; }
.b-story .pulse { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px 3px rgba(19, 142, 150, .45);
    left: var(--x); top: var(--y); opacity: 0; animation: bRise 3.8s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--dl); }
.b-story .pulse.o { background: var(--orange); box-shadow: 0 0 12px 3px rgba(235, 85, 44, .45); }
@keyframes bRise { 0% { transform: translateZ(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateZ(var(--top, 240px)); opacity: 0; } }
.b-story .chapters { position: relative; }
.b-story .chapter { min-height: 34vh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; opacity: .3; transition: opacity .6s ease; }
.b-story .chapter.on { opacity: 1; }
.b-story .chapter .k { font: 500 13px/1 var(--f-mono); color: var(--teal); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.b-story .chapter .k::before { content: ""; width: 28px; height: 1.5px; background: currentColor; transform-origin: left; transform: scaleX(.4); transition: transform .8s var(--ease-out); }
.b-story .chapter.on .k::before { transform: scaleX(1); }
.b-story .chapter h3 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; font-weight: 900; margin: 18px 0 16px; letter-spacing: -.03em; color: var(--navy); }
.b-story .chapter p { color: var(--ink-soft); font-size: 17px; max-width: 46ch; }
.b-story .chapter .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.b-story .chapter .chips span { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); padding: 8px 11px; border-radius: 999px; }
.b-story .loop { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; margin-top: 22px; align-items: center; justify-content: start; }
.b-story .loop span { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; padding: 9px 12px; border-radius: 8px; background: var(--mist); color: var(--navy); }
.b-story .progress { position: absolute; left: -28px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.b-story .progress i { position: absolute; inset: 0; background: linear-gradient(var(--teal), var(--orange)); transform-origin: top; transform: scaleY(var(--p, 0)); }
@media (max-width: 900px) {
    .b-story .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .b-story .stage { top: var(--nav-h, 80px); height: 44vh; z-index: 2; background: linear-gradient(#fff 80%, rgba(255, 255, 255, 0)); margin-inline: -20px; }
    .b-story .scene { width: min(240px, 56vw); }
    .b-story .plate { transform: translateZ(calc(var(--i) * 22px + var(--lift, 0px))); }
    .b-story .plate .lbl { font-size: 12px; left: 14px; bottom: 10px; }
    .b-story .plate .lbl small { font-size: 8px; margin-bottom: 4px; }
    .b-story .plate-in { inset: 14px 14px 44px; gap: 5px; }
    .b-story .p-inv .q, .b-story .p-bss .b { font-size: 7px; }
    .b-story .p-bss .b { height: 24px; line-height: 24px; }
    .b-story .chapter { min-height: 38vh; }
    .b-story .progress { display: none; }
}
@media (max-width: 900px) and (orientation: landscape) { .b-story .stage { height: 60vh; } }
@media (max-width: 400px) { .b-story .loop { gap: 6px; } .b-story .loop span { padding: 9px 9px; letter-spacing: .03em; } }

/* Home "See your network": the hero's light background around the navy panel */
html[data-blue] .final-cta-wrap { background: url('images/background.jpg') center / cover no-repeat, #D6E6F0; }

/* Home hero "See every ___": the typed word in a teal-to-blue gradient (orange was lost on the light
   background), with a teal caret */
html[data-blue] .b-hero .hero-kinetic .type-word { color: #138E96; background-image: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .04em; }
html[data-blue] .b-hero .hero-kinetic .type-word::after { background: #138E96; }

/* Home infinity loop: its blue strands lifted toward airforce blue (the SVG filter beside it) and smaller */
html[data-blue] .loop-stage { max-width: 620px; }
html[data-blue] .loop-stage video, html[data-blue] .loop-stage > img { filter: url(#bLoopTeal); }
html[data-blue] .loop-glow { width: min(500px, 80%); background: radial-gradient(ellipse at 50% 0%, rgba(230, 83, 43, .45) 0%, rgba(95, 153, 187, .4) 45%, transparent 72%); }

/* Home S2C Designer: image 86 (teal network mesh on black) as the background, with a light navy tint so the
   white text keeps reading on its brighter right side */
html[data-blue] .designer-zone { background: linear-gradient(90deg, rgba(2, 38, 63, .55) 0%, rgba(2, 38, 63, .30) 55%, rgba(2, 38, 63, .45) 100%),
    url('images/86.jpg') center / cover no-repeat, #02141f; }

/* The hero's teal-to-blue button gradient, shared by the menu bar's Contact Us (every page) and, on Home,
   Discover S2C Designer, See the ENE replacement, Browse all FAQs and Explore the Platform. White text, no outline. */
html[data-blue] :is(.site-nav button.cta-btn-secondary[onclick*="contact.html"], .hero-cta-main[onclick*="s2c-designer.html"], .hero-cta-main[onclick*="ericsson-network-engineer-replacement.html"],
    .faq-all-link, .final-cta .hero-cta-ghost) {
    background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%) !important; background-size: 140% 100% !important;
    background-position: 0 50% !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease; }
html[data-blue] :is(.site-nav button.cta-btn-secondary[onclick*="contact.html"], .hero-cta-main[onclick*="s2c-designer.html"], .hero-cta-main[onclick*="ericsson-network-engineer-replacement.html"],
    .faq-all-link, .final-cta .hero-cta-ghost):hover {
    background-position: 100% 50% !important; color: #fff !important; box-shadow: 0 14px 32px -12px rgba(31, 134, 166, .75); }
html[data-blue] :is(.site-nav button.cta-btn-secondary[onclick*="contact.html"], .faq-all-link, .final-cta .hero-cta-ghost) :is(i, .ti) { color: #fff !important; }
/* the menu bar button is small, so its shadow is too */
html[data-blue] .site-nav button.cta-btn-secondary[onclick*="contact.html"] { box-shadow: 0 6px 14px -8px rgba(31, 134, 166, .7); }

/* Layer story type in the site's own fonts instead of the reference's monospace: the chapter label set like our
   eyebrows (Lato black, 13px, wide caps), the body copy like our section intros (Lato light, 16px), and the
   pills, step tags and plate labels in Lato bold */
.b-story { --f-mono: 'Lato', sans-serif; }
.b-story .chapter .k { font: 900 13px/1 'Lato', sans-serif; letter-spacing: .22em; }
.b-story .chapter p { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.7; }
.b-story .chapter .chips span, .b-story .loop span { font: 700 12px/1 'Lato', sans-serif; letter-spacing: .03em; }
.b-story .plate .lbl small, .b-story .p-inv .q, .b-story .p-bss .b { font-weight: 900; }

/* The lit layer in the story takes the buttons' teal-to-blue gradient, with a glow to match */
.b-story .scene .plate.hot { background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); border-color: #3FA9C4;
    box-shadow: 0 0 0 1px rgba(63, 169, 196, .6), 0 0 60px rgba(31, 134, 166, .35), 0 34px 60px -24px rgba(2, 38, 63, .35); }

/* Home "Go deeper / Learn it. Your way.": the cards reversed to light. A white card, the picture still across the
   top half but fading into white, and the heading, text and link dark on light */
html[data-blue] .resource-card { background: #fff; border: 1px solid rgba(2, 38, 63, .08);
    box-shadow: 0 14px 34px -18px rgba(2, 38, 63, .25); }
html[data-blue] .resource-card:hover { box-shadow: 0 22px 44px -18px rgba(2, 38, 63, .3), 0 0 0 1px rgba(19, 142, 150, .35); }
html[data-blue] .resource-card h3 { color: #02263F; text-shadow: none; }
html[data-blue] .resource-card p { color: #3B5160; font-weight: 400; text-shadow: none; }
html[data-blue] .resource-card .mod-arrow { color: #138E96; text-shadow: none; }
html[data-blue] .resource-card:hover .mod-arrow { color: #2F5F9E; }
html[data-blue] .resource-card::after { display: none; }

/* Home ENE "Your migration path": a light migration console in the reference's card style (technical.html,
   reconciliation card). White card, big soft shadow, spaced-caps header and column heads, one row per stage
   with a thin progress bar and a tinted status pill (Queued mist, Running orange, Done teal), and a footer
   that counts the stages. The rows rise in one after another when the card first shows. */
.b-mig { width: 100%; max-width: 480px; justify-self: end; border-radius: 22px; background: #fff; border: 1px solid #E3E7EE; overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); }
.b-mig-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #E3E7EE;
    font: 900 10px/1.2 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A9AA8; white-space: nowrap; }
.b-mig-top b { color: #02263F; font-weight: 900; }
.b-mig-rows { display: grid; grid-template-columns: minmax(0, 1fr) 70px 104px; font-size: 13.5px; }
.b-mig-rows > div { padding: 9px 16px; border-bottom: 1px solid #EEF1F5; min-width: 0; display: flex; align-items: center; }
.b-mig-rows .h { font: 900 9.5px/1 'Lato', sans-serif; letter-spacing: .1em; overflow: visible; text-transform: uppercase; color: #8A9AA8; background: #F0F6FA; padding-block: 10px; }
.b-mig-rows .v { gap: 10px; font: 700 13.5px/1.3 'Lato', sans-serif; color: #5B6F7E; transition: color .4s; }
.b-mig-rows .v em { font: 900 10px/1 'Lato', sans-serif; font-style: normal; letter-spacing: .06em; color: #A9B8C3; width: 16px; flex-shrink: 0; transition: color .4s; }
.b-mig-rows .v.on { color: #02263F; }
.b-mig-rows .v.on em { color: #138E96; }
.b-mig-bar { padding-inline: 0 !important; }
.b-mig-bar i { position: relative; display: block; width: 100%; height: 6px; border-radius: 3px; background: #E5EDF2; overflow: hidden; }
.b-mig-bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #138E96, #3FC1C9);
    transform-origin: left; transform: scaleX(0); }
.b-mig-bar.run i::after { background: linear-gradient(90deg, #EB552C, #F2865F); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); transform: scaleX(1); }
.b-mig-bar.done i::after { transform: scaleX(1); }
.b-mig-st { justify-content: flex-end; }
.b-mig-rows .h:last-child { justify-content: flex-end; }
.b-mig-st span { font: 900 9.5px/1 'Lato', sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 5px 9px; white-space: nowrap; transition: background .3s, color .3s; }
.b-mig-st .q { background: #EEF2F5; color: #8A9AA8; }
.b-mig-st .run { background: rgba(235, 85, 44, .12); color: #EB552C; }
.b-mig-st .run::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: bMigPulse 1s ease-in-out infinite; }
.b-mig-st .ok { background: rgba(19, 142, 150, .1); color: #138E96; }
@keyframes bMigPulse { 50% { opacity: .25; } }
.b-mig-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.b-mig-foot span { font: 400 13px/1.3 'Lato', sans-serif; color: #3B5160; }
.b-mig-foot .b-mig-pct { font: 900 13px/1 'Lato', sans-serif; color: #fff; border-radius: 999px; padding: 8px 12px;
    background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); min-width: 52px; text-align: center; }
/* rows rise in one after another the first time the card shows (the page's own reveal adds .in) */
.b-mig .b-mig-rows > div:not(.h) { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1), color .4s;
    transition-delay: calc(var(--r, 0) * 60ms + 200ms); }
.b-mig.in .b-mig-rows > div:not(.h) { opacity: 1; transform: none; }
@media (max-width: 900px) { .b-mig { max-width: none; justify-self: stretch; } }
@media (max-width: 480px) { .b-mig-rows { grid-template-columns: minmax(0, 1fr) 50px 96px; } .b-mig-rows > div { padding: 8px 10px; } .b-mig-rows .v { font-size: 12.5px; } }

/* Home customer quotes, as on the neutral version: an "In their own words." heading and all six quotes at once
   as quiet white cards, each with a coloured quote mark, the customer's name and its logo (grey until hover).
   The four card colours repeat: teal, orange, airforce blue, navy. */
html[data-blue] .b-quotes-zone { background: #fff; padding: 100px 0 90px; }
html[data-blue] .b-quotes-zone .blog-oversize-heading { margin-bottom: clamp(28px, 4vw, 48px); }
html[data-blue] .b-quotes-zone .blog-oversize-heading em { background-image: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.b-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.b-qcard { margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 28px 22px; border-radius: 20px;
    background: #fff; border: 1px solid #E3E7EE; box-shadow: 0 2px 12px rgba(2, 38, 63, .04); transition: box-shadow .4s ease, border-color .3s ease; }
.b-qcard:hover { box-shadow: 0 24px 60px -30px rgba(2, 38, 63, .35); border-color: var(--tone); }
.b-qcard .b-qm { font: 400 64px/.6 'Cormorant Garamond', Georgia, serif; color: var(--tone); height: 28px; margin-bottom: 10px; }
.b-qcard blockquote { margin: 0; padding: 0; font: italic 400 20px/1.45 'Cormorant Garamond', Georgia, serif; color: #02263F; flex: 1; }
.b-qcard figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #E3E7EE; }
.b-qcard .b-qorg { font: 700 13px/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tone); }
.b-qcard .b-qlogo { height: 24px; width: auto; max-width: 96px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s ease, opacity .3s ease; }
.b-qcard:hover .b-qlogo { filter: none; opacity: 1; }
html[data-blue] .b-quotes-more { text-align: center; }
html[data-blue] .b-quotes-more .spot-all { margin-top: 34px; color: #fff; border: 0;
    background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); background-size: 140% 100%; background-position: 0 50%;
    box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .3s ease; }
html[data-blue] .b-quotes-more .spot-all:hover { color: #fff; background-position: 100% 50%; }
@media (max-width: 980px) { .b-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .b-quotes { grid-template-columns: minmax(0, 1fr); } }

/* Home "Three superpowers": the neutral version's cards. White cards, each with its own colour in a thin gradient
   edge, a soft wash in the top corner, a gradient icon tile, a gradient title and matching ticks and link:
   platform teal, AI airforce blue into navy, Designer orange */
html[data-blue] .pillars-grid > .pillar-card:nth-child(1) { --sp: #138E96; --sp-rgb: 19, 142, 150; --sp-g: linear-gradient(135deg, #1AA3AC, #0B5E66); }
html[data-blue] .pillars-grid > .pillar-card:nth-child(2) { --sp: #5F99BB; --sp-rgb: 95, 153, 187; --sp-g: linear-gradient(135deg, #5F99BB, #02263F); }
html[data-blue] .pillars-grid > .pillar-card:nth-child(3) { --sp: #C9441F; --sp-rgb: 235, 85, 44; --sp-g: linear-gradient(135deg, #F2865F, #C53D1B); }
html[data-blue] .pillars-zone .pillars-grid > .pillar-card { border: 1.5px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    background: radial-gradient(120% 70% at 100% 0%, rgba(var(--sp-rgb), .10), rgba(var(--sp-rgb), 0) 60%) padding-box, linear-gradient(#fff, #fff) padding-box, var(--sp-g) border-box;
    box-shadow: 0 18px 40px -26px rgba(var(--sp-rgb), .55); }
html[data-blue] .pillars-zone .pillars-grid > .pillar-card:hover { box-shadow: 0 28px 56px -26px rgba(var(--sp-rgb), .65); }
html[data-blue] .pillars-zone .pillar-card .pillar-icon { background: var(--sp-g); color: #fff; border-color: transparent; box-shadow: 0 10px 20px -10px rgba(var(--sp-rgb), .8); }
html[data-blue] .pillars-zone .pillar-card .pillar-kicker { color: var(--sp); }
html[data-blue] .pillars-zone .pillar-card h3 { background-image: var(--sp-g); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
html[data-blue] .pillars-zone .pillar-card > p, html[data-blue] .pillars-zone .pillar-list li { color: #3B5160; }
html[data-blue] .pillars-zone .pillar-card :is(.pillar-list .ti, .pillar-link, .pillar-link .ti),
html[data-blue] .pillars-zone .pillar-card:hover .pillar-link { color: var(--sp); }

/* Home S2C Designer: the Design / Automate / Deploy tiles in their three colours (navy, deep teal, teal), with the
   number beside the step name, the same style as the steps on the S2C Designer page (.b-step-head) */
html[data-blue] .designer-zone .dz-step { background: var(--c); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 26px 26px 24px;
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
html[data-blue] .designer-zone .dz-step .n { margin: 0; font-weight: 300; font-size: 2rem; line-height: 1; color: rgba(255, 255, 255, .45); }
html[data-blue] .designer-zone .dz-step h3 { margin: 0; color: #fff; font-weight: 900; font-size: clamp(1.9rem, 2.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; }
html[data-blue] .designer-zone .dz-step p { grid-column: 1 / -1; margin: 12px 0 0; color: rgba(255, 255, 255, .9); font-size: 16px; font-weight: 300; line-height: 1.6; }

/* Migration console, angled and floating like the layer stack: seen from the side and slightly from above,
   a little see-through so the section shows behind it, and gently bobbing. The stage that is running lifts
   out with a soft orange wash, so the eye follows the run from stage 1 to stage 9. */
.b-mig-stage { width: 100%; max-width: 480px; justify-self: end; perspective: 1500px; perspective-origin: 30% 40%; }
.b-mig-stage .b-mig { max-width: none; background: rgba(255, 255, 255, .58); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-color: rgba(255, 255, 255, .5); transform-origin: 50% 50%;
    transform: rotateX(16deg) rotateY(-20deg) rotateZ(2deg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 30px 50px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    animation: bMigFloat 9s ease-in-out infinite; }
@keyframes bMigFloat {
    0%, 100% { transform: rotateX(16deg) rotateY(-20deg) rotateZ(2deg) translate3d(0, 0, 0); }
    50% { transform: rotateX(15deg) rotateY(-19deg) rotateZ(1.8deg) translate3d(0, -5px, 0); }
}
.b-mig-stage .b-mig-rows .h { background: rgba(240, 246, 250, .3); }
.b-mig-stage .b-mig-top { border-bottom-color: rgba(2, 38, 63, .08); }
.b-mig-stage .b-mig-st .q { background: rgba(238, 242, 245, .55); }
.b-mig-stage .b-mig-bar i { background: rgba(229, 237, 242, .6); }
.b-mig-stage .b-mig-rows > div { border-bottom-color: rgba(2, 38, 63, .06); transition: background .4s ease, opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1), color .4s; }
.b-mig-stage .b-mig-rows > div.live { background: rgba(235, 85, 44, .07); }
.b-mig-stage .b-mig-rows > .v.live { box-shadow: inset 3px 0 0 #EB552C; color: #02263F; }
/* rows rise in once the wrapper is revealed */
.b-mig-stage.in .b-mig-rows > div:not(.h) { opacity: 1; transform: none; }
@media (max-width: 900px) {
    .b-mig-stage { max-width: none; justify-self: stretch; }
    .b-mig-stage .b-mig { animation: none; transform: rotateX(8deg); }
}
/* keep the staggered rise-in: only opacity and movement wait their turn, the running-row wash changes at once */
.b-mig-stage .b-mig-rows > div:not(.h) { transition-delay: 0s, calc(var(--r, 0) * 60ms + 200ms), calc(var(--r, 0) * 60ms + 200ms), 0s; }
/* on the more see-through card the small grey labels darken a touch so they still read */
.b-mig-stage :is(.b-mig-top, .b-mig-rows .h, .b-mig-st .q) { color: #4F6474; }
.b-mig-stage .b-mig-rows .v:not(.on) { color: #3F5566; }

/* Home AI Assistant video: the neutral version's quiet tint. The video turns grey and a light teal-to-navy wash
   is multiplied over it; both lift while the video plays */
html[data-blue] .ai-video-ph video { filter: grayscale(1) contrast(.92) brightness(1.05); transition: filter .6s ease; }
html[data-blue] .ai-video-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
    background: linear-gradient(160deg, rgba(19, 142, 150, .26), rgba(2, 38, 63, .42)); mix-blend-mode: multiply; transition: opacity .6s ease; }
html[data-blue] .ai-video-ph.playing video { filter: none; }
html[data-blue] .ai-video-ph.playing::after { opacity: 0; }
html[data-blue] .ai-video-ph .vp-play { z-index: 2; }

/* Home AI Assistant chat: the same light, angled, floating glass as the migration card. The window leans back,
   is part see-through, bobs gently, and its bubbles, input and avatar move to white glass, navy text and the
   teal-to-blue gradient. The script that types the conversation is unchanged. */
html[data-blue] .ai-grid > div:last-child { perspective: 1500px; perspective-origin: 30% 40%; }
html[data-blue] .ai-chat { margin: 0; background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .7);
    backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 30px 50px 80px -30px rgba(2, 38, 63, .45), 0 0 0 1px rgba(2, 38, 63, .05);
    transform: rotateX(14deg) rotateY(-18deg) rotateZ(1.5deg); animation: bChatFloat 9s ease-in-out infinite; }
@keyframes bChatFloat {
    0%, 100% { transform: rotateX(14deg) rotateY(-18deg) rotateZ(1.5deg) translate3d(0, 0, 0); }
    50% { transform: rotateX(13deg) rotateY(-17deg) rotateZ(1.3deg) translate3d(0, -5px, 0); }
}
html[data-blue] .ai-chat-bar { background: rgba(240, 246, 250, .45); border-bottom-color: rgba(2, 38, 63, .08); }
html[data-blue] .ai-chat-bar .ai-avatar { background: linear-gradient(135deg, #138E96, #2F5F9E); box-shadow: 0 6px 14px -6px rgba(31, 134, 166, .7); }
html[data-blue] .ai-chat-bar :is(h3, h5) { color: #02263F; }
html[data-blue] .ai-chat-bar span { color: #138E96; }
html[data-blue] .ai-chat-bar span::before { background: #138E96; }
html[data-blue] .ai-chat-bar .bar-meta i { background: rgba(2, 38, 63, .14); }
html[data-blue] .chat-msg.user { background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); border: 0; color: #fff;
    box-shadow: 0 8px 18px -10px rgba(31, 134, 166, .7); }
html[data-blue] .chat-msg.bot { background: rgba(255, 255, 255, .82); border: 1px solid rgba(19, 142, 150, .18); color: #3B5160; font-weight: 400;
    box-shadow: 0 8px 20px -14px rgba(2, 38, 63, .35); }
html[data-blue] .chat-msg.bot strong { color: #02263F; }
html[data-blue] .chat-msg.bot .ti { color: #138E96; }
html[data-blue] .chat-typing { background: rgba(255, 255, 255, .82); border-color: rgba(19, 142, 150, .18); }
html[data-blue] .chat-typing i { background: #138E96; }
html[data-blue] .ai-chat-input { background: rgba(255, 255, 255, .7); border-color: rgba(95, 153, 187, .4); }
html[data-blue] .ai-chat-input .cursor-line { color: #3F5566; }
html[data-blue] .ai-chat-input .cursor-line::after { background: #138E96; }
html[data-blue] .ai-chat-input .send-orb { background: linear-gradient(135deg, #138E96, #2F5F9E); box-shadow: 0 6px 14px -6px rgba(31, 134, 166, .7); }
@media (max-width: 900px) { html[data-blue] .ai-chat { animation: none; transform: rotateX(6deg); } }

/* AI chat, smaller and more see-through: narrower window set to the right of its column, a shorter thread,
   slightly smaller text, and lighter glass on the window, header, answer bubbles and input */
html[data-blue] .ai-grid > div:last-child { display: flex; justify-content: flex-end; }
html[data-blue] .ai-chat { width: 100%; max-width: 440px; background: rgba(255, 255, 255, .4); border-color: rgba(255, 255, 255, .55); }
html[data-blue] .ai-chat-bar { padding: 13px 18px; background: rgba(240, 246, 250, .25); }
html[data-blue] .ai-chat-body { height: 310px; padding: 20px 18px; gap: 12px; }
html[data-blue] .chat-msg { font-size: .82rem; padding: 11px 15px; }
html[data-blue] .chat-msg.bot, html[data-blue] .chat-typing { background: rgba(255, 255, 255, .62); }
html[data-blue] .ai-chat-input { margin: 0 18px 18px; padding: 11px 16px; background: rgba(255, 255, 255, .5); }
html[data-blue] .ai-chat-input .cursor-line { font-size: .82rem; }
@media (max-width: 900px) { html[data-blue] .ai-grid > div:last-child { justify-content: center; } html[data-blue] .ai-chat { max-width: 520px; } }

/* Migration card, light and airy on the navy: see-through white turned grey over the dark section, so the card is
   now near-solid bright white, with a soft white and teal glow around it
   and a lighter, wider shadow, so it reads as a light panel floating above the section */
.b-mig-stage .b-mig { background: linear-gradient(160deg, #FFFFFF 0%, rgba(255, 255, 255, .985) 55%, rgba(244, 250, 253, .97) 100%);
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(255, 255, 255, .25), 0 0 60px rgba(173, 221, 246, .28), 0 0 120px rgba(63, 193, 201, .12),
        30px 60px 90px -40px rgba(0, 0, 0, .45); }
.b-mig-stage .b-mig-rows .h { background: #F0F6FA; }
.b-mig-stage .b-mig-top { border-bottom-color: rgba(2, 38, 63, .06); }
.b-mig-stage .b-mig-rows > div { border-bottom-color: rgba(2, 38, 63, .05); }
.b-mig-stage .b-mig-st .q { background: #EEF3F7; }
.b-mig-stage .b-mig-bar i { background: #E5EDF2; }
.b-mig-stage :is(.b-mig-top, .b-mig-rows .h, .b-mig-st .q) { color: #7A8E9C; }
.b-mig-stage .b-mig-rows .v:not(.on) { color: #5B6F7E; }

/* Menu bar, tighter and bolder: less padding between the menu headings so they can be larger, and a bigger
   Service2Create wordmark; each width band keeps everything on one line */
html[data-blue] .site-nav .nav-center { gap: 0; margin: 0 4px; }
html[data-blue] .site-nav .nav-item { padding: 8px 7px; font-size: .8rem; gap: 3px; }
html[data-blue] .site-nav .nav-right { gap: 6px; }
html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 34px; }
@media (max-width: 1360px) {
    html[data-blue] .site-nav .nav-item { padding: 8px 4px; font-size: .74rem; }
    html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 22px; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
    html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 15px; }
}
@media (min-width: 1361px) and (max-width: 1480px) {
    html[data-blue] .site-nav .nav-item { padding: 8px 5px; font-size: .76rem; }
    html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 30px; }
}

/* Menu bar right-hand side: language and search are both just their icon, in matching round buttons; clicking
   the search icon opens the site's full search panel under the bar, as before */
html[data-blue] .site-nav .lang-btn { font-size: 0; gap: 0; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
html[data-blue] .site-nav .lang-btn .ti-world { font-size: 1.1rem; }
html[data-blue] .site-nav .lang-btn .ti-chevrons-down { display: none; }
html[data-blue] .site-nav .nav-search-input { box-sizing: border-box; width: 36px; height: 36px; padding: 0 0 0 34px; border-radius: 18px; cursor: pointer; transition: width .25s ease, border-color .2s, background .2s; }
html[data-blue] .site-nav .nav-search-input::placeholder { color: transparent; }
html[data-blue] .site-nav .nav-search-input:focus { width: 36px; padding-right: 0; }
html[data-blue] .site-nav .nav-search-wrap .ti-search { left: 10px; font-size: 1rem; color: #02263F; }
/* phones: the wordmark sits small under the VC4 logo again, as on the main site, so Contact Us, search and the menu button fit */
@media (max-width: 680px) {
    html[data-blue] .site-nav .nav-logo { flex-direction: column; align-items: flex-start; gap: 3px; margin-right: 8px; }
    html[data-blue] .site-nav .nav-logo img:not(.nav-logo-s2c) { height: 24px; }
    html[data-blue] .site-nav .nav-logo img.nav-logo-s2c { height: 10px; margin-top: 3px; padding-left: 0; border-left: 0; }
}

/* Menu bar: the language and search buttons are both filled with light alice blue */
html[data-blue]:not([data-theme="dark"]) .site-nav :is(.lang-btn, .nav-search-input) { background: #F0F8FF; }

/* Home hero heading, bigger so it is not smaller than the next section's: the screen column gives up a little room
   (520px instead of 660px) so the three lines can grow to about 62px and still each fit on one line */
@media (min-width: 1025px) { html[data-blue] .b-hero .hero-bottom { grid-template-columns: minmax(0, 1fr) min(38%, 520px); gap: 48px; } }
html[data-blue] .b-hero .hero-heading { font-size: clamp(2.3rem, 4.3vw, 62px); line-height: 1.06; }
@media (min-width: 1025px) and (max-width: 1200px) { html[data-blue] .b-hero .hero-heading { font-size: 3.8vw; } }

/* Market Overview: image 51 (navy network mesh) in the hero and the bottom "Don't see your market?" tile, the same way
   in both: pushed well to the right so the mesh sits beside the copy, softly blurred and half see-through over a mid
   navy-blue, with only a light navy wash on the left behind the text */
html[data-blue] .hero-zone .hero-bg:has(> .hero-media[src*="51.jpg"]) { background: linear-gradient(100deg, #02263F 0%, #0B3554 55%, #0E4A75 100%); }
html[data-blue] .hero-zone .hero-bg > .hero-media[src*="51.jpg"] { left: 32%; width: 68%; object-position: left center; filter: blur(1.2px); opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
html[data-blue] .hero-zone .hero-bg:has(> .hero-media[src*="51.jpg"])::after { background: linear-gradient(90deg, rgba(2, 38, 63, .38) 0%, rgba(2, 38, 63, .14) 40%, rgba(2, 38, 63, 0) 65%); }
html[data-blue] .cta-band-bg.b-img-51 { background: linear-gradient(100deg, #02263F 0%, #0B3554 55%, #0E4A75 100%); }
html[data-blue] .cta-band-bg.b-img-51::before { left: 32%; background: url('images/51.jpg') left center / cover no-repeat; filter: blur(1.2px); opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
html[data-blue] .cta-band-bg.b-img-51::after { background: linear-gradient(100deg, rgba(2, 38, 63, .38) 0%, rgba(2, 38, 63, .14) 40%, rgba(2, 38, 63, 0) 65%); }

/* Technical: the bottom "Ask a VC4 Service2Create Professional" box on image 49 (text removed), like the hero */
html[data-blue] .newsletter-strip.b-img-49::before { background-image: url('images/49-clean.jpg'); background-position: center right; }
/* Technical "Deployment & Resources": blues instead of the purple picture, a deep prussian-to-blue band with a
   soft teal light, and the two purple card pictures turned to blue */
html[data-blue] .blog-deploy-zone { background: radial-gradient(70% 60% at 85% 10%, rgba(63, 193, 201, .18), rgba(63, 193, 201, 0) 60%),
    linear-gradient(160deg, #02263F 0%, #0C456F 45%, #1A6394 80%, #0E4A75 100%) !important; }
html[data-blue] .blog-deploy-zone .article-card:nth-child(-n+2) .card-img-inner { filter: hue-rotate(-50deg) saturate(.9); }

/* S2C Designer: Explore Service2Create (Design meets inventory & GIS) and the hero's Download a brochure in the
   teal-to-blue gradient of Contact Us */
html[data-blue] :is(#s2c .btn-demo[href*="service2create.html"], .hero-btns .btn-demo[href*="resources.html"]) { background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%) !important; background-size: 140% 100% !important;
    background-position: 0 50% !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .3s ease; }
html[data-blue] :is(#s2c .btn-demo[href*="service2create.html"], .hero-btns .btn-demo[href*="resources.html"]):hover { background-position: 100% 50% !important; color: #fff !important; }
html[data-blue] :is(#s2c .btn-demo[href*="service2create.html"], .hero-btns .btn-demo[href*="resources.html"]) .ti { color: #fff !important; }

/* S2C Designer video: the Home screen style, about two thirds of its old width and centred; flat while playing */
html[data-blue] .b-scr-dz { max-width: 640px; margin: 0 auto 8px; }
html[data-blue] .b-scr-dz .b-scr-in.playing { transform: none; }
html[data-blue] .b-scr-dz .b-scr-v video { object-fit: cover; }
html[data-blue] .b-scr-dz #designer-video-btn { z-index: 2; }

/* Technical hero: the reference site's 3D stack (blue/blue-tech3d.js) on the right of the hero, beside the copy.
   Scene box and labels are the reference's own styles (site.css: scene3d, tags), with its colour tokens written out */
.b-scene { position: absolute; top: 40px; bottom: 0; right: max(-2%, calc((100vw - 1680px) / 2)); width: min(62%, 1000px); z-index: 1; pointer-events: none; }
.b-scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease .2s; }
.b-scene.ready canvas { opacity: 1; }
.b-scene.no3d { background: center / contain no-repeat content-box; padding: 5% 7% 9%; box-sizing: border-box; }
.b-scene.no3d .tag, .b-scene.no3d canvas { display: none; }
.b-scene .tags { position: absolute; inset: 0; pointer-events: none; }
.b-scene .tag { position: absolute; left: 0; top: 0; will-change: transform; opacity: 0; transition: opacity .6s ease; }
.b-scene.ready .tag { opacity: 1; }
.b-scene .tag .in { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.b-scene .tag .card { background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(2, 38, 63, .07); border-radius: 12px; padding: 8px 12px 9px; box-shadow: 0 14px 34px -12px rgba(2, 38, 63, .32);
    white-space: nowrap; transform-origin: bottom center; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s, opacity .45s ease; }
.b-scene .tag .pin, .b-scene .tag .pin::after { transition: background .4s, transform .4s, box-shadow .4s; }
.b-scene .tag small { display: block; font: 900 9.5px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #138E96; }
.b-scene .tag b { display: block; font: 700 13.5px/1.2 'Lato', sans-serif; margin-top: 5px; letter-spacing: -.01em; color: #02263F; }
.b-scene .tag .st { display: flex; align-items: center; gap: 6px; font: 400 12px/1.2 'Lato', sans-serif; color: #3B5160; max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .5s cubic-bezier(.16, 1, .3, 1), opacity .4s, margin .5s; }
.b-scene .tag .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #138E96; flex: none; }
.b-scene .tag.on .st { max-height: 22px; opacity: 1; margin-top: 4px; }
.b-scene .tag.on .card { transform: none; box-shadow: 0 20px 44px -12px rgba(2, 38, 63, .38); }
.b-scene .tag .pin { width: 1.5px; height: 30px; background: linear-gradient(#138E96, rgba(19, 142, 150, .2)); }
.b-scene .tag .pin::after { content: ""; display: block; width: 9px; height: 9px; margin: 26px 0 0 -3.75px; border-radius: 50%; background: #fff; border: 2px solid #138E96; }
.b-scene .tag:not(.on) .card { opacity: 0; transform: translateY(10px) scale(.9); }
.b-scene .tag:not(.on) .pin { background: transparent; }
.b-scene .tag:not(.on) .pin::after { transform: scale(.8); box-shadow: 0 0 0 5px rgba(19, 142, 150, .14); }
.b-scene .tag.warn small { color: #EB552C; } .b-scene .tag.warn .st::before { background: #EB552C; }
.b-scene .tag.warn .pin { background: linear-gradient(#EB552C, rgba(235, 85, 44, .2)); } .b-scene .tag.warn .pin::after { border-color: #EB552C; }
/* the copy keeps to the left so the stack has room beside it */
html[data-blue] .blog-hero .b-scene-copy { max-width: 560px; position: relative; z-index: 2; }
@media (max-width: 900px) {
    .b-scene { position: relative; top: auto; right: auto; width: auto; height: min(100vw, 480px); margin-top: -20px; }
    .b-scene .tag .in { transform: translateX(-50%) scale(.78); transform-origin: 50% 100%; }
}

/* S2C Platform hero on Team 3 (light sky-blue gradient), set up like the Home hero: no navy tint over the picture,
   navy and airforce-blue heading with the colour wordmark, navy intro, and the teal-to-blue Explore button */
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) { background: #D6E6F0; }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"])::after { background: none; }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) .hero-heading .fancy-line { color: #2F78A8; }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) .hero-sub { color: rgba(2, 38, 63, .86); }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) .hero-sub strong { color: #0B5E66; }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) .hero-cta-ghost { color: #fff; border: 0;
    background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); background-size: 140% 100%; background-position: 0 50%;
    box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .3s ease; }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) .hero-cta-ghost:hover { color: #fff; background-position: 100% 50%; }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) .hero-cta-ghost .ti { color: #fff; }
html[data-blue] .s2c-hero:has(> .hero-media[src*="Team3"]) :is(.hero-heading, .hero-heading *, .hero-sub) { text-shadow: none; }
html[data-blue] body:has(.s2c-hero > .hero-media[src*="Team3"]) .hero-breadcrumb * { color: rgba(2, 38, 63, .7) !important; }

/* S2C Platform "S2C Designer meets GIS": the S2C Designer page's hero picture as the background */
html[data-blue] #s2c-designer-gis::before { background: url('../images/s2cdesigner/s2c-designer-network-planning-hero-wide-flipped.webp') center center / cover no-repeat; }

/* New screenshots fitted into device mockup pictures (blue/blue-screens.js sizes and places them): Home's "See it
   in action" monitors and the S2C Platform hero devices. The mockup and its screen layers sit in one wrapper, so
   any zoom or entrance animation moves them together */
.b-swap .b-swap-in { position: relative; transition: transform .6s ease; }
.film-card:hover .b-swap .b-swap-in { transform: scale(1.04); }
.film-card:hover .b-swap img { transform: none; }
.b-swap .b-swap-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.b-swap .b-swap-layer { position: absolute; inset: 0; }
.b-swap .b-swap-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff left top / cover no-repeat; }
/* S2C Platform hero: the wrapper takes over the picture's size, shadow and entrance from the page's own styles */
html[data-blue] .hero-visual .b-swap-hero { position: relative; z-index: 1; width: 100%; max-width: none; margin-right: -8%; align-self: flex-end; animation: fadeUp 1.1s ease .55s backwards; }
html[data-blue] .hero-visual .b-swap-hero img { width: 100%; animation: none; }

/* S2C Platform hero heading: the Service2Create wordmark a little smaller, in proportion to "Manage your network" */
html[data-blue] .s2c-hero .hero-heading .h-with img { height: .92em; }

/* Technical topic cards and their expanded tiles: the device mockups carry new screenshots (blue/blue-screens.js).
   The mockup sits full width and centred, as the old cover / contain background did */
html[data-blue] .b-swap-mock { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
html[data-blue] .b-swap-mock img { display: block; width: 100%; height: auto; max-width: none; }
html[data-blue] .te-img.b-te-swap { position: relative; overflow: hidden; }

/* Technical hero: image 49 pushed well over to the right so only a little of its streaks show, faded in from the left
   over a prussian-to-blue ground, with a blue wash over the whole picture */
html[data-blue] .blog-hero:has(> .blog-hero-bg[src*="49-clean"]) { background: linear-gradient(100deg, #02263F 0%, #0B3554 55%, #0E4A75 100%); }
html[data-blue] .blog-hero > .blog-hero-bg[src*="49-clean"] { left: 46%; width: 54%; object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
html[data-blue] .blog-hero:has(> .blog-hero-bg[src*="49-clean"]) > .blog-hero-overlay {
    background: linear-gradient(180deg, rgba(2, 38, 63, 0) 55%, rgba(2, 38, 63, .55) 100%), linear-gradient(90deg, rgba(2, 38, 63, .5) 0%, rgba(11, 53, 84, .4) 50%, rgba(14, 74, 117, .42) 100%); }
/* "Request the Product Description" in the teal-to-blue gradient of the secondary buttons */
html[data-blue] .hero-cta-row .hero-btn[href*="product-description"] { background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); background-size: 140% 100%;
    background-position: 0 50%; color: #fff; box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .2s ease; }
html[data-blue] .hero-cta-row .hero-btn[href*="product-description"]:hover { background-position: 100% 50%; box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .8); }

/* S2C Platform closing panel (tagline + copy): full width instead of the Home globe panel's 54% column, each tagline
   line on one line, and the hero's Team 3 picture behind it under a navy wash that clears to the right */
html[data-blue] .final-cta:has(.final-cta-grid) { background: linear-gradient(100deg, rgba(2, 38, 63, .97) 0%, rgba(2, 38, 63, .9) 45%, rgba(2, 38, 63, .55) 100%),
    url('images/Team3.jpg') center / cover no-repeat; }
html[data-blue] .final-cta > .final-cta-grid { max-width: none; grid-template-columns: auto minmax(0, 520px); gap: 64px; justify-content: start; }
html[data-blue] .final-cta .fc-tag-line { white-space: nowrap; }
@media (max-width: 1000px) { html[data-blue] .final-cta > .final-cta-grid { grid-template-columns: 1fr; gap: 30px; } }
/* Telecom Equipment Types card: its mockup was sized to 136% of the picture height, kept that way */
html[data-blue] #equipment-types .b-swap-mock { left: 50%; right: auto; width: auto; height: 136%; aspect-ratio: 1230 / 1136; transform: translate(-50%, -50%); }
html[data-blue] #equipment-types .b-swap-mock img { height: 100%; }
/* S2C Platform hero: the device picture lifted beside the short wordmark line so it is in view on laptop-height screens */
@media (min-width: 1025px) { html[data-blue] .s2c-hero .hero-visual { margin-top: -216px; } }
/* the hero picture carries z-index 1 from the page styles, so the fitted screens sit above it */
html[data-blue] .hero-visual .b-swap-hero .b-swap-stage { z-index: 2; }
/* S2C Platform AI Assistant video: the Home treatment, grey under a light teal-to-navy wash that lifts while it plays */
html[data-blue] .video-ph:has(> #ai-video) video { filter: grayscale(1) contrast(.92) brightness(1.05); transition: filter .6s ease; }
html[data-blue] .video-ph:has(> #ai-video)::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
    background: linear-gradient(160deg, rgba(19, 142, 150, .26), rgba(2, 38, 63, .42)); mix-blend-mode: multiply; transition: opacity .6s ease; }
html[data-blue] .video-ph.playing:has(> #ai-video) video { filter: none; }
html[data-blue] .video-ph.playing:has(> #ai-video)::after { opacity: 0; }
html[data-blue] .video-ph:has(> #ai-video) .vp-play { z-index: 2; }

/* AI + MCP Interface page (blue/ai.html) */
/* draft marker on statements Mike still has to confirm; remove the span once the wording is signed off */
.b-mike { display: inline-block; vertical-align: middle; margin: 0 4px; padding: 2px 9px; border-radius: 99px; background: #FFE7A3; color: #6B4A00;
    font: 700 10px/1.5 'Lato', sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* the AI video, as on Home: wide player, grey under the teal-to-navy wash until it plays */
html[data-blue] .feature-grid .ai-video-ph { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #011a2e;
    border: 1px solid rgba(95, 153, 187, .22); box-shadow: 0 24px 60px rgba(1, 16, 28, .45); display: flex; align-items: center; justify-content: center; }
html[data-blue] .feature-grid .ai-video-ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
html[data-blue] .feature-grid .ai-video-ph .vp-play { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(230, 83, 43, .5); transition: transform .25s, opacity .3s; }
html[data-blue] .feature-grid .ai-video-ph .vp-play i { margin-left: 3px; }
html[data-blue] .feature-grid .ai-video-ph:hover .vp-play { transform: scale(1.12); }
html[data-blue] .feature-grid .ai-video-ph .vp-play.hidden { opacity: 0; pointer-events: none; }
/* how a question travels from an AI tool through MCP to Service2Create: three floating cards joined by labelled links */
.b-mcp-flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 460px; margin: 0 auto; }
.b-mcp-node { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 18px 22px; border-radius: 18px;
    background: rgba(255, 255, 255, .78); border: 1px solid rgba(95, 153, 187, .28); box-shadow: 0 22px 44px -22px rgba(2, 38, 63, .35);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.b-mcp-node:nth-child(1) { transform: none; }
.b-mcp-node:nth-child(5) { transform: none; }
.b-mcp-node > i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
    color: #fff; background: linear-gradient(140deg, #5F99BB, #2F5F9E); }
.b-mcp-node b { font: 800 15px/1.3 'Lato', sans-serif; color: #02263F; }
.b-mcp-node span { font: 400 13px/1.45 'Lato', sans-serif; color: rgba(2, 38, 63, .72); }
.b-mcp-node.is-mcp { background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); border-color: transparent; box-shadow: 0 26px 50px -22px rgba(31, 134, 166, .7); }
.b-mcp-node.is-mcp > i { background: rgba(255, 255, 255, .18); }
.b-mcp-node.is-mcp b, .b-mcp-node.is-mcp span { color: #fff; }
.b-mcp-node.is-s2c { grid-template-columns: 1fr; row-gap: 8px; background: #02263F; border-color: transparent; }
.b-mcp-node.is-s2c img { height: 26px; width: auto; }
.b-mcp-node.is-s2c span { color: rgba(214, 230, 240, .85); }
.b-mcp-link { position: relative; height: 54px; display: flex; align-items: center; justify-content: center; }
.b-mcp-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, #138E96 0 6px, transparent 6px 11px); animation: b-mcp-flow 1.2s linear infinite; }
.b-mcp-link span { position: relative; padding: 3px 12px; border-radius: 99px; background: #fff; border: 1px solid rgba(19, 142, 150, .35);
    font: 800 11px/1.4 'Lato', sans-serif; letter-spacing: .12em; color: #0B5E66; }
@keyframes b-mcp-flow { to { background-position: 0 11px; } }
/* the permissions screen in the iMac */
html[data-blue] .feature-shot.b-ai-shot { position: relative; }
html[data-blue] .feature-shot.b-ai-shot .b-swap-mock { position: relative; top: auto; transform: none; }

/* Market industry pages: the bottom "See S2C on your network" tile on the Team 3 picture, under a navy wash on the
   left so the white copy still reads */
html[data-blue] .cta-band-bg.b-img-team3::before { background: url('images/Team3.jpg') center / cover no-repeat; }
html[data-blue] .cta-band-bg.b-img-team3::after { background: linear-gradient(100deg, rgba(2, 38, 63, .82) 0%, rgba(2, 38, 63, .55) 45%, rgba(2, 38, 63, .2) 80%, rgba(2, 38, 63, .1) 100%); }/* its outline button would vanish on the light part of the picture, so it takes the teal-to-blue gradient */
html[data-blue] .cta-band:has(.b-img-team3) .btn-lg.ghost { background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); background-size: 140% 100%; background-position: 0 50%;
    color: #fff; border-color: transparent; box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .2s ease; }
html[data-blue] .cta-band:has(.b-img-team3) .btn-lg.ghost:hover { background-position: 100% 50%; color: #fff; }
html[data-blue] .cta-band:has(.b-img-team3) .btn-lg.ghost .ti { color: #fff; }
/* ================= Main-page heroes: the reference site's plain heading, a calm faded background, its animation =================
   Plain H1 (reference .hero-3d h1): one sans line in navy, the closing phrase in an <em> in a teal-to-navy gradient,
   no italic serif. blue/blue-h1.js wraps the words so they rise in one after another. Lato, the site font, stands in
   for the reference's Sora. Markup: <h1 class="b-h1">Opening words <em>closing phrase.</em></h1> */
html[data-blue] h1.b-h1 { font-family: 'Lato', sans-serif !important; font-weight: 800 !important; font-style: normal !important;
    font-size: clamp(34px, 3.5vw, 50px) !important; line-height: 1.05 !important; letter-spacing: -.035em !important;
    color: #02263F !important; text-shadow: none !important; margin: 20px 0 22px !important; text-wrap: balance; text-transform: none !important; }
html[data-blue] h1.b-h1 em { font-style: normal !important; font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important; color: inherit; }
html[data-blue] h1.b-h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
html[data-blue] h1.b-h1 .w > span { display: inline-block; transform: translateY(108%); animation: bWordUp 1.1s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: calc(var(--i) * 65ms + 150ms); }
html[data-blue] h1.b-h1 em .w > span { background: linear-gradient(100deg, #138E96 10%, #02263F 95%); -webkit-background-clip: text; background-clip: text;
    color: transparent; padding-right: .04em; }
@keyframes bWordUp { to { transform: none; } }

/* Calm hero background: the Team 3 picture faded under a light wash, the same on every main page; the page's own
   hero picture is hidden. Text on it is navy. Put .b-calm on the hero section. */
html[data-blue] .b-calm { background: linear-gradient(180deg, rgba(240, 246, 250, .62) 0%, rgba(240, 246, 250, .42) 60%, rgba(240, 246, 250, .8) 100%),
    url('images/Team3.jpg') center / cover no-repeat, #F0F6FA !important; color: #02263F; }
html[data-blue] .b-calm::before, html[data-blue] .b-calm::after { background: none !important; background-image: none !important; }
html[data-blue] .b-calm > :is(img, video)[data-hero-img], html[data-blue] .b-calm > :is(.hero-media, .hero-bg, .blog-hero-bg, .hero-overlay, .blog-hero-overlay) { display: none !important; }/* every page with a calm hero: the breadcrumb above it reads dark */
html[data-blue] body:has(.b-calm) .hero-breadcrumb, html[data-blue] body:has(.b-calm) .hero-breadcrumb * { color: rgba(2, 38, 63, .7) !important; }
/* Technical on the calm hero: dark copy beside its 3D stack */
html[data-blue] .b-tech-hero .blog-hero-desc { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-tech-hero .blog-hero-desc strong { color: #02263F; }
html[data-blue] .b-tech-hero .blog-eyebrow { color: #138E96 !important; }
/* Main-page heroes on laptops: the whole hero (heading, copy, buttons, animation, height) is drawn at 85% on screens
   up to 1600px wide or 860px tall, so it fits a laptop view. The hero's container is widened by the same factor, so
   the copy still starts exactly where the next section's heading does (the 1240px / 48px page grid). */
html[data-blue] .b-calm { --b-hz: 1; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] .b-calm { --b-hz: .85; zoom: .85; }
}
html[data-blue] .b-calm .container { max-width: calc(1240px / var(--b-hz)) !important; padding-left: calc(48px / var(--b-hz)) !important;
    padding-right: calc(48px / var(--b-hz)) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
/* The H1 is exempt from the laptop scale-down, so it reads at the same size as the section headings below it */
html[data-blue] .b-calm h1.b-h1 { font-size: calc(clamp(34px, 3.5vw, 50px) / var(--b-hz)) !important; }
@media (max-width: 680px) { html[data-blue] .b-calm .container { padding-left: 20px !important; padding-right: 20px !important; } }
/* Every bottom call-to-action tile (Home and S2C Platform closing panels, the module-page banners, the market and
   company bands, and the "Stay informed" newsletter strip) on the Modules1-10 picture: a light network mesh under a
   navy wash on the left so the white heading and copy read, clearing toward the right. Overrides each page's own
   picture (image 51, image 49, Team 3, the module pages' inline backgrounds). */
html[data-blue] { --b-cta-wash: linear-gradient(100deg, rgba(2, 38, 63, .84) 0%, rgba(2, 38, 63, .6) 45%, rgba(2, 38, 63, .26) 80%, rgba(2, 38, 63, .14) 100%); }
/* (Home's closing panel keeps its flat navy with the turning globe: only the S2C Platform panel, which has the tagline grid, takes the picture) */
html[data-blue] :is(.final-cta:has(.final-cta-grid), .cta-banner) { background: var(--b-cta-wash), url('images/Modules1-10.jpg') center / cover no-repeat, #0E4A75 !important; }
html[data-blue] .cta-band-bg { background: #0E4A75 !important; }
html[data-blue] .cta-band-bg::before { content: ""; position: absolute; inset: 0; left: 0 !important; background: url('images/Modules1-10.jpg') center / cover no-repeat !important;
    filter: none !important; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; }
html[data-blue] .cta-band-bg::after { background: var(--b-cta-wash) !important; }
html[data-blue] .newsletter-strip::before { background: var(--b-cta-wash), url('images/Modules1-10.jpg') center / cover no-repeat !important; transform: none !important; }
/* outline buttons on these tiles would vanish on the light right-hand side: they take the teal-to-blue gradient */
html[data-blue] .cta-band .btn-lg.ghost { background: linear-gradient(100deg, #138E96 0%, #1F86A6 45%, #2F5F9E 100%); background-size: 140% 100%; background-position: 0 50%;
    color: #fff; border-color: transparent; box-shadow: 0 12px 28px -12px rgba(31, 134, 166, .6); transition: background-position .5s ease, transform .2s ease; }
html[data-blue] .cta-band .btn-lg.ghost:hover { background-position: 100% 50%; color: #fff; }
html[data-blue] .cta-band .btn-lg.ghost .ti { color: #fff; }
/* Eyebrows (the small uppercase labels above headings) site-wide: 10.5px with 0.16em tracking instead of 13px, so
   they sit quietly above the heading as on the reference (12px there, in a lighter mono face) */
html[data-blue] :is(.blog-eyebrow, .hero-eyebrow, .oversize-label, .feature-label, .newsletter-label) {
    font-size: 10.5px !important; letter-spacing: .16em !important; line-height: 1.4; }
/* Home section headings in the hero's plain style (h1.b-h1): one Lato line in navy at the hero's size, the closing
   phrase in an <em> in a teal-to-navy gradient, no italic serif and no forced line breaks, so a heading takes the lines
   it needs (two at most on desktop). On the dark sections (.b-h2-dark) the line is white and the closing phrase runs
   bright teal to sky. Section eyebrows on Home are teal, as the hero's is. */
html[data-blue] h2.b-h2 { font-family: 'Lato', sans-serif !important; font-weight: 800 !important; font-style: normal !important;
    font-size: clamp(34px, 3.5vw, 50px) !important; line-height: 1.05 !important; letter-spacing: -.035em !important;
    color: #02263F !important; text-shadow: none !important; text-transform: none !important; text-wrap: balance; }
html[data-blue] h2.b-h2 em { font-style: normal !important; font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important;
    background: linear-gradient(100deg, #138E96 10%, #02263F 95%); -webkit-background-clip: text; background-clip: text;
    color: transparent !important; -webkit-text-fill-color: transparent; padding-right: .04em; }
html[data-blue] h2.b-h2.b-h2-dark { color: #fff !important; }
html[data-blue] h2.b-h2.b-h2-dark em { background-image: linear-gradient(100deg, #3FC1C9 10%, #ADDDF6 95%); }
html[data-blue] body:has(.b-home-hero) .blog-eyebrow { color: #138E96 !important; }
html[data-blue] body:has(.b-home-hero) :is(.loop-zone, .designer-zone, .ene-zone) .blog-eyebrow { color: #3FC1C9 !important; }/* Home hero: the "See every ..." line and its changing word at the size of the sub copy above it (.98em of the copy column) */
html[data-blue] .b-home-hero .hero-kinetic { font-size: .98em !important; line-height: 1.7 !important; }
html[data-blue] .b-home-hero .hero-kinetic .type-word { font-size: 1em !important; }
/* Section eyebrows and sub copy follow the hero. Eyebrows are teal as in the hero (low specificity, so the light
   versions set for dark sections still win). On laptops, where the hero is drawn at 85%, the eyebrows and the lead
   paragraph under each section heading come down by the same factor (10.5px > 8.9px, 16px > 13.6px), so a section reads
   at the hero's size. The hero itself is left out: its zoom already shrinks it. */
:where(html[data-blue]) :is(.blog-eyebrow, .oversize-label, .feature-label, .newsletter-label) { color: #138E96; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] :is(.blog-eyebrow, .hero-eyebrow, .oversize-label, .feature-label, .newsletter-label):not(.b-calm *) { font-size: 8.9px !important; }
    html[data-blue] :is(.section-sub, .define-body, .loop-lead, .ai-lead, .dz-lead, .op-intro, .ene-lead, .uc-intro, .ind-intro, .faq-side-note,
        .final-cta-sub, .unified-body, .modules-intro-copy, .showcase-intro, .oss-lead, .mobile-lead, .cfg-lead, .feature-body, .cta-banner-sub,
        .cta-band-sub, .sec-intro, .intro-body, .packages-section-sub, .ref-intro, .res-intro, .book-sub, .res-lead, .blog-section-sub,
        .newsletter-sub, .mkt-intro-body p, .benefits-intro p):not(.b-calm *) { font-size: 13.6px !important; }
}/* eyebrows still set orange by stronger page rules or inline styles: teal on the light sections, bright teal on the dark */
html[data-blue] :is(.zone-light, .operator-zone) :is(.blog-eyebrow, .oversize-label, .feature-label, .newsletter-label) { color: #138E96 !important; }
html[data-blue] :is(.ene-zone, .zone-dark, body:has(.b-cust-hero) .blog-light-zone) :is(.blog-eyebrow, .oversize-label, .feature-label, .newsletter-label) { color: #3FC1C9 !important; }
/* ---------- Home: customer logos, quotes, film steps, stats, the VC4 way ---------- */
/* The customer logo strip, now under the six quote tiles: greyscale logos that keep scrolling (the second set of logos
   is shown again so the loop is seamless, and the scroll runs even with reduced motion, as the site's other motion does) */
html[data-blue] .b-logo-strip { background: transparent; border: 0; padding: 0; margin-top: 56px; }
html[data-blue] .b-logo-strip .marquee-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
html[data-blue] .b-logo-strip .marquee-track { display: flex !important; width: max-content !important; animation: bLogoScroll 70s linear infinite !important; }
html[data-blue] .b-logo-strip:hover .marquee-track { animation-play-state: paused !important; }
html[data-blue] .b-logo-strip .marquee-set { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 64px; padding-right: 64px; }
html[data-blue] .b-logo-strip .marquee-logo { filter: grayscale(1) contrast(.9); opacity: .55; transition: opacity .3s ease, filter .3s ease; }
html[data-blue] .b-logo-strip .marquee-logo:hover { filter: grayscale(1) contrast(1); opacity: .9; }
html[data-blue] .b-logo-strip .marquee-label { color: rgba(2, 38, 63, .55); }
@keyframes bLogoScroll { to { transform: translateX(-50%); } }

/* Customer quotes in plain Lato instead of the italic serif, the quote mark too */
html[data-blue] .b-qcard blockquote { font: 300 16px/1.65 'Lato', sans-serif !important; font-style: normal !important; color: #02263F; }
html[data-blue] .b-qcard .b-qm { font: 900 44px/.8 'Lato', sans-serif !important; height: 24px; }

/* "See it in action" step numbers 01-03 in the font of the step titles (Lato, same size and weight) */
html[data-blue] .film-body h3 .film-step { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 900 !important;
    font-size: 1em !important; line-height: inherit; letter-spacing: -.01em; }

/* Stats band, smaller */
html[data-blue] .stat-band { margin-top: 56px; }
html[data-blue] .stat-b { padding: 24px 20px; }
html[data-blue] .stat-b-value { font-size: clamp(1.9rem, 2.6vw, 2.5rem) !important; margin-bottom: 6px; }
html[data-blue] .stat-b-label { font-size: .64rem !important; }

/* The VC4 way: the infinity loop on the left, the four steps on the right in two columns; step numbers in Lato */
html[data-blue] .b-loop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 48px; }
html[data-blue] .b-loop-grid .loop-stage { max-width: none; margin: 0; }
html[data-blue] .b-loop-grid .loop-glow { margin-left: auto; margin-right: auto; }
html[data-blue] .b-loop-grid .loop-steps { grid-template-columns: 1fr 1fr; gap: 32px 28px; margin-top: 0; }
html[data-blue] .loop-step h3 .n { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 900 !important; font-size: 1em !important; }
@media (max-width: 900px) {
    html[data-blue] .b-loop-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) { html[data-blue] .b-loop-grid .loop-steps { grid-template-columns: 1fr; } }
/* Home sections spaced like the hero: the hero's eyebrow starts 56px below its top edge (48px on laptops, where the
   hero is drawn at 85%), so every section below and the closing panel take that as their top and bottom padding
   instead of 100px / 90px */
html[data-blue] body:has(.b-home-hero) main > section:not(.b-calm), html[data-blue] body:has(.b-home-hero) .final-cta-wrap { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-home-hero) main > section:not(.b-calm), html[data-blue] body:has(.b-home-hero) .final-cta-wrap { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) {
    html[data-blue] body:has(.b-home-hero) main > section:not(.b-calm), html[data-blue] body:has(.b-home-hero) .final-cta-wrap { padding-top: 40px !important; padding-bottom: 40px !important; }
}/* Home AI Assistant and S2C Designer sections: the copy column starts at the top like every other section, instead of
   being centred against the taller chat panel / video beside it */
html[data-blue] body:has(.b-home-hero) :is(.ai-grid, .dz-grid) { align-items: start !important; }
/* Home: the AI Assistant chat demo and the Ericsson migration console at 70%, so they sit inside their sections */
html[data-blue] body:has(.b-home-hero) .ai-zone .ai-chat { zoom: .7; }
html[data-blue] body:has(.b-home-hero) .ene-zone .b-mig-stage { zoom: .7; }
/* Home buttons sized like the hero's: on laptops the hero is drawn at 85%, so every other button on the page comes
   down by the same factor (15.2px type, 14px x 30-32px padding at 85%); on large screens they already match */
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-home-hero) main :is(.hero-cta-main, .hero-cta-ghost, .spot-all, .faq-all-link, .ind-more):not(.b-calm *) {
        font-size: 12.9px !important; padding: 11.9px 27.2px !important; }
}
/* Home teal buttons in the gradient of the headings' closing phrase ("Far beyond it."): teal into navy. The orange
   Book a Demo buttons keep their own gradient */
html[data-blue] body:has(.b-home-hero) main :is(.hero-cta-main, .hero-cta-ghost, .spot-all, .faq-all-link, .ind-more):not([href*="book-a-demo"]):not([onclick*="book-a-demo"]) {
    background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important; background-position: 0 50% !important;
    color: #fff !important; border-color: transparent !important; box-shadow: 0 12px 28px -12px rgba(2, 38, 63, .45) !important;
    transition: background-position .5s ease, transform .3s ease !important; }
html[data-blue] body:has(.b-home-hero) main :is(.hero-cta-main, .hero-cta-ghost, .spot-all, .faq-all-link, .ind-more):not([href*="book-a-demo"]):not([onclick*="book-a-demo"]):hover {
    background-position: 100% 50% !important; color: #fff !important; }
html[data-blue] body:has(.b-home-hero) main :is(.hero-cta-main, .hero-cta-ghost, .spot-all, .faq-all-link, .ind-more):not([href*="book-a-demo"]):not([onclick*="book-a-demo"]) :is(i, .ti) { color: #fff !important; }
/* Home layer story: the "Layer 1 · Live network" labels without the short line before them, so they start at the left
   edge of the heading below, and at the eyebrow size (10.5px, 8.9px on laptops) */
html[data-blue] .chapter .k::before { content: none !important; display: none !important; }
html[data-blue] .chapter .k { gap: 0 !important; font-size: 10.5px !important; letter-spacing: .16em !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] .chapter .k { font-size: 8.9px !important; }
}/* Home S2C Designer section: the monitor picture at 70% of its column, kept to the right, so it fits the section */
html[data-blue] body:has(.b-home-hero) .designer-zone .dz-monitor { display: block; width: 70% !important; height: auto; margin-left: auto; }
/* Mega menus: a first column with a small picture card captioned with the menu's own name (as the reference opens its
   Products menu with a product card), so each panel reads 4-5 columns wide */
html[data-blue] .mega-cols .b-mega-pic { flex: 0 0 190px; min-width: 0; }
html[data-blue] .b-mpic { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
html[data-blue] .b-mpic img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid #E3E7EE;
    box-shadow: 0 10px 24px -14px rgba(2, 38, 63, .35); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease; }
html[data-blue] .b-mpic b { font: 800 15px/1.2 'Lato', sans-serif; color: #02263F; letter-spacing: -.01em; }
html[data-blue] .b-mpic:hover img { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(2, 38, 63, .45); }
html[data-blue] .b-mpic:hover b { color: #138E96; }
/* Technical's panel is a four-column grid on two rows: the card takes a column of its own down both rows */
html[data-blue] #panel-docs .mega-cols { grid-template-columns: 190px repeat(4, 1fr) !important; }
html[data-blue] #panel-docs .b-mega-pic { grid-row: span 2; }
html[data-blue] #panel-docs .mega-col:nth-child(5) { grid-column-start: auto !important; }
@media (max-width: 900px) { html[data-blue] .b-mega-pic { display: none !important; } }/* module tiles: the border in the tile's tone shows all the time, not only on hover */
html[data-blue] .b-isotile { border-color: var(--tone) !important; }
/* Mega menus: the picture card is image 8 for every menu, stretched the full height of the panel's columns, with the
   menu's name inside the picture over a soft navy fade */
html[data-blue] .mega-cols .b-mega-pic { align-self: stretch; display: flex; }
html[data-blue] .b-mpic { position: relative; flex: 1; display: block; min-height: 160px; border-radius: 14px; overflow: hidden; border: 1px solid #E3E7EE;
    box-shadow: 0 10px 24px -14px rgba(2, 38, 63, .35); }
html[data-blue] .b-mpic img { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
html[data-blue] .b-mpic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 38, 63, 0) 40%, rgba(2, 38, 63, .72) 100%); }
html[data-blue] .b-mpic b { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font-size: 16px; text-shadow: 0 1px 8px rgba(1, 16, 28, .5); }
html[data-blue] .b-mpic:hover b { color: #fff; }
html[data-blue] .b-mpic:hover img { transform: scale(1.04); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
html[data-blue] #panel-docs .b-mega-pic { grid-row: 1 / span 2; }

/* Home "One network. One truth. One loop.": "One truth." in a warm orange gradient beside the teal one */
html[data-blue] h2.b-h2 .b-g2 { background: linear-gradient(100deg, #EB552C 10%, #F4936E 95%); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em; }

/* Home AI Assistant: the chat wider and shorter, filling its column and closer to the copy */
html[data-blue] body:has(.b-home-hero) .ai-zone .ai-grid { gap: 40px; }
html[data-blue] body:has(.b-home-hero) .ai-zone .ai-grid > div:last-child { justify-content: flex-start !important; }
html[data-blue] body:has(.b-home-hero) .ai-zone .ai-chat { zoom: .8 !important; flex: 1 1 auto; width: 100% !important; max-width: none !important; margin: 0 !important; }
html[data-blue] body:has(.b-home-hero) .ai-zone .ai-chat-body { height: 230px !important; }
/* Home S2C Designer: the monitor next to the copy instead of against the right edge */
html[data-blue] body:has(.b-home-hero) .designer-zone .dz-grid { gap: 40px; }
html[data-blue] body:has(.b-home-hero) .designer-zone .dz-monitor { margin-left: 0 !important; margin-right: auto; }/* Home Ericsson section: the migration console a bit wider and shorter (tighter rows), next to the copy */
html[data-blue] body:has(.b-home-hero) .ene-zone .ene-grid { gap: 40px !important; }
html[data-blue] body:has(.b-home-hero) .ene-zone .b-mig-stage { max-width: 640px !important; justify-self: start !important; }
html[data-blue] body:has(.b-home-hero) .ene-zone .b-mig-rows > div { padding-top: 5px !important; padding-bottom: 5px !important; }
html[data-blue] body:has(.b-home-hero) .ene-zone :is(.b-mig-top, .b-mig-foot) { padding-top: 9px !important; padding-bottom: 9px !important; }
/* Home "The VC4 way": the second copy of the loop video sits exactly over the first for the cross-fade (blue/blue-loop.js) */
html[data-blue] .loop-stage video.b-loop-2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* Home S2C Designer: the monitor a little further from the copy */
html[data-blue] body:has(.b-home-hero) .designer-zone .dz-monitor { margin-left: 56px !important; }
/* Home Ericsson section: the three orange points one under the other */
html[data-blue] body:has(.b-home-hero) .ene-proof { display: flex !important; flex-direction: column !important; gap: 10px !important; }
/* Home AI Assistant chat and Ericsson migration console face straight on: no tilt, no tilting float */
html[data-blue] body:has(.b-home-hero) :is(.ai-zone .ai-chat, .ene-zone .b-mig-stage .b-mig) { transform: none !important; animation: none !important; }/* Home: the logo strip under the three What-we-do points, spaced from the modules block below */
html[data-blue] .define-zone .b-logo-strip { margin-top: 44px; margin-bottom: 8px; }
/* Home "Learn it your way": the three picture headers on the Team pictures instead of photos, each with its own
   isometric scene (Watch, Download, Read; blue/blue-modtiles.js), and the icon in the card's tone */
html[data-blue] .resource-grid a:nth-child(1)::before, html[data-blue] .resource-grid a:nth-child(3)::before { background: url('images/Team3.jpg') center / cover no-repeat !important; }
html[data-blue] .resource-grid a:nth-child(2)::before { background: url('images/Team2.jpg') center / cover no-repeat !important; }
html[data-blue] .resource-grid a:hover::before { filter: none; }
html[data-blue] .resource-card { position: relative; }
html[data-blue] .resource-card .b-res-head { position: absolute; left: 0; right: 0; top: -2px; height: 170px; z-index: 1; pointer-events: none; }
html[data-blue] .resource-card .b-res-head .b-isoscene { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-blue] .resource-card:hover .b-blk { transform: translateY(-3px); }
html[data-blue] .resource-card :is(.resource-icon, h3, p, .mod-arrow) { position: relative; z-index: 2; }
html[data-blue] .resource-grid .resource-card .resource-icon { color: var(--tone) !important; background: var(--tone-bg) !important; border-color: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Mega menu cards: the background picture under a deep navy wash, the menu's icon and name at the top, a line of copy
   about the section under it */
html[data-blue] .b-mpic::after { background: linear-gradient(180deg, rgba(1, 22, 40, .78) 0%, rgba(2, 38, 63, .72) 55%, rgba(1, 22, 40, .86) 100%) !important; }
html[data-blue] .b-mpic-top { position: absolute; left: 18px; right: 18px; top: 18px; z-index: 1; display: flex; align-items: center; gap: 10px; }
html[data-blue] .b-mpic-top i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; background: rgba(63, 193, 201, .22); border: 1px solid rgba(63, 193, 201, .45); }
html[data-blue] .b-mpic .b-mpic-top b { position: static; font: 800 16px/1.2 'Lato', sans-serif; color: #fff; letter-spacing: -.01em; text-shadow: none; }
html[data-blue] .b-mpic-copy { position: absolute; left: 18px; right: 18px; top: 66px; z-index: 1; font: 400 13px/1.55 'Lato', sans-serif; color: rgba(214, 230, 240, .88); }
html[data-blue] .b-mega-pic .b-mpic { min-height: 190px; }
html[data-blue] .mega-cols .b-mega-pic { flex-basis: 230px !important; }
html[data-blue] #panel-docs .mega-cols { grid-template-columns: 230px repeat(4, 1fr) !important; }/* mega menu cards: the icon beside the menu name in plain white (an icon glyph is drawn in its background colour, so
   it takes no chip of its own) */
html[data-blue] .b-mpic-top i { width: 22px !important; height: 22px !important; font-size: 22px; border: 0 !important; border-radius: 0 !important;
    background: none !important; background-color: #fff !important; }/* Home Ericsson section: the migration console centred against the copy beside it, rather than hanging from the top */
html[data-blue] body:has(.b-home-hero) .ene-zone .b-mig-stage { align-self: center !important; }
/* Home layer story: the chapter copy ("Auto-discovery reads ...") at the sub copy size of the rest of the page on laptops */
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] .chapter p { font-size: 13.6px !important; }
}
/* Menu bar Contact Us in the headings' closing-phrase gradient ("Far beyond it."): teal into navy, on every page */
html[data-blue] .site-nav button.cta-btn-secondary[onclick*="contact.html"] { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important;
    background-size: 140% 100% !important; background-position: 0 50% !important; border-color: transparent !important; color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(2, 38, 63, .5) !important; transition: background-position .5s ease, transform .3s ease !important; }
html[data-blue] .site-nav button.cta-btn-secondary[onclick*="contact.html"]:hover { background-position: 100% 50% !important; color: #fff !important; }
/* Body copy one step stronger: the site's light Lato (300) reads thin on the pale backgrounds, so on the blue site the
   300 face is drawn with Lato Regular. Every paragraph set at 300 picks it up without changing its own rule. */
@font-face { font-family: 'Lato'; src: url('../fonts/lato-regular.woff2') format('woff2'), url('../fonts/lato-regular.ttf') format('truetype');
    font-weight: 300; font-style: normal; font-display: swap; }

/* ---------- Markets ---------- */
/* By Industry: spaced like the Home sections (56px, 48px on laptops, 40px on phones) and headed in the Home heading style */
html[data-blue] .b-mk-markets { padding-top: 56px !important; padding-bottom: 56px !important; }
html[data-blue] .b-mk-markets .section-sub { max-width: 760px; margin-top: 18px; color: #38484F !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] .b-mk-markets { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) { html[data-blue] .b-mk-markets { padding-top: 40px !important; padding-bottom: 40px !important; } }
/* Every closing call-to-action tile (Markets "Other Markets", the market, module and legal pages, S2C Platform) is the
   Home closing panel ("See your network"): flat navy, the networked globe from blue/blue-fx.js on the right, heading in
   the section heading style, white copy, an orange and a teal-to-navy button. The Home page styles it relies on are not
   loaded on those pages, so they are repeated here. .b-cta-wrap is the light band around it when it has its own section */
html[data-blue] .b-cta-wrap { padding: 56px 0 !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) { html[data-blue] .b-cta-wrap { padding: 48px 0 !important; } }
@media (max-width: 900px) { html[data-blue] .b-cta-wrap { padding: 40px 0 !important; } }
html[data-blue] .final-cta.b-cta-home { background: #02263F !important; border: 0 !important; border-radius: 24px !important; padding: 76px 64px !important;
    position: relative; overflow: hidden; display: block !important; box-shadow: none; }
@media (max-width: 680px) { html[data-blue] .final-cta.b-cta-home { padding: 56px 28px !important; } }
html[data-blue] .b-cta-home .oversize-label { display: block; color: #3FC1C9 !important; margin-bottom: 14px; }
html[data-blue] .b-cta-home .final-cta-heading { margin: 0 0 22px !important; }
html[data-blue] .b-cta-home .final-cta-sub { font-size: 16px; font-weight: 300; color: #fff !important; max-width: 560px; margin: 0 0 38px !important; line-height: 1.7; }
html[data-blue] .b-cta-home .final-cta-btns { display: flex; gap: 16px; flex-wrap: wrap; }
html[data-blue] .b-cta-home :is(.hero-cta-main, .hero-cta-ghost) { display: inline-flex; align-items: center; gap: 9px; padding: 14px 32px; border-radius: 30px;
    border: 1px solid transparent; font: 700 .95rem 'Lato', sans-serif; letter-spacing: .03em; color: #fff !important; cursor: pointer; transition: .22s; }
html[data-blue] .b-cta-home .hero-cta-main { background: #EB552C !important; box-shadow: 0 6px 26px rgba(230, 83, 43, .45) !important; }
html[data-blue] .b-cta-home .hero-cta-main:hover { background: #b83d1a !important; transform: translateY(-2px); box-shadow: 0 12px 38px rgba(230, 83, 43, .6) !important; }
html[data-blue] body .final-cta.b-cta-home .hero-cta-ghost { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important;
    background-position: 0 50% !important; box-shadow: 0 12px 28px -12px rgba(2, 38, 63, .45) !important; }
html[data-blue] body .final-cta.b-cta-home .hero-cta-ghost:hover { background-position: 100% 50% !important; transform: translateY(-2px); }
html[data-blue] .b-cta-home :is(.hero-cta-main, .hero-cta-ghost) .ti { color: #fff !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] .b-cta-home :is(.hero-cta-main, .hero-cta-ghost) { font-size: 12.9px !important; padding: 11.9px 27.2px !important; }
}


/* ---------- Technical ---------- */
/* The "Common questions" blocks under each section, smaller: the label at the eyebrow size and the questions and
   answers at the sub copy size (10.5px and 16px, 8.9px and 13.6px on laptops) */
html[data-blue] body:has(.b-tech-hero) .sec-faq-label { font-size: 10.5px !important; }
html[data-blue] body:has(.b-tech-hero) .sec-faq :is(.faq-item summary, .faq-item p) { font-size: 15px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-tech-hero) .sec-faq-label { font-size: 8.9px !important; }
    html[data-blue] body:has(.b-tech-hero) .sec-faq :is(.faq-item summary, .faq-item p) { font-size: 13.6px !important; }
}
html[data-blue] body:has(.b-tech-hero) h2.b-h2 + :is(.row-two, .sec-intro) { margin-top: 24px !important; }

/* ---------- Resources ---------- */
/* Sections spaced like Home (56px, 48px on laptops, 40px on phones), including the bands with inline padding */
html[data-blue] body:has(.b-res-hero) main > :is(.blog-light-zone, .res-zone, .res-band) { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-res-hero) main > :is(.blog-light-zone, .res-zone, .res-band) { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) {
    html[data-blue] body:has(.b-res-hero) main > :is(.blog-light-zone, .res-zone, .res-band) { padding-top: 40px !important; padding-bottom: 40px !important; }
}
html[data-blue] body:has(.b-res-hero) h2.b-h2 { margin-bottom: 22px !important; }
/* Hero "Browse the library" in the headings' closing-phrase gradient (teal into navy); Book a demo stays orange */
html[data-blue] .b-res-hero .hero-btn:not(.ghost) { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important;
    background-position: 0 50% !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 12px 28px -12px rgba(2, 38, 63, .45) !important;
    transition: background-position .5s ease, transform .3s ease !important; }
html[data-blue] .b-res-hero .hero-btn:not(.ghost):hover { background-position: 100% 50% !important; }
html[data-blue] .b-res-hero .hero-btn:not(.ghost) .ti { color: #fff !important; }
/* The featured flipbook: the front cover on image 51 under a navy wash so the white title reads, and the book shorter
   and narrower */
html[data-blue] .pg-cover-photo { background: linear-gradient(100deg, rgba(2, 38, 63, .82) 0%, rgba(2, 38, 63, .55) 60%, rgba(2, 38, 63, .3) 100%),
    url('images/51.jpg') 50% 50% / cover no-repeat, #02263F !important; }
html[data-blue] body:has(.b-res-hero) .book { max-width: 760px !important; height: clamp(360px, 36vw, 440px) !important; }

/* ---------- The ten market pages ---------- */
/* Sections spaced like Home (56px, 48px on laptops, 40px on phones); the hero keeps its own */
html[data-blue] body:has(.b-mkt-page) main > section:not(.hero-zone) { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-mkt-page) main > section:not(.hero-zone) { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) { html[data-blue] body:has(.b-mkt-page) main > section:not(.hero-zone) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-mkt-page) main h2.b-h2 { margin-bottom: 22px !important; }
/* Market page heroes in the Home hero style, on their own dark picture: H1 in the Home size and weight, white with the
   closing phrase in the light gradient; padding, eyebrow, sub copy and buttons as on Home (laptop sizes included) */
html[data-blue] h1.b-h1.b-h1-dark { color: #fff !important; }
html[data-blue] h1.b-h1.b-h1-dark em .w > span { background-image: linear-gradient(100deg, #3FC1C9 10%, #ADDDF6 95%); }
html[data-blue] .hero-zone.b-mkt-page { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] .hero-zone.b-mkt-page { padding-top: 48px !important; padding-bottom: 48px !important; }
    html[data-blue] .hero-zone.b-mkt-page .btn-lg { font-size: 12.9px !important; padding: 11.9px 27.2px !important; }
}
@media (max-width: 900px) { html[data-blue] .hero-zone.b-mkt-page { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] .hero-zone.b-mkt-page .container > :is(.oversize-label, h1, .section-sub) { max-width: 600px; }
html[data-blue] .hero-zone.b-mkt-page h1.b-h1 { margin: 20px 0 22px !important; }
html[data-blue] .hero-zone.b-mkt-page .section-sub { margin-top: 0 !important; line-height: 1.7; }
html[data-blue] .hero-zone.b-mkt-page .hero-actions { margin-top: 32px; }
/* Market page stats strip styled like the module pages': taller strip, larger figures with the unit in airforce blue
   rather than orange, and larger labels */
html[data-blue] body:has(.b-mkt-page) .intro-strip { padding-top: 12px !important; padding-bottom: 12px !important; }
html[data-blue] body:has(.b-mkt-page) .intro-strip .stat-item { padding: 6px 10px !important; }
html[data-blue] body:has(.b-mkt-page) .intro-strip .stat-num { font-size: 35.9px !important; line-height: 1 !important; letter-spacing: -.03em !important; }
html[data-blue] body:has(.b-mkt-page) .intro-strip .stat-num span { color: #5F99BB !important; }
html[data-blue] body:has(.b-mkt-page) .intro-strip .stat-label { font-size: 13px !important; letter-spacing: .04em !important; }
/* Resources closing panel ("Be the first to read it."): the Home panel with the sign-up form in place of the buttons */
html[data-blue] .b-cta-home.b-cta-form .newsletter-form--hs { max-width: 460px; margin-top: 4px; }
/* Blog: sections spaced like Home, and the closing "Stay informed" panel in a compact size */
html[data-blue] .b-blog-hero { padding-top: 56px !important; padding-bottom: 64px !important; }
html[data-blue] body:has(.b-blog-hero) main > :is(section, div):not(.b-blog-hero):not(.sec-chev):not(.page-spacer):not(.final-cta-wrap):not(.hero-breadcrumb) { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-blog-hero) main > :is(section, div):not(.b-blog-hero):not(.sec-chev):not(.page-spacer):not(.final-cta-wrap):not(.hero-breadcrumb) { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) { html[data-blue] body:has(.b-blog-hero) main > :is(section, div):not(.b-blog-hero):not(.sec-chev):not(.page-spacer):not(.final-cta-wrap):not(.hero-breadcrumb) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-blog-hero) main h2.b-h2 { margin-bottom: 22px !important; }
html[data-blue] .final-cta.b-cta-home.b-cta-compact { padding: 44px 56px !important; }
html[data-blue] .b-cta-compact h2.final-cta-heading.b-h2 { font-size: clamp(30px, 2.8vw, 40px) !important; margin-bottom: 12px !important; }
html[data-blue] .b-cta-compact .final-cta-sub { margin-bottom: 20px !important; }
html[data-blue] .b-cta-compact .c-globe { width: min(44%, 460px); opacity: .45; }
@media (max-width: 680px) { html[data-blue] .final-cta.b-cta-home.b-cta-compact { padding: 32px 24px !important; } }
/* Videos: hero and sections spaced like Home (56px, 48px on laptops, 40px on phones) */
html[data-blue] .b-vid-hero { padding-top: 56px !important; padding-bottom: 64px !important; }
html[data-blue] body:has(.b-vid-hero) main > section:not(.b-vid-hero) { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-vid-hero) main > section:not(.b-vid-hero) { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) { html[data-blue] body:has(.b-vid-hero) main > section:not(.b-vid-hero) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-vid-hero) main h2.b-h2 { margin-bottom: 22px !important; }

/* ---------- Mobile menu drawer in the blue site's light menu style ----------
   The drawer (built by the page's mnav script from the desktop menu) kept the original site's dark navy and orange; here
   it takes the desktop mega menu's look: pale alice panel, navy links, teal accents and icons, the orange Book a Demo
   and the teal-to-navy Contact Us of the menu bar. */
html[data-blue] .mnav { background: rgba(240, 246, 250, .98) !important; background-image: none !important; color: #02263F !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -24px rgba(2, 38, 63, .35); }
html[data-blue] .mnav-scrim { background: rgba(2, 38, 63, .28) !important; }
html[data-blue] .mnav :is(.mnav-row > a, .mnav-label, .mnav-exp, .mnav-row > button) { color: #02263F !important; }
html[data-blue] .mnav :is(.mnav-row > a.on, .mnav-sec.open .mnav-exp, .mnav-sec.open .mnav-label) { color: #138E96 !important; }
html[data-blue] .mnav .mnav-sec { border-top-color: rgba(2, 38, 63, .1) !important; border-bottom-color: rgba(2, 38, 63, .1) !important; }
html[data-blue] .mnav .mnav-sub a { color: rgba(2, 38, 63, .82) !important; }
html[data-blue] .mnav .mnav-sub a:hover, html[data-blue] .mnav .mnav-sub a.on { color: #138E96 !important; }
html[data-blue] .mnav .mnav-sub .ti { color: #138E96 !important; }
html[data-blue] .mnav :is(.mnav-grp, .mnav-grp > span, .mnav-grp > div, .col-label) { color: #138E96 !important; }
html[data-blue] .mnav-cta .mnav-demo { background: linear-gradient(120deg, #EF6A3C 0%, #E6532B 50%, #C9441F 100%) !important; color: #fff !important; border: 0 !important; }
html[data-blue] .mnav-cta .mnav-contact { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; color: #fff !important; border: 0 !important; }
html[data-blue] .mnav-cta :is(.mnav-demo, .mnav-contact) .ti { color: #fff !important; }

/* ---------- The language switch is removed from every menu (desktop bar, its panel and the mobile drawer) ---------- */
html[data-blue] :is(.lang-btn, #t-lang, #p-lang, .lang-panel) { display: none !important; }
html[data-blue] .mnav .mnav-sec:has(.mnav-langs) { display: none !important; }
/* Book a Demo: the "What happens next" label and the step numbers in the teal of the Home eyebrows, and the demo form
   (HubSpot draws it straight into the page) in Lato with pill fields on the light card */
html[data-blue] body:is(:has(.b-dm-hero), :has(.b-ct-hero)) .sidebar-label { color: #138E96 !important; font: 900 10.5px/1 'Lato', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) { html[data-blue] body:is(:has(.b-dm-hero), :has(.b-ct-hero)) .sidebar-label { font-size: 8.9px !important; } }
html[data-blue] body:has(.b-dm-hero) .step-num { color: #138E96 !important; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .hs-form { font-family: 'Lato', sans-serif; color: #02263F; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) :is(.hs-form-field label, .hs-form-required, .hs-richtext, .hs-richtext p, .legal-consent-container) { color: #02263F !important; font: 600 13px/1.5 'Lato', sans-serif; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .hs-form-required { color: #EB552C !important; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .hs-form-field { margin-bottom: 14px; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) fieldset { max-width: none !important; display: flex; gap: 12px; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) fieldset > div { flex: 1 1 0; width: auto !important; float: none !important; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .input { margin: 0 !important; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .hs-input:not([type=checkbox]):not([type=radio]) { width: 100% !important; box-sizing: border-box; padding: 11px 20px !important; border-radius: 30px !important;
    border: 1px solid #D9E6EF !important; background: #fff !important; color: #02263F !important; font: 400 14px 'Lato', sans-serif; margin-top: 4px; transition: border-color .2s, box-shadow .2s; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .hs-input:focus { outline: 0; border-color: #138E96 !important; box-shadow: 0 0 0 4px rgba(19, 142, 150, .15); }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) textarea.hs-input { border-radius: 18px !important; min-height: 90px; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .hs-input::placeholder { color: rgba(2, 38, 63, .45); }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) :is(.hs-error-msg, .hs-error-msgs label) { color: #EB552C !important; }
html[data-blue] :is(#hs-demo-form, #hs-contact-form) .hs-button { padding: 13px 30px !important; border-radius: 30px !important; border: none !important; background: linear-gradient(120deg, #EF6A3C 0%, #E6532B 50%, #C9441F 100%) !important;
    color: #fff !important; font: 700 .95rem 'Lato', sans-serif; letter-spacing: .03em; cursor: pointer; margin-top: 8px; box-shadow: 0 6px 20px rgba(230, 83, 43, .3); }
/* Blog hero: shorter, so less empty space under the copy (the card deck still fits: about 420px with its dots) */
@media (min-width: 901px) { html[data-blue] .b-blog-hero { min-height: 540px !important; } }
/* closing panels: the eyebrow in Lato Black like the section eyebrows ("The archive"), in the bright teal used on navy */
html[data-blue] .b-cta-home .oversize-label { font-family: 'Lato', sans-serif !important; font-weight: 900 !important; text-transform: uppercase; }

/* ---------- Normal cursor site wide ----------
   The shared styles draw a branded cursor (an orange disc with a double chevron) on the page and on every clickable
   element; the blue site uses the system cursor: the arrow (or text caret) on the page, the hand on anything clickable. */
@media (hover: hover) and (pointer: fine) {
    html[data-blue] body { cursor: auto !important; }
    html[data-blue] :is(a, button, summary, label[for], [onclick], [role="button"], .op-card, .uc-card, .pillar-card, .resource-card, .industry-card, .film-card,
        .stat-card, .module-card, .ind-chip, .q-card, .nav-item, .icon-btn, .cta-btn, .cta-btn-secondary, .hero-cta-main, .hero-cta-ghost, .mega-link,
        .mega-footer-link, .faq-q, .show-tab, .spot-dot, .search-hint, .footer-login-btn, .social-icon-btn, .nav-mobile-toggle,
        input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], select) { cursor: pointer !important; }
}

/* ---------- Menu: the item under the pointer turns orange ----------
   The menu bar items and the drop-down links only took a faint tint (or no change at all), so it was hard to see which
   one you were on. The item under the pointer, and the menu bar item whose drop-down is open, are now orange. */
html[data-blue] .site-nav .nav-item { transition: color .2s ease, background-color .2s ease; }
html[data-blue] .site-nav .nav-item:hover, html[data-blue] .site-nav .nav-item.on { color: #EB552C !important; background: rgba(235, 85, 44, .08) !important; }
html[data-blue] .site-nav .nav-item:hover .ti, html[data-blue] .site-nav .nav-item.on .ti { color: #EB552C !important; opacity: 1; }
html[data-blue] :is(.mega-link, .mega-footer-link) { transition: color .2s ease; }
html[data-blue] :is(.mega-link, .mega-footer-link):hover { color: #EB552C !important; }
html[data-blue] :is(.mega-link, .mega-footer-link):hover .ti { color: #EB552C !important; }
html[data-blue] .mnav .mnav-sub a:hover { color: #EB552C !important; }
html[data-blue] .mnav .mnav-sub a:hover .ti { color: #EB552C !important; }
/* Privacy Policy: the policy in the Home style. Spacing as on Home, section headings in the Home heading face (sized
   for long-form reading), sub-headings in Lato, teal accents in the side list */
html[data-blue] body:has(.b-legal-hero) .legal-zone { padding: 56px 0 !important; background: #F3F7FA !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) { html[data-blue] body:has(.b-legal-hero) .legal-zone { padding: 48px 0 !important; } }
@media (max-width: 900px) { html[data-blue] body:has(.b-legal-hero) .legal-zone { padding: 40px 0 !important; } }
html[data-blue] body:has(.b-legal-hero) .legal-body h2 { font: 800 clamp(24px, 2.2vw, 30px)/1.15 'Lato', sans-serif !important; letter-spacing: -.03em !important; color: #02263F !important; margin: 44px 0 14px; scroll-margin-top: 110px; }
html[data-blue] body:has(.b-legal-hero) .legal-body h3 { font: 800 17px/1.3 'Lato', sans-serif !important; letter-spacing: -.01em; color: #02263F !important; }
html[data-blue] body:has(.b-legal-hero) .legal-body :is(p, li) { color: rgba(2, 38, 63, .78); }
html[data-blue] body:has(.b-legal-hero) .legal-body a { color: #138E96; }
html[data-blue] body:has(.b-legal-hero) .legal-body a:hover { color: #EB552C; }
html[data-blue] body:has(.b-legal-hero) .legal-body li::marker { color: #138E96; }
html[data-blue] body:has(.b-legal-hero) .legal-rail-title { font: 900 10.5px/1 'Lato', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase; color: #138E96 !important; }
html[data-blue] body:has(.b-legal-hero) .legal-rail a:hover { color: #EB552C !important; }
html[data-blue] body:has(.b-legal-hero) .legal-rail a.active { color: #02263F !important; border-left-color: #138E96 !important; }
html[data-blue] body:has(.b-legal-hero) .legal-card { background: #fff !important; border: 1px solid #E3E7EE !important; border-radius: 18px !important; box-shadow: none !important; }
/* Menu bar search: the magnifier sits over the round search field, so clicks pass through it to the field (which opens
   the search panel); results on the blue pages link to the blue pages (in each page's search script) */
html[data-blue] .site-nav .nav-search-wrap .ti-search { pointer-events: none; }
/* Book a Demo "Trusted by operators worldwide": the copy on the left, the Customers hero's tilted wall of colour logo
   tiles on the right (blue/hero-customers.js and .css), in place of the grey scrolling rows */
html[data-blue] .b-demo-trust { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: center; }
html[data-blue] .b-demo-trust > .container { width: 100%; }
html[data-blue] .b-demo-trust-copy { max-width: 500px; position: relative; z-index: 2; text-align: left; }
html[data-blue] .b-demo-trust-copy h2.b-h2 { margin-bottom: 22px !important; }
html[data-blue] .b-demo-trust .b-cust-wall { top: 32px; bottom: 32px; }
@media (max-width: 900px) { html[data-blue] .b-demo-trust { display: block; min-height: 0; } }
/* Technical: hero and sections spaced like Home; the whitepaper band's label in the bright teal of the dark sections */
html[data-blue] .b-tech-hero { padding-top: 56px !important; padding-bottom: 64px !important; }
html[data-blue] body:has(.b-tech-hero) main > :is(section, div):not(.b-tech-hero):not(.sec-chev):not(.page-spacer):not(.final-cta-wrap):not(.hero-breadcrumb) { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-tech-hero) main > :is(section, div):not(.b-tech-hero):not(.sec-chev):not(.page-spacer):not(.final-cta-wrap):not(.hero-breadcrumb) { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) { html[data-blue] body:has(.b-tech-hero) main > :is(section, div):not(.b-tech-hero):not(.sec-chev):not(.page-spacer):not(.final-cta-wrap):not(.hero-breadcrumb) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-tech-hero) main h2.b-h2 { margin-bottom: 22px !important; }
html[data-blue] body:has(.b-tech-hero) .bb-label { color: #3FC1C9 !important; font-family: 'Lato', sans-serif !important; font-weight: 900 !important; letter-spacing: .16em; }
html[data-blue] body:has(.b-tech-hero) .brochure-band h2.b-h2 { margin: 14px 0 16px !important; }
/* Privacy and Cookie Policy side menu, as on the reference's legal pages: it stays beside the text while you read
   (scrolling on its own when the list is longer than the screen), a thin line down the side with the current section
   marked in teal; on tablets and phones it folds into an "On this page" panel (blue/blue-legal.js) */
html[data-blue] body:has(.b-legal-hero) .legal-rail { position: sticky !important; top: 100px !important; max-height: calc(100vh - 124px); overflow: auto; scrollbar-width: thin; padding-top: 8px; }
html[data-blue] body:has(.b-legal-hero) .legal-rail-title { margin-bottom: 16px !important; }
html[data-blue] body:has(.b-legal-hero) #legalRail { display: grid; gap: 2px; border-left: 1.5px solid #D9E6EF; }
html[data-blue] body:has(.b-legal-hero) #legalRail a { display: block; padding: 7px 0 7px 16px !important; margin-left: -1.5px; border-left: 1.5px solid transparent !important;
    font: 400 14px/1.4 'Lato', sans-serif !important; color: rgba(2, 38, 63, .62) !important; text-decoration: none; background: none !important; transition: color .25s, border-color .25s; }
html[data-blue] body:has(.b-legal-hero) #legalRail a:hover { color: #EB552C !important; }
html[data-blue] body:has(.b-legal-hero) #legalRail a.active { color: #02263F !important; font-weight: 700 !important; border-left-color: #138E96 !important; }
@media (max-width: 980px) {
    html[data-blue] body:has(.b-legal-hero) .legal-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
    html[data-blue] body:has(.b-legal-hero) .legal-rail { position: relative !important; top: auto !important; max-height: none; overflow: visible; padding: 0 18px; border: 1px solid #E3E7EE; border-radius: 16px; background: #fff; }
    html[data-blue] body:has(.b-legal-hero) .legal-rail-title { display: flex; justify-content: space-between; align-items: center; margin: 0 !important; padding: 18px 0; cursor: pointer; color: #02263F !important; }
    html[data-blue] body:has(.b-legal-hero) .legal-rail-title::after { content: ""; width: 9px; height: 9px; border-right: 1.8px solid #138E96; border-bottom: 1.8px solid #138E96; transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s; }
    html[data-blue] body:has(.b-legal-hero) .legal-rail.is-open .legal-rail-title::after { transform: rotate(-135deg); }
    html[data-blue] body:has(.b-legal-hero) .legal-rail.is-folded #legalRail { display: none; }
    html[data-blue] body:has(.b-legal-hero) .legal-rail.is-folded.is-open #legalRail { display: grid; padding-bottom: 14px; border-left: 0; }
    html[data-blue] body:has(.b-legal-hero) .legal-rail.is-folded #legalRail a { padding-left: 0 !important; margin-left: 0; border-left: 0 !important; }
}
html[data-blue] body:has(.b-tech-hero) .newsletter-heading em { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 800 !important; }
/* S2C Designer "Three steps": the number and the step name on one line, so the cards are shorter */
html[data-blue] .b-step-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
html[data-blue] .b-step-head > div { margin: 0 !important; font-size: 2rem !important; }
html[data-blue] .b-step-head > h3 { margin: 0 !important; }
/* Menu drop-downs: every link title at full strength navy (they were 72%, only the first looked solid), so the menu reads clearly */
html[data-blue] .mega-link:not(:hover) { color: #02263F !important; opacity: 1 !important; }
/* Numbered "why" tiles on the module pages and AI page: the same style as the Design / Automate / Deploy steps on Home and
   the S2C Designer page, the three colours navy, deep teal and teal in turn, and the number beside the title */
html[data-blue] .why-tile { border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 16px !important; padding: 26px 26px 24px !important;
    display: grid !important; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; align-content: start; box-shadow: none !important; }
html[data-blue] .why-tile:nth-child(3n+1) { background: #02263F !important; }
html[data-blue] .why-tile:nth-child(3n+2) { background: #0B5258 !important; }
html[data-blue] .why-tile:nth-child(3n) { background: #138E96 !important; }
html[data-blue] .why-tile .why-tile-num { margin: 0 !important; font: 300 2rem/1 'Lato', sans-serif !important; color: rgba(255, 255, 255, .45) !important; }
html[data-blue] .why-tile .why-tile-title { margin: 0 !important; color: #fff !important; font: 900 clamp(1.5rem, 2vw, 2.1rem)/1.1 'Lato', sans-serif !important; letter-spacing: -.02em; }
html[data-blue] .why-tile .why-tile-body { grid-column: 1 / -1; margin: 12px 0 0 !important; color: rgba(255, 255, 255, .9) !important; font: 300 16px/1.6 'Lato', sans-serif !important; }
html[data-blue] .why-tile > :not(.why-tile-num):not(.why-tile-title) { grid-column: 1 / -1; }
/* Breadcrumbs: quieter on every page, as most sites keep them (small, regular weight, muted grey, the current page not
   picked out in colour), so they guide without competing with the hero */
html[data-blue] .hero-breadcrumb { font-size: 10px !important; gap: 5px !important; }
html[data-blue] .hero-breadcrumb, html[data-blue] .hero-breadcrumb * { font-size: 10px !important; font-weight: 400 !important; letter-spacing: .02em !important; }
html[data-blue] .hero-breadcrumb :is(span, a) { color: rgba(2, 38, 63, .48) !important; }
html[data-blue] .hero-breadcrumb > :last-child { color: rgba(2, 38, 63, .62) !important; }
html[data-blue] .hero-breadcrumb .ti { font-size: 9px !important; color: rgba(2, 38, 63, .3) !important; }
html[data-blue] .hero-breadcrumb a:hover { color: #138E96 !important; text-decoration: underline; }
/* Comparison tables (module pages, Technical): tighter rows and frame so they take the space they need */
html[data-blue] .compare-wrap { padding: 6px 18px 12px !important; }
html[data-blue] .compare-table :is(th, td) { padding: 9px 14px !important; line-height: 1.35 !important; }
html[data-blue] .compare-table td { font-size: 14px !important; }
html[data-blue] .compare-table th { font-size: 13.5px !important; padding-top: 12px !important; padding-bottom: 10px !important; }
html[data-blue] .compare-table th :is(small, span, div) { font-size: 10px !important; margin-top: 2px !important; }
/* Blog articles: the same breadcrumb as the other pages (top left under the menu bar, small and quiet), white over the
   photo hero, the article title cut short with an ellipsis; Resources and Blog are links */
html[data-blue] .b-post-crumb { position: absolute; top: calc(var(--nav-h, 80px) / 2 + 50px); left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px;
    padding: 0 24px 0 40px; z-index: 900; display: flex; align-items: center; gap: 5px; font-family: 'Lato', sans-serif; white-space: nowrap; }
html[data-blue] .b-post-crumb :is(a, span) { color: rgba(255, 255, 255, .78) !important; text-decoration: none; text-shadow: 0 1px 6px rgba(2, 38, 63, .55); }
html[data-blue] .b-post-crumb > span:last-child { color: rgba(255, 255, 255, .92) !important; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
html[data-blue] .b-post-crumb .ti { color: rgba(255, 255, 255, .55) !important; }
html[data-blue] .b-post-crumb a:hover { color: #fff !important; text-decoration: underline; }
@media (max-width: 680px) { html[data-blue] .b-post-crumb { display: none; } }
/* Market page heroes: a stronger blue on the left behind the copy, fading to almost clear on the right so the photo shows */
html[data-blue] .b-mkt-page .hero-bg::after { background: linear-gradient(90deg, rgba(2, 38, 63, .95) 0%, rgba(8, 52, 84, .88) 26%, rgba(11, 61, 92, .62) 44%,
    rgba(11, 61, 92, .26) 62%, rgba(19, 142, 150, .06) 80%, rgba(19, 142, 150, 0) 100%) !important; }
@media (max-width: 900px) { html[data-blue] .b-mkt-page .hero-bg::after { background: linear-gradient(180deg, rgba(2, 38, 63, .9) 0%, rgba(8, 52, 84, .8) 55%, rgba(11, 61, 92, .55) 100%) !important; } }
/* Download / form pages (whitepapers, brochures, checklists, case studies and their translations): headings in the
   Home style (h1.b-h1 white on the hero photo, h2.b-h2 beside the form, h2.b-h2-dark over the related downloads),
   and their small labels as the Home eyebrows: teal on light, light teal on the hero and the dark library band */
html[data-blue] body:has(.res-rel-grid) :is(.oversize-label, .sidebar-label) { font: 900 10.5px/1 'Lato', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #138E96 !important; }
html[data-blue] body:has(.res-rel-grid) :is(.hero-section, .zone-dark) .oversize-label { color: #3FC1C9 !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.res-rel-grid) :is(.oversize-label, .sidebar-label) { font-size: 8.9px !important; } }
html[data-blue] body:has(.res-rel-grid) .hero-section h1.b-h1 { margin: 14px 0 18px !important; }
html[data-blue] body:has(.res-rel-grid) .sidebar-label + h2.b-h2 { margin: 12px 0 16px !important; }
html[data-blue] body:has(.res-rel-grid) .dark-label + h2.b-h2 { margin: 12px 0 28px !important; }
/* Resources hero: sized to its content like the other calm heroes, so the eyebrow sits close under the breadcrumb */
html[data-blue] .blog-hero.b-res-hero { min-height: 540px !important; justify-content: flex-start !important; padding-top: 72px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) { html[data-blue] .blog-hero.b-res-hero { padding-top: 64px !important; padding-bottom: 48px !important; } }
/* Device mockups with fitted screens that sit in the text flow (Ericsson page figures), not filling a card */
html[data-blue] :is(.mkt-intro-figure, .about-fig) > .b-swap-mock { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; }
/* Home-style subheadings inside a section (Ericsson: Immediate benefits, ENE data migration) */
html[data-blue] h2.b-h2.b-sub-h2 { margin: 56px 0 18px !important; }
html[data-blue] .op-shot.b-op-graphic { position: relative; overflow: hidden; height: 170px !important; min-height: 170px; }
html[data-blue] .op-shot.b-op-graphic::before, html[data-blue] .op-shot.b-op-graphic::after { display: none !important; }
/* 404 page in the new style: the calm light hero with Home headings, the 404 in the teal gradient, Home eyebrows,
   the second button in the blue gradient; the routes heading as a Home h2 */
html[data-blue] .err-page.b-err-hero > :is(.err-bg, .err-scrim) { display: none !important; }
html[data-blue] .b-err-hero .err-grid { text-align: center; }
html[data-blue] .b-err-hero .blog-eyebrow, html[data-blue] .err-routes .blog-eyebrow { color: #138E96 !important; font: 900 10.5px/1 'Lato', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase; }
html[data-blue] .b-err-hero .err-code { font-family: 'Lato', sans-serif !important; font-weight: 800 !important; font-style: normal !important; background: linear-gradient(100deg, #138E96 10%, #02263F 95%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
html[data-blue] .b-err-hero h1.b-h1 { color: #02263F !important; text-shadow: none !important; margin-left: auto; margin-right: auto; }
html[data-blue] .b-err-hero .err-desc { color: rgba(2, 38, 63, .78) !important; text-shadow: none !important; }
html[data-blue] .b-err-hero .btn-airforce { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; color: #fff !important; border: 0 !important; }
html[data-blue] .err-routes h2.b-h2 { font-style: normal !important; }
html[data-blue] .err-routes-head p { color: rgba(2, 38, 63, .75) !important; }
/* 404 route tiles: all on the Team3 photo under a navy wash, bigger titles, descriptions and icons */
html[data-blue] .err-route { min-height: 172px !important; padding: 24px 26px !important; }
html[data-blue] .err-route::after { background: linear-gradient(180deg, rgba(2, 38, 63, .45) 0%, rgba(2, 38, 63, .72) 55%, rgba(1, 22, 40, .9) 100%) !important; }
html[data-blue] .err-route .err-route-t { font: 800 21px/1.2 'Lato', sans-serif !important; gap: 10px; align-items: center; }
html[data-blue] .err-route .err-route-t .ti { font-size: 24px !important; color: #3FC1C9 !important; }
html[data-blue] .err-route .err-route-d { font-size: 14.5px !important; line-height: 1.45; color: rgba(220, 236, 246, .9) !important; margin-top: 6px; }