/* The brand is the interface: the mark is an engineering drawing on a drafting board. Choose a
   part and it stays solid and is traced, the rest of the mark turns to outline, and callouts
   (js/hero-callouts.js) run from it to its solutions: each a pane of the site header's glass,
   with the solution's measured result in its page's words, counted up in the mark's violet. */
body[data-page="home"] .hero { min-height: 800px; }
.hero-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.hero-art-halo { position: absolute; width: 66%; height: 100%; right: -9%; top: -5%; background: radial-gradient(ellipse, color-mix(in srgb, var(--wave) 12%, transparent), transparent 66%); }
body[data-page="home"] .hero > .wrap { pointer-events: none; }
body[data-page="home"] .hero > .wrap a { pointer-events: auto; }
body[data-page="home"] .hero .lead { max-width: 46ch; width: 47%; }
body[data-page="home"] .hero h1 { max-width: 16ch; width: 50%; }
.brand-explorer { position: absolute; z-index: 3; top: 140px; right: max(20px, calc((100% - var(--maxw)) / 2 - 25px)); width: min(48%, 620px);
  --explorer-out: cubic-bezier(.22, 1, .36, 1); --explorer-in: cubic-bezier(.55, 0, .75, .2); --explorer-io: cubic-bezier(.65, 0, .35, 1);
  --explorer-glass: blur(18px) saturate(160%); /* .site-header.scrolled */ }
/* No perspective on the stage or the panels: a 3D ancestor keeps a pane's glass from blurring what is behind it. */
.brand-stage { position: relative; height: 570px; }
.brand-perspective { position: absolute; width: 430px; height: 420px; left: 50%; top: 30px; transform: translateX(-50%); perspective: 1100px; transition: transform 640ms var(--explorer-out); }
.brand-sculpture { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(18deg) rotateY(-24deg) rotateZ(-7deg); }
.brand-piece { position: absolute; inset: 0; padding: 0; margin: 0; border: 0; background: none; pointer-events: none; transform-style: preserve-3d; transition: transform 520ms var(--explorer-out); }
.brand-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-piece use { pointer-events: visiblePainted; cursor: pointer; }
/* The mark is two flat colours, as in the favicon: the brackets (agents, data) --text, the slash
   and the dot (ml, products) --logo-mark, the wordmark dot's colour. The intro's clones and the
   phone icon carry the same data-part. */
[data-part="ml"], [data-part="products"] { --mark-part: var(--logo-mark); --mark-focus: var(--text); }
/* The depth is drawn: each lamination a hairline outline in its part's colour, the farthest one
   (listed first, layers 5 to 1) a hidden line. The intro's clones keep these classes. */
.brand-edge { fill: none; stroke: color-mix(in srgb, var(--mark-part, var(--text)) 24%, transparent); stroke-width: .6; transform: translate(calc(var(--layer) * 2px), calc(var(--layer) * 6px)); transition: transform 440ms var(--ease), opacity 320ms var(--explorer-out); }
.brand-edge:first-of-type { stroke: color-mix(in srgb, var(--mark-part, var(--text)) 42%, transparent); stroke-dasharray: 2.6 2.4; }
.brand-face { fill: var(--mark-part, var(--text)); stroke: transparent; stroke-width: .8; transition: fill 380ms var(--explorer-out), stroke 380ms var(--explorer-out), transform 520ms var(--explorer-out); }
.brand-explorer:not([data-active=""]) .brand-perspective { transform: translateX(calc(-50% - 48px)); }
.brand-piece[aria-pressed="true"] { z-index: 2; transform: translateZ(28px); }
.brand-piece[aria-pressed="true"] .brand-edge { transform: translate(calc(var(--layer) * 6px), calc(var(--layer) * 12px)); }
.brand-piece[aria-pressed="true"] .brand-face { transform: translate(-5px,-12px); }
/* Chosen: the one solid part, traced; the rest of the mark turns to drawing. */
.brand-explorer:not([data-active=""]) .brand-piece[aria-pressed="false"] .brand-face { fill: transparent; stroke: color-mix(in srgb, var(--mark-part, var(--text)) 50%, transparent); }
.brand-explorer:not([data-active=""]) .brand-piece[aria-pressed="false"] .brand-edge { opacity: .45; }
.brand-trace { fill: none; stroke: var(--mark-focus, var(--logo-mark)); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; pointer-events: none; transition: stroke-dashoffset 260ms var(--explorer-in); }
.brand-piece[aria-pressed="true"] .brand-trace { stroke-dashoffset: 0; transition-duration: 760ms; transition-timing-function: var(--explorer-io); }
.brand-piece:focus-visible { outline: none; }
/* The focus ring takes the other colour of the mark, so it shows on both kinds of part. */
.brand-piece:focus-visible .brand-face { stroke: var(--mark-focus, var(--logo-mark)); stroke-width: 2; }

