/* VC4 blue version: the Contact page hero, ported from the reference site (Dave's contact.html, "block: contact-hero,
   copy on the left, direct lines on the right" and "block: direct-lines, every number and address as plain
   selectable text plus a copy button"). blue/hero-contact.js wires the copy buttons. Styles are the reference's own,
   with its colour tokens (assets/theme.css + assets/themes/s2c.css) written out and its fonts set in Lato as on the
   rest of the blue site. Everything is scoped to .b-ct-hero / .b-ct- so nothing else on the site changes. */

/* ---------- Hero frame: calm background (blue.css .b-calm), copy on the left, direct lines on the right ---------- */
html[data-blue] .b-ct-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
html[data-blue] .b-ct-hero .hero-left { max-width: 540px; }

/* Hero text on the light background: teal eyebrow (as on the reference), navy copy */
html[data-blue] .b-ct-hero .oversize-label { color: #138E96 !important; }
html[data-blue] .b-ct-hero .section-sub { color: rgba(2, 38, 63, .8) !important; }

/* ---------- Direct lines: rise in 0.7s after the page opens ---------- */
.b-ct-lines { display: grid; gap: 10px; opacity: 0; animation: bCtFadeUp 1s cubic-bezier(.16, 1, .3, 1) .7s forwards; }
@keyframes bCtFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.b-ct-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 14px 14px 16px; border-radius: 18px;
    background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(2, 38, 63, .07); box-shadow: 0 18px 40px -30px rgba(2, 38, 63, .4); }
