/* VC4 blue version: the S2C Designer hero, set up like the Technical hero. The hero picture and the laptop picture are
   gone; the calm background (.b-calm in blue/blue.css) and the reference site's 3D city block (blue/hero-designer.js)
   take their place. The scene box and its labels use .b-scene from blue/blue.css; the rules below are the reference
   designer.html's own additions (labels that hang below their point, the shift that keeps a card clear of the copy,
   the flat picture when there is no WebGL), with its colour tokens written out. Everything is scoped to this hero. */

/* ---------- Copy: one column on the left, dark text on the light hero ---------- */
html[data-blue] .b-des-hero .hero-grid { grid-template-columns: 1fr; }
html[data-blue] .b-des-hero .b-scene-copy { max-width: 560px; position: relative; z-index: 2; }
html[data-blue] .b-des-hero .hero-subcopy { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-des-hero .hero-subcopy strong { color: #02263F; }

/* ---------- Scene box: on the right, beside the copy ---------- */
.b-des-scene { top: 24px; }

/* ---------- Labels (reference designer.html) ---------- */
/* labels near the top of the scene hang below their point, so a card never rises into the copy */
.b-des-scene .tag.below .in { bottom: auto; top: 0; flex-direction: column-reverse; }
.b-des-scene .tag.below .pin { background: linear-gradient(rgba(19, 142, 150, .2), #138E96); }
.b-des-scene .tag.below .pin::after { margin: -4px 0 0 -3.75px; }
.b-des-scene .tag.below:not(.on) .card { transform: translateY(-10px) scale(.9); }
/* the shift the script works out to keep each card on screen and clear of the copy */
.b-des-scene .tag .card { translate: var(--sh, 0px) 0; }
.b-des-scene .tag b .n { display: inline-block; min-width: 1ch; }

/* ---------- No WebGL: the laptop picture in place of the scene ---------- */
.b-des-scene .flatimg { display: none; }
.b-des-scene.flat .flatimg { display: block; position: absolute; left: 4%; right: 4%; top: 10%; bottom: 8%; width: 92%; height: 82%; object-fit: contain;
    filter: drop-shadow(0 40px 50px rgba(2, 38, 63, .25)); }

/* ---------- Tablet and phone: the scene under the copy ---------- */
@media (max-width: 900px) {
    .b-des-scene { top: auto; margin-top: 6px; height: min(80vw, 500px); }
    .b-des-scene .tag.below .in { transform-origin: 50% 0; }
}
@media (max-width: 560px) {
    .b-des-scene { margin-top: 0; height: min(88vw, 400px); }
}

/* ---------- Darker hero: a navy gradient in place of the calm Team 3 picture, white copy ---------- */
html[data-blue] .b-calm.b-des-hero { background: radial-gradient(60% 70% at 78% 40%, rgba(19, 142, 150, .28) 0%, rgba(19, 142, 150, 0) 70%),
    linear-gradient(120deg, #011628 0%, #02263F 45%, #0B3554 75%, #0E4A75 100%), #02263F !important; color: #fff; }
html[data-blue] .b-des-hero .oversize-label { color: #3FC1C9 !important; display: block; }
html[data-blue] .b-des-hero h1.b-h1 { color: #fff !important; }
html[data-blue] .b-des-hero h1.b-h1 em .w > span { background-image: linear-gradient(100deg, #3FC1C9 10%, #ADDDF6 95%); }
html[data-blue] .b-des-hero .hero-subcopy { color: rgba(220, 236, 246, .86) !important; }
html[data-blue] .b-des-hero .hero-subcopy strong { color: #fff; }
html[data-blue] body:has(.b-des-hero) .hero-breadcrumb, html[data-blue] body:has(.b-des-hero) .hero-breadcrumb * { color: rgba(220, 236, 246, .75) !important; }
html[data-blue] body:has(.b-des-hero) .hero-breadcrumb { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* ---------- Brochure tile on image 86, under a navy wash that clears to the right ---------- */
html[data-blue] .brochure-band { background: linear-gradient(100deg, rgba(2, 38, 63, .92) 0%, rgba(2, 38, 63, .72) 50%, rgba(2, 38, 63, .35) 100%),
    url('images/86.jpg') center / cover no-repeat, #02263F !important; }
html[data-blue] .brochure-band::before, html[data-blue] .brochure-band::after { background: none !important; background-image: none !important; }
html[data-blue] .brochure-band h2.b-h2 { margin: 14px 0 16px !important; }
html[data-blue] .brochure-band .bb-label { color: #3FC1C9 !important; }
/* "Watch the video" on the dark hero: a light outline with white text so it reads on navy */
html[data-blue] .b-des-hero .btn-ghost-teal { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(173, 221, 246, .55) !important; color: #fff !important; }
html[data-blue] .b-des-hero .btn-ghost-teal:hover { background: rgba(255, 255, 255, .14) !important; border-color: #ADDDF6 !important; }
html[data-blue] .b-des-hero .btn-ghost-teal .ti { color: #fff !important; }
/* the brochure form: HubSpot draws it straight into the page here (not in an iframe), so the page's own embed styles
   never reach it; the same look (white text, pill fields on the dark tile, teal button) set directly */
html[data-blue] #hs-brochure-form .hs-form { font-family: 'Lato', sans-serif; color: #fff; }
html[data-blue] #hs-brochure-form :is(.hs-form-field label, .hs-form-required, .hs-richtext, .hs-richtext p, .hs-richtext a, .legal-consent-container, .legal-consent-container a) { color: #fff !important; font: 400 13px/1.5 'Lato', sans-serif; }
html[data-blue] #hs-brochure-form .hs-form-field { margin-bottom: 12px; }
html[data-blue] #hs-brochure-form fieldset { max-width: none !important; display: flex; gap: 12px; }
html[data-blue] #hs-brochure-form fieldset > div { flex: 1 1 0; width: auto !important; float: none !important; }
html[data-blue] #hs-brochure-form .input { margin: 0 !important; }
html[data-blue] #hs-brochure-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 rgba(255, 255, 255, .35) !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; font: 400 14px 'Lato', sans-serif; margin-top: 4px; }
html[data-blue] #hs-brochure-form textarea.hs-input { border-radius: 18px !important; min-height: 80px; }
html[data-blue] #hs-brochure-form .hs-input::placeholder { color: rgba(255, 255, 255, .6); }
html[data-blue] #hs-brochure-form :is(.hs-error-msg, .hs-error-msgs label) { color: #ffd2c4 !important; }
html[data-blue] #hs-brochure-form .hs-button { padding: 12px 28px !important; border-radius: 30px !important; border: none !important; background: #EB552C !important; color: #fff !important;
    font: 700 .9rem 'Lato', sans-serif; letter-spacing: .03em; cursor: pointer; margin-top: 8px; }
html[data-blue] #hs-brochure-form .hs-button:hover { background: #cf4521 !important; }