/* The drafting board: its own plane behind the mark, reaching under the panes so their glass has
   a drawing to blur. A fine grid, corner ticks, and now and then the site's lineage scan crossing it. */
.brand-board { position: absolute; inset: -14% -64% -14% -18%; transform: translateZ(-34px); pointer-events: none; overflow: hidden;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: 30% 50%;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 36% 50%, #000 42%, transparent 100%); mask-image: radial-gradient(ellipse 58% 62% at 36% 50%, #000 42%, transparent 100%); }
.brand-board-scan { position: absolute; inset: 0; transform: translateX(-4%); animation: brand-scan 11s var(--explorer-io) 1.2s infinite; }
.brand-board-scan::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: linear-gradient(transparent, color-mix(in srgb, var(--accent-soft) 70%, transparent) 30%, color-mix(in srgb, var(--accent-soft) 70%, transparent) 70%, transparent); }
.brand-board-scan::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 110px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-soft) 8%, transparent)); }
@keyframes brand-scan { 0% { transform: translateX(-4%); opacity: 0; } 3% { opacity: 1; } 34% { transform: translateX(104%); opacity: 1; } 36%, 100% { transform: translateX(104%); opacity: 0; } }
.brand-ticks { position: absolute; inset: -2%; width: 104%; height: 104%; overflow: visible; transform: translateZ(-34px); pointer-events: none; }
.brand-ticks path { fill: none; stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Callouts (js/hero-callouts.js): from one ring on the chosen part, one to each of its solutions. */
.brand-callouts { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 180ms var(--explorer-in); }
.brand-callouts.is-off { opacity: 0; }
.brand-callouts path { fill: none; stroke: color-mix(in srgb, var(--text) 42%, transparent); stroke-width: 1; stroke-dasharray: 1 1; vector-effect: non-scaling-stroke; }
.brand-callouts circle { fill: var(--bg); stroke: var(--mark-focus, var(--logo-mark)); stroke-width: 1.2; }

/* The solutions. A panel stays in place and leaves discretely, after its panes have faded out. */
.brand-panel { position: absolute; z-index: 5; right: -4px; width: 304px; transition: display 220ms allow-discrete; }
.brand-panel[hidden] { display: none; z-index: 4; pointer-events: none; }
#brand-panel-agents { top: 118px; }
#brand-panel-ml { top: 183px; }
#brand-panel-data { top: 184px; }
#brand-panel-products { top: 321px; }
.brand-panel-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand-panel ul { list-style: none; margin: 0; padding: 0; }
.brand-panel li { position: relative; z-index: calc(6 - var(--row)); margin: 0 0 10px; }
.brand-panel li:nth-child(1) { --row: 0; }
.brand-panel li:nth-child(2) { --row: 1; }
.brand-panel li:nth-child(3) { --row: 2; }
.brand-panel li:nth-child(4) { --row: 3; }
.brand-panel li:nth-child(5) { --row: 4; }
.brand-panel li:focus-within { z-index: 8; }
/* A solution: its icon, its name over what its result measures, and the result's value on the right. */
.brand-panel a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: center; align-items: center; column-gap: 12px; row-gap: 4px; color: var(--text); text-decoration: none; transition: transform 180ms var(--ease), color 180ms var(--ease); }
.brand-panel a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }
.brand-solution-icon { grid-row: 1 / 3; width: 20px; height: 20px; fill: none; color: var(--accent-soft); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-solution-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-solution-name { font: 500 12.5px/1.35 var(--font-body); letter-spacing: -.01em; }
.brand-solution-caption { color: var(--text-muted); font: 400 11px/1.35 var(--font-body); }
.brand-solution-result { display: contents; }
/* Violet while it counts and a moment after, then back to ink. */
.brand-solution-value { grid-column: 3; grid-row: 1 / 3; padding-left: 8px; color: var(--text); font: 600 20px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 560ms var(--explorer-out); }
.brand-solution-value.is-counting { color: var(--logo-mark); transition-duration: 0s; }
.brand-solution-metric { grid-column: 2; grid-row: 2; color: var(--text-muted); font: 400 11px/1.35 var(--font-body); }
.brand-help { position: absolute; top: 520px; width: 100%; text-align: center; margin: 0; font-size: 12px; color: var(--text-muted); transition: opacity 180ms var(--ease); }
.brand-explorer:not([data-active=""]) .brand-help { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .brand-panel li:hover { z-index: 8; }
  /* --accent-text, not --accent-soft: the name stays readable on hover in every concept */
  .brand-panel a:hover { transform: translateX(5px); color: var(--accent-text); }
}

/* Desktop: each solution is a pane of liquid glass that forms out of nothing where its callout
   lands. Nothing between a pane and the page may fade, blur, clip, mask, blend or hold a 3D
   context (each cuts the glass off from what is behind it), so the pane does all its own moving:
   its glass thickens from clear, then its contents come into focus. */
@media (min-width: 861px) {
  .brand-panel a { min-height: 58px; padding: 11px 16px; isolation: isolate; border-radius: calc(var(--radius) - 4px);
    background:
      linear-gradient(180deg, color-mix(in srgb, #fff 7%, transparent), transparent 46%),
      linear-gradient(135deg, color-mix(in srgb, var(--surface-solid) 72%, transparent), color-mix(in srgb, var(--surface-solid) 56%, transparent));
    backdrop-filter: var(--explorer-glass); -webkit-backdrop-filter: var(--explorer-glass);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent), 0 18px 38px -18px color-mix(in srgb, var(--bg-deep) 92%, transparent);
    opacity: 1; translate: 0 0;
    transition: backdrop-filter 520ms var(--explorer-out), opacity 300ms var(--explorer-out), translate 620ms var(--explorer-out), color 180ms var(--ease), transform 180ms var(--ease);
    transition-delay: calc(300ms + var(--row) * 55ms), calc(300ms + var(--row) * 55ms), calc(300ms + var(--row) * 55ms), 0s, 0s; }
  /* the rim: bright at the top left, where the light is, faint across */
  .brand-panel a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, #fff 58%, transparent), color-mix(in srgb, #fff 8%, transparent) 30%, transparent 55%, color-mix(in srgb, #fff 22%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  /* a band of light crosses each pane once as it forms */
  .brand-panel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, transparent 36%, color-mix(in srgb, #fff 12%, transparent) 50%, transparent 64%); background-size: 300% 100%; background-position: 100% 0; }
  .brand-panel:not([hidden]) a::after { animation: brand-sweep 1100ms var(--explorer-out) calc(520ms + var(--row) * 70ms) both; }
  .brand-panel a > :not(.brand-solution-result), .brand-solution-result > * { opacity: 1; filter: none; transition: opacity 360ms var(--explorer-out), filter 420ms var(--explorer-out); transition-delay: calc(360ms + var(--row) * 55ms); }
  .brand-solution-value { transition-property: opacity, filter, color; transition-duration: 360ms, 420ms, 560ms; transition-delay: calc(360ms + var(--row) * 55ms), calc(360ms + var(--row) * 55ms), 0s; }
  .brand-solution-value.is-counting { transition-duration: 360ms, 420ms, 0s; }
  @starting-style {
    .brand-panel:not([hidden]) a { backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); opacity: 0; translate: -18px 0; }
    .brand-panel:not([hidden]) a > :not(.brand-solution-result), .brand-panel:not([hidden]) .brand-solution-result > * { opacity: 0; filter: blur(5px); }
  }
  .brand-panel[hidden] a { opacity: 0; translate: -8px 0; transition: opacity 160ms var(--explorer-in), translate 200ms var(--explorer-in); transition-delay: 0s; }
  .brand-solution-name { font: 500 13px/1.45 var(--font-body); letter-spacing: 0; }
  .brand-solution-caption { display: none; }
}
@keyframes brand-sweep { from { opacity: 1; background-position: 100% 0; } 92% { opacity: 1; } to { opacity: 0; background-position: 0 0; } }
@media (max-width: 1100px) and (min-width: 861px) {
  .brand-explorer { right: 16px; width: 46%; }
  .brand-perspective { width: 350px; height: 350px; top: 65px; }
  .brand-panel { width: 266px; }
  .brand-solution-value { font-size: 18px; }
  /* Here the Data Platforms panes lie over the chosen bracket, and the glass takes some of its ink:
     the label takes a little ink too, so it keeps its contrast over it (≈4:1 → ≈5:1). */
  .brand-solution-metric { color: color-mix(in srgb, var(--text-muted) 75%, var(--text)); }
}

/* Phone: a compact category chooser and ordinary, readable links, each with its result. */
.brand-mobile-intro, .brand-mobile-choices { display: none; }
@media (max-width: 860px) {
  body[data-page="home"] .hero { padding-top: 130px; padding-bottom: 30px; min-height: 0; }
  body[data-page="home"] .hero .lead { width: 100%; max-width: 52ch; }
  body[data-page="home"] .hero h1 { max-width: 16ch; width: 100%; }
  .brand-explorer { position: relative; top: auto; right: auto; width: calc(100% - var(--gutter) * 2); max-width: 520px; margin: 35px auto 0; }
  .hero-art-halo { width: 130%; height: 65%; top: auto; bottom: 0; right: -20%; }
  .brand-stage { height: auto; }
  .brand-perspective, .brand-help, .brand-callouts { display: none; }
  .brand-mobile-intro { display: flex; align-items: center; gap: 17px; margin-bottom: 22px; }
  .brand-mobile-mark { flex: 0 0 52px; display: block; overflow: visible; }
  .brand-mobile-mark path { fill: var(--mark-part, var(--text)); }
  .brand-mobile-intro h2 { margin: 0; font: 500 22px/1.2 var(--font-display); letter-spacing: -.02em; }
  .brand-mobile-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
  .brand-mobile-choices button { min-height: 46px; padding: 10px 12px; font: 500 12px/1.4 var(--font-body); text-align: left; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); background: var(--bg-elev); cursor: pointer; }
  .brand-mobile-choices button[aria-pressed="true"] { color: var(--text); border-color: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 10%, var(--bg-elev)); }
  .brand-mobile-choices button:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
  .brand-catalog .brand-panel { position: static; width: 100%; transition: none; }
  .brand-panel li { margin: 0; }
  .brand-panel a { min-height: 68px; padding: 13px 2px; column-gap: 11px; border-bottom: 1px solid var(--border); }
  .brand-panel a:hover { transform: none; }
  .brand-solution-name { font-size: 14px; }
  .brand-solution-caption { font-size: 12px; }
  .brand-solution-icon { width: 24px; height: 24px; }
  .brand-solution-value { font-size: 19px; }
  .brand-solution-metric { font-size: 11.5px; }
}

/* Keyboard use: parts and panes switch at once. */
.brand-explorer.is-keyboard :is(.brand-perspective, .brand-piece, .brand-edge, .brand-face, .brand-trace, .brand-callouts, .brand-panel, .brand-panel a, .brand-panel a > :not(.brand-solution-result), .brand-solution-result > *) { transition: none; }
.brand-explorer.is-keyboard .brand-panel a::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .brand-perspective, .brand-piece, .brand-edge, .brand-face, .brand-trace, .brand-callouts, .brand-panel, .brand-panel a, .brand-panel[hidden] a, .brand-panel a > :not(.brand-solution-result), .brand-solution-result > * { transition: none; }
  .brand-board-scan { animation: none; opacity: 0; }
  .brand-panel:not([hidden]) a::after { animation: none; }
}