/* Curiosity — the data atlas in the site's own design: turquoise hero, white and mist sections,
   Source Sans headlines with turquoise highlights, white cards with hairline borders. */
.cx-page { --cx-ink: #1f2a2e; --cx-body: #55605f; --cx-mut: #7c8a8f; --cx-line: #dfe8ea; --cx-mist: #f4f8f9; --cx-c: #0b8fa8; --cx-c2: #0a6f83; }

/* hero collage — exhibits framed like the site's product screens */
.cx-collage { position: relative; aspect-ratio: 1 / 0.82; }
.cx-col { position: absolute; margin: 0; width: 62%; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 30px 60px -30px rgba(3, 40, 48, 0.65); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.cx-col img { display: block; width: 100%; height: auto; }
.cx-col--1 { left: 0; top: 4%; transform: rotate(-3deg); z-index: 2; }
.cx-col--2 { right: 0; top: 0; width: 56%; transform: rotate(2.5deg); z-index: 1; }
.cx-col--3 { left: 22%; top: 32%; width: 60%; transform: rotate(-0.5deg); z-index: 4; }
.cx-col--4 { left: 2%; bottom: 0; width: 46%; transform: rotate(2deg); z-index: 3; }
.cx-col--5 { right: 2%; bottom: 4%; width: 44%; transform: rotate(-2.5deg); z-index: 5; }
.cx-collage:hover .cx-col--1 { transform: rotate(-4.5deg) translate(-8px, -6px); }
.cx-collage:hover .cx-col--2 { transform: rotate(4deg) translate(8px, -8px); }
.cx-collage:hover .cx-col--4 { transform: rotate(3deg) translate(-8px, 8px); }
.cx-collage:hover .cx-col--5 { transform: rotate(-4deg) translate(8px, 8px); }

/* sticky section bar — same as the products catalogue */
.cx-bar { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cx-line); }
.cx-bar__in { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.cx-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.cx-chips::-webkit-scrollbar { display: none; }
.cx-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--cx-line); border-radius: 999px; background: #fff; color: var(--cx-ink) !important; font: 600 12.5px "Source Sans 3", system-ui, sans-serif; letter-spacing: 0.02em; text-decoration: none !important; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.cx-chip i { font: 600 10px "IBM Plex Mono", monospace; font-style: normal; color: var(--cx-mut); }
.cx-chip:hover { border-color: var(--cx-c); }
.cx-chip.is-on { background: var(--cx-c); border-color: var(--cx-c); color: #fff !important; }
.cx-chip.is-on i { color: rgba(255, 255, 255, 0.8); }
.cx-search { flex: none; display: flex; align-items: center; gap: 8px; width: min(380px, 34vw); height: 38px; padding: 0 12px; border: 1px solid var(--cx-line); border-radius: 8px; background: #fff; color: var(--cx-mut); }
.cx-search:focus-within { border-color: var(--cx-c); box-shadow: 0 0 0 3px rgba(11, 143, 168, 0.14); }
.cx-search svg { width: 16px; height: 16px; flex: none; }
.cx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 14px "Source Sans 3", system-ui, sans-serif; color: var(--cx-ink); }
.cx-search kbd { font: 600 10.5px "IBM Plex Mono", monospace; padding: 1px 6px; border: 1px solid var(--cx-line); border-radius: 4px; color: var(--cx-mut); }

/* sections alternate white / mist like the rest of the site */
.cx-sec { background: #fff; scroll-margin-top: 62px; padding-bottom: clamp(56px, 6vw, 96px) !important; }
.cx-sec:nth-of-type(even) { background: var(--cx-mist); }
.cx-sec.is-hidden, .cx-card.is-hidden { display: none; }

/* exhibit cards */
.cx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.cx-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; color: var(--cx-ink) !important; text-decoration: none !important; transition: border-color 0.25s, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.cx-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--cx-c); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; }
.cx-card:hover, .cx-card:focus-visible { border-color: color-mix(in srgb, var(--cx-c) 45%, var(--cx-line)); box-shadow: 0 28px 44px -32px rgba(6, 60, 72, 0.5); transform: translateY(-3px); }
.cx-card:hover::before { transform: scaleX(1); }
.cx-card__shot { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cx-mist); border-bottom: 1px solid var(--cx-line); }
.cx-card__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.cx-card:hover .cx-card__shot img { transform: scale(1.04); }
.cx-card__n { margin: 18px 20px 0; font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cx-c); }
.cx-card h3 { margin: 6px 20px 6px; font: 600 19px/1.25 "Source Sans 3", system-ui, sans-serif; letter-spacing: -0.005em; color: var(--cx-ink); }
.cx-card p { margin: 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--cx-body); }
.cx-card__go { display: flex; align-items: center; justify-content: space-between; margin: auto 20px 0; padding: 14px 0 16px; border-top: 1px solid var(--cx-line); transform: translateY(14px); font: 600 12px "Source Sans 3", system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-c2); }
.cx-card p { margin-bottom: 16px; }
.cx-card__go { transform: none; }
.cx-card__go i { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cx-line); transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.3s; }
.cx-card:hover .cx-card__go i { background: var(--cx-c); border-color: var(--cx-c); color: #fff; transform: translateX(2px); }
.cx-empty { margin: 0; padding: 64px 16px; text-align: center; color: var(--cx-mut); font-size: 18px; background: #fff; }

/* viewer — site turquoise chrome */
.cxv { position: fixed; inset: 0; z-index: 2147483100; display: flex; flex-direction: column; background: var(--cx-mist); }
.cxv[hidden] { display: none; }
.cxv__bar { display: flex; align-items: center; gap: 14px; padding: 10px clamp(12px, 2vw, 22px); background: var(--cx-c); color: #fff; }
.cxv__meta { flex: 1; min-width: 0; }
.cxv__meta p { margin: 0; display: flex; gap: 12px; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.cxv__meta p span + span::before { content: "·"; margin-right: 12px; color: rgba(255, 255, 255, 0.5); }
.cxv__meta h2 { margin: 2px 0 0; font: 600 clamp(16px, 1.5vw, 20px)/1.2 "Source Sans 3", system-ui, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxv__ctl { display: flex; align-items: center; gap: 4px; flex: none; }
.cxv__btn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; background: transparent; color: #fff !important; font: 600 12px "Source Sans 3", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.cxv__btn:hover { background: #fff; color: var(--cx-c2) !important; }
.cxv__btn:disabled { opacity: 0.35; cursor: default; background: transparent; color: #fff !important; }
.cxv__close { font-size: 22px; line-height: 1; padding: 0; width: 38px; text-transform: none; }
.cxv__zoom { min-width: 48px; text-align: center; font: 600 11px "IBM Plex Mono", monospace; color: rgba(255, 255, 255, 0.85); }
.cxv__thesis { margin: 0; padding: 9px clamp(12px, 2vw, 22px); background: #fff; border-bottom: 1px solid var(--cx-line); font-size: 14.5px; line-height: 1.4; color: var(--cx-body); }
.cxv__stage { position: relative; flex: 1; overflow: auto; padding: 16px; }
.cxv__holder { position: relative; margin: 0 auto; }
.cxv__holder iframe { display: block; border: 0; background: #fff; transform-origin: 0 0; border-radius: 4px; box-shadow: 0 30px 60px -40px rgba(6, 60, 72, 0.55); }
.cxv__spin { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; font-size: 15px; color: var(--cx-body); pointer-events: none; transition: opacity 0.3s; }
.cxv__spin i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cx-line); border-top-color: var(--cx-c); animation: cx-spin 0.8s linear infinite; }
.cxv__spin.is-off { opacity: 0; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
html.cx-lock, html.cx-lock body { overflow: hidden; }

@media (max-width: 1100px) { .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cx-collage { max-width: 560px; margin-top: 12px; }
  .cxv__ctl [data-cxv="out"], .cxv__ctl [data-cxv="in"], .cxv__zoom, #cxv-open { display: none; }
}
@media (max-width: 640px) {
  .cx-grid { grid-template-columns: 1fr; }
  .cx-bar__in { flex-direction: column; align-items: stretch; gap: 8px; }
  .cx-search { width: 100%; }
  .cx-search kbd { display: none; }
  .cxv__ctl [data-cxv="fit"] { display: none; }
  .cxv__thesis { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cx-card, .cx-card__shot img, .cx-col { transition: none; } }

/* the standard — the site's stats band, sized for words instead of numbers */
.cx-page .cx-rules { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.cx-page .cx-rules li { min-width: 0; }
.cx-page .cx-rules b { font-size: clamp(22px, 1.9vw, 30px) !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; white-space: normal; }
.cx-page .cx-rules span { color: var(--cx-c) !important; font: 600 10.5px "IBM Plex Mono", monospace !important; letter-spacing: 0.16em; text-transform: uppercase; }
.cx-page .cx-rules small { color: var(--cx-body) !important; }
@media (max-width: 1100px) { .cx-page .cx-rules { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .cx-page .cx-rules { grid-template-columns: 1fr 1fr !important; } }

/* ==========================================================================
   Vibrant pass — one vivid accent per section, a richer hero, colour on every card
   ========================================================================== */
.cx-page .scm-stage { background: radial-gradient(900px 520px at 88% 8%, rgba(6, 182, 212, 0.55), transparent 60%), radial-gradient(700px 480px at 70% 110%, rgba(99, 102, 241, 0.35), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(16, 185, 129, 0.25), transparent 60%), linear-gradient(135deg, #0a6f83, #0b8fa8 55%, #0e9fbd) !important; }
.cx-page .scm-stage .s-title .hl { color: #a5f3fc !important; -webkit-text-fill-color: #a5f3fc !important; }
.cx-page .cx-col { box-shadow: 0 40px 70px -30px rgba(3, 30, 40, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.5); }
.cx-page .cx-rules b { background: linear-gradient(90deg, #0b8fa8, #6366f1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cx-page .cx-rules li:nth-child(2) b { background-image: linear-gradient(90deg, #f59e0b, #e5484d); }
.cx-page .cx-rules li:nth-child(3) b { background-image: linear-gradient(90deg, #6366f1, #06b6d4); }
.cx-page .cx-rules li:nth-child(4) b { background-image: linear-gradient(90deg, #10b981, #0b8fa8); }
.cx-page .cx-rules li:nth-child(5) b { background-image: linear-gradient(90deg, #e5484d, #f59e0b); }
.cx-page .cx-rules li:nth-child(6) b { background-image: linear-gradient(90deg, #06b6d4, #6366f1); }
.cx-chip { border-color: color-mix(in srgb, var(--sc, #0b8fa8) 35%, #dfe8ea) !important; }
.cx-chip i { color: var(--sc, #0b8fa8) !important; }
.cx-chip:hover { background: color-mix(in srgb, var(--sc, #0b8fa8) 10%, #fff) !important; border-color: var(--sc, #0b8fa8) !important; }
.cx-chip.is-on { background: var(--sc, #0b8fa8) !important; border-color: var(--sc, #0b8fa8) !important; color: #fff !important; }
.cx-chip.is-on i { color: rgba(255, 255, 255, 0.85) !important; }
.cx-sec { --sc: #0b8fa8; }
.cx-sec .s-eyebrow, .cx-sec .s-eyebrow span { color: var(--sc) !important; }
.cx-sec .s-eyebrow::before, .cx-sec .s-eyebrow span::after { background: var(--sc) !important; }
.cx-sec .s-title .hl { color: var(--sc) !important; -webkit-text-fill-color: var(--sc) !important; }
.cx-sec .s-title .hl::after { background: var(--sc) !important; }
.cx-sec { background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 7%, #fff), #fff 420px) !important; }
.cx-card::before { transform: scaleX(1) !important; height: 4px !important; background: var(--sc) !important; }
.cx-card__n { color: var(--sc) !important; }
.cx-card__go { color: var(--sc) !important; }
.cx-card:hover { border-color: var(--sc) !important; box-shadow: 0 30px 46px -30px color-mix(in srgb, var(--sc) 60%, transparent) !important; }
.cx-card:hover .cx-card__go i { background: var(--sc) !important; border-color: var(--sc) !important; }
.cx-card__shot::after { background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--sc) 35%, transparent)) !important; }
.cxv__bar { background: linear-gradient(90deg, #0a6f83, #0b8fa8 50%, #6366f1) !important; }
.cx-page .scm-cta { background: linear-gradient(120deg, #0a6f83, #0b8fa8 50%, #6366f1) !important; }
.cx-page .scm-stage .scm-stage__bg { background: radial-gradient(900px 520px at 88% 8%, rgba(6, 182, 212, 0.6), transparent 60%), radial-gradient(700px 480px at 70% 110%, rgba(99, 102, 241, 0.45), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(16, 185, 129, 0.3), transparent 60%), linear-gradient(135deg, #0a6f83, #0b8fa8 55%, #0e9fbd) !important; opacity: 1 !important; }