.b-ct-line .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #F0F6FA; color: #138E96; }
.b-ct-line.sales .ic { color: #EB552C; }
.b-ct-line small { display: block; font: 900 10px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8296A3; margin-bottom: 6px; }
.b-ct-line .v { display: block; font: 700 clamp(16px, 1.5vw, 19px)/1.2 'Lato', sans-serif; letter-spacing: -.01em; color: #02263F; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.b-ct-line .acts { display: flex; gap: 6px; }
/* copy and call / email buttons: white pills, teal on hover, solid teal for a moment once copied */
.b-ct-cbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 12px; border-radius: 999px; border: 1px solid #E3E7EE; background: #FFFFFF;
    font: 700 12.5px/1 'Lato', sans-serif; letter-spacing: 0; text-transform: none; color: #02263F; cursor: pointer; text-decoration: none; box-shadow: none;
    transition: border-color .25s, background .25s, color .25s; }
.b-ct-cbtn:hover { border-color: #138E96; color: #138E96; }
.b-ct-cbtn.done { background: #138E96; border-color: #138E96; color: #FFFFFF; }
.b-ct-cbtn.icon { width: 36px; padding: 0; justify-content: center; }

@media (max-width: 900px) { html[data-blue] .b-ct-hero .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
    .b-ct-line { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; } .b-ct-line .ic { width: 38px; height: 38px; } .b-ct-line .acts { grid-column: 2; }
}

/* ---------- The sections below the hero in the Home rhythm: 56px, 48px on laptops, 40px on phones ---------- */
html[data-blue] body:has(.b-ct-hero) main > section:not(.b-ct-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-ct-hero) main > section:not(.b-ct-hero) { padding-top: 48px !important; padding-bottom: 48px !important; } }
@media (max-width: 900px) { html[data-blue] body:has(.b-ct-hero) main > section:not(.b-ct-hero) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-ct-hero) #contact-form .sidebar-body { color: rgba(2, 38, 63, .78) !important; }

/* ---------- The map in the hero (blue/hero-contact-map.js): dotted continents, messages arcing in to Alkmaar ---------- */
.b-ct-map { position: relative; height: clamp(320px, 34vw, 440px); }
.b-ct-map canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease .2s; }
.b-ct-map.ready canvas { opacity: 1; }
.b-ct-hq { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.b-ct-hq > span { position: absolute; left: 14px; top: -42px; white-space: nowrap; background: rgba(255, 255, 255, .94); 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); transition: transform .3s ease; }
.b-ct-hq small { display: block; font: 900 9px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #EB552C; margin-bottom: 4px; }
.b-ct-hq b { display: block; font: 700 13px/1.2 'Lato', sans-serif; color: #02263F; }
.b-ct-hq.ping > span { animation: bCtPing .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes bCtPing { 40% { transform: translateY(-4px) scale(1.04); } }
/* the inbox card: the latest messages, newest on top */
.b-ct-inbox { position: absolute; right: 2%; bottom: 4%; width: 250px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(2, 38, 63, .08); border-radius: 16px; padding: 12px 14px 8px; box-shadow: 0 22px 44px -22px rgba(2, 38, 63, .45); font-family: 'Lato', sans-serif; }
.b-ct-inbox .hd { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(95, 153, 187, .2); }
.b-ct-inbox .hd .ti { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #138E96, #02263F); font-size: 15px; }
.b-ct-inbox .hd b { font: 900 12.5px/1.2 'Lato', sans-serif; color: #02263F; }
.b-ct-inbox .hd span { font: 700 9.5px/1.3 'Lato', sans-serif; color: #138E96; letter-spacing: .02em; }
.b-ct-inbox ul { list-style: none; margin: 0; padding: 0; min-height: 132px; }
.b-ct-inbox li { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(95, 153, 187, .12); animation: bCtIn .5s cubic-bezier(.16, 1, .3, 1); }
.b-ct-inbox li:last-child { border-bottom: 0; }
.b-ct-inbox li > i { width: 8px; height: 8px; border-radius: 50%; background: #3FC1C9; box-shadow: 0 0 0 3px rgba(63, 193, 201, .2); }
.b-ct-inbox li:first-child > i { background: #EB552C; box-shadow: 0 0 0 3px rgba(235, 85, 44, .2); }
.b-ct-inbox li b { display: block; font: 800 12px/1.2 'Lato', sans-serif; color: #02263F; }
.b-ct-inbox li small { display: block; font: 400 11px/1.3 'Lato', sans-serif; color: rgba(2, 38, 63, .6); }
.b-ct-inbox li span { font: 700 10px/1 'Lato', sans-serif; color: rgba(2, 38, 63, .45); }
@keyframes bCtIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .b-ct-map { height: min(78vw, 380px); margin-top: 8px; } }
@media (max-width: 560px) { .b-ct-inbox { width: 210px; right: 0; bottom: 0; } .b-ct-hq > span { top: -38px; } }

/* ---------- Get directions: the teal-to-navy gradient of the blue buttons ---------- */
html[data-blue] #visit .cbtn.primary { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important; background-position: 0 50%; color: #fff !important;
    border: 0 !important; box-shadow: 0 12px 28px -12px rgba(2, 38, 63, .45) !important; transition: background-position .4s ease, transform .25s ease; }
html[data-blue] #visit .cbtn.primary:hover { background-position: 100% 50% !important; transform: translateY(-2px); }

/* ---------- Who you'll be talking to: a calm, dark version of the Team3 photo ---------- */
html[data-blue] #who-to-ask { background: linear-gradient(100deg, rgba(1, 22, 40, .9) 0%, rgba(2, 38, 63, .8) 45%, rgba(2, 38, 63, .66) 100%), url('images/Team3.jpg') center 35% / cover no-repeat !important; }
html[data-blue] #who-to-ask > .zone-bg { display: none !important; }
/* the map runs out past its column towards the window edge, so the continents read large; the inbox sits lower right,
   over the Indian Ocean, clear of Europe and the Americas */
@media (min-width: 901px) {
    html[data-blue] .b-ct-hero .hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
    .b-ct-map { width: calc(100% + min(8vw, 140px)); margin-right: calc(-1 * min(8vw, 140px)); height: clamp(360px, 36vw, 480px); }
    .b-ct-inbox { right: auto; left: 52%; bottom: 0; }
}