/* Existing site header stays intact. The showcase pairs original company copy
   with one scientific outcome and its evidence, beside a company list. */
.results-document { scroll-behavior: auto; }
.results-page { --results-nav-height: 52px; }
.results-skip { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--bg-2); padding: 12px 20px; }
.results-skip:focus { top: 12px; }
.results-showcase { overflow-anchor: none; }
.results-mobile-jump, .result-mobile-logo { display: none; }
.results-navigator { position: sticky; top: var(--nav-h); z-index: 8; background: var(--bg-0); border-bottom: var(--rule); }
.results-team-nav { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.results-team-nav a { --selection-inset: 4px; position: relative; isolation: isolate; display: inline-flex; align-items: center; flex-shrink: 0; min-height: 64px; padding: 8px 14px; text-decoration: none; font: var(--type-small); color: var(--text-muted); white-space: nowrap; }
.results-team-nav a::before { content: ''; position: absolute; inset: var(--selection-inset) 6px; z-index: -1; border: 1px solid transparent; pointer-events: none; }
.results-team-nav a[aria-current]::before { background: var(--bg-1); border-color: var(--hairline); }
.results-team-nav a[aria-current]::after {
  content: ''; position: absolute; inset: calc(var(--selection-inset) - 4px) 2px; pointer-events: none;
  background:
    linear-gradient(var(--crosshair), var(--crosshair)) left top 4px / 9px 1px,
    linear-gradient(var(--crosshair), var(--crosshair)) left 4px top / 1px 9px,
    linear-gradient(var(--crosshair), var(--crosshair)) right top 4px / 9px 1px,
    linear-gradient(var(--crosshair), var(--crosshair)) right 4px top / 1px 9px,
    linear-gradient(var(--crosshair), var(--crosshair)) left bottom 4px / 9px 1px,
    linear-gradient(var(--crosshair), var(--crosshair)) left 4px bottom / 1px 9px,
    linear-gradient(var(--crosshair), var(--crosshair)) right bottom 4px / 9px 1px,
    linear-gradient(var(--crosshair), var(--crosshair)) right 4px bottom / 1px 9px;
  background-repeat: no-repeat;
}
.results-team-nav a[aria-current] { color: var(--text-heading); font-weight: 600; }
.result-brand-image { overflow: hidden; }
.results-team-nav a .result-brand-image { width: 160px; height: 40px; object-fit: contain; object-position: left center; opacity: .4; transform: none; transition: opacity 160ms ease; }
.results-team-nav a:hover .result-brand-image { opacity: .65; }
.results-team-nav a[aria-current] .result-brand-image { opacity: 1; transform: none; }
.results-team-nav a:hover { color: var(--accent-dim); }
.results-team-nav a:focus-visible { outline-offset: -3px; }
.result-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; padding: 48px 0; border-bottom: var(--rule); scroll-margin-top: calc(var(--nav-h) + var(--results-nav-height) + 24px); align-items: start; }
.result-company, .result-outcome { min-width: 0; }
/* Panel titles run above the site's 12px label size. */
.results-showcase .result-panel-label { font-size: 18px; font-weight: 700; }
/* The Reactorfield mark, as in the site header, signs the outcome. */
.result-label-mark { display: inline-block; width: 1.5em; height: 1.5em; margin: -.25em .5em -.25em 0; vertical-align: middle; }
.result-panel-label { margin: 0 0 16px; text-align: center; }
.result-company { grid-column: 1; grid-row: 1; }
.result-company.is-expanded-desktop > summary { display: none; }
.result-outcome { grid-column: 2; grid-row: 1; }
.result-outcome { color: inherit; text-decoration: none; }
.result-demo-link:hover .result-image-link { box-shadow: 0 0 0 2px var(--accent-dim); }
.result-mission { font: var(--type-body); color: var(--text-heading); }
.result-company-facts { padding-left: 20px; margin-top: 20px; font: var(--type-small); }
.result-company-facts li { padding-left: 4px; }
.result-company-facts li + li { margin-top: 14px; }
.result-company-facts li::marker { color: var(--accent-dim); }
.result-presenter { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.result-presenter-desktop { display: none; }
.result-members { font: var(--type-small); color: var(--text-heading); font-weight: 500; }
.result-members::before { content: 'Presented by'; display: block; margin-bottom: 6px; font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.result-presenter-photo { width: 56px; height: auto; flex-shrink: 0; border-radius: 3px; }
.result-presenter-round { border-radius: 50%; }
.result-presenter-mirrored { transform: scaleX(-1); }
.result-outcome h3 { font: 500 clamp(28px, 2.6vw, 36px) / 1.18 var(--font-display); letter-spacing: var(--ls-heading); text-wrap: pretty; }
.result-figure { margin: 24px 0 0; }
.result-demo-link { display: block; color: var(--accent-dim); text-decoration: none; }
.result-play { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; color: var(--bg-2); background: var(--text-heading); border-radius: 4px; font: 500 13px / 1.2 var(--font-display); box-shadow: 0 1px 5px #0002; }
.result-image-link { position: relative; display: grid; place-items: center; aspect-ratio: var(--crop-ratio); overflow: hidden; background: var(--bg-1); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--hairline); cursor: pointer; }
.result-slide-crop { width: 100%; }
#result-marathon-fusion .result-play, #result-kathy .result-play { color: var(--text-heading); background: var(--bg-0); box-shadow: 0 1px 5px #0004; }
.result-crop { display: block; position: relative; aspect-ratio: var(--crop-ratio); overflow: hidden; }
.result-crop img { position: absolute; display: block; width: var(--crop-width); max-width: none; height: auto; left: var(--crop-left); top: var(--crop-top); }
.result-demo-link:focus-visible { outline: 3px solid var(--accent-dim); outline-offset: 4px; }

/* The final application shares the same company panel and selector. */
.results-nav-divider { display: block; flex-shrink: 0; border-top: var(--rule); margin: 16px 6px; }
.results-team-nav a.application-identity, .application-identity { gap: 10px; color: var(--text-muted); font: 500 20px / 1.2 var(--font-display); text-decoration: none; }
.results-team-nav a.application-identity[aria-current] { font-size: 20px; color: var(--text-heading); }
.application-intro .result-mission { font: 600 clamp(28px, 2.6vw, 36px) / 1.18 var(--font-display); letter-spacing: var(--ls-heading); text-wrap: balance; }
.application-outcome h3 { margin-bottom: 16px; }
.application-form iframe { display: block; width: 100%; border: 0; }

/* Desktop reads left to right: company menu, the chosen company, then its
   outcome. */
@media (min-width: 1100px) {
  .results-page .cohort-directory > .frame { padding-top: 0; padding-bottom: 0; }
  .results-page .brand-back-top, .results-page .cohort-directory-nav { display: none; }
  .results-page .cohort-directory-head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .result-presenter-mobile { display: none; }
  /* Both panel labels hang from one hairline, so the company copy and the
     outcome read as two halves of the same row. */
  .is-enhanced .result-panel-label { padding-bottom: 12px; margin-bottom: 20px; border-bottom: var(--rule); }
  .is-enhanced .result-company .result-panel-label { text-align: left; }
  .result-presenter-desktop { display: flex; gap: 16px; min-height: 76px; margin: 20px 0 0; padding-top: 20px; border-top: var(--rule); }
  .result-presenter-desktop .result-presenter-photo { width: 76px; align-self: flex-start; }
  .result-outcome h3 { font-size: clamp(26px, calc(4.1vw - 22px), 37px); font-weight: 600; line-height: 1.14; text-align: center; }
  .result-headline-line { display: block; }
  .result-figure { width: 82%; max-width: 500px; margin-inline: auto; }
  .results-showcase {
    --showcase-width: min(1400px, calc(100vw - 80px));
    --showcase-columns: 244px minmax(0, 1fr) minmax(0, 1.35fr);
    --showcase-gap: 36px;
    width: var(--showcase-width);
    margin-left: calc((100% - var(--showcase-width)) / 2);
  }
  .is-enhanced .results-stage {
    display: grid;
    grid-template-columns: var(--showcase-columns);
    gap: var(--showcase-gap);
    padding: 32px 0 64px;
    /* The page's triangle field continues behind the menu; results.js keeps
       these tiles in step with the body's. */
    background-color: var(--bg-0);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%20viewBox='0%200%2056%2056'%3E%3Cpath%20d='M29.63%2026.37%20L28.21%2030.33%20L25.67%2027.79%20Z'%20fill='rgba(17,24,20,0.16)'/%3E%3C/svg%3E");
    background-size: var(--grid-size) var(--grid-size);
  }
  /* The list is a menu on the open triangle field. The companies and "You"
     share one filled card, like the homepage persona rows: the card itself
     never moves or resizes, only its content changes. */
  /* The stage pins below the header while the page scrolls through one step
     per entry; results.js sets the track length and the pin offset. The stage
     reaches the bottom of the window, so no empty page shows beneath it. */
  .results-showcase.is-enhanced::after { content: ''; display: block; height: var(--scroll-track, 0px); }
  .results-showcase.is-enhanced .results-stage { position: sticky; top: var(--stage-top, var(--nav-h)); min-height: calc(100vh - var(--stage-top, var(--nav-h))); align-content: start; }
  .is-enhanced .results-stage::before { content: ''; grid-column: 2 / -1; grid-row: 1; background: var(--bg-1); }
  .is-enhanced .results-stories { display: contents; }
  .is-enhanced .result-story {
    grid-column: 2 / -1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--showcase-gap);
    align-items: start;
    min-width: 0;
    min-height: var(--menu-height, 0px);
    margin: 0;
    padding: var(--pad-panel);
    border: 0;
    scroll-margin-top: calc(var(--nav-h) + 32px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 0s 160ms;
  }
  .is-enhanced .result-story.is-active { opacity: 1; visibility: visible; transition: opacity 160ms ease; }
  .is-enhanced .result-company { grid-column: 1; }
  .is-enhanced .result-outcome { grid-column: 2; }
  .is-enhanced .result-outcome > .result-panel-label { color: var(--accent-dim); }
  /* The application takes the card's size rather than setting it: the form
     fills the space under its heading and scrolls within it. */
  .is-enhanced .result-application { box-sizing: border-box; height: 0; min-height: 100%; grid-template-rows: minmax(0, 1fr); }
  .is-enhanced .application-outcome { display: flex; flex-direction: column; align-self: stretch; min-height: 0; }
  .is-enhanced .application-form { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .is-enhanced .results-navigator {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    top: auto;
    border: 0;
    background: none;
    z-index: 1;
  }
  /* The menu's label shares the card labels' hairline. */
  .is-enhanced .results-nav-label { margin: var(--pad-panel) 0 0; padding-left: 18px; text-align: left; white-space: nowrap; }
  .is-enhanced .results-team-nav { display: flex; flex-direction: column; gap: 0; overflow: visible; }
  /* The list reads as a menu without saying so: hairline rows, left-aligned
     entries and a chevron on each one. The chosen row becomes a tab of the
     card, so it needs no chevron or frame of its own. */
  .is-enhanced .results-team-nav a { justify-content: flex-start; width: 100%; height: 42px; min-height: 0; padding: 5px 36px 5px 18px; border: 0; }
  .is-enhanced .results-team-nav a + a { border-top: var(--rule); }
  /* Rows are solid so the triangle field never runs through a logo. */
  .is-enhanced .results-team-nav a { background: var(--bg-0); }
  /* A divider sets "You" apart from the cohort, in the same menu. */
  .is-enhanced .results-nav-divider { margin: 12px 0; border-top: var(--rule); }
  /* Every asset uses the same canvas, with its main lettering on the centerline. */
  .is-enhanced .results-team-nav a .result-brand-image { width: 144px; height: 36px; flex: 0 0 144px; opacity: .45; }
  .is-enhanced .results-team-nav a:hover .result-brand-image { opacity: .8; }
  /* Stacked logos fill the whole canvas, so they are scaled down to match the
     weight of single-line ones; the centerline stays put. */
  .is-enhanced .results-team-nav a .result-brand-image { transform: scale(var(--logo-scale, 1)); transform-origin: left center; }
  .is-enhanced .results-team-nav [data-result-link="xilio"], .is-enhanced .results-team-nav [data-result-link="strand"] { --logo-scale: .8; }
  .is-enhanced .results-team-nav [data-result-link="kopra"], .is-enhanced .results-team-nav [data-result-link="kathy"] { --logo-scale: .88; }
  .is-enhanced .results-team-nav a[aria-current] .result-brand-image { opacity: 1; }
  .is-enhanced .results-team-nav a::before { inset: 0; border: 0; }
  .is-enhanced .results-team-nav a:hover::before { background: color-mix(in srgb, var(--bg-1) 60%, transparent); }
  .is-enhanced .results-team-nav a[aria-current]::before { inset: -1px calc(0px - var(--showcase-gap)) -1px 0; background: var(--bg-1); }
  .is-enhanced .results-team-nav a[aria-current], .is-enhanced .results-team-nav a[aria-current] + a { border-top-color: transparent; }
  .is-enhanced .results-team-nav a::after {
    content: '';
    position: absolute;
    inset: 50% 16px auto auto;
    width: 8px;
    height: 12px;
    transform: translateY(-50%);
    background: var(--text-faint);
    mask: url('../assets/brand/chevron-right.svg') center / contain no-repeat;
    pointer-events: none;
    transition: background-color 160ms ease;
  }
  .is-enhanced .results-team-nav a:hover::after { background-color: var(--text-muted); }
  /* Only the chosen logo is at full strength, marked by a green bar on its
     outer edge; the rest stay a quiet gray. */
  .is-enhanced .results-team-nav a[aria-current]::after { inset: -1px auto -1px 0; width: 2px; height: auto; transform: none; background: var(--accent); mask: none; }
  .is-enhanced .results-team-nav a:hover { color: var(--accent-dim); }
  .is-enhanced .results-team-nav a:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
  /* "You" reads as one more logo: the same ink, resting gray and full
     strength only when chosen. */
  .is-enhanced .results-team-nav a.application-identity, .is-enhanced .results-team-nav a.application-identity:hover { color: var(--text-heading); }
  .is-enhanced .results-team-nav a.application-identity span { opacity: .45; transition: opacity 160ms ease; }
  .is-enhanced .results-team-nav a.application-identity:hover span { opacity: .8; }
  .is-enhanced .results-team-nav a.application-identity[aria-current] span { opacity: 1; }
  .application-outcome h3 { font: var(--type-h2); }
  /* The Tally form is left-aligned, so its heading follows it. */
  .application-outcome .result-panel-label, .application-outcome h3 { text-align: left; }
  .is-enhanced .results-team-nav a.application-identity { font: 600 20px / 1.2 var(--font-display); letter-spacing: -.02em; }
  .application-identity span { white-space: nowrap; }

}
@media (max-width: 1099px) {
  .results-showcase { max-width: 640px; margin-inline: auto; }
  .results-navigator { display: none; }
  .is-enhanced > .results-mobile-jump { display: block; margin: 0 0 8px; }
  .results-mobile-jump select { width: 100%; min-height: 48px; padding: 12px; font: 400 16px / 1.4 var(--font-display); color: var(--text-heading); background: var(--bg-2); border: 1px solid var(--hairline-strong); border-radius: 4px; }
  .result-story { display: flex; flex-direction: column; gap: 20px; padding: 32px 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
  .result-story > * { width: 100%; }
  .result-mobile-logo { display: flex; align-items: center; gap: 10px; min-height: 44px; }
  .result-mobile-logo .result-brand-image { display: block; width: 160px; height: 40px; object-fit: contain; object-position: left; }
  .result-panel-label { text-align: left; }
  .result-outcome h3 { font-size: clamp(26px, 6.7vw, 34px); line-height: 1.18; }
  .result-figure { margin-top: 20px; }
  .result-presenter { gap: 12px; margin-bottom: 14px; }
  .result-members { font-size: 14px; line-height: 1.5; }
  .result-company > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; font: var(--type-small); color: var(--text-muted); }
  .result-company > summary::-webkit-details-marker { display: none; }
  .result-company > summary::after { content: '+'; font-size: 22px; color: var(--text-heading); }
  .result-company[open] > summary::after { content: '−'; }
  .result-company-copy { padding: 8px 0 4px; }
  .result-mission { font-size: 16px; }
  .result-company-facts { margin-top: 16px; }

}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .results-team-nav a .result-brand-image, .is-enhanced .results-team-nav a::after, .is-enhanced .result-story, .is-enhanced .result-story.is-active { transition: none; }
}