/* VC4 blue version: the About page hero, set up like the reference site's about.html (Dave's): the calm light hero
   with navy copy on the left and the reference's dotted globe (blue/hero-about.js) on the right.
   The globe box and pin labels are the reference's own styles (.globe, .gpin), renamed b-about-globe / b-about-pin,
   with its color tokens written out from assets/theme.css + assets/themes/s2c.css. Lato, the site font, stands in
   for the reference's Sora and JetBrains Mono. Its top offset loses the reference's 76px header, which sits outside
   the hero here. */

/* ---------- Hero copy on the light background: navy text, buttons keep their colors ---------- */
html[data-blue] .b-about-hero .oversize-label { color: #138E96; }
html[data-blue] .b-about-hero .section-sub { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-about-hero .section-sub strong { color: #02263F; }
/* the copy keeps to the left so the globe has room beside it (reference: .ab-hero .copy{max-width:520px}) */
html[data-blue] .b-about-hero .hero-left { max-width: 520px; position: relative; z-index: 2; }

/* ---------- Hero globe: a dotted globe with the places VC4 works from ---------- */
.b-about-globe { position: absolute; top: 0; bottom: 0; right: max(-1%, calc((100vw - 1500px) / 2)); width: min(58%, 820px); z-index: 1; pointer-events: none; }
.b-about-globe canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease .2s; }
.b-about-globe.ready canvas { opacity: 1; }
.b-about-pin { position: absolute; left: 0; top: 0; will-change: transform; opacity: 0; transition: opacity .5s ease; }
.b-about-pin.vis { opacity: 1; }
.b-about-pin > span { position: absolute; left: 14px; top: -15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(2, 38, 63, .07);
    border-radius: 12px; padding: 7px 11px 8px; box-shadow: 0 14px 30px -14px rgba(2, 38, 63, .35); font-size: 12.5px; color: #3B5160; }
.b-about-pin span b { display: block; font: 700 13px/1.2 'Lato', sans-serif; color: #02263F; letter-spacing: -.01em; }
.b-about-pin span small { display: block; font: 900 9px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #138E96; margin-bottom: 4px; }
.b-about-pin.hq span small { color: #EB552C; }
.b-about-pin.l > span { left: auto; right: 14px; }
@media (max-width: 1100px) { .b-about-globe { width: 56%; right: -6%; } }
@media (max-width: 900px) {
    /* the globe sits under the buttons with its own room, never tucked up behind them */
    .b-about-globe { position: relative; top: auto; right: auto; width: auto; height: min(86vw, 460px); margin: 28px auto 0; max-width: 560px; }
}
@media (max-width: 560px) {
    .b-about-globe { height: min(92vw, 380px); margin-top: 18px; }
    .b-about-pin > span { font-size: 11.5px; padding: 6px 9px 7px; }
    .b-about-pin span b { font-size: 12px; }
    .b-about-pin.opt { display: none; }
}

/* ---------- The sections below the hero in the Home style: teal eyebrows (light teal on the dark sections), Home spacing ---------- */
html[data-blue] body:has(.b-about-hero) main > section:not(.b-about-hero) .oversize-label { color: #138E96 !important; font: 900 10.5px/1 'Lato', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase; }
html[data-blue] body:has(.b-about-hero) main > section:is(.zone-dark, .zone-image):not(.b-about-hero) .oversize-label { color: #3FC1C9 !important; }
html[data-blue] body:has(.b-about-hero) main > section:not(.b-about-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-about-hero) main > section:not(.b-about-hero) { padding-top: 48px !important; padding-bottom: 48px !important; }
    html[data-blue] body:has(.b-about-hero) main > section:not(.b-about-hero) .oversize-label { font-size: 8.9px !important; } }
@media (max-width: 900px) { html[data-blue] body:has(.b-about-hero) main > section:not(.b-about-hero) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-about-hero) main > section:not(.b-about-hero) .b-h2 { margin-bottom: 18px; }

/* ---------- Our History: the blue gradient band of the Customers timeline instead of the orange and red artwork;
   the spine, dots and tags in teal (the odd orange dot kept as an accent), the ghost years in light blue ---------- */
html[data-blue] #history { background: radial-gradient(1100px 620px at 88% 8%, rgba(19, 142, 150, .38), transparent 60%),
    radial-gradient(900px 600px at 6% 92%, rgba(63, 193, 201, .18), transparent 62%),
    linear-gradient(165deg, #011628 0%, #02263F 38%, #0B3D5C 72%, #0B5258 100%) !important; }
html[data-blue] #history > :is(.bg-img, .bg-overlay) { display: none !important; }
html[data-blue] #history .timeline::before { background: linear-gradient(180deg, rgba(63, 193, 201, 0), #3FC1C9 8%, #ADDDF6 50%, #138E96 92%, rgba(19, 142, 150, 0)) !important; box-shadow: 0 0 10px rgba(63, 193, 201, .45) !important; }
html[data-blue] #history .tl-dot { background: #3FC1C9 !important; box-shadow: 0 0 0 4px rgba(63, 193, 201, .22), 0 0 14px rgba(63, 193, 201, .6) !important; }
html[data-blue] #history .timeline-item:nth-child(4n) .tl-dot { background: #EB552C !important; box-shadow: 0 0 0 4px rgba(235, 85, 44, .22), 0 0 14px rgba(235, 85, 44, .55) !important; }
html[data-blue] #history .tl-badge { color: #3FC1C9 !important; background: rgba(63, 193, 201, .12) !important; border-color: rgba(63, 193, 201, .4) !important; }
html[data-blue] #history .tl-year { color: rgba(63, 193, 201, .12) !important; -webkit-text-stroke: 2px rgba(173, 221, 246, .4) !important; }
html[data-blue] #history .tl-card { border-color: rgba(173, 221, 246, .2) !important; }
html[data-blue] #history .tl-card:hover { border-color: rgba(63, 193, 201, .6) !important; }